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

package/shared/time-slot/time-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot.js","sources":["../../../src/shared/time-slot/time-slot.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { mergeRefs } from \"../../util\";\nimport * as styles from \"./time-slot.styles\";\nimport type { SlotStyle } from \"./types\";\n\nexport interface TimeSlotProps {\n    \"data-testid\"?: string | undefined;\n    bgColor: string;\n    bgColor2?: string | undefined;\n    children?: ReactNode;\n    className?: string | undefined;\n    clickable?: boolean | undefined;\n    fill?: \"default\" | \"top\" | \"bottom\" | undefined;\n    hoverBgColor?: string | undefined;\n    hoverBgColor2?: string | undefined;\n    nonClickableCursor?: \"default\" | \"not-allowed\" | undefined;\n    onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n    styleType: SlotStyle;\n    tabIndex?: number | undefined;\n}\n\nconst Component = (\n    {\n        className,\n        \"data-testid\": dataTestId,\n        bgColor,\n        bgColor2,\n        children,\n        clickable,\n        fill = \"default\",\n        hoverBgColor,\n        hoverBgColor2,\n        nonClickableCursor,\n        onClick,\n        styleType,\n        tabIndex,\n    }: TimeSlotProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const slotRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(slotRef, {\n        [styles.tokens.slot.bgColor]: bgColor,\n        [styles.tokens.slot.bgColor2]: bgColor2,\n        [styles.tokens.slot.hoverBgColor]: hoverBgColor,\n        [styles.tokens.slot.hoverBgColor2]: hoverBgColor2,\n        [styles.tokens.slot.cursor]: nonClickableCursor,\n    });\n\n    const isHoverable = () => {\n        if (!clickable) {\n            return false;\n        }\n\n        if (styleType === \"stripes\") {\n            return !!(hoverBgColor || hoverBgColor2);\n        }\n\n        return !!hoverBgColor;\n    };\n\n    return (\n        <div\n            ref={mergeRefs(slotRef, ref)}\n            className={clsx(\n                styles.timeSlot,\n                {\n                    [styles.timeSlotHalfFillTop]: fill === \"top\",\n                    [styles.timeSlotHalfFillBottom]: fill === \"bottom\",\n                },\n                className\n            )}\n            data-style-type={styleType}\n            data-clickable={!!clickable}\n            data-hoverable={isHoverable()}\n            onClick={onClick}\n            data-testid={dataTestId}\n            tabIndex={tabIndex}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport const TimeSlot = forwardRef(Component);\n"],"names":["TimeSlot","forwardRef","className","dataTestId","bgColor","bgColor2","children","clickable","fill","hoverBgColor","hoverBgColor2","nonClickableCursor","onClick","styleType","tabIndex","ref","slotRef","useRef","useApplyStyle","styles.tokens","slot","cursor","_jsx","mergeRefs","clsx","styles.timeSlot","timeSlotHalfFillTop","styles.timeSlotHalfFillTop","timeSlotHalfFillBottom","styles.timeSlotHalfFillBottom"],"mappings":"uzBAyBA,MA+DaA,EAAWC,GA/DN,EAEVC,YACA,cAAeC,EACfC,UACAC,WACAC,WACAC,YACAC,OAAO,UACPC,eACAC,gBACAC,qBACAC,UACAC,YACAC,YAEJC,KAEA,MAAMC,EAAUC,EAAuB,MAEvCC,EAAcF,EAAS,CACnB,CAACG,EAAcC,KAAKhB,SAAUA,EAC9B,CAACe,EAAcC,KAAKf,UAAWA,EAC/B,CAACc,EAAcC,KAAKX,cAAeA,EACnC,CAACU,EAAcC,KAAKV,eAAgBA,EACpC,CAACS,EAAcC,KAAKC,QAASV,IAejC,OACIW,EAAA,MAAA,CACIP,IAAKQ,EAAUP,EAASD,GACxBb,UAAWsB,EACPC,EACA,CACIC,CAACC,GAAsC,QAATnB,EAC9BoB,CAACC,GAAyC,WAATrB,GAErCN,GACH,kBACgBW,EAAS,mBACRN,EAAS,oBAvB1BA,IAIa,YAAdM,EACUJ,GAAgBC,EAGrBD,IAiBLG,QAASA,EAAO,cACHT,EACbW,SAAUA,EAAQR,SAEjBA,GACC"}

package/shared/time-slot/time-slot.styles.d.ts

@@ -0,0 +1,12 @@
+export declare const tokens: {
+    slot: {
+        bgColor: string;
+        bgColor2: string;
+        hoverBgColor: string;
+        hoverBgColor2: string;
+        cursor: string;
+    };
+};
+export declare const timeSlot: import("@linaria/core").LinariaClassName;
+export declare const timeSlotHalfFillTop: import("@linaria/core").LinariaClassName;
+export declare const timeSlotHalfFillBottom: import("@linaria/core").LinariaClassName;

package/shared/time-slot/time-slot.styles.js

@@ -0,0 +1,2 @@
+import"./time-slot.styles_18s0to7.css";const o={slot:{bgColor:"--fds-internal-timeSlot-slot-bgColor",bgColor2:"--fds-internal-timeSlot-slot-bgColor2",hoverBgColor:"--fds-internal-timeSlot-slot-hoverBgColor",hoverBgColor2:"--fds-internal-timeSlot-slot-hoverBgColor2",cursor:"--fds-internal-timeSlot-slot-cursor"}},t="tsti7hb",l="tmgdrss",r="t31kbad";export{t as timeSlot,r as timeSlotHalfFillBottom,l as timeSlotHalfFillTop,o as tokens};
+//# sourceMappingURL=time-slot.styles.js.map

package/shared/time-slot/time-slot.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot.styles.js","sources":["../../../src/shared/time-slot/time-slot.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../../theme\";\n\nexport const tokens = {\n    slot: {\n        bgColor: \"--fds-internal-timeSlot-slot-bgColor\",\n        bgColor2: \"--fds-internal-timeSlot-slot-bgColor2\",\n        hoverBgColor: \"--fds-internal-timeSlot-slot-hoverBgColor\",\n        hoverBgColor2: \"--fds-internal-timeSlot-slot-hoverBgColor2\",\n        cursor: \"--fds-internal-timeSlot-slot-cursor\",\n    },\n};\n\nconst stripesGradient = `repeating-linear-gradient(\n    135deg,\n    var(${tokens.slot.bgColor2}) 0px,\n    var(${tokens.slot.bgColor2}) 6px,\n    var(${tokens.slot.bgColor}) 6px,\n    var(${tokens.slot.bgColor}) 12px\n)`;\n\nexport const timeSlot = css`\n    ${tokens.slot.bgColor}: ${Colour[\"bg-stronger\"]};\n    ${tokens.slot.bgColor2}: ${Colour[\"bg-strongest\"]};\n    ${tokens.slot.hoverBgColor}: ${Colour[\"bg-stronger\"]};\n    ${tokens.slot.hoverBgColor2}: ${Colour[\"bg-strongest\"]};\n\n    cursor: var(${tokens.slot.cursor}, default);\n\n    &[data-clickable=\"true\"] {\n        cursor: pointer;\n    }\n\n    &[data-style-type=\"default\"] {\n        background-color: var(${tokens.slot.bgColor});\n    }\n\n    &[data-style-type=\"default\"][data-hoverable=\"true\"] {\n        &:hover {\n            background-color: var(${tokens.slot.hoverBgColor});\n        }\n    }\n\n    &[data-style-type=\"stripes\"] {\n        background: ${stripesGradient};\n    }\n\n    &[data-style-type=\"stripes\"][data-hoverable=\"true\"] {\n        &:hover {\n            background: repeating-linear-gradient(\n                135deg,\n                var(${tokens.slot.hoverBgColor2}, var(${tokens.slot.bgColor2}))\n                    0px,\n                var(${tokens.slot.hoverBgColor2}, var(${tokens.slot.bgColor2}))\n                    6px,\n                var(${tokens.slot.hoverBgColor}, var(${tokens.slot.bgColor}))\n                    6px,\n                var(${tokens.slot.hoverBgColor}, var(${tokens.slot.bgColor}))\n                    12px\n            );\n        }\n    }\n`;\n\nexport const timeSlotHalfFillTop = css`\n    &[data-style-type=\"default\"] {\n        background: linear-gradient(\n            to top,\n            var(${tokens.slot.bgColor}) 50%,\n            ${Colour[\"bg-strongest\"]} 50%\n        );\n    }\n\n    &[data-style-type=\"stripes\"] {\n        background: linear-gradient(\n                to top,\n                transparent 50%,\n                ${Colour[\"bg-strongest\"]} 50%\n            ),\n            ${stripesGradient};\n    }\n`;\n\nexport const timeSlotHalfFillBottom = css`\n    &[data-style-type=\"default\"] {\n        background: linear-gradient(\n            to bottom,\n            var(${tokens.slot.bgColor}) 50%,\n            ${Colour[\"bg-strongest\"]} 50%\n        );\n    }\n\n    &[data-style-type=\"stripes\"] {\n        background: linear-gradient(\n                to bottom,\n                transparent 50%,\n                ${Colour[\"bg-strongest\"]} 50%\n            ),\n            ${stripesGradient};\n    }\n`;\n"],"names":["tokens","slot","bgColor","bgColor2","hoverBgColor","hoverBgColor2","cursor","timeSlot","timeSlotHalfFillTop","timeSlotHalfFillBottom"],"mappings":"uEAIO,MAAMA,EAAS,CAClBC,KAAM,CACFC,QAAS,uCACTC,SAAU,wCACVC,aAAc,4CACdC,cAAe,6CACfC,OAAQ,wCAYHC,EAAQ,UA2CRC,EAAmB,UAmBnBC,EAAsB"}

package/shared/time-slot/time-slot.styles_18s0to7.css

@@ -0,0 +1,29 @@
+.tsti7hb{--fds-internal-timeSlot-slot-bgColor:var(--fds-colour-bg-stronger);--fds-internal-timeSlot-slot-bgColor2:var(--fds-colour-bg-strongest);--fds-internal-timeSlot-slot-hoverBgColor:var(--fds-colour-bg-stronger);--fds-internal-timeSlot-slot-hoverBgColor2:var(--fds-colour-bg-strongest);cursor:var(--fds-internal-timeSlot-slot-cursor, default);}.tsti7hb[data-clickable="true"]{cursor:pointer;}.tsti7hb[data-style-type="default"]{background-color:var(--fds-internal-timeSlot-slot-bgColor);}.tsti7hb[data-style-type="default"][data-hoverable="true"]:hover{background-color:var(--fds-internal-timeSlot-slot-hoverBgColor);}.tsti7hb[data-style-type="stripes"]{background:repeating-linear-gradient(     135deg,     var(--fds-internal-timeSlot-slot-bgColor2) 0px,     var(--fds-internal-timeSlot-slot-bgColor2) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 12px );}.tsti7hb[data-style-type="stripes"][data-hoverable="true"]:hover{background:repeating-linear-gradient(
+                135deg,
+                var(--fds-internal-timeSlot-slot-hoverBgColor2, var(--fds-internal-timeSlot-slot-bgColor2))
+                    0px,
+                var(--fds-internal-timeSlot-slot-hoverBgColor2, var(--fds-internal-timeSlot-slot-bgColor2))
+                    6px,
+                var(--fds-internal-timeSlot-slot-hoverBgColor, var(--fds-internal-timeSlot-slot-bgColor))
+                    6px,
+                var(--fds-internal-timeSlot-slot-hoverBgColor, var(--fds-internal-timeSlot-slot-bgColor))
+                    12px
+            );}
+.tmgdrss[data-style-type="default"]{background:linear-gradient(
+            to top,
+            var(--fds-internal-timeSlot-slot-bgColor) 50%,
+            var(--fds-colour-bg-strongest) 50%
+        );}.tmgdrss[data-style-type="stripes"]{background:linear-gradient(
+                to top,
+                transparent 50%,
+                var(--fds-colour-bg-strongest) 50%
+            ),repeating-linear-gradient(     135deg,     var(--fds-internal-timeSlot-slot-bgColor2) 0px,     var(--fds-internal-timeSlot-slot-bgColor2) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 12px );}
+.t31kbad[data-style-type="default"]{background:linear-gradient(
+            to bottom,
+            var(--fds-internal-timeSlot-slot-bgColor) 50%,
+            var(--fds-colour-bg-strongest) 50%
+        );}.t31kbad[data-style-type="stripes"]{background:linear-gradient(
+                to bottom,
+                transparent 50%,
+                var(--fds-colour-bg-strongest) 50%
+            ),repeating-linear-gradient(     135deg,     var(--fds-internal-timeSlot-slot-bgColor2) 0px,     var(--fds-internal-timeSlot-slot-bgColor2) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 6px,     var(--fds-internal-timeSlot-slot-bgColor) 12px );}

