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

package/cjs/button/button.styles.js.map

@@ -0,0 +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    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[\"body-baseline-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\n    ${Font[\"heading-md-semibold\"]};\n    font-family: ${Font.Spec[\"font-family-body\"]};\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":[],"mappings":"uFAWiB,kCA6BW,gCANH,yCAJS,kCA2HN,2CAKQ,gCAgBV,wCAOQ,iCAnBR,yCAOQ,oCA1HL,yCAaM,oCAiFL,kCA9CH,uCAYM,iCAYP,sCAWM,qCA3DD,4CAYM,0BAsGjB,sCAIW"}

package/cjs/button/button.styles_1jxad2l.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-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.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);font-family:var(--fds-font-family-body);}
+.m17i3scc{min-height:4rem;}
+.s1joklnz{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+.sv7ox5f{margin-right:0.5rem;}}

package/cjs/calendar/calendar.js

@@ -1,15 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("react"),n=require("styled-components");require("../shared/internal-calendar/calendar-dropdown.js");var t=require("../shared/internal-calendar/internal-calendar.js"),s=require("../v3_theme/index.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const l=i(n).default.div`
-    --vertical-inset: ${s.V3_Spacing["spacing-24"]};
-    --horizontal-inset: ${s.V3_Spacing["spacing-32"]};
-    --header-bottom-spacing: ${s.V3_Spacing["spacing-8"]};
-
-    width: 41rem;
-
-    ${e=>{if(e.$hasBorder)return n.css`
-                border: ${s.V3_Border["width-010"]} ${s.V3_Border.solid}
-                    ${s.V3_Colour.border};
-                border-radius: ${s.V3_Radius.lg};
-                overflow: hidden;
-            `}}
-`;exports.Calendar=n=>{var{className:s,styleType:i="bordered",value:d,onSelect:o}=n,c=e.__rest(n,["className","styleType","value","onSelect"]);const[u,p]=a.useState(d);return a.useEffect((()=>{p(d)}),[d]),r.jsx(l,{className:s,$hasBorder:"bordered"===i,children:r.jsx(t.InternalCalendar,Object.assign({value:u,initialCalendarDate:u,isFocusable:!0,onSelect:e=>{p(e),null==o||o(e)}},c))})};
+"use strict";var e=require("react/jsx-runtime"),a=require("clsx"),l=require("react");require("../shared/internal-calendar/calendar-dropdown.js");var n=require("../shared/internal-calendar/internal-calendar.js"),r=require("./calendar.styles.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(a);exports.Calendar=a=>{const{className:t,styleType:d="bordered",variant:o="single",id:s,minDate:c,maxDate:v,disabledDates:u,allowDisabledSelection:h,showActiveMonthDaysOnly:m,onHover:D,onYearMonthDisplayChange:b,"data-testid":p}=a,y="multi"===a.variant,x=y?void 0:a.value,S=y?a.values:void 0,C=y?a.minSelectable:void 0,f=y?a.maxSelectable:void 0,[j,w]=l.useState((()=>void 0!==S?S:void 0!==x?[x]:[]));l.useEffect((()=>{w(void 0===S?void 0===x?[]:[x]:S)}),[x,S]);return e.jsx("div",{className:i.default(r.wrapper,"bordered"===d&&r.wrapperBordered,t),id:s,"data-testid":p,children:e.jsx(n.InternalCalendar,{value:j[0],values:j,initialCalendarDate:j[0],isFocusable:!0,variant:o,minDate:c,maxDate:v,disabledDates:u,allowDisabledSelection:h,showActiveMonthDaysOnly:m,onHover:D,onYearMonthDisplayChange:b,onSelect:e=>{var l,n;w([e]),"multi"!==a.variant&&(null===(l=a.onChange)||void 0===l||l.call(a,e),null===(n=a.onSelect)||void 0===n||n.call(a,e))},onChange:e=>{var l;w(e),"multi"===a.variant&&(null===(l=a.onChange)||void 0===l||l.call(a,e))},minSelectable:C,maxSelectable:f})})};
 //# sourceMappingURL=calendar.js.map

package/cjs/calendar/calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.js","sources":["../../../src/calendar/calendar.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport { V3_Border, V3_Colour, V3_Radius, V3_Spacing } from \"../v3_theme\";\nimport type { CalendarProps } from \"./types\";\n\nexport const Calendar = ({\n    className,\n    styleType = \"bordered\",\n    value,\n    onSelect,\n    ...otherProps\n}: CalendarProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedDate, setSelectedDate] = useState<string | undefined>(value); // YYYY-MM-DD\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedDate(value);\n    }, [value]);\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    return (\n        <Wrapper className={className} $hasBorder={styleType === \"bordered\"}>\n            <InternalCalendar\n                value={selectedDate}\n                initialCalendarDate={selectedDate}\n                isFocusable={true}\n                onSelect={(value) => {\n                    setSelectedDate(value);\n                    onSelect?.(value);\n                }}\n                {...otherProps}\n            />\n        </Wrapper>\n    );\n};\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $hasBorder?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst Wrapper = styled.div<StyleProps>`\n    --vertical-inset: ${V3_Spacing[\"spacing-24\"]};\n    --horizontal-inset: ${V3_Spacing[\"spacing-32\"]};\n    --header-bottom-spacing: ${V3_Spacing[\"spacing-8\"]};\n\n    width: 41rem;\n\n    ${(props) => {\n        if (props.$hasBorder) {\n            return css`\n                border: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n                    ${V3_Colour.border};\n                border-radius: ${V3_Radius[\"lg\"]};\n                overflow: hidden;\n            `;\n        }\n    }}\n`;\n"],"names":["Wrapper","styled","div","V3_Spacing","props","$hasBorder","css","V3_Border","solid","V3_Colour","border","V3_Radius","_a","className","styleType","value","onSelect","otherProps","__rest","selectedDate","setSelectedDate","useState","useEffect","_jsx","children","InternalCalendar","Object","assign","initialCalendarDate","isFocusable"],"mappings":"6WAOO,MAgDDA,OAAUC,QAAOC,GAAe;wBACdC,EAAAA,WAAW;0BACTA,EAAAA,WAAW;+BACNA,EAAAA,WAAW;;;;MAInCC,IACC,GAAIA,EAAMC,WACN,OAAOC,KAAG;0BACIC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC;sBACxCC,EAAAA,UAAUC;iCACCC,EAAAA,UAAc;;aAGvC;mBA/DiBC,IAAA,IAAAC,UACrBA,EAASC,UACTA,EAAY,WAAUC,MACtBA,EAAKC,SACLA,GAAQJ,EACLK,EAAUC,EAAAA,OAAAN,EALQ,8CAUrB,MAAOO,EAAcC,GAAmBC,EAAAA,SAA6BN,GAYrE,OAPAO,EAAAA,WAAU,KACNF,EAAgBL,EAAM,GACvB,CAACA,IAMAQ,EAAAA,IAACvB,EAAO,CAACa,UAAWA,EAASR,WAA4B,aAAdS,EAAwBU,SAC/DD,MAACE,EAAAA,iBAAgBC,OAAAC,OAAA,CACbZ,MAAOI,EACPS,oBAAqBT,EACrBU,aAAa,EACbb,SAAWD,IACPK,EAAgBL,GAChBC,SAAAA,EAAWD,EAAM,GAEjBE,KAEF"}
+{"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 * @keywords date, datepicker, month, picker\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":["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":"yVAYyBA,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,EAAAA,UAPkB,SACOR,IAArBE,EAAuCA,OACnBF,IAApBD,EAAsC,CAACA,GACpC,KASXU,EAAAA,WAAU,KAWNF,OAVyBP,IAArBE,OAKoBF,IAApBD,EAKc,GAJI,CAACA,GALDG,EASD,GACtB,CAACH,EAAiBG,IAyBrB,OACIQ,EAAAA,WACIxB,UAAWyB,EAAAA,QACPC,EAAAA,QACc,aAAdzB,GAA4B0B,EAAAA,gBAC5B3B,GAEJG,GAAIA,gBACSQ,EAAUiB,SAEvBJ,EAAAA,IAACK,mBAAgB,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/cjs/calendar/calendar.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./calendar.styles_11ho5x8.css");exports.wrapper="wavc298",exports.wrapperBordered="w1incl4u";
+//# sourceMappingURL=calendar.styles.js.map

package/cjs/calendar/calendar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.styles.js","sources":["../../../src/calendar/calendar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport * as calendarDropdownStyles from \"../shared/internal-calendar/calendar-dropdown.styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\n\nexport const wrapper = css`\n    ${calendarDropdownStyles.tokens.verticalInset}: ${Spacing[\"spacing-24\"]};\n    ${calendarDropdownStyles.tokens.horizontalInset}: ${Spacing[\"spacing-32\"]};\n    ${calendarDropdownStyles.tokens.headerBottomSpacing}: ${Spacing[\n        \"spacing-8\"\n    ]};\n\n    width: 41rem;\n`;\n\nexport const wrapperBordered = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"lg\"]};\n    overflow: hidden;\n`;\n"],"names":[],"mappings":"8FAKoB,kCAUQ"}

package/cjs/calendar/calendar.styles_11ho5x8.css

@@ -0,0 +1,2 @@
+@layer fds{.wavc298{--fds-internal-calendarDropdown-verticalInset:var(--fds-spacing-24);--fds-internal-calendarDropdown-horizontalInset:var(--fds-spacing-32);--fds-internal-calendarDropdown-headerBottomSpacing:var(--fds-spacing-8);width:41rem;}
+.w1incl4u{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-lg);overflow:hidden;}}

package/cjs/card/card.js

@@ -1,2 +1,2 @@
-"use strict";var r=require("../_virtual/_tslib.js"),e=require("react/jsx-runtime"),t=require("../typography/index.js"),s=require("./card.style.js");exports.Card=i=>{var{children:a}=i,d=r.__rest(i,["children"]);const c=d["data-testid"]||"card";return e.jsx(s.StyledCard,Object.assign({},d,{"data-testid":c,children:"string"==typeof a?e.jsx(t.Typography.BodyBL,{children:a}):a}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),a=require("react"),s=require("../theme/theme-provider/context.js"),d=require("../typography/index.js"),i=require("./card.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=c(t);exports.Card=t=>{var{children:c,className:u,"data-testid":o="card"}=t,l=e.__rest(t,["children","className","data-testid"]);const h=a.useContext(s.ThemeContext),j="dark"===(null==h?void 0:h.mode);return r.jsx("div",Object.assign({},l,{"data-testid":o,className:n.default(i.card,j?i.cardDarkMode:i.cardLightMode,u),children:"string"==typeof c?r.jsx(d.Typography.BodyBL,{children:c}):c}))};
 //# sourceMappingURL=card.js.map

package/cjs/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../src/card/card.tsx"],"sourcesContent":["import { Typography } from \"../typography\";\nimport { StyledCard } from \"./card.style\";\nimport type { CardProps } from \"./types\";\n\nexport const Card = ({ children, ...otherProps }: CardProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"] || \"card\";\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        <StyledCard {...otherProps} data-testid={testId}>\n            {renderContent()}\n        </StyledCard>\n    );\n};\n"],"names":["_a","children","otherProps","__rest","testId","_jsx","StyledCard","Object","assign","Typography","BodyBL"],"mappings":"iKAIqBA,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAUC,EAAAA,OAAAH,EAAzB,cAIjB,MAAMI,EAASF,EAAW,gBAAkB,OAY5C,OACIG,EAAAA,IAACC,EAAAA,WAAUC,OAAAC,OAAA,CAAA,EAAKN,EAAU,CAAA,cAAeE,EAAMH,SAP3B,iBAAbA,EACHI,EAAAA,IAACI,aAAWC,OAAM,CAAAT,SAAEA,IAA6B,IAQxC"}
+{"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/**\n * A themed container surface for grouping related content.\n * @keywords container, panel\n */\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":["_a","children","className","dataTestId","otherProps","__rest","theme","useContext","ThemeContext","isDarkMode","mode","_jsx","Object","assign","clsx","styles.card","styles.cardDarkMode","styles.cardLightMode","Typography","BodyBL"],"mappings":"0UAaqBA,IAAA,IAAAC,SACjBA,EAAQC,UACRA,EACA,cAAeC,EAAa,QAAMH,EAC/BI,EAAUC,EAAAA,OAAAL,EAJI,wCASjB,MAAMM,EAAQC,EAAAA,WAAWC,gBACnBC,EAA6B,UAAhBH,aAAK,EAALA,EAAOI,MAY1B,OACIC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQT,EAAU,CAAA,cACDD,EACbD,UAAWY,EAAAA,QACPC,EAAAA,KACAN,EAAaO,EAAAA,aAAsBC,EAAAA,cACnCf,GACHD,SAde,iBAAbA,EACHU,EAAAA,IAACO,aAAWC,OAAM,CAAAlB,SAAEA,IAA6B,IAgB/C"}

package/cjs/card/card.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./card.styles_1gh9gs3.css");exports.card="c13vbbsi",exports.cardDarkMode="c10ivu5q",exports.cardLightMode="c13s9i3s";
+//# sourceMappingURL=card.styles.js.map

