npm - @foxford/ui - Versions diffs - 2.59.0-beta-92b12b1-20250115 → 2.61.0-beta-5e98b7f-20250131 - Mend

@foxford/ui 2.59.0-beta-92b12b1-20250115 → 2.61.0-beta-5e98b7f-20250131

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (318) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"style.js","sources":["../../../../src/components/Arrow/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 { StyledArrowProps, ArrowPalette } from './types'\n\nconst shouldForwardArrowProp = createShouldForwardProp((propKey) => {\n return !['square', 'top', 'right', 'bottom', 'left', 'onColored', 'outline', 'inverse'].includes(propKey)\n})\n\nconst template = (palette: ArrowPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &::before {\n box-shadow: inset 0px 4px 0px ${palette.shadowColor};\n }\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:active {\n color: ${palette.colorActive};\n background-color: ${palette.backgroundColorActive};\n border-color: ${palette.borderColorActive};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n`\n\nconst defaultDisabledStyles = `\n -webkit-filter: grayscale(100%);\n -moz-filter: grayscale(100%);\n -ms-filter: grayscale(100%);\n -o-filter: grayscale(100%);\n filter: grayscale(100%);\n`\n\nconst COLOR_SCHEMA = {\n contrast: {\n outline: css<StyledArrowProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n borderColor: props.theme.colors['border-oncolor-default'],\n colorHover: props.theme.colors['content-oncolor-constant'],\n backgroundColorHover: props.theme.colors['bg-oncolor-primary'],\n borderColorHover: props.theme.colors.transparent,\n colorActive: props.theme.colors['content-oncolor-constant'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncolor-primary']).darken(6).toString() as CSSColor,\n borderColorActive: props.theme.colors.transparent,\n colorDisabled: 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['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledArrowProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-constant'],\n backgroundColor: props.theme.colors['bg-oncolor-primary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-constant'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-oncolor-primary']).darken(6).toString() as CSSColor,\n borderColorHover: props.theme.colors.transparent,\n colorActive: props.theme.colors['content-oncolor-constant'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncolor-primary']).darken(8).toString() as CSSColor,\n borderColorActive: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-primary'],\n borderColorDisabled: props.theme.colors.transparent,\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n default: {\n outline: css<StyledArrowProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors.transparent,\n borderColor: props.theme.colors['border-onmain-contrast'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-tertiary'],\n borderColorHover: props.theme.colors.transparent,\n colorActive: props.theme.colors['content-oncolor-primary'],\n backgroundColorActive: props.theme.colors['bg-brand-primary-basic-active'],\n borderColorActive: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n borderColorDisabled: props.theme.colors['border-disabled'],\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledArrowProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(4).toString() as CSSColor,\n borderColorHover: props.theme.colors.transparent,\n colorActive: props.theme.colors['content-oncolor-primary'],\n backgroundColorActive: props.theme.colors['bg-brand-primary-basic-active'],\n borderColorActive: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors.transparent,\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n}\n\nconst DEFAULT_STYLES = {\n filled: css<StyledArrowProps>`\n ${({ theme, disabled }) => `\n background-color: ${theme.colors.white};\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n & svg {\n fill: ${theme.colors.accent};\n }\n &:hover {\n background-color: ${theme.colors.accent};\n box-shadow: none;\n svg {\n fill: ${theme.colors.white};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n outline: css<StyledArrowProps>`\n ${({ theme, disabled }) => `\n background-color: transparent;\n box-shadow: inset 0 0 0 2px ${theme.colors.alto};\n & svg {\n fill: ${theme.colors.alto};\n }\n &:hover {\n background-color: ${theme.colors.accent};\n box-shadow: none;\n svg {\n fill: ${theme.colors.white};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n inverse: css<StyledArrowProps>`\n ${({ theme, disabled }) => `\n background-color: transparent;\n box-shadow: inset 0 0 0 2px ${theme.colors.white};\n & svg {\n fill: ${theme.colors.white};\n }\n &:hover {\n background-color: ${theme.colors.white};\n box-shadow: none;\n svg {\n fill: ${theme.colors.accent};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 #eaecf3;\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n}\n\nexport const Root = styled.button\n .withConfig<StyledArrowProps>({\n shouldForwardProp: shouldForwardArrowProp,\n })\n .attrs<StyledArrowProps>(<Required<Pick<StyledArrowProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => {\n return {\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n width: '1.8em',\n height: '1.8em',\n }\n },\n })`\n ${(props) => {\n let transform = 'rotate(0deg)'\n\n if (props.right) transform = 'rotate(90deg)'\n if (props.bottom) transform = 'rotate(180deg)'\n if (props.left) transform = 'rotate(270deg)'\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n border-radius: ${props.square ? '8px' : '50%'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n & svg {\n transform: ${transform};\n transform-origin: center;\n }\n ${\n props.preset === 'brand'\n ? `\n border: 1px solid transparent;\n transition-property: background-color; \n transition-duration: 250ms;\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 &:active:not(:disabled)::before {\n opacity: 1;\n }`\n : `\n border: none;\n transition-property: background-color, box-shadow;\n transition-duration: 200ms;`\n }\n `\n }}\n\n ${(props) => {\n if (props.preset === 'brand') {\n const schema = props.contrast \|\| props.onColored ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n return props.outline ? schema.outline : schema.default\n }\n\n const defaultStyles = DEFAULT_STYLES\n\n if (props.inverse) return defaultStyles.inverse\n if (props.outline) return defaultStyles.outline\n\n return defaultStyles.filled\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardArrowProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","shadowColor","colorHover","backgroundColorHover","borderColorHover","colorActive","backgroundColorActive","borderColorActive","colorDisabled","backgroundColorDisabled","borderColorDisabled","defaultDisabledStyles","COLOR_SCHEMA","contrast","outline","css","props","theme","colors","transparent","tinycolor","default","darken","toString","DEFAULT_STYLES","filled","disabled","white","accent","alto","inverse","Root","styled","button","withConfig","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","width","height","displayName","componentId","transform","right","bottom","left","square","preset","schema","onColored","focus","responsiveSize","responsiveMargin"],"mappings":"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"}
1	+ {"version":3,"file":"style.js","sources":["../../../../src/components/Arrow/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 { StyledArrowProps, ArrowPalette } from './types'\n\nconst shouldForwardArrowProp = createShouldForwardProp((propKey) => {\n return !['square', 'top', 'right', 'bottom', 'left', 'onColored', 'outline', 'inverse'].includes(propKey)\n})\n\nconst template = (palette: ArrowPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &::before {\n box-shadow: inset 0px 4px 0px ${palette.shadowColor};\n }\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:active {\n color: ${palette.colorActive};\n background-color: ${palette.backgroundColorActive};\n border-color: ${palette.borderColorActive};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n`\n\nconst defaultDisabledStyles = `\n -webkit-filter: grayscale(100%);\n -moz-filter: grayscale(100%);\n -ms-filter: grayscale(100%);\n -o-filter: grayscale(100%);\n filter: grayscale(100%);\n`\n\nconst COLOR_SCHEMA = {\n contrast: {\n outline: css<StyledArrowProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n borderColor: props.theme.colors['border-oncolor-default'],\n colorHover: props.theme.colors['content-oncolor-constant'],\n backgroundColorHover: props.theme.colors['bg-oncolor-primary'],\n borderColorHover: props.theme.colors.transparent,\n colorActive: props.theme.colors['content-oncolor-constant'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncolor-primary']).darken(6).toString() as CSSColor,\n borderColorActive: props.theme.colors.transparent,\n colorDisabled: 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['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledArrowProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-constant'],\n backgroundColor: props.theme.colors['bg-oncolor-primary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-constant'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-oncolor-primary']).darken(6).toString() as CSSColor,\n borderColorHover: props.theme.colors.transparent,\n colorActive: props.theme.colors['content-oncolor-constant'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncolor-primary']).darken(8).toString() as CSSColor,\n borderColorActive: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-primary'],\n borderColorDisabled: props.theme.colors.transparent,\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n default: {\n outline: css<StyledArrowProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors.transparent,\n borderColor: props.theme.colors['border-onmain-contrast'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-tertiary'],\n borderColorHover: props.theme.colors.transparent,\n colorActive: props.theme.colors['content-oncolor-primary'],\n backgroundColorActive: props.theme.colors['bg-brand-primary-basic-active'],\n borderColorActive: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n borderColorDisabled: props.theme.colors['border-disabled'],\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledArrowProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(4).toString() as CSSColor,\n borderColorHover: props.theme.colors.transparent,\n colorActive: props.theme.colors['content-oncolor-primary'],\n backgroundColorActive: props.theme.colors['bg-brand-primary-basic-active'],\n borderColorActive: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors.transparent,\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n}\n\nconst DEFAULT_STYLES = {\n filled: css<StyledArrowProps>`\n ${({ theme, disabled }) => `\n background-color: ${theme.colors.white};\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n & svg {\n fill: ${theme.colors.accent};\n }\n &:hover {\n background-color: ${theme.colors.accent};\n box-shadow: none;\n svg {\n fill: ${theme.colors.white};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n outline: css<StyledArrowProps>`\n ${({ theme, disabled }) => `\n background-color: transparent;\n box-shadow: inset 0 0 0 2px ${theme.colors.alto};\n & svg {\n fill: ${theme.colors.alto};\n }\n &:hover {\n background-color: ${theme.colors.accent};\n box-shadow: none;\n svg {\n fill: ${theme.colors.white};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n inverse: css<StyledArrowProps>`\n ${({ theme, disabled }) => `\n background-color: transparent;\n box-shadow: inset 0 0 0 2px ${theme.colors.white};\n & svg {\n fill: ${theme.colors.white};\n }\n &:hover {\n background-color: ${theme.colors.white};\n box-shadow: none;\n svg {\n fill: ${theme.colors.accent};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 #eaecf3;\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n}\n\nexport const Root = styled.button\n .withConfig<StyledArrowProps>({\n shouldForwardProp: shouldForwardArrowProp,\n })\n .attrs<StyledArrowProps>(<Required<Pick<StyledArrowProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => {\n return {\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n width: '1.8em',\n height: '1.8em',\n }\n },\n })`\n ${(props) => {\n let transform = 'rotate(0deg)'\n\n if (props.right) transform = 'rotate(90deg)'\n if (props.bottom) transform = 'rotate(180deg)'\n if (props.left) transform = 'rotate(270deg)'\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n border-radius: ${props.square ? '8px' : '50%'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n & svg {\n transform: ${transform};\n transform-origin: center;\n }\n ${\n props.preset === 'brand'\n ? `\n border: 1px solid transparent;\n transition-property: background-color; \n transition-duration: 250ms;\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 &:active:not(:disabled)::before {\n opacity: 1;\n }`\n : `\n border: none;\n transition-property: background-color, box-shadow;\n transition-duration: 200ms;`\n }\n `\n }}\n\n ${(props) => {\n if (props.preset === 'brand') {\n const schema = props.contrast \|\| props.onColored ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n return props.outline ? schema.outline : schema.default\n }\n\n const defaultStyles = DEFAULT_STYLES\n\n if (props.inverse) return defaultStyles.inverse\n if (props.outline) return defaultStyles.outline\n\n return defaultStyles.filled\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardArrowProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","shadowColor","colorHover","backgroundColorHover","borderColorHover","colorActive","backgroundColorActive","borderColorActive","colorDisabled","backgroundColorDisabled","borderColorDisabled","defaultDisabledStyles","COLOR_SCHEMA","contrast","outline","css","props","theme","colors","transparent","tinycolor","default","darken","toString","DEFAULT_STYLES","filled","disabled","white","accent","alto","inverse","Root","styled","button","withConfig","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","width","height","displayName","componentId","transform","right","bottom","left","square","preset","schema","onColored","focus","responsiveSize","responsiveMargin"],"mappings":"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"}

