npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.3 → 4.0.0-alpha.4 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1304) hide show

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

	@@ -1 +1 @@
1	- {"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":"~~gyEAaO~~,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"}
1	+ {"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.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./dropdown-variant.styles_16c4wc1.css";const e="efqyehf",s="ljv0l5v";export{e as expandableElement,s as languageIconWrapper};
+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_1vrdfky.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ .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;}
2	+ .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/link-container-variant.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./link-container-variant.styles_1blx9qm.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};
+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_1blx9qm.css → link-container-variant.styles_1iw6zux.css} RENAMED Viewed

@@ -1,5 +1,5 @@
 .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);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;}
+.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/layout/col-div.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as s}from"../_virtual/_tslib.js";import{jsx as t}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{colDiv as i,tokens as x}from"./col-div.styles.js";const p={xxs:{start:x.xxsStart,span:x.xxsSpan,end:x.xxsEnd},xs:{start:x.xsStart,span:x.xsSpan,end:x.xsEnd},sm:{start:x.smStart,span:x.smSpan,end:x.smEnd},md:{start:x.mdStart,span:x.mdSpan,end:x.mdEnd},lg:{start:x.lgStart,span:x.lgSpan,end:x.lgEnd},xl:{start:x.xlStart,span:x.xlSpan,end:x.xlEnd},xxl:{start:x.xxlStart,span:x.xxlSpan,end:x.xxlEnd}},d=s=>{var t,r;const e=o(s,null!==(r=null===(t=globalThis.document)||void 0===t?void 0:t.documentElement)&&void 0!==r?r:null),n=parseInt(e,10);return Number.isNaN(n)?1/0:n},u=e.forwardRef(((e,o)=>{const{xxlCols:x,xlCols:u,lgCols:c,mdCols:f,smCols:j,xsCols:h,xxsCols:v,className:g}=e,S=s(e,["xxlCols","xlCols","lgCols","mdCols","smCols","xsCols","xxsCols","className"]),C=n(null),y=a(C,o),E=(s,t)=>{if(!s)return{start:void 0,span:void 0,end:void 0};if(Array.isArray(s)){const[r,e]=s;if(-1===e)return{start:r,span:void 0,end:-1};const n=d(t);return{start:r,span:Math.min(e-r,n),end:void 0}}const r=d(t);return{start:void 0,span:Math.min(s,r),end:void 0}};return m(C,Object.assign({},(()=>{const s=E(v,l["xxs-column"]),t=E(h||v,l["xs-column"]),r=E(j||h||v,l["sm-column"]),e=E(f||j||h||v,l["md-column"]),n=E(c||f||j||h||v,l["lg-column"]),o=E(u||c||f||j||h||v,l["xl-column"]),m=E(x||u||c||f||j||h||v,l["xxl-column"]),a={};return[{result:s,prefix:"xxs"},{result:t,prefix:"xs"},{result:r,prefix:"sm"},{result:e,prefix:"md"},{result:n,prefix:"lg"},{result:o,prefix:"xl"},{result:m,prefix:"xxl"}].forEach((({result:s,prefix:t})=>{const r=p[t];s.start&&(a[r.start]=String(s.start)),s.span&&(a[r.span]=String(s.span)),s.end&&(a[r.end]=String(s.end))})),a})())),t("div",Object.assign({ref:y,className:r(i,g)},S))}));export{u 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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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 } 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 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, ~~{\n ...~~getCssVars()~~,\n~~ });\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","rootRef","useRef","mergedRef","mergeRefs","getColSpan","cols","colToken","undefined","Array","isArray","maxCols","Math","min","useApplyStyle","~~Object","assign","~~xxsResult","Breakpoint","xsResult","smResult","mdResult","lgResult","xlResult","xxlResult","cssVars","result","prefix","forEach","tokens","String","getCssVars","_jsx","clsx","styles.colDiv"],"mappings":"~~23BAUA~~,MAAMA,EAAoD,CACtDC,IAAK,CACDC,MAAOC,EAAcC,SACrBC,KAAMF,EAAcG,QACpBC,IAAKJ,EAAcK,QAEvBC,GAAI,CACAP,MAAOC,EAAcO,QACrBL,KAAMF,EAAcQ,OACpBJ,IAAKJ,EAAcS,OAEvBC,GAAI,CACAX,MAAOC,EAAcW,QACrBT,KAAMF,EAAcY,OACpBR,IAAKJ,EAAca,OAEvBC,GAAI,CACAf,MAAOC,EAAce,QACrBb,KAAMF,EAAcgB,OACpBZ,IAAKJ,EAAciB,OAEvBC,GAAI,CACAnB,MAAOC,EAAcmB,QACrBjB,KAAMF,EAAcoB,OACpBhB,IAAKJ,EAAcqB,OAEvBC,GAAI,CACAvB,MAAOC,EAAcuB,QACrBrB,KAAMF,EAAcwB,OACpBpB,IAAKJ,EAAcyB,OAEvBC,IAAK,CACD3B,MAAOC,EAAc2B,SACrBzB,KAAMF,EAAc4B,QACpBxB,IAAKJ,EAAc6B,SAIrBC,EAAeC,YACjB,MAAMC,EAAQC,EACVF,EACoC,QAApCG,EAAmB,QAAnBC,EAAAC,WAAWC,gBAAQ,IAAAF,OAAA,EAAAA,EAAEG,uBAAe,IAAAJ,EAAAA,EAAI,MAEtCK,EAASC,SAASR,EAAO,IAC/B,OAAOS,OAAOC,MAAMH,GAAUI,IAAWJ,CAAM,~~EAkHtCK~~,EAASC,EAAMC,~~YA/GV~~,CACdC,EACAC,KAEA,MAAMC,QACFA,EAAOC,OACPA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,QACNA,EAAOC,UACPA,GAEAT,EADGU,EAAUC,EACbX,EAVE,CAAA,UAAA,SAAA,SAAA,SAAA,SAAA,SAAA,UAAA,cAYAY,EAAUC,EAAuB,MACjCC,EAAYC,EAAUH,~~EAASX~~,GAE/Be,EAAa,CACfC,EACAC,KAEA,IAAKD,EAAM,MAAO,~~CAAEjE~~,~~WAAOmE~~,~~EAAWhE~~,~~UAAMgE~~,~~EAAW9D~~,~~SAAK8D~~,GAE5D,GAAIC,MAAMC,QAAQJ,GAAO,CACrB,~~MAAOjE~~,EAAOK,~~GAAO4D~~,EACrB,IAAY,~~IAAR5D~~,EACA,MAAO,CAAEL,QAAOG,~~UAAMgE~~,~~EAAW9D~~,KAAK,GAE1C,~~MAAMiE~~,~~EAAUvC~~,~~EAAYmC~~,GAC5B,MAAO,~~CACHlE~~,QACAG,~~KAAMoE~~,KAAKC,~~IAAInE~~,EAAML,~~EAAOsE~~,~~GAC5BjE~~,~~SAAK8D~~,EAEb,CAEA,MAAMG,~~EAAUvC~~,~~EAAYmC~~,GAC5B,MAAO,~~CACHlE~~,~~WAAOmE~~,~~EACPhE~~,~~KAAMoE~~,KAAKC,IAAIP,EAAMK,~~GACrBjE~~,~~SAAK8D~~,EACR,~~EA2DL~~,~~OAJAM~~,EAAcb,~~EAAOc~~,~~OAAAC~~,~~OAAA,CAAA,EApDF,~~MACf,~~MAAMC~~,~~EAAYZ~~,~~EAAWR~~,EAASqB,EAAW,eAC3CC,~~EAAWd~~,~~EAAWT~~,GAAUC,EAASqB,EAAW,cACpDE,~~EAAWf~~,~~EACbV~~,GAAUC,GAAUC,EACpBqB,EAAW,cAETG,~~EAAWhB~~,~~EACbX~~,GAAUC,GAAUC,GAAUC,EAC9BqB,EAAW,cAETI,~~EAAWjB~~,~~EACbZ~~,GAAUC,GAAUC,GAAUC,GAAUC,EACxCqB,EAAW,cAETK,~~EAAWlB~~,~~EACbb~~,GAAUC,GAAUC,GAAUC,GAAUC,GAAUC,EAClDqB,EAAW,cAETM,~~EAAYnB~~,~~EACdd~~,GACIC,GACAC,GACAC,GACAC,GACAC,GACAC,EACJqB,EAAW,eAGTO,EAAkC,CAAA,EAmBxC,MAjBgB,CACZ,CAAEC,OAAQT,EAAWU,OAAQ,OAC7B,CAAED,OAAQP,EAAUQ,OAAQ,MAC5B,CAAED,OAAQN,EAAUO,OAAQ,MAC5B,CAAED,OAAQL,EAAUM,OAAQ,MAC5B,CAAED,OAAQJ,EAAUK,OAAQ,MAC5B,CAAED,OAAQH,EAAUI,OAAQ,MAC5B,CAAED,OAAQF,EAAWG,OAAQ,QAGzBC,SAAQ,EAAGF,SAAQC,aACvB,MAAME,EAAS1F,EAAUwF,GACrBD,EAAOrF,QAAOoF,EAAQI,EAAOxF,OAASyF,OAAOJ,EAAOrF,QACpDqF,EAAOlF,OAAMiF,EAAQI,EAAOrF,MAAQsF,OAAOJ,EAAOlF,OAClDkF,EAAOhF,MAAK+E,EAAQI,EAAOnF,KAAOoF,OAAOJ,EAAOhF,KAAI,IAGrD+E,CAAO,~~EAIXM~~,~~KAIHC~~,uBACI1C,~~IAAKa~~,~~EACLL~~,UAAWmC,EAAKC,EAAepC,IAC3BC,GACN"}
1	+ {"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":"+6BAUA,MAAMA,EAAoD,CACtDC,IAAK,CACDC,MAAOC,EAAcC,SACrBC,KAAMF,EAAcG,QACpBC,IAAKJ,EAAcK,QAEvBC,GAAI,CACAP,MAAOC,EAAcO,QACrBL,KAAMF,EAAcQ,OACpBJ,IAAKJ,EAAcS,OAEvBC,GAAI,CACAX,MAAOC,EAAcW,QACrBT,KAAMF,EAAcY,OACpBR,IAAKJ,EAAca,OAEvBC,GAAI,CACAf,MAAOC,EAAce,QACrBb,KAAMF,EAAcgB,OACpBZ,IAAKJ,EAAciB,OAEvBC,GAAI,CACAnB,MAAOC,EAAcmB,QACrBjB,KAAMF,EAAcoB,OACpBhB,IAAKJ,EAAcqB,OAEvBC,GAAI,CACAvB,MAAOC,EAAcuB,QACrBrB,KAAMF,EAAcwB,OACpBpB,IAAKJ,EAAcyB,OAEvBC,IAAK,CACD3B,MAAOC,EAAc2B,SACrBzB,KAAMF,EAAc4B,QACpBxB,IAAKJ,EAAc6B,SAIrBC,EAAeC,YACjB,MAAMC,EAAQC,EACVF,EACoC,QAApCG,EAAmB,QAAnBC,EAAAC,WAAWC,gBAAQ,IAAAF,OAAA,EAAAA,EAAEG,uBAAe,IAAAJ,EAAAA,EAAI,MAEtCK,EAASC,SAASR,EAAO,IAC/B,OAAOS,OAAOC,MAAMH,GAAUI,IAAWJ,CAAM,EAiHtCK,EAASC,EAAMC,YA9GV,CACdC,EACAC,KAEA,MAAMC,QACFA,EAAOC,OACPA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,QACNA,EAAOC,UACPA,GAEAT,EADGU,EAAUC,EACbX,EAVE,CAAA,UAAA,SAAA,SAAA,SAAA,SAAA,SAAA,UAAA,cAYAY,EAAYC,IACZC,EAAUC,EAAuB,MACjCC,EAAYC,EAAUH,EAASb,GAE/BiB,EAAa,CACfC,EACAC,KAEA,IAAKD,EAAM,MAAO,CAAEnE,WAAOqE,EAAWlE,UAAMkE,EAAWhE,SAAKgE,GAE5D,GAAIC,MAAMC,QAAQJ,GAAO,CACrB,MAAOnE,EAAOK,GAAO8D,EACrB,IAAY,IAAR9D,EACA,MAAO,CAAEL,QAAOG,UAAMkE,EAAWhE,KAAK,GAE1C,MAAMmE,EAAUzC,EAAYqC,GAC5B,MAAO,CACHpE,QACAG,KAAMsE,KAAKC,IAAIrE,EAAML,EAAOwE,GAC5BnE,SAAKgE,EAEb,CAEA,MAAMG,EAAUzC,EAAYqC,GAC5B,MAAO,CACHpE,WAAOqE,EACPlE,KAAMsE,KAAKC,IAAIP,EAAMK,GACrBnE,SAAKgE,EACR,EAyDL,OAFAM,EAAcb,EAASF,EApDJ,MACf,MAAMgB,EAAYV,EAAWV,EAASqB,EAAW,eAC3CC,EAAWZ,EAAWX,GAAUC,EAASqB,EAAW,cACpDE,EAAWb,EACbZ,GAAUC,GAAUC,EACpBqB,EAAW,cAETG,EAAWd,EACbb,GAAUC,GAAUC,GAAUC,EAC9BqB,EAAW,cAETI,EAAWf,EACbd,GAAUC,GAAUC,GAAUC,GAAUC,EACxCqB,EAAW,cAETK,EAAWhB,EACbf,GAAUC,GAAUC,GAAUC,GAAUC,GAAUC,EAClDqB,EAAW,cAETM,EAAYjB,EACdhB,GACIC,GACAC,GACAC,GACAC,GACAC,GACAC,EACJqB,EAAW,eAGTO,EAAkC,CAAA,EAmBxC,MAjBgB,CACZ,CAAEC,OAAQT,EAAWU,OAAQ,OAC7B,CAAED,OAAQP,EAAUQ,OAAQ,MAC5B,CAAED,OAAQN,EAAUO,OAAQ,MAC5B,CAAED,OAAQL,EAAUM,OAAQ,MAC5B,CAAED,OAAQJ,EAAUK,OAAQ,MAC5B,CAAED,OAAQH,EAAUI,OAAQ,MAC5B,CAAED,OAAQF,EAAWG,OAAQ,QAGzBC,SAAQ,EAAGF,SAAQC,aACvB,MAAME,EAAS1F,EAAUwF,GACrBD,EAAOrF,QAAOoF,EAAQI,EAAOxF,OAASyF,OAAOJ,EAAOrF,QACpDqF,EAAOlF,OAAMiF,EAAQI,EAAOrF,MAAQsF,OAAOJ,EAAOlF,OAClDkF,EAAOhF,MAAK+E,EAAQI,EAAOnF,KAAOoF,OAAOJ,EAAOhF,KAAI,IAGrD+E,CAAO,EAGiBM,GAAe,CAAA,GAG9CC,uBACI1C,IAAKe,EACLP,UAAWmC,EAAKC,EAAepC,IAC3BC,GACN"}

