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

package/local-nav/local-nav-dropdown/local-nav-dropdown.styles.d.ts

@@ -1,37 +1,22 @@
-interface DropdownNavStyleProps {
-    $isStickied?: boolean;
-    $stickyOffset: number;
-    $sideMargin?: number;
-}
-interface NavItemListStyleProps {
-    $viewportHeight?: number;
-}
-interface NavItemStyleProps {
-    $isSelected?: boolean;
-}
-interface DropdownExpandedProps {
-    $isDropdownExpanded: boolean;
-}
-interface NavIconStyleProps extends DropdownExpandedProps {
-}
-interface NavLabelStyleProps extends DropdownExpandedProps {
-}
-export declare const NavSelectIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, NavIconStyleProps>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const NavSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, NavLabelStyleProps>> & string;
-export declare const NavItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, NavItemStyleProps>> & string;
-export declare const NavItemList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, NavItemListStyleProps>> & string;
-export declare const NavItemLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, NavItemStyleProps>> & string;
-export declare const StyledTickIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const Backdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const NavWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, DropdownNavStyleProps>> & string;
-export {};
+export declare const tokens: {
+    navWrapper: {
+        stickyOffset: string;
+        sideMargin: string;
+    };
+    navItemList: {
+        viewportHeight: string;
+    };
+};
+export declare const navSelectIcon: import("@linaria/core").LinariaClassName;
+export declare const navSelectIconExpanded: import("@linaria/core").LinariaClassName;
+export declare const navSelect: import("@linaria/core").LinariaClassName;
+export declare const navSelectExpanded: import("@linaria/core").LinariaClassName;
+export declare const navItem: import("@linaria/core").LinariaClassName;
+export declare const navItemSelected: import("@linaria/core").LinariaClassName;
+export declare const navItemList: import("@linaria/core").LinariaClassName;
+export declare const navItemLabel: import("@linaria/core").LinariaClassName;
+export declare const navItemLabelSelected: import("@linaria/core").LinariaClassName;
+export declare const tickIcon: import("@linaria/core").LinariaClassName;
+export declare const backdrop: import("@linaria/core").LinariaClassName;
+export declare const navWrapper: import("@linaria/core").LinariaClassName;
+export declare const navWrapperStickied: import("@linaria/core").LinariaClassName;

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

@@ -1,101 +1,2 @@
-import{ChevronDownIcon as i}from"@lifesg/react-icons/chevron-down";import{TickIcon as o}from"@lifesg/react-icons/tick";import t,{css as e}from"styled-components";import{V3_Colour as r,V3_Motion as s,V3_Spacing as n,V3_Border as a,V3_Radius as d,V3_Font as $}from"../../v3_theme/index.js";const l=t(i)`
-    color: ${r.icon};
-    transition: transform ${s["duration-250"]}
-        ${s["ease-default"]};
-    transform: rotate(${i=>i.$isDropdownExpanded?180:0}deg);
-`,c=t.div`
-    cursor: pointer;
-    background: ${r.bg};
-    padding: ${n["spacing-12"]} ${n["spacing-16"]};
-    overflow: hidden;
-    box-shadow: 0 0 ${a["width-010"]} ${a["width-010"]}
-        ${r.border};
-    border-radius: ${d.sm};
-    ${i=>i.$isDropdownExpanded&&e`
-            border-bottom-left-radius: ${d.none};
-            border-bottom-right-radius: ${d.none};
-        `}
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    transition: all ${s["duration-250"]} ${s["ease-default"]};
-    transition-property: background, border-radius, box-shadow, transform;
-
-    &:focus-visible {
-        outline: 2px solid ${r["focus-ring"]};
-        outline-offset: 2px;
-        border-radius: ${d.sm};
-    }
-`,p=t.li`
-    padding: ${i=>i.$isSelected?e`
-                  ${n["spacing-12"]} ${n["spacing-8"]} 
-                  ${n["spacing-12"]} 0
-              `:e`
-                  ${n["spacing-12"]} ${n["spacing-8"]}
-                  ${n["spacing-12"]} ${n["spacing-32"]}
-              `};
-    background: ${i=>i.$isSelected?r["bg-primary-subtlest"]:r.bg};
-    /* Ensures that the tick mark is positioned relative to the selected item */
-    position: relative;
-    display: flex;
-    /* Vertically align text and tick */
-    align-items: center;
-
-    &:focus-visible {
-        outline: 2px solid ${r["focus-ring"]};
-        outline-offset: 0px;
-        border-radius: ${d.sm};
-    }
-`,g=t.ul`
-    transition: all ${s["duration-250"]} ${s["ease-default"]};
-    transform-origin: top;
-    list-style-type: none;
-    padding: 0 ${n["spacing-8"]};
-    margin: 0;
-    background: ${r.bg};
-    cursor: pointer;
-    box-shadow: 0 0 ${a["width-010"]} ${a["width-010"]}
-        ${r.border};
-    border-bottom-right-radius: ${d.sm};
-    border-bottom-left-radius: ${d.sm};
-    /* Enables vertical scrolling */
-    overflow-y: auto;
-    /* Set a max height for the dropdown list */
-    max-height: ${i=>i.$viewportHeight}px;
-`,b=t.div`
-    ${$["body-baseline-regular"]}
-    color: ${i=>i.$isSelected?r["text-selected"]:r.text};
-`,m=t(o)`
-    color: ${r["icon-selected"]};
-    margin: 0 ${n["spacing-8"]};
-`,u=t.div`
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    background-color: ${r["overlay-strong"]};
-    z-index: -1;
-`,f=t.nav`
-    display: block;
-    position: sticky;
-    top: ${i=>i.$stickyOffset}px;
-    width: 100%;
-    z-index: 10;
-
-    ${({$isStickied:i,$sideMargin:o})=>i&&e`
-            ${c} {
-                ${o&&`margin: 0 -${o}px;`}
-                padding: ${n["spacing-12"]} ${n["spacing-16"]};
-                border-radius: ${d.none};
-            }
-
-            ${g} {
-                ${o&&`margin-left: -${o}px;`}
-                ${o&&`margin-right: -${o}px;`}
-                border-radius-bottom-left: ${d.sm};
-                border-radius-bottom-right: ${d.sm};
-            }
-        `}
-`;export{u as Backdrop,p as NavItem,b as NavItemLabel,g as NavItemList,c as NavSelect,l as NavSelectIcon,f as NavWrapper,m as StyledTickIcon};
+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};
 //# sourceMappingURL=local-nav-dropdown.styles.js.map

