@foxford/ui 2.87.0-beta-64439a1-20251201 → 2.87.1-beta-3a7d913-20251201

package/components/AccordionItem/style.js

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const shouldForwardAccordionItemProp=style.createShouldForwardProp((e=>!['expanded','disabled','loading','borderRadius'].includes(e)));const shouldForwardAccordionItemCommonProp=style.createShouldForwardProp();const Heading=styled__default.default.h3.withConfig({displayName:"AccordionItem__Heading",componentId:"ui__sc-7h1z5c-0"})(["box-sizing:border-box;display:flex;margin:0;padding:","px;border-radius:inherit;font:inherit;transition-property:color;transition-duration:150ms;transition-timing-function:ease-in;"],focus.focus.padding);const template=e=>`\n  background-color: ${e.backgroundColor};\n\n  & ${Heading} {\n    color: ${e.headerColor};\n    background-color: ${e.headerBackgroundColor};\n  }\n  & ${Heading}:hover {\n    color: ${e.headerColorHover};\n  }\n`;const COLOR_SCHEMA={primary:{default:styled.css(["",""],(e=>template({headerColor:e.palette.headerColor??e.theme.colors['content-onmain-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColor??e.theme.colors['bg-onmain-primary']}))),expanded:styled.css(["",""],(e=>template({headerColor:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColorExpanded??e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorExpanded??e.palette.backgroundColor??e.theme.colors['bg-onmain-primary']}))),disabled:styled.css(["",""],(e=>template({headerColor:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerColorHover:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerBackgroundColor:e.palette.headerBackgroundColorDisabled??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorDisabled??e.theme.colors['bg-onmain-primary']})))},secondary:{default:styled.css(["",""],(e=>template({headerColor:e.palette.headerColor??e.theme.colors['content-onmain-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColor??e.theme.colors['bg-onmain-secondary']}))),expanded:styled.css(["",""],(e=>template({headerColor:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColorExpanded??e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorExpanded??e.palette.backgroundColor??e.theme.colors['bg-onmain-secondary']}))),disabled:styled.css(["",""],(e=>template({headerColor:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerColorHover:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerBackgroundColor:e.palette.headerBackgroundColorDisabled??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorDisabled??e.theme.colors['bg-onmain-secondary']})))},transparent:{default:styled.css(["",""],(e=>template({headerColor:e.palette.headerColor??e.theme.colors['content-onmain-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColor??e.theme.colors.transparent}))),expanded:styled.css(["",""],(e=>template({headerColor:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColorExpanded??e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorExpanded??e.palette.backgroundColor??e.theme.colors.transparent}))),disabled:styled.css(["",""],(e=>template({headerColor:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerColorHover:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerBackgroundColor:e.palette.headerBackgroundColorDisabled??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorDisabled??e.theme.colors.transparent})))}};const Panel=styled__default.default.div.withConfig({displayName:"AccordionItem__Panel",componentId:"ui__sc-7h1z5c-1"})(["box-sizing:border-box;overflow:hidden;transition-property:opacity;"]);const Button=styled__default.default.button.withConfig({displayName:"AccordionItem__Button",componentId:"ui__sc-7h1z5c-2"})(["box-sizing:border-box;display:flex;flex-grow:1;appearance:none;border:none;margin:0;padding:0;color:inherit;background-color:transparent;font:inherit;cursor:inherit;text-align:left;",""],focus.focus);const Root=styled__default.default.section.withConfig({shouldForwardProp:shouldForwardAccordionItemProp}).withConfig({displayName:"AccordionItem__Root",componentId:"ui__sc-7h1z5c-3"})(["box-sizing:border-box;display:grid;transition-property:grid-template-rows;&,& > ","{transition-timing-function:cubic-bezier(0.42,0,0.75,1);transition-duration:250ms;}@media (prefers-reduced-motion:reduce){transition-duration:0ms;}"," "," "," "," ",""],Panel,(e=>e.expanded?`\n        grid-template-rows: 0fr 1fr;\n        & > ${Panel} {\n          opacity: 1;\n        }\n      `:`\n        grid-template-rows: 0fr 0fr;\n        & > ${Panel} {\n          opacity: 0;\n        }\n      `),(e=>`\n    border-radius: ${e.borderRadius}px;\n    \n    & ${Button} {\n      border-radius: ${e.borderRadius>focus.focus.padding?e.borderRadius-focus.focus.padding:0}px;\n    }\n    \n    & ${Heading} {\n      cursor: ${e.loading?'wait':e.disabled?'not-allowed':'pointer'};\n    }\n  `),(e=>{let o=COLOR_SCHEMA.transparent;return e.primary&&(o=COLOR_SCHEMA.primary),e.secondary&&(o=COLOR_SCHEMA.secondary),e.disabled?o.disabled:e.expanded?o.expanded:o.default}),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Header=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardAccordionItemCommonProp}).withConfig({displayName:"AccordionItem__Header",componentId:"ui__sc-7h1z5c-4"})(["box-sizing:border-box;display:flex;flex-grow:1;& > *:not(:last-child){margin-right:8px;}",""],responsiveSize.responsiveSize);const Content=styled__default.default.span.withConfig({displayName:"AccordionItem__Content",componentId:"ui__sc-7h1z5c-5"})(["box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;align-self:center;flex-grow:1;"]);const IconAnimation=styled__default.default.span.withConfig({shouldForwardProp:e=>e!=='up'}).withConfig({displayName:"AccordionItem__IconAnimation",componentId:"ui__sc-7h1z5c-6"})(["box-sizing:border-box;display:flex;align-self:flex-start;flex-shrink:0;transition-property:transform;transition-duration:250ms;transform-origin:center;@media (prefers-reduced-motion:reduce){transition-duration:0ms;}",""],(e=>`\n    transform: rotate(${e.up?180:0}deg);\n  `));const Details=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardAccordionItemCommonProp}).withConfig({displayName:"AccordionItem__Details",componentId:"ui__sc-7h1z5c-7"})(["box-sizing:border-box;",""],responsiveSize.responsiveSize);exports.Button=Button,exports.Content=Content,exports.Details=Details,exports.Header=Header,exports.Heading=Heading,exports.IconAnimation=IconAnimation,exports.Panel=Panel,exports.Root=Root;
+'use strict';var styled=require('styled-components');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var hover=require('../../mixins/hover.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const shouldForwardAccordionItemProp=style.createShouldForwardProp((e=>!['expanded','disabled','loading','borderRadius'].includes(e)));const shouldForwardAccordionItemCommonProp=style.createShouldForwardProp();const Heading=styled__default.default.h3.withConfig({displayName:"AccordionItem__Heading",componentId:"ui__sc-7h1z5c-0"})(["box-sizing:border-box;display:flex;margin:0;padding:","px;border-radius:inherit;font:inherit;transition-property:color;transition-duration:150ms;transition-timing-function:ease-in;"],focus.focus.padding);const template=e=>`\n  background-color: ${e.backgroundColor};\n\n  & ${Heading} {\n    color: ${e.headerColor};\n    background-color: ${e.headerBackgroundColor};\n  }\n  ${hover.hover(`color: ${e.headerColorHover};`,`& ${Heading}:hover`)}\n`;const COLOR_SCHEMA={primary:{default:styled.css(["",""],(e=>template({headerColor:e.palette.headerColor??e.theme.colors['content-onmain-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColor??e.theme.colors['bg-onmain-primary']}))),expanded:styled.css(["",""],(e=>template({headerColor:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColorExpanded??e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorExpanded??e.palette.backgroundColor??e.theme.colors['bg-onmain-primary']}))),disabled:styled.css(["",""],(e=>template({headerColor:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerColorHover:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerBackgroundColor:e.palette.headerBackgroundColorDisabled??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorDisabled??e.theme.colors['bg-onmain-primary']})))},secondary:{default:styled.css(["",""],(e=>template({headerColor:e.palette.headerColor??e.theme.colors['content-onmain-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColor??e.theme.colors['bg-onmain-secondary']}))),expanded:styled.css(["",""],(e=>template({headerColor:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColorExpanded??e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorExpanded??e.palette.backgroundColor??e.theme.colors['bg-onmain-secondary']}))),disabled:styled.css(["",""],(e=>template({headerColor:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerColorHover:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerBackgroundColor:e.palette.headerBackgroundColorDisabled??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorDisabled??e.theme.colors['bg-onmain-secondary']})))},transparent:{default:styled.css(["",""],(e=>template({headerColor:e.palette.headerColor??e.theme.colors['content-onmain-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColor??e.theme.colors.transparent}))),expanded:styled.css(["",""],(e=>template({headerColor:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColorExpanded??e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorExpanded??e.palette.backgroundColor??e.theme.colors.transparent}))),disabled:styled.css(["",""],(e=>template({headerColor:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerColorHover:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerBackgroundColor:e.palette.headerBackgroundColorDisabled??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorDisabled??e.theme.colors.transparent})))}};const Panel=styled__default.default.div.withConfig({displayName:"AccordionItem__Panel",componentId:"ui__sc-7h1z5c-1"})(["box-sizing:border-box;overflow:hidden;transition-property:opacity;"]);const Button=styled__default.default.button.withConfig({displayName:"AccordionItem__Button",componentId:"ui__sc-7h1z5c-2"})(["box-sizing:border-box;display:flex;flex-grow:1;appearance:none;border:none;margin:0;padding:0;color:inherit;background-color:transparent;font:inherit;cursor:inherit;text-align:left;",""],focus.focus);const Root=styled__default.default.section.withConfig({shouldForwardProp:shouldForwardAccordionItemProp}).withConfig({displayName:"AccordionItem__Root",componentId:"ui__sc-7h1z5c-3"})(["box-sizing:border-box;display:grid;transition-property:grid-template-rows;&,& > ","{transition-timing-function:cubic-bezier(0.42,0,0.75,1);transition-duration:250ms;}@media (prefers-reduced-motion:reduce){transition-duration:0ms;}"," "," "," "," ",""],Panel,(e=>e.expanded?`\n        grid-template-rows: 0fr 1fr;\n        & > ${Panel} {\n          opacity: 1;\n        }\n      `:`\n        grid-template-rows: 0fr 0fr;\n        & > ${Panel} {\n          opacity: 0;\n        }\n      `),(e=>`\n    border-radius: ${e.borderRadius}px;\n    \n    & ${Button} {\n      border-radius: ${e.borderRadius>focus.focus.padding?e.borderRadius-focus.focus.padding:0}px;\n    }\n    \n    & ${Heading} {\n      cursor: ${e.loading?'wait':e.disabled?'not-allowed':'pointer'};\n    }\n  `),(e=>{let o=COLOR_SCHEMA.transparent;return e.primary&&(o=COLOR_SCHEMA.primary),e.secondary&&(o=COLOR_SCHEMA.secondary),e.disabled?o.disabled:e.expanded?o.expanded:o.default}),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Header=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardAccordionItemCommonProp}).withConfig({displayName:"AccordionItem__Header",componentId:"ui__sc-7h1z5c-4"})(["box-sizing:border-box;display:flex;flex-grow:1;& > *:not(:last-child){margin-right:8px;}",""],responsiveSize.responsiveSize);const Content=styled__default.default.span.withConfig({displayName:"AccordionItem__Content",componentId:"ui__sc-7h1z5c-5"})(["box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;align-self:center;flex-grow:1;"]);const IconAnimation=styled__default.default.span.withConfig({shouldForwardProp:e=>e!=='up'}).withConfig({displayName:"AccordionItem__IconAnimation",componentId:"ui__sc-7h1z5c-6"})(["box-sizing:border-box;display:flex;align-self:flex-start;flex-shrink:0;transition-property:transform;transition-duration:250ms;transform-origin:center;@media (prefers-reduced-motion:reduce){transition-duration:0ms;}",""],(e=>`\n    transform: rotate(${e.up?180:0}deg);\n  `));const Details=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardAccordionItemCommonProp}).withConfig({displayName:"AccordionItem__Details",componentId:"ui__sc-7h1z5c-7"})(["box-sizing:border-box;",""],responsiveSize.responsiveSize);exports.Button=Button,exports.Content=Content,exports.Details=Details,exports.Header=Header,exports.Heading=Heading,exports.IconAnimation=IconAnimation,exports.Panel=Panel,exports.Root=Root;
 //# sourceMappingURL=style.js.map

package/components/AccordionItem/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/AccordionItem/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { ResponsiveSizeProps, ResponsiveSizeInterpolationProps } from 'shared/interfaces'\nimport type { Size, AccordionItemPalette, StyledAccordionItemProps } from './types'\n\nconst shouldForwardAccordionItemProp = createShouldForwardProp(\n  (propKey) => !['expanded', 'disabled', 'loading', 'borderRadius'].includes(propKey)\n)\n\nconst shouldForwardAccordionItemCommonProp = createShouldForwardProp()\n\nexport const Heading = styled.h3`\n  box-sizing: border-box;\n  display: flex;\n  margin: 0;\n  padding: ${focus.padding}px;\n  border-radius: inherit;\n  font: inherit;\n  transition-property: color;\n  transition-duration: 150ms;\n  transition-timing-function: ease-in;\n`\n\nconst template = (palette: AccordionItemPalette) => `\n  background-color: ${palette.backgroundColor};\n\n  & ${Heading} {\n    color: ${palette.headerColor};\n    background-color: ${palette.headerBackgroundColor};\n  }\n  & ${Heading}:hover {\n    color: ${palette.headerColorHover};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  primary: {\n    default: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColor ?? props.theme.colors['content-onmain-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor: props.palette.headerBackgroundColor ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n        })}\n    `,\n    expanded: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor:\n            props.palette.headerBackgroundColorExpanded ??\n            props.palette.headerBackgroundColor ??\n            props.theme.colors.transparent,\n          backgroundColor:\n            props.palette.backgroundColorExpanded ??\n            props.palette.backgroundColor ??\n            props.theme.colors['bg-onmain-primary'],\n        })}\n    `,\n    disabled: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerColorHover: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerBackgroundColor: props.palette.headerBackgroundColorDisabled ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColorDisabled ?? props.theme.colors['bg-onmain-primary'],\n        })}\n    `,\n  },\n  secondary: {\n    default: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColor ?? props.theme.colors['content-onmain-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor: props.palette.headerBackgroundColor ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-secondary'],\n        })}\n    `,\n    expanded: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor:\n            props.palette.headerBackgroundColorExpanded ??\n            props.palette.headerBackgroundColor ??\n            props.theme.colors.transparent,\n          backgroundColor:\n            props.palette.backgroundColorExpanded ??\n            props.palette.backgroundColor ??\n            props.theme.colors['bg-onmain-secondary'],\n        })}\n    `,\n    disabled: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerColorHover: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerBackgroundColor: props.palette.headerBackgroundColorDisabled ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColorDisabled ?? props.theme.colors['bg-onmain-secondary'],\n        })}\n    `,\n  },\n  transparent: {\n    default: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColor ?? props.theme.colors['content-onmain-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor: props.palette.headerBackgroundColor ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColor ?? props.theme.colors.transparent,\n        })}\n    `,\n    expanded: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor:\n            props.palette.headerBackgroundColorExpanded ??\n            props.palette.headerBackgroundColor ??\n            props.theme.colors.transparent,\n          backgroundColor:\n            props.palette.backgroundColorExpanded ?? props.palette.backgroundColor ?? props.theme.colors.transparent,\n        })}\n    `,\n    disabled: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerColorHover: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerBackgroundColor: props.palette.headerBackgroundColorDisabled ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColorDisabled ?? props.theme.colors.transparent,\n        })}\n    `,\n  },\n}\n\nexport const Panel = styled.div`\n  box-sizing: border-box;\n  overflow: hidden;\n  transition-property: opacity;\n`\n\nexport const Button = styled.button`\n  box-sizing: border-box;\n  display: flex;\n  flex-grow: 1;\n  appearance: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  color: inherit;\n  background-color: transparent;\n  font: inherit;\n  cursor: inherit;\n  text-align: left;\n\n  ${focus}\n`\n\nexport const Root = styled.section.withConfig<StyledAccordionItemProps>({\n  shouldForwardProp: shouldForwardAccordionItemProp,\n})`\n  box-sizing: border-box;\n  display: grid;\n  transition-property: grid-template-rows;\n\n  &,\n  & > ${Panel} {\n    transition-timing-function: cubic-bezier(0.42, 0, 0.75, 1);\n    transition-duration: 250ms;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    transition-duration: 0ms;\n  }\n\n  ${(props) =>\n    props.expanded\n      ? `\n        grid-template-rows: 0fr 1fr;\n        & > ${Panel} {\n          opacity: 1;\n        }\n      `\n      : `\n        grid-template-rows: 0fr 0fr;\n        & > ${Panel} {\n          opacity: 0;\n        }\n      `}\n\n  ${(props) => `\n    border-radius: ${props.borderRadius}px;\n    \n    & ${Button} {\n      border-radius: ${props.borderRadius > focus.padding ? props.borderRadius - focus.padding : 0}px;\n    }\n    \n    & ${Heading} {\n      cursor: ${props.loading ? 'wait' : props.disabled ? 'not-allowed' : 'pointer'};\n    }\n  `}\n\n  ${(props) => {\n    let schema = COLOR_SCHEMA.transparent\n\n    if (props.primary) {\n      schema = COLOR_SCHEMA.primary\n    }\n    if (props.secondary) {\n      schema = COLOR_SCHEMA.secondary\n    }\n\n    if (props.disabled) return schema.disabled\n    if (props.expanded) return schema.expanded\n\n    return schema.default\n  }}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Header = styled.span.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n  shouldForwardProp: shouldForwardAccordionItemCommonProp,\n})`\n  box-sizing: border-box;\n  display: flex;\n  flex-grow: 1;\n\n  & > *:not(:last-child) {\n    margin-right: 8px;\n  }\n\n  ${responsiveSize}\n`\n\nexport const Content = styled.span`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: center;\n  flex-grow: 1;\n`\n\nexport const IconAnimation = styled.span.withConfig<{ up: boolean }>({\n  shouldForwardProp: (propKey) => propKey !== 'up',\n})`\n  box-sizing: border-box;\n  display: flex;\n  align-self: flex-start;\n  flex-shrink: 0;\n  transition-property: transform;\n  transition-duration: 250ms;\n  transform-origin: center;\n  @media (prefers-reduced-motion: reduce) {\n    transition-duration: 0ms;\n  }\n  ${(props) => `\n    transform: rotate(${props.up ? 180 : 0}deg);\n  `}\n`\n\nexport const Details = styled.div.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n  shouldForwardProp: shouldForwardAccordionItemCommonProp,\n})`\n  box-sizing: border-box;\n\n  ${responsiveSize}\n`\n"],"names":["shouldForwardAccordionItemProp","createShouldForwardProp","propKey","includes","shouldForwardAccordionItemCommonProp","Heading","styled","h3","withConfig","displayName","componentId","focus","padding","template","palette","backgroundColor","headerColor","headerBackgroundColor","headerColorHover","COLOR_SCHEMA","primary","default","css","props","theme","colors","headerColorExpanded","transparent","expanded","headerBackgroundColorExpanded","backgroundColorExpanded","disabled","headerColorDisabled","headerBackgroundColorDisabled","backgroundColorDisabled","secondary","Panel","div","Button","button","Root","section","shouldForwardProp","borderRadius","loading","schema","responsiveSize","responsiveMargin","Header","span","Content","IconAnimation","up","Details"],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/AccordionItem/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { ResponsiveSizeProps, ResponsiveSizeInterpolationProps } from 'shared/interfaces'\nimport { hover } from 'mixins/hover'\nimport type { Size, AccordionItemPalette, StyledAccordionItemProps } from './types'\n\nconst shouldForwardAccordionItemProp = createShouldForwardProp(\n  (propKey) => !['expanded', 'disabled', 'loading', 'borderRadius'].includes(propKey)\n)\n\nconst shouldForwardAccordionItemCommonProp = createShouldForwardProp()\n\nexport const Heading = styled.h3`\n  box-sizing: border-box;\n  display: flex;\n  margin: 0;\n  padding: ${focus.padding}px;\n  border-radius: inherit;\n  font: inherit;\n  transition-property: color;\n  transition-duration: 150ms;\n  transition-timing-function: ease-in;\n`\n\nconst template = (palette: AccordionItemPalette) => `\n  background-color: ${palette.backgroundColor};\n\n  & ${Heading} {\n    color: ${palette.headerColor};\n    background-color: ${palette.headerBackgroundColor};\n  }\n  ${hover(`color: ${palette.headerColorHover};`, `& ${Heading}:hover`)}\n`\n\nconst COLOR_SCHEMA = {\n  primary: {\n    default: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColor ?? props.theme.colors['content-onmain-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor: props.palette.headerBackgroundColor ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n        })}\n    `,\n    expanded: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor:\n            props.palette.headerBackgroundColorExpanded ??\n            props.palette.headerBackgroundColor ??\n            props.theme.colors.transparent,\n          backgroundColor:\n            props.palette.backgroundColorExpanded ??\n            props.palette.backgroundColor ??\n            props.theme.colors['bg-onmain-primary'],\n        })}\n    `,\n    disabled: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerColorHover: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerBackgroundColor: props.palette.headerBackgroundColorDisabled ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColorDisabled ?? props.theme.colors['bg-onmain-primary'],\n        })}\n    `,\n  },\n  secondary: {\n    default: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColor ?? props.theme.colors['content-onmain-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor: props.palette.headerBackgroundColor ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-secondary'],\n        })}\n    `,\n    expanded: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor:\n            props.palette.headerBackgroundColorExpanded ??\n            props.palette.headerBackgroundColor ??\n            props.theme.colors.transparent,\n          backgroundColor:\n            props.palette.backgroundColorExpanded ??\n            props.palette.backgroundColor ??\n            props.theme.colors['bg-onmain-secondary'],\n        })}\n    `,\n    disabled: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerColorHover: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerBackgroundColor: props.palette.headerBackgroundColorDisabled ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColorDisabled ?? props.theme.colors['bg-onmain-secondary'],\n        })}\n    `,\n  },\n  transparent: {\n    default: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColor ?? props.theme.colors['content-onmain-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor: props.palette.headerBackgroundColor ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColor ?? props.theme.colors.transparent,\n        })}\n    `,\n    expanded: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor:\n            props.palette.headerBackgroundColorExpanded ??\n            props.palette.headerBackgroundColor ??\n            props.theme.colors.transparent,\n          backgroundColor:\n            props.palette.backgroundColorExpanded ?? props.palette.backgroundColor ?? props.theme.colors.transparent,\n        })}\n    `,\n    disabled: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerColorHover: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerBackgroundColor: props.palette.headerBackgroundColorDisabled ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColorDisabled ?? props.theme.colors.transparent,\n        })}\n    `,\n  },\n}\n\nexport const Panel = styled.div`\n  box-sizing: border-box;\n  overflow: hidden;\n  transition-property: opacity;\n`\n\nexport const Button = styled.button`\n  box-sizing: border-box;\n  display: flex;\n  flex-grow: 1;\n  appearance: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  color: inherit;\n  background-color: transparent;\n  font: inherit;\n  cursor: inherit;\n  text-align: left;\n\n  ${focus}\n`\n\nexport const Root = styled.section.withConfig<StyledAccordionItemProps>({\n  shouldForwardProp: shouldForwardAccordionItemProp,\n})`\n  box-sizing: border-box;\n  display: grid;\n  transition-property: grid-template-rows;\n\n  &,\n  & > ${Panel} {\n    transition-timing-function: cubic-bezier(0.42, 0, 0.75, 1);\n    transition-duration: 250ms;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    transition-duration: 0ms;\n  }\n\n  ${(props) =>\n    props.expanded\n      ? `\n        grid-template-rows: 0fr 1fr;\n        & > ${Panel} {\n          opacity: 1;\n        }\n      `\n      : `\n        grid-template-rows: 0fr 0fr;\n        & > ${Panel} {\n          opacity: 0;\n        }\n      `}\n\n  ${(props) => `\n    border-radius: ${props.borderRadius}px;\n    \n    & ${Button} {\n      border-radius: ${props.borderRadius > focus.padding ? props.borderRadius - focus.padding : 0}px;\n    }\n    \n    & ${Heading} {\n      cursor: ${props.loading ? 'wait' : props.disabled ? 'not-allowed' : 'pointer'};\n    }\n  `}\n\n  ${(props) => {\n    let schema = COLOR_SCHEMA.transparent\n\n    if (props.primary) {\n      schema = COLOR_SCHEMA.primary\n    }\n    if (props.secondary) {\n      schema = COLOR_SCHEMA.secondary\n    }\n\n    if (props.disabled) return schema.disabled\n    if (props.expanded) return schema.expanded\n\n    return schema.default\n  }}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Header = styled.span.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n  shouldForwardProp: shouldForwardAccordionItemCommonProp,\n})`\n  box-sizing: border-box;\n  display: flex;\n  flex-grow: 1;\n\n  & > *:not(:last-child) {\n    margin-right: 8px;\n  }\n\n  ${responsiveSize}\n`\n\nexport const Content = styled.span`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: center;\n  flex-grow: 1;\n`\n\nexport const IconAnimation = styled.span.withConfig<{ up: boolean }>({\n  shouldForwardProp: (propKey) => propKey !== 'up',\n})`\n  box-sizing: border-box;\n  display: flex;\n  align-self: flex-start;\n  flex-shrink: 0;\n  transition-property: transform;\n  transition-duration: 250ms;\n  transform-origin: center;\n  @media (prefers-reduced-motion: reduce) {\n    transition-duration: 0ms;\n  }\n  ${(props) => `\n    transform: rotate(${props.up ? 180 : 0}deg);\n  `}\n`\n\nexport const Details = styled.div.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n  shouldForwardProp: shouldForwardAccordionItemCommonProp,\n})`\n  box-sizing: border-box;\n\n  ${responsiveSize}\n`\n"],"names":["shouldForwardAccordionItemProp","createShouldForwardProp","propKey","includes","shouldForwardAccordionItemCommonProp","Heading","styled","h3","withConfig","displayName","componentId","focus","padding","template","palette","backgroundColor","headerColor","headerBackgroundColor","hover","headerColorHover","COLOR_SCHEMA","primary","default","css","props","theme","colors","headerColorExpanded","transparent","expanded","headerBackgroundColorExpanded","backgroundColorExpanded","disabled","headerColorDisabled","headerBackgroundColorDisabled","backgroundColorDisabled","secondary","Panel","div","Button","button","Root","section","shouldForwardProp","borderRadius","loading","schema","responsiveSize","responsiveMargin","Header","span","Content","IconAnimation","up","Details"],"mappings":"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"}

package/components/AccordionItem/style.mjs

@@ -1,2 +1,2 @@
-import styled,{css}from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';const shouldForwardAccordionItemProp=createShouldForwardProp((e=>!['expanded','disabled','loading','borderRadius'].includes(e)));const shouldForwardAccordionItemCommonProp=createShouldForwardProp();const Heading=styled.h3.withConfig({displayName:"AccordionItem__Heading",componentId:"ui__sc-7h1z5c-0"})(["box-sizing:border-box;display:flex;margin:0;padding:","px;border-radius:inherit;font:inherit;transition-property:color;transition-duration:150ms;transition-timing-function:ease-in;"],focus.padding);const template=e=>`\n  background-color: ${e.backgroundColor};\n\n  & ${Heading} {\n    color: ${e.headerColor};\n    background-color: ${e.headerBackgroundColor};\n  }\n  & ${Heading}:hover {\n    color: ${e.headerColorHover};\n  }\n`;const COLOR_SCHEMA={primary:{default:css(["",""],(e=>template({headerColor:e.palette.headerColor??e.theme.colors['content-onmain-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColor??e.theme.colors['bg-onmain-primary']}))),expanded:css(["",""],(e=>template({headerColor:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColorExpanded??e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorExpanded??e.palette.backgroundColor??e.theme.colors['bg-onmain-primary']}))),disabled:css(["",""],(e=>template({headerColor:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerColorHover:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerBackgroundColor:e.palette.headerBackgroundColorDisabled??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorDisabled??e.theme.colors['bg-onmain-primary']})))},secondary:{default:css(["",""],(e=>template({headerColor:e.palette.headerColor??e.theme.colors['content-onmain-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColor??e.theme.colors['bg-onmain-secondary']}))),expanded:css(["",""],(e=>template({headerColor:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColorExpanded??e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorExpanded??e.palette.backgroundColor??e.theme.colors['bg-onmain-secondary']}))),disabled:css(["",""],(e=>template({headerColor:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerColorHover:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerBackgroundColor:e.palette.headerBackgroundColorDisabled??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorDisabled??e.theme.colors['bg-onmain-secondary']})))},transparent:{default:css(["",""],(e=>template({headerColor:e.palette.headerColor??e.theme.colors['content-onmain-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColor??e.theme.colors.transparent}))),expanded:css(["",""],(e=>template({headerColor:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColorExpanded??e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorExpanded??e.palette.backgroundColor??e.theme.colors.transparent}))),disabled:css(["",""],(e=>template({headerColor:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerColorHover:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerBackgroundColor:e.palette.headerBackgroundColorDisabled??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorDisabled??e.theme.colors.transparent})))}};const Panel=styled.div.withConfig({displayName:"AccordionItem__Panel",componentId:"ui__sc-7h1z5c-1"})(["box-sizing:border-box;overflow:hidden;transition-property:opacity;"]);const Button=styled.button.withConfig({displayName:"AccordionItem__Button",componentId:"ui__sc-7h1z5c-2"})(["box-sizing:border-box;display:flex;flex-grow:1;appearance:none;border:none;margin:0;padding:0;color:inherit;background-color:transparent;font:inherit;cursor:inherit;text-align:left;",""],focus);const Root=styled.section.withConfig({shouldForwardProp:shouldForwardAccordionItemProp}).withConfig({displayName:"AccordionItem__Root",componentId:"ui__sc-7h1z5c-3"})(["box-sizing:border-box;display:grid;transition-property:grid-template-rows;&,& > ","{transition-timing-function:cubic-bezier(0.42,0,0.75,1);transition-duration:250ms;}@media (prefers-reduced-motion:reduce){transition-duration:0ms;}"," "," "," "," ",""],Panel,(e=>e.expanded?`\n        grid-template-rows: 0fr 1fr;\n        & > ${Panel} {\n          opacity: 1;\n        }\n      `:`\n        grid-template-rows: 0fr 0fr;\n        & > ${Panel} {\n          opacity: 0;\n        }\n      `),(e=>`\n    border-radius: ${e.borderRadius}px;\n    \n    & ${Button} {\n      border-radius: ${e.borderRadius>focus.padding?e.borderRadius-focus.padding:0}px;\n    }\n    \n    & ${Heading} {\n      cursor: ${e.loading?'wait':e.disabled?'not-allowed':'pointer'};\n    }\n  `),(e=>{let o=COLOR_SCHEMA.transparent;return e.primary&&(o=COLOR_SCHEMA.primary),e.secondary&&(o=COLOR_SCHEMA.secondary),e.disabled?o.disabled:e.expanded?o.expanded:o.default}),responsiveSize,responsiveMargin);const Header=styled.span.withConfig({shouldForwardProp:shouldForwardAccordionItemCommonProp}).withConfig({displayName:"AccordionItem__Header",componentId:"ui__sc-7h1z5c-4"})(["box-sizing:border-box;display:flex;flex-grow:1;& > *:not(:last-child){margin-right:8px;}",""],responsiveSize);const Content=styled.span.withConfig({displayName:"AccordionItem__Content",componentId:"ui__sc-7h1z5c-5"})(["box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;align-self:center;flex-grow:1;"]);const IconAnimation=styled.span.withConfig({shouldForwardProp:e=>e!=='up'}).withConfig({displayName:"AccordionItem__IconAnimation",componentId:"ui__sc-7h1z5c-6"})(["box-sizing:border-box;display:flex;align-self:flex-start;flex-shrink:0;transition-property:transform;transition-duration:250ms;transform-origin:center;@media (prefers-reduced-motion:reduce){transition-duration:0ms;}",""],(e=>`\n    transform: rotate(${e.up?180:0}deg);\n  `));const Details=styled.div.withConfig({shouldForwardProp:shouldForwardAccordionItemCommonProp}).withConfig({displayName:"AccordionItem__Details",componentId:"ui__sc-7h1z5c-7"})(["box-sizing:border-box;",""],responsiveSize);export{Button,Content,Details,Header,Heading,IconAnimation,Panel,Root};
+import styled,{css}from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardAccordionItemProp=createShouldForwardProp((e=>!['expanded','disabled','loading','borderRadius'].includes(e)));const shouldForwardAccordionItemCommonProp=createShouldForwardProp();const Heading=styled.h3.withConfig({displayName:"AccordionItem__Heading",componentId:"ui__sc-7h1z5c-0"})(["box-sizing:border-box;display:flex;margin:0;padding:","px;border-radius:inherit;font:inherit;transition-property:color;transition-duration:150ms;transition-timing-function:ease-in;"],focus.padding);const template=e=>`\n  background-color: ${e.backgroundColor};\n\n  & ${Heading} {\n    color: ${e.headerColor};\n    background-color: ${e.headerBackgroundColor};\n  }\n  ${hover(`color: ${e.headerColorHover};`,`& ${Heading}:hover`)}\n`;const COLOR_SCHEMA={primary:{default:css(["",""],(e=>template({headerColor:e.palette.headerColor??e.theme.colors['content-onmain-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColor??e.theme.colors['bg-onmain-primary']}))),expanded:css(["",""],(e=>template({headerColor:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColorExpanded??e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorExpanded??e.palette.backgroundColor??e.theme.colors['bg-onmain-primary']}))),disabled:css(["",""],(e=>template({headerColor:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerColorHover:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerBackgroundColor:e.palette.headerBackgroundColorDisabled??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorDisabled??e.theme.colors['bg-onmain-primary']})))},secondary:{default:css(["",""],(e=>template({headerColor:e.palette.headerColor??e.theme.colors['content-onmain-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColor??e.theme.colors['bg-onmain-secondary']}))),expanded:css(["",""],(e=>template({headerColor:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColorExpanded??e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorExpanded??e.palette.backgroundColor??e.theme.colors['bg-onmain-secondary']}))),disabled:css(["",""],(e=>template({headerColor:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerColorHover:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerBackgroundColor:e.palette.headerBackgroundColorDisabled??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorDisabled??e.theme.colors['bg-onmain-secondary']})))},transparent:{default:css(["",""],(e=>template({headerColor:e.palette.headerColor??e.theme.colors['content-onmain-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColor??e.theme.colors.transparent}))),expanded:css(["",""],(e=>template({headerColor:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerColorHover:e.palette.headerColorExpanded??e.palette.headerColor??e.theme.colors['content-brand-primary'],headerBackgroundColor:e.palette.headerBackgroundColorExpanded??e.palette.headerBackgroundColor??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorExpanded??e.palette.backgroundColor??e.theme.colors.transparent}))),disabled:css(["",""],(e=>template({headerColor:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerColorHover:e.palette.headerColorDisabled??e.theme.colors['content-disabled'],headerBackgroundColor:e.palette.headerBackgroundColorDisabled??e.theme.colors.transparent,backgroundColor:e.palette.backgroundColorDisabled??e.theme.colors.transparent})))}};const Panel=styled.div.withConfig({displayName:"AccordionItem__Panel",componentId:"ui__sc-7h1z5c-1"})(["box-sizing:border-box;overflow:hidden;transition-property:opacity;"]);const Button=styled.button.withConfig({displayName:"AccordionItem__Button",componentId:"ui__sc-7h1z5c-2"})(["box-sizing:border-box;display:flex;flex-grow:1;appearance:none;border:none;margin:0;padding:0;color:inherit;background-color:transparent;font:inherit;cursor:inherit;text-align:left;",""],focus);const Root=styled.section.withConfig({shouldForwardProp:shouldForwardAccordionItemProp}).withConfig({displayName:"AccordionItem__Root",componentId:"ui__sc-7h1z5c-3"})(["box-sizing:border-box;display:grid;transition-property:grid-template-rows;&,& > ","{transition-timing-function:cubic-bezier(0.42,0,0.75,1);transition-duration:250ms;}@media (prefers-reduced-motion:reduce){transition-duration:0ms;}"," "," "," "," ",""],Panel,(e=>e.expanded?`\n        grid-template-rows: 0fr 1fr;\n        & > ${Panel} {\n          opacity: 1;\n        }\n      `:`\n        grid-template-rows: 0fr 0fr;\n        & > ${Panel} {\n          opacity: 0;\n        }\n      `),(e=>`\n    border-radius: ${e.borderRadius}px;\n    \n    & ${Button} {\n      border-radius: ${e.borderRadius>focus.padding?e.borderRadius-focus.padding:0}px;\n    }\n    \n    & ${Heading} {\n      cursor: ${e.loading?'wait':e.disabled?'not-allowed':'pointer'};\n    }\n  `),(e=>{let o=COLOR_SCHEMA.transparent;return e.primary&&(o=COLOR_SCHEMA.primary),e.secondary&&(o=COLOR_SCHEMA.secondary),e.disabled?o.disabled:e.expanded?o.expanded:o.default}),responsiveSize,responsiveMargin);const Header=styled.span.withConfig({shouldForwardProp:shouldForwardAccordionItemCommonProp}).withConfig({displayName:"AccordionItem__Header",componentId:"ui__sc-7h1z5c-4"})(["box-sizing:border-box;display:flex;flex-grow:1;& > *:not(:last-child){margin-right:8px;}",""],responsiveSize);const Content=styled.span.withConfig({displayName:"AccordionItem__Content",componentId:"ui__sc-7h1z5c-5"})(["box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;align-self:center;flex-grow:1;"]);const IconAnimation=styled.span.withConfig({shouldForwardProp:e=>e!=='up'}).withConfig({displayName:"AccordionItem__IconAnimation",componentId:"ui__sc-7h1z5c-6"})(["box-sizing:border-box;display:flex;align-self:flex-start;flex-shrink:0;transition-property:transform;transition-duration:250ms;transform-origin:center;@media (prefers-reduced-motion:reduce){transition-duration:0ms;}",""],(e=>`\n    transform: rotate(${e.up?180:0}deg);\n  `));const Details=styled.div.withConfig({shouldForwardProp:shouldForwardAccordionItemCommonProp}).withConfig({displayName:"AccordionItem__Details",componentId:"ui__sc-7h1z5c-7"})(["box-sizing:border-box;",""],responsiveSize);export{Button,Content,Details,Header,Heading,IconAnimation,Panel,Root};
 //# sourceMappingURL=style.mjs.map

package/components/AccordionItem/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/AccordionItem/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { ResponsiveSizeProps, ResponsiveSizeInterpolationProps } from 'shared/interfaces'\nimport type { Size, AccordionItemPalette, StyledAccordionItemProps } from './types'\n\nconst shouldForwardAccordionItemProp = createShouldForwardProp(\n  (propKey) => !['expanded', 'disabled', 'loading', 'borderRadius'].includes(propKey)\n)\n\nconst shouldForwardAccordionItemCommonProp = createShouldForwardProp()\n\nexport const Heading = styled.h3`\n  box-sizing: border-box;\n  display: flex;\n  margin: 0;\n  padding: ${focus.padding}px;\n  border-radius: inherit;\n  font: inherit;\n  transition-property: color;\n  transition-duration: 150ms;\n  transition-timing-function: ease-in;\n`\n\nconst template = (palette: AccordionItemPalette) => `\n  background-color: ${palette.backgroundColor};\n\n  & ${Heading} {\n    color: ${palette.headerColor};\n    background-color: ${palette.headerBackgroundColor};\n  }\n  & ${Heading}:hover {\n    color: ${palette.headerColorHover};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  primary: {\n    default: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColor ?? props.theme.colors['content-onmain-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor: props.palette.headerBackgroundColor ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n        })}\n    `,\n    expanded: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor:\n            props.palette.headerBackgroundColorExpanded ??\n            props.palette.headerBackgroundColor ??\n            props.theme.colors.transparent,\n          backgroundColor:\n            props.palette.backgroundColorExpanded ??\n            props.palette.backgroundColor ??\n            props.theme.colors['bg-onmain-primary'],\n        })}\n    `,\n    disabled: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerColorHover: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerBackgroundColor: props.palette.headerBackgroundColorDisabled ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColorDisabled ?? props.theme.colors['bg-onmain-primary'],\n        })}\n    `,\n  },\n  secondary: {\n    default: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColor ?? props.theme.colors['content-onmain-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor: props.palette.headerBackgroundColor ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-secondary'],\n        })}\n    `,\n    expanded: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor:\n            props.palette.headerBackgroundColorExpanded ??\n            props.palette.headerBackgroundColor ??\n            props.theme.colors.transparent,\n          backgroundColor:\n            props.palette.backgroundColorExpanded ??\n            props.palette.backgroundColor ??\n            props.theme.colors['bg-onmain-secondary'],\n        })}\n    `,\n    disabled: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerColorHover: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerBackgroundColor: props.palette.headerBackgroundColorDisabled ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColorDisabled ?? props.theme.colors['bg-onmain-secondary'],\n        })}\n    `,\n  },\n  transparent: {\n    default: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColor ?? props.theme.colors['content-onmain-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor: props.palette.headerBackgroundColor ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColor ?? props.theme.colors.transparent,\n        })}\n    `,\n    expanded: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor:\n            props.palette.headerBackgroundColorExpanded ??\n            props.palette.headerBackgroundColor ??\n            props.theme.colors.transparent,\n          backgroundColor:\n            props.palette.backgroundColorExpanded ?? props.palette.backgroundColor ?? props.theme.colors.transparent,\n        })}\n    `,\n    disabled: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerColorHover: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerBackgroundColor: props.palette.headerBackgroundColorDisabled ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColorDisabled ?? props.theme.colors.transparent,\n        })}\n    `,\n  },\n}\n\nexport const Panel = styled.div`\n  box-sizing: border-box;\n  overflow: hidden;\n  transition-property: opacity;\n`\n\nexport const Button = styled.button`\n  box-sizing: border-box;\n  display: flex;\n  flex-grow: 1;\n  appearance: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  color: inherit;\n  background-color: transparent;\n  font: inherit;\n  cursor: inherit;\n  text-align: left;\n\n  ${focus}\n`\n\nexport const Root = styled.section.withConfig<StyledAccordionItemProps>({\n  shouldForwardProp: shouldForwardAccordionItemProp,\n})`\n  box-sizing: border-box;\n  display: grid;\n  transition-property: grid-template-rows;\n\n  &,\n  & > ${Panel} {\n    transition-timing-function: cubic-bezier(0.42, 0, 0.75, 1);\n    transition-duration: 250ms;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    transition-duration: 0ms;\n  }\n\n  ${(props) =>\n    props.expanded\n      ? `\n        grid-template-rows: 0fr 1fr;\n        & > ${Panel} {\n          opacity: 1;\n        }\n      `\n      : `\n        grid-template-rows: 0fr 0fr;\n        & > ${Panel} {\n          opacity: 0;\n        }\n      `}\n\n  ${(props) => `\n    border-radius: ${props.borderRadius}px;\n    \n    & ${Button} {\n      border-radius: ${props.borderRadius > focus.padding ? props.borderRadius - focus.padding : 0}px;\n    }\n    \n    & ${Heading} {\n      cursor: ${props.loading ? 'wait' : props.disabled ? 'not-allowed' : 'pointer'};\n    }\n  `}\n\n  ${(props) => {\n    let schema = COLOR_SCHEMA.transparent\n\n    if (props.primary) {\n      schema = COLOR_SCHEMA.primary\n    }\n    if (props.secondary) {\n      schema = COLOR_SCHEMA.secondary\n    }\n\n    if (props.disabled) return schema.disabled\n    if (props.expanded) return schema.expanded\n\n    return schema.default\n  }}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Header = styled.span.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n  shouldForwardProp: shouldForwardAccordionItemCommonProp,\n})`\n  box-sizing: border-box;\n  display: flex;\n  flex-grow: 1;\n\n  & > *:not(:last-child) {\n    margin-right: 8px;\n  }\n\n  ${responsiveSize}\n`\n\nexport const Content = styled.span`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: center;\n  flex-grow: 1;\n`\n\nexport const IconAnimation = styled.span.withConfig<{ up: boolean }>({\n  shouldForwardProp: (propKey) => propKey !== 'up',\n})`\n  box-sizing: border-box;\n  display: flex;\n  align-self: flex-start;\n  flex-shrink: 0;\n  transition-property: transform;\n  transition-duration: 250ms;\n  transform-origin: center;\n  @media (prefers-reduced-motion: reduce) {\n    transition-duration: 0ms;\n  }\n  ${(props) => `\n    transform: rotate(${props.up ? 180 : 0}deg);\n  `}\n`\n\nexport const Details = styled.div.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n  shouldForwardProp: shouldForwardAccordionItemCommonProp,\n})`\n  box-sizing: border-box;\n\n  ${responsiveSize}\n`\n"],"names":["shouldForwardAccordionItemProp","createShouldForwardProp","propKey","includes","shouldForwardAccordionItemCommonProp","Heading","styled","h3","withConfig","displayName","componentId","focus","padding","template","palette","backgroundColor","headerColor","headerBackgroundColor","headerColorHover","COLOR_SCHEMA","primary","default","css","props","theme","colors","headerColorExpanded","transparent","expanded","headerBackgroundColorExpanded","backgroundColorExpanded","disabled","headerColorDisabled","headerBackgroundColorDisabled","backgroundColorDisabled","secondary","Panel","div","Button","button","Root","section","shouldForwardProp","borderRadius","loading","schema","responsiveSize","responsiveMargin","Header","span","Content","IconAnimation","up","Details"],"mappings":"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"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/AccordionItem/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { ResponsiveSizeProps, ResponsiveSizeInterpolationProps } from 'shared/interfaces'\nimport { hover } from 'mixins/hover'\nimport type { Size, AccordionItemPalette, StyledAccordionItemProps } from './types'\n\nconst shouldForwardAccordionItemProp = createShouldForwardProp(\n  (propKey) => !['expanded', 'disabled', 'loading', 'borderRadius'].includes(propKey)\n)\n\nconst shouldForwardAccordionItemCommonProp = createShouldForwardProp()\n\nexport const Heading = styled.h3`\n  box-sizing: border-box;\n  display: flex;\n  margin: 0;\n  padding: ${focus.padding}px;\n  border-radius: inherit;\n  font: inherit;\n  transition-property: color;\n  transition-duration: 150ms;\n  transition-timing-function: ease-in;\n`\n\nconst template = (palette: AccordionItemPalette) => `\n  background-color: ${palette.backgroundColor};\n\n  & ${Heading} {\n    color: ${palette.headerColor};\n    background-color: ${palette.headerBackgroundColor};\n  }\n  ${hover(`color: ${palette.headerColorHover};`, `& ${Heading}:hover`)}\n`\n\nconst COLOR_SCHEMA = {\n  primary: {\n    default: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColor ?? props.theme.colors['content-onmain-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor: props.palette.headerBackgroundColor ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n        })}\n    `,\n    expanded: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor:\n            props.palette.headerBackgroundColorExpanded ??\n            props.palette.headerBackgroundColor ??\n            props.theme.colors.transparent,\n          backgroundColor:\n            props.palette.backgroundColorExpanded ??\n            props.palette.backgroundColor ??\n            props.theme.colors['bg-onmain-primary'],\n        })}\n    `,\n    disabled: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerColorHover: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerBackgroundColor: props.palette.headerBackgroundColorDisabled ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColorDisabled ?? props.theme.colors['bg-onmain-primary'],\n        })}\n    `,\n  },\n  secondary: {\n    default: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColor ?? props.theme.colors['content-onmain-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor: props.palette.headerBackgroundColor ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-secondary'],\n        })}\n    `,\n    expanded: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor:\n            props.palette.headerBackgroundColorExpanded ??\n            props.palette.headerBackgroundColor ??\n            props.theme.colors.transparent,\n          backgroundColor:\n            props.palette.backgroundColorExpanded ??\n            props.palette.backgroundColor ??\n            props.theme.colors['bg-onmain-secondary'],\n        })}\n    `,\n    disabled: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerColorHover: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerBackgroundColor: props.palette.headerBackgroundColorDisabled ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColorDisabled ?? props.theme.colors['bg-onmain-secondary'],\n        })}\n    `,\n  },\n  transparent: {\n    default: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColor ?? props.theme.colors['content-onmain-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor: props.palette.headerBackgroundColor ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColor ?? props.theme.colors.transparent,\n        })}\n    `,\n    expanded: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerColorHover:\n            props.palette.headerColorExpanded ??\n            props.palette.headerColor ??\n            props.theme.colors['content-brand-primary'],\n          headerBackgroundColor:\n            props.palette.headerBackgroundColorExpanded ??\n            props.palette.headerBackgroundColor ??\n            props.theme.colors.transparent,\n          backgroundColor:\n            props.palette.backgroundColorExpanded ?? props.palette.backgroundColor ?? props.theme.colors.transparent,\n        })}\n    `,\n    disabled: css<StyledAccordionItemProps>`\n      ${(props) =>\n        template({\n          headerColor: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerColorHover: props.palette.headerColorDisabled ?? props.theme.colors['content-disabled'],\n          headerBackgroundColor: props.palette.headerBackgroundColorDisabled ?? props.theme.colors.transparent,\n          backgroundColor: props.palette.backgroundColorDisabled ?? props.theme.colors.transparent,\n        })}\n    `,\n  },\n}\n\nexport const Panel = styled.div`\n  box-sizing: border-box;\n  overflow: hidden;\n  transition-property: opacity;\n`\n\nexport const Button = styled.button`\n  box-sizing: border-box;\n  display: flex;\n  flex-grow: 1;\n  appearance: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  color: inherit;\n  background-color: transparent;\n  font: inherit;\n  cursor: inherit;\n  text-align: left;\n\n  ${focus}\n`\n\nexport const Root = styled.section.withConfig<StyledAccordionItemProps>({\n  shouldForwardProp: shouldForwardAccordionItemProp,\n})`\n  box-sizing: border-box;\n  display: grid;\n  transition-property: grid-template-rows;\n\n  &,\n  & > ${Panel} {\n    transition-timing-function: cubic-bezier(0.42, 0, 0.75, 1);\n    transition-duration: 250ms;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    transition-duration: 0ms;\n  }\n\n  ${(props) =>\n    props.expanded\n      ? `\n        grid-template-rows: 0fr 1fr;\n        & > ${Panel} {\n          opacity: 1;\n        }\n      `\n      : `\n        grid-template-rows: 0fr 0fr;\n        & > ${Panel} {\n          opacity: 0;\n        }\n      `}\n\n  ${(props) => `\n    border-radius: ${props.borderRadius}px;\n    \n    & ${Button} {\n      border-radius: ${props.borderRadius > focus.padding ? props.borderRadius - focus.padding : 0}px;\n    }\n    \n    & ${Heading} {\n      cursor: ${props.loading ? 'wait' : props.disabled ? 'not-allowed' : 'pointer'};\n    }\n  `}\n\n  ${(props) => {\n    let schema = COLOR_SCHEMA.transparent\n\n    if (props.primary) {\n      schema = COLOR_SCHEMA.primary\n    }\n    if (props.secondary) {\n      schema = COLOR_SCHEMA.secondary\n    }\n\n    if (props.disabled) return schema.disabled\n    if (props.expanded) return schema.expanded\n\n    return schema.default\n  }}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Header = styled.span.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n  shouldForwardProp: shouldForwardAccordionItemCommonProp,\n})`\n  box-sizing: border-box;\n  display: flex;\n  flex-grow: 1;\n\n  & > *:not(:last-child) {\n    margin-right: 8px;\n  }\n\n  ${responsiveSize}\n`\n\nexport const Content = styled.span`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: center;\n  flex-grow: 1;\n`\n\nexport const IconAnimation = styled.span.withConfig<{ up: boolean }>({\n  shouldForwardProp: (propKey) => propKey !== 'up',\n})`\n  box-sizing: border-box;\n  display: flex;\n  align-self: flex-start;\n  flex-shrink: 0;\n  transition-property: transform;\n  transition-duration: 250ms;\n  transform-origin: center;\n  @media (prefers-reduced-motion: reduce) {\n    transition-duration: 0ms;\n  }\n  ${(props) => `\n    transform: rotate(${props.up ? 180 : 0}deg);\n  `}\n`\n\nexport const Details = styled.div.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n  shouldForwardProp: shouldForwardAccordionItemCommonProp,\n})`\n  box-sizing: border-box;\n\n  ${responsiveSize}\n`\n"],"names":["shouldForwardAccordionItemProp","createShouldForwardProp","propKey","includes","shouldForwardAccordionItemCommonProp","Heading","styled","h3","withConfig","displayName","componentId","focus","padding","template","palette","backgroundColor","headerColor","headerBackgroundColor","hover","headerColorHover","COLOR_SCHEMA","primary","default","css","props","theme","colors","headerColorExpanded","transparent","expanded","headerBackgroundColorExpanded","backgroundColorExpanded","disabled","headerColorDisabled","headerBackgroundColorDisabled","backgroundColorDisabled","secondary","Panel","div","Button","button","Root","section","shouldForwardProp","borderRadius","loading","schema","responsiveSize","responsiveMargin","Header","span","Content","IconAnimation","up","Details"],"mappings":"+TASA,MAAMA,+BAAiCC,yBACpCC,IAAa,CAAC,WAAY,WAAY,UAAW,gBAAgBC,SAASD,KAG7E,MAAME,qCAAuCH,gCAEhCI,QAAUC,OAAOC,GAAEC,WAAA,CAAAC,YAAA,yBAAAC,YAAA,mBAATJ,CAIVK,CAAAA,uDAAAA,iIAAAA,MAAMC,SAQnB,MAAMC,SAAYC,GAAkC,yBAC9BA,EAAQC,2BAExBV,yBACOS,EAAQE,uCACGF,EAAQG,kCAE5BC,MAAM,UAAUJ,EAAQK,oBAAqB,KAAKd,qBAGtD,MAAMe,aAAe,CACnBC,QAAS,CACPC,QAASC,IAAG,CAAA,GAAA,KACPC,GACDX,SAAS,CACPG,YAAaQ,EAAMV,QAAQE,aAAeQ,EAAMC,MAAMC,OAAO,0BAC7DP,iBACEK,EAAMV,QAAQa,qBACdH,EAAMV,QAAQE,aACdQ,EAAMC,MAAMC,OAAO,yBACrBT,sBAAuBO,EAAMV,QAAQG,uBAAyBO,EAAMC,MAAMC,OAAOE,YACjFb,gBAAiBS,EAAMV,QAAQC,iBAAmBS,EAAMC,MAAMC,OAAO,yBAG3EG,SAAUN,IAAG,CAAA,GAAA,KACRC,GACDX,SAAS,CACPG,YACEQ,EAAMV,QAAQa,qBACdH,EAAMV,QAAQE,aACdQ,EAAMC,MAAMC,OAAO,yBACrBP,iBACEK,EAAMV,QAAQa,qBACdH,EAAMV,QAAQE,aACdQ,EAAMC,MAAMC,OAAO,yBACrBT,sBACEO,EAAMV,QAAQgB,+BACdN,EAAMV,QAAQG,uBACdO,EAAMC,MAAMC,OAAOE,YACrBb,gBACES,EAAMV,QAAQiB,yBACdP,EAAMV,QAAQC,iBACdS,EAAMC,MAAMC,OAAO,yBAG3BM,SAAUT,IAAG,CAAA,GAAA,KACRC,GACDX,SAAS,CACPG,YAAaQ,EAAMV,QAAQmB,qBAAuBT,EAAMC,MAAMC,OAAO,oBACrEP,iBAAkBK,EAAMV,QAAQmB,qBAAuBT,EAAMC,MAAMC,OAAO,oBAC1ET,sBAAuBO,EAAMV,QAAQoB,+BAAiCV,EAAMC,MAAMC,OAAOE,YACzFb,gBAAiBS,EAAMV,QAAQqB,yBAA2BX,EAAMC,MAAMC,OAAO,0BAIrFU,UAAW,CACTd,QAASC,IAAG,CAAA,GAAA,KACPC,GACDX,SAAS,CACPG,YAAaQ,EAAMV,QAAQE,aAAeQ,EAAMC,MAAMC,OAAO,0BAC7DP,iBACEK,EAAMV,QAAQa,qBACdH,EAAMV,QAAQE,aACdQ,EAAMC,MAAMC,OAAO,yBACrBT,sBAAuBO,EAAMV,QAAQG,uBAAyBO,EAAMC,MAAMC,OAAOE,YACjFb,gBAAiBS,EAAMV,QAAQC,iBAAmBS,EAAMC,MAAMC,OAAO,2BAG3EG,SAAUN,IAAG,CAAA,GAAA,KACRC,GACDX,SAAS,CACPG,YACEQ,EAAMV,QAAQa,qBACdH,EAAMV,QAAQE,aACdQ,EAAMC,MAAMC,OAAO,yBACrBP,iBACEK,EAAMV,QAAQa,qBACdH,EAAMV,QAAQE,aACdQ,EAAMC,MAAMC,OAAO,yBACrBT,sBACEO,EAAMV,QAAQgB,+BACdN,EAAMV,QAAQG,uBACdO,EAAMC,MAAMC,OAAOE,YACrBb,gBACES,EAAMV,QAAQiB,yBACdP,EAAMV,QAAQC,iBACdS,EAAMC,MAAMC,OAAO,2BAG3BM,SAAUT,IAAG,CAAA,GAAA,KACRC,GACDX,SAAS,CACPG,YAAaQ,EAAMV,QAAQmB,qBAAuBT,EAAMC,MAAMC,OAAO,oBACrEP,iBAAkBK,EAAMV,QAAQmB,qBAAuBT,EAAMC,MAAMC,OAAO,oBAC1ET,sBAAuBO,EAAMV,QAAQoB,+BAAiCV,EAAMC,MAAMC,OAAOE,YACzFb,gBAAiBS,EAAMV,QAAQqB,yBAA2BX,EAAMC,MAAMC,OAAO,4BAIrFE,YAAa,CACXN,QAASC,IAAG,CAAA,GAAA,KACPC,GACDX,SAAS,CACPG,YAAaQ,EAAMV,QAAQE,aAAeQ,EAAMC,MAAMC,OAAO,0BAC7DP,iBACEK,EAAMV,QAAQa,qBACdH,EAAMV,QAAQE,aACdQ,EAAMC,MAAMC,OAAO,yBACrBT,sBAAuBO,EAAMV,QAAQG,uBAAyBO,EAAMC,MAAMC,OAAOE,YACjFb,gBAAiBS,EAAMV,QAAQC,iBAAmBS,EAAMC,MAAMC,OAAOE,gBAG3EC,SAAUN,IAAG,CAAA,GAAA,KACRC,GACDX,SAAS,CACPG,YACEQ,EAAMV,QAAQa,qBACdH,EAAMV,QAAQE,aACdQ,EAAMC,MAAMC,OAAO,yBACrBP,iBACEK,EAAMV,QAAQa,qBACdH,EAAMV,QAAQE,aACdQ,EAAMC,MAAMC,OAAO,yBACrBT,sBACEO,EAAMV,QAAQgB,+BACdN,EAAMV,QAAQG,uBACdO,EAAMC,MAAMC,OAAOE,YACrBb,gBACES,EAAMV,QAAQiB,yBAA2BP,EAAMV,QAAQC,iBAAmBS,EAAMC,MAAMC,OAAOE,gBAGrGI,SAAUT,IAAG,CAAA,GAAA,KACRC,GACDX,SAAS,CACPG,YAAaQ,EAAMV,QAAQmB,qBAAuBT,EAAMC,MAAMC,OAAO,oBACrEP,iBAAkBK,EAAMV,QAAQmB,qBAAuBT,EAAMC,MAAMC,OAAO,oBAC1ET,sBAAuBO,EAAMV,QAAQoB,+BAAiCV,EAAMC,MAAMC,OAAOE,YACzFb,gBAAiBS,EAAMV,QAAQqB,yBAA2BX,EAAMC,MAAMC,OAAOE,wBAM1ES,MAAQ/B,OAAOgC,IAAG9B,WAAA,CAAAC,YAAA,uBAAAC,YAAA,mBAAVJ,CAIpB,CAAA,6EAEYiC,OAASjC,OAAOkC,OAAMhC,WAAA,CAAAC,YAAA,wBAAAC,YAAA,mBAAbJ,CAAa,CAAA,wLAAA,IAc/BK,OAGG,MAAM8B,KAAOnC,OAAOoC,QAAQlC,WAAqC,CACtEmC,kBAAmB3C,iCACnBQ,WAAA,CAAAC,YAAA,sBAAAC,YAAA,mBAFkBJ,CAElB,CAAA,mFAAA,sJAAA,IAAA,IAAA,IAAA,IAAA,IAMM+B,OAQHb,GACDA,EAAMK,SACF,uDAEMQ,oDAIN,uDAEMA,sDAKTb,GAAU,wBACMA,EAAMoB,gCAEnBL,kCACef,EAAMoB,aAAejC,MAAMC,QAAUY,EAAMoB,aAAejC,MAAMC,QAAU,4BAGzFP,4BACQmB,EAAMqB,QAAU,OAASrB,EAAMQ,SAAW,cAAgB,0BAIrER,IACD,IAAIsB,EAAS1B,aAAaQ,YAS1B,OAPIJ,EAAMH,UACRyB,EAAS1B,aAAaC,SAEpBG,EAAMY,YACRU,EAAS1B,aAAagB,WAGpBZ,EAAMQ,SAAiBc,EAAOd,SAC9BR,EAAMK,SAAiBiB,EAAOjB,SAE3BiB,EAAOxB,OAAO,GAGrByB,eACAC,kBAGG,MAAMC,OAAS3C,OAAO4C,KAAK1C,WAAoF,CACpHmC,kBAAmBvC,uCACnBI,WAAA,CAAAC,YAAA,wBAAAC,YAAA,mBAFoBJ,CAEpB,CAAA,2FAAA,IASEyC,sBAGSI,QAAU7C,OAAO4C,KAAI1C,WAAA,CAAAC,YAAA,yBAAAC,YAAA,mBAAXJ,CAOtB,CAAA,mHAEM,MAAM8C,cAAgB9C,OAAO4C,KAAK1C,WAA4B,CACnEmC,kBAAoBzC,GAAYA,IAAY,OAC5CM,WAAA,CAAAC,YAAA,+BAAAC,YAAA,mBAF2BJ,CAE3B,CAAA,0NAAA,KAWGkB,GAAU,2BACSA,EAAM6B,GAAK,IAAM,eAIlC,MAAMC,QAAUhD,OAAOgC,IAAI9B,WAAoF,CACpHmC,kBAAmBvC,uCACnBI,WAAA,CAAAC,YAAA,yBAAAC,YAAA,mBAFqBJ,CAErB,CAAA,yBAAA,IAGEyC"}

