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

package/theme/utils/css-variable.d.ts

@@ -1,5 +1,10 @@
 import type { CSSProperties } from "react";
 import type { CSSVariableString } from "../types";
+/**
+ * Extracts an fds CSS variable name from raw token input.
+ * Supports values like "var(--fds-breakpoint-sm-max)" and "--fds-breakpoint-sm-max".
+ */
+export declare const extractFdsCssVariableName: (value: string | undefined) => `--fds-${string}` | undefined;
 /**
  * Parse a CSS variable string and return its computed value.
  * @param cssVarString CSS variable string (e.g., "var(--fds-breakpoint-xxs-min)")
@@ -13,7 +18,16 @@ export declare function parseCSSVariableValue(cssVarString: CSSVariableString |
  * @returns Parsed numeric value, or 0 if the value is not px/rem or invalid
  */
 export declare function parsePxOrRemValue(cssValue: string): number;
+/**
+ * Normalizes a CSS length value and accepts px/rem or unitless zero.
+ * Returns undefined for invalid inputs.
+ */
+export declare const normalizeCssLengthValue: (value: string | undefined) => string | undefined;
 /**
  * Extracts inline token CSS custom properties from the theme element.
  */
 export declare const getInheritedInlineCssVariables: (themeElement: HTMLElement | null) => CSSProperties;
+/**
+ * Convert a numeric value to a CSS unit string (e.g., 12 → "12px"). Returns null for non-numeric values.
+ */
+export declare const formatUnitValue: (value: unknown, unit: string) => string | null;

package/theme/utils/css-variable.js

@@ -1,2 +1,2 @@
-function e(e,t){var r;if(!e)return"";if(!globalThis.window||!t)return console.warn(`Cannot parse CSS variable value for "${e}" because window or sourceElement is not available.`),"";const n=null===(r=/--fds-[\w-]+/.exec(e))||void 0===r?void 0:r[0];return n?getComputedStyle(t).getPropertyValue(n).trim():(console.warn(`Invalid CSS variable string: ${e}. Expected format: var(--fds-token-name)`),"")}function t(e){const t=e.trim(),r=/^(-?\d*\.?\d+)(px|rem)$/i.exec(t);if(!r)return 0;const n=Number.parseFloat(r[1]);if(Number.isNaN(n))return 0;if("px"===r[2].toLowerCase())return n;const o=globalThis.window?Number.parseFloat(getComputedStyle(document.documentElement).fontSize):16;return n*(Number.isNaN(o)?16:o)}const r=e=>{if(!e||0===e.style.length)return{};const t={};return((e,t)=>{const{style:r}=e;for(let e=0;e<r.length;e++){const n=r.item(e);if(!(null==n?void 0:n.startsWith("--fds")))continue;const o=r.getPropertyValue(n).trim();o&&(t[n]=o)}})(e,t),t};export{r as getInheritedInlineCssVariables,e as parseCSSVariableValue,t as parsePxOrRemValue};
+const e=/^(-?\d*\.?\d+)(px|rem)$/i,t=e=>{var t;if(!e)return;const r=null===(t=/--fds-[\w-]+/.exec(e))||void 0===t?void 0:t[0];return r||void 0};function r(e,r){if(!e)return"";if(!globalThis.window||!r)return console.warn(`Cannot parse CSS variable value for "${e}" because window or sourceElement is not available.`),"";const n=t(e);return n?getComputedStyle(r).getPropertyValue(n).trim():(console.warn(`Invalid CSS variable string: ${e}. Expected format: var(--fds-token-name)`),"")}function n(t){const r=t.trim(),n=e.exec(r);if(!n)return 0;const o=Number.parseFloat(n[1]);if(Number.isNaN(o))return 0;if("px"===n[2].toLowerCase())return o;const i=globalThis.window?Number.parseFloat(getComputedStyle(document.documentElement).fontSize):16;return o*(Number.isNaN(i)?16:i)}const o=t=>{if(!t)return;const r=t.trim();return"0"===r||e.test(r)?r:void 0},i=e=>{if(!e||0===e.style.length)return{};const t={};return((e,t)=>{const{style:r}=e;for(let e=0;e<r.length;e++){const n=r.item(e);if(!(null==n?void 0:n.startsWith("--fds")))continue;const o=r.getPropertyValue(n).trim();o&&(t[n]=o)}})(e,t),t},s=(e,t)=>"number"==typeof e?`${e}${t}`:null;export{t as extractFdsCssVariableName,s as formatUnitValue,i as getInheritedInlineCssVariables,o as normalizeCssLengthValue,r as parseCSSVariableValue,n as parsePxOrRemValue};
 //# sourceMappingURL=css-variable.js.map

package/theme/utils/css-variable.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-variable.js","sources":["../../../src/theme/utils/css-variable.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nimport type { CSSVariableString } from \"../types\";\n\ntype InlineCssVariables = Record<`--${string}`, string>;\n\nconst DEFAULT_FONT_SIZE_PX = 16;\n\n/**\n * Parse a CSS variable string and return its computed value.\n * @param cssVarString CSS variable string (e.g., \"var(--fds-breakpoint-xxs-min)\")\n * @param sourceElement Element to compute the CSS variable value from\n * @returns The CSS variable value, or an empty string if not found or invalid\n */\nexport function parseCSSVariableValue(\n    cssVarString: CSSVariableString | undefined,\n    sourceElement: HTMLElement | null\n): string {\n    if (!cssVarString) return \"\";\n\n    if (!globalThis.window || !sourceElement) {\n        console.warn(\n            `Cannot parse CSS variable value for \"${cssVarString}\" because window or sourceElement is not available.`\n        );\n        return \"\";\n    }\n\n    const variableName = /--fds-[\\w-]+/.exec(cssVarString as string)?.[0];\n    if (!variableName) {\n        console.warn(\n            `Invalid CSS variable string: ${cssVarString}. Expected format: var(--fds-token-name)`\n        );\n        return \"\";\n    }\n\n    return getComputedStyle(sourceElement)\n        .getPropertyValue(variableName)\n        .trim();\n}\n\n/**\n * Parse a pixel or rem value and return its numeric value.\n * @param cssValue CSS unit value (e.g., \"12px\", \"1.5rem\")\n * @returns Parsed numeric value, or 0 if the value is not px/rem or invalid\n */\nexport function parsePxOrRemValue(cssValue: string): number {\n    const value = cssValue.trim();\n    const match = /^(-?\\d*\\.?\\d+)(px|rem)$/i.exec(value);\n    if (!match) return 0;\n\n    const parsedValue = Number.parseFloat(match[1]);\n    if (Number.isNaN(parsedValue)) return 0;\n\n    const unit = match[2].toLowerCase();\n    if (unit === \"px\") return parsedValue;\n\n    const rootFontSize = globalThis.window\n        ? Number.parseFloat(getComputedStyle(document.documentElement).fontSize)\n        : DEFAULT_FONT_SIZE_PX;\n\n    const resolvedRootFontSize = Number.isNaN(rootFontSize)\n        ? DEFAULT_FONT_SIZE_PX\n        : rootFontSize;\n\n    return parsedValue * resolvedRootFontSize;\n}\n\nconst mergeInlineCssVariables = (\n    element: HTMLElement,\n    target: InlineCssVariables\n) => {\n    const { style } = element;\n\n    for (let i = 0; i < style.length; i++) {\n        const propertyName = style.item(i);\n        if (!propertyName?.startsWith(\"--fds\")) continue;\n\n        const value = style.getPropertyValue(propertyName).trim();\n        if (!value) continue;\n\n        target[propertyName as `--${string}`] = value;\n    }\n};\n\n/**\n * Extracts inline token CSS custom properties from the theme element.\n */\nexport const getInheritedInlineCssVariables = (\n    themeElement: HTMLElement | null\n): CSSProperties => {\n    if (!themeElement || themeElement.style.length === 0) return {};\n\n    const variables: InlineCssVariables = {};\n    mergeInlineCssVariables(themeElement, variables);\n\n    return variables;\n};\n"],"names":["parseCSSVariableValue","cssVarString","sourceElement","globalThis","window","console","warn","variableName","_a","exec","getComputedStyle","getPropertyValue","trim","parsePxOrRemValue","cssValue","value","match","parsedValue","Number","parseFloat","isNaN","toLowerCase","rootFontSize","document","documentElement","fontSize","getInheritedInlineCssVariables","themeElement","style","length","variables","element","target","i","propertyName","item","startsWith","mergeInlineCssVariables"],"mappings":"AAcM,SAAUA,EACZC,EACAC,SAEA,IAAKD,EAAc,MAAO,GAE1B,IAAKE,WAAWC,SAAWF,EAIvB,OAHAG,QAAQC,KACJ,wCAAwCL,wDAErC,GAGX,MAAMM,EAA0D,QAA3CC,EAAA,eAAeC,KAAKR,UAAuB,IAAAO,OAAA,EAAAA,EAAG,GACnE,OAAKD,EAOEG,iBAAiBR,GACnBS,iBAAiBJ,GACjBK,QARDP,QAAQC,KACJ,gCAAgCL,6CAE7B,GAMf,CAOM,SAAUY,EAAkBC,GAC9B,MAAMC,EAAQD,EAASF,OACjBI,EAAQ,2BAA2BP,KAAKM,GAC9C,IAAKC,EAAO,OAAO,EAEnB,MAAMC,EAAcC,OAAOC,WAAWH,EAAM,IAC5C,GAAIE,OAAOE,MAAMH,GAAc,OAAO,EAGtC,GAAa,OADAD,EAAM,GAAGK,cACH,OAAOJ,EAE1B,MAAMK,EAAenB,WAAWC,OAC1Bc,OAAOC,WAAWT,iBAAiBa,SAASC,iBAAiBC,UAnD1C,GA0DzB,OAAOR,GAJsBC,OAAOE,MAAME,GAtDjB,GAwDnBA,EAGV,CAEA,MAoBaI,EACTC,IAEA,IAAKA,GAA8C,IAA9BA,EAAaC,MAAMC,OAAc,MAAO,CAAA,EAE7D,MAAMC,EAAgC,CAAA,EAGtC,MA5B4B,EAC5BC,EACAC,KAEA,MAAMJ,MAAEA,GAAUG,EAElB,IAAK,IAAIE,EAAI,EAAGA,EAAIL,EAAMC,OAAQI,IAAK,CACnC,MAAMC,EAAeN,EAAMO,KAAKF,GAChC,KAAKC,aAAY,EAAZA,EAAcE,WAAW,UAAU,SAExC,MAAMrB,EAAQa,EAAMjB,iBAAiBuB,GAActB,OAC9CG,IAELiB,EAAOE,GAAiCnB,EAC5C,GAYAsB,CAAwBV,EAAcG,GAE/BA,CAAS"}
+{"version":3,"file":"css-variable.js","sources":["../../../src/theme/utils/css-variable.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nimport type { CSSVariableString } from \"../types\";\n\ntype InlineCssVariables = Record<`--${string}`, string>;\n\nconst DEFAULT_FONT_SIZE_PX = 16;\nconst CSS_PX_OR_REM_CAPTURE_PATTERN = /^(-?\\d*\\.?\\d+)(px|rem)$/i;\n\n/**\n * Extracts an fds CSS variable name from raw token input.\n * Supports values like \"var(--fds-breakpoint-sm-max)\" and \"--fds-breakpoint-sm-max\".\n */\nexport const extractFdsCssVariableName = (\n    value: string | undefined\n): `--fds-${string}` | undefined => {\n    if (!value) return undefined;\n\n    const variableName = /--fds-[\\w-]+/.exec(value)?.[0];\n\n    if (!variableName) {\n        return undefined;\n    }\n\n    return variableName as `--fds-${string}`;\n};\n\n/**\n * Parse a CSS variable string and return its computed value.\n * @param cssVarString CSS variable string (e.g., \"var(--fds-breakpoint-xxs-min)\")\n * @param sourceElement Element to compute the CSS variable value from\n * @returns The CSS variable value, or an empty string if not found or invalid\n */\nexport function parseCSSVariableValue(\n    cssVarString: CSSVariableString | undefined,\n    sourceElement: HTMLElement | null\n): string {\n    if (!cssVarString) return \"\";\n\n    if (!globalThis.window || !sourceElement) {\n        console.warn(\n            `Cannot parse CSS variable value for \"${cssVarString}\" because window or sourceElement is not available.`\n        );\n        return \"\";\n    }\n\n    const variableName = extractFdsCssVariableName(cssVarString);\n    if (!variableName) {\n        console.warn(\n            `Invalid CSS variable string: ${cssVarString}. Expected format: var(--fds-token-name)`\n        );\n        return \"\";\n    }\n\n    return getComputedStyle(sourceElement)\n        .getPropertyValue(variableName)\n        .trim();\n}\n\n/**\n * Parse a pixel or rem value and return its numeric value.\n * @param cssValue CSS unit value (e.g., \"12px\", \"1.5rem\")\n * @returns Parsed numeric value, or 0 if the value is not px/rem or invalid\n */\nexport function parsePxOrRemValue(cssValue: string): number {\n    const value = cssValue.trim();\n    const match = CSS_PX_OR_REM_CAPTURE_PATTERN.exec(value);\n    if (!match) return 0;\n\n    const parsedValue = Number.parseFloat(match[1]);\n    if (Number.isNaN(parsedValue)) return 0;\n\n    const unit = match[2].toLowerCase();\n    if (unit === \"px\") return parsedValue;\n\n    const rootFontSize = globalThis.window\n        ? Number.parseFloat(getComputedStyle(document.documentElement).fontSize)\n        : DEFAULT_FONT_SIZE_PX;\n\n    const resolvedRootFontSize = Number.isNaN(rootFontSize)\n        ? DEFAULT_FONT_SIZE_PX\n        : rootFontSize;\n\n    return parsedValue * resolvedRootFontSize;\n}\n\n/**\n * Normalizes a CSS length value and accepts px/rem or unitless zero.\n * Returns undefined for invalid inputs.\n */\nexport const normalizeCssLengthValue = (\n    value: string | undefined\n): string | undefined => {\n    if (!value) return undefined;\n\n    const trimmedValue = value.trim();\n\n    // CSS allows unitless zero in width-like properties.\n    if (trimmedValue === \"0\") {\n        return trimmedValue;\n    }\n\n    if (!CSS_PX_OR_REM_CAPTURE_PATTERN.test(trimmedValue)) {\n        return undefined;\n    }\n\n    return trimmedValue;\n};\n\nconst mergeInlineCssVariables = (\n    element: HTMLElement,\n    target: InlineCssVariables\n) => {\n    const { style } = element;\n\n    for (let i = 0; i < style.length; i++) {\n        const propertyName = style.item(i);\n        if (!propertyName?.startsWith(\"--fds\")) continue;\n\n        const value = style.getPropertyValue(propertyName).trim();\n        if (!value) continue;\n\n        target[propertyName as `--${string}`] = value;\n    }\n};\n\n/**\n * Extracts inline token CSS custom properties from the theme element.\n */\nexport const getInheritedInlineCssVariables = (\n    themeElement: HTMLElement | null\n): CSSProperties => {\n    if (!themeElement || themeElement.style.length === 0) return {};\n\n    const variables: InlineCssVariables = {};\n    mergeInlineCssVariables(themeElement, variables);\n\n    return variables;\n};\n\n/**\n * Convert a numeric value to a CSS unit string (e.g., 12 → \"12px\"). Returns null for non-numeric values.\n */\nexport const formatUnitValue = (\n    value: unknown,\n    unit: string\n): string | null => {\n    if (typeof value === \"number\") {\n        return `${value}${unit}`;\n    }\n    return null;\n};\n"],"names":["CSS_PX_OR_REM_CAPTURE_PATTERN","extractFdsCssVariableName","value","variableName","_a","exec","parseCSSVariableValue","cssVarString","sourceElement","globalThis","window","console","warn","getComputedStyle","getPropertyValue","trim","parsePxOrRemValue","cssValue","match","parsedValue","Number","parseFloat","isNaN","toLowerCase","rootFontSize","document","documentElement","fontSize","normalizeCssLengthValue","trimmedValue","test","getInheritedInlineCssVariables","themeElement","style","length","variables","element","target","i","propertyName","item","startsWith","mergeInlineCssVariables","formatUnitValue","unit"],"mappings":"AAMA,MACMA,EAAgC,2BAMzBC,EACTC,UAEA,IAAKA,EAAO,OAEZ,MAAMC,EAAyC,QAA1BC,EAAA,eAAeC,KAAKH,UAAM,IAAAE,OAAA,EAAAA,EAAG,GAElD,OAAKD,QAAL,CAIwC,EAStC,SAAUG,EACZC,EACAC,GAEA,IAAKD,EAAc,MAAO,GAE1B,IAAKE,WAAWC,SAAWF,EAIvB,OAHAG,QAAQC,KACJ,wCAAwCL,wDAErC,GAGX,MAAMJ,EAAeF,EAA0BM,GAC/C,OAAKJ,EAOEU,iBAAiBL,GACnBM,iBAAiBX,GACjBY,QARDJ,QAAQC,KACJ,gCAAgCL,6CAE7B,GAMf,CAOM,SAAUS,EAAkBC,GAC9B,MAAMf,EAAQe,EAASF,OACjBG,EAAQlB,EAA8BK,KAAKH,GACjD,IAAKgB,EAAO,OAAO,EAEnB,MAAMC,EAAcC,OAAOC,WAAWH,EAAM,IAC5C,GAAIE,OAAOE,MAAMH,GAAc,OAAO,EAGtC,GAAa,OADAD,EAAM,GAAGK,cACH,OAAOJ,EAE1B,MAAMK,EAAef,WAAWC,OAC1BU,OAAOC,WAAWR,iBAAiBY,SAASC,iBAAiBC,UAtE1C,GA6EzB,OAAOR,GAJsBC,OAAOE,MAAME,GAzEjB,GA2EnBA,EAGV,CAMO,MAAMI,EACT1B,IAEA,IAAKA,EAAO,OAEZ,MAAM2B,EAAe3B,EAAMa,OAG3B,MAAqB,MAAjBc,GAIC7B,EAA8B8B,KAAKD,GAH7BA,OAGX,CAImB,EAuBVE,EACTC,IAEA,IAAKA,GAA8C,IAA9BA,EAAaC,MAAMC,OAAc,MAAO,CAAA,EAE7D,MAAMC,EAAgC,CAAA,EAGtC,MA5B4B,EAC5BC,EACAC,KAEA,MAAMJ,MAAEA,GAAUG,EAElB,IAAK,IAAIE,EAAI,EAAGA,EAAIL,EAAMC,OAAQI,IAAK,CACnC,MAAMC,EAAeN,EAAMO,KAAKF,GAChC,KAAKC,aAAY,EAAZA,EAAcE,WAAW,UAAU,SAExC,MAAMvC,EAAQ+B,EAAMnB,iBAAiByB,GAAcxB,OAC9Cb,IAELmC,EAAOE,GAAiCrC,EAC5C,GAYAwC,CAAwBV,EAAcG,GAE/BA,CAAS,EAMPQ,EAAkB,CAC3BzC,EACA0C,IAEqB,iBAAV1C,EACA,GAAGA,IAAQ0C,IAEf"}

