@lifesg/react-design-system 4.0.0-alpha.5 → 4.0.0-alpha.6

package/shared/dropdown-list/types.d.ts

@@ -1,14 +1,37 @@
+/**
+ * How overflowing option text is truncated.
+ *
+ * - `"middle"` trims the centre of the text.
+ * - `"end"` trims from the right.
+ */
 export type TruncateType = "middle" | "end";
+/**
+ * Async load state for dropdown items.
+ *
+ * - `"loading"` while fetching.
+ * - `"fail"` on error (shows a call-to-action to retry).
+ * - `"success"` when ready.
+ */
 export type ItemsLoadStateType = "loading" | "fail" | "success";
+/** Controls whether secondary labels render inline or on a new line. */
 export type LabelDisplayType = "inline" | "next-line";
+/**
+ * Visual size variant for the dropdown.
+ *
+ * - `"default"` renders standard height.
+ * - `"small"` renders reduced height.
+ */
 export type DropdownVariantType = "small" | "default";
+/** Runtime context passed to a custom `renderListItem` callback. */
 export interface ListItemRenderArgs {
     selected: boolean;
 }
+/** Display model for a list item with an optional secondary label. */
 export interface ListItemDisplayProps {
     title: string;
     secondaryLabel?: string | undefined;
 }
+/** Overrides for built-in text labels rendered inside a dropdown. */
 export interface DropdownCustomLabelProps {
     searchPlaceholder?: string | undefined;
     noResultsLabel?: string | undefined;
@@ -18,48 +41,49 @@ export interface DropdownCustomLabelProps {
     allSelectedLabel?: string | undefined;
     multiSelectedLabel?: string | undefined;
 }
+/** Props controlling how dropdown items are displayed and rendered. */
 export interface DropdownDisplayProps<T, V> {
-    /** Function to derive value from an item */
+    /** Extracts the comparable value from an option item. */
     valueExtractor?: ((item: T) => V) | undefined;
-    /** Function to derive options display value from an item */
+    /** Extracts the display text for a list item. */
     listExtractor?: ((item: T) => string | ListItemDisplayProps) | undefined;
-    /** Function to render custom component */
+    /** Renders a fully custom element for each list item. */
     renderListItem?: ((item: T, args: ListItemRenderArgs) => JSX.Element) | undefined;
     /**
-     * Function to render a custom call-to-action component at the bottom of the dropdown list.
-     * @param hideOptions - A function that can be called to hide the dropdown list.
-     * @param options - The currently displayed list items in the dropdown list.
-     * @returns A JSX.Element representing the custom call-to-action component.
+     * Renders a custom call-to-action at the bottom of the dropdown list.
+     *
+     * @param hideOptions Callback to programmatically close the dropdown.
+     * @param options The currently displayed list items.
      */
     renderCustomCallToAction?: ((hideOptions: () => void, options: T[]) => JSX.Element) | undefined;
 }
+/** Props controlling the search functionality within a dropdown. */
 export interface DropdownSearchProps<T> {
-    /** Specifying will render a search bar in the dropdown */
+    /** Renders a search bar inside the dropdown when `true`. */
     enableSearch?: boolean | undefined;
-    /** If specified, the default no results display will not be rendered */
+    /** Suppresses the built-in "no results" message when `true`. */
     hideNoResultsDisplay?: boolean | undefined;
-    /** @deprecated use `noResultsDescription` inside `customLabels` */
+    /** @deprecated Use `noResultsDescription` inside `customLabels`. */
     noResultsDescription?: React.ReactNode | undefined;
-    /** @deprecated use `searchPlaceholder` inside `customLabels` */
+    /** @deprecated Use `searchPlaceholder` inside `customLabels`. */
     searchPlaceholder?: string | undefined;
-    /** Custom function to perform search when a user keys in a value in the search input */
+    /** Custom filter function invoked on each keystroke in the search input. */
     searchFunction?: ((searchValue: string) => T[]) | undefined;
+    /** Called when the user types in the search input. */
     onSearch?: (() => void) | undefined;
 }
+/** Internal configuration props for the dropdown list behaviour. */
 export interface DropdownConfigProps {
     multiSelect?: boolean | undefined;
     maxSelectable?: number | undefined;
     customLabels?: DropdownCustomLabelProps | undefined;
-    /**
-     * Used when items are loaded from an api call.
-     * Values: "loading" | "fail" | "success"
-     */
+    /** Async load state driving the loading spinner, error retry, or list render. */
     itemsLoadState?: ItemsLoadStateType | undefined;
-    /** Specifies the truncation type. Truncated text will be replaced with ellipsis. Values: "middle" | "end" */
+    /** How overflowing item text is truncated. */
     itemTruncationType?: TruncateType | undefined;
-    /** Specifies the maximum number of lines visible before the label is truncated for "end" type */
+    /** Maximum visible lines before the label is truncated (applies to `"end"` truncation). */
     itemMaxLines?: number | undefined;
-    /** Specifies the variant type. Small type will have shorter height. Values: "default" | "small" */
+    /** Visual size variant for the dropdown items. */
     variant?: DropdownVariantType | undefined;
 }
 export interface DropdownListProps<T, V> extends DropdownDisplayProps<T, V>, DropdownSearchProps<T>, DropdownConfigProps {
@@ -86,19 +110,27 @@ export interface DropdownListApi {
         preferSelected?: boolean;
     }) => void;
 }
