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/_virtual/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={exports:{}};export{e as __module};
+var r={};export{r as __exports};
 //# sourceMappingURL=index.js.map

package/_virtual/index3.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var r={};export{r as __exports};
+var e={exports:{}};export{e as __module};
 //# sourceMappingURL=index3.js.map

package/accordion/accordion-item.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./accordion-item.styles_kchcad.css";const c="c1l63f33",e="c4kcze2",i="e1cbnvn7",t="e7t4rdi",o="e1vcwm5y",a="t145i3ve",d="t1a4gj3",n="ixofgdc",r="i1ifv2g7",s="c15k7llx",l="ecqtwmd",m="caja2xa";export{s as chevronIcon,c as container,e as containerExpanded,m as contentContainer,i as expandCollapseButton,o as expandCollapseButtonCollapsible,t as expandCollapseButtonExpanded,l as expandable,n as iconContainer,r as iconContainerExpanded,a as title,d as titleSmall};
+import"./accordion-item.styles_1j4eb32.css";const c="c1l63f33",e="c4kcze2",i="e1cbnvn7",t="e7t4rdi",o="e1vcwm5y",a="t145i3ve",d="t1a4gj3",n="ixofgdc",r="i1ifv2g7",s="c15k7llx",l="ecqtwmd",m="caja2xa";export{s as chevronIcon,c as container,e as containerExpanded,m as contentContainer,i as expandCollapseButton,o as expandCollapseButtonCollapsible,t as expandCollapseButtonExpanded,l as expandable,n as iconContainer,r as iconContainerExpanded,a as title,d as titleSmall};
 //# sourceMappingURL=accordion-item.styles.js.map

package/accordion/accordion-item.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"accordion-item.styles.js","sources":["../../src/accordion/accordion-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Motion,\n Radius,\n Spacing,\n} from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const container = css`\n background-color: ${Colour.bg};\n border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const containerExpanded = css`\n padding-bottom: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const expandCollapseButton = css`\n background: transparent;\n border: none;\n border-radius: ${Radius[\"sm\"]};\n outline: none;\n text-align: left;\n user-select: text;\n\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: ${Spacing[\"spacing-48\"]};\n padding: ${Spacing[\"spacing-16\"]} 0;\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 0;\n }\n`;\n\nexport const expandCollapseButtonExpanded = css`\n padding-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const expandCollapseButtonCollapsible = css`\n cursor: pointer;\n`;\n\nexport const title = css`\n flex: 1;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-standard\"]};\n color: ${Colour[\"text\"]};\n ${Font[\"heading-sm-bold\"]}\n`;\n\nexport const titleSmall = css`\n ${Font[\"heading-xs-bold\"]}\n`;\n\nexport const iconContainer = css`\n transform: rotate(180deg);\n transition: transform ${Motion[\"duration-250\"]}${Motion[\"ease-default\"]};\n`;\n\nexport const iconContainerExpanded = css`\n transform: rotate(0deg);\n`;\n\nexport const chevronIcon = css`\n height: 1.25rem;\n width: 1.25rem;\n color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const expandable = css`\n overflow: hidden;\n`;\n\nexport const contentContainer = css`\n display: inline-block;\n padding-right: ${Spacing[\"spacing-64\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n padding-right: 0;\n }\n`;\n"],"names":["container","containerExpanded","expandCollapseButton","expandCollapseButtonExpanded","expandCollapseButtonCollapsible","title","titleSmall","iconContainer","iconContainerExpanded","chevronIcon","expandable","contentContainer"],"mappings":"~~oEAeO~~,MAAMA,EAAS,WAKTC,EAAiB,UAIjBC,EAAoB,WAsBpBC,EAA4B,UAI5BC,EAA+B,WAI/BC,EAAK,WAOLC,EAAU,UAIVC,EAAa,UAKbC,EAAqB,WAIrBC,EAAW,WAMXC,EAAU,UAIVC,EAAgB"}
1	+ {"version":3,"file":"accordion-item.styles.js","sources":["../../src/accordion/accordion-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Motion,\n Radius,\n Spacing,\n} from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const container = css`\n background-color: ${Colour.bg};\n border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const containerExpanded = css`\n padding-bottom: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const expandCollapseButton = css`\n background: transparent;\n border: none;\n border-radius: ${Radius[\"sm\"]};\n outline: none;\n text-align: left;\n user-select: text;\n\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: ${Spacing[\"spacing-48\"]};\n padding: ${Spacing[\"spacing-16\"]} 0;\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 0;\n }\n`;\n\nexport const expandCollapseButtonExpanded = css`\n padding-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const expandCollapseButtonCollapsible = css`\n cursor: pointer;\n`;\n\nexport const title = css`\n flex: 1;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-standard\"]};\n color: ${Colour[\"text\"]};\n ${Font[\"heading-sm-bold\"]}\n`;\n\nexport const titleSmall = css`\n ${Font[\"heading-xs-bold\"]}\n`;\n\nexport const iconContainer = css`\n transform: rotate(180deg);\n transition: transform ${Motion[\"duration-250\"]}${Motion[\"ease-default\"]};\n`;\n\nexport const iconContainerExpanded = css`\n transform: rotate(0deg);\n`;\n\nexport const chevronIcon = css`\n height: 1.25rem;\n width: 1.25rem;\n color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const expandable = css`\n overflow: hidden;\n`;\n\nexport const contentContainer = css`\n display: inline-block;\n padding-right: ${Spacing[\"spacing-64\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n padding-right: 0;\n }\n`;\n"],"names":["container","containerExpanded","expandCollapseButton","expandCollapseButtonExpanded","expandCollapseButtonCollapsible","title","titleSmall","iconContainer","iconContainerExpanded","chevronIcon","expandable","contentContainer"],"mappings":"qEAeO,MAAMA,EAAS,WAKTC,EAAiB,UAIjBC,EAAoB,WAsBpBC,EAA4B,UAI5BC,EAA+B,WAI/BC,EAAK,WAOLC,EAAU,UAIVC,EAAa,UAKbC,EAAqB,WAIrBC,EAAW,WAMXC,EAAU,UAIVC,EAAgB"}

package/accordion/accordion-item.styles_1j4eb32.css ADDED Viewed

@@ -0,0 +1,12 @@
+.c1l63f33{background-color:var(--fds-colour-bg);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.c4kcze2{padding-bottom:var(--fds-spacing-16);}
+.e1cbnvn7{background:transparent;border:none;border-radius:var(--fds-radius-sm);outline:none;text-align:left;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;gap:var(--fds-spacing-48);padding:var(--fds-spacing-16) 0;}.e1cbnvn7:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0;}
+.e7t4rdi{padding-bottom:var(--fds-spacing-8);}
+.e1vcwm5y{cursor:pointer;}
+.t145i3ve{-webkit-flex:1;-ms-flex:1;flex:1;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-standard);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-standard);color:var(--fds-colour-text);font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-sm);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-heading-lh-sm);letter-spacing:var(--fds-font-heading-ls-sm);}
+.t1a4gj3{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);}
+.ixofgdc{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform var(--fds-motion-duration-250)var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-250)var(--fds-motion-timing-ease-default);}
+.i1ifv2g7{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.c15k7llx{height:1.25rem;width:1.25rem;color:var(--fds-colour-icon-primary);}
+.ecqtwmd{overflow:hidden;}
+.caja2xa{display:inline-block;padding-right:var(--fds-spacing-64);}:where(body.fds-breakpoint-lg-max) .caja2xa{padding-right:0;}

package/accordion/accordion.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./accordion.styles_ijglff.css";const t="a1tkz57u",o="txz4s1p",c="t1pllc04",s="texr0v4",e="t8054ua",r="e1e1ok07";export{t as accordionWrapper,r as expandCollapseLink,s as title,e as titleHidden,o as titleWrapper,c as titleWrapperHidden};
+import"./accordion.styles_bzrfrs.css";const t="a1tkz57u",o="txz4s1p",c="t1pllc04",r="texr0v4",s="t8054ua",e="e1e1ok07";export{t as accordionWrapper,e as expandCollapseLink,r as title,s as titleHidden,o as titleWrapper,c as titleWrapperHidden};
 //# sourceMappingURL=accordion.styles.js.map

package/accordion/accordion.styles_bzrfrs.css ADDED Viewed

@@ -0,0 +1,6 @@
+.a1tkz57u{width:100%;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.txz4s1p{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-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;padding-bottom:var(--fds-spacing-16);}
+:where(body.fds-breakpoint-sm-max) .t1pllc04{display:none;}
+.texr0v4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-webkit-flex:1;-ms-flex:1;flex:1;font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-md);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-sm-max) .texr0v4{text-align:left;}
+:where(body.fds-breakpoint-sm-max) .t8054ua{display:none;visibility:hidden;}
+.e1e1ok07{margin:calc(var(--fds-spacing-16) * -1);margin-left:0px;white-space:nowrap;}

package/alert/alert.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as i}from"react/jsx-runtime";import{ChevronDownIcon as s}from"@lifesg/react-icons";import{ArrowRightIcon as t}from"@lifesg/react-icons/arrow-right";import{ExclamationCircleFillIcon as o}from"@lifesg/react-icons/exclamation-circle-fill";import{ExclamationTriangleFillIcon as a}from"@lifesg/react-icons/exclamation-triangle-fill";import{ICircleFillIcon as n}from"@lifesg/react-icons/i-circle-fill";import{TickCircleFillIcon as l}from"@lifesg/react-icons/tick-circle-fill";import c from"clsx";import{useState as m,useRef as p,useCallback as d,useEffect as u}from"react";import{useResizeDetector as f}from"../external/react-resize-detector/build/index.esm.js";import{Markup as h}from"../markup/markup.js";import{inertValue as y}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as C}from"../theme/utils/use-apply-styles.js";import{Typography as j}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as g}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as x,alertIconDescription as w,wrapperDescription as k,alertIconInfo as b,wrapperInfo as N,alertIconWarning as v,wrapperWarning as T,alertIconSuccess as I,wrapperSuccess as L,alertIconError as S,wrapperError as z,alertIconWrapper as H,alertIconWrapperSmall as $,alertIconWrapperDefault as _,contentContainer as q,wrapper as A,chevronIcon as D,chevronIconExpanded as E,chevronIconCollapsed as M,showMoreButton as O,showMoreButtonSmall as W,showMoreButtonDefault as B,textWrapper as F,textWrapperContainer as G,textWrapperContainerShowMoreWithLink as J,textWrapperContainerCollapsed as K,actionLinkText as P,actionLinkTextSmall as Q,actionLinkTextDefault as R}from"./alert.styles.js";const U={error:{wrapperTypeClass:z,iconColorClass:S},success:{wrapperTypeClass:L,iconColorClass:I},warning:{wrapperTypeClass:T,iconColorClass:v},info:{wrapperTypeClass:N,iconColorClass:b},description:{wrapperTypeClass:k,iconColorClass:w}},V=w=>{var{type:k,className:b,children:N,actionLink:I,actionLinkIcon:L,sizeType:S="default",showIcon:z=!1,customIcon:V,maxCollapsedHeight:X,role:Y}=w,Z=e(w,["type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role"]);const[ee,re]=m(!1),[ie,se]=m(!1),{height:te,ref:oe}=f(),ae=g(),ne=p(null),le=me(),ce=d((()=>{re(!X),se(me())}),[X,te]);function me(){return!(!te||!X)&&te>X}u((()=>{ce()}),[X,te,ce]),C(ne,{[x.maxCollapsedHeight]:!ee&&le&&X?`${X}px`:null});const{wrapperTypeClass:pe=T,iconColorClass:de=v}=U[k]||{};return r("div",{className:c(A,pe,b),"aria-label":`${(()=>{switch(k){case"success":return"Success";case"warning":return"Warning";case"error":return"Error";case"info":return"Information";case"description":return"Description";default:return"Alert"}})()}`,"data-testid":Z["data-testid"],role:Y,children:[z&&i("div",{className:c(H,"small"===S?$:_,de),children:(()=>{if(k&&V)return V;switch(k){case"success":return i(l,{"aria-hidden":!0});case"warning":return i(a,{"aria-hidden":!0});case"error":return i(o,{"aria-hidden":!0});case"info":case"description":return i(n,{"aria-hidden":!0});default:return null}})()}),r("div",{className:q,children:[ie&&r("button",{className:c(O,"small"===S?W:B),type:"button","aria-expanded":ee,"aria-controls":ae,onClick:()=>re(!ee),children:["Show ",ee?"less":"more",i(s,{className:c(D,ee?E:M)})]}),r("div",{id:ae,className:c(G,ee&&I&&J,!ee&&le&&K),inert:y(!!X&&!ee),ref:ne,children:[i(h,{ref:oe,className:F,baseTextSize:"small"===S?"body-sm":"body-md",children:N}),I?r(j.LinkSM,Object.assign({"data-testid":"action-link",className:c(P,"small"===S?Q:R),underlineStyle:"none"},I,{children:[I.children,L||i(t,{})]})):null]})]})]})};export{V as Alert};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as i}from"react/jsx-runtime";import{ChevronDownIcon as s}from"@lifesg/react-icons";import{ArrowRightIcon as t}from"@lifesg/react-icons/arrow-right";import{ExclamationCircleFillIcon as o}from"@lifesg/react-icons/exclamation-circle-fill";import{ExclamationTriangleFillIcon as a}from"@lifesg/react-icons/exclamation-triangle-fill";import{ICircleFillIcon as l}from"@lifesg/react-icons/i-circle-fill";import{TickCircleFillIcon as n}from"@lifesg/react-icons/tick-circle-fill";import c from"clsx";import{useState as m,useRef as p,useCallback as d,useEffect as u}from"react";import{useResizeDetector as f}from"../external/react-resize-detector/build/index.esm.js";import{Markup as h}from"../markup/markup.js";import{inertValue as y}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as j}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as C}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as g}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as x,alertIconDescription as w,wrapperDescription as k,alertIconInfo as b,wrapperInfo as N,alertIconWarning as v,wrapperWarning as T,alertIconSuccess as I,wrapperSuccess as L,alertIconError as S,wrapperError as z,alertIconWrapper as H,alertIconWrapperSmall as q,alertIconWrapperDefault as $,contentContainer as _,wrapper as A,chevronIcon as D,chevronIconExpanded as E,chevronIconCollapsed as M,showMoreButton as O,showMoreButtonSmall as W,showMoreButtonDefault as B,textWrapper as F,textWrapperContainer as G,textWrapperContainerShowMoreWithLink as J,textWrapperContainerCollapsed as K,actionLinkText as P,actionLinkTextSmall as Q,actionLinkTextDefault as R}from"./alert.styles.js";const U={error:{wrapperTypeClass:z,iconColorClass:S},success:{wrapperTypeClass:L,iconColorClass:I},warning:{wrapperTypeClass:T,iconColorClass:v},info:{wrapperTypeClass:N,iconColorClass:b},description:{wrapperTypeClass:k,iconColorClass:w}},V=w=>{var{type:k,className:b,children:N,actionLink:I,actionLinkIcon:L,sizeType:S="default",showIcon:z=!1,customIcon:V,maxCollapsedHeight:X,role:Y}=w,Z=e(w,["type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role"]);const[ee,re]=m(!1),[ie,se]=m(!1),{height:te,ref:oe}=f(),ae=g(),le=p(null),ne=me(),ce=d((()=>{re(!X),se(me())}),[X,te]);function me(){return!(!te||!X)&&te>X}u((()=>{ce()}),[X,te,ce]),j(le,{[x.maxCollapsedHeight]:!ee&&ne&&X?`${X}px`:null});const{wrapperTypeClass:pe=T,iconColorClass:de=v}=U[k]||{};return r("div",{className:c(A,pe,b),"aria-label":`${(()=>{switch(k){case"success":return"Success";case"warning":return"Warning";case"error":return"Error";case"info":return"Information";case"description":return"Description";default:return"Alert"}})()}`,"data-testid":Z["data-testid"],role:Y,children:[z&&i("div",{className:c(H,"small"===S?q:$,de),children:(()=>{if(k&&V)return V;switch(k){case"success":return i(n,{"aria-hidden":!0});case"warning":return i(a,{"aria-hidden":!0});case"error":return i(o,{"aria-hidden":!0});case"info":case"description":return i(l,{"aria-hidden":!0});default:return null}})()}),r("div",{className:_,children:[ie&&r("button",{className:c(O,"small"===S?W:B),type:"button","aria-expanded":ee,"aria-controls":ae,onClick:()=>re(!ee),children:["Show ",ee?"less":"more",i(s,{className:c(D,ee?E:M)})]}),r("div",{id:ae,className:c(G,ee&&I&&J,!ee&&ne&&K),inert:y(!!X&&!ee),ref:le,children:[i(h,{ref:oe,className:F,baseTextSize:"small"===S?"body-sm":"body-md",children:N}),I?r(C.LinkSM,Object.assign({"data-testid":"action-link",className:c(P,"small"===S?Q:R),underlineStyle:"none"},I,{children:[I.children,L||i(t,{})]})):null]})]})]})};export{V as Alert};
 //# sourceMappingURL=alert.js.map

