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

package/select-histogram/select-histogram.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-histogram.js","sources":["../../src/select-histogram/select-histogram.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HistogramSlider } from \"../histogram-slider\";\nimport {\n    DropdownListState,\n    ExpandableElement,\n} from \"../shared/dropdown-list-v2\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { LabelContainer } from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { SimpleIdGenerator } from \"../util\";\nimport {\n    HistogramSliderDropdownContainer,\n    Label,\n    PlaceholderLabel,\n    Separator,\n} from \"./select-histogram.styles\";\nimport type { SelectHistogramProps } from \"./types\";\n\nexport const SelectHistogram = ({\n    alignment = \"left\",\n    className,\n    disabled,\n    dropdownZIndex,\n    error,\n    histogramSlider,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    onBlur,\n    onChange,\n    onChangeEnd,\n    optionTruncationType = \"end\",\n    placeholder = \"Select\",\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    readOnly,\n    renderRangeLabel,\n    value,\n    dropdownRootNode,\n    ...otherProps\n}: SelectHistogramProps): JSX.Element => {\n    const {\n        interval,\n        bins = [],\n        renderEmptyView,\n        ariaLabels,\n    } = histogramSlider;\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const values = bins.map((item) => item.minValue);\n    const minValue = Math.min(...values);\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    const testId = otherProps[\"data-testid\"] || \"select-histogram\";\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = () => {\n        setShowOptions(true);\n    };\n\n    const handleClose = () => {\n        setShowOptions(false);\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n    };\n\n    const onSliderChange = (values: [number, number]) => {\n        setSelection(values);\n        onChange?.(values);\n    };\n\n    const onSliderChangeEnd = (values: [number, number]) => {\n        setSelection(values);\n        onChangeEnd?.(values);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSelector = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const getDisplayValue = () => {\n        return !values || values.length === 0 ? (\n            <PlaceholderLabel\n                $truncateType={optionTruncationType}\n                $variant=\"default\"\n            >\n                {placeholder}\n            </PlaceholderLabel>\n        ) : (\n            <Label>\n                {renderSelector(selection[0])}\n                <Separator>-</Separator>\n                {renderSelector(selection[1])}\n            </Label>\n        );\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer ref={labelContainerRef} $disabled={disabled}>\n            {getDisplayValue()}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"dialog\"\n                    readOnly={readOnly}\n                    variant=\"default\"\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = ({\n        elementWidth,\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <HistogramSliderDropdownContainer\n            style={{ ...styles, width: elementWidth }}\n            ref={setFloatingRef}\n            {...getFloatingProps()}\n        >\n            <HistogramSlider\n                interval={interval}\n                value={selection}\n                bins={bins}\n                onChange={onSliderChange}\n                onChangeEnd={onSliderChangeEnd}\n                showRangeLabels={false}\n                renderEmptyView={renderEmptyView}\n                ariaLabels={ariaLabels}\n            />\n        </HistogramSliderDropdownContainer>\n    );\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={showOptions}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["SelectHistogram","_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","SimpleIdGenerator","generate","nodeRef","useRef","selectorRef","labelContainerRef","testId","useEffect","onSliderChange","onSliderChangeEnd","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","renderSelector","_jsxs","Typography","BodyBL","children","_jsx","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","$focused","$disabled","$error","ExpandableElement","expanded","listboxId","popupRole","variant","LabelContainer","length","Label","Separator","PlaceholderLabel","$truncateType","$variant","renderDropdown","elementWidth","styles","setFloatingRef","getFloatingProps","HistogramSliderDropdownContainer","Object","assign","style","width","HistogramSlider","showRangeLabels","onOpen","onClose","onDismiss","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"select-histogram.js","sources":["../../src/select-histogram/select-histogram.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { HistogramSlider } from \"../histogram-slider\";\nimport { DropdownListState, ExpandableElement } from \"../shared/dropdown-list\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport * as dropdownWrapperStyles from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./select-histogram.styles\";\nimport type { SelectHistogramProps } from \"./types\";\n\nexport const SelectHistogram = ({\n    alignment = \"left\",\n    className,\n    disabled,\n    dropdownZIndex,\n    error,\n    histogramSlider,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    onBlur,\n    onChange,\n    onChangeEnd,\n    optionTruncationType = \"end\",\n    placeholder = \"Select\",\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    readOnly,\n    renderRangeLabel,\n    value,\n    dropdownRootNode,\n    ...otherProps\n}: SelectHistogramProps): JSX.Element => {\n    const {\n        interval,\n        bins = [],\n        renderEmptyView,\n        ariaLabels,\n    } = histogramSlider;\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const values = bins.map((item) => item.minValue);\n    const minValue = Math.min(...values);\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    const testId = otherProps[\"data-testid\"] || \"select-histogram\";\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = () => {\n        setShowOptions(true);\n    };\n\n    const handleClose = () => {\n        setShowOptions(false);\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n    };\n\n    const onSliderChange = (values: [number, number]) => {\n        setSelection(values);\n        onChange?.(values);\n    };\n\n    const onSliderChangeEnd = (values: [number, number]) => {\n        setSelection(values);\n        onChangeEnd?.(values);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSelector = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const getDisplayValue = () => {\n        return !values || values.length === 0 ? (\n            <div\n                className={clsx(\n                    styles.placeholderLabel,\n                    optionTruncationType !== \"middle\" &&\n                        styles.placeholderLabelTruncateEnd\n                )}\n            >\n                {placeholder}\n            </div>\n        ) : (\n            <div className={styles.label}>\n                {renderSelector(selection[0])}\n                <div className={styles.separator}>-</div>\n                {renderSelector(selection[1])}\n            </div>\n        );\n    };\n\n    const renderSelectorContent = () => (\n        <div\n            className={dropdownWrapperStyles.labelContainer}\n            ref={labelContainerRef}\n            data-disabled={disabled || undefined}\n        >\n            {getDisplayValue()}\n        </div>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"dialog\"\n                    readOnly={readOnly}\n                    variant=\"default\"\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = ({\n        elementWidth,\n        styles: floatingStyles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            className={styles.histogramSliderDropdownContainer}\n            style={{ ...floatingStyles, width: elementWidth }}\n            ref={setFloatingRef}\n            data-testid={`${testId}-dropdown`}\n            {...getFloatingProps()}\n        >\n            <HistogramSlider\n                interval={interval}\n                value={selection}\n                bins={bins}\n                onChange={onSliderChange}\n                onChangeEnd={onSliderChangeEnd}\n                showRangeLabels={false}\n                renderEmptyView={renderEmptyView}\n                ariaLabels={ariaLabels}\n            />\n        </div>\n    );\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={showOptions}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["SelectHistogram","_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","testId","useEffect","onSliderChange","onSliderChangeEnd","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","renderSelector","_jsxs","Typography","BodyBL","children","_jsx","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","variant","dropdownWrapperStyles.labelContainer","undefined","length","styles.label","styles.separator","clsx","styles.placeholderLabel","styles.placeholderLabelTruncateEnd","renderDropdown","elementWidth","styles","floatingStyles","setFloatingRef","getFloatingProps","Object","assign","styles.histogramSliderDropdownContainer","style","width","HistogramSlider","showRangeLabels","onOpen","onClose","onDismiss","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/select-histogram/select-histogram.styles.d.ts

@@ -1,8 +1,5 @@
-import type { ValueLabelStyleProps } from "../shared/dropdown-wrapper/dropdown-wrapper.styles";
-export declare const HistogramSliderDropdownContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ValueLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ValueLabelStyleProps>> & string;
-export declare const PlaceholderLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
+export declare const histogramSliderDropdownContainer: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;
+export declare const separator: import("@linaria/core").LinariaClassName;
+export declare const placeholderLabel: import("@linaria/core").LinariaClassName;
+export declare const placeholderLabelTruncateEnd: import("@linaria/core").LinariaClassName;

package/select-histogram/select-histogram.styles.js

@@ -1,38 +1,2 @@
-import i,{css as e}from"styled-components";import{lineClampCss as d}from"../shared/styles/index.js";import{V3_Border as r,V3_Colour as t,V3_Radius as a,V3_Spacing as o,V3_MediaQuery as s,V3_Breakpoint as n,V3_Font as l}from"../v3_theme/index.js";const m=i.div`
-    overflow: hidden;
-    border: ${r["width-010"]} ${r.solid}
-        ${t.border};
-    border-radius: ${a.sm};
-    background: ${t.bg};
-    padding: ${o["spacing-16"]};
-    min-width: 23rem;
-
-    ${s.MaxWidth.sm} {
-        min-width: unset;
-        width: calc(100vw - ${n["sm-margin"]}px * 2);
-    }
-
-    ${s.MaxWidth.xs} {
-        width: calc(100vw - ${n["xs-margin"]}px * 2);
-    }
-
-    ${s.MaxWidth.xxs} {
-        width: calc(100vw - ${n["xxs-margin"]}px * 2);
-    }
-`,x=i.div`
-    display: flex;
-    align-items: baseline;
-`,$=i.div`
-    margin: 0 0.5rem;
-    color: ${t.text};
-`,c=i.div`
-    ${i=>"small"===i.$variant?l["body-md-regular"]:l["body-baseline-regular"]}
-    text-align: left;
-    ${i=>{if("middle"!==i.$truncateType)return e`
-                    ${d(1)}
-                `}}
-    overflow: hidden;
-`,h=i(c)`
-    color: ${t["text-subtler"]};
-`;export{m as HistogramSliderDropdownContainer,x as Label,h as PlaceholderLabel,$ as Separator,c as ValueLabel};
+import"./select-histogram.styles_11916eo.css";const s="h1snxaxy",e="l1e4uw6e",t="s134rtp9",o="p11079xa",p="p1bydnw6";export{s as histogramSliderDropdownContainer,e as label,o as placeholderLabel,p as placeholderLabelTruncateEnd,t as separator};
 //# sourceMappingURL=select-histogram.styles.js.map

package/select-histogram/select-histogram.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-histogram.styles.js","sources":["../../src/select-histogram/select-histogram.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport type { ValueLabelStyleProps } from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    V3_Border,\n    V3_Breakpoint,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n\nexport const HistogramSliderDropdownContainer = styled.div`\n    overflow: hidden;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    background: ${V3_Colour[\"bg\"]};\n    padding: ${V3_Spacing[\"spacing-16\"]};\n    min-width: 23rem;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        min-width: unset;\n        width: calc(100vw - ${V3_Breakpoint[\"sm-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.xs} {\n        width: calc(100vw - ${V3_Breakpoint[\"xs-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        width: calc(100vw - ${V3_Breakpoint[\"xxs-margin\"]}px * 2);\n    }\n`;\n\nexport const Label = styled.div`\n    display: flex;\n    align-items: baseline;\n`;\n\nexport const Separator = styled.div`\n    margin: 0 0.5rem;\n    color: ${V3_Colour[\"text\"]};\n`;\n\nexport const ValueLabel = styled.div<ValueLabelStyleProps>`\n    ${(props) =>\n        props.$variant === \"small\"\n            ? V3_Font[\"body-md-regular\"]\n            : V3_Font[\"body-baseline-regular\"]}\n    text-align: left;\n    ${(props) => {\n        switch (props.$truncateType) {\n            case \"middle\":\n                break;\n            case \"end\":\n            default:\n                return css`\n                    ${lineClampCss(1)}\n                `;\n        }\n    }}\n    overflow: hidden;\n`;\n\nexport const PlaceholderLabel = styled(ValueLabel)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n"],"names":["HistogramSliderDropdownContainer","styled","div","V3_Border","V3_Colour","V3_Radius","V3_Spacing","V3_MediaQuery","MaxWidth","sm","V3_Breakpoint","xs","xxs","Label","Separator","ValueLabel","props","$variant","V3_Font","$truncateType","css","lineClampCss","PlaceholderLabel"],"mappings":"sPAcO,MAAMA,EAAmCC,EAAOC,GAAG;;cAE5CC,EAAU,gBAAgBA,EAAiB;UAC/CC,EAAkB;qBACPC,EAAc;kBACjBD,EAAc;eACjBE,EAAW;;;MAGpBC,EAAcC,SAASC;;8BAECC,EAAc;;;MAGtCH,EAAcC,SAASG;8BACCD,EAAc;;;MAGtCH,EAAcC,SAASI;8BACCF,EAAc;;EAI/BG,EAAQZ,EAAOC,GAAG;;;EAKlBY,EAAYb,EAAOC,GAAG;;aAEtBE,EAAgB;EAGhBW,EAAad,EAAOC,GAAyB;MACnDc,GACoB,UAAnBA,EAAMC,SACAC,EAAQ,mBACRA,EAAQ;;MAEfF,IACC,GACS,WADDA,EAAMG,cAKN,OAAOC,CAAG;sBACJC,EAAa;;;EAOtBC,EAAmBrB,EAAOc,EAAW;aACrCX,EAAU;"}
+{"version":3,"file":"select-histogram.styles.js","sources":["../../src/select-histogram/select-histogram.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../theme\";\n\nexport const histogramSliderDropdownContainer = css`\n    overflow: hidden;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n    padding: ${Spacing[\"spacing-16\"]};\n    min-width: 23rem;\n\n    ${MediaQuery.MaxWidth.sm} {\n        min-width: unset;\n        width: calc(100vw - ${Breakpoint[\"sm-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        width: calc(100vw - ${Breakpoint[\"xs-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        width: calc(100vw - ${Breakpoint[\"xxs-margin\"]} * 2);\n    }\n`;\n\nexport const label = css`\n    display: flex;\n    align-items: baseline;\n`;\n\nexport const separator = css`\n    margin: 0 0.5rem;\n    color: ${Colour[\"text\"]};\n`;\n\nexport const placeholderLabel = css`\n    ${Font[\"body-baseline-regular\"]}\n    text-align: left;\n    overflow: hidden;\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const placeholderLabelTruncateEnd = css`\n    ${lineClampCss(1)}\n`;\n"],"names":["histogramSliderDropdownContainer","label","separator","placeholderLabel","placeholderLabelTruncateEnd"],"mappings":"8EAaO,MAAMA,EAAgC,WAsBhCC,EAAK,WAKLC,EAAS,WAKTC,EAAgB,WAOhBC,EAA2B"}

package/select-histogram/select-histogram.styles_11916eo.css

@@ -0,0 +1,5 @@
+.h1snxaxy{overflow:hidden;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);padding:var(--fds-spacing-16);min-width:23rem;}:where(body.fds-breakpoint-sm-max) .h1snxaxy{min-width:unset;width:calc(100vw - var(--fds-breakpoint-margin-sm) * 2);}:where(body.fds-breakpoint-xs-max) .h1snxaxy{width:calc(100vw - var(--fds-breakpoint-margin-xs) * 2);}:where(body.fds-breakpoint-xxs-max) .h1snxaxy{width:calc(100vw - var(--fds-breakpoint-margin-xxs) * 2);}
+.l1e4uw6e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;}
+.s134rtp9{margin:0 0.5rem;color:var(--fds-colour-text);}
+.p11079xa{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);text-align:left;overflow:hidden;color:var(--fds-colour-text-subtler);}
+.p1bydnw6{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}

