@veeqo/ui 9.0.0-beta-3 → 9.0.0

package/dist/components/Avatar/Avatar.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 import { AvatarProps } from './types';
 export declare const Avatar: ({ width, name, bgColor, textColor, }: AvatarProps) => React.JSX.Element;
-//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Avatar/Avatar.js

@@ -1,2 +1,12 @@
-import e from"react";import{theme as o}from"../../theme/index.js";import{AvatarSC as t}from"./styled.js";const r=({width:r="40px",name:a="Veeqo",bgColor:l=o.colors.secondary.blue.base,textColor:m="#ffffff"})=>{const s=a.toUpperCase().match(/\b(\w)/g);return e.createElement(t,{width:r,bgColor:l,textColor:m,className:"avatar"},null==s?void 0:s.slice(0,2).map(((o,t)=>e.createElement("span",{key:`${o}-${t}`},o))))};export{r as Avatar};
+import React from 'react';
+import { theme } from '../../theme/index.js';
+import { AvatarSC } from './styled.js';
+
+/* eslint-disable react/no-array-index-key */
+const Avatar = ({ width = '40px', name = 'Veeqo', bgColor = theme.colors.secondary.blue.base, textColor = '#ffffff', }) => {
+    const userInitials = name.toUpperCase().match(/\b(\w)/g);
+    return (React.createElement(AvatarSC, { width: width, bgColor: bgColor, textColor: textColor, className: "avatar" }, userInitials === null || userInitials === undefined ? undefined : userInitials.slice(0, 2).map((initial, i) => React.createElement("span", { key: `${initial}-${i}` }, initial))));
+};
+
+export { Avatar };
 //# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAAA;AAOO,MAAM,MAAM,GAAG,CAAC,EACrB,KAAK,GAAG,MAAM,EACd,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAC1C,SAAS,GAAG,SAAS,GACT,KAAI;IAChB,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC;IAExD,QACE,KAAC,CAAA,aAAA,CAAA,QAAQ,EAAC,EAAA,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,QAAQ,EAC/E,EAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,CACT,KAAK,CAAC,CAAC,EAAE,CAAC,CAAA,CACX,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,GAAG,EAAE,CAAA,EAAG,OAAO,CAAA,CAAA,EAAI,CAAC,CAAA,CAAE,EAAG,EAAA,OAAO,CAAQ,CAAC,CAC7D;AAEf;;;;"}

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

@@ -1,2 +1 @@
 export { Avatar } from './Avatar';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Avatar/styled.cjs

