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

package/components/TabList/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 responsiveLayout=require('../../mixins/responsive-layout.js');var focus=require('../../mixins/focus.js');var Divider=require('../Divider/Divider.js');var Icon=require('../Icon/Icon.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const filterLayoutProps=o=>!['layout','layoutXXS','layoutXS','layoutS','layoutM','layoutL','layoutXL','layouts'].includes(o);const shouldForwardTabListProp=style.createShouldForwardProp(filterLayoutProps);const shouldForwardTabListPanelProp=style.createShouldForwardProp((o=>!['borderRadius'].includes(o)));const Control=styled__default.default.div.withConfig({shouldForwardProp:o=>!['hidden'].includes(o)}).withConfig({displayName:"TabList__Control",componentId:"ui__sc-1cz7fqp-0"})(["box-sizing:border-box;position:relative;display:flex;align-items:center;padding:","px;pointer-events:auto;",""],focus.focus.padding,(o=>o.hidden&&"\n      & * {\n        visibility: hidden !important;\n      }\n    "));const ScrollFading=styled__default.default.div.withConfig({shouldForwardProp:o=>!['after'].includes(o)}).withConfig({displayName:"TabList__ScrollFading",componentId:"ui__sc-1cz7fqp-1"})(["box-sizing:border-box;position:relative;width:35px;",""],(o=>`\n    background-image: linear-gradient(${o.after?-90:90}deg, currentcolor, transparent);\n  `));const Floats=styled__default.default.div.withConfig({shouldForwardProp:o=>!['after'].includes(o)}).withConfig({displayName:"TabList__Floats",componentId:"ui__sc-1cz7fqp-2"})(["box-sizing:border-box;display:flex;align-items:stretch;position:absolute;pointer-events:none;top:0;bottom:0;"," ",""],(o=>o.after?'right: 0;':'left: 0;'),(o=>o.hidden&&"\n      &,\n      & * {\n        visibility: hidden !important;\n      }\n    "));const Addon=styled__default.default.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"TabList__Addon",componentId:"ui__sc-1cz7fqp-3"})(["box-sizing:border-box;display:flex;position:relative;align-items:center;padding:","px;",""],focus.focus.padding,responsiveLayout.responsiveLayout);const DividerPositioned=styled__default.default(Divider.Divider).withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"TabList__DividerPositioned",componentId:"ui__sc-1cz7fqp-4"})(["position:absolute;right:0;left:0;",""],responsiveLayout.responsiveLayout);const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardTabListProp}).withConfig({displayName:"TabList__Root",componentId:"ui__sc-1cz7fqp-5"})(["box-sizing:border-box;isolation:isolate;position:relative;display:flex;"," & ",",& ","{z-index:1;}& [role='tab'] [data-ui-tab-underline]::after,& [role='tab']:focus-visible,& ","{z-index:2;}& "," ","{z-index:3;}"," "," ",""],(o=>{return`\n  &,\n  & ${Control} {\n    background-color: ${(e={backgroundColor:o.palette.backgroundColor??o.theme.colors['bg-onmain-primary']}).backgroundColor};\n  }\n  & ${ScrollFading},\n  & ${ScrollFading} {\n    color: ${e.backgroundColor};\n  }\n`;var e}),ScrollFading,DividerPositioned,Addon,Floats,Control,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin,responsiveLayout.responsiveLayout);const Container=styled__default.default.div.withConfig({displayName:"TabList__Container",componentId:"ui__sc-1cz7fqp-6"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;overflow:hidden;"]);const TabsTrack=styled__default.default.div.withConfig({displayName:"TabList__TabsTrack",componentId:"ui__sc-1cz7fqp-7"})(["box-sizing:border-box;position:relative;display:flex;align-items:stretch;overflow:hidden;flex-grow:1;"]);const TrackScrollable=styled__default.default.div.withConfig({displayName:"TabList__TrackScrollable",componentId:"ui__sc-1cz7fqp-8"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;padding:","px;overflow:auto;overscroll-behavior:contain;scroll-padding-right:20px;scroll-padding-left:20px;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;height:0;width:0;}"],focus.focus.padding);const Hidden=styled__default.default.div.withConfig({displayName:"TabList__Hidden",componentId:"ui__sc-1cz7fqp-9"})(["box-sizing:border-box;display:flex;align-items:stretch;flex-grow:1;height:0;&,& *{visibility:hidden !important;}"]);const TabsHidden=styled__default.default.div.withConfig({displayName:"TabList__TabsHidden",componentId:"ui__sc-1cz7fqp-10"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;padding:","px;overflow:hidden;"],focus.focus.padding);const TabWrapper=styled__default.default.div.withConfig({displayName:"TabList__TabWrapper",componentId:"ui__sc-1cz7fqp-11"})(["box-sizing:border-box;display:flex;flex-shrink:0;"]);const List=styled__default.default.div.withConfig({displayName:"TabList__List",componentId:"ui__sc-1cz7fqp-12"})(["box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;justify-content:center;overflow:hidden;flex-grow:1;&:focus{outline:none;}"]);const Menu=styled__default.default.ul.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({displayName:"TabList__Menu",componentId:"ui__sc-1cz7fqp-13"})(["box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;appearance:none;margin:0;border-radius:12px;padding:","px;&:focus{outline:none;}",""],focus.focus.padding,(o=>{return`\n  background-color: ${(e={backgroundColor:o.palette.backgroundColor??o.theme.colors['bg-onmain-primary'],shadowColor:o.palette.shadowColor??o.theme.colors['bg-oncolor-hover']}).backgroundColor};\n  box-shadow: 0px 6px 20px ${e.shadowColor};\n`;var e}));const MenuItem=styled__default.default.li.withConfig({displayName:"TabList__MenuItem",componentId:"ui__sc-1cz7fqp-14"})(["display:flex;appearance:none;list-style-type:none;&:not(:last-child){margin-bottom:","px;}& > *{flex-grow:1;}"],focus.focus.padding);const Panel=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardTabListPanelProp}).withConfig({displayName:"TabList__Panel",componentId:"ui__sc-1cz7fqp-15"})(["box-sizing:border-box;"," "," "," ",""],(o=>`\n    border-radius: ${o.borderRadius}px;  \n  `),(o=>`\n  background-color: ${o.palette.backgroundColor??o.theme.colors['bg-onmain-primary']};\n`),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const IconAnimated=styled__default.default(Icon.Icon).withConfig({shouldForwardProp:o=>o!=='rotate'}).withConfig({displayName:"TabList__IconAnimated",componentId:"ui__sc-1cz7fqp-16"})(["transition-property:transform;transition-duration:250ms;transform-origin:center;@media (prefers-reduced-motion:reduce){transition-duration:0ms;}",""],(o=>`\n    transform: rotate(${o.rotate?180:0}deg);\n  `));exports.Addon=Addon,exports.Container=Container,exports.Control=Control,exports.DividerPositioned=DividerPositioned,exports.Floats=Floats,exports.Hidden=Hidden,exports.IconAnimated=IconAnimated,exports.List=List,exports.Menu=Menu,exports.MenuItem=MenuItem,exports.Panel=Panel,exports.Root=Root,exports.ScrollFading=ScrollFading,exports.TabWrapper=TabWrapper,exports.TabsHidden=TabsHidden,exports.TabsTrack=TabsTrack,exports.TrackScrollable=TrackScrollable;
+'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 responsiveLayout=require('../../mixins/responsive-layout.js');var focus=require('../../mixins/focus.js');var Divider=require('../Divider/Divider.js');var Icon=require('../Icon/Icon.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const filterLayoutProps=o=>!['layout','layoutXXS','layoutXS','layoutS','layoutM','layoutL','layoutXL','layouts'].includes(o);const shouldForwardTabListProp=style.createShouldForwardProp(filterLayoutProps);const shouldForwardTabListPanelProp=style.createShouldForwardProp(o=>!['borderRadius'].includes(o));const Control=styled__default.default.div.withConfig({shouldForwardProp:o=>!['hidden'].includes(o)}).withConfig({displayName:"TabList__Control",componentId:"ui__sc-1cz7fqp-0"})(["box-sizing:border-box;position:relative;display:flex;align-items:center;padding:","px;pointer-events:auto;",""],focus.focus.padding,o=>o.hidden&&"\n      & * {\n        visibility: hidden !important;\n      }\n    ");const ScrollFading=styled__default.default.div.withConfig({shouldForwardProp:o=>!['after'].includes(o)}).withConfig({displayName:"TabList__ScrollFading",componentId:"ui__sc-1cz7fqp-1"})(["box-sizing:border-box;position:relative;width:35px;",""],o=>`\n    background-image: linear-gradient(${o.after?-90:90}deg, currentcolor, transparent);\n  `);const Floats=styled__default.default.div.withConfig({shouldForwardProp:o=>!['after'].includes(o)}).withConfig({displayName:"TabList__Floats",componentId:"ui__sc-1cz7fqp-2"})(["box-sizing:border-box;display:flex;align-items:stretch;position:absolute;pointer-events:none;top:0;bottom:0;"," ",""],o=>o.after?'right: 0;':'left: 0;',o=>o.hidden&&"\n      &,\n      & * {\n        visibility: hidden !important;\n      }\n    ");const Addon=styled__default.default.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"TabList__Addon",componentId:"ui__sc-1cz7fqp-3"})(["box-sizing:border-box;display:flex;position:relative;align-items:center;padding:","px;",""],focus.focus.padding,responsiveLayout.responsiveLayout);const DividerPositioned=styled__default.default(Divider.Divider).withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"TabList__DividerPositioned",componentId:"ui__sc-1cz7fqp-4"})(["position:absolute;right:0;left:0;",""],responsiveLayout.responsiveLayout);const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardTabListProp}).withConfig({displayName:"TabList__Root",componentId:"ui__sc-1cz7fqp-5"})(["box-sizing:border-box;isolation:isolate;position:relative;display:flex;"," & ",",& ","{z-index:1;}& [role='tab'] [data-ui-tab-underline]::after,& [role='tab']:focus-visible,& ","{z-index:2;}& "," ","{z-index:3;}"," "," ",""],o=>{return`\n  &,\n  & ${Control} {\n    background-color: ${(e={backgroundColor:o.palette.backgroundColor??o.theme.colors['bg-onmain-primary']}).backgroundColor};\n  }\n  & ${ScrollFading},\n  & ${ScrollFading} {\n    color: ${e.backgroundColor};\n  }\n`;var e},ScrollFading,DividerPositioned,Addon,Floats,Control,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin,responsiveLayout.responsiveLayout);const Container=styled__default.default.div.withConfig({displayName:"TabList__Container",componentId:"ui__sc-1cz7fqp-6"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;overflow:hidden;"]);const TabsTrack=styled__default.default.div.withConfig({displayName:"TabList__TabsTrack",componentId:"ui__sc-1cz7fqp-7"})(["box-sizing:border-box;position:relative;display:flex;align-items:stretch;overflow:hidden;flex-grow:1;"]);const TrackScrollable=styled__default.default.div.withConfig({displayName:"TabList__TrackScrollable",componentId:"ui__sc-1cz7fqp-8"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;padding:","px;overflow:auto;overscroll-behavior:contain;scroll-padding-right:20px;scroll-padding-left:20px;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;height:0;width:0;}"],focus.focus.padding);const Hidden=styled__default.default.div.withConfig({displayName:"TabList__Hidden",componentId:"ui__sc-1cz7fqp-9"})(["box-sizing:border-box;display:flex;align-items:stretch;flex-grow:1;height:0;&,& *{visibility:hidden !important;}"]);const TabsHidden=styled__default.default.div.withConfig({displayName:"TabList__TabsHidden",componentId:"ui__sc-1cz7fqp-10"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;padding:","px;overflow:hidden;"],focus.focus.padding);const TabWrapper=styled__default.default.div.withConfig({displayName:"TabList__TabWrapper",componentId:"ui__sc-1cz7fqp-11"})(["box-sizing:border-box;display:flex;flex-shrink:0;"]);const List=styled__default.default.div.withConfig({displayName:"TabList__List",componentId:"ui__sc-1cz7fqp-12"})(["box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;justify-content:center;overflow:hidden;flex-grow:1;&:focus{outline:none;}"]);const Menu=styled__default.default.ul.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({displayName:"TabList__Menu",componentId:"ui__sc-1cz7fqp-13"})(["box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;appearance:none;margin:0;border-radius:12px;padding:","px;&:focus{outline:none;}",""],focus.focus.padding,o=>{return`\n  background-color: ${(e={backgroundColor:o.palette.backgroundColor??o.theme.colors['bg-onmain-primary'],shadowColor:o.palette.shadowColor??o.theme.colors['bg-oncolor-hover']}).backgroundColor};\n  box-shadow: 0px 6px 20px ${e.shadowColor};\n`;var e});const MenuItem=styled__default.default.li.withConfig({displayName:"TabList__MenuItem",componentId:"ui__sc-1cz7fqp-14"})(["display:flex;appearance:none;list-style-type:none;&:not(:last-child){margin-bottom:","px;}& > *{flex-grow:1;}"],focus.focus.padding);const Panel=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardTabListPanelProp}).withConfig({displayName:"TabList__Panel",componentId:"ui__sc-1cz7fqp-15"})(["box-sizing:border-box;"," "," "," ",""],o=>`\n    border-radius: ${o.borderRadius}px;  \n  `,o=>`\n  background-color: ${o.palette.backgroundColor??o.theme.colors['bg-onmain-primary']};\n`,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const IconAnimated=styled__default.default(Icon.Icon).withConfig({shouldForwardProp:o=>o!=='rotate'}).withConfig({displayName:"TabList__IconAnimated",componentId:"ui__sc-1cz7fqp-16"})(["transition-property:transform;transition-duration:250ms;transform-origin:center;@media (prefers-reduced-motion:reduce){transition-duration:0ms;}",""],o=>`\n    transform: rotate(${o.rotate?180:0}deg);\n  `);exports.Addon=Addon,exports.Container=Container,exports.Control=Control,exports.DividerPositioned=DividerPositioned,exports.Floats=Floats,exports.Hidden=Hidden,exports.IconAnimated=IconAnimated,exports.List=List,exports.Menu=Menu,exports.MenuItem=MenuItem,exports.Panel=Panel,exports.Root=Root,exports.ScrollFading=ScrollFading,exports.TabWrapper=TabWrapper,exports.TabsHidden=TabsHidden,exports.TabsTrack=TabsTrack,exports.TrackScrollable=TrackScrollable;
 //# sourceMappingURL=style.js.map

package/components/TabList/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/TabList/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { responsiveLayout } from 'mixins/responsive-layout'\nimport { focus } from 'mixins/focus'\nimport { Icon } from 'components/Icon'\nimport { Divider } from 'components/Divider'\nimport type { ResponsiveLayoutInterpolationProps } from 'shared/interfaces'\nimport type { CSSColor } from 'shared/types'\nimport type {\n  Layout,\n  TabListPalette,\n  TabListMenuPalette,\n  TabListPanelPalette,\n  StyledTabListProps,\n  StyledTabListPanelProps,\n} from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n  !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardTabListProp = createShouldForwardProp(filterLayoutProps)\n\nconst shouldForwardTabListPanelProp = createShouldForwardProp((propKey) => !['borderRadius'].includes(propKey))\n\nexport const Control = styled.div.withConfig({\n  shouldForwardProp: (propKey) => !['hidden'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: ${focus.padding}px;\n  pointer-events: auto;\n  ${(props) =>\n    props.hidden &&\n    `\n      & * {\n        visibility: hidden !important;\n      }\n    `}\n`\n\nexport const ScrollFading = styled.div.withConfig<{ after?: boolean }>({\n  shouldForwardProp: (propKey) => !['after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  width: 35px;\n  ${(props) => `\n    background-image: linear-gradient(${props.after ? -90 : 90}deg, currentcolor, transparent);\n  `}\n`\n\nconst template = (palette: Pick<TabListPalette, 'backgroundColor'>) => `\n  &,\n  & ${Control} {\n    background-color: ${palette.backgroundColor};\n  }\n  & ${ScrollFading},\n  & ${ScrollFading} {\n    color: ${palette.backgroundColor};\n  }\n`\n\nconst templateMenu = (palette: TabListMenuPalette) => `\n  background-color: ${palette.backgroundColor};\n  box-shadow: 0px 6px 20px ${palette.shadowColor};\n`\n\nconst templatePanel = (palette: TabListPanelPalette) => `\n  background-color: ${palette.backgroundColor};\n`\n\nexport const Floats = styled.div.withConfig<{ hidden: boolean; after?: boolean }>({\n  shouldForwardProp: (propKey) => !['after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  display: flex;\n  align-items: stretch;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  bottom: 0;\n  ${(props) => (props.after ? 'right: 0;' : 'left: 0;')}\n  ${(props) =>\n    props.hidden &&\n    `\n      &,\n      & * {\n        visibility: hidden !important;\n      }\n    `}\n`\n\nexport const Addon = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  display: flex;\n  position: relative;\n  align-items: center;\n  padding: ${focus.padding}px;\n\n  ${responsiveLayout}\n`\n\nexport const DividerPositioned = styled(Divider).withConfig<ResponsiveLayoutInterpolationProps>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  position: absolute;\n  right: 0;\n  left: 0;\n\n  ${responsiveLayout}\n`\n\nexport const Root = styled.div.withConfig<StyledTabListProps>({\n  shouldForwardProp: shouldForwardTabListProp,\n})`\n  box-sizing: border-box;\n  isolation: isolate;\n  position: relative;\n  display: flex;\n\n  ${(props) =>\n    template({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n    })}\n\n  & ${ScrollFading},  \n  & ${DividerPositioned} {\n    z-index: 1;\n  }\n  & [role='tab'] [data-ui-tab-underline]::after,\n  & [role='tab']:focus-visible,\n  & ${Addon} {\n    z-index: 2;\n  }\n  & ${Floats} ${Control} {\n    z-index: 3;\n  }\n\n  ${responsiveSize}\n  ${responsiveMargin}\n  ${responsiveLayout}\n`\n\nexport const Container = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  overflow: hidden;\n`\n\nexport const TabsTrack = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  overflow: hidden;\n  flex-grow: 1;\n`\n\nexport const TrackScrollable = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  padding: ${focus.padding}px;\n  overflow: auto;\n  overscroll-behavior: contain;\n  scroll-padding-right: 20px;\n  scroll-padding-left: 20px;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n    height: 0;\n    width: 0;\n  }\n`\n\nexport const Hidden = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: stretch;\n  flex-grow: 1;\n  height: 0;\n  &,\n  & * {\n    visibility: hidden !important;\n  }\n`\n\nexport const TabsHidden = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  padding: ${focus.padding}px;\n  overflow: hidden;\n`\n\nexport const TabWrapper = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n`\n\nexport const List = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n  overflow: hidden;\n  flex-grow: 1;\n  &:focus {\n    outline: none;\n  }\n`\n\nexport const Menu = styled.ul.withConfig<{\n  palette: {\n    backgroundColor?: CSSColor\n    shadowColor?: CSSColor\n  }\n}>({\n  shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  appearance: none;\n  margin: 0;\n  border-radius: 12px;\n  padding: ${focus.padding}px;\n  &:focus {\n    outline: none;\n  }\n\n  ${(props) =>\n    templateMenu({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n      shadowColor: props.palette.shadowColor ?? props.theme.colors['bg-oncolor-hover'],\n    })}\n`\n\nexport const MenuItem = styled.li`\n  display: flex;\n  appearance: none;\n  list-style-type: none;\n  &:not(:last-child) {\n    margin-bottom: ${focus.padding}px;\n  }\n  & > * {\n    flex-grow: 1;\n  }\n`\n\nexport const Panel = styled.div.withConfig<StyledTabListPanelProps>({\n  shouldForwardProp: shouldForwardTabListPanelProp,\n})`\n  box-sizing: border-box;\n\n  ${(props) => `\n    border-radius: ${props.borderRadius}px;  \n  `}\n\n  ${(props) =>\n    templatePanel({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n    })}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const IconAnimated = styled(Icon).withConfig<{ rotate: boolean }>({\n  shouldForwardProp: (propKey) => propKey !== 'rotate',\n})`\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.rotate ? 180 : 0}deg);\n  `}\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardTabListProp","createShouldForwardProp","shouldForwardTabListPanelProp","Control","styled","div","withConfig","shouldForwardProp","displayName","componentId","focus","padding","props","hidden","ScrollFading","after","Floats","Addon","responsiveLayout","DividerPositioned","Divider","Root","template","palette","backgroundColor","theme","colors","responsiveSize","responsiveMargin","Container","TabsTrack","TrackScrollable","Hidden","TabsHidden","TabWrapper","List","Menu","ul","templateMenu","shadowColor","MenuItem","li","Panel","borderRadius","IconAnimated","Icon","rotate"],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/TabList/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { responsiveLayout } from 'mixins/responsive-layout'\nimport { focus } from 'mixins/focus'\nimport { Icon } from 'components/Icon'\nimport { Divider } from 'components/Divider'\nimport type { ResponsiveLayoutInterpolationProps } from 'shared/interfaces'\nimport type { CSSColor } from 'shared/types'\nimport type {\n  Layout,\n  TabListPalette,\n  TabListMenuPalette,\n  TabListPanelPalette,\n  StyledTabListProps,\n  StyledTabListPanelProps,\n} from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n  !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardTabListProp = createShouldForwardProp(filterLayoutProps)\n\nconst shouldForwardTabListPanelProp = createShouldForwardProp((propKey) => !['borderRadius'].includes(propKey))\n\nexport const Control = styled.div.withConfig({\n  shouldForwardProp: (propKey) => !['hidden'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: ${focus.padding}px;\n  pointer-events: auto;\n  ${(props) =>\n    props.hidden &&\n    `\n      & * {\n        visibility: hidden !important;\n      }\n    `}\n`\n\nexport const ScrollFading = styled.div.withConfig<{ after?: boolean }>({\n  shouldForwardProp: (propKey) => !['after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  width: 35px;\n  ${(props) => `\n    background-image: linear-gradient(${props.after ? -90 : 90}deg, currentcolor, transparent);\n  `}\n`\n\nconst template = (palette: Pick<TabListPalette, 'backgroundColor'>) => `\n  &,\n  & ${Control} {\n    background-color: ${palette.backgroundColor};\n  }\n  & ${ScrollFading},\n  & ${ScrollFading} {\n    color: ${palette.backgroundColor};\n  }\n`\n\nconst templateMenu = (palette: TabListMenuPalette) => `\n  background-color: ${palette.backgroundColor};\n  box-shadow: 0px 6px 20px ${palette.shadowColor};\n`\n\nconst templatePanel = (palette: TabListPanelPalette) => `\n  background-color: ${palette.backgroundColor};\n`\n\nexport const Floats = styled.div.withConfig<{ hidden: boolean; after?: boolean }>({\n  shouldForwardProp: (propKey) => !['after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  display: flex;\n  align-items: stretch;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  bottom: 0;\n  ${(props) => (props.after ? 'right: 0;' : 'left: 0;')}\n  ${(props) =>\n    props.hidden &&\n    `\n      &,\n      & * {\n        visibility: hidden !important;\n      }\n    `}\n`\n\nexport const Addon = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  display: flex;\n  position: relative;\n  align-items: center;\n  padding: ${focus.padding}px;\n\n  ${responsiveLayout}\n`\n\nexport const DividerPositioned = styled(Divider).withConfig<ResponsiveLayoutInterpolationProps>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  position: absolute;\n  right: 0;\n  left: 0;\n\n  ${responsiveLayout}\n`\n\nexport const Root = styled.div.withConfig<StyledTabListProps>({\n  shouldForwardProp: shouldForwardTabListProp,\n})`\n  box-sizing: border-box;\n  isolation: isolate;\n  position: relative;\n  display: flex;\n\n  ${(props) =>\n    template({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n    })}\n\n  & ${ScrollFading},  \n  & ${DividerPositioned} {\n    z-index: 1;\n  }\n  & [role='tab'] [data-ui-tab-underline]::after,\n  & [role='tab']:focus-visible,\n  & ${Addon} {\n    z-index: 2;\n  }\n  & ${Floats} ${Control} {\n    z-index: 3;\n  }\n\n  ${responsiveSize}\n  ${responsiveMargin}\n  ${responsiveLayout}\n`\n\nexport const Container = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  overflow: hidden;\n`\n\nexport const TabsTrack = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  overflow: hidden;\n  flex-grow: 1;\n`\n\nexport const TrackScrollable = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  padding: ${focus.padding}px;\n  overflow: auto;\n  overscroll-behavior: contain;\n  scroll-padding-right: 20px;\n  scroll-padding-left: 20px;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n    height: 0;\n    width: 0;\n  }\n`\n\nexport const Hidden = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: stretch;\n  flex-grow: 1;\n  height: 0;\n  &,\n  & * {\n    visibility: hidden !important;\n  }\n`\n\nexport const TabsHidden = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  padding: ${focus.padding}px;\n  overflow: hidden;\n`\n\nexport const TabWrapper = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n`\n\nexport const List = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n  overflow: hidden;\n  flex-grow: 1;\n  &:focus {\n    outline: none;\n  }\n`\n\nexport const Menu = styled.ul.withConfig<{\n  palette: {\n    backgroundColor?: CSSColor\n    shadowColor?: CSSColor\n  }\n}>({\n  shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  appearance: none;\n  margin: 0;\n  border-radius: 12px;\n  padding: ${focus.padding}px;\n  &:focus {\n    outline: none;\n  }\n\n  ${(props) =>\n    templateMenu({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n      shadowColor: props.palette.shadowColor ?? props.theme.colors['bg-oncolor-hover'],\n    })}\n`\n\nexport const MenuItem = styled.li`\n  display: flex;\n  appearance: none;\n  list-style-type: none;\n  &:not(:last-child) {\n    margin-bottom: ${focus.padding}px;\n  }\n  & > * {\n    flex-grow: 1;\n  }\n`\n\nexport const Panel = styled.div.withConfig<StyledTabListPanelProps>({\n  shouldForwardProp: shouldForwardTabListPanelProp,\n})`\n  box-sizing: border-box;\n\n  ${(props) => `\n    border-radius: ${props.borderRadius}px;  \n  `}\n\n  ${(props) =>\n    templatePanel({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n    })}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const IconAnimated = styled(Icon).withConfig<{ rotate: boolean }>({\n  shouldForwardProp: (propKey) => propKey !== 'rotate',\n})`\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.rotate ? 180 : 0}deg);\n  `}\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardTabListProp","createShouldForwardProp","shouldForwardTabListPanelProp","Control","styled","div","withConfig","shouldForwardProp","displayName","componentId","focus","padding","props","hidden","ScrollFading","after","Floats","Addon","responsiveLayout","DividerPositioned","Divider","Root","template","palette","backgroundColor","theme","colors","responsiveSize","responsiveMargin","Container","TabsTrack","TrackScrollable","Hidden","TabsHidden","TabWrapper","List","Menu","ul","templateMenu","shadowColor","MenuItem","li","Panel","borderRadius","IconAnimated","Icon","rotate"],"mappings":"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"}

package/components/TabList/style.mjs

@@ -1,2 +1,2 @@
-import styled 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{responsiveLayout}from'../../mixins/responsive-layout.mjs';import{focus}from'../../mixins/focus.mjs';import{Divider}from'../Divider/Divider.mjs';import{Icon}from'../Icon/Icon.mjs';const filterLayoutProps=o=>!['layout','layoutXXS','layoutXS','layoutS','layoutM','layoutL','layoutXL','layouts'].includes(o);const shouldForwardTabListProp=createShouldForwardProp(filterLayoutProps);const shouldForwardTabListPanelProp=createShouldForwardProp((o=>!['borderRadius'].includes(o)));const Control=styled.div.withConfig({shouldForwardProp:o=>!['hidden'].includes(o)}).withConfig({displayName:"TabList__Control",componentId:"ui__sc-1cz7fqp-0"})(["box-sizing:border-box;position:relative;display:flex;align-items:center;padding:","px;pointer-events:auto;",""],focus.padding,(o=>o.hidden&&"\n      & * {\n        visibility: hidden !important;\n      }\n    "));const ScrollFading=styled.div.withConfig({shouldForwardProp:o=>!['after'].includes(o)}).withConfig({displayName:"TabList__ScrollFading",componentId:"ui__sc-1cz7fqp-1"})(["box-sizing:border-box;position:relative;width:35px;",""],(o=>`\n    background-image: linear-gradient(${o.after?-90:90}deg, currentcolor, transparent);\n  `));const Floats=styled.div.withConfig({shouldForwardProp:o=>!['after'].includes(o)}).withConfig({displayName:"TabList__Floats",componentId:"ui__sc-1cz7fqp-2"})(["box-sizing:border-box;display:flex;align-items:stretch;position:absolute;pointer-events:none;top:0;bottom:0;"," ",""],(o=>o.after?'right: 0;':'left: 0;'),(o=>o.hidden&&"\n      &,\n      & * {\n        visibility: hidden !important;\n      }\n    "));const Addon=styled.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"TabList__Addon",componentId:"ui__sc-1cz7fqp-3"})(["box-sizing:border-box;display:flex;position:relative;align-items:center;padding:","px;",""],focus.padding,responsiveLayout);const DividerPositioned=styled(Divider).withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"TabList__DividerPositioned",componentId:"ui__sc-1cz7fqp-4"})(["position:absolute;right:0;left:0;",""],responsiveLayout);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardTabListProp}).withConfig({displayName:"TabList__Root",componentId:"ui__sc-1cz7fqp-5"})(["box-sizing:border-box;isolation:isolate;position:relative;display:flex;"," & ",",& ","{z-index:1;}& [role='tab'] [data-ui-tab-underline]::after,& [role='tab']:focus-visible,& ","{z-index:2;}& "," ","{z-index:3;}"," "," ",""],(o=>{return`\n  &,\n  & ${Control} {\n    background-color: ${(i={backgroundColor:o.palette.backgroundColor??o.theme.colors['bg-onmain-primary']}).backgroundColor};\n  }\n  & ${ScrollFading},\n  & ${ScrollFading} {\n    color: ${i.backgroundColor};\n  }\n`;var i}),ScrollFading,DividerPositioned,Addon,Floats,Control,responsiveSize,responsiveMargin,responsiveLayout);const Container=styled.div.withConfig({displayName:"TabList__Container",componentId:"ui__sc-1cz7fqp-6"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;overflow:hidden;"]);const TabsTrack=styled.div.withConfig({displayName:"TabList__TabsTrack",componentId:"ui__sc-1cz7fqp-7"})(["box-sizing:border-box;position:relative;display:flex;align-items:stretch;overflow:hidden;flex-grow:1;"]);const TrackScrollable=styled.div.withConfig({displayName:"TabList__TrackScrollable",componentId:"ui__sc-1cz7fqp-8"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;padding:","px;overflow:auto;overscroll-behavior:contain;scroll-padding-right:20px;scroll-padding-left:20px;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;height:0;width:0;}"],focus.padding);const Hidden=styled.div.withConfig({displayName:"TabList__Hidden",componentId:"ui__sc-1cz7fqp-9"})(["box-sizing:border-box;display:flex;align-items:stretch;flex-grow:1;height:0;&,& *{visibility:hidden !important;}"]);const TabsHidden=styled.div.withConfig({displayName:"TabList__TabsHidden",componentId:"ui__sc-1cz7fqp-10"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;padding:","px;overflow:hidden;"],focus.padding);const TabWrapper=styled.div.withConfig({displayName:"TabList__TabWrapper",componentId:"ui__sc-1cz7fqp-11"})(["box-sizing:border-box;display:flex;flex-shrink:0;"]);const List=styled.div.withConfig({displayName:"TabList__List",componentId:"ui__sc-1cz7fqp-12"})(["box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;justify-content:center;overflow:hidden;flex-grow:1;&:focus{outline:none;}"]);const Menu=styled.ul.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({displayName:"TabList__Menu",componentId:"ui__sc-1cz7fqp-13"})(["box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;appearance:none;margin:0;border-radius:12px;padding:","px;&:focus{outline:none;}",""],focus.padding,(o=>{return`\n  background-color: ${(i={backgroundColor:o.palette.backgroundColor??o.theme.colors['bg-onmain-primary'],shadowColor:o.palette.shadowColor??o.theme.colors['bg-oncolor-hover']}).backgroundColor};\n  box-shadow: 0px 6px 20px ${i.shadowColor};\n`;var i}));const MenuItem=styled.li.withConfig({displayName:"TabList__MenuItem",componentId:"ui__sc-1cz7fqp-14"})(["display:flex;appearance:none;list-style-type:none;&:not(:last-child){margin-bottom:","px;}& > *{flex-grow:1;}"],focus.padding);const Panel=styled.div.withConfig({shouldForwardProp:shouldForwardTabListPanelProp}).withConfig({displayName:"TabList__Panel",componentId:"ui__sc-1cz7fqp-15"})(["box-sizing:border-box;"," "," "," ",""],(o=>`\n    border-radius: ${o.borderRadius}px;  \n  `),(o=>`\n  background-color: ${o.palette.backgroundColor??o.theme.colors['bg-onmain-primary']};\n`),responsiveSize,responsiveMargin);const IconAnimated=styled(Icon).withConfig({shouldForwardProp:o=>o!=='rotate'}).withConfig({displayName:"TabList__IconAnimated",componentId:"ui__sc-1cz7fqp-16"})(["transition-property:transform;transition-duration:250ms;transform-origin:center;@media (prefers-reduced-motion:reduce){transition-duration:0ms;}",""],(o=>`\n    transform: rotate(${o.rotate?180:0}deg);\n  `));export{Addon,Container,Control,DividerPositioned,Floats,Hidden,IconAnimated,List,Menu,MenuItem,Panel,Root,ScrollFading,TabWrapper,TabsHidden,TabsTrack,TrackScrollable};
+import styled 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{responsiveLayout}from'../../mixins/responsive-layout.mjs';import{focus}from'../../mixins/focus.mjs';import{Divider}from'../Divider/Divider.mjs';import{Icon}from'../Icon/Icon.mjs';const filterLayoutProps=o=>!['layout','layoutXXS','layoutXS','layoutS','layoutM','layoutL','layoutXL','layouts'].includes(o);const shouldForwardTabListProp=createShouldForwardProp(filterLayoutProps);const shouldForwardTabListPanelProp=createShouldForwardProp(o=>!['borderRadius'].includes(o));const Control=styled.div.withConfig({shouldForwardProp:o=>!['hidden'].includes(o)}).withConfig({displayName:"TabList__Control",componentId:"ui__sc-1cz7fqp-0"})(["box-sizing:border-box;position:relative;display:flex;align-items:center;padding:","px;pointer-events:auto;",""],focus.padding,o=>o.hidden&&"\n      & * {\n        visibility: hidden !important;\n      }\n    ");const ScrollFading=styled.div.withConfig({shouldForwardProp:o=>!['after'].includes(o)}).withConfig({displayName:"TabList__ScrollFading",componentId:"ui__sc-1cz7fqp-1"})(["box-sizing:border-box;position:relative;width:35px;",""],o=>`\n    background-image: linear-gradient(${o.after?-90:90}deg, currentcolor, transparent);\n  `);const Floats=styled.div.withConfig({shouldForwardProp:o=>!['after'].includes(o)}).withConfig({displayName:"TabList__Floats",componentId:"ui__sc-1cz7fqp-2"})(["box-sizing:border-box;display:flex;align-items:stretch;position:absolute;pointer-events:none;top:0;bottom:0;"," ",""],o=>o.after?'right: 0;':'left: 0;',o=>o.hidden&&"\n      &,\n      & * {\n        visibility: hidden !important;\n      }\n    ");const Addon=styled.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"TabList__Addon",componentId:"ui__sc-1cz7fqp-3"})(["box-sizing:border-box;display:flex;position:relative;align-items:center;padding:","px;",""],focus.padding,responsiveLayout);const DividerPositioned=styled(Divider).withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"TabList__DividerPositioned",componentId:"ui__sc-1cz7fqp-4"})(["position:absolute;right:0;left:0;",""],responsiveLayout);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardTabListProp}).withConfig({displayName:"TabList__Root",componentId:"ui__sc-1cz7fqp-5"})(["box-sizing:border-box;isolation:isolate;position:relative;display:flex;"," & ",",& ","{z-index:1;}& [role='tab'] [data-ui-tab-underline]::after,& [role='tab']:focus-visible,& ","{z-index:2;}& "," ","{z-index:3;}"," "," ",""],o=>{return`\n  &,\n  & ${Control} {\n    background-color: ${(i={backgroundColor:o.palette.backgroundColor??o.theme.colors['bg-onmain-primary']}).backgroundColor};\n  }\n  & ${ScrollFading},\n  & ${ScrollFading} {\n    color: ${i.backgroundColor};\n  }\n`;var i},ScrollFading,DividerPositioned,Addon,Floats,Control,responsiveSize,responsiveMargin,responsiveLayout);const Container=styled.div.withConfig({displayName:"TabList__Container",componentId:"ui__sc-1cz7fqp-6"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;overflow:hidden;"]);const TabsTrack=styled.div.withConfig({displayName:"TabList__TabsTrack",componentId:"ui__sc-1cz7fqp-7"})(["box-sizing:border-box;position:relative;display:flex;align-items:stretch;overflow:hidden;flex-grow:1;"]);const TrackScrollable=styled.div.withConfig({displayName:"TabList__TrackScrollable",componentId:"ui__sc-1cz7fqp-8"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;padding:","px;overflow:auto;overscroll-behavior:contain;scroll-padding-right:20px;scroll-padding-left:20px;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;height:0;width:0;}"],focus.padding);const Hidden=styled.div.withConfig({displayName:"TabList__Hidden",componentId:"ui__sc-1cz7fqp-9"})(["box-sizing:border-box;display:flex;align-items:stretch;flex-grow:1;height:0;&,& *{visibility:hidden !important;}"]);const TabsHidden=styled.div.withConfig({displayName:"TabList__TabsHidden",componentId:"ui__sc-1cz7fqp-10"})(["box-sizing:border-box;display:flex;align-items:center;flex-grow:1;padding:","px;overflow:hidden;"],focus.padding);const TabWrapper=styled.div.withConfig({displayName:"TabList__TabWrapper",componentId:"ui__sc-1cz7fqp-11"})(["box-sizing:border-box;display:flex;flex-shrink:0;"]);const List=styled.div.withConfig({displayName:"TabList__List",componentId:"ui__sc-1cz7fqp-12"})(["box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;justify-content:center;overflow:hidden;flex-grow:1;&:focus{outline:none;}"]);const Menu=styled.ul.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({displayName:"TabList__Menu",componentId:"ui__sc-1cz7fqp-13"})(["box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;appearance:none;margin:0;border-radius:12px;padding:","px;&:focus{outline:none;}",""],focus.padding,o=>{return`\n  background-color: ${(i={backgroundColor:o.palette.backgroundColor??o.theme.colors['bg-onmain-primary'],shadowColor:o.palette.shadowColor??o.theme.colors['bg-oncolor-hover']}).backgroundColor};\n  box-shadow: 0px 6px 20px ${i.shadowColor};\n`;var i});const MenuItem=styled.li.withConfig({displayName:"TabList__MenuItem",componentId:"ui__sc-1cz7fqp-14"})(["display:flex;appearance:none;list-style-type:none;&:not(:last-child){margin-bottom:","px;}& > *{flex-grow:1;}"],focus.padding);const Panel=styled.div.withConfig({shouldForwardProp:shouldForwardTabListPanelProp}).withConfig({displayName:"TabList__Panel",componentId:"ui__sc-1cz7fqp-15"})(["box-sizing:border-box;"," "," "," ",""],o=>`\n    border-radius: ${o.borderRadius}px;  \n  `,o=>`\n  background-color: ${o.palette.backgroundColor??o.theme.colors['bg-onmain-primary']};\n`,responsiveSize,responsiveMargin);const IconAnimated=styled(Icon).withConfig({shouldForwardProp:o=>o!=='rotate'}).withConfig({displayName:"TabList__IconAnimated",componentId:"ui__sc-1cz7fqp-16"})(["transition-property:transform;transition-duration:250ms;transform-origin:center;@media (prefers-reduced-motion:reduce){transition-duration:0ms;}",""],o=>`\n    transform: rotate(${o.rotate?180:0}deg);\n  `);export{Addon,Container,Control,DividerPositioned,Floats,Hidden,IconAnimated,List,Menu,MenuItem,Panel,Root,ScrollFading,TabWrapper,TabsHidden,TabsTrack,TrackScrollable};
 //# sourceMappingURL=style.mjs.map

package/components/TabList/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/TabList/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { responsiveLayout } from 'mixins/responsive-layout'\nimport { focus } from 'mixins/focus'\nimport { Icon } from 'components/Icon'\nimport { Divider } from 'components/Divider'\nimport type { ResponsiveLayoutInterpolationProps } from 'shared/interfaces'\nimport type { CSSColor } from 'shared/types'\nimport type {\n  Layout,\n  TabListPalette,\n  TabListMenuPalette,\n  TabListPanelPalette,\n  StyledTabListProps,\n  StyledTabListPanelProps,\n} from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n  !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardTabListProp = createShouldForwardProp(filterLayoutProps)\n\nconst shouldForwardTabListPanelProp = createShouldForwardProp((propKey) => !['borderRadius'].includes(propKey))\n\nexport const Control = styled.div.withConfig({\n  shouldForwardProp: (propKey) => !['hidden'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: ${focus.padding}px;\n  pointer-events: auto;\n  ${(props) =>\n    props.hidden &&\n    `\n      & * {\n        visibility: hidden !important;\n      }\n    `}\n`\n\nexport const ScrollFading = styled.div.withConfig<{ after?: boolean }>({\n  shouldForwardProp: (propKey) => !['after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  width: 35px;\n  ${(props) => `\n    background-image: linear-gradient(${props.after ? -90 : 90}deg, currentcolor, transparent);\n  `}\n`\n\nconst template = (palette: Pick<TabListPalette, 'backgroundColor'>) => `\n  &,\n  & ${Control} {\n    background-color: ${palette.backgroundColor};\n  }\n  & ${ScrollFading},\n  & ${ScrollFading} {\n    color: ${palette.backgroundColor};\n  }\n`\n\nconst templateMenu = (palette: TabListMenuPalette) => `\n  background-color: ${palette.backgroundColor};\n  box-shadow: 0px 6px 20px ${palette.shadowColor};\n`\n\nconst templatePanel = (palette: TabListPanelPalette) => `\n  background-color: ${palette.backgroundColor};\n`\n\nexport const Floats = styled.div.withConfig<{ hidden: boolean; after?: boolean }>({\n  shouldForwardProp: (propKey) => !['after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  display: flex;\n  align-items: stretch;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  bottom: 0;\n  ${(props) => (props.after ? 'right: 0;' : 'left: 0;')}\n  ${(props) =>\n    props.hidden &&\n    `\n      &,\n      & * {\n        visibility: hidden !important;\n      }\n    `}\n`\n\nexport const Addon = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  display: flex;\n  position: relative;\n  align-items: center;\n  padding: ${focus.padding}px;\n\n  ${responsiveLayout}\n`\n\nexport const DividerPositioned = styled(Divider).withConfig<ResponsiveLayoutInterpolationProps>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  position: absolute;\n  right: 0;\n  left: 0;\n\n  ${responsiveLayout}\n`\n\nexport const Root = styled.div.withConfig<StyledTabListProps>({\n  shouldForwardProp: shouldForwardTabListProp,\n})`\n  box-sizing: border-box;\n  isolation: isolate;\n  position: relative;\n  display: flex;\n\n  ${(props) =>\n    template({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n    })}\n\n  & ${ScrollFading},  \n  & ${DividerPositioned} {\n    z-index: 1;\n  }\n  & [role='tab'] [data-ui-tab-underline]::after,\n  & [role='tab']:focus-visible,\n  & ${Addon} {\n    z-index: 2;\n  }\n  & ${Floats} ${Control} {\n    z-index: 3;\n  }\n\n  ${responsiveSize}\n  ${responsiveMargin}\n  ${responsiveLayout}\n`\n\nexport const Container = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  overflow: hidden;\n`\n\nexport const TabsTrack = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  overflow: hidden;\n  flex-grow: 1;\n`\n\nexport const TrackScrollable = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  padding: ${focus.padding}px;\n  overflow: auto;\n  overscroll-behavior: contain;\n  scroll-padding-right: 20px;\n  scroll-padding-left: 20px;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n    height: 0;\n    width: 0;\n  }\n`\n\nexport const Hidden = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: stretch;\n  flex-grow: 1;\n  height: 0;\n  &,\n  & * {\n    visibility: hidden !important;\n  }\n`\n\nexport const TabsHidden = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  padding: ${focus.padding}px;\n  overflow: hidden;\n`\n\nexport const TabWrapper = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n`\n\nexport const List = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n  overflow: hidden;\n  flex-grow: 1;\n  &:focus {\n    outline: none;\n  }\n`\n\nexport const Menu = styled.ul.withConfig<{\n  palette: {\n    backgroundColor?: CSSColor\n    shadowColor?: CSSColor\n  }\n}>({\n  shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  appearance: none;\n  margin: 0;\n  border-radius: 12px;\n  padding: ${focus.padding}px;\n  &:focus {\n    outline: none;\n  }\n\n  ${(props) =>\n    templateMenu({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n      shadowColor: props.palette.shadowColor ?? props.theme.colors['bg-oncolor-hover'],\n    })}\n`\n\nexport const MenuItem = styled.li`\n  display: flex;\n  appearance: none;\n  list-style-type: none;\n  &:not(:last-child) {\n    margin-bottom: ${focus.padding}px;\n  }\n  & > * {\n    flex-grow: 1;\n  }\n`\n\nexport const Panel = styled.div.withConfig<StyledTabListPanelProps>({\n  shouldForwardProp: shouldForwardTabListPanelProp,\n})`\n  box-sizing: border-box;\n\n  ${(props) => `\n    border-radius: ${props.borderRadius}px;  \n  `}\n\n  ${(props) =>\n    templatePanel({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n    })}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const IconAnimated = styled(Icon).withConfig<{ rotate: boolean }>({\n  shouldForwardProp: (propKey) => propKey !== 'rotate',\n})`\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.rotate ? 180 : 0}deg);\n  `}\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardTabListProp","createShouldForwardProp","shouldForwardTabListPanelProp","Control","styled","div","withConfig","shouldForwardProp","displayName","componentId","focus","padding","props","hidden","ScrollFading","after","Floats","Addon","responsiveLayout","DividerPositioned","Divider","Root","template","palette","backgroundColor","theme","colors","responsiveSize","responsiveMargin","Container","TabsTrack","TrackScrollable","Hidden","TabsHidden","TabWrapper","List","Menu","ul","templateMenu","shadowColor","MenuItem","li","Panel","borderRadius","IconAnimated","Icon","rotate"],"mappings":"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"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/TabList/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { responsiveLayout } from 'mixins/responsive-layout'\nimport { focus } from 'mixins/focus'\nimport { Icon } from 'components/Icon'\nimport { Divider } from 'components/Divider'\nimport type { ResponsiveLayoutInterpolationProps } from 'shared/interfaces'\nimport type { CSSColor } from 'shared/types'\nimport type {\n  Layout,\n  TabListPalette,\n  TabListMenuPalette,\n  TabListPanelPalette,\n  StyledTabListProps,\n  StyledTabListPanelProps,\n} from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n  !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardTabListProp = createShouldForwardProp(filterLayoutProps)\n\nconst shouldForwardTabListPanelProp = createShouldForwardProp((propKey) => !['borderRadius'].includes(propKey))\n\nexport const Control = styled.div.withConfig({\n  shouldForwardProp: (propKey) => !['hidden'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: ${focus.padding}px;\n  pointer-events: auto;\n  ${(props) =>\n    props.hidden &&\n    `\n      & * {\n        visibility: hidden !important;\n      }\n    `}\n`\n\nexport const ScrollFading = styled.div.withConfig<{ after?: boolean }>({\n  shouldForwardProp: (propKey) => !['after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  width: 35px;\n  ${(props) => `\n    background-image: linear-gradient(${props.after ? -90 : 90}deg, currentcolor, transparent);\n  `}\n`\n\nconst template = (palette: Pick<TabListPalette, 'backgroundColor'>) => `\n  &,\n  & ${Control} {\n    background-color: ${palette.backgroundColor};\n  }\n  & ${ScrollFading},\n  & ${ScrollFading} {\n    color: ${palette.backgroundColor};\n  }\n`\n\nconst templateMenu = (palette: TabListMenuPalette) => `\n  background-color: ${palette.backgroundColor};\n  box-shadow: 0px 6px 20px ${palette.shadowColor};\n`\n\nconst templatePanel = (palette: TabListPanelPalette) => `\n  background-color: ${palette.backgroundColor};\n`\n\nexport const Floats = styled.div.withConfig<{ hidden: boolean; after?: boolean }>({\n  shouldForwardProp: (propKey) => !['after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  display: flex;\n  align-items: stretch;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  bottom: 0;\n  ${(props) => (props.after ? 'right: 0;' : 'left: 0;')}\n  ${(props) =>\n    props.hidden &&\n    `\n      &,\n      & * {\n        visibility: hidden !important;\n      }\n    `}\n`\n\nexport const Addon = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  display: flex;\n  position: relative;\n  align-items: center;\n  padding: ${focus.padding}px;\n\n  ${responsiveLayout}\n`\n\nexport const DividerPositioned = styled(Divider).withConfig<ResponsiveLayoutInterpolationProps>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  position: absolute;\n  right: 0;\n  left: 0;\n\n  ${responsiveLayout}\n`\n\nexport const Root = styled.div.withConfig<StyledTabListProps>({\n  shouldForwardProp: shouldForwardTabListProp,\n})`\n  box-sizing: border-box;\n  isolation: isolate;\n  position: relative;\n  display: flex;\n\n  ${(props) =>\n    template({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n    })}\n\n  & ${ScrollFading},  \n  & ${DividerPositioned} {\n    z-index: 1;\n  }\n  & [role='tab'] [data-ui-tab-underline]::after,\n  & [role='tab']:focus-visible,\n  & ${Addon} {\n    z-index: 2;\n  }\n  & ${Floats} ${Control} {\n    z-index: 3;\n  }\n\n  ${responsiveSize}\n  ${responsiveMargin}\n  ${responsiveLayout}\n`\n\nexport const Container = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  overflow: hidden;\n`\n\nexport const TabsTrack = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  overflow: hidden;\n  flex-grow: 1;\n`\n\nexport const TrackScrollable = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  padding: ${focus.padding}px;\n  overflow: auto;\n  overscroll-behavior: contain;\n  scroll-padding-right: 20px;\n  scroll-padding-left: 20px;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n    height: 0;\n    width: 0;\n  }\n`\n\nexport const Hidden = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: stretch;\n  flex-grow: 1;\n  height: 0;\n  &,\n  & * {\n    visibility: hidden !important;\n  }\n`\n\nexport const TabsHidden = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  padding: ${focus.padding}px;\n  overflow: hidden;\n`\n\nexport const TabWrapper = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n`\n\nexport const List = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n  overflow: hidden;\n  flex-grow: 1;\n  &:focus {\n    outline: none;\n  }\n`\n\nexport const Menu = styled.ul.withConfig<{\n  palette: {\n    backgroundColor?: CSSColor\n    shadowColor?: CSSColor\n  }\n}>({\n  shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  appearance: none;\n  margin: 0;\n  border-radius: 12px;\n  padding: ${focus.padding}px;\n  &:focus {\n    outline: none;\n  }\n\n  ${(props) =>\n    templateMenu({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n      shadowColor: props.palette.shadowColor ?? props.theme.colors['bg-oncolor-hover'],\n    })}\n`\n\nexport const MenuItem = styled.li`\n  display: flex;\n  appearance: none;\n  list-style-type: none;\n  &:not(:last-child) {\n    margin-bottom: ${focus.padding}px;\n  }\n  & > * {\n    flex-grow: 1;\n  }\n`\n\nexport const Panel = styled.div.withConfig<StyledTabListPanelProps>({\n  shouldForwardProp: shouldForwardTabListPanelProp,\n})`\n  box-sizing: border-box;\n\n  ${(props) => `\n    border-radius: ${props.borderRadius}px;  \n  `}\n\n  ${(props) =>\n    templatePanel({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-onmain-primary'],\n    })}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const IconAnimated = styled(Icon).withConfig<{ rotate: boolean }>({\n  shouldForwardProp: (propKey) => propKey !== 'rotate',\n})`\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.rotate ? 180 : 0}deg);\n  `}\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardTabListProp","createShouldForwardProp","shouldForwardTabListPanelProp","Control","styled","div","withConfig","shouldForwardProp","displayName","componentId","focus","padding","props","hidden","ScrollFading","after","Floats","Addon","responsiveLayout","DividerPositioned","Divider","Root","template","palette","backgroundColor","theme","colors","responsiveSize","responsiveMargin","Container","TabsTrack","TrackScrollable","Hidden","TabsHidden","TabWrapper","List","Menu","ul","templateMenu","shadowColor","MenuItem","li","Panel","borderRadius","IconAnimated","Icon","rotate"],"mappings":"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"}

package/components/TabListTab/TabListTab.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var hooks=require('./hooks.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');const TabListTab=withMergedProps.withMergedProps(React.forwardRef(((e,s)=>{const{role:i="tab",type:t="button",variant:r="clear",size:n="m",sizeXXS:a,sizeXS:o,sizeS:c,sizeM:l,sizeL:d,sizeXL:u,id:p,panelId:x,active:z,tabIndex:h,'aria-selected':m,'aria-controls':b,text:j,addonLeft:T,addonRight:f,children:y,onClick:R,onFocus:g,...S}=hooks.useTabListTabProps(e);const v=hooks.useTabListTabs({id:p,active:z,tabIndex:h,'aria-selected':m,onClick:R,onFocus:g});const L={size:n,sizeXXS:a,sizeXS:o,sizeS:c,sizeM:l,sizeL:d,sizeXL:u};const P={...L,sizes:sizes.SIZES_TEXT,as:'span',appearance:'body',wordBreak:'break-word',color:'inherit',lineHeight:1,weight:r==='clear'&&v.active?700:400};const E={...L,sizes:sizes.SIZES_ICON};const I={...L,sizes:sizes.SIZES_INDICATOR};return jsxRuntime.jsx(style.Root,{...S,...L,...v,role:i,type:t,variant:r,"aria-controls":b??x,ref:s,children:jsxRuntime.jsx(style.Underline,{"data-ui-tab-underline":!0,children:React.isValidElement(y)||typeof y=='string'||typeof y=='number'?y:typeof y=='function'?y({textProps:P,iconProps:E,indicatorProps:I}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[React.isValidElement(T)?T:typeof T=='function'?T({iconProps:E,indicatorProps:I}):null,jsxRuntime.jsxs(style.Content,{marginRight:f?6:0,marginLeft:T?6:0,children:[React.isValidElement(j)?j:typeof j=='function'?j(P):typeof j=='string'||typeof j=='number'?jsxRuntime.jsx(Text.Text,{...P,children:j}):null,jsxRuntime.jsx(style.Hidden,{"aria-hidden":!0,children:React.isValidElement(j)?j:typeof j=='function'?j(P):typeof j=='string'||typeof j=='number'?jsxRuntime.jsx(Text.Text,{...P,children:j}):null})]}),React.isValidElement(f)?f:typeof f=='function'?f({iconProps:E,indicatorProps:I}):null]})})})})),{displayName:'TabListTab',sizes:sizes.SIZES});exports.TabListTab=TabListTab;
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var hooks=require('./hooks.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');const TabListTab=withMergedProps.withMergedProps(React.forwardRef((e,s)=>{const{role:i="tab",type:t="button",variant:r="clear",size:n="m",sizeXXS:a,sizeXS:o,sizeS:c,sizeM:l,sizeL:d,sizeXL:u,id:p,panelId:x,active:z,tabIndex:h,'aria-selected':m,'aria-controls':b,text:j,addonLeft:T,addonRight:f,children:y,onClick:R,onFocus:g,...S}=hooks.useTabListTabProps(e);const v=hooks.useTabListTabs({id:p,active:z,tabIndex:h,'aria-selected':m,onClick:R,onFocus:g});const L={size:n,sizeXXS:a,sizeXS:o,sizeS:c,sizeM:l,sizeL:d,sizeXL:u};const P={...L,sizes:sizes.SIZES_TEXT,as:'span',appearance:'body',wordBreak:'break-word',color:'inherit',lineHeight:1,weight:r==='clear'&&v.active?700:400};const E={...L,sizes:sizes.SIZES_ICON};const I={...L,sizes:sizes.SIZES_INDICATOR};return jsxRuntime.jsx(style.Root,{...S,...L,...v,role:i,type:t,variant:r,"aria-controls":b??x,ref:s,children:jsxRuntime.jsx(style.Underline,{"data-ui-tab-underline":!0,children:React.isValidElement(y)||typeof y=='string'||typeof y=='number'?y:typeof y=='function'?y({textProps:P,iconProps:E,indicatorProps:I}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[React.isValidElement(T)?T:typeof T=='function'?T({iconProps:E,indicatorProps:I}):null,jsxRuntime.jsxs(style.Content,{marginRight:f?6:0,marginLeft:T?6:0,children:[React.isValidElement(j)?j:typeof j=='function'?j(P):typeof j=='string'||typeof j=='number'?jsxRuntime.jsx(Text.Text,{...P,children:j}):null,jsxRuntime.jsx(style.Hidden,{"aria-hidden":!0,children:React.isValidElement(j)?j:typeof j=='function'?j(P):typeof j=='string'||typeof j=='number'?jsxRuntime.jsx(Text.Text,{...P,children:j}):null})]}),React.isValidElement(f)?f:typeof f=='function'?f({iconProps:E,indicatorProps:I}):null]})})})}),{displayName:'TabListTab',sizes:sizes.SIZES});exports.TabListTab=TabListTab;
 //# sourceMappingURL=TabListTab.js.map

package/components/TabListTab/TabListTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabListTab.js","sources":["../../../../src/components/TabListTab/TabListTab.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport type { IconProps } from 'components/Icon'\nimport type { IndicatorProps } from 'components/Indicator'\nimport { useTabListTabProps, useTabListTabs } from './hooks'\nimport { SIZES, SIZES_TEXT, SIZES_ICON, SIZES_INDICATOR } from './sizes'\nimport type { TabListTabProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TabListTab'\n\n/**\n *\n * Контрол активация которого отображает панель с ассоциированным контентом.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<button\\> элемента.\n *\n * Дизайн соответствует [рекомендациям WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n *\n * @visibleName TabList.Tab\n */\nconst TabListTab: React.ForwardRefExoticComponent<TabListTabProps> = withMergedProps<\n  TabListTabProps,\n  HTMLButtonElement\n>(\n  forwardRef((props, ref) => {\n    const {\n      role = 'tab',\n      type = 'button',\n      variant = 'clear',\n      size = 'm',\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      id,\n      panelId,\n      active,\n      tabIndex,\n      'aria-selected': ariaSelected,\n      'aria-controls': ariaControls,\n      text,\n      addonLeft,\n      addonRight,\n      children,\n      onClick,\n      onFocus,\n      ...restProps\n    } = useTabListTabProps(props)\n\n    const tabProps = useTabListTabs({\n      id,\n      active,\n      tabIndex,\n      'aria-selected': ariaSelected,\n      onClick,\n      onFocus,\n    })\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const textProps: TextProps = {\n      ...sizeProps,\n      sizes: SIZES_TEXT,\n      as: 'span',\n      appearance: 'body',\n      wordBreak: 'break-word',\n      color: 'inherit',\n      lineHeight: 1,\n      weight: variant === 'clear' && tabProps.active ? 700 : 400,\n    }\n\n    const iconProps: IconProps = {\n      ...sizeProps,\n      sizes: SIZES_ICON,\n    }\n\n    const indicatorProps: IndicatorProps = {\n      ...sizeProps,\n      sizes: SIZES_INDICATOR,\n    }\n\n    return (\n      <Styled.Root\n        {...restProps}\n        {...sizeProps}\n        {...tabProps}\n        role={role}\n        type={type}\n        variant={variant}\n        aria-controls={ariaControls ?? panelId}\n        ref={ref}\n      >\n        <Styled.Underline data-ui-tab-underline>\n          {isValidElement(children) || typeof children === 'string' || typeof children === 'number' ? (\n            children\n          ) : typeof children === 'function' ? (\n            children({\n              textProps,\n              iconProps,\n              indicatorProps,\n            })\n          ) : (\n            <>\n              {isValidElement(addonLeft)\n                ? addonLeft\n                : typeof addonLeft === 'function'\n                  ? addonLeft({\n                      iconProps,\n                      indicatorProps,\n                    })\n                  : null}\n              <Styled.Content marginRight={addonRight ? 6 : 0} marginLeft={addonLeft ? 6 : 0}>\n                {isValidElement(text) ? (\n                  text\n                ) : typeof text === 'function' ? (\n                  text(textProps)\n                ) : typeof text === 'string' || typeof text === 'number' ? (\n                  <Text {...textProps}>{text}</Text>\n                ) : null}\n                <Styled.Hidden aria-hidden>\n                  {isValidElement(text) ? (\n                    text\n                  ) : typeof text === 'function' ? (\n                    text(textProps)\n                  ) : typeof text === 'string' || typeof text === 'number' ? (\n                    <Text {...textProps}>{text}</Text>\n                  ) : null}\n                </Styled.Hidden>\n              </Styled.Content>\n              {isValidElement(addonRight)\n                ? addonRight\n                : typeof addonRight === 'function'\n                  ? addonRight({\n                      iconProps,\n                      indicatorProps,\n                    })\n                  : null}\n            </>\n          )}\n        </Styled.Underline>\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { TabListTab }\n"],"names":["TabListTab","withMergedProps","forwardRef","props","ref","role","type","variant","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","id","panelId","active","tabIndex","ariaSelected","ariaControls","text","addonLeft","addonRight","children","onClick","onFocus","restProps","useTabListTabProps","tabProps","useTabListTabs","sizeProps","textProps","sizes","SIZES_TEXT","as","appearance","wordBreak","color","lineHeight","weight","iconProps","SIZES_ICON","indicatorProps","SIZES_INDICATOR","_jsx","Styled","isValidElement","_jsxs","_Fragment","marginRight","marginLeft","Text","displayName","SIZES"],"mappings":"qRAuBA,MAAMA,WAA+DC,gBAAAA,gBAInEC,MAAAA,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,MAAKC,KACZA,EAAO,SAAQC,QACfA,EAAU,QAAOC,KACjBA,EAAO,IAAGC,QACVA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,GACNA,EAAEC,QACFA,EAAOC,OACPA,EAAMC,SACNA,EACA,gBAAiBC,EACjB,gBAAiBC,EAAYC,KAC7BA,EAAIC,UACJA,EAASC,WACTA,EAAUC,SACVA,EAAQC,QACRA,EAAOC,QACPA,KACGC,GACDC,MAAAA,mBAAmBzB,GAEvB,MAAM0B,EAAWC,MAAAA,eAAe,CAC9Bf,KACAE,SACAC,WACA,gBAAiBC,EACjBM,UACAC,YAGF,MAAMK,EAAY,CAChBvB,OACAC,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMkB,EAAuB,IACxBD,EACHE,MAAOC,MAAAA,WACPC,GAAI,OACJC,WAAY,OACZC,UAAW,aACXC,MAAO,UACPC,WAAY,EACZC,OAAQjC,IAAY,SAAWsB,EAASZ,OAAS,IAAM,KAGzD,MAAMwB,EAAuB,IACxBV,EACHE,MAAOS,MAAAA,YAGT,MAAMC,EAAiC,IAClCZ,EACHE,MAAOW,MAAAA,iBAGT,OACEC,WAAAA,IAACC,MAAAA,KAAW,IACNnB,KACAI,KACAF,EACJxB,KAAMA,EACNC,KAAMA,EACNC,QAASA,EACT,gBAAea,GAAgBJ,EAC/BZ,IAAKA,EAAIoB,SAETqB,WAAAA,IAACC,gBAAgB,CAAC,yBAAA,EAAqBtB,SACpCuB,MAAAA,eAAevB,WAAoBA,GAAa,iBAAmBA,GAAa,SAC/EA,SACSA,GAAa,WACtBA,EAAS,CACPQ,YACAS,YACAE,mBAGFK,WAAAA,KAAAC,oBAAA,CAAAzB,SAAA,CACGuB,MAAAA,eAAezB,GACZA,SACOA,GAAc,WACnBA,EAAU,CACRmB,YACAE,mBAEF,KACNK,WAAAA,KAACF,cAAc,CAACI,YAAa3B,EAAa,EAAI,EAAG4B,WAAY7B,EAAY,EAAI,EAAEE,SAAA,CAC5EuB,MAAAA,eAAe1B,GACdA,SACSA,GAAS,WAClBA,EAAKW,UACIX,GAAS,iBAAmBA,GAAS,SAC9CwB,WAAAA,IAACO,UAAI,IAAKpB,EAASR,SAAGH,IACpB,KACJwB,WAAAA,IAACC,aAAa,CAAC,eAAA,EAAWtB,SACvBuB,MAAAA,eAAe1B,GACdA,SACSA,GAAS,WAClBA,EAAKW,UACIX,GAAS,iBAAmBA,GAAS,SAC9CwB,WAAAA,IAACO,UAAI,IAAKpB,EAASR,SAAGH,IACpB,UAGP0B,MAAAA,eAAexB,GACZA,SACOA,GAAe,WACpBA,EAAW,CACTkB,YACAE,mBAEF,WAIA,IAGlB,CACEU,YAlJmB,aAmJnBpB,MAAOqB,MAAAA"}
+{"version":3,"file":"TabListTab.js","sources":["../../../../src/components/TabListTab/TabListTab.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport type { IconProps } from 'components/Icon'\nimport type { IndicatorProps } from 'components/Indicator'\nimport { useTabListTabProps, useTabListTabs } from './hooks'\nimport { SIZES, SIZES_TEXT, SIZES_ICON, SIZES_INDICATOR } from './sizes'\nimport type { TabListTabProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TabListTab'\n\n/**\n *\n * Контрол активация которого отображает панель с ассоциированным контентом.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<button\\> элемента.\n *\n * Дизайн соответствует [рекомендациям WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n *\n * @visibleName TabList.Tab\n */\nconst TabListTab: React.ForwardRefExoticComponent<TabListTabProps> = withMergedProps<\n  TabListTabProps,\n  HTMLButtonElement\n>(\n  forwardRef((props, ref) => {\n    const {\n      role = 'tab',\n      type = 'button',\n      variant = 'clear',\n      size = 'm',\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      id,\n      panelId,\n      active,\n      tabIndex,\n      'aria-selected': ariaSelected,\n      'aria-controls': ariaControls,\n      text,\n      addonLeft,\n      addonRight,\n      children,\n      onClick,\n      onFocus,\n      ...restProps\n    } = useTabListTabProps(props)\n\n    const tabProps = useTabListTabs({\n      id,\n      active,\n      tabIndex,\n      'aria-selected': ariaSelected,\n      onClick,\n      onFocus,\n    })\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const textProps: TextProps = {\n      ...sizeProps,\n      sizes: SIZES_TEXT,\n      as: 'span',\n      appearance: 'body',\n      wordBreak: 'break-word',\n      color: 'inherit',\n      lineHeight: 1,\n      weight: variant === 'clear' && tabProps.active ? 700 : 400,\n    }\n\n    const iconProps: IconProps = {\n      ...sizeProps,\n      sizes: SIZES_ICON,\n    }\n\n    const indicatorProps: IndicatorProps = {\n      ...sizeProps,\n      sizes: SIZES_INDICATOR,\n    }\n\n    return (\n      <Styled.Root\n        {...restProps}\n        {...sizeProps}\n        {...tabProps}\n        role={role}\n        type={type}\n        variant={variant}\n        aria-controls={ariaControls ?? panelId}\n        ref={ref}\n      >\n        <Styled.Underline data-ui-tab-underline>\n          {isValidElement(children) || typeof children === 'string' || typeof children === 'number' ? (\n            children\n          ) : typeof children === 'function' ? (\n            children({\n              textProps,\n              iconProps,\n              indicatorProps,\n            })\n          ) : (\n            <>\n              {isValidElement(addonLeft)\n                ? addonLeft\n                : typeof addonLeft === 'function'\n                  ? addonLeft({\n                      iconProps,\n                      indicatorProps,\n                    })\n                  : null}\n              <Styled.Content marginRight={addonRight ? 6 : 0} marginLeft={addonLeft ? 6 : 0}>\n                {isValidElement(text) ? (\n                  text\n                ) : typeof text === 'function' ? (\n                  text(textProps)\n                ) : typeof text === 'string' || typeof text === 'number' ? (\n                  <Text {...textProps}>{text}</Text>\n                ) : null}\n                <Styled.Hidden aria-hidden>\n                  {isValidElement(text) ? (\n                    text\n                  ) : typeof text === 'function' ? (\n                    text(textProps)\n                  ) : typeof text === 'string' || typeof text === 'number' ? (\n                    <Text {...textProps}>{text}</Text>\n                  ) : null}\n                </Styled.Hidden>\n              </Styled.Content>\n              {isValidElement(addonRight)\n                ? addonRight\n                : typeof addonRight === 'function'\n                  ? addonRight({\n                      iconProps,\n                      indicatorProps,\n                    })\n                  : null}\n            </>\n          )}\n        </Styled.Underline>\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { TabListTab }\n"],"names":["TabListTab","withMergedProps","forwardRef","props","ref","role","type","variant","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","id","panelId","active","tabIndex","ariaSelected","ariaControls","text","addonLeft","addonRight","children","onClick","onFocus","restProps","useTabListTabProps","tabProps","useTabListTabs","sizeProps","textProps","sizes","SIZES_TEXT","as","appearance","wordBreak","color","lineHeight","weight","iconProps","SIZES_ICON","indicatorProps","SIZES_INDICATOR","_jsx","Styled","isValidElement","_jsxs","_Fragment","marginRight","marginLeft","Text","displayName","SIZES"],"mappings":"qRAuBA,MAAMA,WAA+DC,gBAAAA,gBAInEC,MAAAA,WAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,MAAKC,KACZA,EAAO,SAAQC,QACfA,EAAU,QAAOC,KACjBA,EAAO,IAAGC,QACVA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,GACNA,EAAEC,QACFA,EAAOC,OACPA,EAAMC,SACNA,EACA,gBAAiBC,EACjB,gBAAiBC,EAAYC,KAC7BA,EAAIC,UACJA,EAASC,WACTA,EAAUC,SACVA,EAAQC,QACRA,EAAOC,QACPA,KACGC,GACDC,MAAAA,mBAAmBzB,GAEvB,MAAM0B,EAAWC,MAAAA,eAAe,CAC9Bf,KACAE,SACAC,WACA,gBAAiBC,EACjBM,UACAC,YAGF,MAAMK,EAAY,CAChBvB,OACAC,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMkB,EAAuB,IACxBD,EACHE,MAAOC,MAAAA,WACPC,GAAI,OACJC,WAAY,OACZC,UAAW,aACXC,MAAO,UACPC,WAAY,EACZC,OAAQjC,IAAY,SAAWsB,EAASZ,OAAS,IAAM,KAGzD,MAAMwB,EAAuB,IACxBV,EACHE,MAAOS,MAAAA,YAGT,MAAMC,EAAiC,IAClCZ,EACHE,MAAOW,MAAAA,iBAGT,OACEC,WAAAA,IAACC,MAAAA,KAAW,IACNnB,KACAI,KACAF,EACJxB,KAAMA,EACNC,KAAMA,EACNC,QAASA,EACT,gBAAea,GAAgBJ,EAC/BZ,IAAKA,EAAIoB,SAETqB,WAAAA,IAACC,gBAAgB,CAAC,yBAAA,EAAqBtB,SACpCuB,MAAAA,eAAevB,WAAoBA,GAAa,iBAAmBA,GAAa,SAC/EA,SACSA,GAAa,WACtBA,EAAS,CACPQ,YACAS,YACAE,mBAGFK,WAAAA,KAAAC,oBAAA,CAAAzB,SAAA,CACGuB,MAAAA,eAAezB,GACZA,SACOA,GAAc,WACnBA,EAAU,CACRmB,YACAE,mBAEF,KACNK,WAAAA,KAACF,cAAc,CAACI,YAAa3B,EAAa,EAAI,EAAG4B,WAAY7B,EAAY,EAAI,EAAEE,SAAA,CAC5EuB,MAAAA,eAAe1B,GACdA,SACSA,GAAS,WAClBA,EAAKW,UACIX,GAAS,iBAAmBA,GAAS,SAC9CwB,WAAAA,IAACO,UAAI,IAAKpB,EAASR,SAAGH,IACpB,KACJwB,WAAAA,IAACC,aAAa,CAAC,eAAA,EAAWtB,SACvBuB,MAAAA,eAAe1B,GACdA,SACSA,GAAS,WAClBA,EAAKW,UACIX,GAAS,iBAAmBA,GAAS,SAC9CwB,WAAAA,IAACO,UAAI,IAAKpB,EAASR,SAAGH,IACpB,UAGP0B,MAAAA,eAAexB,GACZA,SACOA,GAAe,WACpBA,EAAW,CACTkB,YACAE,mBAEF,cAOlB,CACEU,YAlJmB,aAmJnBpB,MAAOqB,MAAAA"}

package/components/TabListTab/TabListTab.mjs

@@ -1,2 +1,2 @@
-import{forwardRef,isValidElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useTabListTabProps,useTabListTabs}from'./hooks.mjs';import{SIZES_INDICATOR,SIZES_ICON,SIZES_TEXT,SIZES}from'./sizes.mjs';import{Root,Underline,Content,Hidden}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';const TabListTab=withMergedProps(forwardRef(((e,i)=>{const{role:t="tab",type:s="button",variant:o="clear",size:n="m",sizeXXS:r,sizeXS:a,sizeS:d,sizeM:l,sizeL:c,sizeXL:p,id:m,panelId:f,active:T,tabIndex:b,'aria-selected':u,'aria-controls':S,text:x,addonLeft:h,addonRight:z,children:I,onClick:y,onFocus:E,...j}=useTabListTabProps(e);const g=useTabListTabs({id:m,active:T,tabIndex:b,'aria-selected':u,onClick:y,onFocus:E});const L={size:n,sizeXXS:r,sizeXS:a,sizeS:d,sizeM:l,sizeL:c,sizeXL:p};const P={...L,sizes:SIZES_TEXT,as:'span',appearance:'body',wordBreak:'break-word',color:'inherit',lineHeight:1,weight:o==='clear'&&g.active?700:400};const X={...L,sizes:SIZES_ICON};const w={...L,sizes:SIZES_INDICATOR};return jsx(Root,{...j,...L,...g,role:t,type:s,variant:o,"aria-controls":S??f,ref:i,children:jsx(Underline,{"data-ui-tab-underline":!0,children:isValidElement(I)||typeof I=='string'||typeof I=='number'?I:typeof I=='function'?I({textProps:P,iconProps:X,indicatorProps:w}):jsxs(Fragment,{children:[isValidElement(h)?h:typeof h=='function'?h({iconProps:X,indicatorProps:w}):null,jsxs(Content,{marginRight:z?6:0,marginLeft:h?6:0,children:[isValidElement(x)?x:typeof x=='function'?x(P):typeof x=='string'||typeof x=='number'?jsx(Text,{...P,children:x}):null,jsx(Hidden,{"aria-hidden":!0,children:isValidElement(x)?x:typeof x=='function'?x(P):typeof x=='string'||typeof x=='number'?jsx(Text,{...P,children:x}):null})]}),isValidElement(z)?z:typeof z=='function'?z({iconProps:X,indicatorProps:w}):null]})})})})),{displayName:'TabListTab',sizes:SIZES});export{TabListTab};
+import{forwardRef,isValidElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useTabListTabProps,useTabListTabs}from'./hooks.mjs';import{SIZES_INDICATOR,SIZES_ICON,SIZES_TEXT,SIZES}from'./sizes.mjs';import{Root,Underline,Content,Hidden}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';const TabListTab=withMergedProps(forwardRef((e,i)=>{const{role:t="tab",type:s="button",variant:o="clear",size:n="m",sizeXXS:r,sizeXS:a,sizeS:d,sizeM:l,sizeL:c,sizeXL:p,id:m,panelId:f,active:T,tabIndex:b,'aria-selected':u,'aria-controls':S,text:x,addonLeft:h,addonRight:z,children:I,onClick:y,onFocus:E,...j}=useTabListTabProps(e);const g=useTabListTabs({id:m,active:T,tabIndex:b,'aria-selected':u,onClick:y,onFocus:E});const L={size:n,sizeXXS:r,sizeXS:a,sizeS:d,sizeM:l,sizeL:c,sizeXL:p};const P={...L,sizes:SIZES_TEXT,as:'span',appearance:'body',wordBreak:'break-word',color:'inherit',lineHeight:1,weight:o==='clear'&&g.active?700:400};const X={...L,sizes:SIZES_ICON};const w={...L,sizes:SIZES_INDICATOR};return jsx(Root,{...j,...L,...g,role:t,type:s,variant:o,"aria-controls":S??f,ref:i,children:jsx(Underline,{"data-ui-tab-underline":!0,children:isValidElement(I)||typeof I=='string'||typeof I=='number'?I:typeof I=='function'?I({textProps:P,iconProps:X,indicatorProps:w}):jsxs(Fragment,{children:[isValidElement(h)?h:typeof h=='function'?h({iconProps:X,indicatorProps:w}):null,jsxs(Content,{marginRight:z?6:0,marginLeft:h?6:0,children:[isValidElement(x)?x:typeof x=='function'?x(P):typeof x=='string'||typeof x=='number'?jsx(Text,{...P,children:x}):null,jsx(Hidden,{"aria-hidden":!0,children:isValidElement(x)?x:typeof x=='function'?x(P):typeof x=='string'||typeof x=='number'?jsx(Text,{...P,children:x}):null})]}),isValidElement(z)?z:typeof z=='function'?z({iconProps:X,indicatorProps:w}):null]})})})}),{displayName:'TabListTab',sizes:SIZES});export{TabListTab};
 //# sourceMappingURL=TabListTab.mjs.map

package/components/TabListTab/TabListTab.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabListTab.mjs","sources":["../../../../src/components/TabListTab/TabListTab.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport type { IconProps } from 'components/Icon'\nimport type { IndicatorProps } from 'components/Indicator'\nimport { useTabListTabProps, useTabListTabs } from './hooks'\nimport { SIZES, SIZES_TEXT, SIZES_ICON, SIZES_INDICATOR } from './sizes'\nimport type { TabListTabProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TabListTab'\n\n/**\n *\n * Контрол активация которого отображает панель с ассоциированным контентом.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<button\\> элемента.\n *\n * Дизайн соответствует [рекомендациям WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n *\n * @visibleName TabList.Tab\n */\nconst TabListTab: React.ForwardRefExoticComponent<TabListTabProps> = withMergedProps<\n  TabListTabProps,\n  HTMLButtonElement\n>(\n  forwardRef((props, ref) => {\n    const {\n      role = 'tab',\n      type = 'button',\n      variant = 'clear',\n      size = 'm',\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      id,\n      panelId,\n      active,\n      tabIndex,\n      'aria-selected': ariaSelected,\n      'aria-controls': ariaControls,\n      text,\n      addonLeft,\n      addonRight,\n      children,\n      onClick,\n      onFocus,\n      ...restProps\n    } = useTabListTabProps(props)\n\n    const tabProps = useTabListTabs({\n      id,\n      active,\n      tabIndex,\n      'aria-selected': ariaSelected,\n      onClick,\n      onFocus,\n    })\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const textProps: TextProps = {\n      ...sizeProps,\n      sizes: SIZES_TEXT,\n      as: 'span',\n      appearance: 'body',\n      wordBreak: 'break-word',\n      color: 'inherit',\n      lineHeight: 1,\n      weight: variant === 'clear' && tabProps.active ? 700 : 400,\n    }\n\n    const iconProps: IconProps = {\n      ...sizeProps,\n      sizes: SIZES_ICON,\n    }\n\n    const indicatorProps: IndicatorProps = {\n      ...sizeProps,\n      sizes: SIZES_INDICATOR,\n    }\n\n    return (\n      <Styled.Root\n        {...restProps}\n        {...sizeProps}\n        {...tabProps}\n        role={role}\n        type={type}\n        variant={variant}\n        aria-controls={ariaControls ?? panelId}\n        ref={ref}\n      >\n        <Styled.Underline data-ui-tab-underline>\n          {isValidElement(children) || typeof children === 'string' || typeof children === 'number' ? (\n            children\n          ) : typeof children === 'function' ? (\n            children({\n              textProps,\n              iconProps,\n              indicatorProps,\n            })\n          ) : (\n            <>\n              {isValidElement(addonLeft)\n                ? addonLeft\n                : typeof addonLeft === 'function'\n                  ? addonLeft({\n                      iconProps,\n                      indicatorProps,\n                    })\n                  : null}\n              <Styled.Content marginRight={addonRight ? 6 : 0} marginLeft={addonLeft ? 6 : 0}>\n                {isValidElement(text) ? (\n                  text\n                ) : typeof text === 'function' ? (\n                  text(textProps)\n                ) : typeof text === 'string' || typeof text === 'number' ? (\n                  <Text {...textProps}>{text}</Text>\n                ) : null}\n                <Styled.Hidden aria-hidden>\n                  {isValidElement(text) ? (\n                    text\n                  ) : typeof text === 'function' ? (\n                    text(textProps)\n                  ) : typeof text === 'string' || typeof text === 'number' ? (\n                    <Text {...textProps}>{text}</Text>\n                  ) : null}\n                </Styled.Hidden>\n              </Styled.Content>\n              {isValidElement(addonRight)\n                ? addonRight\n                : typeof addonRight === 'function'\n                  ? addonRight({\n                      iconProps,\n                      indicatorProps,\n                    })\n                  : null}\n            </>\n          )}\n        </Styled.Underline>\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { TabListTab }\n"],"names":["TabListTab","withMergedProps","forwardRef","props","ref","role","type","variant","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","id","panelId","active","tabIndex","ariaSelected","ariaControls","text","addonLeft","addonRight","children","onClick","onFocus","restProps","useTabListTabProps","tabProps","useTabListTabs","sizeProps","textProps","sizes","SIZES_TEXT","as","appearance","wordBreak","color","lineHeight","weight","iconProps","SIZES_ICON","indicatorProps","SIZES_INDICATOR","_jsx","Styled","isValidElement","_jsxs","_Fragment","marginRight","marginLeft","Text","displayName","SIZES"],"mappings":"oXAuBA,MAAMA,WAA+DC,gBAInEC,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,MAAKC,KACZA,EAAO,SAAQC,QACfA,EAAU,QAAOC,KACjBA,EAAO,IAAGC,QACVA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,GACNA,EAAEC,QACFA,EAAOC,OACPA,EAAMC,SACNA,EACA,gBAAiBC,EACjB,gBAAiBC,EAAYC,KAC7BA,EAAIC,UACJA,EAASC,WACTA,EAAUC,SACVA,EAAQC,QACRA,EAAOC,QACPA,KACGC,GACDC,mBAAmBzB,GAEvB,MAAM0B,EAAWC,eAAe,CAC9Bf,KACAE,SACAC,WACA,gBAAiBC,EACjBM,UACAC,YAGF,MAAMK,EAAY,CAChBvB,OACAC,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMkB,EAAuB,IACxBD,EACHE,MAAOC,WACPC,GAAI,OACJC,WAAY,OACZC,UAAW,aACXC,MAAO,UACPC,WAAY,EACZC,OAAQjC,IAAY,SAAWsB,EAASZ,OAAS,IAAM,KAGzD,MAAMwB,EAAuB,IACxBV,EACHE,MAAOS,YAGT,MAAMC,EAAiC,IAClCZ,EACHE,MAAOW,iBAGT,OACEC,IAACC,KAAW,IACNnB,KACAI,KACAF,EACJxB,KAAMA,EACNC,KAAMA,EACNC,QAASA,EACT,gBAAea,GAAgBJ,EAC/BZ,IAAKA,EAAIoB,SAETqB,IAACC,UAAgB,CAAC,yBAAA,EAAqBtB,SACpCuB,eAAevB,WAAoBA,GAAa,iBAAmBA,GAAa,SAC/EA,SACSA,GAAa,WACtBA,EAAS,CACPQ,YACAS,YACAE,mBAGFK,KAAAC,SAAA,CAAAzB,SAAA,CACGuB,eAAezB,GACZA,SACOA,GAAc,WACnBA,EAAU,CACRmB,YACAE,mBAEF,KACNK,KAACF,QAAc,CAACI,YAAa3B,EAAa,EAAI,EAAG4B,WAAY7B,EAAY,EAAI,EAAEE,SAAA,CAC5EuB,eAAe1B,GACdA,SACSA,GAAS,WAClBA,EAAKW,UACIX,GAAS,iBAAmBA,GAAS,SAC9CwB,IAACO,KAAI,IAAKpB,EAASR,SAAGH,IACpB,KACJwB,IAACC,OAAa,CAAC,eAAA,EAAWtB,SACvBuB,eAAe1B,GACdA,SACSA,GAAS,WAClBA,EAAKW,UACIX,GAAS,iBAAmBA,GAAS,SAC9CwB,IAACO,KAAI,IAAKpB,EAASR,SAAGH,IACpB,UAGP0B,eAAexB,GACZA,SACOA,GAAe,WACpBA,EAAW,CACTkB,YACAE,mBAEF,WAIA,IAGlB,CACEU,YAlJmB,aAmJnBpB,MAAOqB"}
+{"version":3,"file":"TabListTab.mjs","sources":["../../../../src/components/TabListTab/TabListTab.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport type { TextProps } from 'components/Text'\nimport type { IconProps } from 'components/Icon'\nimport type { IndicatorProps } from 'components/Indicator'\nimport { useTabListTabProps, useTabListTabs } from './hooks'\nimport { SIZES, SIZES_TEXT, SIZES_ICON, SIZES_INDICATOR } from './sizes'\nimport type { TabListTabProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'TabListTab'\n\n/**\n *\n * Контрол активация которого отображает панель с ассоциированным контентом.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<button\\> элемента.\n *\n * Дизайн соответствует [рекомендациям WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n *\n * @visibleName TabList.Tab\n */\nconst TabListTab: React.ForwardRefExoticComponent<TabListTabProps> = withMergedProps<\n  TabListTabProps,\n  HTMLButtonElement\n>(\n  forwardRef((props, ref) => {\n    const {\n      role = 'tab',\n      type = 'button',\n      variant = 'clear',\n      size = 'm',\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      id,\n      panelId,\n      active,\n      tabIndex,\n      'aria-selected': ariaSelected,\n      'aria-controls': ariaControls,\n      text,\n      addonLeft,\n      addonRight,\n      children,\n      onClick,\n      onFocus,\n      ...restProps\n    } = useTabListTabProps(props)\n\n    const tabProps = useTabListTabs({\n      id,\n      active,\n      tabIndex,\n      'aria-selected': ariaSelected,\n      onClick,\n      onFocus,\n    })\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const textProps: TextProps = {\n      ...sizeProps,\n      sizes: SIZES_TEXT,\n      as: 'span',\n      appearance: 'body',\n      wordBreak: 'break-word',\n      color: 'inherit',\n      lineHeight: 1,\n      weight: variant === 'clear' && tabProps.active ? 700 : 400,\n    }\n\n    const iconProps: IconProps = {\n      ...sizeProps,\n      sizes: SIZES_ICON,\n    }\n\n    const indicatorProps: IndicatorProps = {\n      ...sizeProps,\n      sizes: SIZES_INDICATOR,\n    }\n\n    return (\n      <Styled.Root\n        {...restProps}\n        {...sizeProps}\n        {...tabProps}\n        role={role}\n        type={type}\n        variant={variant}\n        aria-controls={ariaControls ?? panelId}\n        ref={ref}\n      >\n        <Styled.Underline data-ui-tab-underline>\n          {isValidElement(children) || typeof children === 'string' || typeof children === 'number' ? (\n            children\n          ) : typeof children === 'function' ? (\n            children({\n              textProps,\n              iconProps,\n              indicatorProps,\n            })\n          ) : (\n            <>\n              {isValidElement(addonLeft)\n                ? addonLeft\n                : typeof addonLeft === 'function'\n                  ? addonLeft({\n                      iconProps,\n                      indicatorProps,\n                    })\n                  : null}\n              <Styled.Content marginRight={addonRight ? 6 : 0} marginLeft={addonLeft ? 6 : 0}>\n                {isValidElement(text) ? (\n                  text\n                ) : typeof text === 'function' ? (\n                  text(textProps)\n                ) : typeof text === 'string' || typeof text === 'number' ? (\n                  <Text {...textProps}>{text}</Text>\n                ) : null}\n                <Styled.Hidden aria-hidden>\n                  {isValidElement(text) ? (\n                    text\n                  ) : typeof text === 'function' ? (\n                    text(textProps)\n                  ) : typeof text === 'string' || typeof text === 'number' ? (\n                    <Text {...textProps}>{text}</Text>\n                  ) : null}\n                </Styled.Hidden>\n              </Styled.Content>\n              {isValidElement(addonRight)\n                ? addonRight\n                : typeof addonRight === 'function'\n                  ? addonRight({\n                      iconProps,\n                      indicatorProps,\n                    })\n                  : null}\n            </>\n          )}\n        </Styled.Underline>\n      </Styled.Root>\n    )\n  }),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { TabListTab }\n"],"names":["TabListTab","withMergedProps","forwardRef","props","ref","role","type","variant","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","id","panelId","active","tabIndex","ariaSelected","ariaControls","text","addonLeft","addonRight","children","onClick","onFocus","restProps","useTabListTabProps","tabProps","useTabListTabs","sizeProps","textProps","sizes","SIZES_TEXT","as","appearance","wordBreak","color","lineHeight","weight","iconProps","SIZES_ICON","indicatorProps","SIZES_INDICATOR","_jsx","Styled","isValidElement","_jsxs","_Fragment","marginRight","marginLeft","Text","displayName","SIZES"],"mappings":"oXAuBA,MAAMA,WAA+DC,gBAInEC,WAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,MAAKC,KACZA,EAAO,SAAQC,QACfA,EAAU,QAAOC,KACjBA,EAAO,IAAGC,QACVA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,GACNA,EAAEC,QACFA,EAAOC,OACPA,EAAMC,SACNA,EACA,gBAAiBC,EACjB,gBAAiBC,EAAYC,KAC7BA,EAAIC,UACJA,EAASC,WACTA,EAAUC,SACVA,EAAQC,QACRA,EAAOC,QACPA,KACGC,GACDC,mBAAmBzB,GAEvB,MAAM0B,EAAWC,eAAe,CAC9Bf,KACAE,SACAC,WACA,gBAAiBC,EACjBM,UACAC,YAGF,MAAMK,EAAY,CAChBvB,OACAC,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMkB,EAAuB,IACxBD,EACHE,MAAOC,WACPC,GAAI,OACJC,WAAY,OACZC,UAAW,aACXC,MAAO,UACPC,WAAY,EACZC,OAAQjC,IAAY,SAAWsB,EAASZ,OAAS,IAAM,KAGzD,MAAMwB,EAAuB,IACxBV,EACHE,MAAOS,YAGT,MAAMC,EAAiC,IAClCZ,EACHE,MAAOW,iBAGT,OACEC,IAACC,KAAW,IACNnB,KACAI,KACAF,EACJxB,KAAMA,EACNC,KAAMA,EACNC,QAASA,EACT,gBAAea,GAAgBJ,EAC/BZ,IAAKA,EAAIoB,SAETqB,IAACC,UAAgB,CAAC,yBAAA,EAAqBtB,SACpCuB,eAAevB,WAAoBA,GAAa,iBAAmBA,GAAa,SAC/EA,SACSA,GAAa,WACtBA,EAAS,CACPQ,YACAS,YACAE,mBAGFK,KAAAC,SAAA,CAAAzB,SAAA,CACGuB,eAAezB,GACZA,SACOA,GAAc,WACnBA,EAAU,CACRmB,YACAE,mBAEF,KACNK,KAACF,QAAc,CAACI,YAAa3B,EAAa,EAAI,EAAG4B,WAAY7B,EAAY,EAAI,EAAEE,SAAA,CAC5EuB,eAAe1B,GACdA,SACSA,GAAS,WAClBA,EAAKW,UACIX,GAAS,iBAAmBA,GAAS,SAC9CwB,IAACO,KAAI,IAAKpB,EAASR,SAAGH,IACpB,KACJwB,IAACC,OAAa,CAAC,eAAA,EAAWtB,SACvBuB,eAAe1B,GACdA,SACSA,GAAS,WAClBA,EAAKW,UACIX,GAAS,iBAAmBA,GAAS,SAC9CwB,IAACO,KAAI,IAAKpB,EAASR,SAAGH,IACpB,UAGP0B,eAAexB,GACZA,SACOA,GAAe,WACpBA,EAAW,CACTkB,YACAE,mBAEF,cAOlB,CACEU,YAlJmB,aAmJnBpB,MAAOqB"}

package/components/TabListTab/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../../../../src/components/TabListTab/hooks.ts"],"sourcesContent":["import { useContext } from 'react'\nimport { TabListPropsContext, TabListTabsContext } from 'shared/context/tabList'\nimport { deepmerge } from 'shared/utils/misc'\nimport type { TabListTabProps } from './types'\n\nexport const useTabListTabProps = <T>(props: T): T => {\n  const contextProps = useContext(TabListPropsContext)\n\n  return (contextProps ? deepmerge(contextProps, props) : props) as T\n}\n\nexport const useTabListTabs = ({\n  id,\n  active,\n  tabIndex,\n  'aria-selected': ariaSelected,\n  onClick,\n  onFocus,\n}: Pick<TabListTabProps, 'id' | 'active' | 'tabIndex' | 'aria-selected' | 'onClick' | 'onFocus'>): Pick<\n  TabListTabProps,\n  'id' | 'active' | 'tabIndex' | 'aria-selected' | 'onClick' | 'onFocus'\n> => {\n  const context = useContext(TabListTabsContext)\n  const contextEnabled = context !== null && typeof id === 'string'\n\n  return {\n    id,\n    active: contextEnabled ? context.activeTab === id : active,\n    tabIndex: contextEnabled ? context.getTabIndex(id) : tabIndex,\n    'aria-selected': contextEnabled ? context.activeTab === id : ariaSelected,\n    onClick: (evt) => {\n      if (onClick) onClick(evt)\n      if (contextEnabled && !context.activationOnFocus) {\n        context.onActiveTabChange(id)\n      }\n    },\n    onFocus: (evt) => {\n      if (onFocus) onFocus(evt)\n      if (contextEnabled && context.activationOnFocus) {\n        context.onActiveTabChange(id)\n      }\n    },\n  }\n}\n"],"names":["props","contextProps","useContext","TabListPropsContext","deepmerge","useTabListTabs","id","active","tabIndex","ariaSelected","onClick","onFocus","context","TabListTabsContext","contextEnabled","activeTab","getTabIndex","evt","activationOnFocus","onActiveTabChange"],"mappings":"yKAKsCA,IACpC,MAAMC,EAAeC,MAAAA,WAAWC,6BAEhC,OAAQF,EAAeG,KAAAA,UAAUH,EAAcD,GAASA,CAAK,yBAGjCK,EAC5BC,KACAC,SACAC,WACA,gBAAiBC,EACjBC,UACAC,cAKA,MAAMC,EAAUV,MAAAA,WAAWW,4BAC3B,MAAMC,EAAiBF,IAAY,aAAeN,GAAO,SAEzD,MAAO,CACLA,KACAC,OAAQO,EAAiBF,EAAQG,YAAcT,EAAKC,EACpDC,SAAUM,EAAiBF,EAAQI,YAAYV,GAAME,EACrD,gBAAiBM,EAAiBF,EAAQG,YAAcT,EAAKG,EAC7DC,QAAUO,IACJP,GAASA,EAAQO,GACjBH,IAAmBF,EAAQM,mBAC7BN,EAAQO,kBAAkBb,EAC5B,EAEFK,QAAUM,IACJN,GAASA,EAAQM,GACjBH,GAAkBF,EAAQM,mBAC5BN,EAAQO,kBAAkBb,EAC5B,EAEH"}
+{"version":3,"file":"hooks.js","sources":["../../../../src/components/TabListTab/hooks.ts"],"sourcesContent":["import { useContext } from 'react'\nimport { TabListPropsContext, TabListTabsContext } from 'shared/context/tabList'\nimport { deepmerge } from 'shared/utils/misc'\nimport type { TabListTabProps } from './types'\n\nexport const useTabListTabProps = <T>(props: T): T => {\n  const contextProps = useContext(TabListPropsContext)\n\n  return (contextProps ? deepmerge(contextProps, props) : props) as T\n}\n\nexport const useTabListTabs = ({\n  id,\n  active,\n  tabIndex,\n  'aria-selected': ariaSelected,\n  onClick,\n  onFocus,\n}: Pick<TabListTabProps, 'id' | 'active' | 'tabIndex' | 'aria-selected' | 'onClick' | 'onFocus'>): Pick<\n  TabListTabProps,\n  'id' | 'active' | 'tabIndex' | 'aria-selected' | 'onClick' | 'onFocus'\n> => {\n  const context = useContext(TabListTabsContext)\n  const contextEnabled = context !== null && typeof id === 'string'\n\n  return {\n    id,\n    active: contextEnabled ? context.activeTab === id : active,\n    tabIndex: contextEnabled ? context.getTabIndex(id) : tabIndex,\n    'aria-selected': contextEnabled ? context.activeTab === id : ariaSelected,\n    onClick: (evt) => {\n      if (onClick) onClick(evt)\n      if (contextEnabled && !context.activationOnFocus) {\n        context.onActiveTabChange(id)\n      }\n    },\n    onFocus: (evt) => {\n      if (onFocus) onFocus(evt)\n      if (contextEnabled && context.activationOnFocus) {\n        context.onActiveTabChange(id)\n      }\n    },\n  }\n}\n"],"names":["props","contextProps","useContext","TabListPropsContext","deepmerge","useTabListTabs","id","active","tabIndex","ariaSelected","onClick","onFocus","context","TabListTabsContext","contextEnabled","activeTab","getTabIndex","evt","activationOnFocus","onActiveTabChange"],"mappings":"yKAKsCA,IACpC,MAAMC,EAAeC,MAAAA,WAAWC,6BAEhC,OAAQF,EAAeG,KAAAA,UAAUH,EAAcD,GAASA,0BAG5BK,EAC5BC,KACAC,SACAC,WACA,gBAAiBC,EACjBC,UACAC,cAKA,MAAMC,EAAUV,MAAAA,WAAWW,4BAC3B,MAAMC,EAAiBF,IAAY,aAAeN,GAAO,SAEzD,MAAO,CACLA,KACAC,OAAQO,EAAiBF,EAAQG,YAAcT,EAAKC,EACpDC,SAAUM,EAAiBF,EAAQI,YAAYV,GAAME,EACrD,gBAAiBM,EAAiBF,EAAQG,YAAcT,EAAKG,EAC7DC,QAAUO,IACJP,GAASA,EAAQO,GACjBH,IAAmBF,EAAQM,mBAC7BN,EAAQO,kBAAkBb,IAG9BK,QAAUM,IACJN,GAASA,EAAQM,GACjBH,GAAkBF,EAAQM,mBAC5BN,EAAQO,kBAAkBb"}

package/components/TabListTab/hooks.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.mjs","sources":["../../../../src/components/TabListTab/hooks.ts"],"sourcesContent":["import { useContext } from 'react'\nimport { TabListPropsContext, TabListTabsContext } from 'shared/context/tabList'\nimport { deepmerge } from 'shared/utils/misc'\nimport type { TabListTabProps } from './types'\n\nexport const useTabListTabProps = <T>(props: T): T => {\n  const contextProps = useContext(TabListPropsContext)\n\n  return (contextProps ? deepmerge(contextProps, props) : props) as T\n}\n\nexport const useTabListTabs = ({\n  id,\n  active,\n  tabIndex,\n  'aria-selected': ariaSelected,\n  onClick,\n  onFocus,\n}: Pick<TabListTabProps, 'id' | 'active' | 'tabIndex' | 'aria-selected' | 'onClick' | 'onFocus'>): Pick<\n  TabListTabProps,\n  'id' | 'active' | 'tabIndex' | 'aria-selected' | 'onClick' | 'onFocus'\n> => {\n  const context = useContext(TabListTabsContext)\n  const contextEnabled = context !== null && typeof id === 'string'\n\n  return {\n    id,\n    active: contextEnabled ? context.activeTab === id : active,\n    tabIndex: contextEnabled ? context.getTabIndex(id) : tabIndex,\n    'aria-selected': contextEnabled ? context.activeTab === id : ariaSelected,\n    onClick: (evt) => {\n      if (onClick) onClick(evt)\n      if (contextEnabled && !context.activationOnFocus) {\n        context.onActiveTabChange(id)\n      }\n    },\n    onFocus: (evt) => {\n      if (onFocus) onFocus(evt)\n      if (contextEnabled && context.activationOnFocus) {\n        context.onActiveTabChange(id)\n      }\n    },\n  }\n}\n"],"names":["useTabListTabProps","props","contextProps","useContext","TabListPropsContext","deepmerge","useTabListTabs","id","active","tabIndex","ariaSelected","onClick","onFocus","context","TabListTabsContext","contextEnabled","activeTab","getTabIndex","evt","activationOnFocus","onActiveTabChange"],"mappings":"sKAKO,MAAMA,mBAAyBC,IACpC,MAAMC,EAAeC,WAAWC,qBAEhC,OAAQF,EAAeG,UAAUH,EAAcD,GAASA,CAAK,EAGxD,MAAMK,eAAiBA,EAC5BC,KACAC,SACAC,WACA,gBAAiBC,EACjBC,UACAC,cAKA,MAAMC,EAAUV,WAAWW,oBAC3B,MAAMC,EAAiBF,IAAY,aAAeN,GAAO,SAEzD,MAAO,CACLA,KACAC,OAAQO,EAAiBF,EAAQG,YAAcT,EAAKC,EACpDC,SAAUM,EAAiBF,EAAQI,YAAYV,GAAME,EACrD,gBAAiBM,EAAiBF,EAAQG,YAAcT,EAAKG,EAC7DC,QAAUO,IACJP,GAASA,EAAQO,GACjBH,IAAmBF,EAAQM,mBAC7BN,EAAQO,kBAAkBb,EAC5B,EAEFK,QAAUM,IACJN,GAASA,EAAQM,GACjBH,GAAkBF,EAAQM,mBAC5BN,EAAQO,kBAAkBb,EAC5B,EAEH"}
+{"version":3,"file":"hooks.mjs","sources":["../../../../src/components/TabListTab/hooks.ts"],"sourcesContent":["import { useContext } from 'react'\nimport { TabListPropsContext, TabListTabsContext } from 'shared/context/tabList'\nimport { deepmerge } from 'shared/utils/misc'\nimport type { TabListTabProps } from './types'\n\nexport const useTabListTabProps = <T>(props: T): T => {\n  const contextProps = useContext(TabListPropsContext)\n\n  return (contextProps ? deepmerge(contextProps, props) : props) as T\n}\n\nexport const useTabListTabs = ({\n  id,\n  active,\n  tabIndex,\n  'aria-selected': ariaSelected,\n  onClick,\n  onFocus,\n}: Pick<TabListTabProps, 'id' | 'active' | 'tabIndex' | 'aria-selected' | 'onClick' | 'onFocus'>): Pick<\n  TabListTabProps,\n  'id' | 'active' | 'tabIndex' | 'aria-selected' | 'onClick' | 'onFocus'\n> => {\n  const context = useContext(TabListTabsContext)\n  const contextEnabled = context !== null && typeof id === 'string'\n\n  return {\n    id,\n    active: contextEnabled ? context.activeTab === id : active,\n    tabIndex: contextEnabled ? context.getTabIndex(id) : tabIndex,\n    'aria-selected': contextEnabled ? context.activeTab === id : ariaSelected,\n    onClick: (evt) => {\n      if (onClick) onClick(evt)\n      if (contextEnabled && !context.activationOnFocus) {\n        context.onActiveTabChange(id)\n      }\n    },\n    onFocus: (evt) => {\n      if (onFocus) onFocus(evt)\n      if (contextEnabled && context.activationOnFocus) {\n        context.onActiveTabChange(id)\n      }\n    },\n  }\n}\n"],"names":["useTabListTabProps","props","contextProps","useContext","TabListPropsContext","deepmerge","useTabListTabs","id","active","tabIndex","ariaSelected","onClick","onFocus","context","TabListTabsContext","contextEnabled","activeTab","getTabIndex","evt","activationOnFocus","onActiveTabChange"],"mappings":"sKAKO,MAAMA,mBAAyBC,IACpC,MAAMC,EAAeC,WAAWC,qBAEhC,OAAQF,EAAeG,UAAUH,EAAcD,GAASA,GAGnD,MAAMK,eAAiBA,EAC5BC,KACAC,SACAC,WACA,gBAAiBC,EACjBC,UACAC,cAKA,MAAMC,EAAUV,WAAWW,oBAC3B,MAAMC,EAAiBF,IAAY,aAAeN,GAAO,SAEzD,MAAO,CACLA,KACAC,OAAQO,EAAiBF,EAAQG,YAAcT,EAAKC,EACpDC,SAAUM,EAAiBF,EAAQI,YAAYV,GAAME,EACrD,gBAAiBM,EAAiBF,EAAQG,YAAcT,EAAKG,EAC7DC,QAAUO,IACJP,GAASA,EAAQO,GACjBH,IAAmBF,EAAQM,mBAC7BN,EAAQO,kBAAkBb,IAG9BK,QAAUM,IACJN,GAASA,EAAQM,GACjBH,GAAkBF,EAAQM,mBAC5BN,EAAQO,kBAAkBb"}

package/components/TabListTab/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 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);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardTabListTabProp=style.createShouldForwardProp((e=>!['variant','active'].includes(e)));const shouldForwardContentProp=style.createShouldForwardProp();const template=e=>`\n  color: ${e.color};\n  background-color: ${e.backgroundColor};\n  ${hover.hover(`\n    color: ${e.colorHover};\n    background-color: ${e.backgroundColorHover};\n  `)}\n`;const COLOR_SCHEMA={underlined:{default:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActive??e.theme.colors['content-brand-primary']:e.palette.color??e.theme.colors['content-onmain-primary'],colorHover:e.active?e.palette.colorActive??e.theme.colors['content-brand-primary']:e.palette.colorHover??e.palette.color??tinycolor__default.default(e.theme.colors['content-onmain-primary']).lighten(10).toString(),backgroundColor:e.active?e.palette.backgroundColorActive??e.theme.colors.transparent:e.palette.backgroundColor??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActive??e.theme.colors.transparent:e.palette.backgroundColorHover??e.palette.backgroundColor??e.theme.colors.transparent}))),disabled:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],colorHover:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],backgroundColor:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors.transparent:e.palette.backgroundColorDisabled??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors.transparent:e.palette.backgroundColorDisabled??e.theme.colors.transparent})))},filled:{default:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActive??e.theme.colors['content-onmain-primary']:e.palette.color??e.theme.colors['content-onmain-primary'],colorHover:e.active?e.palette.colorActive??e.theme.colors['content-onmain-primary']:e.palette.colorHover??e.palette.color??e.theme.colors['content-onmain-primary'],backgroundColor:e.active?e.palette.backgroundColorActive??e.theme.colors['bg-onmain-tertiary']:e.palette.backgroundColor??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActive??e.theme.colors['bg-onmain-tertiary']:e.palette.backgroundColorHover??e.palette.backgroundColor??e.theme.colors['content-oncolor-hover']}))),disabled:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],colorHover:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],backgroundColor:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors['bg-disabled-large']:e.palette.backgroundColorDisabled??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors['bg-disabled-large']:e.palette.backgroundColorDisabled??e.theme.colors.transparent})))},clear:{default:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActive??e.theme.colors['content-onmain-primary']:e.palette.color??e.theme.colors['content-onmain-tertiary'],colorHover:e.active?e.palette.colorActive??e.theme.colors['content-onmain-primary']:e.palette.colorHover??e.palette.color??e.theme.colors['content-onmain-secondary'],backgroundColor:e.active?e.palette.backgroundColorActive??e.theme.colors.transparent:e.palette.backgroundColor??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActive??e.theme.colors.transparent:e.palette.backgroundColorHover??e.palette.backgroundColor??e.theme.colors.transparent}))),disabled:styled.css(["",""],(e=>template({color:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],colorHover:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],backgroundColor:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors.transparent:e.palette.backgroundColorDisabled??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors.transparent:e.palette.backgroundColorDisabled??e.theme.colors.transparent})))}};const Underline=styled__default.default.span.withConfig({displayName:"TabListTab__Underline",componentId:"ui__sc-m6g7x8-0"})(["box-sizing:border-box;position:relative;display:flex;align-items:center;flex-grow:1;&::after{content:'';position:absolute;right:0;bottom:0;left:0;height:2px;background-color:currentcolor;}"]);const Root=styled__default.default.button.withConfig({shouldForwardProp:shouldForwardTabListTabProp}).withConfig({displayName:"TabListTab__Root",componentId:"ui__sc-m6g7x8-1"})(["box-sizing:border-box;appearance:none;position:relative;display:inline-flex;margin:0;padding:0;border:none;font:inherit;text-align:left;align-items:stretch;flex-shrink:0;transition-property:background-color;transition-duration:250ms;"," "," "," "," ",""],(e=>`\n    &, \n    & * {\n      cursor: ${e.disabled?'not-allowed':'pointer'};  \n    }\n    & > ${Underline}::after {\n      opacity: ${e.variant==='underlined'&&e.active?1:0};\n    }\n  `),(e=>{const o=COLOR_SCHEMA[e.variant];return e.disabled?o.disabled:o.default}),focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Content=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardContentProp}).withConfig({displayName:"TabListTab__Content",componentId:"ui__sc-m6g7x8-2"})(["display:flex;flex-direction:column;justify-content:center;flex-grow:1;",""],responsiveMargin.responsiveMargin);const Hidden=styled__default.default.span.withConfig({displayName:"TabListTab__Hidden",componentId:"ui__sc-m6g7x8-3"})(["display:flex;flex-direction:column;justify-content:center;flex-grow:1;height:0;& *{visibility:hidden !important;font-weight:900 !important;}"]);exports.Content=Content,exports.Hidden=Hidden,exports.Root=Root,exports.Underline=Underline;
+'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');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);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardTabListTabProp=style.createShouldForwardProp(e=>!['variant','active'].includes(e));const shouldForwardContentProp=style.createShouldForwardProp();const template=e=>`\n  color: ${e.color};\n  background-color: ${e.backgroundColor};\n  ${hover.hover(`\n    color: ${e.colorHover};\n    background-color: ${e.backgroundColorHover};\n  `)}\n`;const COLOR_SCHEMA={underlined:{default:styled.css(["",""],e=>template({color:e.active?e.palette.colorActive??e.theme.colors['content-brand-primary']:e.palette.color??e.theme.colors['content-onmain-primary'],colorHover:e.active?e.palette.colorActive??e.theme.colors['content-brand-primary']:e.palette.colorHover??e.palette.color??tinycolor__default.default(e.theme.colors['content-onmain-primary']).lighten(10).toString(),backgroundColor:e.active?e.palette.backgroundColorActive??e.theme.colors.transparent:e.palette.backgroundColor??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActive??e.theme.colors.transparent:e.palette.backgroundColorHover??e.palette.backgroundColor??e.theme.colors.transparent})),disabled:styled.css(["",""],e=>template({color:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],colorHover:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],backgroundColor:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors.transparent:e.palette.backgroundColorDisabled??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors.transparent:e.palette.backgroundColorDisabled??e.theme.colors.transparent}))},filled:{default:styled.css(["",""],e=>template({color:e.active?e.palette.colorActive??e.theme.colors['content-onmain-primary']:e.palette.color??e.theme.colors['content-onmain-primary'],colorHover:e.active?e.palette.colorActive??e.theme.colors['content-onmain-primary']:e.palette.colorHover??e.palette.color??e.theme.colors['content-onmain-primary'],backgroundColor:e.active?e.palette.backgroundColorActive??e.theme.colors['bg-onmain-tertiary']:e.palette.backgroundColor??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActive??e.theme.colors['bg-onmain-tertiary']:e.palette.backgroundColorHover??e.palette.backgroundColor??e.theme.colors['content-oncolor-hover']})),disabled:styled.css(["",""],e=>template({color:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],colorHover:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],backgroundColor:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors['bg-disabled-large']:e.palette.backgroundColorDisabled??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors['bg-disabled-large']:e.palette.backgroundColorDisabled??e.theme.colors.transparent}))},clear:{default:styled.css(["",""],e=>template({color:e.active?e.palette.colorActive??e.theme.colors['content-onmain-primary']:e.palette.color??e.theme.colors['content-onmain-tertiary'],colorHover:e.active?e.palette.colorActive??e.theme.colors['content-onmain-primary']:e.palette.colorHover??e.palette.color??e.theme.colors['content-onmain-secondary'],backgroundColor:e.active?e.palette.backgroundColorActive??e.theme.colors.transparent:e.palette.backgroundColor??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActive??e.theme.colors.transparent:e.palette.backgroundColorHover??e.palette.backgroundColor??e.theme.colors.transparent})),disabled:styled.css(["",""],e=>template({color:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],colorHover:e.active?e.palette.colorActiveDisabled??e.theme.colors['content-disabled']:e.palette.colorDisabled??e.theme.colors['content-disabled'],backgroundColor:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors.transparent:e.palette.backgroundColorDisabled??e.theme.colors.transparent,backgroundColorHover:e.active?e.palette.backgroundColorActiveDisabled??e.theme.colors.transparent:e.palette.backgroundColorDisabled??e.theme.colors.transparent}))}};const Underline=styled__default.default.span.withConfig({displayName:"TabListTab__Underline",componentId:"ui__sc-m6g7x8-0"})(["box-sizing:border-box;position:relative;display:flex;align-items:center;flex-grow:1;&::after{content:'';position:absolute;right:0;bottom:0;left:0;height:2px;background-color:currentcolor;}"]);const Root=styled__default.default.button.withConfig({shouldForwardProp:shouldForwardTabListTabProp}).withConfig({displayName:"TabListTab__Root",componentId:"ui__sc-m6g7x8-1"})(["box-sizing:border-box;appearance:none;position:relative;display:inline-flex;margin:0;padding:0;border:none;font:inherit;text-align:left;align-items:stretch;flex-shrink:0;transition-property:background-color;transition-duration:250ms;"," "," "," "," ",""],e=>`\n    &, \n    & * {\n      cursor: ${e.disabled?'not-allowed':'pointer'};  \n    }\n    & > ${Underline}::after {\n      opacity: ${e.variant==='underlined'&&e.active?1:0};\n    }\n  `,e=>{const o=COLOR_SCHEMA[e.variant];return e.disabled?o.disabled:o.default},focus.focus,responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);const Content=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardContentProp}).withConfig({displayName:"TabListTab__Content",componentId:"ui__sc-m6g7x8-2"})(["display:flex;flex-direction:column;justify-content:center;flex-grow:1;",""],responsiveMargin.responsiveMargin);const Hidden=styled__default.default.span.withConfig({displayName:"TabListTab__Hidden",componentId:"ui__sc-m6g7x8-3"})(["display:flex;flex-direction:column;justify-content:center;flex-grow:1;height:0;& *{visibility:hidden !important;font-weight:900 !important;}"]);exports.Content=Content,exports.Hidden=Hidden,exports.Root=Root,exports.Underline=Underline;
 //# sourceMappingURL=style.js.map