package/shared/time-slot/types.d.ts

@@ -0,0 +1 @@
+export type SlotStyle = "default" | "stripes";

package/sidenav/sidenav-drawer-item.styles.js

@@ -1,2 +1,2 @@
-import"./sidenav-drawer-item.styles_yp8cga.css";const e="l1011b8q",t="lmu4z67",c="dlg5ewg",s="c1ey6q8x",d="cpftd7o",a="ttch7cq";export{s as chevronIcon,d as chevronIconExpanded,c as drawerSubitemContainer,e as linkButton,t as linkButtonNoChildren,a as textElement};
+import"./sidenav-drawer-item.styles_1ljnyx2.css";const e="l1011b8q",t="lmu4z67",s="dlg5ewg",c="c1ey6q8x",d="cpftd7o",l="ttch7cq";export{c as chevronIcon,d as chevronIconExpanded,s as drawerSubitemContainer,e as linkButton,t as linkButtonNoChildren,l as textElement};
 //# sourceMappingURL=sidenav-drawer-item.styles.js.map

package/sidenav/sidenav-drawer-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-item.styles.js","sources":["../../src/sidenav/sidenav-drawer-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Motion, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n\n    ${Font[\"body-md-semibold\"]}\n    color: ${Colour[\"text\"]};\n\n    &:hover,\n    &:focus {\n        background: ${Colour[\"bg-hover-strong\"]};\n    }\n`;\n\nexport const linkButtonNoChildren = css`\n    &:hover,\n    &:focus {\n        background: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const drawerSubitemContainer = css`\n    margin: 0.125rem 0 0.125rem 0.5rem;\n    overflow: hidden;\n`;\n\nexport const chevronIcon = css`\n    flex-shrink: 0;\n    color: ${Colour[\"icon\"]};\n    transform: rotate(180deg);\n    transition: transform ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const chevronIconExpanded = css`\n    transform: rotate(0deg);\n`;\n\nexport const textElement = css`\n    ${lineClampCss(2)}\n    text-align: left;\n`;\n"],"names":["linkButton","linkButtonNoChildren","drawerSubitemContainer","chevronIcon","chevronIconExpanded","textElement"],"mappings":"uEAQO,MAAMA,EAAU,WAmBVC,EAAoB,UAQpBC,EAAsB,UAKtBC,EAAW,WAOXC,EAAmB,UAInBC,EAAW"}
+{"version":3,"file":"sidenav-drawer-item.styles.js","sources":["../../src/sidenav/sidenav-drawer-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Motion, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n\n    ${Font[\"body-md-semibold\"]}\n    color: ${Colour[\"text\"]};\n\n    &:hover,\n    &:focus {\n        background: ${Colour[\"bg-hover-strong\"]};\n    }\n`;\n\nexport const linkButtonNoChildren = css`\n    &:hover,\n    &:focus {\n        background: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const drawerSubitemContainer = css`\n    margin: 0.125rem 0 0.125rem 0.5rem;\n    overflow: hidden;\n`;\n\nexport const chevronIcon = css`\n    flex-shrink: 0;\n    color: ${Colour[\"icon\"]};\n    transform: rotate(180deg);\n    transition: transform ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const chevronIconExpanded = css`\n    transform: rotate(0deg);\n`;\n\nexport const textElement = css`\n    ${lineClampCss(2)}\n    text-align: left;\n`;\n"],"names":["linkButton","linkButtonNoChildren","drawerSubitemContainer","chevronIcon","chevronIconExpanded","textElement"],"mappings":"wEAQO,MAAMA,EAAU,WAmBVC,EAAoB,UAQpBC,EAAsB,UAKtBC,EAAW,WAOXC,EAAmB,UAInBC,EAAW"}

package/sidenav/sidenav-drawer-item.styles_1ljnyx2.css

@@ -0,0 +1,6 @@
+.l1011b8q{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;gap:1rem;width:100%;padding:0.75rem 1rem;border-radius:var(--fds-radius-md);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);color:var(--fds-colour-text);}.l1011b8q:hover,.l1011b8q:focus{background:var(--fds-colour-bg-hover-strong);}
+.lmu4z67:hover,.lmu4z67:focus{background:var(--fds-colour-bg-hover);color:var(--fds-colour-text-hover);}
+.dlg5ewg{margin:0.125rem 0 0.125rem 0.5rem;overflow:hidden;}
+.c1ey6q8x{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);}
+.cpftd7o{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.ttch7cq{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left;}

package/sidenav/sidenav-drawer-subitem.styles.js

@@ -1,2 +1,2 @@
-import"./sidenav-drawer-subitem.styles_1ylzfn5.css";const s="l1ge7as9";export{s as linkButton};
+import"./sidenav-drawer-subitem.styles_2y58kf.css";const s="l1ge7as9";export{s as linkButton};
 //# sourceMappingURL=sidenav-drawer-subitem.styles.js.map

package/sidenav/sidenav-drawer-subitem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-subitem.styles.js","sources":["../../src/sidenav/sidenav-drawer-subitem.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n    ${lineClampCss(2)}\n    text-align: left;\n\n    &:hover,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n"],"names":["linkButton"],"mappings":"2EAQO,MAAMA,EAAU"}
+{"version":3,"file":"sidenav-drawer-subitem.styles.js","sources":["../../src/sidenav/sidenav-drawer-subitem.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n    ${lineClampCss(2)}\n    text-align: left;\n\n    &:hover,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n"],"names":["linkButton"],"mappings":"0EAQO,MAAMA,EAAU"}

package/sidenav/sidenav-drawer-subitem.styles_2y58kf.css

@@ -0,0 +1 @@
+.l1ge7as9{width:100%;padding:0.75rem 1rem;border-radius:var(--fds-radius-md);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left;}.l1ge7as9:hover,.l1ge7as9:focus{background-color:var(--fds-colour-bg-hover);color:var(--fds-colour-text-hover);}

package/sidenav/sidenav-item.styles.js

@@ -1,2 +1,2 @@
-import"./sidenav-item.styles_1eew8px.css";const s="cfxt5d9",e="i1rznncx",d="tegzrsi",t="d5cbs2m",c="d1g4locu",i="d1ao5fhb",n="d1m7u3sj";export{s as container,t as defaultButton,c as defaultButtonHighlight,i as desktopDrawer,n as desktopDrawerShowShadow,e as iconContainer,d as titleText};
+import"./sidenav-item.styles_lqw3kh.css";const s="cfxt5d9",d="i1rznncx",t="tegzrsi",c="d5cbs2m",e="d1g4locu",i="d1ao5fhb",n="d1m7u3sj";export{s as container,c as defaultButton,e as defaultButtonHighlight,i as desktopDrawer,n as desktopDrawerShowShadow,d as iconContainer,t as titleText};
 //# sourceMappingURL=sidenav-item.styles.js.map

package/sidenav/sidenav-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-item.styles.js","sources":["../../src/sidenav/sidenav-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Font, Motion, Radius, Shadow } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const container = css`\n    width: 100%;\n`;\n\nexport const iconContainer = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0.25rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n    color: ${Colour[\"icon-primary\"]};\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n`;\n\nexport const titleText = css`\n    ${lineClampCss(2)}\n    margin-top: 0.25rem;\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const defaultButton = css`\n    width: 100%;\n    margin-top: 1rem;\n    cursor: pointer;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n\n    &:hover,\n    &:focus {\n        .${iconContainer} {\n            background-color: ${Colour[\"bg-hover\"]};\n        }\n\n        .${titleText} {\n            ${Font[\"body-xs-semibold\"]}\n            color: ${Colour[\"text-hover\"]};\n        }\n    }\n`;\n\nexport const defaultButtonHighlight = css`\n    .${iconContainer} {\n        background-color: ${Colour[\"bg-hover\"]};\n    }\n\n    .${titleText} {\n        ${Font[\"body-xs-semibold\"]}\n        color: ${Colour[\"text-selected\"]};\n    }\n`;\n\nexport const desktopDrawer = css`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    width: 15rem;\n    height: 100%;\n    padding: 1rem 0.5rem;\n    background-color: ${Colour[\"bg-primary-subtlest\"]};\n    border-top-right-radius: ${Radius[\"md\"]};\n    border-bottom-right-radius: ${Radius[\"md\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const desktopDrawerShowShadow = css`\n    box-shadow: ${Shadow[\"xs-subtle\"]};\n    clip-path: inset(0 -6px 0 0);\n`;\n"],"names":["container","iconContainer","titleText","defaultButton","defaultButtonHighlight","desktopDrawer","desktopDrawerShowShadow"],"mappings":"iEAQO,MAAMA,EAAS,UAITC,EAAa,WAgBbC,EAAS,UAMTC,EAAa,UAuBbC,EAAsB,WAWtBC,EAAa,WAcbC,EAAuB"}
+{"version":3,"file":"sidenav-item.styles.js","sources":["../../src/sidenav/sidenav-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Font, Motion, Radius, Shadow } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const container = css`\n    width: 100%;\n`;\n\nexport const iconContainer = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0.25rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n    color: ${Colour[\"icon-primary\"]};\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n`;\n\nexport const titleText = css`\n    ${lineClampCss(2)}\n    margin-top: 0.25rem;\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const defaultButton = css`\n    width: 100%;\n    margin-top: 1rem;\n    cursor: pointer;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n\n    &:hover,\n    &:focus {\n        .${iconContainer} {\n            background-color: ${Colour[\"bg-hover\"]};\n        }\n\n        .${titleText} {\n            ${Font[\"body-xs-semibold\"]}\n            color: ${Colour[\"text-hover\"]};\n        }\n    }\n`;\n\nexport const defaultButtonHighlight = css`\n    .${iconContainer} {\n        background-color: ${Colour[\"bg-hover\"]};\n    }\n\n    .${titleText} {\n        ${Font[\"body-xs-semibold\"]}\n        color: ${Colour[\"text-selected\"]};\n    }\n`;\n\nexport const desktopDrawer = css`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    width: 15rem;\n    height: 100%;\n    padding: 1rem 0.5rem;\n    background-color: ${Colour[\"bg-primary-subtlest\"]};\n    border-top-right-radius: ${Radius[\"md\"]};\n    border-bottom-right-radius: ${Radius[\"md\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const desktopDrawerShowShadow = css`\n    box-shadow: ${Shadow[\"xs-subtle\"]};\n    clip-path: inset(0 -6px 0 0);\n`;\n"],"names":["container","iconContainer","titleText","defaultButton","defaultButtonHighlight","desktopDrawer","desktopDrawerShowShadow"],"mappings":"gEAQO,MAAMA,EAAS,UAITC,EAAa,WAgBbC,EAAS,UAMTC,EAAa,UAuBbC,EAAsB,WAWtBC,EAAa,WAcbC,EAAuB"}

package/sidenav/sidenav-item.styles_lqw3kh.css