package/components/ActionBtn/style.js

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var display=require('../../mixins/display.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const active=styled.css(["background:",";color:",";"],(e=>e.theme.colors.onahau),(e=>e.theme.colors.accent));const notDisabled=styled.css(["&:hover{background:",";}&:active{","}"],(e=>e.theme.colors.mercury),active);const disabled=styled.css(["cursor:default;opacity:0.6;"]);const Root=styled__default.default.div.withConfig({displayName:"ActionBtn__Root",componentId:"ui__sc-1l1tbhr-0"})(["padding:4px;background:transparent;color:",";transition:background 0.4s ease-out,color 0.6s ease-out;line-height:0;cursor:pointer;border-radius:5px;& + &{margin-left:16px;}"," "," ",""],(e=>e.theme.colors.silver),(e=>e.disabled?disabled:notDisabled),(e=>e.active?active:null),(e=>e.display?display.display(e.display):styled.css(["display:inline-block;"])));exports.Root=Root;
+'use strict';var styled=require('styled-components');var display=require('../../mixins/display.js');var hover=require('../../mixins/hover.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const active=styled.css(["background:",";color:",";"],(e=>e.theme.colors.onahau),(e=>e.theme.colors.accent));const notDisabled=styled.css([""," &:active{","}"],(e=>hover.hover(`background: ${e.theme.colors.mercury}`)),active);const disabled=styled.css(["cursor:default;opacity:0.6;"]);const Root=styled__default.default.div.withConfig({displayName:"ActionBtn__Root",componentId:"ui__sc-1l1tbhr-0"})(["padding:4px;background:transparent;color:",";transition:background 0.4s ease-out,color 0.6s ease-out;line-height:0;cursor:pointer;border-radius:5px;& + &{margin-left:16px;}"," "," ",""],(e=>e.theme.colors.silver),(e=>e.disabled?disabled:notDisabled),(e=>e.active?active:null),(e=>e.display?display.display(e.display):styled.css(["display:inline-block;"])));exports.Root=Root;
 //# sourceMappingURL=style.js.map

package/components/ActionBtn/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/ActionBtn/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { display } from 'mixins/display'\nimport type { ActionBtnProps } from './ActionBtn'\n\nconst active = css`\n  background: ${(props) => props.theme.colors.onahau};\n  color: ${(props) => props.theme.colors.accent};\n`\n\nconst notDisabled = css`\n  &:hover {\n    background: ${(props) => props.theme.colors.mercury};\n  }\n  &:active {\n    ${active}\n  }\n`\n\nconst disabled = css`\n  cursor: default;\n  opacity: 0.6;\n`\n\nexport const Root = styled.div<ActionBtnProps>`\n  padding: 4px;\n  background: transparent;\n  color: ${(props) => props.theme.colors.silver};\n  transition:\n    background 0.4s ease-out,\n    color 0.6s ease-out;\n  line-height: 0;\n  cursor: pointer;\n  border-radius: 5px;\n  & + & {\n    margin-left: 16px;\n  }\n  ${(props) => (props.disabled ? disabled : notDisabled)}\n  ${(props) => (props.active ? active : null)}\n  ${(props) =>\n    props.display\n      ? display(props.display)\n      : css`\n          display: inline-block;\n        `}\n`\n"],"names":["active","css","props","theme","colors","onahau","accent","notDisabled","mercury","disabled","Root","styled","div","withConfig","displayName","componentId","silver","display"],"mappings":"iNAIA,MAAMA,OAASC,OAAGA,IAAA,CAAA,cAAA,UAAA,MACDC,GAAUA,EAAMC,MAAMC,OAAOC,SAClCH,GAAUA,EAAMC,MAAMC,OAAOE,SAGzC,MAAMC,YAAcN,OAAAA,IAAG,CAAA,sBAAA,cAAA,MAEJC,GAAUA,EAAMC,MAAMC,OAAOI,SAG1CR,QAIN,MAAMS,SAAWR,OAAGA,IAGnB,CAAA,sCAEYS,KAAOC,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,kBAAAC,YAAA,oBAAVJ,CAGRT,CAAAA,4CAAAA,mIAAAA,IAAAA,IAAAA,KAAAA,GAAUA,EAAMC,MAAMC,OAAOY,SAUpCd,GAAWA,EAAMO,SAAWA,SAAWF,cACvCL,GAAWA,EAAMF,OAASA,OAAS,OACnCE,GACDA,EAAMe,QACFA,QAAAA,QAAQf,EAAMe,SACdhB,OAAGA,IAAA,CAAA"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/ActionBtn/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { display } from 'mixins/display'\nimport { hover } from 'mixins/hover'\nimport type { ActionBtnProps } from './ActionBtn'\n\nconst active = css`\n  background: ${(props) => props.theme.colors.onahau};\n  color: ${(props) => props.theme.colors.accent};\n`\n\nconst notDisabled = css`\n  ${(props) => hover(`background: ${props.theme.colors.mercury}`)}\n  &:active {\n    ${active}\n  }\n`\n\nconst disabled = css`\n  cursor: default;\n  opacity: 0.6;\n`\n\nexport const Root = styled.div<ActionBtnProps>`\n  padding: 4px;\n  background: transparent;\n  color: ${(props) => props.theme.colors.silver};\n  transition:\n    background 0.4s ease-out,\n    color 0.6s ease-out;\n  line-height: 0;\n  cursor: pointer;\n  border-radius: 5px;\n  & + & {\n    margin-left: 16px;\n  }\n  ${(props) => (props.disabled ? disabled : notDisabled)}\n  ${(props) => (props.active ? active : null)}\n  ${(props) =>\n    props.display\n      ? display(props.display)\n      : css`\n          display: inline-block;\n        `}\n`\n"],"names":["active","css","props","theme","colors","onahau","accent","notDisabled","hover","mercury","disabled","Root","styled","div","withConfig","displayName","componentId","silver","display"],"mappings":"4PAKA,MAAMA,OAASC,OAAGA,IAAA,CAAA,cAAA,UAAA,MACDC,GAAUA,EAAMC,MAAMC,OAAOC,SAClCH,GAAUA,EAAMC,MAAMC,OAAOE,SAGzC,MAAMC,YAAcN,OAAGA,IAAA,CAAA,GAAA,aAAA,MAClBC,GAAUM,MAAKA,MAAC,eAAeN,EAAMC,MAAMC,OAAOK,YAEjDT,QAIN,MAAMU,SAAWT,OAAGA,IAGnB,CAAA,sCAEYU,KAAOC,gBAAAA,QAAOC,IAAGC,WAAA,CAAAC,YAAA,kBAAAC,YAAA,oBAAVJ,CAGRV,CAAAA,4CAAAA,mIAAAA,IAAAA,IAAAA,KAAAA,GAAUA,EAAMC,MAAMC,OAAOa,SAUpCf,GAAWA,EAAMQ,SAAWA,SAAWH,cACvCL,GAAWA,EAAMF,OAASA,OAAS,OACnCE,GACDA,EAAMgB,QACFA,QAAAA,QAAQhB,EAAMgB,SACdjB,OAAGA,IAAA,CAAA"}