package/components/Arrow/style.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import styled,{css}from'styled-components';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';import{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';const shouldForwardArrowProp=createShouldForwardProp((o=>!['square','top','right','bottom','left','onColored','outline','inverse'].includes(o)));const template=o=>`\n  color: ${o.color};\n  background-color: ${o.backgroundColor};\n  border-color: ${o.borderColor};\n  &::before {\n    box-shadow: inset 0px 4px 0px ${o.shadowColor};\n  }\n  &:hover {\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n    border-color: ${o.borderColorHover};\n  }\n  &:active {\n    color: ${o.colorActive};\n    background-color: ${o.backgroundColorActive};\n    border-color: ${o.borderColorActive};\n  }\n  &:disabled {\n    color: ${o.colorDisabled};\n    background-color: ${o.backgroundColorDisabled};\n    border-color: ${o.borderColorDisabled};\n  }\n`;const defaultDisabledStyles="\n  -webkit-filter: grayscale(100%);\n  -moz-filter: grayscale(100%);\n  -ms-filter: grayscale(100%);\n  -o-filter: grayscale(100%);\n  filter: grayscale(100%);\n";const COLOR_SCHEMA={contrast:{outline:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors['border-oncolor-default'],colorHover:o.theme.colors['content-oncolor-constant'],backgroundColorHover:o.theme.colors['bg-oncolor-primary'],borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-constant'],backgroundColorActive:tinycolor(o.theme.colors['bg-oncolor-primary']).darken(6).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors['border-oncolor-disabled'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-constant'],backgroundColor:o.theme.colors['bg-oncolor-primary'],borderColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-constant'],backgroundColorHover:tinycolor(o.theme.colors['bg-oncolor-primary']).darken(6).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-constant'],backgroundColorActive:tinycolor(o.theme.colors['bg-oncolor-primary']).darken(8).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-primary'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},default:{outline:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors['border-onmain-contrast'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['bg-onmain-tertiary'],borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:o.theme.colors['bg-brand-primary-basic-active'],borderColorActive:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors['border-disabled'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-tertiary'],borderColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(4).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:o.theme.colors['bg-brand-primary-basic-active'],borderColorActive:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))}};const DEFAULT_STYLES={filled:css(["",""],(({theme:o,disabled:r})=>`\n      background-color: ${o.colors.white};\n      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n      & svg {\n        fill: ${o.colors.accent};\n      }\n      &:hover {\n        background-color: ${o.colors.accent};\n        box-shadow: none;\n        svg {\n          fill: ${o.colors.white};\n        }\n      }\n      &:active {\n        box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n      }\n      ${r?defaultDisabledStyles:''}\n    `)),outline:css(["",""],(({theme:o,disabled:r})=>`\n      background-color: transparent;\n      box-shadow: inset 0 0 0 2px ${o.colors.alto};\n      & svg {\n        fill: ${o.colors.alto};\n      }\n      &:hover {\n        background-color: ${o.colors.accent};\n        box-shadow: none;\n        svg {\n          fill: ${o.colors.white};\n        }\n      }\n      &:active {\n        box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n      }\n      ${r?defaultDisabledStyles:''}\n    `)),inverse:css(["",""],(({theme:o,disabled:r})=>`\n      background-color: transparent;\n      box-shadow: inset 0 0 0 2px ${o.colors.white};\n      & svg {\n        fill: ${o.colors.white};\n      }\n      &:hover {\n        background-color: ${o.colors.white};\n        box-shadow: none;\n        svg {\n          fill: ${o.colors.accent};\n        }\n      }\n      &:active {\n        box-shadow: inset 0 4px 0 #eaecf3;\n      }\n      ${r?defaultDisabledStyles:''}\n    `))};const Root=styled.button.withConfig({shouldForwardProp:shouldForwardArrowProp}).attrs({dynamicSizeDeclaration:(o,r)=>({fontSize:typeof o=='string'?o:`${o}${r}`,width:'1.8em',height:'1.8em'})}).withConfig({displayName:"Arrow__Root",componentId:"ui__sc-1xgj0m4-0"})([""," "," "," "," ",""],(o=>{let r='rotate(0deg)';return o.right&&(r='rotate(90deg)'),o.bottom&&(r='rotate(180deg)'),o.left&&(r='rotate(270deg)'),`\n      box-sizing: border-box;\n      position: relative;\n      isolation: isolate;\n      appearance: none;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      padding: 0;\n      border-radius: ${o.square?'8px':'50%'};\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      & svg {\n        transform: ${r};\n        transform-origin: center;\n      }\n      ${o.preset==='brand'?"\n            border: 1px solid transparent;\n            transition-property: background-color; \n            transition-duration: 250ms;\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            &:active:not(:disabled)::before {\n              opacity: 1;\n            }":"\n            border: none;\n            transition-property: background-color, box-shadow;\n            transition-duration: 200ms;"}\n    `}),(o=>{if(o.preset==='brand'){const r=o.contrast||o.onColored?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;return o.outline?r.outline:r.default}return o.inverse?DEFAULT_STYLES.inverse:o.outline?DEFAULT_STYLES.outline:DEFAULT_STYLES.filled}),focus,responsiveSize,responsiveMargin);export{Root};
+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';const shouldForwardArrowProp=createShouldForwardProp((o=>!['square','top','right','bottom','left','onColored','outline','inverse'].includes(o)));const template=o=>`\n  color: ${o.color};\n  background-color: ${o.backgroundColor};\n  border-color: ${o.borderColor};\n  &::before {\n    box-shadow: inset 0px 4px 0px ${o.shadowColor};\n  }\n  &:hover {\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n    border-color: ${o.borderColorHover};\n  }\n  &:active {\n    color: ${o.colorActive};\n    background-color: ${o.backgroundColorActive};\n    border-color: ${o.borderColorActive};\n  }\n  &:disabled {\n    color: ${o.colorDisabled};\n    background-color: ${o.backgroundColorDisabled};\n    border-color: ${o.borderColorDisabled};\n  }\n`;const defaultDisabledStyles="\n  -webkit-filter: grayscale(100%);\n  -moz-filter: grayscale(100%);\n  -ms-filter: grayscale(100%);\n  -o-filter: grayscale(100%);\n  filter: grayscale(100%);\n";const COLOR_SCHEMA={contrast:{outline:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors['border-oncolor-default'],colorHover:o.theme.colors['content-oncolor-constant'],backgroundColorHover:o.theme.colors['bg-oncolor-primary'],borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-constant'],backgroundColorActive:tinycolor(o.theme.colors['bg-oncolor-primary']).darken(6).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors['border-oncolor-disabled'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-constant'],backgroundColor:o.theme.colors['bg-oncolor-primary'],borderColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-constant'],backgroundColorHover:tinycolor(o.theme.colors['bg-oncolor-primary']).darken(6).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-constant'],backgroundColorActive:tinycolor(o.theme.colors['bg-oncolor-primary']).darken(8).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-oncolor-primary'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},default:{outline:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors['border-onmain-contrast'],colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:o.theme.colors['bg-onmain-tertiary'],borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:o.theme.colors['bg-brand-primary-basic-active'],borderColorActive:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors['border-disabled'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-tertiary'],borderColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-onmain-primary'],backgroundColorHover:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(4).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:o.theme.colors['bg-brand-primary-basic-active'],borderColorActive:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))}};const DEFAULT_STYLES={filled:css(["",""],(({theme:o,disabled:r})=>`\n      background-color: ${o.colors.white};\n      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n      & svg {\n        fill: ${o.colors.accent};\n      }\n      &:hover {\n        background-color: ${o.colors.accent};\n        box-shadow: none;\n        svg {\n          fill: ${o.colors.white};\n        }\n      }\n      &:active {\n        box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n      }\n      ${r?defaultDisabledStyles:''}\n    `)),outline:css(["",""],(({theme:o,disabled:r})=>`\n      background-color: transparent;\n      box-shadow: inset 0 0 0 2px ${o.colors.alto};\n      & svg {\n        fill: ${o.colors.alto};\n      }\n      &:hover {\n        background-color: ${o.colors.accent};\n        box-shadow: none;\n        svg {\n          fill: ${o.colors.white};\n        }\n      }\n      &:active {\n        box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n      }\n      ${r?defaultDisabledStyles:''}\n    `)),inverse:css(["",""],(({theme:o,disabled:r})=>`\n      background-color: transparent;\n      box-shadow: inset 0 0 0 2px ${o.colors.white};\n      & svg {\n        fill: ${o.colors.white};\n      }\n      &:hover {\n        background-color: ${o.colors.white};\n        box-shadow: none;\n        svg {\n          fill: ${o.colors.accent};\n        }\n      }\n      &:active {\n        box-shadow: inset 0 4px 0 #eaecf3;\n      }\n      ${r?defaultDisabledStyles:''}\n    `))};const Root=styled.button.withConfig({shouldForwardProp:shouldForwardArrowProp}).attrs({dynamicSizeDeclaration:(o,r)=>({fontSize:typeof o=='string'?o:`${o}${r}`,width:'1.8em',height:'1.8em'})}).withConfig({displayName:"Arrow__Root",componentId:"ui__sc-1xgj0m4-0"})([""," "," "," "," ",""],(o=>{let r='rotate(0deg)';return o.right&&(r='rotate(90deg)'),o.bottom&&(r='rotate(180deg)'),o.left&&(r='rotate(270deg)'),`\n      box-sizing: border-box;\n      position: relative;\n      isolation: isolate;\n      appearance: none;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      padding: 0;\n      border-radius: ${o.square?'8px':'50%'};\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      & svg {\n        transform: ${r};\n        transform-origin: center;\n      }\n      ${o.preset==='brand'?"\n            border: 1px solid transparent;\n            transition-property: background-color; \n            transition-duration: 250ms;\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            &:active:not(:disabled)::before {\n              opacity: 1;\n            }":"\n            border: none;\n            transition-property: background-color, box-shadow;\n            transition-duration: 200ms;"}\n    `}),(o=>{if(o.preset==='brand'){const r=o.contrast||o.onColored?COLOR_SCHEMA.contrast:COLOR_SCHEMA.default;return o.outline?r.outline:r.default}return o.inverse?DEFAULT_STYLES.inverse:o.outline?DEFAULT_STYLES.outline:DEFAULT_STYLES.filled}),focus,responsiveSize,responsiveMargin);export{Root};
 //# sourceMappingURL=style.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"style.mjs","sources":["../../../../src/components/Arrow/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 { StyledArrowProps, ArrowPalette } from './types'\n\nconst shouldForwardArrowProp = createShouldForwardProp((propKey) => {\n return !['square', 'top', 'right', 'bottom', 'left', 'onColored', 'outline', 'inverse'].includes(propKey)\n})\n\nconst template = (palette: ArrowPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &::before {\n box-shadow: inset 0px 4px 0px ${palette.shadowColor};\n }\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:active {\n color: ${palette.colorActive};\n background-color: ${palette.backgroundColorActive};\n border-color: ${palette.borderColorActive};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n`\n\nconst defaultDisabledStyles = `\n -webkit-filter: grayscale(100%);\n -moz-filter: grayscale(100%);\n -ms-filter: grayscale(100%);\n -o-filter: grayscale(100%);\n filter: grayscale(100%);\n`\n\nconst COLOR_SCHEMA = {\n contrast: {\n outline: css<StyledArrowProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n borderColor: props.theme.colors['border-oncolor-default'],\n colorHover: props.theme.colors['content-oncolor-constant'],\n backgroundColorHover: props.theme.colors['bg-oncolor-primary'],\n borderColorHover: props.theme.colors.transparent,\n colorActive: props.theme.colors['content-oncolor-constant'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncolor-primary']).darken(6).toString() as CSSColor,\n borderColorActive: props.theme.colors.transparent,\n colorDisabled: 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['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledArrowProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-constant'],\n backgroundColor: props.theme.colors['bg-oncolor-primary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-constant'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-oncolor-primary']).darken(6).toString() as CSSColor,\n borderColorHover: props.theme.colors.transparent,\n colorActive: props.theme.colors['content-oncolor-constant'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncolor-primary']).darken(8).toString() as CSSColor,\n borderColorActive: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-primary'],\n borderColorDisabled: props.theme.colors.transparent,\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n default: {\n outline: css<StyledArrowProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors.transparent,\n borderColor: props.theme.colors['border-onmain-contrast'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-tertiary'],\n borderColorHover: props.theme.colors.transparent,\n colorActive: props.theme.colors['content-oncolor-primary'],\n backgroundColorActive: props.theme.colors['bg-brand-primary-basic-active'],\n borderColorActive: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n borderColorDisabled: props.theme.colors['border-disabled'],\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledArrowProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(4).toString() as CSSColor,\n borderColorHover: props.theme.colors.transparent,\n colorActive: props.theme.colors['content-oncolor-primary'],\n backgroundColorActive: props.theme.colors['bg-brand-primary-basic-active'],\n borderColorActive: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors.transparent,\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n}\n\nconst DEFAULT_STYLES = {\n filled: css<StyledArrowProps>`\n ${({ theme, disabled }) => `\n background-color: ${theme.colors.white};\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n & svg {\n fill: ${theme.colors.accent};\n }\n &:hover {\n background-color: ${theme.colors.accent};\n box-shadow: none;\n svg {\n fill: ${theme.colors.white};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n outline: css<StyledArrowProps>`\n ${({ theme, disabled }) => `\n background-color: transparent;\n box-shadow: inset 0 0 0 2px ${theme.colors.alto};\n & svg {\n fill: ${theme.colors.alto};\n }\n &:hover {\n background-color: ${theme.colors.accent};\n box-shadow: none;\n svg {\n fill: ${theme.colors.white};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n inverse: css<StyledArrowProps>`\n ${({ theme, disabled }) => `\n background-color: transparent;\n box-shadow: inset 0 0 0 2px ${theme.colors.white};\n & svg {\n fill: ${theme.colors.white};\n }\n &:hover {\n background-color: ${theme.colors.white};\n box-shadow: none;\n svg {\n fill: ${theme.colors.accent};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 #eaecf3;\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n}\n\nexport const Root = styled.button\n .withConfig<StyledArrowProps>({\n shouldForwardProp: shouldForwardArrowProp,\n })\n .attrs<StyledArrowProps>(<Required<Pick<StyledArrowProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => {\n return {\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n width: '1.8em',\n height: '1.8em',\n }\n },\n })`\n ${(props) => {\n let transform = 'rotate(0deg)'\n\n if (props.right) transform = 'rotate(90deg)'\n if (props.bottom) transform = 'rotate(180deg)'\n if (props.left) transform = 'rotate(270deg)'\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n border-radius: ${props.square ? '8px' : '50%'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n & svg {\n transform: ${transform};\n transform-origin: center;\n }\n ${\n props.preset === 'brand'\n ? `\n border: 1px solid transparent;\n transition-property: background-color; \n transition-duration: 250ms;\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 &:active:not(:disabled)::before {\n opacity: 1;\n }`\n : `\n border: none;\n transition-property: background-color, box-shadow;\n transition-duration: 200ms;`\n }\n `\n }}\n\n ${(props) => {\n if (props.preset === 'brand') {\n const schema = props.contrast \|\| props.onColored ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n return props.outline ? schema.outline : schema.default\n }\n\n const defaultStyles = DEFAULT_STYLES\n\n if (props.inverse) return defaultStyles.inverse\n if (props.outline) return defaultStyles.outline\n\n return defaultStyles.filled\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardArrowProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","shadowColor","colorHover","backgroundColorHover","borderColorHover","colorActive","backgroundColorActive","borderColorActive","colorDisabled","backgroundColorDisabled","borderColorDisabled","defaultDisabledStyles","COLOR_SCHEMA","contrast","outline","css","props","theme","colors","transparent","tinycolor","darken","toString","default","DEFAULT_STYLES","filled","disabled","white","accent","alto","inverse","Root","styled","button","withConfig","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","width","height","displayName","componentId","transform","right","bottom","left","square","preset","schema","onColored","focus","responsiveSize","responsiveMargin"],"mappings":"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"}
