@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/language-switcher/dropdown-variant.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,jsxs as r}from"react/jsx-runtime";import{LanguageIcon as n}from"@lifesg/react-icons/language";import{useState as o,useRef as a,useEffect as i}from"react";import{ElementWithDropdown as l}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as s}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{LANGUAGE_CODES as d,ARIA_LABEL as c,LANGUAGE_DISPLAY_MAP as u}from"./data.js";import{DropdownPanel as p,DropdownList as m,DropdownItem as f,StyledExpandableElement as g,LanguageIconWrapper as h}from"./dropdown-variant.style.js";import{SelectedIndicator as v,UnselectedIndicator as b}from"../shared/dropdown-list/dropdown-list.styles.js";const j=j=>{var{selectedLanguage:w,onSelectLanguage:x,testId:$}=j,D=e(j,["selectedLanguage","onSelectLanguage","testId"]);const[O,k]=o(!1),[y,I]=o(-1),L=a(null),E=a([]),T=`listbox-${s()}`;i((()=>{if(O){const e=d.indexOf(w),t=e>=0?e:0;I(t),setTimeout((()=>{var e;null===(e=E.current[t])||void 0===e||e.focus()}),0)}else I(-1)}),[O,w]);const A=e=>{var t;x(e),k(!1),null===(t=L.current)||void 0===t||t.focus()},C=e=>{var t,r,n,o;switch(e.key){case"ArrowDown":{e.preventDefault();const r=Math.min(y+1,d.length-1);I(r),null===(t=E.current[r])||void 0===t||t.focus();break}case"ArrowUp":{e.preventDefault();const t=Math.max(y-1,0);I(t),null===(r=E.current[t])||void 0===r||r.focus();break}case"Home":e.preventDefault(),I(0),null===(n=E.current[0])||void 0===n||n.focus();break;case"End":{e.preventDefault();const t=d.length-1;I(t),null===(o=E.current[t])||void 0===o||o.focus();break}case"Enter":case" ":e.preventDefault(),y>=0&&A(d[y])}};return t("div",Object.assign({"data-testid":$},D,{children:t(l,{enabled:!0,isOpen:O,renderElement:()=>r(g,{ref:L,disabled:!1,expanded:O,listboxId:T,popupRole:"listbox",readOnly:!1,"aria-label":`${c}, ${u[w]}`,"data-testid":`${$}--trigger`,children:[t(h,{"aria-hidden":!0,children:t(n,{})}),u[w]]}),renderDropdown:({elementWidth:e,styles:n,setFloatingRef:o,getFloatingProps:a})=>t(p,Object.assign({ref:o,style:Object.assign(Object.assign({},n),{width:e}),"data-testid":`${$}--panel`},a(),{children:t(m,{role:"listbox",id:T,"aria-label":c,onKeyDown:C,children:d.map(((e,n)=>{const o=e===w,a=n===y;return r(f,{ref:e=>{E.current[n]=e},role:"option",lang:e,"aria-selected":o,tabIndex:a?0:-1,$active:a,$selected:o,$disabled:!1,onClick:()=>A(e),"data-testid":`${$}--item-${e}`,children:[o?t(v,{"aria-hidden":!0}):t(b,{}),u[e]]},e)}))})})),onOpen:()=>{k(!0)},onClose:()=>{k(!1)},onDismiss:()=>{var e;k(!1),null===(e=L.current)||void 0===e||e.focus()},clickToToggle:!0,offset:8})}))};export{j as DropdownVariant};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as t}from"react/jsx-runtime";import{LanguageIcon as o}from"@lifesg/react-icons/language";import{useState as s,useRef as i,useEffect as n}from"react";import"clsx";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as a}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_mloii0.css";import"../shared/dropdown-list/dropdown-list.js";import"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as l}from"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../markup/markup.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as d}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_konwm.css";import"../shared/dropdown-list/dropdown-search.js";import"../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import"../shared/dropdown-list/virtuoso-components.js";import{LANGUAGE_CODES as p,LANGUAGE_DISPLAY_MAP as m,ARIA_LABEL as c}from"./data.js";import{DropdownPanel as u}from"./dropdown-panel.js";import{expandableElement as h,languageIconWrapper as f}from"./dropdown-variant.styles.js";const g=g=>{var{selectedLanguage:j,onSelectLanguage:w,testId:v}=g,x=e(g,["selectedLanguage","onSelectLanguage","testId"]);const[_,b]=s(!1),[k,y]=s(-1),A=i(null),I=i([]),T=`listbox-${a()}`;n((()=>{if(_){const e=p.indexOf(j),r=e>=0?e:0;y(r),setTimeout((()=>{var e;null===(e=I.current[r])||void 0===e||e.focus()}),0)}else y(-1)}),[_,j]);const D=e=>{var r;w(e),b(!1),null===(r=A.current)||void 0===r||r.focus()},q=e=>{var r,t,o,s;switch(e.key){case"ArrowDown":{e.preventDefault();const t=Math.min(k+1,p.length-1);y(t),null===(r=I.current[t])||void 0===r||r.focus();break}case"ArrowUp":{e.preventDefault();const r=Math.max(k-1,0);y(r),null===(t=I.current[r])||void 0===t||t.focus();break}case"Home":e.preventDefault(),y(0),null===(o=I.current[0])||void 0===o||o.focus();break;case"End":{e.preventDefault();const r=p.length-1;y(r),null===(s=I.current[r])||void 0===s||s.focus();break}case"Enter":case" ":e.preventDefault(),k>=0&&D(p[k])}};return r("div",Object.assign({"data-testid":v},x,{children:r(d,{enabled:!0,isOpen:_,renderElement:()=>t(l,{ref:A,className:h,disabled:!1,expanded:_,listboxId:T,popupRole:"listbox",readOnly:!1,"aria-label":`${c}, ${m[j]}`,"data-testid":`${v}--trigger`,children:[r("span",{className:f,"aria-hidden":!0,children:r(o,{})}),m[j]]}),renderDropdown:()=>r(u,{focusedIndex:k,handleItemSelect:D,handleListKeyDown:q,itemRefs:I,listboxId:T,selectedLanguage:j,testId:v}),onOpen:()=>{b(!0)},onClose:()=>{b(!1)},onDismiss:()=>{var e;b(!1),null===(e=A.current)||void 0===e||e.focus()},clickToToggle:!0,offset:8})}))};export{g as DropdownVariant};
 //# sourceMappingURL=dropdown-variant.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-variant.js","sources":["../../src/language-switcher/dropdown-variant.tsx"],"sourcesContent":["import { LanguageIcon } from \"@lifesg/react-icons/language\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport {\n    DropdownRenderProps,\n    ElementWithDropdown,\n} from \"../shared/dropdown-wrapper\";\nimport { useId } from \"../util\";\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport {\n    DropdownItem,\n    DropdownList,\n    DropdownPanel,\n    LanguageIconWrapper,\n    SelectedIndicator,\n    StyledExpandableElement,\n    UnselectedIndicator,\n} from \"./dropdown-variant.style\";\nimport { VariantInternalProps } from \"./internal-types\";\nimport { LanguageSwitcherCode } from \"./types\";\n\nexport const DropdownVariant = ({\n    selectedLanguage,\n    onSelectLanguage,\n    testId,\n    ...otherProps\n}: VariantInternalProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const [focusedIndex, setFocusedIndex] = useState(-1);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const itemRefs = useRef<(HTMLLIElement | null)[]>([]);\n\n    const id = useId();\n    const listboxId = `listbox-${id}`;\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (isOpen) {\n            const selectedIdx = LANGUAGE_CODES.indexOf(selectedLanguage);\n            const idx = selectedIdx >= 0 ? selectedIdx : 0;\n            setFocusedIndex(idx);\n            setTimeout(() => {\n                itemRefs.current[idx]?.focus();\n            }, 0);\n        } else {\n            setFocusedIndex(-1);\n        }\n    }, [isOpen, selectedLanguage]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleOpen = () => {\n        setIsOpen(true);\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        triggerRef.current?.focus();\n    };\n\n    const handleItemSelect = (code: LanguageSwitcherCode) => {\n        onSelectLanguage(code);\n        setIsOpen(false);\n        triggerRef.current?.focus();\n    };\n\n    const handleListKeyDown = (event: React.KeyboardEvent) => {\n        switch (event.key) {\n            case \"ArrowDown\": {\n                event.preventDefault();\n                const next = Math.min(\n                    focusedIndex + 1,\n                    LANGUAGE_CODES.length - 1\n                );\n                setFocusedIndex(next);\n                itemRefs.current[next]?.focus();\n                break;\n            }\n            case \"ArrowUp\": {\n                event.preventDefault();\n                const prev = Math.max(focusedIndex - 1, 0);\n                setFocusedIndex(prev);\n                itemRefs.current[prev]?.focus();\n                break;\n            }\n            case \"Home\": {\n                event.preventDefault();\n                setFocusedIndex(0);\n                itemRefs.current[0]?.focus();\n                break;\n            }\n            case \"End\": {\n                event.preventDefault();\n                const last = LANGUAGE_CODES.length - 1;\n                setFocusedIndex(last);\n                itemRefs.current[last]?.focus();\n                break;\n            }\n            case \"Enter\":\n            case \" \": {\n                event.preventDefault();\n                if (focusedIndex >= 0) {\n                    handleItemSelect(LANGUAGE_CODES[focusedIndex]);\n                }\n                break;\n            }\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderElement = () => (\n        <StyledExpandableElement\n            ref={triggerRef}\n            disabled={false}\n            expanded={isOpen}\n            listboxId={listboxId}\n            popupRole=\"listbox\"\n            readOnly={false}\n            aria-label={`${ARIA_LABEL}, ${LANGUAGE_DISPLAY_MAP[selectedLanguage]}`}\n            data-testid={`${testId}--trigger`}\n        >\n            <LanguageIconWrapper aria-hidden>\n                <LanguageIcon />\n            </LanguageIconWrapper>\n            {LANGUAGE_DISPLAY_MAP[selectedLanguage]}\n        </StyledExpandableElement>\n    );\n\n    const renderDropdown = ({\n        elementWidth,\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <DropdownPanel\n            ref={setFloatingRef}\n            style={{ ...styles, width: elementWidth }}\n            data-testid={`${testId}--panel`}\n            {...getFloatingProps()}\n        >\n            <DropdownList\n                role=\"listbox\"\n                id={listboxId}\n                aria-label={ARIA_LABEL}\n                onKeyDown={handleListKeyDown}\n            >\n                {LANGUAGE_CODES.map((code, index) => {\n                    const isSelected = code === selectedLanguage;\n                    const isFocused = index === focusedIndex;\n                    return (\n                        <DropdownItem\n                            key={code}\n                            ref={(el: HTMLLIElement | null) => {\n                                itemRefs.current[index] = el;\n                            }}\n                            role=\"option\"\n                            lang={code}\n                            aria-selected={isSelected}\n                            tabIndex={isFocused ? 0 : -1}\n                            $active={isFocused}\n                            $selected={isSelected}\n                            $disabled={false}\n                            onClick={() => handleItemSelect(code)}\n                            data-testid={`${testId}--item-${code}`}\n                        >\n                            {isSelected ? (\n                                <SelectedIndicator aria-hidden />\n                            ) : (\n                                <UnselectedIndicator />\n                            )}\n                            {LANGUAGE_DISPLAY_MAP[code]}\n                        </DropdownItem>\n                    );\n                })}\n            </DropdownList>\n        </DropdownPanel>\n    );\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    return (\n        <div data-testid={testId} {...otherProps}>\n            <ElementWithDropdown\n                enabled={true}\n                isOpen={isOpen}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n            />\n        </div>\n    );\n};\n"],"names":["DropdownVariant","_a","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","triggerRef","useRef","itemRefs","listboxId","useId","useEffect","selectedIdx","LANGUAGE_CODES","indexOf","idx","setTimeout","current","focus","handleItemSelect","code","handleListKeyDown","event","key","preventDefault","next","Math","min","length","prev","max","_b","_c","last","_d","_jsx","children","ElementWithDropdown","enabled","renderElement","_jsxs","StyledExpandableElement","ref","disabled","expanded","popupRole","readOnly","ARIA_LABEL","LANGUAGE_DISPLAY_MAP","LanguageIconWrapper","LanguageIcon","renderDropdown","elementWidth","styles","setFloatingRef","getFloatingProps","DropdownPanel","Object","assign","style","width","DropdownList","role","id","onKeyDown","map","index","isSelected","isFocused","DropdownItem","el","lang","tabIndex","$selected","$disabled","onClick","SelectedIndicator","UnselectedIndicator","onOpen","onClose","onDismiss","clickToToggle","offset"],"mappings":"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"}
