@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/tab/tab-link-chain.d.ts

@@ -1,6 +1,6 @@
-import { TabProps } from "./types";
+import type { TabProps } from "./types";
 interface Props extends Pick<TabProps, "fullWidthIndicatorLine" | "onTabClick" | "data-testid" | "fadeColor"> {
-    controlledMode?: boolean | undefined;
+    controlledMode?: boolean;
 }
 export declare const TabLinkChain: ({ controlledMode, "data-testid": testId, onTabClick, fullWidthIndicatorLine, fadeColor, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/tab/tab-link-chain.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useContext as n,useRef as r}from"react";import{r as i}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as o}from"styled-components";import{Breakpoint as l}from"../theme/index.js";import{TabContext as d}from"./tab-context.js";import{CustomFadeWrapper as a,Chain as c,ChainItem as s,ChainLink as u,LabelContainer as m,Label as f,BoldLabel as h}from"./tab-link-chain.style.js";const p=({controlledMode:p,"data-testid":v,onTabClick:g,fullWidthIndicatorLine:x,fadeColor:$})=>{const{setCurrentActiveIndex:b,currentActiveIndex:k,tabLinks:w,instanceId:C}=n(d),y=n(o),I=l["md-max"]({theme:y}),j=i.useMediaQuery({maxWidth:I}),A=l["lg-max"]({theme:y}),L=r(null),D=r([]),R=r(null),W=e=>t=>{t.preventDefault(),t.stopPropagation(),p||b(e),g&&g(w[e].title,e)},B=e=>j&&e.length>20?`${e.substring(0,20)}...`:e;return e(a,{onResize:({content:e,wrapper:t})=>{e&&t&&window.innerWidth<=A&&L.current&&R.current&&(e.scrollLeft=L.current.getBoundingClientRect().left-R.current.getBoundingClientRect().left)},"data-testid":v,fadeColor:$,children:e(c,{role:"tablist",$fullWidthIndicatorLine:x,ref:R,children:w.map((({title:n,width:r,titleAddon:i},o)=>{const l=k===o;return e(s,{role:"none",$active:l,ref:l?L:null,$width:r,children:t(u,{role:"none",onClick:W(o),"data-testid":`${v}-link-${o}`,$reversed:"left"===(null==i?void 0:i.position),children:[t(m,{role:"none",children:[e(f,{$active:l,onClick:W(o),"aria-hidden":"true",children:B(n)}),e(h,{role:"tab",id:`${C}-tab-${o}`,type:"button","aria-selected":l,tabIndex:l?0:-1,onKeyDown:e=>((e,t)=>{var n;let r=t;"ArrowRight"===e.key?(r=(t+1)%w.length,e.preventDefault()):"ArrowLeft"===e.key&&(r=(t-1+w.length)%w.length,e.preventDefault()),null===(n=D.current[r])||void 0===n||n.focus()})(e,o),ref:e=>D.current[o]=e,$active:l,children:B(n)})]}),null==i?void 0:i.content]})},o)}))})})};export{p as TabLinkChain};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"clsx";import{useContext as n,useRef as o,useEffect as i}from"react";import{FadeWrapper as l}from"../shared/fade-wrapper/fade-wrapper.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useMaxWidthMediaQuery as a}from"../theme/utils/use-media-query.js";import{TabContext as s}from"./tab-context.js";import{tokens as d,customFadeWrapper as c,labelContainer as m,label as u,deselectedLabel as p,deselectedLabelActive as h,selectedLabel as f,selectedLabelActive as v,flexRow as j,chainLink as y,chainLinkReversed as g,chainItem as k,chainItemActive as b,chain as x,chainFullWidthIndicator as w}from"./tab-link-chain.styles.js";const C=({controlledMode:C,"data-testid":I,onTabClick:N,fullWidthIndicatorLine:$,fadeColor:A})=>{const{setCurrentActiveIndex:D,currentActiveIndex:L,tabLinks:R,instanceId:P}=n(s),q=a("lg"),B=o(null),z=o(null),E=o([]),K=o([]);i((()=>{K.current.forEach(((e,t)=>{var r;if(!e)return;const n=null===(r=R[t])||void 0===r?void 0:r.width;n?e.style.setProperty(d.chainItem.width,n):e.style.removeProperty(d.chainItem.width)}))}),[R]);const M=e=>t=>{t.preventDefault(),t.stopPropagation(),C||D(e),N&&N(R[e].title,e)};return e(l,{onResize:({content:e})=>{e&&q&&B.current&&z.current&&(e.scrollLeft=B.current.getBoundingClientRect().left-z.current.getBoundingClientRect().left)},"data-testid":I,fadeColor:A,className:c,children:e("ul",{role:"tablist",ref:z,className:r(x,$&&w),children:R.map((({title:n,width:o,titleAddon:i},l)=>{var a;const s=L===l;return e("li",{role:"none",className:r(k,s&&b),ref:e=>{K.current[l]=e,s&&(B.current=e)},children:t("div",{role:"none",onClick:M(l),"data-testid":`${I}-link-${l}`,className:r(j,y,"left"===(null==i?void 0:i.position)&&g),children:[t("div",{className:m,role:"none",children:[e("div",{className:r(u,p,s&&h),onClick:M(l),"aria-hidden":"true",children:n}),e("button",{role:"tab",id:`${P}-tab-${l}`,type:"button","aria-selected":s,tabIndex:s?0:-1,onKeyDown:e=>((e,t)=>{var r;let n=t;"ArrowRight"===e.key?(n=(t+1)%R.length,e.preventDefault()):"ArrowLeft"===e.key&&(n=(t-1+R.length)%R.length,e.preventDefault()),null===(r=E.current[n])||void 0===r||r.focus()})(e,l),ref:e=>E.current[l]=e,className:r(u,f,s&&v),children:n})]}),null==i?void 0:i.content]})},`${n}-${null!=o?o:""}-${null!==(a=null==i?void 0:i.position)&&void 0!==a?a:"none"}`)}))})})};export{C as TabLinkChain};
 //# sourceMappingURL=tab-link-chain.js.map

