npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.6 → 4.0.0-alpha.7 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (684) hide show

package/calendar/types.d.ts CHANGED Viewed

@@ -28,7 +28,7 @@ interface CalendarBaseProps extends CommonCalendarProps {
  *
  * Pass `variant="single"` or omit `variant` to activate this mode.
  */
-export interface CalendarSingleProps extends CalendarBaseProps {
+export interface CalendarSingleProps {
     /**
      * @default "single"
      */
@@ -54,7 +54,7 @@ export interface CalendarSingleProps extends CalendarBaseProps {
  *
  * Requires `variant="multi"`.
  */
-export interface CalendarMultiProps extends CalendarBaseProps {
+export interface CalendarMultiProps {
     variant: "multi";
     /** Selected dates in `YYYY-MM-DD` format */
     values?: string[] | undefined;
@@ -70,4 +70,4 @@ export interface CalendarMultiProps extends CalendarBaseProps {
     onChange?: ((values: string[]) => void) | undefined;
 }
 /** Props for the `Calendar` component */
-export type CalendarProps = CalendarSingleProps | CalendarMultiProps;
+export type CalendarProps = CalendarBaseProps & (CalendarSingleProps | CalendarMultiProps);

package/card/card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.js","sources":["../../src/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext } from \"react\";\n\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./card.styles\";\nimport type { CardProps } from \"./types\";\n\n/** A themed container surface for grouping related content. */\nexport const Card = ({\n children,\n className,\n \"data-testid\": dataTestId = \"card\",\n ...otherProps\n}: CardProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const theme = useContext(ThemeContext);\n const isDarkMode = theme?.mode === \"dark\";\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderContent = () =>\n typeof children === \"string\" ? (\n <Typography.BodyBL>{children}</Typography.BodyBL>\n ) : (\n children\n );\n\n return (\n <div\n {...otherProps}\n data-testid={dataTestId}\n className={clsx(\n styles.card,\n isDarkMode ? styles.cardDarkMode : styles.cardLightMode,\n className\n )}\n >\n {renderContent()}\n </div>\n );\n};\n"],"names":["Card","_a","children","className","dataTestId","otherProps","__rest","theme","useContext","ThemeContext","isDarkMode","mode","_jsx","Object","assign","clsx","styles.card","styles.cardDarkMode","styles.cardLightMode","Typography","BodyBL"],"mappings":"~~iVASO~~,MAAMA,EAAQC,IAAA,IAAAC,SACjBA,EAAQC,UACRA,EACA,cAAeC,EAAa,QAAMH,EAC/BI,EAAUC,EAAAL,EAJI,wCASjB,MAAMM,EAAQC,EAAWC,GACnBC,EAA6B,UAAhBH,aAAK,EAALA,EAAOI,MAY1B,OACIC,EAAA,MAAAC,OAAAC,OAAA,CAAA,EACQT,EAAU,CAAA,cACDD,EACbD,UAAWY,EACPC,EACAN,EAAaO,EAAsBC,EACnCf,GACHD,SAde,iBAAbA,EACHU,EAACO,EAAWC,OAAM,CAAAlB,SAAEA,IAA6B,IAgB/C"}
1	+ {"version":3,"file":"card.js","sources":["../../src/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext } from \"react\";\n\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./card.styles\";\nimport type { CardProps } from \"./types\";\n\n// @catalog\n/** A themed container surface for grouping related content. */\nexport const Card = ({\n children,\n className,\n \"data-testid\": dataTestId = \"card\",\n ...otherProps\n}: CardProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const theme = useContext(ThemeContext);\n const isDarkMode = theme?.mode === \"dark\";\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderContent = () =>\n typeof children === \"string\" ? (\n <Typography.BodyBL>{children}</Typography.BodyBL>\n ) : (\n children\n );\n\n return (\n <div\n {...otherProps}\n data-testid={dataTestId}\n className={clsx(\n styles.card,\n isDarkMode ? styles.cardDarkMode : styles.cardLightMode,\n className\n )}\n >\n {renderContent()}\n </div>\n );\n};\n"],"names":["Card","_a","children","className","dataTestId","otherProps","__rest","theme","useContext","ThemeContext","isDarkMode","mode","_jsx","Object","assign","clsx","styles.card","styles.cardDarkMode","styles.cardLightMode","Typography","BodyBL"],"mappings":"iVAUO,MAAMA,EAAQC,IAAA,IAAAC,SACjBA,EAAQC,UACRA,EACA,cAAeC,EAAa,QAAMH,EAC/BI,EAAUC,EAAAL,EAJI,wCASjB,MAAMM,EAAQC,EAAWC,GACnBC,EAA6B,UAAhBH,aAAK,EAALA,EAAOI,MAY1B,OACIC,EAAA,MAAAC,OAAAC,OAAA,CAAA,EACQT,EAAU,CAAA,cACDD,EACbD,UAAWY,EACPC,EACAN,EAAaO,EAAsBC,EACnCf,GACHD,SAde,iBAAbA,EACHU,EAACO,EAAWC,OAAM,CAAAlB,SAAEA,IAA6B,IAgB/C"}

package/checkbox/checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.js","sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import {\n MinusSquareFillIcon,\n SquareFillIcon,\n SquareIcon,\n SquareTickFillIcon,\n} from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef } from \"react\";\n\nimport * as styles from \"./checkbox.styles\";\nimport type { CheckboxProps } from \"./types\";\n\n/*\n A styled checkbox input with indeterminate state support.\n */\nexport const Checkbox = ({\n className,\n checked,\n disabled,\n focusableWhenDisabled,\n indeterminate,\n displaySize = \"default\",\n onChange,\n id,\n tabIndex,\n ...otherProps\n}: CheckboxProps): JSX.Element => {\n // =============================================================================\n // REFS\n // =============================================================================\n const checkRef = useRef<HTMLInputElement>(null);\n\n const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n onChange?.(event);\n };\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useEffect(() => {\n if (checkRef.current) {\n checkRef.current.indeterminate = indeterminate ?? false;\n }\n }, [indeterminate]);\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n const renderIcon = () => {\n if (indeterminate) {\n return (\n <MinusSquareFillIcon\n className={clsx(\n styles.icon,\n styles.selectedIcon,\n disabled && styles.iconDisabled\n )}\n data-testid=\"indeterminate\"\n aria-hidden\n />\n );\n }\n\n if (checked) {\n return (\n <SquareTickFillIcon\n className={clsx(\n styles.icon,\n styles.selectedIcon,\n disabled && styles.iconDisabled\n )}\n data-testid=\"checkmark\"\n aria-hidden\n />\n );\n }\n\n if (disabled) {\n return (\n <SquareFillIcon\n className={clsx(styles.icon, styles.iconDisabled)}\n data-testid=\"empty-disabled-checkbox\"\n aria-hidden\n />\n );\n }\n\n return (\n <SquareIcon\n className={clsx(styles.icon, styles.uncheckedIcon)}\n data-testid=\"empty-checkbox\"\n aria-hidden\n />\n );\n };\n\n return (\n <div\n className={clsx(\n styles.container,\n displaySize === \"small\" && styles.containerSmall,\n className\n )}\n data-testid=\"checkbox\"\n >\n <input\n id={id}\n className={clsx(\n styles.input,\n !disabled && styles.inputActive,\n disabled && styles.inputDisabledVisual\n )}\n data-testid=\"checkbox-input\"\n type=\"checkbox\"\n checked={checked}\n ref={checkRef}\n tabIndex={isFocusableWhenDisabled ? 0 : tabIndex}\n disabled={isNativeDisabled}\n aria-disabled={isFocusableWhenDisabled}\n aria-checked={indeterminate ? \"mixed\" : checked}\n onChange={handleOnChange}\n {...otherProps}\n />\n {renderIcon()}\n </div>\n );\n};\n"],"names":["Checkbox","_a","className","checked","disabled","focusableWhenDisabled","indeterminate","displaySize","onChange","id","tabIndex","otherProps","__rest","checkRef","useRef","isFocusableWhenDisabled","isNativeDisabled","useEffect","current","_jsxs","clsx","styles.container","styles.containerSmall","children","_jsx","Object","assign","styles.input","styles.inputActive","styles.inputDisabledVisual","type","ref","event","preventDefault","MinusSquareFillIcon","styles.icon","styles.selectedIcon","styles.iconDisabled","SquareTickFillIcon","SquareFillIcon","SquareIcon","styles.uncheckedIcon"],"mappings":"~~odAeO~~,MAAMA,EAAYC,QAAAC,UACrBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,sBACRA,EAAqBC,cACrBA,EAAaC,YACbA,EAAc,UAASC,SACvBA,EAAQC,GACRA,EAAEC,SACFA,KACGC,EAAUC,EAAAX,EAVQ,CAAA,YAAA,UAAA,WAAA,wBAAA,gBAAA,cAAA,WAAA,KAAA,aAerB,MAAMY,EAAWC,EAAyB,MAEpCC,IAA4BX,KAAcC,EAC1CW,IAAqBZ,IAAaC,EAiBxCY,GAAU,KACFJ,EAASK,UACTL,EAASK,QAAQZ,cAAgBA,SAAAA,EACrC,GACD,CAACA,IAqDJ,OACIa,SACIjB,UAAWkB,EACPC,EACgB,UAAhBd,GAA2Be,EAC3BpB,GACH,cACW,WAAUqB,SAAA,CAEtBC,EAAA,QAAAC,OAAAC,OAAA,CACIjB,GAAIA,EACJP,UAAWkB,EACPO,GACCvB,GAAYwB,EACbxB,GAAYyB,GACf,cACW,iBACZC,KAAK,WACL3B,QAASA,EACT4B,IAAKlB,EACLH,SAAUK,EAA0B,EAAIL,EACxCN,SAAUY,EAAgB,gBACXD,iBACDT,EAAgB,QAAUH,EACxCK,SA7FYwB,IAChB5B,EACA4B,EAAMC,iBAGVzB,SAAAA,EAAWwB,EAAM,GAyFLrB,IAxERL,EAEIkB,EAACU,EAAmB,CAChBhC,UAAWkB,EACPe,EACAC,EACAhC,GAAYiC,GACf,cACW,gBAAe,eAAA,IAMnClC,EAEIqB,EAACc,EAAkB,CACfpC,UAAWkB,EACPe,EACAC,EACAhC,GAAYiC,GACf,cACW,YAAW,eAAA,IAM/BjC,EAEIoB,EAACe,EAAc,CACXrC,UAAWkB,EAAKe,EAAaE,iBACjB,0BAAyB,eAAA,IAO7Cb,EAACgB,EAAU,CACPtC,UAAWkB,EAAKe,EAAaM,iBACjB,iBAAgB,eAAA,MAkC9B"}
1	+ {"version":3,"file":"checkbox.js","sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import {\n MinusSquareFillIcon,\n SquareFillIcon,\n SquareIcon,\n SquareTickFillIcon,\n} from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef } from \"react\";\n\nimport * as styles from \"./checkbox.styles\";\nimport type { CheckboxProps } from \"./types\";\n\n// @catalog\n/*\n A styled checkbox input with indeterminate state support.\n */\nexport const Checkbox = ({\n className,\n checked,\n disabled,\n focusableWhenDisabled,\n indeterminate,\n displaySize = \"default\",\n onChange,\n id,\n tabIndex,\n ...otherProps\n}: CheckboxProps): JSX.Element => {\n // =============================================================================\n // REFS\n // =============================================================================\n const checkRef = useRef<HTMLInputElement>(null);\n\n const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n onChange?.(event);\n };\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useEffect(() => {\n if (checkRef.current) {\n checkRef.current.indeterminate = indeterminate ?? false;\n }\n }, [indeterminate]);\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n const renderIcon = () => {\n if (indeterminate) {\n return (\n <MinusSquareFillIcon\n className={clsx(\n styles.icon,\n styles.selectedIcon,\n disabled && styles.iconDisabled\n )}\n data-testid=\"indeterminate\"\n aria-hidden\n />\n );\n }\n\n if (checked) {\n return (\n <SquareTickFillIcon\n className={clsx(\n styles.icon,\n styles.selectedIcon,\n disabled && styles.iconDisabled\n )}\n data-testid=\"checkmark\"\n aria-hidden\n />\n );\n }\n\n if (disabled) {\n return (\n <SquareFillIcon\n className={clsx(styles.icon, styles.iconDisabled)}\n data-testid=\"empty-disabled-checkbox\"\n aria-hidden\n />\n );\n }\n\n return (\n <SquareIcon\n className={clsx(styles.icon, styles.uncheckedIcon)}\n data-testid=\"empty-checkbox\"\n aria-hidden\n />\n );\n };\n\n return (\n <div\n className={clsx(\n styles.container,\n displaySize === \"small\" && styles.containerSmall,\n className\n )}\n data-testid=\"checkbox\"\n >\n <input\n id={id}\n className={clsx(\n styles.input,\n !disabled && styles.inputActive,\n disabled && styles.inputDisabledVisual\n )}\n data-testid=\"checkbox-input\"\n type=\"checkbox\"\n checked={checked}\n ref={checkRef}\n tabIndex={isFocusableWhenDisabled ? 0 : tabIndex}\n disabled={isNativeDisabled}\n aria-disabled={isFocusableWhenDisabled}\n aria-checked={indeterminate ? \"mixed\" : checked}\n onChange={handleOnChange}\n {...otherProps}\n />\n {renderIcon()}\n </div>\n );\n};\n"],"names":["Checkbox","_a","className","checked","disabled","focusableWhenDisabled","indeterminate","displaySize","onChange","id","tabIndex","otherProps","__rest","checkRef","useRef","isFocusableWhenDisabled","isNativeDisabled","useEffect","current","_jsxs","clsx","styles.container","styles.containerSmall","children","_jsx","Object","assign","styles.input","styles.inputActive","styles.inputDisabledVisual","type","ref","event","preventDefault","MinusSquareFillIcon","styles.icon","styles.selectedIcon","styles.iconDisabled","SquareTickFillIcon","SquareFillIcon","SquareIcon","styles.uncheckedIcon"],"mappings":"odAgBO,MAAMA,EAAYC,QAAAC,UACrBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,sBACRA,EAAqBC,cACrBA,EAAaC,YACbA,EAAc,UAASC,SACvBA,EAAQC,GACRA,EAAEC,SACFA,KACGC,EAAUC,EAAAX,EAVQ,CAAA,YAAA,UAAA,WAAA,wBAAA,gBAAA,cAAA,WAAA,KAAA,aAerB,MAAMY,EAAWC,EAAyB,MAEpCC,IAA4BX,KAAcC,EAC1CW,IAAqBZ,IAAaC,EAiBxCY,GAAU,KACFJ,EAASK,UACTL,EAASK,QAAQZ,cAAgBA,SAAAA,EACrC,GACD,CAACA,IAqDJ,OACIa,SACIjB,UAAWkB,EACPC,EACgB,UAAhBd,GAA2Be,EAC3BpB,GACH,cACW,WAAUqB,SAAA,CAEtBC,EAAA,QAAAC,OAAAC,OAAA,CACIjB,GAAIA,EACJP,UAAWkB,EACPO,GACCvB,GAAYwB,EACbxB,GAAYyB,GACf,cACW,iBACZC,KAAK,WACL3B,QAASA,EACT4B,IAAKlB,EACLH,SAAUK,EAA0B,EAAIL,EACxCN,SAAUY,EAAgB,gBACXD,iBACDT,EAAgB,QAAUH,EACxCK,SA7FYwB,IAChB5B,EACA4B,EAAMC,iBAGVzB,SAAAA,EAAWwB,EAAM,GAyFLrB,IAxERL,EAEIkB,EAACU,EAAmB,CAChBhC,UAAWkB,EACPe,EACAC,EACAhC,GAAYiC,GACf,cACW,gBAAe,eAAA,IAMnClC,EAEIqB,EAACc,EAAkB,CACfpC,UAAWkB,EACPe,EACAC,EACAhC,GAAYiC,GACf,cACW,YAAW,eAAA,IAM/BjC,EAEIoB,EAACe,EAAc,CACXrC,UAAWkB,EAAKe,EAAaE,iBACjB,0BAAyB,eAAA,IAO7Cb,EAACgB,EAAU,CACPtC,UAAWkB,EAAKe,EAAaM,iBACjB,iBAAgB,eAAA,MAkC9B"}

