kepler.gl
Version:
kepler.gl is a webgl based application to visualize large scale location data in the browser
894 lines (855 loc) • 204 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.inputColor = exports.inputBorderActiveColorLT = exports.inputBorderActiveColor = exports.inputBorderHoverColorLT = exports.inputBorderHoverColor = exports.inputBorderColor = exports.inputBgdActiveLT = exports.inputBgdActive = exports.inputBgdHover = exports.inputBgd = exports.inputFontWeight = exports.inputFontSizeSmall = exports.inputFontSize = exports.inputPaddingTiny = exports.inputPaddingSmall = exports.inputPadding = exports.inputBoxHeightTiny = exports.inputBoxHeightSmall = exports.inputBoxHeight = exports.selectionBtnBorderActColor = exports.selectionBtnBorderColor = exports.selectionBtnBorder = exports.selectionBtnBgdHover = exports.selectionBtnActColor = exports.selectionBtnColor = exports.selectionBtnActBgd = exports.selectionBtnBgd = exports.floatingBtnActColor = exports.floatingBtnColor = exports.floatingBtnBorderHover = exports.floatingBtnBorder = exports.floatingBtnBgdHover = exports.floatingBtnActBgd = exports.floatingBtnBgd = exports.negativeBtnActColor = exports.negativeBtnColor = exports.negativeBtnBorder = exports.negativeBtnBgdHover = exports.negativeBtnActBgd = exports.negativeBtnBgd = exports.linkBtnBorder = exports.linkBtnActBgdHover = exports.linkBtnActColor = exports.linkBtnColor = exports.linkBtnActBgd = exports.linkBtnBgd = exports.ctaBtnActColor = exports.ctaBtnColor = exports.ctaBtnActBgd = exports.ctaBtnBgdHover = exports.ctaBtnBgd = exports.secondaryBtnBorder = exports.secondaryBtnBgdHover = exports.secondaryBtnActColor = exports.secondaryBtnColor = exports.secondaryBtnActBgd = exports.secondaryBtnBgd = exports.primaryBtnBorder = exports.primaryBtnFontSizeLarge = exports.primaryBtnFontSizeSmall = exports.primaryBtnFontSizeDefault = exports.primaryBtnRadius = exports.primaryBtnBgdHover = exports.primaryBtnActColor = exports.primaryBtnColor = exports.primaryBtnActBgd = exports.primaryBtnBgd = exports.btnFontFamily = exports.logoColor = exports.errorColor = exports.activeColorHover = exports.activeColorLT = exports.activeColor = exports.textColorHlLT = exports.textColorHl = exports.titleTextColor = exports.panelTabWidth = exports.panelToggleBorderColor = exports.subtextColorActive = exports.subtextColorLT = exports.subtextColor = exports.titleColorLT = exports.dataTableTextColor = exports.textColorLT = exports.textColor = exports.labelColorLT = exports.labelHoverColor = exports.labelColor = exports.lineHeight = exports.fontSize = exports.fontWeight = exports.fontFamily = exports.borderColorLT = exports.borderColor = exports.borderRadius = exports.boxSizing = exports.boxShadow = exports.transitionSlow = exports.transitionFast = exports.transition = void 0;
exports.panelBorderRadius = exports.panelBoxShadow = exports.layerPanelHeaderHeight = exports.panelHeaderHeight = exports.panelHeaderIconHover = exports.panelHeaderIconActive = exports.panelHeaderIcon = exports.chickletBgdLT = exports.chickletBgd = exports.panelHeaderBorderRadius = exports.panelBackgroundHover = exports.panelContentBackground = exports.panelBackground = exports.sidePanelTitleLineHeight = exports.sidePanelTitleFontsize = exports.sideBarCloseBtnBgdHover = exports.sideBarCloseBtnColor = exports.sideBarCloseBtnBgd = exports.sidePanelScrollBarHeight = exports.sidePanelScrollBarWidth = exports.sidePanelBg = exports.sidePanelBorderColor = exports.sidePanelBorder = exports.sidePanelInnerPadding = exports.layerConfigGroupPaddingLeft = exports.layerConfigGroupMarginBottom = exports.sidePanelHeaderBorder = exports.sidePanelHeaderBg = exports.radioButtonBgdColor = exports.radioButtonRadius = exports.radioBorderColor = exports.radioBorderRadius = exports.radioRadius = exports.checkboxBoxBgdChecked = exports.checkboxBoxBgd = exports.checkboxBorderColorLT = exports.checkboxBorderRadius = exports.checkboxBorderColor = exports.checkboxMargin = exports.checkboxHeight = exports.checkboxWidth = exports.secondarySwitchBtnBgd = exports.secondarySwitchTrackBgd = exports.switchBtnHeight = exports.switchBtnWidth = exports.switchBtnBorderRadius = exports.switchBtnBoxShadow = exports.switchBtnBgdActive = exports.switchBtnBgd = exports.switchTrackBorderRadius = exports.switchTrackBgdActive = exports.switchTrackBgd = exports.switchLabelMargin = exports.switchHeight = exports.switchWidth = exports.dropdownWapperMargin = exports.dropdownWrapperZ = exports.dropdownListLineHeight = exports.dropdownListBorderTopLT = exports.dropdownListBorderTop = exports.dropdownListBgdLT = exports.toolbarItemBorderRaddius = exports.toolbarItemBorderHover = exports.toolbarItemIconHover = exports.toolbarItemBgdHover = exports.dropdownListBgd = exports.dropdownListShadow = exports.dropdownListHighlightBgLT = exports.dropdownListHighlightBg = exports.panelTabColor = exports.selectBorder = exports.selectBorderRadius = exports.selectBorderColorLT = exports.selectBorderColor = exports.selectBackgroundHoverLT = exports.selectBackgroundLT = exports.selectBackgroundHover = exports.selectBackground = exports.selectColorPlaceHolderLT = exports.selectColorPlaceHolder = exports.selectFontWeightBold = exports.selectFontWeight = exports.selectFontSize = exports.selectActiveBorderColor = exports.selectColorLT = exports.selectColor = exports.dropdownSelectHeight = exports.secondaryInputBorderActiveColor = exports.secondaryInputBorderColor = exports.secondaryInputColor = exports.secondaryInputBgdActive = exports.secondaryInputBgdHover = exports.secondaryInputBgd = exports.inputBoxShadowActiveLT = exports.inputBoxShadowActive = exports.inputBoxShadow = exports.inputPlaceholderFontWeight = exports.inputPlaceholderColorLT = exports.inputPlaceholderColor = exports.inputBorderRadius = void 0;
exports.breakPoints = exports.layerConfiguratorPadding = exports.layerConfiguratorMargin = exports.layerConfiguratorBorderColor = exports.layerConfiguratorBorder = exports.styledConfigGroupHeaderBorder = exports.layerConfigGroupLabelLabelFontSize = exports.layerConfigGroupLabelLabelMargin = exports.layerConfigGroupColor = exports.layerConfigGroupLabelPadding = exports.layerConfigGroupLabelMargin = exports.layerConfigGroupLabelBorderLeft = exports.textTruncate = exports.fieldTokenRightMargin = exports.actionPanelHeight = exports.actionPanelWidth = exports.notificationPanelItemHeight = exports.notificationPanelItemWidth = exports.notificationPanelWidth = exports.notificationColors = exports.rangePlotContainerHLarge = exports.rangePlotHLarge = exports.rangePlotContainerH = exports.rangePlotH = exports.rangePlotMarginLarge = exports.rangePlotMargin = exports.timeTitleFontSize = exports.axisFontColor = exports.axisFontSize = exports.histogramFillOutRange = exports.histogramFillInRange = exports.rangeBrushBgd = exports.geocoderInputHeight = exports.geocoderRight = exports.geocoderTop = exports.geocoderWidth = exports.sliderMarginBottom = exports.sliderMarginTop = exports.sliderMarginTopIsTime = exports.sliderInputPadding = exports.sliderInputFontSize = exports.sliderInputWidth = exports.sliderInputHeight = exports.sliderHandleShadow = exports.sliderHandleAfterContent = exports.sliderHandleHoverColor = exports.sliderBorderRadius = exports.sliderInactiveBorderColor = exports.sliderHandleTextColor = exports.sliderHandleColor = exports.sliderHandleWidth = exports.sliderHandleHeight = exports.sliderBarHeight = exports.sliderBarRadius = exports.sliderBarHoverColor = exports.sliderBarBgd = exports.sliderBarColor = exports.modalDialogColor = exports.modalDialogBgd = exports.modalDropdownBackground = exports.modalButtonZ = exports.modalTitleZ = exports.modalFooterZ = exports.modalContentZ = exports.modalOverlayBgd = exports.modalOverLayZ = exports.modalPortableLateralPadding = exports.modalLateralPadding = exports.modalPadding = exports.modalImagePlaceHolder = exports.modalFooterBgd = exports.modalTitleFontSizeSmaller = exports.modalTitleFontSize = exports.modalTitleColor = exports.bottomWidgetBgd = exports.bottomWidgetPaddingLeft = exports.bottomWidgetPaddingBottom = exports.bottomWidgetPaddingRight = exports.bottomWidgetPaddingTop = exports.bottomPanelGap = exports.bottomInnerPdVert = exports.bottomInnerPdSide = exports.sidepanelDividerHeight = exports.sidepanelDividerMargin = exports.sidepanelDividerBorder = exports.layerTypeIconSizeSM = exports.layerTypeIconPdL = exports.layerTypeIconSizeL = exports.tooltipFontSize = exports.tooltipBoxShadow = exports.tooltipColor = exports.tooltipBg = exports.mapPanelHeaderBackgroundColor = exports.mapPanelBackgroundColor = exports.panelBorderLT = exports.panelBorder = exports.panelBorderColor = exports.panelToggleBottomPadding = exports.panelToggleMarginRight = exports.panelBackgroundLT = void 0;
exports.themeBS = exports.themeLT = exports.theme = exports.modalScrollBar = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _styledComponents = require("styled-components");
var _defaultSettings = require("../constants/default-settings");
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var transition = 'all .4s ease';
exports.transition = transition;
var transitionFast = 'all .2s ease';
exports.transitionFast = transitionFast;
var transitionSlow = 'all .8s ease';
exports.transitionSlow = transitionSlow;
var boxShadow = '0 1px 2px 0 rgba(0,0,0,0.10)';
exports.boxShadow = boxShadow;
var boxSizing = 'border-box';
exports.boxSizing = boxSizing;
var borderRadius = '1px';
exports.borderRadius = borderRadius;
var borderColor = '#3A414C';
exports.borderColor = borderColor;
var borderColorLT = '#F1F1F1'; // TEXT
exports.borderColorLT = borderColorLT;
var fontFamily = "ff-clan-web-pro, 'Helvetica Neue', Helvetica, sans-serif";
exports.fontFamily = fontFamily;
var fontWeight = 400;
exports.fontWeight = fontWeight;
var fontSize = '0.875em';
exports.fontSize = fontSize;
var lineHeight = 1.71429;
exports.lineHeight = lineHeight;
var labelColor = '#6A7485';
exports.labelColor = labelColor;
var labelHoverColor = '#C6C6C6';
exports.labelHoverColor = labelHoverColor;
var labelColorLT = '#6A7485';
exports.labelColorLT = labelColorLT;
var textColor = '#A0A7B4';
exports.textColor = textColor;
var textColorLT = '#3A414C';
exports.textColorLT = textColorLT;
var dataTableTextColor = textColorLT;
exports.dataTableTextColor = dataTableTextColor;
var titleColorLT = '#29323C';
exports.titleColorLT = titleColorLT;
var subtextColor = '#6A7485';
exports.subtextColor = subtextColor;
var subtextColorLT = '#A0A7B4';
exports.subtextColorLT = subtextColorLT;
var subtextColorActive = '#FFFFFF';
exports.subtextColorActive = subtextColorActive;
var panelToggleBorderColor = '#FFFFFF';
exports.panelToggleBorderColor = panelToggleBorderColor;
var panelTabWidth = '30px';
exports.panelTabWidth = panelTabWidth;
var titleTextColor = '#FFFFFF';
exports.titleTextColor = titleTextColor;
var textColorHl = '#F0F0F0';
exports.textColorHl = textColorHl;
var textColorHlLT = '#000000';
exports.textColorHlLT = textColorHlLT;
var activeColor = '#1FBAD6';
exports.activeColor = activeColor;
var activeColorLT = '#2473BD';
exports.activeColorLT = activeColorLT;
var activeColorHover = '#108188';
exports.activeColorHover = activeColorHover;
var errorColor = '#F9042C';
exports.errorColor = errorColor;
var logoColor = activeColor; // Button
exports.logoColor = logoColor;
var btnFontFamily = fontFamily;
exports.btnFontFamily = btnFontFamily;
var primaryBtnBgd = '#0F9668';
exports.primaryBtnBgd = primaryBtnBgd;
var primaryBtnActBgd = '#13B17B';
exports.primaryBtnActBgd = primaryBtnActBgd;
var primaryBtnColor = '#FFFFFF';
exports.primaryBtnColor = primaryBtnColor;
var primaryBtnActColor = '#FFFFFF';
exports.primaryBtnActColor = primaryBtnActColor;
var primaryBtnBgdHover = '#13B17B';
exports.primaryBtnBgdHover = primaryBtnBgdHover;
var primaryBtnRadius = '2px';
exports.primaryBtnRadius = primaryBtnRadius;
var primaryBtnFontSizeDefault = '11px';
exports.primaryBtnFontSizeDefault = primaryBtnFontSizeDefault;
var primaryBtnFontSizeSmall = '10px';
exports.primaryBtnFontSizeSmall = primaryBtnFontSizeSmall;
var primaryBtnFontSizeLarge = '14px';
exports.primaryBtnFontSizeLarge = primaryBtnFontSizeLarge;
var primaryBtnBorder = '0';
exports.primaryBtnBorder = primaryBtnBorder;
var secondaryBtnBgd = '#6A7485';
exports.secondaryBtnBgd = secondaryBtnBgd;
var secondaryBtnActBgd = '#A0A7B4';
exports.secondaryBtnActBgd = secondaryBtnActBgd;
var secondaryBtnColor = '#FFFFFF';
exports.secondaryBtnColor = secondaryBtnColor;
var secondaryBtnActColor = '#FFFFFF';
exports.secondaryBtnActColor = secondaryBtnActColor;
var secondaryBtnBgdHover = '#A0A7B4';
exports.secondaryBtnBgdHover = secondaryBtnBgdHover;
var secondaryBtnBorder = '0';
exports.secondaryBtnBorder = secondaryBtnBorder;
var ctaBtnBgd = '#0F9668';
exports.ctaBtnBgd = ctaBtnBgd;
var ctaBtnBgdHover = '#13B17B';
exports.ctaBtnBgdHover = ctaBtnBgdHover;
var ctaBtnActBgd = '#13B17B';
exports.ctaBtnActBgd = ctaBtnActBgd;
var ctaBtnColor = '#FFFFFF';
exports.ctaBtnColor = ctaBtnColor;
var ctaBtnActColor = '#FFFFFF';
exports.ctaBtnActColor = ctaBtnActColor;
var linkBtnBgd = 'transparent';
exports.linkBtnBgd = linkBtnBgd;
var linkBtnActBgd = linkBtnBgd;
exports.linkBtnActBgd = linkBtnActBgd;
var linkBtnColor = '#A0A7B4';
exports.linkBtnColor = linkBtnColor;
var linkBtnActColor = '#F1F1F1';
exports.linkBtnActColor = linkBtnActColor;
var linkBtnActBgdHover = linkBtnBgd;
exports.linkBtnActBgdHover = linkBtnActBgdHover;
var linkBtnBorder = '0';
exports.linkBtnBorder = linkBtnBorder;
var negativeBtnBgd = errorColor;
exports.negativeBtnBgd = negativeBtnBgd;
var negativeBtnActBgd = '#FF193E';
exports.negativeBtnActBgd = negativeBtnActBgd;
var negativeBtnBgdHover = '#FF193E';
exports.negativeBtnBgdHover = negativeBtnBgdHover;
var negativeBtnBorder = '0';
exports.negativeBtnBorder = negativeBtnBorder;
var negativeBtnColor = '#FFFFFF';
exports.negativeBtnColor = negativeBtnColor;
var negativeBtnActColor = '#FFFFFF';
exports.negativeBtnActColor = negativeBtnActColor;
var floatingBtnBgd = '#29323C';
exports.floatingBtnBgd = floatingBtnBgd;
var floatingBtnActBgd = '#3A4552';
exports.floatingBtnActBgd = floatingBtnActBgd;
var floatingBtnBgdHover = '#3A4552';
exports.floatingBtnBgdHover = floatingBtnBgdHover;
var floatingBtnBorder = '0';
exports.floatingBtnBorder = floatingBtnBorder;
var floatingBtnBorderHover = '0';
exports.floatingBtnBorderHover = floatingBtnBorderHover;
var floatingBtnColor = subtextColor;
exports.floatingBtnColor = floatingBtnColor;
var floatingBtnActColor = subtextColorActive;
exports.floatingBtnActColor = floatingBtnActColor;
var selectionBtnBgd = 'transparent';
exports.selectionBtnBgd = selectionBtnBgd;
var selectionBtnActBgd = 'transparent';
exports.selectionBtnActBgd = selectionBtnActBgd;
var selectionBtnColor = '#D3D8E0';
exports.selectionBtnColor = selectionBtnColor;
var selectionBtnActColor = '#0F9668';
exports.selectionBtnActColor = selectionBtnActColor;
var selectionBtnBgdHover = '#0F9668';
exports.selectionBtnBgdHover = selectionBtnBgdHover;
var selectionBtnBorder = '1';
exports.selectionBtnBorder = selectionBtnBorder;
var selectionBtnBorderColor = '#D3D8E0';
exports.selectionBtnBorderColor = selectionBtnBorderColor;
var selectionBtnBorderActColor = '#0F9668'; // Input
exports.selectionBtnBorderActColor = selectionBtnBorderActColor;
var inputBoxHeight = '34px';
exports.inputBoxHeight = inputBoxHeight;
var inputBoxHeightSmall = '24px';
exports.inputBoxHeightSmall = inputBoxHeightSmall;
var inputBoxHeightTiny = '18px';
exports.inputBoxHeightTiny = inputBoxHeightTiny;
var inputPadding = '4px 10px';
exports.inputPadding = inputPadding;
var inputPaddingSmall = '4px 6px';
exports.inputPaddingSmall = inputPaddingSmall;
var inputPaddingTiny = '2px 4px';
exports.inputPaddingTiny = inputPaddingTiny;
var inputFontSize = '11px';
exports.inputFontSize = inputFontSize;
var inputFontSizeSmall = '10px';
exports.inputFontSizeSmall = inputFontSizeSmall;
var inputFontWeight = 500;
exports.inputFontWeight = inputFontWeight;
var inputBgd = '#29323C';
exports.inputBgd = inputBgd;
var inputBgdHover = '#3A414C';
exports.inputBgdHover = inputBgdHover;
var inputBgdActive = '#3A414C';
exports.inputBgdActive = inputBgdActive;
var inputBgdActiveLT = '#FFFFFF';
exports.inputBgdActiveLT = inputBgdActiveLT;
var inputBorderColor = '#29323C';
exports.inputBorderColor = inputBorderColor;
var inputBorderHoverColor = '#3A414C';
exports.inputBorderHoverColor = inputBorderHoverColor;
var inputBorderHoverColorLT = subtextColor;
exports.inputBorderHoverColorLT = inputBorderHoverColorLT;
var inputBorderActiveColor = '#3A414C';
exports.inputBorderActiveColor = inputBorderActiveColor;
var inputBorderActiveColorLT = textColorLT;
exports.inputBorderActiveColorLT = inputBorderActiveColorLT;
var inputColor = '#A0A7B4';
exports.inputColor = inputColor;
var inputBorderRadius = '1px';
exports.inputBorderRadius = inputBorderRadius;
var inputPlaceholderColor = '#6A7485';
exports.inputPlaceholderColor = inputPlaceholderColor;
var inputPlaceholderColorLT = subtextColorLT;
exports.inputPlaceholderColorLT = inputPlaceholderColorLT;
var inputPlaceholderFontWeight = 400;
exports.inputPlaceholderFontWeight = inputPlaceholderFontWeight;
var inputBoxShadow = 'none';
exports.inputBoxShadow = inputBoxShadow;
var inputBoxShadowActive = 'none';
exports.inputBoxShadowActive = inputBoxShadowActive;
var inputBoxShadowActiveLT = 'none';
exports.inputBoxShadowActiveLT = inputBoxShadowActiveLT;
var secondaryInputBgd = '#242730';
exports.secondaryInputBgd = secondaryInputBgd;
var secondaryInputBgdHover = '#3A414C';
exports.secondaryInputBgdHover = secondaryInputBgdHover;
var secondaryInputBgdActive = '#3A414C';
exports.secondaryInputBgdActive = secondaryInputBgdActive;
var secondaryInputColor = '#A0A7B4';
exports.secondaryInputColor = secondaryInputColor;
var secondaryInputBorderColor = '#242730';
exports.secondaryInputBorderColor = secondaryInputBorderColor;
var secondaryInputBorderActiveColor = '#D3D8E0';
exports.secondaryInputBorderActiveColor = secondaryInputBorderActiveColor;
var dropdownSelectHeight = 30; // Select
exports.dropdownSelectHeight = dropdownSelectHeight;
var selectColor = inputColor;
exports.selectColor = selectColor;
var selectColorLT = titleColorLT;
exports.selectColorLT = selectColorLT;
var selectActiveBorderColor = '#D3D8E0';
exports.selectActiveBorderColor = selectActiveBorderColor;
var selectFontSize = '11px';
exports.selectFontSize = selectFontSize;
var selectFontWeight = '400';
exports.selectFontWeight = selectFontWeight;
var selectFontWeightBold = '500';
exports.selectFontWeightBold = selectFontWeightBold;
var selectColorPlaceHolder = '#6A7485';
exports.selectColorPlaceHolder = selectColorPlaceHolder;
var selectColorPlaceHolderLT = selectColorLT;
exports.selectColorPlaceHolderLT = selectColorPlaceHolderLT;
var selectBackground = inputBgd;
exports.selectBackground = selectBackground;
var selectBackgroundHover = inputBgdHover;
exports.selectBackgroundHover = selectBackgroundHover;
var selectBackgroundLT = '#FFFFFF';
exports.selectBackgroundLT = selectBackgroundLT;
var selectBackgroundHoverLT = '#F8F8F9';
exports.selectBackgroundHoverLT = selectBackgroundHoverLT;
var selectBorderColor = '#D3D8E0';
exports.selectBorderColor = selectBorderColor;
var selectBorderColorLT = '#D3D8E0';
exports.selectBorderColorLT = selectBorderColorLT;
var selectBorderRadius = '1px';
exports.selectBorderRadius = selectBorderRadius;
var selectBorder = 0;
exports.selectBorder = selectBorder;
var panelTabColor = subtextColor;
exports.panelTabColor = panelTabColor;
var dropdownListHighlightBg = '#6A7485';
exports.dropdownListHighlightBg = dropdownListHighlightBg;
var dropdownListHighlightBgLT = '#F8F8F9';
exports.dropdownListHighlightBgLT = dropdownListHighlightBgLT;
var dropdownListShadow = '0 6px 12px 0 rgba(0,0,0,0.16)';
exports.dropdownListShadow = dropdownListShadow;
var dropdownListBgd = '#29323C';
exports.dropdownListBgd = dropdownListBgd;
var toolbarItemBgdHover = '#3A4552';
exports.toolbarItemBgdHover = toolbarItemBgdHover;
var toolbarItemIconHover = textColorHl;
exports.toolbarItemIconHover = toolbarItemIconHover;
var toolbarItemBorderHover = 'transparent';
exports.toolbarItemBorderHover = toolbarItemBorderHover;
var toolbarItemBorderRaddius = '0px';
exports.toolbarItemBorderRaddius = toolbarItemBorderRaddius;
var dropdownListBgdLT = '#FFFFFF';
exports.dropdownListBgdLT = dropdownListBgdLT;
var dropdownListBorderTop = '#242730';
exports.dropdownListBorderTop = dropdownListBorderTop;
var dropdownListBorderTopLT = '#D3D8E0';
exports.dropdownListBorderTopLT = dropdownListBorderTopLT;
var dropdownListLineHeight = 20;
exports.dropdownListLineHeight = dropdownListLineHeight;
var dropdownWrapperZ = 100;
exports.dropdownWrapperZ = dropdownWrapperZ;
var dropdownWapperMargin = 4; // Switch
exports.dropdownWapperMargin = dropdownWapperMargin;
var switchWidth = 24;
exports.switchWidth = switchWidth;
var switchHeight = 12;
exports.switchHeight = switchHeight;
var switchLabelMargin = 12;
exports.switchLabelMargin = switchLabelMargin;
var switchTrackBgd = '#29323C';
exports.switchTrackBgd = switchTrackBgd;
var switchTrackBgdActive = activeColor;
exports.switchTrackBgdActive = switchTrackBgdActive;
var switchTrackBorderRadius = '1px';
exports.switchTrackBorderRadius = switchTrackBorderRadius;
var switchBtnBgd = '#6A7485';
exports.switchBtnBgd = switchBtnBgd;
var switchBtnBgdActive = '#D3D8E0';
exports.switchBtnBgdActive = switchBtnBgdActive;
var switchBtnBoxShadow = '0 2px 4px 0 rgba(0,0,0,0.40)';
exports.switchBtnBoxShadow = switchBtnBoxShadow;
var switchBtnBorderRadius = '0';
exports.switchBtnBorderRadius = switchBtnBorderRadius;
var switchBtnWidth = 12;
exports.switchBtnWidth = switchBtnWidth;
var switchBtnHeight = 12;
exports.switchBtnHeight = switchBtnHeight;
var secondarySwitchTrackBgd = '#242730';
exports.secondarySwitchTrackBgd = secondarySwitchTrackBgd;
var secondarySwitchBtnBgd = '#3A414C'; // Checkbox
exports.secondarySwitchBtnBgd = secondarySwitchBtnBgd;
var checkboxWidth = 16;
exports.checkboxWidth = checkboxWidth;
var checkboxHeight = 16;
exports.checkboxHeight = checkboxHeight;
var checkboxMargin = 12;
exports.checkboxMargin = checkboxMargin;
var checkboxBorderColor = selectBorderColor;
exports.checkboxBorderColor = checkboxBorderColor;
var checkboxBorderRadius = '2px';
exports.checkboxBorderRadius = checkboxBorderRadius;
var checkboxBorderColorLT = selectBorderColorLT;
exports.checkboxBorderColorLT = checkboxBorderColorLT;
var checkboxBoxBgd = 'white';
exports.checkboxBoxBgd = checkboxBoxBgd;
var checkboxBoxBgdChecked = primaryBtnBgd; // Radio
exports.checkboxBoxBgdChecked = checkboxBoxBgdChecked;
var radioRadius = 8;
exports.radioRadius = radioRadius;
var radioBorderRadius = 100;
exports.radioBorderRadius = radioBorderRadius;
var radioBorderColor = 'transparent';
exports.radioBorderColor = radioBorderColor;
var radioButtonRadius = 4;
exports.radioButtonRadius = radioButtonRadius;
var radioButtonBgdColor = switchBtnBgdActive; // Side Panel
exports.radioButtonBgdColor = radioButtonBgdColor;
var sidePanelHeaderBg = '#29323C';
exports.sidePanelHeaderBg = sidePanelHeaderBg;
var sidePanelHeaderBorder = 'transparent';
exports.sidePanelHeaderBorder = sidePanelHeaderBorder;
var layerConfigGroupMarginBottom = 12;
exports.layerConfigGroupMarginBottom = layerConfigGroupMarginBottom;
var layerConfigGroupPaddingLeft = 18;
exports.layerConfigGroupPaddingLeft = layerConfigGroupPaddingLeft;
var sidePanelInnerPadding = 16;
exports.sidePanelInnerPadding = sidePanelInnerPadding;
var sidePanelBorder = 0;
exports.sidePanelBorder = sidePanelBorder;
var sidePanelBorderColor = 'transparent';
exports.sidePanelBorderColor = sidePanelBorderColor;
var sidePanelBg = '#242730';
exports.sidePanelBg = sidePanelBg;
var sidePanelScrollBarWidth = 10;
exports.sidePanelScrollBarWidth = sidePanelScrollBarWidth;
var sidePanelScrollBarHeight = 10;
exports.sidePanelScrollBarHeight = sidePanelScrollBarHeight;
var sideBarCloseBtnBgd = secondaryBtnBgd;
exports.sideBarCloseBtnBgd = sideBarCloseBtnBgd;
var sideBarCloseBtnColor = '#29323C';
exports.sideBarCloseBtnColor = sideBarCloseBtnColor;
var sideBarCloseBtnBgdHover = secondaryBtnActBgd;
exports.sideBarCloseBtnBgdHover = sideBarCloseBtnBgdHover;
var sidePanelTitleFontsize = '20px';
exports.sidePanelTitleFontsize = sidePanelTitleFontsize;
var sidePanelTitleLineHeight = '1.71429';
exports.sidePanelTitleLineHeight = sidePanelTitleLineHeight;
var panelBackground = '#29323C';
exports.panelBackground = panelBackground;
var panelContentBackground = '#292E36';
exports.panelContentBackground = panelContentBackground;
var panelBackgroundHover = '#3A4552';
exports.panelBackgroundHover = panelBackgroundHover;
var panelHeaderBorderRadius = '0px';
exports.panelHeaderBorderRadius = panelHeaderBorderRadius;
var chickletBgd = '#3A4552';
exports.chickletBgd = chickletBgd;
var chickletBgdLT = '#D3D8E0';
exports.chickletBgdLT = chickletBgdLT;
var panelHeaderIcon = '#6A7485';
exports.panelHeaderIcon = panelHeaderIcon;
var panelHeaderIconActive = '#A0A7B4';
exports.panelHeaderIconActive = panelHeaderIconActive;
var panelHeaderIconHover = textColorHl;
exports.panelHeaderIconHover = panelHeaderIconHover;
var panelHeaderHeight = 48;
exports.panelHeaderHeight = panelHeaderHeight;
var layerPanelHeaderHeight = 48;
exports.layerPanelHeaderHeight = layerPanelHeaderHeight;
var panelBoxShadow = '0 6px 12px 0 rgba(0,0,0,0.16)';
exports.panelBoxShadow = panelBoxShadow;
var panelBorderRadius = '2px';
exports.panelBorderRadius = panelBorderRadius;
var panelBackgroundLT = '#F8F8F9';
exports.panelBackgroundLT = panelBackgroundLT;
var panelToggleMarginRight = 12;
exports.panelToggleMarginRight = panelToggleMarginRight;
var panelToggleBottomPadding = 6;
exports.panelToggleBottomPadding = panelToggleBottomPadding;
var panelBorderColor = '#3A414C';
exports.panelBorderColor = panelBorderColor;
var panelBorder = "1px solid ".concat(borderColor);
exports.panelBorder = panelBorder;
var panelBorderLT = "1px solid ".concat(borderColorLT);
exports.panelBorderLT = panelBorderLT;
var mapPanelBackgroundColor = '#242730';
exports.mapPanelBackgroundColor = mapPanelBackgroundColor;
var mapPanelHeaderBackgroundColor = '#29323C';
exports.mapPanelHeaderBackgroundColor = mapPanelHeaderBackgroundColor;
var tooltipBg = '#3A414C';
exports.tooltipBg = tooltipBg;
var tooltipColor = textColorHl;
exports.tooltipColor = tooltipColor;
var tooltipBoxShadow = boxShadow;
exports.tooltipBoxShadow = tooltipBoxShadow;
var tooltipFontSize = '10px';
exports.tooltipFontSize = tooltipFontSize;
var layerTypeIconSizeL = 50;
exports.layerTypeIconSizeL = layerTypeIconSizeL;
var layerTypeIconPdL = 12;
exports.layerTypeIconPdL = layerTypeIconPdL;
var layerTypeIconSizeSM = 28; // Sidepanel divider
exports.layerTypeIconSizeSM = layerTypeIconSizeSM;
var sidepanelDividerBorder = '1px';
exports.sidepanelDividerBorder = sidepanelDividerBorder;
var sidepanelDividerMargin = 12;
exports.sidepanelDividerMargin = sidepanelDividerMargin;
var sidepanelDividerHeight = 12; // Bottom Panel
exports.sidepanelDividerHeight = sidepanelDividerHeight;
var bottomInnerPdSide = 32;
exports.bottomInnerPdSide = bottomInnerPdSide;
var bottomInnerPdVert = 6;
exports.bottomInnerPdVert = bottomInnerPdVert;
var bottomPanelGap = 20;
exports.bottomPanelGap = bottomPanelGap;
var bottomWidgetPaddingTop = 20;
exports.bottomWidgetPaddingTop = bottomWidgetPaddingTop;
var bottomWidgetPaddingRight = 20;
exports.bottomWidgetPaddingRight = bottomWidgetPaddingRight;
var bottomWidgetPaddingBottom = 30;
exports.bottomWidgetPaddingBottom = bottomWidgetPaddingBottom;
var bottomWidgetPaddingLeft = 20;
exports.bottomWidgetPaddingLeft = bottomWidgetPaddingLeft;
var bottomWidgetBgd = '#29323C'; // Modal
exports.bottomWidgetBgd = bottomWidgetBgd;
var modalTitleColor = '#3A414C';
exports.modalTitleColor = modalTitleColor;
var modalTitleFontSize = '24px';
exports.modalTitleFontSize = modalTitleFontSize;
var modalTitleFontSizeSmaller = '18px';
exports.modalTitleFontSizeSmaller = modalTitleFontSizeSmaller;
var modalFooterBgd = '#F8F8F9';
exports.modalFooterBgd = modalFooterBgd;
var modalImagePlaceHolder = '#DDDFE3';
exports.modalImagePlaceHolder = modalImagePlaceHolder;
var modalPadding = '10px 0';
exports.modalPadding = modalPadding;
var modalLateralPadding = '72px';
exports.modalLateralPadding = modalLateralPadding;
var modalPortableLateralPadding = '36px';
exports.modalPortableLateralPadding = modalPortableLateralPadding;
var modalOverLayZ = 1001;
exports.modalOverLayZ = modalOverLayZ;
var modalOverlayBgd = 'rgba(0, 0, 0, 0.5)';
exports.modalOverlayBgd = modalOverlayBgd;
var modalContentZ = 10002;
exports.modalContentZ = modalContentZ;
var modalFooterZ = 10001;
exports.modalFooterZ = modalFooterZ;
var modalTitleZ = 10003;
exports.modalTitleZ = modalTitleZ;
var modalButtonZ = 10005;
exports.modalButtonZ = modalButtonZ;
var modalDropdownBackground = '#FFFFFF'; // Modal Dialog (Dark)
exports.modalDropdownBackground = modalDropdownBackground;
var modalDialogBgd = '#3A414C';
exports.modalDialogBgd = modalDialogBgd;
var modalDialogColor = textColorHl; // Slider
exports.modalDialogColor = modalDialogColor;
var sliderBarColor = '#6A7485';
exports.sliderBarColor = sliderBarColor;
var sliderBarBgd = '#3A414C';
exports.sliderBarBgd = sliderBarBgd;
var sliderBarHoverColor = '#D3D8E0';
exports.sliderBarHoverColor = sliderBarHoverColor;
var sliderBarRadius = '1px';
exports.sliderBarRadius = sliderBarRadius;
var sliderBarHeight = 4;
exports.sliderBarHeight = sliderBarHeight;
var sliderHandleHeight = 12;
exports.sliderHandleHeight = sliderHandleHeight;
var sliderHandleWidth = 12;
exports.sliderHandleWidth = sliderHandleWidth;
var sliderHandleColor = '#D3D8E0';
exports.sliderHandleColor = sliderHandleColor;
var sliderHandleTextColor = sliderHandleColor;
exports.sliderHandleTextColor = sliderHandleTextColor;
var sliderInactiveBorderColor = sliderHandleColor;
exports.sliderInactiveBorderColor = sliderInactiveBorderColor;
var sliderBorderRadius = '0';
exports.sliderBorderRadius = sliderBorderRadius;
var sliderHandleHoverColor = '#FFFFFF';
exports.sliderHandleHoverColor = sliderHandleHoverColor;
var sliderHandleAfterContent = '';
exports.sliderHandleAfterContent = sliderHandleAfterContent;
var sliderHandleShadow = '0 2px 4px 0 rgba(0,0,0,0.40)';
exports.sliderHandleShadow = sliderHandleShadow;
var sliderInputHeight = 24;
exports.sliderInputHeight = sliderInputHeight;
var sliderInputWidth = 56;
exports.sliderInputWidth = sliderInputWidth;
var sliderInputFontSize = '10px';
exports.sliderInputFontSize = sliderInputFontSize;
var sliderInputPadding = '4px 6px';
exports.sliderInputPadding = sliderInputPadding;
var sliderMarginTopIsTime = -12;
exports.sliderMarginTopIsTime = sliderMarginTopIsTime;
var sliderMarginTop = 12;
exports.sliderMarginTop = sliderMarginTop;
var sliderMarginBottom = 12; // Geocoder
exports.sliderMarginBottom = sliderMarginBottom;
var geocoderWidth = 360;
exports.geocoderWidth = geocoderWidth;
var geocoderTop = 20;
exports.geocoderTop = geocoderTop;
var geocoderRight = 12;
exports.geocoderRight = geocoderRight;
var geocoderInputHeight = 36; // Plot
exports.geocoderInputHeight = geocoderInputHeight;
var rangeBrushBgd = '#3A414C';
exports.rangeBrushBgd = rangeBrushBgd;
var histogramFillInRange = activeColor;
exports.histogramFillInRange = histogramFillInRange;
var histogramFillOutRange = sliderBarColor;
exports.histogramFillOutRange = histogramFillOutRange;
var axisFontSize = '10px';
exports.axisFontSize = axisFontSize;
var axisFontColor = textColor;
exports.axisFontColor = axisFontColor;
var timeTitleFontSize = '10px';
exports.timeTitleFontSize = timeTitleFontSize;
var rangePlotMargin = {
top: 12,
bottom: 0,
left: 0,
right: 0
};
exports.rangePlotMargin = rangePlotMargin;
var rangePlotMarginLarge = {
top: 18,
bottom: 0,
left: 0,
right: 0
};
exports.rangePlotMarginLarge = rangePlotMarginLarge;
var rangePlotH = 62;
exports.rangePlotH = rangePlotH;
var rangePlotContainerH = 78;
exports.rangePlotContainerH = rangePlotContainerH;
var rangePlotHLarge = 102;
exports.rangePlotHLarge = rangePlotHLarge;
var rangePlotContainerHLarge = 120; // Notification
exports.rangePlotContainerHLarge = rangePlotContainerHLarge;
var notificationColors = {
info: '#276ef1',
error: '#f25138',
success: '#47b275',
warning: '#ffc043'
};
exports.notificationColors = notificationColors;
var notificationPanelWidth = 240;
exports.notificationPanelWidth = notificationPanelWidth;
var notificationPanelItemWidth = notificationPanelWidth - 60;
exports.notificationPanelItemWidth = notificationPanelItemWidth;
var notificationPanelItemHeight = 60; // Data Table
exports.notificationPanelItemHeight = notificationPanelItemHeight;
var headerRowHeight = 70;
var rowHeight = 32;
var headerPaddingTop = 6;
var headerPaddingBottom = 8;
var cellPaddingSide = 10;
var edgeCellPaddingSide = 10;
var cellFontSize = 10;
var gridPaddingSide = 24;
var headerCellBackground = '#FFFFFF';
var headerCellBorderColor = '#E0E0E0';
var headerCellIconColor = '#666666';
var cellBorderColor = '#E0E0E0';
var evenRowBackground = '#FFFFFF';
var oddRowBackground = '#F7F7F7';
var optionButtonColor = '#6A7485';
var pinnedGridBorderColor = '#E0E0E0'; // Floating Time display
var timeDisplayBorderRadius = 32;
var timeDisplayHeight = 64;
var timeDisplayMinWidth = 176;
var timeDisplayOpacity = 0.8;
var timeDisplayPadding = '0 24px'; // Export map modal
var exportIntraSectionMargin = '8'; // progress bar
var progressBarColor = primaryBtnBgd;
var progressBarTrackColor = '#E8E8E8'; // Action Panel
var actionPanelWidth = 110;
exports.actionPanelWidth = actionPanelWidth;
var actionPanelHeight = 32; // Styled Token
exports.actionPanelHeight = actionPanelHeight;
var fieldTokenRightMargin = 4;
exports.fieldTokenRightMargin = fieldTokenRightMargin;
var textTruncate = {
maxWidth: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
wordWrap: 'normal'
}; // layerConfigGroupLabel
exports.textTruncate = textTruncate;
var layerConfigGroupLabelBorderLeft = '2px';
exports.layerConfigGroupLabelBorderLeft = layerConfigGroupLabelBorderLeft;
var layerConfigGroupLabelMargin = '-12px';
exports.layerConfigGroupLabelMargin = layerConfigGroupLabelMargin;
var layerConfigGroupLabelPadding = '10px';
exports.layerConfigGroupLabelPadding = layerConfigGroupLabelPadding;
var layerConfigGroupColor = 'transparent'; // layerConfigGroupLabel label
exports.layerConfigGroupColor = layerConfigGroupColor;
var layerConfigGroupLabelLabelMargin = '0';
exports.layerConfigGroupLabelLabelMargin = layerConfigGroupLabelLabelMargin;
var layerConfigGroupLabelLabelFontSize = '12px'; // styledConfigGroupHeader
exports.layerConfigGroupLabelLabelFontSize = layerConfigGroupLabelLabelFontSize;
var styledConfigGroupHeaderBorder = '2px'; // layerConfigurator
exports.styledConfigGroupHeaderBorder = styledConfigGroupHeaderBorder;
var layerConfiguratorBorder = '0';
exports.layerConfiguratorBorder = layerConfiguratorBorder;
var layerConfiguratorBorderColor = '';
exports.layerConfiguratorBorderColor = layerConfiguratorBorderColor;
var layerConfiguratorMargin = '12px';
exports.layerConfiguratorMargin = layerConfiguratorMargin;
var layerConfiguratorPadding = '12px 0 8px 0'; // This breakpoints are used for responsive design
exports.layerConfiguratorPadding = layerConfiguratorPadding;
var breakPoints = {
palm: 588,
desk: 768
}; // theme is passed to kepler.gl when it's mounted,
// it is used by styled-components to pass along to
// all child components
exports.breakPoints = breakPoints;
var input = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n ::placeholder {\n color: ", ";\n font-weight: ", ";\n }\n\n /* Disable Arrows on Number Inputs */\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n align-items: center;\n background-color: ", ";\n border: 1px solid\n ", ";\n border-radius: 2px;\n caret-color: ", ";\n color: ", ";\n display: flex;\n font-size: ", ";\n font-weight: ", ";\n font-family: ", ";\n height: ", ";\n justify-content: space-between;\n outline: none;\n overflow: hidden;\n padding: ", ";\n text-overflow: ellipsis;\n transition: ", ";\n white-space: nowrap;\n width: 100%;\n word-wrap: normal;\n pointer-events: ", ";\n opacity: ", ";\n box-shadow: ", ";\n\n :hover {\n cursor: ", ";\n background-color: ", ";\n border-color: ", ";\n }\n\n :active,\n :focus,\n &.focus,\n &.active {\n background-color: ", ";\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (props) {
return props.theme.inputPlaceholderColor;
}, function (props) {
return props.theme.inputPlaceholderFontWeight;
}, function (props) {
return props.theme.inputBgd;
}, function (props) {
return props.active ? props.theme.inputBorderActiveColor : props.error ? props.theme.errorColor : props.theme.inputBgd;
}, function (props) {
return props.theme.inputBorderActiveColor;
}, function (props) {
return props.theme.inputColor;
}, function (props) {
return ['small', 'tiny'].includes(props.size) ? props.theme.inputFontSizeSmall : props.theme.inputFontSize;
}, function (props) {
return props.theme.inputFontWeight;
}, function (props) {
return props.theme.fontFamily;
}, function (props) {
return props.size === 'small' ? props.theme.inputBoxHeightSmall : props.size === 'tiny' ? props.theme.inputBoxHeightTiny : props.theme.inputBoxHeight;
}, function (props) {
return props.size === 'small' ? props.theme.inputPaddingSmall : props.size === 'tiny' ? props.theme.inputPaddingTiny : props.theme.inputPadding;
}, function (props) {
return props.theme.transition;
}, function (props) {
return props.disabled ? 'none' : 'all';
}, function (props) {
return props.disabled ? 0.5 : 1;
}, function (props) {
return props.theme.inputBoxShadow;
}, function (props) {
return props.type === 'number' || props.type === 'text' ? 'text' : 'pointer';
}, function (props) {
return props.active ? props.theme.inputBgdActive : props.theme.inputBgdHover;
}, function (props) {
return props.active ? props.theme.inputBorderActiveColor : props.theme.inputBorderHoverColor;
}, function (props) {
return props.theme.inputBgdActive;
}, function (props) {
return props.theme.inputBorderActiveColor;
}, function (props) {
return props.theme.inputBoxShadowActive;
});
var inputLT = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n ::placeholder {\n color: ", ";\n font-weight: 400;\n }\n ", "\n\n background-color: ", ";\n border: 1px solid\n ", ";\n color: ", ";\n caret-color: ", ";\n\n :hover {\n background-color: ", ";\n cursor: ", ";\n border-color: ", ";\n }\n\n :active,\n :focus,\n &.focus,\n &.active {\n background-color: ", ";\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (props) {
return props.theme.inputPlaceholderColorLT;
}, input, function (props) {
return props.theme.selectBackgroundLT;
}, function (props) {
return props.active ? props.theme.selectActiveBorderColor : props.error ? props.theme.errorColor : props.theme.selectBorderColorLT;
}, function (props) {
return props.theme.selectColorLT;
}, function (props) {
return props.theme.inputBorderActiveColorLT;
}, function (props) {
return props.theme.inputBgdActiveLT;
}, function (props) {
return ['number', 'text'].includes(props.type) ? 'text' : 'pointer';
}, function (props) {
return props.active ? props.theme.inputBorderActiveColorLT : props.theme.inputBorderHoverColorLT;
}, function (props) {
return props.theme.inputBgdActiveLT;
}, function (props) {
return props.theme.inputBorderActiveColorLT;
}, function (props) {
return props.theme.inputBoxShadowActiveLT;
});
var secondaryInput = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n color: ", ";\n background-color: ", ";\n border: 1px solid\n ", ";\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n border-color: ", ";\n }\n\n :active,\n &.active {\n background-color: ", ";\n border-color: ", ";\n }\n"])), function (props) {
return props.theme.input;
}, function (props) {
return props.theme.secondaryInputColor;
}, function (props) {
return props.theme.secondaryInputBgd;
}, function (props) {
return props.error ? props.theme.errorColor : props.theme.secondaryInputBorderColor;
}, function (props) {
return props.theme.secondaryInputBgdHover;
}, function (props) {
return props.theme.secondaryInputBgdHover;
}, function (props) {
return props.theme.secondaryInputBgdActive;
}, function (props) {
return props.theme.secondaryInputBorderActiveColor;
});
var chickletedInputContainer = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n cursor: pointer;\n flex-wrap: wrap;\n height: auto;\n justify-content: start;\n margin-bottom: 2px;\n padding: 0px 7px 0px 4px;\n white-space: normal;\n\n .chickleted-input__placeholder {\n line-height: 24px;\n margin: 4px;\n }\n"])));
var chickletedInput = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n ", " ", ";\n"])), function (props) {
return props.theme.input;
}, function (props) {
return props.theme.chickletedInputContainer;
});
var chickletedInputLT = (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n ", " ", ";\n"])), function (props) {
return props.theme.inputLT;
}, function (props) {
return props.theme.chickletedInputContainer;
});
var secondaryChickletedInput = (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n ", " ", ";\n"])), function (props) {
return props.theme.secondaryInput;
}, function (props) {
return props.theme.chickletedInputContainer;
});
var inlineInput = (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n ", " color: ", ";\n font-size: 13px;\n letter-spacing: 0.43px;\n line-height: 18px;\n height: 24px;\n font-weight: 400;\n padding-left: 4px;\n margin-left: -4px;\n background-color: transparent;\n border: 1px solid transparent;\n\n :hover {\n height: 24px;\n cursor: text;\n background-color: transparent;\n border: 1px solid ", ";\n }\n\n :active,\n .active,\n :focus {\n background-color: transparent;\n border: 1px solid ", ";\n }\n"])), function (props) {
return props.theme.input;
}, function (props) {
return props.theme.textColor;
}, function (props) {
return props.theme.labelColor;
}, function (props) {
return props.theme.inputBorderActiveColor;
});
var switchTrack = (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n background: ", ";\n position: absolute;\n top: 0;\n left: ", "px;\n content: '';\n display: block;\n width: ", "px;\n height: ", "px;\n border-radius: ", ";\n"])), function (props) {
return props.checked ? props.theme.switchTrackBgdActive : props.theme.switchTrackBgd;
}, function (props) {
return -props.theme.switchLabelMargin;
}, function (props) {
return props.theme.switchWidth;
}, function (props) {
return props.theme.switchHeight;
}, function (props) {
return props.theme.switchTrackBorderRadius;
});
var switchButton = (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n transition: ", ";\n position: absolute;\n top: ", "px;\n left: ", "px;\n content: '';\n display: block;\n height: ", "px;\n width: ", "px;\n background: ", ";\n box-shadow: ", ";\n border-radius: ", ";\n"])), function (props) {
return props.theme.transition;
}, function (props) {
return (props.theme.switchHeight - props.theme.switchBtnHeight) / 2;
}, function (props) {
return (props.checked ? props.theme.switchWidth / 2 : (props.theme.switchHeight - props.theme.switchBtnHeight) / 2) - props.theme.switchLabelMargin;
}, function (props) {
return props.theme.switchBtnHeight;
}, function (props) {
return props.theme.switchBtnWidth;
}, function (props) {
return props.checked ? props.theme.switchBtnBgdActive : props.theme.switchBtnBgd;
}, function (props) {
return props.theme.switchBtnBoxShadow;
}, function (props) {
return props.theme.switchBtnBorderRadius;
});
var inputSwitch = (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n user-select: none;\n cursor: pointer;\n line-height: ", "px;\n font-weight: 500;\n font-size: 12px;\n color: ", ";\n position: relative;\n display: inline-block;\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n padding-left: ", "px;\n\n :before {\n ", ";\n }\n\n :after {\n ", ";\n }\n"])), function (props) {
return props.theme.switchHeight;
}, function (props) {
return props.theme.labelColor;
}, function (props) {
return props.theme.switchWidth;
}, function (props) {
return props.theme.switchTrack;
}, function (props) {
return props.theme.switchButton;
}); // This is a light version checkbox
var checkboxBox = (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: ", "px;\n height: ", "px;\n background: ", ";\n border: 1px solid\n ", ";\n border-radius: 2px;\n content: '';\n"])), function (props) {
return props.theme.checkboxWidth;
}, function (props) {
return props.theme.checkboxHeight;
}, function (props) {
return props.checked ? props.theme.checkboxBoxBgdChecked : props.theme.checkboxBoxBgd;
}, function (props) {
return props.checked ? props.theme.checkboxBoxBgdChecked : props.theme.checkboxBorderColor;
});
var checkboxCheck = (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n width: 10px;\n height: 5px;\n border-bottom: 2px solid white;\n border-left: 2px solid white;\n top: 4px;\n left: 3px;\n transform: rotate(-45deg);\n display: block;\n position: absolute;\n opacity: ", ";\n content: '';\n"])), function (props) {
return props.checked ? 1 : 0;
});
var inputCheckbox = (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-block;\n position: relative;\n padding-left: 32px;\n margin-bottom: 24px;\n line-height: 20px;\n vertical-align: middle;\n cursor: pointer;\n font-size: 12px;\n color: ", ";\n margin-left: -", "px;\n\n :before {\n ", ";\n }\n\n :after {\n ", ";\n }\n"])), function (props) {
return props.theme.labelColor;
}, function (props) {
return props.theme.switchLabelMargin;
}, function (props) {
return props.theme.checkboxBox;
}, function (props) {
return props.theme.checkboxCheck;
});
var inputRadio = (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n padding-left: ", "px;\n margin-bottom: 0;\n margin-left: 0;\n line-height: ", "px;\n color: ", ";\n cursor: pointer;\n\n :before {\n ", "\n width: ", "px;\n height: ", "px;\n border-radius: ", "px;\n background-color: ", ";\n border-color: ", ";\n }\n\n :after {\n top: ", "px;\n left: ", "px;\n display: table;\n width: ", "px;\n height: ", "px;\n border-radius: ", "px;\n border: 0;\n background-color: ", ";\n }\n"])), function (props) {
return props.theme.inputCheckbox;
}, function (props) {
return props.theme.radioRadius * 2 + 8;
}, function (props) {
return props.theme.radioRadius * 2;
}, function (props) {
return props.theme.textColorHl;
}, function (props) {
return props.theme.checkboxBox;
}, function (props) {
return props.theme.radioRadius * 2;
}, function (props) {
return props.theme.radioRadius * 2;
}, function (props) {
return props.theme.radioBorderRadius;
}, function (props) {
return props.theme.switchTrackBgd;
}, function (props) {
return props.theme.radioBorderColor;
}, function (pr