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

package/cjs/toast/toast.js

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

package/cjs/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","_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":"0cA2BA,MAAMA,EAA4B,IAE5BC,EAAiB,CACnBC,QAASC,EAAAA,mBACTC,QAASC,EAAAA,4BACTC,MAAOC,EAAAA,0BACPC,KAAMC,EAAAA,+BAGYC,QAAAC,KAClBA,EAAO,UAASC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,gBACXA,EAAkBf,EAAyBgB,UAC3CA,EAASC,MACTA,GAAQ,EAAIC,aACZA,GAAYR,EACTS,EAAUC,EAAAA,OAAAV,EATK,CAAA,OAAA,QAAA,QAAA,cAAA,kBAAA,YAAA,QAAA,iBAclB,MAAMW,EAAWC,EAAAA,OAAuB,OACjCC,EAAWC,GAAcC,EAAAA,UAAkB,GAE5CC,EAAQC,EAAAA,WAAWC,gBAEnBC,EAAmBC,EAAAA,cAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,uBAAAA,cAAc,CAC3BC,SAAUJ,IAMdK,EAAAA,WAAU,KACNV,GAAW,EAAK,GACjB,IAEHU,EAAAA,WAAU,KACN,IAAKpB,EAAa,OAElB,MAAMqB,EAAUC,YAAW,KACvBZ,GAAW,EAAM,GAClBT,GAEH,MAAO,IAAMsB,aAAaF,EAAQ,GACnC,CAACrB,IAEJoB,EAAAA,WAAU,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,EAAAA,UAAU,CAC1BC,QAAS3B,EAAY,EAAI,EACzB4B,UAAW5B,EACLQ,EACI,iBACA,iBACJA,EACA,qBACA,mBACNqB,OAAQ,CACJC,OAAQC,EAAAA,QAAQC,eAChBC,SAAU,KAEdC,OAAQ,KACClC,GAAWP,SAAAA,GAAa,IAkCrC,OACI0C,EAAAA,KAACC,UAAOC,OAAAC,OAAA,CACJC,IAAKzC,EACL0C,MAAOf,EAAWgB,MACXrD,EAAIsD,OACHhD,EACRiD,KAAK,QACLC,MAAOC,EAAAA,YAAY7C,IACfJ,EAAU,CAAAkD,SAAA,CAEdC,MAACC,EAAAA,eAAc,CAAAF,SAAE1D,IACjB+C,EAAAA,KAACc,EAAAA,eAAc,CAAAH,SAAA,CACXX,EAAAA,KAACe,EAAAA,gBAAe,CAAAT,MAAQrD,EAAI0D,SAAA,CAvCrB,MACf,MAAMK,EAAOzE,EAAeU,GAC5B,OAAO+D,GAAQJ,EAAAA,IAACI,qBAAmB,EAsCtBC,GACDjB,EAAAA,KAACkB,EAAAA,cAAa,CAAAP,SAAA,CACTzD,IApCbiE,EAAAA,QAAMC,eAAelE,GACdA,EAGH0D,EAAAA,IAACS,QAAK,CAAAf,MAAQrD,EAAMuD,KAAK,eAAcG,SAClCzD,KAgCIC,IAzBbgE,EAAAA,QAAMC,eAAejE,GACdA,EACAD,EACA0D,EAAAA,IAACU,EAAAA,cAAa,CAAAhB,MAAQrD,EAAI0D,SAAGxD,IAE7ByD,EAAAA,IAACW,EAAAA,cAAa,CAAAjB,MAAQrD,EAAI0D,SAAGxD,WAwB/BK,GACGoD,EAAAA,IAACY,EAAAA,aAAY,CACTC,UAAU,QACVC,QAASlE,EAAakE,QAAOf,SAE5BnD,EAAaL,WAI1B6C,OAAC2B,EAAAA,cAAa,CAAArB,MAAQrD,EAAMyE,QAASvC,EAAawB,SAAA,CAC9CC,EAAAA,IAACC,EAAAA,gBAAeL,KAAK,eAAcG,SAAA,uBAGnCC,MAACgB,EAAAA,UAAS,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\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","_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","styles.description","BodyBL","Button","styles.actionButton","styleType","onClick","sizeType","ClickableIcon","styles.dismissButton","CrossIcon"],"mappings":"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"}

