@veeqo/ui 14.7.1 → 14.9.0-beta-1

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

@@ -1 +1 @@
-{"version":3,"file":"SimpleTable.cjs","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","Table","TableHeader","TableBody","TableRow","TableHeaderCell","TableCell"],"mappings":";;;;;;;;;AAIA;;AAEG;AACI,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,GAAG,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAoB,MACnFA,sBAAA,CAAA,aAAA,CAACC,YAAK,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAA,EAC1C,QAAQ,CACH;AAGV,WAAW,CAAC,MAAM,GAAGC,kBAAW;AAChC,WAAW,CAAC,IAAI,GAAGC,gBAAS;AAC5B,WAAW,CAAC,GAAG,GAAGC,eAAQ;AAC1B,WAAW,CAAC,UAAU,GAAGC,sBAAe;AACxC,WAAW,CAAC,IAAI,GAAGC,gBAAS;;;;"}
+{"version":3,"file":"SimpleTable.cjs","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","buildClassnames","styles","assignCssVars"],"mappings":"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"}

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

@@ -5,11 +5,13 @@ import { SimpleTableProps } from './types';
  */
 export declare const SimpleTable: {
     ({ striped, className, children }: SimpleTableProps): React.JSX.Element;
-    Header: import("styled-components").StyledComponent<"thead", any, {}, never>;
-    Body: import("styled-components").StyledComponent<"tbody", any, {}, never>;
-    Row: import("styled-components").StyledComponent<"tr", any, {}, never>;
-    HeaderCell: import("styled-components").StyledComponent<"td", any, import("./styled").TableCellProps & {
-        as: string;
-    }, "as">;
-    Cell: import("styled-components").StyledComponent<"td", any, import("./styled").TableCellProps, never>;
+    Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+    Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+    Row: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+    HeaderCell: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & {
+        align?: "left" | "right" | "center" | undefined;
+    } & React.RefAttributes<HTMLTableCellElement>>;
+    Cell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & {
+        align?: "left" | "right" | "center" | undefined;
+    } & React.RefAttributes<HTMLTableCellElement>>;
 };

package/dist/components/SimpleTable/SimpleTable.js

@@ -1,10 +1,23 @@
 import React__default from 'react';