package/alert/alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.js","sources":["../../src/alert/alert.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons\";\nimport { ArrowRightIcon } from \"@lifesg/react-icons/arrow-right\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { ExclamationTriangleFillIcon } from \"@lifesg/react-icons/exclamation-triangle-fill\";\nimport { ICircleFillIcon } from \"@lifesg/react-icons/i-circle-fill\";\nimport { TickCircleFillIcon } from \"@lifesg/react-icons/tick-circle-fill\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Markup } from \"../markup\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./alert.styles\";\nimport type { AlertProps } from \"./types\";\n\nconst TYPE_CLASS_MAP = {\n error: {\n wrapperTypeClass: styles.wrapperError,\n iconColorClass: styles.alertIconError,\n },\n success: {\n wrapperTypeClass: styles.wrapperSuccess,\n iconColorClass: styles.alertIconSuccess,\n },\n warning: {\n wrapperTypeClass: styles.wrapperWarning,\n iconColorClass: styles.alertIconWarning,\n },\n info: {\n wrapperTypeClass: styles.wrapperInfo,\n iconColorClass: styles.alertIconInfo,\n },\n description: {\n wrapperTypeClass: styles.wrapperDescription,\n iconColorClass: styles.alertIconDescription,\n },\n};\n\nexport const Alert = ({\n type,\n className,\n children,\n actionLink,\n actionLinkIcon,\n sizeType = \"default\",\n showIcon = false,\n customIcon,\n maxCollapsedHeight,\n role,\n ...otherProps\n}: AlertProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [showHiddenContent, setShowHiddenContent] = useState<boolean>(false);\n const [renderShowMore, setRenderShowMore] = useState<boolean>(false);\n const { height: contentHeight, ref: contentRef } =\n useResizeDetector<HTMLDivElement>();\n const contentId = useId();\n const containerRef = useRef<HTMLDivElement>(null);\n const isCollapsed = isContentOutsideCollapsibleZone();\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n\n const getAlertLabel = () => {\n switch (type) {\n case \"success\":\n return \"Success\";\n case \"warning\":\n return \"Warning\";\n case \"error\":\n return \"Error\";\n case \"info\":\n return \"Information\";\n case \"description\":\n return \"Description\";\n default:\n return \"Alert\";\n }\n };\n\n const setCollapsedState = useCallback(() => {\n setShowHiddenContent(!maxCollapsedHeight);\n setRenderShowMore(isContentOutsideCollapsibleZone());\n }, [maxCollapsedHeight, contentHeight]);\n\n function isContentOutsideCollapsibleZone() {\n if (contentHeight && maxCollapsedHeight) {\n return contentHeight > maxCollapsedHeight;\n }\n return false;\n }\n\n const isInert = () => {\n return !!maxCollapsedHeight && !showHiddenContent;\n };\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useEffect(() => {\n setCollapsedState();\n }, [maxCollapsedHeight, contentHeight, setCollapsedState]);\n\n useApplyStyle(containerRef, {\n [styles.tokens.maxCollapsedHeight]:\n !showHiddenContent && isCollapsed && maxCollapsedHeight\n ? `${maxCollapsedHeight}px`\n : null,\n });\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderShowMoreButton = () => (\n <button\n className={clsx(\n styles.showMoreButton,\n sizeType === \"small\"\n ? styles.showMoreButtonSmall\n : styles.showMoreButtonDefault\n )}\n type=\"button\"\n aria-expanded={showHiddenContent}\n aria-controls={contentId}\n onClick={() => setShowHiddenContent(!showHiddenContent)}\n >\n Show {showHiddenContent ? \"less\" : \"more\"}\n <ChevronDownIcon\n className={clsx(\n styles.chevronIcon,\n showHiddenContent\n ? styles.chevronIconExpanded\n : styles.chevronIconCollapsed\n )}\n />\n </button>\n );\n\n const renderLinkType = () => {\n if (actionLinkIcon) return actionLinkIcon;\n return <ArrowRightIcon />;\n };\n\n const renderLink = () => {\n if (!actionLink) return null;\n\n return (\n <Typography.LinkSM\n data-testid=\"action-link\"\n className={clsx(\n styles.actionLinkText,\n sizeType === \"small\"\n ? styles.actionLinkTextSmall\n : styles.actionLinkTextDefault\n )}\n underlineStyle=\"none\"\n {...actionLink}\n >\n {actionLink.children}\n {renderLinkType()}\n </Typography.LinkSM>\n );\n };\n\n const renderIcon = () => {\n if (type && customIcon) return customIcon;\n switch (type) {\n case \"success\":\n return <TickCircleFillIcon aria-hidden />;\n case \"warning\":\n return <ExclamationTriangleFillIcon aria-hidden />;\n case \"error\":\n return <ExclamationCircleFillIcon aria-hidden />;\n case \"info\":\n return <ICircleFillIcon aria-hidden />;\n case \"description\":\n return <ICircleFillIcon aria-hidden />;\n default:\n return null;\n }\n };\n\n const renderContent = () => {\n return (\n <div\n id={contentId}\n className={clsx(\n styles.textWrapperContainer,\n showHiddenContent &&\n actionLink &&\n styles.textWrapperContainerShowMoreWithLink,\n !showHiddenContent &&\n isCollapsed &&\n styles.textWrapperContainerCollapsed\n )}\n inert={inertValue(isInert())}\n ref={containerRef}\n >\n <Markup\n ref={contentRef}\n className={styles.textWrapper}\n baseTextSize={sizeType === \"small\" ? \"body-sm\" : \"body-md\"}\n >\n {children}\n </Markup>\n {renderLink()}\n </div>\n );\n };\n\n const {\n wrapperTypeClass = styles.wrapperWarning,\n iconColorClass = styles.alertIconWarning,\n } = TYPE_CLASS_MAP[type] \|\| {};\n\n return (\n <div\n className={clsx(styles.wrapper, wrapperTypeClass, className)}\n aria-label={`${getAlertLabel()}`}\n data-testid={otherProps[\"data-testid\"]}\n role={role}\n >\n {showIcon && (\n <div\n className={clsx(\n styles.alertIconWrapper,\n sizeType === \"small\"\n ? styles.alertIconWrapperSmall\n : styles.alertIconWrapperDefault,\n iconColorClass\n )}\n >\n {renderIcon()}\n </div>\n )}\n {/* \n CSS-BASED TAB ORDER IMPLEMENTATION:\n - DOM order: button → link → content (natural tab order)\n - Visual order: content → button (via CSS order property)\n */}\n <div className={styles.contentContainer}>\n {renderShowMore && renderShowMoreButton()}\n {renderContent()}\n </div>\n </div>\n );\n};\n"],"names":["TYPE_CLASS_MAP","error","wrapperTypeClass","styles.wrapperError","iconColorClass","styles.alertIconError","success","styles.wrapperSuccess","styles.alertIconSuccess","warning","styles.wrapperWarning","styles.alertIconWarning","info","styles.wrapperInfo","styles.alertIconInfo","description","styles.wrapperDescription","styles.alertIconDescription","Alert","_a","type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role","otherProps","__rest","showHiddenContent","setShowHiddenContent","useState","renderShowMore","setRenderShowMore","height","contentHeight","ref","contentRef","useResizeDetector","contentId","useId","containerRef","useRef","isCollapsed","isContentOutsideCollapsibleZone","setCollapsedState","useCallback","useEffect","useApplyStyle","styles.tokens","_jsxs","clsx","styles.wrapper","getAlertLabel","_jsx","styles.alertIconWrapper","styles.alertIconWrapperSmall","styles.alertIconWrapperDefault","TickCircleFillIcon","ExclamationTriangleFillIcon","ExclamationCircleFillIcon","ICircleFillIcon","renderIcon","styles.contentContainer","styles.showMoreButton","styles.showMoreButtonSmall","styles.showMoreButtonDefault","onClick","ChevronDownIcon","styles.chevronIcon","styles.chevronIconExpanded","styles.chevronIconCollapsed","id","styles.textWrapperContainer","styles.textWrapperContainerShowMoreWithLink","styles.textWrapperContainerCollapsed","inert","inertValue","Markup","styles.textWrapper","baseTextSize","Typography","LinkSM","Object","assign","styles.actionLinkText","styles.actionLinkTextSmall","styles.actionLinkTextDefault","underlineStyle","ArrowRightIcon"],"mappings":"khEAkBA,MAAMA,EAAiB,CACnBC,MAAO,CACHC,iBAAkBC,EAClBC,eAAgBC,GAEpBC,QAAS,CACLJ,iBAAkBK,EAClBH,eAAgBI,GAEpBC,QAAS,CACLP,iBAAkBQ,EAClBN,eAAgBO,GAEpBC,KAAM,CACFV,iBAAkBW,EAClBT,eAAgBU,GAEpBC,YAAa,CACTb,iBAAkBc,EAClBZ,eAAgBa,IAIXC,EAASC,IAAA,IAAAC,KAClBA,EAAIC,UACJA,EAASC,SACTA,EAAQC,WACRA,EAAUC,eACVA,EAAcC,SACdA,EAAW,UAASC,SACpBA,GAAW,EAAKC,WAChBA,EAAUC,mBACVA,EAAkBC,KAClBA,GAAIV,EACDW,EAAUC,EAAAZ,EAXK,CAAA,OAAA,YAAA,WAAA,aAAA,iBAAA,WAAA,WAAA,aAAA,qBAAA,SAgBlB,MAAOa,GAAmBC,IAAwBC,GAAkB,IAC7DC,GAAgBC,IAAqBF,GAAkB,IACtDG,OAAQC,GAAeC,IAAKC,IAChCC,IACEC,GAAYC,IACZC,GAAeC,EAAuB,MACtCC,GAAcC,KAuBdC,GAAoBC,GAAY,KAClChB,IAAsBL,GACtBQ,GAAkBW,KAAkC,GACrD,CAACnB,EAAoBU,KAExB,SAASS,KACL,SAAIT,KAAiBV,IACVU,GAAgBV,CAG/B,CAUAsB,GAAU,KACNF,IAAmB,GACpB,CAACpB,EAAoBU,GAAeU,KAEvCG,EAAcP,GAAc,CACxB,CAACQ,EAAcxB,qBACVI,IAAqBc,IAAelB,EAC/B,GAAGA,MACH,OAOd,MAiGM1B,iBACFA,GAAmBQ,EAAqBN,eACxCA,GAAiBO,GACjBX,EAAeoB,IAAS,CAAA,EAE5B,OACIiC,EAAA,MAAA,CACIhC,UAAWiC,EAAKC,EAAgBrD,GAAkBmB,GAAU,aAChD,GA7JE,MAClB,OAAQD,GACJ,IAAK,UACD,MAAO,UACX,IAAK,UACD,MAAO,UACX,IAAK,QACD,MAAO,QACX,IAAK,OACD,MAAO,cACX,IAAK,cACD,MAAO,cACX,QACI,MAAO,UAgJIoC,KAAiB,cACnB1B,EAAW,eACxBD,KAAMA,EAAIP,SAAA,CAETI,GACG+B,EAAA,MAAA,CACIpC,UAAWiC,EACPI,EACa,UAAbjC,EACMkC,EACAC,EACNxD,IACHkB,SAlEE,MACf,GAAIF,GAAQO,EAAY,OAAOA,EAC/B,OAAQP,GACJ,IAAK,UACD,OAAOqC,EAACI,EAAkB,CAAA,eAAA,IAC9B,IAAK,UACD,OAAOJ,EAACK,EAA2B,CAAA,eAAA,IACvC,IAAK,QACD,OAAOL,EAACM,EAAyB,CAAA,eAAA,IACrC,IAAK,OAEL,IAAK,cACD,OAAON,EAACO,EAAe,CAAA,eAAA,IAC3B,QACI,OAAO,OAsDFC,KAQTZ,EAAA,MAAA,CAAKhC,UAAW6C,EAAuB5C,SAAA,CAClCa,IA/HTkB,EAAA,SAAA,CACIhC,UAAWiC,EACPa,EACa,UAAb1C,EACM2C,EACAC,GAEVjD,KAAK,SAAQ,gBACEY,GAAiB,gBACjBU,GACf4B,QAAS,IAAMrC,IAAsBD,IAAkBV,SAAA,CAAA,QAEjDU,GAAoB,OAAS,OACnCyB,EAACc,EAAe,CACZlD,UAAWiC,EACPkB,EACAxC,GACMyC,EACAC,QAoDdrB,EAAA,MAAA,CACIsB,GAAIjC,GACJrB,UAAWiC,EACPsB,EACA5C,IACIT,GACAsD,GACH7C,IACGc,IACAgC,GAERC,MAAOC,IAxGNpD,IAAuBI,IAyGxBO,IAAKK,GAAYtB,SAAA,CAEjBmC,EAACwB,GACG1C,IAAKC,GACLnB,UAAW6D,EACXC,aAA2B,UAAb1D,EAAuB,UAAY,UAASH,SAEzDA,IA3DRC,EAGD8B,EAAC+B,EAAWC,OAAMC,OAAAC,OAAA,CAAA,cACF,cACZlE,UAAWiC,EACPkC,EACa,UAAb/D,EACMgE,EACAC,GAEVC,eAAe,QACXpE,EAAU,CAAAD,SAAA,CAEbC,EAAWD,SAnBhBE,GACGiC,EAACmC,EAAc,QAIE,aAoGlB"}
1	+ {"version":3,"file":"alert.js","sources":["../../src/alert/alert.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons\";\nimport { ArrowRightIcon } from \"@lifesg/react-icons/arrow-right\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { ExclamationTriangleFillIcon } from \"@lifesg/react-icons/exclamation-triangle-fill\";\nimport { ICircleFillIcon } from \"@lifesg/react-icons/i-circle-fill\";\nimport { TickCircleFillIcon } from \"@lifesg/react-icons/tick-circle-fill\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Markup } from \"../markup\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./alert.styles\";\nimport type { AlertProps } from \"./types\";\n\nconst TYPE_CLASS_MAP = {\n error: {\n wrapperTypeClass: styles.wrapperError,\n iconColorClass: styles.alertIconError,\n },\n success: {\n wrapperTypeClass: styles.wrapperSuccess,\n iconColorClass: styles.alertIconSuccess,\n },\n warning: {\n wrapperTypeClass: styles.wrapperWarning,\n iconColorClass: styles.alertIconWarning,\n },\n info: {\n wrapperTypeClass: styles.wrapperInfo,\n iconColorClass: styles.alertIconInfo,\n },\n description: {\n wrapperTypeClass: styles.wrapperDescription,\n iconColorClass: styles.alertIconDescription,\n },\n};\n\nexport const Alert = ({\n type,\n className,\n children,\n actionLink,\n actionLinkIcon,\n sizeType = \"default\",\n showIcon = false,\n customIcon,\n maxCollapsedHeight,\n role,\n ...otherProps\n}: AlertProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [showHiddenContent, setShowHiddenContent] = useState<boolean>(false);\n const [renderShowMore, setRenderShowMore] = useState<boolean>(false);\n const { height: contentHeight, ref: contentRef } =\n useResizeDetector<HTMLDivElement>();\n const contentId = useId();\n const containerRef = useRef<HTMLDivElement>(null);\n const isCollapsed = isContentOutsideCollapsibleZone();\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n\n const getAlertLabel = () => {\n switch (type) {\n case \"success\":\n return \"Success\";\n case \"warning\":\n return \"Warning\";\n case \"error\":\n return \"Error\";\n case \"info\":\n return \"Information\";\n case \"description\":\n return \"Description\";\n default:\n return \"Alert\";\n }\n };\n\n const setCollapsedState = useCallback(() => {\n setShowHiddenContent(!maxCollapsedHeight);\n setRenderShowMore(isContentOutsideCollapsibleZone());\n }, [maxCollapsedHeight, contentHeight]);\n\n function isContentOutsideCollapsibleZone() {\n if (contentHeight && maxCollapsedHeight) {\n return contentHeight > maxCollapsedHeight;\n }\n return false;\n }\n\n const isInert = () => {\n return !!maxCollapsedHeight && !showHiddenContent;\n };\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useEffect(() => {\n setCollapsedState();\n }, [maxCollapsedHeight, contentHeight, setCollapsedState]);\n\n useApplyStyle(containerRef, {\n [styles.tokens.maxCollapsedHeight]:\n !showHiddenContent && isCollapsed && maxCollapsedHeight\n ? `${maxCollapsedHeight}px`\n : null,\n });\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderShowMoreButton = () => (\n <button\n className={clsx(\n styles.showMoreButton,\n sizeType === \"small\"\n ? styles.showMoreButtonSmall\n : styles.showMoreButtonDefault\n )}\n type=\"button\"\n aria-expanded={showHiddenContent}\n aria-controls={contentId}\n onClick={() => setShowHiddenContent(!showHiddenContent)}\n >\n Show {showHiddenContent ? \"less\" : \"more\"}\n <ChevronDownIcon\n className={clsx(\n styles.chevronIcon,\n showHiddenContent\n ? styles.chevronIconExpanded\n : styles.chevronIconCollapsed\n )}\n />\n </button>\n );\n\n const renderLinkType = () => {\n if (actionLinkIcon) return actionLinkIcon;\n return <ArrowRightIcon />;\n };\n\n const renderLink = () => {\n if (!actionLink) return null;\n\n return (\n <Typography.LinkSM\n data-testid=\"action-link\"\n className={clsx(\n styles.actionLinkText,\n sizeType === \"small\"\n ? styles.actionLinkTextSmall\n : styles.actionLinkTextDefault\n )}\n underlineStyle=\"none\"\n {...actionLink}\n >\n {actionLink.children}\n {renderLinkType()}\n </Typography.LinkSM>\n );\n };\n\n const renderIcon = () => {\n if (type && customIcon) return customIcon;\n switch (type) {\n case \"success\":\n return <TickCircleFillIcon aria-hidden />;\n case \"warning\":\n return <ExclamationTriangleFillIcon aria-hidden />;\n case \"error\":\n return <ExclamationCircleFillIcon aria-hidden />;\n case \"info\":\n return <ICircleFillIcon aria-hidden />;\n case \"description\":\n return <ICircleFillIcon aria-hidden />;\n default:\n return null;\n }\n };\n\n const renderContent = () => {\n return (\n <div\n id={contentId}\n className={clsx(\n styles.textWrapperContainer,\n showHiddenContent &&\n actionLink &&\n styles.textWrapperContainerShowMoreWithLink,\n !showHiddenContent &&\n isCollapsed &&\n styles.textWrapperContainerCollapsed\n )}\n inert={inertValue(isInert())}\n ref={containerRef}\n >\n <Markup\n ref={contentRef}\n className={styles.textWrapper}\n baseTextSize={sizeType === \"small\" ? \"body-sm\" : \"body-md\"}\n >\n {children}\n </Markup>\n {renderLink()}\n </div>\n );\n };\n\n const {\n wrapperTypeClass = styles.wrapperWarning,\n iconColorClass = styles.alertIconWarning,\n } = TYPE_CLASS_MAP[type] \|\| {};\n\n return (\n <div\n className={clsx(styles.wrapper, wrapperTypeClass, className)}\n aria-label={`${getAlertLabel()}`}\n data-testid={otherProps[\"data-testid\"]}\n role={role}\n >\n {showIcon && (\n <div\n className={clsx(\n styles.alertIconWrapper,\n sizeType === \"small\"\n ? styles.alertIconWrapperSmall\n : styles.alertIconWrapperDefault,\n iconColorClass\n )}\n >\n {renderIcon()}\n </div>\n )}\n {/* \n CSS-BASED TAB ORDER IMPLEMENTATION:\n - DOM order: button → link → content (natural tab order)\n - Visual order: content → button (via CSS order property)\n */}\n <div className={styles.contentContainer}>\n {renderShowMore && renderShowMoreButton()}\n {renderContent()}\n </div>\n </div>\n );\n};\n"],"names":["TYPE_CLASS_MAP","error","wrapperTypeClass","styles.wrapperError","iconColorClass","styles.alertIconError","success","styles.wrapperSuccess","styles.alertIconSuccess","warning","styles.wrapperWarning","styles.alertIconWarning","info","styles.wrapperInfo","styles.alertIconInfo","description","styles.wrapperDescription","styles.alertIconDescription","Alert","_a","type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role","otherProps","__rest","showHiddenContent","setShowHiddenContent","useState","renderShowMore","setRenderShowMore","height","contentHeight","ref","contentRef","useResizeDetector","contentId","useId","containerRef","useRef","isCollapsed","isContentOutsideCollapsibleZone","setCollapsedState","useCallback","useEffect","useApplyStyle","styles.tokens","_jsxs","clsx","styles.wrapper","getAlertLabel","_jsx","styles.alertIconWrapper","styles.alertIconWrapperSmall","styles.alertIconWrapperDefault","TickCircleFillIcon","ExclamationTriangleFillIcon","ExclamationCircleFillIcon","ICircleFillIcon","renderIcon","styles.contentContainer","styles.showMoreButton","styles.showMoreButtonSmall","styles.showMoreButtonDefault","onClick","ChevronDownIcon","styles.chevronIcon","styles.chevronIconExpanded","styles.chevronIconCollapsed","id","styles.textWrapperContainer","styles.textWrapperContainerShowMoreWithLink","styles.textWrapperContainerCollapsed","inert","inertValue","Markup","styles.textWrapper","baseTextSize","Typography","LinkSM","Object","assign","styles.actionLinkText","styles.actionLinkTextSmall","styles.actionLinkTextDefault","underlineStyle","ArrowRightIcon"],"mappings":"4jEAkBA,MAAMA,EAAiB,CACnBC,MAAO,CACHC,iBAAkBC,EAClBC,eAAgBC,GAEpBC,QAAS,CACLJ,iBAAkBK,EAClBH,eAAgBI,GAEpBC,QAAS,CACLP,iBAAkBQ,EAClBN,eAAgBO,GAEpBC,KAAM,CACFV,iBAAkBW,EAClBT,eAAgBU,GAEpBC,YAAa,CACTb,iBAAkBc,EAClBZ,eAAgBa,IAIXC,EAASC,IAAA,IAAAC,KAClBA,EAAIC,UACJA,EAASC,SACTA,EAAQC,WACRA,EAAUC,eACVA,EAAcC,SACdA,EAAW,UAASC,SACpBA,GAAW,EAAKC,WAChBA,EAAUC,mBACVA,EAAkBC,KAClBA,GAAIV,EACDW,EAAUC,EAAAZ,EAXK,CAAA,OAAA,YAAA,WAAA,aAAA,iBAAA,WAAA,WAAA,aAAA,qBAAA,SAgBlB,MAAOa,GAAmBC,IAAwBC,GAAkB,IAC7DC,GAAgBC,IAAqBF,GAAkB,IACtDG,OAAQC,GAAeC,IAAKC,IAChCC,IACEC,GAAYC,IACZC,GAAeC,EAAuB,MACtCC,GAAcC,KAuBdC,GAAoBC,GAAY,KAClChB,IAAsBL,GACtBQ,GAAkBW,KAAkC,GACrD,CAACnB,EAAoBU,KAExB,SAASS,KACL,SAAIT,KAAiBV,IACVU,GAAgBV,CAG/B,CAUAsB,GAAU,KACNF,IAAmB,GACpB,CAACpB,EAAoBU,GAAeU,KAEvCG,EAAcP,GAAc,CACxB,CAACQ,EAAcxB,qBACVI,IAAqBc,IAAelB,EAC/B,GAAGA,MACH,OAOd,MAiGM1B,iBACFA,GAAmBQ,EAAqBN,eACxCA,GAAiBO,GACjBX,EAAeoB,IAAS,CAAA,EAE5B,OACIiC,EAAA,MAAA,CACIhC,UAAWiC,EAAKC,EAAgBrD,GAAkBmB,GAAU,aAChD,GA7JE,MAClB,OAAQD,GACJ,IAAK,UACD,MAAO,UACX,IAAK,UACD,MAAO,UACX,IAAK,QACD,MAAO,QACX,IAAK,OACD,MAAO,cACX,IAAK,cACD,MAAO,cACX,QACI,MAAO,UAgJIoC,KAAiB,cACnB1B,EAAW,eACxBD,KAAMA,EAAIP,SAAA,CAETI,GACG+B,EAAA,MAAA,CACIpC,UAAWiC,EACPI,EACa,UAAbjC,EACMkC,EACAC,EACNxD,IACHkB,SAlEE,MACf,GAAIF,GAAQO,EAAY,OAAOA,EAC/B,OAAQP,GACJ,IAAK,UACD,OAAOqC,EAACI,EAAkB,CAAA,eAAA,IAC9B,IAAK,UACD,OAAOJ,EAACK,EAA2B,CAAA,eAAA,IACvC,IAAK,QACD,OAAOL,EAACM,EAAyB,CAAA,eAAA,IACrC,IAAK,OAEL,IAAK,cACD,OAAON,EAACO,EAAe,CAAA,eAAA,IAC3B,QACI,OAAO,OAsDFC,KAQTZ,EAAA,MAAA,CAAKhC,UAAW6C,EAAuB5C,SAAA,CAClCa,IA/HTkB,EAAA,SAAA,CACIhC,UAAWiC,EACPa,EACa,UAAb1C,EACM2C,EACAC,GAEVjD,KAAK,SAAQ,gBACEY,GAAiB,gBACjBU,GACf4B,QAAS,IAAMrC,IAAsBD,IAAkBV,SAAA,CAAA,QAEjDU,GAAoB,OAAS,OACnCyB,EAACc,EAAe,CACZlD,UAAWiC,EACPkB,EACAxC,GACMyC,EACAC,QAoDdrB,EAAA,MAAA,CACIsB,GAAIjC,GACJrB,UAAWiC,EACPsB,EACA5C,IACIT,GACAsD,GACH7C,IACGc,IACAgC,GAERC,MAAOC,IAxGNpD,IAAuBI,IAyGxBO,IAAKK,GAAYtB,SAAA,CAEjBmC,EAACwB,GACG1C,IAAKC,GACLnB,UAAW6D,EACXC,aAA2B,UAAb1D,EAAuB,UAAY,UAASH,SAEzDA,IA3DRC,EAGD8B,EAAC+B,EAAWC,OAAMC,OAAAC,OAAA,CAAA,cACF,cACZlE,UAAWiC,EACPkC,EACa,UAAb/D,EACMgE,EACAC,GAEVC,eAAe,QACXpE,EAAU,CAAAD,SAAA,CAEbC,EAAWD,SAnBhBE,GACGiC,EAACmC,EAAc,QAIE,aAoGlB"}