package/tab/tab-link-chain.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-link-chain.js","sources":["../../src/tab/tab-link-chain.tsx"],"sourcesContent":["import { useContext, useRef } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { Breakpoint } from \"../theme\";\nimport { TabContext } from \"./tab-context\";\nimport {\n    BoldLabel,\n    Chain,\n    ChainItem,\n    ChainLink,\n    CustomFadeWrapper,\n    Label,\n    LabelContainer,\n} from \"./tab-link-chain.style\";\nimport { TabProps } from \"./types\";\n\ninterface Props\n    extends Pick<\n        TabProps,\n        \"fullWidthIndicatorLine\" | \"onTabClick\" | \"data-testid\" | \"fadeColor\"\n    > {\n    controlledMode?: boolean | undefined;\n}\n\nexport const TabLinkChain = ({\n    controlledMode,\n    \"data-testid\": testId,\n    onTabClick,\n    fullWidthIndicatorLine,\n    fadeColor,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setCurrentActiveIndex, currentActiveIndex, tabLinks, instanceId } =\n        useContext(TabContext);\n\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = Breakpoint[\"md-max\"]({ theme });\n\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n\n    const tabletBreakpoint = Breakpoint[\"lg-max\"]({ theme });\n\n    const activeLinkRef = useRef<HTMLLIElement>(null);\n    const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\n    const chainRef = useRef<HTMLUListElement | null>(null);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChainLinkClick =\n        (index: number) =>\n        (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n            if (!controlledMode) {\n                setCurrentActiveIndex(index);\n            }\n\n            if (onTabClick) {\n                onTabClick(tabLinks[index].title, index);\n            }\n        };\n\n    const handleResize = ({ content, wrapper }: ResizeCallbackParams) => {\n        if (\n            content &&\n            wrapper &&\n            window.innerWidth <= tabletBreakpoint &&\n            activeLinkRef.current &&\n            chainRef.current\n        ) {\n            content.scrollLeft =\n                activeLinkRef.current.getBoundingClientRect().left -\n                chainRef.current.getBoundingClientRect().left;\n        }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n        let nextIndex = index;\n        if (e.key === \"ArrowRight\") {\n            nextIndex = (index + 1) % tabLinks.length;\n            e.preventDefault();\n        } else if (e.key === \"ArrowLeft\") {\n            nextIndex = (index - 1 + tabLinks.length) % tabLinks.length;\n            e.preventDefault();\n        }\n\n        chainLinkRefs.current[nextIndex]?.focus();\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const truncateText = (value: string) => {\n        if (isMobile) {\n            return value.length > 20 ? `${value.substring(0, 20)}...` : value;\n        }\n\n        return value;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <CustomFadeWrapper\n            onResize={handleResize}\n            data-testid={testId}\n            fadeColor={fadeColor}\n        >\n            <Chain\n                role=\"tablist\"\n                $fullWidthIndicatorLine={fullWidthIndicatorLine}\n                ref={chainRef}\n            >\n                {tabLinks.map(({ title, width, titleAddon }, index) => {\n                    const isActive = currentActiveIndex === index;\n\n                    return (\n                        <ChainItem\n                            key={index}\n                            role=\"none\"\n                            $active={isActive}\n                            ref={isActive ? activeLinkRef : null}\n                            $width={width}\n                        >\n                            <ChainLink\n                                role=\"none\"\n                                onClick={handleChainLinkClick(index)}\n                                data-testid={`${testId}-link-${index}`}\n                                $reversed={titleAddon?.position === \"left\"}\n                            >\n                                <LabelContainer role=\"none\">\n                                    <Label\n                                        $active={isActive}\n                                        onClick={handleChainLinkClick(index)}\n                                        aria-hidden=\"true\"\n                                    >\n                                        {truncateText(title)}\n                                    </Label>\n                                    <BoldLabel\n                                        role=\"tab\"\n                                        id={`${instanceId}-tab-${index}`}\n                                        type=\"button\"\n                                        aria-selected={isActive}\n                                        tabIndex={isActive ? 0 : -1}\n                                        onKeyDown={(e) =>\n                                            handleKeyDown(e, index)\n                                        }\n                                        ref={(el) =>\n                                            (chainLinkRefs.current[index] = el)\n                                        }\n                                        $active={isActive}\n                                    >\n                                        {truncateText(title)}\n                                    </BoldLabel>\n                                </LabelContainer>\n                                {titleAddon?.content}\n                            </ChainLink>\n                        </ChainItem>\n                    );\n                })}\n            </Chain>\n        </CustomFadeWrapper>\n    );\n};\n"],"names":["TabLinkChain","controlledMode","testId","onTabClick","fullWidthIndicatorLine","fadeColor","setCurrentActiveIndex","currentActiveIndex","tabLinks","instanceId","useContext","TabContext","theme","ThemeContext","mobileBreakpoint","Breakpoint","isMobile","useMediaQuery","maxWidth","tabletBreakpoint","activeLinkRef","useRef","chainLinkRefs","chainRef","handleChainLinkClick","index","event","preventDefault","stopPropagation","title","truncateText","value","length","substring","_jsx","CustomFadeWrapper","onResize","content","wrapper","window","innerWidth","current","scrollLeft","getBoundingClientRect","left","children","Chain","role","$fullWidthIndicatorLine","ref","map","width","titleAddon","isActive","ChainItem","$active","_jsxs","ChainLink","onClick","position","LabelContainer","Label","BoldLabel","id","type","tabIndex","onKeyDown","e","nextIndex","key","_a","focus","handleKeyDown","el"],"mappings":"8cAyBO,MAAMA,EAAe,EACxBC,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,EAAQC,WAAEA,GACzDC,EAAWC,GAETC,EAAQF,EAAWG,GACnBC,EAAmBC,EAAW,UAAU,CAAEH,UAE1CI,EAAWC,EAAAA,cAAc,CAC3BC,SAAUJ,IAGRK,EAAmBJ,EAAW,UAAU,CAAEH,UAE1CQ,EAAgBC,EAAsB,MACtCC,EAAgBD,EAAqC,IACrDE,EAAWF,EAAgC,MAK3CG,EACDC,GACAC,IACGA,EAAMC,iBACND,EAAME,kBACD3B,GACDK,EAAsBmB,GAGtBtB,GACAA,EAAWK,EAASiB,GAAOI,MAAOJ,EACtC,EAiCFK,EAAgBC,GACdf,GACOe,EAAMC,OAAS,GAAK,GAAGD,EAAME,UAAU,EAAG,SAG9CF,EAMX,OACIG,EAACC,GACGC,SA3Ca,EAAGC,UAASC,cAEzBD,GACAC,GACAC,OAAOC,YAAcrB,GACrBC,EAAcqB,SACdlB,EAASkB,UAETJ,EAAQK,WACJtB,EAAcqB,QAAQE,wBAAwBC,KAC9CrB,EAASkB,QAAQE,wBAAwBC,KACjD,EAgC0B,cACT1C,EACbG,UAAWA,EAASwC,SAEpBX,EAACY,EAAK,CACFC,KAAK,UAASC,wBACW5C,EACzB6C,IAAK1B,WAEJf,EAAS0C,KAAI,EAAGrB,QAAOsB,QAAOC,cAAc3B,KACzC,MAAM4B,EAAW9C,IAAuBkB,EAExC,OACIS,EAACoB,EAAS,CAENP,KAAK,OAAMQ,QACFF,EACTJ,IAAKI,EAAWjC,EAAgB,YACxB+B,EAAKN,SAEbW,EAACC,EAAS,CACNV,KAAK,OACLW,QAASlC,EAAqBC,GAAM,cACvB,GAAGvB,UAAeuB,cACK,UAAzB2B,eAAAA,EAAYO,UAAmBd,SAAA,CAE1CW,EAACI,EAAc,CAACb,KAAK,OAAMF,SAAA,CACvBX,EAAC2B,WACYR,EACTK,QAASlC,EAAqBC,GAAM,cACxB,gBAEXK,EAAaD,KAElBK,EAAC4B,EAAS,CACNf,KAAK,MACLgB,GAAI,GAAGtD,SAAkBgB,IACzBuC,KAAK,SAAQ,gBACEX,EACfY,SAAUZ,EAAW,GAAI,EACzBa,UAAYC,GArE1B,EAACA,EAAwB1C,WAC3C,IAAI2C,EAAY3C,EACF,eAAV0C,EAAEE,KACFD,GAAa3C,EAAQ,GAAKjB,EAASwB,OACnCmC,EAAExC,kBACe,cAAVwC,EAAEE,MACTD,GAAa3C,EAAQ,EAAIjB,EAASwB,QAAUxB,EAASwB,OACrDmC,EAAExC,kBAG0B,QAAhC2C,EAAAhD,EAAcmB,QAAQ2B,UAAU,IAAAE,GAAAA,EAAEC,OAAO,EA4DLC,CAAcL,EAAG1C,GAErBwB,IAAMwB,GACDnD,EAAcmB,QAAQhB,GAASgD,EAAGlB,QAE9BF,EAAQR,SAEhBf,EAAaD,QAGrBuB,aAAU,EAAVA,EAAYf,YArCZZ,EAuCG,OAIR"}
+{"version":3,"file":"tab-link-chain.js","sources":["../../src/tab/tab-link-chain.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext, useEffect, useRef } from \"react\";\n\nimport { FadeWrapper, type ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { TabContext } from \"./tab-context\";\nimport * as styles from \"./tab-link-chain.styles\";\nimport type { TabProps } from \"./types\";\n\ninterface Props\n    extends Pick<\n        TabProps,\n        \"fullWidthIndicatorLine\" | \"onTabClick\" | \"data-testid\" | \"fadeColor\"\n    > {\n    controlledMode?: boolean;\n}\n\nexport const TabLinkChain = ({\n    controlledMode,\n    \"data-testid\": testId,\n    onTabClick,\n    fullWidthIndicatorLine,\n    fadeColor,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setCurrentActiveIndex, currentActiveIndex, tabLinks, instanceId } =\n        useContext(TabContext);\n\n    const isTablet = useMaxWidthMediaQuery(\"lg\");\n\n    const activeLinkRef = useRef<HTMLLIElement | null>(null);\n    const chainRef = useRef<HTMLUListElement | null>(null);\n    const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\n    const chainItemRefs = useRef<(HTMLLIElement | null)[]>([]);\n\n    useEffect(() => {\n        chainItemRefs.current.forEach((itemRef, index) => {\n            if (!itemRef) {\n                return;\n            }\n\n            const width = tabLinks[index]?.width;\n\n            if (width) {\n                itemRef.style.setProperty(styles.tokens.chainItem.width, width);\n            } else {\n                itemRef.style.removeProperty(styles.tokens.chainItem.width);\n            }\n        });\n    }, [tabLinks]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChainLinkClick =\n        (index: number) =>\n        (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n            if (!controlledMode) {\n                setCurrentActiveIndex(index);\n            }\n\n            if (onTabClick) {\n                onTabClick(tabLinks[index].title, index);\n            }\n        };\n\n    const handleResize = ({ content }: ResizeCallbackParams) => {\n        if (content && isTablet && activeLinkRef.current && chainRef.current) {\n            content.scrollLeft =\n                activeLinkRef.current.getBoundingClientRect().left -\n                chainRef.current.getBoundingClientRect().left;\n        }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n        let nextIndex = index;\n        if (e.key === \"ArrowRight\") {\n            nextIndex = (index + 1) % tabLinks.length;\n            e.preventDefault();\n        } else if (e.key === \"ArrowLeft\") {\n            nextIndex = (index - 1 + tabLinks.length) % tabLinks.length;\n            e.preventDefault();\n        }\n\n        chainLinkRefs.current[nextIndex]?.focus();\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <FadeWrapper\n            onResize={handleResize}\n            data-testid={testId}\n            fadeColor={fadeColor}\n            className={styles.customFadeWrapper}\n        >\n            <ul\n                role=\"tablist\"\n                ref={chainRef}\n                className={clsx(\n                    styles.chain,\n                    fullWidthIndicatorLine && styles.chainFullWidthIndicator\n                )}\n            >\n                {tabLinks.map(({ title, width, titleAddon }, index) => {\n                    const isActive = currentActiveIndex === index;\n                    const chainItemRef = (el: HTMLLIElement | null) => {\n                        chainItemRefs.current[index] = el;\n                        if (isActive) {\n                            activeLinkRef.current = el;\n                        }\n                    };\n\n                    return (\n                        <li\n                            key={`${title}-${width ?? \"\"}-${\n                                titleAddon?.position ?? \"none\"\n                            }`}\n                            role=\"none\"\n                            className={clsx(\n                                styles.chainItem,\n                                isActive && styles.chainItemActive\n                            )}\n                            ref={chainItemRef}\n                        >\n                            <div\n                                role=\"none\"\n                                onClick={handleChainLinkClick(index)}\n                                data-testid={`${testId}-link-${index}`}\n                                className={clsx(\n                                    styles.flexRow,\n                                    styles.chainLink,\n                                    titleAddon?.position === \"left\" &&\n                                        styles.chainLinkReversed\n                                )}\n                            >\n                                <div\n                                    className={styles.labelContainer}\n                                    role=\"none\"\n                                >\n                                    <div\n                                        className={clsx(\n                                            styles.label,\n                                            styles.deselectedLabel,\n                                            isActive &&\n                                                styles.deselectedLabelActive\n                                        )}\n                                        onClick={handleChainLinkClick(index)}\n                                        aria-hidden=\"true\"\n                                    >\n                                        {title}\n                                    </div>\n                                    <button\n                                        role=\"tab\"\n                                        id={`${instanceId}-tab-${index}`}\n                                        type=\"button\"\n                                        aria-selected={isActive}\n                                        tabIndex={isActive ? 0 : -1}\n                                        onKeyDown={(e) =>\n                                            handleKeyDown(e, index)\n                                        }\n                                        ref={(el) =>\n                                            (chainLinkRefs.current[index] = el)\n                                        }\n                                        className={clsx(\n                                            styles.label,\n                                            styles.selectedLabel,\n                                            isActive &&\n                                                styles.selectedLabelActive\n                                        )}\n                                    >\n                                        {title}\n                                    </button>\n                                </div>\n                                {titleAddon?.content}\n                            </div>\n                        </li>\n                    );\n                })}\n            </ul>\n        </FadeWrapper>\n    );\n};\n"],"names":["TabLinkChain","controlledMode","testId","onTabClick","fullWidthIndicatorLine","fadeColor","setCurrentActiveIndex","currentActiveIndex","tabLinks","instanceId","useContext","TabContext","isTablet","useMaxWidthMediaQuery","activeLinkRef","useRef","chainRef","chainLinkRefs","chainItemRefs","useEffect","current","forEach","itemRef","index","width","_a","style","setProperty","styles.tokens","chainItem","removeProperty","handleChainLinkClick","event","preventDefault","stopPropagation","title","_jsx","FadeWrapper","onResize","content","scrollLeft","getBoundingClientRect","left","className","styles.customFadeWrapper","children","role","ref","clsx","styles.chain","styles.chainFullWidthIndicator","map","titleAddon","isActive","styles.chainItem","styles.chainItemActive","el","_jsxs","onClick","styles.flexRow","styles.chainLink","position","styles.chainLinkReversed","styles.labelContainer","styles.label","styles.deselectedLabel","styles.deselectedLabelActive","id","type","tabIndex","onKeyDown","e","nextIndex","key","length","focus","handleKeyDown","styles.selectedLabel","styles.selectedLabelActive"],"mappings":"0hCAiBO,MAAMA,EAAe,EACxBC,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,EAAQC,WAAEA,GACzDC,EAAWC,GAETC,EAAWC,EAAsB,MAEjCC,EAAgBC,EAA6B,MAC7CC,EAAWD,EAAgC,MAC3CE,EAAgBF,EAAqC,IACrDG,EAAgBH,EAAiC,IAEvDI,GAAU,KACND,EAAcE,QAAQC,SAAQ,CAACC,EAASC,WACpC,IAAKD,EACD,OAGJ,MAAME,EAAuB,QAAfC,EAAAjB,EAASe,UAAM,IAAAE,OAAA,EAAAA,EAAED,MAE3BA,EACAF,EAAQI,MAAMC,YAAYC,EAAcC,UAAUL,MAAOA,GAEzDF,EAAQI,MAAMI,eAAeF,EAAcC,UAAUL,MACzD,GACF,GACH,CAAChB,IAKJ,MAAMuB,EACDR,GACAS,IACGA,EAAMC,iBACND,EAAME,kBACDjC,GACDK,EAAsBiB,GAGtBpB,GACAA,EAAWK,EAASe,GAAOY,MAAOZ,EACtC,EA2BR,OACIa,EAACC,EAAW,CACRC,SA1Ba,EAAGC,cAChBA,GAAW3B,GAAYE,EAAcM,SAAWJ,EAASI,UACzDmB,EAAQC,WACJ1B,EAAcM,QAAQqB,wBAAwBC,KAC9C1B,EAASI,QAAQqB,wBAAwBC,KACjD,EAqB0B,cACTxC,EACbG,UAAWA,EACXsC,UAAWC,EAAwBC,SAEnCT,EAAA,KAAA,CACIU,KAAK,UACLC,IAAK/B,EACL2B,UAAWK,EACPC,EACA7C,GAA0B8C,GAC7BL,SAEArC,EAAS2C,KAAI,EAAGhB,QAAOX,QAAO4B,cAAc7B,WACzC,MAAM8B,EAAW9C,IAAuBgB,EAQxC,OACIa,EAAA,KAAA,CAIIU,KAAK,OACLH,UAAWK,EACPM,EACAD,GAAYE,GAEhBR,IAjBcS,IAClBtC,EAAcE,QAAQG,GAASiC,EAC3BH,IACAvC,EAAcM,QAAUoC,EAC5B,EAaqBX,SAEjBY,EAAA,MAAA,CACIX,KAAK,OACLY,QAAS3B,EAAqBR,GAAM,cACvB,GAAGrB,UAAeqB,IAC/BoB,UAAWK,EACPW,EACAC,EACyB,UAAzBR,aAAU,EAAVA,EAAYS,WACRC,GACPjB,SAAA,CAEDY,EAAA,MAAA,CACId,UAAWoB,EACXjB,KAAK,OAAMD,SAAA,CAEXT,EAAA,MAAA,CACIO,UAAWK,EACPgB,EACAC,EACAZ,GACIa,GAERR,QAAS3B,EAAqBR,iBAClB,OAAMsB,SAEjBV,IAELC,YACIU,KAAK,MACLqB,GAAI,GAAG1D,SAAkBc,IACzB6C,KAAK,SAAQ,gBACEf,EACfgB,SAAUhB,EAAW,KACrBiB,UAAYC,GArF1B,EAACA,EAAwBhD,WAC3C,IAAIiD,EAAYjD,EACF,eAAVgD,EAAEE,KACFD,GAAajD,EAAQ,GAAKf,EAASkE,OACnCH,EAAEtC,kBACe,cAAVsC,EAAEE,MACTD,GAAajD,EAAQ,EAAIf,EAASkE,QAAUlE,EAASkE,OACrDH,EAAEtC,kBAG0B,QAAhCR,EAAAR,EAAcG,QAAQoD,UAAU,IAAA/C,GAAAA,EAAEkD,OAAO,EA4ELC,CAAcL,EAAGhD,GAErBwB,IAAMS,GACDvC,EAAcG,QAAQG,GAASiC,EAEpCb,UAAWK,EACPgB,EACAa,EACAxB,GACIyB,YAGP3C,OAGRiB,eAAAA,EAAYb,YA3DZ,GAAGJ,KAASX,QAAAA,EAAS,MACF,UAApB4B,aAAU,EAAVA,EAAYS,gBAAQ,IAAApC,EAAAA,EAAI,SA4D3B,OAIP"}

