@lifesg/react-design-system 4.0.0-alpha.6 → 4.0.0-alpha.8

package/button/button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.styles.js","sources":["../../src/button/button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Motion,\n    Radius,\n    Spacing,\n} from \"../theme\";\n\nexport const main = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} transparent;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    gap: 0.5rem;\n    border-radius: ${Radius.sm};\n\n    svg,\n    img {\n        flex-shrink: 0;\n        height: 1em;\n        width: 1em;\n    }\n`;\n\nexport const mainIconPositionRight = css`\n    flex-direction: row-reverse;\n`;\n\nexport const mainHasMinWidth = css`\n    min-width: 4rem;\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON STYLE + TEXT COLOR\n// -------------------------------------------------------------------------\nexport const mainStyleDefault = css`\n    background-color: ${Colour[\"bg-primary\"]};\n    color: ${Colour[\"text-inverse\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-primary-hover\"]};\n        }\n    }\n`;\n\nexport const mainStyleDefaultDanger = css`\n    background-color: ${Colour[\"bg-error-strong\"]};\n    color: ${Colour[\"text-inverse\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-error-strong-hover\"]};\n        }\n    }\n`;\n\nexport const mainStyleSecondary = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour[\"border-primary\"]};\n    color: ${Colour[\"text-primary\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleSecondaryDanger = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour[\"border-error-strong\"]};\n    color: ${Colour[\"text-error\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLight = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour.border};\n    color: ${Colour[\"text-primary\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLightDanger = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour.border};\n    color: ${Colour[\"text-error\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLink = css`\n    background-color: transparent;\n    color: ${Colour[\"text-primary\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLinkDanger = css`\n    background-color: transparent;\n    color: ${Colour[\"text-error\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleDisabled = css`\n    background-color: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n    color: ${Colour[\"text-disabled\"]};\n    &:hover {\n        box-shadow: none;\n    }\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON SIZE\n// -------------------------------------------------------------------------\nexport const mainSizeDefault = css`\n    height: 3rem;\n    ${Font[\"heading-xs-semibold\"]}\n    ${MediaQuery.MaxWidth.xxs} {\n        height: auto;\n    }\n`;\n\nexport const mainSizeDefaultIconOnly = css`\n    height: 3rem;\n    width: 3rem;\n`;\n\nexport const mainSizeSmall = css`\n    height: 2.5rem;\n    ${Font[\"body-md-semibold\"]}\n    ${MediaQuery.MaxWidth.xxs} {\n        height: auto;\n    }\n`;\n\nexport const mainSizeSmallIconOnly = css`\n    height: 2.5rem;\n    width: 2.5rem;\n`;\n\nexport const mainSizeLarge = css`\n    height: 4rem;\n    ${Font[\"heading-md-semibold\"]}\n    ${MediaQuery.MaxWidth.xxs} {\n        height: auto;\n    }\n`;\n\nexport const mainSizeLargeIconOnly = css`\n    height: 4rem;\n    width: 4rem;\n`;\n\nexport const spinner = css`\n    flex-shrink: 0;\n`;\n\nexport const spinnerHasChildren = css`\n    margin-right: 0.5rem;\n`;\n"],"names":["main","mainIconPositionRight","mainHasMinWidth","mainStyleDefault","mainStyleDefaultDanger","mainStyleSecondary","mainStyleSecondaryDanger","mainStyleLight","mainStyleLightDanger","mainStyleLink","mainStyleLinkDanger","mainStyleDisabled","mainSizeDefault","mainSizeDefaultIconOnly","mainSizeSmall","mainSizeSmallIconOnly","mainSizeLarge","mainSizeLargeIconOnly","spinner","spinnerHasChildren"],"mappings":"0DAYO,MAAMA,EAAI,UAmBJC,EAAqB,UAIrBC,EAAe,WAOfC,EAAgB,WAWhBC,EAAsB,UAWtBC,EAAkB,UAYlBC,EAAwB,WAYxBC,EAAc,UAYdC,EAAoB,UAYpBC,EAAa,WAWbC,EAAmB,UAWnBC,EAAiB,UAYjBC,EAAe,WAQfC,EAAuB,WAKvBC,EAAa,UAQbC,EAAqB,WAKrBC,EAAa,WAQbC,EAAqB,UAKrBC,EAAO,WAIPC,EAAkB"}
+{"version":3,"file":"button.styles.js","sources":["../../src/button/button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    ComponentToken,\n    Font,\n    Motion,\n    Spacing,\n} from \"../theme\";\n\nexport const main = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} transparent;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    gap: 0.5rem;\n    border-radius: ${ComponentToken.Button[\"radius\"]};\n\n    svg,\n    img {\n        flex-shrink: 0;\n        height: 1em;\n        width: 1em;\n    }\n`;\n\nexport const mainIconPositionRight = css`\n    flex-direction: row-reverse;\n`;\n\nexport const mainIconOnly = css`\n    width: auto;\n    aspect-ratio: 1 / 1;\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const mainHasMinWidth = css`\n    min-width: 4rem;\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON STYLE + TEXT COLOR\n// -------------------------------------------------------------------------\nexport const mainStyleDefault = css`\n    background-color: ${ComponentToken.Button[\"default-colour-bg\"]};\n    color: ${ComponentToken.Button[\"default-colour-text\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${ComponentToken.Button[\n                \"default-colour-bg-hover\"\n            ]};\n        }\n    }\n`;\n\nexport const mainStyleDefaultDanger = css`\n    background-color: ${Colour[\"bg-error-strong\"]};\n    color: ${Colour[\"text-inverse\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-error-strong-hover\"]};\n        }\n    }\n`;\n\nexport const mainStyleSecondary = css`\n    background-color: ${Colour.bg};\n    border-color: ${ComponentToken.Button[\"secondary-colour-border\"]};\n    color: ${ComponentToken.Button[\"secondary-colour-text\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleSecondaryDanger = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour[\"border-error-strong\"]};\n    color: ${Colour[\"text-error\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLight = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour.border};\n    color: ${ComponentToken.Button[\"light-colour-text\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLightDanger = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour.border};\n    color: ${Colour[\"text-error\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLink = css`\n    background-color: transparent;\n    color: ${ComponentToken.Button[\"link-colour-text\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLinkDanger = css`\n    background-color: transparent;\n    color: ${Colour[\"text-error\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleDisabled = css`\n    background-color: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n    color: ${Colour[\"text-disabled\"]};\n    &:hover {\n        box-shadow: none;\n    }\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON SIZE\n// -------------------------------------------------------------------------\nexport const mainSizeDefault = css`\n    min-height: 3rem;\n    ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const mainSizeDefaultIconOnly = css`\n    min-height: 3rem;\n`;\n\nexport const mainSizeSmall = css`\n    min-height: 2.5rem;\n    padding: calc(${Spacing[\"spacing-8\"]} - ${Border[\"width-010\"]})\n        ${Spacing[\"spacing-16\"]};\n    ${Font[\"body-md-semibold\"]}\n`;\n\nexport const mainSizeSmallIconOnly = css`\n    min-height: 2.5rem;\n    padding: calc(${Spacing[\"spacing-8\"]} - ${Border[\"width-010\"]});\n`;\n\nexport const mainSizeLarge = css`\n    min-height: 4rem;\n    ${Font[\"heading-md-semibold\"]}\n`;\n\nexport const mainSizeLargeIconOnly = css`\n    min-height: 4rem;\n`;\n\nexport const spinner = css`\n    flex-shrink: 0;\n`;\n\nexport const spinnerHasChildren = css`\n    margin-right: 0.5rem;\n`;\n"],"names":["main","mainIconPositionRight","mainIconOnly","mainHasMinWidth","mainStyleDefault","mainStyleDefaultDanger","mainStyleSecondary","mainStyleSecondaryDanger","mainStyleLight","mainStyleLightDanger","mainStyleLink","mainStyleLinkDanger","mainStyleDisabled","mainSizeDefault","mainSizeDefaultIconOnly","mainSizeSmall","mainSizeSmallIconOnly","mainSizeLarge","mainSizeLargeIconOnly","spinner","spinnerHasChildren"],"mappings":"0DAWO,MAAMA,EAAI,UAmBJC,EAAqB,UAIrBC,EAAY,WAMZC,EAAe,WAOfC,EAAgB,UAahBC,EAAsB,UAWtBC,EAAkB,WAYlBC,EAAwB,UAYxBC,EAAc,UAYdC,EAAoB,WAYpBC,EAAa,UAWbC,EAAmB,UAWnBC,EAAiB,WAYjBC,EAAe,WAKfC,EAAuB,UAIvBC,EAAa,WAObC,EAAqB,WAKrBC,EAAa,UAKbC,EAAqB,WAIrBC,EAAO,WAIPC,EAAkB"}

package/button/button.styles_19i4dfq.css

