@veeqo/ui 14.9.0-beta-2 → 14.9.0

package/dist/components/SimpleTable/SimpleTable.js

@@ -1,23 +1,10 @@
 import React__default from 'react';
-import { buildClassnames } from '../../utils/buildClassnames.js';
-import 'uid/secure';
-import { assignCssVars } from '../../utils/assignCssVars.js';
-import styles from './SimpleTable.module.scss.js';
+import { Table, TableHeader, TableBody, TableRow, TableHeaderCell, TableCell } from './styled.js';
 
-const TableHeader = React__default.forwardRef(({ className, ...rest }, ref) => (React__default.createElement("thead", { ref: ref, className: buildClassnames([styles.header, className]), ...rest })));
-TableHeader.displayName = 'SimpleTable.Header';
-const TableBody = React__default.forwardRef(({ className, ...rest }, ref) => (React__default.createElement("tbody", { ref: ref, className: buildClassnames([styles.body, className]), ...rest })));
-TableBody.displayName = 'SimpleTable.Body';
-const TableRow = React__default.forwardRef(({ className, ...rest }, ref) => (React__default.createElement("tr", { ref: ref, className: buildClassnames([styles.row, className]), ...rest })));
-TableRow.displayName = 'SimpleTable.Row';
-const TableCell = React__default.forwardRef(({ align, className, style, ...rest }, ref) => (React__default.createElement("td", { ref: ref, className: buildClassnames([styles.cell, className]), style: { ...assignCssVars({ textAlign: align }), ...style }, ...rest })));
-TableCell.displayName = 'SimpleTable.Cell';
-const TableHeaderCell = React__default.forwardRef(({ align, className, style, ...rest }, ref) => (React__default.createElement("th", { ref: ref, className: buildClassnames([styles.headerCell, className]), style: { ...assignCssVars({ textAlign: align }), ...style }, ...rest })));
-TableHeaderCell.displayName = 'SimpleTable.HeaderCell';
 /**
  * A simple table component which provides flexible, pre-styled table elements.
  */
-const SimpleTable = ({ striped = true, className, children }) => (React__default.createElement("table", { className: buildClassnames([styles.table, striped ? styles.striped : undefined, className]) }, children));
+const SimpleTable = ({ striped = true, className, children }) => (React__default.createElement(Table, { striped: striped, className: className }, children));
 SimpleTable.Header = TableHeader;
 SimpleTable.Body = TableBody;
 SimpleTable.Row = TableRow;

package/dist/components/SimpleTable/SimpleTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleTable.js","sources":["../../../src/components/SimpleTable/SimpleTable.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport { assignCssVars } from '../../utils/assignCssVars';\nimport styles from './SimpleTable.module.scss';\nimport { SimpleTableProps } from './types';\n\ntype TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement> & {\n  align?: 'left' | 'right' | 'center';\n};\n\ntype TableHeaderCellProps = React.ThHTMLAttributes<HTMLTableCellElement> & {\n  align?: 'left' | 'right' | 'center';\n};\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...rest }, ref) => (\n  <thead ref={ref} className={buildClassnames([styles.header, className])} {...rest} />\n));\nTableHeader.displayName = 'SimpleTable.Header';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...rest }, ref) => (\n  <tbody ref={ref} className={buildClassnames([styles.body, className])} {...rest} />\n));\nTableBody.displayName = 'SimpleTable.Body';\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(\n  ({ className, ...rest }, ref) => (\n    <tr ref={ref} className={buildClassnames([styles.row, className])} {...rest} />\n  ),\n);\nTableRow.displayName = 'SimpleTable.Row';\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ align, className, style, ...rest }, ref) => (\n    <td\n      ref={ref}\n      className={buildClassnames([styles.cell, className])}\n      style={{ ...assignCssVars({ textAlign: align }), ...style }}\n      {...rest}\n    />\n  ),\n);\nTableCell.displayName = 'SimpleTable.Cell';\n\nconst TableHeaderCell = React.forwardRef<HTMLTableCellElement, TableHeaderCellProps>(\n  ({ align, className, style, ...rest }, ref) => (\n    <th\n      ref={ref}\n      className={buildClassnames([styles.headerCell, className])}\n      style={{ ...assignCssVars({ textAlign: align }), ...style }}\n      {...rest}\n    />\n  ),\n);\nTableHeaderCell.displayName = 'SimpleTable.HeaderCell';\n\n/**\n * A simple table component which provides flexible, pre-styled table elements.\n */\nexport const SimpleTable = ({ striped = true, className, children }: SimpleTableProps) => (\n  <table className={buildClassnames([styles.table, striped ? styles.striped : undefined, className])}>\n    {children}\n  </table>\n);\n\nSimpleTable.Header = TableHeader;\nSimpleTable.Body = TableBody;\nSimpleTable.Row = TableRow;\nSimpleTable.HeaderCell = TableHeaderCell;\nSimpleTable.Cell = TableCell;\n"],"names":["React"],"mappings":";;;;;;AAcA,MAAM,WAAW,GAAGA,cAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC5BA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CACtF,CAAC;AACF,WAAW,CAAC,WAAW,GAAG,oBAAoB;AAE9C,MAAM,SAAS,GAAGA,cAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC5BA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CACpF,CAAC;AACF,SAAS,CAAC,WAAW,GAAG,kBAAkB;AAE1C,MAAM,QAAQ,GAAGA,cAAK,CAAC,UAAU,CAC/B,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC1BA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CAChF,CACF;AACD,QAAQ,CAAC,WAAW,GAAG,iBAAiB;AAExC,MAAM,SAAS,GAAGA,cAAK,CAAC,UAAU,CAChC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACxCA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EACpD,KAAK,EAAE,EAAE,GAAG,aAAa,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EAAA,GACvD,IAAI,EAAA,CACR,CACH,CACF;AACD,SAAS,CAAC,WAAW,GAAG,kBAAkB;AAE1C,MAAM,eAAe,GAAGA,cAAK,CAAC,UAAU,CACtC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACxCA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,EAC1D,KAAK,EAAE,EAAE,GAAG,aAAa,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,EAAA,GACvD,IAAI,EAAA,CACR,CACH,CACF;AACD,eAAe,CAAC,WAAW,GAAG,wBAAwB;AAEtD;;AAEG;MACU,WAAW,GAAG,CAAC,EAAE,OAAO,GAAG,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAoB,MACnFA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,GAAG,SAAS,EAAE,SAAS,CAAC,CAAC,EAAA,EAC/F,QAAQ,CACH;AAGV,WAAW,CAAC,MAAM,GAAG,WAAW;AAChC,WAAW,CAAC,IAAI,GAAG,SAAS;AAC5B,WAAW,CAAC,GAAG,GAAG,QAAQ;AAC1B,WAAW,CAAC,UAAU,GAAG,eAAe;AACxC,WAAW,CAAC,IAAI,GAAG,SAAS;;;;"}
+{"version":3,"file":"SimpleTable.js","sources":["../../../src/components/SimpleTable/SimpleTable.tsx"],"sourcesContent":["import React from 'react';\nimport { TableBody, TableCell, TableHeader, TableRow, TableHeaderCell, Table } from './styled';\nimport { SimpleTableProps } from './types';\n\n/**\n * A simple table component which provides flexible, pre-styled table elements.\n */\nexport const SimpleTable = ({ striped = true, className, children }: SimpleTableProps) => (\n  <Table striped={striped} className={className}>\n    {children}\n  </Table>\n);\n\nSimpleTable.Header = TableHeader;\nSimpleTable.Body = TableBody;\nSimpleTable.Row = TableRow;\nSimpleTable.HeaderCell = TableHeaderCell;\nSimpleTable.Cell = TableCell;\n"],"names":["React"],"mappings":";;;AAIA;;AAEG;AACI,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,GAAG,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAoB,MACnFA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAA,EAC1C,QAAQ,CACH;AAGV,WAAW,CAAC,MAAM,GAAG,WAAW;AAChC,WAAW,CAAC,IAAI,GAAG,SAAS;AAC5B,WAAW,CAAC,GAAG,GAAG,QAAQ;AAC1B,WAAW,CAAC,UAAU,GAAG,eAAe;AACxC,WAAW,CAAC,IAAI,GAAG,SAAS;;;;"}