package/tab/tab-link-chain.styles.d.ts

@@ -0,0 +1,19 @@
+export declare const tokens: {
+    chainItem: {
+        width: string;
+    };
+};
+export declare const chain: import("@linaria/core").LinariaClassName;
+export declare const chainFullWidthIndicator: import("@linaria/core").LinariaClassName;
+export declare const chainItem: import("@linaria/core").LinariaClassName;
+export declare const chainItemActive: import("@linaria/core").LinariaClassName;
+export declare const flexRow: import("@linaria/core").LinariaClassName;
+export declare const chainLink: import("@linaria/core").LinariaClassName;
+export declare const chainLinkReversed: import("@linaria/core").LinariaClassName;
+export declare const labelContainer: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;
+export declare const deselectedLabel: import("@linaria/core").LinariaClassName;
+export declare const deselectedLabelActive: import("@linaria/core").LinariaClassName;
+export declare const selectedLabel: import("@linaria/core").LinariaClassName;
+export declare const selectedLabelActive: import("@linaria/core").LinariaClassName;
+export declare const customFadeWrapper: import("@linaria/core").LinariaClassName;

package/tab/tab-link-chain.styles.js

@@ -0,0 +1,2 @@
+import"./tab-link-chain.styles_49got4.css";const t={chainItem:{width:"--fds-internal-tab-chainItem-width"}},c="c16oikpn",i="c2536gp",s="c1c3wbud",d="cdfiwt",n="fxd8c9t",a="c1gdrjx",l="cj41vce",e="lmiq2g0",b="l1yi6azs",h="d97pn0z",g="d1v8j9lw",m="s5l4m4t",o="shqgesl",p="c1r7bbxk";export{c as chain,i as chainFullWidthIndicator,s as chainItem,d as chainItemActive,a as chainLink,l as chainLinkReversed,p as customFadeWrapper,h as deselectedLabel,g as deselectedLabelActive,n as flexRow,b as label,e as labelContainer,m as selectedLabel,o as selectedLabelActive,t as tokens};
+//# sourceMappingURL=tab-link-chain.styles.js.map

package/tab/tab-link-chain.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-link-chain.styles.js","sources":["../../src/tab/tab-link-chain.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../theme/tokens\";\n\nexport const tokens = {\n    chainItem: {\n        width: \"--fds-internal-tab-chainItem-width\",\n    },\n};\n\nexport const chain = css`\n    display: inline-flex;\n    width: 100%;\n    list-style-type: none;\n`;\n\nexport const chainFullWidthIndicator = css`\n    &::after {\n        content: \"\";\n        height: inherit;\n        flex-grow: 1;\n        /* follows the border in ChainItem */\n        border-bottom: ${Border[\"width-040\"]} ${Border.solid} ${Colour.border};\n    }\n`;\n\nexport const chainItem = css`\n    display: flex;\n    justify-content: center;\n    flex-shrink: 0;\n    border-bottom: ${Border[\"width-040\"]} ${Border.solid} ${Colour.border};\n    ${tokens.chainItem.width}: initial;\n    width: var(${tokens.chainItem.width}, auto);\n\n    ${MediaQuery.MaxWidth.sm} {\n        flex: 1;\n        justify-content: center;\n    }\n`;\n\nexport const chainItemActive = css`\n    border-color: ${Colour[\"border-primary\"]};\n`;\n\nexport const flexRow = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n`;\n\nexport const chainLink = css`\n    /* position: relative; */\n    flex-direction: row;\n    gap: 0.5rem;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-16\"]}\n        ${Spacing[\"spacing-20\"]};\n    cursor: pointer;\n    width: 100%;\n    justify-content: center;\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n        border-radius: ${Radius.sm};\n    }\n`;\n\nexport const chainLinkReversed = css`\n    flex-direction: row-reverse;\n`;\n\nexport const labelContainer = css`\n    position: relative;\n`;\n\nexport const label = css`\n    border: none;\n    background: none;\n\n    ${MediaQuery.MaxWidth.sm} {\n        max-width: 20ch;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n    }\n`;\n\nexport const deselectedLabel = css`\n    position: absolute;\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text-subtler\"]};\n    opacity: 1;\n`;\n\nexport const deselectedLabelActive = css`\n    opacity: 0;\n`;\n\nexport const selectedLabel = css`\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"text-primary\"]};\n    opacity: 0;\n    outline: none;\n\n    ${MediaQuery.MaxWidth.sm} {\n        max-width: 20ch;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n    }\n`;\n\nexport const selectedLabelActive = css`\n    opacity: 1;\n`;\n\nexport const customFadeWrapper = css`\n    [data-id=\"left-fade-indicator-button\"],\n    [data-id=\"right-fade-indicator-button\"] {\n        margin-bottom: ${Spacing[\"spacing-4\"]};\n    }\n`;\n"],"names":["tokens","chainItem","width","chain","chainFullWidthIndicator","chainItemActive","flexRow","chainLink","chainLinkReversed","labelContainer","label","deselectedLabel","deselectedLabelActive","selectedLabel","selectedLabelActive","customFadeWrapper"],"mappings":"8DAWO,MAAMA,EAAS,CAClBC,UAAW,CACPC,MAAO,uCAIFC,EAAK,WAMLC,EAAuB,UAUvBH,EAAS,WAcTI,EAAe,SAIfC,EAAO,UAMPC,EAAS,UAiBTC,EAAiB,UAIjBC,EAAc,UAIdC,EAAK,WAYLC,EAAe,UAOfC,EAAqB,WAIrBC,EAAa,UAcbC,EAAmB,UAInBC,EAAiB"}

package/tab/tab-link-chain.styles_49got4.css

