@foxford/ui 2.89.0-beta-c862583-20251222 → 2.90.0-beta-749a287-20260112

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

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

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';const Chip=withMergedProps(forwardRef(((t,o)=>{const{size:s="m",primary:i=!0,textProps:r={},captionProps:e={},iconProps:n={},avatarProps:a={},indicatorProps:c={},discardButtonProps:p={},sizeXXS:I,sizeXS:S,sizeS:m,sizeM:d,sizeL:l,sizeXL:A,children:_,text:x,caption:z,icon:C,...f}=t;let j='div';let h;f.onClick&&(j='button'),p.onClick&&(j='div'),j==='button'&&(h='button'),f.type&&(h=f.type);const u={size:s,sizeXXS:I,sizeXS:S,sizeS:m,sizeM:d,sizeL:l,sizeXL:A};const[E,R]=Array.isArray(C)?C:[C];const T={as:'span',appearance:'body',size:'inherit',color:'inherit',lineHeight:z?1.3:1};const P={as:'span',appearance:'body',size:.75,sizeUnits:'em',color:'inherit',lineHeight:1};const y={icon:'close',disabled:f.disabled};return jsx(Root,{...f,...u,as:j,type:h,primary:i,ref:o,children:typeof _=='function'?_({textProps:T,captionProps:P,discardButtonProps:y}):jsxs(Fragment,{children:[E?jsx(Icon,{preset:"brand",name:typeof E=='string'?E:void 0,icon:typeof E!='string'?E:void 0,sizes:SIZES_ICON,...u,...n}):null,a.src||a.text?jsx(Avatar,{preset:"brand",sizes:a.square?SIZES_CHIP_AVATAR_SQUARE:SIZES_CHIP_AVATAR,...u,...a}):null,jsxs(Content,{children:[jsx(Text,{...T,...r,children:_??x}),z?jsx(Text,{...P,...e,children:z}):null]}),c.children||c.text?jsx(Indicator,{sizes:SIZES_CHIP_INDICATOR,marginRight:3,...u,...c}):null,R?jsx(Icon,{preset:"brand",name:typeof R=='string'?R:void 0,icon:typeof R!='string'?R:void 0,sizes:SIZES_ICON,...u,...n}):null,p.onClick?jsx(IconButton,{sizes:p.square?SIZES_DISCARD_BUTTON_SQUARE:SIZES_DISCARD_BUTTON,...u,...y,...p}):null]})})})),{displayName:'Chip',sizes:SIZES});export{Chip};
+import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES,SIZES_ICON,SIZES_CHIP_AVATAR_SQUARE,SIZES_CHIP_AVATAR,SIZES_CHIP_INDICATOR,SIZES_DISCARD_BUTTON_SQUARE,SIZES_DISCARD_BUTTON}from'./constants.mjs';import{Root,Content}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{Close}from'../../icon-pack/src/icons/Close/index.mjs';import{Icon}from'../Icon/Icon.mjs';import{Avatar}from'../Avatar/Avatar.mjs';import{Text}from'../Text/Text.mjs';import{Indicator}from'../Indicator/Indicator.mjs';import{IconButton}from'../IconButton/IconButton.mjs';const Chip=withMergedProps(forwardRef(((t,o)=>{const{size:s="m",primary:i=!0,textProps:r={},captionProps:e={},iconProps:n={},avatarProps:a={},indicatorProps:c={},discardButtonProps:p={},sizeXXS:I,sizeXS:S,sizeS:m,sizeM:d,sizeL:l,sizeXL:A,children:_,text:x,caption:C,icon:j,...z}=t;let f='div';let h;z.onClick&&(f='button'),p.onClick&&(f='div'),f==='button'&&(h='button'),z.type&&(h=z.type);const u={size:s,sizeXXS:I,sizeXS:S,sizeS:m,sizeM:d,sizeL:l,sizeXL:A};const[E,R]=Array.isArray(j)?j:[j];const T={as:'span',appearance:'body',size:'inherit',color:'inherit',lineHeight:C?1.3:1};const P={as:'span',appearance:'body',size:.75,sizeUnits:'em',color:'inherit',lineHeight:1};const y={icon:jsx(Close,{}),disabled:z.disabled};return jsx(Root,{...z,...u,as:f,type:h,primary:i,ref:o,children:typeof _=='function'?_({textProps:T,captionProps:P,discardButtonProps:y}):jsxs(Fragment,{children:[E?jsx(Icon,{preset:"brand",name:typeof E=='string'?E:void 0,icon:typeof E!='string'?E:void 0,sizes:SIZES_ICON,...u,...n}):null,a.src||a.text?jsx(Avatar,{preset:"brand",sizes:a.square?SIZES_CHIP_AVATAR_SQUARE:SIZES_CHIP_AVATAR,...u,...a}):null,jsxs(Content,{children:[jsx(Text,{...T,...r,children:_??x}),C?jsx(Text,{...P,...e,children:C}):null]}),c.children||c.text?jsx(Indicator,{sizes:SIZES_CHIP_INDICATOR,marginRight:3,...u,...c}):null,R?jsx(Icon,{preset:"brand",name:typeof R=='string'?R:void 0,icon:typeof R!='string'?R:void 0,sizes:SIZES_ICON,...u,...n}):null,p.onClick?jsx(IconButton,{sizes:p.square?SIZES_DISCARD_BUTTON_SQUARE:SIZES_DISCARD_BUTTON,...u,...y,...p}):null]})})})),{displayName:'Chip',sizes:SIZES});export{Chip};
 //# 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 { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Avatar } from 'components/Avatar'\nimport { Indicator } from 'components/Indicator'\nimport { IconButton } from 'components/IconButton'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport {\n  SIZES,\n  SIZES_ICON,\n  SIZES_CHIP_INDICATOR,\n  SIZES_CHIP_AVATAR,\n  SIZES_CHIP_AVATAR_SQUARE,\n  SIZES_DISCARD_BUTTON,\n  SIZES_DISCARD_BUTTON_SQUARE,\n} from './constants'\nimport * as Styled from './style'\nimport type { ChipProps } from './types'\n\nconst COMPONENT_NAME = 'Chip'\n\n/**\n *\n * Компонент поддерживает все нативные атрибуты рутового элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/packages/ui/src/components/Chip/types.ts).\n */\nconst Chip: React.ForwardRefExoticComponent<ChipProps> = withMergedProps<ChipProps>(\n  forwardRef<HTMLElement, MergedProps<ChipProps>>((props, ref) => {\n    const {\n      size = 'm',\n      primary = true,\n      textProps = {},\n      captionProps = {},\n      iconProps = {},\n      avatarProps = {},\n      indicatorProps = {},\n      discardButtonProps = {},\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      children,\n      text,\n      caption,\n      icon,\n      ...restProps\n    } = props\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    let rootNode: any = 'div'\n\n    if (restProps.onClick) rootNode = 'button'\n    if (discardButtonProps.onClick) rootNode = 'div'\n\n    let rootType: ChipProps['type']\n\n    if (rootNode === 'button') rootType = 'button'\n    if (restProps.type) rootType = restProps.type\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const [before, after] = Array.isArray(icon) ? icon : [icon]\n\n    const textBaseProps: TextProps = {\n      as: 'span',\n      appearance: 'body',\n      size: 'inherit',\n      color: 'inherit',\n      lineHeight: caption ? 1.3 : 1,\n    }\n\n    const captionBaseProps: TextProps = {\n      as: 'span',\n      appearance: 'body',\n      size: 0.75,\n      sizeUnits: 'em',\n      color: 'inherit',\n      lineHeight: 1,\n    }\n\n    const discardButtonBaseProps: IconButtonProps = {\n      icon: 'close',\n      disabled: restProps.disabled,\n    }\n\n    return (\n      <Styled.Root {...restProps} {...sizeProps} as={rootNode} type={rootType} primary={primary} ref={ref}>\n        {typeof children === 'function' ? (\n          children({\n            textProps: textBaseProps,\n            captionProps: captionBaseProps,\n            discardButtonProps: discardButtonBaseProps,\n          })\n        ) : (\n          <>\n            {before ? (\n              <Icon\n                preset='brand'\n                name={typeof before === 'string' ? before : undefined}\n                icon={typeof before !== 'string' ? before : undefined}\n                sizes={SIZES_ICON}\n                {...sizeProps}\n                {...iconProps}\n              />\n            ) : null}\n            {avatarProps.src || avatarProps.text ? (\n              <Avatar\n                preset='brand'\n                sizes={avatarProps.square ? SIZES_CHIP_AVATAR_SQUARE : SIZES_CHIP_AVATAR}\n                {...sizeProps}\n                {...avatarProps}\n              />\n            ) : null}\n            <Styled.Content>\n              <Text {...textBaseProps} {...textProps}>\n                {children ?? text}\n              </Text>\n              {caption ? (\n                <Text {...captionBaseProps} {...captionProps}>\n                  {caption}\n                </Text>\n              ) : null}\n            </Styled.Content>\n            {indicatorProps.children || indicatorProps.text ? (\n              <Indicator sizes={SIZES_CHIP_INDICATOR} marginRight={3} {...sizeProps} {...indicatorProps} />\n            ) : null}\n            {after ? (\n              <Icon\n                preset='brand'\n                name={typeof after === 'string' ? after : undefined}\n                icon={typeof after !== 'string' ? after : undefined}\n                sizes={SIZES_ICON}\n                {...sizeProps}\n                {...iconProps}\n              />\n            ) : null}\n            {discardButtonProps.onClick ? (\n              <IconButton\n                sizes={discardButtonProps.square ? SIZES_DISCARD_BUTTON_SQUARE : SIZES_DISCARD_BUTTON}\n                {...sizeProps}\n                {...discardButtonBaseProps}\n                {...discardButtonProps}\n              />\n            ) : null}\n          </>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { Chip }\n"],"names":["Chip","withMergedProps","forwardRef","props","ref","size","primary","textProps","captionProps","iconProps","avatarProps","indicatorProps","discardButtonProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","children","text","caption","icon","restProps","rootNode","rootType","onClick","type","sizeProps","before","after","Array","isArray","textBaseProps","as","appearance","color","lineHeight","captionBaseProps","sizeUnits","discardButtonBaseProps","disabled","_jsx","Styled","_jsxs","_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":"siBAkCMA,MAAAA,KAAmDC,gBACvDC,YAAgD,CAACC,EAAOC,KACtD,MAAMC,KACJA,EAAO,IAAGC,QACVA,GAAU,EAAIC,UACdA,EAAY,CAAE,EAAAC,aACdA,EAAe,CAAE,EAAAC,UACjBA,EAAY,CAAE,EAAAC,YACdA,EAAc,CAAE,EAAAC,eAChBA,EAAiB,CAAE,EAAAC,mBACnBA,EAAqB,CAAE,EAAAC,QACvBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,SACNA,EAAQC,KACRA,EAAIC,QACJA,EAAOC,KACPA,KACGC,GACDpB,EAGJ,IAAIqB,EAAgB,MAKpB,IAAIC,EAHAF,EAAUG,UAASF,EAAW,UAC9BZ,EAAmBc,UAASF,EAAW,OAIvCA,IAAa,WAAUC,EAAW,UAClCF,EAAUI,OAAMF,EAAWF,EAAUI,MAEzC,MAAMC,EAAY,CAChBvB,OACAQ,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAOW,EAAQC,GAASC,MAAMC,QAAQV,GAAQA,EAAO,CAACA,GAEtD,MAAMW,EAA2B,CAC/BC,GAAI,OACJC,WAAY,OACZ9B,KAAM,UACN+B,MAAO,UACPC,WAAYhB,EAAU,IAAM,GAG9B,MAAMiB,EAA8B,CAClCJ,GAAI,OACJC,WAAY,OACZ9B,KAAM,IACNkC,UAAW,KACXH,MAAO,UACPC,WAAY,GAGd,MAAMG,EAA0C,CAC9ClB,KAAM,QACNmB,SAAUlB,EAAUkB,UAGtB,OACEC,IAACC,KAAW,IAAKpB,KAAeK,EAAWM,GAAIV,EAAUG,KAAMF,EAAUnB,QAASA,EAASF,IAAKA,EAAIe,gBAC1FA,GAAa,WACnBA,EAAS,CACPZ,UAAW0B,EACXzB,aAAc8B,EACd1B,mBAAoB4B,IAGtBI,KAAAC,SAAA,CAAA1B,SACGU,CAAAA,EACCa,IAACI,KAAI,CACHC,OAAO,QACPC,YAAanB,GAAW,SAAWA,OAASoB,EAC5C3B,YAAaO,GAAW,SAAWA,OAASoB,EAC5CC,MAAOC,cACHvB,KACAnB,IAEJ,KACHC,EAAY0C,KAAO1C,EAAYU,KAC9BsB,IAACW,OAAM,CACLN,OAAO,QACPG,MAAOxC,EAAY4C,OAASC,yBAA2BC,qBACnD5B,KACAlB,IAEJ,KACJkC,KAACD,QAAc,CAAAxB,SAAA,CACbuB,IAACe,KAAI,IAAKxB,KAAmB1B,EAASY,SACnCA,GAAYC,IAEdC,EACCqB,IAACe,KAAI,IAAKnB,KAAsB9B,EAAYW,SACzCE,IAED,QAELV,EAAeQ,UAAYR,EAAeS,KACzCsB,IAACgB,UAAS,CAACR,MAAOS,qBAAsBC,YAAa,KAAOhC,KAAejB,IACzE,KACHmB,EACCY,IAACI,KAAI,CACHC,OAAO,QACPC,YAAalB,GAAU,SAAWA,OAAQmB,EAC1C3B,YAAaQ,GAAU,SAAWA,OAAQmB,EAC1CC,MAAOC,cACHvB,KACAnB,IAEJ,KACHG,EAAmBc,QAClBgB,IAACmB,WAAU,CACTX,MAAOtC,EAAmB0C,OAASQ,4BAA8BC,wBAC7DnC,KACAY,KACA5B,IAEJ,SAGI,IAGlB,CACEoD,YAlJmB,OAmJnBd,MAAOe"}