@@ -0,0 +1,7 @@
+.cfxt5d9{width:100%;}
+.i1rznncx{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:0.25rem 1rem;border-radius:var(--fds-radius-md);color:var(--fds-colour-icon-primary);-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);}.i1rznncx svg{height:1.25rem;width:1.25rem;}
+.tegzrsi{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:0.25rem;-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);}
+.d5cbs2m{width:100%;margin-top:1rem;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.d5cbs2m:hover .i1rznncx,.d5cbs2m:focus .i1rznncx{background-color:var(--fds-colour-bg-hover);}.d5cbs2m:hover .tegzrsi,.d5cbs2m:focus .tegzrsi{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-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);color:var(--fds-colour-text-hover);}
+.d1g4locu .i1rznncx{background-color:var(--fds-colour-bg-hover);}.d1g4locu .tegzrsi{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-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);color:var(--fds-colour-text-selected);}
+.d1ao5fhb{list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:auto;width:15rem;height:100%;padding:1rem 0.5rem;background-color:var(--fds-colour-bg-primary-subtlest);border-top-right-radius:var(--fds-radius-md);border-bottom-right-radius:var(--fds-radius-md);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.d1m7u3sj{box-shadow:var(--fds-shadow-xs-subtle);-webkit-clip-path:inset(0 -6px 0 0);clip-path:inset(0 -6px 0 0);}

package/smart-app-banner/smart-app-banner.js

@@ -1,2 +1,2 @@
-import{jsx as e,Fragment as r,jsxs as i}from"react/jsx-runtime";import n from"react";import{SmartAppBannerContainer as t,ProceedContainer as a,BannerIcon as s,TextContainer as o,Title as l,Description as c,ButtonContainer as d,StyledButton as h,DismissContainer as p,DismissButton as f,Cross as m,Star as u,StarHalf as b,StarEmpty as g,RatingContainer as $}from"./smart-app-banner.styles.js";const k="https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png",C="smart-app-banner";const w=n.forwardRef((function(n,w){const{className:y,show:A,href:N,content:L,offset:j=0,icon:x=k,animated:M=!1,onDismiss:v,onClick:D}=n,{title:O,message:P,buttonLabel:R,iconAriaLabel:S,buttonAriaLabel:_,numberOfStars:q}=L,z={dismiss:"Close banner",icon:null!=S?S:"",cta:null!=_?_:R},B=e=>{e.stopPropagation(),window.open(N,"_blank","noreferrer"),null==D||D()};return e(r,{children:A&&i(t,{ref:w,$isAnimated:M,$offset:j,className:y,children:[i(a,{onClick:B,id:`${C}-proceed`,"data-testid":`${C}-proceed-container`,children:[e(s,{src:x,alt:z.icon}),i(o,{children:[e(l,{children:O}),e(c,{children:P}),(()=>{if(isNaN(q)||q<0)return;const r=[],i=q-Math.floor(q)>=.4;for(let i=0;i<Math.floor(q);i++)r.push(e(u,{"aria-hidden":!0},`star${i}`));if(i&&r.push(e(b,{"aria-hidden":!0},"halfstar")),r.length<5){const i=5-r.length;for(let n=0;n<i;n++)r.push(e(g,{"aria-hidden":!0},`emptystar${n}`))}return e($,{role:"group","aria-label":`A rating of ${q} out of 5 stars`,children:r.slice(0,5)})})()]}),e(d,{children:e(h,{type:"button",onClick:B,"aria-label":z.cta,children:R})})]}),e(p,{onClick:v,id:`${C}-dismiss`,"data-testid":`${C}-dismiss-container`,children:e(f,{"aria-label":z.dismiss,children:e(m,{})})})]})})}));export{w as SmartAppBanner};
+import{jsx as e,Fragment as s,jsxs as t}from"react/jsx-runtime";import{CrossIcon as r}from"@lifesg/react-icons/cross";import{StarIcon as i}from"@lifesg/react-icons/star";import{StarFillIcon as a}from"@lifesg/react-icons/star-fill";import{StarHalfIcon as o}from"@lifesg/react-icons/star-half";import n from"clsx";import l,{useRef as m,useContext as c}from"react";import{Button as d}from"../button/button.js";import{ClickableIcon as p}from"../shared/clickable-icon/clickable-icon.js";import"../theme/theme-provider/index.js";import{ThemeContext as f}from"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as h}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as u}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as g}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as j,proceedContainer as b,bannerIcon as N,textContainer as y,title as k,description as v,buttonContainer as $,button as x,dismissContainer as C,dismissButton as w,cross as A,smartAppBannerContainer as L,smartAppBannerContainerDark as M,smartAppBannerContainerLight as S,smartAppBannerContainerAnimated as q,starIcon as B,ratingContainer as z}from"./smart-app-banner.styles.js";const D="https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png",O="smart-app-banner";const P=l.forwardRef((function(l,P){const{className:R,show:T,href:X,content:_,offset:E=0,icon:F=D,animated:G=!1,onDismiss:H,onClick:I}=l,{title:J,message:K,buttonLabel:Q,iconAriaLabel:U,buttonAriaLabel:V,numberOfStars:W}=_,Y=m(null),Z=c(f),ee="dark"===(null==Z?void 0:Z.mode);h(Y,{[j.container.top]:`${E}px`});const se={dismiss:"Close banner",icon:null!=U?U:"",cta:null!=V?V:Q},te=e=>{e.stopPropagation(),window.open(X,"_blank","noreferrer"),null==I||I()};return e(s,{children:T&&t("div",{ref:g(Y,P),"data-testid":O,className:n(L,ee?M:S,G&&q,R),children:[t("div",{className:b,onClick:te,id:`${O}-proceed`,"data-testid":`${O}-proceed-container`,children:[e("img",{className:N,src:F,alt:se.icon}),t("div",{className:y,children:[e(u.BodySM,{className:k,children:J}),e(u.BodyXS,{className:v,children:K}),(()=>{if(isNaN(W)||W<0)return;const s=[],t=W-Math.floor(W)>=.4;for(let t=0;t<Math.floor(W);t++)s.push(e(a,{"aria-hidden":!0,className:B},`star${t}`));if(t&&s.push(e(o,{"aria-hidden":!0,className:B},"halfstar")),s.length<5){const t=5-s.length;for(let r=0;r<t;r++)s.push(e(i,{"aria-hidden":!0,className:B},`emptystar${r}`))}return e("div",{className:z,role:"group","aria-label":`A rating of ${W} out of 5 stars`,"data-testid":`${O}-star-rating`,children:s.slice(0,5)})})()]}),e("div",{className:$,children:e(d,{className:x,type:"button",onClick:te,"aria-label":se.cta,sizeType:"small",children:Q})})]}),e("div",{className:C,onClick:H,id:`${O}-dismiss`,"data-testid":`${O}-dismiss-container`,children:e(p,{className:w,"aria-label":se.dismiss,children:e(r,{className:A})})})]})})}));export{P as SmartAppBanner};
 //# sourceMappingURL=smart-app-banner.js.map

package/smart-app-banner/smart-app-banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"smart-app-banner.js","sources":["../../src/smart-app-banner/smart-app-banner.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n    BannerIcon,\n    ButtonContainer,\n    Cross,\n    Description,\n    DismissButton,\n    DismissContainer,\n    ProceedContainer,\n    RatingContainer,\n    SmartAppBannerContainer,\n    Star,\n    StarEmpty,\n    StarHalf,\n    StyledButton,\n    TextContainer,\n    Title,\n} from \"./smart-app-banner.styles\";\nimport type { SmartAppBannerProps } from \"./types\";\n\nconst APP_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png\";\n\nconst ID = \"smart-app-banner\";\nconst MAX_STARS = 5;\n\nfunction SmartAppBannerComponent(\n    props: SmartAppBannerProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        className,\n        show,\n        href,\n        content,\n        offset = 0,\n        icon = APP_ICON,\n        animated = false,\n        onDismiss,\n        onClick,\n    } = props;\n\n    const {\n        title,\n        message,\n        buttonLabel,\n        iconAriaLabel,\n        buttonAriaLabel,\n        numberOfStars,\n    } = content;\n\n    const ariaLabels = {\n        dismiss: \"Close banner\",\n        icon: iconAriaLabel ?? \"\",\n        cta: buttonAriaLabel ?? buttonLabel,\n    };\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (\n        e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>\n    ) => {\n        e.stopPropagation();\n        window.open(href, \"_blank\", \"noreferrer\");\n        onClick?.();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const generateStarRating = () => {\n        if (isNaN(numberOfStars) || numberOfStars < 0) {\n            return;\n        }\n\n        const stars = [];\n        const hasHalfStar = numberOfStars - Math.floor(numberOfStars) >= 0.4;\n\n        for (let i = 0; i < Math.floor(numberOfStars); i++) {\n            stars.push(<Star key={`star${i}`} aria-hidden />);\n        }\n        if (hasHalfStar) {\n            stars.push(<StarHalf key={`halfstar`} aria-hidden />);\n        }\n        if (stars.length < MAX_STARS) {\n            const remaining = 5 - stars.length;\n            for (let i = 0; i < remaining; i++) {\n                stars.push(<StarEmpty key={`emptystar${i}`} aria-hidden />);\n            }\n        }\n\n        /* maximum of 5 stars */\n        return (\n            <RatingContainer\n                role=\"group\"\n                aria-label={`A rating of ${numberOfStars} out of ${MAX_STARS} stars`}\n            >\n                {stars.slice(0, MAX_STARS)}\n            </RatingContainer>\n        );\n    };\n\n    return (\n        <>\n            {show && (\n                <SmartAppBannerContainer\n                    ref={ref}\n                    $isAnimated={animated}\n                    $offset={offset}\n                    className={className}\n                >\n                    <ProceedContainer\n                        onClick={handleClick}\n                        id={`${ID}-proceed`}\n                        data-testid={`${ID}-proceed-container`}\n                    >\n                        <BannerIcon src={icon} alt={ariaLabels.icon} />\n                        <TextContainer>\n                            <Title>{title}</Title>\n                            <Description>{message}</Description>\n                            {generateStarRating()}\n                        </TextContainer>\n                        <ButtonContainer>\n                            <StyledButton\n                                type=\"button\"\n                                onClick={handleClick}\n                                aria-label={ariaLabels.cta}\n                            >\n                                {buttonLabel}\n                            </StyledButton>\n                        </ButtonContainer>\n                    </ProceedContainer>\n                    <DismissContainer\n                        onClick={onDismiss}\n                        id={`${ID}-dismiss`}\n                        data-testid={`${ID}-dismiss-container`}\n                    >\n                        <DismissButton aria-label={ariaLabels.dismiss}>\n                            <Cross />\n                        </DismissButton>\n                    </DismissContainer>\n                </SmartAppBannerContainer>\n            )}\n        </>\n    );\n}\n\nexport const SmartAppBanner = React.forwardRef(SmartAppBannerComponent);\n"],"names":["APP_ICON","ID","SmartAppBanner","React","forwardRef","props","ref","className","show","href","content","offset","icon","animated","onDismiss","onClick","title","message","buttonLabel","iconAriaLabel","buttonAriaLabel","numberOfStars","ariaLabels","dismiss","cta","handleClick","e","stopPropagation","window","open","_jsx","_Fragment","children","_jsxs","SmartAppBannerContainer","$isAnimated","$offset","ProceedContainer","id","BannerIcon","src","alt","TextContainer","Title","Description","isNaN","stars","hasHalfStar","Math","floor","i","push","Star","StarHalf","length","remaining","StarEmpty","RatingContainer","role","slice","generateStarRating","ButtonContainer","StyledButton","type","DismissContainer","DismissButton","Cross"],"mappings":"wYAqBA,MAAMA,EACF,2EAEEC,EAAK,mBAgIJ,MAAMC,EAAiBC,EAAMC,YA7HpC,SACIC,EACAC,GAKA,MAAMC,UACFA,EAASC,KACTA,EAAIC,KACJA,EAAIC,QACJA,EAAOC,OACPA,EAAS,EAACC,KACVA,EAAOZ,EAAQa,SACfA,GAAW,EAAKC,UAChBA,EAASC,QACTA,GACAV,GAEEW,MACFA,EAAKC,QACLA,EAAOC,YACPA,EAAWC,cACXA,EAAaC,gBACbA,EAAeC,cACfA,GACAX,EAEEY,EAAa,CACfC,QAAS,eACTX,KAAMO,QAAAA,EAAiB,GACvBK,IAAKJ,QAAAA,EAAmBF,GAKtBO,EACFC,IAEAA,EAAEC,kBACFC,OAAOC,KAAKpB,EAAM,SAAU,cAC5BM,SAAAA,GAAW,EAuCf,OACIe,EAAAC,EAAA,CAAAC,SACKxB,GACGyB,EAACC,EAAuB,CACpB5B,IAAKA,EAAG6B,YACKtB,EAAQuB,QACZzB,EACTJ,UAAWA,EAASyB,SAAA,CAEpBC,EAACI,EAAgB,CACbtB,QAASU,EACTa,GAAI,GAAGrC,YAAY,cACN,GAAGA,sBAAsB+B,SAAA,CAEtCF,EAACS,EAAU,CAACC,IAAK5B,EAAM6B,IAAKnB,EAAWV,OACvCqB,EAACS,EAAa,CAAAV,SAAA,CACVF,EAACa,EAAK,CAAAX,SAAEhB,IACRc,EAACc,EAAW,CAAAZ,SAAEf,IAjDX,MACvB,GAAI4B,MAAMxB,IAAkBA,EAAgB,EACxC,OAGJ,MAAMyB,EAAQ,GACRC,EAAc1B,EAAgB2B,KAAKC,MAAM5B,IAAkB,GAEjE,IAAK,IAAI6B,EAAI,EAAGA,EAAIF,KAAKC,MAAM5B,GAAgB6B,IAC3CJ,EAAMK,KAAKrB,EAACsB,EAAI,CAAA,eAAA,GAAM,OAAOF,MAKjC,GAHIH,GACAD,EAAMK,KAAKrB,EAACuB,EAAQ,CAAA,eAAA,GAAM,aAE1BP,EAAMQ,OAhEA,EAgEoB,CAC1B,MAAMC,EAAY,EAAIT,EAAMQ,OAC5B,IAAK,IAAIJ,EAAI,EAAGA,EAAIK,EAAWL,IAC3BJ,EAAMK,KAAKrB,EAAC0B,EAAS,CAAA,eAAA,GAAM,YAAYN,KAE/C,CAGA,OACIpB,EAAC2B,EAAe,CACZC,KAAK,QAAO,aACA,eAAerC,mBAAyCW,SAEnEc,EAAMa,MAAM,EA7EX,IA8EY,EAsBDC,MAEL9B,EAAC+B,EAAe,CAAA7B,SACZF,EAACgC,EAAY,CACTC,KAAK,SACLhD,QAASU,EAAW,aACRH,EAAWE,IAAGQ,SAEzBd,SAIbY,EAACkC,EAAgB,CACbjD,QAASD,EACTwB,GAAI,GAAGrC,YAAY,cACN,GAAGA,sBAAsB+B,SAEtCF,EAACmC,EAAa,CAAA,aAAa3C,EAAWC,QAAOS,SACzCF,EAACoC,EAAK,CAAA,WAOlC"}
+{"version":3,"file":"smart-app-banner.js","sources":["../../src/smart-app-banner/smart-app-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { StarIcon } from \"@lifesg/react-icons/star\";\nimport { StarFillIcon } from \"@lifesg/react-icons/star-fill\";\nimport { StarHalfIcon } from \"@lifesg/react-icons/star-half\";\nimport clsx from \"clsx\";\nimport React, { useContext, useRef } from \"react\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./smart-app-banner.styles\";\nimport type { SmartAppBannerProps } from \"./types\";\n\nconst APP_ICON =\n    \"https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png\";\n\nconst ID = \"smart-app-banner\";\nconst MAX_STARS = 5;\n\nfunction SmartAppBannerComponent(\n    props: SmartAppBannerProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        className,\n        show,\n        href,\n        content,\n        offset = 0,\n        icon = APP_ICON,\n        animated = false,\n        onDismiss,\n        onClick,\n    } = props;\n\n    const {\n        title,\n        message,\n        buttonLabel,\n        iconAriaLabel,\n        buttonAriaLabel,\n        numberOfStars,\n    } = content;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const theme = useContext(ThemeContext);\n    const isDark = theme?.mode === \"dark\";\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.top]: `${offset}px`,\n    });\n\n    const ariaLabels = {\n        dismiss: \"Close banner\",\n        icon: iconAriaLabel ?? \"\",\n        cta: buttonAriaLabel ?? buttonLabel,\n    };\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (\n        e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>\n    ) => {\n        e.stopPropagation();\n        window.open(href, \"_blank\", \"noreferrer\");\n        onClick?.();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const generateStarRating = () => {\n        if (isNaN(numberOfStars) || numberOfStars < 0) {\n            return;\n        }\n\n        const stars = [];\n        const hasHalfStar = numberOfStars - Math.floor(numberOfStars) >= 0.4;\n\n        for (let i = 0; i < Math.floor(numberOfStars); i++) {\n            stars.push(\n                <StarFillIcon\n                    key={`star${i}`}\n                    aria-hidden\n                    className={styles.starIcon}\n                />\n            );\n        }\n        if (hasHalfStar) {\n            stars.push(\n                <StarHalfIcon\n                    key={`halfstar`}\n                    aria-hidden\n                    className={styles.starIcon}\n                />\n            );\n        }\n        if (stars.length < MAX_STARS) {\n            const remaining = 5 - stars.length;\n            for (let i = 0; i < remaining; i++) {\n                stars.push(\n                    <StarIcon\n                        key={`emptystar${i}`}\n                        aria-hidden\n                        className={styles.starIcon}\n                    />\n                );\n            }\n        }\n\n        /* maximum of 5 stars */\n        return (\n            <div\n                className={styles.ratingContainer}\n                role=\"group\"\n                aria-label={`A rating of ${numberOfStars} out of ${MAX_STARS} stars`}\n                data-testid={`${ID}-star-rating`}\n            >\n                {stars.slice(0, MAX_STARS)}\n            </div>\n        );\n    };\n\n    return (\n        <>\n            {show && (\n                <div\n                    ref={mergeRefs(containerRef, ref)}\n                    data-testid={ID}\n                    className={clsx(\n                        styles.smartAppBannerContainer,\n                        isDark\n                            ? styles.smartAppBannerContainerDark\n                            : styles.smartAppBannerContainerLight,\n                        animated && styles.smartAppBannerContainerAnimated,\n                        className\n                    )}\n                >\n                    <div\n                        className={styles.proceedContainer}\n                        onClick={handleClick}\n                        id={`${ID}-proceed`}\n                        data-testid={`${ID}-proceed-container`}\n                    >\n                        <img\n                            className={styles.bannerIcon}\n                            src={icon}\n                            alt={ariaLabels.icon}\n                        />\n                        <div className={styles.textContainer}>\n                            <Typography.BodySM className={styles.title}>\n                                {title}\n                            </Typography.BodySM>\n                            <Typography.BodyXS className={styles.description}>\n                                {message}\n                            </Typography.BodyXS>\n                            {generateStarRating()}\n                        </div>\n                        <div className={styles.buttonContainer}>\n                            <Button\n                                className={styles.button}\n                                type=\"button\"\n                                onClick={handleClick}\n                                aria-label={ariaLabels.cta}\n                                sizeType=\"small\"\n                            >\n                                {buttonLabel}\n                            </Button>\n                        </div>\n                    </div>\n                    <div\n                        className={styles.dismissContainer}\n                        onClick={onDismiss}\n                        id={`${ID}-dismiss`}\n                        data-testid={`${ID}-dismiss-container`}\n                    >\n                        <ClickableIcon\n                            className={styles.dismissButton}\n                            aria-label={ariaLabels.dismiss}\n                        >\n                            <CrossIcon className={styles.cross} />\n                        </ClickableIcon>\n                    </div>\n                </div>\n            )}\n        </>\n    );\n}\n\nexport const SmartAppBanner = React.forwardRef(SmartAppBannerComponent);\n"],"names":["APP_ICON","ID","SmartAppBanner","React","forwardRef","props","ref","className","show","href","content","offset","icon","animated","onDismiss","onClick","title","message","buttonLabel","iconAriaLabel","buttonAriaLabel","numberOfStars","containerRef","useRef","theme","useContext","ThemeContext","isDark","mode","useApplyStyle","styles.tokens","container","top","ariaLabels","dismiss","cta","handleClick","e","stopPropagation","window","open","_jsx","_Fragment","children","_jsxs","mergeRefs","clsx","styles.smartAppBannerContainer","styles.smartAppBannerContainerDark","styles.smartAppBannerContainerLight","styles.smartAppBannerContainerAnimated","styles.proceedContainer","id","styles.bannerIcon","src","alt","styles.textContainer","Typography","BodySM","styles.title","BodyXS","styles.description","isNaN","stars","hasHalfStar","Math","floor","i","push","StarFillIcon","styles.starIcon","StarHalfIcon","length","remaining","StarIcon","styles.ratingContainer","role","slice","generateStarRating","styles.buttonContainer","Button","styles.button","type","sizeType","styles.dismissContainer","ClickableIcon","styles.dismissButton","CrossIcon","styles.cross"],"mappings":"w+CAgBA,MAAMA,EACF,2EAEEC,EAAK,mBAiLJ,MAAMC,EAAiBC,EAAMC,YA9KpC,SACIC,EACAC,GAKA,MAAMC,UACFA,EAASC,KACTA,EAAIC,KACJA,EAAIC,QACJA,EAAOC,OACPA,EAAS,EAACC,KACVA,EAAOZ,EAAQa,SACfA,GAAW,EAAKC,UAChBA,EAASC,QACTA,GACAV,GAEEW,MACFA,EAAKC,QACLA,EAAOC,YACPA,EAAWC,cACXA,EAAaC,gBACbA,EAAeC,cACfA,GACAX,EAEEY,EAAeC,EAAuB,MACtCC,EAAQC,EAAWC,GACnBC,GAAyB,UAAhBH,aAAK,EAALA,EAAOI,MAEtBC,EAAcP,EAAc,CACxB,CAACQ,EAAcC,UAAUC,KAAM,GAAGrB,QAGtC,MAAMsB,GAAa,CACfC,QAAS,eACTtB,KAAMO,QAAAA,EAAiB,GACvBgB,IAAKf,QAAAA,EAAmBF,GAKtBkB,GACFC,IAEAA,EAAEC,kBACFC,OAAOC,KAAK/B,EAAM,SAAU,cAC5BM,SAAAA,GAAW,EA2Df,OACI0B,EAAAC,EAAA,CAAAC,SACKnC,GACGoC,SACItC,IAAKuC,EAAUvB,EAAchB,GAAI,cACpBL,EACbM,UAAWuC,EACPC,EACApB,GACMqB,EACAC,EACNpC,GAAYqC,EACZ3C,GACHoC,SAAA,CAEDC,SACIrC,UAAW4C,EACXpC,QAASqB,GACTgB,GAAI,GAAGnD,YAAY,cACN,GAAGA,gCAEhBwC,EAAA,MAAA,CACIlC,UAAW8C,EACXC,IAAK1C,EACL2C,IAAKtB,GAAWrB,OAEpBgC,EAAA,MAAA,CAAKrC,UAAWiD,EAAoBb,SAAA,CAChCF,EAACgB,EAAWC,OAAM,CAACnD,UAAWoD,EAAYhB,SACrC3B,IAELyB,EAACgB,EAAWG,OAAM,CAACrD,UAAWsD,EAAkBlB,SAC3C1B,IAnFF,MACvB,GAAI6C,MAAMzC,IAAkBA,EAAgB,EACxC,OAGJ,MAAM0C,EAAQ,GACRC,EAAc3C,EAAgB4C,KAAKC,MAAM7C,IAAkB,GAEjE,IAAK,IAAI8C,EAAI,EAAGA,EAAIF,KAAKC,MAAM7C,GAAgB8C,IAC3CJ,EAAMK,KACF3B,EAAC4B,oBAGG9D,UAAW+D,GAFN,OAAOH,MAexB,GATIH,GACAD,EAAMK,KACF3B,EAAC8B,EAAY,CAAA,eAAA,EAGThE,UAAW+D,GAFN,aAMbP,EAAMS,OApFA,EAoFoB,CAC1B,MAAMC,EAAY,EAAIV,EAAMS,OAC5B,IAAK,IAAIL,EAAI,EAAGA,EAAIM,EAAWN,IAC3BJ,EAAMK,KACF3B,EAACiC,oBAGGnE,UAAW+D,GAFN,YAAYH,KAMjC,CAGA,OACI1B,EAAA,MAAA,CACIlC,UAAWoE,EACXC,KAAK,QAAO,aACA,eAAevD,mBAAyC,cACvD,GAAGpB,gBAAgB0C,SAE/BoB,EAAMc,MAAM,EAzGX,IA0GA,EAqCWC,MAELrC,EAAA,MAAA,CAAKlC,UAAWwE,EAAsBpC,SAClCF,EAACuC,EAAM,CACHzE,UAAW0E,EACXC,KAAK,SACLnE,QAASqB,GAAW,aACRH,GAAWE,IACvBgD,SAAS,QAAOxC,SAEfzB,SAIbuB,EAAA,MAAA,CACIlC,UAAW6E,EACXrE,QAASD,EACTsC,GAAI,GAAGnD,0BACM,GAAGA,sBAAsB0C,SAEtCF,EAAC4C,EAAa,CACV9E,UAAW+E,EAAoB,aACnBrD,GAAWC,iBAEvBO,EAAC8C,GAAUhF,UAAWiF,YAOlD"}