package/select-histogram/types.d.ts

@@ -1,6 +1,6 @@
 import type { AriaAttributes, RefObject } from "react";
 import type { HistogramSliderProps } from "../histogram-slider";
-import type { TruncateType } from "../shared/dropdown-list-v2/types";
+import type { TruncateType } from "../shared/dropdown-list/types";
 import type { DropdownAlignmentType } from "../shared/dropdown-wrapper";
 export type SelectHistogramSliderProps = Pick<HistogramSliderProps, "bins" | "interval" | "renderEmptyView" | "ariaLabels">;
 export interface SelectHistogramProps extends Pick<AriaAttributes, "aria-labelledby" | "aria-describedby" | "aria-invalid"> {

package/shared/accessibility/index.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../../_virtual/_tslib.js";import e from"clsx";import t from"react";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{isReact19 as s}from"../../util/version.js";import"../../util/string-helper.js";import"./index_13g9vp.css";const i=t.forwardRef((function(s,i){var{className:a}=s,o=r(s,["className"]);return t.createElement("span",Object.assign(Object.assign({},o),{ref:i,className:e("v17efraz",a)}))})),a=r=>s()?r:r?"true":void 0,o=(...r)=>r.filter((r=>!!r)).join(" ");export{i as VisuallyHidden,o as concatIds,a as inertValue};
+import{__rest as r}from"../../_virtual/_tslib.js";import e from"clsx";import i from"react";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{isReact19 as t}from"../../util/version.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"./index_13g9vp.css";const s=i.forwardRef((function(t,s){var{className:a}=t,o=r(t,["className"]);return i.createElement("span",Object.assign(Object.assign({},o),{ref:s,className:e("v17efraz",a)}))})),a=r=>t()?r:r?"true":void 0,o=(...r)=>r.filter((r=>!!r)).join(" ");export{s as VisuallyHidden,o as concatIds,a as inertValue};
 //# sourceMappingURL=index.js.map

package/shared/accessibility/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/shared/accessibility/index.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { isReact19 } from \"../../util\";\n\nconst visuallyHidden = css`\n    clip-path: inset(50%);\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n`;\n\nexport const VisuallyHidden = React.forwardRef<\n    HTMLSpanElement,\n    React.HTMLAttributes<HTMLSpanElement>\n>(function VisuallyHidden({ className, ...otherProps }, ref) {\n    return React.createElement(\"span\", {\n        ...otherProps,\n        ref,\n        className: clsx(visuallyHidden, className),\n    });\n});\n\n/**\n * Handle compatibility of `inert` across React versions.\n * 19+ provides official support as a boolean, while it is handled as string in older versions\n */\nexport const inertValue = (value: boolean | undefined) => {\n    if (isReact19()) {\n        return value;\n    }\n\n    return value ? \"true\" : undefined;\n};\n\nexport const concatIds = (...selectors: (string | undefined)[]) => {\n    return selectors.filter((selector) => !!selector).join(\" \");\n};\n"],"names":["VisuallyHidden","React","forwardRef","_a","ref","className","otherProps","__rest","createElement","Object","assign","clsx","inertValue","value","isReact19","undefined","concatIds","selectors","filter","selector","join"],"mappings":"2SAMA,MASaA,EAAiBC,EAAMC,YAGlC,SAAwBC,EAA8BC,GAA9B,IAAAC,UAAEA,GAASF,EAAKG,EAAUC,EAAAJ,EAA1B,eACtB,OAAOF,EAAMO,cAAc,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GAC1BJ,GAAU,CACbF,MACAC,UAAWM,EAhBC,WAgBoBN,KAExC,IAMaO,EAAcC,GACnBC,IACOD,EAGJA,EAAQ,YAASE,EAGfC,EAAYA,IAAIC,IAClBA,EAAUC,QAAQC,KAAeA,IAAUC,KAAK"}
+{"version":3,"file":"index.js","sources":["../../../src/shared/accessibility/index.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { isReact19 } from \"../../util\";\n\nconst visuallyHidden = css`\n    clip-path: inset(50%);\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n`;\n\nexport const VisuallyHidden = React.forwardRef<\n    HTMLSpanElement,\n    React.HTMLAttributes<HTMLSpanElement>\n>(function VisuallyHidden({ className, ...otherProps }, ref) {\n    return React.createElement(\"span\", {\n        ...otherProps,\n        ref,\n        className: clsx(visuallyHidden, className),\n    });\n});\n\n/**\n * Handle compatibility of `inert` across React versions.\n * 19+ provides official support as a boolean, while it is handled as string in older versions\n */\nexport const inertValue = (value: boolean | undefined) => {\n    if (isReact19()) {\n        return value;\n    }\n\n    return value ? \"true\" : undefined;\n};\n\nexport const concatIds = (...selectors: (string | undefined)[]) => {\n    return selectors.filter((selector) => !!selector).join(\" \");\n};\n"],"names":["VisuallyHidden","React","forwardRef","_a","ref","className","otherProps","__rest","createElement","Object","assign","clsx","inertValue","value","isReact19","undefined","concatIds","selectors","filter","selector","join"],"mappings":"6YAMA,MASaA,EAAiBC,EAAMC,YAGlC,SAAwBC,EAA8BC,GAA9B,IAAAC,UAAEA,GAASF,EAAKG,EAAUC,EAAAJ,EAA1B,eACtB,OAAOF,EAAMO,cAAc,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GAC1BJ,GAAU,CACbF,MACAC,UAAWM,EAhBC,WAgBoBN,KAExC,IAMaO,EAAcC,GACnBC,IACOD,EAGJA,EAAQ,YAASE,EAGfC,EAAYA,IAAIC,IAClBA,EAAUC,QAAQC,KAAeA,IAAUC,KAAK"}

