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

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

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

Files changed (2426) hide show

package/toggle/toggle.styles_1t5qrye.css ADDED Viewed

@@ -0,0 +1,38 @@
+.h1fyul7s{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}
+.tybgacj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-wrap:anywhere;width:100%;overflow:hidden;color:var(--fds-colour-text);}
+.tvkjim3{color:var(--fds-colour-text-selected);}
+.t1aku79x{color:var(--fds-colour-text-selected-disabled);}
+.c11szvws{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;min-width:10.375rem;border-radius:var(--fds-radius-sm);border-width:1px;border-style:solid;overflow:hidden;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background:var(--fds-colour-bg);}.c11szvws:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0;}
+.n12ofp2c{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.u1l0nsei{min-width:unset;}
+.c17z2k4k{border-color:var(--fds-colour-border-error);}
+.tfiow01{border:none;background:var(--fds-colour-bg-selected-disabled);}
+.td5xote{border:none;}
+.t15nuck4{border:none;background:var(--fds-colour-bg-selected);}
+.tnwn55u{border:none;}
+.t1graj5g{border-color:var(--fds-colour-border-error);}
+.t1qqpl3b{border-color:var(--fds-colour-border-selected-disabled);background:var(--fds-colour-bg-selected-disabled);}
+.t1l2ct9g{border-color:var(--fds-colour-border-disabled);background:var(--fds-colour-bg-disabled);}
+.t1tat3es{border-color:var(--fds-colour-border-selected);background:var(--fds-colour-bg-selected);}
+@media (pointer: fine){.t1nsq3eo:has(.h1fyul7s:hover){background:var(--fds-colour-bg-selected-hover);}.t1nsq3eo:has(.h1fyul7s:hover) .tybgacj{color:var(--fds-colour-text-selected-hover);}.t1nsq3eo:has(.h1fyul7s:hover) .wxufi5f{color:var(--fds-colour-icon-selected-hover);}}
+.t1cyflot{border-color:var(--fds-colour-border);}
+@media (pointer: fine){.txm5wyu:has(.h1fyul7s:hover){background:var(--fds-colour-bg-hover-subtle);}}
+.i14lgw6r{position:absolute;height:100%;width:100%;cursor:pointer;top:0;left:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:transparent;border:none;}
+.tovnc4j{cursor:not-allowed;}
+.iangfw6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.l1oixyvr{overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;overflow-wrap:break-word;--fds-internal-toggle-label-desktopLineClamp:initial;--fds-internal-toggle-label-tabletLineClamp:initial;--fds-internal-toggle-label-mobileLineClamp:initial;-webkit-line-clamp:var(--fds-internal-toggle-label-desktopLineClamp, none);}:where(body.fds-breakpoint-lg-max) .l1oixyvr{-webkit-line-clamp:var(--fds-internal-toggle-label-tabletLineClamp, none);}:where(body.fds-breakpoint-sm-max) .l1oixyvr{-webkit-line-clamp:var(--fds-internal-toggle-label-mobileLineClamp, none);}
+.t1elmp69{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);}
+.tv1hw4w{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-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.s17sf3sp{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);margin-top:0.5rem;z-index:1;pointer-events:none;}.s17sf3sp strong,.s17sf3sp b{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.i1l466bv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%;position:relative;padding:0.6875rem 1rem;}
+.ih3od2r{padding:0.6875rem 0rem 0.6875rem 1rem;}
+.r1izng22{color:var(--fds-colour-text-error);white-space:nowrap;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0.6875rem 1rem 0.6875rem 0.5rem;border:none;background:none;cursor:pointer;}
+.d194isif{color:var(--fds-colour-text-disabled);cursor:not-allowed;}
+.ehwglic{color:var(--fds-colour-text-primary);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-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);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:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;border:none;background-color:var(--fds-colour-bg);cursor:pointer;padding:0 1rem 0.6875rem 1rem;width:100%;}.ehwglic svg{width:1em;height:1em;margin-left:0.5rem;}
+.ejwzsce{padding-top:0.6875rem;}
+.e1q8ywpe{width:100%;color:var(--fds-colour-text-error);border:none;background:var(--fds-colour-bg);cursor:pointer;padding:0.6875rem 1rem 0.5rem 1rem;}
+.c1mf9nso{padding:0 1rem;padding-top:0.6875rem;padding-bottom:0.5rem;background-color:var(--fds-colour-bg);color:var(--fds-colour-text);}
+.c9t56r4{padding-bottom:0.6875rem;}
+.c1y0x62l{color:var(--fds-colour-text-disabled);}
+.c1gmwtb7{color:var(--fds-colour-text-error);}
+.aeqryui{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}

package/typography/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{BodyBL as i,HeadingSM as n,BodySM as d,BodyMD as o,LinkSM as L,BodyXS as a,HeadingXS as e,LinkMD as g,LinkBL as y,HeadingMD as B,LinkXS as H,HeadingLG as M,HeadingXL as S,HeadingXXL as X}from"./typography.js";const k={HeadingXXL:X,HeadingXL:S,HeadingLG:M,HeadingMD:B,HeadingSM:n,HeadingXS:e,BodyBL:i,BodyMD:o,BodySM:d,BodyXS:a,LinkBL:y,LinkMD:g,LinkSM:L,LinkXS:H};export{k as Typography};
+import{BodyMD as i,BodyBL as n,BodySM as d,BodyXS as o,LinkMD as L,LinkBL as a,HeadingMD as e,HeadingSM as g,LinkSM as y,LinkXS as B,HeadingXS as H,HeadingLG as M,HeadingXL as S,HeadingXXL as X}from"./typography.js";const k={HeadingXXL:X,HeadingXL:S,HeadingLG:M,HeadingMD:e,HeadingSM:g,HeadingXS:H,BodyBL:n,BodyMD:i,BodySM:d,BodyXS:o,LinkBL:a,LinkMD:L,LinkSM:y,LinkXS:B};export{k as Typography};
 //# sourceMappingURL=index.js.map

package/typography/typography.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t}from"react/jsx-runtime";import{ExternalIcon as i}from"@lifesg/react-icons/external";import s from"clsx";import a 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 n}from"../theme/utils/use-apply-styles.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as o}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{typographyBase as m,hyperlinkBase as l,noUnderline as d,underline as p,externalIcon as h,tokens as y,lineClamp as g,paragraph as c,displayInline as u,displayBlock as f}from"./typography.styles.js";import{typographySize as j,typographyWeight as x}from"./typography-text.styles.js";const b=e=>e||"regular",L=e=>j[e],N=e=>x[e],k=(e,r)=>r?c:e?u:f,S=(r,i,l)=>{const d=a.forwardRef((function(l,d){var{className:p,as:h,inline:c,maxLines:u,paragraph:f,weight:j}=l,x=e(l,["className","as","inline","maxLines","paragraph","weight"]);const S=b(j),B=a.useRef(null),v=o(B,d),w=((e,r,t)=>!!e&&(t||!r))(u,c,f);n(B,{[y.typographyBase.maxLines]:w?u:null});return t(c?"span":h||r,Object.assign({ref:v,className:s(m,L(i),N(S),k(c,f),w&&g,p)},x))}));return d.displayName=`Typography.${l}`,d},B=(e,r,t)=>S(e,r,t),v=B("h1","heading-xxl","HeadingXXL"),w=B("h2","heading-xl","HeadingXL"),H=B("h3","heading-lg","HeadingLG"),M=B("h4","heading-md","HeadingMD"),X=B("h5","heading-sm","HeadingSM"),D=B("h6","heading-xs","HeadingXS"),R=(e,r)=>S("p",e,r),O=R("body-baseline","BodyBL"),T=R("body-md","BodyMD"),$=R("body-sm","BodySM"),_=R("body-xs","BodyXS"),q=(n,o)=>{const y=a.forwardRef((function(a,o){var{weight:y,children:g,external:c,underlineStyle:u="underline",className:f}=a,j=e(a,["weight","children","external","underlineStyle","className"]);const x=b(y);return r("a",Object.assign({ref:o,className:s(m,l,L(n),N(x),"none"===u?d:p,f)},j,{children:[g,c&&t(i,{className:h})]}))}));return y.displayName=`Typography.${o}`,y},G=q("body-baseline","LinkBL"),z=q("body-md","LinkMD"),A=q("body-sm","LinkSM"),C=q("body-xs","LinkXS");export{O as BodyBL,T as BodyMD,$ as BodySM,_ as BodyXS,H as HeadingLG,M as HeadingMD,X as HeadingSM,w as HeadingXL,D as HeadingXS,v as HeadingXXL,G as LinkBL,z as LinkMD,A as LinkSM,C as LinkXS};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t}from"react/jsx-runtime";import{ExternalIcon as i}from"@lifesg/react-icons/external";import s from"clsx";import a 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 n}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as o}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{typographyBase as m,typographyBody as l,hyperlinkBase as d,noUnderline as p,underline as h,externalIcon as y,tokens as g,typographyHeader as c,lineClamp as u,paragraph as f,displayInline as j,displayBlock as x}from"./typography.styles.js";import{typographySize as b,typographyWeight as L}from"./typography-text.styles.js";const N=e=>e||"regular",k=e=>b[e],S=e=>L[e],B=(e,r)=>r?f:e?j:x,v=(r,i,d,p)=>{const h=a.forwardRef((function(d,h){var{className:y,as:f,inline:j,maxLines:x,paragraph:b,weight:L}=d,v=e(d,["className","as","inline","maxLines","paragraph","weight"]);const w=N(L),H=a.useRef(null),M=o(H,h),X=((e,r,t)=>!!e&&(t||!r))(x,j,b);n(H,{[g.typographyBase.maxLines]:X?x:null});return t(j?"span":f||r,Object.assign({ref:M,className:s(m,p?c:l,k(i),S(w),B(j,b),X&&u,y)},v))}));return h.displayName=`Typography.${d}`,h},w=(e,r,t)=>v(e,r,t,!0),H=w("h1","heading-xxl","HeadingXXL"),M=w("h2","heading-xl","HeadingXL"),X=w("h3","heading-lg","HeadingLG"),D=w("h4","heading-md","HeadingMD"),R=w("h5","heading-sm","HeadingSM"),q=w("h6","heading-xs","HeadingXS"),O=(e,r)=>v("p",e,r,!1),T=O("body-baseline","BodyBL"),$=O("body-md","BodyMD"),_=O("body-sm","BodySM"),G=O("body-xs","BodyXS"),z=(n,o)=>{const g=a.forwardRef((function(a,o){var{weight:g,children:c,external:u,underlineStyle:f="underline",className:j}=a,x=e(a,["weight","children","external","underlineStyle","className"]);const b=N(g);return r("a",Object.assign({ref:o,className:s(m,l,d,k(n),S(b),"none"===f?p:h,j)},x,{children:[c,u&&t(i,{className:y})]}))}));return g.displayName=`Typography.${o}`,g},A=z("body-baseline","LinkBL"),C=z("body-md","LinkMD"),E=z("body-sm","LinkSM"),F=z("body-xs","LinkXS");export{T as BodyBL,$ as BodyMD,_ as BodySM,G as BodyXS,X as HeadingLG,D as HeadingMD,R as HeadingSM,M as HeadingXL,q as HeadingXS,H as HeadingXXL,A as LinkBL,C as LinkMD,E as LinkSM,F as LinkXS};
 //# sourceMappingURL=typography.js.map