package/smart-app-banner/smart-app-banner.styles.d.ts

@@ -1,85 +1,21 @@
-export declare const SmartAppBannerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$offset" | "$isAnimated"> & {
-    $offset: number;
-    $isAnimated: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$offset" | "$isAnimated"> & {
-    $offset: number;
-    $isAnimated: boolean;
-}, never>>> & string;
-export declare const DismissContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const DismissButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const Cross: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const ProceedContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const TextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const BannerIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>>> & string;
-export declare const ButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const RatingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Star: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const StarHalf: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const StarEmpty: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
+export declare const tokens: {
+    container: {
+        top: string;
+    };
+};
+export declare const smartAppBannerContainer: import("@linaria/core").LinariaClassName;
+export declare const smartAppBannerContainerLight: import("@linaria/core").LinariaClassName;
+export declare const smartAppBannerContainerDark: import("@linaria/core").LinariaClassName;
+export declare const smartAppBannerContainerAnimated: import("@linaria/core").LinariaClassName;
+export declare const dismissContainer: import("@linaria/core").LinariaClassName;
+export declare const dismissButton: import("@linaria/core").LinariaClassName;
+export declare const cross: import("@linaria/core").LinariaClassName;
+export declare const proceedContainer: import("@linaria/core").LinariaClassName;
+export declare const textContainer: import("@linaria/core").LinariaClassName;
+export declare const bannerIcon: import("@linaria/core").LinariaClassName;
+export declare const buttonContainer: import("@linaria/core").LinariaClassName;
+export declare const button: import("@linaria/core").LinariaClassName;
+export declare const title: import("@linaria/core").LinariaClassName;
+export declare const description: import("@linaria/core").LinariaClassName;
+export declare const ratingContainer: import("@linaria/core").LinariaClassName;
+export declare const starIcon: import("@linaria/core").LinariaClassName;