-import { Table, TableHeader, TableBody, TableRow, TableHeaderCell, TableCell } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../utils/assignCssVars.js';
+import styles from './SimpleTable.module.scss.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, { striped: striped, className: className }, children));
+const SimpleTable = ({ striped = true, className, children }) => (React__default.createElement("table", { className: buildClassnames([styles.table, striped ? styles.striped : undefined, 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 { 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;;;;"}
+{"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":"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"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._table_d5624_1 {\n  width: 100%;\n  border-spacing: 0;\n}\n\n._header_d5624_6 {\n  background-color: white;\n}\n\n._body_d5624_10 tr:hover td {\n  background-color: var(--colors-secondary-blue-lightest);\n}\n\n._row_d5624_14 {\n  /* Minimal reset; row styles are applied via parent selectors */\n}\n\n._cell_d5624_18 {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--text-align, left);\n  background-color: white;\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  color: var(--text-body-small-color);\n  line-height: var(--sizes-base);\n}\n._cell_d5624_18 > * {\n  vertical-align: middle;\n}\n\n._headerCell_d5624_33 {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--text-align, left);\n  background-color: white;\n  line-height: var(--sizes-base);\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n  font-family: var(--text-body-small-bold-font-family);\n  font-size: var(--text-body-small-bold-font-size);\n  font-weight: var(--text-body-small-bold-font-weight);\n  color: var(--text-body-small-bold-color);\n}\n._headerCell_d5624_33 > * {\n  vertical-align: middle;\n}\n\n._striped_d5624_49 {\n  /* Hover must override striped even-row background.\n     Placed after :nth-child(even) rule so equal specificity wins by order. */\n}\n._striped_d5624_49 ._body_d5624_10 tr:nth-child(even) td {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._striped_d5624_49 ._body_d5624_10 tr:nth-child(even):hover td {\n  background-color: var(--colors-secondary-blue-lightest);\n}");
+var styles = {"table":"_table_d5624_1","header":"_header_d5624_6","body":"_body_d5624_10","row":"_row_d5624_14","cell":"_cell_d5624_18","headerCell":"_headerCell_d5624_33","striped":"_striped_d5624_49"};
+
+module.exports = styles;
+//# sourceMappingURL=SimpleTable.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleTable.module.scss.cjs","sources":["../../../src/components/SimpleTable/SimpleTable.module.scss"],"sourcesContent":[".table {\n  width: 100%;\n  border-spacing: 0;\n}\n\n.header {\n  background-color: white;\n}\n\n.body {\n  tr:hover td {\n    background-color: var(--colors-secondary-blue-lightest);\n  }\n}\n\n.row {\n  /* Minimal reset; row styles are applied via parent selectors */\n}\n\n.cell {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--text-align, left);\n  background-color: white;\n\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  color: var(--text-body-small-color);\n  line-height: var(--sizes-base);\n\n  & > * {\n    vertical-align: middle;\n  }\n}\n\n.headerCell {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--text-align, left);\n  background-color: white;\n  line-height: var(--sizes-base);\n\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n\n  font-family: var(--text-body-small-bold-font-family);\n  font-size: var(--text-body-small-bold-font-size);\n  font-weight: var(--text-body-small-bold-font-weight);\n  color: var(--text-body-small-bold-color);\n\n  & > * {\n    vertical-align: middle;\n  }\n}\n\n.striped {\n  .body tr:nth-child(even) td {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  /* Hover must override striped even-row background.\n     Placed after :nth-child(even) rule so equal specificity wins by order. */\n  .body tr:nth-child(even):hover td {\n    background-color: var(--colors-secondary-blue-lightest);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+mDAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,KAAA,CAAA,eAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._table_d5624_1 {\n  width: 100%;\n  border-spacing: 0;\n}\n\n._header_d5624_6 {\n  background-color: white;\n}\n\n._body_d5624_10 tr:hover td {\n  background-color: var(--colors-secondary-blue-lightest);\n}\n\n._row_d5624_14 {\n  /* Minimal reset; row styles are applied via parent selectors */\n}\n\n._cell_d5624_18 {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--text-align, left);\n  background-color: white;\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  color: var(--text-body-small-color);\n  line-height: var(--sizes-base);\n}\n._cell_d5624_18 > * {\n  vertical-align: middle;\n}\n\n._headerCell_d5624_33 {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--text-align, left);\n  background-color: white;\n  line-height: var(--sizes-base);\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n  font-family: var(--text-body-small-bold-font-family);\n  font-size: var(--text-body-small-bold-font-size);\n  font-weight: var(--text-body-small-bold-font-weight);\n  color: var(--text-body-small-bold-color);\n}\n._headerCell_d5624_33 > * {\n  vertical-align: middle;\n}\n\n._striped_d5624_49 {\n  /* Hover must override striped even-row background.\n     Placed after :nth-child(even) rule so equal specificity wins by order. */\n}\n._striped_d5624_49 ._body_d5624_10 tr:nth-child(even) td {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._striped_d5624_49 ._body_d5624_10 tr:nth-child(even):hover td {\n  background-color: var(--colors-secondary-blue-lightest);\n}");
+var styles = {"table":"_table_d5624_1","header":"_header_d5624_6","body":"_body_d5624_10","row":"_row_d5624_14","cell":"_cell_d5624_18","headerCell":"_headerCell_d5624_33","striped":"_striped_d5624_49"};
+
+export { styles as default };
+//# sourceMappingURL=SimpleTable.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleTable.module.scss.js","sources":["../../../src/components/SimpleTable/SimpleTable.module.scss"],"sourcesContent":[".table {\n  width: 100%;\n  border-spacing: 0;\n}\n\n.header {\n  background-color: white;\n}\n\n.body {\n  tr:hover td {\n    background-color: var(--colors-secondary-blue-lightest);\n  }\n}\n\n.row {\n  /* Minimal reset; row styles are applied via parent selectors */\n}\n\n.cell {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--text-align, left);\n  background-color: white;\n\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  color: var(--text-body-small-color);\n  line-height: var(--sizes-base);\n\n  & > * {\n    vertical-align: middle;\n  }\n}\n\n.headerCell {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--text-align, left);\n  background-color: white;\n  line-height: var(--sizes-base);\n\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n\n  font-family: var(--text-body-small-bold-font-family);\n  font-size: var(--text-body-small-bold-font-size);\n  font-weight: var(--text-body-small-bold-font-weight);\n  color: var(--text-body-small-bold-color);\n\n  & > * {\n    vertical-align: middle;\n  }\n}\n\n.striped {\n  .body tr:nth-child(even) td {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  /* Hover must override striped even-row background.\n     Placed after :nth-child(even) rule so equal specificity wins by order. */\n  .body tr:nth-child(even):hover td {\n    background-color: var(--colors-secondary-blue-lightest);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+mDAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,KAAA,CAAA,eAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

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?: "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;
+    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;
 } & React.HTMLAttributes<HTMLElement> & React.LabelHTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLElement>>;

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

@@ -1,11 +1,13 @@
 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;
@@ -14,7 +16,7 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -22,10 +24,9 @@ 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?: "no" | "yes" | undefined;
+    translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: React.AriaRole | undefined;
     about?: string | undefined;
@@ -61,7 +62,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" | "step" | "date" | "page" | "location" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -70,7 +71,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" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -262,13 +263,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;
@@ -280,17 +281,16 @@ 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,11 +2,13 @@
 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;
@@ -15,7 +17,7 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -23,10 +25,9 @@ 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?: "no" | "yes" | undefined;
+    translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
@@ -62,7 +63,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" | "step" | "date" | "page" | "location" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -71,7 +72,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" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -263,13 +264,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;
@@ -281,17 +282,16 @@ 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

@@ -3,8 +3,10 @@
 var reactTransitionGroup = require('react-transition-group');
 var React = require('react');
 var reactDom = require('react-dom');
-var styled = require('./components/styled.cjs');
-var Toast = require('./components/Toast.cjs');
+var ToastTransitionItem = require('./components/ToastTransitionItem.cjs');
+var Stack = require('../Stack/Stack.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+var ToastsLayout_module = require('./ToastsLayout.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -15,9 +17,8 @@ const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max
         if (max && toasts.length > max)
             onClose(toasts[0].key);
     }, [toasts, max, onClose]);
-    return reactDom.createPortal(React__default.default.createElement(styled.ToastsLayoutContainer, { direction: "vertical", alignX: "center", spacing: 4 },
-        React__default.default.createElement(reactTransitionGroup.TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: toast.key, timeout: 500, classNames: "veeqo-components-toast" },
-            React__default.default.createElement(Toast.Toast, { className: className, e2eClassName: e2eClassName, minWidth: minWidth, last: index === toasts.length - 1, onClose: () => onClose(toast.key), ...toast })))))), document.body);
+    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);
 };
 
 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 { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport React, { useEffect, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastsLayoutPropTypes } from './types';\nimport { ToastsLayoutContainer } from './components/styled';\nimport { Toast } from './components/Toast';\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    <ToastsLayoutContainer direction=\"vertical\" alignX=\"center\" spacing={4}>\n      <TransitionGroup component={null}>\n        {[...toasts].reverse().map((toast, index) => (\n          <CSSTransition key={toast.key} timeout={500} classNames=\"veeqo-components-toast\">\n            <Toast\n              className={className}\n              e2eClassName={e2eClassName}\n              minWidth={minWidth}\n              last={index === toasts.length - 1}\n              onClose={() => onClose(toast.key)}\n              {...toast}\n            />\n          </CSSTransition>\n        ))}\n      </TransitionGroup>\n    </ToastsLayoutContainer>,\n    document.body,\n  );\n};\n"],"names":["useEffect","createPortal","React","ToastsLayoutContainer","TransitionGroup","CSSTransition","Toast"],"mappings":";;;;;;;;;;;;MAOa,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;AAE1B,IAAA,OAAOC,qBAAY,CACjBC,sBAAA,CAAA,aAAA,CAACC,4BAAqB,IAAC,SAAS,EAAC,UAAU,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,EAAA;AACpE,QAAAD,sBAAA,CAAA,aAAA,CAACE,oCAAe,EAAA,EAAC,SAAS,EAAE,IAAI,IAC7B,CAAC,GAAG,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACtCF,qCAACG,kCAAa,EAAA,EAAC,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,EAAC,wBAAwB,EAAA;YAC9EH,sBAAA,CAAA,aAAA,CAACI,WAAK,IACJ,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EACjC,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAA,GAC7B,KAAK,GACT,CACY,CACjB,CAAC,CACc,CACI,EACxB,QAAQ,CAAC,IAAI,CACd;AACH;;;;"}
