@foxford/ui 2.76.1 → 2.77.0-beta-ee6908c-20250807

package/components/TabList/hooks.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.mjs","sources":["../../../../src/components/TabList/hooks.ts"],"sourcesContent":["import { useState, useRef, useMemo, useCallback, useLayoutEffect, isValidElement } from 'react'\nimport { removeFragments } from 'shared/utils/react'\nimport { useResizeObserver } from 'hooks/useResizeObserver'\nimport { focus } from 'mixins/focus'\nimport type { DomTarget, Nullable } from 'shared/types'\n\nexport const useTabList = ({\n  tabList,\n  defaultActiveTab,\n  activeTab,\n  onActiveTabChange,\n}: {\n  tabList: React.ReactElement[]\n  defaultActiveTab?: string\n  activeTab?: string\n  onActiveTabChange?: (tabId: string) => void\n}): {\n  activeTab?: string\n  firstTab?: string\n  onActiveTabChange: (tabId: string) => void\n  getTabIndex: (tabId: string) => number\n} => {\n  const [activeTabLocal, setActiveTabLocal] = useState(defaultActiveTab)\n\n  const activeTabId = activeTab !== undefined ? activeTab : activeTabLocal\n  const firstTabId =\n    tabList[0] && typeof tabList[0].props === 'object' && tabList[0].props !== null ? tabList[0].props.id : undefined\n\n  return {\n    activeTab: activeTabId,\n    firstTab: firstTabId,\n    onActiveTabChange: (tabId) => {\n      if (activeTab === undefined) setActiveTabLocal(tabId)\n      if (onActiveTabChange) onActiveTabChange(tabId)\n    },\n    getTabIndex: (tabId) => {\n      if (activeTabId) {\n        return tabId === activeTabId ? 0 : -1\n      } else if (firstTabId) {\n        return tabId === firstTabId ? 0 : -1\n      }\n\n      return -1\n    },\n  }\n}\n\nexport const useTabListItems = (\n  tabs: React.ReactNode,\n  menuItems: React.ReactNode\n): {\n  tabs: React.ReactElement[]\n  menuItems: React.ReactElement[]\n  combined: React.ReactElement[]\n} =>\n  useMemo(() => {\n    const tabListTabs = removeFragments(tabs, 2).filter(isValidElement)\n    const tabListMenuItems = removeFragments(menuItems, 2).filter(isValidElement)\n\n    return {\n      tabs: tabListTabs,\n      menuItems: tabListMenuItems,\n      combined: [...tabListTabs, ...tabListMenuItems],\n    }\n  }, [tabs, menuItems])\n\nexport const useTabListAutoGroup = ({ enabled, tabList }: { enabled: boolean; tabList: React.ReactElement[] }) => {\n  const rootRef = useRef<Nullable<HTMLElement>>(null)\n  const [addonRef, setAddonRef] = useState<Nullable<HTMLElement>>(null)\n  const [controlRef, setControlRef] = useState<Nullable<HTMLElement>>(null)\n  const [tabsHidden, setTabsHidden] = useState<HTMLElement[]>([])\n\n  const containerRef = useRef<Nullable<HTMLElement>>(null)\n  const trackRef = useRef<Nullable<HTMLElement>>(null)\n\n  const tabsHiddenRefs = useRef<Record<number, HTMLElement | null>>({})\n  const [tabsVisibility, setTabsVisibility] = useState<Record<number, boolean>>({})\n\n  const observerTargets = useMemo<DomTarget[]>(\n    () => [rootRef, addonRef, controlRef, ...tabsHidden],\n    [addonRef, controlRef, tabsHidden]\n  )\n\n  const detectTabsVisibility = useCallback(() => {\n    if (\n      !containerRef.current ||\n      !trackRef.current ||\n      !containerRef.current.isConnected ||\n      !trackRef.current.isConnected ||\n      tabsHidden.length === 0\n    ) {\n      setTabsVisibility({})\n      return\n    }\n\n    const update: Record<number, boolean> = {}\n\n    const containerRight = containerRef.current.getBoundingClientRect().right - focus.padding\n    const tabsRight = tabsHidden.map((tab) => tab.getBoundingClientRect().right)\n\n    if (tabsRight.every((tabRight) => tabRight < containerRight)) {\n      tabsRight.forEach((_, idx) => {\n        update[idx] = true\n      })\n    } else {\n      const trackRight = trackRef.current.getBoundingClientRect().right - focus.padding\n      tabsRight.forEach((tabRight, idx) => {\n        update[idx] = tabRight < trackRight\n      })\n    }\n\n    setTabsVisibility((prev) => {\n      return JSON.stringify(update) !== JSON.stringify(prev) ? update : prev\n    })\n  }, [tabsHidden])\n\n  useResizeObserver({\n    enabled,\n    onResize: detectTabsVisibility,\n    target: observerTargets,\n  })\n\n  useLayoutEffect(() => {\n    let update: HTMLElement[] = []\n\n    if (enabled) {\n      update = Object.keys(tabsHiddenRefs.current).reduce((acc, idx) => {\n        if (tabsHiddenRefs.current[idx]) {\n          acc[idx] = tabsHiddenRefs.current[idx]\n        }\n\n        return acc\n      }, [])\n    }\n\n    setTabsHidden(update)\n  }, [enabled, tabList])\n\n  const groups = useMemo(() => {\n    if (enabled) {\n      return tabList.reduce<{\n        tabs: React.ReactElement[]\n        menuItems: React.ReactElement[]\n      }>(\n        (acc, item, idx) => {\n          if (tabsVisibility[idx] === true) {\n            acc.tabs.push(item)\n          } else if (tabsVisibility[idx] === false) {\n            acc.menuItems.push(item)\n          }\n\n          return acc\n        },\n        { tabs: [], menuItems: [] }\n      )\n    }\n\n    return {\n      tabs: [],\n      menuItems: [],\n    }\n  }, [enabled, tabList, tabsVisibility])\n\n  return {\n    groups: {\n      tabs: groups.tabs,\n      menuItems: groups.menuItems,\n    },\n    refs: {\n      root: (node: HTMLElement | null) => {\n        rootRef.current = node\n      },\n      container: (node: HTMLElement | null) => {\n        containerRef.current = node\n      },\n      track: (node: HTMLElement | null) => {\n        trackRef.current = node\n      },\n      tabHidden: (idx: number, node: HTMLElement | null) => {\n        tabsHiddenRefs.current[idx] = node\n      },\n      addon: (node: HTMLElement | null) => {\n        setAddonRef(node)\n      },\n      control: (node: HTMLElement | null) => {\n        setControlRef(node)\n      },\n    },\n  }\n}\n"],"names":["useTabList","tabList","defaultActiveTab","activeTab","onActiveTabChange","activeTabLocal","setActiveTabLocal","useState","activeTabId","undefined","firstTabId","props","id","firstTab","tabId","getTabIndex","useTabListItems","tabs","menuItems","useMemo","tabListTabs","removeFragments","filter","isValidElement","tabListMenuItems","combined","useTabListAutoGroup","enabled","rootRef","useRef","addonRef","setAddonRef","controlRef","setControlRef","tabsHidden","setTabsHidden","containerRef","trackRef","tabsHiddenRefs","tabsVisibility","setTabsVisibility","observerTargets","detectTabsVisibility","useCallback","current","isConnected","length","update","containerRight","getBoundingClientRect","right","focus","padding","tabsRight","map","tab","every","tabRight","forEach","_","idx","trackRight","prev","JSON","stringify","useResizeObserver","onResize","target","useLayoutEffect","Object","keys","reduce","acc","groups","item","push","refs","root","node","container","track","tabHidden","addon","control"],"mappings":"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"}
+{"version":3,"file":"hooks.mjs","sources":["../../../../src/components/TabList/hooks.ts"],"sourcesContent":["import { useState, useRef, useMemo, useCallback, useLayoutEffect, isValidElement } from 'react'\nimport { removeFragments } from 'shared/utils/react'\nimport { useResizeObserver } from 'hooks/useResizeObserver'\nimport { focus } from 'mixins/focus'\nimport type { DomTarget, Nullable } from 'shared/types'\n\nexport const useTabList = ({\n  tabList,\n  defaultActiveTab,\n  activeTab,\n  onActiveTabChange,\n}: {\n  tabList: React.ReactElement[]\n  defaultActiveTab?: string\n  activeTab?: string\n  onActiveTabChange?: (tabId: string) => void\n}): {\n  activeTab?: string\n  firstTab?: string\n  onActiveTabChange: (tabId: string) => void\n  getTabIndex: (tabId: string) => number\n} => {\n  const [activeTabLocal, setActiveTabLocal] = useState(defaultActiveTab)\n\n  const activeTabId = activeTab !== undefined ? activeTab : activeTabLocal\n  const firstTabId =\n    tabList[0] && typeof tabList[0].props === 'object' && tabList[0].props !== null ? tabList[0].props.id : undefined\n\n  return useMemo(\n    () => ({\n      activeTab: activeTabId,\n      firstTab: firstTabId,\n      onActiveTabChange: (tabId) => {\n        if (activeTab === undefined) setActiveTabLocal(tabId)\n        if (onActiveTabChange) onActiveTabChange(tabId)\n      },\n      getTabIndex: (tabId) => {\n        if (activeTabId) {\n          return tabId === activeTabId ? 0 : -1\n        } else if (firstTabId) {\n          return tabId === firstTabId ? 0 : -1\n        }\n\n        return -1\n      },\n    }),\n    [activeTabId, firstTabId, activeTab, onActiveTabChange]\n  )\n}\n\nexport const useTabListItems = (\n  tabs: React.ReactNode,\n  menuItems: React.ReactNode\n): {\n  tabs: React.ReactElement[]\n  menuItems: React.ReactElement[]\n  combined: React.ReactElement[]\n} =>\n  useMemo(() => {\n    const tabListTabs = removeFragments(tabs, 2).filter(isValidElement)\n    const tabListMenuItems = removeFragments(menuItems, 2).filter(isValidElement)\n\n    return {\n      tabs: tabListTabs,\n      menuItems: tabListMenuItems,\n      combined: [...tabListTabs, ...tabListMenuItems],\n    }\n  }, [tabs, menuItems])\n\nexport const useTabListAutoGroup = ({ enabled, tabList }: { enabled: boolean; tabList: React.ReactElement[] }) => {\n  const rootRef = useRef<Nullable<HTMLElement>>(null)\n  const [addonRef, setAddonRef] = useState<Nullable<HTMLElement>>(null)\n  const [controlRef, setControlRef] = useState<Nullable<HTMLElement>>(null)\n  const [tabsHidden, setTabsHidden] = useState<HTMLElement[]>([])\n\n  const containerRef = useRef<Nullable<HTMLElement>>(null)\n  const trackRef = useRef<Nullable<HTMLElement>>(null)\n\n  const tabsHiddenRefs = useRef<Record<number, HTMLElement | null>>({})\n  const [tabsVisibility, setTabsVisibility] = useState<Record<number, boolean>>({})\n\n  const observerTargets = useMemo<DomTarget[]>(\n    () => [rootRef, addonRef, controlRef, ...tabsHidden],\n    [addonRef, controlRef, tabsHidden]\n  )\n\n  const detectTabsVisibility = useCallback(() => {\n    if (\n      !containerRef.current ||\n      !trackRef.current ||\n      !containerRef.current.isConnected ||\n      !trackRef.current.isConnected ||\n      tabsHidden.length === 0\n    ) {\n      setTabsVisibility({})\n      return\n    }\n\n    const update: Record<number, boolean> = {}\n\n    const containerRight = containerRef.current.getBoundingClientRect().right - focus.padding\n    const tabsRight = tabsHidden.map((tab) => tab.getBoundingClientRect().right)\n\n    if (tabsRight.every((tabRight) => tabRight < containerRight)) {\n      tabsRight.forEach((_, idx) => {\n        update[idx] = true\n      })\n    } else {\n      const trackRight = trackRef.current.getBoundingClientRect().right - focus.padding\n      tabsRight.forEach((tabRight, idx) => {\n        update[idx] = tabRight < trackRight\n      })\n    }\n\n    setTabsVisibility((prev) => {\n      return JSON.stringify(update) !== JSON.stringify(prev) ? update : prev\n    })\n  }, [tabsHidden])\n\n  useResizeObserver({\n    enabled,\n    onResize: detectTabsVisibility,\n    target: observerTargets,\n  })\n\n  useLayoutEffect(() => {\n    let update: HTMLElement[] = []\n\n    if (enabled) {\n      update = Object.keys(tabsHiddenRefs.current).reduce((acc, idx) => {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        if (tabsHiddenRefs.current[idx]) {\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          acc[idx] = tabsHiddenRefs.current[idx]\n        }\n\n        return acc\n      }, [])\n    }\n\n    setTabsHidden(update)\n  }, [enabled, tabList])\n\n  const groups = useMemo(() => {\n    if (enabled) {\n      return tabList.reduce<{\n        tabs: React.ReactElement[]\n        menuItems: React.ReactElement[]\n      }>(\n        (acc, item, idx) => {\n          if (tabsVisibility[idx] === true) {\n            acc.tabs.push(item)\n          } else if (tabsVisibility[idx] === false) {\n            acc.menuItems.push(item)\n          }\n\n          return acc\n        },\n        { tabs: [], menuItems: [] }\n      )\n    }\n\n    return {\n      tabs: [],\n      menuItems: [],\n    }\n  }, [enabled, tabList, tabsVisibility])\n\n  return {\n    groups: {\n      tabs: groups.tabs,\n      menuItems: groups.menuItems,\n    },\n    refs: {\n      root: (node: HTMLElement | null) => {\n        rootRef.current = node\n      },\n      container: (node: HTMLElement | null) => {\n        containerRef.current = node\n      },\n      track: (node: HTMLElement | null) => {\n        trackRef.current = node\n      },\n      tabHidden: (idx: number, node: HTMLElement | null) => {\n        tabsHiddenRefs.current[idx] = node\n      },\n      addon: (node: HTMLElement | null) => {\n        setAddonRef(node)\n      },\n      control: (node: HTMLElement | null) => {\n        setControlRef(node)\n      },\n    },\n  }\n}\n"],"names":["useTabList","tabList","defaultActiveTab","activeTab","onActiveTabChange","activeTabLocal","setActiveTabLocal","useState","activeTabId","undefined","firstTabId","props","id","useMemo","firstTab","tabId","getTabIndex","useTabListItems","tabs","menuItems","tabListTabs","removeFragments","filter","isValidElement","tabListMenuItems","combined","useTabListAutoGroup","enabled","rootRef","useRef","addonRef","setAddonRef","controlRef","setControlRef","tabsHidden","setTabsHidden","containerRef","trackRef","tabsHiddenRefs","tabsVisibility","setTabsVisibility","observerTargets","detectTabsVisibility","useCallback","current","isConnected","length","update","containerRight","getBoundingClientRect","right","focus","padding","tabsRight","map","tab","every","tabRight","forEach","_","idx","trackRight","prev","JSON","stringify","useResizeObserver","onResize","target","useLayoutEffect","Object","keys","reduce","acc","groups","item","push","refs","root","node","container","track","tabHidden","addon","control"],"mappings":"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"}

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:0px;left:0px;",""],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:0px;&,& *{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: 0px;\n  left: 0px;\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: 0px;\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","default","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","default","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:0px;left:0px;",""],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:0px;&,& *{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: 0px;\n  left: 0px;\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: 0px;\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.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","jsx","isValidElement","_jsxs","jsxs","_Fragment","marginRight","marginLeft","Text","displayName","SIZES"],"mappings":"qRAuBMA,MAAAA,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,MAAUA,WACjBC,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,WAAAE,IAACD,gBAAgB,CAAC,yBAAqB,EAAAtB,SACpCwB,MAAAA,eAAexB,WAAoBA,GAAa,iBAAmBA,GAAa,SAC/EA,SACSA,GAAa,WACtBA,EAAS,CACPQ,YACAS,YACAE,mBAGFM,WAAAC,KAAAC,oBAAA,CAAA3B,SACG,CAAAwB,MAAcA,eAAC1B,GACZA,SACOA,GAAc,WACrBA,EAAU,CACRmB,YACAE,mBAEF,KACJM,WAAAC,KAACJ,cAAc,CAACM,YAAa7B,EAAa,EAAI,EAAG8B,WAAY/B,EAAY,EAAI,EAAEE,SAC5E,CAAAwB,MAAAA,eAAe3B,GACdA,SACSA,GAAS,WAClBA,EAAKW,UACIX,GAAS,iBAAmBA,GAAS,SAC9CwB,WAAAE,IAACO,UAAI,IAAKtB,EAASR,SAAGH,IACpB,KACJwB,WAAAE,IAACD,aAAa,CAAC,eAAW,EAAAtB,SACvBwB,MAAcA,eAAC3B,GACdA,SACSA,GAAS,WAClBA,EAAKW,UACIX,GAAS,iBAAmBA,GAAS,SAC9CwB,WAAAE,IAACO,UAAI,IAAKtB,EAASR,SAAGH,IACpB,UAGP2B,MAAcA,eAACzB,GACZA,SACOA,GAAe,WACtBA,EAAW,CACTkB,YACAE,mBAEF,WAIE,IAGlB,CACEY,YAlJmB,aAmJnBtB,MAAOuB,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","jsx","isValidElement","_jsxs","jsxs","_Fragment","marginRight","marginLeft","Text","displayName","SIZES"],"mappings":"qRAuBMA,MAAAA,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,MAAUA,WACjBC,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,WAAAE,IAACD,gBAAgB,CAAC,yBAAqB,EAAAtB,SACpCwB,MAAAA,eAAexB,WAAoBA,GAAa,iBAAmBA,GAAa,SAC/EA,SACSA,GAAa,WACtBA,EAAS,CACPQ,YACAS,YACAE,mBAGFM,WAAAC,KAAAC,oBAAA,CAAA3B,SACG,CAAAwB,MAAcA,eAAC1B,GACZA,SACOA,GAAc,WACnBA,EAAU,CACRmB,YACAE,mBAEF,KACNM,WAAAC,KAACJ,cAAc,CAACM,YAAa7B,EAAa,EAAI,EAAG8B,WAAY/B,EAAY,EAAI,EAAEE,SAC5E,CAAAwB,MAAAA,eAAe3B,GACdA,SACSA,GAAS,WAClBA,EAAKW,UACIX,GAAS,iBAAmBA,GAAS,SAC9CwB,WAAAE,IAACO,UAAI,IAAKtB,EAASR,SAAGH,IACpB,KACJwB,WAAAE,IAACD,aAAa,CAAC,eAAW,EAAAtB,SACvBwB,MAAcA,eAAC3B,GACdA,SACSA,GAAS,WAClBA,EAAKW,UACIX,GAAS,iBAAmBA,GAAS,SAC9CwB,WAAAE,IAACO,UAAI,IAAKtB,EAASR,SAAGH,IACpB,UAGP2B,MAAcA,eAACzB,GACZA,SACOA,GAAe,WACpBA,EAAW,CACTkB,YACAE,mBAEF,WAIA,IAGlB,CACEY,YAlJmB,aAmJnBtB,MAAOuB,MAAAA"}

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":"oXAuBMA,MAAAA,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,yBAAqB,EAAAtB,SACpCuB,eAAevB,WAAoBA,GAAa,iBAAmBA,GAAa,SAC/EA,SACSA,GAAa,WACtBA,EAAS,CACPQ,YACAS,YACAE,mBAGFK,KAAAC,SAAA,CAAAzB,SACG,CAAAuB,eAAezB,GACZA,SACOA,GAAc,WACrBA,EAAU,CACRmB,YACAE,mBAEF,KACJK,KAACF,QAAc,CAACI,YAAa3B,EAAa,EAAI,EAAG4B,WAAY7B,EAAY,EAAI,EAAEE,SAC5E,CAAAuB,eAAe1B,GACdA,SACSA,GAAS,WAClBA,EAAKW,UACIX,GAAS,iBAAmBA,GAAS,SAC9CwB,IAACO,KAAI,IAAKpB,EAASR,SAAGH,IACpB,KACJwB,IAACC,OAAa,CAAC,eAAW,EAAAtB,SACvBuB,eAAe1B,GACdA,SACSA,GAAS,WAClBA,EAAKW,UACIX,GAAS,iBAAmBA,GAAS,SAC9CwB,IAACO,KAAI,IAAKpB,EAASR,SAAGH,IACpB,UAGP0B,eAAexB,GACZA,SACOA,GAAe,WACtBA,EAAW,CACTkB,YACAE,mBAEF,WAIE,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":"oXAuBMA,MAAAA,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,yBAAqB,EAAAtB,SACpCuB,eAAevB,WAAoBA,GAAa,iBAAmBA,GAAa,SAC/EA,SACSA,GAAa,WACtBA,EAAS,CACPQ,YACAS,YACAE,mBAGFK,KAAAC,SAAA,CAAAzB,SACG,CAAAuB,eAAezB,GACZA,SACOA,GAAc,WACnBA,EAAU,CACRmB,YACAE,mBAEF,KACNK,KAACF,QAAc,CAACI,YAAa3B,EAAa,EAAI,EAAG4B,WAAY7B,EAAY,EAAI,EAAEE,SAC5E,CAAAuB,eAAe1B,GACdA,SACSA,GAAS,WAClBA,EAAKW,UACIX,GAAS,iBAAmBA,GAAS,SAC9CwB,IAACO,KAAI,IAAKpB,EAASR,SAAGH,IACpB,KACJwB,IAACC,OAAa,CAAC,eAAW,EAAAtB,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"}

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');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 {\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:0px;& *{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');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 {\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, ResponsiveMarginProps } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\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: 0px;\n\n  & * {\n    visibility: hidden !important;\n    font-weight: 900 !important;\n  }\n`\n"],"names":["shouldForwardTabListTabProp","createShouldForwardProp","propKey","includes","shouldForwardContentProp","template","palette","color","backgroundColor","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 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","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';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:0px;& *{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';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, ResponsiveMarginProps } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\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: 0px;\n\n  & * {\n    visibility: hidden !important;\n    font-weight: 900 !important;\n  }\n`\n"],"names":["shouldForwardTabListTabProp","createShouldForwardProp","propKey","includes","shouldForwardContentProp","template","palette","color","backgroundColor","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 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","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":"uTAUA,MAAMA,4BAA8BC,yBAAyBC,IAAa,CAAC,UAAW,UAAUC,SAASD,KAEzG,MAAME,yBAA2BH,0BAEjC,MAAMI,SAAYC,GAA+B,cACtCA,EAAQC,+BACGD,EAAQE,6CAEjBF,EAAQG,sCACGH,EAAQI,+BAIhC,MAAMC,aAAe,CACnBC,WAAY,CACVC,QAASC,IAAG,CAAA,GAAA,KACPC,GACDV,SAAS,CACPE,MAAOQ,EAAMC,OACRD,EAAMT,QAAQW,aAAeF,EAAMG,MAAMC,OAAO,yBAChDJ,EAAMT,QAAQC,OAASQ,EAAMG,MAAMC,OAAO,0BAC/CV,WAAYM,EAAMC,OACbD,EAAMT,QAAQW,aAAeF,EAAMG,MAAMC,OAAO,yBAChDJ,EAAMT,QAAQG,YACfM,EAAMT,QAAQC,OACba,UAAUL,EAAMG,MAAMC,OAAO,2BAA2BE,QAAQ,IAAIC,WACzEd,gBAAiBO,EAAMC,OAClBD,EAAMT,QAAQiB,uBAAyBR,EAAMG,MAAMC,OAAOK,YAC1DT,EAAMT,QAAQE,iBAAmBO,EAAMG,MAAMC,OAAOK,YACzDd,qBAAsBK,EAAMC,OACvBD,EAAMT,QAAQiB,uBAAyBR,EAAMG,MAAMC,OAAOK,YAC1DT,EAAMT,QAAQI,sBAAwBK,EAAMT,QAAQE,iBAAmBO,EAAMG,MAAMC,OAAOK,gBAGrGC,SAAUX,IAAG,CAAA,GAAA,KACRC,GACDV,SAAS,CACPE,MAAOQ,EAAMC,OACRD,EAAMT,QAAQoB,qBAAuBX,EAAMG,MAAMC,OAAO,oBACxDJ,EAAMT,QAAQqB,eAAiBZ,EAAMG,MAAMC,OAAO,oBACvDV,WAAYM,EAAMC,OACbD,EAAMT,QAAQoB,qBAAuBX,EAAMG,MAAMC,OAAO,oBACxDJ,EAAMT,QAAQqB,eAAiBZ,EAAMG,MAAMC,OAAO,oBACvDX,gBAAiBO,EAAMC,OAClBD,EAAMT,QAAQsB,+BAAiCb,EAAMG,MAAMC,OAAOK,YAClET,EAAMT,QAAQuB,yBAA2Bd,EAAMG,MAAMC,OAAOK,YACjEd,qBAAsBK,EAAMC,OACvBD,EAAMT,QAAQsB,+BAAiCb,EAAMG,MAAMC,OAAOK,YAClET,EAAMT,QAAQuB,yBAA2Bd,EAAMG,MAAMC,OAAOK,iBAIzEM,OAAQ,CACNjB,QAASC,IAAG,CAAA,GAAA,KACPC,GACDV,SAAS,CACPE,MAAOQ,EAAMC,OACRD,EAAMT,QAAQW,aAAeF,EAAMG,MAAMC,OAAO,0BAChDJ,EAAMT,QAAQC,OAASQ,EAAMG,MAAMC,OAAO,0BAC/CV,WAAYM,EAAMC,OACbD,EAAMT,QAAQW,aAAeF,EAAMG,MAAMC,OAAO,0BAChDJ,EAAMT,QAAQG,YAAcM,EAAMT,QAAQC,OAASQ,EAAMG,MAAMC,OAAO,0BAC3EX,gBAAiBO,EAAMC,OAClBD,EAAMT,QAAQiB,uBAAyBR,EAAMG,MAAMC,OAAO,sBAC1DJ,EAAMT,QAAQE,iBAAmBO,EAAMG,MAAMC,OAAOK,YACzDd,qBAAsBK,EAAMC,OACvBD,EAAMT,QAAQiB,uBAAyBR,EAAMG,MAAMC,OAAO,sBAC1DJ,EAAMT,QAAQI,sBACfK,EAAMT,QAAQE,iBACdO,EAAMG,MAAMC,OAAO,6BAG7BM,SAAUX,IAAG,CAAA,GAAA,KACRC,GACDV,SAAS,CACPE,MAAOQ,EAAMC,OACRD,EAAMT,QAAQoB,qBAAuBX,EAAMG,MAAMC,OAAO,oBACxDJ,EAAMT,QAAQqB,eAAiBZ,EAAMG,MAAMC,OAAO,oBACvDV,WAAYM,EAAMC,OACbD,EAAMT,QAAQoB,qBAAuBX,EAAMG,MAAMC,OAAO,oBACxDJ,EAAMT,QAAQqB,eAAiBZ,EAAMG,MAAMC,OAAO,oBACvDX,gBAAiBO,EAAMC,OAClBD,EAAMT,QAAQsB,+BAAiCb,EAAMG,MAAMC,OAAO,qBAClEJ,EAAMT,QAAQuB,yBAA2Bd,EAAMG,MAAMC,OAAOK,YACjEd,qBAAsBK,EAAMC,OACvBD,EAAMT,QAAQsB,+BAAiCb,EAAMG,MAAMC,OAAO,qBAClEJ,EAAMT,QAAQuB,yBAA2Bd,EAAMG,MAAMC,OAAOK,iBAIzEO,MAAO,CACLlB,QAASC,IAAG,CAAA,GAAA,KACPC,GACDV,SAAS,CACPE,MAAOQ,EAAMC,OACRD,EAAMT,QAAQW,aAAeF,EAAMG,MAAMC,OAAO,0BAChDJ,EAAMT,QAAQC,OAASQ,EAAMG,MAAMC,OAAO,2BAC/CV,WAAYM,EAAMC,OACbD,EAAMT,QAAQW,aAAeF,EAAMG,MAAMC,OAAO,0BAChDJ,EAAMT,QAAQG,YAAcM,EAAMT,QAAQC,OAASQ,EAAMG,MAAMC,OAAO,4BAC3EX,gBAAiBO,EAAMC,OAClBD,EAAMT,QAAQiB,uBAAyBR,EAAMG,MAAMC,OAAOK,YAC1DT,EAAMT,QAAQE,iBAAmBO,EAAMG,MAAMC,OAAOK,YACzDd,qBAAsBK,EAAMC,OACvBD,EAAMT,QAAQiB,uBAAyBR,EAAMG,MAAMC,OAAOK,YAC1DT,EAAMT,QAAQI,sBAAwBK,EAAMT,QAAQE,iBAAmBO,EAAMG,MAAMC,OAAOK,gBAGrGC,SAAUX,IAAG,CAAA,GAAA,KACRC,GACDV,SAAS,CACPE,MAAOQ,EAAMC,OACRD,EAAMT,QAAQoB,qBAAuBX,EAAMG,MAAMC,OAAO,oBACxDJ,EAAMT,QAAQqB,eAAiBZ,EAAMG,MAAMC,OAAO,oBACvDV,WAAYM,EAAMC,OACbD,EAAMT,QAAQoB,qBAAuBX,EAAMG,MAAMC,OAAO,oBACxDJ,EAAMT,QAAQqB,eAAiBZ,EAAMG,MAAMC,OAAO,oBACvDX,gBAAiBO,EAAMC,OAClBD,EAAMT,QAAQsB,+BAAiCb,EAAMG,MAAMC,OAAOK,YAClET,EAAMT,QAAQuB,yBAA2Bd,EAAMG,MAAMC,OAAOK,YACjEd,qBAAsBK,EAAMC,OACvBD,EAAMT,QAAQsB,+BAAiCb,EAAMG,MAAMC,OAAOK,YAClET,EAAMT,QAAQuB,yBAA2Bd,EAAMG,MAAMC,OAAOK,wBAM9DQ,UAAYC,OAAOC,KAAIC,WAAA,CAAAC,YAAA,wBAAAC,YAAA,mBAAXJ,CAgBxB,CAAA,iMAEM,MAAMK,KAAOL,OAAOM,OAAOJ,WAAkC,CAClEK,kBAAmBxC,8BACnBmC,WAAA,CAAAC,YAAA,mBAAAC,YAAA,mBAFkBJ,CAElB,CAAA,4OAAA,IAAA,IAAA,IAAA,IAAA,KAeGlB,GAAU,uCAGCA,EAAMU,SAAW,cAAgB,gCAEvCO,sCACOjB,EAAM0B,UAAY,cAAgB1B,EAAMC,OAAS,EAAI,kBAIjED,IACD,MAAM2B,EAAS/B,aAAaI,EAAM0B,SAElC,OAAO1B,EAAMU,SAAWiB,EAAOjB,SAAWiB,EAAO7B,OAAO,GAGxD8B,MACAC,eACAC,kBAGG,MAAMC,QAAUb,OAAOC,KAAKC,WAAkC,CACnEK,kBAAmBpC,2BACnB+B,WAAA,CAAAC,YAAA,sBAAAC,YAAA,mBAFqBJ,CAErB,CAAA,yEAAA,IAMEY,wBAGSE,OAASd,OAAOC,KAAIC,WAAA,CAAAC,YAAA,qBAAAC,YAAA,mBAAXJ,CAWrB,CAAA"}

