npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.3 → 4.0.0-alpha.5 - Mend

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

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 (1629) hide show

package/accordion/accordion-item.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./accordion-item.styles_kchcad.css";const c="c1l63f33",e="c4kcze2",i="e1cbnvn7",t="e7t4rdi",o="e1vcwm5y",a="t145i3ve",d="t1a4gj3",n="ixofgdc",r="i1ifv2g7",s="c15k7llx",l="ecqtwmd",m="caja2xa";export{s as chevronIcon,c as container,e as containerExpanded,m as contentContainer,i as expandCollapseButton,o as expandCollapseButtonCollapsible,t as expandCollapseButtonExpanded,l as expandable,n as iconContainer,r as iconContainerExpanded,a as title,d as titleSmall};
+import"./accordion-item.styles_1j4eb32.css";const c="c1l63f33",e="c4kcze2",i="e1cbnvn7",t="e7t4rdi",o="e1vcwm5y",a="t145i3ve",d="t1a4gj3",n="ixofgdc",r="i1ifv2g7",s="c15k7llx",l="ecqtwmd",m="caja2xa";export{s as chevronIcon,c as container,e as containerExpanded,m as contentContainer,i as expandCollapseButton,o as expandCollapseButtonCollapsible,t as expandCollapseButtonExpanded,l as expandable,n as iconContainer,r as iconContainerExpanded,a as title,d as titleSmall};
 //# sourceMappingURL=accordion-item.styles.js.map

package/accordion/accordion-item.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"accordion-item.styles.js","sources":["../../src/accordion/accordion-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Motion,\n Radius,\n Spacing,\n} from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const container = css`\n background-color: ${Colour.bg};\n border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const containerExpanded = css`\n padding-bottom: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const expandCollapseButton = css`\n background: transparent;\n border: none;\n border-radius: ${Radius[\"sm\"]};\n outline: none;\n text-align: left;\n user-select: text;\n\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: ${Spacing[\"spacing-48\"]};\n padding: ${Spacing[\"spacing-16\"]} 0;\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 0;\n }\n`;\n\nexport const expandCollapseButtonExpanded = css`\n padding-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const expandCollapseButtonCollapsible = css`\n cursor: pointer;\n`;\n\nexport const title = css`\n flex: 1;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-standard\"]};\n color: ${Colour[\"text\"]};\n ${Font[\"heading-sm-bold\"]}\n`;\n\nexport const titleSmall = css`\n ${Font[\"heading-xs-bold\"]}\n`;\n\nexport const iconContainer = css`\n transform: rotate(180deg);\n transition: transform ${Motion[\"duration-250\"]}${Motion[\"ease-default\"]};\n`;\n\nexport const iconContainerExpanded = css`\n transform: rotate(0deg);\n`;\n\nexport const chevronIcon = css`\n height: 1.25rem;\n width: 1.25rem;\n color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const expandable = css`\n overflow: hidden;\n`;\n\nexport const contentContainer = css`\n display: inline-block;\n padding-right: ${Spacing[\"spacing-64\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n padding-right: 0;\n }\n`;\n"],"names":["container","containerExpanded","expandCollapseButton","expandCollapseButtonExpanded","expandCollapseButtonCollapsible","title","titleSmall","iconContainer","iconContainerExpanded","chevronIcon","expandable","contentContainer"],"mappings":"~~oEAeO~~,MAAMA,EAAS,WAKTC,EAAiB,UAIjBC,EAAoB,WAsBpBC,EAA4B,UAI5BC,EAA+B,WAI/BC,EAAK,WAOLC,EAAU,UAIVC,EAAa,UAKbC,EAAqB,WAIrBC,EAAW,WAMXC,EAAU,UAIVC,EAAgB"}
1	+ {"version":3,"file":"accordion-item.styles.js","sources":["../../src/accordion/accordion-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Motion,\n Radius,\n Spacing,\n} from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const container = css`\n background-color: ${Colour.bg};\n border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const containerExpanded = css`\n padding-bottom: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const expandCollapseButton = css`\n background: transparent;\n border: none;\n border-radius: ${Radius[\"sm\"]};\n outline: none;\n text-align: left;\n user-select: text;\n\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: ${Spacing[\"spacing-48\"]};\n padding: ${Spacing[\"spacing-16\"]} 0;\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 0;\n }\n`;\n\nexport const expandCollapseButtonExpanded = css`\n padding-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const expandCollapseButtonCollapsible = css`\n cursor: pointer;\n`;\n\nexport const title = css`\n flex: 1;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-standard\"]};\n color: ${Colour[\"text\"]};\n ${Font[\"heading-sm-bold\"]}\n`;\n\nexport const titleSmall = css`\n ${Font[\"heading-xs-bold\"]}\n`;\n\nexport const iconContainer = css`\n transform: rotate(180deg);\n transition: transform ${Motion[\"duration-250\"]}${Motion[\"ease-default\"]};\n`;\n\nexport const iconContainerExpanded = css`\n transform: rotate(0deg);\n`;\n\nexport const chevronIcon = css`\n height: 1.25rem;\n width: 1.25rem;\n color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const expandable = css`\n overflow: hidden;\n`;\n\nexport const contentContainer = css`\n display: inline-block;\n padding-right: ${Spacing[\"spacing-64\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n padding-right: 0;\n }\n`;\n"],"names":["container","containerExpanded","expandCollapseButton","expandCollapseButtonExpanded","expandCollapseButtonCollapsible","title","titleSmall","iconContainer","iconContainerExpanded","chevronIcon","expandable","contentContainer"],"mappings":"qEAeO,MAAMA,EAAS,WAKTC,EAAiB,UAIjBC,EAAoB,WAsBpBC,EAA4B,UAI5BC,EAA+B,WAI/BC,EAAK,WAOLC,EAAU,UAIVC,EAAa,UAKbC,EAAqB,WAIrBC,EAAW,WAMXC,EAAU,UAIVC,EAAgB"}

package/accordion/{accordion-item.styles_kchcad.css → accordion-item.styles_1j4eb32.css} RENAMED Viewed

