@lifesg/react-design-system 4.0.0-alpha.5 → 4.0.0-alpha.7

package/input-select/types.d.ts

@@ -1,56 +1,112 @@
 import type { RefObject } from "react";
 import type { DropdownCustomLabelProps, DropdownDisplayProps, DropdownSearchProps, DropdownVariantType, ItemsLoadStateType, TruncateType } from "../shared/dropdown-list/types";
 import type { DropdownAlignmentType } from "../shared/dropdown-wrapper";
+/**
+ * Options configuration for `InputSelect`.
+ */
 export interface InputSelectOptionsProps<T> {
+    /** The list of selectable options rendered in the dropdown. */
     options: T[];
     /**
-     * Used when options are loaded from an api call.
-     * Values: "loading" | "fail" | "success"
+     * Indicates the load state of options fetched asynchronously.
+     * Renders a loading spinner, error retry, or the list depending on the state.
+     *
+     * @default "success"
      */
     optionsLoadState?: ItemsLoadStateType | undefined;
-    /** Specifies the truncation type. Truncated text will be replaced with ellipsis. Values: "middle" | "end" */
+    /**
+     * Controls how long option labels are truncated when they overflow.
+     *
+     * @default "end"
+     */
     optionTruncationType?: TruncateType | undefined;
+    /** Called when the dropdown list becomes visible. */
     onShowOptions?: (() => void) | undefined;
+    /** Called when the dropdown list is hidden. */
     onHideOptions?: (() => void) | undefined;
+    /** Called when the user activates the retry action after a load failure. */
     onRetry?: (() => void) | undefined;
 }
+/** Common presentation and state props shared across select components. */
 export interface InputSelectSharedProps<T> {
-    /** HTML button props */
+    /** Name attribute forwarded to the underlying button element. */
     name?: string | undefined;
-    /** Component specific props */
+    /** The list of selectable options. */
     options: T[];
+    /** Placeholder text shown when no option is selected. */
     placeholder?: string | undefined;
     disabled?: boolean | undefined;
+    /** Renders the trigger in an error state. */
     error?: boolean | undefined;
     "data-testid"?: string | undefined;
 }
+/**
+ * Props for the `InputSelect` component.
+ *
+ * `T` is the option item type; `V` is the extracted value type returned by
+ * `valueExtractor`.
+ */
 export interface InputSelectProps<T, V> extends React.HTMLAttributes<HTMLElement>, InputSelectOptionsProps<T>, InputSelectSharedProps<T>, DropdownDisplayProps<T, V>, DropdownSearchProps<T> {
     readOnly?: boolean | undefined;
+    /** The currently selected option. The component syncs to this value on each render. */
     selectedOption?: T | undefined;
+    /**
+     * Called when the user picks an item from the dropdown.
+     *
+     * @param option The full option object that was selected.
+     * @param extractedValue The value derived from the option via `valueExtractor`.
+     */
     onSelectOption?: ((option: T, extractedValue: V) => void) | undefined;
-    /** Function to derive display value for selected option */
+    /**
+     * Derives the display string shown in the trigger for the selected option.
+     * Takes precedence over `valueExtractor` + `valueToStringFunction`.
+     */
     displayValueExtractor?: ((option: T) => string) | undefined;
-    /** Function to convert value into a string */
+    /** Function to convert selected value into a display string */
     valueToStringFunction?: ((value: V) => string) | undefined;
-    /** Function to render selected custom component */
+    /**
+     * Renders a custom element for the currently selected option.
+     */
     renderCustomSelectedOption?: ((option: T) => JSX.Element) | undefined;
+    /**
+     * Called when focus leaves both the trigger and dropdown.
+     */
     onBlur?: (() => void) | undefined;
+    /**
+     * Visual size variant of the trigger and dropdown.
+     *
+     * @default "default"
+     */
     variant?: DropdownVariantType | undefined;
+    /** Aligns the dropdown relative to the trigger element. */
     alignment?: DropdownAlignmentType | undefined;
+    /** CSS `z-index` applied to the dropdown overlay. */
     dropdownZIndex?: number | undefined;
     /**
-     * The root element that contains the dropdown element. Defaults to the document body.
+     * The root element that contains the dropdown element.
+     *
+     * @remarks Specify this if you need to change the parent of the
+     * dropdown in the HTML DOM.
+     * Possible use case: sharing a stacking context.
+     *
+     * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
+     * the dropdown may be obscured.
      *
-     * If the parent that contains the trigger element has a higher z-index than the dropdown,
-     * the dropdown may not be visible. Specify the parent element here instead
+     * @default document.body
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
     /**
-     * Custom width for the dropdown. When specified, the dropdown will use this
-     * width instead of matching the input element width.
+     * Custom width for the dropdown. When specified, the dropdown uses this
+     * width instead of matching the trigger element width.
      */
     dropdownWidth?: string | undefined;
+    /**
+     * Overrides the default labels shown inside the dropdown and on the trigger.
+     */
     customLabels?: DropdownCustomLabelProps | undefined;
 }
-/** To be exposed for Form component inheritance */
+/**
+ * A subset of `InputSelectProps` used by form components that manage
+ * the `error` state themselves.
+ */
 export type InputSelectPartialProps<T, V> = Omit<InputSelectProps<T, V>, "error">;

package/input-slider/input-slider.d.ts

@@ -1,2 +1,8 @@
 import type { InputSliderProps } from "./types";
+/**
+ * A single-thumb slider for selecting one numeric value within a range.
+ *
+ * Use `InputSlider` when a user needs to pick a single point on a continuous
+ * scale without a precise value. For selecting a range between two values, use `InputRangeSlider` instead.
+ */
 export declare const InputSlider: ({ value, ariaLabel, onChange, onChangeEnd, ...otherProps }: InputSliderProps) => import("react/jsx-runtime").JSX.Element;

