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

package/cjs/markup/markup.style.js

@@ -1,7 +1,2 @@
-"use strict";var t=require("styled-components"),e=require("../shared/html-content/html-content.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const n=o(t).default.div`
-    ${t=>e.applyHtmlContentStyle({textSize:t.$textSize})}
-    ${e=>e.$textColor&&t.css`
-            color: ${e.$textColor};
-        `}
-`;exports.Container=n;
+"use strict";require("./markup.style_1iu40x9.css");exports.baseMarkup="b2c8sfe",exports.sizedMarkup="stfuo83",exports.tokens={rootFontFamily:"--fds-internal-markup-root-fontFamily",rootFontVariant:"--fds-internal-markup-root-fontVariant",rootFontSize:"--fds-internal-markup-root-fontSize",rootFontWeight:"--fds-internal-markup-root-fontWeight",rootLineHeight:"--fds-internal-markup-root-lineHeight",rootLetterSpacing:"--fds-internal-markup-root-letterSpacing"};
 //# sourceMappingURL=markup.style.js.map

package/cjs/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":"4KAiBO,MAAMA,OAAYC,QAAOC,GAAwB;MACjDC,GAAUC,EAAAA,sBAAsB,CAAEC,SAAUF,EAAMG;MAClDH,GACCA,EAAMI,YACNC,KAAG;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":["rootFontFamily","rootFontVariant","rootFontSize","rootFontWeight","rootLineHeight","rootLetterSpacing"],"mappings":"4FAcuB,8BAkDC,yBA3DF,CAClBA,eAAgB,wCAChBC,gBAAiB,yCACjBC,aAAc,sCACdC,eAAgB,wCAChBC,eAAgB,wCAChBC,kBAAmB"}

package/cjs/markup/markup.style_1iu40x9.css

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

package/cjs/markup/markup.utils.js

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

package/cjs/markup/markup.utils.js.map

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

package/cjs/masked-input/masked-input.js

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

package/cjs/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\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/cjs/masked-input/masked-input.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./masked-input.styles_4i1qsy.css");exports.clickableErrorWrapper="c1jw7yzb",exports.errorIcon="e1roice1",exports.errorLabel="e1tg5b5m",exports.errorTextContainer="eimq00u",exports.iconContainer="ij8rwek",exports.iconContainerDisabled="i1q5e8sd",exports.inputGroupWrapper="ilvnzaw",exports.loadingLabel="l1o6dphh",exports.loadingWrapper="lsb4klr",exports.readOnlyClickable="r1svptpi",exports.readOnlyIconContainer="r1mk0cgh",exports.readOnlyValueText="r1dgmaf",exports.spinner="s1lksd2c",exports.tokens={iconContainer:{inactiveColor:"--fds-internal-maskedInput-iconContainer-inactiveColor",activeColor:"--fds-internal-maskedInput-iconContainer-activeColor"}},exports.tryAgainLabel="t12y77bq";
+//# sourceMappingURL=masked-input.styles.js.map

package/cjs/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":["iconContainer","inactiveColor","activeColor"],"mappings":"mHA+FkC,6BAXZ,8BAOC,sCAbQ,gCAjDL,wCAiBQ,qCAnCJ,+BAiDL,kCANE,oCAiEG,yCAkBI,qCAJJ,0BArEV,0BA5DE,CAClBA,cAAe,CACXC,cAAe,yDACfC,YAAa,+EAiEK"}

package/cjs/masked-input/masked-input.styles_4i1qsy.css

@@ -0,0 +1,16 @@
+.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);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}.c1jw7yzb:hover .t12y77bq,.c1jw7yzb:active .t12y77bq,.c1jw7yzb:focus .t12y77bq{color:var(--fds-colour-text-hover);}
+.r1svptpi{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);border:none;background:transparent;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;text-align:left;width:100%;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;min-height:3rem;}
+.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/cjs/masthead/masthead.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("./sgds.css");var t=require("react"),s=require("styled-components"),d=require("./masthead.style.js");const n="lifesg-ds-masthead-script",r="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js",c="sgds-night-theme";exports.Masthead=({stretch:o=!1})=>{const m=t.useContext(s.ThemeContext),a="dark"===(null==m?void 0:m.colourMode);t.useEffect((()=>{u()||i()}),[]),t.useEffect((()=>{a?document.documentElement.classList.add(c):document.documentElement.classList.remove(c)}),[a]);const u=()=>document.getElementById(n),i=()=>{if(!document.getElementById(n)){const e=document.createElement("script");e.id=n,e.type="module",e.src=r,document.head.appendChild(e)}};return e.jsx(d.Wrapper,{dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"},$stretch:o})};
+"use strict";var e=require("react/jsx-runtime");require("./sgds-day.css"),require("./sgds-night.css");var t=require("clsx"),s=require("react"),d=require("styled-components"),n=require("./masthead.styles.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=r(t);const a=s.memo((({stretch:t=!1})=>{const r=s.useContext(d.ThemeContext),a="dark"===(null==r?void 0:r.colourMode);s.useEffect((()=>{i()||l()}),[]),s.useEffect((()=>{a?document.documentElement.classList.add(u):document.documentElement.classList.remove(u)}),[a]);const i=()=>document.getElementById(o),l=()=>{if(!document.getElementById(o)){const e=document.createElement("script");e.id=o,e.type="module",e.src=m,document.head.appendChild(e)}};return e.jsx("div",{className:c.default(n.wrapper,t&&n.wrapperStretch),dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"}})})),o="lifesg-ds-masthead-script",m="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js",u="sgds-night-theme";exports.Masthead=a;
 //# sourceMappingURL=masthead.js.map

package/cjs/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":["SCRIPT_ID","SCRIPT_SRC","SGDS_THEME_NIGHT_CLASSNAME","stretch","theme","useContext","ThemeContext","isDarkMode","colourMode","useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","remove","getElementById","script","createElement","id","type","src","head","appendChild","_jsx","Wrapper","dangerouslySetInnerHTML","__html","$stretch"],"mappings":"4KASO,MAiEDA,EAAY,4BACZC,EACF,gGACEC,EAA6B,oCApEX,EAAGC,WAAU,MACjC,MAAMC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmC,UAAtBH,aAAK,EAALA,EAAOI,YAK1BC,EAAAA,WAAU,KACDC,KACDC,GACJ,GACD,IAEHF,EAAAA,WAAU,KAEFF,EACAK,SAASC,gBAAgBC,UAAUC,IAAIb,GAEvCU,SAASC,gBAAgBC,UAAUE,OAC/Bd,EAER,GACD,CAACK,IAKJ,MAAMG,EAAgB,IACXE,SAASK,eAAejB,GAG7BW,EAAY,KACd,IAAKC,SAASK,eAAejB,GAAY,CACrC,MAAMkB,EAASN,SAASO,cAAc,UACtCD,EAAOE,GAAKpB,EACZkB,EAAOG,KAAO,SACdH,EAAOI,IAAMrB,EAEbW,SAASW,KAAKC,YAAYN,EAC9B,GAkBJ,OACIO,EAAAA,IAACC,EAAAA,QAAO,CAACC,wBARF,CAAEC,OAAQ,mCAQgCC,SAAY1B,GAAW"}
+{"version":3,"file":"masthead.js","sources":["../../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\n\nimport clsx from \"clsx\";\nimport { memo, useContext, useEffect } from \"react\";\nimport { ThemeContext } from \"styled-components\";\n\nimport * as styles from \"./masthead.styles\";\nimport type { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n    const theme = useContext(ThemeContext);\n    const isDarkMode = theme?.colourMode === \"dark\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (!doAssetsExist()) {\n            addAssets();\n        }\n    }, []);\n\n    useEffect(() => {\n        // SGDS dark mode only takes effect when this class is set on the :root element\n        if (isDarkMode) {\n            document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n        } else {\n            document.documentElement.classList.remove(\n                SGDS_THEME_NIGHT_CLASSNAME\n            );\n        }\n    }, [isDarkMode]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const doAssetsExist = () => {\n        return document.getElementById(SCRIPT_ID);\n    };\n\n    const addAssets = () => {\n        if (!document.getElementById(SCRIPT_ID)) {\n            const script = document.createElement(\"script\");\n            script.id = SCRIPT_ID;\n            script.type = \"module\";\n            script.src = SCRIPT_SRC;\n\n            document.head.appendChild(script);\n        }\n    };\n\n    const createContent = () => {\n        /**\n         * Note: Had to use this method because we had to create a\n         * custom type to handle Web Components (refer to this guide\n         * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n         * But we are having troubles exporting the custom type definition\n         * via rollup\n         */\n        return { __html: \"<sgds-masthead></sgds-masthead>\" };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <div\n            className={clsx(styles.wrapper, stretch && styles.wrapperStretch)}\n            dangerouslySetInnerHTML={createContent()}\n        />\n    );\n};\n\nexport const Masthead = memo(MastheadComponent);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SCRIPT_ID = \"lifesg-ds-masthead-script\";\nconst SCRIPT_SRC =\n    \"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js\";\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","theme","useContext","ThemeContext","isDarkMode","colourMode","useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","getElementById","SCRIPT_ID","script","createElement","id","type","src","SCRIPT_SRC","head","appendChild","_jsx","className","clsx","styles.wrapper","styles.wrapperStretch","dangerouslySetInnerHTML","__html"],"mappings":"iUAUA,MAiEaA,EAAWC,EAAAA,MAjEE,EAAGC,WAAU,MACnC,MAAMC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmC,UAAtBH,aAAK,EAALA,EAAOI,YAK1BC,EAAAA,WAAU,KACDC,KACDC,GACJ,GACD,IAEHF,EAAAA,WAAU,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,aACIC,UAAWC,EAAAA,QAAKC,EAAAA,QAAgB5B,GAAW6B,kBAC3CC,wBAVG,CAAEC,OAAQ,oCAWf,IASJf,EAAY,4BACZM,EACF,gGACET,EAA6B"}

package/cjs/masthead/masthead.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./masthead.styles_1huzon9.css");exports.wrapper="wafydue",exports.wrapperStretch="wq9iwwi";
+//# sourceMappingURL=masthead.styles.js.map

package/cjs/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":[],"mappings":"8FAOoB,iCAqCO"}

package/cjs/masthead/masthead.styles_1huzon9.css

@@ -0,0 +1,2 @@
+.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);}