package/typography/typography.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"typography.js","sources":["../../src/typography/typography.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport type {\n TypographyLinkProps,\n TypographyProps,\n TypographySize,\n TypographyWeight,\n} from \"./types\";\nimport * as styles from \"./typography.styles\";\n\nconst getTextWeight = (\n weight: TypographyWeight \| undefined\n): TypographyWeight => weight \|\| \"regular\";\n\nconst getTypographyTextClassName = (textStyle: TypographySize) =>\n styles.typographySize[textStyle];\n\nconst getTypographyWeightClassName = (weight: TypographyWeight) =>\n styles.typographyWeight[weight];\n\nconst getTypographyDisplayClassName = (\n inline: boolean \| undefined,\n paragraph: boolean \| undefined\n) => {\n if (paragraph) {\n return styles.paragraph;\n }\n\n if (inline) {\n return styles.displayInline;\n }\n\n return styles.displayBlock;\n};\n\nconst shouldLineClamp = (\n maxLines: number \| undefined,\n inline: boolean \| undefined,\n paragraph: boolean \| undefined\n) => !!maxLines && (paragraph \|\| !inline);\n\nconst createTypographyText = <TTag extends React.ElementType>(\n tag: TTag,\n textStyle: TypographySize,\n displayName: string\n) => {\n const TypographyText = React.forwardRef<\n React.ComponentRef<TTag>,\n TypographyProps\n >(function TypographyTextComponent(\n {\n className,\n as: asProp,\n inline,\n maxLines,\n paragraph,\n weight,\n ...restProps\n },\n ref\n ) {\n const textWeight = getTextWeight(weight);\n const textRef = React.useRef<React.ComponentRef<TTag>>(null);\n const mergedRef = mergeRefs(textRef, ref);\n const shouldClamp = shouldLineClamp(maxLines, inline, paragraph);\n\n useApplyStyle(textRef as React.RefObject<HTMLElement \| null>, {\n [styles.tokens.typographyBase.maxLines]: shouldClamp\n ? maxLines\n : null,\n });\n\n const Element = inline ? \"span\" : asProp \|\| tag;\n\n return (\n <Element\n ref={mergedRef}\n className={clsx(\n styles.typographyBase,\n getTypographyTextClassName(textStyle),\n getTypographyWeightClassName(textWeight),\n getTypographyDisplayClassName(inline, paragraph),\n shouldClamp && styles.lineClamp,\n className\n )}\n {...restProps}\n />\n );\n });\n\n (\n TypographyText as NamedExoticComponent\n ).displayName = `Typography.${displayName}`;\n return TypographyText;\n};\n\nconst createHeading = (\n tag: \"h1\" \| \"h2\" \| \"h3\" \| \"h4\" \| \"h5\" \| \"h6\",\n textStyle: TypographySize,\n displayName: string\n) => {\n return createTypographyText(tag, textStyle, displayName);\n};\n\nexport const HeadingXXL = createHeading(\"h1\", \"heading-xxl\", \"HeadingXXL\");\nexport const HeadingXL = createHeading(\"h2\", \"heading-xl\", \"HeadingXL\");\nexport const HeadingLG = createHeading(\"h3\", \"heading-lg\", \"HeadingLG\");\nexport const HeadingMD = createHeading(\"h4\", \"heading-md\", \"HeadingMD\");\nexport const HeadingSM = createHeading(\"h5\", \"heading-sm\", \"HeadingSM\");\nexport const HeadingXS = createHeading(\"h6\", \"heading-xs\", \"HeadingXS\");\n\nconst createBody = (textStyle: TypographySize, displayName: string) => {\n return createTypographyText(\"p\", textStyle, displayName);\n};\n\nexport const BodyBL = createBody(\"body-baseline\", \"BodyBL\");\nexport const BodyMD = createBody(\"body-md\", \"BodyMD\");\nexport const BodySM = createBody(\"body-sm\", \"BodySM\");\nexport const BodyXS = createBody(\"body-xs\", \"BodyXS\");\n\nconst createLinkComponent = (\n textStyle: TypographySize,\n displayName: string\n) => {\n const Hyperlink = React.forwardRef<HTMLAnchorElement, TypographyLinkProps>(\n function TypographyLink(\n {\n weight,\n children,\n external,\n underlineStyle = \"underline\",\n className,\n ...props\n },\n ref\n ) {\n const textWeight = getTextWeight(weight);\n\n return (\n <a\n ref={ref}\n className={clsx(\n styles.typographyBase,\n styles.hyperlinkBase,\n getTypographyTextClassName(textStyle),\n getTypographyWeightClassName(textWeight),\n underlineStyle === \"none\"\n ? styles.noUnderline\n : styles.underline,\n className\n )}\n {...props}\n >\n {children}\n {external && (\n <ExternalIcon className={styles.externalIcon} />\n )}\n </a>\n );\n }\n );\n\n (\n Hyperlink as NamedExoticComponent\n ).displayName = `Typography.${displayName}`;\n return Hyperlink;\n};\n\nexport const LinkBL = createLinkComponent(\"body-baseline\", \"LinkBL\");\nexport const LinkMD = createLinkComponent(\"body-md\", \"LinkMD\");\nexport const LinkSM = createLinkComponent(\"body-sm\", \"LinkSM\");\nexport const LinkXS = createLinkComponent(\"body-xs\", \"LinkXS\");\n"],"names":["getTextWeight","weight","getTypographyTextClassName","textStyle","styles.typographySize","getTypographyWeightClassName","styles.typographyWeight","getTypographyDisplayClassName","inline","paragraph","styles.paragraph","styles.displayInline","styles.displayBlock","createTypographyText","tag","displayName","TypographyText","React","forwardRef","_a","ref","className","as","asProp","maxLines","restProps","__rest","textWeight","textRef","useRef","mergedRef","mergeRefs","shouldClamp","shouldLineClamp","useApplyStyle","styles.tokens","typographyBase","_jsx","Object","assign","clsx","styles.typographyBase","styles.lineClamp","createHeading","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","createBody","BodyBL","BodyMD","BodySM","BodyXS","createLinkComponent","Hyperlink","children","external","underlineStyle","props","_jsxs","styles.hyperlinkBase","styles.noUnderline","styles.underline","ExternalIcon","styles.externalIcon","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"~~8+BAeA~~,MAAMA,EACFC,GACmBA,GAAU,UAE3BC,EAA8BC,GAChCC,EAAsBD,GAEpBE,EAAgCJ,GAClCK,EAAwBL,GAEtBM,EAAgC,CAClCC,EACAC,IAEIA,EACOC,EAGPF,EACOG,EAGJC,EASLC,EAAuB,CACzBC,EACAX,EACAY,KAEA,MAAMC,EAAiBC,EAAMC,YAG3B,SACEC,EASAC,GATA,IAAAC,UACIA,EACAC,GAAIC,~~EAAMf~~,OACVA,~~EAAMgB~~,SACNA,~~EAAQf~~,UACRA,EAASR,OACTA,~~GAAMkB~~,EACHM,EAASC,EAAAP,EAPhB,6DAWA,MAAMQ,~~EAAa3B~~,EAAcC,~~GAC3B2B~~,EAAUX,EAAMY,OAAiC,MACjDC,EAAYC,EAAUH,EAASR,GAC/BY,~~EA7BU~~,EACpBR,~~EACAhB~~,EACAC,~~MACGe~~,~~IAAaf~~,IAAcD,~~GAyBNyB~~,CAAgBT,~~EAAUhB~~,EAAQC,~~GAEtDyB~~,EAAcN,EAAgD,CAC1D,CAACO,EAAcC,eAAeZ,UAAWQ,EACnCR,EACA,OAKV,OACIa,~~EAHY7B~~,EAAS,~~OAASe~~,~~GAAUT~~,~~EAGhCwB~~,OAAAC,OAAA,CACJnB,IAAKU,EACLT,UAAWmB,EACPC,~~EACAvC~~,EAA2BC,GAC3BE,~~EAA6BsB~~,~~GAC7BpB~~,EAA8BC,EAAQC,~~GACtCuB~~,~~GAAeU~~,~~EACfrB~~,IAEAI,GAGhB,IAKA,OAFIT,~~EACFD~~,YAAc,cAAcA,~~IACvBC~~,CAAc,~~EAGnB2B~~,EAAgB,~~CAClB7B~~,EACAX,EACAY,IAEOF,EAAqBC,EAAKX,EAAWY,~~GAGnC6B~~,EAAaD,EAAc,KAAM,cAAe,cAChDE,EAAYF,EAAc,KAAM,aAAc,aAC9CG,EAAYH,EAAc,KAAM,aAAc,aAC9CI,EAAYJ,EAAc,KAAM,aAAc,aAC9CK,EAAYL,EAAc,KAAM,aAAc,aAC9CM,EAAYN,EAAc,KAAM,aAAc,aAErDO,EAAa,~~CAAC/C~~,EAA2BY,IACpCF,EAAqB,IAAKV,EAAWY,~~GAGnCoC~~,EAASD,EAAW,gBAAiB,UACrCE,EAASF,EAAW,UAAW,UAC/BG,EAASH,EAAW,UAAW,UAC/BI,EAASJ,EAAW,UAAW,UAEtCK,EAAsB,~~CACxBpD~~,EACAY,KAEA,~~MAAMyC~~,~~EAAYvC~~,EAAMC,YACpB,SACIC,EAQAC,GARA,~~IAAAnB~~,OACIA,~~EAAMwD~~,SACNA,EAAQC,SACRA,EAAQC,eACRA,EAAiB,~~YAAWtC~~,UAC5BA,GAASF,~~EACNyC~~,~~EAAKlC~~,EAAAP,EANZ,+DAUA,MAAMQ,~~EAAa3B~~,EAAcC,GAEjC,~~OACI4D~~,EAAA,~~IAAAvB~~,OAAAC,OAAA,CACInB,IAAKA,EACLC,UAAWmB,EACPC,EACAqB,~~EACA5D~~,EAA2BC,GAC3BE,~~EAA6BsB~~,GACV,~~SAAnBgC~~,EACMI,EACAC,~~EACN3C~~,~~IAEAuC~~,EAAK,CAAAH,SAAA,CAERA,EACAC,~~GACGrB~~,~~EAAC4B~~,EAAY,~~CAAC5C~~,~~UAAW6C~~,OAIzC,IAMJ,OAFIV,~~EACFzC~~,YAAc,cAAcA,~~IACvByC~~,CAAS,EAGPW,EAASZ,EAAoB,gBAAiB,UAC9Ca,EAASb,EAAoB,UAAW,UACxCc,EAASd,EAAoB,UAAW,UACxCe,EAASf,EAAoB,UAAW"}
1	+ {"version":3,"file":"typography.js","sources":["../../src/typography/typography.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport type {\n TypographyLinkProps,\n TypographyProps,\n TypographySize,\n TypographyWeight,\n} from \"./types\";\nimport * as styles from \"./typography.styles\";\n\nconst getTextWeight = (\n weight: TypographyWeight \| undefined\n): TypographyWeight => weight \|\| \"regular\";\n\nconst getTypographyTextClassName = (textStyle: TypographySize) =>\n styles.typographySize[textStyle];\n\nconst getTypographyWeightClassName = (weight: TypographyWeight) =>\n styles.typographyWeight[weight];\n\nconst getTypographyDisplayClassName = (\n inline: boolean \| undefined,\n paragraph: boolean \| undefined\n) => {\n if (paragraph) {\n return styles.paragraph;\n }\n\n if (inline) {\n return styles.displayInline;\n }\n\n return styles.displayBlock;\n};\n\nconst shouldLineClamp = (\n maxLines: number \| undefined,\n inline: boolean \| undefined,\n paragraph: boolean \| undefined\n) => !!maxLines && (paragraph \|\| !inline);\n\nconst createTypographyText = <TTag extends React.ElementType>(\n tag: TTag,\n textStyle: TypographySize,\n displayName: string,\n isHeading: boolean\n) => {\n const TypographyText = React.forwardRef<\n React.ComponentRef<TTag>,\n TypographyProps\n >(function TypographyTextComponent(\n {\n className,\n as: asProp,\n inline,\n maxLines,\n paragraph,\n weight,\n ...restProps\n },\n ref\n ) {\n const textWeight = getTextWeight(weight);\n const textRef = React.useRef<React.ComponentRef<TTag>>(null);\n const mergedRef = mergeRefs(textRef, ref);\n const shouldClamp = shouldLineClamp(maxLines, inline, paragraph);\n\n useApplyStyle(textRef as React.RefObject<HTMLElement \| null>, {\n [styles.tokens.typographyBase.maxLines]: shouldClamp\n ? maxLines\n : null,\n });\n\n const Element = inline ? \"span\" : asProp \|\| tag;\n\n return (\n <Element\n ref={mergedRef}\n className={clsx(\n styles.typographyBase,\n isHeading ? styles.typographyHeader : styles.typographyBody,\n getTypographyTextClassName(textStyle),\n getTypographyWeightClassName(textWeight),\n getTypographyDisplayClassName(inline, paragraph),\n shouldClamp && styles.lineClamp,\n className\n )}\n {...restProps}\n />\n );\n });\n\n (\n TypographyText as NamedExoticComponent\n ).displayName = `Typography.${displayName}`;\n return TypographyText;\n};\n\nconst createHeading = (\n tag: \"h1\" \| \"h2\" \| \"h3\" \| \"h4\" \| \"h5\" \| \"h6\",\n textStyle: TypographySize,\n displayName: string\n) => {\n return createTypographyText(tag, textStyle, displayName, true);\n};\n\nexport const HeadingXXL = createHeading(\"h1\", \"heading-xxl\", \"HeadingXXL\");\nexport const HeadingXL = createHeading(\"h2\", \"heading-xl\", \"HeadingXL\");\nexport const HeadingLG = createHeading(\"h3\", \"heading-lg\", \"HeadingLG\");\nexport const HeadingMD = createHeading(\"h4\", \"heading-md\", \"HeadingMD\");\nexport const HeadingSM = createHeading(\"h5\", \"heading-sm\", \"HeadingSM\");\nexport const HeadingXS = createHeading(\"h6\", \"heading-xs\", \"HeadingXS\");\n\nconst createBody = (textStyle: TypographySize, displayName: string) => {\n return createTypographyText(\"p\", textStyle, displayName, false);\n};\n\nexport const BodyBL = createBody(\"body-baseline\", \"BodyBL\");\nexport const BodyMD = createBody(\"body-md\", \"BodyMD\");\nexport const BodySM = createBody(\"body-sm\", \"BodySM\");\nexport const BodyXS = createBody(\"body-xs\", \"BodyXS\");\n\nconst createLinkComponent = (\n textStyle: TypographySize,\n displayName: string\n) => {\n const Hyperlink = React.forwardRef<HTMLAnchorElement, TypographyLinkProps>(\n function TypographyLink(\n {\n weight,\n children,\n external,\n underlineStyle = \"underline\",\n className,\n ...props\n },\n ref\n ) {\n const textWeight = getTextWeight(weight);\n\n return (\n <a\n ref={ref}\n className={clsx(\n styles.typographyBase,\n styles.typographyBody,\n styles.hyperlinkBase,\n getTypographyTextClassName(textStyle),\n getTypographyWeightClassName(textWeight),\n underlineStyle === \"none\"\n ? styles.noUnderline\n : styles.underline,\n className\n )}\n {...props}\n >\n {children}\n {external && (\n <ExternalIcon className={styles.externalIcon} />\n )}\n </a>\n );\n }\n );\n\n (\n Hyperlink as NamedExoticComponent\n ).displayName = `Typography.${displayName}`;\n return Hyperlink;\n};\n\nexport const LinkBL = createLinkComponent(\"body-baseline\", \"LinkBL\");\nexport const LinkMD = createLinkComponent(\"body-md\", \"LinkMD\");\nexport const LinkSM = createLinkComponent(\"body-sm\", \"LinkSM\");\nexport const LinkXS = createLinkComponent(\"body-xs\", \"LinkXS\");\n"],"names":["getTextWeight","weight","getTypographyTextClassName","textStyle","styles.typographySize","getTypographyWeightClassName","styles.typographyWeight","getTypographyDisplayClassName","inline","paragraph","styles.paragraph","styles.displayInline","styles.displayBlock","createTypographyText","tag","displayName","isHeading","TypographyText","React","forwardRef","_a","ref","className","as","asProp","maxLines","restProps","__rest","textWeight","textRef","useRef","mergedRef","mergeRefs","shouldClamp","shouldLineClamp","useApplyStyle","styles.tokens","typographyBase","_jsx","Object","assign","clsx","styles.typographyBase","styles.typographyHeader","styles.typographyBody","styles.lineClamp","createHeading","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","createBody","BodyBL","BodyMD","BodySM","BodyXS","createLinkComponent","Hyperlink","children","external","underlineStyle","props","_jsxs","styles.hyperlinkBase","styles.noUnderline","styles.underline","ExternalIcon","styles.externalIcon","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"kkCAeA,MAAMA,EACFC,GACmBA,GAAU,UAE3BC,EAA8BC,GAChCC,EAAsBD,GAEpBE,EAAgCJ,GAClCK,EAAwBL,GAEtBM,EAAgC,CAClCC,EACAC,IAEIA,EACOC,EAGPF,EACOG,EAGJC,EASLC,EAAuB,CACzBC,EACAX,EACAY,EACAC,KAEA,MAAMC,EAAiBC,EAAMC,YAG3B,SACEC,EASAC,GATA,IAAAC,UACIA,EACAC,GAAIC,EAAMhB,OACVA,EAAMiB,SACNA,EAAQhB,UACRA,EAASR,OACTA,GAAMmB,EACHM,EAASC,EAAAP,EAPhB,6DAWA,MAAMQ,EAAa5B,EAAcC,GAC3B4B,EAAUX,EAAMY,OAAiC,MACjDC,EAAYC,EAAUH,EAASR,GAC/BY,EA9BU,EACpBR,EACAjB,EACAC,MACGgB,IAAahB,IAAcD,GA0BN0B,CAAgBT,EAAUjB,EAAQC,GAEtD0B,EAAcN,EAAgD,CAC1D,CAACO,EAAcC,eAAeZ,UAAWQ,EACnCR,EACA,OAKV,OACIa,EAHY9B,EAAS,OAASgB,GAAUV,EAGhCyB,OAAAC,OAAA,CACJnB,IAAKU,EACLT,UAAWmB,EACPC,EACA1B,EAAY2B,EAA0BC,EACtC1C,EAA2BC,GAC3BE,EAA6BuB,GAC7BrB,EAA8BC,EAAQC,GACtCwB,GAAeY,EACfvB,IAEAI,GAGhB,IAKA,OAFIT,EACFF,YAAc,cAAcA,IACvBE,CAAc,EAGnB6B,EAAgB,CAClBhC,EACAX,EACAY,IAEOF,EAAqBC,EAAKX,EAAWY,GAAa,GAGhDgC,EAAaD,EAAc,KAAM,cAAe,cAChDE,EAAYF,EAAc,KAAM,aAAc,aAC9CG,EAAYH,EAAc,KAAM,aAAc,aAC9CI,EAAYJ,EAAc,KAAM,aAAc,aAC9CK,EAAYL,EAAc,KAAM,aAAc,aAC9CM,EAAYN,EAAc,KAAM,aAAc,aAErDO,EAAa,CAAClD,EAA2BY,IACpCF,EAAqB,IAAKV,EAAWY,GAAa,GAGhDuC,EAASD,EAAW,gBAAiB,UACrCE,EAASF,EAAW,UAAW,UAC/BG,EAASH,EAAW,UAAW,UAC/BI,EAASJ,EAAW,UAAW,UAEtCK,EAAsB,CACxBvD,EACAY,KAEA,MAAM4C,EAAYzC,EAAMC,YACpB,SACIC,EAQAC,GARA,IAAApB,OACIA,EAAM2D,SACNA,EAAQC,SACRA,EAAQC,eACRA,EAAiB,YAAWxC,UAC5BA,GAASF,EACN2C,EAAKpC,EAAAP,EANZ,+DAUA,MAAMQ,EAAa5B,EAAcC,GAEjC,OACI+D,EAAA,IAAAzB,OAAAC,OAAA,CACInB,IAAKA,EACLC,UAAWmB,EACPC,EACAE,EACAqB,EACA/D,EAA2BC,GAC3BE,EAA6BuB,GACV,SAAnBkC,EACMI,EACAC,EACN7C,IAEAyC,EAAK,CAAAH,SAAA,CAERA,EACAC,GACGvB,EAAC8B,EAAY,CAAC9C,UAAW+C,OAIzC,IAMJ,OAFIV,EACF5C,YAAc,cAAcA,IACvB4C,CAAS,EAGPW,EAASZ,EAAoB,gBAAiB,UAC9Ca,EAASb,EAAoB,UAAW,UACxCc,EAASd,EAAoB,UAAW,UACxCe,EAASf,EAAoB,UAAW"}

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

@@ -5,6 +5,8 @@ export declare const tokens: {
     };
 };
 export declare const typographyBase: import("@linaria/core").LinariaClassName;
+export declare const typographyHeader: import("@linaria/core").LinariaClassName;
+export declare const typographyBody: import("@linaria/core").LinariaClassName;
 export declare const displayInline: import("@linaria/core").LinariaClassName;
 export declare const displayBlock: import("@linaria/core").LinariaClassName;
 export declare const paragraph: import("@linaria/core").LinariaClassName;

package/typography/typography.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./typography-text.styles_1734x2k.css";import"./typography.styles_1jqils.css";const p={typographyBase:{maxLines:"--fds-internal-typography-base-maxLines"}},s="ts2ljtd",t="du0nvfw",y="d1ruq6ql",a="p1cfdq56",o="l4n1hjq",r="h1ydob6f",e="u1w2xa0l",h="nspw24h",l="e3g791q";export{y as displayBlock,t as displayInline,l as externalIcon,r as hyperlinkBase,o as lineClamp,h as noUnderline,a as paragraph,p as tokens,s as typographyBase,e as underline};
+import"./typography-text.styles_1734x2k.css";import"./typography.styles_1155j4c.css";const t={typographyBase:{maxLines:"--fds-internal-typography-base-maxLines"}},p="ts2ljtd",s="tu0nvfw",y="t1ruq6ql",a="d1cfdq56",o="d4n1hjq",r="p1ydob6f",e="l1w2xa0l",h="hspw24h",l="u3g791q",n="nlbpwo0",_="e1f7dy7t";export{o as displayBlock,a as displayInline,_ as externalIcon,h as hyperlinkBase,e as lineClamp,n as noUnderline,r as paragraph,t as tokens,p as typographyBase,y as typographyBody,s as typographyHeader,l as underline};
 //# sourceMappingURL=typography.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"typography.styles.js","sources":["../../src/typography/typography.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampDynamicCss } from \"../shared/styles\";\nimport { Colour, Font } from \"../theme\";\n\nexport { typographySize, typographyWeight } from \"./typography-text.styles\";\n\nexport const tokens = {\n typographyBase: {\n maxLines: \"--fds-internal-typography-base-maxLines\",\n },\n} as const;\n\nexport const typographyBase = css`\n ${tokens.typographyBase.maxLines}: initial;\n font-~~family~~: ${Font.Spec[\"font-~~family~~\"]};\n font-~~variant~~: ${Font.Spec[\"font-~~variant~~\"]};\n ~~color~~: ${~~Colour~~.~~text~~};\n`;\n\nexport const displayInline = css`\n display: inline;\n margin-bottom: 0;\n`;\n\nexport const displayBlock = css`\n display: block;\n margin-bottom: 0;\n`;\n\nexport const paragraph = css`\n display: block;\n margin-bottom: 1.05em;\n`;\n\nexport const lineClamp = css`\n ${lineClampDynamicCss(tokens.typographyBase.maxLines)}\n`;\n\nexport const hyperlinkBase = css`\n color: ${Colour.hyperlink};\n\n &:hover,\n &:active,\n &:focus {\n color: ${Colour[\"text-hover\"]};\n }\n`;\n\nexport const underline = css`\n text-decoration: underline;\n`;\n\nexport const noUnderline = css`\n text-decoration: none;\n`;\n\nexport const externalIcon = css`\n height: 1lh;\n width: 1em;\n margin-left: 0.4em;\n vertical-align: middle;\n`;\n"],"names":["tokens","typographyBase","maxLines","displayInline","displayBlock","paragraph","lineClamp","hyperlinkBase","underline","noUnderline","externalIcon"],"mappings":"~~wIAOO~~,MAAMA,EAAS,CAClBC,eAAgB,CACZC,SAAU,4CAILD,EAAc,~~UAOdE~~,EAAa,~~UAKbC~~,EAAY,~~WAKZC~~,EAAS,WAKTC,EAAS,~~UAITC~~,EAAa,~~WAUbC~~,EAAS,~~WAITC~~,EAAW,UAIXC,EAAY"}
1	+ {"version":3,"file":"typography.styles.js","sources":["../../src/typography/typography.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampDynamicCss } from \"../shared/styles\";\nimport { Colour, Font } from \"../theme\";\n\nexport { typographySize, typographyWeight } from \"./typography-text.styles\";\n\nexport const tokens = {\n typographyBase: {\n maxLines: \"--fds-internal-typography-base-maxLines\",\n },\n} as const;\n\nexport const typographyBase = css`\n ${tokens.typographyBase.maxLines}: initial;\n font-variant: ${Font.Spec[\"font-variant\"]};\n color: ${Colour.text};\n`;\n\nexport const typographyHeader = css`\n font-family: ${Font.Spec[\"font-family-heading\"]};\n`;\n\nexport const typographyBody = css`\n font-family: ${Font.Spec[\"font-family-body\"]};\n`;\n\nexport const displayInline = css`\n display: inline;\n margin-bottom: 0;\n`;\n\nexport const displayBlock = css`\n display: block;\n margin-bottom: 0;\n`;\n\nexport const paragraph = css`\n display: block;\n margin-bottom: 1.05em;\n`;\n\nexport const lineClamp = css`\n ${lineClampDynamicCss(tokens.typographyBase.maxLines)}\n`;\n\nexport const hyperlinkBase = css`\n color: ${Colour.hyperlink};\n\n &:hover,\n &:active,\n &:focus {\n color: ${Colour[\"text-hover\"]};\n }\n`;\n\nexport const underline = css`\n text-decoration: underline;\n`;\n\nexport const noUnderline = css`\n text-decoration: none;\n`;\n\nexport const externalIcon = css`\n height: 1lh;\n width: 1em;\n margin-left: 0.4em;\n vertical-align: middle;\n`;\n"],"names":["tokens","typographyBase","maxLines","typographyHeader","typographyBody","displayInline","displayBlock","paragraph","lineClamp","hyperlinkBase","underline","noUnderline","externalIcon"],"mappings":"yIAOO,MAAMA,EAAS,CAClBC,eAAgB,CACZC,SAAU,4CAILD,EAAc,UAMdE,EAAgB,UAIhBC,EAAc,WAIdC,EAAa,WAKbC,EAAY,UAKZC,EAAS,WAKTC,EAAS,WAITC,EAAa,UAUbC,EAAS,UAITC,EAAW,UAIXC,EAAY"}

package/typography/typography.styles_1155j4c.css ADDED Viewed

@@ -0,0 +1,11 @@
+.ts2ljtd{--fds-internal-typography-base-maxLines:initial;font-variant:var(--fds-font-variant);color:var(--fds-colour-text);}
+.tu0nvfw{font-family:var(--fds-font-family-heading);}
+.t1ruq6ql{font-family:var(--fds-font-family-body);}
+.d1cfdq56{display:inline;margin-bottom:0;}
+.d4n1hjq{display:block;margin-bottom:0;}
+.p1ydob6f{display:block;margin-bottom:1.05em;}
+.l1w2xa0l{--fds-internal-typography-base-maxLines:initial;display:-webkit-box;-webkit-line-clamp:var(--fds-internal-typography-base-maxLines);-webkit-box-orient:vertical;overflow:hidden;}
+.hspw24h{color:var(--fds-colour-hyperlink);}.hspw24h:hover,.hspw24h:active,.hspw24h:focus{color:var(--fds-colour-text-hover);}
+.u3g791q{-webkit-text-decoration:underline;text-decoration:underline;}
+.nlbpwo0{-webkit-text-decoration:none;text-decoration:none;}
+.e1f7dy7t{height:1lh;width:1em;margin-left:0.4em;vertical-align:middle;}

package/uneditable-section/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 export * from "./types";
-export declare const UneditableSection: (({ items, title, description, topSection, bottomSection, children, background, stretch, fullWidth, onMask, onUnmask, onTryAgain, ...otherProps }: import("./types").UneditableSectionProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const UneditableSection: (({ items, title, description, topSection, bottomSection, children, background, stretch, fullWidth, onMask, onUnmask, onTryAgain, className, ...otherProps }: import("./types").UneditableSectionProps) => import("react/jsx-runtime").JSX.Element) & {
     ItemSection: (props: import("./types").UneditableSectionItemSectionProps & import("react").RefAttributes<HTMLUListElement>) => React.ReactElement | null;
     Item: ({ label, value, displayWidth, maskState, maskLoadingState, maskChar, maskRange, unmaskRange, maskRegex, disableMaskUnmask, alert, maskTransformer, onMask, onUnmask, onTryAgain, fullWidth, }: import("./section-item").UneditableSectionItemComponentProps) => import("react/jsx-runtime").JSX.Element;
 };

package/uneditable-section/item-section.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 import React from "react";
 import type { UneditableSectionItemSectionProps } from "./types";
-export declare const Component: ({ stretch, ...otherProps }: UneditableSectionItemSectionProps, ref: React.Ref<HTMLUListElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Component: ({ stretch, className, ...otherProps }: UneditableSectionItemSectionProps, ref: React.Ref<HTMLUListElement>) => import("react/jsx-runtime").JSX.Element;
 export declare const UneditableItemSection: (props: UneditableSectionItemSectionProps & React.RefAttributes<HTMLUListElement>) => React.ReactElement | null;

package/uneditable-section/item-section.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import e from"react";import{GridUl as s}from"./uneditable-section.styles.js";const o=(e,o)=>{var{stretch:i}=e,m=r(e,["stretch"]);return t(s,Object.assign({ref:o,$stretch:i},m))},i=e.forwardRef(o);export{o as Component,i as UneditableItemSection};
+import{__rest as r}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import s from"clsx";import e from"react";import{gridUl as m,columnWidthStretch as o}from"./uneditable-section.styles.js";const a=(e,a)=>{var{stretch:c,className:i}=e,l=r(e,["stretch","className"]);return t("ul",Object.assign({ref:a,className:s(m,c&&o,i)},l))},c=e.forwardRef(a);export{a as Component,c as UneditableItemSection};
 //# sourceMappingURL=item-section.js.map

package/uneditable-section/item-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"item-section.js","sources":["../../src/uneditable-section/item-section.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { UneditableSectionItemSectionProps } from \"./types\";\nimport { ~~GridUl~~ } from \"./uneditable-section.styles\";\n\nexport const Component = (\n { stretch, ...otherProps }: UneditableSectionItemSectionProps,\n ref: React.Ref<HTMLUListElement>\n) => {\n return <~~GridUl~~ ref={ref} ~~$stretch~~={stretch} {...otherProps} ~~/>;\~~n};\n\nexport const UneditableItemSection = React.forwardRef(Component);\n"],"names":["Component","_a","ref","stretch","otherProps","__rest","_jsx","~~GridUl~~","~~Object~~","~~assign~~","~~$stretch~~","UneditableItemSection","React","forwardRef"],"mappings":"~~0KAKaA~~,EAAY,CACrBC,EACAC,~~KADA~~,~~IAAAC,~~QAAEA,~~GAAOF~~,~~EAAKG~~,EAAUC,~~EAAAJ~~,~~EAAxB~~,~~aAGA~~,~~OAAOK~~,~~EAACC~~,~~EAAMC~~,OAAAC,OAAA,~~CAACP~~,IAAKA,~~EAAGQ~~,~~SAAYP~~,~~GAAaC~~,~~GAAc~~,~~EAGrDO~~,EAAwBC,EAAMC,~~WAAWb~~"}
1	+ {"version":3,"file":"item-section.js","sources":["../../src/uneditable-section/item-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport type { UneditableSectionItemSectionProps } from \"./types\";\nimport * as styles from \"./uneditable-section.styles\";\n\nexport const Component = (\n { stretch, className, ...otherProps }: UneditableSectionItemSectionProps,\n ref: React.Ref<HTMLUListElement>\n) => {\n return (\n <ul\n ref={ref}\n className={clsx(\n styles.gridUl,\n stretch && styles.columnWidthStretch,\n className\n )}\n {...otherProps}\n />\n );\n};\n\nexport const UneditableItemSection = React.forwardRef(Component);\n"],"names":["Component","_a","ref","stretch","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.gridUl","styles.columnWidthStretch","UneditableItemSection","React","forwardRef"],"mappings":"sNAMaA,EAAY,CACrBC,EACAC,SADAC,QAAEA,EAAOC,UAAEA,GAASH,EAAKI,EAAUC,EAAAL,EAAnC,yBAGA,OACIM,EAAA,KAAAC,OAAAC,OAAA,CACIP,IAAKA,EACLE,UAAWM,EACPC,EACAR,GAAWS,EACXR,IAEAC,GACN,EAIGQ,EAAwBC,EAAMC,WAAWf"}

package/uneditable-section/section-item.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as a,Fragment as i}from"react/jsx-runtime";import{EyeIcon as r}from"@lifesg/react-icons/eye";import{EyeSlashIcon as s}from"@lifesg/react-icons/eye-slash";import{useState as t,useEffect as n}from"react";import{FormLabel as l}from"../form/form-label.js";import{VisuallyHidden as m}from"../shared/accessibility/index.js";import{Typography as o}from"../typography/index.js";import{StringHelper as d}from"../util/string-helper.js";import{Container as c,StyledAlert as k,Clickable as h,IconContainer as f,Spinner as p,LoadingLabel as g,ErrorIcon as u,ErrorLabel as y,TryAgainLabel as b}from"./section-item.styles.js";const j=({label:j,value:R,displayWidth:x="full",maskState:T,maskLoadingState:B,maskChar:$="•",maskRange:v,unmaskRange:w,maskRegex:C,disableMaskUnmask:L,alert:M,maskTransformer:S,onMask:W,onUnmask:D,onTryAgain:U,fullWidth:z})=>{const[A,E]=t(T);n((()=>{E(T)}),[T]);const H=()=>{switch("fail"===B&&U&&U(),A){case"masked":D&&D(),E("unmasked");break;case"unmasked":W&&W(),E("masked")}},O=()=>"string"!=typeof R?R:"masked"===A?d.maskValue(R,{maskChar:$,maskRange:v,unmaskRange:w,maskRegex:C,maskTransformer:S}):R,V=()=>{switch(B){case"fail":return e(i,{children:[a(u,{}),a(y,{children:"Error"}),e(b,{children:["Try again?",a(m,{children:j})]})]});case"loading":return e(i,{children:[a(p,{}),a(g,{children:"Retrieving..."})]});default:return e(i,{children:[O(),a(f,{"aria-label":"masked"===A?`Display ${j}`:`Hide ${j}`,children:"masked"===A?a(r,{"data-testid":"masked-icon"}):a(s,{"data-testid":"unmasked-icon"})})]})}};return e(c,{$widthStyle:x,$fullWidth:z,children:[a(l,{children:j}),"string"!=typeof R?R:A?L?a(o.BodyBL,{children:O()}):a(h,{"data-testid":"clickable-label",onClick:H,"aria-busy":"loading"===B,"aria-live":"polite",type:"button","aria-label":d.getMaskedDescription(R,A,v),children:V()}):a(o.BodyBL,{children:R}),M&&a(k,Object.assign({sizeType:"small"},M))]})};export{j as UneditableSectionItem};
+import{jsxs as a,jsx as e,Fragment as s}from"react/jsx-runtime";import{ExclamationTriangleIcon as i}from"@lifesg/react-icons/exclamation-triangle";import{EyeIcon as r}from"@lifesg/react-icons/eye";import{EyeSlashIcon as t}from"@lifesg/react-icons/eye-slash";import{useState as n,useEffect as l}from"react";import{Alert as m}from"../alert/alert.js";import{FormLabel as o}from"../form/form-label.js";import{VisuallyHidden as c}from"../shared/accessibility/index.js";import{ComponentLoadingSpinner as d}from"../shared/component-loading-spinner/component-loading-spinner.js";import{Typography as p}from"../typography/index.js";import{StringHelper as k}from"../util/string-helper.js";import{container as f,alert as h,clickable as g,iconContainer as u,spinner as y,loadingLabel as b,errorIcon as j,errorLabel as N,tryAgainLabel as x}from"./section-item.styles.js";const R=({label:R,value:T,displayWidth:v="full",maskState:w,maskLoadingState:B,maskChar:C="•",maskRange:L,unmaskRange:M,maskRegex:D,disableMaskUnmask:S,alert:U,maskTransformer:W,onMask:$,onUnmask:z,onTryAgain:A,fullWidth:E})=>{const[H,O]=n(w);l((()=>{O(w)}),[w]);const V=()=>{switch("fail"===B&&A&&A(),H){case"masked":z&&z(),O("unmasked");break;case"unmasked":$&&$(),O("masked")}},q=()=>"string"!=typeof T?T:"masked"===H?k.maskValue(T,{maskChar:C,maskRange:L,unmaskRange:M,maskRegex:D,maskTransformer:W}):T,F=()=>{switch(B){case"fail":return a(s,{children:[e(i,{className:j}),e("span",{className:N,children:"Error"}),a("span",{className:x,children:["Try again?",e(c,{children:R})]})]});case"loading":return a(s,{children:[e(d,{className:y}),e("span",{className:b,children:"Retrieving..."})]});default:return a(s,{children:[q(),e("div",{className:u,"aria-label":"masked"===H?`Display ${R}`:`Hide ${R}`,children:"masked"===H?e(r,{"data-testid":"masked-icon"}):e(t,{"data-testid":"unmasked-icon"})})]})}};return a("li",{"data-width":v,"data-full-width":E,className:f,children:[e(o,{children:R}),"string"!=typeof T?T:H?S?e(p.BodyBL,{children:q()}):e("button",{className:g,"data-testid":"clickable-label",onClick:V,"aria-busy":"loading"===B,"aria-live":"polite",type:"button","aria-label":k.getMaskedDescription(T,H,L),children:F()}):e(p.BodyBL,{children:T}),U&&e(m,Object.assign({className:h,sizeType:"small"},U))]})};export{R as UneditableSectionItem};
 //# sourceMappingURL=section-item.js.map

package/uneditable-section/section-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"section-item.js","sources":["../../src/uneditable-section/section-item.tsx"],"sourcesContent":["import { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { useEffect, useState } from \"react\";\n\nimport { FormLabel } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util/string-helper\";\nimport ~~{\n Clickable,\n Container,\n ErrorIcon,\n ErrorLabel,\n IconContainer,\n LoadingLabel,\n Spinner,\n StyledAlert,\n TryAgainLabel,\n}~~ from \"./section-item.styles\";\nimport type {\n UneditableSectionItemMaskState,\n UneditableSectionItemProps,\n} from \"./types\";\n\nexport interface UneditableSectionItemComponentProps\n extends UneditableSectionItemProps {\n onMask?: (() => void) \| undefined;\n onUnmask?: (() => void) \| undefined;\n onTryAgain?: (() => void) \| undefined;\n fullWidth?: boolean \| undefined;\n}\n\nexport const UneditableSectionItem = ({\n label,\n value,\n displayWidth = \"full\",\n maskState,\n maskLoadingState,\n maskChar = \"•\",\n maskRange,\n unmaskRange,\n maskRegex,\n disableMaskUnmask,\n alert,\n maskTransformer,\n onMask,\n onUnmask,\n onTryAgain,\n fullWidth,\n}: UneditableSectionItemComponentProps) => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const [displayMaskState, setMaskState] = useState<\n UneditableSectionItemMaskState \| undefined\n >(maskState);\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setMaskState(maskState);\n }, [maskState]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleClickableClick = () => {\n if (maskLoadingState === \"fail\") {\n if (onTryAgain) onTryAgain();\n }\n\n switch (displayMaskState) {\n case \"masked\": {\n if (onUnmask) {\n onUnmask();\n }\n setMaskState(\"unmasked\");\n break;\n }\n case \"unmasked\": {\n if (onMask) {\n onMask();\n }\n setMaskState(\"masked\");\n break;\n }\n }\n };\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const getValue = () => {\n if (typeof value !== \"string\") {\n return value;\n }\n\n return displayMaskState === \"masked\"\n ? StringHelper.maskValue(value, {\n maskChar,\n maskRange,\n unmaskRange,\n maskRegex,\n maskTransformer,\n })\n : value;\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderMaskingState = () => {\n switch (maskLoadingState) {\n case \"fail\":\n return (\n <>\n <~~ErrorIcon~~ />\n <~~ErrorLabel~~>Error</~~ErrorLabel~~>\n <~~TryAgainLabel~~>\n Try again?\n <VisuallyHidden>{label}</VisuallyHidden>\n </~~TryAgainLabel~~>\n </>\n );\n case \"loading\":\n return (\n <>\n <~~Spinner~~ />\n <~~LoadingLabel>~~Retrieving~~...</LoadingLabel~~>\n </>\n );\n default:\n return (\n <>\n {getValue()}\n <~~IconContainer~~\n aria-label={\n displayMaskState === \"masked\"\n ? `Display ${label}`\n : `Hide ${label}`\n }\n >\n {displayMaskState === \"masked\" ? (\n <EyeIcon data-testid=\"masked-icon\" />\n ) : (\n <EyeSlashIcon data-testid=\"unmasked-icon\" />\n )}\n </~~IconContainer~~>\n </>\n );\n }\n };\n\n const renderContent = () => {\n if (typeof value !== \"string\") {\n return value;\n }\n\n if (!displayMaskState) {\n return <Typography.BodyBL>{value}</Typography.BodyBL>;\n }\n\n if (disableMaskUnmask) {\n return <Typography.BodyBL>{getValue()}</Typography.BodyBL>;\n }\n\n return (\n <~~Clickable~~\n data-testid=\"clickable-label\"\n onClick={handleClickableClick}\n aria-busy={maskLoadingState === \"loading\"}\n aria-live=\"polite\"\n type=\"button\"\n aria-label={StringHelper.getMaskedDescription(\n value,\n displayMaskState,\n maskRange\n )}\n >\n {renderMaskingState()}\n </~~Clickable~~>\n );\n };\n\n return (\n <~~Container $widthStyle~~={displayWidth} ~~$fullWidth~~={fullWidth}>\n <FormLabel>{label}</FormLabel>\n {renderContent()}\n {alert && <~~StyledAlert~~ sizeType=\"small\" {...alert} />}\n </~~Container~~>\n );\n};\n"],"names":["UneditableSectionItem","label","value","displayWidth","maskState","maskLoadingState","maskChar","maskRange","unmaskRange","maskRegex","disableMaskUnmask","alert","maskTransformer","onMask","onUnmask","onTryAgain","fullWidth","displayMaskState","setMaskState","useState","useEffect","handleClickableClick","getValue","StringHelper","maskValue","renderMaskingState","_jsxs","~~_jsx~~","~~ErrorIcon~~","~~ErrorLabel~~","~~children~~","~~TryAgainLabel~~","~~VisuallyHidden~~","~~_Fragment~~","~~Spinner~~","~~LoadingLabel~~","~~IconContainer~~","~~EyeIcon~~","~~EyeSlashIcon~~","~~Container~~","~~$widthStyle~~","~~$fullWidth~~","FormLabel","Typography","BodyBL","~~Clickable~~","onClick","type","getMaskedDescription","~~StyledAlert~~","~~Object~~","~~assign","~~sizeType"],"mappings":"~~wnBAgCO~~,MAAMA,EAAwB,EACjCC,QACAC,QACAC,eAAe,OACfC,YACAC,mBACAC,WAAW,IACXC,YACAC,cACAC,YACAC,~~oBACAC~~,~~QACAC~~,kBACAC,SACAC,WACAC,aACAC,gBAKA,MAAOC,EAAkBC,GAAgBC,EAEvCf,GAKFgB,GAAU,KACNF,EAAad,EAAU,GACxB,CAACA,IAKJ,MAAMiB,EAAuB,KAKzB,OAJyB,SAArBhB,GACIU,GAAYA,IAGZE,GACJ,IAAK,SACGH,GACAA,IAEJI,EAAa,YACb,MAEJ,IAAK,WACGL,GACAA,IAEJK,EAAa,YASnBI,EAAW,IACQ,iBAAVpB,EACAA,EAGiB,WAArBe,EACDM,EAAaC,UAAUtB,EAAO,CAC1BI,WACAC,YACAC,cACAC,YACAG,oBAEJV,EAMJuB,EAAqB,KACvB,OAAQpB,GACJ,IAAK,OACD,OACIqB,~~eACIC~~,EAACC,~~MACDD~~,~~EAACE~~,~~EAAU~~,~~CAAAC~~,SAAA,~~UACXJ~~,~~EAACK~~,~~EAAa~~,~~CAAAD~~,SAAA,CAAA,~~aAEVH~~,~~EAACK~~,~~EAAc~~,~~CAAAF,SAAE7B,~~UAIjC,IAAK,UACD,OACIyB,~~EAAAO~~,~~EAAA~~,~~CAAAH~~,~~SAAA~~,~~CACIH~~,~~EAACO~~,~~EAAO~~,~~CAAA~~,~~GACRP~~,~~EAACQ~~,~~EAAY,CAAAL,~~SAAA,~~qBAGzB~~,QACI,~~OACIJ~~,~~EAAAO~~,EAAA,~~CAAAH~~,SAAA,~~CACKR~~,~~IACDK~~,~~EAACS~~,~~EAAa~~,~~CAAA~~,~~aAEe~~,~~WAArBnB~~,EACM,WAAWhB,IACX,QAAQA,~~IAAO6B~~,SAGH,~~WAArBb~~,~~EACGU~~,~~EAACU~~,EAAO,CAAA,cAAa,~~gBAErBV~~,~~EAACW~~,EAAY,CAAA,cAAa,~~yBAuCtD~~,~~OACIZ~~,~~EAACa~~,~~EAAS~~,~~CAAAC~~,~~YAAcrC~~,~~EAAYsC~~,~~WAAczB~~,~~EAASc~~,SAAA,~~CACvDH~~,~~EAACe~~,EAAS,~~CAAAZ~~,~~SAAE7B~~,~~IAhCK~~,iBAAVC,EACAA,EAGNe,EAIDP,~~EACOiB~~,~~EAACgB~~,EAAWC,~~iBAAQtB~~,~~MAI3BK~~,~~EAACkB~~,~~EAAS~~,~~CAAA~~,~~cACM~~,kBACZC,~~QAASzB~~,cACuB,YAArBhB,EAA8B,YAC/B,~~SACV0C~~,KAAK,~~sBACOxB~~,~~EAAayB~~,~~qBACrB9C~~,EACAe,EACAV,~~GACHuB~~,~~SAEAL~~,~~MApBEE~~,~~EAACgB~~,EAAWC,OAAM,~~CAAAd~~,~~SAAE5B~~,~~IA6B1BS~~,~~GAASgB~~,~~EAACsB~~,~~EAAWC~~,~~OAAAC~~,~~OAAA~~,~~CAACC,~~SAAS,SAAYzC,~~MACpC~~"}
1	+ {"version":3,"file":"section-item.js","sources":["../../src/uneditable-section/section-item.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 { useEffect, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { FormLabel } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util/string-helper\";\nimport * as styles from \"./section-item.styles\";\nimport type {\n UneditableSectionItemMaskState,\n UneditableSectionItemProps,\n} from \"./types\";\n\nexport interface UneditableSectionItemComponentProps\n extends UneditableSectionItemProps {\n onMask?: (() => void) \| undefined;\n onUnmask?: (() => void) \| undefined;\n onTryAgain?: (() => void) \| undefined;\n fullWidth?: boolean \| undefined;\n}\n\nexport const UneditableSectionItem = ({\n label,\n value,\n displayWidth = \"full\",\n maskState,\n maskLoadingState,\n maskChar = \"•\",\n maskRange,\n unmaskRange,\n maskRegex,\n disableMaskUnmask,\n alert,\n maskTransformer,\n onMask,\n onUnmask,\n onTryAgain,\n fullWidth,\n}: UneditableSectionItemComponentProps) => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const [displayMaskState, setMaskState] = useState<\n UneditableSectionItemMaskState \| undefined\n >(maskState);\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setMaskState(maskState);\n }, [maskState]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleClickableClick = () => {\n if (maskLoadingState === \"fail\") {\n if (onTryAgain) onTryAgain();\n }\n\n switch (displayMaskState) {\n case \"masked\": {\n if (onUnmask) {\n onUnmask();\n }\n setMaskState(\"unmasked\");\n break;\n }\n case \"unmasked\": {\n if (onMask) {\n onMask();\n }\n setMaskState(\"masked\");\n break;\n }\n }\n };\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const getValue = () => {\n if (typeof value !== \"string\") {\n return value;\n }\n\n return displayMaskState === \"masked\"\n ? StringHelper.maskValue(value, {\n maskChar,\n maskRange,\n unmaskRange,\n maskRegex,\n maskTransformer,\n })\n : value;\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderMaskingState = () => {\n switch (maskLoadingState) {\n case \"fail\":\n return (\n <>\n <ExclamationTriangleIcon className={styles.errorIcon} />\n <span className={styles.errorLabel}>Error</span>\n <span className={styles.tryAgainLabel}>\n Try again?\n <VisuallyHidden>{label}</VisuallyHidden>\n </span>\n </>\n );\n case \"loading\":\n return (\n <>\n <ComponentLoadingSpinner className={styles.spinner} />\n <span className={styles.loadingLabel}>\n Retrieving...\n </span>\n </>\n );\n default:\n return (\n <>\n {getValue()}\n <div\n className={styles.iconContainer}\n aria-label={\n displayMaskState === \"masked\"\n ? `Display ${label}`\n : `Hide ${label}`\n }\n >\n {displayMaskState === \"masked\" ? (\n <EyeIcon data-testid=\"masked-icon\" />\n ) : (\n <EyeSlashIcon data-testid=\"unmasked-icon\" />\n )}\n </div>\n </>\n );\n }\n };\n\n const renderContent = () => {\n if (typeof value !== \"string\") {\n return value;\n }\n\n if (!displayMaskState) {\n return <Typography.BodyBL>{value}</Typography.BodyBL>;\n }\n\n if (disableMaskUnmask) {\n return <Typography.BodyBL>{getValue()}</Typography.BodyBL>;\n }\n\n return (\n <button\n className={styles.clickable}\n data-testid=\"clickable-label\"\n onClick={handleClickableClick}\n aria-busy={maskLoadingState === \"loading\"}\n aria-live=\"polite\"\n type=\"button\"\n aria-label={StringHelper.getMaskedDescription(\n value,\n displayMaskState,\n maskRange\n )}\n >\n {renderMaskingState()}\n </button>\n );\n };\n\n return (\n <li\n data-width={displayWidth}\n data-full-width={fullWidth}\n className={styles.container}\n >\n <FormLabel>{label}</FormLabel>\n {renderContent()}\n {alert && (\n <Alert className={styles.alert} sizeType=\"small\" {...alert} />\n )}\n </li>\n );\n};\n"],"names":["UneditableSectionItem","label","value","displayWidth","maskState","maskLoadingState","maskChar","maskRange","unmaskRange","maskRegex","disableMaskUnmask","alert","maskTransformer","onMask","onUnmask","onTryAgain","fullWidth","displayMaskState","setMaskState","useState","useEffect","handleClickableClick","getValue","StringHelper","maskValue","renderMaskingState","_jsxs","_Fragment","children","_jsx","ExclamationTriangleIcon","className","styles.errorIcon","styles.errorLabel","styles.tryAgainLabel","VisuallyHidden","ComponentLoadingSpinner","styles.spinner","styles.loadingLabel","styles.iconContainer","EyeIcon","EyeSlashIcon","styles.container","FormLabel","Typography","BodyBL","styles.clickable","onClick","type","getMaskedDescription","Alert","styles.alert","sizeType"],"mappings":"01BAyBO,MAAMA,EAAwB,EACjCC,QACAC,QACAC,eAAe,OACfC,YACAC,mBACAC,WAAW,IACXC,YACAC,cACAC,YACAC,oBAAiBC,MACjBA,EACAC,kBACAC,SACAC,WACAC,aACAC,gBAKA,MAAOC,EAAkBC,GAAgBC,EAEvCf,GAKFgB,GAAU,KACNF,EAAad,EAAU,GACxB,CAACA,IAKJ,MAAMiB,EAAuB,KAKzB,OAJyB,SAArBhB,GACIU,GAAYA,IAGZE,GACJ,IAAK,SACGH,GACAA,IAEJI,EAAa,YACb,MAEJ,IAAK,WACGL,GACAA,IAEJK,EAAa,YASnBI,EAAW,IACQ,iBAAVpB,EACAA,EAGiB,WAArBe,EACDM,EAAaC,UAAUtB,EAAO,CAC1BI,WACAC,YACAC,cACAC,YACAG,oBAEJV,EAMJuB,EAAqB,KACvB,OAAQpB,GACJ,IAAK,OACD,OACIqB,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACC,GAAwBC,UAAWC,IACpCH,EAAA,OAAA,CAAME,UAAWE,EAAiBL,SAAA,UAClCF,EAAA,OAAA,CAAMK,UAAWG,EAAoBN,SAAA,CAAA,aAEjCC,EAACM,YAAgBlC,UAIjC,IAAK,UACD,OACIyB,eACIG,EAACO,GAAwBL,UAAWM,IACpCR,EAAA,OAAA,CAAME,UAAWO,EAAmBV,SAAA,qBAKhD,QACI,OACIF,EAAAC,EAAA,CAAAC,SAAA,CACKN,IACDO,EAAA,MAAA,CACIE,UAAWQ,EAAoB,aAEN,WAArBtB,EACM,WAAWhB,IACX,QAAQA,IAAO2B,SAGH,WAArBX,EACGY,EAACW,EAAO,CAAA,cAAa,gBAErBX,EAACY,EAAY,CAAA,cAAa,yBAwCtD,OACIf,EAAA,KAAA,CAAA,aACgBvB,oBACKa,EACjBe,UAAWW,EAAgBd,SAAA,CAE3BC,EAACc,EAAS,CAAAf,SAAE3B,IArCK,iBAAVC,EACAA,EAGNe,EAIDP,EACOmB,EAACe,EAAWC,iBAAQvB,MAI3BO,EAAA,SAAA,CACIE,UAAWe,EAAgB,cACf,kBACZC,QAAS1B,cACuB,YAArBhB,EAA8B,YAC/B,SACV2C,KAAK,SAAQ,aACDzB,EAAa0B,qBACrB/C,EACAe,EACAV,GACHqB,SAEAH,MArBEI,EAACe,EAAWC,OAAM,CAAAjB,SAAE1B,IAkC1BS,GACGkB,EAACqB,iBAAMnB,UAAWoB,EAAcC,SAAS,SAAYzC,MAExD"}

package/uneditable-section/section-item.styles.d.ts CHANGED Viewed

@@ -1,22 +1,9 @@
-import type { UneditableSectionItemDisplayWidth } from "./types";
-interface ContainerStyleProps {
-    $widthStyle: UneditableSectionItemDisplayWidth;
-    $fullWidth?: boolean | undefined;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof ContainerStyleProps> & ContainerStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof ContainerStyleProps> & ContainerStyleProps, never>>> & string;
-export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Clickable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
-export declare const LoadingLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
-export declare const Spinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/component-loading-spinner").ComponentLoadingSpinnerProps, never> & Partial<Pick<import("../shared/component-loading-spinner").ComponentLoadingSpinnerProps, never>>> & string & Omit<({ color, className, size, ...otherProps }: import("../shared/component-loading-spinner").ComponentLoadingSpinnerProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const ErrorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const ErrorLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
-export declare const TryAgainLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
-export declare const StyledAlert: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").AlertProps, never> & Partial<Pick<import("..").AlertProps, never>>> & string & Omit<({ type, className, children, actionLink, actionLinkIcon, sizeType, showIcon, customIcon, maxCollapsedHeight, role, ...otherProps }: import("..").AlertProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const iconContainer: import("@linaria/core").LinariaClassName;
+export declare const clickable: import("@linaria/core").LinariaClassName;
+export declare const loadingLabel: import("@linaria/core").LinariaClassName;
+export declare const spinner: import("@linaria/core").LinariaClassName;
+export declare const errorIcon: import("@linaria/core").LinariaClassName;
+export declare const errorLabel: import("@linaria/core").LinariaClassName;
+export declare const tryAgainLabel: import("@linaria/core").LinariaClassName;
+export declare const alert: import("@linaria/core").LinariaClassName;

package/uneditable-section/section-item.styles.js CHANGED Viewed

@@ -1,64 +1,2 @@
-import{ExclamationTriangleIcon as e}from"@lifesg/react-icons/exclamation-triangle";import r,{css as i}from"styled-components";import{Alert as n}from"../alert/alert.js";import{ComponentLoadingSpinner as o}from"../shared/component-loading-spinner/component-loading-spinner.js";import{V3_MediaQuery as t,V3_Colour as l,V3_Font as a}from"../v3_theme/index.js";const s=r.li`
-    display: flex;
-    flex-direction: column;
-    ${e=>{switch(e.$widthStyle){case"half":return i`
-                    grid-column: auto / span ${e.$fullWidth?1:4};
-                `;case"full":return i`
-                    grid-column: auto / span ${e.$fullWidth?2:8};
-                `}}}
-    ${t.MaxWidth.lg} {
-        grid-column: 1 / -1;
-    }
-    overflow-wrap: break-word;
-`,d=r.div`
-    display: flex;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-    color: ${l["icon-primary"]};
-    margin-left: 0.5rem;
-    svg {
-        width: ${a.Spec["body-size-baseline"]};
-        height: ${a.Spec["body-size-baseline"]};
-    }
-`,c=r.button`
-    ${a["body-baseline-regular"]}
-    color: ${l.text};
-    border: none;
-    background: transparent;
-    padding: 0;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    overflow-wrap: anywhere;
-    text-align: left;
-    span {
-        overflow-wrap: anywhere;
-        text-align: left;
-    }
-`,m=r.span`
-    color: ${l["text-disabled"]};
-`,p=r(o)`
-    margin-right: 0.5rem;
-    color: ${l["text-disabled"]};
-`,g=r(e)`
-    color: ${l["icon-warning"]};
-    margin-right: 0.5rem;
-    height: ${a.Spec["body-size-baseline"]};
-    width: ${a.Spec["body-size-baseline"]};
-`,f=r.span`
-    color: ${l["text-warning"]};
-`,h=r.span`
-    ${a["body-baseline-semibold"]}
-    color: ${l.hyperlink};
-    text-decoration: underline;
-    margin-left: 0.5rem;
-`,$=r(n)`
-    margin-top: 0.5rem;
-`;export{c as Clickable,s as Container,g as ErrorIcon,f as ErrorLabel,d as IconContainer,m as LoadingLabel,p as Spinner,$ as StyledAlert,h as TryAgainLabel};
+import"./section-item.styles_mwx8ht.css";const t="cfqoxdt",e="i6tvpcl",c="c988p37",l="l1fg6lie",s="s186v6u4",i="e13rb6hl",p="e13pxbfu",o="t1dzpnph",n="a1celal9";export{n as alert,c as clickable,t as container,i as errorIcon,p as errorLabel,e as iconContainer,l as loadingLabel,s as spinner,o as tryAgainLabel};
 //# sourceMappingURL=section-item.styles.js.map

package/uneditable-section/section-item.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"section-item.styles.js","sources":["../../src/uneditable-section/section-item.styles.~~tsx~~"],"sourcesContent":["import { ~~ExclamationTriangleIcon~~ } from \"@~~lifesg~~/~~react-icons/exclamation-triangle~~\";\~~nimport styled, { css } from \"styled-components\";\~~n\nimport { ~~Alert } from \"../alert\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { V3_Colour~~, ~~V3_Font~~, ~~V3_MediaQuery~~ } from \"../~~v3_theme~~\";\~~nimport type { UneditableSectionItemDisplayWidth } from \"./types\";\~~n\n// =============================================================================\n// STYLING ~~INTERFACES~~\n// =============================================================================\ninterface ContainerStyleProps {\n $widthStyle: UneditableSectionItemDisplayWidth;\n $fullWidth?: boolean \| undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ~~Container~~ = ~~styled.li<ContainerStyleProps>`\~~n display: flex;\n flex-direction: column;\n\n ~~${(props)~~ => {\n ~~switch~~ ~~(props.$widthStyle)~~ {\n ~~case \~~"~~half~~\"~~:\n return~~ ~~css`\~~n grid-column: auto / span ~~${props.$fullWidth ?~~ 1 ~~: 4}~~;\n ~~`;\~~n ~~case~~ \"full\"~~:\n return~~ ~~css`\~~n grid-column: auto / span ${~~props.$fullWidth~~ ? 2 : 8};\n ~~`;\n~~ }\n }}\n\n ${~~V3_MediaQuery~~.MaxWidth.lg} {\n grid-column: 1 / -1;\n }\n\n ~~overflow~~-~~wrap~~: ~~break~~-~~word~~;\n`;\n\nexport const ~~IconContainer~~ = ~~styled.div~~`\n display: flex;\n height: 100%;\n align-items: center;\n justify-content: center;\n color: ${~~V3_Colour~~[\"icon-primary\"]};\n margin-left: 0.5rem;\n\n svg {\n width: ${~~V3_Font~~.Spec[\"body-size-baseline\"]};\n height: ${~~V3_Font~~.Spec[\"body-size-baseline\"]};\n }\n`;\n\nexport const ~~Clickable~~ = ~~styled.button~~`\n ${~~V3_Font~~[\"body-baseline-regular\"]}\n color: ${~~V3_Colour~~[\"text\"]};\n border: none;\n background: transparent;\n padding: 0;\n display: flex;\n cursor: pointer;\n align-items: center;\n overflow-wrap: anywhere;\n text-align: left;\n\n span {\n overflow-wrap: anywhere;\n text-align: left;\n }\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING DISPLAY\n// -----------------------------------------------------------------------------\nexport const ~~LoadingLabel~~ = ~~styled.span~~`\n color: ${~~V3_Colour~~[\"text-disabled\"]};\n`;\n\nexport const ~~Spinner~~ = ~~styled(ComponentLoadingSpinner)~~`\n margin-right: 0.5rem;\n color: ${~~V3_Colour~~[\"text-disabled\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ERROR DISPLAY\n// -----------------------------------------------------------------------------\nexport const ~~ErrorIcon~~ = ~~styled(ExclamationTriangleIcon)~~`\n color: ${~~V3_Colour~~[\"icon-warning\"]};\n margin-right: 0.5rem;\n height: ${~~V3_Font~~.Spec[\"body-size-baseline\"]};\n width: ${~~V3_Font~~.Spec[\"body-size-baseline\"]};\n`;\n\nexport const ~~ErrorLabel~~ = ~~styled.span~~`\n color: ${~~V3_Colour~~[\"text-warning\"]};\n`;\n\nexport const ~~TryAgainLabel~~ = ~~styled.span~~`\n ${~~V3_Font~~[\"body-baseline-semibold\"]}\n color: ${~~V3_Colour~~[\"hyperlink\"]};\n text-decoration: underline;\n margin-left: 0.5rem;\n`;\n\nexport const ~~StyledAlert~~ = ~~styled(Alert)~~`\n margin-top: 0.5rem;\n`;\n"],"names":["~~Container~~","~~styled~~","li","~~props~~","~~$widthStyle~~","~~css~~","~~$fullWidth~~","~~V3_MediaQuery~~","~~MaxWidth~~","lg","IconContainer","div","V3_Colour","V3_Font","Spec","Clickable","button","LoadingLabel","span","Spinner","ComponentLoadingSpinner","ErrorIcon","ExclamationTriangleIcon","ErrorLabel","TryAgainLabel","StyledAlert","Alert"],"mappings":"~~oWAmBO~~,MAAMA,~~EAAYC~~,~~EAAOC~~,~~EAAuB;;;;MAIhDC~~,~~IACC~~,~~OAAQA~~,~~EAAMC~~,~~aACV~~,~~IAAK~~,~~OACD~~,~~OAAOC~~,~~CAAG;+CACqBF~~,~~EAAMG~~,~~WAAa,EAAI;kBAE1D,IAAK,OACD,OAAOD,CAAG;+CACqBF,EAAMG,WAAa,EAAI;;;MAKhEC,EAAcC,SAASC;;;;;EAOhBC,EAAgBT,EAAOU,GAAG;;;;;aAK1BC,~~EAAU~~;;;;iBAINC~~,~~EAAQC~~,~~KAAK;kBACZD~~,~~EAAQC~~,KAAK;;EAIlBC,EAAYd,EAAOe,MAAM;MAChCH,EAAQ;aACDD,EAAgB;;;;;;;;;;;;;;EAmBhBK,EAAehB,EAAOiB,IAAI;aAC1BN,EAAU;EAGVO,EAAUlB,EAAOmB,EAAwB;;aAEzCR,EAAU;EAMVS,EAAYpB,EAAOqB,EAAwB;aAC3CV,EAAU;;cAETC,EAAQC,KAAK;aACdD,EAAQC,KAAK;EAGbS,EAAatB,EAAOiB,IAAI;aACxBN,EAAU;EAGVY,EAAgBvB,EAAOiB,IAAI;MAClCL,EAAQ;aACDD,EAAqB;;;EAKrBa,EAAcxB,EAAOyB,EAAM;;"}
1	+ {"version":3,"file":"section-item.styles.js","sources":["../../src/uneditable-section/section-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const container = css`\n display: flex;\n flex-direction: column;\n overflow-wrap: break-word;\n\n &[data-width=\"half\"] {\n grid-column: auto / span 4;\n\n &[data-full-width=\"true\"] {\n grid-column: auto / span 1;\n }\n }\n\n &[data-width=\"full\"] {\n grid-column: auto / span 8;\n\n &[data-full-width=\"true\"] {\n grid-column: auto / span 2;\n }\n }\n\n ${MediaQuery.MaxWidth.lg} {\n &[data-width=\"half\"],\n &[data-width=\"full\"] {\n grid-column: 1 / -1;\n\n &[data-full-width=\"true\"] {\n grid-column: 1 / -1;\n }\n }\n }\n`;\n\nexport const iconContainer = css`\n display: flex;\n height: 100%;\n align-items: center;\n justify-content: center;\n color: ${Colour[\"icon-primary\"]};\n margin-left: 0.5rem;\n\n svg {\n width: ${Font.Spec[\"body-size-baseline\"]};\n height: ${Font.Spec[\"body-size-baseline\"]};\n }\n`;\n\nexport const clickable = css`\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n border: none;\n background: transparent;\n padding: 0;\n display: flex;\n cursor: pointer;\n align-items: center;\n overflow-wrap: anywhere;\n text-align: left;\n\n span {\n overflow-wrap: anywhere;\n text-align: left;\n }\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING DISPLAY\n// -----------------------------------------------------------------------------\nexport const loadingLabel = css`\n color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const spinner = css`\n margin-right: 0.5rem;\n color: ${Colour[\"text-disabled\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ERROR DISPLAY\n// -----------------------------------------------------------------------------\nexport const errorIcon = css`\n color: ${Colour[\"icon-warning\"]};\n margin-right: 0.5rem;\n height: ${Font.Spec[\"body-size-baseline\"]};\n width: ${Font.Spec[\"body-size-baseline\"]};\n`;\n\nexport const errorLabel = css`\n color: ${Colour[\"text-warning\"]};\n`;\n\nexport const tryAgainLabel = css`\n ${Font[\"body-baseline-semibold\"]}\n color: ${Colour[\"hyperlink\"]};\n text-decoration: underline;\n margin-left: 0.5rem;\n`;\n\nexport const alert = css`\n margin-top: 0.5rem;\n`;\n"],"names":["container","iconContainer","clickable","loadingLabel","spinner","errorIcon","errorLabel","tryAgainLabel","alert"],"mappings":"2EAOO,MAAMA,EAAS,UAiCTC,EAAa,UAcbC,EAAS,UAqBTC,EAAY,WAIZC,EAAO,WAQPC,EAAS,WAOTC,EAAU,WAIVC,EAAa,WAObC,EAAK"}

package/uneditable-section/section-item.styles_mwx8ht.css ADDED Viewed

@@ -0,0 +1,9 @@
+.cfqoxdt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-wrap:break-word;}.cfqoxdt[data-width="half"]{grid-column:auto/span 4;}.cfqoxdt[data-width="half"][data-full-width="true"]{grid-column:auto/span 1;}.cfqoxdt[data-width="full"]{grid-column:auto/span 8;}.cfqoxdt[data-width="full"][data-full-width="true"]{grid-column:auto/span 2;}:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="half"],:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="full"]{-ms-grid-column:1/-1;grid-column:1/-1;}:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="half"][data-full-width="true"],:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="full"][data-full-width="true"]{-ms-grid-column:1/-1;grid-column:1/-1;}
+.i6tvpcl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-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);margin-left:0.5rem;}.i6tvpcl svg{width:var(--fds-font-body-size-baseline);height:var(--fds-font-body-size-baseline);}
+.c988p37{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;padding:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-wrap:anywhere;text-align:left;}.c988p37 span{overflow-wrap:anywhere;text-align:left;}
+.l1fg6lie{color:var(--fds-colour-text-disabled);}
+.s186v6u4{margin-right:0.5rem;color:var(--fds-colour-text-disabled);}
+.e13rb6hl{color:var(--fds-colour-icon-warning);margin-right:0.5rem;height:var(--fds-font-body-size-baseline);width:var(--fds-font-body-size-baseline);}
+.e13pxbfu{color:var(--fds-colour-text-warning);}
+.t1dzpnph{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-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-hyperlink);-webkit-text-decoration:underline;text-decoration:underline;margin-left:0.5rem;}
+.a1celal9{margin-top:0.5rem;}