package/input-slider/input-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-slider.js","sources":["../../src/input-slider/input-slider.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { InputRangeSlider } from \"../input-range-slider\";\nimport type { InputSliderProps } from \"./types\";\n\nexport const InputSlider = ({\n    value,\n    ariaLabel,\n    onChange,\n    onChangeEnd,\n    ...otherProps\n}: InputSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [selection, setSelection] = useState<number[]>(initialiseSelection());\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection[0]) {\n            setSelection(initialiseSelection());\n        }\n    }, [value]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (value: number[]) => {\n        const [newVal] = value;\n        setSelection([newVal]);\n        onChange?.(newVal);\n    };\n\n    const handleChangeEnd = (value: number[]) => {\n        const [newVal] = value;\n        setSelection([newVal]);\n        onChangeEnd?.(newVal);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initialiseSelection() {\n        return value != undefined ? [value] : [0];\n    }\n\n    return (\n        <InputRangeSlider\n            {...otherProps}\n            value={selection}\n            numOfThumbs={1}\n            onChange={handleChange}\n            onChangeEnd={handleChangeEnd}\n            ariaLabels={ariaLabel ? [ariaLabel] : undefined}\n        />\n    );\n};\n"],"names":["InputSlider","_a","value","ariaLabel","onChange","onChangeEnd","otherProps","__rest","selection","setSelection","useState","initialiseSelection","useEffect","undefined","_jsx","InputRangeSlider","Object","assign","numOfThumbs","newVal","ariaLabels"],"mappings":"sNAKO,MAAMA,EAAeC,IAAA,IAAAC,MACxBA,EAAKC,UACLA,EAASC,SACTA,EAAQC,YACRA,GAAWJ,EACRK,EAAUC,EAAAN,EALW,CAAA,QAAA,YAAA,WAAA,gBAUxB,MAAOO,EAAWC,GAAgBC,EAAmBC,KAKrDC,GAAU,KACFV,IAAUM,EAAU,IACpBC,EAAaE,IACjB,GACD,CAACT,IAoBJ,SAASS,IACL,OAAgBE,MAATX,EAAqB,CAACA,GAAS,CAAC,EAC3C,CAEA,OACIY,EAACC,EAAgBC,OAAAC,OAAA,CAAA,EACTX,GACJJ,MAAOM,EACPU,YAAa,EACbd,SAxBcF,IAClB,MAAOiB,GAAUjB,EACjBO,EAAa,CAACU,IACdf,SAAAA,EAAWe,EAAO,EAsBdd,YAnBiBH,IACrB,MAAOiB,GAAUjB,EACjBO,EAAa,CAACU,IACdd,SAAAA,EAAcc,EAAO,EAiBjBC,WAAYjB,EAAY,CAACA,QAAaU,IACxC"}
+{"version":3,"file":"input-slider.js","sources":["../../src/input-slider/input-slider.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { InputRangeSlider } from \"../input-range-slider\";\nimport type { InputSliderProps } from \"./types\";\n\n// @catalog\n/**\n * A single-thumb slider for selecting one numeric value within a range.\n *\n * Use `InputSlider` when a user needs to pick a single point on a continuous\n * scale without a precise value. For selecting a range between two values, use `InputRangeSlider` instead.\n */\nexport const InputSlider = ({\n    value,\n    ariaLabel,\n    onChange,\n    onChangeEnd,\n    ...otherProps\n}: InputSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [selection, setSelection] = useState<number[]>(initialiseSelection());\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection[0]) {\n            setSelection(initialiseSelection());\n        }\n    }, [value]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (value: number[]) => {\n        const [newVal] = value;\n        setSelection([newVal]);\n        onChange?.(newVal);\n    };\n\n    const handleChangeEnd = (value: number[]) => {\n        const [newVal] = value;\n        setSelection([newVal]);\n        onChangeEnd?.(newVal);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initialiseSelection() {\n        return value != undefined ? [value] : [0];\n    }\n\n    return (\n        <InputRangeSlider\n            {...otherProps}\n            value={selection}\n            numOfThumbs={1}\n            onChange={handleChange}\n            onChangeEnd={handleChangeEnd}\n            ariaLabels={ariaLabel ? [ariaLabel] : undefined}\n        />\n    );\n};\n"],"names":["InputSlider","_a","value","ariaLabel","onChange","onChangeEnd","otherProps","__rest","selection","setSelection","useState","initialiseSelection","useEffect","undefined","_jsx","InputRangeSlider","Object","assign","numOfThumbs","newVal","ariaLabels"],"mappings":"sNAYO,MAAMA,EAAeC,IAAA,IAAAC,MACxBA,EAAKC,UACLA,EAASC,SACTA,EAAQC,YACRA,GAAWJ,EACRK,EAAUC,EAAAN,EALW,CAAA,QAAA,YAAA,WAAA,gBAUxB,MAAOO,EAAWC,GAAgBC,EAAmBC,KAKrDC,GAAU,KACFV,IAAUM,EAAU,IACpBC,EAAaE,IACjB,GACD,CAACT,IAoBJ,SAASS,IACL,OAAgBE,MAATX,EAAqB,CAACA,GAAS,CAAC,EAC3C,CAEA,OACIY,EAACC,EAAgBC,OAAAC,OAAA,CAAA,EACTX,GACJJ,MAAOM,EACPU,YAAa,EACbd,SAxBcF,IAClB,MAAOiB,GAAUjB,EACjBO,EAAa,CAACU,IACdf,SAAAA,EAAWe,EAAO,EAsBdd,YAnBiBH,IACrB,MAAOiB,GAAUjB,EACjBO,EAAa,CAACU,IACdd,SAAAA,EAAcc,EAAO,EAiBjBC,WAAYjB,EAAY,CAACA,QAAaU,IACxC"}

package/input-slider/types.d.ts

@@ -1,9 +1,28 @@
 import type { BaseSliderProps } from "../input-range-slider/types";
+/**
+ * Props for the `InputSlider` component.
+ */
 export interface InputSliderProps extends BaseSliderProps {
+    /**
+     * The controlled value of the thumb.
+     *
+     * @default 0
+     */
     value?: number | undefined;
+    /**
+     * Accessible label for the thumb.
+     */
     ariaLabel?: string | undefined;
-    /** Called on every selection change */
+    /**
+     * Called on every selection change.
+     *
+     * @param value The updated thumb value.
+     */
     onChange?: ((value: number) => void) | undefined;
-    /** Called when the thumb is released after selection is complete */
+    /**
+     * Called when a thumb is released after selection is complete.
+     *
+     * @param value The final thumb value.
+     */
     onChangeEnd?: ((value: number) => void) | undefined;
 }

package/input-textarea/textarea.d.ts

@@ -1,4 +1,7 @@
 import React from "react";
 import type { TextareaProps } from "./types";
 export declare const TextareaBase: (props: TextareaProps & React.RefAttributes<HTMLTextAreaElement>) => React.ReactElement | null;
+/**
+ * A multi-line text input with an optional character counter and prefix.
+ */
 export declare const Textarea: (props: TextareaProps & React.RefAttributes<HTMLTextAreaElement>) => React.ReactElement | null;