package/alert/alert.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./alert.styles_1ygel36.css";const a={maxCollapsedHeight:"--fds-internal-alert-textWrapperContainer-maxCollapsedHeight"},t="wa04j5f",e="we966c0",l="wiv49ur",s="w1rjxx7d",w="w1xcaq6x",r="w3tklvf",x="a2kejy0",i="a1p0o35j",n="a1u5ns39",p="a1v4ljri",c="a1vwvhsw",v="a1l988e7",g="a1tifh24",j="amvh5gt",o="aesypwo",y="a1a9q3y5",f="a10b5gf8",m="cg7mawv",d="t1npk24x",h="t11jn0l3",q="t1fvdgaj",u="t1myaiqw",C="swmwiyq",_="s1ypbatn",b="sxtdaq0",k="c19cf4gt",H="cnxzujv",A="c1u44bt8";export{o as actionLinkText,y as actionLinkTextDefault,f as actionLinkTextSmall,j as alertIconDescription,p as alertIconError,g as alertIconInfo,c as alertIconSuccess,v as alertIconWarning,x as alertIconWrapper,n as alertIconWrapperDefault,i as alertIconWrapperSmall,k as chevronIcon,A as chevronIconCollapsed,H as chevronIconExpanded,m as contentContainer,C as showMoreButton,_ as showMoreButtonDefault,b as showMoreButtonSmall,u as textWrapper,d as textWrapperContainer,q as textWrapperContainerCollapsed,h as textWrapperContainerShowMoreWithLink,a as tokens,t as wrapper,r as wrapperDescription,e as wrapperError,w as wrapperInfo,l as wrapperSuccess,s as wrapperWarning};
+import"./alert.styles_patwo2.css";const a={maxCollapsedHeight:"--fds-internal-alert-textWrapperContainer-maxCollapsedHeight"},t="wa04j5f",e="we966c0",s="wiv49ur",w="w1rjxx7d",l="w1xcaq6x",r="w3tklvf",p="a2kejy0",x="a1p0o35j",i="a1u5ns39",n="a1v4ljri",c="a1vwvhsw",o="a1l988e7",v="a1tifh24",j="amvh5gt",f="aesypwo",g="a1a9q3y5",m="a10b5gf8",y="cg7mawv",d="t1npk24x",h="t11jn0l3",q="t1fvdgaj",u="t1myaiqw",C="swmwiyq",_="s1ypbatn",b="sxtdaq0",k="c19cf4gt",H="cnxzujv",A="c1u44bt8";export{f as actionLinkText,g as actionLinkTextDefault,m as actionLinkTextSmall,j as alertIconDescription,n as alertIconError,v as alertIconInfo,c as alertIconSuccess,o as alertIconWarning,p as alertIconWrapper,i as alertIconWrapperDefault,x as alertIconWrapperSmall,k as chevronIcon,A as chevronIconCollapsed,H as chevronIconExpanded,y as contentContainer,C as showMoreButton,_ as showMoreButtonDefault,b as showMoreButtonSmall,u as textWrapper,d as textWrapperContainer,q as textWrapperContainerCollapsed,h as textWrapperContainerShowMoreWithLink,a as tokens,t as wrapper,r as wrapperDescription,e as wrapperError,l as wrapperInfo,s as wrapperSuccess,w as wrapperWarning};
 //# sourceMappingURL=alert.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.styles.js","sources":["../../src/alert/alert.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Spacing } from \"../theme/tokens\";\n\nexport const tokens = {\n maxCollapsedHeight:\n \"--fds-internal-alert-textWrapperContainer-maxCollapsedHeight\",\n};\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\nexport const wrapper = css`\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n display: flex;\n border-left: ${Border[\"width-020\"]} ${Border[\"solid\"]};\n`;\n\nexport const wrapperError = css`\n background: ${Colour[\"bg-error\"]};\n border-left-color: ${Colour[\"border-error\"]};\n`;\n\nexport const wrapperSuccess = css`\n background: ${Colour[\"bg-success\"]};\n border-left-color: ${Colour[\"border-success\"]};\n`;\n\nexport const wrapperWarning = css`\n background: ${Colour[\"bg-warning\"]};\n border-left-color: ${Colour[\"border-warning\"]};\n`;\n\nexport const wrapperInfo = css`\n background: ${Colour[\"bg-info\"]};\n border-left-color: ${Colour[\"border-info\"]};\n`;\n\nexport const wrapperDescription = css`\n background: ${Colour[\"bg-strong\"]};\n border-left-color: ${Colour[\"border-strong\"]};\n`;\n\n// =============================================================================\n// ALERT ICON WRAPPER\n// =============================================================================\nexport const alertIconWrapper = css`\n display: flex;\n align-items: center;\n height: 1lh;\n margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const alertIconWrapperSmall = css`\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n`;\n\nexport const alertIconWrapperDefault = css`\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n`;\n\nexport const alertIconError = css`\n svg {\n color: ${Colour[\"icon-error\"]};\n }\n`;\n\nexport const alertIconSuccess = css`\n svg {\n color: ${Colour[\"icon-success\"]};\n }\n`;\n\nexport const alertIconWarning = css`\n svg {\n color: ${Colour[\"icon-warning\"]};\n }\n`;\n\nexport const alertIconInfo = css`\n svg {\n color: ${Colour[\"icon-info\"]};\n }\n`;\n\nexport const alertIconDescription = css`\n svg {\n color: ${Colour[\"icon-subtle\"]};\n }\n`;\n\n// =============================================================================\n// ACTION LINK TEXT\n// =============================================================================\nexport const actionLinkText = css`\n display: flex;\n align-items: center;\n align-self: flex-start;\n\n svg {\n height: 1rem;\n width: 1rem;\n margin-left: ${Spacing[\"spacing-4\"]};\n }\n`;\n\nexport const actionLinkTextDefault = css`\n ${Font[\"body-md-semibold\"]}\n margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const actionLinkTextSmall = css`\n ${Font[\"body-sm-semibold\"]}\n margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\n// =============================================================================\n// CONTENT CONTAINER\n// =============================================================================\nexport const contentContainer = css`\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow-wrap: anywhere;\n`;\n\n// =============================================================================\n// TEXT WRAPPER CONTAINER\n// =============================================================================\nexport const textWrapperContainer = css`\n display: flex;\n flex-direction: column;\n flex: 1;\n order: 1;\n`;\n\nexport const textWrapperContainerShowMoreWithLink = css`\n margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const textWrapperContainerCollapsed = css`\n ${tokens.maxCollapsedHeight}: initial;\n max-height: var(${tokens.maxCollapsedHeight});\n overflow: hidden;\n -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n`;\n\n// =============================================================================\n// TEXT WRAPPER\n// =============================================================================\nexport const textWrapper = css`\n color: ${Colour.text};\n`;\n\n// =============================================================================\n// SHOW MORE BUTTON\n// =============================================================================\nexport const showMoreButton = css`\n display: flex;\n align-items: center;\n align-self: flex-start;\n gap: ${Spacing[\"spacing-4\"]};\n margin-top: ${Spacing[\"spacing-8\"]};\n order: 2;\n\n cursor: pointer;\n user-select: none;\n border: none;\n background: transparent;\n\n color: ${Colour[\"text-primary\"]};\n`;\n\nexport const showMoreButtonDefault = css`\n ${Font[\"body-md-semibold\"]}\n`;\n\nexport const showMoreButtonSmall = css`\n ${Font[\"body-sm-semibold\"]}\n`;\n\n// =============================================================================\n// CHEVRON ICON\n// =============================================================================\nexport const chevronIcon = css`\n transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n`;\n\nexport const chevronIconExpanded = css`\n transform: rotate(180deg);\n`;\n\nexport const chevronIconCollapsed = css`\n transform: rotate(0deg);\n`;\n"],"names":["tokens","maxCollapsedHeight","wrapper","wrapperError","wrapperSuccess","wrapperWarning","wrapperInfo","wrapperDescription","alertIconWrapper","alertIconWrapperSmall","alertIconWrapperDefault","alertIconError","alertIconSuccess","alertIconWarning","alertIconInfo","alertIconDescription","actionLinkText","actionLinkTextDefault","actionLinkTextSmall","contentContainer","textWrapperContainer","textWrapperContainerShowMoreWithLink","textWrapperContainerCollapsed","textWrapper","showMoreButton","showMoreButtonDefault","showMoreButtonSmall","chevronIcon","chevronIconExpanded","chevronIconCollapsed"],"mappings":"~~wDAIO~~,MAAMA,EAAS,CAClBC,mBACI,gEAMKC,EAAO,UAMPC,EAAY,UAKZC,EAAc,UAKdC,EAAc,WAKdC,EAAW,WAKXC,EAAkB,UAQlBC,EAAgB,UAOhBC,EAAqB,WAOrBC,EAAuB,WAOvBC,EAAc,WAMdC,EAAgB,WAMhBC,EAAgB,WAMhBC,EAAa,WAMbC,EAAoB,UASpBC,EAAc,UAYdC,EAAqB,WAKrBC,EAAmB,WAQnBC,EAAgB,UAUhBC,EAAoB,WAOpBC,EAAoC,WAIpCC,EAA6B,WAW7BC,EAAW,WAOXC,EAAc,UAgBdC,EAAqB,WAIrBC,EAAmB,UAOnBC,EAAW,WAIXC,EAAmB,UAInBC,EAAoB"}