package/cjs/card/card.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.styles.js","sources":["../../../src/card/card.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Radius, Shadow, Spacing } from \"../theme\";\n\nexport const card = css`\n    border-radius: ${Radius[\"md\"]};\n    background: ${Colour.bg};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n`;\n\nexport const cardDarkMode = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const cardLightMode = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n`;\n"],"names":[],"mappings":"mFAIiB,gCAMQ,iCAIC"}

package/cjs/card/card.styles_1gh9gs3.css

@@ -0,0 +1,3 @@
+@layer fds{.c13vbbsi{border-radius:var(--fds-radius-md);background:var(--fds-colour-bg);padding:var(--fds-spacing-16) var(--fds-spacing-32);}
+.c10ivu5q{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.c13s9i3s{box-shadow:var(--fds-shadow-md-subtle);}}

package/cjs/checkbox/checkbox.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),d=require("react/jsx-runtime"),t=require("react"),a=require("./checkbox.style.js");exports.Checkbox=i=>{var{className:c,checked:s,disabled:r,indeterminate:n,displaySize:l="default",id:h}=i,b=e.__rest(i,["className","checked","disabled","indeterminate","displaySize","id"]);const u=t.useRef(null);t.useEffect((()=>{u.current&&(u.current.indeterminate=null!=n&&n)}),[n]);return d.jsxs(a.Container,{className:c,"data-testid":"checkbox",$displaySize:l,children:[d.jsx(a.Input,Object.assign({id:h,"data-testid":"checkbox-input",type:"checkbox",checked:s,ref:u,tabIndex:r?-1:0,disabled:r,"aria-checked":n?"mixed":s},b)),n?d.jsx(a.StyledInteremediateIcon,{$disabled:r,"data-testid":"indeterminate","aria-hidden":!0}):s?d.jsx(a.StyledCheckedIcon,{$disabled:r,"data-testid":"checkmark","aria-hidden":!0}):r?d.jsx(a.StyledUncheckedDisabledIcon,{"data-testid":"empty-disabled-checkbox","aria-hidden":!0}):d.jsx(a.StyledUncheckedIcon,{$disabled:r,"data-testid":"empty-checkbox","aria-hidden":!0})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),i=require("@lifesg/react-icons"),t=require("clsx"),c=require("react"),d=require("./checkbox.styles.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=s(t);exports.Checkbox=t=>{var{className:s,checked:l,disabled:r,focusableWhenDisabled:u,indeterminate:o,displaySize:b="default",onChange:h,id:x,tabIndex:f}=t,m=e.__rest(t,["className","checked","disabled","focusableWhenDisabled","indeterminate","displaySize","onChange","id","tabIndex"]);const k=c.useRef(null),p=!!r&&!!u,j=!!r&&!u;c.useEffect((()=>{k.current&&(k.current.indeterminate=null!=o&&o)}),[o]);return a.jsxs("div",{className:n.default(d.container,"small"===b&&d.containerSmall,s),"data-testid":"checkbox",children:[a.jsx("input",Object.assign({id:x,className:n.default(d.input,!r&&d.inputActive,r&&d.inputDisabledVisual),"data-testid":"checkbox-input",type:"checkbox",checked:l,ref:k,tabIndex:p?0:f,disabled:j,"aria-disabled":p,"aria-checked":o?"mixed":l,onChange:e=>{r?e.preventDefault():null==h||h(e)}},m)),o?a.jsx(i.MinusSquareFillIcon,{className:n.default(d.icon,d.selectedIcon,r&&d.iconDisabled),"data-testid":"indeterminate","aria-hidden":!0}):l?a.jsx(i.SquareTickFillIcon,{className:n.default(d.icon,d.selectedIcon,r&&d.iconDisabled),"data-testid":"checkmark","aria-hidden":!0}):r?a.jsx(i.SquareFillIcon,{className:n.default(d.icon,d.iconDisabled),"data-testid":"empty-disabled-checkbox","aria-hidden":!0}):a.jsx(i.SquareIcon,{className:n.default(d.icon,d.uncheckedIcon),"data-testid":"empty-checkbox","aria-hidden":!0})]})};
 //# sourceMappingURL=checkbox.js.map

package/cjs/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../src/checkbox/checkbox.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nimport {\n    Container,\n    Input,\n    StyledCheckedIcon,\n    StyledInteremediateIcon,\n    StyledUncheckedDisabledIcon,\n    StyledUncheckedIcon,\n} from \"./checkbox.style\";\nimport type { CheckboxProps } from \"./types\";\n\nexport const Checkbox = ({\n    className,\n    checked,\n    disabled,\n    indeterminate,\n    displaySize = \"default\",\n    id,\n    ...otherProps\n}: CheckboxProps): JSX.Element => {\n    // =============================================================================\n    // REFS, EFFECTS\n    // =============================================================================\n    const checkRef = useRef<HTMLInputElement>(null);\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                <StyledInteremediateIcon\n                    $disabled={disabled}\n                    data-testid=\"indeterminate\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (checked) {\n            return (\n                <StyledCheckedIcon\n                    $disabled={disabled}\n                    data-testid=\"checkmark\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (disabled) {\n            return (\n                <StyledUncheckedDisabledIcon\n                    data-testid=\"empty-disabled-checkbox\"\n                    aria-hidden\n                />\n            );\n        }\n\n        return (\n            <StyledUncheckedIcon\n                $disabled={disabled}\n                data-testid=\"empty-checkbox\"\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <Container\n            className={className}\n            data-testid=\"checkbox\"\n            $displaySize={displaySize}\n        >\n            <Input\n                id={id}\n                data-testid=\"checkbox-input\"\n                type=\"checkbox\"\n                checked={checked}\n                ref={checkRef}\n                tabIndex={disabled ? -1 : 0}\n                disabled={disabled}\n                aria-checked={indeterminate ? \"mixed\" : checked}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </Container>\n    );\n};\n"],"names":["_a","className","checked","disabled","indeterminate","displaySize","id","otherProps","__rest","checkRef","useRef","useEffect","current","_jsxs","Container","$displaySize","children","_jsx","Input","Object","assign","type","ref","tabIndex","StyledInteremediateIcon","$disabled","StyledCheckedIcon","StyledUncheckedDisabledIcon","StyledUncheckedIcon"],"mappings":"wJAYyBA,IAAA,IAAAC,UACrBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,cACRA,EAAaC,YACbA,EAAc,UAASC,GACvBA,GAAEN,EACCO,EAAUC,SAAAR,EAPQ,uEAYrB,MAAMS,EAAWC,EAAAA,OAAyB,MAE1CC,EAAAA,WAAU,KACFF,EAASG,UACTH,EAASG,QAAQR,cAAgBA,SAAAA,EACrC,GACD,CAACA,IA4CJ,OACIS,EAAAA,KAACC,EAAAA,UAAS,CACNb,UAAWA,EAAS,cACR,WAAUc,aACRV,EAAWW,SAAA,CAEzBC,EAAAA,IAACC,EAAAA,MAAKC,OAAAC,OAAA,CACFd,GAAIA,EAAE,cACM,iBACZe,KAAK,WACLnB,QAASA,EACToB,IAAKb,EACLc,SAAUpB,KAAgB,EAC1BA,SAAUA,EAAQ,eACJC,EAAgB,QAAUF,GACpCK,IArDRH,EAEIa,EAAAA,IAACO,0BAAuB,CAAAC,UACTtB,EAAQ,cACP,gBAAe,eAAA,IAMnCD,EAEIe,EAAAA,IAACS,oBAAiB,CAAAD,UACHtB,EAAQ,cACP,YAAW,eAAA,IAM/BA,EAEIc,EAAAA,IAACU,EAAAA,2CACe,0BAAyB,eAAA,IAO7CV,EAAAA,IAACW,sBAAmB,CAAAH,UACLtB,EAAQ,cACP,iBAAgB,eAAA,MAwBxB"}
+{"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 * @keywords field, form, input, selection\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":["_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":"+RAiByBA,QAAAC,UACrBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,sBACRA,EAAqBC,cACrBA,EAAaC,YACbA,EAAc,UAASC,SACvBA,EAAQC,GACRA,EAAEC,SACFA,KACGC,EAAUC,EAAAA,OAAAX,EAVQ,CAAA,YAAA,UAAA,WAAA,wBAAA,gBAAA,cAAA,WAAA,KAAA,aAerB,MAAMY,EAAWC,EAAAA,OAAyB,MAEpCC,IAA4BX,KAAcC,EAC1CW,IAAqBZ,IAAaC,EAiBxCY,EAAAA,WAAU,KACFJ,EAASK,UACTL,EAASK,QAAQZ,cAAgBA,SAAAA,EACrC,GACD,CAACA,IAqDJ,OACIa,EAAAA,YACIjB,UAAWkB,EAAAA,QACPC,EAAAA,UACgB,UAAhBd,GAA2Be,EAAAA,eAC3BpB,GACH,cACW,WAAUqB,SAAA,CAEtBC,EAAAA,IAAA,QAAAC,OAAAC,OAAA,CACIjB,GAAIA,EACJP,UAAWkB,EAAAA,QACPO,EAAAA,OACCvB,GAAYwB,EAAAA,YACbxB,GAAYyB,EAAAA,qBACf,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,EAAAA,IAACU,EAAAA,oBAAmB,CAChBhC,UAAWkB,EAAAA,QACPe,EAAAA,KACAC,EAAAA,aACAhC,GAAYiC,EAAAA,cACf,cACW,gBAAe,eAAA,IAMnClC,EAEIqB,EAAAA,IAACc,EAAAA,mBAAkB,CACfpC,UAAWkB,EAAAA,QACPe,EAAAA,KACAC,EAAAA,aACAhC,GAAYiC,EAAAA,cACf,cACW,YAAW,eAAA,IAM/BjC,EAEIoB,MAACe,EAAAA,eAAc,CACXrC,UAAWkB,EAAAA,QAAKe,EAAAA,KAAaE,EAAAA,4BACjB,0BAAyB,eAAA,IAO7Cb,MAACgB,EAAAA,WAAU,CACPtC,UAAWkB,EAAAA,QAAKe,EAAAA,KAAaM,EAAAA,6BACjB,iBAAgB,eAAA,MAkC9B"}

package/cjs/checkbox/checkbox.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./checkbox.styles_gm5bu1.css");exports.container="cuj1wdj",exports.containerSmall="c1rz5cog",exports.icon="i76s810",exports.iconDisabled="i1k0dk4y",exports.input="iidy4i6",exports.inputActive="isykh53",exports.inputDisabledVisual="iihjvql",exports.selectedIcon="s8wyls8",exports.uncheckedIcon="ue1dgoy";
+//# sourceMappingURL=checkbox.styles.js.map

package/cjs/checkbox/checkbox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.styles.js","sources":["../../../src/checkbox/checkbox.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Motion } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const icon = css`\n    @keyframes checkbox-icon-fade-in {\n        0% {\n            opacity: 0;\n        }\n        100% {\n            opacity: 1;\n        }\n    }\n\n    animation: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]}\n        checkbox-icon-fade-in;\n    width: 100%;\n    height: 100%;\n    transition: color ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const uncheckedIcon = css`\n    color: ${Colour[\"icon-primary-subtlest\"]};\n`;\n\nexport const selectedIcon = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const iconDisabled = css`\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\nexport const container = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    height: 2rem;\n    width: 2rem;\n\n    input:focus-visible + svg {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0px;\n        border-radius: 4px;\n    }\n`;\n\nexport const containerSmall = css`\n    height: 1.5rem;\n    width: 1.5rem;\n`;\n\nexport const input = css`\n    position: absolute;\n    opacity: 0;\n    width: 100%;\n    height: 100%;\n    cursor: pointer;\n`;\n\nexport const inputActive = css`\n    &:hover + svg {\n        @media (pointer: fine) {\n            color: ${Colour[\"icon-hover\"]};\n        }\n    }\n`;\n\nexport const inputDisabledVisual = css`\n    cursor: not-allowed;\n`;\n"],"names":[],"mappings":"+FAqCsB,iCAeK,wBA5CV,+BAyBQ,yBAwBP,8BAQM,sCAQQ,+BA5CP,gCAJC"}

package/cjs/checkbox/checkbox.styles_gm5bu1.css

@@ -0,0 +1,9 @@
+@layer fds{.i76s810{-webkit-animation:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default) checkbox-icon-fade-in-i76s810;animation:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default) checkbox-icon-fade-in-i76s810;width:100%;height:100%;-webkit-transition:color var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:color var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);}@-webkit-keyframes checkbox-icon-fade-in-i76s810{0%{opacity:0;}100%{opacity:1;}}@keyframes checkbox-icon-fade-in-i76s810{0%{opacity:0;}100%{opacity:1;}}
+.ue1dgoy{color:var(--fds-colour-icon-primary-subtlest);}
+.s8wyls8{color:var(--fds-colour-icon-selected);}
+.i1k0dk4y{color:var(--fds-colour-icon-disabled-subtle);}
+.cuj1wdj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;height:2rem;width:2rem;}.cuj1wdj input:focus-visible+svg{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0px;border-radius:4px;}
+.c1rz5cog{height:1.5rem;width:1.5rem;}
+.iidy4i6{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;}
+@media (pointer: fine){.isykh53:hover+svg{color:var(--fds-colour-icon-hover);}}
+.iihjvql{cursor:not-allowed;}}