@@ -1,21 +1,13 @@
-"use strict";var e=require("styled-components"),t=require("../../theme/index.cjs");function o(e){return e&&e.__esModule?e:{default:e}}const l=o(e).default.div`
-  width: ${e=>e.width};
-  height: ${e=>e.width};
-  border: 3px solid ${t.theme.colors.neutral.grey.base};
-  color: ${e=>e.textColor};
-  background-color: ${e=>e.bgColor};
-  cursor: pointer;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-size: cover;
+'use strict';
 
-  span {
-    font-family: ${t.theme.text.bodySmallBold.fontFamily};
-    font-weight: ${t.theme.text.bodySmallBold.fontWeight};
-    font-size: ${t.theme.text.bodySmallBold.fontSize};
-    line-height: ${t.theme.text.bodySmallBold.lineHeight};
-  }
-`;exports.AvatarSC=l;
+var styled = require('styled-components');
+var index = require('../../theme/index.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const AvatarSC = styled__default.default.div.withConfig({ displayName: "vui--AvatarSC", componentId: "vui--1gxc5tv" }) `width:${(props) => props.width};height:${(props) => props.width};border:3px solid ${index.theme.colors.neutral.grey.base};color:${(props) => props.textColor};background-color:${(props) => props.bgColor};cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center;background-size:cover;span{font-family:${index.theme.text.bodySmallBold.fontFamily};font-weight:${index.theme.text.bodySmallBold.fontWeight};font-size:${index.theme.text.bodySmallBold.fontSize};line-height:${index.theme.text.bodySmallBold.lineHeight};}`;
+
+exports.AvatarSC = AvatarSC;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Avatar/styled.ts"],"sourcesContent":[null],"names":["styled","theme"],"mappings":";;;;;;;;;AAIa,MAAA,QAAQ,GAAGA,uBAAM,CAAC,GAAG,CACvB,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA,QAAA,EACrB,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,qBACZC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACzC,OAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS,CAAA,kBAAA,EACf,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAA,gIAAA,EAS3BA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,aAAA,EACnCA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,WAAA,EACrCA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAC/B,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU;;;;"}

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

@@ -1,3 +1,2 @@
 import { AvatarSCProps } from './types';
 export declare const AvatarSC: import("styled-components").StyledComponent<"div", any, AvatarSCProps, never>;
-//# sourceMappingURL=styled.d.ts.map

package/dist/components/Avatar/styled.js

@@ -1,21 +1,7 @@
-import o from"styled-components";import{theme as t}from"../../theme/index.js";const e=o.div`
-  width: ${o=>o.width};
-  height: ${o=>o.width};
-  border: 3px solid ${t.colors.neutral.grey.base};
-  color: ${o=>o.textColor};
-  background-color: ${o=>o.bgColor};
-  cursor: pointer;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-size: cover;
+import styled from 'styled-components';
+import { theme } from '../../theme/index.js';
 
-  span {
-    font-family: ${t.text.bodySmallBold.fontFamily};
-    font-weight: ${t.text.bodySmallBold.fontWeight};
-    font-size: ${t.text.bodySmallBold.fontSize};
-    line-height: ${t.text.bodySmallBold.lineHeight};
-  }
-`;export{e as AvatarSC};
+const AvatarSC = styled.div.withConfig({ displayName: "vui--AvatarSC", componentId: "vui--1gxc5tv" }) `width:${(props) => props.width};height:${(props) => props.width};border:3px solid ${theme.colors.neutral.grey.base};color:${(props) => props.textColor};background-color:${(props) => props.bgColor};cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center;background-size:cover;span{font-family:${theme.text.bodySmallBold.fontFamily};font-weight:${theme.text.bodySmallBold.fontWeight};font-size:${theme.text.bodySmallBold.fontSize};line-height:${theme.text.bodySmallBold.lineHeight};}`;
+
+export { AvatarSC };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Avatar/styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIa,MAAA,QAAQ,GAAG,MAAM,CAAC,GAAG,CACvB,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA,QAAA,EACrB,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,qBACZ,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CACzC,OAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS,CAAA,kBAAA,EACf,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAA,gIAAA,EAS3B,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,aAAA,EACnC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,WAAA,EACrC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAC/B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU;;;;"}

package/dist/components/Avatar/types.d.ts

@@ -9,4 +9,3 @@ export interface AvatarSCProps {
     bgColor: string;
     textColor: string;
 }
-//# sourceMappingURL=types.d.ts.map

package/dist/components/Badge/Badge.cjs

@@ -1,2 +1,26 @@
-"use strict";var e=require("react"),a=require("../Tooltip/Tooltip.cjs"),t=require("./styled.cjs"),r=require("../../utils/buildClassnames.cjs");function l(e){return e&&e.__esModule?e:{default:e}}var s=l(e);const i={default:t.DefaultBadge,primary:t.PrimaryBadge,warning:t.WarningBadge};exports.Badge=({variant:e="default",hideBorder:t=!1,iconSlot:l,tooltip:n,className:u,e2eClassName:d,children:o})=>{const c=i[e];return s.default.createElement(a.Tooltip,{text:n},s.default.createElement(c,{className:r.buildClassnames([u,d]),hideBorder:t},l&&l,o&&s.default.createElement("span",null,o)))};
+'use strict';
+
+var React = require('react');
+var Tooltip = require('../Tooltip/Tooltip.cjs');
+var styled = require('./styled.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const variantMap = {
+    default: styled.DefaultBadge,
+    primary: styled.PrimaryBadge,
+    warning: styled.WarningBadge,
+};
+const Badge = ({ variant = 'default', hideBorder = false, iconSlot, tooltip, className, e2eClassName, children, }) => {
+    const BadgeVariant = variantMap[variant];
+    return (React__default.default.createElement(Tooltip.Tooltip, { text: tooltip },
+        React__default.default.createElement(BadgeVariant, { className: buildClassnames.buildClassnames([className, e2eClassName]), hideBorder: hideBorder },
+            iconSlot && iconSlot,
+            children && React__default.default.createElement("span", null, children))));
+};
+
+exports.Badge = Badge;
 //# sourceMappingURL=Badge.cjs.map

package/dist/components/Badge/Badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"Badge.cjs","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":[null],"names":["DefaultBadge","PrimaryBadge","WarningBadge","React","Tooltip","buildClassnames"],"mappings":";;;;;;;;;;;AAOA,MAAM,UAAU,GAAG;AACjB,IAAA,OAAO,EAAEA,mBAAY;AACrB,IAAA,OAAO,EAAEC,mBAAY;AACrB,IAAA,OAAO,EAAEC,mBAAY;CACtB;AAEY,MAAA,KAAK,GAAG,CAAC,EACpB,OAAO,GAAG,SAAS,EACnB,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,QAAQ,GACG,KAAI;AACf,IAAA,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC;AAExC,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EAAC,EAAA,IAAI,EAAE,OAAO,EAAA;AACpB,QAAAD,sBAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAEE,+BAAe,CAAC,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,EAAA;AACxF,YAAA,QAAQ,IAAI,QAAQ;AACpB,YAAA,QAAQ,IAAIF,sBAAO,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,QAAQ,CAAQ,CACvB,CACP;AAEd;;;;"}

package/dist/components/Badge/Badge.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 import { BadgeProps } from './types';
 export declare const Badge: ({ variant, hideBorder, iconSlot, tooltip, className, e2eClassName, children, }: BadgeProps) => React.JSX.Element;
-//# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge/Badge.js