package/shared/clickable-icon/clickable-icon.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as i}from"react/jsx-runtime";import r from"react";import{Main as e}from"./clickable-icon.style.js";const o=r.forwardRef(((r,o)=>{var{children:c,focusHighlight:l=!0,focusOutline:n="none",type:s="button"}=r,f=t(r,["children","focusHighlight","focusOutline","type"]);return i(e,Object.assign({ref:o,$outline:n,$highlight:l,type:s},f,{children:c}))}));export{o as ClickableIcon};
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import e from"clsx";import o from"react";import{main as i,outlineNone as s,highlight as c}from"./clickable-icon.styles.js";const l=o.forwardRef(((o,l)=>{var{children:n,className:m,focusHighlight:a=!0,focusOutline:f="none",type:u="button"}=o,p=t(o,["children","className","focusHighlight","focusOutline","type"]);return r("button",Object.assign({ref:l,className:e(i,"none"===f&&s,a&&c,m),type:u},p,{children:n}))}));export{l as ClickableIcon};
 //# sourceMappingURL=clickable-icon.js.map

package/shared/clickable-icon/clickable-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"clickable-icon.js","sources":["../../../src/shared/clickable-icon/clickable-icon.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Main } from \"./clickable-icon.style\";\nimport type { ClickableIconProps } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        focusHighlight = true,\n        focusOutline = \"none\",\n        type = \"button\",\n        ...otherProps\n    }: ClickableIconProps,\n    ref: React.Ref<HTMLButtonElement>\n) => {\n    return (\n        <Main\n            ref={ref}\n            $outline={focusOutline}\n            $highlight={focusHighlight}\n            type={type}\n            {...otherProps}\n        >\n            {children}\n        </Main>\n    );\n};\n\nexport const ClickableIcon = React.forwardRef(Component);\n"],"names":["ClickableIcon","React","forwardRef","_a","ref","children","focusHighlight","focusOutline","type","otherProps","__rest","_jsx","Main","Object","assign","$highlight"],"mappings":"gKAKA,MAuBaA,EAAgBC,EAAMC,YAvBjB,CACdC,EAOAC,KAPA,IAAAC,SACIA,EAAQC,eACRA,GAAiB,EAAIC,aACrBA,EAAe,OAAMC,KACrBA,EAAO,UAAQL,EACZM,EAAUC,EAAAP,EALjB,qDASA,OACIQ,EAACC,EAAIC,OAAAC,OAAA,CACDV,IAAKA,WACKG,EAAYQ,WACVT,EACZE,KAAMA,GACFC,EAAU,CAAAJ,SAEbA,IACE"}
+{"version":3,"file":"clickable-icon.js","sources":["../../../src/shared/clickable-icon/clickable-icon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./clickable-icon.styles\";\nimport type { ClickableIconProps } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        className,\n        focusHighlight = true,\n        focusOutline = \"none\",\n        type = \"button\",\n        ...otherProps\n    }: ClickableIconProps,\n    ref: React.Ref<HTMLButtonElement>\n) => {\n    return (\n        <button\n            ref={ref}\n            className={clsx(\n                styles.main,\n                focusOutline === \"none\" && styles.outlineNone,\n                focusHighlight && styles.highlight,\n                className\n            )}\n            type={type}\n            {...otherProps}\n        >\n            {children}\n        </button>\n    );\n};\n\nexport const ClickableIcon = React.forwardRef(Component);\n"],"names":["ClickableIcon","React","forwardRef","_a","ref","children","className","focusHighlight","focusOutline","type","otherProps","__rest","_jsx","Object","assign","clsx","styles.main","styles.outlineNone","styles.highlight"],"mappings":"qNAMA,MA4BaA,EAAgBC,EAAMC,YA5BjB,CACdC,EAQAC,SARAC,SACIA,EAAQC,UACRA,EAASC,eACTA,GAAiB,EAAIC,aACrBA,EAAe,OAAMC,KACrBA,EAAO,UAAQN,EACZO,EAAUC,EAAAR,EANjB,iEAUA,OACIS,EAAA,SAAAC,OAAAC,OAAA,CACIV,IAAKA,EACLE,UAAWS,EACPC,EACiB,SAAjBR,GAA2BS,EAC3BV,GAAkBW,EAClBZ,GAEJG,KAAMA,GACFC,YAEHL,IACI"}

package/shared/clickable-icon/clickable-icon.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const main: import("@linaria/core").LinariaClassName;
+export declare const outlineNone: import("@linaria/core").LinariaClassName;
+export declare const highlight: import("@linaria/core").LinariaClassName;

package/shared/clickable-icon/clickable-icon.styles.js

@@ -0,0 +1,2 @@
+import"./clickable-icon.styles_1v2imml.css";const c="m18ljjag",l="o1plr5dj",i="hv69up9";export{i as highlight,c as main,l as outlineNone};
+//# sourceMappingURL=clickable-icon.styles.js.map

package/shared/clickable-icon/clickable-icon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickable-icon.styles.js","sources":["../../../src/shared/clickable-icon/clickable-icon.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../../theme\";\n\nexport const main = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: ${Spacing[\"spacing-24\"]};\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n\n    img {\n        height: 1rem;\n        width: 1rem;\n    }\n\n    svg {\n        height: 1.125rem;\n        width: 1.125rem;\n    }\n`;\n\nexport const outlineNone = css`\n    &:active,\n    &:focus {\n        outline: none;\n    }\n`;\n\nexport const highlight = css`\n    &:active,\n    &:focus {\n        background-color: ${Colour[\"bg-hover-neutral\"]};\n    }\n`;\n"],"names":["main","outlineNone","highlight"],"mappings":"iFAIO,MAAMA,EAAI,WAoBJC,EAAW,WAOXC,EAAS"}

package/shared/clickable-icon/clickable-icon.styles_1v2imml.css

@@ -0,0 +1,3 @@
+.m18ljjag{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--fds-spacing-24);background-color:transparent;border:none;cursor:pointer;}.m18ljjag img{height:1rem;width:1rem;}.m18ljjag svg{height:1.125rem;width:1.125rem;}
+.o1plr5dj:active,.o1plr5dj:focus{outline:none;}
+.hv69up9:active,.hv69up9:focus{background-color:var(--fds-colour-bg-hover-neutral);}

package/shared/component-loading-spinner/component-loading-spinner.d.ts

@@ -1,23 +1,28 @@
+import type { HTMLAttributes } from "react";
+type BaseProps = Omit<HTMLAttributes<HTMLDivElement>, "color">;
+export interface ComponentLoadingSpinnerProps extends BaseProps {
+    /** Measurement in px */
+    size?: number | undefined;
+    /** rgb/hex value or Color token */
+    color?: string | undefined;
+}
 /**
  * This component is mainly used within components and is not to be confused
  * with the main loading spinner in animations/loading-spinner
  *
  * By default it inherits the font size and color of the parent container.
  *
- * The color can be customised via the prop or through styled-components.
+ * The font size and color can be customised via the prop or through css.
  *
  * Example:
  * ```
- * styled(ComponentLoadingSpinner)`
+ * const spinner = css`
  *   color: red;
+ *   font-size: 1lh;
  * `
+ *
+ * <ComponentLoadingSpinner className={styles.spinner} />
  * ```
  */
-export interface ComponentLoadingSpinnerProps {
-    className?: string | undefined;
-    /** Measurement in px */
-    size?: number | undefined;
-    /** rgb/hex value or Color token */
-    color?: string | ((props: any) => string) | undefined;
-}
-export declare const ComponentLoadingSpinner: ({ color, className, size, }: ComponentLoadingSpinnerProps) => JSX.Element;
+export declare const ComponentLoadingSpinner: ({ color, className, size, ...otherProps }: ComponentLoadingSpinnerProps) => JSX.Element;
+export {};

package/shared/component-loading-spinner/component-loading-spinner.js