package/cjs/countdown-timer/countdown-timer.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("../external/lodash/throttle.js"),i=require("react"),n=require("../external/react-intersection-observer/index.js"),s=require("../external/react-responsive/dist/react-responsive.js"),o=require("styled-components"),u=require("../shared/accessibility/index.js"),a=require("../util/time-helper.js"),l=require("../v3_theme/index.js"),d=require("./countdown-timer.style.js"),c=require("./use-timer.js");exports.CountdownTimer=m=>{var{className:f,align:p="right",timer:x,timestamp:v,notifyTimer:h,offset:w,mobileOffset:j,show:b,fixed:T=!0,reminderInterval:y=120,"data-testid":$,onFinish:g,onNotify:q,onTick:E}=m,S=e.__rest(m,["className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","data-testid","onFinish","onNotify","onTick"]);const C=i.useRef(null),F=i.useRef(!1),[I,V]=i.useState(0),[_,M]=i.useState(0),[N,R]=i.useState(0),[k,H]=i.useState(!1),[L,O]=i.useState(""),[W,z]=c.useTimer(x,v,k),{ref:B,inView:Q}=n.useInView({threshold:1,rootMargin:-1*I+"px 0px 0px 0px",initialInView:!0}),A=!T||Q,D="number"==typeof h&&W<=h,G=i.useContext(o.ThemeContext),J=l.V3_Breakpoint["sm-max"]({theme:G}),K=s.reactResponsiveExports.useMediaQuery({maxWidth:J});i.useEffect((()=>{H(b)}),[b]),i.useEffect((()=>{0===W?Z():"number"==typeof h&&W<=h&&(X(),Y())}),[W]),i.useEffect((()=>{const e=function(){var e,t;const r=null!==(e=null==w?void 0:w.top)&&void 0!==e?e:168,i=null!==(t=null==j?void 0:j.top)&&void 0!==t?t:80,n=K?i:r;return n}();V(e)}),[K,null==w?void 0:w.top,null==j?void 0:j.top]),i.useEffect((()=>{if(C.current){const e=r.default(P,300);return P(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}}),[C.current]),i.useEffect((()=>{const e=z-W;0!==e&&(e%y==0&&("number"!=typeof h||W>h)&&O(ee(W)),"number"==typeof h&&W===h&&O(ee(W)))}),[W,z,y,h]),i.useEffect((()=>{F.current=!1}),[z,b]);const P=()=>{if(!C.current)return;const e=C.current.getBoundingClientRect();R(e.x),M(e.right)},U=()=>{const e=ee(W);O(e)},X=()=>{E&&E(W)},Y=()=>{q&&!F.current&&(F.current=!0,q())},Z=()=>{H(!1),g&&g()};const ee=e=>{const{minutes:t,seconds:r}=a.TimeHelper.toMinutesSeconds(e),i=1===t?"minute":"minutes",n=1===r?"second":"seconds";return t>0&&r>0?`Time left: ${t} ${i} and ${r} ${n}`:t>0?`Time left: ${t} ${i}`:`Time left: ${r} ${n}`},te=()=>{const{minutes:e,seconds:r}=a.TimeHelper.toMinutesSeconds(W),i=1!==e?"mins":"min",n=1!==r?"secs":"sec";return t.jsxs(t.Fragment,{children:[t.jsx(d.TimerIcon,{$warn:D}),t.jsx(d.TimeLeft,{children:"Time left:"}),t.jsxs(d.Timer,{"aria-label":ee(W),children:[e," ",i," ",String(r).padStart(2,"0")," ",n]}),t.jsx(u.VisuallyHidden,{"aria-live":"number"==typeof h&&W<=h?"assertive":"polite","aria-atomic":"true",children:L})]})};return k||0===W?t.jsxs(d.Wrapper,Object.assign({className:f},S,{children:[t.jsx("div",{ref:B}),t.jsx(d.Countdown,{"data-testid":$,"data-id":"countdown-wrapper",ref:C,inert:u.inertValue(!A),$visible:A,$warn:D,tabIndex:0,role:"timer","aria-label":"Countdown timer",onFocus:U,children:te()}),C.current&&!A&&(()=>{var e,r;const i=null!==(e=null==w?void 0:w.left)&&void 0!==e?e:"left"===p?N:void 0,n=null!==(r=null==w?void 0:w.right)&&void 0!==r?r:"right"===p?Math.floor(document.body.clientWidth-_):void 0;return t.jsx(d.FixedCountdown,{"data-testid":$,"data-id":"fixed-countdown-wrapper",$warn:D,$top:I,$left:i,$right:n,tabIndex:0,role:"timer","aria-label":"Countdown timer",onFocus:U,children:te()})})()]})):t.jsx(t.Fragment,{})};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),i=require("clsx"),n=require("../external/lodash/throttle.js"),s=require("react"),u=require("../external/react-intersection-observer/index.js"),o=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js");var a=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/utils/use-apply-styles.js"),d=require("../theme/utils/use-media-query.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var c=require("../util/use-mount.js"),m=require("../util/time-helper.js"),f=require("./countdown-timer.styles.js"),p=require("./use-timer.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=v(i);exports.CountdownTimer=i=>{var{className:v,align:x="right",timer:j,timestamp:w,notifyTimer:q,offset:y,mobileOffset:b,show:g,fixed:T=!0,reminderInterval:k=120,"data-testid":I,onFinish:N,onNotify:S,onTick:C}=i,E=e.__rest(i,["className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","data-testid","onFinish","onNotify","onTick"]);const V=s.useRef(null),$=s.useRef(null),F=s.useRef(!1),[M,H]=s.useState(0),[R,_]=s.useState(0),[L,O]=s.useState(0),[U,z]=s.useState(!1),[W,A]=s.useState(""),B=c.useIsMounted(),[Q,D]=p.useTimer(j,w,U),{ref:G,inView:J}=u.useInView({threshold:1,rootMargin:-1*M+"px 0px 0px 0px",initialInView:!0}),K=!T||J,P="number"==typeof q&&Q<=q,X=d.useMaxWidthMediaQuery("sm");l.useApplyStyle($,{[f.tokens.fixedCountdown.top]:a.formatUnitValue(M,"px"),[f.tokens.fixedCountdown.left]:a.formatUnitValue(function(){var e;return B&&"left"===x?null!==(e=null==y?void 0:y.left)&&void 0!==e?e:L:void 0}(),"px"),[f.tokens.fixedCountdown.right]:a.formatUnitValue(function(){var e;return B&&"right"===x?null!==(e=null==y?void 0:y.right)&&void 0!==e?e:Math.floor(document.body.clientWidth-R):void 0}(),"px")}),s.useEffect((()=>{z(g)}),[g]),s.useEffect((()=>{0===Q?re():"number"==typeof q&&Q<=q&&(ee(),te())}),[Q]),s.useEffect((()=>{const e=function(){var e,t;const r=null!==(e=null==y?void 0:y.top)&&void 0!==e?e:168,i=null!==(t=null==b?void 0:b.top)&&void 0!==t?t:80,n=X?i:r;return n}();H(e)}),[X,null==y?void 0:y.top,null==b?void 0:b.top]),s.useEffect((()=>{if(V.current){const e=n.default(Y,300);return Y(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}}),[V.current]),s.useEffect((()=>{const e=D-Q;0!==e&&(e%k==0&&("number"!=typeof q||Q>q)&&A(ie(Q)),"number"==typeof q&&Q===q&&A(ie(Q)))}),[Q,D,k,q]),s.useEffect((()=>{F.current=!1}),[D,g]);const Y=()=>{if(!V.current)return;const e=V.current.getBoundingClientRect();O(e.x),_(e.right)},Z=()=>{const e=ie(Q);A(e)},ee=()=>{C&&C(Q)},te=()=>{S&&!F.current&&(F.current=!0,S())},re=()=>{z(!1),N&&N()};const ie=e=>{const{minutes:t,seconds:r}=m.TimeHelper.toMinutesSeconds(e),i=1===t?"minute":"minutes",n=1===r?"second":"seconds";return t>0&&r>0?`Time left: ${t} ${i} and ${r} ${n}`:t>0?`Time left: ${t} ${i}`:`Time left: ${r} ${n}`},ne=()=>{const{minutes:e,seconds:i}=m.TimeHelper.toMinutesSeconds(Q),n=1!==e?"mins":"min",s=1!==i?"secs":"sec";return t.jsxs(t.Fragment,{children:[t.jsx(r.ClockIcon,{className:f.timerIcon,"data-warn":!!P}),t.jsx("div",{className:f.timeLeft,children:"Time left:"}),t.jsxs("div",{className:f.timer,"aria-label":ie(Q),children:[e," ",n," ",String(i).padStart(2,"0")," ",s]}),t.jsx(o.VisuallyHidden,{"aria-live":"number"==typeof q&&Q<=q?"assertive":"polite","aria-atomic":"true",children:W})]})};return U||0===Q?t.jsxs("div",Object.assign({className:h.default(f.wrapper,v)},E,{children:[t.jsx("div",{ref:G}),t.jsx("div",{"data-testid":I,"data-id":"countdown-wrapper","data-warn":!!P,ref:V,inert:o.inertValue(!K),className:h.default(f.countdown,f.countdownInline,!K&&f.countdownHidden),tabIndex:0,role:"timer","aria-label":"Countdown timer",onFocus:Z,children:ne()}),V.current&&!K&&t.jsx("div",{ref:$,"data-testid":I,"data-id":"fixed-countdown-wrapper","data-warn":!!P,className:h.default(f.countdown,f.countdownFixed),tabIndex:0,role:"timer","aria-label":"Countdown timer",onFocus:Z,children:ne()})]})):t.jsx(t.Fragment,{})};
 //# sourceMappingURL=countdown-timer.js.map

package/cjs/countdown-timer/countdown-timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"countdown-timer.js","sources":["../../../src/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import throttle from \"lodash/throttle\";\nimport { useContext, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    Countdown,\n    FixedCountdown,\n    TimeLeft,\n    Timer,\n    TimerIcon,\n    Wrapper,\n} from \"./countdown-timer.style\";\nimport type { CountdownTimerProps } from \"./types\";\nimport { useTimer } from \"./use-timer\";\n\nexport const CountdownTimer = ({\n    className,\n    align = \"right\",\n    timer,\n    timestamp,\n    notifyTimer,\n    offset,\n    mobileOffset,\n    show,\n    fixed = true,\n    reminderInterval = 120,\n    \"data-testid\": testId,\n    onFinish,\n    onNotify,\n    onTick,\n    ...otherProps\n}: CountdownTimerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const isNotified = useRef<boolean>(false);\n    const [offsetY, setOffsetY] = useState<number>(0);\n    const [clientRectRight, setClientRectRight] = useState<number>(0);\n    const [clientRectX, setClientRectX] = useState<number>(0);\n    const [isPlaying, setIsPlaying] = useState(false);\n    const [announcement, setAnnouncement] = useState<string>(\"\");\n\n    const [remainingSeconds, initialSeconds] = useTimer(\n        timer,\n        timestamp,\n        isPlaying\n    );\n    const { ref: stickyRef, inView } = useInView({\n        threshold: 1,\n        rootMargin: `${offsetY * -1}px 0px 0px 0px`,\n        initialInView: true,\n    });\n    const isVisible = !fixed || inView;\n    const warn =\n        typeof notifyTimer === \"number\" && remainingSeconds <= notifyTimer;\n\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        setIsPlaying(show);\n    }, [show]);\n\n    useEffect(() => {\n        if (remainingSeconds === 0) {\n            performOnFinishHandler();\n        } else if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds <= notifyTimer\n        ) {\n            performOnTickHandler();\n            performOnNotifyHandler();\n        }\n    }, [remainingSeconds]);\n\n    useEffect(() => {\n        const y = getOffsetY();\n        setOffsetY(y);\n    }, [isMobile, offset?.top, mobileOffset?.top]);\n\n    useEffect(() => {\n        if (wrapperRef.current) {\n            const handleResize = throttle(handleWindowResize, 300);\n            handleWindowResize();\n\n            window.addEventListener(\"resize\", handleResize);\n\n            return () => {\n                window.removeEventListener(\"resize\", handleResize);\n            };\n        }\n    }, [wrapperRef.current]);\n\n    // Announcements\n    useEffect(() => {\n        const timeElapsed = initialSeconds - remainingSeconds;\n        if (timeElapsed === 0) return;\n        // Polite notification\n        if (timeElapsed % reminderInterval === 0) {\n            if (\n                typeof notifyTimer !== \"number\" ||\n                remainingSeconds > notifyTimer\n            ) {\n                setAnnouncement(getAccessibleTimeText(remainingSeconds));\n            }\n        }\n\n        // Assertive notification\n        if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds === notifyTimer\n        ) {\n            setAnnouncement(getAccessibleTimeText(remainingSeconds));\n        }\n    }, [remainingSeconds, initialSeconds, reminderInterval, notifyTimer]);\n\n    useEffect(() => {\n        // reset\n        isNotified.current = false;\n    }, [initialSeconds, show]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWindowResize = () => {\n        if (!wrapperRef.current) return;\n\n        const clientRect = wrapperRef.current.getBoundingClientRect();\n\n        setClientRectX(clientRect.x);\n        setClientRectRight(clientRect.right);\n    };\n\n    const handleOnFocus = () => {\n        const focusMessage = getAccessibleTimeText(remainingSeconds);\n        setAnnouncement(focusMessage);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const performOnTickHandler = () => {\n        if (onTick) {\n            onTick(remainingSeconds);\n        }\n    };\n\n    const performOnNotifyHandler = () => {\n        if (onNotify && !isNotified.current) {\n            isNotified.current = true;\n            onNotify();\n        }\n    };\n\n    const performOnFinishHandler = () => {\n        setIsPlaying(false);\n\n        if (onFinish) onFinish();\n    };\n\n    function getOffsetY() {\n        const desktopTop = offset?.top ?? 168;\n        const mobileTop = mobileOffset?.top ?? 80;\n        const offsetY = isMobile ? mobileTop : desktopTop;\n\n        return offsetY;\n    }\n\n    const getAccessibleTimeText = (seconds: number): string => {\n        const { minutes, seconds: secs } = TimeHelper.toMinutesSeconds(seconds);\n\n        const minuteText = minutes === 1 ? \"minute\" : \"minutes\";\n        const secondText = secs === 1 ? \"second\" : \"seconds\";\n\n        if (minutes > 0 && secs > 0) {\n            return `Time left: ${minutes} ${minuteText} and ${secs} ${secondText}`;\n        } else if (minutes > 0) {\n            return `Time left: ${minutes} ${minuteText}`;\n        } else {\n            return `Time left: ${secs} ${secondText}`;\n        }\n    };\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderPeriodicAndWarningAnnouncement = () => (\n        <VisuallyHidden\n            aria-live={\n                typeof notifyTimer === \"number\" &&\n                remainingSeconds <= notifyTimer\n                    ? \"assertive\"\n                    : \"polite\"\n            }\n            aria-atomic=\"true\"\n        >\n            {announcement}\n        </VisuallyHidden>\n    );\n\n    const renderTimer = () => {\n        const { minutes, seconds } =\n            TimeHelper.toMinutesSeconds(remainingSeconds);\n        const m = minutes !== 1 ? \"mins\" : \"min\";\n        const s = seconds !== 1 ? \"secs\" : \"sec\";\n        return (\n            <>\n                <TimerIcon $warn={warn} />\n                <TimeLeft>Time left:</TimeLeft>\n                <Timer aria-label={getAccessibleTimeText(remainingSeconds)}>\n                    {minutes} {m} {String(seconds).padStart(2, \"0\")} {s}\n                </Timer>\n                {renderPeriodicAndWarningAnnouncement()}\n            </>\n        );\n    };\n\n    const renderCountdown = () => {\n        return (\n            <Countdown\n                data-testid={testId}\n                data-id=\"countdown-wrapper\"\n                ref={wrapperRef}\n                inert={inertValue(!isVisible)}\n                $visible={isVisible}\n                $warn={warn}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </Countdown>\n        );\n    };\n\n    const renderFixedCountdown = () => {\n        const left =\n            offset?.left ?? (align === \"left\" ? clientRectX : undefined);\n\n        const right =\n            offset?.right ??\n            (align === \"right\"\n                ? Math.floor(document.body.clientWidth - clientRectRight)\n                : undefined);\n\n        return (\n            <FixedCountdown\n                data-testid={testId}\n                data-id=\"fixed-countdown-wrapper\"\n                $warn={warn}\n                $top={offsetY}\n                $left={left}\n                $right={right}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </FixedCountdown>\n        );\n    };\n\n    if (!isPlaying && remainingSeconds !== 0) return <></>;\n\n    return (\n        <Wrapper className={className} {...otherProps}>\n            <div ref={stickyRef}></div>\n            {renderCountdown()}\n            {wrapperRef.current && !isVisible && renderFixedCountdown()}\n        </Wrapper>\n    );\n};\n"],"names":["_a","className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","testId","onFinish","onNotify","onTick","otherProps","__rest","wrapperRef","useRef","isNotified","offsetY","setOffsetY","useState","clientRectRight","setClientRectRight","clientRectX","setClientRectX","isPlaying","setIsPlaying","announcement","setAnnouncement","remainingSeconds","initialSeconds","useTimer","ref","stickyRef","inView","useInView","threshold","rootMargin","initialInView","isVisible","warn","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","useEffect","performOnFinishHandler","performOnTickHandler","performOnNotifyHandler","y","desktopTop","top","mobileTop","_b","getOffsetY","current","handleResize","throttle","handleWindowResize","window","addEventListener","removeEventListener","timeElapsed","getAccessibleTimeText","clientRect","getBoundingClientRect","x","right","handleOnFocus","focusMessage","seconds","minutes","secs","TimeHelper","toMinutesSeconds","minuteText","secondText","renderTimer","m","s","_jsxs","_Fragment","children","_jsx","TimerIcon","$warn","TimeLeft","Timer","String","padStart","VisuallyHidden","Wrapper","Object","assign","Countdown","inert","inertValue","$visible","tabIndex","role","onFocus","left","undefined","Math","floor","document","body","clientWidth","FixedCountdown","$left","$right","renderFixedCountdown"],"mappings":"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"}
+{"version":3,"file":"countdown-timer.js","sources":["../../../src/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import { ClockIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n    formatUnitValue,\n    useApplyStyle,\n    useMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useIsMounted } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./countdown-timer.styles\";\nimport type { CountdownTimerProps } from \"./types\";\nimport { useTimer } from \"./use-timer\";\n\n// @catalog\n/**\n * Displays a live countdown of time remaining until a deadline.\n *\n * Use when a time-limited interaction — such as a session timeout or a timed\n * form — needs a persistent visual reminder.\n * @keywords deadline, expiry, session, timeout, timer\n */\nexport const CountdownTimer = ({\n    className,\n    align = \"right\",\n    timer,\n    timestamp,\n    notifyTimer,\n    offset,\n    mobileOffset,\n    show,\n    fixed = true,\n    reminderInterval = 120,\n    \"data-testid\": testId,\n    onFinish,\n    onNotify,\n    onTick,\n    ...otherProps\n}: CountdownTimerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const fixedCountdownRef = useRef<HTMLDivElement>(null);\n\n    const isNotified = useRef<boolean>(false);\n    const [offsetY, setOffsetY] = useState<number>(0);\n    const [clientRectRight, setClientRectRight] = useState<number>(0);\n    const [clientRectX, setClientRectX] = useState<number>(0);\n    const [isPlaying, setIsPlaying] = useState(false);\n    const [announcement, setAnnouncement] = useState<string>(\"\");\n\n    const isMounted = useIsMounted();\n    const [remainingSeconds, initialSeconds] = useTimer(\n        timer,\n        timestamp,\n        isPlaying\n    );\n    const { ref: stickyRef, inView } = useInView({\n        threshold: 1,\n        rootMargin: `${offsetY * -1}px 0px 0px 0px`,\n        initialInView: true,\n    });\n    const isVisible = !fixed || inView;\n    const warn =\n        typeof notifyTimer === \"number\" && remainingSeconds <= notifyTimer;\n\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useApplyStyle(fixedCountdownRef, {\n        [styles.tokens.fixedCountdown.top]: formatUnitValue(offsetY, \"px\"),\n        [styles.tokens.fixedCountdown.left]: formatUnitValue(\n            getOffsetLeft(),\n            \"px\"\n        ),\n        [styles.tokens.fixedCountdown.right]: formatUnitValue(\n            getOffsetRight(),\n            \"px\"\n        ),\n    });\n\n    useEffect(() => {\n        setIsPlaying(show);\n    }, [show]);\n\n    useEffect(() => {\n        if (remainingSeconds === 0) {\n            performOnFinishHandler();\n        } else if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds <= notifyTimer\n        ) {\n            performOnTickHandler();\n            performOnNotifyHandler();\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [remainingSeconds]);\n\n    useEffect(() => {\n        const y = getOffsetY();\n        setOffsetY(y);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isMobile, offset?.top, mobileOffset?.top]);\n\n    useEffect(() => {\n        if (wrapperRef.current) {\n            const handleResize = throttle(handleWindowResize, 300);\n            handleWindowResize();\n\n            window.addEventListener(\"resize\", handleResize);\n\n            return () => {\n                window.removeEventListener(\"resize\", handleResize);\n            };\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [wrapperRef.current]);\n\n    // Announcements\n    useEffect(() => {\n        const timeElapsed = initialSeconds - remainingSeconds;\n        if (timeElapsed === 0) return;\n        // Polite notification\n        if (timeElapsed % reminderInterval === 0) {\n            if (\n                typeof notifyTimer !== \"number\" ||\n                remainingSeconds > notifyTimer\n            ) {\n                setAnnouncement(getAccessibleTimeText(remainingSeconds));\n            }\n        }\n\n        // Assertive notification\n        if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds === notifyTimer\n        ) {\n            setAnnouncement(getAccessibleTimeText(remainingSeconds));\n        }\n    }, [remainingSeconds, initialSeconds, reminderInterval, notifyTimer]);\n\n    useEffect(() => {\n        // reset\n        isNotified.current = false;\n    }, [initialSeconds, show]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWindowResize = () => {\n        if (!wrapperRef.current) return;\n\n        const clientRect = wrapperRef.current.getBoundingClientRect();\n\n        setClientRectX(clientRect.x);\n        setClientRectRight(clientRect.right);\n    };\n\n    const handleOnFocus = () => {\n        const focusMessage = getAccessibleTimeText(remainingSeconds);\n        setAnnouncement(focusMessage);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const performOnTickHandler = () => {\n        if (onTick) {\n            onTick(remainingSeconds);\n        }\n    };\n\n    const performOnNotifyHandler = () => {\n        if (onNotify && !isNotified.current) {\n            isNotified.current = true;\n            onNotify();\n        }\n    };\n\n    const performOnFinishHandler = () => {\n        setIsPlaying(false);\n\n        if (onFinish) onFinish();\n    };\n\n    function getOffsetY() {\n        const desktopTop = offset?.top ?? 168;\n        const mobileTop = mobileOffset?.top ?? 80;\n        const offsetY = isMobile ? mobileTop : desktopTop;\n\n        return offsetY;\n    }\n\n    function getOffsetLeft() {\n        if (!isMounted || align !== \"left\") return undefined;\n        return offset?.left ?? clientRectX;\n    }\n\n    function getOffsetRight() {\n        if (!isMounted || align !== \"right\") return undefined;\n        return (\n            offset?.right ??\n            Math.floor(document.body.clientWidth - clientRectRight)\n        );\n    }\n\n    const getAccessibleTimeText = (seconds: number): string => {\n        const { minutes, seconds: secs } = TimeHelper.toMinutesSeconds(seconds);\n\n        const minuteText = minutes === 1 ? \"minute\" : \"minutes\";\n        const secondText = secs === 1 ? \"second\" : \"seconds\";\n\n        if (minutes > 0 && secs > 0) {\n            return `Time left: ${minutes} ${minuteText} and ${secs} ${secondText}`;\n        } else if (minutes > 0) {\n            return `Time left: ${minutes} ${minuteText}`;\n        } else {\n            return `Time left: ${secs} ${secondText}`;\n        }\n    };\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderPeriodicAndWarningAnnouncement = () => (\n        <VisuallyHidden\n            aria-live={\n                typeof notifyTimer === \"number\" &&\n                remainingSeconds <= notifyTimer\n                    ? \"assertive\"\n                    : \"polite\"\n            }\n            aria-atomic=\"true\"\n        >\n            {announcement}\n        </VisuallyHidden>\n    );\n\n    const renderTimer = () => {\n        const { minutes, seconds } =\n            TimeHelper.toMinutesSeconds(remainingSeconds);\n        const m = minutes !== 1 ? \"mins\" : \"min\";\n        const s = seconds !== 1 ? \"secs\" : \"sec\";\n        return (\n            <>\n                <ClockIcon className={styles.timerIcon} data-warn={!!warn} />\n                <div className={styles.timeLeft}>Time left:</div>\n                <div\n                    className={styles.timer}\n                    aria-label={getAccessibleTimeText(remainingSeconds)}\n                >\n                    {minutes} {m} {String(seconds).padStart(2, \"0\")} {s}\n                </div>\n                {renderPeriodicAndWarningAnnouncement()}\n            </>\n        );\n    };\n\n    const renderInlineCountdown = () => {\n        return (\n            <div\n                data-testid={testId}\n                data-id=\"countdown-wrapper\"\n                data-warn={!!warn}\n                ref={wrapperRef}\n                inert={inertValue(!isVisible)}\n                className={clsx(\n                    styles.countdown,\n                    styles.countdownInline,\n                    !isVisible && styles.countdownHidden\n                )}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </div>\n        );\n    };\n\n    const renderFixedCountdown = () => {\n        return (\n            <div\n                ref={fixedCountdownRef}\n                data-testid={testId}\n                data-id=\"fixed-countdown-wrapper\"\n                data-warn={!!warn}\n                className={clsx(styles.countdown, styles.countdownFixed)}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </div>\n        );\n    };\n\n    if (!isPlaying && remainingSeconds !== 0) return <></>;\n\n    return (\n        <div className={clsx(styles.wrapper, className)} {...otherProps}>\n            <div ref={stickyRef}></div>\n            {renderInlineCountdown()}\n            {wrapperRef.current && !isVisible && renderFixedCountdown()}\n        </div>\n    );\n};\n"],"names":["_a","className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","testId","onFinish","onNotify","onTick","otherProps","__rest","wrapperRef","useRef","fixedCountdownRef","isNotified","offsetY","setOffsetY","useState","clientRectRight","setClientRectRight","clientRectX","setClientRectX","isPlaying","setIsPlaying","announcement","setAnnouncement","isMounted","useIsMounted","remainingSeconds","initialSeconds","useTimer","ref","stickyRef","inView","useInView","threshold","rootMargin","initialInView","isVisible","warn","isMobile","useMaxWidthMediaQuery","useApplyStyle","styles.tokens","fixedCountdown","top","formatUnitValue","left","getOffsetLeft","right","Math","floor","document","body","clientWidth","getOffsetRight","useEffect","performOnFinishHandler","performOnTickHandler","performOnNotifyHandler","y","desktopTop","mobileTop","_b","getOffsetY","current","handleResize","throttle","handleWindowResize","window","addEventListener","removeEventListener","timeElapsed","getAccessibleTimeText","clientRect","getBoundingClientRect","x","handleOnFocus","focusMessage","seconds","minutes","secs","TimeHelper","toMinutesSeconds","minuteText","secondText","renderTimer","m","s","_jsxs","_Fragment","children","_jsx","ClockIcon","styles.timerIcon","styles.timeLeft","styles.timer","String","padStart","VisuallyHidden","Object","assign","clsx","styles.wrapper","inert","inertValue","styles.countdown","styles.countdownInline","styles.countdownHidden","tabIndex","role","onFocus","styles.countdownFixed"],"mappings":"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"}

package/cjs/countdown-timer/countdown-timer.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./countdown-timer.styles_ipn1b0.css");exports.countdown="c1ji5mw9",exports.countdownFixed="c1ehax2j",exports.countdownHidden="csdqyky",exports.countdownInline="cibq1kp",exports.timeLeft="t6f42l5",exports.timer="t19x1azi",exports.timerIcon="t1pvvziw",exports.tokens={fixedCountdown:{top:"--fds-internal-countdownTimer-fixedCountdown-top",left:"--fds-internal-countdownTimer-fixedCountdown-left",right:"--fds-internal-countdownTimer-fixedCountdown-right"}},exports.wrapper="wav7a6b";
+//# sourceMappingURL=countdown-timer.styles.js.map

package/cjs/countdown-timer/countdown-timer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"countdown-timer.styles.js","sources":["../../../src/countdown-timer/countdown-timer.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\n\nexport const tokens = {\n    fixedCountdown: {\n        top: \"--fds-internal-countdownTimer-fixedCountdown-top\",\n        left: \"--fds-internal-countdownTimer-fixedCountdown-left\",\n        right: \"--fds-internal-countdownTimer-fixedCountdown-right\",\n    },\n} as const;\n\nexport const wrapper = css`\n    width: 100%;\n`;\n\nexport const countdown = css`\n    ${Font[\"body-baseline-regular\"]}\n    display: flex;\n    align-items: center;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    border-radius: ${Radius[\"sm\"]};\n    color: ${Colour[\"text-primary\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]};\n    border-color: ${Colour[\"border-primary\"]};\n    background-color: ${Colour[\"bg\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &[data-warn=\"true\"] {\n        color: ${Colour[\"text-error\"]};\n        border-color: ${Colour[\"border-error\"]};\n    }\n`;\n\nexport const countdownHidden = css`\n    opacity: 0;\n`;\n\nexport const countdownInline = css`\n    position: relative;\n`;\n\nexport const countdownFixed = css`\n    position: fixed;\n    z-index: 10;\n\n    /* reset variables to prevent leaking to child components */\n    ${tokens.fixedCountdown.top}: initial;\n    ${tokens.fixedCountdown.left}: initial;\n    ${tokens.fixedCountdown.right}: initial;\n    top: var(${tokens.fixedCountdown.top});\n    left: var(${tokens.fixedCountdown.left});\n    right: var(${tokens.fixedCountdown.right});\n\n    box-shadow: ${Shadow[\"xs-focus-strong\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        left: 0;\n        right: 0;\n        border-radius: 0;\n        border-left: none;\n        border-right: none;\n        box-shadow: none;\n    }\n\n    &[data-warn=\"true\"] {\n        box-shadow: ${Shadow[\"xs-error-strong\"]};\n    }\n`;\n\nexport const timeLeft = css`\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n    margin-left: ${Spacing[\"spacing-8\"]};\n    margin-right: ${Spacing[\"spacing-24\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin-right: ${Spacing[\"spacing-48\"]};\n    }\n`;\n\nexport const timer = css`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n    margin-left: auto;\n`;\n\nexport const timerIcon = css`\n    color: ${Colour[\"icon-primary\"]};\n\n    &[data-warn=\"true\"] {\n        color: ${Colour[\"icon-error\"]};\n    }\n`;\n"],"names":["fixedCountdown","top","left","right"],"mappings":"6GAwBsB,kCA6BK,mCARC,kCAIA,2BAgCP,wBAUH,6BAKI,0BApFA,CAClBA,eAAgB,CACZC,IAAK,mDACLC,KAAM,oDACNC,MAAO,uEAIK"}