@@ -1,2 +1,20 @@
-import e from"react";import{Tooltip as t}from"../Tooltip/Tooltip.js";import{DefaultBadge as r,PrimaryBadge as o,WarningBadge as a}from"./styled.js";import{buildClassnames as l}from"../../utils/buildClassnames.js";const s={default:r,primary:o,warning:a},i=({variant:r="default",hideBorder:o=!1,iconSlot:a,tooltip:i,className:m,e2eClassName:n,children:c})=>{const p=s[r];return e.createElement(t,{text:i},e.createElement(p,{className:l([m,n]),hideBorder:o},a&&a,c&&e.createElement("span",null,c)))};export{i as Badge};
+import React from 'react';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { DefaultBadge, PrimaryBadge, WarningBadge } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+
+const variantMap = {
+    default: DefaultBadge,
+    primary: PrimaryBadge,
+    warning: WarningBadge,
+};
+const Badge = ({ variant = 'default', hideBorder = false, iconSlot, tooltip, className, e2eClassName, children, }) => {
+    const BadgeVariant = variantMap[variant];
+    return (React.createElement(Tooltip, { text: tooltip },
+        React.createElement(BadgeVariant, { className: buildClassnames([className, e2eClassName]), hideBorder: hideBorder },
+            iconSlot && iconSlot,
+            children && React.createElement("span", null, children))));
+};
+
+export { Badge };
 //# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA,MAAM,UAAU,GAAG;AACjB,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,OAAO,EAAE,YAAY;CACtB;AAEY,MAAA,KAAK,GAAG,CAAC,EACpB,OAAO,GAAG,SAAS,EACnB,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,QAAQ,GACG,KAAI;AACf,IAAA,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC;AAExC,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,IAAI,EAAE,OAAO,EAAA;AACpB,QAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAE,eAAe,CAAC,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,EAAA;AACxF,YAAA,QAAQ,IAAI,QAAQ;AACpB,YAAA,QAAQ,IAAI,KAAO,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,QAAQ,CAAQ,CACvB,CACP;AAEd;;;;"}

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

@@ -1,2 +1 @@
 export { Badge } from './Badge';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Badge/styled.cjs

@@ -1,35 +1,21 @@
-"use strict";var e=require("styled-components"),o=require("../BaseContainer/BaseContainer.cjs"),r=require("../../theme/modules/text.cjs"),s=require("../../theme/modules/colors.cjs"),l=require("../../theme/modules/sizes.cjs");function a(e){return e&&e.__esModule?e:{default:e}}var t=a(e);const d=t.default(o.BaseContainer)`
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-  gap: 4px;
-  padding: 0.35em 0.65em;
+'use strict';
 
-  font-family: ${r.text.bodySmall.fontFamily};
-  font-weight: ${r.text.bodySmall.fontWeight};
-  font-size: 75%;
-  line-height: 16px;
+var styled = require('styled-components');
+var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
+var text = require('../../theme/modules/text.cjs');
+var colors = require('../../theme/modules/colors.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
 
-  border-radius: 0.75rem;
-  border: ${e=>e.hideBorder?"none":"1px solid transparent"};
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-  cursor: default;
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-  svg {
-    width: ${l.sizes.base};
-    height: ${l.sizes.base};
-  }
-`,n=t.default(d)`
-  background-color: inherit;
-  border-color: ${s.colors.secondary.blue.base};
-  color: ${s.colors.secondary.blue.base};
-`,c=t.default(d)`
-  border-color: ${s.colors.secondary.blue.base};
-  background-color: ${s.colors.secondary.blue.lightest};
-  color: ${s.colors.secondary.blue.base};
-`,i=t.default(d)`
-  border-color: ${s.colors.secondary.yellow.base};
-  background-color: ${s.colors.secondary.yellow.lightest};
-  color: ${s.colors.secondary.orange.dark};
-`;exports.DefaultBadge=n,exports.PrimaryBadge=c,exports.WarningBadge=i;
+const BaseBadge = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--BaseBadge", componentId: "vui--1l3fzu" }) `display:inline-flex;align-items:center;vertical-align:middle;gap:4px;padding:0.35em 0.65em;font-family:${text.text.bodySmall.fontFamily};font-weight:${text.text.bodySmall.fontWeight};font-size:75%;line-height:16px;border-radius:0.75rem;border:${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};cursor:default;svg{width:${sizes.sizes.base};height:${sizes.sizes.base};}`;
+const DefaultBadge = styled__default.default(BaseBadge).withConfig({ displayName: "vui--DefaultBadge", componentId: "vui--rwc6j0" }) `background-color:inherit;border-color:${colors.colors.secondary.blue.base};color:${colors.colors.secondary.blue.base};`;
+const PrimaryBadge = styled__default.default(BaseBadge).withConfig({ displayName: "vui--PrimaryBadge", componentId: "vui--1fakkjy" }) `border-color:${colors.colors.secondary.blue.base};background-color:${colors.colors.secondary.blue.lightest};color:${colors.colors.secondary.blue.base};`;
+const WarningBadge = styled__default.default(BaseBadge).withConfig({ displayName: "vui--WarningBadge", componentId: "vui--1r2egf1" }) `border-color:${colors.colors.secondary.yellow.base};background-color:${colors.colors.secondary.yellow.lightest};color:${colors.colors.secondary.orange.dark};`;
+
+exports.DefaultBadge = DefaultBadge;
+exports.PrimaryBadge = PrimaryBadge;
+exports.WarningBadge = WarningBadge;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Badge/styled.ts"],"sourcesContent":[null],"names":["BaseBadge","styled","BaseContainer"],"mappings":"+RA6CA,MAAOA,EAAAC,EAAAA,QAAkBC,EAAAA,cAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Badge/styled.ts"],"sourcesContent":[null],"names":["styled","BaseContainer","text","sizes","colors"],"mappings":";;;;;;;;;;;;AAUA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uGAAA,EAOtBC,SAAI,CAAC,SAAS,CAAC,UAAU,CAAA,aAAA,EACzBA,SAAI,CAAC,SAAS,CAAC,UAAU,CAAA,6DAAA,EAK9B,CAAC,KAAK,MAAM,KAAK,CAAC,UAAU,GAAG,MAAM,GAAG,uBAAuB,CAAC,CAAA,0BAAA,EAK/DC,WAAK,CAAC,IAAI,WACTA,WAAK,CAAC,IAAI,CAAA,EAAA,CAEvB;AAEY,MAAA,YAAY,GAAGH,uBAAM,CAAC,SAAS,CAAC,CAE3B,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAAAI,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,OAAA,EACjCA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,CAAA;AAG9B,MAAM,YAAY,GAAGJ,uBAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAC3BI,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CACtB,kBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,OAAA,EACzCA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAG9B,MAAM,YAAY,GAAGJ,uBAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAC3BI,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CACxB,kBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAA,OAAA,EAC3CA,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;;;"}

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

