@foxford/ui 2.87.0-beta-64439a1-20251201 → 2.87.1-beta-3a7d913-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/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/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/Chip/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledChipProps, ChipPalette } from './types'\n\nconst shouldForwardChipProp = createShouldForwardProp(\n (propKey) => !['outline', 'black', 'active', 'cursor'].includes(propKey)\n)\n\nconst template = (palette: ChipPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n primary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-brand-primary-100'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-onmain-contrast']).lighten(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(11).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n },\n secondary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n borderColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-brand-primary-400'],\n colorHover: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-brand-primary-100']).lighten(2).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-brand-primary-400'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-secondary']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.active\n ? props.theme.colors['border-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-onmain-secondary']).lighten(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(11).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['border-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n },\n outline: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-brand-primary-500'] : props.theme.colors.transparent,\n borderColor: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor)\n : props.theme.colors['content-oncolor-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active ? props.theme.colors.transparent : props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-onmain-contrast'] : props.theme.colors.transparent,\n borderColor: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-onmain-contrast']).lighten(11).toString() as CSSColor)\n : props.theme.colors['content-oncolor-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active ? props.theme.colors.transparent : props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n },\n },\n contrast: {\n primary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-primary']\n : props.theme.colors['bg-brand-primary-100'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-primary']\n : props.theme.colors['bg-oncolor-tertiary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-oncolor-tertiary']).setAlpha(0.3).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n },\n secondary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-secondary']\n : props.theme.colors['bg-oncolor-tertiary'],\n borderColor: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-secondary']).setAlpha(0.5).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-oncolor-tertiary']).setAlpha(0.3).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-secondary']\n : props.theme.colors['bg-oncolor-tertiary'],\n borderColor: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-secondary']).setAlpha(0.5).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-oncolor-tertiary']).setAlpha(0.3).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n },\n outline: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-oncolor-primary'] : props.theme.colors.transparent,\n borderColor: props.active ? props.theme.colors.transparent : props.theme.colors['border-oncolor-default'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : props.theme.colors['content-onmain-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-default'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-oncolor-disabled']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-oncolor-primary'] : props.theme.colors.transparent,\n borderColor: props.active ? props.theme.colors.transparent : props.theme.colors['border-oncolor-default'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : props.theme.colors['content-onmain-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-default'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-oncolor-disabled']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n },\n },\n}\n\nexport const Content = styled.span`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n text-align: start;\n`\n\nexport const Root = styled.div.withConfig<StyledChipProps>({\n shouldForwardProp: shouldForwardChipProp,\n})`\n ${(props) => {\n let cursor = 'default'\n\n if (props.as === 'button') cursor = 'pointer'\n if (props.as === 'button' && props.disabled) cursor = 'not-allowed'\n if (props.cursor) cursor = props.cursor\n\n return `\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n display: inline-flex;\n align-items: center;\n border: 1px solid transparent;\n flex-shrink: 0;\n cursor: ${cursor};\n transition-property: background-color;\n transition-duration: 250ms;\n\n & > *:not(:last-child) {\n margin-right: 6px;\n }\n\n & > ${Content}:first-child {\n margin-left: 6px;\n }\n & > ${Content}:last-child {\n margin-right: 6px;\n }\n `\n }}\n\n ${(props) => {\n const schema = props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n let schemaVariant = schema.primary\n\n if (props.secondary) schemaVariant = schema.secondary\n if (props.outline) schemaVariant = schema.outline\n\n return props.black ? schemaVariant.black : schemaVariant.default\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardChipProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","colorDisabled","backgroundColorDisabled","borderColorDisabled","COLOR_SCHEMA","default","primary","css","props","active","theme","colors","transparent","tinycolor","lighten","toString","darken","black","secondary","outline","contrast","setAlpha","Content","styled","span","withConfig","displayName","componentId","Root","div","shouldForwardProp","cursor","as","disabled","schema","schemaVariant","focus","responsiveSize","responsiveMargin"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Chip/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledChipProps, ChipPalette } from './types'\n\nconst shouldForwardChipProp = createShouldForwardProp(\n (propKey) => !['outline', 'black', 'active', 'cursor'].includes(propKey)\n)\n\nconst template = (palette: ChipPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n ${hover(`\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n `)}\n &:disabled {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n primary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-brand-primary-100'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-onmain-contrast']).lighten(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(11).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n },\n secondary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n borderColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-brand-primary-400'],\n colorHover: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-brand-primary-100']).lighten(2).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-brand-primary-400'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-secondary']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.active\n ? props.theme.colors['border-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-onmain-secondary']).lighten(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(11).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['border-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n },\n outline: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-brand-primary-500'] : props.theme.colors.transparent,\n borderColor: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor)\n : props.theme.colors['content-oncolor-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active ? props.theme.colors.transparent : props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-onmain-contrast'] : props.theme.colors.transparent,\n borderColor: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-onmain-contrast']).lighten(11).toString() as CSSColor)\n : props.theme.colors['content-oncolor-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active ? props.theme.colors.transparent : props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n },\n },\n contrast: {\n primary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-primary']\n : props.theme.colors['bg-brand-primary-100'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-primary']\n : props.theme.colors['bg-oncolor-tertiary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-oncolor-tertiary']).setAlpha(0.3).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n },\n secondary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-secondary']\n : props.theme.colors['bg-oncolor-tertiary'],\n borderColor: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-secondary']).setAlpha(0.5).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-oncolor-tertiary']).setAlpha(0.3).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-secondary']\n : props.theme.colors['bg-oncolor-tertiary'],\n borderColor: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-secondary']).setAlpha(0.5).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-oncolor-tertiary']).setAlpha(0.3).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n },\n outline: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-oncolor-primary'] : props.theme.colors.transparent,\n borderColor: props.active ? props.theme.colors.transparent : props.theme.colors['border-oncolor-default'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : props.theme.colors['content-onmain-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-default'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-oncolor-disabled']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-oncolor-primary'] : props.theme.colors.transparent,\n borderColor: props.active ? props.theme.colors.transparent : props.theme.colors['border-oncolor-default'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : props.theme.colors['content-onmain-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-default'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-oncolor-disabled']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n },\n },\n}\n\nexport const Content = styled.span`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n text-align: start;\n`\n\nexport const Root = styled.div.withConfig<StyledChipProps>({\n shouldForwardProp: shouldForwardChipProp,\n})`\n ${(props) => {\n let cursor = 'default'\n\n if (props.as === 'button') cursor = 'pointer'\n if (props.as === 'button' && props.disabled) cursor = 'not-allowed'\n if (props.cursor) cursor = props.cursor\n\n return `\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n display: inline-flex;\n align-items: center;\n border: 1px solid transparent;\n flex-shrink: 0;\n cursor: ${cursor};\n transition-property: background-color;\n transition-duration: 250ms;\n\n & > *:not(:last-child) {\n margin-right: 6px;\n }\n\n & > ${Content}:first-child {\n margin-left: 6px;\n }\n & > ${Content}:last-child {\n margin-right: 6px;\n }\n `\n }}\n\n ${(props) => {\n const schema = props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n let schemaVariant = schema.primary\n\n if (props.secondary) schemaVariant = schema.secondary\n if (props.outline) schemaVariant = schema.outline\n\n return props.black ? schemaVariant.black : schemaVariant.default\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardChipProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","hover","colorHover","backgroundColorHover","borderColorHover","colorDisabled","backgroundColorDisabled","borderColorDisabled","COLOR_SCHEMA","default","primary","css","props","active","theme","colors","transparent","tinycolor","lighten","toString","darken","black","secondary","outline","contrast","setAlpha","Content","styled","span","withConfig","displayName","componentId","Root","div","shouldForwardProp","cursor","as","disabled","schema","schemaVariant","focus","responsiveSize","responsiveMargin"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';const shouldForwardChipProp=createShouldForwardProp((o=>!['outline','black','active','cursor'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n &:hover {\n color: ${o.colorHover};\n background-color: ${o.backgroundColorHover};\n border-color: ${o.borderColorHover};\n }\n &:disabled {\n color: ${o.colorDisabled};\n background-color: ${o.backgroundColorDisabled};\n border-color: ${o.borderColorDisabled};\n }\n`;const COLOR_SCHEMA={default:{primary:{default: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-brand-primary-100'],borderColor:o.theme.colors.transparent,colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-brand-primary-500']).lighten(5).toString():tinycolor(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),borderColorHover:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-disabled-small']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,...o.palette}))),black: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.theme.colors.transparent,colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-onmain-contrast']).lighten(11).toString():tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(11).toString(),borderColorHover:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-disabled-small']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,...o.palette})))},secondary:{default:css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-brand-primary-400'],colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-brand-primary-100']).lighten(2).toString():tinycolor(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-brand-primary-400'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],...o.palette}))),black:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-secondary']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['border-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-onmain-secondary']).lighten(11).toString():tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(11).toString(),borderColorHover:o.active?o.theme.colors['border-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['border-disabled'],...o.palette})))},outline:{default: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.transparent,borderColor:o.active?o.theme.colors.transparent: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?tinycolor(o.theme.colors['bg-brand-primary-500']).lighten(5).toString():o.theme.colors['content-oncolor-hover'],borderColorHover:o.active?o.theme.colors.transparent:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-disabled-small']:o.theme.colors.transparent,borderColorDisabled:o.active?o.theme.colors.transparent:o.theme.colors['border-disabled'],...o.palette}))),black: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.transparent,borderColor:o.active?o.theme.colors.transparent: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?tinycolor(o.theme.colors['bg-onmain-contrast']).lighten(11).toString():o.theme.colors['content-oncolor-hover'],borderColorHover:o.active?o.theme.colors.transparent:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-disabled-small']:o.theme.colors.transparent,borderColorDisabled:o.active?o.theme.colors.transparent:o.theme.colors['border-disabled'],...o.palette})))}},contrast:{primary:{default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-primary']:o.theme.colors['bg-brand-primary-100'],borderColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-oncolor-primary']).darken(11).toString():tinycolor(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),borderColorHover:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors.transparent,...o.palette}))),black:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-primary']:o.theme.colors['bg-oncolor-tertiary'],borderColor:o.theme.colors.transparent,colorHover:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-oncolor-primary']).darken(11).toString():tinycolor(o.theme.colors['bg-oncolor-tertiary']).setAlpha(.3).toString(),borderColorHover:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors.transparent,...o.palette})))},secondary:{default:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-secondary']:o.theme.colors['bg-oncolor-tertiary'],borderColor:o.active?o.theme.colors['border-oncolor-default']:o.theme.colors['border-oncolor-default-large'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-oncolor-secondary']).setAlpha(.5).toString():tinycolor(o.theme.colors['bg-oncolor-tertiary']).setAlpha(.3).toString(),borderColorHover:o.active?o.theme.colors['border-oncolor-default']:o.theme.colors['border-oncolor-default-large'],colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors['border-oncolor-disabled'],...o.palette}))),black:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-secondary']:o.theme.colors['bg-oncolor-tertiary'],borderColor:o.active?o.theme.colors['border-oncolor-default']:o.theme.colors['border-oncolor-default-large'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-oncolor-secondary']).setAlpha(.5).toString():tinycolor(o.theme.colors['bg-oncolor-tertiary']).setAlpha(.3).toString(),borderColorHover:o.active?o.theme.colors['border-oncolor-default']:o.theme.colors['border-oncolor-default-large'],colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors['border-oncolor-disabled'],...o.palette})))},outline:{default:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-primary']:o.theme.colors.transparent,borderColor:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorHover:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-oncolor-primary']).darken(11).toString():o.theme.colors['content-onmain-hover'],borderColorHover:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-oncolor-disabled']:o.theme.colors.transparent,borderColorDisabled:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-disabled'],...o.palette}))),black:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-primary']:o.theme.colors.transparent,borderColor:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorHover:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-oncolor-primary']).darken(11).toString():o.theme.colors['content-onmain-hover'],borderColorHover:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-oncolor-disabled']:o.theme.colors.transparent,borderColorDisabled:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-disabled'],...o.palette})))}}};const Content=styled.span.withConfig({displayName:"Chip__Content",componentId:"ui__sc-ndhge9-0"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;text-align:start;"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardChipProp}).withConfig({displayName:"Chip__Root",componentId:"ui__sc-ndhge9-1"})([""," "," "," "," ",""],(o=>{let r='default';return o.as==='button'&&(r='pointer'),o.as==='button'&&o.disabled&&(r='not-allowed'),o.cursor&&(r=o.cursor),`\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n display: inline-flex;\n align-items: center;\n border: 1px solid transparent;\n flex-shrink: 0;\n cursor: ${r};\n transition-property: background-color;\n transition-duration: 250ms;\n\n & > *:not(:last-child) {\n margin-right: 6px;\n }\n\n & > ${Content}:first-child {\n margin-left: 6px;\n }\n & > ${Content}:last-child {\n margin-right: 6px;\n }\n `}),(o=>{const r=o.contrast?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;let e=r.primary;return o.secondary&&(e=r.secondary),o.outline&&(e=r.outline),o.black?e.black:e.default}),focus,responsiveSize,responsiveMargin);export{Content,Root};
|
|
1
|
+
import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardChipProp=createShouldForwardProp((o=>!['outline','black','active','cursor'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n ${hover(`\n color: ${o.colorHover};\n background-color: ${o.backgroundColorHover};\n border-color: ${o.borderColorHover};\n `)}\n &:disabled {\n color: ${o.colorDisabled};\n background-color: ${o.backgroundColorDisabled};\n border-color: ${o.borderColorDisabled};\n }\n`;const COLOR_SCHEMA={default:{primary:{default: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-brand-primary-100'],borderColor:o.theme.colors.transparent,colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-brand-primary-500']).lighten(5).toString():tinycolor(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),borderColorHover:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-disabled-small']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,...o.palette}))),black: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.theme.colors.transparent,colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-onmain-contrast']).lighten(11).toString():tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(11).toString(),borderColorHover:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-disabled-small']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,...o.palette})))},secondary:{default:css(["",""],(o=>template({color:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-brand-primary-100'],borderColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-brand-primary-400'],colorHover:o.active?o.theme.colors['content-brand-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-brand-primary-100']).lighten(2).toString():tinycolor(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),borderColorHover:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-brand-primary-400'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors['border-disabled'],...o.palette}))),black:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-secondary']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.active?o.theme.colors['border-onmain-contrast']:o.theme.colors['border-onmain-default-large'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-onmain-secondary']).lighten(11).toString():tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(11).toString(),borderColorHover:o.active?o.theme.colors['border-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['border-disabled'],...o.palette})))},outline:{default: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.transparent,borderColor:o.active?o.theme.colors.transparent: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?tinycolor(o.theme.colors['bg-brand-primary-500']).lighten(5).toString():o.theme.colors['content-oncolor-hover'],borderColorHover:o.active?o.theme.colors.transparent:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-disabled-small']:o.theme.colors.transparent,borderColorDisabled:o.active?o.theme.colors.transparent:o.theme.colors['border-disabled'],...o.palette}))),black: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.transparent,borderColor:o.active?o.theme.colors.transparent: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?tinycolor(o.theme.colors['bg-onmain-contrast']).lighten(11).toString():o.theme.colors['content-oncolor-hover'],borderColorHover:o.active?o.theme.colors.transparent:o.theme.colors['border-onmain-default-large'],colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-disabled-small']:o.theme.colors.transparent,borderColorDisabled:o.active?o.theme.colors.transparent:o.theme.colors['border-disabled'],...o.palette})))}},contrast:{primary:{default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-primary']:o.theme.colors['bg-brand-primary-100'],borderColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-oncolor-primary']).darken(11).toString():tinycolor(o.theme.colors['bg-brand-primary-100']).darken(5).toString(),borderColorHover:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors.transparent,...o.palette}))),black:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-primary']:o.theme.colors['bg-oncolor-tertiary'],borderColor:o.theme.colors.transparent,colorHover:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-oncolor-primary']).darken(11).toString():tinycolor(o.theme.colors['bg-oncolor-tertiary']).setAlpha(.3).toString(),borderColorHover:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors.transparent,...o.palette})))},secondary:{default:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-secondary']:o.theme.colors['bg-oncolor-tertiary'],borderColor:o.active?o.theme.colors['border-oncolor-default']:o.theme.colors['border-oncolor-default-large'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-oncolor-secondary']).setAlpha(.5).toString():tinycolor(o.theme.colors['bg-oncolor-tertiary']).setAlpha(.3).toString(),borderColorHover:o.active?o.theme.colors['border-oncolor-default']:o.theme.colors['border-oncolor-default-large'],colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors['border-oncolor-disabled'],...o.palette}))),black:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-secondary']:o.theme.colors['bg-oncolor-tertiary'],borderColor:o.active?o.theme.colors['border-oncolor-default']:o.theme.colors['border-oncolor-default-large'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-oncolor-secondary']).setAlpha(.5).toString():tinycolor(o.theme.colors['bg-oncolor-tertiary']).setAlpha(.3).toString(),borderColorHover:o.active?o.theme.colors['border-oncolor-default']:o.theme.colors['border-oncolor-default-large'],colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors['border-oncolor-disabled'],...o.palette})))},outline:{default:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-primary']:o.theme.colors.transparent,borderColor:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorHover:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-oncolor-primary']).darken(11).toString():o.theme.colors['content-onmain-hover'],borderColorHover:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-oncolor-disabled']:o.theme.colors.transparent,borderColorDisabled:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-disabled'],...o.palette}))),black:css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.active?o.theme.colors['bg-oncolor-primary']:o.theme.colors.transparent,borderColor:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorHover:o.active?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.active?tinycolor(o.theme.colors['bg-oncolor-primary']).darken(11).toString():o.theme.colors['content-onmain-hover'],borderColorHover:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.active?o.theme.colors['bg-oncolor-disabled']:o.theme.colors.transparent,borderColorDisabled:o.active?o.theme.colors.transparent:o.theme.colors['border-oncolor-disabled'],...o.palette})))}}};const Content=styled.span.withConfig({displayName:"Chip__Content",componentId:"ui__sc-ndhge9-0"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;text-align:start;"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardChipProp}).withConfig({displayName:"Chip__Root",componentId:"ui__sc-ndhge9-1"})([""," "," "," "," ",""],(o=>{let r='default';return o.as==='button'&&(r='pointer'),o.as==='button'&&o.disabled&&(r='not-allowed'),o.cursor&&(r=o.cursor),`\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n display: inline-flex;\n align-items: center;\n border: 1px solid transparent;\n flex-shrink: 0;\n cursor: ${r};\n transition-property: background-color;\n transition-duration: 250ms;\n\n & > *:not(:last-child) {\n margin-right: 6px;\n }\n\n & > ${Content}:first-child {\n margin-left: 6px;\n }\n & > ${Content}:last-child {\n margin-right: 6px;\n }\n `}),(o=>{const r=o.contrast?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;let e=r.primary;return o.secondary&&(e=r.secondary),o.outline&&(e=r.outline),o.black?e.black:e.default}),focus,responsiveSize,responsiveMargin);export{Content,Root};
|
|
2
2
|
//# sourceMappingURL=style.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Chip/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledChipProps, ChipPalette } from './types'\n\nconst shouldForwardChipProp = createShouldForwardProp(\n (propKey) => !['outline', 'black', 'active', 'cursor'].includes(propKey)\n)\n\nconst template = (palette: ChipPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n primary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-brand-primary-100'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-onmain-contrast']).lighten(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(11).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n },\n secondary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n borderColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-brand-primary-400'],\n colorHover: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-brand-primary-100']).lighten(2).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-brand-primary-400'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-secondary']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.active\n ? props.theme.colors['border-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-onmain-secondary']).lighten(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(11).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['border-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n },\n outline: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-brand-primary-500'] : props.theme.colors.transparent,\n borderColor: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor)\n : props.theme.colors['content-oncolor-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active ? props.theme.colors.transparent : props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-onmain-contrast'] : props.theme.colors.transparent,\n borderColor: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-onmain-contrast']).lighten(11).toString() as CSSColor)\n : props.theme.colors['content-oncolor-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active ? props.theme.colors.transparent : props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n },\n },\n contrast: {\n primary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-primary']\n : props.theme.colors['bg-brand-primary-100'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-primary']\n : props.theme.colors['bg-oncolor-tertiary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-oncolor-tertiary']).setAlpha(0.3).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n },\n secondary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-secondary']\n : props.theme.colors['bg-oncolor-tertiary'],\n borderColor: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-secondary']).setAlpha(0.5).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-oncolor-tertiary']).setAlpha(0.3).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-secondary']\n : props.theme.colors['bg-oncolor-tertiary'],\n borderColor: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-secondary']).setAlpha(0.5).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-oncolor-tertiary']).setAlpha(0.3).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n },\n outline: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-oncolor-primary'] : props.theme.colors.transparent,\n borderColor: props.active ? props.theme.colors.transparent : props.theme.colors['border-oncolor-default'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : props.theme.colors['content-onmain-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-default'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-oncolor-disabled']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-oncolor-primary'] : props.theme.colors.transparent,\n borderColor: props.active ? props.theme.colors.transparent : props.theme.colors['border-oncolor-default'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : props.theme.colors['content-onmain-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-default'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-oncolor-disabled']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n },\n },\n}\n\nexport const Content = styled.span`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n text-align: start;\n`\n\nexport const Root = styled.div.withConfig<StyledChipProps>({\n shouldForwardProp: shouldForwardChipProp,\n})`\n ${(props) => {\n let cursor = 'default'\n\n if (props.as === 'button') cursor = 'pointer'\n if (props.as === 'button' && props.disabled) cursor = 'not-allowed'\n if (props.cursor) cursor = props.cursor\n\n return `\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n display: inline-flex;\n align-items: center;\n border: 1px solid transparent;\n flex-shrink: 0;\n cursor: ${cursor};\n transition-property: background-color;\n transition-duration: 250ms;\n\n & > *:not(:last-child) {\n margin-right: 6px;\n }\n\n & > ${Content}:first-child {\n margin-left: 6px;\n }\n & > ${Content}:last-child {\n margin-right: 6px;\n }\n `\n }}\n\n ${(props) => {\n const schema = props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n let schemaVariant = schema.primary\n\n if (props.secondary) schemaVariant = schema.secondary\n if (props.outline) schemaVariant = schema.outline\n\n return props.black ? schemaVariant.black : schemaVariant.default\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardChipProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","colorDisabled","backgroundColorDisabled","borderColorDisabled","COLOR_SCHEMA","default","primary","css","props","active","theme","colors","transparent","tinycolor","lighten","toString","darken","black","secondary","outline","contrast","setAlpha","Content","styled","span","withConfig","displayName","componentId","Root","div","shouldForwardProp","cursor","as","disabled","schema","schemaVariant","focus","responsiveSize","responsiveMargin"],"mappings":"uTASA,MAAMA,sBAAwBC,yBAC3BC,IAAa,CAAC,UAAW,QAAS,SAAU,UAAUC,SAASD,KAGlE,MAAME,SAAYC,GAAyB,cAChCA,EAAQC,+BACGD,EAAQE,qCACZF,EAAQG,yCAEbH,EAAQI,sCACGJ,EAAQK,4CACZL,EAAQM,sDAGfN,EAAQO,yCACGP,EAAQQ,+CACZR,EAAQS,8BAI5B,MAAMC,aAAe,CACnBC,QAAS,CACPC,QAAS,CACPD,QAASE,IAAG,CAAA,GAAA,KACPC,GACDf,SAAS,CACPE,MAAOa,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBf,gBAAiBY,EAAMC,OACnBD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,wBACvBd,YAAaW,EAAME,MAAMC,OAAOC,YAChCd,WAAYU,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBZ,qBAAsBS,EAAMC,OACvBI,UAAUL,EAAME,MAAMC,OAAO,yBAAyBG,QAAQ,GAAGC,WACjEF,UAAUL,EAAME,MAAMC,OAAO,yBAAyBK,OAAO,GAAGD,WACrEf,iBAAkBQ,EAAME,MAAMC,OAAOC,YACrCX,cAAeO,EAAME,MAAMC,OAAO,oBAClCT,wBAAyBM,EAAMC,OAC3BD,EAAME,MAAMC,OAAO,qBACnBH,EAAME,MAAMC,OAAO,qBACvBR,oBAAqBK,EAAME,MAAMC,OAAOC,eACrCJ,EAAMd,YAGfuB,MAAOV,IAAG,CAAA,GAAA,KACLC,GACDf,SAAS,CACPE,MAAOa,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBf,gBAAiBY,EAAMC,OACnBD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,sBACvBd,YAAaW,EAAME,MAAMC,OAAOC,YAChCd,WAAYU,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBZ,qBAAsBS,EAAMC,OACvBI,UAAUL,EAAME,MAAMC,OAAO,uBAAuBG,QAAQ,IAAIC,WAChEF,UAAUL,EAAME,MAAMC,OAAO,uBAAuBK,OAAO,IAAID,WACpEf,iBAAkBQ,EAAME,MAAMC,OAAOC,YACrCX,cAAeO,EAAME,MAAMC,OAAO,oBAClCT,wBAAyBM,EAAMC,OAC3BD,EAAME,MAAMC,OAAO,qBACnBH,EAAME,MAAMC,OAAO,qBACvBR,oBAAqBK,EAAME,MAAMC,OAAOC,eACrCJ,EAAMd,aAIjBwB,UAAW,CACTb,QAASE,IAAG,CAAA,GAAA,KACPC,GACDf,SAAS,CACPE,MAAOa,EAAMC,OACTD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,0BACvBf,gBAAiBY,EAAME,MAAMC,OAAO,wBACpCd,YAAaW,EAAMC,OACfD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,wBACvBb,WAAYU,EAAMC,OACdD,EAAME,MAAMC,OAAO,yBACnBH,EAAME,MAAMC,OAAO,0BACvBZ,qBAAsBS,EAAMC,OACvBI,UAAUL,EAAME,MAAMC,OAAO,yBAAyBG,QAAQ,GAAGC,WACjEF,UAAUL,EAAME,MAAMC,OAAO,yBAAyBK,OAAO,GAAGD,WACrEf,iBAAkBQ,EAAMC,OACpBD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,wBACvBV,cAAeO,EAAME,MAAMC,OAAO,oBAClCT,wBAAyBM,EAAME,MAAMC,OAAO,qBAC5CR,oBAAqBK,EAAME,MAAMC,OAAO,sBACrCH,EAAMd,YAGfuB,MAAOV,IAAG,CAAA,GAAA,KACLC,GACDf,SAAS,CACPE,MAAOa,EAAME,MAAMC,OAAO,0BAC1Bf,gBAAiBY,EAAMC,OACnBD,EAAME,MAAMC,OAAO,uBACnBH,EAAME,MAAMC,OAAO,sBACvBd,YAAaW,EAAMC,OACfD,EAAME,MAAMC,OAAO,0BACnBH,EAAME,MAAMC,OAAO,+BACvBb,WAAYU,EAAME,MAAMC,OAAO,0BAC/BZ,qBAAsBS,EAAMC,OACvBI,UAAUL,EAAME,MAAMC,OAAO,wBAAwBG,QAAQ,IAAIC,WACjEF,UAAUL,EAAME,MAAMC,OAAO,uBAAuBK,OAAO,IAAID,WACpEf,iBAAkBQ,EAAMC,OACpBD,EAAME,MAAMC,OAAO,0BACnBH,EAAME,MAAMC,OAAO,+BACvBV,cAAeO,EAAME,MAAMC,OAAO,oBAClCT,wBAAyBM,EAAME,MAAMC,OAAO,qBAC5CR,oBAAqBK,EAAME,MAAMC,OAAO,sBACrCH,EAAMd,aAIjByB,QAAS,CACPd,QAASE,IAAG,CAAA,GAAA,KACPC,GACDf,SAAS,CACPE,MAAOa,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBf,gBAAiBY,EAAMC,OAASD,EAAME,MAAMC,OAAO,wBAA0BH,EAAME,MAAMC,OAAOC,YAChGf,YAAaW,EAAMC,OACfD,EAAME,MAAMC,OAAOC,YACnBJ,EAAME,MAAMC,OAAO,+BACvBb,WAAYU,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBZ,qBAAsBS,EAAMC,OACvBI,UAAUL,EAAME,MAAMC,OAAO,yBAAyBG,QAAQ,GAAGC,WAClEP,EAAME,MAAMC,OAAO,yBACvBX,iBAAkBQ,EAAMC,OACpBD,EAAME,MAAMC,OAAOC,YACnBJ,EAAME,MAAMC,OAAO,+BACvBV,cAAeO,EAAME,MAAMC,OAAO,oBAClCT,wBAAyBM,EAAMC,OAC3BD,EAAME,MAAMC,OAAO,qBACnBH,EAAME,MAAMC,OAAOC,YACvBT,oBAAqBK,EAAMC,OAASD,EAAME,MAAMC,OAAOC,YAAcJ,EAAME,MAAMC,OAAO,sBACrFH,EAAMd,YAGfuB,MAAOV,IAAG,CAAA,GAAA,KACLC,GACDf,SAAS,CACPE,MAAOa,EAAMC,OACTD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBf,gBAAiBY,EAAMC,OAASD,EAAME,MAAMC,OAAO,sBAAwBH,EAAME,MAAMC,OAAOC,YAC9Ff,YAAaW,EAAMC,OACfD,EAAME,MAAMC,OAAOC,YACnBJ,EAAME,MAAMC,OAAO,+BACvBb,WAAYU,EAAMC,OACdD,EAAME,MAAMC,OAAO,2BACnBH,EAAME,MAAMC,OAAO,0BACvBZ,qBAAsBS,EAAMC,OACvBI,UAAUL,EAAME,MAAMC,OAAO,uBAAuBG,QAAQ,IAAIC,WACjEP,EAAME,MAAMC,OAAO,yBACvBX,iBAAkBQ,EAAMC,OACpBD,EAAME,MAAMC,OAAOC,YACnBJ,EAAME,MAAMC,OAAO,+BACvBV,cAAeO,EAAME,MAAMC,OAAO,oBAClCT,wBAAyBM,EAAMC,OAC3BD,EAAME,MAAMC,OAAO,qBACnBH,EAAME,MAAMC,OAAOC,YACvBT,oBAAqBK,EAAMC,OAASD,EAAME,MAAMC,OAAOC,YAAcJ,EAAME,MAAMC,OAAO,sBACrFH,EAAMd,cAKnB0B,SAAU,CACRd,QAAS,CACPD,QAASE,IAAG,CAAA,GAAA,KACPC,GACDf,SAAS,CACPE,MAAOa,EAAME,MAAMC,OAAO,0BAC1Bf,gBAAiBY,EAAMC,OACnBD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,wBACvBd,YAAaW,EAAME,MAAMC,OAAOC,YAChCd,WAAYU,EAAME,MAAMC,OAAO,0BAC/BZ,qBAAsBS,EAAMC,OACvBI,UAAUL,EAAME,MAAMC,OAAO,uBAAuBK,OAAO,IAAID,WAC/DF,UAAUL,EAAME,MAAMC,OAAO,yBAAyBK,OAAO,GAAGD,WACrEf,iBAAkBQ,EAAME,MAAMC,OAAOC,YACrCX,cAAeO,EAAME,MAAMC,OAAO,4BAClCT,wBAAyBM,EAAME,MAAMC,OAAO,uBAC5CR,oBAAqBK,EAAME,MAAMC,OAAOC,eACrCJ,EAAMd,YAGfuB,MAAOV,IAAG,CAAA,GAAA,KACLC,GACDf,SAAS,CACPE,MAAOa,EAAMC,OACTD,EAAME,MAAMC,OAAO,4BACnBH,EAAME,MAAMC,OAAO,2BACvBf,gBAAiBY,EAAMC,OACnBD,EAAME,MAAMC,OAAO,sBACnBH,EAAME,MAAMC,OAAO,uBACvBd,YAAaW,EAAME,MAAMC,OAAOC,YAChCd,WAAYU,EAAMC,OACdD,EAAME,MAAMC,OAAO,4BACnBH,EAAME,MAAMC,OAAO,2BACvBZ,qBAAsBS,EAAMC,OACvBI,UAAUL,EAAME,MAAMC,OAAO,uBAAuBK,OAAO,IAAID,WAC/DF,UAAUL,EAAME,MAAMC,OAAO,wBAAwBU,SAAS,IAAKN,WACxEf,iBAAkBQ,EAAME,MAAMC,OAAOC,YACrCX,cAAeO,EAAME,MAAMC,OAAO,4BAClCT,wBAAyBM,EAAME,MAAMC,OAAO,uBAC5CR,oBAAqBK,EAAME,MAAMC,OAAOC,eACrCJ,EAAMd,aAIjBwB,UAAW,CACTb,QAASE,IAAG,CAAA,GAAA,KACPC,GACDf,SAAS,CACPE,MAAOa,EAAME,MAAMC,OAAO,2BAC1Bf,gBAAiBY,EAAMC,OACnBD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,uBACvBd,YAAaW,EAAMC,OACfD,EAAME,MAAMC,OAAO,0BACnBH,EAAME,MAAMC,OAAO,gCACvBb,WAAYU,EAAME,MAAMC,OAAO,2BAC/BZ,qBAAsBS,EAAMC,OACvBI,UAAUL,EAAME,MAAMC,OAAO,yBAAyBU,SAAS,IAAKN,WACpEF,UAAUL,EAAME,MAAMC,OAAO,wBAAwBU,SAAS,IAAKN,WACxEf,iBAAkBQ,EAAMC,OACpBD,EAAME,MAAMC,OAAO,0BACnBH,EAAME,MAAMC,OAAO,gCACvBV,cAAeO,EAAME,MAAMC,OAAO,4BAClCT,wBAAyBM,EAAME,MAAMC,OAAO,uBAC5CR,oBAAqBK,EAAME,MAAMC,OAAO,8BACrCH,EAAMd,YAGfuB,MAAOV,IAAG,CAAA,GAAA,KACLC,GACDf,SAAS,CACPE,MAAOa,EAAME,MAAMC,OAAO,2BAC1Bf,gBAAiBY,EAAMC,OACnBD,EAAME,MAAMC,OAAO,wBACnBH,EAAME,MAAMC,OAAO,uBACvBd,YAAaW,EAAMC,OACfD,EAAME,MAAMC,OAAO,0BACnBH,EAAME,MAAMC,OAAO,gCACvBb,WAAYU,EAAME,MAAMC,OAAO,2BAC/BZ,qBAAsBS,EAAMC,OACvBI,UAAUL,EAAME,MAAMC,OAAO,yBAAyBU,SAAS,IAAKN,WACpEF,UAAUL,EAAME,MAAMC,OAAO,wBAAwBU,SAAS,IAAKN,WACxEf,iBAAkBQ,EAAMC,OACpBD,EAAME,MAAMC,OAAO,0BACnBH,EAAME,MAAMC,OAAO,gCACvBV,cAAeO,EAAME,MAAMC,OAAO,4BAClCT,wBAAyBM,EAAME,MAAMC,OAAO,uBAC5CR,oBAAqBK,EAAME,MAAMC,OAAO,8BACrCH,EAAMd,aAIjByB,QAAS,CACPd,QAASE,IAAG,CAAA,GAAA,KACPC,GACDf,SAAS,CACPE,MAAOa,EAAMC,OACTD,EAAME,MAAMC,OAAO,4BACnBH,EAAME,MAAMC,OAAO,2BACvBf,gBAAiBY,EAAMC,OAASD,EAAME,MAAMC,OAAO,sBAAwBH,EAAME,MAAMC,OAAOC,YAC9Ff,YAAaW,EAAMC,OAASD,EAAME,MAAMC,OAAOC,YAAcJ,EAAME,MAAMC,OAAO,0BAChFb,WAAYU,EAAMC,OACdD,EAAME,MAAMC,OAAO,4BACnBH,EAAME,MAAMC,OAAO,2BACvBZ,qBAAsBS,EAAMC,OACvBI,UAAUL,EAAME,MAAMC,OAAO,uBAAuBK,OAAO,IAAID,WAChEP,EAAME,MAAMC,OAAO,wBACvBX,iBAAkBQ,EAAMC,OACpBD,EAAME,MAAMC,OAAOC,YACnBJ,EAAME,MAAMC,OAAO,0BACvBV,cAAeO,EAAME,MAAMC,OAAO,4BAClCT,wBAAyBM,EAAMC,OAC3BD,EAAME,MAAMC,OAAO,uBACnBH,EAAME,MAAMC,OAAOC,YACvBT,oBAAqBK,EAAMC,OACvBD,EAAME,MAAMC,OAAOC,YACnBJ,EAAME,MAAMC,OAAO,8BACpBH,EAAMd,YAGfuB,MAAOV,IAAG,CAAA,GAAA,KACLC,GACDf,SAAS,CACPE,MAAOa,EAAMC,OACTD,EAAME,MAAMC,OAAO,4BACnBH,EAAME,MAAMC,OAAO,2BACvBf,gBAAiBY,EAAMC,OAASD,EAAME,MAAMC,OAAO,sBAAwBH,EAAME,MAAMC,OAAOC,YAC9Ff,YAAaW,EAAMC,OAASD,EAAME,MAAMC,OAAOC,YAAcJ,EAAME,MAAMC,OAAO,0BAChFb,WAAYU,EAAMC,OACdD,EAAME,MAAMC,OAAO,4BACnBH,EAAME,MAAMC,OAAO,2BACvBZ,qBAAsBS,EAAMC,OACvBI,UAAUL,EAAME,MAAMC,OAAO,uBAAuBK,OAAO,IAAID,WAChEP,EAAME,MAAMC,OAAO,wBACvBX,iBAAkBQ,EAAMC,OACpBD,EAAME,MAAMC,OAAOC,YACnBJ,EAAME,MAAMC,OAAO,0BACvBV,cAAeO,EAAME,MAAMC,OAAO,4BAClCT,wBAAyBM,EAAMC,OAC3BD,EAAME,MAAMC,OAAO,uBACnBH,EAAME,MAAMC,OAAOC,YACvBT,oBAAqBK,EAAMC,OACvBD,EAAME,MAAMC,OAAOC,YACnBJ,EAAME,MAAMC,OAAO,8BACpBH,EAAMd,qBAOR4B,QAAUC,OAAOC,KAAIC,WAAA,CAAAC,YAAA,gBAAAC,YAAA,mBAAXJ,CAMtB,CAAA,2FAEM,MAAMK,KAAOL,OAAOM,IAAIJ,WAA4B,CACzDK,kBAAmBzC,wBACnBoC,WAAA,CAAAC,YAAA,aAAAC,YAAA,mBAFkBJ,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,KACGf,IACD,IAAIuB,EAAS,UAMb,OAJIvB,EAAMwB,KAAO,WAAUD,EAAS,WAChCvB,EAAMwB,KAAO,UAAYxB,EAAMyB,WAAUF,EAAS,eAClDvB,EAAMuB,SAAQA,EAASvB,EAAMuB,QAE1B,mNAQKA,2KAQJT,wEAGAA,iEAGP,IAGAd,IACD,MAAM0B,EAAS1B,EAAMY,SAAWhB,aAAagB,SAAWhB,aAAaC,QAErE,IAAI8B,EAAgBD,EAAO5B,QAK3B,OAHIE,EAAMU,YAAWiB,EAAgBD,EAAOhB,WACxCV,EAAMW,UAASgB,EAAgBD,EAAOf,SAEnCX,EAAMS,MAAQkB,EAAclB,MAAQkB,EAAc9B,OAAO,GAGhE+B,MACAC,eACAC"}
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Chip/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledChipProps, ChipPalette } from './types'\n\nconst shouldForwardChipProp = createShouldForwardProp(\n (propKey) => !['outline', 'black', 'active', 'cursor'].includes(propKey)\n)\n\nconst template = (palette: ChipPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n ${hover(`\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n `)}\n &:disabled {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n primary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-brand-primary-100'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-contrast']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-onmain-contrast']).lighten(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(11).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n },\n secondary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n borderColor: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-brand-primary-400'],\n colorHover: props.active\n ? props.theme.colors['content-brand-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-brand-primary-100']).lighten(2).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['bg-brand-primary-500']\n : props.theme.colors['bg-brand-primary-400'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-onmain-secondary']\n : props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.active\n ? props.theme.colors['border-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-onmain-secondary']).lighten(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(11).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['border-onmain-contrast']\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n },\n outline: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-brand-primary-500'] : props.theme.colors.transparent,\n borderColor: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-brand-primary-500']).lighten(5).toString() as CSSColor)\n : props.theme.colors['content-oncolor-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active ? props.theme.colors.transparent : props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-onmain-contrast'] : props.theme.colors.transparent,\n borderColor: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-primary']\n : props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-onmain-contrast']).lighten(11).toString() as CSSColor)\n : props.theme.colors['content-oncolor-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-onmain-default-large'],\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-disabled-small']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active ? props.theme.colors.transparent : props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n },\n },\n contrast: {\n primary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-primary']\n : props.theme.colors['bg-brand-primary-100'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-brand-primary-100']).darken(5).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-primary']\n : props.theme.colors['bg-oncolor-tertiary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-oncolor-tertiary']).setAlpha(0.3).toString() as CSSColor),\n borderColorHover: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n },\n secondary: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-secondary']\n : props.theme.colors['bg-oncolor-tertiary'],\n borderColor: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-secondary']).setAlpha(0.5).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-oncolor-tertiary']).setAlpha(0.3).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active\n ? props.theme.colors['bg-oncolor-secondary']\n : props.theme.colors['bg-oncolor-tertiary'],\n borderColor: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-secondary']).setAlpha(0.5).toString() as CSSColor)\n : (tinycolor(props.theme.colors['bg-oncolor-tertiary']).setAlpha(0.3).toString() as CSSColor),\n borderColorHover: props.active\n ? props.theme.colors['border-oncolor-default']\n : props.theme.colors['border-oncolor-default-large'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-disabled'],\n borderColorDisabled: props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n },\n outline: {\n default: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-oncolor-primary'] : props.theme.colors.transparent,\n borderColor: props.active ? props.theme.colors.transparent : props.theme.colors['border-oncolor-default'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : props.theme.colors['content-onmain-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-default'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-oncolor-disabled']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n black: css<StyledChipProps>`\n ${(props) =>\n template({\n color: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.active ? props.theme.colors['bg-oncolor-primary'] : props.theme.colors.transparent,\n borderColor: props.active ? props.theme.colors.transparent : props.theme.colors['border-oncolor-default'],\n colorHover: props.active\n ? props.theme.colors['content-oncolor-constant']\n : props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.active\n ? (tinycolor(props.theme.colors['bg-oncolor-primary']).darken(11).toString() as CSSColor)\n : props.theme.colors['content-onmain-hover'],\n borderColorHover: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-default'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColorDisabled: props.active\n ? props.theme.colors['bg-oncolor-disabled']\n : props.theme.colors.transparent,\n borderColorDisabled: props.active\n ? props.theme.colors.transparent\n : props.theme.colors['border-oncolor-disabled'],\n ...props.palette,\n })}\n `,\n },\n },\n}\n\nexport const Content = styled.span`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n text-align: start;\n`\n\nexport const Root = styled.div.withConfig<StyledChipProps>({\n shouldForwardProp: shouldForwardChipProp,\n})`\n ${(props) => {\n let cursor = 'default'\n\n if (props.as === 'button') cursor = 'pointer'\n if (props.as === 'button' && props.disabled) cursor = 'not-allowed'\n if (props.cursor) cursor = props.cursor\n\n return `\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n display: inline-flex;\n align-items: center;\n border: 1px solid transparent;\n flex-shrink: 0;\n cursor: ${cursor};\n transition-property: background-color;\n transition-duration: 250ms;\n\n & > *:not(:last-child) {\n margin-right: 6px;\n }\n\n & > ${Content}:first-child {\n margin-left: 6px;\n }\n & > ${Content}:last-child {\n margin-right: 6px;\n }\n `\n }}\n\n ${(props) => {\n const schema = props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n let schemaVariant = schema.primary\n\n if (props.secondary) schemaVariant = schema.secondary\n if (props.outline) schemaVariant = schema.outline\n\n return props.black ? schemaVariant.black : schemaVariant.default\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardChipProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","hover","colorHover","backgroundColorHover","borderColorHover","colorDisabled","backgroundColorDisabled","borderColorDisabled","COLOR_SCHEMA","default","primary","css","props","active","theme","colors","transparent","tinycolor","lighten","toString","darken","black","secondary","outline","contrast","setAlpha","Content","styled","span","withConfig","displayName","componentId","Root","div","shouldForwardProp","cursor","as","disabled","schema","schemaVariant","focus","responsiveSize","responsiveMargin"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var styled=require('styled-components');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const isOpen=styled.css(["&:after{cursor:default;user-select:none;content:'';display:block;position:fixed;width:100%;height:100%;z-index:",";left:0;top:0;right:0;bottom:0;}"],(e=>e.theme.zIndex.tooltip));const disabledItem=styled.css(["background-color:",";opacity:0.6;cursor:default;"],(e=>e.theme.colors.alabaster));const notDisabledItem=styled.css(["
|
|
1
|
+
'use strict';var styled=require('styled-components');var hover=require('../../mixins/hover.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const isOpen=styled.css(["&:after{cursor:default;user-select:none;content:'';display:block;position:fixed;width:100%;height:100%;z-index:",";left:0;top:0;right:0;bottom:0;}"],(e=>e.theme.zIndex.tooltip));const disabledItem=styled.css(["background-color:",";opacity:0.6;cursor:default;"],(e=>e.theme.colors.alabaster));const notDisabledItem=styled.css(["",""],(e=>hover.hover(`background-color: ${e.theme.colors.onahau};`)));const Root=styled__default.default.div.withConfig({shouldForwardProp:e=>['className','onClick','children','style'].includes(e)}).withConfig({displayName:"ContextMenu__Root",componentId:"ui__sc-b2wdsu-0"})(["display:inline-block;position:relative;[style*='cursor']{cursor:default !important;}& + &{margin-left:16px;}",""],(e=>e.isOpen&&Boolean(e.hideOverlay)===!1?isOpen:null));const RootItem=styled__default.default.div.withConfig({shouldForwardProp:e=>['className','onClick','children','data-id'].includes(e)}).withConfig({displayName:"ContextMenu__RootItem",componentId:"ui__sc-b2wdsu-1"})(["display:block;padding:8px 20px 7px;transition:background-color 0.4s ease-out;cursor:pointer;user-select:none;"," ",""],(e=>e.active?styled.css(["background-color:",";"],e.theme.colors.onahau):null),(e=>e.disabled?disabledItem:notDisabledItem));exports.Root=Root,exports.RootItem=RootItem;
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/ContextMenu/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { ContextMenuProps } from './ContextMenu'\nimport type { ContextMenuItemProps } from './Item'\n\nconst isOpen = css`\n &:after {\n cursor: default;\n user-select: none;\n content: '';\n display: block;\n position: fixed;\n width: 100%;\n height: 100%;\n z-index: ${(props) => props.theme.zIndex.tooltip};\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n }\n`\n\nconst disabledItem = css`\n background-color: ${(props) => props.theme.colors.alabaster};\n opacity: 0.6;\n cursor: default;\n`\n\nconst notDisabledItem = css`\n
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/ContextMenu/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { hover } from 'mixins/hover'\nimport type { ContextMenuProps } from './ContextMenu'\nimport type { ContextMenuItemProps } from './Item'\n\nconst isOpen = css`\n &:after {\n cursor: default;\n user-select: none;\n content: '';\n display: block;\n position: fixed;\n width: 100%;\n height: 100%;\n z-index: ${(props) => props.theme.zIndex.tooltip};\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n }\n`\n\nconst disabledItem = css`\n background-color: ${(props) => props.theme.colors.alabaster};\n opacity: 0.6;\n cursor: default;\n`\n\nconst notDisabledItem = css`\n ${(props) => hover(`background-color: ${props.theme.colors.onahau};`)}\n`\n\nexport const Root = styled.div.withConfig({\n shouldForwardProp: (prop) => ['className', 'onClick', 'children', 'style'].includes(prop),\n})<Pick<ContextMenuProps, 'isOpen' | 'hideOverlay'>>`\n display: inline-block;\n position: relative;\n [style*='cursor'] {\n cursor: default !important;\n }\n & + & {\n margin-left: 16px;\n }\n ${(props) => (props.isOpen && Boolean(props.hideOverlay) === false ? isOpen : null)}\n`\n\nexport const RootItem = styled.div.withConfig({\n shouldForwardProp: (prop) => ['className', 'onClick', 'children', 'data-id'].includes(prop),\n})<Pick<ContextMenuItemProps, 'active' | 'disabled'>>`\n display: block;\n padding: 8px 20px 7px;\n transition: background-color 0.4s ease-out;\n cursor: pointer;\n user-select: none;\n ${(props) =>\n props.active\n ? css`\n background-color: ${props.theme.colors.onahau};\n `\n : null}\n ${(props) => (props.disabled ? disabledItem : notDisabledItem)}\n`\n"],"names":["isOpen","css","props","theme","zIndex","tooltip","disabledItem","colors","alabaster","notDisabledItem","hover","onahau","Root","styled","div","withConfig","shouldForwardProp","prop","includes","displayName","componentId","Boolean","hideOverlay","RootItem","active","disabled"],"mappings":"6MAKA,MAAMA,OAASC,OAAGA,IAAA,CAAA,kHAAA,qCASFC,GAAUA,EAAMC,MAAMC,OAAOC,UAQ7C,MAAMC,aAAeL,OAAGA,IAAA,CAAA,oBAAA,iCACDC,GAAUA,EAAMC,MAAMI,OAAOC,YAKpD,MAAMC,gBAAkBR,OAAGA,aACtBC,GAAUQ,MAAKA,MAAC,qBAAqBR,EAAMC,MAAMI,OAAOI,aAGtD,MAAMC,KAAOC,gBAAAA,QAAOC,IAAIC,WAAW,CACxCC,kBAAoBC,GAAS,CAAC,YAAa,UAAW,WAAY,SAASC,SAASD,KACpFF,WAAA,CAAAI,YAAA,oBAAAC,YAAA,mBAFkBP,CAElB,CAAA,+GAAA,KASGX,GAAWA,EAAMF,QAAUqB,QAAQnB,EAAMoB,gBAAiB,EAAQtB,OAAS,OAGzE,MAAMuB,SAAWV,gBAAAA,QAAOC,IAAIC,WAAW,CAC5CC,kBAAoBC,GAAS,CAAC,YAAa,UAAW,WAAY,WAAWC,SAASD,KACtFF,WAAA,CAAAI,YAAA,wBAAAC,YAAA,mBAFsBP,CAQnBX,CAAAA,gHAAAA,IAAAA,KAAAA,GACDA,EAAMsB,OACFvB,OAAGA,IACmBC,CAAAA,oBAAAA,KAAAA,EAAMC,MAAMI,OAAOI,QAEzC,OACHT,GAAWA,EAAMuB,SAAWnB,aAAeG"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import styled,{css}from'styled-components';const isOpen=css(["&:after{cursor:default;user-select:none;content:'';display:block;position:fixed;width:100%;height:100%;z-index:",";left:0;top:0;right:0;bottom:0;}"],(o=>o.theme.zIndex.tooltip));const disabledItem=css(["background-color:",";opacity:0.6;cursor:default;"],(o=>o.theme.colors.alabaster));const notDisabledItem=css(["
|
|
1
|
+
import styled,{css}from'styled-components';import{hover}from'../../mixins/hover.mjs';const isOpen=css(["&:after{cursor:default;user-select:none;content:'';display:block;position:fixed;width:100%;height:100%;z-index:",";left:0;top:0;right:0;bottom:0;}"],(o=>o.theme.zIndex.tooltip));const disabledItem=css(["background-color:",";opacity:0.6;cursor:default;"],(o=>o.theme.colors.alabaster));const notDisabledItem=css(["",""],(o=>hover(`background-color: ${o.theme.colors.onahau};`)));const Root=styled.div.withConfig({shouldForwardProp:o=>['className','onClick','children','style'].includes(o)}).withConfig({displayName:"ContextMenu__Root",componentId:"ui__sc-b2wdsu-0"})(["display:inline-block;position:relative;[style*='cursor']{cursor:default !important;}& + &{margin-left:16px;}",""],(o=>o.isOpen&&Boolean(o.hideOverlay)===!1?isOpen:null));const RootItem=styled.div.withConfig({shouldForwardProp:o=>['className','onClick','children','data-id'].includes(o)}).withConfig({displayName:"ContextMenu__RootItem",componentId:"ui__sc-b2wdsu-1"})(["display:block;padding:8px 20px 7px;transition:background-color 0.4s ease-out;cursor:pointer;user-select:none;"," ",""],(o=>o.active?css(["background-color:",";"],o.theme.colors.onahau):null),(o=>o.disabled?disabledItem:notDisabledItem));export{Root,RootItem};
|
|
2
2
|
//# sourceMappingURL=style.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","sources":["../../../../src/components/ContextMenu/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { ContextMenuProps } from './ContextMenu'\nimport type { ContextMenuItemProps } from './Item'\n\nconst isOpen = css`\n &:after {\n cursor: default;\n user-select: none;\n content: '';\n display: block;\n position: fixed;\n width: 100%;\n height: 100%;\n z-index: ${(props) => props.theme.zIndex.tooltip};\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n }\n`\n\nconst disabledItem = css`\n background-color: ${(props) => props.theme.colors.alabaster};\n opacity: 0.6;\n cursor: default;\n`\n\nconst notDisabledItem = css`\n
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/ContextMenu/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { hover } from 'mixins/hover'\nimport type { ContextMenuProps } from './ContextMenu'\nimport type { ContextMenuItemProps } from './Item'\n\nconst isOpen = css`\n &:after {\n cursor: default;\n user-select: none;\n content: '';\n display: block;\n position: fixed;\n width: 100%;\n height: 100%;\n z-index: ${(props) => props.theme.zIndex.tooltip};\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n }\n`\n\nconst disabledItem = css`\n background-color: ${(props) => props.theme.colors.alabaster};\n opacity: 0.6;\n cursor: default;\n`\n\nconst notDisabledItem = css`\n ${(props) => hover(`background-color: ${props.theme.colors.onahau};`)}\n`\n\nexport const Root = styled.div.withConfig({\n shouldForwardProp: (prop) => ['className', 'onClick', 'children', 'style'].includes(prop),\n})<Pick<ContextMenuProps, 'isOpen' | 'hideOverlay'>>`\n display: inline-block;\n position: relative;\n [style*='cursor'] {\n cursor: default !important;\n }\n & + & {\n margin-left: 16px;\n }\n ${(props) => (props.isOpen && Boolean(props.hideOverlay) === false ? isOpen : null)}\n`\n\nexport const RootItem = styled.div.withConfig({\n shouldForwardProp: (prop) => ['className', 'onClick', 'children', 'data-id'].includes(prop),\n})<Pick<ContextMenuItemProps, 'active' | 'disabled'>>`\n display: block;\n padding: 8px 20px 7px;\n transition: background-color 0.4s ease-out;\n cursor: pointer;\n user-select: none;\n ${(props) =>\n props.active\n ? css`\n background-color: ${props.theme.colors.onahau};\n `\n : null}\n ${(props) => (props.disabled ? disabledItem : notDisabledItem)}\n`\n"],"names":["isOpen","css","props","theme","zIndex","tooltip","disabledItem","colors","alabaster","notDisabledItem","hover","onahau","Root","styled","div","withConfig","shouldForwardProp","prop","includes","displayName","componentId","Boolean","hideOverlay","RootItem","active","disabled"],"mappings":"qFAKA,MAAMA,OAASC,IAAG,CAAA,kHAAA,qCASFC,GAAUA,EAAMC,MAAMC,OAAOC,UAQ7C,MAAMC,aAAeL,IAAG,CAAA,oBAAA,iCACDC,GAAUA,EAAMC,MAAMI,OAAOC,YAKpD,MAAMC,gBAAkBR,aACnBC,GAAUQ,MAAM,qBAAqBR,EAAMC,MAAMI,OAAOI,aAGtD,MAAMC,KAAOC,OAAOC,IAAIC,WAAW,CACxCC,kBAAoBC,GAAS,CAAC,YAAa,UAAW,WAAY,SAASC,SAASD,KACpFF,WAAA,CAAAI,YAAA,oBAAAC,YAAA,mBAFkBP,CAElB,CAAA,+GAAA,KASGX,GAAWA,EAAMF,QAAUqB,QAAQnB,EAAMoB,gBAAiB,EAAQtB,OAAS,OAGzE,MAAMuB,SAAWV,OAAOC,IAAIC,WAAW,CAC5CC,kBAAoBC,GAAS,CAAC,YAAa,UAAW,WAAY,WAAWC,SAASD,KACtFF,WAAA,CAAAI,YAAA,wBAAAC,YAAA,mBAFsBP,CAQnBX,CAAAA,gHAAAA,IAAAA,KAAAA,GACDA,EAAMsB,OACFvB,IACsBC,CAAAA,oBAAAA,KAAAA,EAAMC,MAAMI,OAAOI,QAEzC,OACHT,GAAWA,EAAMuB,SAAWnB,aAAeG"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var styled=require('styled-components');var InputMask=require('react-input-mask');function _interopDefault(n){return n&&n.__esModule?n:{default:n}}var styled__default=_interopDefault(styled);var InputMask__default=_interopDefault(InputMask);const Fading=styled__default.default.div.withConfig({shouldForwardProp:n=>n!=='visible'}).withConfig({displayName:"FormInput__Fading",componentId:"ui__sc-1eiwrfu-0"})(["",""],(n=>`\n box-sizing: border-box;\n display: flex;\n align-items: stretch;\n position: relative;\n width: 100%;\n transform: translateZ(0);\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 40px;\n pointer-events: none;\n opacity: ${n.visible?1:0};\n background-image: linear-gradient(90deg, transparent, currentcolor);\n transition-property: opacity, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n\n &:hover::after
|
|
1
|
+
'use strict';var styled=require('styled-components');var InputMask=require('react-input-mask');var hover=require('../../mixins/hover.js');function _interopDefault(n){return n&&n.__esModule?n:{default:n}}var styled__default=_interopDefault(styled);var InputMask__default=_interopDefault(InputMask);const Fading=styled__default.default.div.withConfig({shouldForwardProp:n=>n!=='visible'}).withConfig({displayName:"FormInput__Fading",componentId:"ui__sc-1eiwrfu-0"})(["",""],(n=>`\n box-sizing: border-box;\n display: flex;\n align-items: stretch;\n position: relative;\n width: 100%;\n transform: translateZ(0);\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 40px;\n pointer-events: none;\n opacity: ${n.visible?1:0};\n background-image: linear-gradient(90deg, transparent, currentcolor);\n transition-property: opacity, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n\n ${hover.hover("\n opacity: 0;\n ",'&:hover::after')}\n\n &:focus-within::after {\n opacity: 0;\n }\n `));const Input=styled__default.default(InputMask__default.default).withConfig({shouldForwardProp:n=>!['palette'].includes(n)}).withConfig({displayName:"FormInput__Input",componentId:"ui__sc-1eiwrfu-1"})(["box-sizing:border-box;appearance:textfield;border:none;padding:0;margin:0;background-color:transparent;font:inherit;height:1.4em;width:100%;cursor:pointer;&:disabled{cursor:not-allowed;}&[type='number']::-webkit-outer-spin-button,&[type='number']::-webkit-inner-spin-button{appearance:none;margin:0;}&:focus{outline:none;}&:focus:read-write{cursor:text;}",""],(n=>{return`\n color: ${(e={color:n.theme.colors['content-onmain-primary'],placeholderColor:n.theme.colors['content-onmain-secondary'],colorDisabled:n.theme.colors['content-disabled'],placeholderColorDisabled:n.theme.colors['content-disabled'],...n.palette}).color};\n &:disabled {\n color: ${e.colorDisabled};\n }\n &::placeholder {\n color: ${e.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${e.placeholderColorDisabled};\n }\n`;var e}));exports.Fading=Fading,exports.Input=Input;
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/FormInput/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport type { StyledMaskInputProps, FormInputPalette } from './types'\n\nconst template = (palette: FormInputPalette) => `\n color: ${palette.color};\n &:disabled {\n color: ${palette.colorDisabled};\n }\n &::placeholder {\n color: ${palette.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${palette.placeholderColorDisabled};\n }\n`\n\nexport const Fading = styled.div.withConfig<{ visible: boolean }>({\n shouldForwardProp: (propKey) => propKey !== 'visible',\n})`\n ${(props) => `\n box-sizing: border-box;\n display: flex;\n align-items: stretch;\n position: relative;\n width: 100%;\n transform: translateZ(0);\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 40px;\n pointer-events: none;\n opacity: ${props.visible ? 1 : 0};\n background-image: linear-gradient(90deg, transparent, currentcolor);\n transition-property: opacity, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n\n &:hover::after
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/FormInput/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport { hover } from 'mixins/hover'\nimport type { StyledMaskInputProps, FormInputPalette } from './types'\n\nconst template = (palette: FormInputPalette) => `\n color: ${palette.color};\n &:disabled {\n color: ${palette.colorDisabled};\n }\n &::placeholder {\n color: ${palette.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${palette.placeholderColorDisabled};\n }\n`\n\nexport const Fading = styled.div.withConfig<{ visible: boolean }>({\n shouldForwardProp: (propKey) => propKey !== 'visible',\n})`\n ${(props) => `\n box-sizing: border-box;\n display: flex;\n align-items: stretch;\n position: relative;\n width: 100%;\n transform: translateZ(0);\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 40px;\n pointer-events: none;\n opacity: ${props.visible ? 1 : 0};\n background-image: linear-gradient(90deg, transparent, currentcolor);\n transition-property: opacity, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n\n ${hover(\n `\n opacity: 0;\n `,\n '&:hover::after'\n )}\n\n &:focus-within::after {\n opacity: 0;\n }\n `}\n`\n\nexport const Input: React.ComponentType<StyledMaskInputProps> = styled(InputMask).withConfig<StyledMaskInputProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n background-color: transparent;\n font: inherit;\n height: 1.4em;\n width: 100%;\n cursor: pointer;\n &:disabled {\n cursor: not-allowed;\n }\n &[type='number']::-webkit-outer-spin-button,\n &[type='number']::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n &:focus {\n outline: none;\n }\n\n &:focus:read-write {\n cursor: text;\n }\n\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n placeholderColor: props.theme.colors['content-onmain-secondary'],\n colorDisabled: props.theme.colors['content-disabled'],\n placeholderColorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n`\n"],"names":["Fading","styled","div","withConfig","shouldForwardProp","propKey","displayName","componentId","props","visible","hover","Input","default","InputMask","includes","template","palette","color","theme","colors","placeholderColor","colorDisabled","placeholderColorDisabled"],"mappings":"ySAkBO,MAAMA,OAASC,gBAAAA,QAAOC,IAAIC,WAAiC,CAChEC,kBAAoBC,GAAYA,IAAY,YAC5CF,WAAA,CAAAG,YAAA,oBAAAC,YAAA,oBAFoBN,CAEpB,CAAA,GAAA,KACGO,GAAU,8UAgBEA,EAAMC,QAAU,EAAI,2NAO/BC,MAAKA,MACL,gCAGA,mFASC,MAAMC,MAAmDV,gBAAMW,QAACC,4BAAWV,WAAiC,CACjHC,kBAAoBC,IAAa,CAAC,WAAWS,SAAST,KACtDF,WAAA,CAAAG,YAAA,mBAAAC,YAAA,oBAF8DN,CA6B3DO,CAAAA,qWAAAA,KAAAA,IACDO,MAlF4C,eAA9BC,EAkFL,CACPC,MAAOT,EAAMU,MAAMC,OAAO,0BAC1BC,iBAAkBZ,EAAMU,MAAMC,OAAO,4BACrCE,cAAeb,EAAMU,MAAMC,OAAO,oBAClCG,yBAA0Bd,EAAMU,MAAMC,OAAO,uBAC1CX,EAAMQ,UAtFIC,sCAEND,EAAQK,uDAGRL,EAAQI,mEAGRJ,EAAQM,mCATHN,KAwFZ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import styled from'styled-components';import InputMask from'react-input-mask';const Fading=styled.div.withConfig({shouldForwardProp:n=>n!=='visible'}).withConfig({displayName:"FormInput__Fading",componentId:"ui__sc-1eiwrfu-0"})(["",""],(n=>`\n box-sizing: border-box;\n display: flex;\n align-items: stretch;\n position: relative;\n width: 100%;\n transform: translateZ(0);\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 40px;\n pointer-events: none;\n opacity: ${n.visible?1:0};\n background-image: linear-gradient(90deg, transparent, currentcolor);\n transition-property: opacity, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n\n &:hover::after
|
|
1
|
+
import styled from'styled-components';import InputMask from'react-input-mask';import{hover}from'../../mixins/hover.mjs';const Fading=styled.div.withConfig({shouldForwardProp:n=>n!=='visible'}).withConfig({displayName:"FormInput__Fading",componentId:"ui__sc-1eiwrfu-0"})(["",""],(n=>`\n box-sizing: border-box;\n display: flex;\n align-items: stretch;\n position: relative;\n width: 100%;\n transform: translateZ(0);\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 40px;\n pointer-events: none;\n opacity: ${n.visible?1:0};\n background-image: linear-gradient(90deg, transparent, currentcolor);\n transition-property: opacity, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n\n ${hover("\n opacity: 0;\n ",'&:hover::after')}\n\n &:focus-within::after {\n opacity: 0;\n }\n `));const Input=styled(InputMask).withConfig({shouldForwardProp:n=>!['palette'].includes(n)}).withConfig({displayName:"FormInput__Input",componentId:"ui__sc-1eiwrfu-1"})(["box-sizing:border-box;appearance:textfield;border:none;padding:0;margin:0;background-color:transparent;font:inherit;height:1.4em;width:100%;cursor:pointer;&:disabled{cursor:not-allowed;}&[type='number']::-webkit-outer-spin-button,&[type='number']::-webkit-inner-spin-button{appearance:none;margin:0;}&:focus{outline:none;}&:focus:read-write{cursor:text;}",""],(n=>{return`\n color: ${(o={color:n.theme.colors['content-onmain-primary'],placeholderColor:n.theme.colors['content-onmain-secondary'],colorDisabled:n.theme.colors['content-disabled'],placeholderColorDisabled:n.theme.colors['content-disabled'],...n.palette}).color};\n &:disabled {\n color: ${o.colorDisabled};\n }\n &::placeholder {\n color: ${o.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${o.placeholderColorDisabled};\n }\n`;var o}));export{Fading,Input};
|
|
2
2
|
//# sourceMappingURL=style.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","sources":["../../../../src/components/FormInput/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport type { StyledMaskInputProps, FormInputPalette } from './types'\n\nconst template = (palette: FormInputPalette) => `\n color: ${palette.color};\n &:disabled {\n color: ${palette.colorDisabled};\n }\n &::placeholder {\n color: ${palette.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${palette.placeholderColorDisabled};\n }\n`\n\nexport const Fading = styled.div.withConfig<{ visible: boolean }>({\n shouldForwardProp: (propKey) => propKey !== 'visible',\n})`\n ${(props) => `\n box-sizing: border-box;\n display: flex;\n align-items: stretch;\n position: relative;\n width: 100%;\n transform: translateZ(0);\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 40px;\n pointer-events: none;\n opacity: ${props.visible ? 1 : 0};\n background-image: linear-gradient(90deg, transparent, currentcolor);\n transition-property: opacity, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n\n &:hover::after
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/FormInput/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport { hover } from 'mixins/hover'\nimport type { StyledMaskInputProps, FormInputPalette } from './types'\n\nconst template = (palette: FormInputPalette) => `\n color: ${palette.color};\n &:disabled {\n color: ${palette.colorDisabled};\n }\n &::placeholder {\n color: ${palette.placeholderColor};\n }\n &:disabled::placeholder {\n color: ${palette.placeholderColorDisabled};\n }\n`\n\nexport const Fading = styled.div.withConfig<{ visible: boolean }>({\n shouldForwardProp: (propKey) => propKey !== 'visible',\n})`\n ${(props) => `\n box-sizing: border-box;\n display: flex;\n align-items: stretch;\n position: relative;\n width: 100%;\n transform: translateZ(0);\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 40px;\n pointer-events: none;\n opacity: ${props.visible ? 1 : 0};\n background-image: linear-gradient(90deg, transparent, currentcolor);\n transition-property: opacity, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n\n ${hover(\n `\n opacity: 0;\n `,\n '&:hover::after'\n )}\n\n &:focus-within::after {\n opacity: 0;\n }\n `}\n`\n\nexport const Input: React.ComponentType<StyledMaskInputProps> = styled(InputMask).withConfig<StyledMaskInputProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n background-color: transparent;\n font: inherit;\n height: 1.4em;\n width: 100%;\n cursor: pointer;\n &:disabled {\n cursor: not-allowed;\n }\n &[type='number']::-webkit-outer-spin-button,\n &[type='number']::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n &:focus {\n outline: none;\n }\n\n &:focus:read-write {\n cursor: text;\n }\n\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n placeholderColor: props.theme.colors['content-onmain-secondary'],\n colorDisabled: props.theme.colors['content-disabled'],\n placeholderColorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n`\n"],"names":["Fading","styled","div","withConfig","shouldForwardProp","propKey","displayName","componentId","props","visible","hover","Input","InputMask","includes","template","palette","color","theme","colors","placeholderColor","colorDisabled","placeholderColorDisabled"],"mappings":"wHAkBO,MAAMA,OAASC,OAAOC,IAAIC,WAAiC,CAChEC,kBAAoBC,GAAYA,IAAY,YAC5CF,WAAA,CAAAG,YAAA,oBAAAC,YAAA,oBAFoBN,CAEpB,CAAA,GAAA,KACGO,GAAU,8UAgBEA,EAAMC,QAAU,EAAI,2NAO/BC,MACA,gCAGA,mFASC,MAAMC,MAAmDV,OAAOW,WAAWT,WAAiC,CACjHC,kBAAoBC,IAAa,CAAC,WAAWQ,SAASR,KACtDF,WAAA,CAAAG,YAAA,mBAAAC,YAAA,oBAF8DN,CA6B3DO,CAAAA,qWAAAA,KAAAA,IACDM,MAlF4C,eAA9BC,EAkFL,CACPC,MAAOR,EAAMS,MAAMC,OAAO,0BAC1BC,iBAAkBX,EAAMS,MAAMC,OAAO,4BACrCE,cAAeZ,EAAMS,MAAMC,OAAO,oBAClCG,yBAA0Bb,EAAMS,MAAMC,OAAO,uBAC1CV,EAAMO,UAtFIC,sCAEND,EAAQK,uDAGRL,EAAQI,mEAGRJ,EAAQM,mCATHN,KAwFZ"}
|
|
@@ -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');var responsiveMargin=require('../../mixins/responsive-margin.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardFormInputLabelProp=style.createShouldForwardProp((o=>!['primary','secondary','error','success','focus','disabled','onColored','inline','zIndex','overflow'].includes(o)));const shouldForwardContainerProp=style.createShouldForwardProp((o=>!['grow'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\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 responsiveMargin=require('../../mixins/responsive-margin.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 shouldForwardFormInputLabelProp=style.createShouldForwardProp((o=>!['primary','secondary','error','success','focus','disabled','onColored','inline','zIndex','overflow'].includes(o)));const shouldForwardContainerProp=style.createShouldForwardProp((o=>!['grow'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n ${hover.hover(`\n background-color: ${o.backgroundColorHover};\n `)}\n &:focus-within {\n background-color: ${o.backgroundColor};\n }\n & [data-input-fading]::after {\n color: ${o.backgroundColor}; \n }\n`;const COLOR_SCHEMA={contrast:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-200'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-200'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-200'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-200'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))},secondary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-secondary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-secondary']:tinycolor__default.default(o.theme.colors['bg-onmain-secondary']).darken(4).toString(),...o.palette})))},primary:{disabled:styled.css(["",""],(o=>template({color:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors['bg-disabled-large'],borderColor:o.theme.colors.transparent,backgroundColorHover:o.theme.colors['bg-disabled-large'],...o.palette}))),error:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-error-100'],borderColor:o.theme.colors['alert-bg-error-500'],backgroundColorHover:o.theme.colors['alert-bg-error-100'],...o.palette}))),success:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['alert-bg-success-100'],borderColor:o.theme.colors['alert-bg-success-500'],backgroundColorHover:o.theme.colors['alert-bg-success-100'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-secondary'],backgroundColor:o.theme.colors['bg-onmain-primary'],borderColor:o.theme.colors['border-onmain-default-large'],backgroundColorHover:o.focus?o.theme.colors['bg-onmain-primary']:tinycolor__default.default(o.theme.colors['bg-onmain-primary']).darken(4).toString(),...o.palette})))}};const Dropdown=styled__default.default.div.withConfig({displayName:"FormInputLabel__Dropdown",componentId:"ui__sc-1il4atw-0"})(["box-sizing:border-box;position:absolute;top:100%;margin-top:8px;"]);const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardFormInputLabelProp}).withConfig({displayName:"FormInputLabel__Root",componentId:"ui__sc-1il4atw-1"})([""," "," "," "," ",""],(o=>{const e='1px';return`\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n align-items: center;\n min-width: min-content;\n border: ${e} solid transparent;\n z-index: ${o.zIndex??'auto'};\n overflow: ${o.overflow??'visible'};\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n\n & > ${Dropdown} {\n right: -${e};\n left: -${e};\n }\n\n ${hover.hover("\n opacity: 0;\n ",'&:hover [data-input-fading]::after')}\n `}),(o=>o.focus?`\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 & [data-input-fading]::after {\n opacity: 0;\n }\n `:`\n &:focus-within {\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 &:focus-within [data-input-fading]::after {\n opacity: 0;\n }\n `),(o=>{let e=COLOR_SCHEMA.primary;return o.secondary&&(e=COLOR_SCHEMA.secondary),(o.contrast||o.onColored)&&(e=COLOR_SCHEMA.contrast),o.disabled?e.disabled:o.error?e.error:o.success?e.success:e.default}),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Container=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardContainerProp}).withConfig({displayName:"FormInputLabel__Container",componentId:"ui__sc-1il4atw-2"})([""," "," ",""],(o=>`\n display: flex;\n box-sizing: border-box;\n align-self: stretch;\n align-items: stretch;\n cursor: inherit;\n flex-grow: ${o.grow??0};\n `),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);exports.Container=Container,exports.Dropdown=Dropdown,exports.Root=Root;
|
|
2
2
|
//# sourceMappingURL=style.js.map
|