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

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

@@ -1 +1 @@
-{"version":3,"file":"smart-app-banner.js","sources":["../../../src/smart-app-banner/smart-app-banner.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n    BannerIcon,\n    ButtonContainer,\n    Cross,\n    Description,\n    DismissButton,\n    DismissContainer,\n    ProceedContainer,\n    RatingContainer,\n    SmartAppBannerContainer,\n    Star,\n    StarEmpty,\n    StarHalf,\n    StyledButton,\n    TextContainer,\n    Title,\n} from \"./smart-app-banner.styles\";\nimport type { SmartAppBannerProps } from \"./types\";\n\nconst APP_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png\";\n\nconst ID = \"smart-app-banner\";\n\nfunction SmartAppBannerComponent(\n    props: SmartAppBannerProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        className,\n        show,\n        href,\n        content,\n        offset = 0,\n        icon = APP_ICON,\n        animated = false,\n        onDismiss,\n        onClick,\n    } = props;\n\n    const { title, message, buttonLabel, buttonAriaLabel, numberOfStars } =\n        content;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (\n        e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>\n    ) => {\n        e.stopPropagation();\n        window.open(href, \"_blank\", \"noreferrer\");\n        onClick?.();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const generateStarRating = () => {\n        if (isNaN(numberOfStars) || numberOfStars < 0) {\n            return;\n        }\n\n        const stars = [];\n        const hasHalfStar = numberOfStars - Math.floor(numberOfStars) >= 0.4;\n\n        for (let i = 0; i < Math.floor(numberOfStars); i++) {\n            stars.push(<Star key={`star${i}`} />);\n        }\n        if (hasHalfStar) {\n            stars.push(<StarHalf key={`halfstar`} />);\n        }\n        if (stars.length < 5) {\n            const remaining = 5 - stars.length;\n            for (let i = 0; i < remaining; i++) {\n                stars.push(<StarEmpty key={`emptystar${i}`} />);\n            }\n        }\n\n        /* maximum of 5 stars */\n        return <RatingContainer>{stars.slice(0, 5)}</RatingContainer>;\n    };\n\n    return (\n        <>\n            {show && (\n                <SmartAppBannerContainer\n                    ref={ref}\n                    $isAnimated={animated}\n                    $offset={offset}\n                    className={className}\n                >\n                    <DismissContainer\n                        onClick={onDismiss}\n                        id={`${ID}-dismiss`}\n                        data-testid={`${ID}-dismiss-container`}\n                    >\n                        <DismissButton aria-label=\"Dismiss\">\n                            <Cross />\n                        </DismissButton>\n                    </DismissContainer>\n                    <ProceedContainer\n                        onClick={handleClick}\n                        id={`${ID}-proceed`}\n                        data-testid={`${ID}-proceed-container`}\n                    >\n                        <BannerIcon src={icon} alt=\"lifesg-app-icon\" />\n                        <TextContainer>\n                            <Title>{title}</Title>\n                            <Description>{message}</Description>\n                            {generateStarRating()}\n                        </TextContainer>\n                        <ButtonContainer>\n                            <StyledButton\n                                type=\"button\"\n                                onClick={handleClick}\n                                aria-label={buttonAriaLabel}\n                            >\n                                {buttonLabel}\n                            </StyledButton>\n                        </ButtonContainer>\n                    </ProceedContainer>\n                </SmartAppBannerContainer>\n            )}\n        </>\n    );\n}\n\nexport const SmartAppBanner = React.forwardRef(SmartAppBannerComponent);\n"],"names":["APP_ICON","ID","SmartAppBanner","React","forwardRef","props","ref","className","show","href","content","offset","icon","animated","onDismiss","onClick","title","message","buttonLabel","buttonAriaLabel","numberOfStars","handleClick","e","stopPropagation","window","open","_jsx","_Fragment","children","_jsxs","SmartAppBannerContainer","$isAnimated","$offset","DismissContainer","id","DismissButton","Cross","ProceedContainer","BannerIcon","src","alt","TextContainer","Title","Description","isNaN","stars","hasHalfStar","Math","floor","i","push","Star","StarHalf","length","remaining","StarEmpty","RatingContainer","slice","generateStarRating","ButtonContainer","StyledButton","type"],"mappings":"qLAqBA,MAAMA,EACF,2EAEEC,EAAK,mBA6GJ,MAAMC,OAAiBC,QAAMC,YA3GpC,SACIC,EACAC,GAKA,MAAMC,UACFA,EAASC,KACTA,EAAIC,KACJA,EAAIC,QACJA,EAAOC,OACPA,EAAS,EAACC,KACVA,EAAOZ,EAAQa,SACfA,GAAW,EAAKC,UAChBA,EAASC,QACTA,GACAV,GAEEW,MAAEA,EAAKC,QAAEA,EAAOC,YAAEA,EAAWC,gBAAEA,EAAeC,cAAEA,GAClDV,EAKEW,EACFC,IAEAA,EAAEC,kBACFC,OAAOC,KAAKhB,EAAM,SAAU,cAC5BM,SAAAA,GAAW,EAgCf,OACIW,MAAAC,EAAAA,SAAA,CAAAC,SACKpB,GACGqB,EAAAA,KAACC,EAAAA,wBAAuB,CACpBxB,IAAKA,EAAGyB,YACKlB,EAAQmB,QACZrB,EACTJ,UAAWA,EAASqB,SAAA,CAEpBF,EAAAA,IAACO,EAAAA,iBAAgB,CACblB,QAASD,EACToB,GAAI,GAAGjC,YAAY,cACN,GAAGA,sBAAsB2B,SAEtCF,MAACS,EAAAA,cAAa,CAAA,aAAY,UAASP,SAC/BF,EAAAA,IAACU,QAAK,CAAA,OAGdP,EAAAA,KAACQ,EAAAA,iBAAgB,CACbtB,QAASM,EACTa,GAAI,GAAGjC,0BACM,GAAGA,sBAAsB2B,SAAA,CAEtCF,MAACY,EAAAA,WAAU,CAACC,IAAK3B,EAAM4B,IAAI,oBAC3BX,EAAAA,KAACY,EAAAA,cAAa,CAAAb,SAAA,CACVF,EAAAA,IAACgB,EAAAA,MAAK,CAAAd,SAAEZ,IACRU,EAAAA,IAACiB,EAAAA,YAAW,CAAAf,SAAEX,IAnDX,MACvB,GAAI2B,MAAMxB,IAAkBA,EAAgB,EACxC,OAGJ,MAAMyB,EAAQ,GACRC,EAAc1B,EAAgB2B,KAAKC,MAAM5B,IAAkB,GAEjE,IAAK,IAAI6B,EAAI,EAAGA,EAAIF,KAAKC,MAAM5B,GAAgB6B,IAC3CJ,EAAMK,KAAKxB,EAAAA,IAACyB,EAAAA,KAAI,CAAA,EAAM,OAAOF,MAKjC,GAHIH,GACAD,EAAMK,KAAKxB,MAAC0B,EAAAA,SAAQ,CAAA,EAAM,aAE1BP,EAAMQ,OAAS,EAAG,CAClB,MAAMC,EAAY,EAAIT,EAAMQ,OAC5B,IAAK,IAAIJ,EAAI,EAAGA,EAAIK,EAAWL,IAC3BJ,EAAMK,KAAKxB,EAAAA,IAAC6B,EAAAA,UAAS,CAAA,EAAM,YAAYN,KAE/C,CAGA,OAAOvB,EAAAA,IAAC8B,EAAAA,gBAAe,CAAA5B,SAAEiB,EAAMY,MAAM,EAAG,IAAqB,EA8BxCC,MAELhC,EAAAA,IAACiC,EAAAA,gBAAe,CAAA/B,SACZF,MAACkC,EAAAA,aAAY,CACTC,KAAK,SACL9C,QAASM,EAAW,aACRF,EAAeS,SAE1BV,aAQjC"}
+{"version":3,"file":"smart-app-banner.js","sources":["../../../src/smart-app-banner/smart-app-banner.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n    BannerIcon,\n    ButtonContainer,\n    Cross,\n    Description,\n    DismissButton,\n    DismissContainer,\n    ProceedContainer,\n    RatingContainer,\n    SmartAppBannerContainer,\n    Star,\n    StarEmpty,\n    StarHalf,\n    StyledButton,\n    TextContainer,\n    Title,\n} from \"./smart-app-banner.styles\";\nimport type { SmartAppBannerProps } from \"./types\";\n\nconst APP_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png\";\n\nconst ID = \"smart-app-banner\";\nconst MAX_STARS = 5;\n\nfunction SmartAppBannerComponent(\n    props: SmartAppBannerProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        className,\n        show,\n        href,\n        content,\n        offset = 0,\n        icon = APP_ICON,\n        animated = false,\n        onDismiss,\n        onClick,\n    } = props;\n\n    const {\n        title,\n        message,\n        buttonLabel,\n        iconAriaLabel,\n        buttonAriaLabel,\n        numberOfStars,\n    } = content;\n\n    const ariaLabels = {\n        dismiss: \"Close banner\",\n        icon: iconAriaLabel ?? \"\",\n        cta: buttonAriaLabel ?? buttonLabel,\n    };\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (\n        e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>\n    ) => {\n        e.stopPropagation();\n        window.open(href, \"_blank\", \"noreferrer\");\n        onClick?.();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const generateStarRating = () => {\n        if (isNaN(numberOfStars) || numberOfStars < 0) {\n            return;\n        }\n\n        const stars = [];\n        const hasHalfStar = numberOfStars - Math.floor(numberOfStars) >= 0.4;\n\n        for (let i = 0; i < Math.floor(numberOfStars); i++) {\n            stars.push(<Star key={`star${i}`} aria-hidden />);\n        }\n        if (hasHalfStar) {\n            stars.push(<StarHalf key={`halfstar`} aria-hidden />);\n        }\n        if (stars.length < MAX_STARS) {\n            const remaining = 5 - stars.length;\n            for (let i = 0; i < remaining; i++) {\n                stars.push(<StarEmpty key={`emptystar${i}`} aria-hidden />);\n            }\n        }\n\n        /* maximum of 5 stars */\n        return (\n            <RatingContainer\n                role=\"group\"\n                aria-label={`A rating of ${numberOfStars} out of ${MAX_STARS} stars`}\n            >\n                {stars.slice(0, MAX_STARS)}\n            </RatingContainer>\n        );\n    };\n\n    return (\n        <>\n            {show && (\n                <SmartAppBannerContainer\n                    ref={ref}\n                    $isAnimated={animated}\n                    $offset={offset}\n                    className={className}\n                >\n                    <ProceedContainer\n                        onClick={handleClick}\n                        id={`${ID}-proceed`}\n                        data-testid={`${ID}-proceed-container`}\n                    >\n                        <BannerIcon src={icon} alt={ariaLabels.icon} />\n                        <TextContainer>\n                            <Title>{title}</Title>\n                            <Description>{message}</Description>\n                            {generateStarRating()}\n                        </TextContainer>\n                        <ButtonContainer>\n                            <StyledButton\n                                type=\"button\"\n                                onClick={handleClick}\n                                aria-label={ariaLabels.cta}\n                            >\n                                {buttonLabel}\n                            </StyledButton>\n                        </ButtonContainer>\n                    </ProceedContainer>\n                    <DismissContainer\n                        onClick={onDismiss}\n                        id={`${ID}-dismiss`}\n                        data-testid={`${ID}-dismiss-container`}\n                    >\n                        <DismissButton aria-label={ariaLabels.dismiss}>\n                            <Cross />\n                        </DismissButton>\n                    </DismissContainer>\n                </SmartAppBannerContainer>\n            )}\n        </>\n    );\n}\n\nexport const SmartAppBanner = React.forwardRef(SmartAppBannerComponent);\n"],"names":["APP_ICON","ID","SmartAppBanner","React","forwardRef","props","ref","className","show","href","content","offset","icon","animated","onDismiss","onClick","title","message","buttonLabel","iconAriaLabel","buttonAriaLabel","numberOfStars","ariaLabels","dismiss","cta","handleClick","e","stopPropagation","window","open","_jsx","_Fragment","children","_jsxs","SmartAppBannerContainer","$isAnimated","$offset","ProceedContainer","id","BannerIcon","src","alt","TextContainer","Title","Description","isNaN","stars","hasHalfStar","Math","floor","i","push","Star","StarHalf","length","remaining","StarEmpty","RatingContainer","role","slice","generateStarRating","ButtonContainer","StyledButton","type","DismissContainer","DismissButton","Cross"],"mappings":"qLAqBA,MAAMA,EACF,2EAEEC,EAAK,mBAgIJ,MAAMC,OAAiBC,QAAMC,YA7HpC,SACIC,EACAC,GAKA,MAAMC,UACFA,EAASC,KACTA,EAAIC,KACJA,EAAIC,QACJA,EAAOC,OACPA,EAAS,EAACC,KACVA,EAAOZ,EAAQa,SACfA,GAAW,EAAKC,UAChBA,EAASC,QACTA,GACAV,GAEEW,MACFA,EAAKC,QACLA,EAAOC,YACPA,EAAWC,cACXA,EAAaC,gBACbA,EAAeC,cACfA,GACAX,EAEEY,EAAa,CACfC,QAAS,eACTX,KAAMO,QAAAA,EAAiB,GACvBK,IAAKJ,QAAAA,EAAmBF,GAKtBO,EACFC,IAEAA,EAAEC,kBACFC,OAAOC,KAAKpB,EAAM,SAAU,cAC5BM,SAAAA,GAAW,EAuCf,OACIe,MAAAC,EAAAA,SAAA,CAAAC,SACKxB,GACGyB,EAAAA,KAACC,EAAAA,wBAAuB,CACpB5B,IAAKA,EAAG6B,YACKtB,EAAQuB,QACZzB,EACTJ,UAAWA,EAASyB,SAAA,CAEpBC,EAAAA,KAACI,EAAAA,iBAAgB,CACbtB,QAASU,EACTa,GAAI,GAAGrC,YAAY,cACN,GAAGA,sBAAsB+B,SAAA,CAEtCF,MAACS,EAAAA,WAAU,CAACC,IAAK5B,EAAM6B,IAAKnB,EAAWV,OACvCqB,OAACS,EAAAA,cAAa,CAAAV,SAAA,CACVF,EAAAA,IAACa,QAAK,CAAAX,SAAEhB,IACRc,EAAAA,IAACc,EAAAA,YAAW,CAAAZ,SAAEf,IAjDX,MACvB,GAAI4B,MAAMxB,IAAkBA,EAAgB,EACxC,OAGJ,MAAMyB,EAAQ,GACRC,EAAc1B,EAAgB2B,KAAKC,MAAM5B,IAAkB,GAEjE,IAAK,IAAI6B,EAAI,EAAGA,EAAIF,KAAKC,MAAM5B,GAAgB6B,IAC3CJ,EAAMK,KAAKrB,MAACsB,EAAAA,KAAI,CAAA,eAAA,GAAM,OAAOF,MAKjC,GAHIH,GACAD,EAAMK,KAAKrB,EAAAA,IAACuB,WAAQ,CAAA,eAAA,GAAM,aAE1BP,EAAMQ,OAhEA,EAgEoB,CAC1B,MAAMC,EAAY,EAAIT,EAAMQ,OAC5B,IAAK,IAAIJ,EAAI,EAAGA,EAAIK,EAAWL,IAC3BJ,EAAMK,KAAKrB,MAAC0B,EAAAA,UAAS,CAAA,eAAA,GAAM,YAAYN,KAE/C,CAGA,OACIpB,EAAAA,IAAC2B,EAAAA,gBAAe,CACZC,KAAK,QAAO,aACA,eAAerC,mBAAyCW,SAEnEc,EAAMa,MAAM,EA7EX,IA8EY,EAsBDC,MAEL9B,EAAAA,IAAC+B,EAAAA,gBAAe,CAAA7B,SACZF,EAAAA,IAACgC,EAAAA,aAAY,CACTC,KAAK,SACLhD,QAASU,EAAW,aACRH,EAAWE,IAAGQ,SAEzBd,SAIbY,EAAAA,IAACkC,EAAAA,iBAAgB,CACbjD,QAASD,EACTwB,GAAI,GAAGrC,YAAY,cACN,GAAGA,sBAAsB+B,SAEtCF,EAAAA,IAACmC,EAAAA,cAAa,CAAA,aAAa3C,EAAWC,QAAOS,SACzCF,EAAAA,IAACoC,EAAAA,MAAK,CAAA,WAOlC"}

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