package/checkbox/types.d.ts CHANGED Viewed

@@ -3,6 +3,10 @@ export type CheckboxSize = "small" | "default";
  * Props for the `Checkbox` component.
  */
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Controls the checked state of the checkbox. When omitted, the checkbox is uncontrolled.
+     */
+    checked?: boolean | undefined;
     /**
      * Controls the visual size of the checkbox.
      *

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

	@@ -1 +1 @@
1	- {"version":3,"file":"accordion.js","sources":["../../../src/accordion/accordion.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport * as styles from \"./accordion.styles\";\nimport { AccordionContext } from \"./accordion-context\";\nimport { AccordionItem } from \"./accordion-item\";\nimport type { AccordionProps } from \"./types\";\n\nconst AccordionBase = ({\n children,\n title,\n enableExpandAll = true,\n initialDisplay = \"expand-all\",\n showTitleInMobile = false,\n id,\n \"data-testid\": testId,\n className,\n headingLevel = 2,\n onExpandCollapseChange,\n}: AccordionProps): JSX.Element => {\n const [expandAll, setExpandAll] = useState<boolean>(\n initialDisplay === \"expand-all\"\n );\n const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n const [itemState, setItemState] = useState<Record<string, boolean>>({});\n\n useEffect(() => {\n setHasFirstLoad(true);\n }, []);\n\n useEffect(() => {\n if (hasFirstLoad) {\n onExpandCollapseChange?.(expandAll);\n }\n }, [expandAll, hasFirstLoad]);\n\n useEffect(() => {\n if (hasFirstLoad) {\n const itemStates = Object.values(itemState);\n if (itemStates.length > 0) {\n const allExpanded = itemStates.every((state) => state === true);\n const allCollapsed = itemStates.every(\n (state) => state === false\n );\n\n if (allExpanded && !expandAll) {\n setExpandAll(true);\n } else if (allCollapsed && expandAll) {\n setExpandAll(false);\n }\n }\n }\n }, [itemState, expandAll, hasFirstLoad]);\n\n const handleExpandCollapseClick = (event: React.MouseEvent) => {\n event.preventDefault();\n setExpandAll((prevExpandValue) => {\n const expandValue = !prevExpandValue;\n\n const updatedChildState = Object.keys(itemState).reduce(\n (acc, key) => {\n acc[key] = expandValue;\n return acc;\n },\n {} as typeof itemState\n );\n\n setItemState(updatedChildState);\n return expandValue;\n });\n };\n\n const onItemStateChange = (id: string, isExpanded: boolean) => {\n setItemState((prev) => ({ ...prev, [id]: isExpanded }));\n };\n\n const onItemDeregister = (id: string) => {\n setItemState((prev) => {\n const newState = { ...prev };\n delete newState[id];\n return newState;\n });\n };\n\n const renderCollapseExpandAll = () => {\n return (\n <Button\n className={styles.expandCollapseLink}\n data-testid=\"accordion-expand-collapse-button\"\n onClick={handleExpandCollapseClick}\n styleType=\"link\"\n type=\"button\"\n sizeType=\"small\"\n >\n {expandAll ? \"Hide all\" : \"Show all\"}\n </Button>\n );\n };\n\n const renderTitleWrapper = () => {\n if (!title && !enableExpandAll) {\n return null;\n }\n\n return (\n <div\n className={clsx(\n styles.titleWrapper,\n !showTitleInMobile &&\n !enableExpandAll &&\n styles.titleWrapperHidden\n )}\n >\n {title && (\n <h2\n className={clsx(\n styles.title,\n !showTitleInMobile && styles.titleHidden\n )}\n data-testid=\"accordion-title\"\n aria-level={headingLevel}\n >\n {title}\n </h2>\n )}\n {enableExpandAll && renderCollapseExpandAll()}\n </div>\n );\n };\n\n return (\n <AccordionContext.Provider\n value={{\n expandAll,\n itemHeadingLevel: headingLevel\n ? title\n ? headingLevel + 1\n : headingLevel\n : undefined,\n onItemStateChange,\n onItemDeregister,\n itemState,\n }}\n >\n <div\n id={id}\n data-testid={testId}\n className={clsx(styles.accordionWrapper, className)}\n >\n {renderTitleWrapper()}\n {children}\n </div>\n </AccordionContext.Provider>\n );\n};\n\n/*\n A vertically stacked set of collapsible content panels.\n \n Use `Accordion` to organise related content into independently expandable\n * sections with shared expand/collapse state. The container synchronises item\n * states and maintains correct heading-level hierarchy.\n \n Sub-components:\n * - `Accordion.Item` — a single collapsible panel with an imperative ref handle.\n /\nexport const Accordion = Object.assign(AccordionBase, {\n /\n Renders an individual collapsible section within an `Accordion`.\n \n Each item has a clickable header that toggles its content panel. The expanded\n * state can be individually controlled via the `expanded` prop, or left to the\n * parent `Accordion` to manage through its \"Show all\" / \"Hide all\" mechanism.\n * Exposes an imperative ref handle (`AccordionItemHandle`) for programmatic\n * expand/collapse control.\n */\n Item: AccordionItem,\n});\n"],"names":["Accordion","Object","assign","children","title","enableExpandAll","initialDisplay","showTitleInMobile","id","testId","className","headingLevel","onExpandCollapseChange","expandAll","setExpandAll","useState","hasFirstLoad","setHasFirstLoad","itemState","setItemState","useEffect","itemStates","values","length","allExpanded","every","state","allCollapsed","handleExpandCollapseClick","event","preventDefault","prevExpandValue","expandValue","updatedChildState","keys","reduce","acc","key","_jsx","AccordionContext","Provider","value","itemHeadingLevel","undefined","onItemStateChange","isExpanded","prev","onItemDeregister","newState","_jsxs","clsx","styles.accordionWrapper","styles.titleWrapper","styles.titleWrapperHidden","styles.title","styles.titleHidden","Button","styles.expandCollapseLink","onClick","styleType","type","sizeType","Item","AccordionItem"],"mappings":"iTAUA,~~MA8JaA~~,EAAYC,OAAOC,~~QA9JV~~,EAClBC,WACAC,QACAC,mBAAkB,EAClBC,iBAAiB,aACjBC,qBAAoB,EACpBC,KACA,cAAeC,EACfC,YACAC,eAAe,EACfC,6BAEA,MAAOC,EAAWC,GAAgBC,EAAAA,SACX,eAAnBT,IAEGU,EAAcC,GAAmBF,EAAAA,UAAkB,IACnDG,EAAWC,GAAgBJ,EAAAA,SAAkC,CAAA,GAEpEK,EAAAA,WAAU,KACNH,GAAgB,EAAK,GACtB,IAEHG,EAAAA,WAAU,KACFJ,IACAJ,SAAAA,EAAyBC,GAC7B,GACD,CAACA,EAAWG,IAEfI,EAAAA,WAAU,KACN,GAAIJ,EAAc,CACd,MAAMK,EAAapB,OAAOqB,OAAOJ,GACjC,GAAIG,EAAWE,OAAS,EAAG,CACvB,MAAMC,EAAcH,EAAWI,OAAOC,IAAoB,IAAVA,IAC1CC,EAAeN,EAAWI,OAC3BC,IAAoB,IAAVA,IAGXF,IAAgBX,EAChBC,GAAa,GACNa,GAAgBd,GACvBC,GAAa,EAErB,CACJ,IACD,CAACI,EAAWL,EAAWG,IAE1B,MAAMY,EAA6BC,IAC/BA,EAAMC,iBACNhB,GAAciB,IACV,MAAMC,GAAeD,EAEfE,EAAoBhC,OAAOiC,KAAKhB,GAAWiB,QAC7C,CAACC,EAAKC,KACFD,EAAIC,GAAOL,EACJI,IAEX,CAAA,GAIJ,OADAjB,EAAac,GACND,CAAW,GACpB,EA6DN,OACIM,MAACC,EAAAA,iBAAiBC,SAAQ,CACtBC,MAAO,CACH5B,YACA6B,iBAAkB/B,EACZP,EACIO,EAAe,EACfA,OACJgC,EACNC,kBAnEc,CAACpC,EAAYqC,KACnC1B,GAAc2B,GAAS7C,OAAAC,OAAAD,OAAAC,OAAA,GAAM4C,GAAI,CAAEtC,CAACA,GAAKqC,KAAc,EAmE/CE,iBAhEcvC,IACtBW,GAAc2B,IACV,MAAME,EAAQ/C,OAAAC,OAAA,CAAA,EAAQ4C,GAEtB,cADOE,EAASxC,GACTwC,CAAQ,GACjB,EA4DM9B,aACHf,SAED8C,EAAAA,KAAA,MAAA,CACIzC,GAAIA,EAAE,cACOC,EACbC,UAAWwC,EAAAA,QAAKC,mBAAyBzC,GAAUP,SAAA,CA/CtDC,GAAUC,EAKX4C,EAAAA,KAAA,MAAA,CACIvC,UAAWwC,EAAAA,QACPE,EAAAA,cACC7C,IACIF,GACDgD,EAAAA,oBACPlD,SAAA,CAEAC,GACGkC,EAAAA,IAAA,KAAA,CACI5B,UAAWwC,EAAAA,QACPI,EAAAA,OACC/C,GAAqBgD,EAAAA,aACzB,cACW,kBAAiB,aACjB5C,EAAYR,SAEvBC,IAGRC,GAvCLiC,EAAAA,IAACkB,EAAAA,OAAM,CACH9C,UAAW+C,EAAAA,mBAAyB,cACxB,mCACZC,QAAS9B,EACT+B,UAAU,OACVC,KAAK,SACLC,SAAS,iBAERhD,EAAY,WAAa,gBAOvB,KAiDFV,MAEmB,~~GAckB~~,CAUlD2D,KAAMC,EAAAA"}
1	+ {"version":3,"file":"accordion.js","sources":["../../../src/accordion/accordion.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport * as styles from \"./accordion.styles\";\nimport { AccordionContext } from \"./accordion-context\";\nimport { AccordionItem } from \"./accordion-item\";\nimport type { AccordionProps } from \"./types\";\n\nconst AccordionBase = ({\n children,\n title,\n enableExpandAll = true,\n initialDisplay = \"expand-all\",\n showTitleInMobile = false,\n id,\n \"data-testid\": testId,\n className,\n headingLevel = 2,\n onExpandCollapseChange,\n}: AccordionProps): JSX.Element => {\n const [expandAll, setExpandAll] = useState<boolean>(\n initialDisplay === \"expand-all\"\n );\n const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n const [itemState, setItemState] = useState<Record<string, boolean>>({});\n\n useEffect(() => {\n setHasFirstLoad(true);\n }, []);\n\n useEffect(() => {\n if (hasFirstLoad) {\n onExpandCollapseChange?.(expandAll);\n }\n }, [expandAll, hasFirstLoad]);\n\n useEffect(() => {\n if (hasFirstLoad) {\n const itemStates = Object.values(itemState);\n if (itemStates.length > 0) {\n const allExpanded = itemStates.every((state) => state === true);\n const allCollapsed = itemStates.every(\n (state) => state === false\n );\n\n if (allExpanded && !expandAll) {\n setExpandAll(true);\n } else if (allCollapsed && expandAll) {\n setExpandAll(false);\n }\n }\n }\n }, [itemState, expandAll, hasFirstLoad]);\n\n const handleExpandCollapseClick = (event: React.MouseEvent) => {\n event.preventDefault();\n setExpandAll((prevExpandValue) => {\n const expandValue = !prevExpandValue;\n\n const updatedChildState = Object.keys(itemState).reduce(\n (acc, key) => {\n acc[key] = expandValue;\n return acc;\n },\n {} as typeof itemState\n );\n\n setItemState(updatedChildState);\n return expandValue;\n });\n };\n\n const onItemStateChange = (id: string, isExpanded: boolean) => {\n setItemState((prev) => ({ ...prev, [id]: isExpanded }));\n };\n\n const onItemDeregister = (id: string) => {\n setItemState((prev) => {\n const newState = { ...prev };\n delete newState[id];\n return newState;\n });\n };\n\n const renderCollapseExpandAll = () => {\n return (\n <Button\n className={styles.expandCollapseLink}\n data-testid=\"accordion-expand-collapse-button\"\n onClick={handleExpandCollapseClick}\n styleType=\"link\"\n type=\"button\"\n sizeType=\"small\"\n >\n {expandAll ? \"Hide all\" : \"Show all\"}\n </Button>\n );\n };\n\n const renderTitleWrapper = () => {\n if (!title && !enableExpandAll) {\n return null;\n }\n\n return (\n <div\n className={clsx(\n styles.titleWrapper,\n !showTitleInMobile &&\n !enableExpandAll &&\n styles.titleWrapperHidden\n )}\n >\n {title && (\n <h2\n className={clsx(\n styles.title,\n !showTitleInMobile && styles.titleHidden\n )}\n data-testid=\"accordion-title\"\n aria-level={headingLevel}\n >\n {title}\n </h2>\n )}\n {enableExpandAll && renderCollapseExpandAll()}\n </div>\n );\n };\n\n return (\n <AccordionContext.Provider\n value={{\n expandAll,\n itemHeadingLevel: headingLevel\n ? title\n ? headingLevel + 1\n : headingLevel\n : undefined,\n onItemStateChange,\n onItemDeregister,\n itemState,\n }}\n >\n <div\n id={id}\n data-testid={testId}\n className={clsx(styles.accordionWrapper, className)}\n >\n {renderTitleWrapper()}\n {children}\n </div>\n </AccordionContext.Provider>\n );\n};\n\n// @catalog\n/*\n A vertically stacked set of collapsible content panels.\n \n Use `Accordion` to organise related content into independently expandable\n * sections with shared expand/collapse state. The container synchronises item\n * states and maintains correct heading-level hierarchy.\n \n Sub-components:\n * - `Accordion.Item` — a single collapsible panel with an imperative ref handle.\n /\nexport const Accordion = Object.assign(AccordionBase, {\n /\n Renders an individual collapsible section within an `Accordion`.\n \n Each item has a clickable header that toggles its content panel. The expanded\n * state can be individually controlled via the `expanded` prop, or left to the\n * parent `Accordion` to manage through its \"Show all\" / \"Hide all\" mechanism.\n * Exposes an imperative ref handle (`AccordionItemHandle`) for programmatic\n * expand/collapse control.\n */\n Item: AccordionItem,\n});\n"],"names":["Accordion","Object","assign","children","title","enableExpandAll","initialDisplay","showTitleInMobile","id","testId","className","headingLevel","onExpandCollapseChange","expandAll","setExpandAll","useState","hasFirstLoad","setHasFirstLoad","itemState","setItemState","useEffect","itemStates","values","length","allExpanded","every","state","allCollapsed","handleExpandCollapseClick","event","preventDefault","prevExpandValue","expandValue","updatedChildState","keys","reduce","acc","key","_jsx","AccordionContext","Provider","value","itemHeadingLevel","undefined","onItemStateChange","isExpanded","prev","onItemDeregister","newState","_jsxs","clsx","styles.accordionWrapper","styles.titleWrapper","styles.titleWrapperHidden","styles.title","styles.titleHidden","Button","styles.expandCollapseLink","onClick","styleType","type","sizeType","Item","AccordionItem"],"mappings":"iTAUA,MA+JaA,EAAYC,OAAOC,QA/JV,EAClBC,WACAC,QACAC,mBAAkB,EAClBC,iBAAiB,aACjBC,qBAAoB,EACpBC,KACA,cAAeC,EACfC,YACAC,eAAe,EACfC,6BAEA,MAAOC,EAAWC,GAAgBC,EAAAA,SACX,eAAnBT,IAEGU,EAAcC,GAAmBF,EAAAA,UAAkB,IACnDG,EAAWC,GAAgBJ,EAAAA,SAAkC,CAAA,GAEpEK,EAAAA,WAAU,KACNH,GAAgB,EAAK,GACtB,IAEHG,EAAAA,WAAU,KACFJ,IACAJ,SAAAA,EAAyBC,GAC7B,GACD,CAACA,EAAWG,IAEfI,EAAAA,WAAU,KACN,GAAIJ,EAAc,CACd,MAAMK,EAAapB,OAAOqB,OAAOJ,GACjC,GAAIG,EAAWE,OAAS,EAAG,CACvB,MAAMC,EAAcH,EAAWI,OAAOC,IAAoB,IAAVA,IAC1CC,EAAeN,EAAWI,OAC3BC,IAAoB,IAAVA,IAGXF,IAAgBX,EAChBC,GAAa,GACNa,GAAgBd,GACvBC,GAAa,EAErB,CACJ,IACD,CAACI,EAAWL,EAAWG,IAE1B,MAAMY,EAA6BC,IAC/BA,EAAMC,iBACNhB,GAAciB,IACV,MAAMC,GAAeD,EAEfE,EAAoBhC,OAAOiC,KAAKhB,GAAWiB,QAC7C,CAACC,EAAKC,KACFD,EAAIC,GAAOL,EACJI,IAEX,CAAA,GAIJ,OADAjB,EAAac,GACND,CAAW,GACpB,EA6DN,OACIM,MAACC,EAAAA,iBAAiBC,SAAQ,CACtBC,MAAO,CACH5B,YACA6B,iBAAkB/B,EACZP,EACIO,EAAe,EACfA,OACJgC,EACNC,kBAnEc,CAACpC,EAAYqC,KACnC1B,GAAc2B,GAAS7C,OAAAC,OAAAD,OAAAC,OAAA,GAAM4C,GAAI,CAAEtC,CAACA,GAAKqC,KAAc,EAmE/CE,iBAhEcvC,IACtBW,GAAc2B,IACV,MAAME,EAAQ/C,OAAAC,OAAA,CAAA,EAAQ4C,GAEtB,cADOE,EAASxC,GACTwC,CAAQ,GACjB,EA4DM9B,aACHf,SAED8C,EAAAA,KAAA,MAAA,CACIzC,GAAIA,EAAE,cACOC,EACbC,UAAWwC,EAAAA,QAAKC,mBAAyBzC,GAAUP,SAAA,CA/CtDC,GAAUC,EAKX4C,EAAAA,KAAA,MAAA,CACIvC,UAAWwC,EAAAA,QACPE,EAAAA,cACC7C,IACIF,GACDgD,EAAAA,oBACPlD,SAAA,CAEAC,GACGkC,EAAAA,IAAA,KAAA,CACI5B,UAAWwC,EAAAA,QACPI,EAAAA,OACC/C,GAAqBgD,EAAAA,aACzB,cACW,kBAAiB,aACjB5C,EAAYR,SAEvBC,IAGRC,GAvCLiC,EAAAA,IAACkB,EAAAA,OAAM,CACH9C,UAAW+C,EAAAA,mBAAyB,cACxB,mCACZC,QAAS9B,EACT+B,UAAU,OACVC,KAAK,SACLC,SAAS,iBAERhD,EAAY,WAAa,gBAOvB,KAiDFV,MAEmB,GAekB,CAUlD2D,KAAMC,EAAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.js","sources":["../../../src/alert/alert.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons\";\nimport { ArrowRightIcon } from \"@lifesg/react-icons/arrow-right\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { ExclamationTriangleFillIcon } from \"@lifesg/react-icons/exclamation-triangle-fill\";\nimport { ICircleFillIcon } from \"@lifesg/react-icons/i-circle-fill\";\nimport { TickCircleFillIcon } from \"@lifesg/react-icons/tick-circle-fill\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Markup } from \"../markup\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./alert.styles\";\nimport type { AlertProps } from \"./types\";\n\nconst TYPE_CLASS_MAP = {\n error: {\n wrapperTypeClass: styles.wrapperError,\n iconColorClass: styles.alertIconError,\n },\n success: {\n wrapperTypeClass: styles.wrapperSuccess,\n iconColorClass: styles.alertIconSuccess,\n },\n warning: {\n wrapperTypeClass: styles.wrapperWarning,\n iconColorClass: styles.alertIconWarning,\n },\n info: {\n wrapperTypeClass: styles.wrapperInfo,\n iconColorClass: styles.alertIconInfo,\n },\n description: {\n wrapperTypeClass: styles.wrapperDescription,\n iconColorClass: styles.alertIconDescription,\n },\n};\n\n/*\n Displays an inline contextual banner with a severity-coded message.\n \n Use `Alert` to surface feedback, status, or supplementary information without\n * interrupting the user's workflow. Supports five severity tones, an optional\n * icon, a call-to-action link, and a collapsible content area for lengthy\n * messages.\n /\nexport const Alert = ({\n type,\n className,\n children,\n actionLink,\n actionLinkIcon,\n sizeType = \"default\",\n showIcon = false,\n customIcon,\n maxCollapsedHeight,\n role,\n ...otherProps\n}: AlertProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [showHiddenContent, setShowHiddenContent] = useState<boolean>(false);\n const [renderShowMore, setRenderShowMore] = useState<boolean>(false);\n const { height: contentHeight, ref: contentRef } =\n useResizeDetector<HTMLDivElement>();\n const contentId = useId();\n const containerRef = useRef<HTMLDivElement>(null);\n const isCollapsed = isContentOutsideCollapsibleZone();\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n\n const getAlertLabel = () => {\n switch (type) {\n case \"success\":\n return \"Success\";\n case \"warning\":\n return \"Warning\";\n case \"error\":\n return \"Error\";\n case \"info\":\n return \"Information\";\n case \"description\":\n return \"Description\";\n default:\n return \"Alert\";\n }\n };\n\n const setCollapsedState = useCallback(() => {\n setShowHiddenContent(!maxCollapsedHeight);\n setRenderShowMore(isContentOutsideCollapsibleZone());\n }, [maxCollapsedHeight, contentHeight]);\n\n function isContentOutsideCollapsibleZone() {\n if (contentHeight && maxCollapsedHeight) {\n return contentHeight > maxCollapsedHeight;\n }\n return false;\n }\n\n const isInert = () => {\n return !!maxCollapsedHeight && !showHiddenContent;\n };\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useEffect(() => {\n setCollapsedState();\n }, [maxCollapsedHeight, contentHeight, setCollapsedState]);\n\n useApplyStyle(containerRef, {\n [styles.tokens.maxCollapsedHeight]:\n !showHiddenContent && isCollapsed && maxCollapsedHeight\n ? `${maxCollapsedHeight}px`\n : null,\n });\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderShowMoreButton = () => (\n <button\n className={clsx(\n styles.showMoreButton,\n sizeType === \"small\"\n ? styles.showMoreButtonSmall\n : styles.showMoreButtonDefault\n )}\n type=\"button\"\n aria-expanded={showHiddenContent}\n aria-controls={contentId}\n onClick={() => setShowHiddenContent(!showHiddenContent)}\n >\n Show {showHiddenContent ? \"less\" : \"more\"}\n <ChevronDownIcon\n className={clsx(\n styles.chevronIcon,\n showHiddenContent\n ? styles.chevronIconExpanded\n : styles.chevronIconCollapsed\n )}\n />\n </button>\n );\n\n const renderLinkType = () => {\n if (actionLinkIcon) return actionLinkIcon;\n return <ArrowRightIcon />;\n };\n\n const renderLink = () => {\n if (!actionLink) return null;\n\n return (\n <Typography.LinkSM\n data-testid=\"action-link\"\n className={clsx(\n styles.actionLinkText,\n sizeType === \"small\"\n ? styles.actionLinkTextSmall\n : styles.actionLinkTextDefault\n )}\n underlineStyle=\"none\"\n {...actionLink}\n >\n {actionLink.children}\n {renderLinkType()}\n </Typography.LinkSM>\n );\n };\n\n const renderIcon = () => {\n if (type && customIcon) return customIcon;\n switch (type) {\n case \"success\":\n return <TickCircleFillIcon aria-hidden />;\n case \"warning\":\n return <ExclamationTriangleFillIcon aria-hidden />;\n case \"error\":\n return <ExclamationCircleFillIcon aria-hidden />;\n case \"info\":\n return <ICircleFillIcon aria-hidden />;\n case \"description\":\n return <ICircleFillIcon aria-hidden />;\n default:\n return null;\n }\n };\n\n const renderContent = () => {\n return (\n <div\n id={contentId}\n className={clsx(\n styles.textWrapperContainer,\n showHiddenContent &&\n actionLink &&\n styles.textWrapperContainerShowMoreWithLink,\n !showHiddenContent &&\n isCollapsed &&\n styles.textWrapperContainerCollapsed\n )}\n inert={inertValue(isInert())}\n ref={containerRef}\n >\n <Markup\n ref={contentRef}\n className={styles.textWrapper}\n baseTextSize={sizeType === \"small\" ? \"body-sm\" : \"body-md\"}\n >\n {children}\n </Markup>\n {renderLink()}\n </div>\n );\n };\n\n const {\n wrapperTypeClass = styles.wrapperWarning,\n iconColorClass = styles.alertIconWarning,\n } = TYPE_CLASS_MAP[type] \|\| {};\n\n return (\n <div\n className={clsx(styles.wrapper, wrapperTypeClass, className)}\n aria-label={`${getAlertLabel()}`}\n data-testid={otherProps[\"data-testid\"]}\n role={role}\n >\n {showIcon && (\n <div\n className={clsx(\n styles.alertIconWrapper,\n sizeType === \"small\"\n ? styles.alertIconWrapperSmall\n : styles.alertIconWrapperDefault,\n iconColorClass\n )}\n >\n {renderIcon()}\n </div>\n )}\n {/ \n CSS-BASED TAB ORDER IMPLEMENTATION:\n - DOM order: button → link → content (natural tab order)\n - Visual order: content → button (via CSS order property)\n */}\n <div className={styles.contentContainer}>\n {renderShowMore && renderShowMoreButton()}\n {renderContent()}\n </div>\n </div>\n );\n};\n"],"names":["TYPE_CLASS_MAP","error","wrapperTypeClass","styles.wrapperError","iconColorClass","styles.alertIconError","success","styles.wrapperSuccess","styles.alertIconSuccess","warning","styles.wrapperWarning","styles.alertIconWarning","info","styles.wrapperInfo","styles.alertIconInfo","description","styles.wrapperDescription","styles.alertIconDescription","_a","type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role","otherProps","__rest","showHiddenContent","setShowHiddenContent","useState","renderShowMore","setRenderShowMore","height","contentHeight","ref","contentRef","useResizeDetector","contentId","useId","containerRef","useRef","isCollapsed","isContentOutsideCollapsibleZone","setCollapsedState","useCallback","useEffect","useApplyStyle","styles.tokens","_jsxs","clsx","styles.wrapper","getAlertLabel","_jsx","styles.alertIconWrapper","styles.alertIconWrapperSmall","styles.alertIconWrapperDefault","TickCircleFillIcon","ExclamationTriangleFillIcon","ExclamationCircleFillIcon","ICircleFillIcon","renderIcon","styles.contentContainer","styles.showMoreButton","styles.showMoreButtonSmall","styles.showMoreButtonDefault","onClick","ChevronDownIcon","styles.chevronIcon","styles.chevronIconExpanded","styles.chevronIconCollapsed","id","styles.textWrapperContainer","styles.textWrapperContainerShowMoreWithLink","styles.textWrapperContainerCollapsed","inert","inertValue","Markup","styles.textWrapper","baseTextSize","Typography","LinkSM","Object","assign","styles.actionLinkText","styles.actionLinkTextSmall","styles.actionLinkTextDefault","underlineStyle","ArrowRightIcon"],"mappings":"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"}
1	+ {"version":3,"file":"alert.js","sources":["../../../src/alert/alert.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons\";\nimport { ArrowRightIcon } from \"@lifesg/react-icons/arrow-right\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { ExclamationTriangleFillIcon } from \"@lifesg/react-icons/exclamation-triangle-fill\";\nimport { ICircleFillIcon } from \"@lifesg/react-icons/i-circle-fill\";\nimport { TickCircleFillIcon } from \"@lifesg/react-icons/tick-circle-fill\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Markup } from \"../markup\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./alert.styles\";\nimport type { AlertProps } from \"./types\";\n\nconst TYPE_CLASS_MAP = {\n error: {\n wrapperTypeClass: styles.wrapperError,\n iconColorClass: styles.alertIconError,\n },\n success: {\n wrapperTypeClass: styles.wrapperSuccess,\n iconColorClass: styles.alertIconSuccess,\n },\n warning: {\n wrapperTypeClass: styles.wrapperWarning,\n iconColorClass: styles.alertIconWarning,\n },\n info: {\n wrapperTypeClass: styles.wrapperInfo,\n iconColorClass: styles.alertIconInfo,\n },\n description: {\n wrapperTypeClass: styles.wrapperDescription,\n iconColorClass: styles.alertIconDescription,\n },\n};\n\n// @catalog\n/*\n Displays an inline contextual banner with a severity-coded message.\n \n Use `Alert` to surface feedback, status, or supplementary information without\n * interrupting the user's workflow. Supports five severity tones, an optional\n * icon, a call-to-action link, and a collapsible content area for lengthy\n * messages.\n /\nexport const Alert = ({\n type,\n className,\n children,\n actionLink,\n actionLinkIcon,\n sizeType = \"default\",\n showIcon = false,\n customIcon,\n maxCollapsedHeight,\n role,\n ...otherProps\n}: AlertProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [showHiddenContent, setShowHiddenContent] = useState<boolean>(false);\n const [renderShowMore, setRenderShowMore] = useState<boolean>(false);\n const { height: contentHeight, ref: contentRef } =\n useResizeDetector<HTMLDivElement>();\n const contentId = useId();\n const containerRef = useRef<HTMLDivElement>(null);\n const isCollapsed = isContentOutsideCollapsibleZone();\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n\n const getAlertLabel = () => {\n switch (type) {\n case \"success\":\n return \"Success\";\n case \"warning\":\n return \"Warning\";\n case \"error\":\n return \"Error\";\n case \"info\":\n return \"Information\";\n case \"description\":\n return \"Description\";\n default:\n return \"Alert\";\n }\n };\n\n const setCollapsedState = useCallback(() => {\n setShowHiddenContent(!maxCollapsedHeight);\n setRenderShowMore(isContentOutsideCollapsibleZone());\n }, [maxCollapsedHeight, contentHeight]);\n\n function isContentOutsideCollapsibleZone() {\n if (contentHeight && maxCollapsedHeight) {\n return contentHeight > maxCollapsedHeight;\n }\n return false;\n }\n\n const isInert = () => {\n return !!maxCollapsedHeight && !showHiddenContent;\n };\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useEffect(() => {\n setCollapsedState();\n }, [maxCollapsedHeight, contentHeight, setCollapsedState]);\n\n useApplyStyle(containerRef, {\n [styles.tokens.maxCollapsedHeight]:\n !showHiddenContent && isCollapsed && maxCollapsedHeight\n ? `${maxCollapsedHeight}px`\n : null,\n });\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderShowMoreButton = () => (\n <button\n className={clsx(\n styles.showMoreButton,\n sizeType === \"small\"\n ? styles.showMoreButtonSmall\n : styles.showMoreButtonDefault\n )}\n type=\"button\"\n aria-expanded={showHiddenContent}\n aria-controls={contentId}\n onClick={() => setShowHiddenContent(!showHiddenContent)}\n >\n Show {showHiddenContent ? \"less\" : \"more\"}\n <ChevronDownIcon\n className={clsx(\n styles.chevronIcon,\n showHiddenContent\n ? styles.chevronIconExpanded\n : styles.chevronIconCollapsed\n )}\n />\n </button>\n );\n\n const renderLinkType = () => {\n if (actionLinkIcon) return actionLinkIcon;\n return <ArrowRightIcon />;\n };\n\n const renderLink = () => {\n if (!actionLink) return null;\n\n return (\n <Typography.LinkSM\n data-testid=\"action-link\"\n className={clsx(\n styles.actionLinkText,\n sizeType === \"small\"\n ? styles.actionLinkTextSmall\n : styles.actionLinkTextDefault\n )}\n underlineStyle=\"none\"\n {...actionLink}\n >\n {actionLink.children}\n {renderLinkType()}\n </Typography.LinkSM>\n );\n };\n\n const renderIcon = () => {\n if (type && customIcon) return customIcon;\n switch (type) {\n case \"success\":\n return <TickCircleFillIcon aria-hidden />;\n case \"warning\":\n return <ExclamationTriangleFillIcon aria-hidden />;\n case \"error\":\n return <ExclamationCircleFillIcon aria-hidden />;\n case \"info\":\n return <ICircleFillIcon aria-hidden />;\n case \"description\":\n return <ICircleFillIcon aria-hidden />;\n default:\n return null;\n }\n };\n\n const renderContent = () => {\n return (\n <div\n id={contentId}\n className={clsx(\n styles.textWrapperContainer,\n showHiddenContent &&\n actionLink &&\n styles.textWrapperContainerShowMoreWithLink,\n !showHiddenContent &&\n isCollapsed &&\n styles.textWrapperContainerCollapsed\n )}\n inert={inertValue(isInert())}\n ref={containerRef}\n >\n <Markup\n ref={contentRef}\n className={styles.textWrapper}\n baseTextSize={sizeType === \"small\" ? \"body-sm\" : \"body-md\"}\n >\n {children}\n </Markup>\n {renderLink()}\n </div>\n );\n };\n\n const {\n wrapperTypeClass = styles.wrapperWarning,\n iconColorClass = styles.alertIconWarning,\n } = TYPE_CLASS_MAP[type] \|\| {};\n\n return (\n <div\n className={clsx(styles.wrapper, wrapperTypeClass, className)}\n aria-label={`${getAlertLabel()}`}\n data-testid={otherProps[\"data-testid\"]}\n role={role}\n >\n {showIcon && (\n <div\n className={clsx(\n styles.alertIconWrapper,\n sizeType === \"small\"\n ? styles.alertIconWrapperSmall\n : styles.alertIconWrapperDefault,\n iconColorClass\n )}\n >\n {renderIcon()}\n </div>\n )}\n {/ \n CSS-BASED TAB ORDER IMPLEMENTATION:\n - DOM order: button → link → content (natural tab order)\n - Visual order: content → button (via CSS order property)\n */}\n <div className={styles.contentContainer}>\n {renderShowMore && renderShowMoreButton()}\n {renderContent()}\n </div>\n </div>\n );\n};\n"],"names":["TYPE_CLASS_MAP","error","wrapperTypeClass","styles.wrapperError","iconColorClass","styles.alertIconError","success","styles.wrapperSuccess","styles.alertIconSuccess","warning","styles.wrapperWarning","styles.alertIconWarning","info","styles.wrapperInfo","styles.alertIconInfo","description","styles.wrapperDescription","styles.alertIconDescription","_a","type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role","otherProps","__rest","showHiddenContent","setShowHiddenContent","useState","renderShowMore","setRenderShowMore","height","contentHeight","ref","contentRef","useResizeDetector","contentId","useId","containerRef","useRef","isCollapsed","isContentOutsideCollapsibleZone","setCollapsedState","useCallback","useEffect","useApplyStyle","styles.tokens","_jsxs","clsx","styles.wrapper","getAlertLabel","_jsx","styles.alertIconWrapper","styles.alertIconWrapperSmall","styles.alertIconWrapperDefault","TickCircleFillIcon","ExclamationTriangleFillIcon","ExclamationCircleFillIcon","ICircleFillIcon","renderIcon","styles.contentContainer","styles.showMoreButton","styles.showMoreButtonSmall","styles.showMoreButtonDefault","onClick","ChevronDownIcon","styles.chevronIcon","styles.chevronIconExpanded","styles.chevronIconCollapsed","id","styles.textWrapperContainer","styles.textWrapperContainerShowMoreWithLink","styles.textWrapperContainerCollapsed","inert","inertValue","Markup","styles.textWrapper","baseTextSize","Typography","LinkSM","Object","assign","styles.actionLinkText","styles.actionLinkTextSmall","styles.actionLinkTextDefault","underlineStyle","ArrowRightIcon"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"loading-dots.js","sources":["../../../../src/animations/loading-dots/loading-dots.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense } from \"react\";\n\nimport type { ~~BaseAnimationProps~~ } from \"../types\";\nimport * as styles from \"./loading-dots.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDots = lazy(async () => ({\n default: (await import(\"./lottie-animation\")).LottieLoadingDots,\n}));\n\nexport const LoadingDots = ({\n className~~,\n~~ ...otherProps\n}: ~~BaseAnimationProps~~) => {\n return (\n <div {...otherProps} className={clsx(styles.container, className)}>\n <Suspense fallback={<Placeholder />}>\n <LottieLoadingDots />\n </Suspense>\n </div>\n );\n};\n\nconst Placeholder = () => {\n return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDots","lazy","__awaiter","default","Promise","Placeholder","_jsx","className","styles.placeholder","_a","otherProps","__rest","Object","assign","clsx","styles.container","children","Suspense","fallback"],"mappings":"oPAOA,MAAMA,EAAoBC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACvCC,eAAgBC,kDAAO,wBAAoB,KAAGJ,kBAChD,~~MAeIK~~,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,~~kCAdCC~~,IAAA,IAAAF,~~UACxBA~~,GAASE,~~EACNC~~,EAAUC,EAAAA,OAAAF,~~EAFW~~,~~eAIxB~~,OACIH,MAAA,MAAAM,OAAAC,OAAA,CAAA,EAASH,EAAU,CAAEH,UAAWO,EAAAA,QAAKC,YAAkBR,GAAUS,SAC7DV,MAACW,EAAAA,SAAQ,CAACC,SAAUZ,MAACD,EAAW,CAAA,GAAGW,SAC/BV,EAAAA,IAACN,EAAiB,CAAA,OAEpB"}
1	+ {"version":3,"file":"loading-dots.js","sources":["../../../../src/animations/loading-dots/loading-dots.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense } from \"react\";\n\nimport type { AnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDots = lazy(async () => ({\n default: (await import(\"./lottie-animation\")).LottieLoadingDots,\n}));\n\n// @catalog\n/*\n An animated loading indicator with bouncing dots.\n */\nexport const LoadingDots = ({ className, ...otherProps }: AnimationProps) => {\n return (\n <div {...otherProps} className={clsx(styles.container, className)}>\n <Suspense fallback={<Placeholder />}>\n <LottieLoadingDots />\n </Suspense>\n </div>\n );\n};\n\nconst Placeholder = () => {\n return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDots","lazy","__awaiter","default","Promise","Placeholder","_jsx","className","styles.placeholder","_a","otherProps","__rest","Object","assign","clsx","styles.container","children","Suspense","fallback"],"mappings":"oPAOA,MAAMA,EAAoBC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACvCC,eAAgBC,kDAAO,wBAAoB,KAAGJ,kBAChD,MAgBIK,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,kCAXCC,IAAA,IAAAF,UAAEA,GAASE,EAAKC,EAAUC,EAAAA,OAAAF,EAA1B,eACxB,OACIH,MAAA,MAAAM,OAAAC,OAAA,CAAA,EAASH,EAAU,CAAEH,UAAWO,EAAAA,QAAKC,YAAkBR,GAAUS,SAC7DV,MAACW,EAAAA,SAAQ,CAACC,SAAUZ,MAACD,EAAW,CAAA,GAAGW,SAC/BV,EAAAA,IAACN,EAAiB,CAAA,OAEpB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"loading-dots-spinner.js","sources":["../../../../src/animations/loading-dots-spinner/loading-dots-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { ComponentToken, useApplyStyle } from \"../../theme\";\nimport type { CustomisableAnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDotsSpinner = lazy(async () => ({\n default: (await import(\"./lottie-animation\")).LottieLoadingDotsSpinner,\n}));\n\nexport const LoadingDotsSpinner = ({\n className,\n color,\n ...otherProps\n}: CustomisableAnimationProps) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const [resolvedColor, setResolvedColor] = useState<string \| undefined>(\n undefined\n );\n\n useApplyStyle(containerRef, {\n [styles.tokens.containerColor]:\n color \|\| ComponentToken.Animation[\"loading-dots-spinner-colour\"],\n });\n\n useEffect(() => {\n const element = containerRef.current;\n if (!element) return;\n\n const computedColor = getComputedStyle(element)\n .getPropertyValue(styles.tokens.containerColor)\n .trim();\n\n setResolvedColor(computedColor \|\| undefined);\n }, [color]);\n\n return (\n <div\n ref={containerRef}\n {...otherProps}\n className={clsx(styles.container, className)}\n >\n <Suspense fallback={<Placeholder />}>\n <LottieLoadingDotsSpinner color={resolvedColor} />\n </Suspense>\n </div>\n );\n};\n\nconst Placeholder = () => {\n return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDotsSpinner","lazy","__awaiter","default","Promise","Placeholder","_jsx","className","styles.placeholder","_a","color","otherProps","__rest","containerRef","useRef","resolvedColor","setResolvedColor","useState","undefined","useApplyStyle","styles.tokens","containerColor","ComponentToken","Animation","useEffect","element","current","computedColor","getComputedStyle","getPropertyValue","trim","Object","assign","ref","clsx","styles.container","children","Suspense","fallback"],"mappings":"2pBAQA,MAAMA,EAA2BC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CAC9CC,eAAgBC,kDAAO,wBAAoB,KAAGJ,yBAChD,~~MAyCIK~~,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,yCAxCQC,QAAAF,UAC/BA,EAASG,MACTA,GAAKD,EACFE,EAAUC,EAAAA,OAAAH,EAHkB,uBAK/B,MAAMI,EAAeC,EAAAA,OAAuB,OACrCC,EAAeC,GAAoBC,EAAAA,cACtCC,GAmBJ,OAhBAC,EAAAA,cAAcN,EAAc,CACxB,CAACO,EAAAA,OAAcC,gBACXX,GAASY,EAAAA,eAAeC,UAAU,iCAG1CC,EAAAA,WAAU,KACN,MAAMC,EAAUZ,EAAaa,QAC7B,IAAKD,EAAS,OAEd,MAAME,EAAgBC,iBAAiBH,GAClCI,iBAAiBT,EAAAA,OAAcC,gBAC/BS,OAELd,EAAiBW,QAAiBT,EAAU,GAC7C,CAACR,IAGAJ,EAAAA,IAAA,MAAAyB,OAAAC,OAAA,CACIC,IAAKpB,GACDF,EAAU,CACdJ,UAAW2B,EAAAA,QAAKC,EAAAA,UAAkB5B,GAAU6B,SAE5C9B,EAAAA,IAAC+B,EAAAA,UAASC,SAAUhC,EAAAA,IAACD,MAAc+B,SAC/B9B,EAAAA,IAACN,EAAwB,CAACU,MAAOK,QAEnC"}
1	+ {"version":3,"file":"loading-dots-spinner.js","sources":["../../../../src/animations/loading-dots-spinner/loading-dots-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { ComponentToken, useApplyStyle } from \"../../theme\";\nimport type { CustomisableAnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDotsSpinner = lazy(async () => ({\n default: (await import(\"./lottie-animation\")).LottieLoadingDotsSpinner,\n}));\n\n// @catalog\n/*\n An animated loading indicator combining dots with a spinning motion.\n */\nexport const LoadingDotsSpinner = ({\n className,\n color,\n ...otherProps\n}: CustomisableAnimationProps) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const [resolvedColor, setResolvedColor] = useState<string \| undefined>(\n undefined\n );\n\n useApplyStyle(containerRef, {\n [styles.tokens.containerColor]:\n color \|\| ComponentToken.Animation[\"loading-dots-spinner-colour\"],\n });\n\n useEffect(() => {\n const element = containerRef.current;\n if (!element) return;\n\n const computedColor = getComputedStyle(element)\n .getPropertyValue(styles.tokens.containerColor)\n .trim();\n\n setResolvedColor(computedColor \|\| undefined);\n }, [color]);\n\n return (\n <div\n ref={containerRef}\n {...otherProps}\n className={clsx(styles.container, className)}\n >\n <Suspense fallback={<Placeholder />}>\n <LottieLoadingDotsSpinner color={resolvedColor} />\n </Suspense>\n </div>\n );\n};\n\nconst Placeholder = () => {\n return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDotsSpinner","lazy","__awaiter","default","Promise","Placeholder","_jsx","className","styles.placeholder","_a","color","otherProps","__rest","containerRef","useRef","resolvedColor","setResolvedColor","useState","undefined","useApplyStyle","styles.tokens","containerColor","ComponentToken","Animation","useEffect","element","current","computedColor","getComputedStyle","getPropertyValue","trim","Object","assign","ref","clsx","styles.container","children","Suspense","fallback"],"mappings":"2pBAQA,MAAMA,EAA2BC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CAC9CC,eAAgBC,kDAAO,wBAAoB,KAAGJ,yBAChD,MA6CIK,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,yCAxCQC,QAAAF,UAC/BA,EAASG,MACTA,GAAKD,EACFE,EAAUC,EAAAA,OAAAH,EAHkB,uBAK/B,MAAMI,EAAeC,EAAAA,OAAuB,OACrCC,EAAeC,GAAoBC,EAAAA,cACtCC,GAmBJ,OAhBAC,EAAAA,cAAcN,EAAc,CACxB,CAACO,EAAAA,OAAcC,gBACXX,GAASY,EAAAA,eAAeC,UAAU,iCAG1CC,EAAAA,WAAU,KACN,MAAMC,EAAUZ,EAAaa,QAC7B,IAAKD,EAAS,OAEd,MAAME,EAAgBC,iBAAiBH,GAClCI,iBAAiBT,EAAAA,OAAcC,gBAC/BS,OAELd,EAAiBW,QAAiBT,EAAU,GAC7C,CAACR,IAGAJ,EAAAA,IAAA,MAAAyB,OAAAC,OAAA,CACIC,IAAKpB,GACDF,EAAU,CACdJ,UAAW2B,EAAAA,QAAKC,EAAAA,UAAkB5B,GAAU6B,SAE5C9B,EAAAA,IAAC+B,EAAAA,UAASC,SAAUhC,EAAAA,IAACD,MAAc+B,SAC/B9B,EAAAA,IAACN,EAAwB,CAACU,MAAOK,QAEnC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"lottie-animation.js","sources":["../../../../src/animations/loading-dots-spinner/lottie-animation.tsx"],"sourcesContent":["import { flatten, getColors } from \"lottie-colorify\";\nimport type { LottieOptions } from \"lottie-react\";\nimport { useLottie } from \"lottie-react\";\n\nimport type { ~~CustomisedProps~~ } from \"../types\";\nimport animationData from \"./data.json\";\nimport * as styles from \"./lottie-animation.styles\";\n\nexport const LottieLoadingDotsSpinner = ({\n color = getColors(animationData)[0],\n}: ~~CustomisedProps~~) => {\n const options: LottieOptions = {\n animationData: flatten(color, animationData),\n loop: true,\n autoplay: true,\n className: styles.view,\n };\n\n const { View } = useLottie(options);\n\n return <>{View}</>;\n};\n"],"names":["color","getColors","animationData","options","flatten","loop","autoplay","className","styles.view","View","useLottie","_jsx","_Fragment","children"],"mappings":"4QAQwC,EACpCA,QAAQC,EAAAA,UAAUC,EAAAA,SAAe,OAEjC,MAAMC,EAAyB,CAC3BD,cAAeE,EAAAA,QAAQJ,EAAOE,WAC9BG,MAAM,EACNC,UAAU,EACVC,UAAWC,EAAAA,OAGTC,KAAEA,GAASC,EAAAA,iBAAAA,UAAUP,GAE3B,OAAOQ,EAAAA,IAAAC,EAAAA,SAAA,CAAAC,SAAGJ,GAAQ"}
1	+ {"version":3,"file":"lottie-animation.js","sources":["../../../../src/animations/loading-dots-spinner/lottie-animation.tsx"],"sourcesContent":["import { flatten, getColors } from \"lottie-colorify\";\nimport type { LottieOptions } from \"lottie-react\";\nimport { useLottie } from \"lottie-react\";\n\nimport type { CustomisableAnimationProps } from \"../types\";\nimport animationData from \"./data.json\";\nimport * as styles from \"./lottie-animation.styles\";\n\nexport const LottieLoadingDotsSpinner = ({\n color = getColors(animationData)[0],\n}: CustomisableAnimationProps) => {\n const options: LottieOptions = {\n animationData: flatten(color, animationData),\n loop: true,\n autoplay: true,\n className: styles.view,\n };\n\n const { View } = useLottie(options);\n\n return <>{View}</>;\n};\n"],"names":["color","getColors","animationData","options","flatten","loop","autoplay","className","styles.view","View","useLottie","_jsx","_Fragment","children"],"mappings":"4QAQwC,EACpCA,QAAQC,EAAAA,UAAUC,EAAAA,SAAe,OAEjC,MAAMC,EAAyB,CAC3BD,cAAeE,EAAAA,QAAQJ,EAAOE,WAC9BG,MAAM,EACNC,UAAU,EACVC,UAAWC,EAAAA,OAGTC,KAAEA,GAASC,EAAAA,iBAAAA,UAAUP,GAE3B,OAAOQ,EAAAA,IAAAC,EAAAA,SAAA,CAAAC,SAAGJ,GAAQ"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"loading-spinner.js","sources":["../../../../src/animations/loading-spinner/loading-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense } from \"react\";\n\nimport type { ~~BaseAnimationProps~~ } from \"../types\";\nimport * as styles from \"./loading-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieSpinner = lazy(async () => ({\n default: (await import(\"./lottie-animation\")).LottieSpinner,\n}));\n\nexport const LoadingSpinner = ({\n className,\n ...otherProps\n}: ~~BaseAnimationProps~~) => {\n return (\n <div {...otherProps} className={clsx(styles.container, className)}>\n <Suspense fallback={<Placeholder />}>\n <LottieSpinner />\n </Suspense>\n </div>\n );\n};\n\nconst Placeholder = () => {\n return <div className={styles.placeholder} />;\n};\n"],"names":["LottieSpinner","lazy","__awaiter","default","Promise","Placeholder","_jsx","className","styles.placeholder","_a","otherProps","__rest","Object","assign","clsx","styles.container","children","Suspense","fallback"],"mappings":"uPAOA,MAAMA,EAAgBC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACnCC,eAAgBC,kDAAO,wBAAoB,KAAGJ,cAChD,~~MAeIK~~,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,qCAdIC,IAAA,IAAAF,UAC3BA,GAASE,EACNC,EAAUC,EAAAA,OAAAF,EAFc,eAI3B,OACIH,MAAA,MAAAM,OAAAC,OAAA,CAAA,EAASH,EAAU,CAAEH,UAAWO,EAAAA,QAAKC,YAAkBR,GAAUS,SAC7DV,MAACW,EAAAA,SAAQ,CAACC,SAAUZ,MAACD,EAAW,CAAA,GAAGW,SAC/BV,EAAAA,IAACN,EAAa,CAAA,OAEhB"}
1	+ {"version":3,"file":"loading-spinner.js","sources":["../../../../src/animations/loading-spinner/loading-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense } from \"react\";\n\nimport type { AnimationProps } from \"../types\";\nimport * as styles from \"./loading-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieSpinner = lazy(async () => ({\n default: (await import(\"./lottie-animation\")).LottieSpinner,\n}));\n\n// @catalog\n/*\n An animation of a flying rocket.\n */\nexport const LoadingSpinner = ({\n className,\n ...otherProps\n}: AnimationProps) => {\n return (\n <div {...otherProps} className={clsx(styles.container, className)}>\n <Suspense fallback={<Placeholder />}>\n <LottieSpinner />\n </Suspense>\n </div>\n );\n};\n\nconst Placeholder = () => {\n return <div className={styles.placeholder} />;\n};\n"],"names":["LottieSpinner","lazy","__awaiter","default","Promise","Placeholder","_jsx","className","styles.placeholder","_a","otherProps","__rest","Object","assign","clsx","styles.container","children","Suspense","fallback"],"mappings":"uPAOA,MAAMA,EAAgBC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACnCC,eAAgBC,kDAAO,wBAAoB,KAAGJ,cAChD,MAmBIK,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,qCAdIC,IAAA,IAAAF,UAC3BA,GAASE,EACNC,EAAUC,EAAAA,OAAAF,EAFc,eAI3B,OACIH,MAAA,MAAAM,OAAAC,OAAA,CAAA,EAASH,EAAU,CAAEH,UAAWO,EAAAA,QAAKC,YAAkBR,GAAUS,SAC7DV,MAACW,EAAAA,SAAQ,CAACC,SAAUZ,MAACD,EAAW,CAAA,GAAGW,SAC/BV,EAAAA,IAACN,EAAa,CAAA,OAEhB"}