package/cjs/toast/toast.styles.js

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

package/cjs/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":"iUAkBA,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,EAAAA,UAAUV,EAAoBE,YAC1CC,OAAQO,EAAAA,UAAUV,EAAoBG,QACtCC,KAAMM,EAAAA,UAAUV,EAAoBI,MACpCC,KAAMK,EAAAA,UAAUV,EAAoBK,MACvC,EAMQM,EAAUC,EAAAA,SAASC,EAAAA,QAAOC,GAAe;;;gBAGrCf,GAAWA,EAAMgB,OAAS,QAAU;cACtChB,GAAWA,EAAMgB,OAAS,OAAS;;;;qBAI7BC,EAAAA,UAAc;;;;;MAK7BC,EAAAA,cAAcC,SAASC;;;;MAItBpB,GACQqB,KAAG;0BACQtB,EAA6BC,GAAOG;gCAC9BJ,EAA6BC,GAAOI;qBAC/CL,EAA6BC,GAAOK;;GAK5CiB,EAAiBR,EAAAA,QAAOC,GAAG;;;;;;;MAOlCG,EAAAA,cAAcC,SAASI;;;;;;EAQhBC,EAAkBV,EAAAA,QAAOC,GAAe;;;;;MAK9Cf,GACQqB,KAAG;;;;;;;yBAOOtB,EAA6BC,GAAOM;;;EAMhDmB,EAAgBX,EAAAA,QAAOC,GAAG;;;EAK1BW,EAAQZ,EAAAA,QAAOa,EAAc;;MAEpCC,EAAAA,QAAQ;;MAEP5B,GACQqB,KAAG;qBACGtB,EAA6BC,GAAOK;;EAK5CwB,EAAgBf,EAAAA,QAAOgB,aAAWC,OAAmB;MAC3D/B,GACQqB,KAAG;qBACGtB,EAA6BC,GAAOK;;EAK5C2B,EAAgBlB,EAAAA,QAAOgB,aAAWG,OAAmB;MAC3DjC,GACQqB,KAAG;qBACGtB,EAA6BC,GAAOK;;EAK5C6B,EAAepB,EAAAA,QAAOqB,SAAOC,MAAM;;;;;;;MAO1ClB,EAAAA,cAAcC,SAASI;;;;EAMhBc,EAAgBvB,EAAAA,QAAOwB,EAAAA,cAA0B;;;;;MAKvDtC,GACQqB,KAAG;;;;yBAIOtB,EAA6BC,GAAOK;;;;;cAK/Ca,EAAAA,cAAcC,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    height: 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":[],"mappings":"4FA+GyB,kCA5DE,+BAwDH,gCAiBE,iCA5BA,mCA9BE,yBAmCV,2BAjGE"}

package/cjs/toast/toast.styles_ngrlup.css

@@ -0,0 +1,8 @@
+.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);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;height: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/cjs/toggle/toggle-icon.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons/circle"),c=require("@lifesg/react-icons/circle-dot"),i=require("@lifesg/react-icons/cross"),s=require("@lifesg/react-icons/square"),a=require("@lifesg/react-icons/square-tick-fill"),t=require("@lifesg/react-icons/tick"),l=require("clsx"),o=require("./toggle-icon.styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(l);exports.ToggleIcon=({type:l,active:n=!1,disabled:d,className:f})=>{let q;switch(l){case"checkbox":q=n?e.jsx(a.SquareTickFillIcon,{}):e.jsx(s.SquareIcon,{});break;case"radio":q=n?e.jsx(c.CircleDotIcon,{}):e.jsx(r.CircleIcon,{});break;case"tick":q=e.jsx(t.TickIcon,{});break;case"cross":q=e.jsx(i.CrossIcon,{});break;default:q=null}return e.jsx("div",{className:u.default(o.wrapperBase,n&&d?o.wrapperActiveDisabled:d?o.wrapperDisabled:n?o.wrapperActive:void 0,f),"aria-hidden":!0,children:q})};
+//# sourceMappingURL=toggle-icon.js.map