+{"version":3,"file":"dropdown-variant.js","sources":["../../src/language-switcher/dropdown-variant.tsx"],"sourcesContent":["import { LanguageIcon } from \"@lifesg/react-icons/language\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { ExpandableElement } from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { useId } from \"../util\";\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport { DropdownPanel } from \"./dropdown-panel\";\nimport * as styles from \"./dropdown-variant.styles\";\nimport type { VariantInternalProps } from \"./internal-types\";\nimport type { LanguageSwitcherCode } from \"./types\";\n\nexport const DropdownVariant = ({\n    selectedLanguage,\n    onSelectLanguage,\n    testId,\n    ...otherProps\n}: VariantInternalProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const [focusedIndex, setFocusedIndex] = useState(-1);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const itemRefs = useRef<(HTMLLIElement | null)[]>([]);\n\n    const id = useId();\n    const listboxId = `listbox-${id}`;\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (isOpen) {\n            const selectedIdx = LANGUAGE_CODES.indexOf(selectedLanguage);\n            const idx = selectedIdx >= 0 ? selectedIdx : 0;\n            setFocusedIndex(idx);\n            setTimeout(() => {\n                itemRefs.current[idx]?.focus();\n            }, 0);\n        } else {\n            setFocusedIndex(-1);\n        }\n    }, [isOpen, selectedLanguage]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleOpen = () => {\n        setIsOpen(true);\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        triggerRef.current?.focus();\n    };\n\n    const handleItemSelect = (code: LanguageSwitcherCode) => {\n        onSelectLanguage(code);\n        setIsOpen(false);\n        triggerRef.current?.focus();\n    };\n\n    const handleListKeyDown = (event: React.KeyboardEvent) => {\n        switch (event.key) {\n            case \"ArrowDown\": {\n                event.preventDefault();\n                const next = Math.min(\n                    focusedIndex + 1,\n                    LANGUAGE_CODES.length - 1\n                );\n                setFocusedIndex(next);\n                itemRefs.current[next]?.focus();\n                break;\n            }\n            case \"ArrowUp\": {\n                event.preventDefault();\n                const prev = Math.max(focusedIndex - 1, 0);\n                setFocusedIndex(prev);\n                itemRefs.current[prev]?.focus();\n                break;\n            }\n            case \"Home\": {\n                event.preventDefault();\n                setFocusedIndex(0);\n                itemRefs.current[0]?.focus();\n                break;\n            }\n            case \"End\": {\n                event.preventDefault();\n                const last = LANGUAGE_CODES.length - 1;\n                setFocusedIndex(last);\n                itemRefs.current[last]?.focus();\n                break;\n            }\n            case \"Enter\":\n            case \" \": {\n                event.preventDefault();\n                if (focusedIndex >= 0) {\n                    handleItemSelect(LANGUAGE_CODES[focusedIndex]);\n                }\n                break;\n            }\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderElement = () => (\n        <ExpandableElement\n            ref={triggerRef}\n            className={styles.expandableElement}\n            disabled={false}\n            expanded={isOpen}\n            listboxId={listboxId}\n            popupRole=\"listbox\"\n            readOnly={false}\n            aria-label={`${ARIA_LABEL}, ${LANGUAGE_DISPLAY_MAP[selectedLanguage]}`}\n            data-testid={`${testId}--trigger`}\n        >\n            <span className={styles.languageIconWrapper} aria-hidden>\n                <LanguageIcon />\n            </span>\n            {LANGUAGE_DISPLAY_MAP[selectedLanguage]}\n        </ExpandableElement>\n    );\n\n    const renderDropdown = () => (\n        <DropdownPanel\n            focusedIndex={focusedIndex}\n            handleItemSelect={handleItemSelect}\n            handleListKeyDown={handleListKeyDown}\n            itemRefs={itemRefs}\n            listboxId={listboxId}\n            selectedLanguage={selectedLanguage}\n            testId={testId}\n        />\n    );\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    return (\n        <div data-testid={testId} {...otherProps}>\n            <ElementWithDropdown\n                enabled={true}\n                isOpen={isOpen}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n            />\n        </div>\n    );\n};\n"],"names":["DropdownVariant","_a","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","triggerRef","useRef","itemRefs","listboxId","useId","useEffect","selectedIdx","LANGUAGE_CODES","indexOf","idx","setTimeout","current","focus","handleItemSelect","code","handleListKeyDown","event","key","preventDefault","next","Math","min","length","prev","max","_b","_c","last","_d","_jsx","children","ElementWithDropdown","enabled","renderElement","_jsxs","ExpandableElement","ref","className","styles.expandableElement","disabled","expanded","popupRole","readOnly","ARIA_LABEL","LANGUAGE_DISPLAY_MAP","styles.languageIconWrapper","LanguageIcon","renderDropdown","DropdownPanel","onOpen","onClose","onDismiss","clickToToggle","offset"],"mappings":"6xEAaO,MAAMA,EAAmBC,QAAAC,iBAC5BA,EAAgBC,iBAChBA,EAAgBC,OAChBA,KACGC,EAAUC,EAAAL,EAJe,CAAA,mBAAA,mBAAA,WAS5B,MAAOM,EAAQC,GAAaC,GAAS,IAC9BC,EAAcC,GAAmBF,GAAS,GAC3CG,EAAaC,EAA0B,MACvCC,EAAWD,EAAiC,IAG5CE,EAAY,WADPC,MAMXC,GAAU,KACN,GAAIV,EAAQ,CACR,MAAMW,EAAcC,EAAeC,QAAQlB,GACrCmB,EAAMH,GAAe,EAAIA,EAAc,EAC7CP,EAAgBU,GAChBC,YAAW,WACc,QAArBrB,EAAAa,EAASS,QAAQF,UAAI,IAAApB,GAAAA,EAAEuB,OAAO,GAC/B,EACP,MACIb,GAAgB,EACpB,GACD,CAACJ,EAAQL,IAKZ,MAaMuB,EAAoBC,UACtBvB,EAAiBuB,GACjBlB,GAAU,GACQ,QAAlBP,EAAAW,EAAWW,eAAO,IAAAtB,GAAAA,EAAEuB,OAAO,EAGzBG,EAAqBC,gBACvB,OAAQA,EAAMC,KACV,IAAK,YAAa,CACdD,EAAME,iBACN,MAAMC,EAAOC,KAAKC,IACdvB,EAAe,EACfS,EAAee,OAAS,GAE5BvB,EAAgBoB,GACM,QAAtB9B,EAAAa,EAASS,QAAQQ,UAAK,IAAA9B,GAAAA,EAAEuB,QACxB,KACJ,CACA,IAAK,UAAW,CACZI,EAAME,iBACN,MAAMK,EAAOH,KAAKI,IAAI1B,EAAe,EAAG,GACxCC,EAAgBwB,GACM,QAAtBE,EAAAvB,EAASS,QAAQY,UAAK,IAAAE,GAAAA,EAAEb,QACxB,KACJ,CACA,IAAK,OACDI,EAAME,iBACNnB,EAAgB,GACG,QAAnB2B,EAAAxB,EAASS,QAAQ,UAAE,IAAAe,GAAAA,EAAEd,QACrB,MAEJ,IAAK,MAAO,CACRI,EAAME,iBACN,MAAMS,EAAOpB,EAAee,OAAS,EACrCvB,EAAgB4B,GACM,QAAtBC,EAAA1B,EAASS,QAAQgB,UAAK,IAAAC,GAAAA,EAAEhB,QACxB,KACJ,CACA,IAAK,QACL,IAAK,IACDI,EAAME,iBACFpB,GAAgB,GAChBe,EAAiBN,EAAeT,MA4ChD,OACI+B,qCAAkBrC,GAAYC,EAAU,CAAAqC,SACpCD,EAACE,EAAmB,CAChBC,SAAS,EACTrC,OAAQA,EACRsC,cAvCU,IAClBC,EAACC,EAAiB,CACdC,IAAKpC,EACLqC,UAAWC,EACXC,UAAU,EACVC,SAAU7C,EACVQ,UAAWA,EACXsC,UAAU,UACVC,UAAU,EAAK,aACH,GAAGC,MAAeC,EAAqBtD,KAAmB,cACzD,GAAGE,aAAiBsC,SAAA,CAEjCD,EAAA,OAAA,CAAMQ,UAAWQ,EAA0B,eAAA,EAAAf,SACvCD,EAACiB,EAAY,CAAA,KAEhBF,EAAqBtD,MAyBlByD,eArBW,IACnBlB,EAACmB,EAAa,CACVlD,aAAcA,EACde,iBAAkBA,EAClBE,kBAAmBA,EACnBb,SAAUA,EACVC,UAAWA,EACXb,iBAAkBA,EAClBE,OAAQA,IAcJyD,OA1GO,KACfrD,GAAU,EAAK,EA0GPsD,QAvGQ,KAChBtD,GAAU,EAAM,EAuGRuD,UApGU,WAClBvD,GAAU,GACQ,QAAlBP,EAAAW,EAAWW,eAAO,IAAAtB,GAAAA,EAAEuB,OAAO,EAmGnBwC,eAAa,EACbC,OAAQ,MAEV"}

package/language-switcher/dropdown-variant.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const expandableElement: import("@linaria/core").LinariaClassName;
+export declare const languageIconWrapper: import("@linaria/core").LinariaClassName;

package/language-switcher/dropdown-variant.styles.js

@@ -0,0 +1,2 @@
+import"./dropdown-variant.styles_1vrdfky.css";const e="efqyehf",r="ljv0l5v";export{e as expandableElement,r as languageIconWrapper};
+//# sourceMappingURL=dropdown-variant.styles.js.map

package/language-switcher/dropdown-variant.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-variant.styles.js","sources":["../../src/language-switcher/dropdown-variant.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { iconContainer } from \"../shared/dropdown-list/expandable-element.styles\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const expandableElement = css`\n    min-width: 9rem;\n    width: auto;\n    ${Font[\"body-md-semibold\"]}\n    color: ${Colour[\"text-primary\"]};\n    height: 2.5rem;\n    padding: 0 ${Spacing[\"spacing-16\"]};\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background: ${Colour[\"bg\"]};\n\n    .${iconContainer} {\n        margin-left: auto;\n\n        svg {\n            color: ${Colour[\"text-selected\"]};\n        }\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const languageIconWrapper = css`\n    display: flex;\n    align-items: center;\n    color: ${Colour[\"icon-primary\"]};\n\n    svg {\n        height: 1rem;\n        width: 1rem;\n    }\n`;\n"],"names":["expandableElement","languageIconWrapper"],"mappings":"+EAKO,MAAMA,EAAiB,UAyBjBC,EAAmB"}