@@ -0,0 +1,21 @@
+@layer fds{.mf6do54{border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);cursor:pointer;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;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:var(--fds-spacing-8) var(--fds-spacing-16);gap:0.5rem;border-radius:var(--fds-button-radius);}.mf6do54 svg,.mf6do54 img{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1em;width:1em;}
+.moaxzdy{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.m1en642a{width:auto;aspect-ratio:1/1;padding:var(--fds-spacing-8);}
+.m1jxbf2q{min-width:4rem;}
+.mharb8i{background-color:var(--fds-button-default-colour-bg);color:var(--fds-button-default-colour-text);}@media (pointer: fine){.mharb8i:hover,.mharb8i:active{background-color:var(--fds-button-default-colour-bg-hover);}}
+.mbs4ndg{background-color:var(--fds-colour-bg-error-strong);color:var(--fds-colour-text-inverse);}@media (pointer: fine){.mbs4ndg:hover,.mbs4ndg:active{background-color:var(--fds-colour-bg-error-strong-hover);}}
+.m1taerhv{background-color:var(--fds-colour-bg);border-color:var(--fds-button-secondary-colour-border);color:var(--fds-button-secondary-colour-text);}@media (pointer: fine){.m1taerhv:hover,.m1taerhv:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m8hnmz5{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border-error-strong);color:var(--fds-colour-text-error);}@media (pointer: fine){.m8hnmz5:hover,.m8hnmz5:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m53fwwa{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border);color:var(--fds-button-light-colour-text);}@media (pointer: fine){.m53fwwa:hover,.m53fwwa:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m1557ko0{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border);color:var(--fds-colour-text-error);}@media (pointer: fine){.m1557ko0:hover,.m1557ko0:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m70z5yw{background-color:transparent;color:var(--fds-button-link-colour-text);}@media (pointer: fine){.m70z5yw:hover,.m70z5yw:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.mc532iy{background-color:transparent;color:var(--fds-colour-text-error);}@media (pointer: fine){.mc532iy:hover,.mc532iy:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m1knftbn{background-color:var(--fds-colour-bg-disabled);cursor:not-allowed;color:var(--fds-colour-text-disabled);}.m1knftbn:hover{box-shadow:none;}
+.m18n5exw{min-height:3rem;font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);}
+.m3n7mqo{min-height:3rem;}
+.m1ytkx3r{min-height:2.5rem;padding:calc(var(--fds-spacing-8) - var(--fds-border-width-010)) var(--fds-spacing-16);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.m1c1mlhm{min-height:2.5rem;padding:calc(var(--fds-spacing-8) - var(--fds-border-width-010));}
+.me78sau{min-height:4rem;font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);}
+.m17i3scc{min-height:4rem;}
+.s1joklnz{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+.sv7ox5f{margin-right:0.5rem;}}

package/button/types.d.ts

@@ -8,6 +8,11 @@ export type ButtonIconPosition = "left" | "right";
  * behavior.
  */
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Test ID for the button element.
+     *
+     * @default "button"
+     */
     "data-testid"?: string | undefined;
     /**
      * Visual style variant of the button.

package/calendar/calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.js","sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useState } from \"react\";\n\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport * as styles from \"./calendar.styles\";\nimport type { CalendarProps } from \"./types\";\n\n/**\n * Date picker calendar for single-date or multi-date selection.\n */\nexport const Calendar = (props: CalendarProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        className,\n        styleType = \"bordered\",\n        variant = \"single\",\n        id,\n        minDate,\n        maxDate,\n        disabledDates,\n        allowDisabledSelection,\n        showActiveMonthDaysOnly,\n        onHover,\n        onYearMonthDisplayChange,\n        \"data-testid\": dataTestId,\n    } = props;\n\n    const isMultiVariant = props.variant === \"multi\";\n    const controlledValue = isMultiVariant ? undefined : props.value;\n    const controlledValues = isMultiVariant ? props.values : undefined;\n    const minSelectable = isMultiVariant ? props.minSelectable : undefined;\n    const maxSelectable = isMultiVariant ? props.maxSelectable : undefined;\n\n    const resolveValues = (): string[] => {\n        if (controlledValues !== undefined) return controlledValues;\n        if (controlledValue !== undefined) return [controlledValue];\n        return [];\n    };\n\n    const [selectedValues, setSelectedValues] =\n        useState<string[]>(resolveValues);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (controlledValues !== undefined) {\n            setSelectedValues(controlledValues);\n            return;\n        }\n\n        if (controlledValue !== undefined) {\n            setSelectedValues([controlledValue]);\n            return;\n        }\n\n        setSelectedValues([]);\n    }, [controlledValue, controlledValues]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelect = (date: string) => {\n        setSelectedValues([date]);\n        if (props.variant === \"multi\") {\n            return;\n        }\n\n        props.onChange?.(date);\n        props.onSelect?.(date);\n    };\n\n    const handleMultiSelect = (nextValues: string[]) => {\n        setSelectedValues(nextValues);\n        if (props.variant === \"multi\") {\n            props.onChange?.(nextValues);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    return (\n        <div\n            className={clsx(\n                styles.wrapper,\n                styleType === \"bordered\" && styles.wrapperBordered,\n                className\n            )}\n            id={id}\n            data-testid={dataTestId}\n        >\n            <InternalCalendar\n                value={selectedValues[0]}\n                values={selectedValues}\n                initialCalendarDate={selectedValues[0]}\n                isFocusable={true}\n                variant={variant}\n                minDate={minDate}\n                maxDate={maxDate}\n                disabledDates={disabledDates}\n                allowDisabledSelection={allowDisabledSelection}\n                showActiveMonthDaysOnly={showActiveMonthDaysOnly}\n                onHover={onHover}\n                onYearMonthDisplayChange={onYearMonthDisplayChange}\n                onSelect={handleSelect}\n                onChange={handleMultiSelect}\n                minSelectable={minSelectable}\n                maxSelectable={maxSelectable}\n            />\n        </div>\n    );\n};\n"],"names":["Calendar","props","className","styleType","variant","id","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onHover","onYearMonthDisplayChange","dataTestId","isMultiVariant","controlledValue","undefined","value","controlledValues","values","minSelectable","maxSelectable","selectedValues","setSelectedValues","useState","useEffect","_jsx","clsx","styles.wrapper","styles.wrapperBordered","children","InternalCalendar","initialCalendarDate","isFocusable","onSelect","date","_a","onChange","call","_b","nextValues"],"mappings":"6TAUO,MAAMA,EAAYC,IAIrB,MAAMC,UACFA,EAASC,UACTA,EAAY,WAAUC,QACtBA,EAAU,SAAQC,GAClBA,EAAEC,QACFA,EAAOC,QACPA,EAAOC,cACPA,EAAaC,uBACbA,EAAsBC,wBACtBA,EAAuBC,QACvBA,EAAOC,yBACPA,EACA,cAAeC,GACfZ,EAEEa,EAAmC,UAAlBb,EAAMG,QACvBW,EAAkBD,OAAiBE,EAAYf,EAAMgB,MACrDC,EAAmBJ,EAAiBb,EAAMkB,YAASH,EACnDI,EAAgBN,EAAiBb,EAAMmB,mBAAgBJ,EACvDK,EAAgBP,EAAiBb,EAAMoB,mBAAgBL,GAQtDM,EAAgBC,GACnBC,GAPkB,SACOR,IAArBE,EAAuCA,OACnBF,IAApBD,EAAsC,CAACA,GACpC,KASXU,GAAU,KAWNF,OAVyBP,IAArBE,OAKoBF,IAApBD,EAKc,GAJI,CAACA,GALDG,EASD,GACtB,CAACH,EAAiBG,IAyBrB,OACIQ,SACIxB,UAAWyB,EACPC,EACc,aAAdzB,GAA4B0B,EAC5B3B,GAEJG,GAAIA,gBACSQ,EAAUiB,SAEvBJ,EAACK,EAAgB,CACbd,MAAOK,EAAe,GACtBH,OAAQG,EACRU,oBAAqBV,EAAe,GACpCW,aAAa,EACb7B,QAASA,EACTE,QAASA,EACTC,QAASA,EACTC,cAAeA,EACfC,uBAAwBA,EACxBC,wBAAyBA,EACzBC,QAASA,EACTC,yBAA0BA,EAC1BsB,SA3CUC,YAClBZ,EAAkB,CAACY,IACG,UAAlBlC,EAAMG,UAII,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGkC,GACH,QAAdI,EAAAtC,EAAMiC,gBAAQ,IAAAK,GAAAA,EAAAD,KAAArC,EAAGkC,GAAK,EAqCdE,SAlCeG,UACvBjB,EAAkBiB,GACI,UAAlBvC,EAAMG,UACQ,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGuC,GACrB,EA+BQpB,cAAeA,EACfC,cAAeA,KAEjB"}
+{"version":3,"file":"calendar.js","sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useState } from \"react\";\n\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport * as styles from \"./calendar.styles\";\nimport type { CalendarProps } from \"./types\";\n\n// @catalog\n/**\n * Date picker calendar for single-date or multi-date selection.\n */\nexport const Calendar = (props: CalendarProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        className,\n        styleType = \"bordered\",\n        variant = \"single\",\n        id,\n        minDate,\n        maxDate,\n        disabledDates,\n        allowDisabledSelection,\n        showActiveMonthDaysOnly,\n        onHover,\n        onYearMonthDisplayChange,\n        \"data-testid\": dataTestId,\n    } = props;\n\n    const isMultiVariant = props.variant === \"multi\";\n    const controlledValue = isMultiVariant ? undefined : props.value;\n    const controlledValues = isMultiVariant ? props.values : undefined;\n    const minSelectable = isMultiVariant ? props.minSelectable : undefined;\n    const maxSelectable = isMultiVariant ? props.maxSelectable : undefined;\n\n    const resolveValues = (): string[] => {\n        if (controlledValues !== undefined) return controlledValues;\n        if (controlledValue !== undefined) return [controlledValue];\n        return [];\n    };\n\n    const [selectedValues, setSelectedValues] =\n        useState<string[]>(resolveValues);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (controlledValues !== undefined) {\n            setSelectedValues(controlledValues);\n            return;\n        }\n\n        if (controlledValue !== undefined) {\n            setSelectedValues([controlledValue]);\n            return;\n        }\n\n        setSelectedValues([]);\n    }, [controlledValue, controlledValues]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelect = (date: string) => {\n        setSelectedValues([date]);\n        if (props.variant === \"multi\") {\n            return;\n        }\n\n        props.onChange?.(date);\n        props.onSelect?.(date);\n    };\n\n    const handleMultiSelect = (nextValues: string[]) => {\n        setSelectedValues(nextValues);\n        if (props.variant === \"multi\") {\n            props.onChange?.(nextValues);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    return (\n        <div\n            className={clsx(\n                styles.wrapper,\n                styleType === \"bordered\" && styles.wrapperBordered,\n                className\n            )}\n            id={id}\n            data-testid={dataTestId}\n        >\n            <InternalCalendar\n                value={selectedValues[0]}\n                values={selectedValues}\n                initialCalendarDate={selectedValues[0]}\n                isFocusable={true}\n                variant={variant}\n                minDate={minDate}\n                maxDate={maxDate}\n                disabledDates={disabledDates}\n                allowDisabledSelection={allowDisabledSelection}\n                showActiveMonthDaysOnly={showActiveMonthDaysOnly}\n                onHover={onHover}\n                onYearMonthDisplayChange={onYearMonthDisplayChange}\n                onSelect={handleSelect}\n                onChange={handleMultiSelect}\n                minSelectable={minSelectable}\n                maxSelectable={maxSelectable}\n            />\n        </div>\n    );\n};\n"],"names":["Calendar","props","className","styleType","variant","id","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onHover","onYearMonthDisplayChange","dataTestId","isMultiVariant","controlledValue","undefined","value","controlledValues","values","minSelectable","maxSelectable","selectedValues","setSelectedValues","useState","useEffect","_jsx","clsx","styles.wrapper","styles.wrapperBordered","children","InternalCalendar","initialCalendarDate","isFocusable","onSelect","date","_a","onChange","call","_b","nextValues"],"mappings":"6TAWO,MAAMA,EAAYC,IAIrB,MAAMC,UACFA,EAASC,UACTA,EAAY,WAAUC,QACtBA,EAAU,SAAQC,GAClBA,EAAEC,QACFA,EAAOC,QACPA,EAAOC,cACPA,EAAaC,uBACbA,EAAsBC,wBACtBA,EAAuBC,QACvBA,EAAOC,yBACPA,EACA,cAAeC,GACfZ,EAEEa,EAAmC,UAAlBb,EAAMG,QACvBW,EAAkBD,OAAiBE,EAAYf,EAAMgB,MACrDC,EAAmBJ,EAAiBb,EAAMkB,YAASH,EACnDI,EAAgBN,EAAiBb,EAAMmB,mBAAgBJ,EACvDK,EAAgBP,EAAiBb,EAAMoB,mBAAgBL,GAQtDM,EAAgBC,GACnBC,GAPkB,SACOR,IAArBE,EAAuCA,OACnBF,IAApBD,EAAsC,CAACA,GACpC,KASXU,GAAU,KAWNF,OAVyBP,IAArBE,OAKoBF,IAApBD,EAKc,GAJI,CAACA,GALDG,EASD,GACtB,CAACH,EAAiBG,IAyBrB,OACIQ,SACIxB,UAAWyB,EACPC,EACc,aAAdzB,GAA4B0B,EAC5B3B,GAEJG,GAAIA,gBACSQ,EAAUiB,SAEvBJ,EAACK,EAAgB,CACbd,MAAOK,EAAe,GACtBH,OAAQG,EACRU,oBAAqBV,EAAe,GACpCW,aAAa,EACb7B,QAASA,EACTE,QAASA,EACTC,QAASA,EACTC,cAAeA,EACfC,uBAAwBA,EACxBC,wBAAyBA,EACzBC,QAASA,EACTC,yBAA0BA,EAC1BsB,SA3CUC,YAClBZ,EAAkB,CAACY,IACG,UAAlBlC,EAAMG,UAII,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGkC,GACH,QAAdI,EAAAtC,EAAMiC,gBAAQ,IAAAK,GAAAA,EAAAD,KAAArC,EAAGkC,GAAK,EAqCdE,SAlCeG,UACvBjB,EAAkBiB,GACI,UAAlBvC,EAAMG,UACQ,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGuC,GACrB,EA+BQpB,cAAeA,EACfC,cAAeA,KAEjB"}

package/calendar/types.d.ts

@@ -28,7 +28,7 @@ interface CalendarBaseProps extends CommonCalendarProps {
  *
  * Pass `variant="single"` or omit `variant` to activate this mode.
  */
-export interface CalendarSingleProps extends CalendarBaseProps {
+export interface CalendarSingleProps {
     /**
      * @default "single"
      */
@@ -54,7 +54,7 @@ export interface CalendarSingleProps extends CalendarBaseProps {
  *
  * Requires `variant="multi"`.
  */
-export interface CalendarMultiProps extends CalendarBaseProps {
+export interface CalendarMultiProps {
     variant: "multi";
     /** Selected dates in `YYYY-MM-DD` format */
     values?: string[] | undefined;
@@ -70,4 +70,4 @@ export interface CalendarMultiProps extends CalendarBaseProps {
     onChange?: ((values: string[]) => void) | undefined;
 }
 /** Props for the `Calendar` component */
-export type CalendarProps = CalendarSingleProps | CalendarMultiProps;
+export type CalendarProps = CalendarBaseProps & (CalendarSingleProps | CalendarMultiProps);

package/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../src/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext } from \"react\";\n\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./card.styles\";\nimport type { CardProps } from \"./types\";\n\n/** A themed container surface for grouping related content. */\nexport const Card = ({\n    children,\n    className,\n    \"data-testid\": dataTestId = \"card\",\n    ...otherProps\n}: CardProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const theme = useContext(ThemeContext);\n    const isDarkMode = theme?.mode === \"dark\";\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyBL>{children}</Typography.BodyBL>\n        ) : (\n            children\n        );\n\n    return (\n        <div\n            {...otherProps}\n            data-testid={dataTestId}\n            className={clsx(\n                styles.card,\n                isDarkMode ? styles.cardDarkMode : styles.cardLightMode,\n                className\n            )}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["Card","_a","children","className","dataTestId","otherProps","__rest","theme","useContext","ThemeContext","isDarkMode","mode","_jsx","Object","assign","clsx","styles.card","styles.cardDarkMode","styles.cardLightMode","Typography","BodyBL"],"mappings":"iVASO,MAAMA,EAAQC,IAAA,IAAAC,SACjBA,EAAQC,UACRA,EACA,cAAeC,EAAa,QAAMH,EAC/BI,EAAUC,EAAAL,EAJI,wCASjB,MAAMM,EAAQC,EAAWC,GACnBC,EAA6B,UAAhBH,aAAK,EAALA,EAAOI,MAY1B,OACIC,EAAA,MAAAC,OAAAC,OAAA,CAAA,EACQT,EAAU,CAAA,cACDD,EACbD,UAAWY,EACPC,EACAN,EAAaO,EAAsBC,EACnCf,GACHD,SAde,iBAAbA,EACHU,EAACO,EAAWC,OAAM,CAAAlB,SAAEA,IAA6B,IAgB/C"}
+{"version":3,"file":"card.js","sources":["../../src/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext } from \"react\";\n\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./card.styles\";\nimport type { CardProps } from \"./types\";\n\n// @catalog\n/** A themed container surface for grouping related content. */\nexport const Card = ({\n    children,\n    className,\n    \"data-testid\": dataTestId = \"card\",\n    ...otherProps\n}: CardProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const theme = useContext(ThemeContext);\n    const isDarkMode = theme?.mode === \"dark\";\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyBL>{children}</Typography.BodyBL>\n        ) : (\n            children\n        );\n\n    return (\n        <div\n            {...otherProps}\n            data-testid={dataTestId}\n            className={clsx(\n                styles.card,\n                isDarkMode ? styles.cardDarkMode : styles.cardLightMode,\n                className\n            )}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["Card","_a","children","className","dataTestId","otherProps","__rest","theme","useContext","ThemeContext","isDarkMode","mode","_jsx","Object","assign","clsx","styles.card","styles.cardDarkMode","styles.cardLightMode","Typography","BodyBL"],"mappings":"iVAUO,MAAMA,EAAQC,IAAA,IAAAC,SACjBA,EAAQC,UACRA,EACA,cAAeC,EAAa,QAAMH,EAC/BI,EAAUC,EAAAL,EAJI,wCASjB,MAAMM,EAAQC,EAAWC,GACnBC,EAA6B,UAAhBH,aAAK,EAALA,EAAOI,MAY1B,OACIC,EAAA,MAAAC,OAAAC,OAAA,CAAA,EACQT,EAAU,CAAA,cACDD,EACbD,UAAWY,EACPC,EACAN,EAAaO,EAAsBC,EACnCf,GACHD,SAde,iBAAbA,EACHU,EAACO,EAAWC,OAAM,CAAAlB,SAAEA,IAA6B,IAgB/C"}

package/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import {\n    MinusSquareFillIcon,\n    SquareFillIcon,\n    SquareIcon,\n    SquareTickFillIcon,\n} from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef } from \"react\";\n\nimport * as styles from \"./checkbox.styles\";\nimport type { CheckboxProps } from \"./types\";\n\n/**\n * A styled checkbox input with indeterminate state support.\n */\nexport const Checkbox = ({\n    className,\n    checked,\n    disabled,\n    focusableWhenDisabled,\n    indeterminate,\n    displaySize = \"default\",\n    onChange,\n    id,\n    tabIndex,\n    ...otherProps\n}: CheckboxProps): JSX.Element => {\n    // =============================================================================\n    // REFS\n    // =============================================================================\n    const checkRef = useRef<HTMLInputElement>(null);\n\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n        onChange?.(event);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        if (checkRef.current) {\n            checkRef.current.indeterminate = indeterminate ?? false;\n        }\n    }, [indeterminate]);\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderIcon = () => {\n        if (indeterminate) {\n            return (\n                <MinusSquareFillIcon\n                    className={clsx(\n                        styles.icon,\n                        styles.selectedIcon,\n                        disabled && styles.iconDisabled\n                    )}\n                    data-testid=\"indeterminate\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (checked) {\n            return (\n                <SquareTickFillIcon\n                    className={clsx(\n                        styles.icon,\n                        styles.selectedIcon,\n                        disabled && styles.iconDisabled\n                    )}\n                    data-testid=\"checkmark\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (disabled) {\n            return (\n                <SquareFillIcon\n                    className={clsx(styles.icon, styles.iconDisabled)}\n                    data-testid=\"empty-disabled-checkbox\"\n                    aria-hidden\n                />\n            );\n        }\n\n        return (\n            <SquareIcon\n                className={clsx(styles.icon, styles.uncheckedIcon)}\n                data-testid=\"empty-checkbox\"\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <div\n            className={clsx(\n                styles.container,\n                displaySize === \"small\" && styles.containerSmall,\n                className\n            )}\n            data-testid=\"checkbox\"\n        >\n            <input\n                id={id}\n                className={clsx(\n                    styles.input,\n                    !disabled && styles.inputActive,\n                    disabled && styles.inputDisabledVisual\n                )}\n                data-testid=\"checkbox-input\"\n                type=\"checkbox\"\n                checked={checked}\n                ref={checkRef}\n                tabIndex={isFocusableWhenDisabled ? 0 : tabIndex}\n                disabled={isNativeDisabled}\n                aria-disabled={isFocusableWhenDisabled}\n                aria-checked={indeterminate ? \"mixed\" : checked}\n                onChange={handleOnChange}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </div>\n    );\n};\n"],"names":["Checkbox","_a","className","checked","disabled","focusableWhenDisabled","indeterminate","displaySize","onChange","id","tabIndex","otherProps","__rest","checkRef","useRef","isFocusableWhenDisabled","isNativeDisabled","useEffect","current","_jsxs","clsx","styles.container","styles.containerSmall","children","_jsx","Object","assign","styles.input","styles.inputActive","styles.inputDisabledVisual","type","ref","event","preventDefault","MinusSquareFillIcon","styles.icon","styles.selectedIcon","styles.iconDisabled","SquareTickFillIcon","SquareFillIcon","SquareIcon","styles.uncheckedIcon"],"mappings":"odAeO,MAAMA,EAAYC,QAAAC,UACrBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,sBACRA,EAAqBC,cACrBA,EAAaC,YACbA,EAAc,UAASC,SACvBA,EAAQC,GACRA,EAAEC,SACFA,KACGC,EAAUC,EAAAX,EAVQ,CAAA,YAAA,UAAA,WAAA,wBAAA,gBAAA,cAAA,WAAA,KAAA,aAerB,MAAMY,EAAWC,EAAyB,MAEpCC,IAA4BX,KAAcC,EAC1CW,IAAqBZ,IAAaC,EAiBxCY,GAAU,KACFJ,EAASK,UACTL,EAASK,QAAQZ,cAAgBA,SAAAA,EACrC,GACD,CAACA,IAqDJ,OACIa,SACIjB,UAAWkB,EACPC,EACgB,UAAhBd,GAA2Be,EAC3BpB,GACH,cACW,WAAUqB,SAAA,CAEtBC,EAAA,QAAAC,OAAAC,OAAA,CACIjB,GAAIA,EACJP,UAAWkB,EACPO,GACCvB,GAAYwB,EACbxB,GAAYyB,GACf,cACW,iBACZC,KAAK,WACL3B,QAASA,EACT4B,IAAKlB,EACLH,SAAUK,EAA0B,EAAIL,EACxCN,SAAUY,EAAgB,gBACXD,iBACDT,EAAgB,QAAUH,EACxCK,SA7FYwB,IAChB5B,EACA4B,EAAMC,iBAGVzB,SAAAA,EAAWwB,EAAM,GAyFLrB,IAxERL,EAEIkB,EAACU,EAAmB,CAChBhC,UAAWkB,EACPe,EACAC,EACAhC,GAAYiC,GACf,cACW,gBAAe,eAAA,IAMnClC,EAEIqB,EAACc,EAAkB,CACfpC,UAAWkB,EACPe,EACAC,EACAhC,GAAYiC,GACf,cACW,YAAW,eAAA,IAM/BjC,EAEIoB,EAACe,EAAc,CACXrC,UAAWkB,EAAKe,EAAaE,iBACjB,0BAAyB,eAAA,IAO7Cb,EAACgB,EAAU,CACPtC,UAAWkB,EAAKe,EAAaM,iBACjB,iBAAgB,eAAA,MAkC9B"}
+{"version":3,"file":"checkbox.js","sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import {\n    MinusSquareFillIcon,\n    SquareFillIcon,\n    SquareIcon,\n    SquareTickFillIcon,\n} from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef } from \"react\";\n\nimport * as styles from \"./checkbox.styles\";\nimport type { CheckboxProps } from \"./types\";\n\n// @catalog\n/**\n * A styled checkbox input with indeterminate state support.\n */\nexport const Checkbox = ({\n    className,\n    checked,\n    disabled,\n    focusableWhenDisabled,\n    indeterminate,\n    displaySize = \"default\",\n    onChange,\n    id,\n    tabIndex,\n    ...otherProps\n}: CheckboxProps): JSX.Element => {\n    // =============================================================================\n    // REFS\n    // =============================================================================\n    const checkRef = useRef<HTMLInputElement>(null);\n\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n        onChange?.(event);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        if (checkRef.current) {\n            checkRef.current.indeterminate = indeterminate ?? false;\n        }\n    }, [indeterminate]);\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderIcon = () => {\n        if (indeterminate) {\n            return (\n                <MinusSquareFillIcon\n                    className={clsx(\n                        styles.icon,\n                        styles.selectedIcon,\n                        disabled && styles.iconDisabled\n                    )}\n                    data-testid=\"indeterminate\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (checked) {\n            return (\n                <SquareTickFillIcon\n                    className={clsx(\n                        styles.icon,\n                        styles.selectedIcon,\n                        disabled && styles.iconDisabled\n                    )}\n                    data-testid=\"checkmark\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (disabled) {\n            return (\n                <SquareFillIcon\n                    className={clsx(styles.icon, styles.iconDisabled)}\n                    data-testid=\"empty-disabled-checkbox\"\n                    aria-hidden\n                />\n            );\n        }\n\n        return (\n            <SquareIcon\n                className={clsx(styles.icon, styles.uncheckedIcon)}\n                data-testid=\"empty-checkbox\"\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <div\n            className={clsx(\n                styles.container,\n                displaySize === \"small\" && styles.containerSmall,\n                className\n            )}\n            data-testid=\"checkbox\"\n        >\n            <input\n                id={id}\n                className={clsx(\n                    styles.input,\n                    !disabled && styles.inputActive,\n                    disabled && styles.inputDisabledVisual\n                )}\n                data-testid=\"checkbox-input\"\n                type=\"checkbox\"\n                checked={checked}\n                ref={checkRef}\n                tabIndex={isFocusableWhenDisabled ? 0 : tabIndex}\n                disabled={isNativeDisabled}\n                aria-disabled={isFocusableWhenDisabled}\n                aria-checked={indeterminate ? \"mixed\" : checked}\n                onChange={handleOnChange}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </div>\n    );\n};\n"],"names":["Checkbox","_a","className","checked","disabled","focusableWhenDisabled","indeterminate","displaySize","onChange","id","tabIndex","otherProps","__rest","checkRef","useRef","isFocusableWhenDisabled","isNativeDisabled","useEffect","current","_jsxs","clsx","styles.container","styles.containerSmall","children","_jsx","Object","assign","styles.input","styles.inputActive","styles.inputDisabledVisual","type","ref","event","preventDefault","MinusSquareFillIcon","styles.icon","styles.selectedIcon","styles.iconDisabled","SquareTickFillIcon","SquareFillIcon","SquareIcon","styles.uncheckedIcon"],"mappings":"odAgBO,MAAMA,EAAYC,QAAAC,UACrBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,sBACRA,EAAqBC,cACrBA,EAAaC,YACbA,EAAc,UAASC,SACvBA,EAAQC,GACRA,EAAEC,SACFA,KACGC,EAAUC,EAAAX,EAVQ,CAAA,YAAA,UAAA,WAAA,wBAAA,gBAAA,cAAA,WAAA,KAAA,aAerB,MAAMY,EAAWC,EAAyB,MAEpCC,IAA4BX,KAAcC,EAC1CW,IAAqBZ,IAAaC,EAiBxCY,GAAU,KACFJ,EAASK,UACTL,EAASK,QAAQZ,cAAgBA,SAAAA,EACrC,GACD,CAACA,IAqDJ,OACIa,SACIjB,UAAWkB,EACPC,EACgB,UAAhBd,GAA2Be,EAC3BpB,GACH,cACW,WAAUqB,SAAA,CAEtBC,EAAA,QAAAC,OAAAC,OAAA,CACIjB,GAAIA,EACJP,UAAWkB,EACPO,GACCvB,GAAYwB,EACbxB,GAAYyB,GACf,cACW,iBACZC,KAAK,WACL3B,QAASA,EACT4B,IAAKlB,EACLH,SAAUK,EAA0B,EAAIL,EACxCN,SAAUY,EAAgB,gBACXD,iBACDT,EAAgB,QAAUH,EACxCK,SA7FYwB,IAChB5B,EACA4B,EAAMC,iBAGVzB,SAAAA,EAAWwB,EAAM,GAyFLrB,IAxERL,EAEIkB,EAACU,EAAmB,CAChBhC,UAAWkB,EACPe,EACAC,EACAhC,GAAYiC,GACf,cACW,gBAAe,eAAA,IAMnClC,EAEIqB,EAACc,EAAkB,CACfpC,UAAWkB,EACPe,EACAC,EACAhC,GAAYiC,GACf,cACW,YAAW,eAAA,IAM/BjC,EAEIoB,EAACe,EAAc,CACXrC,UAAWkB,EAAKe,EAAaE,iBACjB,0BAAyB,eAAA,IAO7Cb,EAACgB,EAAU,CACPtC,UAAWkB,EAAKe,EAAaM,iBACjB,iBAAgB,eAAA,MAkC9B"}

package/checkbox/types.d.ts

@@ -3,6 +3,10 @@ export type CheckboxSize = "small" | "default";
  * Props for the `Checkbox` component.
  */
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.
+     */
+    checked?: boolean | undefined;
     /**
      * Controls the visual size of the checkbox.
      *

package/cjs/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../../../src/accordion/accordion.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport * as styles from \"./accordion.styles\";\nimport { AccordionContext } from \"./accordion-context\";\nimport { AccordionItem } from \"./accordion-item\";\nimport type { AccordionProps } from \"./types\";\n\nconst AccordionBase = ({\n    children,\n    title,\n    enableExpandAll = true,\n    initialDisplay = \"expand-all\",\n    showTitleInMobile = false,\n    id,\n    \"data-testid\": testId,\n    className,\n    headingLevel = 2,\n    onExpandCollapseChange,\n}: AccordionProps): JSX.Element => {\n    const [expandAll, setExpandAll] = useState<boolean>(\n        initialDisplay === \"expand-all\"\n    );\n    const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n    const [itemState, setItemState] = useState<Record<string, boolean>>({});\n\n    useEffect(() => {\n        setHasFirstLoad(true);\n    }, []);\n\n    useEffect(() => {\n        if (hasFirstLoad) {\n            onExpandCollapseChange?.(expandAll);\n        }\n    }, [expandAll, hasFirstLoad]);\n\n    useEffect(() => {\n        if (hasFirstLoad) {\n            const itemStates = Object.values(itemState);\n            if (itemStates.length > 0) {\n                const allExpanded = itemStates.every((state) => state === true);\n                const allCollapsed = itemStates.every(\n                    (state) => state === false\n                );\n\n                if (allExpanded && !expandAll) {\n                    setExpandAll(true);\n                } else if (allCollapsed && expandAll) {\n                    setExpandAll(false);\n                }\n            }\n        }\n    }, [itemState, expandAll, hasFirstLoad]);\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        setExpandAll((prevExpandValue) => {\n            const expandValue = !prevExpandValue;\n\n            const updatedChildState = Object.keys(itemState).reduce(\n                (acc, key) => {\n                    acc[key] = expandValue;\n                    return acc;\n                },\n                {} as typeof itemState\n            );\n\n            setItemState(updatedChildState);\n            return expandValue;\n        });\n    };\n\n    const onItemStateChange = (id: string, isExpanded: boolean) => {\n        setItemState((prev) => ({ ...prev, [id]: isExpanded }));\n    };\n\n    const onItemDeregister = (id: string) => {\n        setItemState((prev) => {\n            const newState = { ...prev };\n            delete newState[id];\n            return newState;\n        });\n    };\n\n    const renderCollapseExpandAll = () => {\n        return (\n            <Button\n                className={styles.expandCollapseLink}\n                data-testid=\"accordion-expand-collapse-button\"\n                onClick={handleExpandCollapseClick}\n                styleType=\"link\"\n                type=\"button\"\n                sizeType=\"small\"\n            >\n                {expandAll ? \"Hide all\" : \"Show all\"}\n            </Button>\n        );\n    };\n\n    const renderTitleWrapper = () => {\n        if (!title && !enableExpandAll) {\n            return null;\n        }\n\n        return (\n            <div\n                className={clsx(\n                    styles.titleWrapper,\n                    !showTitleInMobile &&\n                        !enableExpandAll &&\n                        styles.titleWrapperHidden\n                )}\n            >\n                {title && (\n                    <h2\n                        className={clsx(\n                            styles.title,\n                            !showTitleInMobile && styles.titleHidden\n                        )}\n                        data-testid=\"accordion-title\"\n                        aria-level={headingLevel}\n                    >\n                        {title}\n                    </h2>\n                )}\n                {enableExpandAll && renderCollapseExpandAll()}\n            </div>\n        );\n    };\n\n    return (\n        <AccordionContext.Provider\n            value={{\n                expandAll,\n                itemHeadingLevel: headingLevel\n                    ? title\n                        ? headingLevel + 1\n                        : headingLevel\n                    : undefined,\n                onItemStateChange,\n                onItemDeregister,\n                itemState,\n            }}\n        >\n            <div\n                id={id}\n                data-testid={testId}\n                className={clsx(styles.accordionWrapper, className)}\n            >\n                {renderTitleWrapper()}\n                {children}\n            </div>\n        </AccordionContext.Provider>\n    );\n};\n\n/**\n * A vertically stacked set of collapsible content panels.\n *\n * Use `Accordion` to organise related content into independently expandable\n * sections with shared expand/collapse state. The container synchronises item\n * states and maintains correct heading-level hierarchy.\n *\n * Sub-components:\n * - `Accordion.Item` — a single collapsible panel with an imperative ref handle.\n */\nexport const Accordion = Object.assign(AccordionBase, {\n    /**\n     * Renders an individual collapsible section within an `Accordion`.\n     *\n     * Each item has a clickable header that toggles its content panel. The expanded\n     * state can be individually controlled via the `expanded` prop, or left to the\n     * parent `Accordion` to manage through its \"Show all\" / \"Hide all\" mechanism.\n     * Exposes an imperative ref handle (`AccordionItemHandle`) for programmatic\n     * expand/collapse control.\n     */\n    Item: AccordionItem,\n});\n"],"names":["Accordion","Object","assign","children","title","enableExpandAll","initialDisplay","showTitleInMobile","id","testId","className","headingLevel","onExpandCollapseChange","expandAll","setExpandAll","useState","hasFirstLoad","setHasFirstLoad","itemState","setItemState","useEffect","itemStates","values","length","allExpanded","every","state","allCollapsed","handleExpandCollapseClick","event","preventDefault","prevExpandValue","expandValue","updatedChildState","keys","reduce","acc","key","_jsx","AccordionContext","Provider","value","itemHeadingLevel","undefined","onItemStateChange","isExpanded","prev","onItemDeregister","newState","_jsxs","clsx","styles.accordionWrapper","styles.titleWrapper","styles.titleWrapperHidden","styles.title","styles.titleHidden","Button","styles.expandCollapseLink","onClick","styleType","type","sizeType","Item","AccordionItem"],"mappings":"iTAUA,MA8JaA,EAAYC,OAAOC,QA9JV,EAClBC,WACAC,QACAC,mBAAkB,EAClBC,iBAAiB,aACjBC,qBAAoB,EACpBC,KACA,cAAeC,EACfC,YACAC,eAAe,EACfC,6BAEA,MAAOC,EAAWC,GAAgBC,EAAAA,SACX,eAAnBT,IAEGU,EAAcC,GAAmBF,EAAAA,UAAkB,IACnDG,EAAWC,GAAgBJ,EAAAA,SAAkC,CAAA,GAEpEK,EAAAA,WAAU,KACNH,GAAgB,EAAK,GACtB,IAEHG,EAAAA,WAAU,KACFJ,IACAJ,SAAAA,EAAyBC,GAC7B,GACD,CAACA,EAAWG,IAEfI,EAAAA,WAAU,KACN,GAAIJ,EAAc,CACd,MAAMK,EAAapB,OAAOqB,OAAOJ,GACjC,GAAIG,EAAWE,OAAS,EAAG,CACvB,MAAMC,EAAcH,EAAWI,OAAOC,IAAoB,IAAVA,IAC1CC,EAAeN,EAAWI,OAC3BC,IAAoB,IAAVA,IAGXF,IAAgBX,EAChBC,GAAa,GACNa,GAAgBd,GACvBC,GAAa,EAErB,CACJ,IACD,CAACI,EAAWL,EAAWG,IAE1B,MAAMY,EAA6BC,IAC/BA,EAAMC,iBACNhB,GAAciB,IACV,MAAMC,GAAeD,EAEfE,EAAoBhC,OAAOiC,KAAKhB,GAAWiB,QAC7C,CAACC,EAAKC,KACFD,EAAIC,GAAOL,EACJI,IAEX,CAAA,GAIJ,OADAjB,EAAac,GACND,CAAW,GACpB,EA6DN,OACIM,MAACC,EAAAA,iBAAiBC,SAAQ,CACtBC,MAAO,CACH5B,YACA6B,iBAAkB/B,EACZP,EACIO,EAAe,EACfA,OACJgC,EACNC,kBAnEc,CAACpC,EAAYqC,KACnC1B,GAAc2B,GAAS7C,OAAAC,OAAAD,OAAAC,OAAA,GAAM4C,GAAI,CAAEtC,CAACA,GAAKqC,KAAc,EAmE/CE,iBAhEcvC,IACtBW,GAAc2B,IACV,MAAME,EAAQ/C,OAAAC,OAAA,CAAA,EAAQ4C,GAEtB,cADOE,EAASxC,GACTwC,CAAQ,GACjB,EA4DM9B,aACHf,SAED8C,EAAAA,KAAA,MAAA,CACIzC,GAAIA,EAAE,cACOC,EACbC,UAAWwC,EAAAA,QAAKC,mBAAyBzC,GAAUP,SAAA,CA/CtDC,GAAUC,EAKX4C,EAAAA,KAAA,MAAA,CACIvC,UAAWwC,EAAAA,QACPE,EAAAA,cACC7C,IACIF,GACDgD,EAAAA,oBACPlD,SAAA,CAEAC,GACGkC,EAAAA,IAAA,KAAA,CACI5B,UAAWwC,EAAAA,QACPI,EAAAA,OACC/C,GAAqBgD,EAAAA,aACzB,cACW,kBAAiB,aACjB5C,EAAYR,SAEvBC,IAGRC,GAvCLiC,EAAAA,IAACkB,EAAAA,OAAM,CACH9C,UAAW+C,EAAAA,mBAAyB,cACxB,mCACZC,QAAS9B,EACT+B,UAAU,OACVC,KAAK,SACLC,SAAS,iBAERhD,EAAY,WAAa,gBAOvB,KAiDFV,MAEmB,GAckB,CAUlD2D,KAAMC,EAAAA"}
+{"version":3,"file":"accordion.js","sources":["../../../src/accordion/accordion.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport * as styles from \"./accordion.styles\";\nimport { AccordionContext } from \"./accordion-context\";\nimport { AccordionItem } from \"./accordion-item\";\nimport type { AccordionProps } from \"./types\";\n\nconst AccordionBase = ({\n    children,\n    title,\n    enableExpandAll = true,\n    initialDisplay = \"expand-all\",\n    showTitleInMobile = false,\n    id,\n    \"data-testid\": testId,\n    className,\n    headingLevel = 2,\n    onExpandCollapseChange,\n}: AccordionProps): JSX.Element => {\n    const [expandAll, setExpandAll] = useState<boolean>(\n        initialDisplay === \"expand-all\"\n    );\n    const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n    const [itemState, setItemState] = useState<Record<string, boolean>>({});\n\n    useEffect(() => {\n        setHasFirstLoad(true);\n    }, []);\n\n    useEffect(() => {\n        if (hasFirstLoad) {\n            onExpandCollapseChange?.(expandAll);\n        }\n    }, [expandAll, hasFirstLoad]);\n\n    useEffect(() => {\n        if (hasFirstLoad) {\n            const itemStates = Object.values(itemState);\n            if (itemStates.length > 0) {\n                const allExpanded = itemStates.every((state) => state === true);\n                const allCollapsed = itemStates.every(\n                    (state) => state === false\n                );\n\n                if (allExpanded && !expandAll) {\n                    setExpandAll(true);\n                } else if (allCollapsed && expandAll) {\n                    setExpandAll(false);\n                }\n            }\n        }\n    }, [itemState, expandAll, hasFirstLoad]);\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        setExpandAll((prevExpandValue) => {\n            const expandValue = !prevExpandValue;\n\n            const updatedChildState = Object.keys(itemState).reduce(\n                (acc, key) => {\n                    acc[key] = expandValue;\n                    return acc;\n                },\n                {} as typeof itemState\n            );\n\n            setItemState(updatedChildState);\n            return expandValue;\n        });\n    };\n\n    const onItemStateChange = (id: string, isExpanded: boolean) => {\n        setItemState((prev) => ({ ...prev, [id]: isExpanded }));\n    };\n\n    const onItemDeregister = (id: string) => {\n        setItemState((prev) => {\n            const newState = { ...prev };\n            delete newState[id];\n            return newState;\n        });\n    };\n\n    const renderCollapseExpandAll = () => {\n        return (\n            <Button\n                className={styles.expandCollapseLink}\n                data-testid=\"accordion-expand-collapse-button\"\n                onClick={handleExpandCollapseClick}\n                styleType=\"link\"\n                type=\"button\"\n                sizeType=\"small\"\n            >\n                {expandAll ? \"Hide all\" : \"Show all\"}\n            </Button>\n        );\n    };\n\n    const renderTitleWrapper = () => {\n        if (!title && !enableExpandAll) {\n            return null;\n        }\n\n        return (\n            <div\n                className={clsx(\n                    styles.titleWrapper,\n                    !showTitleInMobile &&\n                        !enableExpandAll &&\n                        styles.titleWrapperHidden\n                )}\n            >\n                {title && (\n                    <h2\n                        className={clsx(\n                            styles.title,\n                            !showTitleInMobile && styles.titleHidden\n                        )}\n                        data-testid=\"accordion-title\"\n                        aria-level={headingLevel}\n                    >\n                        {title}\n                    </h2>\n                )}\n                {enableExpandAll && renderCollapseExpandAll()}\n            </div>\n        );\n    };\n\n    return (\n        <AccordionContext.Provider\n            value={{\n                expandAll,\n                itemHeadingLevel: headingLevel\n                    ? title\n                        ? headingLevel + 1\n                        : headingLevel\n                    : undefined,\n                onItemStateChange,\n                onItemDeregister,\n                itemState,\n            }}\n        >\n            <div\n                id={id}\n                data-testid={testId}\n                className={clsx(styles.accordionWrapper, className)}\n            >\n                {renderTitleWrapper()}\n                {children}\n            </div>\n        </AccordionContext.Provider>\n    );\n};\n\n// @catalog\n/**\n * A vertically stacked set of collapsible content panels.\n *\n * Use `Accordion` to organise related content into independently expandable\n * sections with shared expand/collapse state. The container synchronises item\n * states and maintains correct heading-level hierarchy.\n *\n * Sub-components:\n * - `Accordion.Item` — a single collapsible panel with an imperative ref handle.\n */\nexport const Accordion = Object.assign(AccordionBase, {\n    /**\n     * Renders an individual collapsible section within an `Accordion`.\n     *\n     * Each item has a clickable header that toggles its content panel. The expanded\n     * state can be individually controlled via the `expanded` prop, or left to the\n     * parent `Accordion` to manage through its \"Show all\" / \"Hide all\" mechanism.\n     * Exposes an imperative ref handle (`AccordionItemHandle`) for programmatic\n     * expand/collapse control.\n     */\n    Item: AccordionItem,\n});\n"],"names":["Accordion","Object","assign","children","title","enableExpandAll","initialDisplay","showTitleInMobile","id","testId","className","headingLevel","onExpandCollapseChange","expandAll","setExpandAll","useState","hasFirstLoad","setHasFirstLoad","itemState","setItemState","useEffect","itemStates","values","length","allExpanded","every","state","allCollapsed","handleExpandCollapseClick","event","preventDefault","prevExpandValue","expandValue","updatedChildState","keys","reduce","acc","key","_jsx","AccordionContext","Provider","value","itemHeadingLevel","undefined","onItemStateChange","isExpanded","prev","onItemDeregister","newState","_jsxs","clsx","styles.accordionWrapper","styles.titleWrapper","styles.titleWrapperHidden","styles.title","styles.titleHidden","Button","styles.expandCollapseLink","onClick","styleType","type","sizeType","Item","AccordionItem"],"mappings":"iTAUA,MA+JaA,EAAYC,OAAOC,QA/JV,EAClBC,WACAC,QACAC,mBAAkB,EAClBC,iBAAiB,aACjBC,qBAAoB,EACpBC,KACA,cAAeC,EACfC,YACAC,eAAe,EACfC,6BAEA,MAAOC,EAAWC,GAAgBC,EAAAA,SACX,eAAnBT,IAEGU,EAAcC,GAAmBF,EAAAA,UAAkB,IACnDG,EAAWC,GAAgBJ,EAAAA,SAAkC,CAAA,GAEpEK,EAAAA,WAAU,KACNH,GAAgB,EAAK,GACtB,IAEHG,EAAAA,WAAU,KACFJ,IACAJ,SAAAA,EAAyBC,GAC7B,GACD,CAACA,EAAWG,IAEfI,EAAAA,WAAU,KACN,GAAIJ,EAAc,CACd,MAAMK,EAAapB,OAAOqB,OAAOJ,GACjC,GAAIG,EAAWE,OAAS,EAAG,CACvB,MAAMC,EAAcH,EAAWI,OAAOC,IAAoB,IAAVA,IAC1CC,EAAeN,EAAWI,OAC3BC,IAAoB,IAAVA,IAGXF,IAAgBX,EAChBC,GAAa,GACNa,GAAgBd,GACvBC,GAAa,EAErB,CACJ,IACD,CAACI,EAAWL,EAAWG,IAE1B,MAAMY,EAA6BC,IAC/BA,EAAMC,iBACNhB,GAAciB,IACV,MAAMC,GAAeD,EAEfE,EAAoBhC,OAAOiC,KAAKhB,GAAWiB,QAC7C,CAACC,EAAKC,KACFD,EAAIC,GAAOL,EACJI,IAEX,CAAA,GAIJ,OADAjB,EAAac,GACND,CAAW,GACpB,EA6DN,OACIM,MAACC,EAAAA,iBAAiBC,SAAQ,CACtBC,MAAO,CACH5B,YACA6B,iBAAkB/B,EACZP,EACIO,EAAe,EACfA,OACJgC,EACNC,kBAnEc,CAACpC,EAAYqC,KACnC1B,GAAc2B,GAAS7C,OAAAC,OAAAD,OAAAC,OAAA,GAAM4C,GAAI,CAAEtC,CAACA,GAAKqC,KAAc,EAmE/CE,iBAhEcvC,IACtBW,GAAc2B,IACV,MAAME,EAAQ/C,OAAAC,OAAA,CAAA,EAAQ4C,GAEtB,cADOE,EAASxC,GACTwC,CAAQ,GACjB,EA4DM9B,aACHf,SAED8C,EAAAA,KAAA,MAAA,CACIzC,GAAIA,EAAE,cACOC,EACbC,UAAWwC,EAAAA,QAAKC,mBAAyBzC,GAAUP,SAAA,CA/CtDC,GAAUC,EAKX4C,EAAAA,KAAA,MAAA,CACIvC,UAAWwC,EAAAA,QACPE,EAAAA,cACC7C,IACIF,GACDgD,EAAAA,oBACPlD,SAAA,CAEAC,GACGkC,EAAAA,IAAA,KAAA,CACI5B,UAAWwC,EAAAA,QACPI,EAAAA,OACC/C,GAAqBgD,EAAAA,aACzB,cACW,kBAAiB,aACjB5C,EAAYR,SAEvBC,IAGRC,GAvCLiC,EAAAA,IAACkB,EAAAA,OAAM,CACH9C,UAAW+C,EAAAA,mBAAyB,cACxB,mCACZC,QAAS9B,EACT+B,UAAU,OACVC,KAAK,SACLC,SAAS,iBAERhD,EAAY,WAAa,gBAOvB,KAiDFV,MAEmB,GAekB,CAUlD2D,KAAMC,EAAAA"}

package/cjs/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../../src/alert/alert.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons\";\nimport { ArrowRightIcon } from \"@lifesg/react-icons/arrow-right\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { ExclamationTriangleFillIcon } from \"@lifesg/react-icons/exclamation-triangle-fill\";\nimport { ICircleFillIcon } from \"@lifesg/react-icons/i-circle-fill\";\nimport { TickCircleFillIcon } from \"@lifesg/react-icons/tick-circle-fill\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Markup } from \"../markup\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./alert.styles\";\nimport type { AlertProps } from \"./types\";\n\nconst TYPE_CLASS_MAP = {\n    error: {\n        wrapperTypeClass: styles.wrapperError,\n        iconColorClass: styles.alertIconError,\n    },\n    success: {\n        wrapperTypeClass: styles.wrapperSuccess,\n        iconColorClass: styles.alertIconSuccess,\n    },\n    warning: {\n        wrapperTypeClass: styles.wrapperWarning,\n        iconColorClass: styles.alertIconWarning,\n    },\n    info: {\n        wrapperTypeClass: styles.wrapperInfo,\n        iconColorClass: styles.alertIconInfo,\n    },\n    description: {\n        wrapperTypeClass: styles.wrapperDescription,\n        iconColorClass: styles.alertIconDescription,\n    },\n};\n\n/**\n * Displays an inline contextual banner with a severity-coded message.\n *\n * Use `Alert` to surface feedback, status, or supplementary information without\n * interrupting the user's workflow. Supports five severity tones, an optional\n * icon, a call-to-action link, and a collapsible content area for lengthy\n * messages.\n */\nexport const Alert = ({\n    type,\n    className,\n    children,\n    actionLink,\n    actionLinkIcon,\n    sizeType = \"default\",\n    showIcon = false,\n    customIcon,\n    maxCollapsedHeight,\n    role,\n    ...otherProps\n}: AlertProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showHiddenContent, setShowHiddenContent] = useState<boolean>(false);\n    const [renderShowMore, setRenderShowMore] = useState<boolean>(false);\n    const { height: contentHeight, ref: contentRef } =\n        useResizeDetector<HTMLDivElement>();\n    const contentId = useId();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const isCollapsed = isContentOutsideCollapsibleZone();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const getAlertLabel = () => {\n        switch (type) {\n            case \"success\":\n                return \"Success\";\n            case \"warning\":\n                return \"Warning\";\n            case \"error\":\n                return \"Error\";\n            case \"info\":\n                return \"Information\";\n            case \"description\":\n                return \"Description\";\n            default:\n                return \"Alert\";\n        }\n    };\n\n    const setCollapsedState = useCallback(() => {\n        setShowHiddenContent(!maxCollapsedHeight);\n        setRenderShowMore(isContentOutsideCollapsibleZone());\n    }, [maxCollapsedHeight, contentHeight]);\n\n    function isContentOutsideCollapsibleZone() {\n        if (contentHeight && maxCollapsedHeight) {\n            return contentHeight > maxCollapsedHeight;\n        }\n        return false;\n    }\n\n    const isInert = () => {\n        return !!maxCollapsedHeight && !showHiddenContent;\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        setCollapsedState();\n    }, [maxCollapsedHeight, contentHeight, setCollapsedState]);\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.maxCollapsedHeight]:\n            !showHiddenContent && isCollapsed && maxCollapsedHeight\n                ? `${maxCollapsedHeight}px`\n                : null,\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderShowMoreButton = () => (\n        <button\n            className={clsx(\n                styles.showMoreButton,\n                sizeType === \"small\"\n                    ? styles.showMoreButtonSmall\n                    : styles.showMoreButtonDefault\n            )}\n            type=\"button\"\n            aria-expanded={showHiddenContent}\n            aria-controls={contentId}\n            onClick={() => setShowHiddenContent(!showHiddenContent)}\n        >\n            Show {showHiddenContent ? \"less\" : \"more\"}\n            <ChevronDownIcon\n                className={clsx(\n                    styles.chevronIcon,\n                    showHiddenContent\n                        ? styles.chevronIconExpanded\n                        : styles.chevronIconCollapsed\n                )}\n            />\n        </button>\n    );\n\n    const renderLinkType = () => {\n        if (actionLinkIcon) return actionLinkIcon;\n        return <ArrowRightIcon />;\n    };\n\n    const renderLink = () => {\n        if (!actionLink) return null;\n\n        return (\n            <Typography.LinkSM\n                data-testid=\"action-link\"\n                className={clsx(\n                    styles.actionLinkText,\n                    sizeType === \"small\"\n                        ? styles.actionLinkTextSmall\n                        : styles.actionLinkTextDefault\n                )}\n                underlineStyle=\"none\"\n                {...actionLink}\n            >\n                {actionLink.children}\n                {renderLinkType()}\n            </Typography.LinkSM>\n        );\n    };\n\n    const renderIcon = () => {\n        if (type && customIcon) return customIcon;\n        switch (type) {\n            case \"success\":\n                return <TickCircleFillIcon aria-hidden />;\n            case \"warning\":\n                return <ExclamationTriangleFillIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"info\":\n                return <ICircleFillIcon aria-hidden />;\n            case \"description\":\n                return <ICircleFillIcon aria-hidden />;\n            default:\n                return null;\n        }\n    };\n\n    const renderContent = () => {\n        return (\n            <div\n                id={contentId}\n                className={clsx(\n                    styles.textWrapperContainer,\n                    showHiddenContent &&\n                        actionLink &&\n                        styles.textWrapperContainerShowMoreWithLink,\n                    !showHiddenContent &&\n                        isCollapsed &&\n                        styles.textWrapperContainerCollapsed\n                )}\n                inert={inertValue(isInert())}\n                ref={containerRef}\n            >\n                <Markup\n                    ref={contentRef}\n                    className={styles.textWrapper}\n                    baseTextSize={sizeType === \"small\" ? \"body-sm\" : \"body-md\"}\n                >\n                    {children}\n                </Markup>\n                {renderLink()}\n            </div>\n        );\n    };\n\n    const {\n        wrapperTypeClass = styles.wrapperWarning,\n        iconColorClass = styles.alertIconWarning,\n    } = TYPE_CLASS_MAP[type] || {};\n\n    return (\n        <div\n            className={clsx(styles.wrapper, wrapperTypeClass, className)}\n            aria-label={`${getAlertLabel()}`}\n            data-testid={otherProps[\"data-testid\"]}\n            role={role}\n        >\n            {showIcon && (\n                <div\n                    className={clsx(\n                        styles.alertIconWrapper,\n                        sizeType === \"small\"\n                            ? styles.alertIconWrapperSmall\n                            : styles.alertIconWrapperDefault,\n                        iconColorClass\n                    )}\n                >\n                    {renderIcon()}\n                </div>\n            )}\n            {/* \n                CSS-BASED TAB ORDER IMPLEMENTATION:\n                - DOM order: button → link → content (natural tab order)\n                - Visual order: content → button (via CSS order property)\n            */}\n            <div className={styles.contentContainer}>\n                {renderShowMore && renderShowMoreButton()}\n                {renderContent()}\n            </div>\n        </div>\n    );\n};\n"],"names":["TYPE_CLASS_MAP","error","wrapperTypeClass","styles.wrapperError","iconColorClass","styles.alertIconError","success","styles.wrapperSuccess","styles.alertIconSuccess","warning","styles.wrapperWarning","styles.alertIconWarning","info","styles.wrapperInfo","styles.alertIconInfo","description","styles.wrapperDescription","styles.alertIconDescription","_a","type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role","otherProps","__rest","showHiddenContent","setShowHiddenContent","useState","renderShowMore","setRenderShowMore","height","contentHeight","ref","contentRef","useResizeDetector","contentId","useId","containerRef","useRef","isCollapsed","isContentOutsideCollapsibleZone","setCollapsedState","useCallback","useEffect","useApplyStyle","styles.tokens","_jsxs","clsx","styles.wrapper","getAlertLabel","_jsx","styles.alertIconWrapper","styles.alertIconWrapperSmall","styles.alertIconWrapperDefault","TickCircleFillIcon","ExclamationTriangleFillIcon","ExclamationCircleFillIcon","ICircleFillIcon","renderIcon","styles.contentContainer","styles.showMoreButton","styles.showMoreButtonSmall","styles.showMoreButtonDefault","onClick","ChevronDownIcon","styles.chevronIcon","styles.chevronIconExpanded","styles.chevronIconCollapsed","id","styles.textWrapperContainer","styles.textWrapperContainerShowMoreWithLink","styles.textWrapperContainerCollapsed","inert","inertValue","Markup","styles.textWrapper","baseTextSize","Typography","LinkSM","Object","assign","styles.actionLinkText","styles.actionLinkTextSmall","styles.actionLinkTextDefault","underlineStyle","ArrowRightIcon"],"mappings":"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"}
+{"version":3,"file":"alert.js","sources":["../../../src/alert/alert.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons\";\nimport { ArrowRightIcon } from \"@lifesg/react-icons/arrow-right\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { ExclamationTriangleFillIcon } from \"@lifesg/react-icons/exclamation-triangle-fill\";\nimport { ICircleFillIcon } from \"@lifesg/react-icons/i-circle-fill\";\nimport { TickCircleFillIcon } from \"@lifesg/react-icons/tick-circle-fill\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Markup } from \"../markup\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./alert.styles\";\nimport type { AlertProps } from \"./types\";\n\nconst TYPE_CLASS_MAP = {\n    error: {\n        wrapperTypeClass: styles.wrapperError,\n        iconColorClass: styles.alertIconError,\n    },\n    success: {\n        wrapperTypeClass: styles.wrapperSuccess,\n        iconColorClass: styles.alertIconSuccess,\n    },\n    warning: {\n        wrapperTypeClass: styles.wrapperWarning,\n        iconColorClass: styles.alertIconWarning,\n    },\n    info: {\n        wrapperTypeClass: styles.wrapperInfo,\n        iconColorClass: styles.alertIconInfo,\n    },\n    description: {\n        wrapperTypeClass: styles.wrapperDescription,\n        iconColorClass: styles.alertIconDescription,\n    },\n};\n\n// @catalog\n/**\n * Displays an inline contextual banner with a severity-coded message.\n *\n * Use `Alert` to surface feedback, status, or supplementary information without\n * interrupting the user's workflow. Supports five severity tones, an optional\n * icon, a call-to-action link, and a collapsible content area for lengthy\n * messages.\n */\nexport const Alert = ({\n    type,\n    className,\n    children,\n    actionLink,\n    actionLinkIcon,\n    sizeType = \"default\",\n    showIcon = false,\n    customIcon,\n    maxCollapsedHeight,\n    role,\n    ...otherProps\n}: AlertProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showHiddenContent, setShowHiddenContent] = useState<boolean>(false);\n    const [renderShowMore, setRenderShowMore] = useState<boolean>(false);\n    const { height: contentHeight, ref: contentRef } =\n        useResizeDetector<HTMLDivElement>();\n    const contentId = useId();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const isCollapsed = isContentOutsideCollapsibleZone();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const getAlertLabel = () => {\n        switch (type) {\n            case \"success\":\n                return \"Success\";\n            case \"warning\":\n                return \"Warning\";\n            case \"error\":\n                return \"Error\";\n            case \"info\":\n                return \"Information\";\n            case \"description\":\n                return \"Description\";\n            default:\n                return \"Alert\";\n        }\n    };\n\n    const setCollapsedState = useCallback(() => {\n        setShowHiddenContent(!maxCollapsedHeight);\n        setRenderShowMore(isContentOutsideCollapsibleZone());\n    }, [maxCollapsedHeight, contentHeight]);\n\n    function isContentOutsideCollapsibleZone() {\n        if (contentHeight && maxCollapsedHeight) {\n            return contentHeight > maxCollapsedHeight;\n        }\n        return false;\n    }\n\n    const isInert = () => {\n        return !!maxCollapsedHeight && !showHiddenContent;\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        setCollapsedState();\n    }, [maxCollapsedHeight, contentHeight, setCollapsedState]);\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.maxCollapsedHeight]:\n            !showHiddenContent && isCollapsed && maxCollapsedHeight\n                ? `${maxCollapsedHeight}px`\n                : null,\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderShowMoreButton = () => (\n        <button\n            className={clsx(\n                styles.showMoreButton,\n                sizeType === \"small\"\n                    ? styles.showMoreButtonSmall\n                    : styles.showMoreButtonDefault\n            )}\n            type=\"button\"\n            aria-expanded={showHiddenContent}\n            aria-controls={contentId}\n            onClick={() => setShowHiddenContent(!showHiddenContent)}\n        >\n            Show {showHiddenContent ? \"less\" : \"more\"}\n            <ChevronDownIcon\n                className={clsx(\n                    styles.chevronIcon,\n                    showHiddenContent\n                        ? styles.chevronIconExpanded\n                        : styles.chevronIconCollapsed\n                )}\n            />\n        </button>\n    );\n\n    const renderLinkType = () => {\n        if (actionLinkIcon) return actionLinkIcon;\n        return <ArrowRightIcon />;\n    };\n\n    const renderLink = () => {\n        if (!actionLink) return null;\n\n        return (\n            <Typography.LinkSM\n                data-testid=\"action-link\"\n                className={clsx(\n                    styles.actionLinkText,\n                    sizeType === \"small\"\n                        ? styles.actionLinkTextSmall\n                        : styles.actionLinkTextDefault\n                )}\n                underlineStyle=\"none\"\n                {...actionLink}\n            >\n                {actionLink.children}\n                {renderLinkType()}\n            </Typography.LinkSM>\n        );\n    };\n\n    const renderIcon = () => {\n        if (type && customIcon) return customIcon;\n        switch (type) {\n            case \"success\":\n                return <TickCircleFillIcon aria-hidden />;\n            case \"warning\":\n                return <ExclamationTriangleFillIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"info\":\n                return <ICircleFillIcon aria-hidden />;\n            case \"description\":\n                return <ICircleFillIcon aria-hidden />;\n            default:\n                return null;\n        }\n    };\n\n    const renderContent = () => {\n        return (\n            <div\n                id={contentId}\n                className={clsx(\n                    styles.textWrapperContainer,\n                    showHiddenContent &&\n                        actionLink &&\n                        styles.textWrapperContainerShowMoreWithLink,\n                    !showHiddenContent &&\n                        isCollapsed &&\n                        styles.textWrapperContainerCollapsed\n                )}\n                inert={inertValue(isInert())}\n                ref={containerRef}\n            >\n                <Markup\n                    ref={contentRef}\n                    className={styles.textWrapper}\n                    baseTextSize={sizeType === \"small\" ? \"body-sm\" : \"body-md\"}\n                >\n                    {children}\n                </Markup>\n                {renderLink()}\n            </div>\n        );\n    };\n\n    const {\n        wrapperTypeClass = styles.wrapperWarning,\n        iconColorClass = styles.alertIconWarning,\n    } = TYPE_CLASS_MAP[type] || {};\n\n    return (\n        <div\n            className={clsx(styles.wrapper, wrapperTypeClass, className)}\n            aria-label={`${getAlertLabel()}`}\n            data-testid={otherProps[\"data-testid\"]}\n            role={role}\n        >\n            {showIcon && (\n                <div\n                    className={clsx(\n                        styles.alertIconWrapper,\n                        sizeType === \"small\"\n                            ? styles.alertIconWrapperSmall\n                            : styles.alertIconWrapperDefault,\n                        iconColorClass\n                    )}\n                >\n                    {renderIcon()}\n                </div>\n            )}\n            {/* \n                CSS-BASED TAB ORDER IMPLEMENTATION:\n                - DOM order: button → link → content (natural tab order)\n                - Visual order: content → button (via CSS order property)\n            */}\n            <div className={styles.contentContainer}>\n                {renderShowMore && renderShowMoreButton()}\n                {renderContent()}\n            </div>\n        </div>\n    );\n};\n"],"names":["TYPE_CLASS_MAP","error","wrapperTypeClass","styles.wrapperError","iconColorClass","styles.alertIconError","success","styles.wrapperSuccess","styles.alertIconSuccess","warning","styles.wrapperWarning","styles.alertIconWarning","info","styles.wrapperInfo","styles.alertIconInfo","description","styles.wrapperDescription","styles.alertIconDescription","_a","type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role","otherProps","__rest","showHiddenContent","setShowHiddenContent","useState","renderShowMore","setRenderShowMore","height","contentHeight","ref","contentRef","useResizeDetector","contentId","useId","containerRef","useRef","isCollapsed","isContentOutsideCollapsibleZone","setCollapsedState","useCallback","useEffect","useApplyStyle","styles.tokens","_jsxs","clsx","styles.wrapper","getAlertLabel","_jsx","styles.alertIconWrapper","styles.alertIconWrapperSmall","styles.alertIconWrapperDefault","TickCircleFillIcon","ExclamationTriangleFillIcon","ExclamationCircleFillIcon","ICircleFillIcon","renderIcon","styles.contentContainer","styles.showMoreButton","styles.showMoreButtonSmall","styles.showMoreButtonDefault","onClick","ChevronDownIcon","styles.chevronIcon","styles.chevronIconExpanded","styles.chevronIconCollapsed","id","styles.textWrapperContainer","styles.textWrapperContainerShowMoreWithLink","styles.textWrapperContainerCollapsed","inert","inertValue","Markup","styles.textWrapper","baseTextSize","Typography","LinkSM","Object","assign","styles.actionLinkText","styles.actionLinkTextSmall","styles.actionLinkTextDefault","underlineStyle","ArrowRightIcon"],"mappings":"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"}

package/cjs/animations/loading-dots/loading-dots.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-dots.js","sources":["../../../../src/animations/loading-dots/loading-dots.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense } from \"react\";\n\nimport type { BaseAnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDots = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDots,\n}));\n\nexport const LoadingDots = ({\n    className,\n    ...otherProps\n}: BaseAnimationProps) => {\n    return (\n        <div {...otherProps} className={clsx(styles.container, className)}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDots />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDots","lazy","__awaiter","default","Promise","Placeholder","_jsx","className","styles.placeholder","_a","otherProps","__rest","Object","assign","clsx","styles.container","children","Suspense","fallback"],"mappings":"oPAOA,MAAMA,EAAoBC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACvCC,eAAgBC,kDAAO,wBAAoB,KAAGJ,kBAChD,MAeIK,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,kCAdCC,IAAA,IAAAF,UACxBA,GAASE,EACNC,EAAUC,EAAAA,OAAAF,EAFW,eAIxB,OACIH,MAAA,MAAAM,OAAAC,OAAA,CAAA,EAASH,EAAU,CAAEH,UAAWO,EAAAA,QAAKC,YAAkBR,GAAUS,SAC7DV,MAACW,EAAAA,SAAQ,CAACC,SAAUZ,MAACD,EAAW,CAAA,GAAGW,SAC/BV,EAAAA,IAACN,EAAiB,CAAA,OAEpB"}
+{"version":3,"file":"loading-dots.js","sources":["../../../../src/animations/loading-dots/loading-dots.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense } from \"react\";\n\nimport type { AnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDots = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDots,\n}));\n\n// @catalog\n/**\n * An animated loading indicator with bouncing dots.\n */\nexport const LoadingDots = ({ className, ...otherProps }: AnimationProps) => {\n    return (\n        <div {...otherProps} className={clsx(styles.container, className)}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDots />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDots","lazy","__awaiter","default","Promise","Placeholder","_jsx","className","styles.placeholder","_a","otherProps","__rest","Object","assign","clsx","styles.container","children","Suspense","fallback"],"mappings":"oPAOA,MAAMA,EAAoBC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACvCC,eAAgBC,kDAAO,wBAAoB,KAAGJ,kBAChD,MAgBIK,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,kCAXCC,IAAA,IAAAF,UAAEA,GAASE,EAAKC,EAAUC,EAAAA,OAAAF,EAA1B,eACxB,OACIH,MAAA,MAAAM,OAAAC,OAAA,CAAA,EAASH,EAAU,CAAEH,UAAWO,EAAAA,QAAKC,YAAkBR,GAAUS,SAC7DV,MAACW,EAAAA,SAAQ,CAACC,SAAUZ,MAACD,EAAW,CAAA,GAAGW,SAC/BV,EAAAA,IAACN,EAAiB,CAAA,OAEpB"}

