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

package/toast/toast.d.ts

@@ -1,2 +1,9 @@
 import type { ToastProps } from "./types";
-export declare const Toast: ({ type, title, label, autoDismiss, autoDismissTime, onDismiss, fixed, actionButton, ...otherProps }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A brief notification that appears on screen to provide feedback about an
+ * operation or event.
+ *
+ * Use `Toast` to surface status messages without interrupting the user's workflow.
+ * @keywords alert, feedback, notification, snackbar
+ */
+export declare const Toast: ({ type, title, label, className, autoDismiss, autoDismissTime, onDismiss, fixed, actionButton, ...otherProps }: ToastProps) => import("react/jsx-runtime").JSX.Element;

package/toast/toast.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i}from"react/jsx-runtime";import{CrossIcon as r,ICircleFillIcon as n,ExclamationCircleFillIcon as s,ExclamationTriangleFillIcon as o,TickCircleFillIcon as a}from"@lifesg/react-icons";import{useSpring as l,easings as c}from"@react-spring/web";import m,{useRef as d,useState as u,useContext as p,useEffect as f}from"react";import{r as y}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as h}from"styled-components";import{inertValue as v,VisuallyHidden as x}from"../shared/accessibility/index.js";import{V3_Breakpoint as g}from"../v3_theme/index.js";import{Wrapper as b,ContentWrapper as j,TextIconWrapper as k,TextContainer as D,ActionButton as E,DismissButton as $,Title as T,DescriptionMD as w,DescriptionBL as C}from"./toast.styles.js";const _=4e3,B={success:a,warning:o,error:s,info:n},L=n=>{var{type:s="success",title:o,label:a,autoDismiss:L,autoDismissTime:O=_,onDismiss:Q,fixed:V=!0,actionButton:X}=n,Y=e(n,["type","title","label","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton"]);const I=d(null),[M,R]=u(!1),W=p(h),q=g["lg-max"]({theme:W}),z=y.useMediaQuery({maxWidth:q});f((()=>{R(!0)}),[]),f((()=>{if(!L)return;const e=setTimeout((()=>{R(!1)}),O);return()=>clearTimeout(e)}),[L]),f((()=>{const e=e=>{var t;"Escape"===e.key&&(null===(t=I.current)||void 0===t?void 0:t.contains(document.activeElement))&&A()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[]);const A=()=>{R(!1)},F=l({opacity:M?1:0,transform:M?z?"translateY(0%)":"translateX(0%)":z?"translateY(-1500%)":"translateX(150%)",config:{easing:c.easeInOutQuart,duration:1e3},onRest:()=>{M||null==Q||Q()}});return t(b,Object.assign({ref:I,style:F,$type:s,$fixed:V,role:"alert",inert:v(!M)},Y,{children:[i(x,{children:s}),t(j,{children:[t(k,{$type:s,children:[(()=>{const e=B[s];return e&&i(e,{"aria-hidden":!0})})(),t(D,{children:[o&&(m.isValidElement(o)?o:i(T,{$type:s,role:"presentation",children:o})),a&&(m.isValidElement(a)?a:i(o?w:C,{$type:s,children:a}))]})]}),X&&i(E,{styleType:"light",onClick:X.onClick,children:X.label})]}),t($,{$type:s,onClick:A,children:[i(x,{role:"presentation",children:"Close notification"}),i(r,{"aria-hidden":!0})]})]}))};export{L as Toast};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i}from"react/jsx-runtime";import{CrossIcon as r,ICircleFillIcon as s,ExclamationCircleFillIcon as o,ExclamationTriangleFillIcon as n,TickCircleFillIcon as a}from"@lifesg/react-icons";import{useSpring as l,easings as m,animated as c}from"@react-spring/web";import d from"clsx";import p,{useRef as u,useState as h,useEffect as f}from"react";import{Button as y}from"../button/button.js";import{inertValue as j,VisuallyHidden as v}from"../shared/accessibility/index.js";import{ClickableIcon as b}from"../shared/clickable-icon/clickable-icon.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 k}from"../theme/utils/use-media-query.js";import{Typography as g}from"../typography/index.js";import{wrapper as x,contentWrapper as N,textIconWrapper as D,textContainer as E,actionButton as T,dismissButton as B,title as w,description as C}from"./toast.styles.js";const L=4e3,q={success:a,warning:n,error:o,info:s},O=s=>{var{type:o="success",title:n,label:a,className:O,autoDismiss:V,autoDismissTime:X=L,onDismiss:Y,fixed:_=!0,actionButton:z}=s,I=e(s,["type","title","label","className","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton"]);const M=u(null),[Q,R]=h(!1),A=k("lg");f((()=>{R(!0)}),[]),f((()=>{if(!V)return;const e=setTimeout((()=>{R(!1)}),X);return()=>clearTimeout(e)}),[V,X]),f((()=>{const e=e=>{var t;"Escape"===e.key&&(null===(t=M.current)||void 0===t?void 0:t.contains(document.activeElement))&&F()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[]);const F=()=>{R(!1)},G=l({opacity:Q?1:0,transform:Q?A?"translateY(0%)":"translateX(0%)":A?"translateY(-1500%)":"translateX(150%)",config:{easing:m.easeInOutQuart,duration:1e3},onRest:()=>{Q||null==Y||Y()}});return t(c.div,Object.assign({ref:M,style:G,className:d(x,O),"data-type":o,"data-fixed":_,role:"alert",inert:j(!Q)},I,{children:[i(v,{children:o}),t("div",{className:N,children:[t("div",{className:D,"data-type":o,children:[(()=>{const e=q[o];return e&&i(e,{"aria-hidden":!0})})(),t("div",{className:E,children:[n&&(p.isValidElement(n)?n:i("h2",{className:w,role:"presentation",children:n})),a&&(p.isValidElement(a)?a:i(n?g.BodyMD:g.BodyBL,{className:C,children:a}))]})]}),z&&i(y,{className:T,styleType:"light",onClick:z.onClick,sizeType:"small",children:z.label})]}),t(b,{className:B,onClick:F,children:[i(v,{role:"presentation",children:"Close notification"}),i(r,{"aria-hidden":!0})]})]}))};export{O as Toast};
 //# sourceMappingURL=toast.js.map

package/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../../src/toast/toast.tsx"],"sourcesContent":["import {\n    CrossIcon,\n    ExclamationCircleFillIcon,\n    ExclamationTriangleFillIcon,\n    ICircleFillIcon,\n    TickCircleFillIcon,\n} from \"@lifesg/react-icons\";\nimport { easings, useSpring } from \"@react-spring/web\";\nimport React, { useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    ActionButton,\n    ContentWrapper,\n    DescriptionBL,\n    DescriptionMD,\n    DismissButton,\n    TextContainer,\n    TextIconWrapper,\n    Title,\n    Wrapper,\n} from \"./toast.styles\";\nimport type { ToastProps } from \"./types\";\n\nconst DEFAULT_AUTO_DISMISS_TIME = 4000;\n\nconst TOAST_ICON_MAP = {\n    success: TickCircleFillIcon,\n    warning: ExclamationTriangleFillIcon,\n    error: ExclamationCircleFillIcon,\n    info: ICircleFillIcon,\n};\n\nexport const Toast = ({\n    type = \"success\",\n    title,\n    label,\n    autoDismiss,\n    autoDismissTime = DEFAULT_AUTO_DISMISS_TIME,\n    onDismiss,\n    fixed = true,\n    actionButton,\n    ...otherProps\n}: ToastProps) => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const toastRef = useRef<HTMLDivElement>(null);\n    const [isVisible, setVisible] = useState<boolean>(false);\n\n    const theme = useContext(ThemeContext);\n\n    const mobileBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(true);\n    }, []);\n\n    useEffect(() => {\n        if (!autoDismiss) return;\n\n        const timeout = setTimeout(() => {\n            setVisible(false);\n        }, autoDismissTime);\n\n        return () => clearTimeout(timeout);\n    }, [autoDismiss]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n                event.key === \"Escape\" &&\n                toastRef.current?.contains(document.activeElement)\n            ) {\n                handleDismiss();\n            }\n        };\n\n        document.addEventListener(\"keydown\", handleKeyDown);\n        return () => {\n            document.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = () => {\n        setVisible(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const transitions = useSpring({\n        opacity: isVisible ? 1 : 0,\n        transform: isVisible\n            ? isMobile\n                ? `translateY(0%)`\n                : `translateX(0%)`\n            : isMobile\n            ? `translateY(-1500%)`\n            : `translateX(150%)`,\n        config: {\n            easing: easings.easeInOutQuart,\n            duration: 1000,\n        },\n        onRest: () => {\n            if (!isVisible) onDismiss?.();\n        },\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        const Icon = TOAST_ICON_MAP[type];\n        return Icon && <Icon aria-hidden />;\n    };\n\n    const renderTitle = () => {\n        if (React.isValidElement(title)) {\n            return title;\n        } else {\n            return (\n                <Title $type={type} role=\"presentation\">\n                    {title}\n                </Title>\n            );\n        }\n    };\n\n    const renderDesc = () => {\n        if (React.isValidElement(label)) {\n            return label;\n        } else if (title) {\n            return <DescriptionMD $type={type}>{label}</DescriptionMD>;\n        } else {\n            return <DescriptionBL $type={type}>{label}</DescriptionBL>;\n        }\n    };\n\n    return (\n        <Wrapper\n            ref={toastRef}\n            style={transitions}\n            $type={type}\n            $fixed={fixed}\n            role=\"alert\"\n            inert={inertValue(!isVisible)}\n            {...otherProps}\n        >\n            <VisuallyHidden>{type}</VisuallyHidden>\n            <ContentWrapper>\n                <TextIconWrapper $type={type}>\n                    {renderIcon()}\n                    <TextContainer>\n                        {title && renderTitle()}\n                        {label && renderDesc()}\n                    </TextContainer>\n                </TextIconWrapper>\n\n                {actionButton && (\n                    <ActionButton\n                        styleType=\"light\"\n                        onClick={actionButton.onClick}\n                    >\n                        {actionButton.label}\n                    </ActionButton>\n                )}\n            </ContentWrapper>\n            <DismissButton $type={type} onClick={handleDismiss}>\n                <VisuallyHidden role=\"presentation\">\n                    Close notification\n                </VisuallyHidden>\n                <CrossIcon aria-hidden />\n            </DismissButton>\n        </Wrapper>\n    );\n};\n"],"names":["DEFAULT_AUTO_DISMISS_TIME","TOAST_ICON_MAP","success","TickCircleFillIcon","warning","ExclamationTriangleFillIcon","error","ExclamationCircleFillIcon","info","ICircleFillIcon","Toast","_a","type","title","label","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton","otherProps","__rest","toastRef","useRef","isVisible","setVisible","useState","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","useEffect","timeout","setTimeout","clearTimeout","handleKeyDown","event","key","current","contains","document","activeElement","handleDismiss","addEventListener","removeEventListener","transitions","useSpring","opacity","transform","config","easing","easings","easeInOutQuart","duration","onRest","_jsxs","Wrapper","Object","assign","ref","style","$type","$fixed","role","inert","inertValue","children","_jsx","VisuallyHidden","ContentWrapper","TextIconWrapper","Icon","renderIcon","TextContainer","React","isValidElement","Title","DescriptionMD","DescriptionBL","ActionButton","styleType","onClick","DismissButton","CrossIcon"],"mappings":"w0BA2BA,MAAMA,EAA4B,IAE5BC,EAAiB,CACnBC,QAASC,EACTC,QAASC,EACTC,MAAOC,EACPC,KAAMC,GAGGC,EAASC,QAAAC,KAClBA,EAAO,UAASC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,gBACXA,EAAkBhB,EAAyBiB,UAC3CA,EAASC,MACTA,GAAQ,EAAIC,aACZA,GAAYR,EACTS,EAAUC,EAAAV,EATK,CAAA,OAAA,QAAA,QAAA,cAAA,kBAAA,YAAA,QAAA,iBAclB,MAAMW,EAAWC,EAAuB,OACjCC,EAAWC,GAAcC,GAAkB,GAE5CC,EAAQC,EAAWC,GAEnBC,EAAmBC,EAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,cAAc,CAC3BC,SAAUJ,IAMdK,GAAU,KACNV,GAAW,EAAK,GACjB,IAEHU,GAAU,KACN,IAAKpB,EAAa,OAElB,MAAMqB,EAAUC,YAAW,KACvBZ,GAAW,EAAM,GAClBT,GAEH,MAAO,IAAMsB,aAAaF,EAAQ,GACnC,CAACrB,IAEJoB,GAAU,KACN,MAAMI,EAAiBC,UAED,WAAdA,EAAMC,MACU,QAAhB9B,EAAAW,EAASoB,eAAO,IAAA/B,OAAA,EAAAA,EAAEgC,SAASC,SAASC,iBAEpCC,GACJ,EAIJ,OADAF,SAASG,iBAAiB,UAAWR,GAC9B,KACHK,SAASI,oBAAoB,UAAWT,EAAc,CACzD,GACF,IAKH,MAAMO,EAAgB,KAClBrB,GAAW,EAAM,EAMfwB,EAAcC,EAAU,CAC1BC,QAAS3B,EAAY,EAAI,EACzB4B,UAAW5B,EACLQ,EACI,iBACA,iBACJA,EACA,qBACA,mBACNqB,OAAQ,CACJC,OAAQC,EAAQC,eAChBC,SAAU,KAEdC,OAAQ,KACClC,GAAWP,SAAAA,GAAa,IAkCrC,OACI0C,EAACC,EAAOC,OAAAC,OAAA,CACJC,IAAKzC,EACL0C,MAAOf,EAAWgB,MACXrD,EAAIsD,OACHhD,EACRiD,KAAK,QACLC,MAAOC,GAAY7C,IACfJ,EAAU,CAAAkD,SAAA,CAEdC,EAACC,EAAc,CAAAF,SAAE1D,IACjB+C,EAACc,EAAc,CAAAH,SAAA,CACXX,EAACe,EAAe,CAAAT,MAAQrD,EAAI0D,SAAA,CAvCrB,MACf,MAAMK,EAAO1E,EAAeW,GAC5B,OAAO+D,GAAQJ,EAACI,qBAAmB,EAsCtBC,GACDjB,EAACkB,EAAa,CAAAP,SAAA,CACTzD,IApCbiE,EAAMC,eAAelE,GACdA,EAGH0D,EAACS,EAAK,CAAAf,MAAQrD,EAAMuD,KAAK,eAAcG,SAClCzD,KAgCIC,IAzBbgE,EAAMC,eAAejE,GACdA,EAEAyD,EADA1D,EACCoE,EAEAC,EAFa,CAAAjB,MAAQrD,EAAI0D,SAAGxD,WA0B/BK,GACGoD,EAACY,EAAY,CACTC,UAAU,QACVC,QAASlE,EAAakE,QAAOf,SAE5BnD,EAAaL,WAI1B6C,EAAC2B,EAAa,CAAArB,MAAQrD,EAAMyE,QAASvC,EAAawB,SAAA,CAC9CC,EAACC,GAAeL,KAAK,eAAcG,SAAA,uBAGnCC,EAACgB,EAAS,CAAA,eAAA,UAER"}
+{"version":3,"file":"toast.js","sources":["../../src/toast/toast.tsx"],"sourcesContent":["import {\n    CrossIcon,\n    ExclamationCircleFillIcon,\n    ExclamationTriangleFillIcon,\n    ICircleFillIcon,\n    TickCircleFillIcon,\n} from \"@lifesg/react-icons\";\nimport { animated, easings, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./toast.styles\";\nimport type { ToastProps } from \"./types\";\n\nconst DEFAULT_AUTO_DISMISS_TIME = 4000;\nconst EASING_DURATION = 1000;\n\nconst TOAST_ICON_MAP = {\n    success: TickCircleFillIcon,\n    warning: ExclamationTriangleFillIcon,\n    error: ExclamationCircleFillIcon,\n    info: ICircleFillIcon,\n};\n\n// @catalog\n/**\n * A brief notification that appears on screen to provide feedback about an\n * operation or event.\n *\n * Use `Toast` to surface status messages without interrupting the user's workflow.\n * @keywords alert, feedback, notification, snackbar\n */\nexport const Toast = ({\n    type = \"success\",\n    title,\n    label,\n    className,\n    autoDismiss,\n    autoDismissTime = DEFAULT_AUTO_DISMISS_TIME,\n    onDismiss,\n    fixed = true,\n    actionButton,\n    ...otherProps\n}: ToastProps) => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const toastRef = useRef<HTMLDivElement>(null);\n    const [isVisible, setVisible] = useState<boolean>(false);\n\n    const isMobile = useMaxWidthMediaQuery(\"lg\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(true);\n    }, []);\n\n    useEffect(() => {\n        if (!autoDismiss) return;\n\n        const timeout = setTimeout(() => {\n            setVisible(false);\n        }, autoDismissTime);\n\n        return () => clearTimeout(timeout);\n    }, [autoDismiss, autoDismissTime]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n                event.key === \"Escape\" &&\n                toastRef.current?.contains(document.activeElement)\n            ) {\n                handleDismiss();\n            }\n        };\n\n        document.addEventListener(\"keydown\", handleKeyDown);\n        return () => {\n            document.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = () => {\n        setVisible(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const transitions = useSpring({\n        opacity: isVisible ? 1 : 0,\n        transform: isVisible\n            ? isMobile\n                ? `translateY(0%)`\n                : `translateX(0%)`\n            : isMobile\n            ? `translateY(-1500%)`\n            : `translateX(150%)`,\n        config: {\n            easing: easings.easeInOutQuart,\n            duration: EASING_DURATION,\n        },\n        onRest: () => {\n            if (!isVisible) onDismiss?.();\n        },\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        const Icon = TOAST_ICON_MAP[type];\n        return Icon && <Icon aria-hidden />;\n    };\n\n    const renderTitle = () => {\n        if (React.isValidElement(title)) {\n            return title;\n        } else {\n            return (\n                <h2 className={styles.title} role=\"presentation\">\n                    {title}\n                </h2>\n            );\n        }\n    };\n\n    const renderDesc = () => {\n        if (React.isValidElement(label)) {\n            return label;\n        } else if (title) {\n            return (\n                <Typography.BodyMD className={styles.description}>\n                    {label}\n                </Typography.BodyMD>\n            );\n        } else {\n            return (\n                <Typography.BodyBL className={styles.description}>\n                    {label}\n                </Typography.BodyBL>\n            );\n        }\n    };\n\n    return (\n        <animated.div\n            ref={toastRef}\n            style={transitions}\n            className={clsx(styles.wrapper, className)}\n            data-type={type}\n            data-fixed={fixed}\n            role=\"alert\"\n            inert={inertValue(!isVisible)}\n            {...otherProps}\n        >\n            <VisuallyHidden>{type}</VisuallyHidden>\n            <div className={styles.contentWrapper}>\n                <div className={styles.textIconWrapper} data-type={type}>\n                    {renderIcon()}\n                    <div className={styles.textContainer}>\n                        {title && renderTitle()}\n                        {label && renderDesc()}\n                    </div>\n                </div>\n\n                {actionButton && (\n                    <Button\n                        className={styles.actionButton}\n                        styleType=\"light\"\n                        onClick={actionButton.onClick}\n                        sizeType=\"small\"\n                    >\n                        {actionButton.label}\n                    </Button>\n                )}\n            </div>\n            <ClickableIcon\n                className={styles.dismissButton}\n                onClick={handleDismiss}\n            >\n                <VisuallyHidden role=\"presentation\">\n                    Close notification\n                </VisuallyHidden>\n                <CrossIcon aria-hidden />\n            </ClickableIcon>\n        </animated.div>\n    );\n};\n"],"names":["DEFAULT_AUTO_DISMISS_TIME","TOAST_ICON_MAP","success","TickCircleFillIcon","warning","ExclamationTriangleFillIcon","error","ExclamationCircleFillIcon","info","ICircleFillIcon","Toast","_a","type","title","label","className","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton","otherProps","__rest","toastRef","useRef","isVisible","setVisible","useState","isMobile","useMaxWidthMediaQuery","useEffect","timeout","setTimeout","clearTimeout","handleKeyDown","event","key","current","contains","document","activeElement","handleDismiss","addEventListener","removeEventListener","transitions","useSpring","opacity","transform","config","easing","easings","easeInOutQuart","duration","onRest","_jsxs","animated","div","Object","assign","ref","style","clsx","styles.wrapper","role","inert","inertValue","children","_jsx","VisuallyHidden","styles.contentWrapper","styles.textIconWrapper","Icon","renderIcon","styles.textContainer","React","isValidElement","styles.title","Typography","BodyMD","BodyBL","styles.description","Button","styles.actionButton","styleType","onClick","sizeType","ClickableIcon","styles.dismissButton","CrossIcon"],"mappings":"+xCAmBA,MAAMA,EAA4B,IAG5BC,EAAiB,CACnBC,QAASC,EACTC,QAASC,EACTC,MAAOC,EACPC,KAAMC,GAWGC,EAASC,IAAA,IAAAC,KAClBA,EAAO,gBACPC,EAAKC,MACLA,EAAKC,UACLA,EAASC,YACTA,EAAWC,gBACXA,EAAkBjB,EAAyBkB,UAC3CA,EAASC,MACTA,GAAQ,EAAIC,aACZA,GAAYT,EACTU,EAAUC,EAAAX,EAVK,CAAA,OAAA,QAAA,QAAA,YAAA,cAAA,kBAAA,YAAA,QAAA,iBAelB,MAAMY,EAAWC,EAAuB,OACjCC,EAAWC,GAAcC,GAAkB,GAE5CC,EAAWC,EAAsB,MAKvCC,GAAU,KACNJ,GAAW,EAAK,GACjB,IAEHI,GAAU,KACN,IAAKd,EAAa,OAElB,MAAMe,EAAUC,YAAW,KACvBN,GAAW,EAAM,GAClBT,GAEH,MAAO,IAAMgB,aAAaF,EAAQ,GACnC,CAACf,EAAaC,IAEjBa,GAAU,KACN,MAAMI,EAAiBC,UAED,WAAdA,EAAMC,MACU,QAAhBzB,EAAAY,EAASc,eAAO,IAAA1B,OAAA,EAAAA,EAAE2B,SAASC,SAASC,iBAEpCC,GACJ,EAIJ,OADAF,SAASG,iBAAiB,UAAWR,GAC9B,KACHK,SAASI,oBAAoB,UAAWT,EAAc,CACzD,GACF,IAKH,MAAMO,EAAgB,KAClBf,GAAW,EAAM,EAMfkB,EAAcC,EAAU,CAC1BC,QAASrB,EAAY,EAAI,EACzBsB,UAAWtB,EACLG,EACI,iBACA,iBACJA,EACA,qBACA,mBACNoB,OAAQ,CACJC,OAAQC,EAAQC,eAChBC,SA3FY,KA6FhBC,OAAQ,KACC5B,GAAWP,SAAAA,GAAa,IA0CrC,OACIoC,EAACC,EAASC,IAAGC,OAAAC,OAAA,CACTC,IAAKpC,EACLqC,MAAOhB,EACP7B,UAAW8C,EAAKC,EAAgB/C,GAAU,YAC/BH,EAAI,aACHO,EACZ4C,KAAK,QACLC,MAAOC,GAAYxC,IACfJ,EAAU,CAAA6C,SAAA,CAEdC,EAACC,EAAc,CAAAF,SAAEtD,IACjB0C,EAAA,MAAA,CAAKvC,UAAWsD,EAAqBH,SAAA,CACjCZ,EAAA,MAAA,CAAKvC,UAAWuD,EAAsB,YAAa1D,EAAIsD,SAAA,CAhDhD,MACf,MAAMK,EAAOtE,EAAeW,GAC5B,OAAO2D,GAAQJ,EAACI,qBAAmB,EA+CtBC,GACDlB,EAAA,MAAA,CAAKvC,UAAW0D,EAAoBP,SAAA,CAC/BrD,IA7Cb6D,EAAMC,eAAe9D,GACdA,EAGHsD,EAAA,KAAA,CAAIpD,UAAW6D,EAAcb,KAAK,eAAcG,SAC3CrD,KAyCIC,IAlCb4D,EAAMC,eAAe7D,GACdA,EAGHqD,EAFGtD,EAEFgE,EAAWC,OAMXD,EAAWE,OANM,CAAChE,UAAWiE,EAAkBd,SAC3CpD,WAiCJM,GACG+C,EAACc,EAAM,CACHlE,UAAWmE,EACXC,UAAU,QACVC,QAAShE,EAAagE,QACtBC,SAAS,QAAOnB,SAEf9C,EAAaN,WAI1BwC,EAACgC,GACGvE,UAAWwE,EACXH,QAAS3C,EAAayB,SAAA,CAEtBC,EAACC,EAAc,CAACL,KAAK,eAAcG,SAAA,uBAGnCC,EAACqB,EAAS,CAAA,eAAA,UAEH"}