@@ -9,7 +9,7 @@
 	}
 `,m=c.default.div`
     display: flex;
-    flex-direction: row;
+    flex-direction: row-reverse;
     align-items: stretch;
     position: fixed;
     margin: 0.5rem 1.25rem;

package/cjs/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":"qcAkBA,MAAMA,EAAYC,EAAAA,SAAS;;;;;;;;;EAWdC,EAA0BC,EAAAA,QAAOC,GAG5C;;;;;;MAMKC,GACQ,QAAQA,EAAMC;;;;;kBAMXC,EAAAA,UAAUC;MACrBH,UACC,MAAmC,UAAjB,UAAXA,EAAMI,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACdC,KAAG;4BACWC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;wBAC/CN,EAAAA,UAAkB;gBAE5BK,KAAG;gCACeE,EAAAA,UAAU;eAC3B;qBAEMC,EAAAA,UAAc;MAC5BV,IACC,GAAIA,EAAMW,YACN,OAAOJ,KAAG;6BACOZ;aAChB;EAIAiB,EAAmBd,EAAAA,QAAOC,GAAG;;;;EAM7Bc,EAAgBf,EAAAA,QAAOgB,EAAAA,cAAc;;EAIrCC,EAAQjB,EAAAA,QAAOkB,EAAAA,UAAU;aACzBd,EAAAA,UAAUe;;;EAKVC,EAAmBpB,EAAAA,QAAOC,GAAG;;;;;;EAQ7BoB,EAAgBrB,EAAAA,QAAOC,GAAG;;;;;;MAMjCqB,EAAAA,cAAcC,SAASC;;;EAKhBC,EAAazB,EAAAA,QAAO0B,GAAG;;;;EAMvBC,EAAkB3B,EAAAA,QAAOC,GAAG;;EAI5B2B,EAAe5B,EAAAA,QAAO6B,SAAOC,MAAM;;;;;UAKtCC,EAAAA,QAAQ;;EAILC,EAAQhC,EAAAA,QAAOiC,aAAWC,OAAO;mBAC3BH,EAAAA,QAAQI,KAAK;;MAE1Bb,EAAAA,cAAcC,SAASC;UACnBO,EAAAA,QAAQ;;EAILK,EAAcpC,EAAAA,QAAOiC,aAAWI,OAAO;;EAIvCC,EAAkBtC,EAAAA,QAAOC,GAAG;;;;EAMnCsC,EAAgB9B,EAAAA,GAAG;;;;;EAOZ+B,EAAOxC,EAAAA,QAAOyC,EAAAA,aAAa;MAClCF;EAGOG,EAAW1C,EAAAA,QAAO2C,EAAAA,aAAa;MACtCJ;EAGOK,EAAY5C,EAAAA,QAAO6C,EAAAA,SAAS;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":"qcAkBA,MAAMA,EAAYC,EAAAA,SAAS;;;;;;;;;EAWdC,EAA0BC,EAAAA,QAAOC,GAG5C;;;;;;MAMKC,GACQ,QAAQA,EAAMC;;;;;kBAMXC,EAAAA,UAAUC;MACrBH,UACC,MAAmC,UAAjB,UAAXA,EAAMI,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACdC,KAAG;4BACWC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;wBAC/CN,EAAAA,UAAkB;gBAE5BK,KAAG;gCACeE,EAAAA,UAAU;eAC3B;qBAEMC,EAAAA,UAAc;MAC5BV,IACC,GAAIA,EAAMW,YACN,OAAOJ,KAAG;6BACOZ;aAChB;EAIAiB,EAAmBd,EAAAA,QAAOC,GAAG;;;;EAM7Bc,EAAgBf,EAAAA,QAAOgB,EAAAA,cAAc;;EAIrCC,EAAQjB,EAAAA,QAAOkB,EAAAA,UAAU;aACzBd,EAAAA,UAAUe;;;EAKVC,EAAmBpB,EAAAA,QAAOC,GAAG;;;;;;EAQ7BoB,EAAgBrB,EAAAA,QAAOC,GAAG;;;;;;MAMjCqB,EAAAA,cAAcC,SAASC;;;EAKhBC,EAAazB,EAAAA,QAAO0B,GAAG;;;;EAMvBC,EAAkB3B,EAAAA,QAAOC,GAAG;;EAI5B2B,EAAe5B,EAAAA,QAAO6B,SAAOC,MAAM;;;;;UAKtCC,EAAAA,QAAQ;;EAILC,EAAQhC,EAAAA,QAAOiC,aAAWC,OAAO;mBAC3BH,EAAAA,QAAQI,KAAK;;MAE1Bb,EAAAA,cAAcC,SAASC;UACnBO,EAAAA,QAAQ;;EAILK,EAAcpC,EAAAA,QAAOiC,aAAWI,OAAO;;EAIvCC,EAAkBtC,EAAAA,QAAOC,GAAG;;;;EAMnCsC,EAAgB9B,EAAAA,GAAG;;;;;EAOZ+B,EAAOxC,EAAAA,QAAOyC,EAAAA,aAAa;MAClCF;EAGOG,EAAW1C,EAAAA,QAAO2C,EAAAA,aAAa;MACtCJ;EAGOK,EAAY5C,EAAAA,QAAO6C,EAAAA,SAAS;MACnCN;"}

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

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