package/cjs/animations/loading-dots-spinner/loading-dots-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-dots-spinner.js","sources":["../../../../src/animations/loading-dots-spinner/loading-dots-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { ComponentToken, useApplyStyle } from \"../../theme\";\nimport type { CustomisableAnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDotsSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDotsSpinner,\n}));\n\nexport const LoadingDotsSpinner = ({\n    className,\n    color,\n    ...otherProps\n}: CustomisableAnimationProps) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [resolvedColor, setResolvedColor] = useState<string | undefined>(\n        undefined\n    );\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.containerColor]:\n            color || ComponentToken.Animation[\"loading-dots-spinner-colour\"],\n    });\n\n    useEffect(() => {\n        const element = containerRef.current;\n        if (!element) return;\n\n        const computedColor = getComputedStyle(element)\n            .getPropertyValue(styles.tokens.containerColor)\n            .trim();\n\n        setResolvedColor(computedColor || undefined);\n    }, [color]);\n\n    return (\n        <div\n            ref={containerRef}\n            {...otherProps}\n            className={clsx(styles.container, className)}\n        >\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDotsSpinner color={resolvedColor} />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDotsSpinner","lazy","__awaiter","default","Promise","Placeholder","_jsx","className","styles.placeholder","_a","color","otherProps","__rest","containerRef","useRef","resolvedColor","setResolvedColor","useState","undefined","useApplyStyle","styles.tokens","containerColor","ComponentToken","Animation","useEffect","element","current","computedColor","getComputedStyle","getPropertyValue","trim","Object","assign","ref","clsx","styles.container","children","Suspense","fallback"],"mappings":"2pBAQA,MAAMA,EAA2BC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CAC9CC,eAAgBC,kDAAO,wBAAoB,KAAGJ,yBAChD,MAyCIK,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,yCAxCQC,QAAAF,UAC/BA,EAASG,MACTA,GAAKD,EACFE,EAAUC,EAAAA,OAAAH,EAHkB,uBAK/B,MAAMI,EAAeC,EAAAA,OAAuB,OACrCC,EAAeC,GAAoBC,EAAAA,cACtCC,GAmBJ,OAhBAC,EAAAA,cAAcN,EAAc,CACxB,CAACO,EAAAA,OAAcC,gBACXX,GAASY,EAAAA,eAAeC,UAAU,iCAG1CC,EAAAA,WAAU,KACN,MAAMC,EAAUZ,EAAaa,QAC7B,IAAKD,EAAS,OAEd,MAAME,EAAgBC,iBAAiBH,GAClCI,iBAAiBT,EAAAA,OAAcC,gBAC/BS,OAELd,EAAiBW,QAAiBT,EAAU,GAC7C,CAACR,IAGAJ,EAAAA,IAAA,MAAAyB,OAAAC,OAAA,CACIC,IAAKpB,GACDF,EAAU,CACdJ,UAAW2B,EAAAA,QAAKC,EAAAA,UAAkB5B,GAAU6B,SAE5C9B,EAAAA,IAAC+B,EAAAA,UAASC,SAAUhC,EAAAA,IAACD,MAAc+B,SAC/B9B,EAAAA,IAACN,EAAwB,CAACU,MAAOK,QAEnC"}
+{"version":3,"file":"loading-dots-spinner.js","sources":["../../../../src/animations/loading-dots-spinner/loading-dots-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { ComponentToken, useApplyStyle } from \"../../theme\";\nimport type { CustomisableAnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDotsSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDotsSpinner,\n}));\n\n// @catalog\n/**\n * An animated loading indicator combining dots with a spinning motion.\n */\nexport const LoadingDotsSpinner = ({\n    className,\n    color,\n    ...otherProps\n}: CustomisableAnimationProps) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [resolvedColor, setResolvedColor] = useState<string | undefined>(\n        undefined\n    );\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.containerColor]:\n            color || ComponentToken.Animation[\"loading-dots-spinner-colour\"],\n    });\n\n    useEffect(() => {\n        const element = containerRef.current;\n        if (!element) return;\n\n        const computedColor = getComputedStyle(element)\n            .getPropertyValue(styles.tokens.containerColor)\n            .trim();\n\n        setResolvedColor(computedColor || undefined);\n    }, [color]);\n\n    return (\n        <div\n            ref={containerRef}\n            {...otherProps}\n            className={clsx(styles.container, className)}\n        >\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDotsSpinner color={resolvedColor} />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDotsSpinner","lazy","__awaiter","default","Promise","Placeholder","_jsx","className","styles.placeholder","_a","color","otherProps","__rest","containerRef","useRef","resolvedColor","setResolvedColor","useState","undefined","useApplyStyle","styles.tokens","containerColor","ComponentToken","Animation","useEffect","element","current","computedColor","getComputedStyle","getPropertyValue","trim","Object","assign","ref","clsx","styles.container","children","Suspense","fallback"],"mappings":"2pBAQA,MAAMA,EAA2BC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CAC9CC,eAAgBC,kDAAO,wBAAoB,KAAGJ,yBAChD,MA6CIK,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,yCAxCQC,QAAAF,UAC/BA,EAASG,MACTA,GAAKD,EACFE,EAAUC,EAAAA,OAAAH,EAHkB,uBAK/B,MAAMI,EAAeC,EAAAA,OAAuB,OACrCC,EAAeC,GAAoBC,EAAAA,cACtCC,GAmBJ,OAhBAC,EAAAA,cAAcN,EAAc,CACxB,CAACO,EAAAA,OAAcC,gBACXX,GAASY,EAAAA,eAAeC,UAAU,iCAG1CC,EAAAA,WAAU,KACN,MAAMC,EAAUZ,EAAaa,QAC7B,IAAKD,EAAS,OAEd,MAAME,EAAgBC,iBAAiBH,GAClCI,iBAAiBT,EAAAA,OAAcC,gBAC/BS,OAELd,EAAiBW,QAAiBT,EAAU,GAC7C,CAACR,IAGAJ,EAAAA,IAAA,MAAAyB,OAAAC,OAAA,CACIC,IAAKpB,GACDF,EAAU,CACdJ,UAAW2B,EAAAA,QAAKC,EAAAA,UAAkB5B,GAAU6B,SAE5C9B,EAAAA,IAAC+B,EAAAA,UAASC,SAAUhC,EAAAA,IAACD,MAAc+B,SAC/B9B,EAAAA,IAACN,EAAwB,CAACU,MAAOK,QAEnC"}