package/toast/toast.styles.d.ts

@@ -1,19 +1,8 @@
-import type { ToastType } from "./types";
-interface StyleProps {
-    $type: ToastType;
-    $fixed?: boolean | undefined;
-}
-export declare const Wrapper: import("@react-spring/web").AnimatedComponent<import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string>;
-export declare const ContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TextIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const 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 Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, StyleProps>> & string;
-export declare const DescriptionMD: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, StyleProps>> & string;
-export declare const DescriptionBL: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, StyleProps>> & string;
-export declare const ActionButton: 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 DismissButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, StyleProps>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const contentWrapper: import("@linaria/core").LinariaClassName;
+export declare const textIconWrapper: import("@linaria/core").LinariaClassName;
+export declare const textContainer: import("@linaria/core").LinariaClassName;
+export declare const title: import("@linaria/core").LinariaClassName;
+export declare const description: import("@linaria/core").LinariaClassName;
+export declare const actionButton: import("@linaria/core").LinariaClassName;
+export declare const dismissButton: import("@linaria/core").LinariaClassName;

package/toast/toast.styles.js

@@ -1,99 +1,2 @@
-import{animated as e}from"@react-spring/web";import r,{css as o}from"styled-components";import{Button as i}from"../button/button.js";import{ClickableIcon as t}from"../shared/clickable-icon/clickable-icon.js";import{Typography as n}from"../typography/index.js";import{V3_Radius as d,V3_MediaQuery as a,V3_Font as c,V3_Colour as s}from"../v3_theme/index.js";const l=e=>{const r={success:{Background:"bg-success",Border:"border-success",Text:"text-success",Icon:"icon-success"},warning:{Background:"bg-warning",Border:"border-warning",Text:"text-warning",Icon:"icon-warning"},error:{Background:"bg-error",Border:"border-error",Text:"text-error",Icon:"icon-error"},info:{Background:"bg-info",Border:"border-info",Text:"text-info",Icon:"icon-info"}}[e.$type];return{Background:s[r.Background],Border:s[r.Border],Text:s[r.Text],Icon:s[r.Icon]}},g=e(r.div`
-    display: flex;
-    flex-direction: row;
-    position: ${e=>e.$fixed?"fixed":"relative"};
-    margin: ${e=>e.$fixed?"1rem":0};
-    top: 0;
-    right: 0;
-    padding: 1rem;
-    border-radius: ${d.md};
-    z-index: 10;
-    align-items: center;
-    gap: 2rem;
-
-    ${a.MaxWidth.lg} {
-        left: 0;
-    }
-
-    ${e=>o`
-            background: ${l(e).Background};
-            border: 1px solid ${l(e).Border};
-            color: ${l(e).Text};
-        `};
-`),m=r.div`
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-    flex: 1;
-    justify-content: space-between;
-
-    ${a.MaxWidth.sm} {
-        display: flex;
-        align-items: flex-start;
-        flex-direction: column;
-        gap: 0.75rem;
-    }
-`,x=r.div`
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-
-    ${e=>o`
-            & > svg {
-                flex-shrink: 0;
-                width: 1.5rem;
-                height: 1.5rem;
-                margin-top: 0.0625rem;
-                margin-right: 0.5rem;
-                color: ${l(e).Icon};
-            }
-        `};
-`,f=r.div`
-    display: flex;
-    flex-direction: column;
-`,p=r.h2`
-    display: flex;
-    ${c["body-baseline-semibold"]}
-
-    ${e=>o`
-            color: ${l(e).Text};
-        `}
-`,$=r(n.BodyMD)`
-    ${e=>o`
-            color: ${l(e).Text};
-        `}
-`,h=r(n.BodyBL)`
-    ${e=>o`
-            color: ${l(e).Text};
-        `}
-`,u=r(i.Small)`
-    align-self: center;
-    margin-left: auto;
-    height: auto;
-    width: fit-content;
-    flex-shrink: 0;
-
-    ${a.MaxWidth.sm} {
-        align-self: flex-start;
-        margin-left: 2rem;
-    }
-`,b=r(t)`
-    padding: 0.75rem;
-    margin: -0.75rem;
-    align-self: stretch;
-
-    ${e=>o`
-            svg {
-                width: 1.5rem;
-                height: 1.5rem;
-                color: ${l(e).Text};
-            }
-            &:hover {
-                background: transparent;
-            }
-            ${a.MaxWidth.sm} {
-                align-self: center;
-            }
-        `};
-`;export{u as ActionButton,m as ContentWrapper,h as DescriptionBL,$ as DescriptionMD,b as DismissButton,f as TextContainer,x as TextIconWrapper,p as Title,g as Wrapper};
+import"./toast.styles_57j3lf.css";const t="wqf508q",s="c1ll5mdk",l="t1mt05g8",o="t1j1n9on",e="t1see4ey",m="dmmbr7j",d="a10z10pl",j="d1jd4l4i";export{d as actionButton,s as contentWrapper,m as description,j as dismissButton,o as textContainer,l as textIconWrapper,e as title,t as wrapper};
 //# sourceMappingURL=toast.styles.js.map

