@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.2

package/smart-app-banner/smart-app-banner.styles.js

@@ -9,7 +9,7 @@ import{CrossIcon as e}from"@lifesg/react-icons/cross";import{StarIcon as r}from"
 	}
 `,$=t.div`
     display: flex;
-    flex-direction: row;
+    flex-direction: row-reverse;
     align-items: stretch;
     position: fixed;
     margin: 0.5rem 1.25rem;
@@ -39,13 +39,13 @@ import{CrossIcon as e}from"@lifesg/react-icons/cross";import{StarIcon as r}from"
     color: ${s.icon};
     height: 1.25rem;
     width: 1.25rem;
-`,u=t.div`
+`,v=t.div`
     flex: 1;
     display: flex;
     align-items: center;
     padding: 0.5rem 1rem 0.5rem 0.25rem;
     cursor: pointer;
-`,v=t.div`
+`,u=t.div`
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -90,5 +90,5 @@ import{CrossIcon as e}from"@lifesg/react-icons/cross";import{StarIcon as r}from"
     ${Y}
 `,X=t(r)`
     ${Y}
-`;export{j as BannerIcon,k as ButtonContainer,b as Cross,B as Description,y as DismissButton,w as DismissContainer,u as ProceedContainer,W as RatingContainer,$ as SmartAppBannerContainer,z as Star,X as StarEmpty,A as StarHalf,M as StyledButton,v as TextContainer,S as Title};
+`;export{j as BannerIcon,k as ButtonContainer,b as Cross,B as Description,y as DismissButton,w as DismissContainer,v as ProceedContainer,W as RatingContainer,$ as SmartAppBannerContainer,z as Star,X as StarEmpty,A as StarHalf,M as StyledButton,u as TextContainer,S as Title};
 //# sourceMappingURL=smart-app-banner.styles.js.map