+{"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":"mmBAmCMA,MAAAA,KAAmDC,gBACvDC,YAAgD,CAACC,EAAOC,KACtD,MAAMC,KACJA,EAAO,IAAGC,QACVA,GAAU,EAAIC,UACdA,EAAY,CAAE,EAAAC,aACdA,EAAe,CAAE,EAAAC,UACjBA,EAAY,CAAE,EAAAC,YACdA,EAAc,CAAE,EAAAC,eAChBA,EAAiB,CAAE,EAAAC,mBACnBA,EAAqB,CAAE,EAAAC,QACvBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,SACNA,EAAQC,KACRA,EAAIC,QACJA,EAAOC,KACPA,KACGC,GACDpB,EAGJ,IAAIqB,EAAgB,MAKpB,IAAIC,EAHAF,EAAUG,UAASF,EAAW,UAC9BZ,EAAmBc,UAASF,EAAW,OAIvCA,IAAa,WAAUC,EAAW,UAClCF,EAAUI,OAAMF,EAAWF,EAAUI,MAEzC,MAAMC,EAAY,CAChBvB,OACAQ,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAOW,EAAQC,GAASC,MAAMC,QAAQV,GAAQA,EAAO,CAACA,GAEtD,MAAMW,EAA2B,CAC/BC,GAAI,OACJC,WAAY,OACZ9B,KAAM,UACN+B,MAAO,UACPC,WAAYhB,EAAU,IAAM,GAG9B,MAAMiB,EAA8B,CAClCJ,GAAI,OACJC,WAAY,OACZ9B,KAAM,IACNkC,UAAW,KACXH,MAAO,UACPC,WAAY,GAGd,MAAMG,EAA0C,CAC9ClB,KAAMmB,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,SACGU,CAAAA,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"}