package/cjs/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":["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":"qUA2B4B,EACxBA,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,GAC/CC,EAAAA,WAAWC,EAAAA,YAETC,EAAQF,EAAAA,WAAWG,gBACnBC,EAAmBC,EAAAA,cAAc,UAAU,CAAEH,UAE7CI,EAAWC,EAAAA,uBAAAA,cAAc,CAC3BC,SAAUJ,IAGRK,EAAmBJ,EAAAA,cAAc,UAAU,CAAEH,UAE7CQ,EAAgBC,EAAAA,OAAsB,MACtCC,EAAgBD,EAAAA,OAAqC,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,MAACC,EAAAA,kBAAiB,CACdC,SAzCa,EAAGC,UAASC,cAEzBD,GACAC,GACAC,OAAOC,YAAcpB,GACrBC,EAAcoB,UAEdJ,EAAQK,WACJrB,EAAcoB,QAAQE,wBAAwBC,KACtD,EAgC0B,cACTxC,EACbG,UAAWA,WAEX2B,EAAAA,IAACW,EAAAA,OACGC,KAAK,UAASC,wBACWzC,EAAsB0C,SAE9CtC,EAASuC,KAAI,EAAGpB,QAAOqB,QAAOC,cAAc1B,KACzC,MAAM2B,EAAW3C,IAAuBgB,EAExC,OACIS,EAAAA,IAACmB,EAAAA,WAEGP,KAAK,OAAMQ,QACFF,EACTG,IAAKH,EAAW/B,EAAgB,KAAImC,OAC5BN,WAERO,OAACC,EAAAA,WACGZ,KAAK,OACLa,QAASnC,EAAqBC,GAAM,cACvB,GAAGrB,UAAeqB,IAAOmC,UACF,UAAzBT,aAAU,EAAVA,EAAYU,UAAmBb,SAAA,CAE1CS,EAAAA,KAACK,EAAAA,eAAc,CAAChB,KAAK,iBACjBZ,EAAAA,IAAC6B,EAAAA,eACYX,EACTO,QAASnC,EAAqBC,GAAM,cACxB,gBAEZS,EAAAA,IAAC8B,EAAAA,WAAWC,OAAM,CAACC,OAAO,mBACrBpC,EAAaD,OAGtBK,EAAAA,IAACiC,EAAAA,UAAS,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,EAAAA,IAAC8B,EAAAA,WAAWC,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":["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":"83BAkB4B,EACxBA,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,GAC/CC,EAAAA,WAAWC,EAAAA,YAETC,EAAmBC,EAAAA,eAAeC,EAAAA,WAAW,WAC7CC,EAAWC,EAAAA,0BAA0BJ,GAErCK,EAAgBC,EAAAA,OAA6B,MAC7CC,EAAWD,EAAAA,OAAgC,MAC3CE,EAAgBF,EAAAA,OAAqC,IACrDG,EAAgBH,EAAAA,OAAiC,IAEvDI,EAAAA,WAAU,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,EAAAA,OAAcC,UAAUL,MAAOA,GAEzDF,EAAQI,MAAMI,eAAeF,EAAAA,OAAcC,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,EAAAA,IAACC,EAAAA,YAAW,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,EAAAA,kBAAwBC,SAEnCT,EAAAA,IAAA,KAAA,CACIU,KAAK,UACLC,IAAK/B,EACL2B,UAAWK,EAAAA,QACPC,EAAAA,MACA/C,GAA0BgD,EAAAA,yBAC7BL,SAEAvC,EAAS6C,KAAI,EAAGhB,QAAOX,QAAO4B,cAAc7B,WACzC,MAAM8B,EAAWhD,IAAuBkB,EAQxC,OACIa,EAAAA,IAAA,KAAA,CAIIU,KAAK,OACLH,UAAWK,EAAAA,QACPM,EAAAA,UACAD,GAAYE,EAAAA,iBAEhBR,IAjBcS,IAClBtC,EAAcE,QAAQG,GAASiC,EAC3BH,IACAvC,EAAcM,QAAUoC,EAC5B,EAaqBX,SAEjBY,EAAAA,KAAA,MAAA,CACIX,KAAK,OACLY,QAAS3B,EAAqBR,GAAM,cACvB,GAAGvB,UAAeuB,IAC/BoB,UAAWK,EAAAA,QACPW,EAAAA,QACAC,YACyB,UAAzBR,aAAU,EAAVA,EAAYS,WACRC,EAAAA,mBACPjB,SAAA,CAEDY,EAAAA,KAAA,MAAA,CACId,UAAWoB,EAAAA,eACXjB,KAAK,OAAMD,SAAA,CAEXT,EAAAA,IAAA,MAAA,CACIO,UAAWK,UACPgB,EAAAA,MACAC,EAAAA,gBACAZ,GACIa,yBAERR,QAAS3B,EAAqBR,GAAM,cACxB,OAAMsB,SAEjBV,IAELC,EAAAA,IAAA,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,EAAAA,QACPgB,QACAY,EAAAA,cACAvB,GACIwB,gCAGP1C,OAGRiB,eAAAA,EAAYb,YA1DZ,GAAGJ,KAASX,QAAAA,EAAS,MACF,UAApB4B,aAAU,EAAVA,EAAYS,gBAAQ,IAAApC,EAAAA,EAAI,SA2D3B,OAIP"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./tab-link-chain.styles_1nreqrp.css");exports.chain="c16oikpn",exports.chainFullWidthIndicator="c2536gp",exports.chainItem="c1c3wbud",exports.chainItemActive="cdfiwt",exports.chainLink="c1gdrjx",exports.chainLinkReversed="cj41vce",exports.customFadeWrapper="c1r7bbxk",exports.deselectedLabel="d97pn0z",exports.deselectedLabelActive="d1v8j9lw",exports.flexRow="fxd8c9t",exports.label="l1yi6azs",exports.labelContainer="lmiq2g0",exports.selectedLabel="s5l4m4t",exports.selectedLabelActive="shqgesl",exports.tokens={chainItem:{width:"--fds-internal-tab-chainItem-width"}};
+//# sourceMappingURL=tab-link-chain.styles.js.map