package/layout/types.d.ts CHANGED Viewed

@@ -1,5 +1,3 @@
-import type { DefaultTheme } from "styled-components";
-import type { AddOne, Range } from "../util/utility-types";
 interface CommonLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     "data-testid"?: string | undefined;
@@ -14,20 +12,19 @@ export interface SectionProps extends CommonLayoutProps {
 }
 export interface ContentProps extends ContainerProps {
 }
-export type ColSpan<Max extends number | undefined> = Max extends number ? Range<Max> | [Range<AddOne<Max>>, Range<AddOne<Max>> | -1] | undefined : number | [number, number] | undefined;
-export type BreakpointSpan<Breakpoint extends keyof DefaultTheme["maxColumns"]> = DefaultTheme["maxColumns"] extends Record<Breakpoint, infer Max extends number> ? ColSpan<Max> : number | [number, number] | undefined;
+export type ColSpan = number | [number, number] | undefined;
 export interface ColProps {
     /**
      * Specifies the number of columns to be spanned across for any breakpoint.
      * If an array is specified, the format is [startCol, endCol].
      */
-    xxlCols?: BreakpointSpan<"xxl">;
-    xlCols?: BreakpointSpan<"xl">;
-    lgCols?: BreakpointSpan<"lg">;
-    mdCols?: BreakpointSpan<"md">;
-    smCols?: BreakpointSpan<"sm">;
-    xsCols?: BreakpointSpan<"xs">;
-    xxsCols?: BreakpointSpan<"xxs">;
+    xxlCols?: ColSpan;
+    xlCols?: ColSpan;
+    lgCols?: ColSpan;
+    mdCols?: ColSpan;
+    smCols?: ColSpan;
+    xsCols?: ColSpan;
+    xxsCols?: ColSpan;
 }
 export interface ColDivProps extends React.HTMLAttributes<HTMLDivElement>, ColProps {
     "data-testid"?: string;

package/link-list/link-list.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./link-list.styles_1g33nb4.css";const i="cfblyzz",t="iejabo3",s="ixxi28v",l="ia0puf0",e="i191w9a9",c="i1ek9mgx",o="i6tq5i6",p="e1p9oc1w",b="e1hdpk7s",k="tjt90m3",n="t1quebcu",x="t1l68ils",_="t5821wq";export{i as container,p as expandable,b as expandableList,e as itemContainer,c as itemContentContainer,o as itemDescription,t as itemIcon,s as itemTitleDefault,l as itemTitleSmall,x as toggleButton,n as toggleButtonIcon,k as toggleButtonLabel,_ as toggleButtonLoading};
+import"./link-list.styles_m57vks.css";const i="cfblyzz",t="iejabo3",s="ixxi28v",l="ia0puf0",e="i191w9a9",c="i1ek9mgx",k="i6tq5i6",o="e1p9oc1w",p="e1hdpk7s",m="tjt90m3",x="t1quebcu",_="t1l68ils",a="t5821wq";export{i as container,o as expandable,p as expandableList,e as itemContainer,c as itemContentContainer,k as itemDescription,t as itemIcon,s as itemTitleDefault,l as itemTitleSmall,_ as toggleButton,x as toggleButtonIcon,m as toggleButtonLabel,a as toggleButtonLoading};
 //# sourceMappingURL=link-list.styles.js.map

package/link-list/link-list.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"link-list.styles.js","sources":["../../src/link-list/link-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour } from \"../theme\";\n\nexport const container = css`\n border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\n// =============================================================================\n// ITEM STYLES\n// =============================================================================\nexport const itemIcon = css`\n height: 1.~~125rem~~;\n width: 1.~~125rem~~;\n color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const itemTitleDefault = css`\n color: ${Colour[\"text-primary\"]};\n ~~margin-bottom: 0.5rem;\n~~`;\n\nexport const itemTitleSmall = css`\n color: ${Colour[\"text-primary\"]};\n`;\n\nexport const itemContainer = css`\n padding: 1rem 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n min-height: 4rem;\n\n &:not(:last-of-type) {\n border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n }\n\n &:hover {\n .${itemTitleDefault}, .${itemTitleSmall}, .${itemIcon} {\n color: ${Colour[\"text-hover\"]};\n }\n }\n`;\n\nexport const itemContentContainer = css`\n display: flex;\n flex-direction: column;\n flex: 1;\n margin-right: 1rem;\n`;\n\nexport const itemDescription = css`\n margin-top: 0.25rem;\n`;\n\n// =============================================================================\n// TOGGLE STYLES\n// =============================================================================\nexport const expandable = css`\n overflow: hidden;\n`;\n\nexport const expandableList = css`\n border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const toggleButtonLabel = css`\n color: ${Colour[\"text-primary\"]};\n`;\n\nexport const toggleButtonIcon = css`\n height: 1.125rem;\n width: 1.125rem;\n color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const toggleButton = css`\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n padding: 1rem 0;\n border: none;\n background: none;\n cursor: pointer;\n border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n gap: 1rem;\n\n &:hover {\n .${toggleButtonLabel}, .${toggleButtonIcon} {\n color: ${Colour[\"text-hover\"]};\n text-decoration: underline;\n }\n }\n`;\n\nexport const toggleButtonLoading = css`\n cursor: default;\n flex-direction: row-reverse;\n\n .${toggleButtonLabel}, .${toggleButtonIcon} {\n color: ${Colour[\"text-disabled\"]};\n text-decoration: none;\n }\n\n &:hover {\n .${toggleButtonLabel}, .${toggleButtonIcon} {\n color: ${Colour[\"text-disabled\"]};\n text-decoration: none;\n }\n }\n`;\n"],"names":["container","itemIcon","itemTitleDefault","itemTitleSmall","itemContainer","itemContentContainer","itemDescription","expandable","expandableList","toggleButtonLabel","toggleButtonIcon","toggleButton","toggleButtonLoading"],"mappings":"~~gEAIO~~,MAAMA,EAAS,UAQTC,EAAQ,UAMRC,EAAgB,~~UAKhBC~~,EAAc,UAIdC,EAAa,WAkBbC,EAAoB,WAOpBC,EAAe,UAOfC,EAAU,WAIVC,EAAc,WAIdC,EAAiB,UAIjBC,EAAgB,WAMhBC,EAAY,WAoBZC,EAAmB"}
1	+ {"version":3,"file":"link-list.styles.js","sources":["../../src/link-list/link-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour } from \"../theme\";\n\nexport const container = css`\n border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\n// =============================================================================\n// ITEM STYLES\n// =============================================================================\nexport const itemIcon = css`\n height: 1.375rem;\n width: 1.375rem;\n color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const itemTitleDefault = css`\n color: ${Colour[\"text-primary\"]};\n`;\n\nexport const itemTitleSmall = css`\n color: ${Colour[\"text-primary\"]};\n`;\n\nexport const itemContainer = css`\n padding: 1rem 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n min-height: 4rem;\n\n &:not(:last-of-type) {\n border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n }\n\n &:hover {\n .${itemTitleDefault}, .${itemTitleSmall}, .${itemIcon} {\n color: ${Colour[\"text-hover\"]};\n }\n }\n`;\n\nexport const itemContentContainer = css`\n display: flex;\n flex-direction: column;\n flex: 1;\n margin-right: 1rem;\n`;\n\nexport const itemDescription = css`\n margin-top: 0.25rem;\n`;\n\n// =============================================================================\n// TOGGLE STYLES\n// =============================================================================\nexport const expandable = css`\n overflow: hidden;\n`;\n\nexport const expandableList = css`\n border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const toggleButtonLabel = css`\n color: ${Colour[\"text-primary\"]};\n`;\n\nexport const toggleButtonIcon = css`\n height: 1.125rem;\n width: 1.125rem;\n color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const toggleButton = css`\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n padding: 1rem 0;\n border: none;\n background: none;\n cursor: pointer;\n border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n gap: 1rem;\n\n &:hover {\n .${toggleButtonLabel}, .${toggleButtonIcon} {\n color: ${Colour[\"text-hover\"]};\n text-decoration: underline;\n }\n }\n`;\n\nexport const toggleButtonLoading = css`\n cursor: default;\n flex-direction: row-reverse;\n\n .${toggleButtonLabel}, .${toggleButtonIcon} {\n color: ${Colour[\"text-disabled\"]};\n text-decoration: none;\n }\n\n &:hover {\n .${toggleButtonLabel}, .${toggleButtonIcon} {\n color: ${Colour[\"text-disabled\"]};\n text-decoration: none;\n }\n }\n`;\n"],"names":["container","itemIcon","itemTitleDefault","itemTitleSmall","itemContainer","itemContentContainer","itemDescription","expandable","expandableList","toggleButtonLabel","toggleButtonIcon","toggleButton","toggleButtonLoading"],"mappings":"+DAIO,MAAMA,EAAS,UAQTC,EAAQ,UAMRC,EAAgB,UAIhBC,EAAc,UAIdC,EAAa,WAkBbC,EAAoB,WAOpBC,EAAe,UAOfC,EAAU,WAIVC,EAAc,WAIdC,EAAiB,UAIjBC,EAAgB,WAMhBC,EAAY,WAoBZC,EAAmB"}

