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

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

@@ -0,0 +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/masked-input/masked-input.styles_1cm388a.css

@@ -0,0 +1,16 @@
+@layer fds{.ilvnzaw{padding:0 0 0 var(--fds-spacing-16);}.ilvnzaw input{cursor:initial;}
+.i1hq8qtl{padding:0;}
+.itdqc7u input{cursor:pointer;}
+.ij8rwek{--fds-internal-maskedInput-iconContainer-inactiveColor:initial;--fds-internal-maskedInput-iconContainer-activeColor:initial;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;cursor:pointer;color:var(--fds-internal-maskedInput-iconContainer-activeColor, var(--fds-colour-icon-primary));padding:var(--fds-spacing-12) var(--fds-spacing-16);}.ij8rwek svg{height:1em;width:1em;}
+.i1q5e8sd{cursor:initial;color:var(--fds-internal-maskedInput-iconContainer-inactiveColor, var(--fds-colour-icon));}
+.lsb4klr{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;height:3rem;}
+.l1o6dphh{color:var(--fds-colour-text-subtler);}
+.s1lksd2c{margin-right:var(--fds-spacing-8);color:var(--fds-colour-icon);}
+.t12y77bq{color:var(--fds-colour-text-primary);-webkit-text-decoration:underline;text-decoration:underline;font-weight:var(--fds-font-weight-semibold);}
+.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-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/masked-input/types.d.ts

@@ -1,32 +1,107 @@
-import { InputProps } from "../input/types";
+import type { InputProps } from "../input/types";
+/**
+ * Load state for `MaskedInput`.
+ */
 export type MaskedInputLoadState = "loading" | "fail" | "success";
+/**
+ * Shared masking configuration used by `MaskedInput` and related components.
+ *
+ * Exactly one masking strategy should be provided. When multiple are supplied
+ * the precedence is: `maskTransformer` → `maskRegex` → `maskRange` /
+ * `unmaskRange`.
+ */
 export interface MaskAttributeProps {
+    /**
+     * Index range `[start, end]` of the characters to mask (inclusive, zero-based).
+     * Characters outside this range remain visible.
+     *
+     * @remarks Ignored when `maskTransformer` or `maskRegex` is provided.
+     */
     maskRange?: number[] | undefined;
+    /**
+     * Index range `[start, end]` of the characters to keep visible (inclusive, zero-based).
+     * Characters outside this range are masked.
+     *
+     * @remarks Ignored when `maskTransformer` or `maskRegex` is provided.
+     */
     unmaskRange?: number[] | undefined;
+    /**
+     * Regular expression whose matches are replaced with `maskChar`.
+     *
+     * @remarks Ignored when `maskTransformer` is provided.
+     */
     maskRegex?: RegExp | undefined;
+    /**
+     * Custom function that receives the raw value and returns the fully
+     * masked string. Takes precedence over `maskRegex`, `maskRange`, and
+     * `unmaskRange`.
+     */
     maskTransformer?: ((value: string) => string) | undefined;
+    /**
+     * Character used to replace each masked character in the displayed value.
+     *
+     * @default "•"
+     */
     maskChar?: string | undefined;
 }
+/**
+ * Props for the `MaskedInput` component.
+ */
 export interface MaskedInputProps extends InputProps, MaskAttributeProps {
     value?: string | undefined;
-    iconMask?: JSX.Element;
+    /**
+     * Icon rendered inside the toggle button while the value is masked
+     *
+     * @default <EyeIcon />
+     */
     iconUnmask?: JSX.Element;
+    /**
+     * Icon rendered inside the toggle button while the value is unmasked
+     *
+     * @default <EyeSlashIcon />
+     */
+    iconMask?: JSX.Element;
+    /**
+     * CSS color value applied to the mask-toggle icon when it is active
+     */
     iconActiveColor?: string | undefined;
+    /**
+     * CSS color value applied to the mask-toggle icon in its default
+     * inactive state.
+     */
     iconInactiveColor?: string | undefined;
+    /**
+     * When `true`, masking is permanently disabled and the raw value is
+     * always shown. The toggle icon is not rendered.
+     *
+     * @default false
+     */
     disableMask?: boolean | undefined;
+    /**
+     * Automatically transforms the typed value before it is stored and
+     * passed to `onChange`.
+     */
     transformInput?: "uppercase" | "lowercase" | undefined;
     /**
-     * Specifies the state of the component when there is a
-     * loading behaviour. Note that this only applies if
-     * the component is in `readOnly` mode.
-     *
-     * Values: "loading" | "fail" | "success"
+     * Retrieval state for the value. Only applies when `readOnly` is `true`.
      */
     loadState?: MaskedInputLoadState | undefined;
+    /**
+     * Called when the value transitions from unmasked to masked.
+     */
     onMask?: (() => void) | undefined;
+    /**
+     * Called when the value transitions from masked to unmasked.
+     */
     onUnmask?: (() => void) | undefined;
-    /** The callback function when the "Try again" button is clicked in error state */
+    /**
+     * Called when the user clicks the "Try again?" button shown in the
+     * `loadState="fail"` state. Only relevant when `readOnly` is `true`.
+     */
     onTryAgain?: (() => void) | undefined;
 }
-/** To be exposed for Form component inheritance */
+/**
+ * A subset of `MaskedInputProps` used by form components that manage
+ * the `error` state themselves.
+ */
 export type MaskedInputPartialProps = Omit<MaskedInputProps, "error">;

package/masthead/masthead.d.ts

@@ -1,4 +1,11 @@
 import "@govtechsg/sgds-web-component/themes/day.css";
 import "@govtechsg/sgds-web-component/themes/night.css";
-import { MastheadProps } from "./types";
+import type { MastheadProps } from "./types";
+/**
+ * Displays the Singapore Government Design System (SGDS) masthead banner.
+ *
+ * Use `Masthead` at the top of government digital services to meet the SGDS
+ * masthead requirement.
+ * @keywords banner, branding, compliance, government, SGDS
+ */
 export declare const Masthead: import("react").MemoExoticComponent<({ stretch }: MastheadProps) => JSX.Element>;

package/masthead/masthead.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import"../external/@govtechsg/sgds-web-component/themes/day.css.js";import"../external/@govtechsg/sgds-web-component/themes/night.css.js";import{memo as t,useContext as s,useEffect as o}from"react";import{ThemeContext as n}from"styled-components";import{Wrapper as m}from"./masthead.style.js";const d=t((({stretch:t=!1})=>{const d=s(n),i="dark"===(null==d?void 0:d.colourMode);o((()=>{l()||h()}),[]),o((()=>{i?document.documentElement.classList.add(a):document.documentElement.classList.remove(a)}),[i]);const l=()=>document.getElementById(c),h=()=>{if(!document.getElementById(c)){const e=document.createElement("script");e.id=c,e.type="module",e.src=r,document.head.appendChild(e)}};return e(m,{dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"},$stretch:t})})),c="lifesg-ds-masthead-script",r="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js",a="sgds-night-theme";export{d 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

@@ -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\";\nimport { memo, useContext, useEffect } from \"react\";\nimport { ThemeContext } from \"styled-components\";\nimport { Wrapper } from \"./masthead.style\";\nimport { 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        <Wrapper dangerouslySetInnerHTML={createContent()} $stretch={stretch} />\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","Wrapper","dangerouslySetInnerHTML","__html","$stretch"],"mappings":"6UAOA,MA8DaA,EAAWC,GA9DE,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,EAACC,EAAO,CAACC,wBARF,CAAEC,OAAQ,mCAQgCC,SAAY7B,GAAW,IAS1EgB,EAAY,4BACZM,EACF,gGACET,EAA6B"}
+{"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\";\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\n// @catalog\n/**\n * Displays the Singapore Government Design System (SGDS) masthead banner.\n *\n * Use `Masthead` at the top of government digital services to meet the SGDS\n * masthead requirement.\n * @keywords banner, branding, compliance, government, SGDS\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":"wsBAUA,MAyEaA,EAAWC,GAzEE,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,IAiBJf,EAAY,4BACZM,EACF,gGACET,EAA6B"}

package/masthead/masthead.styles.d.ts

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

package/masthead/masthead.styles.js

@@ -0,0 +1,2 @@
+import"./masthead.styles_1huzon9.css";const s="wafydue",t="wq9iwwi";export{s as wrapper,t as wrapperStretch};
+//# sourceMappingURL=masthead.styles.js.map

package/masthead/masthead.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"masthead.styles.js","sources":["../../src/masthead/masthead.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Breakpoint, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const wrapper = css`\n    // matches Layout.Container\n    --sgds-mainnav-padding-x: ${Breakpoint[\"xxl-margin\"]};\n    --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"xxl-margin\"]};\n    --sgds-mainnav-max-width: 1440px;\n\n    ${MediaQuery.MaxWidth.xl} {\n        --sgds-mainnav-padding-x: ${Breakpoint[\"xl-margin\"]};\n        --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"xl-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        --sgds-mainnav-padding-x: ${Breakpoint[\"lg-margin\"]};\n        --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"lg-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.md} {\n        --sgds-mainnav-padding-x: ${Breakpoint[\"md-margin\"]};\n        --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"md-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        --sgds-mainnav-padding-x: ${Breakpoint[\"sm-margin\"]};\n        --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"sm-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        --sgds-mainnav-padding-x: ${Breakpoint[\"xs-margin\"]};\n        --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"xs-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        --sgds-mainnav-padding-x: ${Breakpoint[\"xxs-margin\"]};\n        --sgds-mainnav-mobile-padding-x: ${Breakpoint[\"xxs-margin\"]};\n    }\n`;\n\nexport const wrapperStretch = css`\n    --sgds-mainnav-max-width: calc(infinity * 1px);\n`;\n"],"names":["wrapper","wrapperStretch"],"mappings":"8DAOO,MAAMA,EAAO,UAqCPC,EAAc"}

package/masthead/masthead.styles_1huzon9.css

@@ -0,0 +1,2 @@
+@layer fds{.wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xxl);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xxl);--sgds-mainnav-max-width:1440px;}:where(body.fds-breakpoint-xl-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xl);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xl);}:where(body.fds-breakpoint-lg-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-lg);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-lg);}:where(body.fds-breakpoint-md-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-md);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-md);}:where(body.fds-breakpoint-sm-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-sm);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-sm);}:where(body.fds-breakpoint-xs-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xs);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xxs);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xxs);}
+.wq9iwwi{--sgds-mainnav-max-width:calc(infinity * 1px);}}