package/theme/utils/font.d.ts

@@ -1,6 +1,25 @@
 import type { FontSize, FontWeight } from "../types";
+export interface FontDeclarationProperties {
+    "font-family": string;
+    "font-variant": string;
+    "font-size": string;
+    "font-weight": string;
+    "line-height": string;
+    "letter-spacing": string;
+}
 /**
- * Generates a CSS font shorthand string using FDS CSS variables.
+ * Generates a CSS font declaration map using FDS CSS variables.
+ *
+ * @example
+ * generateFontProperties("heading-xxl", "light")
+ * // => { "font-family": "var(--fds-font-family)", ... }
+ */
+export declare const generateFontProperties: (size: FontSize, weight: FontWeight, options?: {
+    noCommonLigatures?: boolean;
+    fontVariant?: string;
+}) => FontDeclarationProperties;
+/**
+ * Generates a CSS declaration string using FDS CSS variables.
  *
  * @example
  * generateFont("heading-xxl", "light")

package/theme/utils/font.js

@@ -1,2 +1,2 @@
-const s={"heading-xxl":{size:"var(--fds-font-heading-size-xxl)",lh:"var(--fds-font-heading-lh-xxl)",ls:"var(--fds-font-heading-ls-xxl)"},"heading-xl":{size:"var(--fds-font-heading-size-xl)",lh:"var(--fds-font-heading-lh-xl)",ls:"var(--fds-font-heading-ls-xl)"},"heading-lg":{size:"var(--fds-font-heading-size-lg)",lh:"var(--fds-font-heading-lh-lg)",ls:"var(--fds-font-heading-ls-lg)"},"heading-md":{size:"var(--fds-font-heading-size-md)",lh:"var(--fds-font-heading-lh-md)",ls:"var(--fds-font-heading-ls-md)"},"heading-sm":{size:"var(--fds-font-heading-size-sm)",lh:"var(--fds-font-heading-lh-sm)",ls:"var(--fds-font-heading-ls-sm)"},"heading-xs":{size:"var(--fds-font-heading-size-xs)",lh:"var(--fds-font-heading-lh-xs)",ls:"var(--fds-font-heading-ls-xs)"},"body-baseline":{size:"var(--fds-font-body-size-baseline)",lh:"var(--fds-font-body-lh-baseline)",ls:"var(--fds-font-body-ls-baseline)"},"body-md":{size:"var(--fds-font-body-size-md)",lh:"var(--fds-font-body-lh-md)",ls:"var(--fds-font-body-ls-md)"},"body-sm":{size:"var(--fds-font-body-size-sm)",lh:"var(--fds-font-body-lh-sm)",ls:"var(--fds-font-body-ls-sm)"},"body-xs":{size:"var(--fds-font-body-size-xs)",lh:"var(--fds-font-body-lh-xs)",ls:"var(--fds-font-body-ls-xs)"},"form-label":{size:"var(--fds-font-form-label-size)",lh:"var(--fds-font-form-label-lh)",ls:"var(--fds-font-form-label-ls)"},"form-description":{size:"var(--fds-font-form-description-size)",lh:"var(--fds-font-form-description-lh)",ls:"var(--fds-font-form-description-ls)"}},d={light:"var(--fds-font-weight-light)",regular:"var(--fds-font-weight-regular)",semibold:"var(--fds-font-weight-semibold)",bold:"var(--fds-font-weight-bold)"},f=(f,n,l)=>{const{size:o,lh:a,ls:e}=s[f],i=d[n],t=[null==l?void 0:l.fontVariant,(null==l?void 0:l.noCommonLigatures)?"no-common-ligatures":""].filter((s=>Boolean(s))).join(" ");return`font-family: var(--fds-font-family); font-variant: ${"var(--fds-font-variant)"+(t?` ${t}`:"")}; font-size: ${o}; font-weight: ${i}; line-height: ${a}; letter-spacing: ${e};`};export{f as generateFont};
+const s={"heading-xxl":{size:"var(--fds-font-heading-size-xxl)",lh:"var(--fds-font-heading-lh-xxl)",ls:"var(--fds-font-heading-ls-xxl)"},"heading-xl":{size:"var(--fds-font-heading-size-xl)",lh:"var(--fds-font-heading-lh-xl)",ls:"var(--fds-font-heading-ls-xl)"},"heading-lg":{size:"var(--fds-font-heading-size-lg)",lh:"var(--fds-font-heading-lh-lg)",ls:"var(--fds-font-heading-ls-lg)"},"heading-md":{size:"var(--fds-font-heading-size-md)",lh:"var(--fds-font-heading-lh-md)",ls:"var(--fds-font-heading-ls-md)"},"heading-sm":{size:"var(--fds-font-heading-size-sm)",lh:"var(--fds-font-heading-lh-sm)",ls:"var(--fds-font-heading-ls-sm)"},"heading-xs":{size:"var(--fds-font-heading-size-xs)",lh:"var(--fds-font-heading-lh-xs)",ls:"var(--fds-font-heading-ls-xs)"},"body-baseline":{size:"var(--fds-font-body-size-baseline)",lh:"var(--fds-font-body-lh-baseline)",ls:"var(--fds-font-body-ls-baseline)"},"body-md":{size:"var(--fds-font-body-size-md)",lh:"var(--fds-font-body-lh-md)",ls:"var(--fds-font-body-ls-md)"},"body-sm":{size:"var(--fds-font-body-size-sm)",lh:"var(--fds-font-body-lh-sm)",ls:"var(--fds-font-body-ls-sm)"},"body-xs":{size:"var(--fds-font-body-size-xs)",lh:"var(--fds-font-body-lh-xs)",ls:"var(--fds-font-body-ls-xs)"},"form-label":{size:"var(--fds-font-form-label-size)",lh:"var(--fds-font-form-label-lh)",ls:"var(--fds-font-form-label-ls)"},"form-description":{size:"var(--fds-font-form-description-size)",lh:"var(--fds-font-form-description-lh)",ls:"var(--fds-font-form-description-ls)"}},d={light:"var(--fds-font-weight-light)",regular:"var(--fds-font-weight-regular)",semibold:"var(--fds-font-weight-semibold)",bold:"var(--fds-font-weight-bold)"},f=(f,n,o)=>{const{size:l,lh:a,ls:e}=s[f],i=d[n],t=[null==o?void 0:o.fontVariant,(null==o?void 0:o.noCommonLigatures)?"no-common-ligatures":""].filter(Boolean).join(" ");return{"font-family":"var(--fds-font-family)","font-variant":"var(--fds-font-variant)"+(t?` ${t}`:""),"font-size":l,"font-weight":i,"line-height":a,"letter-spacing":e}},n=(s,d,n)=>{const o=f(s,d,n);return Object.entries(o).map((([s,d])=>`${s}: ${d};`)).join(" ")};export{n as generateFont,f as generateFontProperties};
 //# sourceMappingURL=font.js.map

package/theme/utils/font.js.map

@@ -1 +1 @@
-{"version":3,"file":"font.js","sources":["../../../src/theme/utils/font.ts"],"sourcesContent":["import type { FontSize, FontWeight } from \"../types\";\n\nconst sizeVarMap: Record<FontSize, { size: string; lh: string; ls: string }> = {\n    \"heading-xxl\": {\n        size: \"var(--fds-font-heading-size-xxl)\",\n        lh: \"var(--fds-font-heading-lh-xxl)\",\n        ls: \"var(--fds-font-heading-ls-xxl)\",\n    },\n    \"heading-xl\": {\n        size: \"var(--fds-font-heading-size-xl)\",\n        lh: \"var(--fds-font-heading-lh-xl)\",\n        ls: \"var(--fds-font-heading-ls-xl)\",\n    },\n    \"heading-lg\": {\n        size: \"var(--fds-font-heading-size-lg)\",\n        lh: \"var(--fds-font-heading-lh-lg)\",\n        ls: \"var(--fds-font-heading-ls-lg)\",\n    },\n    \"heading-md\": {\n        size: \"var(--fds-font-heading-size-md)\",\n        lh: \"var(--fds-font-heading-lh-md)\",\n        ls: \"var(--fds-font-heading-ls-md)\",\n    },\n    \"heading-sm\": {\n        size: \"var(--fds-font-heading-size-sm)\",\n        lh: \"var(--fds-font-heading-lh-sm)\",\n        ls: \"var(--fds-font-heading-ls-sm)\",\n    },\n    \"heading-xs\": {\n        size: \"var(--fds-font-heading-size-xs)\",\n        lh: \"var(--fds-font-heading-lh-xs)\",\n        ls: \"var(--fds-font-heading-ls-xs)\",\n    },\n    \"body-baseline\": {\n        size: \"var(--fds-font-body-size-baseline)\",\n        lh: \"var(--fds-font-body-lh-baseline)\",\n        ls: \"var(--fds-font-body-ls-baseline)\",\n    },\n    \"body-md\": {\n        size: \"var(--fds-font-body-size-md)\",\n        lh: \"var(--fds-font-body-lh-md)\",\n        ls: \"var(--fds-font-body-ls-md)\",\n    },\n    \"body-sm\": {\n        size: \"var(--fds-font-body-size-sm)\",\n        lh: \"var(--fds-font-body-lh-sm)\",\n        ls: \"var(--fds-font-body-ls-sm)\",\n    },\n    \"body-xs\": {\n        size: \"var(--fds-font-body-size-xs)\",\n        lh: \"var(--fds-font-body-lh-xs)\",\n        ls: \"var(--fds-font-body-ls-xs)\",\n    },\n    \"form-label\": {\n        size: \"var(--fds-font-form-label-size)\",\n        lh: \"var(--fds-font-form-label-lh)\",\n        ls: \"var(--fds-font-form-label-ls)\",\n    },\n    \"form-description\": {\n        size: \"var(--fds-font-form-description-size)\",\n        lh: \"var(--fds-font-form-description-lh)\",\n        ls: \"var(--fds-font-form-description-ls)\",\n    },\n};\n\nconst weightVarMap: Record<FontWeight, string> = {\n    light: \"var(--fds-font-weight-light)\",\n    regular: \"var(--fds-font-weight-regular)\",\n    semibold: \"var(--fds-font-weight-semibold)\",\n    bold: \"var(--fds-font-weight-bold)\",\n};\n\n/**\n * Generates a CSS font shorthand string using FDS CSS variables.\n *\n * @example\n * generateFont(\"heading-xxl\", \"light\")\n * // => \"font-family: var(--fds-font-family); font-variant: var(--fds-font-variant); ...\"\n */\nexport const generateFont = (\n    size: FontSize,\n    weight: FontWeight,\n    options?: { noCommonLigatures?: boolean; fontVariant?: string }\n): string => {\n    const { size: s, lh, ls } = sizeVarMap[size];\n    const w = weightVarMap[weight];\n\n    const extraVariant = [\n        options?.fontVariant,\n        options?.noCommonLigatures ? \"no-common-ligatures\" : \"\",\n    ]\n        .filter((v) => Boolean(v))\n        .join(\" \");\n\n    const fontVariant = `var(--fds-font-variant)${\n        extraVariant ? ` ${extraVariant}` : \"\"\n    }`;\n\n    return `font-family: var(--fds-font-family); font-variant: ${fontVariant}; font-size: ${s}; font-weight: ${w}; line-height: ${lh}; letter-spacing: ${ls};`;\n};\n"],"names":["sizeVarMap","size","lh","ls","weightVarMap","light","regular","semibold","bold","generateFont","weight","options","s","w","extraVariant","fontVariant","noCommonLigatures","filter","v","Boolean","join"],"mappings":"AAEA,MAAMA,EAAyE,CAC3E,cAAe,CACXC,KAAM,mCACNC,GAAI,iCACJC,GAAI,kCAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,gBAAiB,CACbF,KAAM,qCACNC,GAAI,mCACJC,GAAI,oCAER,UAAW,CACPF,KAAM,+BACNC,GAAI,6BACJC,GAAI,8BAER,UAAW,CACPF,KAAM,+BACNC,GAAI,6BACJC,GAAI,8BAER,UAAW,CACPF,KAAM,+BACNC,GAAI,6BACJC,GAAI,8BAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,mBAAoB,CAChBF,KAAM,wCACNC,GAAI,sCACJC,GAAI,wCAINC,EAA2C,CAC7CC,MAAO,+BACPC,QAAS,iCACTC,SAAU,kCACVC,KAAM,+BAUGC,EAAe,CACxBR,EACAS,EACAC,KAEA,MAAQV,KAAMW,EAACV,GAAEA,EAAEC,GAAEA,GAAOH,EAAWC,GACjCY,EAAIT,EAAaM,GAEjBI,EAAe,CACjBH,aAAO,EAAPA,EAASI,aACTJ,aAAO,EAAPA,EAASK,mBAAoB,sBAAwB,IAEpDC,QAAQC,GAAMC,QAAQD,KACtBE,KAAK,KAMV,MAAO,sDAJa,2BAChBN,EAAe,IAAIA,IAAiB,mBAGgDF,mBAAmBC,mBAAmBX,sBAAuBC,IAAK"}
+{"version":3,"file":"font.js","sources":["../../../src/theme/utils/font.ts"],"sourcesContent":["import type { FontSize, FontWeight } from \"../types\";\n\nexport interface FontDeclarationProperties {\n    \"font-family\": string;\n    \"font-variant\": string;\n    \"font-size\": string;\n    \"font-weight\": string;\n    \"line-height\": string;\n    \"letter-spacing\": string;\n}\n\nconst sizeVarMap: Record<FontSize, { size: string; lh: string; ls: string }> = {\n    \"heading-xxl\": {\n        size: \"var(--fds-font-heading-size-xxl)\",\n        lh: \"var(--fds-font-heading-lh-xxl)\",\n        ls: \"var(--fds-font-heading-ls-xxl)\",\n    },\n    \"heading-xl\": {\n        size: \"var(--fds-font-heading-size-xl)\",\n        lh: \"var(--fds-font-heading-lh-xl)\",\n        ls: \"var(--fds-font-heading-ls-xl)\",\n    },\n    \"heading-lg\": {\n        size: \"var(--fds-font-heading-size-lg)\",\n        lh: \"var(--fds-font-heading-lh-lg)\",\n        ls: \"var(--fds-font-heading-ls-lg)\",\n    },\n    \"heading-md\": {\n        size: \"var(--fds-font-heading-size-md)\",\n        lh: \"var(--fds-font-heading-lh-md)\",\n        ls: \"var(--fds-font-heading-ls-md)\",\n    },\n    \"heading-sm\": {\n        size: \"var(--fds-font-heading-size-sm)\",\n        lh: \"var(--fds-font-heading-lh-sm)\",\n        ls: \"var(--fds-font-heading-ls-sm)\",\n    },\n    \"heading-xs\": {\n        size: \"var(--fds-font-heading-size-xs)\",\n        lh: \"var(--fds-font-heading-lh-xs)\",\n        ls: \"var(--fds-font-heading-ls-xs)\",\n    },\n    \"body-baseline\": {\n        size: \"var(--fds-font-body-size-baseline)\",\n        lh: \"var(--fds-font-body-lh-baseline)\",\n        ls: \"var(--fds-font-body-ls-baseline)\",\n    },\n    \"body-md\": {\n        size: \"var(--fds-font-body-size-md)\",\n        lh: \"var(--fds-font-body-lh-md)\",\n        ls: \"var(--fds-font-body-ls-md)\",\n    },\n    \"body-sm\": {\n        size: \"var(--fds-font-body-size-sm)\",\n        lh: \"var(--fds-font-body-lh-sm)\",\n        ls: \"var(--fds-font-body-ls-sm)\",\n    },\n    \"body-xs\": {\n        size: \"var(--fds-font-body-size-xs)\",\n        lh: \"var(--fds-font-body-lh-xs)\",\n        ls: \"var(--fds-font-body-ls-xs)\",\n    },\n    \"form-label\": {\n        size: \"var(--fds-font-form-label-size)\",\n        lh: \"var(--fds-font-form-label-lh)\",\n        ls: \"var(--fds-font-form-label-ls)\",\n    },\n    \"form-description\": {\n        size: \"var(--fds-font-form-description-size)\",\n        lh: \"var(--fds-font-form-description-lh)\",\n        ls: \"var(--fds-font-form-description-ls)\",\n    },\n};\n\nconst weightVarMap: Record<FontWeight, string> = {\n    light: \"var(--fds-font-weight-light)\",\n    regular: \"var(--fds-font-weight-regular)\",\n    semibold: \"var(--fds-font-weight-semibold)\",\n    bold: \"var(--fds-font-weight-bold)\",\n};\n\n/**\n * Generates a CSS font declaration map using FDS CSS variables.\n *\n * @example\n * generateFontProperties(\"heading-xxl\", \"light\")\n * // => { \"font-family\": \"var(--fds-font-family)\", ... }\n */\nexport const generateFontProperties = (\n    size: FontSize,\n    weight: FontWeight,\n    options?: { noCommonLigatures?: boolean; fontVariant?: string }\n): FontDeclarationProperties => {\n    const { size: s, lh, ls } = sizeVarMap[size];\n    const w = weightVarMap[weight];\n\n    const extraVariant = [\n        options?.fontVariant,\n        options?.noCommonLigatures ? \"no-common-ligatures\" : \"\",\n    ]\n        .filter(Boolean)\n        .join(\" \");\n\n    const fontVariant = `var(--fds-font-variant)${\n        extraVariant ? ` ${extraVariant}` : \"\"\n    }`;\n\n    return {\n        \"font-family\": \"var(--fds-font-family)\",\n        \"font-variant\": fontVariant,\n        \"font-size\": s,\n        \"font-weight\": w,\n        \"line-height\": lh,\n        \"letter-spacing\": ls,\n    };\n};\n\n/**\n * Generates a CSS declaration string using FDS CSS variables.\n *\n * @example\n * generateFont(\"heading-xxl\", \"light\")\n * // => \"font-family: var(--fds-font-family); font-variant: var(--fds-font-variant); ...\"\n */\nexport const generateFont = (\n    size: FontSize,\n    weight: FontWeight,\n    options?: { noCommonLigatures?: boolean; fontVariant?: string }\n): string => {\n    const declarations = generateFontProperties(size, weight, options);\n\n    return Object.entries(declarations)\n        .map(([key, value]) => `${key}: ${value};`)\n        .join(\" \");\n};\n"],"names":["sizeVarMap","size","lh","ls","weightVarMap","light","regular","semibold","bold","generateFontProperties","weight","options","s","w","extraVariant","fontVariant","noCommonLigatures","filter","Boolean","join","generateFont","declarations","Object","entries","map","key","value"],"mappings":"AAWA,MAAMA,EAAyE,CAC3E,cAAe,CACXC,KAAM,mCACNC,GAAI,iCACJC,GAAI,kCAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,gBAAiB,CACbF,KAAM,qCACNC,GAAI,mCACJC,GAAI,oCAER,UAAW,CACPF,KAAM,+BACNC,GAAI,6BACJC,GAAI,8BAER,UAAW,CACPF,KAAM,+BACNC,GAAI,6BACJC,GAAI,8BAER,UAAW,CACPF,KAAM,+BACNC,GAAI,6BACJC,GAAI,8BAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,mBAAoB,CAChBF,KAAM,wCACNC,GAAI,sCACJC,GAAI,wCAINC,EAA2C,CAC7CC,MAAO,+BACPC,QAAS,iCACTC,SAAU,kCACVC,KAAM,+BAUGC,EAAyB,CAClCR,EACAS,EACAC,KAEA,MAAQV,KAAMW,EAACV,GAAEA,EAAEC,GAAEA,GAAOH,EAAWC,GACjCY,EAAIT,EAAaM,GAEjBI,EAAe,CACjBH,aAAO,EAAPA,EAASI,aACTJ,aAAO,EAAPA,EAASK,mBAAoB,sBAAwB,IAEpDC,OAAOC,SACPC,KAAK,KAMV,MAAO,CACH,cAAe,yBACf,eANgB,2BAChBL,EAAe,IAAIA,IAAiB,IAMpC,YAAaF,EACb,cAAeC,EACf,cAAeX,EACf,iBAAkBC,EACrB,EAUQiB,EAAe,CACxBnB,EACAS,EACAC,KAEA,MAAMU,EAAeZ,EAAuBR,EAAMS,EAAQC,GAE1D,OAAOW,OAAOC,QAAQF,GACjBG,KAAI,EAAEC,EAAKC,KAAW,GAAGD,MAAQC,OACjCP,KAAK,IAAI"}