package/language-switcher/dropdown-variant.styles_1vrdfky.css

@@ -0,0 +1,2 @@
+@layer fds{.efqyehf{min-width:9rem;width:auto;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text-primary);height:2.5rem;padding:0 var(--fds-spacing-16);border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);}.efqyehf .i11rk48k{margin-left:auto;}.efqyehf .i11rk48k svg{color:var(--fds-colour-text-selected);}.efqyehf:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:-2px;}
+.ljv0l5v{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--fds-colour-icon-primary);}.ljv0l5v svg{height:1rem;width:1rem;}}

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

@@ -1,5 +1,5 @@
-import React from "react";
-import { LanguageSwitcherCode } from "./types";
+import type React from "react";
+import type { LanguageSwitcherCode } from "./types";
 export interface VariantInternalProps extends React.HTMLAttributes<HTMLDivElement> {
     selectedLanguage: LanguageSwitcherCode;
     onSelectLanguage: (code: LanguageSwitcherCode) => void;

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

@@ -1,2 +1,9 @@
-import { LanguageSwitcherProps } from "./types";
+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.
+ * @keywords i18n, internationalisation, locale, translate
+ */
 export declare const LanguageSwitcher: ({ variant, selectedLanguage, onSelectLanguage, "data-testid": testId, ...otherProps }: LanguageSwitcherProps) => JSX.Element;

package/language-switcher/language-switcher.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{announce as a}from"@react-aria/live-announcer";import{DropdownVariant as n}from"./dropdown-variant.js";import{LinkContainerVariant as r}from"./link-container-variant.js";import{LANGUAGE_DISPLAY_MAP as o}from"./data.js";const i=i=>{var{variant:s="dropdown",selectedLanguage:c="en",onSelectLanguage:g,"data-testid":d="language-switcher"}=i,l=e(i,["variant","selectedLanguage","onSelectLanguage","data-testid"]);const u=e=>{e!==c&&g&&(g(e),a(`${o[e]} selected`,"polite"))};switch(s){case"dropdown":return t(n,Object.assign({selectedLanguage:c,onSelectLanguage:u,testId:d},l));case"link-container":return t(r,Object.assign({selectedLanguage:c,onSelectLanguage:u,testId:d},l))}};export{i as LanguageSwitcher};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{announce as a}from"@react-aria/live-announcer";import{LANGUAGE_DISPLAY_MAP as n}from"./data.js";import{DropdownVariant as r}from"./dropdown-variant.js";import{LinkContainerVariant as o}from"./link-container-variant.js";const i=i=>{var{variant:s="dropdown",selectedLanguage:c="en",onSelectLanguage:g,"data-testid":d="language-switcher"}=i,l=e(i,["variant","selectedLanguage","onSelectLanguage","data-testid"]);const u=e=>{e!==c&&g&&(g(e),a(`${n[e]} selected`,"polite"))};switch(s){case"dropdown":return t(r,Object.assign({selectedLanguage:c,onSelectLanguage:u,testId:d},l));case"link-container":return t(o,Object.assign({selectedLanguage:c,onSelectLanguage:u,testId:d},l))}};export{i as LanguageSwitcher};
 //# sourceMappingURL=language-switcher.js.map

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\";\nimport { DropdownVariant } from \"./dropdown-variant\";\nimport { LinkContainerVariant } from \"./link-container-variant\";\nimport { LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport { 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":"yTAMO,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 * @keywords i18n, internationalisation, locale, translate\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":"yTAeO,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/link-container-variant.d.ts

@@ -1,2 +1,2 @@
-import { VariantInternalProps } from "./internal-types";
-export declare const LinkContainerVariant: ({ selectedLanguage, onSelectLanguage, testId, ...otherProps }: VariantInternalProps) => JSX.Element;
+import type { VariantInternalProps } from "./internal-types";
+export declare const LinkContainerVariant: ({ selectedLanguage, onSelectLanguage, testId, className, ...otherProps }: VariantInternalProps) => JSX.Element;

package/language-switcher/link-container-variant.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{useRef as r}from"react";import{LinkContainerWrapper as a,LinkList as n,LinkListItem as o,LinkItem as c}from"./link-container-variant.style.js";import{ARIA_LABEL as l,LANGUAGE_CODES as s,LANGUAGE_DISPLAY_MAP as i}from"./data.js";const u=u=>{var{selectedLanguage:d,onSelectLanguage:m,testId:p}=u,g=e(u,["selectedLanguage","onSelectLanguage","testId"]);const f=r([]);return t(a,Object.assign({"data-testid":p},g,{children:t(n,{role:"group","aria-label":l,children:s.map(((e,r)=>{const a=e===d;return t(o,{children:t(c,{ref:e=>{f.current[r]=e},type:"button",lang:e,$active:a,"aria-pressed":a,tabIndex:a?0:-1,onClick:()=>m(e),onKeyDown:e=>((e,t)=>{var r;let a=null;switch(e.key){case"ArrowRight":case"ArrowDown":e.preventDefault(),a=Math.min(t+1,s.length-1);break;case"ArrowLeft":case"ArrowUp":e.preventDefault(),a=Math.max(t-1,0);break;case"Enter":case" ":{e.preventDefault();const r=s[t];m(r);break}}null!==a&&(null===(r=f.current[a])||void 0===r||r.focus())})(e,r),"data-testid":`${p}--item-${e}`,children:i[e]})},e)}))})}))};export{u as LinkContainerVariant};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import a from"clsx";import{useRef as r}from"react";import{ARIA_LABEL as s,LANGUAGE_CODES as n,LANGUAGE_DISPLAY_MAP as l}from"./data.js";import{linkContainerWrapper as c,linkList as o,linkListItem as i,linkItem as m,linkItemActive as u}from"./link-container-variant.styles.js";const d=d=>{var{selectedLanguage:p,onSelectLanguage:g,testId:f,className:b}=d,h=e(d,["selectedLanguage","onSelectLanguage","testId","className"]);const v=r([]);return t("div",Object.assign({className:a(c,b),"data-testid":f},h,{children:t("ul",{className:o,role:"group","aria-label":s,children:n.map(((e,r)=>{const s=e===p;return t("li",{className:i,children:t("button",{ref:e=>{v.current[r]=e},type:"button",lang:e,className:a(m,s&&u),"aria-pressed":s,tabIndex:s?0:-1,onClick:()=>g(e),onKeyDown:e=>((e,t)=>{var a;let r=null;switch(e.key){case"ArrowRight":case"ArrowDown":e.preventDefault(),r=Math.min(t+1,n.length-1);break;case"ArrowLeft":case"ArrowUp":e.preventDefault(),r=Math.max(t-1,0);break;case"Enter":case" ":{e.preventDefault();const a=n[t];g(a);break}}null!==r&&(null===(a=v.current[r])||void 0===a||a.focus())})(e,r),"data-testid":`${f}--item-${e}`,children:l[e]})},e)}))})}))};export{d as LinkContainerVariant};
 //# sourceMappingURL=link-container-variant.js.map

package/language-switcher/link-container-variant.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-container-variant.js","sources":["../../src/language-switcher/link-container-variant.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport {\n    LinkContainerWrapper,\n    LinkItem,\n    LinkList,\n    LinkListItem,\n} from \"./link-container-variant.style\";\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport { VariantInternalProps } from \"./internal-types\";\n\nexport const LinkContainerVariant = ({\n    selectedLanguage,\n    onSelectLanguage,\n    testId,\n    ...otherProps\n}: VariantInternalProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleKeyDown = (event: React.KeyboardEvent, index: number) => {\n        let nextIndex: number | null = null;\n\n        switch (event.key) {\n            case \"ArrowRight\":\n            case \"ArrowDown\": {\n                event.preventDefault();\n                nextIndex = Math.min(index + 1, LANGUAGE_CODES.length - 1);\n                break;\n            }\n            case \"ArrowLeft\":\n            case \"ArrowUp\": {\n                event.preventDefault();\n                nextIndex = Math.max(index - 1, 0);\n                break;\n            }\n            case \"Enter\":\n            case \" \": {\n                event.preventDefault();\n                const code = LANGUAGE_CODES[index];\n                onSelectLanguage(code);\n                break;\n            }\n        }\n\n        if (nextIndex !== null) {\n            itemRefs.current[nextIndex]?.focus();\n        }\n    };\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    return (\n        <LinkContainerWrapper data-testid={testId} {...otherProps}>\n            <LinkList role=\"group\" aria-label={ARIA_LABEL}>\n                {LANGUAGE_CODES.map((code, index) => {\n                    const isActive = code === selectedLanguage;\n                    return (\n                        <LinkListItem key={code}>\n                            <LinkItem\n                                ref={(el) => {\n                                    itemRefs.current[index] = el;\n                                }}\n                                type=\"button\"\n                                lang={code}\n                                $active={isActive}\n                                aria-pressed={isActive}\n                                tabIndex={isActive ? 0 : -1}\n                                onClick={() => onSelectLanguage(code)}\n                                onKeyDown={(e) => handleKeyDown(e, index)}\n                                data-testid={`${testId}--item-${code}`}\n                            >\n                                {LANGUAGE_DISPLAY_MAP[code]}\n                            </LinkItem>\n                        </LinkListItem>\n                    );\n                })}\n            </LinkList>\n        </LinkContainerWrapper>\n    );\n};\n"],"names":["LinkContainerVariant","_a","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","itemRefs","useRef","_jsx","LinkContainerWrapper","Object","assign","children","LinkList","role","ARIA_LABEL","LANGUAGE_CODES","map","code","index","isActive","LinkListItem","LinkItem","ref","el","current","type","lang","$active","tabIndex","onClick","onKeyDown","e","event","nextIndex","key","preventDefault","Math","min","length","max","focus","handleKeyDown","LANGUAGE_DISPLAY_MAP"],"mappings":"kUAUO,MAAMA,EAAwBC,QAAAC,iBACjCA,EAAgBC,iBAChBA,EAAgBC,OAChBA,KACGC,EAAUC,EAAAL,EAJoB,CAAA,mBAAA,mBAAA,WASjC,MAAMM,EAAWC,EAAqC,IAsCtD,OACIC,EAACC,EAAoBC,OAAAC,OAAA,CAAA,cAAcR,GAAYC,EAAU,CAAAQ,SACrDJ,EAACK,EAAQ,CAACC,KAAK,QAAO,aAAaC,EAAUH,SACxCI,EAAeC,KAAI,CAACC,EAAMC,KACvB,MAAMC,EAAWF,IAASjB,EAC1B,OACIO,EAACa,EAAY,CAAAT,SACTJ,EAACc,EAAQ,CACLC,IAAMC,IACFlB,EAASmB,QAAQN,GAASK,CAAE,EAEhCE,KAAK,SACLC,KAAMT,EAAIU,QACDR,EAAQ,eACHA,EACdS,SAAUT,EAAW,GAAI,EACzBU,QAAS,IAAM5B,EAAiBgB,GAChCa,UAAYC,GAlDlB,EAACC,EAA4Bd,WAC/C,IAAIe,EAA2B,KAE/B,OAAQD,EAAME,KACV,IAAK,aACL,IAAK,YACDF,EAAMG,iBACNF,EAAYG,KAAKC,IAAInB,EAAQ,EAAGH,EAAeuB,OAAS,GACxD,MAEJ,IAAK,YACL,IAAK,UACDN,EAAMG,iBACNF,EAAYG,KAAKG,IAAIrB,EAAQ,EAAG,GAChC,MAEJ,IAAK,QACL,IAAK,IAAK,CACNc,EAAMG,iBACN,MAAMlB,EAAOF,EAAeG,GAC5BjB,EAAiBgB,GACjB,KACJ,EAGc,OAAdgB,IAC2B,QAA3BlC,EAAAM,EAASmB,QAAQS,UAAU,IAAAlC,GAAAA,EAAEyC,QACjC,EAuB0CC,CAAcV,EAAGb,GAAM,cAC5B,GAAGhB,WAAgBe,aAE/ByB,EAAqBzB,MAdXA,EAgBJ,QAIR"}
+{"version":3,"file":"link-container-variant.js","sources":["../../src/language-switcher/link-container-variant.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef } from \"react\";\n\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport type { VariantInternalProps } from \"./internal-types\";\nimport * as styles from \"./link-container-variant.styles\";\n\nexport const LinkContainerVariant = ({\n    selectedLanguage,\n    onSelectLanguage,\n    testId,\n    className,\n    ...otherProps\n}: VariantInternalProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleKeyDown = (event: React.KeyboardEvent, index: number) => {\n        let nextIndex: number | null = null;\n\n        switch (event.key) {\n            case \"ArrowRight\":\n            case \"ArrowDown\": {\n                event.preventDefault();\n                nextIndex = Math.min(index + 1, LANGUAGE_CODES.length - 1);\n                break;\n            }\n            case \"ArrowLeft\":\n            case \"ArrowUp\": {\n                event.preventDefault();\n                nextIndex = Math.max(index - 1, 0);\n                break;\n            }\n            case \"Enter\":\n            case \" \": {\n                event.preventDefault();\n                const code = LANGUAGE_CODES[index];\n                onSelectLanguage(code);\n                break;\n            }\n        }\n\n        if (nextIndex !== null) {\n            itemRefs.current[nextIndex]?.focus();\n        }\n    };\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    return (\n        <div\n            className={clsx(styles.linkContainerWrapper, className)}\n            data-testid={testId}\n            {...otherProps}\n        >\n            <ul\n                className={styles.linkList}\n                role=\"group\"\n                aria-label={ARIA_LABEL}\n            >\n                {LANGUAGE_CODES.map((code, index) => {\n                    const isActive = code === selectedLanguage;\n                    return (\n                        <li className={styles.linkListItem} key={code}>\n                            <button\n                                ref={(el) => {\n                                    itemRefs.current[index] = el;\n                                }}\n                                type=\"button\"\n                                lang={code}\n                                className={clsx(\n                                    styles.linkItem,\n                                    isActive && styles.linkItemActive\n                                )}\n                                aria-pressed={isActive}\n                                tabIndex={isActive ? 0 : -1}\n                                onClick={() => onSelectLanguage(code)}\n                                onKeyDown={(e) => handleKeyDown(e, index)}\n                                data-testid={`${testId}--item-${code}`}\n                            >\n                                {LANGUAGE_DISPLAY_MAP[code]}\n                            </button>\n                        </li>\n                    );\n                })}\n            </ul>\n        </div>\n    );\n};\n"],"names":["LinkContainerVariant","_a","selectedLanguage","onSelectLanguage","testId","className","otherProps","__rest","itemRefs","useRef","_jsx","Object","assign","clsx","styles.linkContainerWrapper","styles.linkList","role","ARIA_LABEL","children","LANGUAGE_CODES","map","code","index","isActive","styles.linkListItem","ref","el","current","type","lang","styles.linkItem","styles.linkItemActive","tabIndex","onClick","onKeyDown","e","event","nextIndex","key","preventDefault","Math","min","length","max","focus","handleKeyDown","LANGUAGE_DISPLAY_MAP"],"mappings":"2WAQO,MAAMA,EAAwBC,IAAA,IAAAC,iBACjCA,EAAgBC,iBAChBA,EAAgBC,OAChBA,EAAMC,UACNA,GAASJ,EACNK,EAAUC,EAAAN,EALoB,CAAA,mBAAA,mBAAA,SAAA,cAUjC,MAAMO,EAAWC,EAAqC,IAsCtD,OACIC,EAAA,MAAAC,OAAAC,OAAA,CACIP,UAAWQ,EAAKC,EAA6BT,GAAU,cAC1CD,GACTE,YAEJI,EAAA,KAAA,CACIL,UAAWU,EACXC,KAAK,qBACOC,EAAUC,SAErBC,EAAeC,KAAI,CAACC,EAAMC,KACvB,MAAMC,EAAWF,IAASnB,EAC1B,OACIQ,EAAA,KAAA,CAAIL,UAAWmB,EAAmBN,SAC9BR,EAAA,SAAA,CACIe,IAAMC,IACFlB,EAASmB,QAAQL,GAASI,CAAE,EAEhCE,KAAK,SACLC,KAAMR,EACNhB,UAAWQ,EACPiB,EACAP,GAAYQ,GACf,eACaR,EACdS,SAAUT,EAAW,GAAI,EACzBU,QAAS,IAAM9B,EAAiBkB,GAChCa,UAAYC,GA7DlB,EAACC,EAA4Bd,WAC/C,IAAIe,EAA2B,KAE/B,OAAQD,EAAME,KACV,IAAK,aACL,IAAK,YACDF,EAAMG,iBACNF,EAAYG,KAAKC,IAAInB,EAAQ,EAAGH,EAAeuB,OAAS,GACxD,MAEJ,IAAK,YACL,IAAK,UACDN,EAAMG,iBACNF,EAAYG,KAAKG,IAAIrB,EAAQ,EAAG,GAChC,MAEJ,IAAK,QACL,IAAK,IAAK,CACNc,EAAMG,iBACN,MAAMlB,EAAOF,EAAeG,GAC5BnB,EAAiBkB,GACjB,KACJ,EAGc,OAAdgB,IAC2B,QAA3BpC,EAAAO,EAASmB,QAAQU,UAAU,IAAApC,GAAAA,EAAE2C,QACjC,EAkC0CC,CAAcV,EAAGb,GAAM,cAC5B,GAAGlB,WAAgBiB,IAAMH,SAErC4B,EAAqBzB,MAjBWA,EAmBpC,QAIf"}