@@ -5,4 +5,3 @@ export declare const DefaultBadge: import("styled-components").StyledComponent<"
 export declare const PrimaryBadge: import("styled-components").StyledComponent<"div", any, BaseBadgeProps, never>;
 export declare const WarningBadge: import("styled-components").StyledComponent<"div", any, BaseBadgeProps, never>;
 export {};
-//# sourceMappingURL=styled.d.ts.map

package/dist/components/Badge/styled.js

@@ -1,35 +1,13 @@
-import e from"styled-components";import{BaseContainer as o}from"../BaseContainer/BaseContainer.js";import{text as r}from"../../theme/modules/text.js";import{colors as l}from"../../theme/modules/colors.js";import{sizes as s}from"../../theme/modules/sizes.js";const a=e(o)`
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-  gap: 4px;
-  padding: 0.35em 0.65em;
-
-  font-family: ${r.bodySmall.fontFamily};
-  font-weight: ${r.bodySmall.fontWeight};
-  font-size: 75%;
-  line-height: 16px;
-
-  border-radius: 0.75rem;
-  border: ${e=>e.hideBorder?"none":"1px solid transparent"};
-
-  cursor: default;
-
-  svg {
-    width: ${s.base};
-    height: ${s.base};
-  }
-`,t=e(a)`
-  background-color: inherit;
-  border-color: ${l.secondary.blue.base};
-  color: ${l.secondary.blue.base};
-`,n=e(a)`
-  border-color: ${l.secondary.blue.base};
-  background-color: ${l.secondary.blue.lightest};
-  color: ${l.secondary.blue.base};
-`,d=e(a)`
-  border-color: ${l.secondary.yellow.base};
-  background-color: ${l.secondary.yellow.lightest};
-  color: ${l.secondary.orange.dark};
-`;export{t as DefaultBadge,n as PrimaryBadge,d as WarningBadge};
+import styled from 'styled-components';
+import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+import { text } from '../../theme/modules/text.js';
+import { colors } from '../../theme/modules/colors.js';
+import { sizes } from '../../theme/modules/sizes.js';
+
+const BaseBadge = styled(BaseContainer).withConfig({ displayName: "vui--BaseBadge", componentId: "vui--1l3fzu" }) `display:inline-flex;align-items:center;vertical-align:middle;gap:4px;padding:0.35em 0.65em;font-family:${text.bodySmall.fontFamily};font-weight:${text.bodySmall.fontWeight};font-size:75%;line-height:16px;border-radius:0.75rem;border:${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};cursor:default;svg{width:${sizes.base};height:${sizes.base};}`;
+const DefaultBadge = styled(BaseBadge).withConfig({ displayName: "vui--DefaultBadge", componentId: "vui--rwc6j0" }) `background-color:inherit;border-color:${colors.secondary.blue.base};color:${colors.secondary.blue.base};`;
+const PrimaryBadge = styled(BaseBadge).withConfig({ displayName: "vui--PrimaryBadge", componentId: "vui--1fakkjy" }) `border-color:${colors.secondary.blue.base};background-color:${colors.secondary.blue.lightest};color:${colors.secondary.blue.base};`;
+const WarningBadge = styled(BaseBadge).withConfig({ displayName: "vui--WarningBadge", componentId: "vui--1r2egf1" }) `border-color:${colors.secondary.yellow.base};background-color:${colors.secondary.yellow.lightest};color:${colors.secondary.orange.dark};`;
+
+export { DefaultBadge, PrimaryBadge, WarningBadge };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Badge/styled.ts"],"sourcesContent":[null],"names":["BaseBadge","styled","BaseContainer"],"mappings":"kQA6CA,MAAOA,EAAAC,EAAkBC,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Badge/styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAUA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uGAAA,EAOtB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,aAAA,EACzB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,6DAAA,EAK9B,CAAC,KAAK,MAAM,KAAK,CAAC,UAAU,GAAG,MAAM,GAAG,uBAAuB,CAAC,CAAA,0BAAA,EAK/D,KAAK,CAAC,IAAI,WACT,KAAK,CAAC,IAAI,CAAA,EAAA,CAEvB;AAEY,MAAA,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAE3B,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,OAAA,EACjC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,CAAA;AAG9B,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAC3B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CACtB,kBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,OAAA,EACzC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAG9B,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAC3B,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CACxB,kBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAA,OAAA,EAC3C,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;"}

package/dist/components/Badge/types.d.ts

@@ -33,4 +33,3 @@ export type BadgeProps = {
      */
     children: React.ReactNode;
 };
-//# sourceMappingURL=types.d.ts.map

