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

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    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":["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,WAaZC,EAAa"}

package/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/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,wrapperDisabled as f,wrapperActive as n}from"./toggle-icon.styles.js";const p=({type:p,active:d=!1,disabled:g,className:k})=>{let b;switch(p){case"checkbox":b=r(d?s:o,{});break;case"radio":b=r(d?i:e,{});break;case"tick":b=r(t,{});break;case"cross":b=r(c,{});break;default:b=null}return r("div",{className:a(l,d&&g?m:g?f:d?n:void 0,k),"aria-hidden":!0,children:b})};export{p 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    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":["ToggleIcon","type","active","disabled","className","component","_jsx","SquareTickFillIcon","SquareIcon","CircleDotIcon","CircleIcon","TickIcon","CrossIcon","clsx","styles.wrapperBase","styles.wrapperActiveDisabled","styles.wrapperDisabled","styles.wrapperActive"],"mappings":"whBAmBO,MAAMA,EAAa,EACtBC,OACAC,UAAS,EACTC,WACAC,gBAEA,IAAIC,EAkBJ,OAAQJ,GACJ,IAAK,WACDI,EAAqBC,EAATJ,EAAUK,EAAyBC,EAAP,CAAA,GACxC,MACJ,IAAK,QACDH,EAAqBC,EAATJ,EAAUO,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,CACIF,UAAWS,EACPC,EApCJZ,GAAUC,EACHY,EAGPZ,EACOa,EAGPd,EACOe,OADX,EA8BQb,6BAIHC,GACC"}

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

@@ -0,0 +1,4 @@
+export declare const wrapperBase: import("@linaria/core").LinariaClassName;
+export declare const wrapperDisabled: 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_ba71y.css";const o="wxufi5f",t="wo9gzbp",g="w1tlwg9n",l="w1d4lch6";export{g as wrapperActive,l as wrapperActiveDisabled,o as wrapperBase,t as wrapperDisabled};
+//# 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 wrapperActive = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const wrapperActiveDisabled = css`\n    color: ${Colour[\"icon-selected-disabled\"]};\n`;\n"],"names":["wrapperBase","wrapperDisabled","wrapperActive","wrapperActiveDisabled"],"mappings":"6DAOO,MAAMA,EAAW,UAaXC,EAAe,UAIfC,EAAa,WAIbC,EAAqB"}

package/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/toggle/toggle.d.ts

@@ -1,2 +1,2 @@
 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;
+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 t,Fragment as r}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 v}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as y,container as f,noIndicatorContainer as g,useContentWidthContainer as k,headerContainer as j,inputContainer as x,input as N,toggleInputDisabled as $,label as C,toggleLabelSelected as w,toggleLabelDefault as L,textContainer as A,indicatorLabelContainer as D,indicatorLabelContainerAddPadding as S,removeButton as M,disabledColorCursor as W,colorBorderError as B,toggleContainerError as R,toggleContainerNoBorderDisabledSelected as T,toggleContainerNoBorderDisabled as q,toggleContainerNoBorderSelected as E,toggleContainerNoBorder as I,toggleContainerDisabledSelected as _,toggleContainerDisabled as z,toggleContainerSelected as F,toggleContainer as O,toggleContainerHoverSelected as P,toggleContainerHoverDefault as U,subLabel as G,toggleTextContainerDisabledSelected as H,colorTextDisabled as J,toggleTextContainerSelected as K,children as Q,childrenIsFinalItem as V,alertContainer as X,errorContainer as Y,expandButton as Z,expandButtonPaddingTopRequired as ee,colorTextError as ie}from"./toggle.styles.js";import{ToggleIcon as te}from"./toggle-icon.js";const re=re=>{var{type:le="checkbox",indicator:oe,checked:ae,styleType:se="default",children:ne,childrenMaxLines:de,subLabel:ce,disabled:me,error:pe,name:he,id:ue,className:be,compositeSection:ve,removable:ye,focusableWhenDisabled:fe,useContentWidth:ge,onRemove:ke,onChange:je,"data-testid":xe,"aria-describedby":Ne}=re,$e=e(re,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","data-testid","aria-describedby"]);const{collapsible:Ce=!0,errors:we,children:Le,initialExpanded:Ae}=ve||{},[De,Se]=s(ae),[Me,We]=s(!!Ae),Be=n((()=>{const e=Array.isArray(we)&&(null==we?void 0:we.length)>0,i=!Array.isArray(we)&&!!we;return e||i}),[we]),Re=v(),Te=ue?`${ue}`:`tg-${Re}`,qe=d(null),Ee=d(null);u(Ee,{[y.label.desktopLineClamp]:null==(null==de?void 0:de.desktop)?null:`${de.desktop}`,[y.label.tabletLineClamp]:null==(null==de?void 0:de.tablet)?null:`${de.tablet}`,[y.label.mobileLineClamp]:null==(null==de?void 0:de.mobile)?null:`${de.mobile}`});const Ie=!!me&&!!fe,_e=!!me&&!fe,ze=!!me;c((()=>{Se(ae)}),[ae]),c((()=>{De&&We(null==Ae||Ae)}),[De]);const Fe=e=>{if(ze)e.preventDefault();else if(je)je(e);else switch(le){case"checkbox":Se((e=>!e));break;case"radio":case"yes":case"no":De||Se(!0)}},Oe=()=>{me||We(!Me)},Pe=()=>{me||!ke||ke()},Ue=()=>{var e;null===(e=null==qe?void 0:qe.current)||void 0===e||e.click()},Ge=e=>{e.stopPropagation()},He=()=>{let e;switch(le){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=le}return t(te,{type:e,active:De,disabled:me})},Je=()=>{if(!ce)return null;let e;return e="function"==typeof ce?ce():ce,t("div",{"data-id":"toggle-sublabel",id:`${Te}-sublabel`,"aria-hidden":!0,className:G,children:e})},Ke=e=>i(r,{children:[t(b.BodyMD,{weight:"semibold",className:a(ie,me&&J),children:"Error"}),t(h.Ul,{className:a(ie,me&&J),children:null==e?void 0:e.map(((e,i)=>t("li",{id:`${Te}-error-list-item-${i}`,children:t(b.BodyMD,{weight:"semibold",className:a(ie,me&&J),children:e})},i)))})]});return i("div",{className:a(f,"no-border"===se?pe?a(B,!me&&R):me?De?T:q:De?E:I:pe?me?B:R:me?De?_:z:De?F:O,(()=>{if(!me)return!pe&&De?P:U})(),!oe&&g,ge&&k,be),id:ue,"data-testid":xe,children:[(()=>{const e=["string"==typeof ce?`${Te}-sublabel`:null,Ne].filter(Boolean).join(" ")||void 0;return i("div",{id:`${Te}-header-container`,className:j,children:[t("div",{className:a(D,ye&&S),children:i("div",{id:`${Te}-input-container`,onClick:Ue,className:x,children:[t("input",Object.assign({ref:qe,name:he,id:`${Te}-input`,type:"checkbox"===le?"checkbox":"radio","data-testid":"toggle-input",className:a(N,me&&$),disabled:_e,"aria-disabled":Ie,onChange:Fe,onClick:Ge,checked:De,tabIndex:Ie?0:void 0,"aria-describedby":e},$e)),oe&&He(),i("div",{className:a(A,me?De?H:J:De?K:void 0),children:[t("label",{ref:Ee,htmlFor:`${Te}-input`,"data-testid":"toggle-label",id:`${Te}-label`,className:a(C,De?w:L),children:ne}),ce&&Je()]})]})}),ye&&t("button",{type:"button",className:a(M,me&&W),onClick:Pe,id:`${Te}-remove-button`,children:"Remove"})]})})(),Le&&i("div",{children:[(!Ce||Me)&&t("div",{"data-id":"toggle-composite-children",className:a(Q,!Ce&&V,me&&J),children:t(p,{baseTextSize:"body-md",children:Le})}),Ce&&!Me&&Be&&t("div",{className:a(Y,me&&W),onClick:Oe,id:`${Te}-error-alert`,children:t(m,{type:me?"description":"error",className:X,showIcon:!0,children:Array.isArray(we)?Ke(we):we})}),Ce&&i("button",{className:a(Z,me&&W,!Me&&!Be&&ee),disabled:me,onClick:Oe,"data-testid":Me?"collapse-button":"expand-button",children:[Me?"Show less":"Show more",t(Me?o:l,{"aria-hidden":!0})]})]})]})};export{re 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\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":["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","_jsxs","_Fragment","Typography","BodyMD","weight","clsx","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","onClick","styles.inputContainer","ref","styles.input","styles.toggleInputDisabled","tabIndex","styles.textContainer","styles.toggleTextContainerDisabledSelected","styles.toggleTextContainerSelected","htmlFor","styles.label","styles.toggleLabelSelected","styles.toggleLabelDefault","styles.removeButton","styles.disabledColorCursor","renderToggleWithRemoveButton","styles.children","styles.childrenIsFinalItem","Markup","baseTextSize","styles.errorContainer","Alert","styles.alertContainer","showIcon","styles.expandButton","styles.expandButtonPaddingTopRequired","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}

package/toggle/toggle.styles.d.ts

@@ -1,51 +1,45 @@
-import type { ToggleStyleType } from "./types";
-interface StyleProps {
-    $selected?: boolean;
-    $disabled?: boolean;
-    $indicator?: boolean;
-}
-interface ContainerStyleProps extends StyleProps {
-    $styleType?: ToggleStyleType;
-    $error?: boolean;
-    $useContentWidth?: boolean;
-}
-interface IndicatorLabelContainerStyleProps {
-    $addPadding?: boolean;
-}
-interface LabelStyleProps {
-    $maxLines?: {
-        desktop?: number;
-        mobile?: number;
-        tablet?: number;
+export declare const tokens: {
+    readonly label: {
+        readonly desktopLineClamp: "--fds-internal-toggle-label-desktopLineClamp";
+        readonly tabletLineClamp: "--fds-internal-toggle-label-tabletLineClamp";
+        readonly mobileLineClamp: "--fds-internal-toggle-label-mobileLineClamp";
     };
-}
-interface ExpandButtonStyleProps extends StyleProps {
-    $paddingTopRequired?: boolean;
-}
-interface ChildrenStyleProps extends StyleProps {
-    $isFinalItem?: boolean;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerStyleProps>> & string;
-export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
-export declare const InputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, LabelStyleProps & {
-    $selected?: boolean;
-}>> & string;
-export declare const SubLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const HeaderContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerStyleProps>> & string;
-export declare const IndicatorLabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IndicatorLabelContainerStyleProps>> & string;
-export declare const RemoveButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyleProps>> & string;
-export declare const ExpandButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ExpandButtonStyleProps>> & string;
-export declare const ErrorContainer: 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 AlertContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").AlertProps, never>> & string & Omit<({ type, className, children, actionLink, actionLinkIcon, sizeType, showIcon, customIcon, maxCollapsedHeight, role, ...otherProps }: import("..").AlertProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const Children: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ChildrenStyleProps>> & string;
-export declare const ErrorText: 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 ErrorList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").UnorderedListProps, StyleProps>> & string & Omit<{
-    ({ size, bulletType, bottomMargin, children, ...otherProps }: import("..").UnorderedListProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const StyledToggleIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../shared/toggle-icon/toggle-icon").ToggleIconProps, StyleProps>> & string & Omit<({ type, active, disabled, className, }: import("../shared/toggle-icon/toggle-icon").ToggleIconProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export {};
+};
+export declare const headerContainer: import("@linaria/core").LinariaClassName;
+export declare const textContainer: import("@linaria/core").LinariaClassName;
+export declare const toggleTextContainerSelected: import("@linaria/core").LinariaClassName;
+export declare const toggleTextContainerDisabledSelected: import("@linaria/core").LinariaClassName;
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const noIndicatorContainer: import("@linaria/core").LinariaClassName;
+export declare const useContentWidthContainer: import("@linaria/core").LinariaClassName;
+export declare const colorBorderError: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerNoBorderDisabledSelected: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerNoBorderDisabled: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerNoBorderSelected: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerNoBorder: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerError: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerDisabledSelected: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerDisabled: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerSelected: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerHoverSelected: import("@linaria/core").LinariaClassName;
+export declare const toggleContainer: import("@linaria/core").LinariaClassName;
+export declare const toggleContainerHoverDefault: import("@linaria/core").LinariaClassName;
+export declare const input: import("@linaria/core").LinariaClassName;
+export declare const toggleInputDisabled: import("@linaria/core").LinariaClassName;
+export declare const inputContainer: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;
+export declare const toggleLabelDefault: import("@linaria/core").LinariaClassName;
+export declare const toggleLabelSelected: import("@linaria/core").LinariaClassName;
+export declare const subLabel: import("@linaria/core").LinariaClassName;
+export declare const indicatorLabelContainer: import("@linaria/core").LinariaClassName;
+export declare const indicatorLabelContainerAddPadding: import("@linaria/core").LinariaClassName;
+export declare const removeButton: import("@linaria/core").LinariaClassName;
+export declare const disabledColorCursor: import("@linaria/core").LinariaClassName;
+export declare const expandButton: import("@linaria/core").LinariaClassName;
+export declare const expandButtonPaddingTopRequired: import("@linaria/core").LinariaClassName;
+export declare const errorContainer: import("@linaria/core").LinariaClassName;
+export declare const children: import("@linaria/core").LinariaClassName;
+export declare const childrenIsFinalItem: import("@linaria/core").LinariaClassName;
+export declare const colorTextDisabled: import("@linaria/core").LinariaClassName;
+export declare const colorTextError: import("@linaria/core").LinariaClassName;
+export declare const alertContainer: import("@linaria/core").LinariaClassName;

package/toggle/toggle.styles.js

@@ -1,243 +1,2 @@
-import e,{css as o}from"styled-components";import{Alert as r}from"../alert/alert.js";import{applyHtmlContentStyle as d}from"../shared/html-content/html-content.js";import{ToggleIcon as t}from"../shared/toggle-icon/toggle-icon.js";import{TextList as i}from"../text-list/index.js";import{Typography as l}from"../typography/index.js";import{V3_Radius as n,V3_Colour as a,V3_Font as s,V3_MediaQuery as b}from"../v3_theme/index.js";const c=e.div`
-    position: relative;
-    display: inline-flex;
-    min-width: 10.375rem;
-    border-radius: ${n.sm};
-    border-width: 1px;
-    border-style: solid;
-    overflow: hidden;
-    flex-direction: column;
-    height: fit-content;
-    background: ${a.bg};
-
-    &:has(input:focus-visible) {
-        outline: 2px solid ${a["focus-ring"]};
-        outline-offset: 0;
-    }
-
-    ${e=>{if(!e.$indicator)return o`
-                justify-content: center;
-            `}}
-
-    // Container min width to fit content
-    ${e=>{if(e.$useContentWidth)return o`
-                min-width: unset;
-            `}}
-
-    // apply container border and header background color
-    ${e=>"no-border"===e.$styleType?e.$error?e.$disabled?o`
-                            border-color: ${a["border-error"]};
-                        `:o`
-                            border-color: ${a["border-error"]};
-
-                            &:has(${h}:hover) {
-                                @media (pointer: fine) {
-                                    background: ${a["bg-hover-subtle"]};
-                                }
-                            }
-                        `:e.$disabled?e.$selected?o`
-                            border: none;
-                            background: ${a["bg-selected-disabled"]};
-                        `:o`
-                            border: none;
-                        `:e.$selected?o`
-                        border: none;
-                        background: ${a["bg-selected"]};
-
-                        &:has(${h}:hover) {
-                            @media (pointer: fine) {
-                                background: ${a["bg-selected-hover"]};
-
-                                & ${p} {
-                                    color: ${a["text-selected-hover"]};
-                                }
-
-                                & ${M} {
-                                    color: ${a["icon-selected-hover"]};
-                                }
-                            }
-                        }
-                    `:o`
-                    border: none;
-
-                    &:has(${h}:hover) {
-                        @media (pointer: fine) {
-                            background: ${a["bg-hover-subtle"]};
-                        }
-                    }
-                `:e.$error?e.$disabled?o`
-                            border-color: ${a["border-error"]};
-                        `:o`
-                            border-color: ${a["border-error"]};
-
-                            &:has(${h}:hover) {
-                                @media (pointer: fine) {
-                                    background: ${a["bg-hover-subtle"]};
-                                }
-                            }
-                        `:e.$disabled?e.$selected?o`
-                            border-color: ${a["border-selected-disabled"]};
-                            background: ${a["bg-selected-disabled"]};
-                        `:o`
-                            border-color: ${a["border-disabled"]};
-                            background: ${a["bg-disabled"]};
-                        `:e.$selected?o`
-                        border-color: ${a["border-selected"]};
-                        background: ${a["bg-selected"]};
-
-                        &:has(${h}:hover) {
-                            @media (pointer: fine) {
-                                background: ${a["bg-selected-hover"]};
-
-                                & ${p} {
-                                    color: ${a["text-selected-hover"]};
-                                }
-
-                                & ${M} {
-                                    color: ${a["icon-selected-hover"]};
-                                }
-                            }
-                        }
-                    `:o`
-                    border-color: ${a.border};
-
-                    &:has(${h}:hover) {
-                        @media (pointer: fine) {
-                            background: ${a["bg-hover-subtle"]};
-                        }
-                    }
-                `}
-`,$=e.input`
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    cursor: ${e=>e.disabled?"not-allowed":"pointer"};
-    top: 0;
-    left: 0;
-
-    /* Hide appearance but keep it focusable using keyboard interactions */
-    appearance: none;
-    background: transparent;
-    border: none;
-`,m=e.div`
-    display: flex;
-`,p=e.div`
-    display: flex;
-    flex-direction: column;
-    overflow-wrap: anywhere;
-    width: 100%;
-    overflow: hidden;
-
-    // apply header container text color
-    ${e=>e.$disabled?e.$selected?o`
-                    color: ${a["text-selected-disabled"]};
-                `:o`
-                    color: ${a["text-disabled"]};
-                `:e.$selected?o`
-                color: ${a["text-selected"]};
-            `:o`
-            color: ${a.text};
-        `}
-`,u=e.label`
-    ${e=>e.$selected?s["body-baseline-semibold"]:s["body-baseline-regular"]};
-    overflow: hidden;
-    display: -webkit-box;
-    text-overflow: ellipsis;
-    -webkit-box-orient: vertical;
-    overflow-wrap: break-word;
-    -webkit-line-clamp: ${e=>{var o,r;return null!==(r=null===(o=e.$maxLines)||void 0===o?void 0:o.desktop)&&void 0!==r?r:"none"}};
-    ${b.MaxWidth.lg} {
-        -webkit-line-clamp: ${e=>{var o,r;return null!==(r=null===(o=e.$maxLines)||void 0===o?void 0:o.tablet)&&void 0!==r?r:"none"}};
-    }
-    ${b.MaxWidth.sm} {
-        -webkit-line-clamp: ${e=>{var o,r;return null!==(r=null===(o=e.$maxLines)||void 0===o?void 0:o.mobile)&&void 0!==r?r:"none"}};
-    }
-`,g=e.div`
-    ${s["body-md-regular"]}
-    margin-top: 0.5rem;
-
-    z-index: 1; // forces sublabel to render above the input
-    pointer-events: none; // to allow click events to be passed to the input
-
-    strong,
-    b {
-        ${s["body-md-semibold"]}
-    }
-`,h=e.div`
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-`,v=e.div`
-    display: flex;
-    height: 100%;
-    width: 100%;
-    position: relative;
-    padding: ${e=>e.$addPadding?"0.6875rem 0rem 0.6875rem 1rem":"0.6875rem 1rem"};
-`,x=e.button`
-    color: ${e=>e.$disabled?a["text-disabled"]:a["text-error"]};
-    white-space: nowrap;
-    ${s["body-md-semibold"]}
-    height: fit-content;
-    padding: 0.6875rem 1rem 0.6875rem 0.5rem;
-    border: none;
-    background: none;
-
-    cursor: ${e=>e.$disabled?"not-allowed":"pointer"};
-`,f=e.button`
-    color: ${e=>e.disabled?a["text-disabled"]:a["text-primary"]};
-    ${s["body-baseline-semibold"]}
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    border: none;
-    background-color: ${a.bg};
-    cursor: ${e=>e.disabled?"not-allowed":"pointer"};
-    padding: 0 1rem 0.6875rem 1rem;
-    padding-top: ${e=>e.$paddingTopRequired?"0.6875rem":"0rem"};
-    width: 100%;
-
-    svg {
-        width: 1em;
-        height: 1em;
-        margin-left: 0.5rem;
-    }
-`,w=e.div`
-    width: 100%;
-    color: ${e=>e.$disabled?a["text-disabled"]:a["text-error"]};
-    border: none;
-    background: ${a.bg};
-    cursor: ${e=>e.$disabled?"not-allowed":"pointer"};
-    padding: 0.6875rem 1rem 0.5rem 1rem;
-`,y=e(r)`
-    width: 100%;
-    user-select: none;
-`,k=e.div`
-    padding: 0 1rem;
-    padding-top: 0.6875rem;
-    padding-bottom: ${e=>e.$isFinalItem?"0.6875rem":"0.5rem"};
-    background-color: ${a.bg};
-    ${d({textSize:"body-md"})}
-
-    ${e=>e.$disabled?o`
-                color: ${a["text-disabled"]};
-            `:e.$selected?o`
-                color: ${a["text-selected"]};
-            `:o`
-                color: ${a.text};
-            `}
-`,j=e(l.BodyMD)`
-    color: ${e=>e.$disabled?a["text-disabled"]:a["text-error"]};
-`,L=e(i.Ul)`
-    color: ${e=>e.$disabled?a["text-disabled"]:a["text-error"]};
-`,M=e(t)`
-    ${e=>e.$disabled?e.$selected?o`
-                    color: ${a["icon-selected-disabled"]};
-                `:o`
-                    color: ${a["icon-disabled-subtle"]};
-                `:e.$selected?o`
-                color: ${a["icon-selected"]};
-            `:o`
-            color: ${a["icon-subtle"]};
-        `};
-`;export{y as AlertContainer,k as Children,c as Container,w as ErrorContainer,L as ErrorList,j as ErrorText,f as ExpandButton,h as HeaderContainer,v as IndicatorLabelContainer,$ as Input,m as InputContainer,u as Label,x as RemoveButton,M as StyledToggleIcon,g as SubLabel,p as TextContainer};
+import"./toggle.styles_1yzqsu.css";const t={label:{desktopLineClamp:"--fds-internal-toggle-label-desktopLineClamp",tabletLineClamp:"--fds-internal-toggle-label-tabletLineClamp",mobileLineClamp:"--fds-internal-toggle-label-mobileLineClamp"}},l="h1fyul7s",e="tybgacj",i="tvkjim3",n="t1aku79x",s="c11szvws",a="n12ofp2c",o="u1l0nsei",g="c17z2k4k",c="tfiow01",p="td5xote",m="t15nuck4",b="tnwn55u",r="t1graj5g",w="t1qqpl3b",f="t1l2ct9g",y="t1tat3es",d="t1nsq3eo",u="t1cyflot",k="txm5wyu",C="i14lgw6r",q="tovnc4j",v="iangfw6",x="l1oixyvr",L="t1elmp69",j="tv1hw4w",z="s17sf3sp",h="i1l466bv",_="ih3od2r",A="r1izng22",G="d194isif",H="ehwglic",I="ejwzsce",M="e1q8ywpe",P="c1mf9nso",T="c9t56r4",B="c1y0x62l",D="c1gmwtb7",E="aeqryui";export{E as alertContainer,P as children,T as childrenIsFinalItem,g as colorBorderError,B as colorTextDisabled,D as colorTextError,s as container,G as disabledColorCursor,M as errorContainer,H as expandButton,I as expandButtonPaddingTopRequired,l as headerContainer,h as indicatorLabelContainer,_ as indicatorLabelContainerAddPadding,C as input,v as inputContainer,x as label,a as noIndicatorContainer,A as removeButton,z as subLabel,e as textContainer,u as toggleContainer,f as toggleContainerDisabled,w as toggleContainerDisabledSelected,r as toggleContainerError,k as toggleContainerHoverDefault,d as toggleContainerHoverSelected,b as toggleContainerNoBorder,p as toggleContainerNoBorderDisabled,c as toggleContainerNoBorderDisabledSelected,m as toggleContainerNoBorderSelected,y as toggleContainerSelected,q as toggleInputDisabled,L as toggleLabelDefault,j as toggleLabelSelected,n as toggleTextContainerDisabledSelected,i as toggleTextContainerSelected,t as tokens,o as useContentWidthContainer};
 //# sourceMappingURL=toggle.styles.js.map