package/local-nav/local-nav-dropdown/local-nav-dropdown.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-dropdown.styles.js","sources":["../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.styles.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport styled, { css } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Motion,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface DropdownNavStyleProps {\n    $isStickied?: boolean;\n    $stickyOffset: number;\n    $sideMargin?: number;\n}\n\ninterface NavItemListStyleProps {\n    $viewportHeight?: number;\n}\n\ninterface NavItemStyleProps {\n    $isSelected?: boolean;\n}\ninterface DropdownExpandedProps {\n    $isDropdownExpanded: boolean;\n}\n\ninterface NavIconStyleProps extends DropdownExpandedProps {}\ninterface NavLabelStyleProps extends DropdownExpandedProps {}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// NAV SELECT\n// -----------------------------------------------------------------------------\n\nexport const NavSelectIcon = styled(ChevronDownIcon)<NavIconStyleProps>`\n    color: ${V3_Colour[\"icon\"]};\n    transition: transform ${V3_Motion[\"duration-250\"]}\n        ${V3_Motion[\"ease-default\"]};\n    transform: rotate(${(props) => (props.$isDropdownExpanded ? 180 : 0)}deg);\n`;\n\nexport const NavSelect = styled.div<NavLabelStyleProps>`\n    cursor: pointer;\n    background: ${V3_Colour[\"bg\"]};\n    padding: ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-16\"]};\n    overflow: hidden;\n    box-shadow: 0 0 ${V3_Border[\"width-010\"]} ${V3_Border[\"width-010\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    ${(props) =>\n        props.$isDropdownExpanded &&\n        css`\n            border-bottom-left-radius: ${V3_Radius[\"none\"]};\n            border-bottom-right-radius: ${V3_Radius[\"none\"]};\n        `}\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    transition: all ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n    transition-property: background, border-radius, box-shadow, transform;\n\n    &:focus-visible {\n        outline: 2px solid ${V3_Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${V3_Radius[\"sm\"]};\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// NAV ITEMS\n// -----------------------------------------------------------------------------\n\nexport const NavItem = styled.li<NavItemStyleProps>`\n    padding: ${(props) =>\n        props.$isSelected\n            ? css`\n                  ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-8\"]} \n                  ${V3_Spacing[\"spacing-12\"]} 0\n              `\n            : css`\n                  ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-8\"]}\n                  ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-32\"]}\n              `};\n    background: ${(props) =>\n        props.$isSelected ? V3_Colour[\"bg-primary-subtlest\"] : V3_Colour[\"bg\"]};\n    /* Ensures that the tick mark is positioned relative to the selected item */\n    position: relative;\n    display: flex;\n    /* Vertically align text and tick */\n    align-items: center;\n\n    &:focus-visible {\n        outline: 2px solid ${V3_Colour[\"focus-ring\"]};\n        outline-offset: 0px;\n        border-radius: ${V3_Radius[\"sm\"]};\n    }\n`;\n\nexport const NavItemList = styled.ul<NavItemListStyleProps>`\n    transition: all ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n    transform-origin: top;\n    list-style-type: none;\n    padding: 0 ${V3_Spacing[\"spacing-8\"]};\n    margin: 0;\n    background: ${V3_Colour[\"bg\"]};\n    cursor: pointer;\n    box-shadow: 0 0 ${V3_Border[\"width-010\"]} ${V3_Border[\"width-010\"]}\n        ${V3_Colour[\"border\"]};\n    border-bottom-right-radius: ${V3_Radius[\"sm\"]};\n    border-bottom-left-radius: ${V3_Radius[\"sm\"]};\n    /* Enables vertical scrolling */\n    overflow-y: auto;\n    /* Set a max height for the dropdown list */\n    max-height: ${(props) => props.$viewportHeight}px;\n`;\n\nexport const NavItemLabel = styled.div<NavItemStyleProps>`\n    ${V3_Font[\"body-baseline-regular\"]}\n    color: ${(props) =>\n        props.$isSelected ? V3_Colour[\"text-selected\"] : V3_Colour[\"text\"]};\n`;\n\nexport const StyledTickIcon = styled(TickIcon)`\n    color: ${V3_Colour[\"icon-selected\"]};\n    margin: 0 ${V3_Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// MAIN\n// -----------------------------------------------------------------------------\n\nexport const Backdrop = styled.div`\n    position: fixed;\n    top: 0;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    background-color: ${V3_Colour[\"overlay-strong\"]};\n    z-index: -1;\n`;\n\nexport const NavWrapper = styled.nav<DropdownNavStyleProps>`\n    display: block;\n    position: sticky;\n    top: ${(props) => props.$stickyOffset}px;\n    width: 100%;\n    z-index: 10;\n\n    ${({ $isStickied, $sideMargin }) =>\n        $isStickied &&\n        css`\n            ${NavSelect} {\n                ${$sideMargin && `margin: 0 -${$sideMargin}px;`}\n                padding: ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\n                    \"spacing-16\"\n                ]};\n                border-radius: ${V3_Radius[\"none\"]};\n            }\n\n            ${NavItemList} {\n                ${$sideMargin && `margin-left: -${$sideMargin}px;`}\n                ${$sideMargin && `margin-right: -${$sideMargin}px;`}\n                border-radius-bottom-left: ${V3_Radius.sm};\n                border-radius-bottom-right: ${V3_Radius.sm};\n            }\n        `}\n`;\n"],"names":["NavSelectIcon","styled","ChevronDownIcon","V3_Colour","V3_Motion","props","$isDropdownExpanded","NavSelect","div","V3_Spacing","V3_Border","V3_Radius","css","NavItem","li","$isSelected","NavItemList","ul","$viewportHeight","NavItemLabel","V3_Font","StyledTickIcon","TickIcon","Backdrop","NavWrapper","nav","$stickyOffset","$isStickied","$sideMargin","sm"],"mappings":"sSA6CaA,EAAgBC,EAAOC,EAAmC;aAC1DC,EAAgB;4BACDC,EAAU;UAC5BA,EAAU;wBACKC,GAAWA,EAAMC,oBAAsB,IAAM;EAGzDC,EAAYN,EAAOO,GAAuB;;kBAErCL,EAAc;eACjBM,EAAW,iBAAiBA,EAAW;;sBAEhCC,EAAU,gBAAgBA,EAAU;UAChDP,EAAkB;qBACPQ,EAAc;MAC5BN,GACCA,EAAMC,qBACNM,CAAG;yCAC8BD,EAAgB;0CACfA,EAAgB;;;;;sBAKpCP,EAAU,mBAAmBA,EAAU;;;;6BAIhCD,EAAU;;yBAEdQ,EAAc;;EAQ1BE,EAAUZ,EAAOa,EAAqB;eACnCT,GACRA,EAAMU,YACAH,CAAG;oBACGH,EAAW,iBAAiBA,EAAW;oBACvCA,EAAW;gBAEjBG,CAAG;oBACGH,EAAW,iBAAiBA,EAAW;oBACvCA,EAAW,iBAAiBA,EAAW;;kBAExCJ,GACXA,EAAMU,YAAcZ,EAAU,uBAAyBA,EAAc;;;;;;;;6BAQhDA,EAAU;;yBAEdQ,EAAc;;EAI1BK,EAAcf,EAAOgB,EAAyB;sBACrCb,EAAU,mBAAmBA,EAAU;;;iBAG5CK,EAAW;;kBAEVN,EAAc;;sBAEVO,EAAU,gBAAgBA,EAAU;UAChDP,EAAkB;kCACMQ,EAAc;iCACfA,EAAc;;;;kBAI5BN,GAAUA,EAAMa;EAGtBC,EAAelB,EAAOO,GAAsB;MACnDY,EAAQ;aACAf,GACNA,EAAMU,YAAcZ,EAAU,iBAAmBA,EAAgB;EAG5DkB,EAAiBpB,EAAOqB,EAAS;aACjCnB,EAAU;gBACPM,EAAW;EAOdc,EAAWtB,EAAOO,GAAG;;;;;;wBAMVL,EAAU;;EAIrBqB,EAAavB,EAAOwB,GAA0B;;;WAG/CpB,GAAUA,EAAMqB;;;;MAItB,EAAGC,cAAaC,iBACdD,GACAf,CAAG;cACGL;kBACIqB,GAAe,cAAcA;2BACpBnB,EAAW,iBAAiBA,EACnC;iCAEaE,EAAgB;;;cAGnCK;kBACIY,GAAe,iBAAiBA;kBAChCA,GAAe,kBAAkBA;6CACNjB,EAAUkB;8CACTlB,EAAUkB;;;"}
+{"version":3,"file":"local-nav-dropdown.styles.js","sources":["../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Radius, Spacing } from \"../../theme\";\n\nexport const tokens = {\n    navWrapper: {\n        stickyOffset: \"--fds-internal-localNavDropdown-navWrapper-stickyOffset\",\n        sideMargin: \"--fds-internal-localNavDropdown-navWrapper-sideMargin\",\n    },\n    navItemList: {\n        viewportHeight:\n            \"--fds-internal-localNavDropdown-navItemList-viewportHeight\",\n    },\n};\n\n// -----------------------------------------------------------------------------\n// NAV SELECT\n// -----------------------------------------------------------------------------\n\nexport const navSelectIcon = css`\n    color: ${Colour[\"icon\"]};\n    transition: transform ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transform: rotate(0deg);\n`;\n\nexport const navSelectIconExpanded = css`\n    transform: rotate(180deg);\n`;\n\nexport const navSelect = css`\n    cursor: pointer;\n    background: ${Colour[\"bg\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    overflow: hidden;\n    box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n        ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transition-property: background, border-radius, box-shadow, transform;\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\nexport const navSelectExpanded = css`\n    border-bottom-left-radius: ${Radius[\"none\"]};\n    border-bottom-right-radius: ${Radius[\"none\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// NAV ITEMS\n// -----------------------------------------------------------------------------\n\nexport const navItem = css`\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]}\n        ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-32\"]};\n    background: ${Colour[\"bg\"]};\n    /* Ensures that the tick mark is positioned relative to the selected item */\n    position: relative;\n    display: flex;\n    /* Vertically align text and tick */\n    align-items: center;\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\nexport const navItemSelected = css`\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]}\n        ${Spacing[\"spacing-12\"]} 0;\n    background: ${Colour[\"bg-primary-subtlest\"]};\n`;\n\nexport const navItemList = css`\n    ${tokens.navItemList.viewportHeight}: initial;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transform-origin: top;\n    list-style-type: none;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n    margin: 0;\n    background: ${Colour[\"bg\"]};\n    cursor: pointer;\n    box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n        ${Colour[\"border\"]};\n    border-bottom-right-radius: ${Radius[\"sm\"]};\n    border-bottom-left-radius: ${Radius[\"sm\"]};\n    /* Enables vertical scrolling */\n    overflow-y: auto;\n    /* Set a max height for the dropdown list */\n    max-height: var(${tokens.navItemList.viewportHeight});\n`;\n\nexport const navItemLabel = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n`;\n\nexport const navItemLabelSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const tickIcon = css`\n    color: ${Colour[\"icon-selected\"]};\n    margin: 0 ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// MAIN\n// -----------------------------------------------------------------------------\n\nexport const backdrop = css`\n    position: fixed;\n    top: 0;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    background-color: ${Colour[\"overlay-strong\"]};\n    z-index: -1;\n`;\n\nexport const navWrapper = css`\n    ${tokens.navWrapper.stickyOffset}: initial;\n    ${tokens.navWrapper.sideMargin}: initial;\n    display: block;\n    position: sticky;\n    top: var(${tokens.navWrapper.stickyOffset});\n    width: 100%;\n    z-index: 10;\n`;\n\nexport const navWrapperStickied = css`\n    .${navSelect} {\n        margin: 0 calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n        border-radius: ${Radius[\"none\"]};\n    }\n\n    .${navItemList} {\n        margin-left: calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        margin-right: calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        border-bottom-left-radius: ${Radius[\"sm\"]};\n        border-bottom-right-radius: ${Radius[\"sm\"]};\n    }\n`;\n"],"names":["tokens","navWrapper","stickyOffset","sideMargin","navItemList","viewportHeight","navSelectIcon","navSelectIconExpanded","navSelect","navSelectExpanded","navItem","navItemSelected","navItemLabel","navItemLabelSelected","tickIcon","backdrop","navWrapperStickied"],"mappings":"2FAIO,MAAMA,EAAS,CAClBC,WAAY,CACRC,aAAc,0DACdC,WAAY,yDAEhBC,YAAa,CACTC,eACI,+DAQCC,EAAa,UAMbC,EAAqB,WAIrBC,EAAS,WAqBTC,EAAiB,WASjBC,EAAO,WAiBPC,EAAe,WAMfP,EAAW,UAmBXQ,EAAY,WAKZC,EAAoB,UAIpBC,EAAQ,UASRC,EAAQ,UAURd,EAAU,UAUVe,EAAkB"}

