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/cjs/badge/badge.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./badge.styles_1yrxocm.css");exports.badge="bnm5diy",exports.badgeOverlay="b12fiya5",exports.badgeWrapper="b1sxe5ht",exports.badgeWrapperIsOverlay="bt512pc",exports.tokens={wrapper:{offsetX:"--fds-internal-badge-wrapper-offsetX",offsetY:"--fds-internal-badge-wrapper-offsetY"}};
+"use strict";require("./badge.styles_1c3c6wj.css");exports.badge="bnm5diy",exports.badgeOverlay="b12fiya5",exports.badgeWrapper="b1sxe5ht",exports.badgeWrapperIsOverlay="bt512pc",exports.tokens={wrapper:{offsetX:"--fds-internal-badge-wrapper-offsetX",offsetY:"--fds-internal-badge-wrapper-offsetY"}};
 //# sourceMappingURL=badge.styles.js.map

package/cjs/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/cjs/box-container/box-container.js CHANGED Viewed

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

package/cjs/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":["_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":"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"}
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":["_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":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";require("./box-container.styles_5y84d5.css");exports.alertIcon="a2tumfu",exports.alertIconError="aaq4hg3",exports.alertIconWarning="a163x1mt",exports.callToActionContainer="c1u9hocq",exports.callToActionContainerCollapsible="cwzrcxq",exports.childContainer="ca1fnin",exports.container="c12d5ktd",exports.expandable="e15rrad0",exports.handle="hsq8tc7",exports.handleIcon="h97jf81",exports.handleIconContainer="h3376de",exports.handleIconContainerCollapsed="h1v9raz8",exports.handleIconContainerExpanded="hjzhcqf",exports.header="hobh0le",exports.headerInteractive="h145wmf6",exports.labelText="lu9b4gz",exports.labelWrapper="lx78u15",exports.nonExpandable="n17lxubw";
+"use strict";require("./box-container.styles_5t2j9k.css");exports.alertIcon="a2tumfu",exports.alertIconError="aaq4hg3",exports.alertIconWarning="a163x1mt",exports.callToActionContainer="c1u9hocq",exports.callToActionContainerCollapsible="cwzrcxq",exports.childContainer="ca1fnin",exports.container="c12d5ktd",exports.expandable="e15rrad0",exports.handle="hsq8tc7",exports.handleIcon="h97jf81",exports.handleIconContainer="h3376de",exports.handleIconContainerCollapsed="h1v9raz8",exports.handleIconContainerExpanded="hjzhcqf",exports.header="hobh0le",exports.headerInteractive="h145wmf6",exports.labelText="lu9b4gz",exports.labelWrapper="lx78u15",exports.nonExpandable="n17lxubw";
 //# sourceMappingURL=box-container.styles.js.map

package/cjs/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":[],"mappings":"~~yGAwEsB~~,iCAYK,mCAIE,yCAIK,oDASW,iCA/DlB,~~4BAdL~~,~~8BAMC~~,0BAgFJ,6BAiBI,~~sCAnHS~~,+CAQS,+CAJD,~~yBA0BrB~~,oCAYW,6BAIR,+BAUG,gCAlCC"}
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":[],"mappings":"yGAuEsB,iCAYK,mCAIE,yCAIK,oDASW,iCA/DlB,4BAbL,8BAKC,0BAgFJ,6BAiBI,sCAlHS,+CAQS,+CAJD,yBAyBrB,oCAYW,6BAIR,+BAUG,gCAlCC"}

package/cjs/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/cjs/breadcrumb/breadcrumb.js CHANGED Viewed

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

package/cjs/breadcrumb/breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb.js","sources":["../../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { parsePxOrRemValue, useApplyStyle, useDesignToken } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\nexport const Breadcrumb = ({\n links,\n fadeColor,\n fadePosition = \"both\",\n id,\n separatorStyle = \"chevron\",\n className,\n ...otherProps\n}: BreadcrumbProps) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const [showFade, setShowFade] = useState<boolean>(false);\n const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n const shouldShowFadeLeft =\n fadePosition === \"left\" \|\| fadePosition === \"both\";\n const shouldShowFadeRight =\n fadePosition === \"right\" \|\| fadePosition === \"both\";\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLUListElement>(null);\n const fadeLeftRef = useRef<HTMLDivElement>(null);\n const fadeRightRef = useRef<HTMLDivElement>(null);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const tabletBreakpointToken = useDesignToken(Breakpoint[\"lg-max\"]);\n const tabletBreakpoint = parsePxOrRemValue(\n tabletBreakpointToken \|\| \"1200px\"\n );\n\n // =============================================================================\n // FADE COLOR CALCULATION\n // =============================================================================\n let fadeColorSet: FadeColorSet;\n\n if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n fadeColorSet = {\n left: fadeColor,\n right: fadeColor,\n };\n } else if (fadeColor) {\n fadeColorSet = fadeColor as FadeColorSet;\n } else {\n fadeColorSet = {\n left: undefined,\n right: undefined,\n };\n }\n\n // =============================================================================\n // CSS VARIABLES\n // =============================================================================\n useApplyStyle(fadeLeftRef, {\n [styles.tokens.fade.backgroundColor]: fadeColorSet?.left?.join(\", \"),\n });\n\n useApplyStyle(fadeRightRef, {\n [styles.tokens.fade.backgroundColor]: fadeColorSet?.right?.join(\", \"),\n });\n\n const onResize = useEvent(() => {\n const content = contentRef.current;\n const wrapper = wrapperRef.current;\n\n if (\n content &&\n wrapper &&\n links &&\n links.length > 1 &&\n window.innerWidth <= tabletBreakpoint\n ) {\n content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n }\n });\n\n const handleShowFadeToggle = useEvent(() => {\n const nextShowFade = window.innerWidth <= tabletBreakpoint;\n setShowFade(nextShowFade);\n\n const content = contentRef.current;\n const wrapper = wrapperRef.current;\n if (content && wrapper && nextShowFade) {\n if (content.scrollWidth > wrapper.offsetWidth) {\n // set 1px margin of error to handle sub-pixel differences\n setShowFadeLeft(content.scrollLeft >= 1);\n setShowFadeRight(\n content.scrollWidth - content.scrollLeft - 1 >\n wrapper.offsetWidth\n );\n return;\n }\n }\n\n setShowFadeLeft(false);\n setShowFadeRight(false);\n });\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEventListener(\"resize\", handleShowFadeToggle);\n useEventListener(\"scroll\", handleShowFadeToggle, contentRef.current);\n\n useIsomorphicLayoutEffect(() => {\n onResize();\n handleShowFadeToggle();\n }, [onResize, handleShowFadeToggle]);\n\n // To scroll left when wrapper resizes\n useResizeDetector({\n onResize,\n targetRef: wrapperRef,\n refreshMode: \"debounce\",\n refreshRate: 50,\n skipOnMount: true,\n });\n\n // =========================================================================\n // RENDER\n // =========================================================================\n if (!links) return null;\n\n const renderLinks = () => {\n return links.map((link, index) => {\n let element: JSX.Element;\n if (!link.children) {\n return null;\n }\n\n if (index === links.length - 1 \|\| !link.href) {\n element = (\n <Typography.BodyMD\n weight=\"semibold\"\n as=\"span\"\n className={styles.currentLabel}\n >\n {link.children}\n </Typography.BodyMD>\n );\n } else {\n element = (\n <Typography.LinkMD\n {...link}\n weight=\"semibold\"\n underlineStyle=\"none\"\n className={styles.previousLink}\n />\n );\n }\n\n return (\n <li\n key={index}\n className={styles.item}\n {...(index === links.length - 1 && {\n \"aria-current\": \"page\",\n })}\n >\n {element}\n {index < links.length - 1 &&\n (separatorStyle === \"chevron\" ? (\n <ChevronRightIcon\n aria-hidden\n className={styles.caret}\n />\n ) : (\n <Typography.BodyMD\n inline\n aria-hidden\n className={styles.slash}\n >\n /\n </Typography.BodyMD>\n ))}\n </li>\n );\n });\n };\n\n const renderFade = () => {\n return (\n <>\n {showFadeLeft && shouldShowFadeLeft && (\n <div\n ref={fadeLeftRef}\n className={clsx(styles.fade, styles.fadeLeft)}\n />\n )}\n {showFadeRight && shouldShowFadeRight && (\n <div\n ref={fadeRightRef}\n className={clsx(styles.fade, styles.fadeRight)}\n />\n )}\n </>\n );\n };\n\n return (\n <div\n ref={wrapperRef}\n id={id \|\| \"breadcrumb\"}\n className={clsx(styles.wrapper, className)}\n {...otherProps}\n >\n <nav aria-label=\"Breadcrumb\">\n <ul ref={contentRef} className={styles.content}>\n {renderLinks()}\n </ul>\n </nav>\n {showFade && renderFade()}\n </div>\n );\n};\n"],"names":["_a","links","fadeColor","fadePosition","id","separatorStyle","className","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","tabletBreakpointToken","useDesignToken","Breakpoint","tabletBreakpoint","parsePxOrRemValue","fadeColorSet","Array","isArray","length","left","right","undefined","useApplyStyle","styles.tokens","fade","backgroundColor","_b","join","_c","onResize","useEvent","content","current","wrapper","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","ref","clsx","styles.wrapper","children","_jsx","styles.content","map","link","index","element","href","Typography","LinkMD","Object","assign","weight","underlineStyle","styles.previousLink","BodyMD","as","styles.currentLabel","styles.item","ChevronRightIcon","styles.caret","inline","styles.slash","_Fragment","styles.fade","styles.fadeLeft","styles.fadeRight"],"mappings":"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"}
1	+ {"version":3,"file":"breadcrumb.js","sources":["../../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport {\n parsePxOrRemValue,\n useApplyStyle,\n useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\nexport const Breadcrumb = ({\n links,\n fadeColor,\n fadePosition = \"both\",\n id,\n separatorStyle = \"chevron\",\n className,\n ...otherProps\n}: BreadcrumbProps) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const [showFade, setShowFade] = useState<boolean>(false);\n const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n const shouldShowFadeLeft =\n fadePosition === \"left\" \|\| fadePosition === \"both\";\n const shouldShowFadeRight =\n fadePosition === \"right\" \|\| fadePosition === \"both\";\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLUListElement>(null);\n const fadeLeftRef = useRef<HTMLDivElement>(null);\n const fadeRightRef = useRef<HTMLDivElement>(null);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const tabletBreakpoint = parsePxOrRemValue(\n useResolvedBreakpointToken(Breakpoint[\"lg-max\"])\n );\n\n // =============================================================================\n // FADE COLOR CALCULATION\n // =============================================================================\n let fadeColorSet: FadeColorSet;\n\n if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n fadeColorSet = {\n left: fadeColor,\n right: fadeColor,\n };\n } else if (fadeColor) {\n fadeColorSet = fadeColor as FadeColorSet;\n } else {\n fadeColorSet = {\n left: undefined,\n right: undefined,\n };\n }\n\n // =============================================================================\n // CSS VARIABLES\n // =============================================================================\n useApplyStyle(fadeLeftRef, {\n [styles.tokens.fade.backgroundColor]: fadeColorSet?.left?.join(\", \"),\n });\n\n useApplyStyle(fadeRightRef, {\n [styles.tokens.fade.backgroundColor]: fadeColorSet?.right?.join(\", \"),\n });\n\n const onResize = useEvent(() => {\n const content = contentRef.current;\n const wrapper = wrapperRef.current;\n\n if (\n content &&\n wrapper &&\n links &&\n links.length > 1 &&\n window.innerWidth <= tabletBreakpoint\n ) {\n content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n }\n });\n\n const handleShowFadeToggle = useEvent(() => {\n const nextShowFade = window.innerWidth <= tabletBreakpoint;\n setShowFade(nextShowFade);\n\n const content = contentRef.current;\n const wrapper = wrapperRef.current;\n if (content && wrapper && nextShowFade) {\n if (content.scrollWidth > wrapper.offsetWidth) {\n // set 1px margin of error to handle sub-pixel differences\n setShowFadeLeft(content.scrollLeft >= 1);\n setShowFadeRight(\n content.scrollWidth - content.scrollLeft - 1 >\n wrapper.offsetWidth\n );\n return;\n }\n }\n\n setShowFadeLeft(false);\n setShowFadeRight(false);\n });\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEventListener(\"resize\", handleShowFadeToggle);\n useEventListener(\"scroll\", handleShowFadeToggle, contentRef.current);\n\n useIsomorphicLayoutEffect(() => {\n onResize();\n handleShowFadeToggle();\n }, [onResize, handleShowFadeToggle, tabletBreakpoint]);\n\n // To scroll left when wrapper resizes\n useResizeDetector({\n onResize,\n targetRef: wrapperRef,\n refreshMode: \"debounce\",\n refreshRate: 50,\n skipOnMount: true,\n });\n\n // =========================================================================\n // RENDER\n // =========================================================================\n if (!links) return null;\n\n const renderLinks = () => {\n return links.map((link, index) => {\n let element: JSX.Element;\n if (!link.children) {\n return null;\n }\n\n if (index === links.length - 1 \|\| !link.href) {\n element = (\n <Typography.BodyMD\n weight=\"semibold\"\n as=\"span\"\n className={styles.currentLabel}\n >\n {link.children}\n </Typography.BodyMD>\n );\n } else {\n element = (\n <Typography.LinkMD\n {...link}\n weight=\"semibold\"\n underlineStyle=\"none\"\n className={styles.previousLink}\n />\n );\n }\n\n return (\n <li\n key={index}\n className={styles.item}\n {...(index === links.length - 1 && {\n \"aria-current\": \"page\",\n })}\n >\n {element}\n {index < links.length - 1 &&\n (separatorStyle === \"chevron\" ? (\n <ChevronRightIcon\n aria-hidden\n className={styles.caret}\n />\n ) : (\n <Typography.BodyMD\n inline\n aria-hidden\n className={styles.slash}\n >\n /\n </Typography.BodyMD>\n ))}\n </li>\n );\n });\n };\n\n const renderFade = () => {\n return (\n <>\n {showFadeLeft && shouldShowFadeLeft && (\n <div\n ref={fadeLeftRef}\n className={clsx(styles.fade, styles.fadeLeft)}\n />\n )}\n {showFadeRight && shouldShowFadeRight && (\n <div\n ref={fadeRightRef}\n className={clsx(styles.fade, styles.fadeRight)}\n />\n )}\n </>\n );\n };\n\n return (\n <div\n ref={wrapperRef}\n id={id \|\| \"breadcrumb\"}\n className={clsx(styles.wrapper, className)}\n {...otherProps}\n >\n <nav aria-label=\"Breadcrumb\">\n <ul ref={contentRef} className={styles.content}>\n {renderLinks()}\n </ul>\n </nav>\n {showFade && renderFade()}\n </div>\n );\n};\n"],"names":["_a","links","fadeColor","fadePosition","id","separatorStyle","className","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","tabletBreakpoint","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","fadeColorSet","Array","isArray","length","left","right","undefined","useApplyStyle","styles.tokens","fade","backgroundColor","_b","join","_c","onResize","useEvent","content","current","wrapper","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","ref","clsx","styles.wrapper","children","_jsx","styles.content","map","link","index","element","href","Typography","LinkMD","Object","assign","weight","underlineStyle","styles.previousLink","BodyMD","as","styles.currentLabel","styles.item","ChevronRightIcon","styles.caret","inline","styles.slash","_Fragment","styles.fade","styles.fadeLeft","styles.fadeRight"],"mappings":"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"}