+{"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;;;;"}

package/dist/components/ToastsLayout/ToastsLayout.js

@@ -1,17 +1,18 @@
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { TransitionGroup } from 'react-transition-group';
 import React__default, { useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { ToastsLayoutContainer } from './components/styled.js';
-import { Toast } from './components/Toast.js';
+import { ToastTransitionItem } from './components/ToastTransitionItem.js';
+import { Stack } from '../Stack/Stack.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import styles from './ToastsLayout.module.scss.js';
 
 const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max = 3, onClose, }) => {
     useEffect(() => {
         if (max && toasts.length > max)
             onClose(toasts[0].key);
     }, [toasts, max, onClose]);
-    return createPortal(React__default.createElement(ToastsLayoutContainer, { direction: "vertical", alignX: "center", spacing: 4 },
-        React__default.createElement(TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => (React__default.createElement(CSSTransition, { key: toast.key, timeout: 500, classNames: "veeqo-components-toast" },
-            React__default.createElement(Toast, { className: className, e2eClassName: e2eClassName, minWidth: minWidth, last: index === toasts.length - 1, onClose: () => onClose(toast.key), ...toast })))))), document.body);
+    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);
 };
 
 export { ToastsLayout };

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

@@ -1 +1 @@
-{"version":3,"file":"ToastsLayout.js","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport React, { useEffect, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastsLayoutPropTypes } from './types';\nimport { ToastsLayoutContainer } from './components/styled';\nimport { Toast } from './components/Toast';\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    <ToastsLayoutContainer direction=\"vertical\" alignX=\"center\" spacing={4}>\n      <TransitionGroup component={null}>\n        {[...toasts].reverse().map((toast, index) => (\n          <CSSTransition key={toast.key} timeout={500} classNames=\"veeqo-components-toast\">\n            <Toast\n              className={className}\n              e2eClassName={e2eClassName}\n              minWidth={minWidth}\n              last={index === toasts.length - 1}\n              onClose={() => onClose(toast.key)}\n              {...toast}\n            />\n          </CSSTransition>\n        ))}\n      </TransitionGroup>\n    </ToastsLayoutContainer>,\n    document.body,\n  );\n};\n"],"names":["React"],"mappings":";;;;;;MAOa,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;AAE1B,IAAA,OAAO,YAAY,CACjBA,cAAA,CAAA,aAAA,CAAC,qBAAqB,IAAC,SAAS,EAAC,UAAU,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,EAAA;AACpE,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,6BAAC,aAAa,EAAA,EAAC,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,EAAC,wBAAwB,EAAA;YAC9EA,cAAA,CAAA,aAAA,CAAC,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EACjC,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAA,GAC7B,KAAK,GACT,CACY,CACjB,CAAC,CACc,CACI,EACxB,QAAQ,CAAC,IAAI,CACd;AACH;;;;"}
+{"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;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+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"};
+
+module.exports = styles;
+//# sourceMappingURL=ToastsLayout.module.scss.cjs.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +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"};
+
+export { styles as default };
+//# sourceMappingURL=ToastsLayout.module.scss.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -2,14 +2,18 @@
 
 var React = require('react');
 var colors = require('../../../theme/modules/colors.cjs');