package/local-nav/local-nav-dropdown/local-nav-dropdown.styles_ftv36t.css

@@ -0,0 +1,13 @@
+.nczumix{color:var(--fds-colour-icon);-webkit-transition:-webkit-transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.n1mayi9n{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
+.n1fsscye{cursor:pointer;background:var(--fds-colour-bg);padding:var(--fds-spacing-12) var(--fds-spacing-16);overflow:hidden;box-shadow:0 0 var(--fds-border-width-010) var(--fds-border-width-010) var(--fds-colour-border);border-radius:var(--fds-radius-sm);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;-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);transition-property:background,border-radius,box-shadow,transform;}.n1fsscye:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:2px;border-radius:var(--fds-radius-sm);}
+.n10li8ea{border-bottom-left-radius:var(--fds-radius-none);border-bottom-right-radius:var(--fds-radius-none);}
+.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);}
+.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;}
+.ns92rya{--fds-internal-localNavDropdown-navWrapper-stickyOffset:initial;--fds-internal-localNavDropdown-navWrapper-sideMargin:initial;display:block;position:-webkit-sticky;position:sticky;top:var(--fds-internal-localNavDropdown-navWrapper-stickyOffset);width:100%;z-index:10;}
+.np844yu .n1fsscye{margin:0 calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);padding:var(--fds-spacing-12) var(--fds-spacing-16);border-radius:var(--fds-radius-none);}.np844yu .ny6lx9v{margin-left:calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);margin-right:calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);border-bottom-left-radius:var(--fds-radius-sm);border-bottom-right-radius:var(--fds-radius-sm);}

package/local-nav/local-nav-menu/local-nav-menu.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import t from"react";import{Nav as r,NavItem as i,NavItemContent as n,TextLabel as d}from"./local-nav-menu.styles.js";const l=t.forwardRef((({onNavItemSelect:t,items:l,selectedItemIndex:a,id:c,"data-testid":m,className:o,renderItem:s},f)=>e(r,{ref:f,id:c,className:o,"data-testid":m||"local-nav-menu",children:l.map(((r,l)=>(({handleClick:t,isSelected:r,item:l,renderItem:a,index:c})=>{const{id:m,title:o}=l;return e(i,{id:m,$isSelected:r,children:e(n,{role:"link",onClick:t,onKeyDown:e=>((e,t)=>{const{key:r}=e;"Enter"!==r&&" "!==r||(e.preventDefault(),t(e))})(e,t),tabIndex:0,"aria-current":!!r||void 0,children:a?a(l,{selected:r}):e(d,{weight:r?"semibold":"regular",children:o})})},c)})({handleClick:e=>t(e,r,l),isSelected:l===a,item:r,renderItem:s,index:l})))})));export{l as LocalNavMenu};
+import{jsx as e}from"react/jsx-runtime";import t from"clsx";import r from"react";import{Typography as i}from"../../typography/index.js";import{nav as l,navItemContent as n,navItem as a,navItemSelected as d,textLabel as m}from"./local-nav-menu.styles.js";const s=r.forwardRef((({onNavItemSelect:r,items:s,selectedItemIndex:c,id:o,"data-testid":p,className:f,renderItem:u},h)=>{const x=p||"local-nav-menu";return e("ul",{ref:h,id:o,className:t(l,f),"data-testid":x,children:s.map(((l,s)=>(({handleClick:r,isSelected:l,item:s,renderItem:c,index:o})=>{const{id:p,title:f}=s;return e("li",{id:p,className:t(a,l&&d),children:e("div",{className:n,role:"link",onClick:r,onKeyDown:e=>((e,t)=>{const{key:r}=e;"Enter"!==r&&" "!==r||(e.preventDefault(),t(e))})(e,r),tabIndex:0,"aria-current":!!l||void 0,children:c?c(s,{selected:l}):e(i.BodyBL,{className:m,weight:l?"semibold":"regular",children:f})})},o)})({handleClick:e=>r(e,l,s),isSelected:s===c,item:l,renderItem:u,index:s})))})}));export{s as LocalNavMenu};
 //# sourceMappingURL=local-nav-menu.js.map