package/uneditable-section/uneditable-section.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 import type { UneditableSectionProps } from "./types";
-export declare const UneditableSectionBase: ({ items, title, description, topSection, bottomSection, children, background, stretch, fullWidth, onMask, onUnmask, onTryAgain, ...otherProps }: UneditableSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UneditableSectionBase: ({ items, title, description, topSection, bottomSection, children, background, stretch, fullWidth, onMask, onUnmask, onTryAgain, className, ...otherProps }: UneditableSectionProps) => import("react/jsx-runtime").JSX.Element;

package/uneditable-section/uneditable-section.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as t}from"../_virtual/_tslib.js";import{jsx as n,jsxs as i,Fragment as e}from"react/jsx-runtime";import{UneditableSectionItem as r}from"./section-item.js";import{FullWidthWrapper as o,Wrapper as s,Title as c,Description as d,CustomSection as l,GridUl as a}from"./uneditable-section.styles.js";const h=h=>{var{items:m,title:u,description:b,topSection:g,bottomSection:p,children:f,background:k=!0,stretch:$,fullWidth:j,onMask:y,onUnmask:A,onTryAgain:S}=h,W=t(h,["items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain"]);const M=t=>()=>{y&&y(t)},O=t=>()=>{A&&A(t)},T=t=>()=>{S&&S(t)},U=()=>{if(m&&m.length>0){const t=m.map(((t,i)=>n(r,Object.assign({},t,{onMask:M(t),onUnmask:O(t),onTryAgain:T(t),fullWidth:j}),i)));return n(a,{$stretch:$,$fullWidth:j,children:t})}return null},v=()=>f||i(e,{children:[u&&n(c,{forwardedAs:"h2",weight:"semibold",$stretch:$,children:u}),b&&n(d,{$stretch:$,children:b}),g&&n(l,{"data-id":"top-section",$stretch:$,children:g}),U(),p&&n(l,{"data-id":"bottom-section",$stretch:$,children:p})]});return j?n(o,Object.assign({$background:k},W,{children:v()})):n(s,Object.assign({$background:k},W,{type:"grid",children:v()}))};export{h as UneditableSectionBase};
+import{__rest as t}from"../_virtual/_tslib.js";import{jsx as i,jsxs as e,Fragment as n}from"react/jsx-runtime";import s from"clsx";import{Layout as o}from"../layout/index.js";import{Typography as r}from"../typography/index.js";import{UneditableSectionItem as a}from"./section-item.js";import{wrapperBackground as c,wrapper as l,title as m,columnWidthStretch as d,description as h,customSection as p,gridUl as u,gridUlFullWidth as g}from"./uneditable-section.styles.js";const b=b=>{var{items:f,title:j,description:y,topSection:N,bottomSection:k,children:v,background:x=!0,stretch:S,fullWidth:M,onMask:A,onUnmask:O,onTryAgain:T,className:U}=b,W=t(b,["items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className"]);const B=t=>()=>{A&&A(t)},_=t=>()=>{O&&O(t)},w=t=>()=>{T&&T(t)},C=()=>{if(f&&f.length>0){const t=f.map(((t,e)=>i(a,Object.assign({},t,{onMask:B(t),onUnmask:_(t),onTryAgain:w(t),fullWidth:M}),e)));return i("ul",{className:s(u,S&&d,M&&g),children:t})}return null},H=()=>v||e(n,{children:[j&&i(r.HeadingSM,{as:"h2",weight:"semibold",className:s(m,S&&d),children:j}),y&&i(r.BodyBL,{className:s(h,S&&d),children:y}),N&&i("div",{"data-id":"top-section",className:s(p,S&&d),children:N}),C(),k&&i("div",{"data-id":"bottom-section",className:s(p,S&&d),children:k})]});return M?i("div",Object.assign({className:s(x&&c,U)},W,{children:H()})):i(o.Content,Object.assign({className:s(l,x&&c,U)},W,{type:"grid",children:H()}))};export{b as UneditableSectionBase};
 //# sourceMappingURL=uneditable-section.js.map