@@ -1,12 +1,12 @@
-.c1l63f33{background-color:var(--fds-colour-bg);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+@layer fds{.c1l63f33{background-color:var(--fds-colour-bg);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
 .c4kcze2{padding-bottom:var(--fds-spacing-16);}
 .e1cbnvn7{background:transparent;border:none;border-radius:var(--fds-radius-sm);outline:none;text-align:left;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;gap:var(--fds-spacing-48);padding:var(--fds-spacing-16) 0;}.e1cbnvn7:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0;}
 .e7t4rdi{padding-bottom:var(--fds-spacing-8);}
 .e1vcwm5y{cursor:pointer;}
-.t145i3ve{-webkit-flex:1;-ms-flex:1;flex:1;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-standard);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-standard);color:var(--fds-colour-text);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-sm);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-heading-lh-sm);letter-spacing:var(--fds-font-heading-ls-sm);}
-.t1a4gj3{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);}
+.t145i3ve{-webkit-flex:1;-ms-flex:1;flex:1;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-standard);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-standard);color:var(--fds-colour-text);font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-sm);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-heading-lh-sm);letter-spacing:var(--fds-font-heading-ls-sm);}
+.t1a4gj3{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);}
 .ixofgdc{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform var(--fds-motion-duration-250)var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-250)var(--fds-motion-timing-ease-default);}
 .i1ifv2g7{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
 .c15k7llx{height:1.25rem;width:1.25rem;color:var(--fds-colour-icon-primary);}
 .ecqtwmd{overflow:hidden;}
-.caja2xa{display:inline-block;padding-right:var(--fds-spacing-64);}:where(body.fds-breakpoint-lg-max) .caja2xa{padding-right:0;}
+.caja2xa{display:inline-block;padding-right:var(--fds-spacing-64);}:where(body.fds-breakpoint-lg-max) .caja2xa{padding-right:0;}}

package/accordion/accordion.d.ts CHANGED Viewed

@@ -1,5 +1,24 @@
 import type React from "react";
 import type { AccordionProps } from "./types";
+/**
+ * A vertically stacked set of collapsible content panels.
+ *
+ * Use `Accordion` to organise related content into independently expandable
+ * sections with shared expand/collapse state. The container synchronises item
+ * states and maintains correct heading-level hierarchy.
+ *
+ * Sub-components:
+ * - `Accordion.Item` — a single collapsible panel with an imperative ref handle.
+ */
 export declare const Accordion: (({ children, title, enableExpandAll, initialDisplay, showTitleInMobile, id, "data-testid": testId, className, headingLevel, onExpandCollapseChange, }: AccordionProps) => JSX.Element) & {
+    /**
+     * Renders an individual collapsible section within an `Accordion`.
+     *
+     * Each item has a clickable header that toggles its content panel. The expanded
+     * state can be individually controlled via the `expanded` prop, or left to the
+     * parent `Accordion` to manage through its "Show all" / "Hide all" mechanism.
+     * Exposes an imperative ref handle (`AccordionItemHandle`) for programmatic
+     * expand/collapse control.
+     */
     Item: (props: import("./types").AccordionItemProps & React.RefAttributes<import("./types").AccordionItemHandle>) => React.ReactElement | null;
 };

package/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\nexport const Accordion = Object.assign(AccordionBase, {\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":"waAUA,~~MAoJaA~~,EAAYC,OAAOC,~~QApJV~~,EAClBC,WAAQC,MACRA,EACAC,mBAAkB,EAClBC,iBAAiB,aACjBC,qBAAoB,EACpBC,KACA,cAAeC,EACfC,YACAC,eAAe,EACfC,6BAEA,MAAOC,EAAWC,GAAgBC,EACX,eAAnBT,IAEGU,EAAcC,GAAmBF,GAAkB,IACnDG,EAAWC,GAAgBJ,EAAkC,CAAA,GAEpEK,GAAU,KACNH,GAAgB,EAAK,GACtB,IAEHG,GAAU,KACFJ,IACAJ,SAAAA,EAAyBC,GAC7B,GACD,CAACA,EAAWG,IAEfI,GAAU,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,EAACC,EAAiBC,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,EAAA,MAAA,CACIzC,GAAIA,EAAE,cACOC,EACbC,UAAWwC,EAAKC,EAAyBzC,GAAUP,SAAA,CA/CtDC,GAAUC,EAKX4C,EAAA,MAAA,CACIvC,UAAWwC,EACPE,GACC7C,IACIF,GACDgD,GACPlD,SAAA,CAEAC,GACGkC,EAAA,KAAA,CACI5B,UAAWwC,EACPI,GACC/C,GAAqBgD,GACzB,cACW,kBAAiB,aACjB5C,EAAYR,SAEvBC,IAGRC,GAvCLiC,EAACkB,EAAM,CACH9C,UAAW+C,EAAyB,cACxB,mCACZC,QAAS9B,EACT+B,UAAU,OACVC,KAAK,SACLC,SAAS,iBAERhD,EAAY,WAAa,gBAOvB,KAiDFV,MAEmB,~~GAIkB~~,~~CAClD2D~~,KAAMC"}
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":"waAUA,MA8JaA,EAAYC,OAAOC,QA9JV,EAClBC,WAAQC,MACRA,EACAC,mBAAkB,EAClBC,iBAAiB,aACjBC,qBAAoB,EACpBC,KACA,cAAeC,EACfC,YACAC,eAAe,EACfC,6BAEA,MAAOC,EAAWC,GAAgBC,EACX,eAAnBT,IAEGU,EAAcC,GAAmBF,GAAkB,IACnDG,EAAWC,GAAgBJ,EAAkC,CAAA,GAEpEK,GAAU,KACNH,GAAgB,EAAK,GACtB,IAEHG,GAAU,KACFJ,IACAJ,SAAAA,EAAyBC,GAC7B,GACD,CAACA,EAAWG,IAEfI,GAAU,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,EAACC,EAAiBC,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,EAAA,MAAA,CACIzC,GAAIA,EAAE,cACOC,EACbC,UAAWwC,EAAKC,EAAyBzC,GAAUP,SAAA,CA/CtDC,GAAUC,EAKX4C,EAAA,MAAA,CACIvC,UAAWwC,EACPE,GACC7C,IACIF,GACDgD,GACPlD,SAAA,CAEAC,GACGkC,EAAA,KAAA,CACI5B,UAAWwC,EACPI,GACC/C,GAAqBgD,GACzB,cACW,kBAAiB,aACjB5C,EAAYR,SAEvBC,IAGRC,GAvCLiC,EAACkB,EAAM,CACH9C,UAAW+C,EAAyB,cACxB,mCACZC,QAAS9B,EACT+B,UAAU,OACVC,KAAK,SACLC,SAAS,iBAERhD,EAAY,WAAa,gBAOvB,KAiDFV,MAEmB,GAckB,CAUlD2D,KAAMC"}

package/accordion/accordion.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./accordion.styles_ijglff.css";const t="a1tkz57u",o="txz4s1p",c="t1pllc04",s="texr0v4",e="t8054ua",r="e1e1ok07";export{t as accordionWrapper,r as expandCollapseLink,s as title,e as titleHidden,o as titleWrapper,c as titleWrapperHidden};
+import"./accordion.styles_bzrfrs.css";const t="a1tkz57u",o="txz4s1p",c="t1pllc04",r="texr0v4",s="t8054ua",e="e1e1ok07";export{t as accordionWrapper,e as expandCollapseLink,r as title,s as titleHidden,o as titleWrapper,c as titleWrapperHidden};
 //# sourceMappingURL=accordion.styles.js.map

package/{cjs/accordion/accordion.styles_ijglff.css → accordion/accordion.styles_bzrfrs.css} RENAMED Viewed

@@ -1,6 +1,6 @@
-.a1tkz57u{width:100%;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+@layer fds{.a1tkz57u{width:100%;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
 .txz4s1p{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding-bottom:var(--fds-spacing-16);}
 :where(body.fds-breakpoint-sm-max) .t1pllc04{display:none;}
-.texr0v4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-webkit-flex:1;-ms-flex:1;flex:1;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-md);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-sm-max) .texr0v4{text-align:left;}
+.texr0v4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-webkit-flex:1;-ms-flex:1;flex:1;font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-md);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-sm-max) .texr0v4{text-align:left;}
 :where(body.fds-breakpoint-sm-max) .t8054ua{display:none;visibility:hidden;}
-.e1e1ok07{margin:calc(var(--fds-spacing-16) * -1);margin-left:0px;white-space:nowrap;}
+.e1e1ok07{margin:calc(var(--fds-spacing-16) * -1);margin-left:0px;white-space:nowrap;}}