-var styled = require('./styled.cjs');
+var Stack = require('../../Stack/Stack.cjs');
+var Text = require('../../Text/Text.cjs');
+var BaseContainer = require('../../BaseContainer/BaseContainer.cjs');
 var buildClassnames = require('../../../utils/buildClassnames.cjs');
+var assignCssVars = require('../../../utils/assignCssVars.cjs');
 var Button = require('../../Button/Button.cjs');
 var AttentionIcon = require('../../../icons/design-system/components/AttentionIcon.cjs');
 var CrossIcon = require('../../../icons/design-system/components/CrossIcon.cjs');
 var InfoIcon = require('../../../icons/design-system/components/InfoIcon.cjs');
 var MergeIcon = require('../../../icons/design-system/components/MergeIcon.cjs');
 var SuccessIcon = require('../../../icons/design-system/components/SuccessIcon.cjs');
+var ToastsLayout_module = require('../ToastsLayout.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -38,16 +42,23 @@ const generateClassNames = (prefix) => ({
     icon: prefix ? `${prefix}-toast-icon` : undefined,
     closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,
 });
-const Toast = ({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose, }) => {
+const Toast = React__default.default.forwardRef(({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose }, ref) => {
     const classNames = generateClassNames(className);
     const e2eClassNames = generateClassNames(e2eClassName);
-    return (React__default.default.createElement(styled.Toast, { className: buildClassnames.buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container]), direction: "horizontal", alignY: "center", minWidth: minWidth, last: last },
-        React__default.default.createElement(styled.IconWrap, { color: toastTypes[type].accentColor, className: buildClassnames.buildClassnames([classNames.icon, e2eClassNames.icon]) }, iconSlot !== null && iconSlot !== void 0 ? iconSlot : toastTypes[type].icon),
-        React__default.default.createElement(styled.ContentStack, { direction: "horizontal", alignY: "center", alignX: "between" },
-            React__default.default.createElement(styled.StyledText, { variant: "body" }, text),
+    const toastVars = assignCssVars.assignCssVars({
+        toastMinWidth: typeof minWidth === 'number' ? `${minWidth}px` : minWidth,
+        toastExitStart: last ? 'translateY(0)' : 'translateX(0)',
+        toastExitEnd: last ? 'translateY(12px)' : 'translateX(12px)',
+        iconColor: toastTypes[type].accentColor,
+    });
+    return (React__default.default.createElement(Stack.Stack, { ref: ref, className: buildClassnames.buildClassnames([ToastsLayout_module.toast, classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container]), style: toastVars, direction: "horizontal", alignY: "center" },
+        React__default.default.createElement(BaseContainer.BaseContainer, { className: buildClassnames.buildClassnames([ToastsLayout_module.iconWrap, classNames === null || classNames === void 0 ? void 0 : classNames.icon, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.icon]) }, iconSlot !== null && iconSlot !== void 0 ? iconSlot : toastTypes[type].icon),
+        React__default.default.createElement(Stack.Stack, { className: ToastsLayout_module.contentStack, direction: "horizontal", alignY: "center", alignX: "between" },
+            React__default.default.createElement(Text.Text, { variant: "body", className: ToastsLayout_module.toastText }, text),
             cta),
         React__default.default.createElement(Button.Button, { variant: "flat", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, { color: "white" }), onClick: onClose, "aria-label": "Close" })));
-};
+});
+Toast.displayName = 'Toast';
 
 exports.Toast = Toast;
 //# sourceMappingURL=Toast.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { colors } from '../../../theme/modules/colors';\nimport { IconWrap, Toast as ToastContainer, StyledText as Text, ContentStack } from './styled';\nimport { ToastType, ToastPropTypes, ClassNamesReturnPayload } from '../types';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { Button } from '../../Button';\nimport { SuccessIcon, InfoIcon, AttentionIcon, MergeIcon, CrossIcon } from '../../../icons';\n\nconst toastTypes: ToastType = {\n  info: {\n    accentColor: colors.brand.blue.base,\n    icon: <InfoIcon />,\n  },\n  success: {\n    accentColor: colors.secondary.green.base,\n    icon: <SuccessIcon />,\n  },\n  error: {\n    accentColor: colors.secondary.red.base,\n    icon: <AttentionIcon />,\n  },\n  merge: {\n    accentColor: colors.secondary.purple.base,\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\nexport const Toast = ({\n  className,\n  e2eClassName,\n  type,\n  iconSlot,\n  text,\n  last,\n  minWidth,\n  cta,\n  onClose,\n}: ToastPropTypes) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n\n  return (\n    <ToastContainer\n      className={buildClassnames([classNames?.container, e2eClassNames?.container])}\n      direction=\"horizontal\"\n      alignY=\"center\"\n      minWidth={minWidth}\n      last={last}\n    >\n      <IconWrap\n        color={toastTypes[type].accentColor}\n        className={buildClassnames([classNames.icon, e2eClassNames.icon])}\n      >\n        {iconSlot ?? toastTypes[type].icon}\n      </IconWrap>\n      <ContentStack direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n        <Text variant=\"body\">{text}</Text>\n        {cta}\n      </ContentStack>\n      <Button\n        variant=\"flat\"\n        iconSlot={<CrossIcon color=\"white\" />}\n        onClick={onClose}\n        aria-label=\"Close\"\n      />\n    </ToastContainer>\n  );\n};\n"],"names":["colors","React","InfoIcon","SuccessIcon","AttentionIcon","MergeIcon","ToastContainer","buildClassnames","IconWrap","ContentStack","Text","Button","CrossIcon"],"mappings":"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"}