package/toast/toast.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.styles.js","sources":["../../src/toast/toast.styles.tsx"],"sourcesContent":["import { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport { V3_Colour, V3_Font, V3_MediaQuery, V3_Radius } from \"../v3_theme\";\nimport type { V3_SemanticColourSet } from \"../v3_theme/types\";\nimport type { ToastType } from \"./types\";\n\n//=============================================================================\n// STYLE INTERFACE\n//=============================================================================\ninterface StyleProps {\n    $type: ToastType;\n    $fixed?: boolean | undefined;\n}\n\nconst getValidationColorAttributes = (props: StyleProps) => {\n    const type = props.$type;\n\n    const typeMapping: Record<\n        ToastType,\n        Record<string, keyof V3_SemanticColourSet>\n    > = {\n        success: {\n            Background: \"bg-success\",\n            Border: \"border-success\",\n            Text: \"text-success\",\n            Icon: \"icon-success\",\n        },\n        warning: {\n            Background: \"bg-warning\",\n            Border: \"border-warning\",\n            Text: \"text-warning\",\n            Icon: \"icon-warning\",\n        },\n        error: {\n            Background: \"bg-error\",\n            Border: \"border-error\",\n            Text: \"text-error\",\n            Icon: \"icon-error\",\n        },\n        info: {\n            Background: \"bg-info\",\n            Border: \"border-info\",\n            Text: \"text-info\",\n            Icon: \"icon-info\",\n        },\n    };\n\n    const selectedTypeMapping = typeMapping[type];\n\n    return {\n        Background: V3_Colour[selectedTypeMapping.Background],\n        Border: V3_Colour[selectedTypeMapping.Border],\n        Text: V3_Colour[selectedTypeMapping.Text],\n        Icon: V3_Colour[selectedTypeMapping.Icon],\n    };\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = animated(styled.div<StyleProps>`\n    display: flex;\n    flex-direction: row;\n    position: ${(props) => (props.$fixed ? \"fixed\" : \"relative\")};\n    margin: ${(props) => (props.$fixed ? \"1rem\" : 0)};\n    top: 0;\n    right: 0;\n    padding: 1rem;\n    border-radius: ${V3_Radius[\"md\"]};\n    z-index: 10;\n    align-items: center;\n    gap: 2rem;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        left: 0;\n    }\n\n    ${(props) => {\n        return css`\n            background: ${getValidationColorAttributes(props).Background};\n            border: 1px solid ${getValidationColorAttributes(props).Border};\n            color: ${getValidationColorAttributes(props).Text};\n        `;\n    }};\n`);\n\nexport const ContentWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    gap: 2rem;\n    flex: 1;\n    justify-content: space-between;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        display: flex;\n        align-items: flex-start;\n        flex-direction: column;\n        gap: 0.75rem;\n    }\n`;\n\nexport const TextIconWrapper = styled.div<StyleProps>`\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n\n    ${(props) => {\n        return css`\n            & > svg {\n                flex-shrink: 0;\n                width: 1.5rem;\n                height: 1.5rem;\n                margin-top: 0.0625rem;\n                margin-right: 0.5rem;\n                color: ${getValidationColorAttributes(props).Icon};\n            }\n        `;\n    }};\n`;\n\nexport const TextContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const Title = styled.h2<StyleProps>`\n    display: flex;\n    ${V3_Font[\"body-baseline-semibold\"]}\n\n    ${(props) => {\n        return css`\n            color: ${getValidationColorAttributes(props).Text};\n        `;\n    }}\n`;\n\nexport const DescriptionMD = styled(Typography.BodyMD)<StyleProps>`\n    ${(props) => {\n        return css`\n            color: ${getValidationColorAttributes(props).Text};\n        `;\n    }}\n`;\n\nexport const DescriptionBL = styled(Typography.BodyBL)<StyleProps>`\n    ${(props) => {\n        return css`\n            color: ${getValidationColorAttributes(props).Text};\n        `;\n    }}\n`;\n\nexport const ActionButton = styled(Button.Small)`\n    align-self: center;\n    margin-left: auto;\n    height: auto;\n    width: fit-content;\n    flex-shrink: 0;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        align-self: flex-start;\n        margin-left: 2rem;\n    }\n`;\n\nexport const DismissButton = styled(ClickableIcon)<StyleProps>`\n    padding: 0.75rem;\n    margin: -0.75rem;\n    align-self: stretch;\n\n    ${(props) => {\n        return css`\n            svg {\n                width: 1.5rem;\n                height: 1.5rem;\n                color: ${getValidationColorAttributes(props).Text};\n            }\n            &:hover {\n                background: transparent;\n            }\n            ${V3_MediaQuery.MaxWidth.sm} {\n                align-self: center;\n            }\n        `;\n    }};\n`;\n"],"names":["getValidationColorAttributes","props","selectedTypeMapping","success","Background","Border","Text","Icon","warning","error","info","$type","V3_Colour","Wrapper","animated","styled","div","$fixed","V3_Radius","V3_MediaQuery","MaxWidth","lg","css","ContentWrapper","sm","TextIconWrapper","TextContainer","Title","h2","V3_Font","DescriptionMD","Typography","BodyMD","DescriptionBL","BodyBL","ActionButton","Button","Small","DismissButton","ClickableIcon"],"mappings":"oWAkBA,MAAMA,EAAgCC,IAClC,MAgCMC,EA3BF,CACAC,QAAS,CACLC,WAAY,aACZC,OAAQ,iBACRC,KAAM,eACNC,KAAM,gBAEVC,QAAS,CACLJ,WAAY,aACZC,OAAQ,iBACRC,KAAM,eACNC,KAAM,gBAEVE,MAAO,CACHL,WAAY,WACZC,OAAQ,eACRC,KAAM,aACNC,KAAM,cAEVG,KAAM,CACFN,WAAY,UACZC,OAAQ,cACRC,KAAM,YACNC,KAAM,cA5BDN,EAAMU,OAkCnB,MAAO,CACHP,WAAYQ,EAAUV,EAAoBE,YAC1CC,OAAQO,EAAUV,EAAoBG,QACtCC,KAAMM,EAAUV,EAAoBI,MACpCC,KAAMK,EAAUV,EAAoBK,MACvC,EAMQM,EAAUC,EAASC,EAAOC,GAAe;;;gBAGrCf,GAAWA,EAAMgB,OAAS,QAAU;cACtChB,GAAWA,EAAMgB,OAAS,OAAS;;;;qBAI7BC,EAAc;;;;;MAK7BC,EAAcC,SAASC;;;;MAItBpB,GACQqB,CAAG;0BACQtB,EAA6BC,GAAOG;gCAC9BJ,EAA6BC,GAAOI;qBAC/CL,EAA6BC,GAAOK;;GAK5CiB,EAAiBR,EAAOC,GAAG;;;;;;;MAOlCG,EAAcC,SAASI;;;;;;EAQhBC,EAAkBV,EAAOC,GAAe;;;;;MAK9Cf,GACQqB,CAAG;;;;;;;yBAOOtB,EAA6BC,GAAOM;;;EAMhDmB,EAAgBX,EAAOC,GAAG;;;EAK1BW,EAAQZ,EAAOa,EAAc;;MAEpCC,EAAQ;;MAEP5B,GACQqB,CAAG;qBACGtB,EAA6BC,GAAOK;;EAK5CwB,EAAgBf,EAAOgB,EAAWC,OAAmB;MAC3D/B,GACQqB,CAAG;qBACGtB,EAA6BC,GAAOK;;EAK5C2B,EAAgBlB,EAAOgB,EAAWG,OAAmB;MAC3DjC,GACQqB,CAAG;qBACGtB,EAA6BC,GAAOK;;EAK5C6B,EAAepB,EAAOqB,EAAOC,MAAM;;;;;;;MAO1ClB,EAAcC,SAASI;;;;EAMhBc,EAAgBvB,EAAOwB,EAA0B;;;;;MAKvDtC,GACQqB,CAAG;;;;yBAIOtB,EAA6BC,GAAOK;;;;;cAK/Ca,EAAcC,SAASI;;;;"}
+{"version":3,"file":"toast.styles.js","sources":["../../src/toast/toast.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\n\nexport const wrapper = css`\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    margin: 0;\n    top: 0;\n    right: 0;\n    padding: 1rem;\n    border-radius: ${Radius[\"md\"]};\n    z-index: 10;\n    align-items: center;\n    gap: 2rem;\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n    }\n\n    &[data-fixed=\"true\"] {\n        position: fixed;\n        margin: 1rem;\n    }\n\n    &[data-type=\"success\"] {\n        background: ${Colour[\"bg-success\"]};\n        border: 1px solid ${Colour[\"border-success\"]};\n        color: ${Colour[\"text-success\"]};\n    }\n\n    &[data-type=\"warning\"] {\n        background: ${Colour[\"bg-warning\"]};\n        border: 1px solid ${Colour[\"border-warning\"]};\n        color: ${Colour[\"text-warning\"]};\n    }\n\n    &[data-type=\"error\"] {\n        background: ${Colour[\"bg-error\"]};\n        border: 1px solid ${Colour[\"border-error\"]};\n        color: ${Colour[\"text-error\"]};\n    }\n\n    &[data-type=\"info\"] {\n        background: ${Colour[\"bg-info\"]};\n        border: 1px solid ${Colour[\"border-info\"]};\n        color: ${Colour[\"text-info\"]};\n    }\n`;\n\nexport const contentWrapper = css`\n    display: flex;\n    align-items: center;\n    gap: 2rem;\n    flex: 1;\n    justify-content: space-between;\n\n    ${MediaQuery.MaxWidth.sm} {\n        display: flex;\n        align-items: flex-start;\n        flex-direction: column;\n        gap: 0.75rem;\n    }\n`;\n\nexport const textIconWrapper = css`\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n\n    & > svg {\n        flex-shrink: 0;\n        width: 1.5rem;\n        height: 1.5rem;\n        margin-top: 0.0625rem;\n        margin-right: 0.5rem;\n    }\n\n    &[data-type=\"success\"] > svg {\n        color: ${Colour[\"icon-success\"]};\n    }\n\n    &[data-type=\"warning\"] > svg {\n        color: ${Colour[\"icon-warning\"]};\n    }\n\n    &[data-type=\"error\"] > svg {\n        color: ${Colour[\"icon-error\"]};\n    }\n\n    &[data-type=\"info\"] > svg {\n        color: ${Colour[\"icon-info\"]};\n    }\n`;\n\nexport const textContainer = css`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const title = css`\n    display: flex;\n    ${Font[\"body-baseline-semibold\"]}\n    color: inherit;\n`;\n\nexport const description = css`\n    color: inherit;\n`;\n\nexport const actionButton = css`\n    align-self: center;\n    margin-left: auto;\n    width: fit-content;\n    flex-shrink: 0;\n\n    ${MediaQuery.MaxWidth.sm} {\n        align-self: flex-start;\n        margin-left: 2rem;\n    }\n`;\n\nexport const dismissButton = css`\n    padding: 0.75rem;\n    margin: -0.75rem;\n    align-self: stretch;\n    color: inherit;\n\n    &:hover {\n        background: transparent;\n    }\n\n    svg {\n        width: 1.5rem;\n        height: 1.5rem;\n        color: inherit;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        align-self: center;\n    }\n`;\n"],"names":["wrapper","contentWrapper","textIconWrapper","textContainer","title","description","actionButton","dismissButton"],"mappings":"uDAIO,MAAMA,EAAO,UA+CPC,EAAc,WAedC,EAAe,WA8BfC,EAAa,WAKbC,EAAK,WAMLC,EAAW,UAIXC,EAAY,WAYZC,EAAa"}