package/cjs/button/button.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),n=require("clsx"),i=require("react"),l=require("../shared/component-loading-spinner/component-loading-spinner.js"),t=require("./button.styles.js"),s=require("./button-helper.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=r(n),o=r(i);const u={disabled:{base:t.mainStyleDisabled,danger:t.mainStyleDisabled},default:{base:t.mainStyleDefault,danger:t.mainStyleDefaultDanger},secondary:{base:t.mainStyleSecondary,danger:t.mainStyleSecondaryDanger},light:{base:t.mainStyleLight,danger:t.mainStyleLightDanger},link:{base:t.mainStyleLink,danger:t.mainStyleLinkDanger}},c={default:{base:t.mainSizeDefault,iconOnly:t.mainSizeDefaultIconOnly},small:{base:t.mainSizeSmall,iconOnly:t.mainSizeSmallIconOnly},large:{base:t.mainSizeLarge,iconOnly:t.mainSizeLargeIconOnly}},f=(e,a)=>{var n,i;return a?null===(n=u[e])||void 0===n?void 0:n.danger:null===(i=u[e])||void 0===i?void 0:i.base},m=(e,a)=>{var n,i,l;return a?d.default(null===(n=c[e])||void 0===n?void 0:n.base,null===(i=c[e])||void 0===i?void 0:i.iconOnly):null===(l=c[e])||void 0===l?void 0:l.base},y=(n,i)=>{const{children:r,className:u,disabled:c=!1,loading:y=!1,styleType:b="default",sizeType:g="default",danger:p=!1,focusableWhenDisabled:S=!1,icon:h,iconPosition:v="left",onClick:j}=n,D=e.__rest(n,["children","className","disabled","loading","styleType","sizeType","danger","focusableWhenDisabled","icon","iconPosition","onClick"]),z=s.hasValidChildren(r),O=!!h&&!z,x=c?"disabled":b;return a.jsxs("button",Object.assign({ref:i,"data-testid":D["data-testid"]||"button",disabled:c&&!S,"aria-disabled":c,"aria-busy":y,onClick:c?void 0:j,className:d.default(t.main,h&&"right"===v&&t.mainIconPositionRight,!O&&t.mainHasMinWidth,f(x,p),m(g,O),u)},D,{children:[y?a.jsx(l.ComponentLoadingSpinner,{className:d.default(z&&t.spinnerHasChildren)}):h?o.default.cloneElement(h,{"aria-hidden":!0}):null,z&&a.jsx("span",{children:r})]}))};y.displayName="Button";const b=o.default.forwardRef(y),g=(e,n)=>{var i;return a.jsx(b,Object.assign({},e,{sizeType:null!==(i=e.sizeType)&&void 0!==i?i:"default",ref:n}))};g.displayName="Button.Default";const p=(e,n)=>a.jsx(b,Object.assign({},e,{sizeType:"small",ref:n}));p.displayName="Button.Small";const S=(e,n)=>a.jsx(b,Object.assign({},e,{sizeType:"large",ref:n}));S.displayName="Button.Large";const h=Object.assign(b,{Default:o.default.forwardRef(g),Small:o.default.forwardRef(p),Large:o.default.forwardRef(S)});exports.Button=h;
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),n=require("clsx"),i=require("react"),l=require("../shared/component-loading-spinner/component-loading-spinner.js"),t=require("./button.styles.js"),s=require("./button-helper.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=r(n),o=r(i);const u={disabled:{base:t.mainStyleDisabled,danger:t.mainStyleDisabled},default:{base:t.mainStyleDefault,danger:t.mainStyleDefaultDanger},secondary:{base:t.mainStyleSecondary,danger:t.mainStyleSecondaryDanger},light:{base:t.mainStyleLight,danger:t.mainStyleLightDanger},link:{base:t.mainStyleLink,danger:t.mainStyleLinkDanger}},c={default:{base:t.mainSizeDefault,iconOnly:t.mainSizeDefaultIconOnly},small:{base:t.mainSizeSmall,iconOnly:t.mainSizeSmallIconOnly},large:{base:t.mainSizeLarge,iconOnly:t.mainSizeLargeIconOnly}},f=(e,a)=>{var n,i;return a?null===(n=u[e])||void 0===n?void 0:n.danger:null===(i=u[e])||void 0===i?void 0:i.base},m=(e,a)=>{var n,i,l;return a?d.default(null===(n=c[e])||void 0===n?void 0:n.base,null===(i=c[e])||void 0===i?void 0:i.iconOnly):null===(l=c[e])||void 0===l?void 0:l.base},y=(n,i)=>{const{children:r,className:u,disabled:c=!1,loading:y=!1,styleType:b="default",sizeType:g="default",danger:p=!1,focusableWhenDisabled:S=!1,icon:h,iconPosition:v="left",onClick:j}=n,D=e.__rest(n,["children","className","disabled","loading","styleType","sizeType","danger","focusableWhenDisabled","icon","iconPosition","onClick"]),z=s.hasValidChildren(r),O=!!h&&!z,x=c?"disabled":b;return a.jsxs("button",Object.assign({ref:i,"data-testid":D["data-testid"]||"button",disabled:c&&!S,"aria-disabled":c,"aria-busy":y,onClick:c?void 0:j,className:d.default(t.main,h&&"right"===v&&t.mainIconPositionRight,!O&&t.mainHasMinWidth,f(x,p),m(g,O),u)},D,{children:[y?a.jsx(l.ComponentLoadingSpinner,{className:d.default(t.spinner,z&&t.spinnerHasChildren)}):h?o.default.cloneElement(h,{"aria-hidden":!0}):null,z&&a.jsx("span",{children:r})]}))};y.displayName="Button";const b=o.default.forwardRef(y),g=(e,n)=>{var i;return a.jsx(b,Object.assign({},e,{sizeType:null!==(i=e.sizeType)&&void 0!==i?i:"default",ref:n}))};g.displayName="Button.Default";const p=(e,n)=>a.jsx(b,Object.assign({},e,{sizeType:"small",ref:n}));p.displayName="Button.Small";const S=(e,n)=>a.jsx(b,Object.assign({},e,{sizeType:"large",ref:n}));S.displayName="Button.Large";const h=Object.assign(b,{Default:o.default.forwardRef(g),Small:o.default.forwardRef(p),Large:o.default.forwardRef(S)});exports.Button=h;
 //# sourceMappingURL=button.js.map

package/cjs/button/button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.js","sources":["../../../src/button/button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport * as styles from \"./button.styles\";\nimport { hasValidChildren } from \"./button-helper\";\nimport type { ButtonProps, ButtonRef } from \"./types\";\n\nconst styleClassMap: Record<string, Record<string, string>> = {\n disabled: {\n base: styles.mainStyleDisabled,\n danger: styles.mainStyleDisabled,\n },\n default: {\n base: styles.mainStyleDefault,\n danger: styles.mainStyleDefaultDanger,\n },\n secondary: {\n base: styles.mainStyleSecondary,\n danger: styles.mainStyleSecondaryDanger,\n },\n light: { base: styles.mainStyleLight, danger: styles.mainStyleLightDanger },\n link: { base: styles.mainStyleLink, danger: styles.mainStyleLinkDanger },\n};\n\nconst sizeClassMap: Record<string, { base: string; iconOnly: string }> = {\n default: {\n base: styles.mainSizeDefault,\n iconOnly: styles.mainSizeDefaultIconOnly,\n },\n small: {\n base: styles.mainSizeSmall,\n iconOnly: styles.mainSizeSmallIconOnly,\n },\n large: {\n base: styles.mainSizeLarge,\n iconOnly: styles.mainSizeLargeIconOnly,\n },\n};\n\nconst getStyleClass = (effectiveStyle: string, danger: boolean) =>\n danger\n ? styleClassMap[effectiveStyle]?.danger\n : styleClassMap[effectiveStyle]?.base;\n\nconst getSizeClass = (sizeType: string, iconOnly: boolean) =>\n iconOnly\n ? clsx(sizeClassMap[sizeType]?.base, sizeClassMap[sizeType]?.iconOnly)\n : sizeClassMap[sizeType]?.base;\n\nconst Component = (props: ButtonProps, ref: ButtonRef) => {\n const {\n children,\n className,\n disabled = false,\n loading = false,\n styleType = \"default\",\n sizeType = \"default\",\n danger = false,\n focusableWhenDisabled = false,\n icon,\n iconPosition = \"left\",\n onClick,\n ...otherProps\n } = props;\n\n const hasChildren = hasValidChildren(children);\n const iconOnly = !!icon && !hasChildren;\n const effectiveStyle = disabled ? \"disabled\" : styleType;\n\n return (\n <button\n ref={ref}\n data-testid={otherProps[\"data-testid\"] \|\| \"button\"}\n disabled={disabled && !focusableWhenDisabled}\n aria-disabled={disabled}\n aria-busy={loading}\n onClick={disabled ? undefined : onClick}\n className={clsx(\n styles.main,\n icon &&\n iconPosition === \"right\" &&\n styles.mainIconPositionRight,\n !iconOnly && styles.mainHasMinWidth,\n getStyleClass(effectiveStyle, danger),\n getSizeClass(sizeType, iconOnly),\n className\n )}\n {...otherProps}\n >\n {loading ? (\n <ComponentLoadingSpinner\n className={clsx(hasChildren && styles.spinnerHasChildren)}\n />\n ) : icon ? (\n React.cloneElement(icon, { \"aria-hidden\": true })\n ) : null}\n {hasChildren && <span>{children}</span>}\n </button>\n );\n};\n\nComponent.displayName = \"Button\";\n\nconst BaseButton = React.forwardRef(Component);\n\nconst DefaultButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n <BaseButton {...props} sizeType={props.sizeType ?? \"default\"} ref={ref} />\n);\nDefaultButtonComponent.displayName = \"Button.Default\";\n\nconst SmallButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n <BaseButton {...props} sizeType=\"small\" ref={ref} />\n);\nSmallButtonComponent.displayName = \"Button.Small\";\n\nconst LargeButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n <BaseButton {...props} sizeType=\"large\" ref={ref} />\n);\nLargeButtonComponent.displayName = \"Button.Large\";\n\nexport const Button = Object.assign(BaseButton, {\n /** @deprecated Use the `sizeType` prop instead: `<Button>` or `<Button sizeType=\"default\">` /\n Default: React.forwardRef(DefaultButtonComponent),\n /* @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"small\">` /\n Small: React.forwardRef(SmallButtonComponent),\n /* @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"large\">` */\n Large: React.forwardRef(LargeButtonComponent),\n});\n"],"names":["styleClassMap","disabled","base","styles.mainStyleDisabled","danger","default","styles.mainStyleDefault","styles.mainStyleDefaultDanger","secondary","styles.mainStyleSecondary","styles.mainStyleSecondaryDanger","light","styles.mainStyleLight","styles.mainStyleLightDanger","link","styles.mainStyleLink","styles.mainStyleLinkDanger","sizeClassMap","styles.mainSizeDefault","iconOnly","styles.mainSizeDefaultIconOnly","small","styles.mainSizeSmall","styles.mainSizeSmallIconOnly","large","styles.mainSizeLarge","styles.mainSizeLargeIconOnly","getStyleClass","effectiveStyle","_a","_b","getSizeClass","sizeType","clsx","_c","Component","props","ref","children","className","loading","styleType","focusableWhenDisabled","icon","iconPosition","onClick","otherProps","hasChildren","hasValidChildren","_jsxs","undefined","styles.main","styles.mainIconPositionRight","styles.mainHasMinWidth","_jsx","ComponentLoadingSpinner","styles.spinnerHasChildren","React","cloneElement","displayName","BaseButton","forwardRef","DefaultButtonComponent","Object","assign","SmallButtonComponent","LargeButtonComponent","Button","Default","Small","Large"],"mappings":"gWAQA,MAAMA,EAAwD,CAC1DC,SAAU,CACNC,KAAMC,EAAAA,kBACNC,OAAQD,EAAAA,mBAEZE,QAAS,CACLH,KAAMI,EAAAA,iBACNF,OAAQG,EAAAA,wBAEZC,UAAW,CACPN,KAAMO,EAAAA,mBACNL,OAAQM,EAAAA,0BAEZC,MAAO,CAAET,KAAMU,iBAAuBR,OAAQS,EAAAA,sBAC9CC,KAAM,CAAEZ,KAAMa,gBAAsBX,OAAQY,EAAAA,sBAG1CC,EAAmE,CACrEZ,QAAS,CACLH,KAAMgB,EAAAA,gBACNC,SAAUC,EAAAA,yBAEdC,MAAO,CACHnB,KAAMoB,EAAAA,cACNH,SAAUI,EAAAA,uBAEdC,MAAO,CACHtB,KAAMuB,EAAAA,cACNN,SAAUO,EAAAA,wBAIZC,EAAgB,CAACC,EAAwBxB,aAC3C,OAAAA,UACMyB,EAAA7B,EAAc4B,yBAAiBxB,OACF,UAA7BJ,EAAc4B,UAAe,IAAAE,OAAA,EAAAA,EAAE5B,IAAI,EAEvC6B,EAAe,CAACC,EAAkBb,eACpC,OAAAA,EACMc,UAA2B,UAAtBhB,EAAae,UAAS,IAAAH,OAAA,EAAAA,EAAE3B,KAA4B,UAAtBe,EAAae,UAAS,IAAAF,OAAA,EAAAA,EAAEX,UACrC,UAAtBF,EAAae,UAAS,IAAAE,OAAA,EAAAA,EAAEhC,IAAI,EAEhCiC,EAAY,CAACC,EAAoBC,KACnC,MAAMC,SACFA,EAAQC,UACRA,EAAStC,SACTA,GAAW,EAAKuC,QAChBA,GAAU,EAAKC,UACfA,EAAY,UAAST,SACrBA,EAAW,UAAS5B,OACpBA,GAAS,EAAKsC,sBACdA,GAAwB,EAAKC,KAC7BA,EAAIC,aACJA,EAAe,OAAMC,QACrBA,GAEAT,EADGU,WACHV,EAbE,CAAA,WAAA,YAAA,WAAA,UAAA,YAAA,WAAA,SAAA,wBAAA,OAAA,eAAA,YAeAW,EAAcC,EAAAA,iBAAiBV,GAC/BnB,IAAawB,IAASI,EACtBnB,EAAiB3B,EAAW,WAAawC,EAE/C,OACIQ,EAAAA,6BACIZ,IAAKA,EAAG,cACKS,EAAW,gBAAkB,SAC1C7C,SAAUA,IAAayC,kBACRzC,EAAQ,YACZuC,EACXK,QAAS5C,OAAWiD,EAAYL,EAChCN,UAAWN,EAAAA,QACPkB,EAAAA,KACAR,GACqB,UAAjBC,GACAQ,yBACHjC,GAAYkC,kBACb1B,EAAcC,EAAgBxB,GAC9B2B,EAAaC,EAAUb,GACvBoB,IAEAO,~~EAAU~~,~~CAAAR,SAAA,CAEbE,~~EACGc,EAAAA,IAACC,~~EAAAA~~,~~wBAAuB,~~CACpBhB,UAAWN,EAAAA,~~QAAKc~~,~~GAAeS,~~EAAAA,~~sBAEnCb~~,~~EACAc~~,EAAAA,QAAMC,~~aAAaf~~,EAAM,CAAE,eAAe,IAC1C,KACHI,GAAeO,EAAAA,IAAA,OAAA,CAAAhB,SAAOA,OAClB,EAIjBH,~~EAAUwB~~,YAAc,SAExB,MAAMC,EAAaH,EAAAA,QAAMI,~~WAAW1B~~,~~GAE9B2B~~,EAAyB,~~CAAC1B~~,EAAoBC,WAAmB,OACnEiB,EAAAA,~~IAACM~~,EAAUG,OAAAC,OAAA,CAAA,~~EAAK5B~~,EAAK,CAAEJ,SAAwB,QAAdH,EAAAO,EAAMJ,gBAAQ,IAAAH,EAAAA,EAAI,UAAWQ,IAAKA,IAAO,~~EAE9EyB~~,EAAuBH,YAAc,iBAErC,MAAMM,EAAuB,~~CAAC7B~~,EAAoBC,IAC9CiB,EAAAA,~~IAACM~~,~~mBAAexB~~,EAAK,CAAEJ,SAAS,QAAQK,IAAKA,~~KAEjD4B~~,EAAqBN,YAAc,eAEnC,MAAMO,EAAuB,~~CAAC9B~~,EAAoBC,IAC9CiB,EAAAA,~~IAACM~~,~~mBAAexB~~,EAAK,CAAEJ,SAAS,QAAQK,IAAKA,~~KAEjD6B~~,EAAqBP,YAAc,qBAEtBQ,EAASJ,OAAOC,OAAOJ,EAAY,CAE5CQ,QAASX,EAAAA,QAAMI,WAAWC,GAE1BO,MAAOZ,EAAAA,QAAMI,WAAWI,GAExBK,MAAOb,EAAAA,QAAMI,WAAWK"}
1	+ {"version":3,"file":"button.js","sources":["../../../src/button/button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport * as styles from \"./button.styles\";\nimport { hasValidChildren } from \"./button-helper\";\nimport type { ButtonProps, ButtonRef } from \"./types\";\n\nconst styleClassMap: Record<string, Record<string, string>> = {\n disabled: {\n base: styles.mainStyleDisabled,\n danger: styles.mainStyleDisabled,\n },\n default: {\n base: styles.mainStyleDefault,\n danger: styles.mainStyleDefaultDanger,\n },\n secondary: {\n base: styles.mainStyleSecondary,\n danger: styles.mainStyleSecondaryDanger,\n },\n light: { base: styles.mainStyleLight, danger: styles.mainStyleLightDanger },\n link: { base: styles.mainStyleLink, danger: styles.mainStyleLinkDanger },\n};\n\nconst sizeClassMap: Record<string, { base: string; iconOnly: string }> = {\n default: {\n base: styles.mainSizeDefault,\n iconOnly: styles.mainSizeDefaultIconOnly,\n },\n small: {\n base: styles.mainSizeSmall,\n iconOnly: styles.mainSizeSmallIconOnly,\n },\n large: {\n base: styles.mainSizeLarge,\n iconOnly: styles.mainSizeLargeIconOnly,\n },\n};\n\nconst getStyleClass = (effectiveStyle: string, danger: boolean) =>\n danger\n ? styleClassMap[effectiveStyle]?.danger\n : styleClassMap[effectiveStyle]?.base;\n\nconst getSizeClass = (sizeType: string, iconOnly: boolean) =>\n iconOnly\n ? clsx(sizeClassMap[sizeType]?.base, sizeClassMap[sizeType]?.iconOnly)\n : sizeClassMap[sizeType]?.base;\n\nconst Component = (props: ButtonProps, ref: ButtonRef) => {\n const {\n children,\n className,\n disabled = false,\n loading = false,\n styleType = \"default\",\n sizeType = \"default\",\n danger = false,\n focusableWhenDisabled = false,\n icon,\n iconPosition = \"left\",\n onClick,\n ...otherProps\n } = props;\n\n const hasChildren = hasValidChildren(children);\n const iconOnly = !!icon && !hasChildren;\n const effectiveStyle = disabled ? \"disabled\" : styleType;\n\n return (\n <button\n ref={ref}\n data-testid={otherProps[\"data-testid\"] \|\| \"button\"}\n disabled={disabled && !focusableWhenDisabled}\n aria-disabled={disabled}\n aria-busy={loading}\n onClick={disabled ? undefined : onClick}\n className={clsx(\n styles.main,\n icon &&\n iconPosition === \"right\" &&\n styles.mainIconPositionRight,\n !iconOnly && styles.mainHasMinWidth,\n getStyleClass(effectiveStyle, danger),\n getSizeClass(sizeType, iconOnly),\n className\n )}\n {...otherProps}\n >\n {loading ? (\n <ComponentLoadingSpinner\n className={clsx(\n styles.spinner,\n hasChildren && styles.spinnerHasChildren\n )}\n />\n ) : icon ? (\n React.cloneElement(icon, { \"aria-hidden\": true })\n ) : null}\n {hasChildren && <span>{children}</span>}\n </button>\n );\n};\n\nComponent.displayName = \"Button\";\n\nconst BaseButton = React.forwardRef(Component);\n\nconst DefaultButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n <BaseButton {...props} sizeType={props.sizeType ?? \"default\"} ref={ref} />\n);\nDefaultButtonComponent.displayName = \"Button.Default\";\n\nconst SmallButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n <BaseButton {...props} sizeType=\"small\" ref={ref} />\n);\nSmallButtonComponent.displayName = \"Button.Small\";\n\nconst LargeButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n <BaseButton {...props} sizeType=\"large\" ref={ref} />\n);\nLargeButtonComponent.displayName = \"Button.Large\";\n\nexport const Button = Object.assign(BaseButton, {\n /** @deprecated Use the `sizeType` prop instead: `<Button>` or `<Button sizeType=\"default\">` /\n Default: React.forwardRef(DefaultButtonComponent),\n /* @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"small\">` /\n Small: React.forwardRef(SmallButtonComponent),\n /* @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"large\">` */\n Large: React.forwardRef(LargeButtonComponent),\n});\n"],"names":["styleClassMap","disabled","base","styles.mainStyleDisabled","danger","default","styles.mainStyleDefault","styles.mainStyleDefaultDanger","secondary","styles.mainStyleSecondary","styles.mainStyleSecondaryDanger","light","styles.mainStyleLight","styles.mainStyleLightDanger","link","styles.mainStyleLink","styles.mainStyleLinkDanger","sizeClassMap","styles.mainSizeDefault","iconOnly","styles.mainSizeDefaultIconOnly","small","styles.mainSizeSmall","styles.mainSizeSmallIconOnly","large","styles.mainSizeLarge","styles.mainSizeLargeIconOnly","getStyleClass","effectiveStyle","_a","_b","getSizeClass","sizeType","clsx","_c","Component","props","ref","children","className","loading","styleType","focusableWhenDisabled","icon","iconPosition","onClick","otherProps","hasChildren","hasValidChildren","_jsxs","undefined","styles.main","styles.mainIconPositionRight","styles.mainHasMinWidth","_jsx","ComponentLoadingSpinner","styles.spinner","styles.spinnerHasChildren","React","cloneElement","displayName","BaseButton","forwardRef","DefaultButtonComponent","Object","assign","SmallButtonComponent","LargeButtonComponent","Button","Default","Small","Large"],"mappings":"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"}