package/smart-app-banner/smart-app-banner.styles.js

@@ -1,94 +1,2 @@
-import{CrossIcon as e}from"@lifesg/react-icons/cross";import{StarIcon as r}from"@lifesg/react-icons/star";import{StarFillIcon as i}from"@lifesg/react-icons/star-fill";import{StarHalfIcon as o}from"@lifesg/react-icons/star-half";import t,{keyframes as m,css as a}from"styled-components";import{Button as d}from"../button/button.js";import{ClickableIcon as n}from"../shared/clickable-icon/clickable-icon.js";import{Typography as l}from"../typography/index.js";import{V3_Colour as s,V3_Radius as f,V3_Border as c,V3_Shadow as p,V3_MediaQuery as g,V3_Font as h}from"../v3_theme/index.js";const x=m`
-	from {
-		opacity: 0;
-		transform: translateY(-20%);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-`,$=t.div`
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: stretch;
-    position: fixed;
-    margin: 0.5rem 1.25rem;
-    ${e=>`top: ${e.$offset}px;`}
-    left: 0;
-    width: calc(100% - 2.5rem);
-    min-height: 5.5rem;
-    z-index: 9001;
-    background: ${s.bg};
-    ${e=>{var r;return"dark"===(null===(r=e.theme)||void 0===r?void 0:r.colourMode)?a`
-                  border: ${c["width-010"]} ${c.solid}
-                      ${s.border};
-              `:a`
-                  box-shadow: ${p["md-subtle"]};
-              `}}
-    border-radius: ${f.md};
-    ${e=>{if(e.$isAnimated)return a`
-                animation: ${x} 0.3s;
-            `}}
-`,w=t.div`
-    display: flex;
-    align-items: center;
-    padding: 0.5rem 0.25rem 0.5rem 1rem;
-`,y=t(n)`
-    padding: 0;
-`,b=t(e)`
-    color: ${s.icon};
-    height: 1.25rem;
-    width: 1.25rem;
-`,v=t.div`
-    flex: 1;
-    display: flex;
-    align-items: center;
-    padding: 0.5rem 1rem 0.5rem 0.25rem;
-    cursor: pointer;
-`,u=t.div`
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: left;
-    margin: 0.5rem;
-    ${g.MaxWidth.xs} {
-        margin: 0 0.5rem;
-    }
-`,j=t.img`
-    width: 2.65rem;
-    height: auto;
-    align-self: center;
-`,k=t.div`
-    max-width: 30%;
-`,M=t(d.Small)`
-    padding: 0.5rem;
-    height: auto;
-    & > span {
-        overflow-wrap: anywhere;
-        ${h["body-xs-semibold"]}
-    }
-`,S=t(l.BodySM)`
-    font-weight: ${h.Spec["weight-bold"]};
-    overflow-wrap: anywhere;
-    ${g.MaxWidth.xs} {
-        ${h["body-xs-bold"]}
-    }
-`,B=t(l.BodyXS)`
-    overflow-wrap: anywhere;
-`,W=t.div`
-    margin-top: 0.25rem;
-    display: flex;
-    align-items: center;
-`,Y=a`
-    height: 2rem;
-    width: 2rem;
-    padding-right: 0.25rem;
-    color: #ffc107;
-`,z=t(i)`
-    ${Y}
-`,A=t(o)`
-    ${Y}
-`,X=t(r)`
-    ${Y}
-`;export{j as BannerIcon,k as ButtonContainer,b as Cross,B as Description,y as DismissButton,w as DismissContainer,v as ProceedContainer,W as RatingContainer,$ as SmartAppBannerContainer,z as Star,X as StarEmpty,A as StarHalf,M as StyledButton,u as TextContainer,S as Title};
+import"./smart-app-banner.styles_15u6yv4.css";const r={container:{top:"--fds-internal-smartAppBanner-container-top"}},s="s4qb553",t="s1yw94wd",n="s1gji45a",a="s9k7xr8",p="dmwiwc",e="d1cy2w47",c="cp9l7rn",m="pdjtkx9",o="t7s9qr2",d="bece00m",i="b1ti1r81",b="b1rqz1xr",g="tmo9z7m",w="dp7x5g3",x="r1gggq6r",q="sda01s1";export{d as bannerIcon,b as button,i as buttonContainer,c as cross,w as description,e as dismissButton,p as dismissContainer,m as proceedContainer,x as ratingContainer,s as smartAppBannerContainer,a as smartAppBannerContainerAnimated,n as smartAppBannerContainerDark,t as smartAppBannerContainerLight,q as starIcon,o as textContainer,g as title,r as tokens};
 //# sourceMappingURL=smart-app-banner.styles.js.map