@@ -1,2 +1,2 @@
-import{jsxs as n,jsx as i}from"react/jsx-runtime";import{OuterRing as e,InnerRing1 as o,InnerRing2 as r,InnerRing3 as s,InnerRing4 as t}from"./component-loading-spinner.style.js";const a=({color:a,className:c,size:d})=>n(e,{className:c,$size:d,$color:a,"data-testid":"component-loading-spinner",children:[i(o,{id:"inner1"}),i(r,{id:"inner2"}),i(s,{id:"inner3"}),i(t,{id:"inner4"})]});export{a as ComponentLoadingSpinner};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as i,jsx as s}from"react/jsx-runtime";import r from"clsx";import{useRef as o}from"react";import{useApplyStyle as t}from"../../theme/utils/use-apply-styles.js";import"../../theme/theme-provider/context.js";import"../../theme/utils/use-media-query.js";import{outerRing as m,innerRing as n,innerRing2 as a,innerRing3 as l,innerRing4 as c,tokens as d}from"./component-loading-spinner.styles.js";const p=p=>{var{color:u,className:v,size:f}=p,j=e(p,["color","className","size"]);const N=o(null);return t(N,{[d.rootSize]:f?`${f}px`:void 0,[d.rootColour]:u}),i("div",Object.assign({ref:N,className:r(m,v)},j,{"data-testid":"component-loading-spinner",children:[s("div",{id:"inner1",className:n}),s("div",{id:"inner2",className:r(n,a)}),s("div",{id:"inner3",className:r(n,l)}),s("div",{id:"inner4",className:r(n,c)})]}))};export{p as ComponentLoadingSpinner};
 //# sourceMappingURL=component-loading-spinner.js.map

package/shared/component-loading-spinner/component-loading-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-loading-spinner.js","sources":["../../../src/shared/component-loading-spinner/component-loading-spinner.tsx"],"sourcesContent":["import {\n    InnerRing1,\n    InnerRing2,\n    InnerRing3,\n    InnerRing4,\n    OuterRing,\n} from \"./component-loading-spinner.style\";\n\n/**\n * This component is mainly used within components and is not to be confused\n * with the main loading spinner in animations/loading-spinner\n *\n * By default it inherits the font size and color of the parent container.\n *\n * The color can be customised via the prop or through styled-components.\n *\n * Example:\n * ```\n * styled(ComponentLoadingSpinner)`\n *   color: red;\n * `\n * ```\n */\nexport interface ComponentLoadingSpinnerProps {\n    className?: string | undefined;\n    /** Measurement in px */\n    size?: number | undefined;\n    /** rgb/hex value or Color token */\n    color?: string | ((props: any) => string) | undefined;\n}\n\nexport const ComponentLoadingSpinner = ({\n    color,\n    className,\n    size,\n}: ComponentLoadingSpinnerProps): JSX.Element => {\n    return (\n        <OuterRing\n            className={className}\n            $size={size}\n            $color={color}\n            data-testid={\"component-loading-spinner\"}\n        >\n            <InnerRing1 id=\"inner1\" />\n            <InnerRing2 id=\"inner2\" />\n            <InnerRing3 id=\"inner3\" />\n            <InnerRing4 id=\"inner4\" />\n        </OuterRing>\n    );\n};\n"],"names":["ComponentLoadingSpinner","color","className","size","_jsxs","OuterRing","$color","_jsx","InnerRing1","id","InnerRing2","InnerRing3","InnerRing4"],"mappings":"mLA+BO,MAAMA,EAA0B,EACnCC,QACAC,YACAC,UAGIC,EAACC,EAAS,CACNH,UAAWA,QACJC,EAAIG,OACHL,EAAK,cACA,sCAEbM,EAACC,GAAWC,GAAG,WACfF,EAACG,EAAU,CAACD,GAAG,WACfF,EAACI,EAAU,CAACF,GAAG,WACfF,EAACK,EAAU,CAACH,GAAG"}
+{"version":3,"file":"component-loading-spinner.js","sources":["../../../src/shared/component-loading-spinner/component-loading-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { HTMLAttributes } from \"react\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme/utils\";\nimport * as styles from \"./component-loading-spinner.styles\";\n\ntype BaseProps = Omit<HTMLAttributes<HTMLDivElement>, \"color\">;\n\nexport interface ComponentLoadingSpinnerProps extends BaseProps {\n    /** Measurement in px */\n    size?: number | undefined;\n    /** rgb/hex value or Color token */\n    color?: string | undefined;\n}\n\n/**\n * This component is mainly used within components and is not to be confused\n * with the main loading spinner in animations/loading-spinner\n *\n * By default it inherits the font size and color of the parent container.\n *\n * The font size and color can be customised via the prop or through css.\n *\n * Example:\n * ```\n * const spinner = css`\n *   color: red;\n *   font-size: 1lh;\n * `\n *\n * <ComponentLoadingSpinner className={styles.spinner} />\n * ```\n */\nexport const ComponentLoadingSpinner = ({\n    color,\n    className,\n    size,\n    ...otherProps\n}: ComponentLoadingSpinnerProps): JSX.Element => {\n    const spinnerRef = useRef<HTMLDivElement>(null);\n    useApplyStyle(spinnerRef, {\n        [styles.tokens.rootSize]: size ? `${size}px` : undefined,\n        [styles.tokens.rootColour]: color,\n    });\n\n    return (\n        <div\n            ref={spinnerRef}\n            className={clsx(styles.outerRing, className)}\n            {...otherProps}\n            data-testid={\"component-loading-spinner\"}\n        >\n            <div id=\"inner1\" className={styles.innerRing} />\n            <div\n                id=\"inner2\"\n                className={clsx(styles.innerRing, styles.innerRing2)}\n            />\n            <div\n                id=\"inner3\"\n                className={clsx(styles.innerRing, styles.innerRing3)}\n            />\n            <div\n                id=\"inner4\"\n                className={clsx(styles.innerRing, styles.innerRing4)}\n            />\n        </div>\n    );\n};\n"],"names":["ComponentLoadingSpinner","_a","color","className","size","otherProps","__rest","spinnerRef","useRef","useApplyStyle","styles.tokens","rootSize","undefined","rootColour","_jsxs","Object","assign","ref","clsx","styles.outerRing","children","_jsx","id","styles.innerRing","styles.innerRing2","styles.innerRing3","styles.innerRing4"],"mappings":"qcAkCO,MAAMA,EAA2BC,QAAAC,MACpCA,EAAKC,UACLA,EAASC,KACTA,KACGC,EAAUC,EAAAL,EAJuB,CAAA,QAAA,YAAA,SAMpC,MAAMM,EAAaC,EAAuB,MAM1C,OALAC,EAAcF,EAAY,CACtB,CAACG,EAAcC,UAAWP,EAAO,GAAGA,WAAWQ,EAC/C,CAACF,EAAcG,YAAaX,IAI5BY,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKV,EACLJ,UAAWe,EAAKC,EAAkBhB,IAC9BE,iBACS,4BAA2Be,SAAA,CAExCC,SAAKC,GAAG,SAASnB,UAAWoB,IAC5BF,SACIC,GAAG,SACHnB,UAAWe,EAAKK,EAAkBC,KAEtCH,EAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAKK,EAAkBE,KAEtCJ,EAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAKK,EAAkBG,QAEpC"}

package/shared/component-loading-spinner/component-loading-spinner.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const tokens: {
+    readonly rootSize: "--fds-internal-componentLoadingSpinner-root-size";
+    readonly rootColour: "--fds-internal-componentLoadingSpinner-root-colour";
+};
+export declare const outerRing: import("@linaria/core").LinariaClassName;
+export declare const innerRing: import("@linaria/core").LinariaClassName;
+export declare const innerRing2: import("@linaria/core").LinariaClassName;
+export declare const innerRing3: import("@linaria/core").LinariaClassName;
+export declare const innerRing4: import("@linaria/core").LinariaClassName;

package/shared/component-loading-spinner/component-loading-spinner.styles.js

@@ -0,0 +1,2 @@
+import"./component-loading-spinner.styles_15eq02i.css";const o={rootSize:"--fds-internal-componentLoadingSpinner-root-size",rootColour:"--fds-internal-componentLoadingSpinner-root-colour"},n="oqwr3hs",i="i5p5ltp",r="i1trawld",e="iav978u",t="i1fnvvih";export{i as innerRing,r as innerRing2,e as innerRing3,t as innerRing4,n as outerRing,o as tokens};
+//# sourceMappingURL=component-loading-spinner.styles.js.map

package/shared/component-loading-spinner/component-loading-spinner.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-loading-spinner.styles.js","sources":["../../../src/shared/component-loading-spinner/component-loading-spinner.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const tokens = {\n    rootSize: \"--fds-internal-componentLoadingSpinner-root-size\",\n    rootColour: \"--fds-internal-componentLoadingSpinner-root-colour\",\n} as const;\n\nexport const outerRing = css`\n    display: inline-block;\n    position: relative;\n    width: var(${tokens.rootSize}, 1em);\n    height: var(${tokens.rootSize}, 1em);\n    color: var(${tokens.rootColour}, currentColor);\n`;\n\nexport const innerRing = css`\n    box-sizing: border-box;\n    display: block;\n    position: absolute;\n    top: 1px;\n    width: calc(100% - 2px);\n    height: calc(100% - 2px);\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 100%;\n    border-color: currentColor transparent transparent transparent;\n    animation: component-loading-spinner-rotate 1.2s\n        cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\n    @keyframes component-loading-spinner-rotate {\n        0% {\n            transform: rotate(0deg);\n        }\n\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n`;\n\nexport const innerRing2 = css`\n    animation-delay: -0.45s;\n`;\n\nexport const innerRing3 = css`\n    animation-delay: -0.3s;\n`;\n\nexport const innerRing4 = css`\n    animation-delay: -0.15s;\n`;\n"],"names":["tokens","rootSize","rootColour","outerRing","innerRing","innerRing2","innerRing3","innerRing4"],"mappings":"uGAEO,MAAMA,EAAS,CAClBC,SAAU,mDACVC,WAAY,sDAGHC,EAAS,UAQTC,EAAS,UAyBTC,EAAU,WAIVC,EAAU,UAIVC,EAAU"}