package/cjs/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":["chainItem","width"],"mappings":"6FAiBkB,2CAMkB,4BAUd,mCAcM,2BAUN,oCAiBQ,oCAiDA,mCA7BF,wCAOM,2BAlDd,wBA+BF,kCAJS,gCA2BD,sCAcM,yBA5GV,CAClBA,UAAW,CACPC,MAAO"}

package/cjs/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/cjs/tab/tab.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),r=require("./tab.style.js"),a=require("./tab-context.js"),n=require("./tab-item.js"),l=require("./tab-link-chain.js");const o=n=>{var{children:o,currentActive:s,initialActive:d=0,onTabClick:c,"data-testid":u,fullWidthIndicatorLine:b,fadeColor:p}=n,h=e.__rest(n,["children","currentActive","initialActive","onTabClick","data-testid","fullWidthIndicatorLine","fadeColor"]);const[f,j]=i.useState(s||d),m=i.useMemo((()=>i.Children.toArray(o).filter(Boolean).map((e=>({title:e.props.title,width:e.props.width,titleAddon:e.props.titleAddon})))),[o]);i.useEffect((()=>{"number"==typeof s&&j(s)}),[s]);return t.jsx(r.Wrapper,Object.assign({"data-testid":u},h,{children:t.jsxs(a.TabContext.Provider,{value:{tabLinks:m,currentActiveIndex:f,setCurrentActiveIndex:j},children:[t.jsx(l.TabLinkChain,{controlledMode:"number"==typeof s,onTabClick:c,"data-testid":`${u}-tabs`,fullWidthIndicatorLine:b,fadeColor:p}),i.Children.toArray(o).filter(Boolean).map(((e,t)=>i.cloneElement(e,{key:t,index:t})))]})}))};o.displayName="Tab";const s=Object.assign(o,{Item:n.TabItem});exports.Tab=s;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("clsx"),r=require("react"),a=require("./tab.styles.js"),n=require("./tab-context.js"),l=require("./tab-item.js"),s=require("./tab-link-chain.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=o(i);const c=i=>{var{children:l,currentActive:o,initialActive:c=0,onTabClick:u,"data-testid":b,className:f,fullWidthIndicatorLine:p,fadeColor:m}=i,v=e.__rest(i,["children","currentActive","initialActive","onTabClick","data-testid","className","fullWidthIndicatorLine","fadeColor"]);const[h,j]=r.useState(o||c),x=r.useMemo((()=>r.Children.toArray(l).filter(Boolean).map((e=>({title:e.props.title,width:e.props.width,titleAddon:e.props.titleAddon})))),[l]),C=r.useMemo((()=>({tabLinks:x,currentActiveIndex:h,setCurrentActiveIndex:j})),[h,x]);r.useEffect((()=>{"number"==typeof o&&j(o)}),[o]);return t.jsx("div",Object.assign({"data-testid":b,className:d.default(a.wrapper,f)},v,{children:t.jsxs(n.TabContext.Provider,{value:C,children:[t.jsx(s.TabLinkChain,{controlledMode:"number"==typeof o,onTabClick:u,"data-testid":`${b}-tabs`,fullWidthIndicatorLine:p,fadeColor:m}),r.Children.toArray(l).filter(Boolean).map(((e,t)=>{var i;const a=e;return r.cloneElement(e,{key:null!==(i=a.key)&&void 0!==i?i:a.props.title,index:t})}))]})}))};c.displayName="Tab";const u=Object.assign(c,{Item:l.TabItem});exports.Tab=u;
 //# sourceMappingURL=tab.js.map

package/cjs/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":"4NAaA,MAAMA,EAAWC,QAAAC,SACbA,EACAC,cAAeC,EAAkBC,cACjCA,EAAgB,EAACC,WACjBA,EACA,cAAeC,EAAMC,uBACrBA,EAAsBC,UACtBA,KACGC,EAAUC,EAAAA,OAAAV,EARA,CAAA,WAAA,gBAAA,gBAAA,aAAA,cAAA,yBAAA,cAab,MAAOE,EAAeS,GAAoBC,EAAAA,SACtCT,GAAsBC,GAGpBS,EAAWC,EAAAA,SAAQ,IACCC,EAAAA,SAASC,QAAQf,GAAUgB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAACvB,IAKJwB,EAAAA,WAAU,KAC4B,iBAAvBtB,GACPQ,EAAiBR,EACrB,GACD,CAACA,IAiBJ,OACIuB,EAAAA,IAACC,EAAAA,QAAOC,OAAAC,OAAA,CAAA,cAAcvB,GAAYG,EAAU,CAAAR,SACxC6B,EAAAA,KAACC,EAAAA,WAAWC,SAAQ,CAChBC,MAAO,CACHpB,WACAV,mBAAoBD,EACpBgC,sBAAuBvB,GAC1BV,SAAA,CAEDyB,MAACS,EAAAA,aAAY,CACTC,eAA8C,iBAAvBjC,EACvBE,WAAYA,gBACC,GAAGC,SAChBC,uBAAwBA,EACxBC,UAAWA,IAzBDO,EAAAA,SAASC,QAAQf,GAAUgB,OAAOC,SAEnCC,KAAI,CAACC,EAAOiB,IAEtBC,EAAAA,aAAalB,EAA4B,CAC5CmB,IAAKF,EACLA,iBAuBE,EAIlBtC,EAAQyC,YAAc,YAKTC,EAAMb,OAAOC,OAAO9B,EAAS,CACtC2C,KAAMC,EAAAA"}
+{"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":"kUAcA,MAAMA,EAAWC,QAAAC,SACbA,EACAC,cAAeC,EAAkBC,cACjCA,EAAgB,EAACC,WACjBA,EACA,cAAeC,EAAMC,UACrBA,EAASC,uBACTA,EAAsBC,UACtBA,GAAST,EACNU,EAAUC,EAAAA,OAAAX,EATA,CAAA,WAAA,gBAAA,gBAAA,aAAA,cAAA,YAAA,yBAAA,cAcb,MAAOE,EAAeU,GAAoBC,EAAAA,SACtCV,GAAsBC,GAGpBU,EAAWC,EAAAA,SAAQ,IACCC,EAAAA,SAASC,QAAQhB,GAAUiB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAACxB,IAEEyB,EAAkBX,EAAAA,SACpB,KAAA,CACID,WACAX,mBAAoBD,EACpByB,sBAAuBf,KAE3B,CAACV,EAAeY,IAMpBc,EAAAA,WAAU,KAC4B,iBAAvBzB,GACPS,EAAiBT,EACrB,GACD,CAACA,IAmBJ,OACI0B,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,cACiBzB,EACbC,UAAWyB,EAAAA,QAAKC,EAAAA,QAAgB1B,IAC5BG,EAAU,CAAAT,SAEdiC,EAAAA,KAACC,EAAAA,WAAWC,SAAQ,CAACC,MAAOX,EAAezB,SAAA,CACvC4B,EAAAA,IAACS,EAAAA,aAAY,CACTC,eAA8C,iBAAvBpC,EACvBE,WAAYA,EAAU,cACT,GAAGC,SAChBE,uBAAwBA,EACxBC,UAAWA,IAzBDO,EAAAA,SAASC,QAAQhB,GAAUiB,OAAOC,SAEnCC,KAAI,CAACC,EAAOmB,WAC7B,MAAMC,EAAUpB,EAGhB,OAAOqB,EAAAA,aAAarB,EAA4B,CAC5CsB,YAAK3C,EAAAyC,EAAQE,mBAAOF,EAAQlB,MAAMD,MAClCkB,SACF,SAoBA,EAIdzC,EAAQ6C,YAAc,YAKTC,EAAMf,OAAOC,OAAOhC,EAAS,CACtC+C,KAAMC,EAAAA"}

package/cjs/tab/tab.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./tab.styles_1najffw.css");exports.wrapper="wchm9bj";
+//# sourceMappingURL=tab.styles.js.map

package/cjs/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":[],"mappings":"oFAEoB"}

package/cjs/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/cjs/table/table.js

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

package/cjs/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":"kHASA,MAAMA,EAAQC,IAAA,IAAAC,SACVA,GAAQD,EACLE,EAAKC,EAAAA,OAAAH,EAFE,cAGuC,OACjDI,EAAAA,IAAA,QAAAC,OAAAC,OAAA,GAAWJ,YAAQD,IAAiB,EAExCF,EAAKQ,YAAc,aAEnB,MAAMC,EAAQR,IAAA,IAAAC,SACVA,GAAQD,EACLE,EAAKC,EAAAA,OAAAH,EAFE,cAGuC,OACjDI,EAAAA,IAACK,YAASJ,OAAAC,OAAA,GAAKJ,EAAK,CAAAD,SAAGA,IAAqB,EAEhDO,EAAKD,YAAc,aAEnB,MAAMG,EAAOV,IAAA,IAAAC,SACTA,GAAQD,EACLE,EAAKC,EAAAA,OAAAH,EAFC,cAGoC,OAC7CI,EAAAA,IAACO,UAAON,OAAAC,OAAA,GAAKJ,EAAK,CAAAD,SAAGA,IAAmB,EAE5CS,EAAIH,YAAc,YAElB,MAAMK,EAAQZ,IAAA,IAAAC,SACVA,GAAQD,EACLE,EAAKC,EAAAA,OAAAH,EAFE,cAGsC,OAChDI,EAAAA,IAACS,WAAQR,OAAAC,OAAA,GAAKJ,EAAK,CAAAD,SAAGA,IAAoB,EAE9CW,EAAKL,YAAc,aAEnB,MAAMO,EAAUd,IAAA,IAAAC,SACZA,GAAQD,EACLE,EAAKC,EAAAA,OAAAH,EAFI,cAGoC,OAChDI,EAAAA,IAACW,aAAUV,OAAAC,OAAA,GAAKJ,EAAK,CAAAD,SAAGA,IAAsB,EAElDa,EAAOP,YAAc,mBAEd,MAAMS,EAAQX,OAAOC,QACvBN,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAKC,EAAAA,OAAAH,EAApB,cAAwE,OACrEI,EAAAA,IAACa,EAAAA,aAAY,CAAAhB,SACTG,EAAAA,IAACc,EAAAA,eAAcb,OAAAC,OAAA,CAAA,EAAKJ,EAAK,CAAAD,SAAGA,MACjB,GAEnB,CACIkB,UAAWF,EAAAA,aACXD,MAAOE,EAAAA,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":"uNAIA,MAAMA,EAAQC,IAAA,IAAAC,SACVA,GAAQD,EACLE,EAAKC,EAAAA,OAAAH,EAFE,cAGuC,OACjDI,EAAAA,IAAA,QAAAC,OAAAC,OAAA,GAAWJ,YAAQD,IAAiB,EAExCF,EAAKQ,YAAc,aAEnB,MAAMC,EAAQR,QAAAC,SACVA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAA,OAAAH,EAHE,0BAIuC,OACjDI,EAAAA,IAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAAA,QAAKC,EAAAA,UAAkBF,IAAgBP,YACpDD,IACG,EAEZO,EAAKD,YAAc,aAEnB,MAAMK,EAAOZ,QAAAC,SACTA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAA,OAAAH,EAHC,0BAIoC,OAC7CI,EAAAA,IAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAAA,QAAKG,EAAAA,QAAgBJ,IAAgBP,YAC/CD,IACA,EAETW,EAAIL,YAAc,YAElB,MAAMO,EAAQd,QAAAC,SACVA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAA,OAAAH,EAHE,0BAIsC,OAChDI,EAAAA,IAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAAA,QAAKK,EAAAA,SAAiBN,IAAgBP,YAChDD,IACA,EAETa,EAAKP,YAAc,aAEnB,MAAMS,EAAUhB,QAAAC,SACZA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAA,OAAAH,EAHI,0BAIoC,OAChDI,EAAAA,IAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAAA,QAAKO,EAAAA,WAAmBR,IAAgBP,YAClDD,IACA,EAETe,EAAOT,YAAc,mBAErB,MAAMW,EAAalB,QAAAC,SACfA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAA,OAAAH,EAHO,0BAIyB,OACxCI,EAAAA,yBACIK,UAAWC,EAAAA,QAAKS,EAAAA,aAAqBV,GAAU,cACnC,iBACRP,YAEHD,IACC,EAEViB,EAAUX,YAAc,kBAExB,MAAMa,EAAWpB,QAAAC,SACbA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAA,OAAAH,EAHK,0BAIkC,OAC/CI,EAAAA,IAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAAA,QAAKW,EAAAA,eAAuBZ,IAAgBP,YACzDD,IACG,EAEZmB,EAAQb,YAAc,cAEf,MAAMe,EAAQjB,OAAOC,QACvBN,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAKC,EAAAA,OAAAH,EAApB,cAAwE,OACrEI,EAAAA,IAACc,EAAS,CAAAjB,SACNG,EAAAA,IAACgB,EAAOf,OAAAC,OAAA,CAAA,EAAKJ,EAAK,CAAAD,SAAGA,MACb,GAEhB,CACIiB,YACAI,MAAOF,EACPrB,OACAS,OACAI,MACAE,OACAS,WAAYP"}

package/cjs/table/table.styles.js

@@ -1,59 +1,2 @@
-"use strict";var e=require("styled-components"),r=require("../v3_theme/index.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=o(e);const t=r.V3_Colour.border,a=r.V3_Colour.text,i=d.default.div`
-    overflow: auto;
-    border: ${r.V3_Border["width-010"]} ${r.V3_Border.solid} ${t};
-    border-radius: ${r.V3_Radius.md};
-
-    // Hide scrollbar
-    &::-webkit-scrollbar {
-        display: none;
-    }
-    * {
-        -ms-overflow-style: none; /* IE and Edge */
-        scrollbar-width: none; /* Firefox */
-    }
-`;i.displayName="Table.Container";const l=d.default.table`
-    text-align: left;
-    border-collapse: separate;
-    border-spacing: 0;
-    width: 100%;
-`;l.displayName="Table.Table";const n=d.default.tbody`
-    :where(tr:last-child) {
-        td {
-            border-bottom: none;
-        }
-    }
-`,s=d.default.th`
-    padding: ${r.V3_Spacing["spacing-20"]} ${r.V3_Spacing["spacing-16"]};
-    text-align: left;
-    cursor: default;
-    vertical-align: middle;
-    color: ${a};
-    background-color: ${r.V3_Colour["bg-stronger"]};
-    height: 6rem;
-    border-bottom: ${r.V3_Border["width-010"]} ${r.V3_Border.solid}
-        ${t};
-
-    &:where(&:first-child) {
-        padding-left: ${r.V3_Spacing["spacing-24"]};
-    }
-    &:where(&:last-child) {
-        padding-right: ${r.V3_Spacing["spacing-24"]};
-    }
-`,c=d.default.tr`
-    background-color: ${r.V3_Colour.bg};
-    border-top: ${r.V3_Border["width-010"]} ${r.V3_Border.solid} ${t};
-`,p=d.default.td`
-    padding: ${r.V3_Spacing["spacing-20"]} ${r.V3_Spacing["spacing-16"]};
-    vertical-align: middle;
-    color: ${a};
-    border-bottom: ${r.V3_Border["width-010"]} ${r.V3_Border.solid}
-        ${t};
-
-    &:where(&:first-child) {
-        padding-left: ${r.V3_Spacing["spacing-24"]};
-    }
-    &:where(&:last-child) {
-        padding-right: ${r.V3_Spacing["spacing-24"]};
-    }
-`;exports.BodyCell=p,exports.BodyRow=c,exports.HeaderCell=s,exports.TableBody=n,exports.TableComponent=l,exports.TableWrapper=i;
+"use strict";require("./table.styles_1af5ipv.css");exports.bodyCell="b183mjh5",exports.bodyRow="b1gaqki2",exports.headerCell="htqww2s",exports.tableBody="tdex3lc",exports.tableComponent="t110f2kz",exports.tableWrapper="txzjt0s";
 //# sourceMappingURL=table.styles.js.map

package/cjs/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":"qKAOA,MAAMA,EAAcC,EAAAA,UAAkB,OAChCC,EAAYD,EAAAA,UAAgB,KAKrBE,EAAeC,EAAAA,QAAOC,GAAG;;cAExBC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB,SAAKN;qBACzCO,EAAAA,UAAc;;;;;;;;;;EAYnCJ,EAAaK,YAAc,kBAEpB,MAAMC,EAAiBL,EAAAA,QAAOM,KAAK;;;;;EAO1CD,EAAeD,YAAc,cAEtB,MAAMG,EAAYP,EAAAA,QAAOQ,KAAK;;;;;;EAQxBC,EAAaT,EAAAA,QAAOU,EAAE;eACpBC,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;;;;aAIzCb;wBACWD,EAAAA,UAAU;;qBAEbK,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UACtDN;;;wBAGce,EAAAA,WAAW;;;yBAGVA,EAAAA,WAAW;;EAIvBC,EAAUZ,EAAAA,QAAOa,EAAE;wBACRhB,EAAAA,UAAc;kBACpBK,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB,SAAKN;EAGrDkB,EAAWd,EAAAA,QAAOe,EAAE;eAClBJ,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;;aAEzCb;qBACQI,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UACtDN;;;wBAGce,EAAAA,WAAW;;;yBAGVA,EAAAA,WAAW;;"}
+{"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":[],"mappings":"yFAkEqB,2BALD,8BAlBG,4BARD,iCAPK,gCAfF"}

package/cjs/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/cjs/tag/tag.js

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

package/cjs/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":["_a","type","colorType","children","interactive","icon","iconPosition","otherProps","__rest","_jsxs","Wrapper","Object","assign","as","$type","$color","$interactive","React","cloneElement","_jsx","Label","role"],"mappings":"iOAKoBA,QAAAC,KAChBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,YACRA,GAAc,EAAKC,KACnBA,EAAIC,aACJA,EAAe,UACZC,EAAUC,EAAAA,OAAAR,EAPG,CAAA,OAAA,YAAA,WAAA,cAAA,OAAA,iBAShB,OACIS,EAAAA,KAACC,EAAAA,QAAOC,OAAAC,OAAA,CACJC,GAAIT,EAAc,SAAW,MAAKU,MAC3Bb,EAAIc,OACHb,EAASc,aACHZ,GACVG,EAAU,CAAAJ,SAAA,CAEI,SAAjBG,GACGD,GACAY,EAAAA,QAAMC,aAAab,EAAM,CAAE,eAAe,IAC9Cc,EAAAA,IAACC,EAAAA,MAAK,CAACC,KAAK,eAAclB,SAAEA,IACV,UAAjBG,GACGD,GACAY,EAAAA,QAAMC,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","_a","type","colorType","children","interactive","icon","iconPosition","otherProps","__rest","Element","_jsxs","Object","assign","className","clsx","styles.wrapper","_b","styles.wrapperInteractive","React","cloneElement","_jsx","styles.label","role"],"mappings":"8OAMA,MAAMA,EAA+D,CACjEC,MAAO,CACHC,KAAMC,EAAAA,iBACNC,MAAOC,EAAAA,kBACPC,OAAQC,EAAAA,mBACRC,IAAKC,EAAAA,gBACLC,KAAMC,EAAAA,iBACNC,QAASC,EAAAA,oBACTC,MAAOC,EAAAA,mBAEXC,QAAS,CACLd,KAAMe,EAAAA,mBACNb,MAAOc,EAAAA,oBACPZ,OAAQa,EAAAA,qBACRX,IAAKY,EAAAA,kBACLV,KAAMW,EAAAA,mBACNT,QAASU,EAAAA,sBACTR,MAAOS,EAAAA,kCAIKC,WAAAC,KAChBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,YACRA,GAAc,EAAKC,KACnBA,EAAIC,aACJA,EAAe,UACZC,EAAUC,EAAAA,OAAAR,EAPG,CAAA,OAAA,YAAA,WAAA,cAAA,OAAA,iBAShB,MAAMS,EAAUL,EAAc,SAAW,MAEzC,OACIM,OAACD,EAAOE,OAAAC,OAAA,CACJC,UAAWC,EAAAA,QACPC,EAAAA,QACmB,QAAnBC,EAAAxC,EAAcyB,UAAK,IAAAe,OAAA,EAAAA,EAAGd,GACtBE,GAAea,uBAEfV,EAAU,CAAAJ,SAAA,CAEI,SAAjBG,GACGD,GACAa,EAAAA,QAAMC,aAAad,EAAM,CAAE,eAAe,IAC9Ce,EAAAA,IAAA,MAAA,CAAKP,UAAWQ,EAAAA,MAAcC,KAAK,eAAcnB,SAC5CA,IAEa,UAAjBG,GACGD,GACAa,EAAAA,QAAMC,aAAad,EAAM,CAAE,eAAe,OACxC"}

package/cjs/tag/tag.style.js

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

package/cjs/tag/tag.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.style.js","sources":["../../../src/tag/tag.style.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n} from \"../v3_theme\";\nimport type { TagColorType, TagType } from \"./types\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\ninterface StyleProps {\n    $type: TagType;\n    $color: TagColorType;\n    $interactive: boolean;\n}\n\nexport const Wrapper = styled.div<StyleProps>`\n    border-radius: ${V3_Radius[\"sm\"]};\n    padding: 0.125rem 0.5rem;\n    width: fit-content;\n    max-width: 100%;\n    ${V3_Font[\"body-xs-semibold\"]}\n    transition: all 200ms ease;\n    cursor: ${({ $interactive }) => ($interactive ? \"pointer\" : \"default\")};\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n\n    svg {\n        flex-shrink: 0;\n    }\n\n    ${(props) => {\n        let backgroundColor: (props: any) => string;\n        let borderColor: ((props: any) => string) | undefined;\n        let color: (props: any) => string;\n        let hoverBackgroundColor: (props: any) => string;\n        let hoverBorderColor: ((props: any) => string) | undefined;\n\n        if (props.$type === \"solid\") {\n            color = V3_Colour[\"text-inverse\"];\n            switch (props.$color) {\n                case \"grey\":\n                    backgroundColor = V3_Colour[\"bg-inverse-subtler\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-inverse-hover\"];\n                    break;\n                case \"green\":\n                    backgroundColor = V3_Colour[\"bg-success-strong\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-success-strong-hover\"];\n                    break;\n                case \"yellow\":\n                    backgroundColor = V3_Colour[\"bg-warning-strong\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-warning-strong-hover\"];\n                    break;\n                case \"red\":\n                    backgroundColor = V3_Colour[\"bg-error-strong\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-error-strong-hover\"];\n                    break;\n                case \"blue\":\n                    backgroundColor = V3_Colour[\"bg-info-strong\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-info-strong-hover\"];\n                    break;\n                case \"primary\":\n                    backgroundColor = V3_Colour[\"bg-primary\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-primary-hover\"];\n                    break;\n                default:\n                    backgroundColor = V3_Colour[\"bg-inverse\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-inverse-hover\"];\n                    break;\n            }\n        } else {\n            switch (props.$color) {\n                case \"grey\":\n                    backgroundColor = V3_Colour[\"bg-strong\"];\n                    borderColor = V3_Colour[\"border-strong\"];\n                    color = V3_Colour[\"text-subtle\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-hover-neutral-strong\"];\n                    break;\n                case \"green\":\n                    backgroundColor = V3_Colour[\"bg-success\"];\n                    borderColor = V3_Colour[\"border-success\"];\n                    color = V3_Colour[\"text-success\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-success-hover\"];\n                    break;\n                case \"yellow\":\n                    backgroundColor = V3_Colour[\"bg-warning\"];\n                    borderColor = V3_Colour[\"border-warning\"];\n                    color = V3_Colour[\"text-warning\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-warning-hover\"];\n                    break;\n                case \"red\":\n                    backgroundColor = V3_Colour[\"bg-error\"];\n                    borderColor = V3_Colour[\"border-error\"];\n                    color = V3_Colour[\"text-error\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-error-hover\"];\n                    break;\n                case \"blue\":\n                    backgroundColor = V3_Colour[\"bg-info\"];\n                    borderColor = V3_Colour[\"border-info\"];\n                    color = V3_Colour[\"text-info\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-info-hover\"];\n                    break;\n                case \"primary\":\n                    backgroundColor = V3_Colour[\"bg-primary-subtlest\"];\n                    borderColor = V3_Colour[\"border-primary\"];\n                    color = V3_Colour[\"text-primary\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-primary-hover\"];\n                    break;\n                default:\n                    backgroundColor = V3_Colour.bg;\n                    borderColor = V3_Colour.border;\n                    color = V3_Colour.text;\n                    hoverBackgroundColor = V3_Colour[\"bg-hover-neutral\"];\n                    break;\n            }\n        }\n        return css`\n            background: ${backgroundColor};\n            border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${borderColor};\n            color: ${color};\n            @media (hover: hover) {\n                &:hover {\n                    ${props.$interactive &&\n                    hoverBackgroundColor &&\n                    `background: ${hoverBackgroundColor(props)};`}\n                    ${props.$interactive &&\n                    hoverBorderColor &&\n                    `border-color: ${hoverBorderColor(props)};`}\n                }\n            }\n        `;\n    }}\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        ${({ $interactive }) => {\n            if ($interactive) {\n                return css`\n                    ${V3_Font[\"body-md-semibold\"]}\n                    padding: calc(0.5rem - 1px) 1rem;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const Label = styled.div`\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    text-align: left;\n`;\n"],"names":["Wrapper","styled","div","V3_Radius","V3_Font","$interactive","props","backgroundColor","borderColor","color","hoverBackgroundColor","$type","V3_Colour","$color","bg","border","text","css","V3_Border","solid","hoverBorderColor","V3_MediaQuery","MaxWidth","lg","Label"],"mappings":"qKAoBO,MAAMA,EAAUC,EAAAA,QAAOC,GAAe;qBACxBC,EAAAA,UAAc;;;;MAI7BC,EAAAA,QAAQ;;cAEA,EAAGC,kBAAoBA,EAAe,UAAY;;;;;;;;;MASzDC,IACC,IAAIC,EACAC,EACAC,EACAC,EAGJ,GAAoB,UAAhBJ,EAAMK,MAEN,OADAF,EAAQG,EAAAA,UAAU,gBACVN,EAAMO,QACV,IAAK,OACDN,EAAkBK,EAAAA,UAAU,sBAC5BF,EAAuBE,EAAAA,UAAU,oBACjC,MACJ,IAAK,QACDL,EAAkBK,EAAAA,UAAU,qBAC5BF,EAAuBE,EAAAA,UAAU,2BACjC,MACJ,IAAK,SACDL,EAAkBK,EAAAA,UAAU,qBAC5BF,EAAuBE,EAAAA,UAAU,2BACjC,MACJ,IAAK,MACDL,EAAkBK,EAAAA,UAAU,mBAC5BF,EAAuBE,EAAAA,UAAU,yBACjC,MACJ,IAAK,OACDL,EAAkBK,EAAAA,UAAU,kBAC5BF,EAAuBE,EAAAA,UAAU,wBACjC,MACJ,IAAK,UACDL,EAAkBK,EAAAA,UAAU,cAC5BF,EAAuBE,EAAAA,UAAU,oBACjC,MACJ,QACIL,EAAkBK,EAAAA,UAAU,cAC5BF,EAAuBE,EAAAA,UAAU,yBAIzC,OAAQN,EAAMO,QACV,IAAK,OACDN,EAAkBK,EAAAA,UAAU,aAC5BJ,EAAcI,EAAAA,UAAU,iBACxBH,EAAQG,EAAAA,UAAU,eAClBF,EAAuBE,EAAAA,UAAU,2BACjC,MACJ,IAAK,QACDL,EAAkBK,EAAAA,UAAU,cAC5BJ,EAAcI,EAAAA,UAAU,kBACxBH,EAAQG,EAAAA,UAAU,gBAClBF,EAAuBE,EAAAA,UAAU,oBACjC,MACJ,IAAK,SACDL,EAAkBK,EAAAA,UAAU,cAC5BJ,EAAcI,EAAAA,UAAU,kBACxBH,EAAQG,EAAAA,UAAU,gBAClBF,EAAuBE,EAAAA,UAAU,oBACjC,MACJ,IAAK,MACDL,EAAkBK,EAAAA,UAAU,YAC5BJ,EAAcI,EAAAA,UAAU,gBACxBH,EAAQG,EAAAA,UAAU,cAClBF,EAAuBE,EAAAA,UAAU,kBACjC,MACJ,IAAK,OACDL,EAAkBK,EAAAA,UAAU,WAC5BJ,EAAcI,EAAAA,UAAU,eACxBH,EAAQG,EAAAA,UAAU,aAClBF,EAAuBE,EAAAA,UAAU,iBACjC,MACJ,IAAK,UACDL,EAAkBK,EAAAA,UAAU,uBAC5BJ,EAAcI,EAAAA,UAAU,kBACxBH,EAAQG,EAAAA,UAAU,gBAClBF,EAAuBE,EAAAA,UAAU,oBACjC,MACJ,QACIL,EAAkBK,EAAAA,UAAUE,GAC5BN,EAAcI,EAAAA,UAAUG,OACxBN,EAAQG,EAAAA,UAAUI,KAClBN,EAAuBE,EAAAA,UAAU,oBAI7C,OAAOK,KAAG;0BACQV;sBACJW,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC,SAASX;qBAC9CC;;;sBAGCH,EAAMD,cACRK,GACA,eAAeA,EAAqBJ;sBAClCA,EAAMD,cAzFhBe;;;SA8FH;;MAGHC,EAAAA,cAAcC,SAASC;UACnB,EAAGlB,mBACD,GAAIA,EACA,OAAOY,KAAG;sBACJb,EAAAA,QAAQ;;iBAGlB;;EAKCoB,EAAQvB,EAAAA,QAAOC,GAAG;;;;;;"}
+{"version":3,"file":"tag.style.js","sources":["../../../src/tag/tag.style.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Radius } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const wrapper = css`\n    border-radius: ${Radius[\"sm\"]};\n    padding: 0.125rem 0.5rem;\n    width: fit-content;\n    max-width: 100%;\n    ${Font[\"body-xs-semibold\"]}\n    transition: all 200ms ease;\n    cursor: default;\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    border: ${Border[\"width-010\"]} ${Border.solid} transparent;\n\n    svg {\n        flex-shrink: 0;\n    }\n`;\n\nexport const wrapperInteractive = css`\n    cursor: pointer;\n\n    ${MediaQuery.MaxWidth.lg} {\n        ${Font[\"body-md-semibold\"]}\n        padding: calc(0.5rem - 1px) 1rem;\n    }\n`;\n\nexport const wrapperSolidGrey = css`\n    background: ${Colour[\"bg-inverse-subtler\"]};\n    color: ${Colour[\"text-inverse\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-inverse-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperSolidGreen = css`\n    background: ${Colour[\"bg-success-strong\"]};\n    color: ${Colour[\"text-inverse\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-success-strong-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperSolidYellow = css`\n    background: ${Colour[\"bg-warning-strong\"]};\n    color: ${Colour[\"text-inverse\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-warning-strong-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperSolidRed = css`\n    background: ${Colour[\"bg-error-strong\"]};\n    color: ${Colour[\"text-inverse\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-error-strong-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperSolidBlue = css`\n    background: ${Colour[\"bg-info-strong\"]};\n    color: ${Colour[\"text-inverse\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-info-strong-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperSolidPrimary = css`\n    background: ${Colour[\"bg-primary\"]};\n    color: ${Colour[\"text-inverse\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-primary-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperSolidBlack = css`\n    background: ${Colour[\"bg-inverse\"]};\n    color: ${Colour[\"text-inverse\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-inverse-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperOutlineGrey = css`\n    background: ${Colour[\"bg-strong\"]};\n    border-color: ${Colour[\"border-strong\"]};\n    color: ${Colour[\"text-subtle\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-hover-neutral-strong\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperOutlineGreen = css`\n    background: ${Colour[\"bg-success\"]};\n    border-color: ${Colour[\"border-success\"]};\n    color: ${Colour[\"text-success\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-success-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperOutlineYellow = css`\n    background: ${Colour[\"bg-warning\"]};\n    border-color: ${Colour[\"border-warning\"]};\n    color: ${Colour[\"text-warning\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-warning-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperOutlineRed = css`\n    background: ${Colour[\"bg-error\"]};\n    border-color: ${Colour[\"border-error\"]};\n    color: ${Colour[\"text-error\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-error-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperOutlineBlue = css`\n    background: ${Colour[\"bg-info\"]};\n    border-color: ${Colour[\"border-info\"]};\n    color: ${Colour[\"text-info\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-info-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperOutlinePrimary = css`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border-color: ${Colour[\"border-primary\"]};\n    color: ${Colour[\"text-primary\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperOutlineBlack = css`\n    background: ${Colour.bg};\n    border-color: ${Colour.border};\n    color: ${Colour.text};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-hover-neutral\"]};\n            }\n        }\n    }\n`;\n\nexport const label = css`\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    text-align: left;\n`;\n"],"names":[],"mappings":"gFAgOkB,2BAxNE,qCAkBW,sCAwLC,sCA5BD,uCA1CC,qCAdD,wCAsEG,oCA5BJ,uCAdG,oCAzCH,mCA1BD,qCAvCC,mCAbD,uCAiEG,kCA1BJ,sCAbG"}

package/cjs/tag/tag.style_10tn8i.css

@@ -0,0 +1,17 @@
+.w6gjrz2{border-radius:var(--fds-radius-sm);padding:0.125rem 0.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);-webkit-transition:all 200ms ease;transition:all 200ms ease;cursor:default;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.25rem;border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;}.w6gjrz2 svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+.w3k7rkk{cursor:pointer;}:where(body.fds-breakpoint-lg-max) .w3k7rkk{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);padding:calc(0.5rem - 1px) 1rem;}
+.w1bpyu8a{background:var(--fds-colour-bg-inverse-subtler);color:var(--fds-colour-text-inverse);}@media (hover: hover){.w1bpyu8a.w3k7rkk:hover{background:var(--fds-colour-bg-inverse-hover);}}
+.wq3qkg6{background:var(--fds-colour-bg-success-strong);color:var(--fds-colour-text-inverse);}@media (hover: hover){.wq3qkg6.w3k7rkk:hover{background:var(--fds-colour-bg-success-strong-hover);}}
+.w12fv5tt{background:var(--fds-colour-bg-warning-strong);color:var(--fds-colour-text-inverse);}@media (hover: hover){.w12fv5tt.w3k7rkk:hover{background:var(--fds-colour-bg-warning-strong-hover);}}
+.w1358sxl{background:var(--fds-colour-bg-error-strong);color:var(--fds-colour-text-inverse);}@media (hover: hover){.w1358sxl.w3k7rkk:hover{background:var(--fds-colour-bg-error-strong-hover);}}
+.w1oi4bgz{background:var(--fds-colour-bg-info-strong);color:var(--fds-colour-text-inverse);}@media (hover: hover){.w1oi4bgz.w3k7rkk:hover{background:var(--fds-colour-bg-info-strong-hover);}}
+.wpja2at{background:var(--fds-colour-bg-primary);color:var(--fds-colour-text-inverse);}@media (hover: hover){.wpja2at.w3k7rkk:hover{background:var(--fds-colour-bg-primary-hover);}}
+.wgwk3g6{background:var(--fds-colour-bg-inverse);color:var(--fds-colour-text-inverse);}@media (hover: hover){.wgwk3g6.w3k7rkk:hover{background:var(--fds-colour-bg-inverse-hover);}}
+.wb0avxu{background:var(--fds-colour-bg-strong);border-color:var(--fds-colour-border-strong);color:var(--fds-colour-text-subtle);}@media (hover: hover){.wb0avxu.w3k7rkk:hover{background:var(--fds-colour-bg-hover-neutral-strong);}}
+.wn4wzi4{background:var(--fds-colour-bg-success);border-color:var(--fds-colour-border-success);color:var(--fds-colour-text-success);}@media (hover: hover){.wn4wzi4.w3k7rkk:hover{background:var(--fds-colour-bg-success-hover);}}
+.wyfwkab{background:var(--fds-colour-bg-warning);border-color:var(--fds-colour-border-warning);color:var(--fds-colour-text-warning);}@media (hover: hover){.wyfwkab.w3k7rkk:hover{background:var(--fds-colour-bg-warning-hover);}}
+.wocomht{background:var(--fds-colour-bg-error);border-color:var(--fds-colour-border-error);color:var(--fds-colour-text-error);}@media (hover: hover){.wocomht.w3k7rkk:hover{background:var(--fds-colour-bg-error-hover);}}
+.w17cj89j{background:var(--fds-colour-bg-info);border-color:var(--fds-colour-border-info);color:var(--fds-colour-text-info);}@media (hover: hover){.w17cj89j.w3k7rkk:hover{background:var(--fds-colour-bg-info-hover);}}
+.wutpo14{background:var(--fds-colour-bg-primary-subtlest);border-color:var(--fds-colour-border-primary);color:var(--fds-colour-text-primary);}@media (hover: hover){.wutpo14.w3k7rkk:hover{background:var(--fds-colour-bg-hover);}}
+.w1t1mrk9{background:var(--fds-colour-bg);border-color:var(--fds-colour-border);color:var(--fds-colour-text);}@media (hover: hover){.w1t1mrk9.w3k7rkk:hover{background:var(--fds-colour-bg-hover-neutral);}}
+.l1sykhdi{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-align:left;}