package/cjs/button/button.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./button.styles_142m6cx.css");exports.main="mf6do54",exports.mainHasMinWidth="m1en642a",exports.mainIconPositionRight="moaxzdy",exports.mainSizeDefault="m1knftbn",exports.mainSizeDefaultIconOnly="m18n5exw",exports.mainSizeLarge="m1c1mlhm",exports.mainSizeLargeIconOnly="me78sau",exports.mainSizeSmall="m3n7mqo",exports.mainSizeSmallIconOnly="m1ytkx3r",exports.mainStyleDefault="m1jxbf2q",exports.mainStyleDefaultDanger="mharb8i",exports.mainStyleDisabled="mc532iy",exports.mainStyleLight="m8hnmz5",exports.mainStyleLightDanger="m53fwwa",exports.mainStyleLink="m1557ko0",exports.mainStyleLinkDanger="m70z5yw",exports.mainStyleSecondary="mbs4ndg",exports.mainStyleSecondaryDanger="m1taerhv",exports.spinnerHasChildren="s17i3scc";
+"use strict";require("./button.styles_1pxy0co.css");exports.main="mf6do54",exports.mainHasMinWidth="m1en642a",exports.mainIconPositionRight="moaxzdy",exports.mainSizeDefault="m1knftbn",exports.mainSizeDefaultIconOnly="m18n5exw",exports.mainSizeLarge="m1c1mlhm",exports.mainSizeLargeIconOnly="me78sau",exports.mainSizeSmall="m3n7mqo",exports.mainSizeSmallIconOnly="m1ytkx3r",exports.mainStyleDefault="m1jxbf2q",exports.mainStyleDefaultDanger="mharb8i",exports.mainStyleDisabled="mc532iy",exports.mainStyleLight="m8hnmz5",exports.mainStyleLightDanger="m53fwwa",exports.mainStyleLink="m1557ko0",exports.mainStyleLinkDanger="m70z5yw",exports.mainStyleSecondary="mbs4ndg",exports.mainStyleSecondaryDanger="m1taerhv",exports.spinner="s17i3scc",exports.spinnerHasChildren="s1joklnz";
 //# sourceMappingURL=button.styles.js.map