package/{cjs/link-list/link-list.styles_1g33nb4.css → link-list/link-list.styles_m57vks.css} RENAMED Viewed

@@ -1,6 +1,6 @@
 .cfblyzz{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
-.iejabo3{height:1.125rem;width:1.125rem;color:var(--fds-colour-icon-primary);}
-.ixxi28v{color:var(--fds-colour-text-primary);margin-bottom:0.5rem;}
+.iejabo3{height:1.375rem;width:1.375rem;color:var(--fds-colour-icon-primary);}
+.ixxi28v{color:var(--fds-colour-text-primary);}
 .ia0puf0{color:var(--fds-colour-text-primary);}
 .i191w9a9{padding:1rem 0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:4rem;}.i191w9a9:not(:last-of-type){border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.i191w9a9:hover .ixxi28v,.i191w9a9:hover .ia0puf0,.i191w9a9:hover .iejabo3{color:var(--fds-colour-text-hover);}
 .i1ek9mgx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;margin-right:1rem;}

package/local-nav/local-nav-dropdown/local-nav-dropdown.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./local-nav-dropdown.styles_ftv36t.css";const n={navWrapper:{stickyOffset:"--fds-internal-localNavDropdown-navWrapper-stickyOffset",sideMargin:"--fds-internal-localNavDropdown-navWrapper-sideMargin"},navItemList:{viewportHeight:"--fds-internal-localNavDropdown-navItemList-viewportHeight"}},a="nczumix",r="n1mayi9n",e="n1fsscye",t="n10li8ea",o="n1rgfmu8",i="n122w1r6",s="ny6lx9v",l="n1lmzf88",p="nc4nyiy",v="thuuy8a",c="beqsxqe",d="ns92rya",f="np844yu";export{c as backdrop,o as navItem,l as navItemLabel,p as navItemLabelSelected,s as navItemList,i as navItemSelected,e as navSelect,t as navSelectExpanded,a as navSelectIcon,r as navSelectIconExpanded,d as navWrapper,f as navWrapperStickied,v as tickIcon,n as tokens};
+import"./local-nav-dropdown.styles_uhd4xl.css";const n={navWrapper:{stickyOffset:"--fds-internal-localNavDropdown-navWrapper-stickyOffset",sideMargin:"--fds-internal-localNavDropdown-navWrapper-sideMargin"},navItemList:{viewportHeight:"--fds-internal-localNavDropdown-navItemList-viewportHeight"}},a="nczumix",r="n1mayi9n",e="n1fsscye",o="n10li8ea",i="n1rgfmu8",l="n122w1r6",s="ny6lx9v",t="n1lmzf88",p="nc4nyiy",v="thuuy8a",c="beqsxqe",d="ns92rya",y="np844yu";export{c as backdrop,i as navItem,t as navItemLabel,p as navItemLabelSelected,s as navItemList,l as navItemSelected,e as navSelect,o as navSelectExpanded,a as navSelectIcon,r as navSelectIconExpanded,d as navWrapper,y as navWrapperStickied,v as tickIcon,n as tokens};
 //# sourceMappingURL=local-nav-dropdown.styles.js.map

package/{cjs/local-nav/local-nav-dropdown/local-nav-dropdown.styles_ftv36t.css → local-nav/local-nav-dropdown/local-nav-dropdown.styles_uhd4xl.css} RENAMED Viewed

@@ -5,7 +5,7 @@
 .n1rgfmu8{padding:var(--fds-spacing-12) var(--fds-spacing-8) var(--fds-spacing-12) var(--fds-spacing-32);background:var(--fds-colour-bg);position:relative;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;}.n1rgfmu8:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0px;border-radius:var(--fds-radius-sm);}
 .n122w1r6{padding:var(--fds-spacing-12) var(--fds-spacing-8) var(--fds-spacing-12) 0;background:var(--fds-colour-bg-primary-subtlest);}
 .ny6lx9v{--fds-internal-localNavDropdown-navItemList-viewportHeight:initial;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transform-origin:top;list-style-type:none;padding:0 var(--fds-spacing-8);margin:0;background:var(--fds-colour-bg);cursor:pointer;box-shadow:0 0 var(--fds-border-width-010) var(--fds-border-width-010) var(--fds-colour-border);border-bottom-right-radius:var(--fds-radius-sm);border-bottom-left-radius:var(--fds-radius-sm);overflow-y:auto;max-height:var(--fds-internal-localNavDropdown-navItemList-viewportHeight);}
-.n1lmzf88{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}
+.n1lmzf88{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}
 .nc4nyiy{color:var(--fds-colour-text-selected);}
 .thuuy8a{color:var(--fds-colour-icon-selected);margin:0 var(--fds-spacing-8);}
 .beqsxqe{position:fixed;top:0;right:0;left:0;bottom:0;background-color:var(--fds-colour-overlay-strong);z-index:-1;}

package/markup/markup.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import r from"clsx";import{forwardRef as s,useRef as o,useMemo as i}from"react";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{generateFontProperties as m}from"../theme/utils/font.js";import{useApplyStyle as l}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{baseMarkup as p,sizedMarkup as n}from"./markup.style.js";import{createMarkupFontStyles as u}from"./markup.utils.js";const j=s(((s,j)=>{const{baseTextColor:c,baseTextSize:f,inline:h,className:d}=s,x=e(s,["baseTextColor","baseTextSize","inline","className"]),b=o(null),y=i((()=>a(b,j)),[j]),g=i((()=>{if(f)return m(f,"regular")}),[f]),k=i((()=>Object.assign({color:c||null},u(g))),[c,g]);l(b,k);const v=r(p,f&&n,d);return t(h?"span":"div",Object.assign({ref:y,className:v},x))}));export{j as Markup};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import r from"clsx";import{forwardRef as s,useRef as o,useMemo as i}from"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as m}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{generateFontProperties as l}from"../theme/utils/font.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{baseMarkup as n,sizedMarkup as p}from"./markup.style.js";const j=s(((s,j)=>{const{baseTextColor:u,baseTextSize:c,inline:f,className:h}=s,d=e(s,["baseTextColor","baseTextSize","inline","className"]),x=o(null),b=i((()=>a(x,j)),[j]),y=i((()=>{if(c)return l(c,"regular")}),[c]),g=i((()=>Object.assign({color:u||null},y)),[u,y]);m(x,g);const k=r(n,c&&p,h);return t(f?"span":"div",Object.assign({ref:b,className:k},d))}));export{j as Markup};
 //# sourceMappingURL=markup.js.map

package/markup/markup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"markup.js","sources":["../../src/markup/markup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useMemo, useRef } from \"react\";\n\nimport { ~~generateFontProperties,~~ useApplyStyle } from \"../theme\";\nimport { ~~mergeRefs~~ } from \"../~~util~~\";\nimport * as ~~styles~~ from \"~~./markup.style~~\";\nimport { ~~createMarkupFontStyles~~ } from \"./markup.~~utils~~\";\nimport type { MarkupProps } from \"./types\";\n\nconst Component = (props: MarkupProps, ref: React.Ref<HTMLDivElement>) => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const { baseTextColor, baseTextSize, inline, className, ...otherProps } =\n props;\n\n const containerRef = useRef<HTMLDivElement \| HTMLSpanElement>(null);\n const mergedRef = useMemo(() => mergeRefs(containerRef, ref), [ref]);\n\n const fontDeclarations = useMemo(() => {\n if (!baseTextSize) {\n return undefined;\n }\n\n return generateFontProperties(baseTextSize, \"regular\");\n }, [baseTextSize]);\n\n const appliedStyles = useMemo(\n () => ({\n color: baseTextColor \|\| null,\n ...~~createMarkupFontStyles(~~fontDeclarations),\n }),\n [baseTextColor, fontDeclarations]\n );\n\n useApplyStyle(containerRef, appliedStyles);\n\n const mergedClassName = clsx(\n styles.baseMarkup,\n baseTextSize && styles.sizedMarkup,\n className\n );\n\n const ElementTag = inline ? \"span\" : \"div\";\n\n return (\n <ElementTag\n ref={mergedRef as React.Ref<HTMLDivElement & HTMLSpanElement>}\n className={mergedClassName}\n {...otherProps}\n />\n );\n};\n\nexport const Markup = forwardRef(Component);\n"],"names":["Markup","forwardRef","props","ref","baseTextColor","baseTextSize","inline","className","otherProps","__rest","containerRef","useRef","mergedRef","useMemo","mergeRefs","fontDeclarations","generateFontProperties","appliedStyles","Object","assign","color","~~createMarkupFontStyles","~~useApplyStyle","mergedClassName","clsx","styles.baseMarkup","styles.sizedMarkup","_jsx"],"mappings":"~~q5BAUA~~,MA6CaA,EAASC,GA7CJ,CAACC,EAAoBC,KAInC,MAAMC,cAAEA,EAAaC,aAAEA,EAAYC,OAAEA,EAAMC,UAAEA,GACzCL,EADuDM,EAAUC,EACjEP,EADE,CAAA,gBAAA,eAAA,SAAA,cAGAQ,EAAeC,EAAyC,MACxDC,EAAYC,GAAQ,IAAMC,EAAUJ,EAAcP,IAAM,CAACA,IAEzDY,EAAmBF,GAAQ,KAC7B,GAAKR,EAIL,OAAOW,EAAuBX,EAAc,UAAU,GACvD,CAACA,IAEEY,EAAgBJ,GAClB,IAAMK,OAAAC,OAAA,CACFC,MAAOhB,GAAiB,~~MACrBiB~~,~~EAAuBN~~,~~KAE9B,~~CAACX,EAAeW,~~IAGpBO~~,~~EAAcZ~~,EAAcO,GAE5B,~~MAAMM~~,EAAkBC,EACpBC,~~EACApB~~,~~GAAgBqB~~,~~EAChBnB~~,GAKJ,~~OACIoB~~,~~EAHerB~~,EAAS,OAAS,MAGtBY,OAAAC,OAAA,CACPhB,IAAKS,EACLL,~~UAAWgB~~,~~GACPf~~,GACN"}
1	+ {"version":3,"file":"markup.js","sources":["../../src/markup/markup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useMemo, useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { generateFontProperties } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./markup.style\";\nimport type { MarkupProps } from \"./types\";\n\nconst Component = (props: MarkupProps, ref: React.Ref<HTMLDivElement>) => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const { baseTextColor, baseTextSize, inline, className, ...otherProps } =\n props;\n\n const containerRef = useRef<HTMLDivElement \| HTMLSpanElement>(null);\n const mergedRef = useMemo(() => mergeRefs(containerRef, ref), [ref]);\n\n const fontDeclarations = useMemo(() => {\n if (!baseTextSize) {\n return undefined;\n }\n\n return generateFontProperties(baseTextSize, \"regular\");\n }, [baseTextSize]);\n\n const appliedStyles = useMemo(\n () => ({\n color: baseTextColor \|\| null,\n ...fontDeclarations,\n }),\n [baseTextColor, fontDeclarations]\n );\n\n useApplyStyle(containerRef, appliedStyles);\n\n const mergedClassName = clsx(\n styles.baseMarkup,\n baseTextSize && styles.sizedMarkup,\n className\n );\n\n const ElementTag = inline ? \"span\" : \"div\";\n\n return (\n <ElementTag\n ref={mergedRef as React.Ref<HTMLDivElement & HTMLSpanElement>}\n className={mergedClassName}\n {...otherProps}\n />\n );\n};\n\nexport const Markup = forwardRef(Component);\n"],"names":["Markup","forwardRef","props","ref","baseTextColor","baseTextSize","inline","className","otherProps","__rest","containerRef","useRef","mergedRef","useMemo","mergeRefs","fontDeclarations","generateFontProperties","appliedStyles","Object","assign","color","useApplyStyle","mergedClassName","clsx","styles.baseMarkup","styles.sizedMarkup","_jsx"],"mappings":"01BAUA,MA6CaA,EAASC,GA7CJ,CAACC,EAAoBC,KAInC,MAAMC,cAAEA,EAAaC,aAAEA,EAAYC,OAAEA,EAAMC,UAAEA,GACzCL,EADuDM,EAAUC,EACjEP,EADE,CAAA,gBAAA,eAAA,SAAA,cAGAQ,EAAeC,EAAyC,MACxDC,EAAYC,GAAQ,IAAMC,EAAUJ,EAAcP,IAAM,CAACA,IAEzDY,EAAmBF,GAAQ,KAC7B,GAAKR,EAIL,OAAOW,EAAuBX,EAAc,UAAU,GACvD,CAACA,IAEEY,EAAgBJ,GAClB,IAAMK,OAAAC,OAAA,CACFC,MAAOhB,GAAiB,MACrBW,IAEP,CAACX,EAAeW,IAGpBM,EAAcX,EAAcO,GAE5B,MAAMK,EAAkBC,EACpBC,EACAnB,GAAgBoB,EAChBlB,GAKJ,OACImB,EAHepB,EAAS,OAAS,MAGtBY,OAAAC,OAAA,CACPhB,IAAKS,EACLL,UAAWe,GACPd,GACN"}