+/** A leaf node in a nested dropdown tree (has no children). */
 export interface NestedDropdownListLeafItem<T> {
     key: string;
     label: string;
     value: T;
     subItems?: never | undefined;
 }
+/** A parent node in a nested dropdown tree (has child `subItems`). */
 export interface NestedDropdownListParentItem<T> {
     key: string;
     label: string;
     value: T;
     subItems: NestedDropdownListItemProps<T>[];
 }
+/**
+ * A single node in a nested dropdown tree.
+ *
+ * Presence of `subItems` discriminates parent nodes from leaf nodes.
+ */
 export type NestedDropdownListItemProps<T> = NestedDropdownListLeafItem<T> | NestedDropdownListParentItem<T>;
+/** Internal enriched representation of a nested dropdown item with computed tree state. */
 export interface NestedDropdownListLocalItem<T> {
     item: NestedDropdownListItemProps<T>;
     index: number;
@@ -117,6 +149,7 @@ export interface NestedDropdownListLocalItem<T> {
     matched: boolean;
     hasMatchedSubItems: boolean;
 }
+/** Initial expand/collapse state for nested dropdown items when the list opens. */
 export type ExpandMode = "default" | "expand" | "collapse";
 export interface NestedDropdownListProps<T> extends DropdownSearchProps<NestedDropdownListItemProps<T>>, DropdownConfigProps {
     listItems: NestedDropdownListItemProps<T>[];

package/shared/dropdown-wrapper/types.d.ts

@@ -19,4 +19,10 @@ export interface LabelContainerProps {
     disabled?: boolean | undefined;
     children: React.ReactNode;
 }
+/**
+ * Horizontal alignment of the dropdown relative to its trigger.
+ *
+ * - `"left"` left-aligns the dropdown with the trigger.
+ * - `"right"` right-aligns the dropdown with the trigger.
+ */
 export type DropdownAlignmentType = "left" | "right";

package/sidenav/sidenav.d.ts

@@ -1,7 +1,17 @@
 import type { SidenavProps } from "./types";
+/**
+ * A fixed sidebar navigation component for multi-level page navigation.
+ *
+ * Use `Sidenav` to present a persistent icon-based navigation rail with
+ * optional menu drawers.
+ */
 export declare const Sidenav: (({ fixed, children, "aria-label": ariaLabel, className, ...otherProps }: SidenavProps) => import("react/jsx-runtime").JSX.Element) & {
+    /** Renders a group of navigation items, optionally separated by a divider. */
     Group: ({ separator, children, className, ...otherProps }: import("./types").SidenavGroupProps) => import("react/jsx-runtime").JSX.Element;
+    /** Renders a single icon-and-label navigation entry that can open a menu drawer. */
     Item: ({ children, icon, title, onClick, selected, className, ...otherProps }: import("./types").SidenavItemProps) => import("react/jsx-runtime").JSX.Element;
+    /** Renders a menu item inside an item's drawer, with optional collapsible sub-items. */
     DrawerItem: ({ id, title, onClick, children, className, ...otherProps }: import("./types").SidenavDrawerItemProps) => import("react/jsx-runtime").JSX.Element;
+    /** Renders a leaf-level navigation entry inside a `Sidenav.DrawerItem`. */
     DrawerSubitem: ({ id, title, onClick, className, ...otherProps }: import("./types").SidenavDrawerSubitemProps) => import("react/jsx-runtime").JSX.Element;
 };

package/sidenav/sidenav.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav.js","sources":["../../src/sidenav/sidenav.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\n\nimport { useId } from \"../util\";\nimport * as styles from \"./sidenav.styles\";\nimport type { SidenavContextItem } from \"./sidenav-context\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport { SidenavDrawerItem } from \"./sidenav-drawer-item\";\nimport { SidenavDrawerSubitem } from \"./sidenav-drawer-subitem\";\nimport { SidenavGroup } from \"./sidenav-group\";\nimport { SidenavItem } from \"./sidenav-item\";\nimport type { SidenavProps } from \"./types\";\n\nconst SidenavBase = ({\n    fixed = true,\n    children,\n    \"aria-label\": ariaLabel = \"Sidebar\",\n    className,\n    ...otherProps\n}: SidenavProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const menuRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n\n    const [currentItem, setCurrentItem] = useState<\n        SidenavContextItem | undefined\n    >(undefined);\n    const [selectedItem, setSelectedItem] = useState<\n        SidenavContextItem | undefined\n    >(undefined);\n    const [previouslySelectedItemId, setPreviouslySelectedItemId] = useState<\n        string | undefined\n    >(undefined);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <SidenavContext.Provider\n            value={{\n                internalId,\n                menuRef,\n                currentItem,\n                selectedItem,\n                previouslySelectedItemId,\n                setCurrentItem,\n                setSelectedItem,\n                setPreviouslySelectedItemId,\n            }}\n        >\n            <div\n                ref={wrapperRef}\n                {...otherProps}\n                className={clsx(\n                    styles.wrapper,\n                    fixed && styles.wrapperFixed,\n                    className\n                )}\n            >\n                <nav\n                    ref={menuRef}\n                    aria-label={ariaLabel}\n                    className={clsx(\n                        styles.containerBase,\n                        styles.desktopContainer\n                    )}\n                >\n                    {children}\n                </nav>\n                {/** NOTE: Since mobile view not supported yet, children will not be rendered */}\n                <nav\n                    className={clsx(\n                        styles.containerBase,\n                        styles.mobileContainer\n                    )}\n                ></nav>\n            </div>\n        </SidenavContext.Provider>\n    );\n};\n\nexport const Sidenav = Object.assign(SidenavBase, {\n    Group: SidenavGroup,\n    Item: SidenavItem,\n    DrawerItem: SidenavDrawerItem,\n    DrawerSubitem: SidenavDrawerSubitem,\n});\n"],"names":["Sidenav","Object","assign","_a","fixed","children","ariaLabel","className","otherProps","__rest","wrapperRef","useRef","menuRef","internalId","useId","currentItem","setCurrentItem","useState","undefined","selectedItem","setSelectedItem","previouslySelectedItemId","setPreviouslySelectedItemId","_jsx","SidenavContext","Provider","value","_jsxs","ref","clsx","styles.wrapper","styles.wrapperFixed","styles.containerBase","styles.desktopContainer","styles.mobileContainer","Group","SidenavGroup","Item","SidenavItem","DrawerItem","SidenavDrawerItem","DrawerSubitem","SidenavDrawerSubitem"],"mappings":"6vBAaA,MAuEaA,EAAUC,OAAOC,QAvETC,IAAA,IAAAC,MACjBA,GAAQ,EAAIC,SACZA,EACA,aAAcC,EAAY,UAASC,UACnCA,GAASJ,EACNK,EAAUC,EAAAN,EALI,+CAUjB,MAAMO,EAAaC,EAAuB,MACpCC,EAAUD,EAAuB,MACjCE,EAAaC,KAEZC,EAAaC,GAAkBC,OAEpCC,IACKC,EAAcC,GAAmBH,OAEtCC,IACKG,EAA0BC,GAA+BL,OAE9DC,GAKF,OACIK,EAACC,EAAeC,SAAQ,CACpBC,MAAO,CACHb,aACAD,UACAG,cACAI,eACAE,2BACAL,iBACAI,kBACAE,+BACHjB,SAEDsB,EAAA,MAAA1B,OAAAC,OAAA,CACI0B,IAAKlB,GACDF,EAAU,CACdD,UAAWsB,EACPC,EACA1B,GAAS2B,EACTxB,GACHF,SAAA,CAEDkB,EAAA,MAAA,CACIK,IAAKhB,EAAO,aACAN,EACZC,UAAWsB,EACPG,EACAC,GACH5B,SAEAA,IAGLkB,EAAA,MAAA,CACIhB,UAAWsB,EACPG,EACAE,UAIU,GAIgB,CAC9CC,MAAOC,EACPC,KAAMC,EACNC,WAAYC,EACZC,cAAeC"}
+{"version":3,"file":"sidenav.js","sources":["../../src/sidenav/sidenav.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\n\nimport { useId } from \"../util\";\nimport * as styles from \"./sidenav.styles\";\nimport type { SidenavContextItem } from \"./sidenav-context\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport { SidenavDrawerItem } from \"./sidenav-drawer-item\";\nimport { SidenavDrawerSubitem } from \"./sidenav-drawer-subitem\";\nimport { SidenavGroup } from \"./sidenav-group\";\nimport { SidenavItem } from \"./sidenav-item\";\nimport type { SidenavProps } from \"./types\";\n\nconst SidenavBase = ({\n    fixed = true,\n    children,\n    \"aria-label\": ariaLabel = \"Sidebar\",\n    className,\n    ...otherProps\n}: SidenavProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const menuRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n\n    const [currentItem, setCurrentItem] = useState<\n        SidenavContextItem | undefined\n    >(undefined);\n    const [selectedItem, setSelectedItem] = useState<\n        SidenavContextItem | undefined\n    >(undefined);\n    const [previouslySelectedItemId, setPreviouslySelectedItemId] = useState<\n        string | undefined\n    >(undefined);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <SidenavContext.Provider\n            value={{\n                internalId,\n                menuRef,\n                currentItem,\n                selectedItem,\n                previouslySelectedItemId,\n                setCurrentItem,\n                setSelectedItem,\n                setPreviouslySelectedItemId,\n            }}\n        >\n            <div\n                ref={wrapperRef}\n                {...otherProps}\n                className={clsx(\n                    styles.wrapper,\n                    fixed && styles.wrapperFixed,\n                    className\n                )}\n            >\n                <nav\n                    ref={menuRef}\n                    aria-label={ariaLabel}\n                    className={clsx(\n                        styles.containerBase,\n                        styles.desktopContainer\n                    )}\n                >\n                    {children}\n                </nav>\n                {/** NOTE: Since mobile view not supported yet, children will not be rendered */}\n                <nav\n                    className={clsx(\n                        styles.containerBase,\n                        styles.mobileContainer\n                    )}\n                ></nav>\n            </div>\n        </SidenavContext.Provider>\n    );\n};\n\n/**\n * A fixed sidebar navigation component for multi-level page navigation.\n *\n * Use `Sidenav` to present a persistent icon-based navigation rail with\n * optional menu drawers.\n */\nexport const Sidenav = Object.assign(SidenavBase, {\n    /** Renders a group of navigation items, optionally separated by a divider. */\n    Group: SidenavGroup,\n    /** Renders a single icon-and-label navigation entry that can open a menu drawer. */\n    Item: SidenavItem,\n    /** Renders a menu item inside an item's drawer, with optional collapsible sub-items. */\n    DrawerItem: SidenavDrawerItem,\n    /** Renders a leaf-level navigation entry inside a `Sidenav.DrawerItem`. */\n    DrawerSubitem: SidenavDrawerSubitem,\n});\n"],"names":["Sidenav","Object","assign","_a","fixed","children","ariaLabel","className","otherProps","__rest","wrapperRef","useRef","menuRef","internalId","useId","currentItem","setCurrentItem","useState","undefined","selectedItem","setSelectedItem","previouslySelectedItemId","setPreviouslySelectedItemId","_jsx","SidenavContext","Provider","value","_jsxs","ref","clsx","styles.wrapper","styles.wrapperFixed","styles.containerBase","styles.desktopContainer","styles.mobileContainer","Group","SidenavGroup","Item","SidenavItem","DrawerItem","SidenavDrawerItem","DrawerSubitem","SidenavDrawerSubitem"],"mappings":"6vBAaA,MA6EaA,EAAUC,OAAOC,QA7ETC,IAAA,IAAAC,MACjBA,GAAQ,EAAIC,SACZA,EACA,aAAcC,EAAY,UAASC,UACnCA,GAASJ,EACNK,EAAUC,EAAAN,EALI,+CAUjB,MAAMO,EAAaC,EAAuB,MACpCC,EAAUD,EAAuB,MACjCE,EAAaC,KAEZC,EAAaC,GAAkBC,OAEpCC,IACKC,EAAcC,GAAmBH,OAEtCC,IACKG,EAA0BC,GAA+BL,OAE9DC,GAKF,OACIK,EAACC,EAAeC,SAAQ,CACpBC,MAAO,CACHb,aACAD,UACAG,cACAI,eACAE,2BACAL,iBACAI,kBACAE,+BACHjB,SAEDsB,EAAA,MAAA1B,OAAAC,OAAA,CACI0B,IAAKlB,GACDF,EAAU,CACdD,UAAWsB,EACPC,EACA1B,GAAS2B,EACTxB,GACHF,SAAA,CAEDkB,EAAA,MAAA,CACIK,IAAKhB,EAAO,aACAN,EACZC,UAAWsB,EACPG,EACAC,GACH5B,SAEAA,IAGLkB,EAAA,MAAA,CACIhB,UAAWsB,EACPG,EACAE,UAIU,GAUgB,CAE9CC,MAAOC,EAEPC,KAAMC,EAENC,WAAYC,EAEZC,cAAeC"}