package/dist/components/SimpleTable/styled.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var styled = require('styled-components');
+var sizes = require('../../theme/modules/sizes.cjs');
+var text = require('../../theme/modules/text.cjs');
+var colors = require('../../theme/modules/colors.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const { blue } = colors.colors.secondary;
+const { grey } = colors.colors.neutral;
+const TableHeader = styled__default.default.thead.withConfig({ displayName: "vui--TableHeader", componentId: "vui--o0sot" }) `background-color:white;`;
+const TableBody = styled__default.default.tbody.withConfig({ displayName: "vui--TableBody", componentId: "vui--nuzcgp" }) `&&& tr:hover td{background-color:${blue.lightest};}`;
+const TableRow = styled__default.default.tr.withConfig({ displayName: "vui--TableRow", componentId: "vui--1uhgfx1" }) ``;
+const TableCell = styled__default.default.td.withConfig({ displayName: "vui--TableCell", componentId: "vui--s41x8b" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.text.bodySmall.fontFamily};font-size:${text.text.bodySmall.fontSize};font-weight:${text.text.bodySmall.fontWeight};color:${text.text.bodySmall.color};line-height:${sizes.sizes.base};& > *{vertical-align:middle;}`;
+const TableHeaderCell = styled__default.default(TableCell).attrs({
+    as: 'th',
+}).withConfig({ displayName: "vui--TableHeaderCell", componentId: "vui--2nps2x" }) `border-bottom:1px solid ${grey.dark};font-family:${text.text.bodySmallBold.fontFamily};font-size:${text.text.bodySmallBold.fontSize};font-weight:${text.text.bodySmallBold.fontWeight};color:${text.text.bodySmallBold.color};`;
+const Table = styled__default.default.table.withConfig({ displayName: "vui--Table", componentId: "vui--lcbl46" }) `width:100%;border-spacing:0;${({ striped }) => striped &&
+    `
+   & ${TableBody} tr:nth-child(even) td {
+     background-color: ${grey.lightest};
+   }
+ `}`;
+
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCell = TableCell;
+exports.TableHeader = TableHeader;
+exports.TableHeaderCell = TableHeaderCell;
+exports.TableRow = TableRow;
+//# sourceMappingURL=styled.cjs.map

package/dist/components/SimpleTable/styled.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/SimpleTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { sizes } from '../../theme/modules/sizes';\nimport { text } from '../../theme/modules/text';\nimport { colors } from '../../theme/modules/colors';\n\nconst { blue } = colors.secondary;\nconst { grey } = colors.neutral;\n\ntype TableProps = {\n  striped?: boolean;\n};\n\nexport const TableHeader = styled.thead`\n  background-color: white;\n`;\n\nexport const TableBody = styled.tbody`\n  &&& tr:hover td {\n    background-color: ${blue.lightest};\n  }\n`;\n\nexport const TableRow = styled.tr``;\n\nexport type TableCellProps = {\n  align?: 'left' | 'right' | 'center';\n};\n\nexport const TableCell = styled.td<TableCellProps>`\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: ${({ align }) => align || 'left'};\n  background-color: white;\n\n  font-family: ${text.bodySmall.fontFamily};\n  font-size: ${text.bodySmall.fontSize};\n  font-weight: ${text.bodySmall.fontWeight};\n  color: ${text.bodySmall.color};\n  line-height: ${sizes.base};\n\n  & > * {\n    vertical-align: middle;\n  }\n`;\n\nexport const TableHeaderCell = styled(TableCell).attrs({\n  as: 'th',\n})`\n  border-bottom: 1px solid ${grey.dark};\n\n  font-family: ${text.bodySmallBold.fontFamily};\n  font-size: ${text.bodySmallBold.fontSize};\n  font-weight: ${text.bodySmallBold.fontWeight};\n  color: ${text.bodySmallBold.color};\n`;\n\nexport const Table = styled.table<TableProps>`\n  width: 100%;\n  border-spacing: 0;\n\n  ${({ striped }) =>\n    striped &&\n    `\n   & ${TableBody} tr:nth-child(even) td {\n     background-color: ${grey.lightest};\n   }\n `}\n`;\n"],"names":["colors","styled","text","sizes"],"mappings":";;;;;;;;;;;AAKA,MAAM,EAAE,IAAI,EAAE,GAAGA,aAAM,CAAC,SAAS;AACjC,MAAM,EAAE,IAAI,EAAE,GAAGA,aAAM,CAAC,OAAO;MAMlB,WAAW,GAAGC,uBAAM,CAAC,KAAK;AAIhC,MAAM,SAAS,GAAGA,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEb,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIxB,QAAQ,GAAGA,uBAAM,CAAC,EAAE;MAMpB,SAAS,GAAGA,uBAAM,CAAC,EAAE,gIAGlB,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,MAAM,CAAA,oCAAA,EAG7BC,SAAI,CAAC,SAAS,CAAC,UAAU,CAAA,WAAA,EAC3BA,SAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,aAAA,EACrBA,SAAI,CAAC,SAAS,CAAC,UAAU,UAC/BA,SAAI,CAAC,SAAS,CAAC,KAAK,gBACdC,WAAK,CAAC,IAAI,CAAA,8BAAA;AAOpB,MAAM,eAAe,GAAGF,uBAAM,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,EAAE,EAAE,IAAI;AACT,CAAA,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wBAAA,EAC2B,IAAI,CAAC,IAAI,CAAA,aAAA,EAErBC,SAAI,CAAC,aAAa,CAAC,UAAU,CAAA,WAAA,EAC/BA,SAAI,CAAC,aAAa,CAAC,QAAQ,CAAA,aAAA,EACzBA,SAAI,CAAC,aAAa,CAAC,UAAU,CAAA,OAAA,EACnCA,SAAI,CAAC,aAAa,CAAC,KAAK;AAG5B,MAAM,KAAK,GAAGD,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,4BAAA,EAI7B,CAAC,EAAE,OAAO,EAAE,KACZ,OAAO;AACP,IAAA;OACG,SAAS,CAAA;AACS,uBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;AAEpC,CAAA,CAAA,CAAA;;;;;;;;;"}

package/dist/components/SimpleTable/styled.d.ts

@@ -0,0 +1,15 @@
+type TableProps = {
+    striped?: boolean;
+};
+export declare const TableHeader: import("styled-components").StyledComponent<"thead", any, {}, never>;
+export declare const TableBody: import("styled-components").StyledComponent<"tbody", any, {}, never>;
+export declare const TableRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export type TableCellProps = {
+    align?: 'left' | 'right' | 'center';
+};
+export declare const TableCell: import("styled-components").StyledComponent<"td", any, TableCellProps, never>;
+export declare const TableHeaderCell: import("styled-components").StyledComponent<"td", any, TableCellProps & {
+    as: string;
+}, "as">;
+export declare const Table: import("styled-components").StyledComponent<"table", any, TableProps, never>;
+export {};

package/dist/components/SimpleTable/styled.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { sizes } from '../../theme/modules/sizes.js';
+import { text } from '../../theme/modules/text.js';
+import { colors } from '../../theme/modules/colors.js';
+
+const { blue } = colors.secondary;
+const { grey } = colors.neutral;
+const TableHeader = styled.thead.withConfig({ displayName: "vui--TableHeader", componentId: "vui--o0sot" }) `background-color:white;`;
+const TableBody = styled.tbody.withConfig({ displayName: "vui--TableBody", componentId: "vui--nuzcgp" }) `&&& tr:hover td{background-color:${blue.lightest};}`;
+const TableRow = styled.tr.withConfig({ displayName: "vui--TableRow", componentId: "vui--1uhgfx1" }) ``;
+const TableCell = styled.td.withConfig({ displayName: "vui--TableCell", componentId: "vui--s41x8b" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.bodySmall.fontFamily};font-size:${text.bodySmall.fontSize};font-weight:${text.bodySmall.fontWeight};color:${text.bodySmall.color};line-height:${sizes.base};& > *{vertical-align:middle;}`;
+const TableHeaderCell = styled(TableCell).attrs({
+    as: 'th',
+}).withConfig({ displayName: "vui--TableHeaderCell", componentId: "vui--2nps2x" }) `border-bottom:1px solid ${grey.dark};font-family:${text.bodySmallBold.fontFamily};font-size:${text.bodySmallBold.fontSize};font-weight:${text.bodySmallBold.fontWeight};color:${text.bodySmallBold.color};`;
+const Table = styled.table.withConfig({ displayName: "vui--Table", componentId: "vui--lcbl46" }) `width:100%;border-spacing:0;${({ striped }) => striped &&
+    `
+   & ${TableBody} tr:nth-child(even) td {
+     background-color: ${grey.lightest};
+   }
+ `}`;
+
+export { Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow };
+//# sourceMappingURL=styled.js.map

package/dist/components/SimpleTable/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../src/components/SimpleTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { sizes } from '../../theme/modules/sizes';\nimport { text } from '../../theme/modules/text';\nimport { colors } from '../../theme/modules/colors';\n\nconst { blue } = colors.secondary;\nconst { grey } = colors.neutral;\n\ntype TableProps = {\n  striped?: boolean;\n};\n\nexport const TableHeader = styled.thead`\n  background-color: white;\n`;\n\nexport const TableBody = styled.tbody`\n  &&& tr:hover td {\n    background-color: ${blue.lightest};\n  }\n`;\n\nexport const TableRow = styled.tr``;\n\nexport type TableCellProps = {\n  align?: 'left' | 'right' | 'center';\n};\n\nexport const TableCell = styled.td<TableCellProps>`\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: ${({ align }) => align || 'left'};\n  background-color: white;\n\n  font-family: ${text.bodySmall.fontFamily};\n  font-size: ${text.bodySmall.fontSize};\n  font-weight: ${text.bodySmall.fontWeight};\n  color: ${text.bodySmall.color};\n  line-height: ${sizes.base};\n\n  & > * {\n    vertical-align: middle;\n  }\n`;\n\nexport const TableHeaderCell = styled(TableCell).attrs({\n  as: 'th',\n})`\n  border-bottom: 1px solid ${grey.dark};\n\n  font-family: ${text.bodySmallBold.fontFamily};\n  font-size: ${text.bodySmallBold.fontSize};\n  font-weight: ${text.bodySmallBold.fontWeight};\n  color: ${text.bodySmallBold.color};\n`;\n\nexport const Table = styled.table<TableProps>`\n  width: 100%;\n  border-spacing: 0;\n\n  ${({ striped }) =>\n    striped &&\n    `\n   & ${TableBody} tr:nth-child(even) td {\n     background-color: ${grey.lightest};\n   }\n `}\n`;\n"],"names":[],"mappings":";;;;;AAKA,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,SAAS;AACjC,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,OAAO;MAMlB,WAAW,GAAG,MAAM,CAAC,KAAK;AAIhC,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEb,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIxB,QAAQ,GAAG,MAAM,CAAC,EAAE;MAMpB,SAAS,GAAG,MAAM,CAAC,EAAE,gIAGlB,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,MAAM,CAAA,oCAAA,EAG7B,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,WAAA,EAC3B,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,aAAA,EACrB,IAAI,CAAC,SAAS,CAAC,UAAU,UAC/B,IAAI,CAAC,SAAS,CAAC,KAAK,gBACd,KAAK,CAAC,IAAI,CAAA,8BAAA;AAOpB,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,EAAE,EAAE,IAAI;AACT,CAAA,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wBAAA,EAC2B,IAAI,CAAC,IAAI,CAAA,aAAA,EAErB,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,WAAA,EAC/B,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAA,aAAA,EACzB,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,OAAA,EACnC,IAAI,CAAC,aAAa,CAAC,KAAK;AAG5B,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,4BAAA,EAI7B,CAAC,EAAE,OAAO,EAAE,KACZ,OAAO;AACP,IAAA;OACG,SAAS,CAAA;AACS,uBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;AAEpC,CAAA,CAAA,CAAA;;;;"}

package/dist/components/Text/Text.d.ts

@@ -7,5 +7,5 @@ import React from 'react';
 export declare const Text: React.ForwardRefExoticComponent<{
     as?: import("./types").ValidTextTag | undefined;
     muted?: boolean | undefined;
-    variant?: "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "body" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholder" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "button" | "buttonSmall" | "linkLarge" | "linkMedium" | "link" | "linkSmall" | undefined;
+    variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
 } & React.HTMLAttributes<HTMLElement> & React.LabelHTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLElement>>;

package/dist/components/TextField/TextField.d.ts

@@ -1,13 +1,11 @@
 import React from 'react';
 export declare const TextField: React.ForwardRefExoticComponent<{
     rel?: string | undefined;
-    placeholder?: string | undefined;
     form?: string | undefined;
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
     pattern?: string | undefined;
-    list?: string | undefined;
     className?: string | undefined;
     children?: React.ReactNode;
     defaultChecked?: boolean | undefined;
@@ -16,7 +14,7 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -24,9 +22,10 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    placeholder?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    translate?: "no" | "yes" | undefined;
     radioGroup?: string | undefined;
     role?: React.AriaRole | undefined;
     about?: string | undefined;
@@ -62,7 +61,7 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "step" | "date" | "page" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -71,7 +70,7 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -263,13 +262,13 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     onAnimationIterationCapture?: (React.AnimationEventHandler<HTMLInputElement> & React.AnimationEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEnd?: (React.TransitionEventHandler<HTMLInputElement> & React.TransitionEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEndCapture?: (React.TransitionEventHandler<HTMLInputElement> & React.TransitionEventHandler<HTMLTextAreaElement>) | undefined;
+    alt?: string | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    alt?: string | undefined;
     autoComplete?: string | undefined;
     accept?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
@@ -281,16 +280,17 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     maxLength?: number | undefined;
     minLength?: number | undefined;
     src?: string | undefined;
+    list?: string | undefined;
+    name?: string | undefined;
     height?: string | number | undefined;
     max?: string | number | undefined;
     min?: string | number | undefined;
-    name?: string | undefined;
     width?: string | number | undefined;
-    wrap?: string | undefined;
-    step?: string | number | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
+    step?: string | number | undefined;
     rows?: number | undefined;
+    wrap?: string | undefined;
 } & {
     value?: string | undefined;
     type?: import("./types").TextFieldType | undefined;

package/dist/components/TextField/index.d.ts

@@ -2,13 +2,11 @@
 export type * from './types';
 export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
     rel?: string | undefined;
-    placeholder?: string | undefined;
     form?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
     pattern?: string | undefined;
-    list?: string | undefined;
     className?: string | undefined;
     children?: import("react").ReactNode;
     defaultChecked?: boolean | undefined;
@@ -17,7 +15,7 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -25,9 +23,10 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    placeholder?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    translate?: "no" | "yes" | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
@@ -63,7 +62,7 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "step" | "date" | "page" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -72,7 +71,7 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -264,13 +263,13 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
     onAnimationIterationCapture?: (import("react").AnimationEventHandler<HTMLInputElement> & import("react").AnimationEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEnd?: (import("react").TransitionEventHandler<HTMLInputElement> & import("react").TransitionEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEndCapture?: (import("react").TransitionEventHandler<HTMLInputElement> & import("react").TransitionEventHandler<HTMLTextAreaElement>) | undefined;
+    alt?: string | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    alt?: string | undefined;
     autoComplete?: string | undefined;
     accept?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
@@ -282,16 +281,17 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
     maxLength?: number | undefined;
     minLength?: number | undefined;
     src?: string | undefined;
+    list?: string | undefined;
+    name?: string | undefined;
     height?: string | number | undefined;
     max?: string | number | undefined;
     min?: string | number | undefined;
-    name?: string | undefined;
     width?: string | number | undefined;
-    wrap?: string | undefined;
-    step?: string | number | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
+    step?: string | number | undefined;
     rows?: number | undefined;
+    wrap?: string | undefined;
 } & {
     value?: string | undefined;
     type?: import("./types").TextFieldType | undefined;

package/dist/components/ToastsLayout/ToastsLayout.cjs

@@ -1,24 +1,60 @@
 'use strict';
 
-var reactTransitionGroup = require('react-transition-group');
 var React = require('react');
 var reactDom = require('react-dom');
-var ToastTransitionItem = require('./components/ToastTransitionItem.cjs');
-var Stack = require('../Stack/Stack.cjs');
-var buildClassnames = require('../../utils/buildClassnames.cjs');
+var reactTransitionGroup = require('react-transition-group');
+var FlexCol = require('../Flex/FlexCol/FlexCol.cjs');
+var Toast = require('./components/Toast.cjs');
+var Toast_module = require('./components/Toast.module.scss.cjs');
 var ToastsLayout_module = require('./ToastsLayout.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+/**
+ * A fixed-position container that manages stacking, animating, and dismissing toast notifications.
+ * Renders into a portal on `document.body`. Only one instance should exist per application.
+ */
 const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max = 3, onClose, }) => {
+    const nodeRefs = React.useRef(new Map());
+    // Stable ref to avoid re-triggering the dismiss effect when onClose identity changes
+    const onCloseRef = React.useRef(onClose);
+    React.useEffect(() => {
+        onCloseRef.current = onClose;
+    }, [onClose]);
     React.useEffect(() => {
-        if (max && toasts.length > max)
-            onClose(toasts[0].key);
-    }, [toasts, max, onClose]);
-    return reactDom.createPortal(React__default.default.createElement(Stack.Stack, { className: buildClassnames.buildClassnames([ToastsLayout_module.container]), direction: "vertical", alignX: "center", spacing: 4 },
-        React__default.default.createElement(reactTransitionGroup.TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => (React__default.default.createElement(ToastTransitionItem.ToastTransitionItem, { key: toast.key, toast: toast, last: index === toasts.length - 1, minWidth: minWidth, className: className, e2eClassName: e2eClassName, onClose: () => onClose(toast.key) }))))), document.body);
+        if (typeof max === 'number' && toasts.length > max)
+            onCloseRef.current(toasts[0].key);
+    }, [toasts, max]);
+    // Clean up refs only after exit animation completes (via onExited callback)
+    const handleExited = React.useCallback((key) => {
+        nodeRefs.current.delete(key);
+    }, []);
+    let resolvedMinWidth;
+    if (!minWidth && minWidth !== 0) {
+        resolvedMinWidth = undefined;
+    }
+    else if (typeof minWidth === 'number' || !isNaN(Number(minWidth))) {
+        resolvedMinWidth = `${minWidth}px`;
+    }
+    else {
+        resolvedMinWidth = String(minWidth);
+    }
+    return reactDom.createPortal(React__default.default.createElement(FlexCol.FlexCol, { alignItems: "center", gap: "base", className: ToastsLayout_module.ToastsLayoutContainer, "aria-live": "polite", "aria-atomic": "false" },
+        React__default.default.createElement(reactTransitionGroup.TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => {
+            if (!nodeRefs.current.has(toast.key)) {
+                nodeRefs.current.set(toast.key, { current: null });
+            }
+            const nodeRef = nodeRefs.current.get(toast.key);
+            return (React__default.default.createElement(reactTransitionGroup.CSSTransition, { nodeRef: nodeRef, key: toast.key, timeout: 500, classNames: {
+                    enter: Toast_module.enter,
+                    enterActive: Toast_module.enterActive,
+                    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 })));
+        }))), document.body);
 };
 
 exports.ToastsLayout = ToastsLayout;

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

@@ -1 +1 @@
-{"version":3,"file":"ToastsLayout.cjs","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import { TransitionGroup } from 'react-transition-group';\nimport React, { useEffect, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastsLayoutPropTypes } from './types';\nimport { ToastTransitionItem } from './components/ToastTransitionItem';\nimport { Stack } from '../Stack';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './ToastsLayout.module.scss';\n\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n  className,\n  e2eClassName,\n  toasts,\n  minWidth = '50vw',\n  max = 3,\n  onClose,\n}) => {\n  useEffect(() => {\n    if (max && toasts.length > max) onClose(toasts[0].key);\n  }, [toasts, max, onClose]);\n\n  return createPortal(\n    <Stack\n      className={buildClassnames([styles.container])}\n      direction=\"vertical\"\n      alignX=\"center\"\n      spacing={4}\n    >\n      <TransitionGroup component={null}>\n        {[...toasts].reverse().map((toast, index) => (\n          <ToastTransitionItem\n            key={toast.key}\n            toast={toast}\n            last={index === toasts.length - 1}\n            minWidth={minWidth}\n            className={className}\n            e2eClassName={e2eClassName}\n            onClose={() => onClose(toast.key)}\n          />\n        ))}\n      </TransitionGroup>\n    </Stack>,\n    document.body,\n  );\n};\n"],"names":["useEffect","createPortal","React","Stack","buildClassnames","styles","TransitionGroup","ToastTransitionItem"],"mappings":";;;;;;;;;;;;;;MASa,YAAY,GAA8B,CAAC,EACtD,SAAS,EACT,YAAY,EACZ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,GAAG,GAAG,CAAC,EACP,OAAO,GACR,KAAI;IACHA,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,GAAG,IAAI,MAAM,CAAC,MAAM,GAAG,GAAG;YAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IACxD,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;IAE1B,OAAOC,qBAAY,CACjBC,sBAAA,CAAA,aAAA,CAACC,WAAK,EAAA,EACJ,SAAS,EAAEC,+BAAe,CAAC,CAACC,mBAAM,CAAC,SAAS,CAAC,CAAC,EAC9C,SAAS,EAAC,UAAU,EACpB,MAAM,EAAC,QAAQ,EACf,OAAO,EAAE,CAAC,EAAA;AAEV,QAAAH,sBAAA,CAAA,aAAA,CAACI,oCAAe,EAAA,EAAC,SAAS,EAAE,IAAI,IAC7B,CAAC,GAAG,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACtCJ,sBAAA,CAAA,aAAA,CAACK,uCAAmB,IAClB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EACjC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAA,CACjC,CACH,CAAC,CACc,CACZ,EACR,QAAQ,CAAC,IAAI,CACd;AACH;;;;"}
+{"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;;;;"}

package/dist/components/ToastsLayout/ToastsLayout.d.ts

@@ -1,3 +1,7 @@
 import { FC } from 'react';
 import { ToastsLayoutPropTypes } from './types';
+/**
+ * A fixed-position container that manages stacking, animating, and dismissing toast notifications.
+ * Renders into a portal on `document.body`. Only one instance should exist per application.
+ */
 export declare const ToastsLayout: FC<ToastsLayoutPropTypes>;

package/dist/components/ToastsLayout/ToastsLayout.js

@@ -1,18 +1,54 @@
-import { TransitionGroup } from 'react-transition-group';
-import React__default, { useEffect } from 'react';
+import React__default, { useRef, useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { ToastTransitionItem } from './components/ToastTransitionItem.js';
-import { Stack } from '../Stack/Stack.js';
-import { buildClassnames } from '../../utils/buildClassnames.js';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { FlexCol } from '../Flex/FlexCol/FlexCol.js';
+import { Toast } from './components/Toast.js';
+import toastStyles from './components/Toast.module.scss.js';
 import styles from './ToastsLayout.module.scss.js';
 
+/**
+ * A fixed-position container that manages stacking, animating, and dismissing toast notifications.
+ * Renders into a portal on `document.body`. Only one instance should exist per application.
+ */
 const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max = 3, onClose, }) => {
+    const nodeRefs = useRef(new Map());
+    // Stable ref to avoid re-triggering the dismiss effect when onClose identity changes
+    const onCloseRef = useRef(onClose);
     useEffect(() => {
-        if (max && toasts.length > max)
-            onClose(toasts[0].key);
-    }, [toasts, max, onClose]);
-    return createPortal(React__default.createElement(Stack, { className: buildClassnames([styles.container]), direction: "vertical", alignX: "center", spacing: 4 },
-        React__default.createElement(TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => (React__default.createElement(ToastTransitionItem, { key: toast.key, toast: toast, last: index === toasts.length - 1, minWidth: minWidth, className: className, e2eClassName: e2eClassName, onClose: () => onClose(toast.key) }))))), document.body);
+        onCloseRef.current = onClose;
+    }, [onClose]);
+    useEffect(() => {
+        if (typeof max === 'number' && toasts.length > max)
+            onCloseRef.current(toasts[0].key);
+    }, [toasts, max]);
+    // Clean up refs only after exit animation completes (via onExited callback)
+    const handleExited = useCallback((key) => {
+        nodeRefs.current.delete(key);
+    }, []);
+    let resolvedMinWidth;
+    if (!minWidth && minWidth !== 0) {
+        resolvedMinWidth = undefined;
+    }
+    else if (typeof minWidth === 'number' || !isNaN(Number(minWidth))) {
+        resolvedMinWidth = `${minWidth}px`;
+    }
+    else {
+        resolvedMinWidth = String(minWidth);
+    }
+    return createPortal(React__default.createElement(FlexCol, { alignItems: "center", gap: "base", className: styles.ToastsLayoutContainer, "aria-live": "polite", "aria-atomic": "false" },
+        React__default.createElement(TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => {
+            if (!nodeRefs.current.has(toast.key)) {
+                nodeRefs.current.set(toast.key, { current: null });
+            }
+            const nodeRef = nodeRefs.current.get(toast.key);
+            return (React__default.createElement(CSSTransition, { nodeRef: nodeRef, key: toast.key, timeout: 500, classNames: {
+                    enter: toastStyles.enter,
+                    enterActive: toastStyles.enterActive,
+                    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 })));
+        }))), document.body);
 };
 
 export { ToastsLayout };

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