package/components/TabListTab/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/TabListTab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { ResponsiveMarginProps } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { TabListTabPalette, StyledTabListTabProps } from './types'\n\nconst shouldForwardTabListTabProp = createShouldForwardProp((propKey) => !['variant', 'active'].includes(propKey))\n\nconst shouldForwardContentProp = createShouldForwardProp()\n\nconst template = (palette: TabListTabPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n  ${hover(`\n    color: ${palette.colorHover};\n    background-color: ${palette.backgroundColorHover};\n  `)}\n`\n\nconst COLOR_SCHEMA = {\n  underlined: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-brand-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-brand-primary'])\n            : (props.palette.colorHover ??\n              props.palette.color ??\n              (tinycolor(props.theme.colors['content-onmain-primary']).lighten(10).toString() as CSSColor)),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorHover ?? props.palette.backgroundColor ?? props.theme.colors.transparent),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n  filled: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.colorHover ?? props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors['bg-onmain-tertiary'])\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors['bg-onmain-tertiary'])\n            : (props.palette.backgroundColorHover ??\n              props.palette.backgroundColor ??\n              props.theme.colors['content-oncolor-hover']),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors['bg-disabled-large'])\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors['bg-disabled-large'])\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n  clear: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-tertiary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.colorHover ?? props.palette.color ?? props.theme.colors['content-onmain-secondary']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorHover ?? props.palette.backgroundColor ?? props.theme.colors.transparent),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n}\n\nexport const Underline = styled.span`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 2px;\n    background-color: currentcolor;\n  }\n`\n\nexport const Root = styled.button.withConfig<StyledTabListTabProps>({\n  shouldForwardProp: shouldForwardTabListTabProp,\n})`\n  box-sizing: border-box;\n  appearance: none;\n  position: relative;\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n  border: none;\n  font: inherit;\n  text-align: left;\n  align-items: stretch;\n  flex-shrink: 0;\n  transition-property: background-color;\n  transition-duration: 250ms;\n\n  ${(props) => `\n    &, \n    & * {\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};  \n    }\n    & > ${Underline}::after {\n      opacity: ${props.variant === 'underlined' && props.active ? 1 : 0};\n    }\n  `}\n\n  ${(props) => {\n    const schema = COLOR_SCHEMA[props.variant]\n\n    return props.disabled ? schema.disabled : schema.default\n  }}\n\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Content = styled.span.withConfig<ResponsiveMarginProps>({\n  shouldForwardProp: shouldForwardContentProp,\n})`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n\n  ${responsiveMargin}\n`\n\nexport const Hidden = styled.span`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n  height: 0;\n\n  & * {\n    visibility: hidden !important;\n    font-weight: 900 !important;\n  }\n`\n"],"names":["shouldForwardTabListTabProp","createShouldForwardProp","propKey","includes","shouldForwardContentProp","template","palette","color","backgroundColor","hover","colorHover","backgroundColorHover","COLOR_SCHEMA","underlined","default","css","props","active","colorActive","theme","colors","tinycolor","lighten","toString","backgroundColorActive","transparent","disabled","colorActiveDisabled","colorDisabled","backgroundColorActiveDisabled","backgroundColorDisabled","filled","clear","Underline","styled","span","withConfig","displayName","componentId","Root","button","shouldForwardProp","variant","schema","focus","responsiveSize","responsiveMargin","Content","Hidden"],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/TabListTab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { ResponsiveMarginProps } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { TabListTabPalette, StyledTabListTabProps } from './types'\n\nconst shouldForwardTabListTabProp = createShouldForwardProp((propKey) => !['variant', 'active'].includes(propKey))\n\nconst shouldForwardContentProp = createShouldForwardProp()\n\nconst template = (palette: TabListTabPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n  ${hover(`\n    color: ${palette.colorHover};\n    background-color: ${palette.backgroundColorHover};\n  `)}\n`\n\nconst COLOR_SCHEMA = {\n  underlined: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-brand-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-brand-primary'])\n            : (props.palette.colorHover ??\n              props.palette.color ??\n              (tinycolor(props.theme.colors['content-onmain-primary']).lighten(10).toString() as CSSColor)),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorHover ?? props.palette.backgroundColor ?? props.theme.colors.transparent),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n  filled: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.colorHover ?? props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors['bg-onmain-tertiary'])\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors['bg-onmain-tertiary'])\n            : (props.palette.backgroundColorHover ??\n              props.palette.backgroundColor ??\n              props.theme.colors['content-oncolor-hover']),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors['bg-disabled-large'])\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors['bg-disabled-large'])\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n  clear: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-tertiary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.colorHover ?? props.palette.color ?? props.theme.colors['content-onmain-secondary']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorHover ?? props.palette.backgroundColor ?? props.theme.colors.transparent),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n}\n\nexport const Underline = styled.span`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 2px;\n    background-color: currentcolor;\n  }\n`\n\nexport const Root = styled.button.withConfig<StyledTabListTabProps>({\n  shouldForwardProp: shouldForwardTabListTabProp,\n})`\n  box-sizing: border-box;\n  appearance: none;\n  position: relative;\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n  border: none;\n  font: inherit;\n  text-align: left;\n  align-items: stretch;\n  flex-shrink: 0;\n  transition-property: background-color;\n  transition-duration: 250ms;\n\n  ${(props) => `\n    &, \n    & * {\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};  \n    }\n    & > ${Underline}::after {\n      opacity: ${props.variant === 'underlined' && props.active ? 1 : 0};\n    }\n  `}\n\n  ${(props) => {\n    const schema = COLOR_SCHEMA[props.variant]\n\n    return props.disabled ? schema.disabled : schema.default\n  }}\n\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Content = styled.span.withConfig<ResponsiveMarginProps>({\n  shouldForwardProp: shouldForwardContentProp,\n})`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n\n  ${responsiveMargin}\n`\n\nexport const Hidden = styled.span`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n  height: 0;\n\n  & * {\n    visibility: hidden !important;\n    font-weight: 900 !important;\n  }\n`\n"],"names":["shouldForwardTabListTabProp","createShouldForwardProp","propKey","includes","shouldForwardContentProp","template","palette","color","backgroundColor","hover","colorHover","backgroundColorHover","COLOR_SCHEMA","underlined","default","css","props","active","colorActive","theme","colors","tinycolor","lighten","toString","backgroundColorActive","transparent","disabled","colorActiveDisabled","colorDisabled","backgroundColorActiveDisabled","backgroundColorDisabled","filled","clear","Underline","styled","span","withConfig","displayName","componentId","Root","button","shouldForwardProp","variant","schema","focus","responsiveSize","responsiveMargin","Content","Hidden"],"mappings":"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"}