package/cjs/text-list/ordered-list.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("./text-list.styles.js");const i=i=>{var{size:s,counterType:o,counterSeparator:a,bottomMargin:n,children:c}=i,u=e.__rest(i,["size","counterType","counterSeparator","bottomMargin","children"]);return r.jsx(t.StyledOrderedList,Object.assign({$size:s,$counterType:o,$counterSeparator:a,$bottomMargin:n},u,{children:c}))};i.displayName="TextList.Ol",exports.OrderedList=i;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),s=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var i=require("../theme/utils/use-apply-styles.js"),o=require("./text-list.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=l(t);const a=t=>{var{className:l,size:a,counterType:n,counterSeparator:d,reversed:c,start:m,bottomMargin:p,children:j}=t,q=e.__rest(t,["className","size","counterType","counterSeparator","reversed","start","bottomMargin","children"]);const h=s.useRef(null),v=Boolean(m);var y;return i.useApplyStyle(h,{[o.tokens.listBottomMargin]:`${null!=p?p:0}rem`,[o.tokens.orderedListCounterStyle]:null!=n?n:null,[o.tokens.orderedListCounterSeparator]:(y=null!=d?d:")",`"${y.replace(/"/g,'\\"')}"`),[o.tokens.orderedListStartValue]:v?c?m+1:m-1:null}),r.jsx("ol",Object.assign({ref:h,reversed:c,start:m,className:u.default(o.listBase,o.orderedList,a&&o.listSize[a],c&&o.orderedListReversed,v&&o.orderedListCustomStart,l)},q,{children:j}))};a.displayName="TextList.Ol",exports.OrderedList=a;
 //# sourceMappingURL=ordered-list.js.map