+{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { colors } from '../../../theme/modules/colors';\nimport { Stack } from '../../Stack';\nimport { Text } from '../../Text';\nimport { BaseContainer } from '../../BaseContainer';\nimport { ToastType, ToastPropTypes, ClassNamesReturnPayload } from '../types';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { assignCssVars } from '../../../utils/assignCssVars';\nimport { Button } from '../../Button';\nimport { SuccessIcon, InfoIcon, AttentionIcon, MergeIcon, CrossIcon } from '../../../icons';\nimport styles from '../ToastsLayout.module.scss';\n\nconst toastTypes: ToastType = {\n  info: {\n    accentColor: colors.brand.blue.base,\n    icon: <InfoIcon />,\n  },\n  success: {\n    accentColor: colors.secondary.green.base,\n    icon: <SuccessIcon />,\n  },\n  error: {\n    accentColor: colors.secondary.red.base,\n    icon: <AttentionIcon />,\n  },\n  merge: {\n    accentColor: colors.secondary.purple.base,\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\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    const toastVars = assignCssVars({\n      toastMinWidth: typeof minWidth === 'number' ? `${minWidth}px` : minWidth,\n      toastExitStart: last ? 'translateY(0)' : 'translateX(0)',\n      toastExitEnd: last ? 'translateY(12px)' : 'translateX(12px)',\n      iconColor: toastTypes[type].accentColor,\n    });\n\n    return (\n      <Stack\n        ref={ref}\n        className={buildClassnames([styles.toast, classNames?.container, e2eClassNames?.container])}\n        style={toastVars}\n        direction=\"horizontal\"\n        alignY=\"center\"\n      >\n        <BaseContainer\n          className={buildClassnames([styles.iconWrap, classNames?.icon, e2eClassNames?.icon])}\n        >\n          {iconSlot ?? toastTypes[type].icon}\n        </BaseContainer>\n        <Stack className={styles.contentStack} direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n          <Text variant=\"body\" className={styles.toastText}>{text}</Text>\n          {cta}\n        </Stack>\n        <Button\n          variant=\"flat\"\n          iconSlot={<CrossIcon color=\"white\" />}\n          onClick={onClose}\n          aria-label=\"Close\"\n        />\n      </Stack>\n    );\n  },\n);\n\nToast.displayName = 'Toast';\n"],"names":["colors","React","InfoIcon","SuccessIcon","AttentionIcon","MergeIcon","assignCssVars","Stack","buildClassnames","styles","BaseContainer","Text","Button","CrossIcon"],"mappings":"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"}

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

@@ -1,3 +1,8 @@
 import React from 'react';
-import { ToastPropTypes } from '../types';
-export declare const Toast: ({ className, e2eClassName, type, iconSlot, text, last, minWidth, cta, onClose, }: ToastPropTypes) => React.JSX.Element;
+export declare const Toast: React.ForwardRefExoticComponent<Omit<import("../types").Notification, "key"> & {
+    className?: string | undefined;
+    e2eClassName?: string | undefined;
+    last: boolean;
+    minWidth: string | number;
+    onClose: () => void;
+} & React.RefAttributes<HTMLDivElement>>;