package/accordion/types.d.ts CHANGED Viewed

@@ -1,33 +1,73 @@
+/** Props for the `Accordion` container component. */
 export interface AccordionProps {
     children: JSX.Element | JSX.Element[];
+    /** Section heading rendered above the item list. Visually hidden on mobile unless `showTitleInMobile` is true. */
     title?: string | undefined;
+    /**
+     * Renders the "Show all" / "Hide all" toggle button.
+     *
+     * @default true
+     */
     enableExpandAll?: boolean | undefined;
+    /**
+     * Controls whether all items start expanded or collapsed.
+     *
+     * @default "expand-all"
+     */
     initialDisplay?: "collapse-all" | "expand-all" | undefined;
+    /**
+     * When `true`, the `title` remains visible on mobile viewports.
+     *
+     * @default false
+     */
     showTitleInMobile?: boolean | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
+    /**
+     * The ARIA heading level for the accordion and item titles.
+     * Specify a custom value to reflect the component's hierarchy within a page.
+     * When a title is provided, the title level = n and the item title level = n + 1.
+     * Otherwise, the item title level = n.
+     *
+     * @default 2
+     */
     headingLevel?: number | undefined;
+    /**
+     * Called after the expand/collapse state changes.
+     */
     onExpandCollapseChange?: ((expanded: boolean) => void) | undefined;
 }
+/** Visual size variant for an `Accordion.Item`. */
 export type AccordionItemType = "default" | "small";
+/** Props for the `Accordion.Item` sub-component. */
 export interface AccordionItemProps {
     title: string | JSX.Element;
     children: JSX.Element | JSX.Element[];
     /**
-     * Omit or set this to undefined to allow 'Hide All'/'Show All' in parent to take precedence
-     * for cases where we want the default expand behaviour
+     * Controls the expanded state of this item. Omit (or pass `undefined`) to let the parent
+     * "Show all" / "Hide all" button manage the state. Pass an explicit boolean to take
+     * individual control of this item.
      */
     expanded?: boolean | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
+    /** Visual size variant for the accordion item. */
     type?: AccordionItemType | undefined;
+    /**
+     * When `false`, the item header is non-interactive and the content panel is
+     * always visible.
+     *
+     * @default true
+     */
     collapsible?: boolean | undefined;
 }
+/** Imperative API available on the `Accordion.Item` ref. */
 export interface AccordionItemApi {
     expand: () => void;
     collapse: () => void;
     isExpanded: () => boolean;
 }
+/** Ref handle for `Accordion.Item`. */
 export type AccordionItemHandle = HTMLDivElement & AccordionItemApi;

package/alert/alert.d.ts CHANGED Viewed

@@ -1,2 +1,10 @@
 import type { AlertProps } from "./types";
+/**
+ * Displays an inline contextual banner with a severity-coded message.
+ *
+ * Use `Alert` to surface feedback, status, or supplementary information without
+ * interrupting the user's workflow. Supports five severity tones, an optional
+ * icon, a call-to-action link, and a collapsible content area for lengthy
+ * messages.
+ */
 export declare const Alert: ({ type, className, children, actionLink, actionLinkIcon, sizeType, showIcon, customIcon, maxCollapsedHeight, role, ...otherProps }: AlertProps) => JSX.Element;