package/cjs/animations/loading-dots-spinner/lottie-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"lottie-animation.js","sources":["../../../../src/animations/loading-dots-spinner/lottie-animation.tsx"],"sourcesContent":["import { flatten, getColors } from \"lottie-colorify\";\nimport type { LottieOptions } from \"lottie-react\";\nimport { useLottie } from \"lottie-react\";\n\nimport type { CustomisedProps } from \"../types\";\nimport animationData from \"./data.json\";\nimport * as styles from \"./lottie-animation.styles\";\n\nexport const LottieLoadingDotsSpinner = ({\n    color = getColors(animationData)[0],\n}: CustomisedProps) => {\n    const options: LottieOptions = {\n        animationData: flatten(color, animationData),\n        loop: true,\n        autoplay: true,\n        className: styles.view,\n    };\n\n    const { View } = useLottie(options);\n\n    return <>{View}</>;\n};\n"],"names":["color","getColors","animationData","options","flatten","loop","autoplay","className","styles.view","View","useLottie","_jsx","_Fragment","children"],"mappings":"4QAQwC,EACpCA,QAAQC,EAAAA,UAAUC,EAAAA,SAAe,OAEjC,MAAMC,EAAyB,CAC3BD,cAAeE,EAAAA,QAAQJ,EAAOE,WAC9BG,MAAM,EACNC,UAAU,EACVC,UAAWC,EAAAA,OAGTC,KAAEA,GAASC,EAAAA,iBAAAA,UAAUP,GAE3B,OAAOQ,EAAAA,IAAAC,EAAAA,SAAA,CAAAC,SAAGJ,GAAQ"}
+{"version":3,"file":"lottie-animation.js","sources":["../../../../src/animations/loading-dots-spinner/lottie-animation.tsx"],"sourcesContent":["import { flatten, getColors } from \"lottie-colorify\";\nimport type { LottieOptions } from \"lottie-react\";\nimport { useLottie } from \"lottie-react\";\n\nimport type { CustomisableAnimationProps } from \"../types\";\nimport animationData from \"./data.json\";\nimport * as styles from \"./lottie-animation.styles\";\n\nexport const LottieLoadingDotsSpinner = ({\n    color = getColors(animationData)[0],\n}: CustomisableAnimationProps) => {\n    const options: LottieOptions = {\n        animationData: flatten(color, animationData),\n        loop: true,\n        autoplay: true,\n        className: styles.view,\n    };\n\n    const { View } = useLottie(options);\n\n    return <>{View}</>;\n};\n"],"names":["color","getColors","animationData","options","flatten","loop","autoplay","className","styles.view","View","useLottie","_jsx","_Fragment","children"],"mappings":"4QAQwC,EACpCA,QAAQC,EAAAA,UAAUC,EAAAA,SAAe,OAEjC,MAAMC,EAAyB,CAC3BD,cAAeE,EAAAA,QAAQJ,EAAOE,WAC9BG,MAAM,EACNC,UAAU,EACVC,UAAWC,EAAAA,OAGTC,KAAEA,GAASC,EAAAA,iBAAAA,UAAUP,GAE3B,OAAOQ,EAAAA,IAAAC,EAAAA,SAAA,CAAAC,SAAGJ,GAAQ"}