1	+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/Arrow/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 { StyledArrowProps, ArrowPalette } from './types'\n\nconst shouldForwardArrowProp = createShouldForwardProp((propKey) => {\n return !['square', 'top', 'right', 'bottom', 'left', 'onColored', 'outline', 'inverse'].includes(propKey)\n})\n\nconst template = (palette: ArrowPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &::before {\n box-shadow: inset 0px 4px 0px ${palette.shadowColor};\n }\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:active {\n color: ${palette.colorActive};\n background-color: ${palette.backgroundColorActive};\n border-color: ${palette.borderColorActive};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n`\n\nconst defaultDisabledStyles = `\n -webkit-filter: grayscale(100%);\n -moz-filter: grayscale(100%);\n -ms-filter: grayscale(100%);\n -o-filter: grayscale(100%);\n filter: grayscale(100%);\n`\n\nconst COLOR_SCHEMA = {\n contrast: {\n outline: css<StyledArrowProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors.transparent,\n borderColor: props.theme.colors['border-oncolor-default'],\n colorHover: props.theme.colors['content-oncolor-constant'],\n backgroundColorHover: props.theme.colors['bg-oncolor-primary'],\n borderColorHover: props.theme.colors.transparent,\n colorActive: props.theme.colors['content-oncolor-constant'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncolor-primary']).darken(6).toString() as CSSColor,\n borderColorActive: props.theme.colors.transparent,\n colorDisabled: 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['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledArrowProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-constant'],\n backgroundColor: props.theme.colors['bg-oncolor-primary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-oncolor-constant'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-oncolor-primary']).darken(6).toString() as CSSColor,\n borderColorHover: props.theme.colors.transparent,\n colorActive: props.theme.colors['content-oncolor-constant'],\n backgroundColorActive: tinycolor(props.theme.colors['bg-oncolor-primary']).darken(8).toString() as CSSColor,\n borderColorActive: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-oncolor-primary'],\n borderColorDisabled: props.theme.colors.transparent,\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n default: {\n outline: css<StyledArrowProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors.transparent,\n borderColor: props.theme.colors['border-onmain-contrast'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-tertiary'],\n borderColorHover: props.theme.colors.transparent,\n colorActive: props.theme.colors['content-oncolor-primary'],\n backgroundColorActive: props.theme.colors['bg-brand-primary-basic-active'],\n borderColorActive: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors.transparent,\n borderColorDisabled: props.theme.colors['border-disabled'],\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n default: css<StyledArrowProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-tertiary'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(4).toString() as CSSColor,\n borderColorHover: props.theme.colors.transparent,\n colorActive: props.theme.colors['content-oncolor-primary'],\n backgroundColorActive: props.theme.colors['bg-brand-primary-basic-active'],\n borderColorActive: props.theme.colors.transparent,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors.transparent,\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n `,\n },\n}\n\nconst DEFAULT_STYLES = {\n filled: css<StyledArrowProps>`\n ${({ theme, disabled }) => `\n background-color: ${theme.colors.white};\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n & svg {\n fill: ${theme.colors.accent};\n }\n &:hover {\n background-color: ${theme.colors.accent};\n box-shadow: none;\n svg {\n fill: ${theme.colors.white};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n outline: css<StyledArrowProps>`\n ${({ theme, disabled }) => `\n background-color: transparent;\n box-shadow: inset 0 0 0 2px ${theme.colors.alto};\n & svg {\n fill: ${theme.colors.alto};\n }\n &:hover {\n background-color: ${theme.colors.accent};\n box-shadow: none;\n svg {\n fill: ${theme.colors.white};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 rgba(5, 108, 188, 0.5);\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n inverse: css<StyledArrowProps>`\n ${({ theme, disabled }) => `\n background-color: transparent;\n box-shadow: inset 0 0 0 2px ${theme.colors.white};\n & svg {\n fill: ${theme.colors.white};\n }\n &:hover {\n background-color: ${theme.colors.white};\n box-shadow: none;\n svg {\n fill: ${theme.colors.accent};\n }\n }\n &:active {\n box-shadow: inset 0 4px 0 #eaecf3;\n }\n ${disabled ? defaultDisabledStyles : ''}\n `}\n `,\n}\n\nexport const Root = styled.button\n .withConfig<StyledArrowProps>({\n shouldForwardProp: shouldForwardArrowProp,\n })\n .attrs<StyledArrowProps>(<Required<Pick<StyledArrowProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => {\n return {\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n width: '1.8em',\n height: '1.8em',\n }\n },\n })`\n ${(props) => {\n let transform = 'rotate(0deg)'\n\n if (props.right) transform = 'rotate(90deg)'\n if (props.bottom) transform = 'rotate(180deg)'\n if (props.left) transform = 'rotate(270deg)'\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n border-radius: ${props.square ? '8px' : '50%'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n & svg {\n transform: ${transform};\n transform-origin: center;\n }\n ${\n props.preset === 'brand'\n ? `\n border: 1px solid transparent;\n transition-property: background-color; \n transition-duration: 250ms;\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 &:active:not(:disabled)::before {\n opacity: 1;\n }`\n : `\n border: none;\n transition-property: background-color, box-shadow;\n transition-duration: 200ms;`\n }\n `\n }}\n\n ${(props) => {\n if (props.preset === 'brand') {\n const schema = props.contrast \|\| props.onColored ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.default\n\n return props.outline ? schema.outline : schema.default\n }\n\n const defaultStyles = DEFAULT_STYLES\n\n if (props.inverse) return defaultStyles.inverse\n if (props.outline) return defaultStyles.outline\n\n return defaultStyles.filled\n }}\n\n ${focus}\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardArrowProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","shadowColor","colorHover","backgroundColorHover","borderColorHover","colorActive","backgroundColorActive","borderColorActive","colorDisabled","backgroundColorDisabled","borderColorDisabled","defaultDisabledStyles","COLOR_SCHEMA","contrast","outline","css","props","theme","colors","transparent","tinycolor","darken","toString","default","DEFAULT_STYLES","filled","disabled","white","accent","alto","inverse","Root","styled","button","withConfig","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","width","height","displayName","componentId","transform","right","bottom","left","square","preset","schema","onColored","focus","responsiveSize","responsiveMargin"],"mappings":"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"}

package/components/ArrowBadge/ArrowBadge.js CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var style=require('./style.js');var constants=require('./constants.js');var require$$0=require('react/jsx-runtime');var Text=require('../Text/Text.js');const ArrowBadge=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:t="m",textProps:s={},children:i,left:o,right:a,fancy:n,...c}=e;const d={as:'div',size:'inherit',color:'inherit'};return require$$0.jsxs(style.Root,{...c,size:t,left:o,right:a,fancy:n,ref:r,children:[require$$0.jsx(style.Edge,{left:o,fancy:n}),require$$0.jsx(style.Content,{children:typeof i=='function'?i({baseTextProps:d,textProps:s}):require$$0.jsx(Text.Text,{...d,...s,children:i})}),require$$0.jsx(style.Edge,{right:a,fancy:n,after:!0})]})})),{displayName:"ArrowBadge",sizes:constants.SIZES});exports.ArrowBadge=ArrowBadge,exports.COMPONENT_NAME="ArrowBadge";
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var style=require('./style.js');var constants=require('./constants.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');const ArrowBadge=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:t="m",textProps:s={},children:i,left:n,right:o,fancy:a,...c}=e;const x={as:'div',size:'inherit',color:'inherit'};return jsxRuntime.jsxs(style.Root,{...c,size:t,left:n,right:o,fancy:a,ref:r,children:[jsxRuntime.jsx(style.Edge,{left:n,fancy:a}),jsxRuntime.jsx(style.Content,{children:typeof i=='function'?i({baseTextProps:x,textProps:s}):jsxRuntime.jsx(Text.Text,{...x,...s,children:i})}),jsxRuntime.jsx(style.Edge,{right:o,fancy:a,after:!0})]})})),{displayName:"ArrowBadge",sizes:constants.SIZES});exports.ArrowBadge=ArrowBadge,exports.COMPONENT_NAME="ArrowBadge";
 //# sourceMappingURL=ArrowBadge.js.map