package/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\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","Alert","_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/*\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","Alert","_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/alert/alert.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./alert.styles_1ygel36.css";const a={maxCollapsedHeight:"--fds-internal-alert-textWrapperContainer-maxCollapsedHeight"},t="wa04j5f",e="we966c0",l="wiv49ur",s="w1rjxx7d",w="w1xcaq6x",r="w3tklvf",x="a2kejy0",i="a1p0o35j",n="a1u5ns39",p="a1v4ljri",c="a1vwvhsw",v="a1l988e7",g="a1tifh24",j="amvh5gt",o="aesypwo",y="a1a9q3y5",f="a10b5gf8",m="cg7mawv",d="t1npk24x",h="t11jn0l3",q="t1fvdgaj",u="t1myaiqw",C="swmwiyq",_="s1ypbatn",b="sxtdaq0",k="c19cf4gt",H="cnxzujv",A="c1u44bt8";export{o as actionLinkText,y as actionLinkTextDefault,f as actionLinkTextSmall,j as alertIconDescription,p as alertIconError,g as alertIconInfo,c as alertIconSuccess,v as alertIconWarning,x as alertIconWrapper,n as alertIconWrapperDefault,i as alertIconWrapperSmall,k as chevronIcon,A as chevronIconCollapsed,H as chevronIconExpanded,m as contentContainer,C as showMoreButton,_ as showMoreButtonDefault,b as showMoreButtonSmall,u as textWrapper,d as textWrapperContainer,q as textWrapperContainerCollapsed,h as textWrapperContainerShowMoreWithLink,a as tokens,t as wrapper,r as wrapperDescription,e as wrapperError,w as wrapperInfo,l as wrapperSuccess,s as wrapperWarning};
+import"./alert.styles_patwo2.css";const a={maxCollapsedHeight:"--fds-internal-alert-textWrapperContainer-maxCollapsedHeight"},t="wa04j5f",e="we966c0",s="wiv49ur",w="w1rjxx7d",l="w1xcaq6x",r="w3tklvf",p="a2kejy0",x="a1p0o35j",i="a1u5ns39",n="a1v4ljri",c="a1vwvhsw",o="a1l988e7",v="a1tifh24",j="amvh5gt",f="aesypwo",g="a1a9q3y5",m="a10b5gf8",y="cg7mawv",d="t1npk24x",h="t11jn0l3",q="t1fvdgaj",u="t1myaiqw",C="swmwiyq",_="s1ypbatn",b="sxtdaq0",k="c19cf4gt",H="cnxzujv",A="c1u44bt8";export{f as actionLinkText,g as actionLinkTextDefault,m as actionLinkTextSmall,j as alertIconDescription,n as alertIconError,v as alertIconInfo,c as alertIconSuccess,o as alertIconWarning,p as alertIconWrapper,i as alertIconWrapperDefault,x as alertIconWrapperSmall,k as chevronIcon,A as chevronIconCollapsed,H as chevronIconExpanded,y as contentContainer,C as showMoreButton,_ as showMoreButtonDefault,b as showMoreButtonSmall,u as textWrapper,d as textWrapperContainer,q as textWrapperContainerCollapsed,h as textWrapperContainerShowMoreWithLink,a as tokens,t as wrapper,r as wrapperDescription,e as wrapperError,l as wrapperInfo,s as wrapperSuccess,w as wrapperWarning};
 //# sourceMappingURL=alert.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.styles.js","sources":["../../src/alert/alert.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Spacing } from \"../theme/tokens\";\n\nexport const tokens = {\n maxCollapsedHeight:\n \"--fds-internal-alert-textWrapperContainer-maxCollapsedHeight\",\n};\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\nexport const wrapper = css`\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n display: flex;\n border-left: ${Border[\"width-020\"]} ${Border[\"solid\"]};\n`;\n\nexport const wrapperError = css`\n background: ${Colour[\"bg-error\"]};\n border-left-color: ${Colour[\"border-error\"]};\n`;\n\nexport const wrapperSuccess = css`\n background: ${Colour[\"bg-success\"]};\n border-left-color: ${Colour[\"border-success\"]};\n`;\n\nexport const wrapperWarning = css`\n background: ${Colour[\"bg-warning\"]};\n border-left-color: ${Colour[\"border-warning\"]};\n`;\n\nexport const wrapperInfo = css`\n background: ${Colour[\"bg-info\"]};\n border-left-color: ${Colour[\"border-info\"]};\n`;\n\nexport const wrapperDescription = css`\n background: ${Colour[\"bg-strong\"]};\n border-left-color: ${Colour[\"border-strong\"]};\n`;\n\n// =============================================================================\n// ALERT ICON WRAPPER\n// =============================================================================\nexport const alertIconWrapper = css`\n display: flex;\n align-items: center;\n height: 1lh;\n margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const alertIconWrapperSmall = css`\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n`;\n\nexport const alertIconWrapperDefault = css`\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n`;\n\nexport const alertIconError = css`\n svg {\n color: ${Colour[\"icon-error\"]};\n }\n`;\n\nexport const alertIconSuccess = css`\n svg {\n color: ${Colour[\"icon-success\"]};\n }\n`;\n\nexport const alertIconWarning = css`\n svg {\n color: ${Colour[\"icon-warning\"]};\n }\n`;\n\nexport const alertIconInfo = css`\n svg {\n color: ${Colour[\"icon-info\"]};\n }\n`;\n\nexport const alertIconDescription = css`\n svg {\n color: ${Colour[\"icon-subtle\"]};\n }\n`;\n\n// =============================================================================\n// ACTION LINK TEXT\n// =============================================================================\nexport const actionLinkText = css`\n display: flex;\n align-items: center;\n align-self: flex-start;\n\n svg {\n height: 1rem;\n width: 1rem;\n margin-left: ${Spacing[\"spacing-4\"]};\n }\n`;\n\nexport const actionLinkTextDefault = css`\n ${Font[\"body-md-semibold\"]}\n margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const actionLinkTextSmall = css`\n ${Font[\"body-sm-semibold\"]}\n margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\n// =============================================================================\n// CONTENT CONTAINER\n// =============================================================================\nexport const contentContainer = css`\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow-wrap: anywhere;\n`;\n\n// =============================================================================\n// TEXT WRAPPER CONTAINER\n// =============================================================================\nexport const textWrapperContainer = css`\n display: flex;\n flex-direction: column;\n flex: 1;\n order: 1;\n`;\n\nexport const textWrapperContainerShowMoreWithLink = css`\n margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const textWrapperContainerCollapsed = css`\n ${tokens.maxCollapsedHeight}: initial;\n max-height: var(${tokens.maxCollapsedHeight});\n overflow: hidden;\n -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n`;\n\n// =============================================================================\n// TEXT WRAPPER\n// =============================================================================\nexport const textWrapper = css`\n color: ${Colour.text};\n`;\n\n// =============================================================================\n// SHOW MORE BUTTON\n// =============================================================================\nexport const showMoreButton = css`\n display: flex;\n align-items: center;\n align-self: flex-start;\n gap: ${Spacing[\"spacing-4\"]};\n margin-top: ${Spacing[\"spacing-8\"]};\n order: 2;\n\n cursor: pointer;\n user-select: none;\n border: none;\n background: transparent;\n\n color: ${Colour[\"text-primary\"]};\n`;\n\nexport const showMoreButtonDefault = css`\n ${Font[\"body-md-semibold\"]}\n`;\n\nexport const showMoreButtonSmall = css`\n ${Font[\"body-sm-semibold\"]}\n`;\n\n// =============================================================================\n// CHEVRON ICON\n// =============================================================================\nexport const chevronIcon = css`\n transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n`;\n\nexport const chevronIconExpanded = css`\n transform: rotate(180deg);\n`;\n\nexport const chevronIconCollapsed = css`\n transform: rotate(0deg);\n`;\n"],"names":["tokens","maxCollapsedHeight","wrapper","wrapperError","wrapperSuccess","wrapperWarning","wrapperInfo","wrapperDescription","alertIconWrapper","alertIconWrapperSmall","alertIconWrapperDefault","alertIconError","alertIconSuccess","alertIconWarning","alertIconInfo","alertIconDescription","actionLinkText","actionLinkTextDefault","actionLinkTextSmall","contentContainer","textWrapperContainer","textWrapperContainerShowMoreWithLink","textWrapperContainerCollapsed","textWrapper","showMoreButton","showMoreButtonDefault","showMoreButtonSmall","chevronIcon","chevronIconExpanded","chevronIconCollapsed"],"mappings":"~~wDAIO~~,MAAMA,EAAS,CAClBC,mBACI,gEAMKC,EAAO,UAMPC,EAAY,UAKZC,EAAc,UAKdC,EAAc,WAKdC,EAAW,WAKXC,EAAkB,UAQlBC,EAAgB,UAOhBC,EAAqB,WAOrBC,EAAuB,WAOvBC,EAAc,WAMdC,EAAgB,WAMhBC,EAAgB,WAMhBC,EAAa,WAMbC,EAAoB,UASpBC,EAAc,UAYdC,EAAqB,WAKrBC,EAAmB,WAQnBC,EAAgB,UAUhBC,EAAoB,WAOpBC,EAAoC,WAIpCC,EAA6B,WAW7BC,EAAW,WAOXC,EAAc,UAgBdC,EAAqB,WAIrBC,EAAmB,UAOnBC,EAAW,WAIXC,EAAmB,UAInBC,EAAoB"}
1	+ {"version":3,"file":"alert.styles.js","sources":["../../src/alert/alert.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Spacing } from \"../theme/tokens\";\n\nexport const tokens = {\n maxCollapsedHeight:\n \"--fds-internal-alert-textWrapperContainer-maxCollapsedHeight\",\n};\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\nexport const wrapper = css`\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n display: flex;\n border-left: ${Border[\"width-020\"]} ${Border[\"solid\"]};\n`;\n\nexport const wrapperError = css`\n background: ${Colour[\"bg-error\"]};\n border-left-color: ${Colour[\"border-error\"]};\n`;\n\nexport const wrapperSuccess = css`\n background: ${Colour[\"bg-success\"]};\n border-left-color: ${Colour[\"border-success\"]};\n`;\n\nexport const wrapperWarning = css`\n background: ${Colour[\"bg-warning\"]};\n border-left-color: ${Colour[\"border-warning\"]};\n`;\n\nexport const wrapperInfo = css`\n background: ${Colour[\"bg-info\"]};\n border-left-color: ${Colour[\"border-info\"]};\n`;\n\nexport const wrapperDescription = css`\n background: ${Colour[\"bg-strong\"]};\n border-left-color: ${Colour[\"border-strong\"]};\n`;\n\n// =============================================================================\n// ALERT ICON WRAPPER\n// =============================================================================\nexport const alertIconWrapper = css`\n display: flex;\n align-items: center;\n height: 1lh;\n margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const alertIconWrapperSmall = css`\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n`;\n\nexport const alertIconWrapperDefault = css`\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n`;\n\nexport const alertIconError = css`\n svg {\n color: ${Colour[\"icon-error\"]};\n }\n`;\n\nexport const alertIconSuccess = css`\n svg {\n color: ${Colour[\"icon-success\"]};\n }\n`;\n\nexport const alertIconWarning = css`\n svg {\n color: ${Colour[\"icon-warning\"]};\n }\n`;\n\nexport const alertIconInfo = css`\n svg {\n color: ${Colour[\"icon-info\"]};\n }\n`;\n\nexport const alertIconDescription = css`\n svg {\n color: ${Colour[\"icon-subtle\"]};\n }\n`;\n\n// =============================================================================\n// ACTION LINK TEXT\n// =============================================================================\nexport const actionLinkText = css`\n display: flex;\n align-items: center;\n align-self: flex-start;\n\n svg {\n height: 1rem;\n width: 1rem;\n margin-left: ${Spacing[\"spacing-4\"]};\n }\n`;\n\nexport const actionLinkTextDefault = css`\n ${Font[\"body-md-semibold\"]}\n margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const actionLinkTextSmall = css`\n ${Font[\"body-sm-semibold\"]}\n margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\n// =============================================================================\n// CONTENT CONTAINER\n// =============================================================================\nexport const contentContainer = css`\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow-wrap: anywhere;\n`;\n\n// =============================================================================\n// TEXT WRAPPER CONTAINER\n// =============================================================================\nexport const textWrapperContainer = css`\n display: flex;\n flex-direction: column;\n flex: 1;\n order: 1;\n`;\n\nexport const textWrapperContainerShowMoreWithLink = css`\n margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const textWrapperContainerCollapsed = css`\n ${tokens.maxCollapsedHeight}: initial;\n max-height: var(${tokens.maxCollapsedHeight});\n overflow: hidden;\n -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n`;\n\n// =============================================================================\n// TEXT WRAPPER\n// =============================================================================\nexport const textWrapper = css`\n color: ${Colour.text};\n`;\n\n// =============================================================================\n// SHOW MORE BUTTON\n// =============================================================================\nexport const showMoreButton = css`\n display: flex;\n align-items: center;\n align-self: flex-start;\n gap: ${Spacing[\"spacing-4\"]};\n margin-top: ${Spacing[\"spacing-8\"]};\n order: 2;\n\n cursor: pointer;\n user-select: none;\n border: none;\n background: transparent;\n\n color: ${Colour[\"text-primary\"]};\n`;\n\nexport const showMoreButtonDefault = css`\n ${Font[\"body-md-semibold\"]}\n`;\n\nexport const showMoreButtonSmall = css`\n ${Font[\"body-sm-semibold\"]}\n`;\n\n// =============================================================================\n// CHEVRON ICON\n// =============================================================================\nexport const chevronIcon = css`\n transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n`;\n\nexport const chevronIconExpanded = css`\n transform: rotate(180deg);\n`;\n\nexport const chevronIconCollapsed = css`\n transform: rotate(0deg);\n`;\n"],"names":["tokens","maxCollapsedHeight","wrapper","wrapperError","wrapperSuccess","wrapperWarning","wrapperInfo","wrapperDescription","alertIconWrapper","alertIconWrapperSmall","alertIconWrapperDefault","alertIconError","alertIconSuccess","alertIconWarning","alertIconInfo","alertIconDescription","actionLinkText","actionLinkTextDefault","actionLinkTextSmall","contentContainer","textWrapperContainer","textWrapperContainerShowMoreWithLink","textWrapperContainerCollapsed","textWrapper","showMoreButton","showMoreButtonDefault","showMoreButtonSmall","chevronIcon","chevronIconExpanded","chevronIconCollapsed"],"mappings":"uDAIO,MAAMA,EAAS,CAClBC,mBACI,gEAMKC,EAAO,UAMPC,EAAY,UAKZC,EAAc,UAKdC,EAAc,WAKdC,EAAW,WAKXC,EAAkB,UAQlBC,EAAgB,UAOhBC,EAAqB,WAOrBC,EAAuB,WAOvBC,EAAc,WAMdC,EAAgB,WAMhBC,EAAgB,WAMhBC,EAAa,WAMbC,EAAoB,UASpBC,EAAc,UAYdC,EAAqB,WAKrBC,EAAmB,WAQnBC,EAAgB,UAUhBC,EAAoB,WAOpBC,EAAoC,WAIpCC,EAA6B,WAW7BC,EAAW,WAOXC,EAAc,UAgBdC,EAAqB,WAIrBC,EAAmB,UAOnBC,EAAW,WAIXC,EAAmB,UAInBC,EAAoB"}

package/{cjs/alert/alert.styles_1ygel36.css → alert/alert.styles_patwo2.css} RENAMED Viewed

@@ -1,4 +1,4 @@
-.wa04j5f{padding:var(--fds-spacing-8) var(--fds-spacing-16);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-left:var(--fds-border-width-020) var(--fds-border-style-solid);}
+@layer fds{.wa04j5f{padding:var(--fds-spacing-8) var(--fds-spacing-16);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-left:var(--fds-border-width-020) var(--fds-border-style-solid);}
 .we966c0{background:var(--fds-colour-bg-error);border-left-color:var(--fds-colour-border-error);}
 .wiv49ur{background:var(--fds-colour-bg-success);border-left-color:var(--fds-colour-border-success);}
 .w1rjxx7d{background:var(--fds-colour-bg-warning);border-left-color:var(--fds-colour-border-warning);}
@@ -13,16 +13,16 @@
 .a1tifh24 svg{color:var(--fds-colour-icon-info);}
 .amvh5gt svg{color:var(--fds-colour-icon-subtle);}
 .aesypwo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;}.aesypwo svg{height:1rem;width:1rem;margin-left:var(--fds-spacing-4);}
-.a1a9q3y5{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);margin-top:var(--fds-spacing-8);}
-.a10b5gf8{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);margin-top:var(--fds-spacing-4);}
+.a1a9q3y5{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);margin-top:var(--fds-spacing-8);}
+.a10b5gf8{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);margin-top:var(--fds-spacing-4);}
 .cg7mawv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;overflow-wrap:anywhere;}
 .t1npk24x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-order:1;-ms-flex-order:1;order:1;}
 .t11jn0l3{margin-bottom:var(--fds-spacing-8);}
 .t1fvdgaj{--fds-internal-alert-textWrapperContainer-maxCollapsedHeight:initial;max-height:var(--fds-internal-alert-textWrapperContainer-maxCollapsedHeight);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to bottom, black 50%, transparent 100%);mask-image:linear-gradient(to bottom, black 50%, transparent 100%);}
 .t1myaiqw{color:var(--fds-colour-text);}
 .swmwiyq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;gap:var(--fds-spacing-4);margin-top:var(--fds-spacing-8);-webkit-order:2;-ms-flex-order:2;order:2;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;background:transparent;color:var(--fds-colour-text-primary);}
-.s1ypbatn{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
-.sxtdaq0{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);}
+.s1ypbatn{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.sxtdaq0{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);}
 .c19cf4gt{-webkit-transition:-webkit-transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);transition:transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);}
 .cnxzujv{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
-.c1u44bt8{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.c1u44bt8{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}}

package/alert/types.d.ts CHANGED Viewed

@@ -1,15 +1,39 @@
 import type React from "react";
+/** Visual severity or purpose of an alert banner. */
 export type AlertType = "success" | "warning" | "error" | "info" | "description";
