npm - @veeqo/ui - Versions diffs - 15.5.0 → 15.7.0 - Mend

@veeqo/ui 15.5.0 → 15.7.0

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

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /*\n The TanStack Table instance.\n /\n table: Table<any>;\n\n /\n The Header within the TanStack Table instance.\n /\n header: Header<any, any>;\n\n /\n The index of this header in the grid.\n /\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false \| SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/\n A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n /\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const headerCellClassname = buildClassnames([\n styles.headerCell,\n pinnedCellClassName,\n 'data-grid-header-cell',\n ]);\n\n const HeaderContents = flexRender(headerRenderer, header.getContext());\n const HeaderContentComponent = sortable ? 'button' : 'div';\n const headerContentClassname = buildClassnames([\n sortable ? styles.clickableHeaderContent : styles.headerContent,\n 'data-grid-header-content',\n ]);\n const headerContentProps = {\n justifyContent,\n textAlign,\n } as CSSProperties;\n\n return (\n <th\n className={headerCellClassname}\n role=\"columnheader\"\n scope=\"col\"\n aria-colindex={index + 1}\n aria-label={getAriaLabel?.()}\n style={pinnedCellStyles}\n aria-sort={ariaSort}\n >\n {/ Header content /}\n <HeaderContentComponent\n className={headerContentClassname}\n style={headerContentProps}\n onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n >\n {/ If we've been given just text to render, apply styles for text overflow /}\n {typeof headerRenderer === 'string' ? (\n <span className={styles.headerOverflow}>{HeaderContents}</span>\n ) : (\n HeaderContents\n )}\n\n {sortable && <SortIcon isSorted={isSorted} />}\n </HeaderContentComponent>\n\n {/ Column resizer */}\n {resizeable && (\n <Resizer\n getIsResizing={header.column.getIsResizing}\n getResizeHandler={header.getResizeHandler()}\n resetSize={header.column.resetSize}\n deltaOffset={\n table.options.columnResizeMode === 'onChange'\n ? null\n : table.getState().columnSizingInfo.deltaOffset\n }\n />\n )}\n </th>\n );\n};\n"],"names":["React"],"mappings":"~~;;;;;;;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /*\n The TanStack Table instance.\n /\n table: Table<any>;\n\n /\n The Header within the TanStack Table instance.\n /\n header: Header<any, any>;\n\n /\n The index of this header in the grid.\n /\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false \| SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/\n A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n /\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const headerCellClassname = buildClassnames([\n styles.headerCell,\n pinnedCellClassName,\n 'data-grid-header-cell',\n ]);\n\n const HeaderContents = flexRender(headerRenderer, header.getContext());\n const HeaderContentComponent = sortable ? 'button' : 'div';\n const headerContentClassname = buildClassnames([\n sortable ? styles.clickableHeaderContent : styles.headerContent,\n 'data-grid-header-content',\n ]);\n const headerContentProps = {\n justifyContent,\n textAlign,\n } as CSSProperties;\n\n return (\n <th\n className={headerCellClassname}\n role=\"columnheader\"\n scope=\"col\"\n aria-colindex={index + 1}\n aria-label={getAriaLabel?.()}\n style={pinnedCellStyles}\n aria-sort={ariaSort}\n >\n {/ Header content /}\n <HeaderContentComponent\n className={headerContentClassname}\n style={headerContentProps}\n onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n >\n {/ If we've been given just text to render, apply styles for text overflow /}\n {typeof headerRenderer === 'string' ? (\n <span className={styles.headerOverflow}>{HeaderContents}</span>\n ) : (\n HeaderContents\n )}\n\n {sortable && <SortIcon isSorted={isSorted} />}\n </HeaderContentComponent>\n\n {/ Column resizer */}\n {resizeable && (\n <Resizer\n getIsResizing={header.column.getIsResizing}\n getResizeHandler={header.getResizeHandler()}\n resetSize={header.column.resetSize}\n deltaOffset={\n table.options.columnResizeMode === 'onChange'\n ? null\n : table.getState().columnSizingInfo.deltaOffset\n }\n />\n )}\n </th>\n );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/Radio/Radio.cjs CHANGED Viewed