package/language-switcher/link-container-variant.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const linkContainerWrapper: import("@linaria/core").LinariaClassName;
+export declare const linkList: import("@linaria/core").LinariaClassName;
+export declare const linkListItem: import("@linaria/core").LinariaClassName;
+export declare const linkItem: import("@linaria/core").LinariaClassName;
+export declare const linkItemActive: import("@linaria/core").LinariaClassName;

package/language-switcher/link-container-variant.styles.js

@@ -0,0 +1,2 @@
+import"./link-container-variant.styles_1iw6zux.css";const l="ldxubbp",t="lqgsuoq",e="l3egc8p",r="lrbzpdb",s="l1retz23";export{l as linkContainerWrapper,r as linkItem,s as linkItemActive,t as linkList,e as linkListItem};
+//# sourceMappingURL=link-container-variant.styles.js.map

package/language-switcher/link-container-variant.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-container-variant.styles.js","sources":["../../src/language-switcher/link-container-variant.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// LINK CONTAINER STYLES\n// =============================================================================\nexport const linkContainerWrapper = css`\n    display: inline-flex;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    align-items: center;\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background: ${Colour[\"bg\"]};\n`;\n\nexport const linkList = css`\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    align-items: center;\n    gap: 0 ${Spacing[\"spacing-8\"]};\n    flex-wrap: wrap;\n`;\n\nexport const linkListItem = css`\n    display: flex;\n    align-items: center;\n`;\n\nexport const linkItem = css`\n    display: flex;\n    padding: 0.25rem 0.5rem;\n    justify-content: center;\n    align-items: center;\n    gap: 0.625rem;\n    border: none;\n    border-radius: ${Radius[\"md\"]};\n    ${Font[\"body-md-semibold\"]}\n    color: ${Colour[\"text-subtler\"]};\n    text-align: center;\n    transition: color ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n    background: none;\n    cursor: pointer;\n\n    &:hover {\n        color: ${Colour[\"text-hover\"]};\n        text-decoration: underline;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const linkItemActive = css`\n    background: ${Colour[\"bg-primary-subtler\"]};\n    color: ${Colour[\"text-selected\"]};\n    cursor: default;\n\n    &:hover {\n        color: ${Colour[\"text-selected\"]};\n        text-decoration: none;\n    }\n`;\n"],"names":["linkContainerWrapper","linkList","linkListItem","linkItem","linkItemActive"],"mappings":"qFAOO,MAAMA,EAAoB,UASpBC,EAAQ,UAURC,EAAY,UAKZC,EAAQ,UA0BRC,EAAc"}

package/language-switcher/link-container-variant.styles_1iw6zux.css

@@ -0,0 +1,5 @@
+@layer fds{.ldxubbp{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:var(--fds-spacing-8) var(--fds-spacing-16);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);}
+.lqgsuoq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;margin:0;padding:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0 var(--fds-spacing-8);-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
+.l3egc8p{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.lrbzpdb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:0.25rem 0.5rem;-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;gap:0.625rem;border:none;border-radius:var(--fds-radius-md);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text-subtler);text-align:center;-webkit-transition:color var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:color var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);background:none;cursor:pointer;}.lrbzpdb:hover{color:var(--fds-colour-text-hover);-webkit-text-decoration:underline;text-decoration:underline;}.lrbzpdb:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:-2px;}
+.l1retz23{background:var(--fds-colour-bg-primary-subtler);color:var(--fds-colour-text-selected);cursor:default;}.l1retz23:hover{color:var(--fds-colour-text-selected);-webkit-text-decoration:none;text-decoration:none;}}

package/language-switcher/types.d.ts