package/components/ActionBtn/style.mjs

@@ -1,2 +1,2 @@
-import styled,{css}from'styled-components';import{display}from'../../mixins/display.mjs';const active=css(["background:",";color:",";"],(o=>o.theme.colors.onahau),(o=>o.theme.colors.accent));const notDisabled=css(["&:hover{background:",";}&:active{","}"],(o=>o.theme.colors.mercury),active);const disabled=css(["cursor:default;opacity:0.6;"]);const Root=styled.div.withConfig({displayName:"ActionBtn__Root",componentId:"ui__sc-1l1tbhr-0"})(["padding:4px;background:transparent;color:",";transition:background 0.4s ease-out,color 0.6s ease-out;line-height:0;cursor:pointer;border-radius:5px;& + &{margin-left:16px;}"," "," ",""],(o=>o.theme.colors.silver),(o=>o.disabled?disabled:notDisabled),(o=>o.active?active:null),(o=>o.display?display(o.display):css(["display:inline-block;"])));export{Root};
+import styled,{css}from'styled-components';import{display}from'../../mixins/display.mjs';import{hover}from'../../mixins/hover.mjs';const active=css(["background:",";color:",";"],(o=>o.theme.colors.onahau),(o=>o.theme.colors.accent));const notDisabled=css([""," &:active{","}"],(o=>hover(`background: ${o.theme.colors.mercury}`)),active);const disabled=css(["cursor:default;opacity:0.6;"]);const Root=styled.div.withConfig({displayName:"ActionBtn__Root",componentId:"ui__sc-1l1tbhr-0"})(["padding:4px;background:transparent;color:",";transition:background 0.4s ease-out,color 0.6s ease-out;line-height:0;cursor:pointer;border-radius:5px;& + &{margin-left:16px;}"," "," ",""],(o=>o.theme.colors.silver),(o=>o.disabled?disabled:notDisabled),(o=>o.active?active:null),(o=>o.display?display(o.display):css(["display:inline-block;"])));export{Root};
 //# sourceMappingURL=style.mjs.map