package/theme/utils/index.d.ts

@@ -3,3 +3,4 @@ export * from "./font";
 export * from "./token-resolver";
 export * from "./use-apply-styles";
 export * from "./use-design-token";
+export * from "./use-media-query";

package/theme/utils/use-apply-styles.d.ts

@@ -1,12 +1,21 @@
-import type { RefObject } from "react";
+import type { CSSProperties, RefObject } from "react";
 import type { CSSVariableKey } from "../types";
 type StyleValue = string | number | null | undefined;
-export type ApplyStyleMap = {
-    [K in keyof React.CSSProperties]?: StyleValue;
+export type ApplyStyleMap = ({
+    [K in keyof CSSStyleDeclaration]?: StyleValue;
 } & {
     [K in CSSVariableKey]?: StyleValue;
 } & {
     [K in `--${string}`]?: StyleValue;
-};
-export declare function useApplyStyle<TElement extends HTMLElement>(ref: RefObject<TElement | null>, styles: ApplyStyleMap): void;
+}) | CSSProperties;
+/**
+ * Hook to apply styles to a HTML DOM element. Use when you need to apply inline
+ * styles but cannot use the inline React `style` prop due to strict CSP rules
+ *
+ * @param ref The HTML element to receive the styles
+ * @param styles The styles to apply, in the same format as the React `style`
+ * prop, or CSS variables. Values will be normalised to strings and numeric
+ * values will have "px" appended for properties that typically require units.
+ */
+export declare function useApplyStyle<TElement extends HTMLElement>(ref: RefObject<TElement | null>, styles: ApplyStyleMap | undefined): void;
 export {};

package/theme/utils/use-apply-styles.js

@@ -1,2 +1,2 @@
-import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"react";import"../../util/string-helper.js";import{useIsomorphicLayoutEffect as t}from"../../util/use-isomorphic-layout-effect.js";function r(r,e){t((()=>{const t=null==r?void 0:r.current;t&&Object.entries(e).forEach((([r,e])=>{null!=e?t.style.setProperty(r,String(e)):t.style.setProperty(r,"")}))}),[r,e])}export{r as useApplyStyle};
+import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"react";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useIsomorphicLayoutEffect as t}from"../../util/use-isomorphic-layout-effect.js";const r=["width","height","top","left","right","bottom","margin","marginTop","marginLeft","marginRight","marginBottom","padding","paddingTop","paddingLeft","paddingRight","paddingBottom"];function e(e,i){t((()=>{const t=null==e?void 0:e.current;t&&i&&Object.entries(i).forEach((([e,i])=>{const o=function(t){if(t.startsWith("--"))return t;const r=t.replace(/([A-Z])/g,"-$1").toLowerCase();return/^(o|moz|ms|webkit)-/.test(r)?`-${r}`:r}(e);if(null==i)return void t.style.removeProperty(o);const n=function(t,e){return"number"==typeof e&&r.includes(t)?`${e}px`:String(e)}(e,i);t.style.setProperty(o,n)}))}),[e,i])}export{e as useApplyStyle};
 //# sourceMappingURL=use-apply-styles.js.map