package/input-textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sources":["../../src/input-textarea/textarea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useState } from \"react\";\n\nimport * as styles from \"./textarea.styles\";\nimport { TextareaCounter } from \"./textarea-counter\";\nimport type { TextareaProps, TextareaRef } from \"./types\";\n\n// =============================================================================\n// BASE COMPONENT\n// =============================================================================\nconst TextareaBaseComponent = (\n    {\n        className,\n        disabled,\n        error,\n        maxLength,\n        onChange,\n        prefix,\n        readOnly,\n        rows = 5,\n        transformValue,\n        value,\n        ...otherProps\n    }: TextareaProps,\n    ref: TextareaRef\n) => {\n    const [stateValue, setStateValue] = useState(value);\n\n    useEffect(() => {\n        setStateValue(value);\n    }, [value]);\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        let newValue = event.target.value;\n        if (prefix) {\n            // Ensure prefix is always present\n            if (!newValue.startsWith(prefix)) {\n                newValue = prefix + newValue.trimStart();\n            }\n\n            // Prevent deleting the prefix\n            if (newValue.length < prefix.length) {\n                newValue = prefix;\n            }\n\n            const cursorPosition = event.target.selectionStart || 0;\n\n            // Ensure backspace does not delete the prefix\n            if (cursorPosition < prefix.length) {\n                event.preventDefault();\n                return;\n            }\n\n            // Extract user input\n            const userInput = newValue.slice(prefix.length);\n\n            // Transform the input if needed\n            const transformedValue = transformValue\n                ? transformValue(userInput)\n                : userInput;\n\n            // Update state and input field\n            setStateValue(transformedValue);\n            event.target.value = prefix + transformedValue;\n\n            // Pass only the user input (without prefix) to `onChange`\n            if (onChange) {\n                const syntheticEvent = {\n                    ...event,\n                    target: { ...event.target, value: transformedValue },\n                };\n                onChange(\n                    syntheticEvent as React.ChangeEvent<HTMLTextAreaElement>\n                );\n            }\n        } else {\n            const transformedValue = transformValue\n                ? transformValue(newValue ?? \"\")\n                : newValue;\n\n            setStateValue(transformedValue);\n            event.target.value = transformedValue;\n            if (onChange) onChange(event);\n        }\n    };\n\n    const getDisplayValue = () => {\n        return prefix ? prefix + (stateValue ?? \"\") : stateValue;\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        if (!prefix) return;\n\n        const { selectionStart } = event.currentTarget;\n\n        // Prevent backspace in prefix\n        if (event.key === \"Backspace\" && selectionStart <= prefix.length) {\n            event.preventDefault();\n        }\n\n        // Prevent left arrow from moving into prefix\n        if (event.key === \"ArrowLeft\" && selectionStart <= prefix.length) {\n            event.preventDefault();\n        }\n\n        // Prevent \"Home\" key from moving cursor to beginning\n        if (event.key === \"Home\") {\n            event.preventDefault();\n            requestAnimationFrame(() => {\n                event.currentTarget.setSelectionRange(\n                    prefix.length,\n                    prefix.length\n                );\n            });\n        }\n    };\n\n    return (\n        <textarea\n            ref={ref}\n            disabled={disabled}\n            value={getDisplayValue()}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            readOnly={readOnly}\n            className={clsx(\n                styles.element,\n                (readOnly && styles.elementReadOnly) ||\n                    (disabled && styles.elementDisabled) ||\n                    (error && styles.elementError),\n                className\n            )}\n            rows={rows}\n            maxLength={\n                prefix && maxLength ? prefix.length + maxLength : maxLength\n            }\n            {...otherProps}\n        />\n    );\n};\n\nexport const TextareaBase = React.forwardRef(TextareaBaseComponent);\n\n// =============================================================================\n// MODULE COMPONENT (comes with the counter)\n// =============================================================================\n\nconst TextareaComponent = (\n    {\n        value,\n        disabled,\n        rows = 5,\n        onChange,\n        transformValue,\n        prefix,\n        maxLength,\n        renderCustomCounter,\n        ...otherProps\n    }: TextareaProps,\n    ref: TextareaRef\n) => {\n    // -------------------------------------------------------------------------\n    // CONST, STATE, REF\n    // -------------------------------------------------------------------------\n    const [stateValue, setStateValue] = useState<\n        string | number | readonly string[] | undefined\n    >(value);\n\n    // -------------------------------------------------------------------------\n    // EFFECTS\n    // -------------------------------------------------------------------------\n    useEffect(() => {\n        setStateValue(value);\n    }, [value]);\n\n    // -------------------------------------------------------------------------\n    // EVENT HANDLER\n    // -------------------------------------------------------------------------\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const newValue = event.target.value;\n        setStateValue(newValue);\n        if (onChange) onChange(event);\n    };\n\n    // -------------------------------------------------------------------------\n    // RENDER FUNCTIONS\n    // -------------------------------------------------------------------------\n    return (\n        <div className={styles.wrapper}>\n            <TextareaBase\n                ref={ref}\n                disabled={disabled}\n                value={stateValue}\n                rows={rows || 5}\n                onChange={handleChange}\n                prefix={prefix}\n                transformValue={transformValue}\n                maxLength={maxLength}\n                {...otherProps}\n            />\n            {maxLength && (\n                <TextareaCounter\n                    value={stateValue}\n                    maxLength={maxLength}\n                    renderCustomCounter={renderCustomCounter}\n                />\n            )}\n        </div>\n    );\n};\n\nexport const Textarea = React.forwardRef(TextareaComponent);\n"],"names":["TextareaBase","React","forwardRef","_a","ref","className","disabled","error","maxLength","onChange","prefix","readOnly","rows","transformValue","value","otherProps","__rest","stateValue","setStateValue","useState","useEffect","_jsx","Object","assign","event","newValue","target","startsWith","trimStart","length","selectionStart","preventDefault","userInput","slice","transformedValue","syntheticEvent","onKeyDown","currentTarget","key","requestAnimationFrame","setSelectionRange","clsx","styles.element","styles.elementReadOnly","styles.elementDisabled","styles.elementError","Textarea","renderCustomCounter","_jsxs","styles.wrapper","children","TextareaCounter"],"mappings":"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"}
+{"version":3,"file":"textarea.js","sources":["../../src/input-textarea/textarea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useState } from \"react\";\n\nimport * as styles from \"./textarea.styles\";\nimport { TextareaCounter } from \"./textarea-counter\";\nimport type { TextareaProps, TextareaRef } from \"./types\";\n\n// =============================================================================\n// BASE COMPONENT\n// =============================================================================\nconst TextareaBaseComponent = (\n    {\n        className,\n        disabled,\n        error,\n        maxLength,\n        onChange,\n        prefix,\n        readOnly,\n        rows = 5,\n        transformValue,\n        value,\n        ...otherProps\n    }: TextareaProps,\n    ref: TextareaRef\n) => {\n    const [stateValue, setStateValue] = useState(value);\n\n    useEffect(() => {\n        setStateValue(value);\n    }, [value]);\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        let newValue = event.target.value;\n        if (prefix) {\n            // Ensure prefix is always present\n            if (!newValue.startsWith(prefix)) {\n                newValue = prefix + newValue.trimStart();\n            }\n\n            // Prevent deleting the prefix\n            if (newValue.length < prefix.length) {\n                newValue = prefix;\n            }\n\n            const cursorPosition = event.target.selectionStart || 0;\n\n            // Ensure backspace does not delete the prefix\n            if (cursorPosition < prefix.length) {\n                event.preventDefault();\n                return;\n            }\n\n            // Extract user input\n            const userInput = newValue.slice(prefix.length);\n\n            // Transform the input if needed\n            const transformedValue = transformValue\n                ? transformValue(userInput)\n                : userInput;\n\n            // Update state and input field\n            setStateValue(transformedValue);\n            event.target.value = prefix + transformedValue;\n\n            // Pass only the user input (without prefix) to `onChange`\n            if (onChange) {\n                const syntheticEvent = {\n                    ...event,\n                    target: { ...event.target, value: transformedValue },\n                };\n                onChange(\n                    syntheticEvent as React.ChangeEvent<HTMLTextAreaElement>\n                );\n            }\n        } else {\n            const transformedValue = transformValue\n                ? transformValue(newValue ?? \"\")\n                : newValue;\n\n            setStateValue(transformedValue);\n            event.target.value = transformedValue;\n            if (onChange) onChange(event);\n        }\n    };\n\n    const getDisplayValue = () => {\n        return prefix ? prefix + (stateValue ?? \"\") : stateValue;\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        if (!prefix) return;\n\n        const { selectionStart } = event.currentTarget;\n\n        // Prevent backspace in prefix\n        if (event.key === \"Backspace\" && selectionStart <= prefix.length) {\n            event.preventDefault();\n        }\n\n        // Prevent left arrow from moving into prefix\n        if (event.key === \"ArrowLeft\" && selectionStart <= prefix.length) {\n            event.preventDefault();\n        }\n\n        // Prevent \"Home\" key from moving cursor to beginning\n        if (event.key === \"Home\") {\n            event.preventDefault();\n            requestAnimationFrame(() => {\n                event.currentTarget.setSelectionRange(\n                    prefix.length,\n                    prefix.length\n                );\n            });\n        }\n    };\n\n    return (\n        <textarea\n            ref={ref}\n            disabled={disabled}\n            value={getDisplayValue()}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            readOnly={readOnly}\n            className={clsx(\n                styles.element,\n                (readOnly && styles.elementReadOnly) ||\n                    (disabled && styles.elementDisabled) ||\n                    (error && styles.elementError),\n                className\n            )}\n            rows={rows}\n            maxLength={\n                prefix && maxLength ? prefix.length + maxLength : maxLength\n            }\n            {...otherProps}\n        />\n    );\n};\n\nexport const TextareaBase = React.forwardRef(TextareaBaseComponent);\n\n// =============================================================================\n// MODULE COMPONENT (comes with the counter)\n// =============================================================================\n\nconst TextareaComponent = (\n    {\n        value,\n        disabled,\n        rows = 5,\n        onChange,\n        transformValue,\n        prefix,\n        maxLength,\n        renderCustomCounter,\n        ...otherProps\n    }: TextareaProps,\n    ref: TextareaRef\n) => {\n    // -------------------------------------------------------------------------\n    // CONST, STATE, REF\n    // -------------------------------------------------------------------------\n    const [stateValue, setStateValue] = useState<\n        string | number | readonly string[] | undefined\n    >(value);\n\n    // -------------------------------------------------------------------------\n    // EFFECTS\n    // -------------------------------------------------------------------------\n    useEffect(() => {\n        setStateValue(value);\n    }, [value]);\n\n    // -------------------------------------------------------------------------\n    // EVENT HANDLER\n    // -------------------------------------------------------------------------\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const newValue = event.target.value;\n        setStateValue(newValue);\n        if (onChange) onChange(event);\n    };\n\n    // -------------------------------------------------------------------------\n    // RENDER FUNCTIONS\n    // -------------------------------------------------------------------------\n    return (\n        <div className={styles.wrapper}>\n            <TextareaBase\n                ref={ref}\n                disabled={disabled}\n                value={stateValue}\n                rows={rows || 5}\n                onChange={handleChange}\n                prefix={prefix}\n                transformValue={transformValue}\n                maxLength={maxLength}\n                {...otherProps}\n            />\n            {maxLength && (\n                <TextareaCounter\n                    value={stateValue}\n                    maxLength={maxLength}\n                    renderCustomCounter={renderCustomCounter}\n                />\n            )}\n        </div>\n    );\n};\n\n// @catalog\n/**\n * A multi-line text input with an optional character counter and prefix.\n */\nexport const Textarea = React.forwardRef(TextareaComponent);\n"],"names":["TextareaBase","React","forwardRef","_a","ref","className","disabled","error","maxLength","onChange","prefix","readOnly","rows","transformValue","value","otherProps","__rest","stateValue","setStateValue","useState","useEffect","_jsx","Object","assign","event","newValue","target","startsWith","trimStart","length","selectionStart","preventDefault","userInput","slice","transformedValue","syntheticEvent","onKeyDown","currentTarget","key","requestAnimationFrame","setSelectionRange","clsx","styles.element","styles.elementReadOnly","styles.elementDisabled","styles.elementError","Textarea","renderCustomCounter","_jsxs","styles.wrapper","children","TextareaCounter"],"mappings":"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"}