package/shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css

@@ -0,0 +1,5 @@
+.oqwr3hs{display:inline-block;position:relative;width:var(--fds-internal-componentLoadingSpinner-root-size, 1em);height:var(--fds-internal-componentLoadingSpinner-root-size, 1em);color:var(--fds-internal-componentLoadingSpinner-root-colour, currentColor);}
+.i5p5ltp{box-sizing:border-box;display:block;position:absolute;top:1px;width:calc(100% - 2px);height:calc(100% - 2px);border-width:2px;border-style:solid;border-radius:100%;border-color:currentColor transparent transparent transparent;-webkit-animation:component-loading-spinner-rotate-i5p5ltp 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;animation:component-loading-spinner-rotate-i5p5ltp 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;}@-webkit-keyframes component-loading-spinner-rotate-i5p5ltp{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes component-loading-spinner-rotate-i5p5ltp{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
+.i1trawld{-webkit-animation-delay:-0.45s;animation-delay:-0.45s;}
+.iav978u{-webkit-animation-delay:-0.3s;animation-delay:-0.3s;}
+.i1fnvvih{-webkit-animation-delay:-0.15s;animation-delay:-0.15s;}

package/shared/dropdown-list/dropdown-label.d.ts

@@ -0,0 +1,15 @@
+import type { DropdownVariantType, LabelDisplayType } from "./types";
+interface DropdownLabelProps {
+    bold?: boolean | undefined;
+    displayType?: LabelDisplayType | undefined;
+    label: string;
+    maxLines?: number | undefined;
+    searchTerm?: string | undefined;
+    selected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    sublabel?: string | undefined;
+    truncationType?: "middle" | "end" | undefined;
+    variant?: DropdownVariantType | undefined;
+}
+export declare const DropdownLabel: ({ bold, displayType, label, searchTerm, maxLines, selected, disabled, sublabel, truncationType, variant, }: DropdownLabelProps) => JSX.Element;
+export {};

package/shared/dropdown-list/dropdown-label.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as i,Fragment as r}from"react/jsx-runtime";import t from"clsx";import{useRef as l,useCallback as s,useMemo as n}from"react";import{useResizeDetector as m}from"../../external/react-resize-detector/build/index.esm.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import{Font as a}from"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as d}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{StringHelper as o}from"../../util/string-helper.js";import{tokens as c,primaryText as p,primaryTextBold as h,primaryTextDisabled as u,primaryTextSelected as f,primaryTextLabelInline as x,primaryTextTruncateEnd as b,secondaryText as y,secondaryTextLabelInline as j,secondaryTextTruncateEnd as v,secondaryTextNextLine as N,secondaryTextInline as T,label as g,labelVariantSmall as L,labelNextLine as S,baseTruncateStyle as k,truncateFirstLine as w,truncateLineSingle as z,truncateSecondLine as q,matchedText as C}from"./dropdown-label.styles.js";const $=({bold:$,displayType:O="inline",label:W,searchTerm:A,maxLines:B=2,selected:D,disabled:E,sublabel:F,truncationType:G="middle",variant:H="default"})=>{const I="small"===H?a.Spec["body-size-md"]:a.Spec["body-size-baseline"],J=a.Spec["font-family"],{ref:K,width:M}=m(),P=l(null),Q=l(null);d(P,{[c.primaryText.maxLines]:String(B)}),d(Q,{[c.secondaryText.maxLines]:String(B)});const R=s((e=>{if("inline"!==O||!M)return!1;return o.getTextWidth(e,`${I} '${J}'`)>M-50}),[M,O,I,J]),U=n((()=>R(W)),[R,W]),V=n((()=>F&&R(F)),[R,F]),X="middle"===G&&(U||V)?"next-line":O,Y=t=>{if(!A)return t;const l=A.toLowerCase().trim(),s=t.toLowerCase().indexOf(l),n=s+A.length;return-1===s?t:e(r,{children:[W.slice(0,s),i("span",{className:C,children:W.slice(s,n)}),W.slice(n)]})},Z=l=>e(r,{children:[i("div",{className:t(k,w,1===B&&z),"aria-hidden":!0,children:Y(l)}),i("div",{className:t(k,q,1===B&&z),"aria-hidden":!0,children:Y(l)})]});return e("div",{ref:K,className:t(g,"small"===H&&L,"next-line"===X&&S),children:[i("div",{ref:P,"aria-label":W,className:t(p,$&&h,E&&u,!E&&D&&f,"inline"===X&&x,"end"===G&&b),children:"middle"===G&&U?Z(W):Y(W)}),F&&i("div",{ref:Q,"aria-label":F,className:t(y,"inline"===X&&j,"end"===G&&v,"next-line"===O?N:T),children:"middle"===G&&V?Z(F):F})]})};export{$ as DropdownLabel};
+//# sourceMappingURL=dropdown-label.js.map