1	+ {"version":3,"file":"alert.styles.js","sources":["../../src/alert/alert.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Spacing } from \"../theme/tokens\";\n\nexport const tokens = {\n maxCollapsedHeight:\n \"--fds-internal-alert-textWrapperContainer-maxCollapsedHeight\",\n};\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\nexport const wrapper = css`\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n display: flex;\n border-left: ${Border[\"width-020\"]} ${Border[\"solid\"]};\n`;\n\nexport const wrapperError = css`\n background: ${Colour[\"bg-error\"]};\n border-left-color: ${Colour[\"border-error\"]};\n`;\n\nexport const wrapperSuccess = css`\n background: ${Colour[\"bg-success\"]};\n border-left-color: ${Colour[\"border-success\"]};\n`;\n\nexport const wrapperWarning = css`\n background: ${Colour[\"bg-warning\"]};\n border-left-color: ${Colour[\"border-warning\"]};\n`;\n\nexport const wrapperInfo = css`\n background: ${Colour[\"bg-info\"]};\n border-left-color: ${Colour[\"border-info\"]};\n`;\n\nexport const wrapperDescription = css`\n background: ${Colour[\"bg-strong\"]};\n border-left-color: ${Colour[\"border-strong\"]};\n`;\n\n// =============================================================================\n// ALERT ICON WRAPPER\n// =============================================================================\nexport const alertIconWrapper = css`\n display: flex;\n align-items: center;\n height: 1lh;\n margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const alertIconWrapperSmall = css`\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n`;\n\nexport const alertIconWrapperDefault = css`\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n`;\n\nexport const alertIconError = css`\n svg {\n color: ${Colour[\"icon-error\"]};\n }\n`;\n\nexport const alertIconSuccess = css`\n svg {\n color: ${Colour[\"icon-success\"]};\n }\n`;\n\nexport const alertIconWarning = css`\n svg {\n color: ${Colour[\"icon-warning\"]};\n }\n`;\n\nexport const alertIconInfo = css`\n svg {\n color: ${Colour[\"icon-info\"]};\n }\n`;\n\nexport const alertIconDescription = css`\n svg {\n color: ${Colour[\"icon-subtle\"]};\n }\n`;\n\n// =============================================================================\n// ACTION LINK TEXT\n// =============================================================================\nexport const actionLinkText = css`\n display: flex;\n align-items: center;\n align-self: flex-start;\n\n svg {\n height: 1rem;\n width: 1rem;\n margin-left: ${Spacing[\"spacing-4\"]};\n }\n`;\n\nexport const actionLinkTextDefault = css`\n ${Font[\"body-md-semibold\"]}\n margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const actionLinkTextSmall = css`\n ${Font[\"body-sm-semibold\"]}\n margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\n// =============================================================================\n// CONTENT CONTAINER\n// =============================================================================\nexport const contentContainer = css`\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow-wrap: anywhere;\n`;\n\n// =============================================================================\n// TEXT WRAPPER CONTAINER\n// =============================================================================\nexport const textWrapperContainer = css`\n display: flex;\n flex-direction: column;\n flex: 1;\n order: 1;\n`;\n\nexport const textWrapperContainerShowMoreWithLink = css`\n margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const textWrapperContainerCollapsed = css`\n ${tokens.maxCollapsedHeight}: initial;\n max-height: var(${tokens.maxCollapsedHeight});\n overflow: hidden;\n -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n`;\n\n// =============================================================================\n// TEXT WRAPPER\n// =============================================================================\nexport const textWrapper = css`\n color: ${Colour.text};\n`;\n\n// =============================================================================\n// SHOW MORE BUTTON\n// =============================================================================\nexport const showMoreButton = css`\n display: flex;\n align-items: center;\n align-self: flex-start;\n gap: ${Spacing[\"spacing-4\"]};\n margin-top: ${Spacing[\"spacing-8\"]};\n order: 2;\n\n cursor: pointer;\n user-select: none;\n border: none;\n background: transparent;\n\n color: ${Colour[\"text-primary\"]};\n`;\n\nexport const showMoreButtonDefault = css`\n ${Font[\"body-md-semibold\"]}\n`;\n\nexport const showMoreButtonSmall = css`\n ${Font[\"body-sm-semibold\"]}\n`;\n\n// =============================================================================\n// CHEVRON ICON\n// =============================================================================\nexport const chevronIcon = css`\n transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n`;\n\nexport const chevronIconExpanded = css`\n transform: rotate(180deg);\n`;\n\nexport const chevronIconCollapsed = css`\n transform: rotate(0deg);\n`;\n"],"names":["tokens","maxCollapsedHeight","wrapper","wrapperError","wrapperSuccess","wrapperWarning","wrapperInfo","wrapperDescription","alertIconWrapper","alertIconWrapperSmall","alertIconWrapperDefault","alertIconError","alertIconSuccess","alertIconWarning","alertIconInfo","alertIconDescription","actionLinkText","actionLinkTextDefault","actionLinkTextSmall","contentContainer","textWrapperContainer","textWrapperContainerShowMoreWithLink","textWrapperContainerCollapsed","textWrapper","showMoreButton","showMoreButtonDefault","showMoreButtonSmall","chevronIcon","chevronIconExpanded","chevronIconCollapsed"],"mappings":"uDAIO,MAAMA,EAAS,CAClBC,mBACI,gEAMKC,EAAO,UAMPC,EAAY,UAKZC,EAAc,UAKdC,EAAc,WAKdC,EAAW,WAKXC,EAAkB,UAQlBC,EAAgB,UAOhBC,EAAqB,WAOrBC,EAAuB,WAOvBC,EAAc,WAMdC,EAAgB,WAMhBC,EAAgB,WAMhBC,EAAa,WAMbC,EAAoB,UASpBC,EAAc,UAYdC,EAAqB,WAKrBC,EAAmB,WAQnBC,EAAgB,UAUhBC,EAAoB,WAOpBC,EAAoC,WAIpCC,EAA6B,WAW7BC,EAAW,WAOXC,EAAc,UAgBdC,EAAqB,WAIrBC,EAAmB,UAOnBC,EAAW,WAIXC,EAAmB,UAInBC,EAAoB"}

package/alert/alert.styles_patwo2.css ADDED Viewed

