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

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 @@
+@layer fds{.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/local-nav/types.d.ts

@@ -1,28 +1,79 @@
+/**
+ * Data for a single local navigation item.
+ */
 export interface LocalNavItemProps {
     title: string | React.ReactNode;
     id?: string | undefined;
 }
+/**
+ * Base props for local navigation components.
+ */
 interface BaseLocalNavProps {
     className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * Called when a navigation item is activated.
+     *
+     * @param e The originating mouse or keyboard event.
+     * @param item The activated navigation item.
+     * @param index Zero-based index of the activated item within `items`.
+     */
     onNavItemSelect: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item: LocalNavItemProps, index: number) => void;
+    /** The list of navigation items to render. */
     items: LocalNavItemProps[];
+    /**
+     * Zero-based index of the currently selected item.
+     */
     selectedItemIndex?: number | undefined;
 }
+/**
+ * Render props supplied to the `renderItem` callback of `LocalNavMenu`.
+ */
 export interface LocalNavMenuItemRenderProps {
+    /** Whether this item is the currently selected navigation item. */
     selected: boolean;
 }
+/**
+ * Props for the `LocalNavMenu` component.
+ */
 export interface LocalNavMenuProps extends BaseLocalNavProps {
+    /**
+     * Custom renderer for each navigation item.
+     */
     renderItem?: ((item: LocalNavItemProps, renderProps: LocalNavMenuItemRenderProps) => React.ReactNode) | undefined;
 }
+/**
+ * Render props supplied to the `renderItem` callback of `LocalNavDropdown`.
+ */
 export interface LocalNavDropdownItemRenderProps {
+    /** Whether this item is the currently selected navigation item. */
     selected: boolean;
+    /**
+     * Whether the dropdown is currently in its stickied (fixed) state.
+     * Use this to conditionally style items differently when the nav is pinned.
+     */
     stickied: boolean;
 }
+/**
+ * Props for the `LocalNavDropdown` component.
+ */
 export interface LocalNavDropdownProps extends BaseLocalNavProps {
+    /**
+     * Label shown in the collapsed trigger when no item is selected or when the
+     * dropdown is not stickied. Once the dropdown is stickied and an item is
+     * selected, the trigger displays the selected item's title instead.
+     */
     defaultLabel: string | React.ReactNode;
+    /**
+     * Distance in pixels from the top of the viewport while the dropdown is stickied.
+     *
+     * @default 0
+     */
     stickyOffset?: number | undefined;
+    /**
+     * Custom renderer for each item in the dropdown list.
+     */
     renderItem?: ((item: LocalNavItemProps, renderProps: LocalNavDropdownItemRenderProps) => React.ReactNode) | undefined;
 }
 export {};

package/markup/markup.d.ts

@@ -1,3 +1,10 @@
 import type React from "react";
 import type { MarkupProps } from "./types";