@@ -9,13 +9,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-const Radio = React.forwardRef(({ checked, value, name, hint, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
+const Radio = React.forwardRef(({ checked, value, name, hint, disabled, onChange, id, children, 'aria-label': ariaLabel, error, ...otherProps }, ref) => {
     const handleChange = React.useCallback((e) => {
         onChange(e.currentTarget.checked, value);
     }, [onChange, value]);
     const componentId = React.useMemo(() => id !== null && id !== void 0 ? id : generateId.generateId('radio'), [id]);
     const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;
-    return (React__default.default.createElement(Choice.Choice, { htmlFor: componentId, disabled: disabled, hint: hint, ...otherProps },
+    return (React__default.default.createElement(Choice.Choice, { htmlFor: componentId, disabled: disabled, hint: hint, error: error, ...otherProps },
         React__default.default.createElement("input", { className: Radio_module.input, id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy }),
         children));
 });

package/dist/components/Radio/Radio.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.cjs","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Radio.module.scss';\n\ntype RadioValue = string \| number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n id?: string;\n className?: string;\n checked: boolean;\n value?: RadioValue;\n disabled?: boolean;\n name?: string;\n onChange: (checked: boolean, value?: RadioValue) => void;\n children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n checked,\n value,\n name,\n hint,\n disabled,\n onChange,\n id,\n children,\n 'aria-label': ariaLabel,\n ...otherProps\n }: RadioProps,\n ref,\n ) => {\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n const componentId = useMemo(() => id ?? generateId('radio'), [id]);\n const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n return (\n <Choice htmlFor={componentId} disabled={disabled} hint={hint} {...otherProps}>\n <input\n className={styles.input}\n id={componentId}\n type=\"radio\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n onChange={handleChange}\n ref={ref}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n />\n {children}\n </Choice>\n );\n },\n);\n"],"names":["forwardRef","useCallback","useMemo","generateId","React","Choice","styles"],"mappings":";;;;;;;;;;;~~AAmBO~~,MAAM,KAAK,GAAGA,gBAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,MAAM,WAAW,GAAGC,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAClE,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;~~AAEhE~~,~~IAAA,~~QACEC,~~sBAAA~~,~~CAAA,aAAA,CAACC,~~aAAM,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,KAAM,UAAU,EAAA;~~AAC1E~~,QAAAD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAEE,YAAM,CAAC,KAAK,EACvB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,gBACI,SAAS,EAAA,kBAAA,EACH,eAAe,EAAA,CACjC;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}
1	+ {"version":3,"file":"Radio.cjs","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Radio.module.scss';\n\ntype RadioValue = string \| number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n /** Unique identifier for the radio input /\n id?: string;\n /* Additional CSS class name /\n className?: string;\n /* Whether the radio is selected /\n checked: boolean;\n /* The value associated with this radio option /\n value?: RadioValue;\n /* Whether the radio is disabled and non-interactive /\n disabled?: boolean;\n /* Name attribute for grouping related radio inputs /\n name?: string;\n /* Callback fired when the radio selection changes /\n onChange: (checked: boolean, value?: RadioValue) => void;\n /* Content rendered inside the radio input element */\n children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n checked,\n value,\n name,\n hint,\n disabled,\n onChange,\n id,\n children,\n 'aria-label': ariaLabel,\n error,\n ...otherProps\n }: RadioProps,\n ref,\n ) => {\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n const componentId = useMemo(() => id ?? generateId('radio'), [id]);\n const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n return (\n <Choice htmlFor={componentId} disabled={disabled} hint={hint} error={error} {...otherProps}>\n <input\n className={styles.input}\n id={componentId}\n type=\"radio\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n onChange={handleChange}\n ref={ref}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n />\n {children}\n </Choice>\n );\n },\n);\n"],"names":["forwardRef","useCallback","useMemo","generateId","React","Choice","styles"],"mappings":";;;;;;;;;;;AA2BO,MAAM,KAAK,GAAGA,gBAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,MAAM,WAAW,GAAGC,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAClE,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;IAEhE,QACEC,qCAACC,aAAM,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,KAAM,UAAU,EAAA;AACxF,QAAAD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAEE,YAAM,CAAC,KAAK,EACvB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,gBACI,SAAS,EAAA,kBAAA,EACH,eAAe,EAAA,CACjC;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}

package/dist/components/Radio/Radio.d.ts CHANGED Viewed

@@ -2,13 +2,21 @@ import React, { AriaAttributes, ReactNode } from 'react';
 import { ForwardedChoiceProps } from '../Choice';
 type RadioValue = string | number;
 export interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {
+    /** Unique identifier for the radio input */
     id?: string;
+    /** Additional CSS class name */
     className?: string;
+    /** Whether the radio is selected */
     checked: boolean;
+    /** The value associated with this radio option */
     value?: RadioValue;
+    /** Whether the radio is disabled and non-interactive */
     disabled?: boolean;
+    /** Name attribute for grouping related radio inputs */
     name?: string;
+    /** Callback fired when the radio selection changes */
     onChange: (checked: boolean, value?: RadioValue) => void;
+    /** Content rendered inside the radio input element */
     children?: ReactNode;
 }
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Radio/Radio.js CHANGED Viewed

@@ -3,13 +3,13 @@ import { Choice } from '../Choice/Choice.js';
 import { generateId } from '../../utils/generateId.js';
 import styles from './Radio.module.scss.js';
-const Radio = forwardRef(({ checked, value, name, hint, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
+const Radio = forwardRef(({ checked, value, name, hint, disabled, onChange, id, children, 'aria-label': ariaLabel, error, ...otherProps }, ref) => {
     const handleChange = useCallback((e) => {
         onChange(e.currentTarget.checked, value);
     }, [onChange, value]);
     const componentId = useMemo(() => id !== null && id !== void 0 ? id : generateId('radio'), [id]);
     const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;
-    return (React__default.createElement(Choice, { htmlFor: componentId, disabled: disabled, hint: hint, ...otherProps },
+    return (React__default.createElement(Choice, { htmlFor: componentId, disabled: disabled, hint: hint, error: error, ...otherProps },
         React__default.createElement("input", { className: styles.input, id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy }),
         children));
 });

package/dist/components/Radio/Radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Radio.module.scss';\n\ntype RadioValue = string \| number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n id?: string;\n className?: string;\n checked: boolean;\n value?: RadioValue;\n disabled?: boolean;\n name?: string;\n onChange: (checked: boolean, value?: RadioValue) => void;\n children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n checked,\n value,\n name,\n hint,\n disabled,\n onChange,\n id,\n children,\n 'aria-label': ariaLabel,\n ...otherProps\n }: RadioProps,\n ref,\n ) => {\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n const componentId = useMemo(() => id ?? generateId('radio'), [id]);\n const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n return (\n <Choice htmlFor={componentId} disabled={disabled} hint={hint} {...otherProps}>\n <input\n className={styles.input}\n id={componentId}\n type=\"radio\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n onChange={handleChange}\n ref={ref}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n />\n {children}\n </Choice>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;~~AAmBO~~,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAClE,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;~~AAEhE~~,~~IAAA,~~QACEA,~~cAAA~~,~~CAAA,aAAA,CAAC,~~MAAM,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,KAAM,UAAU,EAAA;~~AAC1E~~,QAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,gBACI,SAAS,EAAA,kBAAA,EACH,eAAe,EAAA,CACjC;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}
1	+ {"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Radio.module.scss';\n\ntype RadioValue = string \| number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n /** Unique identifier for the radio input /\n id?: string;\n /* Additional CSS class name /\n className?: string;\n /* Whether the radio is selected /\n checked: boolean;\n /* The value associated with this radio option /\n value?: RadioValue;\n /* Whether the radio is disabled and non-interactive /\n disabled?: boolean;\n /* Name attribute for grouping related radio inputs /\n name?: string;\n /* Callback fired when the radio selection changes /\n onChange: (checked: boolean, value?: RadioValue) => void;\n /* Content rendered inside the radio input element */\n children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n checked,\n value,\n name,\n hint,\n disabled,\n onChange,\n id,\n children,\n 'aria-label': ariaLabel,\n error,\n ...otherProps\n }: RadioProps,\n ref,\n ) => {\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n const componentId = useMemo(() => id ?? generateId('radio'), [id]);\n const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n return (\n <Choice htmlFor={componentId} disabled={disabled} hint={hint} error={error} {...otherProps}>\n <input\n className={styles.input}\n id={componentId}\n type=\"radio\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n onChange={handleChange}\n ref={ref}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n />\n {children}\n </Choice>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;AA2BO,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAClE,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;IAEhE,QACEA,6BAAC,MAAM,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,KAAM,UAAU,EAAA;AACxF,QAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,gBACI,SAAS,EAAA,kBAAA,EACH,eAAe,EAAA,CACjC;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}

package/dist/components/Radio/Radio.module.scss.cjs CHANGED Viewed

@@ -2,8 +2,8 @@
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
-___$insertStyle("._input_1ycnq_1 {\n  appearance: none;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin: 3px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-light);\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n  transition: box-shadow 0.1s;\n}\n._input_1ycnq_1:checked {\n  position: relative;\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:checked::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  background-color: var(--colors-secondary-blue-base);\n  border-radius: 50%;\n}\n._input_1ycnq_1:hover {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:active {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:focus {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._input_1ycnq_1:disabled {\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--colors-neutral-ink-lightest);\n  cursor: default;\n}\n._input_1ycnq_1:disabled::before {\n  background-color: var(--colors-neutral-ink-light);\n}");
-var styles = {"input":"_input_1ycnq_1"};
+___$insertStyle("._input_17v2n_1 {\n  appearance: none;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin: 3px;\n  background-color: transparent;\n  border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-light));\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n  transition: box-shadow 0.1s;\n}\n._input_17v2n_1:checked {\n  position: relative;\n  border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:checked::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n  border-radius: 50%;\n}\n._input_17v2n_1:hover {\n  border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:active {\n  border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:focus {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n  outline: 0;\n}\n._input_17v2n_1:disabled {\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--colors-neutral-ink-lightest);\n  cursor: default;\n}\n._input_17v2n_1:disabled::before {\n  background-color: var(--colors-neutral-ink-light);\n}");
+var styles = {"input":"_input_17v2n_1"};
 module.exports = styles;
 //# sourceMappingURL=Radio.module.scss.cjs.map

package/dist/components/Radio/Radio.module.scss.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.module.scss.cjs","sources":["../../../src/components/Radio/Radio.module.scss"],"sourcesContent":[".input {\n appearance: none;\n box-sizing: border-box;\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n margin: 3px;\n background-color: transparent;\n border: 2px solid var(--colors-neutral-ink-light);\n border-radius: 50%;\n outline: none;\n cursor: pointer;\n\n transition: box-shadow 0.1s;\n\n &:checked {\n position: relative;\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:checked::before {\n content: '';\n width: 10px;\n height: 10px;\n position: absolute;\n top: 2px;\n left: 2px;\n background-color: var(--colors-secondary-blue-base);\n border-radius: 50%;\n }\n\n &:hover {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:active {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n outline: 0;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-ink-lightest);\n cursor: default;\n }\n\n &:disabled::before {\n background-color: var(--colors-neutral-ink-light);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,~~uqCAAA~~;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}
1	+ {"version":3,"file":"Radio.module.scss.cjs","sources":["../../../src/components/Radio/Radio.module.scss"],"sourcesContent":[".input {\n appearance: none;\n box-sizing: border-box;\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n margin: 3px;\n background-color: transparent;\n border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-light));\n border-radius: 50%;\n outline: none;\n cursor: pointer;\n\n transition: box-shadow 0.1s;\n\n &:checked {\n position: relative;\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:checked::before {\n content: '';\n width: 10px;\n height: 10px;\n position: absolute;\n top: 2px;\n left: 2px;\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-radius: 50%;\n }\n\n &:hover {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:active {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n outline: 0;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-ink-lightest);\n cursor: default;\n }\n\n &:disabled::before {\n background-color: var(--colors-neutral-ink-light);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,00CAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}

package/dist/components/Radio/Radio.module.scss.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
-insertStyle("._input_1ycnq_1 {\n  appearance: none;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin: 3px;\n  background-color: transparent;\n  border: 2px solid var(--colors-neutral-ink-light);\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n  transition: box-shadow 0.1s;\n}\n._input_1ycnq_1:checked {\n  position: relative;\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:checked::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  background-color: var(--colors-secondary-blue-base);\n  border-radius: 50%;\n}\n._input_1ycnq_1:hover {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:active {\n  border-color: var(--colors-secondary-blue-base);\n}\n._input_1ycnq_1:focus {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n  outline: 0;\n}\n._input_1ycnq_1:disabled {\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--colors-neutral-ink-lightest);\n  cursor: default;\n}\n._input_1ycnq_1:disabled::before {\n  background-color: var(--colors-neutral-ink-light);\n}");
-var styles = {"input":"_input_1ycnq_1"};
+insertStyle("._input_17v2n_1 {\n  appearance: none;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin: 3px;\n  background-color: transparent;\n  border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-light));\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n  transition: box-shadow 0.1s;\n}\n._input_17v2n_1:checked {\n  position: relative;\n  border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:checked::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n  border-radius: 50%;\n}\n._input_17v2n_1:hover {\n  border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:active {\n  border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:focus {\n  box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n  outline: 0;\n}\n._input_17v2n_1:disabled {\n  box-shadow: none;\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--colors-neutral-ink-lightest);\n  cursor: default;\n}\n._input_17v2n_1:disabled::before {\n  background-color: var(--colors-neutral-ink-light);\n}");
+var styles = {"input":"_input_17v2n_1"};
 export { styles as default };
 //# sourceMappingURL=Radio.module.scss.js.map

package/dist/components/Radio/Radio.module.scss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.module.scss.js","sources":["../../../src/components/Radio/Radio.module.scss"],"sourcesContent":[".input {\n appearance: none;\n box-sizing: border-box;\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n margin: 3px;\n background-color: transparent;\n border: 2px solid var(--colors-neutral-ink-light);\n border-radius: 50%;\n outline: none;\n cursor: pointer;\n\n transition: box-shadow 0.1s;\n\n &:checked {\n position: relative;\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:checked::before {\n content: '';\n width: 10px;\n height: 10px;\n position: absolute;\n top: 2px;\n left: 2px;\n background-color: var(--colors-secondary-blue-base);\n border-radius: 50%;\n }\n\n &:hover {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:active {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n outline: 0;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-ink-lightest);\n cursor: default;\n }\n\n &:disabled::before {\n background-color: var(--colors-neutral-ink-light);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,~~uqCAAA~~;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}
1	+ {"version":3,"file":"Radio.module.scss.js","sources":["../../../src/components/Radio/Radio.module.scss"],"sourcesContent":[".input {\n appearance: none;\n box-sizing: border-box;\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n margin: 3px;\n background-color: transparent;\n border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-light));\n border-radius: 50%;\n outline: none;\n cursor: pointer;\n\n transition: box-shadow 0.1s;\n\n &:checked {\n position: relative;\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:checked::before {\n content: '';\n width: 10px;\n height: 10px;\n position: absolute;\n top: 2px;\n left: 2px;\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-radius: 50%;\n }\n\n &:hover {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:active {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n outline: 0;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-ink-lightest);\n cursor: default;\n }\n\n &:disabled::before {\n background-color: var(--colors-neutral-ink-light);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,00CAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}

package/dist/components/ToastsLayout/ToastsLayout.cjs CHANGED Viewed

@@ -24,8 +24,9 @@ const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max
         onCloseRef.current = onClose;
     }, [onClose]);
     React.useEffect(() => {
-        if (typeof max === 'number' && toasts.length > max)
+        if (typeof max === 'number' && toasts.length > max && onCloseRef.current) {
             onCloseRef.current(toasts[0].key);
+        }
     }, [toasts, max]);
     // Clean up refs only after exit animation completes (via onExited callback)
     const handleExited = React.useCallback((key) => {
@@ -53,7 +54,7 @@ const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max
                     exit: Toast_module.exit,
                     exitActive: Toast_module.exitActive,
                 }, onExited: () => handleExited(toast.key) },
-                React__default.default.createElement(Toast.Toast, { ref: nodeRef, className: className, e2eClassName: e2eClassName, minWidth: resolvedMinWidth, last: index === toasts.length - 1, onClose: () => onClose(toast.key), ...toast })));
+                React__default.default.createElement(Toast.Toast, { ref: nodeRef, className: className, e2eClassName: e2eClassName, minWidth: resolvedMinWidth, last: index === toasts.length - 1, onClose: onClose ? () => onClose(toast.key) : undefined, ...toast })));
         }))), document.body);
 };

package/dist/components/ToastsLayout/ToastsLayout.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToastsLayout.cjs","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Toast } from './components/Toast';\nimport toastStyles from './components/Toast.module.scss';\nimport styles from './ToastsLayout.module.scss';\nimport { ToastsLayoutPropTypes } from './types';\n\n/*\n A fixed-position container that manages stacking, animating, and dismissing toast notifications.\n * Renders into a portal on `document.body`. Only one instance should exist per application.\n */\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n className,\n e2eClassName,\n toasts,\n minWidth = '50vw',\n max = 3,\n onClose,\n}) => {\n const nodeRefs = useRef(new Map<string, { current: HTMLDivElement \| null }>());\n\n // Stable ref to avoid re-triggering the dismiss effect when onClose identity changes\n const onCloseRef = useRef(onClose);\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (typeof max === 'number' && toasts.length > max) onCloseRef.current(toasts[0].key);\n }, [toasts, max]);\n\n // Clean up refs only after exit animation completes (via onExited callback)\n const handleExited = useCallback((key: string) => {\n nodeRefs.current.delete(key);\n }, []);\n\n let resolvedMinWidth: string \| undefined;\n if (!minWidth && minWidth !== 0) {\n resolvedMinWidth = undefined;\n } else if (typeof minWidth === 'number' \|\| !isNaN(Number(minWidth))) {\n resolvedMinWidth = `${minWidth}px`;\n } else {\n resolvedMinWidth = String(minWidth);\n }\n\n return createPortal(\n <FlexCol\n alignItems=\"center\"\n gap=\"base\"\n className={styles.ToastsLayoutContainer}\n aria-live=\"polite\"\n aria-atomic=\"false\"\n >\n <TransitionGroup component={null}>\n {[...toasts].reverse().map((toast, index) => {\n if (!nodeRefs.current.has(toast.key)) {\n nodeRefs.current.set(toast.key, { current: null });\n }\n const nodeRef = nodeRefs.current.get(toast.key)!;\n\n return (\n <CSSTransition\n nodeRef={nodeRef}\n key={toast.key}\n timeout={500}\n classNames={{\n enter: toastStyles.enter,\n enterActive: toastStyles.enterActive,\n exit: toastStyles.exit,\n exitActive: toastStyles.exitActive,\n }}\n onExited={() => handleExited(toast.key)}\n >\n <Toast\n ref={nodeRef}\n className={className}\n e2eClassName={e2eClassName}\n minWidth={resolvedMinWidth}\n last={index === toasts.length - 1}\n onClose={() => onClose(toast.key)}\n {...toast}\n />\n </CSSTransition>\n );\n })}\n </TransitionGroup>\n </FlexCol>,\n document.body,\n );\n};\n"],"names":["useRef","useEffect","useCallback","createPortal","React","FlexCol","styles","TransitionGroup","CSSTransition","toastStyles","Toast"],"mappings":";;;;;;;;;;;;;;AASA;;;AAGG;MACU,YAAY,GAA8B,CAAC,EACtD,SAAS,EACT,YAAY,EACZ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,GAAG,GAAG,CAAC,EACP,OAAO,GACR,KAAI;IACH,MAAM,QAAQ,GAAGA,YAAM,CAAC,IAAI,GAAG,EAA8C,CAAC;;AAG9E,IAAA,MAAM,UAAU,GAAGA,YAAM,CAAC,OAAO,CAAC;IAClCC,eAAS,CAAC,MAAK;AACb,QAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAC9B,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEbA,eAAS,CAAC,MAAK;~~QACb~~,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,MAAM,CAAC,MAAM,GAAG,GAAG;~~YAAE~~,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;~~AACvF~~,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;;AAGjB,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAAC,CAAC,GAAW,KAAI;AAC/C,QAAA,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,IAAI,gBAAoC;AACxC,IAAA,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,CAAC,EAAE;QAC/B,gBAAgB,GAAG,SAAS;AAC7B,IAAA;AAAM,SAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE;AACnE,QAAA,gBAAgB,GAAG,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAI;AACnC,IAAA;AAAM,SAAA;AACL,QAAA,gBAAgB,GAAG,MAAM,CAAC,QAAQ,CAAC;AACpC,IAAA;IAED,OAAOC,qBAAY,CACjBC,sBAAA,CAAA,aAAA,CAACC,eAAO,IACN,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAC,MAAM,EACV,SAAS,EAAEC,mBAAM,CAAC,qBAAqB,EAAA,WAAA,EAC7B,QAAQ,EAAA,aAAA,EACN,OAAO,EAAA;QAEnBF,sBAAA,CAAA,aAAA,CAACG,oCAAe,IAAC,SAAS,EAAE,IAAI,EAAA,EAC7B,CAAC,GAAG,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;YAC1C,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;AACpC,gBAAA,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACnD,YAAA;AACD,YAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAE;AAEhD,YAAA,QACEH,sBAAA,CAAA,aAAA,CAACI,kCAAa,IACZ,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,OAAO,EAAE,GAAG,EACZ,UAAU,EAAE;oBACV,KAAK,EAAEC,YAAW,CAAC,KAAK;oBACxB,WAAW,EAAEA,YAAW,CAAC,WAAW;oBACpC,IAAI,EAAEA,YAAW,CAAC,IAAI;oBACtB,UAAU,EAAEA,YAAW,CAAC,UAAU;iBACnC,EACD,QAAQ,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,EAAA;gBAEvCL,sBAAA,CAAA,aAAA,CAACM,WAAK,~~IACJ~~,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,gBAAgB,EAC1B,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EACjC,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,~~EAAA~~,~~GAC7B~~,KAAK,EAAA,CACT,CACY;QAEpB,CAAC,CAAC,CACc,CACV,EACV,QAAQ,CAAC,IAAI,CACd;AACH;;;;"}
1	+ {"version":3,"file":"ToastsLayout.cjs","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Toast } from './components/Toast';\nimport toastStyles from './components/Toast.module.scss';\nimport styles from './ToastsLayout.module.scss';\nimport { ToastsLayoutPropTypes } from './types';\n\n/*\n A fixed-position container that manages stacking, animating, and dismissing toast notifications.\n * Renders into a portal on `document.body`. Only one instance should exist per application.\n */\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n className,\n e2eClassName,\n toasts,\n minWidth = '50vw',\n max = 3,\n onClose,\n}) => {\n const nodeRefs = useRef(new Map<string, { current: HTMLDivElement \| null }>());\n\n // Stable ref to avoid re-triggering the dismiss effect when onClose identity changes\n const onCloseRef = useRef(onClose);\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (typeof max === 'number' && toasts.length > max && onCloseRef.current) {\n onCloseRef.current(toasts[0].key);\n }\n }, [toasts, max]);\n\n // Clean up refs only after exit animation completes (via onExited callback)\n const handleExited = useCallback((key: string) => {\n nodeRefs.current.delete(key);\n }, []);\n\n let resolvedMinWidth: string \| undefined;\n if (!minWidth && minWidth !== 0) {\n resolvedMinWidth = undefined;\n } else if (typeof minWidth === 'number' \|\| !isNaN(Number(minWidth))) {\n resolvedMinWidth = `${minWidth}px`;\n } else {\n resolvedMinWidth = String(minWidth);\n }\n\n return createPortal(\n <FlexCol\n alignItems=\"center\"\n gap=\"base\"\n className={styles.ToastsLayoutContainer}\n aria-live=\"polite\"\n aria-atomic=\"false\"\n >\n <TransitionGroup component={null}>\n {[...toasts].reverse().map((toast, index) => {\n if (!nodeRefs.current.has(toast.key)) {\n nodeRefs.current.set(toast.key, { current: null });\n }\n const nodeRef = nodeRefs.current.get(toast.key)!;\n\n return (\n <CSSTransition\n nodeRef={nodeRef}\n key={toast.key}\n timeout={500}\n classNames={{\n enter: toastStyles.enter,\n enterActive: toastStyles.enterActive,\n exit: toastStyles.exit,\n exitActive: toastStyles.exitActive,\n }}\n onExited={() => handleExited(toast.key)}\n >\n <Toast\n ref={nodeRef}\n className={className}\n e2eClassName={e2eClassName}\n minWidth={resolvedMinWidth}\n last={index === toasts.length - 1}\n onClose={onClose ? () => onClose(toast.key) : undefined}\n {...toast}\n />\n </CSSTransition>\n );\n })}\n </TransitionGroup>\n </FlexCol>,\n document.body,\n );\n};\n"],"names":["useRef","useEffect","useCallback","createPortal","React","FlexCol","styles","TransitionGroup","CSSTransition","toastStyles","Toast"],"mappings":"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"}

package/dist/components/ToastsLayout/ToastsLayout.js CHANGED Viewed

@@ -18,8 +18,9 @@ const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max
         onCloseRef.current = onClose;
     }, [onClose]);
     useEffect(() => {
-        if (typeof max === 'number' && toasts.length > max)
+        if (typeof max === 'number' && toasts.length > max && onCloseRef.current) {
             onCloseRef.current(toasts[0].key);
+        }
     }, [toasts, max]);
     // Clean up refs only after exit animation completes (via onExited callback)
     const handleExited = useCallback((key) => {
@@ -47,7 +48,7 @@ const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max
                     exit: toastStyles.exit,
                     exitActive: toastStyles.exitActive,
                 }, onExited: () => handleExited(toast.key) },
-                React__default.createElement(Toast, { ref: nodeRef, className: className, e2eClassName: e2eClassName, minWidth: resolvedMinWidth, last: index === toasts.length - 1, onClose: () => onClose(toast.key), ...toast })));
+                React__default.createElement(Toast, { ref: nodeRef, className: className, e2eClassName: e2eClassName, minWidth: resolvedMinWidth, last: index === toasts.length - 1, onClose: onClose ? () => onClose(toast.key) : undefined, ...toast })));
         }))), document.body);
 };