@@ -0,0 +1,28 @@
+.wa04j5f{padding:var(--fds-spacing-8) var(--fds-spacing-16);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-left:var(--fds-border-width-020) var(--fds-border-style-solid);}
+.we966c0{background:var(--fds-colour-bg-error);border-left-color:var(--fds-colour-border-error);}
+.wiv49ur{background:var(--fds-colour-bg-success);border-left-color:var(--fds-colour-border-success);}
+.w1rjxx7d{background:var(--fds-colour-bg-warning);border-left-color:var(--fds-colour-border-warning);}
+.w1xcaq6x{background:var(--fds-colour-bg-info);border-left-color:var(--fds-colour-border-info);}
+.w3tklvf{background:var(--fds-colour-bg-strong);border-left-color:var(--fds-colour-border-strong);}
+.a2kejy0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:1lh;margin-right:var(--fds-spacing-8);}
+.a1p0o35j svg{width:1.25rem;height:1.25rem;}
+.a1u5ns39 svg{width:1.5rem;height:1.5rem;}
+.a1v4ljri svg{color:var(--fds-colour-icon-error);}
+.a1vwvhsw svg{color:var(--fds-colour-icon-success);}
+.a1l988e7 svg{color:var(--fds-colour-icon-warning);}
+.a1tifh24 svg{color:var(--fds-colour-icon-info);}
+.amvh5gt svg{color:var(--fds-colour-icon-subtle);}
+.aesypwo{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-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;}.aesypwo svg{height:1rem;width:1rem;margin-left:var(--fds-spacing-4);}
+.a1a9q3y5{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);margin-top:var(--fds-spacing-8);}
+.a10b5gf8{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);margin-top:var(--fds-spacing-4);}
+.cg7mawv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;overflow-wrap:anywhere;}
+.t1npk24x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-order:1;-ms-flex-order:1;order:1;}
+.t11jn0l3{margin-bottom:var(--fds-spacing-8);}
+.t1fvdgaj{--fds-internal-alert-textWrapperContainer-maxCollapsedHeight:initial;max-height:var(--fds-internal-alert-textWrapperContainer-maxCollapsedHeight);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to bottom, black 50%, transparent 100%);mask-image:linear-gradient(to bottom, black 50%, transparent 100%);}
+.t1myaiqw{color:var(--fds-colour-text);}
+.swmwiyq{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-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;gap:var(--fds-spacing-4);margin-top:var(--fds-spacing-8);-webkit-order:2;-ms-flex-order:2;order:2;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;background:transparent;color:var(--fds-colour-text-primary);}
+.s1ypbatn{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);}
+.sxtdaq0{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);}
+.c19cf4gt{-webkit-transition:-webkit-transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);transition:transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);}
+.cnxzujv{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
+.c1u44bt8{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}

package/animations/loading-dots-spinner/loading-dots-spinner.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__awaiter as o,__rest as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import r from"clsx";import{lazy as i,useRef as s,useState as m,useEffect as n,Suspense as l}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{ComponentToken as a}from"../../theme/tokens/component.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as c}from"../../theme/utils/use-apply-styles.js";import{tokens as p,container as d,placeholder as u}from"./loading-dots-spinner.styles.js";const f=i((()=>o(void 0,void 0,void 0,(function*(){return{default:(yield import("./lottie-animation.js")).LottieLoadingDotsSpinner}})))),j=o=>{var{className:i,color:u}=o,j=t(o,["className","color"]);const v=s(null),[y,g]=m(void 0);return c(v,{[p.containerColor]:u||a.Animation["loading-dots-spinner-colour"]}),n((()=>{const o=v.current;if(!o)return;const t=getComputedStyle(o).getPropertyValue(p.containerColor).trim();g(t||void 0)}),[u]),e("div",Object.assign({ref:v},j,{className:r(d,i),children:e(l,{fallback:e(h,{}),children:e(f,{color:y})})}))},h=()=>e("div",{className:u});export{j as LoadingDotsSpinner};
+import{__awaiter as o,__rest as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import r from"clsx";import{lazy as i,useRef as s,useState as m,useEffect as n,Suspense as l}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{ComponentToken as a}from"../../theme/tokens/component.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as c}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{tokens as p,container as d,placeholder as u}from"./loading-dots-spinner.styles.js";const j=i((()=>o(void 0,void 0,void 0,(function*(){return{default:(yield import("./lottie-animation.js")).LottieLoadingDotsSpinner}})))),f=o=>{var{className:i,color:u}=o,f=t(o,["className","color"]);const v=s(null),[y,g]=m(void 0);return c(v,{[p.containerColor]:u||a.Animation["loading-dots-spinner-colour"]}),n((()=>{const o=v.current;if(!o)return;const t=getComputedStyle(o).getPropertyValue(p.containerColor).trim();g(t||void 0)}),[u]),e("div",Object.assign({ref:v},f,{className:r(d,i),children:e(l,{fallback:e(h,{}),children:e(j,{color:y})})}))},h=()=>e("div",{className:u});export{f as LoadingDotsSpinner};
 //# sourceMappingURL=loading-dots-spinner.js.map

package/animations/loading-dots-spinner/loading-dots-spinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"loading-dots-spinner.js","sources":["../../../src/animations/loading-dots-spinner/loading-dots-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { ComponentToken, useApplyStyle } from \"../../theme\";\nimport type { CustomisableAnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDotsSpinner = lazy(async () => ({\n default: (await import(\"./lottie-animation\")).LottieLoadingDotsSpinner,\n}));\n\nexport const LoadingDotsSpinner = ({\n className,\n color,\n ...otherProps\n}: CustomisableAnimationProps) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const [resolvedColor, setResolvedColor] = useState<string \| undefined>(\n undefined\n );\n\n useApplyStyle(containerRef, {\n [styles.tokens.containerColor]:\n color \|\| ComponentToken.Animation[\"loading-dots-spinner-colour\"],\n });\n\n useEffect(() => {\n const element = containerRef.current;\n if (!element) return;\n\n const computedColor = getComputedStyle(element)\n .getPropertyValue(styles.tokens.containerColor)\n .trim();\n\n setResolvedColor(computedColor \|\| undefined);\n }, [color]);\n\n return (\n <div\n ref={containerRef}\n {...otherProps}\n className={clsx(styles.container, className)}\n >\n <Suspense fallback={<Placeholder />}>\n <LottieLoadingDotsSpinner color={resolvedColor} />\n </Suspense>\n </div>\n );\n};\n\nconst Placeholder = () => {\n return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDotsSpinner","lazy","__awaiter","default","import","LoadingDotsSpinner","_a","className","color","otherProps","__rest","containerRef","useRef","resolvedColor","setResolvedColor","useState","undefined","useApplyStyle","styles.tokens","containerColor","ComponentToken","Animation","useEffect","element","current","computedColor","getComputedStyle","getPropertyValue","trim","_jsx","Object","assign","ref","clsx","styles.container","children","Suspense","fallback","Placeholder","styles.placeholder"],"mappings":"~~mqBAQA~~,MAAMA,EAA2BC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CAC9CC,eAAgBC,OAAO,0BAAuBJ,yBAChD,MAEWK,EAAsBC,QAAAC,UAC/BA,EAASC,MACTA,GAAKF,EACFG,EAAUC,EAAAJ,EAHkB,uBAK/B,MAAMK,EAAeC,EAAuB,OACrCC,EAAeC,GAAoBC,OACtCC,GAmBJ,OAhBAC,EAAcN,EAAc,CACxB,CAACO,EAAcC,gBACXX,GAASY,EAAeC,UAAU,iCAG1CC,GAAU,KACN,MAAMC,EAAUZ,EAAaa,QAC7B,IAAKD,EAAS,OAEd,MAAME,EAAgBC,iBAAiBH,GAClCI,iBAAiBT,EAAcC,gBAC/BS,OAELd,EAAiBW,QAAiBT,EAAU,GAC7C,CAACR,IAGAqB,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKrB,GACDF,EAAU,CACdF,UAAW0B,EAAKC,EAAkB3B,GAAU4B,SAE5CN,EAACO,GAASC,SAAUR,EAACS,MAAcH,SAC/BN,EAAC7B,EAAwB,CAACQ,MAAOK,QAEnC,EAIRyB,EAAc,IACTT,SAAKtB,UAAWgC"}
1	+ {"version":3,"file":"loading-dots-spinner.js","sources":["../../../src/animations/loading-dots-spinner/loading-dots-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { ComponentToken, useApplyStyle } from \"../../theme\";\nimport type { CustomisableAnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDotsSpinner = lazy(async () => ({\n default: (await import(\"./lottie-animation\")).LottieLoadingDotsSpinner,\n}));\n\nexport const LoadingDotsSpinner = ({\n className,\n color,\n ...otherProps\n}: CustomisableAnimationProps) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const [resolvedColor, setResolvedColor] = useState<string \| undefined>(\n undefined\n );\n\n useApplyStyle(containerRef, {\n [styles.tokens.containerColor]:\n color \|\| ComponentToken.Animation[\"loading-dots-spinner-colour\"],\n });\n\n useEffect(() => {\n const element = containerRef.current;\n if (!element) return;\n\n const computedColor = getComputedStyle(element)\n .getPropertyValue(styles.tokens.containerColor)\n .trim();\n\n setResolvedColor(computedColor \|\| undefined);\n }, [color]);\n\n return (\n <div\n ref={containerRef}\n {...otherProps}\n className={clsx(styles.container, className)}\n >\n <Suspense fallback={<Placeholder />}>\n <LottieLoadingDotsSpinner color={resolvedColor} />\n </Suspense>\n </div>\n );\n};\n\nconst Placeholder = () => {\n return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDotsSpinner","lazy","__awaiter","default","import","LoadingDotsSpinner","_a","className","color","otherProps","__rest","containerRef","useRef","resolvedColor","setResolvedColor","useState","undefined","useApplyStyle","styles.tokens","containerColor","ComponentToken","Animation","useEffect","element","current","computedColor","getComputedStyle","getPropertyValue","trim","_jsx","Object","assign","ref","clsx","styles.container","children","Suspense","fallback","Placeholder","styles.placeholder"],"mappings":"gtBAQA,MAAMA,EAA2BC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CAC9CC,eAAgBC,OAAO,0BAAuBJ,yBAChD,MAEWK,EAAsBC,QAAAC,UAC/BA,EAASC,MACTA,GAAKF,EACFG,EAAUC,EAAAJ,EAHkB,uBAK/B,MAAMK,EAAeC,EAAuB,OACrCC,EAAeC,GAAoBC,OACtCC,GAmBJ,OAhBAC,EAAcN,EAAc,CACxB,CAACO,EAAcC,gBACXX,GAASY,EAAeC,UAAU,iCAG1CC,GAAU,KACN,MAAMC,EAAUZ,EAAaa,QAC7B,IAAKD,EAAS,OAEd,MAAME,EAAgBC,iBAAiBH,GAClCI,iBAAiBT,EAAcC,gBAC/BS,OAELd,EAAiBW,QAAiBT,EAAU,GAC7C,CAACR,IAGAqB,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKrB,GACDF,EAAU,CACdF,UAAW0B,EAAKC,EAAkB3B,GAAU4B,SAE5CN,EAACO,GAASC,SAAUR,EAACS,MAAcH,SAC/BN,EAAC7B,EAAwB,CAACQ,MAAOK,QAEnC,EAIRyB,EAAc,IACTT,SAAKtB,UAAWgC"}

package/badge/badge.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import o from"clsx";import{useRef as s}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 a}from"../theme/utils/use-apply-styles.js";import{tokens as i,badge as m,badgeWrapper as n,badgeWrapperIsOverlay as d,badgeOverlay as l}from"./badge.styles.js";const c=new Set(["number","number-with-border","square-number"]),p=p=>{var{badgeOffset:u,children:f,className:h,color:v="default",count:b=0,"data-testid":j="badge",variant:g="number"}=p,x=e(p,["badgeOffset","children","className","color","count","data-testid","variant"]);const N=function(e){return e<=999?e.toString():1e3===e?"1K":"1K+"}(b),k=c.has(g),w=s(null);return a(w,{[i.wrapper.offsetX]:null==u?void 0:u[0],[i.wrapper.offsetY]:null==u?void 0:u[1]}),t("div",{className:o(void 0!==f&&l),children:[r("div",{ref:w,className:o(n,void 0!==f&&d),children:r("div",Object.assign({"data-testid":j,"data-variant":g,"data-color":v,className:o(m,h)},x,{children:k?N:null}))}),f]})};export{p as Badge};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import s from"clsx";import{useRef as o}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 a}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{tokens as i,badge as m,badgeWrapper as n,badgeWrapperIsOverlay as l,badgeOverlay as d}from"./badge.styles.js";const p=new Set(["number","number-with-border","square-number"]),c=c=>{var{badgeOffset:u,children:f,className:h,color:b="default",count:j=0,"data-testid":v="badge",variant:g="number"}=c,x=e(c,["badgeOffset","children","className","color","count","data-testid","variant"]);const y=function(e){return e<=999?e.toString():1e3===e?"1K":"1K+"}(j),N=p.has(g),k=o(null);return a(k,{[i.wrapper.offsetX]:null==u?void 0:u[0],[i.wrapper.offsetY]:null==u?void 0:u[1]}),t("span",{className:s(void 0!==f&&d),children:[r("span",{ref:k,className:s(n,void 0!==f&&l),children:r("span",Object.assign({"data-testid":v,"data-variant":g,"data-color":b,className:s(m,h)},x,{children:N?y:null}))}),f]})};export{c as Badge};
 //# sourceMappingURL=badge.js.map

package/badge/badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.js","sources":["../../src/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./badge.styles\";\nimport type { BadgeProps, BadgeVariant } from \"./types\";\n\nfunction getDisplayCount(count: number) {\n if (count <= 999) return count.toString();\n if (count === 1000) return \"1K\";\n return \"1K+\";\n}\nconst variantsToShowCount: Set<BadgeVariant> = new Set([\n \"number\",\n \"number-with-border\",\n \"square-number\",\n]);\n\nexport const Badge = ({\n badgeOffset,\n children,\n className,\n color = \"default\",\n count = 0,\n \"data-testid\": testId = \"badge\",\n variant = \"number\",\n ...otherProps\n}: BadgeProps) => {\n // =============================================================================\n // CONST\n // =============================================================================\n const displayCount = getDisplayCount(count);\n const shouldShowCount = variantsToShowCount.has(variant);\n\n // =============================================================================\n // REFS\n // =============================================================================\n const wrapperRef = useRef<~~HTMLDivElement~~>(null);\n\n useApplyStyle(wrapperRef, {\n [styles.tokens.wrapper.offsetX]: badgeOffset?.[0],\n [styles.tokens.wrapper.offsetY]: badgeOffset?.[1],\n });\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <~~div~~ className={clsx(children !== undefined && styles.badgeOverlay)}>\n <~~div~~\n ref={wrapperRef}\n className={clsx(\n styles.badgeWrapper,\n children !== undefined && styles.badgeWrapperIsOverlay\n )}\n >\n <~~div~~\n data-testid={testId}\n data-variant={variant}\n data-color={color}\n className={clsx(styles.badge, className)}\n {...otherProps}\n >\n {shouldShowCount ? displayCount : null}\n </~~div~~>\n </~~div~~>\n {children}\n </~~div~~>\n );\n};\n"],"names":["variantsToShowCount","Set","Badge","_a","badgeOffset","children","className","color","count","testId","variant","otherProps","__rest","displayCount","toString","getDisplayCount","shouldShowCount","has","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","offsetX","offsetY","_jsxs","clsx","undefined","styles.badgeOverlay","_jsx","ref","styles.badgeWrapper","styles.badgeWrapperIsOverlay","Object","assign","styles.badge"],"mappings":"~~2iBAYA~~,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,kBAGSC,EAASC,IAAA,IAAAC,YAClBA,EAAWC,SACXA,EAAQC,UACRA,EAASC,MACTA,EAAQ,UAASC,MACjBA,EAAQ,EACR,cAAeC,EAAS,QAAOC,QAC/BA,EAAU,UAAQP,EACfQ,EAAUC,EAAAT,EARK,CAAA,cAAA,WAAA,YAAA,QAAA,QAAA,cAAA,YAalB,MAAMU,EAxBV,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,CAoByBO,CAAgBP,GAC/BQ,EAAkBhB,EAAoBiB,IAAIP,GAK1CQ,EAAaC,~~EAAuB~~,~~MAU1C~~,OARAC,EAAcF,EAAY,CACtB,CAACG,EAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,EAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,EAAA,~~MAAA~~,~~CAAKnB~~,UAAWoB,OAAkBC,IAAbtB,GAA0BuB,~~aAC3CC~~,EAAA,~~MAAA~~,CACIC,IAAKZ,EACLZ,UAAWoB,EACPK,OACaJ,IAAbtB,GAA0B2B,GAC7B3B,SAEDwB,EAAA,~~MAAAI~~,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAKS,EAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,~~IACC~~"}
1	+ {"version":3,"file":"badge.js","sources":["../../src/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./badge.styles\";\nimport type { BadgeProps, BadgeVariant } from \"./types\";\n\nfunction getDisplayCount(count: number) {\n if (count <= 999) return count.toString();\n if (count === 1000) return \"1K\";\n return \"1K+\";\n}\nconst variantsToShowCount: Set<BadgeVariant> = new Set([\n \"number\",\n \"number-with-border\",\n \"square-number\",\n]);\n\nexport const Badge = ({\n badgeOffset,\n children,\n className,\n color = \"default\",\n count = 0,\n \"data-testid\": testId = \"badge\",\n variant = \"number\",\n ...otherProps\n}: BadgeProps) => {\n // =============================================================================\n // CONST\n // =============================================================================\n const displayCount = getDisplayCount(count);\n const shouldShowCount = variantsToShowCount.has(variant);\n\n // =============================================================================\n // REFS\n // =============================================================================\n const wrapperRef = useRef<HTMLSpanElement>(null);\n\n useApplyStyle(wrapperRef, {\n [styles.tokens.wrapper.offsetX]: badgeOffset?.[0],\n [styles.tokens.wrapper.offsetY]: badgeOffset?.[1],\n });\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <span className={clsx(children !== undefined && styles.badgeOverlay)}>\n <span\n ref={wrapperRef}\n className={clsx(\n styles.badgeWrapper,\n children !== undefined && styles.badgeWrapperIsOverlay\n )}\n >\n <span\n data-testid={testId}\n data-variant={variant}\n data-color={color}\n className={clsx(styles.badge, className)}\n {...otherProps}\n >\n {shouldShowCount ? displayCount : null}\n </span>\n </span>\n {children}\n </span>\n );\n};\n"],"names":["variantsToShowCount","Set","Badge","_a","badgeOffset","children","className","color","count","testId","variant","otherProps","__rest","displayCount","toString","getDisplayCount","shouldShowCount","has","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","offsetX","offsetY","_jsxs","clsx","undefined","styles.badgeOverlay","_jsx","ref","styles.badgeWrapper","styles.badgeWrapperIsOverlay","Object","assign","styles.badge"],"mappings":"qlBAYA,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,kBAGSC,EAASC,IAAA,IAAAC,YAClBA,EAAWC,SACXA,EAAQC,UACRA,EAASC,MACTA,EAAQ,UAASC,MACjBA,EAAQ,EACR,cAAeC,EAAS,QAAOC,QAC/BA,EAAU,UAAQP,EACfQ,EAAUC,EAAAT,EARK,CAAA,cAAA,WAAA,YAAA,QAAA,QAAA,cAAA,YAalB,MAAMU,EAxBV,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,CAoByBO,CAAgBP,GAC/BQ,EAAkBhB,EAAoBiB,IAAIP,GAK1CQ,EAAaC,EAAwB,MAU3C,OARAC,EAAcF,EAAY,CACtB,CAACG,EAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,EAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,EAAA,OAAA,CAAMnB,UAAWoB,OAAkBC,IAAbtB,GAA0BuB,aAC5CC,EAAA,OAAA,CACIC,IAAKZ,EACLZ,UAAWoB,EACPK,OACaJ,IAAbtB,GAA0B2B,GAC7B3B,SAEDwB,EAAA,OAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAKS,EAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,IACE"}