package/toast/toast.styles_57j3lf.css

@@ -0,0 +1,8 @@
+@layer fds{.wqf508q{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:relative;margin:0;top:0;right:0;padding:1rem;border-radius:var(--fds-radius-md);z-index:10;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:2rem;}:where(body.fds-breakpoint-lg-max) .wqf508q{left:0;}.wqf508q[data-fixed="true"]{position:fixed;margin:1rem;}.wqf508q[data-type="success"]{background:var(--fds-colour-bg-success);border:1px solid var(--fds-colour-border-success);color:var(--fds-colour-text-success);}.wqf508q[data-type="warning"]{background:var(--fds-colour-bg-warning);border:1px solid var(--fds-colour-border-warning);color:var(--fds-colour-text-warning);}.wqf508q[data-type="error"]{background:var(--fds-colour-bg-error);border:1px solid var(--fds-colour-border-error);color:var(--fds-colour-text-error);}.wqf508q[data-type="info"]{background:var(--fds-colour-bg-info);border:1px solid var(--fds-colour-border-info);color:var(--fds-colour-text-info);}
+.c1ll5mdk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:2rem;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}:where(body.fds-breakpoint-sm-max) .c1ll5mdk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.75rem;}
+.t1mt05g8{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:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.t1mt05g8>svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:1.5rem;height:1.5rem;margin-top:0.0625rem;margin-right:0.5rem;}.t1mt05g8[data-type="success"]>svg{color:var(--fds-colour-icon-success);}.t1mt05g8[data-type="warning"]>svg{color:var(--fds-colour-icon-warning);}.t1mt05g8[data-type="error"]>svg{color:var(--fds-colour-icon-error);}.t1mt05g8[data-type="info"]>svg{color:var(--fds-colour-icon-info);}
+.t1j1n9on{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.t1see4ey{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:inherit;}
+.dmmbr7j{color:inherit;}
+.a10z10pl{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;margin-left:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-sm-max) .a10z10pl{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;margin-left:2rem;}
+.d1jd4l4i{padding:0.75rem;margin:-0.75rem;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;color:inherit;}.d1jd4l4i:hover{background:transparent;}.d1jd4l4i svg{width:1.5rem;height:1.5rem;color:inherit;}:where(body.fds-breakpoint-sm-max) .d1jd4l4i{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}}

package/toast/types.d.ts