package/cjs/button/button.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.styles.js","sources":["../../../src/button/button.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 main = css`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} transparent;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n gap: 0.5rem;\n border-radius: ${Radius.sm};\n\n svg,\n img {\n flex-shrink: 0;\n height: 1em;\n width: 1em;\n }\n`;\n\nexport const mainIconPositionRight = css`\n flex-direction: row-reverse;\n`;\n\nexport const mainHasMinWidth = css`\n min-width: 4rem;\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON STYLE + TEXT COLOR\n// -------------------------------------------------------------------------\nexport const mainStyleDefault = css`\n background-color: ${Colour[\"bg-primary\"]};\n color: ${Colour[\"text-inverse\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-primary-hover\"]};\n }\n }\n`;\n\nexport const mainStyleDefaultDanger = css`\n background-color: ${Colour[\"bg-error-strong\"]};\n color: ${Colour[\"text-inverse\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-error-strong-hover\"]};\n }\n }\n`;\n\nexport const mainStyleSecondary = css`\n background-color: ${Colour.bg};\n border-color: ${Colour[\"border-primary\"]};\n color: ${Colour[\"text-primary\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleSecondaryDanger = css`\n background-color: ${Colour.bg};\n border-color: ${Colour[\"border-error-strong\"]};\n color: ${Colour[\"text-error\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLight = css`\n background-color: ${Colour.bg};\n border-color: ${Colour.border};\n color: ${Colour[\"text-primary\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLightDanger = css`\n background-color: ${Colour.bg};\n border-color: ${Colour.border};\n color: ${Colour[\"text-error\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLink = css`\n background-color: transparent;\n color: ${Colour[\"text-primary\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLinkDanger = css`\n background-color: transparent;\n color: ${Colour[\"text-error\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleDisabled = css`\n background-color: ${Colour[\"bg-disabled\"]};\n cursor: not-allowed;\n color: ${Colour[\"text-disabled\"]};\n &:hover {\n box-shadow: none;\n }\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON SIZE\n// -------------------------------------------------------------------------\nexport const mainSizeDefault = css`\n height: 3rem;\n ${Font[\"heading-xs-semibold\"]}\n ${MediaQuery.MaxWidth.xxs} {\n height: auto;\n }\n`;\n\nexport const mainSizeDefaultIconOnly = css`\n height: 3rem;\n width: 3rem;\n`;\n\nexport const mainSizeSmall = css`\n height: 2.5rem;\n ${Font[\"body-md-semibold\"]}\n ${MediaQuery.MaxWidth.xxs} {\n height: auto;\n }\n`;\n\nexport const mainSizeSmallIconOnly = css`\n height: 2.5rem;\n width: 2.5rem;\n`;\n\nexport const mainSizeLarge = css`\n height: 4rem;\n ${Font[\"heading-md-semibold\"]}\n ${MediaQuery.MaxWidth.xxs} {\n height: auto;\n }\n`;\n\nexport const mainSizeLargeIconOnly = css`\n height: 4rem;\n width: 4rem;\n`;\n\nexport const spinnerHasChildren = css`\n margin-right: 0.5rem;\n`;\n"],"names":[],"mappings":"uFAYiB,kCAuBW,yCAJM,kCAmHN,2CAQQ,iCAkBV,yCAQQ,gCArBR,wCAQQ,oCA7HL,0CAWM,oCAiFL,iCA9CH,uCAYM,gCAYP,uCAWM,qCA3DD,2CAYM,~~sCA6GN~~"}
1	+ {"version":3,"file":"button.styles.js","sources":["../../../src/button/button.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 main = css`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} transparent;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n gap: 0.5rem;\n border-radius: ${Radius.sm};\n\n svg,\n img {\n flex-shrink: 0;\n height: 1em;\n width: 1em;\n }\n`;\n\nexport const mainIconPositionRight = css`\n flex-direction: row-reverse;\n`;\n\nexport const mainHasMinWidth = css`\n min-width: 4rem;\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON STYLE + TEXT COLOR\n// -------------------------------------------------------------------------\nexport const mainStyleDefault = css`\n background-color: ${Colour[\"bg-primary\"]};\n color: ${Colour[\"text-inverse\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-primary-hover\"]};\n }\n }\n`;\n\nexport const mainStyleDefaultDanger = css`\n background-color: ${Colour[\"bg-error-strong\"]};\n color: ${Colour[\"text-inverse\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-error-strong-hover\"]};\n }\n }\n`;\n\nexport const mainStyleSecondary = css`\n background-color: ${Colour.bg};\n border-color: ${Colour[\"border-primary\"]};\n color: ${Colour[\"text-primary\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleSecondaryDanger = css`\n background-color: ${Colour.bg};\n border-color: ${Colour[\"border-error-strong\"]};\n color: ${Colour[\"text-error\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLight = css`\n background-color: ${Colour.bg};\n border-color: ${Colour.border};\n color: ${Colour[\"text-primary\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLightDanger = css`\n background-color: ${Colour.bg};\n border-color: ${Colour.border};\n color: ${Colour[\"text-error\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLink = css`\n background-color: transparent;\n color: ${Colour[\"text-primary\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLinkDanger = css`\n background-color: transparent;\n color: ${Colour[\"text-error\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleDisabled = css`\n background-color: ${Colour[\"bg-disabled\"]};\n cursor: not-allowed;\n color: ${Colour[\"text-disabled\"]};\n &:hover {\n box-shadow: none;\n }\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON SIZE\n// -------------------------------------------------------------------------\nexport const mainSizeDefault = css`\n height: 3rem;\n ${Font[\"heading-xs-semibold\"]}\n ${MediaQuery.MaxWidth.xxs} {\n height: auto;\n }\n`;\n\nexport const mainSizeDefaultIconOnly = css`\n height: 3rem;\n width: 3rem;\n`;\n\nexport const mainSizeSmall = css`\n height: 2.5rem;\n ${Font[\"body-md-semibold\"]}\n ${MediaQuery.MaxWidth.xxs} {\n height: auto;\n }\n`;\n\nexport const mainSizeSmallIconOnly = css`\n height: 2.5rem;\n width: 2.5rem;\n`;\n\nexport const mainSizeLarge = css`\n height: 4rem;\n ${Font[\"heading-md-semibold\"]}\n ${MediaQuery.MaxWidth.xxs} {\n height: auto;\n }\n`;\n\nexport const mainSizeLargeIconOnly = css`\n height: 4rem;\n width: 4rem;\n`;\n\nexport const spinner = css`\n flex-shrink: 0;\n`;\n\nexport const spinnerHasChildren = css`\n margin-right: 0.5rem;\n`;\n"],"names":[],"mappings":"uFAYiB,kCAuBW,yCAJM,kCAmHN,2CAQQ,iCAkBV,yCAQQ,gCArBR,wCAQQ,oCA7HL,0CAWM,oCAiFL,iCA9CH,uCAYM,gCAYP,uCAWM,qCA3DD,2CAYM,2BA6GjB,sCAIW"}

package/cjs/button/button.styles_1pxy0co.css ADDED Viewed