package/cjs/countdown-timer/countdown-timer.styles_ipn1b0.css

@@ -0,0 +1,8 @@
+@layer fds{.wav7a6b{width:100%;}
+.c1ji5mw9{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--fds-spacing-8) var(--fds-spacing-16);border-radius:var(--fds-radius-sm);color:var(--fds-colour-text-primary);border:var(--fds-border-width-010) var(--fds-border-style-solid);border-color:var(--fds-colour-border-primary);background-color:var(--fds-colour-bg);}:where(body.fds-breakpoint-sm-max) .c1ji5mw9{padding:var(--fds-spacing-16);}.c1ji5mw9[data-warn="true"]{color:var(--fds-colour-text-error);border-color:var(--fds-colour-border-error);}
+.csdqyky{opacity:0;}
+.cibq1kp{position:relative;}
+.c1ehax2j{position:fixed;z-index:10;--fds-internal-countdownTimer-fixedCountdown-top:initial;--fds-internal-countdownTimer-fixedCountdown-left:initial;--fds-internal-countdownTimer-fixedCountdown-right:initial;top:var(--fds-internal-countdownTimer-fixedCountdown-top);left:var(--fds-internal-countdownTimer-fixedCountdown-left);right:var(--fds-internal-countdownTimer-fixedCountdown-right);box-shadow:var(--fds-shadow-xs-focus-strong);}:where(body.fds-breakpoint-sm-max) .c1ehax2j{left:0;right:0;border-radius:0;border-left:none;border-right:none;box-shadow:none;}.c1ehax2j[data-warn="true"]{box-shadow:var(--fds-shadow-xs-error-strong);}
+.t6f42l5{font-weight:var(--fds-font-weight-bold);margin-left:var(--fds-spacing-8);margin-right:var(--fds-spacing-24);}:where(body.fds-breakpoint-sm-max) .t6f42l5{margin-right:var(--fds-spacing-48);}
+.t19x1azi{font-weight:var(--fds-font-weight-semibold);margin-left:auto;}
+.t1pvvziw{color:var(--fds-colour-icon-primary);}.t1pvvziw[data-warn="true"]{color:var(--fds-colour-icon-error);}}

