@foxford/ui 2.89.0-beta-fed2f07-20251216 → 2.89.0-beta-116bdf3-20251218

package/components/Checkbox/images/check.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"check.svg.js","sources":["../../../../../src/components/Checkbox/images/check.svg?module"],"sourcesContent":["var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nconst SvgCheck = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n  xmlns: \"http://www.w3.org/2000/svg\",\n  fill: \"none\",\n  viewBox: \"0 0 12 9\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n  stroke: \"currentcolor\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\",\n  strokeWidth: 1.5,\n  d: \"M10.5 1.5 4.312 8 1.5 5.045\"\n})));\nexport default SvgCheck;"],"names":["_path","_extends","Object","assign","bind","n","e","arguments","length","t","r","hasOwnProperty","call","apply","props","React","createElement","xmlns","fill","viewBox","stroke","strokeLinecap","strokeLinejoin","strokeWidth","d"],"mappings":"qZAAA,IAAIA,MACJ,SAASC,WAAa,OAAOA,SAAWC,OAAOC,OAASD,OAAOC,OAAOC,OAAS,SAAUC,GAAK,IAAK,IAAIC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAAE,IAAIG,EAAIF,UAAUD,GAAI,IAAK,IAAII,KAAKD,GAAG,CAAG,GAAEE,eAAeC,KAAKH,EAAGC,KAAOL,EAAEK,GAAKD,EAAEC,IAAO,OAAOL,CAAE,EAAIJ,SAASY,MAAM,KAAMN,UAAa,iBAEnQO,GAAsBC,iBAAMC,cAAc,MAAOf,SAAS,CACzEgB,MAAO,6BACPC,KAAM,OACNC,QAAS,YACRL,GAAQd,QAAUA,MAAqBe,iBAAMC,cAAc,OAAQ,CACpEI,OAAQ,eACRC,cAAe,QACfC,eAAgB,QAChBC,YAAa,IACbC,EAAG"}

package/components/Checkbox/images/check.svg.mjs