package/components/DialogComponent/DialogComponent.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var useScrollThresholds=require('../../hooks/useScrollThresholds.js');var constants=require('../../shared/constants.js');var dom=require('../../shared/utils/dom.js');var dragging=require('./images/dragging.svg.js');var style=require('./style.js');var sizes=require('./sizes.js');var layouts=require('./layouts.js');var Header=require('./Header.js');var jsxRuntime=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var AspectRatio=require('../AspectRatio/AspectRatio.js');var Skeleton=require('../Skeleton/Skeleton.js');var Text=require('../Text/Text.js');const DialogComponent=withMergedProps.withMergedProps(React.forwardRef(((e,s)=>{const{size:t="s",layout:o="vertical",scrollable:n=!1,scrollFading:i=!1,sizeXXS:r,sizeXS:l,sizeS:a,sizeM:u,sizeL:c,sizeXL:d,layoutXXS:x,layoutXS:m,layoutS:j,layoutM:y,layoutL:R,layoutXL:S,root:g,floats:p,media:h,body:I,header:T,caption:z,title:A,subtitle:E,children:b,footer:k,closeButton:L,progressLine:P,fancy:C,imgSrcVertical:_,imgSrcHorizontal:v,draggable:w,loading:N,stickyHeader:f,className:O,backgroundClassName:B,onGrab:D,onNudge:X,...q}=e;const H={size:t,sizeXXS:r,sizeXS:l,sizeS:a,sizeM:u,sizeL:c,sizeXL:d};const Y={layout:o,layoutXXS:x,layoutXS:m,layoutS:j,layoutM:y,layoutL:R,layoutXL:S};const Z={...H,appearance:'body',color:'content-onmain-tertiary',wordBreak:'break-word',marginBottom:'0.8em',sizes:sizes.SIZES_CAPTION};const M={...H,as:'h2',appearance:'heading',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.5em',sizes:sizes.SIZES_TITLE};const V={...H,as:'p',appearance:'body',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.8em',sizes:sizes.SIZES_SUBTITLE};const F=C?{icon:'close',size:'xxl',secondary:!0}:{icon:'close',size:'l',marginTop:8,marginRight:8};const U={size:'xs'};const K=C?O:dom.concatClassNames(O,B);const G=n&&i;const[J,Q]=React.useState(null);const{scrollThresholds:W,setScrollThresholds:$}=useScrollThresholds.useScrollThresholds({enabled:G,target:J});return jsxRuntime.jsxs(style.Root,{...q,...H,...Y,layouts:C?layouts.LAYOUTS_FANCY:layouts.LAYOUTS,className:K,fancy:C,ref:s,children:[C?jsxRuntime.jsx(style.FancyBackground,{className:B}):null,React.isValidElement(g)?g:typeof g=='function'?g({captionProps:Z,titleProps:M,subtitleProps:V,closeButtonProps:F,progressLineProps:U,onGrab:D,onNudge:X}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[p,w?jsxRuntime.jsx(style.DraggingHandle,{...Y,layouts:layouts.VISIBILITY_VERTICAL,onPointerDown:D,children:jsxRuntime.jsx(style.DraggingIconContainer,{tabIndex:0,onKeyDown:X,children:jsxRuntime.jsx(Icon.Icon,{icon:jsxRuntime.jsx(dragging.default,{}),size:34,color:"content-onmain-tertiary"})})}):null,L?jsxRuntime.jsx(style.ButtonPosition,{children:React.isValidElement(L)?L:typeof L=='function'?L(F):null}):null,N||h||_?jsxRuntime.jsx(style.Media,{...Y,layouts:C?layouts.LAYOUTS_FANCY_MEDIA_VERTICAL:layouts.LAYOUTS_MEDIA_VERTICAL,children:N?jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"3:1",width:"100%",children:jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:0})}):React.isValidElement(h)?h:jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"3:1",width:"100%",children:jsxRuntime.jsx(style.Img,{src:_})})}):null,N||h||v?jsxRuntime.jsx(style.Media,{...Y,layouts:layouts.LAYOUTS_MEDIA_HORIZONTAL,children:N?jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"5:7",height:"100%",children:jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:0})}):React.isValidElement(h)?h:jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"5:7",height:"100%",children:jsxRuntime.jsx(style.Img,{src:v})})}):null,jsxRuntime.jsxs(style.Body,{children:[P&&!N?jsxRuntime.jsx(style.ProgressPosition,{...Y,layouts:C?layouts.LAYOUTS_FANCY_PROGRESS:layouts.LAYOUTS_PROGRESS,children:React.isValidElement(P)?P:typeof P=='function'?P(U):null}):null,w?jsxRuntime.jsx(style.DraggingHandle,{...Y,layouts:layouts.VISIBILITY_HORIZONTAL,onPointerDown:D,children:jsxRuntime.jsx(style.DraggingIconContainer,{tabIndex:0,onKeyDown:X,children:jsxRuntime.jsx(Icon.Icon,{icon:jsxRuntime.jsx(dragging.default,{}),size:34,color:"content-onmain-tertiary"})})}):null,C?jsxRuntime.jsx(style.LayoutSpacer,{...Y,layouts:layouts.VISIBILITY_HORIZONTAL,paddingTop:76}):null,N?jsxRuntime.jsx(style.Container,{...H,sizes:sizes.SIZES_CONTAINER,children:jsxRuntime.jsxs(style.Content,{...H,sizes:sizes.SIZES_CONTENT,children:[jsxRuntime.jsx(Skeleton.Skeleton,{children:jsxRuntime.jsx(Text.Text,{...M,marginBottom:"1.5em"})}),jsxRuntime.jsx(Skeleton.Skeleton,{width:"90%",children:jsxRuntime.jsx(Text.Text,{...V,marginBottom:"0.4em"})}),jsxRuntime.jsx(Skeleton.Skeleton,{width:"70%",children:jsxRuntime.jsx(Text.Text,{...V,marginBottom:"0.4em"})}),jsxRuntime.jsx(Skeleton.Skeleton,{width:"50%",children:jsxRuntime.jsx(Text.Text,{...V,marginBottom:"0.8em"})})]})}):React.isValidElement(I)?I:typeof I=='function'?I({captionProps:Z,titleProps:M,subtitleProps:V}):jsxRuntime.jsxs(style.Container,{...H,sizes:sizes.SIZES_CONTAINER,children:[f?jsxRuntime.jsx(style.StickyHeader,{...H,sizes:sizes.SIZES_STICKY_HEADER,children:jsxRuntime.jsx(Header.Header,{header:T,caption:z,title:A,subtitle:E,captionProps:Z,titleProps:M,subtitleProps:V})}):null,G?jsxRuntime.jsx(style.Fading,{visible:W.top===!1}):null,jsxRuntime.jsxs(style.Content,{...H,sizes:sizes.SIZES_CONTENT,ref:e=>{Q(e)},scrollable:n,tabIndex:n?0:void 0,onScroll:e=>{G&&$(e.currentTarget)},onKeyDown:e=>{constants.keyboardKeys.ArrowUp.validate(e.key)?(e.preventDefault(),e.currentTarget.scrollBy(0,-13)):constants.keyboardKeys.ArrowDown.validate(e.key)&&(e.preventDefault(),e.currentTarget.scrollBy(0,13))},children:[f?null:jsxRuntime.jsx(Header.Header,{header:T,caption:z,title:A,subtitle:E,captionProps:Z,titleProps:M,subtitleProps:V}),b]}),G?jsxRuntime.jsx(style.Fading,{visible:W.bottom===!1,after:!0}):null,k?jsxRuntime.jsx(style.Footer,{...H,sizes:sizes.SIZES_FOOTER,children:k}):null]})]})]})]})})),{sizes:e=>e.fancy?sizes.SIZES_FANCY:sizes.SIZES,displayName:'DialogComponent'});exports.DialogComponent=DialogComponent;
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var useScrollThresholds=require('../../hooks/useScrollThresholds.js');var constants=require('../../shared/constants.js');var dom=require('../../shared/utils/dom.js');var dragging=require('./images/dragging.svg.js');var style=require('./style.js');var sizes=require('./sizes.js');var layouts=require('./layouts.js');var Header=require('./Header.js');var jsxRuntime=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var AspectRatio=require('../AspectRatio/AspectRatio.js');var Skeleton=require('../Skeleton/Skeleton.js');var Text=require('../Text/Text.js');var index=require('../../icon-pack/src/icons/Close/index.js');const DialogComponent=withMergedProps.withMergedProps(React.forwardRef(((e,s)=>{const{size:t="s",layout:n="vertical",scrollable:i=!1,scrollFading:o=!1,sizeXXS:r,sizeXS:l,sizeS:a,sizeM:u,sizeL:c,sizeXL:d,layoutXXS:x,layoutXS:j,layoutS:m,layoutM:y,layoutL:R,layoutXL:S,root:g,floats:p,media:h,body:I,header:T,caption:z,title:A,subtitle:E,children:k,footer:b,closeButton:L,progressLine:C,fancy:P,imgSrcVertical:v,imgSrcHorizontal:_,draggable:w,loading:N,stickyHeader:f,className:O,backgroundClassName:B,onGrab:D,onNudge:q,...X}=e;const H={size:t,sizeXXS:r,sizeXS:l,sizeS:a,sizeM:u,sizeL:c,sizeXL:d};const Y={layout:n,layoutXXS:x,layoutXS:j,layoutS:m,layoutM:y,layoutL:R,layoutXL:S};const Z={...H,appearance:'body',color:'content-onmain-tertiary',wordBreak:'break-word',marginBottom:'0.8em',sizes:sizes.SIZES_CAPTION};const M={...H,as:'h2',appearance:'heading',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.5em',sizes:sizes.SIZES_TITLE};const V={...H,as:'p',appearance:'body',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.8em',sizes:sizes.SIZES_SUBTITLE};const F=P?{icon:jsxRuntime.jsx(index.Close,{}),size:'xxl',secondary:!0}:{icon:jsxRuntime.jsx(index.Close,{}),size:'l',marginTop:8,marginRight:8};const U={size:'xs'};const K=P?O:dom.concatClassNames(O,B);const G=i&&o;const[J,Q]=React.useState(null);const{scrollThresholds:W,setScrollThresholds:$}=useScrollThresholds.useScrollThresholds({enabled:G,target:J});return jsxRuntime.jsxs(style.Root,{...X,...H,...Y,layouts:P?layouts.LAYOUTS_FANCY:layouts.LAYOUTS,className:K,fancy:P,ref:s,children:[P?jsxRuntime.jsx(style.FancyBackground,{className:B}):null,React.isValidElement(g)?g:typeof g=='function'?g({captionProps:Z,titleProps:M,subtitleProps:V,closeButtonProps:F,progressLineProps:U,onGrab:D,onNudge:q}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[p,w?jsxRuntime.jsx(style.DraggingHandle,{...Y,layouts:layouts.VISIBILITY_VERTICAL,onPointerDown:D,children:jsxRuntime.jsx(style.DraggingIconContainer,{tabIndex:0,onKeyDown:q,children:jsxRuntime.jsx(Icon.Icon,{icon:jsxRuntime.jsx(dragging.default,{}),size:34,color:"content-onmain-tertiary"})})}):null,L?jsxRuntime.jsx(style.ButtonPosition,{children:React.isValidElement(L)?L:typeof L=='function'?L(F):null}):null,N||h||v?jsxRuntime.jsx(style.Media,{...Y,layouts:P?layouts.LAYOUTS_FANCY_MEDIA_VERTICAL:layouts.LAYOUTS_MEDIA_VERTICAL,children:N?jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"3:1",width:"100%",children:jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:0})}):React.isValidElement(h)?h:jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"3:1",width:"100%",children:jsxRuntime.jsx(style.Img,{src:v})})}):null,N||h||_?jsxRuntime.jsx(style.Media,{...Y,layouts:layouts.LAYOUTS_MEDIA_HORIZONTAL,children:N?jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"5:7",height:"100%",children:jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:0})}):React.isValidElement(h)?h:jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"5:7",height:"100%",children:jsxRuntime.jsx(style.Img,{src:_})})}):null,jsxRuntime.jsxs(style.Body,{children:[C&&!N?jsxRuntime.jsx(style.ProgressPosition,{...Y,layouts:P?layouts.LAYOUTS_FANCY_PROGRESS:layouts.LAYOUTS_PROGRESS,children:React.isValidElement(C)?C:typeof C=='function'?C(U):null}):null,w?jsxRuntime.jsx(style.DraggingHandle,{...Y,layouts:layouts.VISIBILITY_HORIZONTAL,onPointerDown:D,children:jsxRuntime.jsx(style.DraggingIconContainer,{tabIndex:0,onKeyDown:q,children:jsxRuntime.jsx(Icon.Icon,{icon:jsxRuntime.jsx(dragging.default,{}),size:34,color:"content-onmain-tertiary"})})}):null,P?jsxRuntime.jsx(style.LayoutSpacer,{...Y,layouts:layouts.VISIBILITY_HORIZONTAL,paddingTop:76}):null,N?jsxRuntime.jsx(style.Container,{...H,sizes:sizes.SIZES_CONTAINER,children:jsxRuntime.jsxs(style.Content,{...H,sizes:sizes.SIZES_CONTENT,children:[jsxRuntime.jsx(Skeleton.Skeleton,{children:jsxRuntime.jsx(Text.Text,{...M,marginBottom:"1.5em"})}),jsxRuntime.jsx(Skeleton.Skeleton,{width:"90%",children:jsxRuntime.jsx(Text.Text,{...V,marginBottom:"0.4em"})}),jsxRuntime.jsx(Skeleton.Skeleton,{width:"70%",children:jsxRuntime.jsx(Text.Text,{...V,marginBottom:"0.4em"})}),jsxRuntime.jsx(Skeleton.Skeleton,{width:"50%",children:jsxRuntime.jsx(Text.Text,{...V,marginBottom:"0.8em"})})]})}):React.isValidElement(I)?I:typeof I=='function'?I({captionProps:Z,titleProps:M,subtitleProps:V}):jsxRuntime.jsxs(style.Container,{...H,sizes:sizes.SIZES_CONTAINER,children:[f?jsxRuntime.jsx(style.StickyHeader,{...H,sizes:sizes.SIZES_STICKY_HEADER,children:jsxRuntime.jsx(Header.Header,{header:T,caption:z,title:A,subtitle:E,captionProps:Z,titleProps:M,subtitleProps:V})}):null,G?jsxRuntime.jsx(style.Fading,{visible:W.top===!1}):null,jsxRuntime.jsxs(style.Content,{...H,sizes:sizes.SIZES_CONTENT,ref:e=>{Q(e)},scrollable:i,tabIndex:i?0:void 0,onScroll:e=>{G&&$(e.currentTarget)},onKeyDown:e=>{constants.keyboardKeys.ArrowUp.validate(e.key)?(e.preventDefault(),e.currentTarget.scrollBy(0,-13)):constants.keyboardKeys.ArrowDown.validate(e.key)&&(e.preventDefault(),e.currentTarget.scrollBy(0,13))},children:[f?null:jsxRuntime.jsx(Header.Header,{header:T,caption:z,title:A,subtitle:E,captionProps:Z,titleProps:M,subtitleProps:V}),k]}),G?jsxRuntime.jsx(style.Fading,{visible:W.bottom===!1,after:!0}):null,b?jsxRuntime.jsx(style.Footer,{...H,sizes:sizes.SIZES_FOOTER,children:b}):null]})]})]})]})})),{sizes:e=>e.fancy?sizes.SIZES_FANCY:sizes.SIZES,displayName:'DialogComponent'});exports.DialogComponent=DialogComponent;
 //# sourceMappingURL=DialogComponent.js.map