package/cjs/dashed-border/dashed-border.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("clsx"),o=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js");var u=require("../theme/tokens/border.js"),l=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var i=require("../theme/tokens/radius.js"),a=require("../theme/utils/token-resolver.js"),t=require("../theme/utils/use-apply-styles.js"),n=require("../theme/utils/use-design-token.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var d=require("../util/merge-refs.js");require("../util/string-helper.js");var c=require("./dashed-border.styles.js"),k=require("./dashed-border.utils.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=m(s);const j=o.forwardRef(((s,m)=>{const{enabled:j=!0,thickness:v=u.BorderThickness["width-010"],radius:q=i.Radius.none,colour:f=l.Colour.border,backgroundColor:b,className:g,children:T}=s,y=e.__rest(s,["enabled","thickness","radius","colour","backgroundColor","className","children"]),C=n.useResolvedTokenValue({value:v,fallback:u.BorderThickness["width-010"],isToken:k.isThicknessToken,normalizeCustom:a.toCssValue}),p=n.useResolvedTokenValue({value:q,fallback:i.Radius.none,isToken:k.isRadiusToken,normalizeCustom:a.toCssValue}),R=n.useResolvedTokenValue({value:f,fallback:l.Colour.border,isToken:k.isColourToken,normalizeCustom:String}),x=n.useResolvedTokenValue({value:b,fallback:"none",isToken:k.isColourToken,normalizeCustom:String}),B=j||!!b,V=k.createSvgBackgroundImage({radius:p,colour:R,thickness:C,enabled:j}),S=o.useRef(null),z=o.useRef(null),N=m?d.mergeRefs(S,m):S;return t.useApplyStyle(S,{[c.tokens.rootRadius]:p,[c.tokens.rootBackgroundColor]:b?x:null}),t.useApplyStyle(z,{[c.tokens.overlayBackgroundImage]:B?V:null}),r.jsxs("div",Object.assign({ref:N,className:h.default(c.root,g)},y,{children:[B&&r.jsx("div",{"aria-hidden":"true",className:c.overlay,ref:z}),T]}))}));exports.DashedBorder=j;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("clsx"),u=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js");var o=require("../theme/tokens/border.js"),i=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/tokens/radius.js"),a=require("../theme/utils/use-apply-styles.js"),t=require("../theme/utils/use-design-token.js");require("../theme/utils/use-media-query.js");var n=require("../theme/utils/token-resolver.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var d=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var c=require("../util/styling-helper.js"),k=require("./dashed-border.styles.js"),m=require("./dashed-border.utils.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=h(s);const q=u.forwardRef(((s,h)=>{const{enabled:q=!0,thickness:v=o.BorderThickness["width-010"],radius:f=l.Radius.none,colour:b=i.Colour.border,backgroundColor:g,className:y,children:T}=s,p=e.__rest(s,["enabled","thickness","radius","colour","backgroundColor","className","children"]),C=t.useResolvedTokenValue({value:v,fallback:o.BorderThickness["width-010"],isToken:c.isThicknessToken,normalizeCustom:n.toCssValue}),R=t.useResolvedTokenValue({value:f,fallback:l.Radius.none,isToken:c.isRadiusToken,normalizeCustom:n.toCssValue}),x=t.useResolvedTokenValue({value:b,fallback:i.Colour.border,isToken:c.isColourToken,normalizeCustom:String}),B=t.useResolvedTokenValue({value:g,fallback:"none",isToken:c.isColourToken,normalizeCustom:String}),V=q||!!g,S=m.createSvgBackgroundImage({radius:R,colour:x,thickness:C,enabled:q}),z=u.useRef(null),N=u.useRef(null),_=h?d.mergeRefs(z,h):z;return a.useApplyStyle(z,{[k.tokens.rootRadius]:R,[k.tokens.rootBackgroundColor]:g?B:null}),a.useApplyStyle(N,{[k.tokens.overlayBackgroundImage]:V?S:null}),r.jsxs("div",Object.assign({ref:_,className:j.default(k.root,y)},p,{children:[V&&r.jsx("div",{"aria-hidden":"true",className:k.overlay,ref:N}),T]}))}));exports.DashedBorder=q;
 //# sourceMappingURL=dashed-border.js.map

package/cjs/dashed-border/dashed-border.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashed-border.js","sources":["../../../src/dashed-border/dashed-border.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useRef } from \"react\";\n\nimport {\n    BorderThickness,\n    Colour,\n    Radius,\n    toCssValue,\n    useApplyStyle,\n    useResolvedTokenValue,\n} from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./dashed-border.styles\";\nimport {\n    createSvgBackgroundImage,\n    isColourToken,\n    isRadiusToken,\n    isThicknessToken,\n} from \"./dashed-border.utils\";\nimport type { DashedBorderProps } from \"./types\";\n\nconst Component = (\n    props: DashedBorderProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const {\n        enabled = true,\n        thickness = BorderThickness[\"width-010\"],\n        radius = Radius[\"none\"],\n        colour = Colour[\"border\"],\n        backgroundColor,\n        className,\n        children,\n        ...otherProps\n    } = props;\n\n    const effectiveThickness = useResolvedTokenValue({\n        value: thickness,\n        fallback: BorderThickness[\"width-010\"],\n        isToken: isThicknessToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveRadius = useResolvedTokenValue({\n        value: radius,\n        fallback: Radius[\"none\"],\n        isToken: isRadiusToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveColour = useResolvedTokenValue({\n        value: colour,\n        fallback: Colour[\"border\"],\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const effectiveBackgroundColor = useResolvedTokenValue({\n        value: backgroundColor,\n        fallback: \"none\",\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const showSvg = enabled || !!backgroundColor;\n    const overlayBackgroundImage = createSvgBackgroundImage({\n        radius: effectiveRadius,\n        colour: effectiveColour,\n        thickness: effectiveThickness,\n        enabled,\n    });\n    const rootRef = useRef<HTMLDivElement>(null);\n    const overlayRef = useRef<HTMLDivElement>(null);\n    const mergedRootRef = ref ? mergeRefs(rootRef, ref) : rootRef;\n\n    useApplyStyle(rootRef, {\n        [styles.tokens.rootRadius]: effectiveRadius,\n        [styles.tokens.rootBackgroundColor]: backgroundColor\n            ? effectiveBackgroundColor\n            : null,\n    });\n\n    useApplyStyle(overlayRef, {\n        [styles.tokens.overlayBackgroundImage]: showSvg\n            ? overlayBackgroundImage\n            : null,\n    });\n\n    return (\n        <div\n            ref={mergedRootRef}\n            className={clsx(styles.root, className)}\n            {...otherProps}\n        >\n            {showSvg && (\n                <div\n                    aria-hidden=\"true\"\n                    className={styles.overlay}\n                    ref={overlayRef}\n                />\n            )}\n            {children}\n        </div>\n    );\n};\n\nexport const DashedBorder = forwardRef(Component);\n"],"names":["DashedBorder","forwardRef","props","ref","enabled","thickness","BorderThickness","radius","Radius","colour","Colour","backgroundColor","className","children","otherProps","__rest","effectiveThickness","useResolvedTokenValue","value","fallback","isToken","isThicknessToken","normalizeCustom","toCssValue","effectiveRadius","isRadiusToken","effectiveColour","isColourToken","String","effectiveBackgroundColor","showSvg","overlayBackgroundImage","createSvgBackgroundImage","rootRef","useRef","overlayRef","mergedRootRef","mergeRefs","useApplyStyle","styles.tokens","rootRadius","rootBackgroundColor","_jsxs","Object","assign","clsx","styles.root","_jsx","styles.overlay"],"mappings":"y2BAqBA,MAqFaA,EAAeC,EAAAA,YArFV,CACdC,EACAC,KAEA,MAAMC,QACFA,GAAU,EAAIC,UACdA,EAAYC,EAAAA,gBAAgB,aAAYC,OACxCA,EAASC,EAAAA,OAAa,KAACC,OACvBA,EAASC,EAAAA,OAAe,OAACC,gBACzBA,EAAeC,UACfA,EAASC,SACTA,GAEAX,EADGY,EAAUC,EAAAA,OACbb,EATE,CAAA,UAAA,YAAA,SAAA,SAAA,kBAAA,YAAA,aAWAc,EAAqBC,EAAAA,sBAAsB,CAC7CC,MAAOb,EACPc,SAAUb,EAAAA,gBAAgB,aAC1Bc,QAASC,EAAAA,iBACTC,gBAAiBC,EAAAA,aAGfC,EAAkBP,EAAAA,sBAAsB,CAC1CC,MAAOX,EACPY,SAAUX,EAAAA,OAAa,KACvBY,QAASK,EAAAA,cACTH,gBAAiBC,EAAAA,aAGfG,EAAkBT,EAAAA,sBAAsB,CAC1CC,MAAOT,EACPU,SAAUT,EAAAA,OAAe,OACzBU,QAASO,EAAAA,cACTL,gBAAiBM,SAGfC,EAA2BZ,EAAAA,sBAAsB,CACnDC,MAAOP,EACPQ,SAAU,OACVC,QAASO,EAAAA,cACTL,gBAAiBM,SAGfE,EAAU1B,KAAaO,EACvBoB,EAAyBC,EAAAA,yBAAyB,CACpDzB,OAAQiB,EACRf,OAAQiB,EACRrB,UAAWW,EACXZ,YAEE6B,EAAUC,EAAAA,OAAuB,MACjCC,EAAaD,EAAAA,OAAuB,MACpCE,EAAgBjC,EAAMkC,EAAAA,UAAUJ,EAAS9B,GAAO8B,EAetD,OAbAK,EAAAA,cAAcL,EAAS,CACnB,CAACM,EAAAA,OAAcC,YAAahB,EAC5B,CAACe,EAAAA,OAAcE,qBAAsB9B,EAC/BkB,EACA,OAGVS,EAAAA,cAAcH,EAAY,CACtB,CAACI,EAAAA,OAAcR,wBAAyBD,EAClCC,EACA,OAINW,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIzC,IAAKiC,EACLxB,UAAWiC,EAAAA,QAAKC,EAAAA,KAAalC,IACzBE,EAAU,CAAAD,SAAA,CAEbiB,GACGiB,EAAAA,yBACgB,OACZnC,UAAWoC,UACX7C,IAAKgC,IAGZtB,KACC"}
+{"version":3,"file":"dashed-border.js","sources":["../../../src/dashed-border/dashed-border.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { BorderThickness, Colour, Radius, useApplyStyle } from \"../theme\";\nimport { toCssValue, useResolvedTokenValue } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport {\n    isColourToken,\n    isRadiusToken,\n    isThicknessToken,\n} from \"../util/styling-helper\";\nimport * as styles from \"./dashed-border.styles\";\nimport { createSvgBackgroundImage } from \"./dashed-border.utils\";\nimport type { DashedBorderProps } from \"./types\";\n\nconst Component = (\n    props: DashedBorderProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const {\n        enabled = true,\n        thickness = BorderThickness[\"width-010\"],\n        radius = Radius[\"none\"],\n        colour = Colour[\"border\"],\n        backgroundColor,\n        className,\n        children,\n        ...otherProps\n    } = props;\n\n    const effectiveThickness = useResolvedTokenValue({\n        value: thickness,\n        fallback: BorderThickness[\"width-010\"],\n        isToken: isThicknessToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveRadius = useResolvedTokenValue({\n        value: radius,\n        fallback: Radius[\"none\"],\n        isToken: isRadiusToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveColour = useResolvedTokenValue({\n        value: colour,\n        fallback: Colour[\"border\"],\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const effectiveBackgroundColor = useResolvedTokenValue({\n        value: backgroundColor,\n        fallback: \"none\",\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const showSvg = enabled || !!backgroundColor;\n    const overlayBackgroundImage = createSvgBackgroundImage({\n        radius: effectiveRadius,\n        colour: effectiveColour,\n        thickness: effectiveThickness,\n        enabled,\n    });\n    const rootRef = useRef<HTMLDivElement>(null);\n    const overlayRef = useRef<HTMLDivElement>(null);\n    const mergedRootRef = ref ? mergeRefs(rootRef, ref) : rootRef;\n\n    useApplyStyle(rootRef, {\n        [styles.tokens.rootRadius]: effectiveRadius,\n        [styles.tokens.rootBackgroundColor]: backgroundColor\n            ? effectiveBackgroundColor\n            : null,\n    });\n\n    useApplyStyle(overlayRef, {\n        [styles.tokens.overlayBackgroundImage]: showSvg\n            ? overlayBackgroundImage\n            : null,\n    });\n\n    return (\n        <div\n            ref={mergedRootRef}\n            className={clsx(styles.root, className)}\n            {...otherProps}\n        >\n            {showSvg && (\n                <div\n                    aria-hidden=\"true\"\n                    className={styles.overlay}\n                    ref={overlayRef}\n                />\n            )}\n            {children}\n        </div>\n    );\n};\n\n// @catalog\n/**\n * A container that renders a dashed border using an SVG overlay.\n *\n * Use when you need a dashed visual boundary around content — for example, drop zones,\n * placeholder regions, or empty-state containers.\n * @keywords boundary, outline, region\n */\nexport const DashedBorder = forwardRef(Component);\n"],"names":["DashedBorder","forwardRef","props","ref","enabled","thickness","BorderThickness","radius","Radius","colour","Colour","backgroundColor","className","children","otherProps","__rest","effectiveThickness","useResolvedTokenValue","value","fallback","isToken","isThicknessToken","normalizeCustom","toCssValue","effectiveRadius","isRadiusToken","effectiveColour","isColourToken","String","effectiveBackgroundColor","showSvg","overlayBackgroundImage","createSvgBackgroundImage","rootRef","useRef","overlayRef","mergedRootRef","mergeRefs","useApplyStyle","styles.tokens","rootRadius","rootBackgroundColor","_jsxs","Object","assign","clsx","styles.root","_jsx","styles.overlay"],"mappings":"ihCAeA,MA6FaA,EAAeC,EAAAA,YA7FV,CACdC,EACAC,KAEA,MAAMC,QACFA,GAAU,EAAIC,UACdA,EAAYC,EAAAA,gBAAgB,aAAYC,OACxCA,EAASC,EAAAA,OAAa,KAACC,OACvBA,EAASC,EAAAA,OAAe,OAACC,gBACzBA,EAAeC,UACfA,EAASC,SACTA,GAEAX,EADGY,EAAUC,EAAAA,OACbb,EATE,CAAA,UAAA,YAAA,SAAA,SAAA,kBAAA,YAAA,aAWAc,EAAqBC,EAAAA,sBAAsB,CAC7CC,MAAOb,EACPc,SAAUb,EAAAA,gBAAgB,aAC1Bc,QAASC,EAAAA,iBACTC,gBAAiBC,EAAAA,aAGfC,EAAkBP,EAAAA,sBAAsB,CAC1CC,MAAOX,EACPY,SAAUX,EAAAA,OAAa,KACvBY,QAASK,EAAAA,cACTH,gBAAiBC,EAAAA,aAGfG,EAAkBT,EAAAA,sBAAsB,CAC1CC,MAAOT,EACPU,SAAUT,EAAAA,OAAe,OACzBU,QAASO,EAAAA,cACTL,gBAAiBM,SAGfC,EAA2BZ,EAAAA,sBAAsB,CACnDC,MAAOP,EACPQ,SAAU,OACVC,QAASO,EAAAA,cACTL,gBAAiBM,SAGfE,EAAU1B,KAAaO,EACvBoB,EAAyBC,EAAAA,yBAAyB,CACpDzB,OAAQiB,EACRf,OAAQiB,EACRrB,UAAWW,EACXZ,YAEE6B,EAAUC,EAAAA,OAAuB,MACjCC,EAAaD,EAAAA,OAAuB,MACpCE,EAAgBjC,EAAMkC,EAAAA,UAAUJ,EAAS9B,GAAO8B,EAetD,OAbAK,EAAAA,cAAcL,EAAS,CACnB,CAACM,EAAAA,OAAcC,YAAahB,EAC5B,CAACe,EAAAA,OAAcE,qBAAsB9B,EAC/BkB,EACA,OAGVS,EAAAA,cAAcH,EAAY,CACtB,CAACI,EAAAA,OAAcR,wBAAyBD,EAClCC,EACA,OAINW,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIzC,IAAKiC,EACLxB,UAAWiC,EAAAA,QAAKC,EAAAA,KAAalC,IACzBE,EAAU,CAAAD,SAAA,CAEbiB,GACGiB,EAAAA,yBACgB,OACZnC,UAAWoC,UACX7C,IAAKgC,IAGZtB,KACC"}