package/cjs/animations/loading-spinner/loading-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-spinner.js","sources":["../../../../src/animations/loading-spinner/loading-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense } from \"react\";\n\nimport type { BaseAnimationProps } from \"../types\";\nimport * as styles from \"./loading-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieSpinner,\n}));\n\nexport const LoadingSpinner = ({\n    className,\n    ...otherProps\n}: BaseAnimationProps) => {\n    return (\n        <div {...otherProps} className={clsx(styles.container, className)}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieSpinner />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieSpinner","lazy","__awaiter","default","Promise","Placeholder","_jsx","className","styles.placeholder","_a","otherProps","__rest","Object","assign","clsx","styles.container","children","Suspense","fallback"],"mappings":"uPAOA,MAAMA,EAAgBC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACnCC,eAAgBC,kDAAO,wBAAoB,KAAGJ,cAChD,MAeIK,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,qCAdIC,IAAA,IAAAF,UAC3BA,GAASE,EACNC,EAAUC,EAAAA,OAAAF,EAFc,eAI3B,OACIH,MAAA,MAAAM,OAAAC,OAAA,CAAA,EAASH,EAAU,CAAEH,UAAWO,EAAAA,QAAKC,YAAkBR,GAAUS,SAC7DV,MAACW,EAAAA,SAAQ,CAACC,SAAUZ,MAACD,EAAW,CAAA,GAAGW,SAC/BV,EAAAA,IAACN,EAAa,CAAA,OAEhB"}
+{"version":3,"file":"loading-spinner.js","sources":["../../../../src/animations/loading-spinner/loading-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense } from \"react\";\n\nimport type { AnimationProps } from \"../types\";\nimport * as styles from \"./loading-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieSpinner,\n}));\n\n// @catalog\n/**\n * An animation of a flying rocket.\n */\nexport const LoadingSpinner = ({\n    className,\n    ...otherProps\n}: AnimationProps) => {\n    return (\n        <div {...otherProps} className={clsx(styles.container, className)}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieSpinner />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieSpinner","lazy","__awaiter","default","Promise","Placeholder","_jsx","className","styles.placeholder","_a","otherProps","__rest","Object","assign","clsx","styles.container","children","Suspense","fallback"],"mappings":"uPAOA,MAAMA,EAAgBC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACnCC,eAAgBC,kDAAO,wBAAoB,KAAGJ,cAChD,MAmBIK,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,qCAdIC,IAAA,IAAAF,UAC3BA,GAASE,EACNC,EAAUC,EAAAA,OAAAF,EAFc,eAI3B,OACIH,MAAA,MAAAM,OAAAC,OAAA,CAAA,EAASH,EAAU,CAAEH,UAAWO,EAAAA,QAAKC,YAAkBR,GAAUS,SAC7DV,MAACW,EAAAA,SAAQ,CAACC,SAAUZ,MAACD,EAAW,CAAA,GAAGW,SAC/BV,EAAAA,IAACN,EAAa,CAAA,OAEhB"}