package/smart-app-banner/smart-app-banner.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"smart-app-banner.styles.js","sources":["../../src/smart-app-banner/smart-app-banner.styles.ts"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { StarIcon } from \"@lifesg/react-icons/star\";\nimport { StarFillIcon } from \"@lifesg/react-icons/star-fill\";\nimport { StarHalfIcon } from \"@lifesg/react-icons/star-half\";\nimport styled, { css, keyframes } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n} from \"../v3_theme\";\n\nconst slideDown = keyframes`\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(-20%);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n`;\n\nexport const SmartAppBannerContainer = styled.div<{\n    $offset: number;\n    $isAnimated: boolean;\n}>`\n    display: flex;\n    flex-direction: row;\n    align-items: stretch;\n    position: fixed;\n    margin: 0.5rem 1.25rem;\n    ${(props) => {\n        return `top: ${props.$offset}px;`;\n    }}\n    left: 0;\n    width: calc(100% - 2.5rem);\n    min-height: 5.5rem;\n    z-index: 9001;\n    background: ${V3_Colour.bg};\n    ${(props) => {\n        return props.theme?.colourMode === \"dark\"\n            ? css`\n                  border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n                      ${V3_Colour[\"border\"]};\n              `\n            : css`\n                  box-shadow: ${V3_Shadow[\"md-subtle\"]};\n              `;\n    }}\n    border-radius: ${V3_Radius[\"md\"]};\n    ${(props) => {\n        if (props.$isAnimated)\n            return css`\n                animation: ${slideDown} 0.3s;\n            `;\n    }}\n`;\n\nexport const DismissContainer = styled.div`\n    display: flex;\n    align-items: center;\n    padding: 0.5rem 0.25rem 0.5rem 1rem;\n`;\n\nexport const DismissButton = styled(ClickableIcon)`\n    padding: 0;\n`;\n\nexport const Cross = styled(CrossIcon)`\n    color: ${V3_Colour.icon};\n    height: 1.25rem;\n    width: 1.25rem;\n`;\n\nexport const ProceedContainer = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0.5rem 1rem 0.5rem 0.25rem;\n    cursor: pointer;\n`;\n\nexport const TextContainer = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: left;\n    margin: 0.5rem;\n    ${V3_MediaQuery.MaxWidth.xs} {\n        margin: 0 0.5rem;\n    }\n`;\n\nexport const BannerIcon = styled.img`\n    width: 2.65rem;\n    height: auto;\n    align-self: center;\n`;\n\nexport const ButtonContainer = styled.div`\n    max-width: 30%;\n`;\n\nexport const StyledButton = styled(Button.Small)`\n    padding: 0.5rem;\n    height: auto;\n    & > span {\n        overflow-wrap: anywhere;\n        ${V3_Font[\"body-xs-semibold\"]}\n    }\n`;\n\nexport const Title = styled(Typography.BodySM)`\n    font-weight: ${V3_Font.Spec[\"weight-bold\"]};\n    overflow-wrap: anywhere;\n    ${V3_MediaQuery.MaxWidth.xs} {\n        ${V3_Font[\"body-xs-bold\"]}\n    }\n`;\n\nexport const Description = styled(Typography.BodyXS)`\n    overflow-wrap: anywhere;\n`;\n\nexport const RatingContainer = styled.div`\n    margin-top: 0.25rem;\n    display: flex;\n    align-items: center;\n`;\n\nconst starIconStyle = css`\n    height: 2rem;\n    width: 2rem;\n    padding-right: 0.25rem;\n    color: #ffc107;\n`;\n\nexport const Star = styled(StarFillIcon)`\n    ${starIconStyle}\n`;\n\nexport const StarHalf = styled(StarHalfIcon)`\n    ${starIconStyle}\n`;\n\nexport const StarEmpty = styled(StarIcon)`\n    ${starIconStyle}\n`;\n"],"names":["slideDown","keyframes","SmartAppBannerContainer","styled","div","props","$offset","V3_Colour","bg","theme","_a","colourMode","css","V3_Border","V3_Shadow","V3_Radius","$isAnimated","DismissContainer","DismissButton","ClickableIcon","Cross","CrossIcon","icon","ProceedContainer","TextContainer","V3_MediaQuery","MaxWidth","xs","BannerIcon","img","ButtonContainer","StyledButton","Button","Small","V3_Font","Title","Typography","BodySM","Spec","Description","BodyXS","RatingContainer","starIconStyle","Star","StarFillIcon","StarHalf","StarHalfIcon","StarEmpty","StarIcon"],"mappings":"wkBAkBA,MAAMA,EAAYC,CAAS;;;;;;;;;EAWdC,EAA0BC,EAAOC,GAG5C;;;;;;MAMKC,GACQ,QAAQA,EAAMC;;;;;kBAMXC,EAAUC;MACrBH,UACC,MAAmC,UAAjB,UAAXA,EAAMI,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACdC,CAAG;4BACWC,EAAU,gBAAgBA,EAAiB;wBAC/CN,EAAkB;gBAE5BK,CAAG;gCACeE,EAAU;eAC3B;qBAEMC,EAAc;MAC5BV,IACC,GAAIA,EAAMW,YACN,OAAOJ,CAAG;6BACOZ;aAChB;EAIAiB,EAAmBd,EAAOC,GAAG;;;;EAM7Bc,EAAgBf,EAAOgB,EAAc;;EAIrCC,EAAQjB,EAAOkB,EAAU;aACzBd,EAAUe;;;EAKVC,EAAmBpB,EAAOC,GAAG;;;;;;EAQ7BoB,EAAgBrB,EAAOC,GAAG;;;;;;MAMjCqB,EAAcC,SAASC;;;EAKhBC,EAAazB,EAAO0B,GAAG;;;;EAMvBC,EAAkB3B,EAAOC,GAAG;;EAI5B2B,EAAe5B,EAAO6B,EAAOC,MAAM;;;;;UAKtCC,EAAQ;;EAILC,EAAQhC,EAAOiC,EAAWC,OAAO;mBAC3BH,EAAQI,KAAK;;MAE1Bb,EAAcC,SAASC;UACnBO,EAAQ;;EAILK,EAAcpC,EAAOiC,EAAWI,OAAO;;EAIvCC,EAAkBtC,EAAOC,GAAG;;;;EAMnCsC,EAAgB9B,CAAG;;;;;EAOZ+B,EAAOxC,EAAOyC,EAAa;MAClCF;EAGOG,EAAW1C,EAAO2C,EAAa;MACtCJ;EAGOK,EAAY5C,EAAO6C,EAAS;MACnCN;"}
+{"version":3,"file":"smart-app-banner.styles.js","sources":["../../src/smart-app-banner/smart-app-banner.styles.ts"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { StarIcon } from \"@lifesg/react-icons/star\";\nimport { StarFillIcon } from \"@lifesg/react-icons/star-fill\";\nimport { StarHalfIcon } from \"@lifesg/react-icons/star-half\";\nimport styled, { css, keyframes } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n} from \"../v3_theme\";\n\nconst slideDown = keyframes`\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(-20%);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n`;\n\nexport const SmartAppBannerContainer = styled.div<{\n    $offset: number;\n    $isAnimated: boolean;\n}>`\n    display: flex;\n    flex-direction: row-reverse;\n    align-items: stretch;\n    position: fixed;\n    margin: 0.5rem 1.25rem;\n    ${(props) => {\n        return `top: ${props.$offset}px;`;\n    }}\n    left: 0;\n    width: calc(100% - 2.5rem);\n    min-height: 5.5rem;\n    z-index: 9001;\n    background: ${V3_Colour.bg};\n    ${(props) => {\n        return props.theme?.colourMode === \"dark\"\n            ? css`\n                  border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n                      ${V3_Colour[\"border\"]};\n              `\n            : css`\n                  box-shadow: ${V3_Shadow[\"md-subtle\"]};\n              `;\n    }}\n    border-radius: ${V3_Radius[\"md\"]};\n    ${(props) => {\n        if (props.$isAnimated)\n            return css`\n                animation: ${slideDown} 0.3s;\n            `;\n    }}\n`;\n\nexport const DismissContainer = styled.div`\n    display: flex;\n    align-items: center;\n    padding: 0.5rem 0.25rem 0.5rem 1rem;\n`;\n\nexport const DismissButton = styled(ClickableIcon)`\n    padding: 0;\n`;\n\nexport const Cross = styled(CrossIcon)`\n    color: ${V3_Colour.icon};\n    height: 1.25rem;\n    width: 1.25rem;\n`;\n\nexport const ProceedContainer = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0.5rem 1rem 0.5rem 0.25rem;\n    cursor: pointer;\n`;\n\nexport const TextContainer = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: left;\n    margin: 0.5rem;\n    ${V3_MediaQuery.MaxWidth.xs} {\n        margin: 0 0.5rem;\n    }\n`;\n\nexport const BannerIcon = styled.img`\n    width: 2.65rem;\n    height: auto;\n    align-self: center;\n`;\n\nexport const ButtonContainer = styled.div`\n    max-width: 30%;\n`;\n\nexport const StyledButton = styled(Button.Small)`\n    padding: 0.5rem;\n    height: auto;\n    & > span {\n        overflow-wrap: anywhere;\n        ${V3_Font[\"body-xs-semibold\"]}\n    }\n`;\n\nexport const Title = styled(Typography.BodySM)`\n    font-weight: ${V3_Font.Spec[\"weight-bold\"]};\n    overflow-wrap: anywhere;\n    ${V3_MediaQuery.MaxWidth.xs} {\n        ${V3_Font[\"body-xs-bold\"]}\n    }\n`;\n\nexport const Description = styled(Typography.BodyXS)`\n    overflow-wrap: anywhere;\n`;\n\nexport const RatingContainer = styled.div`\n    margin-top: 0.25rem;\n    display: flex;\n    align-items: center;\n`;\n\nconst starIconStyle = css`\n    height: 2rem;\n    width: 2rem;\n    padding-right: 0.25rem;\n    color: #ffc107;\n`;\n\nexport const Star = styled(StarFillIcon)`\n    ${starIconStyle}\n`;\n\nexport const StarHalf = styled(StarHalfIcon)`\n    ${starIconStyle}\n`;\n\nexport const StarEmpty = styled(StarIcon)`\n    ${starIconStyle}\n`;\n"],"names":["slideDown","keyframes","SmartAppBannerContainer","styled","div","props","$offset","V3_Colour","bg","theme","_a","colourMode","css","V3_Border","V3_Shadow","V3_Radius","$isAnimated","DismissContainer","DismissButton","ClickableIcon","Cross","CrossIcon","icon","ProceedContainer","TextContainer","V3_MediaQuery","MaxWidth","xs","BannerIcon","img","ButtonContainer","StyledButton","Button","Small","V3_Font","Title","Typography","BodySM","Spec","Description","BodyXS","RatingContainer","starIconStyle","Star","StarFillIcon","StarHalf","StarHalfIcon","StarEmpty","StarIcon"],"mappings":"wkBAkBA,MAAMA,EAAYC,CAAS;;;;;;;;;EAWdC,EAA0BC,EAAOC,GAG5C;;;;;;MAMKC,GACQ,QAAQA,EAAMC;;;;;kBAMXC,EAAUC;MACrBH,UACC,MAAmC,UAAjB,UAAXA,EAAMI,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACdC,CAAG;4BACWC,EAAU,gBAAgBA,EAAiB;wBAC/CN,EAAkB;gBAE5BK,CAAG;gCACeE,EAAU;eAC3B;qBAEMC,EAAc;MAC5BV,IACC,GAAIA,EAAMW,YACN,OAAOJ,CAAG;6BACOZ;aAChB;EAIAiB,EAAmBd,EAAOC,GAAG;;;;EAM7Bc,EAAgBf,EAAOgB,EAAc;;EAIrCC,EAAQjB,EAAOkB,EAAU;aACzBd,EAAUe;;;EAKVC,EAAmBpB,EAAOC,GAAG;;;;;;EAQ7BoB,EAAgBrB,EAAOC,GAAG;;;;;;MAMjCqB,EAAcC,SAASC;;;EAKhBC,EAAazB,EAAO0B,GAAG;;;;EAMvBC,EAAkB3B,EAAOC,GAAG;;EAI5B2B,EAAe5B,EAAO6B,EAAOC,MAAM;;;;;UAKtCC,EAAQ;;EAILC,EAAQhC,EAAOiC,EAAWC,OAAO;mBAC3BH,EAAQI,KAAK;;MAE1Bb,EAAcC,SAASC;UACnBO,EAAQ;;EAILK,EAAcpC,EAAOiC,EAAWI,OAAO;;EAIvCC,EAAkBtC,EAAOC,GAAG;;;;EAMnCsC,EAAgB9B,CAAG;;;;;EAOZ+B,EAAOxC,EAAOyC,EAAa;MAClCF;EAGOG,EAAW1C,EAAO2C,EAAa;MACtCJ;EAGOK,EAAY5C,EAAO6C,EAAS;MACnCN;"}

package/smart-app-banner/types.d.ts