@@ -0,0 +1,14 @@
+@layer fds{.c16oikpn{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:100%;list-style-type:none;}
+.c2536gp::after{content:"";height:inherit;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;border-bottom:var(--fds-border-width-040) var(--fds-border-style-solid) var(--fds-colour-border);}
+.c1c3wbud{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;border-bottom:var(--fds-border-width-040) var(--fds-border-style-solid) var(--fds-colour-border);--fds-internal-tab-chainItem-width:initial;width:var(--fds-internal-tab-chainItem-width, auto);}:where(body.fds-breakpoint-sm-max) .c1c3wbud{-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.cdfiwt{border-color:var(--fds-colour-border-primary);}
+.fxd8c9t{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.c1gdrjx{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:0.5rem;padding:var(--fds-spacing-16) var(--fds-spacing-16) var(--fds-spacing-20);cursor:pointer;width:100%;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.c1gdrjx:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:-2px;border-radius:var(--fds-radius-sm);}
+.cj41vce{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.lmiq2g0{position:relative;}
+.l1yi6azs{border:none;background:none;}:where(body.fds-breakpoint-sm-max) .l1yi6azs{max-width:20ch;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
+.d97pn0z{position:absolute;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text-subtler);opacity:1;}
+.d1v8j9lw{opacity:0;}
+.s5l4m4t{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text-primary);opacity:0;outline:none;}:where(body.fds-breakpoint-sm-max) .s5l4m4t{max-width:20ch;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
+.shqgesl{opacity:1;}
+.c1r7bbxk [data-id="left-fade-indicator-button"],.c1r7bbxk [data-id="right-fade-indicator-button"]{margin-bottom:var(--fds-spacing-4);}}

package/tab/tab-list.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{useContext as e,useMemo as i,Children as o,useEffect as r}from"react";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useIsomorphicLayoutEffect as a}from"../util/use-isomorphic-layout-effect.js";import{TabContext as l}from"./tab-context.js";import{TabLinkChain as n}from"./tab-link-chain.js";const d=({children:d,fullWidthIndicatorLine:s,fadeColor:p,"data-testid":m})=>{const{setTabLinks:c,controlledMode:u,onTabClick:f,isContextProvided:b}=e(l),h=i((()=>o.toArray(d).filter(Boolean).map((({props:t})=>({title:t.title,width:t.width,titleAddon:t.titleAddon})))),[d]);return a((()=>{c(h)}),[c,h]),r((()=>{"production"===process.env.NODE_ENV||b||console.error("Tab.TabList must be rendered inside Tab.Context.")}),[b]),t(n,{controlledMode:u,onTabClick:f,"data-testid":m,fullWidthIndicatorLine:s,fadeColor:p})};d.displayName="Tab.TabList";export{d as TabList};
+import{jsx as t}from"react/jsx-runtime";import{useContext as e,useMemo as o,Children as i,useEffect as r}from"react";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useIsomorphicLayoutEffect as a}from"../util/use-isomorphic-layout-effect.js";import{TabContext as n}from"./tab-context.js";import{TabLinkChain as l}from"./tab-link-chain.js";const d=({children:d,fullWidthIndicatorLine:s,fadeColor:m,"data-testid":c})=>{const{setTabLinks:p,controlledMode:u,onTabClick:f,isContextProvided:b}=e(n),j=o((()=>i.toArray(d).filter(Boolean).map((({props:t})=>({title:t.title,width:t.width,titleAddon:t.titleAddon})))),[d]);return a((()=>{p(j)}),[p,j]),r((()=>{"production"===process.env.NODE_ENV||b||console.error("Tab.TabList must be rendered inside Tab.Context.")}),[b]),t(l,{controlledMode:u,onTabClick:f,"data-testid":c,fullWidthIndicatorLine:s,fadeColor:m})};d.displayName="Tab.TabList";export{d as TabList};
 //# sourceMappingURL=tab-list.js.map

package/tab/tab-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-list.js","sources":["../../src/tab/tab-list.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { Children, useContext, useEffect, useMemo } from \"react\";\n\nimport { useIsomorphicLayoutEffect } from \"../util\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport type { TabListItemProps, TabListProps } from \"./types\";\n\nexport const TabList = ({\n    children,\n    fullWidthIndicatorLine,\n    fadeColor,\n    \"data-testid\": testId,\n}: TabListProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setTabLinks, controlledMode, onTabClick, isContextProvided } =\n        useContext(TabContext);\n\n    const tabLinks = useMemo(() => {\n        return (\n            Children.toArray(children).filter(\n                Boolean\n            ) as ReactElement<TabListItemProps>[]\n        ).map(({ props }) => ({\n            title: props.title,\n            width: props.width,\n            titleAddon: props.titleAddon,\n        })) as TabLinkProps[];\n    }, [children]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useIsomorphicLayoutEffect(() => {\n        setTabLinks(tabLinks);\n    }, [setTabLinks, tabLinks]);\n\n    useEffect(() => {\n        if (process.env.NODE_ENV !== \"production\" && !isContextProvided) {\n            console.error(\"Tab.TabList must be rendered inside Tab.Context.\");\n        }\n    }, [isContextProvided]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <TabLinkChain\n            controlledMode={controlledMode}\n            onTabClick={onTabClick}\n            data-testid={testId}\n            fullWidthIndicatorLine={fullWidthIndicatorLine}\n            fadeColor={fadeColor}\n        />\n    );\n};\n\nTabList.displayName = \"Tab.TabList\";\n"],"names":["TabList","children","fullWidthIndicatorLine","fadeColor","testId","setTabLinks","controlledMode","onTabClick","isContextProvided","useContext","TabContext","tabLinks","useMemo","Children","toArray","filter","Boolean","map","props","title","width","titleAddon","useIsomorphicLayoutEffect","useEffect","process","env","NODE_ENV","console","error","_jsx","TabLinkChain","displayName"],"mappings":"4fASO,MAAMA,EAAU,EACnBC,WACAC,yBACAC,YACA,cAAeC,MAKf,MAAMC,YAAEA,EAAWC,eAAEA,EAAcC,WAAEA,EAAUC,kBAAEA,GAC7CC,EAAWC,GAETC,EAAWC,GAAQ,IAEjBC,EAASC,QAAQb,GAAUc,OACvBC,SAENC,KAAI,EAAGC,YAAO,CACZC,MAAOD,EAAMC,MACbC,MAAOF,EAAME,MACbC,WAAYH,EAAMG,gBAEvB,CAACpB,IAkBJ,OAbAqB,GAA0B,KACtBjB,EAAYM,EAAS,GACtB,CAACN,EAAaM,IAEjBY,GAAU,KACuB,eAAzBC,QAAQC,IAAIC,UAA8BlB,GAC1CmB,QAAQC,MAAM,mDAClB,GACD,CAACpB,IAMAqB,EAACC,EAAY,CACTxB,eAAgBA,EAChBC,WAAYA,gBACCH,EACbF,uBAAwBA,EACxBC,UAAWA,GACb,EAIVH,EAAQ+B,YAAc"}
+{"version":3,"file":"tab-list.js","sources":["../../src/tab/tab-list.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { Children, useContext, useEffect, useMemo } from \"react\";\n\nimport { useIsomorphicLayoutEffect } from \"../util\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport type { TabListItemProps, TabListProps } from \"./types\";\n\nexport const TabList = ({\n    children,\n    fullWidthIndicatorLine,\n    fadeColor,\n    \"data-testid\": testId,\n}: TabListProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setTabLinks, controlledMode, onTabClick, isContextProvided } =\n        useContext(TabContext);\n\n    const tabLinks = useMemo(() => {\n        return (\n            Children.toArray(children).filter(\n                Boolean\n            ) as ReactElement<TabListItemProps>[]\n        ).map(({ props }) => ({\n            title: props.title,\n            width: props.width,\n            titleAddon: props.titleAddon,\n        })) as TabLinkProps[];\n    }, [children]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useIsomorphicLayoutEffect(() => {\n        setTabLinks(tabLinks);\n    }, [setTabLinks, tabLinks]);\n\n    useEffect(() => {\n        if (process.env.NODE_ENV !== \"production\" && !isContextProvided) {\n            console.error(\"Tab.TabList must be rendered inside Tab.Context.\");\n        }\n    }, [isContextProvided]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <TabLinkChain\n            controlledMode={controlledMode}\n            onTabClick={onTabClick}\n            data-testid={testId}\n            fullWidthIndicatorLine={fullWidthIndicatorLine}\n            fadeColor={fadeColor}\n        />\n    );\n};\n\nTabList.displayName = \"Tab.TabList\";\n"],"names":["TabList","children","fullWidthIndicatorLine","fadeColor","testId","setTabLinks","controlledMode","onTabClick","isContextProvided","useContext","TabContext","tabLinks","useMemo","Children","toArray","filter","Boolean","map","props","title","width","titleAddon","useIsomorphicLayoutEffect","useEffect","process","env","NODE_ENV","console","error","_jsx","TabLinkChain","displayName"],"mappings":"+dASO,MAAMA,EAAU,EACnBC,WACAC,yBACAC,YACA,cAAeC,MAKf,MAAMC,YAAEA,EAAWC,eAAEA,EAAcC,WAAEA,EAAUC,kBAAEA,GAC7CC,EAAWC,GAETC,EAAWC,GAAQ,IAEjBC,EAASC,QAAQb,GAAUc,OACvBC,SAENC,KAAI,EAAGC,YAAO,CACZC,MAAOD,EAAMC,MACbC,MAAOF,EAAME,MACbC,WAAYH,EAAMG,gBAEvB,CAACpB,IAkBJ,OAbAqB,GAA0B,KACtBjB,EAAYM,EAAS,GACtB,CAACN,EAAaM,IAEjBY,GAAU,KACuB,eAAzBC,QAAQC,IAAIC,UAA8BlB,GAC1CmB,QAAQC,MAAM,mDAClB,GACD,CAACpB,IAMAqB,EAACC,EAAY,CACTxB,eAAgBA,EAChBC,WAAYA,gBACCH,EACbF,uBAAwBA,EACxBC,UAAWA,GACb,EAIVH,EAAQ+B,YAAc"}

package/tab/tab.d.ts