@@ -1 +1 @@
-{"version":3,"file":"ToastsLayout.js","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import { TransitionGroup } from 'react-transition-group';\nimport React, { useEffect, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastsLayoutPropTypes } from './types';\nimport { ToastTransitionItem } from './components/ToastTransitionItem';\nimport { Stack } from '../Stack';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './ToastsLayout.module.scss';\n\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n  className,\n  e2eClassName,\n  toasts,\n  minWidth = '50vw',\n  max = 3,\n  onClose,\n}) => {\n  useEffect(() => {\n    if (max && toasts.length > max) onClose(toasts[0].key);\n  }, [toasts, max, onClose]);\n\n  return createPortal(\n    <Stack\n      className={buildClassnames([styles.container])}\n      direction=\"vertical\"\n      alignX=\"center\"\n      spacing={4}\n    >\n      <TransitionGroup component={null}>\n        {[...toasts].reverse().map((toast, index) => (\n          <ToastTransitionItem\n            key={toast.key}\n            toast={toast}\n            last={index === toasts.length - 1}\n            minWidth={minWidth}\n            className={className}\n            e2eClassName={e2eClassName}\n            onClose={() => onClose(toast.key)}\n          />\n        ))}\n      </TransitionGroup>\n    </Stack>,\n    document.body,\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;MASa,YAAY,GAA8B,CAAC,EACtD,SAAS,EACT,YAAY,EACZ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,GAAG,GAAG,CAAC,EACP,OAAO,GACR,KAAI;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,GAAG,IAAI,MAAM,CAAC,MAAM,GAAG,GAAG;YAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IACxD,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;IAE1B,OAAO,YAAY,CACjBA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAC9C,SAAS,EAAC,UAAU,EACpB,MAAM,EAAC,QAAQ,EACf,OAAO,EAAE,CAAC,EAAA;AAEV,QAAAA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EAAC,SAAS,EAAE,IAAI,IAC7B,CAAC,GAAG,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACtCA,cAAA,CAAA,aAAA,CAAC,mBAAmB,IAClB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EACjC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAA,CACjC,CACH,CAAC,CACc,CACZ,EACR,QAAQ,CAAC,IAAI,CACd;AACH;;;;"}
+{"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":"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"}