package/markup/markup.style.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./markup.style_1iu40x9.css";const t={rootFontFamily:"--fds-internal-markup-root-fontFamily",rootFontVariant:"--fds-internal-markup-root-fontVariant",rootFontSize:"--fds-internal-markup-root-fontSize",rootFontWeight:"--fds-internal-markup-root-fontWeight",rootLineHeight:"--fds-internal-markup-root-lineHeight",rootLetterSpacing:"--fds-internal-markup-root-letterSpacing"},o="b2c8sfe",r="stfuo83";export{o as baseMarkup,r as sizedMarkup,t as tokens};
+import"./markup.style_1iu40x9.css";const s="b2c8sfe",t="stfuo83";export{s as baseMarkup,t as sizedMarkup};
 //# sourceMappingURL=markup.style.js.map

package/markup/markup.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"markup.style.js","sources":["../../src/markup/markup.style.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme/tokens/colour\";\nimport { Font } from \"../theme/tokens/font\";\n\nexport const tokens = {\n rootFontFamily: \"--fds-internal-markup-root-fontFamily\",\n rootFontVariant: \"--fds-internal-markup-root-fontVariant\",\n rootFontSize: \"--fds-internal-markup-root-fontSize\",\n rootFontWeight: \"--fds-internal-markup-root-fontWeight\",\n rootLineHeight: \"--fds-internal-markup-root-lineHeight\",\n rootLetterSpacing: \"--fds-internal-markup-root-letterSpacing\",\n} as const;\n\nexport const baseMarkup = css`\n strong {\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n }\n\n p {\n margin: 0;\n }\n\n a {\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n color: ${Colour.hyperlink};\n text-decoration: underline;\n\n svg {\n color: ${Colour[\"icon-primary\"]};\n height: 1lh;\n width: 1em;\n margin-left: 0.4rem;\n vertical-align: middle;\n }\n\n &:hover,\n &:active,\n &:visited,\n &:focus {\n color: ${Colour[\"hyperlink-hover\"]};\n\n svg {\n color: ${Colour[\"icon-hover\"]};\n }\n }\n }\n\n ul,\n ol {\n margin: 0;\n padding: 0;\n margin-left: 2.5rem;\n }\n\n ol {\n list-style: decimal;\n }\n\n ul {\n list-style: disc;\n }\n`;\n\nexport const sizedMarkup = css`\n font-family: var(${tokens.rootFontFamily}, inherit);\n font-variant: var(${tokens.rootFontVariant}, inherit);\n font-size: var(${tokens.rootFontSize}, inherit);\n font-weight: var(${tokens.rootFontWeight}, inherit);\n line-height: var(${tokens.rootLineHeight}, inherit);\n letter-spacing: var(${tokens.rootLetterSpacing}, inherit);\n`;\n"],"names":["~~tokens","rootFontFamily","rootFontVariant","rootFontSize","rootFontWeight","rootLineHeight","rootLetterSpacing","~~baseMarkup","sizedMarkup"],"mappings":"~~yDAKO~~,MAAMA,~~EAAS,CAClBC,eAAgB,wCAChBC,gBAAiB,yCACjBC,aAAc,sCACdC,eAAgB,wCAChBC,eAAgB,wCAChBC,kBAAmB,4CAGVC,~~EAAU,UAkDVC,EAAW"}
1	+ {"version":3,"file":"markup.style.js","sources":["../../src/markup/markup.style.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme/tokens/colour\";\nimport { Font } from \"../theme/tokens/font\";\n\nexport const tokens = {\n rootFontFamily: \"--fds-internal-markup-root-fontFamily\",\n rootFontVariant: \"--fds-internal-markup-root-fontVariant\",\n rootFontSize: \"--fds-internal-markup-root-fontSize\",\n rootFontWeight: \"--fds-internal-markup-root-fontWeight\",\n rootLineHeight: \"--fds-internal-markup-root-lineHeight\",\n rootLetterSpacing: \"--fds-internal-markup-root-letterSpacing\",\n} as const;\n\nexport const baseMarkup = css`\n strong {\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n }\n\n p {\n margin: 0;\n }\n\n a {\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n color: ${Colour.hyperlink};\n text-decoration: underline;\n\n svg {\n color: ${Colour[\"icon-primary\"]};\n height: 1lh;\n width: 1em;\n margin-left: 0.4rem;\n vertical-align: middle;\n }\n\n &:hover,\n &:active,\n &:visited,\n &:focus {\n color: ${Colour[\"hyperlink-hover\"]};\n\n svg {\n color: ${Colour[\"icon-hover\"]};\n }\n }\n }\n\n ul,\n ol {\n margin: 0;\n padding: 0;\n margin-left: 2.5rem;\n }\n\n ol {\n list-style: decimal;\n }\n\n ul {\n list-style: disc;\n }\n`;\n\nexport const sizedMarkup = css`\n font-family: var(${tokens.rootFontFamily}, inherit);\n font-variant: var(${tokens.rootFontVariant}, inherit);\n font-size: var(${tokens.rootFontSize}, inherit);\n font-weight: var(${tokens.rootFontWeight}, inherit);\n line-height: var(${tokens.rootLineHeight}, inherit);\n letter-spacing: var(${tokens.rootLetterSpacing}, inherit);\n`;\n"],"names":["baseMarkup","sizedMarkup"],"mappings":"yDAcO,MAAMA,EAAU,UAkDVC,EAAW"}

package/markup/types.d.ts CHANGED Viewed

@@ -1,8 +1,9 @@
 import type { ColourCSSVariableString, FontSize } from "../theme";
 type CustomCssString = string & {};