package/local-nav/local-nav-menu/local-nav-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-menu.js","sources":["../../../src/local-nav/local-nav-menu/local-nav-menu.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { LocalNavMenuItemComponentProps } from \"../internal-types\";\nimport type { LocalNavMenuProps } from \"../types\";\nimport {\n    Nav,\n    NavItem,\n    NavItemContent,\n    TextLabel,\n} from \"./local-nav-menu.styles\";\n\n/**\n * A sidebar navigation element. The currently visible section will be highlighted.\n *\n * This component should be placed inside a container that aligns it to the side.\n * The container can also have `position: sticky` in order to make it a sticky sidebar.\n */\nconst Component = (\n    {\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        renderItem,\n    }: LocalNavMenuProps,\n    ref: React.Ref<HTMLUListElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const localNavMenuId = dataTestId || \"local-nav-menu\";\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // ============================================================================\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderLocalNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavMenuItemComponentProps) => {\n        const { id, title } = item;\n\n        const renderTitle = () => {\n            if (renderItem) {\n                return renderItem(item, { selected: isSelected });\n            }\n            return (\n                <TextLabel weight={isSelected ? \"semibold\" : \"regular\"}>\n                    {title}\n                </TextLabel>\n            );\n        };\n\n        return (\n            <NavItem id={id} key={index} $isSelected={isSelected}>\n                <NavItemContent\n                    role=\"link\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    tabIndex={0}\n                    aria-current={isSelected ? true : undefined}\n                >\n                    {renderTitle()}\n                </NavItemContent>\n            </NavItem>\n        );\n    };\n    return (\n        <Nav\n            ref={ref}\n            id={id}\n            className={className}\n            data-testid={localNavMenuId}\n        >\n            {items.map((item, i) => {\n                const isSelected = i === selectedItemIndex;\n                return renderLocalNavItem({\n                    handleClick: (e) => onNavItemSelect(e, item, i),\n                    isSelected,\n                    item,\n                    renderItem,\n                    index: i,\n                });\n            })}\n        </Nav>\n    );\n};\n\nexport const LocalNavMenu = React.forwardRef(Component);\n"],"names":["LocalNavMenu","React","forwardRef","onNavItemSelect","items","selectedItemIndex","id","dataTestId","className","renderItem","ref","_jsx","Nav","children","map","item","i","handleClick","isSelected","index","title","NavItem","$isSelected","NavItemContent","role","onClick","onKeyDown","e","key","preventDefault","handleNavItemKeyDown","tabIndex","undefined","selected","TextLabel","weight","renderLocalNavItem"],"mappings":"8JAiBA,MA6FaA,EAAeC,EAAMC,YA7FhB,EAEVC,kBACAC,QACAC,oBACAC,KACA,cAAeC,EACfC,YACAC,cAEJC,IA+DIC,EAACC,EAAG,CACAF,IAAKA,EACLJ,GAAIA,EACJE,UAAWA,EAAS,cA7DLD,GAAc,iBA8DFM,SAE1BT,EAAMU,KAAI,CAACC,EAAMC,IAzCC,GACvBC,cACAC,aACAH,OACAN,aACAU,YAEA,MAAMb,GAAEA,EAAEc,MAAEA,GAAUL,EAatB,OACIJ,EAACU,EAAO,CAACf,GAAIA,EAAEgB,YAA2BJ,EAAUL,SAChDF,EAACY,EAAc,CACXC,KAAK,OACLC,QAASR,EACTS,UAAYC,GA3CC,EACzBA,EACAV,KAIA,MAAMW,IAAEA,GAAQD,EAEJ,UAARC,GAA2B,MAARA,IACnBD,EAAEE,iBACFZ,EAAYU,GAChB,EAgC8BG,CAAqBH,EAAGV,GAC1Cc,SAAU,EAAC,iBACGb,QAAoBc,EAASnB,SAjB/CJ,EACOA,EAAWM,EAAM,CAAEkB,SAAUf,IAGpCP,EAACuB,GAAUC,OAAQjB,EAAa,WAAa,mBACxCE,OAMaD,EAUZ,EAYCiB,CAAmB,CACtBnB,YAAcU,GAAMxB,EAAgBwB,EAAGZ,EAAMC,GAC7CE,WAHeF,IAAMX,EAIrBU,OACAN,aACAU,MAAOH"}
+{"version":3,"file":"local-nav-menu.js","sources":["../../../src/local-nav/local-nav-menu/local-nav-menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport type { LocalNavMenuItemComponentProps } from \"../internal-types\";\nimport type { LocalNavMenuProps } from \"../types\";\nimport * as styles from \"./local-nav-menu.styles\";\n\n/**\n * A sidebar navigation element. The currently visible section will be highlighted.\n *\n * This component should be placed inside a container that aligns it to the side.\n * The container can also have `position: sticky` in order to make it a sticky sidebar.\n */\nconst Component = (\n    {\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        renderItem,\n    }: LocalNavMenuProps,\n    ref: React.Ref<HTMLUListElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const localNavMenuId = dataTestId || \"local-nav-menu\";\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // ============================================================================\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderLocalNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavMenuItemComponentProps) => {\n        const { id, title } = item;\n\n        const renderTitle = () => {\n            if (renderItem) {\n                return renderItem(item, { selected: isSelected });\n            }\n            return (\n                <Typography.BodyBL\n                    className={styles.textLabel}\n                    weight={isSelected ? \"semibold\" : \"regular\"}\n                >\n                    {title}\n                </Typography.BodyBL>\n            );\n        };\n\n        return (\n            <li\n                id={id}\n                key={index}\n                className={clsx(\n                    styles.navItem,\n                    isSelected && styles.navItemSelected\n                )}\n            >\n                <div\n                    className={styles.navItemContent}\n                    role=\"link\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    tabIndex={0}\n                    aria-current={isSelected ? true : undefined}\n                >\n                    {renderTitle()}\n                </div>\n            </li>\n        );\n    };\n    return (\n        <ul\n            ref={ref}\n            id={id}\n            className={clsx(styles.nav, className)}\n            data-testid={localNavMenuId}\n        >\n            {items.map((item, i) => {\n                const isSelected = i === selectedItemIndex;\n                return renderLocalNavItem({\n                    handleClick: (e) => onNavItemSelect(e, item, i),\n                    isSelected,\n                    item,\n                    renderItem,\n                    index: i,\n                });\n            })}\n        </ul>\n    );\n};\n\nexport const LocalNavMenu = React.forwardRef(Component);\n"],"names":["LocalNavMenu","React","forwardRef","onNavItemSelect","items","selectedItemIndex","id","dataTestId","className","renderItem","ref","localNavMenuId","_jsx","clsx","styles.nav","map","item","i","handleClick","isSelected","index","title","styles.navItem","styles.navItemSelected","children","styles.navItemContent","role","onClick","onKeyDown","e","key","preventDefault","handleNavItemKeyDown","tabIndex","undefined","selected","Typography","BodyBL","styles.textLabel","weight","renderLocalNavItem"],"mappings":"8PAcA,MAwGaA,EAAeC,EAAMC,YAxGhB,EAEVC,kBACAC,QACAC,oBACAC,KACA,cAAeC,EACfC,YACAC,cAEJC,KAKA,MAAMC,EAAiBJ,GAAc,iBAoErC,OACIK,EAAA,KAAA,CACIF,IAAKA,EACLJ,GAAIA,EACJE,UAAWK,EAAKC,EAAYN,GAAU,cACzBG,WAEZP,EAAMW,KAAI,CAACC,EAAMC,IApDC,GACvBC,cACAC,aACAH,OACAP,aACAW,YAEA,MAAMd,GAAEA,EAAEe,MAAEA,GAAUL,EAgBtB,OACIJ,EAAA,KAAA,CACIN,GAAIA,EAEJE,UAAWK,EACPS,EACAH,GAAcI,GACjBC,SAEDZ,EAAA,MAAA,CACIJ,UAAWiB,EACXC,KAAK,OACLC,QAAST,EACTU,UAAYC,GAtDC,EACzBA,EACAX,KAIA,MAAMY,IAAEA,GAAQD,EAEJ,UAARC,GAA2B,MAARA,IACnBD,EAAEE,iBACFb,EAAYW,GAChB,EA2C8BG,CAAqBH,EAAGX,GAC1Ce,SAAU,EAAC,iBACGd,QAAoBe,EAASV,SA5B/Cf,EACOA,EAAWO,EAAM,CAAEmB,SAAUhB,IAGpCP,EAACwB,EAAWC,OAAM,CACd7B,UAAW8B,EACXC,OAAQpB,EAAa,WAAa,UAASK,SAE1CH,OAQAD,EAgBJ,EAYMoB,CAAmB,CACtBtB,YAAcW,GAAM1B,EAAgB0B,EAAGb,EAAMC,GAC7CE,WAHeF,IAAMZ,EAIrBW,OACAP,aACAW,MAAOH,OAGd"}

