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

package/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":"wYAqBA,MAAMA,EACF,2EAEEC,EAAK,mBA6GJ,MAAMC,EAAiBC,EAAMC,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,EAAAC,EAAA,CAAAC,SACKpB,GACGqB,EAACC,EAAuB,CACpBxB,IAAKA,EAAGyB,YACKlB,EAAQmB,QACZrB,EACTJ,UAAWA,EAASqB,SAAA,CAEpBF,EAACO,EAAgB,CACblB,QAASD,EACToB,GAAI,GAAGjC,YAAY,cACN,GAAGA,sBAAsB2B,SAEtCF,EAACS,EAAa,CAAA,aAAY,UAASP,SAC/BF,EAACU,EAAK,CAAA,OAGdP,EAACQ,EAAgB,CACbtB,QAASM,EACTa,GAAI,GAAGjC,0BACM,GAAGA,sBAAsB2B,SAAA,CAEtCF,EAACY,EAAU,CAACC,IAAK3B,EAAM4B,IAAI,oBAC3BX,EAACY,EAAa,CAAAb,SAAA,CACVF,EAACgB,EAAK,CAAAd,SAAEZ,IACRU,EAACiB,EAAW,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,EAACyB,EAAI,CAAA,EAAM,OAAOF,MAKjC,GAHIH,GACAD,EAAMK,KAAKxB,EAAC0B,EAAQ,CAAA,EAAM,aAE1BP,EAAMQ,OAAS,EAAG,CAClB,MAAMC,EAAY,EAAIT,EAAMQ,OAC5B,IAAK,IAAIJ,EAAI,EAAGA,EAAIK,EAAWL,IAC3BJ,EAAMK,KAAKxB,EAAC6B,EAAS,CAAA,EAAM,YAAYN,KAE/C,CAGA,OAAOvB,EAAC8B,EAAe,CAAA5B,SAAEiB,EAAMY,MAAM,EAAG,IAAqB,EA8BxCC,MAELhC,EAACiC,EAAe,CAAA/B,SACZF,EAACkC,EAAY,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 { 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 clsx from \"clsx\";\nimport React, { useContext, useRef } from \"react\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport { mergeRefs } from \"../util\";\nimport * as styles 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 containerRef = useRef<HTMLDivElement>(null);\n    const theme = useContext(ThemeContext);\n    const isDark = theme?.mode === \"dark\";\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.top]: `${offset}px`,\n    });\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(\n                <StarFillIcon\n                    key={`star${i}`}\n                    aria-hidden\n                    className={styles.starIcon}\n                />\n            );\n        }\n        if (hasHalfStar) {\n            stars.push(\n                <StarHalfIcon\n                    key={`halfstar`}\n                    aria-hidden\n                    className={styles.starIcon}\n                />\n            );\n        }\n        if (stars.length < MAX_STARS) {\n            const remaining = 5 - stars.length;\n            for (let i = 0; i < remaining; i++) {\n                stars.push(\n                    <StarIcon\n                        key={`emptystar${i}`}\n                        aria-hidden\n                        className={styles.starIcon}\n                    />\n                );\n            }\n        }\n\n        /* maximum of 5 stars */\n        return (\n            <div\n                className={styles.ratingContainer}\n                role=\"group\"\n                aria-label={`A rating of ${numberOfStars} out of ${MAX_STARS} stars`}\n                data-testid={`${ID}-star-rating`}\n            >\n                {stars.slice(0, MAX_STARS)}\n            </div>\n        );\n    };\n\n    return (\n        <>\n            {show && (\n                <div\n                    ref={mergeRefs(containerRef, ref)}\n                    data-testid={ID}\n                    className={clsx(\n                        styles.smartAppBannerContainer,\n                        isDark\n                            ? styles.smartAppBannerContainerDark\n                            : styles.smartAppBannerContainerLight,\n                        animated && styles.smartAppBannerContainerAnimated,\n                        className\n                    )}\n                >\n                    <div\n                        className={styles.proceedContainer}\n                        onClick={handleClick}\n                        id={`${ID}-proceed`}\n                        data-testid={`${ID}-proceed-container`}\n                    >\n                        <img\n                            className={styles.bannerIcon}\n                            src={icon}\n                            alt={ariaLabels.icon}\n                        />\n                        <div className={styles.textContainer}>\n                            <Typography.BodySM className={styles.title}>\n                                {title}\n                            </Typography.BodySM>\n                            <Typography.BodyXS className={styles.description}>\n                                {message}\n                            </Typography.BodyXS>\n                            {generateStarRating()}\n                        </div>\n                        <div className={styles.buttonContainer}>\n                            <Button\n                                className={styles.button}\n                                type=\"button\"\n                                onClick={handleClick}\n                                aria-label={ariaLabels.cta}\n                                sizeType=\"small\"\n                            >\n                                {buttonLabel}\n                            </Button>\n                        </div>\n                    </div>\n                    <div\n                        className={styles.dismissContainer}\n                        onClick={onDismiss}\n                        id={`${ID}-dismiss`}\n                        data-testid={`${ID}-dismiss-container`}\n                    >\n                        <ClickableIcon\n                            className={styles.dismissButton}\n                            aria-label={ariaLabels.dismiss}\n                        >\n                            <CrossIcon className={styles.cross} />\n                        </ClickableIcon>\n                    </div>\n                </div>\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","containerRef","useRef","theme","useContext","ThemeContext","isDark","mode","useApplyStyle","styles.tokens","container","top","ariaLabels","dismiss","cta","handleClick","e","stopPropagation","window","open","_jsx","_Fragment","children","_jsxs","mergeRefs","clsx","styles.smartAppBannerContainer","styles.smartAppBannerContainerDark","styles.smartAppBannerContainerLight","styles.smartAppBannerContainerAnimated","styles.proceedContainer","id","styles.bannerIcon","src","alt","styles.textContainer","Typography","BodySM","styles.title","BodyXS","styles.description","isNaN","stars","hasHalfStar","Math","floor","i","push","StarFillIcon","styles.starIcon","StarHalfIcon","length","remaining","StarIcon","styles.ratingContainer","role","slice","generateStarRating","styles.buttonContainer","Button","styles.button","type","sizeType","styles.dismissContainer","ClickableIcon","styles.dismissButton","CrossIcon","styles.cross"],"mappings":"w+CAgBA,MAAMA,EACF,2EAEEC,EAAK,mBAiLJ,MAAMC,EAAiBC,EAAMC,YA9KpC,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,EAAeC,EAAuB,MACtCC,EAAQC,EAAWC,GACnBC,GAAyB,UAAhBH,aAAK,EAALA,EAAOI,MAEtBC,EAAcP,EAAc,CACxB,CAACQ,EAAcC,UAAUC,KAAM,GAAGrB,QAGtC,MAAMsB,GAAa,CACfC,QAAS,eACTtB,KAAMO,QAAAA,EAAiB,GACvBgB,IAAKf,QAAAA,EAAmBF,GAKtBkB,GACFC,IAEAA,EAAEC,kBACFC,OAAOC,KAAK/B,EAAM,SAAU,cAC5BM,SAAAA,GAAW,EA2Df,OACI0B,EAAAC,EAAA,CAAAC,SACKnC,GACGoC,SACItC,IAAKuC,EAAUvB,EAAchB,GAAI,cACpBL,EACbM,UAAWuC,EACPC,EACApB,GACMqB,EACAC,EACNpC,GAAYqC,EACZ3C,GACHoC,SAAA,CAEDC,SACIrC,UAAW4C,EACXpC,QAASqB,GACTgB,GAAI,GAAGnD,YAAY,cACN,GAAGA,gCAEhBwC,EAAA,MAAA,CACIlC,UAAW8C,EACXC,IAAK1C,EACL2C,IAAKtB,GAAWrB,OAEpBgC,EAAA,MAAA,CAAKrC,UAAWiD,EAAoBb,SAAA,CAChCF,EAACgB,EAAWC,OAAM,CAACnD,UAAWoD,EAAYhB,SACrC3B,IAELyB,EAACgB,EAAWG,OAAM,CAACrD,UAAWsD,EAAkBlB,SAC3C1B,IAnFF,MACvB,GAAI6C,MAAMzC,IAAkBA,EAAgB,EACxC,OAGJ,MAAM0C,EAAQ,GACRC,EAAc3C,EAAgB4C,KAAKC,MAAM7C,IAAkB,GAEjE,IAAK,IAAI8C,EAAI,EAAGA,EAAIF,KAAKC,MAAM7C,GAAgB8C,IAC3CJ,EAAMK,KACF3B,EAAC4B,oBAGG9D,UAAW+D,GAFN,OAAOH,MAexB,GATIH,GACAD,EAAMK,KACF3B,EAAC8B,EAAY,CAAA,eAAA,EAGThE,UAAW+D,GAFN,aAMbP,EAAMS,OApFA,EAoFoB,CAC1B,MAAMC,EAAY,EAAIV,EAAMS,OAC5B,IAAK,IAAIL,EAAI,EAAGA,EAAIM,EAAWN,IAC3BJ,EAAMK,KACF3B,EAACiC,oBAGGnE,UAAW+D,GAFN,YAAYH,KAMjC,CAGA,OACI1B,EAAA,MAAA,CACIlC,UAAWoE,EACXC,KAAK,QAAO,aACA,eAAevD,mBAAyC,cACvD,GAAGpB,gBAAgB0C,SAE/BoB,EAAMc,MAAM,EAzGX,IA0GA,EAqCWC,MAELrC,EAAA,MAAA,CAAKlC,UAAWwE,EAAsBpC,SAClCF,EAACuC,EAAM,CACHzE,UAAW0E,EACXC,KAAK,SACLnE,QAASqB,GAAW,aACRH,GAAWE,IACvBgD,SAAS,QAAOxC,SAEfzB,SAIbuB,EAAA,MAAA,CACIlC,UAAW6E,EACXrE,QAASD,EACTsC,GAAI,GAAGnD,0BACM,GAAGA,sBAAsB0C,SAEtCF,EAAC4C,EAAa,CACV9E,UAAW+E,EAAoB,aACnBrD,GAAWC,iBAEvBO,EAAC8C,GAAUhF,UAAWiF,YAOlD"}

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