package/components/ActionBtn/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/ActionBtn/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { display } from 'mixins/display'\nimport type { ActionBtnProps } from './ActionBtn'\n\nconst active = css`\n  background: ${(props) => props.theme.colors.onahau};\n  color: ${(props) => props.theme.colors.accent};\n`\n\nconst notDisabled = css`\n  &:hover {\n    background: ${(props) => props.theme.colors.mercury};\n  }\n  &:active {\n    ${active}\n  }\n`\n\nconst disabled = css`\n  cursor: default;\n  opacity: 0.6;\n`\n\nexport const Root = styled.div<ActionBtnProps>`\n  padding: 4px;\n  background: transparent;\n  color: ${(props) => props.theme.colors.silver};\n  transition:\n    background 0.4s ease-out,\n    color 0.6s ease-out;\n  line-height: 0;\n  cursor: pointer;\n  border-radius: 5px;\n  & + & {\n    margin-left: 16px;\n  }\n  ${(props) => (props.disabled ? disabled : notDisabled)}\n  ${(props) => (props.active ? active : null)}\n  ${(props) =>\n    props.display\n      ? display(props.display)\n      : css`\n          display: inline-block;\n        `}\n`\n"],"names":["active","css","props","theme","colors","onahau","accent","notDisabled","mercury","disabled","Root","styled","div","withConfig","displayName","componentId","silver","display"],"mappings":"yFAIA,MAAMA,OAASC,IAAG,CAAA,cAAA,UAAA,MACDC,GAAUA,EAAMC,MAAMC,OAAOC,SAClCH,GAAUA,EAAMC,MAAMC,OAAOE,SAGzC,MAAMC,YAAcN,IAAG,CAAA,sBAAA,cAAA,MAEJC,GAAUA,EAAMC,MAAMC,OAAOI,SAG1CR,QAIN,MAAMS,SAAWR,IAGhB,CAAA,sCAEYS,KAAOC,OAAOC,IAAGC,WAAA,CAAAC,YAAA,kBAAAC,YAAA,oBAAVJ,CAGRT,CAAAA,4CAAAA,mIAAAA,IAAAA,IAAAA,KAAAA,GAAUA,EAAMC,MAAMC,OAAOY,SAUpCd,GAAWA,EAAMO,SAAWA,SAAWF,cACvCL,GAAWA,EAAMF,OAASA,OAAS,OACnCE,GACDA,EAAMe,QACFA,QAAQf,EAAMe,SACdhB,IAAG,CAAA"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/ActionBtn/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { display } from 'mixins/display'\nimport { hover } from 'mixins/hover'\nimport type { ActionBtnProps } from './ActionBtn'\n\nconst active = css`\n  background: ${(props) => props.theme.colors.onahau};\n  color: ${(props) => props.theme.colors.accent};\n`\n\nconst notDisabled = css`\n  ${(props) => hover(`background: ${props.theme.colors.mercury}`)}\n  &:active {\n    ${active}\n  }\n`\n\nconst disabled = css`\n  cursor: default;\n  opacity: 0.6;\n`\n\nexport const Root = styled.div<ActionBtnProps>`\n  padding: 4px;\n  background: transparent;\n  color: ${(props) => props.theme.colors.silver};\n  transition:\n    background 0.4s ease-out,\n    color 0.6s ease-out;\n  line-height: 0;\n  cursor: pointer;\n  border-radius: 5px;\n  & + & {\n    margin-left: 16px;\n  }\n  ${(props) => (props.disabled ? disabled : notDisabled)}\n  ${(props) => (props.active ? active : null)}\n  ${(props) =>\n    props.display\n      ? display(props.display)\n      : css`\n          display: inline-block;\n        `}\n`\n"],"names":["active","css","props","theme","colors","onahau","accent","notDisabled","hover","mercury","disabled","Root","styled","div","withConfig","displayName","componentId","silver","display"],"mappings":"mIAKA,MAAMA,OAASC,IAAG,CAAA,cAAA,UAAA,MACDC,GAAUA,EAAMC,MAAMC,OAAOC,SAClCH,GAAUA,EAAMC,MAAMC,OAAOE,SAGzC,MAAMC,YAAcN,IAAG,CAAA,GAAA,aAAA,MAClBC,GAAUM,MAAM,eAAeN,EAAMC,MAAMC,OAAOK,YAEjDT,QAIN,MAAMU,SAAWT,IAGhB,CAAA,sCAEYU,KAAOC,OAAOC,IAAGC,WAAA,CAAAC,YAAA,kBAAAC,YAAA,oBAAVJ,CAGRV,CAAAA,4CAAAA,mIAAAA,IAAAA,IAAAA,KAAAA,GAAUA,EAAMC,MAAMC,OAAOa,SAUpCf,GAAWA,EAAMQ,SAAWA,SAAWH,cACvCL,GAAWA,EAAMF,OAASA,OAAS,OACnCE,GACDA,EAAMgB,QACFA,QAAQhB,EAAMgB,SACdjB,IAAG,CAAA"}

