@foxford/ui 2.111.0 → 2.112.0

package/components/AddElement/style.js

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var hover=require('../../mixins/hover.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardProp=style.createShouldForwardProp(o=>!['variant','square'].includes(o));const IconContainer=styled__default.default.span.withConfig({shouldForwardProp}).withConfig({displayName:"AddElement__IconContainer",componentId:"ui__sc-7123ed-0"})(["flex-shrink:0;display:flex;transition-property:color;transition-duration:250ms;"," ",""],o=>`\n      order: ${o.square?'initial':'2'};\n    `,responsiveSize.responsiveSize);const TextContainer=styled__default.default.span.withConfig({displayName:"AddElement__TextContainer",componentId:"ui__sc-7123ed-1"})(["transition-property:color;transition-duration:250ms;"]);const template=o=>`\n  color: ${o.titleColor};\n  background-color: ${o.backgroundColor};\n  border-color: ${o.borderColor};\n\n  &::before {\n    box-shadow: inset 0px 4px 0px ${o.shadowColor};\n  }\n\n  & ${TextContainer} {\n    color: ${o.textColor};\n  }\n\n  & ${IconContainer} {\n    color: ${o.iconColor};\n  }\n\n  ${hover.hover(`\n    color: ${o.titleColorHover};\n    background-color: ${o.backgroundColorHover};\n    border-color: ${o.borderColorHover};\n  `)}\n  ${hover.hover(`\n    color: ${o.textColorHover};\n  `,`&:hover ${TextContainer}`)}\n  ${hover.hover(`\n    color: ${o.iconColorHover};\n  `,`&:hover ${IconContainer}`)}\n\n  &:active {\n    color: ${o.titleColorActive};\n    background-color: ${o.backgroundColorActive};\n    border-color: ${o.borderColorActive};\n  }\n  &:active ${TextContainer} {\n    color: ${o.textColorActive};\n  }\n  &:active ${IconContainer} {\n    color: ${o.iconColorActive};\n  }\n\n  &:disabled {\n    color: ${o.titleColorDisabled};\n    background-color: ${o.backgroundColorDisabled};\n    border-color: ${o.borderColorDisabled};\n  }\n  &:disabled ${TextContainer} {\n    color: ${o.textColorDisabled};\n  }\n  &:disabled ${IconContainer} {\n    color: ${o.iconColorDisabled};\n  }\n`;const COLOR_SCHEMA={default:styled.css(["",""],o=>template({iconColor:o.theme.colors['content-brand-primary'],titleColor:o.theme.colors['content-brand-primary'],textColor:o.theme.colors['content-onmain-tertiary'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors['border-brand-primary'],iconColorHover:o.theme.colors['content-oncolor-primary'],titleColorHover:o.theme.colors['content-oncolor-primary'],textColorHover:o.theme.colors['content-oncolor-tertiary'],backgroundColorHover:o.theme.colors['bg-brand-primary-basic'],borderColorHover:o.theme.colors.transparent,iconColorActive:o.theme.colors['content-oncolor-primary'],titleColorActive:o.theme.colors['content-oncolor-primary'],textColorActive:o.theme.colors['content-oncolor-tertiary'],backgroundColorActive:o.theme.colors['bg-brand-primary-basic'],borderColorActive:o.theme.colors.transparent,iconColorDisabled:o.theme.colors['content-disabled'],titleColorDisabled:o.theme.colors['content-disabled'],textColorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors['border-disabled'],shadowColor:tinycolor__default.default(o.theme.colors.black).setAlpha(.16).toString(),...o.palette})),neutral:styled.css(["",""],o=>template({iconColor:o.theme.colors['content-onmain-primary'],titleColor:o.theme.colors['content-onmain-primary'],textColor:o.theme.colors['content-onmain-tertiary'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors['border-onmain-default-small'],iconColorHover:o.theme.colors['content-oncolor-primary'],titleColorHover:o.theme.colors['content-oncolor-primary'],textColorHover:o.theme.colors['content-oncolor-tertiary'],backgroundColorHover:o.theme.colors['bg-onmain-contrast'],borderColorHover:o.theme.colors.transparent,iconColorActive:o.theme.colors['content-oncolor-primary'],titleColorActive:o.theme.colors['content-oncolor-primary'],textColorActive:o.theme.colors['content-oncolor-tertiary'],backgroundColorActive:o.theme.colors['bg-onmain-contrast'],borderColorActive:o.theme.colors.transparent,iconColorDisabled:o.theme.colors['content-disabled'],titleColorDisabled:o.theme.colors['content-disabled'],textColorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors['border-disabled'],shadowColor:tinycolor__default.default(o.theme.colors.black).setAlpha(.16).toString(),...o.palette})),contrast:styled.css(["",""],o=>template({iconColor:o.theme.colors['content-oncolor-primary'],titleColor:o.theme.colors['content-oncolor-primary'],textColor:o.theme.colors['content-oncolor-tertiary'],backgroundColor:o.theme.colors.transparent,borderColor:tinycolor__default.default(o.theme.colors['content-oncolor-primary']).darken(6).toString(),iconColorHover:o.theme.colors['content-onmain-primary'],titleColorHover:o.theme.colors['content-onmain-primary'],textColorHover:o.theme.colors['content-onmain-tertiary'],backgroundColorHover:o.theme.colors['content-oncolor-primary'],borderColorHover:o.theme.colors.transparent,iconColorActive:o.theme.colors['content-onmain-primary'],titleColorActive:o.theme.colors['content-onmain-primary'],textColorActive:o.theme.colors['content-onmain-tertiary'],backgroundColorActive:o.theme.colors['content-oncolor-primary'],borderColorActive:o.theme.colors.transparent,iconColorDisabled:o.theme.colors['content-oncolor-disabled'],titleColorDisabled:o.theme.colors['content-oncolor-disabled'],textColorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors['border-oncolor-disabled'],shadowColor:tinycolor__default.default(o.theme.colors.black).setAlpha(.16).toString(),...o.palette}))};const Root=styled__default.default.button.withConfig({shouldForwardProp}).withConfig({displayName:"AddElement__Root",componentId:"ui__sc-7123ed-2"})(["box-sizing:border-box;position:relative;isolation:isolate;appearance:none;display:flex;align-items:center;border:1px dashed;transition-property:color,background-color;transition-duration:250ms;&::before{content:'';position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);border-radius:inherit;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:ease-in;}&:active:not(:disabled)::before{opacity:1;}"," "," "," "," ",""],o=>`\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      width: ${o.square?'initial':'100%'};\n      flex-direction: ${o.square?'column':'row'};\n      justify-content: ${o.square?'center':'space-between'};\n      text-align: ${o.square?'center':'left'};\n    `,o=>COLOR_SCHEMA[o.variant],focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Content=styled__default.default.span.withConfig({shouldForwardProp}).withConfig({displayName:"AddElement__Content",componentId:"ui__sc-7123ed-3"})(["flex-direction:column;width:100%;"," ",""],o=>`\n      order: ${o.square?'initial':'1'};\n      align-items: ${o.square?'center':'flex-start'};\n    `,responsiveSize.responsiveSize);exports.Content=Content,exports.IconContainer=IconContainer,exports.Root=Root,exports.TextContainer=TextContainer;
+'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var hover=require('../../mixins/hover.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardProp=style.createShouldForwardProp(o=>!['variant','square'].includes(o));const IconContainer=styled__default.default.span.withConfig({shouldForwardProp}).withConfig({displayName:"AddElement__IconContainer",componentId:"ui__sc-7123ed-0"})(["flex-shrink:0;display:flex;transition-property:color;transition-duration:250ms;"," ",""],o=>`\n      order: ${o.square?'initial':'2'};\n    `,responsiveSize.responsiveSize);const TextContainer=styled__default.default.span.withConfig({displayName:"AddElement__TextContainer",componentId:"ui__sc-7123ed-1"})(["transition-property:color;transition-duration:250ms;"]);const template=o=>`\n  color: ${o.titleColor};\n  background-color: ${o.backgroundColor};\n  border-color: ${o.borderColor};\n\n  &::before {\n    box-shadow: inset 0px 4px 0px ${o.shadowColor};\n  }\n\n  & ${TextContainer} {\n    color: ${o.textColor};\n  }\n\n  & ${IconContainer} {\n    color: ${o.iconColor};\n  }\n\n  ${hover.hover(`\n    color: ${o.titleColorHover};\n    background-color: ${o.backgroundColorHover};\n    border-color: ${o.borderColorHover};\n  `)}\n  ${hover.hover(`\n    color: ${o.textColorHover};\n  `,`&:hover ${TextContainer}`)}\n  ${hover.hover(`\n    color: ${o.iconColorHover};\n  `,`&:hover ${IconContainer}`)}\n\n  &:active {\n    color: ${o.titleColorActive};\n    background-color: ${o.backgroundColorActive};\n    border-color: ${o.borderColorActive};\n  }\n  &:active ${TextContainer} {\n    color: ${o.textColorActive};\n  }\n  &:active ${IconContainer} {\n    color: ${o.iconColorActive};\n  }\n\n  &:disabled {\n    color: ${o.titleColorDisabled};\n    background-color: ${o.backgroundColorDisabled};\n    border-color: ${o.borderColorDisabled};\n  }\n  &:disabled ${TextContainer} {\n    color: ${o.textColorDisabled};\n  }\n  &:disabled ${IconContainer} {\n    color: ${o.iconColorDisabled};\n  }\n`;const COLOR_SCHEMA={default:styled.css(["",""],o=>template({iconColor:o.theme.colors['content-brand-primary'],titleColor:o.theme.colors['content-brand-primary'],textColor:o.theme.colors['content-onmain-tertiary'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors['border-brand-primary'],iconColorHover:o.theme.colors['content-oncolor-primary'],titleColorHover:o.theme.colors['content-oncolor-primary'],textColorHover:o.theme.colors['content-oncolor-tertiary'],backgroundColorHover:o.theme.colors['bg-brand-primary-basic'],borderColorHover:o.theme.colors.transparent,iconColorActive:o.theme.colors['content-oncolor-primary'],titleColorActive:o.theme.colors['content-oncolor-primary'],textColorActive:o.theme.colors['content-oncolor-tertiary'],backgroundColorActive:o.theme.colors['bg-brand-primary-basic'],borderColorActive:o.theme.colors.transparent,iconColorDisabled:o.theme.colors['content-disabled'],titleColorDisabled:o.theme.colors['content-disabled'],textColorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors['border-disabled'],shadowColor:o.theme.colors['effect-shadow-press'],...o.palette})),neutral:styled.css(["",""],o=>template({iconColor:o.theme.colors['content-onmain-primary'],titleColor:o.theme.colors['content-onmain-primary'],textColor:o.theme.colors['content-onmain-tertiary'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors['border-onmain-default-small'],iconColorHover:o.theme.colors['content-oncolor-primary'],titleColorHover:o.theme.colors['content-oncolor-primary'],textColorHover:o.theme.colors['content-oncolor-tertiary'],backgroundColorHover:o.theme.colors['bg-onmain-contrast'],borderColorHover:o.theme.colors.transparent,iconColorActive:o.theme.colors['content-oncolor-primary'],titleColorActive:o.theme.colors['content-oncolor-primary'],textColorActive:o.theme.colors['content-oncolor-tertiary'],backgroundColorActive:o.theme.colors['bg-onmain-contrast'],borderColorActive:o.theme.colors.transparent,iconColorDisabled:o.theme.colors['content-disabled'],titleColorDisabled:o.theme.colors['content-disabled'],textColorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors['border-disabled'],shadowColor:o.theme.colors['effect-shadow-press'],...o.palette})),contrast:styled.css(["",""],o=>template({iconColor:o.theme.colors['content-oncolor-primary'],titleColor:o.theme.colors['content-oncolor-primary'],textColor:o.theme.colors['content-oncolor-tertiary'],backgroundColor:o.theme.colors.transparent,borderColor:tinycolor__default.default(o.theme.colors['content-oncolor-primary']).darken(6).toString(),iconColorHover:o.theme.colors['content-onmain-primary'],titleColorHover:o.theme.colors['content-onmain-primary'],textColorHover:o.theme.colors['content-onmain-tertiary'],backgroundColorHover:o.theme.colors['content-oncolor-primary'],borderColorHover:o.theme.colors.transparent,iconColorActive:o.theme.colors['content-onmain-primary'],titleColorActive:o.theme.colors['content-onmain-primary'],textColorActive:o.theme.colors['content-onmain-tertiary'],backgroundColorActive:o.theme.colors['content-oncolor-primary'],borderColorActive:o.theme.colors.transparent,iconColorDisabled:o.theme.colors['content-oncolor-disabled'],titleColorDisabled:o.theme.colors['content-oncolor-disabled'],textColorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors['border-oncolor-disabled'],shadowColor:o.theme.colors['effect-shadow-press'],...o.palette}))};const Root=styled__default.default.button.withConfig({shouldForwardProp}).withConfig({displayName:"AddElement__Root",componentId:"ui__sc-7123ed-2"})(["box-sizing:border-box;position:relative;isolation:isolate;appearance:none;display:flex;align-items:center;border:1px dashed;transition-property:color,background-color;transition-duration:250ms;&::before{content:'';position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);border-radius:inherit;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:ease-in;}&:active:not(:disabled)::before{opacity:1;}"," "," "," "," ",""],o=>`\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      width: ${o.square?'initial':'100%'};\n      flex-direction: ${o.square?'column':'row'};\n      justify-content: ${o.square?'center':'space-between'};\n      text-align: ${o.square?'center':'left'};\n    `,o=>COLOR_SCHEMA[o.variant],focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Content=styled__default.default.span.withConfig({shouldForwardProp}).withConfig({displayName:"AddElement__Content",componentId:"ui__sc-7123ed-3"})(["flex-direction:column;width:100%;"," ",""],o=>`\n      order: ${o.square?'initial':'1'};\n      align-items: ${o.square?'center':'flex-start'};\n    `,responsiveSize.responsiveSize);exports.Content=Content,exports.IconContainer=IconContainer,exports.Root=Root,exports.TextContainer=TextContainer;
 //# sourceMappingURL=style.js.map

package/components/AddElement/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/AddElement/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { CSSColor } from 'shared/types'\nimport type { ResponsiveSizeInterpolationProps, ResponsiveSizeProps } from 'shared/interfaces'\nimport { hover } from 'mixins/hover'\nimport type { StyledAddElementProps, AddElementPalette, Size, AddElementProps } from './types'\n\nconst shouldForwardProp = createShouldForwardProp((propKey) => {\n  return !['variant', 'square'].includes(propKey)\n})\n\nexport const IconContainer = styled.span.withConfig<\n  ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>> & Pick<AddElementProps, 'square'>\n>({\n  shouldForwardProp,\n})`\n  flex-shrink: 0;\n  display: flex;\n  transition-property: color;\n  transition-duration: 250ms;\n\n  ${(props) =>\n    `\n      order: ${props.square ? 'initial' : '2'};\n    `}\n\n  ${responsiveSize}\n`\n\nexport const TextContainer = styled.span`\n  transition-property: color;\n  transition-duration: 250ms;\n`\n\nconst template = (palette: AddElementPalette) => `\n  color: ${palette.titleColor};\n  background-color: ${palette.backgroundColor};\n  border-color: ${palette.borderColor};\n\n  &::before {\n    box-shadow: inset 0px 4px 0px ${palette.shadowColor};\n  }\n\n  & ${TextContainer} {\n    color: ${palette.textColor};\n  }\n\n  & ${IconContainer} {\n    color: ${palette.iconColor};\n  }\n\n  ${hover(`\n    color: ${palette.titleColorHover};\n    background-color: ${palette.backgroundColorHover};\n    border-color: ${palette.borderColorHover};\n  `)}\n  ${hover(\n    `\n    color: ${palette.textColorHover};\n  `,\n    `&:hover ${TextContainer}`\n  )}\n  ${hover(\n    `\n    color: ${palette.iconColorHover};\n  `,\n    `&:hover ${IconContainer}`\n  )}\n\n  &:active {\n    color: ${palette.titleColorActive};\n    background-color: ${palette.backgroundColorActive};\n    border-color: ${palette.borderColorActive};\n  }\n  &:active ${TextContainer} {\n    color: ${palette.textColorActive};\n  }\n  &:active ${IconContainer} {\n    color: ${palette.iconColorActive};\n  }\n\n  &:disabled {\n    color: ${palette.titleColorDisabled};\n    background-color: ${palette.backgroundColorDisabled};\n    border-color: ${palette.borderColorDisabled};\n  }\n  &:disabled ${TextContainer} {\n    color: ${palette.textColorDisabled};\n  }\n  &:disabled ${IconContainer} {\n    color: ${palette.iconColorDisabled};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  default: css<StyledAddElementProps>`\n    ${(props) =>\n      template({\n        iconColor: props.theme.colors['content-brand-primary'],\n        titleColor: props.theme.colors['content-brand-primary'],\n        textColor: props.theme.colors['content-onmain-tertiary'],\n        backgroundColor: props.theme.colors.transparent,\n        borderColor: props.theme.colors['border-brand-primary'],\n        iconColorHover: props.theme.colors['content-oncolor-primary'],\n        titleColorHover: props.theme.colors['content-oncolor-primary'],\n        textColorHover: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColorHover: props.theme.colors['bg-brand-primary-basic'],\n        borderColorHover: props.theme.colors.transparent,\n        iconColorActive: props.theme.colors['content-oncolor-primary'],\n        titleColorActive: props.theme.colors['content-oncolor-primary'],\n        textColorActive: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColorActive: props.theme.colors['bg-brand-primary-basic'],\n        borderColorActive: props.theme.colors.transparent,\n        iconColorDisabled: props.theme.colors['content-disabled'],\n        titleColorDisabled: props.theme.colors['content-disabled'],\n        textColorDisabled: props.theme.colors['content-disabled'],\n        backgroundColorDisabled: props.theme.colors.transparent,\n        borderColorDisabled: props.theme.colors['border-disabled'],\n        shadowColor: tinycolor(props.theme.colors['black']).setAlpha(0.16).toString() as CSSColor,\n        ...props.palette,\n      })}\n  `,\n  neutral: css<StyledAddElementProps>`\n    ${(props) =>\n      template({\n        iconColor: props.theme.colors['content-onmain-primary'],\n        titleColor: props.theme.colors['content-onmain-primary'],\n        textColor: props.theme.colors['content-onmain-tertiary'],\n        backgroundColor: props.theme.colors.transparent,\n        borderColor: props.theme.colors['border-onmain-default-small'],\n        iconColorHover: props.theme.colors['content-oncolor-primary'],\n        titleColorHover: props.theme.colors['content-oncolor-primary'],\n        textColorHover: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColorHover: props.theme.colors['bg-onmain-contrast'],\n        borderColorHover: props.theme.colors.transparent,\n        iconColorActive: props.theme.colors['content-oncolor-primary'],\n        titleColorActive: props.theme.colors['content-oncolor-primary'],\n        textColorActive: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColorActive: props.theme.colors['bg-onmain-contrast'],\n        borderColorActive: props.theme.colors.transparent,\n        iconColorDisabled: props.theme.colors['content-disabled'],\n        titleColorDisabled: props.theme.colors['content-disabled'],\n        textColorDisabled: props.theme.colors['content-disabled'],\n        backgroundColorDisabled: props.theme.colors.transparent,\n        borderColorDisabled: props.theme.colors['border-disabled'],\n        shadowColor: tinycolor(props.theme.colors['black']).setAlpha(0.16).toString() as CSSColor,\n        ...props.palette,\n      })}\n  `,\n  contrast: css<StyledAddElementProps>`\n    ${(props) =>\n      template({\n        iconColor: props.theme.colors['content-oncolor-primary'],\n        titleColor: props.theme.colors['content-oncolor-primary'],\n        textColor: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColor: props.theme.colors.transparent,\n        borderColor: tinycolor(props.theme.colors['content-oncolor-primary']).darken(6).toString() as CSSColor,\n        iconColorHover: props.theme.colors['content-onmain-primary'],\n        titleColorHover: props.theme.colors['content-onmain-primary'],\n        textColorHover: props.theme.colors['content-onmain-tertiary'],\n        backgroundColorHover: props.theme.colors['content-oncolor-primary'],\n        borderColorHover: props.theme.colors.transparent,\n        iconColorActive: props.theme.colors['content-onmain-primary'],\n        titleColorActive: props.theme.colors['content-onmain-primary'],\n        textColorActive: props.theme.colors['content-onmain-tertiary'],\n        backgroundColorActive: props.theme.colors['content-oncolor-primary'],\n        borderColorActive: props.theme.colors.transparent,\n        iconColorDisabled: props.theme.colors['content-oncolor-disabled'],\n        titleColorDisabled: props.theme.colors['content-oncolor-disabled'],\n        textColorDisabled: props.theme.colors['content-oncolor-disabled'],\n        backgroundColorDisabled: props.theme.colors.transparent,\n        borderColorDisabled: props.theme.colors['border-oncolor-disabled'],\n        shadowColor: tinycolor(props.theme.colors['black']).setAlpha(0.16).toString() as CSSColor,\n        ...props.palette,\n      })}\n  `,\n}\n\nexport const Root = styled.button.withConfig<StyledAddElementProps>({\n  shouldForwardProp,\n})`\n  box-sizing: border-box;\n  position: relative;\n  isolation: isolate;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  border: 1px dashed;\n  transition-property: color, background-color;\n  transition-duration: 250ms;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: -1px;\n    left: -1px;\n    width: calc(100% + 2px);\n    height: calc(100% + 2px);\n    border-radius: inherit;\n    opacity: 0;\n    transition-property: opacity;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n  }\n\n  &:active:not(:disabled)::before {\n    opacity: 1;\n  }\n\n  ${(props) =>\n    `\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n      width: ${props.square ? 'initial' : '100%'};\n      flex-direction: ${props.square ? 'column' : 'row'};\n      justify-content: ${props.square ? 'center' : 'space-between'};\n      text-align: ${props.square ? 'center' : 'left'};\n    `}\n\n  ${(props) => COLOR_SCHEMA[props.variant]}\n\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Content = styled.span.withConfig<\n  ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>> & Pick<AddElementProps, 'square'>\n>({\n  shouldForwardProp,\n})`\n  flex-direction: column;\n  width: 100%;\n\n  ${(props) =>\n    `\n      order: ${props.square ? 'initial' : '1'};\n      align-items: ${props.square ? 'center' : 'flex-start'};\n    `}\n\n  ${responsiveSize}\n`\n"],"names":["shouldForwardProp","createShouldForwardProp","propKey","includes","IconContainer","styled","span","withConfig","displayName","componentId","props","square","responsiveSize","TextContainer","template","palette","titleColor","backgroundColor","borderColor","shadowColor","textColor","iconColor","hover","titleColorHover","backgroundColorHover","borderColorHover","textColorHover","iconColorHover","titleColorActive","backgroundColorActive","borderColorActive","textColorActive","iconColorActive","titleColorDisabled","backgroundColorDisabled","borderColorDisabled","textColorDisabled","iconColorDisabled","COLOR_SCHEMA","default","css","theme","colors","transparent","tinycolor","setAlpha","toString","neutral","contrast","darken","Root","button","disabled","variant","focus","responsiveMargin","Content"],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/AddElement/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { CSSColor } from 'shared/types'\nimport type { ResponsiveSizeInterpolationProps, ResponsiveSizeProps } from 'shared/interfaces'\nimport { hover } from 'mixins/hover'\nimport type { StyledAddElementProps, AddElementPalette, Size, AddElementProps } from './types'\n\nconst shouldForwardProp = createShouldForwardProp((propKey) => {\n  return !['variant', 'square'].includes(propKey)\n})\n\nexport const IconContainer = styled.span.withConfig<\n  ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>> & Pick<AddElementProps, 'square'>\n>({\n  shouldForwardProp,\n})`\n  flex-shrink: 0;\n  display: flex;\n  transition-property: color;\n  transition-duration: 250ms;\n\n  ${(props) =>\n    `\n      order: ${props.square ? 'initial' : '2'};\n    `}\n\n  ${responsiveSize}\n`\n\nexport const TextContainer = styled.span`\n  transition-property: color;\n  transition-duration: 250ms;\n`\n\nconst template = (palette: AddElementPalette) => `\n  color: ${palette.titleColor};\n  background-color: ${palette.backgroundColor};\n  border-color: ${palette.borderColor};\n\n  &::before {\n    box-shadow: inset 0px 4px 0px ${palette.shadowColor};\n  }\n\n  & ${TextContainer} {\n    color: ${palette.textColor};\n  }\n\n  & ${IconContainer} {\n    color: ${palette.iconColor};\n  }\n\n  ${hover(`\n    color: ${palette.titleColorHover};\n    background-color: ${palette.backgroundColorHover};\n    border-color: ${palette.borderColorHover};\n  `)}\n  ${hover(\n    `\n    color: ${palette.textColorHover};\n  `,\n    `&:hover ${TextContainer}`\n  )}\n  ${hover(\n    `\n    color: ${palette.iconColorHover};\n  `,\n    `&:hover ${IconContainer}`\n  )}\n\n  &:active {\n    color: ${palette.titleColorActive};\n    background-color: ${palette.backgroundColorActive};\n    border-color: ${palette.borderColorActive};\n  }\n  &:active ${TextContainer} {\n    color: ${palette.textColorActive};\n  }\n  &:active ${IconContainer} {\n    color: ${palette.iconColorActive};\n  }\n\n  &:disabled {\n    color: ${palette.titleColorDisabled};\n    background-color: ${palette.backgroundColorDisabled};\n    border-color: ${palette.borderColorDisabled};\n  }\n  &:disabled ${TextContainer} {\n    color: ${palette.textColorDisabled};\n  }\n  &:disabled ${IconContainer} {\n    color: ${palette.iconColorDisabled};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  default: css<StyledAddElementProps>`\n    ${(props) =>\n      template({\n        iconColor: props.theme.colors['content-brand-primary'],\n        titleColor: props.theme.colors['content-brand-primary'],\n        textColor: props.theme.colors['content-onmain-tertiary'],\n        backgroundColor: props.theme.colors.transparent,\n        borderColor: props.theme.colors['border-brand-primary'],\n        iconColorHover: props.theme.colors['content-oncolor-primary'],\n        titleColorHover: props.theme.colors['content-oncolor-primary'],\n        textColorHover: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColorHover: props.theme.colors['bg-brand-primary-basic'],\n        borderColorHover: props.theme.colors.transparent,\n        iconColorActive: props.theme.colors['content-oncolor-primary'],\n        titleColorActive: props.theme.colors['content-oncolor-primary'],\n        textColorActive: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColorActive: props.theme.colors['bg-brand-primary-basic'],\n        borderColorActive: props.theme.colors.transparent,\n        iconColorDisabled: props.theme.colors['content-disabled'],\n        titleColorDisabled: props.theme.colors['content-disabled'],\n        textColorDisabled: props.theme.colors['content-disabled'],\n        backgroundColorDisabled: props.theme.colors.transparent,\n        borderColorDisabled: props.theme.colors['border-disabled'],\n        shadowColor: props.theme.colors['effect-shadow-press'],\n        ...props.palette,\n      })}\n  `,\n  neutral: css<StyledAddElementProps>`\n    ${(props) =>\n      template({\n        iconColor: props.theme.colors['content-onmain-primary'],\n        titleColor: props.theme.colors['content-onmain-primary'],\n        textColor: props.theme.colors['content-onmain-tertiary'],\n        backgroundColor: props.theme.colors.transparent,\n        borderColor: props.theme.colors['border-onmain-default-small'],\n        iconColorHover: props.theme.colors['content-oncolor-primary'],\n        titleColorHover: props.theme.colors['content-oncolor-primary'],\n        textColorHover: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColorHover: props.theme.colors['bg-onmain-contrast'],\n        borderColorHover: props.theme.colors.transparent,\n        iconColorActive: props.theme.colors['content-oncolor-primary'],\n        titleColorActive: props.theme.colors['content-oncolor-primary'],\n        textColorActive: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColorActive: props.theme.colors['bg-onmain-contrast'],\n        borderColorActive: props.theme.colors.transparent,\n        iconColorDisabled: props.theme.colors['content-disabled'],\n        titleColorDisabled: props.theme.colors['content-disabled'],\n        textColorDisabled: props.theme.colors['content-disabled'],\n        backgroundColorDisabled: props.theme.colors.transparent,\n        borderColorDisabled: props.theme.colors['border-disabled'],\n        shadowColor: props.theme.colors['effect-shadow-press'],\n        ...props.palette,\n      })}\n  `,\n  contrast: css<StyledAddElementProps>`\n    ${(props) =>\n      template({\n        iconColor: props.theme.colors['content-oncolor-primary'],\n        titleColor: props.theme.colors['content-oncolor-primary'],\n        textColor: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColor: props.theme.colors.transparent,\n        borderColor: tinycolor(props.theme.colors['content-oncolor-primary']).darken(6).toString() as CSSColor,\n        iconColorHover: props.theme.colors['content-onmain-primary'],\n        titleColorHover: props.theme.colors['content-onmain-primary'],\n        textColorHover: props.theme.colors['content-onmain-tertiary'],\n        backgroundColorHover: props.theme.colors['content-oncolor-primary'],\n        borderColorHover: props.theme.colors.transparent,\n        iconColorActive: props.theme.colors['content-onmain-primary'],\n        titleColorActive: props.theme.colors['content-onmain-primary'],\n        textColorActive: props.theme.colors['content-onmain-tertiary'],\n        backgroundColorActive: props.theme.colors['content-oncolor-primary'],\n        borderColorActive: props.theme.colors.transparent,\n        iconColorDisabled: props.theme.colors['content-oncolor-disabled'],\n        titleColorDisabled: props.theme.colors['content-oncolor-disabled'],\n        textColorDisabled: props.theme.colors['content-oncolor-disabled'],\n        backgroundColorDisabled: props.theme.colors.transparent,\n        borderColorDisabled: props.theme.colors['border-oncolor-disabled'],\n        shadowColor: props.theme.colors['effect-shadow-press'],\n        ...props.palette,\n      })}\n  `,\n}\n\nexport const Root = styled.button.withConfig<StyledAddElementProps>({\n  shouldForwardProp,\n})`\n  box-sizing: border-box;\n  position: relative;\n  isolation: isolate;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  border: 1px dashed;\n  transition-property: color, background-color;\n  transition-duration: 250ms;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: -1px;\n    left: -1px;\n    width: calc(100% + 2px);\n    height: calc(100% + 2px);\n    border-radius: inherit;\n    opacity: 0;\n    transition-property: opacity;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n  }\n\n  &:active:not(:disabled)::before {\n    opacity: 1;\n  }\n\n  ${(props) =>\n    `\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n      width: ${props.square ? 'initial' : '100%'};\n      flex-direction: ${props.square ? 'column' : 'row'};\n      justify-content: ${props.square ? 'center' : 'space-between'};\n      text-align: ${props.square ? 'center' : 'left'};\n    `}\n\n  ${(props) => COLOR_SCHEMA[props.variant]}\n\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Content = styled.span.withConfig<\n  ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>> & Pick<AddElementProps, 'square'>\n>({\n  shouldForwardProp,\n})`\n  flex-direction: column;\n  width: 100%;\n\n  ${(props) =>\n    `\n      order: ${props.square ? 'initial' : '1'};\n      align-items: ${props.square ? 'center' : 'flex-start'};\n    `}\n\n  ${responsiveSize}\n`\n"],"names":["shouldForwardProp","createShouldForwardProp","propKey","includes","IconContainer","styled","span","withConfig","displayName","componentId","props","square","responsiveSize","TextContainer","template","palette","titleColor","backgroundColor","borderColor","shadowColor","textColor","iconColor","hover","titleColorHover","backgroundColorHover","borderColorHover","textColorHover","iconColorHover","titleColorActive","backgroundColorActive","borderColorActive","textColorActive","iconColorActive","titleColorDisabled","backgroundColorDisabled","borderColorDisabled","textColorDisabled","iconColorDisabled","COLOR_SCHEMA","default","css","theme","colors","transparent","neutral","contrast","tinycolor","darken","toString","Root","button","disabled","variant","focus","responsiveMargin","Content"],"mappings":"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"}

package/components/AddElement/style.mjs

@@ -1,2 +1,2 @@
-import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardProp=createShouldForwardProp(o=>!['variant','square'].includes(o));const IconContainer=styled.span.withConfig({shouldForwardProp}).withConfig({displayName:"AddElement__IconContainer",componentId:"ui__sc-7123ed-0"})(["flex-shrink:0;display:flex;transition-property:color;transition-duration:250ms;"," ",""],o=>`\n      order: ${o.square?'initial':'2'};\n    `,responsiveSize);const TextContainer=styled.span.withConfig({displayName:"AddElement__TextContainer",componentId:"ui__sc-7123ed-1"})(["transition-property:color;transition-duration:250ms;"]);const template=o=>`\n  color: ${o.titleColor};\n  background-color: ${o.backgroundColor};\n  border-color: ${o.borderColor};\n\n  &::before {\n    box-shadow: inset 0px 4px 0px ${o.shadowColor};\n  }\n\n  & ${TextContainer} {\n    color: ${o.textColor};\n  }\n\n  & ${IconContainer} {\n    color: ${o.iconColor};\n  }\n\n  ${hover(`\n    color: ${o.titleColorHover};\n    background-color: ${o.backgroundColorHover};\n    border-color: ${o.borderColorHover};\n  `)}\n  ${hover(`\n    color: ${o.textColorHover};\n  `,`&:hover ${TextContainer}`)}\n  ${hover(`\n    color: ${o.iconColorHover};\n  `,`&:hover ${IconContainer}`)}\n\n  &:active {\n    color: ${o.titleColorActive};\n    background-color: ${o.backgroundColorActive};\n    border-color: ${o.borderColorActive};\n  }\n  &:active ${TextContainer} {\n    color: ${o.textColorActive};\n  }\n  &:active ${IconContainer} {\n    color: ${o.iconColorActive};\n  }\n\n  &:disabled {\n    color: ${o.titleColorDisabled};\n    background-color: ${o.backgroundColorDisabled};\n    border-color: ${o.borderColorDisabled};\n  }\n  &:disabled ${TextContainer} {\n    color: ${o.textColorDisabled};\n  }\n  &:disabled ${IconContainer} {\n    color: ${o.iconColorDisabled};\n  }\n`;const COLOR_SCHEMA={default:css(["",""],o=>template({iconColor:o.theme.colors['content-brand-primary'],titleColor:o.theme.colors['content-brand-primary'],textColor:o.theme.colors['content-onmain-tertiary'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors['border-brand-primary'],iconColorHover:o.theme.colors['content-oncolor-primary'],titleColorHover:o.theme.colors['content-oncolor-primary'],textColorHover:o.theme.colors['content-oncolor-tertiary'],backgroundColorHover:o.theme.colors['bg-brand-primary-basic'],borderColorHover:o.theme.colors.transparent,iconColorActive:o.theme.colors['content-oncolor-primary'],titleColorActive:o.theme.colors['content-oncolor-primary'],textColorActive:o.theme.colors['content-oncolor-tertiary'],backgroundColorActive:o.theme.colors['bg-brand-primary-basic'],borderColorActive:o.theme.colors.transparent,iconColorDisabled:o.theme.colors['content-disabled'],titleColorDisabled:o.theme.colors['content-disabled'],textColorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors['border-disabled'],shadowColor:tinycolor(o.theme.colors.black).setAlpha(.16).toString(),...o.palette})),neutral:css(["",""],o=>template({iconColor:o.theme.colors['content-onmain-primary'],titleColor:o.theme.colors['content-onmain-primary'],textColor:o.theme.colors['content-onmain-tertiary'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors['border-onmain-default-small'],iconColorHover:o.theme.colors['content-oncolor-primary'],titleColorHover:o.theme.colors['content-oncolor-primary'],textColorHover:o.theme.colors['content-oncolor-tertiary'],backgroundColorHover:o.theme.colors['bg-onmain-contrast'],borderColorHover:o.theme.colors.transparent,iconColorActive:o.theme.colors['content-oncolor-primary'],titleColorActive:o.theme.colors['content-oncolor-primary'],textColorActive:o.theme.colors['content-oncolor-tertiary'],backgroundColorActive:o.theme.colors['bg-onmain-contrast'],borderColorActive:o.theme.colors.transparent,iconColorDisabled:o.theme.colors['content-disabled'],titleColorDisabled:o.theme.colors['content-disabled'],textColorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors['border-disabled'],shadowColor:tinycolor(o.theme.colors.black).setAlpha(.16).toString(),...o.palette})),contrast:css(["",""],o=>template({iconColor:o.theme.colors['content-oncolor-primary'],titleColor:o.theme.colors['content-oncolor-primary'],textColor:o.theme.colors['content-oncolor-tertiary'],backgroundColor:o.theme.colors.transparent,borderColor:tinycolor(o.theme.colors['content-oncolor-primary']).darken(6).toString(),iconColorHover:o.theme.colors['content-onmain-primary'],titleColorHover:o.theme.colors['content-onmain-primary'],textColorHover:o.theme.colors['content-onmain-tertiary'],backgroundColorHover:o.theme.colors['content-oncolor-primary'],borderColorHover:o.theme.colors.transparent,iconColorActive:o.theme.colors['content-onmain-primary'],titleColorActive:o.theme.colors['content-onmain-primary'],textColorActive:o.theme.colors['content-onmain-tertiary'],backgroundColorActive:o.theme.colors['content-oncolor-primary'],borderColorActive:o.theme.colors.transparent,iconColorDisabled:o.theme.colors['content-oncolor-disabled'],titleColorDisabled:o.theme.colors['content-oncolor-disabled'],textColorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors['border-oncolor-disabled'],shadowColor:tinycolor(o.theme.colors.black).setAlpha(.16).toString(),...o.palette}))};const Root=styled.button.withConfig({shouldForwardProp}).withConfig({displayName:"AddElement__Root",componentId:"ui__sc-7123ed-2"})(["box-sizing:border-box;position:relative;isolation:isolate;appearance:none;display:flex;align-items:center;border:1px dashed;transition-property:color,background-color;transition-duration:250ms;&::before{content:'';position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);border-radius:inherit;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:ease-in;}&:active:not(:disabled)::before{opacity:1;}"," "," "," "," ",""],o=>`\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      width: ${o.square?'initial':'100%'};\n      flex-direction: ${o.square?'column':'row'};\n      justify-content: ${o.square?'center':'space-between'};\n      text-align: ${o.square?'center':'left'};\n    `,o=>COLOR_SCHEMA[o.variant],focus,responsiveSize,responsiveMargin);const Content=styled.span.withConfig({shouldForwardProp}).withConfig({displayName:"AddElement__Content",componentId:"ui__sc-7123ed-3"})(["flex-direction:column;width:100%;"," ",""],o=>`\n      order: ${o.square?'initial':'1'};\n      align-items: ${o.square?'center':'flex-start'};\n    `,responsiveSize);export{Content,IconContainer,Root,TextContainer};
+import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardProp=createShouldForwardProp(o=>!['variant','square'].includes(o));const IconContainer=styled.span.withConfig({shouldForwardProp}).withConfig({displayName:"AddElement__IconContainer",componentId:"ui__sc-7123ed-0"})(["flex-shrink:0;display:flex;transition-property:color;transition-duration:250ms;"," ",""],o=>`\n      order: ${o.square?'initial':'2'};\n    `,responsiveSize);const TextContainer=styled.span.withConfig({displayName:"AddElement__TextContainer",componentId:"ui__sc-7123ed-1"})(["transition-property:color;transition-duration:250ms;"]);const template=o=>`\n  color: ${o.titleColor};\n  background-color: ${o.backgroundColor};\n  border-color: ${o.borderColor};\n\n  &::before {\n    box-shadow: inset 0px 4px 0px ${o.shadowColor};\n  }\n\n  & ${TextContainer} {\n    color: ${o.textColor};\n  }\n\n  & ${IconContainer} {\n    color: ${o.iconColor};\n  }\n\n  ${hover(`\n    color: ${o.titleColorHover};\n    background-color: ${o.backgroundColorHover};\n    border-color: ${o.borderColorHover};\n  `)}\n  ${hover(`\n    color: ${o.textColorHover};\n  `,`&:hover ${TextContainer}`)}\n  ${hover(`\n    color: ${o.iconColorHover};\n  `,`&:hover ${IconContainer}`)}\n\n  &:active {\n    color: ${o.titleColorActive};\n    background-color: ${o.backgroundColorActive};\n    border-color: ${o.borderColorActive};\n  }\n  &:active ${TextContainer} {\n    color: ${o.textColorActive};\n  }\n  &:active ${IconContainer} {\n    color: ${o.iconColorActive};\n  }\n\n  &:disabled {\n    color: ${o.titleColorDisabled};\n    background-color: ${o.backgroundColorDisabled};\n    border-color: ${o.borderColorDisabled};\n  }\n  &:disabled ${TextContainer} {\n    color: ${o.textColorDisabled};\n  }\n  &:disabled ${IconContainer} {\n    color: ${o.iconColorDisabled};\n  }\n`;const COLOR_SCHEMA={default:css(["",""],o=>template({iconColor:o.theme.colors['content-brand-primary'],titleColor:o.theme.colors['content-brand-primary'],textColor:o.theme.colors['content-onmain-tertiary'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors['border-brand-primary'],iconColorHover:o.theme.colors['content-oncolor-primary'],titleColorHover:o.theme.colors['content-oncolor-primary'],textColorHover:o.theme.colors['content-oncolor-tertiary'],backgroundColorHover:o.theme.colors['bg-brand-primary-basic'],borderColorHover:o.theme.colors.transparent,iconColorActive:o.theme.colors['content-oncolor-primary'],titleColorActive:o.theme.colors['content-oncolor-primary'],textColorActive:o.theme.colors['content-oncolor-tertiary'],backgroundColorActive:o.theme.colors['bg-brand-primary-basic'],borderColorActive:o.theme.colors.transparent,iconColorDisabled:o.theme.colors['content-disabled'],titleColorDisabled:o.theme.colors['content-disabled'],textColorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors['border-disabled'],shadowColor:o.theme.colors['effect-shadow-press'],...o.palette})),neutral:css(["",""],o=>template({iconColor:o.theme.colors['content-onmain-primary'],titleColor:o.theme.colors['content-onmain-primary'],textColor:o.theme.colors['content-onmain-tertiary'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors['border-onmain-default-small'],iconColorHover:o.theme.colors['content-oncolor-primary'],titleColorHover:o.theme.colors['content-oncolor-primary'],textColorHover:o.theme.colors['content-oncolor-tertiary'],backgroundColorHover:o.theme.colors['bg-onmain-contrast'],borderColorHover:o.theme.colors.transparent,iconColorActive:o.theme.colors['content-oncolor-primary'],titleColorActive:o.theme.colors['content-oncolor-primary'],textColorActive:o.theme.colors['content-oncolor-tertiary'],backgroundColorActive:o.theme.colors['bg-onmain-contrast'],borderColorActive:o.theme.colors.transparent,iconColorDisabled:o.theme.colors['content-disabled'],titleColorDisabled:o.theme.colors['content-disabled'],textColorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors['border-disabled'],shadowColor:o.theme.colors['effect-shadow-press'],...o.palette})),contrast:css(["",""],o=>template({iconColor:o.theme.colors['content-oncolor-primary'],titleColor:o.theme.colors['content-oncolor-primary'],textColor:o.theme.colors['content-oncolor-tertiary'],backgroundColor:o.theme.colors.transparent,borderColor:tinycolor(o.theme.colors['content-oncolor-primary']).darken(6).toString(),iconColorHover:o.theme.colors['content-onmain-primary'],titleColorHover:o.theme.colors['content-onmain-primary'],textColorHover:o.theme.colors['content-onmain-tertiary'],backgroundColorHover:o.theme.colors['content-oncolor-primary'],borderColorHover:o.theme.colors.transparent,iconColorActive:o.theme.colors['content-onmain-primary'],titleColorActive:o.theme.colors['content-onmain-primary'],textColorActive:o.theme.colors['content-onmain-tertiary'],backgroundColorActive:o.theme.colors['content-oncolor-primary'],borderColorActive:o.theme.colors.transparent,iconColorDisabled:o.theme.colors['content-oncolor-disabled'],titleColorDisabled:o.theme.colors['content-oncolor-disabled'],textColorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors['border-oncolor-disabled'],shadowColor:o.theme.colors['effect-shadow-press'],...o.palette}))};const Root=styled.button.withConfig({shouldForwardProp}).withConfig({displayName:"AddElement__Root",componentId:"ui__sc-7123ed-2"})(["box-sizing:border-box;position:relative;isolation:isolate;appearance:none;display:flex;align-items:center;border:1px dashed;transition-property:color,background-color;transition-duration:250ms;&::before{content:'';position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);border-radius:inherit;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:ease-in;}&:active:not(:disabled)::before{opacity:1;}"," "," "," "," ",""],o=>`\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      width: ${o.square?'initial':'100%'};\n      flex-direction: ${o.square?'column':'row'};\n      justify-content: ${o.square?'center':'space-between'};\n      text-align: ${o.square?'center':'left'};\n    `,o=>COLOR_SCHEMA[o.variant],focus,responsiveSize,responsiveMargin);const Content=styled.span.withConfig({shouldForwardProp}).withConfig({displayName:"AddElement__Content",componentId:"ui__sc-7123ed-3"})(["flex-direction:column;width:100%;"," ",""],o=>`\n      order: ${o.square?'initial':'1'};\n      align-items: ${o.square?'center':'flex-start'};\n    `,responsiveSize);export{Content,IconContainer,Root,TextContainer};
 //# sourceMappingURL=style.mjs.map

package/components/AddElement/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/AddElement/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { CSSColor } from 'shared/types'\nimport type { ResponsiveSizeInterpolationProps, ResponsiveSizeProps } from 'shared/interfaces'\nimport { hover } from 'mixins/hover'\nimport type { StyledAddElementProps, AddElementPalette, Size, AddElementProps } from './types'\n\nconst shouldForwardProp = createShouldForwardProp((propKey) => {\n  return !['variant', 'square'].includes(propKey)\n})\n\nexport const IconContainer = styled.span.withConfig<\n  ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>> & Pick<AddElementProps, 'square'>\n>({\n  shouldForwardProp,\n})`\n  flex-shrink: 0;\n  display: flex;\n  transition-property: color;\n  transition-duration: 250ms;\n\n  ${(props) =>\n    `\n      order: ${props.square ? 'initial' : '2'};\n    `}\n\n  ${responsiveSize}\n`\n\nexport const TextContainer = styled.span`\n  transition-property: color;\n  transition-duration: 250ms;\n`\n\nconst template = (palette: AddElementPalette) => `\n  color: ${palette.titleColor};\n  background-color: ${palette.backgroundColor};\n  border-color: ${palette.borderColor};\n\n  &::before {\n    box-shadow: inset 0px 4px 0px ${palette.shadowColor};\n  }\n\n  & ${TextContainer} {\n    color: ${palette.textColor};\n  }\n\n  & ${IconContainer} {\n    color: ${palette.iconColor};\n  }\n\n  ${hover(`\n    color: ${palette.titleColorHover};\n    background-color: ${palette.backgroundColorHover};\n    border-color: ${palette.borderColorHover};\n  `)}\n  ${hover(\n    `\n    color: ${palette.textColorHover};\n  `,\n    `&:hover ${TextContainer}`\n  )}\n  ${hover(\n    `\n    color: ${palette.iconColorHover};\n  `,\n    `&:hover ${IconContainer}`\n  )}\n\n  &:active {\n    color: ${palette.titleColorActive};\n    background-color: ${palette.backgroundColorActive};\n    border-color: ${palette.borderColorActive};\n  }\n  &:active ${TextContainer} {\n    color: ${palette.textColorActive};\n  }\n  &:active ${IconContainer} {\n    color: ${palette.iconColorActive};\n  }\n\n  &:disabled {\n    color: ${palette.titleColorDisabled};\n    background-color: ${palette.backgroundColorDisabled};\n    border-color: ${palette.borderColorDisabled};\n  }\n  &:disabled ${TextContainer} {\n    color: ${palette.textColorDisabled};\n  }\n  &:disabled ${IconContainer} {\n    color: ${palette.iconColorDisabled};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  default: css<StyledAddElementProps>`\n    ${(props) =>\n      template({\n        iconColor: props.theme.colors['content-brand-primary'],\n        titleColor: props.theme.colors['content-brand-primary'],\n        textColor: props.theme.colors['content-onmain-tertiary'],\n        backgroundColor: props.theme.colors.transparent,\n        borderColor: props.theme.colors['border-brand-primary'],\n        iconColorHover: props.theme.colors['content-oncolor-primary'],\n        titleColorHover: props.theme.colors['content-oncolor-primary'],\n        textColorHover: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColorHover: props.theme.colors['bg-brand-primary-basic'],\n        borderColorHover: props.theme.colors.transparent,\n        iconColorActive: props.theme.colors['content-oncolor-primary'],\n        titleColorActive: props.theme.colors['content-oncolor-primary'],\n        textColorActive: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColorActive: props.theme.colors['bg-brand-primary-basic'],\n        borderColorActive: props.theme.colors.transparent,\n        iconColorDisabled: props.theme.colors['content-disabled'],\n        titleColorDisabled: props.theme.colors['content-disabled'],\n        textColorDisabled: props.theme.colors['content-disabled'],\n        backgroundColorDisabled: props.theme.colors.transparent,\n        borderColorDisabled: props.theme.colors['border-disabled'],\n        shadowColor: tinycolor(props.theme.colors['black']).setAlpha(0.16).toString() as CSSColor,\n        ...props.palette,\n      })}\n  `,\n  neutral: css<StyledAddElementProps>`\n    ${(props) =>\n      template({\n        iconColor: props.theme.colors['content-onmain-primary'],\n        titleColor: props.theme.colors['content-onmain-primary'],\n        textColor: props.theme.colors['content-onmain-tertiary'],\n        backgroundColor: props.theme.colors.transparent,\n        borderColor: props.theme.colors['border-onmain-default-small'],\n        iconColorHover: props.theme.colors['content-oncolor-primary'],\n        titleColorHover: props.theme.colors['content-oncolor-primary'],\n        textColorHover: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColorHover: props.theme.colors['bg-onmain-contrast'],\n        borderColorHover: props.theme.colors.transparent,\n        iconColorActive: props.theme.colors['content-oncolor-primary'],\n        titleColorActive: props.theme.colors['content-oncolor-primary'],\n        textColorActive: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColorActive: props.theme.colors['bg-onmain-contrast'],\n        borderColorActive: props.theme.colors.transparent,\n        iconColorDisabled: props.theme.colors['content-disabled'],\n        titleColorDisabled: props.theme.colors['content-disabled'],\n        textColorDisabled: props.theme.colors['content-disabled'],\n        backgroundColorDisabled: props.theme.colors.transparent,\n        borderColorDisabled: props.theme.colors['border-disabled'],\n        shadowColor: tinycolor(props.theme.colors['black']).setAlpha(0.16).toString() as CSSColor,\n        ...props.palette,\n      })}\n  `,\n  contrast: css<StyledAddElementProps>`\n    ${(props) =>\n      template({\n        iconColor: props.theme.colors['content-oncolor-primary'],\n        titleColor: props.theme.colors['content-oncolor-primary'],\n        textColor: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColor: props.theme.colors.transparent,\n        borderColor: tinycolor(props.theme.colors['content-oncolor-primary']).darken(6).toString() as CSSColor,\n        iconColorHover: props.theme.colors['content-onmain-primary'],\n        titleColorHover: props.theme.colors['content-onmain-primary'],\n        textColorHover: props.theme.colors['content-onmain-tertiary'],\n        backgroundColorHover: props.theme.colors['content-oncolor-primary'],\n        borderColorHover: props.theme.colors.transparent,\n        iconColorActive: props.theme.colors['content-onmain-primary'],\n        titleColorActive: props.theme.colors['content-onmain-primary'],\n        textColorActive: props.theme.colors['content-onmain-tertiary'],\n        backgroundColorActive: props.theme.colors['content-oncolor-primary'],\n        borderColorActive: props.theme.colors.transparent,\n        iconColorDisabled: props.theme.colors['content-oncolor-disabled'],\n        titleColorDisabled: props.theme.colors['content-oncolor-disabled'],\n        textColorDisabled: props.theme.colors['content-oncolor-disabled'],\n        backgroundColorDisabled: props.theme.colors.transparent,\n        borderColorDisabled: props.theme.colors['border-oncolor-disabled'],\n        shadowColor: tinycolor(props.theme.colors['black']).setAlpha(0.16).toString() as CSSColor,\n        ...props.palette,\n      })}\n  `,\n}\n\nexport const Root = styled.button.withConfig<StyledAddElementProps>({\n  shouldForwardProp,\n})`\n  box-sizing: border-box;\n  position: relative;\n  isolation: isolate;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  border: 1px dashed;\n  transition-property: color, background-color;\n  transition-duration: 250ms;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: -1px;\n    left: -1px;\n    width: calc(100% + 2px);\n    height: calc(100% + 2px);\n    border-radius: inherit;\n    opacity: 0;\n    transition-property: opacity;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n  }\n\n  &:active:not(:disabled)::before {\n    opacity: 1;\n  }\n\n  ${(props) =>\n    `\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n      width: ${props.square ? 'initial' : '100%'};\n      flex-direction: ${props.square ? 'column' : 'row'};\n      justify-content: ${props.square ? 'center' : 'space-between'};\n      text-align: ${props.square ? 'center' : 'left'};\n    `}\n\n  ${(props) => COLOR_SCHEMA[props.variant]}\n\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Content = styled.span.withConfig<\n  ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>> & Pick<AddElementProps, 'square'>\n>({\n  shouldForwardProp,\n})`\n  flex-direction: column;\n  width: 100%;\n\n  ${(props) =>\n    `\n      order: ${props.square ? 'initial' : '1'};\n      align-items: ${props.square ? 'center' : 'flex-start'};\n    `}\n\n  ${responsiveSize}\n`\n"],"names":["shouldForwardProp","createShouldForwardProp","propKey","includes","IconContainer","styled","span","withConfig","displayName","componentId","props","square","responsiveSize","TextContainer","template","palette","titleColor","backgroundColor","borderColor","shadowColor","textColor","iconColor","hover","titleColorHover","backgroundColorHover","borderColorHover","textColorHover","iconColorHover","titleColorActive","backgroundColorActive","borderColorActive","textColorActive","iconColorActive","titleColorDisabled","backgroundColorDisabled","borderColorDisabled","textColorDisabled","iconColorDisabled","COLOR_SCHEMA","default","css","theme","colors","transparent","tinycolor","setAlpha","toString","neutral","contrast","darken","Root","button","disabled","variant","focus","responsiveMargin","Content"],"mappings":"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"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/AddElement/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { CSSColor } from 'shared/types'\nimport type { ResponsiveSizeInterpolationProps, ResponsiveSizeProps } from 'shared/interfaces'\nimport { hover } from 'mixins/hover'\nimport type { StyledAddElementProps, AddElementPalette, Size, AddElementProps } from './types'\n\nconst shouldForwardProp = createShouldForwardProp((propKey) => {\n  return !['variant', 'square'].includes(propKey)\n})\n\nexport const IconContainer = styled.span.withConfig<\n  ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>> & Pick<AddElementProps, 'square'>\n>({\n  shouldForwardProp,\n})`\n  flex-shrink: 0;\n  display: flex;\n  transition-property: color;\n  transition-duration: 250ms;\n\n  ${(props) =>\n    `\n      order: ${props.square ? 'initial' : '2'};\n    `}\n\n  ${responsiveSize}\n`\n\nexport const TextContainer = styled.span`\n  transition-property: color;\n  transition-duration: 250ms;\n`\n\nconst template = (palette: AddElementPalette) => `\n  color: ${palette.titleColor};\n  background-color: ${palette.backgroundColor};\n  border-color: ${palette.borderColor};\n\n  &::before {\n    box-shadow: inset 0px 4px 0px ${palette.shadowColor};\n  }\n\n  & ${TextContainer} {\n    color: ${palette.textColor};\n  }\n\n  & ${IconContainer} {\n    color: ${palette.iconColor};\n  }\n\n  ${hover(`\n    color: ${palette.titleColorHover};\n    background-color: ${palette.backgroundColorHover};\n    border-color: ${palette.borderColorHover};\n  `)}\n  ${hover(\n    `\n    color: ${palette.textColorHover};\n  `,\n    `&:hover ${TextContainer}`\n  )}\n  ${hover(\n    `\n    color: ${palette.iconColorHover};\n  `,\n    `&:hover ${IconContainer}`\n  )}\n\n  &:active {\n    color: ${palette.titleColorActive};\n    background-color: ${palette.backgroundColorActive};\n    border-color: ${palette.borderColorActive};\n  }\n  &:active ${TextContainer} {\n    color: ${palette.textColorActive};\n  }\n  &:active ${IconContainer} {\n    color: ${palette.iconColorActive};\n  }\n\n  &:disabled {\n    color: ${palette.titleColorDisabled};\n    background-color: ${palette.backgroundColorDisabled};\n    border-color: ${palette.borderColorDisabled};\n  }\n  &:disabled ${TextContainer} {\n    color: ${palette.textColorDisabled};\n  }\n  &:disabled ${IconContainer} {\n    color: ${palette.iconColorDisabled};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  default: css<StyledAddElementProps>`\n    ${(props) =>\n      template({\n        iconColor: props.theme.colors['content-brand-primary'],\n        titleColor: props.theme.colors['content-brand-primary'],\n        textColor: props.theme.colors['content-onmain-tertiary'],\n        backgroundColor: props.theme.colors.transparent,\n        borderColor: props.theme.colors['border-brand-primary'],\n        iconColorHover: props.theme.colors['content-oncolor-primary'],\n        titleColorHover: props.theme.colors['content-oncolor-primary'],\n        textColorHover: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColorHover: props.theme.colors['bg-brand-primary-basic'],\n        borderColorHover: props.theme.colors.transparent,\n        iconColorActive: props.theme.colors['content-oncolor-primary'],\n        titleColorActive: props.theme.colors['content-oncolor-primary'],\n        textColorActive: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColorActive: props.theme.colors['bg-brand-primary-basic'],\n        borderColorActive: props.theme.colors.transparent,\n        iconColorDisabled: props.theme.colors['content-disabled'],\n        titleColorDisabled: props.theme.colors['content-disabled'],\n        textColorDisabled: props.theme.colors['content-disabled'],\n        backgroundColorDisabled: props.theme.colors.transparent,\n        borderColorDisabled: props.theme.colors['border-disabled'],\n        shadowColor: props.theme.colors['effect-shadow-press'],\n        ...props.palette,\n      })}\n  `,\n  neutral: css<StyledAddElementProps>`\n    ${(props) =>\n      template({\n        iconColor: props.theme.colors['content-onmain-primary'],\n        titleColor: props.theme.colors['content-onmain-primary'],\n        textColor: props.theme.colors['content-onmain-tertiary'],\n        backgroundColor: props.theme.colors.transparent,\n        borderColor: props.theme.colors['border-onmain-default-small'],\n        iconColorHover: props.theme.colors['content-oncolor-primary'],\n        titleColorHover: props.theme.colors['content-oncolor-primary'],\n        textColorHover: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColorHover: props.theme.colors['bg-onmain-contrast'],\n        borderColorHover: props.theme.colors.transparent,\n        iconColorActive: props.theme.colors['content-oncolor-primary'],\n        titleColorActive: props.theme.colors['content-oncolor-primary'],\n        textColorActive: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColorActive: props.theme.colors['bg-onmain-contrast'],\n        borderColorActive: props.theme.colors.transparent,\n        iconColorDisabled: props.theme.colors['content-disabled'],\n        titleColorDisabled: props.theme.colors['content-disabled'],\n        textColorDisabled: props.theme.colors['content-disabled'],\n        backgroundColorDisabled: props.theme.colors.transparent,\n        borderColorDisabled: props.theme.colors['border-disabled'],\n        shadowColor: props.theme.colors['effect-shadow-press'],\n        ...props.palette,\n      })}\n  `,\n  contrast: css<StyledAddElementProps>`\n    ${(props) =>\n      template({\n        iconColor: props.theme.colors['content-oncolor-primary'],\n        titleColor: props.theme.colors['content-oncolor-primary'],\n        textColor: props.theme.colors['content-oncolor-tertiary'],\n        backgroundColor: props.theme.colors.transparent,\n        borderColor: tinycolor(props.theme.colors['content-oncolor-primary']).darken(6).toString() as CSSColor,\n        iconColorHover: props.theme.colors['content-onmain-primary'],\n        titleColorHover: props.theme.colors['content-onmain-primary'],\n        textColorHover: props.theme.colors['content-onmain-tertiary'],\n        backgroundColorHover: props.theme.colors['content-oncolor-primary'],\n        borderColorHover: props.theme.colors.transparent,\n        iconColorActive: props.theme.colors['content-onmain-primary'],\n        titleColorActive: props.theme.colors['content-onmain-primary'],\n        textColorActive: props.theme.colors['content-onmain-tertiary'],\n        backgroundColorActive: props.theme.colors['content-oncolor-primary'],\n        borderColorActive: props.theme.colors.transparent,\n        iconColorDisabled: props.theme.colors['content-oncolor-disabled'],\n        titleColorDisabled: props.theme.colors['content-oncolor-disabled'],\n        textColorDisabled: props.theme.colors['content-oncolor-disabled'],\n        backgroundColorDisabled: props.theme.colors.transparent,\n        borderColorDisabled: props.theme.colors['border-oncolor-disabled'],\n        shadowColor: props.theme.colors['effect-shadow-press'],\n        ...props.palette,\n      })}\n  `,\n}\n\nexport const Root = styled.button.withConfig<StyledAddElementProps>({\n  shouldForwardProp,\n})`\n  box-sizing: border-box;\n  position: relative;\n  isolation: isolate;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  border: 1px dashed;\n  transition-property: color, background-color;\n  transition-duration: 250ms;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: -1px;\n    left: -1px;\n    width: calc(100% + 2px);\n    height: calc(100% + 2px);\n    border-radius: inherit;\n    opacity: 0;\n    transition-property: opacity;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n  }\n\n  &:active:not(:disabled)::before {\n    opacity: 1;\n  }\n\n  ${(props) =>\n    `\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n      width: ${props.square ? 'initial' : '100%'};\n      flex-direction: ${props.square ? 'column' : 'row'};\n      justify-content: ${props.square ? 'center' : 'space-between'};\n      text-align: ${props.square ? 'center' : 'left'};\n    `}\n\n  ${(props) => COLOR_SCHEMA[props.variant]}\n\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Content = styled.span.withConfig<\n  ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>> & Pick<AddElementProps, 'square'>\n>({\n  shouldForwardProp,\n})`\n  flex-direction: column;\n  width: 100%;\n\n  ${(props) =>\n    `\n      order: ${props.square ? 'initial' : '1'};\n      align-items: ${props.square ? 'center' : 'flex-start'};\n    `}\n\n  ${responsiveSize}\n`\n"],"names":["shouldForwardProp","createShouldForwardProp","propKey","includes","IconContainer","styled","span","withConfig","displayName","componentId","props","square","responsiveSize","TextContainer","template","palette","titleColor","backgroundColor","borderColor","shadowColor","textColor","iconColor","hover","titleColorHover","backgroundColorHover","borderColorHover","textColorHover","iconColorHover","titleColorActive","backgroundColorActive","borderColorActive","textColorActive","iconColorActive","titleColorDisabled","backgroundColorDisabled","borderColorDisabled","textColorDisabled","iconColorDisabled","COLOR_SCHEMA","default","css","theme","colors","transparent","neutral","contrast","tinycolor","darken","toString","Root","button","disabled","variant","focus","responsiveMargin","Content"],"mappings":"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"}

package/components/Alert/CountdownCircle.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var colors=require('../../theme/colors.js');var jsxRuntime=require('react/jsx-runtime');var Progress=require('../Progress/Progress.js');exports.CountdownCircle=({className:e,color:r,isCompact:s,paused:t,timer:o,onTimerFinish:c})=>{const[a,n]=React.useState(o);const u=React.useRef(!1);const i=React.useRef();const l=a/o*100;return React.useEffect(()=>(t||u.current||(i.current=setInterval(()=>{n(e=>e<=.05?(c!==void 0&&c(),u.current=!0,clearInterval(i.current),e):e-.05)},50)),()=>{i.current&&clearInterval(i.current)}),[t,c]),jsxRuntime.jsx(Progress.Progress.Circle,{className:e,progress:l,progressStartAngle:0,resultColor:r,size:s?16:20,strokeBGColor:colors.DefaultColorNames.transparent,strokeLineWidth:1.5,children:Math.ceil(a)})};
+'use strict';var React=require('react');var jsxRuntime=require('react/jsx-runtime');var Progress=require('../Progress/Progress.js');exports.CountdownCircle=({className:e,color:r,isCompact:s,paused:t,timer:c,onTimerFinish:a})=>{const[n,o]=React.useState(c);const u=React.useRef(!1);const i=React.useRef();const l=n/c*100;return React.useEffect(()=>(t||u.current||(i.current=setInterval(()=>{o(e=>e<=.05?(a!==void 0&&a(),u.current=!0,clearInterval(i.current),e):e-.05)},50)),()=>{i.current&&clearInterval(i.current)}),[t,a]),jsxRuntime.jsx(Progress.Progress.Circle,{className:e,progress:l,progressStartAngle:0,resultColor:r,size:s?16:20,strokeBGColor:"transparent",strokeLineWidth:1.5,children:Math.ceil(n)})};
 //# sourceMappingURL=CountdownCircle.js.map

package/components/Alert/CountdownCircle.js.map

@@ -1 +1 @@
-{"version":3,"file":"CountdownCircle.js","sources":["../../../../src/components/Alert/CountdownCircle.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport { DefaultColorNames } from 'theme/colors'\nimport { Progress } from '../Progress'\n\nimport type { CountdownCircleProps } from './types'\n\nconst progressRate = 0.05\n\nconst CountdownCircle = ({ className, color, isCompact, paused, timer, onTimerFinish }: CountdownCircleProps) => {\n  const [countdown, setCountdown] = useState(timer)\n  const finishedRef = useRef<boolean>(false)\n  const intervalId = useRef<ReturnType<typeof setInterval>>()\n  const progress = (countdown / timer) * 100\n\n  useEffect(() => {\n    if (!paused && !finishedRef.current) {\n      intervalId.current = setInterval(() => {\n        setCountdown((prevCountdown) => {\n          if (prevCountdown <= progressRate) {\n            if (onTimerFinish !== undefined) {\n              onTimerFinish()\n            }\n\n            finishedRef.current = true\n            clearInterval(intervalId.current)\n            return prevCountdown\n          }\n\n          return prevCountdown - progressRate\n        })\n      }, progressRate * 1000)\n    }\n\n    return () => {\n      if (intervalId.current) {\n        clearInterval(intervalId.current)\n      }\n    }\n  }, [paused, onTimerFinish])\n\n  return (\n    <Progress.Circle\n      className={className}\n      progress={progress}\n      progressStartAngle={0}\n      resultColor={color}\n      size={isCompact ? 16 : 20}\n      strokeBGColor={DefaultColorNames.transparent}\n      strokeLineWidth={1.5}\n    >\n      {Math.ceil(countdown)}\n    </Progress.Circle>\n  )\n}\n\nexport { CountdownCircle }\n"],"names":["CountdownCircle","className","color","isCompact","paused","timer","onTimerFinish","countdown","setCountdown","useState","finishedRef","useRef","intervalId","progress","useEffect","current","setInterval","prevCountdown","undefined","clearInterval","progressRate","_jsx","Progress","Circle","progressStartAngle","resultColor","size","strokeBGColor","DefaultColorNames","transparent","strokeLineWidth","children","Math","ceil"],"mappings":"wMASwBA,EAAGC,YAAWC,QAAOC,YAAWC,SAAQC,QAAOC,oBACrE,MAAOC,EAAWC,GAAgBC,MAAAA,SAASJ,GAC3C,MAAMK,EAAcC,MAAAA,QAAgB,GACpC,MAAMC,EAAaD,MAAAA,SACnB,MAAME,EAAYN,EAAYF,EAAS,IA4BvC,OA1BAS,MAAAA,UAAU,KACHV,GAAWM,EAAYK,UAC1BH,EAAWG,QAAUC,YAAY,KAC/BR,EAAcS,GACRA,GAZO,KAaLX,SAAkBY,GACpBZ,IAGFI,EAAYK,SAAU,EACtBI,cAAcP,EAAWG,SAClBE,GAGFA,EAtBI,MAwBZG,KAGE,KACDR,EAAWG,SACbI,cAAcP,EAAWG,WAG5B,CAACX,EAAQE,IAGVe,WAAAA,IAACC,SAAAA,SAASC,OAAM,CACdtB,UAAWA,EACXY,SAAUA,EACVW,mBAAoB,EACpBC,YAAavB,EACbwB,KAAMvB,EAAY,GAAK,GACvBwB,cAAeC,OAAAA,kBAAkBC,YACjCC,gBAAiB,IAAIC,SAEpBC,KAAKC,KAAK1B"}
+{"version":3,"file":"CountdownCircle.js","sources":["../../../../src/components/Alert/CountdownCircle.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport { Progress } from '../Progress'\n\nimport type { CountdownCircleProps } from './types'\n\nconst progressRate = 0.05\n\nconst CountdownCircle = ({ className, color, isCompact, paused, timer, onTimerFinish }: CountdownCircleProps) => {\n  const [countdown, setCountdown] = useState(timer)\n  const finishedRef = useRef<boolean>(false)\n  const intervalId = useRef<ReturnType<typeof setInterval>>()\n  const progress = (countdown / timer) * 100\n\n  useEffect(() => {\n    if (!paused && !finishedRef.current) {\n      intervalId.current = setInterval(() => {\n        setCountdown((prevCountdown) => {\n          if (prevCountdown <= progressRate) {\n            if (onTimerFinish !== undefined) {\n              onTimerFinish()\n            }\n\n            finishedRef.current = true\n            clearInterval(intervalId.current)\n            return prevCountdown\n          }\n\n          return prevCountdown - progressRate\n        })\n      }, progressRate * 1000)\n    }\n\n    return () => {\n      if (intervalId.current) {\n        clearInterval(intervalId.current)\n      }\n    }\n  }, [paused, onTimerFinish])\n\n  return (\n    <Progress.Circle\n      className={className}\n      progress={progress}\n      progressStartAngle={0}\n      resultColor={color}\n      size={isCompact ? 16 : 20}\n      strokeBGColor='transparent'\n      strokeLineWidth={1.5}\n    >\n      {Math.ceil(countdown)}\n    </Progress.Circle>\n  )\n}\n\nexport { CountdownCircle }\n"],"names":["CountdownCircle","className","color","isCompact","paused","timer","onTimerFinish","countdown","setCountdown","useState","finishedRef","useRef","intervalId","progress","useEffect","current","setInterval","prevCountdown","undefined","clearInterval","progressRate","_jsx","Progress","Circle","progressStartAngle","resultColor","size","strokeBGColor","strokeLineWidth","children","Math","ceil"],"mappings":"4JAQwBA,EAAGC,YAAWC,QAAOC,YAAWC,SAAQC,QAAOC,oBACrE,MAAOC,EAAWC,GAAgBC,MAAAA,SAASJ,GAC3C,MAAMK,EAAcC,MAAAA,QAAgB,GACpC,MAAMC,EAAaD,MAAAA,SACnB,MAAME,EAAYN,EAAYF,EAAS,IA4BvC,OA1BAS,MAAAA,UAAU,KACHV,GAAWM,EAAYK,UAC1BH,EAAWG,QAAUC,YAAY,KAC/BR,EAAcS,GACRA,GAZO,KAaLX,SAAkBY,GACpBZ,IAGFI,EAAYK,SAAU,EACtBI,cAAcP,EAAWG,SAClBE,GAGFA,EAtBI,MAwBZG,KAGE,KACDR,EAAWG,SACbI,cAAcP,EAAWG,WAG5B,CAACX,EAAQE,IAGVe,WAAAA,IAACC,SAAAA,SAASC,OAAM,CACdtB,UAAWA,EACXY,SAAUA,EACVW,mBAAoB,EACpBC,YAAavB,EACbwB,KAAMvB,EAAY,GAAK,GACvBwB,cAAc,cACdC,gBAAiB,IAAIC,SAEpBC,KAAKC,KAAKxB"}

package/components/Alert/CountdownCircle.mjs

@@ -1,2 +1,2 @@
-import{useState,useRef,useEffect}from'react';import{DefaultColorNames}from'../../theme/colors.mjs';import{jsx}from'react/jsx-runtime';import{Progress}from'../Progress/Progress.mjs';const CountdownCircle=({className:r,color:e,isCompact:t,paused:s,timer:o,onTimerFinish:c})=>{const[n,a]=useState(o);const l=useRef(!1);const u=useRef();const i=n/o*100;return useEffect(()=>(s||l.current||(u.current=setInterval(()=>{a(r=>r<=.05?(c!==void 0&&c(),l.current=!0,clearInterval(u.current),r):r-.05)},50)),()=>{u.current&&clearInterval(u.current)}),[s,c]),jsx(Progress.Circle,{className:r,progress:i,progressStartAngle:0,resultColor:e,size:t?16:20,strokeBGColor:DefaultColorNames.transparent,strokeLineWidth:1.5,children:Math.ceil(n)})};export{CountdownCircle};
+import{useState,useRef,useEffect}from'react';import{jsx}from'react/jsx-runtime';import{Progress}from'../Progress/Progress.mjs';const CountdownCircle=({className:r,color:e,isCompact:t,paused:s,timer:o,onTimerFinish:n})=>{const[c,a]=useState(o);const u=useRef(!1);const i=useRef();const l=c/o*100;return useEffect(()=>(s||u.current||(i.current=setInterval(()=>{a(r=>r<=.05?(n!==void 0&&n(),u.current=!0,clearInterval(i.current),r):r-.05)},50)),()=>{i.current&&clearInterval(i.current)}),[s,n]),jsx(Progress.Circle,{className:r,progress:l,progressStartAngle:0,resultColor:e,size:t?16:20,strokeBGColor:"transparent",strokeLineWidth:1.5,children:Math.ceil(c)})};export{CountdownCircle};
 //# sourceMappingURL=CountdownCircle.mjs.map

package/components/Alert/CountdownCircle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CountdownCircle.mjs","sources":["../../../../src/components/Alert/CountdownCircle.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport { DefaultColorNames } from 'theme/colors'\nimport { Progress } from '../Progress'\n\nimport type { CountdownCircleProps } from './types'\n\nconst progressRate = 0.05\n\nconst CountdownCircle = ({ className, color, isCompact, paused, timer, onTimerFinish }: CountdownCircleProps) => {\n  const [countdown, setCountdown] = useState(timer)\n  const finishedRef = useRef<boolean>(false)\n  const intervalId = useRef<ReturnType<typeof setInterval>>()\n  const progress = (countdown / timer) * 100\n\n  useEffect(() => {\n    if (!paused && !finishedRef.current) {\n      intervalId.current = setInterval(() => {\n        setCountdown((prevCountdown) => {\n          if (prevCountdown <= progressRate) {\n            if (onTimerFinish !== undefined) {\n              onTimerFinish()\n            }\n\n            finishedRef.current = true\n            clearInterval(intervalId.current)\n            return prevCountdown\n          }\n\n          return prevCountdown - progressRate\n        })\n      }, progressRate * 1000)\n    }\n\n    return () => {\n      if (intervalId.current) {\n        clearInterval(intervalId.current)\n      }\n    }\n  }, [paused, onTimerFinish])\n\n  return (\n    <Progress.Circle\n      className={className}\n      progress={progress}\n      progressStartAngle={0}\n      resultColor={color}\n      size={isCompact ? 16 : 20}\n      strokeBGColor={DefaultColorNames.transparent}\n      strokeLineWidth={1.5}\n    >\n      {Math.ceil(countdown)}\n    </Progress.Circle>\n  )\n}\n\nexport { CountdownCircle }\n"],"names":["CountdownCircle","className","color","isCompact","paused","timer","onTimerFinish","countdown","setCountdown","useState","finishedRef","useRef","intervalId","progress","useEffect","current","setInterval","prevCountdown","undefined","clearInterval","progressRate","_jsx","Progress","Circle","progressStartAngle","resultColor","size","strokeBGColor","DefaultColorNames","transparent","strokeLineWidth","children","Math","ceil"],"mappings":"qLASA,MAAMA,gBAAkBA,EAAGC,YAAWC,QAAOC,YAAWC,SAAQC,QAAOC,oBACrE,MAAOC,EAAWC,GAAgBC,SAASJ,GAC3C,MAAMK,EAAcC,QAAgB,GACpC,MAAMC,EAAaD,SACnB,MAAME,EAAYN,EAAYF,EAAS,IA4BvC,OA1BAS,UAAU,KACHV,GAAWM,EAAYK,UAC1BH,EAAWG,QAAUC,YAAY,KAC/BR,EAAcS,GACRA,GAZO,KAaLX,SAAkBY,GACpBZ,IAGFI,EAAYK,SAAU,EACtBI,cAAcP,EAAWG,SAClBE,GAGFA,EAtBI,MAwBZG,KAGE,KACDR,EAAWG,SACbI,cAAcP,EAAWG,WAG5B,CAACX,EAAQE,IAGVe,IAACC,SAASC,OAAM,CACdtB,UAAWA,EACXY,SAAUA,EACVW,mBAAoB,EACpBC,YAAavB,EACbwB,KAAMvB,EAAY,GAAK,GACvBwB,cAAeC,kBAAkBC,YACjCC,gBAAiB,IAAIC,SAEpBC,KAAKC,KAAK1B"}
+{"version":3,"file":"CountdownCircle.mjs","sources":["../../../../src/components/Alert/CountdownCircle.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport { Progress } from '../Progress'\n\nimport type { CountdownCircleProps } from './types'\n\nconst progressRate = 0.05\n\nconst CountdownCircle = ({ className, color, isCompact, paused, timer, onTimerFinish }: CountdownCircleProps) => {\n  const [countdown, setCountdown] = useState(timer)\n  const finishedRef = useRef<boolean>(false)\n  const intervalId = useRef<ReturnType<typeof setInterval>>()\n  const progress = (countdown / timer) * 100\n\n  useEffect(() => {\n    if (!paused && !finishedRef.current) {\n      intervalId.current = setInterval(() => {\n        setCountdown((prevCountdown) => {\n          if (prevCountdown <= progressRate) {\n            if (onTimerFinish !== undefined) {\n              onTimerFinish()\n            }\n\n            finishedRef.current = true\n            clearInterval(intervalId.current)\n            return prevCountdown\n          }\n\n          return prevCountdown - progressRate\n        })\n      }, progressRate * 1000)\n    }\n\n    return () => {\n      if (intervalId.current) {\n        clearInterval(intervalId.current)\n      }\n    }\n  }, [paused, onTimerFinish])\n\n  return (\n    <Progress.Circle\n      className={className}\n      progress={progress}\n      progressStartAngle={0}\n      resultColor={color}\n      size={isCompact ? 16 : 20}\n      strokeBGColor='transparent'\n      strokeLineWidth={1.5}\n    >\n      {Math.ceil(countdown)}\n    </Progress.Circle>\n  )\n}\n\nexport { CountdownCircle }\n"],"names":["CountdownCircle","className","color","isCompact","paused","timer","onTimerFinish","countdown","setCountdown","useState","finishedRef","useRef","intervalId","progress","useEffect","current","setInterval","prevCountdown","undefined","clearInterval","progressRate","_jsx","Progress","Circle","progressStartAngle","resultColor","size","strokeBGColor","strokeLineWidth","children","Math","ceil"],"mappings":"+HAQA,MAAMA,gBAAkBA,EAAGC,YAAWC,QAAOC,YAAWC,SAAQC,QAAOC,oBACrE,MAAOC,EAAWC,GAAgBC,SAASJ,GAC3C,MAAMK,EAAcC,QAAgB,GACpC,MAAMC,EAAaD,SACnB,MAAME,EAAYN,EAAYF,EAAS,IA4BvC,OA1BAS,UAAU,KACHV,GAAWM,EAAYK,UAC1BH,EAAWG,QAAUC,YAAY,KAC/BR,EAAcS,GACRA,GAZO,KAaLX,SAAkBY,GACpBZ,IAGFI,EAAYK,SAAU,EACtBI,cAAcP,EAAWG,SAClBE,GAGFA,EAtBI,MAwBZG,KAGE,KACDR,EAAWG,SACbI,cAAcP,EAAWG,WAG5B,CAACX,EAAQE,IAGVe,IAACC,SAASC,OAAM,CACdtB,UAAWA,EACXY,SAAUA,EACVW,mBAAoB,EACpBC,YAAavB,EACbwB,KAAMvB,EAAY,GAAK,GACvBwB,cAAc,cACdC,gBAAiB,IAAIC,SAEpBC,KAAKC,KAAKxB"}

package/components/ContextMenu/Item.js

@@ -1,2 +1,2 @@
-'use strict';var colors=require('../../theme/colors.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');const disabledHandler=e=>(e.preventDefault(),e.preventDefault(),e.stopPropagation(),!1);function ContextMenuItem({children:e,id:t,content:s,active:n,disabled:r,onClick:i,className:a,style:l}){return jsxRuntime.jsxs(style.RootItem,{style:l,className:a,active:n,disabled:r,onClick:r?disabledHandler:i,"data-id":t,children:[e,jsxRuntime.jsx(Text.Text,{size:"s",lineHeight:"s",color:colors.DefaultColorNames.mineShaft,children:s})]})}ContextMenuItem.displayName='ContextMenu.Item',exports.ContextMenuItem=ContextMenuItem;
+'use strict';var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');const disabledHandler=e=>(e.preventDefault(),e.preventDefault(),e.stopPropagation(),!1);function ContextMenuItem({children:e,id:t,content:n,active:s,disabled:i,onClick:a,className:r,style:l}){return jsxRuntime.jsxs(style.RootItem,{style:l,className:r,active:s,disabled:i,onClick:i?disabledHandler:a,"data-id":t,children:[e,jsxRuntime.jsx(Text.Text,{size:"s",lineHeight:"s",color:"mineShaft",children:n})]})}ContextMenuItem.displayName='ContextMenu.Item',exports.ContextMenuItem=ContextMenuItem;
 //# sourceMappingURL=Item.js.map

package/components/ContextMenu/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sources":["../../../../src/components/ContextMenu/Item.tsx"],"sourcesContent":["import type { BaseProps } from 'shared/interfaces'\nimport { DefaultColorNames } from 'theme/colors'\nimport { Text } from '../Text'\nimport * as Styled from './style'\n\nconst disabledHandler = (e: React.MouseEvent<HTMLDivElement>) => {\n  e.preventDefault()\n  e.preventDefault()\n  e.stopPropagation()\n\n  return false\n}\n\nexport interface ContextMenuItemProps extends BaseProps {\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  content?: string\n  active?: boolean\n  disabled?: boolean\n  onClick?: React.MouseEventHandler<HTMLDivElement>\n  id?: string | number\n}\n\nfunction ContextMenuItem({ children, id, content, active, disabled, onClick, className, style }: ContextMenuItemProps) {\n  return (\n    <Styled.RootItem\n      style={style}\n      className={className}\n      active={active}\n      disabled={disabled}\n      onClick={disabled ? disabledHandler : onClick}\n      data-id={id}\n    >\n      {children}\n      <Text size='s' lineHeight='s' color={DefaultColorNames.mineShaft}>\n        {content}\n      </Text>\n    </Styled.RootItem>\n  )\n}\n\nContextMenuItem.displayName = 'ContextMenu.Item'\n\nexport { ContextMenuItem }\n"],"names":["disabledHandler","e","preventDefault","stopPropagation","ContextMenuItem","children","id","content","active","disabled","onClick","className","style","_jsxs","Styled","_jsx","Text","size","lineHeight","color","DefaultColorNames","mineShaft","displayName"],"mappings":"yKAKA,MAAMA,gBAAmBC,IACvBA,EAAEC,iBACFD,EAAEC,iBACFD,EAAEE,mBAEK,GAeT,SAASC,iBAAgBC,SAAEA,EAAQC,GAAEA,EAAEC,QAAEA,EAAOC,OAAEA,EAAMC,SAAEA,EAAQC,QAAEA,EAAOC,UAAEA,EAAWC,MAAAA,IACtF,OACEC,WAAAA,KAACC,MAAAA,SAAe,CACdF,MAAOA,EACPD,UAAWA,EACXH,OAAQA,EACRC,SAAUA,EACVC,QAASD,EAAWT,gBAAkBU,EACtC,UAASJ,EAAGD,SAAA,CAEXA,EACDU,WAAAA,IAACC,UAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,MAAOC,OAAAA,kBAAkBC,UAAUhB,SAC9DE,MAIT,CAEAH,gBAAgBkB,YAAc"}
+{"version":3,"file":"Item.js","sources":["../../../../src/components/ContextMenu/Item.tsx"],"sourcesContent":["import type { BaseProps } from 'shared/interfaces'\nimport { Text } from '../Text'\nimport * as Styled from './style'\n\nconst disabledHandler = (e: React.MouseEvent<HTMLDivElement>) => {\n  e.preventDefault()\n  e.preventDefault()\n  e.stopPropagation()\n\n  return false\n}\n\nexport interface ContextMenuItemProps extends BaseProps {\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  content?: string\n  active?: boolean\n  disabled?: boolean\n  onClick?: React.MouseEventHandler<HTMLDivElement>\n  id?: string | number\n}\n\nfunction ContextMenuItem({ children, id, content, active, disabled, onClick, className, style }: ContextMenuItemProps) {\n  return (\n    <Styled.RootItem\n      style={style}\n      className={className}\n      active={active}\n      disabled={disabled}\n      onClick={disabled ? disabledHandler : onClick}\n      data-id={id}\n    >\n      {children}\n      <Text size='s' lineHeight='s' color='mineShaft'>\n        {content}\n      </Text>\n    </Styled.RootItem>\n  )\n}\n\nContextMenuItem.displayName = 'ContextMenu.Item'\n\nexport { ContextMenuItem }\n"],"names":["disabledHandler","e","preventDefault","stopPropagation","ContextMenuItem","children","id","content","active","disabled","onClick","className","style","_jsxs","Styled","_jsx","Text","size","lineHeight","color","displayName"],"mappings":"6HAIA,MAAMA,gBAAmBC,IACvBA,EAAEC,iBACFD,EAAEC,iBACFD,EAAEE,mBAEK,GAeT,SAASC,iBAAgBC,SAAEA,EAAQC,GAAEA,EAAEC,QAAEA,EAAOC,OAAEA,EAAMC,SAAEA,EAAQC,QAAEA,EAAOC,UAAEA,EAAWC,MAAAA,IACtF,OACEC,WAAAA,KAACC,MAAAA,SAAe,CACdF,MAAOA,EACPD,UAAWA,EACXH,OAAQA,EACRC,SAAUA,EACVC,QAASD,EAAWT,gBAAkBU,EACtC,UAASJ,EAAGD,SAAA,CAEXA,EACDU,WAAAA,IAACC,UAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,MAAM,YAAWd,SAC5CE,MAIT,CAEAH,gBAAgBgB,YAAc"}

package/components/ContextMenu/Item.mjs

@@ -1,2 +1,2 @@
-import{DefaultColorNames}from'../../theme/colors.mjs';import{RootItem}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';const disabledHandler=e=>(e.preventDefault(),e.preventDefault(),e.stopPropagation(),!1);function ContextMenuItem({children:e,id:t,content:o,active:s,disabled:n,onClick:a,className:l,style:i}){return jsxs(RootItem,{style:i,className:l,active:s,disabled:n,onClick:n?disabledHandler:a,"data-id":t,children:[e,jsx(Text,{size:"s",lineHeight:"s",color:DefaultColorNames.mineShaft,children:o})]})}ContextMenuItem.displayName='ContextMenu.Item';export{ContextMenuItem};
+import{RootItem}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';const disabledHandler=e=>(e.preventDefault(),e.preventDefault(),e.stopPropagation(),!1);function ContextMenuItem({children:e,id:t,content:n,active:s,disabled:o,onClick:i,className:a,style:l}){return jsxs(RootItem,{style:l,className:a,active:s,disabled:o,onClick:o?disabledHandler:i,"data-id":t,children:[e,jsx(Text,{size:"s",lineHeight:"s",color:"mineShaft",children:n})]})}ContextMenuItem.displayName='ContextMenu.Item';export{ContextMenuItem};
 //# sourceMappingURL=Item.mjs.map

package/components/ContextMenu/Item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Item.mjs","sources":["../../../../src/components/ContextMenu/Item.tsx"],"sourcesContent":["import type { BaseProps } from 'shared/interfaces'\nimport { DefaultColorNames } from 'theme/colors'\nimport { Text } from '../Text'\nimport * as Styled from './style'\n\nconst disabledHandler = (e: React.MouseEvent<HTMLDivElement>) => {\n  e.preventDefault()\n  e.preventDefault()\n  e.stopPropagation()\n\n  return false\n}\n\nexport interface ContextMenuItemProps extends BaseProps {\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  content?: string\n  active?: boolean\n  disabled?: boolean\n  onClick?: React.MouseEventHandler<HTMLDivElement>\n  id?: string | number\n}\n\nfunction ContextMenuItem({ children, id, content, active, disabled, onClick, className, style }: ContextMenuItemProps) {\n  return (\n    <Styled.RootItem\n      style={style}\n      className={className}\n      active={active}\n      disabled={disabled}\n      onClick={disabled ? disabledHandler : onClick}\n      data-id={id}\n    >\n      {children}\n      <Text size='s' lineHeight='s' color={DefaultColorNames.mineShaft}>\n        {content}\n      </Text>\n    </Styled.RootItem>\n  )\n}\n\nContextMenuItem.displayName = 'ContextMenu.Item'\n\nexport { ContextMenuItem }\n"],"names":["disabledHandler","e","preventDefault","stopPropagation","ContextMenuItem","children","id","content","active","disabled","onClick","className","style","_jsxs","Styled","_jsx","Text","size","lineHeight","color","DefaultColorNames","mineShaft","displayName"],"mappings":"mKAKA,MAAMA,gBAAmBC,IACvBA,EAAEC,iBACFD,EAAEC,iBACFD,EAAEE,mBAEK,GAeT,SAASC,iBAAgBC,SAAEA,EAAQC,GAAEA,EAAEC,QAAEA,EAAOC,OAAEA,EAAMC,SAAEA,EAAQC,QAAEA,EAAOC,UAAEA,EAASC,MAAEA,IACtF,OACEC,KAACC,SAAe,CACdF,MAAOA,EACPD,UAAWA,EACXH,OAAQA,EACRC,SAAUA,EACVC,QAASD,EAAWT,gBAAkBU,EACtC,UAASJ,EAAGD,SAAA,CAEXA,EACDU,IAACC,KAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,MAAOC,kBAAkBC,UAAUhB,SAC9DE,MAIT,CAEAH,gBAAgBkB,YAAc"}
+{"version":3,"file":"Item.mjs","sources":["../../../../src/components/ContextMenu/Item.tsx"],"sourcesContent":["import type { BaseProps } from 'shared/interfaces'\nimport { Text } from '../Text'\nimport * as Styled from './style'\n\nconst disabledHandler = (e: React.MouseEvent<HTMLDivElement>) => {\n  e.preventDefault()\n  e.preventDefault()\n  e.stopPropagation()\n\n  return false\n}\n\nexport interface ContextMenuItemProps extends BaseProps {\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  content?: string\n  active?: boolean\n  disabled?: boolean\n  onClick?: React.MouseEventHandler<HTMLDivElement>\n  id?: string | number\n}\n\nfunction ContextMenuItem({ children, id, content, active, disabled, onClick, className, style }: ContextMenuItemProps) {\n  return (\n    <Styled.RootItem\n      style={style}\n      className={className}\n      active={active}\n      disabled={disabled}\n      onClick={disabled ? disabledHandler : onClick}\n      data-id={id}\n    >\n      {children}\n      <Text size='s' lineHeight='s' color='mineShaft'>\n        {content}\n      </Text>\n    </Styled.RootItem>\n  )\n}\n\nContextMenuItem.displayName = 'ContextMenu.Item'\n\nexport { ContextMenuItem }\n"],"names":["disabledHandler","e","preventDefault","stopPropagation","ContextMenuItem","children","id","content","active","disabled","onClick","className","style","_jsxs","Styled","_jsx","Text","size","lineHeight","color","displayName"],"mappings":"6GAIA,MAAMA,gBAAmBC,IACvBA,EAAEC,iBACFD,EAAEC,iBACFD,EAAEE,mBAEK,GAeT,SAASC,iBAAgBC,SAAEA,EAAQC,GAAEA,EAAEC,QAAEA,EAAOC,OAAEA,EAAMC,SAAEA,EAAQC,QAAEA,EAAOC,UAAEA,EAASC,MAAEA,IACtF,OACEC,KAACC,SAAe,CACdF,MAAOA,EACPD,UAAWA,EACXH,OAAQA,EACRC,SAAUA,EACVC,QAASD,EAAWT,gBAAkBU,EACtC,UAASJ,EAAGD,SAAA,CAEXA,EACDU,IAACC,KAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,MAAM,YAAWd,SAC5CE,MAIT,CAEAH,gBAAgBgB,YAAc"}

package/components/ContextMenu.Multilevel/Controls.js

@@ -1,2 +1,2 @@
-'use strict';var colors=require('../../theme/colors.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');exports.Controls=({cancel:e,confirm:s,className:l,style:t})=>jsxRuntime.jsxs(style.ControlsRoot,{className:l,style:t,children:[e?jsxRuntime.jsx(style.ControlsItem,{className:"cancel",role:"button",onClick:e.onClick,children:jsxRuntime.jsx(Text.Text,{size:"m",lineHeight:"s",color:e.color||colors.DefaultColorNames.silver,children:e.content})}):null,s?jsxRuntime.jsx(style.ControlsItem,{className:"confirm",role:"button",onClick:s.onClick,children:jsxRuntime.jsx(Text.Text,{size:"m",lineHeight:"s",color:s.color||colors.DefaultColorNames.accent,children:s.content})}):null]});
+'use strict';var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');exports.Controls=({cancel:e,confirm:t,className:s,style:l})=>jsxRuntime.jsxs(style.ControlsRoot,{className:s,style:l,children:[e?jsxRuntime.jsx(style.ControlsItem,{className:"cancel",role:"button",onClick:e.onClick,children:jsxRuntime.jsx(Text.Text,{size:"m",lineHeight:"s",color:e.color||'silver',children:e.content})}):null,t?jsxRuntime.jsx(style.ControlsItem,{className:"confirm",role:"button",onClick:t.onClick,children:jsxRuntime.jsx(Text.Text,{size:"m",lineHeight:"s",color:t.color||'accent',children:t.content})}):null]});
 //# sourceMappingURL=Controls.js.map

package/components/ContextMenu.Multilevel/Controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.js","sources":["../../../../src/components/ContextMenu.Multilevel/Controls.tsx"],"sourcesContent":["import type { BaseProps } from 'shared/interfaces'\nimport { DefaultColorNames } from 'theme/colors'\nimport { Text } from '../Text'\nimport type { MultiLevelControls } from './ContextMenu.Multilevel'\nimport * as Styled from './style'\n\nexport interface ControlsProps extends BaseProps {\n  /** Cancel Text element props */\n  cancel?: MultiLevelControls['cancel']\n  /** Confirm Text element props */\n  confirm?: MultiLevelControls['confirm']\n}\n\nexport function Controls({ cancel, confirm, className, style }: ControlsProps) {\n  return (\n    <Styled.ControlsRoot className={className} style={style}>\n      {cancel ? (\n        // eslint-disable-next-line react/jsx-handler-names\n        <Styled.ControlsItem className='cancel' role='button' onClick={cancel.onClick}>\n          <Text size='m' lineHeight='s' color={cancel.color || DefaultColorNames.silver}>\n            {cancel.content}\n          </Text>\n        </Styled.ControlsItem>\n      ) : null}\n      {confirm ? (\n        // eslint-disable-next-line react/jsx-handler-names\n        <Styled.ControlsItem className='confirm' role='button' onClick={confirm.onClick}>\n          <Text size='m' lineHeight='s' color={confirm.color || DefaultColorNames.accent}>\n            {confirm.content}\n          </Text>\n        </Styled.ControlsItem>\n      ) : null}\n    </Styled.ControlsRoot>\n  )\n}\n"],"names":["cancel","confirm","className","style","_jsxs","Styled","children","_jsx","role","onClick","Text","size","lineHeight","color","DefaultColorNames","silver","content","accent"],"mappings":"0LAaO,EAAkBA,OAAEA,EAAMC,QAAEA,EAAOC,UAAEA,EAAWC,MAAAA,KAEnDC,WAAAA,KAACC,MAAAA,aAAmB,CAACH,UAAWA,EAAWC,MAAOA,EAAMG,UACrDN,EAECO,WAAAA,IAACF,MAAAA,aAAmB,CAACH,UAAU,SAASM,KAAK,SAASC,QAAST,EAAOS,QAAQH,SAC5EC,WAAAA,IAACG,UAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,MAAOb,EAAOa,OAASC,OAAAA,kBAAkBC,OAAOT,SAC3EN,EAAOgB,YAGV,KACHf,EAECM,WAAAA,IAACF,MAAAA,aAAmB,CAACH,UAAU,UAAUM,KAAK,SAASC,QAASR,EAAQQ,QAAQH,SAC9EC,WAAAA,IAACG,UAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,MAAOZ,EAAQY,OAASC,OAAAA,kBAAkBG,OAAOX,SAC5EL,EAAQe,YAGX"}
+{"version":3,"file":"Controls.js","sources":["../../../../src/components/ContextMenu.Multilevel/Controls.tsx"],"sourcesContent":["import type { BaseProps } from 'shared/interfaces'\nimport { Text } from '../Text'\nimport type { MultiLevelControls } from './ContextMenu.Multilevel'\nimport * as Styled from './style'\n\nexport interface ControlsProps extends BaseProps {\n  /** Cancel Text element props */\n  cancel?: MultiLevelControls['cancel']\n  /** Confirm Text element props */\n  confirm?: MultiLevelControls['confirm']\n}\n\nexport function Controls({ cancel, confirm, className, style }: ControlsProps) {\n  return (\n    <Styled.ControlsRoot className={className} style={style}>\n      {cancel ? (\n        // eslint-disable-next-line react/jsx-handler-names\n        <Styled.ControlsItem className='cancel' role='button' onClick={cancel.onClick}>\n          <Text size='m' lineHeight='s' color={cancel.color || 'silver'}>\n            {cancel.content}\n          </Text>\n        </Styled.ControlsItem>\n      ) : null}\n      {confirm ? (\n        // eslint-disable-next-line react/jsx-handler-names\n        <Styled.ControlsItem className='confirm' role='button' onClick={confirm.onClick}>\n          <Text size='m' lineHeight='s' color={confirm.color || 'accent'}>\n            {confirm.content}\n          </Text>\n        </Styled.ControlsItem>\n      ) : null}\n    </Styled.ControlsRoot>\n  )\n}\n"],"names":["cancel","confirm","className","style","_jsxs","Styled","children","_jsx","role","onClick","Text","size","lineHeight","color","content"],"mappings":"8IAYO,EAAkBA,OAAEA,EAAMC,QAAEA,EAAOC,UAAEA,EAAWC,MAAAA,KAEnDC,WAAAA,KAACC,MAAAA,aAAmB,CAACH,UAAWA,EAAWC,MAAOA,EAAMG,UACrDN,EAECO,WAAAA,IAACF,MAAAA,aAAmB,CAACH,UAAU,SAASM,KAAK,SAASC,QAAST,EAAOS,QAAQH,SAC5EC,WAAAA,IAACG,UAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,MAAOb,EAAOa,OAAS,SAASP,SAC3DN,EAAOc,YAGV,KACHb,EAECM,WAAAA,IAACF,MAAAA,aAAmB,CAACH,UAAU,UAAUM,KAAK,SAASC,QAASR,EAAQQ,QAAQH,SAC9EC,WAAAA,IAACG,UAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,MAAOZ,EAAQY,OAAS,SAASP,SAC5DL,EAAQa,YAGX"}

package/components/ContextMenu.Multilevel/Controls.mjs

@@ -1,2 +1,2 @@
-import{DefaultColorNames}from'../../theme/colors.mjs';import{ControlsRoot,ControlsItem}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';function Controls({cancel:o,confirm:e,className:l,style:t}){return jsxs(ControlsRoot,{className:l,style:t,children:[o?jsx(ControlsItem,{className:"cancel",role:"button",onClick:o.onClick,children:jsx(Text,{size:"m",lineHeight:"s",color:o.color||DefaultColorNames.silver,children:o.content})}):null,e?jsx(ControlsItem,{className:"confirm",role:"button",onClick:e.onClick,children:jsx(Text,{size:"m",lineHeight:"s",color:e.color||DefaultColorNames.accent,children:e.content})}):null]})}export{Controls};
+import{ControlsRoot,ControlsItem}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';function Controls({cancel:o,confirm:t,className:e,style:l}){return jsxs(ControlsRoot,{className:e,style:l,children:[o?jsx(ControlsItem,{className:"cancel",role:"button",onClick:o.onClick,children:jsx(Text,{size:"m",lineHeight:"s",color:o.color||'silver',children:o.content})}):null,t?jsx(ControlsItem,{className:"confirm",role:"button",onClick:t.onClick,children:jsx(Text,{size:"m",lineHeight:"s",color:t.color||'accent',children:t.content})}):null]})}export{Controls};
 //# sourceMappingURL=Controls.mjs.map

package/components/ContextMenu.Multilevel/Controls.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.mjs","sources":["../../../../src/components/ContextMenu.Multilevel/Controls.tsx"],"sourcesContent":["import type { BaseProps } from 'shared/interfaces'\nimport { DefaultColorNames } from 'theme/colors'\nimport { Text } from '../Text'\nimport type { MultiLevelControls } from './ContextMenu.Multilevel'\nimport * as Styled from './style'\n\nexport interface ControlsProps extends BaseProps {\n  /** Cancel Text element props */\n  cancel?: MultiLevelControls['cancel']\n  /** Confirm Text element props */\n  confirm?: MultiLevelControls['confirm']\n}\n\nexport function Controls({ cancel, confirm, className, style }: ControlsProps) {\n  return (\n    <Styled.ControlsRoot className={className} style={style}>\n      {cancel ? (\n        // eslint-disable-next-line react/jsx-handler-names\n        <Styled.ControlsItem className='cancel' role='button' onClick={cancel.onClick}>\n          <Text size='m' lineHeight='s' color={cancel.color || DefaultColorNames.silver}>\n            {cancel.content}\n          </Text>\n        </Styled.ControlsItem>\n      ) : null}\n      {confirm ? (\n        // eslint-disable-next-line react/jsx-handler-names\n        <Styled.ControlsItem className='confirm' role='button' onClick={confirm.onClick}>\n          <Text size='m' lineHeight='s' color={confirm.color || DefaultColorNames.accent}>\n            {confirm.content}\n          </Text>\n        </Styled.ControlsItem>\n      ) : null}\n    </Styled.ControlsRoot>\n  )\n}\n"],"names":["Controls","cancel","confirm","className","style","_jsxs","Styled","children","_jsx","role","onClick","Text","size","lineHeight","color","DefaultColorNames","silver","content","accent"],"mappings":"oLAaO,SAASA,UAASC,OAAEA,EAAMC,QAAEA,EAAOC,UAAEA,EAASC,MAAEA,IACrD,OACEC,KAACC,aAAmB,CAACH,UAAWA,EAAWC,MAAOA,EAAMG,UACrDN,EAECO,IAACF,aAAmB,CAACH,UAAU,SAASM,KAAK,SAASC,QAAST,EAAOS,QAAQH,SAC5EC,IAACG,KAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,MAAOb,EAAOa,OAASC,kBAAkBC,OAAOT,SAC3EN,EAAOgB,YAGV,KACHf,EAECM,IAACF,aAAmB,CAACH,UAAU,UAAUM,KAAK,SAASC,QAASR,EAAQQ,QAAQH,SAC9EC,IAACG,KAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,MAAOZ,EAAQY,OAASC,kBAAkBG,OAAOX,SAC5EL,EAAQe,YAGX,OAGV"}
+{"version":3,"file":"Controls.mjs","sources":["../../../../src/components/ContextMenu.Multilevel/Controls.tsx"],"sourcesContent":["import type { BaseProps } from 'shared/interfaces'\nimport { Text } from '../Text'\nimport type { MultiLevelControls } from './ContextMenu.Multilevel'\nimport * as Styled from './style'\n\nexport interface ControlsProps extends BaseProps {\n  /** Cancel Text element props */\n  cancel?: MultiLevelControls['cancel']\n  /** Confirm Text element props */\n  confirm?: MultiLevelControls['confirm']\n}\n\nexport function Controls({ cancel, confirm, className, style }: ControlsProps) {\n  return (\n    <Styled.ControlsRoot className={className} style={style}>\n      {cancel ? (\n        // eslint-disable-next-line react/jsx-handler-names\n        <Styled.ControlsItem className='cancel' role='button' onClick={cancel.onClick}>\n          <Text size='m' lineHeight='s' color={cancel.color || 'silver'}>\n            {cancel.content}\n          </Text>\n        </Styled.ControlsItem>\n      ) : null}\n      {confirm ? (\n        // eslint-disable-next-line react/jsx-handler-names\n        <Styled.ControlsItem className='confirm' role='button' onClick={confirm.onClick}>\n          <Text size='m' lineHeight='s' color={confirm.color || 'accent'}>\n            {confirm.content}\n          </Text>\n        </Styled.ControlsItem>\n      ) : null}\n    </Styled.ControlsRoot>\n  )\n}\n"],"names":["Controls","cancel","confirm","className","style","_jsxs","Styled","children","_jsx","role","onClick","Text","size","lineHeight","color","content"],"mappings":"8HAYO,SAASA,UAASC,OAAEA,EAAMC,QAAEA,EAAOC,UAAEA,EAASC,MAAEA,IACrD,OACEC,KAACC,aAAmB,CAACH,UAAWA,EAAWC,MAAOA,EAAMG,UACrDN,EAECO,IAACF,aAAmB,CAACH,UAAU,SAASM,KAAK,SAASC,QAAST,EAAOS,QAAQH,SAC5EC,IAACG,KAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,MAAOb,EAAOa,OAAS,SAASP,SAC3DN,EAAOc,YAGV,KACHb,EAECM,IAACF,aAAmB,CAACH,UAAU,UAAUM,KAAK,SAASC,QAASR,EAAQQ,QAAQH,SAC9EC,IAACG,KAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,MAAOZ,EAAQY,OAAS,SAASP,SAC5DL,EAAQa,YAGX,OAGV"}

package/components/ContextMenu.Multilevel/Heading.js

@@ -1,2 +1,2 @@
-'use strict';var colors=require('../../theme/colors.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');exports.Heading=({children:e,content:r})=>jsxRuntime.jsxs(style.HeadingRoot,{children:[e,jsxRuntime.jsx(Text.Text,{size:"s",lineHeight:"s",weight:"bold",color:colors.DefaultColorNames.mineShaft,children:r})]});
+'use strict';var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');exports.Heading=({children:e,content:t})=>jsxRuntime.jsxs(style.HeadingRoot,{children:[e,jsxRuntime.jsx(Text.Text,{size:"s",lineHeight:"s",weight:"bold",color:"mineShaft",children:t})]});
 //# sourceMappingURL=Heading.js.map

package/components/ContextMenu.Multilevel/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","sources":["../../../../src/components/ContextMenu.Multilevel/Heading.tsx"],"sourcesContent":["import { DefaultColorNames } from 'theme/colors'\nimport { Text } from '../Text'\nimport * as Styled from './style'\n\nexport interface HeadingProps {\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  content?: React.ReactNode\n}\n\nexport function Heading({ children, content }: HeadingProps) {\n  return (\n    <Styled.HeadingRoot>\n      {children}\n      <Text size='s' lineHeight='s' weight='bold' color={DefaultColorNames.mineShaft}>\n        {content}\n      </Text>\n    </Styled.HeadingRoot>\n  )\n}\n"],"names":["children","content","_jsxs","Styled","_jsx","Text","size","lineHeight","weight","color","DefaultColorNames","mineShaft"],"mappings":"yLAYO,EAAiBA,SAAEA,EAAQC,QAAEA,KAEhCC,WAAAA,KAACC,MAAAA,YAAkB,CAAAH,SAAA,CAChBA,EACDI,WAAAA,IAACC,UAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,OAAO,OAAOC,MAAOC,OAAAA,kBAAkBC,UAAUX,SAC5EC"}
+{"version":3,"file":"Heading.js","sources":["../../../../src/components/ContextMenu.Multilevel/Heading.tsx"],"sourcesContent":["import { Text } from '../Text'\nimport * as Styled from './style'\n\nexport interface HeadingProps {\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  content?: React.ReactNode\n}\n\nexport function Heading({ children, content }: HeadingProps) {\n  return (\n    <Styled.HeadingRoot>\n      {children}\n      <Text size='s' lineHeight='s' weight='bold' color='mineShaft'>\n        {content}\n      </Text>\n    </Styled.HeadingRoot>\n  )\n}\n"],"names":["children","content","_jsxs","Styled","_jsx","Text","size","lineHeight","weight","color"],"mappings":"6IAWO,EAAiBA,SAAEA,EAAQC,QAAEA,KAEhCC,WAAAA,KAACC,MAAAA,YAAkB,CAAAH,SAAA,CAChBA,EACDI,WAAAA,IAACC,UAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,OAAO,OAAOC,MAAM,YAAWT,SAC1DC"}

package/components/ContextMenu.Multilevel/Heading.mjs

@@ -1,2 +1,2 @@
-import{DefaultColorNames}from'../../theme/colors.mjs';import{HeadingRoot}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';function Heading({children:e,content:o}){return jsxs(HeadingRoot,{children:[e,jsx(Text,{size:"s",lineHeight:"s",weight:"bold",color:DefaultColorNames.mineShaft,children:o})]})}export{Heading};
+import{HeadingRoot}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';function Heading({children:e,content:t}){return jsxs(HeadingRoot,{children:[e,jsx(Text,{size:"s",lineHeight:"s",weight:"bold",color:"mineShaft",children:t})]})}export{Heading};
 //# sourceMappingURL=Heading.mjs.map

package/components/ContextMenu.Multilevel/Heading.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.mjs","sources":["../../../../src/components/ContextMenu.Multilevel/Heading.tsx"],"sourcesContent":["import { DefaultColorNames } from 'theme/colors'\nimport { Text } from '../Text'\nimport * as Styled from './style'\n\nexport interface HeadingProps {\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  content?: React.ReactNode\n}\n\nexport function Heading({ children, content }: HeadingProps) {\n  return (\n    <Styled.HeadingRoot>\n      {children}\n      <Text size='s' lineHeight='s' weight='bold' color={DefaultColorNames.mineShaft}>\n        {content}\n      </Text>\n    </Styled.HeadingRoot>\n  )\n}\n"],"names":["Heading","children","content","_jsxs","Styled","_jsx","Text","size","lineHeight","weight","color","DefaultColorNames","mineShaft"],"mappings":"sKAYO,SAASA,SAAQC,SAAEA,EAAQC,QAAEA,IAClC,OACEC,KAACC,YAAkB,CAAAH,SAAA,CAChBA,EACDI,IAACC,KAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,OAAO,OAAOC,MAAOC,kBAAkBC,UAAUX,SAC5EC,MAIT"}
+{"version":3,"file":"Heading.mjs","sources":["../../../../src/components/ContextMenu.Multilevel/Heading.tsx"],"sourcesContent":["import { Text } from '../Text'\nimport * as Styled from './style'\n\nexport interface HeadingProps {\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  content?: React.ReactNode\n}\n\nexport function Heading({ children, content }: HeadingProps) {\n  return (\n    <Styled.HeadingRoot>\n      {children}\n      <Text size='s' lineHeight='s' weight='bold' color='mineShaft'>\n        {content}\n      </Text>\n    </Styled.HeadingRoot>\n  )\n}\n"],"names":["Heading","children","content","_jsxs","Styled","_jsx","Text","size","lineHeight","weight","color"],"mappings":"gHAWO,SAASA,SAAQC,SAAEA,EAAQC,QAAEA,IAClC,OACEC,KAACC,YAAkB,CAAAH,SAAA,CAChBA,EACDI,IAACC,KAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,OAAO,OAAOC,MAAM,YAAWT,SAC1DC,MAIT"}

package/components/ContextMenu.Multilevel/SubHeading.js

@@ -1,2 +1,2 @@
-'use strict';var colors=require('../../theme/colors.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');exports.SubHeading=({children:e,content:r})=>jsxRuntime.jsxs(style.SubHeadingRoot,{children:[e,jsxRuntime.jsx(Text.Text,{size:"s",lineHeight:"s",color:colors.DefaultColorNames.mineShaft,children:r})]});
+'use strict';var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');exports.SubHeading=({children:e,content:t})=>jsxRuntime.jsxs(style.SubHeadingRoot,{children:[e,jsxRuntime.jsx(Text.Text,{size:"s",lineHeight:"s",color:"mineShaft",children:t})]});
 //# sourceMappingURL=SubHeading.js.map

package/components/ContextMenu.Multilevel/SubHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubHeading.js","sources":["../../../../src/components/ContextMenu.Multilevel/SubHeading.tsx"],"sourcesContent":["import { DefaultColorNames } from 'theme/colors'\nimport { Text } from '../Text'\nimport * as Styled from './style'\n\nexport interface SubHeadingProps {\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  content?: React.ReactNode\n}\n\nexport function SubHeading({ children, content }: SubHeadingProps) {\n  return (\n    <Styled.SubHeadingRoot>\n      {children}\n      <Text size='s' lineHeight='s' color={DefaultColorNames.mineShaft}>\n        {content}\n      </Text>\n    </Styled.SubHeadingRoot>\n  )\n}\n"],"names":["children","content","_jsxs","Styled","_jsx","Text","size","lineHeight","color","DefaultColorNames","mineShaft"],"mappings":"4LAYO,EAAoBA,SAAEA,EAAQC,QAAEA,KAEnCC,WAAAA,KAACC,MAAAA,eAAqB,CAAAH,SAAA,CACnBA,EACDI,WAAAA,IAACC,UAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,MAAOC,OAAAA,kBAAkBC,UAAUV,SAC9DC"}
+{"version":3,"file":"SubHeading.js","sources":["../../../../src/components/ContextMenu.Multilevel/SubHeading.tsx"],"sourcesContent":["import { Text } from '../Text'\nimport * as Styled from './style'\n\nexport interface SubHeadingProps {\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  content?: React.ReactNode\n}\n\nexport function SubHeading({ children, content }: SubHeadingProps) {\n  return (\n    <Styled.SubHeadingRoot>\n      {children}\n      <Text size='s' lineHeight='s' color='mineShaft'>\n        {content}\n      </Text>\n    </Styled.SubHeadingRoot>\n  )\n}\n"],"names":["children","content","_jsxs","Styled","_jsx","Text","size","lineHeight","color"],"mappings":"gJAWO,EAAoBA,SAAEA,EAAQC,QAAEA,KAEnCC,WAAAA,KAACC,MAAAA,eAAqB,CAAAH,SAAA,CACnBA,EACDI,WAAAA,IAACC,UAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,MAAM,YAAWR,SAC5CC"}

package/components/ContextMenu.Multilevel/SubHeading.mjs

@@ -1,2 +1,2 @@
-import{DefaultColorNames}from'../../theme/colors.mjs';import{SubHeadingRoot}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';function SubHeading({children:e,content:o}){return jsxs(SubHeadingRoot,{children:[e,jsx(Text,{size:"s",lineHeight:"s",color:DefaultColorNames.mineShaft,children:o})]})}export{SubHeading};
+import{SubHeadingRoot}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';function SubHeading({children:e,content:t}){return jsxs(SubHeadingRoot,{children:[e,jsx(Text,{size:"s",lineHeight:"s",color:"mineShaft",children:t})]})}export{SubHeading};
 //# sourceMappingURL=SubHeading.mjs.map

package/components/ContextMenu.Multilevel/SubHeading.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SubHeading.mjs","sources":["../../../../src/components/ContextMenu.Multilevel/SubHeading.tsx"],"sourcesContent":["import { DefaultColorNames } from 'theme/colors'\nimport { Text } from '../Text'\nimport * as Styled from './style'\n\nexport interface SubHeadingProps {\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  content?: React.ReactNode\n}\n\nexport function SubHeading({ children, content }: SubHeadingProps) {\n  return (\n    <Styled.SubHeadingRoot>\n      {children}\n      <Text size='s' lineHeight='s' color={DefaultColorNames.mineShaft}>\n        {content}\n      </Text>\n    </Styled.SubHeadingRoot>\n  )\n}\n"],"names":["SubHeading","children","content","_jsxs","Styled","_jsx","Text","size","lineHeight","color","DefaultColorNames","mineShaft"],"mappings":"yKAYO,SAASA,YAAWC,SAAEA,EAAQC,QAAEA,IACrC,OACEC,KAACC,eAAqB,CAAAH,SAAA,CACnBA,EACDI,IAACC,KAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,MAAOC,kBAAkBC,UAAUV,SAC9DC,MAIT"}
+{"version":3,"file":"SubHeading.mjs","sources":["../../../../src/components/ContextMenu.Multilevel/SubHeading.tsx"],"sourcesContent":["import { Text } from '../Text'\nimport * as Styled from './style'\n\nexport interface SubHeadingProps {\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  content?: React.ReactNode\n}\n\nexport function SubHeading({ children, content }: SubHeadingProps) {\n  return (\n    <Styled.SubHeadingRoot>\n      {children}\n      <Text size='s' lineHeight='s' color='mineShaft'>\n        {content}\n      </Text>\n    </Styled.SubHeadingRoot>\n  )\n}\n"],"names":["SubHeading","children","content","_jsxs","Styled","_jsx","Text","size","lineHeight","color"],"mappings":"mHAWO,SAASA,YAAWC,SAAEA,EAAQC,QAAEA,IACrC,OACEC,KAACC,eAAqB,CAAAH,SAAA,CACnBA,EACDI,IAACC,KAAI,CAACC,KAAK,IAAIC,WAAW,IAAIC,MAAM,YAAWR,SAC5CC,MAIT"}

package/components/DialogComponent/style.js

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveLayout=require('../../mixins/responsive-layout.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var maskRectangle=require('./images/mask-rectangle.svg.js');var maskSlope=require('./images/mask-slope.svg.js');var Spacer=require('../Spacer/Spacer.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const filterLayoutProps=o=>!['layout','layoutXXS','layoutXS','layoutS','layoutM','layoutL','layoutXL','layouts'].includes(o);const shouldForwardDialogComponentProp=style.createShouldForwardProp(o=>!['dragging','fancy','zIndex'].includes(o),filterLayoutProps);const filterCommonProps=style.createShouldForwardProp();const Fading=styled__default.default.div.withConfig({shouldForwardProp:o=>!['visible','after'].includes(o)}).withConfig({displayName:"DialogComponent__Fading",componentId:"ui__sc-1dlvioj-0"})(["box-sizing:border-box;position:relative;flex-shrink:0;width:100%;z-index:1;&::before,&::after{transition-property:opacity;transition-duration:150ms;transition-timing-function:ease-in;pointer-events:none;}",""],o=>o.after?`\n          &::after {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            bottom: 100%;\n            right: 4px; \n            left: 4px;\n            margin-bottom: -1px;\n            background-image: linear-gradient(0deg, currentcolor, transparent);\n            opacity: ${o.visible?1:0};\n          }\n            `:`\n          &::before {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            top: 100%;\n            right: 4px;\n            left: 4px;\n            margin-top: -1px;\n            background-image: linear-gradient(180deg, currentcolor, transparent);\n            opacity: ${o.visible?1:0};\n          }\n      `);const FancyBackground=styled__default.default.div.withConfig({displayName:"DialogComponent__FancyBackground",componentId:"ui__sc-1dlvioj-1"})(["box-sizing:border-box;position:absolute;top:0;right:0;bottom:0;left:0;mask-image:url(","),url(",");mask-repeat:no-repeat,no-repeat;mask-size:100% 32px,cover;mask-position:0 56px,0 87px;border-radius:inherit;"],maskSlope.default,maskRectangle.default);const template_default=o=>`\n    color: ${o.color};\n    background-color: ${o.backgroundColor};\n    box-shadow: 0 6px 20px 1px ${o.shadowColor};\n    ${Fading} {\n      color: ${o.backgroundColor};\n    }\n  `,template_fancy=o=>`\n    color: ${o.color};\n    ${FancyBackground} {\n      background-color: ${o.backgroundColor};\n    }\n    ${Fading} {\n      color: ${o.backgroundColor};\n    }\n  `;const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardDialogComponentProp}).withConfig({displayName:"DialogComponent__Root",componentId:"ui__sc-1dlvioj-2"})(["box-sizing:border-box;display:flex;position:relative;isolation:isolate;"," "," "," "," ",""],o=>(o.fancy?template_fancy:template_default)({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}),o=>o.dragging&&`\n      box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n      `,o=>typeof o.zIndex=='number'&&`z-index: ${o.zIndex};`,responsiveSize.responsiveSize,responsiveLayout.responsiveLayout);const Body=styled__default.default.div.withConfig({displayName:"DialogComponent__Body",componentId:"ui__sc-1dlvioj-3"})(["box-sizing:border-box;position:relative;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;"]);const StickyHeader=styled__default.default.div.withConfig({shouldForwardProp:filterCommonProps}).withConfig({displayName:"DialogComponent__StickyHeader",componentId:"ui__sc-1dlvioj-4"})(["",""],responsiveSize.responsiveSize);const Container=styled__default.default.div.withConfig({shouldForwardProp:filterCommonProps}).withConfig({displayName:"DialogComponent__Container",componentId:"ui__sc-1dlvioj-5"})(["box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;",""],responsiveSize.responsiveSize);const ContentScrollArea=styled__default.default.div.withConfig({shouldForwardProp:o=>!['scrollable'].includes(o)}).withConfig({displayName:"DialogComponent__ContentScrollArea",componentId:"ui__sc-1dlvioj-6"})(["box-sizing:border-box;flex-grow:1;margin:0 4px;overflow:auto;"," ",""],o=>`\n    overscroll-behavior: ${o.scrollable?'contain':'auto'};\n  `,focus.focus);const Content=styled__default.default.div.withConfig({shouldForwardProp:filterCommonProps}).withConfig({displayName:"DialogComponent__Content",componentId:"ui__sc-1dlvioj-7"})(["box-sizing:border-box;",""],responsiveSize.responsiveSize);const Footer=styled__default.default.div.withConfig({shouldForwardProp:filterCommonProps}).withConfig({displayName:"DialogComponent__Footer",componentId:"ui__sc-1dlvioj-8"})(["box-sizing:border-box;flex-shrink:0;",""],responsiveSize.responsiveSize);const DraggingHandle=styled__default.default.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__DraggingHandle",componentId:"ui__sc-1dlvioj-9"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;display:flex;justify-content:center;padding-top:10px;padding-bottom:10px;cursor:grab;touch-action:none;z-index:2;",""],responsiveLayout.responsiveLayout);const DraggingIconContainer=styled__default.default.div.withConfig({displayName:"DialogComponent__DraggingIconContainer",componentId:"ui__sc-1dlvioj-10"})(["box-sizing:border-box;display:flex;padding:3px 12px;border-radius:12px;& > *{height:0.25em;}"," ",""],o=>`\n      background-color: ${o.theme.colors['bg-onmain-tertiary']};\n    `,focus.focus);const Media=styled__default.default.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__Media",componentId:"ui__sc-1dlvioj-11"})(["box-sizing:border-box;overflow:hidden;flex-shrink:0;",""],responsiveLayout.responsiveLayout);const Img=styled__default.default.div.withConfig({shouldForwardProp:o=>o!=='src'}).withConfig({displayName:"DialogComponent__Img",componentId:"ui__sc-1dlvioj-12"})(["box-sizing:border-box;",""],o=>o.src&&`\n      background-image: url(${o.src});\n      background-repeat: no-repeat;\n      background-position: 50%;\n      background-size: cover;\n    `);const LayoutSpacer=styled__default.default(Spacer.Spacer).withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__LayoutSpacer",componentId:"ui__sc-1dlvioj-13"})(["",""],responsiveLayout.responsiveLayout);const ButtonPosition=styled__default.default.div.withConfig({displayName:"DialogComponent__ButtonPosition",componentId:"ui__sc-1dlvioj-14"})(["box-sizing:border-box;position:absolute;top:0;right:0;z-index:3;"]);const ProgressPosition=styled__default.default.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__ProgressPosition",componentId:"ui__sc-1dlvioj-15"})(["box-sizing:border-box;position:absolute;z-index:2;",""],responsiveLayout.responsiveLayout);exports.Body=Body,exports.ButtonPosition=ButtonPosition,exports.Container=Container,exports.Content=Content,exports.ContentScrollArea=ContentScrollArea,exports.DraggingHandle=DraggingHandle,exports.DraggingIconContainer=DraggingIconContainer,exports.Fading=Fading,exports.FancyBackground=FancyBackground,exports.Footer=Footer,exports.Img=Img,exports.LayoutSpacer=LayoutSpacer,exports.Media=Media,exports.ProgressPosition=ProgressPosition,exports.Root=Root,exports.StickyHeader=StickyHeader;
+'use strict';var styled=require('styled-components');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveLayout=require('../../mixins/responsive-layout.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var maskRectangle=require('./images/mask-rectangle.svg.js');var maskSlope=require('./images/mask-slope.svg.js');var Spacer=require('../Spacer/Spacer.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const filterLayoutProps=o=>!['layout','layoutXXS','layoutXS','layoutS','layoutM','layoutL','layoutXL','layouts'].includes(o);const shouldForwardDialogComponentProp=style.createShouldForwardProp(o=>!['dragging','fancy','zIndex'].includes(o),filterLayoutProps);const filterCommonProps=style.createShouldForwardProp();const Fading=styled__default.default.div.withConfig({shouldForwardProp:o=>!['visible','after'].includes(o)}).withConfig({displayName:"DialogComponent__Fading",componentId:"ui__sc-1dlvioj-0"})(["box-sizing:border-box;position:relative;flex-shrink:0;width:100%;z-index:1;&::before,&::after{transition-property:opacity;transition-duration:150ms;transition-timing-function:ease-in;pointer-events:none;}",""],o=>o.after?`\n          &::after {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            bottom: 100%;\n            right: 4px; \n            left: 4px;\n            margin-bottom: -1px;\n            background-image: linear-gradient(0deg, currentcolor, transparent);\n            opacity: ${o.visible?1:0};\n          }\n            `:`\n          &::before {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            top: 100%;\n            right: 4px;\n            left: 4px;\n            margin-top: -1px;\n            background-image: linear-gradient(180deg, currentcolor, transparent);\n            opacity: ${o.visible?1:0};\n          }\n      `);const FancyBackground=styled__default.default.div.withConfig({displayName:"DialogComponent__FancyBackground",componentId:"ui__sc-1dlvioj-1"})(["box-sizing:border-box;position:absolute;top:0;right:0;bottom:0;left:0;mask-image:url(","),url(",");mask-repeat:no-repeat,no-repeat;mask-size:100% 32px,cover;mask-position:0 56px,0 87px;border-radius:inherit;"],maskSlope.default,maskRectangle.default);const template_default=o=>`\n    color: ${o.color};\n    background-color: ${o.backgroundColor};\n    box-shadow: 0 6px 20px 1px ${o.shadowColor};\n    ${Fading} {\n      color: ${o.backgroundColor};\n    }\n  `,template_fancy=o=>`\n    color: ${o.color};\n    ${FancyBackground} {\n      background-color: ${o.backgroundColor};\n    }\n    ${Fading} {\n      color: ${o.backgroundColor};\n    }\n  `;const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardDialogComponentProp}).withConfig({displayName:"DialogComponent__Root",componentId:"ui__sc-1dlvioj-2"})(["box-sizing:border-box;display:flex;position:relative;isolation:isolate;"," "," "," "," ",""],o=>(o.fancy?template_fancy:template_default)({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}),o=>o.dragging&&`\n      box-shadow: 0 0 0 2px ${o.theme.colors['border-focus-inner']}, 0 0 0 4px ${o.theme.colors['border-focus']};\n      `,o=>typeof o.zIndex=='number'&&`z-index: ${o.zIndex};`,responsiveSize.responsiveSize,responsiveLayout.responsiveLayout);const Body=styled__default.default.div.withConfig({displayName:"DialogComponent__Body",componentId:"ui__sc-1dlvioj-3"})(["box-sizing:border-box;position:relative;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;"]);const StickyHeader=styled__default.default.div.withConfig({shouldForwardProp:filterCommonProps}).withConfig({displayName:"DialogComponent__StickyHeader",componentId:"ui__sc-1dlvioj-4"})(["",""],responsiveSize.responsiveSize);const Container=styled__default.default.div.withConfig({shouldForwardProp:filterCommonProps}).withConfig({displayName:"DialogComponent__Container",componentId:"ui__sc-1dlvioj-5"})(["box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;",""],responsiveSize.responsiveSize);const ContentScrollArea=styled__default.default.div.withConfig({shouldForwardProp:o=>!['scrollable'].includes(o)}).withConfig({displayName:"DialogComponent__ContentScrollArea",componentId:"ui__sc-1dlvioj-6"})(["box-sizing:border-box;flex-grow:1;margin:0 4px;overflow:auto;"," ",""],o=>`\n    overscroll-behavior: ${o.scrollable?'contain':'auto'};\n  `,focus.focus);const Content=styled__default.default.div.withConfig({shouldForwardProp:filterCommonProps}).withConfig({displayName:"DialogComponent__Content",componentId:"ui__sc-1dlvioj-7"})(["box-sizing:border-box;",""],responsiveSize.responsiveSize);const Footer=styled__default.default.div.withConfig({shouldForwardProp:filterCommonProps}).withConfig({displayName:"DialogComponent__Footer",componentId:"ui__sc-1dlvioj-8"})(["box-sizing:border-box;flex-shrink:0;",""],responsiveSize.responsiveSize);const DraggingHandle=styled__default.default.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__DraggingHandle",componentId:"ui__sc-1dlvioj-9"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;display:flex;justify-content:center;padding-top:10px;padding-bottom:10px;cursor:grab;touch-action:none;z-index:2;",""],responsiveLayout.responsiveLayout);const DraggingIconContainer=styled__default.default.div.withConfig({displayName:"DialogComponent__DraggingIconContainer",componentId:"ui__sc-1dlvioj-10"})(["box-sizing:border-box;display:flex;padding:3px 12px;border-radius:12px;& > *{height:0.25em;}"," ",""],o=>`\n      background-color: ${o.theme.colors['bg-onmain-tertiary']};\n    `,focus.focus);const Media=styled__default.default.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__Media",componentId:"ui__sc-1dlvioj-11"})(["box-sizing:border-box;overflow:hidden;flex-shrink:0;",""],responsiveLayout.responsiveLayout);const Img=styled__default.default.div.withConfig({shouldForwardProp:o=>o!=='src'}).withConfig({displayName:"DialogComponent__Img",componentId:"ui__sc-1dlvioj-12"})(["box-sizing:border-box;",""],o=>o.src&&`\n      background-image: url(${o.src});\n      background-repeat: no-repeat;\n      background-position: 50%;\n      background-size: cover;\n    `);const LayoutSpacer=styled__default.default(Spacer.Spacer).withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__LayoutSpacer",componentId:"ui__sc-1dlvioj-13"})(["",""],responsiveLayout.responsiveLayout);const ButtonPosition=styled__default.default.div.withConfig({displayName:"DialogComponent__ButtonPosition",componentId:"ui__sc-1dlvioj-14"})(["box-sizing:border-box;position:absolute;top:0;right:0;z-index:3;"]);const ProgressPosition=styled__default.default.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__ProgressPosition",componentId:"ui__sc-1dlvioj-15"})(["box-sizing:border-box;position:absolute;z-index:2;",""],responsiveLayout.responsiveLayout);exports.Body=Body,exports.ButtonPosition=ButtonPosition,exports.Container=Container,exports.Content=Content,exports.ContentScrollArea=ContentScrollArea,exports.DraggingHandle=DraggingHandle,exports.DraggingIconContainer=DraggingIconContainer,exports.Fading=Fading,exports.FancyBackground=FancyBackground,exports.Footer=Footer,exports.Img=Img,exports.LayoutSpacer=LayoutSpacer,exports.Media=Media,exports.ProgressPosition=ProgressPosition,exports.Root=Root,exports.StickyHeader=StickyHeader;
 //# sourceMappingURL=style.js.map