@@ -1,4 +1,4 @@
-import { TabProps } from "./types";
+import type { TabProps } from "./types";
 /**
  * A tabbed-panel layout that switches visible content by selecting a tab link.
  *
@@ -8,9 +8,10 @@ import { TabProps } from "./types";
  * For cases where the tab bar and panels need to be positioned independently,
  * use the standalone composition: `Tab.Context`, `Tab.TabList`,
  * `Tab.TabListItem`, and `Tab.Panel`.
+ * @keywords navigation, panel, tabbed, tabs
  */
 export declare const Tab: {
-    ({ children, currentActive: currentActiveIndex, initialActive, onTabClick, "data-testid": testId, fullWidthIndicatorLine, fadeColor, ...otherProps }: TabProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, currentActive: currentActiveIndex, initialActive, onTabClick, "data-testid": testId, className, fullWidthIndicatorLine, fadeColor, ...otherProps }: TabProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     /** Renders an individual content panel within a `Tab`. Inactive items are unmounted — inner state is not preserved across tab switches. */

package/tab/tab.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../_virtual/_tslib.js";import{jsx as i,jsxs as e}from"react/jsx-runtime";import{useState as r,useMemo as o,Children as a,useEffect as n,cloneElement as l}from"react";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as s}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{noop as d,TabContext as m}from"./tab-context.js";import{TabContextProvider as p}from"./tab-context-provider.js";import{TabItem as c}from"./tab-item.js";import{TabLinkChain as b}from"./tab-link-chain.js";import{TabList as f}from"./tab-list.js";import{TabListItem as u}from"./tab-list-item.js";import{TabPanel as j}from"./tab-panel.js";import{Wrapper as h}from"./tab.style.js";const v=p=>{var{children:c,currentActive:f,initialActive:u=0,onTabClick:j,"data-testid":v,fullWidthIndicatorLine:A,fadeColor:C}=p,x=t(p,["children","currentActive","initialActive","onTabClick","data-testid","fullWidthIndicatorLine","fadeColor"]);const[k,y]=r(f||u),I=s(),T=o((()=>a.toArray(c).filter(Boolean).map((t=>({title:t.props.title,width:t.props.width,titleAddon:t.props.titleAddon})))),[c]),L=o((()=>({instanceId:I,tabLinks:T,currentActiveIndex:k,setCurrentActiveIndex:y,setTabLinks:d,controlledMode:"number"==typeof f,onTabClick:j,isContextProvided:!0})),[k,f,I,j,T]);n((()=>{"number"==typeof f&&y(f)}),[f]);return i(h,Object.assign({"data-testid":v},x,{children:e(m.Provider,{value:L,children:[i(b,{controlledMode:"number"==typeof f,onTabClick:j,"data-testid":`${v}-tabs`,fullWidthIndicatorLine:A,fadeColor:C}),a.toArray(c).filter(Boolean).map(((t,i)=>l(t,{key:i,index:i})))]})}))};v.displayName="Tab";const A=Object.assign(v,{Item:c,Context:p,TabList:f,TabListItem:u,Panel:j});export{A as Tab};
+import{__rest as t}from"../_virtual/_tslib.js";import{jsx as i,jsxs as e}from"react/jsx-runtime";import r from"clsx";import{useState as o,useMemo as a,Children as n,useEffect as l,cloneElement as s}from"react";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as d}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{wrapper as m}from"./tab.styles.js";import{noop as c,TabContext as p}from"./tab-context.js";import{TabContextProvider as b}from"./tab-context-provider.js";import{TabItem as f}from"./tab-item.js";import{TabLinkChain as u}from"./tab-link-chain.js";import{TabList as j}from"./tab-list.js";import{TabListItem as v}from"./tab-list-item.js";import{TabPanel as h}from"./tab-panel.js";const x=b=>{var{children:f,currentActive:j,initialActive:v=0,onTabClick:h,"data-testid":x,className:y,fullWidthIndicatorLine:A,fadeColor:C}=b,k=t(b,["children","currentActive","initialActive","onTabClick","data-testid","className","fullWidthIndicatorLine","fadeColor"]);const[I,T]=o(j||v),L=d(),g=a((()=>n.toArray(f).filter(Boolean).map((t=>({title:t.props.title,width:t.props.width,titleAddon:t.props.titleAddon})))),[f]),N=a((()=>({instanceId:L,tabLinks:g,currentActiveIndex:I,setCurrentActiveIndex:T,setTabLinks:c,controlledMode:"number"==typeof j,onTabClick:h,isContextProvided:!0})),[I,j,L,h,g]);l((()=>{"number"==typeof j&&T(j)}),[j]);return i("div",Object.assign({"data-testid":x,className:r(m,y)},k,{children:e(p.Provider,{value:N,children:[i(u,{controlledMode:"number"==typeof j,onTabClick:h,"data-testid":`${x}-tabs`,fullWidthIndicatorLine:A,fadeColor:C}),n.toArray(f).filter(Boolean).map(((t,i)=>{var e;const r=t;return s(t,{key:null!==(e=r.key)&&void 0!==e?e:r.props.title,index:i})}))]})}))};x.displayName="Tab";const y=Object.assign(x,{Item:f,Context:b,TabList:j,TabListItem:v,Panel:h});export{y as Tab};
 //# sourceMappingURL=tab.js.map

package/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../src/tab/tab.tsx"],"sourcesContent":["import {\n    Children,\n    ReactElement,\n    cloneElement,\n    useEffect,\n    useMemo,\n    useState,\n} from \"react\";\nimport { useId } from \"../util\";\nimport { TabContext, TabLinkProps, noop } from \"./tab-context\";\nimport { TabContextProvider } from \"./tab-context-provider\";\nimport { TabItem } from \"./tab-item\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport { TabList } from \"./tab-list\";\nimport { TabListItem } from \"./tab-list-item\";\nimport { TabPanel } from \"./tab-panel\";\nimport { Wrapper } from \"./tab.style\";\nimport { TabItemProps, TabProps } from \"./types\";\n\nconst TabBase = ({\n    children,\n    currentActive: currentActiveIndex,\n    initialActive = 0,\n    onTabClick,\n    \"data-testid\": testId,\n    fullWidthIndicatorLine,\n    fadeColor,\n    ...otherProps\n}: TabProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [currentActive, setCurrentActive] = useState<number>(\n        currentActiveIndex || initialActive\n    );\n\n    const instanceId = useId();\n\n    const tabLinks = useMemo(() => {\n        const validChildren = Children.toArray(children).filter(\n            Boolean\n        ) as ReactElement<TabItemProps>[];\n\n        return validChildren.map((child) => {\n            return {\n                title: child.props.title,\n                width: child.props.width,\n                titleAddon: child.props.titleAddon,\n            };\n        }) as TabLinkProps[];\n    }, [children]);\n\n    const tabContextValue = useMemo(\n        () => ({\n            instanceId,\n            tabLinks,\n            currentActiveIndex: currentActive,\n            setCurrentActiveIndex: setCurrentActive,\n            setTabLinks: noop,\n            controlledMode: typeof currentActiveIndex === \"number\",\n            onTabClick,\n            isContextProvided: true,\n        }),\n        [currentActive, currentActiveIndex, instanceId, onTabClick, tabLinks]\n    );\n\n    // =========================================================================\n    // Effects\n    // =========================================================================\n    useEffect(() => {\n        if (typeof currentActiveIndex === \"number\") {\n            setCurrentActive(currentActiveIndex);\n        }\n    }, [currentActiveIndex]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderChildren = () => {\n        const validChildren = Children.toArray(children).filter(Boolean);\n\n        return validChildren.map((child, index) => {\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            return cloneElement(child as ReactElement<any>, {\n                key: index,\n                index,\n            });\n        });\n    };\n\n    return (\n        <Wrapper data-testid={testId} {...otherProps}>\n            <TabContext.Provider value={tabContextValue}>\n                <TabLinkChain\n                    controlledMode={typeof currentActiveIndex === \"number\"}\n                    onTabClick={onTabClick}\n                    data-testid={`${testId}-tabs`}\n                    fullWidthIndicatorLine={fullWidthIndicatorLine}\n                    fadeColor={fadeColor}\n                />\n                {renderChildren()}\n            </TabContext.Provider>\n        </Wrapper>\n    );\n};\n\nTabBase.displayName = \"Tab\";\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\n/**\n * A tabbed-panel layout that switches visible content by selecting a tab link.\n *\n * Use `Tab` to organise content into labelled panels where only one panel is\n * visible at a time. Compose with `Tab.Item` to define each panel.\n *\n * For cases where the tab bar and panels need to be positioned independently,\n * use the standalone composition: `Tab.Context`, `Tab.TabList`,\n * `Tab.TabListItem`, and `Tab.Panel`.\n */\nexport const Tab = Object.assign(TabBase, {\n    /** Renders an individual content panel within a `Tab`. Inactive items are unmounted — inner state is not preserved across tab switches. */\n    Item: TabItem,\n    /** Context provider for the standalone TabList + Panel composition. */\n    Context: TabContextProvider,\n    /** Renders the tab link bar within a `Tab.Context`. */\n    TabList,\n    /** Declares a tab entry inside a `Tab.TabList`. */\n    TabListItem,\n    /** Renders a content panel within a `Tab.Context`. Inactive panels are unmounted — inner state is not preserved across tab switches. */\n    Panel: TabPanel,\n});\n"],"names":["TabBase","_a","children","currentActive","currentActiveIndex","initialActive","onTabClick","testId","fullWidthIndicatorLine","fadeColor","otherProps","__rest","setCurrentActive","useState","instanceId","useId","tabLinks","useMemo","Children","toArray","filter","Boolean","map","child","title","props","width","titleAddon","tabContextValue","setCurrentActiveIndex","setTabLinks","noop","controlledMode","isContextProvided","useEffect","_jsx","Wrapper","Object","assign","_jsxs","TabContext","Provider","value","TabLinkChain","index","cloneElement","key","displayName","Tab","Item","TabItem","Context","TabContextProvider","TabList","TabListItem","Panel","TabPanel"],"mappings":"8xBAmBA,MAAMA,EAAWC,QAAAC,SACbA,EACAC,cAAeC,EAAkBC,cACjCA,EAAgB,EAACC,WACjBA,EACA,cAAeC,EAAMC,uBACrBA,EAAsBC,UACtBA,KACGC,EAAUC,EAAAV,EARA,CAAA,WAAA,gBAAA,gBAAA,aAAA,cAAA,yBAAA,cAab,MAAOE,EAAeS,GAAoBC,EACtCT,GAAsBC,GAGpBS,EAAaC,IAEbC,EAAWC,GAAQ,IACCC,EAASC,QAAQjB,GAAUkB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAACzB,IAEE0B,EAAkBX,GACpB,KAAA,CACIH,aACAE,WACAZ,mBAAoBD,EACpB0B,sBAAuBjB,EACvBkB,YAAaC,EACbC,eAA8C,iBAAvB5B,EACvBE,aACA2B,mBAAmB,KAEvB,CAAC9B,EAAeC,EAAoBU,EAAYR,EAAYU,IAMhEkB,GAAU,KAC4B,iBAAvB9B,GACPQ,EAAiBR,EACrB,GACD,CAACA,IAiBJ,OACI+B,EAACC,EAAOC,OAAAC,OAAA,CAAA,cAAc/B,GAAYG,EAAU,CAAAR,SACxCqC,EAACC,EAAWC,SAAQ,CAACC,MAAOd,EAAe1B,SAAA,CACvCiC,EAACQ,EAAY,CACTX,eAA8C,iBAAvB5B,EACvBE,WAAYA,gBACC,GAAGC,SAChBC,uBAAwBA,EACxBC,UAAWA,IAnBDS,EAASC,QAAQjB,GAAUkB,OAAOC,SAEnCC,KAAI,CAACC,EAAOqB,IAEtBC,EAAatB,EAA4B,CAC5CuB,IAAKF,EACLA,iBAiBE,EAIlB5C,EAAQ+C,YAAc,YAeTC,EAAMX,OAAOC,OAAOtC,EAAS,CAEtCiD,KAAMC,EAENC,QAASC,EAETC,UAEAC,cAEAC,MAAOC"}
+{"version":3,"file":"tab.js","sources":["../../src/tab/tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ReactElement } from \"react\";\nimport { Children, cloneElement, useEffect, useMemo, useState } from \"react\";\n\nimport { useId } from \"../util\";\nimport * as styles from \"./tab.styles\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { noop, TabContext } from \"./tab-context\";\nimport { TabContextProvider } from \"./tab-context-provider\";\nimport { TabItem } from \"./tab-item\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport { TabList } from \"./tab-list\";\nimport { TabListItem } from \"./tab-list-item\";\nimport { TabPanel } from \"./tab-panel\";\nimport type { TabItemProps, TabProps } from \"./types\";\n\nconst TabBase = ({\n    children,\n    currentActive: currentActiveIndex,\n    initialActive = 0,\n    onTabClick,\n    \"data-testid\": testId,\n    className,\n    fullWidthIndicatorLine,\n    fadeColor,\n    ...otherProps\n}: TabProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [currentActive, setCurrentActive] = useState<number>(\n        currentActiveIndex || initialActive\n    );\n\n    const instanceId = useId();\n\n    const tabLinks = useMemo(() => {\n        const validChildren = Children.toArray(children).filter(\n            Boolean\n        ) as ReactElement<TabItemProps>[];\n\n        return validChildren.map((child) => {\n            return {\n                title: child.props.title,\n                width: child.props.width,\n                titleAddon: child.props.titleAddon,\n            };\n        }) as TabLinkProps[];\n    }, [children]);\n\n    const tabContextValue = useMemo(\n        () => ({\n            instanceId,\n            tabLinks,\n            currentActiveIndex: currentActive,\n            setCurrentActiveIndex: setCurrentActive,\n            setTabLinks: noop,\n            controlledMode: typeof currentActiveIndex === \"number\",\n            onTabClick,\n            isContextProvided: true,\n        }),\n        [currentActive, currentActiveIndex, instanceId, onTabClick, tabLinks]\n    );\n\n    // =========================================================================\n    // Effects\n    // =========================================================================\n    useEffect(() => {\n        if (typeof currentActiveIndex === \"number\") {\n            setCurrentActive(currentActiveIndex);\n        }\n    }, [currentActiveIndex]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderChildren = () => {\n        const validChildren = Children.toArray(children).filter(Boolean);\n\n        return validChildren.map((child, index) => {\n            const element = child as ReactElement<TabItemProps>;\n\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            return cloneElement(child as ReactElement<any>, {\n                key: element.key ?? element.props.title,\n                index,\n            });\n        });\n    };\n\n    return (\n        <div\n            data-testid={testId}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <TabContext.Provider value={tabContextValue}>\n                <TabLinkChain\n                    controlledMode={typeof currentActiveIndex === \"number\"}\n                    onTabClick={onTabClick}\n                    data-testid={`${testId}-tabs`}\n                    fullWidthIndicatorLine={fullWidthIndicatorLine}\n                    fadeColor={fadeColor}\n                />\n                {renderChildren()}\n            </TabContext.Provider>\n        </div>\n    );\n};\n\nTabBase.displayName = \"Tab\";\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\n// @catalog\n/**\n * A tabbed-panel layout that switches visible content by selecting a tab link.\n *\n * Use `Tab` to organise content into labelled panels where only one panel is\n * visible at a time. Compose with `Tab.Item` to define each panel.\n *\n * For cases where the tab bar and panels need to be positioned independently,\n * use the standalone composition: `Tab.Context`, `Tab.TabList`,\n * `Tab.TabListItem`, and `Tab.Panel`.\n * @keywords navigation, panel, tabbed, tabs\n */\nexport const Tab = Object.assign(TabBase, {\n    /** Renders an individual content panel within a `Tab`. Inactive items are unmounted — inner state is not preserved across tab switches. */\n    Item: TabItem,\n    /** Context provider for the standalone TabList + Panel composition. */\n    Context: TabContextProvider,\n    /** Renders the tab link bar within a `Tab.Context`. */\n    TabList,\n    /** Declares a tab entry inside a `Tab.TabList`. */\n    TabListItem,\n    /** Renders a content panel within a `Tab.Context`. Inactive panels are unmounted — inner state is not preserved across tab switches. */\n    Panel: TabPanel,\n});\n"],"names":["TabBase","_a","children","currentActive","currentActiveIndex","initialActive","onTabClick","testId","className","fullWidthIndicatorLine","fadeColor","otherProps","__rest","setCurrentActive","useState","instanceId","useId","tabLinks","useMemo","Children","toArray","filter","Boolean","map","child","title","props","width","titleAddon","tabContextValue","setCurrentActiveIndex","setTabLinks","noop","controlledMode","isContextProvided","useEffect","_jsx","Object","assign","clsx","styles.wrapper","_jsxs","TabContext","Provider","value","TabLinkChain","index","element","cloneElement","key","displayName","Tab","Item","TabItem","Context","TabContextProvider","TabList","TabListItem","Panel","TabPanel"],"mappings":"sxBAgBA,MAAMA,EAAWC,QAAAC,SACbA,EACAC,cAAeC,EAAkBC,cACjCA,EAAgB,EAACC,WACjBA,EACA,cAAeC,EAAMC,UACrBA,EAASC,uBACTA,EAAsBC,UACtBA,GAAST,EACNU,EAAUC,EAAAX,EATA,CAAA,WAAA,gBAAA,gBAAA,aAAA,cAAA,YAAA,yBAAA,cAcb,MAAOE,EAAeU,GAAoBC,EACtCV,GAAsBC,GAGpBU,EAAaC,IAEbC,EAAWC,GAAQ,IACCC,EAASC,QAAQlB,GAAUmB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAAC1B,IAEE2B,EAAkBX,GACpB,KAAA,CACIH,aACAE,WACAb,mBAAoBD,EACpB2B,sBAAuBjB,EACvBkB,YAAaC,EACbC,eAA8C,iBAAvB7B,EACvBE,aACA4B,mBAAmB,KAEvB,CAAC/B,EAAeC,EAAoBW,EAAYT,EAAYW,IAMhEkB,GAAU,KAC4B,iBAAvB/B,GACPS,EAAiBT,EACrB,GACD,CAACA,IAmBJ,OACIgC,EAAA,MAAAC,OAAAC,OAAA,CAAA,cACiB/B,EACbC,UAAW+B,EAAKC,EAAgBhC,IAC5BG,EAAU,CAAAT,SAEduC,EAACC,EAAWC,SAAQ,CAACC,MAAOf,EAAe3B,SAAA,CACvCkC,EAACS,EAAY,CACTZ,eAA8C,iBAAvB7B,EACvBE,WAAYA,EAAU,cACT,GAAGC,SAChBE,uBAAwBA,EACxBC,UAAWA,IAzBDS,EAASC,QAAQlB,GAAUmB,OAAOC,SAEnCC,KAAI,CAACC,EAAOsB,WAC7B,MAAMC,EAAUvB,EAGhB,OAAOwB,EAAaxB,EAA4B,CAC5CyB,YAAKhD,EAAA8C,EAAQE,mBAAOF,EAAQrB,MAAMD,MAClCqB,SACF,SAoBA,EAId9C,EAAQkD,YAAc,YAiBTC,EAAMd,OAAOC,OAAOtC,EAAS,CAEtCoD,KAAMC,EAENC,QAASC,EAETC,UAEAC,cAEAC,MAAOC"}