package/smart-app-banner/smart-app-banner.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"smart-app-banner.styles.js","sources":["../../src/smart-app-banner/smart-app-banner.styles.ts"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { StarIcon } from \"@lifesg/react-icons/star\";\nimport { StarFillIcon } from \"@lifesg/react-icons/star-fill\";\nimport { StarHalfIcon } from \"@lifesg/react-icons/star-half\";\nimport styled, { css, keyframes } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n} from \"../v3_theme\";\n\nconst slideDown = keyframes`\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(-20%);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n`;\n\nexport const SmartAppBannerContainer = styled.div<{\n    $offset: number;\n    $isAnimated: boolean;\n}>`\n    display: flex;\n    flex-direction: row-reverse;\n    align-items: stretch;\n    position: fixed;\n    margin: 0.5rem 1.25rem;\n    ${(props) => {\n        return `top: ${props.$offset}px;`;\n    }}\n    left: 0;\n    width: calc(100% - 2.5rem);\n    min-height: 5.5rem;\n    z-index: 9001;\n    background: ${V3_Colour.bg};\n    ${(props) => {\n        return props.theme?.colourMode === \"dark\"\n            ? css`\n                  border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n                      ${V3_Colour[\"border\"]};\n              `\n            : css`\n                  box-shadow: ${V3_Shadow[\"md-subtle\"]};\n              `;\n    }}\n    border-radius: ${V3_Radius[\"md\"]};\n    ${(props) => {\n        if (props.$isAnimated)\n            return css`\n                animation: ${slideDown} 0.3s;\n            `;\n    }}\n`;\n\nexport const DismissContainer = styled.div`\n    display: flex;\n    align-items: center;\n    padding: 0.5rem 0.25rem 0.5rem 1rem;\n`;\n\nexport const DismissButton = styled(ClickableIcon)`\n    padding: 0;\n`;\n\nexport const Cross = styled(CrossIcon)`\n    color: ${V3_Colour.icon};\n    height: 1.25rem;\n    width: 1.25rem;\n`;\n\nexport const ProceedContainer = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0.5rem 1rem 0.5rem 0.25rem;\n    cursor: pointer;\n`;\n\nexport const TextContainer = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: left;\n    margin: 0.5rem;\n    ${V3_MediaQuery.MaxWidth.xs} {\n        margin: 0 0.5rem;\n    }\n`;\n\nexport const BannerIcon = styled.img`\n    width: 2.65rem;\n    height: auto;\n    align-self: center;\n`;\n\nexport const ButtonContainer = styled.div`\n    max-width: 30%;\n`;\n\nexport const StyledButton = styled(Button.Small)`\n    padding: 0.5rem;\n    height: auto;\n    & > span {\n        overflow-wrap: anywhere;\n        ${V3_Font[\"body-xs-semibold\"]}\n    }\n`;\n\nexport const Title = styled(Typography.BodySM)`\n    font-weight: ${V3_Font.Spec[\"weight-bold\"]};\n    overflow-wrap: anywhere;\n    ${V3_MediaQuery.MaxWidth.xs} {\n        ${V3_Font[\"body-xs-bold\"]}\n    }\n`;\n\nexport const Description = styled(Typography.BodyXS)`\n    overflow-wrap: anywhere;\n`;\n\nexport const RatingContainer = styled.div`\n    margin-top: 0.25rem;\n    display: flex;\n    align-items: center;\n`;\n\nconst starIconStyle = css`\n    height: 2rem;\n    width: 2rem;\n    padding-right: 0.25rem;\n    color: #ffc107;\n`;\n\nexport const Star = styled(StarFillIcon)`\n    ${starIconStyle}\n`;\n\nexport const StarHalf = styled(StarHalfIcon)`\n    ${starIconStyle}\n`;\n\nexport const StarEmpty = styled(StarIcon)`\n    ${starIconStyle}\n`;\n"],"names":["slideDown","keyframes","SmartAppBannerContainer","styled","div","props","$offset","V3_Colour","bg","theme","_a","colourMode","css","V3_Border","V3_Shadow","V3_Radius","$isAnimated","DismissContainer","DismissButton","ClickableIcon","Cross","CrossIcon","icon","ProceedContainer","TextContainer","V3_MediaQuery","MaxWidth","xs","BannerIcon","img","ButtonContainer","StyledButton","Button","Small","V3_Font","Title","Typography","BodySM","Spec","Description","BodyXS","RatingContainer","starIconStyle","Star","StarFillIcon","StarHalf","StarHalfIcon","StarEmpty","StarIcon"],"mappings":"wkBAkBA,MAAMA,EAAYC,CAAS;;;;;;;;;EAWdC,EAA0BC,EAAOC,GAG5C;;;;;;MAMKC,GACQ,QAAQA,EAAMC;;;;;kBAMXC,EAAUC;MACrBH,UACC,MAAmC,UAAjB,UAAXA,EAAMI,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACdC,CAAG;4BACWC,EAAU,gBAAgBA,EAAiB;wBAC/CN,EAAkB;gBAE5BK,CAAG;gCACeE,EAAU;eAC3B;qBAEMC,EAAc;MAC5BV,IACC,GAAIA,EAAMW,YACN,OAAOJ,CAAG;6BACOZ;aAChB;EAIAiB,EAAmBd,EAAOC,GAAG;;;;EAM7Bc,EAAgBf,EAAOgB,EAAc;;EAIrCC,EAAQjB,EAAOkB,EAAU;aACzBd,EAAUe;;;EAKVC,EAAmBpB,EAAOC,GAAG;;;;;;EAQ7BoB,EAAgBrB,EAAOC,GAAG;;;;;;MAMjCqB,EAAcC,SAASC;;;EAKhBC,EAAazB,EAAO0B,GAAG;;;;EAMvBC,EAAkB3B,EAAOC,GAAG;;EAI5B2B,EAAe5B,EAAO6B,EAAOC,MAAM;;;;;UAKtCC,EAAQ;;EAILC,EAAQhC,EAAOiC,EAAWC,OAAO;mBAC3BH,EAAQI,KAAK;;MAE1Bb,EAAcC,SAASC;UACnBO,EAAQ;;EAILK,EAAcpC,EAAOiC,EAAWI,OAAO;;EAIvCC,EAAkBtC,EAAOC,GAAG;;;;EAMnCsC,EAAgB9B,CAAG;;;;;EAOZ+B,EAAOxC,EAAOyC,EAAa;MAClCF;EAGOG,EAAW1C,EAAO2C,EAAa;MACtCJ;EAGOK,EAAY5C,EAAO6C,EAAS;MACnCN;"}
+{"version":3,"file":"smart-app-banner.styles.js","sources":["../../src/smart-app-banner/smart-app-banner.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Radius, Shadow } from \"../theme\";\n\nexport const tokens = {\n    container: {\n        top: \"--fds-internal-smartAppBanner-container-top\",\n    },\n};\n\nexport const smartAppBannerContainer = css`\n    display: flex;\n    flex-direction: row-reverse;\n    align-items: stretch;\n    position: fixed;\n    margin: 0.5rem 1.25rem;\n    ${tokens.container.top}: initial;\n    top: var(${tokens.container.top});\n    left: 0;\n    width: calc(100% - 2.5rem);\n    min-height: 5.5rem;\n    z-index: 9001;\n    background: ${Colour.bg};\n    border-radius: ${Radius.md};\n`;\n\nexport const smartAppBannerContainerLight = css`\n    box-shadow: ${Shadow[\"md-subtle\"]};\n`;\n\nexport const smartAppBannerContainerDark = css`\n    border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const smartAppBannerContainerAnimated = css`\n    @keyframes smart-app-banner-slide-down {\n        from {\n            opacity: 0;\n            transform: translateY(-20%);\n        }\n        to {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n    animation: smart-app-banner-slide-down 0.3s;\n`;\n\nexport const dismissContainer = css`\n    display: flex;\n    align-items: center;\n    padding: 0.5rem 0.25rem 0.5rem 1rem;\n`;\n\nexport const dismissButton = css`\n    padding: 0;\n`;\n\nexport const cross = css`\n    color: ${Colour.icon};\n    height: 1.25rem;\n    width: 1.25rem;\n`;\n\nexport const proceedContainer = css`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0.5rem 1rem 0.5rem 0.25rem;\n    cursor: pointer;\n`;\n\nexport const textContainer = css`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: left;\n    margin: 0.5rem;\n    ${MediaQuery.MaxWidth.xs} {\n        margin: 0 0.5rem;\n    }\n`;\n\nexport const bannerIcon = css`\n    width: 2.65rem;\n    height: auto;\n    align-self: center;\n`;\n\nexport const buttonContainer = css`\n    max-width: 30%;\n`;\n\nexport const button = css`\n    padding: 0.5rem;\n    height: auto;\n    & > span {\n        overflow-wrap: anywhere;\n        ${Font[\"body-xs-semibold\"]}\n    }\n`;\n\nexport const title = css`\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n    overflow-wrap: anywhere;\n    ${MediaQuery.MaxWidth.xs} {\n        ${Font[\"body-xs-bold\"]}\n    }\n`;\n\nexport const description = css`\n    overflow-wrap: anywhere;\n`;\n\nexport const ratingContainer = css`\n    margin-top: 0.25rem;\n    display: flex;\n    align-items: center;\n`;\n\nexport const starIcon = css`\n    height: 2rem;\n    width: 2rem;\n    padding-right: 0.25rem;\n    color: #ffc107;\n`;\n"],"names":["tokens","container","top","smartAppBannerContainer","smartAppBannerContainerLight","smartAppBannerContainerDark","smartAppBannerContainerAnimated","dismissContainer","dismissButton","cross","proceedContainer","textContainer","bannerIcon","buttonContainer","button","title","description","ratingContainer","starIcon"],"mappings":"8EAIO,MAAMA,EAAS,CAClBC,UAAW,CACPC,IAAK,gDAIAC,EAAuB,UAgBvBC,EAA4B,WAI5BC,EAA2B,WAI3BC,EAA+B,UAc/BC,EAAgB,SAMhBC,EAAa,WAIbC,EAAK,UAMLC,EAAgB,UAQhBC,EAAa,UAWbC,EAAU,UAMVC,EAAe,WAIfC,EAAM,WASNC,EAAK,UAQLC,EAAW,UAIXC,EAAe,WAMfC,EAAQ"}

package/smart-app-banner/smart-app-banner.styles_15u6yv4.css