package/dist/components/ToastsLayout/ToastsLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToastsLayout.js","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Toast } from './components/Toast';\nimport toastStyles from './components/Toast.module.scss';\nimport styles from './ToastsLayout.module.scss';\nimport { ToastsLayoutPropTypes } from './types';\n\n/*\n A fixed-position container that manages stacking, animating, and dismissing toast notifications.\n * Renders into a portal on `document.body`. Only one instance should exist per application.\n */\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n className,\n e2eClassName,\n toasts,\n minWidth = '50vw',\n max = 3,\n onClose,\n}) => {\n const nodeRefs = useRef(new Map<string, { current: HTMLDivElement \| null }>());\n\n // Stable ref to avoid re-triggering the dismiss effect when onClose identity changes\n const onCloseRef = useRef(onClose);\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (typeof max === 'number' && toasts.length > max) onCloseRef.current(toasts[0].key);\n }, [toasts, max]);\n\n // Clean up refs only after exit animation completes (via onExited callback)\n const handleExited = useCallback((key: string) => {\n nodeRefs.current.delete(key);\n }, []);\n\n let resolvedMinWidth: string \| undefined;\n if (!minWidth && minWidth !== 0) {\n resolvedMinWidth = undefined;\n } else if (typeof minWidth === 'number' \|\| !isNaN(Number(minWidth))) {\n resolvedMinWidth = `${minWidth}px`;\n } else {\n resolvedMinWidth = String(minWidth);\n }\n\n return createPortal(\n <FlexCol\n alignItems=\"center\"\n gap=\"base\"\n className={styles.ToastsLayoutContainer}\n aria-live=\"polite\"\n aria-atomic=\"false\"\n >\n <TransitionGroup component={null}>\n {[...toasts].reverse().map((toast, index) => {\n if (!nodeRefs.current.has(toast.key)) {\n nodeRefs.current.set(toast.key, { current: null });\n }\n const nodeRef = nodeRefs.current.get(toast.key)!;\n\n return (\n <CSSTransition\n nodeRef={nodeRef}\n key={toast.key}\n timeout={500}\n classNames={{\n enter: toastStyles.enter,\n enterActive: toastStyles.enterActive,\n exit: toastStyles.exit,\n exitActive: toastStyles.exitActive,\n }}\n onExited={() => handleExited(toast.key)}\n >\n <Toast\n ref={nodeRef}\n className={className}\n e2eClassName={e2eClassName}\n minWidth={resolvedMinWidth}\n last={index === toasts.length - 1}\n onClose={() => onClose(toast.key)}\n {...toast}\n />\n </CSSTransition>\n );\n })}\n </TransitionGroup>\n </FlexCol>,\n document.body,\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;AASA;;;AAGG;MACU,YAAY,GAA8B,CAAC,EACtD,SAAS,EACT,YAAY,EACZ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,GAAG,GAAG,CAAC,EACP,OAAO,GACR,KAAI;IACH,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,GAAG,EAA8C,CAAC;;AAG9E,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IAClC,SAAS,CAAC,MAAK;AACb,QAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAC9B,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEb,SAAS,CAAC,MAAK;~~QACb~~,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,MAAM,CAAC,MAAM,GAAG,GAAG;~~YAAE~~,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;~~AACvF~~,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;;AAGjB,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,GAAW,KAAI;AAC/C,QAAA,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,IAAI,gBAAoC;AACxC,IAAA,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,CAAC,EAAE;QAC/B,gBAAgB,GAAG,SAAS;AAC7B,IAAA;AAAM,SAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE;AACnE,QAAA,gBAAgB,GAAG,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAI;AACnC,IAAA;AAAM,SAAA;AACL,QAAA,gBAAgB,GAAG,MAAM,CAAC,QAAQ,CAAC;AACpC,IAAA;IAED,OAAO,YAAY,CACjBA,cAAA,CAAA,aAAA,CAAC,OAAO,IACN,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,MAAM,CAAC,qBAAqB,EAAA,WAAA,EAC7B,QAAQ,EAAA,aAAA,EACN,OAAO,EAAA;QAEnBA,cAAA,CAAA,aAAA,CAAC,eAAe,IAAC,SAAS,EAAE,IAAI,EAAA,EAC7B,CAAC,GAAG,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;YAC1C,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;AACpC,gBAAA,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACnD,YAAA;AACD,YAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAE;AAEhD,YAAA,QACEA,cAAA,CAAA,aAAA,CAAC,aAAa,IACZ,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,OAAO,EAAE,GAAG,EACZ,UAAU,EAAE;oBACV,KAAK,EAAE,WAAW,CAAC,KAAK;oBACxB,WAAW,EAAE,WAAW,CAAC,WAAW;oBACpC,IAAI,EAAE,WAAW,CAAC,IAAI;oBACtB,UAAU,EAAE,WAAW,CAAC,UAAU;iBACnC,EACD,QAAQ,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,EAAA;gBAEvCA,cAAA,CAAA,aAAA,CAAC,KAAK,~~IACJ~~,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,gBAAgB,EAC1B,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EACjC,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,~~EAAA~~,~~GAC7B~~,KAAK,EAAA,CACT,CACY;QAEpB,CAAC,CAAC,CACc,CACV,EACV,QAAQ,CAAC,IAAI,CACd;AACH;;;;"}
1	+ {"version":3,"file":"ToastsLayout.js","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { Toast } from './components/Toast';\nimport toastStyles from './components/Toast.module.scss';\nimport styles from './ToastsLayout.module.scss';\nimport { ToastsLayoutPropTypes } from './types';\n\n/*\n A fixed-position container that manages stacking, animating, and dismissing toast notifications.\n * Renders into a portal on `document.body`. Only one instance should exist per application.\n */\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n className,\n e2eClassName,\n toasts,\n minWidth = '50vw',\n max = 3,\n onClose,\n}) => {\n const nodeRefs = useRef(new Map<string, { current: HTMLDivElement \| null }>());\n\n // Stable ref to avoid re-triggering the dismiss effect when onClose identity changes\n const onCloseRef = useRef(onClose);\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (typeof max === 'number' && toasts.length > max && onCloseRef.current) {\n onCloseRef.current(toasts[0].key);\n }\n }, [toasts, max]);\n\n // Clean up refs only after exit animation completes (via onExited callback)\n const handleExited = useCallback((key: string) => {\n nodeRefs.current.delete(key);\n }, []);\n\n let resolvedMinWidth: string \| undefined;\n if (!minWidth && minWidth !== 0) {\n resolvedMinWidth = undefined;\n } else if (typeof minWidth === 'number' \|\| !isNaN(Number(minWidth))) {\n resolvedMinWidth = `${minWidth}px`;\n } else {\n resolvedMinWidth = String(minWidth);\n }\n\n return createPortal(\n <FlexCol\n alignItems=\"center\"\n gap=\"base\"\n className={styles.ToastsLayoutContainer}\n aria-live=\"polite\"\n aria-atomic=\"false\"\n >\n <TransitionGroup component={null}>\n {[...toasts].reverse().map((toast, index) => {\n if (!nodeRefs.current.has(toast.key)) {\n nodeRefs.current.set(toast.key, { current: null });\n }\n const nodeRef = nodeRefs.current.get(toast.key)!;\n\n return (\n <CSSTransition\n nodeRef={nodeRef}\n key={toast.key}\n timeout={500}\n classNames={{\n enter: toastStyles.enter,\n enterActive: toastStyles.enterActive,\n exit: toastStyles.exit,\n exitActive: toastStyles.exitActive,\n }}\n onExited={() => handleExited(toast.key)}\n >\n <Toast\n ref={nodeRef}\n className={className}\n e2eClassName={e2eClassName}\n minWidth={resolvedMinWidth}\n last={index === toasts.length - 1}\n onClose={onClose ? () => onClose(toast.key) : undefined}\n {...toast}\n />\n </CSSTransition>\n );\n })}\n </TransitionGroup>\n </FlexCol>,\n document.body,\n );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/ToastsLayout/components/Toast.cjs CHANGED Viewed

@@ -38,10 +38,10 @@ const generateClassNames = (prefix) => ({
     closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,
 });
 /**
- * A dismissible notification bar with a coloured icon, message text, and optional call-to-action.
- * Rendered internally by `ToastsLayout` — not intended for standalone use.
+ * A notification bar with a coloured icon, message text, and optional call-to-action.
+ * Supports an optional close button via `onClose`. Used by `ToastsLayout` or standalone.
  */
-const Toast = React__default.default.forwardRef(({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {
+const Toast = React__default.default.forwardRef(({ className, e2eClassName, type, iconSlot, text, last = false, minWidth, cta, onClose }, ref) => {
     const classNames = generateClassNames(className);
     const e2eClassNames = generateClassNames(e2eClassName);
     return (React__default.default.createElement(FlexRow.FlexRow, { ref: ref, alignItems: "center", flexWrap: "nowrap", className: buildClassnames.buildClassnames([
@@ -55,13 +55,13 @@ const Toast = React__default.default.forwardRef(({ className, e2eClassName, type
         React__default.default.createElement(FlexRow.FlexRow, { alignItems: "center", justifyContent: "space-between", flexGrow: 1, flexWrap: "nowrap" },
             React__default.default.createElement(Text.Text, { variant: "subheadingMedium", className: Toast_module.text }, text),
             cta),
-        React__default.default.createElement(Action.Action, { variant: "flat",
+        onClose && (React__default.default.createElement(Action.Action, { variant: "flat",
             // Always white on dark toast background
             iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, { color: "white" }), onClick: onClose, "aria-label": "Close", className: buildClassnames.buildClassnames([
                 classNames.closeIcon,
                 e2eClassNames.closeIcon,
                 Toast_module.closeAction,
-            ]) })));
+            ]) }))));
 });
 Toast.displayName = 'Toast';

package/dist/components/ToastsLayout/components/Toast.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { AttentionIcon, CrossIcon, InfoIcon, MergeIcon, SuccessIcon } from '../../../icons';\nimport { assignCssVars } from '../../../utils';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { Action } from '../../Action';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { ClassNamesReturnPayload, ToastPropTypes, ToastType } from '../types';\nimport styles from './Toast.module.scss';\n\nconst toastTypes: ToastType = {\n info: {\n icon: <InfoIcon />,\n },\n success: {\n icon: <SuccessIcon />,\n },\n error: {\n icon: <AttentionIcon />,\n },\n merge: {\n icon: <MergeIcon />,\n },\n};\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n container: prefix ? `${prefix}-toast-container` : undefined,\n icon: prefix ? `${prefix}-toast-icon` : undefined,\n closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,\n});\n\n/*\n A ~~dismissible~~ notification bar with a coloured icon, message text, and optional call-to-action.\n * ~~Rendered~~ ~~internally~~ by `ToastsLayout` — ~~not intended for~~ standalone ~~use~~.\n */\nexport const Toast = React.forwardRef<HTMLDivElement, ToastPropTypes>(\n ({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n\n return (\n <FlexRow\n ref={ref}\n alignItems=\"center\"\n flexWrap=\"nowrap\"\n className={buildClassnames([\n styles['toast-container'],\n styles[`${type}-variant`],\n last && styles.last,\n classNames.container,\n e2eClassNames.container,\n ])}\n justifyContent=\"space-between\"\n style={assignCssVars({ minWidth })}\n gap=\"base\"\n >\n <FlexRow\n justifyContent=\"center\"\n alignItems=\"center\"\n flexWrap=\"nowrap\"\n className={buildClassnames([classNames.icon, e2eClassNames.icon, styles['icon-wrap']])}\n >\n {iconSlot ?? toastTypes[type].icon}\n </FlexRow>\n <FlexRow alignItems=\"center\" justifyContent=\"space-between\" flexGrow={1} flexWrap=\"nowrap\">\n <Text variant=\"subheadingMedium\" className={styles.text}>\n {text}\n </Text>\n {cta}\n </FlexRow>\n <Action\n variant=\"flat\"\n // Always white on dark toast background\n iconSlot={<CrossIcon color=\"white\" />}\n onClick={onClose}\n aria-label=\"Close\"\n className={buildClassnames([\n classNames.closeIcon,\n e2eClassNames.closeIcon,\n styles.closeAction,\n ])}\n />\n </FlexRow>\n );\n },\n);\n\nToast.displayName = 'Toast';\n"],"names":["React","InfoIcon","SuccessIcon","AttentionIcon","MergeIcon","FlexRow","buildClassnames","styles","assignCssVars","Text","Action","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;AAUA,MAAM,UAAU,GAAc;AAC5B,IAAA,IAAI,EAAE;QACJ,IAAI,EAAEA,sBAAA,CAAA,aAAA,CAACC,uBAAQ,EAAA,IAAA,CAAG;AACnB,KAAA;AACD,IAAA,OAAO,EAAE;QACP,IAAI,EAAED,sBAAA,CAAA,aAAA,CAACE,0BAAW,EAAA,IAAA,CAAG;AACtB,KAAA;AACD,IAAA,KAAK,EAAE;QACL,IAAI,EAAEF,sBAAA,CAAA,aAAA,CAACG,4BAAa,EAAA,IAAA,CAAG;AACxB,KAAA;AACD,IAAA,KAAK,EAAE;QACL,IAAI,EAAEH,sBAAA,CAAA,aAAA,CAACI,wBAAS,EAAA,IAAA,CAAG;AACpB,KAAA;CACF;AAED,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IACxE,SAAS,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,gBAAA,CAAkB,GAAG,SAAS;IAC3D,IAAI,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,WAAA,CAAa,GAAG,SAAS;IACjD,SAAS,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,iBAAA,CAAmB,GAAG,SAAS;AAC7D,CAAA,CAAC;AAEF;;;AAGG;AACI,MAAM,KAAK,GAAGJ,sBAAK,CAAC,UAAU,CACnC,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,GAAG,KAAI;~~AACvF~~,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAChD,IAAA,MAAM,aAAa,GAAG,kBAAkB,CAAC,YAAY,CAAC;AAEtD,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACK,eAAO,IACN,GAAG,EAAE,GAAG,EACR,UAAU,EAAC,QAAQ,EACnB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAEC,+BAAe,CAAC;YACzBC,YAAM,CAAC,iBAAiB,CAAC;AACzB,YAAAA,YAAM,CAAC,CAAA,EAAG,IAAI,CAAA,QAAA,CAAU,CAAC;YACzB,IAAI,IAAIA,YAAM,CAAC,IAAI;AACnB,YAAA,UAAU,CAAC,SAAS;AACpB,YAAA,aAAa,CAAC,SAAS;AACxB,SAAA,CAAC,EACF,cAAc,EAAC,eAAe,EAC9B,KAAK,EAAEC,2BAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,EAClC,GAAG,EAAC,MAAM,EAAA;QAEVR,sBAAA,CAAA,aAAA,CAACK,eAAO,IACN,cAAc,EAAC,QAAQ,EACvB,UAAU,EAAC,QAAQ,EACnB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAEC,+BAAe,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,aAAa,CAAC,IAAI,EAAEC,YAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,EAErF,QAAQ,aAAR,QAAQ,KAAA,MAAA,GAAR,QAAQ,GAAI,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAC1B;AACV,QAAAP,sBAAA,CAAA,aAAA,CAACK,eAAO,EAAA,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAC,QAAQ,EAAA;AACxF,YAAAL,sBAAA,CAAA,aAAA,CAACS,SAAI,EAAA,EAAC,OAAO,EAAC,kBAAkB,EAAC,SAAS,EAAEF,YAAM,CAAC,IAAI,EAAA,EACpD,IAAI,CACA;AACN,YAAA,GAAG,CACI;~~AACV~~,~~QAAAP~~,sBAAA,CAAA,aAAA,CAACU,aAAM,EAAA,EACL,OAAO,EAAC,MAAM;;AAEd,YAAA,QAAQ,EAAEV,sBAAA,CAAA,aAAA,CAACW,wBAAS,IAAC,KAAK,EAAC,OAAO,EAAA,CAAG,EACrC,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,OAAO,EAClB,SAAS,EAAEL,+BAAe,CAAC;AACzB,gBAAA,UAAU,CAAC,SAAS;AACpB,gBAAA,aAAa,CAAC,SAAS;AACvB,gBAAAC,YAAM,CAAC,WAAW;~~aACnB~~,CAAC,EAAA,CACF,~~CACM~~;AAEd,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
1	+ {"version":3,"file":"Toast.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { AttentionIcon, CrossIcon, InfoIcon, MergeIcon, SuccessIcon } from '../../../icons';\nimport { assignCssVars } from '../../../utils';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { Action } from '../../Action';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { ClassNamesReturnPayload, ToastPropTypes, ToastType } from '../types';\nimport styles from './Toast.module.scss';\n\nconst toastTypes: ToastType = {\n info: {\n icon: <InfoIcon />,\n },\n success: {\n icon: <SuccessIcon />,\n },\n error: {\n icon: <AttentionIcon />,\n },\n merge: {\n icon: <MergeIcon />,\n },\n};\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n container: prefix ? `${prefix}-toast-container` : undefined,\n icon: prefix ? `${prefix}-toast-icon` : undefined,\n closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,\n});\n\n/*\n A notification bar with a coloured icon, message text, and optional call-to-action.\n * Supports an optional close button via `onClose`. Used by `ToastsLayout` or standalone.\n */\nexport const Toast = React.forwardRef<HTMLDivElement, ToastPropTypes>(\n ({ className, e2eClassName, type, iconSlot, text, last = false, minWidth, cta, onClose }, ref) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n\n return (\n <FlexRow\n ref={ref}\n alignItems=\"center\"\n flexWrap=\"nowrap\"\n className={buildClassnames([\n styles['toast-container'],\n styles[`${type}-variant`],\n last && styles.last,\n classNames.container,\n e2eClassNames.container,\n ])}\n justifyContent=\"space-between\"\n style={assignCssVars({ minWidth })}\n gap=\"base\"\n >\n <FlexRow\n justifyContent=\"center\"\n alignItems=\"center\"\n flexWrap=\"nowrap\"\n className={buildClassnames([classNames.icon, e2eClassNames.icon, styles['icon-wrap']])}\n >\n {iconSlot ?? toastTypes[type].icon}\n </FlexRow>\n <FlexRow alignItems=\"center\" justifyContent=\"space-between\" flexGrow={1} flexWrap=\"nowrap\">\n <Text variant=\"subheadingMedium\" className={styles.text}>\n {text}\n </Text>\n {cta}\n </FlexRow>\n {onClose && (\n <Action\n variant=\"flat\"\n // Always white on dark toast background\n iconSlot={<CrossIcon color=\"white\" />}\n onClick={onClose}\n aria-label=\"Close\"\n className={buildClassnames([\n classNames.closeIcon,\n e2eClassNames.closeIcon,\n styles.closeAction,\n ])}\n />\n )}\n </FlexRow>\n );\n },\n);\n\nToast.displayName = 'Toast';\n"],"names":["React","InfoIcon","SuccessIcon","AttentionIcon","MergeIcon","FlexRow","buildClassnames","styles","assignCssVars","Text","Action","CrossIcon"],"mappings":"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"}

package/dist/components/ToastsLayout/components/Toast.d.ts CHANGED Viewed

@@ -1,12 +1,12 @@
 import React from 'react';
 /**
- * A dismissible notification bar with a coloured icon, message text, and optional call-to-action.
- * Rendered internally by `ToastsLayout` — not intended for standalone use.
+ * A notification bar with a coloured icon, message text, and optional call-to-action.
+ * Supports an optional close button via `onClose`. Used by `ToastsLayout` or standalone.
  */
 export declare const Toast: React.ForwardRefExoticComponent<Omit<import("../types").Notification, "key"> & {
     className?: string | undefined;
     e2eClassName?: string | undefined;
-    last: boolean;
+    last?: boolean | undefined;
     minWidth?: string | undefined;
-    onClose: () => void;
+    onClose?: (() => void) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ToastsLayout/components/Toast.js CHANGED Viewed

@@ -32,10 +32,10 @@ const generateClassNames = (prefix) => ({
     closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,
 });
 /**
- * A dismissible notification bar with a coloured icon, message text, and optional call-to-action.
- * Rendered internally by `ToastsLayout` — not intended for standalone use.
+ * A notification bar with a coloured icon, message text, and optional call-to-action.
+ * Supports an optional close button via `onClose`. Used by `ToastsLayout` or standalone.
  */
-const Toast = React__default.forwardRef(({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {
+const Toast = React__default.forwardRef(({ className, e2eClassName, type, iconSlot, text, last = false, minWidth, cta, onClose }, ref) => {
     const classNames = generateClassNames(className);
     const e2eClassNames = generateClassNames(e2eClassName);
     return (React__default.createElement(FlexRow, { ref: ref, alignItems: "center", flexWrap: "nowrap", className: buildClassnames([
@@ -49,13 +49,13 @@ const Toast = React__default.forwardRef(({ className, e2eClassName, type, iconSl
         React__default.createElement(FlexRow, { alignItems: "center", justifyContent: "space-between", flexGrow: 1, flexWrap: "nowrap" },
             React__default.createElement(Text, { variant: "subheadingMedium", className: toastStyles.text }, text),
             cta),
-        React__default.createElement(Action, { variant: "flat",
+        onClose && (React__default.createElement(Action, { variant: "flat",
             // Always white on dark toast background
             iconSlot: React__default.createElement(CrossIcon, { color: "white" }), onClick: onClose, "aria-label": "Close", className: buildClassnames([
                 classNames.closeIcon,
                 e2eClassNames.closeIcon,
                 toastStyles.closeAction,
-            ]) })));
+            ]) }))));
 });
 Toast.displayName = 'Toast';

package/dist/components/ToastsLayout/components/Toast.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.js","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { AttentionIcon, CrossIcon, InfoIcon, MergeIcon, SuccessIcon } from '../../../icons';\nimport { assignCssVars } from '../../../utils';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { Action } from '../../Action';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { ClassNamesReturnPayload, ToastPropTypes, ToastType } from '../types';\nimport styles from './Toast.module.scss';\n\nconst toastTypes: ToastType = {\n info: {\n icon: <InfoIcon />,\n },\n success: {\n icon: <SuccessIcon />,\n },\n error: {\n icon: <AttentionIcon />,\n },\n merge: {\n icon: <MergeIcon />,\n },\n};\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n container: prefix ? `${prefix}-toast-container` : undefined,\n icon: prefix ? `${prefix}-toast-icon` : undefined,\n closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,\n});\n\n/*\n A ~~dismissible~~ notification bar with a coloured icon, message text, and optional call-to-action.\n * ~~Rendered~~ ~~internally~~ by `ToastsLayout` — ~~not intended for~~ standalone ~~use~~.\n */\nexport const Toast = React.forwardRef<HTMLDivElement, ToastPropTypes>(\n ({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n\n return (\n <FlexRow\n ref={ref}\n alignItems=\"center\"\n flexWrap=\"nowrap\"\n className={buildClassnames([\n styles['toast-container'],\n styles[`${type}-variant`],\n last && styles.last,\n classNames.container,\n e2eClassNames.container,\n ])}\n justifyContent=\"space-between\"\n style={assignCssVars({ minWidth })}\n gap=\"base\"\n >\n <FlexRow\n justifyContent=\"center\"\n alignItems=\"center\"\n flexWrap=\"nowrap\"\n className={buildClassnames([classNames.icon, e2eClassNames.icon, styles['icon-wrap']])}\n >\n {iconSlot ?? toastTypes[type].icon}\n </FlexRow>\n <FlexRow alignItems=\"center\" justifyContent=\"space-between\" flexGrow={1} flexWrap=\"nowrap\">\n <Text variant=\"subheadingMedium\" className={styles.text}>\n {text}\n </Text>\n {cta}\n </FlexRow>\n <Action\n variant=\"flat\"\n // Always white on dark toast background\n iconSlot={<CrossIcon color=\"white\" />}\n onClick={onClose}\n aria-label=\"Close\"\n className={buildClassnames([\n classNames.closeIcon,\n e2eClassNames.closeIcon,\n styles.closeAction,\n ])}\n />\n </FlexRow>\n );\n },\n);\n\nToast.displayName = 'Toast';\n"],"names":["React","styles"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,UAAU,GAAc;AAC5B,IAAA,IAAI,EAAE;QACJ,IAAI,EAAEA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA,CAAG;AACnB,KAAA;AACD,IAAA,OAAO,EAAE;QACP,IAAI,EAAEA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA,CAAG;AACtB,KAAA;AACD,IAAA,KAAK,EAAE;QACL,IAAI,EAAEA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA,CAAG;AACxB,KAAA;AACD,IAAA,KAAK,EAAE;QACL,IAAI,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG;AACpB,KAAA;CACF;AAED,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IACxE,SAAS,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,gBAAA,CAAkB,GAAG,SAAS;IAC3D,IAAI,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,WAAA,CAAa,GAAG,SAAS;IACjD,SAAS,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,iBAAA,CAAmB,GAAG,SAAS;AAC7D,CAAA,CAAC;AAEF;;;AAGG;AACI,MAAM,KAAK,GAAGA,cAAK,CAAC,UAAU,CACnC,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,GAAG,KAAI;~~AACvF~~,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAChD,IAAA,MAAM,aAAa,GAAG,kBAAkB,CAAC,YAAY,CAAC;AAEtD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,IACN,GAAG,EAAE,GAAG,EACR,UAAU,EAAC,QAAQ,EACnB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAE,eAAe,CAAC;YACzBC,WAAM,CAAC,iBAAiB,CAAC;AACzB,YAAAA,WAAM,CAAC,CAAA,EAAG,IAAI,CAAA,QAAA,CAAU,CAAC;YACzB,IAAI,IAAIA,WAAM,CAAC,IAAI;AACnB,YAAA,UAAU,CAAC,SAAS;AACpB,YAAA,aAAa,CAAC,SAAS;AACxB,SAAA,CAAC,EACF,cAAc,EAAC,eAAe,EAC9B,KAAK,EAAE,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,EAClC,GAAG,EAAC,MAAM,EAAA;QAEVD,cAAA,CAAA,aAAA,CAAC,OAAO,IACN,cAAc,EAAC,QAAQ,EACvB,UAAU,EAAC,QAAQ,EACnB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAE,eAAe,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,aAAa,CAAC,IAAI,EAAEC,WAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,EAErF,QAAQ,aAAR,QAAQ,KAAA,MAAA,GAAR,QAAQ,GAAI,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAC1B;AACV,QAAAD,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAC,QAAQ,EAAA;AACxF,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,kBAAkB,EAAC,SAAS,EAAEC,WAAM,CAAC,IAAI,EAAA,EACpD,IAAI,CACA;AACN,YAAA,GAAG,CACI;~~AACV~~,~~QAAAD~~,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM;;AAEd,YAAA,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAA,CAAG,EACrC,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,OAAO,EAClB,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,UAAU,CAAC,SAAS;AACpB,gBAAA,aAAa,CAAC,SAAS;AACvB,gBAAAC,WAAM,CAAC,WAAW;~~aACnB~~,CAAC,EAAA,CACF,~~CACM~~;AAEd,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
1	+ {"version":3,"file":"Toast.js","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { AttentionIcon, CrossIcon, InfoIcon, MergeIcon, SuccessIcon } from '../../../icons';\nimport { assignCssVars } from '../../../utils';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { Action } from '../../Action';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { ClassNamesReturnPayload, ToastPropTypes, ToastType } from '../types';\nimport styles from './Toast.module.scss';\n\nconst toastTypes: ToastType = {\n info: {\n icon: <InfoIcon />,\n },\n success: {\n icon: <SuccessIcon />,\n },\n error: {\n icon: <AttentionIcon />,\n },\n merge: {\n icon: <MergeIcon />,\n },\n};\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n container: prefix ? `${prefix}-toast-container` : undefined,\n icon: prefix ? `${prefix}-toast-icon` : undefined,\n closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,\n});\n\n/*\n A notification bar with a coloured icon, message text, and optional call-to-action.\n * Supports an optional close button via `onClose`. Used by `ToastsLayout` or standalone.\n */\nexport const Toast = React.forwardRef<HTMLDivElement, ToastPropTypes>(\n ({ className, e2eClassName, type, iconSlot, text, last = false, minWidth, cta, onClose }, ref) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n\n return (\n <FlexRow\n ref={ref}\n alignItems=\"center\"\n flexWrap=\"nowrap\"\n className={buildClassnames([\n styles['toast-container'],\n styles[`${type}-variant`],\n last && styles.last,\n classNames.container,\n e2eClassNames.container,\n ])}\n justifyContent=\"space-between\"\n style={assignCssVars({ minWidth })}\n gap=\"base\"\n >\n <FlexRow\n justifyContent=\"center\"\n alignItems=\"center\"\n flexWrap=\"nowrap\"\n className={buildClassnames([classNames.icon, e2eClassNames.icon, styles['icon-wrap']])}\n >\n {iconSlot ?? toastTypes[type].icon}\n </FlexRow>\n <FlexRow alignItems=\"center\" justifyContent=\"space-between\" flexGrow={1} flexWrap=\"nowrap\">\n <Text variant=\"subheadingMedium\" className={styles.text}>\n {text}\n </Text>\n {cta}\n </FlexRow>\n {onClose && (\n <Action\n variant=\"flat\"\n // Always white on dark toast background\n iconSlot={<CrossIcon color=\"white\" />}\n onClick={onClose}\n aria-label=\"Close\"\n className={buildClassnames([\n classNames.closeIcon,\n e2eClassNames.closeIcon,\n styles.closeAction,\n ])}\n />\n )}\n </FlexRow>\n );\n },\n);\n\nToast.displayName = 'Toast';\n"],"names":["React","styles"],"mappings":"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"}

package/dist/components/ToastsLayout/index.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 export { ToastsLayout } from './ToastsLayout';
-export type { Notification, ToastsLayoutPropTypes } from './types';
+export { Toast } from './components/Toast';
+export type { Notification, ToastsLayoutPropTypes, ToastProps } from './types';

package/dist/components/ToastsLayout/types.d.ts CHANGED Viewed

@@ -11,17 +11,20 @@ export type ToastType = Record<ToastTypes, {
 export type ToastPropTypes = Omit<Notification, 'key'> & {
     className?: string;
     e2eClassName?: string;
-    last: boolean;
+    last?: boolean;
     minWidth?: string;
-    onClose: () => void;
+    onClose?: () => void;
 };
+/** Public-facing props for standalone `<Toast>` usage. */
+export type ToastProps = Omit<ToastPropTypes, 'last' | 'minWidth' | 'e2eClassName'>;
 export type ToastsLayoutPropTypes = {
     className?: string;
     e2eClassName?: string;
     toasts: Notification[];
     minWidth?: number | string;
+    /** Maximum number of visible toasts. Excess toasts are evicted via `onClose`. Has no effect when `onClose` is not provided. */
     max?: number | null;
-    onClose: (key: string) => void;
+    onClose?: (key: string) => void;
 };
 export type ClassNamesReturnPayload = {
     container?: string;

package/dist/components/index.d.ts CHANGED Viewed

@@ -63,7 +63,7 @@ export { Tag } from './Tag';
 export { Text } from './Text';
 export type { TextProps, TextVariant, ValidTextTag } from './Text';
 export { TextField, type TextFieldType } from './TextField';
-export { ToastsLayout, type Notification, type ToastsLayoutPropTypes } from './ToastsLayout';
+export { Toast, ToastsLayout, type Notification, type ToastProps, type ToastsLayoutPropTypes } from './ToastsLayout';
 export { Toggle } from './Toggle';
 export { ToggleButton } from './ToggleButton';
 export { Tooltip } from './Tooltip';

package/dist/hoc/withLabels/withLabels.cjs CHANGED Viewed

@@ -28,11 +28,8 @@ const withLabels = (Component) => {
                     React__default.default.createElement(HelpIcon.ReactComponent, { "data-testid": "tooltip-help", width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light })))),
             hint && (React__default.default.createElement(Text.Text, { variant: "hintText", as: "span", className: withLabels_module.hint, id: `${componentId}-hint` }, hint)),
             React__default.default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, disabledMessage: disabledMessage, ...otherProps }),
-            error && (React__default.default.createElement(MiniAlert.MiniAlert, { id: `${componentId}-error`, variant: "error", isBold: false, role: "alert",
-                // Overcomplicated but title only accepts string & titleSlot skips <Text> wrapper (wrong font size).
-                // Use both with typeof to get correct sizing for strings and support JSX errors.
-                title: typeof error === 'string' ? error : undefined, titleSlot: typeof error !== 'string' ? error : undefined })),
-            disabledMessage && (React__default.default.createElement(MiniAlert.MiniAlert, { id: `${componentId}-disabled`, isBold: false, title: typeof disabledMessage === 'string' ? disabledMessage : undefined, titleSlot: typeof disabledMessage !== 'string' ? disabledMessage : undefined }))));
+            error && (React__default.default.createElement(MiniAlert.MiniAlert, { id: `${componentId}-error`, variant: "error", isBold: false, role: "alert", title: error })),
+            disabledMessage && (React__default.default.createElement(MiniAlert.MiniAlert, { id: `${componentId}-disabled`, isBold: false, title: disabledMessage }))));
     });
     ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;
     return ComponentWithLabels;

package/dist/hoc/withLabels/withLabels.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n disabledMessage?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n const componentId = useId({ id, prefix: Component.name });\n\n if (!label)\n return (\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n );\n\n return (\n <FlexCol className={styles.rootStack}>\n <FlexRow>\n <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </Text>\n {(tooltip \|\| tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </FlexRow>\n {hint && (\n <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n {hint}\n </Text>\n )}\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n {error && (\n <MiniAlert\n id={`${componentId}-error`}\n variant=\"error\"\n isBold={false}\n role=\"alert\"\n ~~// Overcomplicated but~~ title ~~only accepts string & titleSlot skips <Text> wrapper (wrong font size).\n // Use both with typeof to get correct sizing for strings and support JSX errors.\n title~~={~~typeof~~ error ~~=== 'string' ? error : undefined~~}\n ~~titleSlot={typeof error !== 'string' ? error : undefined}\n~~ />\n )}\n {disabledMessage && (\n <MiniAlert\n id={`${componentId}-disabled`}\n isBold={false}\n title={~~typeof~~ disabledMessage ~~=== 'string' ? disabledMessage : undefined~~}\n ~~titleSlot={typeof disabledMessage !== 'string' ? disabledMessage : undefined}\n~~ />\n )}\n </FlexCol>\n );\n },\n );\n\n ComponentWithLabels.displayName = `withLabels(${Component.displayName \|\| Component.name \|\| 'Component'})`;\n\n return ComponentWithLabels;\n};\n"],"names":["forwardRef","useId","React","FlexCol","styles","FlexRow","Text","BlockTooltip","HelpIcon","theme","MiniAlert"],"mappings":";;;;;;;;;;;;;;;;;AAuBA;AACO,MAAM,UAAU,GAAG,CAAiB,SAA2B,KAAI;IACxE,MAAM,mBAAmB,GAAGA,gBAAU,CACpC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG,KAAI;AAC3F,QAAA,MAAM,WAAW,GAAGC,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AACR,YAAA,QACEC,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;QAGN,QACEA,qCAACC,eAAO,EAAA,EAAC,SAAS,EAAEC,iBAAM,CAAC,SAAS,EAAA;AAClC,YAAAF,sBAAA,CAAA,aAAA,CAACG,eAAO,EAAA,IAAA;AACN,gBAAAH,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,EAAC,OAAO,EAAC,YAAY,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAA,EACxE,KAAK,CACD;AACN,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBJ,sBAAA,CAAA,aAAA,CAACK,yBAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAL,sBAAA,CAAA,aAAA,CAACM,uBAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAA,CACrC,CACW,CAChB,CACO;YACT,IAAI,KACHP,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAEF,iBAAM,CAAC,IAAI,EAAE,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAA,EACjF,IAAI,CACA,CACR;YACDF,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;YACD,KAAK,KACJA,sBAAA,CAAA,aAAA,CAACQ,mBAAS,~~IACR~~,EAAE,EAAE,~~GAAG~~,WAAW,CAAA,MAAA,CAAQ,EAC1B,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,KAAK,EACb,IAAI,EAAC,OAAO~~;;;AAGZ~~,~~gBAAA~~,KAAK,EAAE,~~OAAO,~~KAAK,~~KAAK~~,~~QAAQ~~,~~GAAG,KAAK,GAAG,SAAS,EACpD,SAAS,EAAE,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,SAAS,GACxD,~~CACH;YACA,eAAe,KACdR,sBAAA,CAAA,aAAA,CAACQ,mBAAS,IACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW,EAC7B,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,~~OAAO,~~eAAe,~~KAAK,QAAQ,GAAG,eAAe,GAAG,SAAS,EACxE,SAAS,EAAE,OAAO,eAAe,KAAK,QAAQ,GAAG,eAAe,GAAG,SAAS,~~EAAA,~~CAC5E~~,CACH,CACO;AAEd,IAAA,CAAC,CACF;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}
1	+ {"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n disabledMessage?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n const componentId = useId({ id, prefix: Component.name });\n\n if (!label)\n return (\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n );\n\n return (\n <FlexCol className={styles.rootStack}>\n <FlexRow>\n <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </Text>\n {(tooltip \|\| tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </FlexRow>\n {hint && (\n <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n {hint}\n </Text>\n )}\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n {error && (\n <MiniAlert\n id={`${componentId}-error`}\n variant=\"error\"\n isBold={false}\n role=\"alert\"\n title={error}\n />\n )}\n {disabledMessage && (\n <MiniAlert\n id={`${componentId}-disabled`}\n isBold={false}\n title={disabledMessage}\n />\n )}\n </FlexCol>\n );\n },\n );\n\n ComponentWithLabels.displayName = `withLabels(${Component.displayName \|\| Component.name \|\| 'Component'})`;\n\n return ComponentWithLabels;\n};\n"],"names":["forwardRef","useId","React","FlexCol","styles","FlexRow","Text","BlockTooltip","HelpIcon","theme","MiniAlert"],"mappings":";;;;;;;;;;;;;;;;;AAuBA;AACO,MAAM,UAAU,GAAG,CAAiB,SAA2B,KAAI;IACxE,MAAM,mBAAmB,GAAGA,gBAAU,CACpC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG,KAAI;AAC3F,QAAA,MAAM,WAAW,GAAGC,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AACR,YAAA,QACEC,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;QAGN,QACEA,qCAACC,eAAO,EAAA,EAAC,SAAS,EAAEC,iBAAM,CAAC,SAAS,EAAA;AAClC,YAAAF,sBAAA,CAAA,aAAA,CAACG,eAAO,EAAA,IAAA;AACN,gBAAAH,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,EAAC,OAAO,EAAC,YAAY,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAA,EACxE,KAAK,CACD;AACN,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBJ,sBAAA,CAAA,aAAA,CAACK,yBAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAL,sBAAA,CAAA,aAAA,CAACM,uBAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAA,CACrC,CACW,CAChB,CACO;YACT,IAAI,KACHP,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAEF,iBAAM,CAAC,IAAI,EAAE,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAA,EACjF,IAAI,CACA,CACR;YACDF,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;YACD,KAAK,KACJA,sBAAA,CAAA,aAAA,CAACQ,mBAAS,EAAA,EACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ,EAC1B,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EAAA,CACZ,CACH;YACA,eAAe,KACdR,sBAAA,CAAA,aAAA,CAACQ,mBAAS,IACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW,EAC7B,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,eAAe,EAAA,CACtB,CACH,CACO;AAEd,IAAA,CAAC,CACF;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}

package/dist/hoc/withLabels/withLabels.js CHANGED Viewed

@@ -22,11 +22,8 @@ const withLabels = (Component) => {
                     React__default.createElement(HelpIcon, { "data-testid": "tooltip-help", width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.neutral.ink.light })))),
             hint && (React__default.createElement(Text, { variant: "hintText", as: "span", className: labelStyles.hint, id: `${componentId}-hint` }, hint)),
             React__default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, disabledMessage: disabledMessage, ...otherProps }),
-            error && (React__default.createElement(MiniAlert, { id: `${componentId}-error`, variant: "error", isBold: false, role: "alert",
-                // Overcomplicated but title only accepts string & titleSlot skips <Text> wrapper (wrong font size).
-                // Use both with typeof to get correct sizing for strings and support JSX errors.
-                title: typeof error === 'string' ? error : undefined, titleSlot: typeof error !== 'string' ? error : undefined })),
-            disabledMessage && (React__default.createElement(MiniAlert, { id: `${componentId}-disabled`, isBold: false, title: typeof disabledMessage === 'string' ? disabledMessage : undefined, titleSlot: typeof disabledMessage !== 'string' ? disabledMessage : undefined }))));
+            error && (React__default.createElement(MiniAlert, { id: `${componentId}-error`, variant: "error", isBold: false, role: "alert", title: error })),
+            disabledMessage && (React__default.createElement(MiniAlert, { id: `${componentId}-disabled`, isBold: false, title: disabledMessage }))));
     });
     ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;
     return ComponentWithLabels;

package/dist/hoc/withLabels/withLabels.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n disabledMessage?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n const componentId = useId({ id, prefix: Component.name });\n\n if (!label)\n return (\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n );\n\n return (\n <FlexCol className={styles.rootStack}>\n <FlexRow>\n <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </Text>\n {(tooltip \|\| tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </FlexRow>\n {hint && (\n <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n {hint}\n </Text>\n )}\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n {error && (\n <MiniAlert\n id={`${componentId}-error`}\n variant=\"error\"\n isBold={false}\n role=\"alert\"\n ~~// Overcomplicated but~~ title ~~only accepts string & titleSlot skips <Text> wrapper (wrong font size).\n // Use both with typeof to get correct sizing for strings and support JSX errors.\n title~~={~~typeof~~ error ~~=== 'string' ? error : undefined~~}\n ~~titleSlot={typeof error !== 'string' ? error : undefined}\n~~ />\n )}\n {disabledMessage && (\n <MiniAlert\n id={`${componentId}-disabled`}\n isBold={false}\n title={~~typeof~~ disabledMessage ~~=== 'string' ? disabledMessage : undefined~~}\n ~~titleSlot={typeof disabledMessage !== 'string' ? disabledMessage : undefined}\n~~ />\n )}\n </FlexCol>\n );\n },\n );\n\n ComponentWithLabels.displayName = `withLabels(${Component.displayName \|\| Component.name \|\| 'Component'})`;\n\n return ComponentWithLabels;\n};\n"],"names":["React","styles"],"mappings":";;;;;;;;;;;AAuBA;AACO,MAAM,UAAU,GAAG,CAAiB,SAA2B,KAAI;IACxE,MAAM,mBAAmB,GAAG,UAAU,CACpC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG,KAAI;AAC3F,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AACR,YAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;QAGN,QACEA,6BAAC,OAAO,EAAA,EAAC,SAAS,EAAEC,WAAM,CAAC,SAAS,EAAA;AAClC,YAAAD,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,YAAY,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAA,EACxE,KAAK,CACD;AACN,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAA,CACrC,CACW,CAChB,CACO;YACT,IAAI,KACHA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAEC,WAAM,CAAC,IAAI,EAAE,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAA,EACjF,IAAI,CACA,CACR;YACDD,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;YACD,KAAK,KACJA,cAAA,CAAA,aAAA,CAAC,SAAS,~~IACR~~,EAAE,EAAE,~~GAAG~~,WAAW,CAAA,MAAA,CAAQ,EAC1B,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,KAAK,EACb,IAAI,EAAC,OAAO~~;;;AAGZ~~,~~gBAAA~~,KAAK,EAAE,~~OAAO,~~KAAK,~~KAAK~~,~~QAAQ~~,~~GAAG,KAAK,GAAG,SAAS,EACpD,SAAS,EAAE,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,SAAS,GACxD,~~CACH;YACA,eAAe,KACdA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW,EAC7B,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,~~OAAO,~~eAAe,~~KAAK,QAAQ,GAAG,eAAe,GAAG,SAAS,EACxE,SAAS,EAAE,OAAO,eAAe,KAAK,QAAQ,GAAG,eAAe,GAAG,SAAS,~~EAAA,~~CAC5E~~,CACH,CACO;AAEd,IAAA,CAAC,CACF;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}
1	+ {"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n disabledMessage?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n const componentId = useId({ id, prefix: Component.name });\n\n if (!label)\n return (\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n );\n\n return (\n <FlexCol className={styles.rootStack}>\n <FlexRow>\n <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </Text>\n {(tooltip \|\| tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </FlexRow>\n {hint && (\n <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n {hint}\n </Text>\n )}\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n {error && (\n <MiniAlert\n id={`${componentId}-error`}\n variant=\"error\"\n isBold={false}\n role=\"alert\"\n title={error}\n />\n )}\n {disabledMessage && (\n <MiniAlert\n id={`${componentId}-disabled`}\n isBold={false}\n title={disabledMessage}\n />\n )}\n </FlexCol>\n );\n },\n );\n\n ComponentWithLabels.displayName = `withLabels(${Component.displayName \|\| Component.name \|\| 'Component'})`;\n\n return ComponentWithLabels;\n};\n"],"names":["React","styles"],"mappings":";;;;;;;;;;;AAuBA;AACO,MAAM,UAAU,GAAG,CAAiB,SAA2B,KAAI;IACxE,MAAM,mBAAmB,GAAG,UAAU,CACpC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG,KAAI;AAC3F,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AACR,YAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;QAGN,QACEA,6BAAC,OAAO,EAAA,EAAC,SAAS,EAAEC,WAAM,CAAC,SAAS,EAAA;AAClC,YAAAD,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,YAAY,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAA,EACxE,KAAK,CACD;AACN,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAA,CACrC,CACW,CAChB,CACO;YACT,IAAI,KACHA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAEC,WAAM,CAAC,IAAI,EAAE,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAA,EACjF,IAAI,CACA,CACR;YACDD,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;YACD,KAAK,KACJA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ,EAC1B,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EAAA,CACZ,CACH;YACA,eAAe,KACdA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW,EAC7B,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,eAAe,EAAA,CACtB,CACH,CACO;AAEd,IAAA,CAAC,CACF;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}