package/components/DialogComponent/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/DialogComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveLayout } from 'mixins/responsive-layout'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { Spacer } from 'components/Spacer'\nimport type {\n  ResponsiveSizeProps,\n  ResponsiveSizeInterpolationProps,\n  ResponsiveLayoutInterpolationProps,\n} from 'shared/interfaces'\nimport maskRectangle from './images/mask-rectangle.svg'\nimport maskSlope from './images/mask-slope.svg'\nimport type {\n  StyledDialogComponentProps,\n  DialogComponentPalette,\n  StyledDialogContentProps,\n  Size,\n  Layout,\n} from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n  !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardDialogComponentProp = createShouldForwardProp(\n  (propKey) => !['dragging', 'fancy', 'zIndex'].includes(propKey),\n  filterLayoutProps\n)\n\nconst filterCommonProps = createShouldForwardProp()\n\nexport const Fading = styled.div.withConfig<{\n  visible: boolean\n  after?: boolean\n}>({\n  shouldForwardProp: (propKey) => !['visible', 'after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n  z-index: 1;\n\n  &::before,\n  &::after {\n    transition-property: opacity;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n    pointer-events: none;\n  }\n\n  ${(props) =>\n    props.after\n      ? `\n          &::after {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            bottom: 100%;\n            right: 4px; \n            left: 4px;\n            margin-bottom: -1px;\n            background-image: linear-gradient(0deg, currentcolor, transparent);\n            opacity: ${props.visible ? 1 : 0};\n          }\n            `\n      : `\n          &::before {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            top: 100%;\n            right: 4px;\n            left: 4px;\n            margin-top: -1px;\n            background-image: linear-gradient(180deg, currentcolor, transparent);\n            opacity: ${props.visible ? 1 : 0};\n          }\n      `}\n`\n\nexport const FancyBackground = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  mask-image: url(${maskSlope}), url(${maskRectangle});\n  mask-repeat: no-repeat, no-repeat;\n  mask-size:\n    100% 32px,\n    cover;\n  mask-position:\n    0 56px,\n    0 87px;\n  border-radius: inherit;\n`\n\nconst template = {\n  default: (palette: DialogComponentPalette) => `\n    color: ${palette.color};\n    background-color: ${palette.backgroundColor};\n    box-shadow: 0 6px 20px 1px ${palette.shadowColor};\n    ${Fading} {\n      color: ${palette.backgroundColor};\n    }\n  `,\n  fancy: (palette: DialogComponentPalette) => `\n    color: ${palette.color};\n    ${FancyBackground} {\n      background-color: ${palette.backgroundColor};\n    }\n    ${Fading} {\n      color: ${palette.backgroundColor};\n    }\n  `,\n}\n\nexport const Root = styled.div.withConfig<StyledDialogComponentProps>({\n  shouldForwardProp: shouldForwardDialogComponentProp,\n})`\n  box-sizing: border-box;\n  display: flex;\n  position: relative;\n  isolation: isolate;\n\n  ${(props) =>\n    (props.fancy ? template.fancy : template.default)({\n      color: props.theme.colors['content-onmain-primary'],\n      backgroundColor: props.theme.colors['bg-onmain-primary'],\n      shadowColor: props.theme.colors['bg-oncolor-hover'],\n      ...props.palette,\n    })}\n\n  ${(props) =>\n    props.dragging &&\n    `\n      box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n      `}\n  \n  ${(props) => typeof props.zIndex === 'number' && `z-index: ${props.zIndex};`}\n\n  ${responsiveSize}\n  ${responsiveLayout}\n`\n\nexport const Body = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  flex-grow: 1;\n`\n\nexport const StickyHeader = styled.div.withConfig<\n  ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>\n>({\n  shouldForwardProp: filterCommonProps,\n})`\n  ${responsiveSize}\n`\n\nexport const Container = styled.div.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>(\n  {\n    shouldForwardProp: filterCommonProps,\n  }\n)`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  flex-grow: 1;\n\n  ${responsiveSize}\n`\n\nexport const ContentScrollArea = styled.div.withConfig<{ scrollable: boolean }>({\n  shouldForwardProp: (propKey: string) => !['scrollable'].includes(propKey),\n})`\n  box-sizing: border-box;\n  flex-grow: 1;\n  margin: 0 4px;\n  overflow: auto;\n\n  ${(props) => `\n    overscroll-behavior: ${props.scrollable ? 'contain' : 'auto'};\n  `}\n\n  ${focus}\n`\n\nexport const Content = styled.div.withConfig<StyledDialogContentProps>({\n  shouldForwardProp: filterCommonProps,\n})`\n  box-sizing: border-box;\n\n  ${responsiveSize}\n`\n\nexport const Footer = styled.div.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n  shouldForwardProp: filterCommonProps,\n})`\n  box-sizing: border-box;\n  flex-shrink: 0;\n\n  ${responsiveSize}\n`\n\nexport const DraggingHandle = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding-top: 10px;\n  padding-bottom: 10px;\n  cursor: grab;\n  touch-action: none;\n  z-index: 2;\n\n  ${responsiveLayout}\n`\n\nexport const DraggingIconContainer = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  padding: 3px 12px;\n  border-radius: 12px;\n\n  & > * {\n    height: 0.25em;\n  }\n\n  ${(props) => `\n      background-color: ${props.theme.colors['bg-onmain-tertiary']};\n    `}\n\n  ${focus}\n`\n\nexport const Media = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  overflow: hidden;\n  flex-shrink: 0;\n\n  ${responsiveLayout}\n`\n\nexport const Img = styled.div.withConfig<{ src?: string }>({\n  shouldForwardProp: (propKey) => propKey !== 'src',\n})`\n  box-sizing: border-box;\n\n  ${(props) =>\n    props.src &&\n    `\n      background-image: url(${props.src});\n      background-repeat: no-repeat;\n      background-position: 50%;\n      background-size: cover;\n    `}\n`\n\nexport const LayoutSpacer = styled(Spacer).withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  ${responsiveLayout}\n`\n\nexport const ButtonPosition = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 3;\n`\n\nexport const ProgressPosition = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  position: absolute;\n  z-index: 2;\n\n  ${responsiveLayout}\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardDialogComponentProp","createShouldForwardProp","filterCommonProps","Fading","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","after","visible","FancyBackground","maskSlope","maskRectangle","template","palette","color","backgroundColor","shadowColor","Root","fancy","theme","colors","dragging","white","zIndex","responsiveSize","responsiveLayout","Body","StickyHeader","Container","ContentScrollArea","scrollable","focus","Content","Footer","DraggingHandle","DraggingIconContainer","Media","Img","src","LayoutSpacer","Spacer","ButtonPosition","ProgressPosition"],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/DialogComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveLayout } from 'mixins/responsive-layout'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { Spacer } from 'components/Spacer'\nimport type {\n  ResponsiveSizeProps,\n  ResponsiveSizeInterpolationProps,\n  ResponsiveLayoutInterpolationProps,\n} from 'shared/interfaces'\nimport maskRectangle from './images/mask-rectangle.svg'\nimport maskSlope from './images/mask-slope.svg'\nimport type {\n  StyledDialogComponentProps,\n  DialogComponentPalette,\n  StyledDialogContentProps,\n  Size,\n  Layout,\n} from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n  !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardDialogComponentProp = createShouldForwardProp(\n  (propKey) => !['dragging', 'fancy', 'zIndex'].includes(propKey),\n  filterLayoutProps\n)\n\nconst filterCommonProps = createShouldForwardProp()\n\nexport const Fading = styled.div.withConfig<{\n  visible: boolean\n  after?: boolean\n}>({\n  shouldForwardProp: (propKey) => !['visible', 'after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n  z-index: 1;\n\n  &::before,\n  &::after {\n    transition-property: opacity;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n    pointer-events: none;\n  }\n\n  ${(props) =>\n    props.after\n      ? `\n          &::after {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            bottom: 100%;\n            right: 4px; \n            left: 4px;\n            margin-bottom: -1px;\n            background-image: linear-gradient(0deg, currentcolor, transparent);\n            opacity: ${props.visible ? 1 : 0};\n          }\n            `\n      : `\n          &::before {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            top: 100%;\n            right: 4px;\n            left: 4px;\n            margin-top: -1px;\n            background-image: linear-gradient(180deg, currentcolor, transparent);\n            opacity: ${props.visible ? 1 : 0};\n          }\n      `}\n`\n\nexport const FancyBackground = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  mask-image: url(${maskSlope}), url(${maskRectangle});\n  mask-repeat: no-repeat, no-repeat;\n  mask-size:\n    100% 32px,\n    cover;\n  mask-position:\n    0 56px,\n    0 87px;\n  border-radius: inherit;\n`\n\nconst template = {\n  default: (palette: DialogComponentPalette) => `\n    color: ${palette.color};\n    background-color: ${palette.backgroundColor};\n    box-shadow: 0 6px 20px 1px ${palette.shadowColor};\n    ${Fading} {\n      color: ${palette.backgroundColor};\n    }\n  `,\n  fancy: (palette: DialogComponentPalette) => `\n    color: ${palette.color};\n    ${FancyBackground} {\n      background-color: ${palette.backgroundColor};\n    }\n    ${Fading} {\n      color: ${palette.backgroundColor};\n    }\n  `,\n}\n\nexport const Root = styled.div.withConfig<StyledDialogComponentProps>({\n  shouldForwardProp: shouldForwardDialogComponentProp,\n})`\n  box-sizing: border-box;\n  display: flex;\n  position: relative;\n  isolation: isolate;\n\n  ${(props) =>\n    (props.fancy ? template.fancy : template.default)({\n      color: props.theme.colors['content-onmain-primary'],\n      backgroundColor: props.theme.colors['bg-onmain-primary'],\n      shadowColor: props.theme.colors['bg-oncolor-hover'],\n      ...props.palette,\n    })}\n\n  ${(props) =>\n    props.dragging &&\n    `\n      box-shadow: 0 0 0 2px ${props.theme.colors['border-focus-inner']}, 0 0 0 4px ${props.theme.colors['border-focus']};\n      `}\n  \n  ${(props) => typeof props.zIndex === 'number' && `z-index: ${props.zIndex};`}\n\n  ${responsiveSize}\n  ${responsiveLayout}\n`\n\nexport const Body = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  flex-grow: 1;\n`\n\nexport const StickyHeader = styled.div.withConfig<\n  ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>\n>({\n  shouldForwardProp: filterCommonProps,\n})`\n  ${responsiveSize}\n`\n\nexport const Container = styled.div.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>(\n  {\n    shouldForwardProp: filterCommonProps,\n  }\n)`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  flex-grow: 1;\n\n  ${responsiveSize}\n`\n\nexport const ContentScrollArea = styled.div.withConfig<{ scrollable: boolean }>({\n  shouldForwardProp: (propKey: string) => !['scrollable'].includes(propKey),\n})`\n  box-sizing: border-box;\n  flex-grow: 1;\n  margin: 0 4px;\n  overflow: auto;\n\n  ${(props) => `\n    overscroll-behavior: ${props.scrollable ? 'contain' : 'auto'};\n  `}\n\n  ${focus}\n`\n\nexport const Content = styled.div.withConfig<StyledDialogContentProps>({\n  shouldForwardProp: filterCommonProps,\n})`\n  box-sizing: border-box;\n\n  ${responsiveSize}\n`\n\nexport const Footer = styled.div.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n  shouldForwardProp: filterCommonProps,\n})`\n  box-sizing: border-box;\n  flex-shrink: 0;\n\n  ${responsiveSize}\n`\n\nexport const DraggingHandle = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding-top: 10px;\n  padding-bottom: 10px;\n  cursor: grab;\n  touch-action: none;\n  z-index: 2;\n\n  ${responsiveLayout}\n`\n\nexport const DraggingIconContainer = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  padding: 3px 12px;\n  border-radius: 12px;\n\n  & > * {\n    height: 0.25em;\n  }\n\n  ${(props) => `\n      background-color: ${props.theme.colors['bg-onmain-tertiary']};\n    `}\n\n  ${focus}\n`\n\nexport const Media = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  overflow: hidden;\n  flex-shrink: 0;\n\n  ${responsiveLayout}\n`\n\nexport const Img = styled.div.withConfig<{ src?: string }>({\n  shouldForwardProp: (propKey) => propKey !== 'src',\n})`\n  box-sizing: border-box;\n\n  ${(props) =>\n    props.src &&\n    `\n      background-image: url(${props.src});\n      background-repeat: no-repeat;\n      background-position: 50%;\n      background-size: cover;\n    `}\n`\n\nexport const LayoutSpacer = styled(Spacer).withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  ${responsiveLayout}\n`\n\nexport const ButtonPosition = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 3;\n`\n\nexport const ProgressPosition = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  position: absolute;\n  z-index: 2;\n\n  ${responsiveLayout}\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardDialogComponentProp","createShouldForwardProp","filterCommonProps","Fading","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","after","visible","FancyBackground","maskSlope","maskRectangle","template","palette","color","backgroundColor","shadowColor","Root","fancy","theme","colors","dragging","zIndex","responsiveSize","responsiveLayout","Body","StickyHeader","Container","ContentScrollArea","scrollable","focus","Content","Footer","DraggingHandle","DraggingIconContainer","Media","Img","src","LayoutSpacer","Spacer","ButtonPosition","ProgressPosition"],"mappings":"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"}