package/components/Anchor/style.js

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var style=require('../../shared/utils/style.js');var color=require('../../mixins/color.js');var focus=require('../../mixins/focus.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var display=require('../../mixins/display.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardAnchorProp=style.createShouldForwardProp((o=>!['display','underline','onColored','verticalAlign','pseudo','wrapper'].includes(o)));const template=o=>`\n  color: ${o.color};\n  &:hover {\n    color: ${o.colorHover};\n  }\n  &:active {\n    color: ${o.color};\n  }\n  &[data-disabled="true"] {\n    color: ${o.colorDisabled};\n  }\n`;const COLOR_SCHEMA={default:styled.css(["",""],(o=>template({color:o.wrapper?'inherit':o.theme.colors.accent,colorHover:o.wrapper?'inherit':o.theme.colors.primary,colorDisabled:o.theme.colors['content-disabled'],...o.palette}))),primary:styled.css(["",""],(o=>template({color:o.theme.colors['content-link'],colorHover:tinycolor__default.default(o.theme.colors['content-link']).lighten(10).toString(),colorDisabled:o.theme.colors['content-disabled'],...o.palette}))),onColored:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],colorHover:tinycolor__default.default(o.theme.colors['content-oncolor-primary']).darken(10).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],...o.palette})))};const Root=styled__default.default.a.withConfig({shouldForwardProp:shouldForwardAnchorProp}).withConfig({displayName:"Anchor__Root",componentId:"ui__sc-1n89po4-0"})([""," "," "," "," "," "," ",""],(o=>`\n      box-sizing: border-box;\n      isolation: isolate;\n      transition-property: color;\n      transition-duration: 150ms;\n      transition-timing-function: ease-in;\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      vertical-align: ${o.verticalAlign?`${typeof o.verticalAlign=='string'?o.verticalAlign:'text-bottom'}`:'baseline'};\n      ${o.preset==='brand'?"\n              display: inline-flex;\n              align-items: center;\n              justify-content: center;\n              text-decoration: none;\n            ":`\n              display: ${o.wrapper?'block':'inline-block'};\n              text-decoration-line: ${o.underline===!0?'underline':'none'};\n              border-bottom: ${o.pseudo||typeof o.underline=='string'?`1px ${typeof o.underline=='string'?o.underline:'dashed'}`:'none'};\n            `}\n  \n  `),(o=>o.onColored?COLOR_SCHEMA.onColored:o.preset==='brand'?COLOR_SCHEMA.primary:COLOR_SCHEMA.default),focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin,(o=>o.display&&display.display(o.display)),(o=>o.color&&`color: ${color.getColor(o.color,o)};`));exports.Root=Root;
+'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var style=require('../../shared/utils/style.js');var color=require('../../mixins/color.js');var focus=require('../../mixins/focus.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var display=require('../../mixins/display.js');var hover=require('../../mixins/hover.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardAnchorProp=style.createShouldForwardProp((o=>!['display','underline','onColored','verticalAlign','pseudo','wrapper'].includes(o)));const template=o=>`\n  color: ${o.color};\n  ${hover.hover(`\n    color: ${o.colorHover};\n  `)}\n  &:active {\n    color: ${o.color};\n  }\n  &[data-disabled="true"] {\n    color: ${o.colorDisabled};\n  }\n`;const COLOR_SCHEMA={default:styled.css(["",""],(o=>template({color:o.wrapper?'inherit':o.theme.colors.accent,colorHover:o.wrapper?'inherit':o.theme.colors.primary,colorDisabled:o.theme.colors['content-disabled'],...o.palette}))),primary:styled.css(["",""],(o=>template({color:o.theme.colors['content-link'],colorHover:tinycolor__default.default(o.theme.colors['content-link']).lighten(10).toString(),colorDisabled:o.theme.colors['content-disabled'],...o.palette}))),onColored:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],colorHover:tinycolor__default.default(o.theme.colors['content-oncolor-primary']).darken(10).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],...o.palette})))};const Root=styled__default.default.a.withConfig({shouldForwardProp:shouldForwardAnchorProp}).withConfig({displayName:"Anchor__Root",componentId:"ui__sc-1n89po4-0"})([""," "," "," "," "," "," ",""],(o=>`\n      box-sizing: border-box;\n      isolation: isolate;\n      transition-property: color;\n      transition-duration: 150ms;\n      transition-timing-function: ease-in;\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      vertical-align: ${o.verticalAlign?`${typeof o.verticalAlign=='string'?o.verticalAlign:'text-bottom'}`:'baseline'};\n      ${o.preset==='brand'?"\n              display: inline-flex;\n              align-items: center;\n              justify-content: center;\n              text-decoration: none;\n            ":`\n              display: ${o.wrapper?'block':'inline-block'};\n              text-decoration-line: ${o.underline===!0?'underline':'none'};\n              border-bottom: ${o.pseudo||typeof o.underline=='string'?`1px ${typeof o.underline=='string'?o.underline:'dashed'}`:'none'};\n            `}\n  \n  `),(o=>o.onColored?COLOR_SCHEMA.onColored:o.preset==='brand'?COLOR_SCHEMA.primary:COLOR_SCHEMA.default),focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin,(o=>o.display&&display.display(o.display)),(o=>o.color&&`color: ${color.getColor(o.color,o)};`));exports.Root=Root;
 //# sourceMappingURL=style.js.map

package/components/Anchor/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Anchor/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport type { ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { getColor } from 'mixins/color'\nimport { focus } from 'mixins/focus'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { display } from 'mixins/display'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledAnchorProps, AnchorPalette } from './types'\n\nconst shouldForwardAnchorProp = createShouldForwardProp(\n  (propKey) => !['display', 'underline', 'onColored', 'verticalAlign', 'pseudo', 'wrapper'].includes(propKey)\n)\n\nconst template = (palette: AnchorPalette) => `\n  color: ${palette.color};\n  &:hover {\n    color: ${palette.colorHover};\n  }\n  &:active {\n    color: ${palette.color};\n  }\n  &[data-disabled=\"true\"] {\n    color: ${palette.colorDisabled};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  default: css<StyledAnchorProps>`\n    ${(props) =>\n      template({\n        color: props.wrapper ? 'inherit' : props.theme.colors.accent,\n        colorHover: props.wrapper ? 'inherit' : props.theme.colors.primary,\n        colorDisabled: props.theme.colors['content-disabled'],\n        ...props.palette,\n      })}\n  `,\n  primary: css<StyledAnchorProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['content-link'],\n        colorHover: tinycolor(props.theme.colors['content-link']).lighten(10).toString() as CSSColor,\n        colorDisabled: props.theme.colors['content-disabled'],\n        ...props.palette,\n      })}\n  `,\n  onColored: css<StyledAnchorProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['content-oncolor-primary'],\n        colorHover: tinycolor(props.theme.colors['content-oncolor-primary']).darken(10).toString() as CSSColor,\n        colorDisabled: props.theme.colors['content-oncolor-disabled'],\n        ...props.palette,\n      })}\n  `,\n}\n\nconst anchorStyles = (props: ThemedStyledProps<StyledAnchorProps, DefaultTheme>) => {\n  if (props.onColored) return COLOR_SCHEMA.onColored\n  return props.preset === 'brand' ? COLOR_SCHEMA.primary : COLOR_SCHEMA.default\n}\n\nexport const Root = styled.a.withConfig<StyledAnchorProps>({\n  shouldForwardProp: shouldForwardAnchorProp,\n})`\n  ${(props) => `\n      box-sizing: border-box;\n      isolation: isolate;\n      transition-property: color;\n      transition-duration: 150ms;\n      transition-timing-function: ease-in;\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n      vertical-align: ${\n        props.verticalAlign\n          ? `${typeof props.verticalAlign === 'string' ? props.verticalAlign : 'text-bottom'}`\n          : 'baseline'\n      };\n      ${\n        props.preset === 'brand'\n          ? `\n              display: inline-flex;\n              align-items: center;\n              justify-content: center;\n              text-decoration: none;\n            `\n          : `\n              display: ${props.wrapper ? 'block' : 'inline-block'};\n              text-decoration-line: ${props.underline === true ? 'underline' : 'none'};\n              border-bottom: ${\n                props.pseudo || typeof props.underline === 'string'\n                  ? `1px ${typeof props.underline === 'string' ? props.underline : 'dashed'}`\n                  : 'none'\n              };\n            `\n      }\n  \n  `}\n\n  ${anchorStyles}\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n \n  ${(props) => props.display && display(props.display)}\n  ${(props) => props.color && `color: ${getColor(props.color, props)};`}\n`\n"],"names":["shouldForwardAnchorProp","createShouldForwardProp","propKey","includes","template","palette","color","colorHover","colorDisabled","COLOR_SCHEMA","default","css","props","wrapper","theme","colors","accent","primary","tinycolor","lighten","toString","onColored","darken","Root","styled","a","withConfig","shouldForwardProp","displayName","componentId","disabled","verticalAlign","preset","underline","pseudo","focus","responsiveSize","responsiveMargin","display","getColor"],"mappings":"8iBAYA,MAAMA,wBAA0BC,MAAAA,yBAC7BC,IAAa,CAAC,UAAW,YAAa,YAAa,gBAAiB,SAAU,WAAWC,SAASD,KAGrG,MAAME,SAAYC,GAA2B,cAClCA,EAAQC,mCAEND,EAAQE,8CAGRF,EAAQC,wDAGRD,EAAQG,wBAIrB,MAAMC,aAAe,CACnBC,QAASC,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDR,SAAS,CACPE,MAAOM,EAAMC,QAAU,UAAYD,EAAME,MAAMC,OAAOC,OACtDT,WAAYK,EAAMC,QAAU,UAAYD,EAAME,MAAMC,OAAOE,QAC3DT,cAAeI,EAAME,MAAMC,OAAO,uBAC/BH,EAAMP,YAGfY,QAASN,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDR,SAAS,CACPE,MAAOM,EAAME,MAAMC,OAAO,gBAC1BR,WAAYW,mBAASR,QAACE,EAAME,MAAMC,OAAO,iBAAiBI,QAAQ,IAAIC,WACtEZ,cAAeI,EAAME,MAAMC,OAAO,uBAC/BH,EAAMP,YAGfgB,UAAWV,OAAGA,IAAA,CAAA,GAAA,KACTC,GACDR,SAAS,CACPE,MAAOM,EAAME,MAAMC,OAAO,2BAC1BR,WAAYW,mBAASR,QAACE,EAAME,MAAMC,OAAO,4BAA4BO,OAAO,IAAIF,WAChFZ,cAAeI,EAAME,MAAMC,OAAO,+BAC/BH,EAAMP,aAUV,MAAMkB,KAAOC,gBAAAA,QAAOC,EAAEC,WAA8B,CACzDC,kBAAmB3B,0BACnB0B,WAAA,CAAAE,YAAA,eAAAC,YAAA,oBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,KACGZ,GAAU,+LAMCA,EAAMkB,SAAW,cAAgB,qCAEzClB,EAAMmB,cACF,UAAUnB,EAAMmB,eAAkB,SAAWnB,EAAMmB,cAAgB,gBACnE,sBAGJnB,EAAMoB,SAAW,QACb,wKAMA,4BACapB,EAAMC,QAAU,QAAU,wDACbD,EAAMqB,aAAc,EAAO,YAAc,yCAE/DrB,EAAMsB,eAAiBtB,EAAMqB,WAAc,SACvC,cAAcrB,EAAMqB,WAAc,SAAWrB,EAAMqB,UAAY,WAC/D,oCAlCErB,GAChBA,EAAMS,UAAkBZ,aAAaY,UAClCT,EAAMoB,SAAW,QAAUvB,aAAaQ,QAAUR,aAAaC,SAwCpEyB,MAAKA,MACLC,8BACAC,iBAAAA,kBAECzB,GAAUA,EAAM0B,SAAWA,QAAOA,QAAC1B,EAAM0B,WACzC1B,GAAUA,EAAMN,OAAS,UAAUiC,eAAS3B,EAAMN,MAAOM"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Anchor/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport type { ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { getColor } from 'mixins/color'\nimport { focus } from 'mixins/focus'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { display } from 'mixins/display'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledAnchorProps, AnchorPalette } from './types'\n\nconst shouldForwardAnchorProp = createShouldForwardProp(\n  (propKey) => !['display', 'underline', 'onColored', 'verticalAlign', 'pseudo', 'wrapper'].includes(propKey)\n)\n\nconst template = (palette: AnchorPalette) => `\n  color: ${palette.color};\n  ${hover(`\n    color: ${palette.colorHover};\n  `)}\n  &:active {\n    color: ${palette.color};\n  }\n  &[data-disabled=\"true\"] {\n    color: ${palette.colorDisabled};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  default: css<StyledAnchorProps>`\n    ${(props) =>\n      template({\n        color: props.wrapper ? 'inherit' : props.theme.colors.accent,\n        colorHover: props.wrapper ? 'inherit' : props.theme.colors.primary,\n        colorDisabled: props.theme.colors['content-disabled'],\n        ...props.palette,\n      })}\n  `,\n  primary: css<StyledAnchorProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['content-link'],\n        colorHover: tinycolor(props.theme.colors['content-link']).lighten(10).toString() as CSSColor,\n        colorDisabled: props.theme.colors['content-disabled'],\n        ...props.palette,\n      })}\n  `,\n  onColored: css<StyledAnchorProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['content-oncolor-primary'],\n        colorHover: tinycolor(props.theme.colors['content-oncolor-primary']).darken(10).toString() as CSSColor,\n        colorDisabled: props.theme.colors['content-oncolor-disabled'],\n        ...props.palette,\n      })}\n  `,\n}\n\nconst anchorStyles = (props: ThemedStyledProps<StyledAnchorProps, DefaultTheme>) => {\n  if (props.onColored) return COLOR_SCHEMA.onColored\n  return props.preset === 'brand' ? COLOR_SCHEMA.primary : COLOR_SCHEMA.default\n}\n\nexport const Root = styled.a.withConfig<StyledAnchorProps>({\n  shouldForwardProp: shouldForwardAnchorProp,\n})`\n  ${(props) => `\n      box-sizing: border-box;\n      isolation: isolate;\n      transition-property: color;\n      transition-duration: 150ms;\n      transition-timing-function: ease-in;\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n      vertical-align: ${\n        props.verticalAlign\n          ? `${typeof props.verticalAlign === 'string' ? props.verticalAlign : 'text-bottom'}`\n          : 'baseline'\n      };\n      ${\n        props.preset === 'brand'\n          ? `\n              display: inline-flex;\n              align-items: center;\n              justify-content: center;\n              text-decoration: none;\n            `\n          : `\n              display: ${props.wrapper ? 'block' : 'inline-block'};\n              text-decoration-line: ${props.underline === true ? 'underline' : 'none'};\n              border-bottom: ${\n                props.pseudo || typeof props.underline === 'string'\n                  ? `1px ${typeof props.underline === 'string' ? props.underline : 'dashed'}`\n                  : 'none'\n              };\n            `\n      }\n  \n  `}\n\n  ${anchorStyles}\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n \n  ${(props) => props.display && display(props.display)}\n  ${(props) => props.color && `color: ${getColor(props.color, props)};`}\n`\n"],"names":["shouldForwardAnchorProp","createShouldForwardProp","propKey","includes","template","palette","color","hover","colorHover","colorDisabled","COLOR_SCHEMA","default","css","props","wrapper","theme","colors","accent","primary","tinycolor","lighten","toString","onColored","darken","Root","styled","a","withConfig","shouldForwardProp","displayName","componentId","disabled","verticalAlign","preset","underline","pseudo","focus","responsiveSize","responsiveMargin","display","getColor"],"mappings":"ylBAaA,MAAMA,wBAA0BC,MAAAA,yBAC7BC,IAAa,CAAC,UAAW,YAAa,YAAa,gBAAiB,SAAU,WAAWC,SAASD,KAGrG,MAAME,SAAYC,GAA2B,cAClCA,EAAQC,aACfC,MAAKA,MAAC,gBACGF,EAAQG,gDAGRH,EAAQC,wDAGRD,EAAQI,wBAIrB,MAAMC,aAAe,CACnBC,QAASC,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDT,SAAS,CACPE,MAAOO,EAAMC,QAAU,UAAYD,EAAME,MAAMC,OAAOC,OACtDT,WAAYK,EAAMC,QAAU,UAAYD,EAAME,MAAMC,OAAOE,QAC3DT,cAAeI,EAAME,MAAMC,OAAO,uBAC/BH,EAAMR,YAGfa,QAASN,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDT,SAAS,CACPE,MAAOO,EAAME,MAAMC,OAAO,gBAC1BR,WAAYW,mBAASR,QAACE,EAAME,MAAMC,OAAO,iBAAiBI,QAAQ,IAAIC,WACtEZ,cAAeI,EAAME,MAAMC,OAAO,uBAC/BH,EAAMR,YAGfiB,UAAWV,OAAGA,IAAA,CAAA,GAAA,KACTC,GACDT,SAAS,CACPE,MAAOO,EAAME,MAAMC,OAAO,2BAC1BR,WAAYW,mBAASR,QAACE,EAAME,MAAMC,OAAO,4BAA4BO,OAAO,IAAIF,WAChFZ,cAAeI,EAAME,MAAMC,OAAO,+BAC/BH,EAAMR,aAUV,MAAMmB,KAAOC,gBAAAA,QAAOC,EAAEC,WAA8B,CACzDC,kBAAmB5B,0BACnB2B,WAAA,CAAAE,YAAA,eAAAC,YAAA,oBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,KACGZ,GAAU,+LAMCA,EAAMkB,SAAW,cAAgB,qCAEzClB,EAAMmB,cACF,UAAUnB,EAAMmB,eAAkB,SAAWnB,EAAMmB,cAAgB,gBACnE,sBAGJnB,EAAMoB,SAAW,QACb,wKAMA,4BACapB,EAAMC,QAAU,QAAU,wDACbD,EAAMqB,aAAc,EAAO,YAAc,yCAE/DrB,EAAMsB,eAAiBtB,EAAMqB,WAAc,SACvC,cAAcrB,EAAMqB,WAAc,SAAWrB,EAAMqB,UAAY,WAC/D,oCAlCErB,GAChBA,EAAMS,UAAkBZ,aAAaY,UAClCT,EAAMoB,SAAW,QAAUvB,aAAaQ,QAAUR,aAAaC,SAwCpEyB,MAAKA,MACLC,8BACAC,iBAAAA,kBAECzB,GAAUA,EAAM0B,SAAWA,QAAOA,QAAC1B,EAAM0B,WACzC1B,GAAUA,EAAMP,OAAS,UAAUkC,eAAS3B,EAAMP,MAAOO"}