@@ -1,25 +1,61 @@
 import type { HTMLAttributes } from "react";
 import type React from "react";
+/**
+ * Visual variant of the `Toast`, controlling the icon and color treatment.
+ */
 export type ToastType = "success" | "warning" | "error" | "info";
+/**
+ * Configuration for the optional action button rendered inside a `Toast`.
+ */
 export interface ToastActionButtonProps {
+    /** The label of the action button */
     label: string;
+    /** Called when the action button is clicked */
     onClick: () => void;
 }
+/**
+ * Props for the `Toast` notification component.
+ */
 export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-    /** The type of Toast. Control the display */
+    /**
+     * Visual variant controlling the icon and color treatment.
+     *
+     * @default "success"
+     */
     type: ToastType;
-    /** The content of the Toast. If a `title` is provided, this will act as a description label  */
+    /**
+     * Main text content of the toast. When `title` is also provided, rendered
+     * as a supporting description using a smaller typography style.
+     */
     label: string | React.ReactNode;
-    /** The title of the Toast  */
+    /**
+     * Optional heading displayed above `label`.
+     */
     title?: string | React.ReactNode | undefined;
-    /** If specified, the Toast will be automatically dismissed after 4 seconds */
+    /**
+     * When `true`, the toast dismisses itself automatically after
+     * `autoDismissTime` milliseconds.
+     */
     autoDismiss?: boolean | undefined;
-    /** Time until auto dismissal in milliseconds. Requires `autoDismiss` to be `true` */
+    /**
+     * Duration in milliseconds before the toast auto-dismisses.
+     * Only takes effect when `autoDismiss` is `true`.
+     *
+     * @default 4000
+     */
     autoDismissTime?: number | undefined;
-    /** If given, the function will be called when the Toast is dismissed */
+    /**
+     * Called after the dismissal animation completes.
+     */
     onDismiss?: (() => void) | undefined;
-    /** Specifies if Toast should be fixed to top. Defaults to true */
+    /**
+     * Pins the toast in a fixed position at the top of the viewport.
+     *
+     * @default true
+     */
     fixed?: boolean | undefined;
-    /** If given, will display an actionButton with the given title and run the given function upon clicking of the button */
+    /**
+     * Optional action button rendered alongside the toast content.
+     */
     actionButton?: ToastActionButtonProps | undefined;
 }

package/toggle/toggle-icon.d.ts

@@ -0,0 +1,9 @@
+export type ToggleIconType = "checkbox" | "radio" | "tick" | "cross";
+export interface ToggleIconProps {
+    type: ToggleIconType;
+    active?: boolean | undefined;
+    disabled?: boolean | undefined;
+    error?: boolean | undefined;
+    className?: string | undefined;
+}
+export declare const ToggleIcon: ({ type, active, disabled, className, error, }: ToggleIconProps) => import("react/jsx-runtime").JSX.Element;

package/toggle/toggle-icon.js

@@ -0,0 +1,2 @@
+import{jsx as r}from"react/jsx-runtime";import{CircleIcon as e}from"@lifesg/react-icons/circle";import{CircleDotIcon as i}from"@lifesg/react-icons/circle-dot";import{CrossIcon as c}from"@lifesg/react-icons/cross";import{SquareIcon as o}from"@lifesg/react-icons/square";import{SquareTickFillIcon as s}from"@lifesg/react-icons/square-tick-fill";import{TickIcon as t}from"@lifesg/react-icons/tick";import a from"clsx";import{wrapperBase as l,wrapperActiveDisabled as m,wrapperError as f,wrapperActive as n,wrapperDisabled as p}from"./toggle-icon.styles.js";const d=({type:d,active:g=!1,disabled:k,className:b,error:u})=>{let h;switch(d){case"checkbox":h=r(g?s:o,{});break;case"radio":h=r(g?i:e,{});break;case"tick":h=r(t,{});break;case"cross":h=r(c,{});break;default:h=null}return r("div",{className:a(l,g?k?m:u?f:n:k?p:void 0,b),"aria-hidden":!0,children:h})};export{d as ToggleIcon};
+//# sourceMappingURL=toggle-icon.js.map

package/toggle/toggle-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-icon.js","sources":["../../src/toggle/toggle-icon.tsx"],"sourcesContent":["import { CircleIcon } from \"@lifesg/react-icons/circle\";\nimport { CircleDotIcon } from \"@lifesg/react-icons/circle-dot\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { SquareIcon } from \"@lifesg/react-icons/square\";\nimport { SquareTickFillIcon } from \"@lifesg/react-icons/square-tick-fill\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\n\nimport * as styles from \"./toggle-icon.styles\";\n\nexport type ToggleIconType = \"checkbox\" | \"radio\" | \"tick\" | \"cross\";\n\nexport interface ToggleIconProps {\n    type: ToggleIconType;\n    active?: boolean | undefined;\n    disabled?: boolean | undefined;\n    error?: boolean | undefined;\n    className?: string | undefined;\n}\n\nexport const ToggleIcon = ({\n    type,\n    active = false,\n    disabled,\n    className,\n    error,\n}: ToggleIconProps) => {\n    let component: JSX.Element | null;\n\n    const getWrapperStateClass = () => {\n        if (active) {\n            if (disabled) {\n                return styles.wrapperActiveDisabled;\n            }\n\n            if (error) {\n                return styles.wrapperError;\n            }\n\n            return styles.wrapperActive;\n        }\n\n        if (disabled) {\n            return styles.wrapperDisabled;\n        }\n\n        return undefined;\n    };\n\n    switch (type) {\n        case \"checkbox\":\n            component = active ? <SquareTickFillIcon /> : <SquareIcon />;\n            break;\n        case \"radio\":\n            component = active ? <CircleDotIcon /> : <CircleIcon />;\n            break;\n        case \"tick\":\n            component = <TickIcon />;\n            break;\n        case \"cross\":\n            component = <CrossIcon />;\n            break;\n        default:\n            component = null;\n            break;\n    }\n\n    return (\n        <div\n            className={clsx(\n                styles.wrapperBase,\n                getWrapperStateClass(),\n                className\n            )}\n            aria-hidden\n        >\n            {component}\n        </div>\n    );\n};\n"],"names":["ToggleIcon","type","active","disabled","className","error","component","_jsx","SquareTickFillIcon","SquareIcon","CircleDotIcon","CircleIcon","TickIcon","CrossIcon","clsx","styles.wrapperBase","styles.wrapperActiveDisabled","styles.wrapperError","styles.wrapperActive","styles.wrapperDisabled"],"mappings":"0iBAoBO,MAAMA,EAAa,EACtBC,OACAC,UAAS,EACTC,WACAC,YACAC,YAEA,IAAIC,EAsBJ,OAAQL,GACJ,IAAK,WACDK,EAAqBC,EAATL,EAAUM,EAAyBC,EAAP,CAAA,GACxC,MACJ,IAAK,QACDH,EAAqBC,EAATL,EAAUQ,EAAoBC,EAAP,CAAA,GACnC,MACJ,IAAK,OACDL,EAAYC,EAACK,EAAQ,IACrB,MACJ,IAAK,QACDN,EAAYC,EAACM,EAAS,IACtB,MACJ,QACIP,EAAY,KAIpB,OACIC,EAAA,MAAA,CACIH,UAAWU,EACPC,EAxCJb,EACIC,EACOa,EAGPX,EACOY,EAGJC,EAGPf,EACOgB,OADX,EA8BQf,6BAIHE,GACC"}

package/toggle/toggle-icon.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const wrapperBase: import("@linaria/core").LinariaClassName;
+export declare const wrapperDisabled: import("@linaria/core").LinariaClassName;
+export declare const wrapperError: import("@linaria/core").LinariaClassName;
+export declare const wrapperActive: import("@linaria/core").LinariaClassName;
+export declare const wrapperActiveDisabled: import("@linaria/core").LinariaClassName;

package/toggle/toggle-icon.styles.js

@@ -0,0 +1,2 @@
+import"./toggle-icon.styles_o6dxr3.css";const o="wxufi5f",g="wo9gzbp",t="w1tlwg9n",w="w1d4lch6",e="w1egk5xb";export{w as wrapperActive,e as wrapperActiveDisabled,o as wrapperBase,g as wrapperDisabled,t as wrapperError};
+//# sourceMappingURL=toggle-icon.styles.js.map

package/toggle/toggle-icon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-icon.styles.js","sources":["../../src/toggle/toggle-icon.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const wrapperBase = css`\n    height: 1.625rem;\n    width: 1.625rem;\n    margin-right: 0.5rem;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-subtle\"]};\n\n    svg {\n        height: 100%;\n        width: 100%;\n    }\n`;\n\nexport const wrapperDisabled = css`\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\nexport const wrapperError = css`\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const wrapperActive = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const wrapperActiveDisabled = css`\n    color: ${Colour[\"icon-selected-disabled\"]};\n`;\n"],"names":["wrapperBase","wrapperDisabled","wrapperError","wrapperActive","wrapperActiveDisabled"],"mappings":"8DAOO,MAAMA,EAAW,UAaXC,EAAe,UAIfC,EAAY,WAIZC,EAAa,WAIbC,EAAqB"}

package/toggle/toggle-icon.styles_o6dxr3.css

@@ -0,0 +1,5 @@
+@layer fds{.wxufi5f{height:1.625rem;width:1.625rem;margin-right:0.5rem;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-subtle);}.wxufi5f svg{height:100%;width:100%;}
+.wo9gzbp{color:var(--fds-colour-icon-disabled-subtle);}
+.w1tlwg9n{color:var(--fds-colour-icon-error-strong);}
+.w1d4lch6{color:var(--fds-colour-icon-selected);}
+.w1egk5xb{color:var(--fds-colour-icon-selected-disabled);}}

package/toggle/toggle.d.ts

@@ -1,2 +1,9 @@
 import type { ToggleProps } from "./types";