@@ -0,0 +1,16 @@
+.s4qb553{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;position:fixed;margin:0.5rem 1.25rem;--fds-internal-smartAppBanner-container-top:initial;top:var(--fds-internal-smartAppBanner-container-top);left:0;width:calc(100% - 2.5rem);min-height:5.5rem;z-index:9001;background:var(--fds-colour-bg);border-radius:var(--fds-radius-md);}
+.s1yw94wd{box-shadow:var(--fds-shadow-md-subtle);}
+.s1gji45a{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.s9k7xr8{-webkit-animation:smart-app-banner-slide-down-s9k7xr8 0.3s;animation:smart-app-banner-slide-down-s9k7xr8 0.3s;}@-webkit-keyframes smart-app-banner-slide-down-s9k7xr8{from{opacity:0;-webkit-transform:translateY(-20%);-moz-transform:translateY(-20%);-ms-transform:translateY(-20%);transform:translateY(-20%);}to{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}@keyframes smart-app-banner-slide-down-s9k7xr8{from{opacity:0;-webkit-transform:translateY(-20%);-moz-transform:translateY(-20%);-ms-transform:translateY(-20%);transform:translateY(-20%);}to{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}}
+.dmwiwc{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;padding:0.5rem 0.25rem 0.5rem 1rem;}
+.d1cy2w47{padding:0;}
+.cp9l7rn{color:var(--fds-colour-icon);height:1.25rem;width:1.25rem;}
+.pdjtkx9{-webkit-flex:1;-ms-flex:1;flex: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;padding:0.5rem 1rem 0.5rem 0.25rem;cursor:pointer;}
+.t7s9qr2{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:left;-webkit-box-align:left;-ms-flex-align:left;align-items:left;margin:0.5rem;}:where(body.fds-breakpoint-xs-max) .t7s9qr2{margin:0 0.5rem;}
+.bece00m{width:2.65rem;height:auto;-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}
+.b1ti1r81{max-width:30%;}
+.b1rqz1xr{padding:0.5rem;height:auto;}.b1rqz1xr>span{overflow-wrap:anywhere;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-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
+.tmo9z7m{font-weight:var(--fds-font-weight-bold);overflow-wrap:anywhere;}:where(body.fds-breakpoint-xs-max) .tmo9z7m{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);}
+.dp7x5g3{overflow-wrap:anywhere;}
+.r1gggq6r{margin-top:0.25rem;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;}
+.sda01s1{height:2rem;width:2rem;padding-right:0.25rem;color:#ffc107;}

package/tab/tab-link-chain.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"clsx";import{useContext as n,useRef as o,useEffect as i}from"react";import{FadeWrapper as l}from"../shared/fade-wrapper/fade-wrapper.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as s}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useSafeMaxWidthMediaQuery as a}from"../theme/utils/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useDesignToken as d}from"../theme/utils/use-design-token.js";import{TabContext as m}from"./tab-context.js";import{tokens as c,customFadeWrapper as u,labelContainer as p,label as h,deselectedLabel as f,deselectedLabelActive as v,selectedLabel as j,selectedLabelActive as k,flexRow as g,chainLink as y,chainLinkReversed as b,chainItem as x,chainItemActive as w,chain as C,chainFullWidthIndicator as N}from"./tab-link-chain.styles.js";const I=({controlledMode:I,"data-testid":A,onTabClick:$,fullWidthIndicatorLine:D,fadeColor:L})=>{const{setCurrentActiveIndex:R,currentActiveIndex:P,tabLinks:q}=n(m),B=d(s["lg-max"]),z=a(B),E=o(null),K=o(null),M=o([]),T=o([]);i((()=>{T.current.forEach(((e,t)=>{var r;if(!e)return;const n=null===(r=q[t])||void 0===r?void 0:r.width;n?e.style.setProperty(c.chainItem.width,n):e.style.removeProperty(c.chainItem.width)}))}),[q]);const W=e=>t=>{t.preventDefault(),t.stopPropagation(),I||R(e),$&&$(q[e].title,e)};return e(l,{onResize:({content:e})=>{e&&z&&E.current&&K.current&&(e.scrollLeft=E.current.getBoundingClientRect().left-K.current.getBoundingClientRect().left)},"data-testid":A,fadeColor:L,className:u,children:e("ul",{role:"tablist",ref:K,className:r(C,D&&N),children:q.map((({title:n,width:o,titleAddon:i},l)=>{var s;const a=P===l;return e("li",{role:"none",className:r(x,a&&w),ref:e=>{T.current[l]=e,a&&(E.current=e)},children:t("div",{role:"none",onClick:W(l),"data-testid":`${A}-link-${l}`,className:r(g,y,"left"===(null==i?void 0:i.position)&&b),children:[t("div",{className:p,role:"none",children:[e("div",{className:r(h,f,a&&v),onClick:W(l),"aria-hidden":"true",children:n}),e("button",{role:"tab",type:"button","aria-selected":a,tabIndex:a?0:-1,onKeyDown:e=>((e,t)=>{var r;let n=t;"ArrowRight"===e.key?(n=(t+1)%q.length,e.preventDefault()):"ArrowLeft"===e.key&&(n=(t-1+q.length)%q.length,e.preventDefault()),null===(r=M.current[n])||void 0===r||r.focus()})(e,l),ref:e=>M.current[l]=e,className:r(h,j,a&&k),children:n})]}),null==i?void 0:i.content]})},`${n}-${null!=o?o:""}-${null!==(s=null==i?void 0:i.position)&&void 0!==s?s:"none"}`)}))})})};export{I as TabLinkChain};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"clsx";import{useContext as n,useRef as o,useEffect as i}from"react";import{FadeWrapper as l}from"../shared/fade-wrapper/fade-wrapper.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useMaxWidthMediaQuery as a}from"../theme/utils/use-media-query.js";import{TabContext as s}from"./tab-context.js";import{tokens as c,customFadeWrapper as d,labelContainer as m,label as u,deselectedLabel as p,deselectedLabelActive as h,selectedLabel as f,selectedLabelActive as v,flexRow as j,chainLink as y,chainLinkReversed as g,chainItem as k,chainItemActive as b,chain as x,chainFullWidthIndicator as w}from"./tab-link-chain.styles.js";const C=({controlledMode:C,"data-testid":N,onTabClick:I,fullWidthIndicatorLine:A,fadeColor:$})=>{const{setCurrentActiveIndex:D,currentActiveIndex:L,tabLinks:R}=n(s),P=a("lg"),q=o(null),B=o(null),z=o([]),E=o([]);i((()=>{E.current.forEach(((e,t)=>{var r;if(!e)return;const n=null===(r=R[t])||void 0===r?void 0:r.width;n?e.style.setProperty(c.chainItem.width,n):e.style.removeProperty(c.chainItem.width)}))}),[R]);const K=e=>t=>{t.preventDefault(),t.stopPropagation(),C||D(e),I&&I(R[e].title,e)};return e(l,{onResize:({content:e})=>{e&&P&&q.current&&B.current&&(e.scrollLeft=q.current.getBoundingClientRect().left-B.current.getBoundingClientRect().left)},"data-testid":N,fadeColor:$,className:d,children:e("ul",{role:"tablist",ref:B,className:r(x,A&&w),children:R.map((({title:n,width:o,titleAddon:i},l)=>{var a;const s=L===l;return e("li",{role:"none",className:r(k,s&&b),ref:e=>{E.current[l]=e,s&&(q.current=e)},children:t("div",{role:"none",onClick:K(l),"data-testid":`${N}-link-${l}`,className:r(j,y,"left"===(null==i?void 0:i.position)&&g),children:[t("div",{className:m,role:"none",children:[e("div",{className:r(u,p,s&&h),onClick:K(l),"aria-hidden":"true",children:n}),e("button",{role:"tab",type:"button","aria-selected":s,tabIndex:s?0:-1,onKeyDown:e=>((e,t)=>{var r;let n=t;"ArrowRight"===e.key?(n=(t+1)%R.length,e.preventDefault()):"ArrowLeft"===e.key&&(n=(t-1+R.length)%R.length,e.preventDefault()),null===(r=z.current[n])||void 0===r||r.focus()})(e,l),ref:e=>z.current[l]=e,className:r(u,f,s&&v),children:n})]}),null==i?void 0:i.content]})},`${n}-${null!=o?o:""}-${null!==(a=null==i?void 0:i.position)&&void 0!==a?a:"none"}`)}))})})};export{C as TabLinkChain};
 //# sourceMappingURL=tab-link-chain.js.map

package/tab/tab-link-chain.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-link-chain.js","sources":["../../src/tab/tab-link-chain.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext, useEffect, useRef } from \"react\";\n\nimport { FadeWrapper, type ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { useDesignToken, useSafeMaxWidthMediaQuery } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { TabContext } from \"./tab-context\";\nimport * as styles from \"./tab-link-chain.styles\";\nimport type { TabProps } from \"./types\";\n\ninterface Props\n    extends Pick<\n        TabProps,\n        \"fullWidthIndicatorLine\" | \"onTabClick\" | \"data-testid\" | \"fadeColor\"\n    > {\n    controlledMode?: boolean;\n}\n\nexport const TabLinkChain = ({\n    controlledMode,\n    \"data-testid\": testId,\n    onTabClick,\n    fullWidthIndicatorLine,\n    fadeColor,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setCurrentActiveIndex, currentActiveIndex, tabLinks } =\n        useContext(TabContext);\n\n    const tabletBreakpoint = useDesignToken(Breakpoint[\"lg-max\"]);\n    const isTablet = useSafeMaxWidthMediaQuery(tabletBreakpoint);\n\n    const activeLinkRef = useRef<HTMLLIElement | null>(null);\n    const chainRef = useRef<HTMLUListElement | null>(null);\n    const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\n    const chainItemRefs = useRef<(HTMLLIElement | null)[]>([]);\n\n    useEffect(() => {\n        chainItemRefs.current.forEach((itemRef, index) => {\n            if (!itemRef) {\n                return;\n            }\n\n            const width = tabLinks[index]?.width;\n\n            if (width) {\n                itemRef.style.setProperty(styles.tokens.chainItem.width, width);\n            } else {\n                itemRef.style.removeProperty(styles.tokens.chainItem.width);\n            }\n        });\n    }, [tabLinks]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChainLinkClick =\n        (index: number) =>\n        (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n            if (!controlledMode) {\n                setCurrentActiveIndex(index);\n            }\n\n            if (onTabClick) {\n                onTabClick(tabLinks[index].title, index);\n            }\n        };\n\n    const handleResize = ({ content }: ResizeCallbackParams) => {\n        if (content && isTablet && activeLinkRef.current && chainRef.current) {\n            content.scrollLeft =\n                activeLinkRef.current.getBoundingClientRect().left -\n                chainRef.current.getBoundingClientRect().left;\n        }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n        let nextIndex = index;\n        if (e.key === \"ArrowRight\") {\n            nextIndex = (index + 1) % tabLinks.length;\n            e.preventDefault();\n        } else if (e.key === \"ArrowLeft\") {\n            nextIndex = (index - 1 + tabLinks.length) % tabLinks.length;\n            e.preventDefault();\n        }\n\n        chainLinkRefs.current[nextIndex]?.focus();\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <FadeWrapper\n            onResize={handleResize}\n            data-testid={testId}\n            fadeColor={fadeColor}\n            className={styles.customFadeWrapper}\n        >\n            <ul\n                role=\"tablist\"\n                ref={chainRef}\n                className={clsx(\n                    styles.chain,\n                    fullWidthIndicatorLine && styles.chainFullWidthIndicator\n                )}\n            >\n                {tabLinks.map(({ title, width, titleAddon }, index) => {\n                    const isActive = currentActiveIndex === index;\n                    const chainItemRef = (el: HTMLLIElement | null) => {\n                        chainItemRefs.current[index] = el;\n                        if (isActive) {\n                            activeLinkRef.current = el;\n                        }\n                    };\n\n                    return (\n                        <li\n                            key={`${title}-${width ?? \"\"}-${\n                                titleAddon?.position ?? \"none\"\n                            }`}\n                            role=\"none\"\n                            className={clsx(\n                                styles.chainItem,\n                                isActive && styles.chainItemActive\n                            )}\n                            ref={chainItemRef}\n                        >\n                            <div\n                                role=\"none\"\n                                onClick={handleChainLinkClick(index)}\n                                data-testid={`${testId}-link-${index}`}\n                                className={clsx(\n                                    styles.flexRow,\n                                    styles.chainLink,\n                                    titleAddon?.position === \"left\" &&\n                                        styles.chainLinkReversed\n                                )}\n                            >\n                                <div\n                                    className={styles.labelContainer}\n                                    role=\"none\"\n                                >\n                                    <div\n                                        className={clsx(\n                                            styles.label,\n                                            styles.deselectedLabel,\n                                            isActive &&\n                                                styles.deselectedLabelActive\n                                        )}\n                                        onClick={handleChainLinkClick(index)}\n                                        aria-hidden=\"true\"\n                                    >\n                                        {title}\n                                    </div>\n                                    <button\n                                        role=\"tab\"\n                                        type=\"button\"\n                                        aria-selected={isActive}\n                                        tabIndex={isActive ? 0 : -1}\n                                        onKeyDown={(e) =>\n                                            handleKeyDown(e, index)\n                                        }\n                                        ref={(el) =>\n                                            (chainLinkRefs.current[index] = el)\n                                        }\n                                        className={clsx(\n                                            styles.label,\n                                            styles.selectedLabel,\n                                            isActive &&\n                                                styles.selectedLabelActive\n                                        )}\n                                    >\n                                        {title}\n                                    </button>\n                                </div>\n                                {titleAddon?.content}\n                            </div>\n                        </li>\n                    );\n                })}\n            </ul>\n        </FadeWrapper>\n    );\n};\n"],"names":["TabLinkChain","controlledMode","testId","onTabClick","fullWidthIndicatorLine","fadeColor","setCurrentActiveIndex","currentActiveIndex","tabLinks","useContext","TabContext","tabletBreakpoint","useDesignToken","Breakpoint","isTablet","useSafeMaxWidthMediaQuery","activeLinkRef","useRef","chainRef","chainLinkRefs","chainItemRefs","useEffect","current","forEach","itemRef","index","width","_a","style","setProperty","styles.tokens","chainItem","removeProperty","handleChainLinkClick","event","preventDefault","stopPropagation","title","_jsx","FadeWrapper","onResize","content","scrollLeft","getBoundingClientRect","left","className","styles.customFadeWrapper","children","role","ref","clsx","styles.chain","styles.chainFullWidthIndicator","map","titleAddon","isActive","styles.chainItem","styles.chainItemActive","el","_jsxs","onClick","styles.flexRow","styles.chainLink","position","styles.chainLinkReversed","styles.labelContainer","styles.label","styles.deselectedLabel","styles.deselectedLabelActive","type","tabIndex","onKeyDown","e","nextIndex","key","length","focus","handleKeyDown","styles.selectedLabel","styles.selectedLabelActive"],"mappings":"ypCAkBO,MAAMA,EAAe,EACxBC,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,GAC/CC,EAAWC,GAETC,EAAmBC,EAAeC,EAAW,WAC7CC,EAAWC,EAA0BJ,GAErCK,EAAgBC,EAA6B,MAC7CC,EAAWD,EAAgC,MAC3CE,EAAgBF,EAAqC,IACrDG,EAAgBH,EAAiC,IAEvDI,GAAU,KACND,EAAcE,QAAQC,SAAQ,CAACC,EAASC,WACpC,IAAKD,EACD,OAGJ,MAAME,EAAuB,QAAfC,EAAAnB,EAASiB,UAAM,IAAAE,OAAA,EAAAA,EAAED,MAE3BA,EACAF,EAAQI,MAAMC,YAAYC,EAAcC,UAAUL,MAAOA,GAEzDF,EAAQI,MAAMI,eAAeF,EAAcC,UAAUL,MACzD,GACF,GACH,CAAClB,IAKJ,MAAMyB,EACDR,GACAS,IACGA,EAAMC,iBACND,EAAME,kBACDnC,GACDK,EAAsBmB,GAGtBtB,GACAA,EAAWK,EAASiB,GAAOY,MAAOZ,EACtC,EA2BR,OACIa,EAACC,EAAW,CACRC,SA1Ba,EAAGC,cAChBA,GAAW3B,GAAYE,EAAcM,SAAWJ,EAASI,UACzDmB,EAAQC,WACJ1B,EAAcM,QAAQqB,wBAAwBC,KAC9C1B,EAASI,QAAQqB,wBAAwBC,KACjD,EAqB0B,cACT1C,EACbG,UAAWA,EACXwC,UAAWC,EAAwBC,SAEnCT,EAAA,KAAA,CACIU,KAAK,UACLC,IAAK/B,EACL2B,UAAWK,EACPC,EACA/C,GAA0BgD,GAC7BL,SAEAvC,EAAS6C,KAAI,EAAGhB,QAAOX,QAAO4B,cAAc7B,WACzC,MAAM8B,EAAWhD,IAAuBkB,EAQxC,OACIa,EAAA,KAAA,CAIIU,KAAK,OACLH,UAAWK,EACPM,EACAD,GAAYE,GAEhBR,IAjBcS,IAClBtC,EAAcE,QAAQG,GAASiC,EAC3BH,IACAvC,EAAcM,QAAUoC,EAC5B,EAaqBX,SAEjBY,EAAA,MAAA,CACIX,KAAK,OACLY,QAAS3B,EAAqBR,GAAM,cACvB,GAAGvB,UAAeuB,IAC/BoB,UAAWK,EACPW,EACAC,EACyB,UAAzBR,aAAU,EAAVA,EAAYS,WACRC,GACPjB,SAAA,CAEDY,EAAA,MAAA,CACId,UAAWoB,EACXjB,KAAK,OAAMD,SAAA,CAEXT,EAAA,MAAA,CACIO,UAAWK,EACPgB,EACAC,EACAZ,GACIa,GAERR,QAAS3B,EAAqBR,GAAM,cACxB,OAAMsB,SAEjBV,IAELC,EAAA,SAAA,CACIU,KAAK,MACLqB,KAAK,SAAQ,gBACEd,EACfe,SAAUf,EAAW,GAAI,EACzBgB,UAAYC,GApF1B,EAACA,EAAwB/C,WAC3C,IAAIgD,EAAYhD,EACF,eAAV+C,EAAEE,KACFD,GAAahD,EAAQ,GAAKjB,EAASmE,OACnCH,EAAErC,kBACe,cAAVqC,EAAEE,MACTD,GAAahD,EAAQ,EAAIjB,EAASmE,QAAUnE,EAASmE,OACrDH,EAAErC,kBAG0B,QAAhCR,EAAAR,EAAcG,QAAQmD,UAAU,IAAA9C,GAAAA,EAAEiD,OAAO,EA2ELC,CAAcL,EAAG/C,GAErBwB,IAAMS,GACDvC,EAAcG,QAAQG,GAASiC,EAEpCb,UAAWK,EACPgB,EACAY,EACAvB,GACIwB,YAGP1C,OAGRiB,eAAAA,EAAYb,YA1DZ,GAAGJ,KAASX,QAAAA,EAAS,MACF,UAApB4B,aAAU,EAAVA,EAAYS,gBAAQ,IAAApC,EAAAA,EAAI,SA2D3B,OAIP"}
+{"version":3,"file":"tab-link-chain.js","sources":["../../src/tab/tab-link-chain.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext, useEffect, useRef } from \"react\";\n\nimport { FadeWrapper, type ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { TabContext } from \"./tab-context\";\nimport * as styles from \"./tab-link-chain.styles\";\nimport type { TabProps } from \"./types\";\n\ninterface Props\n    extends Pick<\n        TabProps,\n        \"fullWidthIndicatorLine\" | \"onTabClick\" | \"data-testid\" | \"fadeColor\"\n    > {\n    controlledMode?: boolean;\n}\n\nexport const TabLinkChain = ({\n    controlledMode,\n    \"data-testid\": testId,\n    onTabClick,\n    fullWidthIndicatorLine,\n    fadeColor,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setCurrentActiveIndex, currentActiveIndex, tabLinks } =\n        useContext(TabContext);\n\n    const isTablet = useMaxWidthMediaQuery(\"lg\");\n\n    const activeLinkRef = useRef<HTMLLIElement | null>(null);\n    const chainRef = useRef<HTMLUListElement | null>(null);\n    const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\n    const chainItemRefs = useRef<(HTMLLIElement | null)[]>([]);\n\n    useEffect(() => {\n        chainItemRefs.current.forEach((itemRef, index) => {\n            if (!itemRef) {\n                return;\n            }\n\n            const width = tabLinks[index]?.width;\n\n            if (width) {\n                itemRef.style.setProperty(styles.tokens.chainItem.width, width);\n            } else {\n                itemRef.style.removeProperty(styles.tokens.chainItem.width);\n            }\n        });\n    }, [tabLinks]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChainLinkClick =\n        (index: number) =>\n        (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n            if (!controlledMode) {\n                setCurrentActiveIndex(index);\n            }\n\n            if (onTabClick) {\n                onTabClick(tabLinks[index].title, index);\n            }\n        };\n\n    const handleResize = ({ content }: ResizeCallbackParams) => {\n        if (content && isTablet && activeLinkRef.current && chainRef.current) {\n            content.scrollLeft =\n                activeLinkRef.current.getBoundingClientRect().left -\n                chainRef.current.getBoundingClientRect().left;\n        }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n        let nextIndex = index;\n        if (e.key === \"ArrowRight\") {\n            nextIndex = (index + 1) % tabLinks.length;\n            e.preventDefault();\n        } else if (e.key === \"ArrowLeft\") {\n            nextIndex = (index - 1 + tabLinks.length) % tabLinks.length;\n            e.preventDefault();\n        }\n\n        chainLinkRefs.current[nextIndex]?.focus();\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <FadeWrapper\n            onResize={handleResize}\n            data-testid={testId}\n            fadeColor={fadeColor}\n            className={styles.customFadeWrapper}\n        >\n            <ul\n                role=\"tablist\"\n                ref={chainRef}\n                className={clsx(\n                    styles.chain,\n                    fullWidthIndicatorLine && styles.chainFullWidthIndicator\n                )}\n            >\n                {tabLinks.map(({ title, width, titleAddon }, index) => {\n                    const isActive = currentActiveIndex === index;\n                    const chainItemRef = (el: HTMLLIElement | null) => {\n                        chainItemRefs.current[index] = el;\n                        if (isActive) {\n                            activeLinkRef.current = el;\n                        }\n                    };\n\n                    return (\n                        <li\n                            key={`${title}-${width ?? \"\"}-${\n                                titleAddon?.position ?? \"none\"\n                            }`}\n                            role=\"none\"\n                            className={clsx(\n                                styles.chainItem,\n                                isActive && styles.chainItemActive\n                            )}\n                            ref={chainItemRef}\n                        >\n                            <div\n                                role=\"none\"\n                                onClick={handleChainLinkClick(index)}\n                                data-testid={`${testId}-link-${index}`}\n                                className={clsx(\n                                    styles.flexRow,\n                                    styles.chainLink,\n                                    titleAddon?.position === \"left\" &&\n                                        styles.chainLinkReversed\n                                )}\n                            >\n                                <div\n                                    className={styles.labelContainer}\n                                    role=\"none\"\n                                >\n                                    <div\n                                        className={clsx(\n                                            styles.label,\n                                            styles.deselectedLabel,\n                                            isActive &&\n                                                styles.deselectedLabelActive\n                                        )}\n                                        onClick={handleChainLinkClick(index)}\n                                        aria-hidden=\"true\"\n                                    >\n                                        {title}\n                                    </div>\n                                    <button\n                                        role=\"tab\"\n                                        type=\"button\"\n                                        aria-selected={isActive}\n                                        tabIndex={isActive ? 0 : -1}\n                                        onKeyDown={(e) =>\n                                            handleKeyDown(e, index)\n                                        }\n                                        ref={(el) =>\n                                            (chainLinkRefs.current[index] = el)\n                                        }\n                                        className={clsx(\n                                            styles.label,\n                                            styles.selectedLabel,\n                                            isActive &&\n                                                styles.selectedLabelActive\n                                        )}\n                                    >\n                                        {title}\n                                    </button>\n                                </div>\n                                {titleAddon?.content}\n                            </div>\n                        </li>\n                    );\n                })}\n            </ul>\n        </FadeWrapper>\n    );\n};\n"],"names":["TabLinkChain","controlledMode","testId","onTabClick","fullWidthIndicatorLine","fadeColor","setCurrentActiveIndex","currentActiveIndex","tabLinks","useContext","TabContext","isTablet","useMaxWidthMediaQuery","activeLinkRef","useRef","chainRef","chainLinkRefs","chainItemRefs","useEffect","current","forEach","itemRef","index","width","_a","style","setProperty","styles.tokens","chainItem","removeProperty","handleChainLinkClick","event","preventDefault","stopPropagation","title","_jsx","FadeWrapper","onResize","content","scrollLeft","getBoundingClientRect","left","className","styles.customFadeWrapper","children","role","ref","clsx","styles.chain","styles.chainFullWidthIndicator","map","titleAddon","isActive","styles.chainItem","styles.chainItemActive","el","_jsxs","onClick","styles.flexRow","styles.chainLink","position","styles.chainLinkReversed","styles.labelContainer","styles.label","styles.deselectedLabel","styles.deselectedLabelActive","type","tabIndex","onKeyDown","e","nextIndex","key","length","focus","handleKeyDown","styles.selectedLabel","styles.selectedLabelActive"],"mappings":"0hCAiBO,MAAMA,EAAe,EACxBC,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,GAC/CC,EAAWC,GAETC,EAAWC,EAAsB,MAEjCC,EAAgBC,EAA6B,MAC7CC,EAAWD,EAAgC,MAC3CE,EAAgBF,EAAqC,IACrDG,EAAgBH,EAAiC,IAEvDI,GAAU,KACND,EAAcE,QAAQC,SAAQ,CAACC,EAASC,WACpC,IAAKD,EACD,OAGJ,MAAME,EAAuB,QAAfC,EAAAhB,EAASc,UAAM,IAAAE,OAAA,EAAAA,EAAED,MAE3BA,EACAF,EAAQI,MAAMC,YAAYC,EAAcC,UAAUL,MAAOA,GAEzDF,EAAQI,MAAMI,eAAeF,EAAcC,UAAUL,MACzD,GACF,GACH,CAACf,IAKJ,MAAMsB,EACDR,GACAS,IACGA,EAAMC,iBACND,EAAME,kBACDhC,GACDK,EAAsBgB,GAGtBnB,GACAA,EAAWK,EAASc,GAAOY,MAAOZ,EACtC,EA2BR,OACIa,EAACC,EAAW,CACRC,SA1Ba,EAAGC,cAChBA,GAAW3B,GAAYE,EAAcM,SAAWJ,EAASI,UACzDmB,EAAQC,WACJ1B,EAAcM,QAAQqB,wBAAwBC,KAC9C1B,EAASI,QAAQqB,wBAAwBC,KACjD,EAqB0B,cACTvC,EACbG,UAAWA,EACXqC,UAAWC,EAAwBC,SAEnCT,EAAA,KAAA,CACIU,KAAK,UACLC,IAAK/B,EACL2B,UAAWK,EACPC,EACA5C,GAA0B6C,GAC7BL,SAEApC,EAAS0C,KAAI,EAAGhB,QAAOX,QAAO4B,cAAc7B,WACzC,MAAM8B,EAAW7C,IAAuBe,EAQxC,OACIa,EAAA,KAAA,CAIIU,KAAK,OACLH,UAAWK,EACPM,EACAD,GAAYE,GAEhBR,IAjBcS,IAClBtC,EAAcE,QAAQG,GAASiC,EAC3BH,IACAvC,EAAcM,QAAUoC,EAC5B,EAaqBX,SAEjBY,EAAA,MAAA,CACIX,KAAK,OACLY,QAAS3B,EAAqBR,GAAM,cACvB,GAAGpB,UAAeoB,IAC/BoB,UAAWK,EACPW,EACAC,EACyB,UAAzBR,aAAU,EAAVA,EAAYS,WACRC,GACPjB,SAAA,CAEDY,EAAA,MAAA,CACId,UAAWoB,EACXjB,KAAK,OAAMD,SAAA,CAEXT,EAAA,MAAA,CACIO,UAAWK,EACPgB,EACAC,EACAZ,GACIa,GAERR,QAAS3B,EAAqBR,GAAM,cACxB,OAAMsB,SAEjBV,IAELC,EAAA,SAAA,CACIU,KAAK,MACLqB,KAAK,SAAQ,gBACEd,EACfe,SAAUf,EAAW,GAAI,EACzBgB,UAAYC,GApF1B,EAACA,EAAwB/C,WAC3C,IAAIgD,EAAYhD,EACF,eAAV+C,EAAEE,KACFD,GAAahD,EAAQ,GAAKd,EAASgE,OACnCH,EAAErC,kBACe,cAAVqC,EAAEE,MACTD,GAAahD,EAAQ,EAAId,EAASgE,QAAUhE,EAASgE,OACrDH,EAAErC,kBAG0B,QAAhCR,EAAAR,EAAcG,QAAQmD,UAAU,IAAA9C,GAAAA,EAAEiD,OAAO,EA2ELC,CAAcL,EAAG/C,GAErBwB,IAAMS,GACDvC,EAAcG,QAAQG,GAASiC,EAEpCb,UAAWK,EACPgB,EACAY,EACAvB,GACIwB,YAGP1C,OAGRiB,eAAAA,EAAYb,YA1DZ,GAAGJ,KAASX,QAAAA,EAAS,MACF,UAApB4B,aAAU,EAAVA,EAAYS,gBAAQ,IAAApC,EAAAA,EAAI,SA2D3B,OAIP"}