package/local-nav/local-nav-menu/local-nav-menu.styles.d.ts

@@ -1,10 +1,5 @@
-interface NavItemStyleProps {
-    $isSelected?: boolean;
-}
-export declare const Nav: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
-export declare const TextLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, NavItemStyleProps>> & string;
-export declare const NavItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, NavItemStyleProps>> & string;
-export declare const NavItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export {};
+export declare const nav: import("@linaria/core").LinariaClassName;
+export declare const textLabel: import("@linaria/core").LinariaClassName;
+export declare const navItem: import("@linaria/core").LinariaClassName;
+export declare const navItemSelected: import("@linaria/core").LinariaClassName;
+export declare const navItemContent: import("@linaria/core").LinariaClassName;

package/local-nav/local-nav-menu/local-nav-menu.styles.js

@@ -1,40 +1,2 @@
-import o from"styled-components";import{Typography as i}from"../../typography/index.js";import{V3_Colour as t,V3_Spacing as e,V3_Radius as r}from"../../v3_theme/index.js";const n=o.ul`
-    list-style-type: none;
-    padding: 0;
-    margin-top: 0;
-`,s=o(i.BodyBL)`
-    margin: 0;
-`,p=o.li`
-    display: block;
-    position: relative;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-
-    &::before {
-        content: "";
-        position: absolute;
-        left: 0;
-        width: 4px;
-        height: 100%;
-        top: 0;
-        background-color: ${o=>o.$isSelected?t["bg-primary"]:t["bg-primary-subtler"]};
-        transition: all 250ms linear;
-    }
-
-    &:hover,
-    &:focus-within {
-        background-color: ${t["bg-hover-subtle"]};
-    }
-`,l=o.div`
-    display: block;
-    padding: ${e["spacing-16"]};
-    padding-left: ${e["spacing-20"]};
-
-    &:focus-visible {
-        outline: 2px solid ${t["focus-ring"]};
-        outline-offset: 2px;
-        border-radius: ${r.sm};
-    }
-`;export{n as Nav,p as NavItem,l as NavItemContent,s as TextLabel};
+import"./local-nav-menu.styles_pq19dh.css";const n="nflnesd",a="tun9y1j",l="n1ocymwf",o="naf0oif",c="n8uzvfa";export{n as nav,l as navItem,c as navItemContent,o as navItemSelected,a as textLabel};
 //# sourceMappingURL=local-nav-menu.styles.js.map

package/local-nav/local-nav-menu/local-nav-menu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-menu.styles.js","sources":["../../../src/local-nav/local-nav-menu/local-nav-menu.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Typography } from \"../../typography\";\nimport { V3_Colour, V3_Radius, V3_Spacing } from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface NavItemStyleProps {\n    $isSelected?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Nav = styled.ul`\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n`;\n\nexport const TextLabel = styled(Typography.BodyBL)<NavItemStyleProps>`\n    margin: 0;\n`;\n\nexport const NavItem = styled.li<NavItemStyleProps>`\n    display: block;\n    position: relative;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n\n    &::before {\n        content: \"\";\n        position: absolute;\n        left: 0;\n        width: 4px;\n        height: 100%;\n        top: 0;\n        background-color: ${(props) =>\n            props.$isSelected\n                ? V3_Colour[\"bg-primary\"]\n                : V3_Colour[\"bg-primary-subtler\"]};\n        transition: all 250ms linear;\n    }\n\n    &:hover,\n    &:focus-within {\n        background-color: ${V3_Colour[\"bg-hover-subtle\"]};\n    }\n`;\n\nexport const NavItemContent = styled.div`\n    display: block;\n    padding: ${V3_Spacing[\"spacing-16\"]};\n    padding-left: ${V3_Spacing[\"spacing-20\"]};\n\n    &:focus-visible {\n        outline: 2px solid ${V3_Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${V3_Radius[\"sm\"]};\n    }\n`;\n"],"names":["Nav","styled","ul","TextLabel","Typography","BodyBL","NavItem","li","props","$isSelected","V3_Colour","NavItemContent","div","V3_Spacing","V3_Radius"],"mappings":"2KAiBO,MAAMA,EAAMC,EAAOC,EAAE;;;;EAMfC,EAAYF,EAAOG,EAAWC,OAA0B;;EAIxDC,EAAUL,EAAOM,EAAqB;;;;;;;;;;;;;;4BActBC,GACjBA,EAAMC,YACAC,EAAU,cACVA,EAAU;;;;;;4BAMAA,EAAU;;EAIzBC,EAAiBV,EAAOW,GAAG;;eAEzBC,EAAW;oBACNA,EAAW;;;6BAGFH,EAAU;;yBAEdI,EAAc;;"}
+{"version":3,"file":"local-nav-menu.styles.js","sources":["../../../src/local-nav/local-nav-menu/local-nav-menu.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Radius, Spacing } from \"../../theme\";\n\nexport const nav = css`\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n`;\n\nexport const textLabel = css`\n    margin: 0;\n`;\n\nexport const navItem = css`\n    display: block;\n    position: relative;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n\n    &::before {\n        content: \"\";\n        position: absolute;\n        left: 0;\n        width: 4px;\n        height: 100%;\n        top: 0;\n        background-color: ${Colour[\"bg-primary-subtler\"]};\n        transition: all 250ms linear;\n    }\n\n    &:hover,\n    &:focus-within {\n        background-color: ${Colour[\"bg-hover-subtle\"]};\n    }\n`;\n\nexport const navItemSelected = css`\n    &::before {\n        background-color: ${Colour[\"bg-primary\"]};\n    }\n`;\n\nexport const navItemContent = css`\n    display: block;\n    padding: ${Spacing[\"spacing-16\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n"],"names":["nav","textLabel","navItem","navItemSelected","navItemContent"],"mappings":"mFAIO,MAAMA,EAAG,UAMHC,EAAS,UAITC,EAAO,WAwBPC,EAAe,UAMfC,EAAc"}