package/cjs/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    className?: string | undefined;\n}\n\nexport const ToggleIcon = ({\n    type,\n    active = false,\n    disabled,\n    className,\n}: ToggleIconProps) => {\n    let component: JSX.Element | null;\n\n    const getWrapperStateClass = () => {\n        if (active && disabled) {\n            return styles.wrapperActiveDisabled;\n        }\n\n        if (disabled) {\n            return styles.wrapperDisabled;\n        }\n\n        if (active) {\n            return styles.wrapperActive;\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":["type","active","disabled","className","component","_jsx","SquareTickFillIcon","SquareIcon","CircleDotIcon","CircleIcon","TickIcon","CrossIcon","clsx","styles.wrapperBase","styles.wrapperActiveDisabled","styles.wrapperDisabled","styles.wrapperActive"],"mappings":"wcAmB0B,EACtBA,OACAC,UAAS,EACTC,WACAC,gBAEA,IAAIC,EAkBJ,OAAQJ,GACJ,IAAK,WACDI,EAAYH,EAASI,EAAAA,IAACC,EAAAA,mBAAkB,CAAA,GAAMD,EAAAA,IAACE,EAAAA,eAC/C,MACJ,IAAK,QACDH,EAAYH,EAASI,EAAAA,IAACG,EAAAA,cAAa,CAAA,GAAMH,EAAAA,IAACI,EAAAA,eAC1C,MACJ,IAAK,OACDL,EAAYC,EAAAA,IAACK,EAAAA,SAAQ,IACrB,MACJ,IAAK,QACDN,EAAYC,EAAAA,IAACM,EAAAA,UAAS,IACtB,MACJ,QACIP,EAAY,KAIpB,OACIC,EAAAA,IAAA,MAAA,CACIF,UAAWS,EAAAA,QACPC,EAAAA,YApCJZ,GAAUC,EACHY,EAAAA,sBAGPZ,EACOa,EAAAA,gBAGPd,EACOe,EAAAA,mBADX,EA8BQb,6BAIHC,GACC"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./toggle-icon.styles_ba71y.css");exports.wrapperActive="w1tlwg9n",exports.wrapperActiveDisabled="w1d4lch6",exports.wrapperBase="wxufi5f",exports.wrapperDisabled="wo9gzbp";
+//# sourceMappingURL=toggle-icon.styles.js.map

package/cjs/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 wrapperActive = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const wrapperActiveDisabled = css`\n    color: ${Colour[\"icon-selected-disabled\"]};\n`;\n"],"names":[],"mappings":"mGAwB0B,yCAIQ,+BArBV,kCAaI"}

package/cjs/toggle/toggle-icon.styles_ba71y.css

@@ -0,0 +1,4 @@
+.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-selected);}
+.w1d4lch6{color:var(--fds-colour-icon-selected-disabled);}