package/tab/tab.styles.d.ts

@@ -0,0 +1 @@
+export declare const wrapper: import("@linaria/core").LinariaClassName;

package/tab/tab.styles.js

@@ -0,0 +1,2 @@
+import"./tab.styles_1najffw.css";const t="wchm9bj";export{t as wrapper};
+//# sourceMappingURL=tab.styles.js.map

package/tab/tab.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.styles.js","sources":["../../src/tab/tab.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const wrapper = css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n`;\n"],"names":["wrapper"],"mappings":"oDAEO,MAAMA,EAAO"}

package/tab/tab.styles_1najffw.css

@@ -0,0 +1 @@
+@layer fds{.wchm9bj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}}

package/tab/types.d.ts

@@ -1,35 +1,84 @@
 import type React from "react";
 import type { FadeColorSet } from "../shared/fade-wrapper";
+/**
+ * Props for the `Tab` component.
+ */
 export interface TabProps {
     children: JSX.Element | JSX.Element[];
-    /** Specify the initial tab index that is to be displayed */
+    /**
+     * Zero-based index of the tab panel displayed on first render.
+     *
+     * Ignored when `currentActive` is provided.
+     *
+     * @default 0
+     */
     initialActive?: number | undefined;
     /**
-     * Specify the current tab index that is to be displayed. By specifying
-     * this prop, the tab rendering will be manually controlled by you
+     * Zero-based index of the currently active tab panel.
+     *
+     * When provided, the component operates in controlled mode — the caller is
+     * responsible for updating this value in response to `onTabClick` to
+     * reflect tab changes.
      */
     currentActive?: number;
     className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * Called when the user clicks a tab link.
+     *
+     * @param title The `title` of the clicked `Tab.Item`.
+     * @param index The zero-based index of the clicked `Tab.Item`.
+     */
     onTabClick?: ((title: string, index: number) => void) | undefined;
+    /**
+     * Extends all tab indicator lines to the full width
+     * of the tab bar instead of matching only the tab link width.
+     *
+     * @default false
+     */
     fullWidthIndicatorLine?: boolean | undefined;
+    /**
+     * Background color(s) used for the fade overlays at the edges of the
+     * scrollable tab link bar.
+     *
+     * Pass a `string[]` to apply the same gradient stop colors on both edges,
+     * or a `FadeColorSet` to specify left and right edges independently.
+     */
     fadeColor?: string[] | FadeColorSet | undefined;
 }
+/**
+ * Props for the `Tab.Item` sub-component.
+ */
 export interface TabItemProps {
+    /**
+     * Text label rendered in the tab link bar for this panel.
+     */
     title: string;
     children: JSX.Element | JSX.Element[];
-    /** Custom addon content displayed next to the tab title */
+    /**
+     * Optional addon element rendered alongside the tab title in the link bar.
+     */
     titleAddon?: TitleAddonProps | undefined;
     className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * Explicit width for this tab link in the tab bar. Accepts any valid CSS width value.
+     */
     width?: string | undefined;
 }
+/**
+ * Configuration for the optional addon element displayed next to a tab title.
+ */
 export interface TitleAddonProps {
-    /** addon content */
+    /** The element rendered as the addon. */
     content: JSX.Element;
-    /** position of the addon content, defaults to "right" */
+    /**
+     * Which side of the tab title the addon appears on.
+     *
+     * @default "right"
+     */
     position?: "left" | "right" | undefined;
 }
 /**

package/table/table.d.ts

@@ -1,24 +1,53 @@
-export declare const Table: (({ children, ...props }: React.TableHTMLAttributes<HTMLTableElement>) => import("react/jsx-runtime").JSX.Element) & {
-    Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-    Table: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>>> & string;
+import type { TableBodyProps, TableCellProps, TableContainerProps, TableHeaderProps, TableHeadProps, TableRowProps, TableTableProps } from "./types";
+/**
+ * A styled HTML table with a scrollable container wrapper.
+ *
+ * Use `Table` when displaying structured tabular data. The default export
+ * wraps content in `Table.Container` and `Table.Table` automatically. For
+ * full layout control, compose the sub-components directly:
+ * - `Table.Container` — scrollable wrapper div
+ * - `Table.Table` — the bare `<table>` element
+ * - `Table.Head` — the `<thead>` section
+ * - `Table.Body` — the `<tbody>` section
+ * - `Table.Row` — a `<tr>` row within the body
+ * - `Table.Cell` — a `<td>` data cell
+ * - `Table.HeaderCell` — a `<th>` column header cell
+ * @keywords data, grid, rows, tabular
+ */
+export declare const Table: (({ children, ...props }: TableTableProps) => import("react/jsx-runtime").JSX.Element) & {
+    /** Scrollable wrapper div that contains a `Table.Table`. */
+    Container: {
+        ({ children, className, ...props }: TableContainerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /** The bare `<table>` element. Use directly when you need to place the table inside a custom container. */
+    Table: {
+        ({ children, className, ...props }: TableTableProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /** Renders the `<thead>` section of the table. */
     Head: {
-        ({ children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, ...props }: TableHeadProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** Renders the `<tbody>` section of the table. */
     Body: {
-        ({ children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** Renders a `<tr>` row within a `Table.Body`. */
     Row: {
-        ({ children, ...props }: React.HTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableRowProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** Renders a `<td>` data cell within a `Table.Row`. */
     Cell: {
-        ({ children, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableCellProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** Renders a `<th>` header cell within a `Table.Head` row. */
     HeaderCell: {
-        ({ children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

package/table/table.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{TableWrapper as l,TableComponent as n,TableBody as a,BodyRow as i,BodyCell as c,HeaderCell as d}from"./table.styles.js";const s=l=>{var{children:n}=l,a=e(l,["children"]);return r("thead",Object.assign({},a,{children:n}))};s.displayName="Table.Head";const t=l=>{var{children:n}=l,i=e(l,["children"]);return r(a,Object.assign({},i,{children:n}))};t.displayName="Table.Body";const h=l=>{var{children:n}=l,a=e(l,["children"]);return r(i,Object.assign({},a,{children:n}))};h.displayName="Table.Row";const o=l=>{var{children:n}=l,a=e(l,["children"]);return r(c,Object.assign({},a,{children:n}))};o.displayName="Table.Cell";const b=l=>{var{children:n}=l,a=e(l,["children"]);return r(d,Object.assign({},a,{children:n}))};b.displayName="Table.HeaderCell";const m=Object.assign((a=>{var{children:i}=a,c=e(a,["children"]);return r(l,{children:r(n,Object.assign({},c,{children:i}))})}),{Container:l,Table:n,Head:s,Body:t,Row:h,Cell:o,HeaderCell:b});export{m as Table};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as a}from"react/jsx-runtime";import s from"clsx";import{tableBody as l,bodyRow as r,bodyCell as c,headerCell as n,tableWrapper as i,tableComponent as t}from"./table.styles.js";const d=s=>{var{children:l}=s,r=e(s,["children"]);return a("thead",Object.assign({},r,{children:l}))};d.displayName="Table.Head";const m=r=>{var{children:c,className:n}=r,i=e(r,["children","className"]);return a("tbody",Object.assign({className:s(l,n)},i,{children:c}))};m.displayName="Table.Body";const h=l=>{var{children:c,className:n}=l,i=e(l,["children","className"]);return a("tr",Object.assign({className:s(r,n)},i,{children:c}))};h.displayName="Table.Row";const N=l=>{var{children:r,className:n}=l,i=e(l,["children","className"]);return a("td",Object.assign({className:s(c,n)},i,{children:r}))};N.displayName="Table.Cell";const o=l=>{var{children:r,className:c}=l,i=e(l,["children","className"]);return a("th",Object.assign({className:s(n,c)},i,{children:r}))};o.displayName="Table.HeaderCell";const b=l=>{var{children:r,className:c}=l,n=e(l,["children","className"]);return a("div",Object.assign({className:s(i,c),"data-testid":"table-wrapper"},n,{children:r}))};b.displayName="Table.Container";const p=l=>{var{children:r,className:c}=l,n=e(l,["children","className"]);return a("table",Object.assign({className:s(t,c)},n,{children:r}))};p.displayName="Table.Table";const j=Object.assign((s=>{var{children:l}=s,r=e(s,["children"]);return a(b,{children:a(p,Object.assign({},r,{children:l}))})}),{Container:b,Table:p,Head:d,Body:m,Row:h,Cell:N,HeaderCell:o});export{j as Table};
 //# sourceMappingURL=table.js.map

package/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../src/table/table.tsx"],"sourcesContent":["import {\n    BodyCell,\n    BodyRow,\n    HeaderCell,\n    TableBody,\n    TableComponent,\n    TableWrapper,\n} from \"./table.styles\";\n\nconst Head = ({\n    children,\n    ...props\n}: React.HTMLAttributes<HTMLTableSectionElement>) => (\n    <thead {...props}>{children}</thead>\n);\nHead.displayName = \"Table.Head\";\n\nconst Body = ({\n    children,\n    ...props\n}: React.HTMLAttributes<HTMLTableSectionElement>) => (\n    <TableBody {...props}>{children}</TableBody>\n);\nBody.displayName = \"Table.Body\";\n\nconst Row = ({\n    children,\n    ...props\n}: React.HTMLAttributes<HTMLTableRowElement>) => (\n    <BodyRow {...props}>{children}</BodyRow>\n);\nRow.displayName = \"Table.Row\";\n\nconst Cell = ({\n    children,\n    ...props\n}: React.TdHTMLAttributes<HTMLTableCellElement>) => (\n    <BodyCell {...props}>{children}</BodyCell>\n);\nCell.displayName = \"Table.Cell\";\n\nconst Header = ({\n    children,\n    ...props\n}: React.ThHTMLAttributes<HTMLTableCellElement>) => (\n    <HeaderCell {...props}>{children}</HeaderCell>\n);\nHeader.displayName = \"Table.HeaderCell\";\n\nexport const Table = Object.assign(\n    ({ children, ...props }: React.TableHTMLAttributes<HTMLTableElement>) => (\n        <TableWrapper>\n            <TableComponent {...props}>{children}</TableComponent>\n        </TableWrapper>\n    ),\n    {\n        Container: TableWrapper,\n        Table: TableComponent,\n        Head,\n        Body,\n        Row,\n        Cell,\n        HeaderCell: Header,\n    }\n);\n"],"names":["Head","_a","children","props","__rest","_jsx","Object","assign","displayName","Body","TableBody","Row","BodyRow","Cell","BodyCell","Header","HeaderCell","Table","TableWrapper","TableComponent","Container"],"mappings":"sNASA,MAAMA,EAAQC,IAAA,IAAAC,SACVA,GAAQD,EACLE,EAAKC,EAAAH,EAFE,cAGuC,OACjDI,EAAA,QAAAC,OAAAC,OAAA,GAAWJ,YAAQD,IAAiB,EAExCF,EAAKQ,YAAc,aAEnB,MAAMC,EAAQR,IAAA,IAAAC,SACVA,GAAQD,EACLE,EAAKC,EAAAH,EAFE,cAGuC,OACjDI,EAACK,EAASJ,OAAAC,OAAA,GAAKJ,EAAK,CAAAD,SAAGA,IAAqB,EAEhDO,EAAKD,YAAc,aAEnB,MAAMG,EAAOV,IAAA,IAAAC,SACTA,GAAQD,EACLE,EAAKC,EAAAH,EAFC,cAGoC,OAC7CI,EAACO,EAAON,OAAAC,OAAA,GAAKJ,EAAK,CAAAD,SAAGA,IAAmB,EAE5CS,EAAIH,YAAc,YAElB,MAAMK,EAAQZ,IAAA,IAAAC,SACVA,GAAQD,EACLE,EAAKC,EAAAH,EAFE,cAGsC,OAChDI,EAACS,EAAQR,OAAAC,OAAA,GAAKJ,EAAK,CAAAD,SAAGA,IAAoB,EAE9CW,EAAKL,YAAc,aAEnB,MAAMO,EAAUd,IAAA,IAAAC,SACZA,GAAQD,EACLE,EAAKC,EAAAH,EAFI,cAGoC,OAChDI,EAACW,EAAUV,OAAAC,OAAA,GAAKJ,EAAK,CAAAD,SAAGA,IAAsB,EAElDa,EAAOP,YAAc,mBAEd,MAAMS,EAAQX,OAAOC,QACvBN,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAKC,EAAAH,EAApB,cAAwE,OACrEI,EAACa,EAAY,CAAAhB,SACTG,EAACc,EAAcb,OAAAC,OAAA,CAAA,EAAKJ,EAAK,CAAAD,SAAGA,MACjB,GAEnB,CACIkB,UAAWF,EACXD,MAAOE,EACPnB,OACAS,OACAE,MACAE,OACAG,WAAYD"}
+{"version":3,"file":"table.js","sources":["../../src/table/table.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport * as styles from \"./table.styles\";\nimport type {\n    TableBodyProps,\n    TableCellProps,\n    TableContainerProps,\n    TableHeaderProps,\n    TableHeadProps,\n    TableRowProps,\n    TableTableProps,\n} from \"./types\";\n\nconst Head = ({ children, ...props }: TableHeadProps) => (\n    <thead {...props}>{children}</thead>\n);\nHead.displayName = \"Table.Head\";\n\nconst Body = ({ children, className, ...props }: TableBodyProps) => (\n    <tbody className={clsx(styles.tableBody, className)} {...props}>\n        {children}\n    </tbody>\n);\nBody.displayName = \"Table.Body\";\n\nconst Row = ({ children, className, ...props }: TableRowProps) => (\n    <tr className={clsx(styles.bodyRow, className)} {...props}>\n        {children}\n    </tr>\n);\nRow.displayName = \"Table.Row\";\n\nconst Cell = ({ children, className, ...props }: TableCellProps) => (\n    <td className={clsx(styles.bodyCell, className)} {...props}>\n        {children}\n    </td>\n);\nCell.displayName = \"Table.Cell\";\n\nconst Header = ({ children, className, ...props }: TableHeaderProps) => (\n    <th className={clsx(styles.headerCell, className)} {...props}>\n        {children}\n    </th>\n);\nHeader.displayName = \"Table.HeaderCell\";\n\nconst Container = ({ children, className, ...props }: TableContainerProps) => (\n    <div\n        className={clsx(styles.tableWrapper, className)}\n        data-testid=\"table-wrapper\"\n        {...props}\n    >\n        {children}\n    </div>\n);\nContainer.displayName = \"Table.Container\";\n\nconst TableEl = ({ children, className, ...props }: TableTableProps) => (\n    <table className={clsx(styles.tableComponent, className)} {...props}>\n        {children}\n    </table>\n);\nTableEl.displayName = \"Table.Table\";\n\n// @catalog\n/**\n * A styled HTML table with a scrollable container wrapper.\n *\n * Use `Table` when displaying structured tabular data. The default export\n * wraps content in `Table.Container` and `Table.Table` automatically. For\n * full layout control, compose the sub-components directly:\n * - `Table.Container` — scrollable wrapper div\n * - `Table.Table` — the bare `<table>` element\n * - `Table.Head` — the `<thead>` section\n * - `Table.Body` — the `<tbody>` section\n * - `Table.Row` — a `<tr>` row within the body\n * - `Table.Cell` — a `<td>` data cell\n * - `Table.HeaderCell` — a `<th>` column header cell\n * @keywords data, grid, rows, tabular\n */\nexport const Table = Object.assign(\n    ({ children, ...props }: TableTableProps) => (\n        <Container>\n            <TableEl {...props}>{children}</TableEl>\n        </Container>\n    ),\n    {\n        /** Scrollable wrapper div that contains a `Table.Table`. */\n        Container,\n        /** The bare `<table>` element. Use directly when you need to place the table inside a custom container. */\n        Table: TableEl,\n        /** Renders the `<thead>` section of the table. */\n        Head,\n        /** Renders the `<tbody>` section of the table. */\n        Body,\n        /** Renders a `<tr>` row within a `Table.Body`. */\n        Row,\n        /** Renders a `<td>` data cell within a `Table.Row`. */\n        Cell,\n        /** Renders a `<th>` header cell within a `Table.Head` row. */\n        HeaderCell: Header,\n    }\n);\n"],"names":["Head","_a","children","props","__rest","_jsx","Object","assign","displayName","Body","className","clsx","styles.tableBody","Row","styles.bodyRow","Cell","styles.bodyCell","Header","styles.headerCell","Container","styles.tableWrapper","TableEl","styles.tableComponent","Table","HeaderCell"],"mappings":"0OAaA,MAAMA,EAAQC,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAKC,EAAAH,EAApB,cAA2C,OACrDI,EAAA,QAAAC,OAAAC,OAAA,GAAWJ,YAAQD,IAAiB,EAExCF,EAAKQ,YAAc,aAEnB,MAAMC,EAAQR,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAsD,OAChEI,EAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAKC,EAAkBF,IAAgBP,YACpDD,IACG,EAEZO,EAAKD,YAAc,aAEnB,MAAMK,EAAOZ,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAqD,OAC9DI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKG,EAAgBJ,IAAgBP,YAC/CD,IACA,EAETW,EAAIL,YAAc,YAElB,MAAMO,EAAQd,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAsD,OAChEI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKK,EAAiBN,IAAgBP,YAChDD,IACA,EAETa,EAAKP,YAAc,aAEnB,MAAMS,EAAUhB,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAwD,OACpEI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKO,EAAmBR,IAAgBP,YAClDD,IACA,EAETe,EAAOT,YAAc,mBAErB,MAAMW,EAAalB,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAA2D,OAC1EI,uBACIK,UAAWC,EAAKS,EAAqBV,GAAU,cACnC,iBACRP,YAEHD,IACC,EAEViB,EAAUX,YAAc,kBAExB,MAAMa,EAAWpB,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAuD,OACpEI,EAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAKW,EAAuBZ,IAAgBP,YACzDD,IACG,EAEZmB,EAAQb,YAAc,cAkBf,MAAMe,EAAQjB,OAAOC,QACvBN,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAKC,EAAAH,EAApB,cAA4C,OACzCI,EAACc,EAAS,CAAAjB,SACNG,EAACgB,EAAOf,OAAAC,OAAA,CAAA,EAAKJ,EAAK,CAAAD,SAAGA,MACb,GAEhB,CAEIiB,YAEAI,MAAOF,EAEPrB,OAEAS,OAEAI,MAEAE,OAEAS,WAAYP"}

package/table/table.styles.d.ts

@@ -1,6 +1,6 @@
-export declare const TableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const TableComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>>> & string;
-export declare const TableBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>>> & string;
-export declare const HeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never>>> & string;
-export declare const BodyRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>>> & string;
-export declare const BodyCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>>> & string;
+export declare const tableWrapper: import("@linaria/core").LinariaClassName;
+export declare const tableComponent: import("@linaria/core").LinariaClassName;
+export declare const tableBody: import("@linaria/core").LinariaClassName;
+export declare const headerCell: import("@linaria/core").LinariaClassName;
+export declare const bodyRow: import("@linaria/core").LinariaClassName;
+export declare const bodyCell: import("@linaria/core").LinariaClassName;

package/table/table.styles.js

@@ -1,55 +1,2 @@
-import e from"styled-components";import{Colour as r,Border as o,Radius as i,Spacing as t}from"../theme/index.js";const d=r.border,l=r.text,a=e.div`
-    overflow: auto;
-    border: ${o["width-010"]} ${o.solid} ${d};
-    border-radius: ${i.md};
-
-    /* Hide scrollbar */
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE 10+ */
-    &::-webkit-scrollbar {
-        display: none; /* Chrome/Safari/Webkit */
-    }
-`;a.displayName="Table.Container";const n=e.table`
-    text-align: left;
-    border-collapse: separate;
-    border-spacing: 0;
-    width: 100%;
-`;n.displayName="Table.Table";const s=e.tbody`
-    :where(tr:last-child) {
-        td {
-            border-bottom: none;
-        }
-    }
-`,c=e.th`
-    padding: ${t["spacing-20"]} ${t["spacing-16"]};
-    text-align: left;
-    cursor: default;
-    vertical-align: middle;
-    color: ${l};
-    background-color: ${r["bg-stronger"]};
-    height: 6rem;
-    border-bottom: ${o["width-010"]} ${o.solid} ${d};
-
-    &:where(&:first-child) {
-        padding-left: ${t["spacing-24"]};
-    }
-    &:where(&:last-child) {
-        padding-right: ${t["spacing-24"]};
-    }
-`,g=e.tr`
-    background-color: ${r.bg};
-    border-top: ${o["width-010"]} ${o.solid} ${d};
-`,b=e.td`
-    padding: ${t["spacing-20"]} ${t["spacing-16"]};
-    vertical-align: middle;
-    color: ${l};
-    border-bottom: ${o["width-010"]} ${o.solid} ${d};
-
-    &:where(&:first-child) {
-        padding-left: ${t["spacing-24"]};
-    }
-    &:where(&:last-child) {
-        padding-right: ${t["spacing-24"]};
-    }
-`;export{b as BodyCell,g as BodyRow,c as HeaderCell,s as TableBody,n as TableComponent,a as TableWrapper};
+import"./table.styles_1vjx31g.css";const t="txzjt0s",s="t110f2kz",e="tdex3lc",b="htqww2s",l="b1gaqki2",x="b183mjh5";export{x as bodyCell,l as bodyRow,b as headerCell,e as tableBody,s as tableComponent,t as tableWrapper};
 //# sourceMappingURL=table.styles.js.map

package/table/table.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.styles.js","sources":["../../src/table/table.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = Colour[\"border\"];\nconst fontColor = Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const TableWrapper = styled.div`\n    overflow: auto;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    border-radius: ${Radius[\"md\"]};\n\n    /* Hide scrollbar */\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n\nTableWrapper.displayName = \"Table.Container\";\n\nexport const TableComponent = styled.table`\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\nTableComponent.displayName = \"Table.Table\";\n\nexport const TableBody = styled.tbody`\n    :where(tr:last-child) {\n        td {\n            border-bottom: none;\n        }\n    }\n`;\n\nexport const HeaderCell = styled.th`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    text-align: left;\n    cursor: default;\n    vertical-align: middle;\n    color: ${fontColor};\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n\nexport const BodyRow = styled.tr`\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const BodyCell = styled.td`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n"],"names":["borderColor","Colour","fontColor","TableWrapper","styled","div","Border","Radius","displayName","TableComponent","table","TableBody","tbody","HeaderCell","th","Spacing","BodyRow","tr","BodyCell","td"],"mappings":"iHAMA,MAAMA,EAAcC,EAAe,OAC7BC,EAAYD,EAAa,KAKlBE,EAAeC,EAAOC,GAAG;;cAExBC,EAAO,gBAAgBA,EAAc,SAAKN;qBACnCO,EAAW;;;;;;;;EAUhCJ,EAAaK,YAAc,kBAEpB,MAAMC,EAAiBL,EAAOM,KAAK;;;;;EAO1CD,EAAeD,YAAc,cAEtB,MAAMG,EAAYP,EAAOQ,KAAK;;;;;;EAQxBC,EAAaT,EAAOU,EAAE;eACpBC,EAAQ,iBAAiBA,EAAQ;;;;aAInCb;wBACWD,EAAO;;qBAEVK,EAAO,gBAAgBA,EAAc,SAAKN;;;wBAGvCe,EAAQ;;;yBAGPA,EAAQ;;EAIpBC,EAAUZ,EAAOa,EAAE;wBACRhB,EAAW;kBACjBK,EAAO,gBAAgBA,EAAc,SAAKN;EAG/CkB,EAAWd,EAAOe,EAAE;eAClBJ,EAAQ,iBAAiBA,EAAQ;;aAEnCb;qBACQI,EAAO,gBAAgBA,EAAc,SAAKN;;;wBAGvCe,EAAQ;;;yBAGPA,EAAQ;;"}
+{"version":3,"file":"table.styles.js","sources":["../../src/table/table.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = Colour[\"border\"];\nconst fontColor = Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const tableWrapper = css`\n    overflow: auto;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    border-radius: ${Radius[\"md\"]};\n\n    /* Hide scrollbar */\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n\nexport const tableComponent = css`\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\nexport const tableBody = css`\n    :where(tr:last-child) {\n        td {\n            border-bottom: none;\n        }\n    }\n`;\n\nexport const headerCell = css`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    text-align: left;\n    cursor: default;\n    vertical-align: middle;\n    color: ${fontColor};\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n\nexport const bodyRow = css`\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const bodyCell = css`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n"],"names":["tableWrapper","tableComponent","tableBody","headerCell","bodyRow","bodyCell"],"mappings":"wDAaO,MAAMA,EAAY,UAaZC,EAAc,WAOdC,EAAS,UAQTC,EAAU,UAkBVC,EAAO,WAKPC,EAAQ"}