+/** Controls the overall size of the alert, affecting typography and icon dimensions. */
 export type AlertSizeType = "default" | "small";
+/** Props for the `Alert` component. */
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Visual severity or purpose of the alert banner. */
     type: AlertType;
     "data-testid"?: string | undefined;
+    /**
+     * Anchor attributes for an optional call-to-action link rendered below the
+     * alert content. The link is styled with a trailing arrow icon by default;
+     * supply `actionLinkIcon` to replace that icon.
+     */
     actionLink?: React.AnchorHTMLAttributes<HTMLAnchorElement> | undefined;
+    /**
+     * Renders the type-specific icon to the left of the content.
+     *
+     * @default false
+     */
     showIcon?: boolean | undefined;
+    /**
+     * Replaces the default trailing arrow on the action link. Only visible when
+     * `actionLink` is also provided.
+     */
     actionLinkIcon?: JSX.Element | undefined;
+    /** Controls the overall size of the alert, affecting typography and icon dimensions. */
     sizeType?: AlertSizeType | undefined;
-    /** Custom alert icon to be rendered, replacing the default alert icons */
+    /** Replaces the default type-specific icon. Only visible when `showIcon` is `true`. */
     customIcon?: JSX.Element | undefined;
-    /** Specifies the maximum height of content, after which it is collapsed */
+    /**
+     * Maximum height in pixels before the content area is collapsed. When the
+     * rendered content exceeds this value a "Show more / Show less" toggle is
+     * displayed. The content container is marked as inert whenever the collapsed
+     * state is active.
+     */
     maxCollapsedHeight?: number | undefined;
 }