@@ -0,0 +1,20 @@
+.mf6do54{border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);cursor:pointer;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;padding:var(--fds-spacing-8) var(--fds-spacing-16);gap:0.5rem;border-radius:var(--fds-radius-sm);}.mf6do54 svg,.mf6do54 img{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1em;width:1em;}
+.moaxzdy{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.m1en642a{min-width:4rem;}
+.m1jxbf2q{background-color:var(--fds-colour-bg-primary);color:var(--fds-colour-text-inverse);}@media (pointer: fine){.m1jxbf2q:hover,.m1jxbf2q:active{background-color:var(--fds-colour-bg-primary-hover);}}
+.mharb8i{background-color:var(--fds-colour-bg-error-strong);color:var(--fds-colour-text-inverse);}@media (pointer: fine){.mharb8i:hover,.mharb8i:active{background-color:var(--fds-colour-bg-error-strong-hover);}}
+.mbs4ndg{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border-primary);color:var(--fds-colour-text-primary);}@media (pointer: fine){.mbs4ndg:hover,.mbs4ndg:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m1taerhv{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border-error-strong);color:var(--fds-colour-text-error);}@media (pointer: fine){.m1taerhv:hover,.m1taerhv:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m8hnmz5{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border);color:var(--fds-colour-text-primary);}@media (pointer: fine){.m8hnmz5:hover,.m8hnmz5:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m53fwwa{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border);color:var(--fds-colour-text-error);}@media (pointer: fine){.m53fwwa:hover,.m53fwwa:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m1557ko0{background-color:transparent;color:var(--fds-colour-text-primary);}@media (pointer: fine){.m1557ko0:hover,.m1557ko0:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m70z5yw{background-color:transparent;color:var(--fds-colour-text-error);}@media (pointer: fine){.m70z5yw:hover,.m70z5yw:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.mc532iy{background-color:var(--fds-colour-bg-disabled);cursor:not-allowed;color:var(--fds-colour-text-disabled);}.mc532iy:hover{box-shadow:none;}
+.m1knftbn{height:3rem;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-semibold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);}:where(body.fds-breakpoint-xxs-max) .m1knftbn{height:auto;}
+.m18n5exw{height:3rem;width:3rem;}
+.m3n7mqo{height:2.5rem;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);}:where(body.fds-breakpoint-xxs-max) .m3n7mqo{height:auto;}
+.m1ytkx3r{height:2.5rem;width:2.5rem;}
+.m1c1mlhm{height:4rem;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-semibold);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);}:where(body.fds-breakpoint-xxs-max) .m1c1mlhm{height:auto;}
+.me78sau{height:4rem;width:4rem;}
+.s17i3scc{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+.s1joklnz{margin-right:0.5rem;}

package/cjs/calendar/calendar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("clsx"),l=require("react");require("../shared/internal-calendar/calendar-dropdown.js");var r=require("../shared/internal-calendar/internal-calendar.js"),n=require("./calendar.styles.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(a);exports.Calendar=a=>{const{className:t,styleType:d="bordered",variant:o,id:s,minDate:c,maxDate:v,disabledDates:u,allowDisabledSelection:h,showActiveMonthDaysOnly:m,onHover:D,onYearMonthDisplayChange:b,"data-testid":p}=a,y="multi"===a.variant,x=y?void 0:a.value,S=y?a.values:void 0,C=y?a.minSelectable:void 0,f=y?a.maxSelectable:void 0,[j,w]=l.useState((()=>void 0!==S?S:void 0!==x?[x]:[]));l.useEffect((()=>{w(void 0===S?void 0===x?[]:[x]:S)}),[x,S]);return e.jsx("div",{className:i.default(n.wrapper,"bordered"===d&&n.wrapperBordered,t),id:s,"data-testid":p,children:e.jsx(r.InternalCalendar,{value:j[0],values:j,initialCalendarDate:j[0],isFocusable:!0,variant:o,minDate:c,maxDate:v,disabledDates:u,allowDisabledSelection:h,showActiveMonthDaysOnly:m,onHover:D,onYearMonthDisplayChange:b,onSelect:e=>{var l,r;w([e]),"multi"!==a.variant&&(null===(l=a.onChange)||void 0===l||l.call(a,e),null===(r=a.onSelect)||void 0===r||r.call(a,e))},onChange:e=>{var l;w(e),"multi"===a.variant&&(null===(l=a.onChange)||void 0===l||l.call(a,e))},minSelectable:C,maxSelectable:f})})};
+"use strict";var e=require("react/jsx-runtime"),a=require("clsx"),l=require("react");require("../shared/internal-calendar/calendar-dropdown.js");var n=require("../shared/internal-calendar/internal-calendar.js"),r=require("./calendar.styles.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(a);exports.Calendar=a=>{const{className:t,styleType:d="bordered",variant:o="single",id:s,minDate:c,maxDate:v,disabledDates:u,allowDisabledSelection:h,showActiveMonthDaysOnly:m,onHover:D,onYearMonthDisplayChange:b,"data-testid":p}=a,y="multi"===a.variant,x=y?void 0:a.value,S=y?a.values:void 0,C=y?a.minSelectable:void 0,f=y?a.maxSelectable:void 0,[j,w]=l.useState((()=>void 0!==S?S:void 0!==x?[x]:[]));l.useEffect((()=>{w(void 0===S?void 0===x?[]:[x]:S)}),[x,S]);return e.jsx("div",{className:i.default(r.wrapper,"bordered"===d&&r.wrapperBordered,t),id:s,"data-testid":p,children:e.jsx(n.InternalCalendar,{value:j[0],values:j,initialCalendarDate:j[0],isFocusable:!0,variant:o,minDate:c,maxDate:v,disabledDates:u,allowDisabledSelection:h,showActiveMonthDaysOnly:m,onHover:D,onYearMonthDisplayChange:b,onSelect:e=>{var l,n;w([e]),"multi"!==a.variant&&(null===(l=a.onChange)||void 0===l||l.call(a,e),null===(n=a.onSelect)||void 0===n||n.call(a,e))},onChange:e=>{var l;w(e),"multi"===a.variant&&(null===(l=a.onChange)||void 0===l||l.call(a,e))},minSelectable:C,maxSelectable:f})})};
 //# sourceMappingURL=calendar.js.map

package/cjs/calendar/calendar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"calendar.js","sources":["../../../src/calendar/calendar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useState } from \"react\";\n\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport * as styles from \"./calendar.styles\";\nimport type { CalendarProps } from \"./types\";\n\nexport const Calendar = (props: CalendarProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n className,\n styleType = \"bordered\",\n variant,\n id,\n minDate,\n maxDate,\n disabledDates,\n allowDisabledSelection,\n showActiveMonthDaysOnly,\n onHover,\n onYearMonthDisplayChange,\n \"data-testid\": dataTestId,\n } = props;\n\n const isMultiVariant = props.variant === \"multi\";\n const controlledValue = isMultiVariant ? undefined : props.value;\n const controlledValues = isMultiVariant ? props.values : undefined;\n const minSelectable = isMultiVariant ? props.minSelectable : undefined;\n const maxSelectable = isMultiVariant ? props.maxSelectable : undefined;\n\n const resolveValues = (): string[] => {\n if (controlledValues !== undefined) return controlledValues;\n if (controlledValue !== undefined) return [controlledValue];\n return [];\n };\n\n const [selectedValues, setSelectedValues] =\n useState<string[]>(resolveValues);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n if (controlledValues !== undefined) {\n setSelectedValues(controlledValues);\n return;\n }\n\n if (controlledValue !== undefined) {\n setSelectedValues([controlledValue]);\n return;\n }\n\n setSelectedValues([]);\n }, [controlledValue, controlledValues]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSelect = (date: string) => {\n setSelectedValues([date]);\n if (props.variant === \"multi\") {\n return;\n }\n\n props.onChange?.(date);\n props.onSelect?.(date);\n };\n\n const handleMultiSelect = (nextValues: string[]) => {\n setSelectedValues(nextValues);\n if (props.variant === \"multi\") {\n props.onChange?.(nextValues);\n }\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n return (\n <div\n className={clsx(\n styles.wrapper,\n styleType === \"bordered\" && styles.wrapperBordered,\n className\n )}\n id={id}\n data-testid={dataTestId}\n >\n <InternalCalendar\n value={selectedValues[0]}\n values={selectedValues}\n initialCalendarDate={selectedValues[0]}\n isFocusable={true}\n variant={variant}\n minDate={minDate}\n maxDate={maxDate}\n disabledDates={disabledDates}\n allowDisabledSelection={allowDisabledSelection}\n showActiveMonthDaysOnly={showActiveMonthDaysOnly}\n onHover={onHover}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n onSelect={handleSelect}\n onChange={handleMultiSelect}\n minSelectable={minSelectable}\n maxSelectable={maxSelectable}\n />\n </div>\n );\n};\n"],"names":["props","className","styleType","variant","id","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onHover","onYearMonthDisplayChange","dataTestId","isMultiVariant","controlledValue","undefined","value","controlledValues","values","minSelectable","maxSelectable","selectedValues","setSelectedValues","useState","useEffect","_jsx","clsx","styles.wrapper","styles.wrapperBordered","children","InternalCalendar","initialCalendarDate","isFocusable","onSelect","date","_a","onChange","call","_b","nextValues"],"mappings":"yVAOyBA,IAIrB,MAAMC,UACFA,EAASC,UACTA,EAAY,WAAUC,QACtBA,~~EAAOC~~,~~GACPA~~,EAAEC,QACFA,EAAOC,QACPA,EAAOC,cACPA,EAAaC,uBACbA,EAAsBC,wBACtBA,EAAuBC,QACvBA,EAAOC,yBACPA,EACA,cAAeC,GACfZ,EAEEa,EAAmC,UAAlBb,EAAMG,QACvBW,EAAkBD,OAAiBE,EAAYf,EAAMgB,MACrDC,EAAmBJ,EAAiBb,EAAMkB,YAASH,EACnDI,EAAgBN,EAAiBb,EAAMmB,mBAAgBJ,EACvDK,EAAgBP,EAAiBb,EAAMoB,mBAAgBL,GAQtDM,EAAgBC,GACnBC,EAAAA,UAPkB,SACOR,IAArBE,EAAuCA,OACnBF,IAApBD,EAAsC,CAACA,GACpC,KASXU,EAAAA,WAAU,KAWNF,OAVyBP,IAArBE,OAKoBF,IAApBD,EAKc,GAJI,CAACA,GALDG,EASD,GACtB,CAACH,EAAiBG,IAyBrB,OACIQ,EAAAA,WACIxB,UAAWyB,EAAAA,QACPC,EAAAA,QACc,aAAdzB,GAA4B0B,EAAAA,gBAC5B3B,GAEJG,GAAIA,gBACSQ,EAAUiB,SAEvBJ,EAAAA,IAACK,mBAAgB,CACbd,MAAOK,EAAe,GACtBH,OAAQG,EACRU,oBAAqBV,EAAe,GACpCW,aAAa,EACb7B,QAASA,EACTE,QAASA,EACTC,QAASA,EACTC,cAAeA,EACfC,uBAAwBA,EACxBC,wBAAyBA,EACzBC,QAASA,EACTC,yBAA0BA,EAC1BsB,SA3CUC,YAClBZ,EAAkB,CAACY,IACG,UAAlBlC,EAAMG,UAII,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGkC,GACH,QAAdI,EAAAtC,EAAMiC,gBAAQ,IAAAK,GAAAA,EAAAD,KAAArC,EAAGkC,GAAK,EAqCdE,SAlCeG,UACvBjB,EAAkBiB,GACI,UAAlBvC,EAAMG,UACQ,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGuC,GACrB,EA+BQpB,cAAeA,EACfC,cAAeA,KAEjB"}
1	+ {"version":3,"file":"calendar.js","sources":["../../../src/calendar/calendar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useState } from \"react\";\n\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport * as styles from \"./calendar.styles\";\nimport type { CalendarProps } from \"./types\";\n\nexport const Calendar = (props: CalendarProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n className,\n styleType = \"bordered\",\n variant = \"single\",\n id,\n minDate,\n maxDate,\n disabledDates,\n allowDisabledSelection,\n showActiveMonthDaysOnly,\n onHover,\n onYearMonthDisplayChange,\n \"data-testid\": dataTestId,\n } = props;\n\n const isMultiVariant = props.variant === \"multi\";\n const controlledValue = isMultiVariant ? undefined : props.value;\n const controlledValues = isMultiVariant ? props.values : undefined;\n const minSelectable = isMultiVariant ? props.minSelectable : undefined;\n const maxSelectable = isMultiVariant ? props.maxSelectable : undefined;\n\n const resolveValues = (): string[] => {\n if (controlledValues !== undefined) return controlledValues;\n if (controlledValue !== undefined) return [controlledValue];\n return [];\n };\n\n const [selectedValues, setSelectedValues] =\n useState<string[]>(resolveValues);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n if (controlledValues !== undefined) {\n setSelectedValues(controlledValues);\n return;\n }\n\n if (controlledValue !== undefined) {\n setSelectedValues([controlledValue]);\n return;\n }\n\n setSelectedValues([]);\n }, [controlledValue, controlledValues]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSelect = (date: string) => {\n setSelectedValues([date]);\n if (props.variant === \"multi\") {\n return;\n }\n\n props.onChange?.(date);\n props.onSelect?.(date);\n };\n\n const handleMultiSelect = (nextValues: string[]) => {\n setSelectedValues(nextValues);\n if (props.variant === \"multi\") {\n props.onChange?.(nextValues);\n }\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n return (\n <div\n className={clsx(\n styles.wrapper,\n styleType === \"bordered\" && styles.wrapperBordered,\n className\n )}\n id={id}\n data-testid={dataTestId}\n >\n <InternalCalendar\n value={selectedValues[0]}\n values={selectedValues}\n initialCalendarDate={selectedValues[0]}\n isFocusable={true}\n variant={variant}\n minDate={minDate}\n maxDate={maxDate}\n disabledDates={disabledDates}\n allowDisabledSelection={allowDisabledSelection}\n showActiveMonthDaysOnly={showActiveMonthDaysOnly}\n onHover={onHover}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n onSelect={handleSelect}\n onChange={handleMultiSelect}\n minSelectable={minSelectable}\n maxSelectable={maxSelectable}\n />\n </div>\n );\n};\n"],"names":["props","className","styleType","variant","id","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onHover","onYearMonthDisplayChange","dataTestId","isMultiVariant","controlledValue","undefined","value","controlledValues","values","minSelectable","maxSelectable","selectedValues","setSelectedValues","useState","useEffect","_jsx","clsx","styles.wrapper","styles.wrapperBordered","children","InternalCalendar","initialCalendarDate","isFocusable","onSelect","date","_a","onChange","call","_b","nextValues"],"mappings":"yVAOyBA,IAIrB,MAAMC,UACFA,EAASC,UACTA,EAAY,WAAUC,QACtBA,EAAU,SAAQC,GAClBA,EAAEC,QACFA,EAAOC,QACPA,EAAOC,cACPA,EAAaC,uBACbA,EAAsBC,wBACtBA,EAAuBC,QACvBA,EAAOC,yBACPA,EACA,cAAeC,GACfZ,EAEEa,EAAmC,UAAlBb,EAAMG,QACvBW,EAAkBD,OAAiBE,EAAYf,EAAMgB,MACrDC,EAAmBJ,EAAiBb,EAAMkB,YAASH,EACnDI,EAAgBN,EAAiBb,EAAMmB,mBAAgBJ,EACvDK,EAAgBP,EAAiBb,EAAMoB,mBAAgBL,GAQtDM,EAAgBC,GACnBC,EAAAA,UAPkB,SACOR,IAArBE,EAAuCA,OACnBF,IAApBD,EAAsC,CAACA,GACpC,KASXU,EAAAA,WAAU,KAWNF,OAVyBP,IAArBE,OAKoBF,IAApBD,EAKc,GAJI,CAACA,GALDG,EASD,GACtB,CAACH,EAAiBG,IAyBrB,OACIQ,EAAAA,WACIxB,UAAWyB,EAAAA,QACPC,EAAAA,QACc,aAAdzB,GAA4B0B,EAAAA,gBAC5B3B,GAEJG,GAAIA,gBACSQ,EAAUiB,SAEvBJ,EAAAA,IAACK,mBAAgB,CACbd,MAAOK,EAAe,GACtBH,OAAQG,EACRU,oBAAqBV,EAAe,GACpCW,aAAa,EACb7B,QAASA,EACTE,QAASA,EACTC,QAASA,EACTC,cAAeA,EACfC,uBAAwBA,EACxBC,wBAAyBA,EACzBC,QAASA,EACTC,yBAA0BA,EAC1BsB,SA3CUC,YAClBZ,EAAkB,CAACY,IACG,UAAlBlC,EAAMG,UAII,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGkC,GACH,QAAdI,EAAAtC,EAAMiC,gBAAQ,IAAAK,GAAAA,EAAAD,KAAArC,EAAGkC,GAAK,EAqCdE,SAlCeG,UACvBjB,EAAkBiB,GACI,UAAlBvC,EAAMG,UACQ,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGuC,GACrB,EA+BQpB,cAAeA,EACfC,cAAeA,KAEjB"}

package/cjs/countdown-timer/countdown-timer.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("../external/lodash/throttle.js"),i=require("react"),n=require("../external/react-intersection-observer/index.js"),s=require("../external/react-responsive/dist/react-responsive.js"),o=require("styled-components"),u=require("../shared/accessibility/index.js"),a=require("../util/time-helper.js"),l=require("../v3_theme/index.js"),d=require("./countdown-timer.style.js"),c=require("./use-timer.js");exports.CountdownTimer=m=>{var{className:f,align:p="right",timer:x,timestamp:v,notifyTimer:h,offset:w,mobileOffset:j,show:b,fixed:T=!0,reminderInterval:y=120,"data-testid":$,onFinish:g,onNotify:q,onTick:E}=m,S=e.__rest(m,["className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","data-testid","onFinish","onNotify","onTick"]);const C=i.useRef(null),F=i.useRef(!1),[I,V]=i.useState(0),[_,M]=i.useState(0),[N,R]=i.useState(0),[k,H]=i.useState(!1),[L,O]=i.useState(""),[W,z]=c.useTimer(x,v,k),{ref:B,inView:Q}=n.useInView({threshold:1,rootMargin:-1*I+"px 0px 0px 0px",initialInView:!0}),A=!T||Q,D="number"==typeof h&&W<=h,G=i.useContext(o.ThemeContext),J=l.V3_Breakpoint["sm-max"]({theme:G}),K=s.reactResponsiveExports.useMediaQuery({maxWidth:J});i.useEffect((()=>{H(b)}),[b]),i.useEffect((()=>{0===W?Z():"number"==typeof h&&W<=h&&(X(),Y())}),[W]),i.useEffect((()=>{const e=function(){var e,t;const r=null!==(e=null==w?void 0:w.top)&&void 0!==e?e:168,i=null!==(t=null==j?void 0:j.top)&&void 0!==t?t:80,n=K?i:r;return n}();V(e)}),[K,null==w?void 0:w.top,null==j?void 0:j.top]),i.useEffect((()=>{if(C.current){const e=r.default(P,300);return P(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}}),[C.current]),i.useEffect((()=>{const e=z-W;0!==e&&(e%y==0&&("number"!=typeof h||W>h)&&O(ee(W)),"number"==typeof h&&W===h&&O(ee(W)))}),[W,z,y,h]),i.useEffect((()=>{F.current=!1}),[z,b]);const P=()=>{if(!C.current)return;const e=C.current.getBoundingClientRect();R(e.x),M(e.right)},U=()=>{const e=ee(W);O(e)},X=()=>{E&&E(W)},Y=()=>{q&&!F.current&&(F.current=!0,q())},Z=()=>{H(!1),g&&g()};const ee=e=>{const{minutes:t,seconds:r}=a.TimeHelper.toMinutesSeconds(e),i=1===t?"minute":"minutes",n=1===r?"second":"seconds";return t>0&&r>0?`Time left: ${t} ${i} and ${r} ${n}`:t>0?`Time left: ${t} ${i}`:`Time left: ${r} ${n}`},te=()=>{const{minutes:e,seconds:r}=a.TimeHelper.toMinutesSeconds(W),i=1!==e?"mins":"min",n=1!==r?"secs":"sec";return t.jsxs(t.Fragment,{children:[t.jsx(d.TimerIcon,{$warn:D}),t.jsx(d.TimeLeft,{children:"Time left:"}),t.jsxs(d.Timer,{"aria-label":ee(W),children:[e," ",i," ",String(r).padStart(2,"0")," ",n]}),t.jsx(u.VisuallyHidden,{"aria-live":"number"==typeof h&&W<=h?"assertive":"polite","aria-atomic":"true",children:L})]})};return k||0===W?t.jsxs(d.Wrapper,Object.assign({className:f},S,{children:[t.jsx("div",{ref:B}),t.jsx(d.Countdown,{"data-testid":$,"data-id":"countdown-wrapper",ref:C,inert:u.inertValue(!A),$visible:A,$warn:D,tabIndex:0,role:"timer","aria-label":"Countdown timer",onFocus:U,children:te()}),C.current&&!A&&(()=>{var e,r;const i=null!==(e=null==w?void 0:w.left)&&void 0!==e?e:"left"===p?N:void 0,n=null!==(r=null==w?void 0:w.right)&&void 0!==r?r:"right"===p?Math.floor(document.body.clientWidth-_):void 0;return t.jsx(d.FixedCountdown,{"data-testid":$,"data-id":"fixed-countdown-wrapper",$warn:D,$top:I,$left:i,$right:n,tabIndex:0,role:"timer","aria-label":"Countdown timer",onFocus:U,children:te()})})()]})):t.jsx(t.Fragment,{})};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),i=require("clsx"),n=require("../external/lodash/throttle.js"),s=require("react"),u=require("../external/react-intersection-observer/index.js"),o=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js");var a=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/utils/use-apply-styles.js"),d=require("../theme/utils/use-media-query.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var c=require("../util/use-mount.js"),m=require("../util/time-helper.js"),f=require("./countdown-timer.styles.js"),p=require("./use-timer.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=v(i);exports.CountdownTimer=i=>{var{className:v,align:x="right",timer:j,timestamp:w,notifyTimer:q,offset:y,mobileOffset:b,show:g,fixed:T=!0,reminderInterval:k=120,"data-testid":I,onFinish:N,onNotify:S,onTick:C}=i,E=e.__rest(i,["className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","data-testid","onFinish","onNotify","onTick"]);const V=s.useRef(null),$=s.useRef(null),F=s.useRef(!1),[M,H]=s.useState(0),[R,_]=s.useState(0),[L,O]=s.useState(0),[U,z]=s.useState(!1),[W,A]=s.useState(""),B=c.useIsMounted(),[Q,D]=p.useTimer(j,w,U),{ref:G,inView:J}=u.useInView({threshold:1,rootMargin:-1*M+"px 0px 0px 0px",initialInView:!0}),K=!T||J,P="number"==typeof q&&Q<=q,X=d.useMaxWidthMediaQuery("sm");l.useApplyStyle($,{[f.tokens.fixedCountdown.top]:a.formatUnitValue(M,"px"),[f.tokens.fixedCountdown.left]:a.formatUnitValue(function(){var e;return B&&"left"===x?null!==(e=null==y?void 0:y.left)&&void 0!==e?e:L:void 0}(),"px"),[f.tokens.fixedCountdown.right]:a.formatUnitValue(function(){var e;return B&&"right"===x?null!==(e=null==y?void 0:y.right)&&void 0!==e?e:Math.floor(document.body.clientWidth-R):void 0}(),"px")}),s.useEffect((()=>{z(g)}),[g]),s.useEffect((()=>{0===Q?re():"number"==typeof q&&Q<=q&&(ee(),te())}),[Q]),s.useEffect((()=>{const e=function(){var e,t;const r=null!==(e=null==y?void 0:y.top)&&void 0!==e?e:168,i=null!==(t=null==b?void 0:b.top)&&void 0!==t?t:80,n=X?i:r;return n}();H(e)}),[X,null==y?void 0:y.top,null==b?void 0:b.top]),s.useEffect((()=>{if(V.current){const e=n.default(Y,300);return Y(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}}),[V.current]),s.useEffect((()=>{const e=D-Q;0!==e&&(e%k==0&&("number"!=typeof q||Q>q)&&A(ie(Q)),"number"==typeof q&&Q===q&&A(ie(Q)))}),[Q,D,k,q]),s.useEffect((()=>{F.current=!1}),[D,g]);const Y=()=>{if(!V.current)return;const e=V.current.getBoundingClientRect();O(e.x),_(e.right)},Z=()=>{const e=ie(Q);A(e)},ee=()=>{C&&C(Q)},te=()=>{S&&!F.current&&(F.current=!0,S())},re=()=>{z(!1),N&&N()};const ie=e=>{const{minutes:t,seconds:r}=m.TimeHelper.toMinutesSeconds(e),i=1===t?"minute":"minutes",n=1===r?"second":"seconds";return t>0&&r>0?`Time left: ${t} ${i} and ${r} ${n}`:t>0?`Time left: ${t} ${i}`:`Time left: ${r} ${n}`},ne=()=>{const{minutes:e,seconds:i}=m.TimeHelper.toMinutesSeconds(Q),n=1!==e?"mins":"min",s=1!==i?"secs":"sec";return t.jsxs(t.Fragment,{children:[t.jsx(r.ClockIcon,{className:f.timerIcon,"data-warn":!!P}),t.jsx("div",{className:f.timeLeft,children:"Time left:"}),t.jsxs("div",{className:f.timer,"aria-label":ie(Q),children:[e," ",n," ",String(i).padStart(2,"0")," ",s]}),t.jsx(o.VisuallyHidden,{"aria-live":"number"==typeof q&&Q<=q?"assertive":"polite","aria-atomic":"true",children:W})]})};return U||0===Q?t.jsxs("div",Object.assign({className:h.default(f.wrapper,v)},E,{children:[t.jsx("div",{ref:G}),t.jsx("div",{"data-testid":I,"data-id":"countdown-wrapper","data-warn":!!P,ref:V,inert:o.inertValue(!K),className:h.default(f.countdown,f.countdownInline,!K&&f.countdownHidden),tabIndex:0,role:"timer","aria-label":"Countdown timer",onFocus:Z,children:ne()}),V.current&&!K&&t.jsx("div",{ref:$,"data-testid":I,"data-id":"fixed-countdown-wrapper","data-warn":!!P,className:h.default(f.countdown,f.countdownFixed),tabIndex:0,role:"timer","aria-label":"Countdown timer",onFocus:Z,children:ne()})]})):t.jsx(t.Fragment,{})};
 //# sourceMappingURL=countdown-timer.js.map

package/cjs/countdown-timer/countdown-timer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"countdown-timer.js","sources":["../../../src/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import throttle from \"lodash/throttle\";\nimport { useContext, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n Countdown,\n FixedCountdown,\n TimeLeft,\n Timer,\n TimerIcon,\n Wrapper,\n} from \"./countdown-timer.style\";\nimport type { CountdownTimerProps } from \"./types\";\nimport { useTimer } from \"./use-timer\";\n\nexport const CountdownTimer = ({\n className,\n align = \"right\",\n timer,\n timestamp,\n notifyTimer,\n offset,\n mobileOffset,\n show,\n fixed = true,\n reminderInterval = 120,\n \"data-testid\": testId,\n onFinish,\n onNotify,\n onTick,\n ...otherProps\n}: CountdownTimerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const isNotified = useRef<boolean>(false);\n const [offsetY, setOffsetY] = useState<number>(0);\n const [clientRectRight, setClientRectRight] = useState<number>(0);\n const [clientRectX, setClientRectX] = useState<number>(0);\n const [isPlaying, setIsPlaying] = useState(false);\n const [announcement, setAnnouncement] = useState<string>(\"\");\n\n const [remainingSeconds, initialSeconds] = useTimer(\n timer,\n timestamp,\n isPlaying\n );\n const { ref: stickyRef, inView } = useInView({\n threshold: 1,\n rootMargin: `${offsetY * -1}px 0px 0px 0px`,\n initialInView: true,\n });\n const isVisible = !fixed \|\| inView;\n const warn =\n typeof notifyTimer === \"number\" && remainingSeconds <= notifyTimer;\n\n const theme = useContext(ThemeContext);\n const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useEffect(() => {\n setIsPlaying(show);\n }, [show]);\n\n useEffect(() => {\n if (remainingSeconds === 0) {\n performOnFinishHandler();\n } else if (\n typeof notifyTimer === \"number\" &&\n remainingSeconds <= notifyTimer\n ) {\n performOnTickHandler();\n performOnNotifyHandler();\n }\n }, [remainingSeconds]);\n\n useEffect(() => {\n const y = getOffsetY();\n setOffsetY(y);\n }, [isMobile, offset?.top, mobileOffset?.top]);\n\n useEffect(() => {\n if (wrapperRef.current) {\n const handleResize = throttle(handleWindowResize, 300);\n handleWindowResize();\n\n window.addEventListener(\"resize\", handleResize);\n\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }\n }, [wrapperRef.current]);\n\n // Announcements\n useEffect(() => {\n const timeElapsed = initialSeconds - remainingSeconds;\n if (timeElapsed === 0) return;\n // Polite notification\n if (timeElapsed % reminderInterval === 0) {\n if (\n typeof notifyTimer !== \"number\" \|\|\n remainingSeconds > notifyTimer\n ) {\n setAnnouncement(getAccessibleTimeText(remainingSeconds));\n }\n }\n\n // Assertive notification\n if (\n typeof notifyTimer === \"number\" &&\n remainingSeconds === notifyTimer\n ) {\n setAnnouncement(getAccessibleTimeText(remainingSeconds));\n }\n }, [remainingSeconds, initialSeconds, reminderInterval, notifyTimer]);\n\n useEffect(() => {\n // reset\n isNotified.current = false;\n }, [initialSeconds, show]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleWindowResize = () => {\n if (!wrapperRef.current) return;\n\n const clientRect = wrapperRef.current.getBoundingClientRect();\n\n setClientRectX(clientRect.x);\n setClientRectRight(clientRect.right);\n };\n\n const handleOnFocus = () => {\n const focusMessage = getAccessibleTimeText(remainingSeconds);\n setAnnouncement(focusMessage);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const performOnTickHandler = () => {\n if (onTick) {\n onTick(remainingSeconds);\n }\n };\n\n const performOnNotifyHandler = () => {\n if (onNotify && !isNotified.current) {\n isNotified.current = true;\n onNotify();\n }\n };\n\n const performOnFinishHandler = () => {\n setIsPlaying(false);\n\n if (onFinish) onFinish();\n };\n\n function getOffsetY() {\n const desktopTop = offset?.top ?? 168;\n const mobileTop = mobileOffset?.top ?? 80;\n const offsetY = isMobile ? mobileTop : desktopTop;\n\n return offsetY;\n }\n\n const getAccessibleTimeText = (seconds: number): string => {\n const { minutes, seconds: secs } = TimeHelper.toMinutesSeconds(seconds);\n\n const minuteText = minutes === 1 ? \"minute\" : \"minutes\";\n const secondText = secs === 1 ? \"second\" : \"seconds\";\n\n if (minutes > 0 && secs > 0) {\n return `Time left: ${minutes} ${minuteText} and ${secs} ${secondText}`;\n } else if (minutes > 0) {\n return `Time left: ${minutes} ${minuteText}`;\n } else {\n return `Time left: ${secs} ${secondText}`;\n }\n };\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n\n const renderPeriodicAndWarningAnnouncement = () => (\n <VisuallyHidden\n aria-live={\n typeof notifyTimer === \"number\" &&\n remainingSeconds <= notifyTimer\n ? \"assertive\"\n : \"polite\"\n }\n aria-atomic=\"true\"\n >\n {announcement}\n </VisuallyHidden>\n );\n\n const renderTimer = () => {\n const { minutes, seconds } =\n TimeHelper.toMinutesSeconds(remainingSeconds);\n const m = minutes !== 1 ? \"mins\" : \"min\";\n const s = seconds !== 1 ? \"secs\" : \"sec\";\n return (\n <>\n <TimerIcon $warn={warn} />\n <TimeLeft>Time left:</TimeLeft>\n <Timer aria-label={getAccessibleTimeText(remainingSeconds)}>\n {minutes} {m} {String(seconds).padStart(2, \"0\")} {s}\n </Timer>\n {renderPeriodicAndWarningAnnouncement()}\n </>\n );\n };\n\n const renderCountdown = () => {\n return (\n <Countdown\n data-testid={testId}\n data-id=\"countdown-wrapper\"\n ref={wrapperRef}\n inert={inertValue(!isVisible)}\n $visible={isVisible}\n $warn={warn}\n tabIndex={0}\n role=\"timer\"\n aria-label=\"Countdown timer\"\n onFocus={handleOnFocus}\n >\n {renderTimer()}\n </Countdown>\n );\n };\n\n const renderFixedCountdown = () => {\n const left =\n offset?.left ?? (align === \"left\" ? clientRectX : undefined);\n\n const right =\n offset?.right ??\n (align === \"right\"\n ? Math.floor(document.body.clientWidth - clientRectRight)\n : undefined);\n\n return (\n <FixedCountdown\n data-testid={testId}\n data-id=\"fixed-countdown-wrapper\"\n $warn={warn}\n $top={offsetY}\n $left={left}\n $right={right}\n tabIndex={0}\n role=\"timer\"\n aria-label=\"Countdown timer\"\n onFocus={handleOnFocus}\n >\n {renderTimer()}\n </FixedCountdown>\n );\n };\n\n if (!isPlaying && remainingSeconds !== 0) return <></>;\n\n return (\n <Wrapper className={className} {...otherProps}>\n <div ref={stickyRef}></div>\n {renderCountdown()}\n {wrapperRef.current && !isVisible && renderFixedCountdown()}\n </Wrapper>\n );\n};\n"],"names":["_a","className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","testId","onFinish","onNotify","onTick","otherProps","__rest","wrapperRef","useRef","isNotified","offsetY","setOffsetY","useState","clientRectRight","setClientRectRight","clientRectX","setClientRectX","isPlaying","setIsPlaying","announcement","setAnnouncement","remainingSeconds","initialSeconds","useTimer","ref","stickyRef","inView","useInView","threshold","rootMargin","initialInView","isVisible","warn","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","useEffect","performOnFinishHandler","performOnTickHandler","performOnNotifyHandler","y","desktopTop","top","mobileTop","_b","getOffsetY","current","handleResize","throttle","handleWindowResize","window","addEventListener","removeEventListener","timeElapsed","getAccessibleTimeText","clientRect","getBoundingClientRect","x","right","handleOnFocus","focusMessage","seconds","minutes","secs","TimeHelper","toMinutesSeconds","minuteText","secondText","renderTimer","m","s","_jsxs","_Fragment","children","_jsx","TimerIcon","$warn","TimeLeft","Timer","String","padStart","VisuallyHidden","Wrapper","Object","assign","Countdown","inert","inertValue","$visible","tabIndex","role","onFocus","left","undefined","Math","floor","document","body","clientWidth","FixedCountdown","$left","$right","renderFixedCountdown"],"mappings":"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"}
1	+ {"version":3,"file":"countdown-timer.js","sources":["../../../src/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import { ClockIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n formatUnitValue,\n useApplyStyle,\n useMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useIsMounted } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./countdown-timer.styles\";\nimport type { CountdownTimerProps } from \"./types\";\nimport { useTimer } from \"./use-timer\";\n\nexport const CountdownTimer = ({\n className,\n align = \"right\",\n timer,\n timestamp,\n notifyTimer,\n offset,\n mobileOffset,\n show,\n fixed = true,\n reminderInterval = 120,\n \"data-testid\": testId,\n onFinish,\n onNotify,\n onTick,\n ...otherProps\n}: CountdownTimerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const fixedCountdownRef = useRef<HTMLDivElement>(null);\n\n const isNotified = useRef<boolean>(false);\n const [offsetY, setOffsetY] = useState<number>(0);\n const [clientRectRight, setClientRectRight] = useState<number>(0);\n const [clientRectX, setClientRectX] = useState<number>(0);\n const [isPlaying, setIsPlaying] = useState(false);\n const [announcement, setAnnouncement] = useState<string>(\"\");\n\n const isMounted = useIsMounted();\n const [remainingSeconds, initialSeconds] = useTimer(\n timer,\n timestamp,\n isPlaying\n );\n const { ref: stickyRef, inView } = useInView({\n threshold: 1,\n rootMargin: `${offsetY * -1}px 0px 0px 0px`,\n initialInView: true,\n });\n const isVisible = !fixed \|\| inView;\n const warn =\n typeof notifyTimer === \"number\" && remainingSeconds <= notifyTimer;\n\n const isMobile = useMaxWidthMediaQuery(\"sm\");\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useApplyStyle(fixedCountdownRef, {\n [styles.tokens.fixedCountdown.top]: formatUnitValue(offsetY, \"px\"),\n [styles.tokens.fixedCountdown.left]: formatUnitValue(\n getOffsetLeft(),\n \"px\"\n ),\n [styles.tokens.fixedCountdown.right]: formatUnitValue(\n getOffsetRight(),\n \"px\"\n ),\n });\n\n useEffect(() => {\n setIsPlaying(show);\n }, [show]);\n\n useEffect(() => {\n if (remainingSeconds === 0) {\n performOnFinishHandler();\n } else if (\n typeof notifyTimer === \"number\" &&\n remainingSeconds <= notifyTimer\n ) {\n performOnTickHandler();\n performOnNotifyHandler();\n }\n }, [remainingSeconds]);\n\n useEffect(() => {\n const y = getOffsetY();\n setOffsetY(y);\n }, [isMobile, offset?.top, mobileOffset?.top]);\n\n useEffect(() => {\n if (wrapperRef.current) {\n const handleResize = throttle(handleWindowResize, 300);\n handleWindowResize();\n\n window.addEventListener(\"resize\", handleResize);\n\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }\n }, [wrapperRef.current]);\n\n // Announcements\n useEffect(() => {\n const timeElapsed = initialSeconds - remainingSeconds;\n if (timeElapsed === 0) return;\n // Polite notification\n if (timeElapsed % reminderInterval === 0) {\n if (\n typeof notifyTimer !== \"number\" \|\|\n remainingSeconds > notifyTimer\n ) {\n setAnnouncement(getAccessibleTimeText(remainingSeconds));\n }\n }\n\n // Assertive notification\n if (\n typeof notifyTimer === \"number\" &&\n remainingSeconds === notifyTimer\n ) {\n setAnnouncement(getAccessibleTimeText(remainingSeconds));\n }\n }, [remainingSeconds, initialSeconds, reminderInterval, notifyTimer]);\n\n useEffect(() => {\n // reset\n isNotified.current = false;\n }, [initialSeconds, show]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleWindowResize = () => {\n if (!wrapperRef.current) return;\n\n const clientRect = wrapperRef.current.getBoundingClientRect();\n\n setClientRectX(clientRect.x);\n setClientRectRight(clientRect.right);\n };\n\n const handleOnFocus = () => {\n const focusMessage = getAccessibleTimeText(remainingSeconds);\n setAnnouncement(focusMessage);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const performOnTickHandler = () => {\n if (onTick) {\n onTick(remainingSeconds);\n }\n };\n\n const performOnNotifyHandler = () => {\n if (onNotify && !isNotified.current) {\n isNotified.current = true;\n onNotify();\n }\n };\n\n const performOnFinishHandler = () => {\n setIsPlaying(false);\n\n if (onFinish) onFinish();\n };\n\n function getOffsetY() {\n const desktopTop = offset?.top ?? 168;\n const mobileTop = mobileOffset?.top ?? 80;\n const offsetY = isMobile ? mobileTop : desktopTop;\n\n return offsetY;\n }\n\n function getOffsetLeft() {\n if (!isMounted \|\| align !== \"left\") return undefined;\n return offset?.left ?? clientRectX;\n }\n\n function getOffsetRight() {\n if (!isMounted \|\| align !== \"right\") return undefined;\n return (\n offset?.right ??\n Math.floor(document.body.clientWidth - clientRectRight)\n );\n }\n\n const getAccessibleTimeText = (seconds: number): string => {\n const { minutes, seconds: secs } = TimeHelper.toMinutesSeconds(seconds);\n\n const minuteText = minutes === 1 ? \"minute\" : \"minutes\";\n const secondText = secs === 1 ? \"second\" : \"seconds\";\n\n if (minutes > 0 && secs > 0) {\n return `Time left: ${minutes} ${minuteText} and ${secs} ${secondText}`;\n } else if (minutes > 0) {\n return `Time left: ${minutes} ${minuteText}`;\n } else {\n return `Time left: ${secs} ${secondText}`;\n }\n };\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n\n const renderPeriodicAndWarningAnnouncement = () => (\n <VisuallyHidden\n aria-live={\n typeof notifyTimer === \"number\" &&\n remainingSeconds <= notifyTimer\n ? \"assertive\"\n : \"polite\"\n }\n aria-atomic=\"true\"\n >\n {announcement}\n </VisuallyHidden>\n );\n\n const renderTimer = () => {\n const { minutes, seconds } =\n TimeHelper.toMinutesSeconds(remainingSeconds);\n const m = minutes !== 1 ? \"mins\" : \"min\";\n const s = seconds !== 1 ? \"secs\" : \"sec\";\n return (\n <>\n <ClockIcon className={styles.timerIcon} data-warn={!!warn} />\n <div className={styles.timeLeft}>Time left:</div>\n <div\n className={styles.timer}\n aria-label={getAccessibleTimeText(remainingSeconds)}\n >\n {minutes} {m} {String(seconds).padStart(2, \"0\")} {s}\n </div>\n {renderPeriodicAndWarningAnnouncement()}\n </>\n );\n };\n\n const renderInlineCountdown = () => {\n return (\n <div\n data-testid={testId}\n data-id=\"countdown-wrapper\"\n data-warn={!!warn}\n ref={wrapperRef}\n inert={inertValue(!isVisible)}\n className={clsx(\n styles.countdown,\n styles.countdownInline,\n !isVisible && styles.countdownHidden\n )}\n tabIndex={0}\n role=\"timer\"\n aria-label=\"Countdown timer\"\n onFocus={handleOnFocus}\n >\n {renderTimer()}\n </div>\n );\n };\n\n const renderFixedCountdown = () => {\n return (\n <div\n ref={fixedCountdownRef}\n data-testid={testId}\n data-id=\"fixed-countdown-wrapper\"\n data-warn={!!warn}\n className={clsx(styles.countdown, styles.countdownFixed)}\n tabIndex={0}\n role=\"timer\"\n aria-label=\"Countdown timer\"\n onFocus={handleOnFocus}\n >\n {renderTimer()}\n </div>\n );\n };\n\n if (!isPlaying && remainingSeconds !== 0) return <></>;\n\n return (\n <div className={clsx(styles.wrapper, className)} {...otherProps}>\n <div ref={stickyRef}></div>\n {renderInlineCountdown()}\n {wrapperRef.current && !isVisible && renderFixedCountdown()}\n </div>\n );\n};\n"],"names":["_a","className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","testId","onFinish","onNotify","onTick","otherProps","__rest","wrapperRef","useRef","fixedCountdownRef","isNotified","offsetY","setOffsetY","useState","clientRectRight","setClientRectRight","clientRectX","setClientRectX","isPlaying","setIsPlaying","announcement","setAnnouncement","isMounted","useIsMounted","remainingSeconds","initialSeconds","useTimer","ref","stickyRef","inView","useInView","threshold","rootMargin","initialInView","isVisible","warn","isMobile","useMaxWidthMediaQuery","useApplyStyle","styles.tokens","fixedCountdown","top","formatUnitValue","left","getOffsetLeft","right","Math","floor","document","body","clientWidth","getOffsetRight","useEffect","performOnFinishHandler","performOnTickHandler","performOnNotifyHandler","y","desktopTop","mobileTop","_b","getOffsetY","current","handleResize","throttle","handleWindowResize","window","addEventListener","removeEventListener","timeElapsed","getAccessibleTimeText","clientRect","getBoundingClientRect","x","handleOnFocus","focusMessage","seconds","minutes","secs","TimeHelper","toMinutesSeconds","minuteText","secondText","renderTimer","m","s","_jsxs","_Fragment","children","_jsx","ClockIcon","styles.timerIcon","styles.timeLeft","styles.timer","String","padStart","VisuallyHidden","Object","assign","clsx","styles.wrapper","inert","inertValue","styles.countdown","styles.countdownInline","styles.countdownHidden","tabIndex","role","onFocus","styles.countdownFixed"],"mappings":"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"}

package/cjs/countdown-timer/countdown-timer.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./countdown-timer.styles_ipn1b0.css");exports.countdown="c1ji5mw9",exports.countdownFixed="c1ehax2j",exports.countdownHidden="csdqyky",exports.countdownInline="cibq1kp",exports.timeLeft="t6f42l5",exports.timer="t19x1azi",exports.timerIcon="t1pvvziw",exports.tokens={fixedCountdown:{top:"--fds-internal-countdownTimer-fixedCountdown-top",left:"--fds-internal-countdownTimer-fixedCountdown-left",right:"--fds-internal-countdownTimer-fixedCountdown-right"}},exports.wrapper="wav7a6b";
2	+ //# sourceMappingURL=countdown-timer.styles.js.map

package/cjs/countdown-timer/countdown-timer.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"countdown-timer.styles.js","sources":["../../../src/countdown-timer/countdown-timer.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Radius,\n Shadow,\n Spacing,\n} from \"../theme\";\n\nexport const tokens = {\n fixedCountdown: {\n top: \"--fds-internal-countdownTimer-fixedCountdown-top\",\n left: \"--fds-internal-countdownTimer-fixedCountdown-left\",\n right: \"--fds-internal-countdownTimer-fixedCountdown-right\",\n },\n} as const;\n\nexport const wrapper = css`\n width: 100%;\n`;\n\nexport const countdown = css`\n ${Font[\"body-baseline-regular\"]}\n display: flex;\n align-items: center;\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n border-radius: ${Radius[\"sm\"]};\n color: ${Colour[\"text-primary\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]};\n border-color: ${Colour[\"border-primary\"]};\n background-color: ${Colour[\"bg\"]};\n\n ${MediaQuery.MaxWidth.sm} {\n padding: ${Spacing[\"spacing-16\"]};\n }\n\n &[data-warn=\"true\"] {\n color: ${Colour[\"text-error\"]};\n border-color: ${Colour[\"border-error\"]};\n }\n`;\n\nexport const countdownHidden = css`\n opacity: 0;\n`;\n\nexport const countdownInline = css`\n position: relative;\n`;\n\nexport const countdownFixed = css`\n position: fixed;\n z-index: 10;\n\n /* reset variables to prevent leaking to child components */\n ${tokens.fixedCountdown.top}: initial;\n ${tokens.fixedCountdown.left}: initial;\n ${tokens.fixedCountdown.right}: initial;\n top: var(${tokens.fixedCountdown.top});\n left: var(${tokens.fixedCountdown.left});\n right: var(${tokens.fixedCountdown.right});\n\n box-shadow: ${Shadow[\"xs-focus-strong\"]};\n\n ${MediaQuery.MaxWidth.sm} {\n left: 0;\n right: 0;\n border-radius: 0;\n border-left: none;\n border-right: none;\n box-shadow: none;\n }\n\n &[data-warn=\"true\"] {\n box-shadow: ${Shadow[\"xs-error-strong\"]};\n }\n`;\n\nexport const timeLeft = css`\n font-weight: ${Font.Spec[\"weight-bold\"]};\n margin-left: ${Spacing[\"spacing-8\"]};\n margin-right: ${Spacing[\"spacing-24\"]};\n\n ${MediaQuery.MaxWidth.sm} {\n margin-right: ${Spacing[\"spacing-48\"]};\n }\n`;\n\nexport const timer = css`\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n margin-left: auto;\n`;\n\nexport const timerIcon = css`\n color: ${Colour[\"icon-primary\"]};\n\n &[data-warn=\"true\"] {\n color: ${Colour[\"icon-error\"]};\n }\n`;\n"],"names":["fixedCountdown","top","left","right"],"mappings":"6GAwBsB,kCA6BK,mCARC,kCAIA,2BAgCP,wBAUH,6BAKI,0BApFA,CAClBA,eAAgB,CACZC,IAAK,mDACLC,KAAM,oDACNC,MAAO,uEAIK"}