+/**
+ * A container for rendering rich HTML markup.
+ *
+ * Use `Markup` to wrap CMS-generated or sanitised HTML content while applying
+ * a consistent base font size and colour.
+ * @keywords CMS, content, HTML, rich-text
+ */
 export declare const Markup: (props: MarkupProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

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{useApplyStyle as m}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{generateFontProperties as l}from"../theme/utils/font.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as a}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{baseMarkup as n,sizedMarkup as p}from"./markup.style.js";const j=s(((s,j)=>{const{baseTextColor:u,baseTextSize:c,inline:f,className:h}=s,d=e(s,["baseTextColor","baseTextSize","inline","className"]),x=o(null),b=i((()=>a(x,j)),[j]),y=i((()=>{if(c)return l(c,"regular")}),[c]),g=i((()=>Object.assign({color:u||null},y)),[u,y]);m(x,g);const k=r(n,c&&p,h);return t(f?"span":"div",Object.assign({ref:b,className:k},d))}));export{j as Markup};
 //# sourceMappingURL=markup.js.map

package/markup/markup.js.map

@@ -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 { useApplyStyle } from \"../theme\";\nimport { generateFontProperties } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./markup.style\";\nimport type { MarkupProps } from \"./types\";\n\nconst Component = (props: MarkupProps, ref: React.Ref<HTMLDivElement>) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { baseTextColor, baseTextSize, inline, className, ...otherProps } =\n        props;\n\n    const containerRef = useRef<HTMLDivElement | HTMLSpanElement>(null);\n    const mergedRef = useMemo(() => mergeRefs(containerRef, ref), [ref]);\n\n    const fontDeclarations = useMemo(() => {\n        if (!baseTextSize) {\n            return undefined;\n        }\n\n        return generateFontProperties(baseTextSize, \"regular\");\n    }, [baseTextSize]);\n\n    const appliedStyles = useMemo(\n        () => ({\n            color: baseTextColor || null,\n            ...fontDeclarations,\n        }),\n        [baseTextColor, fontDeclarations]\n    );\n\n    useApplyStyle(containerRef, appliedStyles);\n\n    const mergedClassName = clsx(\n        styles.baseMarkup,\n        baseTextSize && styles.sizedMarkup,\n        className\n    );\n\n    const ElementTag = inline ? \"span\" : \"div\";\n\n    return (\n        <ElementTag\n            ref={mergedRef as React.Ref<HTMLDivElement & HTMLSpanElement>}\n            className={mergedClassName}\n            {...otherProps}\n        />\n    );\n};\n\n// @catalog\n/**\n * A container for rendering rich HTML markup.\n *\n * Use `Markup` to wrap CMS-generated or sanitised HTML content while applying\n * a consistent base font size and colour.\n * @keywords CMS, content, HTML, rich-text\n */\nexport const Markup = forwardRef(Component);\n"],"names":["Markup","forwardRef","props","ref","baseTextColor","baseTextSize","inline","className","otherProps","__rest","containerRef","useRef","mergedRef","useMemo","mergeRefs","fontDeclarations","generateFontProperties","appliedStyles","Object","assign","color","useApplyStyle","mergedClassName","clsx","styles.baseMarkup","styles.sizedMarkup","_jsx"],"mappings":"01BAUA,MAqDaA,EAASC,GArDJ,CAACC,EAAoBC,KAInC,MAAMC,cAAEA,EAAaC,aAAEA,EAAYC,OAAEA,EAAMC,UAAEA,GACzCL,EADuDM,EAAUC,EACjEP,EADE,CAAA,gBAAA,eAAA,SAAA,cAGAQ,EAAeC,EAAyC,MACxDC,EAAYC,GAAQ,IAAMC,EAAUJ,EAAcP,IAAM,CAACA,IAEzDY,EAAmBF,GAAQ,KAC7B,GAAKR,EAIL,OAAOW,EAAuBX,EAAc,UAAU,GACvD,CAACA,IAEEY,EAAgBJ,GAClB,IAAMK,OAAAC,OAAA,CACFC,MAAOhB,GAAiB,MACrBW,IAEP,CAACX,EAAeW,IAGpBM,EAAcX,EAAcO,GAE5B,MAAMK,EAAkBC,EACpBC,EACAnB,GAAgBoB,EAChBlB,GAKJ,OACImB,EAHepB,EAAS,OAAS,MAGtBY,OAAAC,OAAA,CACPhB,IAAKS,EACLL,UAAWe,GACPd,GACN"}

package/markup/markup.style.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 s="b2c8sfe",t="stfuo83";export{s as baseMarkup,t as sizedMarkup};
 //# 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":["baseMarkup","sizedMarkup"],"mappings":"yDAcO,MAAMA,EAAU,UAkDVC,EAAW"}

package/markup/markup.style_1iu40x9.css