-export declare const Toggle: ({ type, indicator, checked, styleType, children, childrenMaxLines, subLabel, disabled, error, name, id, className, compositeSection, removable, onRemove, "data-testid": testId, onChange, useContentWidth, "aria-describedby": ariaDescribedBy, ...otherProps }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A selectable control for checkbox and radio interaction patterns.
+ *
+ * Use `Toggle` to present a labeled option that the user can select or
+ * deselect.
+ * @keywords checkbox, choice, field, form, input, option, radio
+ */
+export declare const Toggle: ({ type, indicator, checked, styleType, children, childrenMaxLines, subLabel, disabled, error, name, id, className, compositeSection, removable, focusableWhenDisabled, useContentWidth, onRemove, onChange, "data-testid": testId, "aria-describedby": ariaDescribedBy, ...otherProps }: ToggleProps) => import("react/jsx-runtime").JSX.Element;

package/toggle/toggle.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as r,Fragment as t}from"react/jsx-runtime";import{ChevronDownIcon as d}from"@lifesg/react-icons/chevron-down";import{ChevronUpIcon as l}from"@lifesg/react-icons/chevron-up";import{useState as a,useMemo as n,useRef as o,useEffect as s}from"react";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as c}from"../util/simple-id-generator.js";import"../util/string-helper.js";import{Container as h,HeaderContainer as b,IndicatorLabelContainer as m,InputContainer as p,Input as u,TextContainer as $,Label as y,RemoveButton as g,StyledToggleIcon as v,SubLabel as f,Children as k,ErrorContainer as x,AlertContainer as j,ExpandButton as C,ErrorText as w,ErrorList as A}from"./toggle.styles.js";const L=L=>{var{type:T="checkbox",indicator:N,checked:R,styleType:S="default",children:W,childrenMaxLines:E,subLabel:F,disabled:I,error:M,name:P,id:_,className:q,compositeSection:B,removable:O,onRemove:z,"data-testid":D,onChange:G,useContentWidth:H,"aria-describedby":J}=L,K=e(L,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","onRemove","data-testid","onChange","useContentWidth","aria-describedby"]);const{collapsible:Q=!0,errors:U,children:V,initialExpanded:X}=B||{},[Y,Z]=a(R),[ee,ie]=a(!!X),re=n((()=>{const e=Array.isArray(U)&&(null==U?void 0:U.length)>0,i=!Array.isArray(U)&&!!U;return e||i}),[U]),[te]=a(c.generate()),de=_?`${_}`:`tg-${te}`,le=o(null);s((()=>{Z(R)}),[R]),s((()=>{Y&&ie(null==X||X)}),[Y]);const ae=e=>{if(!I){if(G)return void G(e);switch(T){case"checkbox":Z((e=>!e));break;case"radio":case"yes":case"no":Y||Z(!0)}}},ne=()=>{I||ie(!ee)},oe=()=>{I||!z||z()},se=()=>{var e;null===(e=null==le?void 0:le.current)||void 0===e||e.click()},ce=e=>{e.stopPropagation()},he=()=>{let e;switch(T){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=T}return r(v,{type:e,active:Y,disabled:I,$selected:Y,$disabled:I})},be=()=>{if(!F)return null;let e;return e="function"==typeof F?F():F,r(f,{"data-id":"toggle-sublabel",id:`${de}-sublabel`,"aria-hidden":!0,children:e})},me=e=>i(t,{children:[r(w,{weight:"semibold",$disabled:I,children:"Error"}),r(A,{$disabled:I,children:null==e?void 0:e.map(((e,i)=>r("li",{id:`${de}-error-list-item-${i}`,children:r(w,{weight:"semibold",$disabled:I,children:e})},i)))})]});return i(h,{$selected:Y,$disabled:I,className:q,$styleType:S,$error:M,$indicator:N,$useContentWidth:H,id:_,"data-testid":D,children:[(()=>{const e=["string"==typeof F?`${de}-sublabel`:null,J].filter(Boolean).join(" ")||void 0;return i(b,{id:`${de}-header-container`,$disabled:I,$error:M,$selected:Y,$indicator:N,$styleType:S,children:[r(m,{$addPadding:O,children:i(p,{id:`${de}-input-container`,onClick:se,children:[r(u,Object.assign({ref:le,name:P,id:`${de}-input`,type:"checkbox"===T?"checkbox":"radio","data-testid":"toggle-input",disabled:I,onChange:ae,onClick:ce,checked:Y,"aria-describedby":e},K)),N&&he(),i($,{$selected:Y,$disabled:I,children:[r(y,{htmlFor:`${de}-input`,"data-testid":"toggle-label",id:`${de}-label`,$maxLines:E,$selected:Y,children:W}),F&&be()]})]})}),O&&r(g,{type:"button",$disabled:I,onClick:oe,id:`${de}-remove-button`,children:"Remove"})]})})(),V&&i("div",{children:[(!Q||ee)&&r(k,{"data-id":"toggle-composite-children",$isFinalItem:!Q,$disabled:I,children:V}),Q&&!ee&&re&&r(x,{$disabled:I,onClick:ne,id:`${de}-error-alert`,children:r(j,{type:I?"description":"error",className:q,showIcon:!0,children:Array.isArray(U)?me(U):U})}),Q&&i(C,{$paddingTopRequired:!ee&&!re,disabled:I,onClick:ne,"data-testid":ee?"collapse-button":"expand-button",children:[ee?"Show less":"Show more",r(ee?l:d,{"aria-hidden":!0})]})]})]})};export{L as Toggle};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as r,Fragment as t}from"react/jsx-runtime";import{ChevronDownIcon as l}from"@lifesg/react-icons/chevron-down";import{ChevronUpIcon as o}from"@lifesg/react-icons/chevron-up";import a from"clsx";import{useState as s,useMemo as n,useRef as d,useEffect as c}from"react";import{Alert as m}from"../alert/alert.js";import{Markup as p}from"../markup/markup.js";import{TextList as h}from"../text-list/index.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{useApplyStyle as u}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as b}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as y}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as v,container as f,containerNoIndicator as g,containerUseContentWidth as k,headerContainer as j,inputContainer as x,input as N,disabledColorCursor as $,label as C,toggleLabelSelected as w,toggleLabelDefault as L,textContainer as A,indicatorLabelContainer as D,indicatorLabelContainerAddPadding as S,removeButton as M,borderError as W,borderNone as B,borderSelectedDisabled as R,borderDisabled as T,borderSelected as q,borderDefault as E,bgError as I,bgSelectedDisabled as _,bgSelected as z,bgDisabled as F,bgDefault as O,toggleContainerHoverError as P,toggleContainerHoverSelected as U,toggleContainerHoverDefault as G,subLabel as H,colorTextError as J,toggleTextContainerDisabledSelected as K,toggleTextContainerSelected as Q,colorTextDisabled as V,colorTextDefault as X,children as Y,childrenIsFinalItem as Z,alertContainer as ee,errorContainer as ie,expandButton as re,colorTextPrimary as te,expandButtonPaddingTopRequired as le}from"./toggle.styles.js";import{ToggleIcon as oe}from"./toggle-icon.js";const ae=ae=>{var{type:se="checkbox",indicator:ne,checked:de,styleType:ce="default",children:me,childrenMaxLines:pe,subLabel:he,disabled:ue,error:be,name:ye,id:ve,className:fe,compositeSection:ge,removable:ke,focusableWhenDisabled:je,useContentWidth:xe,onRemove:Ne,onChange:$e,"data-testid":Ce,"aria-describedby":we}=ae,Le=e(ae,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","data-testid","aria-describedby"]);const{collapsible:Ae=!0,errors:De,children:Se,initialExpanded:Me}=ge||{},[We,Be]=s(de),[Re,Te]=s(!!Me),qe=n((()=>{const e=Array.isArray(De)&&(null==De?void 0:De.length)>0,i=!Array.isArray(De)&&!!De;return e||i}),[De]),Ee=y(),Ie=ve?`${ve}`:`tg-${Ee}`,_e=d(null),ze=d(null);u(ze,{[v.label.desktopLineClamp]:null==(null==pe?void 0:pe.desktop)?null:`${pe.desktop}`,[v.label.tabletLineClamp]:null==(null==pe?void 0:pe.tablet)?null:`${pe.tablet}`,[v.label.mobileLineClamp]:null==(null==pe?void 0:pe.mobile)?null:`${pe.mobile}`});const Fe=!!ue&&!!je,Oe=!!ue&&!je,Pe=!!ue;c((()=>{Be(de)}),[de]),c((()=>{We&&Te(null==Me||Me)}),[We]);const Ue=e=>{if(Pe)e.preventDefault();else if($e)$e(e);else switch(se){case"checkbox":Be((e=>!e));break;case"radio":case"yes":case"no":We||Be(!0)}},Ge=()=>{ue||Te(!Re)},He=()=>{ue||!Ne||Ne()},Je=()=>{var e;null===(e=null==_e?void 0:_e.current)||void 0===e||e.click()},Ke=e=>{e.stopPropagation()},Qe=()=>{let e;switch(se){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=se}return r(oe,{type:e,active:We,disabled:ue,error:be})},Ve=()=>{if(!he)return null;let e;return e="function"==typeof he?he():he,r("div",{"data-id":"toggle-sublabel",id:`${Ie}-sublabel`,"aria-hidden":!0,className:H,children:e})},Xe=e=>{const l=a(J,ue&&V);return i(t,{children:[r(b.BodyMD,{weight:"semibold",className:l,children:"Error"}),r(h.Ul,{className:l,children:null==e?void 0:e.map(((e,i)=>r("li",{id:`${Ie}-error-list-item-${i}`,children:r(b.BodyMD,{weight:"semibold",className:l,children:e})},i)))})]})};return i("div",{className:a(f,!We&&be?W:"no-border"===ce?B:We&&ue?R:ue?T:be?W:We?q:E,We?be?I:ue?_:z:ue&&"no-border"!==ce?F:O,ue?null:We?be?P:U:G,!ne&&g,xe&&k,fe),id:ve,"data-testid":Ce,children:[(()=>{const e=["string"==typeof he?`${Ie}-sublabel`:null,we].filter(Boolean).join(" ")||void 0;return i("div",{id:`${Ie}-header-container`,className:j,children:[r("div",{className:a(D,ke&&S),children:i("div",{id:`${Ie}-input-container`,onClick:Je,className:x,children:[r("input",Object.assign({ref:_e,name:ye,id:`${Ie}-input`,type:"checkbox"===se?"checkbox":"radio","data-testid":"toggle-input",className:a(N,ue&&$),disabled:Oe,"aria-disabled":Fe,onChange:Ue,onClick:Ke,checked:We,tabIndex:Fe?0:void 0,"aria-describedby":e},Le)),ne&&Qe(),i("div",{className:a(A,We?be?J:ue?K:Q:ue?V:X),children:[r("label",{ref:ze,htmlFor:`${Ie}-input`,"data-testid":"toggle-label",id:`${Ie}-label`,className:a(C,We?w:L),children:me}),he&&Ve()]})]})}),ke&&r("button",{type:"button",className:a(M,ue&&$),onClick:He,id:`${Ie}-remove-button`,children:"Remove"})]})})(),Se&&i("div",{children:[(!Ae||Re)&&r("div",{"data-id":"toggle-composite-children",className:a(Y,!Ae&&Z,ue?V:X),children:r(p,{baseTextSize:"body-md",children:Se})}),Ae&&!Re&&qe&&r("div",{className:a(ie,ue?$:X),onClick:Ge,id:`${Ie}-error-alert`,children:r(m,{type:ue?"description":"error",className:ee,showIcon:!0,children:Array.isArray(De)?Xe(De):De})}),Ae&&r("button",{className:a(re,ue?$:te,!Re&&!qe&&le),disabled:ue,onClick:Ge,"data-testid":Re?"collapse-button":"expand-button",children:i(t,Re?{children:["Show less",r(o,{"aria-hidden":!0})]}:{children:["Show more",r(l,{"aria-hidden":!0})]})})]})]})};export{ae as Toggle};
 //# sourceMappingURL=toggle.js.map

package/toggle/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport type { ToggleIconType } from \"../shared/toggle-icon/toggle-icon\";\nimport { SimpleIdGenerator } from \"../util\";\nimport {\n    AlertContainer,\n    Children,\n    Container,\n    ErrorContainer,\n    ErrorList,\n    ErrorText,\n    ExpandButton,\n    HeaderContainer,\n    IndicatorLabelContainer,\n    Input,\n    InputContainer,\n    Label,\n    RemoveButton,\n    StyledToggleIcon,\n    SubLabel,\n    TextContainer,\n} from \"./toggle.styles\";\nimport type { ToggleProps } from \"./types\";\n\nexport const Toggle = ({\n    type = \"checkbox\",\n    indicator,\n    checked,\n    styleType = \"default\",\n    children,\n    childrenMaxLines,\n    subLabel,\n    disabled,\n    error,\n    name,\n    id,\n    className,\n    compositeSection,\n    removable,\n    onRemove,\n    \"data-testid\": testId,\n    onChange,\n    useContentWidth,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: ToggleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        collapsible = true,\n        errors,\n        children: compositeSectionChildren,\n        initialExpanded,\n    } = compositeSection || {};\n    const [selected, setSelected] = useState<boolean | undefined>(checked);\n    const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n    const hasCompositeSectionError = useMemo(() => {\n        const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n        const hasErrorElement = !Array.isArray(errors) && !!errors;\n        return hasErrorList || hasErrorElement;\n    }, [errors]);\n    const [uniqueId] = useState(SimpleIdGenerator.generate());\n    const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(checked);\n    }, [checked]);\n\n    useEffect(() => {\n        if (selected) {\n            setExpanded(initialExpanded ?? true);\n        }\n    }, [selected]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (!disabled) {\n            if (onChange) {\n                onChange(event);\n                return;\n            }\n            switch (type) {\n                case \"checkbox\":\n                    setSelected((prevSelected) => {\n                        return !prevSelected;\n                    });\n                    break;\n                case \"radio\":\n                case \"yes\":\n                case \"no\":\n                    {\n                        if (!selected) {\n                            setSelected(true);\n                        }\n                    }\n                    break;\n            }\n        }\n    };\n\n    const handleExpandCollapseClick = () => {\n        if (!disabled) {\n            setExpanded(!expanded);\n        }\n    };\n\n    const handleOnRemove = () => {\n        if (!disabled) {\n            if (onRemove) {\n                onRemove();\n                return;\n            }\n        }\n    };\n\n    const handleContainerClick = () => {\n        inputRef?.current?.click();\n    };\n\n    const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n        e.stopPropagation();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIndicator = () => {\n        let toggleIconType: ToggleIconType;\n\n        switch (type) {\n            case \"yes\":\n                toggleIconType = \"tick\";\n                break;\n            case \"no\":\n                toggleIconType = \"cross\";\n                break;\n            case \"checkbox\":\n            case \"radio\":\n                toggleIconType = type;\n                break;\n        }\n\n        return (\n            <StyledToggleIcon\n                type={toggleIconType}\n                active={selected}\n                disabled={disabled}\n                $selected={selected}\n                $disabled={disabled}\n            />\n        );\n    };\n    const renderSubLabel = () => {\n        if (!subLabel) {\n            return null;\n        }\n\n        let component: string | JSX.Element;\n\n        if (typeof subLabel === \"function\") {\n            component = subLabel();\n        } else {\n            component = subLabel;\n        }\n\n        // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n        return (\n            <SubLabel\n                data-id=\"toggle-sublabel\"\n                id={`${generatedId}-sublabel`}\n                aria-hidden\n            >\n                {component}\n            </SubLabel>\n        );\n    };\n\n    const renderCompositeChildren = () => {\n        return (\n            (!collapsible || expanded) && (\n                <Children\n                    data-id=\"toggle-composite-children\"\n                    $isFinalItem={!collapsible}\n                    $disabled={disabled}\n                >\n                    {compositeSectionChildren}\n                </Children>\n            )\n        );\n    };\n\n    const renderExpandButton = () => {\n        const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n        return (\n            collapsible && (\n                <ExpandButton\n                    $paddingTopRequired={collapsedWithoutErrors}\n                    disabled={disabled}\n                    onClick={handleExpandCollapseClick}\n                    data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n                >\n                    {expanded ? \"Show less\" : \"Show more\"}\n                    {expanded ? (\n                        <ChevronUpIcon aria-hidden />\n                    ) : (\n                        <ChevronDownIcon aria-hidden />\n                    )}\n                </ExpandButton>\n            )\n        );\n    };\n\n    const renderToggleWithRemoveButton = () => {\n        const ariaDescriptions =\n            [\n                typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n                ariaDescribedBy,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined;\n\n        return (\n            <HeaderContainer\n                id={`${generatedId}-header-container`}\n                $disabled={disabled}\n                $error={error}\n                $selected={selected}\n                $indicator={indicator}\n                $styleType={styleType}\n            >\n                <IndicatorLabelContainer $addPadding={removable}>\n                    <InputContainer\n                        id={`${generatedId}-input-container`}\n                        onClick={handleContainerClick}\n                    >\n                        <Input\n                            ref={inputRef}\n                            name={name}\n                            id={`${generatedId}-input`}\n                            type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n                            data-testid=\"toggle-input\"\n                            disabled={disabled}\n                            onChange={handleOnChange}\n                            onClick={handleInputClick}\n                            checked={selected}\n                            aria-describedby={ariaDescriptions}\n                            {...otherProps}\n                        />\n                        {indicator && renderIndicator()}\n                        <TextContainer\n                            $selected={selected}\n                            $disabled={disabled}\n                        >\n                            <Label\n                                htmlFor={`${generatedId}-input`}\n                                data-testid={`toggle-label`}\n                                id={`${generatedId}-label`}\n                                $maxLines={childrenMaxLines}\n                                $selected={selected}\n                            >\n                                {children}\n                            </Label>\n                            {subLabel && renderSubLabel()}\n                        </TextContainer>\n                    </InputContainer>\n                </IndicatorLabelContainer>\n\n                {removable && (\n                    <RemoveButton\n                        type=\"button\"\n                        $disabled={disabled}\n                        onClick={handleOnRemove}\n                        id={`${generatedId}-remove-button`}\n                    >\n                        Remove\n                    </RemoveButton>\n                )}\n            </HeaderContainer>\n        );\n    };\n\n    const renderErrorList = (errors: string[]) => {\n        return (\n            <>\n                <ErrorText weight=\"semibold\" $disabled={disabled}>\n                    Error\n                </ErrorText>\n                <ErrorList $disabled={disabled}>\n                    {errors?.map((item, index) => {\n                        return (\n                            <li\n                                key={index}\n                                id={`${generatedId}-error-list-item-${index}`}\n                            >\n                                <ErrorText\n                                    weight=\"semibold\"\n                                    $disabled={disabled}\n                                >\n                                    {item}\n                                </ErrorText>\n                            </li>\n                        );\n                    })}\n                </ErrorList>\n            </>\n        );\n    };\n\n    const renderError = () => {\n        return (\n            collapsible &&\n            !expanded &&\n            hasCompositeSectionError && (\n                <ErrorContainer\n                    $disabled={disabled}\n                    onClick={handleExpandCollapseClick}\n                    id={`${generatedId}-error-alert`}\n                >\n                    <AlertContainer\n                        type={disabled ? \"description\" : \"error\"}\n                        className={className}\n                        showIcon\n                    >\n                        {Array.isArray(errors)\n                            ? renderErrorList(errors)\n                            : errors}\n                    </AlertContainer>\n                </ErrorContainer>\n            )\n        );\n    };\n\n    const renderCompositeSection = () => {\n        return (\n            compositeSectionChildren && (\n                <div>\n                    {renderCompositeChildren()}\n                    {renderError()}\n                    {renderExpandButton()}\n                </div>\n            )\n        );\n    };\n\n    return (\n        <Container\n            $selected={selected}\n            $disabled={disabled}\n            className={className}\n            $styleType={styleType}\n            $error={error}\n            $indicator={indicator}\n            $useContentWidth={useContentWidth}\n            id={id}\n            data-testid={testId}\n        >\n            {renderToggleWithRemoveButton()}\n            {renderCompositeSection()}\n        </Container>\n    );\n};\n"],"names":["Toggle","_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","onRemove","testId","onChange","useContentWidth","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","SimpleIdGenerator","generate","generatedId","inputRef","useRef","useEffect","handleOnChange","event","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","StyledToggleIcon","active","$selected","$disabled","renderSubLabel","component","SubLabel","renderErrorList","_jsxs","_Fragment","ErrorText","weight","ErrorList","map","item","index","Container","$styleType","$indicator","$useContentWidth","ariaDescriptions","filter","Boolean","join","undefined","HeaderContainer","$error","IndicatorLabelContainer","$addPadding","InputContainer","onClick","Input","Object","assign","ref","TextContainer","Label","htmlFor","$maxLines","RemoveButton","renderToggleWithRemoveButton","Children","$isFinalItem","ErrorContainer","AlertContainer","showIcon","ExpandButton","$paddingTopRequired","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}
+{"version":3,"file":"toggle.js","sources":["../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport clsx from \"clsx\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Markup } from \"../markup\";\nimport { TextList } from \"../text-list\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./toggle.styles\";\nimport type { ToggleIconType } from \"./toggle-icon\";\nimport { ToggleIcon } from \"./toggle-icon\";\nimport type { ToggleProps } from \"./types\";\n\n// @catalog\n/**\n * A selectable control for checkbox and radio interaction patterns.\n *\n * Use `Toggle` to present a labeled option that the user can select or\n * deselect.\n * @keywords checkbox, choice, field, form, input, option, radio\n */\nexport const Toggle = ({\n    type = \"checkbox\",\n    indicator,\n    checked,\n    styleType = \"default\",\n    children,\n    childrenMaxLines,\n    subLabel,\n    disabled,\n    error,\n    name,\n    id,\n    className,\n    compositeSection,\n    removable,\n    focusableWhenDisabled,\n    useContentWidth,\n    onRemove,\n    onChange,\n    \"data-testid\": testId,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: ToggleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        collapsible = true,\n        errors,\n        children: compositeSectionChildren,\n        initialExpanded,\n    } = compositeSection || {};\n    const [selected, setSelected] = useState<boolean | undefined>(checked);\n    const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n    const hasCompositeSectionError = useMemo(() => {\n        const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n        const hasErrorElement = !Array.isArray(errors) && !!errors;\n        return hasErrorList || hasErrorElement;\n    }, [errors]);\n    const uniqueId = useId();\n    const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    useApplyStyle(labelRef, {\n        [styles.tokens.label.desktopLineClamp]:\n            childrenMaxLines?.desktop == null\n                ? null\n                : `${childrenMaxLines.desktop}`,\n        [styles.tokens.label.tabletLineClamp]:\n            childrenMaxLines?.tablet == null\n                ? null\n                : `${childrenMaxLines.tablet}`,\n        [styles.tokens.label.mobileLineClamp]:\n            childrenMaxLines?.mobile == null\n                ? null\n                : `${childrenMaxLines.mobile}`,\n    });\n\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n    const isInteractionBlocked = !!disabled;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(checked);\n    }, [checked]);\n\n    useEffect(() => {\n        if (selected) {\n            setExpanded(initialExpanded ?? true);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [selected]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInteractionBlocked) {\n            event.preventDefault();\n            return;\n        }\n\n        if (onChange) {\n            onChange(event);\n            return;\n        }\n\n        switch (type) {\n            case \"checkbox\":\n                setSelected((prevSelected) => {\n                    return !prevSelected;\n                });\n                break;\n            case \"radio\":\n            case \"yes\":\n            case \"no\":\n                if (!selected) {\n                    setSelected(true);\n                }\n                break;\n        }\n    };\n\n    const handleExpandCollapseClick = () => {\n        if (!disabled) {\n            setExpanded(!expanded);\n        }\n    };\n\n    const handleOnRemove = () => {\n        if (!disabled) {\n            if (onRemove) {\n                onRemove();\n                return;\n            }\n        }\n    };\n\n    const handleContainerClick = () => {\n        inputRef?.current?.click();\n    };\n\n    const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n        e.stopPropagation();\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const getContainerBorderClass = () => {\n        if (!selected && error) return styles.borderError;\n        if (styleType === \"no-border\") return styles.borderNone;\n        if (selected && disabled) return styles.borderSelectedDisabled;\n        if (disabled) return styles.borderDisabled;\n        if (error) return styles.borderError;\n        if (selected) return styles.borderSelected;\n        return styles.borderDefault;\n    };\n\n    const getContainerBgClass = () => {\n        if (selected) {\n            if (error) return styles.bgError;\n            return disabled ? styles.bgSelectedDisabled : styles.bgSelected;\n        }\n\n        if (disabled && styleType !== \"no-border\") return styles.bgDisabled;\n        return styles.bgDefault;\n    };\n\n    const getContainerHoverClass = () => {\n        if (disabled) return null;\n        if (selected)\n            return error\n                ? styles.toggleContainerHoverError\n                : styles.toggleContainerHoverSelected;\n        return styles.toggleContainerHoverDefault;\n    };\n\n    const getTextContainerClass = () => {\n        if (selected) {\n            if (error) return styles.colorTextError;\n\n            if (disabled) return styles.toggleTextContainerDisabledSelected;\n\n            return styles.toggleTextContainerSelected;\n        }\n\n        if (disabled) return styles.colorTextDisabled;\n        return styles.colorTextDefault;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIndicator = () => {\n        let toggleIconType: ToggleIconType;\n\n        switch (type) {\n            case \"yes\":\n                toggleIconType = \"tick\";\n                break;\n            case \"no\":\n                toggleIconType = \"cross\";\n                break;\n            case \"checkbox\":\n            case \"radio\":\n                toggleIconType = type;\n                break;\n        }\n\n        return (\n            <ToggleIcon\n                type={toggleIconType}\n                active={selected}\n                disabled={disabled}\n                error={error}\n            />\n        );\n    };\n\n    const renderSubLabel = () => {\n        if (!subLabel) {\n            return null;\n        }\n\n        let component: string | JSX.Element;\n\n        if (typeof subLabel === \"function\") {\n            component = subLabel();\n        } else {\n            component = subLabel;\n        }\n\n        // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n        return (\n            <div\n                data-id=\"toggle-sublabel\"\n                id={`${generatedId}-sublabel`}\n                aria-hidden\n                className={styles.subLabel}\n            >\n                {component}\n            </div>\n        );\n    };\n\n    const renderCompositeChildren = () => {\n        return (\n            (!collapsible || expanded) && (\n                <div\n                    data-id=\"toggle-composite-children\"\n                    className={clsx(\n                        styles.children,\n                        !collapsible && styles.childrenIsFinalItem,\n                        disabled\n                            ? styles.colorTextDisabled\n                            : styles.colorTextDefault\n                    )}\n                >\n                    <Markup baseTextSize=\"body-md\">\n                        {compositeSectionChildren}\n                    </Markup>\n                </div>\n            )\n        );\n    };\n\n    const renderExpandButton = () => {\n        const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n\n        return (\n            collapsible && (\n                <button\n                    className={clsx(\n                        styles.expandButton,\n                        disabled\n                            ? styles.disabledColorCursor\n                            : styles.colorTextPrimary,\n                        collapsedWithoutErrors &&\n                            styles.expandButtonPaddingTopRequired\n                    )}\n                    disabled={disabled}\n                    onClick={handleExpandCollapseClick}\n                    data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n                >\n                    {expanded ? (\n                        <>\n                            Show less\n                            <ChevronUpIcon aria-hidden />\n                        </>\n                    ) : (\n                        <>\n                            Show more\n                            <ChevronDownIcon aria-hidden />\n                        </>\n                    )}\n                </button>\n            )\n        );\n    };\n\n    const renderToggleWithRemoveButton = () => {\n        const ariaDescriptions =\n            [\n                typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n                ariaDescribedBy,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined;\n\n        return (\n            <div\n                id={`${generatedId}-header-container`}\n                className={styles.headerContainer}\n            >\n                <div\n                    className={clsx(\n                        styles.indicatorLabelContainer,\n                        removable && styles.indicatorLabelContainerAddPadding\n                    )}\n                >\n                    <div\n                        id={`${generatedId}-input-container`}\n                        onClick={handleContainerClick}\n                        className={styles.inputContainer}\n                    >\n                        <input\n                            ref={inputRef}\n                            name={name}\n                            id={`${generatedId}-input`}\n                            type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n                            data-testid=\"toggle-input\"\n                            className={clsx(\n                                styles.input,\n                                disabled && styles.disabledColorCursor\n                            )}\n                            disabled={isNativeDisabled}\n                            aria-disabled={isFocusableWhenDisabled}\n                            onChange={handleOnChange}\n                            onClick={handleInputClick}\n                            checked={selected}\n                            tabIndex={isFocusableWhenDisabled ? 0 : undefined}\n                            aria-describedby={ariaDescriptions}\n                            {...otherProps}\n                        />\n                        {indicator && renderIndicator()}\n                        <div\n                            className={clsx(\n                                styles.textContainer,\n                                getTextContainerClass()\n                            )}\n                        >\n                            <label\n                                ref={labelRef}\n                                htmlFor={`${generatedId}-input`}\n                                data-testid={`toggle-label`}\n                                id={`${generatedId}-label`}\n                                className={clsx(\n                                    styles.label,\n                                    selected\n                                        ? styles.toggleLabelSelected\n                                        : styles.toggleLabelDefault\n                                )}\n                            >\n                                {children}\n                            </label>\n                            {subLabel && renderSubLabel()}\n                        </div>\n                    </div>\n                </div>\n                {removable && (\n                    <button\n                        type=\"button\"\n                        className={clsx(\n                            styles.removeButton,\n                            disabled && styles.disabledColorCursor\n                        )}\n                        onClick={handleOnRemove}\n                        id={`${generatedId}-remove-button`}\n                    >\n                        Remove\n                    </button>\n                )}\n            </div>\n        );\n    };\n\n    const renderErrorList = (errors: string[]) => {\n        const className = clsx(\n            styles.colorTextError,\n            disabled && styles.colorTextDisabled\n        );\n\n        return (\n            <>\n                <Typography.BodyMD weight=\"semibold\" className={className}>\n                    Error\n                </Typography.BodyMD>\n                <TextList.Ul className={className}>\n                    {errors?.map((item, index) => {\n                        return (\n                            <li\n                                key={index}\n                                id={`${generatedId}-error-list-item-${index}`}\n                            >\n                                <Typography.BodyMD\n                                    weight=\"semibold\"\n                                    className={className}\n                                >\n                                    {item}\n                                </Typography.BodyMD>\n                            </li>\n                        );\n                    })}\n                </TextList.Ul>\n            </>\n        );\n    };\n\n    const renderError = () => {\n        return (\n            collapsible &&\n            !expanded &&\n            hasCompositeSectionError && (\n                <div\n                    className={clsx(\n                        styles.errorContainer,\n                        disabled\n                            ? styles.disabledColorCursor\n                            : styles.colorTextDefault\n                    )}\n                    onClick={handleExpandCollapseClick}\n                    id={`${generatedId}-error-alert`}\n                >\n                    <Alert\n                        type={disabled ? \"description\" : \"error\"}\n                        className={styles.alertContainer}\n                        showIcon\n                    >\n                        {Array.isArray(errors)\n                            ? renderErrorList(errors)\n                            : errors}\n                    </Alert>\n                </div>\n            )\n        );\n    };\n\n    const renderCompositeSection = () => {\n        return (\n            compositeSectionChildren && (\n                <div>\n                    {renderCompositeChildren()}\n                    {renderError()}\n                    {renderExpandButton()}\n                </div>\n            )\n        );\n    };\n\n    return (\n        <div\n            className={clsx(\n                styles.container,\n                getContainerBorderClass(),\n                getContainerBgClass(),\n                getContainerHoverClass(),\n                !indicator && styles.containerNoIndicator,\n                useContentWidth && styles.containerUseContentWidth,\n                className\n            )}\n            id={id}\n            data-testid={testId}\n        >\n            {renderToggleWithRemoveButton()}\n            {renderCompositeSection()}\n        </div>\n    );\n};\n"],"names":["Toggle","_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","testId","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","useId","generatedId","inputRef","useRef","labelRef","useApplyStyle","styles.tokens","label","desktopLineClamp","desktop","tabletLineClamp","tablet","mobileLineClamp","mobile","isFocusableWhenDisabled","isNativeDisabled","isInteractionBlocked","useEffect","handleOnChange","event","preventDefault","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","ToggleIcon","active","renderSubLabel","component","styles.subLabel","renderErrorList","clsx","styles.colorTextError","styles.colorTextDisabled","_jsxs","_Fragment","Typography","BodyMD","weight","TextList","Ul","map","item","index","styles.container","styles.borderError","styles.borderNone","styles.borderSelectedDisabled","styles.borderDisabled","styles.borderSelected","styles.borderDefault","styles.bgError","styles.bgSelectedDisabled","styles.bgSelected","styles.bgDisabled","styles.bgDefault","styles.toggleContainerHoverError","styles.toggleContainerHoverSelected","styles.toggleContainerHoverDefault","styles.containerNoIndicator","styles.containerUseContentWidth","ariaDescriptions","filter","Boolean","join","undefined","styles.headerContainer","styles.indicatorLabelContainer","styles.indicatorLabelContainerAddPadding","onClick","styles.inputContainer","ref","styles.input","styles.disabledColorCursor","tabIndex","styles.textContainer","styles.toggleTextContainerDisabledSelected","styles.toggleTextContainerSelected","styles.colorTextDefault","htmlFor","styles.label","styles.toggleLabelSelected","styles.toggleLabelDefault","styles.removeButton","renderToggleWithRemoveButton","styles.children","styles.childrenIsFinalItem","Markup","baseTextSize","styles.errorContainer","Alert","styles.alertContainer","showIcon","styles.expandButton","styles.colorTextPrimary","styles.expandButtonPaddingTopRequired","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}