@@ -1,9 +1,32 @@
-import React from "react";
+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/col-div.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { ColDivProps } from "./types";
+import type { ColDivProps } from "./types";
 export declare const ColDiv: (props: ColDivProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/layout/col-div.js

@@ -1,2 +1,2 @@
-import{__rest as s}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import r,{useContext as a}from"react";import{StyledDiv as o}from"./col-div.style.js";import{BreakpointValues as n}from"../theme/breakpoint/theme-helper.js";import{ThemeContext as e}from"styled-components";const m=r.forwardRef(((r,m)=>{const l=a(e),{xxlCols:x,xlCols:p,lgCols:i,mdCols:c,smCols:$,xsCols:u,xxsCols:C}=r,d=s(r,["xxlCols","xlCols","lgCols","mdCols","smCols","xsCols","xxsCols"]),S=(s,t,r)=>{if(!s)return{start:void 0,span:void 0};if("development"===process.env.NODE_ENV&&("number"==typeof s&&s>t?console.warn(`Warning: ${r}Cols exceeds maximum (${t}): ${s}`):Array.isArray(s)&&(s[0]>t+1||s[1]>t+1)&&console.warn(`Warning: ${r}Cols array exceeds maximum (${t}): [${s[0]}, ${s[1]}]`)),Array.isArray(s)){const[r,a]=s;if(-1===a)return{start:r,span:t-r+1};return{start:r,span:Math.min(a-r,t)}}return{start:void 0,span:Math.min(s,t)}};return t(o,Object.assign({ref:m},(()=>{const s=n["xxl-column"]({theme:l}),t=n["xl-column"]({theme:l}),r=n["lg-column"]({theme:l}),a=n["md-column"]({theme:l}),o=n["sm-column"]({theme:l}),e=n["xs-column"]({theme:l}),m=n["xxs-column"]({theme:l}),d=S(x||p||i||c||$||u||C,s,"xxl"),f=S(p||i||c||$||u||C,t,"xl"),h=S(i||c||$||u||C,r,"lg"),g=S(c||$||u||C,a,"md"),y=S($||u||C,o,"sm"),v=S(u||C,e,"xs"),j=S(C,m,"xxs");return{$xxlStart:d.start,$xxlSpan:d.span,$xlStart:f.start,$xlSpan:f.span,$lgStart:h.start,$lgSpan:h.span,$mdStart:g.start,$mdSpan:g.span,$smStart:y.start,$smSpan:y.span,$xsStart:v.start,$xsSpan:v.span,$xxsStart:j.start,$xxsSpan:j.span}})(),d))}));export{m as ColDiv};
+import{__rest as t}from"../_virtual/_tslib.js";import{jsx as s}from"react/jsx-runtime";import r from"clsx";import e,{useRef as n}from"react";import"../theme/theme-provider/index.js";import{parseCSSVariableValue as o}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as l}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as m}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 a}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useIsMounted as i}from"../util/use-mount.js";import{colDiv as x,tokens as p}from"./col-div.styles.js";const d={xxs:{start:p.xxsStart,span:p.xxsSpan,end:p.xxsEnd},xs:{start:p.xsStart,span:p.xsSpan,end:p.xsEnd},sm:{start:p.smStart,span:p.smSpan,end:p.smEnd},md:{start:p.mdStart,span:p.mdSpan,end:p.mdEnd},lg:{start:p.lgStart,span:p.lgSpan,end:p.lgEnd},xl:{start:p.xlStart,span:p.xlSpan,end:p.xlEnd},xxl:{start:p.xxlStart,span:p.xxlSpan,end:p.xxlEnd}},u=t=>{var s,r;const e=o(t,null!==(r=null===(s=globalThis.document)||void 0===s?void 0:s.documentElement)&&void 0!==r?r:null),n=parseInt(e,10);return Number.isNaN(n)?1/0:n},c=e.forwardRef(((e,o)=>{const{xxlCols:p,xlCols:c,lgCols:f,mdCols:j,smCols:h,xsCols:v,xxsCols:S,className:g}=e,C=t(e,["xxlCols","xlCols","lgCols","mdCols","smCols","xsCols","xxsCols","className"]),y=i(),E=n(null),b=a(E,o),k=(t,s)=>{if(!t)return{start:void 0,span:void 0,end:void 0};if(Array.isArray(t)){const[r,e]=t;if(-1===e)return{start:r,span:void 0,end:-1};const n=u(s);return{start:r,span:Math.min(e-r,n),end:void 0}}const r=u(s);return{start:void 0,span:Math.min(t,r),end:void 0}};return m(E,y?(()=>{const t=k(S,l["xxs-column"]),s=k(v||S,l["xs-column"]),r=k(h||v||S,l["sm-column"]),e=k(j||h||v||S,l["md-column"]),n=k(f||j||h||v||S,l["lg-column"]),o=k(c||f||j||h||v||S,l["xl-column"]),m=k(p||c||f||j||h||v||S,l["xxl-column"]),a={};return[{result:t,prefix:"xxs"},{result:s,prefix:"xs"},{result:r,prefix:"sm"},{result:e,prefix:"md"},{result:n,prefix:"lg"},{result:o,prefix:"xl"},{result:m,prefix:"xxl"}].forEach((({result:t,prefix:s})=>{const r=d[s];t.start&&(a[r.start]=String(t.start)),t.span&&(a[r.span]=String(t.span)),t.end&&(a[r.end]=String(t.end))})),a})():{}),s("div",Object.assign({ref:b,className:r(x,g)},C))}));export{c as ColDiv};
 //# sourceMappingURL=col-div.js.map

package/layout/col-div.js.map