package/cjs/dashed-border/dashed-border.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashed-border.styles.js","sources":["../../../src/dashed-border/dashed-border.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const tokens = {\n    rootRadius: \"--fds-internal-dashedBorder-root-radius\",\n    rootBackgroundColor: \"--fds-internal-dashedBorder-root-backgroundColor\",\n    overlayBackgroundImage:\n        \"--fds-internal-dashedBorder-overlay-backgroundImage\",\n} as const;\n\nexport const root = css`\n    position: relative;\n    overflow: hidden;\n    border-radius: var(${tokens.rootRadius}, 0);\n    background-color: var(${tokens.rootBackgroundColor}, transparent);\n`;\n\nexport const overlay = css`\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    background-image: var(${tokens.overlayBackgroundImage}, none);\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: 100% 100%;\n    pointer-events: none;\n`;\n"],"names":["rootRadius","rootBackgroundColor","overlayBackgroundImage"],"mappings":"yFAgBoB,uBAPH,0BAPK,CAClBA,WAAY,0CACZC,oBAAqB,mDACrBC,uBACI"}
+{"version":3,"file":"dashed-border.styles.js","sources":["../../../src/dashed-border/dashed-border.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const tokens = {\n    rootRadius: \"--fds-internal-dashedBorder-root-radius\",\n    rootBackgroundColor: \"--fds-internal-dashedBorder-root-backgroundColor\",\n    overlayBackgroundImage:\n        \"--fds-internal-dashedBorder-overlay-backgroundImage\",\n} as const;\n\nexport const root = css`\n    position: relative;\n    overflow: hidden;\n    border-radius: var(${tokens.rootRadius}, 0);\n    background-color: var(${tokens.rootBackgroundColor}, transparent);\n`;\n\nexport const overlay = css`\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    background-image: var(${tokens.overlayBackgroundImage}, none);\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: 100% 100%;\n    pointer-events: none;\n`;\n"],"names":["rootRadius","rootBackgroundColor","overlayBackgroundImage"],"mappings":"uGAgBoB,uBAPH,0BAPK,CAClBA,WAAY,0CACZC,oBAAqB,mDACrBC,uBACI"}