package/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { ResponsiveProperty } from 'mixins/responsive-property'\nimport { ColorProperty } from 'mixins/color'\nimport { BaseProps } from 'shared/interfaces'\nimport { Tab } from 'components/Tab'\nimport * as Styled from './style'\n\nexport interface TabsProps extends BaseProps, ColorProperty, ColorProperty<'borderColor'> {\n  /**\n   * Primary content.\n   */\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  className?: string\n  classNameInner?: string\n  classNameContent?: string\n  noBorder?: boolean\n  width?: ResponsiveProperty<number>\n}\n\nTabs.defaultProps = {\n  borderColor: 'alto',\n  color: 'rgba(247, 247, 247, 1)',\n}\n\nTabs.Tab = Tab\n\n/**\n *\n * Use only with default preset\n *\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'borderColor'>`](#/Миксины)\n */\nexport function Tabs(props: TabsProps) {\n  const { children, className, classNameInner, classNameContent, borderColor, color, noBorder, style, width } = props\n\n  return (\n    <Styled.Root\n      className={className}\n      style={style}\n      width={width}\n      borderColor={borderColor}\n      color={color}\n      noBorder={noBorder}\n    >\n      <Styled.Inner className={classNameInner}>\n        <Styled.Content noBorder={noBorder} className={classNameContent}>\n          {children}\n        </Styled.Content>\n      </Styled.Inner>\n    </Styled.Root>\n  )\n}\n"],"names":["Tabs","props","children","className","classNameInner","classNameContent","borderColor","color","noBorder","style","width","_jsx","Styled","jsx","defaultProps","Tab"],"mappings":"0HAqCO,SAASA,KAAKC,GACnB,MAAMC,SAAEA,EAAQC,UAAEA,EAASC,eAAEA,EAAcC,iBAAEA,EAAgBC,YAAEA,EAAWC,MAAEA,EAAKC,SAAEA,QAAUC,EAAKC,MAAEA,GAAUT,EAE9G,OACEU,WAAAA,IAACC,MAAAA,KAAW,CACVT,UAAWA,EACXM,MAAOA,EACPC,MAAOA,EACPJ,YAAaA,EACbC,MAAOA,EACPC,SAAUA,EAASN,SAEnBS,WAAAE,IAACD,YAAY,CAACT,UAAWC,EAAeF,SACtCS,WAAAE,IAACD,cAAc,CAACJ,SAAUA,EAAUL,UAAWE,EAAiBH,SAC7DA,OAKX,CAnCAF,KAAKc,aAAe,CAClBR,YAAa,OACbC,MAAO,0BAGTP,KAAKe,IAAMA,IAAAA"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import type { ResponsiveProperty } from 'mixins/responsive-property'\nimport type { ColorProperty } from 'mixins/color'\nimport type { BaseProps } from 'shared/interfaces'\nimport { Tab } from 'components/Tab'\nimport * as Styled from './style'\n\nexport interface TabsProps extends BaseProps, ColorProperty, ColorProperty<'borderColor'> {\n  /**\n   * Primary content.\n   */\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  className?: string\n  classNameInner?: string\n  classNameContent?: string\n  noBorder?: boolean\n  width?: ResponsiveProperty<number>\n}\n\n/**\n *\n * Use only with default preset\n *\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'borderColor'>`](#/Миксины)\n */\nfunction Tabs(props: TabsProps) {\n  const { children, className, classNameInner, classNameContent, borderColor, color, noBorder, style, width } = props\n\n  return (\n    <Styled.Root\n      className={className}\n      style={style}\n      width={width}\n      borderColor={borderColor}\n      color={color}\n      noBorder={noBorder}\n    >\n      <Styled.Inner className={classNameInner}>\n        <Styled.Content noBorder={noBorder} className={classNameContent}>\n          {children}\n        </Styled.Content>\n      </Styled.Inner>\n    </Styled.Root>\n  )\n}\n\nTabs.defaultProps = {\n  borderColor: 'alto',\n  color: 'rgba(247, 247, 247, 1)',\n}\n\nTabs.Tab = Tab\n\nexport { Tabs }\n"],"names":["Tabs","props","children","className","classNameInner","classNameContent","borderColor","color","noBorder","style","width","_jsx","Styled","jsx","defaultProps","Tab"],"mappings":"0HA8BA,SAASA,KAAKC,GACZ,MAAMC,SAAEA,EAAQC,UAAEA,EAASC,eAAEA,EAAcC,iBAAEA,EAAgBC,YAAEA,EAAWC,MAAEA,EAAKC,SAAEA,QAAUC,EAAKC,MAAEA,GAAUT,EAE9G,OACEU,WAAAA,IAACC,MAAAA,KAAW,CACVT,UAAWA,EACXM,MAAOA,EACPC,MAAOA,EACPJ,YAAaA,EACbC,MAAOA,EACPC,SAAUA,EAASN,SAEnBS,WAAAE,IAACD,YAAY,CAACT,UAAWC,EAAeF,SACtCS,WAAAE,IAACD,cAAc,CAACJ,SAAUA,EAAUL,UAAWE,EAAiBH,SAC7DA,OAKX,CAEAF,KAAKc,aAAe,CAClBR,YAAa,OACbC,MAAO,0BAGTP,KAAKe,IAAMA,IAAGA"}