package/input-textarea/textarea.styles.js

@@ -1,2 +1,2 @@
-import"./textarea.styles_22z4n3.css";const t="w1xqauhq",e="e10c6rk9",a="e1kovz0t",r="e9uwuyt",s="etmlvbn";export{e as element,r as elementDisabled,s as elementError,a as elementReadOnly,t as wrapper};
+import"./textarea.styles_q77m5x.css";const t="w1xqauhq",e="e10c6rk9",a="e1kovz0t",r="e9uwuyt",s="etmlvbn";export{e as element,r as elementDisabled,s as elementError,a as elementReadOnly,t as wrapper};
 //# sourceMappingURL=textarea.styles.js.map

package/input-textarea/textarea.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.styles.js","sources":["../../src/input-textarea/textarea.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const wrapper = css`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const element = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour.bg};\n    outline: none;\n    overflow: auto;\n\n    display: block;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    width: 100%;\n\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    &:focus,\n    &:active {\n        outline-offset: -1px;\n        outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-focus\"]};\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n\nexport const elementReadOnly = css`\n    border-color: transparent;\n    background: transparent !important;\n    padding: ${Spacing[\"spacing-12\"]} 0;\n\n    &:focus,\n    &:active {\n        outline-color: ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const elementDisabled = css`\n    background: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n\n    &:focus,\n    &:active {\n        outline-color: ${Colour[\"border-disabled\"]};\n    }\n`;\n\nexport const elementError = css`\n    border-color: ${Colour[\"border-error\"]};\n\n    &:focus,\n    &:active {\n        outline-color: ${Colour[\"border-error-focus\"]};\n    }\n`;\n"],"names":["wrapper","element","elementReadOnly","elementDisabled","elementError"],"mappings":"mEAIO,MAAMA,EAAO,WAKPC,EAAO,WA0CPC,EAAe,WAWfC,EAAe,UAUfC,EAAY"}
+{"version":3,"file":"textarea.styles.js","sources":["../../src/input-textarea/textarea.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const wrapper = css`\n    display: flex;\n    flex-direction: column;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const element = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour.bg};\n    outline: none;\n    overflow: auto;\n\n    display: block;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    width: 100%;\n\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    &:focus,\n    &:active {\n        outline-offset: -1px;\n        outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-focus\"]};\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n\nexport const elementReadOnly = css`\n    border-color: transparent;\n    background: transparent !important;\n    padding: ${Spacing[\"spacing-12\"]} 0;\n\n    &:focus,\n    &:active {\n        outline-color: ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const elementDisabled = css`\n    background: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n\n    &:focus,\n    &:active {\n        outline-color: ${Colour[\"border-disabled\"]};\n    }\n`;\n\nexport const elementError = css`\n    border-color: ${Colour[\"border-error\"]};\n\n    &:focus,\n    &:active {\n        outline-color: ${Colour[\"border-error-focus\"]};\n    }\n`;\n"],"names":["wrapper","element","elementReadOnly","elementDisabled","elementError"],"mappings":"mEAIO,MAAMA,EAAO,WAMPC,EAAO,WA0CPC,EAAe,WAWfC,EAAe,UAUfC,EAAY"}

package/input-textarea/{textarea.styles_22z4n3.css → textarea.styles_q77m5x.css}

@@ -1,4 +1,4 @@
-@layer fds{.w1xqauhq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+@layer fds{.w1xqauhq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--fds-spacing-8);}
 .e10c6rk9{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);outline:none;overflow:auto;display:block;padding:var(--fds-spacing-12) var(--fds-spacing-16);width:100%;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}.e10c6rk9:focus,.e10c6rk9:active{outline-offset:-1px;outline:var(--fds-border-width-020) var(--fds-border-style-solid) var(--fds-colour-border-focus);}.e10c6rk9::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::-webkit-scrollbar{width:14px;}.e10c6rk9::-webkit-scrollbar-track{background:transparent;}.e10c6rk9::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}.e10c6rk9::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::-moz-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9:-ms-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::placeholder{color:var(--fds-colour-text-subtler);}
 .e1kovz0t{border-color:transparent;background:transparent!important;padding:var(--fds-spacing-12) 0;}.e1kovz0t:focus,.e1kovz0t:active{outline-color:var(--fds-colour-border-focus);}
 .e9uwuyt{background:var(--fds-colour-bg-disabled);cursor:not-allowed;}.e9uwuyt:focus,.e9uwuyt:active{outline-color:var(--fds-colour-border-disabled);}

package/input-textarea/types.d.ts

@@ -1,11 +1,34 @@
 import type React from "react";
+/**
+ * Props for the `Textarea` component.
+ */
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Renders the input in an error state. */
     error?: boolean | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * Transforms user input on every change event.
+     */
     transformValue?: ((value: string) => string) | undefined;
+    /**
+     * A read-only string permanently displayed at the start of the textarea.
+     */
     prefix?: string | undefined;
+    /**
+     * Replaces the built-in character counter displayed below the textarea.
+     * Called only when `maxLength` is provided.
+     *
+     * @param maxLength The maximum number of user-input characters allowed.
+     * @param currentValueLength The current length of the user's input.
+     */
     renderCustomCounter?: ((maxLength: number, currentValueLength: number) => JSX.Element) | undefined;
 }
-/** To be exposed for Form component inheritance */
+/**
+ * A subset of `TextareaProps` used by form components that manage
+ * the `error` state themselves.
+ */
 export type TextareaPartialProps = Omit<TextareaProps, "error">;
+/**
+ * Ref type for programmatic access to the underlying `HTMLTextAreaElement`.
+ */
 export type TextareaRef = React.Ref<HTMLTextAreaElement>;

package/language-switcher/language-switcher.d.ts

@@ -1,2 +1,8 @@
 import type { LanguageSwitcherProps } from "./types";
+/**
+ * A locale-switching control that lets users change the active display language.
+ *
+ * Use `LanguageSwitcher` to surface supported languages as either
+ * a compact dropdown or a set of inline links.
+ */
 export declare const LanguageSwitcher: ({ variant, selectedLanguage, onSelectLanguage, "data-testid": testId, ...otherProps }: LanguageSwitcherProps) => JSX.Element;