package/badge/badge.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./badge.styles_1yrxocm.css";const e={wrapper:{offsetX:"--fds-internal-badge-wrapper-offsetX",offsetY:"--fds-internal-badge-wrapper-offsetY"}},s="b12fiya5",t="b1sxe5ht",f="bt512pc",r="bnm5diy";export{r as badge,s as badgeOverlay,t as badgeWrapper,f as badgeWrapperIsOverlay,e as tokens};
+import"./badge.styles_1c3c6wj.css";const e={wrapper:{offsetX:"--fds-internal-badge-wrapper-offsetX",offsetY:"--fds-internal-badge-wrapper-offsetY"}},s="b12fiya5",t="b1sxe5ht",f="bt512pc",a="bnm5diy";export{a as badge,s as badgeOverlay,t as badgeWrapper,f as badgeWrapperIsOverlay,e as tokens};
 //# sourceMappingURL=badge.styles.js.map

package/badge/badge.styles_1c3c6wj.css ADDED Viewed

@@ -0,0 +1,16 @@
+.b12fiya5{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}
+.bt512pc{position:absolute;top:0;right:0;-webkit-transform:translate(50%, -25%) translate(
+            var(--fds-internal-badge-wrapper-offsetX, 0px),
+            var(--fds-internal-badge-wrapper-offsetY, 0px)
+        );-moz-transform:translate(50%, -25%) translate(
+            var(--fds-internal-badge-wrapper-offsetX, 0px),
+            var(--fds-internal-badge-wrapper-offsetY, 0px)
+        );-ms-transform:translate(50%, -25%) translate(
+            var(--fds-internal-badge-wrapper-offsetX, 0px),
+            var(--fds-internal-badge-wrapper-offsetY, 0px)
+        );transform:translate(50%, -25%) translate(
+            var(--fds-internal-badge-wrapper-offsetX, 0px),
+            var(--fds-internal-badge-wrapper-offsetY, 0px)
+        );}
+.bnm5diy{background-color:var(--fds-colour-bg-primary);color:var(--fds-colour-text-inverse);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}.bnm5diy[data-variant="number"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-full);}.bnm5diy[data-variant="number-with-border"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-full);box-shadow:0 0 0 var(--fds-border-width-020) var(--fds-colour-bg);}.bnm5diy[data-variant="dot"]{border-radius:50%;width:0.5rem;height:0.5rem;}.bnm5diy[data-variant="dot-with-border"]{border-radius:50%;width:0.5rem;height:0.5rem;box-shadow:0 0 0 var(--fds-border-width-020) var(--fds-colour-bg);}.bnm5diy[data-variant="square-number"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-sm);padding:0.25rem 0.4375rem;}.bnm5diy[data-variant="square-number"][data-color="default"]{background-color:var(--fds-colour-bg-primary-subtler);color:var(--fds-colour-text-primary);}.bnm5diy[data-color="important"]{background-color:var(--fds-colour-icon-error);}

package/badge/types.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 export type BadgeVariant = "number" | "number-with-border" | "dot" | "dot-with-border" | "square-number";
 export type BadgeColor = "default" | "important";
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     badgeOffset?: [string, string] | undefined;
     children?: JSX.Element | undefined;
     color?: BadgeColor | undefined;

package/box-container/box-container.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i,Fragment as a}from"react/jsx-runtime";import{ChevronDownIcon as r}from"@lifesg/react-icons/chevron-down";import{ExclamationCircleFillIcon as l}from"@lifesg/react-icons/exclamation-circle-fill";import{useSpring as o,animated as s}from"@react-spring/web";import n from"clsx";import{useState as d,useRef as c}from"react";import{useResizeDetector as m}from"../external/react-resize-detector/build/index.esm.js";import{VisuallyHidden as p,inertValue as h}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as u}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useSafeMaxWidthMediaQuery as f}from"../theme/utils/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as b}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useDesignToken as j}from"../theme/utils/use-design-token.js";import{labelWrapper as v,labelText as x,callToActionContainer as N,callToActionContainerCollapsible as g,header as y,headerInteractive as k,container as C,alertIcon as w,alertIconError as T,alertIconWarning as I,handle as S,handleIcon as $,handleIconContainer as q,handleIconContainerExpanded as A,handleIconContainerCollapsed as H,expandable as _,childContainer as z,nonExpandable as O}from"./box-container.styles.js";const P=P=>{var{children:B,title:D,collapsible:E=!0,expanded:F=!1,callToActionComponent:G,displayState:J="default",subComponentTestIds:K,clickableHeader:L,className:M}=P,Q=e(P,["children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","className"]);const[R,U]=d(!E||F),V=m(),W=V.ref,X=j(u["sm-max"]),Y=f(X),Z=L&&E,ee=b(),te=`${ee}-content`,ie=`${ee}-header`,ae=c(null),re=e=>{e.stopPropagation(),U(!R)},le=o({height:R?V.height:0}),oe=()=>E&&i("button",{className:S,onClick:re,type:"button","aria-labelledby":ie,"aria-controls":te,"aria-disabled":!E,"aria-expanded":R,"data-testid":(null==K?void 0:K.handle)||"handle",children:i("div",{className:n(q,R?A:H),ref:ae,"aria-hidden":!0,children:i(r,{className:$})})});return t("section",Object.assign({},Q,{className:n(C,M),"aria-labelledby":ie,role:"region",title:"string"==typeof D?D:void 0,children:[t("div",{className:n(y,Z&&k),"data-testid":"header",onClick:Z?re:void 0,children:[t("div",{className:v,role:"status",id:ie,children:[t("div",{className:x,"data-testid":(null==K?void 0:K.title)||"title",children:[D,"default"!==J&&i(a,{children:i(p,{children:J})})]}),(()=>{switch(J){case"error":case"warning":return i(l,{className:n(w,"error"===J&&T,"warning"===J&&I),"data-testid":(null==K?void 0:K.displayStateIcon)||`${J}-icon`,"aria-label":J});default:return null}})(),Y&&oe()]}),G&&i("div",{className:n(N,E&&g),"data-testid":"call-to-action-container",children:G}),!Y&&oe()]}),E?i(s.div,{className:_,style:le,"data-testid":"expandable-container",id:te,children:i("div",{className:z,ref:W,inert:h(!R),children:B})}):i("div",{className:O,"data-testid":"non-expandable-container",children:i("div",{className:z,children:B})})]}))};export{P as BoxContainer};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i,Fragment as a}from"react/jsx-runtime";import{ChevronDownIcon as r}from"@lifesg/react-icons/chevron-down";import{ExclamationCircleFillIcon as l}from"@lifesg/react-icons/exclamation-circle-fill";import{useSpring as s,animated as o}from"@react-spring/web";import n from"clsx";import{useState as d,useRef as c}from"react";import{useResizeDetector as m}from"../external/react-resize-detector/build/index.esm.js";import{VisuallyHidden as p,inertValue as h}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as u}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useMaxWidthMediaQuery as b}from"../theme/utils/use-media-query.js";import{labelWrapper as f,labelText as v,callToActionContainer as j,callToActionContainerCollapsible as x,header as N,headerInteractive as y,container as g,alertIcon as k,alertIconError as C,alertIconWarning as w,handle as T,handleIcon as I,handleIconContainer as S,handleIconContainerExpanded as $,handleIconContainerCollapsed as q,expandable as A,childContainer as H,nonExpandable as _}from"./box-container.styles.js";const z=z=>{var{children:O,title:P,collapsible:B=!0,expanded:D=!1,callToActionComponent:E,displayState:F="default",subComponentTestIds:G,clickableHeader:J,className:K}=z,L=e(z,["children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","className"]);const[M,Q]=d(!B||D),R=m(),U=R.ref,V=b("sm"),W=J&&B,X=u(),Y=`${X}-content`,Z=`${X}-header`,ee=c(null),te=e=>{e.stopPropagation(),Q(!M)},ie=s({height:M?R.height:0}),ae=()=>B&&i("button",{className:T,onClick:te,type:"button","aria-labelledby":Z,"aria-controls":Y,"aria-disabled":!B,"aria-expanded":M,"data-testid":(null==G?void 0:G.handle)||"handle",children:i("div",{className:n(S,M?$:q),ref:ee,"aria-hidden":!0,children:i(r,{className:I})})});return t("section",Object.assign({},L,{className:n(g,K),"aria-labelledby":Z,role:"region",title:"string"==typeof P?P:void 0,children:[t("div",{className:n(N,W&&y),"data-testid":"header",onClick:W?te:void 0,children:[t("div",{className:f,role:"status",id:Z,children:[t("div",{className:v,"data-testid":(null==G?void 0:G.title)||"title",children:[P,"default"!==F&&i(a,{children:i(p,{children:F})})]}),(()=>{switch(F){case"error":case"warning":return i(l,{className:n(k,"error"===F&&C,"warning"===F&&w),"data-testid":(null==G?void 0:G.displayStateIcon)||`${F}-icon`,"aria-label":F});default:return null}})(),V&&ae()]}),E&&i("div",{className:n(j,B&&x),"data-testid":"call-to-action-container",children:E}),!V&&ae()]}),B?i(o.div,{className:A,style:ie,"data-testid":"expandable-container",id:Y,children:i("div",{className:H,ref:U,inert:h(!M),children:O})}):i("div",{className:_,"data-testid":"non-expandable-container",children:i("div",{className:H,children:O})})]}))};export{z as BoxContainer};
 //# sourceMappingURL=box-container.js.map

