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

package/singpass-button/singpass-button.d.ts

@@ -1,7 +1,16 @@
-import React from "react";
 import type { SingpassButtonProps } from "./types";
-export declare const SingpassButton: {
-    Default: (props: SingpassButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-    Small: (props: SingpassButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-    Large: (props: SingpassButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+/**
+ * Call-to-action for Singpass authentication,
+ * following the brand [guidelines](https://docs.developer.singpass.gov.sg/docs/products/login/singpass-button-guidelines-for-developers-and-designers).
+ *
+ * Use `SingpassButton` to let users log in with their Singpass account.
+ * @keywords authentication, login
+ */
+export declare const SingpassButton: ((props: SingpassButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null) & {
+    /** @deprecated Use the `sizeType` prop instead: `<SingpassButton>` or `<SingpassButton sizeType="default">` */
+    Default: (props: SingpassButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    /** @deprecated Use the `sizeType` prop instead: `<SingpassButton sizeType="small">` */
+    Small: (props: SingpassButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    /** @deprecated Use the `sizeType` prop instead: `<SingpassButton sizeType="large">` */
+    Large: (props: SingpassButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
 };

package/singpass-button/singpass-button.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import s from"react";import{getSpLogo as a}from"./singpass-assets.js";import{Main as i,SvgContainer as l}from"./singpass-button.style.js";const n=(s,n)=>{const{styleType:r="white-filled"}=s,o=t(s,["styleType"]),d={$buttonStyle:r,$buttonSizeStyle:"default"};return e(i,Object.assign({ref:n,"data-testid":o["data-testid"]||"button"},d,o,{"aria-label":"Log in with sing pass",children:e(l,{$buttonSizeStyle:"default",children:e("img",{src:a(r),alt:""})})}))};n.displayName="SingpassButton.Default";const r=(s,n)=>{const{styleType:r="white-filled"}=s,o=t(s,["styleType"]),d={$buttonStyle:r,$buttonSizeStyle:"small"};return e(i,Object.assign({ref:n,"data-testid":o["data-testid"]||"button"},d,o,{"aria-label":"Log in with sing pass",children:e(l,{$buttonSizeStyle:"small",children:e("img",{src:a(r),alt:""})})}))};r.displayName="SingpassButton.Small";const o=(s,n)=>{const{styleType:r="white-filled"}=s,o=t(s,["styleType"]),d={$buttonStyle:r,$buttonSizeStyle:"large"};return e(i,Object.assign({ref:n,"data-testid":o["data-testid"]||"button"},d,o,{"aria-label":"Log in with sing pass",children:e(l,{$buttonSizeStyle:"large",children:e("img",{src:a(r),alt:""})})}))};o.displayName="SingpassButton.Large";const d={Default:s.forwardRef(n),Small:s.forwardRef(r),Large:s.forwardRef(o)};export{d as SingpassButton};
+import{__rest as s}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import t from"clsx";import{forwardRef as a}from"react";import{getSpLogo as i}from"./singpass-assets.js";import{svgContainer as l,svgContainerSizeLarge as r,main as n,mainSizeLarge as o,mainSizeSmall as p,mainStyleWhiteFilled as m,mainStyleRedFilled as c}from"./singpass-button.styles.js";const d={"red-filled":c,"white-filled":m},g={small:p,large:o,default:""},f=a(((a,o)=>{const{styleType:p="white-filled",sizeType:m="default",className:c,"data-testid":f="singpass-button"}=a,u=s(a,["styleType","sizeType","className","data-testid"]);return e("button",Object.assign({ref:o,"data-testid":f},u,{"aria-label":"Log in with Singpass",className:t(n,g[m],d[p],c),children:e("span",{className:t(l,"large"===m&&r),children:e("img",{src:i(p),alt:""})})}))})),u=(s,t)=>{var a;return e(f,Object.assign({},s,{sizeType:null!==(a=s.sizeType)&&void 0!==a?a:"default",ref:t}))};u.displayName="SingpassButton.Default";const y=(s,t)=>e(f,Object.assign({},s,{sizeType:"small",ref:t}));y.displayName="SingpassButton.Small";const b=(s,t)=>e(f,Object.assign({},s,{sizeType:"large",ref:t}));b.displayName="SingpassButton.Large";const j=Object.assign(f,{Default:a(u),Small:a(y),Large:a(b)});export{j as SingpassButton};
 //# sourceMappingURL=singpass-button.js.map

package/singpass-button/singpass-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"singpass-button.js","sources":["../../src/singpass-button/singpass-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { getSpLogo } from \"./singpass-assets\";\nimport type { MainStyleProps } from \"./singpass-button.style\";\nimport { Main, SvgContainer } from \"./singpass-button.style\";\nimport type { SingpassButtonProps, SingpassButtonRef } from \"./types\";\n\n/**\n * NOTE: Due to the way we intend to customise both components, with forwardRef behaviour\n * we are unable to create a single component and have them share.\n *\n * Will refactor if there is a better way\n */\nconst DefaultComponent = (\n    props: SingpassButtonProps,\n    ref: SingpassButtonRef\n) => {\n    const { styleType = \"white-filled\", ...otherProps } = props;\n\n    const mainStyle: MainStyleProps = {\n        $buttonStyle: styleType,\n        $buttonSizeStyle: \"default\",\n    };\n\n    return (\n        <Main\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            {...mainStyle}\n            {...otherProps}\n            aria-label=\"Log in with sing pass\"\n        >\n            <SvgContainer $buttonSizeStyle=\"default\">\n                <img src={getSpLogo(styleType)} alt=\"\" />\n            </SvgContainer>\n        </Main>\n    );\n};\nDefaultComponent.displayName = \"SingpassButton.Default\";\n\nconst SmallComponent = (props: SingpassButtonProps, ref: SingpassButtonRef) => {\n    const { styleType = \"white-filled\", ...otherProps } = props;\n\n    const mainStyle: MainStyleProps = {\n        $buttonStyle: styleType,\n        $buttonSizeStyle: \"small\",\n    };\n\n    return (\n        <Main\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            {...mainStyle}\n            {...otherProps}\n            aria-label=\"Log in with sing pass\"\n        >\n            <SvgContainer $buttonSizeStyle=\"small\">\n                <img src={getSpLogo(styleType)} alt=\"\" />\n            </SvgContainer>\n        </Main>\n    );\n};\nSmallComponent.displayName = \"SingpassButton.Small\";\n\nconst LargeComponent = (props: SingpassButtonProps, ref: SingpassButtonRef) => {\n    const { styleType = \"white-filled\", ...otherProps } = props;\n\n    const mainStyle: MainStyleProps = {\n        $buttonStyle: styleType,\n        $buttonSizeStyle: \"large\",\n    };\n\n    return (\n        <Main\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            {...mainStyle}\n            {...otherProps}\n            aria-label=\"Log in with sing pass\"\n        >\n            <SvgContainer $buttonSizeStyle=\"large\">\n                <img src={getSpLogo(styleType)} alt=\"\" />\n            </SvgContainer>\n        </Main>\n    );\n};\nLargeComponent.displayName = \"SingpassButton.Large\";\n\nexport const SingpassButton = {\n    Default: React.forwardRef(DefaultComponent),\n    Small: React.forwardRef(SmallComponent),\n    Large: React.forwardRef(LargeComponent),\n};\n"],"names":["DefaultComponent","props","ref","styleType","otherProps","__rest","mainStyle","$buttonStyle","$buttonSizeStyle","_jsx","Main","children","SvgContainer","src","getSpLogo","alt","displayName","SmallComponent","LargeComponent","SingpassButton","Default","React","forwardRef","Small","Large"],"mappings":"iOAaA,MAAMA,EAAmB,CACrBC,EACAC,KAEA,MAAMC,UAAEA,EAAY,gBAAkCF,EAAfG,EAAUC,EAAKJ,EAAhD,CAAA,cAEAK,EAA4B,CAC9BC,aAAcJ,EACdK,iBAAkB,WAGtB,OACIC,EAACC,iBACGR,IAAKA,EAAG,cACKE,EAAW,gBAAkB,UACtCE,EACAF,EAAU,CAAA,aACH,wBAAuBO,SAElCF,EAACG,EAAY,CAAAJ,iBAAkB,mBAC3BC,EAAA,MAAA,CAAKI,IAAKC,EAAUX,GAAYY,IAAI,SAErC,EAGff,EAAiBgB,YAAc,yBAE/B,MAAMC,EAAiB,CAAChB,EAA4BC,KAChD,MAAMC,UAAEA,EAAY,gBAAkCF,EAAfG,EAAUC,EAAKJ,EAAhD,CAAA,cAEAK,EAA4B,CAC9BC,aAAcJ,EACdK,iBAAkB,SAGtB,OACIC,EAACC,iBACGR,IAAKA,EAAG,cACKE,EAAW,gBAAkB,UACtCE,EACAF,EAAU,CAAA,aACH,wBAAuBO,SAElCF,EAACG,EAAY,CAAAJ,iBAAkB,iBAC3BC,EAAA,MAAA,CAAKI,IAAKC,EAAUX,GAAYY,IAAI,SAErC,EAGfE,EAAeD,YAAc,uBAE7B,MAAME,EAAiB,CAACjB,EAA4BC,KAChD,MAAMC,UAAEA,EAAY,gBAAkCF,EAAfG,EAAUC,EAAKJ,EAAhD,CAAA,cAEAK,EAA4B,CAC9BC,aAAcJ,EACdK,iBAAkB,SAGtB,OACIC,EAACC,iBACGR,IAAKA,EAAG,cACKE,EAAW,gBAAkB,UACtCE,EACAF,EAAU,CAAA,aACH,wBAAuBO,SAElCF,EAACG,EAAY,CAAAJ,iBAAkB,iBAC3BC,EAAA,MAAA,CAAKI,IAAKC,EAAUX,GAAYY,IAAI,SAErC,EAGfG,EAAeF,YAAc,uBAEtB,MAAMG,EAAiB,CAC1BC,QAASC,EAAMC,WAAWtB,GAC1BuB,MAAOF,EAAMC,WAAWL,GACxBO,MAAOH,EAAMC,WAAWJ"}
+{"version":3,"file":"singpass-button.js","sources":["../../src/singpass-button/singpass-button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport { getSpLogo } from \"./singpass-assets\";\nimport * as styles from \"./singpass-button.styles\";\nimport type {\n    SingpassButtonProps,\n    SingpassButtonRef,\n    SingpassButtonSizeType,\n    SingpassButtonStyleType,\n} from \"./types\";\n\nconst styleClassMap: Record<SingpassButtonStyleType, string> = {\n    \"red-filled\": styles.mainStyleRedFilled,\n    \"white-filled\": styles.mainStyleWhiteFilled,\n};\n\nconst sizeClassMap: Record<SingpassButtonSizeType, string> = {\n    small: styles.mainSizeSmall,\n    large: styles.mainSizeLarge,\n    default: \"\",\n};\n\nconst Component = (props: SingpassButtonProps, ref: SingpassButtonRef) => {\n    const {\n        styleType = \"white-filled\",\n        sizeType = \"default\",\n        className,\n        \"data-testid\": testId = \"singpass-button\",\n        ...otherProps\n    } = props;\n\n    return (\n        <button\n            ref={ref}\n            data-testid={testId}\n            {...otherProps}\n            aria-label=\"Log in with Singpass\"\n            className={clsx(\n                styles.main,\n                sizeClassMap[sizeType],\n                styleClassMap[styleType],\n                className\n            )}\n        >\n            <span\n                className={clsx(\n                    styles.svgContainer,\n                    sizeType === \"large\" && styles.svgContainerSizeLarge\n                )}\n            >\n                <img src={getSpLogo(styleType)} alt=\"\" />\n            </span>\n        </button>\n    );\n};\n\nconst BaseSingpassButton = forwardRef(Component);\n\nconst DefaultSingpassButtonComponent = (\n    props: SingpassButtonProps,\n    ref: SingpassButtonRef\n) => (\n    <BaseSingpassButton\n        {...props}\n        sizeType={props.sizeType ?? \"default\"}\n        ref={ref}\n    />\n);\nDefaultSingpassButtonComponent.displayName = \"SingpassButton.Default\";\n\nconst SmallSingpassButtonComponent = (\n    props: SingpassButtonProps,\n    ref: SingpassButtonRef\n) => <BaseSingpassButton {...props} sizeType=\"small\" ref={ref} />;\nSmallSingpassButtonComponent.displayName = \"SingpassButton.Small\";\n\nconst LargeSingpassButtonComponent = (\n    props: SingpassButtonProps,\n    ref: SingpassButtonRef\n) => <BaseSingpassButton {...props} sizeType=\"large\" ref={ref} />;\nLargeSingpassButtonComponent.displayName = \"SingpassButton.Large\";\n\n// @catalog\n/**\n * Call-to-action for Singpass authentication,\n * following the brand [guidelines](https://docs.developer.singpass.gov.sg/docs/products/login/singpass-button-guidelines-for-developers-and-designers).\n *\n * Use `SingpassButton` to let users log in with their Singpass account.\n * @keywords authentication, login\n */\nexport const SingpassButton = Object.assign(BaseSingpassButton, {\n    /** @deprecated Use the `sizeType` prop instead: `<SingpassButton>` or `<SingpassButton sizeType=\"default\">` */\n    Default: forwardRef(DefaultSingpassButtonComponent),\n    /** @deprecated Use the `sizeType` prop instead: `<SingpassButton sizeType=\"small\">` */\n    Small: forwardRef(SmallSingpassButtonComponent),\n    /** @deprecated Use the `sizeType` prop instead: `<SingpassButton sizeType=\"large\">` */\n    Large: forwardRef(LargeSingpassButtonComponent),\n});\n"],"names":["styleClassMap","styles.mainStyleRedFilled","styles.mainStyleWhiteFilled","sizeClassMap","small","styles.mainSizeSmall","large","styles.mainSizeLarge","default","BaseSingpassButton","forwardRef","props","ref","styleType","sizeType","className","testId","otherProps","__rest","_jsx","Object","assign","clsx","styles.main","children","styles.svgContainer","styles.svgContainerSizeLarge","src","getSpLogo","alt","DefaultSingpassButtonComponent","_a","displayName","SmallSingpassButtonComponent","LargeSingpassButtonComponent","SingpassButton","Default","Small","Large"],"mappings":"uXAYA,MAAMA,EAAyD,CAC3D,aAAcC,EACd,eAAgBC,GAGdC,EAAuD,CACzDC,MAAOC,EACPC,MAAOC,EACPC,QAAS,IAqCPC,EAAqBC,GAlCT,CAACC,EAA4BC,KAC3C,MAAMC,UACFA,EAAY,eAAcC,SAC1BA,EAAW,UAASC,UACpBA,EACA,cAAeC,EAAS,mBAExBL,EADGM,EAAUC,EACbP,EANE,CAAA,YAAA,WAAA,YAAA,gBAQN,OACIQ,EAAA,SAAAC,OAAAC,OAAA,CACIT,IAAKA,EAAG,cACKI,GACTC,EAAU,CAAA,aACH,uBACXF,UAAWO,EACPC,EACApB,EAAaW,GACbd,EAAca,GACdE,GACHS,SAEDL,EAAA,OAAA,CACIJ,UAAWO,EACPG,EACa,UAAbX,GAAwBY,GAC3BF,SAEDL,EAAA,MAAA,CAAKQ,IAAKC,EAAUf,GAAYgB,IAAI,SAEnC,IAMXC,EAAiC,CACnCnB,EACAC,WACC,OACDO,EAACV,EAAkBW,OAAAC,OAAA,CAAA,EACXV,EAAK,CACTG,SAAwB,QAAdiB,EAAApB,EAAMG,gBAAQ,IAAAiB,EAAAA,EAAI,UAC5BnB,IAAKA,IACP,EAENkB,EAA+BE,YAAc,yBAE7C,MAAMC,EAA+B,CACjCtB,EACAC,IACCO,EAACV,mBAAuBE,EAAK,CAAEG,SAAS,QAAQF,IAAKA,KAC1DqB,EAA6BD,YAAc,uBAE3C,MAAME,EAA+B,CACjCvB,EACAC,IACCO,EAACV,mBAAuBE,EAAK,CAAEG,SAAS,QAAQF,IAAKA,KAC1DsB,EAA6BF,YAAc,6BAU9BG,EAAiBf,OAAOC,OAAOZ,EAAoB,CAE5D2B,QAAS1B,EAAWoB,GAEpBO,MAAO3B,EAAWuB,GAElBK,MAAO5B,EAAWwB"}

package/singpass-button/singpass-button.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const main: import("@linaria/core").LinariaClassName;
+export declare const mainSizeSmall: import("@linaria/core").LinariaClassName;
+export declare const mainSizeLarge: import("@linaria/core").LinariaClassName;
+export declare const mainStyleRedFilled: import("@linaria/core").LinariaClassName;
+export declare const mainStyleWhiteFilled: import("@linaria/core").LinariaClassName;
+export declare const svgContainer: import("@linaria/core").LinariaClassName;
+export declare const svgContainerSizeLarge: import("@linaria/core").LinariaClassName;

package/singpass-button/singpass-button.styles.js

@@ -0,0 +1,2 @@
+import"./singpass-button.styles_1fj2lru.css";const s="m18jjb1",m="m6wtgnj",t="mijymjd",j="m1y6qkg6",n="mmpvnp1",p="s1mju8fq",i="sreiq2p";export{s as main,t as mainSizeLarge,m as mainSizeSmall,j as mainStyleRedFilled,n as mainStyleWhiteFilled,p as svgContainer,i as svgContainerSizeLarge};
+//# sourceMappingURL=singpass-button.styles.js.map

package/singpass-button/singpass-button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"singpass-button.styles.js","sources":["../../src/singpass-button/singpass-button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, ComponentToken, Motion, Spacing } from \"../theme\";\n\n// =============================================================================\n// MAIN BUTTON\n// =============================================================================\nexport const main = css`\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    border-radius: ${ComponentToken.Button[\"radius\"]};\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 3rem;\n`;\n\nexport const mainSizeSmall = css`\n    min-height: 2.5rem;\n    padding: calc(${Spacing[\"spacing-8\"]} - ${Border[\"width-010\"]})\n        ${Spacing[\"spacing-16\"]};\n`;\n\nexport const mainSizeLarge = css`\n    min-height: 4rem;\n`;\n\nexport const mainStyleRedFilled = css`\n    background-color: #f4333d;\n    border: none;\n\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: #b0262d;\n        }\n    }\n`;\n\nexport const mainStyleWhiteFilled = css`\n    background-color: #ffffff;\n    border: 1px #c8c9cc solid;\n\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: #f5f5f7;\n        }\n    }\n`;\n\n// =============================================================================\n// SVG CONTAINER\n// =============================================================================\nexport const svgContainer = css`\n    height: 1.5rem;\n\n    img {\n        height: 100%;\n    }\n`;\n\nexport const svgContainerSizeLarge = css`\n    height: 2.5rem;\n`;\n"],"names":["main","mainSizeSmall","mainSizeLarge","mainStyleRedFilled","mainStyleWhiteFilled","svgContainer","svgContainerSizeLarge"],"mappings":"4EAOO,MAAMA,EAAI,UAWJC,EAAa,UAMbC,EAAa,UAIbC,EAAkB,WAYlBC,EAAoB,UAepBC,EAAY,WAQZC,EAAqB"}

package/singpass-button/singpass-button.styles_1fj2lru.css

@@ -0,0 +1,7 @@
+@layer fds{.m18jjb1{padding:var(--fds-spacing-8) var(--fds-spacing-16);-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);border-radius:var(--fds-button-radius);cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;min-height:3rem;}
+.m6wtgnj{min-height:2.5rem;padding:calc(var(--fds-spacing-8) - var(--fds-border-width-010)) var(--fds-spacing-16);}
+.mijymjd{min-height:4rem;}
+.m1y6qkg6{background-color:#f4333d;border:none;}@media (pointer: fine){.m1y6qkg6:hover,.m1y6qkg6:active{background-color:#b0262d;}}
+.mmpvnp1{background-color:#ffffff;border:1px #c8c9cc solid;}@media (pointer: fine){.mmpvnp1:hover,.mmpvnp1:active{background-color:#f5f5f7;}}
+.s1mju8fq{height:1.5rem;}.s1mju8fq img{height:100%;}
+.sreiq2p{height:2.5rem;}}

package/singpass-button/types.d.ts

@@ -1,8 +1,38 @@
 import type React from "react";
+/**
+ * Visual style variant of the Singpass button.
+ *
+ * - `"red-filled"` — Singpass red background with white logo.
+ * - `"white-filled"` — white background with red logo.
+ */
 export type SingpassButtonStyleType = "red-filled" | "white-filled";
+/**
+ * Size variant of the Singpass button.
+ *
+ * - `"default"` — standard button size.
+ * - `"small"` — compact button size.
+ * - `"large"` — expanded button size.
+ */
+export type SingpassButtonSizeType = "default" | "small" | "large";
+/**
+ * Props for the Singpass-branded login button.
+ */
 export interface SingpassButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     "data-testid"?: string | undefined;
-    /** The style type of the button. Values: "red-filled" | "white-filled" */
+    /**
+     * Visual style variant controlling the button background and logo colour.
+     *
+     * @default "white-filled"
+     */
     styleType?: SingpassButtonStyleType | undefined;
+    /**
+     * Size variant of the button.
+     *
+     * @default "default"
+     */
+    sizeType?: SingpassButtonSizeType | undefined;
 }
+/**
+ * Ref type for the underlying `<button>` element rendered by `SingpassButton`.
+ */
 export type SingpassButtonRef = React.Ref<HTMLButtonElement>;

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

@@ -1,3 +1,9 @@
 import React from "react";
 import type { SmartAppBannerProps } from "./types";
+/**
+ * A fixed top banner that promotes a mobile app and links to its store listing.
+ *
+ * Use `SmartAppBanner` to invite users to install or open the native app.
+ * @keywords app store, banner, mobile app, promotion
+ */
 export declare const SmartAppBanner: (props: SmartAppBannerProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

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

@@ -1,2 +1,2 @@
-import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import n from"react";import{SmartAppBannerContainer as i,DismissContainer as s,DismissButton as a,Cross as o,ProceedContainer as l,BannerIcon as c,TextContainer as d,Title as p,Description as f,ButtonContainer as h,StyledButton 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",w="smart-app-banner";const y=n.forwardRef((function(n,y){const{className:C,show:N,href:j,content:x,offset:A=0,icon:D=k,animated:L=!1,onDismiss:M,onClick:v}=n,{title:O,message:P,buttonLabel:R,buttonAriaLabel:S,numberOfStars:_}=x,q=e=>{e.stopPropagation(),window.open(j,"_blank","noreferrer"),null==v||v()};return e(t,{children:N&&r(i,{ref:y,$isAnimated:L,$offset:A,className:C,children:[e(s,{onClick:M,id:`${w}-dismiss`,"data-testid":`${w}-dismiss-container`,children:e(a,{"aria-label":"Dismiss",children:e(o,{})})}),r(l,{onClick:q,id:`${w}-proceed`,"data-testid":`${w}-proceed-container`,children:[e(c,{src:D,alt:"lifesg-app-icon"}),r(d,{children:[e(p,{children:O}),e(f,{children:P}),(()=>{if(isNaN(_)||_<0)return;const t=[],r=_-Math.floor(_)>=.4;for(let r=0;r<Math.floor(_);r++)t.push(e(u,{},`star${r}`));if(r&&t.push(e(b,{},"halfstar")),t.length<5){const r=5-t.length;for(let n=0;n<r;n++)t.push(e(g,{},`emptystar${n}`))}return e($,{children:t.slice(0,5)})})()]}),e(h,{children:e(m,{type:"button",onClick:q,"aria-label":S,children:R})})]})]})})}));export{y 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\";\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 { title, message, buttonLabel, buttonAriaLabel, numberOfStars } =\n        content;\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}`} />);\n        }\n        if (hasHalfStar) {\n            stars.push(<StarHalf key={`halfstar`} />);\n        }\n        if (stars.length < 5) {\n            const remaining = 5 - stars.length;\n            for (let i = 0; i < remaining; i++) {\n                stars.push(<StarEmpty key={`emptystar${i}`} />);\n            }\n        }\n\n        /* maximum of 5 stars */\n        return <RatingContainer>{stars.slice(0, 5)}</RatingContainer>;\n    };\n\n    return (\n        <>\n            {show && (\n                <SmartAppBannerContainer\n                    ref={ref}\n                    $isAnimated={animated}\n                    $offset={offset}\n                    className={className}\n                >\n                    <DismissContainer\n                        onClick={onDismiss}\n                        id={`${ID}-dismiss`}\n                        data-testid={`${ID}-dismiss-container`}\n                    >\n                        <DismissButton aria-label=\"Dismiss\">\n                            <Cross />\n                        </DismissButton>\n                    </DismissContainer>\n                    <ProceedContainer\n                        onClick={handleClick}\n                        id={`${ID}-proceed`}\n                        data-testid={`${ID}-proceed-container`}\n                    >\n                        <BannerIcon src={icon} alt=\"lifesg-app-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={buttonAriaLabel}\n                            >\n                                {buttonLabel}\n                            </StyledButton>\n                        </ButtonContainer>\n                    </ProceedContainer>\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","buttonAriaLabel","numberOfStars","handleClick","e","stopPropagation","window","open","_jsx","_Fragment","children","_jsxs","SmartAppBannerContainer","$isAnimated","$offset","DismissContainer","id","DismissButton","Cross","ProceedContainer","BannerIcon","src","alt","TextContainer","Title","Description","isNaN","stars","hasHalfStar","Math","floor","i","push","Star","StarHalf","length","remaining","StarEmpty","RatingContainer","slice","generateStarRating","ButtonContainer","StyledButton","type"],"mappings":"wYAqBA,MAAMA,EACF,2EAEEC,EAAK,mBA6GJ,MAAMC,EAAiBC,EAAMC,YA3GpC,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,MAAEA,EAAKC,QAAEA,EAAOC,YAAEA,EAAWC,gBAAEA,EAAeC,cAAEA,GAClDV,EAKEW,EACFC,IAEAA,EAAEC,kBACFC,OAAOC,KAAKhB,EAAM,SAAU,cAC5BM,SAAAA,GAAW,EAgCf,OACIW,EAAAC,EAAA,CAAAC,SACKpB,GACGqB,EAACC,EAAuB,CACpBxB,IAAKA,EAAGyB,YACKlB,EAAQmB,QACZrB,EACTJ,UAAWA,EAASqB,SAAA,CAEpBF,EAACO,EAAgB,CACblB,QAASD,EACToB,GAAI,GAAGjC,YAAY,cACN,GAAGA,sBAAsB2B,SAEtCF,EAACS,EAAa,CAAA,aAAY,UAASP,SAC/BF,EAACU,EAAK,CAAA,OAGdP,EAACQ,EAAgB,CACbtB,QAASM,EACTa,GAAI,GAAGjC,0BACM,GAAGA,sBAAsB2B,SAAA,CAEtCF,EAACY,EAAU,CAACC,IAAK3B,EAAM4B,IAAI,oBAC3BX,EAACY,EAAa,CAAAb,SAAA,CACVF,EAACgB,EAAK,CAAAd,SAAEZ,IACRU,EAACiB,EAAW,CAAAf,SAAEX,IAnDX,MACvB,GAAI2B,MAAMxB,IAAkBA,EAAgB,EACxC,OAGJ,MAAMyB,EAAQ,GACRC,EAAc1B,EAAgB2B,KAAKC,MAAM5B,IAAkB,GAEjE,IAAK,IAAI6B,EAAI,EAAGA,EAAIF,KAAKC,MAAM5B,GAAgB6B,IAC3CJ,EAAMK,KAAKxB,EAACyB,EAAI,CAAA,EAAM,OAAOF,MAKjC,GAHIH,GACAD,EAAMK,KAAKxB,EAAC0B,EAAQ,CAAA,EAAM,aAE1BP,EAAMQ,OAAS,EAAG,CAClB,MAAMC,EAAY,EAAIT,EAAMQ,OAC5B,IAAK,IAAIJ,EAAI,EAAGA,EAAIK,EAAWL,IAC3BJ,EAAMK,KAAKxB,EAAC6B,EAAS,CAAA,EAAM,YAAYN,KAE/C,CAGA,OAAOvB,EAAC8B,EAAe,CAAA5B,SAAEiB,EAAMY,MAAM,EAAG,IAAqB,EA8BxCC,MAELhC,EAACiC,EAAe,CAAA/B,SACZF,EAACkC,EAAY,CACTC,KAAK,SACL9C,QAASM,EAAW,aACRF,EAAeS,SAE1BV,aAQjC"}
+{"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\n// @catalog\n/**\n * A fixed top banner that promotes a mobile app and links to its store listing.\n *\n * Use `SmartAppBanner` to invite users to install or open the native app.\n * @keywords app store, banner, mobile app, promotion\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,mBAwLJ,MAAMC,EAAiBC,EAAMC,YArLpC,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,42 +1,21 @@
-export declare const SmartAppBannerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $offset: number;
-    $isAnimated: boolean;
-}>> & 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>> & 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>> & 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>> & 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>> & 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>> & 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>> & 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>> & string;
-export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<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<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const RatingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<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>> & 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>> & 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>> & 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;
-    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;
-`,u=t.div`
-    flex: 1;
-    display: flex;
-    align-items: center;
-    padding: 0.5rem 1rem 0.5rem 0.25rem;
-    cursor: pointer;
-`,v=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,u as ProceedContainer,W as RatingContainer,$ as SmartAppBannerContainer,z as Star,X as StarEmpty,A as StarHalf,M as StyledButton,v as TextContainer,S as Title};
+import"./smart-app-banner.styles_r6yjq9.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",q="dp7x5g3",w="r1gggq6r",x="sda01s1";export{d as bannerIcon,b as button,i as buttonContainer,c as cross,q as description,e as dismissButton,p as dismissContainer,m as proceedContainer,w as ratingContainer,s as smartAppBannerContainer,a as smartAppBannerContainerAnimated,n as smartAppBannerContainerDark,t as smartAppBannerContainerLight,x 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;\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    & > 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":"6EAIO,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,WAQNC,EAAK,UAQLC,EAAW,UAIXC,EAAe,WAMfC,EAAQ"}

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

@@ -0,0 +1,16 @@
+@layer fds{.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;}.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/smart-app-banner/types.d.ts

@@ -1,18 +1,75 @@
+/**
+ * Props for the `SmartAppBanner` component.
+ */
 export interface SmartAppBannerProps {
+    /**
+     * Controls whether the banner is visible.
+     */
     show: boolean;
+    /**
+     * Destination URL opened in a new tab when the banner or CTA button is clicked.
+     */
     href: string;
+    /**
+     * Text, labels, and rating content rendered inside the banner.
+     */
     content: SmartAppBannerContentProps;
+    /**
+     * Top offset in pixels applied to the banner's position.
+     *
+     * @default 0
+     */
     offset?: number | undefined;
+    /**
+     * URL of the app icon image displayed in the banner.
+     *
+     * @default "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png"
+     */
     icon?: string | undefined;
+    /**
+     * Applies a slide-in entrance animation to the banner.
+     *
+     * @default false
+     */
     animated?: boolean | undefined;
     className?: string | undefined;
+    /**
+     * Called when the user clicks the dismiss button.
+     */
     onDismiss: () => void;
+    /**
+     * Called when the user clicks on the banner or the CTA button.
+     */
     onClick?: (() => void) | undefined;
 }
+/**
+ * Text content and accessible labels rendered inside `SmartAppBanner`.
+ */
 export interface SmartAppBannerContentProps {
+    /**
+     * Primary heading text, typically the app name.
+     */
     title: string;
+    /**
+     * Label text for the CTA button.
+     */
     buttonLabel: string;
-    buttonAriaLabel: string;
+    /**
+     * Alt text for the app icon image.
+     *
+     * @default ""
+     */
+    iconAriaLabel?: string | undefined;
+    /**
+     * Accessible label for the CTA button. Falls back to `buttonLabel` when omitted.
+     */
+    buttonAriaLabel?: string | undefined;
+    /**
+     * Secondary description text displayed beneath the title.
+     */
     message?: string | undefined;
+    /**
+     * App store rating rendered as up to 5 star icons.
+     */
     numberOfStars: number;
 }

package/tab/tab-context-provider.d.ts

@@ -0,0 +1,5 @@
+import type { TabContextProps } from "./types";
+export declare const TabContextProvider: {
+    ({ children, currentActive: currentActiveIndex, initialActive, onTabClick, }: TabContextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/tab/tab-context-provider.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import{useState as t,useMemo as r,useEffect as i}from"react";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as n}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{TabContext as o}from"./tab-context.js";const a=({children:a,currentActive:c,initialActive:l=0,onTabClick:s})=>{const[m,d]=t(null!=c?c:l),[p,u]=t([]),b=n(),j=r((()=>({instanceId:b,tabLinks:p,currentActiveIndex:m,setCurrentActiveIndex:d,setTabLinks:u,controlledMode:"number"==typeof c,onTabClick:s,isContextProvided:!0})),[m,c,b,s,p]);return i((()=>{"number"==typeof c&&d(c)}),[c]),e(o.Provider,{value:j,children:a})};a.displayName="Tab.Context";export{a as TabContextProvider};
+//# sourceMappingURL=tab-context-provider.js.map

package/tab/tab-context-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-context-provider.js","sources":["../../src/tab/tab-context-provider.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\n\nimport { useId } from \"../util\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport type { TabContextProps } from \"./types\";\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\nexport const TabContextProvider = ({\n    children,\n    currentActive: currentActiveIndex,\n    initialActive = 0,\n    onTabClick,\n}: TabContextProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [currentActive, setCurrentActive] = useState<number>(\n        currentActiveIndex ?? initialActive\n    );\n    const [tabLinks, setTabLinks] = useState<TabLinkProps[]>([]);\n    const instanceId = useId();\n\n    const tabContextValue = useMemo(\n        () => ({\n            instanceId,\n            tabLinks,\n            currentActiveIndex: currentActive,\n            setCurrentActiveIndex: setCurrentActive,\n            setTabLinks,\n            controlledMode: typeof currentActiveIndex === \"number\",\n            onTabClick,\n            isContextProvided: true,\n        }),\n        [currentActive, currentActiveIndex, instanceId, onTabClick, tabLinks]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (typeof currentActiveIndex === \"number\") {\n            setCurrentActive(currentActiveIndex);\n        }\n    }, [currentActiveIndex]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <TabContext.Provider value={tabContextValue}>\n            {children}\n        </TabContext.Provider>\n    );\n};\n\nTabContextProvider.displayName = \"Tab.Context\";\n"],"names":["TabContextProvider","children","currentActive","currentActiveIndex","initialActive","onTabClick","setCurrentActive","useState","tabLinks","setTabLinks","instanceId","useId","tabContextValue","useMemo","setCurrentActiveIndex","controlledMode","isContextProvided","useEffect","_jsx","TabContext","Provider","value","displayName"],"mappings":"wVAUO,MAAMA,EAAqB,EAC9BC,WACAC,cAAeC,EACfC,gBAAgB,EAChBC,iBAKA,MAAOH,EAAeI,GAAoBC,EACtCJ,QAAAA,EAAsBC,IAEnBI,EAAUC,GAAeF,EAAyB,IACnDG,EAAaC,IAEbC,EAAkBC,GACpB,KAAA,CACIH,aACAF,WACAL,mBAAoBD,EACpBY,sBAAuBR,EACvBG,cACAM,eAA8C,iBAAvBZ,EACvBE,aACAW,mBAAmB,KAEvB,CAACd,EAAeC,EAAoBO,EAAYL,EAAYG,IAehE,OATAS,GAAU,KAC4B,iBAAvBd,GACPG,EAAiBH,EACrB,GACD,CAACA,IAMAe,EAACC,EAAWC,SAAQ,CAACC,MAAOT,EAAeX,SACtCA,GACiB,EAI9BD,EAAmBsB,YAAc"}

package/tab/tab-context.d.ts

@@ -3,9 +3,14 @@ import React from "react";
 import type { TabItemProps } from "./types";
 export type TabLinkProps = Pick<TabItemProps, "title" | "width" | "titleAddon">;
 interface TabContextProps {
+    instanceId: string;
     currentActiveIndex: number;
     tabLinks: TabLinkProps[];
     setCurrentActiveIndex: Dispatch<SetStateAction<number>>;
+    setTabLinks: (links: TabLinkProps[]) => void;
+    controlledMode: boolean;
+    onTabClick?: ((title: string, index: number) => void) | undefined;
+    isContextProvided: boolean;
 }
 export declare const noop: () => void;
 export declare const TabContext: React.Context<TabContextProps>;

package/tab/tab-context.js

@@ -1,2 +1,2 @@
-import t from"react";const e=()=>{},r=t.createContext({currentActiveIndex:0,tabLinks:[],setCurrentActiveIndex:e});export{r as TabContext,e as noop};
+import e from"react";const t=()=>{},n=e.createContext({instanceId:"",currentActiveIndex:0,tabLinks:[],setCurrentActiveIndex:t,setTabLinks:t,controlledMode:!1,isContextProvided:!1});export{n as TabContext,t as noop};
 //# sourceMappingURL=tab-context.js.map

package/tab/tab-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-context.js","sources":["../../src/tab/tab-context.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from \"react\";\nimport React from \"react\";\n\nimport type { TabItemProps } from \"./types\";\n\nexport type TabLinkProps = Pick<TabItemProps, \"title\" | \"width\" | \"titleAddon\">;\n\ninterface TabContextProps {\n    currentActiveIndex: number;\n    tabLinks: TabLinkProps[];\n    setCurrentActiveIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport const noop = () => {\n    // does nothing\n};\n\n// =============================================================================\n// CONTEXT\n// =============================================================================\nexport const TabContext = React.createContext<TabContextProps>({\n    currentActiveIndex: 0,\n    tabLinks: [],\n    setCurrentActiveIndex: noop,\n});\n"],"names":["noop","TabContext","React","createContext","currentActiveIndex","tabLinks","setCurrentActiveIndex"],"mappings":"qBAaO,MAAMA,EAAO,OAOPC,EAAaC,EAAMC,cAA+B,CAC3DC,mBAAoB,EACpBC,SAAU,GACVC,sBAAuBN"}
+{"version":3,"file":"tab-context.js","sources":["../../src/tab/tab-context.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from \"react\";\nimport React from \"react\";\n\nimport type { TabItemProps } from \"./types\";\n\nexport type TabLinkProps = Pick<TabItemProps, \"title\" | \"width\" | \"titleAddon\">;\n\ninterface TabContextProps {\n    instanceId: string;\n    currentActiveIndex: number;\n    tabLinks: TabLinkProps[];\n    setCurrentActiveIndex: Dispatch<SetStateAction<number>>;\n    setTabLinks: (links: TabLinkProps[]) => void;\n    controlledMode: boolean;\n    onTabClick?: ((title: string, index: number) => void) | undefined;\n    isContextProvided: boolean;\n}\n\nexport const noop = () => {\n    // does nothing\n};\n\n// =============================================================================\n// CONTEXT\n// =============================================================================\nexport const TabContext = React.createContext<TabContextProps>({\n    instanceId: \"\",\n    currentActiveIndex: 0,\n    tabLinks: [],\n    setCurrentActiveIndex: noop,\n    setTabLinks: noop,\n    controlledMode: false,\n    isContextProvided: false,\n});\n"],"names":["noop","TabContext","React","createContext","instanceId","currentActiveIndex","tabLinks","setCurrentActiveIndex","setTabLinks","controlledMode","isContextProvided"],"mappings":"qBAkBO,MAAMA,EAAO,OAOPC,EAAaC,EAAMC,cAA+B,CAC3DC,WAAY,GACZC,mBAAoB,EACpBC,SAAU,GACVC,sBAAuBP,EACvBQ,YAAaR,EACbS,gBAAgB,EAChBC,mBAAmB"}

package/tab/tab-item.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{useContext as r}from"react";import{TabContext as i}from"./tab-context.js";const n=n=>{var{index:o,children:d,titleAddon:a}=n,l=t(n,["index","children","titleAddon"]);const{currentActiveIndex:c}=r(i);return c===o?e("div",Object.assign({role:"tabpanel",tabIndex:0},l,{children:d})):null};n.displayName="Tab.Item";export{n as TabItem};
+import{__rest as t}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{useContext as r}from"react";import{TabContext as i}from"./tab-context.js";const n=n=>{var{index:a,children:d,titleAddon:l}=n,o=t(n,["index","children","titleAddon"]);const{currentActiveIndex:c,instanceId:m}=r(i);return c===a?e("div",Object.assign({role:"tabpanel","aria-labelledby":`${m}-tab-${a}`,tabIndex:0},o,{children:d})):null};n.displayName="Tab.Item";export{n as TabItem};
 //# sourceMappingURL=tab-item.js.map