package/language-switcher/language-switcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"language-switcher.js","sources":["../../src/language-switcher/language-switcher.tsx"],"sourcesContent":["import { announce } from \"@react-aria/live-announcer\";\n\nimport { LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport { DropdownVariant } from \"./dropdown-variant\";\nimport { LinkContainerVariant } from \"./link-container-variant\";\nimport type { LanguageSwitcherCode, LanguageSwitcherProps } from \"./types\";\n\nexport const LanguageSwitcher = ({\n    variant = \"dropdown\",\n    selectedLanguage = \"en\",\n    onSelectLanguage,\n    \"data-testid\": testId = \"language-switcher\",\n    ...otherProps\n}: LanguageSwitcherProps): JSX.Element => {\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSelectLanguage = (code: LanguageSwitcherCode) => {\n        if (code !== selectedLanguage && onSelectLanguage) {\n            onSelectLanguage(code);\n            announce(`${LANGUAGE_DISPLAY_MAP[code]} selected`, \"polite\");\n        }\n    };\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    switch (variant) {\n        case \"dropdown\":\n            return (\n                <DropdownVariant\n                    selectedLanguage={selectedLanguage}\n                    onSelectLanguage={handleSelectLanguage}\n                    testId={testId}\n                    {...otherProps}\n                />\n            );\n        case \"link-container\":\n            return (\n                <LinkContainerVariant\n                    selectedLanguage={selectedLanguage}\n                    onSelectLanguage={handleSelectLanguage}\n                    testId={testId}\n                    {...otherProps}\n                />\n            );\n    }\n};\n"],"names":["LanguageSwitcher","_a","variant","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","handleSelectLanguage","code","announce","LANGUAGE_DISPLAY_MAP","_jsx","DropdownVariant","LinkContainerVariant"],"mappings":"yTAOO,MAAMA,EAAoBC,QAAAC,QAC7BA,EAAU,WAAUC,iBACpBA,EAAmB,KAAIC,iBACvBA,EACA,cAAeC,EAAS,qBAAmBJ,EACxCK,EAAUC,EAAAN,EALgB,iEAU7B,MAAMO,EAAwBC,IACtBA,IAASN,GAAoBC,IAC7BA,EAAiBK,GACjBC,EAAS,GAAGC,EAAqBF,cAAkB,UACvD,EAMJ,OAAQP,GACJ,IAAK,WACD,OACIU,EAACC,iBACGV,iBAAkBA,EAClBC,iBAAkBI,EAClBH,OAAQA,GACJC,IAGhB,IAAK,iBACD,OACIM,EAACE,iBACGX,iBAAkBA,EAClBC,iBAAkBI,EAClBH,OAAQA,GACJC"}
+{"version":3,"file":"language-switcher.js","sources":["../../src/language-switcher/language-switcher.tsx"],"sourcesContent":["import { announce } from \"@react-aria/live-announcer\";\n\nimport { LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport { DropdownVariant } from \"./dropdown-variant\";\nimport { LinkContainerVariant } from \"./link-container-variant\";\nimport type { LanguageSwitcherCode, LanguageSwitcherProps } from \"./types\";\n\n// @catalog\n/**\n * A locale-switching control that lets users change the active display language.\n *\n * Use `LanguageSwitcher` to surface supported languages as either\n * a compact dropdown or a set of inline links.\n */\nexport const LanguageSwitcher = ({\n    variant = \"dropdown\",\n    selectedLanguage = \"en\",\n    onSelectLanguage,\n    \"data-testid\": testId = \"language-switcher\",\n    ...otherProps\n}: LanguageSwitcherProps): JSX.Element => {\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSelectLanguage = (code: LanguageSwitcherCode) => {\n        if (code !== selectedLanguage && onSelectLanguage) {\n            onSelectLanguage(code);\n            announce(`${LANGUAGE_DISPLAY_MAP[code]} selected`, \"polite\");\n        }\n    };\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    switch (variant) {\n        case \"dropdown\":\n            return (\n                <DropdownVariant\n                    selectedLanguage={selectedLanguage}\n                    onSelectLanguage={handleSelectLanguage}\n                    testId={testId}\n                    {...otherProps}\n                />\n            );\n        case \"link-container\":\n            return (\n                <LinkContainerVariant\n                    selectedLanguage={selectedLanguage}\n                    onSelectLanguage={handleSelectLanguage}\n                    testId={testId}\n                    {...otherProps}\n                />\n            );\n    }\n};\n"],"names":["LanguageSwitcher","_a","variant","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","handleSelectLanguage","code","announce","LANGUAGE_DISPLAY_MAP","_jsx","DropdownVariant","LinkContainerVariant"],"mappings":"yTAcO,MAAMA,EAAoBC,QAAAC,QAC7BA,EAAU,WAAUC,iBACpBA,EAAmB,KAAIC,iBACvBA,EACA,cAAeC,EAAS,qBAAmBJ,EACxCK,EAAUC,EAAAN,EALgB,iEAU7B,MAAMO,EAAwBC,IACtBA,IAASN,GAAoBC,IAC7BA,EAAiBK,GACjBC,EAAS,GAAGC,EAAqBF,cAAkB,UACvD,EAMJ,OAAQP,GACJ,IAAK,WACD,OACIU,EAACC,iBACGV,iBAAkBA,EAClBC,iBAAkBI,EAClBH,OAAQA,GACJC,IAGhB,IAAK,iBACD,OACIM,EAACE,iBACGX,iBAAkBA,EAClBC,iBAAkBI,EAClBH,OAAQA,GACJC"}

package/language-switcher/types.d.ts

@@ -1,9 +1,32 @@
 import type React from "react";
+/** Code identifying a supported display language. */
 export type LanguageSwitcherCode = "en" | "zh" | "ms" | "ta";
+/**
+ * Presentation mode for the language switcher control.
+ *
+ * - `"dropdown"` renders a compact select control.
+ * - `"link-container"` renders languages as inline links.
+ */
 export type LanguageSwitcherVariant = "dropdown" | "link-container";
+/** Props for the `LanguageSwitcher` component. */
 export interface LanguageSwitcherProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Presentation mode.
+     *
+     * @default "dropdown"
+     */
     variant?: LanguageSwitcherVariant | undefined;
+    /**
+     * The currently active language code.
+     *
+     * @default "en"
+     */
     selectedLanguage?: LanguageSwitcherCode | undefined;
+    /**
+     * Called when the user selects a language different from `selectedLanguage`.
+     *
+     * @param language The newly selected language code.
+     */
     onSelectLanguage?: ((language: LanguageSwitcherCode) => void) | undefined;
     "data-testid"?: string | undefined;
 }

package/layout/index.d.ts