package/shared/dropdown-list/dropdown-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-label.js","sources":["../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Font } from \"../../theme\";\nimport { useApplyStyle } from \"../../theme/utils/use-apply-styles\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport * as styles from \"./dropdown-label.styles\";\nimport type { DropdownVariantType, LabelDisplayType } from \"./types\";\n\ninterface DropdownLabelProps {\n    bold?: boolean | undefined;\n    displayType?: LabelDisplayType | undefined;\n    label: string;\n    maxLines?: number | undefined;\n    searchTerm?: string | undefined;\n    selected?: boolean | undefined;\n    disabled?: boolean | undefined;\n    sublabel?: string | undefined;\n    truncationType?: \"middle\" | \"end\" | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const DropdownLabel = ({\n    bold,\n    displayType = \"inline\",\n    label,\n    searchTerm,\n    maxLines = 2,\n    selected,\n    disabled,\n    sublabel,\n    truncationType = \"middle\",\n    variant = \"default\",\n}: DropdownLabelProps): JSX.Element => {\n    const fontSize =\n        variant === \"small\"\n            ? Font.Spec[\"body-size-md\"]\n            : Font.Spec[\"body-size-baseline\"];\n    const fontFamily = Font.Spec[\"font-family\"];\n    const { ref, width } = useResizeDetector();\n\n    const primaryTextRef = useRef<HTMLDivElement>(null);\n    const secondaryTextRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(primaryTextRef, {\n        [styles.tokens.primaryText.maxLines]: String(maxLines),\n    });\n\n    useApplyStyle(secondaryTextRef, {\n        [styles.tokens.secondaryText.maxLines]: String(maxLines),\n    });\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const hasExceededContainer = useCallback(\n        (displayText: string) => {\n            if (displayType !== \"inline\" || !width) {\n                return false;\n            }\n\n            // best-effort attempt to check if multi-line text will overflow,\n            // rendering an actual element in the DOM might be more accurate\n            // but might not be performant for large lists\n            const textWidth = StringHelper.getTextWidth(\n                displayText,\n                `${fontSize} '${fontFamily}'`\n            );\n\n            // there's less space than expected due to word breaks, so an\n            // arbitary offset is applied\n            return textWidth > width - 50;\n        },\n        [width, displayType, fontSize, fontFamily]\n    );\n\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const shouldTruncateTitle = useMemo(\n        () => hasExceededContainer(label),\n        [hasExceededContainer, label]\n    );\n    const shouldTruncateLabel = useMemo(\n        () => sublabel && hasExceededContainer(sublabel),\n        [hasExceededContainer, sublabel]\n    );\n\n    // css cannot truncate inline elements so force the display to render\n    // them separately\n    const itemDisplayType =\n        truncationType === \"middle\" &&\n        (shouldTruncateTitle || shouldTruncateLabel)\n            ? \"next-line\"\n            : displayType;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMatchInBold = (displayText: string) => {\n        if (!searchTerm) {\n            return displayText;\n        }\n\n        const match = searchTerm.toLowerCase().trim();\n        const startIndex = displayText.toLowerCase().indexOf(match);\n        const endIndex = startIndex + searchTerm.length;\n\n        if (startIndex === -1) {\n            return displayText;\n        }\n\n        return (\n            <>\n                {label.slice(0, startIndex)}\n                <span className={styles.matchedText}>\n                    {label.slice(startIndex, endIndex)}\n                </span>\n                {label.slice(endIndex)}\n            </>\n        );\n    };\n\n    const renderTruncatedText = (displayText: string): JSX.Element => {\n        return (\n            <>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateFirstLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateSecondLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                styles.label,\n                variant === \"small\" && styles.labelVariantSmall,\n                itemDisplayType === \"next-line\" && styles.labelNextLine\n            )}\n        >\n            <div\n                ref={primaryTextRef}\n                aria-label={label}\n                className={clsx(\n                    styles.primaryText,\n                    bold && styles.primaryTextBold,\n                    disabled && styles.primaryTextDisabled,\n                    !disabled && selected && styles.primaryTextSelected,\n                    itemDisplayType === \"inline\" &&\n                        styles.primaryTextLabelInline,\n                    truncationType === \"end\" && styles.primaryTextTruncateEnd\n                )}\n            >\n                {truncationType === \"middle\" && shouldTruncateTitle\n                    ? renderTruncatedText(label)\n                    : renderMatchInBold(label)}\n            </div>\n            {sublabel && (\n                <div\n                    ref={secondaryTextRef}\n                    aria-label={sublabel}\n                    className={clsx(\n                        styles.secondaryText,\n                        itemDisplayType === \"inline\" &&\n                            styles.secondaryTextLabelInline,\n                        truncationType === \"end\" &&\n                            styles.secondaryTextTruncateEnd,\n                        displayType === \"next-line\"\n                            ? styles.secondaryTextNextLine\n                            : styles.secondaryTextInline\n                    )}\n                >\n                    {truncationType === \"middle\" && shouldTruncateLabel\n                        ? renderTruncatedText(sublabel)\n                        : sublabel}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["DropdownLabel","bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","primaryTextRef","useRef","secondaryTextRef","useApplyStyle","styles.tokens","primaryText","String","secondaryText","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","itemDisplayType","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","className","styles.matchedText","renderTruncatedText","clsx","styles.baseTruncateStyle","styles.truncateFirstLine","styles.truncateLineSingle","styles.truncateSecondLine","styles.label","styles.labelVariantSmall","styles.labelNextLine","styles.primaryText","styles.primaryTextBold","styles.primaryTextDisabled","styles.primaryTextSelected","styles.primaryTextLabelInline","styles.primaryTextTruncateEnd","styles.secondaryText","styles.secondaryTextLabelInline","styles.secondaryTextTruncateEnd","styles.secondaryTextNextLine","styles.secondaryTextInline"],"mappings":"soCAuBO,MAAMA,EAAgB,EACzBC,OACAC,cAAc,SAAQC,MACtBA,EACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EACU,UAAZD,EACME,EAAKC,KAAK,gBACVD,EAAKC,KAAK,sBACdC,EAAaF,EAAKC,KAAK,gBACvBE,IAAEA,EAAGC,MAAEA,GAAUC,IAEjBC,EAAiBC,EAAuB,MACxCC,EAAmBD,EAAuB,MAEhDE,EAAcH,EAAgB,CAC1B,CAACI,EAAcC,YAAYlB,UAAWmB,OAAOnB,KAGjDgB,EAAcD,EAAkB,CAC5B,CAACE,EAAcG,cAAcpB,UAAWmB,OAAOnB,KAMnD,MAAMqB,EAAuBC,GACxBC,IACG,GAAoB,WAAhB1B,IAA6Bc,EAC7B,OAAO,EAaX,OAPkBa,EAAaC,aAC3BF,EACA,GAAGjB,MAAaG,MAKDE,EAAQ,EAAE,GAEjC,CAACA,EAAOd,EAAaS,EAAUG,IAM7BiB,EAAsBC,GACxB,IAAMN,EAAqBvB,IAC3B,CAACuB,EAAsBvB,IAErB8B,EAAsBD,GACxB,IAAMxB,GAAYkB,EAAqBlB,IACvC,CAACkB,EAAsBlB,IAKrB0B,EACiB,WAAnBzB,IACCsB,GAAuBE,GAClB,YACA/B,EAKJiC,EAAqBP,IACvB,IAAKxB,EACD,OAAOwB,EAGX,MAAMQ,EAAQhC,EAAWiC,cAAcC,OACjCC,EAAaX,EAAYS,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAanC,EAAWsC,OAEzC,OAAmB,IAAfH,EACOX,EAIPe,EAAAC,EAAA,CAAAC,SAAA,CACK1C,EAAM2C,MAAM,EAAGP,GAChBQ,EAAA,OAAA,CAAMC,UAAWC,EAAkBJ,SAC9B1C,EAAM2C,MAAMP,EAAYE,KAE5BtC,EAAM2C,MAAML,KACd,EAILS,EAAuBtB,GAErBe,EAAAC,EAAA,CAAAC,SAAA,CACIE,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAC,EACa,IAAbhD,GAAkBiD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,KAEvBmB,EAAA,MAAA,CACIC,UAAWG,EACPC,EACAG,EACa,IAAblD,GAAkBiD,GACrB,eAAA,EAAAT,SAGAV,EAAkBP,QAMnC,OACIe,EAAA,MAAA,CACI5B,IAAKA,EACLiC,UAAWG,EACPK,EACY,UAAZ9C,GAAuB+C,EACH,cAApBvB,GAAmCwB,GACtCb,SAAA,CAEDE,SACIhC,IAAKG,EAAc,aACPf,EACZ6C,UAAWG,EACPQ,EACA1D,GAAQ2D,EACRrD,GAAYsD,GACXtD,GAAYD,GAAYwD,EACL,WAApB5B,GACI6B,EACe,QAAnBtD,GAA4BuD,GAC/BnB,SAEmB,WAAnBpC,GAA+BsB,EAC1BmB,EAAoB/C,GACpBgC,EAAkBhC,KAE3BK,GACGuC,EAAA,MAAA,CACIhC,IAAKK,EAAgB,aACTZ,EACZwC,UAAWG,EACPc,EACoB,WAApB/B,GACIgC,EACe,QAAnBzD,GACI0D,EACY,cAAhBjE,EACMkE,EACAC,YAGU,WAAnB5D,GAA+BwB,EAC1BiB,EAAoB1C,GACpBA,MAGZ"}

package/shared/dropdown-list/dropdown-label.styles.d.ts

@@ -0,0 +1,27 @@
+export declare const tokens: {
+    primaryText: {
+        maxLines: string;
+    };
+    secondaryText: {
+        maxLines: string;
+    };
+};
+export declare const primaryText: import("@linaria/core").LinariaClassName;
+export declare const primaryTextBold: import("@linaria/core").LinariaClassName;
+export declare const primaryTextSelected: import("@linaria/core").LinariaClassName;
+export declare const primaryTextDisabled: import("@linaria/core").LinariaClassName;
+export declare const primaryTextLabelInline: import("@linaria/core").LinariaClassName;
+export declare const primaryTextTruncateEnd: import("@linaria/core").LinariaClassName;
+export declare const secondaryText: import("@linaria/core").LinariaClassName;
+export declare const secondaryTextNextLine: import("@linaria/core").LinariaClassName;
+export declare const secondaryTextInline: import("@linaria/core").LinariaClassName;
+export declare const secondaryTextLabelInline: import("@linaria/core").LinariaClassName;
+export declare const secondaryTextTruncateEnd: import("@linaria/core").LinariaClassName;
+export declare const matchedText: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;
+export declare const labelVariantSmall: import("@linaria/core").LinariaClassName;
+export declare const labelNextLine: import("@linaria/core").LinariaClassName;
+export declare const baseTruncateStyle: import("@linaria/core").LinariaClassName;
+export declare const truncateFirstLine: import("@linaria/core").LinariaClassName;
+export declare const truncateSecondLine: import("@linaria/core").LinariaClassName;
+export declare const truncateLineSingle: import("@linaria/core").LinariaClassName;

package/shared/dropdown-list/dropdown-label.styles.js

@@ -0,0 +1,2 @@
+import"./dropdown-label.styles_1dwmd8f.css";const s={primaryText:{maxLines:"--fds-internal-dropdownLabel-primaryText-maxLines"},secondaryText:{maxLines:"--fds-internal-dropdownLabel-secondaryText-maxLines"}},t="pi58ntt",e="p1wtg030",i="p4cirxp",n="pp0vhoy",o="p1nofioz",p="przdrhy",r="s3fwc7p",d="s132gi2y",a="swx1e24",x="s1kq4iiq",l="s1jjyg61",m="m7dzxku",y="lkpcujm",w="l4129ag",c="l5tt4mi",f="b1tiox0q",L="t1y8fzo0",g="t18n9ljk",T="tgn5sfi";export{f as baseTruncateStyle,y as label,c as labelNextLine,w as labelVariantSmall,m as matchedText,t as primaryText,e as primaryTextBold,n as primaryTextDisabled,o as primaryTextLabelInline,i as primaryTextSelected,p as primaryTextTruncateEnd,r as secondaryText,a as secondaryTextInline,x as secondaryTextLabelInline,d as secondaryTextNextLine,l as secondaryTextTruncateEnd,s as tokens,L as truncateFirstLine,T as truncateLineSingle,g as truncateSecondLine};
+//# sourceMappingURL=dropdown-label.styles.js.map