package/components/TabListTab/style.mjs

@@ -1,2 +1,2 @@
-import styled,{css}from'styled-components';import tinycolor from'tinycolor2';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 shouldForwardTabListTabProp=createShouldForwardProp((o=>!['variant','active'].includes(o)));const shouldForwardContentProp=createShouldForwardProp();const template=o=>`\n  color: ${o.color};\n  background-color: ${o.backgroundColor};\n  ${hover(`\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n  `)}\n`;const COLOR_SCHEMA={underlined:{default:css(["",""],(o=>template({color:o.active?o.palette.colorActive??o.theme.colors['content-brand-primary']:o.palette.color??o.theme.colors['content-onmain-primary'],colorHover:o.active?o.palette.colorActive??o.theme.colors['content-brand-primary']:o.palette.colorHover??o.palette.color??tinycolor(o.theme.colors['content-onmain-primary']).lighten(10).toString(),backgroundColor:o.active?o.palette.backgroundColorActive??o.theme.colors.transparent:o.palette.backgroundColor??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActive??o.theme.colors.transparent:o.palette.backgroundColorHover??o.palette.backgroundColor??o.theme.colors.transparent}))),disabled:css(["",""],(o=>template({color:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],colorHover:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],backgroundColor:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors.transparent:o.palette.backgroundColorDisabled??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors.transparent:o.palette.backgroundColorDisabled??o.theme.colors.transparent})))},filled:{default:css(["",""],(o=>template({color:o.active?o.palette.colorActive??o.theme.colors['content-onmain-primary']:o.palette.color??o.theme.colors['content-onmain-primary'],colorHover:o.active?o.palette.colorActive??o.theme.colors['content-onmain-primary']:o.palette.colorHover??o.palette.color??o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.palette.backgroundColorActive??o.theme.colors['bg-onmain-tertiary']:o.palette.backgroundColor??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActive??o.theme.colors['bg-onmain-tertiary']:o.palette.backgroundColorHover??o.palette.backgroundColor??o.theme.colors['content-oncolor-hover']}))),disabled:css(["",""],(o=>template({color:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],colorHover:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],backgroundColor:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors['bg-disabled-large']:o.palette.backgroundColorDisabled??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors['bg-disabled-large']:o.palette.backgroundColorDisabled??o.theme.colors.transparent})))},clear:{default:css(["",""],(o=>template({color:o.active?o.palette.colorActive??o.theme.colors['content-onmain-primary']:o.palette.color??o.theme.colors['content-onmain-tertiary'],colorHover:o.active?o.palette.colorActive??o.theme.colors['content-onmain-primary']:o.palette.colorHover??o.palette.color??o.theme.colors['content-onmain-secondary'],backgroundColor:o.active?o.palette.backgroundColorActive??o.theme.colors.transparent:o.palette.backgroundColor??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActive??o.theme.colors.transparent:o.palette.backgroundColorHover??o.palette.backgroundColor??o.theme.colors.transparent}))),disabled:css(["",""],(o=>template({color:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],colorHover:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],backgroundColor:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors.transparent:o.palette.backgroundColorDisabled??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors.transparent:o.palette.backgroundColorDisabled??o.theme.colors.transparent})))}};const Underline=styled.span.withConfig({displayName:"TabListTab__Underline",componentId:"ui__sc-m6g7x8-0"})(["box-sizing:border-box;position:relative;display:flex;align-items:center;flex-grow:1;&::after{content:'';position:absolute;right:0;bottom:0;left:0;height:2px;background-color:currentcolor;}"]);const Root=styled.button.withConfig({shouldForwardProp:shouldForwardTabListTabProp}).withConfig({displayName:"TabListTab__Root",componentId:"ui__sc-m6g7x8-1"})(["box-sizing:border-box;appearance:none;position:relative;display:inline-flex;margin:0;padding:0;border:none;font:inherit;text-align:left;align-items:stretch;flex-shrink:0;transition-property:background-color;transition-duration:250ms;"," "," "," "," ",""],(o=>`\n    &, \n    & * {\n      cursor: ${o.disabled?'not-allowed':'pointer'};  \n    }\n    & > ${Underline}::after {\n      opacity: ${o.variant==='underlined'&&o.active?1:0};\n    }\n  `),(o=>{const e=COLOR_SCHEMA[o.variant];return o.disabled?e.disabled:e.default}),focus,responsiveSize,responsiveMargin);const Content=styled.span.withConfig({shouldForwardProp:shouldForwardContentProp}).withConfig({displayName:"TabListTab__Content",componentId:"ui__sc-m6g7x8-2"})(["display:flex;flex-direction:column;justify-content:center;flex-grow:1;",""],responsiveMargin);const Hidden=styled.span.withConfig({displayName:"TabListTab__Hidden",componentId:"ui__sc-m6g7x8-3"})(["display:flex;flex-direction:column;justify-content:center;flex-grow:1;height:0;& *{visibility:hidden !important;font-weight:900 !important;}"]);export{Content,Hidden,Root,Underline};
+import styled,{css}from'styled-components';import tinycolor from'tinycolor2';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 shouldForwardTabListTabProp=createShouldForwardProp(o=>!['variant','active'].includes(o));const shouldForwardContentProp=createShouldForwardProp();const template=o=>`\n  color: ${o.color};\n  background-color: ${o.backgroundColor};\n  ${hover(`\n    color: ${o.colorHover};\n    background-color: ${o.backgroundColorHover};\n  `)}\n`;const COLOR_SCHEMA={underlined:{default:css(["",""],o=>template({color:o.active?o.palette.colorActive??o.theme.colors['content-brand-primary']:o.palette.color??o.theme.colors['content-onmain-primary'],colorHover:o.active?o.palette.colorActive??o.theme.colors['content-brand-primary']:o.palette.colorHover??o.palette.color??tinycolor(o.theme.colors['content-onmain-primary']).lighten(10).toString(),backgroundColor:o.active?o.palette.backgroundColorActive??o.theme.colors.transparent:o.palette.backgroundColor??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActive??o.theme.colors.transparent:o.palette.backgroundColorHover??o.palette.backgroundColor??o.theme.colors.transparent})),disabled:css(["",""],o=>template({color:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],colorHover:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],backgroundColor:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors.transparent:o.palette.backgroundColorDisabled??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors.transparent:o.palette.backgroundColorDisabled??o.theme.colors.transparent}))},filled:{default:css(["",""],o=>template({color:o.active?o.palette.colorActive??o.theme.colors['content-onmain-primary']:o.palette.color??o.theme.colors['content-onmain-primary'],colorHover:o.active?o.palette.colorActive??o.theme.colors['content-onmain-primary']:o.palette.colorHover??o.palette.color??o.theme.colors['content-onmain-primary'],backgroundColor:o.active?o.palette.backgroundColorActive??o.theme.colors['bg-onmain-tertiary']:o.palette.backgroundColor??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActive??o.theme.colors['bg-onmain-tertiary']:o.palette.backgroundColorHover??o.palette.backgroundColor??o.theme.colors['content-oncolor-hover']})),disabled:css(["",""],o=>template({color:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],colorHover:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],backgroundColor:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors['bg-disabled-large']:o.palette.backgroundColorDisabled??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors['bg-disabled-large']:o.palette.backgroundColorDisabled??o.theme.colors.transparent}))},clear:{default:css(["",""],o=>template({color:o.active?o.palette.colorActive??o.theme.colors['content-onmain-primary']:o.palette.color??o.theme.colors['content-onmain-tertiary'],colorHover:o.active?o.palette.colorActive??o.theme.colors['content-onmain-primary']:o.palette.colorHover??o.palette.color??o.theme.colors['content-onmain-secondary'],backgroundColor:o.active?o.palette.backgroundColorActive??o.theme.colors.transparent:o.palette.backgroundColor??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActive??o.theme.colors.transparent:o.palette.backgroundColorHover??o.palette.backgroundColor??o.theme.colors.transparent})),disabled:css(["",""],o=>template({color:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],colorHover:o.active?o.palette.colorActiveDisabled??o.theme.colors['content-disabled']:o.palette.colorDisabled??o.theme.colors['content-disabled'],backgroundColor:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors.transparent:o.palette.backgroundColorDisabled??o.theme.colors.transparent,backgroundColorHover:o.active?o.palette.backgroundColorActiveDisabled??o.theme.colors.transparent:o.palette.backgroundColorDisabled??o.theme.colors.transparent}))}};const Underline=styled.span.withConfig({displayName:"TabListTab__Underline",componentId:"ui__sc-m6g7x8-0"})(["box-sizing:border-box;position:relative;display:flex;align-items:center;flex-grow:1;&::after{content:'';position:absolute;right:0;bottom:0;left:0;height:2px;background-color:currentcolor;}"]);const Root=styled.button.withConfig({shouldForwardProp:shouldForwardTabListTabProp}).withConfig({displayName:"TabListTab__Root",componentId:"ui__sc-m6g7x8-1"})(["box-sizing:border-box;appearance:none;position:relative;display:inline-flex;margin:0;padding:0;border:none;font:inherit;text-align:left;align-items:stretch;flex-shrink:0;transition-property:background-color;transition-duration:250ms;"," "," "," "," ",""],o=>`\n    &, \n    & * {\n      cursor: ${o.disabled?'not-allowed':'pointer'};  \n    }\n    & > ${Underline}::after {\n      opacity: ${o.variant==='underlined'&&o.active?1:0};\n    }\n  `,o=>{const e=COLOR_SCHEMA[o.variant];return o.disabled?e.disabled:e.default},focus,responsiveSize,responsiveMargin);const Content=styled.span.withConfig({shouldForwardProp:shouldForwardContentProp}).withConfig({displayName:"TabListTab__Content",componentId:"ui__sc-m6g7x8-2"})(["display:flex;flex-direction:column;justify-content:center;flex-grow:1;",""],responsiveMargin);const Hidden=styled.span.withConfig({displayName:"TabListTab__Hidden",componentId:"ui__sc-m6g7x8-3"})(["display:flex;flex-direction:column;justify-content:center;flex-grow:1;height:0;& *{visibility:hidden !important;font-weight:900 !important;}"]);export{Content,Hidden,Root,Underline};
 //# sourceMappingURL=style.mjs.map