package/animations/loading-dots/loading-dots.styles_1rgrrmw.css CHANGED Viewed

@@ -1,2 +1,2 @@
-.c18cuuv6{margin:0 auto;}
-.p182s5k4{height:16px;width:64px;}
+@layer fds{.c18cuuv6{margin:0 auto;}
+.p182s5k4{height:16px;width:64px;}}

package/animations/loading-dots/lottie-animation.styles_1m15v69.css CHANGED Viewed

	@@ -1 +1 @@
1	- .v15yka8m{height:16px;width:64px;}
1	+ @layer fds{.v15yka8m{height:16px;width:64px;}}

package/animations/loading-dots-spinner/loading-dots-spinner.styles_1hcqkhs.css CHANGED Viewed

@@ -1,2 +1,2 @@
-.cw28mbd{--fds-internal-loadingDotsSpinner-container-colour:initial;margin:0 auto;}
-.pvakuuw{height:200px;width:200px;}
+@layer fds{.cw28mbd{--fds-internal-loadingDotsSpinner-container-colour:initial;margin:0 auto;}
+.pvakuuw{height:200px;width:200px;}}

package/animations/loading-dots-spinner/lottie-animation.styles_13d1unb.css CHANGED Viewed

	@@ -1 +1 @@
1	- .v1n5n6pc{height:200px;width:200px;}
1	+ @layer fds{.v1n5n6pc{height:200px;width:200px;}}