package/table/table.styles_1vjx31g.css

@@ -0,0 +1,6 @@
+@layer fds{.txzjt0s{overflow:auto;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);scrollbar-width:none;-ms-overflow-style:none;}.txzjt0s::-webkit-scrollbar{display:none;}
+.t110f2kz{text-align:left;border-collapse:separate;border-spacing:0;width:100%;}
+.tdex3lc :where(tr:last-child) td{border-bottom:none;}
+.htqww2s{padding:var(--fds-spacing-20) var(--fds-spacing-16);text-align:left;cursor:default;vertical-align:middle;color:var(--fds-colour-text);background-color:var(--fds-colour-bg-stronger);height:6rem;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.htqww2s:where(.htqww2s:first-child){padding-left:var(--fds-spacing-24);}.htqww2s:where(.htqww2s:last-child){padding-right:var(--fds-spacing-24);}
+.b1gaqki2{background-color:var(--fds-colour-bg);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.b183mjh5{padding:var(--fds-spacing-20) var(--fds-spacing-16);vertical-align:middle;color:var(--fds-colour-text);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.b183mjh5:where(.b183mjh5:first-child){padding-left:var(--fds-spacing-24);}.b183mjh5:where(.b183mjh5:last-child){padding-right:var(--fds-spacing-24);}}