package/components/Avatar/Avatar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var utils=require('./utils.js');var constants=require('./constants.js');var defaultConstants=require('./default-constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Skeleton=require('../Skeleton/Skeleton.js');var Text=require('../Text/Text.js');const Avatar=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:t="m",textProps:s={},children:a,text:i,...n}=e;const o=typeof t!='string'||n.preset!=='default'&&t!=='sm'?t:defaultConstants.SIZES_MAPPING_RULES[t]??t;return require$$0.jsx(style.Root,{...n,size:o,ref:r,children:n.loading?require$$0.jsx(Skeleton.Skeleton,{as:"span",width:"100%",height:"100%",borderRadius:"inherit"}):require$$0.jsx(require$$0.Fragment,{children:a??(!n.src&&require$$0.jsx(Text.Text,{as:"span",appearance:"caption",size:"inherit",color:"inherit",lineHeight:1,marginTop:1,transform:"uppercase",...s,children:utils.abbreviateCaption(i||n.title||'')}))})})})),{displayName:'Avatar',sizes:e=>e.preset==='brand'?e.square?constants.SIZES_SQUARE:constants.SIZES:defaultConstants.SIZES_DEFAULT});exports.SIZES=constants.SIZES,exports.SIZES_SQUARE=constants.SIZES_SQUARE,exports.Avatar=Avatar;
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var utils=require('./utils.js');var constants=require('./constants.js');var defaultConstants=require('./default-constants.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Skeleton=require('../Skeleton/Skeleton.js');var Text=require('../Text/Text.js');const Avatar=withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const{size:s="m",textProps:r={},children:a,text:n,...i}=e;const o=typeof s!='string'||i.preset!=='default'&&s!=='sm'?s:defaultConstants.SIZES_MAPPING_RULES[s]??s;return jsxRuntime.jsx(style.Root,{...i,size:o,ref:t,children:i.loading?jsxRuntime.jsx(Skeleton.Skeleton,{as:"span",width:"100%",height:"100%",borderRadius:"inherit"}):jsxRuntime.jsx(jsxRuntime.Fragment,{children:a??(!i.src&&jsxRuntime.jsx(Text.Text,{as:"span",appearance:"caption",size:"inherit",color:"inherit",lineHeight:1,marginTop:1,transform:"uppercase",...r,children:utils.abbreviateCaption(n||i.title||'')}))})})})),{displayName:'Avatar',sizes:e=>e.preset==='brand'?e.square?constants.SIZES_SQUARE:constants.SIZES:defaultConstants.SIZES_DEFAULT});exports.SIZES=constants.SIZES,exports.SIZES_SQUARE=constants.SIZES_SQUARE,exports.Avatar=Avatar;
 //# sourceMappingURL=Avatar.js.map

package/components/Badge/Badge.js CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var style=require('./style.js');var constants=require('./constants.js');var require$$0=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var Text=require('../Text/Text.js');const Badge=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:s="s",borderRadius:i=3,textProps:o={},iconProps:t={},children:n,content:c,icon:a,...d}=e;const[u,p]=Array.isArray(a)?a:[a];const g={as:'span',size:'inherit',color:'inherit',marginLeft:u?'0.25em':void 0,marginRight:p?'0.25em':void 0};const x={color:'inherit'};return require$$0.jsx(style.Root,{...d,size:s,borderRadius:i,ref:r,children:typeof n=='function'?n({baseTextProps:g,textProps:o,iconBaseProps:x,iconProps:t,icon:a}):require$$0.jsxs(require$$0.Fragment,{children:[u&&require$$0.jsx(Icon.Icon,{name:typeof u=='string'?u:void 0,icon:typeof u!='string'?u:void 0,...x,...t}),(n||c)&&require$$0.jsx(Text.Text,{...g,...o,children:n||c}),p&&require$$0.jsx(Icon.Icon,{name:typeof p=='string'?p:void 0,icon:typeof p!='string'?p:void 0,...x,...t})]})})})),{displayName:'Badge',sizes:e=>e.round?constants.SIZES_ROUND:constants.SIZES});exports.Badge=Badge;
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var style=require('./style.js');var constants=require('./constants.js');var jsxRuntime=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var Text=require('../Text/Text.js');const Badge=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:s="s",borderRadius:t=3,textProps:i={},iconProps:n={},children:o,content:c,icon:a,...d}=e;const[x,u]=Array.isArray(a)?a:[a];const j={as:'span',size:'inherit',color:'inherit',marginLeft:x?'0.25em':void 0,marginRight:u?'0.25em':void 0};const p={color:'inherit'};return jsxRuntime.jsx(style.Root,{...d,size:s,borderRadius:t,ref:r,children:typeof o=='function'?o({baseTextProps:j,textProps:i,iconBaseProps:p,iconProps:n,icon:a}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[x&&jsxRuntime.jsx(Icon.Icon,{name:typeof x=='string'?x:void 0,icon:typeof x!='string'?x:void 0,...p,...n}),(o||c)&&jsxRuntime.jsx(Text.Text,{...j,...i,children:o||c}),u&&jsxRuntime.jsx(Icon.Icon,{name:typeof u=='string'?u:void 0,icon:typeof u!='string'?u:void 0,...p,...n})]})})})),{displayName:'Badge',sizes:e=>e.round?constants.SIZES_ROUND:constants.SIZES});exports.Badge=Badge;
 //# sourceMappingURL=Badge.js.map