package/local-nav/local-nav-menu/local-nav-menu.styles_pq19dh.css

@@ -0,0 +1,5 @@
+.nflnesd{list-style-type:none;padding:0;margin-top:0;}
+.tun9y1j{margin:0;}
+.n1ocymwf{display:block;position:relative;margin:0;padding:0;cursor:pointer;}.n1ocymwf::before{content:"";position:absolute;left:0;width:4px;height:100%;top:0;background-color:var(--fds-colour-bg-primary-subtler);-webkit-transition:all 250ms linear;transition:all 250ms linear;}.n1ocymwf:hover,.n1ocymwf:focus-within{background-color:var(--fds-colour-bg-hover-subtle);}
+.naf0oif::before{background-color:var(--fds-colour-bg-primary);}
+.n8uzvfa{display:block;padding:var(--fds-spacing-16);padding-left:var(--fds-spacing-20);}.n8uzvfa:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:2px;border-radius:var(--fds-radius-sm);}

package/markup/markup.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{forwardRef as r}from"react";import{Container as o}from"./markup.style.js";const i=r(((r,i)=>{const{baseTextColor:s,baseTextSize:a,inline:m}=r,n=e(r,["baseTextColor","baseTextSize","inline"]);return t(o,Object.assign({ref:i,as:m?"span":"div",$textSize:a,$textColor:s},n))}));export{i 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{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};
 //# sourceMappingURL=markup.js.map

package/markup/markup.js.map

@@ -1 +1 @@
-{"version":3,"file":"markup.js","sources":["../../src/markup/markup.tsx"],"sourcesContent":["import type React from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { Container } 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, ...otherProps } = props;\n\n    // =========================================================================\n    // RENDER FUNCTION\n    // =========================================================================\n    return (\n        <Container\n            ref={ref}\n            as={inline ? \"span\" : \"div\"}\n            $textSize={baseTextSize}\n            $textColor={baseTextColor}\n            {...otherProps}\n        />\n    );\n};\n\nexport const Markup = forwardRef(Component);\n"],"names":["Markup","forwardRef","props","ref","baseTextColor","baseTextSize","inline","otherProps","__rest","_jsx","Container","Object","assign","as","$textSize","$textColor"],"mappings":"wKAMA,MAoBaA,EAASC,GApBJ,CAACC,EAAoBC,KAInC,MAAMC,cAAEA,EAAaC,aAAEA,EAAYC,OAAEA,GAA0BJ,EAAfK,EAAUC,EAAKN,EAAzD,CAAA,gBAAA,eAAA,WAKN,OACIO,EAACC,EAASC,OAAAC,OAAA,CACNT,IAAKA,EACLU,GAAIP,EAAS,OAAS,MAAKQ,UAChBT,EAAYU,WACXX,GACRG,GACN"}
+{"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"}

package/markup/markup.style.d.ts

@@ -1,8 +1,10 @@
-import type { V3_TypographySizeType } from "../v3_theme/font/types";
-import type { V3_ThemeStyleProps } from "../v3_theme/types";
-interface ContainerStyleProps {
-    $textSize?: V3_TypographySizeType | undefined;
-    $textColor?: string | ((props: V3_ThemeStyleProps) => string) | undefined;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerStyleProps>> & string;
-export {};
+export declare const tokens: {
+    readonly rootFontFamily: "--fds-internal-markup-root-fontFamily";
+    readonly rootFontVariant: "--fds-internal-markup-root-fontVariant";
+    readonly rootFontSize: "--fds-internal-markup-root-fontSize";
+    readonly rootFontWeight: "--fds-internal-markup-root-fontWeight";
+    readonly rootLineHeight: "--fds-internal-markup-root-lineHeight";
+    readonly rootLetterSpacing: "--fds-internal-markup-root-letterSpacing";
+};
+export declare const baseMarkup: import("@linaria/core").LinariaClassName;
+export declare const sizedMarkup: import("@linaria/core").LinariaClassName;

package/markup/markup.style.js

@@ -1,7 +1,2 @@
-import t,{css as o}from"styled-components";import{applyHtmlContentStyle as e}from"../shared/html-content/html-content.js";const r=t.div`
-    ${t=>e({textSize:t.$textSize})}
-    ${t=>t.$textColor&&o`
-            color: ${t.$textColor};
-        `}
-`;export{r as Container};
+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};
 //# sourceMappingURL=markup.style.js.map

package/markup/markup.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"markup.style.js","sources":["../../src/markup/markup.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport type { V3_TypographySizeType } from \"../v3_theme/font/types\";\nimport type { V3_ThemeStyleProps } from \"../v3_theme/types\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface ContainerStyleProps {\n    $textSize?: V3_TypographySizeType | undefined;\n    $textColor?: string | ((props: V3_ThemeStyleProps) => string) | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div<ContainerStyleProps>`\n    ${(props) => applyHtmlContentStyle({ textSize: props.$textSize })}\n    ${(props) =>\n        props.$textColor &&\n        css`\n            color: ${props.$textColor};\n        `}\n`;\n"],"names":["Container","styled","div","props","applyHtmlContentStyle","textSize","$textSize","$textColor","css"],"mappings":"0HAiBO,MAAMA,EAAYC,EAAOC,GAAwB;MACjDC,GAAUC,EAAsB,CAAEC,SAAUF,EAAMG;MAClDH,GACCA,EAAMI,YACNC,CAAG;qBACUL,EAAMI;;"}
+{"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"}

package/markup/markup.style_1iu40x9.css

@@ -0,0 +1,2 @@
+.b2c8sfe strong{font-weight:var(--fds-font-weight-semibold);}.b2c8sfe p{margin:0;}.b2c8sfe a{font-weight:var(--fds-font-weight-semibold);color:var(--fds-colour-hyperlink);-webkit-text-decoration:underline;text-decoration:underline;}.b2c8sfe a svg{color:var(--fds-colour-icon-primary);height:1lh;width:1em;margin-left:0.4rem;vertical-align:middle;}.b2c8sfe a:hover,.b2c8sfe a:active,.b2c8sfe a:visited,.b2c8sfe a:focus{color:var(--fds-colour-hyperlink-hover);}.b2c8sfe a:hover svg,.b2c8sfe a:active svg,.b2c8sfe a:visited svg,.b2c8sfe a:focus svg{color:var(--fds-colour-icon-hover);}.b2c8sfe ul,.b2c8sfe ol{margin:0;padding:0;margin-left:2.5rem;}.b2c8sfe ol{list-style:decimal;}.b2c8sfe ul{list-style:disc;}
+.stfuo83{font-family:var(--fds-internal-markup-root-fontFamily, inherit);font-variant:var(--fds-internal-markup-root-fontVariant, inherit);font-size:var(--fds-internal-markup-root-fontSize, inherit);font-weight:var(--fds-internal-markup-root-fontWeight, inherit);line-height:var(--fds-internal-markup-root-lineHeight, inherit);letter-spacing:var(--fds-internal-markup-root-letterSpacing, inherit);}