@@ -0,0 +1,2 @@
+@layer fds{.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/types.d.ts

@@ -1,13 +1,19 @@
-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 & {};
+type MarkupTextSize = Exclude<FontSize, "form-label" | "form-description">;
+/**
+ * Props for the `Markup` component.
+ */
 export interface MarkupProps extends React.HTMLAttributes<HTMLDivElement> {
     /** The default font size. If not specified, inherited from the parent */
-    baseTextSize?: V3_TypographySizeType | undefined;
+    baseTextSize?: MarkupTextSize | 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`
+     * Renders as an inline `span` instead of a block `div`.
+     *
+     * @default false
      */
     inline?: boolean | undefined;
 }
+export {};

package/masked-input/masked-input.d.ts

@@ -1,3 +1,10 @@
 import React from "react";
 import type { MaskedInputProps } from "./types";
+/**
+ * A text input that masks sensitive values and allows toggling visibility.
+ *
+ * Use `MaskedInput` when collecting or displaying sensitive data such as
+ * identity numbers or passwords.
+ * @keywords field, form, input, mask, password, secure, sensitive
+ */
 export declare const MaskedInput: (props: MaskedInputProps & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;

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

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

@@ -1 +1 @@
-{"version":3,"file":"masked-input.js","sources":["../../src/masked-input/masked-input.tsx"],"sourcesContent":["import { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { isEmpty } from \"lodash\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { SimpleIdGenerator, StringHelper } from \"../util\";\nimport {\n    ClickableErrorWrapper,\n    ErrorIcon,\n    ErrorLabel,\n    ErrorTextContainer,\n    IconContainer,\n    InputGroupWrapper,\n    LoadingLabel,\n    LoadingWrapper,\n    ReadOnlyClickable,\n    ReadOnlyIconContainer,\n    ReadOnlyValueText,\n    Spinner,\n    TryAgainLabel,\n} from \"./masked-input.style\";\nimport type { MaskedInputProps } from \"./types\";\n\nconst Component = (\n    {\n        value,\n        readOnly,\n        \"data-testid\": dataTestId,\n        maskRange,\n        unmaskRange,\n        maskRegex,\n        maskTransformer,\n        iconMask = <EyeSlashIcon />,\n        iconUnmask = <EyeIcon />,\n        iconActiveColor: maskIconActiveColor,\n        iconInactiveColor: maskIconInactiveColor,\n        maskChar = \"•\",\n        error,\n        disableMask,\n        transformInput,\n        loadState,\n        onMask,\n        onUnmask,\n        onChange,\n        onFocus,\n        onBlur,\n        onTryAgain,\n        ...otherProps\n    }: MaskedInputProps,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isEmptyReadOnlyState = readOnly && isEmpty(value);\n    const [isMasked, setIsMasked] = useState<boolean>(!disableMask);\n    const [updatedValue, setUpdatedValue] = useState<string>(value || \"\");\n    const [internalId] = useState(() => SimpleIdGenerator.generate());\n    const valueId = `${otherProps.id ?? internalId}-value`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const tryAgainRef = useRef<HTMLButtonElement>(null);\n    const readOnlyButtonRef = useRef<HTMLButtonElement>(null);\n    const isMaskedRef = useRef<boolean>(!disableMask);\n    const ariaLabelledBy = otherProps[\"aria-labelledby\"];\n\n    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setUpdatedValue(value || \"\");\n    }, [value]);\n\n    useEffect(() => {\n        if (!readOnly) return;\n\n        if (loadState === \"fail\") {\n            tryAgainRef.current?.focus();\n        }\n\n        if (loadState === \"success\") {\n            readOnlyButtonRef.current?.focus();\n        }\n    }, [readOnly, loadState]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        toggleMasking(false);\n        onFocus?.(event);\n    };\n\n    const handleBlur = (event?: React.FocusEvent<HTMLInputElement>) => {\n        toggleMasking(true);\n        onBlur?.(event!);\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        let value = event.target.value;\n\n        switch (transformInput) {\n            case \"uppercase\":\n                value = value.toUpperCase();\n                break;\n            case \"lowercase\":\n                value = value.toLowerCase();\n                break;\n            default:\n                break;\n        }\n\n        setUpdatedValue(value);\n        event.target.value = value;\n        onChange?.(event);\n    };\n\n    const handleTryAgain = () => {\n        if (readOnly) {\n            onTryAgain?.();\n        }\n    };\n\n    const handleIconMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n        event.preventDefault();\n    };\n\n    const handleToggleMask = () => {\n        const nextMasked = !isMasked;\n\n        toggleMasking(nextMasked);\n\n        if (!nextMasked) {\n            inputRef.current?.focus();\n            return;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const toggleMasking = (mask: boolean) => {\n        if (isMaskedRef.current === mask) return;\n\n        isMaskedRef.current = mask;\n        setIsMasked(mask);\n\n        if (mask) {\n            onMask?.();\n        } else {\n            onUnmask?.();\n        }\n    };\n\n    const getValue = () => {\n        if (isEmptyReadOnlyState) {\n            return \"-\";\n        }\n\n        return isMasked && !disableMask\n            ? StringHelper.maskValue(updatedValue, {\n                  maskChar,\n                  maskRange,\n                  unmaskRange,\n                  maskRegex,\n                  maskTransformer,\n              })\n            : updatedValue;\n    };\n\n    const shouldDisableMasking = () =>\n        !updatedValue?.toString().length || disableMask;\n\n    const getValueDescription = () => {\n        if (isEmptyReadOnlyState) {\n            return \"-\";\n        }\n\n        if (isMasked && !disableMask) {\n            const desc = StringHelper.getMaskedDescription(\n                updatedValue,\n                \"masked\",\n                maskRange\n            );\n\n            return desc || \"Masked value\";\n        }\n\n        return updatedValue;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        if (isEmptyReadOnlyState) {\n            return <></>;\n        }\n\n        const isDisabled = shouldDisableMasking();\n\n        return (\n            <IconContainer\n                data-testid={`icon-${isMasked ? \"masked\" : \"unmasked\"}`}\n                onMouseDown={!isDisabled ? handleIconMouseDown : undefined}\n                onClick={!isDisabled ? handleToggleMask : undefined}\n                $isDisabled={isDisabled}\n                $inactiveColor={maskIconInactiveColor}\n                $activeColor={maskIconActiveColor}\n                aria-hidden=\"true\"\n            >\n                {isMasked ? iconUnmask : iconMask}\n            </IconContainer>\n        );\n    };\n\n    const renderReadOnlyButton = () => {\n        const isButtonDisabled = shouldDisableMasking() || isEmptyReadOnlyState;\n\n        return (\n            <>\n                <VisuallyHidden id={valueId}>\n                    {getValueDescription()}\n                </VisuallyHidden>\n                <ReadOnlyClickable\n                    ref={readOnlyButtonRef}\n                    data-testid=\"masked-input-readonly-button\"\n                    onClick={!isButtonDisabled ? handleToggleMask : undefined}\n                    type=\"button\"\n                    aria-labelledby={concatIds(valueId, ariaLabelledBy)}\n                    aria-disabled={isButtonDisabled}\n                >\n                    <ReadOnlyValueText>{getValue()}</ReadOnlyValueText>\n                    {!isButtonDisabled && (\n                        <ReadOnlyIconContainer>\n                            {isMasked ? (\n                                <EyeIcon data-testid=\"masked-icon\" />\n                            ) : (\n                                <EyeSlashIcon data-testid=\"unmasked-icon\" />\n                            )}\n                        </ReadOnlyIconContainer>\n                    )}\n                </ReadOnlyClickable>\n            </>\n        );\n    };\n\n    const renderElement = () => {\n        if (readOnly) {\n            switch (loadState) {\n                case \"fail\":\n                    return (\n                        <ClickableErrorWrapper\n                            ref={tryAgainRef}\n                            onClick={handleTryAgain}\n                            data-testid=\"try-again-button\"\n                            type=\"button\"\n                        >\n                            <ErrorTextContainer>\n                                <ErrorIcon />\n                                <ErrorLabel>Error</ErrorLabel>\n                            </ErrorTextContainer>\n                            <TryAgainLabel>Try again?</TryAgainLabel>\n                        </ClickableErrorWrapper>\n                    );\n                case \"loading\":\n                    return (\n                        <LoadingWrapper>\n                            <Spinner />\n                            <LoadingLabel>Retrieving...</LoadingLabel>\n                        </LoadingWrapper>\n                    );\n                case \"success\":\n                default:\n                    return renderReadOnlyButton();\n            }\n        }\n\n        return (\n            <InputGroupWrapper\n                ref={inputRef}\n                data-testid={`${dataTestId || \"masked-input\"}${\n                    isMasked ? \"-masked\" : \"-unmasked\"\n                }`}\n                addon={{\n                    type: \"custom\",\n                    attributes: {\n                        children: renderIcon(),\n                    },\n                    position: \"right\",\n                }}\n                onFocus={!readOnly ? handleFocus : undefined}\n                onBlur={!readOnly ? handleBlur : undefined}\n                onClick={readOnly ? handleToggleMask : undefined}\n                onChange={handleChange}\n                value={getValue()}\n                readOnly={readOnly}\n                error={error}\n                $isDisabled={shouldDisableMasking()}\n                {...otherProps}\n            />\n        );\n    };\n\n    return <div aria-busy={loadState === \"loading\"}>{renderElement()}</div>;\n};\n\nexport const MaskedInput = React.forwardRef(Component);\n"],"names":["MaskedInput","React","forwardRef","_a","ref","value","readOnly","dataTestId","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","_jsx","EyeSlashIcon","iconUnmask","EyeIcon","iconActiveColor","maskIconActiveColor","iconInactiveColor","maskIconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain","otherProps","__rest","isEmptyReadOnlyState","isEmpty","isMasked","setIsMasked","useState","updatedValue","setUpdatedValue","internalId","SimpleIdGenerator","generate","valueId","_b","id","inputRef","useRef","tryAgainRef","readOnlyButtonRef","isMaskedRef","ariaLabelledBy","useImperativeHandle","current","useEffect","focus","handleFocus","event","toggleMasking","handleBlur","handleChange","target","toUpperCase","toLowerCase","handleTryAgain","handleIconMouseDown","preventDefault","handleToggleMask","nextMasked","mask","getValue","StringHelper","maskValue","shouldDisableMasking","toString","length","getValueDescription","getMaskedDescription","renderIcon","isDisabled","IconContainer","onMouseDown","undefined","onClick","$isDisabled","$inactiveColor","$activeColor","children","_jsxs","ClickableErrorWrapper","type","ErrorTextContainer","ErrorIcon","ErrorLabel","TryAgainLabel","LoadingWrapper","Spinner","LoadingLabel","isButtonDisabled","_Fragment","VisuallyHidden","ReadOnlyClickable","concatIds","ReadOnlyValueText","ReadOnlyIconContainer","renderReadOnlyButton","InputGroupWrapper","Object","assign","addon","attributes","position","renderElement"],"mappings":"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"}
+{"version":3,"file":"masked-input.js","sources":["../../src/masked-input/masked-input.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport clsx from \"clsx\";\nimport { isEmpty } from \"lodash\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { InputGroup } from \"../input-group\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId } from \"../util\";\nimport * as styles from \"./masked-input.styles\";\nimport type { MaskedInputProps } from \"./types\";\n\nconst Component = (\n    {\n        value,\n        readOnly,\n        \"data-testid\": dataTestId,\n        maskRange,\n        unmaskRange,\n        maskRegex,\n        maskTransformer,\n        iconMask = <EyeSlashIcon />,\n        iconUnmask = <EyeIcon />,\n        iconActiveColor: maskIconActiveColor,\n        iconInactiveColor: maskIconInactiveColor,\n        maskChar = \"•\",\n        error,\n        disableMask,\n        transformInput,\n        loadState,\n        onMask,\n        onUnmask,\n        onChange,\n        onFocus,\n        onBlur,\n        onTryAgain,\n        className,\n        ...otherProps\n    }: MaskedInputProps,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isEmptyReadOnlyState = readOnly && isEmpty(value);\n    const [isMasked, setIsMasked] = useState<boolean>(!disableMask);\n    const [updatedValue, setUpdatedValue] = useState<string>(value || \"\");\n    const internalId = useId();\n    const valueId = `${otherProps.id ?? internalId}-value`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const tryAgainRef = useRef<HTMLButtonElement>(null);\n    const readOnlyButtonRef = useRef<HTMLButtonElement>(null);\n    const iconContainerRef = useRef<HTMLDivElement>(null);\n    const isMaskedRef = useRef<boolean>(!disableMask);\n    const ariaLabelledBy = otherProps[\"aria-labelledby\"];\n\n    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);\n\n    useApplyStyle(iconContainerRef, {\n        [styles.tokens.iconContainer.inactiveColor]: maskIconInactiveColor,\n        [styles.tokens.iconContainer.activeColor]: maskIconActiveColor,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setUpdatedValue(value || \"\");\n    }, [value]);\n\n    useEffect(() => {\n        if (!readOnly) return;\n\n        if (loadState === \"fail\") {\n            tryAgainRef.current?.focus();\n        }\n\n        if (loadState === \"success\") {\n            readOnlyButtonRef.current?.focus();\n        }\n    }, [readOnly, loadState]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        toggleMasking(false);\n        onFocus?.(event);\n    };\n\n    const handleBlur = (event?: React.FocusEvent<HTMLInputElement>) => {\n        toggleMasking(true);\n        onBlur?.(event!);\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        let value = event.target.value;\n\n        switch (transformInput) {\n            case \"uppercase\":\n                value = value.toUpperCase();\n                break;\n            case \"lowercase\":\n                value = value.toLowerCase();\n                break;\n            default:\n                break;\n        }\n\n        setUpdatedValue(value);\n        event.target.value = value;\n        onChange?.(event);\n    };\n\n    const handleTryAgain = () => {\n        if (readOnly) {\n            onTryAgain?.();\n        }\n    };\n\n    const handleIconMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n        event.preventDefault();\n    };\n\n    const handleToggleMask = () => {\n        const nextMasked = !isMasked;\n\n        toggleMasking(nextMasked);\n\n        if (!nextMasked) {\n            inputRef.current?.focus();\n            return;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const toggleMasking = (mask: boolean) => {\n        if (isMaskedRef.current === mask) return;\n\n        isMaskedRef.current = mask;\n        setIsMasked(mask);\n\n        if (mask) {\n            onMask?.();\n        } else {\n            onUnmask?.();\n        }\n    };\n\n    const getValue = () => {\n        if (isEmptyReadOnlyState) {\n            return \"-\";\n        }\n\n        return isMasked && !disableMask\n            ? StringHelper.maskValue(updatedValue, {\n                  maskChar,\n                  maskRange,\n                  unmaskRange,\n                  maskRegex,\n                  maskTransformer,\n              })\n            : updatedValue;\n    };\n\n    const shouldDisableMasking = () =>\n        !updatedValue?.toString().length || disableMask;\n\n    const getValueDescription = () => {\n        if (isEmptyReadOnlyState) {\n            return \"-\";\n        }\n\n        if (isMasked && !disableMask) {\n            const desc = StringHelper.getMaskedDescription(\n                updatedValue,\n                \"masked\",\n                maskRange\n            );\n\n            return desc || \"Masked value\";\n        }\n\n        return updatedValue;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        if (isEmptyReadOnlyState) {\n            return <></>;\n        }\n\n        const isDisabled = shouldDisableMasking();\n\n        return (\n            <div\n                ref={iconContainerRef}\n                className={clsx(\n                    styles.iconContainer,\n                    isDisabled && styles.iconContainerDisabled\n                )}\n                data-testid={`icon-${isMasked ? \"masked\" : \"unmasked\"}`}\n                onMouseDown={!isDisabled ? handleIconMouseDown : undefined}\n                onClick={!isDisabled ? handleToggleMask : undefined}\n                aria-hidden=\"true\"\n            >\n                {isMasked ? iconUnmask : iconMask}\n            </div>\n        );\n    };\n\n    const renderReadOnlyButton = () => {\n        const isButtonDisabled = shouldDisableMasking() || isEmptyReadOnlyState;\n\n        return (\n            <>\n                <VisuallyHidden id={valueId}>\n                    {getValueDescription()}\n                </VisuallyHidden>\n                <button\n                    ref={readOnlyButtonRef}\n                    className={styles.readOnlyClickable}\n                    data-testid=\"masked-input-readonly-button\"\n                    onClick={!isButtonDisabled ? handleToggleMask : undefined}\n                    type=\"button\"\n                    aria-labelledby={concatIds(valueId, ariaLabelledBy)}\n                    aria-disabled={isButtonDisabled}\n                >\n                    <span className={styles.readOnlyValueText}>\n                        {getValue()}\n                    </span>\n                    {!isButtonDisabled && (\n                        <span className={styles.readOnlyIconContainer}>\n                            {isMasked ? (\n                                <EyeIcon data-testid=\"masked-icon\" />\n                            ) : (\n                                <EyeSlashIcon data-testid=\"unmasked-icon\" />\n                            )}\n                        </span>\n                    )}\n                </button>\n            </>\n        );\n    };\n\n    const renderElement = () => {\n        if (readOnly) {\n            switch (loadState) {\n                case \"fail\":\n                    return (\n                        <BasicButton\n                            ref={tryAgainRef}\n                            className={styles.clickableErrorWrapper}\n                            onClick={handleTryAgain}\n                            data-testid=\"try-again-button\"\n                            type=\"button\"\n                        >\n                            <span className={styles.errorTextContainer}>\n                                <ExclamationTriangleIcon\n                                    className={styles.errorIcon}\n                                />\n                                <span className={styles.errorLabel}>Error</span>\n                            </span>\n                            <span className={styles.tryAgainLabel}>\n                                Try again?\n                            </span>\n                        </BasicButton>\n                    );\n                case \"loading\":\n                    return (\n                        <div className={styles.loadingWrapper}>\n                            <ComponentLoadingSpinner\n                                className={styles.spinner}\n                            />\n                            <Typography.BodyBL className={styles.loadingLabel}>\n                                Retrieving...\n                            </Typography.BodyBL>\n                        </div>\n                    );\n                case \"success\":\n                default:\n                    return renderReadOnlyButton();\n            }\n        }\n\n        return (\n            <InputGroup\n                ref={inputRef}\n                className={clsx(styles.inputGroupWrapper, className)}\n                data-testid={`${dataTestId || \"masked-input\"}${\n                    isMasked ? \"-masked\" : \"-unmasked\"\n                }`}\n                addon={{\n                    type: \"custom\",\n                    attributes: {\n                        children: renderIcon(),\n                    },\n                    position: \"right\",\n                }}\n                onFocus={!readOnly ? handleFocus : undefined}\n                onBlur={!readOnly ? handleBlur : undefined}\n                onClick={readOnly ? handleToggleMask : undefined}\n                onChange={handleChange}\n                value={getValue()}\n                readOnly={readOnly}\n                error={error}\n                {...otherProps}\n            />\n        );\n    };\n\n    return <div aria-busy={loadState === \"loading\"}>{renderElement()}</div>;\n};\n\n// @catalog\n/**\n * A text input that masks sensitive values and allows toggling visibility.\n *\n * Use `MaskedInput` when collecting or displaying sensitive data such as\n * identity numbers or passwords.\n * @keywords field, form, input, mask, password, secure, sensitive\n */\nexport const MaskedInput = React.forwardRef(Component);\n"],"names":["MaskedInput","React","forwardRef","_a","ref","value","readOnly","dataTestId","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","_jsx","EyeSlashIcon","iconUnmask","EyeIcon","iconActiveColor","maskIconActiveColor","iconInactiveColor","maskIconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain","className","otherProps","__rest","isEmptyReadOnlyState","isEmpty","isMasked","setIsMasked","useState","updatedValue","setUpdatedValue","internalId","useId","valueId","_b","id","inputRef","useRef","tryAgainRef","readOnlyButtonRef","iconContainerRef","isMaskedRef","ariaLabelledBy","useImperativeHandle","current","useApplyStyle","styles.tokens","iconContainer","inactiveColor","activeColor","useEffect","focus","handleFocus","event","toggleMasking","handleBlur","handleChange","target","toUpperCase","toLowerCase","handleTryAgain","handleIconMouseDown","preventDefault","handleToggleMask","nextMasked","mask","getValue","StringHelper","maskValue","shouldDisableMasking","toString","length","getValueDescription","getMaskedDescription","renderIcon","isDisabled","clsx","styles.iconContainer","styles.iconContainerDisabled","onMouseDown","undefined","onClick","children","_jsxs","BasicButton","styles.clickableErrorWrapper","type","styles.errorTextContainer","ExclamationTriangleIcon","styles.errorIcon","styles.errorLabel","styles.tryAgainLabel","styles.loadingWrapper","ComponentLoadingSpinner","styles.spinner","Typography","BodyBL","styles.loadingLabel","isButtonDisabled","VisuallyHidden","styles.readOnlyClickable","concatIds","styles.readOnlyValueText","styles.readOnlyIconContainer","renderReadOnlyButton","InputGroup","Object","assign","styles.inputGroupWrapper","addon","attributes","position","renderElement"],"mappings":"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"}

package/masked-input/masked-input.styles.d.ts

@@ -0,0 +1,22 @@
+export declare const tokens: {
+    iconContainer: {
+        inactiveColor: string;
+        activeColor: string;
+    };
+};
+export declare const inputGroupWrapper: import("@linaria/core").LinariaClassName;
+export declare const inputGroupWrapperReadOnly: import("@linaria/core").LinariaClassName;
+export declare const inputGroupWrapperInputPointer: import("@linaria/core").LinariaClassName;
+export declare const iconContainer: import("@linaria/core").LinariaClassName;
+export declare const iconContainerDisabled: import("@linaria/core").LinariaClassName;
+export declare const loadingWrapper: import("@linaria/core").LinariaClassName;
+export declare const loadingLabel: import("@linaria/core").LinariaClassName;
+export declare const spinner: import("@linaria/core").LinariaClassName;
+export declare const tryAgainLabel: import("@linaria/core").LinariaClassName;
+export declare const errorTextContainer: import("@linaria/core").LinariaClassName;
+export declare const errorIcon: import("@linaria/core").LinariaClassName;
+export declare const errorLabel: import("@linaria/core").LinariaClassName;
+export declare const clickableErrorWrapper: import("@linaria/core").LinariaClassName;
+export declare const readOnlyClickable: import("@linaria/core").LinariaClassName;
+export declare const readOnlyValueText: import("@linaria/core").LinariaClassName;
+export declare const readOnlyIconContainer: import("@linaria/core").LinariaClassName;

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

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

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

@@ -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 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 type { MastheadProps } from "./types";
-export declare const Masthead: ({ stretch }: MastheadProps) => JSX.Element;
+/**
+ * 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"./sgds.css";import{useContext as t,useEffect as s}from"react";import{ThemeContext as d}from"styled-components";import{Wrapper as m}from"./masthead.style.js";const o=({stretch:o=!1})=>{const a=t(d),i="dark"===(null==a?void 0:a.colourMode);s((()=>{l()||p()}),[]),s((()=>{i?document.documentElement.classList.add(r):document.documentElement.classList.remove(r)}),[i]);const l=()=>document.getElementById(n),p=()=>{if(!document.getElementById(n)){const e=document.createElement("script");e.id=n,e.type="module",e.src=c,document.head.appendChild(e)}};return e(m,{dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"},$stretch:o})},n="lifesg-ds-masthead-script",c="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js",r="sgds-night-theme";export{o 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 r}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 o,wrapperStretch as i}from"./masthead.styles.js";const n=s((({stretch:s=!1})=>{const{mode:n}=r(),a="dark"===n;m((()=>{import("@govtechsg/sgds-web-component/components/Masthead/index.js")}),[]),m((()=>{a?document.documentElement.classList.add(d):document.documentElement.classList.remove(d)}),[a]);return e("div",{className:t(o,s&&i),dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"}})})),d="sgds-night-theme";export{n 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\";\n\nimport { useContext, useEffect } from \"react\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { Wrapper } from \"./masthead.style\";\nimport type { MastheadProps } from \"./types\";\n\nexport const Masthead = ({ 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\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","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":"2NASO,MAAMA,EAAW,EAAGC,WAAU,MACjC,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,EAO1EgB,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        import(\"@govtechsg/sgds-web-component/components/Masthead/index.js\");\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 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 SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","mode","useTheme","isDarkMode","useEffect","import","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","_jsx","className","clsx","styles.wrapper","styles.wrapperStretch","dangerouslySetInnerHTML","__html"],"mappings":"wsBAUA,MAwDaA,EAAWC,GAxDE,EAAGC,WAAU,MACnC,MAAMC,KAAEA,GAASC,IACXC,EAAsB,SAATF,EAKnBG,GAAU,KACNC,OAAO,6DAA6D,GACrE,IAEHD,GAAU,KAEFD,EACAG,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACP,IAoBJ,OACIS,SACIC,UAAWC,EAAKC,EAAgBf,GAAWgB,GAC3CC,wBAVG,CAAEC,OAAQ,oCAWf,IAiBJR,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