package/uneditable-section/uneditable-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"uneditable-section.js","sources":["../../src/uneditable-section/uneditable-section.tsx"],"sourcesContent":["import { UneditableSectionItem } from \"./section-item\";\nimport type {\n UneditableSectionItemProps,\n UneditableSectionProps,\n} from \"./types\";\nimport ~~{\n CustomSection,\n Description,\n FullWidthWrapper,\n GridUl,\n Title,\n Wrapper,\n}~~ from \"./uneditable-section.styles\";\n\nexport const UneditableSectionBase = ({\n items,\n title,\n description,\n topSection,\n bottomSection,\n children,\n background = true,\n stretch,\n fullWidth,\n onMask,\n onUnmask,\n onTryAgain,\n ...otherProps\n}: UneditableSectionProps) => {\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleItemMask = (item: UneditableSectionItemProps) => () => {\n if (onMask) onMask(item);\n };\n\n const handleItemUnmask = (item: UneditableSectionItemProps) => () => {\n if (onUnmask) onUnmask(item);\n };\n\n const handleTryAgain = (item: UneditableSectionItemProps) => () => {\n if (onTryAgain) onTryAgain(item);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderItems = () => {\n if (items && items.length > 0) {\n const renderedItems = items.map((item, index) => {\n return (\n <UneditableSectionItem\n key={index}\n {...item}\n onMask={handleItemMask(item)}\n onUnmask={handleItemUnmask(item)}\n onTryAgain={handleTryAgain(item)}\n fullWidth={fullWidth}\n />\n );\n });\n\n return (\n <~~GridUl $stretch~~={stretch} $fullWidth~~={fullWidth~~}>\n {renderedItems}\n </~~GridUl~~>\n );\n }\n\n return null;\n };\n\n const renderChildren = () => {\n if (children) {\n return children;\n }\n\n return (\n <>\n {title && (\n <~~Title~~\n ~~forwardedAs~~=\"h2\"\n weight=\"semibold\"\n ~~$stretch~~={stretch}\n >\n {title}\n </~~Title~~>\n )}\n {description && (\n <~~Description $stretch~~={stretch}>{description}</~~Description~~>\n )}\n {topSection && (\n <~~CustomSection~~ data-id=\"top-section\" ~~$stretch~~={stretch}>\n {topSection}\n </~~CustomSection~~>\n )}\n {renderItems()}\n {bottomSection && (\n <~~CustomSection~~ data-id=\"bottom-section\" ~~$stretch~~={stretch}>\n {bottomSection}\n </~~CustomSection~~>\n )}\n </>\n );\n };\n\n if (fullWidth) {\n return (\n <~~FullWidthWrapper $background~~={background} {...otherProps}>\n {renderChildren()}\n </~~FullWidthWrapper~~>\n );\n }\n return (\n <~~Wrapper $background~~={background} {...otherProps} type=\"grid\">\n {renderChildren()}\n </~~Wrapper~~>\n );\n};\n"],"names":["UneditableSectionBase","_a","items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","otherProps","__rest","handleItemMask","item","handleItemUnmask","handleTryAgain","renderItems","length","renderedItems","map","index","_jsx","UneditableSectionItem","Object","assign","~~GridUl~~","~~$stretch~~","~~$fullWidth~~","renderChildren","_jsxs","_Fragment","~~Title~~","~~forwardedAs~~","weight","~~Description~~","~~CustomSection~~","~~FullWidthWrapper~~","~~$background~~","~~Wrapper~~","type"],"mappings":"~~mTAcO~~,MAAMA,EAAyBC,IAAA,IAAAC,MAClCA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,WACRA,GAAa,EAAIC,QACjBA,EAAOC,UACPA,EAASC,OACTA,EAAMC,SACNA,EAAQC,WACRA,~~GAAUZ~~,~~EACPa~~,EAAUC,~~EAAAd~~,~~EAbqB~~,~~6IAkBlC~~,~~MAAMe~~,EAAkBC,GAAqC,~~KACrDN~~,GAAQA,~~EAAOM~~,EAAK,EAGtBC,EAAoBD,GAAqC,~~KACvDL~~,GAAUA,~~EAASK~~,EAAK,EAG1BE,EAAkBF,GAAqC,~~KACrDJ~~,GAAYA,~~EAAWI~~,EAAK,EAM9BG,EAAc,KAChB,~~GAAIlB~~,GAASA,~~EAAMmB~~,OAAS,EAAG,CAC3B,MAAMC,~~EAAgBpB~~,~~EAAMqB~~,KAAI,CAACN,EAAMO,IAE/BC,EAACC,EAAqBC,OAAAC,OAAA,GAEdX,EAAI,~~CACRN~~,~~OAAQK~~,EAAeC,~~GACvBL~~,~~SAAUM~~,EAAiBD,~~GAC3BJ~~,~~WAAYM~~,EAAeF,~~GAC3BP~~,UAAWA,~~IALNc~~,KAUjB,OACIC,~~EAACI~~,~~EAAM~~,~~CAAAC~~,~~SAAWrB~~,~~EAAOsB~~,~~WAAcrB~~,~~EAASH~~,~~SAC3Ce~~,GAGb,CAEA,OAAO,IAAI,~~EAGTU~~,EAAiB,~~IACfzB~~,~~GAKA0B~~,EAAAC,EAAA,~~CAAA3B~~,SAAA,CACKJ,~~GACGsB~~,~~EAACU~~,~~EAAK~~,~~CACFC~~,~~YAAY~~,~~KACZC~~,OAAO,~~WAAUP~~,~~SACPrB~~,~~EAAOF~~,~~SAEhBJ~~,IAGRC,~~GACGqB~~,~~EAACa~~,~~EAAW~~,~~CAAAR~~,~~SAAWrB~~,~~EAAOF~~,~~SAAGH~~,~~IAEpCC~~,~~GACGoB~~,~~EAACc~~,~~EAAa~~,CAAA,~~UAAS~~,~~cAAaT~~,~~SAAWrB~~,~~EAAOF~~,~~SACjDF~~,~~IAGRe~~,~~IACAd~~,~~GACGmB~~,~~EAACc~~,~~aAAsB~~,~~iBAAgBT~~,~~SAAWrB~~,~~EAAOF~~,~~SACpDD~~,OAOrB,OAAII,~~EAEIe~~,~~EAACe~~,~~EAAgBb~~,~~OAAAC~~,~~OAAA~~,~~CAAAa~~,~~YAAcjC~~,~~GAAgBM~~,~~EAAU~~,~~CAAAP~~,~~SACpDyB~~,~~OAKTP~~,~~EAACiB,EAAOf,~~OAAAC,OAAA,~~CAAAa~~,~~YAAcjC~~,~~GAAgBM~~,EAAU,~~CAAE6B~~,KAAK,~~OAAMpC~~,~~SACxDyB~~,~~MACK~~"}
1	+ {"version":3,"file":"uneditable-section.js","sources":["../../src/uneditable-section/uneditable-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Layout } from \"../layout\";\nimport { Typography } from \"../typography\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport type {\n UneditableSectionItemProps,\n UneditableSectionProps,\n} from \"./types\";\nimport * as styles from \"./uneditable-section.styles\";\n\nexport const UneditableSectionBase = ({\n items,\n title,\n description,\n topSection,\n bottomSection,\n children,\n background = true,\n stretch,\n fullWidth,\n onMask,\n onUnmask,\n onTryAgain,\n className,\n ...otherProps\n}: UneditableSectionProps) => {\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleItemMask = (item: UneditableSectionItemProps) => () => {\n if (onMask) onMask(item);\n };\n\n const handleItemUnmask = (item: UneditableSectionItemProps) => () => {\n if (onUnmask) onUnmask(item);\n };\n\n const handleTryAgain = (item: UneditableSectionItemProps) => () => {\n if (onTryAgain) onTryAgain(item);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderItems = () => {\n if (items && items.length > 0) {\n const renderedItems = items.map((item, index) => {\n return (\n <UneditableSectionItem\n key={index}\n {...item}\n onMask={handleItemMask(item)}\n onUnmask={handleItemUnmask(item)}\n onTryAgain={handleTryAgain(item)}\n fullWidth={fullWidth}\n />\n );\n });\n\n return (\n <ul\n className={clsx(\n styles.gridUl,\n stretch && styles.columnWidthStretch,\n fullWidth && styles.gridUlFullWidth\n )}\n >\n {renderedItems}\n </ul>\n );\n }\n\n return null;\n };\n\n const renderChildren = () => {\n if (children) {\n return children;\n }\n\n return (\n <>\n {title && (\n <Typography.HeadingSM\n as=\"h2\"\n weight=\"semibold\"\n className={clsx(\n styles.title,\n stretch && styles.columnWidthStretch\n )}\n >\n {title}\n </Typography.HeadingSM>\n )}\n {description && (\n <Typography.BodyBL\n className={clsx(\n styles.description,\n stretch && styles.columnWidthStretch\n )}\n >\n {description}\n </Typography.BodyBL>\n )}\n {topSection && (\n <div\n data-id=\"top-section\"\n className={clsx(\n styles.customSection,\n stretch && styles.columnWidthStretch\n )}\n >\n {topSection}\n </div>\n )}\n {renderItems()}\n {bottomSection && (\n <div\n data-id=\"bottom-section\"\n className={clsx(\n styles.customSection,\n stretch && styles.columnWidthStretch\n )}\n >\n {bottomSection}\n </div>\n )}\n </>\n );\n };\n\n if (fullWidth) {\n return (\n <div\n className={clsx(\n background && styles.wrapperBackground,\n className\n )}\n {...otherProps}\n >\n {renderChildren()}\n </div>\n );\n }\n return (\n <Layout.Content\n className={clsx(\n styles.wrapper,\n background && styles.wrapperBackground,\n className\n )}\n {...otherProps}\n type=\"grid\"\n >\n {renderChildren()}\n </Layout.Content>\n );\n};\n"],"names":["UneditableSectionBase","_a","items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className","otherProps","__rest","handleItemMask","item","handleItemUnmask","handleTryAgain","renderItems","length","renderedItems","map","index","_jsx","UneditableSectionItem","Object","assign","clsx","styles.gridUl","styles.columnWidthStretch","styles.gridUlFullWidth","renderChildren","_jsxs","_Fragment","Typography","HeadingSM","as","weight","styles.title","BodyBL","styles.description","styles.customSection","styles.wrapperBackground","Layout","Content","styles.wrapper","type"],"mappings":"qdAWO,MAAMA,EAAyBC,IAAA,IAAAC,MAClCA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,WACRA,GAAa,EAAIC,QACjBA,EAAOC,UACPA,EAASC,OACTA,EAAMC,SACNA,EAAQC,WACRA,EAAUC,UACVA,GAASb,EACNc,EAAUC,EAAAf,EAdqB,yJAmBlC,MAAMgB,EAAkBC,GAAqC,KACrDP,GAAQA,EAAOO,EAAK,EAGtBC,EAAoBD,GAAqC,KACvDN,GAAUA,EAASM,EAAK,EAG1BE,EAAkBF,GAAqC,KACrDL,GAAYA,EAAWK,EAAK,EAM9BG,EAAc,KAChB,GAAInB,GAASA,EAAMoB,OAAS,EAAG,CAC3B,MAAMC,EAAgBrB,EAAMsB,KAAI,CAACN,EAAMO,IAE/BC,EAACC,EAAqBC,OAAAC,OAAA,GAEdX,EAAI,CACRP,OAAQM,EAAeC,GACvBN,SAAUO,EAAiBD,GAC3BL,WAAYO,EAAeF,GAC3BR,UAAWA,IALNe,KAUjB,OACIC,EAAA,KAAA,CACIZ,UAAWgB,EACPC,EACAtB,GAAWuB,EACXtB,GAAauB,GAChB1B,SAEAgB,GAGb,CAEA,OAAO,IAAI,EAGTW,EAAiB,IACf3B,GAKA4B,EAAAC,EAAA,CAAA7B,SAAA,CACKJ,GACGuB,EAACW,EAAWC,UAAS,CACjBC,GAAG,KACHC,OAAO,WACP1B,UAAWgB,EACPW,EACAhC,GAAWuB,GACdzB,SAEAJ,IAGRC,GACGsB,EAACW,EAAWK,OAAM,CACd5B,UAAWgB,EACPa,EACAlC,GAAWuB,YAGd5B,IAGRC,GACGqB,EAAA,MAAA,CAAA,UACY,cACRZ,UAAWgB,EACPc,EACAnC,GAAWuB,GACdzB,SAEAF,IAGRgB,IACAf,GACGoB,EAAA,MAAA,CAAA,UACY,iBACRZ,UAAWgB,EACPc,EACAnC,GAAWuB,GACdzB,SAEAD,OAOrB,OAAII,EAEIgB,uBACIZ,UAAWgB,EACPtB,GAAcqC,EACd/B,IAEAC,YAEHmB,OAKTR,EAACoB,EAAOC,QAAOnB,OAAAC,OAAA,CACXf,UAAWgB,EACPkB,EACAxC,GAAcqC,EACd/B,IAEAC,EAAU,CACdkC,KAAK,OAAM1C,SAEV2B,MACY"}

