npm - @veeqo/ui - Versions diffs - 13.17.0 → 13.19.0-beta-1 - Mend

@veeqo/ui 13.17.0 → 13.19.0-beta-1

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

Files changed (44) hide show

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

@@ -12,12 +12,13 @@ const collapseAnimationVariants = {
     expanded: { height: 'auto' },
     collapsed: { height: 0 },
 };
-const Card = ({ className, style, title, subtitle, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
+const Card = ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
     const [isCollapsed, setIsCollapsed] = React.useState(false);
     const toggleCollapsed = () => {
         setIsCollapsed(!isCollapsed);
     };
-    const headerMarkup = title && (React__default.default.createElement(CardHeader.CardHeader, { title: title, subtitle: subtitle, actionSlot: headerActionSlot, action: action, onClickClose: onClose, isCollapsed: isCollapsed, onClickCollapse: collapsable ? toggleCollapsed : undefined }));
+    const showHeader = title || headerTitleSlot !== undefined;
+    const headerMarkup = showHeader && (React__default.default.createElement(CardHeader.CardHeader, { title: title, subtitle: subtitle, titleSlot: headerTitleSlot, actionSlot: headerActionSlot, action: action, onClickClose: onClose, isCollapsed: isCollapsed, onClickCollapse: collapsable ? toggleCollapsed : undefined }));
     const showBody = (collapsable && !isCollapsed) || !collapsable;
     const bodyMarkup = (React__default.default.createElement(styled.Body, { animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
         React__default.default.createElement(styled.Section, null, children)));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { CardHeader } from '../CardHeader';\nimport { Surface, Body, FullBleed, Footer, CardElevation, Section } from './styled';\n\nconst collapseAnimationVariants = {\n expanded: { height: 'auto' },\n collapsed: { height: 0 },\n};\n\ntype CardAction = {\n title: string;\n onClick: () => void;\n};\n\nexport type CardProps = {\n className?: string;\n style?: React.CSSProperties;\n title?: string;\n subtitle?: string;\n headerActionSlot?: React.ReactNode;\n action?: CardAction;\n collapsable?: boolean;\n elevation?: CardElevation;\n accent?: 'info' \| 'success' \| 'error';\n children: ReactNode;\n onClose?: () => void;\n renderFooter?: () => ReactNode;\n};\n\nexport const Card = ({\n className,\n style,\n title,\n subtitle,\n headerActionSlot,\n action,\n collapsable,\n elevation,\n accent,\n children,\n onClose,\n renderFooter,\n}: CardProps) => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n const toggleCollapsed = () => {\n setIsCollapsed(!isCollapsed);\n };\n\n const ~~headerMarkup~~ = title && (\n <CardHeader\n title={title}\n subtitle={subtitle}\n actionSlot={headerActionSlot}\n action={action}\n onClickClose={onClose}\n isCollapsed={isCollapsed}\n onClickCollapse={collapsable ? toggleCollapsed : undefined}\n />\n );\n\n const showBody = (collapsable && !isCollapsed) \|\| !collapsable;\n const bodyMarkup = (\n <Body\n animate={showBody ? 'expanded' : 'collapsed'}\n variants={collapseAnimationVariants}\n transition={{ duration: 0.3, ease: 'easeOut' }}\n >\n <Section>{children}</Section>\n </Body>\n );\n\n const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n return (\n <Surface className={className} style={style} elevation={elevation} accent={accent}>\n {headerMarkup}\n {bodyMarkup}\n {footerMarkup}\n </Surface>\n );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["useState","React","CardHeader","Body","Section","Footer","Surface","FullBleed"],"mappings":";;;;;;;;;;AAKA,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;~~AAsBM~~,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,GACF,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,KAAC;~~IAED~~,MAAM,~~YAAY~~,GAAG,KAAK,~~KACxBC~~,sBAAC,CAAA,aAAA,CAAAC,qBAAU,~~IACT~~,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAC1D,CAAA,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdD,sBAAA,CAAA,aAAA,CAACE,WAAI,EACH,EAAA,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAF,sBAAA,CAAA,aAAA,CAACG,cAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACxB,CACR;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIH,sBAAC,CAAA,aAAA,CAAAI,aAAM,EAAE,IAAA,EAAA,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEJ,sBAAC,CAAA,aAAA,CAAAK,cAAO,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;QAC9E,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAGA,cAAO;AACtB,IAAI,CAAC,OAAO,GAAGF,cAAO;AACtB,IAAI,CAAC,SAAS,GAAGG,gBAAS;AAC1B,IAAI,CAAC,MAAM,GAAGF,aAAM;;;;"}
1	+ {"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { CardHeader } from '../CardHeader';\nimport { Surface, Body, FullBleed, Footer, CardElevation, Section } from './styled';\n\nconst collapseAnimationVariants = {\n expanded: { height: 'auto' },\n collapsed: { height: 0 },\n};\n\ntype CardAction = {\n title: string;\n onClick: () => void;\n};\n\nexport type CardProps = {\n className?: string;\n style?: React.CSSProperties;\n title?: string;\n subtitle?: string;\n headerTitleSlot?: React.ReactNode;\n headerActionSlot?: React.ReactNode;\n action?: CardAction;\n collapsable?: boolean;\n elevation?: CardElevation;\n accent?: 'info' \| 'success' \| 'error';\n children: ReactNode;\n onClose?: () => void;\n renderFooter?: () => ReactNode;\n};\n\nexport const Card = ({\n className,\n style,\n title,\n subtitle,\n headerTitleSlot,\n headerActionSlot,\n action,\n collapsable,\n elevation,\n accent,\n children,\n onClose,\n renderFooter,\n}: CardProps) => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n const toggleCollapsed = () => {\n setIsCollapsed(!isCollapsed);\n };\n\n const showHeader = title \|\| headerTitleSlot !== undefined;\n const headerMarkup = showHeader && (\n <CardHeader\n title={title}\n subtitle={subtitle}\n titleSlot={headerTitleSlot}\n actionSlot={headerActionSlot}\n action={action}\n onClickClose={onClose}\n isCollapsed={isCollapsed}\n onClickCollapse={collapsable ? toggleCollapsed : undefined}\n />\n );\n\n const showBody = (collapsable && !isCollapsed) \|\| !collapsable;\n const bodyMarkup = (\n <Body\n animate={showBody ? 'expanded' : 'collapsed'}\n variants={collapseAnimationVariants}\n transition={{ duration: 0.3, ease: 'easeOut' }}\n >\n <Section>{children}</Section>\n </Body>\n );\n\n const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n return (\n <Surface className={className} style={style} elevation={elevation} accent={accent}>\n {headerMarkup}\n {bodyMarkup}\n {footerMarkup}\n </Surface>\n );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["useState","React","CardHeader","Body","Section","Footer","Surface","FullBleed"],"mappings":";;;;;;;;;;AAKA,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;AAuBM,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,GACF,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,KAAC;AAED,IAAA,MAAM,UAAU,GAAG,KAAK,IAAI,eAAe,KAAK,SAAS;IACzD,MAAM,YAAY,GAAG,UAAU,KAC7BC,sBAAC,CAAA,aAAA,CAAAC,qBAAU,EACT,EAAA,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAC1D,CAAA,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdD,sBAAA,CAAA,aAAA,CAACE,WAAI,EACH,EAAA,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAF,sBAAA,CAAA,aAAA,CAACG,cAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACxB,CACR;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIH,sBAAC,CAAA,aAAA,CAAAI,aAAM,EAAE,IAAA,EAAA,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEJ,sBAAC,CAAA,aAAA,CAAAK,cAAO,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;QAC9E,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAGA,cAAO;AACtB,IAAI,CAAC,OAAO,GAAGF,cAAO;AACtB,IAAI,CAAC,SAAS,GAAGG,gBAAS;AAC1B,IAAI,CAAC,MAAM,GAAGF,aAAM;;;;"}

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

@@ -9,6 +9,7 @@ export type CardProps = {
     style?: React.CSSProperties;
     title?: string;
     subtitle?: string;
+    headerTitleSlot?: React.ReactNode;
     headerActionSlot?: React.ReactNode;
     action?: CardAction;
     collapsable?: boolean;
@@ -19,7 +20,7 @@ export type CardProps = {
     renderFooter?: () => ReactNode;
 };
 export declare const Card: {
-    ({ className, style, title, subtitle, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }: CardProps): React.JSX.Element;
+    ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }: CardProps): React.JSX.Element;
     Surface: import("styled-components").StyledComponent<"div", any, import("./styled").SurfaceProps, never>;
     Section: import("styled-components").StyledComponent<"section", any, {}, never>;
     FullBleed: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -6,12 +6,13 @@ const collapseAnimationVariants = {
     expanded: { height: 'auto' },
     collapsed: { height: 0 },
 };
-const Card = ({ className, style, title, subtitle, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
+const Card = ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
     const [isCollapsed, setIsCollapsed] = useState(false);
     const toggleCollapsed = () => {
         setIsCollapsed(!isCollapsed);
     };
-    const headerMarkup = title && (React__default.createElement(CardHeader, { title: title, subtitle: subtitle, actionSlot: headerActionSlot, action: action, onClickClose: onClose, isCollapsed: isCollapsed, onClickCollapse: collapsable ? toggleCollapsed : undefined }));
+    const showHeader = title || headerTitleSlot !== undefined;
+    const headerMarkup = showHeader && (React__default.createElement(CardHeader, { title: title, subtitle: subtitle, titleSlot: headerTitleSlot, actionSlot: headerActionSlot, action: action, onClickClose: onClose, isCollapsed: isCollapsed, onClickCollapse: collapsable ? toggleCollapsed : undefined }));
     const showBody = (collapsable && !isCollapsed) || !collapsable;
     const bodyMarkup = (React__default.createElement(Body, { animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
         React__default.createElement(Section, null, children)));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { CardHeader } from '../CardHeader';\nimport { Surface, Body, FullBleed, Footer, CardElevation, Section } from './styled';\n\nconst collapseAnimationVariants = {\n expanded: { height: 'auto' },\n collapsed: { height: 0 },\n};\n\ntype CardAction = {\n title: string;\n onClick: () => void;\n};\n\nexport type CardProps = {\n className?: string;\n style?: React.CSSProperties;\n title?: string;\n subtitle?: string;\n headerActionSlot?: React.ReactNode;\n action?: CardAction;\n collapsable?: boolean;\n elevation?: CardElevation;\n accent?: 'info' \| 'success' \| 'error';\n children: ReactNode;\n onClose?: () => void;\n renderFooter?: () => ReactNode;\n};\n\nexport const Card = ({\n className,\n style,\n title,\n subtitle,\n headerActionSlot,\n action,\n collapsable,\n elevation,\n accent,\n children,\n onClose,\n renderFooter,\n}: CardProps) => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n const toggleCollapsed = () => {\n setIsCollapsed(!isCollapsed);\n };\n\n const ~~headerMarkup~~ = title && (\n <CardHeader\n title={title}\n subtitle={subtitle}\n actionSlot={headerActionSlot}\n action={action}\n onClickClose={onClose}\n isCollapsed={isCollapsed}\n onClickCollapse={collapsable ? toggleCollapsed : undefined}\n />\n );\n\n const showBody = (collapsable && !isCollapsed) \|\| !collapsable;\n const bodyMarkup = (\n <Body\n animate={showBody ? 'expanded' : 'collapsed'}\n variants={collapseAnimationVariants}\n transition={{ duration: 0.3, ease: 'easeOut' }}\n >\n <Section>{children}</Section>\n </Body>\n );\n\n const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n return (\n <Surface className={className} style={style} elevation={elevation} accent={accent}>\n {headerMarkup}\n {bodyMarkup}\n {footerMarkup}\n </Surface>\n );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["React"],"mappings":";;;;AAKA,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;~~AAsBM~~,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,GACF,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,KAAC;~~IAED~~,MAAM,~~YAAY~~,GAAG,KAAK,~~KACxBA~~,cAAC,CAAA,aAAA,CAAA,UAAU,~~IACT~~,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAC1D,CAAA,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdA,cAAA,CAAA,aAAA,CAAC,IAAI,EACH,EAAA,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACxB,CACR;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIA,cAAC,CAAA,aAAA,CAAA,MAAM,EAAE,IAAA,EAAA,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;QAC9E,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,IAAI,CAAC,MAAM,GAAG,MAAM;;;;"}
1	+ {"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { CardHeader } from '../CardHeader';\nimport { Surface, Body, FullBleed, Footer, CardElevation, Section } from './styled';\n\nconst collapseAnimationVariants = {\n expanded: { height: 'auto' },\n collapsed: { height: 0 },\n};\n\ntype CardAction = {\n title: string;\n onClick: () => void;\n};\n\nexport type CardProps = {\n className?: string;\n style?: React.CSSProperties;\n title?: string;\n subtitle?: string;\n headerTitleSlot?: React.ReactNode;\n headerActionSlot?: React.ReactNode;\n action?: CardAction;\n collapsable?: boolean;\n elevation?: CardElevation;\n accent?: 'info' \| 'success' \| 'error';\n children: ReactNode;\n onClose?: () => void;\n renderFooter?: () => ReactNode;\n};\n\nexport const Card = ({\n className,\n style,\n title,\n subtitle,\n headerTitleSlot,\n headerActionSlot,\n action,\n collapsable,\n elevation,\n accent,\n children,\n onClose,\n renderFooter,\n}: CardProps) => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n const toggleCollapsed = () => {\n setIsCollapsed(!isCollapsed);\n };\n\n const showHeader = title \|\| headerTitleSlot !== undefined;\n const headerMarkup = showHeader && (\n <CardHeader\n title={title}\n subtitle={subtitle}\n titleSlot={headerTitleSlot}\n actionSlot={headerActionSlot}\n action={action}\n onClickClose={onClose}\n isCollapsed={isCollapsed}\n onClickCollapse={collapsable ? toggleCollapsed : undefined}\n />\n );\n\n const showBody = (collapsable && !isCollapsed) \|\| !collapsable;\n const bodyMarkup = (\n <Body\n animate={showBody ? 'expanded' : 'collapsed'}\n variants={collapseAnimationVariants}\n transition={{ duration: 0.3, ease: 'easeOut' }}\n >\n <Section>{children}</Section>\n </Body>\n );\n\n const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n return (\n <Surface className={className} style={style} elevation={elevation} accent={accent}>\n {headerMarkup}\n {bodyMarkup}\n {footerMarkup}\n </Surface>\n );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["React"],"mappings":";;;;AAKA,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;AAuBM,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,GACF,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,KAAC;AAED,IAAA,MAAM,UAAU,GAAG,KAAK,IAAI,eAAe,KAAK,SAAS;IACzD,MAAM,YAAY,GAAG,UAAU,KAC7BA,cAAC,CAAA,aAAA,CAAA,UAAU,EACT,EAAA,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAC1D,CAAA,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdA,cAAA,CAAA,aAAA,CAAC,IAAI,EACH,EAAA,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACxB,CACR;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIA,cAAC,CAAA,aAAA,CAAA,MAAM,EAAE,IAAA,EAAA,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;QAC9E,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,IAAI,CAAC,MAAM,GAAG,MAAM;;;;"}

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

@@ -12,9 +12,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-const CardHeader = ({ id, title, subtitle, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.default.createElement(styled.Header, null,
+const CardHeader = ({ id, title, subtitle, titleSlot, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.default.createElement(styled.Header, null,
     React__default.default.createElement(styled.HeaderGrid, null,
-        React__default.default.createElement(Text.Text, { id: id, variant: headerVariant }, title),
+        titleSlot || (React__default.default.createElement(Text.Text, { id: id, variant: headerVariant }, title)),
         action && (React__default.default.createElement(Button.Button, { variant: "link", onClick: action.onClick }, action.title)),
         actionSlot,
         onClickCollapse && (React__default.default.createElement(Button.Button, { variant: "flat", iconSlot: isCollapsed ? React__default.default.createElement(DownArrowIcon.ReactComponent, null) : React__default.default.createElement(UpArrowIcon.ReactComponent, null), onClick: onClickCollapse })),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CardHeader.cjs","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { Header, HeaderGrid } from './styled';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n title: string;\n onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n id?: string;\n title?: string;\n subtitle?: string;\n headerVariant?: HeaderVariant;\n action?: CardHeaderAction;\n actionSlot?: React.ReactNode;\n isCollapsed?: boolean;\n onClickCollapse?: () => void;\n onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n id,\n title,\n subtitle,\n headerVariant = 'headingSmall',\n action,\n actionSlot,\n isCollapsed,\n onClickCollapse,\n onClickClose,\n}: CardHeaderProps) => (\n <Header>\n <HeaderGrid>\n <Text id={id} variant={headerVariant}>\n {title}\n </Text>\n {action && (\n <Button variant=\"link\" onClick={action.onClick}>\n {action.title}\n </Button>\n )}\n {actionSlot}\n {onClickCollapse && (\n <Button\n variant=\"flat\"\n iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n onClick={onClickCollapse}\n />\n )}\n {onClickClose && (\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n type=\"button\"\n />\n )}\n </HeaderGrid>\n {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n </Header>\n);\n"],"names":["React","Header","HeaderGrid","Text","Button","DownArrowIcon","UpArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;~~AAyBO~~,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,qCAACC,aAAM,EAAA,IAAA;AACL,IAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAU,EAAA,IAAA;~~QACTF~~,sBAAC,CAAA,aAAA,CAAAG,SAAI,~~EAAC~~,~~EAAA,~~EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EACjC,EAAA,KAAK,CACD;~~AACN~~,QAAA,MAAM,KACLH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdJ,sBAAC,CAAA,aAAA,CAAAI,aAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGJ,sBAAA,CAAA,aAAA,CAACK,4BAAa,EAAA,IAAA,CAAG,GAAGL,sBAAA,CAAA,aAAA,CAACM,0BAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXN,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEJ,sBAAC,CAAA,aAAA,CAAAO,wBAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,QAAQ,EACb,CAAA,CACH,CACU;AACZ,IAAA,QAAQ,IAAIP,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}
1	+ {"version":3,"file":"CardHeader.cjs","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { Header, HeaderGrid } from './styled';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n title: string;\n onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n id?: string;\n title?: string;\n subtitle?: string;\n titleSlot?: React.ReactNode;\n headerVariant?: HeaderVariant;\n action?: CardHeaderAction;\n actionSlot?: React.ReactNode;\n isCollapsed?: boolean;\n onClickCollapse?: () => void;\n onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n id,\n title,\n subtitle,\n titleSlot,\n headerVariant = 'headingSmall',\n action,\n actionSlot,\n isCollapsed,\n onClickCollapse,\n onClickClose,\n}: CardHeaderProps) => (\n <Header>\n <HeaderGrid>\n {titleSlot \|\| (\n <Text id={id} variant={headerVariant}>\n {title}\n </Text>\n )}\n {action && (\n <Button variant=\"link\" onClick={action.onClick}>\n {action.title}\n </Button>\n )}\n {actionSlot}\n {onClickCollapse && (\n <Button\n variant=\"flat\"\n iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n onClick={onClickCollapse}\n />\n )}\n {onClickClose && (\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n type=\"button\"\n />\n )}\n </HeaderGrid>\n {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n </Header>\n);\n"],"names":["React","Header","HeaderGrid","Text","Button","DownArrowIcon","UpArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;AA0BO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,qCAACC,aAAM,EAAA,IAAA;AACL,IAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAU,EAAA,IAAA;AACR,QAAA,SAAS,KACRF,sBAAC,CAAA,aAAA,CAAAG,SAAI,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EACjC,EAAA,KAAK,CACD,CACR;AACA,QAAA,MAAM,KACLH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdJ,sBAAC,CAAA,aAAA,CAAAI,aAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGJ,sBAAA,CAAA,aAAA,CAACK,4BAAa,EAAA,IAAA,CAAG,GAAGL,sBAAA,CAAA,aAAA,CAACM,0BAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXN,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEJ,sBAAC,CAAA,aAAA,CAAAO,wBAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,QAAQ,EACb,CAAA,CACH,CACU;AACZ,IAAA,QAAQ,IAAIP,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}

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

@@ -8,6 +8,7 @@ export interface CardHeaderProps {
     id?: string;
     title?: string;
     subtitle?: string;
+    titleSlot?: React.ReactNode;
     headerVariant?: HeaderVariant;
     action?: CardHeaderAction;
     actionSlot?: React.ReactNode;
@@ -15,5 +16,5 @@ export interface CardHeaderProps {
     onClickCollapse?: () => void;
     onClickClose?: () => void;
 }
-export declare const CardHeader: ({ id, title, subtitle, headerVariant, action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }: CardHeaderProps) => React.JSX.Element;
+export declare const CardHeader: ({ id, title, subtitle, titleSlot, headerVariant, action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }: CardHeaderProps) => React.JSX.Element;
 export {};

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

@@ -6,9 +6,9 @@ import { ReactComponent as CrossIcon } from '../../icons/design-system/component
 import { ReactComponent as DownArrowIcon } from '../../icons/design-system/components/DownArrowIcon.js';
 import { ReactComponent as UpArrowIcon } from '../../icons/design-system/components/UpArrowIcon.js';
-const CardHeader = ({ id, title, subtitle, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.createElement(Header, null,
+const CardHeader = ({ id, title, subtitle, titleSlot, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.createElement(Header, null,
     React__default.createElement(HeaderGrid, null,
-        React__default.createElement(Text, { id: id, variant: headerVariant }, title),
+        titleSlot || (React__default.createElement(Text, { id: id, variant: headerVariant }, title)),
         action && (React__default.createElement(Button, { variant: "link", onClick: action.onClick }, action.title)),
         actionSlot,
         onClickCollapse && (React__default.createElement(Button, { variant: "flat", iconSlot: isCollapsed ? React__default.createElement(DownArrowIcon, null) : React__default.createElement(UpArrowIcon, null), onClick: onClickCollapse })),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CardHeader.js","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { Header, HeaderGrid } from './styled';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n title: string;\n onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n id?: string;\n title?: string;\n subtitle?: string;\n headerVariant?: HeaderVariant;\n action?: CardHeaderAction;\n actionSlot?: React.ReactNode;\n isCollapsed?: boolean;\n onClickCollapse?: () => void;\n onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n id,\n title,\n subtitle,\n headerVariant = 'headingSmall',\n action,\n actionSlot,\n isCollapsed,\n onClickCollapse,\n onClickClose,\n}: CardHeaderProps) => (\n <Header>\n <HeaderGrid>\n <Text id={id} variant={headerVariant}>\n {title}\n </Text>\n {action && (\n <Button variant=\"link\" onClick={action.onClick}>\n {action.title}\n </Button>\n )}\n {actionSlot}\n {onClickCollapse && (\n <Button\n variant=\"flat\"\n iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n onClick={onClickCollapse}\n />\n )}\n {onClickClose && (\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n type=\"button\"\n />\n )}\n </HeaderGrid>\n {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n </Header>\n);\n"],"names":["React"],"mappings":";;;;;;;;~~AAyBO~~,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,6BAAC,MAAM,EAAA,IAAA;AACL,IAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;~~QACTA~~,cAAC,CAAA,aAAA,CAAA,IAAI,~~EAAC~~,~~EAAA,~~EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EACjC,EAAA,KAAK,CACD;~~AACN~~,QAAA,MAAM,KACLA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA,CAAG,GAAGA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,QAAQ,EACb,CAAA,CACH,CACU;AACZ,IAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}
1	+ {"version":3,"file":"CardHeader.js","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { Header, HeaderGrid } from './styled';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n title: string;\n onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n id?: string;\n title?: string;\n subtitle?: string;\n titleSlot?: React.ReactNode;\n headerVariant?: HeaderVariant;\n action?: CardHeaderAction;\n actionSlot?: React.ReactNode;\n isCollapsed?: boolean;\n onClickCollapse?: () => void;\n onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n id,\n title,\n subtitle,\n titleSlot,\n headerVariant = 'headingSmall',\n action,\n actionSlot,\n isCollapsed,\n onClickCollapse,\n onClickClose,\n}: CardHeaderProps) => (\n <Header>\n <HeaderGrid>\n {titleSlot \|\| (\n <Text id={id} variant={headerVariant}>\n {title}\n </Text>\n )}\n {action && (\n <Button variant=\"link\" onClick={action.onClick}>\n {action.title}\n </Button>\n )}\n {actionSlot}\n {onClickCollapse && (\n <Button\n variant=\"flat\"\n iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n onClick={onClickCollapse}\n />\n )}\n {onClickClose && (\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n type=\"button\"\n />\n )}\n </HeaderGrid>\n {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n </Header>\n);\n"],"names":["React"],"mappings":";;;;;;;;AA0BO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,6BAAC,MAAM,EAAA,IAAA;AACL,IAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;AACR,QAAA,SAAS,KACRA,cAAC,CAAA,aAAA,CAAA,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EACjC,EAAA,KAAK,CACD,CACR;AACA,QAAA,MAAM,KACLA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA,CAAG,GAAGA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,QAAQ,EACb,CAAA,CACH,CACU;AACZ,IAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}

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

@@ -3,21 +3,23 @@
 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 FlexCol = require('../Flex/FlexCol/FlexCol.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);
-const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max = 3, onClose, }) => {
+const ToastsLayout = ({ e2eClassName, toasts, minWidth = '50vw', max = 3, onClose, }) => {
     React.useEffect(() => {
         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);
+    const label = `${toasts.length} notification${toasts.length !== 1 ? 's' : ''}.`;
+    return reactDom.createPortal(React__default.default.createElement(FlexCol.FlexCol, { className: toastsLayout_module.toastsLayoutContainer, alignItems: "center", gap: 4, role: "region", "aria-label": label },
+        React__default.default.createElement(reactTransitionGroup.TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: toast.key, timeout: 225, classNames: "veeqo-components-toast" },
+            React__default.default.createElement(Toast.Toast, { e2eClassName: e2eClassName, minWidth: minWidth, last: index === toasts.length - 1, onClose: () => onClose(toast.key), ...toast })))))), document.body);
 };
 exports.ToastsLayout = ToastsLayout;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ToastsLayout.cjs","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import { 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;KACvD,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;~~AAE1B~~,~~IAAA~~,OAAOC,qBAAY,CACjBC,sBAAC,CAAA,aAAA,CAAAC,~~4BAAqB~~,~~IAAC~~,SAAS,~~EAAC~~,~~UAAU~~,~~EAAC~~,~~MAAM~~,EAAC,QAAQ,~~EAAC~~,~~OAAO~~,EAAE,CAAC,EAAA;~~AACpE~~,~~QAAAD~~,sBAAA,CAAA,aAAA,~~CAACE~~,oCAAe,EAAC,EAAA,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~~,sBAAC,CAAA,aAAA,~~CAAAI~~,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,~~EAC7B~~,~~GAAA,~~KAAK,~~GACT~~,CACY,CACjB,CAAC,CACc,~~CACI~~,~~EACxB~~,QAAQ,CAAC,IAAI,CACd;AACH;;;;"}
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 { Toast } from './components/Toast';\nimport { FlexCol } from '../Flex/FlexCol';\nimport styles from './toastsLayout.module.scss';\n\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\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 const label = `${toasts.length} notification${toasts.length !== 1 ? 's' : ''}.`;\n return createPortal(\n <FlexCol\n className={styles.toastsLayoutContainer}\n alignItems=\"center\"\n gap={4}\n role=\"region\"\n aria-label={label}\n >\n <TransitionGroup component={null}>\n {[...toasts].reverse().map((toast, index) => (\n <CSSTransition key={toast.key} timeout={225} classNames=\"veeqo-components-toast\">\n <Toast\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 </FlexCol>,\n document.body,\n );\n};\n"],"names":["useEffect","createPortal","React","FlexCol","styles","TransitionGroup","CSSTransition","Toast"],"mappings":";;;;;;;;;;;;;MAQa,YAAY,GAA8B,CAAC,EACtD,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;KACvD,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;IAE1B,MAAM,KAAK,GAAG,CAAG,EAAA,MAAM,CAAC,MAAM,CAAA,aAAA,EAAgB,MAAM,CAAC,MAAM,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAA,CAAA,CAAG;IAC/E,OAAOC,qBAAY,CACjBC,sBAAC,CAAA,aAAA,CAAAC,eAAO,IACN,SAAS,EAAEC,mBAAM,CAAC,qBAAqB,EACvC,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAE,CAAC,EACN,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,KAAK,EAAA;AAEjB,QAAAF,sBAAA,CAAA,aAAA,CAACG,oCAAe,EAAC,EAAA,SAAS,EAAE,IAAI,IAC7B,CAAC,GAAG,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACtCH,qCAACI,kCAAa,EAAA,EAAC,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,EAAC,wBAAwB,EAAA;YAC9EJ,sBAAC,CAAA,aAAA,CAAAK,WAAK,IACJ,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,KAC7B,KAAK,EAAA,CACT,CACY,CACjB,CAAC,CACc,CACV,EACV,QAAQ,CAAC,IAAI,CACd;AACH;;;;"}

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

@@ -1,17 +1,19 @@
 import { TransitionGroup, CSSTransition } 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 { FlexCol } from '../Flex/FlexCol/FlexCol.js';
+import styles from './toastsLayout.module.scss.js';
-const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max = 3, onClose, }) => {
+const ToastsLayout = ({ 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);
+    const label = `${toasts.length} notification${toasts.length !== 1 ? 's' : ''}.`;
+    return createPortal(React__default.createElement(FlexCol, { className: styles.toastsLayoutContainer, alignItems: "center", gap: 4, role: "region", "aria-label": label },
+        React__default.createElement(TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => (React__default.createElement(CSSTransition, { key: toast.key, timeout: 225, classNames: "veeqo-components-toast" },
+            React__default.createElement(Toast, { e2eClassName: e2eClassName, minWidth: minWidth, last: index === toasts.length - 1, onClose: () => onClose(toast.key), ...toast })))))), document.body);
 };
 export { ToastsLayout };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ToastsLayout.js","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import { 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;KACvD,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;~~AAE1B~~,~~IAAA~~,OAAO,YAAY,CACjBA,cAAC,CAAA,aAAA,CAAA,~~qBAAqB~~,~~IAAC~~,SAAS,~~EAAC~~,~~UAAU~~,~~EAAC~~,~~MAAM~~,EAAC,QAAQ,~~EAAC~~,~~OAAO~~,EAAE,CAAC,EAAA;~~AACpE~~,QAAAA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAC,EAAA,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,cAAC,CAAA,aAAA,CAAA,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,~~EAC7B~~,~~GAAA,~~KAAK,~~GACT~~,CACY,CACjB,CAAC,CACc,~~CACI~~,~~EACxB~~,QAAQ,CAAC,IAAI,CACd;AACH;;;;"}
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 { Toast } from './components/Toast';\nimport { FlexCol } from '../Flex/FlexCol';\nimport styles from './toastsLayout.module.scss';\n\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\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 const label = `${toasts.length} notification${toasts.length !== 1 ? 's' : ''}.`;\n return createPortal(\n <FlexCol\n className={styles.toastsLayoutContainer}\n alignItems=\"center\"\n gap={4}\n role=\"region\"\n aria-label={label}\n >\n <TransitionGroup component={null}>\n {[...toasts].reverse().map((toast, index) => (\n <CSSTransition key={toast.key} timeout={225} classNames=\"veeqo-components-toast\">\n <Toast\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 </FlexCol>,\n document.body,\n );\n};\n"],"names":["React"],"mappings":";;;;;;;MAQa,YAAY,GAA8B,CAAC,EACtD,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;KACvD,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;IAE1B,MAAM,KAAK,GAAG,CAAG,EAAA,MAAM,CAAC,MAAM,CAAA,aAAA,EAAgB,MAAM,CAAC,MAAM,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAA,CAAA,CAAG;IAC/E,OAAO,YAAY,CACjBA,cAAC,CAAA,aAAA,CAAA,OAAO,IACN,SAAS,EAAE,MAAM,CAAC,qBAAqB,EACvC,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAE,CAAC,EACN,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,KAAK,EAAA;AAEjB,QAAAA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAC,EAAA,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,cAAC,CAAA,aAAA,CAAA,KAAK,IACJ,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,KAC7B,KAAK,EAAA,CACT,CACY,CACjB,CAAC,CACc,CACV,EACV,QAAQ,CAAC,IAAI,CACd;AACH;;;;"}

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

@@ -1,52 +1,36 @@
 'use strict';
 var React = require('react');
-var colors = require('../../../theme/modules/colors.cjs');
-var styled = require('./styled.cjs');
+var FlexCol = require('../../Flex/FlexCol/FlexCol.cjs');
+var FlexRow = require('../../Flex/FlexRow/FlexRow.cjs');
+var Text = require('../../Text/Text.cjs');
 var buildClassnames = require('../../../utils/buildClassnames.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 toast_module = require('./toast.module.scss.cjs');
+var utils = require('./utils.cjs');
+var constants = require('./constants.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-const toastTypes = {
-    info: {
-        accentColor: colors.colors.brand.blue.base,
-        icon: React__default.default.createElement(InfoIcon.ReactComponent, null),
-    },
-    success: {
-        accentColor: colors.colors.secondary.green.base,
-        icon: React__default.default.createElement(SuccessIcon.ReactComponent, null),
-    },
-    error: {
-        accentColor: colors.colors.secondary.red.base,
-        icon: React__default.default.createElement(AttentionIcon.ReactComponent, null),
-    },
-    merge: {
-        accentColor: colors.colors.secondary.purple.base,
-        icon: React__default.default.createElement(MergeIcon.ReactComponent, null),
-    },
-};
-const generateClassNames = (prefix) => ({
-    container: prefix ? `${prefix}-toast-container` : undefined,
-    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 classNames = generateClassNames(className);
-    const e2eClassNames = generateClassNames(e2eClassName);
-    return (React__default.default.createElement(styled.Toast, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : 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 !== undefined ? 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),
-            cta),
-        React__default.default.createElement(Button.Button, { variant: "flat", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, { color: "white" }), onClick: onClose, "aria-label": "Close" })));
+const Toast = ({ e2eClassName, type, iconSlot, text, subMessage, last, minWidth, ctaSlot, cta, onClose, }) => {
+    var _a;
+    const e2eClassNames = utils.generateToastClassNames(e2eClassName);
+    const { accentColor, icon } = (_a = constants.ToastTypeConfig[type]) !== null && _a !== undefined ? _a : constants.ToastTypeConfig.info;
+    const resolvedCta = ctaSlot !== null && ctaSlot !== undefined ? ctaSlot : cta;
+    return (React__default.default.createElement(FlexRow.FlexRow, { className: buildClassnames.buildClassnames([toast_module.toastContainer, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container]), alignItems: "center", style: {
+            '--toast-min-width': minWidth !== null && minWidth !== undefined ? minWidth : undefined,
+            '--toast-status-color': accentColor,
+        }, "data-toast-last": last !== null && last !== undefined ? last : undefined, gap: "base" },
+        React__default.default.createElement(FlexRow.FlexRow, { className: buildClassnames.buildClassnames([toast_module.iconWrapper, e2eClassNames.icon]), alignItems: "center", justifyContent: "center" }, iconSlot !== null && iconSlot !== undefined ? iconSlot : icon),
+        React__default.default.createElement(FlexRow.FlexRow, { alignItems: "center", flexGrow: 1, justifyContent: "space-between", role: "alert" },
+            React__default.default.createElement(FlexCol.FlexCol, { gap: "none" },
+                React__default.default.createElement(Text.Text, { className: toast_module.toastText, variant: "headingSmall", as: "p" }, text),
+                subMessage && (React__default.default.createElement(Text.Text, { className: toast_module.toastText, variant: "body", as: "p" }, subMessage))),
+            resolvedCta),
+        React__default.default.createElement(Button.Button, { className: toast_module.toastCloseButton, variant: "flat", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, { color: "white" }), onClick: onClose, "aria-label": "Close" })));
 };
 exports.Toast = Toast;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { ~~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":";;;;;;;;;;;;;;;;;~~AAQA~~,~~MAAM~~,~~UAAU~~,~~GAAc;AAC5B~~,~~IAAA~~,~~IAAI~~,~~EAAE;AACJ~~,~~QAAA~~,~~WAAW~~,~~EAAEA~~,~~aAAM~~,~~CAAC~~,~~KAAK~~,~~CAAC~~,~~IAAI~~,~~CAAC~~,IAAI~~;QACnC~~,~~IAAI~~,~~EAAEC~~,~~sBAAC~~,~~CAAA~~,~~aAAA~~,~~CAAAC~~,~~uBAAQ~~,~~EAAG~~,~~IAAA~~,~~CAAA;~~AACnB,~~KAAA;AACD,~~IAAA,~~OAAO~~,~~EAAE;AACP~~,~~QAAA~~,~~WAAW~~,~~EAAEF~~,~~aAAM~~,CAAC,~~SAAS~~,~~CAAC~~,~~KAAK~~,~~CAAC~~,~~IAAI;QACxC~~,IAAI,~~EAAEC~~,~~sBAAC~~,CAAA,~~aAAA~~,~~CAAAE~~,~~0BAAW~~,~~EAAG~~,~~IAAA~~,~~CAAA;AACtB~~,~~KAAA;AACD~~,IAAA,~~KAAK~~,~~EAAE;AACL~~,~~QAAA~~,~~WAAW~~,~~EAAEH~~,~~aAAM~~,~~CAAC~~,~~SAAS~~,CAAC,~~GAAG,CAAC,~~IAAI;~~QACtC~~,~~IAAI~~,~~EAAEC~~,~~sBAAC~~,~~CAAA~~,~~aAAA,CAAAG,4BAAa,EAAG,IAAA,CAAA;AACxB,~~KAAA~~;AACD~~,IAAA,~~KAAK~~,~~EAAE;AACL~~,~~QAAA~~,~~WAAW~~,~~EAAEJ~~,~~aAAM~~,~~CAAC~~,~~SAAS,CAAC,MAAM,CAAC,IAAI~~;~~QACzC~~,~~IAAI~~,~~EAAEC~~,~~sBAAC~~,CAAA,aAAA,~~CAAAI~~,~~wBAAS~~,~~EAAG~~,~~IAAA~~,~~CAAA;AACpB~~,~~KAAA;CACF;AAED~~,~~MAAM~~,~~kBAAkB~~,~~GAAG~~,CAAC,~~MAAe~~,~~MAA+B;IACxE,SAAS,~~EAAE,~~MAAM~~,~~GAAG~~,~~CAAG~~,~~EAAA~~,~~MAAM~~,~~CAAkB~~,~~gBAAA~~,~~CAAA~~,~~GAAG~~,~~SAAS;IAC3D~~,~~IAAI~~,~~EAAE~~,~~MAAM~~,~~GAAG~~,~~CAAG~~,~~EAAA~~,~~MAAM~~,~~CAAa~~,~~WAAA~~,~~CAAA~~,~~GAAG~~,~~SAAS~~;~~IACjD~~,~~SAAS~~,EAAE,~~MAAM~~,~~GAAG~~,~~CAAG~~,~~EAAA~~,~~MAAM~~,~~CAAmB~~,~~iBAAA~~,~~CAAA~~,~~GAAG~~,SAAS;~~AAC7D~~,~~CAAA~~,~~CAAC;AAEW~~,~~MAAA~~,~~KAAK~~,~~GAAG~~,~~CAAC~~,~~EACpB~~,~~SAAS~~,~~EACT~~,~~YAAY~~,~~EACZ~~,IAAI,~~EACJ~~,~~QAAQ~~,~~EACR~~,IAAI,~~EACJ~~,~~IAAI~~,~~EACJ~~,~~QAAQ,EACR,~~GAAG,~~EACH~~,~~OAAO~~,~~GACQ,KAAI~~;~~AACnB~~,~~IAAA~~,~~MAAM~~,~~UAAU~~,~~GAAG~~,~~kBAAkB~~,~~CAAC~~,~~SAAS~~,~~CAAC;AAChD~~,~~IAAA~~,~~MAAM~~,~~aAAa~~,~~GAAG~~,~~kBAAkB~~,CAAC,~~YAAY~~,~~CAAC;AAEtD~~,~~IAAA~~,~~QACEJ~~,~~sBAAC~~,~~CAAA,aAAA,CAAAK,YAAc,IACb,SAAS,EAAEC,+BAAe,~~CAAC,CAAC,~~UAAU~~,~~KAAA,IAAA,IAAV,~~UAAU,~~KAAV~~,~~SAAA~~,~~GAAA~~,~~SAAA~~,~~GAAA~~,~~UAAU~~,~~CAAE~~,~~SAAS~~,~~EAAE~~,~~aAAa~~,~~KAAb,~~IAAA,~~IAAA~~,~~aAAa~~,~~KAAb~~,SAAA,~~GAAA~~,~~SAAA~~,~~GAAA~~,~~aAAa~~,~~CAAE~~,~~SAAS~~,~~CAAC~~,~~CAAC~~,~~EAC7E~~,~~SAAS~~,EAAC,~~YAAY~~,~~EACtB~~,~~MAAM,~~EAAC,QAAQ,~~EACf~~,QAAQ,EAAE,~~QAAQ~~,~~EAClB~~,~~IAAI~~,~~EAAE~~,IAAI,EAAA;~~AAEV~~,~~QAAAN~~,sBAAA,CAAA,aAAA,~~CAACO~~,~~eAAQ~~,~~EACP,~~EAAA,~~KAAK~~,~~EAAE~~,~~UAAU~~,~~CAAC~~,~~IAAI~~,~~CAAC~~,~~CAAC~~,~~WAAW~~,~~EACnC~~,~~SAAS~~,~~EAAED,+BAAe~~,~~CAAC~~,~~CAAC~~,~~UAAU~~,~~CAAC~~,~~IAAI~~,~~EAAE,aAAa,~~CAAC,~~IAAI~~,~~CAAC~~,~~CAAC~~,~~EAAA~~,~~EAEhE~~,~~QAAQ~~,~~KAAR~~,~~IAAA~~,~~IAAA~~,~~QAAQ~~,~~KAAR~~,~~SAAA~~,~~GAAA~~,~~QAAQ,GAAI,~~UAAU,~~CAAC~~,~~IAAI~~,~~CAAC,CAAC,IAAI,CACzB;AACX,QAAAN,sBAAA,~~CAAA,aAAA,~~CAACQ~~,~~mBAAY~~,~~EAAA~~,~~EAAC,~~SAAS,~~EAAC~~,~~YAAY~~,~~EAAC~~,~~MAAM~~,~~EAAC~~,~~QAAQ~~,EAAC,MAAM,EAAC,~~SAAS~~,~~EAAA;AACnE~~,~~YAAAR~~,~~sBAAA~~,~~CAAA,aAAA,CAACS,iBAAI,EAAC,~~EAAA,~~OAAO~~,~~EAAC~~,~~MAAM~~,~~EAAA,EAAE,IAAI,CAAQ~~;~~AACjC~~,YAAA,~~GAAG~~,~~CACS~~;~~QACfT~~,~~sBAAC~~,CAAA,aAAA,~~CAAAU~~,aAAM,EACL,~~EAAA~~,OAAO,EAAC,MAAM,EACd,QAAQ,~~EAAEV~~,~~sBAAC~~,CAAA,aAAA,~~CAAAW~~,wBAAS,EAAC,~~EAAA,~~KAAK,EAAC,OAAO,EAAA,CAAG,EACrC,OAAO,EAAE,OAAO,~~gBACL~~,~~OAAO~~,EAAA,~~CAClB~~,~~CACa~~;~~AAErB~~;;;;"}
1	+ {"version":3,"file":"Toast.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { ToastPropTypes } from '../types';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport styles from './toast.module.scss';\nimport { generateToastClassNames } from './utils';\nimport { ToastTypeConfig } from './constants';\n\nexport const Toast = ({\n e2eClassName,\n type,\n iconSlot,\n text,\n subMessage,\n last,\n minWidth,\n ctaSlot,\n cta,\n onClose,\n}: ToastPropTypes) => {\n const e2eClassNames = generateToastClassNames(e2eClassName);\n\n const { accentColor, icon } = ToastTypeConfig[type] ?? ToastTypeConfig.info;\n const resolvedCta = ctaSlot ?? cta;\n\n return (\n <FlexRow\n className={buildClassnames([styles.toastContainer, e2eClassNames?.container])}\n alignItems=\"center\"\n style={\n {\n '--toast-min-width': minWidth ?? undefined,\n '--toast-status-color': accentColor,\n } as React.CSSProperties\n }\n data-toast-last={last ?? undefined}\n gap=\"base\"\n >\n <FlexRow\n className={buildClassnames([styles.iconWrapper, e2eClassNames.icon])}\n alignItems=\"center\"\n justifyContent=\"center\"\n >\n {iconSlot ?? icon}\n </FlexRow>\n <FlexRow alignItems=\"center\" flexGrow={1} justifyContent=\"space-between\" role=\"alert\">\n <FlexCol gap=\"none\">\n <Text className={styles.toastText} variant=\"headingSmall\" as=\"p\">\n {text}\n </Text>\n {subMessage && (\n <Text className={styles.toastText} variant=\"body\" as=\"p\">\n {subMessage}\n </Text>\n )}\n </FlexCol>\n {resolvedCta}\n </FlexRow>\n <Button\n className={styles.toastCloseButton}\n variant=\"flat\"\n iconSlot={<CrossIcon color=\"white\" />}\n onClick={onClose}\n aria-label=\"Close\"\n />\n </FlexRow>\n );\n};\n"],"names":["generateToastClassNames","ToastTypeConfig","React","FlexRow","buildClassnames","styles","FlexCol","Text","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;AAYa,MAAA,KAAK,GAAG,CAAC,EACpB,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,GAAG,EACH,OAAO,GACQ,KAAI;;AACnB,IAAA,MAAM,aAAa,GAAGA,6BAAuB,CAAC,YAAY,CAAC;AAE3D,IAAA,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,CAAA,EAAA,GAAAC,yBAAe,CAAC,IAAI,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAIA,yBAAe,CAAC,IAAI;IAC3E,MAAM,WAAW,GAAG,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,SAAA,GAAA,OAAO,GAAI,GAAG;AAElC,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,SAAS,EAAEC,+BAAe,CAAC,CAACC,YAAM,CAAC,cAAc,EAAE,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,SAAS,CAAC,CAAC,EAC7E,UAAU,EAAC,QAAQ,EACnB,KAAK,EACH;AACE,YAAA,mBAAmB,EAAE,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,SAAA,GAAA,QAAQ,GAAI,SAAS;AAC1C,YAAA,sBAAsB,EAAE,WAAW;SACb,EAET,iBAAA,EAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,SAAA,GAAA,IAAI,GAAI,SAAS,EAClC,GAAG,EAAC,MAAM,EAAA;AAEV,QAAAH,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,SAAS,EAAEC,+BAAe,CAAC,CAACC,YAAM,CAAC,WAAW,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,EACpE,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EAAA,EAEtB,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,SAAA,GAAR,QAAQ,GAAI,IAAI,CACT;AACV,QAAAH,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAC,EAAA,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,EAAA;AACnF,YAAAD,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,MAAM,EAAA;AACjB,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,SAAI,EAAC,EAAA,SAAS,EAAEF,YAAM,CAAC,SAAS,EAAE,OAAO,EAAC,cAAc,EAAC,EAAE,EAAC,GAAG,EAAA,EAC7D,IAAI,CACA;gBACN,UAAU,KACTH,sBAAC,CAAA,aAAA,CAAAK,SAAI,IAAC,SAAS,EAAEF,YAAM,CAAC,SAAS,EAAE,OAAO,EAAC,MAAM,EAAC,EAAE,EAAC,GAAG,EACrD,EAAA,UAAU,CACN,CACR,CACO;AACT,YAAA,WAAW,CACJ;AACV,QAAAH,sBAAA,CAAA,aAAA,CAACM,aAAM,EAAA,EACL,SAAS,EAAEH,YAAM,CAAC,gBAAgB,EAClC,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEH,sBAAA,CAAA,aAAA,CAACO,wBAAS,EAAA,EAAC,KAAK,EAAC,OAAO,EAAA,CAAG,EACrC,OAAO,EAAE,OAAO,EACL,YAAA,EAAA,OAAO,EAClB,CAAA,CACM;AAEd;;;;"}

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

@@ -1,3 +1,3 @@
 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: ({ e2eClassName, type, iconSlot, text, subMessage, last, minWidth, ctaSlot, cta, onClose, }: ToastPropTypes) => React.JSX.Element;

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

@@ -1,46 +1,30 @@
 import React__default from 'react';
-import { colors } from '../../../theme/modules/colors.js';
-import { Toast as Toast$1, IconWrap, ContentStack, StyledText } from './styled.js';
+import { FlexCol } from '../../Flex/FlexCol/FlexCol.js';
+import { FlexRow } from '../../Flex/FlexRow/FlexRow.js';
+import { Text } from '../../Text/Text.js';
 import { buildClassnames } from '../../../utils/buildClassnames.js';
 import { Button } from '../../Button/Button.js';
-import { ReactComponent as AttentionIcon } from '../../../icons/design-system/components/AttentionIcon.js';
 import { ReactComponent as CrossIcon } from '../../../icons/design-system/components/CrossIcon.js';
-import { ReactComponent as InfoIcon } from '../../../icons/design-system/components/InfoIcon.js';
-import { ReactComponent as MergeIcon } from '../../../icons/design-system/components/MergeIcon.js';
-import { ReactComponent as SuccessIcon } from '../../../icons/design-system/components/SuccessIcon.js';
+import styles from './toast.module.scss.js';
+import { generateToastClassNames } from './utils.js';
+import { ToastTypeConfig } from './constants.js';
-const toastTypes = {
-    info: {
-        accentColor: colors.brand.blue.base,
-        icon: React__default.createElement(InfoIcon, null),
-    },
-    success: {
-        accentColor: colors.secondary.green.base,
-        icon: React__default.createElement(SuccessIcon, null),
-    },
-    error: {
-        accentColor: colors.secondary.red.base,
-        icon: React__default.createElement(AttentionIcon, null),
-    },
-    merge: {
-        accentColor: colors.secondary.purple.base,
-        icon: React__default.createElement(MergeIcon, null),
-    },
-};
-const generateClassNames = (prefix) => ({
-    container: prefix ? `${prefix}-toast-container` : undefined,
-    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 classNames = generateClassNames(className);
-    const e2eClassNames = generateClassNames(e2eClassName);
-    return (React__default.createElement(Toast$1, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container]), direction: "horizontal", alignY: "center", minWidth: minWidth, last: last },
-        React__default.createElement(IconWrap, { color: toastTypes[type].accentColor, className: buildClassnames([classNames.icon, e2eClassNames.icon]) }, iconSlot !== null && iconSlot !== undefined ? iconSlot : toastTypes[type].icon),
-        React__default.createElement(ContentStack, { direction: "horizontal", alignY: "center", alignX: "between" },
-            React__default.createElement(StyledText, { variant: "body" }, text),
-            cta),
-        React__default.createElement(Button, { variant: "flat", iconSlot: React__default.createElement(CrossIcon, { color: "white" }), onClick: onClose, "aria-label": "Close" })));
+const Toast = ({ e2eClassName, type, iconSlot, text, subMessage, last, minWidth, ctaSlot, cta, onClose, }) => {
+    var _a;
+    const e2eClassNames = generateToastClassNames(e2eClassName);
+    const { accentColor, icon } = (_a = ToastTypeConfig[type]) !== null && _a !== undefined ? _a : ToastTypeConfig.info;
+    const resolvedCta = ctaSlot !== null && ctaSlot !== undefined ? ctaSlot : cta;
+    return (React__default.createElement(FlexRow, { className: buildClassnames([styles.toastContainer, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container]), alignItems: "center", style: {
+            '--toast-min-width': minWidth !== null && minWidth !== undefined ? minWidth : undefined,
+            '--toast-status-color': accentColor,
+        }, "data-toast-last": last !== null && last !== undefined ? last : undefined, gap: "base" },
+        React__default.createElement(FlexRow, { className: buildClassnames([styles.iconWrapper, e2eClassNames.icon]), alignItems: "center", justifyContent: "center" }, iconSlot !== null && iconSlot !== undefined ? iconSlot : icon),
+        React__default.createElement(FlexRow, { alignItems: "center", flexGrow: 1, justifyContent: "space-between", role: "alert" },
+            React__default.createElement(FlexCol, { gap: "none" },
+                React__default.createElement(Text, { className: styles.toastText, variant: "headingSmall", as: "p" }, text),
+                subMessage && (React__default.createElement(Text, { className: styles.toastText, variant: "body", as: "p" }, subMessage))),
+            resolvedCta),
+        React__default.createElement(Button, { className: styles.toastCloseButton, variant: "flat", iconSlot: React__default.createElement(CrossIcon, { color: "white" }), onClick: onClose, "aria-label": "Close" })));
 };
 export { Toast };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.js","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { ~~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":["React"~~,"ToastContainer","Text"~~],"mappings":";;;;;;;;;;;~~AAQA~~,~~MAAM~~,~~UAAU~~,~~GAAc;AAC5B~~,~~IAAA~~,~~IAAI~~,~~EAAE;AACJ~~,~~QAAA~~,~~WAAW~~,~~EAAE~~,~~MAAM~~,~~CAAC~~,~~KAAK~~,~~CAAC~~,~~IAAI~~,~~CAAC~~,IAAI~~;QACnC~~,~~IAAI~~,~~EAAEA~~,~~cAAC~~,~~CAAA~~,~~aAAA~~,~~CAAA~~,~~QAAQ~~,~~EAAG~~,~~IAAA~~,~~CAAA;~~AACnB,~~KAAA;AACD,~~IAAA,~~OAAO~~,~~EAAE;AACP~~,~~QAAA~~,~~WAAW~~,~~EAAE~~,~~MAAM~~,CAAC,~~SAAS~~,~~CAAC~~,~~KAAK~~,~~CAAC~~,~~IAAI;QACxC~~,IAAI,~~EAAEA~~,~~cAAC~~,CAAA,~~aAAA~~,~~CAAA~~,~~WAAW~~,~~EAAG~~,~~IAAA~~,~~CAAA;AACtB~~,~~KAAA;AACD~~,IAAA,~~KAAK~~,~~EAAE;AACL~~,~~QAAA~~,~~WAAW~~,~~EAAE~~,~~MAAM~~,~~CAAC~~,~~SAAS~~,CAAC,~~GAAG,CAAC,~~IAAI;~~QACtC~~,~~IAAI~~,~~EAAEA~~,~~cAAC~~,~~CAAA~~,~~aAAA,CAAA,aAAa,EAAG,IAAA,CAAA;AACxB,~~KAAA~~;AACD~~,IAAA,~~KAAK~~,~~EAAE;AACL~~,~~QAAA~~,~~WAAW~~,~~EAAE~~,~~MAAM~~,~~CAAC~~,~~SAAS,CAAC,MAAM,CAAC,IAAI~~;~~QACzC~~,~~IAAI~~,~~EAAEA~~,~~cAAC~~,CAAA,aAAA,~~CAAA~~,~~SAAS~~,~~EAAG~~,~~IAAA~~,~~CAAA;AACpB~~,~~KAAA;CACF;AAED~~,~~MAAM~~,~~kBAAkB~~,~~GAAG,~~CAAC,~~MAAe~~,~~MAA+B;IACxE~~,~~SAAS~~,EAAE,~~MAAM~~,~~GAAG~~,~~CAAG~~,~~EAAA~~,~~MAAM~~,~~CAAkB~~,~~gBAAA~~,~~CAAA~~,~~GAAG~~,~~SAAS;IAC3D~~,~~IAAI~~,~~EAAE~~,~~MAAM~~,~~GAAG~~,~~CAAG~~,~~EAAA~~,~~MAAM~~,~~CAAa~~,~~WAAA~~,~~CAAA~~,~~GAAG~~,~~SAAS~~;~~IACjD~~,~~SAAS~~,EAAE,~~MAAM~~,~~GAAG~~,~~CAAG~~,~~EAAA~~,~~MAAM~~,~~CAAmB~~,~~iBAAA~~,~~CAAA~~,~~GAAG~~,SAAS;~~AAC7D~~,~~CAAA~~,~~CAAC;AAEW~~,~~MAAA~~,~~KAAK~~,~~GAAG~~,~~CAAC~~,~~EACpB~~,~~SAAS~~,~~EACT~~,~~YAAY~~,~~EACZ~~,IAAI,~~EACJ~~,~~QAAQ~~,~~EACR~~,IAAI,~~EACJ~~,~~IAAI~~,~~EACJ~~,~~QAAQ,EACR,~~GAAG,~~EACH~~,~~OAAO~~,~~GACQ,KAAI~~;~~AACnB~~,~~IAAA~~,~~MAAM~~,~~UAAU~~,~~GAAG~~,~~kBAAkB,~~CAAC,~~SAAS~~,~~CAAC;AAChD~~,~~IAAA~~,~~MAAM~~,~~aAAa~~,~~GAAG~~,~~kBAAkB~~,CAAC,~~YAAY~~,CAAC~~;AAEtD~~,~~IAAA~~,~~QACEA~~,~~cAAC~~,~~CAAA~~,~~aAAA~~,~~CAAAC,OAAc,IACb,SAAS,EAAE,eAAe,~~CAAC,CAAC,~~UAAU~~,~~KAAA,IAAA,IAAV,~~UAAU,~~KAAV~~,~~SAAA~~,~~GAAA~~,~~SAAA~~,~~GAAA~~,~~UAAU~~,~~CAAE~~,~~SAAS~~,~~EAAE~~,~~aAAa~~,~~KAAb,~~IAAA,~~IAAA~~,~~aAAa~~,~~KAAb~~,SAAA,~~GAAA~~,~~SAAA~~,~~GAAA~~,~~aAAa~~,~~CAAE~~,~~SAAS~~,~~CAAC~~,CAAC,~~EAC7E~~,~~SAAS,~~EAAC,~~YAAY~~,~~EACtB~~,~~MAAM,~~EAAC,QAAQ,~~EACf~~,QAAQ,EAAE,~~QAAQ~~,~~EAClB~~,~~IAAI~~,~~EAAE~~,IAAI,EAAA;~~AAEV~~,~~QAAAD~~,cAAA,CAAA,aAAA,CAAC,~~QAAQ~~,~~EACP,~~EAAA,~~KAAK~~,~~EAAE~~,~~UAAU~~,~~CAAC~~,~~IAAI~~,~~CAAC~~,~~CAAC~~,~~WAAW~~,~~EACnC~~,~~SAAS,EAAE,eAAe,~~CAAC,~~CAAC~~,~~UAAU~~,~~CAAC~~,~~IAAI~~,EAAE,~~aAAa~~,CAAC,~~IAAI~~,~~CAAC~~,~~CAAC~~,~~EAAA~~,~~EAEhE~~,~~QAAQ~~,~~KAAR~~,~~IAAA~~,~~IAAA~~,~~QAAQ~~,~~KAAR~~,~~SAAA~~,~~GAAA~~,~~QAAQ~~,~~GAAI~~,~~UAAU~~,~~CAAC~~,~~IAAI~~,~~CAAC~~,~~CAAC,~~IAAI,~~CACzB;AACX~~,~~QAAAA~~,~~cAAA~~,~~CAAA~~,~~aAAA,~~CAAC,~~YAAY~~,~~EAAA~~,EAAC,~~SAAS~~,EAAC,~~YAAY~~,EAAC,~~MAAM~~,~~EAAC~~,~~QAAQ~~,~~EAAC~~,~~MAAM~~,~~EAAC~~,~~SAAS~~,~~EAAA~~;~~AACnE~~,~~YAAAA~~,cAAA,CAAA,aAAA,~~CAACE~~,~~UAAI~~,~~EAAC,~~EAAA,~~OAAO~~,~~EAAC~~,~~MAAM,EAAA,~~EAAE,~~IAAI~~,~~CAAQ;AACjC~~,~~YAAA~~,~~GAAG~~,~~CACS;QACfF,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,~~OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,~~cAAC~~,CAAA,aAAA,~~CAAA~~,SAAS,EAAC,~~EAAA,~~KAAK,EAAC,OAAO,EAAA,CAAG,EACrC,OAAO,EAAE,OAAO,~~gBACL~~,~~OAAO~~,EAAA,~~CAClB~~,~~CACa~~;~~AAErB~~;;;;"}
1	+ {"version":3,"file":"Toast.js","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { ToastPropTypes } from '../types';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport styles from './toast.module.scss';\nimport { generateToastClassNames } from './utils';\nimport { ToastTypeConfig } from './constants';\n\nexport const Toast = ({\n e2eClassName,\n type,\n iconSlot,\n text,\n subMessage,\n last,\n minWidth,\n ctaSlot,\n cta,\n onClose,\n}: ToastPropTypes) => {\n const e2eClassNames = generateToastClassNames(e2eClassName);\n\n const { accentColor, icon } = ToastTypeConfig[type] ?? ToastTypeConfig.info;\n const resolvedCta = ctaSlot ?? cta;\n\n return (\n <FlexRow\n className={buildClassnames([styles.toastContainer, e2eClassNames?.container])}\n alignItems=\"center\"\n style={\n {\n '--toast-min-width': minWidth ?? undefined,\n '--toast-status-color': accentColor,\n } as React.CSSProperties\n }\n data-toast-last={last ?? undefined}\n gap=\"base\"\n >\n <FlexRow\n className={buildClassnames([styles.iconWrapper, e2eClassNames.icon])}\n alignItems=\"center\"\n justifyContent=\"center\"\n >\n {iconSlot ?? icon}\n </FlexRow>\n <FlexRow alignItems=\"center\" flexGrow={1} justifyContent=\"space-between\" role=\"alert\">\n <FlexCol gap=\"none\">\n <Text className={styles.toastText} variant=\"headingSmall\" as=\"p\">\n {text}\n </Text>\n {subMessage && (\n <Text className={styles.toastText} variant=\"body\" as=\"p\">\n {subMessage}\n </Text>\n )}\n </FlexCol>\n {resolvedCta}\n </FlexRow>\n <Button\n className={styles.toastCloseButton}\n variant=\"flat\"\n iconSlot={<CrossIcon color=\"white\" />}\n onClick={onClose}\n aria-label=\"Close\"\n />\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;AAYa,MAAA,KAAK,GAAG,CAAC,EACpB,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,GAAG,EACH,OAAO,GACQ,KAAI;;AACnB,IAAA,MAAM,aAAa,GAAG,uBAAuB,CAAC,YAAY,CAAC;AAE3D,IAAA,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,CAAA,EAAA,GAAA,eAAe,CAAC,IAAI,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,eAAe,CAAC,IAAI;IAC3E,MAAM,WAAW,GAAG,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,SAAA,GAAA,OAAO,GAAI,GAAG;AAElC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,SAAS,CAAC,CAAC,EAC7E,UAAU,EAAC,QAAQ,EACnB,KAAK,EACH;AACE,YAAA,mBAAmB,EAAE,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,SAAA,GAAA,QAAQ,GAAI,SAAS;AAC1C,YAAA,sBAAsB,EAAE,WAAW;SACb,EAET,iBAAA,EAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,SAAA,GAAA,IAAI,GAAI,SAAS,EAClC,GAAG,EAAC,MAAM,EAAA;AAEV,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,EACpE,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EAAA,EAEtB,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,SAAA,GAAR,QAAQ,GAAI,IAAI,CACT;AACV,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAC,EAAA,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,EAAA;AACnF,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,MAAM,EAAA;AACjB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,EAAC,cAAc,EAAC,EAAE,EAAC,GAAG,EAAA,EAC7D,IAAI,CACA;gBACN,UAAU,KACTA,cAAC,CAAA,aAAA,CAAA,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,EAAC,MAAM,EAAC,EAAE,EAAC,GAAG,EACrD,EAAA,UAAU,CACN,CACR,CACO;AACT,YAAA,WAAW,CACJ;AACV,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAClC,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAC,OAAO,EAAA,CAAG,EACrC,OAAO,EAAE,OAAO,EACL,YAAA,EAAA,OAAO,EAClB,CAAA,CACM;AAEd;;;;"}

package/dist/components/ToastsLayout/components/constants.cjs ADDED Viewed

@@ -0,0 +1,42 @@
+'use strict';
+var React = require('react');
+var colors = require('../../../theme/modules/colors.cjs');
+var AttentionIcon = require('../../../icons/design-system/components/AttentionIcon.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 WarningOutlineIcon = require('../../../icons/design-system/components/WarningOutlineIcon.cjs');
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+const ToastTypeConfig = {
+    info: {
+        accentColor: colors.colors.secondary.blue.base,
+        icon: React__default.default.createElement(InfoIcon.ReactComponent, null),
+    },
+    success: {
+        accentColor: colors.colors.secondary.green.base,
+        icon: React__default.default.createElement(SuccessIcon.ReactComponent, null),
+    },
+    error: {
+        accentColor: colors.colors.secondary.red.base,
+        icon: React__default.default.createElement(AttentionIcon.ReactComponent, null),
+    },
+    warning: {
+        accentColor: colors.colors.secondary.orange.base,
+        icon: React__default.default.createElement(WarningOutlineIcon.ReactComponent, null),
+    },
+    merge: {
+        accentColor: colors.colors.secondary.purple.base,
+        icon: React__default.default.createElement(MergeIcon.ReactComponent, null),
+    },
+    custom: {
+        accentColor: colors.colors.secondary.blue.base,
+    },
+};
+exports.ToastTypeConfig = ToastTypeConfig;
+//# sourceMappingURL=constants.cjs.map

package/dist/components/ToastsLayout/components/constants.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"constants.cjs","sources":["../../../../src/components/ToastsLayout/components/constants.tsx"],"sourcesContent":["import React from 'react';\n\nimport { colors } from 'Theme/modules/colors';\nimport { ToastType } from '../types';\nimport {\n SuccessIcon,\n InfoIcon,\n AttentionIcon,\n MergeIcon,\n WarningOutlineIcon,\n} from '../../../icons';\n\nexport const ToastTypeConfig: ToastType = {\n info: {\n accentColor: colors.secondary.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 warning: {\n accentColor: colors.secondary.orange.base,\n icon: <WarningOutlineIcon />,\n },\n merge: {\n accentColor: colors.secondary.purple.base,\n icon: <MergeIcon />,\n },\n custom: {\n accentColor: colors.secondary.blue.base,\n },\n};\n"],"names":["colors","React","InfoIcon","SuccessIcon","AttentionIcon","WarningOutlineIcon","MergeIcon"],"mappings":";;;;;;;;;;;;;;AAYa,MAAA,eAAe,GAAc;AACxC,IAAA,IAAI,EAAE;AACJ,QAAA,WAAW,EAAEA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;QACvC,IAAI,EAAEC,sBAAC,CAAA,aAAA,CAAAC,uBAAQ,EAAG,IAAA,CAAA;AACnB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,WAAW,EAAEF,aAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;QACxC,IAAI,EAAEC,sBAAC,CAAA,aAAA,CAAAE,0BAAW,EAAG,IAAA,CAAA;AACtB,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAEH,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;QACtC,IAAI,EAAEC,sBAAC,CAAA,aAAA,CAAAG,4BAAa,EAAG,IAAA,CAAA;AACxB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,WAAW,EAAEJ,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;QACzC,IAAI,EAAEC,sBAAC,CAAA,aAAA,CAAAI,iCAAkB,EAAG,IAAA,CAAA;AAC7B,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAEL,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;QACzC,IAAI,EAAEC,sBAAC,CAAA,aAAA,CAAAK,wBAAS,EAAG,IAAA,CAAA;AACpB,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,WAAW,EAAEN,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AACxC,KAAA;;;;;"}

package/dist/components/ToastsLayout/components/constants.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { ToastType } from '../types';
2	+ export declare const ToastTypeConfig: ToastType;

package/dist/components/ToastsLayout/components/constants.js ADDED Viewed

@@ -0,0 +1,36 @@
+import React__default from 'react';
+import { colors } from '../../../theme/modules/colors.js';
+import { ReactComponent as AttentionIcon } from '../../../icons/design-system/components/AttentionIcon.js';
+import { ReactComponent as InfoIcon } from '../../../icons/design-system/components/InfoIcon.js';
+import { ReactComponent as MergeIcon } from '../../../icons/design-system/components/MergeIcon.js';
+import { ReactComponent as SuccessIcon } from '../../../icons/design-system/components/SuccessIcon.js';
+import { ReactComponent as WarningOutlineIcon } from '../../../icons/design-system/components/WarningOutlineIcon.js';
+const ToastTypeConfig = {
+    info: {
+        accentColor: colors.secondary.blue.base,
+        icon: React__default.createElement(InfoIcon, null),
+    },
+    success: {
+        accentColor: colors.secondary.green.base,
+        icon: React__default.createElement(SuccessIcon, null),
+    },
+    error: {
+        accentColor: colors.secondary.red.base,
+        icon: React__default.createElement(AttentionIcon, null),
+    },
+    warning: {
+        accentColor: colors.secondary.orange.base,
+        icon: React__default.createElement(WarningOutlineIcon, null),
+    },
+    merge: {
+        accentColor: colors.secondary.purple.base,
+        icon: React__default.createElement(MergeIcon, null),
+    },
+    custom: {
+        accentColor: colors.secondary.blue.base,
+    },
+};
+export { ToastTypeConfig };
+//# sourceMappingURL=constants.js.map

package/dist/components/ToastsLayout/components/constants.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"constants.js","sources":["../../../../src/components/ToastsLayout/components/constants.tsx"],"sourcesContent":["import React from 'react';\n\nimport { colors } from 'Theme/modules/colors';\nimport { ToastType } from '../types';\nimport {\n SuccessIcon,\n InfoIcon,\n AttentionIcon,\n MergeIcon,\n WarningOutlineIcon,\n} from '../../../icons';\n\nexport const ToastTypeConfig: ToastType = {\n info: {\n accentColor: colors.secondary.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 warning: {\n accentColor: colors.secondary.orange.base,\n icon: <WarningOutlineIcon />,\n },\n merge: {\n accentColor: colors.secondary.purple.base,\n icon: <MergeIcon />,\n },\n custom: {\n accentColor: colors.secondary.blue.base,\n },\n};\n"],"names":["React"],"mappings":";;;;;;;;AAYa,MAAA,eAAe,GAAc;AACxC,IAAA,IAAI,EAAE;AACJ,QAAA,WAAW,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;QACvC,IAAI,EAAEA,cAAC,CAAA,aAAA,CAAA,QAAQ,EAAG,IAAA,CAAA;AACnB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,WAAW,EAAE,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;QACxC,IAAI,EAAEA,cAAC,CAAA,aAAA,CAAA,WAAW,EAAG,IAAA,CAAA;AACtB,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAE,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;QACtC,IAAI,EAAEA,cAAC,CAAA,aAAA,CAAA,aAAa,EAAG,IAAA,CAAA;AACxB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,WAAW,EAAE,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;QACzC,IAAI,EAAEA,cAAC,CAAA,aAAA,CAAA,kBAAkB,EAAG,IAAA,CAAA;AAC7B,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAE,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;QACzC,IAAI,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAG,IAAA,CAAA;AACpB,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,WAAW,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AACxC,KAAA;;;;;"}

package/dist/components/ToastsLayout/components/toast.module.scss.cjs ADDED Viewed

@@ -0,0 +1,9 @@
+'use strict';
+var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+___$insertStyle("._toastContainer_fb3uj_1 {\n  background-color: var(--colors-neutral-ink-dark);\n  padding: var(--sizes-3);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  pointer-events: auto;\n  z-index: 40;\n  min-width: var(--toast-min-width, 50vw);\n  max-width: 80vw;\n}\n\nbutton._toastCloseButton_fb3uj_12:hover {\n  background-color: var(--colors-neutral-ink-light);\n}\nbutton._toastCloseButton_fb3uj_12:active {\n  background-color: var(--colors-neutral-ink-lightest);\n}\n\n._iconWrapper_fb3uj_19 {\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-base);\n  background-color: var(--toast-status-color, var(--colors-secondary-blue-base));\n  color: #fff;\n}\n._iconWrapper_fb3uj_19 svg {\n  width: var(--sizes-md);\n  height: var(--sizes-md);\n}\n\np._toastText_fb3uj_35 {\n  color: #fff;\n}");
+var styles = {"toastContainer":"_toastContainer_fb3uj_1","toastCloseButton":"_toastCloseButton_fb3uj_12","iconWrapper":"_iconWrapper_fb3uj_19","toastText":"_toastText_fb3uj_35"};
+module.exports = styles;
+//# sourceMappingURL=toast.module.scss.cjs.map

package/dist/components/ToastsLayout/components/toast.module.scss.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"toast.module.scss.cjs","sources":["../../../../src/components/ToastsLayout/components/toast.module.scss"],"sourcesContent":[".toastContainer {\n background-color: var(--colors-neutral-ink-dark);\n padding: var(--sizes-3);\n box-shadow: var(--shadows-md);\n border-radius: var(--radius-base);\n pointer-events: auto;\n z-index: 40;\n min-width: var(--toast-min-width, 50vw);\n max-width: 80vw;\n}\n\nbutton.toastCloseButton {\n &:hover {\n background-color: var(--colors-neutral-ink-light);\n }\n &:active {\n background-color: var(--colors-neutral-ink-lightest);\n }\n}\n\n.iconWrapper {\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-base);\n background-color: var(--toast-status-color, var(--colors-secondary-blue-base));\n color: #fff;\n\n svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n }\n}\n\np.toastText {\n color: #fff;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,45BAAA;AACA,aAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}

package/dist/components/ToastsLayout/components/toast.module.scss.js ADDED Viewed

@@ -0,0 +1,7 @@
+import insertStyle from '../../../_virtual/____insertStyle.js';
+insertStyle("._toastContainer_fb3uj_1 {\n  background-color: var(--colors-neutral-ink-dark);\n  padding: var(--sizes-3);\n  box-shadow: var(--shadows-md);\n  border-radius: var(--radius-base);\n  pointer-events: auto;\n  z-index: 40;\n  min-width: var(--toast-min-width, 50vw);\n  max-width: 80vw;\n}\n\nbutton._toastCloseButton_fb3uj_12:hover {\n  background-color: var(--colors-neutral-ink-light);\n}\nbutton._toastCloseButton_fb3uj_12:active {\n  background-color: var(--colors-neutral-ink-lightest);\n}\n\n._iconWrapper_fb3uj_19 {\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-base);\n  background-color: var(--toast-status-color, var(--colors-secondary-blue-base));\n  color: #fff;\n}\n._iconWrapper_fb3uj_19 svg {\n  width: var(--sizes-md);\n  height: var(--sizes-md);\n}\n\np._toastText_fb3uj_35 {\n  color: #fff;\n}");
+var styles = {"toastContainer":"_toastContainer_fb3uj_1","toastCloseButton":"_toastCloseButton_fb3uj_12","iconWrapper":"_iconWrapper_fb3uj_19","toastText":"_toastText_fb3uj_35"};
+export { styles as default };
+//# sourceMappingURL=toast.module.scss.js.map

package/dist/components/ToastsLayout/components/toast.module.scss.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"toast.module.scss.js","sources":["../../../../src/components/ToastsLayout/components/toast.module.scss"],"sourcesContent":[".toastContainer {\n background-color: var(--colors-neutral-ink-dark);\n padding: var(--sizes-3);\n box-shadow: var(--shadows-md);\n border-radius: var(--radius-base);\n pointer-events: auto;\n z-index: 40;\n min-width: var(--toast-min-width, 50vw);\n max-width: 80vw;\n}\n\nbutton.toastCloseButton {\n &:hover {\n background-color: var(--colors-neutral-ink-light);\n }\n &:active {\n background-color: var(--colors-neutral-ink-lightest);\n }\n}\n\n.iconWrapper {\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-base);\n background-color: var(--toast-status-color, var(--colors-secondary-blue-base));\n color: #fff;\n\n svg {\n width: var(--sizes-md);\n height: var(--sizes-md);\n }\n}\n\np.toastText {\n color: #fff;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,45BAAA;AACA,aAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}

package/dist/components/ToastsLayout/components/utils.cjs ADDED Viewed

@@ -0,0 +1,10 @@
+'use strict';
+const generateToastClassNames = (prefix) => ({
+    container: prefix ? `${prefix}-toast-container` : undefined,
+    icon: prefix ? `${prefix}-toast-icon` : undefined,
+    closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,
+});
+exports.generateToastClassNames = generateToastClassNames;
+//# sourceMappingURL=utils.cjs.map

package/dist/components/ToastsLayout/components/utils.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"utils.cjs","sources":["../../../../src/components/ToastsLayout/components/utils.ts"],"sourcesContent":["import { ClassNamesReturnPayload } from '../types';\n\nexport const generateToastClassNames = (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"],"names":[],"mappings":";;MAEa,uBAAuB,GAAG,CAAC,MAAe,MAA+B;IACpF,SAAS,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAkB,gBAAA,CAAA,GAAG,SAAS;IAC3D,IAAI,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAa,WAAA,CAAA,GAAG,SAAS;IACjD,SAAS,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAmB,iBAAA,CAAA,GAAG,SAAS;AAC7D,CAAA;;;;"}

package/dist/components/ToastsLayout/components/utils.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { ClassNamesReturnPayload } from '../types';
2	+ export declare const generateToastClassNames: (prefix?: string) => ClassNamesReturnPayload;

package/dist/components/ToastsLayout/components/utils.js ADDED Viewed

@@ -0,0 +1,8 @@
+const generateToastClassNames = (prefix) => ({
+    container: prefix ? `${prefix}-toast-container` : undefined,
+    icon: prefix ? `${prefix}-toast-icon` : undefined,
+    closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,
+});
+export { generateToastClassNames };
+//# sourceMappingURL=utils.js.map

package/dist/components/ToastsLayout/components/utils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"utils.js","sources":["../../../../src/components/ToastsLayout/components/utils.ts"],"sourcesContent":["import { ClassNamesReturnPayload } from '../types';\n\nexport const generateToastClassNames = (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"],"names":[],"mappings":"MAEa,uBAAuB,GAAG,CAAC,MAAe,MAA+B;IACpF,SAAS,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAkB,gBAAA,CAAA,GAAG,SAAS;IAC3D,IAAI,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAa,WAAA,CAAA,GAAG,SAAS;IACjD,SAAS,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAmB,iBAAA,CAAA,GAAG,SAAS;AAC7D,CAAA;;;;"}

package/dist/components/ToastsLayout/toastsLayout.module.scss.cjs ADDED Viewed

@@ -0,0 +1,9 @@
+'use strict';
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+___$insertStyle("._toastsLayoutContainer_o7rtx_1 {\n  position: fixed;\n  bottom: var(--sizes-6);\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}\n._toastsLayoutContainer_o7rtx_1 .veeqo-components-toast-enter {\n  transform: translateY(12px);\n  opacity: 0;\n  transition: 500ms ease;\n}\n._toastsLayoutContainer_o7rtx_1 .veeqo-components-toast-enter-active {\n  transform: translateY(0);\n  opacity: 1;\n  transition: 225ms ease-in-out;\n}\n._toastsLayoutContainer_o7rtx_1 .veeqo-components-toast-enter-done {\n  opacity: 1;\n}\n._toastsLayoutContainer_o7rtx_1 .veeqo-components-toast-exit {\n  transform: translateX(0);\n  opacity: 1;\n}\n._toastsLayoutContainer_o7rtx_1 .veeqo-components-toast-exit[data-toast-last=true] {\n  transform: translateY(0);\n}\n._toastsLayoutContainer_o7rtx_1 .veeqo-components-toast-exit-active {\n  transform: translateX(12px);\n  opacity: 0;\n  transition: 225ms ease-in-out;\n}\n._toastsLayoutContainer_o7rtx_1 .veeqo-components-toast-exit-active[data-toast-last=true] {\n  transform: translateY(12px);\n}");
+var styles = {"toastsLayoutContainer":"_toastsLayoutContainer_o7rtx_1"};
+module.exports = styles;
+//# sourceMappingURL=toastsLayout.module.scss.cjs.map

package/dist/components/ToastsLayout/toastsLayout.module.scss.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"toastsLayout.module.scss.cjs","sources":["../../../src/components/ToastsLayout/toastsLayout.module.scss"],"sourcesContent":[".toastsLayoutContainer {\n position: fixed;\n bottom: var(--sizes-6);\n width: 100%;\n pointer-events: none;\n z-index: var(--layers-tooltip);\n\n // The CSSTransition components adds non-scoped class names for transition\n // phases. :global is used to target these class names without the default\n // locally scoped id suffix appended by CSS modules.\n :global(.veeqo-components-toast-enter) {\n transform: translateY(12px);\n opacity: 0;\n transition: 500ms ease;\n }\n\n :global(.veeqo-components-toast-enter-active) {\n transform: translateY(0);\n opacity: 1;\n transition: 225ms ease-in-out;\n }\n :global(.veeqo-components-toast-enter-done) {\n opacity: 1;\n }\n\n :global(.veeqo-components-toast-exit) {\n transform: translateX(0);\n opacity: 1;\n\n &[data-toast-last='true'] {\n transform: translateY(0);\n }\n }\n\n :global(.veeqo-components-toast-exit-active) {\n transform: translateX(12px);\n opacity: 0;\n transition: 225ms ease-in-out;\n\n &[data-toast-last='true'] {\n transform: translateY(12px);\n }\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,giCAAA;AACA,aAAA,CAAA,uBAAA,CAAA,gCAAA;;;;"}

package/dist/components/ToastsLayout/toastsLayout.module.scss.js ADDED Viewed

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+insertStyle("._toastsLayoutContainer_o7rtx_1 {\n  position: fixed;\n  bottom: var(--sizes-6);\n  width: 100%;\n  pointer-events: none;\n  z-index: var(--layers-tooltip);\n}\n._toastsLayoutContainer_o7rtx_1 .veeqo-components-toast-enter {\n  transform: translateY(12px);\n  opacity: 0;\n  transition: 500ms ease;\n}\n._toastsLayoutContainer_o7rtx_1 .veeqo-components-toast-enter-active {\n  transform: translateY(0);\n  opacity: 1;\n  transition: 225ms ease-in-out;\n}\n._toastsLayoutContainer_o7rtx_1 .veeqo-components-toast-enter-done {\n  opacity: 1;\n}\n._toastsLayoutContainer_o7rtx_1 .veeqo-components-toast-exit {\n  transform: translateX(0);\n  opacity: 1;\n}\n._toastsLayoutContainer_o7rtx_1 .veeqo-components-toast-exit[data-toast-last=true] {\n  transform: translateY(0);\n}\n._toastsLayoutContainer_o7rtx_1 .veeqo-components-toast-exit-active {\n  transform: translateX(12px);\n  opacity: 0;\n  transition: 225ms ease-in-out;\n}\n._toastsLayoutContainer_o7rtx_1 .veeqo-components-toast-exit-active[data-toast-last=true] {\n  transform: translateY(12px);\n}");
+var styles = {"toastsLayoutContainer":"_toastsLayoutContainer_o7rtx_1"};
+export { styles as default };
+//# sourceMappingURL=toastsLayout.module.scss.js.map

package/dist/components/ToastsLayout/toastsLayout.module.scss.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"toastsLayout.module.scss.js","sources":["../../../src/components/ToastsLayout/toastsLayout.module.scss"],"sourcesContent":[".toastsLayoutContainer {\n position: fixed;\n bottom: var(--sizes-6);\n width: 100%;\n pointer-events: none;\n z-index: var(--layers-tooltip);\n\n // The CSSTransition components adds non-scoped class names for transition\n // phases. :global is used to target these class names without the default\n // locally scoped id suffix appended by CSS modules.\n :global(.veeqo-components-toast-enter) {\n transform: translateY(12px);\n opacity: 0;\n transition: 500ms ease;\n }\n\n :global(.veeqo-components-toast-enter-active) {\n transform: translateY(0);\n opacity: 1;\n transition: 225ms ease-in-out;\n }\n :global(.veeqo-components-toast-enter-done) {\n opacity: 1;\n }\n\n :global(.veeqo-components-toast-exit) {\n transform: translateX(0);\n opacity: 1;\n\n &[data-toast-last='true'] {\n transform: translateY(0);\n }\n }\n\n :global(.veeqo-components-toast-exit-active) {\n transform: translateX(12px);\n opacity: 0;\n transition: 225ms ease-in-out;\n\n &[data-toast-last='true'] {\n transform: translateY(12px);\n }\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,giCAAA;AACA,aAAA,CAAA,uBAAA,CAAA,gCAAA;;;;"}

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

@@ -2,22 +2,22 @@ import { ReactElement } from 'react';
 export declare enum ToastTypes {
     info = "info",
     error = "error",
+    warning = "warning",
     success = "success",
-    merge = "merge"
+    merge = "merge",
+    custom = "custom"
 }
 export type ToastType = Record<ToastTypes, {
     accentColor: string;
-    icon: ReactElement;
+    icon?: ReactElement;
 }>;
 export type ToastPropTypes = Omit<Notification, 'key'> & {
-    className?: string;
     e2eClassName?: string;
     last: boolean;
     minWidth: number | string;
     onClose: () => void;
 };
 export type ToastsLayoutPropTypes = {
-    className?: string;
     e2eClassName?: string;
     toasts: Notification[];
     minWidth?: number | string;
@@ -34,5 +34,8 @@ export type Notification = {
     type: keyof typeof ToastTypes;
     iconSlot?: ReactElement;
     text: string;
+    subMessage?: string;
+    ctaSlot?: React.ReactNode;
+    /** @deprecated Use ctaSlot instead */
     cta?: React.ReactNode;
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "13.17.0",
+  "version": "13.19.0-beta-1",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",

package/dist/components/ToastsLayout/components/styled.cjs DELETED Viewed

@@ -1,25 +0,0 @@
-'use strict';
-var styled = require('styled-components');
-var Stack = require('../../Stack/Stack.cjs');
-var BaseContainer = require('../../BaseContainer/BaseContainer.cjs');
-var Text = require('../../Text/Text.cjs');
-var index = require('../../../theme/index.cjs');
-var sizes = require('../../../theme/modules/sizes.cjs');
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const ToastsLayoutContainer = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ToastsLayoutContainer", componentId: "vui--1iztsl9" }) `position:fixed;bottom:24px;width:100%;pointer-events:none;z-index:${index.theme.layers.tooltip};`;
-const Toast = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--Toast", componentId: "vui--1o64628" }) `background-color:${index.theme.colors.neutral.ink.dark};padding:12px 24px 12px 12px;box-shadow:${index.theme.shadows.lg};border-radius:${index.theme.radius.md};pointer-events:auto;z-index:40;min-width:${({ minWidth }) => minWidth};max-width:80vw;&.veeqo-components-toast-enter{transform:translateY(12px);opacity:0;}&.veeqo-components-toast-enter-active{transform:translateY(0);opacity:1;transition:500ms ease;}&.veeqo-components-toast-exit{transform:${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};opacity:1;}&.veeqo-components-toast-exit-active{transform:${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};opacity:0;transition:500ms ease;}`;
-const IconWrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--1nmtetq" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${index.theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.sizes.md};height:${sizes.sizes.md};}`;
-const ContentStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--fvpujj" }) `flex-grow:1;`;
-const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--ppieao" }) `color:white;font-size:16px;`;
-exports.ContentStack = ContentStack;
-exports.IconWrap = IconWrap;
-exports.StyledText = StyledText;
-exports.Toast = Toast;
-exports.ToastsLayoutContainer = ToastsLayoutContainer;
-//# sourceMappingURL=styled.cjs.map

package/dist/components/ToastsLayout/components/styled.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"styled.cjs","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n position: fixed;\n bottom: 24px;\n width: 100%;\n pointer-events: none;\n z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n minWidth: number | string;\n last: boolean;\n}>`\n background-color: ${theme.colors.neutral.ink.dark};\n padding: 12px 24px 12px 12px;\n box-shadow: ${theme.shadows.lg};\n border-radius: ${theme.radius.md};\n pointer-events: auto;\n z-index: 40;\n min-width: ${({ minWidth }) => minWidth};\n max-width: 80vw;\n\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: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n opacity: 1;\n }\n\n &.veeqo-components-toast-exit-active {\n transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n opacity: 0;\n transition: 500ms ease;\n }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n height: 40px;\n width: 40px;\n border-radius: ${theme.radius.md};\n background-color: ${({ color }) => color};\n color: #fff;\n\n svg {\n width: ${sizes.md};\n height: ${sizes.md};\n }\n`;\n\nexport const ContentStack = styled(Stack)`\n flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n color: white;\n font-size: 16px;\n`;\n"],"names":["styled","Stack","theme","BaseContainer","sizes","Text"],"mappings":";;;;;;;;;;;;;AAQO,MAAM,qBAAqB,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrCC,WAAK,CAAC,MAAM,CAAC,OAAO;AAGpB,MAAA,KAAK,GAAGF,uBAAM,CAACC,WAAK,CAAC,CAIZ,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAEnC,wCAAA,EAAAA,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACbA,WAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAexB,4NAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAGF,uBAAM,CAACG,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1BD,WAAK,CAAC,MAAM,CAAC,EAAE,CACZ,kBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAI7B,sBAAA,EAAAE,WAAK,CAAC,EAAE,CACP,QAAA,EAAAA,WAAK,CAAC,EAAE;MAIT,YAAY,GAAGJ,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAGD,uBAAM,CAACK,SAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;;;;;"}

package/dist/components/ToastsLayout/components/styled.d.ts DELETED Viewed

@@ -1,10 +0,0 @@
-export declare const ToastsLayoutContainer: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps, never>;
-export declare const Toast: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps & {
-    minWidth: number | string;
-    last: boolean;
-}, never>;
-export declare const IconWrap: import("styled-components").StyledComponent<"div", any, {
-    color: string;
-}, never>;
-export declare const ContentStack: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps, never>;
-export declare const StyledText: import("styled-components").StyledComponent<"span", any, {} & import("../../Text/types").TextProps, never>;

package/dist/components/ToastsLayout/components/styled.js DELETED Viewed

@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-import { Stack } from '../../Stack/Stack.js';
-import { BaseContainer } from '../../BaseContainer/BaseContainer.js';
-import { Text } from '../../Text/Text.js';
-import { theme } from '../../../theme/index.js';
-import { sizes } from '../../../theme/modules/sizes.js';
-const ToastsLayoutContainer = styled(Stack).withConfig({ displayName: "vui--ToastsLayoutContainer", componentId: "vui--1iztsl9" }) `position:fixed;bottom:24px;width:100%;pointer-events:none;z-index:${theme.layers.tooltip};`;
-const Toast = styled(Stack).withConfig({ displayName: "vui--Toast", componentId: "vui--1o64628" }) `background-color:${theme.colors.neutral.ink.dark};padding:12px 24px 12px 12px;box-shadow:${theme.shadows.lg};border-radius:${theme.radius.md};pointer-events:auto;z-index:40;min-width:${({ minWidth }) => minWidth};max-width:80vw;&.veeqo-components-toast-enter{transform:translateY(12px);opacity:0;}&.veeqo-components-toast-enter-active{transform:translateY(0);opacity:1;transition:500ms ease;}&.veeqo-components-toast-exit{transform:${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};opacity:1;}&.veeqo-components-toast-exit-active{transform:${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};opacity:0;transition:500ms ease;}`;
-const IconWrap = styled(BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--1nmtetq" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.md};height:${sizes.md};}`;
-const ContentStack = styled(Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--fvpujj" }) `flex-grow:1;`;
-const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--ppieao" }) `color:white;font-size:16px;`;
-export { ContentStack, IconWrap, StyledText, Toast, ToastsLayoutContainer };
-//# sourceMappingURL=styled.js.map

package/dist/components/ToastsLayout/components/styled.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"styled.js","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n position: fixed;\n bottom: 24px;\n width: 100%;\n pointer-events: none;\n z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n minWidth: number | string;\n last: boolean;\n}>`\n background-color: ${theme.colors.neutral.ink.dark};\n padding: 12px 24px 12px 12px;\n box-shadow: ${theme.shadows.lg};\n border-radius: ${theme.radius.md};\n pointer-events: auto;\n z-index: 40;\n min-width: ${({ minWidth }) => minWidth};\n max-width: 80vw;\n\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: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n opacity: 1;\n }\n\n &.veeqo-components-toast-exit-active {\n transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n opacity: 0;\n transition: 500ms ease;\n }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n height: 40px;\n width: 40px;\n border-radius: ${theme.radius.md};\n background-color: ${({ color }) => color};\n color: #fff;\n\n svg {\n width: ${sizes.md};\n height: ${sizes.md};\n }\n`;\n\nexport const ContentStack = styled(Stack)`\n flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n color: white;\n font-size: 16px;\n`;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrC,KAAK,CAAC,MAAM,CAAC,OAAO;AAGpB,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAIZ,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAEnC,wCAAA,EAAA,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACb,KAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAexB,4NAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1B,KAAK,CAAC,MAAM,CAAC,EAAE,CACZ,kBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAI7B,sBAAA,EAAA,KAAK,CAAC,EAAE,CACP,QAAA,EAAA,KAAK,CAAC,EAAE;MAIT,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;"}