package/components/Tabs/Tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.mjs","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { ResponsiveProperty } from 'mixins/responsive-property'\nimport { ColorProperty } from 'mixins/color'\nimport { BaseProps } from 'shared/interfaces'\nimport { Tab } from 'components/Tab'\nimport * as Styled from './style'\n\nexport interface TabsProps extends BaseProps, ColorProperty, ColorProperty<'borderColor'> {\n  /**\n   * Primary content.\n   */\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  className?: string\n  classNameInner?: string\n  classNameContent?: string\n  noBorder?: boolean\n  width?: ResponsiveProperty<number>\n}\n\nTabs.defaultProps = {\n  borderColor: 'alto',\n  color: 'rgba(247, 247, 247, 1)',\n}\n\nTabs.Tab = Tab\n\n/**\n *\n * Use only with default preset\n *\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'borderColor'>`](#/Миксины)\n */\nexport function Tabs(props: TabsProps) {\n  const { children, className, classNameInner, classNameContent, borderColor, color, noBorder, style, width } = props\n\n  return (\n    <Styled.Root\n      className={className}\n      style={style}\n      width={width}\n      borderColor={borderColor}\n      color={color}\n      noBorder={noBorder}\n    >\n      <Styled.Inner className={classNameInner}>\n        <Styled.Content noBorder={noBorder} className={classNameContent}>\n          {children}\n        </Styled.Content>\n      </Styled.Inner>\n    </Styled.Root>\n  )\n}\n"],"names":["Tabs","props","children","className","classNameInner","classNameContent","borderColor","color","noBorder","style","width","_jsx","Styled","defaultProps","Tab"],"mappings":"+GAqCO,SAASA,KAAKC,GACnB,MAAMC,SAAEA,EAAQC,UAAEA,EAASC,eAAEA,EAAcC,iBAAEA,EAAgBC,YAAEA,EAAWC,MAAEA,EAAKC,SAAEA,EAAQC,MAAEA,EAAKC,MAAEA,GAAUT,EAE9G,OACEU,IAACC,KAAW,CACVT,UAAWA,EACXM,MAAOA,EACPC,MAAOA,EACPJ,YAAaA,EACbC,MAAOA,EACPC,SAAUA,EAASN,SAEnBS,IAACC,MAAY,CAACT,UAAWC,EAAeF,SACtCS,IAACC,QAAc,CAACJ,SAAUA,EAAUL,UAAWE,EAAiBH,SAC7DA,OAKX,CAnCAF,KAAKa,aAAe,CAClBP,YAAa,OACbC,MAAO,0BAGTP,KAAKc,IAAMA"}
+{"version":3,"file":"Tabs.mjs","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import type { ResponsiveProperty } from 'mixins/responsive-property'\nimport type { ColorProperty } from 'mixins/color'\nimport type { BaseProps } from 'shared/interfaces'\nimport { Tab } from 'components/Tab'\nimport * as Styled from './style'\n\nexport interface TabsProps extends BaseProps, ColorProperty, ColorProperty<'borderColor'> {\n  /**\n   * Primary content.\n   */\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  className?: string\n  classNameInner?: string\n  classNameContent?: string\n  noBorder?: boolean\n  width?: ResponsiveProperty<number>\n}\n\n/**\n *\n * Use only with default preset\n *\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'borderColor'>`](#/Миксины)\n */\nfunction Tabs(props: TabsProps) {\n  const { children, className, classNameInner, classNameContent, borderColor, color, noBorder, style, width } = props\n\n  return (\n    <Styled.Root\n      className={className}\n      style={style}\n      width={width}\n      borderColor={borderColor}\n      color={color}\n      noBorder={noBorder}\n    >\n      <Styled.Inner className={classNameInner}>\n        <Styled.Content noBorder={noBorder} className={classNameContent}>\n          {children}\n        </Styled.Content>\n      </Styled.Inner>\n    </Styled.Root>\n  )\n}\n\nTabs.defaultProps = {\n  borderColor: 'alto',\n  color: 'rgba(247, 247, 247, 1)',\n}\n\nTabs.Tab = Tab\n\nexport { Tabs }\n"],"names":["Tabs","props","children","className","classNameInner","classNameContent","borderColor","color","noBorder","style","width","_jsx","Styled","defaultProps","Tab"],"mappings":"+GA8BA,SAASA,KAAKC,GACZ,MAAMC,SAAEA,EAAQC,UAAEA,EAASC,eAAEA,EAAcC,iBAAEA,EAAgBC,YAAEA,EAAWC,MAAEA,EAAKC,SAAEA,EAAQC,MAAEA,EAAKC,MAAEA,GAAUT,EAE9G,OACEU,IAACC,KAAW,CACVT,UAAWA,EACXM,MAAOA,EACPC,MAAOA,EACPJ,YAAaA,EACbC,MAAOA,EACPC,SAAUA,EAASN,SAEnBS,IAACC,MAAY,CAACT,UAAWC,EAAeF,SACtCS,IAACC,QAAc,CAACJ,SAAUA,EAAUL,UAAWE,EAAiBH,SAC7DA,OAKX,CAEAF,KAAKa,aAAe,CAClBP,YAAa,OACbC,MAAO,0BAGTP,KAAKc,IAAMA"}