package/animations/loading-spinner/loading-spinner.styles_n6xoft.css CHANGED Viewed

@@ -1,2 +1,2 @@
-.c1ea41s2{margin:0 auto;padding:var(--fds-spacing-32) var(--fds-spacing-16);}
-.p16u2leb{height:200px;width:200px;}
+@layer fds{.c1ea41s2{margin:0 auto;padding:var(--fds-spacing-32) var(--fds-spacing-16);}
+.p16u2leb{height:200px;width:200px;}}

package/animations/loading-spinner/lottie-animation.styles_bnn4qt.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vlg9767{height:200px;width:200px;}
1	+ @layer fds{.vlg9767{height:200px;width:200px;}}

package/avatar/avatar.d.ts CHANGED Viewed

@@ -1,2 +1,9 @@
 import type { AvatarProps } from "./types";
+/**
+ * Displays a circular avatar representing a user or entity.
+ *
+ * Use when you need a compact visual identity marker in lists, headers, or
+ * cards. Accepts a string (rendered as an initial) or a JSX element such as an
+ * image or icon.
+ */
 export declare const Avatar: ({ children, sizeType, "data-testid": testId, className, ...otherProps }: AvatarProps) => JSX.Element;

package/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\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":["Avatar","_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":"~~0SAMO~~,MAAMA,EAAUC,IAAA,IAAAC,SACnBA,EAAQC,SACRA,EAAW,UACX,cAAeC,EAAS,SAAQC,UAChCA,GAASJ,EACNK,EAAUC,EAAAN,EALM,mDAiCnB,OACIO,EAAA,MAAAC,OAAAC,OAAA,CAAA,EACQJ,EAAU,CAAA,cACDF,EACbC,UAAWM,EACPC,EACa,UAAbT,EACMU,EACAC,EACNT,GACHH,SAjCa,YAClB,IAAKA,EACD,OAAOM,QAGX,GAAwB,iBAAbN,EAAuB,CAC9B,MAAMa,EACW,UAAbZ,EAAuBa,EAAWC,OAASD,EAAWE,OAC1D,OACIV,EAACO,EAAa,CACVI,OAAO,WACPd,UAAWe,WAEVC,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/*\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":["Avatar","_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":"0SAaO,MAAMA,EAAUC,IAAA,IAAAC,SACnBA,EAAQC,SACRA,EAAW,UACX,cAAeC,EAAS,SAAQC,UAChCA,GAASJ,EACNK,EAAUC,EAAAN,EALM,mDAiCnB,OACIO,EAAA,MAAAC,OAAAC,OAAA,CAAA,EACQJ,EAAU,CAAA,cACDF,EACbC,UAAWM,EACPC,EACa,UAAbT,EACMU,EACAC,EACNT,GACHH,SAjCa,YAClB,IAAKA,EACD,OAAOM,QAGX,GAAwB,iBAAbN,EAAuB,CAC9B,MAAMa,EACW,UAAbZ,EAAuBa,EAAWC,OAASD,EAAWE,OAC1D,OACIV,EAACO,EAAa,CACVI,OAAO,WACPd,UAAWe,WAEVC,OAAOC,cACmB,QAAvBrB,EAAAC,EAASqB,YAAY,UAAE,IAAAtB,EAAAA,EAAI,GAC7BuB,eAGd,CAEA,OAAOtB,CAAQ,EAeVuB,KACC"}

package/avatar/avatar.styles_16efw4.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.a1mqk4w8{border-radius:50%;background-color:var(--fds-colour-bg-primary-subtler);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+@layer fds{.a1mqk4w8{border-radius:50%;background-color:var(--fds-colour-bg-primary-subtler);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
 .a11siwsi{width:2.5rem;height:2.5rem;}
 .a1m51nni{width:1.5rem;height:1.5rem;}
-.a12u9rhz{color:var(--fds-colour-text-primary);}
+.a12u9rhz{color:var(--fds-colour-text-primary);}}

package/avatar/types.d.ts CHANGED Viewed

@@ -1,6 +1,17 @@
+/** Visual size options for the `Avatar` component. */
 export type AvatarSize = "default" | "small";
+/** Props for the `Avatar` component. */
 export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * A string or JSX element to display inside the avatar. When a string is
+     * provided, only the first Unicode code point is rendered as an uppercase
+     * initial. Pass a JSX element (e.g. an `<img>`) to render custom content.
+     */
     children: string | JSX.Element;
+    /**
+     * Controls the visual size of the avatar. `"small"` renders a compact variant
+     * with reduced typography; `"default"` uses the standard size.
+     */
     sizeType?: AvatarSize | undefined;
     "data-testid"?: string | undefined;
 }

package/badge/badge.d.ts CHANGED Viewed

@@ -1,2 +1,9 @@
 import type { BadgeProps } from "./types";
+/**
+ * Displays a small indicator badge for notifications or status.
+ *
+ * Use `Badge` to surface counts or status dots on icons, avatars, and
+ * navigation items. Renders as an overlay on a child element or as a standalone
+ * inline indicator when no child is provided.
+ */
 export declare const Badge: ({ badgeOffset, children, className, color, count, "data-testid": testId, variant, ...otherProps }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/badge/badge.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import o from"clsx";import{useRef as s}from"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as i}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{tokens as a,badge as m,badgeWrapper as n,badgeWrapperIsOverlay as d,badgeOverlay as l}from"./badge.styles.js";const c=new Set(["number","number-with-border","square-number"]),u=u=>{var{badgeOffset:p,children:f,className:h,color:v="default",count:b=0,"data-testid":j="badge",variant:g="number"}=u,x=e(u,["badgeOffset","children","className","color","count","data-testid","variant"]);const y=function(e){return e<=999?e.toString():1e3===e?"1K":"1K+"}(b),N=c.has(g),k=s(null);return i(k,{[a.wrapper.offsetX]:null==p?void 0:p[0],[a.wrapper.offsetY]:null==p?void 0:p[1]}),t("div",{className:o(void 0!==f&&l),children:[r("div",{ref:k,className:o(n,void 0!==f&&d),children:r("div",Object.assign({"data-testid":j,"data-variant":g,"data-color":v,className:o(m,h)},x,{children:N?y:null}))}),f]})};export{u as Badge};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import s from"clsx";import{useRef as o}from"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as a}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{tokens as i,badge as m,badgeWrapper as n,badgeWrapperIsOverlay as l,badgeOverlay as d}from"./badge.styles.js";const p=new Set(["number","number-with-border","square-number"]),c=c=>{var{badgeOffset:u,children:f,className:h,color:b="default",count:j=0,"data-testid":v="badge",variant:g="number"}=c,x=e(c,["badgeOffset","children","className","color","count","data-testid","variant"]);const y=function(e){return e<=999?e.toString():1e3===e?"1K":"1K+"}(j),N=p.has(g),k=o(null);return a(k,{[i.wrapper.offsetX]:null==u?void 0:u[0],[i.wrapper.offsetY]:null==u?void 0:u[1]}),t("span",{className:s(void 0!==f&&d),children:[r("span",{ref:k,className:s(n,void 0!==f&&l),children:r("span",Object.assign({"data-testid":v,"data-variant":g,"data-color":b,className:s(m,h)},x,{children:N?y:null}))}),f]})};export{c as Badge};
 //# sourceMappingURL=badge.js.map