package/shared/dropdown-list/dropdown-label.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-label.styles.js","sources":["../../../src/shared/dropdown-list/dropdown-label.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../../theme\";\nimport { lineClampDynamicCss } from \"../styles\";\n\nexport const tokens = {\n    primaryText: {\n        maxLines: \"--fds-internal-dropdownLabel-primaryText-maxLines\",\n    },\n    secondaryText: {\n        maxLines: \"--fds-internal-dropdownLabel-secondaryText-maxLines\",\n    },\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// PRIMARY TEXT\n// -----------------------------------------------------------------------------\nexport const primaryText = css`\n    font-weight: ${Font.Spec[\"weight-regular\"]};\n    color: ${Colour[\"text\"]};\n    width: 100%;\n    overflow-wrap: break-word;\n`;\n\nexport const primaryTextBold = css`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const primaryTextSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const primaryTextDisabled = css`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const primaryTextLabelInline = css`\n    display: inline;\n`;\n\nexport const primaryTextTruncateEnd = css`\n    ${tokens.primaryText.maxLines}: 2;\n    ${lineClampDynamicCss(tokens.primaryText.maxLines)}\n`;\n\n// -----------------------------------------------------------------------------\n// SECONDARY TEXT\n// -----------------------------------------------------------------------------\nexport const secondaryText = css`\n    color: ${Colour[\"text-subtlest\"]};\n    width: 100%;\n    overflow-wrap: break-word;\n`;\n\nexport const secondaryTextNextLine = css`\n    ${Font[\"body-md-semibold\"]}\n`;\n\nexport const secondaryTextInline = css`\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const secondaryTextLabelInline = css`\n    display: inline;\n    margin-left: 0.5rem;\n`;\n\nexport const secondaryTextTruncateEnd = css`\n    ${tokens.secondaryText.maxLines}: 2;\n    ${lineClampDynamicCss(tokens.secondaryText.maxLines)}\n`;\n\n// -----------------------------------------------------------------------------\n// MATCHED TEXT\n// -----------------------------------------------------------------------------\nexport const matchedText = css`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LABEL\n// -----------------------------------------------------------------------------\nexport const label = css`\n    text-align: left;\n    width: 100%;\n    overflow: hidden;\n    overflow-wrap: break-word;\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const labelVariantSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const labelNextLine = css`\n    display: flex;\n    flex-direction: column;\n`;\n\n// -----------------------------------------------------------------------------\n// TRUNCATION\n// -----------------------------------------------------------------------------\nexport const baseTruncateStyle = css`\n    display: inline-block;\n    width: 100%;\n    height: 1lh;\n    overflow: hidden;\n`;\n\nexport const truncateFirstLine = css`\n    word-break: break-all;\n`;\n\nexport const truncateSecondLine = css`\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    direction: rtl;\n    text-align: right;\n`;\n\nexport const truncateLineSingle = css`\n    width: 50%;\n`;\n"],"names":["tokens","primaryText","maxLines","secondaryText","primaryTextBold","primaryTextSelected","primaryTextDisabled","primaryTextLabelInline","primaryTextTruncateEnd","secondaryTextNextLine","secondaryTextInline","secondaryTextLabelInline","secondaryTextTruncateEnd","matchedText","label","labelVariantSmall","labelNextLine","baseTruncateStyle","truncateFirstLine","truncateSecondLine","truncateLineSingle"],"mappings":"gFAKO,MAAMA,EAAS,CAClBC,YAAa,CACTC,SAAU,qDAEdC,cAAe,CACXD,SAAU,wDAWLD,EAAW,UAOXG,EAAe,WAIfC,EAAmB,UAInBC,EAAmB,UAInBC,EAAsB,WAItBC,EAAsB,UAQtBL,EAAa,UAMbM,EAAqB,WAIrBC,EAAmB,UAInBC,EAAwB,WAKxBC,EAAwB,WAQxBC,EAAW,UAOXC,EAAK,UAQLC,EAAiB,UAIjBC,EAAa,UAQbC,EAAiB,WAOjBC,EAAiB,WAIjBC,EAAkB,WAOlBC,EAAkB"}

package/shared/dropdown-list/dropdown-label.styles_1dwmd8f.css