package/dist/components/ToastsLayout/ToastsLayout.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._container_yulmp_1 {\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}\n\n._toast_yulmp_9 {\n  background-color: var(--colors-neutral-ink-dark);\n  padding: 12px 24px 12px 12px;\n  box-shadow: var(--shadows-lg);\n  border-radius: var(--radius-md);\n  pointer-events: auto;\n  /* Below container's tooltip layer; ensures toasts stack above page content but below the fixed container's z-context */\n  z-index: 40;\n  min-width: var(--toast-min-width);\n  max-width: 80vw;\n}\n\n/* CSSTransition class names (applied by react-transition-group at runtime) */\n.veeqo-components-toast-enter {\n  transform: translateY(12px);\n  opacity: 0;\n}\n\n.veeqo-components-toast-enter-active {\n  transform: translateY(0);\n  opacity: 1;\n  transition: 500ms ease;\n}\n\n.veeqo-components-toast-exit {\n  transform: var(--toast-exit-start);\n  opacity: 1;\n}\n\n.veeqo-components-toast-exit-active {\n  transform: var(--toast-exit-end);\n  opacity: 0;\n  transition: 500ms ease;\n}\n\n._iconWrap_yulmp_44 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: var(--radius-md);\n  background-color: var(--icon-color);\n  color: #fff;\n}\n._iconWrap_yulmp_44 svg {\n  width: var(--sizes-md);\n  height: var(--sizes-md);\n}\n\n._contentStack_yulmp_60 {\n  flex-grow: 1;\n}\n\n._toastText_yulmp_64 {\n  color: white;\n  font-size: 16px;\n}");
-var styles = {"container":"_container_yulmp_1","toast":"_toast_yulmp_9","iconWrap":"_iconWrap_yulmp_44","contentStack":"_contentStack_yulmp_60","toastText":"_toastText_yulmp_64"};
+___$insertStyle("._ToastsLayoutContainer_dq7e5_1 {\n  position: fixed;\n  bottom: var(--sizes-md);\n  left: 0;\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}");
+var styles = {"ToastsLayoutContainer":"_ToastsLayoutContainer_dq7e5_1"};
 
 module.exports = styles;
 //# sourceMappingURL=ToastsLayout.module.scss.cjs.map