package/sidenav/types.d.ts

@@ -3,59 +3,108 @@ interface SidenavBaseProps {
     "data-testid"?: string | undefined;
     className?: string | undefined;
 }
+/**
+ * Props for the `Sidenav` component.
+ */
 export interface SidenavProps extends SidenavBaseProps {
-    /** Specifies if sidenav should be fixed to left. Defaults to true */
+    /**
+     * Pins the sidebar to the left edge of the viewport while the page scrolls.
+     *
+     * @default true
+     */
     fixed?: boolean | undefined;
     /**
-     * <Sidenav.Group>
-     *   ...
-     * </Sidenav.Group>
+     * Navigation groups and items. Accepts `Sidenav.Group` elements.
      */
     children: React.ReactNode;
-    /** the accessible label */
+    /**
+     * Accessible label announced for the sidebar navigation landmark.
+     *
+     * @default "Sidebar"
+     */
     "aria-label"?: string | undefined;
 }
+/**
+ * Props for the `Sidenav.Group` sub-component.
+ */
 export interface SidenavGroupProps extends SidenavBaseProps {
-    /** Specifies if bottom divider will be rendered */
+    /**
+     * Renders a horizontal divider after the last item in the group.
+     */
     separator?: boolean | undefined;
     /**
-     * <Sidenav.Item>
-     *   ...
-     * </Sidenav.Item>
+     * Navigation items within the group. Accepts `Sidenav.Item` elements.
      */
     children: React.ReactNode;
-    /** the accessible label */
+    /**
+     * Accessible label for this navigation group.
+     */
     "aria-label"?: string | undefined;
 }