@@ -12,7 +12,8 @@ export interface SmartAppBannerProps {
 export interface SmartAppBannerContentProps {
     title: string;
     buttonLabel: string;
-    buttonAriaLabel: string;
+    iconAriaLabel?: string | undefined;
+    buttonAriaLabel?: string | undefined;
     message?: string | undefined;
     numberOfStars: number;
 }

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

@@ -1,6 +1,6 @@
 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 r,useRef as n}from"react";import{r as i}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as o}from"styled-components";import{Typography as l}from"../typography/index.js";import{V3_Breakpoint as d}from"../v3_theme/index.js";import{TabContext as a}from"./tab-context.js";import{CustomFadeWrapper as c,Chain as s,ChainItem as h,ChainLink as m,LabelContainer as u,Label as p,BoldLabel as f}from"./tab-link-chain.style.js";const v=({controlledMode:v,"data-testid":g,onTabClick:x,fullWidthIndicatorLine:y,fadeColor:b})=>{const{setCurrentActiveIndex:w,currentActiveIndex:$,tabLinks:k}=r(a),C=r(o),L=d["md-max"]({theme:C}),j=i.useMediaQuery({maxWidth:L}),A=d["lg-max"]({theme:C}),B=n(null),I=n([]),D=e=>t=>{t.preventDefault(),t.stopPropagation(),v||w(e),x&&x(k[e].title,e)},W=e=>j&&e.length>20?`${e.substring(0,20)}...`:e;return e(c,{onResize:({content:e,wrapper:t})=>{e&&t&&window.innerWidth<=A&&B.current&&(e.scrollLeft=B.current.getBoundingClientRect().left)},"data-testid":g,fadeColor:b,children:e(s,{role:"tablist",$fullWidthIndicatorLine:y,children:k.map((({title:r,width:n,titleAddon:i},o)=>{const d=$===o;return e(h,{role:"none",$active:d,ref:d?B:null,$width:n,children:t(m,{role:"none",onClick:D(o),"data-testid":`${g}-link-${o}`,$reversed:"left"===(null==i?void 0:i.position),children:[t(u,{role:"none",children:[e(p,{$active:d,onClick:D(o),"aria-hidden":"true",children:e(l.BodyBL,{weight:"regular",children:W(r)})}),e(f,{role:"tab",type:"button","aria-selected":d,tabIndex:d?0:-1,onKeyDown:e=>((e,t)=>{var r;let n=t;"ArrowRight"===e.key?(n=(t+1)%k.length,e.preventDefault()):"ArrowLeft"===e.key&&(n=(t-1+k.length)%k.length,e.preventDefault()),null===(r=I.current[n])||void 0===r||r.focus()})(e,o),ref:e=>I.current[o]=e,$active:d,children:e(l.BodyBL,{weight:"semibold",children:W(r)})})]}),null==i?void 0:i.content]})},o)}))})})};export{v 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{Breakpoint as s}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useSafeMaxWidthMediaQuery as a}from"../theme/utils/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{useDesignToken as d}from"../theme/utils/use-design-token.js";import{TabContext as m}from"./tab-context.js";import{tokens as c,customFadeWrapper as u,labelContainer as p,label as h,deselectedLabel as f,deselectedLabelActive as v,selectedLabel as j,selectedLabelActive as k,flexRow as g,chainLink as y,chainLinkReversed as b,chainItem as x,chainItemActive as w,chain as C,chainFullWidthIndicator as N}from"./tab-link-chain.styles.js";const I=({controlledMode:I,"data-testid":A,onTabClick:$,fullWidthIndicatorLine:D,fadeColor:L})=>{const{setCurrentActiveIndex:R,currentActiveIndex:P,tabLinks:q}=n(m),B=d(s["lg-max"]),z=a(B),E=o(null),K=o(null),M=o([]),T=o([]);i((()=>{T.current.forEach(((e,t)=>{var r;if(!e)return;const n=null===(r=q[t])||void 0===r?void 0:r.width;n?e.style.setProperty(c.chainItem.width,n):e.style.removeProperty(c.chainItem.width)}))}),[q]);const W=e=>t=>{t.preventDefault(),t.stopPropagation(),I||R(e),$&&$(q[e].title,e)};return e(l,{onResize:({content:e})=>{e&&z&&E.current&&K.current&&(e.scrollLeft=E.current.getBoundingClientRect().left-K.current.getBoundingClientRect().left)},"data-testid":A,fadeColor:L,className:u,children:e("ul",{role:"tablist",ref:K,className:r(C,D&&N),children:q.map((({title:n,width:o,titleAddon:i},l)=>{var s;const a=P===l;return e("li",{role:"none",className:r(x,a&&w),ref:e=>{T.current[l]=e,a&&(E.current=e)},children:t("div",{role:"none",onClick:W(l),"data-testid":`${A}-link-${l}`,className:r(g,y,"left"===(null==i?void 0:i.position)&&b),children:[t("div",{className:p,role:"none",children:[e("div",{className:r(h,f,a&&v),onClick:W(l),"aria-hidden":"true",children:n}),e("button",{role:"tab",type:"button","aria-selected":a,tabIndex:a?0:-1,onKeyDown:e=>((e,t)=>{var r;let n=t;"ArrowRight"===e.key?(n=(t+1)%q.length,e.preventDefault()):"ArrowLeft"===e.key&&(n=(t-1+q.length)%q.length,e.preventDefault()),null===(r=M.current[n])||void 0===r||r.focus()})(e,l),ref:e=>M.current[l]=e,className:r(h,j,a&&k),children:n})]}),null==i?void 0:i.content]})},`${n}-${null!=o?o:""}-${null!==(s=null==i?void 0:i.position)&&void 0!==s?s:"none"}`)}))})})};export{I 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\";\n\nimport type { ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { Typography } from \"../typography\";\nimport { V3_Breakpoint } from \"../v3_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 type { 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 } =\n        useContext(TabContext);\n\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"md-max\"]({ theme });\n\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n\n    const tabletBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n\n    const activeLinkRef = useRef<HTMLLIElement>(null);\n    const chainLinkRefs = useRef<(HTMLButtonElement | 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        ) {\n            content.scrollLeft =\n                activeLinkRef.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            >\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                                        <Typography.BodyBL weight=\"regular\">\n                                            {truncateText(title)}\n                                        </Typography.BodyBL>\n                                    </Label>\n                                    <BoldLabel\n                                        role=\"tab\"\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                                        <Typography.BodyBL weight=\"semibold\">\n                                            {truncateText(title)}\n                                        </Typography.BodyBL>\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","useContext","TabContext","theme","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","tabletBreakpoint","activeLinkRef","useRef","chainLinkRefs","handleChainLinkClick","index","event","preventDefault","stopPropagation","title","truncateText","value","length","substring","_jsx","CustomFadeWrapper","onResize","content","wrapper","window","innerWidth","current","scrollLeft","getBoundingClientRect","left","Chain","role","$fullWidthIndicatorLine","children","map","width","titleAddon","isActive","ChainItem","$active","ref","$width","_jsxs","ChainLink","onClick","$reversed","position","LabelContainer","Label","Typography","BodyBL","weight","BoldLabel","type","tabIndex","onKeyDown","e","nextIndex","key","_a","focus","handleKeyDown","el"],"mappings":"wgBA2BO,MAAMA,EAAe,EACxBC,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,GAC/CC,EAAWC,GAETC,EAAQF,EAAWG,GACnBC,EAAmBC,EAAc,UAAU,CAAEH,UAE7CI,EAAWC,EAAAA,cAAc,CAC3BC,SAAUJ,IAGRK,EAAmBJ,EAAc,UAAU,CAAEH,UAE7CQ,EAAgBC,EAAsB,MACtCC,EAAgBD,EAAqC,IAKrDE,EACDC,GACAC,IACGA,EAAMC,iBACND,EAAME,kBACDzB,GACDK,EAAsBiB,GAGtBpB,GACAA,EAAWK,EAASe,GAAOI,MAAOJ,EACtC,EA+BFK,EAAgBC,GACdd,GACOc,EAAMC,OAAS,GAAK,GAAGD,EAAME,UAAU,EAAG,SAG9CF,EAMX,OACIG,EAACC,EAAiB,CACdC,SAzCa,EAAGC,UAASC,cAEzBD,GACAC,GACAC,OAAOC,YAAcpB,GACrBC,EAAcoB,UAEdJ,EAAQK,WACJrB,EAAcoB,QAAQE,wBAAwBC,KACtD,EAgC0B,cACTxC,EACbG,UAAWA,WAEX2B,EAACW,GACGC,KAAK,UAASC,wBACWzC,EAAsB0C,SAE9CtC,EAASuC,KAAI,EAAGpB,QAAOqB,QAAOC,cAAc1B,KACzC,MAAM2B,EAAW3C,IAAuBgB,EAExC,OACIS,EAACmB,GAEGP,KAAK,OAAMQ,QACFF,EACTG,IAAKH,EAAW/B,EAAgB,KAAImC,OAC5BN,WAERO,EAACC,GACGZ,KAAK,OACLa,QAASnC,EAAqBC,GAAM,cACvB,GAAGrB,UAAeqB,IAAOmC,UACF,UAAzBT,aAAU,EAAVA,EAAYU,UAAmBb,SAAA,CAE1CS,EAACK,EAAc,CAAChB,KAAK,iBACjBZ,EAAC6B,WACYX,EACTO,QAASnC,EAAqBC,GAAM,cACxB,gBAEZS,EAAC8B,EAAWC,OAAM,CAACC,OAAO,mBACrBpC,EAAaD,OAGtBK,EAACiC,EAAS,CACNrB,KAAK,MACLsB,KAAK,SAAQ,gBACEhB,EACfiB,SAAUjB,EAAW,GAAI,EACzBkB,UAAYC,GArE1B,EAACA,EAAwB9C,WAC3C,IAAI+C,EAAY/C,EACF,eAAV8C,EAAEE,KACFD,GAAa/C,EAAQ,GAAKf,EAASsB,OACnCuC,EAAE5C,kBACe,cAAV4C,EAAEE,MACTD,GAAa/C,EAAQ,EAAIf,EAASsB,QAAUtB,EAASsB,OACrDuC,EAAE5C,kBAG0B,QAAhC+C,EAAAnD,EAAckB,QAAQ+B,UAAU,IAAAE,GAAAA,EAAEC,OAAO,EA4DLC,CAAcL,EAAG9C,GAErB8B,IAAMsB,GACDtD,EAAckB,QAAQhB,GAASoD,EAAGvB,QAE9BF,EAAQJ,SAEjBd,EAAC8B,EAAWC,QAAOC,OAAO,WAAUlB,SAC/BlB,EAAaD,UAIzBsB,aAAU,EAAVA,EAAYd,YAxCZZ,EA0CG,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 { useDesignToken, useSafeMaxWidthMediaQuery } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\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 } =\n        useContext(TabContext);\n\n    const tabletBreakpoint = useDesignToken(Breakpoint[\"lg-max\"]);\n    const isTablet = useSafeMaxWidthMediaQuery(tabletBreakpoint);\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                                        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","useContext","TabContext","tabletBreakpoint","useDesignToken","Breakpoint","isTablet","useSafeMaxWidthMediaQuery","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","type","tabIndex","onKeyDown","e","nextIndex","key","length","focus","handleKeyDown","styles.selectedLabel","styles.selectedLabelActive"],"mappings":"ypCAkBO,MAAMA,EAAe,EACxBC,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,GAC/CC,EAAWC,GAETC,EAAmBC,EAAeC,EAAW,WAC7CC,EAAWC,EAA0BJ,GAErCK,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,EAAAnB,EAASiB,UAAM,IAAAE,OAAA,EAAAA,EAAED,MAE3BA,EACAF,EAAQI,MAAMC,YAAYC,EAAcC,UAAUL,MAAOA,GAEzDF,EAAQI,MAAMI,eAAeF,EAAcC,UAAUL,MACzD,GACF,GACH,CAAClB,IAKJ,MAAMyB,EACDR,GACAS,IACGA,EAAMC,iBACND,EAAME,kBACDnC,GACDK,EAAsBmB,GAGtBtB,GACAA,EAAWK,EAASiB,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,cACT1C,EACbG,UAAWA,EACXwC,UAAWC,EAAwBC,SAEnCT,EAAA,KAAA,CACIU,KAAK,UACLC,IAAK/B,EACL2B,UAAWK,EACPC,EACA/C,GAA0BgD,GAC7BL,SAEAvC,EAAS6C,KAAI,EAAGhB,QAAOX,QAAO4B,cAAc7B,WACzC,MAAM8B,EAAWhD,IAAuBkB,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,GAAGvB,UAAeuB,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,GAAM,cACxB,OAAMsB,SAEjBV,IAELC,EAAA,SAAA,CACIU,KAAK,MACLqB,KAAK,SAAQ,gBACEd,EACfe,SAAUf,EAAW,GAAI,EACzBgB,UAAYC,GApF1B,EAACA,EAAwB/C,WAC3C,IAAIgD,EAAYhD,EACF,eAAV+C,EAAEE,KACFD,GAAahD,EAAQ,GAAKjB,EAASmE,OACnCH,EAAErC,kBACe,cAAVqC,EAAEE,MACTD,GAAahD,EAAQ,EAAIjB,EAASmE,QAAUnE,EAASmE,OACrDH,EAAErC,kBAG0B,QAAhCR,EAAAR,EAAcG,QAAQmD,UAAU,IAAA9C,GAAAA,EAAEiD,OAAO,EA2ELC,CAAcL,EAAG/C,GAErBwB,IAAMS,GACDvC,EAAcG,QAAQG,GAASiC,EAEpCb,UAAWK,EACPgB,EACAY,EACAvB,GACIwB,YAGP1C,OAGRiB,eAAAA,EAAYb,YA1DZ,GAAGJ,KAASX,QAAAA,EAAS,MACF,UAApB4B,aAAU,EAAVA,EAAYS,gBAAQ,IAAApC,EAAAA,EAAI,SA2D3B,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_1nreqrp.css";const c={chainItem:{width:"--fds-internal-tab-chainItem-width"}},t="c16oikpn",i="c2536gp",n="c1c3wbud",s="cdfiwt",d="fxd8c9t",a="c1gdrjx",e="cj41vce",l="lmiq2g0",r="l1yi6azs",b="d97pn0z",h="d1v8j9lw",p="s5l4m4t",m="shqgesl",w="c1r7bbxk";export{t as chain,i as chainFullWidthIndicator,n as chainItem,s as chainItemActive,a as chainLink,e as chainLinkReversed,w as customFadeWrapper,b as deselectedLabel,h as deselectedLabelActive,d as flexRow,r as label,l as labelContainer,p as selectedLabel,m as selectedLabelActive,c 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":"+DAWO,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_1nreqrp.css

@@ -0,0 +1,14 @@
+.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);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);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.d.ts