@@ -1 +1 @@
-{"version":3,"file":"col-div.js","sources":["../../src/layout/col-div.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { ColDivProps } from \"./types\";\nimport { StyledDiv } from \"./col-div.style\";\nimport { BreakpointValues } from \"../theme/breakpoint/theme-helper\";\nimport { ThemeContext } from \"styled-components\";\n\nconst Component = (\n    props: ColDivProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element => {\n    const theme = useContext(ThemeContext);\n\n    const {\n        xxlCols,\n        xlCols,\n        lgCols,\n        mdCols,\n        smCols,\n        xsCols,\n        xxsCols,\n        ...otherProps\n    } = props;\n\n    const getColSpan = (\n        cols: number | [number, number] | undefined,\n        maxCols: number,\n        label: string\n    ) => {\n        if (!cols) return { start: undefined, span: undefined };\n\n        if (process.env.NODE_ENV === \"development\") {\n            if (typeof cols === \"number\" && cols > maxCols) {\n                console.warn(\n                    `Warning: ${label}Cols exceeds maximum (${maxCols}): ${cols}`\n                );\n            } else if (\n                Array.isArray(cols) &&\n                (cols[0] > maxCols + 1 || cols[1] > maxCols + 1)\n            ) {\n                console.warn(\n                    `Warning: ${label}Cols array exceeds maximum (${maxCols}): [${cols[0]}, ${cols[1]}]`\n                );\n            }\n        }\n\n        if (Array.isArray(cols)) {\n            const [start, end] = cols;\n            if (end === -1) {\n                return { start, span: maxCols - start + 1 };\n            }\n            const span = Math.min(end - start, maxCols);\n            return { start, span };\n        }\n\n        return { start: undefined, span: Math.min(cols, maxCols) };\n    };\n\n    const getStyleProps = () => {\n        const xxlColumnCount = BreakpointValues[\"xxl-column\"]({ theme });\n        const xlColumnCount = BreakpointValues[\"xl-column\"]({ theme });\n        const lgColumnCount = BreakpointValues[\"lg-column\"]({ theme });\n        const mdColumnCount = BreakpointValues[\"md-column\"]({ theme });\n        const smColumnCount = BreakpointValues[\"sm-column\"]({ theme });\n        const xsColumnCount = BreakpointValues[\"xs-column\"]({ theme });\n        const xxsColumnCount = BreakpointValues[\"xxs-column\"]({ theme });\n\n        const xxlStartSpan = getColSpan(\n            xxlCols ||\n                xlCols ||\n                lgCols ||\n                mdCols ||\n                smCols ||\n                xsCols ||\n                xxsCols,\n            xxlColumnCount,\n            \"xxl\"\n        );\n\n        const xlStartSpan = getColSpan(\n            xlCols || lgCols || mdCols || smCols || xsCols || xxsCols,\n            xlColumnCount,\n            \"xl\"\n        );\n\n        const lgStartSpan = getColSpan(\n            lgCols || mdCols || smCols || xsCols || xxsCols,\n            lgColumnCount,\n            \"lg\"\n        );\n\n        const mdStartSpan = getColSpan(\n            mdCols || smCols || xsCols || xxsCols,\n            mdColumnCount,\n            \"md\"\n        );\n\n        const smStartSpan = getColSpan(\n            smCols || xsCols || xxsCols,\n            smColumnCount,\n            \"sm\"\n        );\n\n        const xsStartSpan = getColSpan(xsCols || xxsCols, xsColumnCount, \"xs\");\n\n        const xxsStartSpan = getColSpan(xxsCols, xxsColumnCount, \"xxs\");\n\n        return {\n            $xxlStart: xxlStartSpan.start,\n            $xxlSpan: xxlStartSpan.span,\n            $xlStart: xlStartSpan.start,\n            $xlSpan: xlStartSpan.span,\n            $lgStart: lgStartSpan.start,\n            $lgSpan: lgStartSpan.span,\n            $mdStart: mdStartSpan.start,\n            $mdSpan: mdStartSpan.span,\n            $smStart: smStartSpan.start,\n            $smSpan: smStartSpan.span,\n            $xsStart: xsStartSpan.start,\n            $xsSpan: xsStartSpan.span,\n            $xxsStart: xxsStartSpan.start,\n            $xxsSpan: xxsStartSpan.span,\n        };\n    };\n\n    return <StyledDiv ref={ref} {...getStyleProps()} {...otherProps} />;\n};\n\nexport const ColDiv = React.forwardRef(Component);\n"],"names":["ColDiv","React","forwardRef","props","ref","theme","useContext","ThemeContext","xxlCols","xlCols","lgCols","mdCols","smCols","xsCols","xxsCols","otherProps","getColSpan","cols","maxCols","label","start","undefined","span","process","env","NODE_ENV","console","warn","Array","isArray","end","Math","min","_jsx","StyledDiv","Object","assign","xxlColumnCount","BreakpointValues","xlColumnCount","lgColumnCount","mdColumnCount","smColumnCount","xsColumnCount","xxsColumnCount","xxlStartSpan","xlStartSpan","lgStartSpan","mdStartSpan","smStartSpan","xsStartSpan","xxsStartSpan","$xxlStart","$xxlSpan","$xlStart","$xlSpan","$lgStart","$lgSpan","$mdStart","$mdSpan","$smStart","$smSpan","$xsStart","$xsSpan","$xxsStart","$xxsSpan","getStyleProps"],"mappings":"oSAMA,MAyHaA,EAASC,EAAMC,YAzHV,CACdC,EACAC,KAEA,MAAMC,EAAQC,EAAWC,IAEnBC,QACFA,EAAOC,OACPA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,QACNA,GAEAX,EADGY,IACHZ,EATE,CAAA,UAAA,SAAA,SAAA,SAAA,SAAA,SAAA,YAWAa,EAAa,CACfC,EACAC,EACAC,KAEA,IAAKF,EAAM,MAAO,CAAEG,WAAOC,EAAWC,UAAMD,GAiB5C,GAf6B,gBAAzBE,QAAQC,IAAIC,WACQ,iBAATR,GAAqBA,EAAOC,EACnCQ,QAAQC,KACJ,YAAYR,0BAA8BD,OAAaD,KAG3DW,MAAMC,QAAQZ,KACbA,EAAK,GAAKC,EAAU,GAAKD,EAAK,GAAKC,EAAU,IAE9CQ,QAAQC,KACJ,YAAYR,gCAAoCD,QAAcD,EAAK,OAAOA,EAAK,QAKvFW,MAAMC,QAAQZ,GAAO,CACrB,MAAOG,EAAOU,GAAOb,EACrB,IAAY,IAARa,EACA,MAAO,CAAEV,QAAOE,KAAMJ,EAAUE,EAAQ,GAG5C,MAAO,CAAEA,QAAOE,KADHS,KAAKC,IAAIF,EAAMV,EAAOF,GAEvC,CAEA,MAAO,CAAEE,WAAOC,EAAWC,KAAMS,KAAKC,IAAIf,EAAMC,GAAU,EAsE9D,OAAOe,EAACC,EAASC,OAAAC,OAAA,CAAChC,IAAKA,GAnED,MAClB,MAAMiC,EAAiBC,EAAiB,cAAc,CAAEjC,UAClDkC,EAAgBD,EAAiB,aAAa,CAAEjC,UAChDmC,EAAgBF,EAAiB,aAAa,CAAEjC,UAChDoC,EAAgBH,EAAiB,aAAa,CAAEjC,UAChDqC,EAAgBJ,EAAiB,aAAa,CAAEjC,UAChDsC,EAAgBL,EAAiB,aAAa,CAAEjC,UAChDuC,EAAiBN,EAAiB,cAAc,CAAEjC,UAElDwC,EAAe7B,EACjBR,GACIC,GACAC,GACAC,GACAC,GACAC,GACAC,EACJuB,EACA,OAGES,EAAc9B,EAChBP,GAAUC,GAAUC,GAAUC,GAAUC,GAAUC,EAClDyB,EACA,MAGEQ,EAAc/B,EAChBN,GAAUC,GAAUC,GAAUC,GAAUC,EACxC0B,EACA,MAGEQ,EAAchC,EAChBL,GAAUC,GAAUC,GAAUC,EAC9B2B,EACA,MAGEQ,EAAcjC,EAChBJ,GAAUC,GAAUC,EACpB4B,EACA,MAGEQ,EAAclC,EAAWH,GAAUC,EAAS6B,EAAe,MAE3DQ,EAAenC,EAAWF,EAAS8B,EAAgB,OAEzD,MAAO,CACHQ,UAAWP,EAAazB,MACxBiC,SAAUR,EAAavB,KACvBgC,SAAUR,EAAY1B,MACtBmC,QAAST,EAAYxB,KACrBkC,SAAUT,EAAY3B,MACtBqC,QAASV,EAAYzB,KACrBoC,SAAUV,EAAY5B,MACtBuC,QAASX,EAAY1B,KACrBsC,SAAUX,EAAY7B,MACtByC,QAASZ,EAAY3B,KACrBwC,SAAUZ,EAAY9B,MACtB2C,QAASb,EAAY5B,KACrB0C,UAAWb,EAAa/B,MACxB6C,SAAUd,EAAa7B,KAC1B,EAG2B4C,GAAqBnD,GAAc"}
+{"version":3,"file":"col-div.js","sources":["../../src/layout/col-div.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport { type BreakpointCSSVariableString, useApplyStyle } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens/breakpoint\";\nimport { parseCSSVariableValue } from \"../theme/utils/css-variable\";\nimport { mergeRefs, useIsMounted } from \"../util\";\nimport * as styles from \"./col-div.styles\";\nimport type { ColDivProps } from \"./types\";\n\nconst TOKEN_MAP: Record<string, Record<string, string>> = {\n    xxs: {\n        start: styles.tokens.xxsStart,\n        span: styles.tokens.xxsSpan,\n        end: styles.tokens.xxsEnd,\n    },\n    xs: {\n        start: styles.tokens.xsStart,\n        span: styles.tokens.xsSpan,\n        end: styles.tokens.xsEnd,\n    },\n    sm: {\n        start: styles.tokens.smStart,\n        span: styles.tokens.smSpan,\n        end: styles.tokens.smEnd,\n    },\n    md: {\n        start: styles.tokens.mdStart,\n        span: styles.tokens.mdSpan,\n        end: styles.tokens.mdEnd,\n    },\n    lg: {\n        start: styles.tokens.lgStart,\n        span: styles.tokens.lgSpan,\n        end: styles.tokens.lgEnd,\n    },\n    xl: {\n        start: styles.tokens.xlStart,\n        span: styles.tokens.xlSpan,\n        end: styles.tokens.xlEnd,\n    },\n    xxl: {\n        start: styles.tokens.xxlStart,\n        span: styles.tokens.xxlSpan,\n        end: styles.tokens.xxlEnd,\n    },\n};\n\nconst getColCount = (token: BreakpointCSSVariableString): number => {\n    const value = parseCSSVariableValue(\n        token,\n        globalThis.document?.documentElement ?? null\n    );\n    const parsed = parseInt(value, 10);\n    return Number.isNaN(parsed) ? Infinity : parsed;\n};\n\nconst Component = (\n    props: ColDivProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element => {\n    const {\n        xxlCols,\n        xlCols,\n        lgCols,\n        mdCols,\n        smCols,\n        xsCols,\n        xxsCols,\n        className,\n        ...otherProps\n    } = props;\n\n    const isMounted = useIsMounted();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const mergedRef = mergeRefs(rootRef, ref);\n\n    const getColSpan = (\n        cols: number | [number, number] | undefined,\n        colToken: (typeof Breakpoint)[keyof typeof Breakpoint]\n    ) => {\n        if (!cols) return { start: undefined, span: undefined, end: undefined };\n\n        if (Array.isArray(cols)) {\n            const [start, end] = cols;\n            if (end === -1) {\n                return { start, span: undefined, end: -1 };\n            }\n            const maxCols = getColCount(colToken);\n            return {\n                start,\n                span: Math.min(end - start, maxCols),\n                end: undefined,\n            };\n        }\n\n        const maxCols = getColCount(colToken);\n        return {\n            start: undefined,\n            span: Math.min(cols, maxCols),\n            end: undefined,\n        };\n    };\n\n    const getCssVars = () => {\n        const xxsResult = getColSpan(xxsCols, Breakpoint[\"xxs-column\"]);\n        const xsResult = getColSpan(xsCols || xxsCols, Breakpoint[\"xs-column\"]);\n        const smResult = getColSpan(\n            smCols || xsCols || xxsCols,\n            Breakpoint[\"sm-column\"]\n        );\n        const mdResult = getColSpan(\n            mdCols || smCols || xsCols || xxsCols,\n            Breakpoint[\"md-column\"]\n        );\n        const lgResult = getColSpan(\n            lgCols || mdCols || smCols || xsCols || xxsCols,\n            Breakpoint[\"lg-column\"]\n        );\n        const xlResult = getColSpan(\n            xlCols || lgCols || mdCols || smCols || xsCols || xxsCols,\n            Breakpoint[\"xl-column\"]\n        );\n        const xxlResult = getColSpan(\n            xxlCols ||\n                xlCols ||\n                lgCols ||\n                mdCols ||\n                smCols ||\n                xsCols ||\n                xxsCols,\n            Breakpoint[\"xxl-column\"]\n        );\n\n        const cssVars: Record<string, string> = {};\n\n        const results = [\n            { result: xxsResult, prefix: \"xxs\" },\n            { result: xsResult, prefix: \"xs\" },\n            { result: smResult, prefix: \"sm\" },\n            { result: mdResult, prefix: \"md\" },\n            { result: lgResult, prefix: \"lg\" },\n            { result: xlResult, prefix: \"xl\" },\n            { result: xxlResult, prefix: \"xxl\" },\n        ];\n\n        results.forEach(({ result, prefix }) => {\n            const tokens = TOKEN_MAP[prefix];\n            if (result.start) cssVars[tokens.start] = String(result.start);\n            if (result.span) cssVars[tokens.span] = String(result.span);\n            if (result.end) cssVars[tokens.end] = String(result.end);\n        });\n\n        return cssVars;\n    };\n\n    useApplyStyle(rootRef, isMounted ? getCssVars() : {});\n\n    return (\n        <div\n            ref={mergedRef}\n            className={clsx(styles.colDiv, className)}\n            {...otherProps}\n        />\n    );\n};\n\nexport const ColDiv = React.forwardRef(Component);\n"],"names":["TOKEN_MAP","xxs","start","styles.tokens","xxsStart","span","xxsSpan","end","xxsEnd","xs","xsStart","xsSpan","xsEnd","sm","smStart","smSpan","smEnd","md","mdStart","mdSpan","mdEnd","lg","lgStart","lgSpan","lgEnd","xl","xlStart","xlSpan","xlEnd","xxl","xxlStart","xxlSpan","xxlEnd","getColCount","token","value","parseCSSVariableValue","_b","_a","globalThis","document","documentElement","parsed","parseInt","Number","isNaN","Infinity","ColDiv","React","forwardRef","props","ref","xxlCols","xlCols","lgCols","mdCols","smCols","xsCols","xxsCols","className","otherProps","__rest","isMounted","useIsMounted","rootRef","useRef","mergedRef","mergeRefs","getColSpan","cols","colToken","undefined","Array","isArray","maxCols","Math","min","useApplyStyle","xxsResult","Breakpoint","xsResult","smResult","mdResult","lgResult","xlResult","xxlResult","cssVars","result","prefix","forEach","tokens","String","getCssVars","_jsx","clsx","styles.colDiv"],"mappings":"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"}

package/layout/col-div.styles.d.ts

@@ -0,0 +1,24 @@
+export declare const tokens: {
+    xxsStart: string;
+    xxsSpan: string;
+    xxsEnd: string;
+    xsStart: string;
+    xsSpan: string;
+    xsEnd: string;
+    smStart: string;
+    smSpan: string;
+    smEnd: string;
+    mdStart: string;
+    mdSpan: string;
+    mdEnd: string;
+    lgStart: string;
+    lgSpan: string;
+    lgEnd: string;
+    xlStart: string;
+    xlSpan: string;
+    xlEnd: string;
+    xxlStart: string;
+    xxlSpan: string;
+    xxlEnd: string;
+};
+export declare const colDiv: import("@linaria/core").LinariaClassName;

package/layout/col-div.styles.js

@@ -0,0 +1,2 @@
+import"./col-div.styles_16o6mwx.css";const n={xxsStart:"--fds-internal-colDiv-xxs-start",xxsSpan:"--fds-internal-colDiv-xxs-span",xxsEnd:"--fds-internal-colDiv-xxs-end",xsStart:"--fds-internal-colDiv-xs-start",xsSpan:"--fds-internal-colDiv-xs-span",xsEnd:"--fds-internal-colDiv-xs-end",smStart:"--fds-internal-colDiv-sm-start",smSpan:"--fds-internal-colDiv-sm-span",smEnd:"--fds-internal-colDiv-sm-end",mdStart:"--fds-internal-colDiv-md-start",mdSpan:"--fds-internal-colDiv-md-span",mdEnd:"--fds-internal-colDiv-md-end",lgStart:"--fds-internal-colDiv-lg-start",lgSpan:"--fds-internal-colDiv-lg-span",lgEnd:"--fds-internal-colDiv-lg-end",xlStart:"--fds-internal-colDiv-xl-start",xlSpan:"--fds-internal-colDiv-xl-span",xlEnd:"--fds-internal-colDiv-xl-end",xxlStart:"--fds-internal-colDiv-xxl-start",xxlSpan:"--fds-internal-colDiv-xxl-span",xxlEnd:"--fds-internal-colDiv-xxl-end"},l="c1waj0ro";export{l as colDiv,n as tokens};
+//# sourceMappingURL=col-div.styles.js.map