+/**
+ * Props for the `Sidenav.Item` sub-component.
+ */
 export interface SidenavItemProps extends SidenavBaseProps {
+    /**
+     * Label displayed below the icon.
+     */
     title: string;
-    /** The icon to be rendered */
+    /**
+     * Icon displayed above the title.
+     */
     icon: React.ReactNode;
-    /** Indicates if an item is initially selected */
+    /**
+     * Sets the item as initially selected on mount.
+     */
     selected?: boolean | undefined;
-    /** Called when item is selected */
+    /**
+     * Called when the item is activated and it has no drawer children. When
+     * `children` are provided, clicking opens the drawer without invoking this
+     * callback.
+     *
+     * @param id The item's resolved `id` value.
+     */
     onClick?: ((id: string | undefined) => void) | undefined;
     /**
-     * <Sidenav.DrawerItem>
-     *   ...
-     * </Sidenav.DrawerItem>
+     * Drawer content displayed to the right of the sidebar when the item is
+     * active. Accepts `Sidenav.DrawerItem` elements.
      */
     children?: React.ReactNode | undefined;
 }
+/**
+ * Props for the `Sidenav.DrawerItem` sub-component.
+ */
 export interface SidenavDrawerItemProps extends SidenavBaseProps {
+    /**
+     * The displayed label.
+     */
     title: string;
     /**
-     * <Sidenav.DrawerSubitem>
-     *   ...
-     * </Sidenav.DrawerSubitem>
+     * Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem`
+     * elements. When provided, clicking toggles the collapsed/expanded state
+     * instead of invoking `onClick`.
      */
     children?: React.ReactNode | undefined;
-    /** Called when item is selected */
+    /**
+     * Called when the item is activated and it has no sub-item children.
+     *
+     * @param id The item's `id` value.
+     */
     onClick?: ((id: string | undefined) => void) | undefined;
 }