package/components/Anchor/style.mjs

@@ -1,2 +1,2 @@
-import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{getColor}from'../../mixins/color.mjs';import{focus}from'../../mixins/focus.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{display}from'../../mixins/display.mjs';const shouldForwardAnchorProp=createShouldForwardProp((o=>!['display','underline','onColored','verticalAlign','pseudo','wrapper'].includes(o)));const template=o=>`\n  color: ${o.color};\n  &:hover {\n    color: ${o.colorHover};\n  }\n  &:active {\n    color: ${o.color};\n  }\n  &[data-disabled="true"] {\n    color: ${o.colorDisabled};\n  }\n`;const COLOR_SCHEMA={default:css(["",""],(o=>template({color:o.wrapper?'inherit':o.theme.colors.accent,colorHover:o.wrapper?'inherit':o.theme.colors.primary,colorDisabled:o.theme.colors['content-disabled'],...o.palette}))),primary:css(["",""],(o=>template({color:o.theme.colors['content-link'],colorHover:tinycolor(o.theme.colors['content-link']).lighten(10).toString(),colorDisabled:o.theme.colors['content-disabled'],...o.palette}))),onColored:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],colorHover:tinycolor(o.theme.colors['content-oncolor-primary']).darken(10).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],...o.palette})))};const Root=styled.a.withConfig({shouldForwardProp:shouldForwardAnchorProp}).withConfig({displayName:"Anchor__Root",componentId:"ui__sc-1n89po4-0"})([""," "," "," "," "," "," ",""],(o=>`\n      box-sizing: border-box;\n      isolation: isolate;\n      transition-property: color;\n      transition-duration: 150ms;\n      transition-timing-function: ease-in;\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      vertical-align: ${o.verticalAlign?`${typeof o.verticalAlign=='string'?o.verticalAlign:'text-bottom'}`:'baseline'};\n      ${o.preset==='brand'?"\n              display: inline-flex;\n              align-items: center;\n              justify-content: center;\n              text-decoration: none;\n            ":`\n              display: ${o.wrapper?'block':'inline-block'};\n              text-decoration-line: ${o.underline===!0?'underline':'none'};\n              border-bottom: ${o.pseudo||typeof o.underline=='string'?`1px ${typeof o.underline=='string'?o.underline:'dashed'}`:'none'};\n            `}\n  \n  `),(o=>o.onColored?COLOR_SCHEMA.onColored:o.preset==='brand'?COLOR_SCHEMA.primary:COLOR_SCHEMA.default),focus,responsiveSize,responsiveMargin,(o=>o.display&&display(o.display)),(o=>o.color&&`color: ${getColor(o.color,o)};`));export{Root};
+import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{getColor}from'../../mixins/color.mjs';import{focus}from'../../mixins/focus.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{display}from'../../mixins/display.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardAnchorProp=createShouldForwardProp((o=>!['display','underline','onColored','verticalAlign','pseudo','wrapper'].includes(o)));const template=o=>`\n  color: ${o.color};\n  ${hover(`\n    color: ${o.colorHover};\n  `)}\n  &:active {\n    color: ${o.color};\n  }\n  &[data-disabled="true"] {\n    color: ${o.colorDisabled};\n  }\n`;const COLOR_SCHEMA={default:css(["",""],(o=>template({color:o.wrapper?'inherit':o.theme.colors.accent,colorHover:o.wrapper?'inherit':o.theme.colors.primary,colorDisabled:o.theme.colors['content-disabled'],...o.palette}))),primary:css(["",""],(o=>template({color:o.theme.colors['content-link'],colorHover:tinycolor(o.theme.colors['content-link']).lighten(10).toString(),colorDisabled:o.theme.colors['content-disabled'],...o.palette}))),onColored:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],colorHover:tinycolor(o.theme.colors['content-oncolor-primary']).darken(10).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],...o.palette})))};const Root=styled.a.withConfig({shouldForwardProp:shouldForwardAnchorProp}).withConfig({displayName:"Anchor__Root",componentId:"ui__sc-1n89po4-0"})([""," "," "," "," "," "," ",""],(o=>`\n      box-sizing: border-box;\n      isolation: isolate;\n      transition-property: color;\n      transition-duration: 150ms;\n      transition-timing-function: ease-in;\n      cursor: ${o.disabled?'not-allowed':'pointer'};\n      vertical-align: ${o.verticalAlign?`${typeof o.verticalAlign=='string'?o.verticalAlign:'text-bottom'}`:'baseline'};\n      ${o.preset==='brand'?"\n              display: inline-flex;\n              align-items: center;\n              justify-content: center;\n              text-decoration: none;\n            ":`\n              display: ${o.wrapper?'block':'inline-block'};\n              text-decoration-line: ${o.underline===!0?'underline':'none'};\n              border-bottom: ${o.pseudo||typeof o.underline=='string'?`1px ${typeof o.underline=='string'?o.underline:'dashed'}`:'none'};\n            `}\n  \n  `),(o=>o.onColored?COLOR_SCHEMA.onColored:o.preset==='brand'?COLOR_SCHEMA.primary:COLOR_SCHEMA.default),focus,responsiveSize,responsiveMargin,(o=>o.display&&display(o.display)),(o=>o.color&&`color: ${getColor(o.color,o)};`));export{Root};
 //# sourceMappingURL=style.mjs.map