package/layout/col-div.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"col-div.styles.js","sources":["../../src/layout/col-div.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery } from \"../theme\";\n\nexport const tokens = {\n    xxsStart: \"--fds-internal-colDiv-xxs-start\",\n    xxsSpan: \"--fds-internal-colDiv-xxs-span\",\n    xxsEnd: \"--fds-internal-colDiv-xxs-end\",\n    xsStart: \"--fds-internal-colDiv-xs-start\",\n    xsSpan: \"--fds-internal-colDiv-xs-span\",\n    xsEnd: \"--fds-internal-colDiv-xs-end\",\n    smStart: \"--fds-internal-colDiv-sm-start\",\n    smSpan: \"--fds-internal-colDiv-sm-span\",\n    smEnd: \"--fds-internal-colDiv-sm-end\",\n    mdStart: \"--fds-internal-colDiv-md-start\",\n    mdSpan: \"--fds-internal-colDiv-md-span\",\n    mdEnd: \"--fds-internal-colDiv-md-end\",\n    lgStart: \"--fds-internal-colDiv-lg-start\",\n    lgSpan: \"--fds-internal-colDiv-lg-span\",\n    lgEnd: \"--fds-internal-colDiv-lg-end\",\n    xlStart: \"--fds-internal-colDiv-xl-start\",\n    xlSpan: \"--fds-internal-colDiv-xl-span\",\n    xlEnd: \"--fds-internal-colDiv-xl-end\",\n    xxlStart: \"--fds-internal-colDiv-xxl-start\",\n    xxlSpan: \"--fds-internal-colDiv-xxl-span\",\n    xxlEnd: \"--fds-internal-colDiv-xxl-end\",\n};\n\nexport const colDiv = css`\n    ${Object.values(tokens)\n        .map((token) => `${token}: initial;`)\n        .join(\"\")}\n\n    position: relative;\n\n    grid-column: var(${tokens.xxsStart}, auto) /\n        var(${tokens.xxsEnd}, span var(${tokens.xxsSpan}, 1));\n\n    ${MediaQuery.MinWidth.xs} {\n        grid-column: var(${tokens.xsStart}, auto) /\n            var(${tokens.xsEnd}, span var(${tokens.xsSpan}, 1));\n    }\n    ${MediaQuery.MinWidth.sm} {\n        grid-column: var(${tokens.smStart}, auto) /\n            var(${tokens.smEnd}, span var(${tokens.smSpan}, 1));\n    }\n    ${MediaQuery.MinWidth.md} {\n        grid-column: var(${tokens.mdStart}, auto) /\n            var(${tokens.mdEnd}, span var(${tokens.mdSpan}, 1));\n    }\n    ${MediaQuery.MinWidth.lg} {\n        grid-column: var(${tokens.lgStart}, auto) /\n            var(${tokens.lgEnd}, span var(${tokens.lgSpan}, 1));\n    }\n    ${MediaQuery.MinWidth.xl} {\n        grid-column: var(${tokens.xlStart}, auto) /\n            var(${tokens.xlEnd}, span var(${tokens.xlSpan}, 1));\n    }\n    ${MediaQuery.MinWidth.xxl} {\n        grid-column: var(${tokens.xxlStart}, auto) /\n            var(${tokens.xxlEnd}, span var(${tokens.xxlSpan}, 1));\n    }\n`;\n"],"names":["tokens","xxsStart","xxsSpan","xxsEnd","xsStart","xsSpan","xsEnd","smStart","smSpan","smEnd","mdStart","mdSpan","mdEnd","lgStart","lgSpan","lgEnd","xlStart","xlSpan","xlEnd","xxlStart","xxlSpan","xxlEnd","colDiv"],"mappings":"2DAIO,MAAMA,EAAS,CAClBC,SAAU,kCACVC,QAAS,iCACTC,OAAQ,gCACRC,QAAS,iCACTC,OAAQ,gCACRC,MAAO,+BACPC,QAAS,iCACTC,OAAQ,gCACRC,MAAO,+BACPC,QAAS,iCACTC,OAAQ,gCACRC,MAAO,+BACPC,QAAS,iCACTC,OAAQ,gCACRC,MAAO,+BACPC,QAAS,iCACTC,OAAQ,gCACRC,MAAO,+BACPC,SAAU,kCACVC,QAAS,iCACTC,OAAQ,iCAGCC,EAAM"}

package/layout/col-div.styles_16o6mwx.css

@@ -0,0 +1 @@
+@layer fds{.c1waj0ro{--fds-internal-colDiv-xxs-start:initial;--fds-internal-colDiv-xxs-span:initial;--fds-internal-colDiv-xxs-end:initial;--fds-internal-colDiv-xs-start:initial;--fds-internal-colDiv-xs-span:initial;--fds-internal-colDiv-xs-end:initial;--fds-internal-colDiv-sm-start:initial;--fds-internal-colDiv-sm-span:initial;--fds-internal-colDiv-sm-end:initial;--fds-internal-colDiv-md-start:initial;--fds-internal-colDiv-md-span:initial;--fds-internal-colDiv-md-end:initial;--fds-internal-colDiv-lg-start:initial;--fds-internal-colDiv-lg-span:initial;--fds-internal-colDiv-lg-end:initial;--fds-internal-colDiv-xl-start:initial;--fds-internal-colDiv-xl-span:initial;--fds-internal-colDiv-xl-end:initial;--fds-internal-colDiv-xxl-start:initial;--fds-internal-colDiv-xxl-span:initial;--fds-internal-colDiv-xxl-end:initial;position:relative;grid-column:var(--fds-internal-colDiv-xxs-start, auto)/var(--fds-internal-colDiv-xxs-end, span var(--fds-internal-colDiv-xxs-span, 1));}:where(body.fds-breakpoint-xs-min) .c1waj0ro{grid-column:var(--fds-internal-colDiv-xs-start, auto)/var(--fds-internal-colDiv-xs-end, span var(--fds-internal-colDiv-xs-span, 1));}:where(body.fds-breakpoint-sm-min) .c1waj0ro{grid-column:var(--fds-internal-colDiv-sm-start, auto)/var(--fds-internal-colDiv-sm-end, span var(--fds-internal-colDiv-sm-span, 1));}:where(body.fds-breakpoint-md-min) .c1waj0ro{grid-column:var(--fds-internal-colDiv-md-start, auto)/var(--fds-internal-colDiv-md-end, span var(--fds-internal-colDiv-md-span, 1));}:where(body.fds-breakpoint-lg-min) .c1waj0ro{grid-column:var(--fds-internal-colDiv-lg-start, auto)/var(--fds-internal-colDiv-lg-end, span var(--fds-internal-colDiv-lg-span, 1));}:where(body.fds-breakpoint-xl-min) .c1waj0ro{grid-column:var(--fds-internal-colDiv-xl-start, auto)/var(--fds-internal-colDiv-xl-end, span var(--fds-internal-colDiv-xl-span, 1));}:where(body.fds-breakpoint-xxl-min) .c1waj0ro{grid-column:var(--fds-internal-colDiv-xxl-start, auto)/var(--fds-internal-colDiv-xxl-end, span var(--fds-internal-colDiv-xxl-span, 1));}}

package/layout/container.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { ContainerProps } from "./types";
+import type { ContainerProps } from "./types";
 export declare const Container: (props: ContainerProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/layout/container.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import e from"react";import{StyledContainer as i}from"./container.styles.js";const s=e.forwardRef(((e,s)=>{const{children:o,"data-testid":a="container",type:c="flex",stretch:n=!1}=e,d=t(e,["children","data-testid","type","stretch"]);return r(i,Object.assign({ref:s,"data-testid":a,$type:c,$stretch:n},d,{children:o}))}));export{s as Container};
+import{__rest as t}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import e from"clsx";import s from"react";import{container as a,containerNotStretched as i,containerGrid as c,containerFlexColumn as o,containerFlex as m}from"./container.styles.js";const l=s.forwardRef(((s,l)=>{const{children:n,"data-testid":d="container",type:f="flex",stretch:p=!1,className:x}=s,h=t(s,["children","data-testid","type","stretch","className"]);return r("div",Object.assign({ref:l,"data-testid":d,className:e(a,!p&&i,"grid"===f&&c,"flex-column"===f&&o,"flex"===f&&m,x)},h,{children:n}))}));export{l as Container};
 //# sourceMappingURL=container.js.map

package/layout/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sources":["../../src/layout/container.tsx"],"sourcesContent":["import React from \"react\";\nimport { ContainerProps } from \"./types\";\nimport { StyledContainer } from \"./container.styles\";\n\nconst Component = (\n    props: ContainerProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element => {\n    const {\n        children,\n        \"data-testid\": testId = \"container\",\n        type = \"flex\",\n        stretch = false,\n        ...otherProps\n    } = props;\n\n    return (\n        <StyledContainer\n            ref={ref}\n            data-testid={testId}\n            $type={type}\n            $stretch={stretch}\n            {...otherProps}\n        >\n            {children}\n        </StyledContainer>\n    );\n};\n\nexport const Container = React.forwardRef(Component);\n"],"names":["Container","React","forwardRef","props","ref","children","testId","type","stretch","otherProps","__rest","_jsx","StyledContainer","$stretch"],"mappings":"oKAIA,MAyBaA,EAAYC,EAAMC,YAzBb,CACdC,EACAC,KAEA,MAAMC,SACFA,EACA,cAAeC,EAAS,YAAWC,KACnCA,EAAO,OAAMC,QACbA,GAAU,GAEVL,EADGM,EAAUC,EACbP,EANE,CAAA,WAAA,cAAA,OAAA,YAQN,OACIQ,EAACC,iBACGR,IAAKA,EAAG,cACKE,QACNC,EAAIM,SACDL,GACNC,YAEHJ,IACa"}
+{"version":3,"file":"container.js","sources":["../../src/layout/container.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./container.styles\";\nimport type { ContainerProps } from \"./types\";\n\nconst Component = (\n    props: ContainerProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element => {\n    const {\n        children,\n        \"data-testid\": testId = \"container\",\n        type = \"flex\",\n        stretch = false,\n        className,\n        ...otherProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            data-testid={testId}\n            className={clsx(\n                styles.container,\n                !stretch && styles.containerNotStretched,\n                type === \"grid\" && styles.containerGrid,\n                type === \"flex-column\" && styles.containerFlexColumn,\n                type === \"flex\" && styles.containerFlex,\n                className\n            )}\n            {...otherProps}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport const Container = React.forwardRef(Component);\n"],"names":["Container","React","forwardRef","props","ref","children","testId","type","stretch","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.container","styles.containerNotStretched","styles.containerGrid","styles.containerFlexColumn","styles.containerFlex"],"mappings":"4QAMA,MAgCaA,EAAYC,EAAMC,YAhCb,CACdC,EACAC,KAEA,MAAMC,SACFA,EACA,cAAeC,EAAS,YAAWC,KACnCA,EAAO,OAAMC,QACbA,GAAU,EAAKC,UACfA,GAEAN,EADGO,EAAUC,EACbR,EAPE,CAAA,WAAA,cAAA,OAAA,UAAA,cASN,OACIS,EAAA,MAAAC,OAAAC,OAAA,CACIV,IAAKA,gBACQE,EACbG,UAAWM,EACPC,GACCR,GAAWS,EACH,SAATV,GAAmBW,EACV,gBAATX,GAA0BY,EACjB,SAATZ,GAAmBa,EACnBX,IAEAC,EAAU,CAAAL,SAEbA,IACC"}

package/layout/container.styles.d.ts

@@ -1,7 +1,5 @@
-import { ContainerType } from "./types";
-interface StyleProps {
-    $type: ContainerType;
-    $stretch: boolean;
-}
-export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export {};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const containerNotStretched: import("@linaria/core").LinariaClassName;
+export declare const containerGrid: import("@linaria/core").LinariaClassName;
+export declare const containerFlexColumn: import("@linaria/core").LinariaClassName;
+export declare const containerFlex: import("@linaria/core").LinariaClassName;

package/layout/container.styles.js