@@ -1,7 +1,21 @@
+/**
+ * A set of structural layout primitives for composing page regions.
+ *
+ * Use `Layout` sub-components to establish full-width page sections, centred
+ * content areas, and responsive grid columns. Sub-components:
+ * - `Layout.ColDiv` — a `<div>` that occupies a responsive column span within a grid `Container`.
+ * - `Layout.Container` — a flex or grid layout wrapper constrained to the content width.
+ * - `Layout.Content` — the primary content block, composes of `Section` + `Container`. Use `Section` and `Container` directly for more granular control.
+ * - `Layout.Section` — a full-width semantic `<section>` page region.
+ */
 export declare const Layout: {
+    /** Renders a `<div>` that occupies a responsive column span within a grid `Container`. */
+    ColDiv: (props: import("./types").ColDivProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    /** Renders a flex or grid layout wrapper constrained to the content width. */
     Container: (props: import("./types").ContainerProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    Section: (props: import("./types").SectionProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    /** The primary content block — composes a `Section` with an inner `Container`. */
     Content: (props: import("./types").ContentProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    ColDiv: (props: import("./types").ColDivProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    /** Renders a full-width semantic `<section>` page region. */
+    Section: (props: import("./types").SectionProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
 };
 export * from "./types";

package/layout/index.js

@@ -1,2 +1,2 @@
-import{ColDiv as o}from"./col-div.js";import{Container as t}from"./container.js";import{Content as n}from"./content.js";import{Section as r}from"./section.js";const i={Container:t,Section:r,Content:n,ColDiv:o};export{i as Layout};
+import{ColDiv as o}from"./col-div.js";import{Container as t}from"./container.js";import{Content as n}from"./content.js";import{Section as r}from"./section.js";const i={ColDiv:o,Container:t,Content:n,Section:r};export{i as Layout};
 //# sourceMappingURL=index.js.map

package/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/layout/index.ts"],"sourcesContent":["import { ColDiv } from \"./col-div\";\nimport { Container } from \"./container\";\nimport { Content } from \"./content\";\nimport { Section } from \"./section\";\n\nexport const Layout = {\n    Container,\n    Section,\n    Content,\n    ColDiv,\n};\n\nexport * from \"./types\";\n"],"names":["Layout","Container","Section","Content","ColDiv"],"mappings":"+JAKO,MAAMA,EAAS,CAClBC,YACAC,UACAC,UACAC"}
+{"version":3,"file":"index.js","sources":["../../src/layout/index.ts"],"sourcesContent":["import { ColDiv } from \"./col-div\";\nimport { Container } from \"./container\";\nimport { Content } from \"./content\";\nimport { Section } from \"./section\";\n\n// @catalog\n/**\n * A set of structural layout primitives for composing page regions.\n *\n * Use `Layout` sub-components to establish full-width page sections, centred\n * content areas, and responsive grid columns. Sub-components:\n * - `Layout.ColDiv` — a `<div>` that occupies a responsive column span within a grid `Container`.\n * - `Layout.Container` — a flex or grid layout wrapper constrained to the content width.\n * - `Layout.Content` — the primary content block, composes of `Section` + `Container`. Use `Section` and `Container` directly for more granular control.\n * - `Layout.Section` — a full-width semantic `<section>` page region.\n */\nexport const Layout = {\n    /** Renders a `<div>` that occupies a responsive column span within a grid `Container`. */\n    ColDiv,\n    /** Renders a flex or grid layout wrapper constrained to the content width. */\n    Container,\n    /** The primary content block — composes a `Section` with an inner `Container`. */\n    Content,\n    /** Renders a full-width semantic `<section>` page region. */\n    Section,\n};\n\nexport * from \"./types\";\n"],"names":["Layout","ColDiv","Container","Content","Section"],"mappings":"+JAgBO,MAAMA,EAAS,CAElBC,SAEAC,YAEAC,UAEAC"}

package/layout/types.d.ts

@@ -1,31 +1,89 @@
+/**
+ * Common props shared by all layout components.
+ */
 interface CommonLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     "data-testid"?: string | undefined;
+    /**
+     * Stretches the element to fill its container's full width.
+     *
+     * @default false
+     */
     stretch?: boolean | undefined;
 }
+/** Layout display mode applied to a `Container` or `Content`. */
 export type ContainerType = "flex" | "flex-column" | "grid";
+/**
+ * Props for the `Layout.Container` sub-component.
+ */
 export interface ContainerProps extends CommonLayoutProps {
-    /** The type of display style. Values: "flex" | "flex-column" | "grid" */
+    /**
+     * Display mode applied to the container.
+     *
+     * @default "flex"
+     */
     type?: ContainerType | undefined;
 }
+/**
+ * Props for the `Layout.Section` sub-component.
+ */
 export interface SectionProps extends CommonLayoutProps {
 }
+/**
+ * Props for the `Layout.Content` sub-component.
+ */
 export interface ContentProps extends ContainerProps {
 }
+/**
+ * Column span value for a `ColDiv` at a given breakpoint.
+ *
+ * - A `number` specifies the number of columns to span.
+ * - A `[start, end]` tuple specifies the start and end column lines. Use `-1`
+ *   as the end value to span to the last column line of the grid.
+ */
 export type ColSpan = number | [number, number] | undefined;
+/**
+ * Responsive column placement props.
+ *
+ * Each prop controls the column span at the corresponding breakpoint. When a
+ * breakpoint prop is omitted, it falls back to the next smaller breakpoint's
+ * value (xxl → xl → lg → md → sm → xs → xxs).
+ */
 export interface ColProps {
     /**
-     * Specifies the number of columns to be spanned across for any breakpoint.
-     * If an array is specified, the format is [startCol, endCol].
+     * Column span at the `xxl` breakpoint.
      */
     xxlCols?: ColSpan;
+    /**
+     * Column span at the `xl` breakpoint.
+     */
     xlCols?: ColSpan;
+    /**
+     * Column span at the `lg` breakpoint.
+     */
     lgCols?: ColSpan;
+    /**
+     * Column span at the `md` breakpoint.
+     */
     mdCols?: ColSpan;
+    /**
+     * Column span at the `sm` breakpoint.
+     */
     smCols?: ColSpan;
+    /**
+     * Column span at the `xs` breakpoint.
+     */
     xsCols?: ColSpan;
+    /**
+     * Column span at the `xxs` (smallest) breakpoint.
+     * Acts as the base value. All larger breakpoints fall back to this when
+     * their own prop is not set.
+     */
     xxsCols?: ColSpan;
 }
+/**
+ * Props for the `Layout.ColDiv` sub-component.
+ */
 export interface ColDivProps extends React.HTMLAttributes<HTMLDivElement>, ColProps {
     "data-testid"?: string;
 }

package/link-list/components/common.d.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { LinkListItemProps, LinkListStyle } from "../internal-types";
+import type { LinkListItemProps, LinkListStyle } from "../types";
 type LinkListItemsProps<T> = {
     "data-testid"?: string | undefined;
     items: LinkListItemProps<T>[];

package/link-list/components/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sources":["../../../src/link-list/components/common.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport type { LinkListItemProps, LinkListStyle } from \"../internal-types\";\nimport * as styles from \"../link-list.styles\";\n\ntype LinkListItemsProps<T> = {\n    \"data-testid\"?: string | undefined;\n    items: LinkListItemProps<T>[];\n    handleItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => void;\n    style?: LinkListStyle | undefined;\n};\nexport const LinkListItems = <T,>({\n    \"data-testid\": testId,\n    items,\n    handleItemClick,\n    style,\n}: LinkListItemsProps<T>) => {\n    const ItemTitle =\n        style === \"small\" ? Typography.HeadingXS : Typography.HeadingSM;\n    const itemTitleClassName =\n        style === \"small\" ? styles.itemTitleSmall : styles.itemTitleDefault;\n\n    return (\n        <>\n            {items.map((item, index) => {\n                const {\n                    title,\n                    description,\n                    secondaryDescription,\n                    onClick: _onClick, // deconstruct since we are handling it\n                    className,\n                    ...otherProps\n                } = item;\n\n                return (\n                    <a\n                        key={`${testId}-${index}`}\n                        data-testid={`${testId}-${index}`}\n                        onClick={(event) => handleItemClick(event, item)}\n                        {...otherProps}\n                        className={clsx(styles.itemContainer, className)}\n                    >\n                        <div className={styles.itemContentContainer}>\n                            <ItemTitle\n                                as=\"div\"\n                                data-testid={`link-title-${index}`}\n                                weight=\"semibold\"\n                                className={itemTitleClassName}\n                            >\n                                {title}\n                            </ItemTitle>\n                            {description && (\n                                <Typography.BodyMD\n                                    data-testid={`link-description-${index}`}\n                                    className={styles.itemDescription}\n                                >\n                                    {description}\n                                </Typography.BodyMD>\n                            )}\n                            {secondaryDescription}\n                        </div>\n                        <ChevronRightIcon\n                            aria-hidden\n                            className={styles.itemIcon}\n                        />\n                    </a>\n                );\n            })}\n        </>\n    );\n};\n"],"names":["LinkListItems","testId","items","handleItemClick","style","ItemTitle","Typography","HeadingXS","HeadingSM","itemTitleClassName","styles.itemTitleSmall","styles.itemTitleDefault","_jsx","_Fragment","children","map","item","index","title","description","secondaryDescription","onClick","_onClick","className","otherProps","_jsxs","event","clsx","styles.itemContainer","styles.itemContentContainer","as","weight","BodyMD","styles.itemDescription","ChevronRightIcon","styles.itemIcon"],"mappings":"gaAiBO,MAAMA,EAAgB,EACzB,cAAeC,EACfC,QACAC,kBACAC,YAEA,MAAMC,EACQ,UAAVD,EAAoBE,EAAWC,UAAYD,EAAWE,UACpDC,EACQ,UAAVL,EAAoBM,EAAwBC,EAEhD,OACIC,EAAAC,EAAA,CAAAC,SACKZ,EAAMa,KAAI,CAACC,EAAMC,KACd,MAAMC,MACFA,EAAKC,YACLA,EAAWC,qBACXA,EACAC,QAASC,EAAQC,UACjBA,GAEAP,EADGQ,IACHR,EAPE,CAAA,QAAA,cAAA,uBAAA,UAAA,cASN,OACIS,mCAEiB,GAAGxB,KAAUgB,IAC1BI,QAAUK,GAAUvB,EAAgBuB,EAAOV,IACvCQ,EAAU,CACdD,UAAWI,EAAKC,EAAsBL,GAAUT,SAAA,CAEhDW,EAAA,MAAA,CAAKF,UAAWM,EAA2Bf,SAAA,CACvCF,EAACP,EAAS,CACNyB,GAAG,MAAK,cACK,cAAcb,IAC3Bc,OAAO,WACPR,UAAWd,EAAkBK,SAE5BI,IAEJC,GACGP,EAACN,EAAW0B,OAAM,CAAA,cACD,oBAAoBf,IACjCM,UAAWU,EAAsBnB,SAEhCK,IAGRC,KAELR,EAACsB,EAAgB,CAAA,eAAA,EAEbX,UAAWY,OA3BV,GAAGlC,KAAUgB,IA6BlB,KAGb"}
+{"version":3,"file":"common.js","sources":["../../../src/link-list/components/common.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport * as styles from \"../link-list.styles\";\nimport type { LinkListItemProps, LinkListStyle } from \"../types\";\n\ntype LinkListItemsProps<T> = {\n    \"data-testid\"?: string | undefined;\n    items: LinkListItemProps<T>[];\n    handleItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => void;\n    style?: LinkListStyle | undefined;\n};\nexport const LinkListItems = <T,>({\n    \"data-testid\": testId,\n    items,\n    handleItemClick,\n    style,\n}: LinkListItemsProps<T>) => {\n    const ItemTitle =\n        style === \"small\" ? Typography.HeadingXS : Typography.HeadingSM;\n    const itemTitleClassName =\n        style === \"small\" ? styles.itemTitleSmall : styles.itemTitleDefault;\n\n    return (\n        <>\n            {items.map((item, index) => {\n                const {\n                    title,\n                    description,\n                    secondaryDescription,\n                    onClick: _onClick, // deconstruct since we are handling it\n                    className,\n                    ...otherProps\n                } = item;\n\n                return (\n                    <a\n                        key={`${testId}-${index}`}\n                        data-testid={`${testId}-${index}`}\n                        onClick={(event) => handleItemClick(event, item)}\n                        {...otherProps}\n                        className={clsx(styles.itemContainer, className)}\n                    >\n                        <div className={styles.itemContentContainer}>\n                            <ItemTitle\n                                as=\"div\"\n                                data-testid={`link-title-${index}`}\n                                weight=\"semibold\"\n                                className={itemTitleClassName}\n                            >\n                                {title}\n                            </ItemTitle>\n                            {description && (\n                                <Typography.BodyMD\n                                    data-testid={`link-description-${index}`}\n                                    className={styles.itemDescription}\n                                >\n                                    {description}\n                                </Typography.BodyMD>\n                            )}\n                            {secondaryDescription}\n                        </div>\n                        <ChevronRightIcon\n                            aria-hidden\n                            className={styles.itemIcon}\n                        />\n                    </a>\n                );\n            })}\n        </>\n    );\n};\n"],"names":["LinkListItems","testId","items","handleItemClick","style","ItemTitle","Typography","HeadingXS","HeadingSM","itemTitleClassName","styles.itemTitleSmall","styles.itemTitleDefault","_jsx","_Fragment","children","map","item","index","title","description","secondaryDescription","onClick","_onClick","className","otherProps","_jsxs","event","clsx","styles.itemContainer","styles.itemContentContainer","as","weight","BodyMD","styles.itemDescription","ChevronRightIcon","styles.itemIcon"],"mappings":"gaAiBO,MAAMA,EAAgB,EACzB,cAAeC,EACfC,QACAC,kBACAC,YAEA,MAAMC,EACQ,UAAVD,EAAoBE,EAAWC,UAAYD,EAAWE,UACpDC,EACQ,UAAVL,EAAoBM,EAAwBC,EAEhD,OACIC,EAAAC,EAAA,CAAAC,SACKZ,EAAMa,KAAI,CAACC,EAAMC,KACd,MAAMC,MACFA,EAAKC,YACLA,EAAWC,qBACXA,EACAC,QAASC,EAAQC,UACjBA,GAEAP,EADGQ,IACHR,EAPE,CAAA,QAAA,cAAA,uBAAA,UAAA,cASN,OACIS,mCAEiB,GAAGxB,KAAUgB,IAC1BI,QAAUK,GAAUvB,EAAgBuB,EAAOV,IACvCQ,EAAU,CACdD,UAAWI,EAAKC,EAAsBL,GAAUT,SAAA,CAEhDW,EAAA,MAAA,CAAKF,UAAWM,EAA2Bf,SAAA,CACvCF,EAACP,EAAS,CACNyB,GAAG,MAAK,cACK,cAAcb,IAC3Bc,OAAO,WACPR,UAAWd,EAAkBK,SAE5BI,IAEJC,GACGP,EAACN,EAAW0B,OAAM,CAAA,cACD,oBAAoBf,IACjCM,UAAWU,EAAsBnB,SAEhCK,IAGRC,KAELR,EAACsB,EAAgB,CAAA,eAAA,EAEbX,UAAWY,OA3BV,GAAGlC,KAAUgB,IA6BlB,KAGb"}

package/link-list/components/link-list-eager.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps, LinkListEagerProps } from "../internal-types";
-type Props<T> = Omit<BaseProps<T>, "className" | "data-testid"> & Omit<LinkListEagerProps, "loadMode">;
+import type { LinkListBaseProps, LinkListEagerProps } from "../types";
+type Props<T> = Omit<LinkListBaseProps<T>, "className" | "data-testid"> & Omit<LinkListEagerProps, "loadMode">;
 export declare const EagerLinkList: <T>({ items, maxShown, style, onItemClick, customLabels, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/link-list/components/link-list-eager.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-list-eager.js","sources":["../../../src/link-list/components/link-list-eager.tsx"],"sourcesContent":["import { MinusIcon } from \"@lifesg/react-icons/minus\";\nimport { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../../shared/accessibility\";\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport type {\n    BaseProps,\n    LinkListEagerProps,\n    LinkListItemProps,\n} from \"../internal-types\";\nimport * as styles from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<BaseProps<T>, \"className\" | \"data-testid\"> &\n    Omit<LinkListEagerProps, \"loadMode\">;\nexport const EagerLinkList = <T,>({\n    items,\n    maxShown,\n    style,\n    onItemClick,\n    customLabels,\n}: Props<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [showMinimised, setShowMinimised] = useState<boolean>(\n        maxShown ? maxShown >= items.length : true\n    );\n\n    const itemsMinimised = maxShown ? items.slice(maxShown) : [];\n\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n\n    const id = useId();\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => {\n        /**\n         * Individual item's onClick will override\n         * the onItemClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item, event);\n        }\n\n        // Do nothing and let default event happen\n    };\n\n    const handleToggleButtonClick = () => {\n        setShowMinimised(!showMinimised);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderToggle = () => (\n        <button\n            type=\"button\"\n            onClick={handleToggleButtonClick}\n            data-testid=\"toggle-button\"\n            aria-expanded={showMinimised}\n            aria-controls={id}\n            className={styles.toggleButton}\n        >\n            <Typography.BodyMD\n                as=\"span\"\n                weight=\"semibold\"\n                data-testid=\"toggle-button-label\"\n                className={styles.toggleButtonLabel}\n            >\n                {showMinimised\n                    ? customLabels?.viewLess || \"View less\"\n                    : customLabels?.viewMore || \"View more\"}\n            </Typography.BodyMD>\n            {showMinimised ? (\n                <MinusIcon aria-hidden className={styles.toggleButtonIcon} />\n            ) : (\n                <PlusIcon aria-hidden className={styles.toggleButtonIcon} />\n            )}\n        </button>\n    );\n\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showMinimised ? resizeDetector.height : 0,\n    });\n\n    return (\n        <>\n            <LinkListItems\n                data-testid=\"link-list-items-shown\"\n                items={maxShown ? items.slice(0, maxShown) : items}\n                handleItemClick={handleListItemClick}\n                style={style}\n            />\n            {itemsMinimised.length > 0 && (\n                <animated.div\n                    id={id}\n                    style={expandableStyles}\n                    data-testid=\"minimised-content\"\n                    inert={inertValue(!showMinimised)}\n                    className={styles.expandable}\n                >\n                    <div ref={childRef} className={styles.expandableList}>\n                        <LinkListItems\n                            data-testid=\"link-list-items-minimised\"\n                            style={style}\n                            items={itemsMinimised}\n                            handleItemClick={handleListItemClick}\n                        />\n                    </div>\n                </animated.div>\n            )}\n            {itemsMinimised.length > 0 && renderToggle()}\n        </>\n    );\n};\n"],"names":["EagerLinkList","items","maxShown","style","onItemClick","customLabels","showMinimised","setShowMinimised","useState","length","itemsMinimised","slice","resizeDetector","useResizeDetector","childRef","ref","id","useId","handleListItemClick","event","item","onClick","preventDefault","handleToggleButtonClick","expandableStyles","useSpring","height","_jsxs","_Fragment","children","_jsx","LinkListItems","handleItemClick","animated","div","inert","inertValue","className","styles.expandable","styles.expandableList","type","styles.toggleButton","Typography","BodyMD","as","weight","styles.toggleButtonLabel","viewLess","viewMore","MinusIcon","PlusIcon","styles.toggleButtonIcon"],"mappings":"+1BAoBO,MAAMA,EAAgB,EACzBC,QACAC,WACAC,QACAC,cACAC,mBAKA,MAAOC,EAAeC,GAAoBC,GACtCN,GAAWA,GAAYD,EAAMQ,QAG3BC,EAAiBR,EAAWD,EAAMU,MAAMT,GAAY,GAEpDU,EAAiBC,IACjBC,EAAWF,EAAeG,IAE1BC,EAAKC,IAKLC,EAAsB,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNf,IACPe,EAAMG,iBACNlB,EAAYgB,EAAMD,GACtB,EAKEI,EAA0B,KAC5BhB,GAAkBD,EAAc,EAkC9BkB,EAAmBC,EAAU,CAC/BC,OAAQpB,EAAgBM,EAAec,OAAS,IAGpD,OACIC,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACC,EAAa,CAAA,cACE,wBACZ9B,MAAOC,EAAWD,EAAMU,MAAM,EAAGT,GAAYD,EAC7C+B,gBAAiBd,EACjBf,MAAOA,IAEVO,EAAeD,OAAS,GACrBqB,EAACG,EAASC,IAAG,CACTlB,GAAIA,EACJb,MAAOqB,EAAgB,cACX,oBACZW,MAAOC,GAAY9B,GACnB+B,UAAWC,WAEXR,EAAA,MAAA,CAAKf,IAAKD,EAAUuB,UAAWE,EAAqBV,SAChDC,EAACC,EAAa,CAAA,cACE,4BACZ5B,MAAOA,EACPF,MAAOS,EACPsB,gBAAiBd,QAKhCR,EAAeD,OAAS,GAzD7BkB,EAAA,SAAA,CACIa,KAAK,SACLnB,QAASE,gBACG,gBAAe,gBACZjB,EAAa,gBACbU,EACfqB,UAAWI,EAAmBZ,SAAA,CAE9BC,EAACY,EAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBACZR,UAAWS,EAAwBjB,SAElCvB,GACKD,eAAAA,EAAc0C,WAAY,aAC1B1C,aAAY,EAAZA,EAAc2C,WAAY,cAGhClB,EADHxB,EACI2C,EAEAC,EAFS,CAAA,eAAA,EAAab,UAAWc,SAuCvC"}
+{"version":3,"file":"link-list-eager.js","sources":["../../../src/link-list/components/link-list-eager.tsx"],"sourcesContent":["import { MinusIcon } from \"@lifesg/react-icons/minus\";\nimport { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../../shared/accessibility\";\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport * as styles from \"../link-list.styles\";\nimport type {\n    LinkListBaseProps,\n    LinkListEagerProps,\n    LinkListItemProps,\n} from \"../types\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<LinkListBaseProps<T>, \"className\" | \"data-testid\"> &\n    Omit<LinkListEagerProps, \"loadMode\">;\nexport const EagerLinkList = <T,>({\n    items,\n    maxShown,\n    style,\n    onItemClick,\n    customLabels,\n}: Props<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [showMinimised, setShowMinimised] = useState<boolean>(\n        maxShown ? maxShown >= items.length : true\n    );\n\n    const itemsMinimised = maxShown ? items.slice(maxShown) : [];\n\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n\n    const id = useId();\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => {\n        /**\n         * Individual item's onClick will override\n         * the onItemClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item, event);\n        }\n\n        // Do nothing and let default event happen\n    };\n\n    const handleToggleButtonClick = () => {\n        setShowMinimised(!showMinimised);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderToggle = () => (\n        <button\n            type=\"button\"\n            onClick={handleToggleButtonClick}\n            data-testid=\"toggle-button\"\n            aria-expanded={showMinimised}\n            aria-controls={id}\n            className={styles.toggleButton}\n        >\n            <Typography.BodyMD\n                as=\"span\"\n                weight=\"semibold\"\n                data-testid=\"toggle-button-label\"\n                className={styles.toggleButtonLabel}\n            >\n                {showMinimised\n                    ? customLabels?.viewLess || \"View less\"\n                    : customLabels?.viewMore || \"View more\"}\n            </Typography.BodyMD>\n            {showMinimised ? (\n                <MinusIcon aria-hidden className={styles.toggleButtonIcon} />\n            ) : (\n                <PlusIcon aria-hidden className={styles.toggleButtonIcon} />\n            )}\n        </button>\n    );\n\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showMinimised ? resizeDetector.height : 0,\n    });\n\n    return (\n        <>\n            <LinkListItems\n                data-testid=\"link-list-items-shown\"\n                items={maxShown ? items.slice(0, maxShown) : items}\n                handleItemClick={handleListItemClick}\n                style={style}\n            />\n            {itemsMinimised.length > 0 && (\n                <animated.div\n                    id={id}\n                    style={expandableStyles}\n                    data-testid=\"minimised-content\"\n                    inert={inertValue(!showMinimised)}\n                    className={styles.expandable}\n                >\n                    <div ref={childRef} className={styles.expandableList}>\n                        <LinkListItems\n                            data-testid=\"link-list-items-minimised\"\n                            style={style}\n                            items={itemsMinimised}\n                            handleItemClick={handleListItemClick}\n                        />\n                    </div>\n                </animated.div>\n            )}\n            {itemsMinimised.length > 0 && renderToggle()}\n        </>\n    );\n};\n"],"names":["EagerLinkList","items","maxShown","style","onItemClick","customLabels","showMinimised","setShowMinimised","useState","length","itemsMinimised","slice","resizeDetector","useResizeDetector","childRef","ref","id","useId","handleListItemClick","event","item","onClick","preventDefault","handleToggleButtonClick","expandableStyles","useSpring","height","_jsxs","_Fragment","children","_jsx","LinkListItems","handleItemClick","animated","div","inert","inertValue","className","styles.expandable","styles.expandableList","type","styles.toggleButton","Typography","BodyMD","as","weight","styles.toggleButtonLabel","viewLess","viewMore","MinusIcon","PlusIcon","styles.toggleButtonIcon"],"mappings":"+1BAoBO,MAAMA,EAAgB,EACzBC,QACAC,WACAC,QACAC,cACAC,mBAKA,MAAOC,EAAeC,GAAoBC,GACtCN,GAAWA,GAAYD,EAAMQ,QAG3BC,EAAiBR,EAAWD,EAAMU,MAAMT,GAAY,GAEpDU,EAAiBC,IACjBC,EAAWF,EAAeG,IAE1BC,EAAKC,IAKLC,EAAsB,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNf,IACPe,EAAMG,iBACNlB,EAAYgB,EAAMD,GACtB,EAKEI,EAA0B,KAC5BhB,GAAkBD,EAAc,EAkC9BkB,EAAmBC,EAAU,CAC/BC,OAAQpB,EAAgBM,EAAec,OAAS,IAGpD,OACIC,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACC,EAAa,CAAA,cACE,wBACZ9B,MAAOC,EAAWD,EAAMU,MAAM,EAAGT,GAAYD,EAC7C+B,gBAAiBd,EACjBf,MAAOA,IAEVO,EAAeD,OAAS,GACrBqB,EAACG,EAASC,IAAG,CACTlB,GAAIA,EACJb,MAAOqB,EAAgB,cACX,oBACZW,MAAOC,GAAY9B,GACnB+B,UAAWC,WAEXR,EAAA,MAAA,CAAKf,IAAKD,EAAUuB,UAAWE,EAAqBV,SAChDC,EAACC,EAAa,CAAA,cACE,4BACZ5B,MAAOA,EACPF,MAAOS,EACPsB,gBAAiBd,QAKhCR,EAAeD,OAAS,GAzD7BkB,EAAA,SAAA,CACIa,KAAK,SACLnB,QAASE,gBACG,gBAAe,gBACZjB,EAAa,gBACbU,EACfqB,UAAWI,EAAmBZ,SAAA,CAE9BC,EAACY,EAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBACZR,UAAWS,EAAwBjB,SAElCvB,GACKD,eAAAA,EAAc0C,WAAY,aAC1B1C,aAAY,EAAZA,EAAc2C,WAAY,cAGhClB,EADHxB,EACI2C,EAEAC,EAFS,CAAA,eAAA,EAAab,UAAWc,SAuCvC"}

package/link-list/components/link-list-lazy.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps, LinkListLazyProps } from "../internal-types";
-type Props<T> = Omit<BaseProps<T>, "className" | "data-testid"> & Omit<LinkListLazyProps, "loadMode">;
+import type { LinkListBaseProps, LinkListLazyProps } from "../types";
+type Props<T> = Omit<LinkListBaseProps<T>, "className" | "data-testid"> & Omit<LinkListLazyProps, "loadMode">;
 export declare const LazyLinkList: <T>({ items, style, onItemClick, loadMore, onLoadMore, customLabels, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};