package/dist/components/ToastsLayout/ToastsLayout.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToastsLayout.module.scss.cjs","sources":["../../../src/components/ToastsLayout/ToastsLayout.module.scss"],"sourcesContent":[".container {\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}\n\n.toast {\n  background-color: var(--colors-neutral-ink-dark);\n  padding: 12px 24px 12px 12px;\n  box-shadow: var(--shadows-lg);\n  border-radius: var(--radius-md);\n  pointer-events: auto;\n  /* Below container's tooltip layer; ensures toasts stack above page content but below the fixed container's z-context */\n  z-index: 40;\n  min-width: var(--toast-min-width);\n  max-width: 80vw;\n}\n\n/* CSSTransition class names (applied by react-transition-group at runtime) */\n:global(.veeqo-components-toast-enter) {\n  transform: translateY(12px);\n  opacity: 0;\n}\n\n:global(.veeqo-components-toast-enter-active) {\n  transform: translateY(0);\n  opacity: 1;\n  transition: 500ms ease;\n}\n\n:global(.veeqo-components-toast-exit) {\n  transform: var(--toast-exit-start);\n  opacity: 1;\n}\n\n:global(.veeqo-components-toast-exit-active) {\n  transform: var(--toast-exit-end);\n  opacity: 0;\n  transition: 500ms ease;\n}\n\n.iconWrap {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: var(--radius-md);\n  background-color: var(--icon-color);\n  color: #fff;\n\n  svg {\n    width: var(--sizes-md);\n    height: var(--sizes-md);\n  }\n}\n\n.contentStack {\n  flex-grow: 1;\n}\n\n.toastText {\n  color: white;\n  font-size: 16px;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,48CAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}
+{"version":3,"file":"ToastsLayout.module.scss.cjs","sources":["../../../src/components/ToastsLayout/ToastsLayout.module.scss"],"sourcesContent":[".ToastsLayoutContainer {\n  position: fixed;\n  bottom: var(--sizes-md);\n  left: 0;\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,8KAAA;AACA,aAAA,CAAA,uBAAA,CAAA,gCAAA;;;;"}

package/dist/components/ToastsLayout/ToastsLayout.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._container_yulmp_1 {\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}\n\n._toast_yulmp_9 {\n  background-color: var(--colors-neutral-ink-dark);\n  padding: 12px 24px 12px 12px;\n  box-shadow: var(--shadows-lg);\n  border-radius: var(--radius-md);\n  pointer-events: auto;\n  /* Below container's tooltip layer; ensures toasts stack above page content but below the fixed container's z-context */\n  z-index: 40;\n  min-width: var(--toast-min-width);\n  max-width: 80vw;\n}\n\n/* CSSTransition class names (applied by react-transition-group at runtime) */\n.veeqo-components-toast-enter {\n  transform: translateY(12px);\n  opacity: 0;\n}\n\n.veeqo-components-toast-enter-active {\n  transform: translateY(0);\n  opacity: 1;\n  transition: 500ms ease;\n}\n\n.veeqo-components-toast-exit {\n  transform: var(--toast-exit-start);\n  opacity: 1;\n}\n\n.veeqo-components-toast-exit-active {\n  transform: var(--toast-exit-end);\n  opacity: 0;\n  transition: 500ms ease;\n}\n\n._iconWrap_yulmp_44 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: var(--radius-md);\n  background-color: var(--icon-color);\n  color: #fff;\n}\n._iconWrap_yulmp_44 svg {\n  width: var(--sizes-md);\n  height: var(--sizes-md);\n}\n\n._contentStack_yulmp_60 {\n  flex-grow: 1;\n}\n\n._toastText_yulmp_64 {\n  color: white;\n  font-size: 16px;\n}");
-var styles = {"container":"_container_yulmp_1","toast":"_toast_yulmp_9","iconWrap":"_iconWrap_yulmp_44","contentStack":"_contentStack_yulmp_60","toastText":"_toastText_yulmp_64"};
+insertStyle("._ToastsLayoutContainer_dq7e5_1 {\n  position: fixed;\n  bottom: var(--sizes-md);\n  left: 0;\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}");
+var styles = {"ToastsLayoutContainer":"_ToastsLayoutContainer_dq7e5_1"};
 
 export { styles as default };
 //# sourceMappingURL=ToastsLayout.module.scss.js.map

package/dist/components/ToastsLayout/ToastsLayout.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastsLayout.module.scss.js","sources":["../../../src/components/ToastsLayout/ToastsLayout.module.scss"],"sourcesContent":[".container {\n  position: fixed;\n  bottom: 24px;\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}\n\n.toast {\n  background-color: var(--colors-neutral-ink-dark);\n  padding: 12px 24px 12px 12px;\n  box-shadow: var(--shadows-lg);\n  border-radius: var(--radius-md);\n  pointer-events: auto;\n  /* Below container's tooltip layer; ensures toasts stack above page content but below the fixed container's z-context */\n  z-index: 40;\n  min-width: var(--toast-min-width);\n  max-width: 80vw;\n}\n\n/* CSSTransition class names (applied by react-transition-group at runtime) */\n:global(.veeqo-components-toast-enter) {\n  transform: translateY(12px);\n  opacity: 0;\n}\n\n:global(.veeqo-components-toast-enter-active) {\n  transform: translateY(0);\n  opacity: 1;\n  transition: 500ms ease;\n}\n\n:global(.veeqo-components-toast-exit) {\n  transform: var(--toast-exit-start);\n  opacity: 1;\n}\n\n:global(.veeqo-components-toast-exit-active) {\n  transform: var(--toast-exit-end);\n  opacity: 0;\n  transition: 500ms ease;\n}\n\n.iconWrap {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  height: 40px;\n  width: 40px;\n  border-radius: var(--radius-md);\n  background-color: var(--icon-color);\n  color: #fff;\n\n  svg {\n    width: var(--sizes-md);\n    height: var(--sizes-md);\n  }\n}\n\n.contentStack {\n  flex-grow: 1;\n}\n\n.toastText {\n  color: white;\n  font-size: 16px;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,48CAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}
+{"version":3,"file":"ToastsLayout.module.scss.js","sources":["../../../src/components/ToastsLayout/ToastsLayout.module.scss"],"sourcesContent":[".ToastsLayoutContainer {\n  position: fixed;\n  bottom: var(--sizes-md);\n  left: 0;\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,8KAAA;AACA,aAAA,CAAA,uBAAA,CAAA,gCAAA;;;;"}