@@ -1,100 +1,2 @@
-import t,{css as m}from"styled-components";import{Breakpoint as x,MediaQuery as a}from"../theme/index.js";const i=t.div`
-    flex-grow: 1;
-    margin: 0 auto;
-    position: relative;
-    width: auto;
-    height: auto;
-
-    padding: 0 ${x["xxl-margin"]}px;
-
-    ${a.MaxWidth.xl} {
-        padding: 0 ${x["xl-margin"]}px;
-    }
-
-    ${a.MaxWidth.lg} {
-        padding: 0 ${x["lg-margin"]}px;
-    }
-
-    ${a.MaxWidth.md} {
-        padding: 0 ${x["md-margin"]}px;
-    }
-
-    ${a.MaxWidth.sm} {
-        padding: 0 ${x["sm-margin"]}px;
-    }
-
-    ${a.MaxWidth.xs} {
-        padding: 0 ${x["xs-margin"]}px;
-    }
-
-    ${a.MaxWidth.xxs} {
-        padding: 0 ${x["xxs-margin"]}px;
-    }
-
-    ${t=>{if(!t.$stretch)return m`
-                max-width: 1440px;
-            `}}
-
-    ${t=>{switch(t.$type){case"grid":return m`
-                    column-gap: ${x["xxl-gutter"]}px;
-                    display: grid;
-                    grid-template-columns: repeat(
-                        ${x["xxl-column"]},
-                        minmax(0, 1fr)
-                    );
-
-                    ${a.MaxWidth.xl} {
-                        column-gap: ${x["xl-gutter"]}px;
-                        grid-template-columns: repeat(
-                            ${x["xl-column"]},
-                            minmax(0, 1fr)
-                        );
-                    }
-
-                    ${a.MaxWidth.lg} {
-                        column-gap: ${x["lg-gutter"]}px;
-                        grid-template-columns: repeat(
-                            ${x["lg-column"]},
-                            minmax(0, 1fr)
-                        );
-                    }
-
-                    ${a.MaxWidth.md} {
-                        column-gap: ${x["md-gutter"]}px;
-                        grid-template-columns: repeat(
-                            ${x["md-column"]},
-                            minmax(0, 1fr)
-                        );
-                    }
-
-                    ${a.MaxWidth.sm} {
-                        column-gap: ${x["sm-gutter"]}px;
-                        grid-template-columns: repeat(
-                            ${x["sm-column"]},
-                            minmax(0, 1fr)
-                        );
-                    }
-
-                    ${a.MaxWidth.xs} {
-                        column-gap: ${x["xs-gutter"]}px;
-                        grid-template-columns: repeat(
-                            ${x["xs-column"]},
-                            minmax(0, 1fr)
-                        );
-                    }
-
-                    ${a.MaxWidth.xxs} {
-                        column-gap: ${x["xxs-gutter"]}px;
-                        grid-template-columns: repeat(
-                            ${x["xxs-column"]},
-                            minmax(0, 1fr)
-                        );
-                    }
-                `;case"flex-column":return m`
-                    display: flex;
-                    flex-direction: column;
-                `;default:return m`
-                    display: flex;
-                `}}}
-`;export{i as StyledContainer};
+import"./container.styles_v70ec6.css";const c="c1po1qn8",s="ca13up7",n="ch4a7dv",o="cyi2nns",t="cmvqis9";export{c as container,t as containerFlex,o as containerFlexColumn,n as containerGrid,s as containerNotStretched};
 //# sourceMappingURL=container.styles.js.map

package/layout/container.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.styles.js","sources":["../../src/layout/container.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Breakpoint, MediaQuery } from \"../theme\";\nimport { ContainerType } from \"./types\";\n\ninterface StyleProps {\n    $type: ContainerType;\n    $stretch: boolean;\n}\n\nexport const StyledContainer = styled.div<StyleProps>`\n    flex-grow: 1;\n    margin: 0 auto;\n    position: relative;\n    width: auto;\n    height: auto;\n\n    padding: 0 ${Breakpoint[\"xxl-margin\"]}px;\n\n    ${MediaQuery.MaxWidth.xl} {\n        padding: 0 ${Breakpoint[\"xl-margin\"]}px;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding: 0 ${Breakpoint[\"lg-margin\"]}px;\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        padding: 0 ${Breakpoint[\"md-margin\"]}px;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        padding: 0 ${Breakpoint[\"sm-margin\"]}px;\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        padding: 0 ${Breakpoint[\"xs-margin\"]}px;\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        padding: 0 ${Breakpoint[\"xxs-margin\"]}px;\n    }\n\n    ${(props) => {\n        if (!props.$stretch) {\n            return css`\n                max-width: 1440px;\n            `;\n        }\n    }}\n\n    ${(props) => {\n        switch (props.$type) {\n            case \"grid\":\n                return css`\n                    column-gap: ${Breakpoint[\"xxl-gutter\"]}px;\n                    display: grid;\n                    grid-template-columns: repeat(\n                        ${Breakpoint[\"xxl-column\"]},\n                        minmax(0, 1fr)\n                    );\n\n                    ${MediaQuery.MaxWidth.xl} {\n                        column-gap: ${Breakpoint[\"xl-gutter\"]}px;\n                        grid-template-columns: repeat(\n                            ${Breakpoint[\"xl-column\"]},\n                            minmax(0, 1fr)\n                        );\n                    }\n\n                    ${MediaQuery.MaxWidth.lg} {\n                        column-gap: ${Breakpoint[\"lg-gutter\"]}px;\n                        grid-template-columns: repeat(\n                            ${Breakpoint[\"lg-column\"]},\n                            minmax(0, 1fr)\n                        );\n                    }\n\n                    ${MediaQuery.MaxWidth.md} {\n                        column-gap: ${Breakpoint[\"md-gutter\"]}px;\n                        grid-template-columns: repeat(\n                            ${Breakpoint[\"md-column\"]},\n                            minmax(0, 1fr)\n                        );\n                    }\n\n                    ${MediaQuery.MaxWidth.sm} {\n                        column-gap: ${Breakpoint[\"sm-gutter\"]}px;\n                        grid-template-columns: repeat(\n                            ${Breakpoint[\"sm-column\"]},\n                            minmax(0, 1fr)\n                        );\n                    }\n\n                    ${MediaQuery.MaxWidth.xs} {\n                        column-gap: ${Breakpoint[\"xs-gutter\"]}px;\n                        grid-template-columns: repeat(\n                            ${Breakpoint[\"xs-column\"]},\n                            minmax(0, 1fr)\n                        );\n                    }\n\n                    ${MediaQuery.MaxWidth.xxs} {\n                        column-gap: ${Breakpoint[\"xxs-gutter\"]}px;\n                        grid-template-columns: repeat(\n                            ${Breakpoint[\"xxs-column\"]},\n                            minmax(0, 1fr)\n                        );\n                    }\n                `;\n\n            case \"flex-column\":\n                return css`\n                    display: flex;\n                    flex-direction: column;\n                `;\n            case \"flex\":\n            default:\n                return css`\n                    display: flex;\n                `;\n        }\n    }}\n`;\n"],"names":["StyledContainer","styled","div","Breakpoint","MediaQuery","MaxWidth","xl","lg","md","sm","xs","xxs","props","$stretch","css","$type"],"mappings":"0GASO,MAAMA,EAAkBC,EAAOC,GAAe;;;;;;;iBAOpCC,EAAW;;MAEtBC,EAAWC,SAASC;qBACLH,EAAW;;;MAG1BC,EAAWC,SAASE;qBACLJ,EAAW;;;MAG1BC,EAAWC,SAASG;qBACLL,EAAW;;;MAG1BC,EAAWC,SAASI;qBACLN,EAAW;;;MAG1BC,EAAWC,SAASK;qBACLP,EAAW;;;MAG1BC,EAAWC,SAASM;qBACLR,EAAW;;;MAGzBS,IACC,IAAKA,EAAMC,SACP,OAAOC,CAAG;;aAGd;;MAGDF,IACC,OAAQA,EAAMG,OACV,IAAK,OACD,OAAOD,CAAG;kCACQX,EAAW;;;0BAGnBA,EAAW;;;;sBAIfC,EAAWC,SAASC;sCACJH,EAAW;;8BAEnBA,EAAW;;;;;sBAKnBC,EAAWC,SAASE;sCACJJ,EAAW;;8BAEnBA,EAAW;;;;;sBAKnBC,EAAWC,SAASG;sCACJL,EAAW;;8BAEnBA,EAAW;;;;;sBAKnBC,EAAWC,SAASI;sCACJN,EAAW;;8BAEnBA,EAAW;;;;;sBAKnBC,EAAWC,SAASK;sCACJP,EAAW;;8BAEnBA,EAAW;;;;;sBAKnBC,EAAWC,SAASM;sCACJR,EAAW;;8BAEnBA,EAAW;;;;kBAM7B,IAAK,cACD,OAAOW,CAAG;;;kBAKd,QACI,OAAOA,CAAG;;;"}
+{"version":3,"file":"container.styles.js","sources":["../../src/layout/container.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens/breakpoint\";\n\nexport const container = css`\n    flex-grow: 1;\n    margin: 0 auto;\n    position: relative;\n    width: auto;\n    height: auto;\n    padding: 0 ${Breakpoint[\"xxs-margin\"]};\n\n    ${MediaQuery.MinWidth.xs} {\n        padding: 0 ${Breakpoint[\"xs-margin\"]};\n    }\n    ${MediaQuery.MinWidth.sm} {\n        padding: 0 ${Breakpoint[\"sm-margin\"]};\n    }\n    ${MediaQuery.MinWidth.md} {\n        padding: 0 ${Breakpoint[\"md-margin\"]};\n    }\n    ${MediaQuery.MinWidth.lg} {\n        padding: 0 ${Breakpoint[\"lg-margin\"]};\n    }\n    ${MediaQuery.MinWidth.xl} {\n        padding: 0 ${Breakpoint[\"xl-margin\"]};\n    }\n    ${MediaQuery.MinWidth.xxl} {\n        padding: 0 ${Breakpoint[\"xxl-margin\"]};\n    }\n`;\n\nexport const containerNotStretched = css`\n    max-width: 1440px;\n`;\n\nexport const containerGrid = css`\n    column-gap: ${Breakpoint[\"xxs-gutter\"]};\n    display: grid;\n    grid-template-columns: repeat(${Breakpoint[\"xxs-column\"]}, minmax(0, 1fr));\n\n    ${MediaQuery.MinWidth.xs} {\n        column-gap: ${Breakpoint[\"xs-gutter\"]};\n        grid-template-columns: repeat(\n            ${Breakpoint[\"xs-column\"]},\n            minmax(0, 1fr)\n        );\n    }\n    ${MediaQuery.MinWidth.sm} {\n        column-gap: ${Breakpoint[\"sm-gutter\"]};\n        grid-template-columns: repeat(\n            ${Breakpoint[\"sm-column\"]},\n            minmax(0, 1fr)\n        );\n    }\n    ${MediaQuery.MinWidth.md} {\n        column-gap: ${Breakpoint[\"md-gutter\"]};\n        grid-template-columns: repeat(\n            ${Breakpoint[\"md-column\"]},\n            minmax(0, 1fr)\n        );\n    }\n    ${MediaQuery.MinWidth.lg} {\n        column-gap: ${Breakpoint[\"lg-gutter\"]};\n        grid-template-columns: repeat(\n            ${Breakpoint[\"lg-column\"]},\n            minmax(0, 1fr)\n        );\n    }\n    ${MediaQuery.MinWidth.xl} {\n        column-gap: ${Breakpoint[\"xl-gutter\"]};\n        grid-template-columns: repeat(\n            ${Breakpoint[\"xl-column\"]},\n            minmax(0, 1fr)\n        );\n    }\n    ${MediaQuery.MinWidth.xxl} {\n        column-gap: ${Breakpoint[\"xxl-gutter\"]};\n        grid-template-columns: repeat(\n            ${Breakpoint[\"xxl-column\"]},\n            minmax(0, 1fr)\n        );\n    }\n`;\n\nexport const containerFlexColumn = css`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const containerFlex = css`\n    display: flex;\n`;\n"],"names":["container","containerNotStretched","containerGrid","containerFlexColumn","containerFlex"],"mappings":"4DAKO,MAAMA,EAAS,WA4BTC,EAAqB,UAIrBC,EAAa,UAiDbC,EAAmB,UAKnBC,EAAa"}