+type MarkupTextSize = Exclude<FontSize, "form-label" | "form-description">;
 export interface MarkupProps extends React.HTMLAttributes<HTMLDivElement> {
     /** The default font size. If not specified, inherited from the parent */
-    baseTextSize?: FontSize | undefined;
+    baseTextSize?: MarkupTextSize | undefined;
     /** The default font color. If not specified, inherited from the parent */
     baseTextColor?: ColourCSSVariableString | CustomCssString | undefined;
     /**

package/masked-input/masked-input.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./masked-input.styles_4i1qsy.css";const i={iconContainer:{inactiveColor:"--fds-internal-maskedInput-iconContainer-inactiveColor",activeColor:"--fds-internal-maskedInput-iconContainer-activeColor"}},e="ilvnzaw",n="ij8rwek",t="i1q5e8sd",o="lsb4klr",r="l1o6dphh",s="s1lksd2c",a="t12y77bq",c="eimq00u",l="e1roice1",d="e1tg5b5m",m="c1jw7yzb",p="r1svptpi",k="r1dgmaf",C="r1mk0cgh";export{m as clickableErrorWrapper,l as errorIcon,d as errorLabel,c as errorTextContainer,n as iconContainer,t as iconContainerDisabled,e as inputGroupWrapper,r as loadingLabel,o as loadingWrapper,p as readOnlyClickable,C as readOnlyIconContainer,k as readOnlyValueText,s as spinner,i as tokens,a as tryAgainLabel};
+import"./masked-input.styles_1cm388a.css";const i={iconContainer:{inactiveColor:"--fds-internal-maskedInput-iconContainer-inactiveColor",activeColor:"--fds-internal-maskedInput-iconContainer-activeColor"}},e="ilvnzaw",n="ij8rwek",t="i1q5e8sd",o="lsb4klr",r="l1o6dphh",a="s1lksd2c",s="t12y77bq",c="eimq00u",l="e1roice1",d="e1tg5b5m",m="c1jw7yzb",p="r1svptpi",k="r1dgmaf",C="r1mk0cgh";export{m as clickableErrorWrapper,l as errorIcon,d as errorLabel,c as errorTextContainer,n as iconContainer,t as iconContainerDisabled,e as inputGroupWrapper,r as loadingLabel,o as loadingWrapper,p as readOnlyClickable,C as readOnlyIconContainer,k as readOnlyValueText,a as spinner,i as tokens,s as tryAgainLabel};
 //# sourceMappingURL=masked-input.styles.js.map

package/masked-input/masked-input.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"masked-input.styles.js","sources":["../../src/masked-input/masked-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../theme\";\n\nexport const tokens = {\n iconContainer: {\n inactiveColor: \"--fds-internal-maskedInput-iconContainer-inactiveColor\",\n activeColor: \"--fds-internal-maskedInput-iconContainer-activeColor\",\n },\n};\n\nexport const inputGroupWrapper = css`\n padding: 0 0 0 ${Spacing[\"spacing-16\"]};\n\n input {\n cursor: initial;\n }\n`;\n\nexport const inputGroupWrapperReadOnly = css`\n padding: 0;\n`;\n\nexport const inputGroupWrapperInputPointer = css`\n input {\n cursor: pointer;\n }\n`;\n\nexport const iconContainer = css`\n ${tokens.iconContainer.inactiveColor}: initial;\n ${tokens.iconContainer.activeColor}: initial;\n\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: var(${tokens.iconContainer.activeColor}, ${Colour[\"icon-primary\"]});\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n\n svg {\n height: 1em;\n width: 1em;\n }\n`;\n\nexport const iconContainerDisabled = css`\n cursor: initial;\n color: var(${tokens.iconContainer.inactiveColor}, ${Colour.icon});\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING DISPLAY\n// -----------------------------------------------------------------------------\nexport const loadingWrapper = css`\n display: flex;\n align-items: center;\n height: 3rem;\n`;\n\nexport const loadingLabel = css`\n color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const spinner = css`\n margin-right: ${Spacing[\"spacing-8\"]};\n color: ${Colour[\"icon\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ERROR DISPLAY\n// -----------------------------------------------------------------------------\nexport const tryAgainLabel = css`\n color: ${Colour[\"text-primary\"]};\n text-decoration: underline;\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const errorTextContainer = css`\n display: flex;\n align-items: center;\n margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const errorIcon = css`\n color: ${Colour[\"icon-warning\"]};\n margin-right: ${Spacing[\"spacing-8\"]};\n height: 1em;\n width: 1em;\n`;\n\nexport const errorLabel = css`\n color: ${Colour[\"text-warning\"]};\n`;\n\nexport const clickableErrorWrapper = css`\n width: 100%;\n height: 3rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: none;\n background: transparent;\n cursor: pointer;\n\n ${Font[\"body-baseline-regular\"]}\n\n &:hover,\n &:active,\n &:focus {\n .${tryAgainLabel} {\n color: ${Colour[\"text-hover\"]};\n }\n }\n`;\n\n// -----------------------------------------------------------------------------\n// READONLY MASKED DISPLAY\n// -----------------------------------------------------------------------------\nexport const readOnlyClickable = css`\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n border: none;\n background: transparent;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-align: left;\n width: 100%;\n justify-content: space-between;\n min-height: 3rem;\n`;\n\nexport const readOnlyValueText = css`\n overflow-wrap: anywhere;\n`;\n\nexport const readOnlyIconContainer = css`\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${Colour[\"icon-primary\"]};\n padding: 0 1rem;\n flex-shrink: 0;\n\n svg {\n width: ${Font.Spec[\"body-size-baseline\"]};\n height: ${Font.Spec[\"body-size-baseline\"]};\n }\n`;\n"],"names":["tokens","iconContainer","inactiveColor","activeColor","inputGroupWrapper","iconContainerDisabled","loadingWrapper","loadingLabel","spinner","tryAgainLabel","errorTextContainer","errorIcon","errorLabel","clickableErrorWrapper","readOnlyClickable","readOnlyValueText","readOnlyIconContainer"],"mappings":"~~qEAIO~~,MAAMA,EAAS,CAClBC,cAAe,CACXC,cAAe,yDACfC,YAAa,yDAIRC,EAAiB,UAkBjBH,EAAa,UAiBbI,EAAqB,WAQrBC,EAAc,UAMdC,EAAY,WAIZC,EAAO,WAQPC,EAAa,WAMbC,EAAkB,UAMlBC,EAAS,WAOTC,EAAU,WAIVC,EAAqB,WAwBrBC,EAAiB,WAcjBC,EAAiB,UAIjBC,EAAqB"}
1	+ {"version":3,"file":"masked-input.styles.js","sources":["../../src/masked-input/masked-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../theme\";\n\nexport const tokens = {\n iconContainer: {\n inactiveColor: \"--fds-internal-maskedInput-iconContainer-inactiveColor\",\n activeColor: \"--fds-internal-maskedInput-iconContainer-activeColor\",\n },\n};\n\nexport const inputGroupWrapper = css`\n padding: 0 0 0 ${Spacing[\"spacing-16\"]};\n\n input {\n cursor: initial;\n }\n`;\n\nexport const inputGroupWrapperReadOnly = css`\n padding: 0;\n`;\n\nexport const inputGroupWrapperInputPointer = css`\n input {\n cursor: pointer;\n }\n`;\n\nexport const iconContainer = css`\n ${tokens.iconContainer.inactiveColor}: initial;\n ${tokens.iconContainer.activeColor}: initial;\n\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: var(${tokens.iconContainer.activeColor}, ${Colour[\"icon-primary\"]});\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n\n svg {\n height: 1em;\n width: 1em;\n }\n`;\n\nexport const iconContainerDisabled = css`\n cursor: initial;\n color: var(${tokens.iconContainer.inactiveColor}, ${Colour.icon});\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING DISPLAY\n// -----------------------------------------------------------------------------\nexport const loadingWrapper = css`\n display: flex;\n align-items: center;\n height: 3rem;\n`;\n\nexport const loadingLabel = css`\n color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const spinner = css`\n margin-right: ${Spacing[\"spacing-8\"]};\n color: ${Colour[\"icon\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ERROR DISPLAY\n// -----------------------------------------------------------------------------\nexport const tryAgainLabel = css`\n color: ${Colour[\"text-primary\"]};\n text-decoration: underline;\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const errorTextContainer = css`\n display: flex;\n align-items: center;\n margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const errorIcon = css`\n color: ${Colour[\"icon-warning\"]};\n margin-right: ${Spacing[\"spacing-8\"]};\n height: 1em;\n width: 1em;\n`;\n\nexport const errorLabel = css`\n color: ${Colour[\"text-warning\"]};\n`;\n\nexport const clickableErrorWrapper = css`\n width: 100%;\n height: 3rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: none;\n background: transparent;\n cursor: pointer;\n\n ${Font[\"body-baseline-regular\"]}\n\n &:hover,\n &:active,\n &:focus {\n .${tryAgainLabel} {\n color: ${Colour[\"text-hover\"]};\n }\n }\n`;\n\n// -----------------------------------------------------------------------------\n// READONLY MASKED DISPLAY\n// -----------------------------------------------------------------------------\nexport const readOnlyClickable = css`\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n border: none;\n background: transparent;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-align: left;\n width: 100%;\n justify-content: space-between;\n min-height: 3rem;\n`;\n\nexport const readOnlyValueText = css`\n overflow-wrap: anywhere;\n`;\n\nexport const readOnlyIconContainer = css`\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${Colour[\"icon-primary\"]};\n padding: 0 1rem;\n flex-shrink: 0;\n\n svg {\n width: ${Font.Spec[\"body-size-baseline\"]};\n height: ${Font.Spec[\"body-size-baseline\"]};\n }\n`;\n"],"names":["tokens","iconContainer","inactiveColor","activeColor","inputGroupWrapper","iconContainerDisabled","loadingWrapper","loadingLabel","spinner","tryAgainLabel","errorTextContainer","errorIcon","errorLabel","clickableErrorWrapper","readOnlyClickable","readOnlyValueText","readOnlyIconContainer"],"mappings":"sEAIO,MAAMA,EAAS,CAClBC,cAAe,CACXC,cAAe,yDACfC,YAAa,yDAIRC,EAAiB,UAkBjBH,EAAa,UAiBbI,EAAqB,WAQrBC,EAAc,UAMdC,EAAY,WAIZC,EAAO,WAQPC,EAAa,WAMbC,EAAkB,UAMlBC,EAAS,WAOTC,EAAU,WAIVC,EAAqB,WAwBrBC,EAAiB,WAcjBC,EAAiB,UAIjBC,EAAqB"}

package/{cjs/masked-input/masked-input.styles_4i1qsy.css → masked-input/masked-input.styles_1cm388a.css} RENAMED Viewed

@@ -10,7 +10,7 @@
 .eimq00u{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;margin-right:var(--fds-spacing-8);}
 .e1roice1{color:var(--fds-colour-icon-warning);margin-right:var(--fds-spacing-8);height:1em;width:1em;}
 .e1tg5b5m{color:var(--fds-colour-text-warning);}
-.c1jw7yzb{width:100%;height:3rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;background:transparent;cursor:pointer;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}.c1jw7yzb:hover .t12y77bq,.c1jw7yzb:active .t12y77bq,.c1jw7yzb:focus .t12y77bq{color:var(--fds-colour-text-hover);}
-.r1svptpi{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);border:none;background:transparent;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;cursor:pointer;text-align:left;width:100%;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;min-height:3rem;}
+.c1jw7yzb{width:100%;height:3rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;background:transparent;cursor:pointer;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}.c1jw7yzb:hover .t12y77bq,.c1jw7yzb:active .t12y77bq,.c1jw7yzb:focus .t12y77bq{color:var(--fds-colour-text-hover);}
+.r1svptpi{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);border:none;background:transparent;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;cursor:pointer;text-align:left;width:100%;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;min-height:3rem;}
 .r1dgmaf{overflow-wrap:anywhere;}
 .r1mk0cgh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;color:var(--fds-colour-icon-primary);padding:0 1rem;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.r1mk0cgh svg{width:var(--fds-font-body-size-baseline);height:var(--fds-font-body-size-baseline);}

package/masthead/masthead.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import"./sgds-day.css";import"./sgds-night.css";import e from"clsx";import{memo as s,useContext as d,useEffect as m}from"react";import{ThemeContext as o}from"styled-components";import{wrapper as n,wrapperStretch as c}from"./masthead.styles.js";const r=s((({stretch:s=!1})=>{const r=d(o),p="dark"===(null==r?void 0:r.colourMode);m((()=>{u()||g()}),[]),m((()=>{p?document.documentElement.classList.add(l):document.documentElement.classList.remove(l)}),[p]);const u=()=>document.getElementById(a),g=()=>{if(!document.getElementById(a)){const t=document.createElement("script");t.id=a,t.type="module",t.src=i,document.head.appendChild(t)}};return t("div",{className:e(n,s&&c),dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"}})})),a="lifesg-ds-masthead-script",i="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js",l="sgds-night-theme";export{r as Masthead};
+import{jsx as e}from"react/jsx-runtime";import"./sgds-day.css";import"./sgds-night.css";import t from"clsx";import{memo as s,useEffect as m}from"react";import"../theme/theme-provider/index.js";import{useTheme as o}from"../theme/theme-provider/hooks.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"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import{wrapper as r,wrapperStretch as d}from"./masthead.styles.js";const i=s((({stretch:s=!1})=>{const{mode:i}=o(),p="dark"===i;m((()=>{l()||h()}),[]),m((()=>{p?document.documentElement.classList.add(c):document.documentElement.classList.remove(c)}),[p]);const l=()=>document.getElementById(n),h=()=>{if(!document.getElementById(n)){const e=document.createElement("script");e.id=n,e.type="module",e.src=a,document.head.appendChild(e)}};return e("div",{className:t(r,s&&d),dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"}})})),n="lifesg-ds-masthead-script",a="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js",c="sgds-night-theme";export{i as Masthead};
 //# sourceMappingURL=masthead.js.map

package/masthead/masthead.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"masthead.js","sources":["../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\n\nimport clsx from \"clsx\";\nimport { memo, ~~useContext,~~ useEffect } from \"react\";\nimport { ~~ThemeContext~~ } from \"~~styled-components~~\";\n\nimport * as styles from \"./masthead.styles\";\nimport type { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n const ~~theme~~ = ~~useContext~~(~~ThemeContext~~);\n const isDarkMode = ~~theme?.colourMode~~ === \"dark\";\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n if (!doAssetsExist()) {\n addAssets();\n }\n }, []);\n\n useEffect(() => {\n // SGDS dark mode only takes effect when this class is set on the :root element\n if (isDarkMode) {\n document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n } else {\n document.documentElement.classList.remove(\n SGDS_THEME_NIGHT_CLASSNAME\n );\n }\n }, [isDarkMode]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const doAssetsExist = () => {\n return document.getElementById(SCRIPT_ID);\n };\n\n const addAssets = () => {\n if (!document.getElementById(SCRIPT_ID)) {\n const script = document.createElement(\"script\");\n script.id = SCRIPT_ID;\n script.type = \"module\";\n script.src = SCRIPT_SRC;\n\n document.head.appendChild(script);\n }\n };\n\n const createContent = () => {\n /*\n Note: Had to use this method because we had to create a\n * custom type to handle Web Components (refer to this guide\n * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n * But we are having troubles exporting the custom type definition\n * via rollup\n */\n return { __html: \"<sgds-masthead></sgds-masthead>\" };\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n return (\n <div\n className={clsx(styles.wrapper, stretch && styles.wrapperStretch)}\n dangerouslySetInnerHTML={createContent()}\n />\n );\n};\n\nexport const Masthead = memo(MastheadComponent);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SCRIPT_ID = \"lifesg-ds-masthead-script\";\nconst SCRIPT_SRC =\n \"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js\";\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","~~theme~~","~~useContext~~","~~ThemeContext","~~isDarkMode","~~colourMode","~~useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","getElementById","SCRIPT_ID","script","createElement","id","type","src","SCRIPT_SRC","head","appendChild","_jsx","className","clsx","styles.wrapper","styles.wrapperStretch","dangerouslySetInnerHTML","__html"],"mappings":"~~0TAUA~~,MAiEaA,EAAWC,GAjEE,EAAGC,WAAU,MACnC,MAAMC,~~EAAQC~~,~~EAAWC~~,~~GACnBC~~,~~EAAmC~~,~~UAAtBH~~,~~aAAK~~,~~EAALA,EAAOI,YAK1BC,~~GAAU,KACDC,KACDC,GACJ,GACD,IAEHF,GAAU,~~KAEFF~~,~~EACAK~~,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,~~CAACT~~,IAKJ,~~MAAMG~~,EAAgB,IACXE,SAASM,eAAeC,GAG7BR,EAAY,KACd,IAAKC,SAASM,eAAeC,GAAY,CACrC,MAAMC,EAASR,SAASS,cAAc,UACtCD,EAAOE,GAAKH,EACZC,EAAOG,KAAO,SACdH,EAAOI,IAAMC,EAEbb,SAASc,KAAKC,YAAYP,EAC9B,GAkBJ,OACIQ,SACIC,UAAWC,EAAKC,~~EAAgB5B~~,~~GAAW6B~~,GAC3CC,wBAVG,CAAEC,OAAQ,oCAWf,IASJf,EAAY,4BACZM,EACF,gGACET,EAA6B"}
1	+ {"version":3,"file":"masthead.js","sources":["../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\n\nimport clsx from \"clsx\";\nimport { memo, useEffect } from \"react\";\n\nimport { useTheme } from \"../theme\";\n\nimport * as styles from \"./masthead.styles\";\nimport type { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n const { mode } = useTheme();\n const isDarkMode = mode === \"dark\";\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n if (!doAssetsExist()) {\n addAssets();\n }\n }, []);\n\n useEffect(() => {\n // SGDS dark mode only takes effect when this class is set on the :root element\n if (isDarkMode) {\n document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n } else {\n document.documentElement.classList.remove(\n SGDS_THEME_NIGHT_CLASSNAME\n );\n }\n }, [isDarkMode]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const doAssetsExist = () => {\n return document.getElementById(SCRIPT_ID);\n };\n\n const addAssets = () => {\n if (!document.getElementById(SCRIPT_ID)) {\n const script = document.createElement(\"script\");\n script.id = SCRIPT_ID;\n script.type = \"module\";\n script.src = SCRIPT_SRC;\n\n document.head.appendChild(script);\n }\n };\n\n const createContent = () => {\n /*\n Note: Had to use this method because we had to create a\n * custom type to handle Web Components (refer to this guide\n * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n * But we are having troubles exporting the custom type definition\n * via rollup\n */\n return { __html: \"<sgds-masthead></sgds-masthead>\" };\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n return (\n <div\n className={clsx(styles.wrapper, stretch && styles.wrapperStretch)}\n dangerouslySetInnerHTML={createContent()}\n />\n );\n};\n\nexport const Masthead = memo(MastheadComponent);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SCRIPT_ID = \"lifesg-ds-masthead-script\";\nconst SCRIPT_SRC =\n \"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js\";\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","mode","useTheme","isDarkMode","useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","getElementById","SCRIPT_ID","script","createElement","id","type","src","SCRIPT_SRC","head","appendChild","_jsx","className","clsx","styles.wrapper","styles.wrapperStretch","dangerouslySetInnerHTML","__html"],"mappings":"wsBAWA,MAiEaA,EAAWC,GAjEE,EAAGC,WAAU,MACnC,MAAMC,KAAEA,GAASC,IACXC,EAAsB,SAATF,EAKnBG,GAAU,KACDC,KACDC,GACJ,GACD,IAEHF,GAAU,KAEFD,EACAI,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACR,IAKJ,MAAME,EAAgB,IACXE,SAASM,eAAeC,GAG7BR,EAAY,KACd,IAAKC,SAASM,eAAeC,GAAY,CACrC,MAAMC,EAASR,SAASS,cAAc,UACtCD,EAAOE,GAAKH,EACZC,EAAOG,KAAO,SACdH,EAAOI,IAAMC,EAEbb,SAASc,KAAKC,YAAYP,EAC9B,GAkBJ,OACIQ,SACIC,UAAWC,EAAKC,EAAgB1B,GAAW2B,GAC3CC,wBAVG,CAAEC,OAAQ,oCAWf,IASJf,EAAY,4BACZM,EACF,gGACET,EAA6B"}