@@ -0,0 +1,2 @@
+import*as React from'react';var _path;function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}const SvgCheck=e=>React.createElement("svg",_extends({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 12 9"},e),_path||(_path=React.createElement("path",{stroke:"currentcolor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M10.5 1.5 4.312 8 1.5 5.045"})));export{SvgCheck as default};
+//# sourceMappingURL=check.svg.mjs.map

package/components/Checkbox/images/check.svg.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"check.svg.mjs","sources":["../../../../../src/components/Checkbox/images/check.svg?module"],"sourcesContent":["var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nconst SvgCheck = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n  xmlns: \"http://www.w3.org/2000/svg\",\n  fill: \"none\",\n  viewBox: \"0 0 12 9\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n  stroke: \"currentcolor\",\n  strokeLinecap: \"round\",\n  strokeLinejoin: \"round\",\n  strokeWidth: 1.5,\n  d: \"M10.5 1.5 4.312 8 1.5 5.045\"\n})));\nexport default SvgCheck;"],"names":["_path","_extends","Object","assign","bind","n","e","arguments","length","t","r","hasOwnProperty","call","apply","SvgCheck","props","React","createElement","xmlns","fill","viewBox","stroke","strokeLinecap","strokeLinejoin","strokeWidth","d"],"mappings":"4BAAA,IAAIA,MACJ,SAASC,WAAa,OAAOA,SAAWC,OAAOC,OAASD,OAAOC,OAAOC,OAAS,SAAUC,GAAK,IAAK,IAAIC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAAE,IAAIG,EAAIF,UAAUD,GAAI,IAAK,IAAII,KAAKD,GAAG,CAAG,GAAEE,eAAeC,KAAKH,EAAGC,KAAOL,EAAEK,GAAKD,EAAEC,IAAO,OAAOL,CAAE,EAAIJ,SAASY,MAAM,KAAMN,UAAa,CAE/Q,MAACO,SAAWC,GAAsBC,MAAMC,cAAc,MAAOhB,SAAS,CACzEiB,MAAO,6BACPC,KAAM,OACNC,QAAS,YACRL,GAAQf,QAAUA,MAAqBgB,MAAMC,cAAc,OAAQ,CACpEI,OAAQ,eACRC,cAAe,QACfC,eAAgB,QAChBC,YAAa,IACbC,EAAG"}

package/components/Checkbox/style.js

@@ -1,4 +1,4 @@
-'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var screen=require('../../mixins/screen.js');var responsiveProperty=require('../../mixins/responsive-property.js');var hover=require('../../mixins/hover.js');var checkDefault=require('./images/checkDefault.svg.js');var index=require('../../icon-pack/src/icons/CheckFill/index.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);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=styled.css(["",""],(e=>`\n    &,\n    & * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    cursor: pointer;\n    padding: ${e.background?12:0}px;\n    display: ${e.inline?'inline-flex':'flex'};\n    align-items: baseline;\n    isolation: isolate;\n    & + & {\n      margin-left: 15px;\n    }\n  `));const Input=styled__default.default.input.withConfig({displayName:"Checkbox__Input",componentId:"ui__sc-9s6oap-0"})(["position:absolute;opacity:0;z-index:-1;&:focus{outline:none;}"]);const Background=styled__default.default.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__default.default(checkDefault.default).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__default.default.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__default.default(index.CheckFill).withConfig({displayName:"Checkbox__CheckIcon",componentId:"ui__sc-9s6oap-4"})(["width:50%;opacity:0;"]);const Content=styled__default.default.span.withConfig({displayName:"Checkbox__Content",componentId:"ui__sc-9s6oap-5"})(["position:relative;margin-left:10px;"]);const template=e=>`\n  & > ${Content} {\n    color: ${e.fontColor};\n  }\n  & > ${BrandMask} {\n    background-color: ${e.bg};\n    color: ${e.color};\n    border-color: ${e.border};\n  }\n  & > ${Input}:checked ~ ${BrandMask} {\n    border-color: transparent;\n    background-color: ${e.bgChecked};\n  }\n  & > ${Input}:checked ~ ${BrandMask} > ${CheckIcon} {\n    opacity: 1;\n  }\n  & > ${Input}:disabled ~ ${Content} {\n    color: ${e.colorDisabled};\n  }\n  ${hover.hover(`\n      border-color: ${e.borderHover};\n    `,`&:hover > ${BrandMask}`)}\n  &:focus {\n    outline: none;\n  }\n  & > ${Input}:focus-visible ~ ${BrandMask} {\n    outline: 1px solid ${e.outlineFocus};\n    outline-offset: 2px;\n  }\n`;const templateBackground=e=>`\n  & > ${Background} {\n    background-color: ${e.bg};\n    border-color: ${e.border};\n  }\n  & > ${Input}:checked ~ ${Background} {\n    background-color: ${e.bgChecked};\n    border-color: ${e.borderChecked};\n  }\n  ${hover.hover(`\n      background-color: ${e.bgHover};\n      border-color: ${e.borderHover};\n      &::before {\n        background-color: ${e.beforeBgHover};\n        opacity: 1;\n      }\n    `,`&:hover > ${Background}`)}\n`;const PRESET={default:{regular:styled.css([""," ",""],(e=>template({fontColor:e.theme.colors['content-onmain-primary'],bg:e.theme.colors['bg-onmain-primary'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['border-onmain-default-small'],bgChecked:e.theme.colors['bg-brand-primary-basic'],borderHover:e.theme.colors['border-brand-primary'],outlineFocus:e.theme.colors['border-brand-primary'],colorDisabled:e.theme.colors['content-disabled']})),(e=>e.background?templateBackground({bg:e.theme.colors['bg-onmain-secondary'],border:e.theme.colors['border-onmain-default-small'],bgChecked:e.theme.colors['bg-brand-primary-100'],borderChecked:e.theme.colors['border-brand-primary'],bgHover:e.theme.colors['bg-oncolor-hover'],borderHover:e.theme.colors['border-onmain-default-large'],beforeBgHover:'transparent'}):null)),error:styled.css([""," ",""],(e=>template({fontColor:e.theme.colors['content-onmain-primary'],bg:e.theme.colors['alert-bg-error-100'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['alert-bg-error-500'],bgChecked:e.theme.colors['alert-bg-error-500'],borderHover:e.theme.colors['alert-error'],outlineFocus:e.theme.colors['alert-error'],colorDisabled:e.theme.colors['content-disabled']})),(e=>e.background?templateBackground({bg:e.theme.colors['alert-bg-error-100'],border:e.theme.colors['alert-error'],bgChecked:e.theme.colors['alert-bg-error-100'],borderChecked:e.theme.colors['alert-error'],bgHover:e.theme.colors['alert-bg-error-100'],borderHover:e.theme.colors['alert-error'],beforeBgHover:'transparent'}):null)),success:styled.css([""," ",""],(e=>template({fontColor:e.theme.colors['content-onmain-primary'],bg:e.theme.colors['alert-bg-success-100'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['alert-bg-success-500'],bgChecked:e.theme.colors['alert-bg-success-500'],borderHover:e.theme.colors['alert-success'],outlineFocus:e.theme.colors['alert-success'],colorDisabled:e.theme.colors['content-disabled']})),(e=>e.background?templateBackground({bg:e.theme.colors['alert-bg-success-100'],border:e.theme.colors['alert-success'],bgChecked:e.theme.colors['alert-bg-success-100'],borderChecked:e.theme.colors['alert-success'],bgHover:e.theme.colors['alert-bg-success-100'],borderHover:e.theme.colors['alert-success'],beforeBgHover:'transparent'}):null)),disabled:styled.css(["cursor:auto;"," ",""],(e=>template({fontColor:e.theme.colors['content-onmain-primary'],bg:e.theme.colors['bg-disabled-large'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['border-disabled'],bgChecked:e.theme.colors['bg-disabled-active'],borderHover:e.theme.colors['border-disabled'],outlineFocus:e.theme.colors['border-disabled'],colorDisabled:e.theme.colors['content-disabled']})),(e=>e.background?templateBackground({bg:e.theme.colors['bg-disabled-large'],border:e.theme.colors['border-disabled'],bgChecked:e.theme.colors['bg-disabled-large'],borderChecked:e.theme.colors['bg-disabled-active'],bgHover:e.theme.colors['bg-disabled-large'],borderHover:e.theme.colors['border-disabled'],beforeBgHover:'transparent'}):null))},onColored:{regular:styled.css([""," ",""],(e=>template(e.background?{fontColor:e.theme.colors['content-onmain-primary'],bg:e.theme.colors['bg-onmain-primary'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['border-onmain-default-small'],bgChecked:e.theme.colors['bg-brand-primary-basic'],borderHover:e.theme.colors['border-brand-primary'],outlineFocus:e.theme.colors['border-brand-primary'],colorDisabled:e.theme.colors['content-oncolor-disabled']}:{fontColor:e.theme.colors['content-oncolor-primary'],bg:e.theme.colors['bg-onmain-primary'],color:e.theme.colors['content-brand-primary'],border:e.theme.colors['border-onmain-default-small'],bgChecked:e.theme.colors['bg-oncolor-primary'],borderHover:e.theme.colors['border-brand-primary'],outlineFocus:e.theme.colors['content-oncolor-primary'],colorDisabled:e.theme.colors['content-oncolor-disabled']})),(e=>e.background?templateBackground({bg:e.theme.colors['bg-onmain-secondary'],border:e.theme.colors['border-onmain-default-large'],bgChecked:e.theme.colors['bg-onmain-primary'],borderChecked:e.theme.colors['border-onmain-default-large'],bgHover:e.theme.colors['bg-onmain-secondary'],borderHover:e.theme.colors['border-onmain-default-large'],beforeBgHover:e.theme.colors['bg-oncolor-hover']}):null)),error:styled.css([""," ",""],(e=>template(e.background?{fontColor:e.theme.colors['content-onmain-primary'],bg:e.theme.colors['alert-bg-error-100'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['alert-bg-error-500'],bgChecked:e.theme.colors['alert-bg-error-500'],borderHover:e.theme.colors['alert-error'],outlineFocus:e.theme.colors['alert-error'],colorDisabled:e.theme.colors['content-oncolor-disabled']}:{fontColor:e.theme.colors['content-oncolor-primary'],bg:e.theme.colors['alert-bg-error-100'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['alert-bg-error-500'],bgChecked:e.theme.colors['alert-bg-error-500'],borderHover:e.theme.colors['alert-error'],outlineFocus:e.theme.colors['alert-error'],colorDisabled:e.theme.colors['content-oncolor-disabled']})),(e=>e.background?templateBackground({bg:e.theme.colors['alert-bg-error-100'],border:e.theme.colors['alert-bg-error-500'],bgChecked:e.theme.colors['alert-bg-error-100'],borderChecked:e.theme.colors['alert-error'],bgHover:e.theme.colors['alert-bg-error-100'],borderHover:e.theme.colors['alert-error'],beforeBgHover:e.theme.colors['bg-oncolor-hover']}):null)),success:styled.css([""," ",""],(e=>template(e.background?{fontColor:e.theme.colors['content-onmain-primary'],bg:e.theme.colors['alert-bg-success-100'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['alert-bg-success-500'],bgChecked:e.theme.colors['alert-bg-success-500'],borderHover:e.theme.colors['alert-success'],outlineFocus:e.theme.colors['alert-success'],colorDisabled:e.theme.colors['content-oncolor-disabled']}:{fontColor:e.theme.colors['content-oncolor-primary'],bg:e.theme.colors['alert-bg-success-100'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['alert-bg-success-500'],bgChecked:e.theme.colors['alert-bg-success-500'],borderHover:e.theme.colors['alert-success'],outlineFocus:e.theme.colors['alert-success'],colorDisabled:e.theme.colors['content-oncolor-disabled']})),(e=>e.background?templateBackground({bg:e.theme.colors['alert-bg-success-100'],border:e.theme.colors['alert-bg-success-500'],bgChecked:e.theme.colors['alert-bg-success-100'],borderChecked:e.theme.colors['alert-success'],bgHover:e.theme.colors['alert-bg-success-100'],borderHover:e.theme.colors['alert-success'],beforeBgHover:e.theme.colors['bg-oncolor-hover']}):null)),disabled:styled.css(["cursor:auto;"," ",""],(e=>template(e.background?{fontColor:e.theme.colors['content-onmain-primary'],bg:e.theme.colors['bg-disabled-large'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['border-disabled'],bgChecked:e.theme.colors['bg-disabled-active'],borderHover:e.theme.colors['border-disabled'],outlineFocus:e.theme.colors['border-disabled'],colorDisabled:e.theme.colors['content-disabled']}:{fontColor:e.theme.colors['content-oncolor-primary'],bg:e.theme.colors['bg-disabled-large'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['border-disabled'],bgChecked:e.theme.colors['bg-disabled-active'],borderHover:e.theme.colors['border-disabled'],outlineFocus:e.theme.colors['border-disabled'],colorDisabled:e.theme.colors['content-oncolor-disabled']})),(e=>e.background?templateBackground({bg:e.theme.colors['bg-onmain-secondary'],border:e.theme.colors['border-oncolor-disabled'],bgChecked:e.theme.colors['bg-onmain-secondary'],borderChecked:e.theme.colors['border-oncolor-disabled'],bgHover:e.theme.colors['bg-onmain-secondary'],borderHover:e.theme.colors['border-oncolor-disabled'],beforeBgHover:'transparent'}):null))}};const PRESET_DEFAULT={default:styled.css([""," ",""],(e=>e.error?`\n          & > ${DefaultMask} > rect { \n            fill: ${tinycolor__default.default(e.theme.colors.pomegranate).setAlpha(.1).toString()};\n            stroke: ${e.theme.colors.pomegranate};\n          }  \n          & > ${DefaultMask} g > rect {\n            fill: ${e.theme.colors.pomegranate};\n          }\n        `:null),(e=>`\n      color: ${e.disabled?e.theme.colors.alto:e.theme.colors.mineShaft};\n      cursor: ${e.disabled?'not-allowed':'pointer'};\n\n      & > ${Input}:checked ~ ${DefaultMask} g {\n        opacity: 1;\n      }\n      & > ${Input}:disabled ~ ${DefaultMask} > rect {\n        fill: ${e.theme.colors.white};\n        stroke: ${e.theme.colors.grey};\n      }\n      & > ${Input}:checked:disabled ~ ${DefaultMask} g > rect {\n        fill: ${e.theme.colors.alto};\n      }\n      &:focus {\n        outline: none;\n      }\n      & > ${Input}:focus-visible ~ ${DefaultMask} {\n        outline: 1px solid ${e.theme.colors.accent};\n        outline-offset: 2px;\n      }\n    `))};const Root=styled__default.default.label.withConfig({shouldForwardProp:e=>['children','htmlFor','style'].includes(e)}).withConfig({displayName:"Checkbox__Root",componentId:"ui__sc-9s6oap-6"})([""," "," "," "," ",""],baseStyles,(e=>e.brandPresetUsed?e.disabled&&!e.onColored?PRESET.default.disabled:e.disabled&&e.onColored?PRESET.onColored.disabled:!e.error||e.success||e.onColored?e.error&&!e.success&&e.onColored?PRESET.onColored.error:!e.success||e.error||e.onColored?e.success&&!e.error&&e.onColored?PRESET.onColored.success:e.onColored?PRESET.onColored.regular:PRESET.default.regular:PRESET.default.success:PRESET.default.error:PRESET_DEFAULT.default),(e=>{const o=e.brandPresetUsed?BRAND_SIZES:DEFAULT_SIZES;return STATIC_SIZES.includes(e.size)?`font-size: ${o[e.size]}px;`:responsiveProperty.responsiveProperty('size','font-size')}),(e=>responsiveProperty.responsiveProperty('width',e.fluid&&e.width!=='auto'&&!Array.isArray(e.width)?'max-width':'width')),(e=>e.fluid?'width: 100%;':null));const Group=styled__default.default.div.withConfig({shouldForwardProp:e=>e!=='inline'}).withConfig({displayName:"Checkbox__Group",componentId:"ui__sc-9s6oap-7"})(["",""],(e=>e.inline?styled.css(["display:flex;flex-direction:row;> ",":first-child{margin-left:0;}> ",":not(:first-child){margin-left:15px;}",""],Root,Root,screen.screenMaxS()`
+'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var screen=require('../../mixins/screen.js');var responsiveProperty=require('../../mixins/responsive-property.js');var hover=require('../../mixins/hover.js');var checkDefault=require('./images/check-default.svg.js');var check=require('./images/check.svg.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);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=styled.css(["",""],(e=>`\n    &,\n    & * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    cursor: pointer;\n    padding: ${e.background?12:0}px;\n    display: ${e.inline?'inline-flex':'flex'};\n    align-items: baseline;\n    isolation: isolate;\n    & + & {\n      margin-left: 15px;\n    }\n  `));const Input=styled__default.default.input.withConfig({displayName:"Checkbox__Input",componentId:"ui__sc-9s6oap-0"})(["position:absolute;opacity:0;z-index:-1;&:focus{outline:none;}"]);const Background=styled__default.default.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__default.default(checkDefault.default).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__default.default.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__default.default(check.default).withConfig({displayName:"Checkbox__CheckIcon",componentId:"ui__sc-9s6oap-4"})(["width:50%;opacity:0;"]);const Content=styled__default.default.span.withConfig({displayName:"Checkbox__Content",componentId:"ui__sc-9s6oap-5"})(["position:relative;margin-left:10px;"]);const template=e=>`\n  & > ${Content} {\n    color: ${e.fontColor};\n  }\n  & > ${BrandMask} {\n    background-color: ${e.bg};\n    color: ${e.color};\n    border-color: ${e.border};\n  }\n  & > ${Input}:checked ~ ${BrandMask} {\n    border-color: transparent;\n    background-color: ${e.bgChecked};\n  }\n  & > ${Input}:checked ~ ${BrandMask} > ${CheckIcon} {\n    opacity: 1;\n  }\n  & > ${Input}:disabled ~ ${Content} {\n    color: ${e.colorDisabled};\n  }\n  ${hover.hover(`\n      border-color: ${e.borderHover};\n    `,`&:hover > ${BrandMask}`)}\n  &:focus {\n    outline: none;\n  }\n  & > ${Input}:focus-visible ~ ${BrandMask} {\n    outline: 1px solid ${e.outlineFocus};\n    outline-offset: 2px;\n  }\n`;const templateBackground=e=>`\n  & > ${Background} {\n    background-color: ${e.bg};\n    border-color: ${e.border};\n  }\n  & > ${Input}:checked ~ ${Background} {\n    background-color: ${e.bgChecked};\n    border-color: ${e.borderChecked};\n  }\n  ${hover.hover(`\n      background-color: ${e.bgHover};\n      border-color: ${e.borderHover};\n      &::before {\n        background-color: ${e.beforeBgHover};\n        opacity: 1;\n      }\n    `,`&:hover > ${Background}`)}\n`;const PRESET={default:{regular:styled.css([""," ",""],(e=>template({fontColor:e.theme.colors['content-onmain-primary'],bg:e.theme.colors['bg-onmain-primary'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['border-onmain-default-small'],bgChecked:e.theme.colors['bg-brand-primary-basic'],borderHover:e.theme.colors['border-brand-primary'],outlineFocus:e.theme.colors['border-brand-primary'],colorDisabled:e.theme.colors['content-disabled']})),(e=>e.background?templateBackground({bg:e.theme.colors['bg-onmain-secondary'],border:e.theme.colors['border-onmain-default-small'],bgChecked:e.theme.colors['bg-brand-primary-100'],borderChecked:e.theme.colors['border-brand-primary'],bgHover:e.theme.colors['bg-oncolor-hover'],borderHover:e.theme.colors['border-onmain-default-large'],beforeBgHover:'transparent'}):null)),error:styled.css([""," ",""],(e=>template({fontColor:e.theme.colors['content-onmain-primary'],bg:e.theme.colors['alert-bg-error-100'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['alert-bg-error-500'],bgChecked:e.theme.colors['alert-bg-error-500'],borderHover:e.theme.colors['alert-error'],outlineFocus:e.theme.colors['alert-error'],colorDisabled:e.theme.colors['content-disabled']})),(e=>e.background?templateBackground({bg:e.theme.colors['alert-bg-error-100'],border:e.theme.colors['alert-error'],bgChecked:e.theme.colors['alert-bg-error-100'],borderChecked:e.theme.colors['alert-error'],bgHover:e.theme.colors['alert-bg-error-100'],borderHover:e.theme.colors['alert-error'],beforeBgHover:'transparent'}):null)),success:styled.css([""," ",""],(e=>template({fontColor:e.theme.colors['content-onmain-primary'],bg:e.theme.colors['alert-bg-success-100'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['alert-bg-success-500'],bgChecked:e.theme.colors['alert-bg-success-500'],borderHover:e.theme.colors['alert-success'],outlineFocus:e.theme.colors['alert-success'],colorDisabled:e.theme.colors['content-disabled']})),(e=>e.background?templateBackground({bg:e.theme.colors['alert-bg-success-100'],border:e.theme.colors['alert-success'],bgChecked:e.theme.colors['alert-bg-success-100'],borderChecked:e.theme.colors['alert-success'],bgHover:e.theme.colors['alert-bg-success-100'],borderHover:e.theme.colors['alert-success'],beforeBgHover:'transparent'}):null)),disabled:styled.css(["cursor:auto;"," ",""],(e=>template({fontColor:e.theme.colors['content-onmain-primary'],bg:e.theme.colors['bg-disabled-large'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['border-disabled'],bgChecked:e.theme.colors['bg-disabled-active'],borderHover:e.theme.colors['border-disabled'],outlineFocus:e.theme.colors['border-disabled'],colorDisabled:e.theme.colors['content-disabled']})),(e=>e.background?templateBackground({bg:e.theme.colors['bg-disabled-large'],border:e.theme.colors['border-disabled'],bgChecked:e.theme.colors['bg-disabled-large'],borderChecked:e.theme.colors['bg-disabled-active'],bgHover:e.theme.colors['bg-disabled-large'],borderHover:e.theme.colors['border-disabled'],beforeBgHover:'transparent'}):null))},onColored:{regular:styled.css([""," ",""],(e=>template(e.background?{fontColor:e.theme.colors['content-onmain-primary'],bg:e.theme.colors['bg-onmain-primary'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['border-onmain-default-small'],bgChecked:e.theme.colors['bg-brand-primary-basic'],borderHover:e.theme.colors['border-brand-primary'],outlineFocus:e.theme.colors['border-brand-primary'],colorDisabled:e.theme.colors['content-oncolor-disabled']}:{fontColor:e.theme.colors['content-oncolor-primary'],bg:e.theme.colors['bg-onmain-primary'],color:e.theme.colors['content-brand-primary'],border:e.theme.colors['border-onmain-default-small'],bgChecked:e.theme.colors['bg-oncolor-primary'],borderHover:e.theme.colors['border-brand-primary'],outlineFocus:e.theme.colors['content-oncolor-primary'],colorDisabled:e.theme.colors['content-oncolor-disabled']})),(e=>e.background?templateBackground({bg:e.theme.colors['bg-onmain-secondary'],border:e.theme.colors['border-onmain-default-large'],bgChecked:e.theme.colors['bg-onmain-primary'],borderChecked:e.theme.colors['border-onmain-default-large'],bgHover:e.theme.colors['bg-onmain-secondary'],borderHover:e.theme.colors['border-onmain-default-large'],beforeBgHover:e.theme.colors['bg-oncolor-hover']}):null)),error:styled.css([""," ",""],(e=>template(e.background?{fontColor:e.theme.colors['content-onmain-primary'],bg:e.theme.colors['alert-bg-error-100'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['alert-bg-error-500'],bgChecked:e.theme.colors['alert-bg-error-500'],borderHover:e.theme.colors['alert-error'],outlineFocus:e.theme.colors['alert-error'],colorDisabled:e.theme.colors['content-oncolor-disabled']}:{fontColor:e.theme.colors['content-oncolor-primary'],bg:e.theme.colors['alert-bg-error-100'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['alert-bg-error-500'],bgChecked:e.theme.colors['alert-bg-error-500'],borderHover:e.theme.colors['alert-error'],outlineFocus:e.theme.colors['alert-error'],colorDisabled:e.theme.colors['content-oncolor-disabled']})),(e=>e.background?templateBackground({bg:e.theme.colors['alert-bg-error-100'],border:e.theme.colors['alert-bg-error-500'],bgChecked:e.theme.colors['alert-bg-error-100'],borderChecked:e.theme.colors['alert-error'],bgHover:e.theme.colors['alert-bg-error-100'],borderHover:e.theme.colors['alert-error'],beforeBgHover:e.theme.colors['bg-oncolor-hover']}):null)),success:styled.css([""," ",""],(e=>template(e.background?{fontColor:e.theme.colors['content-onmain-primary'],bg:e.theme.colors['alert-bg-success-100'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['alert-bg-success-500'],bgChecked:e.theme.colors['alert-bg-success-500'],borderHover:e.theme.colors['alert-success'],outlineFocus:e.theme.colors['alert-success'],colorDisabled:e.theme.colors['content-oncolor-disabled']}:{fontColor:e.theme.colors['content-oncolor-primary'],bg:e.theme.colors['alert-bg-success-100'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['alert-bg-success-500'],bgChecked:e.theme.colors['alert-bg-success-500'],borderHover:e.theme.colors['alert-success'],outlineFocus:e.theme.colors['alert-success'],colorDisabled:e.theme.colors['content-oncolor-disabled']})),(e=>e.background?templateBackground({bg:e.theme.colors['alert-bg-success-100'],border:e.theme.colors['alert-bg-success-500'],bgChecked:e.theme.colors['alert-bg-success-100'],borderChecked:e.theme.colors['alert-success'],bgHover:e.theme.colors['alert-bg-success-100'],borderHover:e.theme.colors['alert-success'],beforeBgHover:e.theme.colors['bg-oncolor-hover']}):null)),disabled:styled.css(["cursor:auto;"," ",""],(e=>template(e.background?{fontColor:e.theme.colors['content-onmain-primary'],bg:e.theme.colors['bg-disabled-large'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['border-disabled'],bgChecked:e.theme.colors['bg-disabled-active'],borderHover:e.theme.colors['border-disabled'],outlineFocus:e.theme.colors['border-disabled'],colorDisabled:e.theme.colors['content-disabled']}:{fontColor:e.theme.colors['content-oncolor-primary'],bg:e.theme.colors['bg-disabled-large'],color:e.theme.colors['content-oncolor-primary'],border:e.theme.colors['border-disabled'],bgChecked:e.theme.colors['bg-disabled-active'],borderHover:e.theme.colors['border-disabled'],outlineFocus:e.theme.colors['border-disabled'],colorDisabled:e.theme.colors['content-oncolor-disabled']})),(e=>e.background?templateBackground({bg:e.theme.colors['bg-onmain-secondary'],border:e.theme.colors['border-oncolor-disabled'],bgChecked:e.theme.colors['bg-onmain-secondary'],borderChecked:e.theme.colors['border-oncolor-disabled'],bgHover:e.theme.colors['bg-onmain-secondary'],borderHover:e.theme.colors['border-oncolor-disabled'],beforeBgHover:'transparent'}):null))}};const PRESET_DEFAULT={default:styled.css([""," ",""],(e=>e.error?`\n          & > ${DefaultMask} > rect { \n            fill: ${tinycolor__default.default(e.theme.colors.pomegranate).setAlpha(.1).toString()};\n            stroke: ${e.theme.colors.pomegranate};\n          }  \n          & > ${DefaultMask} g > rect {\n            fill: ${e.theme.colors.pomegranate};\n          }\n        `:null),(e=>`\n      color: ${e.disabled?e.theme.colors.alto:e.theme.colors.mineShaft};\n      cursor: ${e.disabled?'not-allowed':'pointer'};\n\n      & > ${Input}:checked ~ ${DefaultMask} g {\n        opacity: 1;\n      }\n      & > ${Input}:disabled ~ ${DefaultMask} > rect {\n        fill: ${e.theme.colors.white};\n        stroke: ${e.theme.colors.grey};\n      }\n      & > ${Input}:checked:disabled ~ ${DefaultMask} g > rect {\n        fill: ${e.theme.colors.alto};\n      }\n      &:focus {\n        outline: none;\n      }\n      & > ${Input}:focus-visible ~ ${DefaultMask} {\n        outline: 1px solid ${e.theme.colors.accent};\n        outline-offset: 2px;\n      }\n    `))};const Root=styled__default.default.label.withConfig({shouldForwardProp:e=>['children','htmlFor','style'].includes(e)}).withConfig({displayName:"Checkbox__Root",componentId:"ui__sc-9s6oap-6"})([""," "," "," "," ",""],baseStyles,(e=>e.brandPresetUsed?e.disabled&&!e.onColored?PRESET.default.disabled:e.disabled&&e.onColored?PRESET.onColored.disabled:!e.error||e.success||e.onColored?e.error&&!e.success&&e.onColored?PRESET.onColored.error:!e.success||e.error||e.onColored?e.success&&!e.error&&e.onColored?PRESET.onColored.success:e.onColored?PRESET.onColored.regular:PRESET.default.regular:PRESET.default.success:PRESET.default.error:PRESET_DEFAULT.default),(e=>{const o=e.brandPresetUsed?BRAND_SIZES:DEFAULT_SIZES;return STATIC_SIZES.includes(e.size)?`font-size: ${o[e.size]}px;`:responsiveProperty.responsiveProperty('size','font-size')}),(e=>responsiveProperty.responsiveProperty('width',e.fluid&&e.width!=='auto'&&!Array.isArray(e.width)?'max-width':'width')),(e=>e.fluid?'width: 100%;':null));const Group=styled__default.default.div.withConfig({shouldForwardProp:e=>e!=='inline'}).withConfig({displayName:"Checkbox__Group",componentId:"ui__sc-9s6oap-7"})(["",""],(e=>e.inline?styled.css(["display:flex;flex-direction:row;> ",":first-child{margin-left:0;}> ",":not(:first-child){margin-left:15px;}",""],Root,Root,screen.screenMaxS()`
             flex-direction: column;
             > ${Root}:first-child {
               margin-top: 0;

package/components/Checkbox/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Checkbox/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { CheckFill } from '@foxford/icon-pack'\nimport tinycolor from 'tinycolor2'\nimport { screenMaxS } from 'mixins/screen'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { hover } from 'mixins/hover'\nimport DefaultCheck from './images/checkDefault.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(CheckFill)`\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(\n    `\n      border-color: ${palette.borderHover};\n    `,\n    `&:hover > ${BrandMask}`\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(\n    `\n      background-color: ${palette.bgHover};\n      border-color: ${palette.borderHover};\n      &::before {\n        background-color: ${palette.beforeBgHover};\n        opacity: 1;\n      }\n    `,\n    `&:hover > ${Background}`\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","default","DefaultCheck","BrandMask","div","CheckIcon","CheckFill","Content","template","palette","fontColor","bg","color","border","bgChecked","colorDisabled","hover","borderHover","outlineFocus","templateBackground","borderChecked","bgHover","beforeBgHover","PRESET","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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"}
+{"version":3,"file":"style.js","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 { hover } from 'mixins/hover'\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(\n    `\n      border-color: ${palette.borderHover};\n    `,\n    `&:hover > ${BrandMask}`\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(\n    `\n      background-color: ${palette.bgHover};\n      border-color: ${palette.borderHover};\n      &::before {\n        background-color: ${palette.beforeBgHover};\n        opacity: 1;\n      }\n    `,\n    `&:hover > ${Background}`\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","default","DefaultCheck","BrandMask","div","CheckIcon","Check","Content","template","palette","fontColor","bg","color","border","bgChecked","colorDisabled","hover","borderHover","outlineFocus","templateBackground","borderChecked","bgHover","beforeBgHover","PRESET","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/Checkbox/style.mjs

@@ -1,4 +1,4 @@
-import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{screenMaxS}from'../../mixins/screen.mjs';import{responsiveProperty}from'../../mixins/responsive-property.mjs';import{hover}from'../../mixins/hover.mjs';import SvgCheckDefault from'./images/checkDefault.svg.mjs';import{CheckFill}from'../../icon-pack/src/icons/CheckFill/index.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(CheckFill).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(`\n      border-color: ${o.borderHover};\n    `,`&:hover > ${BrandMask}`)}\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(`\n      background-color: ${o.bgHover};\n      border-color: ${o.borderHover};\n      &::before {\n        background-color: ${o.beforeBgHover};\n        opacity: 1;\n      }\n    `,`&:hover > ${Background}`)}\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{hover}from'../../mixins/hover.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(`\n      border-color: ${o.borderHover};\n    `,`&:hover > ${BrandMask}`)}\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(`\n      background-color: ${o.bgHover};\n      border-color: ${o.borderHover};\n      &::before {\n        background-color: ${o.beforeBgHover};\n        opacity: 1;\n      }\n    `,`&:hover > ${Background}`)}\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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/Checkbox/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { CheckFill } from '@foxford/icon-pack'\nimport tinycolor from 'tinycolor2'\nimport { screenMaxS } from 'mixins/screen'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { hover } from 'mixins/hover'\nimport DefaultCheck from './images/checkDefault.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(CheckFill)`\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(\n    `\n      border-color: ${palette.borderHover};\n    `,\n    `&:hover > ${BrandMask}`\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(\n    `\n      background-color: ${palette.bgHover};\n      border-color: ${palette.borderHover};\n      &::before {\n        background-color: ${palette.beforeBgHover};\n        opacity: 1;\n      }\n    `,\n    `&:hover > ${Background}`\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","CheckFill","Content","template","palette","fontColor","bg","color","border","bgChecked","colorDisabled","hover","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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"}
+{"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 { hover } from 'mixins/hover'\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(\n    `\n      border-color: ${palette.borderHover};\n    `,\n    `&:hover > ${BrandMask}`\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(\n    `\n      background-color: ${palette.bgHover};\n      border-color: ${palette.borderHover};\n      &::before {\n        background-color: ${palette.beforeBgHover};\n        opacity: 1;\n      }\n    `,\n    `&:hover > ${Background}`\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","hover","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

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

package/components/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Avatar } from 'components/Avatar'\nimport { Indicator } from 'components/Indicator'\nimport { IconButton } from 'components/IconButton'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport {\n  SIZES,\n  SIZES_ICON,\n  SIZES_CHIP_INDICATOR,\n  SIZES_CHIP_AVATAR,\n  SIZES_CHIP_AVATAR_SQUARE,\n  SIZES_DISCARD_BUTTON,\n  SIZES_DISCARD_BUTTON_SQUARE,\n} from './constants'\nimport * as Styled from './style'\nimport type { ChipProps } from './types'\n\nconst COMPONENT_NAME = 'Chip'\n\n/**\n *\n * Компонент поддерживает все нативные атрибуты рутового элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/Chip/types.ts).\n */\nconst Chip: React.ForwardRefExoticComponent<ChipProps> = withMergedProps<ChipProps>(\n  forwardRef<HTMLElement, MergedProps<ChipProps>>((props, ref) => {\n    const {\n      size = 'm',\n      primary = true,\n      textProps = {},\n      captionProps = {},\n      iconProps = {},\n      avatarProps = {},\n      indicatorProps = {},\n      discardButtonProps = {},\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      children,\n      text,\n      caption,\n      icon,\n      ...restProps\n    } = props\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    let rootNode: any = 'div'\n\n    if (restProps.onClick) rootNode = 'button'\n    if (discardButtonProps.onClick) rootNode = 'div'\n\n    let rootType: ChipProps['type']\n\n    if (rootNode === 'button') rootType = 'button'\n    if (restProps.type) rootType = restProps.type\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const [before, after] = Array.isArray(icon) ? icon : [icon]\n\n    const textBaseProps: TextProps = {\n      as: 'span',\n      appearance: 'body',\n      size: 'inherit',\n      color: 'inherit',\n      lineHeight: caption ? 1.3 : 1,\n    }\n\n    const captionBaseProps: TextProps = {\n      as: 'span',\n      appearance: 'body',\n      size: 0.75,\n      sizeUnits: 'em',\n      color: 'inherit',\n      lineHeight: 1,\n    }\n\n    const discardButtonBaseProps: IconButtonProps = {\n      icon: <Close />,\n      disabled: restProps.disabled,\n    }\n\n    return (\n      <Styled.Root {...restProps} {...sizeProps} as={rootNode} type={rootType} primary={primary} ref={ref}>\n        {typeof children === 'function' ? (\n          children({\n            textProps: textBaseProps,\n            captionProps: captionBaseProps,\n            discardButtonProps: discardButtonBaseProps,\n          })\n        ) : (\n          <>\n            {before ? (\n              <Icon\n                preset='brand'\n                name={typeof before === 'string' ? before : undefined}\n                icon={typeof before !== 'string' ? before : undefined}\n                sizes={SIZES_ICON}\n                {...sizeProps}\n                {...iconProps}\n              />\n            ) : null}\n            {avatarProps.src || avatarProps.text ? (\n              <Avatar\n                preset='brand'\n                sizes={avatarProps.square ? SIZES_CHIP_AVATAR_SQUARE : SIZES_CHIP_AVATAR}\n                {...sizeProps}\n                {...avatarProps}\n              />\n            ) : null}\n            <Styled.Content>\n              <Text {...textBaseProps} {...textProps}>\n                {children ?? text}\n              </Text>\n              {caption ? (\n                <Text {...captionBaseProps} {...captionProps}>\n                  {caption}\n                </Text>\n              ) : null}\n            </Styled.Content>\n            {indicatorProps.children || indicatorProps.text ? (\n              <Indicator sizes={SIZES_CHIP_INDICATOR} marginRight={3} {...sizeProps} {...indicatorProps} />\n            ) : null}\n            {after ? (\n              <Icon\n                preset='brand'\n                name={typeof after === 'string' ? after : undefined}\n                icon={typeof after !== 'string' ? after : undefined}\n                sizes={SIZES_ICON}\n                {...sizeProps}\n                {...iconProps}\n              />\n            ) : null}\n            {discardButtonProps.onClick ? (\n              <IconButton\n                sizes={discardButtonProps.square ? SIZES_DISCARD_BUTTON_SQUARE : SIZES_DISCARD_BUTTON}\n                {...sizeProps}\n                {...discardButtonBaseProps}\n                {...discardButtonProps}\n              />\n            ) : null}\n          </>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { Chip }\n"],"names":["Chip","withMergedProps","forwardRef","props","ref","size","primary","textProps","captionProps","iconProps","avatarProps","indicatorProps","discardButtonProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","children","text","caption","icon","restProps","rootNode","rootType","onClick","type","sizeProps","before","after","Array","isArray","textBaseProps","as","appearance","color","lineHeight","captionBaseProps","sizeUnits","discardButtonBaseProps","_jsx","Close","disabled","Styled","_jsxs","jsxs","_Fragment","jsx","Icon","preset","name","undefined","sizes","SIZES_ICON","src","Avatar","square","SIZES_CHIP_AVATAR_SQUARE","SIZES_CHIP_AVATAR","Text","Indicator","SIZES_CHIP_INDICATOR","marginRight","IconButton","SIZES_DISCARD_BUTTON_SQUARE","SIZES_DISCARD_BUTTON","displayName","SIZES"],"mappings":"kfAmCMA,MAAAA,KAAmDC,gBAAAA,gBACvDC,MAAAA,YAAgD,CAACC,EAAOC,KACtD,MAAMC,KACJA,EAAO,IAAGC,QACVA,GAAU,EAAIC,UACdA,EAAY,CAAE,EAAAC,aACdA,EAAe,CAAE,EAAAC,UACjBA,EAAY,CAAE,EAAAC,YACdA,EAAc,CAAE,EAAAC,eAChBA,EAAiB,CAAE,EAAAC,mBACnBA,EAAqB,CAAE,EAAAC,QACvBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,SACNA,EAAQC,KACRA,EAAIC,QACJA,EAAOC,KACPA,KACGC,GACDpB,EAGJ,IAAIqB,EAAgB,MAKpB,IAAIC,EAHAF,EAAUG,UAASF,EAAW,UAC9BZ,EAAmBc,UAASF,EAAW,OAIvCA,IAAa,WAAUC,EAAW,UAClCF,EAAUI,OAAMF,EAAWF,EAAUI,MAEzC,MAAMC,EAAY,CAChBvB,OACAQ,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAOW,EAAQC,GAASC,MAAMC,QAAQV,GAAQA,EAAO,CAACA,GAEtD,MAAMW,EAA2B,CAC/BC,GAAI,OACJC,WAAY,OACZ9B,KAAM,UACN+B,MAAO,UACPC,WAAYhB,EAAU,IAAM,GAG9B,MAAMiB,EAA8B,CAClCJ,GAAI,OACJC,WAAY,OACZ9B,KAAM,IACNkC,UAAW,KACXH,MAAO,UACPC,WAAY,GAGd,MAAMG,EAA0C,CAC9ClB,KAAMmB,WAAAA,IAACC,MAAKA,UACZC,SAAUpB,EAAUoB,UAGtB,OACEF,WAAAA,IAACG,MAAAA,KAAW,IAAKrB,KAAeK,EAAWM,GAAIV,EAAUG,KAAMF,EAAUnB,QAASA,EAASF,IAAKA,EAAIe,gBAC1FA,GAAa,WACnBA,EAAS,CACPZ,UAAW0B,EACXzB,aAAc8B,EACd1B,mBAAoB4B,IAGtBK,WAAAC,KAAAC,oBAAA,CAAA5B,SACGU,CAAAA,EACCY,WAAAO,IAACC,UAAI,CACHC,OAAO,QACPC,YAAatB,GAAW,SAAWA,OAASuB,EAC5C9B,YAAaO,GAAW,SAAWA,OAASuB,EAC5CC,MAAOC,UAAWA,cACd1B,KACAnB,IAEJ,KACHC,EAAY6C,KAAO7C,EAAYU,KAC9BqB,WAAAO,IAACQ,cAAM,CACLN,OAAO,QACPG,MAAO3C,EAAY+C,OAASC,UAAAA,yBAA2BC,UAAkBA,qBACrE/B,KACAlB,IAEJ,KACJmC,WAAAC,KAACF,cAAc,CAAAzB,SAAA,CACbsB,WAAAO,IAACY,UAAI,IAAK3B,KAAmB1B,EAASY,SACnCA,GAAYC,IAEdC,EACCoB,WAAAO,IAACY,UAAI,IAAKtB,KAAsB9B,EAAYW,SACzCE,IAED,QAELV,EAAeQ,UAAYR,EAAeS,KACzCqB,WAAAO,IAACa,oBAAS,CAACR,MAAOS,UAAqBA,qBAACC,YAAa,KAAOnC,KAAejB,IACzE,KACHmB,EACCW,WAAAA,IAACQ,KAAAA,KAAI,CACHC,OAAO,QACPC,YAAarB,GAAU,SAAWA,OAAQsB,EAC1C9B,YAAaQ,GAAU,SAAWA,OAAQsB,EAC1CC,MAAOC,UAAWA,cACd1B,KACAnB,IAEJ,KACHG,EAAmBc,QAClBe,WAAAA,IAACuB,WAAAA,WAAU,CACTX,MAAOzC,EAAmB6C,OAASQ,UAAAA,4BAA8BC,UAAqBA,wBAClFtC,KACAY,KACA5B,IAEJ,SAGI,IAGlB,CACEuD,YAlJmB,OAmJnBd,MAAOe,UAAAA"}
+{"version":3,"file":"Chip.js","sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Avatar } from 'components/Avatar'\nimport { Indicator } from 'components/Indicator'\nimport { IconButton } from 'components/IconButton'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport {\n  SIZES,\n  SIZES_ICON,\n  SIZES_CHIP_INDICATOR,\n  SIZES_CHIP_AVATAR,\n  SIZES_CHIP_AVATAR_SQUARE,\n  SIZES_DISCARD_BUTTON,\n  SIZES_DISCARD_BUTTON_SQUARE,\n} from './constants'\nimport * as Styled from './style'\nimport type { ChipProps } from './types'\n\nconst COMPONENT_NAME = 'Chip'\n\n/**\n *\n * Компонент поддерживает все нативные атрибуты рутового элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/Chip/types.ts).\n */\nconst Chip: React.ForwardRefExoticComponent<ChipProps> = withMergedProps<ChipProps>(\n  forwardRef<HTMLElement, MergedProps<ChipProps>>((props, ref) => {\n    const {\n      size = 'm',\n      primary = true,\n      textProps = {},\n      captionProps = {},\n      iconProps = {},\n      avatarProps = {},\n      indicatorProps = {},\n      discardButtonProps = {},\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      children,\n      text,\n      caption,\n      icon,\n      ...restProps\n    } = props\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    let rootNode: any = 'div'\n\n    if (restProps.onClick) rootNode = 'button'\n    if (discardButtonProps.onClick) rootNode = 'div'\n\n    let rootType: ChipProps['type']\n\n    if (rootNode === 'button') rootType = 'button'\n    if (restProps.type) rootType = restProps.type\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const [before, after] = Array.isArray(icon) ? icon : [icon]\n\n    const textBaseProps: TextProps = {\n      as: 'span',\n      appearance: 'body',\n      size: 'inherit',\n      color: 'inherit',\n      lineHeight: caption ? 1.3 : 1,\n    }\n\n    const captionBaseProps: TextProps = {\n      as: 'span',\n      appearance: 'body',\n      size: 0.75,\n      sizeUnits: 'em',\n      color: 'inherit',\n      lineHeight: 1,\n    }\n\n    const discardButtonBaseProps: IconButtonProps = {\n      icon: 'close',\n      disabled: restProps.disabled,\n    }\n\n    return (\n      <Styled.Root {...restProps} {...sizeProps} as={rootNode} type={rootType} primary={primary} ref={ref}>\n        {typeof children === 'function' ? (\n          children({\n            textProps: textBaseProps,\n            captionProps: captionBaseProps,\n            discardButtonProps: discardButtonBaseProps,\n          })\n        ) : (\n          <>\n            {before ? (\n              <Icon\n                preset='brand'\n                name={typeof before === 'string' ? before : undefined}\n                icon={typeof before !== 'string' ? before : undefined}\n                sizes={SIZES_ICON}\n                {...sizeProps}\n                {...iconProps}\n              />\n            ) : null}\n            {avatarProps.src || avatarProps.text ? (\n              <Avatar\n                preset='brand'\n                sizes={avatarProps.square ? SIZES_CHIP_AVATAR_SQUARE : SIZES_CHIP_AVATAR}\n                {...sizeProps}\n                {...avatarProps}\n              />\n            ) : null}\n            <Styled.Content>\n              <Text {...textBaseProps} {...textProps}>\n                {children ?? text}\n              </Text>\n              {caption ? (\n                <Text {...captionBaseProps} {...captionProps}>\n                  {caption}\n                </Text>\n              ) : null}\n            </Styled.Content>\n            {indicatorProps.children || indicatorProps.text ? (\n              <Indicator sizes={SIZES_CHIP_INDICATOR} marginRight={3} {...sizeProps} {...indicatorProps} />\n            ) : null}\n            {after ? (\n              <Icon\n                preset='brand'\n                name={typeof after === 'string' ? after : undefined}\n                icon={typeof after !== 'string' ? after : undefined}\n                sizes={SIZES_ICON}\n                {...sizeProps}\n                {...iconProps}\n              />\n            ) : null}\n            {discardButtonProps.onClick ? (\n              <IconButton\n                sizes={discardButtonProps.square ? SIZES_DISCARD_BUTTON_SQUARE : SIZES_DISCARD_BUTTON}\n                {...sizeProps}\n                {...discardButtonBaseProps}\n                {...discardButtonProps}\n              />\n            ) : null}\n          </>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { Chip }\n"],"names":["Chip","withMergedProps","forwardRef","props","ref","size","primary","textProps","captionProps","iconProps","avatarProps","indicatorProps","discardButtonProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","children","text","caption","icon","restProps","rootNode","rootType","onClick","type","sizeProps","before","after","Array","isArray","textBaseProps","as","appearance","color","lineHeight","captionBaseProps","sizeUnits","discardButtonBaseProps","disabled","_jsx","Styled","_jsxs","jsxs","_Fragment","jsx","Icon","preset","name","undefined","sizes","SIZES_ICON","src","Avatar","square","SIZES_CHIP_AVATAR_SQUARE","SIZES_CHIP_AVATAR","Text","Indicator","SIZES_CHIP_INDICATOR","marginRight","IconButton","SIZES_DISCARD_BUTTON_SQUARE","SIZES_DISCARD_BUTTON","displayName","SIZES"],"mappings":"obAkCMA,MAAAA,KAAmDC,gBAAAA,gBACvDC,MAAAA,YAAgD,CAACC,EAAOC,KACtD,MAAMC,KACJA,EAAO,IAAGC,QACVA,GAAU,EAAIC,UACdA,EAAY,CAAE,EAAAC,aACdA,EAAe,CAAE,EAAAC,UACjBA,EAAY,CAAE,EAAAC,YACdA,EAAc,CAAE,EAAAC,eAChBA,EAAiB,CAAE,EAAAC,mBACnBA,EAAqB,CAAE,EAAAC,QACvBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,SACNA,EAAQC,KACRA,EAAIC,QACJA,EAAOC,KACPA,KACGC,GACDpB,EAGJ,IAAIqB,EAAgB,MAKpB,IAAIC,EAHAF,EAAUG,UAASF,EAAW,UAC9BZ,EAAmBc,UAASF,EAAW,OAIvCA,IAAa,WAAUC,EAAW,UAClCF,EAAUI,OAAMF,EAAWF,EAAUI,MAEzC,MAAMC,EAAY,CAChBvB,OACAQ,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAOW,EAAQC,GAASC,MAAMC,QAAQV,GAAQA,EAAO,CAACA,GAEtD,MAAMW,EAA2B,CAC/BC,GAAI,OACJC,WAAY,OACZ9B,KAAM,UACN+B,MAAO,UACPC,WAAYhB,EAAU,IAAM,GAG9B,MAAMiB,EAA8B,CAClCJ,GAAI,OACJC,WAAY,OACZ9B,KAAM,IACNkC,UAAW,KACXH,MAAO,UACPC,WAAY,GAGd,MAAMG,EAA0C,CAC9ClB,KAAM,QACNmB,SAAUlB,EAAUkB,UAGtB,OACEC,WAAAA,IAACC,MAAAA,KAAW,IAAKpB,KAAeK,EAAWM,GAAIV,EAAUG,KAAMF,EAAUnB,QAASA,EAASF,IAAKA,EAAIe,gBAC1FA,GAAa,WACnBA,EAAS,CACPZ,UAAW0B,EACXzB,aAAc8B,EACd1B,mBAAoB4B,IAGtBI,WAAAC,KAAAC,oBAAA,CAAA3B,SACGU,CAAAA,EACCa,WAAAK,IAACC,UAAI,CACHC,OAAO,QACPC,YAAarB,GAAW,SAAWA,OAASsB,EAC5C7B,YAAaO,GAAW,SAAWA,OAASsB,EAC5CC,MAAOC,UAAWA,cACdzB,KACAnB,IAEJ,KACHC,EAAY4C,KAAO5C,EAAYU,KAC9BsB,WAAAK,IAACQ,cAAM,CACLN,OAAO,QACPG,MAAO1C,EAAY8C,OAASC,UAAAA,yBAA2BC,UAAkBA,qBACrE9B,KACAlB,IAEJ,KACJkC,WAAAC,KAACF,cAAc,CAAAxB,SAAA,CACbuB,WAAAK,IAACY,UAAI,IAAK1B,KAAmB1B,EAASY,SACnCA,GAAYC,IAEdC,EACCqB,WAAAK,IAACY,UAAI,IAAKrB,KAAsB9B,EAAYW,SACzCE,IAED,QAELV,EAAeQ,UAAYR,EAAeS,KACzCsB,WAAAK,IAACa,oBAAS,CAACR,MAAOS,UAAqBA,qBAACC,YAAa,KAAOlC,KAAejB,IACzE,KACHmB,EACCY,WAAAA,IAACM,KAAAA,KAAI,CACHC,OAAO,QACPC,YAAapB,GAAU,SAAWA,OAAQqB,EAC1C7B,YAAaQ,GAAU,SAAWA,OAAQqB,EAC1CC,MAAOC,UAAWA,cACdzB,KACAnB,IAEJ,KACHG,EAAmBc,QAClBgB,WAAAA,IAACqB,WAAAA,WAAU,CACTX,MAAOxC,EAAmB4C,OAASQ,UAAAA,4BAA8BC,UAAqBA,wBAClFrC,KACAY,KACA5B,IAEJ,SAGI,IAGlB,CACEsD,YAlJmB,OAmJnBd,MAAOe,UAAAA"}

package/components/Chip/Chip.mjs

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