package/cjs/toggle/toggle.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-down"),t=require("@lifesg/react-icons/chevron-up"),n=require("react");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js");var a=require("./toggle.styles.js");exports.Toggle=d=>{var{type:l="checkbox",indicator:o,checked:c,styleType:u="default",children:h,childrenMaxLines:b,subLabel:p,disabled:x,error:$,name:j,id:g,className:m,compositeSection:y,removable:v,onRemove:C,"data-testid":k,onChange:f,useContentWidth:q,"aria-describedby":S}=d,T=e.__rest(d,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","onRemove","data-testid","onChange","useContentWidth","aria-describedby"]);const{collapsible:w=!0,errors:E,children:I,initialExpanded:L}=y||{},[A,R]=n.useState(c),[N,_]=n.useState(!!L),B=n.useMemo((()=>{const e=Array.isArray(E)&&(null==E?void 0:E.length)>0,r=!Array.isArray(E)&&!!E;return e||r}),[E]),[F]=n.useState(s.SimpleIdGenerator.generate()),M=g?`${g}`:`tg-${F}`,W=n.useRef(null);n.useEffect((()=>{R(c)}),[c]),n.useEffect((()=>{A&&_(null==L||L)}),[A]);const P=e=>{if(!x){if(f)return void f(e);switch(l){case"checkbox":R((e=>!e));break;case"radio":case"yes":case"no":A||R(!0)}}},D=()=>{x||_(!N)},G=()=>{x||!C||C()},H=()=>{var e;null===(e=null==W?void 0:W.current)||void 0===e||e.click()},O=e=>{e.stopPropagation()},U=()=>{let e;switch(l){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=l}return r.jsx(a.StyledToggleIcon,{type:e,active:A,disabled:x,$selected:A,$disabled:x})},z=()=>{if(!p)return null;let e;return e="function"==typeof p?p():p,r.jsx(a.SubLabel,{"data-id":"toggle-sublabel",id:`${M}-sublabel`,"aria-hidden":!0,children:e})},J=()=>{const e=!N&&!B;return w&&r.jsxs(a.ExpandButton,{$paddingTopRequired:e,disabled:x,onClick:D,"data-testid":N?"collapse-button":"expand-button",children:[N?"Show less":"Show more",N?r.jsx(t.ChevronUpIcon,{"aria-hidden":!0}):r.jsx(i.ChevronDownIcon,{"aria-hidden":!0})]})},K=e=>r.jsxs(r.Fragment,{children:[r.jsx(a.ErrorText,{weight:"semibold",$disabled:x,children:"Error"}),r.jsx(a.ErrorList,{$disabled:x,children:null==e?void 0:e.map(((e,i)=>r.jsx("li",{id:`${M}-error-list-item-${i}`,children:r.jsx(a.ErrorText,{weight:"semibold",$disabled:x,children:e})},i)))})]});return r.jsxs(a.Container,{$selected:A,$disabled:x,className:m,$styleType:u,$error:$,$indicator:o,$useContentWidth:q,id:g,"data-testid":k,children:[(()=>{const e=["string"==typeof p?`${M}-sublabel`:null,S].filter(Boolean).join(" ")||void 0;return r.jsxs(a.HeaderContainer,{id:`${M}-header-container`,$disabled:x,$error:$,$selected:A,$indicator:o,$styleType:u,children:[r.jsx(a.IndicatorLabelContainer,{$addPadding:v,children:r.jsxs(a.InputContainer,{id:`${M}-input-container`,onClick:H,children:[r.jsx(a.Input,Object.assign({ref:W,name:j,id:`${M}-input`,type:"checkbox"===l?"checkbox":"radio","data-testid":"toggle-input",disabled:x,onChange:P,onClick:O,checked:A,"aria-describedby":e},T)),o&&U(),r.jsxs(a.TextContainer,{$selected:A,$disabled:x,children:[r.jsx(a.Label,{htmlFor:`${M}-input`,"data-testid":"toggle-label",id:`${M}-label`,$maxLines:b,$selected:A,children:h}),p&&z()]})]})}),v&&r.jsx(a.RemoveButton,{type:"button",$disabled:x,onClick:G,id:`${M}-remove-button`,children:"Remove"})]})})(),I&&r.jsxs("div",{children:[(!w||N)&&r.jsx(a.Children,{"data-id":"toggle-composite-children",$isFinalItem:!w,$disabled:x,children:I}),w&&!N&&B&&r.jsx(a.ErrorContainer,{$disabled:x,onClick:D,id:`${M}-error-alert`,children:r.jsx(a.AlertContainer,{type:x?"description":"error",className:m,showIcon:!0,children:Array.isArray(E)?K(E):E})}),J()]})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-down"),l=require("@lifesg/react-icons/chevron-up"),i=require("clsx"),a=require("react"),o=require("../alert/alert.js"),n=require("../markup/markup.js"),s=require("../text-list/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var d=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var c=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var u=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var b=require("./toggle.styles.js"),h=require("./toggle-icon.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=g(i);exports.Toggle=i=>{var{type:g="checkbox",indicator:p,checked:x,styleType:j="default",children:v,childrenMaxLines:C,subLabel:f,disabled:y,error:k,name:q,id:N,className:D,compositeSection:T,removable:S,focusableWhenDisabled:$,useContentWidth:L,onRemove:B,onChange:E,"data-testid":I,"aria-describedby":w}=i,A=e.__rest(i,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","data-testid","aria-describedby"]);const{collapsible:M=!0,errors:R,children:W,initialExpanded:_}=T||{},[F,P]=a.useState(x),[H,U]=a.useState(!!_),z=a.useMemo((()=>{const e=Array.isArray(R)&&(null==R?void 0:R.length)>0,r=!Array.isArray(R)&&!!R;return e||r}),[R]),O=u.useId(),G=N?`${N}`:`tg-${O}`,J=a.useRef(null),K=a.useRef(null);d.useApplyStyle(K,{[b.tokens.label.desktopLineClamp]:null==(null==C?void 0:C.desktop)?null:`${C.desktop}`,[b.tokens.label.tabletLineClamp]:null==(null==C?void 0:C.tablet)?null:`${C.tablet}`,[b.tokens.label.mobileLineClamp]:null==(null==C?void 0:C.mobile)?null:`${C.mobile}`});const Q=!!y&&!!$,V=!!y&&!$,X=!!y;a.useEffect((()=>{P(x)}),[x]),a.useEffect((()=>{F&&U(null==_||_)}),[F]);const Y=e=>{if(X)e.preventDefault();else if(E)E(e);else switch(g){case"checkbox":P((e=>!e));break;case"radio":case"yes":case"no":F||P(!0)}},Z=()=>{y||U(!H)},ee=()=>{y||!B||B()},re=()=>{var e;null===(e=null==J?void 0:J.current)||void 0===e||e.click()},te=e=>{e.stopPropagation()},le=()=>{let e;switch(g){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=g}return r.jsx(h.ToggleIcon,{type:e,active:F,disabled:y})},ie=()=>{if(!f)return null;let e;return e="function"==typeof f?f():f,r.jsx("div",{"data-id":"toggle-sublabel",id:`${G}-sublabel`,"aria-hidden":!0,className:b.subLabel,children:e})},ae=()=>{const e=!H&&!z;return M&&r.jsxs("button",{className:m.default(b.expandButton,y&&b.disabledColorCursor,e&&b.expandButtonPaddingTopRequired),disabled:y,onClick:Z,"data-testid":H?"collapse-button":"expand-button",children:[H?"Show less":"Show more",H?r.jsx(l.ChevronUpIcon,{"aria-hidden":!0}):r.jsx(t.ChevronDownIcon,{"aria-hidden":!0})]})},oe=e=>r.jsxs(r.Fragment,{children:[r.jsx(c.Typography.BodyMD,{weight:"semibold",className:m.default(b.colorTextError,y&&b.colorTextDisabled),children:"Error"}),r.jsx(s.TextList.Ul,{className:m.default(b.colorTextError,y&&b.colorTextDisabled),children:null==e?void 0:e.map(((e,t)=>r.jsx("li",{id:`${G}-error-list-item-${t}`,children:r.jsx(c.Typography.BodyMD,{weight:"semibold",className:m.default(b.colorTextError,y&&b.colorTextDisabled),children:e})},t)))})]});return r.jsxs("div",{className:m.default(b.container,"no-border"===j?k?m.default(b.colorBorderError,!y&&b.toggleContainerError):y?F?b.toggleContainerNoBorderDisabledSelected:b.toggleContainerNoBorderDisabled:F?b.toggleContainerNoBorderSelected:b.toggleContainerNoBorder:k?y?b.colorBorderError:b.toggleContainerError:y?F?b.toggleContainerDisabledSelected:b.toggleContainerDisabled:F?b.toggleContainerSelected:b.toggleContainer,(()=>{if(!y)return!k&&F?b.toggleContainerHoverSelected:b.toggleContainerHoverDefault})(),!p&&b.noIndicatorContainer,L&&b.useContentWidthContainer,D),id:N,"data-testid":I,children:[(()=>{const e=["string"==typeof f?`${G}-sublabel`:null,w].filter(Boolean).join(" ")||void 0;return r.jsxs("div",{id:`${G}-header-container`,className:b.headerContainer,children:[r.jsx("div",{className:m.default(b.indicatorLabelContainer,S&&b.indicatorLabelContainerAddPadding),children:r.jsxs("div",{id:`${G}-input-container`,onClick:re,className:b.inputContainer,children:[r.jsx("input",Object.assign({ref:J,name:q,id:`${G}-input`,type:"checkbox"===g?"checkbox":"radio","data-testid":"toggle-input",className:m.default(b.input,y&&b.toggleInputDisabled),disabled:V,"aria-disabled":Q,onChange:Y,onClick:te,checked:F,tabIndex:Q?0:void 0,"aria-describedby":e},A)),p&&le(),r.jsxs("div",{className:m.default(b.textContainer,y?F?b.toggleTextContainerDisabledSelected:b.colorTextDisabled:F?b.toggleTextContainerSelected:void 0),children:[r.jsx("label",{ref:K,htmlFor:`${G}-input`,"data-testid":"toggle-label",id:`${G}-label`,className:m.default(b.label,F?b.toggleLabelSelected:b.toggleLabelDefault),children:v}),f&&ie()]})]})}),S&&r.jsx("button",{type:"button",className:m.default(b.removeButton,y&&b.disabledColorCursor),onClick:ee,id:`${G}-remove-button`,children:"Remove"})]})})(),W&&r.jsxs("div",{children:[(!M||H)&&r.jsx("div",{"data-id":"toggle-composite-children",className:m.default(b.children,!M&&b.childrenIsFinalItem,y&&b.colorTextDisabled),children:r.jsx(n.Markup,{baseTextSize:"body-md",children:W})}),M&&!H&&z&&r.jsx("div",{className:m.default(b.errorContainer,y&&b.disabledColorCursor),onClick:Z,id:`${G}-error-alert`,children:r.jsx(o.Alert,{type:y?"description":"error",className:b.alertContainer,showIcon:!0,children:Array.isArray(R)?oe(R):R})}),ae()]})]})};
 //# sourceMappingURL=toggle.js.map

package/cjs/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":["_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","renderExpandButton","collapsedWithoutErrors","_jsxs","ExpandButton","$paddingTopRequired","onClick","ChevronUpIcon","ChevronDownIcon","renderErrorList","_Fragment","ErrorText","weight","ErrorList","map","item","index","Container","$styleType","$indicator","$useContentWidth","ariaDescriptions","filter","Boolean","join","undefined","HeaderContainer","$error","IndicatorLabelContainer","$addPadding","InputContainer","Input","Object","assign","ref","TextContainer","Label","htmlFor","$maxLines","RemoveButton","renderToggleWithRemoveButton","Children","$isFinalItem","ErrorContainer","AlertContainer","showIcon"],"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\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    }, [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 getContainerStateClass = () => {\n        if (styleType === \"no-border\") {\n            if (error) {\n                return clsx(\n                    styles.colorBorderError,\n                    !disabled && styles.toggleContainerError\n                );\n            }\n\n            if (disabled) {\n                return selected\n                    ? styles.toggleContainerNoBorderDisabledSelected\n                    : styles.toggleContainerNoBorderDisabled;\n            }\n\n            if (selected) {\n                return styles.toggleContainerNoBorderSelected;\n            }\n\n            return styles.toggleContainerNoBorder;\n        }\n\n        if (error) {\n            return disabled\n                ? styles.colorBorderError\n                : styles.toggleContainerError;\n        }\n\n        if (disabled) {\n            return selected\n                ? styles.toggleContainerDisabledSelected\n                : styles.toggleContainerDisabled;\n        }\n\n        if (selected) {\n            return styles.toggleContainerSelected;\n        }\n\n        return styles.toggleContainer;\n    };\n\n    const getContainerHoverClass = () => {\n        if (disabled) {\n            return undefined;\n        }\n\n        if (!error && selected) {\n            return styles.toggleContainerHoverSelected;\n        }\n\n        return styles.toggleContainerHoverDefault;\n    };\n\n    const getTextContainerStateClass = () => {\n        if (disabled) {\n            return selected\n                ? styles.toggleTextContainerDisabledSelected\n                : styles.colorTextDisabled;\n        }\n\n        if (selected) {\n            return styles.toggleTextContainerSelected;\n        }\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            />\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 && styles.colorTextDisabled\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 && styles.disabledColorCursor,\n                        collapsedWithoutErrors &&\n                            styles.expandButtonPaddingTopRequired\n                    )}\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                </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.toggleInputDisabled\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                                getTextContainerStateClass()\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        return (\n            <>\n                <Typography.BodyMD\n                    weight=\"semibold\"\n                    className={clsx(\n                        styles.colorTextError,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\n                    Error\n                </Typography.BodyMD>\n                <TextList.Ul\n                    className={clsx(\n                        styles.colorTextError,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\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={clsx(\n                                        styles.colorTextError,\n                                        disabled && styles.colorTextDisabled\n                                    )}\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 && styles.disabledColorCursor\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                getContainerStateClass(),\n                getContainerHoverClass(),\n                !indicator && styles.noIndicatorContainer,\n                useContentWidth && styles.useContentWidthContainer,\n                className\n            )}\n            id={id}\n            data-testid={testId}\n        >\n            {renderToggleWithRemoveButton()}\n            {renderCompositeSection()}\n        </div>\n    );\n};\n"],"names":["_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","renderExpandButton","collapsedWithoutErrors","_jsxs","clsx","styles.expandButton","styles.disabledColorCursor","styles.expandButtonPaddingTopRequired","onClick","ChevronUpIcon","ChevronDownIcon","renderErrorList","_Fragment","Typography","BodyMD","weight","styles.colorTextError","styles.colorTextDisabled","TextList","Ul","map","item","index","styles.container","styles.colorBorderError","styles.toggleContainerError","styles.toggleContainerNoBorderDisabledSelected","styles.toggleContainerNoBorderDisabled","styles.toggleContainerNoBorderSelected","styles.toggleContainerNoBorder","styles.toggleContainerDisabledSelected","styles.toggleContainerDisabled","styles.toggleContainerSelected","styles.toggleContainer","styles.toggleContainerHoverSelected","styles.toggleContainerHoverDefault","getContainerHoverClass","styles.noIndicatorContainer","styles.useContentWidthContainer","ariaDescriptions","filter","Boolean","join","undefined","styles.headerContainer","styles.indicatorLabelContainer","styles.indicatorLabelContainerAddPadding","styles.inputContainer","ref","styles.input","styles.toggleInputDisabled","tabIndex","styles.textContainer","styles.toggleTextContainerDisabledSelected","styles.toggleTextContainerSelected","htmlFor","styles.label","styles.toggleLabelSelected","styles.toggleLabelDefault","styles.removeButton","renderToggleWithRemoveButton","styles.children","styles.childrenIsFinalItem","Markup","baseTextSize","styles.errorContainer","Alert","styles.alertContainer","showIcon"],"mappings":"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"}