package/cjs/animations/themed-loading-spinner/themed-loading-spinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"themed-loading-spinner.js","sources":["../../../../src/animations/themed-loading-spinner/themed-loading-spinner.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { ThemeContext } from \"../../theme/theme-provider/context\";\nimport { LoadingDotsSpinner } from \"../loading-dots-spinner/loading-dots-spinner\";\nimport { LoadingSpinner } from \"../loading-spinner/loading-spinner\";\nimport type { ~~BaseAnimationProps~~ } from \"../types\";\n\nexport const ThemedLoadingSpinner = (props: ~~BaseAnimationProps~~) => {\n const fdsThemeContext = useContext(ThemeContext);\n\n const isLifesgTheme = fdsThemeContext?.theme === \"lifesg\";\n\n if (isLifesgTheme) {\n return <LoadingSpinner {...props} />;\n }\n\n return <LoadingDotsSpinner {...props} />;\n};\n"],"names":["props","fdsThemeContext","useContext","ThemeContext","theme","_jsx","LoadingSpinner","Object","assign","LoadingDotsSpinner"],"mappings":"~~mQAOqCA~~,IACjC,MAAMC,EAAkBC,EAAAA,WAAWC,gBAInC,MAFiD,YAA3BF,aAAe,EAAfA,EAAiBG,OAG5BC,EAAAA,IAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKR,IAGxBK,EAAAA,IAACI,EAAAA,mBAAkBF,OAAAC,OAAA,CAAA,EAAKR,GAAS"}
1	+ {"version":3,"file":"themed-loading-spinner.js","sources":["../../../../src/animations/themed-loading-spinner/themed-loading-spinner.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { ThemeContext } from \"../../theme/theme-provider/context\";\nimport { LoadingDotsSpinner } from \"../loading-dots-spinner/loading-dots-spinner\";\nimport { LoadingSpinner } from \"../loading-spinner/loading-spinner\";\nimport type { AnimationProps } from \"../types\";\n\n// @catalog\n/*\n A loading spinner that automatically adapts to the current theme.\n */\nexport const ThemedLoadingSpinner = (props: AnimationProps) => {\n const fdsThemeContext = useContext(ThemeContext);\n\n const isLifesgTheme = fdsThemeContext?.theme === \"lifesg\";\n\n if (isLifesgTheme) {\n return <LoadingSpinner {...props} />;\n }\n\n return <LoadingDotsSpinner {...props} />;\n};\n"],"names":["props","fdsThemeContext","useContext","ThemeContext","theme","_jsx","LoadingSpinner","Object","assign","LoadingDotsSpinner"],"mappings":"mQAWqCA,IACjC,MAAMC,EAAkBC,EAAAA,WAAWC,gBAInC,MAFiD,YAA3BF,aAAe,EAAfA,EAAiBG,OAG5BC,EAAAA,IAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKR,IAGxBK,EAAAA,IAACI,EAAAA,mBAAkBF,OAAAC,OAAA,CAAA,EAAKR,GAAS"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.js","sources":["../../../src/avatar/avatar.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Typography } from \"../typography\";\nimport * as styles from \"./avatar.styles\";\nimport type { AvatarProps } from \"./types\";\n\n/*\n Displays a circular avatar representing a user or entity.\n \n Use when you need a compact visual identity marker in lists, headers, or\n * cards. Accepts a string (rendered as an initial) or a JSX element such as an\n * image or icon.\n */\nexport const Avatar = ({\n children,\n sizeType = \"default\",\n \"data-testid\": testId = \"avatar\",\n className,\n ...otherProps\n}: AvatarProps): JSX.Element => {\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderContent = () => {\n if (!children) {\n return <></>;\n }\n\n if (typeof children === \"string\") {\n const TextComponent =\n sizeType === \"small\" ? Typography.BodySM : Typography.BodyBL;\n return (\n <TextComponent\n weight=\"semibold\"\n className={styles.avatarBaselineText}\n >\n {String.fromCodePoint(\n children.codePointAt(0) ?? 0\n ).toUpperCase()}\n </TextComponent>\n );\n }\n\n return children;\n };\n\n return (\n <div\n {...otherProps}\n data-testid={testId}\n className={clsx(\n styles.avatarDisplay,\n sizeType === \"small\"\n ? styles.avatarDisplaySmall\n : styles.avatarDisplayDefault,\n className\n )}\n >\n {renderContent()}\n </div>\n );\n};\n"],"names":["_a","children","sizeType","testId","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.avatarDisplay","styles.avatarDisplaySmall","styles.avatarDisplayDefault","TextComponent","Typography","BodySM","BodyBL","weight","styles.avatarBaselineText","String","fromCodePoint","codePointAt","toUpperCase","renderContent"],"mappings":"~~2QAauBA~~,IAAA,IAAAC,SACnBA,EAAQC,SACRA,EAAW,UACX,cAAeC,EAAS,SAAQC,UAChCA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALM,mDAiCnB,OACIO,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQJ,EAAU,CAAA,cACDF,EACbC,UAAWM,EAAAA,QACPC,EAAAA,cACa,UAAbT,EACMU,EAAAA,mBACAC,EAAAA,qBACNT,GACHH,SAjCa,YAClB,IAAKA,EACD,OAAOM,EAAAA,mBAGX,GAAwB,iBAAbN,EAAuB,CAC9B,MAAMa,EACW,UAAbZ,EAAuBa,EAAAA,WAAWC,OAASD,EAAAA,WAAWE,OAC1D,OACIV,MAACO,EAAa,CACVI,OAAO,WACPd,UAAWe,EAAAA,4BAEVC,OAAOC,cACmB,QAAvBrB,EAAAC,EAASqB,YAAY,UAAE,IAAAtB,EAAAA,EAAI,GAC7BuB,eAGd,CAEA,OAAOtB,CAAQ,EAeVuB,KACC"}
1	+ {"version":3,"file":"avatar.js","sources":["../../../src/avatar/avatar.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Typography } from \"../typography\";\nimport * as styles from \"./avatar.styles\";\nimport type { AvatarProps } from \"./types\";\n\n// @catalog\n/*\n Displays a circular avatar representing a user or entity.\n \n Use when you need a compact visual identity marker in lists, headers, or\n * cards. Accepts a string (rendered as an initial) or a JSX element such as an\n * image or icon.\n */\nexport const Avatar = ({\n children,\n sizeType = \"default\",\n \"data-testid\": testId = \"avatar\",\n className,\n ...otherProps\n}: AvatarProps): JSX.Element => {\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderContent = () => {\n if (!children) {\n return <></>;\n }\n\n if (typeof children === \"string\") {\n const TextComponent =\n sizeType === \"small\" ? Typography.BodySM : Typography.BodyBL;\n return (\n <TextComponent\n weight=\"semibold\"\n className={styles.avatarBaselineText}\n >\n {String.fromCodePoint(\n children.codePointAt(0) ?? 0\n ).toUpperCase()}\n </TextComponent>\n );\n }\n\n return children;\n };\n\n return (\n <div\n {...otherProps}\n data-testid={testId}\n className={clsx(\n styles.avatarDisplay,\n sizeType === \"small\"\n ? styles.avatarDisplaySmall\n : styles.avatarDisplayDefault,\n className\n )}\n >\n {renderContent()}\n </div>\n );\n};\n"],"names":["_a","children","sizeType","testId","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.avatarDisplay","styles.avatarDisplaySmall","styles.avatarDisplayDefault","TextComponent","Typography","BodySM","BodyBL","weight","styles.avatarBaselineText","String","fromCodePoint","codePointAt","toUpperCase","renderContent"],"mappings":"2QAcuBA,IAAA,IAAAC,SACnBA,EAAQC,SACRA,EAAW,UACX,cAAeC,EAAS,SAAQC,UAChCA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALM,mDAiCnB,OACIO,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQJ,EAAU,CAAA,cACDF,EACbC,UAAWM,EAAAA,QACPC,EAAAA,cACa,UAAbT,EACMU,EAAAA,mBACAC,EAAAA,qBACNT,GACHH,SAjCa,YAClB,IAAKA,EACD,OAAOM,EAAAA,mBAGX,GAAwB,iBAAbN,EAAuB,CAC9B,MAAMa,EACW,UAAbZ,EAAuBa,EAAAA,WAAWC,OAASD,EAAAA,WAAWE,OAC1D,OACIV,MAACO,EAAa,CACVI,OAAO,WACPd,UAAWe,EAAAA,4BAEVC,OAAOC,cACmB,QAAvBrB,EAAAC,EAASqB,YAAY,UAAE,IAAAtB,EAAAA,EAAI,GAC7BuB,eAGd,CAEA,OAAOtB,CAAQ,EAeVuB,KACC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.js","sources":["../../../src/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./badge.styles\";\nimport type { BadgeProps, BadgeVariant } from \"./types\";\n\nfunction getDisplayCount(count: number) {\n if (count <= 999) return count.toString();\n if (count === 1000) return \"1K\";\n return \"1K+\";\n}\nconst variantsToShowCount: Set<BadgeVariant> = new Set([\n \"number\",\n \"number-with-border\",\n \"square-number\",\n]);\n\n/*\n Displays a small indicator badge for notifications or status.\n \n Use `Badge` to surface counts or status dots on icons, avatars, and\n * navigation items. Renders as an overlay on a child element or as a standalone\n * inline indicator when no child is provided.\n */\nexport const Badge = ({\n badgeOffset,\n children,\n className,\n color = \"default\",\n count = 0,\n \"data-testid\": testId = \"badge\",\n variant = \"number\",\n ...otherProps\n}: BadgeProps) => {\n // =============================================================================\n // CONST\n // =============================================================================\n const displayCount = getDisplayCount(count);\n const shouldShowCount = variantsToShowCount.has(variant);\n\n // =============================================================================\n // REFS\n // =============================================================================\n const wrapperRef = useRef<HTMLSpanElement>(null);\n\n useApplyStyle(wrapperRef, {\n [styles.tokens.wrapper.offsetX]: badgeOffset?.[0],\n [styles.tokens.wrapper.offsetY]: badgeOffset?.[1],\n });\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <span className={clsx(children !== undefined && styles.badgeOverlay)}>\n <span\n ref={wrapperRef}\n className={clsx(\n styles.badgeWrapper,\n children !== undefined && styles.badgeWrapperIsOverlay\n )}\n >\n <span\n data-testid={testId}\n data-variant={variant}\n data-color={color}\n className={clsx(styles.badge, className)}\n {...otherProps}\n >\n {shouldShowCount ? displayCount : null}\n </span>\n </span>\n {children}\n </span>\n );\n};\n"],"names":["variantsToShowCount","Set","_a","badgeOffset","children","className","color","count","testId","variant","otherProps","__rest","displayCount","toString","getDisplayCount","shouldShowCount","has","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","offsetX","offsetY","_jsxs","clsx","undefined","styles.badgeOverlay","_jsx","ref","styles.badgeWrapper","styles.badgeWrapperIsOverlay","Object","assign","styles.badge"],"mappings":"gkBAYA,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,~~gCAUkBC~~,IAAA,IAAAC,YAClBA,EAAWC,SACXA,EAAQC,UACRA,EAASC,MACTA,EAAQ,UAASC,MACjBA,EAAQ,EACR,cAAeC,EAAS,QAAOC,QAC/BA,EAAU,UAAQP,EACfQ,EAAUC,SAAAT,EARK,CAAA,cAAA,WAAA,YAAA,QAAA,QAAA,cAAA,YAalB,MAAMU,~~EA/BV~~,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,~~CA2ByBO~~,CAAgBP,GAC/BQ,EAAkBf,EAAoBgB,IAAIP,GAK1CQ,EAAaC,EAAAA,OAAwB,MAU3C,OARAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,SAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,SAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,OAAA,OAAA,CAAMnB,UAAWoB,EAAAA,aAAkBC,IAAbtB,GAA0BuB,EAAAA,wBAC5CC,EAAAA,IAAA,OAAA,CACIC,IAAKZ,EACLZ,UAAWoB,UACPK,EAAAA,kBACaJ,IAAbtB,GAA0B2B,EAAAA,uBAC7B3B,SAEDwB,EAAAA,IAAA,OAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAAA,QAAKS,EAAAA,MAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,IACE"}
1	+ {"version":3,"file":"badge.js","sources":["../../../src/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./badge.styles\";\nimport type { BadgeProps, BadgeVariant } from \"./types\";\n\nfunction getDisplayCount(count: number) {\n if (count <= 999) return count.toString();\n if (count === 1000) return \"1K\";\n return \"1K+\";\n}\nconst variantsToShowCount: Set<BadgeVariant> = new Set([\n \"number\",\n \"number-with-border\",\n \"square-number\",\n]);\n\n// @catalog\n/*\n Displays a small indicator badge for notifications or status.\n \n Use `Badge` to surface counts or status dots on icons, avatars, and\n * navigation items. Renders as an overlay on a child element or as a standalone\n * inline indicator when no child is provided.\n */\nexport const Badge = ({\n badgeOffset,\n children,\n className,\n color = \"default\",\n count = 0,\n \"data-testid\": testId = \"badge\",\n variant = \"number\",\n ...otherProps\n}: BadgeProps) => {\n // =============================================================================\n // CONST\n // =============================================================================\n const displayCount = getDisplayCount(count);\n const shouldShowCount = variantsToShowCount.has(variant);\n\n // =============================================================================\n // REFS\n // =============================================================================\n const wrapperRef = useRef<HTMLSpanElement>(null);\n\n useApplyStyle(wrapperRef, {\n [styles.tokens.wrapper.offsetX]: badgeOffset?.[0],\n [styles.tokens.wrapper.offsetY]: badgeOffset?.[1],\n });\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <span className={clsx(children !== undefined && styles.badgeOverlay)}>\n <span\n ref={wrapperRef}\n className={clsx(\n styles.badgeWrapper,\n children !== undefined && styles.badgeWrapperIsOverlay\n )}\n >\n <span\n data-testid={testId}\n data-variant={variant}\n data-color={color}\n className={clsx(styles.badge, className)}\n {...otherProps}\n >\n {shouldShowCount ? displayCount : null}\n </span>\n </span>\n {children}\n </span>\n );\n};\n"],"names":["variantsToShowCount","Set","_a","badgeOffset","children","className","color","count","testId","variant","otherProps","__rest","displayCount","toString","getDisplayCount","shouldShowCount","has","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","offsetX","offsetY","_jsxs","clsx","undefined","styles.badgeOverlay","_jsx","ref","styles.badgeWrapper","styles.badgeWrapperIsOverlay","Object","assign","styles.badge"],"mappings":"gkBAYA,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,gCAWkBC,IAAA,IAAAC,YAClBA,EAAWC,SACXA,EAAQC,UACRA,EAASC,MACTA,EAAQ,UAASC,MACjBA,EAAQ,EACR,cAAeC,EAAS,QAAOC,QAC/BA,EAAU,UAAQP,EACfQ,EAAUC,SAAAT,EARK,CAAA,cAAA,WAAA,YAAA,QAAA,QAAA,cAAA,YAalB,MAAMU,EAhCV,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,CA4ByBO,CAAgBP,GAC/BQ,EAAkBf,EAAoBgB,IAAIP,GAK1CQ,EAAaC,EAAAA,OAAwB,MAU3C,OARAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,SAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,SAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,OAAA,OAAA,CAAMnB,UAAWoB,EAAAA,aAAkBC,IAAbtB,GAA0BuB,EAAAA,wBAC5CC,EAAAA,IAAA,OAAA,CACIC,IAAKZ,EACLZ,UAAWoB,UACPK,EAAAA,kBACaJ,IAAbtB,GAA0B2B,EAAAA,uBAC7B3B,SAEDwB,EAAAA,IAAA,OAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAAA,QAAKS,EAAAA,MAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,IACE"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"box-container.js","sources":["../../../src/box-container/box-container.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./box-container.styles\";\nimport type { BoxContainerProps } from \"./types\";\n\n/*\n A titled, collapsible section container that groups related content behind a\n * labelled header.\n \n Use `BoxContainer` when you need to visually separate a block of content\n * under a heading and optionally allow users to collapse it. The header supports\n * a call-to-action slot and a visual status indicator.\n */\nexport const BoxContainer = ({\n children,\n title,\n collapsible = true,\n expanded = false,\n callToActionComponent,\n displayState = \"default\",\n subComponentTestIds,\n clickableHeader,\n className,\n ...otherProps\n}: BoxContainerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [showExpanded, setShowExpanded] = useState<boolean>(\n !collapsible ? true : expanded\n );\n const resizeDetector = useResizeDetector();\n const childRef = resizeDetector.ref;\n const isMobile = useMaxWidthMediaQuery(\"sm\");\n const interactiveHeader = clickableHeader && collapsible;\n const internalId = useId();\n const contentId = `${internalId}-content`;\n const headerId = `${internalId}-header`;\n const handleIconRef = useRef<HTMLDivElement>(null);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const onHandleClick = (event: React.MouseEvent) => {\n // to prevent it triggers twice when click on button as clickableHeader enable\n event.stopPropagation();\n setShowExpanded(!showExpanded);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n // React spring animation configuration\n const expandableStyles = useSpring({\n height: showExpanded ? resizeDetector.height : 0,\n });\n\n const renderChildContent = () => {\n if (collapsible) {\n return (\n <animated.div\n className={styles.expandable}\n style={expandableStyles}\n data-testid={\"expandable-container\"}\n id={contentId}\n >\n <div\n className={styles.childContainer}\n ref={childRef}\n inert={inertValue(!showExpanded)}\n >\n {children}\n </div>\n </animated.div>\n );\n }\n\n return (\n <div\n className={styles.nonExpandable}\n data-testid=\"non-expandable-container\"\n >\n <div className={styles.childContainer}>{children}</div>\n </div>\n );\n };\n\n const renderDisplayIcon = () => {\n switch (displayState) {\n case \"error\":\n case \"warning\":\n return (\n <ExclamationCircleFillIcon\n className={clsx(\n styles.alertIcon,\n displayState === \"error\" && styles.alertIconError,\n displayState === \"warning\" &&\n styles.alertIconWarning\n )}\n data-testid={\n subComponentTestIds?.displayStateIcon \|\|\n `${displayState}-icon`\n }\n aria-label={displayState}\n />\n );\n default:\n return null;\n }\n };\n\n const renderHandleIcon = () => {\n return (\n collapsible && (\n <button\n className={styles.handle}\n onClick={onHandleClick}\n type=\"button\"\n aria-labelledby={headerId}\n aria-controls={contentId}\n aria-disabled={!collapsible} // remains focusable\n aria-expanded={showExpanded}\n data-testid={subComponentTestIds?.handle \|\| \"handle\"}\n >\n <div\n className={clsx(\n styles.handleIconContainer,\n showExpanded\n ? styles.handleIconContainerExpanded\n : styles.handleIconContainerCollapsed\n )}\n ref={handleIconRef}\n aria-hidden\n >\n <ChevronDownIcon className={styles.handleIcon} />\n </div>\n </button>\n )\n );\n };\n\n return (\n <section\n {...otherProps}\n className={clsx(styles.container, className)}\n aria-labelledby={headerId}\n role=\"region\"\n title={typeof title === \"string\" ? title : undefined}\n >\n <div\n className={clsx(\n styles.header,\n interactiveHeader && styles.headerInteractive\n )}\n data-testid=\"header\"\n onClick={interactiveHeader ? onHandleClick : undefined}\n >\n <div\n className={styles.labelWrapper}\n role={\"status\"}\n id={headerId}\n >\n <div\n className={styles.labelText}\n data-testid={subComponentTestIds?.title \|\| \"title\"}\n >\n {title}\n {displayState !== \"default\" && (\n <>\n <VisuallyHidden>{displayState}</VisuallyHidden>\n </>\n )}\n </div>\n {renderDisplayIcon()}\n {isMobile && renderHandleIcon()}\n </div>\n {callToActionComponent && (\n <div\n className={clsx(\n styles.callToActionContainer,\n collapsible &&\n styles.callToActionContainerCollapsible\n )}\n data-testid=\"call-to-action-container\"\n >\n {callToActionComponent}\n </div>\n )}\n\n {!isMobile && renderHandleIcon()}\n </div>\n {renderChildContent()}\n </section>\n );\n};\n"],"names":["_a","children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","className","otherProps","__rest","showExpanded","setShowExpanded","useState","resizeDetector","useResizeDetector","childRef","ref","isMobile","useMaxWidthMediaQuery","interactiveHeader","internalId","useId","contentId","headerId","handleIconRef","useRef","onHandleClick","event","stopPropagation","expandableStyles","useSpring","height","renderHandleIcon","_jsx","styles.handle","onClick","type","handle","clsx","styles.handleIconContainer","styles.handleIconContainerExpanded","styles.handleIconContainerCollapsed","ChevronDownIcon","styles.handleIcon","_jsxs","Object","assign","styles.container","role","undefined","styles.header","styles.headerInteractive","styles.labelWrapper","id","styles.labelText","_Fragment","VisuallyHidden","ExclamationCircleFillIcon","styles.alertIcon","styles.alertIconError","styles.alertIconWarning","displayStateIcon","renderDisplayIcon","styles.callToActionContainer","styles.callToActionContainerCollapsible","animated","div","styles.expandable","style","styles.childContainer","inert","inertValue","styles.nonExpandable"],"mappings":"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"}
1	+ {"version":3,"file":"box-container.js","sources":["../../../src/box-container/box-container.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./box-container.styles\";\nimport type { BoxContainerProps } from \"./types\";\n\n// @catalog\n/*\n A titled, collapsible section container that groups related content behind a\n * labelled header.\n \n Use `BoxContainer` when you need to visually separate a block of content\n * under a heading and optionally allow users to collapse it. The header supports\n * a call-to-action slot and a visual status indicator.\n */\nexport const BoxContainer = ({\n children,\n title,\n collapsible = true,\n expanded = false,\n callToActionComponent,\n displayState = \"default\",\n subComponentTestIds,\n clickableHeader,\n className,\n ...otherProps\n}: BoxContainerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [showExpanded, setShowExpanded] = useState<boolean>(\n !collapsible ? true : expanded\n );\n const resizeDetector = useResizeDetector();\n const childRef = resizeDetector.ref;\n const isMobile = useMaxWidthMediaQuery(\"sm\");\n const interactiveHeader = clickableHeader && collapsible;\n const internalId = useId();\n const contentId = `${internalId}-content`;\n const headerId = `${internalId}-header`;\n const handleIconRef = useRef<HTMLDivElement>(null);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const onHandleClick = (event: React.MouseEvent) => {\n // to prevent it triggers twice when click on button as clickableHeader enable\n event.stopPropagation();\n setShowExpanded(!showExpanded);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n // React spring animation configuration\n const expandableStyles = useSpring({\n height: showExpanded ? resizeDetector.height : 0,\n });\n\n const renderChildContent = () => {\n if (collapsible) {\n return (\n <animated.div\n className={styles.expandable}\n style={expandableStyles}\n data-testid={\"expandable-container\"}\n id={contentId}\n >\n <div\n className={styles.childContainer}\n ref={childRef}\n inert={inertValue(!showExpanded)}\n >\n {children}\n </div>\n </animated.div>\n );\n }\n\n return (\n <div\n className={styles.nonExpandable}\n data-testid=\"non-expandable-container\"\n >\n <div className={styles.childContainer}>{children}</div>\n </div>\n );\n };\n\n const renderDisplayIcon = () => {\n switch (displayState) {\n case \"error\":\n case \"warning\":\n return (\n <ExclamationCircleFillIcon\n className={clsx(\n styles.alertIcon,\n displayState === \"error\" && styles.alertIconError,\n displayState === \"warning\" &&\n styles.alertIconWarning\n )}\n data-testid={\n subComponentTestIds?.displayStateIcon \|\|\n `${displayState}-icon`\n }\n aria-label={displayState}\n />\n );\n default:\n return null;\n }\n };\n\n const renderHandleIcon = () => {\n return (\n collapsible && (\n <button\n className={styles.handle}\n onClick={onHandleClick}\n type=\"button\"\n aria-labelledby={headerId}\n aria-controls={contentId}\n aria-disabled={!collapsible} // remains focusable\n aria-expanded={showExpanded}\n data-testid={subComponentTestIds?.handle \|\| \"handle\"}\n >\n <div\n className={clsx(\n styles.handleIconContainer,\n showExpanded\n ? styles.handleIconContainerExpanded\n : styles.handleIconContainerCollapsed\n )}\n ref={handleIconRef}\n aria-hidden\n >\n <ChevronDownIcon className={styles.handleIcon} />\n </div>\n </button>\n )\n );\n };\n\n return (\n <section\n {...otherProps}\n className={clsx(styles.container, className)}\n aria-labelledby={headerId}\n role=\"region\"\n title={typeof title === \"string\" ? title : undefined}\n >\n <div\n className={clsx(\n styles.header,\n interactiveHeader && styles.headerInteractive\n )}\n data-testid=\"header\"\n onClick={interactiveHeader ? onHandleClick : undefined}\n >\n <div\n className={styles.labelWrapper}\n role={\"status\"}\n id={headerId}\n >\n <div\n className={styles.labelText}\n data-testid={subComponentTestIds?.title \|\| \"title\"}\n >\n {title}\n {displayState !== \"default\" && (\n <>\n <VisuallyHidden>{displayState}</VisuallyHidden>\n </>\n )}\n </div>\n {renderDisplayIcon()}\n {isMobile && renderHandleIcon()}\n </div>\n {callToActionComponent && (\n <div\n className={clsx(\n styles.callToActionContainer,\n collapsible &&\n styles.callToActionContainerCollapsible\n )}\n data-testid=\"call-to-action-container\"\n >\n {callToActionComponent}\n </div>\n )}\n\n {!isMobile && renderHandleIcon()}\n </div>\n {renderChildContent()}\n </section>\n );\n};\n"],"names":["_a","children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","className","otherProps","__rest","showExpanded","setShowExpanded","useState","resizeDetector","useResizeDetector","childRef","ref","isMobile","useMaxWidthMediaQuery","interactiveHeader","internalId","useId","contentId","headerId","handleIconRef","useRef","onHandleClick","event","stopPropagation","expandableStyles","useSpring","height","renderHandleIcon","_jsx","styles.handle","onClick","type","handle","clsx","styles.handleIconContainer","styles.handleIconContainerExpanded","styles.handleIconContainerCollapsed","ChevronDownIcon","styles.handleIcon","_jsxs","Object","assign","styles.container","role","undefined","styles.header","styles.headerInteractive","styles.labelWrapper","id","styles.labelText","_Fragment","VisuallyHidden","ExclamationCircleFillIcon","styles.alertIcon","styles.alertIconError","styles.alertIconWarning","displayStateIcon","renderDisplayIcon","styles.callToActionContainer","styles.callToActionContainerCollapsible","animated","div","styles.expandable","style","styles.childContainer","inert","inertValue","styles.nonExpandable"],"mappings":"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"}

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"card.js","sources":["../../../src/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext } from \"react\";\n\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./card.styles\";\nimport type { CardProps } from \"./types\";\n\n/** A themed container surface for grouping related content. */\nexport const Card = ({\n children,\n className,\n \"data-testid\": dataTestId = \"card\",\n ...otherProps\n}: CardProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const theme = useContext(ThemeContext);\n const isDarkMode = theme?.mode === \"dark\";\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderContent = () =>\n typeof children === \"string\" ? (\n <Typography.BodyBL>{children}</Typography.BodyBL>\n ) : (\n children\n );\n\n return (\n <div\n {...otherProps}\n data-testid={dataTestId}\n className={clsx(\n styles.card,\n isDarkMode ? styles.cardDarkMode : styles.cardLightMode,\n className\n )}\n >\n {renderContent()}\n </div>\n );\n};\n"],"names":["_a","children","className","dataTestId","otherProps","__rest","theme","useContext","ThemeContext","isDarkMode","mode","_jsx","Object","assign","clsx","styles.card","styles.cardDarkMode","styles.cardLightMode","Typography","BodyBL"],"mappings":"~~0UASqBA~~,IAAA,IAAAC,SACjBA,EAAQC,UACRA,EACA,cAAeC,EAAa,QAAMH,EAC/BI,EAAUC,EAAAA,OAAAL,EAJI,wCASjB,MAAMM,EAAQC,EAAAA,WAAWC,gBACnBC,EAA6B,UAAhBH,aAAK,EAALA,EAAOI,MAY1B,OACIC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQT,EAAU,CAAA,cACDD,EACbD,UAAWY,EAAAA,QACPC,EAAAA,KACAN,EAAaO,EAAAA,aAAsBC,EAAAA,cACnCf,GACHD,SAde,iBAAbA,EACHU,EAAAA,IAACO,aAAWC,OAAM,CAAAlB,SAAEA,IAA6B,IAgB/C"}
1	+ {"version":3,"file":"card.js","sources":["../../../src/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext } from \"react\";\n\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./card.styles\";\nimport type { CardProps } from \"./types\";\n\n// @catalog\n/** A themed container surface for grouping related content. */\nexport const Card = ({\n children,\n className,\n \"data-testid\": dataTestId = \"card\",\n ...otherProps\n}: CardProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const theme = useContext(ThemeContext);\n const isDarkMode = theme?.mode === \"dark\";\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderContent = () =>\n typeof children === \"string\" ? (\n <Typography.BodyBL>{children}</Typography.BodyBL>\n ) : (\n children\n );\n\n return (\n <div\n {...otherProps}\n data-testid={dataTestId}\n className={clsx(\n styles.card,\n isDarkMode ? styles.cardDarkMode : styles.cardLightMode,\n className\n )}\n >\n {renderContent()}\n </div>\n );\n};\n"],"names":["_a","children","className","dataTestId","otherProps","__rest","theme","useContext","ThemeContext","isDarkMode","mode","_jsx","Object","assign","clsx","styles.card","styles.cardDarkMode","styles.cardLightMode","Typography","BodyBL"],"mappings":"0UAUqBA,IAAA,IAAAC,SACjBA,EAAQC,UACRA,EACA,cAAeC,EAAa,QAAMH,EAC/BI,EAAUC,EAAAA,OAAAL,EAJI,wCASjB,MAAMM,EAAQC,EAAAA,WAAWC,gBACnBC,EAA6B,UAAhBH,aAAK,EAALA,EAAOI,MAY1B,OACIC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQT,EAAU,CAAA,cACDD,EACbD,UAAWY,EAAAA,QACPC,EAAAA,KACAN,EAAaO,EAAAA,aAAsBC,EAAAA,cACnCf,GACHD,SAde,iBAAbA,EACHU,EAAAA,IAACO,aAAWC,OAAM,CAAAlB,SAAEA,IAA6B,IAgB/C"}