package/theme/utils/use-apply-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-apply-styles.js","sources":["../../../src/theme/utils/use-apply-styles.ts"],"sourcesContent":["import type { RefObject } from \"react\";\n\nimport { useIsomorphicLayoutEffect } from \"../../util\";\nimport type { CSSVariableKey } from \"../types\";\n\ntype StyleValue = string | number | null | undefined;\n\nexport type ApplyStyleMap = {\n    [K in keyof React.CSSProperties]?: StyleValue;\n} & {\n    [K in CSSVariableKey]?: StyleValue;\n} & {\n    [K in `--${string}`]?: StyleValue;\n};\n\nexport function useApplyStyle<TElement extends HTMLElement>(\n    ref: RefObject<TElement | null>,\n    styles: ApplyStyleMap\n) {\n    useIsomorphicLayoutEffect(() => {\n        const element = ref?.current;\n        if (!element) return;\n\n        Object.entries(styles).forEach(([key, value]) => {\n            if (value == null) {\n                element.style.setProperty(key, \"\");\n                return;\n            }\n\n            element.style.setProperty(key, String(value));\n        });\n    }, [ref, styles]);\n}\n"],"names":["useApplyStyle","ref","styles","useIsomorphicLayoutEffect","element","current","Object","entries","forEach","key","value","style","setProperty","String"],"mappings":"yNAeM,SAAUA,EACZC,EACAC,GAEAC,GAA0B,KACtB,MAAMC,EAAUH,aAAG,EAAHA,EAAKI,QAChBD,GAELE,OAAOC,QAAQL,GAAQM,SAAQ,EAAEC,EAAKC,MACrB,MAATA,EAKJN,EAAQO,MAAMC,YAAYH,EAAKI,OAAOH,IAJlCN,EAAQO,MAAMC,YAAYH,EAAK,GAIU,GAC/C,GACH,CAACR,EAAKC,GACb"}
+{"version":3,"file":"use-apply-styles.js","sources":["../../../src/theme/utils/use-apply-styles.ts"],"sourcesContent":["import type { CSSProperties, RefObject } from \"react\";\n\nimport { useIsomorphicLayoutEffect } from \"../../util\";\nimport type { CSSVariableKey } from \"../types\";\n\ntype StyleValue = string | number | null | undefined;\n\nexport type ApplyStyleMap =\n    | ({\n          [K in keyof CSSStyleDeclaration]?: StyleValue;\n      } & {\n          [K in CSSVariableKey]?: StyleValue;\n      } & {\n          [K in `--${string}`]?: StyleValue;\n      })\n    | CSSProperties;\n\n/** list of properties that expect units but can be provided as numbers through React style prop */\nconst numericCssStyleProperties: (keyof CSSStyleDeclaration)[] = [\n    \"width\",\n    \"height\",\n    \"top\",\n    \"left\",\n    \"right\",\n    \"bottom\",\n    \"margin\",\n    \"marginTop\",\n    \"marginLeft\",\n    \"marginRight\",\n    \"marginBottom\",\n    \"padding\",\n    \"paddingTop\",\n    \"paddingLeft\",\n    \"paddingRight\",\n    \"paddingBottom\",\n];\n\n/**\n * Normalises standard CSS property names from camelCase to kebab-case\n * - `backgroundColor` → `background-color`\n * - `WebkitLineClamp` → `-webkit-line-clamp`\n * - `--custom-variable` → `--custom-variable`\n *\n * Ref\n * https://github.com/facebook/react/blob/ad5dfc82b7107728da1430dd142f75b97b684dac/packages/react-dom-bindings/src/shared/hyphenateStyleName.js#L26\n */\nfunction normaliseCssProperty(key: string): string {\n    if (key.startsWith(\"--\")) return key;\n\n    const kebabCased = key.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n\n    if (/^(o|moz|ms|webkit)-/.test(kebabCased)) {\n        return `-${kebabCased}`;\n    }\n\n    return kebabCased;\n}\n\nfunction normaliseCssValue(key: string, value: string | number): string {\n    if (\n        typeof value === \"number\" &&\n        numericCssStyleProperties.includes(key as keyof CSSStyleDeclaration)\n    ) {\n        return `${value}px`;\n    }\n\n    return String(value);\n}\n\n/**\n * Hook to apply styles to a HTML DOM element. Use when you need to apply inline\n * styles but cannot use the inline React `style` prop due to strict CSP rules\n *\n * @param ref The HTML element to receive the styles\n * @param styles The styles to apply, in the same format as the React `style`\n * prop, or CSS variables. Values will be normalised to strings and numeric\n * values will have \"px\" appended for properties that typically require units.\n */\nexport function useApplyStyle<TElement extends HTMLElement>(\n    ref: RefObject<TElement | null>,\n    styles: ApplyStyleMap | undefined\n) {\n    useIsomorphicLayoutEffect(() => {\n        const element = ref?.current;\n        if (!element || !styles) return;\n\n        Object.entries(styles).forEach(([key, value]: [string, StyleValue]) => {\n            const normalisedKey = normaliseCssProperty(key);\n\n            if (value == null) {\n                element.style.removeProperty(normalisedKey);\n                return;\n            }\n\n            const normalisedValue = normaliseCssValue(key, value);\n            element.style.setProperty(normalisedKey, normalisedValue);\n        });\n    }, [ref, styles]);\n}\n"],"names":["numericCssStyleProperties","useApplyStyle","ref","styles","useIsomorphicLayoutEffect","element","current","Object","entries","forEach","key","value","normalisedKey","startsWith","kebabCased","replace","toLowerCase","test","normaliseCssProperty","style","removeProperty","normalisedValue","includes","String","normaliseCssValue","setProperty"],"mappings":"sSAkBA,MAAMA,EAA2D,CAC7D,QACA,SACA,MACA,OACA,QACA,SACA,SACA,YACA,aACA,cACA,eACA,UACA,aACA,cACA,eACA,iBA4CE,SAAUC,EACZC,EACAC,GAEAC,GAA0B,KACtB,MAAMC,EAAUH,aAAG,EAAHA,EAAKI,QAChBD,GAAYF,GAEjBI,OAAOC,QAAQL,GAAQM,SAAQ,EAAEC,EAAKC,MAClC,MAAMC,EAzClB,SAA8BF,GAC1B,GAAIA,EAAIG,WAAW,MAAO,OAAOH,EAEjC,MAAMI,EAAaJ,EAAIK,QAAQ,WAAY,OAAOC,cAElD,MAAI,sBAAsBC,KAAKH,GACpB,IAAIA,IAGRA,CACX,CA+BkCI,CAAqBR,GAE3C,GAAa,MAATC,EAEA,YADAN,EAAQc,MAAMC,eAAeR,GAIjC,MAAMS,EApClB,SAA2BX,EAAaC,GACpC,MACqB,iBAAVA,GACPX,EAA0BsB,SAASZ,GAE5B,GAAGC,MAGPY,OAAOZ,EAClB,CA2BoCa,CAAkBd,EAAKC,GAC/CN,EAAQc,MAAMM,YAAYb,EAAeS,EAAgB,GAC3D,GACH,CAACnB,EAAKC,GACb"}

package/theme/utils/use-media-query.d.ts

@@ -0,0 +1,24 @@
+import { Breakpoint } from "../tokens/breakpoint";
+export type BreakpointName = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type MaxWidthBreakpointName = Exclude<BreakpointName, "xxl">;
+type MinWidthBreakpointTokenKey = `${BreakpointName}-min`;
+type MaxWidthBreakpointTokenKey = `${MaxWidthBreakpointName}-max`;
+type WidthBreakpointTokenKey = MinWidthBreakpointTokenKey | MaxWidthBreakpointTokenKey;
+type WidthBreakpointCSSVariableString = (typeof Breakpoint)[WidthBreakpointTokenKey];
+type MediaQueryFeature = "aspect-ratio" | "color-index" | "color" | "device-aspect-ratio" | "device-height" | "device-width" | "grid" | "height" | "max-height" | "min-height" | "hover" | "monochrome" | "orientation" | "pointer" | "prefers-color-scheme" | "resolution" | "scan" | "width";
+export type MediaQueryClauseValue = string | number | boolean;
+export interface MediaQueryClause {
+    feature: MediaQueryFeature;
+    value: MediaQueryClauseValue | undefined;
+}
+export interface MediaQueryOptions {
+    minWidth?: WidthBreakpointCSSVariableString;
+    maxWidth?: WidthBreakpointCSSVariableString;
+    clauses?: MediaQueryClause[];
+}
+export declare const DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT = "480px";
+export declare const useMinWidthMediaQuery: (breakpoint: BreakpointName) => boolean;
+export declare const useMaxWidthMediaQuery: (breakpoint: MaxWidthBreakpointName) => boolean;
+export declare const useResolvedBreakpointToken: (breakpointToken: WidthBreakpointCSSVariableString | undefined, fallbackLength?: string) => string | undefined;
+export declare const useMediaQuery: (options: MediaQueryOptions) => boolean;
+export {};

package/theme/utils/use-media-query.js

@@ -0,0 +1,2 @@
+import{useState as i,useEffect as e}from"react";import{Breakpoint as n}from"../tokens/breakpoint.js";import{normalizeCssLengthValue as t}from"./css-variable.js";import{isTokenFromSet as r}from"./token-resolver.js";import{useResolvedTokenValue as a}from"./use-design-token.js";const m="480px",o=new Set([n["xxs-min"],n["xs-min"],n["sm-min"],n["md-min"],n["lg-min"],n["xl-min"],n["xxl-min"],n["xxs-max"],n["xs-max"],n["sm-max"],n["md-max"],n["lg-max"],n["xl-max"]]),l=i=>r(i,o),s=i=>n[`${i}-min`],d=i=>n[`${i}-max`],u=i=>w({minWidth:s(i)}),v=i=>w({maxWidth:d(i)}),x=(i,e)=>{if(e)return`(${i}: ${e})`},c=i=>{if(void 0===(null==i?void 0:i.value))return;if(!0===i.value)return`(${i.feature})`;if(!1===i.value)return;const e=`${i.value}`.trim();return e?`(${i.feature}: ${e})`:void 0},h=(i,e)=>{var n,r;const m=a({value:i,fallback:null!==(n=null!=e?e:i)&&void 0!==n?n:"",isToken:l,normalizeCustom:i=>i});return null!==(r=t(m))&&void 0!==r?r:t(e)},f=(n,t)=>{const[r,a]=i((()=>((i,e)=>{var n;return i&&(null===(n=globalThis.window)||void 0===n?void 0:n.matchMedia)?globalThis.window.matchMedia(i).matches:e})(n,t)));return e((()=>{var i;if(!n||!(null===(i=globalThis.window)||void 0===i?void 0:i.matchMedia))return void a(t);const e=globalThis.window.matchMedia(n),r=i=>{a(i.matches)};return a(e.matches),e.addEventListener("change",r),()=>{e.removeEventListener("change",r)}}),[t,n]),r},w=i=>{const{minWidth:e,maxWidth:n,clauses:t=[]}=i,r=h(e),a=h(n),m=[...[x("min-width",r),x("max-width",a)].filter((i=>!!i)),...t.map(c).filter((i=>!!i))].join(" and "),o=((i,e)=>!e&&!!i)(!!r,!!a);return f(m,o)};export{m as DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT,v as useMaxWidthMediaQuery,w as useMediaQuery,u as useMinWidthMediaQuery,h as useResolvedBreakpointToken};
+//# sourceMappingURL=use-media-query.js.map

package/theme/utils/use-media-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-query.js","sources":["../../../src/theme/utils/use-media-query.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { Breakpoint } from \"../tokens/breakpoint\";\nimport { normalizeCssLengthValue } from \"./css-variable\";\nimport { isTokenFromSet } from \"./token-resolver\";\nimport { useResolvedTokenValue } from \"./use-design-token\";\n\nexport type BreakpointName = \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\nexport type MaxWidthBreakpointName = Exclude<BreakpointName, \"xxl\">;\ntype MinWidthBreakpointTokenKey = `${BreakpointName}-min`;\ntype MaxWidthBreakpointTokenKey = `${MaxWidthBreakpointName}-max`;\ntype WidthBreakpointTokenKey =\n    | MinWidthBreakpointTokenKey\n    | MaxWidthBreakpointTokenKey;\ntype WidthBreakpointCSSVariableString =\n    (typeof Breakpoint)[WidthBreakpointTokenKey];\n\ntype MediaQueryFeature =\n    | \"aspect-ratio\"\n    | \"color-index\"\n    | \"color\"\n    | \"device-aspect-ratio\"\n    | \"device-height\"\n    | \"device-width\"\n    | \"grid\"\n    | \"height\"\n    | \"max-height\"\n    | \"min-height\"\n    | \"hover\"\n    | \"monochrome\"\n    | \"orientation\"\n    | \"pointer\"\n    | \"prefers-color-scheme\"\n    | \"resolution\"\n    | \"scan\"\n    | \"width\";\n\nexport type MediaQueryClauseValue = string | number | boolean;\n\nexport interface MediaQueryClause {\n    feature: MediaQueryFeature;\n    value: MediaQueryClauseValue | undefined;\n}\n\nexport interface MediaQueryOptions {\n    minWidth?: WidthBreakpointCSSVariableString;\n    maxWidth?: WidthBreakpointCSSVariableString;\n    clauses?: MediaQueryClause[];\n}\n\nexport const DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT = \"480px\";\nconst WIDTH_BREAKPOINT_TOKEN_SET = new Set<WidthBreakpointCSSVariableString>([\n    Breakpoint[\"xxs-min\"],\n    Breakpoint[\"xs-min\"],\n    Breakpoint[\"sm-min\"],\n    Breakpoint[\"md-min\"],\n    Breakpoint[\"lg-min\"],\n    Breakpoint[\"xl-min\"],\n    Breakpoint[\"xxl-min\"],\n    Breakpoint[\"xxs-max\"],\n    Breakpoint[\"xs-max\"],\n    Breakpoint[\"sm-max\"],\n    Breakpoint[\"md-max\"],\n    Breakpoint[\"lg-max\"],\n    Breakpoint[\"xl-max\"],\n]);\n\nconst isBreakpointToken = (\n    value: unknown\n): value is WidthBreakpointCSSVariableString => {\n    return isTokenFromSet<WidthBreakpointCSSVariableString>(\n        value,\n        WIDTH_BREAKPOINT_TOKEN_SET\n    );\n};\n\nconst getMinWidthBreakpointToken = (breakpoint: BreakpointName) => {\n    return Breakpoint[`${breakpoint}-min`];\n};\n\nconst getMaxWidthBreakpointToken = (breakpoint: MaxWidthBreakpointName) => {\n    return Breakpoint[`${breakpoint}-max`];\n};\n\nexport const useMinWidthMediaQuery = (breakpoint: BreakpointName) =>\n    useMediaQuery({\n        minWidth: getMinWidthBreakpointToken(breakpoint),\n    });\n\nexport const useMaxWidthMediaQuery = (breakpoint: MaxWidthBreakpointName) =>\n    useMediaQuery({\n        maxWidth: getMaxWidthBreakpointToken(breakpoint),\n    });\n\nconst getMediaQueryClause = (\n    feature: \"min-width\" | \"max-width\",\n    value: string | undefined\n) => {\n    if (!value) {\n        return undefined;\n    }\n\n    return `(${feature}: ${value})`;\n};\n\nconst getCustomMediaQueryClause = (\n    clause: MediaQueryClause | null | undefined\n) => {\n    if (clause?.value === undefined) {\n        return undefined;\n    }\n\n    if (clause.value === true) {\n        return `(${clause.feature})`;\n    }\n\n    if (clause.value === false) {\n        return undefined;\n    }\n\n    const value = `${clause.value}`.trim();\n\n    if (!value) {\n        return undefined;\n    }\n\n    return `(${clause.feature}: ${value})`;\n};\n\nconst getDefaultMatch = (hasMinWidth: boolean, hasMaxWidth: boolean) => {\n    if (hasMaxWidth) {\n        return false;\n    }\n\n    if (hasMinWidth) {\n        return true;\n    }\n\n    return false;\n};\n\nconst getCurrentMatch = (queryString: string, defaultMatch: boolean) => {\n    if (!queryString) {\n        return defaultMatch;\n    }\n\n    if (!globalThis.window?.matchMedia) {\n        return defaultMatch;\n    }\n\n    return globalThis.window.matchMedia(queryString).matches;\n};\n\nexport const useResolvedBreakpointToken = (\n    breakpointToken: WidthBreakpointCSSVariableString | undefined,\n    fallbackLength?: string\n): string | undefined => {\n    const resolvedTokenValue = useResolvedTokenValue<\n        WidthBreakpointCSSVariableString,\n        string\n    >({\n        value: breakpointToken,\n        fallback: fallbackLength ?? breakpointToken ?? \"\",\n        isToken: isBreakpointToken,\n        normalizeCustom: (value) => value,\n    });\n\n    return (\n        normalizeCssLengthValue(resolvedTokenValue) ??\n        normalizeCssLengthValue(fallbackLength)\n    );\n};\n\nconst useMatchMediaQuery = (\n    queryString: string,\n    defaultMatch: boolean\n): boolean => {\n    const [matches, setMatches] = useState(() =>\n        getCurrentMatch(queryString, defaultMatch)\n    );\n\n    useEffect(() => {\n        if (!queryString || !globalThis.window?.matchMedia) {\n            setMatches(defaultMatch);\n            return;\n        }\n\n        const mediaQueryList = globalThis.window.matchMedia(queryString);\n        const handleChange = (event: MediaQueryListEvent) => {\n            setMatches(event.matches);\n        };\n\n        setMatches(mediaQueryList.matches);\n        mediaQueryList.addEventListener(\"change\", handleChange);\n\n        return () => {\n            mediaQueryList.removeEventListener(\"change\", handleChange);\n        };\n    }, [defaultMatch, queryString]);\n\n    return matches;\n};\n\nexport const useMediaQuery = (options: MediaQueryOptions): boolean => {\n    const { minWidth, maxWidth, clauses = [] } = options;\n    const normalizedMinWidth = useResolvedBreakpointToken(minWidth);\n    const normalizedMaxWidth = useResolvedBreakpointToken(maxWidth);\n    const widthClauses = [\n        getMediaQueryClause(\"min-width\", normalizedMinWidth),\n        getMediaQueryClause(\"max-width\", normalizedMaxWidth),\n    ].filter((value): value is string => !!value);\n    const customClauses = clauses\n        .map(getCustomMediaQueryClause)\n        .filter((value): value is string => !!value);\n    const queryString = [...widthClauses, ...customClauses].join(\" and \");\n    const hasMinWidth = !!normalizedMinWidth;\n    const hasMaxWidth = !!normalizedMaxWidth;\n    const defaultMatch = getDefaultMatch(hasMinWidth, hasMaxWidth);\n\n    return useMatchMediaQuery(queryString, defaultMatch);\n};\n"],"names":["DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT","WIDTH_BREAKPOINT_TOKEN_SET","Set","Breakpoint","isBreakpointToken","value","isTokenFromSet","getMinWidthBreakpointToken","breakpoint","getMaxWidthBreakpointToken","useMinWidthMediaQuery","useMediaQuery","minWidth","useMaxWidthMediaQuery","maxWidth","getMediaQueryClause","feature","getCustomMediaQueryClause","clause","undefined","trim","useResolvedBreakpointToken","breakpointToken","fallbackLength","resolvedTokenValue","useResolvedTokenValue","fallback","_a","isToken","normalizeCustom","_b","normalizeCssLengthValue","useMatchMediaQuery","queryString","defaultMatch","matches","setMatches","useState","globalThis","window","matchMedia","getCurrentMatch","useEffect","mediaQueryList","handleChange","event","addEventListener","removeEventListener","options","clauses","normalizedMinWidth","normalizedMaxWidth","filter","map","join","hasMinWidth","hasMaxWidth","getDefaultMatch"],"mappings":"oRAkDO,MAAMA,EAAsC,QAC7CC,EAA6B,IAAIC,IAAsC,CACzEC,EAAW,WACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,WACXA,EAAW,WACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,YAGTC,EACFC,GAEOC,EACHD,EACAJ,GAIFM,EAA8BC,GACzBL,EAAW,GAAGK,SAGnBC,EAA8BD,GACzBL,EAAW,GAAGK,SAGZE,EAAyBF,GAClCG,EAAc,CACVC,SAAUL,EAA2BC,KAGhCK,EAAyBL,GAClCG,EAAc,CACVG,SAAUL,EAA2BD,KAGvCO,EAAsB,CACxBC,EACAX,KAEA,GAAKA,EAIL,MAAO,IAAIW,MAAYX,IAAQ,EAG7BY,EACFC,IAEA,QAAsBC,KAAlBD,aAAM,EAANA,EAAQb,OACR,OAGJ,IAAqB,IAAjBa,EAAOb,MACP,MAAO,IAAIa,EAAOF,WAGtB,IAAqB,IAAjBE,EAAOb,MACP,OAGJ,MAAMA,EAAQ,GAAGa,EAAOb,QAAQe,OAEhC,OAAKf,EAIE,IAAIa,EAAOF,YAAYX,UAJ9B,CAIsC,EA2B7BgB,EAA6B,CACtCC,EACAC,aAEA,MAAMC,EAAqBC,EAGzB,CACEpB,MAAOiB,EACPI,SAA2C,QAAjCC,EAAAJ,QAAAA,EAAkBD,SAAe,IAAAK,EAAAA,EAAI,GAC/CC,QAASxB,EACTyB,gBAAkBxB,GAAUA,IAGhC,OAC+C,QAA3CyB,EAAAC,EAAwBP,UAAmB,IAAAM,EAAAA,EAC3CC,EAAwBR,EAAe,EAIzCS,EAAqB,CACvBC,EACAC,KAEA,MAAOC,EAASC,GAAcC,GAAS,IApCnB,EAACJ,EAAqBC,WAC1C,OAAKD,IAIiB,QAAjBN,EAAAW,WAAWC,cAAM,IAAAZ,OAAA,EAAAA,EAAEa,YAIjBF,WAAWC,OAAOC,WAAWP,GAAaE,QAPtCD,CAO6C,EA4BpDO,CAAgBR,EAAaC,KAsBjC,OAnBAQ,GAAU,WACN,IAAKT,KAAiC,QAAjBN,EAAAW,WAAWC,cAAM,IAAAZ,OAAA,EAAAA,EAAEa,YAEpC,YADAJ,EAAWF,GAIf,MAAMS,EAAiBL,WAAWC,OAAOC,WAAWP,GAC9CW,EAAgBC,IAClBT,EAAWS,EAAMV,QAAQ,EAM7B,OAHAC,EAAWO,EAAeR,SAC1BQ,EAAeG,iBAAiB,SAAUF,GAEnC,KACHD,EAAeI,oBAAoB,SAAUH,EAAa,CAC7D,GACF,CAACV,EAAcD,IAEXE,CAAO,EAGLxB,EAAiBqC,IAC1B,MAAMpC,SAAEA,EAAQE,SAAEA,EAAQmC,QAAEA,EAAU,IAAOD,EACvCE,EAAqB7B,EAA2BT,GAChDuC,EAAqB9B,EAA2BP,GAQhDmB,EAAc,IAPC,CACjBlB,EAAoB,YAAamC,GACjCnC,EAAoB,YAAaoC,IACnCC,QAAQ/C,KAA6BA,OACjB4C,EACjBI,IAAIpC,GACJmC,QAAQ/C,KAA6BA,KACciD,KAAK,SAGvDpB,EAxFc,EAACqB,EAAsBC,KACvCA,KAIAD,EAmFiBE,GAFCP,IACAC,GAGtB,OAAOnB,EAAmBC,EAAaC,EAAa"}