+/**
+ * Props for the `Sidenav.DrawerSubitem` sub-component.
+ */
 export interface SidenavDrawerSubitemProps extends SidenavBaseProps {
+    /**
+     * The displayed label.
+     */
     title: string;
-    /** Called when item is selected */
+    /**
+     * Called when the sub-item is activated.
+     *
+     * @param id The sub-item's `id` value.
+     */
     onClick?: ((id: string | undefined) => void) | undefined;
 }
 export {};

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

@@ -1,4 +1,10 @@
 import type { SingpassButtonProps } from "./types";
+/**
+ * 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.
+ */
 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;

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

@@ -1 +1 @@
-{"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\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,6BAE9BG,EAAiBf,OAAOC,OAAOZ,EAAoB,CAE5D2B,QAAS1B,EAAWoB,GAEpBO,MAAO3B,EAAWuB,GAElBK,MAAO5B,EAAWwB"}
+{"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/**\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 */\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,6BAQ9BG,EAAiBf,OAAOC,OAAOZ,EAAoB,CAE5D2B,QAAS1B,EAAWoB,GAEpBO,MAAO3B,EAAWuB,GAElBK,MAAO5B,EAAWwB"}

package/singpass-button/types.d.ts

@@ -1,11 +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;
-    /** The size type of the button. Values: "default" | "small" | "large" */
+    /**
+     * 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,8 @@
 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.
+ */
 export declare const SmartAppBanner: (props: SmartAppBannerProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

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 { 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"}
+{"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/**\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 */\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,mBAsLJ,MAAMC,EAAiBC,EAAMC,YAnLpC,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/types.d.ts

@@ -1,19 +1,73 @@
+/**
+ * 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.
+     */
     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;
+    /**
+     * 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.d.ts

@@ -1,8 +1,15 @@
 import type { TabProps } from "./types";
+/**
+ * A tabbed-panel layout that switches visible content by selecting a tab link.
+ *
+ * Use `Tab` to organise content into labelled panels where only one panel is
+ * visible at a time. Compose with `Tab.Item` to define each panel.
+ */
 export declare const Tab: {
     ({ children, currentActive: currentActiveIndex, initialActive, onTabClick, "data-testid": testId, className, fullWidthIndicatorLine, fadeColor, ...otherProps }: TabProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
+    /** Renders an individual content panel within a `Tab`. */
     Item: {
         ({ index, children, titleAddon: _titleAddon, ...otherProps }: import("./tab-item").TabItemComponentProps): import("react/jsx-runtime").JSX.Element | null;
         displayName: string;

package/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../src/tab/tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ReactElement } from \"react\";\nimport { Children, cloneElement, useEffect, useMemo, useState } from \"react\";\n\nimport * as styles from \"./tab.styles\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport { TabItem } from \"./tab-item\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport type { TabItemProps, TabProps } from \"./types\";\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\nconst TabBase = ({\n    children,\n    currentActive: currentActiveIndex,\n    initialActive = 0,\n    onTabClick,\n    \"data-testid\": testId,\n    className,\n    fullWidthIndicatorLine,\n    fadeColor,\n    ...otherProps\n}: TabProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [currentActive, setCurrentActive] = useState<number>(\n        currentActiveIndex || initialActive\n    );\n\n    const tabLinks = useMemo(() => {\n        const validChildren = Children.toArray(children).filter(\n            Boolean\n        ) as ReactElement<TabItemProps>[];\n\n        return validChildren.map((child) => {\n            return {\n                title: child.props.title,\n                width: child.props.width,\n                titleAddon: child.props.titleAddon,\n            };\n        }) as TabLinkProps[];\n    }, [children]);\n\n    const tabContextValue = useMemo(\n        () => ({\n            tabLinks,\n            currentActiveIndex: currentActive,\n            setCurrentActiveIndex: setCurrentActive,\n        }),\n        [currentActive, 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    const renderChildren = () => {\n        const validChildren = Children.toArray(children).filter(Boolean);\n\n        return validChildren.map((child, index) => {\n            const element = child as ReactElement<TabItemProps>;\n\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            return cloneElement(child as ReactElement<any>, {\n                key: element.key ?? element.props.title,\n                index,\n            });\n        });\n    };\n\n    return (\n        <div\n            data-testid={testId}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <TabContext.Provider value={tabContextValue}>\n                <TabLinkChain\n                    controlledMode={typeof currentActiveIndex === \"number\"}\n                    onTabClick={onTabClick}\n                    data-testid={`${testId}-tabs`}\n                    fullWidthIndicatorLine={fullWidthIndicatorLine}\n                    fadeColor={fadeColor}\n                />\n                {renderChildren()}\n            </TabContext.Provider>\n        </div>\n    );\n};\n\nTabBase.displayName = \"Tab\";\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport const Tab = Object.assign(TabBase, {\n    Item: TabItem,\n});\n"],"names":["TabBase","_a","children","currentActive","currentActiveIndex","initialActive","onTabClick","testId","className","fullWidthIndicatorLine","fadeColor","otherProps","__rest","setCurrentActive","useState","tabLinks","useMemo","Children","toArray","filter","Boolean","map","child","title","props","width","titleAddon","tabContextValue","setCurrentActiveIndex","useEffect","_jsx","Object","assign","clsx","styles.wrapper","_jsxs","TabContext","Provider","value","TabLinkChain","controlledMode","index","element","cloneElement","key","displayName","Tab","Item","TabItem"],"mappings":"qYAcA,MAAMA,EAAWC,QAAAC,SACbA,EACAC,cAAeC,EAAkBC,cACjCA,EAAgB,EAACC,WACjBA,EACA,cAAeC,EAAMC,UACrBA,EAASC,uBACTA,EAAsBC,UACtBA,GAAST,EACNU,EAAUC,EAAAX,EATA,CAAA,WAAA,gBAAA,gBAAA,aAAA,cAAA,YAAA,yBAAA,cAcb,MAAOE,EAAeU,GAAoBC,EACtCV,GAAsBC,GAGpBU,EAAWC,GAAQ,IACCC,EAASC,QAAQhB,GAAUiB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAACxB,IAEEyB,EAAkBX,GACpB,KAAA,CACID,WACAX,mBAAoBD,EACpByB,sBAAuBf,KAE3B,CAACV,EAAeY,IAMpBc,GAAU,KAC4B,iBAAvBzB,GACPS,EAAiBT,EACrB,GACD,CAACA,IAmBJ,OACI0B,EAAA,MAAAC,OAAAC,OAAA,CAAA,cACiBzB,EACbC,UAAWyB,EAAKC,EAAgB1B,IAC5BG,EAAU,CAAAT,SAEdiC,EAACC,EAAWC,SAAQ,CAACC,MAAOX,EAAezB,SAAA,CACvC4B,EAACS,EAAY,CACTC,eAA8C,iBAAvBpC,EACvBE,WAAYA,EAAU,cACT,GAAGC,SAChBE,uBAAwBA,EACxBC,UAAWA,IAzBDO,EAASC,QAAQhB,GAAUiB,OAAOC,SAEnCC,KAAI,CAACC,EAAOmB,WAC7B,MAAMC,EAAUpB,EAGhB,OAAOqB,EAAarB,EAA4B,CAC5CsB,YAAK3C,EAAAyC,EAAQE,mBAAOF,EAAQlB,MAAMD,MAClCkB,SACF,SAoBA,EAIdzC,EAAQ6C,YAAc,YAKTC,EAAMf,OAAOC,OAAOhC,EAAS,CACtC+C,KAAMC"}
+{"version":3,"file":"tab.js","sources":["../../src/tab/tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ReactElement } from \"react\";\nimport { Children, cloneElement, useEffect, useMemo, useState } from \"react\";\n\nimport * as styles from \"./tab.styles\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport { TabItem } from \"./tab-item\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport type { TabItemProps, TabProps } from \"./types\";\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\nconst TabBase = ({\n    children,\n    currentActive: currentActiveIndex,\n    initialActive = 0,\n    onTabClick,\n    \"data-testid\": testId,\n    className,\n    fullWidthIndicatorLine,\n    fadeColor,\n    ...otherProps\n}: TabProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [currentActive, setCurrentActive] = useState<number>(\n        currentActiveIndex || initialActive\n    );\n\n    const tabLinks = useMemo(() => {\n        const validChildren = Children.toArray(children).filter(\n            Boolean\n        ) as ReactElement<TabItemProps>[];\n\n        return validChildren.map((child) => {\n            return {\n                title: child.props.title,\n                width: child.props.width,\n                titleAddon: child.props.titleAddon,\n            };\n        }) as TabLinkProps[];\n    }, [children]);\n\n    const tabContextValue = useMemo(\n        () => ({\n            tabLinks,\n            currentActiveIndex: currentActive,\n            setCurrentActiveIndex: setCurrentActive,\n        }),\n        [currentActive, 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    const renderChildren = () => {\n        const validChildren = Children.toArray(children).filter(Boolean);\n\n        return validChildren.map((child, index) => {\n            const element = child as ReactElement<TabItemProps>;\n\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            return cloneElement(child as ReactElement<any>, {\n                key: element.key ?? element.props.title,\n                index,\n            });\n        });\n    };\n\n    return (\n        <div\n            data-testid={testId}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <TabContext.Provider value={tabContextValue}>\n                <TabLinkChain\n                    controlledMode={typeof currentActiveIndex === \"number\"}\n                    onTabClick={onTabClick}\n                    data-testid={`${testId}-tabs`}\n                    fullWidthIndicatorLine={fullWidthIndicatorLine}\n                    fadeColor={fadeColor}\n                />\n                {renderChildren()}\n            </TabContext.Provider>\n        </div>\n    );\n};\n\nTabBase.displayName = \"Tab\";\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\n/**\n * A tabbed-panel layout that switches visible content by selecting a tab link.\n *\n * Use `Tab` to organise content into labelled panels where only one panel is\n * visible at a time. Compose with `Tab.Item` to define each panel.\n */\nexport const Tab = Object.assign(TabBase, {\n    /** Renders an individual content panel within a `Tab`. */\n    Item: TabItem,\n});\n"],"names":["TabBase","_a","children","currentActive","currentActiveIndex","initialActive","onTabClick","testId","className","fullWidthIndicatorLine","fadeColor","otherProps","__rest","setCurrentActive","useState","tabLinks","useMemo","Children","toArray","filter","Boolean","map","child","title","props","width","titleAddon","tabContextValue","setCurrentActiveIndex","useEffect","_jsx","Object","assign","clsx","styles.wrapper","_jsxs","TabContext","Provider","value","TabLinkChain","controlledMode","index","element","cloneElement","key","displayName","Tab","Item","TabItem"],"mappings":"qYAcA,MAAMA,EAAWC,QAAAC,SACbA,EACAC,cAAeC,EAAkBC,cACjCA,EAAgB,EAACC,WACjBA,EACA,cAAeC,EAAMC,UACrBA,EAASC,uBACTA,EAAsBC,UACtBA,GAAST,EACNU,EAAUC,EAAAX,EATA,CAAA,WAAA,gBAAA,gBAAA,aAAA,cAAA,YAAA,yBAAA,cAcb,MAAOE,EAAeU,GAAoBC,EACtCV,GAAsBC,GAGpBU,EAAWC,GAAQ,IACCC,EAASC,QAAQhB,GAAUiB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAACxB,IAEEyB,EAAkBX,GACpB,KAAA,CACID,WACAX,mBAAoBD,EACpByB,sBAAuBf,KAE3B,CAACV,EAAeY,IAMpBc,GAAU,KAC4B,iBAAvBzB,GACPS,EAAiBT,EACrB,GACD,CAACA,IAmBJ,OACI0B,EAAA,MAAAC,OAAAC,OAAA,CAAA,cACiBzB,EACbC,UAAWyB,EAAKC,EAAgB1B,IAC5BG,EAAU,CAAAT,SAEdiC,EAACC,EAAWC,SAAQ,CAACC,MAAOX,EAAezB,SAAA,CACvC4B,EAACS,EAAY,CACTC,eAA8C,iBAAvBpC,EACvBE,WAAYA,EAAU,cACT,GAAGC,SAChBE,uBAAwBA,EACxBC,UAAWA,IAzBDO,EAASC,QAAQhB,GAAUiB,OAAOC,SAEnCC,KAAI,CAACC,EAAOmB,WAC7B,MAAMC,EAAUpB,EAGhB,OAAOqB,EAAarB,EAA4B,CAC5CsB,YAAK3C,EAAAyC,EAAQE,mBAAOF,EAAQlB,MAAMD,MAClCkB,SACF,SAoBA,EAIdzC,EAAQ6C,YAAc,YAWTC,EAAMf,OAAOC,OAAOhC,EAAS,CAEtC+C,KAAMC"}