package/cjs/animations/themed-loading-spinner/themed-loading-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"themed-loading-spinner.js","sources":["../../../../src/animations/themed-loading-spinner/themed-loading-spinner.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { ThemeContext } from \"../../theme/theme-provider/context\";\nimport { LoadingDotsSpinner } from \"../loading-dots-spinner/loading-dots-spinner\";\nimport { LoadingSpinner } from \"../loading-spinner/loading-spinner\";\nimport type { BaseAnimationProps } from \"../types\";\n\nexport const ThemedLoadingSpinner = (props: BaseAnimationProps) => {\n    const fdsThemeContext = useContext(ThemeContext);\n\n    const isLifesgTheme = fdsThemeContext?.theme === \"lifesg\";\n\n    if (isLifesgTheme) {\n        return <LoadingSpinner {...props} />;\n    }\n\n    return <LoadingDotsSpinner {...props} />;\n};\n"],"names":["props","fdsThemeContext","useContext","ThemeContext","theme","_jsx","LoadingSpinner","Object","assign","LoadingDotsSpinner"],"mappings":"mQAOqCA,IACjC,MAAMC,EAAkBC,EAAAA,WAAWC,gBAInC,MAFiD,YAA3BF,aAAe,EAAfA,EAAiBG,OAG5BC,EAAAA,IAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKR,IAGxBK,EAAAA,IAACI,EAAAA,mBAAkBF,OAAAC,OAAA,CAAA,EAAKR,GAAS"}
+{"version":3,"file":"themed-loading-spinner.js","sources":["../../../../src/animations/themed-loading-spinner/themed-loading-spinner.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { ThemeContext } from \"../../theme/theme-provider/context\";\nimport { LoadingDotsSpinner } from \"../loading-dots-spinner/loading-dots-spinner\";\nimport { LoadingSpinner } from \"../loading-spinner/loading-spinner\";\nimport type { AnimationProps } from \"../types\";\n\n// @catalog\n/**\n * A loading spinner that automatically adapts to the current theme.\n */\nexport const ThemedLoadingSpinner = (props: AnimationProps) => {\n    const fdsThemeContext = useContext(ThemeContext);\n\n    const isLifesgTheme = fdsThemeContext?.theme === \"lifesg\";\n\n    if (isLifesgTheme) {\n        return <LoadingSpinner {...props} />;\n    }\n\n    return <LoadingDotsSpinner {...props} />;\n};\n"],"names":["props","fdsThemeContext","useContext","ThemeContext","theme","_jsx","LoadingSpinner","Object","assign","LoadingDotsSpinner"],"mappings":"mQAWqCA,IACjC,MAAMC,EAAkBC,EAAAA,WAAWC,gBAInC,MAFiD,YAA3BF,aAAe,EAAfA,EAAiBG,OAG5BC,EAAAA,IAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKR,IAGxBK,EAAAA,IAACI,EAAAA,mBAAkBF,OAAAC,OAAA,CAAA,EAAKR,GAAS"}

package/cjs/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../src/avatar/avatar.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Typography } from \"../typography\";\nimport * as styles from \"./avatar.styles\";\nimport type { AvatarProps } from \"./types\";\n\n/**\n * Displays a circular avatar representing a user or entity.\n *\n * Use when you need a compact visual identity marker in lists, headers, or\n * cards. Accepts a string (rendered as an initial) or a JSX element such as an\n * image or icon.\n */\nexport const Avatar = ({\n    children,\n    sizeType = \"default\",\n    \"data-testid\": testId = \"avatar\",\n    className,\n    ...otherProps\n}: AvatarProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () => {\n        if (!children) {\n            return <></>;\n        }\n\n        if (typeof children === \"string\") {\n            const TextComponent =\n                sizeType === \"small\" ? Typography.BodySM : Typography.BodyBL;\n            return (\n                <TextComponent\n                    weight=\"semibold\"\n                    className={styles.avatarBaselineText}\n                >\n                    {String.fromCodePoint(\n                        children.codePointAt(0) ?? 0\n                    ).toUpperCase()}\n                </TextComponent>\n            );\n        }\n\n        return children;\n    };\n\n    return (\n        <div\n            {...otherProps}\n            data-testid={testId}\n            className={clsx(\n                styles.avatarDisplay,\n                sizeType === \"small\"\n                    ? styles.avatarDisplaySmall\n                    : styles.avatarDisplayDefault,\n                className\n            )}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["_a","children","sizeType","testId","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.avatarDisplay","styles.avatarDisplaySmall","styles.avatarDisplayDefault","TextComponent","Typography","BodySM","BodyBL","weight","styles.avatarBaselineText","String","fromCodePoint","codePointAt","toUpperCase","renderContent"],"mappings":"2QAauBA,IAAA,IAAAC,SACnBA,EAAQC,SACRA,EAAW,UACX,cAAeC,EAAS,SAAQC,UAChCA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALM,mDAiCnB,OACIO,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQJ,EAAU,CAAA,cACDF,EACbC,UAAWM,EAAAA,QACPC,EAAAA,cACa,UAAbT,EACMU,EAAAA,mBACAC,EAAAA,qBACNT,GACHH,SAjCa,YAClB,IAAKA,EACD,OAAOM,EAAAA,mBAGX,GAAwB,iBAAbN,EAAuB,CAC9B,MAAMa,EACW,UAAbZ,EAAuBa,EAAAA,WAAWC,OAASD,EAAAA,WAAWE,OAC1D,OACIV,MAACO,EAAa,CACVI,OAAO,WACPd,UAAWe,EAAAA,4BAEVC,OAAOC,cACmB,QAAvBrB,EAAAC,EAASqB,YAAY,UAAE,IAAAtB,EAAAA,EAAI,GAC7BuB,eAGd,CAEA,OAAOtB,CAAQ,EAeVuB,KACC"}
+{"version":3,"file":"avatar.js","sources":["../../../src/avatar/avatar.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Typography } from \"../typography\";\nimport * as styles from \"./avatar.styles\";\nimport type { AvatarProps } from \"./types\";\n\n// @catalog\n/**\n * Displays a circular avatar representing a user or entity.\n *\n * Use when you need a compact visual identity marker in lists, headers, or\n * cards. Accepts a string (rendered as an initial) or a JSX element such as an\n * image or icon.\n */\nexport const Avatar = ({\n    children,\n    sizeType = \"default\",\n    \"data-testid\": testId = \"avatar\",\n    className,\n    ...otherProps\n}: AvatarProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () => {\n        if (!children) {\n            return <></>;\n        }\n\n        if (typeof children === \"string\") {\n            const TextComponent =\n                sizeType === \"small\" ? Typography.BodySM : Typography.BodyBL;\n            return (\n                <TextComponent\n                    weight=\"semibold\"\n                    className={styles.avatarBaselineText}\n                >\n                    {String.fromCodePoint(\n                        children.codePointAt(0) ?? 0\n                    ).toUpperCase()}\n                </TextComponent>\n            );\n        }\n\n        return children;\n    };\n\n    return (\n        <div\n            {...otherProps}\n            data-testid={testId}\n            className={clsx(\n                styles.avatarDisplay,\n                sizeType === \"small\"\n                    ? styles.avatarDisplaySmall\n                    : styles.avatarDisplayDefault,\n                className\n            )}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["_a","children","sizeType","testId","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.avatarDisplay","styles.avatarDisplaySmall","styles.avatarDisplayDefault","TextComponent","Typography","BodySM","BodyBL","weight","styles.avatarBaselineText","String","fromCodePoint","codePointAt","toUpperCase","renderContent"],"mappings":"2QAcuBA,IAAA,IAAAC,SACnBA,EAAQC,SACRA,EAAW,UACX,cAAeC,EAAS,SAAQC,UAChCA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALM,mDAiCnB,OACIO,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQJ,EAAU,CAAA,cACDF,EACbC,UAAWM,EAAAA,QACPC,EAAAA,cACa,UAAbT,EACMU,EAAAA,mBACAC,EAAAA,qBACNT,GACHH,SAjCa,YAClB,IAAKA,EACD,OAAOM,EAAAA,mBAGX,GAAwB,iBAAbN,EAAuB,CAC9B,MAAMa,EACW,UAAbZ,EAAuBa,EAAAA,WAAWC,OAASD,EAAAA,WAAWE,OAC1D,OACIV,MAACO,EAAa,CACVI,OAAO,WACPd,UAAWe,EAAAA,4BAEVC,OAAOC,cACmB,QAAvBrB,EAAAC,EAASqB,YAAY,UAAE,IAAAtB,EAAAA,EAAI,GAC7BuB,eAGd,CAEA,OAAOtB,CAAQ,EAeVuB,KACC"}

package/cjs/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../src/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./badge.styles\";\nimport type { BadgeProps, BadgeVariant } from \"./types\";\n\nfunction getDisplayCount(count: number) {\n    if (count <= 999) return count.toString();\n    if (count === 1000) return \"1K\";\n    return \"1K+\";\n}\nconst variantsToShowCount: Set<BadgeVariant> = new Set([\n    \"number\",\n    \"number-with-border\",\n    \"square-number\",\n]);\n\n/**\n * Displays a small indicator badge for notifications or status.\n *\n * Use `Badge` to surface counts or status dots on icons, avatars, and\n * navigation items. Renders as an overlay on a child element or as a standalone\n * inline indicator when no child is provided.\n */\nexport const Badge = ({\n    badgeOffset,\n    children,\n    className,\n    color = \"default\",\n    count = 0,\n    \"data-testid\": testId = \"badge\",\n    variant = \"number\",\n    ...otherProps\n}: BadgeProps) => {\n    // =============================================================================\n    // CONST\n    // =============================================================================\n    const displayCount = getDisplayCount(count);\n    const shouldShowCount = variantsToShowCount.has(variant);\n\n    // =============================================================================\n    // REFS\n    // =============================================================================\n    const wrapperRef = useRef<HTMLSpanElement>(null);\n\n    useApplyStyle(wrapperRef, {\n        [styles.tokens.wrapper.offsetX]: badgeOffset?.[0],\n        [styles.tokens.wrapper.offsetY]: badgeOffset?.[1],\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <span className={clsx(children !== undefined && styles.badgeOverlay)}>\n            <span\n                ref={wrapperRef}\n                className={clsx(\n                    styles.badgeWrapper,\n                    children !== undefined && styles.badgeWrapperIsOverlay\n                )}\n            >\n                <span\n                    data-testid={testId}\n                    data-variant={variant}\n                    data-color={color}\n                    className={clsx(styles.badge, className)}\n                    {...otherProps}\n                >\n                    {shouldShowCount ? displayCount : null}\n                </span>\n            </span>\n            {children}\n        </span>\n    );\n};\n"],"names":["variantsToShowCount","Set","_a","badgeOffset","children","className","color","count","testId","variant","otherProps","__rest","displayCount","toString","getDisplayCount","shouldShowCount","has","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","offsetX","offsetY","_jsxs","clsx","undefined","styles.badgeOverlay","_jsx","ref","styles.badgeWrapper","styles.badgeWrapperIsOverlay","Object","assign","styles.badge"],"mappings":"gkBAYA,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,gCAUkBC,IAAA,IAAAC,YAClBA,EAAWC,SACXA,EAAQC,UACRA,EAASC,MACTA,EAAQ,UAASC,MACjBA,EAAQ,EACR,cAAeC,EAAS,QAAOC,QAC/BA,EAAU,UAAQP,EACfQ,EAAUC,SAAAT,EARK,CAAA,cAAA,WAAA,YAAA,QAAA,QAAA,cAAA,YAalB,MAAMU,EA/BV,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,CA2ByBO,CAAgBP,GAC/BQ,EAAkBf,EAAoBgB,IAAIP,GAK1CQ,EAAaC,EAAAA,OAAwB,MAU3C,OARAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,SAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,SAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,OAAA,OAAA,CAAMnB,UAAWoB,EAAAA,aAAkBC,IAAbtB,GAA0BuB,EAAAA,wBAC5CC,EAAAA,IAAA,OAAA,CACIC,IAAKZ,EACLZ,UAAWoB,UACPK,EAAAA,kBACaJ,IAAbtB,GAA0B2B,EAAAA,uBAC7B3B,SAEDwB,EAAAA,IAAA,OAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAAA,QAAKS,EAAAA,MAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,IACE"}
+{"version":3,"file":"badge.js","sources":["../../../src/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./badge.styles\";\nimport type { BadgeProps, BadgeVariant } from \"./types\";\n\nfunction getDisplayCount(count: number) {\n    if (count <= 999) return count.toString();\n    if (count === 1000) return \"1K\";\n    return \"1K+\";\n}\nconst variantsToShowCount: Set<BadgeVariant> = new Set([\n    \"number\",\n    \"number-with-border\",\n    \"square-number\",\n]);\n\n// @catalog\n/**\n * Displays a small indicator badge for notifications or status.\n *\n * Use `Badge` to surface counts or status dots on icons, avatars, and\n * navigation items. Renders as an overlay on a child element or as a standalone\n * inline indicator when no child is provided.\n */\nexport const Badge = ({\n    badgeOffset,\n    children,\n    className,\n    color = \"default\",\n    count = 0,\n    \"data-testid\": testId = \"badge\",\n    variant = \"number\",\n    ...otherProps\n}: BadgeProps) => {\n    // =============================================================================\n    // CONST\n    // =============================================================================\n    const displayCount = getDisplayCount(count);\n    const shouldShowCount = variantsToShowCount.has(variant);\n\n    // =============================================================================\n    // REFS\n    // =============================================================================\n    const wrapperRef = useRef<HTMLSpanElement>(null);\n\n    useApplyStyle(wrapperRef, {\n        [styles.tokens.wrapper.offsetX]: badgeOffset?.[0],\n        [styles.tokens.wrapper.offsetY]: badgeOffset?.[1],\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <span className={clsx(children !== undefined && styles.badgeOverlay)}>\n            <span\n                ref={wrapperRef}\n                className={clsx(\n                    styles.badgeWrapper,\n                    children !== undefined && styles.badgeWrapperIsOverlay\n                )}\n            >\n                <span\n                    data-testid={testId}\n                    data-variant={variant}\n                    data-color={color}\n                    className={clsx(styles.badge, className)}\n                    {...otherProps}\n                >\n                    {shouldShowCount ? displayCount : null}\n                </span>\n            </span>\n            {children}\n        </span>\n    );\n};\n"],"names":["variantsToShowCount","Set","_a","badgeOffset","children","className","color","count","testId","variant","otherProps","__rest","displayCount","toString","getDisplayCount","shouldShowCount","has","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","offsetX","offsetY","_jsxs","clsx","undefined","styles.badgeOverlay","_jsx","ref","styles.badgeWrapper","styles.badgeWrapperIsOverlay","Object","assign","styles.badge"],"mappings":"gkBAYA,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,gCAWkBC,IAAA,IAAAC,YAClBA,EAAWC,SACXA,EAAQC,UACRA,EAASC,MACTA,EAAQ,UAASC,MACjBA,EAAQ,EACR,cAAeC,EAAS,QAAOC,QAC/BA,EAAU,UAAQP,EACfQ,EAAUC,SAAAT,EARK,CAAA,cAAA,WAAA,YAAA,QAAA,QAAA,cAAA,YAalB,MAAMU,EAhCV,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,CA4ByBO,CAAgBP,GAC/BQ,EAAkBf,EAAoBgB,IAAIP,GAK1CQ,EAAaC,EAAAA,OAAwB,MAU3C,OARAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,SAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,SAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,OAAA,OAAA,CAAMnB,UAAWoB,EAAAA,aAAkBC,IAAbtB,GAA0BuB,EAAAA,wBAC5CC,EAAAA,IAAA,OAAA,CACIC,IAAKZ,EACLZ,UAAWoB,UACPK,EAAAA,kBACaJ,IAAbtB,GAA0B2B,EAAAA,uBAC7B3B,SAEDwB,EAAAA,IAAA,OAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAAA,QAAKS,EAAAA,MAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,IACE"}