package/time-range-picker/combobox-picker/combobox-picker.d.ts

@@ -1,2 +1,2 @@
 import type { TimeRangePickerProps } from "../types";
-export declare const ComboboxPicker: ({ id, disabled, error, value, format, readOnly, onChange, onFocus, onBlur, alignment, dropdownZIndex, startLimit, endLimit, interval, dropdownRootNode, ...otherProps }: TimeRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxPicker: ({ id, disabled, error, value, format, readOnly, onChange, onFocus, onBlur, alignment, dropdownZIndex, startLimit, endLimit, initialScrollStartTime, initialScrollEndTime, interval, dropdownRootNode, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...otherProps }: TimeRangePickerProps) => import("react/jsx-runtime").JSX.Element;

package/time-range-picker/combobox-picker/combobox-picker.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import{useState as o,useRef as n,useMemo as l,useCallback as i,useEffect as a}from"react";import{ErrorMessageContainer as s,ErrorIcon as d,ErrorMessage as m}from"../../form/form-label.style.js";import{ClearIcon as p}from"../../input/input.style.js";import{ClearIconContainer as u}from"../../input-range-select/input-range-select.style.js";import"styled-components";import"../../util/string-helper.js";import"../../v3_theme/index.js";import"../../shared/dropdown-list-v2/dropdown-label.styles.js";import{DropdownList as c}from"../../shared/dropdown-list-v2/dropdown-list.js";import{DropdownListState as h}from"../../shared/dropdown-list-v2/dropdown-list-state.js";import"../../shared/dropdown-list-v2/expandable-element.js";import"@lifesg/react-icons/caret-right";import"react-virtuoso";import"../../button/button.style.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as v}from"../../util/simple-id-generator.js";import"../../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{ElementWithDropdown as f}from"../../shared/dropdown-wrapper/element-with-dropdown.js";import"../../shared/dropdown-list-v2/dropdown-list.styles.js";import"../../shared/dropdown-list-v2/dropdown-search.js";import"../../shared/dropdown-list-v2/nested-dropdown-list.styles.js";import"immer";import"../../external/lodash/_getTag.js";import"../../external/lodash/isArguments.js";import"../../external/lodash/_baseGetTag.js";import"../../external/lodash/isBuffer.js";import"../../external/lodash/isTypedArray.js";import"../../external/lodash/_Stack.js";import"../../external/lodash/_SetCache.js";import"../../external/lodash/_equalByTag.js";import{RangeInputInnerContainer as g}from"../../shared/range-input-inner-container/range-input-inner-container.js";import{TimeHelper as b}from"../../util/time-helper.js";import{Wrapper as j,SelectorInput as w}from"../common.styles.js";import{TimeFieldContainer as x}from"./combobox-picker.styles.js";const y=y=>{var{id:I,disabled:C=!1,error:T,value:O,format:k="12hr",readOnly:F,onChange:B,onFocus:E,onBlur:_,alignment:S="left",dropdownZIndex:$,startLimit:N,endLimit:A,interval:D=15,dropdownRootNode:L}=y,H=e(y,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","interval","dropdownRootNode"]);const[Z]=o((()=>v.generate())),[K,R]=o(null),[W,q]=o(!1),[G,P]=o(""),[z,J]=o(""),[M,Q]=o(""),[U,V]=o(""),[X,Y]=o(""),ee=n(null),te=n(null),re=n(null),oe=l((()=>b.generateTimings(D,k,N,A)),[D,k,N,A]),ne=l((()=>{if(""===U)return oe;const e=b.findClosestFlooredTime(U,oe);return e?oe.slice(oe.indexOf(e)):[]}),[oe,U]),le=i((e=>b.parseInput(e,k)),[k]);a((()=>{var e,t;if(O){const r=null!==(e=le(O.start))&&void 0!==e?e:"",o=null!==(t=le(O.end))&&void 0!==t?t:"";J(r),Q(o),V(r),Y(o)}}),[O,le]),a((()=>{if(T)return void q(!1);const e=le(z),t=le(M);if(void 0===e)P("Invalid start time");else if(void 0===t)P("Invalid end time");else{if(!(""!==e&&""!==t&&b.to24Hour(t)<b.to24Hour(e)))return P(""),void(document.activeElement!==te.current&&document.activeElement!==re.current||q(!0));P("End time must be after start time")}q(!1)}),[z,M,le,T]);const ie=e=>{C||F||(K||W||null==E||E(),R(e),q(!0))},ae=e=>{var t;C||F||(R(e),q(!0),null===(t=("start"===e?te:re).current)||void 0===t||t.select())};function se(e){var t;switch(e.code){case"Enter":"start"===K?de(z):"end"===K&&(W&&me(M),null===(t=re.current)||void 0===t||t.blur());break;case"Tab":pe(z,M,{})}}const de=e=>{pe(e,M,{goToNextInput:!0})},me=e=>{pe(z,e,{triggerOnBlur:!0})},pe=(e,t,{goToNextInput:r,triggerOnBlur:o})=>{var n,l,i;const a=null!==(n=le(e))&&void 0!==n?n:U,s=null!==(l=le(t))&&void 0!==l?l:X;J(a),Q(s);a===U&&s===X||null==B||B({start:a,end:s}),r&&void 0!==le(e)&&(R("end"),null===(i=re.current)||void 0===i||i.select()),o&&(R(null),q(!1),null==_||_()),V(a),Y(s)},ue=e=>{e.stopPropagation(),J(""),Q(""),V(""),Y("");null==B||B({start:"",end:""}),R(null),q(!1)},ce=e=>{var t,r;const o=e.relatedTarget,n=(null===(t=null==o?void 0:o.matches)||void 0===t?void 0:t.call(o,"[data-floating-ui-focusable]"))||(null===(r=null==o?void 0:o.matches)||void 0===r?void 0:r.call(o,"[data-floating-ui-focus-guard]")),l=ee.current&&ee.current.contains(o);K&&!W&&!l&&!n&&pe(z,M,{triggerOnBlur:!0})},he=()=>{if(!F&&!C&&((null==z?void 0:z.length)>0||(null==M?void 0:M.length)>0))return r(u,{onClick:ue,type:"button","aria-label":"Clear",children:r(p,{"aria-hidden":!0})})};return t(j,Object.assign({id:I},H,{children:[r(h,{children:r(f,{enabled:!F&&!C,isOpen:W,renderElement:()=>t(x,{ref:ee,$disabled:C,$error:T||!!G,$readOnly:F,onBlur:ce,children:[t(g,{error:T||!!G,currentActive:null===K?"none":K,children:[r(w,{ref:te,onFocus:()=>ie("start"),placeholder:"start"===K?"hh:mm":"From",onChange:e=>J(e.target.value),value:z,disabled:C,readOnly:F,"data-testid":H["data-testid"]?`${H["data-testid"]}-timepicker-selector`:"timepicker-selector",onClick:()=>ae("start"),onKeyDown:se,autoComplete:"off","aria-label":"Start time input",type:"text",role:"combobox","aria-expanded":W,"aria-controls":Z,"aria-autocomplete":"list"}),r(w,{ref:re,onFocus:()=>ie("end"),placeholder:"end"===K?"hh:mm":"To",onChange:e=>Q(e.target.value),value:M,disabled:C,readOnly:F,"data-testid":H["data-testid"]?`${H["data-testid"]}-timepicker-selector`:"timepicker-selector",onClick:()=>ae("end"),onKeyDown:se,autoComplete:"off","aria-label":"End time input",type:"text",role:"combobox","aria-expanded":W,"aria-controls":Z,"aria-autocomplete":"list"})]}),he()]}),renderDropdown:()=>r(c,"start"===K?{listItems:oe,onSelectItem:de,selectedItems:[z],topScrollItem:b.findClosestFlooredTime(le(z),oe),listboxId:Z,disableItemFocus:!0,matchElementWidth:!0}:{listItems:ne,onSelectItem:me,selectedItems:[M],topScrollItem:b.findClosestFlooredTime(le(M),ne),listboxId:Z,disableItemFocus:!0,matchElementWidth:!0}),onClose:e=>{"outside-press"===e?(R(null),q(!1),null==_||_()):pe(z,M,{triggerOnBlur:!0})},onDismiss:()=>{var e;null===(e=("start"===K?te:re).current)||void 0===e||e.focus(),q(!1)},offset:8,alignment:S,fitAvailableHeight:!0,customZIndex:$,rootNode:L})}),!T&&G&&t(s,{children:[r(d,{"aria-hidden":!0}),r(m,{id:I?`${I}-error-message`:"error-message",tabIndex:0,"data-testid":I?`${I}-error-message`:"error-message",children:G})]})]}))};export{y as ComboboxPicker};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import i from"clsx";import{useState as o,useRef as a,useMemo as l,useCallback as n,useEffect as s}from"react";import{FormErrorMessage as d}from"../../form/form-label.js";import{VisuallyHidden as m,concatIds as c}from"../../shared/accessibility/index.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{useId as p}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"../../theme/utils/use-media-query.js";import"../../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import{DropdownList as u}from"../../shared/dropdown-list/dropdown-list.js";import{DropdownListState as h}from"../../shared/dropdown-list/dropdown-list-state.js";import"../../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../../markup/markup.js";import"../../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as f}from"../../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as v,BasicInput as b,ClearButton as g}from"../../shared/input-wrapper/input-wrapper.js";import"../../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css";import"../../shared/dropdown-list/dropdown-search.js";import"../../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../../external/lodash/_getTag.js";import"../../external/lodash/isArguments.js";import"../../external/lodash/_baseGetTag.js";import"../../external/lodash/isBuffer.js";import"../../external/lodash/isTypedArray.js";import"../../external/lodash/_Stack.js";import"../../external/lodash/_SetCache.js";import"../../external/lodash/_equalByTag.js";import"../../shared/dropdown-list/virtuoso-components.js";import{clearButtonContainer as j}from"../../shared/input-wrapper/input-wrapper.styles.js";import{RangeInputInnerContainer as x}from"../../shared/range-input-inner-container/range-input-inner-container.js";import{TimeHelper as y}from"../../util/time-helper.js";import{wrapper as w,selectorInput as I}from"../common.styles.js";import{timeFieldContainer as _}from"./combobox-picker.styles.js";const T=T=>{var{id:k,disabled:C=!1,error:S,value:A,format:O="12hr",readOnly:E,onChange:N,onFocus:F,onBlur:B,alignment:q="left",dropdownZIndex:H,startLimit:$,endLimit:L,initialScrollStartTime:G,initialScrollEndTime:P,interval:D=15,dropdownRootNode:M,"aria-labelledby":Z,"aria-describedby":K,"aria-invalid":R}=T,W=e(T,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","initialScrollStartTime","initialScrollEndTime","interval","dropdownRootNode","aria-labelledby","aria-describedby","aria-invalid"]);const z=p(),[J,Q]=o(null),[U,V]=o(!1),[X,Y]=o(""),[ee,te]=o(""),[re,ie]=o(""),[oe,ae]=o(""),[le,ne]=o(""),se=a(null),de=a(null),me=a(null),ce=`${z}-listbox`,pe=`${z}-start-label`,ue=`${z}-end-label`,he=`${z}-error-message`,fe=l((()=>y.generateTimings(D,O,$,L)),[D,O,$,L]),ve=l((()=>{if(""===oe)return fe;const e=y.findClosestFlooredTime(oe,fe);return e?fe.slice(fe.indexOf(e)):[]}),[fe,oe]),be=n((e=>y.parseInput(e,O)),[O]),ge=l((()=>{var e;return null!==(e=be(G))&&void 0!==e?e:""}),[G,be]),je=l((()=>{var e;return null!==(e=be(P))&&void 0!==e?e:""}),[P,be]);s((()=>{var e,t;if(A){const r=null!==(e=be(A.start))&&void 0!==e?e:"",i=null!==(t=be(A.end))&&void 0!==t?t:"";te(r),ie(i),ae(r),ne(i)}}),[A,be]),s((()=>{if(S)return void V(!1);const e=be(ee),t=be(re);if(void 0===e)Y("Invalid start time");else if(void 0===t)Y("Invalid end time");else{if(!(""!==e&&""!==t&&y.to24Hour(t)<y.to24Hour(e)))return Y(""),void(document.activeElement!==de.current&&document.activeElement!==me.current||V(!0));Y("End time must be after start time")}V(!1)}),[ee,re,be,S]);const xe=()=>"start"===J?"Selecting for: Start time":"end"===J?"Selecting for: End time":void 0,ye=e=>c(Z,"start"===e?pe:ue),we=()=>c(K,!S&&X?he:void 0),Ie=e=>{C||E||(J||U||null==F||F(),Q(e),V(!0))},_e=e=>{var t;C||E||(Q(e),V(!0),null===(t=("start"===e?de:me).current)||void 0===t||t.select())};function Te(e){var t;switch(e.code){case"Enter":"start"===J?ke(ee):"end"===J&&(U&&Ce(re),null===(t=me.current)||void 0===t||t.blur());break;case"Tab":Se(ee,re,{})}}const ke=e=>{Se(e,re,{goToNextInput:!0})},Ce=e=>{Se(ee,e,{triggerOnBlur:!0})},Se=(e,t,{goToNextInput:r,triggerOnBlur:i})=>{var o,a,l;const n=null!==(o=be(e))&&void 0!==o?o:oe,s=null!==(a=be(t))&&void 0!==a?a:le;te(n),ie(s);n===oe&&s===le||null==N||N({start:n,end:s}),r&&void 0!==be(e)&&(Q("end"),null===(l=me.current)||void 0===l||l.select()),i&&(Q(null),V(!1),null==B||B()),ae(n),ne(s)},Ae=e=>{e.stopPropagation(),te(""),ie(""),ae(""),ne("");null==N||N({start:"",end:""}),Q(null),V(!1)},Oe=e=>{var t,r;const i=e.relatedTarget,o=(null===(t=null==i?void 0:i.matches)||void 0===t?void 0:t.call(i,"[data-floating-ui-focusable]"))||(null===(r=null==i?void 0:i.matches)||void 0===r?void 0:r.call(i,"[data-floating-ui-focus-guard]")),a=se.current&&se.current.contains(i);J&&!U&&!a&&!o&&Se(ee,re,{triggerOnBlur:!0})},Ee=()=>{if(!E&&!C&&((null==ee?void 0:ee.length)>0||(null==re?void 0:re.length)>0))return r("div",{className:j,children:r(g,{onClick:Ae,type:"button","aria-label":"Clear"})})};return t("div",Object.assign({id:k},W,{className:i(w,W.className),children:[r(h,{children:r(f,{enabled:!E&&!C,isOpen:U,renderElement:()=>t(v,{ref:se,disabled:C,error:S||!!X,readOnly:E,onBlur:Oe,role:"group","data-testid":"timepicker-container",className:_,children:[r(m,{id:pe,children:"Start time"}),r(m,{id:ue,children:"End time"}),t(x,{error:S||!!X,currentActive:null===J?"none":J,children:[r(b,{ref:de,onFocus:()=>Ie("start"),placeholder:"start"===J?"hh:mm":"From",onChange:e=>te(e.target.value),value:ee,readOnly:E,"data-testid":W["data-testid"]?`${W["data-testid"]}-timepicker-selector-start`:"timepicker-selector-start",onClick:()=>_e("start"),onKeyDown:Te,autoComplete:"off",type:"text",role:"combobox","aria-labelledby":ye("start"),"aria-describedby":we(),"aria-expanded":U&&"start"===J,"aria-controls":ce,"aria-autocomplete":"list","aria-invalid":S||R||!!X,"aria-disabled":C,"aria-readonly":E,className:I}),r(b,{ref:me,onFocus:()=>Ie("end"),placeholder:"end"===J?"hh:mm":"To",onChange:e=>ie(e.target.value),value:re,readOnly:E,"data-testid":W["data-testid"]?`${W["data-testid"]}-timepicker-selector-end`:"timepicker-selector-end",onClick:()=>_e("end"),onKeyDown:Te,autoComplete:"off",type:"text",role:"combobox","aria-labelledby":ye("end"),"aria-describedby":we(),"aria-expanded":U&&"end"===J,"aria-controls":ce,"aria-autocomplete":"list","aria-invalid":S||R||!!X||void 0,"aria-disabled":C||void 0,"aria-readonly":E||void 0,className:I})]}),Ee()]}),renderDropdown:()=>{if("start"===J){const e=be(ee)||ge;return r(u,{listItems:fe,onSelectItem:ke,selectedItems:[ee],topScrollItem:y.findClosestFlooredTime(e,fe),listboxId:ce,ariaLabel:xe(),disableItemFocus:!0,matchElementWidth:!0})}{const e=be(re)||je;return r(u,{listItems:ve,onSelectItem:Ce,selectedItems:[re],topScrollItem:y.findClosestFlooredTime(e,ve),listboxId:ce,ariaLabel:xe(),disableItemFocus:!0,matchElementWidth:!0})}},onClose:e=>{"outside-press"===e?(Q(null),V(!1),null==B||B()):Se(ee,re,{triggerOnBlur:!0})},onDismiss:()=>{var e;null===(e=("start"===J?de:me).current)||void 0===e||e.focus(),V(!1)},offset:8,alignment:q,fitAvailableHeight:!0,customZIndex:H,rootNode:M})}),!S&&X&&r(d,{id:he,tabIndex:0,"data-testid":k?`${k}-error-message`:"error-message",children:X})]}))};export{T as ComboboxPicker};
 //# sourceMappingURL=combobox-picker.js.map