package/modal/modal-box.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./modal-box.styles_1xrlxhd.css";const o="b14nv3ev",s="ccgs01o";export{o as box,s as closeButton};
+import"./modal-box.styles_y52cts.css";const o="b14nv3ev",s="ccgs01o";export{o as box,s as closeButton};
 //# sourceMappingURL=modal-box.styles.js.map

package/modal/modal-box.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal-box.styles.js","sources":["../../src/modal/modal-box.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius, Shadow, Spacing } from \"../theme\";\n\nexport const box = css`\n position: relative;\n display: flex;\n flex-direction: column;\n width: 40rem;\n max-height: 70%;\n background: ${Colour.bg};\n box-shadow: ${Shadow[\"lg-strong\"]};\n border-radius: ${Radius[\"lg\"]};\n overflow: hidden;\n\n ${MediaQuery.MaxWidth.md} {\n width: 90%;\n max-height: 70%;\n }\n`;\n\nexport const closeButton = css`\n position: absolute;\n top: var(~~--close-button-top-inset,~~ ${Spacing[\"spacing-16\"]});\n right: var(~~--close-button-right-inset,~~ ${Spacing[\"spacing-16\"]});\n padding: 0;\n color: ${Colour.icon};\n\n svg {\n height: 2rem;\n width: 2rem;\n }\n\n ${MediaQuery.MaxWidth.sm} {\n right: var(~~--close-button-right-inset,~~ ${Spacing[\"spacing-20\"]});\n }\n`;\n"],"names":["box","closeButton"],"mappings":"~~4DAIO~~,MAAMA,EAAG,WAiBHC,EAAW"}
1	+ {"version":3,"file":"modal-box.styles.js","sources":["../../src/modal/modal-box.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius, Shadow, Spacing } from \"../theme\";\nimport * as modalStyles from \"./modal.styles\";\n\nexport const box = css`\n position: relative;\n display: flex;\n flex-direction: column;\n width: 40rem;\n max-height: 70%;\n background: ${Colour.bg};\n box-shadow: ${Shadow[\"lg-strong\"]};\n border-radius: ${Radius[\"lg\"]};\n overflow: hidden;\n\n ${MediaQuery.MaxWidth.md} {\n width: 90%;\n max-height: 70%;\n }\n`;\n\nexport const closeButton = css`\n position: absolute;\n top: var(\n ${modalStyles.tokens.closeButton.topInset},\n ${Spacing[\"spacing-16\"]}\n );\n right: var(\n ${modalStyles.tokens.closeButton.rightInset},\n ${Spacing[\"spacing-16\"]}\n );\n padding: 0;\n color: ${Colour.icon};\n\n svg {\n height: 2rem;\n width: 2rem;\n }\n\n ${MediaQuery.MaxWidth.sm} {\n right: var(\n ${modalStyles.tokens.closeButton.rightInset},\n ${Spacing[\"spacing-20\"]}\n );\n }\n`;\n"],"names":["box","closeButton"],"mappings":"2DAKO,MAAMA,EAAG,WAiBHC,EAAW"}

package/modal/modal-box.styles_y52cts.css ADDED Viewed

@@ -0,0 +1,11 @@
+.b14nv3ev{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:40rem;max-height:70%;background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-lg-strong);border-radius:var(--fds-radius-lg);overflow:hidden;}:where(body.fds-breakpoint-md-max) .b14nv3ev{width:90%;max-height:70%;}
+.ccgs01o{position:absolute;top:var(
+        --fds-internal-modal-closeButton-topInset,
+        var(--fds-spacing-16)
+    );right:var(
+        --fds-internal-modal-closeButton-rightInset,
+        var(--fds-spacing-16)
+    );padding:0;color:var(--fds-colour-icon);}.ccgs01o svg{height:2rem;width:2rem;}:where(body.fds-breakpoint-sm-max) .ccgs01o{right:var(
+            --fds-internal-modal-closeButton-rightInset,
+            var(--fds-spacing-20)
+        );}

