@foxford/ui 2.102.0 → 2.103.0-beta-bdca95a-20260331

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","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.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","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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"}

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/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()`
             flex-direction: column;
             > ${Root}:first-child {
               margin-top: 0;
@@ -7,5 +7,5 @@ import styled,{css}from'styled-components';import tinycolor from'tinycolor2';imp
               margin-top: 15px;
               margin-left: 0;
             }
-          `):`\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      `));export{Background,BrandMask,CheckIcon,Content,DefaultMask,Group,Input,Root};
+          `):`\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      `);export{Background,BrandMask,CheckIcon,Content,DefaultMask,Group,Input,Root};
 //# sourceMappingURL=style.mjs.map

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 { 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":"4WASA,MAAMA,cAAoD,CACxDC,WAAY,GACZC,GAAI,GACJC,MAAO,GACPC,EAAG,GACHC,OAAQ,GACRC,EAAG,GACHC,MAAO,GACPC,EAAG,GACHC,WAAY,GACZC,GAAI,IAGN,MAAMC,YAAkD,CACtDV,WAAY,GACZC,GAAI,GACJC,MAAO,GACPC,EAAG,GACHC,OAAQ,GACRC,EAAG,GACHC,MAAO,GACPC,EAAG,GACHC,WAAY,GACZC,GAAI,IAGN,MAAME,aAAqC,CACzC,aACA,KACA,QACA,IACA,SACA,IACA,QACA,IACA,aACA,MAGF,MAAMC,WAAaC,IAAG,CAAA,GAAA,IACjBC,GAAU,0HAOAA,EAAMC,WAAa,GAAK,sBACxBD,EAAME,OAAS,cAAgB,wHASjCC,MAAQC,OAAOC,MAAKC,WAAA,CAAAC,YAAA,kBAAAC,YAAA,mBAAZJ,CAAY,CAAA,wEASpBK,WAAaL,OAAOM,KAAIJ,WAAA,CAAAC,YAAA,uBAAAC,YAAA,mBAAXJ,CAAW,CAAA,2SAsB9B,MAAMO,YAAcP,OAAOQ,iBAAaN,WAAA,CAAAC,YAAA,wBAAAC,YAAA,mBAApBJ,CAAoB,CAAA,mHAYlCS,UAAYT,OAAOU,IAAGR,WAAA,CAAAC,YAAA,sBAAAC,YAAA,mBAAVJ,CAAU,CAAA,2QAgB5B,MAAMW,UAAYX,OAAOY,WAAUV,WAAA,CAAAC,YAAA,sBAAAC,YAAA,mBAAjBJ,CAAiB,CAAA,+BAK7Ba,QAAUb,OAAOM,KAAIJ,WAAA,CAAAC,YAAA,oBAAAC,YAAA,mBAAXJ,CAAW,CAAA,wCAKlC,MAAMc,SAAYC,GAA6B,WACvCF,yBACKE,EAAQC,0BAEbP,sCACgBM,EAAQE,mBACnBF,EAAQG,6BACDH,EAAQI,uBAEpBpB,mBAAmBU,sEAEHM,EAAQK,0BAExBrB,mBAAmBU,eAAeE,4CAGlCZ,oBAAoBc,yBACfE,EAAQM,0BAEjBC,MACA,yBACkBP,EAAQQ,qBAE1B,aAAad,6DAKTV,yBAAyBU,uCACRM,EAAQS,iDAKjC,MAAMC,mBAAsBV,GAA6B,WACjDV,uCACgBU,EAAQE,0BACZF,EAAQI,uBAEpBpB,mBAAmBM,uCACHU,EAAQK,iCACZL,EAAQW,0BAExBJ,MACA,6BACsBP,EAAQY,iCACZZ,EAAQQ,8DAEFR,EAAQa,qDAIhC,aAAavB,kBAIjB,MAAMwB,OAAS,CACbC,QAAS,CACPC,QAASpC,IAAG,CAAA,GAAA,IAAA,IACPC,GACDkB,SAAS,CACPE,UAAWpB,EAAMoC,MAAMC,OAAO,0BAC9BhB,GAAIrB,EAAMoC,MAAMC,OAAO,qBACvBf,MAAOtB,EAAMoC,MAAMC,OAAO,2BAC1Bd,OAAQvB,EAAMoC,MAAMC,OAAO,+BAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,0BAC9BV,YAAa3B,EAAMoC,MAAMC,OAAO,wBAChCT,aAAc5B,EAAMoC,MAAMC,OAAO,wBACjCZ,cAAezB,EAAMoC,MAAMC,OAAO,sBAEnCrC,GACDA,EAAMC,WACF4B,mBAAmB,CACjBR,GAAIrB,EAAMoC,MAAMC,OAAO,uBACvBd,OAAQvB,EAAMoC,MAAMC,OAAO,+BAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,wBAC9BP,cAAe9B,EAAMoC,MAAMC,OAAO,wBAClCN,QAAS/B,EAAMoC,MAAMC,OAAO,oBAC5BV,YAAa3B,EAAMoC,MAAMC,OAAO,+BAChCL,cAAe,gBAEjB,MAERM,MAAOvC,IAAG,CAAA,GAAA,IAAA,IACLC,GACDkB,SAAS,CACPE,UAAWpB,EAAMoC,MAAMC,OAAO,0BAC9BhB,GAAIrB,EAAMoC,MAAMC,OAAO,sBACvBf,MAAOtB,EAAMoC,MAAMC,OAAO,2BAC1Bd,OAAQvB,EAAMoC,MAAMC,OAAO,sBAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,sBAC9BV,YAAa3B,EAAMoC,MAAMC,OAAO,eAChCT,aAAc5B,EAAMoC,MAAMC,OAAO,eACjCZ,cAAezB,EAAMoC,MAAMC,OAAO,sBAEnCrC,GACDA,EAAMC,WACF4B,mBAAmB,CACjBR,GAAIrB,EAAMoC,MAAMC,OAAO,sBACvBd,OAAQvB,EAAMoC,MAAMC,OAAO,eAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,sBAC9BP,cAAe9B,EAAMoC,MAAMC,OAAO,eAClCN,QAAS/B,EAAMoC,MAAMC,OAAO,sBAC5BV,YAAa3B,EAAMoC,MAAMC,OAAO,eAChCL,cAAe,gBAEjB,MAERO,QAASxC,IAAG,CAAA,GAAA,IAAA,IACPC,GACDkB,SAAS,CACPE,UAAWpB,EAAMoC,MAAMC,OAAO,0BAC9BhB,GAAIrB,EAAMoC,MAAMC,OAAO,wBACvBf,MAAOtB,EAAMoC,MAAMC,OAAO,2BAC1Bd,OAAQvB,EAAMoC,MAAMC,OAAO,wBAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,wBAC9BV,YAAa3B,EAAMoC,MAAMC,OAAO,iBAChCT,aAAc5B,EAAMoC,MAAMC,OAAO,iBACjCZ,cAAezB,EAAMoC,MAAMC,OAAO,sBAEnCrC,GACDA,EAAMC,WACF4B,mBAAmB,CACjBR,GAAIrB,EAAMoC,MAAMC,OAAO,wBACvBd,OAAQvB,EAAMoC,MAAMC,OAAO,iBAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,wBAC9BP,cAAe9B,EAAMoC,MAAMC,OAAO,iBAClCN,QAAS/B,EAAMoC,MAAMC,OAAO,wBAC5BV,YAAa3B,EAAMoC,MAAMC,OAAO,iBAChCL,cAAe,gBAEjB,MAERQ,SAAUzC,IAAG,CAAA,eAAA,IAAA,IAERC,GACDkB,SAAS,CACPE,UAAWpB,EAAMoC,MAAMC,OAAO,0BAC9BhB,GAAIrB,EAAMoC,MAAMC,OAAO,qBACvBf,MAAOtB,EAAMoC,MAAMC,OAAO,2BAC1Bd,OAAQvB,EAAMoC,MAAMC,OAAO,mBAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,sBAC9BV,YAAa3B,EAAMoC,MAAMC,OAAO,mBAChCT,aAAc5B,EAAMoC,MAAMC,OAAO,mBACjCZ,cAAezB,EAAMoC,MAAMC,OAAO,sBAEnCrC,GACDA,EAAMC,WACF4B,mBAAmB,CACjBR,GAAIrB,EAAMoC,MAAMC,OAAO,qBACvBd,OAAQvB,EAAMoC,MAAMC,OAAO,mBAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,qBAC9BP,cAAe9B,EAAMoC,MAAMC,OAAO,sBAClCN,QAAS/B,EAAMoC,MAAMC,OAAO,qBAC5BV,YAAa3B,EAAMoC,MAAMC,OAAO,mBAChCL,cAAe,gBAEjB,OAGVS,UAAW,CACTN,QAASpC,IAAG,CAAA,GAAA,IAAA,IACPC,GAEGkB,SADJlB,EAAMC,WACO,CACPmB,UAAWpB,EAAMoC,MAAMC,OAAO,0BAC9BhB,GAAIrB,EAAMoC,MAAMC,OAAO,qBACvBf,MAAOtB,EAAMoC,MAAMC,OAAO,2BAC1Bd,OAAQvB,EAAMoC,MAAMC,OAAO,+BAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,0BAC9BV,YAAa3B,EAAMoC,MAAMC,OAAO,wBAChCT,aAAc5B,EAAMoC,MAAMC,OAAO,wBACjCZ,cAAezB,EAAMoC,MAAMC,OAAO,6BAE3B,CACPjB,UAAWpB,EAAMoC,MAAMC,OAAO,2BAC9BhB,GAAIrB,EAAMoC,MAAMC,OAAO,qBACvBf,MAAOtB,EAAMoC,MAAMC,OAAO,yBAC1Bd,OAAQvB,EAAMoC,MAAMC,OAAO,+BAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,sBAC9BV,YAAa3B,EAAMoC,MAAMC,OAAO,wBAChCT,aAAc5B,EAAMoC,MAAMC,OAAO,2BACjCZ,cAAezB,EAAMoC,MAAMC,OAAO,8BAEvCrC,GACDA,EAAMC,WACF4B,mBAAmB,CACjBR,GAAIrB,EAAMoC,MAAMC,OAAO,uBACvBd,OAAQvB,EAAMoC,MAAMC,OAAO,+BAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,qBAC9BP,cAAe9B,EAAMoC,MAAMC,OAAO,+BAClCN,QAAS/B,EAAMoC,MAAMC,OAAO,uBAC5BV,YAAa3B,EAAMoC,MAAMC,OAAO,+BAChCL,cAAehC,EAAMoC,MAAMC,OAAO,sBAEpC,MAERC,MAAOvC,IAAG,CAAA,GAAA,IAAA,IACLC,GAEGkB,SADJlB,EAAMC,WACO,CACPmB,UAAWpB,EAAMoC,MAAMC,OAAO,0BAC9BhB,GAAIrB,EAAMoC,MAAMC,OAAO,sBACvBf,MAAOtB,EAAMoC,MAAMC,OAAO,2BAC1Bd,OAAQvB,EAAMoC,MAAMC,OAAO,sBAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,sBAC9BV,YAAa3B,EAAMoC,MAAMC,OAAO,eAChCT,aAAc5B,EAAMoC,MAAMC,OAAO,eACjCZ,cAAezB,EAAMoC,MAAMC,OAAO,6BAE3B,CACPjB,UAAWpB,EAAMoC,MAAMC,OAAO,2BAC9BhB,GAAIrB,EAAMoC,MAAMC,OAAO,sBACvBf,MAAOtB,EAAMoC,MAAMC,OAAO,2BAC1Bd,OAAQvB,EAAMoC,MAAMC,OAAO,sBAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,sBAC9BV,YAAa3B,EAAMoC,MAAMC,OAAO,eAChCT,aAAc5B,EAAMoC,MAAMC,OAAO,eACjCZ,cAAezB,EAAMoC,MAAMC,OAAO,8BAEvCrC,GACDA,EAAMC,WACF4B,mBAAmB,CACjBR,GAAIrB,EAAMoC,MAAMC,OAAO,sBACvBd,OAAQvB,EAAMoC,MAAMC,OAAO,sBAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,sBAC9BP,cAAe9B,EAAMoC,MAAMC,OAAO,eAClCN,QAAS/B,EAAMoC,MAAMC,OAAO,sBAC5BV,YAAa3B,EAAMoC,MAAMC,OAAO,eAChCL,cAAehC,EAAMoC,MAAMC,OAAO,sBAEpC,MAERE,QAASxC,IAAG,CAAA,GAAA,IAAA,IACPC,GAEGkB,SADJlB,EAAMC,WACO,CACPmB,UAAWpB,EAAMoC,MAAMC,OAAO,0BAC9BhB,GAAIrB,EAAMoC,MAAMC,OAAO,wBACvBf,MAAOtB,EAAMoC,MAAMC,OAAO,2BAC1Bd,OAAQvB,EAAMoC,MAAMC,OAAO,wBAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,wBAC9BV,YAAa3B,EAAMoC,MAAMC,OAAO,iBAChCT,aAAc5B,EAAMoC,MAAMC,OAAO,iBACjCZ,cAAezB,EAAMoC,MAAMC,OAAO,6BAE3B,CACPjB,UAAWpB,EAAMoC,MAAMC,OAAO,2BAC9BhB,GAAIrB,EAAMoC,MAAMC,OAAO,wBACvBf,MAAOtB,EAAMoC,MAAMC,OAAO,2BAC1Bd,OAAQvB,EAAMoC,MAAMC,OAAO,wBAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,wBAC9BV,YAAa3B,EAAMoC,MAAMC,OAAO,iBAChCT,aAAc5B,EAAMoC,MAAMC,OAAO,iBACjCZ,cAAezB,EAAMoC,MAAMC,OAAO,8BAEvCrC,GACDA,EAAMC,WACF4B,mBAAmB,CACjBR,GAAIrB,EAAMoC,MAAMC,OAAO,wBACvBd,OAAQvB,EAAMoC,MAAMC,OAAO,wBAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,wBAC9BP,cAAe9B,EAAMoC,MAAMC,OAAO,iBAClCN,QAAS/B,EAAMoC,MAAMC,OAAO,wBAC5BV,YAAa3B,EAAMoC,MAAMC,OAAO,iBAChCL,cAAehC,EAAMoC,MAAMC,OAAO,sBAEpC,MAERG,SAAUzC,IAAG,CAAA,eAAA,IAAA,IAERC,GAEGkB,SADJlB,EAAMC,WACO,CACPmB,UAAWpB,EAAMoC,MAAMC,OAAO,0BAC9BhB,GAAIrB,EAAMoC,MAAMC,OAAO,qBACvBf,MAAOtB,EAAMoC,MAAMC,OAAO,2BAC1Bd,OAAQvB,EAAMoC,MAAMC,OAAO,mBAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,sBAC9BV,YAAa3B,EAAMoC,MAAMC,OAAO,mBAChCT,aAAc5B,EAAMoC,MAAMC,OAAO,mBACjCZ,cAAezB,EAAMoC,MAAMC,OAAO,qBAE3B,CACPjB,UAAWpB,EAAMoC,MAAMC,OAAO,2BAC9BhB,GAAIrB,EAAMoC,MAAMC,OAAO,qBACvBf,MAAOtB,EAAMoC,MAAMC,OAAO,2BAC1Bd,OAAQvB,EAAMoC,MAAMC,OAAO,mBAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,sBAC9BV,YAAa3B,EAAMoC,MAAMC,OAAO,mBAChCT,aAAc5B,EAAMoC,MAAMC,OAAO,mBACjCZ,cAAezB,EAAMoC,MAAMC,OAAO,8BAEvCrC,GACDA,EAAMC,WACF4B,mBAAmB,CACjBR,GAAIrB,EAAMoC,MAAMC,OAAO,uBACvBd,OAAQvB,EAAMoC,MAAMC,OAAO,2BAC3Bb,UAAWxB,EAAMoC,MAAMC,OAAO,uBAC9BP,cAAe9B,EAAMoC,MAAMC,OAAO,2BAClCN,QAAS/B,EAAMoC,MAAMC,OAAO,uBAC5BV,YAAa3B,EAAMoC,MAAMC,OAAO,2BAChCL,cAAe,gBAEjB,QAKZ,MAAMU,eAAiB,CACrBR,QAASnC,IAAG,CAAA,GAAA,IAAA,IACPC,GACDA,EAAMsC,MACF,mBACM3B,4CACIgC,UAAU3C,EAAMoC,MAAMC,OAAOO,aAAaC,SAAS,IAAKC,oCACtD9C,EAAMoC,MAAMC,OAAOO,8CAEzBjC,6CACIX,EAAMoC,MAAMC,OAAOO,sCAG7B,KAEH5C,GAAU,kBACFA,EAAMwC,SAAWxC,EAAMoC,MAAMC,OAAOU,KAAO/C,EAAMoC,MAAMC,OAAOW,6BAC7DhD,EAAMwC,SAAW,cAAgB,2BAErCrC,mBAAmBQ,4DAGnBR,oBAAoBQ,uCAChBX,EAAMoC,MAAMC,OAAOY,2BACjBjD,EAAMoC,MAAMC,OAAOa,6BAEzB/C,4BAA4BQ,yCACxBX,EAAMoC,MAAMC,OAAOU,+EAKvB5C,yBAAyBQ,6CACRX,EAAMoC,MAAMC,OAAOc,yDAgCzC,MAAMC,KAAOhD,OAAOiD,MAAM/C,WAAgC,CAC/DgD,kBAAoBC,GAAS,CAAC,WAAY,UAAW,SAASC,SAASD,KACvEjD,WAAA,CAAAC,YAAA,iBAAAC,YAAA,mBAFkBJ,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,IACEN,WA5BmBE,GACjBA,EAAMyD,gBACJzD,EAAMwC,WAAaxC,EAAMyC,UAAkBR,OAAOC,QAAQM,SAC1DxC,EAAMwC,UAAYxC,EAAMyC,UAAkBR,OAAOQ,UAAUD,UAE3DxC,EAAMsC,OAAUtC,EAAMuC,SAAYvC,EAAMyC,UACxCzC,EAAMsC,QAAUtC,EAAMuC,SAAWvC,EAAMyC,UAAkBR,OAAOQ,UAAUH,OAE1EtC,EAAMuC,SAAYvC,EAAMsC,OAAUtC,EAAMyC,UACxCzC,EAAMuC,UAAYvC,EAAMsC,OAAStC,EAAMyC,UAAkBR,OAAOQ,UAAUF,QAEvEvC,EAAMyC,UAAYR,OAAOQ,UAAUN,QAAUF,OAAOC,QAAQC,QAHLF,OAAOC,QAAQK,QAHfN,OAAOC,QAAQI,MASxEI,eAAeR,QAGFlC,IACpB,MAAM0D,EAAQ1D,EAAMyD,gBAAkB7D,YAAcX,cAEpD,OAAOY,aAAa2D,SAA6BxD,EAAM2D,MACnD,cAAcD,EAA0B1D,EAAM2D,WAC9CC,mBAAmB,OAAQ,cAU5B5D,GACD4D,mBACE,QACA5D,EAAM6D,OAAS7D,EAAM8D,QAAU,SAAWC,MAAMC,QAAQhE,EAAM8D,OAAS,YAAc,SAEtF9D,GAAWA,EAAM6D,MAAQ,eAAiB,MAGxC,MAAMI,MAAQ7D,OAAOU,IAAIR,WAA+B,CAC7DgD,kBAAoBC,GAASA,IAAS,WACtCjD,WAAA,CAAAC,YAAA,kBAAAC,YAAA,mBAFmBJ,CAEnB,CAAA,GAAA,IACGJ,GACDA,EAAME,OACFH,IAAG,CAAA,qCAAA,iCAAA,wCAAA,IAGGqD,KAGAA,KAGFc,YAAY;;gBAERd;;;gBAGAA;;;;aAMR,8EAGMA,yGAIAA"}

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 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');var index=require('../../icon-pack/src/icons/Close/index.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 useMergedProps=require('../../hooks/useMergedProps.js');var createPolymorphicComponentWithRef=require('../../shared/utils/createPolymorphicComponentWithRef.js');var isNil=require('../../shared/utils/isNil.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Slot=require('../Slot/Slot.js');var index=require('../../icon-pack/src/icons/Close/index.js');const Chip=createPolymorphicComponentWithRef.createPolymorphicComponentWithRef((e,s)=>{const{component:i="div",size:t="m",primary:r=!0,children:o,content:n,text:a,caption:p,addonLeft:c,addonRight:l,sizeXXS:d,sizeXS:S,sizeS:u,sizeM:x,sizeL:j,sizeXL:z,...m}=useMergedProps.useMergedProps(e,{componentName:"Chip",sizes:e=>isNil.isNil(e.text)||isNil.isNil(e.caption)?sizes.SIZES:sizes.SIZES_WITH_CAPTION});const P={size:t,sizeXXS:d,sizeXS:S,sizeS:u,sizeM:x,sizeL:j,sizeXL:z};const h={...P,sizes:sizes.SIZES_TEXT,as:'span',appearance:'caption',color:'inherit',textAlign:'center'};const R={...P,sizes:sizes.SIZES_CAPTION,as:'span',appearance:'caption',color:'inherit',textAlign:'center'};const C={...P,sizes:sizes.SIZES_ICON,preset:'brand'};const I={...P,sizes:sizes.SIZES_CHIP_ICON_BUTTON,icon:jsxRuntime.jsx(index.Close,{}),disabled:m.disabled,square:!0};const N={...P,sizes:sizes.SIZES_CHIP_AVATAR,preset:'brand',square:!0};const v={...P,sizes:sizes.SIZES_CHIP_INDICATOR};return jsxRuntime.jsx(style.Root,{...m,...P,as:i,type:m.type??(i==='button'?'button':void 0),"data-disabled":m.disabled,primary:r,ref:s,children:jsxRuntime.jsx(Slot.Slot,{render:o,props:{textProps:h,captionProps:R,iconProps:C,iconButtonProps:I,avatarProps:N,indicatorProps:v},fallback:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(Slot.Slot,{render:c,props:{iconProps:C,iconButtonProps:I,avatarProps:N,indicatorProps:v}}),jsxRuntime.jsx(style.Content,{...P,sizes:sizes.SIZES_CONTENT,children:jsxRuntime.jsx(Slot.Slot,{render:n,props:{textProps:h,captionProps:R},fallback:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(Slot.Slot,{render:a,props:h}),jsxRuntime.jsx(Slot.Slot,{render:p,props:R})]})})}),jsxRuntime.jsx(Slot.Slot,{render:l,props:{iconProps:C,iconButtonProps:I,avatarProps:N,indicatorProps:v}})]})})})});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","_Fragment","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":"kfAmCA,MAAMA,KAAmDC,gBAAAA,gBACvDC,MAAAA,YAAgD,CAACC,EAAOC,KACtD,MAAMC,KACJA,EAAO,IAAGC,QACVA,GAAU,EAAIC,UACdA,EAAY,CAAA,EAAEC,aACdA,EAAe,CAAA,EAAEC,UACjBA,EAAY,CAAA,EAAEC,YACdA,EAAc,CAAA,EAAEC,eAChBA,EAAiB,CAAA,EAAEC,mBACnBA,EAAqB,CAAA,EAAEC,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,MAAAA,UACPC,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,WAAAA,KAAAC,oBAAA,CAAA3B,SAAA,CACGU,EACCY,WAAAA,IAACM,UAAI,CACHC,OAAO,QACPC,YAAapB,GAAW,SAAWA,OAASqB,EAC5C5B,YAAaO,GAAW,SAAWA,OAASqB,EAC5CC,MAAOC,UAAAA,cACHxB,KACAnB,IAEJ,KACHC,EAAY2C,KAAO3C,EAAYU,KAC9BqB,WAAAA,IAACa,cAAM,CACLN,OAAO,QACPG,MAAOzC,EAAY6C,OAASC,UAAAA,yBAA2BC,UAAAA,qBACnD7B,KACAlB,IAEJ,KACJmC,WAAAA,KAACD,cAAc,CAAAzB,SAAA,CACbsB,WAAAA,IAACiB,UAAI,IAAKzB,KAAmB1B,EAASY,SACnCA,GAAYC,IAEdC,EACCoB,WAAAA,IAACiB,UAAI,IAAKpB,KAAsB9B,EAAYW,SACzCE,IAED,QAELV,EAAeQ,UAAYR,EAAeS,KACzCqB,WAAAA,IAACkB,oBAAS,CAACR,MAAOS,UAAAA,qBAAsBC,YAAa,KAAOjC,KAAejB,IACzE,KACHmB,EACCW,WAAAA,IAACM,KAAAA,KAAI,CACHC,OAAO,QACPC,YAAanB,GAAU,SAAWA,OAAQoB,EAC1C5B,YAAaQ,GAAU,SAAWA,OAAQoB,EAC1CC,MAAOC,UAAAA,cACHxB,KACAnB,IAEJ,KACHG,EAAmBc,QAClBe,WAAAA,IAACqB,WAAAA,WAAU,CACTX,MAAOvC,EAAmB2C,OAASQ,UAAAA,4BAA8BC,UAAAA,wBAC7DpC,KACAY,KACA5B,IAEJ,SAGI,IAGlB,CACEqD,YAlJmB,OAmJnBd,MAAOe,UAAAA"}
+{"version":3,"file":"Chip.js","sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { Close } from '@foxford/icon-pack'\nimport { useMergedProps } from 'hooks/useMergedProps'\nimport { Slot } from 'components/Slot'\nimport type { TextProps } from 'components/Text'\nimport type { IconProps } from 'components/Icon'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { AvatarProps } from 'components/Avatar'\nimport type { IndicatorProps } from 'components/Indicator'\nimport { createPolymorphicComponentWithRef } from 'shared/utils/createPolymorphicComponentWithRef'\nimport { isNil } from 'shared/utils/isNil'\nimport type { PolymorphicProps } from 'shared/interfaces'\nimport {\n  SIZES,\n  SIZES_WITH_CAPTION,\n  SIZES_CONTENT,\n  SIZES_TEXT,\n  SIZES_CAPTION,\n  SIZES_ICON,\n  SIZES_CHIP_INDICATOR,\n  SIZES_CHIP_AVATAR,\n  SIZES_CHIP_ICON_BUTTON,\n} from './sizes'\nimport * as Styled from './style'\nimport type { ChipProps } from './types'\n\nconst COMPONENT_NAME = 'Chip'\n\n/**\n *\n * *v1.0.0*\n *\n * Компонент для представления данных, атрибутов или действий в компактной форме.\n *\n * Полиморфный компонент.\n *\n * Можно передать \"ref\" и атрибуты выбранного HTML-элемента (по умолчанию \\<div\\>).\n */\nconst Chip = createPolymorphicComponentWithRef<'div', ChipProps>((props, ref) => {\n  const {\n    component = 'div',\n    size = 'm',\n    primary = true,\n    children,\n    content,\n    text,\n    caption,\n    addonLeft,\n    addonRight,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n    ...restProps\n  } = useMergedProps<PolymorphicProps<React.ElementType, ChipProps>>(props, {\n    componentName: COMPONENT_NAME,\n    sizes: (chipProps) => (!isNil(chipProps.text) && !isNil(chipProps.caption) ? SIZES_WITH_CAPTION : SIZES),\n  })\n\n  const sizeProps = {\n    size,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n  }\n\n  const textProps: TextProps = {\n    ...sizeProps,\n    sizes: SIZES_TEXT,\n    as: 'span',\n    appearance: 'caption',\n    color: 'inherit',\n    textAlign: 'center',\n  }\n\n  const captionProps: TextProps = {\n    ...sizeProps,\n    sizes: SIZES_CAPTION,\n    as: 'span',\n    appearance: 'caption',\n    color: 'inherit',\n    textAlign: 'center',\n  }\n\n  const iconProps: IconProps = {\n    ...sizeProps,\n    sizes: SIZES_ICON,\n    preset: 'brand',\n  }\n\n  const iconButtonProps: IconButtonProps = {\n    ...sizeProps,\n    sizes: SIZES_CHIP_ICON_BUTTON,\n    icon: <Close />,\n    disabled: restProps.disabled,\n    square: true,\n  }\n\n  const avatarProps: AvatarProps = {\n    ...sizeProps,\n    sizes: SIZES_CHIP_AVATAR,\n    preset: 'brand',\n    square: true,\n  }\n\n  const indicatorProps: IndicatorProps = {\n    ...sizeProps,\n    sizes: SIZES_CHIP_INDICATOR,\n  }\n\n  return (\n    <Styled.Root\n      {...restProps}\n      {...sizeProps}\n      as={component}\n      type={restProps.type ?? (component === 'button' ? 'button' : undefined)}\n      data-disabled={restProps.disabled}\n      primary={primary}\n      ref={ref}\n    >\n      <Slot\n        render={children}\n        props={{\n          textProps,\n          captionProps,\n          iconProps,\n          iconButtonProps,\n          avatarProps,\n          indicatorProps,\n        }}\n        fallback={\n          <>\n            <Slot\n              render={addonLeft}\n              props={{\n                iconProps,\n                iconButtonProps,\n                avatarProps,\n                indicatorProps,\n              }}\n            />\n            <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n              <Slot\n                render={content}\n                props={{\n                  textProps,\n                  captionProps,\n                }}\n                fallback={\n                  <>\n                    <Slot render={text} props={textProps} />\n                    <Slot render={caption} props={captionProps} />\n                  </>\n                }\n              />\n            </Styled.Content>\n            <Slot\n              render={addonRight}\n              props={{\n                iconProps,\n                iconButtonProps,\n                avatarProps,\n                indicatorProps,\n              }}\n            />\n          </>\n        }\n      />\n    </Styled.Root>\n  )\n})\n\nconst ChipDoc: React.FC<ChipProps> = () => null\n\nexport { ChipDoc, Chip }\n"],"names":["Chip","createPolymorphicComponentWithRef","props","ref","component","size","primary","children","content","text","caption","addonLeft","addonRight","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","restProps","useMergedProps","componentName","sizes","chipProps","isNil","SIZES","SIZES_WITH_CAPTION","sizeProps","textProps","SIZES_TEXT","as","appearance","color","textAlign","captionProps","SIZES_CAPTION","iconProps","SIZES_ICON","preset","iconButtonProps","SIZES_CHIP_ICON_BUTTON","icon","_jsx","Close","disabled","square","avatarProps","SIZES_CHIP_AVATAR","indicatorProps","SIZES_CHIP_INDICATOR","Styled","type","undefined","Slot","render","fallback","_jsxs","_Fragment","SIZES_CONTENT"],"mappings":"ibAqCA,MAAMA,KAAOC,kCAAAA,kCAAoD,CAACC,EAAOC,KACvE,MAAMC,UACJA,EAAY,MAAKC,KACjBA,EAAO,IAAGC,QACVA,GAAU,EAAIC,SACdA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,UACPA,EAASC,WACTA,EAAUC,QACVA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,KACGC,GACDC,eAAAA,eAA+DlB,EAAO,CACxEmB,cA/BmB,OAgCnBC,MAAQC,GAAgBC,MAAAA,MAAMD,EAAUd,OAAUe,YAAMD,EAAUb,SAAgCe,MAAAA,MAArBC,MAAAA,qBAG/E,MAAMC,EAAY,CAChBtB,OACAQ,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMU,EAAuB,IACxBD,EACHL,MAAOO,MAAAA,WACPC,GAAI,OACJC,WAAY,UACZC,MAAO,UACPC,UAAW,UAGb,MAAMC,EAA0B,IAC3BP,EACHL,MAAOa,MAAAA,cACPL,GAAI,OACJC,WAAY,UACZC,MAAO,UACPC,UAAW,UAGb,MAAMG,EAAuB,IACxBT,EACHL,MAAOe,MAAAA,WACPC,OAAQ,SAGV,MAAMC,EAAmC,IACpCZ,EACHL,MAAOkB,MAAAA,uBACPC,KAAMC,WAAAA,IAACC,MAAAA,UACPC,SAAUzB,EAAUyB,SACpBC,QAAQ,GAGV,MAAMC,EAA2B,IAC5BnB,EACHL,MAAOyB,MAAAA,kBACPT,OAAQ,QACRO,QAAQ,GAGV,MAAMG,EAAiC,IAClCrB,EACHL,MAAO2B,MAAAA,sBAGT,OACEP,WAAAA,IAACQ,MAAAA,KAAW,IACN/B,KACAQ,EACJG,GAAI1B,EACJ+C,KAAMhC,EAAUgC,OAAS/C,IAAc,SAAW,cAAWgD,GAC7D,gBAAejC,EAAUyB,SACzBtC,QAASA,EACTH,IAAKA,EAAII,SAETmC,WAAAA,IAACW,UAAI,CACHC,OAAQ/C,EACRL,MAAO,CACL0B,YACAM,eACAE,YACAG,kBACAO,cACAE,kBAEFO,SACEC,WAAAA,KAAAC,oBAAA,CAAAlD,SAAA,CACEmC,WAAAA,IAACW,UAAI,CACHC,OAAQ3C,EACRT,MAAO,CACLkC,YACAG,kBACAO,cACAE,oBAGJN,WAAAA,IAACQ,cAAc,IAAKvB,EAAWL,MAAOoC,MAAAA,cAAcnD,SAClDmC,WAAAA,IAACW,UAAI,CACHC,OAAQ9C,EACRN,MAAO,CACL0B,YACAM,gBAEFqB,SACEC,WAAAA,KAAAC,oBAAA,CAAAlD,SAAA,CACEmC,WAAAA,IAACW,UAAI,CAACC,OAAQ7C,EAAMP,MAAO0B,IAC3Bc,WAAAA,IAACW,UAAI,CAACC,OAAQ5C,EAASR,MAAOgC,WAKtCQ,WAAAA,IAACW,UAAI,CACHC,OAAQ1C,EACRV,MAAO,CACLkC,YACAG,kBACAO,cACAE"}

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{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';import{Close}from'../../icon-pack/src/icons/Close/index.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{useMergedProps}from'../../hooks/useMergedProps.mjs';import{createPolymorphicComponentWithRef}from'../../shared/utils/createPolymorphicComponentWithRef.mjs';import{isNil}from'../../shared/utils/isNil.mjs';import{SIZES_WITH_CAPTION,SIZES,SIZES_CHIP_INDICATOR,SIZES_CHIP_AVATAR,SIZES_CHIP_ICON_BUTTON,SIZES_ICON,SIZES_CAPTION,SIZES_TEXT,SIZES_CONTENT}from'./sizes.mjs';import{Root,Content}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{Slot}from'../Slot/Slot.mjs';import{Close}from'../../icon-pack/src/icons/Close/index.mjs';const Chip=createPolymorphicComponentWithRef((s,o)=>{const{component:e="div",size:r="m",primary:t=!0,children:i,content:n,text:p,caption:a,addonLeft:c,addonRight:S,sizeXXS:l,sizeXS:m,sizeS:I,sizeM:d,sizeL:P,sizeXL:C,..._}=useMergedProps(s,{componentName:"Chip",sizes:s=>isNil(s.text)||isNil(s.caption)?SIZES:SIZES_WITH_CAPTION});const z={size:r,sizeXXS:l,sizeXS:m,sizeS:I,sizeM:d,sizeL:P,sizeXL:C};const x={...z,sizes:SIZES_TEXT,as:'span',appearance:'caption',color:'inherit',textAlign:'center'};const E={...z,sizes:SIZES_CAPTION,as:'span',appearance:'caption',color:'inherit',textAlign:'center'};const T={...z,sizes:SIZES_ICON,preset:'brand'};const j={...z,sizes:SIZES_CHIP_ICON_BUTTON,icon:jsx(Close,{}),disabled:_.disabled,square:!0};const N={...z,sizes:SIZES_CHIP_AVATAR,preset:'brand',square:!0};const h={...z,sizes:SIZES_CHIP_INDICATOR};return jsx(Root,{..._,...z,as:e,type:_.type??(e==='button'?'button':void 0),"data-disabled":_.disabled,primary:t,ref:o,children:jsx(Slot,{render:i,props:{textProps:x,captionProps:E,iconProps:T,iconButtonProps:j,avatarProps:N,indicatorProps:h},fallback:jsxs(Fragment,{children:[jsx(Slot,{render:c,props:{iconProps:T,iconButtonProps:j,avatarProps:N,indicatorProps:h}}),jsx(Content,{...z,sizes:SIZES_CONTENT,children:jsx(Slot,{render:n,props:{textProps:x,captionProps:E},fallback:jsxs(Fragment,{children:[jsx(Slot,{render:p,props:x}),jsx(Slot,{render:a,props:E})]})})}),jsx(Slot,{render:S,props:{iconProps:T,iconButtonProps:j,avatarProps:N,indicatorProps:h}})]})})})});export{Chip};
 //# sourceMappingURL=Chip.mjs.map

package/components/Chip/Chip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.mjs","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","_Fragment","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":"mmBAmCA,MAAMA,KAAmDC,gBACvDC,YAAgD,CAACC,EAAOC,KACtD,MAAMC,KACJA,EAAO,IAAGC,QACVA,GAAU,EAAIC,UACdA,EAAY,CAAA,EAAEC,aACdA,EAAe,CAAA,EAAEC,UACjBA,EAAY,CAAA,EAAEC,YACdA,EAAc,CAAA,EAAEC,eAChBA,EAAiB,CAAA,EAAEC,mBACnBA,EAAqB,CAAA,EAAEC,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,IAACC,UACPC,SAAUpB,EAAUoB,UAGtB,OACEF,IAACG,KAAW,IAAKrB,KAAeK,EAAWM,GAAIV,EAAUG,KAAMF,EAAUnB,QAASA,EAASF,IAAKA,EAAIe,gBAC1FA,GAAa,WACnBA,EAAS,CACPZ,UAAW0B,EACXzB,aAAc8B,EACd1B,mBAAoB4B,IAGtBK,KAAAC,SAAA,CAAA3B,SAAA,CACGU,EACCY,IAACM,KAAI,CACHC,OAAO,QACPC,YAAapB,GAAW,SAAWA,OAASqB,EAC5C5B,YAAaO,GAAW,SAAWA,OAASqB,EAC5CC,MAAOC,cACHxB,KACAnB,IAEJ,KACHC,EAAY2C,KAAO3C,EAAYU,KAC9BqB,IAACa,OAAM,CACLN,OAAO,QACPG,MAAOzC,EAAY6C,OAASC,yBAA2BC,qBACnD7B,KACAlB,IAEJ,KACJmC,KAACD,QAAc,CAAAzB,SAAA,CACbsB,IAACiB,KAAI,IAAKzB,KAAmB1B,EAASY,SACnCA,GAAYC,IAEdC,EACCoB,IAACiB,KAAI,IAAKpB,KAAsB9B,EAAYW,SACzCE,IAED,QAELV,EAAeQ,UAAYR,EAAeS,KACzCqB,IAACkB,UAAS,CAACR,MAAOS,qBAAsBC,YAAa,KAAOjC,KAAejB,IACzE,KACHmB,EACCW,IAACM,KAAI,CACHC,OAAO,QACPC,YAAanB,GAAU,SAAWA,OAAQoB,EAC1C5B,YAAaQ,GAAU,SAAWA,OAAQoB,EAC1CC,MAAOC,cACHxB,KACAnB,IAEJ,KACHG,EAAmBc,QAClBe,IAACqB,WAAU,CACTX,MAAOvC,EAAmB2C,OAASQ,4BAA8BC,wBAC7DpC,KACAY,KACA5B,IAEJ,SAGI,IAGlB,CACEqD,YAlJmB,OAmJnBd,MAAOe"}
+{"version":3,"file":"Chip.mjs","sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { Close } from '@foxford/icon-pack'\nimport { useMergedProps } from 'hooks/useMergedProps'\nimport { Slot } from 'components/Slot'\nimport type { TextProps } from 'components/Text'\nimport type { IconProps } from 'components/Icon'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { AvatarProps } from 'components/Avatar'\nimport type { IndicatorProps } from 'components/Indicator'\nimport { createPolymorphicComponentWithRef } from 'shared/utils/createPolymorphicComponentWithRef'\nimport { isNil } from 'shared/utils/isNil'\nimport type { PolymorphicProps } from 'shared/interfaces'\nimport {\n  SIZES,\n  SIZES_WITH_CAPTION,\n  SIZES_CONTENT,\n  SIZES_TEXT,\n  SIZES_CAPTION,\n  SIZES_ICON,\n  SIZES_CHIP_INDICATOR,\n  SIZES_CHIP_AVATAR,\n  SIZES_CHIP_ICON_BUTTON,\n} from './sizes'\nimport * as Styled from './style'\nimport type { ChipProps } from './types'\n\nconst COMPONENT_NAME = 'Chip'\n\n/**\n *\n * *v1.0.0*\n *\n * Компонент для представления данных, атрибутов или действий в компактной форме.\n *\n * Полиморфный компонент.\n *\n * Можно передать \"ref\" и атрибуты выбранного HTML-элемента (по умолчанию \\<div\\>).\n */\nconst Chip = createPolymorphicComponentWithRef<'div', ChipProps>((props, ref) => {\n  const {\n    component = 'div',\n    size = 'm',\n    primary = true,\n    children,\n    content,\n    text,\n    caption,\n    addonLeft,\n    addonRight,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n    ...restProps\n  } = useMergedProps<PolymorphicProps<React.ElementType, ChipProps>>(props, {\n    componentName: COMPONENT_NAME,\n    sizes: (chipProps) => (!isNil(chipProps.text) && !isNil(chipProps.caption) ? SIZES_WITH_CAPTION : SIZES),\n  })\n\n  const sizeProps = {\n    size,\n    sizeXXS,\n    sizeXS,\n    sizeS,\n    sizeM,\n    sizeL,\n    sizeXL,\n  }\n\n  const textProps: TextProps = {\n    ...sizeProps,\n    sizes: SIZES_TEXT,\n    as: 'span',\n    appearance: 'caption',\n    color: 'inherit',\n    textAlign: 'center',\n  }\n\n  const captionProps: TextProps = {\n    ...sizeProps,\n    sizes: SIZES_CAPTION,\n    as: 'span',\n    appearance: 'caption',\n    color: 'inherit',\n    textAlign: 'center',\n  }\n\n  const iconProps: IconProps = {\n    ...sizeProps,\n    sizes: SIZES_ICON,\n    preset: 'brand',\n  }\n\n  const iconButtonProps: IconButtonProps = {\n    ...sizeProps,\n    sizes: SIZES_CHIP_ICON_BUTTON,\n    icon: <Close />,\n    disabled: restProps.disabled,\n    square: true,\n  }\n\n  const avatarProps: AvatarProps = {\n    ...sizeProps,\n    sizes: SIZES_CHIP_AVATAR,\n    preset: 'brand',\n    square: true,\n  }\n\n  const indicatorProps: IndicatorProps = {\n    ...sizeProps,\n    sizes: SIZES_CHIP_INDICATOR,\n  }\n\n  return (\n    <Styled.Root\n      {...restProps}\n      {...sizeProps}\n      as={component}\n      type={restProps.type ?? (component === 'button' ? 'button' : undefined)}\n      data-disabled={restProps.disabled}\n      primary={primary}\n      ref={ref}\n    >\n      <Slot\n        render={children}\n        props={{\n          textProps,\n          captionProps,\n          iconProps,\n          iconButtonProps,\n          avatarProps,\n          indicatorProps,\n        }}\n        fallback={\n          <>\n            <Slot\n              render={addonLeft}\n              props={{\n                iconProps,\n                iconButtonProps,\n                avatarProps,\n                indicatorProps,\n              }}\n            />\n            <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n              <Slot\n                render={content}\n                props={{\n                  textProps,\n                  captionProps,\n                }}\n                fallback={\n                  <>\n                    <Slot render={text} props={textProps} />\n                    <Slot render={caption} props={captionProps} />\n                  </>\n                }\n              />\n            </Styled.Content>\n            <Slot\n              render={addonRight}\n              props={{\n                iconProps,\n                iconButtonProps,\n                avatarProps,\n                indicatorProps,\n              }}\n            />\n          </>\n        }\n      />\n    </Styled.Root>\n  )\n})\n\nconst ChipDoc: React.FC<ChipProps> = () => null\n\nexport { ChipDoc, Chip }\n"],"names":["Chip","createPolymorphicComponentWithRef","props","ref","component","size","primary","children","content","text","caption","addonLeft","addonRight","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","restProps","useMergedProps","componentName","sizes","chipProps","isNil","SIZES","SIZES_WITH_CAPTION","sizeProps","textProps","SIZES_TEXT","as","appearance","color","textAlign","captionProps","SIZES_CAPTION","iconProps","SIZES_ICON","preset","iconButtonProps","SIZES_CHIP_ICON_BUTTON","icon","_jsx","Close","disabled","square","avatarProps","SIZES_CHIP_AVATAR","indicatorProps","SIZES_CHIP_INDICATOR","Styled","type","undefined","Slot","render","fallback","_jsxs","_Fragment","SIZES_CONTENT"],"mappings":"4iBAqCA,MAAMA,KAAOC,kCAAoD,CAACC,EAAOC,KACvE,MAAMC,UACJA,EAAY,MAAKC,KACjBA,EAAO,IAAGC,QACVA,GAAU,EAAIC,SACdA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,UACPA,EAASC,WACTA,EAAUC,QACVA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,KACGC,GACDC,eAA+DlB,EAAO,CACxEmB,cA/BmB,OAgCnBC,MAAQC,GAAgBC,MAAMD,EAAUd,OAAUe,MAAMD,EAAUb,SAAgCe,MAArBC,qBAG/E,MAAMC,EAAY,CAChBtB,OACAQ,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMU,EAAuB,IACxBD,EACHL,MAAOO,WACPC,GAAI,OACJC,WAAY,UACZC,MAAO,UACPC,UAAW,UAGb,MAAMC,EAA0B,IAC3BP,EACHL,MAAOa,cACPL,GAAI,OACJC,WAAY,UACZC,MAAO,UACPC,UAAW,UAGb,MAAMG,EAAuB,IACxBT,EACHL,MAAOe,WACPC,OAAQ,SAGV,MAAMC,EAAmC,IACpCZ,EACHL,MAAOkB,uBACPC,KAAMC,IAACC,UACPC,SAAUzB,EAAUyB,SACpBC,QAAQ,GAGV,MAAMC,EAA2B,IAC5BnB,EACHL,MAAOyB,kBACPT,OAAQ,QACRO,QAAQ,GAGV,MAAMG,EAAiC,IAClCrB,EACHL,MAAO2B,sBAGT,OACEP,IAACQ,KAAW,IACN/B,KACAQ,EACJG,GAAI1B,EACJ+C,KAAMhC,EAAUgC,OAAS/C,IAAc,SAAW,cAAWgD,GAC7D,gBAAejC,EAAUyB,SACzBtC,QAASA,EACTH,IAAKA,EAAII,SAETmC,IAACW,KAAI,CACHC,OAAQ/C,EACRL,MAAO,CACL0B,YACAM,eACAE,YACAG,kBACAO,cACAE,kBAEFO,SACEC,KAAAC,SAAA,CAAAlD,SAAA,CACEmC,IAACW,KAAI,CACHC,OAAQ3C,EACRT,MAAO,CACLkC,YACAG,kBACAO,cACAE,oBAGJN,IAACQ,QAAc,IAAKvB,EAAWL,MAAOoC,cAAcnD,SAClDmC,IAACW,KAAI,CACHC,OAAQ9C,EACRN,MAAO,CACL0B,YACAM,gBAEFqB,SACEC,KAAAC,SAAA,CAAAlD,SAAA,CACEmC,IAACW,KAAI,CAACC,OAAQ7C,EAAMP,MAAO0B,IAC3Bc,IAACW,KAAI,CAACC,OAAQ5C,EAASR,MAAOgC,WAKtCQ,IAACW,KAAI,CACHC,OAAQ1C,EACRV,MAAO,CACLkC,YACAG,kBACAO,cACAE"}