package/time-range-picker/combobox-picker/combobox-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-picker.js","sources":["../../../src/time-range-picker/combobox-picker/combobox-picker.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport {\n    ErrorIcon,\n    ErrorMessage,\n    ErrorMessageContainer,\n} from \"../../form/form-label.style\";\nimport { ClearIcon } from \"../../input/input.style\";\nimport { ClearIconContainer } from \"../../input-range-select/input-range-select.style\";\nimport { DropdownListState } from \"../../shared/dropdown-list-v2\";\nimport { DropdownList } from \"../../shared/dropdown-list-v2/dropdown-list\";\nimport { ElementWithDropdown } from \"../../shared/dropdown-wrapper\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { SimpleIdGenerator } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { SelectorInput, Wrapper } from \"../common.styles\";\nimport type { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\nimport { TimeFieldContainer } from \"./combobox-picker.styles\";\n\ntype TimeRangeInputType = \"start\" | \"end\";\ninterface TimeChangeOptions {\n    goToNextInput?: boolean | undefined;\n    triggerOnBlur?: boolean | undefined;\n}\n\nexport const ComboboxPicker = ({\n    id,\n    disabled = false,\n    error,\n    value,\n    format = \"12hr\",\n    readOnly,\n    onChange,\n    onFocus,\n    onBlur,\n    alignment = \"left\",\n    dropdownZIndex,\n    startLimit,\n    endLimit,\n    interval = 15,\n    dropdownRootNode,\n    ...otherProps\n}: TimeRangePickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n    const [activeTimeSelector, setActiveTimeSelector] =\n        useState<TimeRangeInputType | null>(null);\n    const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);\n    const [validationError, setValidationError] = useState<string>(\"\");\n\n    const [startTimeVal, setStartTimeVal] = useState<string>(\"\");\n    const [endTimeVal, setEndTimeVal] = useState<string>(\"\");\n    const [initialStartTimeVal, setInitialStartTimeVal] = useState<string>(\"\");\n    const [initialEndTimeVal, setInitialEndTimeVal] = useState<string>(\"\");\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const startInputRef = useRef<HTMLInputElement>(null);\n    const endInputRef = useRef<HTMLInputElement>(null);\n\n    const startOptions = useMemo(\n        () =>\n            TimeHelper.generateTimings(interval, format, startLimit, endLimit),\n        [interval, format, startLimit, endLimit]\n    );\n    const endOptions = useMemo(() => {\n        if (initialStartTimeVal === \"\") return startOptions;\n\n        const flooredStartVal = TimeHelper.findClosestFlooredTime(\n            initialStartTimeVal,\n            startOptions\n        );\n        return flooredStartVal\n            ? startOptions.slice(startOptions.indexOf(flooredStartVal))\n            : [];\n    }, [startOptions, initialStartTimeVal]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const parseInput = useCallback(\n        (input: string): string | undefined => {\n            return TimeHelper.parseInput(input, format);\n        },\n        [format]\n    );\n\n    useEffect(() => {\n        if (value) {\n            const start = parseInput(value.start) ?? \"\";\n            const end = parseInput(value.end) ?? \"\";\n\n            setStartTimeVal(start);\n            setEndTimeVal(end);\n            setInitialStartTimeVal(start);\n            setInitialEndTimeVal(end);\n        }\n    }, [value, parseInput]);\n\n    // Validation for keyboard input\n    useEffect(() => {\n        if (error) {\n            setDropdownOpen(false);\n            return;\n        }\n\n        const start = parseInput(startTimeVal);\n        const end = parseInput(endTimeVal);\n\n        if (start === undefined) {\n            setValidationError(\"Invalid start time\");\n        } else if (end === undefined) {\n            setValidationError(\"Invalid end time\");\n        } else if (\n            start !== \"\" &&\n            end !== \"\" &&\n            TimeHelper.to24Hour(end) < TimeHelper.to24Hour(start)\n        ) {\n            setValidationError(\"End time must be after start time\");\n        } else {\n            setValidationError(\"\");\n            // Re-open dropdown if error was corrected\n            if (\n                document.activeElement === startInputRef.current ||\n                document.activeElement === endInputRef.current\n            ) {\n                setDropdownOpen(true);\n            }\n            return;\n        }\n\n        // Hide dropdown so error message is visible\n        setDropdownOpen(false);\n    }, [startTimeVal, endTimeVal, parseInput, error]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleInputFocus = (selector: TimeRangeInputType) => {\n        if (disabled || readOnly) return;\n\n        // Only run onFocus if not already focused\n        if (!activeTimeSelector && !dropdownOpen) onFocus?.();\n\n        setActiveTimeSelector(selector);\n        setDropdownOpen(true);\n    };\n\n    const handleInputClick = (selector: TimeRangeInputType) => {\n        if (disabled || readOnly) return;\n\n        setActiveTimeSelector(selector);\n        setDropdownOpen(true);\n        (selector === \"start\" ? startInputRef : endInputRef).current?.select();\n    };\n\n    function handleKeyDownEvent(event: React.KeyboardEvent<HTMLInputElement>) {\n        switch (event.code) {\n            case \"Enter\":\n                if (activeTimeSelector === \"start\") {\n                    handleStartTime(startTimeVal);\n                } else if (activeTimeSelector === \"end\") {\n                    // Let handleBlur call handleTimeChange instead\n                    if (dropdownOpen) handleEndTime(endTimeVal);\n                    endInputRef.current?.blur();\n                }\n                break;\n            case \"Tab\":\n                handleTimeChange(startTimeVal, endTimeVal, {});\n                break;\n            default:\n                break;\n        }\n    }\n\n    const handleStartTime = (input: string) => {\n        handleTimeChange(input, endTimeVal, { goToNextInput: true });\n    };\n\n    const handleEndTime = (input: string) => {\n        handleTimeChange(startTimeVal, input, { triggerOnBlur: true });\n    };\n\n    const handleTimeChange = (\n        startInput: string,\n        endInput: string,\n        {\n            goToNextInput, // Used by handleStart to move to end input automatically\n            triggerOnBlur, // Used by handleEnd/handleClear to trigger onBlur\n        }: TimeChangeOptions\n    ) => {\n        const start = parseInput(startInput) ?? initialStartTimeVal;\n        const end = parseInput(endInput) ?? initialEndTimeVal;\n\n        setStartTimeVal(start);\n        setEndTimeVal(end);\n\n        const timeValue: TimeRangePickerValue = { start, end };\n\n        // Trigger onChange if values have changed\n        if (start !== initialStartTimeVal || end !== initialEndTimeVal) {\n            onChange?.(timeValue);\n        }\n\n        // Go to end input only if start is a valid time\n        if (goToNextInput && parseInput(startInput) !== undefined) {\n            setActiveTimeSelector(\"end\");\n            endInputRef.current?.select();\n        }\n\n        if (triggerOnBlur) {\n            setActiveTimeSelector(null);\n            setDropdownOpen(false);\n            onBlur?.();\n        }\n\n        setInitialStartTimeVal(start);\n        setInitialEndTimeVal(end);\n    };\n\n    const handleClear = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        setStartTimeVal(\"\");\n        setEndTimeVal(\"\");\n        setInitialStartTimeVal(\"\");\n        setInitialEndTimeVal(\"\");\n\n        const timeValue: TimeRangePickerValue = {\n            start: \"\",\n            end: \"\",\n        };\n\n        onChange?.(timeValue);\n        setActiveTimeSelector(null);\n        setDropdownOpen(false);\n    };\n\n    const handleDismiss = () => {\n        (activeTimeSelector === \"start\"\n            ? startInputRef\n            : endInputRef\n        ).current?.focus();\n        setDropdownOpen(false);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLDivElement, Element>) => {\n        const target = event.relatedTarget as HTMLElement;\n\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n        const isInsideNode =\n            nodeRef.current && nodeRef.current.contains(target);\n\n        // Condition when the calendar is closed and focus moved outside the component\n        const shouldBlurWhenClosed =\n            activeTimeSelector &&\n            !dropdownOpen &&\n            !isInsideNode &&\n            !isFloatingElement;\n\n        if (shouldBlurWhenClosed) {\n            handleTimeChange(startTimeVal, endTimeVal, { triggerOnBlur: true });\n        }\n    };\n\n    // NOTE: Dropdown dismissal (esc) does not trigger onClose\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        if (reason === \"outside-press\") {\n            // No handleTimeChange to avoid duplicate call from handleBlur\n            setActiveTimeSelector(null);\n            setDropdownOpen(false);\n            onBlur?.();\n        } else {\n            // Dropdown closed via exiting component (eg. tab)\n            handleTimeChange(startTimeVal, endTimeVal, { triggerOnBlur: true });\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderClearButton = () => {\n        if (\n            !readOnly &&\n            !disabled &&\n            (startTimeVal?.length > 0 || endTimeVal?.length > 0)\n        ) {\n            return (\n                <ClearIconContainer\n                    onClick={handleClear}\n                    type=\"button\"\n                    aria-label=\"Clear\"\n                >\n                    <ClearIcon aria-hidden />\n                </ClearIconContainer>\n            );\n        }\n    };\n\n    const renderDropdown = () => {\n        if (activeTimeSelector === \"start\") {\n            return (\n                <DropdownList\n                    listItems={startOptions}\n                    onSelectItem={handleStartTime}\n                    selectedItems={[startTimeVal]}\n                    topScrollItem={TimeHelper.findClosestFlooredTime(\n                        parseInput(startTimeVal),\n                        startOptions\n                    )}\n                    listboxId={internalId}\n                    disableItemFocus\n                    matchElementWidth\n                />\n            );\n        } else {\n            return (\n                <DropdownList\n                    listItems={endOptions}\n                    onSelectItem={handleEndTime}\n                    selectedItems={[endTimeVal]}\n                    topScrollItem={TimeHelper.findClosestFlooredTime(\n                        parseInput(endTimeVal),\n                        endOptions\n                    )}\n                    listboxId={internalId}\n                    disableItemFocus\n                    matchElementWidth\n                />\n            );\n        }\n    };\n\n    const renderElement = () => (\n        <TimeFieldContainer\n            ref={nodeRef}\n            $disabled={disabled}\n            $error={error || !!validationError}\n            $readOnly={readOnly}\n            onBlur={handleBlur}\n        >\n            <RangeInputInnerContainer\n                error={error || !!validationError}\n                currentActive={\n                    activeTimeSelector === null ? \"none\" : activeTimeSelector\n                }\n            >\n                {/* From */}\n                <SelectorInput\n                    ref={startInputRef}\n                    onFocus={() => handleInputFocus(\"start\")}\n                    placeholder={\n                        activeTimeSelector === \"start\" ? \"hh:mm\" : \"From\"\n                    }\n                    onChange={(e) => setStartTimeVal(e.target.value)}\n                    value={startTimeVal}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector`\n                            : \"timepicker-selector\"\n                    }\n                    onClick={() => handleInputClick(\"start\")}\n                    onKeyDown={handleKeyDownEvent}\n                    autoComplete=\"off\"\n                    aria-label=\"Start time input\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-expanded={dropdownOpen}\n                    aria-controls={internalId}\n                    aria-autocomplete=\"list\"\n                />\n                {/* To */}\n                <SelectorInput\n                    ref={endInputRef}\n                    onFocus={() => handleInputFocus(\"end\")}\n                    placeholder={activeTimeSelector === \"end\" ? \"hh:mm\" : \"To\"}\n                    onChange={(e) => setEndTimeVal(e.target.value)}\n                    value={endTimeVal}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector`\n                            : \"timepicker-selector\"\n                    }\n                    onClick={() => handleInputClick(\"end\")}\n                    onKeyDown={handleKeyDownEvent}\n                    autoComplete=\"off\"\n                    aria-label=\"End time input\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-expanded={dropdownOpen}\n                    aria-controls={internalId}\n                    aria-autocomplete=\"list\"\n                />\n            </RangeInputInnerContainer>\n            {renderClearButton()}\n        </TimeFieldContainer>\n    );\n\n    const renderError = () =>\n        // Only display internal error message if user does not provide one\n        !error &&\n        validationError && (\n            <ErrorMessageContainer>\n                <ErrorIcon aria-hidden />\n                <ErrorMessage\n                    id={id ? `${id}-error-message` : \"error-message\"}\n                    tabIndex={0}\n                    data-testid={id ? `${id}-error-message` : \"error-message\"}\n                >\n                    {validationError}\n                </ErrorMessage>\n            </ErrorMessageContainer>\n        );\n\n    return (\n        <Wrapper id={id} {...otherProps}>\n            <DropdownListState>\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={dropdownOpen}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    offset={8}\n                    alignment={alignment}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                />\n            </DropdownListState>\n            {renderError()}\n        </Wrapper>\n    );\n};\n"],"names":["ComboboxPicker","_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","interval","dropdownRootNode","otherProps","__rest","internalId","useState","SimpleIdGenerator","generate","activeTimeSelector","setActiveTimeSelector","dropdownOpen","setDropdownOpen","validationError","setValidationError","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","initialStartTimeVal","setInitialStartTimeVal","initialEndTimeVal","setInitialEndTimeVal","nodeRef","useRef","startInputRef","endInputRef","startOptions","useMemo","TimeHelper","generateTimings","endOptions","flooredStartVal","findClosestFlooredTime","slice","indexOf","parseInput","useCallback","input","useEffect","start","end","_b","undefined","to24Hour","document","activeElement","current","handleInputFocus","selector","handleInputClick","select","handleKeyDownEvent","event","code","handleStartTime","handleEndTime","blur","handleTimeChange","goToNextInput","triggerOnBlur","startInput","endInput","_c","handleClear","stopPropagation","handleBlur","target","relatedTarget","isFloatingElement","matches","call","isInsideNode","contains","renderClearButton","length","_jsx","ClearIconContainer","onClick","type","children","ClearIcon","_jsxs","Wrapper","Object","assign","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","TimeFieldContainer","ref","$error","$readOnly","RangeInputInnerContainer","currentActive","SelectorInput","placeholder","e","onKeyDown","autoComplete","role","renderDropdown","DropdownList","listItems","onSelectItem","selectedItems","topScrollItem","listboxId","disableItemFocus","matchElementWidth","onClose","reason","onDismiss","focus","offset","fitAvailableHeight","customZIndex","rootNode","ErrorMessageContainer","ErrorIcon","ErrorMessage","tabIndex"],"mappings":"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"}
+{"version":3,"file":"combobox-picker.js","sources":["../../../src/time-range-picker/combobox-picker/combobox-picker.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { FormErrorMessage } from \"../../form/form-label\";\nimport { concatIds, VisuallyHidden } from \"../../shared/accessibility\";\nimport { DropdownListState } from \"../../shared/dropdown-list\";\nimport { DropdownList } from \"../../shared/dropdown-list/dropdown-list\";\nimport { ElementWithDropdown } from \"../../shared/dropdown-wrapper\";\nimport {\n    BasicInput,\n    ClearButton,\n    InputWrapper,\n} from \"../../shared/input-wrapper\";\nimport * as inputWrapperStyles from \"../../shared/input-wrapper/input-wrapper.styles\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { useId } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport * as commonStyles from \"../common.styles\";\nimport type { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\nimport * as styles from \"./combobox-picker.styles\";\n\ntype TimeRangeInputType = \"start\" | \"end\";\ninterface TimeChangeOptions {\n    goToNextInput?: boolean | undefined;\n    triggerOnBlur?: boolean | undefined;\n}\n\nexport const ComboboxPicker = ({\n    id,\n    disabled = false,\n    error,\n    value,\n    format = \"12hr\",\n    readOnly,\n    onChange,\n    onFocus,\n    onBlur,\n    alignment = \"left\",\n    dropdownZIndex,\n    startLimit,\n    endLimit,\n    initialScrollStartTime,\n    initialScrollEndTime,\n    interval = 15,\n    dropdownRootNode,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    ...otherProps\n}: TimeRangePickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const internalId = useId();\n    const [activeTimeSelector, setActiveTimeSelector] =\n        useState<TimeRangeInputType | null>(null);\n    const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);\n    const [validationError, setValidationError] = useState<string>(\"\");\n\n    const [startTimeVal, setStartTimeVal] = useState<string>(\"\");\n    const [endTimeVal, setEndTimeVal] = useState<string>(\"\");\n    const [initialStartTimeVal, setInitialStartTimeVal] = useState<string>(\"\");\n    const [initialEndTimeVal, setInitialEndTimeVal] = useState<string>(\"\");\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const startInputRef = useRef<HTMLInputElement>(null);\n    const endInputRef = useRef<HTMLInputElement>(null);\n\n    const listboxId = `${internalId}-listbox`;\n    const startLabelId = `${internalId}-start-label`;\n    const endLabelId = `${internalId}-end-label`;\n    const errorId = `${internalId}-error-message`;\n\n    const startOptions = useMemo(\n        () =>\n            TimeHelper.generateTimings(interval, format, startLimit, endLimit),\n        [interval, format, startLimit, endLimit]\n    );\n    const endOptions = useMemo(() => {\n        if (initialStartTimeVal === \"\") return startOptions;\n\n        const flooredStartVal = TimeHelper.findClosestFlooredTime(\n            initialStartTimeVal,\n            startOptions\n        );\n        return flooredStartVal\n            ? startOptions.slice(startOptions.indexOf(flooredStartVal))\n            : [];\n    }, [startOptions, initialStartTimeVal]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const parseInput = useCallback(\n        (input: string | undefined): string | undefined => {\n            return TimeHelper.parseInput(input, format);\n        },\n        [format]\n    );\n\n    const parsedInitialStartScrollTime = useMemo(\n        () => parseInput(initialScrollStartTime) ?? \"\",\n        [initialScrollStartTime, parseInput]\n    );\n\n    const parsedInitialEndScrollTime = useMemo(\n        () => parseInput(initialScrollEndTime) ?? \"\",\n        [initialScrollEndTime, parseInput]\n    );\n\n    useEffect(() => {\n        if (value) {\n            const start = parseInput(value.start) ?? \"\";\n            const end = parseInput(value.end) ?? \"\";\n\n            setStartTimeVal(start);\n            setEndTimeVal(end);\n            setInitialStartTimeVal(start);\n            setInitialEndTimeVal(end);\n        }\n    }, [value, parseInput]);\n\n    // Validation for keyboard input\n    useEffect(() => {\n        if (error) {\n            setDropdownOpen(false);\n            return;\n        }\n\n        const start = parseInput(startTimeVal);\n        const end = parseInput(endTimeVal);\n\n        if (start === undefined) {\n            setValidationError(\"Invalid start time\");\n        } else if (end === undefined) {\n            setValidationError(\"Invalid end time\");\n        } else if (\n            start !== \"\" &&\n            end !== \"\" &&\n            TimeHelper.to24Hour(end) < TimeHelper.to24Hour(start)\n        ) {\n            setValidationError(\"End time must be after start time\");\n        } else {\n            setValidationError(\"\");\n            // Re-open dropdown if error was corrected\n            if (\n                document.activeElement === startInputRef.current ||\n                document.activeElement === endInputRef.current\n            ) {\n                setDropdownOpen(true);\n            }\n            return;\n        }\n\n        // Hide dropdown so error message is visible\n        setDropdownOpen(false);\n    }, [startTimeVal, endTimeVal, parseInput, error]);\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const getDropdownAriaLabel = () => {\n        if (activeTimeSelector === \"start\") {\n            return \"Selecting for: Start time\";\n        }\n\n        if (activeTimeSelector === \"end\") {\n            return \"Selecting for: End time\";\n        }\n\n        return undefined;\n    };\n\n    const getInputLabelledBy = (type: TimeRangeInputType) => {\n        return concatIds(\n            ariaLabelledBy,\n            type === \"start\" ? startLabelId : endLabelId\n        );\n    };\n\n    const getInputDescribedBy = () => {\n        return concatIds(\n            ariaDescribedBy,\n            !error && validationError ? errorId : undefined\n        );\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleInputFocus = (selector: TimeRangeInputType) => {\n        if (disabled || readOnly) return;\n\n        // Only run onFocus if not already focused\n        if (!activeTimeSelector && !dropdownOpen) onFocus?.();\n\n        setActiveTimeSelector(selector);\n        setDropdownOpen(true);\n    };\n\n    const handleInputClick = (selector: TimeRangeInputType) => {\n        if (disabled || readOnly) return;\n\n        setActiveTimeSelector(selector);\n        setDropdownOpen(true);\n        (selector === \"start\" ? startInputRef : endInputRef).current?.select();\n    };\n\n    function handleKeyDownEvent(event: React.KeyboardEvent<HTMLInputElement>) {\n        switch (event.code) {\n            case \"Enter\":\n                if (activeTimeSelector === \"start\") {\n                    handleStartTime(startTimeVal);\n                } else if (activeTimeSelector === \"end\") {\n                    // Let handleBlur call handleTimeChange instead\n                    if (dropdownOpen) handleEndTime(endTimeVal);\n                    endInputRef.current?.blur();\n                }\n                break;\n            case \"Tab\":\n                handleTimeChange(startTimeVal, endTimeVal, {});\n                break;\n            default:\n                break;\n        }\n    }\n\n    const handleStartTime = (input: string) => {\n        handleTimeChange(input, endTimeVal, { goToNextInput: true });\n    };\n\n    const handleEndTime = (input: string) => {\n        handleTimeChange(startTimeVal, input, { triggerOnBlur: true });\n    };\n\n    const handleTimeChange = (\n        startInput: string,\n        endInput: string,\n        {\n            goToNextInput, // Used by handleStart to move to end input automatically\n            triggerOnBlur, // Used by handleEnd/handleClear to trigger onBlur\n        }: TimeChangeOptions\n    ) => {\n        const start = parseInput(startInput) ?? initialStartTimeVal;\n        const end = parseInput(endInput) ?? initialEndTimeVal;\n\n        setStartTimeVal(start);\n        setEndTimeVal(end);\n\n        const timeValue: TimeRangePickerValue = { start, end };\n\n        // Trigger onChange if values have changed\n        if (start !== initialStartTimeVal || end !== initialEndTimeVal) {\n            onChange?.(timeValue);\n        }\n\n        // Go to end input only if start is a valid time\n        if (goToNextInput && parseInput(startInput) !== undefined) {\n            setActiveTimeSelector(\"end\");\n            endInputRef.current?.select();\n        }\n\n        if (triggerOnBlur) {\n            setActiveTimeSelector(null);\n            setDropdownOpen(false);\n            onBlur?.();\n        }\n\n        setInitialStartTimeVal(start);\n        setInitialEndTimeVal(end);\n    };\n\n    const handleClear = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        setStartTimeVal(\"\");\n        setEndTimeVal(\"\");\n        setInitialStartTimeVal(\"\");\n        setInitialEndTimeVal(\"\");\n\n        const timeValue: TimeRangePickerValue = {\n            start: \"\",\n            end: \"\",\n        };\n\n        onChange?.(timeValue);\n        setActiveTimeSelector(null);\n        setDropdownOpen(false);\n    };\n\n    const handleDismiss = () => {\n        (activeTimeSelector === \"start\"\n            ? startInputRef\n            : endInputRef\n        ).current?.focus();\n        setDropdownOpen(false);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLDivElement, Element>) => {\n        const target = event.relatedTarget as HTMLElement;\n\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n        const isInsideNode =\n            nodeRef.current && nodeRef.current.contains(target);\n\n        // Condition when the calendar is closed and focus moved outside the component\n        const shouldBlurWhenClosed =\n            activeTimeSelector &&\n            !dropdownOpen &&\n            !isInsideNode &&\n            !isFloatingElement;\n\n        if (shouldBlurWhenClosed) {\n            handleTimeChange(startTimeVal, endTimeVal, { triggerOnBlur: true });\n        }\n    };\n\n    // NOTE: Dropdown dismissal (esc) does not trigger onClose\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        if (reason === \"outside-press\") {\n            // No handleTimeChange to avoid duplicate call from handleBlur\n            setActiveTimeSelector(null);\n            setDropdownOpen(false);\n            onBlur?.();\n        } else {\n            // Dropdown closed via exiting component (eg. tab)\n            handleTimeChange(startTimeVal, endTimeVal, { triggerOnBlur: true });\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderClearButton = () => {\n        if (\n            !readOnly &&\n            !disabled &&\n            (startTimeVal?.length > 0 || endTimeVal?.length > 0)\n        ) {\n            return (\n                <div className={inputWrapperStyles.clearButtonContainer}>\n                    <ClearButton\n                        onClick={handleClear}\n                        type=\"button\"\n                        aria-label=\"Clear\"\n                    />\n                </div>\n            );\n        }\n    };\n\n    const renderDropdown = () => {\n        if (activeTimeSelector === \"start\") {\n            // Prioritise start time value. If non existent, use initial scroll time\n            // If both are non existent, DropdownList will default to first option\n            const startScrollTime =\n                parseInput(startTimeVal) || parsedInitialStartScrollTime;\n\n            return (\n                <DropdownList\n                    listItems={startOptions}\n                    onSelectItem={handleStartTime}\n                    selectedItems={[startTimeVal]}\n                    topScrollItem={TimeHelper.findClosestFlooredTime(\n                        startScrollTime,\n                        startOptions\n                    )}\n                    listboxId={listboxId}\n                    ariaLabel={getDropdownAriaLabel()}\n                    disableItemFocus\n                    matchElementWidth\n                />\n            );\n        } else {\n            const endScrollTime =\n                parseInput(endTimeVal) || parsedInitialEndScrollTime;\n\n            return (\n                <DropdownList\n                    listItems={endOptions}\n                    onSelectItem={handleEndTime}\n                    selectedItems={[endTimeVal]}\n                    topScrollItem={TimeHelper.findClosestFlooredTime(\n                        endScrollTime,\n                        endOptions\n                    )}\n                    listboxId={listboxId}\n                    ariaLabel={getDropdownAriaLabel()}\n                    disableItemFocus\n                    matchElementWidth\n                />\n            );\n        }\n    };\n\n    const renderElement = () => (\n        <InputWrapper\n            ref={nodeRef}\n            disabled={disabled}\n            error={error || !!validationError}\n            readOnly={readOnly}\n            onBlur={handleBlur}\n            role=\"group\"\n            data-testid=\"timepicker-container\"\n            className={styles.timeFieldContainer}\n        >\n            <VisuallyHidden id={startLabelId}>Start time</VisuallyHidden>\n            <VisuallyHidden id={endLabelId}>End time</VisuallyHidden>\n\n            <RangeInputInnerContainer\n                error={error || !!validationError}\n                currentActive={\n                    activeTimeSelector === null ? \"none\" : activeTimeSelector\n                }\n            >\n                {/* From */}\n                <BasicInput\n                    ref={startInputRef}\n                    onFocus={() => handleInputFocus(\"start\")}\n                    placeholder={\n                        activeTimeSelector === \"start\" ? \"hh:mm\" : \"From\"\n                    }\n                    onChange={(e) => setStartTimeVal(e.target.value)}\n                    value={startTimeVal}\n                    readOnly={readOnly}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-start`\n                            : \"timepicker-selector-start\"\n                    }\n                    onClick={() => handleInputClick(\"start\")}\n                    onKeyDown={handleKeyDownEvent}\n                    autoComplete=\"off\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-labelledby={getInputLabelledBy(\"start\")}\n                    aria-describedby={getInputDescribedBy()}\n                    aria-expanded={\n                        dropdownOpen && activeTimeSelector === \"start\"\n                    }\n                    aria-controls={listboxId}\n                    aria-autocomplete=\"list\"\n                    aria-invalid={error || ariaInvalid || !!validationError}\n                    aria-disabled={disabled}\n                    aria-readonly={readOnly}\n                    className={commonStyles.selectorInput}\n                />\n                {/* To */}\n                <BasicInput\n                    ref={endInputRef}\n                    onFocus={() => handleInputFocus(\"end\")}\n                    placeholder={activeTimeSelector === \"end\" ? \"hh:mm\" : \"To\"}\n                    onChange={(e) => setEndTimeVal(e.target.value)}\n                    value={endTimeVal}\n                    readOnly={readOnly}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-end`\n                            : \"timepicker-selector-end\"\n                    }\n                    onClick={() => handleInputClick(\"end\")}\n                    onKeyDown={handleKeyDownEvent}\n                    autoComplete=\"off\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-labelledby={getInputLabelledBy(\"end\")}\n                    aria-describedby={getInputDescribedBy()}\n                    aria-expanded={dropdownOpen && activeTimeSelector === \"end\"}\n                    aria-controls={listboxId}\n                    aria-autocomplete=\"list\"\n                    aria-invalid={\n                        error || ariaInvalid || !!validationError || undefined\n                    }\n                    aria-disabled={disabled || undefined}\n                    aria-readonly={readOnly || undefined}\n                    className={commonStyles.selectorInput}\n                />\n            </RangeInputInnerContainer>\n            {renderClearButton()}\n        </InputWrapper>\n    );\n\n    const renderError = () =>\n        // Only display internal error message if user does not provide one\n        !error &&\n        validationError && (\n            <FormErrorMessage\n                id={errorId}\n                tabIndex={0}\n                data-testid={id ? `${id}-error-message` : \"error-message\"}\n            >\n                {validationError}\n            </FormErrorMessage>\n        );\n\n    return (\n        <div\n            id={id}\n            {...otherProps}\n            className={clsx(commonStyles.wrapper, otherProps.className)}\n        >\n            <DropdownListState>\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={dropdownOpen}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    offset={8}\n                    alignment={alignment}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                />\n            </DropdownListState>\n            {renderError()}\n        </div>\n    );\n};\n"],"names":["ComboboxPicker","_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","initialScrollStartTime","initialScrollEndTime","interval","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","internalId","useId","activeTimeSelector","setActiveTimeSelector","useState","dropdownOpen","setDropdownOpen","validationError","setValidationError","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","initialStartTimeVal","setInitialStartTimeVal","initialEndTimeVal","setInitialEndTimeVal","nodeRef","useRef","startInputRef","endInputRef","listboxId","startLabelId","endLabelId","errorId","startOptions","useMemo","TimeHelper","generateTimings","endOptions","flooredStartVal","findClosestFlooredTime","slice","indexOf","parseInput","useCallback","input","parsedInitialStartScrollTime","parsedInitialEndScrollTime","useEffect","start","end","_b","undefined","to24Hour","document","activeElement","current","getDropdownAriaLabel","getInputLabelledBy","type","concatIds","getInputDescribedBy","handleInputFocus","selector","handleInputClick","select","handleKeyDownEvent","event","code","handleStartTime","handleEndTime","blur","handleTimeChange","goToNextInput","triggerOnBlur","startInput","endInput","_c","handleClear","stopPropagation","handleBlur","target","relatedTarget","isFloatingElement","matches","call","isInsideNode","contains","renderClearButton","length","_jsx","className","inputWrapperStyles.clearButtonContainer","children","ClearButton","onClick","_jsxs","Object","assign","clsx","commonStyles.wrapper","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputWrapper","ref","role","styles.timeFieldContainer","VisuallyHidden","RangeInputInnerContainer","currentActive","BasicInput","placeholder","e","onKeyDown","autoComplete","commonStyles.selectorInput","renderDropdown","startScrollTime","DropdownList","listItems","onSelectItem","selectedItems","topScrollItem","ariaLabel","disableItemFocus","matchElementWidth","endScrollTime","onClose","reason","onDismiss","focus","offset","fitAvailableHeight","customZIndex","rootNode","FormErrorMessage","tabIndex"],"mappings":"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"}