package/dist/components/Banner/Banner.cjs

@@ -1,2 +1,34 @@
-"use strict";var e=require("react"),l=require("../../theme/modules/colors.cjs"),t=require("./styled.cjs"),r=require("../Button/Button.cjs"),a=require("../../tempIcons/CrossIcon.cjs"),n=require("../../theme/modules/sizes.cjs");function o(e){return e&&e.__esModule?e:{default:e}}var c=o(e);const s={help:l.colors.secondary.blue.base,info:l.colors.neutral.ink.base,error:l.colors.secondary.red.base,success:l.colors.secondary.green.base};exports.Banner=({type:e="info",text:l,iconSlot:o,onClose:u,className:d,header:i,children:m,backgroundColor:f="white",...C})=>{const E=s[e];return c.default.createElement(t.Pill,{accentColor:E,className:d,backgroundColor:f,...C},c.default.createElement(t.Row,null,o&&c.default.createElement(t.IconCol,{style:{marginRight:n.sizes.md},accentColor:E},o),m?c.default.createElement(t.ChildContainer,null,m):c.default.createElement(c.default.Fragment,null,c.default.createElement(t.HeaderCol,null,i||c.default.createElement(t.Text,{variant:"headingSmall"},l)),c.default.createElement(t.Col,null,u&&c.default.createElement(r.Button,{variant:"flat","aria-label":"Close",iconSlot:c.default.createElement(a.CrossIcon,null),onClick:u})))))};
+'use strict';
+
+var React = require('react');
+var colors = require('../../theme/modules/colors.cjs');
+var styled = require('./styled.cjs');
+var Button = require('../Button/Button.cjs');
+var CrossIcon = require('../../tempIcons/CrossIcon.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const accentColors = {
+    help: colors.colors.secondary.blue.base,
+    info: colors.colors.neutral.ink.base,
+    error: colors.colors.secondary.red.base,
+    success: colors.colors.secondary.green.base,
+};
+/**
+ * The `Banner` component was previously called `Alert` (and similarly `Pill`).
+ */
+const Banner = ({ type = 'info', text, iconSlot, onClose, className, header, children, backgroundColor = 'white', ...props }) => {
+    const accentColor = accentColors[type];
+    return (React__default.default.createElement(styled.Pill, { accentColor: accentColor, className: className, backgroundColor: backgroundColor, ...props },
+        React__default.default.createElement(styled.Row, null,
+            iconSlot && (React__default.default.createElement(styled.IconCol, { style: { marginRight: sizes.sizes.md }, accentColor: accentColor }, iconSlot)),
+            children ? (React__default.default.createElement(styled.ChildContainer, null, children)) : (React__default.default.createElement(React__default.default.Fragment, null,
+                React__default.default.createElement(styled.HeaderCol, null, header || React__default.default.createElement(styled.Text, { variant: "headingSmall" }, text)),
+                React__default.default.createElement(styled.Col, null, onClose && (React__default.default.createElement(Button.Button, { variant: "flat", "aria-label": "Close", iconSlot: React__default.default.createElement(CrossIcon.CrossIcon, null), onClick: onClose }))))))));
+};
+
+exports.Banner = Banner;
 //# sourceMappingURL=Banner.cjs.map

