@foxford/ui 2.87.0 → 2.87.2-beta-50b609f-20251201
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/AccordionItem/style.js +1 -1
- package/components/AccordionItem/style.js.map +1 -1
- package/components/AccordionItem/style.mjs +1 -1
- package/components/AccordionItem/style.mjs.map +1 -1
- package/components/ActionBtn/style.js +1 -1
- package/components/ActionBtn/style.js.map +1 -1
- package/components/ActionBtn/style.mjs +1 -1
- package/components/ActionBtn/style.mjs.map +1 -1
- package/components/Anchor/style.js +1 -1
- package/components/Anchor/style.js.map +1 -1
- package/components/Anchor/style.mjs +1 -1
- package/components/Anchor/style.mjs.map +1 -1
- package/components/Arrow/style.js +1 -1
- package/components/Arrow/style.js.map +1 -1
- package/components/Arrow/style.mjs +1 -1
- package/components/Arrow/style.mjs.map +1 -1
- package/components/Button/style.js +1 -1
- package/components/Button/style.js.map +1 -1
- package/components/Button/style.mjs +1 -1
- package/components/Button/style.mjs.map +1 -1
- package/components/Checkbox/style.js +1 -1
- package/components/Checkbox/style.js.map +1 -1
- package/components/Checkbox/style.mjs +1 -1
- package/components/Checkbox/style.mjs.map +1 -1
- package/components/Chip/style.js +1 -1
- package/components/Chip/style.js.map +1 -1
- package/components/Chip/style.mjs +1 -1
- package/components/Chip/style.mjs.map +1 -1
- package/components/ContextMenu/style.js +1 -1
- package/components/ContextMenu/style.js.map +1 -1
- package/components/ContextMenu/style.mjs +1 -1
- package/components/ContextMenu/style.mjs.map +1 -1
- package/components/FormInput/style.js +1 -1
- package/components/FormInput/style.js.map +1 -1
- package/components/FormInput/style.mjs +1 -1
- package/components/FormInput/style.mjs.map +1 -1
- package/components/FormInputLabel/style.js +1 -1
- package/components/FormInputLabel/style.js.map +1 -1
- package/components/FormInputLabel/style.mjs +1 -1
- package/components/FormInputLabel/style.mjs.map +1 -1
- package/components/FormLabel/style.js +1 -1
- package/components/FormLabel/style.js.map +1 -1
- package/components/FormLabel/style.mjs +1 -1
- package/components/FormLabel/style.mjs.map +1 -1
- package/components/IconButton/style.js +1 -1
- package/components/IconButton/style.js.map +1 -1
- package/components/IconButton/style.mjs +1 -1
- package/components/IconButton/style.mjs.map +1 -1
- package/components/InputCheckbox/style.js +1 -1
- package/components/InputCheckbox/style.js.map +1 -1
- package/components/InputCheckbox/style.mjs +1 -1
- package/components/InputCheckbox/style.mjs.map +1 -1
- package/components/InputRadio/style.js +1 -1
- package/components/InputRadio/style.js.map +1 -1
- package/components/InputRadio/style.mjs +1 -1
- package/components/InputRadio/style.mjs.map +1 -1
- package/components/ListItem/style.js +1 -1
- package/components/ListItem/style.js.map +1 -1
- package/components/ListItem/style.mjs +1 -1
- package/components/ListItem/style.mjs.map +1 -1
- package/components/MenuComponent/style.js +1 -1
- package/components/MenuComponent/style.js.map +1 -1
- package/components/MenuComponent/style.mjs +1 -1
- package/components/MenuComponent/style.mjs.map +1 -1
- package/components/Modal/style.js +1 -1
- package/components/Modal/style.js.map +1 -1
- package/components/Modal/style.mjs +1 -1
- package/components/Modal/style.mjs.map +1 -1
- package/components/Select/style.js +1 -1
- package/components/Select/style.js.map +1 -1
- package/components/Select/style.mjs +1 -1
- package/components/Select/style.mjs.map +1 -1
- package/components/Switch/style.js +1 -1
- package/components/Switch/style.js.map +1 -1
- package/components/Switch/style.mjs +1 -1
- package/components/Switch/style.mjs.map +1 -1
- package/components/Tab/style.js +1 -1
- package/components/Tab/style.js.map +1 -1
- package/components/Tab/style.mjs +1 -1
- package/components/Tab/style.mjs.map +1 -1
- package/components/TabListTab/style.js +1 -1
- package/components/TabListTab/style.js.map +1 -1
- package/components/TabListTab/style.mjs +1 -1
- package/components/TabListTab/style.mjs.map +1 -1
- package/components/Tabs/style.js +1 -1
- package/components/Tabs/style.js.map +1 -1
- package/components/Tabs/style.mjs +1 -1
- package/components/Tabs/style.mjs.map +1 -1
- package/components/Tag/style.js +1 -1
- package/components/Tag/style.js.map +1 -1
- package/components/Tag/style.mjs +1 -1
- package/components/Tag/style.mjs.map +1 -1
- package/components/Text/style.js +1 -1
- package/components/Text/style.js.map +1 -1
- package/components/Text/style.mjs +1 -1
- package/components/Text/style.mjs.map +1 -1
- package/mixins/hover.js +2 -0
- package/mixins/hover.js.map +1 -0
- package/mixins/hover.mjs +2 -0
- package/mixins/hover.mjs.map +1 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Select/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { display } from 'mixins/display'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { errorStyle } from 'components/Input/style'\nimport type { SelectProps } from './types'\n\nconst fadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`\n\nconst spin = keyframes`\n to {\n transform: rotate(1turn);\n }\n`\n\nconst fluid = css`\n width: 100%;\n .Select {\n max-width: 100%;\n width: 100%;\n }\n`\n\nconst error = css`\n .Select-control {\n ${errorStyle}\n }\n`\n\nexport const Root = styled.span.withConfig<SelectProps>({\n shouldForwardProp: (prop) => ['children'].includes(prop),\n})`\n .Select {\n position: relative;\n }\n .Select,\n .Select div,\n .Select input,\n .Select span {\n box-sizing: border-box;\n }\n .Select.is-disabled > .Select-control {\n cursor: not-allowed;\n background-color: #f5f5f5;\n }\n .Select.is-disabled .Select-value-label {\n color: rgba(0, 0, 0, 0.16) !important;\n }\n .Select.is-disabled > .Select-control:hover {\n box-shadow: none;\n }\n .Select.is-disabled .Select-arrow-zone {\n cursor: default;\n pointer-events: none;\n opacity: 0.35;\n }\n .Select.is-clearable {\n .Select-placeholder,\n &.Select--single > .Select-control .Select-value {\n padding-right: 70px;\n }\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-control {\n background-color: ${(props) => props.theme.colors.white};\n border: solid 1px ${(props) => props.theme.colors.alto};\n border-radius: 4px;\n color: ${(props) => props.theme.colors.mineShaft};\n cursor: default;\n display: table;\n border-spacing: 0;\n border-collapse: separate;\n height: 50px;\n outline: none;\n overflow: hidden;\n position: relative;\n width: 100%;\n }\n .Select-control .Select-input:focus {\n outline: none;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-searchable.is-open > .Select-control {\n cursor: text;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-open > .Select-control {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n border: 1px solid ${(props) => props.theme.colors.accent};\n outline: none;\n }\n .is-open > .Select-control .Select-arrow {\n transform: rotate(180deg);\n }\n .is-searchable.is-focused:not(.is-open) > .Select-control {\n cursor: text;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-focused:not(.is-open) > .Select-control {\n border: 1px solid ${(props) => props.theme.colors.accent};\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-placeholder,\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--single > .Select-control .Select-value {\n bottom: 0;\n color: ${(props) => props.theme.colors.silver};\n left: 0;\n font-size: 16px;\n line-height: 50px;\n padding-left: 20px;\n padding-right: 35px;\n position: absolute;\n right: 0;\n top: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .has-value.Select--single > .Select-control .Select-value .Select-value-label,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {\n color: ${(props) => props.theme.colors.mineShaft};\n }\n .has-value.Select--single > .Select-control .Select-value a.Select-value-label,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {\n cursor: pointer;\n text-decoration: none;\n }\n .has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,\n /* stylelint-disable-next-line no-descending-specificity */\n .has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {\n color: #007eff;\n outline: none;\n text-decoration: underline;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-input {\n height: 50px;\n padding-left: 20px;\n padding-right: 15px;\n vertical-align: middle;\n }\n .Select-input > input {\n width: 100%;\n background: none transparent;\n border: 0 none;\n box-shadow: none;\n cursor: default;\n display: inline-block;\n font-family: inherit;\n font-size: 16px;\n margin: 0;\n outline: none;\n line-height: 30px;\n padding: 10px 0;\n -webkit-appearance: none;\n }\n .is-focused .Select-input > input {\n cursor: text;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-focused .Select-arrow,\n .Select-arrow-zone:hover > .Select-arrow {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');\n }\n .has-value.is-pseudo-focused .Select-input {\n opacity: 0;\n }\n .Select-control:not(.is-searchable) > .Select-input {\n outline: none;\n }\n .Select-loading-zone {\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 16px;\n }\n .Select-loading {\n animation: ${spin} 400ms infinite linear;\n width: 16px;\n height: 16px;\n box-sizing: border-box;\n border-radius: 50%;\n border: 2px solid ${(props) => props.theme.colors.alto};\n border-right-color: ${(props) => props.theme.colors.mineShaft};\n display: inline-block;\n position: relative;\n vertical-align: middle;\n }\n .Select-clear-zone {\n animation: ${fadeIn} 200ms;\n color: ${(props) => props.theme.colors.alto};\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 35px;\n line-height: 0;\n\n .Select-clear {\n position: relative;\n top: -1px;\n }\n }\n .Select-clear-zone:hover {\n color: #d0021b;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-clear {\n display: inline-block;\n font-size: 0;\n line-height: 1;\n color: transparent;\n overflow: hidden;\n width: 12px;\n height: 12px;\n background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAnIGhlaWdodD0nMjAnIHZpZXdCb3g9JzAgMCAyMCAyMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KICA8cGF0aAogICAgZD0nTTExLjYgOS41TDE5LjIgMmMuNC0uNi40LTEuMyAwLTEuNy0uNC0uNC0xLjItLjQtMS42IDBMMTAgOCAyLjQuMkMyIDAgMS4yIDAgLjguMy40LjcuNCAxLjMuOCAybDcuNiA3LjUtOCA4Yy0uNS41LS41IDEuMiAwIDEuNy4yLjIuNC4zLjcuMy40IDAgLjcgMCAxLS4zbDgtOCA4IDhjLjMuMi42LjMgMSAuMy4yIDAgLjQgMCAuNy0uMy40LS41LjQtMS4yIDAtMS42bC04LTh6JwogICAgZmlsbD0nI0Q5RDlEOScKICAgIGZpbGxSdWxlPSdldmVub2RkJwogIC8+Cjwvc3ZnPgo=')\n no-repeat;\n background-size: cover;\n }\n .Select--multi .Select-clear-zone {\n width: 17px;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-arrow-zone {\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 35px;\n line-height: 0;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-arrow {\n background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiNiOGI4YjgiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=')\n no-repeat;\n display: inline-block;\n background-size: 12px;\n height: 7px;\n width: 12px;\n position: relative;\n transition: 0.3s;\n transform: rotate(0deg);\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-open .Select-arrow,\n .Select-arrow-zone:hover > .Select-arrow {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');\n }\n .Select--multi .Select-multi-value-wrapper {\n display: inline-block;\n padding-left: 20px;\n }\n /* stylelint-disable-next-line no-duplicate-selectors */\n .Select--multi .Select-multi-value-wrapper {\n .Select-placeholder + .Select-input {\n margin-left: 0;\n }\n }\n .Select--single {\n .Select-multi-value-wrapper {\n display: block;\n width: 100%;\n }\n .Select-input .react-select-2--value {\n display: block;\n width: 100%;\n }\n }\n .Select .Select-aria-only {\n display: inline-block;\n height: 1px;\n width: 1px;\n margin: -1px;\n clip: rect(0, 0, 0, 0);\n overflow: hidden;\n float: left;\n }\n .Select-menu-outer {\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 4px;\n background-color: ${(props) => props.theme.colors.white};\n border: 1px solid ${(props) => props.theme.colors.onahau};\n box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n box-sizing: border-box;\n margin-top: -1px;\n max-height: 270px;\n position: absolute;\n top: 100%;\n width: 100%;\n z-index: 1;\n -webkit-overflow-scrolling: touch;\n }\n .Select-menu {\n max-height: 226px;\n overflow-x: auto;\n /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */\n overflow-y: auto;\n font-size: 16px;\n }\n .Select-option {\n box-sizing: border-box;\n background-color: ${(props) => props.theme.colors.white};\n line-height: 30px;\n color: ${(props) => props.theme.colors.mineShaft};\n cursor: pointer;\n display: block;\n padding: 10px 15px 10px 20px;\n transition: background 0.2s ease;\n }\n .Select-option:last-child {\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 4px;\n }\n .Select-option.is-selected {\n background-color: ${(props) => props.theme.colors.onahau};\n }\n .Select-option.is-focused {\n background-color: ${(props) => props.theme.colors.onahau};\n }\n .Select-option.is-disabled {\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n }\n .Select-noresults {\n box-sizing: border-box;\n color: ${(props) => props.theme.colors.silver};\n cursor: default;\n display: block;\n padding: 10px 20px;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi .Select-input {\n vertical-align: middle;\n margin-left: 10px;\n padding: 0;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi.has-value .Select-input {\n margin-left: 5px;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi .Select-value {\n background-color: ${(props) => props.theme.colors.nebula};\n background-color: ${(props) => tinycolor(props.theme.colors.nebula).setAlpha(0.1).toString()};\n border-radius: 4px;\n border: 1px solid ${(props) => props.theme.colors.onahau};\n border: 1px solid rgba(0, 126, 255, 0.24);\n color: ${(props) => props.theme.colors.mineShaft};\n display: inline-block;\n font-size: 0.9em;\n line-height: 1.4;\n margin-left: 4px;\n margin-top: 4px;\n vertical-align: top;\n }\n .Select--multi .Select-value-icon,\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi .Select-value-label {\n display: inline-block;\n vertical-align: middle;\n }\n .Select--multi .Select-value-icon {\n font-size: 1.5em;\n line-height: 100%;\n vertical-align: middle;\n box-sizing: border-box;\n padding: 5px 4px 2px;\n color: ${(props) => props.theme.colors.accent};\n }\n\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi .Select-value-label {\n border-bottom-right-radius: 4px;\n border-top-right-radius: 4px;\n cursor: default;\n padding: 2px 4px;\n line-height: 1;\n max-width: 90%;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi a.Select-value-label {\n color: ${(props) => props.theme.colors.accent};\n cursor: pointer;\n text-decoration: none;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi a.Select-value-label:hover {\n text-decoration: underline;\n }\n /* stylelint-disable-next-line no-duplicate-selectors */\n .Select--multi .Select-value-icon {\n cursor: pointer;\n border-bottom-left-radius: 4px;\n border-top-left-radius: 4px;\n border-right: 1px solid ${(props) => props.theme.colors.onahau};\n border-right: 1px solid rgba(0, 126, 255, 0.24);\n font-size: 1.5em;\n line-height: 100%;\n box-sizing: border-box;\n padding: 5px 4px 2px;\n color: ${(props) => props.theme.colors.accent};\n }\n .Select--multi .Select-value-icon:hover,\n .Select--multi .Select-value-icon:focus {\n background-color: #d8eafd;\n background-color: rgba(0, 113, 230, 0.08);\n color: ${(props) => props.theme.colors.accent};\n }\n .Select--multi .Select-value-icon:active {\n background-color: #c2e0ff;\n background-color: rgba(0, 126, 255, 0.24);\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi.is-disabled .Select-value {\n background-color: #fcfcfc;\n border: 1px solid #e3e3e3;\n color: ${(props) => props.theme.colors.mineShaft};\n }\n .Select--multi.is-disabled .Select-value-icon {\n cursor: not-allowed;\n border-right: 1px solid #e3e3e3;\n }\n .Select--multi.is-disabled .Select-value-icon:hover,\n .Select--multi.is-disabled .Select-value-icon:focus,\n .Select--multi.is-disabled .Select-value-icon:active {\n background-color: #fcfcfc;\n }\n\n width: auto;\n ${(props) => (props.error ? error : null)}\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) =>\n responsiveProperty(\n 'width',\n props.fluid && props.width !== 'auto' && !Array.isArray(props.width) ? 'max-width' : 'width'\n )}\n ${(props) => (props.fluid ? fluid : null)}\n`\n"],"names":["fadeIn","keyframes","spin","fluid","css","error","errorStyle","Root","styled","span","withConfig","shouldForwardProp","prop","includes","displayName","componentId","props","theme","colors","white","alto","mineShaft","accent","silver","onahau","nebula","tinycolor","setAlpha","toString","display","responsiveProperty","width","Array","isArray"],"mappings":"oZAOA,MAAMA,OAASC,OAASA,UAOvB,CAAA,mCAED,MAAMC,KAAOD,OAASA,UAIrB,CAAA,iCAED,MAAME,MAAQC,OAAGA,IAMhB,CAAA,mDAED,MAAMC,MAAQD,OAAGA,IAAA,CAAA,mBAAA,KAEXE,MAAUA,YAIT,MAAMC,KAAOC,gBAAAA,QAAOC,KAAKC,WAAwB,CACtDC,kBAAoBC,GAAS,CAAC,YAAYC,SAASD,KACnDF,WAAA,CAAAI,YAAA,eAAAC,YAAA,mBAFkBP,CAElB,CAAA,uiBAAA,qBAAA,4BAAA,+VAAA,yNAAA,wFAAA,8WAAA,w7FAAA,0GAAA,uBAAA,+FAAA,gBAAA,k+JAAA,qBAAA,yTAAA,2BAAA,kOAAA,gDAAA,yHAAA,yOAAA,qBAAA,uCAAA,gDAAA,sWAAA,gPAAA,+OAAA,iIAAA,0JAAA,+MAAA,wSAAA,IAAA,IAAA,IAAA,KAiCuBQ,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOE,OAExCJ,GAAUA,EAAMC,MAAMC,OAAOG,YAsBlBL,GAAUA,EAAMC,MAAMC,OAAOI,SAW7BN,GAAUA,EAAMC,MAAMC,OAAOI,SAOxCN,GAAUA,EAAMC,MAAMC,OAAOK,SAgB7BP,GAAUA,EAAMC,MAAMC,OAAOG,WA6D1BnB,MAKQc,GAAUA,EAAMC,MAAMC,OAAOE,OAC3BJ,GAAUA,EAAMC,MAAMC,OAAOG,WAMvCrB,QACHgB,GAAUA,EAAMC,MAAMC,OAAOE,OA4FlBJ,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOM,SAoB7BR,GAAUA,EAAMC,MAAMC,OAAOC,QAExCH,GAAUA,EAAMC,MAAMC,OAAOG,YAWlBL,GAAUA,EAAMC,MAAMC,OAAOM,SAG7BR,GAAUA,EAAMC,MAAMC,OAAOM,SAQxCR,GAAUA,EAAMC,MAAMC,OAAOK,SAiBlBP,GAAUA,EAAMC,MAAMC,OAAOO,SAC7BT,GAAUU,mBAAAA,QAAUV,EAAMC,MAAMC,OAAOO,QAAQE,SAAS,IAAKC,aAE7DZ,GAAUA,EAAMC,MAAMC,OAAOM,SAExCR,GAAUA,EAAMC,MAAMC,OAAOG,YAoB7BL,GAAUA,EAAMC,MAAMC,OAAOI,SAgB7BN,GAAUA,EAAMC,MAAMC,OAAOI,SAaZN,GAAUA,EAAMC,MAAMC,OAAOM,SAM9CR,GAAUA,EAAMC,MAAMC,OAAOI,SAM7BN,GAAUA,EAAMC,MAAMC,OAAOI,SAU7BN,GAAUA,EAAMC,MAAMC,OAAOG,YAatCL,GAAWA,EAAMX,MAAQA,MAAQ,OACjCW,GAAWA,EAAMa,QAAUA,QAAOA,QAACb,EAAMa,SAAW,OACpDb,GACDc,mBAAAA,mBACE,QACAd,EAAMb,OAASa,EAAMe,QAAU,SAAWC,MAAMC,QAAQjB,EAAMe,OAAS,YAAc,WAEtFf,GAAWA,EAAMb,MAAQA,MAAQ"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Select/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { display } from 'mixins/display'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { errorStyle } from 'components/Input/style'\nimport { hover } from 'mixins/hover'\nimport type { SelectProps } from './types'\n\nconst fadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`\n\nconst spin = keyframes`\n to {\n transform: rotate(1turn);\n }\n`\n\nconst fluid = css`\n width: 100%;\n .Select {\n max-width: 100%;\n width: 100%;\n }\n`\n\nconst error = css`\n .Select-control {\n ${errorStyle}\n }\n`\n\nexport const Root = styled.span.withConfig<SelectProps>({\n shouldForwardProp: (prop) => ['children'].includes(prop),\n})`\n .Select {\n position: relative;\n }\n .Select,\n .Select div,\n .Select input,\n .Select span {\n box-sizing: border-box;\n }\n .Select.is-disabled > .Select-control {\n cursor: not-allowed;\n background-color: #f5f5f5;\n }\n .Select.is-disabled .Select-value-label {\n color: rgba(0, 0, 0, 0.16) !important;\n }\n ${hover(`box-shadow: none;`, '.Select.is-disabled > .Select-control:hover')}\n .Select.is-disabled .Select-arrow-zone {\n cursor: default;\n pointer-events: none;\n opacity: 0.35;\n }\n .Select.is-clearable {\n .Select-placeholder,\n &.Select--single > .Select-control .Select-value {\n padding-right: 70px;\n }\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-control {\n background-color: ${(props) => props.theme.colors.white};\n border: solid 1px ${(props) => props.theme.colors.alto};\n border-radius: 4px;\n color: ${(props) => props.theme.colors.mineShaft};\n cursor: default;\n display: table;\n border-spacing: 0;\n border-collapse: separate;\n height: 50px;\n outline: none;\n overflow: hidden;\n position: relative;\n width: 100%;\n }\n .Select-control .Select-input:focus {\n outline: none;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-searchable.is-open > .Select-control {\n cursor: text;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-open > .Select-control {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n border: 1px solid ${(props) => props.theme.colors.accent};\n outline: none;\n }\n .is-open > .Select-control .Select-arrow {\n transform: rotate(180deg);\n }\n .is-searchable.is-focused:not(.is-open) > .Select-control {\n cursor: text;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-focused:not(.is-open) > .Select-control {\n border: 1px solid ${(props) => props.theme.colors.accent};\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-placeholder,\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--single > .Select-control .Select-value {\n bottom: 0;\n color: ${(props) => props.theme.colors.silver};\n left: 0;\n font-size: 16px;\n line-height: 50px;\n padding-left: 20px;\n padding-right: 35px;\n position: absolute;\n right: 0;\n top: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .has-value.Select--single > .Select-control .Select-value .Select-value-label,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {\n color: ${(props) => props.theme.colors.mineShaft};\n }\n .has-value.Select--single > .Select-control .Select-value a.Select-value-label,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {\n cursor: pointer;\n text-decoration: none;\n }\n ${hover(\n `color: #007eff;\n outline: none;\n text-decoration: underline;`,\n '.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover'\n )}\n ${hover(\n `color: #007eff;\n outline: none;\n text-decoration: underline;`,\n '.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover'\n )}\n\n /* stylelint-disable-next-line no-descending-specificity */\n .has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {\n color: #007eff;\n outline: none;\n text-decoration: underline;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-input {\n height: 50px;\n padding-left: 20px;\n padding-right: 15px;\n vertical-align: middle;\n }\n .Select-input > input {\n width: 100%;\n background: none transparent;\n border: 0 none;\n box-shadow: none;\n cursor: default;\n display: inline-block;\n font-family: inherit;\n font-size: 16px;\n margin: 0;\n outline: none;\n line-height: 30px;\n padding: 10px 0;\n -webkit-appearance: none;\n }\n .is-focused .Select-input > input {\n cursor: text;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-focused .Select-arrow {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');\n }\n ${hover(\n `background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');`,\n '.Select-arrow-zone:hover > .Select-arrow'\n )}\n .has-value.is-pseudo-focused .Select-input {\n opacity: 0;\n }\n .Select-control:not(.is-searchable) > .Select-input {\n outline: none;\n }\n .Select-loading-zone {\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 16px;\n }\n .Select-loading {\n animation: ${spin} 400ms infinite linear;\n width: 16px;\n height: 16px;\n box-sizing: border-box;\n border-radius: 50%;\n border: 2px solid ${(props) => props.theme.colors.alto};\n border-right-color: ${(props) => props.theme.colors.mineShaft};\n display: inline-block;\n position: relative;\n vertical-align: middle;\n }\n .Select-clear-zone {\n animation: ${fadeIn} 200ms;\n color: ${(props) => props.theme.colors.alto};\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 35px;\n line-height: 0;\n\n .Select-clear {\n position: relative;\n top: -1px;\n }\n }\n ${hover(`color: #d0021b;`, '.Select-clear-zone:hover')}\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-clear {\n display: inline-block;\n font-size: 0;\n line-height: 1;\n color: transparent;\n overflow: hidden;\n width: 12px;\n height: 12px;\n background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAnIGhlaWdodD0nMjAnIHZpZXdCb3g9JzAgMCAyMCAyMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KICA8cGF0aAogICAgZD0nTTExLjYgOS41TDE5LjIgMmMuNC0uNi40LTEuMyAwLTEuNy0uNC0uNC0xLjItLjQtMS42IDBMMTAgOCAyLjQuMkMyIDAgMS4yIDAgLjguMy40LjcuNCAxLjMuOCAybDcuNiA3LjUtOCA4Yy0uNS41LS41IDEuMiAwIDEuNy4yLjIuNC4zLjcuMy40IDAgLjcgMCAxLS4zbDgtOCA4IDhjLjMuMi42LjMgMSAuMy4yIDAgLjQgMCAuNy0uMy40LS41LjQtMS4yIDAtMS42bC04LTh6JwogICAgZmlsbD0nI0Q5RDlEOScKICAgIGZpbGxSdWxlPSdldmVub2RkJwogIC8+Cjwvc3ZnPgo=')\n no-repeat;\n background-size: cover;\n }\n .Select--multi .Select-clear-zone {\n width: 17px;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-arrow-zone {\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 35px;\n line-height: 0;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-arrow {\n background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiNiOGI4YjgiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=')\n no-repeat;\n display: inline-block;\n background-size: 12px;\n height: 7px;\n width: 12px;\n position: relative;\n transition: 0.3s;\n transform: rotate(0deg);\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-open .Select-arrow {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');\n }\n ${hover(\n `background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');`,\n '.Select-arrow-zone:hover > .Select-arrow'\n )}\n .Select--multi .Select-multi-value-wrapper {\n display: inline-block;\n padding-left: 20px;\n }\n /* stylelint-disable-next-line no-duplicate-selectors */\n .Select--multi .Select-multi-value-wrapper {\n .Select-placeholder + .Select-input {\n margin-left: 0;\n }\n }\n .Select--single {\n .Select-multi-value-wrapper {\n display: block;\n width: 100%;\n }\n .Select-input .react-select-2--value {\n display: block;\n width: 100%;\n }\n }\n .Select .Select-aria-only {\n display: inline-block;\n height: 1px;\n width: 1px;\n margin: -1px;\n clip: rect(0, 0, 0, 0);\n overflow: hidden;\n float: left;\n }\n .Select-menu-outer {\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 4px;\n background-color: ${(props) => props.theme.colors.white};\n border: 1px solid ${(props) => props.theme.colors.onahau};\n box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n box-sizing: border-box;\n margin-top: -1px;\n max-height: 270px;\n position: absolute;\n top: 100%;\n width: 100%;\n z-index: 1;\n -webkit-overflow-scrolling: touch;\n }\n .Select-menu {\n max-height: 226px;\n overflow-x: auto;\n overflow-y: auto;\n font-size: 16px;\n }\n .Select-option {\n box-sizing: border-box;\n background-color: ${(props) => props.theme.colors.white};\n line-height: 30px;\n color: ${(props) => props.theme.colors.mineShaft};\n cursor: pointer;\n display: block;\n padding: 10px 15px 10px 20px;\n transition: background 0.2s ease;\n }\n .Select-option:last-child {\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 4px;\n }\n .Select-option.is-selected {\n background-color: ${(props) => props.theme.colors.onahau};\n }\n .Select-option.is-focused {\n background-color: ${(props) => props.theme.colors.onahau};\n }\n .Select-option.is-disabled {\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n }\n .Select-noresults {\n box-sizing: border-box;\n color: ${(props) => props.theme.colors.silver};\n cursor: default;\n display: block;\n padding: 10px 20px;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi .Select-input {\n vertical-align: middle;\n margin-left: 10px;\n padding: 0;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi.has-value .Select-input {\n margin-left: 5px;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi .Select-value {\n background-color: ${(props) => props.theme.colors.nebula};\n background-color: ${(props) => tinycolor(props.theme.colors.nebula).setAlpha(0.1).toString()};\n border-radius: 4px;\n border: 1px solid ${(props) => props.theme.colors.onahau};\n border: 1px solid rgba(0, 126, 255, 0.24);\n color: ${(props) => props.theme.colors.mineShaft};\n display: inline-block;\n font-size: 0.9em;\n line-height: 1.4;\n margin-left: 4px;\n margin-top: 4px;\n vertical-align: top;\n }\n .Select--multi .Select-value-icon,\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi .Select-value-label {\n display: inline-block;\n vertical-align: middle;\n }\n .Select--multi .Select-value-icon {\n font-size: 1.5em;\n line-height: 100%;\n vertical-align: middle;\n box-sizing: border-box;\n padding: 5px 4px 2px;\n color: ${(props) => props.theme.colors.accent};\n cursor: pointer;\n border-bottom-left-radius: 4px;\n border-top-left-radius: 4px;\n border-right: 1px solid ${(props) => props.theme.colors.onahau};\n border-right: 1px solid rgba(0, 126, 255, 0.24);\n }\n\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi .Select-value-label {\n border-bottom-right-radius: 4px;\n border-top-right-radius: 4px;\n cursor: default;\n padding: 2px 4px;\n line-height: 1;\n max-width: 90%;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi a.Select-value-label {\n color: ${(props) => props.theme.colors.accent};\n cursor: pointer;\n text-decoration: none;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n ${hover(`text-decoration: underline;`, 'Select--multi a.Select-value-label:hover')}\n ${(props) =>\n hover(\n `\n background-color: rgba(0, 113, 230, 0.08);\n color: ${props.theme.colors.accent};\n `,\n '.Select--multi .Select-value-icon:hover'\n )}\n .Select--multi .Select-value-icon:focus {\n background-color: rgba(0, 113, 230, 0.08);\n color: ${(props) => props.theme.colors.accent};\n }\n .Select--multi .Select-value-icon:active {\n background-color: rgba(0, 126, 255, 0.24);\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi.is-disabled .Select-value {\n background-color: #fcfcfc;\n border: 1px solid #e3e3e3;\n color: ${(props) => props.theme.colors.mineShaft};\n }\n .Select--multi.is-disabled .Select-value-icon {\n cursor: not-allowed;\n border-right: 1px solid #e3e3e3;\n }\n ${hover(`background-color: #fcfcfc;`, '.Select--multi.is-disabled .Select-value-icon:hover')}\n .Select--multi.is-disabled .Select-value-icon:focus,\n .Select--multi.is-disabled .Select-value-icon:active {\n background-color: #fcfcfc;\n }\n\n width: auto;\n ${(props) => (props.error ? error : null)}\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) =>\n responsiveProperty(\n 'width',\n props.fluid && props.width !== 'auto' && !Array.isArray(props.width) ? 'max-width' : 'width'\n )}\n ${(props) => (props.fluid ? fluid : null)}\n`\n"],"names":["fadeIn","keyframes","spin","fluid","css","error","errorStyle","Root","styled","span","withConfig","shouldForwardProp","prop","includes","displayName","componentId","hover","props","theme","colors","white","alto","mineShaft","accent","silver","onahau","nebula","tinycolor","setAlpha","toString","display","responsiveProperty","width","Array","isArray"],"mappings":"+bAQA,MAAMA,OAASC,OAASA,UAOvB,CAAA,mCAED,MAAMC,KAAOD,OAASA,UAIrB,CAAA,iCAED,MAAME,MAAQC,OAAGA,IAMhB,CAAA,mDAED,MAAMC,MAAQD,OAAGA,IAAA,CAAA,mBAAA,KAEXE,MAAUA,YAIT,MAAMC,KAAOC,gBAAAA,QAAOC,KAAKC,WAAwB,CACtDC,kBAAoBC,GAAS,CAAC,YAAYC,SAASD,KACnDF,WAAA,CAAAI,YAAA,eAAAC,YAAA,mBAFkBP,CAElB,CAAA,kQAAA,4OAAA,qBAAA,4BAAA,+VAAA,yNAAA,wFAAA,8WAAA,0NAAA,IAAA,8uEAAA,mRAAA,0GAAA,uBAAA,+FAAA,gBAAA,oKAAA,ytIAAA,4hBAAA,qBAAA,yTAAA,2BAAA,kOAAA,gDAAA,yHAAA,yOAAA,qBAAA,uCAAA,gDAAA,sWAAA,mGAAA,4RAAA,yCAAA,IAAA,wFAAA,sLAAA,sGAAA,kJAAA,IAAA,IAAA,IAAA,IAiBEQ,MAAAA,MAAM,oBAAqB,gDAcNC,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOE,OAExCJ,GAAUA,EAAMC,MAAMC,OAAOG,YAsBlBL,GAAUA,EAAMC,MAAMC,OAAOI,SAW7BN,GAAUA,EAAMC,MAAMC,OAAOI,SAOxCN,GAAUA,EAAMC,MAAMC,OAAOK,SAgB7BP,GAAUA,EAAMC,MAAMC,OAAOG,WAOvCN,MAAAA,MACA,uEAGA,wFAEAA,MAAAA,MACA,uEAGA,0GAuCAA,YACA,2mDACA,4CAiBad,MAKQe,GAAUA,EAAMC,MAAMC,OAAOE,OAC3BJ,GAAUA,EAAMC,MAAMC,OAAOG,WAMvCtB,QACHiB,GAAUA,EAAMC,MAAMC,OAAOE,MAcvCL,MAAKA,MAAC,kBAAmB,4BA2CzBA,MAAKA,MACL,2mDACA,6CAkCqBC,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOM,SAmB7BR,GAAUA,EAAMC,MAAMC,OAAOC,QAExCH,GAAUA,EAAMC,MAAMC,OAAOG,YAWlBL,GAAUA,EAAMC,MAAMC,OAAOM,SAG7BR,GAAUA,EAAMC,MAAMC,OAAOM,SAQxCR,GAAUA,EAAMC,MAAMC,OAAOK,SAiBlBP,GAAUA,EAAMC,MAAMC,OAAOO,SAC7BT,GAAUU,mBAAAA,QAAUV,EAAMC,MAAMC,OAAOO,QAAQE,SAAS,IAAKC,aAE7DZ,GAAUA,EAAMC,MAAMC,OAAOM,SAExCR,GAAUA,EAAMC,MAAMC,OAAOG,YAoB7BL,GAAUA,EAAMC,MAAMC,OAAOI,SAIZN,GAAUA,EAAMC,MAAMC,OAAOM,SAiB9CR,GAAUA,EAAMC,MAAMC,OAAOI,QAKvCP,YAAM,8BAA+B,6CACpCC,GACDD,MAAKA,MACH,wEAEWC,EAAMC,MAAMC,OAAOI,kBAE9B,6CAIQN,GAAUA,EAAMC,MAAMC,OAAOI,SAS7BN,GAAUA,EAAMC,MAAMC,OAAOG,WAMvCN,MAAAA,MAAM,6BAA8B,wDAOnCC,GAAWA,EAAMZ,MAAQA,MAAQ,OACjCY,GAAWA,EAAMa,QAAUA,QAAOA,QAACb,EAAMa,SAAW,OACpDb,GACDc,sCACE,QACAd,EAAMd,OAASc,EAAMe,QAAU,SAAWC,MAAMC,QAAQjB,EAAMe,OAAS,YAAc,WAEtFf,GAAWA,EAAMd,MAAQA,MAAQ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import styled,{keyframes,css}from'styled-components';import tinycolor from'tinycolor2';import{display}from'../../mixins/display.mjs';import{responsiveProperty}from'../../mixins/responsive-property.mjs';import{errorStyle}from'../Input/style.mjs';const fadeIn=keyframes(["from{opacity:0;}to{opacity:1;}"]);const spin=keyframes(["to{transform:rotate(1turn);}"]);const fluid=css(["width:100%;.Select{max-width:100%;width:100%;}"]);const error=css([".Select-control{","}"],errorStyle);const Root=styled.span.withConfig({shouldForwardProp:e=>['children'].includes(e)}).withConfig({displayName:"Select__Root",componentId:"ui__sc-ps043s-0"})([".Select{position:relative;}.Select,.Select div,.Select input,.Select span{box-sizing:border-box;}.Select.is-disabled > .Select-control{cursor:not-allowed;background-color:#f5f5f5;}.Select.is-disabled .Select-value-label{color:rgba(0,0,0,0.16) !important;}.Select.is-disabled > .Select-control:hover{box-shadow:none;}.Select.is-disabled .Select-arrow-zone{cursor:default;pointer-events:none;opacity:0.35;}.Select.is-clearable{.Select-placeholder,&.Select--single > .Select-control .Select-value{padding-right:70px;}}.Select-control{background-color:",";border:solid 1px ",";border-radius:4px;color:",";cursor:default;display:table;border-spacing:0;border-collapse:separate;height:50px;outline:none;overflow:hidden;position:relative;width:100%;}.Select-control .Select-input:focus{outline:none;}.is-searchable.is-open > .Select-control{cursor:text;}.is-open > .Select-control{border-bottom-right-radius:0;border-bottom-left-radius:0;border:1px solid ",";outline:none;}.is-open > .Select-control .Select-arrow{transform:rotate(180deg);}.is-searchable.is-focused:not(.is-open) > .Select-control{cursor:text;}.is-focused:not(.is-open) > .Select-control{border:1px solid ",";}.Select-placeholder,.Select--single > .Select-control .Select-value{bottom:0;color:",";left:0;font-size:16px;line-height:50px;padding-left:20px;padding-right:35px;position:absolute;right:0;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.has-value.Select--single > .Select-control .Select-value .Select-value-label,.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label{color:",";}.has-value.Select--single > .Select-control .Select-value a.Select-value-label,.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label{cursor:pointer;text-decoration:none;}.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover,.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus{color:#007eff;outline:none;text-decoration:underline;}.Select-input{height:50px;padding-left:20px;padding-right:15px;vertical-align:middle;}.Select-input > input{width:100%;background:none transparent;border:0 none;box-shadow:none;cursor:default;display:inline-block;font-family:inherit;font-size:16px;margin:0;outline:none;line-height:30px;padding:10px 0;-webkit-appearance:none;}.is-focused .Select-input > input{cursor:text;}.is-focused .Select-arrow,.Select-arrow-zone:hover > .Select-arrow{background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');}.has-value.is-pseudo-focused .Select-input{opacity:0;}.Select-control:not(.is-searchable) > .Select-input{outline:none;}.Select-loading-zone{cursor:pointer;display:table-cell;position:relative;text-align:center;vertical-align:middle;width:16px;}.Select-loading{animation:"," 400ms infinite linear;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid ",";border-right-color:",";display:inline-block;position:relative;vertical-align:middle;}.Select-clear-zone{animation:"," 200ms;color:",";cursor:pointer;display:table-cell;position:relative;text-align:center;vertical-align:middle;width:35px;line-height:0;.Select-clear{position:relative;top:-1px;}}.Select-clear-zone:hover{color:#d0021b;}.Select-clear{display:inline-block;font-size:0;line-height:1;color:transparent;overflow:hidden;width:12px;height:12px;background:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAnIGhlaWdodD0nMjAnIHZpZXdCb3g9JzAgMCAyMCAyMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KICA8cGF0aAogICAgZD0nTTExLjYgOS41TDE5LjIgMmMuNC0uNi40LTEuMyAwLTEuNy0uNC0uNC0xLjItLjQtMS42IDBMMTAgOCAyLjQuMkMyIDAgMS4yIDAgLjguMy40LjcuNCAxLjMuOCAybDcuNiA3LjUtOCA4Yy0uNS41LS41IDEuMiAwIDEuNy4yLjIuNC4zLjcuMy40IDAgLjcgMCAxLS4zbDgtOCA4IDhjLjMuMi42LjMgMSAuMy4yIDAgLjQgMCAuNy0uMy40LS41LjQtMS4yIDAtMS42bC04LTh6JwogICAgZmlsbD0nI0Q5RDlEOScKICAgIGZpbGxSdWxlPSdldmVub2RkJwogIC8+Cjwvc3ZnPgo=') no-repeat;background-size:cover;}.Select--multi .Select-clear-zone{width:17px;}.Select-arrow-zone{cursor:pointer;display:table-cell;position:relative;text-align:center;vertical-align:middle;width:35px;line-height:0;}.Select-arrow{background:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiNiOGI4YjgiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=') no-repeat;display:inline-block;background-size:12px;height:7px;width:12px;position:relative;transition:0.3s;transform:rotate(0deg);}.is-open .Select-arrow,.Select-arrow-zone:hover > .Select-arrow{background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');}.Select--multi .Select-multi-value-wrapper{display:inline-block;padding-left:20px;}.Select--multi .Select-multi-value-wrapper{.Select-placeholder + .Select-input{margin-left:0;}}.Select--single{.Select-multi-value-wrapper{display:block;width:100%;}.Select-input .react-select-2--value{display:block;width:100%;}}.Select .Select-aria-only{display:inline-block;height:1px;width:1px;margin:-1px;clip:rect(0,0,0,0);overflow:hidden;float:left;}.Select-menu-outer{border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:",";border:1px solid ",";box-shadow:0 3px 10px 0 rgba(0,0,0,0.2);box-sizing:border-box;margin-top:-1px;max-height:270px;position:absolute;top:100%;width:100%;z-index:1;-webkit-overflow-scrolling:touch;}.Select-menu{max-height:226px;overflow-x:auto;overflow-y:auto;font-size:16px;}.Select-option{box-sizing:border-box;background-color:",";line-height:30px;color:",";cursor:pointer;display:block;padding:10px 15px 10px 20px;transition:background 0.2s ease;}.Select-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px;}.Select-option.is-selected{background-color:",";}.Select-option.is-focused{background-color:",";}.Select-option.is-disabled{color:rgba(0,0,0,0.16);cursor:not-allowed;}.Select-noresults{box-sizing:border-box;color:",";cursor:default;display:block;padding:10px 20px;}.Select--multi .Select-input{vertical-align:middle;margin-left:10px;padding:0;}.Select--multi.has-value .Select-input{margin-left:5px;}.Select--multi .Select-value{background-color:",";background-color:",";border-radius:4px;border:1px solid ",";border:1px solid rgba(0,126,255,0.24);color:",";display:inline-block;font-size:0.9em;line-height:1.4;margin-left:4px;margin-top:4px;vertical-align:top;}.Select--multi .Select-value-icon,.Select--multi .Select-value-label{display:inline-block;vertical-align:middle;}.Select--multi .Select-value-icon{font-size:1.5em;line-height:100%;vertical-align:middle;box-sizing:border-box;padding:5px 4px 2px;color:",";}.Select--multi .Select-value-label{border-bottom-right-radius:4px;border-top-right-radius:4px;cursor:default;padding:2px 4px;line-height:1;max-width:90%;overflow:hidden;text-overflow:ellipsis;}.Select--multi a.Select-value-label{color:",";cursor:pointer;text-decoration:none;}.Select--multi a.Select-value-label:hover{text-decoration:underline;}.Select--multi .Select-value-icon{cursor:pointer;border-bottom-left-radius:4px;border-top-left-radius:4px;border-right:1px solid ",";border-right:1px solid rgba(0,126,255,0.24);font-size:1.5em;line-height:100%;box-sizing:border-box;padding:5px 4px 2px;color:",";}.Select--multi .Select-value-icon:hover,.Select--multi .Select-value-icon:focus{background-color:#d8eafd;background-color:rgba(0,113,230,0.08);color:",";}.Select--multi .Select-value-icon:active{background-color:#c2e0ff;background-color:rgba(0,126,255,0.24);}.Select--multi.is-disabled .Select-value{background-color:#fcfcfc;border:1px solid #e3e3e3;color:",";}.Select--multi.is-disabled .Select-value-icon{cursor:not-allowed;border-right:1px solid #e3e3e3;}.Select--multi.is-disabled .Select-value-icon:hover,.Select--multi.is-disabled .Select-value-icon:focus,.Select--multi.is-disabled .Select-value-icon:active{background-color:#fcfcfc;}width:auto;"," "," "," ",""],(e=>e.theme.colors.white),(e=>e.theme.colors.alto),(e=>e.theme.colors.mineShaft),(e=>e.theme.colors.accent),(e=>e.theme.colors.accent),(e=>e.theme.colors.silver),(e=>e.theme.colors.mineShaft),spin,(e=>e.theme.colors.alto),(e=>e.theme.colors.mineShaft),fadeIn,(e=>e.theme.colors.alto),(e=>e.theme.colors.white),(e=>e.theme.colors.onahau),(e=>e.theme.colors.white),(e=>e.theme.colors.mineShaft),(e=>e.theme.colors.onahau),(e=>e.theme.colors.onahau),(e=>e.theme.colors.silver),(e=>e.theme.colors.nebula),(e=>tinycolor(e.theme.colors.nebula).setAlpha(.1).toString()),(e=>e.theme.colors.onahau),(e=>e.theme.colors.mineShaft),(e=>e.theme.colors.accent),(e=>e.theme.colors.accent),(e=>e.theme.colors.onahau),(e=>e.theme.colors.accent),(e=>e.theme.colors.accent),(e=>e.theme.colors.mineShaft),(e=>e.error?error:null),(e=>e.display?display(e.display):null),(e=>responsiveProperty('width',e.fluid&&e.width!=='auto'&&!Array.isArray(e.width)?'max-width':'width')),(e=>e.fluid?fluid:null));export{Root};
|
|
1
|
+
import styled,{keyframes,css}from'styled-components';import tinycolor from'tinycolor2';import{display}from'../../mixins/display.mjs';import{responsiveProperty}from'../../mixins/responsive-property.mjs';import{errorStyle}from'../Input/style.mjs';import{hover}from'../../mixins/hover.mjs';const fadeIn=keyframes(["from{opacity:0;}to{opacity:1;}"]);const spin=keyframes(["to{transform:rotate(1turn);}"]);const fluid=css(["width:100%;.Select{max-width:100%;width:100%;}"]);const error=css([".Select-control{","}"],errorStyle);const Root=styled.span.withConfig({shouldForwardProp:e=>['children'].includes(e)}).withConfig({displayName:"Select__Root",componentId:"ui__sc-ps043s-0"})([".Select{position:relative;}.Select,.Select div,.Select input,.Select span{box-sizing:border-box;}.Select.is-disabled > .Select-control{cursor:not-allowed;background-color:#f5f5f5;}.Select.is-disabled .Select-value-label{color:rgba(0,0,0,0.16) !important;}"," .Select.is-disabled .Select-arrow-zone{cursor:default;pointer-events:none;opacity:0.35;}.Select.is-clearable{.Select-placeholder,&.Select--single > .Select-control .Select-value{padding-right:70px;}}.Select-control{background-color:",";border:solid 1px ",";border-radius:4px;color:",";cursor:default;display:table;border-spacing:0;border-collapse:separate;height:50px;outline:none;overflow:hidden;position:relative;width:100%;}.Select-control .Select-input:focus{outline:none;}.is-searchable.is-open > .Select-control{cursor:text;}.is-open > .Select-control{border-bottom-right-radius:0;border-bottom-left-radius:0;border:1px solid ",";outline:none;}.is-open > .Select-control .Select-arrow{transform:rotate(180deg);}.is-searchable.is-focused:not(.is-open) > .Select-control{cursor:text;}.is-focused:not(.is-open) > .Select-control{border:1px solid ",";}.Select-placeholder,.Select--single > .Select-control .Select-value{bottom:0;color:",";left:0;font-size:16px;line-height:50px;padding-left:20px;padding-right:35px;position:absolute;right:0;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.has-value.Select--single > .Select-control .Select-value .Select-value-label,.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label{color:",";}.has-value.Select--single > .Select-control .Select-value a.Select-value-label,.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label{cursor:pointer;text-decoration:none;}"," "," .has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus{color:#007eff;outline:none;text-decoration:underline;}.Select-input{height:50px;padding-left:20px;padding-right:15px;vertical-align:middle;}.Select-input > input{width:100%;background:none transparent;border:0 none;box-shadow:none;cursor:default;display:inline-block;font-family:inherit;font-size:16px;margin:0;outline:none;line-height:30px;padding:10px 0;-webkit-appearance:none;}.is-focused .Select-input > input{cursor:text;}.is-focused .Select-arrow{background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');}"," .has-value.is-pseudo-focused .Select-input{opacity:0;}.Select-control:not(.is-searchable) > .Select-input{outline:none;}.Select-loading-zone{cursor:pointer;display:table-cell;position:relative;text-align:center;vertical-align:middle;width:16px;}.Select-loading{animation:"," 400ms infinite linear;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid ",";border-right-color:",";display:inline-block;position:relative;vertical-align:middle;}.Select-clear-zone{animation:"," 200ms;color:",";cursor:pointer;display:table-cell;position:relative;text-align:center;vertical-align:middle;width:35px;line-height:0;.Select-clear{position:relative;top:-1px;}}"," .Select-clear{display:inline-block;font-size:0;line-height:1;color:transparent;overflow:hidden;width:12px;height:12px;background:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAnIGhlaWdodD0nMjAnIHZpZXdCb3g9JzAgMCAyMCAyMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KICA8cGF0aAogICAgZD0nTTExLjYgOS41TDE5LjIgMmMuNC0uNi40LTEuMyAwLTEuNy0uNC0uNC0xLjItLjQtMS42IDBMMTAgOCAyLjQuMkMyIDAgMS4yIDAgLjguMy40LjcuNCAxLjMuOCAybDcuNiA3LjUtOCA4Yy0uNS41LS41IDEuMiAwIDEuNy4yLjIuNC4zLjcuMy40IDAgLjcgMCAxLS4zbDgtOCA4IDhjLjMuMi42LjMgMSAuMy4yIDAgLjQgMCAuNy0uMy40LS41LjQtMS4yIDAtMS42bC04LTh6JwogICAgZmlsbD0nI0Q5RDlEOScKICAgIGZpbGxSdWxlPSdldmVub2RkJwogIC8+Cjwvc3ZnPgo=') no-repeat;background-size:cover;}.Select--multi .Select-clear-zone{width:17px;}.Select-arrow-zone{cursor:pointer;display:table-cell;position:relative;text-align:center;vertical-align:middle;width:35px;line-height:0;}.Select-arrow{background:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiNiOGI4YjgiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=') no-repeat;display:inline-block;background-size:12px;height:7px;width:12px;position:relative;transition:0.3s;transform:rotate(0deg);}.is-open .Select-arrow{background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');}"," .Select--multi .Select-multi-value-wrapper{display:inline-block;padding-left:20px;}.Select--multi .Select-multi-value-wrapper{.Select-placeholder + .Select-input{margin-left:0;}}.Select--single{.Select-multi-value-wrapper{display:block;width:100%;}.Select-input .react-select-2--value{display:block;width:100%;}}.Select .Select-aria-only{display:inline-block;height:1px;width:1px;margin:-1px;clip:rect(0,0,0,0);overflow:hidden;float:left;}.Select-menu-outer{border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:",";border:1px solid ",";box-shadow:0 3px 10px 0 rgba(0,0,0,0.2);box-sizing:border-box;margin-top:-1px;max-height:270px;position:absolute;top:100%;width:100%;z-index:1;-webkit-overflow-scrolling:touch;}.Select-menu{max-height:226px;overflow-x:auto;overflow-y:auto;font-size:16px;}.Select-option{box-sizing:border-box;background-color:",";line-height:30px;color:",";cursor:pointer;display:block;padding:10px 15px 10px 20px;transition:background 0.2s ease;}.Select-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px;}.Select-option.is-selected{background-color:",";}.Select-option.is-focused{background-color:",";}.Select-option.is-disabled{color:rgba(0,0,0,0.16);cursor:not-allowed;}.Select-noresults{box-sizing:border-box;color:",";cursor:default;display:block;padding:10px 20px;}.Select--multi .Select-input{vertical-align:middle;margin-left:10px;padding:0;}.Select--multi.has-value .Select-input{margin-left:5px;}.Select--multi .Select-value{background-color:",";background-color:",";border-radius:4px;border:1px solid ",";border:1px solid rgba(0,126,255,0.24);color:",";display:inline-block;font-size:0.9em;line-height:1.4;margin-left:4px;margin-top:4px;vertical-align:top;}.Select--multi .Select-value-icon,.Select--multi .Select-value-label{display:inline-block;vertical-align:middle;}.Select--multi .Select-value-icon{font-size:1.5em;line-height:100%;vertical-align:middle;box-sizing:border-box;padding:5px 4px 2px;color:",";cursor:pointer;border-bottom-left-radius:4px;border-top-left-radius:4px;border-right:1px solid ",";border-right:1px solid rgba(0,126,255,0.24);}.Select--multi .Select-value-label{border-bottom-right-radius:4px;border-top-right-radius:4px;cursor:default;padding:2px 4px;line-height:1;max-width:90%;overflow:hidden;text-overflow:ellipsis;}.Select--multi a.Select-value-label{color:",";cursor:pointer;text-decoration:none;}"," "," .Select--multi .Select-value-icon:focus{background-color:rgba(0,113,230,0.08);color:",";}.Select--multi .Select-value-icon:active{background-color:rgba(0,126,255,0.24);}.Select--multi.is-disabled .Select-value{background-color:#fcfcfc;border:1px solid #e3e3e3;color:",";}.Select--multi.is-disabled .Select-value-icon{cursor:not-allowed;border-right:1px solid #e3e3e3;}"," .Select--multi.is-disabled .Select-value-icon:focus,.Select--multi.is-disabled .Select-value-icon:active{background-color:#fcfcfc;}width:auto;"," "," "," ",""],hover("box-shadow: none;",'.Select.is-disabled > .Select-control:hover'),(e=>e.theme.colors.white),(e=>e.theme.colors.alto),(e=>e.theme.colors.mineShaft),(e=>e.theme.colors.accent),(e=>e.theme.colors.accent),(e=>e.theme.colors.silver),(e=>e.theme.colors.mineShaft),hover("color: #007eff;\n outline: none;\n text-decoration: underline;",'.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover'),hover("color: #007eff;\n outline: none;\n text-decoration: underline;",'.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover'),hover("background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');",'.Select-arrow-zone:hover > .Select-arrow'),spin,(e=>e.theme.colors.alto),(e=>e.theme.colors.mineShaft),fadeIn,(e=>e.theme.colors.alto),hover("color: #d0021b;",'.Select-clear-zone:hover'),hover("background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');",'.Select-arrow-zone:hover > .Select-arrow'),(e=>e.theme.colors.white),(e=>e.theme.colors.onahau),(e=>e.theme.colors.white),(e=>e.theme.colors.mineShaft),(e=>e.theme.colors.onahau),(e=>e.theme.colors.onahau),(e=>e.theme.colors.silver),(e=>e.theme.colors.nebula),(e=>tinycolor(e.theme.colors.nebula).setAlpha(.1).toString()),(e=>e.theme.colors.onahau),(e=>e.theme.colors.mineShaft),(e=>e.theme.colors.accent),(e=>e.theme.colors.onahau),(e=>e.theme.colors.accent),hover("text-decoration: underline;",'Select--multi a.Select-value-label:hover'),(e=>hover(`\n background-color: rgba(0, 113, 230, 0.08);\n color: ${e.theme.colors.accent};\n `,'.Select--multi .Select-value-icon:hover')),(e=>e.theme.colors.accent),(e=>e.theme.colors.mineShaft),hover("background-color: #fcfcfc;",'.Select--multi.is-disabled .Select-value-icon:hover'),(e=>e.error?error:null),(e=>e.display?display(e.display):null),(e=>responsiveProperty('width',e.fluid&&e.width!=='auto'&&!Array.isArray(e.width)?'max-width':'width')),(e=>e.fluid?fluid:null));export{Root};
|
|
2
2
|
//# sourceMappingURL=style.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Select/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { display } from 'mixins/display'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { errorStyle } from 'components/Input/style'\nimport type { SelectProps } from './types'\n\nconst fadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`\n\nconst spin = keyframes`\n to {\n transform: rotate(1turn);\n }\n`\n\nconst fluid = css`\n width: 100%;\n .Select {\n max-width: 100%;\n width: 100%;\n }\n`\n\nconst error = css`\n .Select-control {\n ${errorStyle}\n }\n`\n\nexport const Root = styled.span.withConfig<SelectProps>({\n shouldForwardProp: (prop) => ['children'].includes(prop),\n})`\n .Select {\n position: relative;\n }\n .Select,\n .Select div,\n .Select input,\n .Select span {\n box-sizing: border-box;\n }\n .Select.is-disabled > .Select-control {\n cursor: not-allowed;\n background-color: #f5f5f5;\n }\n .Select.is-disabled .Select-value-label {\n color: rgba(0, 0, 0, 0.16) !important;\n }\n .Select.is-disabled > .Select-control:hover {\n box-shadow: none;\n }\n .Select.is-disabled .Select-arrow-zone {\n cursor: default;\n pointer-events: none;\n opacity: 0.35;\n }\n .Select.is-clearable {\n .Select-placeholder,\n &.Select--single > .Select-control .Select-value {\n padding-right: 70px;\n }\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-control {\n background-color: ${(props) => props.theme.colors.white};\n border: solid 1px ${(props) => props.theme.colors.alto};\n border-radius: 4px;\n color: ${(props) => props.theme.colors.mineShaft};\n cursor: default;\n display: table;\n border-spacing: 0;\n border-collapse: separate;\n height: 50px;\n outline: none;\n overflow: hidden;\n position: relative;\n width: 100%;\n }\n .Select-control .Select-input:focus {\n outline: none;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-searchable.is-open > .Select-control {\n cursor: text;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-open > .Select-control {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n border: 1px solid ${(props) => props.theme.colors.accent};\n outline: none;\n }\n .is-open > .Select-control .Select-arrow {\n transform: rotate(180deg);\n }\n .is-searchable.is-focused:not(.is-open) > .Select-control {\n cursor: text;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-focused:not(.is-open) > .Select-control {\n border: 1px solid ${(props) => props.theme.colors.accent};\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-placeholder,\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--single > .Select-control .Select-value {\n bottom: 0;\n color: ${(props) => props.theme.colors.silver};\n left: 0;\n font-size: 16px;\n line-height: 50px;\n padding-left: 20px;\n padding-right: 35px;\n position: absolute;\n right: 0;\n top: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .has-value.Select--single > .Select-control .Select-value .Select-value-label,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {\n color: ${(props) => props.theme.colors.mineShaft};\n }\n .has-value.Select--single > .Select-control .Select-value a.Select-value-label,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {\n cursor: pointer;\n text-decoration: none;\n }\n .has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,\n /* stylelint-disable-next-line no-descending-specificity */\n .has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {\n color: #007eff;\n outline: none;\n text-decoration: underline;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-input {\n height: 50px;\n padding-left: 20px;\n padding-right: 15px;\n vertical-align: middle;\n }\n .Select-input > input {\n width: 100%;\n background: none transparent;\n border: 0 none;\n box-shadow: none;\n cursor: default;\n display: inline-block;\n font-family: inherit;\n font-size: 16px;\n margin: 0;\n outline: none;\n line-height: 30px;\n padding: 10px 0;\n -webkit-appearance: none;\n }\n .is-focused .Select-input > input {\n cursor: text;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-focused .Select-arrow,\n .Select-arrow-zone:hover > .Select-arrow {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');\n }\n .has-value.is-pseudo-focused .Select-input {\n opacity: 0;\n }\n .Select-control:not(.is-searchable) > .Select-input {\n outline: none;\n }\n .Select-loading-zone {\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 16px;\n }\n .Select-loading {\n animation: ${spin} 400ms infinite linear;\n width: 16px;\n height: 16px;\n box-sizing: border-box;\n border-radius: 50%;\n border: 2px solid ${(props) => props.theme.colors.alto};\n border-right-color: ${(props) => props.theme.colors.mineShaft};\n display: inline-block;\n position: relative;\n vertical-align: middle;\n }\n .Select-clear-zone {\n animation: ${fadeIn} 200ms;\n color: ${(props) => props.theme.colors.alto};\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 35px;\n line-height: 0;\n\n .Select-clear {\n position: relative;\n top: -1px;\n }\n }\n .Select-clear-zone:hover {\n color: #d0021b;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-clear {\n display: inline-block;\n font-size: 0;\n line-height: 1;\n color: transparent;\n overflow: hidden;\n width: 12px;\n height: 12px;\n background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAnIGhlaWdodD0nMjAnIHZpZXdCb3g9JzAgMCAyMCAyMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KICA8cGF0aAogICAgZD0nTTExLjYgOS41TDE5LjIgMmMuNC0uNi40LTEuMyAwLTEuNy0uNC0uNC0xLjItLjQtMS42IDBMMTAgOCAyLjQuMkMyIDAgMS4yIDAgLjguMy40LjcuNCAxLjMuOCAybDcuNiA3LjUtOCA4Yy0uNS41LS41IDEuMiAwIDEuNy4yLjIuNC4zLjcuMy40IDAgLjcgMCAxLS4zbDgtOCA4IDhjLjMuMi42LjMgMSAuMy4yIDAgLjQgMCAuNy0uMy40LS41LjQtMS4yIDAtMS42bC04LTh6JwogICAgZmlsbD0nI0Q5RDlEOScKICAgIGZpbGxSdWxlPSdldmVub2RkJwogIC8+Cjwvc3ZnPgo=')\n no-repeat;\n background-size: cover;\n }\n .Select--multi .Select-clear-zone {\n width: 17px;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-arrow-zone {\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 35px;\n line-height: 0;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-arrow {\n background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiNiOGI4YjgiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=')\n no-repeat;\n display: inline-block;\n background-size: 12px;\n height: 7px;\n width: 12px;\n position: relative;\n transition: 0.3s;\n transform: rotate(0deg);\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-open .Select-arrow,\n .Select-arrow-zone:hover > .Select-arrow {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');\n }\n .Select--multi .Select-multi-value-wrapper {\n display: inline-block;\n padding-left: 20px;\n }\n /* stylelint-disable-next-line no-duplicate-selectors */\n .Select--multi .Select-multi-value-wrapper {\n .Select-placeholder + .Select-input {\n margin-left: 0;\n }\n }\n .Select--single {\n .Select-multi-value-wrapper {\n display: block;\n width: 100%;\n }\n .Select-input .react-select-2--value {\n display: block;\n width: 100%;\n }\n }\n .Select .Select-aria-only {\n display: inline-block;\n height: 1px;\n width: 1px;\n margin: -1px;\n clip: rect(0, 0, 0, 0);\n overflow: hidden;\n float: left;\n }\n .Select-menu-outer {\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 4px;\n background-color: ${(props) => props.theme.colors.white};\n border: 1px solid ${(props) => props.theme.colors.onahau};\n box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n box-sizing: border-box;\n margin-top: -1px;\n max-height: 270px;\n position: absolute;\n top: 100%;\n width: 100%;\n z-index: 1;\n -webkit-overflow-scrolling: touch;\n }\n .Select-menu {\n max-height: 226px;\n overflow-x: auto;\n /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */\n overflow-y: auto;\n font-size: 16px;\n }\n .Select-option {\n box-sizing: border-box;\n background-color: ${(props) => props.theme.colors.white};\n line-height: 30px;\n color: ${(props) => props.theme.colors.mineShaft};\n cursor: pointer;\n display: block;\n padding: 10px 15px 10px 20px;\n transition: background 0.2s ease;\n }\n .Select-option:last-child {\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 4px;\n }\n .Select-option.is-selected {\n background-color: ${(props) => props.theme.colors.onahau};\n }\n .Select-option.is-focused {\n background-color: ${(props) => props.theme.colors.onahau};\n }\n .Select-option.is-disabled {\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n }\n .Select-noresults {\n box-sizing: border-box;\n color: ${(props) => props.theme.colors.silver};\n cursor: default;\n display: block;\n padding: 10px 20px;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi .Select-input {\n vertical-align: middle;\n margin-left: 10px;\n padding: 0;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi.has-value .Select-input {\n margin-left: 5px;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi .Select-value {\n background-color: ${(props) => props.theme.colors.nebula};\n background-color: ${(props) => tinycolor(props.theme.colors.nebula).setAlpha(0.1).toString()};\n border-radius: 4px;\n border: 1px solid ${(props) => props.theme.colors.onahau};\n border: 1px solid rgba(0, 126, 255, 0.24);\n color: ${(props) => props.theme.colors.mineShaft};\n display: inline-block;\n font-size: 0.9em;\n line-height: 1.4;\n margin-left: 4px;\n margin-top: 4px;\n vertical-align: top;\n }\n .Select--multi .Select-value-icon,\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi .Select-value-label {\n display: inline-block;\n vertical-align: middle;\n }\n .Select--multi .Select-value-icon {\n font-size: 1.5em;\n line-height: 100%;\n vertical-align: middle;\n box-sizing: border-box;\n padding: 5px 4px 2px;\n color: ${(props) => props.theme.colors.accent};\n }\n\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi .Select-value-label {\n border-bottom-right-radius: 4px;\n border-top-right-radius: 4px;\n cursor: default;\n padding: 2px 4px;\n line-height: 1;\n max-width: 90%;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi a.Select-value-label {\n color: ${(props) => props.theme.colors.accent};\n cursor: pointer;\n text-decoration: none;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi a.Select-value-label:hover {\n text-decoration: underline;\n }\n /* stylelint-disable-next-line no-duplicate-selectors */\n .Select--multi .Select-value-icon {\n cursor: pointer;\n border-bottom-left-radius: 4px;\n border-top-left-radius: 4px;\n border-right: 1px solid ${(props) => props.theme.colors.onahau};\n border-right: 1px solid rgba(0, 126, 255, 0.24);\n font-size: 1.5em;\n line-height: 100%;\n box-sizing: border-box;\n padding: 5px 4px 2px;\n color: ${(props) => props.theme.colors.accent};\n }\n .Select--multi .Select-value-icon:hover,\n .Select--multi .Select-value-icon:focus {\n background-color: #d8eafd;\n background-color: rgba(0, 113, 230, 0.08);\n color: ${(props) => props.theme.colors.accent};\n }\n .Select--multi .Select-value-icon:active {\n background-color: #c2e0ff;\n background-color: rgba(0, 126, 255, 0.24);\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi.is-disabled .Select-value {\n background-color: #fcfcfc;\n border: 1px solid #e3e3e3;\n color: ${(props) => props.theme.colors.mineShaft};\n }\n .Select--multi.is-disabled .Select-value-icon {\n cursor: not-allowed;\n border-right: 1px solid #e3e3e3;\n }\n .Select--multi.is-disabled .Select-value-icon:hover,\n .Select--multi.is-disabled .Select-value-icon:focus,\n .Select--multi.is-disabled .Select-value-icon:active {\n background-color: #fcfcfc;\n }\n\n width: auto;\n ${(props) => (props.error ? error : null)}\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) =>\n responsiveProperty(\n 'width',\n props.fluid && props.width !== 'auto' && !Array.isArray(props.width) ? 'max-width' : 'width'\n )}\n ${(props) => (props.fluid ? fluid : null)}\n`\n"],"names":["fadeIn","keyframes","spin","fluid","css","error","errorStyle","Root","styled","span","withConfig","shouldForwardProp","prop","includes","displayName","componentId","props","theme","colors","white","alto","mineShaft","accent","silver","onahau","nebula","tinycolor","setAlpha","toString","display","responsiveProperty","width","Array","isArray"],"mappings":"qPAOA,MAAMA,OAASC,UAOd,CAAA,mCAED,MAAMC,KAAOD,UAIZ,CAAA,iCAED,MAAME,MAAQC,IAMb,CAAA,mDAED,MAAMC,MAAQD,IAAG,CAAA,mBAAA,KAEXE,YAIC,MAAMC,KAAOC,OAAOC,KAAKC,WAAwB,CACtDC,kBAAoBC,GAAS,CAAC,YAAYC,SAASD,KACnDF,WAAA,CAAAI,YAAA,eAAAC,YAAA,mBAFkBP,CAElB,CAAA,uiBAAA,qBAAA,4BAAA,+VAAA,yNAAA,wFAAA,8WAAA,w7FAAA,0GAAA,uBAAA,+FAAA,gBAAA,k+JAAA,qBAAA,yTAAA,2BAAA,kOAAA,gDAAA,yHAAA,yOAAA,qBAAA,uCAAA,gDAAA,sWAAA,gPAAA,+OAAA,iIAAA,0JAAA,+MAAA,wSAAA,IAAA,IAAA,IAAA,KAiCuBQ,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOE,OAExCJ,GAAUA,EAAMC,MAAMC,OAAOG,YAsBlBL,GAAUA,EAAMC,MAAMC,OAAOI,SAW7BN,GAAUA,EAAMC,MAAMC,OAAOI,SAOxCN,GAAUA,EAAMC,MAAMC,OAAOK,SAgB7BP,GAAUA,EAAMC,MAAMC,OAAOG,WA6D1BnB,MAKQc,GAAUA,EAAMC,MAAMC,OAAOE,OAC3BJ,GAAUA,EAAMC,MAAMC,OAAOG,WAMvCrB,QACHgB,GAAUA,EAAMC,MAAMC,OAAOE,OA4FlBJ,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOM,SAoB7BR,GAAUA,EAAMC,MAAMC,OAAOC,QAExCH,GAAUA,EAAMC,MAAMC,OAAOG,YAWlBL,GAAUA,EAAMC,MAAMC,OAAOM,SAG7BR,GAAUA,EAAMC,MAAMC,OAAOM,SAQxCR,GAAUA,EAAMC,MAAMC,OAAOK,SAiBlBP,GAAUA,EAAMC,MAAMC,OAAOO,SAC7BT,GAAUU,UAAUV,EAAMC,MAAMC,OAAOO,QAAQE,SAAS,IAAKC,aAE7DZ,GAAUA,EAAMC,MAAMC,OAAOM,SAExCR,GAAUA,EAAMC,MAAMC,OAAOG,YAoB7BL,GAAUA,EAAMC,MAAMC,OAAOI,SAgB7BN,GAAUA,EAAMC,MAAMC,OAAOI,SAaZN,GAAUA,EAAMC,MAAMC,OAAOM,SAM9CR,GAAUA,EAAMC,MAAMC,OAAOI,SAM7BN,GAAUA,EAAMC,MAAMC,OAAOI,SAU7BN,GAAUA,EAAMC,MAAMC,OAAOG,YAatCL,GAAWA,EAAMX,MAAQA,MAAQ,OACjCW,GAAWA,EAAMa,QAAUA,QAAQb,EAAMa,SAAW,OACpDb,GACDc,mBACE,QACAd,EAAMb,OAASa,EAAMe,QAAU,SAAWC,MAAMC,QAAQjB,EAAMe,OAAS,YAAc,WAEtFf,GAAWA,EAAMb,MAAQA,MAAQ"}
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Select/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { display } from 'mixins/display'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { errorStyle } from 'components/Input/style'\nimport { hover } from 'mixins/hover'\nimport type { SelectProps } from './types'\n\nconst fadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`\n\nconst spin = keyframes`\n to {\n transform: rotate(1turn);\n }\n`\n\nconst fluid = css`\n width: 100%;\n .Select {\n max-width: 100%;\n width: 100%;\n }\n`\n\nconst error = css`\n .Select-control {\n ${errorStyle}\n }\n`\n\nexport const Root = styled.span.withConfig<SelectProps>({\n shouldForwardProp: (prop) => ['children'].includes(prop),\n})`\n .Select {\n position: relative;\n }\n .Select,\n .Select div,\n .Select input,\n .Select span {\n box-sizing: border-box;\n }\n .Select.is-disabled > .Select-control {\n cursor: not-allowed;\n background-color: #f5f5f5;\n }\n .Select.is-disabled .Select-value-label {\n color: rgba(0, 0, 0, 0.16) !important;\n }\n ${hover(`box-shadow: none;`, '.Select.is-disabled > .Select-control:hover')}\n .Select.is-disabled .Select-arrow-zone {\n cursor: default;\n pointer-events: none;\n opacity: 0.35;\n }\n .Select.is-clearable {\n .Select-placeholder,\n &.Select--single > .Select-control .Select-value {\n padding-right: 70px;\n }\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-control {\n background-color: ${(props) => props.theme.colors.white};\n border: solid 1px ${(props) => props.theme.colors.alto};\n border-radius: 4px;\n color: ${(props) => props.theme.colors.mineShaft};\n cursor: default;\n display: table;\n border-spacing: 0;\n border-collapse: separate;\n height: 50px;\n outline: none;\n overflow: hidden;\n position: relative;\n width: 100%;\n }\n .Select-control .Select-input:focus {\n outline: none;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-searchable.is-open > .Select-control {\n cursor: text;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-open > .Select-control {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n border: 1px solid ${(props) => props.theme.colors.accent};\n outline: none;\n }\n .is-open > .Select-control .Select-arrow {\n transform: rotate(180deg);\n }\n .is-searchable.is-focused:not(.is-open) > .Select-control {\n cursor: text;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-focused:not(.is-open) > .Select-control {\n border: 1px solid ${(props) => props.theme.colors.accent};\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-placeholder,\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--single > .Select-control .Select-value {\n bottom: 0;\n color: ${(props) => props.theme.colors.silver};\n left: 0;\n font-size: 16px;\n line-height: 50px;\n padding-left: 20px;\n padding-right: 35px;\n position: absolute;\n right: 0;\n top: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .has-value.Select--single > .Select-control .Select-value .Select-value-label,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {\n color: ${(props) => props.theme.colors.mineShaft};\n }\n .has-value.Select--single > .Select-control .Select-value a.Select-value-label,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {\n cursor: pointer;\n text-decoration: none;\n }\n ${hover(\n `color: #007eff;\n outline: none;\n text-decoration: underline;`,\n '.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover'\n )}\n ${hover(\n `color: #007eff;\n outline: none;\n text-decoration: underline;`,\n '.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover'\n )}\n\n /* stylelint-disable-next-line no-descending-specificity */\n .has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,\n .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {\n color: #007eff;\n outline: none;\n text-decoration: underline;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-input {\n height: 50px;\n padding-left: 20px;\n padding-right: 15px;\n vertical-align: middle;\n }\n .Select-input > input {\n width: 100%;\n background: none transparent;\n border: 0 none;\n box-shadow: none;\n cursor: default;\n display: inline-block;\n font-family: inherit;\n font-size: 16px;\n margin: 0;\n outline: none;\n line-height: 30px;\n padding: 10px 0;\n -webkit-appearance: none;\n }\n .is-focused .Select-input > input {\n cursor: text;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-focused .Select-arrow {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');\n }\n ${hover(\n `background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');`,\n '.Select-arrow-zone:hover > .Select-arrow'\n )}\n .has-value.is-pseudo-focused .Select-input {\n opacity: 0;\n }\n .Select-control:not(.is-searchable) > .Select-input {\n outline: none;\n }\n .Select-loading-zone {\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 16px;\n }\n .Select-loading {\n animation: ${spin} 400ms infinite linear;\n width: 16px;\n height: 16px;\n box-sizing: border-box;\n border-radius: 50%;\n border: 2px solid ${(props) => props.theme.colors.alto};\n border-right-color: ${(props) => props.theme.colors.mineShaft};\n display: inline-block;\n position: relative;\n vertical-align: middle;\n }\n .Select-clear-zone {\n animation: ${fadeIn} 200ms;\n color: ${(props) => props.theme.colors.alto};\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 35px;\n line-height: 0;\n\n .Select-clear {\n position: relative;\n top: -1px;\n }\n }\n ${hover(`color: #d0021b;`, '.Select-clear-zone:hover')}\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-clear {\n display: inline-block;\n font-size: 0;\n line-height: 1;\n color: transparent;\n overflow: hidden;\n width: 12px;\n height: 12px;\n background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAnIGhlaWdodD0nMjAnIHZpZXdCb3g9JzAgMCAyMCAyMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KICA8cGF0aAogICAgZD0nTTExLjYgOS41TDE5LjIgMmMuNC0uNi40LTEuMyAwLTEuNy0uNC0uNC0xLjItLjQtMS42IDBMMTAgOCAyLjQuMkMyIDAgMS4yIDAgLjguMy40LjcuNCAxLjMuOCAybDcuNiA3LjUtOCA4Yy0uNS41LS41IDEuMiAwIDEuNy4yLjIuNC4zLjcuMy40IDAgLjcgMCAxLS4zbDgtOCA4IDhjLjMuMi42LjMgMSAuMy4yIDAgLjQgMCAuNy0uMy40LS41LjQtMS4yIDAtMS42bC04LTh6JwogICAgZmlsbD0nI0Q5RDlEOScKICAgIGZpbGxSdWxlPSdldmVub2RkJwogIC8+Cjwvc3ZnPgo=')\n no-repeat;\n background-size: cover;\n }\n .Select--multi .Select-clear-zone {\n width: 17px;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-arrow-zone {\n cursor: pointer;\n display: table-cell;\n position: relative;\n text-align: center;\n vertical-align: middle;\n width: 35px;\n line-height: 0;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select-arrow {\n background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiNiOGI4YjgiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=')\n no-repeat;\n display: inline-block;\n background-size: 12px;\n height: 7px;\n width: 12px;\n position: relative;\n transition: 0.3s;\n transform: rotate(0deg);\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .is-open .Select-arrow {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');\n }\n ${hover(\n `background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMC4zMjg1NDI4NTcgMCAxMiAxOS45MDY5MTY3IDEyIDE5LjkwNjkxNjcgMC4zMjg1NDI4NTcgNy4yMjgwMTQ0OGUtMjAgMC4zMjg1NDI4NTciLz48L2RlZnM+PGcgaWQ9IlR1dG9yaWFsIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNzMyIj48ZyBpZD0i0YDQtdCz0LAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NzYuMDAwMDAwLCAtNzA4LjAwMDAwMCkiPjxnIGlkPSJhcnJvdy1kb3duLXNpZ24tdG8tbmF2aWdhdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3NC4wMDAwMDAsIDcwOC4wMDAwMDApIj48bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PHBhdGggZD0iTTEwLjk1MzE1ODUsMTAuODI3MjY0OSBDMTAuNjMyMzI5MywxMC44MjcyNjQ5IDEwLjMxMTUwMDEsMTAuNzAwODE4IDEwLjA2NzcyOTksMTAuNDUwMDgyOSBMMi4zNjgxMjkwMSwyLjUzMDQ5MzQzIEMxLjg3NzI5MDMzLDIuMDI1NjMwNzkgMS44NzcyOTAzMywxLjIwODY2MDAxIDIuMzY4MTI5MDEsMC43MDUzMzk0IEMyLjg1NzQ2ODUsMC4yMDI5NDQwMSAzLjY1MTc0NTY0LDAuMjAyOTQ0MDEgNC4xNDEzODQ5NiwwLjcwNTMzOTQgTDEwLjk1MzE1ODUsNy43MTI5Njg2NiBMMTcuNzY2NDMxMiwwLjcwNjU3MzAyOSBDMTguMjU2MDcwNSwwLjIwMjk0NDAxIDE5LjA1MDA0NzgsMC4yMDI5NDQwMSAxOS41Mzk2ODcyLDAuNzA2NTczMDI5IEMyMC4wMjkzMjY1LDEuMjA5ODkzNjQgMjAuMDI5MzI2NSwyLjAyNjg2NDQxIDE5LjUzOTY4NzIsMi41MzA0OTM0MyBMMTEuODM5Nzg2NSwxMC40NTAwODI5IEMxMS41OTYzMTYxLDEwLjcwMjA1MTYgMTEuMjc0Mjg3NSwxMC44MjcyNjQ5IDEwLjk1MzE1ODUsMTAuODI3MjY0OSBMMTAuOTUzMTU4NSwxMC44MjcyNjQ5IFoiIGlkPSJGaWxsLTEiIGZpbGw9IiM0OGExZTYiIG1hc2s9InVybCgjbWFzay0yKSIvPjwvZz48L2c+PC9nPjwvc3ZnPgo=');`,\n '.Select-arrow-zone:hover > .Select-arrow'\n )}\n .Select--multi .Select-multi-value-wrapper {\n display: inline-block;\n padding-left: 20px;\n }\n /* stylelint-disable-next-line no-duplicate-selectors */\n .Select--multi .Select-multi-value-wrapper {\n .Select-placeholder + .Select-input {\n margin-left: 0;\n }\n }\n .Select--single {\n .Select-multi-value-wrapper {\n display: block;\n width: 100%;\n }\n .Select-input .react-select-2--value {\n display: block;\n width: 100%;\n }\n }\n .Select .Select-aria-only {\n display: inline-block;\n height: 1px;\n width: 1px;\n margin: -1px;\n clip: rect(0, 0, 0, 0);\n overflow: hidden;\n float: left;\n }\n .Select-menu-outer {\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 4px;\n background-color: ${(props) => props.theme.colors.white};\n border: 1px solid ${(props) => props.theme.colors.onahau};\n box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n box-sizing: border-box;\n margin-top: -1px;\n max-height: 270px;\n position: absolute;\n top: 100%;\n width: 100%;\n z-index: 1;\n -webkit-overflow-scrolling: touch;\n }\n .Select-menu {\n max-height: 226px;\n overflow-x: auto;\n overflow-y: auto;\n font-size: 16px;\n }\n .Select-option {\n box-sizing: border-box;\n background-color: ${(props) => props.theme.colors.white};\n line-height: 30px;\n color: ${(props) => props.theme.colors.mineShaft};\n cursor: pointer;\n display: block;\n padding: 10px 15px 10px 20px;\n transition: background 0.2s ease;\n }\n .Select-option:last-child {\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 4px;\n }\n .Select-option.is-selected {\n background-color: ${(props) => props.theme.colors.onahau};\n }\n .Select-option.is-focused {\n background-color: ${(props) => props.theme.colors.onahau};\n }\n .Select-option.is-disabled {\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n }\n .Select-noresults {\n box-sizing: border-box;\n color: ${(props) => props.theme.colors.silver};\n cursor: default;\n display: block;\n padding: 10px 20px;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi .Select-input {\n vertical-align: middle;\n margin-left: 10px;\n padding: 0;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi.has-value .Select-input {\n margin-left: 5px;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi .Select-value {\n background-color: ${(props) => props.theme.colors.nebula};\n background-color: ${(props) => tinycolor(props.theme.colors.nebula).setAlpha(0.1).toString()};\n border-radius: 4px;\n border: 1px solid ${(props) => props.theme.colors.onahau};\n border: 1px solid rgba(0, 126, 255, 0.24);\n color: ${(props) => props.theme.colors.mineShaft};\n display: inline-block;\n font-size: 0.9em;\n line-height: 1.4;\n margin-left: 4px;\n margin-top: 4px;\n vertical-align: top;\n }\n .Select--multi .Select-value-icon,\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi .Select-value-label {\n display: inline-block;\n vertical-align: middle;\n }\n .Select--multi .Select-value-icon {\n font-size: 1.5em;\n line-height: 100%;\n vertical-align: middle;\n box-sizing: border-box;\n padding: 5px 4px 2px;\n color: ${(props) => props.theme.colors.accent};\n cursor: pointer;\n border-bottom-left-radius: 4px;\n border-top-left-radius: 4px;\n border-right: 1px solid ${(props) => props.theme.colors.onahau};\n border-right: 1px solid rgba(0, 126, 255, 0.24);\n }\n\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi .Select-value-label {\n border-bottom-right-radius: 4px;\n border-top-right-radius: 4px;\n cursor: default;\n padding: 2px 4px;\n line-height: 1;\n max-width: 90%;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi a.Select-value-label {\n color: ${(props) => props.theme.colors.accent};\n cursor: pointer;\n text-decoration: none;\n }\n /* stylelint-disable-next-line no-descending-specificity */\n ${hover(`text-decoration: underline;`, 'Select--multi a.Select-value-label:hover')}\n ${(props) =>\n hover(\n `\n background-color: rgba(0, 113, 230, 0.08);\n color: ${props.theme.colors.accent};\n `,\n '.Select--multi .Select-value-icon:hover'\n )}\n .Select--multi .Select-value-icon:focus {\n background-color: rgba(0, 113, 230, 0.08);\n color: ${(props) => props.theme.colors.accent};\n }\n .Select--multi .Select-value-icon:active {\n background-color: rgba(0, 126, 255, 0.24);\n }\n /* stylelint-disable-next-line no-descending-specificity */\n .Select--multi.is-disabled .Select-value {\n background-color: #fcfcfc;\n border: 1px solid #e3e3e3;\n color: ${(props) => props.theme.colors.mineShaft};\n }\n .Select--multi.is-disabled .Select-value-icon {\n cursor: not-allowed;\n border-right: 1px solid #e3e3e3;\n }\n ${hover(`background-color: #fcfcfc;`, '.Select--multi.is-disabled .Select-value-icon:hover')}\n .Select--multi.is-disabled .Select-value-icon:focus,\n .Select--multi.is-disabled .Select-value-icon:active {\n background-color: #fcfcfc;\n }\n\n width: auto;\n ${(props) => (props.error ? error : null)}\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) =>\n responsiveProperty(\n 'width',\n props.fluid && props.width !== 'auto' && !Array.isArray(props.width) ? 'max-width' : 'width'\n )}\n ${(props) => (props.fluid ? fluid : null)}\n`\n"],"names":["fadeIn","keyframes","spin","fluid","css","error","errorStyle","Root","styled","span","withConfig","shouldForwardProp","prop","includes","displayName","componentId","hover","props","theme","colors","white","alto","mineShaft","accent","silver","onahau","nebula","tinycolor","setAlpha","toString","display","responsiveProperty","width","Array","isArray"],"mappings":"+RAQA,MAAMA,OAASC,UAOd,CAAA,mCAED,MAAMC,KAAOD,UAIZ,CAAA,iCAED,MAAME,MAAQC,IAMb,CAAA,mDAED,MAAMC,MAAQD,IAAG,CAAA,mBAAA,KAEXE,YAIC,MAAMC,KAAOC,OAAOC,KAAKC,WAAwB,CACtDC,kBAAoBC,GAAS,CAAC,YAAYC,SAASD,KACnDF,WAAA,CAAAI,YAAA,eAAAC,YAAA,mBAFkBP,CAElB,CAAA,kQAAA,4OAAA,qBAAA,4BAAA,+VAAA,yNAAA,wFAAA,8WAAA,0NAAA,IAAA,8uEAAA,mRAAA,0GAAA,uBAAA,+FAAA,gBAAA,oKAAA,ytIAAA,4hBAAA,qBAAA,yTAAA,2BAAA,kOAAA,gDAAA,yHAAA,yOAAA,qBAAA,uCAAA,gDAAA,sWAAA,mGAAA,4RAAA,yCAAA,IAAA,wFAAA,sLAAA,sGAAA,kJAAA,IAAA,IAAA,IAAA,IAiBEQ,MAAM,oBAAqB,gDAcNC,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOE,OAExCJ,GAAUA,EAAMC,MAAMC,OAAOG,YAsBlBL,GAAUA,EAAMC,MAAMC,OAAOI,SAW7BN,GAAUA,EAAMC,MAAMC,OAAOI,SAOxCN,GAAUA,EAAMC,MAAMC,OAAOK,SAgB7BP,GAAUA,EAAMC,MAAMC,OAAOG,WAOvCN,MACA,uEAGA,wFAEAA,MACA,uEAGA,0GAuCAA,MACA,2mDACA,4CAiBad,MAKQe,GAAUA,EAAMC,MAAMC,OAAOE,OAC3BJ,GAAUA,EAAMC,MAAMC,OAAOG,WAMvCtB,QACHiB,GAAUA,EAAMC,MAAMC,OAAOE,MAcvCL,MAAM,kBAAmB,4BA2CzBA,MACA,2mDACA,6CAkCqBC,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOM,SAmB7BR,GAAUA,EAAMC,MAAMC,OAAOC,QAExCH,GAAUA,EAAMC,MAAMC,OAAOG,YAWlBL,GAAUA,EAAMC,MAAMC,OAAOM,SAG7BR,GAAUA,EAAMC,MAAMC,OAAOM,SAQxCR,GAAUA,EAAMC,MAAMC,OAAOK,SAiBlBP,GAAUA,EAAMC,MAAMC,OAAOO,SAC7BT,GAAUU,UAAUV,EAAMC,MAAMC,OAAOO,QAAQE,SAAS,IAAKC,aAE7DZ,GAAUA,EAAMC,MAAMC,OAAOM,SAExCR,GAAUA,EAAMC,MAAMC,OAAOG,YAoB7BL,GAAUA,EAAMC,MAAMC,OAAOI,SAIZN,GAAUA,EAAMC,MAAMC,OAAOM,SAiB9CR,GAAUA,EAAMC,MAAMC,OAAOI,QAKvCP,MAAM,8BAA+B,6CACpCC,GACDD,MACE,wEAEWC,EAAMC,MAAMC,OAAOI,kBAE9B,6CAIQN,GAAUA,EAAMC,MAAMC,OAAOI,SAS7BN,GAAUA,EAAMC,MAAMC,OAAOG,WAMvCN,MAAM,6BAA8B,wDAOnCC,GAAWA,EAAMZ,MAAQA,MAAQ,OACjCY,GAAWA,EAAMa,QAAUA,QAAQb,EAAMa,SAAW,OACpDb,GACDc,mBACE,QACAd,EAAMd,OAASc,EAAMe,QAAU,SAAWC,MAAMC,QAAQjB,EAAMe,OAAS,YAAc,WAEtFf,GAAWA,EAAMd,MAAQA,MAAQ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardSwitchProp=style.createShouldForwardProp((o=>!['inline','disabled'].includes(o)));const shouldForwardKnobProp=style.createShouldForwardProp();const Input=styled__default.default.input.withConfig({shouldForwardProp:o=>!['error','success','onColored'].includes(o)}).withConfig({displayName:"Switch__Input",componentId:"ui__sc-9l6yad-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;cursor:inherit;&:focus{outline:none;}"]);const Track=styled__default.default.span.withConfig({displayName:"Switch__Track",componentId:"ui__sc-9l6yad-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;padding:0 1px;border-radius:inherit;transition:background-color 250ms linear;"]);const Knob=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardKnobProp}).withConfig({displayName:"Switch__Knob",componentId:"ui__sc-9l6yad-2"})(["box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:50%;height:100%;transition:transform 250ms cubic-bezier(0.45,0,0.2,1);&::after{content:'';flex-shrink:0;","}"],responsiveSize.responsiveSize);const Root=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardSwitchProp}).withConfig({displayName:"Switch__Root",componentId:"ui__sc-9l6yad-3"})([""," "," ",""],(o=>`\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `),(o=>{return e={knobColor:o.theme.colors['bg-oncolor-primary'],knobShadowColor:o.theme.colors['bg-oncolor-hover'],trackColor:o.theme.colors['bg-onmain-tertiary'],trackColorHover:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),trackColorChecked:o.theme.colors['bg-brand-primary-basic'],trackColorCheckedHover:tinycolor__default.default(o.theme.colors['bg-brand-primary-basic']).lighten(4).toString(),trackColorDisabled:o.theme.colors['bg-disabled-small'],trackColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette},`\n & > ${Track} > ${Knob}::after {\n background-color: ${e.knobColor};\n box-shadow: 0px 2px 4px ${e.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${e.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${e.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${e.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${e.trackColorDisabledChecked};\n }\n
|
|
1
|
+
'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var hover=require('../../mixins/hover.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardSwitchProp=style.createShouldForwardProp((o=>!['inline','disabled'].includes(o)));const shouldForwardKnobProp=style.createShouldForwardProp();const Input=styled__default.default.input.withConfig({shouldForwardProp:o=>!['error','success','onColored'].includes(o)}).withConfig({displayName:"Switch__Input",componentId:"ui__sc-9l6yad-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;cursor:inherit;&:focus{outline:none;}"]);const Track=styled__default.default.span.withConfig({displayName:"Switch__Track",componentId:"ui__sc-9l6yad-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;padding:0 1px;border-radius:inherit;transition:background-color 250ms linear;"]);const Knob=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardKnobProp}).withConfig({displayName:"Switch__Knob",componentId:"ui__sc-9l6yad-2"})(["box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:50%;height:100%;transition:transform 250ms cubic-bezier(0.45,0,0.2,1);&::after{content:'';flex-shrink:0;","}"],responsiveSize.responsiveSize);const Root=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardSwitchProp}).withConfig({displayName:"Switch__Root",componentId:"ui__sc-9l6yad-3"})([""," "," ",""],(o=>`\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `),(o=>{return e={knobColor:o.theme.colors['bg-oncolor-primary'],knobShadowColor:o.theme.colors['bg-oncolor-hover'],trackColor:o.theme.colors['bg-onmain-tertiary'],trackColorHover:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),trackColorChecked:o.theme.colors['bg-brand-primary-basic'],trackColorCheckedHover:tinycolor__default.default(o.theme.colors['bg-brand-primary-basic']).lighten(4).toString(),trackColorDisabled:o.theme.colors['bg-disabled-small'],trackColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette},`\n & > ${Track} > ${Knob}::after {\n background-color: ${e.knobColor};\n box-shadow: 0px 2px 4px ${e.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${e.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${e.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${e.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${e.trackColorDisabledChecked};\n }\n ${hover.hover(`\n background-color: ${e.trackColorHover};\n `,`&:hover > ${Input}:not(:disabled) + ${Track}`)}\n ${hover.hover(`\n background-color: ${e.trackColorCheckedHover};\n `,`&:hover > ${Input}:not(:disabled):checked + ${Track}`)}\n`;var e}),responsiveSize.responsiveSize);exports.Input=Input,exports.Knob=Knob,exports.Root=Root,exports.Track=Track;
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Switch/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledSwitchProps, StyledKnobProps, SwitchPalette } from './types'\n\nconst shouldForwardSwitchProp = createShouldForwardProp((propKey) => !['inline', 'disabled'].includes(propKey))\n\nconst shouldForwardKnobProp = createShouldForwardProp()\n\nexport const Input = styled.input.withConfig({\n shouldForwardProp: (propKey) => !['error', 'success', 'onColored'].includes(propKey),\n})`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n border: none;\n opacity: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n cursor: inherit;\n &:focus {\n outline: none;\n }\n`\n\nexport const Track = styled.span`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0 1px;\n border-radius: inherit;\n transition: background-color 250ms linear;\n`\n\nexport const Knob = styled.span.withConfig<StyledKnobProps>({\n shouldForwardProp: shouldForwardKnobProp,\n})`\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50%;\n height: 100%;\n transition: transform 250ms cubic-bezier(0.45, 0, 0.2, 1);\n &::after {\n content: '';\n flex-shrink: 0;\n ${responsiveSize}\n }\n`\n\nconst template = (palette: SwitchPalette) => `\n & > ${Track} > ${Knob}::after {\n background-color: ${palette.knobColor};\n box-shadow: 0px 2px 4px ${palette.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${palette.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${palette.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${palette.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${palette.trackColorDisabledChecked};\n }\n
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Switch/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledSwitchProps, StyledKnobProps, SwitchPalette } from './types'\n\nconst shouldForwardSwitchProp = createShouldForwardProp((propKey) => !['inline', 'disabled'].includes(propKey))\n\nconst shouldForwardKnobProp = createShouldForwardProp()\n\nexport const Input = styled.input.withConfig({\n shouldForwardProp: (propKey) => !['error', 'success', 'onColored'].includes(propKey),\n})`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n border: none;\n opacity: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n cursor: inherit;\n &:focus {\n outline: none;\n }\n`\n\nexport const Track = styled.span`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0 1px;\n border-radius: inherit;\n transition: background-color 250ms linear;\n`\n\nexport const Knob = styled.span.withConfig<StyledKnobProps>({\n shouldForwardProp: shouldForwardKnobProp,\n})`\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50%;\n height: 100%;\n transition: transform 250ms cubic-bezier(0.45, 0, 0.2, 1);\n &::after {\n content: '';\n flex-shrink: 0;\n ${responsiveSize}\n }\n`\n\nconst template = (palette: SwitchPalette) => `\n & > ${Track} > ${Knob}::after {\n background-color: ${palette.knobColor};\n box-shadow: 0px 2px 4px ${palette.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${palette.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${palette.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${palette.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${palette.trackColorDisabledChecked};\n }\n ${hover(\n `\n background-color: ${palette.trackColorHover};\n `,\n `&:hover > ${Input}:not(:disabled) + ${Track}`\n )}\n ${hover(\n `\n background-color: ${palette.trackColorCheckedHover};\n `,\n `&:hover > ${Input}:not(:disabled):checked + ${Track}`\n )}\n`\n\nexport const Root = styled.span.withConfig<StyledSwitchProps>({\n shouldForwardProp: shouldForwardSwitchProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `}\n\n ${(props) =>\n template({\n knobColor: props.theme.colors['bg-oncolor-primary'],\n knobShadowColor: props.theme.colors['bg-oncolor-hover'],\n trackColor: props.theme.colors['bg-onmain-tertiary'],\n trackColorHover: tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor,\n trackColorChecked: props.theme.colors['bg-brand-primary-basic'],\n trackColorCheckedHover: tinycolor(props.theme.colors['bg-brand-primary-basic']).lighten(4).toString() as CSSColor,\n trackColorDisabled: props.theme.colors['bg-disabled-small'],\n trackColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardSwitchProp","createShouldForwardProp","propKey","includes","shouldForwardKnobProp","Input","styled","input","withConfig","shouldForwardProp","displayName","componentId","Track","span","Knob","responsiveSize","Root","props","inline","disabled","theme","colors","white","template","palette","knobColor","knobShadowColor","trackColor","trackColorHover","tinycolor","default","darken","toString","trackColorChecked","trackColorCheckedHover","lighten","trackColorDisabled","trackColorDisabledChecked","hover"],"mappings":"kZAQA,MAAMA,wBAA0BC,MAAAA,yBAAyBC,IAAa,CAAC,SAAU,YAAYC,SAASD,KAEtG,MAAME,sBAAwBH,MAAuBA,0BAE9C,MAAMI,MAAQC,gBAAAA,QAAOC,MAAMC,WAAW,CAC3CC,kBAAoBP,IAAa,CAAC,QAAS,UAAW,aAAaC,SAASD,KAC5EM,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAFmBL,CAiBpB,CAAA,qKAEYM,MAAQN,gBAAAA,QAAOO,KAAIL,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAAXL,CAUpB,CAAA,8JAEM,MAAMQ,KAAOR,gBAAAA,QAAOO,KAAKL,WAA4B,CAC1DC,kBAAmBL,wBACnBI,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,8LAAA,KAWIS,eAAAA,gBAmCC,MAAMC,KAAOV,gBAAAA,QAAOO,KAAKL,WAA8B,CAC5DC,kBAAmBT,0BACnBQ,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,KACGW,GAAU,gIAKEA,EAAMC,OAAS,cAAgB,0BAChCD,EAAME,SAAW,cAAgB,2BAErCd,mBAAmBO,WAAWE,sEAI9BT,yBAAyBO,0CACLK,EAAMG,MAAMC,OAAOC,oBAAoBL,EAAMG,MAAMC,OAAO,yGAMrFJ,IACDM,OAtDcC,EAsDL,CACPC,UAAWR,EAAMG,MAAMC,OAAO,sBAC9BK,gBAAiBT,EAAMG,MAAMC,OAAO,oBACpCM,WAAYV,EAAMG,MAAMC,OAAO,sBAC/BO,gBAAiBC,mBAASC,QAACb,EAAMG,MAAMC,OAAO,uBAAuBU,OAAO,GAAGC,WAC/EC,kBAAmBhB,EAAMG,MAAMC,OAAO,0BACtCa,uBAAwBL,mBAASC,QAACb,EAAMG,MAAMC,OAAO,2BAA2Bc,QAAQ,GAAGH,WAC3FI,mBAAoBnB,EAAMG,MAAMC,OAAO,qBACvCgB,0BAA2BpB,EAAMG,MAAMC,OAAO,yBAC3CJ,EAAMO,SA/D8B,WACrCZ,WAAWE,wCACKU,EAAQC,2CACFD,EAAQE,gCAE9Bd,kCACgBY,EAAQG,2BAExBtB,kCAAkCO,kCAClBY,EAAQS,kCAExB5B,oBAAoBO,kCACJY,EAAQY,mCAExB/B,4BAA4BO,kCACZY,EAAQa,sCAE5BC,MAAKA,MACL,6BACsBd,EAAQI,yBAE9B,aAAavB,0BAA0BO,eAEvC0B,MAAKA,MACL,6BACsBd,EAAQU,gCAE9B,aAAa7B,kCAAkCO,aA3BjCY,KAgEZ,GAEFT,eAAcA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import styled from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';const shouldForwardSwitchProp=createShouldForwardProp((o=>!['inline','disabled'].includes(o)));const shouldForwardKnobProp=createShouldForwardProp();const Input=styled.input.withConfig({shouldForwardProp:o=>!['error','success','onColored'].includes(o)}).withConfig({displayName:"Switch__Input",componentId:"ui__sc-9l6yad-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;cursor:inherit;&:focus{outline:none;}"]);const Track=styled.span.withConfig({displayName:"Switch__Track",componentId:"ui__sc-9l6yad-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;padding:0 1px;border-radius:inherit;transition:background-color 250ms linear;"]);const Knob=styled.span.withConfig({shouldForwardProp:shouldForwardKnobProp}).withConfig({displayName:"Switch__Knob",componentId:"ui__sc-9l6yad-2"})(["box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:50%;height:100%;transition:transform 250ms cubic-bezier(0.45,0,0.2,1);&::after{content:'';flex-shrink:0;","}"],responsiveSize);const Root=styled.span.withConfig({shouldForwardProp:shouldForwardSwitchProp}).withConfig({displayName:"Switch__Root",componentId:"ui__sc-9l6yad-3"})([""," "," ",""],(o=>`\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `),(o=>{return r={knobColor:o.theme.colors['bg-oncolor-primary'],knobShadowColor:o.theme.colors['bg-oncolor-hover'],trackColor:o.theme.colors['bg-onmain-tertiary'],trackColorHover:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),trackColorChecked:o.theme.colors['bg-brand-primary-basic'],trackColorCheckedHover:tinycolor(o.theme.colors['bg-brand-primary-basic']).lighten(4).toString(),trackColorDisabled:o.theme.colors['bg-disabled-small'],trackColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette},`\n & > ${Track} > ${Knob}::after {\n background-color: ${r.knobColor};\n box-shadow: 0px 2px 4px ${r.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${r.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${r.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${r.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${r.trackColorDisabledChecked};\n }\n
|
|
1
|
+
import styled from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardSwitchProp=createShouldForwardProp((o=>!['inline','disabled'].includes(o)));const shouldForwardKnobProp=createShouldForwardProp();const Input=styled.input.withConfig({shouldForwardProp:o=>!['error','success','onColored'].includes(o)}).withConfig({displayName:"Switch__Input",componentId:"ui__sc-9l6yad-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;cursor:inherit;&:focus{outline:none;}"]);const Track=styled.span.withConfig({displayName:"Switch__Track",componentId:"ui__sc-9l6yad-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;padding:0 1px;border-radius:inherit;transition:background-color 250ms linear;"]);const Knob=styled.span.withConfig({shouldForwardProp:shouldForwardKnobProp}).withConfig({displayName:"Switch__Knob",componentId:"ui__sc-9l6yad-2"})(["box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:50%;height:100%;transition:transform 250ms cubic-bezier(0.45,0,0.2,1);&::after{content:'';flex-shrink:0;","}"],responsiveSize);const Root=styled.span.withConfig({shouldForwardProp:shouldForwardSwitchProp}).withConfig({displayName:"Switch__Root",componentId:"ui__sc-9l6yad-3"})([""," "," ",""],(o=>`\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `),(o=>{return r={knobColor:o.theme.colors['bg-oncolor-primary'],knobShadowColor:o.theme.colors['bg-oncolor-hover'],trackColor:o.theme.colors['bg-onmain-tertiary'],trackColorHover:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),trackColorChecked:o.theme.colors['bg-brand-primary-basic'],trackColorCheckedHover:tinycolor(o.theme.colors['bg-brand-primary-basic']).lighten(4).toString(),trackColorDisabled:o.theme.colors['bg-disabled-small'],trackColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette},`\n & > ${Track} > ${Knob}::after {\n background-color: ${r.knobColor};\n box-shadow: 0px 2px 4px ${r.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${r.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${r.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${r.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${r.trackColorDisabledChecked};\n }\n ${hover(`\n background-color: ${r.trackColorHover};\n `,`&:hover > ${Input}:not(:disabled) + ${Track}`)}\n ${hover(`\n background-color: ${r.trackColorCheckedHover};\n `,`&:hover > ${Input}:not(:disabled):checked + ${Track}`)}\n`;var r}),responsiveSize);export{Input,Knob,Root,Track};
|
|
2
2
|
//# sourceMappingURL=style.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Switch/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledSwitchProps, StyledKnobProps, SwitchPalette } from './types'\n\nconst shouldForwardSwitchProp = createShouldForwardProp((propKey) => !['inline', 'disabled'].includes(propKey))\n\nconst shouldForwardKnobProp = createShouldForwardProp()\n\nexport const Input = styled.input.withConfig({\n shouldForwardProp: (propKey) => !['error', 'success', 'onColored'].includes(propKey),\n})`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n border: none;\n opacity: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n cursor: inherit;\n &:focus {\n outline: none;\n }\n`\n\nexport const Track = styled.span`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0 1px;\n border-radius: inherit;\n transition: background-color 250ms linear;\n`\n\nexport const Knob = styled.span.withConfig<StyledKnobProps>({\n shouldForwardProp: shouldForwardKnobProp,\n})`\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50%;\n height: 100%;\n transition: transform 250ms cubic-bezier(0.45, 0, 0.2, 1);\n &::after {\n content: '';\n flex-shrink: 0;\n ${responsiveSize}\n }\n`\n\nconst template = (palette: SwitchPalette) => `\n & > ${Track} > ${Knob}::after {\n background-color: ${palette.knobColor};\n box-shadow: 0px 2px 4px ${palette.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${palette.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${palette.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${palette.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${palette.trackColorDisabledChecked};\n }\n
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Switch/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledSwitchProps, StyledKnobProps, SwitchPalette } from './types'\n\nconst shouldForwardSwitchProp = createShouldForwardProp((propKey) => !['inline', 'disabled'].includes(propKey))\n\nconst shouldForwardKnobProp = createShouldForwardProp()\n\nexport const Input = styled.input.withConfig({\n shouldForwardProp: (propKey) => !['error', 'success', 'onColored'].includes(propKey),\n})`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n border: none;\n opacity: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n cursor: inherit;\n &:focus {\n outline: none;\n }\n`\n\nexport const Track = styled.span`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0 1px;\n border-radius: inherit;\n transition: background-color 250ms linear;\n`\n\nexport const Knob = styled.span.withConfig<StyledKnobProps>({\n shouldForwardProp: shouldForwardKnobProp,\n})`\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50%;\n height: 100%;\n transition: transform 250ms cubic-bezier(0.45, 0, 0.2, 1);\n &::after {\n content: '';\n flex-shrink: 0;\n ${responsiveSize}\n }\n`\n\nconst template = (palette: SwitchPalette) => `\n & > ${Track} > ${Knob}::after {\n background-color: ${palette.knobColor};\n box-shadow: 0px 2px 4px ${palette.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${palette.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${palette.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${palette.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${palette.trackColorDisabledChecked};\n }\n ${hover(\n `\n background-color: ${palette.trackColorHover};\n `,\n `&:hover > ${Input}:not(:disabled) + ${Track}`\n )}\n ${hover(\n `\n background-color: ${palette.trackColorCheckedHover};\n `,\n `&:hover > ${Input}:not(:disabled):checked + ${Track}`\n )}\n`\n\nexport const Root = styled.span.withConfig<StyledSwitchProps>({\n shouldForwardProp: shouldForwardSwitchProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `}\n\n ${(props) =>\n template({\n knobColor: props.theme.colors['bg-oncolor-primary'],\n knobShadowColor: props.theme.colors['bg-oncolor-hover'],\n trackColor: props.theme.colors['bg-onmain-tertiary'],\n trackColorHover: tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor,\n trackColorChecked: props.theme.colors['bg-brand-primary-basic'],\n trackColorCheckedHover: tinycolor(props.theme.colors['bg-brand-primary-basic']).lighten(4).toString() as CSSColor,\n trackColorDisabled: props.theme.colors['bg-disabled-small'],\n trackColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardSwitchProp","createShouldForwardProp","propKey","includes","shouldForwardKnobProp","Input","styled","input","withConfig","shouldForwardProp","displayName","componentId","Track","span","Knob","responsiveSize","Root","props","inline","disabled","theme","colors","white","template","palette","knobColor","knobShadowColor","trackColor","trackColorHover","tinycolor","darken","toString","trackColorChecked","trackColorCheckedHover","lighten","trackColorDisabled","trackColorDisabledChecked","hover"],"mappings":"iPAQA,MAAMA,wBAA0BC,yBAAyBC,IAAa,CAAC,SAAU,YAAYC,SAASD,KAEtG,MAAME,sBAAwBH,0BAEvB,MAAMI,MAAQC,OAAOC,MAAMC,WAAW,CAC3CC,kBAAoBP,IAAa,CAAC,QAAS,UAAW,aAAaC,SAASD,KAC5EM,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAFmBL,CAiBpB,CAAA,qKAEYM,MAAQN,OAAOO,KAAIL,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAAXL,CAUpB,CAAA,8JAEM,MAAMQ,KAAOR,OAAOO,KAAKL,WAA4B,CAC1DC,kBAAmBL,wBACnBI,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,8LAAA,KAWIS,gBAmCC,MAAMC,KAAOV,OAAOO,KAAKL,WAA8B,CAC5DC,kBAAmBT,0BACnBQ,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,KACGW,GAAU,gIAKEA,EAAMC,OAAS,cAAgB,0BAChCD,EAAME,SAAW,cAAgB,2BAErCd,mBAAmBO,WAAWE,sEAI9BT,yBAAyBO,0CACLK,EAAMG,MAAMC,OAAOC,oBAAoBL,EAAMG,MAAMC,OAAO,yGAMrFJ,IACDM,OAtDcC,EAsDL,CACPC,UAAWR,EAAMG,MAAMC,OAAO,sBAC9BK,gBAAiBT,EAAMG,MAAMC,OAAO,oBACpCM,WAAYV,EAAMG,MAAMC,OAAO,sBAC/BO,gBAAiBC,UAAUZ,EAAMG,MAAMC,OAAO,uBAAuBS,OAAO,GAAGC,WAC/EC,kBAAmBf,EAAMG,MAAMC,OAAO,0BACtCY,uBAAwBJ,UAAUZ,EAAMG,MAAMC,OAAO,2BAA2Ba,QAAQ,GAAGH,WAC3FI,mBAAoBlB,EAAMG,MAAMC,OAAO,qBACvCe,0BAA2BnB,EAAMG,MAAMC,OAAO,yBAC3CJ,EAAMO,SA/D8B,WACrCZ,WAAWE,wCACKU,EAAQC,2CACFD,EAAQE,gCAE9Bd,kCACgBY,EAAQG,2BAExBtB,kCAAkCO,kCAClBY,EAAQQ,kCAExB3B,oBAAoBO,kCACJY,EAAQW,mCAExB9B,4BAA4BO,kCACZY,EAAQY,sCAE5BC,MACA,6BACsBb,EAAQI,yBAE9B,aAAavB,0BAA0BO,eAEvCyB,MACA,6BACsBb,EAAQS,gCAE9B,aAAa5B,kCAAkCO,aA3BjCY,KAgEZ,GAEFT"}
|
package/components/Tab/style.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var color=require('../../mixins/color.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var arrow=require('./images/arrow.svg.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardTabProp=style.createShouldForwardProp((o=>!['active','compact','crispy','crispyCompact','tabTheme','left','right','rounded','outline','onColored','black'].includes(o)));const DEFAULT_STYLES={default:styled.css(["",""],(o=>`\n font-size: 16px;\n font-weight: bold;\n padding-bottom: 12px;\n color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n &:hover {\n color: ${o.theme.colors.primary};\n }\n &.active {\n color: ${o.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 60px;\n }\n `)),compact:styled.css(["",""],(o=>`\n font-size: 16px;\n font-weight: normal;\n padding-bottom: 10px;\n color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n &:hover {\n color: ${o.theme.colors.primary};\n }\n &.active {\n color: ${o.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 20px;\n }\n `)),crispyCompact:styled.css(["",""],(o=>`\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 6px;\n text-transform: uppercase;\n color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n &:hover {\n color: ${o.theme.colors.primary};\n }\n &.active {\n color: ${o.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 18px;\n }\n `)),crispy:styled.css(["",""],(o=>`\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 14px;\n text-transform: uppercase;\n color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n &:hover {\n color: ${o.theme.colors.primary};\n }\n &.active {\n color: ${o.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 32px;\n }\n `))};const Content=styled__default.default.span.withConfig({displayName:"Tab__Content",componentId:"ui__sc-26yal1-0"})(["box-sizing:border-box;position:relative;z-index:1;display:flex;align-items:center;flex-grow:1;flex-shrink:0;height:100%;padding:0 1em;border:1px solid transparent;transition-property:background-color,border-color;"]);const Edge=styled__default.default(arrow.default).withConfig({shouldForwardProp:()=>!1}).withConfig({displayName:"Tab__Edge",componentId:"ui__sc-26yal1-1"})(["box-sizing:border-box;flex-shrink:0;height:100%;transition-property:color,stroke;",""],(o=>o.after&&'transform: rotate(180deg);'));const template=o=>`\n & > ${Content} {\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n }\n & > ${Edge} {\n color: ${o.backgroundColor};\n stroke: ${o.borderColor};\n }\n &:hover > ${Content} {\n color: ${o.colorHover};\n background-color: ${o.backgroundColorHover};\n border-color: ${o.borderColorHover};\n }\n &:hover > ${Edge} {\n color: ${o.backgroundColorHover};\n stroke: ${o.borderColorHover};\n }\n &:disabled > ${Content} {\n color: ${o.colorDisabled};\n background-color: ${o.backgroundColorDisabled};\n border-color: ${o.borderColorDisabled};\n }\n &:disabled > ${Edge} {\n color: ${o.backgroundColorDisabled};\n stroke: ${o.borderColorDisabled};\n }\n`;const COLOR_SCHEMA={default:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-tertiary'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-primary'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor__default.default(o.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))},onColored:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),borderColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['bg-disabled-small'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-primary']:o.theme.colors['bg-brand-primary-500'],borderColor:o.theme.colors['bg-onmain-primary'],colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).darken(3).toString(),borderColorHover:o.theme.colors['bg-onmain-primary'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['bg-disabled-small'],...o.palette})))},black:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-primary'],borderColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor__default.default(o.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))}};const Root=styled__default.default.button.withConfig({shouldForwardProp:shouldForwardTabProp}).attrs({dynamicSizeDeclaration:(o,r)=>({height:'2.8em',fontSize:typeof o=='string'?o:`${o}${r}`})}).withConfig({displayName:"Tab__Root",componentId:"ui__sc-26yal1-2"})([""," "," "," "," "," "," ",""],(o=>{const r=o.rounded?8:0;const e=o.left?0:r;const t=o.right?0:r;return`\n box-sizing: border-box;\n display: ${o.preset==='brand'?'inline-flex':'inline-block'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n isolation: isolate;\n flex-shrink: 0;\n appearance: none;\n padding: 0;\n border: none;\n background-color: transparent;\n text-decoration: none;\n width: max-content;\n & > ${Content}, \n & > ${Edge} {\n transition-duration: 250ms;\n }\n & > ${Content} {\n border-radius: ${e}px ${t}px ${t}px ${e}px;\n border-left-style: ${o.left?'none':'solid'};\n border-right-style: ${o.right?'none':'solid'};\n margin-left: ${o.left?-2:0}px;\n margin-right: ${o.right?-2:0}px;\n }\n `}),(o=>{if(o.preset==='brand'){let r=COLOR_SCHEMA.default;return o.black&&(r=COLOR_SCHEMA.black),o.onColored&&(r=COLOR_SCHEMA.onColored),o.outline?r.outline:r.default}return o.compact||o.tabTheme==='compact'?DEFAULT_STYLES.compact:o.crispyCompact||o.tabTheme==='crispyCompact'?DEFAULT_STYLES.crispyCompact:o.crispy||o.tabTheme==='crispy'?DEFAULT_STYLES.crispy:DEFAULT_STYLES.default}),focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin,(o=>o.color&&`color: ${color.getColor(o.color,o)};`),(o=>o.borderColor&&`border-color: ${color.getColor(o.borderColor,o)};`));exports.Content=Content,exports.Edge=Edge,exports.Root=Root;
|
|
1
|
+
'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var color=require('../../mixins/color.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var hover=require('../../mixins/hover.js');var arrow=require('./images/arrow.svg.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardTabProp=style.createShouldForwardProp((o=>!['active','compact','crispy','crispyCompact','tabTheme','left','right','rounded','outline','onColored','black'].includes(o)));const DEFAULT_STYLES={default:styled.css(["",""],(o=>`\n font-size: 16px;\n font-weight: bold;\n padding-bottom: 12px;\n color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n ${hover.hover(`\n color: ${o.theme.colors.primary};\n `)}\n &.active {\n color: ${o.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 60px;\n }\n `)),compact:styled.css(["",""],(o=>`\n font-size: 16px;\n font-weight: normal;\n padding-bottom: 10px;\n color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n ${hover.hover(`\n color: ${o.theme.colors.primary};\n `)}\n &.active {\n color: ${o.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 20px;\n }\n `)),crispyCompact:styled.css(["",""],(o=>`\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 6px;\n text-transform: uppercase;\n color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n ${hover.hover(`\n color: ${o.theme.colors.primary};\n `)}\n &.active {\n color: ${o.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 18px;\n }\n `)),crispy:styled.css(["",""],(o=>`\n font-size: 12px;\n font-weight: bold;\n padding-bottom: 14px;\n text-transform: uppercase;\n color: ${o.active?o.theme.colors.primary:o.theme.colors.mineShaft};\n border-bottom: 2px solid ${o.active?'currentcolor':'transparent'};\n ${hover.hover(`\n color: ${o.theme.colors.primary};\n `)}\n &.active {\n color: ${o.theme.colors.primary};\n border-bottom-color: currentcolor;\n }\n & + & {\n margin-left: 32px;\n }\n `))};const Content=styled__default.default.span.withConfig({displayName:"Tab__Content",componentId:"ui__sc-26yal1-0"})(["box-sizing:border-box;position:relative;z-index:1;display:flex;align-items:center;flex-grow:1;flex-shrink:0;height:100%;padding:0 1em;border:1px solid transparent;transition-property:background-color,border-color;"]);const Edge=styled__default.default(arrow.default).withConfig({shouldForwardProp:()=>!1}).withConfig({displayName:"Tab__Edge",componentId:"ui__sc-26yal1-1"})(["box-sizing:border-box;flex-shrink:0;height:100%;transition-property:color,stroke;",""],(o=>o.after&&'transform: rotate(180deg);'));const template=o=>`\n & > ${Content} {\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n }\n & > ${Edge} {\n color: ${o.backgroundColor};\n stroke: ${o.borderColor};\n }\n ${hover.hover(`\n color: ${o.colorHover};\n background-color: ${o.backgroundColorHover};\n border-color: ${o.borderColorHover};\n `,`&:hover > ${Content}`)}\n ${hover.hover(`\n color: ${o.backgroundColorHover};\n stroke: ${o.borderColorHover};\n `,`&:hover > ${Edge}`)}\n &:disabled > ${Content} {\n color: ${o.colorDisabled};\n background-color: ${o.backgroundColorDisabled};\n border-color: ${o.borderColorDisabled};\n }\n &:disabled > ${Edge} {\n color: ${o.backgroundColorDisabled};\n stroke: ${o.borderColorDisabled};\n }\n`;const COLOR_SCHEMA={default:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-tertiary'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-onmain-primary'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-brand-primary-500']:tinycolor__default.default(o.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))},onColored:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),borderColor:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).lighten(10).toString(),colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['bg-disabled-small'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-primary']:o.theme.colors['bg-brand-primary-500'],borderColor:o.theme.colors['bg-onmain-primary'],colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-brand-primary-500']).darken(3).toString(),borderColorHover:o.theme.colors['bg-onmain-primary'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-small'],borderColorDisabled:o.theme.colors['bg-disabled-small'],...o.palette})))},black:{default:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-primary'],borderColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?o.theme.colors['bg-onmain-contrast']:tinycolor__default.default(o.theme.colors['bg-onmain-primary']).darken(6).toString(),borderColorHover:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['bg-disabled-large'],...o.palette})))}};const Root=styled__default.default.button.withConfig({shouldForwardProp:shouldForwardTabProp}).attrs({dynamicSizeDeclaration:(o,r)=>({height:'2.8em',fontSize:typeof o=='string'?o:`${o}${r}`})}).withConfig({displayName:"Tab__Root",componentId:"ui__sc-26yal1-2"})([""," "," "," "," "," "," ",""],(o=>{const r=o.rounded?8:0;const e=o.left?0:r;const t=o.right?0:r;return`\n box-sizing: border-box;\n display: ${o.preset==='brand'?'inline-flex':'inline-block'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n isolation: isolate;\n flex-shrink: 0;\n appearance: none;\n padding: 0;\n border: none;\n background-color: transparent;\n text-decoration: none;\n width: max-content;\n & > ${Content}, \n & > ${Edge} {\n transition-duration: 250ms;\n }\n & > ${Content} {\n border-radius: ${e}px ${t}px ${t}px ${e}px;\n border-left-style: ${o.left?'none':'solid'};\n border-right-style: ${o.right?'none':'solid'};\n margin-left: ${o.left?-2:0}px;\n margin-right: ${o.right?-2:0}px;\n }\n `}),(o=>{if(o.preset==='brand'){let r=COLOR_SCHEMA.default;return o.black&&(r=COLOR_SCHEMA.black),o.onColored&&(r=COLOR_SCHEMA.onColored),o.outline?r.outline:r.default}return o.compact||o.tabTheme==='compact'?DEFAULT_STYLES.compact:o.crispyCompact||o.tabTheme==='crispyCompact'?DEFAULT_STYLES.crispyCompact:o.crispy||o.tabTheme==='crispy'?DEFAULT_STYLES.crispy:DEFAULT_STYLES.default}),focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin,(o=>o.color&&`color: ${color.getColor(o.color,o)};`),(o=>o.borderColor&&`border-color: ${color.getColor(o.borderColor,o)};`));exports.Content=Content,exports.Edge=Edge,exports.Root=Root;
|
|
2
2
|
//# sourceMappingURL=style.js.map
|