package/time-range-picker/combobox-picker/combobox-picker.styles.d.ts

@@ -1,3 +1 @@
-export declare const TimeFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../../shared/input-wrapper").InputWrapperStyleProps> & import("../../shared/input-wrapper").InputWrapperStyleProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("../../shared/input-wrapper").InputWrapperStyleProps> & import("../../shared/input-wrapper").InputWrapperStyleProps, never>> & string;
+export declare const timeFieldContainer: import("@linaria/core").LinariaClassName;

package/time-range-picker/combobox-picker/combobox-picker.styles.js

@@ -1,7 +1,2 @@
-import r from"styled-components";import{InputWrapper as p}from"../../shared/input-wrapper/input-wrapper.js";import{V3_Spacing as e}from"../../v3_theme/index.js";const i=r(p)`
-    height: 3rem;
-    gap: ${e["spacing-8"]};
-    // space for clear icon
-    padding-right: calc(1.25rem + ${e["spacing-20"]});
-`;export{i as TimeFieldContainer};
+import"./combobox-picker.styles_7i9vso.css";const o="t1wpl53s";export{o as timeFieldContainer};
 //# sourceMappingURL=combobox-picker.styles.js.map

package/time-range-picker/combobox-picker/combobox-picker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-picker.styles.js","sources":["../../../src/time-range-picker/combobox-picker/combobox-picker.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { InputWrapper } from \"../../shared/input-wrapper/input-wrapper\";\nimport { V3_Spacing } from \"../../v3_theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TimeFieldContainer = styled(InputWrapper)`\n    height: 3rem;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n    // space for clear icon\n    padding-right: calc(1.25rem + ${V3_Spacing[\"spacing-20\"]});\n`;\n"],"names":["TimeFieldContainer","styled","InputWrapper","V3_Spacing"],"mappings":"uKAQaA,EAAqBC,EAAOC,EAAa;;WAE3CC,EAAW;;oCAEcA,EAAW;"}
+{"version":3,"file":"combobox-picker.styles.js","sources":["../../../src/time-range-picker/combobox-picker/combobox-picker.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const timeFieldContainer = css`\n    height: 3rem;\n    gap: ${Spacing[\"spacing-8\"]};\n    /* space for clear icon */\n    padding-right: calc(1.25rem + ${Spacing[\"spacing-20\"]});\n`;\n"],"names":["timeFieldContainer"],"mappings":"6FAOO,MAAMA,EAAkB"}