package/box-container/box-container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"box-container.js","sources":["../../src/box-container/box-container.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n Breakpoint,\n useDesignToken,\n useSafeMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./box-container.styles\";\nimport type { BoxContainerProps } from \"./types\";\n\nexport const BoxContainer = ({\n children,\n title,\n collapsible = true,\n expanded = false,\n callToActionComponent,\n displayState = \"default\",\n subComponentTestIds,\n clickableHeader,\n className,\n ...otherProps\n}: BoxContainerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [showExpanded, setShowExpanded] = useState<boolean>(\n !collapsible ? true : expanded\n );\n const resizeDetector = useResizeDetector();\n const childRef = resizeDetector.ref;\n const mobileBreakpoint = useDesignToken(Breakpoint[\"sm-max\"]);\n const isMobile = useSafeMaxWidthMediaQuery(mobileBreakpoint);\n const interactiveHeader = clickableHeader && collapsible;\n const internalId = useId();\n const contentId = `${internalId}-content`;\n const headerId = `${internalId}-header`;\n const handleIconRef = useRef<HTMLDivElement>(null);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const onHandleClick = (event: React.MouseEvent) => {\n // to prevent it triggers twice when click on button as clickableHeader enable\n event.stopPropagation();\n setShowExpanded(!showExpanded);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n // React spring animation configuration\n const expandableStyles = useSpring({\n height: showExpanded ? resizeDetector.height : 0,\n });\n\n const renderChildContent = () => {\n if (collapsible) {\n return (\n <animated.div\n className={styles.expandable}\n style={expandableStyles}\n data-testid={\"expandable-container\"}\n id={contentId}\n >\n <div\n className={styles.childContainer}\n ref={childRef}\n inert={inertValue(!showExpanded)}\n >\n {children}\n </div>\n </animated.div>\n );\n }\n\n return (\n <div\n className={styles.nonExpandable}\n data-testid=\"non-expandable-container\"\n >\n <div className={styles.childContainer}>{children}</div>\n </div>\n );\n };\n\n const renderDisplayIcon = () => {\n switch (displayState) {\n case \"error\":\n case \"warning\":\n return (\n <ExclamationCircleFillIcon\n className={clsx(\n styles.alertIcon,\n displayState === \"error\" && styles.alertIconError,\n displayState === \"warning\" &&\n styles.alertIconWarning\n )}\n data-testid={\n subComponentTestIds?.displayStateIcon \|\|\n `${displayState}-icon`\n }\n aria-label={displayState}\n />\n );\n default:\n return null;\n }\n };\n\n const renderHandleIcon = () => {\n return (\n collapsible && (\n <button\n className={styles.handle}\n onClick={onHandleClick}\n type=\"button\"\n aria-labelledby={headerId}\n aria-controls={contentId}\n aria-disabled={!collapsible} // remains focusable\n aria-expanded={showExpanded}\n data-testid={subComponentTestIds?.handle \|\| \"handle\"}\n >\n <div\n className={clsx(\n styles.handleIconContainer,\n showExpanded\n ? styles.handleIconContainerExpanded\n : styles.handleIconContainerCollapsed\n )}\n ref={handleIconRef}\n aria-hidden\n >\n <ChevronDownIcon className={styles.handleIcon} />\n </div>\n </button>\n )\n );\n };\n\n return (\n <section\n {...otherProps}\n className={clsx(styles.container, className)}\n aria-labelledby={headerId}\n role=\"region\"\n title={typeof title === \"string\" ? title : undefined}\n >\n <div\n className={clsx(\n styles.header,\n interactiveHeader && styles.headerInteractive\n )}\n data-testid=\"header\"\n onClick={interactiveHeader ? onHandleClick : undefined}\n >\n <div\n className={styles.labelWrapper}\n role={\"status\"}\n id={headerId}\n >\n <div\n className={styles.labelText}\n data-testid={subComponentTestIds?.title \|\| \"title\"}\n >\n {title}\n {displayState !== \"default\" && (\n <>\n <VisuallyHidden>{displayState}</VisuallyHidden>\n </>\n )}\n </div>\n {renderDisplayIcon()}\n {isMobile && renderHandleIcon()}\n </div>\n {callToActionComponent && (\n <div\n className={clsx(\n styles.callToActionContainer,\n collapsible &&\n styles.callToActionContainerCollapsible\n )}\n data-testid=\"call-to-action-container\"\n >\n {callToActionComponent}\n </div>\n )}\n\n {!isMobile && renderHandleIcon()}\n </div>\n {renderChildContent()}\n </section>\n );\n};\n"],"names":["BoxContainer","_a","children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","className","otherProps","__rest","showExpanded","setShowExpanded","useState","resizeDetector","useResizeDetector","childRef","ref","mobileBreakpoint","useDesignToken","Breakpoint","isMobile","useSafeMaxWidthMediaQuery","interactiveHeader","internalId","useId","contentId","headerId","handleIconRef","useRef","onHandleClick","event","stopPropagation","expandableStyles","useSpring","height","renderHandleIcon","_jsx","styles.handle","onClick","type","handle","clsx","styles.handleIconContainer","styles.handleIconContainerExpanded","styles.handleIconContainerCollapsed","ChevronDownIcon","styles.handleIcon","_jsxs","Object","assign","styles.container","role","undefined","styles.header","styles.headerInteractive","styles.labelWrapper","id","styles.labelText","_Fragment","VisuallyHidden","ExclamationCircleFillIcon","styles.alertIcon","styles.alertIconError","styles.alertIconWarning","displayStateIcon","renderDisplayIcon","styles.callToActionContainer","styles.callToActionContainerCollapsible","animated","div","styles.expandable","style","styles.childContainer","inert","inertValue","styles.nonExpandable"],"mappings":"kkDAiBO,MAAMA,EAAgBC,IAAA,IAAAC,SACzBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,SAClBA,GAAW,EAAKC,sBAChBA,EAAqBC,aACrBA,EAAe,UAASC,oBACxBA,EAAmBC,gBACnBA,EAAeC,UACfA,GAAST,EACNU,EAAUC,EAAAX,EAVY,CAAA,WAAA,QAAA,cAAA,WAAA,wBAAA,eAAA,sBAAA,kBAAA,cAezB,MAAOY,EAAcC,GAAmBC,GACnCX,GAAqBC,GAEpBW,EAAiBC,IACjBC,EAAWF,EAAeG,IAC1BC,EAAmBC,EAAeC,EAAW,WAC7CC,EAAWC,EAA0BJ,GACrCK,EAAoBhB,GAAmBL,EACvCsB,GAAaC,IACbC,GAAY,GAAGF,aACfG,GAAW,GAAGH,YACdI,GAAgBC,EAAuB,MAKvCC,GAAiBC,IAEnBA,EAAMC,kBACNpB,GAAiBD,EAAa,EAO5BsB,GAAmBC,EAAU,CAC/BC,OAAQxB,EAAeG,EAAeqB,OAAS,IAyD7CC,GAAmB,IAEjBlC,GACImC,YACI7B,UAAW8B,EACXC,QAAST,GACTU,KAAK,SAAQ,kBACIb,GAAQ,gBACVD,GAAS,iBACRxB,EAAW,gBACZS,iBACFL,aAAmB,EAAnBA,EAAqBmC,SAAU,SAAQzC,SAEpDqC,EAAA,MAAA,CACI7B,UAAWkC,EACPC,EACAhC,EACMiC,EACAC,GAEV5B,IAAKW,GAAa,eAAA,EAAA5B,SAGlBqC,EAACS,EAAe,CAACtC,UAAWuC,QAOhD,OACIC,EAAA,UAAAC,OAAAC,OAAA,GACQzC,EAAU,CACdD,UAAWkC,EAAKS,EAAkB3C,GAAU,kBAC3BmB,GACjByB,KAAK,SACLnD,MAAwB,iBAAVA,EAAqBA,OAAQoD,EAASrD,SAAA,CAEpDgD,EAAA,MAAA,CACIxC,UAAWkC,EACPY,EACA/B,GAAqBgC,GACxB,cACW,SACZhB,QAAShB,EAAoBO,QAAgBuB,YAE7CL,EAAA,MAAA,CACIxC,UAAWgD,EACXJ,KAAM,SACNK,GAAI9B,GAAQ3B,SAAA,CAEZgD,EAAA,MAAA,CACIxC,UAAWkD,EAAgB,eACdpD,aAAmB,EAAnBA,EAAqBL,QAAS,QAAOD,SAAA,CAEjDC,EACiB,YAAjBI,GACGgC,EAAAsB,EAAA,CAAA3D,SACIqC,EAACuB,YAAgBvD,SAlFnB,MACtB,OAAQA,GACJ,IAAK,QACL,IAAK,UACD,OACIgC,EAACwB,EAAyB,CACtBrD,UAAWkC,EACPoB,EACiB,UAAjBzD,GAA4B0D,EACX,YAAjB1D,GACI2D,GACP,eAEG1D,aAAmB,EAAnBA,EAAqB2D,mBACrB,GAAG5D,SAAmB,aAEdA,IAGxB,QACI,OAAO,OAkEF6D,GACA7C,GAAYe,QAEhBhC,GACGiC,EAAA,MAAA,CACI7B,UAAWkC,EACPyB,EACAjE,GACIkE,GACP,cACW,2BAA0BpE,SAErCI,KAIPiB,GAAYe,QAnIlBlC,EAEImC,EAACgC,EAASC,IAAG,CACT9D,UAAW+D,EACXC,MAAOvC,GAAgB,cACV,uBACbwB,GAAI/B,GAAS1B,SAEbqC,SACI7B,UAAWiE,EACXxD,IAAKD,EACL0D,MAAOC,GAAYhE,YAElBX,MAObqC,SACI7B,UAAWoE,gBACC,2BAA0B5E,SAEtCqC,SAAK7B,UAAWiE,WAAwBzE,SA8GtC"}
1	+ {"version":3,"file":"box-container.js","sources":["../../src/box-container/box-container.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./box-container.styles\";\nimport type { BoxContainerProps } from \"./types\";\n\nexport const BoxContainer = ({\n children,\n title,\n collapsible = true,\n expanded = false,\n callToActionComponent,\n displayState = \"default\",\n subComponentTestIds,\n clickableHeader,\n className,\n ...otherProps\n}: BoxContainerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [showExpanded, setShowExpanded] = useState<boolean>(\n !collapsible ? true : expanded\n );\n const resizeDetector = useResizeDetector();\n const childRef = resizeDetector.ref;\n const isMobile = useMaxWidthMediaQuery(\"sm\");\n const interactiveHeader = clickableHeader && collapsible;\n const internalId = useId();\n const contentId = `${internalId}-content`;\n const headerId = `${internalId}-header`;\n const handleIconRef = useRef<HTMLDivElement>(null);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const onHandleClick = (event: React.MouseEvent) => {\n // to prevent it triggers twice when click on button as clickableHeader enable\n event.stopPropagation();\n setShowExpanded(!showExpanded);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n // React spring animation configuration\n const expandableStyles = useSpring({\n height: showExpanded ? resizeDetector.height : 0,\n });\n\n const renderChildContent = () => {\n if (collapsible) {\n return (\n <animated.div\n className={styles.expandable}\n style={expandableStyles}\n data-testid={\"expandable-container\"}\n id={contentId}\n >\n <div\n className={styles.childContainer}\n ref={childRef}\n inert={inertValue(!showExpanded)}\n >\n {children}\n </div>\n </animated.div>\n );\n }\n\n return (\n <div\n className={styles.nonExpandable}\n data-testid=\"non-expandable-container\"\n >\n <div className={styles.childContainer}>{children}</div>\n </div>\n );\n };\n\n const renderDisplayIcon = () => {\n switch (displayState) {\n case \"error\":\n case \"warning\":\n return (\n <ExclamationCircleFillIcon\n className={clsx(\n styles.alertIcon,\n displayState === \"error\" && styles.alertIconError,\n displayState === \"warning\" &&\n styles.alertIconWarning\n )}\n data-testid={\n subComponentTestIds?.displayStateIcon \|\|\n `${displayState}-icon`\n }\n aria-label={displayState}\n />\n );\n default:\n return null;\n }\n };\n\n const renderHandleIcon = () => {\n return (\n collapsible && (\n <button\n className={styles.handle}\n onClick={onHandleClick}\n type=\"button\"\n aria-labelledby={headerId}\n aria-controls={contentId}\n aria-disabled={!collapsible} // remains focusable\n aria-expanded={showExpanded}\n data-testid={subComponentTestIds?.handle \|\| \"handle\"}\n >\n <div\n className={clsx(\n styles.handleIconContainer,\n showExpanded\n ? styles.handleIconContainerExpanded\n : styles.handleIconContainerCollapsed\n )}\n ref={handleIconRef}\n aria-hidden\n >\n <ChevronDownIcon className={styles.handleIcon} />\n </div>\n </button>\n )\n );\n };\n\n return (\n <section\n {...otherProps}\n className={clsx(styles.container, className)}\n aria-labelledby={headerId}\n role=\"region\"\n title={typeof title === \"string\" ? title : undefined}\n >\n <div\n className={clsx(\n styles.header,\n interactiveHeader && styles.headerInteractive\n )}\n data-testid=\"header\"\n onClick={interactiveHeader ? onHandleClick : undefined}\n >\n <div\n className={styles.labelWrapper}\n role={\"status\"}\n id={headerId}\n >\n <div\n className={styles.labelText}\n data-testid={subComponentTestIds?.title \|\| \"title\"}\n >\n {title}\n {displayState !== \"default\" && (\n <>\n <VisuallyHidden>{displayState}</VisuallyHidden>\n </>\n )}\n </div>\n {renderDisplayIcon()}\n {isMobile && renderHandleIcon()}\n </div>\n {callToActionComponent && (\n <div\n className={clsx(\n styles.callToActionContainer,\n collapsible &&\n styles.callToActionContainerCollapsible\n )}\n data-testid=\"call-to-action-container\"\n >\n {callToActionComponent}\n </div>\n )}\n\n {!isMobile && renderHandleIcon()}\n </div>\n {renderChildContent()}\n </section>\n );\n};\n"],"names":["BoxContainer","_a","children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","className","otherProps","__rest","showExpanded","setShowExpanded","useState","resizeDetector","useResizeDetector","childRef","ref","isMobile","useMaxWidthMediaQuery","interactiveHeader","internalId","useId","contentId","headerId","handleIconRef","useRef","onHandleClick","event","stopPropagation","expandableStyles","useSpring","height","renderHandleIcon","_jsx","styles.handle","onClick","type","handle","clsx","styles.handleIconContainer","styles.handleIconContainerExpanded","styles.handleIconContainerCollapsed","ChevronDownIcon","styles.handleIcon","_jsxs","Object","assign","styles.container","role","undefined","styles.header","styles.headerInteractive","styles.labelWrapper","id","styles.labelText","_Fragment","VisuallyHidden","ExclamationCircleFillIcon","styles.alertIcon","styles.alertIconError","styles.alertIconWarning","displayStateIcon","renderDisplayIcon","styles.callToActionContainer","styles.callToActionContainerCollapsible","animated","div","styles.expandable","style","styles.childContainer","inert","inertValue","styles.nonExpandable"],"mappings":"m8CAaO,MAAMA,EAAgBC,IAAA,IAAAC,SACzBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,SAClBA,GAAW,EAAKC,sBAChBA,EAAqBC,aACrBA,EAAe,UAASC,oBACxBA,EAAmBC,gBACnBA,EAAeC,UACfA,GAAST,EACNU,EAAUC,EAAAX,EAVY,CAAA,WAAA,QAAA,cAAA,WAAA,wBAAA,eAAA,sBAAA,kBAAA,cAezB,MAAOY,EAAcC,GAAmBC,GACnCX,GAAqBC,GAEpBW,EAAiBC,IACjBC,EAAWF,EAAeG,IAC1BC,EAAWC,EAAsB,MACjCC,EAAoBb,GAAmBL,EACvCmB,EAAaC,IACbC,EAAY,GAAGF,YACfG,EAAW,GAAGH,WACdI,GAAgBC,EAAuB,MAKvCC,GAAiBC,IAEnBA,EAAMC,kBACNjB,GAAiBD,EAAa,EAO5BmB,GAAmBC,EAAU,CAC/BC,OAAQrB,EAAeG,EAAekB,OAAS,IAyD7CC,GAAmB,IAEjB/B,GACIgC,YACI1B,UAAW2B,EACXC,QAAST,GACTU,KAAK,SAAQ,kBACIb,EAAQ,gBACVD,EAAS,iBACRrB,EAAW,gBACZS,iBACFL,aAAmB,EAAnBA,EAAqBgC,SAAU,SAAQtC,SAEpDkC,EAAA,MAAA,CACI1B,UAAW+B,EACPC,EACA7B,EACM8B,EACAC,GAEVzB,IAAKQ,GAAa,eAAA,EAAAzB,SAGlBkC,EAACS,EAAe,CAACnC,UAAWoC,QAOhD,OACIC,EAAA,UAAAC,OAAAC,OAAA,GACQtC,EAAU,CACdD,UAAW+B,EAAKS,EAAkBxC,GAAU,kBAC3BgB,EACjByB,KAAK,SACLhD,MAAwB,iBAAVA,EAAqBA,OAAQiD,EAASlD,SAAA,CAEpD6C,EAAA,MAAA,CACIrC,UAAW+B,EACPY,EACA/B,GAAqBgC,GACxB,cACW,SACZhB,QAAShB,EAAoBO,QAAgBuB,YAE7CL,EAAA,MAAA,CACIrC,UAAW6C,EACXJ,KAAM,SACNK,GAAI9B,EAAQxB,SAAA,CAEZ6C,EAAA,MAAA,CACIrC,UAAW+C,EAAgB,eACdjD,aAAmB,EAAnBA,EAAqBL,QAAS,QAAOD,SAAA,CAEjDC,EACiB,YAAjBI,GACG6B,EAAAsB,EAAA,CAAAxD,SACIkC,EAACuB,YAAgBpD,SAlFnB,MACtB,OAAQA,GACJ,IAAK,QACL,IAAK,UACD,OACI6B,EAACwB,EAAyB,CACtBlD,UAAW+B,EACPoB,EACiB,UAAjBtD,GAA4BuD,EACX,YAAjBvD,GACIwD,GACP,eAEGvD,aAAmB,EAAnBA,EAAqBwD,mBACrB,GAAGzD,SAAmB,aAEdA,IAGxB,QACI,OAAO,OAkEF0D,GACA7C,GAAYe,QAEhB7B,GACG8B,EAAA,MAAA,CACI1B,UAAW+B,EACPyB,EACA9D,GACI+D,GACP,cACW,2BAA0BjE,SAErCI,KAIPc,GAAYe,QAnIlB/B,EAEIgC,EAACgC,EAASC,IAAG,CACT3D,UAAW4D,EACXC,MAAOvC,GAAgB,cACV,uBACbwB,GAAI/B,EAASvB,SAEbkC,SACI1B,UAAW8D,EACXrD,IAAKD,EACLuD,MAAOC,GAAY7D,YAElBX,MAObkC,SACI1B,UAAWiE,gBACC,2BAA0BzE,SAEtCkC,SAAK1B,UAAW8D,WAAwBtE,SA8GtC"}

package/box-container/box-container.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./box-container.styles_5y84d5.css";const c="h3376de",h="hjzhcqf",t="h1v9raz8",a="c12d5ktd",o="e15rrad0",n="n17lxubw",r="ca1fnin",e="hobh0le",x="h145wmf6",s="lu9b4gz",u="lx78u15",b="a2tumfu",d="aaq4hg3",f="a163x1mt",l="c1u9hocq",q="cwzrcxq",i="hsq8tc7",m="h97jf81";export{b as alertIcon,d as alertIconError,f as alertIconWarning,l as callToActionContainer,q as callToActionContainerCollapsible,r as childContainer,a as container,o as expandable,i as handle,m as handleIcon,c as handleIconContainer,t as handleIconContainerCollapsed,h as handleIconContainerExpanded,e as header,x as headerInteractive,s as labelText,u as labelWrapper,n as nonExpandable};
+import"./box-container.styles_5t2j9k.css";const c="h3376de",h="hjzhcqf",t="h1v9raz8",a="c12d5ktd",o="e15rrad0",n="n17lxubw",r="ca1fnin",e="hobh0le",x="h145wmf6",s="lu9b4gz",u="lx78u15",b="a2tumfu",f="aaq4hg3",l="a163x1mt",q="c1u9hocq",d="cwzrcxq",i="hsq8tc7",m="h97jf81";export{b as alertIcon,f as alertIconError,l as alertIconWarning,q as callToActionContainer,d as callToActionContainerCollapsible,r as childContainer,a as container,o as expandable,i as handle,m as handleIcon,c as handleIconContainer,t as handleIconContainerCollapsed,h as handleIconContainerExpanded,e as header,x as headerInteractive,s as labelText,u as labelWrapper,n as nonExpandable};
 //# sourceMappingURL=box-container.styles.js.map