package/components/DialogComponent/DialogComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogComponent.js","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useState, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ProgressLineProps } from 'components/ProgressLine'\nimport { concatClassNames } from 'shared/utils/dom'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport {\n  SIZES,\n  SIZES_FANCY,\n  SIZES_CONTAINER,\n  SIZES_CONTENT,\n  SIZES_FOOTER,\n  SIZES_CAPTION,\n  SIZES_TITLE,\n  SIZES_SUBTITLE,\n  SIZES_STICKY_HEADER,\n} from './sizes'\nimport {\n  LAYOUTS,\n  LAYOUTS_FANCY,\n  LAYOUTS_MEDIA_VERTICAL,\n  LAYOUTS_FANCY_MEDIA_VERTICAL,\n  LAYOUTS_MEDIA_HORIZONTAL,\n  LAYOUTS_PROGRESS,\n  LAYOUTS_FANCY_PROGRESS,\n  VISIBILITY_VERTICAL,\n  VISIBILITY_HORIZONTAL,\n} from './layouts'\nimport type { DialogComponentProps } from './types'\nimport { Header } from './Header'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n  DialogComponentProps,\n  HTMLDivElement\n>(\n  forwardRef<HTMLDivElement, MergedProps<DialogComponentProps>>((props, ref) => {\n    const {\n      size = 's',\n      layout = 'vertical',\n      scrollable = false,\n      scrollFading = false,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n      root,\n      floats,\n      media,\n      body,\n      header,\n      caption,\n      title,\n      subtitle,\n      children,\n      footer,\n      closeButton,\n      progressLine,\n      fancy,\n      imgSrcVertical,\n      imgSrcHorizontal,\n      draggable,\n      loading,\n      stickyHeader,\n      className,\n      backgroundClassName,\n      onGrab,\n      onNudge,\n      ...restProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const layoutProps = {\n      layout,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n    }\n\n    const captionProps: TextProps = {\n      ...sizeProps,\n      appearance: 'body',\n      color: 'content-onmain-tertiary',\n      wordBreak: 'break-word',\n      marginBottom: '0.8em',\n      sizes: SIZES_CAPTION,\n    }\n\n    const titleProps: TextProps = {\n      ...sizeProps,\n      as: 'h2',\n      appearance: 'heading',\n      color: 'content-onmain-primary',\n      wordBreak: 'break-word',\n      marginBottom: '0.5em',\n      sizes: SIZES_TITLE,\n    }\n\n    const subtitleProps: TextProps = {\n      ...sizeProps,\n      as: 'p',\n      appearance: 'body',\n      color: 'content-onmain-primary',\n      wordBreak: 'break-word',\n      marginBottom: '0.8em',\n      sizes: SIZES_SUBTITLE,\n    }\n\n    const closeButtonProps: IconButtonProps = fancy\n      ? { icon: 'close', size: 'xxl', secondary: true }\n      : { icon: 'close', size: 'l', marginTop: 8, marginRight: 8 }\n\n    const progressLineProps: ProgressLineProps = {\n      size: 'xs',\n    }\n\n    const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n    const scrollFadingEnabled = scrollable && scrollFading\n\n    const [contentRef, setContentRef] = useState<HTMLDivElement | null>(null)\n\n    const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n      enabled: scrollFadingEnabled,\n      target: contentRef,\n    })\n\n    return (\n      <Styled.Root\n        {...restProps}\n        {...sizeProps}\n        {...layoutProps}\n        layouts={fancy ? LAYOUTS_FANCY : LAYOUTS}\n        className={rootClassName}\n        fancy={fancy}\n        ref={ref}\n      >\n        {fancy ? <Styled.FancyBackground className={backgroundClassName} /> : null}\n        {isValidElement(root) ? (\n          root\n        ) : typeof root === 'function' ? (\n          root({\n            captionProps,\n            titleProps,\n            subtitleProps,\n            closeButtonProps,\n            progressLineProps,\n            onGrab,\n            onNudge,\n          })\n        ) : (\n          <>\n            {floats}\n            {draggable ? (\n              <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_VERTICAL} onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            ) : null}\n            {closeButton ? (\n              <Styled.ButtonPosition>\n                {isValidElement(closeButton)\n                  ? closeButton\n                  : typeof closeButton === 'function'\n                    ? closeButton(closeButtonProps)\n                    : null}\n              </Styled.ButtonPosition>\n            ) : null}\n            {loading || media || imgSrcVertical ? (\n              <Styled.Media {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_MEDIA_VERTICAL : LAYOUTS_MEDIA_VERTICAL}>\n                {loading ? (\n                  <AspectRatio ratio='3:1' width='100%'>\n                    <Skeleton borderRadius={0} />\n                  </AspectRatio>\n                ) : isValidElement(media) ? (\n                  media\n                ) : (\n                  <AspectRatio ratio='3:1' width='100%'>\n                    <Styled.Img src={imgSrcVertical} />\n                  </AspectRatio>\n                )}\n              </Styled.Media>\n            ) : null}\n            {loading || media || imgSrcHorizontal ? (\n              <Styled.Media {...layoutProps} layouts={LAYOUTS_MEDIA_HORIZONTAL}>\n                {loading ? (\n                  <AspectRatio ratio='5:7' height='100%'>\n                    <Skeleton borderRadius={0} />\n                  </AspectRatio>\n                ) : isValidElement(media) ? (\n                  media\n                ) : (\n                  <AspectRatio ratio='5:7' height='100%'>\n                    <Styled.Img src={imgSrcHorizontal} />\n                  </AspectRatio>\n                )}\n              </Styled.Media>\n            ) : null}\n            <Styled.Body>\n              {progressLine && !loading ? (\n                <Styled.ProgressPosition {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_PROGRESS : LAYOUTS_PROGRESS}>\n                  {isValidElement(progressLine)\n                    ? progressLine\n                    : typeof progressLine === 'function'\n                      ? progressLine(progressLineProps)\n                      : null}\n                </Styled.ProgressPosition>\n              ) : null}\n              {draggable ? (\n                <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_HORIZONTAL} onPointerDown={onGrab}>\n                  <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                    <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n                  </Styled.DraggingIconContainer>\n                </Styled.DraggingHandle>\n              ) : null}\n              {fancy ? <Styled.LayoutSpacer {...layoutProps} layouts={VISIBILITY_HORIZONTAL} paddingTop={76} /> : null}\n              {loading ? (\n                <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n                  <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n                    <Skeleton>\n                      <Text {...titleProps} marginBottom='1.5em' />\n                    </Skeleton>\n                    <Skeleton width='90%'>\n                      <Text {...subtitleProps} marginBottom='0.4em' />\n                    </Skeleton>\n                    <Skeleton width='70%'>\n                      <Text {...subtitleProps} marginBottom='0.4em' />\n                    </Skeleton>\n                    <Skeleton width='50%'>\n                      <Text {...subtitleProps} marginBottom='0.8em' />\n                    </Skeleton>\n                  </Styled.Content>\n                </Styled.Container>\n              ) : isValidElement(body) ? (\n                body\n              ) : typeof body === 'function' ? (\n                body({\n                  captionProps,\n                  titleProps,\n                  subtitleProps,\n                })\n              ) : (\n                <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n                  {stickyHeader ? (\n                    <Styled.StickyHeader {...sizeProps} sizes={SIZES_STICKY_HEADER}>\n                      <Header\n                        header={header}\n                        caption={caption}\n                        title={title}\n                        subtitle={subtitle}\n                        captionProps={captionProps}\n                        titleProps={titleProps}\n                        subtitleProps={subtitleProps}\n                      />\n                    </Styled.StickyHeader>\n                  ) : null}\n                  {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.top === false} /> : null}\n                  <Styled.Content\n                    {...sizeProps}\n                    sizes={SIZES_CONTENT}\n                    ref={(node) => {\n                      setContentRef(node)\n                    }}\n                    scrollable={scrollable}\n                    tabIndex={scrollable ? 0 : undefined}\n                    onScroll={(evt) => {\n                      if (scrollFadingEnabled) {\n                        setScrollThresholds(evt.currentTarget)\n                      }\n                    }}\n                    onKeyDown={(evt) => {\n                      if (keyboardKeys.ArrowUp.validate(evt.key)) {\n                        evt.preventDefault()\n                        evt.currentTarget.scrollBy(0, -13)\n                      } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n                        evt.preventDefault()\n                        evt.currentTarget.scrollBy(0, 13)\n                      }\n                    }}\n                  >\n                    {!stickyHeader ? (\n                      <Header\n                        header={header}\n                        caption={caption}\n                        title={title}\n                        subtitle={subtitle}\n                        captionProps={captionProps}\n                        titleProps={titleProps}\n                        subtitleProps={subtitleProps}\n                      />\n                    ) : null}\n                    {children}\n                  </Styled.Content>\n                  {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.bottom === false} after /> : null}\n                  {footer ? (\n                    <Styled.Footer {...sizeProps} sizes={SIZES_FOOTER}>\n                      {footer}\n                    </Styled.Footer>\n                  ) : null}\n                </Styled.Container>\n              )}\n            </Styled.Body>\n          </>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { DialogComponent }\n"],"names":["DialogComponent","withMergedProps","forwardRef","props","ref","size","layout","scrollable","scrollFading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","floats","media","body","header","caption","title","subtitle","children","footer","closeButton","progressLine","fancy","imgSrcVertical","imgSrcHorizontal","draggable","loading","stickyHeader","className","backgroundClassName","onGrab","onNudge","restProps","sizeProps","layoutProps","captionProps","appearance","color","wordBreak","marginBottom","sizes","SIZES_CAPTION","titleProps","as","SIZES_TITLE","subtitleProps","SIZES_SUBTITLE","closeButtonProps","icon","secondary","marginTop","marginRight","progressLineProps","rootClassName","concatClassNames","scrollFadingEnabled","contentRef","setContentRef","useState","scrollThresholds","setScrollThresholds","useScrollThresholds","enabled","target","_jsxs","Styled","layouts","LAYOUTS_FANCY","LAYOUTS","_jsx","jsx","isValidElement","jsxs","_Fragment","VISIBILITY_VERTICAL","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","default","LAYOUTS_FANCY_MEDIA_VERTICAL","LAYOUTS_MEDIA_VERTICAL","AspectRatio","ratio","width","Skeleton","borderRadius","src","LAYOUTS_MEDIA_HORIZONTAL","height","LAYOUTS_FANCY_PROGRESS","LAYOUTS_PROGRESS","VISIBILITY_HORIZONTAL","paddingTop","SIZES_CONTAINER","SIZES_CONTENT","Text","SIZES_STICKY_HEADER","Header","visible","top","node","undefined","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","bottom","after","SIZES_FOOTER","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}
+{"version":3,"file":"DialogComponent.js","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useState, isValidElement } from 'react'\nimport { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ProgressLineProps } from 'components/ProgressLine'\nimport { concatClassNames } from 'shared/utils/dom'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport {\n  SIZES,\n  SIZES_FANCY,\n  SIZES_CONTAINER,\n  SIZES_CONTENT,\n  SIZES_FOOTER,\n  SIZES_CAPTION,\n  SIZES_TITLE,\n  SIZES_SUBTITLE,\n  SIZES_STICKY_HEADER,\n} from './sizes'\nimport {\n  LAYOUTS,\n  LAYOUTS_FANCY,\n  LAYOUTS_MEDIA_VERTICAL,\n  LAYOUTS_FANCY_MEDIA_VERTICAL,\n  LAYOUTS_MEDIA_HORIZONTAL,\n  LAYOUTS_PROGRESS,\n  LAYOUTS_FANCY_PROGRESS,\n  VISIBILITY_VERTICAL,\n  VISIBILITY_HORIZONTAL,\n} from './layouts'\nimport type { DialogComponentProps } from './types'\nimport { Header } from './Header'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n  DialogComponentProps,\n  HTMLDivElement\n>(\n  forwardRef<HTMLDivElement, MergedProps<DialogComponentProps>>((props, ref) => {\n    const {\n      size = 's',\n      layout = 'vertical',\n      scrollable = false,\n      scrollFading = false,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n      root,\n      floats,\n      media,\n      body,\n      header,\n      caption,\n      title,\n      subtitle,\n      children,\n      footer,\n      closeButton,\n      progressLine,\n      fancy,\n      imgSrcVertical,\n      imgSrcHorizontal,\n      draggable,\n      loading,\n      stickyHeader,\n      className,\n      backgroundClassName,\n      onGrab,\n      onNudge,\n      ...restProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const layoutProps = {\n      layout,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n    }\n\n    const captionProps: TextProps = {\n      ...sizeProps,\n      appearance: 'body',\n      color: 'content-onmain-tertiary',\n      wordBreak: 'break-word',\n      marginBottom: '0.8em',\n      sizes: SIZES_CAPTION,\n    }\n\n    const titleProps: TextProps = {\n      ...sizeProps,\n      as: 'h2',\n      appearance: 'heading',\n      color: 'content-onmain-primary',\n      wordBreak: 'break-word',\n      marginBottom: '0.5em',\n      sizes: SIZES_TITLE,\n    }\n\n    const subtitleProps: TextProps = {\n      ...sizeProps,\n      as: 'p',\n      appearance: 'body',\n      color: 'content-onmain-primary',\n      wordBreak: 'break-word',\n      marginBottom: '0.8em',\n      sizes: SIZES_SUBTITLE,\n    }\n\n    const closeButtonProps: IconButtonProps = fancy\n      ? { icon: <Close />, size: 'xxl', secondary: true }\n      : { icon: <Close />, size: 'l', marginTop: 8, marginRight: 8 }\n\n    const progressLineProps: ProgressLineProps = {\n      size: 'xs',\n    }\n\n    const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n    const scrollFadingEnabled = scrollable && scrollFading\n\n    const [contentRef, setContentRef] = useState<HTMLDivElement | null>(null)\n\n    const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n      enabled: scrollFadingEnabled,\n      target: contentRef,\n    })\n\n    return (\n      <Styled.Root\n        {...restProps}\n        {...sizeProps}\n        {...layoutProps}\n        layouts={fancy ? LAYOUTS_FANCY : LAYOUTS}\n        className={rootClassName}\n        fancy={fancy}\n        ref={ref}\n      >\n        {fancy ? <Styled.FancyBackground className={backgroundClassName} /> : null}\n        {isValidElement(root) ? (\n          root\n        ) : typeof root === 'function' ? (\n          root({\n            captionProps,\n            titleProps,\n            subtitleProps,\n            closeButtonProps,\n            progressLineProps,\n            onGrab,\n            onNudge,\n          })\n        ) : (\n          <>\n            {floats}\n            {draggable ? (\n              <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_VERTICAL} onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            ) : null}\n            {closeButton ? (\n              <Styled.ButtonPosition>\n                {isValidElement(closeButton)\n                  ? closeButton\n                  : typeof closeButton === 'function'\n                    ? closeButton(closeButtonProps)\n                    : null}\n              </Styled.ButtonPosition>\n            ) : null}\n            {loading || media || imgSrcVertical ? (\n              <Styled.Media {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_MEDIA_VERTICAL : LAYOUTS_MEDIA_VERTICAL}>\n                {loading ? (\n                  <AspectRatio ratio='3:1' width='100%'>\n                    <Skeleton borderRadius={0} />\n                  </AspectRatio>\n                ) : isValidElement(media) ? (\n                  media\n                ) : (\n                  <AspectRatio ratio='3:1' width='100%'>\n                    <Styled.Img src={imgSrcVertical} />\n                  </AspectRatio>\n                )}\n              </Styled.Media>\n            ) : null}\n            {loading || media || imgSrcHorizontal ? (\n              <Styled.Media {...layoutProps} layouts={LAYOUTS_MEDIA_HORIZONTAL}>\n                {loading ? (\n                  <AspectRatio ratio='5:7' height='100%'>\n                    <Skeleton borderRadius={0} />\n                  </AspectRatio>\n                ) : isValidElement(media) ? (\n                  media\n                ) : (\n                  <AspectRatio ratio='5:7' height='100%'>\n                    <Styled.Img src={imgSrcHorizontal} />\n                  </AspectRatio>\n                )}\n              </Styled.Media>\n            ) : null}\n            <Styled.Body>\n              {progressLine && !loading ? (\n                <Styled.ProgressPosition {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_PROGRESS : LAYOUTS_PROGRESS}>\n                  {isValidElement(progressLine)\n                    ? progressLine\n                    : typeof progressLine === 'function'\n                      ? progressLine(progressLineProps)\n                      : null}\n                </Styled.ProgressPosition>\n              ) : null}\n              {draggable ? (\n                <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_HORIZONTAL} onPointerDown={onGrab}>\n                  <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                    <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n                  </Styled.DraggingIconContainer>\n                </Styled.DraggingHandle>\n              ) : null}\n              {fancy ? <Styled.LayoutSpacer {...layoutProps} layouts={VISIBILITY_HORIZONTAL} paddingTop={76} /> : null}\n              {loading ? (\n                <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n                  <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n                    <Skeleton>\n                      <Text {...titleProps} marginBottom='1.5em' />\n                    </Skeleton>\n                    <Skeleton width='90%'>\n                      <Text {...subtitleProps} marginBottom='0.4em' />\n                    </Skeleton>\n                    <Skeleton width='70%'>\n                      <Text {...subtitleProps} marginBottom='0.4em' />\n                    </Skeleton>\n                    <Skeleton width='50%'>\n                      <Text {...subtitleProps} marginBottom='0.8em' />\n                    </Skeleton>\n                  </Styled.Content>\n                </Styled.Container>\n              ) : isValidElement(body) ? (\n                body\n              ) : typeof body === 'function' ? (\n                body({\n                  captionProps,\n                  titleProps,\n                  subtitleProps,\n                })\n              ) : (\n                <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n                  {stickyHeader ? (\n                    <Styled.StickyHeader {...sizeProps} sizes={SIZES_STICKY_HEADER}>\n                      <Header\n                        header={header}\n                        caption={caption}\n                        title={title}\n                        subtitle={subtitle}\n                        captionProps={captionProps}\n                        titleProps={titleProps}\n                        subtitleProps={subtitleProps}\n                      />\n                    </Styled.StickyHeader>\n                  ) : null}\n                  {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.top === false} /> : null}\n                  <Styled.Content\n                    {...sizeProps}\n                    sizes={SIZES_CONTENT}\n                    ref={(node) => {\n                      setContentRef(node)\n                    }}\n                    scrollable={scrollable}\n                    tabIndex={scrollable ? 0 : undefined}\n                    onScroll={(evt) => {\n                      if (scrollFadingEnabled) {\n                        setScrollThresholds(evt.currentTarget)\n                      }\n                    }}\n                    onKeyDown={(evt) => {\n                      if (keyboardKeys.ArrowUp.validate(evt.key)) {\n                        evt.preventDefault()\n                        evt.currentTarget.scrollBy(0, -13)\n                      } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n                        evt.preventDefault()\n                        evt.currentTarget.scrollBy(0, 13)\n                      }\n                    }}\n                  >\n                    {!stickyHeader ? (\n                      <Header\n                        header={header}\n                        caption={caption}\n                        title={title}\n                        subtitle={subtitle}\n                        captionProps={captionProps}\n                        titleProps={titleProps}\n                        subtitleProps={subtitleProps}\n                      />\n                    ) : null}\n                    {children}\n                  </Styled.Content>\n                  {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.bottom === false} after /> : null}\n                  {footer ? (\n                    <Styled.Footer {...sizeProps} sizes={SIZES_FOOTER}>\n                      {footer}\n                    </Styled.Footer>\n                  ) : null}\n                </Styled.Container>\n              )}\n            </Styled.Body>\n          </>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { DialogComponent }\n"],"names":["DialogComponent","withMergedProps","forwardRef","props","ref","size","layout","scrollable","scrollFading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","floats","media","body","header","caption","title","subtitle","children","footer","closeButton","progressLine","fancy","imgSrcVertical","imgSrcHorizontal","draggable","loading","stickyHeader","className","backgroundClassName","onGrab","onNudge","restProps","sizeProps","layoutProps","captionProps","appearance","color","wordBreak","marginBottom","sizes","SIZES_CAPTION","titleProps","as","SIZES_TITLE","subtitleProps","SIZES_SUBTITLE","closeButtonProps","icon","_jsx","Close","secondary","marginTop","marginRight","progressLineProps","rootClassName","concatClassNames","scrollFadingEnabled","contentRef","setContentRef","useState","scrollThresholds","setScrollThresholds","useScrollThresholds","enabled","target","_jsxs","Styled","layouts","LAYOUTS_FANCY","LAYOUTS","jsx","isValidElement","jsxs","_Fragment","VISIBILITY_VERTICAL","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","default","LAYOUTS_FANCY_MEDIA_VERTICAL","LAYOUTS_MEDIA_VERTICAL","AspectRatio","ratio","width","Skeleton","borderRadius","src","LAYOUTS_MEDIA_HORIZONTAL","height","LAYOUTS_FANCY_PROGRESS","LAYOUTS_PROGRESS","VISIBILITY_HORIZONTAL","paddingTop","SIZES_CONTAINER","SIZES_CONTENT","Text","SIZES_STICKY_HEADER","Header","visible","top","node","undefined","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","bottom","after","SIZES_FOOTER","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}

package/components/DialogComponent/DialogComponent.mjs

@@ -1,2 +1,2 @@
-import{forwardRef,useState,isValidElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useScrollThresholds}from'../../hooks/useScrollThresholds.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{concatClassNames}from'../../shared/utils/dom.mjs';import SvgDragging from'./images/dragging.svg.mjs';import{Root,FancyBackground,DraggingHandle,DraggingIconContainer,ButtonPosition,Media,Img,Body,ProgressPosition,LayoutSpacer,Container,Content,StickyHeader,Fading,Footer}from'./style.mjs';import{SIZES_FANCY,SIZES,SIZES_CONTAINER,SIZES_CONTENT,SIZES_STICKY_HEADER,SIZES_FOOTER,SIZES_CAPTION,SIZES_TITLE,SIZES_SUBTITLE}from'./sizes.mjs';import{LAYOUTS_FANCY,LAYOUTS,VISIBILITY_VERTICAL,LAYOUTS_FANCY_MEDIA_VERTICAL,LAYOUTS_MEDIA_VERTICAL,LAYOUTS_MEDIA_HORIZONTAL,LAYOUTS_FANCY_PROGRESS,LAYOUTS_PROGRESS,VISIBILITY_HORIZONTAL}from'./layouts.mjs';import{Header}from'./Header.mjs';import{jsxs,jsx,Fragment}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';import{AspectRatio}from'../AspectRatio/AspectRatio.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Text}from'../Text/Text.mjs';const DialogComponent=withMergedProps(forwardRef(((e,o)=>{const{size:t="s",layout:s="vertical",scrollable:r=!1,scrollFading:n=!1,sizeXXS:i,sizeXS:a,sizeS:l,sizeM:c,sizeL:d,sizeXL:S,layoutXXS:m,layoutXS:g,layoutS:I,layoutM:p,layoutL:u,layoutXL:T,root:y,floats:x,media:j,body:E,header:h,caption:A,title:_,subtitle:L,children:O,footer:R,closeButton:C,progressLine:f,fancy:N,imgSrcVertical:b,imgSrcHorizontal:z,draggable:P,loading:Y,stickyHeader:D,className:k,backgroundClassName:B,onGrab:Z,onNudge:w,...F}=e;const V={size:t,sizeXXS:i,sizeXS:a,sizeS:l,sizeM:c,sizeL:d,sizeXL:S};const H={layout:s,layoutXXS:m,layoutXS:g,layoutS:I,layoutM:p,layoutL:u,layoutXL:T};const U={...V,appearance:'body',color:'content-onmain-tertiary',wordBreak:'break-word',marginBottom:'0.8em',sizes:SIZES_CAPTION};const M={...V,as:'h2',appearance:'heading',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.5em',sizes:SIZES_TITLE};const X={...V,as:'p',appearance:'body',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.8em',sizes:SIZES_SUBTITLE};const v=N?{icon:'close',size:'xxl',secondary:!0}:{icon:'close',size:'l',marginTop:8,marginRight:8};const K={size:'xs'};const G=N?k:concatClassNames(k,B);const q=r&&n;const[J,Q]=useState(null);const{scrollThresholds:W,setScrollThresholds:$}=useScrollThresholds({enabled:q,target:J});return jsxs(Root,{...F,...V,...H,layouts:N?LAYOUTS_FANCY:LAYOUTS,className:G,fancy:N,ref:o,children:[N?jsx(FancyBackground,{className:B}):null,isValidElement(y)?y:typeof y=='function'?y({captionProps:U,titleProps:M,subtitleProps:X,closeButtonProps:v,progressLineProps:K,onGrab:Z,onNudge:w}):jsxs(Fragment,{children:[x,P?jsx(DraggingHandle,{...H,layouts:VISIBILITY_VERTICAL,onPointerDown:Z,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:w,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary"})})}):null,C?jsx(ButtonPosition,{children:isValidElement(C)?C:typeof C=='function'?C(v):null}):null,Y||j||b?jsx(Media,{...H,layouts:N?LAYOUTS_FANCY_MEDIA_VERTICAL:LAYOUTS_MEDIA_VERTICAL,children:Y?jsx(AspectRatio,{ratio:"3:1",width:"100%",children:jsx(Skeleton,{borderRadius:0})}):isValidElement(j)?j:jsx(AspectRatio,{ratio:"3:1",width:"100%",children:jsx(Img,{src:b})})}):null,Y||j||z?jsx(Media,{...H,layouts:LAYOUTS_MEDIA_HORIZONTAL,children:Y?jsx(AspectRatio,{ratio:"5:7",height:"100%",children:jsx(Skeleton,{borderRadius:0})}):isValidElement(j)?j:jsx(AspectRatio,{ratio:"5:7",height:"100%",children:jsx(Img,{src:z})})}):null,jsxs(Body,{children:[f&&!Y?jsx(ProgressPosition,{...H,layouts:N?LAYOUTS_FANCY_PROGRESS:LAYOUTS_PROGRESS,children:isValidElement(f)?f:typeof f=='function'?f(K):null}):null,P?jsx(DraggingHandle,{...H,layouts:VISIBILITY_HORIZONTAL,onPointerDown:Z,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:w,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary"})})}):null,N?jsx(LayoutSpacer,{...H,layouts:VISIBILITY_HORIZONTAL,paddingTop:76}):null,Y?jsx(Container,{...V,sizes:SIZES_CONTAINER,children:jsxs(Content,{...V,sizes:SIZES_CONTENT,children:[jsx(Skeleton,{children:jsx(Text,{...M,marginBottom:"1.5em"})}),jsx(Skeleton,{width:"90%",children:jsx(Text,{...X,marginBottom:"0.4em"})}),jsx(Skeleton,{width:"70%",children:jsx(Text,{...X,marginBottom:"0.4em"})}),jsx(Skeleton,{width:"50%",children:jsx(Text,{...X,marginBottom:"0.8em"})})]})}):isValidElement(E)?E:typeof E=='function'?E({captionProps:U,titleProps:M,subtitleProps:X}):jsxs(Container,{...V,sizes:SIZES_CONTAINER,children:[D?jsx(StickyHeader,{...V,sizes:SIZES_STICKY_HEADER,children:jsx(Header,{header:h,caption:A,title:_,subtitle:L,captionProps:U,titleProps:M,subtitleProps:X})}):null,q?jsx(Fading,{visible:W.top===!1}):null,jsxs(Content,{...V,sizes:SIZES_CONTENT,ref:e=>{Q(e)},scrollable:r,tabIndex:r?0:void 0,onScroll:e=>{q&&$(e.currentTarget)},onKeyDown:e=>{keyboardKeys.ArrowUp.validate(e.key)?(e.preventDefault(),e.currentTarget.scrollBy(0,-13)):keyboardKeys.ArrowDown.validate(e.key)&&(e.preventDefault(),e.currentTarget.scrollBy(0,13))},children:[D?null:jsx(Header,{header:h,caption:A,title:_,subtitle:L,captionProps:U,titleProps:M,subtitleProps:X}),O]}),q?jsx(Fading,{visible:W.bottom===!1,after:!0}):null,R?jsx(Footer,{...V,sizes:SIZES_FOOTER,children:R}):null]})]})]})]})})),{sizes:e=>e.fancy?SIZES_FANCY:SIZES,displayName:'DialogComponent'});export{DialogComponent};
+import{forwardRef,useState,isValidElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useScrollThresholds}from'../../hooks/useScrollThresholds.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{concatClassNames}from'../../shared/utils/dom.mjs';import SvgDragging from'./images/dragging.svg.mjs';import{Root,FancyBackground,DraggingHandle,DraggingIconContainer,ButtonPosition,Media,Img,Body,ProgressPosition,LayoutSpacer,Container,Content,StickyHeader,Fading,Footer}from'./style.mjs';import{SIZES_FANCY,SIZES,SIZES_CONTAINER,SIZES_CONTENT,SIZES_STICKY_HEADER,SIZES_FOOTER,SIZES_CAPTION,SIZES_TITLE,SIZES_SUBTITLE}from'./sizes.mjs';import{LAYOUTS_FANCY,LAYOUTS,VISIBILITY_VERTICAL,LAYOUTS_FANCY_MEDIA_VERTICAL,LAYOUTS_MEDIA_VERTICAL,LAYOUTS_MEDIA_HORIZONTAL,LAYOUTS_FANCY_PROGRESS,LAYOUTS_PROGRESS,VISIBILITY_HORIZONTAL}from'./layouts.mjs';import{Header}from'./Header.mjs';import{jsxs,jsx,Fragment}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';import{AspectRatio}from'../AspectRatio/AspectRatio.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Text}from'../Text/Text.mjs';import{Close}from'../../icon-pack/src/icons/Close/index.mjs';const DialogComponent=withMergedProps(forwardRef(((o,e)=>{const{size:t="s",layout:s="vertical",scrollable:r=!1,scrollFading:n=!1,sizeXXS:i,sizeXS:a,sizeS:l,sizeM:c,sizeL:d,sizeXL:S,layoutXXS:m,layoutXS:g,layoutS:I,layoutM:p,layoutL:u,layoutXL:T,root:x,floats:j,media:y,body:E,header:h,caption:A,title:_,subtitle:L,children:C,footer:O,closeButton:R,progressLine:f,fancy:N,imgSrcVertical:b,imgSrcHorizontal:z,draggable:P,loading:Y,stickyHeader:k,className:D,backgroundClassName:B,onGrab:Z,onNudge:w,...F}=o;const V={size:t,sizeXXS:i,sizeXS:a,sizeS:l,sizeM:c,sizeL:d,sizeXL:S};const H={layout:s,layoutXXS:m,layoutXS:g,layoutS:I,layoutM:p,layoutL:u,layoutXL:T};const U={...V,appearance:'body',color:'content-onmain-tertiary',wordBreak:'break-word',marginBottom:'0.8em',sizes:SIZES_CAPTION};const M={...V,as:'h2',appearance:'heading',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.5em',sizes:SIZES_TITLE};const X={...V,as:'p',appearance:'body',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.8em',sizes:SIZES_SUBTITLE};const v=N?{icon:jsx(Close,{}),size:'xxl',secondary:!0}:{icon:jsx(Close,{}),size:'l',marginTop:8,marginRight:8};const K={size:'xs'};const G=N?D:concatClassNames(D,B);const q=r&&n;const[J,Q]=useState(null);const{scrollThresholds:W,setScrollThresholds:$}=useScrollThresholds({enabled:q,target:J});return jsxs(Root,{...F,...V,...H,layouts:N?LAYOUTS_FANCY:LAYOUTS,className:G,fancy:N,ref:e,children:[N?jsx(FancyBackground,{className:B}):null,isValidElement(x)?x:typeof x=='function'?x({captionProps:U,titleProps:M,subtitleProps:X,closeButtonProps:v,progressLineProps:K,onGrab:Z,onNudge:w}):jsxs(Fragment,{children:[j,P?jsx(DraggingHandle,{...H,layouts:VISIBILITY_VERTICAL,onPointerDown:Z,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:w,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary"})})}):null,R?jsx(ButtonPosition,{children:isValidElement(R)?R:typeof R=='function'?R(v):null}):null,Y||y||b?jsx(Media,{...H,layouts:N?LAYOUTS_FANCY_MEDIA_VERTICAL:LAYOUTS_MEDIA_VERTICAL,children:Y?jsx(AspectRatio,{ratio:"3:1",width:"100%",children:jsx(Skeleton,{borderRadius:0})}):isValidElement(y)?y:jsx(AspectRatio,{ratio:"3:1",width:"100%",children:jsx(Img,{src:b})})}):null,Y||y||z?jsx(Media,{...H,layouts:LAYOUTS_MEDIA_HORIZONTAL,children:Y?jsx(AspectRatio,{ratio:"5:7",height:"100%",children:jsx(Skeleton,{borderRadius:0})}):isValidElement(y)?y:jsx(AspectRatio,{ratio:"5:7",height:"100%",children:jsx(Img,{src:z})})}):null,jsxs(Body,{children:[f&&!Y?jsx(ProgressPosition,{...H,layouts:N?LAYOUTS_FANCY_PROGRESS:LAYOUTS_PROGRESS,children:isValidElement(f)?f:typeof f=='function'?f(K):null}):null,P?jsx(DraggingHandle,{...H,layouts:VISIBILITY_HORIZONTAL,onPointerDown:Z,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:w,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary"})})}):null,N?jsx(LayoutSpacer,{...H,layouts:VISIBILITY_HORIZONTAL,paddingTop:76}):null,Y?jsx(Container,{...V,sizes:SIZES_CONTAINER,children:jsxs(Content,{...V,sizes:SIZES_CONTENT,children:[jsx(Skeleton,{children:jsx(Text,{...M,marginBottom:"1.5em"})}),jsx(Skeleton,{width:"90%",children:jsx(Text,{...X,marginBottom:"0.4em"})}),jsx(Skeleton,{width:"70%",children:jsx(Text,{...X,marginBottom:"0.4em"})}),jsx(Skeleton,{width:"50%",children:jsx(Text,{...X,marginBottom:"0.8em"})})]})}):isValidElement(E)?E:typeof E=='function'?E({captionProps:U,titleProps:M,subtitleProps:X}):jsxs(Container,{...V,sizes:SIZES_CONTAINER,children:[k?jsx(StickyHeader,{...V,sizes:SIZES_STICKY_HEADER,children:jsx(Header,{header:h,caption:A,title:_,subtitle:L,captionProps:U,titleProps:M,subtitleProps:X})}):null,q?jsx(Fading,{visible:W.top===!1}):null,jsxs(Content,{...V,sizes:SIZES_CONTENT,ref:o=>{Q(o)},scrollable:r,tabIndex:r?0:void 0,onScroll:o=>{q&&$(o.currentTarget)},onKeyDown:o=>{keyboardKeys.ArrowUp.validate(o.key)?(o.preventDefault(),o.currentTarget.scrollBy(0,-13)):keyboardKeys.ArrowDown.validate(o.key)&&(o.preventDefault(),o.currentTarget.scrollBy(0,13))},children:[k?null:jsx(Header,{header:h,caption:A,title:_,subtitle:L,captionProps:U,titleProps:M,subtitleProps:X}),C]}),q?jsx(Fading,{visible:W.bottom===!1,after:!0}):null,O?jsx(Footer,{...V,sizes:SIZES_FOOTER,children:O}):null]})]})]})]})})),{sizes:o=>o.fancy?SIZES_FANCY:SIZES,displayName:'DialogComponent'});export{DialogComponent};
 //# sourceMappingURL=DialogComponent.mjs.map

package/components/DialogComponent/DialogComponent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DialogComponent.mjs","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useState, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ProgressLineProps } from 'components/ProgressLine'\nimport { concatClassNames } from 'shared/utils/dom'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport {\n  SIZES,\n  SIZES_FANCY,\n  SIZES_CONTAINER,\n  SIZES_CONTENT,\n  SIZES_FOOTER,\n  SIZES_CAPTION,\n  SIZES_TITLE,\n  SIZES_SUBTITLE,\n  SIZES_STICKY_HEADER,\n} from './sizes'\nimport {\n  LAYOUTS,\n  LAYOUTS_FANCY,\n  LAYOUTS_MEDIA_VERTICAL,\n  LAYOUTS_FANCY_MEDIA_VERTICAL,\n  LAYOUTS_MEDIA_HORIZONTAL,\n  LAYOUTS_PROGRESS,\n  LAYOUTS_FANCY_PROGRESS,\n  VISIBILITY_VERTICAL,\n  VISIBILITY_HORIZONTAL,\n} from './layouts'\nimport type { DialogComponentProps } from './types'\nimport { Header } from './Header'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n  DialogComponentProps,\n  HTMLDivElement\n>(\n  forwardRef<HTMLDivElement, MergedProps<DialogComponentProps>>((props, ref) => {\n    const {\n      size = 's',\n      layout = 'vertical',\n      scrollable = false,\n      scrollFading = false,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n      root,\n      floats,\n      media,\n      body,\n      header,\n      caption,\n      title,\n      subtitle,\n      children,\n      footer,\n      closeButton,\n      progressLine,\n      fancy,\n      imgSrcVertical,\n      imgSrcHorizontal,\n      draggable,\n      loading,\n      stickyHeader,\n      className,\n      backgroundClassName,\n      onGrab,\n      onNudge,\n      ...restProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const layoutProps = {\n      layout,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n    }\n\n    const captionProps: TextProps = {\n      ...sizeProps,\n      appearance: 'body',\n      color: 'content-onmain-tertiary',\n      wordBreak: 'break-word',\n      marginBottom: '0.8em',\n      sizes: SIZES_CAPTION,\n    }\n\n    const titleProps: TextProps = {\n      ...sizeProps,\n      as: 'h2',\n      appearance: 'heading',\n      color: 'content-onmain-primary',\n      wordBreak: 'break-word',\n      marginBottom: '0.5em',\n      sizes: SIZES_TITLE,\n    }\n\n    const subtitleProps: TextProps = {\n      ...sizeProps,\n      as: 'p',\n      appearance: 'body',\n      color: 'content-onmain-primary',\n      wordBreak: 'break-word',\n      marginBottom: '0.8em',\n      sizes: SIZES_SUBTITLE,\n    }\n\n    const closeButtonProps: IconButtonProps = fancy\n      ? { icon: 'close', size: 'xxl', secondary: true }\n      : { icon: 'close', size: 'l', marginTop: 8, marginRight: 8 }\n\n    const progressLineProps: ProgressLineProps = {\n      size: 'xs',\n    }\n\n    const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n    const scrollFadingEnabled = scrollable && scrollFading\n\n    const [contentRef, setContentRef] = useState<HTMLDivElement | null>(null)\n\n    const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n      enabled: scrollFadingEnabled,\n      target: contentRef,\n    })\n\n    return (\n      <Styled.Root\n        {...restProps}\n        {...sizeProps}\n        {...layoutProps}\n        layouts={fancy ? LAYOUTS_FANCY : LAYOUTS}\n        className={rootClassName}\n        fancy={fancy}\n        ref={ref}\n      >\n        {fancy ? <Styled.FancyBackground className={backgroundClassName} /> : null}\n        {isValidElement(root) ? (\n          root\n        ) : typeof root === 'function' ? (\n          root({\n            captionProps,\n            titleProps,\n            subtitleProps,\n            closeButtonProps,\n            progressLineProps,\n            onGrab,\n            onNudge,\n          })\n        ) : (\n          <>\n            {floats}\n            {draggable ? (\n              <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_VERTICAL} onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            ) : null}\n            {closeButton ? (\n              <Styled.ButtonPosition>\n                {isValidElement(closeButton)\n                  ? closeButton\n                  : typeof closeButton === 'function'\n                    ? closeButton(closeButtonProps)\n                    : null}\n              </Styled.ButtonPosition>\n            ) : null}\n            {loading || media || imgSrcVertical ? (\n              <Styled.Media {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_MEDIA_VERTICAL : LAYOUTS_MEDIA_VERTICAL}>\n                {loading ? (\n                  <AspectRatio ratio='3:1' width='100%'>\n                    <Skeleton borderRadius={0} />\n                  </AspectRatio>\n                ) : isValidElement(media) ? (\n                  media\n                ) : (\n                  <AspectRatio ratio='3:1' width='100%'>\n                    <Styled.Img src={imgSrcVertical} />\n                  </AspectRatio>\n                )}\n              </Styled.Media>\n            ) : null}\n            {loading || media || imgSrcHorizontal ? (\n              <Styled.Media {...layoutProps} layouts={LAYOUTS_MEDIA_HORIZONTAL}>\n                {loading ? (\n                  <AspectRatio ratio='5:7' height='100%'>\n                    <Skeleton borderRadius={0} />\n                  </AspectRatio>\n                ) : isValidElement(media) ? (\n                  media\n                ) : (\n                  <AspectRatio ratio='5:7' height='100%'>\n                    <Styled.Img src={imgSrcHorizontal} />\n                  </AspectRatio>\n                )}\n              </Styled.Media>\n            ) : null}\n            <Styled.Body>\n              {progressLine && !loading ? (\n                <Styled.ProgressPosition {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_PROGRESS : LAYOUTS_PROGRESS}>\n                  {isValidElement(progressLine)\n                    ? progressLine\n                    : typeof progressLine === 'function'\n                      ? progressLine(progressLineProps)\n                      : null}\n                </Styled.ProgressPosition>\n              ) : null}\n              {draggable ? (\n                <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_HORIZONTAL} onPointerDown={onGrab}>\n                  <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                    <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n                  </Styled.DraggingIconContainer>\n                </Styled.DraggingHandle>\n              ) : null}\n              {fancy ? <Styled.LayoutSpacer {...layoutProps} layouts={VISIBILITY_HORIZONTAL} paddingTop={76} /> : null}\n              {loading ? (\n                <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n                  <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n                    <Skeleton>\n                      <Text {...titleProps} marginBottom='1.5em' />\n                    </Skeleton>\n                    <Skeleton width='90%'>\n                      <Text {...subtitleProps} marginBottom='0.4em' />\n                    </Skeleton>\n                    <Skeleton width='70%'>\n                      <Text {...subtitleProps} marginBottom='0.4em' />\n                    </Skeleton>\n                    <Skeleton width='50%'>\n                      <Text {...subtitleProps} marginBottom='0.8em' />\n                    </Skeleton>\n                  </Styled.Content>\n                </Styled.Container>\n              ) : isValidElement(body) ? (\n                body\n              ) : typeof body === 'function' ? (\n                body({\n                  captionProps,\n                  titleProps,\n                  subtitleProps,\n                })\n              ) : (\n                <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n                  {stickyHeader ? (\n                    <Styled.StickyHeader {...sizeProps} sizes={SIZES_STICKY_HEADER}>\n                      <Header\n                        header={header}\n                        caption={caption}\n                        title={title}\n                        subtitle={subtitle}\n                        captionProps={captionProps}\n                        titleProps={titleProps}\n                        subtitleProps={subtitleProps}\n                      />\n                    </Styled.StickyHeader>\n                  ) : null}\n                  {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.top === false} /> : null}\n                  <Styled.Content\n                    {...sizeProps}\n                    sizes={SIZES_CONTENT}\n                    ref={(node) => {\n                      setContentRef(node)\n                    }}\n                    scrollable={scrollable}\n                    tabIndex={scrollable ? 0 : undefined}\n                    onScroll={(evt) => {\n                      if (scrollFadingEnabled) {\n                        setScrollThresholds(evt.currentTarget)\n                      }\n                    }}\n                    onKeyDown={(evt) => {\n                      if (keyboardKeys.ArrowUp.validate(evt.key)) {\n                        evt.preventDefault()\n                        evt.currentTarget.scrollBy(0, -13)\n                      } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n                        evt.preventDefault()\n                        evt.currentTarget.scrollBy(0, 13)\n                      }\n                    }}\n                  >\n                    {!stickyHeader ? (\n                      <Header\n                        header={header}\n                        caption={caption}\n                        title={title}\n                        subtitle={subtitle}\n                        captionProps={captionProps}\n                        titleProps={titleProps}\n                        subtitleProps={subtitleProps}\n                      />\n                    ) : null}\n                    {children}\n                  </Styled.Content>\n                  {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.bottom === false} after /> : null}\n                  {footer ? (\n                    <Styled.Footer {...sizeProps} sizes={SIZES_FOOTER}>\n                      {footer}\n                    </Styled.Footer>\n                  ) : null}\n                </Styled.Container>\n              )}\n            </Styled.Body>\n          </>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { DialogComponent }\n"],"names":["DialogComponent","withMergedProps","forwardRef","props","ref","size","layout","scrollable","scrollFading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","floats","media","body","header","caption","title","subtitle","children","footer","closeButton","progressLine","fancy","imgSrcVertical","imgSrcHorizontal","draggable","loading","stickyHeader","className","backgroundClassName","onGrab","onNudge","restProps","sizeProps","layoutProps","captionProps","appearance","color","wordBreak","marginBottom","sizes","SIZES_CAPTION","titleProps","as","SIZES_TITLE","subtitleProps","SIZES_SUBTITLE","closeButtonProps","icon","secondary","marginTop","marginRight","progressLineProps","rootClassName","concatClassNames","scrollFadingEnabled","contentRef","setContentRef","useState","scrollThresholds","setScrollThresholds","useScrollThresholds","enabled","target","_jsxs","Styled","layouts","LAYOUTS_FANCY","LAYOUTS","_jsx","isValidElement","_Fragment","VISIBILITY_VERTICAL","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","LAYOUTS_FANCY_MEDIA_VERTICAL","LAYOUTS_MEDIA_VERTICAL","AspectRatio","ratio","width","Skeleton","borderRadius","src","LAYOUTS_MEDIA_HORIZONTAL","height","LAYOUTS_FANCY_PROGRESS","LAYOUTS_PROGRESS","VISIBILITY_HORIZONTAL","paddingTop","SIZES_CONTAINER","SIZES_CONTENT","Text","SIZES_STICKY_HEADER","Header","visible","top","node","undefined","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","bottom","after","SIZES_FOOTER","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}
+{"version":3,"file":"DialogComponent.mjs","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useState, isValidElement } from 'react'\nimport { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ProgressLineProps } from 'components/ProgressLine'\nimport { concatClassNames } from 'shared/utils/dom'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport {\n  SIZES,\n  SIZES_FANCY,\n  SIZES_CONTAINER,\n  SIZES_CONTENT,\n  SIZES_FOOTER,\n  SIZES_CAPTION,\n  SIZES_TITLE,\n  SIZES_SUBTITLE,\n  SIZES_STICKY_HEADER,\n} from './sizes'\nimport {\n  LAYOUTS,\n  LAYOUTS_FANCY,\n  LAYOUTS_MEDIA_VERTICAL,\n  LAYOUTS_FANCY_MEDIA_VERTICAL,\n  LAYOUTS_MEDIA_HORIZONTAL,\n  LAYOUTS_PROGRESS,\n  LAYOUTS_FANCY_PROGRESS,\n  VISIBILITY_VERTICAL,\n  VISIBILITY_HORIZONTAL,\n} from './layouts'\nimport type { DialogComponentProps } from './types'\nimport { Header } from './Header'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n  DialogComponentProps,\n  HTMLDivElement\n>(\n  forwardRef<HTMLDivElement, MergedProps<DialogComponentProps>>((props, ref) => {\n    const {\n      size = 's',\n      layout = 'vertical',\n      scrollable = false,\n      scrollFading = false,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n      root,\n      floats,\n      media,\n      body,\n      header,\n      caption,\n      title,\n      subtitle,\n      children,\n      footer,\n      closeButton,\n      progressLine,\n      fancy,\n      imgSrcVertical,\n      imgSrcHorizontal,\n      draggable,\n      loading,\n      stickyHeader,\n      className,\n      backgroundClassName,\n      onGrab,\n      onNudge,\n      ...restProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const layoutProps = {\n      layout,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n    }\n\n    const captionProps: TextProps = {\n      ...sizeProps,\n      appearance: 'body',\n      color: 'content-onmain-tertiary',\n      wordBreak: 'break-word',\n      marginBottom: '0.8em',\n      sizes: SIZES_CAPTION,\n    }\n\n    const titleProps: TextProps = {\n      ...sizeProps,\n      as: 'h2',\n      appearance: 'heading',\n      color: 'content-onmain-primary',\n      wordBreak: 'break-word',\n      marginBottom: '0.5em',\n      sizes: SIZES_TITLE,\n    }\n\n    const subtitleProps: TextProps = {\n      ...sizeProps,\n      as: 'p',\n      appearance: 'body',\n      color: 'content-onmain-primary',\n      wordBreak: 'break-word',\n      marginBottom: '0.8em',\n      sizes: SIZES_SUBTITLE,\n    }\n\n    const closeButtonProps: IconButtonProps = fancy\n      ? { icon: <Close />, size: 'xxl', secondary: true }\n      : { icon: <Close />, size: 'l', marginTop: 8, marginRight: 8 }\n\n    const progressLineProps: ProgressLineProps = {\n      size: 'xs',\n    }\n\n    const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n    const scrollFadingEnabled = scrollable && scrollFading\n\n    const [contentRef, setContentRef] = useState<HTMLDivElement | null>(null)\n\n    const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n      enabled: scrollFadingEnabled,\n      target: contentRef,\n    })\n\n    return (\n      <Styled.Root\n        {...restProps}\n        {...sizeProps}\n        {...layoutProps}\n        layouts={fancy ? LAYOUTS_FANCY : LAYOUTS}\n        className={rootClassName}\n        fancy={fancy}\n        ref={ref}\n      >\n        {fancy ? <Styled.FancyBackground className={backgroundClassName} /> : null}\n        {isValidElement(root) ? (\n          root\n        ) : typeof root === 'function' ? (\n          root({\n            captionProps,\n            titleProps,\n            subtitleProps,\n            closeButtonProps,\n            progressLineProps,\n            onGrab,\n            onNudge,\n          })\n        ) : (\n          <>\n            {floats}\n            {draggable ? (\n              <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_VERTICAL} onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            ) : null}\n            {closeButton ? (\n              <Styled.ButtonPosition>\n                {isValidElement(closeButton)\n                  ? closeButton\n                  : typeof closeButton === 'function'\n                    ? closeButton(closeButtonProps)\n                    : null}\n              </Styled.ButtonPosition>\n            ) : null}\n            {loading || media || imgSrcVertical ? (\n              <Styled.Media {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_MEDIA_VERTICAL : LAYOUTS_MEDIA_VERTICAL}>\n                {loading ? (\n                  <AspectRatio ratio='3:1' width='100%'>\n                    <Skeleton borderRadius={0} />\n                  </AspectRatio>\n                ) : isValidElement(media) ? (\n                  media\n                ) : (\n                  <AspectRatio ratio='3:1' width='100%'>\n                    <Styled.Img src={imgSrcVertical} />\n                  </AspectRatio>\n                )}\n              </Styled.Media>\n            ) : null}\n            {loading || media || imgSrcHorizontal ? (\n              <Styled.Media {...layoutProps} layouts={LAYOUTS_MEDIA_HORIZONTAL}>\n                {loading ? (\n                  <AspectRatio ratio='5:7' height='100%'>\n                    <Skeleton borderRadius={0} />\n                  </AspectRatio>\n                ) : isValidElement(media) ? (\n                  media\n                ) : (\n                  <AspectRatio ratio='5:7' height='100%'>\n                    <Styled.Img src={imgSrcHorizontal} />\n                  </AspectRatio>\n                )}\n              </Styled.Media>\n            ) : null}\n            <Styled.Body>\n              {progressLine && !loading ? (\n                <Styled.ProgressPosition {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_PROGRESS : LAYOUTS_PROGRESS}>\n                  {isValidElement(progressLine)\n                    ? progressLine\n                    : typeof progressLine === 'function'\n                      ? progressLine(progressLineProps)\n                      : null}\n                </Styled.ProgressPosition>\n              ) : null}\n              {draggable ? (\n                <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_HORIZONTAL} onPointerDown={onGrab}>\n                  <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                    <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n                  </Styled.DraggingIconContainer>\n                </Styled.DraggingHandle>\n              ) : null}\n              {fancy ? <Styled.LayoutSpacer {...layoutProps} layouts={VISIBILITY_HORIZONTAL} paddingTop={76} /> : null}\n              {loading ? (\n                <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n                  <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n                    <Skeleton>\n                      <Text {...titleProps} marginBottom='1.5em' />\n                    </Skeleton>\n                    <Skeleton width='90%'>\n                      <Text {...subtitleProps} marginBottom='0.4em' />\n                    </Skeleton>\n                    <Skeleton width='70%'>\n                      <Text {...subtitleProps} marginBottom='0.4em' />\n                    </Skeleton>\n                    <Skeleton width='50%'>\n                      <Text {...subtitleProps} marginBottom='0.8em' />\n                    </Skeleton>\n                  </Styled.Content>\n                </Styled.Container>\n              ) : isValidElement(body) ? (\n                body\n              ) : typeof body === 'function' ? (\n                body({\n                  captionProps,\n                  titleProps,\n                  subtitleProps,\n                })\n              ) : (\n                <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n                  {stickyHeader ? (\n                    <Styled.StickyHeader {...sizeProps} sizes={SIZES_STICKY_HEADER}>\n                      <Header\n                        header={header}\n                        caption={caption}\n                        title={title}\n                        subtitle={subtitle}\n                        captionProps={captionProps}\n                        titleProps={titleProps}\n                        subtitleProps={subtitleProps}\n                      />\n                    </Styled.StickyHeader>\n                  ) : null}\n                  {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.top === false} /> : null}\n                  <Styled.Content\n                    {...sizeProps}\n                    sizes={SIZES_CONTENT}\n                    ref={(node) => {\n                      setContentRef(node)\n                    }}\n                    scrollable={scrollable}\n                    tabIndex={scrollable ? 0 : undefined}\n                    onScroll={(evt) => {\n                      if (scrollFadingEnabled) {\n                        setScrollThresholds(evt.currentTarget)\n                      }\n                    }}\n                    onKeyDown={(evt) => {\n                      if (keyboardKeys.ArrowUp.validate(evt.key)) {\n                        evt.preventDefault()\n                        evt.currentTarget.scrollBy(0, -13)\n                      } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n                        evt.preventDefault()\n                        evt.currentTarget.scrollBy(0, 13)\n                      }\n                    }}\n                  >\n                    {!stickyHeader ? (\n                      <Header\n                        header={header}\n                        caption={caption}\n                        title={title}\n                        subtitle={subtitle}\n                        captionProps={captionProps}\n                        titleProps={titleProps}\n                        subtitleProps={subtitleProps}\n                      />\n                    ) : null}\n                    {children}\n                  </Styled.Content>\n                  {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.bottom === false} after /> : null}\n                  {footer ? (\n                    <Styled.Footer {...sizeProps} sizes={SIZES_FOOTER}>\n                      {footer}\n                    </Styled.Footer>\n                  ) : null}\n                </Styled.Container>\n              )}\n            </Styled.Body>\n          </>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { DialogComponent }\n"],"names":["DialogComponent","withMergedProps","forwardRef","props","ref","size","layout","scrollable","scrollFading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","floats","media","body","header","caption","title","subtitle","children","footer","closeButton","progressLine","fancy","imgSrcVertical","imgSrcHorizontal","draggable","loading","stickyHeader","className","backgroundClassName","onGrab","onNudge","restProps","sizeProps","layoutProps","captionProps","appearance","color","wordBreak","marginBottom","sizes","SIZES_CAPTION","titleProps","as","SIZES_TITLE","subtitleProps","SIZES_SUBTITLE","closeButtonProps","icon","_jsx","Close","secondary","marginTop","marginRight","progressLineProps","rootClassName","concatClassNames","scrollFadingEnabled","contentRef","setContentRef","useState","scrollThresholds","setScrollThresholds","useScrollThresholds","enabled","target","_jsxs","Styled","layouts","LAYOUTS_FANCY","LAYOUTS","isValidElement","_Fragment","VISIBILITY_VERTICAL","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","LAYOUTS_FANCY_MEDIA_VERTICAL","LAYOUTS_MEDIA_VERTICAL","AspectRatio","ratio","width","Skeleton","borderRadius","src","LAYOUTS_MEDIA_HORIZONTAL","height","LAYOUTS_FANCY_PROGRESS","LAYOUTS_PROGRESS","VISIBILITY_HORIZONTAL","paddingTop","SIZES_CONTAINER","SIZES_CONTENT","Text","SIZES_STICKY_HEADER","Header","visible","top","node","undefined","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","bottom","after","SIZES_FOOTER","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}