@@ -1,42 +1,21 @@
-export declare const SmartAppBannerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $offset: number;
-    $isAnimated: boolean;
-}>> & string;
-export declare const DismissContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DismissButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const Cross: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const ProceedContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const BannerIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
-export declare const ButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const RatingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Star: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const StarHalf: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const StarEmpty: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
+export declare const tokens: {
+    container: {
+        top: string;
+    };
+};
+export declare const smartAppBannerContainer: import("@linaria/core").LinariaClassName;
+export declare const smartAppBannerContainerLight: import("@linaria/core").LinariaClassName;
+export declare const smartAppBannerContainerDark: import("@linaria/core").LinariaClassName;
+export declare const smartAppBannerContainerAnimated: import("@linaria/core").LinariaClassName;
+export declare const dismissContainer: import("@linaria/core").LinariaClassName;
+export declare const dismissButton: import("@linaria/core").LinariaClassName;
+export declare const cross: import("@linaria/core").LinariaClassName;
+export declare const proceedContainer: import("@linaria/core").LinariaClassName;
+export declare const textContainer: import("@linaria/core").LinariaClassName;
+export declare const bannerIcon: import("@linaria/core").LinariaClassName;
+export declare const buttonContainer: import("@linaria/core").LinariaClassName;
+export declare const button: import("@linaria/core").LinariaClassName;
+export declare const title: import("@linaria/core").LinariaClassName;
+export declare const description: import("@linaria/core").LinariaClassName;
+export declare const ratingContainer: import("@linaria/core").LinariaClassName;
+export declare const starIcon: import("@linaria/core").LinariaClassName;

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

@@ -1,94 +1,2 @@
-import{CrossIcon as e}from"@lifesg/react-icons/cross";import{StarIcon as r}from"@lifesg/react-icons/star";import{StarFillIcon as i}from"@lifesg/react-icons/star-fill";import{StarHalfIcon as o}from"@lifesg/react-icons/star-half";import t,{keyframes as m,css as a}from"styled-components";import{Button as d}from"../button/button.js";import{ClickableIcon as n}from"../shared/clickable-icon/clickable-icon.js";import{Typography as l}from"../typography/index.js";import{V3_Colour as s,V3_Radius as f,V3_Border as c,V3_Shadow as p,V3_MediaQuery as g,V3_Font as h}from"../v3_theme/index.js";const x=m`
-	from {
-		opacity: 0;
-		transform: translateY(-20%);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-`,$=t.div`
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    position: fixed;
-    margin: 0.5rem 1.25rem;
-    ${e=>`top: ${e.$offset}px;`}
-    left: 0;
-    width: calc(100% - 2.5rem);
-    min-height: 5.5rem;
-    z-index: 9001;
-    background: ${s.bg};
-    ${e=>{var r;return"dark"===(null===(r=e.theme)||void 0===r?void 0:r.colourMode)?a`
-                  border: ${c["width-010"]} ${c.solid}
-                      ${s.border};
-              `:a`
-                  box-shadow: ${p["md-subtle"]};
-              `}}
-    border-radius: ${f.md};
-    ${e=>{if(e.$isAnimated)return a`
-                animation: ${x} 0.3s;
-            `}}
-`,w=t.div`
-    display: flex;
-    align-items: center;
-    padding: 0.5rem 0.25rem 0.5rem 1rem;
-`,y=t(n)`
-    padding: 0;
-`,b=t(e)`
-    color: ${s.icon};
-    height: 1.25rem;
-    width: 1.25rem;
-`,u=t.div`
-    flex: 1;
-    display: flex;
-    align-items: center;
-    padding: 0.5rem 1rem 0.5rem 0.25rem;
-    cursor: pointer;
-`,v=t.div`
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: left;
-    margin: 0.5rem;
-    ${g.MaxWidth.xs} {
-        margin: 0 0.5rem;
-    }
-`,j=t.img`
-    width: 2.65rem;
-    height: auto;
-    align-self: center;
-`,k=t.div`
-    max-width: 30%;
-`,M=t(d.Small)`
-    padding: 0.5rem;
-    height: auto;
-    & > span {
-        overflow-wrap: anywhere;
-        ${h["body-xs-semibold"]}
-    }
-`,S=t(l.BodySM)`
-    font-weight: ${h.Spec["weight-bold"]};
-    overflow-wrap: anywhere;
-    ${g.MaxWidth.xs} {
-        ${h["body-xs-bold"]}
-    }
-`,B=t(l.BodyXS)`
-    overflow-wrap: anywhere;
-`,W=t.div`
-    margin-top: 0.25rem;
-    display: flex;
-    align-items: center;
-`,Y=a`
-    height: 2rem;
-    width: 2rem;
-    padding-right: 0.25rem;
-    color: #ffc107;
-`,z=t(i)`
-    ${Y}
-`,A=t(o)`
-    ${Y}
-`,X=t(r)`
-    ${Y}
-`;export{j as BannerIcon,k as ButtonContainer,b as Cross,B as Description,y as DismissButton,w as DismissContainer,u as ProceedContainer,W as RatingContainer,$ as SmartAppBannerContainer,z as Star,X as StarEmpty,A as StarHalf,M as StyledButton,v as TextContainer,S as Title};
+import"./smart-app-banner.styles_m5dtgh.css";const r={container:{top:"--fds-internal-smartAppBanner-container-top"}},t="s4qb553",s="s1yw94wd",n="s1gji45a",a="s9k7xr8",p="dmwiwc",e="d1cy2w47",m="cp9l7rn",c="pdjtkx9",d="t7s9qr2",o="bece00m",i="b1ti1r81",b="b1rqz1xr",g="tmo9z7m",w="dp7x5g3",x="r1gggq6r",q="sda01s1";export{o as bannerIcon,b as button,i as buttonContainer,m as cross,w as description,e as dismissButton,p as dismissContainer,c as proceedContainer,x as ratingContainer,t as smartAppBannerContainer,a as smartAppBannerContainerAnimated,n as smartAppBannerContainerDark,s as smartAppBannerContainerLight,q as starIcon,d as textContainer,g as title,r as tokens};
 //# sourceMappingURL=smart-app-banner.styles.js.map

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

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