package/components/Anchor/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/Anchor/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport type { ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { getColor } from 'mixins/color'\nimport { focus } from 'mixins/focus'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { display } from 'mixins/display'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledAnchorProps, AnchorPalette } from './types'\n\nconst shouldForwardAnchorProp = createShouldForwardProp(\n  (propKey) => !['display', 'underline', 'onColored', 'verticalAlign', 'pseudo', 'wrapper'].includes(propKey)\n)\n\nconst template = (palette: AnchorPalette) => `\n  color: ${palette.color};\n  &:hover {\n    color: ${palette.colorHover};\n  }\n  &:active {\n    color: ${palette.color};\n  }\n  &[data-disabled=\"true\"] {\n    color: ${palette.colorDisabled};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  default: css<StyledAnchorProps>`\n    ${(props) =>\n      template({\n        color: props.wrapper ? 'inherit' : props.theme.colors.accent,\n        colorHover: props.wrapper ? 'inherit' : props.theme.colors.primary,\n        colorDisabled: props.theme.colors['content-disabled'],\n        ...props.palette,\n      })}\n  `,\n  primary: css<StyledAnchorProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['content-link'],\n        colorHover: tinycolor(props.theme.colors['content-link']).lighten(10).toString() as CSSColor,\n        colorDisabled: props.theme.colors['content-disabled'],\n        ...props.palette,\n      })}\n  `,\n  onColored: css<StyledAnchorProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['content-oncolor-primary'],\n        colorHover: tinycolor(props.theme.colors['content-oncolor-primary']).darken(10).toString() as CSSColor,\n        colorDisabled: props.theme.colors['content-oncolor-disabled'],\n        ...props.palette,\n      })}\n  `,\n}\n\nconst anchorStyles = (props: ThemedStyledProps<StyledAnchorProps, DefaultTheme>) => {\n  if (props.onColored) return COLOR_SCHEMA.onColored\n  return props.preset === 'brand' ? COLOR_SCHEMA.primary : COLOR_SCHEMA.default\n}\n\nexport const Root = styled.a.withConfig<StyledAnchorProps>({\n  shouldForwardProp: shouldForwardAnchorProp,\n})`\n  ${(props) => `\n      box-sizing: border-box;\n      isolation: isolate;\n      transition-property: color;\n      transition-duration: 150ms;\n      transition-timing-function: ease-in;\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n      vertical-align: ${\n        props.verticalAlign\n          ? `${typeof props.verticalAlign === 'string' ? props.verticalAlign : 'text-bottom'}`\n          : 'baseline'\n      };\n      ${\n        props.preset === 'brand'\n          ? `\n              display: inline-flex;\n              align-items: center;\n              justify-content: center;\n              text-decoration: none;\n            `\n          : `\n              display: ${props.wrapper ? 'block' : 'inline-block'};\n              text-decoration-line: ${props.underline === true ? 'underline' : 'none'};\n              border-bottom: ${\n                props.pseudo || typeof props.underline === 'string'\n                  ? `1px ${typeof props.underline === 'string' ? props.underline : 'dashed'}`\n                  : 'none'\n              };\n            `\n      }\n  \n  `}\n\n  ${anchorStyles}\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n \n  ${(props) => props.display && display(props.display)}\n  ${(props) => props.color && `color: ${getColor(props.color, props)};`}\n`\n"],"names":["shouldForwardAnchorProp","createShouldForwardProp","propKey","includes","template","palette","color","colorHover","colorDisabled","COLOR_SCHEMA","default","css","props","wrapper","theme","colors","accent","primary","tinycolor","lighten","toString","onColored","darken","Root","styled","a","withConfig","shouldForwardProp","displayName","componentId","disabled","verticalAlign","preset","underline","pseudo","focus","responsiveSize","responsiveMargin","display","getColor"],"mappings":"kZAYA,MAAMA,wBAA0BC,yBAC7BC,IAAa,CAAC,UAAW,YAAa,YAAa,gBAAiB,SAAU,WAAWC,SAASD,KAGrG,MAAME,SAAYC,GAA2B,cAClCA,EAAQC,mCAEND,EAAQE,8CAGRF,EAAQC,wDAGRD,EAAQG,wBAIrB,MAAMC,aAAe,CACnBC,QAASC,IAAG,CAAA,GAAA,KACPC,GACDR,SAAS,CACPE,MAAOM,EAAMC,QAAU,UAAYD,EAAME,MAAMC,OAAOC,OACtDT,WAAYK,EAAMC,QAAU,UAAYD,EAAME,MAAMC,OAAOE,QAC3DT,cAAeI,EAAME,MAAMC,OAAO,uBAC/BH,EAAMP,YAGfY,QAASN,IAAG,CAAA,GAAA,KACPC,GACDR,SAAS,CACPE,MAAOM,EAAME,MAAMC,OAAO,gBAC1BR,WAAYW,UAAUN,EAAME,MAAMC,OAAO,iBAAiBI,QAAQ,IAAIC,WACtEZ,cAAeI,EAAME,MAAMC,OAAO,uBAC/BH,EAAMP,YAGfgB,UAAWV,IAAG,CAAA,GAAA,KACTC,GACDR,SAAS,CACPE,MAAOM,EAAME,MAAMC,OAAO,2BAC1BR,WAAYW,UAAUN,EAAME,MAAMC,OAAO,4BAA4BO,OAAO,IAAIF,WAChFZ,cAAeI,EAAME,MAAMC,OAAO,+BAC/BH,EAAMP,aAUV,MAAMkB,KAAOC,OAAOC,EAAEC,WAA8B,CACzDC,kBAAmB3B,0BACnB0B,WAAA,CAAAE,YAAA,eAAAC,YAAA,oBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,KACGZ,GAAU,+LAMCA,EAAMkB,SAAW,cAAgB,qCAEzClB,EAAMmB,cACF,UAAUnB,EAAMmB,eAAkB,SAAWnB,EAAMmB,cAAgB,gBACnE,sBAGJnB,EAAMoB,SAAW,QACb,wKAMA,4BACapB,EAAMC,QAAU,QAAU,wDACbD,EAAMqB,aAAc,EAAO,YAAc,yCAE/DrB,EAAMsB,eAAiBtB,EAAMqB,WAAc,SACvC,cAAcrB,EAAMqB,WAAc,SAAWrB,EAAMqB,UAAY,WAC/D,oCAlCErB,GAChBA,EAAMS,UAAkBZ,aAAaY,UAClCT,EAAMoB,SAAW,QAAUvB,aAAaQ,QAAUR,aAAaC,SAwCpEyB,MACAC,eACAC,kBAECzB,GAAUA,EAAM0B,SAAWA,QAAQ1B,EAAM0B,WACzC1B,GAAUA,EAAMN,OAAS,UAAUiC,SAAS3B,EAAMN,MAAOM"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/Anchor/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport type { ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { getColor } from 'mixins/color'\nimport { focus } from 'mixins/focus'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { display } from 'mixins/display'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledAnchorProps, AnchorPalette } from './types'\n\nconst shouldForwardAnchorProp = createShouldForwardProp(\n  (propKey) => !['display', 'underline', 'onColored', 'verticalAlign', 'pseudo', 'wrapper'].includes(propKey)\n)\n\nconst template = (palette: AnchorPalette) => `\n  color: ${palette.color};\n  ${hover(`\n    color: ${palette.colorHover};\n  `)}\n  &:active {\n    color: ${palette.color};\n  }\n  &[data-disabled=\"true\"] {\n    color: ${palette.colorDisabled};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  default: css<StyledAnchorProps>`\n    ${(props) =>\n      template({\n        color: props.wrapper ? 'inherit' : props.theme.colors.accent,\n        colorHover: props.wrapper ? 'inherit' : props.theme.colors.primary,\n        colorDisabled: props.theme.colors['content-disabled'],\n        ...props.palette,\n      })}\n  `,\n  primary: css<StyledAnchorProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['content-link'],\n        colorHover: tinycolor(props.theme.colors['content-link']).lighten(10).toString() as CSSColor,\n        colorDisabled: props.theme.colors['content-disabled'],\n        ...props.palette,\n      })}\n  `,\n  onColored: css<StyledAnchorProps>`\n    ${(props) =>\n      template({\n        color: props.theme.colors['content-oncolor-primary'],\n        colorHover: tinycolor(props.theme.colors['content-oncolor-primary']).darken(10).toString() as CSSColor,\n        colorDisabled: props.theme.colors['content-oncolor-disabled'],\n        ...props.palette,\n      })}\n  `,\n}\n\nconst anchorStyles = (props: ThemedStyledProps<StyledAnchorProps, DefaultTheme>) => {\n  if (props.onColored) return COLOR_SCHEMA.onColored\n  return props.preset === 'brand' ? COLOR_SCHEMA.primary : COLOR_SCHEMA.default\n}\n\nexport const Root = styled.a.withConfig<StyledAnchorProps>({\n  shouldForwardProp: shouldForwardAnchorProp,\n})`\n  ${(props) => `\n      box-sizing: border-box;\n      isolation: isolate;\n      transition-property: color;\n      transition-duration: 150ms;\n      transition-timing-function: ease-in;\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n      vertical-align: ${\n        props.verticalAlign\n          ? `${typeof props.verticalAlign === 'string' ? props.verticalAlign : 'text-bottom'}`\n          : 'baseline'\n      };\n      ${\n        props.preset === 'brand'\n          ? `\n              display: inline-flex;\n              align-items: center;\n              justify-content: center;\n              text-decoration: none;\n            `\n          : `\n              display: ${props.wrapper ? 'block' : 'inline-block'};\n              text-decoration-line: ${props.underline === true ? 'underline' : 'none'};\n              border-bottom: ${\n                props.pseudo || typeof props.underline === 'string'\n                  ? `1px ${typeof props.underline === 'string' ? props.underline : 'dashed'}`\n                  : 'none'\n              };\n            `\n      }\n  \n  `}\n\n  ${anchorStyles}\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n \n  ${(props) => props.display && display(props.display)}\n  ${(props) => props.color && `color: ${getColor(props.color, props)};`}\n`\n"],"names":["shouldForwardAnchorProp","createShouldForwardProp","propKey","includes","template","palette","color","hover","colorHover","colorDisabled","COLOR_SCHEMA","default","css","props","wrapper","theme","colors","accent","primary","tinycolor","lighten","toString","onColored","darken","Root","styled","a","withConfig","shouldForwardProp","displayName","componentId","disabled","verticalAlign","preset","underline","pseudo","focus","responsiveSize","responsiveMargin","display","getColor"],"mappings":"4bAaA,MAAMA,wBAA0BC,yBAC7BC,IAAa,CAAC,UAAW,YAAa,YAAa,gBAAiB,SAAU,WAAWC,SAASD,KAGrG,MAAME,SAAYC,GAA2B,cAClCA,EAAQC,aACfC,MAAM,gBACGF,EAAQG,gDAGRH,EAAQC,wDAGRD,EAAQI,wBAIrB,MAAMC,aAAe,CACnBC,QAASC,IAAG,CAAA,GAAA,KACPC,GACDT,SAAS,CACPE,MAAOO,EAAMC,QAAU,UAAYD,EAAME,MAAMC,OAAOC,OACtDT,WAAYK,EAAMC,QAAU,UAAYD,EAAME,MAAMC,OAAOE,QAC3DT,cAAeI,EAAME,MAAMC,OAAO,uBAC/BH,EAAMR,YAGfa,QAASN,IAAG,CAAA,GAAA,KACPC,GACDT,SAAS,CACPE,MAAOO,EAAME,MAAMC,OAAO,gBAC1BR,WAAYW,UAAUN,EAAME,MAAMC,OAAO,iBAAiBI,QAAQ,IAAIC,WACtEZ,cAAeI,EAAME,MAAMC,OAAO,uBAC/BH,EAAMR,YAGfiB,UAAWV,IAAG,CAAA,GAAA,KACTC,GACDT,SAAS,CACPE,MAAOO,EAAME,MAAMC,OAAO,2BAC1BR,WAAYW,UAAUN,EAAME,MAAMC,OAAO,4BAA4BO,OAAO,IAAIF,WAChFZ,cAAeI,EAAME,MAAMC,OAAO,+BAC/BH,EAAMR,aAUV,MAAMmB,KAAOC,OAAOC,EAAEC,WAA8B,CACzDC,kBAAmB5B,0BACnB2B,WAAA,CAAAE,YAAA,eAAAC,YAAA,oBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,KACGZ,GAAU,+LAMCA,EAAMkB,SAAW,cAAgB,qCAEzClB,EAAMmB,cACF,UAAUnB,EAAMmB,eAAkB,SAAWnB,EAAMmB,cAAgB,gBACnE,sBAGJnB,EAAMoB,SAAW,QACb,wKAMA,4BACapB,EAAMC,QAAU,QAAU,wDACbD,EAAMqB,aAAc,EAAO,YAAc,yCAE/DrB,EAAMsB,eAAiBtB,EAAMqB,WAAc,SACvC,cAAcrB,EAAMqB,WAAc,SAAWrB,EAAMqB,UAAY,WAC/D,oCAlCErB,GAChBA,EAAMS,UAAkBZ,aAAaY,UAClCT,EAAMoB,SAAW,QAAUvB,aAAaQ,QAAUR,aAAaC,SAwCpEyB,MACAC,eACAC,kBAECzB,GAAUA,EAAM0B,SAAWA,QAAQ1B,EAAM0B,WACzC1B,GAAUA,EAAMP,OAAS,UAAUkC,SAAS3B,EAAMP,MAAOO"}

package/components/Arrow/style.js

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardArrowProp=style.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:styled.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__default.default(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:styled.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__default.default(o.theme.colors['bg-oncolor-primary']).darken(6).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-constant'],backgroundColorActive:tinycolor__default.default(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:styled.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:styled.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__default.default(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:styled.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:styled.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:styled.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__default.default.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.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);exports.Root=Root;
+'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var hover=require('../../mixins/hover.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardArrowProp=style.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.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:styled.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__default.default(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:styled.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__default.default(o.theme.colors['bg-oncolor-primary']).darken(6).toString(),borderColorHover:o.theme.colors.transparent,colorActive:o.theme.colors['content-oncolor-constant'],backgroundColorActive:tinycolor__default.default(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:styled.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:styled.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__default.default(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:styled.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.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:styled.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.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:styled.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.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__default.default.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.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);exports.Root=Root;
 //# sourceMappingURL=style.js.map

package/components/Arrow/style.js.map

@@ -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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"}
+{"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 { hover } from 'mixins/hover'\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","hover","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

@@ -1,2 +1,2 @@
-import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';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';import{hover}from'../../mixins/hover.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