npm - @foxford/ui - Versions diffs - 2.59.0 → 2.61.0 - Mend

@foxford/ui 2.59.0 → 2.61.0

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.

Files changed (318) hide show

package/components/Checkbox/style.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import styled,{css}from'styled-components';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';import{screenMaxS}from'../../mixins/screen.mjs';import{responsiveProperty}from'../../mixins/responsive-property.mjs';import SvgCheckDefault from'./images/check-default.svg.mjs';import SvgCheck from'./images/check.svg.mjs';const DEFAULT_SIZES={extraSmall:12,xs:12,small:14,s:14,medium:16,m:16,large:18,l:18,extraLarge:20,xl:20};const BRAND_SIZES={extraSmall:16,xs:16,small:20,s:20,medium:24,m:24,large:28,l:28,extraLarge:32,xl:32};const STATIC_SIZES=['extraSmall','xs','small','s','medium','m','large','l','extraLarge','xl'];const baseStyles=css(["",""],(o=>`\n    &,\n    & * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    cursor: pointer;\n    padding: ${o.background?12:0}px;\n    display: ${o.inline?'inline-flex':'flex'};\n    align-items: baseline;\n    isolation: isolate;\n    & + & {\n      margin-left: 15px;\n    }\n  `));const Input=styled.input.withConfig({displayName:"Checkbox__Input",componentId:"ui__sc-9s6oap-0"})(["position:absolute;opacity:0;z-index:-1;&:focus{outline:none;}"]);const Background=styled.span.withConfig({displayName:"Checkbox__Background",componentId:"ui__sc-9s6oap-1"})(["border-radius:8px;border:1px solid;border-color:transparent;overflow:hidden;&::before{content:'';opacity:0;}&,&::before{position:absolute;top:0;left:0;width:100%;height:100%;transition-property:border-color,background-color,opacity;transition-duration:150ms;transition-timing-function:ease-in;}"]);const DefaultMask=styled(SvgCheckDefault).withConfig({displayName:"Checkbox__DefaultMask",componentId:"ui__sc-9s6oap-2"})(["position:relative;top:2px;width:1em;height:1em;flex-shrink:0;g{opacity:0;transition:opacity 200ms ease;}"]);const BrandMask=styled.div.withConfig({displayName:"Checkbox__BrandMask",componentId:"ui__sc-9s6oap-3"})(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1em;height:1em;border-radius:4px;border:1px solid;border-color:transparent;transition-property:border-color;transition-duration:150ms;transition-timing-function:ease-in;"]);const CheckIcon=styled(SvgCheck).withConfig({displayName:"Checkbox__CheckIcon",componentId:"ui__sc-9s6oap-4"})(["width:50%;opacity:0;"]);const Content=styled.span.withConfig({displayName:"Checkbox__Content",componentId:"ui__sc-9s6oap-5"})(["position:relative;margin-left:10px;"]);const template=o=>`\n  & > ${Content} {\n    color: ${o.fontColor};\n  }\n  & > ${BrandMask} {\n    background-color: ${o.bg};\n    color: ${o.color};\n    border-color: ${o.border};\n  }\n  & > ${Input}:checked ~ ${BrandMask} {\n    border-color: transparent;\n    background-color: ${o.bgChecked};\n  }\n  & > ${Input}:checked ~ ${BrandMask} > ${CheckIcon} {\n    opacity: 1;\n  }\n  & > ${Input}:disabled ~ ${Content} {\n    color: ${o.colorDisabled};\n  }\n  &:hover > ${BrandMask} {\n    border-color: ${o.borderHover};\n  }\n  &:focus {\n    outline: none;\n  }\n  & > ${Input}:focus-visible ~ ${BrandMask} {\n    outline: 1px solid ${o.outlineFocus};\n    outline-offset: 2px;\n  }\n`;const templateBackground=o=>`\n  & > ${Background} {\n    background-color: ${o.bg};\n    border-color: ${o.border};\n  }\n  & > ${Input}:checked ~ ${Background} {\n    background-color: ${o.bgChecked};\n    border-color: ${o.borderChecked};\n  }\n  &:hover > ${Background} {\n    background-color: ${o.bgHover};\n    border-color: ${o.borderHover};\n  }\n  &:hover > ${Background}::before {\n    background-color: ${o.beforeBgHover};\n    opacity: 1;\n  }\n`;const PRESET={default:{regular:css([""," ",""],(o=>template({fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['bg-onmain-primary'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-onmain-default-small'],bgChecked:o.theme.colors['bg-brand-primary-basic'],borderHover:o.theme.colors['border-brand-primary'],outlineFocus:o.theme.colors['border-brand-primary'],colorDisabled:o.theme.colors['content-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['bg-onmain-secondary'],border:o.theme.colors['border-onmain-default-small'],bgChecked:o.theme.colors['bg-brand-primary-100'],borderChecked:o.theme.colors['border-brand-primary'],bgHover:o.theme.colors['bg-oncolor-hover'],borderHover:o.theme.colors['border-onmain-default-large'],beforeBgHover:'transparent'}):null)),error:css([""," ",""],(o=>template({fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['alert-bg-error-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-error-500'],bgChecked:o.theme.colors['alert-bg-error-500'],borderHover:o.theme.colors['alert-error'],outlineFocus:o.theme.colors['alert-error'],colorDisabled:o.theme.colors['content-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['alert-bg-error-100'],border:o.theme.colors['alert-error'],bgChecked:o.theme.colors['alert-bg-error-100'],borderChecked:o.theme.colors['alert-error'],bgHover:o.theme.colors['alert-bg-error-100'],borderHover:o.theme.colors['alert-error'],beforeBgHover:'transparent'}):null)),success:css([""," ",""],(o=>template({fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['alert-bg-success-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-success-500'],bgChecked:o.theme.colors['alert-bg-success-500'],borderHover:o.theme.colors['alert-success'],outlineFocus:o.theme.colors['alert-success'],colorDisabled:o.theme.colors['content-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['alert-bg-success-100'],border:o.theme.colors['alert-success'],bgChecked:o.theme.colors['alert-bg-success-100'],borderChecked:o.theme.colors['alert-success'],bgHover:o.theme.colors['alert-bg-success-100'],borderHover:o.theme.colors['alert-success'],beforeBgHover:'transparent'}):null)),disabled:css(["cursor:auto;"," ",""],(o=>template({fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['bg-disabled-large'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-disabled'],bgChecked:o.theme.colors['bg-disabled-active'],borderHover:o.theme.colors['border-disabled'],outlineFocus:o.theme.colors['border-disabled'],colorDisabled:o.theme.colors['content-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['bg-disabled-large'],border:o.theme.colors['border-disabled'],bgChecked:o.theme.colors['bg-disabled-large'],borderChecked:o.theme.colors['bg-disabled-active'],bgHover:o.theme.colors['bg-disabled-large'],borderHover:o.theme.colors['border-disabled'],beforeBgHover:'transparent'}):null))},onColored:{regular:css([""," ",""],(o=>template(o.background?{fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['bg-onmain-primary'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-onmain-default-small'],bgChecked:o.theme.colors['bg-brand-primary-basic'],borderHover:o.theme.colors['border-brand-primary'],outlineFocus:o.theme.colors['border-brand-primary'],colorDisabled:o.theme.colors['content-oncolor-disabled']}:{fontColor:o.theme.colors['content-oncolor-primary'],bg:o.theme.colors['bg-onmain-primary'],color:o.theme.colors['content-brand-primary'],border:o.theme.colors['border-onmain-default-small'],bgChecked:o.theme.colors['bg-oncolor-primary'],borderHover:o.theme.colors['border-brand-primary'],outlineFocus:o.theme.colors['content-oncolor-primary'],colorDisabled:o.theme.colors['content-oncolor-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['bg-onmain-secondary'],border:o.theme.colors['border-onmain-default-large'],bgChecked:o.theme.colors['bg-onmain-primary'],borderChecked:o.theme.colors['border-onmain-default-large'],bgHover:o.theme.colors['bg-onmain-secondary'],borderHover:o.theme.colors['border-onmain-default-large'],beforeBgHover:o.theme.colors['bg-oncolor-hover']}):null)),error:css([""," ",""],(o=>template(o.background?{fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['alert-bg-error-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-error-500'],bgChecked:o.theme.colors['alert-bg-error-500'],borderHover:o.theme.colors['alert-error'],outlineFocus:o.theme.colors['alert-error'],colorDisabled:o.theme.colors['content-oncolor-disabled']}:{fontColor:o.theme.colors['content-oncolor-primary'],bg:o.theme.colors['alert-bg-error-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-error-500'],bgChecked:o.theme.colors['alert-bg-error-500'],borderHover:o.theme.colors['alert-error'],outlineFocus:o.theme.colors['alert-error'],colorDisabled:o.theme.colors['content-oncolor-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['alert-bg-error-100'],border:o.theme.colors['alert-bg-error-500'],bgChecked:o.theme.colors['alert-bg-error-100'],borderChecked:o.theme.colors['alert-error'],bgHover:o.theme.colors['alert-bg-error-100'],borderHover:o.theme.colors['alert-error'],beforeBgHover:o.theme.colors['bg-oncolor-hover']}):null)),success:css([""," ",""],(o=>template(o.background?{fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['alert-bg-success-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-success-500'],bgChecked:o.theme.colors['alert-bg-success-500'],borderHover:o.theme.colors['alert-success'],outlineFocus:o.theme.colors['alert-success'],colorDisabled:o.theme.colors['content-oncolor-disabled']}:{fontColor:o.theme.colors['content-oncolor-primary'],bg:o.theme.colors['alert-bg-success-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-success-500'],bgChecked:o.theme.colors['alert-bg-success-500'],borderHover:o.theme.colors['alert-success'],outlineFocus:o.theme.colors['alert-success'],colorDisabled:o.theme.colors['content-oncolor-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['alert-bg-success-100'],border:o.theme.colors['alert-bg-success-500'],bgChecked:o.theme.colors['alert-bg-success-100'],borderChecked:o.theme.colors['alert-success'],bgHover:o.theme.colors['alert-bg-success-100'],borderHover:o.theme.colors['alert-success'],beforeBgHover:o.theme.colors['bg-oncolor-hover']}):null)),disabled:css(["cursor:auto;"," ",""],(o=>template(o.background?{fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['bg-disabled-large'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-disabled'],bgChecked:o.theme.colors['bg-disabled-active'],borderHover:o.theme.colors['border-disabled'],outlineFocus:o.theme.colors['border-disabled'],colorDisabled:o.theme.colors['content-disabled']}:{fontColor:o.theme.colors['content-oncolor-primary'],bg:o.theme.colors['bg-disabled-large'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-disabled'],bgChecked:o.theme.colors['bg-disabled-active'],borderHover:o.theme.colors['border-disabled'],outlineFocus:o.theme.colors['border-disabled'],colorDisabled:o.theme.colors['content-oncolor-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['bg-onmain-secondary'],border:o.theme.colors['border-oncolor-disabled'],bgChecked:o.theme.colors['bg-onmain-secondary'],borderChecked:o.theme.colors['border-oncolor-disabled'],bgHover:o.theme.colors['bg-onmain-secondary'],borderHover:o.theme.colors['border-oncolor-disabled'],beforeBgHover:'transparent'}):null))}};const PRESET_DEFAULT={default:css([""," ",""],(o=>o.error?`\n          & > ${DefaultMask} > rect { \n            fill: ${tinycolor(o.theme.colors.pomegranate).setAlpha(.1).toString()};\n            stroke: ${o.theme.colors.pomegranate};\n          }  \n          & > ${DefaultMask} g > rect {\n            fill: ${o.theme.colors.pomegranate};\n          }\n        `:null),(o=>`\n      color: ${o.disabled?o.theme.colors.alto:o.theme.colors.mineShaft};\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n\n      & > ${Input}:checked ~ ${DefaultMask} g {\n        opacity: 1;\n      }\n      & > ${Input}:disabled ~ ${DefaultMask} > rect {\n        fill: ${o.theme.colors.white};\n        stroke: ${o.theme.colors.grey};\n      }\n      & > ${Input}:checked:disabled ~ ${DefaultMask} g > rect {\n        fill: ${o.theme.colors.alto};\n      }\n      &:focus {\n        outline: none;\n      }\n      & > ${Input}:focus-visible ~ ${DefaultMask} {\n        outline: 1px solid ${o.theme.colors.accent};\n        outline-offset: 2px;\n      }\n    `))};const Root=styled.label.withConfig({shouldForwardProp:o=>['children','htmlFor','style'].includes(o)}).withConfig({displayName:"Checkbox__Root",componentId:"ui__sc-9s6oap-6"})([""," "," "," "," ",""],baseStyles,(o=>o.brandPresetUsed?o.disabled&&!o.onColored?PRESET.default.disabled:o.disabled&&o.onColored?PRESET.onColored.disabled:!o.error||o.success||o.onColored?o.error&&!o.success&&o.onColored?PRESET.onColored.error:!o.success||o.error||o.onColored?o.success&&!o.error&&o.onColored?PRESET.onColored.success:o.onColored?PRESET.onColored.regular:PRESET.default.regular:PRESET.default.success:PRESET.default.error:PRESET_DEFAULT.default),(o=>{const e=o.brandPresetUsed?BRAND_SIZES:DEFAULT_SIZES;return STATIC_SIZES.includes(o.size)?`font-size: ${e[o.size]}px;`:responsiveProperty('size','font-size')}),(o=>responsiveProperty('width',o.fluid&&o.width!=='auto'&&!Array.isArray(o.width)?'max-width':'width')),(o=>o.fluid?'width: 100%;':null));const Group=styled.div.withConfig({shouldForwardProp:o=>o!=='inline'}).withConfig({displayName:"Checkbox__Group",componentId:"ui__sc-9s6oap-7"})(["",""],(o=>o.inline?css(["display:flex;flex-direction:row;> ",":first-child{margin-left:0;}> ",":not(:first-child){margin-left:15px;}",""],Root,Root,screenMaxS()`
+import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{screenMaxS}from'../../mixins/screen.mjs';import{responsiveProperty}from'../../mixins/responsive-property.mjs';import SvgCheckDefault from'./images/check-default.svg.mjs';import SvgCheck from'./images/check.svg.mjs';const DEFAULT_SIZES={extraSmall:12,xs:12,small:14,s:14,medium:16,m:16,large:18,l:18,extraLarge:20,xl:20};const BRAND_SIZES={extraSmall:16,xs:16,small:20,s:20,medium:24,m:24,large:28,l:28,extraLarge:32,xl:32};const STATIC_SIZES=['extraSmall','xs','small','s','medium','m','large','l','extraLarge','xl'];const baseStyles=css(["",""],(o=>`\n    &,\n    & * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    cursor: pointer;\n    padding: ${o.background?12:0}px;\n    display: ${o.inline?'inline-flex':'flex'};\n    align-items: baseline;\n    isolation: isolate;\n    & + & {\n      margin-left: 15px;\n    }\n  `));const Input=styled.input.withConfig({displayName:"Checkbox__Input",componentId:"ui__sc-9s6oap-0"})(["position:absolute;opacity:0;z-index:-1;&:focus{outline:none;}"]);const Background=styled.span.withConfig({displayName:"Checkbox__Background",componentId:"ui__sc-9s6oap-1"})(["border-radius:8px;border:1px solid;border-color:transparent;overflow:hidden;&::before{content:'';opacity:0;}&,&::before{position:absolute;top:0;left:0;width:100%;height:100%;transition-property:border-color,background-color,opacity;transition-duration:150ms;transition-timing-function:ease-in;}"]);const DefaultMask=styled(SvgCheckDefault).withConfig({displayName:"Checkbox__DefaultMask",componentId:"ui__sc-9s6oap-2"})(["position:relative;top:2px;width:1em;height:1em;flex-shrink:0;g{opacity:0;transition:opacity 200ms ease;}"]);const BrandMask=styled.div.withConfig({displayName:"Checkbox__BrandMask",componentId:"ui__sc-9s6oap-3"})(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1em;height:1em;border-radius:4px;border:1px solid;border-color:transparent;transition-property:border-color;transition-duration:150ms;transition-timing-function:ease-in;"]);const CheckIcon=styled(SvgCheck).withConfig({displayName:"Checkbox__CheckIcon",componentId:"ui__sc-9s6oap-4"})(["width:50%;opacity:0;"]);const Content=styled.span.withConfig({displayName:"Checkbox__Content",componentId:"ui__sc-9s6oap-5"})(["position:relative;margin-left:10px;"]);const template=o=>`\n  & > ${Content} {\n    color: ${o.fontColor};\n  }\n  & > ${BrandMask} {\n    background-color: ${o.bg};\n    color: ${o.color};\n    border-color: ${o.border};\n  }\n  & > ${Input}:checked ~ ${BrandMask} {\n    border-color: transparent;\n    background-color: ${o.bgChecked};\n  }\n  & > ${Input}:checked ~ ${BrandMask} > ${CheckIcon} {\n    opacity: 1;\n  }\n  & > ${Input}:disabled ~ ${Content} {\n    color: ${o.colorDisabled};\n  }\n  &:hover > ${BrandMask} {\n    border-color: ${o.borderHover};\n  }\n  &:focus {\n    outline: none;\n  }\n  & > ${Input}:focus-visible ~ ${BrandMask} {\n    outline: 1px solid ${o.outlineFocus};\n    outline-offset: 2px;\n  }\n`;const templateBackground=o=>`\n  & > ${Background} {\n    background-color: ${o.bg};\n    border-color: ${o.border};\n  }\n  & > ${Input}:checked ~ ${Background} {\n    background-color: ${o.bgChecked};\n    border-color: ${o.borderChecked};\n  }\n  &:hover > ${Background} {\n    background-color: ${o.bgHover};\n    border-color: ${o.borderHover};\n  }\n  &:hover > ${Background}::before {\n    background-color: ${o.beforeBgHover};\n    opacity: 1;\n  }\n`;const PRESET={default:{regular:css([""," ",""],(o=>template({fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['bg-onmain-primary'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-onmain-default-small'],bgChecked:o.theme.colors['bg-brand-primary-basic'],borderHover:o.theme.colors['border-brand-primary'],outlineFocus:o.theme.colors['border-brand-primary'],colorDisabled:o.theme.colors['content-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['bg-onmain-secondary'],border:o.theme.colors['border-onmain-default-small'],bgChecked:o.theme.colors['bg-brand-primary-100'],borderChecked:o.theme.colors['border-brand-primary'],bgHover:o.theme.colors['bg-oncolor-hover'],borderHover:o.theme.colors['border-onmain-default-large'],beforeBgHover:'transparent'}):null)),error:css([""," ",""],(o=>template({fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['alert-bg-error-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-error-500'],bgChecked:o.theme.colors['alert-bg-error-500'],borderHover:o.theme.colors['alert-error'],outlineFocus:o.theme.colors['alert-error'],colorDisabled:o.theme.colors['content-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['alert-bg-error-100'],border:o.theme.colors['alert-error'],bgChecked:o.theme.colors['alert-bg-error-100'],borderChecked:o.theme.colors['alert-error'],bgHover:o.theme.colors['alert-bg-error-100'],borderHover:o.theme.colors['alert-error'],beforeBgHover:'transparent'}):null)),success:css([""," ",""],(o=>template({fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['alert-bg-success-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-success-500'],bgChecked:o.theme.colors['alert-bg-success-500'],borderHover:o.theme.colors['alert-success'],outlineFocus:o.theme.colors['alert-success'],colorDisabled:o.theme.colors['content-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['alert-bg-success-100'],border:o.theme.colors['alert-success'],bgChecked:o.theme.colors['alert-bg-success-100'],borderChecked:o.theme.colors['alert-success'],bgHover:o.theme.colors['alert-bg-success-100'],borderHover:o.theme.colors['alert-success'],beforeBgHover:'transparent'}):null)),disabled:css(["cursor:auto;"," ",""],(o=>template({fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['bg-disabled-large'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-disabled'],bgChecked:o.theme.colors['bg-disabled-active'],borderHover:o.theme.colors['border-disabled'],outlineFocus:o.theme.colors['border-disabled'],colorDisabled:o.theme.colors['content-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['bg-disabled-large'],border:o.theme.colors['border-disabled'],bgChecked:o.theme.colors['bg-disabled-large'],borderChecked:o.theme.colors['bg-disabled-active'],bgHover:o.theme.colors['bg-disabled-large'],borderHover:o.theme.colors['border-disabled'],beforeBgHover:'transparent'}):null))},onColored:{regular:css([""," ",""],(o=>template(o.background?{fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['bg-onmain-primary'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-onmain-default-small'],bgChecked:o.theme.colors['bg-brand-primary-basic'],borderHover:o.theme.colors['border-brand-primary'],outlineFocus:o.theme.colors['border-brand-primary'],colorDisabled:o.theme.colors['content-oncolor-disabled']}:{fontColor:o.theme.colors['content-oncolor-primary'],bg:o.theme.colors['bg-onmain-primary'],color:o.theme.colors['content-brand-primary'],border:o.theme.colors['border-onmain-default-small'],bgChecked:o.theme.colors['bg-oncolor-primary'],borderHover:o.theme.colors['border-brand-primary'],outlineFocus:o.theme.colors['content-oncolor-primary'],colorDisabled:o.theme.colors['content-oncolor-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['bg-onmain-secondary'],border:o.theme.colors['border-onmain-default-large'],bgChecked:o.theme.colors['bg-onmain-primary'],borderChecked:o.theme.colors['border-onmain-default-large'],bgHover:o.theme.colors['bg-onmain-secondary'],borderHover:o.theme.colors['border-onmain-default-large'],beforeBgHover:o.theme.colors['bg-oncolor-hover']}):null)),error:css([""," ",""],(o=>template(o.background?{fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['alert-bg-error-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-error-500'],bgChecked:o.theme.colors['alert-bg-error-500'],borderHover:o.theme.colors['alert-error'],outlineFocus:o.theme.colors['alert-error'],colorDisabled:o.theme.colors['content-oncolor-disabled']}:{fontColor:o.theme.colors['content-oncolor-primary'],bg:o.theme.colors['alert-bg-error-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-error-500'],bgChecked:o.theme.colors['alert-bg-error-500'],borderHover:o.theme.colors['alert-error'],outlineFocus:o.theme.colors['alert-error'],colorDisabled:o.theme.colors['content-oncolor-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['alert-bg-error-100'],border:o.theme.colors['alert-bg-error-500'],bgChecked:o.theme.colors['alert-bg-error-100'],borderChecked:o.theme.colors['alert-error'],bgHover:o.theme.colors['alert-bg-error-100'],borderHover:o.theme.colors['alert-error'],beforeBgHover:o.theme.colors['bg-oncolor-hover']}):null)),success:css([""," ",""],(o=>template(o.background?{fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['alert-bg-success-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-success-500'],bgChecked:o.theme.colors['alert-bg-success-500'],borderHover:o.theme.colors['alert-success'],outlineFocus:o.theme.colors['alert-success'],colorDisabled:o.theme.colors['content-oncolor-disabled']}:{fontColor:o.theme.colors['content-oncolor-primary'],bg:o.theme.colors['alert-bg-success-100'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['alert-bg-success-500'],bgChecked:o.theme.colors['alert-bg-success-500'],borderHover:o.theme.colors['alert-success'],outlineFocus:o.theme.colors['alert-success'],colorDisabled:o.theme.colors['content-oncolor-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['alert-bg-success-100'],border:o.theme.colors['alert-bg-success-500'],bgChecked:o.theme.colors['alert-bg-success-100'],borderChecked:o.theme.colors['alert-success'],bgHover:o.theme.colors['alert-bg-success-100'],borderHover:o.theme.colors['alert-success'],beforeBgHover:o.theme.colors['bg-oncolor-hover']}):null)),disabled:css(["cursor:auto;"," ",""],(o=>template(o.background?{fontColor:o.theme.colors['content-onmain-primary'],bg:o.theme.colors['bg-disabled-large'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-disabled'],bgChecked:o.theme.colors['bg-disabled-active'],borderHover:o.theme.colors['border-disabled'],outlineFocus:o.theme.colors['border-disabled'],colorDisabled:o.theme.colors['content-disabled']}:{fontColor:o.theme.colors['content-oncolor-primary'],bg:o.theme.colors['bg-disabled-large'],color:o.theme.colors['content-oncolor-primary'],border:o.theme.colors['border-disabled'],bgChecked:o.theme.colors['bg-disabled-active'],borderHover:o.theme.colors['border-disabled'],outlineFocus:o.theme.colors['border-disabled'],colorDisabled:o.theme.colors['content-oncolor-disabled']})),(o=>o.background?templateBackground({bg:o.theme.colors['bg-onmain-secondary'],border:o.theme.colors['border-oncolor-disabled'],bgChecked:o.theme.colors['bg-onmain-secondary'],borderChecked:o.theme.colors['border-oncolor-disabled'],bgHover:o.theme.colors['bg-onmain-secondary'],borderHover:o.theme.colors['border-oncolor-disabled'],beforeBgHover:'transparent'}):null))}};const PRESET_DEFAULT={default:css([""," ",""],(o=>o.error?`\n          & > ${DefaultMask} > rect { \n            fill: ${tinycolor(o.theme.colors.pomegranate).setAlpha(.1).toString()};\n            stroke: ${o.theme.colors.pomegranate};\n          }  \n          & > ${DefaultMask} g > rect {\n            fill: ${o.theme.colors.pomegranate};\n          }\n        `:null),(o=>`\n      color: ${o.disabled?o.theme.colors.alto:o.theme.colors.mineShaft};\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n\n      & > ${Input}:checked ~ ${DefaultMask} g {\n        opacity: 1;\n      }\n      & > ${Input}:disabled ~ ${DefaultMask} > rect {\n        fill: ${o.theme.colors.white};\n        stroke: ${o.theme.colors.grey};\n      }\n      & > ${Input}:checked:disabled ~ ${DefaultMask} g > rect {\n        fill: ${o.theme.colors.alto};\n      }\n      &:focus {\n        outline: none;\n      }\n      & > ${Input}:focus-visible ~ ${DefaultMask} {\n        outline: 1px solid ${o.theme.colors.accent};\n        outline-offset: 2px;\n      }\n    `))};const Root=styled.label.withConfig({shouldForwardProp:o=>['children','htmlFor','style'].includes(o)}).withConfig({displayName:"Checkbox__Root",componentId:"ui__sc-9s6oap-6"})([""," "," "," "," ",""],baseStyles,(o=>o.brandPresetUsed?o.disabled&&!o.onColored?PRESET.default.disabled:o.disabled&&o.onColored?PRESET.onColored.disabled:!o.error||o.success||o.onColored?o.error&&!o.success&&o.onColored?PRESET.onColored.error:!o.success||o.error||o.onColored?o.success&&!o.error&&o.onColored?PRESET.onColored.success:o.onColored?PRESET.onColored.regular:PRESET.default.regular:PRESET.default.success:PRESET.default.error:PRESET_DEFAULT.default),(o=>{const e=o.brandPresetUsed?BRAND_SIZES:DEFAULT_SIZES;return STATIC_SIZES.includes(o.size)?`font-size: ${e[o.size]}px;`:responsiveProperty('size','font-size')}),(o=>responsiveProperty('width',o.fluid&&o.width!=='auto'&&!Array.isArray(o.width)?'max-width':'width')),(o=>o.fluid?'width: 100%;':null));const Group=styled.div.withConfig({shouldForwardProp:o=>o!=='inline'}).withConfig({displayName:"Checkbox__Group",componentId:"ui__sc-9s6oap-7"})(["",""],(o=>o.inline?css(["display:flex;flex-direction:row;> ",":first-child{margin-left:0;}> ",":not(:first-child){margin-left:15px;}",""],Root,Root,screenMaxS()`
             flex-direction: column;
             > ${Root}:first-child {
               margin-top: 0;

package/components/Checkbox/style.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"style.mjs","sources":["../../../../src/components/Checkbox/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { screenMaxS } from 'mixins/screen'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport DefaultCheck from './images/check-default.svg?module'\nimport Check from './images/check.svg?module'\nimport type { StyledCheckboxProps, CheckboxStaticSize, CheckboxGroupProps, CheckboxPalette } from './types'\n\nconst DEFAULT_SIZES: Record<CheckboxStaticSize, number> = {\n extraSmall: 12,\n xs: 12,\n small: 14,\n s: 14,\n medium: 16,\n m: 16,\n large: 18,\n l: 18,\n extraLarge: 20,\n xl: 20,\n}\n\nconst BRAND_SIZES: Record<CheckboxStaticSize, number> = {\n extraSmall: 16,\n xs: 16,\n small: 20,\n s: 20,\n medium: 24,\n m: 24,\n large: 28,\n l: 28,\n extraLarge: 32,\n xl: 32,\n}\n\nconst STATIC_SIZES: CheckboxStaticSize[] = [\n 'extraSmall',\n 'xs',\n 'small',\n 's',\n 'medium',\n 'm',\n 'large',\n 'l',\n 'extraLarge',\n 'xl',\n]\n\nconst baseStyles = css<StyledCheckboxProps>`\n ${(props) => `\n &,\n & * {\n box-sizing: border-box;\n }\n position: relative;\n cursor: pointer;\n padding: ${props.background ? 12 : 0}px;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n align-items: baseline;\n isolation: isolate;\n & + & {\n margin-left: 15px;\n }\n `}\n`\n\nexport const Input = styled.input`\n position: absolute;\n opacity: 0;\n z-index: -1;\n &:focus {\n outline: none;\n }\n`\n\nexport const Background = styled.span`\n border-radius: 8px;\n border: 1px solid;\n border-color: transparent;\n overflow: hidden;\n &::before {\n content: '';\n opacity: 0;\n }\n &,\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition-property: border-color, background-color, opacity;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n`\n\nexport const DefaultMask = styled(DefaultCheck)`\n position: relative;\n top: 2px;\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n g {\n opacity: 0;\n transition: opacity 200ms ease;\n }\n`\n\nexport const BrandMask = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n border-radius: 4px;\n border: 1px solid;\n border-color: transparent;\n transition-property: border-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n`\n\nexport const CheckIcon = styled(Check)`\n width: 50%;\n opacity: 0;\n`\n\nexport const Content = styled.span`\n position: relative;\n margin-left: 10px;\n`\n\nconst template = (palette: CheckboxPalette) => `\n & > ${Content} {\n color: ${palette.fontColor};\n }\n & > ${BrandMask} {\n background-color: ${palette.bg};\n color: ${palette.color};\n border-color: ${palette.border};\n }\n & > ${Input}:checked ~ ${BrandMask} {\n border-color: transparent;\n background-color: ${palette.bgChecked};\n }\n & > ${Input}:checked ~ ${BrandMask} > ${CheckIcon} {\n opacity: 1;\n }\n & > ${Input}:disabled ~ ${Content} {\n color: ${palette.colorDisabled};\n }\n &:hover > ${BrandMask} {\n border-color: ${palette.borderHover};\n }\n &:focus {\n outline: none;\n }\n & > ${Input}:focus-visible ~ ${BrandMask} {\n outline: 1px solid ${palette.outlineFocus};\n outline-offset: 2px;\n }\n`\n\nconst templateBackground = (palette: CheckboxPalette) => `\n & > ${Background} {\n background-color: ${palette.bg};\n border-color: ${palette.border};\n }\n & > ${Input}:checked ~ ${Background} {\n background-color: ${palette.bgChecked};\n border-color: ${palette.borderChecked};\n }\n &:hover > ${Background} {\n background-color: ${palette.bgHover};\n border-color: ${palette.borderHover};\n }\n &:hover > ${Background}::before {\n background-color: ${palette.beforeBgHover};\n opacity: 1;\n }\n`\n\nconst PRESET = {\n default: {\n regular: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-basic'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['border-brand-primary'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-100'],\n borderChecked: props.theme.colors['border-brand-primary'],\n bgHover: props.theme.colors['bg-oncolor-hover'],\n borderHover: props.theme.colors['border-onmain-default-large'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n error: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-error-100'],\n border: props.theme.colors['alert-error'],\n bgChecked: props.theme.colors['alert-bg-error-100'],\n borderChecked: props.theme.colors['alert-error'],\n bgHover: props.theme.colors['alert-bg-error-100'],\n borderHover: props.theme.colors['alert-error'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n success: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-success-100'],\n border: props.theme.colors['alert-success'],\n bgChecked: props.theme.colors['alert-bg-success-100'],\n borderChecked: props.theme.colors['alert-success'],\n bgHover: props.theme.colors['alert-bg-success-100'],\n borderHover: props.theme.colors['alert-success'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n disabled: css<StyledCheckboxProps>`\n cursor: auto;\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-disabled-large'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-large'],\n borderChecked: props.theme.colors['bg-disabled-active'],\n bgHover: props.theme.colors['bg-disabled-large'],\n borderHover: props.theme.colors['border-disabled'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n },\n onColored: {\n regular: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-basic'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['border-brand-primary'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-brand-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-oncolor-primary'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['content-oncolor-primary'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-onmain-default-large'],\n bgChecked: props.theme.colors['bg-onmain-primary'],\n borderChecked: props.theme.colors['border-onmain-default-large'],\n bgHover: props.theme.colors['bg-onmain-secondary'],\n borderHover: props.theme.colors['border-onmain-default-large'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n error: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-error-100'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-100'],\n borderChecked: props.theme.colors['alert-error'],\n bgHover: props.theme.colors['alert-bg-error-100'],\n borderHover: props.theme.colors['alert-error'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n success: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-success-100'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-100'],\n borderChecked: props.theme.colors['alert-success'],\n bgHover: props.theme.colors['alert-bg-success-100'],\n borderHover: props.theme.colors['alert-success'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n disabled: css<StyledCheckboxProps>`\n cursor: auto;\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-oncolor-disabled'],\n bgChecked: props.theme.colors['bg-onmain-secondary'],\n borderChecked: props.theme.colors['border-oncolor-disabled'],\n bgHover: props.theme.colors['bg-onmain-secondary'],\n borderHover: props.theme.colors['border-oncolor-disabled'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n },\n}\n\nconst PRESET_DEFAULT = {\n default: css<StyledCheckboxProps>`\n ${(props) =>\n props.error\n ? `\n & > ${DefaultMask} > rect { \n fill: ${tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n stroke: ${props.theme.colors.pomegranate};\n } \n & > ${DefaultMask} g > rect {\n fill: ${props.theme.colors.pomegranate};\n }\n `\n : null}\n\n ${(props) => `\n color: ${props.disabled ? props.theme.colors.alto : props.theme.colors.mineShaft};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n & > ${Input}:checked ~ ${DefaultMask} g {\n opacity: 1;\n }\n & > ${Input}:disabled ~ ${DefaultMask} > rect {\n fill: ${props.theme.colors.white};\n stroke: ${props.theme.colors.grey};\n }\n & > ${Input}:checked:disabled ~ ${DefaultMask} g > rect {\n fill: ${props.theme.colors.alto};\n }\n &:focus {\n outline: none;\n }\n & > ${Input}:focus-visible ~ ${DefaultMask} {\n outline: 1px solid ${props.theme.colors.accent};\n outline-offset: 2px;\n }\n `}\n `,\n}\n\nconst extractStyles = (props: StyledCheckboxProps) => {\n if (props.brandPresetUsed) {\n if (props.disabled && !props.onColored) return PRESET.default.disabled\n if (props.disabled && props.onColored) return PRESET.onColored.disabled\n\n if (props.error && !props.success && !props.onColored) return PRESET.default.error\n if (props.error && !props.success && props.onColored) return PRESET.onColored.error\n\n if (props.success && !props.error && !props.onColored) return PRESET.default.success\n if (props.success && !props.error && props.onColored) return PRESET.onColored.success\n\n return props.onColored ? PRESET.onColored.regular : PRESET.default.regular\n }\n\n return PRESET_DEFAULT.default\n}\n\nconst extractSizes = (props: StyledCheckboxProps) => {\n const SIZES = props.brandPresetUsed ? BRAND_SIZES : DEFAULT_SIZES\n\n return STATIC_SIZES.includes(<CheckboxStaticSize>props.size)\n ? `font-size: ${SIZES[<CheckboxStaticSize>props.size]}px;`\n : responsiveProperty('size', 'font-size')\n}\n\nexport const Root = styled.label.withConfig<StyledCheckboxProps>({\n shouldForwardProp: (prop) => ['children', 'htmlFor', 'style'].includes(prop),\n})`\n ${baseStyles}\n ${extractStyles}\n ${extractSizes}\n\n ${(props) =>\n responsiveProperty(\n 'width',\n props.fluid && props.width !== 'auto' && !Array.isArray(props.width) ? 'max-width' : 'width'\n )}\n ${(props) => (props.fluid ? 'width: 100%;' : null)}\n`\n\nexport const Group = styled.div.withConfig<CheckboxGroupProps>({\n shouldForwardProp: (prop) => prop !== 'inline',\n})`\n ${(props) =>\n props.inline\n ? css`\n display: flex;\n flex-direction: row;\n > ${Root}:first-child {\n margin-left: 0;\n }\n > ${Root}:not(:first-child) {\n margin-left: 15px;\n }\n ${screenMaxS()`\n flex-direction: column;\n > ${Root}:first-child {\n margin-top: 0;\n }\n > ${Root}:not(:first-child) {\n margin-top: 15px;\n margin-left: 0;\n }\n `}\n `\n : `\n display: flex;\n flex-direction: column;\n > ${Root}:first-child {\n margin-top: 0;\n margin-left: 0;\n }\n > ${Root}:not(:first-child) {\n margin-top: 15px;\n margin-left: 0;\n }\n `}\n`\n"],"names":["DEFAULT_SIZES","extraSmall","xs","small","s","medium","m","large","l","extraLarge","xl","BRAND_SIZES","STATIC_SIZES","baseStyles","css","props","background","inline","Input","styled","input","withConfig","displayName","componentId","Background","span","DefaultMask","DefaultCheck","BrandMask","div","CheckIcon","Check","Content","template","palette","fontColor","bg","color","border","bgChecked","colorDisabled","borderHover","outlineFocus","templateBackground","borderChecked","bgHover","beforeBgHover","PRESET","default","regular","theme","colors","error","success","disabled","onColored","PRESET_DEFAULT","tinycolor","pomegranate","setAlpha","toString","alto","mineShaft","white","grey","accent","Root","label","shouldForwardProp","prop","includes","brandPresetUsed","SIZES","size","responsiveProperty","fluid","width","Array","isArray","Group","screenMaxS"],"mappings":"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"}
1	+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/Checkbox/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { screenMaxS } from 'mixins/screen'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport DefaultCheck from './images/check-default.svg?module'\nimport Check from './images/check.svg?module'\nimport type { StyledCheckboxProps, CheckboxStaticSize, CheckboxGroupProps, CheckboxPalette } from './types'\n\nconst DEFAULT_SIZES: Record<CheckboxStaticSize, number> = {\n extraSmall: 12,\n xs: 12,\n small: 14,\n s: 14,\n medium: 16,\n m: 16,\n large: 18,\n l: 18,\n extraLarge: 20,\n xl: 20,\n}\n\nconst BRAND_SIZES: Record<CheckboxStaticSize, number> = {\n extraSmall: 16,\n xs: 16,\n small: 20,\n s: 20,\n medium: 24,\n m: 24,\n large: 28,\n l: 28,\n extraLarge: 32,\n xl: 32,\n}\n\nconst STATIC_SIZES: CheckboxStaticSize[] = [\n 'extraSmall',\n 'xs',\n 'small',\n 's',\n 'medium',\n 'm',\n 'large',\n 'l',\n 'extraLarge',\n 'xl',\n]\n\nconst baseStyles = css<StyledCheckboxProps>`\n ${(props) => `\n &,\n & * {\n box-sizing: border-box;\n }\n position: relative;\n cursor: pointer;\n padding: ${props.background ? 12 : 0}px;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n align-items: baseline;\n isolation: isolate;\n & + & {\n margin-left: 15px;\n }\n `}\n`\n\nexport const Input = styled.input`\n position: absolute;\n opacity: 0;\n z-index: -1;\n &:focus {\n outline: none;\n }\n`\n\nexport const Background = styled.span`\n border-radius: 8px;\n border: 1px solid;\n border-color: transparent;\n overflow: hidden;\n &::before {\n content: '';\n opacity: 0;\n }\n &,\n &::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition-property: border-color, background-color, opacity;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n }\n`\n\nexport const DefaultMask = styled(DefaultCheck)`\n position: relative;\n top: 2px;\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n g {\n opacity: 0;\n transition: opacity 200ms ease;\n }\n`\n\nexport const BrandMask = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n border-radius: 4px;\n border: 1px solid;\n border-color: transparent;\n transition-property: border-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n`\n\nexport const CheckIcon = styled(Check)`\n width: 50%;\n opacity: 0;\n`\n\nexport const Content = styled.span`\n position: relative;\n margin-left: 10px;\n`\n\nconst template = (palette: CheckboxPalette) => `\n & > ${Content} {\n color: ${palette.fontColor};\n }\n & > ${BrandMask} {\n background-color: ${palette.bg};\n color: ${palette.color};\n border-color: ${palette.border};\n }\n & > ${Input}:checked ~ ${BrandMask} {\n border-color: transparent;\n background-color: ${palette.bgChecked};\n }\n & > ${Input}:checked ~ ${BrandMask} > ${CheckIcon} {\n opacity: 1;\n }\n & > ${Input}:disabled ~ ${Content} {\n color: ${palette.colorDisabled};\n }\n &:hover > ${BrandMask} {\n border-color: ${palette.borderHover};\n }\n &:focus {\n outline: none;\n }\n & > ${Input}:focus-visible ~ ${BrandMask} {\n outline: 1px solid ${palette.outlineFocus};\n outline-offset: 2px;\n }\n`\n\nconst templateBackground = (palette: CheckboxPalette) => `\n & > ${Background} {\n background-color: ${palette.bg};\n border-color: ${palette.border};\n }\n & > ${Input}:checked ~ ${Background} {\n background-color: ${palette.bgChecked};\n border-color: ${palette.borderChecked};\n }\n &:hover > ${Background} {\n background-color: ${palette.bgHover};\n border-color: ${palette.borderHover};\n }\n &:hover > ${Background}::before {\n background-color: ${palette.beforeBgHover};\n opacity: 1;\n }\n`\n\nconst PRESET = {\n default: {\n regular: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-basic'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['border-brand-primary'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-100'],\n borderChecked: props.theme.colors['border-brand-primary'],\n bgHover: props.theme.colors['bg-oncolor-hover'],\n borderHover: props.theme.colors['border-onmain-default-large'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n error: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-error-100'],\n border: props.theme.colors['alert-error'],\n bgChecked: props.theme.colors['alert-bg-error-100'],\n borderChecked: props.theme.colors['alert-error'],\n bgHover: props.theme.colors['alert-bg-error-100'],\n borderHover: props.theme.colors['alert-error'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n success: css<StyledCheckboxProps>`\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-success-100'],\n border: props.theme.colors['alert-success'],\n bgChecked: props.theme.colors['alert-bg-success-100'],\n borderChecked: props.theme.colors['alert-success'],\n bgHover: props.theme.colors['alert-bg-success-100'],\n borderHover: props.theme.colors['alert-success'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n disabled: css<StyledCheckboxProps>`\n cursor: auto;\n ${(props) =>\n template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-disabled-large'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-large'],\n borderChecked: props.theme.colors['bg-disabled-active'],\n bgHover: props.theme.colors['bg-disabled-large'],\n borderHover: props.theme.colors['border-disabled'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n },\n onColored: {\n regular: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-brand-primary-basic'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['border-brand-primary'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['bg-onmain-primary'],\n color: props.theme.colors['content-brand-primary'],\n border: props.theme.colors['border-onmain-default-small'],\n bgChecked: props.theme.colors['bg-oncolor-primary'],\n borderHover: props.theme.colors['border-brand-primary'],\n outlineFocus: props.theme.colors['content-oncolor-primary'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-onmain-default-large'],\n bgChecked: props.theme.colors['bg-onmain-primary'],\n borderChecked: props.theme.colors['border-onmain-default-large'],\n bgHover: props.theme.colors['bg-onmain-secondary'],\n borderHover: props.theme.colors['border-onmain-default-large'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n error: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['alert-bg-error-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-500'],\n borderHover: props.theme.colors['alert-error'],\n outlineFocus: props.theme.colors['alert-error'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-error-100'],\n border: props.theme.colors['alert-bg-error-500'],\n bgChecked: props.theme.colors['alert-bg-error-100'],\n borderChecked: props.theme.colors['alert-error'],\n bgHover: props.theme.colors['alert-bg-error-100'],\n borderHover: props.theme.colors['alert-error'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n success: css<StyledCheckboxProps>`\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['alert-bg-success-100'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-500'],\n borderHover: props.theme.colors['alert-success'],\n outlineFocus: props.theme.colors['alert-success'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['alert-bg-success-100'],\n border: props.theme.colors['alert-bg-success-500'],\n bgChecked: props.theme.colors['alert-bg-success-100'],\n borderChecked: props.theme.colors['alert-success'],\n bgHover: props.theme.colors['alert-bg-success-100'],\n borderHover: props.theme.colors['alert-success'],\n beforeBgHover: props.theme.colors['bg-oncolor-hover'],\n })\n : null}\n `,\n disabled: css<StyledCheckboxProps>`\n cursor: auto;\n ${(props) =>\n props.background\n ? template({\n fontColor: props.theme.colors['content-onmain-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-disabled'],\n })\n : template({\n fontColor: props.theme.colors['content-oncolor-primary'],\n bg: props.theme.colors['bg-disabled-large'],\n color: props.theme.colors['content-oncolor-primary'],\n border: props.theme.colors['border-disabled'],\n bgChecked: props.theme.colors['bg-disabled-active'],\n borderHover: props.theme.colors['border-disabled'],\n outlineFocus: props.theme.colors['border-disabled'],\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n })}\n ${(props) =>\n props.background\n ? templateBackground({\n bg: props.theme.colors['bg-onmain-secondary'],\n border: props.theme.colors['border-oncolor-disabled'],\n bgChecked: props.theme.colors['bg-onmain-secondary'],\n borderChecked: props.theme.colors['border-oncolor-disabled'],\n bgHover: props.theme.colors['bg-onmain-secondary'],\n borderHover: props.theme.colors['border-oncolor-disabled'],\n beforeBgHover: 'transparent',\n })\n : null}\n `,\n },\n}\n\nconst PRESET_DEFAULT = {\n default: css<StyledCheckboxProps>`\n ${(props) =>\n props.error\n ? `\n & > ${DefaultMask} > rect { \n fill: ${tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n stroke: ${props.theme.colors.pomegranate};\n } \n & > ${DefaultMask} g > rect {\n fill: ${props.theme.colors.pomegranate};\n }\n `\n : null}\n\n ${(props) => `\n color: ${props.disabled ? props.theme.colors.alto : props.theme.colors.mineShaft};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n & > ${Input}:checked ~ ${DefaultMask} g {\n opacity: 1;\n }\n & > ${Input}:disabled ~ ${DefaultMask} > rect {\n fill: ${props.theme.colors.white};\n stroke: ${props.theme.colors.grey};\n }\n & > ${Input}:checked:disabled ~ ${DefaultMask} g > rect {\n fill: ${props.theme.colors.alto};\n }\n &:focus {\n outline: none;\n }\n & > ${Input}:focus-visible ~ ${DefaultMask} {\n outline: 1px solid ${props.theme.colors.accent};\n outline-offset: 2px;\n }\n `}\n `,\n}\n\nconst extractStyles = (props: StyledCheckboxProps) => {\n if (props.brandPresetUsed) {\n if (props.disabled && !props.onColored) return PRESET.default.disabled\n if (props.disabled && props.onColored) return PRESET.onColored.disabled\n\n if (props.error && !props.success && !props.onColored) return PRESET.default.error\n if (props.error && !props.success && props.onColored) return PRESET.onColored.error\n\n if (props.success && !props.error && !props.onColored) return PRESET.default.success\n if (props.success && !props.error && props.onColored) return PRESET.onColored.success\n\n return props.onColored ? PRESET.onColored.regular : PRESET.default.regular\n }\n\n return PRESET_DEFAULT.default\n}\n\nconst extractSizes = (props: StyledCheckboxProps) => {\n const SIZES = props.brandPresetUsed ? BRAND_SIZES : DEFAULT_SIZES\n\n return STATIC_SIZES.includes(<CheckboxStaticSize>props.size)\n ? `font-size: ${SIZES[<CheckboxStaticSize>props.size]}px;`\n : responsiveProperty('size', 'font-size')\n}\n\nexport const Root = styled.label.withConfig<StyledCheckboxProps>({\n shouldForwardProp: (prop) => ['children', 'htmlFor', 'style'].includes(prop),\n})`\n ${baseStyles}\n ${extractStyles}\n ${extractSizes}\n\n ${(props) =>\n responsiveProperty(\n 'width',\n props.fluid && props.width !== 'auto' && !Array.isArray(props.width) ? 'max-width' : 'width'\n )}\n ${(props) => (props.fluid ? 'width: 100%;' : null)}\n`\n\nexport const Group = styled.div.withConfig<CheckboxGroupProps>({\n shouldForwardProp: (prop) => prop !== 'inline',\n})`\n ${(props) =>\n props.inline\n ? css`\n display: flex;\n flex-direction: row;\n > ${Root}:first-child {\n margin-left: 0;\n }\n > ${Root}:not(:first-child) {\n margin-left: 15px;\n }\n ${screenMaxS()`\n flex-direction: column;\n > ${Root}:first-child {\n margin-top: 0;\n }\n > ${Root}:not(:first-child) {\n margin-top: 15px;\n margin-left: 0;\n }\n `}\n `\n : `\n display: flex;\n flex-direction: column;\n > ${Root}:first-child {\n margin-top: 0;\n margin-left: 0;\n }\n > ${Root}:not(:first-child) {\n margin-top: 15px;\n margin-left: 0;\n }\n `}\n`\n"],"names":["DEFAULT_SIZES","extraSmall","xs","small","s","medium","m","large","l","extraLarge","xl","BRAND_SIZES","STATIC_SIZES","baseStyles","css","props","background","inline","Input","styled","input","withConfig","displayName","componentId","Background","span","DefaultMask","DefaultCheck","BrandMask","div","CheckIcon","Check","Content","template","palette","fontColor","bg","color","border","bgChecked","colorDisabled","borderHover","outlineFocus","templateBackground","borderChecked","bgHover","beforeBgHover","PRESET","default","regular","theme","colors","error","success","disabled","onColored","PRESET_DEFAULT","tinycolor","pomegranate","setAlpha","toString","alto","mineShaft","white","grey","accent","Root","label","shouldForwardProp","prop","includes","brandPresetUsed","SIZES","size","responsiveProperty","fluid","width","Array","isArray","Group","screenMaxS"],"mappings":"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"}

package/components/Chip/Chip.js CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var constants=require('./constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var Avatar=require('../Avatar/Avatar.js');var Text=require('../Text/Text.js');var Indicator=require('../Indicator/Indicator.js');var IconButton=require('../IconButton/IconButton.js');const Chip=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:t="m",primary:s=!0,textProps:i={},captionProps:n={},iconProps:o={},avatarProps:a={},indicatorProps:c={},discardButtonProps:p={},sizeXXS:d,sizeXS:u,sizeS:I,sizeM:S,sizeL:l,sizeXL:q,children:x,text:$,caption:z,icon:h,...v}=e;let j='div';let y;v.onClick&&(j='button'),p.onClick&&(j='div'),j==='button'&&(y='button'),v.type&&(y=v.type);const A={size:t,sizeXXS:d,sizeXS:u,sizeS:I,sizeM:S,sizeL:l,sizeXL:q};const[C,P]=Array.isArray(h)?h:[h];const T={as:'span',appearance:'body',size:'inherit',color:'inherit',lineHeight:z?1.3:1};const _={as:'span',appearance:'body',size:.75,sizeUnits:'em',color:'inherit',lineHeight:1};const g={icon:'close',disabled:v.disabled};return require$$0.jsx(style.Root,{...v,...A,as:j,type:y,primary:s,ref:r,children:typeof x=='function'?x({textProps:T,captionProps:_,discardButtonProps:g}):require$$0.jsxs(require$$0.Fragment,{children:[C&&require$$0.jsx(Icon.Icon,{preset:"brand",name:typeof C=='string'?C:void 0,icon:typeof C!='string'?C:void 0,sizes:constants.SIZES_ICON,...A,...o}),(a.src||a.text)&&require$$0.jsx(Avatar.Avatar,{preset:"brand",sizes:a.square?constants.SIZES_CHIP_AVATAR_SQUARE:constants.SIZES_CHIP_AVATAR,...A,...a}),require$$0.jsxs(style.Content,{children:[require$$0.jsx(Text.Text,{...T,...i,children:x??$}),z&&require$$0.jsx(Text.Text,{..._,...n,children:z})]}),(c.children||c.text)&&require$$0.jsx(Indicator.Indicator,{sizes:constants.SIZES_CHIP_INDICATOR,marginRight:3,...A,...c}),P&&require$$0.jsx(Icon.Icon,{preset:"brand",name:typeof P=='string'?P:void 0,icon:typeof P!='string'?P:void 0,sizes:constants.SIZES_ICON,...A,...o}),p.onClick&&require$$0.jsx(IconButton.IconButton,{sizes:p.square?constants.SIZES_DISCARD_BUTTON_SQUARE:constants.SIZES_DISCARD_BUTTON,...A,...g,...p})]})})})),{displayName:'Chip',sizes:constants.SIZES});exports.Chip=Chip;
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var constants=require('./constants.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var Avatar=require('../Avatar/Avatar.js');var Text=require('../Text/Text.js');var Indicator=require('../Indicator/Indicator.js');var IconButton=require('../IconButton/IconButton.js');const Chip=withMergedProps.withMergedProps(React.forwardRef(((t,e)=>{const{size:s="m",primary:i=!0,textProps:n={},captionProps:r={},iconProps:o={},avatarProps:a={},indicatorProps:c={},discardButtonProps:p={},sizeXXS:d,sizeXS:u,sizeS:x,sizeM:I,sizeL:j,sizeXL:S,children:l,text:R,caption:z,icon:h,...m}=t;let v='div';let y;m.onClick&&(v='button'),p.onClick&&(v='div'),v==='button'&&(y='button'),m.type&&(y=m.type);const A={size:s,sizeXXS:d,sizeXS:u,sizeS:x,sizeM:I,sizeL:j,sizeXL:S};const[C,P]=Array.isArray(h)?h:[h];const T={as:'span',appearance:'body',size:'inherit',color:'inherit',lineHeight:z?1.3:1};const _={as:'span',appearance:'body',size:.75,sizeUnits:'em',color:'inherit',lineHeight:1};const g={icon:'close',disabled:m.disabled};return jsxRuntime.jsx(style.Root,{...m,...A,as:v,type:y,primary:i,ref:e,children:typeof l=='function'?l({textProps:T,captionProps:_,discardButtonProps:g}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[C&&jsxRuntime.jsx(Icon.Icon,{preset:"brand",name:typeof C=='string'?C:void 0,icon:typeof C!='string'?C:void 0,sizes:constants.SIZES_ICON,...A,...o}),(a.src||a.text)&&jsxRuntime.jsx(Avatar.Avatar,{preset:"brand",sizes:a.square?constants.SIZES_CHIP_AVATAR_SQUARE:constants.SIZES_CHIP_AVATAR,...A,...a}),jsxRuntime.jsxs(style.Content,{children:[jsxRuntime.jsx(Text.Text,{...T,...n,children:l??R}),z&&jsxRuntime.jsx(Text.Text,{..._,...r,children:z})]}),(c.children||c.text)&&jsxRuntime.jsx(Indicator.Indicator,{sizes:constants.SIZES_CHIP_INDICATOR,marginRight:3,...A,...c}),P&&jsxRuntime.jsx(Icon.Icon,{preset:"brand",name:typeof P=='string'?P:void 0,icon:typeof P!='string'?P:void 0,sizes:constants.SIZES_ICON,...A,...o}),p.onClick&&jsxRuntime.jsx(IconButton.IconButton,{sizes:p.square?constants.SIZES_DISCARD_BUTTON_SQUARE:constants.SIZES_DISCARD_BUTTON,...A,...g,...p})]})})})),{displayName:'Chip',sizes:constants.SIZES});exports.Chip=Chip;
 //# sourceMappingURL=Chip.js.map

package/components/Chip/style.js CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var tinycolor=require('../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.js');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardChipProp=style.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:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-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.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString():tinycolor.default(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:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.theme.colors.transparent,colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor.default(o.theme.colors['bg-onmain-contrast']).lighten(11).toString():tinycolor.default(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:styled.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.default(o.theme.colors['bg-brand-primary-100']).lighten(2).toString():tinycolor.default(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:styled.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.default(o.theme.colors['bg-onmain-secondary']).lighten(11).toString():tinycolor.default(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:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors.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.default(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:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors.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.default(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:styled.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.default(o.theme.colors['bg-oncolor-primary']).darken(11).toString():tinycolor.default(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:styled.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.default(o.theme.colors['bg-oncolor-primary']).darken(11).toString():tinycolor.default(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:styled.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.default(o.theme.colors['bg-oncolor-secondary']).setAlpha(.5).toString():tinycolor.default(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:styled.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.default(o.theme.colors['bg-oncolor-secondary']).setAlpha(.5).toString():tinycolor.default(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:styled.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.default(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:styled.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.default(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__default.default.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__default.default.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.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);exports.Content=Content,exports.Root=Root;
+'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 focus=require('../../mixins/focus.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardChipProp=style.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:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors['bg-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__default.default(o.theme.colors['bg-brand-primary-500']).lighten(5).toString():tinycolor__default.default(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:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.theme.colors.transparent,colorHover:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.active?tinycolor__default.default(o.theme.colors['bg-onmain-contrast']).lighten(11).toString():tinycolor__default.default(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:styled.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__default.default(o.theme.colors['bg-brand-primary-100']).lighten(2).toString():tinycolor__default.default(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:styled.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__default.default(o.theme.colors['bg-onmain-secondary']).lighten(11).toString():tinycolor__default.default(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:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-brand-primary-500']:o.theme.colors.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__default.default(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:styled.css(["",""],(o=>template({color:o.active?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.theme.colors['bg-onmain-contrast']:o.theme.colors.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__default.default(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:styled.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__default.default(o.theme.colors['bg-oncolor-primary']).darken(11).toString():tinycolor__default.default(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:styled.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__default.default(o.theme.colors['bg-oncolor-primary']).darken(11).toString():tinycolor__default.default(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:styled.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__default.default(o.theme.colors['bg-oncolor-secondary']).setAlpha(.5).toString():tinycolor__default.default(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:styled.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__default.default(o.theme.colors['bg-oncolor-secondary']).setAlpha(.5).toString():tinycolor__default.default(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:styled.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__default.default(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:styled.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__default.default(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__default.default.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__default.default.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.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);exports.Content=Content,exports.Root=Root;
 //# sourceMappingURL=style.js.map

package/components/Chip/style.js.map CHANGED Viewed

	@@ -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 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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"}

package/components/Chip/style.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import styled,{css}from'styled-components';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';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};
+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};
 //# sourceMappingURL=style.mjs.map