package/cjs/dashed-border/dashed-border.styles_zszoox.css

@@ -1,2 +1,2 @@
-.r1c3yh16{position:relative;overflow:hidden;border-radius:var(--fds-internal-dashedBorder-root-radius, 0);background-color:var(--fds-internal-dashedBorder-root-backgroundColor, transparent);}
-.okel4vg{position:absolute;inset:0;width:100%;height:100%;background-image:var(--fds-internal-dashedBorder-overlay-backgroundImage, none);background-repeat:no-repeat;-webkit-background-position:center;background-position:center;-webkit-background-size:100% 100%;background-size:100% 100%;pointer-events:none;}
+@layer fds{.r1c3yh16{position:relative;overflow:hidden;border-radius:var(--fds-internal-dashedBorder-root-radius, 0);background-color:var(--fds-internal-dashedBorder-root-backgroundColor, transparent);}
+.okel4vg{position:absolute;inset:0;width:100%;height:100%;background-image:var(--fds-internal-dashedBorder-overlay-backgroundImage, none);background-repeat:no-repeat;-webkit-background-position:center;background-position:center;-webkit-background-size:100% 100%;background-size:100% 100%;pointer-events:none;}}

package/cjs/dashed-border/dashed-border.utils.js

@@ -1,2 +1,2 @@
-"use strict";require("../theme/theme-provider/index.js"),require("react"),require("../theme/theme-provider/context.js");var e=require("../theme/tokens/border.js");require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var r=require("../theme/tokens/radius.js"),s=require("../theme/utils/token-resolver.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/string-helper.js");const t=new Set(Object.values(r.Radius)),o=new Set(Object.values(e.BorderThickness));exports.createSvgBackgroundImage=({colour:e,enabled:r,radius:s,thickness:t})=>`url("data:image/svg+xml,${encodeURIComponent(`\n    <svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'>\n        <rect\n            width='100%' height='100%' fill='none'\n            rx='${s}'\n            ry='${s}'\n            stroke='${r?e:"none"}'\n            stroke-width='${r?t:0}'\n            stroke-dasharray='4, 8' stroke-dashoffset='0' stroke-linecap='square'\n        />\n    </svg>`)}")`,exports.isColourToken=e=>s.isTokenWithPrefix(e,"var(--fds-colour-"),exports.isRadiusToken=e=>s.isTokenFromSet(e,t),exports.isThicknessToken=e=>s.isTokenFromSet(e,o);
+"use strict";exports.createSvgBackgroundImage=({colour:e,enabled:n,radius:t,thickness:s})=>`url("data:image/svg+xml,${encodeURIComponent(`\n    <svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'>\n        <rect\n            width='100%' height='100%' fill='none'\n            rx='${t}'\n            ry='${t}'\n            stroke='${n?e:"none"}'\n            stroke-width='${n?s:0}'\n            stroke-dasharray='4, 8' stroke-dashoffset='0' stroke-linecap='square'\n        />\n    </svg>`)}")`;
 //# sourceMappingURL=dashed-border.utils.js.map

package/cjs/dashed-border/dashed-border.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashed-border.utils.js","sources":["../../../src/dashed-border/dashed-border.utils.ts"],"sourcesContent":["import type {\n    ColourCSSVariableString,\n    RadiusCSSVariableString,\n} from \"../theme\";\nimport {\n    BorderThickness,\n    isTokenFromSet,\n    isTokenWithPrefix,\n    Radius,\n} from \"../theme\";\nimport type { ValueOf } from \"../util/utility-types\";\n\nconst radiusTokenSet = new Set<string>(Object.values(Radius));\nconst thicknessTokenSet = new Set<string>(Object.values(BorderThickness));\n\nexport interface CreateSvgBackgroundImageOptions {\n    /** Resolved stroke color for the dashed border. */\n    colour: string;\n    /** Whether dashed stroke should be rendered. */\n    enabled: boolean;\n    /** Resolved CSS border radius for the SVG rect. */\n    radius: string;\n    /** Resolved stroke width for the dashed border. */\n    thickness: string;\n}\n\nexport const isRadiusToken = (\n    value: unknown\n): value is RadiusCSSVariableString => {\n    return isTokenFromSet<RadiusCSSVariableString>(value, radiusTokenSet);\n};\n\nexport const isThicknessToken = (\n    value: unknown\n): value is ValueOf<typeof BorderThickness> => {\n    return isTokenFromSet<ValueOf<typeof BorderThickness>>(\n        value,\n        thicknessTokenSet\n    );\n};\n\nexport const isColourToken = (\n    value: unknown\n): value is ColourCSSVariableString => {\n    return isTokenWithPrefix<ColourCSSVariableString>(\n        value,\n        \"var(--fds-colour-\"\n    );\n};\n\n/**\n * Builds a data-URI SVG used as the dashed border background image.\n * @param options SVG background image options.\n * @returns Encoded SVG as CSS `url(...)` string.\n */\nexport const createSvgBackgroundImage = ({\n    colour,\n    enabled,\n    radius,\n    thickness,\n}: CreateSvgBackgroundImageOptions) => {\n    const svg = `\n    <svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'>\n        <rect\n            width='100%' height='100%' fill='none'\n            rx='${radius}'\n            ry='${radius}'\n            stroke='${enabled ? colour : \"none\"}'\n            stroke-width='${enabled ? thickness : 0}'\n            stroke-dasharray='4, 8' stroke-dashoffset='0' stroke-linecap='square'\n        />\n    </svg>`;\n\n    return `url(\"data:image/svg+xml,${encodeURIComponent(svg)}\")`;\n};\n"],"names":["radiusTokenSet","Set","Object","values","Radius","thicknessTokenSet","BorderThickness","colour","enabled","radius","thickness","encodeURIComponent","value","isTokenWithPrefix","isTokenFromSet"],"mappings":"keAYA,MAAMA,EAAiB,IAAIC,IAAYC,OAAOC,OAAOC,EAAAA,SAC/CC,EAAoB,IAAIJ,IAAYC,OAAOC,OAAOG,EAAAA,mDA0ChB,EACpCC,SACAC,UACAC,SACAC,eAcO,2BAA2BC,mBAZtB,iKAIEF,uBACAA,2BACID,EAAUD,EAAS,sCACbC,EAAUE,EAAY,2IA1B9CE,GAEOC,EAAAA,kBACHD,EACA,2CAnBJA,GAEOE,EAAAA,eAAwCF,EAAOZ,4BAItDY,GAEOE,EAAAA,eACHF,EACAP"}
+{"version":3,"file":"dashed-border.utils.js","sources":["../../../src/dashed-border/dashed-border.utils.ts"],"sourcesContent":["export interface CreateSvgBackgroundImageOptions {\n    /** Resolved stroke color for the dashed border. */\n    colour: string;\n    /** Whether dashed stroke should be rendered. */\n    enabled: boolean;\n    /** Resolved CSS border radius for the SVG rect. */\n    radius: string;\n    /** Resolved stroke width for the dashed border. */\n    thickness: string;\n}\n\n/**\n * Builds a data-URI SVG used as the dashed border background image.\n * @param options SVG background image options.\n * @returns Encoded SVG as CSS `url(...)` string.\n */\nexport const createSvgBackgroundImage = ({\n    colour,\n    enabled,\n    radius,\n    thickness,\n}: CreateSvgBackgroundImageOptions) => {\n    const svg = `\n    <svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'>\n        <rect\n            width='100%' height='100%' fill='none'\n            rx='${radius}'\n            ry='${radius}'\n            stroke='${enabled ? colour : \"none\"}'\n            stroke-width='${enabled ? thickness : 0}'\n            stroke-dasharray='4, 8' stroke-dashoffset='0' stroke-linecap='square'\n        />\n    </svg>`;\n\n    return `url(\"data:image/svg+xml,${encodeURIComponent(svg)}\")`;\n};\n"],"names":["colour","enabled","radius","thickness","encodeURIComponent"],"mappings":"8CAgBwC,EACpCA,SACAC,UACAC,SACAC,eAcO,2BAA2BC,mBAZtB,iKAIEF,uBACAA,2BACID,EAAUD,EAAS,sCACbC,EAAUE,EAAY"}