@@ -0,0 +1,19 @@
+.pi58ntt{font-weight:var(--fds-font-weight-regular);color:var(--fds-colour-text);width:100%;overflow-wrap:break-word;}
+.p1wtg030{font-weight:var(--fds-font-weight-semibold);}
+.p4cirxp{color:var(--fds-colour-text-selected);}
+.pp0vhoy{color:var(--fds-colour-text-disabled);}
+.p1nofioz{display:inline;}
+.przdrhy{--fds-internal-dropdownLabel-primaryText-maxLines:2;--fds-internal-dropdownLabel-primaryText-maxLines:initial;display:-webkit-box;-webkit-line-clamp:var(--fds-internal-dropdownLabel-primaryText-maxLines);-webkit-box-orient:vertical;overflow:hidden;}
+.s3fwc7p{color:var(--fds-colour-text-subtlest);width:100%;overflow-wrap:break-word;}
+.s132gi2y{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.swx1e24{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.s1kq4iiq{display:inline;margin-left:0.5rem;}
+.s1jjyg61{--fds-internal-dropdownLabel-secondaryText-maxLines:2;--fds-internal-dropdownLabel-secondaryText-maxLines:initial;display:-webkit-box;-webkit-line-clamp:var(--fds-internal-dropdownLabel-secondaryText-maxLines);-webkit-box-orient:vertical;overflow:hidden;}
+.m7dzxku{font-weight:var(--fds-font-weight-semibold);}
+.lkpcujm{text-align:left;width:100%;overflow:hidden;overflow-wrap:break-word;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.l4129ag{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.l5tt4mi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.b1tiox0q{display:inline-block;width:100%;height:1lh;overflow:hidden;}
+.t1y8fzo0{word-break:break-all;}
+.t18n9ljk{text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:right;}
+.tgn5sfi{width:50%;}

package/shared/dropdown-list/dropdown-list-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-list-state.js","sources":["../../../src/shared/dropdown-list/dropdown-list-state.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\ninterface DropdownListStateProps {\n    children: React.ReactNode;\n}\n\ninterface DropdownListStateContextProps {\n    focusedIndex: number;\n    setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;\n}\n\nexport const DropdownListStateContext =\n    React.createContext<DropdownListStateContextProps>({\n        focusedIndex: -1,\n        setFocusedIndex: () => {\n            // do nothing\n        },\n    });\n\nexport const DropdownListState = ({ children }: DropdownListStateProps) => {\n    const [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\n    return (\n        <DropdownListStateContext.Provider\n            value={{\n                focusedIndex,\n                setFocusedIndex,\n            }}\n        >\n            {children}\n        </DropdownListStateContext.Provider>\n    );\n};\n"],"names":["DropdownListStateContext","React","createContext","focusedIndex","setFocusedIndex","DropdownListState","children","useState","_jsx","Provider","value"],"mappings":"4EAWO,MAAMA,EACTC,EAAMC,cAA6C,CAC/CC,cAAc,EACdC,gBAAiB,SAKZC,EAAoB,EAAGC,eAChC,MAAOH,EAAcC,GAAmBG,GAAiB,GAEzD,OACIC,EAACR,EAAyBS,SAAQ,CAC9BC,MAAO,CACHP,eACAC,mBACHE,SAEAA,GAC+B"}

package/shared/dropdown-list/dropdown-list.d.ts

@@ -1,6 +1,3 @@
-import type { DropdownListProps } from "./types";
-/**
- * NOTE: This component is not directly exportables
- * but forms part of a component
- */
-export declare const DropdownList: <T, V>({ listItems, listExtractor, valueExtractor, onSelectItem, listStyleWidth, visible, enableSearch, searchPlaceholder, onSearch, searchFunction, onDismiss, disableItemFocus, multiSelect, selectedItems, onSelectAll, onRetry, itemsLoadState, itemTruncationType, itemMaxLines, labelDisplayType, renderListItem, onBlur, hideNoResultsDisplay, renderCustomCallToAction, variant, ...otherProps }: DropdownListProps<T, V>) => JSX.Element;
+import type React from "react";
+import type { DropdownListApi, DropdownListProps } from "./types";
+export declare const DropdownList: <T, V>(props: DropdownListProps<T, V> & React.RefAttributes<DropdownListApi>) => React.ReactElement | null;

package/shared/dropdown-list/dropdown-list.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{ExclamationCircleFillIcon as i}from"@lifesg/react-icons/exclamation-circle-fill";import{SquareIcon as l}from"@lifesg/react-icons/square";import{SquareFillIcon as o}from"@lifesg/react-icons/square-fill";import{SquareTickFillIcon as n}from"@lifesg/react-icons/square-tick-fill";import{TickIcon as s}from"@lifesg/react-icons/tick";import a from"clsx";import c from"../../external/lodash/find.js";import u from"../../external/lodash/isEqual.js";import{forwardRef as d,useContext as m,useState as p,useRef as f,useCallback as v,useImperativeHandle as h,useEffect as x}from"react";import{Virtuoso as g}from"react-virtuoso";import{Markup as b}from"../../markup/markup.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as j}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as y}from"../../util/merge-refs.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as T}from"../../util/use-event.js";import{useEventListener as w}from"../../util/use-event-listener.js";import{useIsMounted as N}from"../../util/use-mount.js";import{useCompare as I}from"../../util/use-previous.js";import{VisuallyHidden as L}from"../accessibility/index.js";import{ComponentLoadingSpinner as k}from"../component-loading-spinner/component-loading-spinner.js";import{useDropdownRender as S}from"../dropdown-wrapper/element-with-dropdown.js";import{BasicButton as C}from"../input-wrapper/input-wrapper.js";import{DropdownLabel as D}from"./dropdown-label.js";import{tokens as E,container as q,containerVariantSmall as A,list as F,selectAllContainer as P,baseButton as R,selectAllButton as M,resultStateContainer as O,labelIcon as _,noResultDescContainer as W,spinner as $,tryAgainButton as B,listItem as z,listItemDisabled as U,listItemActiveSelected as V,listItemActive as G,baseCheckboxIndicatorStyle as H,checkboxDisabledIndicator as J,checkboxSelectedIndicator as K,checkboxUnselectedIndicator as Q,baseIndicatorStyle as X,selectedIndicator as Y}from"./dropdown-list.styles.js";import{DropdownListStateContext as Z}from"./dropdown-list-state.js";import{DropdownSearch as ee}from"./dropdown-search.js";import{VirtuosoItem as te,VirtuosoList as re}from"./virtuoso-components.js";const ie=d((({listItems:d,multiSelect:ie,maxSelectable:le,selectedItems:oe,disableItemFocus:ne,itemsLoadState:se="success",itemTruncationType:ae="end",itemMaxLines:ce=2,labelDisplayType:ue="inline",variant:de="default",listboxId:me,ariaLabel:pe,matchElementWidth:fe=!1,width:ve,topScrollItem:he,onSelectItem:xe,onSelectAll:ge,onDismiss:be,onRetry:je,valueExtractor:ye,listExtractor:Te,renderListItem:we,renderCustomCallToAction:Ne,enableSearch:Ie,hideNoResultsDisplay:Le,noResultsDescription:ke,customLabels:Se,searchPlaceholder:Ce,searchFunction:De,onSearch:Ee},qe)=>{const{noResultsLabel:Ae="No results found.",selectAllButtonLabel:Fe="Select all",clearAllButtonLabel:Pe="Clear all"}=Se||{},Re=(null==Se?void 0:Se.searchPlaceholder)||Ce||"Search",Me=(null==Se?void 0:Se.noResultsDescription)||ke,{focusedIndex:Oe,setFocusedIndex:_e}=m(Z),{elementWidth:We,setFloatingRef:$e,getFloatingProps:Be,styles:ze}=S(),[Ue,Ve]=p(""),[Ge,He]=p(null!=d?d:[]),Je=I(se),Ke=N(),Qe=f(null),Xe=f([]),Ye=f(null),Ze=f(null),et=!!le&&!!oe&&(null==oe?void 0:oe.length)===le;let tt,rt="default";ve?(tt=ve,rt="custom"):fe&&We&&(tt=`${We}px`,rt="match"),j(Qe,{[E.containerWidth]:tt});const it=e=>{const t=Te?Te(e):null==e?void 0:e.toString();return"object"==typeof t?{title:t.title,secondaryLabel:t.secondaryLabel}:{title:null!=t?t:""}},lt=v((e=>!!c(oe,(t=>u(t,e)))),[oe]),ot=T((()=>null==De?void 0:De(Ue))),nt=T((()=>null==d?void 0:d.filter((e=>{const{title:t,secondaryLabel:r}=it(e),i=Ue.trim().toLowerCase();return t.toLowerCase().includes(i)||r&&r.toLowerCase().includes(i)})))),st=v((e=>{var t,r;if(ne)return;if(Ye.current)return _e(-1),void setTimeout((()=>{var e;return null===(e=Ye.current)||void 0===e?void 0:e.focus()}),0);const i=null!=Ge?Ge:[];if(0===i.length)return;if(void 0!==(null==e?void 0:e.index)){const r=Math.max(0,Math.min(e.index,i.length-1));return null===(t=Ze.current)||void 0===t||t.scrollToIndex({index:r,align:"center"}),_e(r),void setTimeout((()=>{var e;return null===(e=Xe.current[r])||void 0===e?void 0:e.focus()}),0)}const l=(null==e?void 0:e.preferSelected)?i.findIndex((e=>lt(e))):-1,o=-1!==l?l:Oe>=0&&Oe<i.length?Oe:0;null===(r=Ze.current)||void 0===r||r.scrollToIndex({index:o,align:"center"}),_e(o),setTimeout((()=>{var e;return null===(e=Xe.current[o])||void 0===e?void 0:e.focus()}),0)}),[lt,ne,Ge,Oe,_e]),at=(e,t)=>{et&&!lt(e)||(_e(t),null==xe||xe(e,(e=>ye?ye(e):e)(e)))},ct=e=>{const t=e.target.value;Ve(t),null==Ee||Ee()},ut=()=>{var e;Ve(""),null===(e=Ye.current)||void 0===e||e.focus(),null==Ee||Ee()},dt=()=>null==je?void 0:je();w("keydown",(e=>{var t,r;switch(e.code){case"ArrowDown":if(e.preventDefault(),Oe<Ge.length-1){const e=Oe+1;null===(t=Xe.current[e])||void 0===t||t.focus(),_e(e)}break;case"ArrowUp":if(e.preventDefault(),Oe>0){const e=Oe-1;null===(r=Xe.current[e])||void 0===r||r.focus(),_e(e)}else 0===Oe&&Ye.current&&(Ye.current.focus(),_e(-1));break;case"Space":case"Enter":document.activeElement===Xe.current[Oe]&&(e.preventDefault(),Ge[Oe]&&at(Ge[Oe],Oe))}})),h(qe,(()=>({refocus:st})),[st]),x((()=>{var e;if(!he)return void(null===(e=Ze.current)||void 0===e||e.scrollTo({top:0}));const t=setTimeout((()=>{if(!d)return;const e=d.indexOf(he);Ze.current&&-1!==e&&(Ze.current.scrollToIndex({index:e}),_e(e))}),0);return()=>clearTimeout(t)}),[Xe,d,_e,he]),x((()=>{ne||Ke&&Je&&"success"===se&&Ye.current&&(_e(-1),Ye.current.focus())}),[Ke,Je,se,_e,ne]),x((()=>{var e;He(null!==(e=""===Ue?d:De?ot():nt())&&void 0!==e?e:[])}),[ot,nt,d,De,Ue]),x((()=>{var e,t,r;if(Ke)return;if(ne||!d)return;const i=d.findIndex((e=>lt(e)));Ye.current?(_e(-1),setTimeout((()=>{var e;return null===(e=Ye.current)||void 0===e?void 0:e.focus()}),200)):Oe>0?(null===(e=Ze.current)||void 0===e||e.scrollToIndex({index:Oe,align:"center"}),setTimeout((()=>{var e;return null===(e=Xe.current[Oe])||void 0===e?void 0:e.focus()}),200)):-1!==i?(null===(t=Ze.current)||void 0===t||t.scrollToIndex({index:i,align:"center"}),_e(i),setTimeout((()=>{var e;return null===(e=Xe.current[i])||void 0===e?void 0:e.focus()}),200)):(null===(r=Ze.current)||void 0===r||r.scrollToIndex({index:0}),_e(0),setTimeout((()=>{var e;return null===(e=Xe.current[0])||void 0===e?void 0:e.focus()}),200))}),[lt,ne,Oe,d,Ke,_e]);const mt=e=>ie?et&&!e?t(o,{"aria-hidden":!0,className:a(H,J)}):e?t(n,{"aria-hidden":!0,className:a(H,K)}):t(l,{"aria-hidden":!0,className:a(H,Q)}):e?t(s,{"aria-hidden":!0,className:a(X,Y)}):t("div",{className:X}),pt=(e,r)=>{const{title:i,secondaryLabel:l}=it(e);return t(D,{displayType:ue,label:i,maxLines:ce,selected:r,disabled:!r&&et,sublabel:l,truncationType:ae,variant:de})},ft=(i,l)=>{if(!je||"success"===se){const o=lt(i),n=l===Oe,s=!o&&et;return t("li",{"aria-selected":o,"aria-multiselectable":ie,"aria-disabled":s,"aria-posinset":l+1,"aria-setsize":null==Ge?void 0:Ge.length,"data-testid":"list-item",onClick:()=>at(i,l),onMouseEnter:()=>(e=>_e(e))(l),ref:e=>{Xe.current[l]=e},role:"option",tabIndex:n?0:-1,className:a(z,s&&U||n&&o&&V||n&&G),children:we?we(i,{selected:o}):e(r,{children:[mt(o),pt(i,o)]})},((e,t)=>`item_${t}__${ye?ye(e):e}`)(i,l))}},vt=()=>{if((Ie||De)&&"success"===se)return t(ee,{ref:Ye,onChange:ct,value:Ue,placeholder:Re,"data-testid":"search-input","aria-label":"Enter text to search",onClear:ut,variant:de})},ht=()=>{if(oe&&ie&&Ge.length>0&&!Ue&&"success"===se)return t("div",{className:P,children:t(C,{onClick:ge,type:"button",className:a(R,M),children:le||0!==oe.length?Pe:Fe})})},xt=()=>{if(!Le&&(Ue||!Ie)&&0===Ge.length&&"success"===se)return e(r,{children:[e("div",{"data-testid":"list-no-results",className:O,children:[t(i,{"data-testid":"no-result-icon",className:_}),Ae]}),Me&&t(b,{"data-testid":"no-result-desc",className:W,children:Me})]})},gt=()=>{if(je&&"loading"===se)return e("div",{"data-testid":"list-loading",className:O,children:[t(k,{className:$}),"Loading..."]})},bt=()=>{if(je&&"fail"===se)return e("div",{"data-testid":"list-fail",className:O,children:[t(i,{"data-testid":"load-error-icon",className:_}),"Failed to load. ",t(C,{onClick:dt,type:"button",className:a(R,B),children:"Try again."})]})},jt=()=>{var e;const r="test"===process.env.NODE_ENV;return t(g,Object.assign({ref:Ze,style:{height:"100%"},data:Ge,customScrollParent:null!==(e=Qe.current)&&void 0!==e?e:void 0,itemContent:(e,t)=>ft(t,e),components:{List:re,Item:te},context:{listProps:{id:me,role:"listbox","aria-multiselectable":ie},listItemProps:{role:"none"}}},r?{initialItemCount:Ge.length}:{}),r?Ge.length:void 0)};return e("div",Object.assign({"data-testid":"dropdown-container",ref:y(Qe,$e)},Be(),{"data-width-type":rt,className:a(q,"small"===de&&A),style:ze,children:[t(L,{role:"status",children:pe}),e("div",{"data-testid":"dropdown-list",role:"group","aria-label":pe,className:F,children:[vt(),ht(),xt(),gt(),bt(),jt()]}),(()=>{if(Ne)return t("div",{"data-testid":"custom-cta",children:Ne(be,Ge)})})()]}))}));export{ie as DropdownList};
+//# sourceMappingURL=dropdown-list.js.map