package/smart-app-banner/smart-app-banner.styles_m5dtgh.css

@@ -0,0 +1,16 @@
+.s4qb553{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;position:fixed;margin:0.5rem 1.25rem;--fds-internal-smartAppBanner-container-top:initial;top:var(--fds-internal-smartAppBanner-container-top);left:0;width:calc(100% - 2.5rem);min-height:5.5rem;z-index:9001;background:var(--fds-colour-bg);border-radius:var(--fds-radius-md);}
+.s1yw94wd{box-shadow:var(--fds-shadow-md-subtle);}
+.s1gji45a{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.s9k7xr8{-webkit-animation:smart-app-banner-slide-down-s9k7xr8 0.3s;animation:smart-app-banner-slide-down-s9k7xr8 0.3s;}@-webkit-keyframes smart-app-banner-slide-down-s9k7xr8{from{opacity:0;-webkit-transform:translateY(-20%);-moz-transform:translateY(-20%);-ms-transform:translateY(-20%);transform:translateY(-20%);}to{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}@keyframes smart-app-banner-slide-down-s9k7xr8{from{opacity:0;-webkit-transform:translateY(-20%);-moz-transform:translateY(-20%);-ms-transform:translateY(-20%);transform:translateY(-20%);}to{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}
+.dmwiwc{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;padding:0.5rem 0.25rem 0.5rem 1rem;}
+.d1cy2w47{padding:0;}
+.cp9l7rn{color:var(--fds-colour-icon);height:1.25rem;width:1.25rem;}
+.pdjtkx9{-webkit-flex:1;-ms-flex:1;flex:1;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;padding:0.5rem 1rem 0.5rem 0.25rem;cursor:pointer;}
+.t7s9qr2{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:left;-webkit-box-align:left;-ms-flex-align:left;align-items:left;margin:0.5rem;}:where(body.fds-breakpoint-xs-max) .t7s9qr2{margin:0 0.5rem;}
+.bece00m{width:2.65rem;height:auto;-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}
+.b1ti1r81{max-width:30%;}
+.b1rqz1xr{padding:0.5rem;height:auto;}.b1rqz1xr>span{overflow-wrap:anywhere;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);}
+.tmo9z7m{font-weight:var(--fds-font-weight-bold);overflow-wrap:anywhere;}:where(body.fds-breakpoint-xs-max) .tmo9z7m{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-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
+.dp7x5g3{overflow-wrap:anywhere;}
+.r1gggq6r{margin-top:0.25rem;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;}
+.sda01s1{height:2rem;width:2rem;padding-right:0.25rem;color:#ffc107;}

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

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

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

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

package/tab/tab-link-chain.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"tab-link-chain.js","sources":["../../src/tab/tab-link-chain.tsx"],"sourcesContent":["import { useContext, useRef } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport type { ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { Typography } from \"../typography\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport { TabContext } from \"./tab-context\";\nimport {\n    BoldLabel,\n    Chain,\n    ChainItem,\n    ChainLink,\n    CustomFadeWrapper,\n    Label,\n    LabelContainer,\n} from \"./tab-link-chain.style\";\nimport type { TabProps } from \"./types\";\n\ninterface Props\n    extends Pick<\n        TabProps,\n        \"fullWidthIndicatorLine\" | \"onTabClick\" | \"data-testid\" | \"fadeColor\"\n    > {\n    controlledMode?: boolean | undefined;\n}\n\nexport const TabLinkChain = ({\n    controlledMode,\n    \"data-testid\": testId,\n    onTabClick,\n    fullWidthIndicatorLine,\n    fadeColor,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setCurrentActiveIndex, currentActiveIndex, tabLinks } =\n        useContext(TabContext);\n\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"md-max\"]({ theme });\n\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n\n    const tabletBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n\n    const activeLinkRef = useRef<HTMLLIElement>(null);\n    const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChainLinkClick =\n        (index: number) =>\n        (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n            if (!controlledMode) {\n                setCurrentActiveIndex(index);\n            }\n\n            if (onTabClick) {\n                onTabClick(tabLinks[index].title, index);\n            }\n        };\n\n    const handleResize = ({ content, wrapper }: ResizeCallbackParams) => {\n        if (\n            content &&\n            wrapper &&\n            window.innerWidth <= tabletBreakpoint &&\n            activeLinkRef.current\n        ) {\n            content.scrollLeft =\n                activeLinkRef.current.getBoundingClientRect().left;\n        }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n        let nextIndex = index;\n        if (e.key === \"ArrowRight\") {\n            nextIndex = (index + 1) % tabLinks.length;\n            e.preventDefault();\n        } else if (e.key === \"ArrowLeft\") {\n            nextIndex = (index - 1 + tabLinks.length) % tabLinks.length;\n            e.preventDefault();\n        }\n\n        chainLinkRefs.current[nextIndex]?.focus();\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const truncateText = (value: string) => {\n        if (isMobile) {\n            return value.length > 20 ? `${value.substring(0, 20)}...` : value;\n        }\n\n        return value;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <CustomFadeWrapper\n            onResize={handleResize}\n            data-testid={testId}\n            fadeColor={fadeColor}\n        >\n            <Chain\n                role=\"tablist\"\n                $fullWidthIndicatorLine={fullWidthIndicatorLine}\n            >\n                {tabLinks.map(({ title, width, titleAddon }, index) => {\n                    const isActive = currentActiveIndex === index;\n\n                    return (\n                        <ChainItem\n                            key={index}\n                            role=\"none\"\n                            $active={isActive}\n                            ref={isActive ? activeLinkRef : null}\n                            $width={width}\n                        >\n                            <ChainLink\n                                role=\"none\"\n                                onClick={handleChainLinkClick(index)}\n                                data-testid={`${testId}-link-${index}`}\n                                $reversed={titleAddon?.position === \"left\"}\n                            >\n                                <LabelContainer role=\"none\">\n                                    <Label\n                                        $active={isActive}\n                                        onClick={handleChainLinkClick(index)}\n                                        aria-hidden=\"true\"\n                                    >\n                                        <Typography.BodyBL weight=\"regular\">\n                                            {truncateText(title)}\n                                        </Typography.BodyBL>\n                                    </Label>\n                                    <BoldLabel\n                                        role=\"tab\"\n                                        type=\"button\"\n                                        aria-selected={isActive}\n                                        tabIndex={isActive ? 0 : -1}\n                                        onKeyDown={(e) =>\n                                            handleKeyDown(e, index)\n                                        }\n                                        ref={(el) =>\n                                            (chainLinkRefs.current[index] = el)\n                                        }\n                                        $active={isActive}\n                                    >\n                                        <Typography.BodyBL weight=\"semibold\">\n                                            {truncateText(title)}\n                                        </Typography.BodyBL>\n                                    </BoldLabel>\n                                </LabelContainer>\n                                {titleAddon?.content}\n                            </ChainLink>\n                        </ChainItem>\n                    );\n                })}\n            </Chain>\n        </CustomFadeWrapper>\n    );\n};\n"],"names":["TabLinkChain","controlledMode","testId","onTabClick","fullWidthIndicatorLine","fadeColor","setCurrentActiveIndex","currentActiveIndex","tabLinks","useContext","TabContext","theme","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","tabletBreakpoint","activeLinkRef","useRef","chainLinkRefs","handleChainLinkClick","index","event","preventDefault","stopPropagation","title","truncateText","value","length","substring","_jsx","CustomFadeWrapper","onResize","content","wrapper","window","innerWidth","current","scrollLeft","getBoundingClientRect","left","Chain","role","$fullWidthIndicatorLine","children","map","width","titleAddon","isActive","ChainItem","$active","ref","$width","_jsxs","ChainLink","onClick","$reversed","position","LabelContainer","Label","Typography","BodyBL","weight","BoldLabel","type","tabIndex","onKeyDown","e","nextIndex","key","_a","focus","handleKeyDown","el"],"mappings":"wgBA2BO,MAAMA,EAAe,EACxBC,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,GAC/CC,EAAWC,GAETC,EAAQF,EAAWG,GACnBC,EAAmBC,EAAc,UAAU,CAAEH,UAE7CI,EAAWC,EAAAA,cAAc,CAC3BC,SAAUJ,IAGRK,EAAmBJ,EAAc,UAAU,CAAEH,UAE7CQ,EAAgBC,EAAsB,MACtCC,EAAgBD,EAAqC,IAKrDE,EACDC,GACAC,IACGA,EAAMC,iBACND,EAAME,kBACDzB,GACDK,EAAsBiB,GAGtBpB,GACAA,EAAWK,EAASe,GAAOI,MAAOJ,EACtC,EA+BFK,EAAgBC,GACdd,GACOc,EAAMC,OAAS,GAAK,GAAGD,EAAME,UAAU,EAAG,SAG9CF,EAMX,OACIG,EAACC,EAAiB,CACdC,SAzCa,EAAGC,UAASC,cAEzBD,GACAC,GACAC,OAAOC,YAAcpB,GACrBC,EAAcoB,UAEdJ,EAAQK,WACJrB,EAAcoB,QAAQE,wBAAwBC,KACtD,EAgC0B,cACTxC,EACbG,UAAWA,WAEX2B,EAACW,GACGC,KAAK,UAASC,wBACWzC,EAAsB0C,SAE9CtC,EAASuC,KAAI,EAAGpB,QAAOqB,QAAOC,cAAc1B,KACzC,MAAM2B,EAAW3C,IAAuBgB,EAExC,OACIS,EAACmB,GAEGP,KAAK,OAAMQ,QACFF,EACTG,IAAKH,EAAW/B,EAAgB,KAAImC,OAC5BN,WAERO,EAACC,GACGZ,KAAK,OACLa,QAASnC,EAAqBC,GAAM,cACvB,GAAGrB,UAAeqB,IAAOmC,UACF,UAAzBT,aAAU,EAAVA,EAAYU,UAAmBb,SAAA,CAE1CS,EAACK,EAAc,CAAChB,KAAK,iBACjBZ,EAAC6B,WACYX,EACTO,QAASnC,EAAqBC,GAAM,cACxB,gBAEZS,EAAC8B,EAAWC,OAAM,CAACC,OAAO,mBACrBpC,EAAaD,OAGtBK,EAACiC,EAAS,CACNrB,KAAK,MACLsB,KAAK,SAAQ,gBACEhB,EACfiB,SAAUjB,EAAW,GAAI,EACzBkB,UAAYC,GArE1B,EAACA,EAAwB9C,WAC3C,IAAI+C,EAAY/C,EACF,eAAV8C,EAAEE,KACFD,GAAa/C,EAAQ,GAAKf,EAASsB,OACnCuC,EAAE5C,kBACe,cAAV4C,EAAEE,MACTD,GAAa/C,EAAQ,EAAIf,EAASsB,QAAUtB,EAASsB,OACrDuC,EAAE5C,kBAG0B,QAAhC+C,EAAAnD,EAAckB,QAAQ+B,UAAU,IAAAE,GAAAA,EAAEC,OAAO,EA4DLC,CAAcL,EAAG9C,GAErB8B,IAAMsB,GACDtD,EAAckB,QAAQhB,GAASoD,EAAGvB,QAE9BF,EAAQJ,SAEjBd,EAAC8B,EAAWC,QAAOC,OAAO,WAAUlB,SAC/BlB,EAAaD,UAIzBsB,aAAU,EAAVA,EAAYd,YAxCZZ,EA0CG,OAIR"}
+{"version":3,"file":"tab-link-chain.js","sources":["../../src/tab/tab-link-chain.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext, useEffect, useRef } from \"react\";\n\nimport { FadeWrapper, type ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { TabContext } from \"./tab-context\";\nimport * as styles from \"./tab-link-chain.styles\";\nimport type { TabProps } from \"./types\";\n\ninterface Props\n    extends Pick<\n        TabProps,\n        \"fullWidthIndicatorLine\" | \"onTabClick\" | \"data-testid\" | \"fadeColor\"\n    > {\n    controlledMode?: boolean;\n}\n\nexport const TabLinkChain = ({\n    controlledMode,\n    \"data-testid\": testId,\n    onTabClick,\n    fullWidthIndicatorLine,\n    fadeColor,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setCurrentActiveIndex, currentActiveIndex, tabLinks } =\n        useContext(TabContext);\n\n    const isTablet = useMaxWidthMediaQuery(\"lg\");\n\n    const activeLinkRef = useRef<HTMLLIElement | null>(null);\n    const chainRef = useRef<HTMLUListElement | null>(null);\n    const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\n    const chainItemRefs = useRef<(HTMLLIElement | null)[]>([]);\n\n    useEffect(() => {\n        chainItemRefs.current.forEach((itemRef, index) => {\n            if (!itemRef) {\n                return;\n            }\n\n            const width = tabLinks[index]?.width;\n\n            if (width) {\n                itemRef.style.setProperty(styles.tokens.chainItem.width, width);\n            } else {\n                itemRef.style.removeProperty(styles.tokens.chainItem.width);\n            }\n        });\n    }, [tabLinks]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChainLinkClick =\n        (index: number) =>\n        (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n            if (!controlledMode) {\n                setCurrentActiveIndex(index);\n            }\n\n            if (onTabClick) {\n                onTabClick(tabLinks[index].title, index);\n            }\n        };\n\n    const handleResize = ({ content }: ResizeCallbackParams) => {\n        if (content && isTablet && activeLinkRef.current && chainRef.current) {\n            content.scrollLeft =\n                activeLinkRef.current.getBoundingClientRect().left -\n                chainRef.current.getBoundingClientRect().left;\n        }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n        let nextIndex = index;\n        if (e.key === \"ArrowRight\") {\n            nextIndex = (index + 1) % tabLinks.length;\n            e.preventDefault();\n        } else if (e.key === \"ArrowLeft\") {\n            nextIndex = (index - 1 + tabLinks.length) % tabLinks.length;\n            e.preventDefault();\n        }\n\n        chainLinkRefs.current[nextIndex]?.focus();\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <FadeWrapper\n            onResize={handleResize}\n            data-testid={testId}\n            fadeColor={fadeColor}\n            className={styles.customFadeWrapper}\n        >\n            <ul\n                role=\"tablist\"\n                ref={chainRef}\n                className={clsx(\n                    styles.chain,\n                    fullWidthIndicatorLine && styles.chainFullWidthIndicator\n                )}\n            >\n                {tabLinks.map(({ title, width, titleAddon }, index) => {\n                    const isActive = currentActiveIndex === index;\n                    const chainItemRef = (el: HTMLLIElement | null) => {\n                        chainItemRefs.current[index] = el;\n                        if (isActive) {\n                            activeLinkRef.current = el;\n                        }\n                    };\n\n                    return (\n                        <li\n                            key={`${title}-${width ?? \"\"}-${\n                                titleAddon?.position ?? \"none\"\n                            }`}\n                            role=\"none\"\n                            className={clsx(\n                                styles.chainItem,\n                                isActive && styles.chainItemActive\n                            )}\n                            ref={chainItemRef}\n                        >\n                            <div\n                                role=\"none\"\n                                onClick={handleChainLinkClick(index)}\n                                data-testid={`${testId}-link-${index}`}\n                                className={clsx(\n                                    styles.flexRow,\n                                    styles.chainLink,\n                                    titleAddon?.position === \"left\" &&\n                                        styles.chainLinkReversed\n                                )}\n                            >\n                                <div\n                                    className={styles.labelContainer}\n                                    role=\"none\"\n                                >\n                                    <div\n                                        className={clsx(\n                                            styles.label,\n                                            styles.deselectedLabel,\n                                            isActive &&\n                                                styles.deselectedLabelActive\n                                        )}\n                                        onClick={handleChainLinkClick(index)}\n                                        aria-hidden=\"true\"\n                                    >\n                                        {title}\n                                    </div>\n                                    <button\n                                        role=\"tab\"\n                                        type=\"button\"\n                                        aria-selected={isActive}\n                                        tabIndex={isActive ? 0 : -1}\n                                        onKeyDown={(e) =>\n                                            handleKeyDown(e, index)\n                                        }\n                                        ref={(el) =>\n                                            (chainLinkRefs.current[index] = el)\n                                        }\n                                        className={clsx(\n                                            styles.label,\n                                            styles.selectedLabel,\n                                            isActive &&\n                                                styles.selectedLabelActive\n                                        )}\n                                    >\n                                        {title}\n                                    </button>\n                                </div>\n                                {titleAddon?.content}\n                            </div>\n                        </li>\n                    );\n                })}\n            </ul>\n        </FadeWrapper>\n    );\n};\n"],"names":["TabLinkChain","controlledMode","testId","onTabClick","fullWidthIndicatorLine","fadeColor","setCurrentActiveIndex","currentActiveIndex","tabLinks","useContext","TabContext","isTablet","useMaxWidthMediaQuery","activeLinkRef","useRef","chainRef","chainLinkRefs","chainItemRefs","useEffect","current","forEach","itemRef","index","width","_a","style","setProperty","styles.tokens","chainItem","removeProperty","handleChainLinkClick","event","preventDefault","stopPropagation","title","_jsx","FadeWrapper","onResize","content","scrollLeft","getBoundingClientRect","left","className","styles.customFadeWrapper","children","role","ref","clsx","styles.chain","styles.chainFullWidthIndicator","map","titleAddon","isActive","styles.chainItem","styles.chainItemActive","el","_jsxs","onClick","styles.flexRow","styles.chainLink","position","styles.chainLinkReversed","styles.labelContainer","styles.label","styles.deselectedLabel","styles.deselectedLabelActive","type","tabIndex","onKeyDown","e","nextIndex","key","length","focus","handleKeyDown","styles.selectedLabel","styles.selectedLabelActive"],"mappings":"0hCAiBO,MAAMA,EAAe,EACxBC,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,GAC/CC,EAAWC,GAETC,EAAWC,EAAsB,MAEjCC,EAAgBC,EAA6B,MAC7CC,EAAWD,EAAgC,MAC3CE,EAAgBF,EAAqC,IACrDG,EAAgBH,EAAiC,IAEvDI,GAAU,KACND,EAAcE,QAAQC,SAAQ,CAACC,EAASC,WACpC,IAAKD,EACD,OAGJ,MAAME,EAAuB,QAAfC,EAAAhB,EAASc,UAAM,IAAAE,OAAA,EAAAA,EAAED,MAE3BA,EACAF,EAAQI,MAAMC,YAAYC,EAAcC,UAAUL,MAAOA,GAEzDF,EAAQI,MAAMI,eAAeF,EAAcC,UAAUL,MACzD,GACF,GACH,CAACf,IAKJ,MAAMsB,EACDR,GACAS,IACGA,EAAMC,iBACND,EAAME,kBACDhC,GACDK,EAAsBgB,GAGtBnB,GACAA,EAAWK,EAASc,GAAOY,MAAOZ,EACtC,EA2BR,OACIa,EAACC,EAAW,CACRC,SA1Ba,EAAGC,cAChBA,GAAW3B,GAAYE,EAAcM,SAAWJ,EAASI,UACzDmB,EAAQC,WACJ1B,EAAcM,QAAQqB,wBAAwBC,KAC9C1B,EAASI,QAAQqB,wBAAwBC,KACjD,EAqB0B,cACTvC,EACbG,UAAWA,EACXqC,UAAWC,EAAwBC,SAEnCT,EAAA,KAAA,CACIU,KAAK,UACLC,IAAK/B,EACL2B,UAAWK,EACPC,EACA5C,GAA0B6C,GAC7BL,SAEApC,EAAS0C,KAAI,EAAGhB,QAAOX,QAAO4B,cAAc7B,WACzC,MAAM8B,EAAW7C,IAAuBe,EAQxC,OACIa,EAAA,KAAA,CAIIU,KAAK,OACLH,UAAWK,EACPM,EACAD,GAAYE,GAEhBR,IAjBcS,IAClBtC,EAAcE,QAAQG,GAASiC,EAC3BH,IACAvC,EAAcM,QAAUoC,EAC5B,EAaqBX,SAEjBY,EAAA,MAAA,CACIX,KAAK,OACLY,QAAS3B,EAAqBR,GAAM,cACvB,GAAGpB,UAAeoB,IAC/BoB,UAAWK,EACPW,EACAC,EACyB,UAAzBR,aAAU,EAAVA,EAAYS,WACRC,GACPjB,SAAA,CAEDY,EAAA,MAAA,CACId,UAAWoB,EACXjB,KAAK,OAAMD,SAAA,CAEXT,EAAA,MAAA,CACIO,UAAWK,EACPgB,EACAC,EACAZ,GACIa,GAERR,QAAS3B,EAAqBR,GAAM,cACxB,OAAMsB,SAEjBV,IAELC,EAAA,SAAA,CACIU,KAAK,MACLqB,KAAK,SAAQ,gBACEd,EACfe,SAAUf,EAAW,GAAI,EACzBgB,UAAYC,GApF1B,EAACA,EAAwB/C,WAC3C,IAAIgD,EAAYhD,EACF,eAAV+C,EAAEE,KACFD,GAAahD,EAAQ,GAAKd,EAASgE,OACnCH,EAAErC,kBACe,cAAVqC,EAAEE,MACTD,GAAahD,EAAQ,EAAId,EAASgE,QAAUhE,EAASgE,OACrDH,EAAErC,kBAG0B,QAAhCR,EAAAR,EAAcG,QAAQmD,UAAU,IAAA9C,GAAAA,EAAEiD,OAAO,EA2ELC,CAAcL,EAAG/C,GAErBwB,IAAMS,GACDvC,EAAcG,QAAQG,GAASiC,EAEpCb,UAAWK,EACPgB,EACAY,EACAvB,GACIwB,YAGP1C,OAGRiB,eAAAA,EAAYb,YA1DZ,GAAGJ,KAASX,QAAAA,EAAS,MACF,UAApB4B,aAAU,EAAVA,EAAYS,gBAAQ,IAAApC,EAAAA,EAAI,SA2D3B,OAIP"}

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

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

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

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

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

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

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

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

package/tab/tab.d.ts

@@ -1,6 +1,6 @@
 import type { TabProps } from "./types";
 export declare const Tab: {
-    ({ children, currentActive: currentActiveIndex, initialActive, onTabClick, "data-testid": testId, fullWidthIndicatorLine, fadeColor, ...otherProps }: TabProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, currentActive: currentActiveIndex, initialActive, onTabClick, "data-testid": testId, className, fullWidthIndicatorLine, fadeColor, ...otherProps }: TabProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Item: {

package/tab/tab.js

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

package/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../src/tab/tab.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { Children, cloneElement, useEffect, useMemo, useState } from \"react\";\n\nimport { Wrapper } from \"./tab.style\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport { TabItem } from \"./tab-item\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport type { TabItemProps, TabProps } from \"./types\";\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\nconst TabBase = ({\n    children,\n    currentActive: currentActiveIndex,\n    initialActive = 0,\n    onTabClick,\n    \"data-testid\": testId,\n    fullWidthIndicatorLine,\n    fadeColor,\n    ...otherProps\n}: TabProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [currentActive, setCurrentActive] = useState<number>(\n        currentActiveIndex || initialActive\n    );\n\n    const tabLinks = useMemo(() => {\n        const validChildren = Children.toArray(children).filter(\n            Boolean\n        ) as ReactElement<TabItemProps>[];\n\n        return validChildren.map((child) => {\n            return {\n                title: child.props.title,\n                width: child.props.width,\n                titleAddon: child.props.titleAddon,\n            };\n        }) as TabLinkProps[];\n    }, [children]);\n\n    // =========================================================================\n    // Effects\n    // =========================================================================\n    useEffect(() => {\n        if (typeof currentActiveIndex === \"number\") {\n            setCurrentActive(currentActiveIndex);\n        }\n    }, [currentActiveIndex]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderChildren = () => {\n        const validChildren = Children.toArray(children).filter(Boolean);\n\n        return validChildren.map((child, index) => {\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            return cloneElement(child as ReactElement<any>, {\n                key: index,\n                index,\n            });\n        });\n    };\n\n    return (\n        <Wrapper data-testid={testId} {...otherProps}>\n            <TabContext.Provider\n                value={{\n                    tabLinks,\n                    currentActiveIndex: currentActive,\n                    setCurrentActiveIndex: setCurrentActive,\n                }}\n            >\n                <TabLinkChain\n                    controlledMode={typeof currentActiveIndex === \"number\"}\n                    onTabClick={onTabClick}\n                    data-testid={`${testId}-tabs`}\n                    fullWidthIndicatorLine={fullWidthIndicatorLine}\n                    fadeColor={fadeColor}\n                />\n                {renderChildren()}\n            </TabContext.Provider>\n        </Wrapper>\n    );\n};\n\nTabBase.displayName = \"Tab\";\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport const Tab = Object.assign(TabBase, {\n    Item: TabItem,\n});\n"],"names":["TabBase","_a","children","currentActive","currentActiveIndex","initialActive","onTabClick","testId","fullWidthIndicatorLine","fadeColor","otherProps","__rest","setCurrentActive","useState","tabLinks","useMemo","Children","toArray","filter","Boolean","map","child","title","props","width","titleAddon","useEffect","_jsx","Wrapper","Object","assign","_jsxs","TabContext","Provider","value","setCurrentActiveIndex","TabLinkChain","controlledMode","index","cloneElement","key","displayName","Tab","Item","TabItem"],"mappings":"gXAaA,MAAMA,EAAWC,QAAAC,SACbA,EACAC,cAAeC,EAAkBC,cACjCA,EAAgB,EAACC,WACjBA,EACA,cAAeC,EAAMC,uBACrBA,EAAsBC,UACtBA,KACGC,EAAUC,EAAAV,EARA,CAAA,WAAA,gBAAA,gBAAA,aAAA,cAAA,yBAAA,cAab,MAAOE,EAAeS,GAAoBC,EACtCT,GAAsBC,GAGpBS,EAAWC,GAAQ,IACCC,EAASC,QAAQf,GAAUgB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAACvB,IAKJwB,GAAU,KAC4B,iBAAvBtB,GACPQ,EAAiBR,EACrB,GACD,CAACA,IAiBJ,OACIuB,EAACC,EAAOC,OAAAC,OAAA,CAAA,cAAcvB,GAAYG,EAAU,CAAAR,SACxC6B,EAACC,EAAWC,SAAQ,CAChBC,MAAO,CACHpB,WACAV,mBAAoBD,EACpBgC,sBAAuBvB,GAC1BV,SAAA,CAEDyB,EAACS,EAAY,CACTC,eAA8C,iBAAvBjC,EACvBE,WAAYA,gBACC,GAAGC,SAChBC,uBAAwBA,EACxBC,UAAWA,IAzBDO,EAASC,QAAQf,GAAUgB,OAAOC,SAEnCC,KAAI,CAACC,EAAOiB,IAEtBC,EAAalB,EAA4B,CAC5CmB,IAAKF,EACLA,iBAuBE,EAIlBtC,EAAQyC,YAAc,YAKTC,EAAMb,OAAOC,OAAO9B,EAAS,CACtC2C,KAAMC"}
+{"version":3,"file":"tab.js","sources":["../../src/tab/tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ReactElement } from \"react\";\nimport { Children, cloneElement, useEffect, useMemo, useState } from \"react\";\n\nimport * as styles from \"./tab.styles\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport { TabItem } from \"./tab-item\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport type { TabItemProps, TabProps } from \"./types\";\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\nconst TabBase = ({\n    children,\n    currentActive: currentActiveIndex,\n    initialActive = 0,\n    onTabClick,\n    \"data-testid\": testId,\n    className,\n    fullWidthIndicatorLine,\n    fadeColor,\n    ...otherProps\n}: TabProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [currentActive, setCurrentActive] = useState<number>(\n        currentActiveIndex || initialActive\n    );\n\n    const tabLinks = useMemo(() => {\n        const validChildren = Children.toArray(children).filter(\n            Boolean\n        ) as ReactElement<TabItemProps>[];\n\n        return validChildren.map((child) => {\n            return {\n                title: child.props.title,\n                width: child.props.width,\n                titleAddon: child.props.titleAddon,\n            };\n        }) as TabLinkProps[];\n    }, [children]);\n\n    const tabContextValue = useMemo(\n        () => ({\n            tabLinks,\n            currentActiveIndex: currentActive,\n            setCurrentActiveIndex: setCurrentActive,\n        }),\n        [currentActive, tabLinks]\n    );\n\n    // =========================================================================\n    // Effects\n    // =========================================================================\n    useEffect(() => {\n        if (typeof currentActiveIndex === \"number\") {\n            setCurrentActive(currentActiveIndex);\n        }\n    }, [currentActiveIndex]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderChildren = () => {\n        const validChildren = Children.toArray(children).filter(Boolean);\n\n        return validChildren.map((child, index) => {\n            const element = child as ReactElement<TabItemProps>;\n\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            return cloneElement(child as ReactElement<any>, {\n                key: element.key ?? element.props.title,\n                index,\n            });\n        });\n    };\n\n    return (\n        <div\n            data-testid={testId}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <TabContext.Provider value={tabContextValue}>\n                <TabLinkChain\n                    controlledMode={typeof currentActiveIndex === \"number\"}\n                    onTabClick={onTabClick}\n                    data-testid={`${testId}-tabs`}\n                    fullWidthIndicatorLine={fullWidthIndicatorLine}\n                    fadeColor={fadeColor}\n                />\n                {renderChildren()}\n            </TabContext.Provider>\n        </div>\n    );\n};\n\nTabBase.displayName = \"Tab\";\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport const Tab = Object.assign(TabBase, {\n    Item: TabItem,\n});\n"],"names":["TabBase","_a","children","currentActive","currentActiveIndex","initialActive","onTabClick","testId","className","fullWidthIndicatorLine","fadeColor","otherProps","__rest","setCurrentActive","useState","tabLinks","useMemo","Children","toArray","filter","Boolean","map","child","title","props","width","titleAddon","tabContextValue","setCurrentActiveIndex","useEffect","_jsx","Object","assign","clsx","styles.wrapper","_jsxs","TabContext","Provider","value","TabLinkChain","controlledMode","index","element","cloneElement","key","displayName","Tab","Item","TabItem"],"mappings":"qYAcA,MAAMA,EAAWC,QAAAC,SACbA,EACAC,cAAeC,EAAkBC,cACjCA,EAAgB,EAACC,WACjBA,EACA,cAAeC,EAAMC,UACrBA,EAASC,uBACTA,EAAsBC,UACtBA,GAAST,EACNU,EAAUC,EAAAX,EATA,CAAA,WAAA,gBAAA,gBAAA,aAAA,cAAA,YAAA,yBAAA,cAcb,MAAOE,EAAeU,GAAoBC,EACtCV,GAAsBC,GAGpBU,EAAWC,GAAQ,IACCC,EAASC,QAAQhB,GAAUiB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAACxB,IAEEyB,EAAkBX,GACpB,KAAA,CACID,WACAX,mBAAoBD,EACpByB,sBAAuBf,KAE3B,CAACV,EAAeY,IAMpBc,GAAU,KAC4B,iBAAvBzB,GACPS,EAAiBT,EACrB,GACD,CAACA,IAmBJ,OACI0B,EAAA,MAAAC,OAAAC,OAAA,CAAA,cACiBzB,EACbC,UAAWyB,EAAKC,EAAgB1B,IAC5BG,EAAU,CAAAT,SAEdiC,EAACC,EAAWC,SAAQ,CAACC,MAAOX,EAAezB,SAAA,CACvC4B,EAACS,EAAY,CACTC,eAA8C,iBAAvBpC,EACvBE,WAAYA,EAAU,cACT,GAAGC,SAChBE,uBAAwBA,EACxBC,UAAWA,IAzBDO,EAASC,QAAQhB,GAAUiB,OAAOC,SAEnCC,KAAI,CAACC,EAAOmB,WAC7B,MAAMC,EAAUpB,EAGhB,OAAOqB,EAAarB,EAA4B,CAC5CsB,YAAK3C,EAAAyC,EAAQE,mBAAOF,EAAQlB,MAAMD,MAClCkB,SACF,SAoBA,EAIdzC,EAAQ6C,YAAc,YAKTC,EAAMf,OAAOC,OAAOhC,EAAS,CACtC+C,KAAMC"}

package/tab/tab.styles.d.ts

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

package/tab/tab.styles.js

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

package/tab/tab.styles.js.map

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

package/tab/tab.styles_1najffw.css

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

package/table/table.d.ts

@@ -1,24 +1,30 @@
 export declare const Table: (({ children, ...props }: React.TableHTMLAttributes<HTMLTableElement>) => import("react/jsx-runtime").JSX.Element) & {
-    Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    Table: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
+    Container: {
+        ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Table: {
+        ({ children, className, ...props }: React.TableHTMLAttributes<HTMLTableElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
     Head: {
         ({ children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Body: {
-        ({ children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Row: {
-        ({ children, ...props }: React.HTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: React.HTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Cell: {
-        ({ children, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     HeaderCell: {
-        ({ children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

package/table/table.js

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

package/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../src/table/table.tsx"],"sourcesContent":["import {\n    BodyCell,\n    BodyRow,\n    HeaderCell,\n    TableBody,\n    TableComponent,\n    TableWrapper,\n} from \"./table.styles\";\n\nconst Head = ({\n    children,\n    ...props\n}: React.HTMLAttributes<HTMLTableSectionElement>) => (\n    <thead {...props}>{children}</thead>\n);\nHead.displayName = \"Table.Head\";\n\nconst Body = ({\n    children,\n    ...props\n}: React.HTMLAttributes<HTMLTableSectionElement>) => (\n    <TableBody {...props}>{children}</TableBody>\n);\nBody.displayName = \"Table.Body\";\n\nconst Row = ({\n    children,\n    ...props\n}: React.HTMLAttributes<HTMLTableRowElement>) => (\n    <BodyRow {...props}>{children}</BodyRow>\n);\nRow.displayName = \"Table.Row\";\n\nconst Cell = ({\n    children,\n    ...props\n}: React.TdHTMLAttributes<HTMLTableCellElement>) => (\n    <BodyCell {...props}>{children}</BodyCell>\n);\nCell.displayName = \"Table.Cell\";\n\nconst Header = ({\n    children,\n    ...props\n}: React.ThHTMLAttributes<HTMLTableCellElement>) => (\n    <HeaderCell {...props}>{children}</HeaderCell>\n);\nHeader.displayName = \"Table.HeaderCell\";\n\nexport const Table = Object.assign(\n    ({ children, ...props }: React.TableHTMLAttributes<HTMLTableElement>) => (\n        <TableWrapper>\n            <TableComponent {...props}>{children}</TableComponent>\n        </TableWrapper>\n    ),\n    {\n        Container: TableWrapper,\n        Table: TableComponent,\n        Head,\n        Body,\n        Row,\n        Cell,\n        HeaderCell: Header,\n    }\n);\n"],"names":["Head","_a","children","props","__rest","_jsx","Object","assign","displayName","Body","TableBody","Row","BodyRow","Cell","BodyCell","Header","HeaderCell","Table","TableWrapper","TableComponent","Container"],"mappings":"sNASA,MAAMA,EAAQC,IAAA,IAAAC,SACVA,GAAQD,EACLE,EAAKC,EAAAH,EAFE,cAGuC,OACjDI,EAAA,QAAAC,OAAAC,OAAA,GAAWJ,YAAQD,IAAiB,EAExCF,EAAKQ,YAAc,aAEnB,MAAMC,EAAQR,IAAA,IAAAC,SACVA,GAAQD,EACLE,EAAKC,EAAAH,EAFE,cAGuC,OACjDI,EAACK,EAASJ,OAAAC,OAAA,GAAKJ,EAAK,CAAAD,SAAGA,IAAqB,EAEhDO,EAAKD,YAAc,aAEnB,MAAMG,EAAOV,IAAA,IAAAC,SACTA,GAAQD,EACLE,EAAKC,EAAAH,EAFC,cAGoC,OAC7CI,EAACO,EAAON,OAAAC,OAAA,GAAKJ,EAAK,CAAAD,SAAGA,IAAmB,EAE5CS,EAAIH,YAAc,YAElB,MAAMK,EAAQZ,IAAA,IAAAC,SACVA,GAAQD,EACLE,EAAKC,EAAAH,EAFE,cAGsC,OAChDI,EAACS,EAAQR,OAAAC,OAAA,GAAKJ,EAAK,CAAAD,SAAGA,IAAoB,EAE9CW,EAAKL,YAAc,aAEnB,MAAMO,EAAUd,IAAA,IAAAC,SACZA,GAAQD,EACLE,EAAKC,EAAAH,EAFI,cAGoC,OAChDI,EAACW,EAAUV,OAAAC,OAAA,GAAKJ,EAAK,CAAAD,SAAGA,IAAsB,EAElDa,EAAOP,YAAc,mBAEd,MAAMS,EAAQX,OAAOC,QACvBN,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAKC,EAAAH,EAApB,cAAwE,OACrEI,EAACa,EAAY,CAAAhB,SACTG,EAACc,EAAcb,OAAAC,OAAA,CAAA,EAAKJ,EAAK,CAAAD,SAAGA,MACjB,GAEnB,CACIkB,UAAWF,EACXD,MAAOE,EACPnB,OACAS,OACAE,MACAE,OACAG,WAAYD"}
+{"version":3,"file":"table.js","sources":["../../src/table/table.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport * as styles from \"./table.styles\";\n\nconst Head = ({\n    children,\n    ...props\n}: React.HTMLAttributes<HTMLTableSectionElement>) => (\n    <thead {...props}>{children}</thead>\n);\nHead.displayName = \"Table.Head\";\n\nconst Body = ({\n    children,\n    className,\n    ...props\n}: React.HTMLAttributes<HTMLTableSectionElement>) => (\n    <tbody className={clsx(styles.tableBody, className)} {...props}>\n        {children}\n    </tbody>\n);\nBody.displayName = \"Table.Body\";\n\nconst Row = ({\n    children,\n    className,\n    ...props\n}: React.HTMLAttributes<HTMLTableRowElement>) => (\n    <tr className={clsx(styles.bodyRow, className)} {...props}>\n        {children}\n    </tr>\n);\nRow.displayName = \"Table.Row\";\n\nconst Cell = ({\n    children,\n    className,\n    ...props\n}: React.TdHTMLAttributes<HTMLTableCellElement>) => (\n    <td className={clsx(styles.bodyCell, className)} {...props}>\n        {children}\n    </td>\n);\nCell.displayName = \"Table.Cell\";\n\nconst Header = ({\n    children,\n    className,\n    ...props\n}: React.ThHTMLAttributes<HTMLTableCellElement>) => (\n    <th className={clsx(styles.headerCell, className)} {...props}>\n        {children}\n    </th>\n);\nHeader.displayName = \"Table.HeaderCell\";\n\nconst Container = ({\n    children,\n    className,\n    ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n    <div\n        className={clsx(styles.tableWrapper, className)}\n        data-testid=\"table-wrapper\"\n        {...props}\n    >\n        {children}\n    </div>\n);\nContainer.displayName = \"Table.Container\";\n\nconst TableEl = ({\n    children,\n    className,\n    ...props\n}: React.TableHTMLAttributes<HTMLTableElement>) => (\n    <table className={clsx(styles.tableComponent, className)} {...props}>\n        {children}\n    </table>\n);\nTableEl.displayName = \"Table.Table\";\n\nexport const Table = Object.assign(\n    ({ children, ...props }: React.TableHTMLAttributes<HTMLTableElement>) => (\n        <Container>\n            <TableEl {...props}>{children}</TableEl>\n        </Container>\n    ),\n    {\n        Container,\n        Table: TableEl,\n        Head,\n        Body,\n        Row,\n        Cell,\n        HeaderCell: Header,\n    }\n);\n"],"names":["Head","_a","children","props","__rest","_jsx","Object","assign","displayName","Body","className","clsx","styles.tableBody","Row","styles.bodyRow","Cell","styles.bodyCell","Header","styles.headerCell","Container","styles.tableWrapper","TableEl","styles.tableComponent","Table","HeaderCell"],"mappings":"0OAIA,MAAMA,EAAQC,IAAA,IAAAC,SACVA,GAAQD,EACLE,EAAKC,EAAAH,EAFE,cAGuC,OACjDI,EAAA,QAAAC,OAAAC,OAAA,GAAWJ,YAAQD,IAAiB,EAExCF,EAAKQ,YAAc,aAEnB,MAAMC,EAAQR,QAAAC,SACVA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHE,0BAIuC,OACjDI,EAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAKC,EAAkBF,IAAgBP,YACpDD,IACG,EAEZO,EAAKD,YAAc,aAEnB,MAAMK,EAAOZ,QAAAC,SACTA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHC,0BAIoC,OAC7CI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKG,EAAgBJ,IAAgBP,YAC/CD,IACA,EAETW,EAAIL,YAAc,YAElB,MAAMO,EAAQd,QAAAC,SACVA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHE,0BAIsC,OAChDI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKK,EAAiBN,IAAgBP,YAChDD,IACA,EAETa,EAAKP,YAAc,aAEnB,MAAMS,EAAUhB,QAAAC,SACZA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHI,0BAIoC,OAChDI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKO,EAAmBR,IAAgBP,YAClDD,IACA,EAETe,EAAOT,YAAc,mBAErB,MAAMW,EAAalB,QAAAC,SACfA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHO,0BAIyB,OACxCI,uBACIK,UAAWC,EAAKS,EAAqBV,GAAU,cACnC,iBACRP,YAEHD,IACC,EAEViB,EAAUX,YAAc,kBAExB,MAAMa,EAAWpB,QAAAC,SACbA,EAAQQ,UACRA,GAAST,EACNE,EAAKC,EAAAH,EAHK,0BAIkC,OAC/CI,EAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAKW,EAAuBZ,IAAgBP,YACzDD,IACG,EAEZmB,EAAQb,YAAc,cAEf,MAAMe,EAAQjB,OAAOC,QACvBN,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAKC,EAAAH,EAApB,cAAwE,OACrEI,EAACc,EAAS,CAAAjB,SACNG,EAACgB,EAAOf,OAAAC,OAAA,CAAA,EAAKJ,EAAK,CAAAD,SAAGA,MACb,GAEhB,CACIiB,YACAI,MAAOF,EACPrB,OACAS,OACAI,MACAE,OACAS,WAAYP"}