package/components/TabListTab/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/TabListTab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { ResponsiveMarginProps } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { TabListTabPalette, StyledTabListTabProps } from './types'\n\nconst shouldForwardTabListTabProp = createShouldForwardProp((propKey) => !['variant', 'active'].includes(propKey))\n\nconst shouldForwardContentProp = createShouldForwardProp()\n\nconst template = (palette: TabListTabPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n  ${hover(`\n    color: ${palette.colorHover};\n    background-color: ${palette.backgroundColorHover};\n  `)}\n`\n\nconst COLOR_SCHEMA = {\n  underlined: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-brand-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-brand-primary'])\n            : (props.palette.colorHover ??\n              props.palette.color ??\n              (tinycolor(props.theme.colors['content-onmain-primary']).lighten(10).toString() as CSSColor)),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorHover ?? props.palette.backgroundColor ?? props.theme.colors.transparent),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n  filled: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.colorHover ?? props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors['bg-onmain-tertiary'])\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors['bg-onmain-tertiary'])\n            : (props.palette.backgroundColorHover ??\n              props.palette.backgroundColor ??\n              props.theme.colors['content-oncolor-hover']),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors['bg-disabled-large'])\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors['bg-disabled-large'])\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n  clear: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-tertiary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.colorHover ?? props.palette.color ?? props.theme.colors['content-onmain-secondary']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorHover ?? props.palette.backgroundColor ?? props.theme.colors.transparent),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n}\n\nexport const Underline = styled.span`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 2px;\n    background-color: currentcolor;\n  }\n`\n\nexport const Root = styled.button.withConfig<StyledTabListTabProps>({\n  shouldForwardProp: shouldForwardTabListTabProp,\n})`\n  box-sizing: border-box;\n  appearance: none;\n  position: relative;\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n  border: none;\n  font: inherit;\n  text-align: left;\n  align-items: stretch;\n  flex-shrink: 0;\n  transition-property: background-color;\n  transition-duration: 250ms;\n\n  ${(props) => `\n    &, \n    & * {\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};  \n    }\n    & > ${Underline}::after {\n      opacity: ${props.variant === 'underlined' && props.active ? 1 : 0};\n    }\n  `}\n\n  ${(props) => {\n    const schema = COLOR_SCHEMA[props.variant]\n\n    return props.disabled ? schema.disabled : schema.default\n  }}\n\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Content = styled.span.withConfig<ResponsiveMarginProps>({\n  shouldForwardProp: shouldForwardContentProp,\n})`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n\n  ${responsiveMargin}\n`\n\nexport const Hidden = styled.span`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n  height: 0;\n\n  & * {\n    visibility: hidden !important;\n    font-weight: 900 !important;\n  }\n`\n"],"names":["shouldForwardTabListTabProp","createShouldForwardProp","propKey","includes","shouldForwardContentProp","template","palette","color","backgroundColor","hover","colorHover","backgroundColorHover","COLOR_SCHEMA","underlined","default","css","props","active","colorActive","theme","colors","tinycolor","lighten","toString","backgroundColorActive","transparent","disabled","colorActiveDisabled","colorDisabled","backgroundColorActiveDisabled","backgroundColorDisabled","filled","clear","Underline","styled","span","withConfig","displayName","componentId","Root","button","shouldForwardProp","variant","schema","focus","responsiveSize","responsiveMargin","Content","Hidden"],"mappings":"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"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/TabListTab/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { ResponsiveMarginProps } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { TabListTabPalette, StyledTabListTabProps } from './types'\n\nconst shouldForwardTabListTabProp = createShouldForwardProp((propKey) => !['variant', 'active'].includes(propKey))\n\nconst shouldForwardContentProp = createShouldForwardProp()\n\nconst template = (palette: TabListTabPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n  ${hover(`\n    color: ${palette.colorHover};\n    background-color: ${palette.backgroundColorHover};\n  `)}\n`\n\nconst COLOR_SCHEMA = {\n  underlined: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-brand-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-brand-primary'])\n            : (props.palette.colorHover ??\n              props.palette.color ??\n              (tinycolor(props.theme.colors['content-onmain-primary']).lighten(10).toString() as CSSColor)),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorHover ?? props.palette.backgroundColor ?? props.theme.colors.transparent),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n  filled: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.colorHover ?? props.palette.color ?? props.theme.colors['content-onmain-primary']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors['bg-onmain-tertiary'])\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors['bg-onmain-tertiary'])\n            : (props.palette.backgroundColorHover ??\n              props.palette.backgroundColor ??\n              props.theme.colors['content-oncolor-hover']),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors['bg-disabled-large'])\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors['bg-disabled-large'])\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n  clear: {\n    default: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.color ?? props.theme.colors['content-onmain-tertiary']),\n          colorHover: props.active\n            ? (props.palette.colorActive ?? props.theme.colors['content-onmain-primary'])\n            : (props.palette.colorHover ?? props.palette.color ?? props.theme.colors['content-onmain-secondary']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColor ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActive ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorHover ?? props.palette.backgroundColor ?? props.theme.colors.transparent),\n        })}\n    `,\n    disabled: css<StyledTabListTabProps>`\n      ${(props) =>\n        template({\n          color: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          colorHover: props.active\n            ? (props.palette.colorActiveDisabled ?? props.theme.colors['content-disabled'])\n            : (props.palette.colorDisabled ?? props.theme.colors['content-disabled']),\n          backgroundColor: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n          backgroundColorHover: props.active\n            ? (props.palette.backgroundColorActiveDisabled ?? props.theme.colors.transparent)\n            : (props.palette.backgroundColorDisabled ?? props.theme.colors.transparent),\n        })}\n    `,\n  },\n}\n\nexport const Underline = styled.span`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 2px;\n    background-color: currentcolor;\n  }\n`\n\nexport const Root = styled.button.withConfig<StyledTabListTabProps>({\n  shouldForwardProp: shouldForwardTabListTabProp,\n})`\n  box-sizing: border-box;\n  appearance: none;\n  position: relative;\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n  border: none;\n  font: inherit;\n  text-align: left;\n  align-items: stretch;\n  flex-shrink: 0;\n  transition-property: background-color;\n  transition-duration: 250ms;\n\n  ${(props) => `\n    &, \n    & * {\n      cursor: ${props.disabled ? 'not-allowed' : 'pointer'};  \n    }\n    & > ${Underline}::after {\n      opacity: ${props.variant === 'underlined' && props.active ? 1 : 0};\n    }\n  `}\n\n  ${(props) => {\n    const schema = COLOR_SCHEMA[props.variant]\n\n    return props.disabled ? schema.disabled : schema.default\n  }}\n\n  ${focus}\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Content = styled.span.withConfig<ResponsiveMarginProps>({\n  shouldForwardProp: shouldForwardContentProp,\n})`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n\n  ${responsiveMargin}\n`\n\nexport const Hidden = styled.span`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n  height: 0;\n\n  & * {\n    visibility: hidden !important;\n    font-weight: 900 !important;\n  }\n`\n"],"names":["shouldForwardTabListTabProp","createShouldForwardProp","propKey","includes","shouldForwardContentProp","template","palette","color","backgroundColor","hover","colorHover","backgroundColorHover","COLOR_SCHEMA","underlined","default","css","props","active","colorActive","theme","colors","tinycolor","lighten","toString","backgroundColorActive","transparent","disabled","colorActiveDisabled","colorDisabled","backgroundColorActiveDisabled","backgroundColorDisabled","filled","clear","Underline","styled","span","withConfig","displayName","componentId","Root","button","shouldForwardProp","variant","schema","focus","responsiveSize","responsiveMargin","Content","Hidden"],"mappings":"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"}