package/box-container/box-container.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"box-container.styles.js","sources":["../../src/box-container/box-container.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Motion,\n Radius,\n Spacing,\n} from \"../theme\";\n\nexport const handleIconContainer = css`\n transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const handleIconContainerExpanded = css`\n transform: rotate(180deg);\n`;\n\nexport const handleIconContainerCollapsed = css`\n transform: rotate(0deg);\n`;\n\nexport const container = css`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n ~~margin-bottom: ${Spacing[\"spacing-32\"]};\n~~`;\n\nexport const expandable = css`\n overflow: hidden;\n`;\n\nexport const nonExpandable = css`\n height: max-content;\n`;\n\nexport const childContainer = css`\n border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const header = css`\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n ${MediaQuery.MaxWidth.sm} {\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]};\n display: block;\n }\n`;\n\nexport const headerInteractive = css`\n cursor: pointer;\n`;\n\nexport const labelText = css`\n ${Font[\"heading-sm-semibold\"]}\n color: ${Colour[\"text\"]};\n word-wrap: break-word;\n overflow-wrap: anywhere;\n display: flex;\n align-items: center;\n margin-right: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const labelWrapper = css`\n display: flex;\n`;\n\nexport const alertIcon = css`\n height: ${Font.Spec[\"heading-size-sm\"]};\n width: ${Font.Spec[\"heading-size-sm\"]};\n align-self: center;\n margin-right: ${Spacing[\"spacing-40\"]};\n flex-shrink: 0;\n\n ${MediaQuery.MaxWidth.sm} {\n margin-right: 0;\n }\n`;\n\nexport const alertIconError = css`\n color: ${Colour[\"icon-error\"]};\n`;\n\nexport const alertIconWarning = css`\n color: ${Colour[\"icon-warning\"]};\n`;\n\nexport const callToActionContainer = css`\n display: flex;\n margin-left: auto;\n\n ${MediaQuery.MaxWidth.sm} {\n flex-direction: column;\n }\n`;\n\nexport const callToActionContainerCollapsible = css`\n margin-right: ${Spacing[\"spacing-40\"]};\n\n ${MediaQuery.MaxWidth.sm} {\n margin-right: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n }\n`;\n\nexport const handle = css`\n background: transparent;\n border: none;\n cursor: pointer;\n padding: ${Spacing[\"spacing-16\"]};\n margin: calc(${Spacing[\"spacing-16\"]} * -1);\n display: flex;\n align-items: center;\n\n ${MediaQuery.MaxWidth.sm} {\n margin: calc(${Spacing[\"spacing-16\"]} * -1)\n calc(${Spacing[\"spacing-16\"]} * -1)\n calc(${Spacing[\"spacing-16\"]} * -1) 0;\n margin-left: auto;\n }\n`;\n\nexport const handleIcon = css`\n color: ${Colour[\"icon\"]};\n height: ${Font.Spec[\"heading-size-sm\"]};\n width: ${Font.Spec[\"heading-size-sm\"]};\n`;\n"],"names":["handleIconContainer","handleIconContainerExpanded","handleIconContainerCollapsed","container","expandable","nonExpandable","childContainer","header","headerInteractive","labelText","labelWrapper","alertIcon","alertIconError","alertIconWarning","callToActionContainer","callToActionContainerCollapsible","handle","handleIcon"],"mappings":"uEAYO,MAAMA,EAAmB,UAInBC,EAA2B,UAI3BC,EAA4B,WAI5BC,EAAS,~~WAMTC~~,EAAU,WAIVC,EAAa,WAIbC,EAAc,UAIdC,EAAM,UAYNC,EAAiB,WAIjBC,EAAS,UAUTC,EAAY,UAIZC,EAAS,UAYTC,EAAc,UAIdC,EAAgB,WAIhBC,EAAqB,WASrBC,EAAgC,UAShCC,EAAM,UAiBNC,EAAU"}
1	+ {"version":3,"file":"box-container.styles.js","sources":["../../src/box-container/box-container.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Motion,\n Radius,\n Spacing,\n} from \"../theme\";\n\nexport const handleIconContainer = css`\n transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const handleIconContainerExpanded = css`\n transform: rotate(180deg);\n`;\n\nexport const handleIconContainerCollapsed = css`\n transform: rotate(0deg);\n`;\n\nexport const container = css`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n`;\n\nexport const expandable = css`\n overflow: hidden;\n`;\n\nexport const nonExpandable = css`\n height: max-content;\n`;\n\nexport const childContainer = css`\n border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const header = css`\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n ${MediaQuery.MaxWidth.sm} {\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]};\n display: block;\n }\n`;\n\nexport const headerInteractive = css`\n cursor: pointer;\n`;\n\nexport const labelText = css`\n ${Font[\"heading-sm-semibold\"]}\n color: ${Colour[\"text\"]};\n word-wrap: break-word;\n overflow-wrap: anywhere;\n display: flex;\n align-items: center;\n margin-right: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const labelWrapper = css`\n display: flex;\n`;\n\nexport const alertIcon = css`\n height: ${Font.Spec[\"heading-size-sm\"]};\n width: ${Font.Spec[\"heading-size-sm\"]};\n align-self: center;\n margin-right: ${Spacing[\"spacing-40\"]};\n flex-shrink: 0;\n\n ${MediaQuery.MaxWidth.sm} {\n margin-right: 0;\n }\n`;\n\nexport const alertIconError = css`\n color: ${Colour[\"icon-error\"]};\n`;\n\nexport const alertIconWarning = css`\n color: ${Colour[\"icon-warning\"]};\n`;\n\nexport const callToActionContainer = css`\n display: flex;\n margin-left: auto;\n\n ${MediaQuery.MaxWidth.sm} {\n flex-direction: column;\n }\n`;\n\nexport const callToActionContainerCollapsible = css`\n margin-right: ${Spacing[\"spacing-40\"]};\n\n ${MediaQuery.MaxWidth.sm} {\n margin-right: 0;\n margin-top: ${Spacing[\"spacing-16\"]};\n }\n`;\n\nexport const handle = css`\n background: transparent;\n border: none;\n cursor: pointer;\n padding: ${Spacing[\"spacing-16\"]};\n margin: calc(${Spacing[\"spacing-16\"]} * -1);\n display: flex;\n align-items: center;\n\n ${MediaQuery.MaxWidth.sm} {\n margin: calc(${Spacing[\"spacing-16\"]} * -1)\n calc(${Spacing[\"spacing-16\"]} * -1)\n calc(${Spacing[\"spacing-16\"]} * -1) 0;\n margin-left: auto;\n }\n`;\n\nexport const handleIcon = css`\n color: ${Colour[\"icon\"]};\n height: ${Font.Spec[\"heading-size-sm\"]};\n width: ${Font.Spec[\"heading-size-sm\"]};\n`;\n"],"names":["handleIconContainer","handleIconContainerExpanded","handleIconContainerCollapsed","container","expandable","nonExpandable","childContainer","header","headerInteractive","labelText","labelWrapper","alertIcon","alertIconError","alertIconWarning","callToActionContainer","callToActionContainerCollapsible","handle","handleIcon"],"mappings":"uEAYO,MAAMA,EAAmB,UAInBC,EAA2B,UAI3BC,EAA4B,WAI5BC,EAAS,WAKTC,EAAU,WAIVC,EAAa,WAIbC,EAAc,UAIdC,EAAM,UAYNC,EAAiB,WAIjBC,EAAS,UAUTC,EAAY,UAIZC,EAAS,UAYTC,EAAc,UAIdC,EAAgB,WAIhBC,EAAqB,WASrBC,EAAgC,UAShCC,EAAM,UAiBNC,EAAU"}

package/box-container/box-container.styles_5t2j9k.css ADDED Viewed

@@ -0,0 +1,18 @@
+.h3376de{-webkit-transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);}
+.hjzhcqf{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
+.h1v9raz8{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.c12d5ktd{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);}
+.e15rrad0{overflow:hidden;}
+.n17lxubw{height:-webkit-max-content;height:-moz-max-content;height:max-content;}
+.ca1fnin{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.hobh0le{padding:var(--fds-spacing-16) var(--fds-spacing-32);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:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}:where(body.fds-breakpoint-sm-max) .hobh0le{padding:var(--fds-spacing-16) var(--fds-spacing-20);display:block;}
+.h145wmf6{cursor:pointer;}
+.lu9b4gz{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-sm);letter-spacing:var(--fds-font-heading-ls-sm);color:var(--fds-colour-text);word-wrap:break-word;overflow-wrap:anywhere;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--fds-spacing-16);}
+.lx78u15{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.a2tumfu{height:var(--fds-font-heading-size-sm);width:var(--fds-font-heading-size-sm);-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;margin-right:var(--fds-spacing-40);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-sm-max) .a2tumfu{margin-right:0;}
+.aaq4hg3{color:var(--fds-colour-icon-error);}
+.a163x1mt{color:var(--fds-colour-icon-warning);}
+.c1u9hocq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:auto;}:where(body.fds-breakpoint-sm-max) .c1u9hocq{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.cwzrcxq{margin-right:var(--fds-spacing-40);}:where(body.fds-breakpoint-sm-max) .cwzrcxq{margin-right:0;margin-top:var(--fds-spacing-16);}
+.hsq8tc7{background:transparent;border:none;cursor:pointer;padding:var(--fds-spacing-16);margin:calc(var(--fds-spacing-16) * -1);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;}:where(body.fds-breakpoint-sm-max) .hsq8tc7{margin:calc(var(--fds-spacing-16) * -1) calc(var(--fds-spacing-16) * -1) calc(var(--fds-spacing-16) * -1) 0;margin-left:auto;}
+.h97jf81{color:var(--fds-colour-icon);height:var(--fds-font-heading-size-sm);width:var(--fds-font-heading-size-sm);}

package/breadcrumb/breadcrumb.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as i}from"react/jsx-runtime";import{ChevronRightIcon as o}from"@lifesg/react-icons/chevron-right";import s from"clsx";import{useState as l,useRef as n}from"react";import{useResizeDetector as a}from"../external/react-resize-detector/build/index.esm.js";import"../theme/theme-provider/index.js";import{parsePxOrRemValue as m}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as d}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as c}from"../theme/utils/use-apply-styles.js";import{useDesignToken as h}from"../theme/utils/use-design-token.js";import{Typography as u}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as f}from"../util/use-event.js";import{useEventListener as p}from"../util/use-event-listener.js";import{useIsomorphicLayoutEffect as j}from"../util/use-isomorphic-layout-effect.js";import{tokens as g,wrapper as v,content as b,currentLabel as y,previousLink as k,item as x,caret as N,slash as W,fade as w,fadeLeft as M,fadeRight as C}from"./breadcrumb.styles.js";const L=L=>{var O,z,{links:B,fadeColor:D,fadePosition:R="both",id:S,separatorStyle:A="chevron",className:P}=L,_=e(L,["links","fadeColor","fadePosition","id","separatorStyle","className"]);const[q,E]=l(!1),[F,G]=l(!1),[H,I]=l(!1),J="left"===R||"both"===R,K="right"===R||"both"===R,Q=n(null),T=n(null),U=n(null),V=n(null),X=h(d["lg-max"]),Y=m(X||"1200px");let Z;Z=Array.isArray(D)&&D.length>0?{left:D,right:D}:D||{left:void 0,right:void 0},c(U,{[g.fade.backgroundColor]:null===(O=null==Z?void 0:Z.left)||void 0===O?void 0:O.join(", ")}),c(V,{[g.fade.backgroundColor]:null===(z=null==Z?void 0:Z.right)||void 0===z?void 0:z.join(", ")});const $=f((()=>{const e=T.current,r=Q.current;e&&r&&B&&B.length>1&&window.innerWidth<=Y&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)})),ee=f((()=>{const e=window.innerWidth<=Y;E(e);const r=T.current,t=Q.current;if(r&&t&&e&&r.scrollWidth>t.offsetWidth)return G(r.scrollLeft>=1),void I(r.scrollWidth-r.scrollLeft-1>t.offsetWidth);G(!1),I(!1)}));if(p("resize",ee),p("scroll",ee,T.current),j((()=>{$(),ee()}),[$,ee]),a({onResize:$,targetRef:Q,refreshMode:"debounce",refreshRate:50,skipOnMount:!0}),!B)return null;return r("div",Object.assign({ref:Q,id:S||"breadcrumb",className:s(v,P)},_,{children:[t("nav",{"aria-label":"Breadcrumb",children:t("ul",{ref:T,className:b,children:B.map(((e,i)=>{let s;return e.children?(s=i!==B.length-1&&e.href?t(u.LinkMD,Object.assign({},e,{weight:"semibold",underlineStyle:"none",className:k})):t(u.BodyMD,{weight:"semibold",as:"span",className:y,children:e.children}),r("li",Object.assign({className:x},i===B.length-1&&{"aria-current":"page"},{children:[s,i<B.length-1&&("chevron"===A?t(o,{"aria-hidden":!0,className:N}):t(u.BodyMD,{inline:!0,"aria-hidden":!0,className:W,children:"/"}))]}),i)):null}))})}),q&&r(i,{children:[F&&J&&t("div",{ref:U,className:s(w,M)}),H&&K&&t("div",{ref:V,className:s(w,C)})]})]}))};export{L as Breadcrumb};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as i}from"react/jsx-runtime";import{ChevronRightIcon as o}from"@lifesg/react-icons/chevron-right";import s from"clsx";import{useState as l,useRef as n}from"react";import{useResizeDetector as a}from"../external/react-resize-detector/build/index.esm.js";import"../theme/theme-provider/index.js";import{parsePxOrRemValue as m}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as d}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as c}from"../theme/utils/use-apply-styles.js";import{useResolvedBreakpointToken as h}from"../theme/utils/use-media-query.js";import{Typography as u}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as f}from"../util/use-event.js";import{useEventListener as p}from"../util/use-event-listener.js";import{useIsomorphicLayoutEffect as j}from"../util/use-isomorphic-layout-effect.js";import{tokens as g,wrapper as v,content as b,currentLabel as y,previousLink as k,item as N,caret as x,slash as W,fade as w,fadeLeft as M,fadeRight as C}from"./breadcrumb.styles.js";const L=L=>{var O,z,{links:B,fadeColor:D,fadePosition:R="both",id:S,separatorStyle:q="chevron",className:A}=L,P=e(L,["links","fadeColor","fadePosition","id","separatorStyle","className"]);const[_,E]=l(!1),[F,G]=l(!1),[H,I]=l(!1),J="left"===R||"both"===R,K="right"===R||"both"===R,Q=n(null),T=n(null),U=n(null),V=n(null),X=m(h(d["lg-max"]));let Y;Y=Array.isArray(D)&&D.length>0?{left:D,right:D}:D||{left:void 0,right:void 0},c(U,{[g.fade.backgroundColor]:null===(O=null==Y?void 0:Y.left)||void 0===O?void 0:O.join(", ")}),c(V,{[g.fade.backgroundColor]:null===(z=null==Y?void 0:Y.right)||void 0===z?void 0:z.join(", ")});const Z=f((()=>{const e=T.current,r=Q.current;e&&r&&B&&B.length>1&&window.innerWidth<=X&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)})),$=f((()=>{const e=window.innerWidth<=X;E(e);const r=T.current,t=Q.current;if(r&&t&&e&&r.scrollWidth>t.offsetWidth)return G(r.scrollLeft>=1),void I(r.scrollWidth-r.scrollLeft-1>t.offsetWidth);G(!1),I(!1)}));if(p("resize",$),p("scroll",$,T.current),j((()=>{Z(),$()}),[Z,$,X]),a({onResize:Z,targetRef:Q,refreshMode:"debounce",refreshRate:50,skipOnMount:!0}),!B)return null;return r("div",Object.assign({ref:Q,id:S||"breadcrumb",className:s(v,A)},P,{children:[t("nav",{"aria-label":"Breadcrumb",children:t("ul",{ref:T,className:b,children:B.map(((e,i)=>{let s;return e.children?(s=i!==B.length-1&&e.href?t(u.LinkMD,Object.assign({},e,{weight:"semibold",underlineStyle:"none",className:k})):t(u.BodyMD,{weight:"semibold",as:"span",className:y,children:e.children}),r("li",Object.assign({className:N},i===B.length-1&&{"aria-current":"page"},{children:[s,i<B.length-1&&("chevron"===q?t(o,{"aria-hidden":!0,className:x}):t(u.BodyMD,{inline:!0,"aria-hidden":!0,className:W,children:"/"}))]}),i)):null}))})}),_&&r(i,{children:[F&&J&&t("div",{ref:U,className:s(w,M)}),H&&K&&t("div",{ref:V,className:s(w,C)})]})]}))};export{L as Breadcrumb};
 //# sourceMappingURL=breadcrumb.js.map