package/components/Button/Button.js CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var styled=require('styled-components');var reactRouterDom=require('react-router-dom');var useClassname=require('../../hooks/useClassname.js');var withMergedProps=require('../../hocs/withMergedProps.js');var hooks=require('./hooks.js');var constants=require('./constants.js');var defaultConstants=require('./default-constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var Text=require('../Text/Text.js');const Button=withMergedProps.withMergedProps(React.forwardRef(((e,s)=>{let{size:r="m",inline:t=!0,rounded:o=!0,color:n="accent",fontColor:a="white",textProps:i={},iconProps:c={},as:u,className:l,children:d,content:p,fontWeight:m,icon:h,innerRef:f,...q}=e;const x=styled.useTheme();q.preset!=='default'||typeof r!='string'||q.round||(q={...defaultConstants.PROPS_BY_SIZE[r]??{},...q}),q.href&&(u='a'),q.to&&(u=reactRouterDom.Link),q.primary&&(n='primary'),q.secondary&&(n='atlantis');const y=useClassname.useClassname("Button",l);const v=useClassname.useClassname("Button");const S=hooks.useComputedRel(x,q);const g=hooks.useComputedLinkProps(u,q);let[I,$]=Array.isArray(h)?h:[h];q.success&&(I='checkFill',$=null),q.preset==='brand'&&q.loading&&(I=require$$0.jsx(style.LoaderIcon,{}),$=null);const j={as:'span',size:'inherit',color:'inherit',weight:m??(q.preset==='brand'?800:600),lineHeight:q.preset==='brand'?1.2:1,marginLeft:I?'0.25em':void 0,marginRight:$?'0.25em':void 0};const C={as:'span',color:'inherit'};return require$$0.jsx(style.Root,{...q,...g,size:r,inline:t,color:n,fontColor:a,rounded:o,rel:S,as:u,className:y,ref:s??f,children:typeof d=='function'?d({baseTextProps:j,textProps:i,iconBaseProps:C,iconProps:c,icon:[I,$]}):require$$0.jsxs(require$$0.Fragment,{children:[I&&require$$0.jsx(Icon.Icon,{className:"icon",name:typeof I=='string'?I:void 0,icon:typeof I!='string'?I:void 0,...C,...c}),(d||p)&&require$$0.jsx(Text.Text,{className:`${v}__content`,...j,...i,children:d||p}),$&&require$$0.jsx(Icon.Icon,{className:"icon",name:typeof $=='string'?$:void 0,icon:typeof $!='string'?$:void 0,...C,...c})]})})})),{displayName:"Button",sizes:e=>{let s=e.preset==='brand'?constants.SIZES:defaultConstants.SIZES_DEFAULT;return e.round&&(s=e.preset==='brand'?constants.SIZES_ROUND:defaultConstants.SIZES_ROUND_DEFAULT),s}});exports.SIZES=constants.SIZES,exports.SIZES_ROUND=constants.SIZES_ROUND,exports.Button=Button,exports.COMPONENT_NAME="Button";
+'use strict';var React=require('react');var styled=require('styled-components');var reactRouterDom=require('react-router-dom');var useClassname=require('../../hooks/useClassname.js');var withMergedProps=require('../../hocs/withMergedProps.js');var hooks=require('./hooks.js');var constants=require('./constants.js');var defaultConstants=require('./default-constants.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var Text=require('../Text/Text.js');const Button=withMergedProps.withMergedProps(React.forwardRef(((e,s)=>{let{size:t="m",inline:n=!0,rounded:r=!0,color:o="accent",fontColor:a="white",textProps:i={},iconProps:c={},as:u,className:l,children:d,content:m,fontWeight:p,icon:x,innerRef:h,...j}=e;const f=styled.useTheme();j.preset!=='default'||typeof t!='string'||j.round||(j={...defaultConstants.PROPS_BY_SIZE[t]??{},...j}),j.href&&(u='a'),j.to&&(u=reactRouterDom.Link),j.primary&&(o='primary'),j.secondary&&(o='atlantis');const R=useClassname.useClassname("Button",l);const y=useClassname.useClassname("Button");const v=hooks.useComputedRel(f,j);const S=hooks.useComputedLinkProps(u,j);let[g,I]=Array.isArray(x)?x:[x];j.success&&(g='checkFill',I=null),j.preset==='brand'&&j.loading&&(g=jsxRuntime.jsx(style.LoaderIcon,{}),I=null);const C={as:'span',size:'inherit',color:'inherit',weight:p??(j.preset==='brand'?800:600),lineHeight:j.preset==='brand'?1.2:1,marginLeft:g?'0.25em':void 0,marginRight:I?'0.25em':void 0};const P={as:'span',color:'inherit'};return jsxRuntime.jsx(style.Root,{...j,...S,size:t,inline:n,color:o,fontColor:a,rounded:r,rel:v,as:u,className:R,ref:s??h,children:typeof d=='function'?d({baseTextProps:C,textProps:i,iconBaseProps:P,iconProps:c,icon:[g,I]}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[g&&jsxRuntime.jsx(Icon.Icon,{className:"icon",name:typeof g=='string'?g:void 0,icon:typeof g!='string'?g:void 0,...P,...c}),(d||m)&&jsxRuntime.jsx(Text.Text,{className:`${y}__content`,...C,...i,children:d||m}),I&&jsxRuntime.jsx(Icon.Icon,{className:"icon",name:typeof I=='string'?I:void 0,icon:typeof I!='string'?I:void 0,...P,...c})]})})})),{displayName:"Button",sizes:e=>{let s=e.preset==='brand'?constants.SIZES:defaultConstants.SIZES_DEFAULT;return e.round&&(s=e.preset==='brand'?constants.SIZES_ROUND:defaultConstants.SIZES_ROUND_DEFAULT),s}});exports.SIZES=constants.SIZES,exports.SIZES_ROUND=constants.SIZES_ROUND,exports.Button=Button,exports.COMPONENT_NAME="Button";
 //# sourceMappingURL=Button.js.map

package/components/Button/style.js CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var tinycolor=require('../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.js');var responsiveProperty=require('../../mixins/responsive-property.js');var color=require('../../mixins/color.js');var style=require('../../shared/utils/style.js');var focus=require('../../mixins/focus.js');var responsiveSize=require('../../mixins/responsive-size.js');var regexp=require('../../shared/regexp.js');var index=require('../../external/.pnpm/@foxford_icon-pack@0.11.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/icons/LoaderFill/index.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardButtonProp=style.createShouldForwardProp((o=>!['fluid','width','display','padding','paddingTop','paddingRight','paddingBottom','paddingLeft','fontSize','height','inline','round','success','loading','black','danger','onColored','clear','base','outline','autoRel','noSpacing','primary','secondary','inverted','rounded','basic'].includes(o)),(o=>!(regexp.responsiveFluidPropKeyRegExp.test(o)||regexp.responsiveWidthPropKeyRegExp.test(o)||regexp.responsivePaddingPropKeyRegExp.test(o)||regexp.responsiveFontSizePropKeyRegExp.test(o)||regexp.responsiveHeightPropKeyRegExp.test(o))));const WIDTHS={xl:320,l:280,m:245,s:180,xs:140};const loadingAnimation=styled.keyframes(["0%{background-position:0 0;}100%{background-position:50px 50px;}"]);const spinAnimation=styled.keyframes(["100%{transform:rotate(360deg);}"]);const defaultLoadingStyles=styled.css(["background-image:linear-gradient( -45deg,rgba(255,255,255,0.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 75%,transparent 75%,transparent );background-size:25px 25px;animation:"," 2s linear infinite;cursor:progress;"],loadingAnimation);const getWidth=o=>o==='auto'?'auto':typeof o=='number'||typeof o=='boolean'?o:o&&WIDTHS[o]?WIDTHS[o]:'auto';const fluidStyles=()=>styled.css(["min-width:initial;width:100%;"]);const template=o=>`\n  color: ${o.color};\n  background-color: ${o.backgroundColor};\n  border-color: ${o.borderColor};\n  &::before {\n    box-shadow: inset 0px 4px 0px ${o.shadowColor};\n  }\n  &:hover {\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n    border-color: ${o.borderColorHover};\n  }\n  &:active {\n    color: ${o.colorActive};\n    background-color: ${o.backgroundColorActive};\n    border-color: ${o.borderColorActive};\n  }\n  &:disabled {\n    color: ${o.colorDisabled};\n    background-color: ${o.backgroundColorDisabled};\n    border-color: ${o.borderColorDisabled};\n  }\n`;const COLOR_SCHEMA={contrast:{clear:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:o.theme.colors['bg-oncontrast-hover'],borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),base:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.success?o.theme.colors['bg-oncolor-primary']:o.theme.colors['bg-oncolor-secondary'],borderColor:o.theme.colors.transparent,colorHover:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.success?tinycolor.default(o.theme.colors['bg-oncolor-primary']).darken(2).toString():tinycolor.default(o.theme.colors['bg-oncolor-secondary']).darken(4).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-primary'],backgroundColorActive:o.success?tinycolor.default(o.theme.colors['bg-oncolor-primary']).darken(2).toString():tinycolor.default(o.theme.colors['bg-oncolor-secondary']).darken(4).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['bg-oncolor-primary']:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['alert-success']:o.loading?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.success||o.loading?o.theme.colors['bg-oncolor-primary']:o.theme.colors.transparent,borderColor:o.success||o.loading?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorHover:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-constant'],backgroundColorHover:o.success?tinycolor.default(o.theme.colors['bg-oncolor-primary']).darken(2).toString():o.theme.colors['bg-oncolor-primary'],borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-constant'],backgroundColorActive:o.success?tinycolor.default(o.theme.colors['bg-oncolor-primary']).darken(2).toString():o.theme.colors['bg-oncolor-primary'],borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['bg-oncolor-primary']:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-constant'],backgroundColor:o.theme.colors['bg-oncolor-primary'],borderColor:o.theme.colors.transparent,colorHover:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-constant'],backgroundColorHover:tinycolor.default(o.theme.colors['bg-oncolor-primary']).darken(2).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-constant'],backgroundColorActive:tinycolor.default(o.theme.colors['bg-oncolor-primary']).darken(2).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['bg-oncolor-primary']:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},danger:{clear:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['alert-success']:o.theme.colors['alert-error'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors.transparent,colorHover:o.success?o.theme.colors['alert-success']:o.theme.colors['alert-error'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['alert-success']:o.theme.colors['alert-error'],backgroundColorActive:o.theme.colors['bg-oncolor-hover'],borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['alert-error']:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),base:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['alert-error'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.theme.colors.transparent,colorHover:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['alert-error'],backgroundColorHover:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor.default(o.theme.colors['bg-onmain-tertiary']).darken(2).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['alert-error'],backgroundColorActive:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor.default(o.theme.colors['bg-onmain-tertiary']).darken(2).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['alert-error']:o.theme.colors['content-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['bg-onmain-tertiary']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.success||o.loading?o.theme.colors['content-oncolor-primary']:o.theme.colors['alert-error'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.loading?o.theme.colors['alert-bg-error-500']:o.theme.colors.transparent,borderColor:o.success||o.loading?o.theme.colors.transparent:o.theme.colors['alert-bg-error-500'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():o.theme.colors['alert-bg-error-500'],borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor.default(o.theme.colors['alert-bg-error-500']).darken(2).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['alert-bg-error-500']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.theme.colors['alert-bg-error-500'],borderColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor.default(o.theme.colors['alert-bg-error-500']).darken(2).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor.default(o.theme.colors['alert-bg-error-500']).darken(2).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['alert-bg-error-500']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},black:{clear:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-inverse'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-inverse'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-inverse'],backgroundColorActive:o.theme.colors['bg-oncolor-hover'],borderColorActive:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),base:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-oncolor-inverse'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.theme.colors.transparent,colorHover:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-oncolor-inverse'],backgroundColorHover:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).lighten(4).toString():tinycolor.default(o.theme.colors['bg-onmain-tertiary']).darken(4).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-oncolor-inverse'],backgroundColorActive:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).lighten(4).toString():tinycolor.default(o.theme.colors['bg-onmain-tertiary']).darken(4).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['content-oncolor-primary']:o.loading?o.theme.colors['content-onmain-inverse']:o.theme.colors['content-oncolor-inverse'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.loading?o.theme.colors['bg-onmain-inverse']:o.theme.colors.transparent,borderColor:o.success||o.loading?o.theme.colors.transparent:o.theme.colors['border-onmain-contrast'],colorHover:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-inverse'],backgroundColorHover:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).lighten(4).toString():o.theme.colors['bg-onmain-inverse'],borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-inverse'],backgroundColorActive:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).lighten(4).toString():tinycolor.default(o.theme.colors['bg-onmain-inverse']).lighten(4).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-inverse'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.theme.colors['bg-onmain-inverse'],borderColor:o.theme.colors.transparent,colorHover:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-inverse'],backgroundColorHover:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).lighten(4).toString():tinycolor.default(o.theme.colors['bg-onmain-inverse']).lighten(4).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-inverse'],backgroundColorActive:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).lighten(4).toString():tinycolor.default(o.theme.colors['bg-onmain-inverse']).lighten(4).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},default:{clear:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['alert-success']:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors.transparent,colorHover:o.success?o.theme.colors['alert-success']:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['alert-success']:o.theme.colors['content-brand-primary'],backgroundColorActive:o.theme.colors['bg-oncolor-hover'],borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-brand-primary']:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),base:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-brand-primary'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.theme.colors.transparent,colorHover:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-brand-primary'],backgroundColorHover:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor.default(o.theme.colors['bg-onmain-tertiary']).darken(2).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-brand-primary'],backgroundColorActive:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor.default(o.theme.colors['bg-onmain-tertiary']).darken(2).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-brand-primary']:o.theme.colors['content-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['bg-onmain-tertiary']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.success||o.loading?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-brand-primary'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.loading?o.theme.colors['bg-brand-primary-basic']:o.theme.colors.transparent,borderColor:o.success||o.loading?o.theme.colors.transparent:o.theme.colors['border-brand-primary'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():o.theme.colors['bg-brand-primary-basic'],borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor.default(o.theme.colors['bg-brand-primary-basic']).darken(2).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['bg-brand-primary-basic']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.theme.colors['bg-brand-primary-basic'],borderColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor.default(o.theme.colors['bg-brand-primary-basic']).darken(2).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:o.success?tinycolor.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor.default(o.theme.colors['bg-brand-primary-basic']).darken(2).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['bg-brand-primary-basic']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))}};const defaultStyles=styled.css([""," "," "," "," "," ",""],(o=>o.disabled||o.loading?'':`\n      &:active {\n        box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n      }\n      &:hover {\n        color: ${o.fontColor};\n        background-color: ${tinycolor.default(o.theme.colors[o.color]).saturate(-5).lighten(-8).toString()};\n      }\n      ${o.inverted||o.basic||o.outline?`\n              &:not(:hover) {\n                border: 1px solid ${o.theme.colors[o.color]};\n              }\n              &:hover {\n                border: 1px solid ${o.theme.colors[o.color]};\n              }\n            `:''}\n    `),(o=>o.loading?defaultLoadingStyles:''),(o=>{let r='background-color';return(o.inverted||o.basic||o.outline)&&(r='color'),color.color(o.color,r)}),(o=>{let r='color';return(o.inverted||o.basic||o.outline)&&(r='background-color'),color.color(o.fontColor,r)}),(o=>o.disabled?`\n      cursor: not-allowed;\n      background-color: ${o.theme.colors.mercury};\n      color: ${o.theme.colors.silver};\n    `:''),(o=>o.basic||o.outline?'background-color: transparent;':''));const Root=styled__default.default.button.withConfig({shouldForwardProp:shouldForwardButtonProp}).attrs((o=>({dynamicSizeDeclaration:(r,e)=>({fontSize:typeof r=='string'?r:`${r}${e}`,height:'2.8em',width:o.round?'2.8em':void 0,paddingRight:o.round?void 0:'1.6em',paddingLeft:o.round?void 0:'1.6em'})}))).withConfig({displayName:"Button__Root",componentId:"ui__sc-16o31r2-0"})([""," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ",""],(o=>{let r=o.inline?'inline-flex':'flex';o.display&&(r=o.display);let e='0px';o.rounded&&(e=o.preset==='brand'?'48px':'5px'),o.round&&(e='50%');let t='pointer';return o.disabled&&(t='not-allowed'),o.loading&&(t='wait'),`\n      display: ${r};\n      border-radius: ${e};\n      cursor: ${t};\n      box-sizing: border-box;\n      position: relative;\n      isolation: isolate;\n      justify-content: center;\n      align-items: center;\n      user-select: none;\n      border: none;\n      text-decoration: none;\n      appearance: none;\n      white-space: nowrap;\n      text-align: center;\n      vertical-align: top;\n      ${o.preset==='brand'?"\n            border: 1px solid transparent;\n            transition-property: background-color; \n            transition-duration: 250ms;\n            &::before {\n              transition-property: opacity; \n              transition-duration: 150ms;\n              transition-timing-function: ease-in;\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            }\n            &:active:not(:disabled)::before {\n              opacity: 1;\n            }":"\n            border: none;\n            overflow: hidden;\n            transition-property: background-color, color;\n            transition-duration: 200ms;"}\n    `}),(o=>{if(o.preset==='default')return defaultStyles;let r=COLOR_SCHEMA.default;return o.black&&(r=COLOR_SCHEMA.black),o.danger&&(r=COLOR_SCHEMA.danger),(o.contrast||o.onColored)&&(r=COLOR_SCHEMA.contrast),o.clear?r.clear:o.base?r.base:o.outline?r.outline:r.default}),focus.focus,responsiveSize.responsiveSize,(o=>o.padding?responsiveProperty.property(o.padding,'padding'):null),(o=>o.paddingTop?responsiveProperty.property(o.paddingTop,'padding-top'):null),(o=>o.paddingRight?responsiveProperty.property(o.paddingRight,'padding-right'):null),(o=>o.paddingBottom?responsiveProperty.property(o.paddingBottom,'padding-bottom'):null),(o=>o.paddingLeft?responsiveProperty.property(o.paddingLeft,'padding-left'):null),(o=>o.margin?responsiveProperty.property(o.margin,'margin'):null),(o=>o.marginTop?responsiveProperty.property(o.marginTop,'margin-top'):null),(o=>o.marginRight?responsiveProperty.property(o.marginRight,'margin-right'):null),(o=>o.marginBottom?responsiveProperty.property(o.marginBottom,'margin-bottom'):null),(o=>o.marginLeft?responsiveProperty.property(o.marginLeft,'margin-left'):null),(o=>o.fontSize?responsiveProperty.property(o.fontSize,'font-size'):null),(o=>o.height?responsiveProperty.property(o.height,'height'):null),(o=>{const r=o.fluid&&o.width!=='auto'?'max-width':'width';return o.width?responsiveProperty.property(getWidth(o.width),r):null}),(({paddingXS:o,paddingS:r,paddingM:e,paddingL:t,paddingXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{paddingXS:o,paddingS:r,paddingM:e,paddingL:t,paddingXL:n},cssProperty:'padding'})),(({paddingTopXS:o,paddingTopS:r,paddingTopM:e,paddingTopL:t,paddingTopXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{paddingTopXS:o,paddingTopS:r,paddingTopM:e,paddingTopL:t,paddingTopXL:n},cssProperty:'padding-top'})),(({paddingRightXS:o,paddingRightS:r,paddingRightM:e,paddingRightL:t,paddingRightXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{paddingRightXS:o,paddingRightS:r,paddingRightM:e,paddingRightL:t,paddingRightXL:n},cssProperty:'padding-right'})),(({paddingBottomXS:o,paddingBottomS:r,paddingBottomM:e,paddingBottomL:t,paddingBottomXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{paddingBottomXS:o,paddingBottomS:r,paddingBottomM:e,paddingBottomL:t,paddingBottomXL:n},cssProperty:'padding-bottom'})),(({paddingLeftXS:o,paddingLeftS:r,paddingLeftM:e,paddingLeftL:t,paddingLeftXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{paddingLeftXS:o,paddingLeftS:r,paddingLeftM:e,paddingLeftL:t,paddingLeftXL:n},cssProperty:'padding-left'})),(({marginXS:o,marginS:r,marginM:e,marginL:t,marginXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{marginXS:o,marginS:r,marginM:e,marginL:t,marginXL:n},cssProperty:'margin'})),(({marginTopXS:o,marginTopS:r,marginTopM:e,marginTopL:t,marginTopXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{marginTopXS:o,marginTopS:r,marginTopM:e,marginTopL:t,marginTopXL:n},cssProperty:'margin-top'})),(({marginRightXS:o,marginRightS:r,marginRightM:e,marginRightL:t,marginRightXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{marginRightXS:o,marginRightS:r,marginRightM:e,marginRightL:t,marginRightXL:n},cssProperty:'margin-right'})),(({marginBottomXS:o,marginBottomS:r,marginBottomM:e,marginBottomL:t,marginBottomXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{marginBottomXS:o,marginBottomS:r,marginBottomM:e,marginBottomL:t,marginBottomXL:n},cssProperty:'margin-bottom'})),(({marginLeftXS:o,marginLeftS:r,marginLeftM:e,marginLeftL:t,marginLeftXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{marginLeftXS:o,marginLeftS:r,marginLeftM:e,marginLeftL:t,marginLeftXL:n},cssProperty:'margin-left'})),(({fontSizeXS:o,fontSizeS:r,fontSizeM:e,fontSizeL:t,fontSizeXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{fontSizeXS:o,fontSizeS:r,fontSizeM:e,fontSizeL:t,fontSizeXL:n},cssProperty:'font-size'})),(({heightXS:o,heightS:r,heightM:e,heightL:t,heightXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{heightXS:o,heightS:r,heightM:e,heightL:t,heightXL:n},cssProperty:'height'})),(({widthXS:o,widthS:r,widthM:e,widthL:t,widthXL:n,fluid:s,width:l})=>responsiveProperty.responsiveNamedProperty({sizes:{widthXS:o,widthS:r,widthM:e,widthL:t,widthXL:n},cssProperty:s&&l!=='auto'?'max-width':'width',customSizeHandler:getWidth})),(o=>o.fluid?responsiveProperty.property(o.fluid,fluidStyles):null),(({fluidXS:o,fluidS:r,fluidM:e,fluidL:t,fluidXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{fluidXS:o,fluidS:r,fluidM:e,fluidL:t,fluidXL:n},cssProperty:fluidStyles})));const LoaderIcon=styled__default.default(index.LoaderFill).withConfig({displayName:"Button__LoaderIcon",componentId:"ui__sc-16o31r2-1"})(["transform-origin:center;animation:"," 1600ms infinite linear;"],spinAnimation);exports.LoaderIcon=LoaderIcon,exports.Root=Root;
+'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var iconPack=require('@foxford/icon-pack');var responsiveProperty=require('../../mixins/responsive-property.js');var color=require('../../mixins/color.js');var style=require('../../shared/utils/style.js');var focus=require('../../mixins/focus.js');var responsiveSize=require('../../mixins/responsive-size.js');var regexp=require('../../shared/regexp.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardButtonProp=style.createShouldForwardProp((o=>!['fluid','width','display','padding','paddingTop','paddingRight','paddingBottom','paddingLeft','fontSize','height','inline','round','success','loading','black','danger','onColored','clear','base','outline','autoRel','noSpacing','primary','secondary','inverted','rounded','basic'].includes(o)),(o=>!(regexp.responsiveFluidPropKeyRegExp.test(o)||regexp.responsiveWidthPropKeyRegExp.test(o)||regexp.responsivePaddingPropKeyRegExp.test(o)||regexp.responsiveFontSizePropKeyRegExp.test(o)||regexp.responsiveHeightPropKeyRegExp.test(o))));const WIDTHS={xl:320,l:280,m:245,s:180,xs:140};const loadingAnimation=styled.keyframes(["0%{background-position:0 0;}100%{background-position:50px 50px;}"]);const spinAnimation=styled.keyframes(["100%{transform:rotate(360deg);}"]);const defaultLoadingStyles=styled.css(["background-image:linear-gradient( -45deg,rgba(255,255,255,0.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 75%,transparent 75%,transparent );background-size:25px 25px;animation:"," 2s linear infinite;cursor:progress;"],loadingAnimation);const getWidth=o=>o==='auto'?'auto':typeof o=='number'||typeof o=='boolean'?o:o&&WIDTHS[o]?WIDTHS[o]:'auto';const fluidStyles=()=>styled.css(["min-width:initial;width:100%;"]);const template=o=>`\n  color: ${o.color};\n  background-color: ${o.backgroundColor};\n  border-color: ${o.borderColor};\n  &::before {\n    box-shadow: inset 0px 4px 0px ${o.shadowColor};\n  }\n  &:hover {\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n    border-color: ${o.borderColorHover};\n  }\n  &:active {\n    color: ${o.colorActive};\n    background-color: ${o.backgroundColorActive};\n    border-color: ${o.borderColorActive};\n  }\n  &:disabled {\n    color: ${o.colorDisabled};\n    background-color: ${o.backgroundColorDisabled};\n    border-color: ${o.borderColorDisabled};\n  }\n`;const COLOR_SCHEMA={contrast:{clear:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.theme.colors['bg-oncontrast-hover'],borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:o.theme.colors['bg-oncontrast-hover'],borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncontrast-hover'],...o.palette}))),base:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.success?o.theme.colors['bg-oncolor-primary']:o.theme.colors['bg-oncolor-secondary'],borderColor:o.theme.colors.transparent,colorHover:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.success?tinycolor__default.default(o.theme.colors['bg-oncolor-primary']).darken(2).toString():tinycolor__default.default(o.theme.colors['bg-oncolor-secondary']).darken(4).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-primary'],backgroundColorActive:o.success?tinycolor__default.default(o.theme.colors['bg-oncolor-primary']).darken(2).toString():tinycolor__default.default(o.theme.colors['bg-oncolor-secondary']).darken(4).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['bg-oncolor-primary']:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['alert-success']:o.loading?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-primary'],backgroundColor:o.success||o.loading?o.theme.colors['bg-oncolor-primary']:o.theme.colors.transparent,borderColor:o.success||o.loading?o.theme.colors.transparent:o.theme.colors['border-oncolor-default'],colorHover:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-constant'],backgroundColorHover:o.success?tinycolor__default.default(o.theme.colors['bg-oncolor-primary']).darken(2).toString():o.theme.colors['bg-oncolor-primary'],borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-constant'],backgroundColorActive:o.success?tinycolor__default.default(o.theme.colors['bg-oncolor-primary']).darken(2).toString():o.theme.colors['bg-oncolor-primary'],borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['bg-oncolor-primary']:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-constant'],backgroundColor:o.theme.colors['bg-oncolor-primary'],borderColor:o.theme.colors.transparent,colorHover:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-constant'],backgroundColorHover:tinycolor__default.default(o.theme.colors['bg-oncolor-primary']).darken(2).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-constant'],backgroundColorActive:tinycolor__default.default(o.theme.colors['bg-oncolor-primary']).darken(2).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-oncolor-constant']:o.theme.colors['content-oncolor-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['bg-oncolor-primary']:o.theme.colors['bg-oncolor-disabled'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},danger:{clear:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['alert-success']:o.theme.colors['alert-error'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors.transparent,colorHover:o.success?o.theme.colors['alert-success']:o.theme.colors['alert-error'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['alert-success']:o.theme.colors['alert-error'],backgroundColorActive:o.theme.colors['bg-oncolor-hover'],borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['alert-error']:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),base:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['alert-error'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.theme.colors.transparent,colorHover:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['alert-error'],backgroundColorHover:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(2).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['alert-error'],backgroundColorActive:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(2).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['alert-error']:o.theme.colors['content-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['bg-onmain-tertiary']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.success||o.loading?o.theme.colors['content-oncolor-primary']:o.theme.colors['alert-error'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.loading?o.theme.colors['alert-bg-error-500']:o.theme.colors.transparent,borderColor:o.success||o.loading?o.theme.colors.transparent:o.theme.colors['alert-bg-error-500'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():o.theme.colors['alert-bg-error-500'],borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor__default.default(o.theme.colors['alert-bg-error-500']).darken(2).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['alert-bg-error-500']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.theme.colors['alert-bg-error-500'],borderColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor__default.default(o.theme.colors['alert-bg-error-500']).darken(2).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor__default.default(o.theme.colors['alert-bg-error-500']).darken(2).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['alert-bg-error-500']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},black:{clear:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['alert-success']:o.theme.colors['content-oncolor-inverse'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-inverse'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-inverse'],backgroundColorActive:o.theme.colors['bg-oncolor-hover'],borderColorActive:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),base:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-oncolor-inverse'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.theme.colors.transparent,colorHover:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-oncolor-inverse'],backgroundColorHover:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).lighten(4).toString():tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(4).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-oncolor-inverse'],backgroundColorActive:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).lighten(4).toString():tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(4).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['content-oncolor-primary']:o.loading?o.theme.colors['content-onmain-inverse']:o.theme.colors['content-oncolor-inverse'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.loading?o.theme.colors['bg-onmain-inverse']:o.theme.colors.transparent,borderColor:o.success||o.loading?o.theme.colors.transparent:o.theme.colors['border-onmain-contrast'],colorHover:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-inverse'],backgroundColorHover:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).lighten(4).toString():o.theme.colors['bg-onmain-inverse'],borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-inverse'],backgroundColorActive:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).lighten(4).toString():tinycolor__default.default(o.theme.colors['bg-onmain-inverse']).lighten(4).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-inverse'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.theme.colors['bg-onmain-inverse'],borderColor:o.theme.colors.transparent,colorHover:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-inverse'],backgroundColorHover:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).lighten(4).toString():tinycolor__default.default(o.theme.colors['bg-onmain-inverse']).lighten(4).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-onmain-inverse'],backgroundColorActive:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).lighten(4).toString():tinycolor__default.default(o.theme.colors['bg-onmain-inverse']).lighten(4).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))},default:{clear:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['alert-success']:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors.transparent,borderColor:o.theme.colors.transparent,colorHover:o.success?o.theme.colors['alert-success']:o.theme.colors['content-brand-primary'],backgroundColorHover:o.theme.colors['bg-oncolor-hover'],borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['alert-success']:o.theme.colors['content-brand-primary'],backgroundColorActive:o.theme.colors['bg-oncolor-hover'],borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-brand-primary']:o.theme.colors['content-disabled'],backgroundColorDisabled:o.theme.colors.transparent,borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),base:styled.css(["",""],(o=>template({color:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-brand-primary'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.theme.colors['bg-onmain-tertiary'],borderColor:o.theme.colors.transparent,colorHover:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-brand-primary'],backgroundColorHover:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(2).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.success?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-brand-primary'],backgroundColorActive:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(2).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-brand-primary']:o.theme.colors['content-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['bg-onmain-tertiary']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),outline:styled.css(["",""],(o=>template({color:o.success||o.loading?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-brand-primary'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.loading?o.theme.colors['bg-brand-primary-basic']:o.theme.colors.transparent,borderColor:o.success||o.loading?o.theme.colors.transparent:o.theme.colors['border-brand-primary'],colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():o.theme.colors['bg-brand-primary-basic'],borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor__default.default(o.theme.colors['bg-brand-primary-basic']).darken(2).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['bg-brand-primary-basic']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette}))),default:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.success?o.theme.colors['alert-bg-success-500']:o.theme.colors['bg-brand-primary-basic'],borderColor:o.theme.colors.transparent,colorHover:o.theme.colors['content-oncolor-primary'],backgroundColorHover:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor__default.default(o.theme.colors['bg-brand-primary-basic']).darken(2).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-primary'],backgroundColorActive:o.success?tinycolor__default.default(o.theme.colors['alert-bg-success-500']).darken(2).toString():tinycolor__default.default(o.theme.colors['bg-brand-primary-basic']).darken(2).toString(),borderColorActive:o.theme.colors.transparent,colorDisabled:o.loading?o.theme.colors['content-oncolor-primary']:o.theme.colors['content-disabled'],backgroundColorDisabled:o.loading?o.theme.colors['bg-brand-primary-basic']:o.theme.colors['bg-disabled-large'],borderColorDisabled:o.theme.colors.transparent,shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})))}};const defaultStyles=styled.css([""," "," "," "," "," ",""],(o=>o.disabled||o.loading?'':`\n      &:active {\n        box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n      }\n      &:hover {\n        color: ${o.fontColor};\n        background-color: ${tinycolor__default.default(o.theme.colors[o.color]).saturate(-5).lighten(-8).toString()};\n      }\n      ${o.inverted||o.basic||o.outline?`\n              &:not(:hover) {\n                border: 1px solid ${o.theme.colors[o.color]};\n              }\n              &:hover {\n                border: 1px solid ${o.theme.colors[o.color]};\n              }\n            `:''}\n    `),(o=>o.loading?defaultLoadingStyles:''),(o=>{let e='background-color';return(o.inverted||o.basic||o.outline)&&(e='color'),color.color(o.color,e)}),(o=>{let e='color';return(o.inverted||o.basic||o.outline)&&(e='background-color'),color.color(o.fontColor,e)}),(o=>o.disabled?`\n      cursor: not-allowed;\n      background-color: ${o.theme.colors.mercury};\n      color: ${o.theme.colors.silver};\n    `:''),(o=>o.basic||o.outline?'background-color: transparent;':''));const Root=styled__default.default.button.withConfig({shouldForwardProp:shouldForwardButtonProp}).attrs((o=>({dynamicSizeDeclaration:(e,r)=>({fontSize:typeof e=='string'?e:`${e}${r}`,height:'2.8em',width:o.round?'2.8em':void 0,paddingRight:o.round?void 0:'1.6em',paddingLeft:o.round?void 0:'1.6em'})}))).withConfig({displayName:"Button__Root",componentId:"ui__sc-16o31r2-0"})([""," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ",""],(o=>{let e=o.inline?'inline-flex':'flex';o.display&&(e=o.display);let r='0px';o.rounded&&(r=o.preset==='brand'?'48px':'5px'),o.round&&(r='50%');let t='pointer';return o.disabled&&(t='not-allowed'),o.loading&&(t='wait'),`\n      display: ${e};\n      border-radius: ${r};\n      cursor: ${t};\n      box-sizing: border-box;\n      position: relative;\n      isolation: isolate;\n      justify-content: center;\n      align-items: center;\n      user-select: none;\n      border: none;\n      text-decoration: none;\n      appearance: none;\n      white-space: nowrap;\n      text-align: center;\n      vertical-align: top;\n      ${o.preset==='brand'?"\n            border: 1px solid transparent;\n            transition-property: background-color; \n            transition-duration: 250ms;\n            &::before {\n              transition-property: opacity; \n              transition-duration: 150ms;\n              transition-timing-function: ease-in;\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            }\n            &:active:not(:disabled)::before {\n              opacity: 1;\n            }":"\n            border: none;\n            overflow: hidden;\n            transition-property: background-color, color;\n            transition-duration: 200ms;"}\n    `}),(o=>{if(o.preset==='default')return defaultStyles;let e=COLOR_SCHEMA.default;return o.black&&(e=COLOR_SCHEMA.black),o.danger&&(e=COLOR_SCHEMA.danger),(o.contrast||o.onColored)&&(e=COLOR_SCHEMA.contrast),o.clear?e.clear:o.base?e.base:o.outline?e.outline:e.default}),focus.focus,responsiveSize.responsiveSize,(o=>o.padding?responsiveProperty.property(o.padding,'padding'):null),(o=>o.paddingTop?responsiveProperty.property(o.paddingTop,'padding-top'):null),(o=>o.paddingRight?responsiveProperty.property(o.paddingRight,'padding-right'):null),(o=>o.paddingBottom?responsiveProperty.property(o.paddingBottom,'padding-bottom'):null),(o=>o.paddingLeft?responsiveProperty.property(o.paddingLeft,'padding-left'):null),(o=>o.margin?responsiveProperty.property(o.margin,'margin'):null),(o=>o.marginTop?responsiveProperty.property(o.marginTop,'margin-top'):null),(o=>o.marginRight?responsiveProperty.property(o.marginRight,'margin-right'):null),(o=>o.marginBottom?responsiveProperty.property(o.marginBottom,'margin-bottom'):null),(o=>o.marginLeft?responsiveProperty.property(o.marginLeft,'margin-left'):null),(o=>o.fontSize?responsiveProperty.property(o.fontSize,'font-size'):null),(o=>o.height?responsiveProperty.property(o.height,'height'):null),(o=>{const e=o.fluid&&o.width!=='auto'?'max-width':'width';return o.width?responsiveProperty.property(getWidth(o.width),e):null}),(({paddingXS:o,paddingS:e,paddingM:r,paddingL:t,paddingXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{paddingXS:o,paddingS:e,paddingM:r,paddingL:t,paddingXL:n},cssProperty:'padding'})),(({paddingTopXS:o,paddingTopS:e,paddingTopM:r,paddingTopL:t,paddingTopXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{paddingTopXS:o,paddingTopS:e,paddingTopM:r,paddingTopL:t,paddingTopXL:n},cssProperty:'padding-top'})),(({paddingRightXS:o,paddingRightS:e,paddingRightM:r,paddingRightL:t,paddingRightXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{paddingRightXS:o,paddingRightS:e,paddingRightM:r,paddingRightL:t,paddingRightXL:n},cssProperty:'padding-right'})),(({paddingBottomXS:o,paddingBottomS:e,paddingBottomM:r,paddingBottomL:t,paddingBottomXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{paddingBottomXS:o,paddingBottomS:e,paddingBottomM:r,paddingBottomL:t,paddingBottomXL:n},cssProperty:'padding-bottom'})),(({paddingLeftXS:o,paddingLeftS:e,paddingLeftM:r,paddingLeftL:t,paddingLeftXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{paddingLeftXS:o,paddingLeftS:e,paddingLeftM:r,paddingLeftL:t,paddingLeftXL:n},cssProperty:'padding-left'})),(({marginXS:o,marginS:e,marginM:r,marginL:t,marginXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{marginXS:o,marginS:e,marginM:r,marginL:t,marginXL:n},cssProperty:'margin'})),(({marginTopXS:o,marginTopS:e,marginTopM:r,marginTopL:t,marginTopXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{marginTopXS:o,marginTopS:e,marginTopM:r,marginTopL:t,marginTopXL:n},cssProperty:'margin-top'})),(({marginRightXS:o,marginRightS:e,marginRightM:r,marginRightL:t,marginRightXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{marginRightXS:o,marginRightS:e,marginRightM:r,marginRightL:t,marginRightXL:n},cssProperty:'margin-right'})),(({marginBottomXS:o,marginBottomS:e,marginBottomM:r,marginBottomL:t,marginBottomXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{marginBottomXS:o,marginBottomS:e,marginBottomM:r,marginBottomL:t,marginBottomXL:n},cssProperty:'margin-bottom'})),(({marginLeftXS:o,marginLeftS:e,marginLeftM:r,marginLeftL:t,marginLeftXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{marginLeftXS:o,marginLeftS:e,marginLeftM:r,marginLeftL:t,marginLeftXL:n},cssProperty:'margin-left'})),(({fontSizeXS:o,fontSizeS:e,fontSizeM:r,fontSizeL:t,fontSizeXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{fontSizeXS:o,fontSizeS:e,fontSizeM:r,fontSizeL:t,fontSizeXL:n},cssProperty:'font-size'})),(({heightXS:o,heightS:e,heightM:r,heightL:t,heightXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{heightXS:o,heightS:e,heightM:r,heightL:t,heightXL:n},cssProperty:'height'})),(({widthXS:o,widthS:e,widthM:r,widthL:t,widthXL:n,fluid:s,width:l})=>responsiveProperty.responsiveNamedProperty({sizes:{widthXS:o,widthS:e,widthM:r,widthL:t,widthXL:n},cssProperty:s&&l!=='auto'?'max-width':'width',customSizeHandler:getWidth})),(o=>o.fluid?responsiveProperty.property(o.fluid,fluidStyles):null),(({fluidXS:o,fluidS:e,fluidM:r,fluidL:t,fluidXL:n})=>responsiveProperty.responsiveNamedProperty({sizes:{fluidXS:o,fluidS:e,fluidM:r,fluidL:t,fluidXL:n},cssProperty:fluidStyles})));const LoaderIcon=styled__default.default(iconPack.LoaderFill).withConfig({displayName:"Button__LoaderIcon",componentId:"ui__sc-16o31r2-1"})(["transform-origin:center;animation:"," 1600ms infinite linear;"],spinAnimation);exports.LoaderIcon=LoaderIcon,exports.Root=Root;
 //# sourceMappingURL=style.js.map