package/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\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<~~HTMLDivElement~~>(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 <~~div~~ className={clsx(children !== undefined && styles.badgeOverlay)}>\n <~~div~~\n ref={wrapperRef}\n className={clsx(\n styles.badgeWrapper,\n children !== undefined && styles.badgeWrapperIsOverlay\n )}\n >\n <~~div~~\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 </~~div~~>\n </~~div~~>\n {children}\n </~~div~~>\n );\n};\n"],"names":["variantsToShowCount","Set","Badge","_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":"qlBAYA,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,~~kBAGSC~~,EAASC,IAAA,IAAAC,YAClBA,EAAWC,SACXA,EAAQC,UACRA,EAASC,MACTA,EAAQ,UAASC,MACjBA,EAAQ,EACR,cAAeC,EAAS,QAAOC,QAC/BA,EAAU,UAAQP,EACfQ,EAAUC,EAAAT,EARK,CAAA,cAAA,WAAA,YAAA,QAAA,QAAA,cAAA,YAalB,MAAMU,~~EAxBV~~,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,~~CAoByBO~~,CAAgBP,GAC/BQ,EAAkBhB,EAAoBiB,IAAIP,GAK1CQ,EAAaC,~~EAAuB~~,~~MAU1C~~,OARAC,EAAcF,EAAY,CACtB,CAACG,EAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,EAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,EAAA,~~MAAA~~,~~CAAKnB~~,UAAWoB,OAAkBC,IAAbtB,GAA0BuB,~~aAC3CC~~,EAAA,~~MAAA~~,CACIC,IAAKZ,EACLZ,UAAWoB,EACPK,OACaJ,IAAbtB,GAA0B2B,GAC7B3B,SAEDwB,EAAA,~~MAAAI~~,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAKS,EAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,~~IACC~~"}
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","Badge","_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":"qlBAYA,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,kBAUSC,EAASC,IAAA,IAAAC,YAClBA,EAAWC,SACXA,EAAQC,UACRA,EAASC,MACTA,EAAQ,UAASC,MACjBA,EAAQ,EACR,cAAeC,EAAS,QAAOC,QAC/BA,EAAU,UAAQP,EACfQ,EAAUC,EAAAT,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,EAAkBhB,EAAoBiB,IAAIP,GAK1CQ,EAAaC,EAAwB,MAU3C,OARAC,EAAcF,EAAY,CACtB,CAACG,EAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,EAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,EAAA,OAAA,CAAMnB,UAAWoB,OAAkBC,IAAbtB,GAA0BuB,aAC5CC,EAAA,OAAA,CACIC,IAAKZ,EACLZ,UAAWoB,EACPK,OACaJ,IAAbtB,GAA0B2B,GAC7B3B,SAEDwB,EAAA,OAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAKS,EAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,IACE"}

package/badge/badge.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./badge.styles_1yrxocm.css";const e={wrapper:{offsetX:"--fds-internal-badge-wrapper-offsetX",offsetY:"--fds-internal-badge-wrapper-offsetY"}},s="b12fiya5",t="b1sxe5ht",f="bt512pc",r="bnm5diy";export{r as badge,s as badgeOverlay,t as badgeWrapper,f as badgeWrapperIsOverlay,e as tokens};
+import"./badge.styles_1c3c6wj.css";const e={wrapper:{offsetX:"--fds-internal-badge-wrapper-offsetX",offsetY:"--fds-internal-badge-wrapper-offsetY"}},s="b12fiya5",t="b1sxe5ht",f="bt512pc",a="bnm5diy";export{a as badge,s as badgeOverlay,t as badgeWrapper,f as badgeWrapperIsOverlay,e as tokens};
 //# sourceMappingURL=badge.styles.js.map

package/badge/badge.styles_1c3c6wj.css ADDED Viewed

@@ -0,0 +1,16 @@
+@layer fds{.b12fiya5{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}
+.bt512pc{position:absolute;top:0;right:0;-webkit-transform:translate(50%, -25%) translate(
+            var(--fds-internal-badge-wrapper-offsetX, 0px),
+            var(--fds-internal-badge-wrapper-offsetY, 0px)
+        );-moz-transform:translate(50%, -25%) translate(
+            var(--fds-internal-badge-wrapper-offsetX, 0px),
+            var(--fds-internal-badge-wrapper-offsetY, 0px)
+        );-ms-transform:translate(50%, -25%) translate(
+            var(--fds-internal-badge-wrapper-offsetX, 0px),
+            var(--fds-internal-badge-wrapper-offsetY, 0px)
+        );transform:translate(50%, -25%) translate(
+            var(--fds-internal-badge-wrapper-offsetX, 0px),
+            var(--fds-internal-badge-wrapper-offsetY, 0px)
+        );}
+.bnm5diy{background-color:var(--fds-colour-bg-primary);color:var(--fds-colour-text-inverse);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}.bnm5diy[data-variant="number"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-full);}.bnm5diy[data-variant="number-with-border"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-full);box-shadow:0 0 0 var(--fds-border-width-020) var(--fds-colour-bg);}.bnm5diy[data-variant="dot"]{border-radius:50%;width:0.5rem;height:0.5rem;}.bnm5diy[data-variant="dot-with-border"]{border-radius:50%;width:0.5rem;height:0.5rem;box-shadow:0 0 0 var(--fds-border-width-020) var(--fds-colour-bg);}.bnm5diy[data-variant="square-number"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-sm);padding:0.25rem 0.4375rem;}.bnm5diy[data-variant="square-number"][data-color="default"]{background-color:var(--fds-colour-bg-primary-subtler);color:var(--fds-colour-text-primary);}.bnm5diy[data-color="important"]{background-color:var(--fds-colour-icon-error);}}