package/components/Tabs/style.js

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var color=require('../../mixins/color.js');var responsiveProperty=require('../../mixins/responsive-property.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const borderColor=o=>styled.css(["border-bottom:1px solid ",";"],o);const Root=styled__default.default.div.withConfig({shouldForwardProp:o=>o==='children'}).withConfig({displayName:"Tabs__Root",componentId:"ui__sc-ggtlgu-0"})(["color:rgba(247,247,247,1);display:flex;align-items:flex-end;justify-content:center;flex-direction:row;"," "," ",""],(o=>o.borderColor&&!o.noBorder?color.color(o.borderColor,borderColor):null),(o=>o.color?color.color(o.color):null),responsiveProperty.responsiveProperty('width'));const Inner=styled__default.default.div.withConfig({displayName:"Tabs__Inner",componentId:"ui__sc-ggtlgu-1"})(["position:relative;display:block;height:auto;padding:0;margin:0 -20px;box-sizing:border-box;background:transparent;overflow:visible;max-width:100%;width:100%;&::before,&::after{position:absolute;top:0;bottom:0;display:block;content:'';width:","px;height:100%;}&::before{left:0;background:linear-gradient(-90deg,rgba(247,247,247,0) 0%,currentcolor 100%);}&::after{right:0;background:linear-gradient(90deg,rgba(247,247,247,0) 0%,currentcolor 100%);}"],20);const Content=styled__default.default.div.withConfig({displayName:"Tabs__Content",componentId:"ui__sc-ggtlgu-2"})(["position:relative;z-index:1;display:block;padding:0;margin:0 auto;white-space:nowrap;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;color:",";scrollbar-width:none;&::-webkit-scrollbar{height:0;background:transparent;visibility:hidden;}&::-webkit-scrollbar-thumb{height:0;background:transparent;visibility:hidden;}",""],(o=>o.theme.colors.mineShaft),(o=>o.noBorder?styled.css(["display:flex;justify-content:space-between;width:100%;"]):null));exports.Content=Content,exports.Inner=Inner,exports.Root=Root;
+'use strict';var styled=require('styled-components');var color=require('../../mixins/color.js');var responsiveProperty=require('../../mixins/responsive-property.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const borderColor=o=>styled.css(["border-bottom:1px solid ",";"],o);const Root=styled__default.default.div.withConfig({shouldForwardProp:o=>o==='children'}).withConfig({displayName:"Tabs__Root",componentId:"ui__sc-ggtlgu-0"})(["color:rgba(247,247,247,1);display:flex;align-items:flex-end;justify-content:center;flex-direction:row;"," "," ",""],o=>o.borderColor&&!o.noBorder?color.color(o.borderColor,borderColor):null,o=>o.color?color.color(o.color):null,responsiveProperty.responsiveProperty('width'));const Inner=styled__default.default.div.withConfig({displayName:"Tabs__Inner",componentId:"ui__sc-ggtlgu-1"})(["position:relative;display:block;height:auto;padding:0;margin:0 -20px;box-sizing:border-box;background:transparent;overflow:visible;max-width:100%;width:100%;&::before,&::after{position:absolute;top:0;bottom:0;display:block;content:'';width:","px;height:100%;}&::before{left:0;background:linear-gradient(-90deg,rgba(247,247,247,0) 0%,currentcolor 100%);}&::after{right:0;background:linear-gradient(90deg,rgba(247,247,247,0) 0%,currentcolor 100%);}"],20);const Content=styled__default.default.div.withConfig({displayName:"Tabs__Content",componentId:"ui__sc-ggtlgu-2"})(["position:relative;z-index:1;display:block;padding:0;margin:0 auto;white-space:nowrap;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;color:",";scrollbar-width:none;&::-webkit-scrollbar{height:0;background:transparent;visibility:hidden;}&::-webkit-scrollbar-thumb{height:0;background:transparent;visibility:hidden;}",""],o=>o.theme.colors.mineShaft,o=>o.noBorder?styled.css(["display:flex;justify-content:space-between;width:100%;"]):null);exports.Content=Content,exports.Inner=Inner,exports.Root=Root;
 //# sourceMappingURL=style.js.map