package/cjs/data-table/data-table.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),n=require("react"),i=require("../external/react-intersection-observer/index.js"),l=require("../external/react-resize-detector/build/index.esm.js");require("../animations/loading-dots/loading-dots.js");var s=require("../animations/loading-dots-spinner/loading-dots-spinner.js");require("../animations/loading-spinner/loading-spinner.js"),require("styled-components");var o=require("../checkbox/checkbox.js"),d=require("../error-display/error-display.js");require("../v3_theme/index.js");var c=require("../typography/index.js"),a=require("../util/use-event-listener.js"),u=require("./data-table.styles.js");exports.DataTable=h=>{var{id:g,headers:p,rows:x,className:b,sortIndicators:j,alternatingRows:y,loadState:w="success",enableMultiSelect:f,selectedIds:m,disabledIds:C,enableActionBar:v,enableSelectAll:S,enableStickyHeader:$,emptyView:k,actionBarContent:B,renderCustomEmptyView:H,onHeaderClick:q,onSelect:R,onSelectAll:A,onClearSelectionClick:T}=h,I=e.__rest(h,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const E=n.useRef(null),D=n.useRef(null),V=n.useRef(null),W=n.useRef(null),L=n.useRef(null),[N,_]=n.useState(!1),[M,z]=n.useState(!1),[F,K]=n.useState(!1),[Y,O]=n.useState(!1),[U,G]=n.useState(!1),{ref:J,inView:P}=i.useInView(),Q=n.useCallback((()=>{if(!L.current||!W.current)return;const e=L.current.scrollHeight>L.current.clientHeight;_(e),e?W.current.style.transform="translateY(0)":le()}),[]);n.useEffect((()=>{Q()}),[]),l.useResizeDetector({onResize:Q});a.useEventListener("scroll",(()=>{requestAnimationFrame((()=>{N?ie():le()})),L.current&&K(L.current.getBoundingClientRect().bottom<=window.innerHeight)}),"window"),n.useEffect((()=>{se()}),[x]);const X=()=>(null==m?void 0:m.length)===(null==x?void 0:x.length),Z=e=>!!(null==m?void 0:m.includes(e)),ee=e=>!!y&&e%2==1,te=e=>!!(null==C?void 0:C.includes(e)),re=e=>{if(I["data-testid"])return`${I["data-testid"]}-${e}`},ne=()=>p.length+(f?1:0),ie=()=>{if(!L.current)return;const e=L.current.getBoundingClientRect();O(e.bottom>window.innerHeight+30&&e.top<window.innerHeight-200)},le=()=>{if(!(E.current&&D.current&&L.current&&W.current&&V.current))return;const e=D.current.getBoundingClientRect();if(e.top>window.innerHeight){const t=e.bottom-window.innerHeight,r=E.current.getBoundingClientRect().height-V.current.clientHeight-32,n=Math.min(t,r);W.current.style.transform=`translateY(-${n}px)`}else W.current.style.transform="translateY(0)"},se=()=>{E.current&&L.current&&G(E.current.clientHeight+(v?56:0)<L.current.clientHeight)},oe=e=>{const{fieldKey:r,label:n,clickable:i=!1,style:l}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e;return t.jsx(u.HeaderCell,{"data-testid":re(`header-${r}`),$clickable:i,onClick:()=>i&&(null==q?void 0:q(r)),style:l,$isCheckbox:!1,children:t.jsxs(u.HeaderCellWrapper,{children:["string"==typeof n?t.jsx(c.Typography.BodyBL,{weight:"bold",children:n}):n,de(r)]})},r)},de=e=>{const n=null==j?void 0:j[e];return n?"asc"===n?t.jsx(r.ArrowUpIcon,{"data-testid":re(`header-${e}-arrowup`)}):t.jsx(r.ArrowDownIcon,{"data-testid":re(`header-${e}-arrowdown`)}):t.jsx(t.Fragment,{})},ce=()=>t.jsx(u.HeaderCell,{"data-testid":re("header-selection"),$clickable:!1,$isCheckbox:!0,children:t.jsx(u.CheckBoxWrapper,{children:S&&t.jsx(o.Checkbox,{checked:X(),indeterminate:!!m&&0!==m.length&&!X(),onClick:()=>{A&&A(X())}})})}),ae=(e,r)=>{const n="string"!=typeof e?e.style:void 0,i="string"==typeof e?e:e.fieldKey,l=r.id.toString(),s=r[i],o=`${l}-${i}`;return t.jsx(u.BodyCell,{"data-testid":re(`row-${o}`),style:n,$isCheckbox:!1,children:"string"==typeof s||"number"==typeof s?t.jsx(u.BodyCellContent,{children:s}):"function"==typeof s?s(r,{isSelected:Z(l)}):s},o)},ue=e=>t.jsx(u.BodyCell,{"data-testid":re(`row-${e}-selection`),$isCheckbox:!0,children:t.jsx(u.CheckBoxWrapper,{children:t.jsx(o.Checkbox,{checked:Z(e),onClick:()=>{R&&R(e,!Z(e))},disabled:te(e)})})}),he=()=>t.jsx(d.ErrorDisplay,Object.assign({type:"no-item-found"},k,{title:(null==k?void 0:k.title)?"string"==typeof k.title?t.jsx(u.ErrorDisplayTitle,{weight:"bold",children:k.title}):k.title:t.jsx(u.ErrorDisplayTitle,{weight:"bold",children:"No <items> found"}),description:(null==k?void 0:k.description)?k.description:"No matching rows"}));return t.jsxs(u.TableWrapper,{id:g||"table-wrapper","data-testid":I["data-testid"]||"table",className:b,ref:L,onScroll:()=>{N&&L.current&&z(L.current.scrollTop+L.current.clientHeight>=L.current.scrollHeight)},tabIndex:0,children:[t.jsx(u.TableContainer,{children:t.jsxs(u.Table,{$end:F,$scrollable:N,ref:E,$stickyHeader:$,children:[t.jsx("thead",{ref:V,children:t.jsxs(u.HeaderRow,{children:[f&&ce(),p.map(oe)]})}),t.jsx(u.TableBody,{$showLastRowBottomBorder:U,children:"success"===w?!x||x.length<1?t.jsx("tr",{children:t.jsx(u.EmptyViewCell,{colSpan:ne(),children:H?H():he()})}):t.jsx(t.Fragment,{children:null==x?void 0:x.map(((e,r)=>t.jsxs(u.BodyRow,{"data-testid":re(`row-${e.id.toString()}`),$alternating:ee(r),$isSelectable:f,$isSelected:Z(e.id.toString()),children:[f&&ue(e.id.toString()),p.map((t=>ae(t,e)))]},e.id.toString())))}):t.jsx("tr",{children:t.jsx("td",{colSpan:ne(),children:t.jsx(u.LoaderWrapper,{children:"loading"===w&&t.jsx(s.LoadingDotsSpinner,{})})})})})]})}),v&&m&&m.length>0&&(()=>{var e,r,n,i;const l=null!==(e=null==m?void 0:m.length)&&void 0!==e?e:0;return t.jsx(u.ActionBarWrapper,{ref:W,$fixed:Y,$left:null===(n=null===(r=null==E?void 0:E.current)||void 0===r?void 0:r.getBoundingClientRect())||void 0===n?void 0:n.left,$width:null===(i=null==E?void 0:E.current)||void 0===i?void 0:i.clientWidth,children:t.jsxs(u.ActionBar,{$float:(N?!M:!P)||Y,$scrollable:N,children:[t.jsx(c.Typography.BodyMD,{weight:"semibold",children:`${l} item${l>1?"s":""} selected`}),t.jsx(u.TextButton,{type:"button",onClick:T,children:"Clear selection"}),B]})})})(),t.jsx("div",{ref:e=>{D.current=e,J(e)}})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),i=require("clsx"),l=require("react"),n=require("../external/react-resize-detector/build/index.esm.js");require("../animations/loading-dots/loading-dots.js");var a=require("../animations/loading-dots-spinner/loading-dots-spinner.js");require("../animations/loading-spinner/loading-spinner.js"),require("../theme/theme-provider/context.js");var s=require("../checkbox/checkbox.js"),o=require("../error-display/error-display.js"),d=require("../shared/accessibility/index.js"),c=require("../shared/input-wrapper/input-wrapper.js");require("../theme/theme-provider/index.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var u=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var h=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var p=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var b=require("../util/use-event.js"),g=require("../util/use-event-listener.js"),m=require("../util/use-throttle.js"),y=require("./data-table.styles.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=j(i);exports.DataTable=i=>{var{id:j,headers:f,rows:w,className:v,sortIndicators:S,alternatingRows:C,loadState:k="success",enableMultiSelect:q,selectedIds:N,disabledIds:B,enableActionBar:$,enableActionBarWithoutSelection:H,enableSelectAll:R,enableStickyHeader:W,emptyView:A,actionBarContent:I,renderCustomEmptyView:T,onHeaderClick:D,onSelect:E,onSelectAll:L,onClearSelectionClick:M}=i,V=e.__rest(i,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableActionBarWithoutSelection","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const F=l.useRef(null),K=l.useRef(null),_=l.useRef(null),z=l.useRef(null),G=p.useId(),O=f.filter((e=>"string"!=typeof e&&!!e.keyColumn)),[P,U]=l.useState("inline"),[J,Q]=l.useState(!1),[X,Y]=l.useState(!1);u.useApplyStyle(_,{[y.tokens.actionBarWrapperLeft]:X&&F.current?`${F.current.getBoundingClientRect().left}px`:void 0,[y.tokens.actionBarWrapperWidth]:F.current?`${F.current.clientWidth}px`:void 0});const Z=b.useEvent((()=>{he()}));l.useEffect((()=>{Z()}),[Z]);const ee=m.useThrottle((()=>he()),100);n.useResizeDetector({targetRef:z,onResize:()=>ee()}),g.useEventListener("scroll",ee),g.useEventListener("scroll",ee,z.current);const te=()=>!!(w&&w.length&&N)&&N.length===w.length,re=e=>!!(null==N?void 0:N.includes(e)),ie=e=>!!C&&e%2==1,le=e=>!!(null==B?void 0:B.includes(e)),ne=e=>{if(V["data-testid"])return`${V["data-testid"]}-${e}`},ae=()=>f.length+(q?1:0),se=e=>null==S?void 0:S[e],oe=e=>{const t=se(e);if(t)return"asc"===t?"ascending":"descending"},de=e=>` by ${"asc"===se(e)?"descending":"ascending"} order`,ce=(e,t)=>`${G}-row-${e}-${t}-key-column`,ue=e=>{const t=O.map((t=>ce(e,t.fieldKey)));return d.concatIds(...t)},he=()=>{if(!z.current||!K.current||!_.current)return;const e=z.current.getBoundingClientRect(),t=K.current.getBoundingClientRect();let r="inline";const i=z.current.scrollHeight>z.current.clientHeight;if(e.top>window.innerHeight||e.bottom<0?r="inline":i?e.top>0&&e.top<window.innerHeight&&e.bottom>0&&e.bottom<window.innerHeight||e.top<0&&e.bottom>0&&e.bottom<window.innerHeight?r="sticky":e.bottom>window.innerHeight&&Math.max(e.top,t.bottom)+t.height<window.innerHeight&&(r="fixed"):e.bottom>window.innerHeight&&t.bottom+t.height<window.innerHeight&&(r="fixed"),Q(i),U(r),"fixed"===r)Y(!0);else if("sticky"===r){const e=z.current.scrollTop+z.current.clientHeight<z.current.scrollHeight;Y(e)}else Y(!1)},pe=e=>{const{fieldKey:r,label:i,clickable:l=!1,style:n}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e,a=!!se(r),s=(e=>`${G}-header-${e}`)(r);return t.jsxs("th",{"data-testid":ne(`header-${r}`),className:x.default(y.headerCell,l&&y.headerCellClickable),scope:"col","aria-sort":oe(r),style:n,onClick:()=>(e=>{null==D||D(e)})(r),children:[t.jsxs("div",{className:y.headerCellContent,id:s,children:["string"==typeof i?t.jsx(h.Typography.BodyBL,{weight:"bold",children:i}):i,be(r)]}),(l||a)&&t.jsx(d.VisuallyHidden,{children:t.jsxs("button",{onClick:e=>((e,t)=>{e.stopPropagation(),null==D||D(t)})(e,r),children:[a&&"Sort ",t.jsx("span",{"aria-labelledby":s}),a&&de(r)]})})]},r)},be=e=>{const i=null==S?void 0:S[e];return i?"asc"===i?t.jsx(r.ArrowUpIcon,{"aria-hidden":!0,"data-testid":ne(`header-${e}-arrowup`)}):t.jsx(r.ArrowDownIcon,{"aria-hidden":!0,"data-testid":ne(`header-${e}-arrowdown`)}):t.jsx(t.Fragment,{})},ge=()=>t.jsx("th",{"data-testid":ne("header-selection"),className:x.default(y.headerCell,y.headerCellCheckbox),scope:"col",children:t.jsxs("div",{className:y.selectionCheckboxWrapper,children:[t.jsx(d.VisuallyHidden,{children:"Row selection"}),R&&t.jsx(s.Checkbox,{checked:te(),indeterminate:!!N&&0!==N.length&&!te(),disabled:!w||!w.length,"aria-label":"Select all rows",onClick:()=>{L&&L(te())}})]})}),me=(e,r)=>{const i="string"==typeof e?void 0:e.style,l="string"==typeof e?e:e.fieldKey,n=r.id.toString(),a=r[l],s=`${n}-${l}`;let o;return o="string"==typeof a||"number"==typeof a?t.jsx(h.Typography.BodyBL,{className:y.bodyCellText,children:a}):"function"==typeof a?a(r,{isSelected:re(n)}):a,t.jsx("td",{"data-testid":ne(`row-${s}`),id:ce(n,l),className:y.bodyCell,style:i,children:o},s)},ye=e=>{const r=e.id.toString();return t.jsx("td",{"data-testid":ne(`row-${r}-selection`),className:x.default(y.bodyCell,y.bodyCellCheckbox),children:t.jsx("div",{className:y.selectionCheckboxWrapper,children:t.jsx(s.Checkbox,{checked:re(r),"aria-labelledby":ue(r),onClick:()=>{E&&E(r,!re(r))},disabled:le(r),focusableWhenDisabled:le(r)})})})},je=()=>{let e;return e=(null==A?void 0:A.title)?"string"==typeof A.title?t.jsx(h.Typography.HeadingSM,{className:y.emptyStateTitle,weight:"bold",children:A.title}):A.title:t.jsx(h.Typography.HeadingSM,{className:y.emptyStateTitle,weight:"bold",children:"No <items> found"}),t.jsx(o.ErrorDisplay,Object.assign({type:"no-item-found"},A,{title:e,description:(null==A?void 0:A.description)?A.description:"No matching rows"}))};return t.jsxs("div",{id:j||"table-wrapper","data-testid":V["data-testid"]||"table",className:x.default(y.tableWrapper,J&&y.tableWrapperScrollable,v),ref:z,tabIndex:0,children:[t.jsx("div",{className:y.tableContainer,children:t.jsxs("table",{ref:F,className:y.table,children:[t.jsx("thead",{ref:K,className:W?y.stickyHeader:void 0,children:t.jsxs("tr",{className:y.headerRow,children:[q&&ge(),f.map(pe)]})}),t.jsx("tbody",{children:"success"===k?!w||w.length<1?t.jsx("tr",{className:y.bodyRow,children:t.jsx("td",{className:y.emptyStateCell,colSpan:ae(),children:T?T():je()})}):t.jsx(t.Fragment,{children:null==w?void 0:w.map(((e,r)=>t.jsxs("tr",{"data-testid":ne(`row-${e.id.toString()}`),className:x.default(y.bodyRow,X&&y.bodyRowWithBottomBorder,ie(r)&&y.bodyRowAlternating,q&&y.bodyRowSelectable,re(e.id.toString())&&y.bodyRowSelected),children:[q&&ye(e),f.map((t=>me(t,e)))]},e.id.toString())))}):t.jsx("tr",{className:y.bodyRow,children:t.jsx("td",{colSpan:ae(),children:t.jsx("div",{className:y.loadingStateWrapper,role:"status","aria-live":"polite","aria-label":"Loading table",children:"loading"===k&&t.jsx(a.LoadingDotsSpinner,{})})})})})]})}),$&&(N&&N.length>0||H)&&(()=>{var e;const r=null!==(e=null==N?void 0:N.length)&&void 0!==e?e:0,i="item"+(1===r?"":"s");return t.jsxs(t.Fragment,{children:[t.jsx("div",{ref:_,className:y.actionBarWrapper,"data-strategy":P,children:t.jsxs("div",{"data-testid":"data-table-action-bar",className:x.default(y.actionBar,X&&y.actionBarFloating),children:[t.jsx(h.Typography.BodyMD,{weight:"semibold",children:`${r} ${i} selected`}),r>0?t.jsx(c.BasicButton,{className:y.actionBarButton,type:"button","aria-label":`Clear selection of ${r} ${i}`,onClick:M,children:"Clear selection"}):t.jsx("div",{className:y.actionBarGap}),I]})}),"sticky"!==P&&t.jsx("div",{className:y.actionBarSpacer})]})})()]})};
 //# sourceMappingURL=data-table.js.map