package/modal/modal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import o from"clsx";import r,{useRef as i,useEffect as l}from"react";import{Overlay as m}from"../overlay/overlay.js";import{useViewport as s}from"../shared/hooks/useViewport.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as n}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"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as a}from"../util/use-event.js";import{tokens as d,container as p,containerFromRight as c,containerFromLeft as h,containerFromBottom as u,containerFromTop as v,containerFromRightShow as j,containerFromLeftShow as f,containerFromBottomShow as y,containerFromTopShow as b,containerShow as k,containerHide as x}from"./modal.styles.js";const O={top:v,bottom:u,left:h,right:c},C={top:b,bottom:y,left:f,right:j},g=c=>{var{id:h="modal",show:u,animationFrom:v="bottom",children:j,enableOverlayClick:f=!0,rootComponentId:y,zIndex:b,onOverlayClick:g,dismissKeyboardOnShow:w=!0,className:I}=c,z=e(c,["id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","className"]);const{verticalHeight:N,offsetTop:$}=s(),q=i(null),E=i(null),F=j&&r.cloneElement(j,{ref:q});n(E,{[d.container.verticalHeight]:null==N?null:`${N}px`,[d.container.offsetTop]:null==$?null:`${$}px`});const H=a((()=>{var e,t;w&&(null===(t=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===t||t.call(e))}));return l((()=>{u&&H()}),[u,H]),t(m,{"data-testid":`${h}-overlay`,show:u,enableOverlayClick:f,onOverlayClick:g,id:h,rootId:y,containerRef:q,zIndex:b,children:t("div",Object.assign({ref:E,"data-testid":h},z,{className:o(p,O[v],u&&C[v],u?k:x,I),children:F}))})};export{g as Modal};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import o from"clsx";import r,{useRef as i}from"react";import{Overlay as l}from"../overlay/overlay.js";import{useViewport as m}from"../shared/hooks/useViewport.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as s}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"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as n}from"../util/use-event.js";import{tokens as a,container as d,containerFromRight as p,containerFromLeft as c,containerFromBottom as h,containerFromTop as u,containerFromRightShow as v,containerFromLeftShow as j,containerFromBottomShow as y,containerFromTopShow as f,containerShow as b,containerHide as k}from"./modal.styles.js";const x={top:u,bottom:h,left:c,right:p},O={top:f,bottom:y,left:j,right:v},C=p=>{var{id:c="modal",show:h,animationFrom:u="bottom",children:v,enableOverlayClick:j=!0,rootComponentId:y,zIndex:f,onOverlayClick:C,dismissKeyboardOnShow:g=!0,className:w}=p,I=e(p,["id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","className"]);const z=n((()=>{var e,t;g&&(null===(t=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===t||t.call(e))})),{verticalHeight:N,ready:S}=m({enabled:h,onBeforeStart:z}),q=i(null),E=i(null),F=v&&r.cloneElement(v,{ref:q});return s(E,{[a.container.verticalHeight]:null==N?null:`${N}px`}),t(l,{"data-testid":`${c}-overlay`,show:h,enableOverlayClick:j,onOverlayClick:C,id:c,rootId:y,containerRef:q,zIndex:f,children:t("div",Object.assign({ref:E,"data-testid":c},I,{className:o(d,x[u],h&&S?[O[u],b]:k,w),children:F}))})};export{C as Modal};
 //# sourceMappingURL=modal.js.map

package/modal/modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ~~useEffect,~~ useRef } from \"react\";\n\nimport type { ModalAnimationDirection } from \"../modal-v2/types\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport * as styles from \"./modal.styles\";\nimport type { ModalProps } from \"./types\";\n\nconst ANIMATION_FROM_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n top: styles.containerFromTop,\n bottom: styles.containerFromBottom,\n left: styles.containerFromLeft,\n right: styles.containerFromRight,\n};\n\nconst ANIMATION_FROM_SHOW_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n top: styles.containerFromTopShow,\n bottom: styles.containerFromBottomShow,\n left: styles.containerFromLeftShow,\n right: styles.containerFromRightShow,\n};\n\nexport const Modal = ({\n id = \"modal\",\n show,\n animationFrom = \"bottom\",\n children,\n enableOverlayClick = true,\n rootComponentId,\n zIndex,\n onOverlayClick,\n dismissKeyboardOnShow = true,\n className,\n ...otherProps\n}: ModalProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const { verticalHeight, ~~offsetTop~~ } = useViewport();\n const childRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const childWithRef =\n children && React.cloneElement(children, { ref: childRef });\n\n useApplyStyle(containerRef, {\n [styles.tokens.container.verticalHeight]:\n verticalHeight == null ? null : `${verticalHeight}px`,\n ~~[styles.tokens.container.offsetTop]:\n offsetTop == null ? null : `${offsetTop}px`,\n~~ });\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n const dismissKeyboard = useEvent(() => {\n if (dismissKeyboardOnShow) {\n (document.activeElement as HTMLElement)?.blur?.();\n }\n });\n\n useEffect(() => {\n if (show) {\n dismissKeyboard();\n }\n }, [show, dismissKeyboard]);\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <Overlay\n data-testid={`${id}-overlay`}\n show={show}\n enableOverlayClick={enableOverlayClick}\n onOverlayClick={onOverlayClick}\n id={id}\n rootId={rootComponentId}\n containerRef={childRef}\n zIndex={zIndex}\n >\n <div\n ref={containerRef}\n data-testid={id}\n {...otherProps}\n className={clsx(\n styles.container,\n ANIMATION_FROM_CLASS_MAP[animationFrom],\n show && ANIMATION_FROM_SHOW_CLASS_MAP[animationFrom],\n ~~show ?~~ styles.containerShow : styles.containerHide,\n className\n )}\n >\n {childWithRef}\n </div>\n </Overlay>\n );\n};\n"],"names":["ANIMATION_FROM_CLASS_MAP","top","styles.containerFromTop","bottom","styles.containerFromBottom","left","styles.containerFromLeft","right","styles.containerFromRight","ANIMATION_FROM_SHOW_CLASS_MAP","styles.containerFromTopShow","styles.containerFromBottomShow","styles.containerFromLeftShow","styles.containerFromRightShow","Modal","_a","id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","className","otherProps","__rest","~~verticalHeight~~","~~offsetTop~~","~~useViewport~~","~~childRef~~","~~useRef~~","~~containerRef~~","~~childWithRef~~","~~React~~","~~cloneElement~~","~~ref~~","~~useApplyStyle~~","~~styles.tokens~~","~~container~~","~~dismissKeyboard~~","~~useEvent~~","_b","~~document~~","~~activeElement~~","~~blur~~","~~useEffect~~","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","styles.containerShow","styles.containerHide"],"mappings":"~~smCAWA~~,MAAMA,EAAoE,CACtEC,IAAKC,EACLC,OAAQC,EACRC,KAAMC,EACNC,MAAOC,GAGLC,EAAyE,CAC3ER,IAAKS,EACLP,OAAQQ,EACRN,KAAMO,EACNL,MAAOM,GAGEC,EAASC,IAAA,IAAAC,GAClBA,EAAK,QAAOC,KACZA,EAAIC,cACJA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EAAIC,UAC5BA,GAASV,EACNW,EAAUC,EAAAZ,EAXK,+IAgBlB,MAAMa,eAAEA,EAAcC,~~UAAEA~~,~~GAAcC~~,~~IAChCC~~,EAAWC,EAAuB,MAClCC,EAAeD,EAAuB,MACtCE,~~EACFf~~,~~GAAYgB~~,EAAMC,~~aAAajB~~,EAAU,~~CAAEkB~~,IAAKN,~~IAEpDO~~,EAAcL,EAAc,CACxB,CAACM,EAAcC,~~UAAUZ~~,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,~~MACvC~~,~~CAACW~~,~~EAAcC~~,~~UAAUX~~,~~WACR~~,~~MAAbA~~,~~EAAoB,KAAO,GAAGA,QAMtC,MAAMY,EAAkBC,GAAS,aACzBlB,YACAmB,EAAuC,UAAtCC,SAASC,qBAA6B,IAAA9B,OAAA,EAAAA,EAAE+B,6BAC7C,IAYJ,OATAC,GAAU,KACF9B,GACAwB,GACJ,GACD,CAACxB,EAAMwB,IAMNO,EAACC,iBACgB,GAAGjC,~~YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,~~EACJkC~~,~~OAAQ7B~~,~~EACRY~~,aAAcF,~~EACdT~~,OAAQA,EAAMH,~~SAEd6B~~,EAAA,MAAAG,OAAAC,OAAA,~~CACIf~~,IAAKJ,~~gBACQjB~~,GACTU,EAAU,CACdD,~~UAAW4B~~,EACPC,~~EACAtD~~,EAAyBkB,GACzBD,~~GAAQR~~,EAA8BS,~~GACtCD~~,~~EAAOsC~~,~~EAAuBC~~,~~EAC9B/B,~~GACHN,~~SAEAe~~,MAEC"}
1	+ {"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport type { ModalAnimationDirection } from \"../modal-v2/types\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport * as styles from \"./modal.styles\";\nimport type { ModalProps } from \"./types\";\n\nconst ANIMATION_FROM_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n top: styles.containerFromTop,\n bottom: styles.containerFromBottom,\n left: styles.containerFromLeft,\n right: styles.containerFromRight,\n};\n\nconst ANIMATION_FROM_SHOW_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n top: styles.containerFromTopShow,\n bottom: styles.containerFromBottomShow,\n left: styles.containerFromLeftShow,\n right: styles.containerFromRightShow,\n};\n\nexport const Modal = ({\n id = \"modal\",\n show,\n animationFrom = \"bottom\",\n children,\n enableOverlayClick = true,\n rootComponentId,\n zIndex,\n onOverlayClick,\n dismissKeyboardOnShow = true,\n className,\n ...otherProps\n}: ModalProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const dismissKeyboard = useEvent(() => {\n if (dismissKeyboardOnShow) {\n (document.activeElement as HTMLElement)?.blur?.();\n }\n });\n const { verticalHeight, ready } = useViewport({\n enabled: show,\n onBeforeStart: dismissKeyboard,\n });\n const childRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const childWithRef =\n children && React.cloneElement(children, { ref: childRef });\n\n useApplyStyle(containerRef, {\n [styles.tokens.container.verticalHeight]:\n verticalHeight == null ? null : `${verticalHeight}px`,\n });\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <Overlay\n data-testid={`${id}-overlay`}\n show={show}\n enableOverlayClick={enableOverlayClick}\n onOverlayClick={onOverlayClick}\n id={id}\n rootId={rootComponentId}\n containerRef={childRef}\n zIndex={zIndex}\n >\n <div\n ref={containerRef}\n data-testid={id}\n {...otherProps}\n className={clsx(\n styles.container,\n ANIMATION_FROM_CLASS_MAP[animationFrom],\n show && ready\n ? [\n ANIMATION_FROM_SHOW_CLASS_MAP[animationFrom],\n styles.containerShow,\n ]\n : styles.containerHide,\n className\n )}\n >\n {childWithRef}\n </div>\n </Overlay>\n );\n};\n"],"names":["ANIMATION_FROM_CLASS_MAP","top","styles.containerFromTop","bottom","styles.containerFromBottom","left","styles.containerFromLeft","right","styles.containerFromRight","ANIMATION_FROM_SHOW_CLASS_MAP","styles.containerFromTopShow","styles.containerFromBottomShow","styles.containerFromLeftShow","styles.containerFromRightShow","Modal","_a","id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","className","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","ready","useViewport","enabled","onBeforeStart","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","styles.containerShow","styles.containerHide"],"mappings":"ulCAWA,MAAMA,EAAoE,CACtEC,IAAKC,EACLC,OAAQC,EACRC,KAAMC,EACNC,MAAOC,GAGLC,EAAyE,CAC3ER,IAAKS,EACLP,OAAQQ,EACRN,KAAMO,EACNL,MAAOM,GAGEC,EAASC,IAAA,IAAAC,GAClBA,EAAK,QAAOC,KACZA,EAAIC,cACJA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EAAIC,UAC5BA,GAASV,EACNW,EAAUC,EAAAZ,EAXK,+IAgBlB,MAAMa,EAAkBC,GAAS,aACzBL,YACAM,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAjB,OAAA,EAAAA,EAAEkB,6BAC7C,KAEEC,eAAEA,EAAcC,MAAEA,GAAUC,EAAY,CAC1CC,QAASpB,EACTqB,cAAeV,IAEbW,EAAWC,EAAuB,MAClCC,EAAeD,EAAuB,MACtCE,EACFvB,GAAYwB,EAAMC,aAAazB,EAAU,CAAE0B,IAAKN,IAUpD,OARAO,EAAcL,EAAc,CACxB,CAACM,EAAcC,UAAUd,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAOvCe,EAACC,EAAO,CAAA,cACS,GAAGlC,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJmC,OAAQ9B,EACRoB,aAAcF,EACdjB,OAAQA,EAAMH,SAEd8B,EAAA,MAAAG,OAAAC,OAAA,CACIR,IAAKJ,EAAY,cACJzB,GACTU,EAAU,CACdD,UAAW6B,EACPC,EACAvD,EAAyBkB,GACzBD,GAAQkB,EACF,CACI1B,EAA8BS,GAC9BsC,GAEJC,EACNhC,GACHN,SAEAuB,MAEC"}

package/modal/modal.styles.d.ts CHANGED Viewed

@@ -1,7 +1,10 @@
 export declare const tokens: {
     readonly container: {
         readonly verticalHeight: "--fds-internal-modal-container-verticalHeight";
-        readonly offsetTop: "--fds-internal-modal-container-offsetTop";
+    };
+    readonly closeButton: {
+        readonly topInset: "--fds-internal-modal-closeButton-topInset";
+        readonly rightInset: "--fds-internal-modal-closeButton-rightInset";
     };
 };
 export declare const container: import("@linaria/core").LinariaClassName;