package/cjs/box-container/box-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"box-container.js","sources":["../../../src/box-container/box-container.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./box-container.styles\";\nimport type { BoxContainerProps } from \"./types\";\n\n/**\n * A titled, collapsible section container that groups related content behind a\n * labelled header.\n *\n * Use `BoxContainer` when you need to visually separate a block of content\n * under a heading and optionally allow users to collapse it. The header supports\n * a call-to-action slot and a visual status indicator.\n */\nexport const BoxContainer = ({\n    children,\n    title,\n    collapsible = true,\n    expanded = false,\n    callToActionComponent,\n    displayState = \"default\",\n    subComponentTestIds,\n    clickableHeader,\n    className,\n    ...otherProps\n}: BoxContainerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showExpanded, setShowExpanded] = useState<boolean>(\n        !collapsible ? true : expanded\n    );\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const interactiveHeader = clickableHeader && collapsible;\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const headerId = `${internalId}-header`;\n    const handleIconRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const onHandleClick = (event: React.MouseEvent) => {\n        // to prevent it triggers twice when click on button as clickableHeader enable\n        event.stopPropagation();\n        setShowExpanded(!showExpanded);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showExpanded ? resizeDetector.height : 0,\n    });\n\n    const renderChildContent = () => {\n        if (collapsible) {\n            return (\n                <animated.div\n                    className={styles.expandable}\n                    style={expandableStyles}\n                    data-testid={\"expandable-container\"}\n                    id={contentId}\n                >\n                    <div\n                        className={styles.childContainer}\n                        ref={childRef}\n                        inert={inertValue(!showExpanded)}\n                    >\n                        {children}\n                    </div>\n                </animated.div>\n            );\n        }\n\n        return (\n            <div\n                className={styles.nonExpandable}\n                data-testid=\"non-expandable-container\"\n            >\n                <div className={styles.childContainer}>{children}</div>\n            </div>\n        );\n    };\n\n    const renderDisplayIcon = () => {\n        switch (displayState) {\n            case \"error\":\n            case \"warning\":\n                return (\n                    <ExclamationCircleFillIcon\n                        className={clsx(\n                            styles.alertIcon,\n                            displayState === \"error\" && styles.alertIconError,\n                            displayState === \"warning\" &&\n                                styles.alertIconWarning\n                        )}\n                        data-testid={\n                            subComponentTestIds?.displayStateIcon ||\n                            `${displayState}-icon`\n                        }\n                        aria-label={displayState}\n                    />\n                );\n            default:\n                return null;\n        }\n    };\n\n    const renderHandleIcon = () => {\n        return (\n            collapsible && (\n                <button\n                    className={styles.handle}\n                    onClick={onHandleClick}\n                    type=\"button\"\n                    aria-labelledby={headerId}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={showExpanded}\n                    data-testid={subComponentTestIds?.handle || \"handle\"}\n                >\n                    <div\n                        className={clsx(\n                            styles.handleIconContainer,\n                            showExpanded\n                                ? styles.handleIconContainerExpanded\n                                : styles.handleIconContainerCollapsed\n                        )}\n                        ref={handleIconRef}\n                        aria-hidden\n                    >\n                        <ChevronDownIcon className={styles.handleIcon} />\n                    </div>\n                </button>\n            )\n        );\n    };\n\n    return (\n        <section\n            {...otherProps}\n            className={clsx(styles.container, className)}\n            aria-labelledby={headerId}\n            role=\"region\"\n            title={typeof title === \"string\" ? title : undefined}\n        >\n            <div\n                className={clsx(\n                    styles.header,\n                    interactiveHeader && styles.headerInteractive\n                )}\n                data-testid=\"header\"\n                onClick={interactiveHeader ? onHandleClick : undefined}\n            >\n                <div\n                    className={styles.labelWrapper}\n                    role={\"status\"}\n                    id={headerId}\n                >\n                    <div\n                        className={styles.labelText}\n                        data-testid={subComponentTestIds?.title || \"title\"}\n                    >\n                        {title}\n                        {displayState !== \"default\" && (\n                            <>\n                                <VisuallyHidden>{displayState}</VisuallyHidden>\n                            </>\n                        )}\n                    </div>\n                    {renderDisplayIcon()}\n                    {isMobile && renderHandleIcon()}\n                </div>\n                {callToActionComponent && (\n                    <div\n                        className={clsx(\n                            styles.callToActionContainer,\n                            collapsible &&\n                                styles.callToActionContainerCollapsible\n                        )}\n                        data-testid=\"call-to-action-container\"\n                    >\n                        {callToActionComponent}\n                    </div>\n                )}\n\n                {!isMobile && renderHandleIcon()}\n            </div>\n            {renderChildContent()}\n        </section>\n    );\n};\n"],"names":["_a","children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","className","otherProps","__rest","showExpanded","setShowExpanded","useState","resizeDetector","useResizeDetector","childRef","ref","isMobile","useMaxWidthMediaQuery","interactiveHeader","internalId","useId","contentId","headerId","handleIconRef","useRef","onHandleClick","event","stopPropagation","expandableStyles","useSpring","height","renderHandleIcon","_jsx","styles.handle","onClick","type","handle","clsx","styles.handleIconContainer","styles.handleIconContainerExpanded","styles.handleIconContainerCollapsed","ChevronDownIcon","styles.handleIcon","_jsxs","Object","assign","styles.container","role","undefined","styles.header","styles.headerInteractive","styles.labelWrapper","id","styles.labelText","_Fragment","VisuallyHidden","ExclamationCircleFillIcon","styles.alertIcon","styles.alertIconError","styles.alertIconWarning","displayStateIcon","renderDisplayIcon","styles.callToActionContainer","styles.callToActionContainerCollapsible","animated","div","styles.expandable","style","styles.childContainer","inert","inertValue","styles.nonExpandable"],"mappings":"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"}
+{"version":3,"file":"box-container.js","sources":["../../../src/box-container/box-container.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./box-container.styles\";\nimport type { BoxContainerProps } from \"./types\";\n\n// @catalog\n/**\n * A titled, collapsible section container that groups related content behind a\n * labelled header.\n *\n * Use `BoxContainer` when you need to visually separate a block of content\n * under a heading and optionally allow users to collapse it. The header supports\n * a call-to-action slot and a visual status indicator.\n */\nexport const BoxContainer = ({\n    children,\n    title,\n    collapsible = true,\n    expanded = false,\n    callToActionComponent,\n    displayState = \"default\",\n    subComponentTestIds,\n    clickableHeader,\n    className,\n    ...otherProps\n}: BoxContainerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showExpanded, setShowExpanded] = useState<boolean>(\n        !collapsible ? true : expanded\n    );\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const interactiveHeader = clickableHeader && collapsible;\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const headerId = `${internalId}-header`;\n    const handleIconRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const onHandleClick = (event: React.MouseEvent) => {\n        // to prevent it triggers twice when click on button as clickableHeader enable\n        event.stopPropagation();\n        setShowExpanded(!showExpanded);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showExpanded ? resizeDetector.height : 0,\n    });\n\n    const renderChildContent = () => {\n        if (collapsible) {\n            return (\n                <animated.div\n                    className={styles.expandable}\n                    style={expandableStyles}\n                    data-testid={\"expandable-container\"}\n                    id={contentId}\n                >\n                    <div\n                        className={styles.childContainer}\n                        ref={childRef}\n                        inert={inertValue(!showExpanded)}\n                    >\n                        {children}\n                    </div>\n                </animated.div>\n            );\n        }\n\n        return (\n            <div\n                className={styles.nonExpandable}\n                data-testid=\"non-expandable-container\"\n            >\n                <div className={styles.childContainer}>{children}</div>\n            </div>\n        );\n    };\n\n    const renderDisplayIcon = () => {\n        switch (displayState) {\n            case \"error\":\n            case \"warning\":\n                return (\n                    <ExclamationCircleFillIcon\n                        className={clsx(\n                            styles.alertIcon,\n                            displayState === \"error\" && styles.alertIconError,\n                            displayState === \"warning\" &&\n                                styles.alertIconWarning\n                        )}\n                        data-testid={\n                            subComponentTestIds?.displayStateIcon ||\n                            `${displayState}-icon`\n                        }\n                        aria-label={displayState}\n                    />\n                );\n            default:\n                return null;\n        }\n    };\n\n    const renderHandleIcon = () => {\n        return (\n            collapsible && (\n                <button\n                    className={styles.handle}\n                    onClick={onHandleClick}\n                    type=\"button\"\n                    aria-labelledby={headerId}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={showExpanded}\n                    data-testid={subComponentTestIds?.handle || \"handle\"}\n                >\n                    <div\n                        className={clsx(\n                            styles.handleIconContainer,\n                            showExpanded\n                                ? styles.handleIconContainerExpanded\n                                : styles.handleIconContainerCollapsed\n                        )}\n                        ref={handleIconRef}\n                        aria-hidden\n                    >\n                        <ChevronDownIcon className={styles.handleIcon} />\n                    </div>\n                </button>\n            )\n        );\n    };\n\n    return (\n        <section\n            {...otherProps}\n            className={clsx(styles.container, className)}\n            aria-labelledby={headerId}\n            role=\"region\"\n            title={typeof title === \"string\" ? title : undefined}\n        >\n            <div\n                className={clsx(\n                    styles.header,\n                    interactiveHeader && styles.headerInteractive\n                )}\n                data-testid=\"header\"\n                onClick={interactiveHeader ? onHandleClick : undefined}\n            >\n                <div\n                    className={styles.labelWrapper}\n                    role={\"status\"}\n                    id={headerId}\n                >\n                    <div\n                        className={styles.labelText}\n                        data-testid={subComponentTestIds?.title || \"title\"}\n                    >\n                        {title}\n                        {displayState !== \"default\" && (\n                            <>\n                                <VisuallyHidden>{displayState}</VisuallyHidden>\n                            </>\n                        )}\n                    </div>\n                    {renderDisplayIcon()}\n                    {isMobile && renderHandleIcon()}\n                </div>\n                {callToActionComponent && (\n                    <div\n                        className={clsx(\n                            styles.callToActionContainer,\n                            collapsible &&\n                                styles.callToActionContainerCollapsible\n                        )}\n                        data-testid=\"call-to-action-container\"\n                    >\n                        {callToActionComponent}\n                    </div>\n                )}\n\n                {!isMobile && renderHandleIcon()}\n            </div>\n            {renderChildContent()}\n        </section>\n    );\n};\n"],"names":["_a","children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","className","otherProps","__rest","showExpanded","setShowExpanded","useState","resizeDetector","useResizeDetector","childRef","ref","isMobile","useMaxWidthMediaQuery","interactiveHeader","internalId","useId","contentId","headerId","handleIconRef","useRef","onHandleClick","event","stopPropagation","expandableStyles","useSpring","height","renderHandleIcon","_jsx","styles.handle","onClick","type","handle","clsx","styles.handleIconContainer","styles.handleIconContainerExpanded","styles.handleIconContainerCollapsed","ChevronDownIcon","styles.handleIcon","_jsxs","Object","assign","styles.container","role","undefined","styles.header","styles.headerInteractive","styles.labelWrapper","id","styles.labelText","_Fragment","VisuallyHidden","ExclamationCircleFillIcon","styles.alertIcon","styles.alertIconError","styles.alertIconWarning","displayStateIcon","renderDisplayIcon","styles.callToActionContainer","styles.callToActionContainerCollapsible","animated","div","styles.expandable","style","styles.childContainer","inert","inertValue","styles.nonExpandable"],"mappings":"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"}