@@ -1,6 +1,6 @@
 import type { TabProps } from "./types";
 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;
 } & {
     Item: {

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 d}from"react";import{Wrapper as l}from"./tab.style.js";import{TabContext as c}from"./tab-context.js";import{TabItem as s}from"./tab-item.js";import{TabLinkChain as m}from"./tab-link-chain.js";const p=s=>{var{children:p,currentActive:f,initialActive:b=0,onTabClick:u,"data-testid":h,fullWidthIndicatorLine:v,fadeColor:A}=s,j=t(s,["children","currentActive","initialActive","onTabClick","data-testid","fullWidthIndicatorLine","fadeColor"]);const[y,C]=r(f||b),k=o((()=>a.toArray(p).filter(Boolean).map((t=>({title:t.props.title,width:t.props.width,titleAddon:t.props.titleAddon})))),[p]);n((()=>{"number"==typeof f&&C(f)}),[f]);return i(l,Object.assign({"data-testid":h},j,{children:e(c.Provider,{value:{tabLinks:k,currentActiveIndex:y,setCurrentActiveIndex:C},children:[i(m,{controlledMode:"number"==typeof f,onTabClick:u,"data-testid":`${h}-tabs`,fullWidthIndicatorLine:v,fadeColor:A}),a.toArray(p).filter(Boolean).map(((t,i)=>d(t,{key:i,index:i})))]})}))};p.displayName="Tab";const f=Object.assign(p,{Item:s});export{f as Tab};
+import{__rest as t}from"../_virtual/_tslib.js";import{jsx as e,jsxs as i}from"react/jsx-runtime";import r from"clsx";import{useState as o,useMemo as a,Children as n,useEffect as l,cloneElement as d}from"react";import{wrapper as s}from"./tab.styles.js";import{TabContext as c}from"./tab-context.js";import{TabItem as m}from"./tab-item.js";import{TabLinkChain as p}from"./tab-link-chain.js";const f=m=>{var{children:f,currentActive:b,initialActive:u=0,onTabClick:v,"data-testid":h,className:A,fullWidthIndicatorLine:j,fadeColor:y}=m,k=t(m,["children","currentActive","initialActive","onTabClick","data-testid","className","fullWidthIndicatorLine","fadeColor"]);const[x,C]=o(b||u),I=a((()=>n.toArray(f).filter(Boolean).map((t=>({title:t.props.title,width:t.props.width,titleAddon:t.props.titleAddon})))),[f]),L=a((()=>({tabLinks:I,currentActiveIndex:x,setCurrentActiveIndex:C})),[x,I]);l((()=>{"number"==typeof b&&C(b)}),[b]);return e("div",Object.assign({"data-testid":h,className:r(s,A)},k,{children:i(c.Provider,{value:L,children:[e(p,{controlledMode:"number"==typeof b,onTabClick:v,"data-testid":`${h}-tabs`,fullWidthIndicatorLine:j,fadeColor:y}),n.toArray(f).filter(Boolean).map(((t,e)=>{var i;const r=t;return d(t,{key:null!==(i=r.key)&&void 0!==i?i:r.props.title,index:e})}))]})}))};f.displayName="Tab";const b=Object.assign(f,{Item:m});export{b 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 type { ReactElement } from \"react\";\nimport { Children, cloneElement, useEffect, useMemo, useState } from \"react\";\n\nimport { Wrapper } from \"./tab.style\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport { TabItem } from \"./tab-item\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport type { TabItemProps, TabProps } from \"./types\";\n\n// =============================================================================\n// COMPONENT\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 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    // =========================================================================\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\n                value={{\n                    tabLinks,\n                    currentActiveIndex: currentActive,\n                    setCurrentActiveIndex: setCurrentActive,\n                }}\n            >\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// =============================================================================\nexport const Tab = Object.assign(TabBase, {\n    Item: TabItem,\n});\n"],"names":["TabBase","_a","children","currentActive","currentActiveIndex","initialActive","onTabClick","testId","fullWidthIndicatorLine","fadeColor","otherProps","__rest","setCurrentActive","useState","tabLinks","useMemo","Children","toArray","filter","Boolean","map","child","title","props","width","titleAddon","useEffect","_jsx","Wrapper","Object","assign","_jsxs","TabContext","Provider","value","setCurrentActiveIndex","TabLinkChain","controlledMode","index","cloneElement","key","displayName","Tab","Item","TabItem"],"mappings":"gXAaA,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,EAAWC,GAAQ,IACCC,EAASC,QAAQf,GAAUgB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAACvB,IAKJwB,GAAU,KAC4B,iBAAvBtB,GACPQ,EAAiBR,EACrB,GACD,CAACA,IAiBJ,OACIuB,EAACC,EAAOC,OAAAC,OAAA,CAAA,cAAcvB,GAAYG,EAAU,CAAAR,SACxC6B,EAACC,EAAWC,SAAQ,CAChBC,MAAO,CACHpB,WACAV,mBAAoBD,EACpBgC,sBAAuBvB,GAC1BV,SAAA,CAEDyB,EAACS,EAAY,CACTC,eAA8C,iBAAvBjC,EACvBE,WAAYA,gBACC,GAAGC,SAChBC,uBAAwBA,EACxBC,UAAWA,IAzBDO,EAASC,QAAQf,GAAUgB,OAAOC,SAEnCC,KAAI,CAACC,EAAOiB,IAEtBC,EAAalB,EAA4B,CAC5CmB,IAAKF,EACLA,iBAuBE,EAIlBtC,EAAQyC,YAAc,YAKTC,EAAMb,OAAOC,OAAO9B,EAAS,CACtC2C,KAAMC"}
+{"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 * as styles from \"./tab.styles\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport { TabItem } from \"./tab-item\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport type { TabItemProps, TabProps } from \"./types\";\n\n// =============================================================================\n// COMPONENT\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 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            tabLinks,\n            currentActiveIndex: currentActive,\n            setCurrentActiveIndex: setCurrentActive,\n        }),\n        [currentActive, 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// =============================================================================\nexport const Tab = Object.assign(TabBase, {\n    Item: TabItem,\n});\n"],"names":["TabBase","_a","children","currentActive","currentActiveIndex","initialActive","onTabClick","testId","className","fullWidthIndicatorLine","fadeColor","otherProps","__rest","setCurrentActive","useState","tabLinks","useMemo","Children","toArray","filter","Boolean","map","child","title","props","width","titleAddon","tabContextValue","setCurrentActiveIndex","useEffect","_jsx","Object","assign","clsx","styles.wrapper","_jsxs","TabContext","Provider","value","TabLinkChain","controlledMode","index","element","cloneElement","key","displayName","Tab","Item","TabItem"],"mappings":"qYAcA,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,EAAWC,GAAQ,IACCC,EAASC,QAAQhB,GAAUiB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAACxB,IAEEyB,EAAkBX,GACpB,KAAA,CACID,WACAX,mBAAoBD,EACpByB,sBAAuBf,KAE3B,CAACV,EAAeY,IAMpBc,GAAU,KAC4B,iBAAvBzB,GACPS,EAAiBT,EACrB,GACD,CAACA,IAmBJ,OACI0B,EAAA,MAAAC,OAAAC,OAAA,CAAA,cACiBzB,EACbC,UAAWyB,EAAKC,EAAgB1B,IAC5BG,EAAU,CAAAT,SAEdiC,EAACC,EAAWC,SAAQ,CAACC,MAAOX,EAAezB,SAAA,CACvC4B,EAACS,EAAY,CACTC,eAA8C,iBAAvBpC,EACvBE,WAAYA,EAAU,cACT,GAAGC,SAChBE,uBAAwBA,EACxBC,UAAWA,IAzBDO,EAASC,QAAQhB,GAAUiB,OAAOC,SAEnCC,KAAI,CAACC,EAAOmB,WAC7B,MAAMC,EAAUpB,EAGhB,OAAOqB,EAAarB,EAA4B,CAC5CsB,YAAK3C,EAAAyC,EAAQE,mBAAOF,EAAQlB,MAAMD,MAClCkB,SACF,SAoBA,EAIdzC,EAAQ6C,YAAc,YAKTC,EAAMf,OAAOC,OAAOhC,EAAS,CACtC+C,KAAMC"}

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 @@
+.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/table/table.d.ts