package/markup/markup.utils.d.ts

@@ -0,0 +1,2 @@
+import type { ApplyStyleMap, FontDeclarationProperties } from "../theme";
+export declare const createMarkupFontStyles: (fontDeclarations?: FontDeclarationProperties) => ApplyStyleMap;

package/markup/markup.utils.js

@@ -0,0 +1,2 @@
+import{tokens as t}from"./markup.style.js";const o={[t.rootFontFamily]:"font-family",[t.rootFontVariant]:"font-variant",[t.rootFontSize]:"font-size",[t.rootFontWeight]:"font-weight",[t.rootLineHeight]:"line-height",[t.rootLetterSpacing]:"letter-spacing"},r=t=>{return r=o,n=t,Object.fromEntries(Object.entries(r).map((([t,o])=>{var r;return[t,null!==(r=null==n?void 0:n[o])&&void 0!==r?r:null]})));var r,n};export{r as createMarkupFontStyles};
+//# sourceMappingURL=markup.utils.js.map

package/markup/markup.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markup.utils.js","sources":["../../src/markup/markup.utils.ts"],"sourcesContent":["import type { ApplyStyleMap, FontDeclarationProperties } from \"../theme\";\nimport { tokens } from \"./markup.style\";\n\nconst rootFontTokenMap: Record<string, keyof FontDeclarationProperties> = {\n    [tokens.rootFontFamily]: \"font-family\",\n    [tokens.rootFontVariant]: \"font-variant\",\n    [tokens.rootFontSize]: \"font-size\",\n    [tokens.rootFontWeight]: \"font-weight\",\n    [tokens.rootLineHeight]: \"line-height\",\n    [tokens.rootLetterSpacing]: \"letter-spacing\",\n} as const;\n\nconst mapFontDeclarationsToStyles = (\n    tokenMap: Record<string, keyof FontDeclarationProperties>,\n    declarations?: FontDeclarationProperties\n) =>\n    Object.fromEntries(\n        Object.entries(tokenMap).map(([token, declarationKey]) => [\n            token,\n            declarations?.[declarationKey] ?? null,\n        ])\n    );\n\nexport const createMarkupFontStyles = (\n    fontDeclarations?: FontDeclarationProperties\n): ApplyStyleMap =>\n    mapFontDeclarationsToStyles(rootFontTokenMap, fontDeclarations);\n"],"names":["rootFontTokenMap","tokens","rootFontFamily","rootFontVariant","rootFontSize","rootFontWeight","rootLineHeight","rootLetterSpacing","createMarkupFontStyles","fontDeclarations","mapFontDeclarationsToStyles","tokenMap","declarations","Object","fromEntries","entries","map","token","declarationKey","_a"],"mappings":"2CAGA,MAAMA,EAAoE,CACtE,CAACC,EAAOC,gBAAiB,cACzB,CAACD,EAAOE,iBAAkB,eAC1B,CAACF,EAAOG,cAAe,YACvB,CAACH,EAAOI,gBAAiB,cACzB,CAACJ,EAAOK,gBAAiB,cACzB,CAACL,EAAOM,mBAAoB,kBAcnBC,EACTC,IAEAC,OAbAC,EAa4BX,EAZ5BY,EAY8CH,EAV9CI,OAAOC,YACHD,OAAOE,QAAQJ,GAAUK,KAAI,EAAEC,EAAOC,YAAoB,MAAA,CACtDD,EAC8B,QAA9BE,EAAAP,aAAY,EAAZA,EAAeM,UAAe,IAAAC,EAAAA,EAAI,KACrC,KAR2B,IAChCR,EACAC,CAY8D"}

package/markup/types.d.ts

@@ -1,13 +1,14 @@
-import type { V3_TypographySizeType } from "../v3_theme/font/types";
-import type { V3_ThemeStyleProps } from "../v3_theme/types";
+import type { ColourCSSVariableString, FontSize } from "../theme";
+type CustomCssString = string & {};
 export interface MarkupProps extends React.HTMLAttributes<HTMLDivElement> {
     /** The default font size. If not specified, inherited from the parent */
-    baseTextSize?: V3_TypographySizeType | undefined;
+    baseTextSize?: FontSize | undefined;
     /** The default font color. If not specified, inherited from the parent */
-    baseTextColor?: string | ((props: V3_ThemeStyleProps) => string) | undefined;
+    baseTextColor?: ColourCSSVariableString | CustomCssString | undefined;
     /**
      * Specifies if element is rendered as block element `div` or inline
      * element `span`
      */
     inline?: boolean | undefined;
 }
+export {};