package/uneditable-section/uneditable-section.styles.d.ts CHANGED Viewed

@@ -1,52 +1,8 @@
-interface WrapperStyleProps {
-    $background: boolean;
-}
-interface ContentStyleProps {
-    $stretch: boolean | undefined;
-}
-interface GridStyleProps extends ContentStyleProps {
-    $fullWidth?: boolean | undefined;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("..").ContentProps & import("react").RefAttributes<HTMLDivElement>, "$background"> & WrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("..").ContentProps & import("react").RefAttributes<HTMLDivElement>, "$background"> & WrapperStyleProps, never>>> & string & Omit<(props: import("..").ContentProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const FullWidthWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$background"> & WrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$background"> & WrapperStyleProps, never>>> & string;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLHeadingElement>, "$stretch"> & ContentStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLHeadingElement>, "$stretch"> & ContentStyleProps, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, "$stretch"> & ContentStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, "$stretch"> & ContentStyleProps, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const CustomSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$stretch"> & ContentStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$stretch"> & ContentStyleProps, never>>> & string;
-export declare const GridUl: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof GridStyleProps> & GridStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof GridStyleProps> & GridStyleProps, never>>> & string;
-export {};
+export declare const columnWidthStretch: import("@linaria/core").LinariaClassName;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const wrapperBackground: import("@linaria/core").LinariaClassName;
+export declare const title: import("@linaria/core").LinariaClassName;
+export declare const description: import("@linaria/core").LinariaClassName;
+export declare const customSection: import("@linaria/core").LinariaClassName;
+export declare const gridUl: import("@linaria/core").LinariaClassName;
+export declare const gridUlFullWidth: import("@linaria/core").LinariaClassName;