@@ -1,24 +1,30 @@
 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>> & string;
-    Table: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
+    Container: {
+        ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Table: {
+        ({ children, className, ...props }: React.TableHTMLAttributes<HTMLTableElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
     Head: {
         ({ children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Body: {
-        ({ children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Row: {
-        ({ children, ...props }: React.HTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: React.HTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Cell: {
-        ({ children, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     HeaderCell: {
-        ({ children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>): 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\";\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    className,\n    ...props\n}: React.HTMLAttributes<HTMLTableSectionElement>) => (\n    <tbody className={clsx(styles.tableBody, className)} {...props}>\n        {children}\n    </tbody>\n);\nBody.displayName = \"Table.Body\";\n\nconst Row = ({\n    children,\n    className,\n    ...props\n}: React.HTMLAttributes<HTMLTableRowElement>) => (\n    <tr className={clsx(styles.bodyRow, className)} {...props}>\n        {children}\n    </tr>\n);\nRow.displayName = \"Table.Row\";\n\nconst Cell = ({\n    children,\n    className,\n    ...props\n}: React.TdHTMLAttributes<HTMLTableCellElement>) => (\n    <td className={clsx(styles.bodyCell, className)} {...props}>\n        {children}\n    </td>\n);\nCell.displayName = \"Table.Cell\";\n\nconst Header = ({\n    children,\n    className,\n    ...props\n}: React.ThHTMLAttributes<HTMLTableCellElement>) => (\n    <th className={clsx(styles.headerCell, className)} {...props}>\n        {children}\n    </th>\n);\nHeader.displayName = \"Table.HeaderCell\";\n\nconst Container = ({\n    children,\n    className,\n    ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\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 = ({\n    children,\n    className,\n    ...props\n}: React.TableHTMLAttributes<HTMLTableElement>) => (\n    <table className={clsx(styles.tableComponent, className)} {...props}>\n        {children}\n    </table>\n);\nTableEl.displayName = \"Table.Table\";\n\nexport const Table = Object.assign(\n    ({ children, ...props }: React.TableHTMLAttributes<HTMLTableElement>) => (\n        <Container>\n            <TableEl {...props}>{children}</TableEl>\n        </Container>\n    ),\n    {\n        Container,\n        Table: TableEl,\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","className","clsx","styles.tableBody","Row","styles.bodyRow","Cell","styles.bodyCell","Header","styles.headerCell","Container","styles.tableWrapper","TableEl","styles.tableComponent","Table","HeaderCell"],"mappings":"0OAIA,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,QAAAC,SACVA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHE,0BAIuC,OACjDI,EAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAKC,EAAkBF,IAAgBP,YACpDD,IACG,EAEZO,EAAKD,YAAc,aAEnB,MAAMK,EAAOZ,QAAAC,SACTA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHC,0BAIoC,OAC7CI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKG,EAAgBJ,IAAgBP,YAC/CD,IACA,EAETW,EAAIL,YAAc,YAElB,MAAMO,EAAQd,QAAAC,SACVA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHE,0BAIsC,OAChDI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKK,EAAiBN,IAAgBP,YAChDD,IACA,EAETa,EAAKP,YAAc,aAEnB,MAAMS,EAAUhB,QAAAC,SACZA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHI,0BAIoC,OAChDI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKO,EAAmBR,IAAgBP,YAClDD,IACA,EAETe,EAAOT,YAAc,mBAErB,MAAMW,EAAalB,QAAAC,SACfA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHO,0BAIyB,OACxCI,uBACIK,UAAWC,EAAKS,EAAqBV,GAAU,cACnC,iBACRP,YAEHD,IACC,EAEViB,EAAUX,YAAc,kBAExB,MAAMa,EAAWpB,QAAAC,SACbA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHK,0BAIkC,OAC/CI,EAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAKW,EAAuBZ,IAAgBP,YACzDD,IACG,EAEZmB,EAAQb,YAAc,cAEf,MAAMe,EAAQjB,OAAOC,QACvBN,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAKC,EAAAH,EAApB,cAAwE,OACrEI,EAACc,EAAS,CAAAjB,SACNG,EAACgB,EAAOf,OAAAC,OAAA,CAAA,EAAKJ,EAAK,CAAAD,SAAGA,MACb,GAEhB,CACIiB,YACAI,MAAOF,EACPrB,OACAS,OACAI,MACAE,OACAS,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>> & 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>> & 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>> & 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>> & 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>> & 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>> & 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,59 +1,2 @@
-import e from"styled-components";import{V3_Colour as r,V3_Border as o,V3_Radius as d,V3_Spacing as t}from"../v3_theme/index.js";const i=r.border,l=r.text,a=e.div`
-    overflow: auto;
-    border: ${o["width-010"]} ${o.solid} ${i};
-    border-radius: ${d.md};
-
-    // Hide scrollbar
-    &::-webkit-scrollbar {
-        display: none;
-    }
-    * {
-        -ms-overflow-style: none; /* IE and Edge */
-        scrollbar-width: none; /* Firefox */
-    }
-`;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}
-        ${i};
-
-    &: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} ${i};
-`,b=e.td`
-    padding: ${t["spacing-20"]} ${t["spacing-16"]};
-    vertical-align: middle;
-    color: ${l};
-    border-bottom: ${o["width-010"]} ${o.solid}
-        ${i};
-
-    &: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_1af5ipv.css";const t="txzjt0s",s="t110f2kz",e="tdex3lc",a="htqww2s",b="b1gaqki2",l="b183mjh5";export{l as bodyCell,b as bodyRow,a 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\";\n\nimport { V3_Border, V3_Colour, V3_Radius, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = V3_Colour[\"border\"];\nconst fontColor = V3_Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const TableWrapper = styled.div`\n    overflow: auto;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor};\n    border-radius: ${V3_Radius[\"md\"]};\n\n    // Hide scrollbar\n    &::-webkit-scrollbar {\n        display: none;\n    }\n    * {\n        -ms-overflow-style: none; /* IE and Edge */\n        scrollbar-width: none; /* Firefox */\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: ${V3_Spacing[\"spacing-20\"]} ${V3_Spacing[\"spacing-16\"]};\n    text-align: left;\n    cursor: default;\n    vertical-align: middle;\n    color: ${fontColor};\n    background-color: ${V3_Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${V3_Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${V3_Spacing[\"spacing-24\"]};\n    }\n`;\n\nexport const BodyRow = styled.tr`\n    background-color: ${V3_Colour[\"bg\"]};\n    border-top: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor};\n`;\n\nexport const BodyCell = styled.td`\n    padding: ${V3_Spacing[\"spacing-20\"]} ${V3_Spacing[\"spacing-16\"]};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${V3_Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${V3_Spacing[\"spacing-24\"]};\n    }\n`;\n"],"names":["borderColor","V3_Colour","fontColor","TableWrapper","styled","div","V3_Border","V3_Radius","displayName","TableComponent","table","TableBody","tbody","HeaderCell","th","V3_Spacing","BodyRow","tr","BodyCell","td"],"mappings":"gIAOA,MAAMA,EAAcC,EAAkB,OAChCC,EAAYD,EAAgB,KAKrBE,EAAeC,EAAOC,GAAG;;cAExBC,EAAU,gBAAgBA,EAAiB,SAAKN;qBACzCO,EAAc;;;;;;;;;;EAYnCJ,EAAaK,YAAc,kBAEpB,MAAMC,EAAiBL,EAAOM,KAAK;;;;;EAO1CD,EAAeD,YAAc,cAEtB,MAAMG,EAAYP,EAAOQ,KAAK;;;;;;EAQxBC,EAAaT,EAAOU,EAAE;eACpBC,EAAW,iBAAiBA,EAAW;;;;aAIzCb;wBACWD,EAAU;;qBAEbK,EAAU,gBAAgBA,EAAiB;UACtDN;;;wBAGce,EAAW;;;yBAGVA,EAAW;;EAIvBC,EAAUZ,EAAOa,EAAE;wBACRhB,EAAc;kBACpBK,EAAU,gBAAgBA,EAAiB,SAAKN;EAGrDkB,EAAWd,EAAOe,EAAE;eAClBJ,EAAW,iBAAiBA,EAAW;;aAEzCb;qBACQI,EAAU,gBAAgBA,EAAiB;UACtDN;;;wBAGce,EAAW;;;yBAGVA,EAAW;;"}
+{"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    &::-webkit-scrollbar {\n        display: none;\n    }\n    * {\n        -ms-overflow-style: none; /* IE and Edge */\n        scrollbar-width: none; /* Firefox */\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,UAeZC,EAAc,WAOdC,EAAS,UAQTC,EAAU,UAkBVC,EAAO,WAKPC,EAAQ"}

package/table/table.styles_1af5ipv.css

@@ -0,0 +1,6 @@
+.txzjt0s{overflow:auto;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);}.txzjt0s::-webkit-scrollbar{display:none;}.txzjt0s *{-ms-overflow-style:none;scrollbar-width: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);}

package/tag/tag.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i}from"react/jsx-runtime";import r from"react";import{Wrapper as o,Label as n}from"./tag.style.js";const c=c=>{var{type:l,colorType:a="black",children:s,interactive:m=!1,icon:p,iconPosition:d="left"}=c,h=e(c,["type","colorType","children","interactive","icon","iconPosition"]);return t(o,Object.assign({as:m?"button":"div",$type:l,$color:a,$interactive:m},h,{children:["left"===d&&p&&r.cloneElement(p,{"aria-hidden":!0}),i(n,{role:"presentation",children:s}),"right"===d&&p&&r.cloneElement(p,{"aria-hidden":!0})]}))};export{c as Tag};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as i}from"react/jsx-runtime";import o from"clsx";import t from"react";import{wrapper as l,wrapperOutlineBlack as n,wrapperOutlinePrimary as c,wrapperOutlineBlue as a,wrapperOutlineRed as m,wrapperOutlineYellow as s,wrapperOutlineGreen as d,wrapperOutlineGrey as p,wrapperSolidBlack as y,wrapperSolidPrimary as b,wrapperSolidBlue as u,wrapperSolidRed as v,wrapperSolidYellow as f,wrapperSolidGreen as g,wrapperSolidGrey as h,wrapperInteractive as j,label as k}from"./tag.style.js";const x={solid:{grey:h,green:g,yellow:f,red:v,blue:u,primary:b,black:y},outline:{grey:p,green:d,yellow:s,red:m,blue:a,primary:c,black:n}},w=n=>{var c,{type:a,colorType:m="black",children:s,interactive:d=!1,icon:p,iconPosition:y="left"}=n,b=e(n,["type","colorType","children","interactive","icon","iconPosition"]);return r(d?"button":"div",Object.assign({className:o(l,null===(c=x[a])||void 0===c?void 0:c[m],d&&j)},b,{children:["left"===y&&p&&t.cloneElement(p,{"aria-hidden":!0}),i("div",{className:k,role:"presentation",children:s}),"right"===y&&p&&t.cloneElement(p,{"aria-hidden":!0})]}))};export{w as Tag};
 //# sourceMappingURL=tag.js.map

package/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sources":["../../src/tag/tag.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Label, Wrapper } from \"./tag.style\";\nimport type { TagProps } from \"./types\";\n\nexport const Tag = ({\n    type,\n    colorType = \"black\",\n    children,\n    interactive = false,\n    icon,\n    iconPosition = \"left\",\n    ...otherProps\n}: TagProps): JSX.Element => {\n    return (\n        <Wrapper\n            as={interactive ? \"button\" : \"div\"}\n            $type={type}\n            $color={colorType}\n            $interactive={interactive}\n            {...otherProps}\n        >\n            {iconPosition === \"left\" &&\n                icon &&\n                React.cloneElement(icon, { \"aria-hidden\": true })}\n            <Label role=\"presentation\">{children}</Label>\n            {iconPosition === \"right\" &&\n                icon &&\n                React.cloneElement(icon, { \"aria-hidden\": true })}\n        </Wrapper>\n    );\n};\n"],"names":["Tag","_a","type","colorType","children","interactive","icon","iconPosition","otherProps","__rest","_jsxs","Wrapper","Object","assign","as","$type","$color","$interactive","React","cloneElement","_jsx","Label","role"],"mappings":"0KAKO,MAAMA,EAAOC,QAAAC,KAChBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,YACRA,GAAc,EAAKC,KACnBA,EAAIC,aACJA,EAAe,UACZC,EAAUC,EAAAR,EAPG,CAAA,OAAA,YAAA,WAAA,cAAA,OAAA,iBAShB,OACIS,EAACC,EAAOC,OAAAC,OAAA,CACJC,GAAIT,EAAc,SAAW,MAAKU,MAC3Bb,EAAIc,OACHb,EAASc,aACHZ,GACVG,EAAU,CAAAJ,SAAA,CAEI,SAAjBG,GACGD,GACAY,EAAMC,aAAab,EAAM,CAAE,eAAe,IAC9Cc,EAACC,EAAK,CAACC,KAAK,eAAclB,SAAEA,IACV,UAAjBG,GACGD,GACAY,EAAMC,aAAab,EAAM,CAAE,eAAe,OACxC"}
+{"version":3,"file":"tag.js","sources":["../../src/tag/tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./tag.style\";\nimport type { TagColorType, TagProps, TagType } from \"./types\";\n\nconst colorClassMap: Record<TagType, Record<TagColorType, string>> = {\n    solid: {\n        grey: styles.wrapperSolidGrey,\n        green: styles.wrapperSolidGreen,\n        yellow: styles.wrapperSolidYellow,\n        red: styles.wrapperSolidRed,\n        blue: styles.wrapperSolidBlue,\n        primary: styles.wrapperSolidPrimary,\n        black: styles.wrapperSolidBlack,\n    },\n    outline: {\n        grey: styles.wrapperOutlineGrey,\n        green: styles.wrapperOutlineGreen,\n        yellow: styles.wrapperOutlineYellow,\n        red: styles.wrapperOutlineRed,\n        blue: styles.wrapperOutlineBlue,\n        primary: styles.wrapperOutlinePrimary,\n        black: styles.wrapperOutlineBlack,\n    },\n};\n\nexport const Tag = ({\n    type,\n    colorType = \"black\",\n    children,\n    interactive = false,\n    icon,\n    iconPosition = \"left\",\n    ...otherProps\n}: TagProps): JSX.Element => {\n    const Element = interactive ? \"button\" : \"div\";\n\n    return (\n        <Element\n            className={clsx(\n                styles.wrapper,\n                colorClassMap[type]?.[colorType],\n                interactive && styles.wrapperInteractive\n            )}\n            {...otherProps}\n        >\n            {iconPosition === \"left\" &&\n                icon &&\n                React.cloneElement(icon, { \"aria-hidden\": true })}\n            <div className={styles.label} role=\"presentation\">\n                {children}\n            </div>\n            {iconPosition === \"right\" &&\n                icon &&\n                React.cloneElement(icon, { \"aria-hidden\": true })}\n        </Element>\n    );\n};\n"],"names":["colorClassMap","solid","grey","styles.wrapperSolidGrey","green","styles.wrapperSolidGreen","yellow","styles.wrapperSolidYellow","red","styles.wrapperSolidRed","blue","styles.wrapperSolidBlue","primary","styles.wrapperSolidPrimary","black","styles.wrapperSolidBlack","outline","styles.wrapperOutlineGrey","styles.wrapperOutlineGreen","styles.wrapperOutlineYellow","styles.wrapperOutlineRed","styles.wrapperOutlineBlue","styles.wrapperOutlinePrimary","styles.wrapperOutlineBlack","Tag","_a","type","colorType","children","interactive","icon","iconPosition","otherProps","__rest","_jsxs","Object","assign","className","clsx","styles.wrapper","_b","styles.wrapperInteractive","React","cloneElement","_jsx","styles.label","role"],"mappings":"oiBAMA,MAAMA,EAA+D,CACjEC,MAAO,CACHC,KAAMC,EACNC,MAAOC,EACPC,OAAQC,EACRC,IAAKC,EACLC,KAAMC,EACNC,QAASC,EACTC,MAAOC,GAEXC,QAAS,CACLd,KAAMe,EACNb,MAAOc,EACPZ,OAAQa,EACRX,IAAKY,EACLV,KAAMW,EACNT,QAASU,EACTR,MAAOS,IAIFC,EAAOC,WAAAC,KAChBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,YACRA,GAAc,EAAKC,KACnBA,EAAIC,aACJA,EAAe,UACZC,EAAUC,EAAAR,EAPG,CAAA,OAAA,YAAA,WAAA,cAAA,OAAA,iBAWhB,OACIS,EAHYL,EAAc,SAAW,MAG7BM,OAAAC,OAAA,CACJC,UAAWC,EACPC,EACmB,QAAnBC,EAAAxC,EAAc0B,UAAK,IAAAc,OAAA,EAAAA,EAAGb,GACtBE,GAAeY,IAEfT,EAAU,CAAAJ,SAAA,CAEI,SAAjBG,GACGD,GACAY,EAAMC,aAAab,EAAM,CAAE,eAAe,IAC9Cc,EAAA,MAAA,CAAKP,UAAWQ,EAAcC,KAAK,eAAclB,SAC5CA,IAEa,UAAjBG,GACGD,GACAY,EAAMC,aAAab,EAAM,CAAE,eAAe,OACxC"}

package/tag/tag.style.d.ts

@@ -1,9 +1,17 @@
-import type { TagColorType, TagType } from "./types";
-interface StyleProps {
-    $type: TagType;
-    $color: TagColorType;
-    $interactive: boolean;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export {};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const wrapperInteractive: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidGrey: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidGreen: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidYellow: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidRed: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidBlue: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidPrimary: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidBlack: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineGrey: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineGreen: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineYellow: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineRed: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineBlue: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlinePrimary: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineBlack: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;

package/tag/tag.style.js

@@ -1,42 +1,2 @@
-import e,{css as r}from"styled-components";import{V3_Radius as o,V3_Font as t,V3_MediaQuery as s,V3_Colour as i,V3_Border as a}from"../v3_theme/index.js";const n=e.div`
-    border-radius: ${o.sm};
-    padding: 0.125rem 0.5rem;
-    width: fit-content;
-    max-width: 100%;
-    ${t["body-xs-semibold"]}
-    transition: all 200ms ease;
-    cursor: ${({$interactive:e})=>e?"pointer":"default"};
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-
-    svg {
-        flex-shrink: 0;
-    }
-
-    ${e=>{let o,t,s,n;if("solid"===e.$type)switch(s=i["text-inverse"],e.$color){case"grey":o=i["bg-inverse-subtler"],n=i["bg-inverse-hover"];break;case"green":o=i["bg-success-strong"],n=i["bg-success-strong-hover"];break;case"yellow":o=i["bg-warning-strong"],n=i["bg-warning-strong-hover"];break;case"red":o=i["bg-error-strong"],n=i["bg-error-strong-hover"];break;case"blue":o=i["bg-info-strong"],n=i["bg-info-strong-hover"];break;case"primary":o=i["bg-primary"],n=i["bg-primary-hover"];break;default:o=i["bg-inverse"],n=i["bg-inverse-hover"]}else switch(e.$color){case"grey":o=i["bg-strong"],t=i["border-strong"],s=i["text-subtle"],n=i["bg-hover-neutral-strong"];break;case"green":o=i["bg-success"],t=i["border-success"],s=i["text-success"],n=i["bg-success-hover"];break;case"yellow":o=i["bg-warning"],t=i["border-warning"],s=i["text-warning"],n=i["bg-warning-hover"];break;case"red":o=i["bg-error"],t=i["border-error"],s=i["text-error"],n=i["bg-error-hover"];break;case"blue":o=i["bg-info"],t=i["border-info"],s=i["text-info"],n=i["bg-info-hover"];break;case"primary":o=i["bg-primary-subtlest"],t=i["border-primary"],s=i["text-primary"],n=i["bg-primary-hover"];break;default:o=i.bg,t=i.border,s=i.text,n=i["bg-hover-neutral"]}return r`
-            background: ${o};
-            border: ${a["width-010"]} ${a.solid} ${t};
-            color: ${s};
-            @media (hover: hover) {
-                &:hover {
-                    ${e.$interactive&&n&&`background: ${n(e)};`}
-                    ${e.$interactive&&undefined}
-                }
-            }
-        `}}
-
-    ${s.MaxWidth.lg} {
-        ${({$interactive:e})=>{if(e)return r`
-                    ${t["body-md-semibold"]}
-                    padding: calc(0.5rem - 1px) 1rem;
-                `}}
-    }
-`,b=e.div`
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    text-align: left;
-`;export{b as Label,n as Wrapper};
+import"./tag.style_10tn8i.css";const w="w6gjrz2",t="w3k7rkk",k="w1bpyu8a",a="wq3qkg6",g="w12fv5tt",o="w1358sxl",s="w1oi4bgz",i="wpja2at",p="wgwk3g6",r="wb0avxu",b="wn4wzi4",c="wyfwkab",j="wocomht",y="w17cj89j",_="wutpo14",l="w1t1mrk9",m="l1sykhdi";export{m as label,w as wrapper,t as wrapperInteractive,l as wrapperOutlineBlack,y as wrapperOutlineBlue,b as wrapperOutlineGreen,r as wrapperOutlineGrey,_ as wrapperOutlinePrimary,j as wrapperOutlineRed,c as wrapperOutlineYellow,p as wrapperSolidBlack,s as wrapperSolidBlue,a as wrapperSolidGreen,k as wrapperSolidGrey,i as wrapperSolidPrimary,o as wrapperSolidRed,g as wrapperSolidYellow};
 //# sourceMappingURL=tag.style.js.map