package/dist/components/Banner/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":[null],"names":["accentColors","help","colors","secondary","blue","base","info","neutral","ink","error","red","success","green","type","text","iconSlot","onClose","className","header","children","backgroundColor","props"],"mappings":"sSAsBUA,EAAG,CACXC,KAAOC,EAAGA,OAAAC,UAAAC,KAAkBC,KAC5BC,KAASJ,EAAGA,OAAAK,QAAOC,IAAAH,KACnBI,MAAOP,EAAEA,OAAAC,UAAUO,IAAAL,KACnBM,QAAST,EAAEA,OAAAC,UAAUS,MAAAP,qBAMV,EAAAQ,OAUV,OAAAC,OAAAC,WAAAC,UAAAC,YAAAC,SAAAC,WAAAC,kBAAA,WAAAC"}
+{"version":3,"file":"Banner.cjs","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":[null],"names":["colors","React","Pill","Row","IconCol","sizes","ChildContainer","HeaderCol","Text","Col","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAEA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAChC,IAAA,IAAI,EAAEA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAC7B,IAAA,KAAK,EAAEA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;AAChC,IAAA,OAAO,EAAEA,aAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;CACrC;AAaD;;AAEG;AACI,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,MAAM,EACN,QAAQ,EACR,eAAe,GAAG,OAAO,EACzB,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,MAAM,WAAW,GAAG,YAAY,CAAC,IAAmB,CAAC;AAErD,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,WAAI,EACH,EAAA,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,KAC5B,KAAK,EAAA;AAET,QAAAD,sBAAA,CAAA,aAAA,CAACE,UAAG,EAAA,IAAA;YACD,QAAQ,KACPF,sBAAC,CAAA,aAAA,CAAAG,cAAO,IAAC,KAAK,EAAE,EAAE,WAAW,EAAEC,WAAK,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,WAAW,EAAA,EAChE,QAAQ,CACD,CACX;AACA,YAAA,QAAQ,IACPJ,sBAAC,CAAA,aAAA,CAAAK,qBAAc,EAAE,IAAA,EAAA,QAAQ,CAAkB,KAE3CL,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;AACE,gBAAAA,sBAAA,CAAA,aAAA,CAACM,gBAAS,EAAA,IAAA,EAAE,MAAM,IAAIN,sBAAC,CAAA,aAAA,CAAAO,WAAI,EAAC,EAAA,OAAO,EAAC,cAAc,EAAE,EAAA,IAAI,CAAQ,CAAa;AAC7E,gBAAAP,sBAAA,CAAA,aAAA,CAACQ,UAAG,EAAA,IAAA,EACD,OAAO,KACNR,sBAAA,CAAA,aAAA,CAACS,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EAAA,YAAA,EACH,OAAO,EAClB,QAAQ,EAAET,sBAAA,CAAA,aAAA,CAACU,mBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACG,CACL,CACJ,CACG,CACD;AAEX;;;;"}

package/dist/components/Banner/Banner.d.ts

@@ -15,4 +15,3 @@ type BannerProps = {
  */
 export declare const Banner: ({ type, text, iconSlot, onClose, className, header, children, backgroundColor, ...props }: BannerProps) => React.JSX.Element;
 export {};
-//# sourceMappingURL=Banner.d.ts.map

package/dist/components/Banner/Banner.js

@@ -1,2 +1,28 @@
-import e from"react";import{colors as t}from"../../theme/modules/colors.js";import{Pill as r,Row as l,IconCol as o,ChildContainer as n,HeaderCol as a,Text as s,Col as c}from"./styled.js";import{Button as m}from"../Button/Button.js";import{CrossIcon as i}from"../../tempIcons/CrossIcon.js";import{sizes as u}from"../../theme/modules/sizes.js";const d={help:t.secondary.blue.base,info:t.neutral.ink.base,error:t.secondary.red.base,success:t.secondary.green.base},p=({type:t="info",text:p,iconSlot:E,onClose:f,className:b,header:h,children:C,backgroundColor:g="white",...y})=>{const j=d[t];return e.createElement(r,{accentColor:j,className:b,backgroundColor:g,...y},e.createElement(l,null,E&&e.createElement(o,{style:{marginRight:u.md},accentColor:j},E),C?e.createElement(n,null,C):e.createElement(e.Fragment,null,e.createElement(a,null,h||e.createElement(s,{variant:"headingSmall"},p)),e.createElement(c,null,f&&e.createElement(m,{variant:"flat","aria-label":"Close",iconSlot:e.createElement(i,null),onClick:f})))))};export{p as Banner};
+import React from 'react';
+import { colors } from '../../theme/modules/colors.js';
+import { Pill as BannerLayout, Row, IconCol, ChildContainer, HeaderCol, Text as StyledText, Col } from './styled.js';
+import { Button } from '../Button/Button.js';
+import { CrossIcon } from '../../tempIcons/CrossIcon.js';
+import { sizes } from '../../theme/modules/sizes.js';
+
+const accentColors = {
+    help: colors.secondary.blue.base,
+    info: colors.neutral.ink.base,
+    error: colors.secondary.red.base,
+    success: colors.secondary.green.base,
+};
+/**
+ * The `Banner` component was previously called `Alert` (and similarly `Pill`).
+ */
+const Banner = ({ type = 'info', text, iconSlot, onClose, className, header, children, backgroundColor = 'white', ...props }) => {
+    const accentColor = accentColors[type];
+    return (React.createElement(BannerLayout, { accentColor: accentColor, className: className, backgroundColor: backgroundColor, ...props },
+        React.createElement(Row, null,
+            iconSlot && (React.createElement(IconCol, { style: { marginRight: sizes.md }, accentColor: accentColor }, iconSlot)),
+            children ? (React.createElement(ChildContainer, null, children)) : (React.createElement(React.Fragment, null,
+                React.createElement(HeaderCol, null, header || React.createElement(StyledText, { variant: "headingSmall" }, text)),
+                React.createElement(Col, null, onClose && (React.createElement(Button, { variant: "flat", "aria-label": "Close", iconSlot: React.createElement(CrossIcon, null), onClick: onClose }))))))));
+};
+
+export { Banner };
 //# sourceMappingURL=Banner.js.map

package/dist/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":[null],"names":["accentColors","help","colors","secondary","blue","base","info","neutral","ink","error","red","success","green","Banner","type","text","iconSlot","onClose","className","header","children","backgroundColor","props"],"mappings":"4VAsBUA,EAAG,CACXC,KAAOC,EAAGC,UAAAC,KAAkBC,KAC5BC,KAASJ,EAAGK,QAAOC,IAAAH,KACnBI,MAAOP,EAAEC,UAAUO,IAAAL,KACnBM,QAAST,EAAEC,UAAUS,MAAAP,MAMvBQ,EAAa,EAAAC,OAUV,OAAAC,OAAAC,WAAAC,UAAAC,YAAAC,SAAAC,WAAAC,kBAAA,WAAAC"}
+{"version":3,"file":"Banner.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":[null],"names":["Pill","Text"],"mappings":";;;;;;;AAWA,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAChC,IAAA,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAC7B,IAAA,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;AAChC,IAAA,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;CACrC;AAaD;;AAEG;AACI,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,MAAM,EACN,QAAQ,EACR,eAAe,GAAG,OAAO,EACzB,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,MAAM,WAAW,GAAG,YAAY,CAAC,IAAmB,CAAC;AAErD,IAAA,QACE,KAAC,CAAA,aAAA,CAAAA,YAAI,EACH,EAAA,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,KAC5B,KAAK,EAAA;AAET,QAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,IAAA;YACD,QAAQ,KACP,KAAC,CAAA,aAAA,CAAA,OAAO,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,WAAW,EAAA,EAChE,QAAQ,CACD,CACX;AACA,YAAA,QAAQ,IACP,KAAC,CAAA,aAAA,CAAA,cAAc,EAAE,IAAA,EAAA,QAAQ,CAAkB,KAE3C,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;AACE,gBAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,EAAE,MAAM,IAAI,KAAC,CAAA,aAAA,CAAAC,UAAI,EAAC,EAAA,OAAO,EAAC,cAAc,EAAE,EAAA,IAAI,CAAQ,CAAa;AAC7E,gBAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,IAAA,EACD,OAAO,KACN,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM,EAAA,YAAA,EACH,OAAO,EAClB,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,EAAA,CAChB,CACH,CACG,CACL,CACJ,CACG,CACD;AAEX;;;;"}

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

@@ -1,2 +1 @@
 export { Banner } from './Banner';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Banner/styled.cjs

@@ -1,33 +1,30 @@
-"use strict";var e=require("styled-components"),t=require("../Text/Text.cjs"),r=require("../BaseContainer/BaseContainer.cjs"),o=require("../../theme/modules/sizes.cjs");function i(e){return e&&e.__esModule?e:{default:e}}var a=i(e);const s=a.default(r.BaseContainer)`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-  padding: 20px 24px 24px 24px;
-  border-radius: 4px;
-  ${({accentColor:e})=>e&&`\n      box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${e};\n    `}
-  background-color: ${({backgroundColor:e})=>e||"white"};
-`,n=a.default(r.BaseContainer)`
-  display: flex;
-  flex-direction: row;
-`,l=a.default(r.BaseContainer)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
-`,x=a.default(l)`
-  svg {
-    width: ${o.sizes.md};
-    height: ${o.sizes.md};
-    color: ${({accentColor:e})=>e};
-  }
-`,d=a.default(r.BaseContainer)`
-  width: 100%;
-`,p=a.default(l)`
-  flex-grow: 2;
-  margin-right: 12px;
-`,c=a.default(t.Text)`
-  position: relative;
-  top: -2px;
-`;exports.ChildContainer=d,exports.Col=l,exports.HeaderCol=p,exports.IconCol=x,exports.Pill=s,exports.Row=n,exports.Text=c;
+'use strict';
+
+var styled = require('styled-components');
+var Text = require('../Text/Text.cjs');
+var BaseContainer = require('../BaseContainer/BaseContainer.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 BannerLayout = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--BannerLayout", componentId: "vui--c6sp3u" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:20px 24px 24px 24px;border-radius:4px;${({ accentColor }) => accentColor &&
+    `
+      box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};
+    `} background-color:${({ backgroundColor }) => backgroundColor || 'white'};`;
+const Row = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--1rdjrmx" }) `display:flex;flex-direction:row;`;
+const Col = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Col", componentId: "vui--1ttgibs" }) `display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;`;
+const IconCol = styled__default.default(Col).withConfig({ displayName: "vui--IconCol", componentId: "vui--1z6c5f" }) `svg{width:${sizes.sizes.md};height:${sizes.sizes.md};color:${({ accentColor }) => accentColor};}`;
+const ChildContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--ChildContainer", componentId: "vui--kn3qcr" }) `width:100%;`;
+const HeaderCol = styled__default.default(Col).withConfig({ displayName: "vui--HeaderCol", componentId: "vui--1nlkkdb" }) `flex-grow:2;margin-right:12px;`;
+const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--1ioilg" }) `position:relative;top:-2px;`;
+
+exports.ChildContainer = ChildContainer;
+exports.Col = Col;
+exports.HeaderCol = HeaderCol;
+exports.IconCol = IconCol;
+exports.Pill = BannerLayout;
+exports.Row = Row;
+exports.Text = StyledText;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Banner/styled.ts"],"sourcesContent":[null],"names":["accentColor","backgroundColor"],"mappings":";;;;;;;uBAwCEA,GAEK,6EAIQA;sBAUU,EAAAC,qBAAwBA,GAAY;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Banner/styled.ts"],"sourcesContent":[null],"names":["styled","BaseContainer","sizes","Text"],"mappings":";;;;;;;;;;;AAOA,MAAM,YAAY,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,gIAAA,EAOtC,CAAC,EAAE,WAAW,EAAE,KAChB,WAAW;AACX,IAAA;0EACsE,WAAW,CAAA;KAChF,CACiB,kBAAA,EAAA,CAAC,EAAE,eAAe,EAAE,KAAK,eAAe,IAAI,OAAO,CAAA,CAAA;AAGzE,MAAM,GAAG,GAAGD,uBAAM,CAACC,2BAAa,CAAC;AAKjC,MAAM,GAAG,GAAGD,uBAAM,CAACC,2BAAa,CAAC;AAOpB,MAAA,OAAO,GAAGD,uBAAM,CAAC,GAAG,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAErBE,WAAK,CAAC,EAAE,CAAA,QAAA,EACPA,WAAK,CAAC,EAAE,CACT,OAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,EAAA;MAIhC,cAAc,GAAGF,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,WAAA;AAInD,MAAM,SAAS,GAAGD,uBAAM,CAAC,GAAG,CAAC;AAK7B,MAAM,UAAU,GAAGA,uBAAM,CAACG,SAAI,CAAC;;;;;;;;;;"}

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

@@ -14,4 +14,3 @@ export declare const ChildContainer: import("styled-components").StyledComponent
 declare const HeaderCol: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledText: import("styled-components").StyledComponent<"span", any, {} & import("../Text/types").TextProps, never>;
 export { BannerLayout as Pill, StyledText as Text, Row, Col, HeaderCol };
-//# sourceMappingURL=styled.d.ts.map

package/dist/components/Banner/styled.js

@@ -1,33 +1,18 @@
-import o from"styled-components";import{Text as e}from"../Text/Text.js";import{BaseContainer as t}from"../BaseContainer/BaseContainer.js";import{sizes as r}from"../../theme/modules/sizes.js";const i=o(t)`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-  padding: 20px 24px 24px 24px;
-  border-radius: 4px;
-  ${({accentColor:o})=>o&&`\n      box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${o};\n    `}
-  background-color: ${({backgroundColor:o})=>o||"white"};
-`,p=o(t)`
-  display: flex;
-  flex-direction: row;
-`,x=o(t)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
-`,n=o(x)`
-  svg {
-    width: ${r.md};
-    height: ${r.md};
-    color: ${({accentColor:o})=>o};
-  }
-`,s=o(t)`
-  width: 100%;
-`,l=o(x)`
-  flex-grow: 2;
-  margin-right: 12px;
-`,a=o(e)`
-  position: relative;
-  top: -2px;
-`;export{s as ChildContainer,x as Col,l as HeaderCol,n as IconCol,i as Pill,p as Row,a as Text};
+import styled from 'styled-components';
+import { Text } from '../Text/Text.js';
+import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+import { sizes } from '../../theme/modules/sizes.js';
+
+const BannerLayout = styled(BaseContainer).withConfig({ displayName: "vui--BannerLayout", componentId: "vui--c6sp3u" }) `display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:20px 24px 24px 24px;border-radius:4px;${({ accentColor }) => accentColor &&
+    `
+      box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};
+    `} background-color:${({ backgroundColor }) => backgroundColor || 'white'};`;
+const Row = styled(BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--1rdjrmx" }) `display:flex;flex-direction:row;`;
+const Col = styled(BaseContainer).withConfig({ displayName: "vui--Col", componentId: "vui--1ttgibs" }) `display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;`;
+const IconCol = styled(Col).withConfig({ displayName: "vui--IconCol", componentId: "vui--1z6c5f" }) `svg{width:${sizes.md};height:${sizes.md};color:${({ accentColor }) => accentColor};}`;
+const ChildContainer = styled(BaseContainer).withConfig({ displayName: "vui--ChildContainer", componentId: "vui--kn3qcr" }) `width:100%;`;
+const HeaderCol = styled(Col).withConfig({ displayName: "vui--HeaderCol", componentId: "vui--1nlkkdb" }) `flex-grow:2;margin-right:12px;`;
+const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--1ioilg" }) `position:relative;top:-2px;`;
+
+export { ChildContainer, Col, HeaderCol, IconCol, BannerLayout as Pill, Row, StyledText as Text };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Banner/styled.ts"],"sourcesContent":[null],"names":["accentColor","backgroundColor"],"mappings":";;;;;;;uBAwCEA,GAEK,6EAIQA;sBAUU,EAAAC,qBAAwBA,GAAY;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Banner/styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA,MAAM,YAAY,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,gIAAA,EAOtC,CAAC,EAAE,WAAW,EAAE,KAChB,WAAW;AACX,IAAA;0EACsE,WAAW,CAAA;KAChF,CACiB,kBAAA,EAAA,CAAC,EAAE,eAAe,EAAE,KAAK,eAAe,IAAI,OAAO,CAAA,CAAA;AAGzE,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAKjC,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAOpB,MAAA,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAErB,KAAK,CAAC,EAAE,CAAA,QAAA,EACP,KAAK,CAAC,EAAE,CACT,OAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA,EAAA;MAIhC,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,WAAA;AAInD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC;AAK7B,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC;;;;"}

package/dist/components/Banner/types.d.ts

@@ -6,4 +6,3 @@ export type PillProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElem
     accentColor?: string;
     backgroundColor?: string;
 };
-//# sourceMappingURL=types.d.ts.map

package/dist/components/BaseContainer/BaseContainer.cjs

@@ -1,7 +1,12 @@
-"use strict";function e(e){return e&&e.__esModule?e:{default:e}}const t=e(require("styled-components")).default.div`
-  box-sizing: border-box;
-  position: relative;
-  margin: 0;
-  padding: 0;
-`;exports.BaseContainer=t;
+'use strict';
+
+var styled = require('styled-components');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const BaseContainer = styled__default.default.div.withConfig({ displayName: "vui--BaseContainer", componentId: "vui--jtpszk" }) `box-sizing:border-box;position:relative;margin:0;padding:0;`;
+
+exports.BaseContainer = BaseContainer;
 //# sourceMappingURL=BaseContainer.cjs.map

package/dist/components/BaseContainer/BaseContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseContainer.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"BaseContainer.cjs","sources":["../../../src/components/BaseContainer/BaseContainer.ts"],"sourcesContent":[null],"names":["styled"],"mappings":";;;;;;;;MAEa,aAAa,GAAGA,uBAAM,CAAC,GAAG;;;;"}