package/masked-input/masked-input.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as a,Fragment as n}from"react/jsx-runtime";import{EyeIcon as t}from"@lifesg/react-icons/eye";import{EyeSlashIcon as i}from"@lifesg/react-icons/eye-slash";import{l as o}from"../external/lodash/lodash.js";import s,{useState as l,useRef as d,useImperativeHandle as u,useEffect as c}from"react";import{VisuallyHidden as m,concatIds as k}from"../shared/accessibility/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as f}from"../util/simple-id-generator.js";import{StringHelper as p}from"../util/string-helper.js";import{LoadingWrapper as g,Spinner as h,LoadingLabel as v,ClickableErrorWrapper as y,ErrorTextContainer as b,ErrorIcon as C,ErrorLabel as j,TryAgainLabel as R,InputGroupWrapper as M,ReadOnlyClickable as x,ReadOnlyValueText as $,ReadOnlyIconContainer as w,IconContainer as T}from"./masked-input.style.js";const D=s.forwardRef(((s,D)=>{var U,{value:A,readOnly:I,"data-testid":O,maskRange:B,unmaskRange:F,maskRegex:S,maskTransformer:E,iconMask:_=r(i,{}),iconUnmask:L=r(t,{}),iconActiveColor:V,iconInactiveColor:q,maskChar:z="•",error:G,disableMask:H,transformInput:J,loadState:K,onMask:N,onUnmask:P,onChange:Q,onFocus:W,onBlur:X,onTryAgain:Y}=s,Z=e(s,["value","readOnly","data-testid","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","iconUnmask","iconActiveColor","iconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain"]);const ee=I&&o.isEmpty(A),[re,ae]=l(!H),[ne,te]=l(A||""),[ie]=l((()=>f.generate())),oe=`${null!==(U=Z.id)&&void 0!==U?U:ie}-value`,se=d(null),le=d(null),de=d(null),ue=d(!H),ce=Z["aria-labelledby"];u(D,(()=>se.current),[]),c((()=>{te(A||"")}),[A]),c((()=>{var e,r;I&&("fail"===K&&(null===(e=le.current)||void 0===e||e.focus()),"success"===K&&(null===(r=de.current)||void 0===r||r.focus()))}),[I,K]);const me=e=>{ve(!1),null==W||W(e)},ke=e=>{ve(!0),null==X||X(e)},fe=e=>{let r=e.target.value;switch(J){case"uppercase":r=r.toUpperCase();break;case"lowercase":r=r.toLowerCase()}te(r),e.target.value=r,null==Q||Q(e)},pe=()=>{I&&(null==Y||Y())},ge=e=>{e.preventDefault()},he=()=>{var e;const r=!re;ve(r),r||null===(e=se.current)||void 0===e||e.focus()},ve=e=>{ue.current!==e&&(ue.current=e,ae(e),e?null==N||N():null==P||P())},ye=()=>ee?"-":re&&!H?p.maskValue(ne,{maskChar:z,maskRange:B,unmaskRange:F,maskRegex:S,maskTransformer:E}):ne,be=()=>!(null==ne?void 0:ne.toString().length)||H,Ce=()=>{if(ee)return"-";if(re&&!H){return p.getMaskedDescription(ne,"masked",B)||"Masked value"}return ne},je=()=>{if(ee)return r(n,{});const e=be();return r(T,{"data-testid":"icon-"+(re?"masked":"unmasked"),onMouseDown:e?void 0:ge,onClick:e?void 0:he,$isDisabled:e,$inactiveColor:q,$activeColor:V,"aria-hidden":"true",children:re?L:_})};return r("div",{"aria-busy":"loading"===K,children:(()=>{if(I)switch(K){case"fail":return a(y,{ref:le,onClick:pe,"data-testid":"try-again-button",type:"button",children:[a(b,{children:[r(C,{}),r(j,{children:"Error"})]}),r(R,{children:"Try again?"})]});case"loading":return a(g,{children:[r(h,{}),r(v,{children:"Retrieving..."})]});default:return(()=>{const e=be()||ee;return a(n,{children:[r(m,{id:oe,children:Ce()}),a(x,{ref:de,"data-testid":"masked-input-readonly-button",onClick:e?void 0:he,type:"button","aria-labelledby":k(oe,ce),"aria-disabled":e,children:[r($,{children:ye()}),!e&&r(w,{children:re?r(t,{"data-testid":"masked-icon"}):r(i,{"data-testid":"unmasked-icon"})})]})]})})()}return r(M,Object.assign({ref:se,"data-testid":`${O||"masked-input"}${re?"-masked":"-unmasked"}`,addon:{type:"custom",attributes:{children:je()},position:"right"},onFocus:I?void 0:me,onBlur:I?void 0:ke,onClick:I?he:void 0,onChange:fe,value:ye(),readOnly:I,error:G,$isDisabled:be()},Z))})()})}));export{D as MaskedInput};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as a,jsxs as r,Fragment as n}from"react/jsx-runtime";import{ExclamationTriangleIcon as t}from"@lifesg/react-icons/exclamation-triangle";import{EyeIcon as s}from"@lifesg/react-icons/eye";import{EyeSlashIcon as o}from"@lifesg/react-icons/eye-slash";import i from"clsx";import{l}from"../external/lodash/lodash.js";import m,{useState as c,useRef as d,useImperativeHandle as u,useEffect as p}from"react";import{InputGroup as k}from"../input-group/input-group.js";import{VisuallyHidden as h,concatIds as f}from"../shared/accessibility/index.js";import{ComponentLoadingSpinner as g}from"../shared/component-loading-spinner/component-loading-spinner.js";import{BasicButton as v}from"../shared/input-wrapper/input-wrapper.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 y}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as j}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as C}from"../util/simple-id-generator.js";import{StringHelper as b}from"../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as N,loadingWrapper as x,spinner as R,loadingLabel as M,clickableErrorWrapper as w,errorTextContainer as T,errorIcon as B,errorLabel as U,tryAgainLabel as A,inputGroupWrapper as I,readOnlyClickable as O,readOnlyValueText as D,readOnlyIconContainer as F,iconContainer as S,iconContainerDisabled as $}from"./masked-input.styles.js";const q=m.forwardRef(((m,q)=>{var E,{value:L,readOnly:_,"data-testid":V,maskRange:z,unmaskRange:G,maskRegex:H,maskTransformer:J,iconMask:K=a(o,{}),iconUnmask:P=a(s,{}),iconActiveColor:Q,iconInactiveColor:W,maskChar:X="•",error:Y,disableMask:Z,transformInput:ee,loadState:ae,onMask:re,onUnmask:ne,onChange:te,onFocus:se,onBlur:oe,onTryAgain:ie,className:le}=m,me=e(m,["value","readOnly","data-testid","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","iconUnmask","iconActiveColor","iconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain","className"]);const ce=_&&l.isEmpty(L),[de,ue]=c(!Z),[pe,ke]=c(L||""),he=C(),fe=`${null!==(E=me.id)&&void 0!==E?E:he}-value`,ge=d(null),ve=d(null),ye=d(null),je=d(null),Ce=d(!Z),be=me["aria-labelledby"];u(q,(()=>ge.current),[]),y(je,{[N.iconContainer.inactiveColor]:W,[N.iconContainer.activeColor]:Q}),p((()=>{ke(L||"")}),[L]),p((()=>{var e,a;_&&("fail"===ae&&(null===(e=ve.current)||void 0===e||e.focus()),"success"===ae&&(null===(a=ye.current)||void 0===a||a.focus()))}),[_,ae]);const Ne=e=>{Be(!1),null==se||se(e)},xe=e=>{Be(!0),null==oe||oe(e)},Re=e=>{let a=e.target.value;switch(ee){case"uppercase":a=a.toUpperCase();break;case"lowercase":a=a.toLowerCase()}ke(a),e.target.value=a,null==te||te(e)},Me=()=>{_&&(null==ie||ie())},we=e=>{e.preventDefault()},Te=()=>{var e;const a=!de;Be(a),a||null===(e=ge.current)||void 0===e||e.focus()},Be=e=>{Ce.current!==e&&(Ce.current=e,ue(e),e?null==re||re():null==ne||ne())},Ue=()=>ce?"-":de&&!Z?b.maskValue(pe,{maskChar:X,maskRange:z,unmaskRange:G,maskRegex:H,maskTransformer:J}):pe,Ae=()=>!(null==pe?void 0:pe.toString().length)||Z,Ie=()=>{if(ce)return"-";if(de&&!Z){return b.getMaskedDescription(pe,"masked",z)||"Masked value"}return pe},Oe=()=>{if(ce)return a(n,{});const e=Ae();return a("div",{ref:je,className:i(S,e&&$),"data-testid":"icon-"+(de?"masked":"unmasked"),onMouseDown:e?void 0:we,onClick:e?void 0:Te,"aria-hidden":"true",children:de?P:K})};return a("div",{"aria-busy":"loading"===ae,children:(()=>{if(_)switch(ae){case"fail":return r(v,{ref:ve,className:w,onClick:Me,"data-testid":"try-again-button",type:"button",children:[r("span",{className:T,children:[a(t,{className:B}),a("span",{className:U,children:"Error"})]}),a("span",{className:A,children:"Try again?"})]});case"loading":return r("div",{className:x,children:[a(g,{className:R}),a(j.BodyBL,{className:M,children:"Retrieving..."})]});default:return(()=>{const e=Ae()||ce;return r(n,{children:[a(h,{id:fe,children:Ie()}),r("button",{ref:ye,className:O,"data-testid":"masked-input-readonly-button",onClick:e?void 0:Te,type:"button","aria-labelledby":f(fe,be),"aria-disabled":e,children:[a("span",{className:D,children:Ue()}),!e&&a("span",{className:F,children:de?a(s,{"data-testid":"masked-icon"}):a(o,{"data-testid":"unmasked-icon"})})]})]})})()}return a(k,Object.assign({ref:ge,className:i(I,le),"data-testid":`${V||"masked-input"}${de?"-masked":"-unmasked"}`,addon:{type:"custom",attributes:{children:Oe()},position:"right"},onFocus:_?void 0:Ne,onBlur:_?void 0:xe,onClick:_?Te:void 0,onChange:Re,value:Ue(),readOnly:_,error:Y},me))})()})}));export{q as MaskedInput};
 //# sourceMappingURL=masked-input.js.map