package/modal/modal.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./modal.styles_1sav73f.css";const c={container:{verticalHeight:"--fds-internal-modal-container-verticalHeight",offsetTop:"--fds-internal-modal-container-offsetTop"}},o="czahu6t",t="c16tlthj",a="c19r0uwy",e="c11f2a4r",n="ck9rog9",r="c140nooo",i="c1d9ucpb",l="c1jimj00",s="c16qcfjk",f="cgnow3g",d="c14dyqe6";export{o as container,a as containerFromBottom,s as containerFromBottomShow,e as containerFromLeft,f as containerFromLeftShow,n as containerFromRight,d as containerFromRightShow,t as containerFromTop,l as containerFromTopShow,i as containerHide,r as containerShow,c as tokens};
+import"./modal.styles_1lbblx6.css";const c={container:{verticalHeight:"--fds-internal-modal-container-verticalHeight"}},t="czahu6t",o="c16tlthj",a="c19r0uwy",e="c11f2a4r",l="ck9rog9",r="c140nooo",i="c1d9ucpb",n="c1jimj00",d="c16qcfjk",s="cgnow3g",g="c14dyqe6";export{t as container,a as containerFromBottom,d as containerFromBottomShow,e as containerFromLeft,s as containerFromLeftShow,l as containerFromRight,g as containerFromRightShow,o as containerFromTop,n as containerFromTopShow,i as containerHide,r as containerShow,c as tokens};
 //# sourceMappingURL=modal.styles.js.map

package/modal/modal.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.styles.js","sources":["../../src/modal/modal.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery } from \"../theme\";\n\nexport const tokens = {\n container: {\n verticalHeight: \"--fds-internal-modal-container-verticalHeight\",\n ~~offsetTop~~: \"--fds-internal-modal-~~container~~-~~offsetTop~~\",\n },\n} as const;\n\nexport const container = css`\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n overflow: hidden;\n\n ${tokens.container.verticalHeight}: initial;\n ${tokens.~~container~~.~~offsetTop~~}: initial;\n\n ${MediaQuery.MaxWidth.sm} {\n height: calc(var(${tokens.container.verticalHeight}, 1vh) * 100);\n ~~top: var(${tokens.container.offsetTop}, 0px);\n~~ }\n`;\n\nexport const containerFromTop = css`\n top: -3%;\n`;\n\nexport const containerFromBottom = css`\n bottom: -3%;\n`;\n\nexport const containerFromLeft = css`\n left: -3%;\n`;\n\nexport const containerFromRight = css`\n right: -3%;\n`;\n\nexport const containerShow = css`\n opacity: 1;\n transition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n transition-delay: 200ms;\n`;\n\nexport const containerHide = css`\n opacity: 0;\n transition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n`;\n\nexport const containerFromTopShow = css`\n top: 0;\n`;\n\nexport const containerFromBottomShow = css`\n bottom: 0;\n`;\n\nexport const containerFromLeftShow = css`\n left: 0;\n`;\n\nexport const containerFromRightShow = css`\n right: 0;\n`;\n"],"names":["tokens","container","verticalHeight","~~offsetTop","~~containerFromTop","containerFromBottom","containerFromLeft","containerFromRight","containerShow","containerHide","containerFromTopShow","containerFromBottomShow","containerFromLeftShow","containerFromRightShow"],"mappings":"wDAIO,MAAMA,EAAS,CAClBC,UAAW,CACPC,eAAgB,~~gDAChBC~~,~~UAAW,6CAINF,~~EAAS,~~UAkBTG~~,EAAgB,WAIhBC,EAAmB,WAInBC,EAAiB,WAIjBC,EAAkB,UAIlBC,EAAa,WAMbC,EAAa,WAKbC,EAAoB,WAIpBC,EAAuB,WAIvBC,EAAqB,UAIrBC,EAAsB"}
1	+ {"version":3,"file":"modal.styles.js","sources":["../../src/modal/modal.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery } from \"../theme\";\n\nexport const tokens = {\n container: {\n verticalHeight: \"--fds-internal-modal-container-verticalHeight\",\n },\n closeButton: {\n topInset: \"--fds-internal-modal-closeButton-topInset\",\n rightInset: \"--fds-internal-modal-closeButton-rightInset\",\n },\n} as const;\n\nexport const container = css`\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n overflow: hidden;\n\n ${tokens.container.verticalHeight}: initial;\n ${tokens.closeButton.topInset}: initial;\n ${tokens.closeButton.rightInset}: initial;\n\n ${MediaQuery.MaxWidth.sm} {\n height: calc(var(${tokens.container.verticalHeight}, 1vh) * 100);\n }\n`;\n\nexport const containerFromTop = css`\n top: -3%;\n`;\n\nexport const containerFromBottom = css`\n bottom: -3%;\n`;\n\nexport const containerFromLeft = css`\n left: -3%;\n`;\n\nexport const containerFromRight = css`\n right: -3%;\n`;\n\nexport const containerShow = css`\n opacity: 1;\n transition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n transition-delay: 200ms;\n`;\n\nexport const containerHide = css`\n opacity: 0;\n transition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n`;\n\nexport const containerFromTopShow = css`\n top: 0;\n`;\n\nexport const containerFromBottomShow = css`\n bottom: 0;\n`;\n\nexport const containerFromLeftShow = css`\n left: 0;\n`;\n\nexport const containerFromRightShow = css`\n right: 0;\n`;\n"],"names":["tokens","container","verticalHeight","containerFromTop","containerFromBottom","containerFromLeft","containerFromRight","containerShow","containerHide","containerFromTopShow","containerFromBottomShow","containerFromLeftShow","containerFromRightShow"],"mappings":"wDAIO,MAAMA,EAAS,CAClBC,UAAW,CACPC,eAAgB,kDAQXD,EAAS,UAkBTE,EAAgB,WAIhBC,EAAmB,WAInBC,EAAiB,WAIjBC,EAAkB,UAIlBC,EAAa,WAMbC,EAAa,WAKbC,EAAoB,WAIpBC,EAAuB,WAIvBC,EAAqB,UAIrBC,EAAsB"}

package/modal/{modal.styles_1sav73f.css → modal.styles_1lbblx6.css} RENAMED Viewed

@@ -1,4 +1,4 @@
-.czahu6t{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;width:100%;overflow:hidden;--fds-internal-modal-container-verticalHeight:initial;--fds-internal-modal-container-offsetTop:initial;}:where(body.fds-breakpoint-sm-max) .czahu6t{height:calc(var(--fds-internal-modal-container-verticalHeight, 1vh) * 100);top:var(--fds-internal-modal-container-offsetTop, 0px);}
+.czahu6t{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;width:100%;overflow:hidden;--fds-internal-modal-container-verticalHeight:initial;--fds-internal-modal-closeButton-topInset:initial;--fds-internal-modal-closeButton-rightInset:initial;}:where(body.fds-breakpoint-sm-max) .czahu6t{height:calc(var(--fds-internal-modal-container-verticalHeight, 1vh) * 100);}
 .c16tlthj{top:-3%;}
 .c19r0uwy{bottom:-3%;}
 .c11f2a4r{left:-3%;}

package/modal-v2/modal-v2.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{useFloating as o,useTransitionStatus as i,useDismiss as r,useInteractions as a,FloatingFocusManager as l}from"@floating-ui/react";import s from"clsx";import n,{useRef as m,useEffect as d}from"react";import{Overlay as c}from"../overlay/overlay.js";import{useViewport as p}from"../shared/hooks/useViewport.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as u}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"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as h}from"../util/use-event.js";import{ModalContext as b}from"./modal-context.js";import{tokens as v,scrollContainer as f,modalContainer as y,container as j}from"./modal-v2.styles.js";const x=x=>{var{id:g,show:C,onClose:k,animationFrom:O="bottom",children:I,enableOverlayClick:F=!0,rootComponentId:w,zIndex:N,onOverlayClick:z,dismissKeyboardOnShow:P=!0,"data-testid":$="modal","aria-label":q,"aria-labelledby":E,"aria-describedby":H,disableInitialFocus:K=!1,className:S}=x,T=e(x,["id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","data-testid","aria-label","aria-labelledby","aria-describedby","disableInitialFocus","className"]);const{verticalHeight:_,offsetTop:M}=p(),R=m(null),V=m(null),A=I&&n.cloneElement(I,{ref:R});u(V,{[v.container.verticalHeight]:null==_?null:`${_}px`,[v.container.offsetTop]:null==M?null:`${M}px`});const{refs:B,context:D}=o({open:C,onOpenChange:e=>{e||null==k||k()}}),{isMounted:G,status:J}=i(D,{duration:300}),L=r(D,{outsidePress:!1,enabled:!!k}),{getFloatingProps:Q}=a([L]),U=h((()=>{var e,t;P&&(null===(t=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===t||t.call(e))}));return d((()=>{C&&U()}),[C,U]),t(c,{"data-testid":`${$}-overlay`,show:G,enableOverlayClick:F,onOverlayClick:z,id:g,rootId:w,containerRef:R,zIndex:N,children:t("div",Object.assign({ref:V,"data-testid":$,"data-status":J,"data-animation-from":O},T,{className:s(j,S),children:t(b.Provider,{value:{onClose:k},children:G&&t(l,{context:D,initialFocus:K?-1:B.floating,children:t("div",{className:f,children:t("div",Object.assign({ref:B.setFloating},Q(),{role:"dialog","aria-label":q,"aria-labelledby":E,"aria-describedby":H,className:y,children:A}))})})})}))})};export{x as ModalV2};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{useFloating as o,useTransitionStatus as i,useDismiss as r,useInteractions as a,FloatingFocusManager as l}from"@floating-ui/react";import s from"clsx";import n,{useRef as m}from"react";import{Overlay as d}from"../overlay/overlay.js";import{useViewport as c}from"../shared/hooks/useViewport.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as p}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"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as u}from"../util/use-event.js";import{ModalContext as b}from"./modal-context.js";import{tokens as h,scrollContainer as v,modalContainer as y,container as j}from"./modal-v2.styles.js";const f=f=>{var{id:g,show:x,onClose:C,animationFrom:k="bottom",children:O,enableOverlayClick:I=!0,rootComponentId:F,zIndex:w,onOverlayClick:N,dismissKeyboardOnShow:z=!0,"data-testid":P="modal","aria-label":S,"aria-labelledby":q,"aria-describedby":E,disableInitialFocus:H=!1,className:K}=f,$=e(f,["id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","data-testid","aria-label","aria-labelledby","aria-describedby","disableInitialFocus","className"]);const _=u((()=>{var e,t;z&&(null===(t=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===t||t.call(e))})),{verticalHeight:B}=c({enabled:x,onBeforeStart:_}),M=m(null),R=m(null),V=O&&n.cloneElement(O,{ref:M});p(R,{[h.container.verticalHeight]:null==B?null:`${B}px`});const{refs:A,context:D}=o({open:x,onOpenChange:e=>{e||null==C||C()}}),{isMounted:G,status:J}=i(D,{duration:300}),L=r(D,{outsidePress:!1,enabled:!!C}),{getFloatingProps:Q}=a([L]);return t(d,{"data-testid":`${P}-overlay`,show:x,enableOverlayClick:I,onOverlayClick:N,id:g,rootId:F,containerRef:M,zIndex:w,children:t("div",Object.assign({ref:R,"data-testid":P,"data-status":J,"data-animation-from":k},$,{className:s(j,K),children:t(b.Provider,{value:{onClose:C},children:G&&t(l,{context:D,initialFocus:H?-1:A.floating,children:t("div",{className:v,children:t("div",Object.assign({ref:A.setFloating},Q(),{role:"dialog","aria-label":S,"aria-labelledby":q,"aria-describedby":E,className:y,children:V}))})})})}))})};export{f as ModalV2};
 //# sourceMappingURL=modal-v2.js.map