package/time-range-picker/combobox-picker/combobox-picker.styles_7i9vso.css

@@ -0,0 +1 @@
+.t1wpl53s{height:3rem;gap:var(--fds-spacing-8);padding-right:calc(1.25rem + var(--fds-spacing-20));}

package/time-range-picker/common.styles.d.ts

@@ -1,7 +1,3 @@
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../shared/input-wrapper").InputWrapperStyleProps> & import("../shared/input-wrapper").InputWrapperStyleProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("../shared/input-wrapper").InputWrapperStyleProps> & import("../shared/input-wrapper").InputWrapperStyleProps, never>> & string;
-export declare const SelectorInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, never>> & string;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const timeContainer: import("@linaria/core").LinariaClassName;
+export declare const selectorInput: import("@linaria/core").LinariaClassName;

package/time-range-picker/common.styles.js

@@ -1,11 +1,2 @@
-import p from"styled-components";import{InputWrapper as e,BasicInput as i}from"../shared/input-wrapper/input-wrapper.js";import{V3_Spacing as r}from"../v3_theme/index.js";const t=p.div`
-    position: relative;
-`,o=p(e)`
-    height: 3rem;
-    gap: ${r["spacing-8"]};
-`,m=p(i)`
-    display: block;
-    width: 100%;
-    flex: 1;
-`;export{m as SelectorInput,o as TimeContainer,t as Wrapper};
+import"./common.styles_1qwp4xa.css";const s="wfddsjt",t="t102z5ub",e="svbkfs2";export{e as selectorInput,t as timeContainer,s as wrapper};
 //# sourceMappingURL=common.styles.js.map

package/time-range-picker/common.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.styles.js","sources":["../../src/time-range-picker/common.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport {\n    BasicInput,\n    InputWrapper,\n} from \"../shared/input-wrapper/input-wrapper\";\nimport { V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div`\n    position: relative;\n`;\n\nexport const TimeContainer = styled(InputWrapper)`\n    height: 3rem;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const SelectorInput = styled(BasicInput)`\n    display: block;\n    width: 100%;\n    flex: 1;\n`;\n"],"names":["Wrapper","styled","div","TimeContainer","InputWrapper","V3_Spacing","SelectorInput","BasicInput"],"mappings":"2KAWO,MAAMA,EAAUC,EAAOC,GAAG;;EAIpBC,EAAgBF,EAAOG,EAAa;;WAEtCC,EAAW;EAGTC,EAAgBL,EAAOM,EAAW;;;;"}
+{"version":3,"file":"common.styles.js","sources":["../../src/time-range-picker/common.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const wrapper = css`\n    position: relative;\n`;\n\nexport const timeContainer = css`\n    height: 3rem;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const selectorInput = css`\n    display: block;\n    width: 100%;\n    flex: 1;\n`;\n"],"names":["wrapper","timeContainer","selectorInput"],"mappings":"qEAOO,MAAMA,EAAO,UAIPC,EAAa,WAKbC,EAAa"}

package/time-range-picker/common.styles_1qwp4xa.css

@@ -0,0 +1,3 @@
+.wfddsjt{position:relative;}
+.t102z5ub{height:3rem;gap:var(--fds-spacing-8);}
+.svbkfs2{display:block;width:100%;-webkit-flex:1;-ms-flex:1;flex:1;}

package/time-range-picker/dial-picker/dial-picker.d.ts

@@ -1,2 +1,2 @@
 import type { TimeRangePickerProps } from "../types";
-export declare const DialPicker: ({ id, disabled, error, value, format, readOnly, onChange, onFocus, onBlur, alignment, dropdownZIndex, dropdownRootNode, ...otherProps }: TimeRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialPicker: ({ id, disabled, error, value, format, readOnly, onChange, onFocus, onBlur, alignment, dropdownZIndex, dropdownRootNode, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...otherProps }: TimeRangePickerProps) => import("react/jsx-runtime").JSX.Element;