package/cjs/breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sources":["../../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport {\n    parsePxOrRemValue,\n    useApplyStyle,\n    useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\n/**\n * Horizontal breadcrumb navigation trail.\n *\n * Use `Breadcrumb` to show the user's position within a page hierarchy and\n * allow navigation to parent pages. On tablet and below, the trail scrolls\n * horizontally with optional edge fade overlays to indicate clipped content.\n */\nexport const Breadcrumb = ({\n    links,\n    fadeColor,\n    fadePosition = \"both\",\n    id,\n    separatorStyle = \"chevron\",\n    className,\n    ...otherProps\n}: BreadcrumbProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFade, setShowFade] = useState<boolean>(false);\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n    const shouldShowFadeLeft =\n        fadePosition === \"left\" || fadePosition === \"both\";\n    const shouldShowFadeRight =\n        fadePosition === \"right\" || fadePosition === \"both\";\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLUListElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const tabletBreakpoint = parsePxOrRemValue(\n        useResolvedBreakpointToken(Breakpoint[\"lg-max\"])\n    );\n\n    // =============================================================================\n    // FADE COLOR CALCULATION\n    // =============================================================================\n    let fadeColorSet: FadeColorSet;\n\n    if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n        fadeColorSet = {\n            left: fadeColor,\n            right: fadeColor,\n        };\n    } else if (fadeColor) {\n        fadeColorSet = fadeColor as FadeColorSet;\n    } else {\n        fadeColorSet = {\n            left: undefined,\n            right: undefined,\n        };\n    }\n\n    // =============================================================================\n    // CSS VARIABLES\n    // =============================================================================\n    useApplyStyle(fadeLeftRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.left?.join(\", \"),\n    });\n\n    useApplyStyle(fadeRightRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.right?.join(\", \"),\n    });\n\n    const onResize = useEvent(() => {\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n\n        if (\n            content &&\n            wrapper &&\n            links &&\n            links.length > 1 &&\n            window.innerWidth <= tabletBreakpoint\n        ) {\n            content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        }\n    });\n\n    const handleShowFadeToggle = useEvent(() => {\n        const nextShowFade = window.innerWidth <= tabletBreakpoint;\n        setShowFade(nextShowFade);\n\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n        if (content && wrapper && nextShowFade) {\n            if (content.scrollWidth > wrapper.offsetWidth) {\n                // set 1px margin of error to handle sub-pixel differences\n                setShowFadeLeft(content.scrollLeft >= 1);\n                setShowFadeRight(\n                    content.scrollWidth - content.scrollLeft - 1 >\n                        wrapper.offsetWidth\n                );\n                return;\n            }\n        }\n\n        setShowFadeLeft(false);\n        setShowFadeRight(false);\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"resize\", handleShowFadeToggle);\n    useEventListener(\"scroll\", handleShowFadeToggle, contentRef.current);\n\n    useIsomorphicLayoutEffect(() => {\n        onResize();\n        handleShowFadeToggle();\n    }, [onResize, handleShowFadeToggle, tabletBreakpoint]);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n        skipOnMount: true,\n    });\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    if (!links) return null;\n\n    const renderLinks = () => {\n        return links.map((link, index) => {\n            let element: JSX.Element;\n            if (!link.children) {\n                return null;\n            }\n\n            if (index === links.length - 1 || !link.href) {\n                element = (\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        as=\"span\"\n                        className={styles.currentLabel}\n                    >\n                        {link.children}\n                    </Typography.BodyMD>\n                );\n            } else {\n                element = (\n                    <Typography.LinkMD\n                        {...link}\n                        weight=\"semibold\"\n                        underlineStyle=\"none\"\n                        className={styles.previousLink}\n                    />\n                );\n            }\n\n            return (\n                <li\n                    key={index}\n                    className={styles.item}\n                    {...(index === links.length - 1 && {\n                        \"aria-current\": \"page\",\n                    })}\n                >\n                    {element}\n                    {index < links.length - 1 &&\n                        (separatorStyle === \"chevron\" ? (\n                            <ChevronRightIcon\n                                aria-hidden\n                                className={styles.caret}\n                            />\n                        ) : (\n                            <Typography.BodyMD\n                                inline\n                                aria-hidden\n                                className={styles.slash}\n                            >\n                                /\n                            </Typography.BodyMD>\n                        ))}\n                </li>\n            );\n        });\n    };\n\n    const renderFade = () => {\n        return (\n            <>\n                {showFadeLeft && shouldShowFadeLeft && (\n                    <div\n                        ref={fadeLeftRef}\n                        className={clsx(styles.fade, styles.fadeLeft)}\n                    />\n                )}\n                {showFadeRight && shouldShowFadeRight && (\n                    <div\n                        ref={fadeRightRef}\n                        className={clsx(styles.fade, styles.fadeRight)}\n                    />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={wrapperRef}\n            id={id || \"breadcrumb\"}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <nav aria-label=\"Breadcrumb\">\n                <ul ref={contentRef} className={styles.content}>\n                    {renderLinks()}\n                </ul>\n            </nav>\n            {showFade && renderFade()}\n        </div>\n    );\n};\n"],"names":["_a","links","fadeColor","fadePosition","id","separatorStyle","className","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","tabletBreakpoint","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","fadeColorSet","Array","isArray","length","left","right","undefined","useApplyStyle","styles.tokens","fade","backgroundColor","_b","join","_c","onResize","useEvent","content","current","wrapper","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","ref","clsx","styles.wrapper","children","_jsx","styles.content","map","link","index","element","href","Typography","LinkMD","Object","assign","weight","underlineStyle","styles.previousLink","BodyMD","as","styles.currentLabel","styles.item","ChevronRightIcon","styles.caret","inline","styles.slash","_Fragment","styles.fade","styles.fadeLeft","styles.fadeRight"],"mappings":"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"}
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport {\n    parsePxOrRemValue,\n    useApplyStyle,\n    useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\n// @catalog\n/**\n * Horizontal breadcrumb navigation trail.\n *\n * Use `Breadcrumb` to show the user's position within a page hierarchy and\n * allow navigation to parent pages. On tablet and below, the trail scrolls\n * horizontally with optional edge fade overlays to indicate clipped content.\n */\nexport const Breadcrumb = ({\n    links,\n    fadeColor,\n    fadePosition = \"both\",\n    id,\n    separatorStyle = \"chevron\",\n    className,\n    ...otherProps\n}: BreadcrumbProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFade, setShowFade] = useState<boolean>(false);\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n    const shouldShowFadeLeft =\n        fadePosition === \"left\" || fadePosition === \"both\";\n    const shouldShowFadeRight =\n        fadePosition === \"right\" || fadePosition === \"both\";\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLUListElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const tabletBreakpoint = parsePxOrRemValue(\n        useResolvedBreakpointToken(Breakpoint[\"lg-max\"])\n    );\n\n    // =============================================================================\n    // FADE COLOR CALCULATION\n    // =============================================================================\n    let fadeColorSet: FadeColorSet;\n\n    if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n        fadeColorSet = {\n            left: fadeColor,\n            right: fadeColor,\n        };\n    } else if (fadeColor) {\n        fadeColorSet = fadeColor as FadeColorSet;\n    } else {\n        fadeColorSet = {\n            left: undefined,\n            right: undefined,\n        };\n    }\n\n    // =============================================================================\n    // CSS VARIABLES\n    // =============================================================================\n    useApplyStyle(fadeLeftRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.left?.join(\", \"),\n    });\n\n    useApplyStyle(fadeRightRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.right?.join(\", \"),\n    });\n\n    const onResize = useEvent(() => {\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n\n        if (\n            content &&\n            wrapper &&\n            links &&\n            links.length > 1 &&\n            window.innerWidth <= tabletBreakpoint\n        ) {\n            content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        }\n    });\n\n    const handleShowFadeToggle = useEvent(() => {\n        const nextShowFade = window.innerWidth <= tabletBreakpoint;\n        setShowFade(nextShowFade);\n\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n        if (content && wrapper && nextShowFade) {\n            if (content.scrollWidth > wrapper.offsetWidth) {\n                // set 1px margin of error to handle sub-pixel differences\n                setShowFadeLeft(content.scrollLeft >= 1);\n                setShowFadeRight(\n                    content.scrollWidth - content.scrollLeft - 1 >\n                        wrapper.offsetWidth\n                );\n                return;\n            }\n        }\n\n        setShowFadeLeft(false);\n        setShowFadeRight(false);\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"resize\", handleShowFadeToggle);\n    useEventListener(\"scroll\", handleShowFadeToggle, contentRef.current);\n\n    useIsomorphicLayoutEffect(() => {\n        onResize();\n        handleShowFadeToggle();\n    }, [onResize, handleShowFadeToggle, tabletBreakpoint]);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n        skipOnMount: true,\n    });\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    if (!links) return null;\n\n    const renderLinks = () => {\n        return links.map((link, index) => {\n            let element: JSX.Element;\n            if (!link.children) {\n                return null;\n            }\n\n            if (index === links.length - 1 || !link.href) {\n                element = (\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        as=\"span\"\n                        className={styles.currentLabel}\n                    >\n                        {link.children}\n                    </Typography.BodyMD>\n                );\n            } else {\n                element = (\n                    <Typography.LinkMD\n                        {...link}\n                        weight=\"semibold\"\n                        underlineStyle=\"none\"\n                        className={styles.previousLink}\n                    />\n                );\n            }\n\n            return (\n                <li\n                    key={index}\n                    className={styles.item}\n                    {...(index === links.length - 1 && {\n                        \"aria-current\": \"page\",\n                    })}\n                >\n                    {element}\n                    {index < links.length - 1 &&\n                        (separatorStyle === \"chevron\" ? (\n                            <ChevronRightIcon\n                                aria-hidden\n                                className={styles.caret}\n                            />\n                        ) : (\n                            <Typography.BodyMD\n                                inline\n                                aria-hidden\n                                className={styles.slash}\n                            >\n                                /\n                            </Typography.BodyMD>\n                        ))}\n                </li>\n            );\n        });\n    };\n\n    const renderFade = () => {\n        return (\n            <>\n                {showFadeLeft && shouldShowFadeLeft && (\n                    <div\n                        ref={fadeLeftRef}\n                        className={clsx(styles.fade, styles.fadeLeft)}\n                    />\n                )}\n                {showFadeRight && shouldShowFadeRight && (\n                    <div\n                        ref={fadeRightRef}\n                        className={clsx(styles.fade, styles.fadeRight)}\n                    />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={wrapperRef}\n            id={id || \"breadcrumb\"}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <nav aria-label=\"Breadcrumb\">\n                <ul ref={contentRef} className={styles.content}>\n                    {renderLinks()}\n                </ul>\n            </nav>\n            {showFade && renderFade()}\n        </div>\n    );\n};\n"],"names":["_a","links","fadeColor","fadePosition","id","separatorStyle","className","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","tabletBreakpoint","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","fadeColorSet","Array","isArray","length","left","right","undefined","useApplyStyle","styles.tokens","fade","backgroundColor","_b","join","_c","onResize","useEvent","content","current","wrapper","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","ref","clsx","styles.wrapper","children","_jsx","styles.content","map","link","index","element","href","Typography","LinkMD","Object","assign","weight","underlineStyle","styles.previousLink","BodyMD","as","styles.currentLabel","styles.item","ChevronRightIcon","styles.caret","inline","styles.slash","_Fragment","styles.fade","styles.fadeLeft","styles.fadeRight"],"mappings":"opCAwB2BA,aAAAC,MACvBA,EAAKC,UACLA,EAASC,aACTA,EAAe,OAAMC,GACrBA,EAAEC,eACFA,EAAiB,UAASC,UAC1BA,GAASN,EACNO,EAAUC,EAAAA,OAAAR,EAPU,wEAYvB,MAAOS,EAAUC,GAAeC,EAAAA,UAAkB,IAC3CC,EAAcC,GAAmBF,EAAAA,UAAkB,IACnDG,EAAeC,GAAoBJ,EAAAA,UAAkB,GACtDK,EACe,SAAjBb,GAA4C,SAAjBA,EACzBc,EACe,UAAjBd,GAA6C,SAAjBA,EAE1Be,EAAaC,EAAAA,OAAuB,MACpCC,EAAaD,EAAAA,OAAyB,MACtCE,EAAcF,EAAAA,OAAuB,MACrCG,EAAeH,EAAAA,OAAuB,MAMtCI,EAAmBC,EAAAA,kBACrBC,EAAAA,2BAA2BC,EAAAA,WAAW,YAM1C,IAAIC,EAGAA,EADAC,MAAMC,QAAQ3B,IAAcA,EAAU4B,OAAS,EAChC,CACXC,KAAM7B,EACN8B,MAAO9B,GAEJA,GAGQ,CACX6B,UAAME,EACND,WAAOC,GAOfC,EAAAA,cAAcb,EAAa,CACvB,CAACc,EAAAA,OAAcC,KAAKC,iBAAoC,QAAlBC,EAAAX,eAAAA,EAAcI,YAAI,IAAAO,OAAA,EAAAA,EAAEC,KAAK,QAGnEL,EAAAA,cAAcZ,EAAc,CACxB,CAACa,EAAAA,OAAcC,KAAKC,iBAAqC,QAAnBG,EAAAb,eAAAA,EAAcK,aAAK,IAAAQ,OAAA,EAAAA,EAAED,KAAK,QAGpE,MAAME,EAAWC,EAAAA,UAAS,KACtB,MAAMC,EAAUvB,EAAWwB,QACrBC,EAAU3B,EAAW0B,QAGvBD,GACAE,GACA5C,GACAA,EAAM6B,OAAS,GACfgB,OAAOC,YAAcxB,IAErBoB,EAAQK,WAAaL,EAAQM,YAAcJ,EAAQK,YACvD,IAGEC,EAAuBT,EAAAA,UAAS,KAClC,MAAMU,EAAeN,OAAOC,YAAcxB,EAC1Cb,EAAY0C,GAEZ,MAAMT,EAAUvB,EAAWwB,QACrBC,EAAU3B,EAAW0B,QAC3B,GAAID,GAAWE,GAAWO,GAClBT,EAAQM,YAAcJ,EAAQK,YAO9B,OALArC,EAAgB8B,EAAQK,YAAc,QACtCjC,EACI4B,EAAQM,YAAcN,EAAQK,WAAa,EACvCH,EAAQK,aAMxBrC,GAAgB,GAChBE,GAAiB,EAAM,IA0B3B,GApBAsC,EAAAA,iBAAiB,SAAUF,GAC3BE,EAAAA,iBAAiB,SAAUF,EAAsB/B,EAAWwB,SAE5DU,EAAAA,2BAA0B,KACtBb,IACAU,GAAsB,GACvB,CAACV,EAAUU,EAAsB5B,IAGpCgC,oBAAkB,CACdd,WACAe,UAAWtC,EACXuC,YAAa,WACbC,YAAa,GACbC,aAAa,KAMZ1D,EAAO,OAAO,KA8EnB,OACI2D,EAAAA,0BACIC,IAAK3C,EACLd,GAAIA,GAAM,aACVE,UAAWwD,EAAAA,QAAKC,EAAAA,QAAgBzD,IAC5BC,EAAU,CAAAyD,SAAA,CAEdC,EAAAA,wBAAgB,aAAYD,SACxBC,EAAAA,UAAIJ,IAAKzC,EAAYd,UAAW4D,EAAAA,iBAnFjCjE,EAAMkE,KAAI,CAACC,EAAMC,KACpB,IAAIC,EACJ,OAAKF,EAAKJ,UAeNM,EAXAD,IAAUpE,EAAM6B,OAAS,GAAMsC,EAAKG,KAYhCN,EAAAA,IAACO,EAAAA,WAAWC,OAAMC,OAAAC,OAAA,GACVP,EAAI,CACRQ,OAAO,WACPC,eAAe,OACfvE,UAAWwE,EAAAA,gBAdfb,EAAAA,IAACO,EAAAA,WAAWO,OAAM,CACdH,OAAO,WACPI,GAAG,OACH1E,UAAW2E,EAAAA,aAAmBjB,SAE7BI,EAAKJ,WAedJ,OAAA,KAAAc,OAAAC,OAAA,CAEIrE,UAAW4E,EAAAA,MACNb,IAAUpE,EAAM6B,OAAS,GAAK,CAC/B,eAAgB,QAClB,CAAAkC,SAAA,CAEDM,EACAD,EAAQpE,EAAM6B,OAAS,IACA,YAAnBzB,EACG4D,MAACkB,EAAAA,iBAAgB,CAAA,eAAA,EAEb7E,UAAW8E,EAAAA,QAGfnB,EAAAA,IAACO,EAAAA,WAAWO,QACRM,QAAM,EAAA,eAAA,EAEN/E,UAAWgF,EAAAA,yBAjBlBjB,IA1BF,IAgDF,QAoCR5D,GA7BDmD,EAAAA,KAAA2B,EAAAA,SAAA,CAAAvB,SAAA,CACKpD,GAAgBI,GACbiD,EAAAA,IAAA,MAAA,CACIJ,IAAKxC,EACLf,UAAWwD,EAAAA,QAAK0B,EAAAA,KAAaC,EAAAA,YAGpC3E,GAAiBG,GACdgD,EAAAA,IAAA,MAAA,CACIJ,IAAKvC,EACLhB,UAAWwD,EAAAA,QAAK0B,EAAAA,KAAaE,EAAAA,mBAoBvC"}

package/cjs/button/button.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),n=require("clsx"),i=require("react"),l=require("../shared/component-loading-spinner/component-loading-spinner.js"),t=require("./button.styles.js"),s=require("./button-helper.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=r(n),o=r(i);const u={disabled:{base:t.mainStyleDisabled,danger:t.mainStyleDisabled},default:{base:t.mainStyleDefault,danger:t.mainStyleDefaultDanger},secondary:{base:t.mainStyleSecondary,danger:t.mainStyleSecondaryDanger},light:{base:t.mainStyleLight,danger:t.mainStyleLightDanger},link:{base:t.mainStyleLink,danger:t.mainStyleLinkDanger}},c={default:{base:t.mainSizeDefault,iconOnly:t.mainSizeDefaultIconOnly},small:{base:t.mainSizeSmall,iconOnly:t.mainSizeSmallIconOnly},large:{base:t.mainSizeLarge,iconOnly:t.mainSizeLargeIconOnly}},f=(e,a)=>{var n,i;return a?null===(n=u[e])||void 0===n?void 0:n.danger:null===(i=u[e])||void 0===i?void 0:i.base},m=(e,a)=>{var n,i,l;return a?d.default(null===(n=c[e])||void 0===n?void 0:n.base,null===(i=c[e])||void 0===i?void 0:i.iconOnly):null===(l=c[e])||void 0===l?void 0:l.base},y=(n,i)=>{const{children:r,className:u,disabled:c=!1,loading:y=!1,styleType:b="default",sizeType:g="default",danger:p=!1,focusableWhenDisabled:S=!1,icon:h,iconPosition:v="left",onClick:j}=n,D=e.__rest(n,["children","className","disabled","loading","styleType","sizeType","danger","focusableWhenDisabled","icon","iconPosition","onClick"]),z=s.hasValidChildren(r),O=!!h&&!z,x=c?"disabled":b;return a.jsxs("button",Object.assign({ref:i,"data-testid":D["data-testid"]||"button",disabled:c&&!S,"aria-disabled":c,"aria-busy":y,onClick:c?void 0:j,className:d.default(t.main,h&&"right"===v&&t.mainIconPositionRight,!O&&t.mainHasMinWidth,f(x,p),m(g,O),u)},D,{children:[y?a.jsx(l.ComponentLoadingSpinner,{className:d.default(t.spinner,z&&t.spinnerHasChildren)}):h?o.default.cloneElement(h,{"aria-hidden":!0}):null,z&&a.jsx("span",{children:r})]}))};y.displayName="Button";const b=o.default.forwardRef(y),g=(e,n)=>{var i;return a.jsx(b,Object.assign({},e,{sizeType:null!==(i=e.sizeType)&&void 0!==i?i:"default",ref:n}))};g.displayName="Button.Default";const p=(e,n)=>a.jsx(b,Object.assign({},e,{sizeType:"small",ref:n}));p.displayName="Button.Small";const S=(e,n)=>a.jsx(b,Object.assign({},e,{sizeType:"large",ref:n}));S.displayName="Button.Large";const h=Object.assign(b,{Default:o.default.forwardRef(g),Small:o.default.forwardRef(p),Large:o.default.forwardRef(S)});exports.Button=h;
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),n=require("clsx"),i=require("react"),l=require("../shared/component-loading-spinner/component-loading-spinner.js"),t=require("./button.styles.js"),s=require("./button-helper.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=r(n),o=r(i);const u={disabled:{base:t.mainStyleDisabled,danger:t.mainStyleDisabled},default:{base:t.mainStyleDefault,danger:t.mainStyleDefaultDanger},secondary:{base:t.mainStyleSecondary,danger:t.mainStyleSecondaryDanger},light:{base:t.mainStyleLight,danger:t.mainStyleLightDanger},link:{base:t.mainStyleLink,danger:t.mainStyleLinkDanger}},c={default:{base:t.mainSizeDefault,iconOnly:t.mainSizeDefaultIconOnly},small:{base:t.mainSizeSmall,iconOnly:t.mainSizeSmallIconOnly},large:{base:t.mainSizeLarge,iconOnly:t.mainSizeLargeIconOnly}},m=(e,a)=>{var n,i;return a?null===(n=u[e])||void 0===n?void 0:n.danger:null===(i=u[e])||void 0===i?void 0:i.base},f=(e,a)=>{var n,i,l;return a?d.default(t.mainIconOnly,null===(n=c[e])||void 0===n?void 0:n.base,null===(i=c[e])||void 0===i?void 0:i.iconOnly):null===(l=c[e])||void 0===l?void 0:l.base},y=(n,i)=>{const{children:r,className:u,disabled:c=!1,loading:y=!1,styleType:b="default",sizeType:g="default",danger:p=!1,focusableWhenDisabled:S=!1,icon:h,iconPosition:v="left",onClick:j}=n,D=e.__rest(n,["children","className","disabled","loading","styleType","sizeType","danger","focusableWhenDisabled","icon","iconPosition","onClick"]),O=s.hasValidChildren(r),z=!!h&&!O,x=c?"disabled":b;return a.jsxs("button",Object.assign({ref:i,"data-testid":D["data-testid"]||"button",disabled:c&&!S,"aria-disabled":c,"aria-busy":y,onClick:c?void 0:j,className:d.default(t.main,h&&"right"===v&&t.mainIconPositionRight,!z&&t.mainHasMinWidth,m(x,p),f(g,z),u)},D,{children:[y?a.jsx(l.ComponentLoadingSpinner,{className:d.default(t.spinner,O&&t.spinnerHasChildren)}):h?o.default.cloneElement(h,{"aria-hidden":!0}):null,O&&a.jsx("span",{children:r})]}))};y.displayName="Button";const b=o.default.forwardRef(y),g=(e,n)=>{var i;return a.jsx(b,Object.assign({},e,{sizeType:null!==(i=e.sizeType)&&void 0!==i?i:"default",ref:n}))};g.displayName="Button.Default";const p=(e,n)=>a.jsx(b,Object.assign({},e,{sizeType:"small",ref:n}));p.displayName="Button.Small";const S=(e,n)=>a.jsx(b,Object.assign({},e,{sizeType:"large",ref:n}));S.displayName="Button.Large";const h=Object.assign(b,{Default:o.default.forwardRef(g),Small:o.default.forwardRef(p),Large:o.default.forwardRef(S)});exports.Button=h;
 //# sourceMappingURL=button.js.map