@veeqo/ui 9.0.0-beta-3 → 9.0.0

package/dist/components/SegmentedControl/styled.cjs

@@ -1,45 +1,17 @@
-"use strict";var e=require("styled-components"),o=require("../../theme/index.cjs"),r=require("../BaseContainer/BaseContainer.cjs");function t(e){return e&&e.__esModule?e:{default:e}}var n=t(e);const s=o.theme.colors.neutral.grey.lightest,a=o.theme.colors.neutral.grey.dark,d=o.theme.colors.secondary.blue.dark,l=n.default(r.BaseContainer)`
-  display: flex;
-  flex-direction: row;
+'use strict';
 
-  > button {
-    border-radius: 0;
-    box-shadow: none;
+var styled = require('styled-components');
+var index = require('../../theme/index.cjs');
+var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
 
-    :active {
-      background-color: ${s};
-      border-color: ${a};
-      box-shadow: none;
-    }
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-    :focus {
-      box-shadow: 0 0 0 4px ${o.theme.colors.secondary.blue.light};
-      outline: 0;
-      z-index: 1;
-    }
-  }
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-  > .veeqo-components-active-button {
-    :active {
-      background-color: ${d};
-      border-color: ${d};
-    }
-  }
+const buttonBackgroundColor = index.theme.colors.neutral.grey.lightest;
+const buttonBorderColor = index.theme.colors.neutral.grey.dark;
+const activeButtonColor = index.theme.colors.secondary.blue.dark;
+const SegmentedControlContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--SegmentedControlContainer", componentId: "vui--s4yyqq" }) `display:flex;flex-direction:row;> button{border-radius:0;box-shadow:none;:active{background-color:${buttonBackgroundColor};border-color:${buttonBorderColor};box-shadow:none;}:focus{box-shadow:0 0 0 4px ${index.theme.colors.secondary.blue.light};outline:0;z-index:1;}}> .veeqo-components-active-button{:active{background-color:${activeButtonColor};border-color:${activeButtonColor};}}> button:not(:first-child){border-left:none;}> .veeqo-components-active-button + button{border-left:1px solid ${index.theme.colors.neutral.grey.dark};}> button:first-child{border-radius:20px 0px 0px 20px;}> button:last-child{border-radius:0px 20px 20px 0px;}`;
 
-  > button:not(:first-child) {
-    border-left: none;
-  }
-
-  > .veeqo-components-active-button + button {
-    border-left: 1px solid ${o.theme.colors.neutral.grey.dark};
-  }
-
-  > button:first-child {
-    border-radius: 20px 0px 0px 20px;
-  }
-
-  > button:last-child {
-    border-radius: 0px 20px 20px 0px;
-  }
-`;exports.SegmentedControlContainer=l;
+exports.SegmentedControlContainer = SegmentedControlContainer;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/SegmentedControl/styled.ts"],"sourcesContent":[null],"names":["theme","styled","BaseContainer"],"mappings":";;;;;;;;;;AAKA,MAAM,qBAAqB,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAChE,MAAM,iBAAiB,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAExD,MAAM,iBAAiB,GAAGA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAE7C,MAAA,yBAAyB,GAAGC,uBAAM,CAACC,2BAAa,CAAC,CASpC,UAAA,CAAA,EAAA,WAAA,EAAA,gCAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,kGAAA,EAAA,qBAAqB,iBACzB,iBAAiB,CAAA,8CAAA,EAKTF,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,kFAAA,EAQrC,iBAAiB,CAAA,cAAA,EACrB,iBAAiB,CASV,iHAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}

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

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

package/dist/components/SegmentedControl/styled.js

@@ -1,45 +1,11 @@
-import o from"styled-components";import{theme as r}from"../../theme/index.js";import{BaseContainer as e}from"../BaseContainer/BaseContainer.js";const t=r.colors.neutral.grey.lightest,n=r.colors.neutral.grey.dark,d=r.colors.secondary.blue.dark,s=o(e)`
-  display: flex;
-  flex-direction: row;
+import styled from 'styled-components';
+import { theme } from '../../theme/index.js';
+import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 
-  > button {
-    border-radius: 0;
-    box-shadow: none;
+const buttonBackgroundColor = theme.colors.neutral.grey.lightest;
+const buttonBorderColor = theme.colors.neutral.grey.dark;
+const activeButtonColor = theme.colors.secondary.blue.dark;
+const SegmentedControlContainer = styled(BaseContainer).withConfig({ displayName: "vui--SegmentedControlContainer", componentId: "vui--s4yyqq" }) `display:flex;flex-direction:row;> button{border-radius:0;box-shadow:none;:active{background-color:${buttonBackgroundColor};border-color:${buttonBorderColor};box-shadow:none;}:focus{box-shadow:0 0 0 4px ${theme.colors.secondary.blue.light};outline:0;z-index:1;}}> .veeqo-components-active-button{:active{background-color:${activeButtonColor};border-color:${activeButtonColor};}}> button:not(:first-child){border-left:none;}> .veeqo-components-active-button + button{border-left:1px solid ${theme.colors.neutral.grey.dark};}> button:first-child{border-radius:20px 0px 0px 20px;}> button:last-child{border-radius:0px 20px 20px 0px;}`;
 
-    :active {
-      background-color: ${t};
-      border-color: ${n};
-      box-shadow: none;
-    }
-
-    :focus {
-      box-shadow: 0 0 0 4px ${r.colors.secondary.blue.light};
-      outline: 0;
-      z-index: 1;
-    }
-  }
-
-  > .veeqo-components-active-button {
-    :active {
-      background-color: ${d};
-      border-color: ${d};
-    }
-  }
-
-  > button:not(:first-child) {
-    border-left: none;
-  }
-
-  > .veeqo-components-active-button + button {
-    border-left: 1px solid ${r.colors.neutral.grey.dark};
-  }
-
-  > button:first-child {
-    border-radius: 20px 0px 0px 20px;
-  }
-
-  > button:last-child {
-    border-radius: 0px 20px 20px 0px;
-  }
-`;export{s as SegmentedControlContainer};
+export { SegmentedControlContainer };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/SegmentedControl/styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAKA,MAAM,qBAAqB,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAChE,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAExD,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAE7C,MAAA,yBAAyB,GAAG,MAAM,CAAC,aAAa,CAAC,CASpC,UAAA,CAAA,EAAA,WAAA,EAAA,gCAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,kGAAA,EAAA,qBAAqB,iBACzB,iBAAiB,CAAA,8CAAA,EAKT,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,kFAAA,EAQrC,iBAAiB,CAAA,cAAA,EACrB,iBAAiB,CASV,iHAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}

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

@@ -11,4 +11,3 @@ export type SegmentedControlProps = {
     onChange: (selectedButton: string) => void;
 };
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/components/Select/Select.cjs

@@ -1,2 +1,23 @@
-"use strict";var e=require("react"),a=require("./styled.cjs"),l=require("../../hoc/withLabels/withLabels.cjs");function r(e){return e&&e.__esModule?e:{default:e}}var t=r(e);const s=l.withLabels(e.forwardRef((({className:l,options:r,value:s,onChange:i,size:d,disabled:n,hasError:u,...c},o)=>{const b=e.useCallback((e=>{i&&i(e.currentTarget.value)}),[i]);return t.default.createElement(a.SelectInput,{className:l,sizeVariant:d,value:null!=s?s:void 0,onChange:b,disabled:n,hasError:u,ref:o,...c},!!r&&r.map((e=>t.default.createElement("option",{key:e.label,value:e.value,disabled:e.disabled,hidden:e.hidden},e.label))))})));s.displayName="Select",exports.Select=s;
+'use strict';
+
+var React = require('react');
+var styled = require('./styled.cjs');
+var withLabels = require('../../hoc/withLabels/withLabels.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Select = withLabels.withLabels(React.forwardRef(({ className, options, value, onChange, size, disabled, hasError, ...otherProps }, ref) => {
+    const handleChange = React.useCallback((e) => {
+        if (!onChange)
+            return;
+        onChange(e.currentTarget.value);
+    }, [onChange]);
+    return (React__default.default.createElement(styled.SelectInput, { className: className, sizeVariant: size, value: value !== null && value !== undefined ? value : undefined, onChange: handleChange, disabled: disabled, hasError: hasError, ref: ref, ...otherProps }, !!options &&
+        options.map((option) => (React__default.default.createElement("option", { key: option.label, value: option.value, disabled: option.disabled, hidden: option.hidden }, option.label)))));
+}));
+Select.displayName = 'Select';
+
+exports.Select = Select;
 //# sourceMappingURL=Select.cjs.map

package/dist/components/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":["withLabels","forwardRef","className","options","value","onChange","size","disabled","hasError","otherProps","ref","handleChange","useCallback","e","currentTarget","React","default","createElement","SelectInput","sizeVariant","undefined","map","option","key","label","hidden","Select","displayName"],"mappings":"qLAOgBA,EAAAA,WAAAC,EAAAA,YAAA,EAAAC,YAAAC,UAAAC,QAAAC,WAAAC,OAAAC,WAAAC,cAAAC,GAAAC,KACd,MAAQC,EAAWC,eAAAC,IACVR,GAGMA,EAAAQ,EAAAC,cACPV,MAAA,GACL,CAAEC,IACL,OAASU,EAAGC,QAAAC,cAAOC,cAAA,CAAAhB,UAAAA,EAAAiB,YAAAb,EAAAF,MAAAA,QAAAA,OAAAgB,EAAAf,SAAAM,EAAAJ,SAAAA,EAAAC,SAAAA,EAAAE,IAAAA,KAAAD,KAAAN,GACnBA,EAASkB,KAAMC,GAAcP,UAAAE,cAAA,SAAA,CAAAM,IAAAD,EAAAE,MAAApB,MAAAkB,EAAAlB,MAAAG,SAAAe,EAAAf,SAAAkB,OAAAH,EAAAG,QAAAH,EAAAE,SAAA,KAE7BE,EAAAC"}
+{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":["withLabels","forwardRef","useCallback","React","SelectInput"],"mappings":";;;;;;;;;;AAwBO,MAAM,MAAM,GAAGA,qBAAU,CAC9BC,gBAAU,CACR,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAe,EAC7F,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,kBAAW,IACV,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,KAAK,aAAL,KAAK,KAAA,SAAA,GAAL,KAAK,GAAI,SAAS,EACzB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EAEb,EAAA,CAAC,CAAC,OAAO;AACR,QAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACjBD,iDACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAEpB,EAAA,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACQ;AAElB,CAAC,CACF;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/dist/components/Select/Select.d.ts

@@ -16,4 +16,3 @@ export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectE
     onChange?: (value: string) => void;
 }
 export declare const Select: React.FC<SelectProps & React.RefAttributes<HTMLSelectElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps>;
-//# sourceMappingURL=Select.d.ts.map

package/dist/components/Select/Select.js

@@ -1,2 +1,17 @@
-import e,{forwardRef as a,useCallback as l}from"react";import{SelectInput as r}from"./styled.js";import{withLabels as s}from"../../hoc/withLabels/withLabels.js";const t=s(a((({className:a,options:s,value:t,onChange:o,size:i,disabled:n,hasError:d,...m},c)=>{const h=l((e=>{o&&o(e.currentTarget.value)}),[o]);return e.createElement(r,{className:a,sizeVariant:i,value:null!=t?t:void 0,onChange:h,disabled:n,hasError:d,ref:c,...m},!!s&&s.map((a=>e.createElement("option",{key:a.label,value:a.value,disabled:a.disabled,hidden:a.hidden},a.label))))})));t.displayName="Select";export{t as Select};
+import React, { forwardRef, useCallback } from 'react';
+import { SelectInput } from './styled.js';
+import { withLabels } from '../../hoc/withLabels/withLabels.js';
+
+const Select = withLabels(forwardRef(({ className, options, value, onChange, size, disabled, hasError, ...otherProps }, ref) => {
+    const handleChange = useCallback((e) => {
+        if (!onChange)
+            return;
+        onChange(e.currentTarget.value);
+    }, [onChange]);
+    return (React.createElement(SelectInput, { className: className, sizeVariant: size, value: value !== null && value !== undefined ? value : undefined, onChange: handleChange, disabled: disabled, hasError: hasError, ref: ref, ...otherProps }, !!options &&
+        options.map((option) => (React.createElement("option", { key: option.label, value: option.value, disabled: option.disabled, hidden: option.hidden }, option.label)))));
+}));
+Select.displayName = 'Select';
+
+export { Select };
 //# sourceMappingURL=Select.js.map

package/dist/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":["withLabels","forwardRef","className","options","value","onChange","size","disabled","hasError","otherProps","ref","handleChange","useCallback","e","currentTarget","React","createElement","SelectInput","sizeVariant","undefined","map","option","key","label","hidden","Select","displayName"],"mappings":"yKAOgBA,EAAAC,GAAA,EAAAC,YAAAC,UAAAC,QAAAC,WAAAC,OAAAC,WAAAC,cAAAC,GAAAC,KACd,MAAQC,EAAWC,GAAAC,IACVR,GAGMA,EAAAQ,EAAAC,cACPV,MAAA,GACL,CAAEC,IACL,OAASU,EAAGC,cAAOC,EAAA,CAAAf,UAAAA,EAAAgB,YAAAZ,EAAAF,MAAAA,QAAAA,OAAAe,EAAAd,SAAAM,EAAAJ,SAAAA,EAAAC,SAAAA,EAAAE,IAAAA,KAAAD,KAAAN,GACnBA,EAASiB,KAAMC,GAAcN,EAAAC,cAAA,SAAA,CAAAM,IAAAD,EAAAE,MAAAnB,MAAAiB,EAAAjB,MAAAG,SAAAc,EAAAd,SAAAiB,OAAAH,EAAAG,QAAAH,EAAAE,SAAA,KAE7BE,EAAAC"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAwBO,MAAM,MAAM,GAAG,UAAU,CAC9B,UAAU,CACR,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAe,EAC7F,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAiC,KAAI;AACpC,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;AACjC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,WAAW,IACV,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,KAAK,aAAL,KAAK,KAAA,SAAA,GAAL,KAAK,GAAI,SAAS,EACzB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EAEb,EAAA,CAAC,CAAC,OAAO;AACR,QAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACjB,gCACE,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAEpB,EAAA,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACQ;AAElB,CAAC,CACF;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

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

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

package/dist/components/Select/styled.cjs

@@ -1,40 +1,23 @@
-"use strict";function e(e){return e&&e.__esModule?e:{default:e}}const o=e(require("styled-components")).default.select`
-  box-sizing: border-box;
-  appearance: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 2.5rem 0 0.5rem;
-  border-radius: 4px;
-  background-color: white;
-  border: 1px solid #959fa8;
-  color: #1b2126;
-  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position:
-    right 0.5em top 50%,
-    0 0;
+'use strict';
 
-  ${({sizeVariant:e})=>{let o="40px",r="14px";return"sm"===e&&(o="32px",r="12px"),`\n      height: ${o};\n      font-size: ${r};\n    `}}
+var styled = require('styled-components');
 
-  &:focus {
-    border-color: #0079d1;
-    box-shadow: 0 0 0 4px #80bce8;
-    outline: 0;
-  }
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-  &:invalid {
-    border-color: #eb5757;
-    box-shadow: 0 0 0 4px #f7bcbc;
-    outline: 0;
-  }
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-  &:disabled {
-    box-shadow: none;
-    background-color: #f2f3f5;
-    border-color: #959fa8;
-    color: #637381;
-    cursor: not-allowed;
-  }
-`;exports.SelectInput=o;
+const SelectInput = styled__default.default.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--1v4mu6a" }) `box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:center;padding:0 2.5rem 0 0.5rem;border-radius:4px;background-color:white;border:1px solid #959fa8;color:#1b2126;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5em top 50%,0 0;${({ sizeVariant }) => {
+    let height = '40px';
+    let fontSize = '14px';
+    if (sizeVariant === 'sm') {
+        height = '32px';
+        fontSize = '12px';
+    }
+    return `
+      height: ${height};
+      font-size: ${fontSize};
+    `;
+}} &:focus{border-color:#0079d1;box-shadow:0 0 0 4px #80bce8;outline:0;}&:invalid{border-color:#eb5757;box-shadow:0 0 0 4px #f7bcbc;outline:0;}&:disabled{box-shadow:none;background-color:#f2f3f5;border-color:#959fa8;color:#637381;cursor:not-allowed;}`;
+
+exports.SelectInput = SelectInput;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Select/styled.ts"],"sourcesContent":[null],"names":["styled"],"mappings":";;;;;;;;AAEO,MAAM,WAAW,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,ogBAAA,EAiBpC,CAAC,EAAE,WAAW,EAAE,KAAI;IACpB,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,QAAQ,GAAG,MAAM;IAErB,IAAI,WAAW,KAAK,IAAI,EAAE;QACxB,MAAM,GAAG,MAAM;QACf,QAAQ,GAAG,MAAM;AAClB;IAED,OAAO;gBACK,MAAM,CAAA;mBACH,QAAQ,CAAA;KACtB;AACH,CAAC;;;;"}

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

@@ -1,2 +1 @@
 export declare const SelectInput: import("styled-components").StyledComponent<"select", any, any, never>;
-//# sourceMappingURL=styled.d.ts.map

package/dist/components/Select/styled.js

@@ -1,40 +1,17 @@
-import o from"styled-components";const e=o.select`
-  box-sizing: border-box;
-  appearance: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 2.5rem 0 0.5rem;
-  border-radius: 4px;
-  background-color: white;
-  border: 1px solid #959fa8;
-  color: #1b2126;
-  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position:
-    right 0.5em top 50%,
-    0 0;
+import styled from 'styled-components';
 
-  ${({sizeVariant:o})=>{let e="40px",r="14px";return"sm"===o&&(e="32px",r="12px"),`\n      height: ${e};\n      font-size: ${r};\n    `}}
+const SelectInput = styled.select.withConfig({ displayName: "vui--SelectInput", componentId: "vui--1v4mu6a" }) `box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:center;padding:0 2.5rem 0 0.5rem;border-radius:4px;background-color:white;border:1px solid #959fa8;color:#1b2126;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5em top 50%,0 0;${({ sizeVariant }) => {
+    let height = '40px';
+    let fontSize = '14px';
+    if (sizeVariant === 'sm') {
+        height = '32px';
+        fontSize = '12px';
+    }
+    return `
+      height: ${height};
+      font-size: ${fontSize};
+    `;
+}} &:focus{border-color:#0079d1;box-shadow:0 0 0 4px #80bce8;outline:0;}&:invalid{border-color:#eb5757;box-shadow:0 0 0 4px #f7bcbc;outline:0;}&:disabled{box-shadow:none;background-color:#f2f3f5;border-color:#959fa8;color:#637381;cursor:not-allowed;}`;
 
-  &:focus {
-    border-color: #0079d1;
-    box-shadow: 0 0 0 4px #80bce8;
-    outline: 0;
-  }
-
-  &:invalid {
-    border-color: #eb5757;
-    box-shadow: 0 0 0 4px #f7bcbc;
-    outline: 0;
-  }
-
-  &:disabled {
-    box-shadow: none;
-    background-color: #f2f3f5;
-    border-color: #959fa8;
-    color: #637381;
-    cursor: not-allowed;
-  }
-`;export{e as SelectInput};
+export { SelectInput };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Select/styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEO,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,ogBAAA,EAiBpC,CAAC,EAAE,WAAW,EAAE,KAAI;IACpB,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,QAAQ,GAAG,MAAM;IAErB,IAAI,WAAW,KAAK,IAAI,EAAE;QACxB,MAAM,GAAG,MAAM;QACf,QAAQ,GAAG,MAAM;AAClB;IAED,OAAO;gBACK,MAAM,CAAA;mBACH,QAAQ,CAAA;KACtB;AACH,CAAC;;;;"}

package/dist/components/ShortcutKeys/ShortcutKeys.cjs

@@ -1,2 +1,45 @@
-"use strict";var e=require("react"),t=require("./styled.cjs"),a=require("./utils.cjs");function l(e){return e&&e.__esModule?e:{default:e}}var r=l(e);exports.ShortcutKeys=({shortcut:e,label:l,inverse:u=!1,displayLabel:i=!1,...s})=>{const d=e.split("+").map((e=>a.ValidModifierKeysMap[e]?r.default.createElement(t.Kbd,{key:`Key: ${e}`,"aria-label":a.ValidModifierKeyssLabelMap[e]},a.ValidModifierKeysMap[e]):r.default.createElement(t.Kbd,{key:`Key: ${e}`},e))).reduce(((e,t)=>r.default.createElement(r.default.Fragment,null,e,"+",t)));return r.default.createElement(t.ShortcutKeysContainer,{"aria-label":l,$inverse:u,...s},d," ",i?r.default.createElement("span",null,l):null)};
+'use strict';
+
+var React = require('react');
+var styled = require('./styled.cjs');
+var utils = require('./utils.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/**
+ * ShortcutKeys UI component
+ *
+ * Renders a keyboard shortcut string by splitting it on "+" and rendering each
+ * key to a <kbd> component.
+ *
+ * Criteria for `shortcut` prop:
+ * - ValidModifierKeys MUST always come before other keys e.g. `shift+a` is valid, `a+shift` is invalid
+ * - If it's not a modifier key it must be a singular key e.g. `a`, `2` is valid and `a2` or `abcde` is invalid etc.
+ * - A limit of 3 key combinations separated between the '+' symbol e.g. `shift+ctrl+a` is valid, `shift+ctrl+a+b` is invalid
+ *
+ */
+const ShortcutKeys = ({ shortcut, label, inverse = false, displayLabel = false, ...props }) => {
+    // Split the keys into individual <Kbd /> components
+    const keysToRender = shortcut.split('+');
+    // Replace modifier keys with the corresponding UTF-16 character if available.
+    const keysToRenderComponents = keysToRender.map((key) => {
+        if (utils.ValidModifierKeysMap[key]) {
+            return (React__default.default.createElement(styled.Kbd, { key: `Key: ${key}`, "aria-label": utils.ValidModifierKeyssLabelMap[key] }, utils.ValidModifierKeysMap[key]));
+        }
+        return React__default.default.createElement(styled.Kbd, { key: `Key: ${key}` }, key);
+    });
+    // Combine the <Kbd /> components to sit inside a single <ShortcutKeysContainer /> component.
+    const shortcutElements = keysToRenderComponents.reduce((previousKbdElement, currentKbdElement) => (React__default.default.createElement(React__default.default.Fragment, null,
+        previousKbdElement,
+        "+",
+        currentKbdElement)));
+    return (React__default.default.createElement(styled.ShortcutKeysContainer, { "aria-label": label, "$inverse": inverse, ...props },
+        shortcutElements,
+        " ",
+        displayLabel ? React__default.default.createElement("span", null, label) : null));
+};
+
+exports.ShortcutKeys = ShortcutKeys;
 //# sourceMappingURL=ShortcutKeys.cjs.map

package/dist/components/ShortcutKeys/ShortcutKeys.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutKeys.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"ShortcutKeys.cjs","sources":["../../../src/components/ShortcutKeys/ShortcutKeys.tsx"],"sourcesContent":[null],"names":["ValidModifierKeysMap","React","Kbd","ValidModifierKeyssLabelMap","ShortcutKeysContainer"],"mappings":";;;;;;;;;;AAKA;;;;;;;;;;;AAWG;MACU,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,KAAK,EACf,YAAY,GAAG,KAAK,EACpB,GAAG,KAAK,EACU,KAAI;;IAEtB,MAAM,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAwB;;IAG/D,MAAM,sBAAsB,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,KAAI;AACtD,QAAA,IAAIA,0BAAoB,CAAC,GAAG,CAAC,EAAE;YAC7B,QACEC,qCAACC,UAAG,EAAA,EAAC,GAAG,EAAE,CAAA,KAAA,EAAQ,GAAG,CAAE,CAAA,EAAA,YAAA,EAAcC,gCAA0B,CAAC,GAAG,CAAC,EACjE,EAAAH,0BAAoB,CAAC,GAAG,CAAC,CACtB;AAET;QACD,OAAOC,sBAAA,CAAA,aAAA,CAACC,UAAG,EAAA,EAAC,GAAG,EAAE,CAAQ,KAAA,EAAA,GAAG,CAAE,CAAA,EAAA,EAAG,GAAG,CAAO;AAC7C,KAAC,CAAC;;AAGF,IAAA,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,MAAM,CACpD,CAAC,kBAAkB,EAAE,iBAAiB,MACpCD,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;QACG,kBAAkB;;QAAG,iBAAiB,CACtC,CACJ,CACF;IAED,QACEA,qCAACG,4BAAqB,EAAA,EAAA,YAAA,EAAa,KAAK,EAAY,UAAA,EAAA,OAAO,KAAM,KAAK,EAAA;QACnE,gBAAgB;;AAAG,QAAA,YAAY,GAAGH,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,IAAI,CACxC;AAE5B;;;;"}

package/dist/components/ShortcutKeys/ShortcutKeys.d.ts

@@ -13,4 +13,3 @@ import { ShortcutKeysProps } from './types';
  *
  */
 export declare const ShortcutKeys: ({ shortcut, label, inverse, displayLabel, ...props }: ShortcutKeysProps) => React.JSX.Element;
-//# sourceMappingURL=ShortcutKeys.d.ts.map

package/dist/components/ShortcutKeys/ShortcutKeys.js

@@ -1,2 +1,39 @@
-import e from"react";import{Kbd as t,ShortcutKeysContainer as l}from"./styled.js";import{ValidModifierKeysMap as r,ValidModifierKeyssLabelMap as a}from"./utils.js";const n=({shortcut:n,label:m,inverse:s=!1,displayLabel:c=!1,...i})=>{const o=n.split("+").map((l=>r[l]?e.createElement(t,{key:`Key: ${l}`,"aria-label":a[l]},r[l]):e.createElement(t,{key:`Key: ${l}`},l))).reduce(((t,l)=>e.createElement(e.Fragment,null,t,"+",l)));return e.createElement(l,{"aria-label":m,$inverse:s,...i},o," ",c?e.createElement("span",null,m):null)};export{n as ShortcutKeys};
+import React from 'react';
+import { Kbd, ShortcutKeysContainer } from './styled.js';
+import { ValidModifierKeysMap, ValidModifierKeyssLabelMap } from './utils.js';
+
+/**
+ * ShortcutKeys UI component
+ *
+ * Renders a keyboard shortcut string by splitting it on "+" and rendering each
+ * key to a <kbd> component.
+ *
+ * Criteria for `shortcut` prop:
+ * - ValidModifierKeys MUST always come before other keys e.g. `shift+a` is valid, `a+shift` is invalid
+ * - If it's not a modifier key it must be a singular key e.g. `a`, `2` is valid and `a2` or `abcde` is invalid etc.
+ * - A limit of 3 key combinations separated between the '+' symbol e.g. `shift+ctrl+a` is valid, `shift+ctrl+a+b` is invalid
+ *
+ */
+const ShortcutKeys = ({ shortcut, label, inverse = false, displayLabel = false, ...props }) => {
+    // Split the keys into individual <Kbd /> components
+    const keysToRender = shortcut.split('+');
+    // Replace modifier keys with the corresponding UTF-16 character if available.
+    const keysToRenderComponents = keysToRender.map((key) => {
+        if (ValidModifierKeysMap[key]) {
+            return (React.createElement(Kbd, { key: `Key: ${key}`, "aria-label": ValidModifierKeyssLabelMap[key] }, ValidModifierKeysMap[key]));
+        }
+        return React.createElement(Kbd, { key: `Key: ${key}` }, key);
+    });
+    // Combine the <Kbd /> components to sit inside a single <ShortcutKeysContainer /> component.
+    const shortcutElements = keysToRenderComponents.reduce((previousKbdElement, currentKbdElement) => (React.createElement(React.Fragment, null,
+        previousKbdElement,
+        "+",
+        currentKbdElement)));
+    return (React.createElement(ShortcutKeysContainer, { "aria-label": label, "$inverse": inverse, ...props },
+        shortcutElements,
+        " ",
+        displayLabel ? React.createElement("span", null, label) : null));
+};
+
+export { ShortcutKeys };
 //# sourceMappingURL=ShortcutKeys.js.map

package/dist/components/ShortcutKeys/ShortcutKeys.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutKeys.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"ShortcutKeys.js","sources":["../../../src/components/ShortcutKeys/ShortcutKeys.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAKA;;;;;;;;;;;AAWG;MACU,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,KAAK,EACf,YAAY,GAAG,KAAK,EACpB,GAAG,KAAK,EACU,KAAI;;IAEtB,MAAM,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAwB;;IAG/D,MAAM,sBAAsB,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,KAAI;AACtD,QAAA,IAAI,oBAAoB,CAAC,GAAG,CAAC,EAAE;YAC7B,QACE,oBAAC,GAAG,EAAA,EAAC,GAAG,EAAE,CAAA,KAAA,EAAQ,GAAG,CAAE,CAAA,EAAA,YAAA,EAAc,0BAA0B,CAAC,GAAG,CAAC,EACjE,EAAA,oBAAoB,CAAC,GAAG,CAAC,CACtB;AAET;QACD,OAAO,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,GAAG,EAAE,CAAQ,KAAA,EAAA,GAAG,CAAE,CAAA,EAAA,EAAG,GAAG,CAAO;AAC7C,KAAC,CAAC;;AAGF,IAAA,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,MAAM,CACpD,CAAC,kBAAkB,EAAE,iBAAiB,MACpC,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACG,kBAAkB;;QAAG,iBAAiB,CACtC,CACJ,CACF;IAED,QACE,oBAAC,qBAAqB,EAAA,EAAA,YAAA,EAAa,KAAK,EAAY,UAAA,EAAA,OAAO,KAAM,KAAK,EAAA;QACnE,gBAAgB;;AAAG,QAAA,YAAY,GAAG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,IAAI,CACxC;AAE5B;;;;"}

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

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

package/dist/components/ShortcutKeys/styled.cjs

@@ -1,31 +1,15 @@
-"use strict";var e=require("styled-components"),t=require("../../theme/index.cjs");function o(e){return e&&e.__esModule?e:{default:e}}var l=o(e);const i=l.default.div`
-  // If the inverse prop is passed, set the variable --kbdTextColor to the inverse color
-  --kbdTextColor: ${e=>e.$inverse?"#ffffff":""};
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--kbdTextColor, ${t.theme.colors.neutral.ink.base});
-  font-family: ${t.theme.text.bodySmall.fontFamily};
-  font-style: ${t.theme.text.bodySmall.fontStyle};
-  font-size: ${t.theme.text.bodySmall.fontSize};
-  line-height: ${t.theme.text.bodySmall.lineHeight};
-  font-weight: ${t.theme.text.bodySmall.fontWeight};
-  text-decoration: ${t.theme.text.bodySmall.textDecoration};
-  letter-spacing: ${t.theme.text.bodySmall.letterSpacing};
-`,r=l.default.kbd`
-  box-sizing: border-box;
-  color: var(--kbdTextColor, ${t.theme.colors.neutral.ink.base});
-  display: grid;
-  place-items: center;
-  text-transform: capitalize;
-  border: 1px solid var(--kbdTextColor, ${t.theme.colors.neutral.ink.base});
-  border-radius: 3px;
-  padding: 1px 3px;
-  font-size: inherit;
-  line-height: inherit;
-  min-width: 20px;
-  font-family: ${t.theme.text.bodySmall.fontFamily};
-  font-style: ${t.theme.text.bodySmall.fontStyle};
-`;exports.Kbd=r,exports.ShortcutKeysContainer=i;
+'use strict';
+
+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 ShortcutKeysContainer = styled__default.default.div.withConfig({ displayName: "vui--ShortcutKeysContainer", componentId: "vui--t1odf6" }) `--kbdTextColor:${(props) => (props.$inverse ? '#ffffff' : '')};box-sizing:border-box;display:flex;align-items:center;gap:4px;color:var(--kbdTextColor, ${index.theme.colors.neutral.ink.base});font-family:${index.theme.text.bodySmall.fontFamily};font-style:${index.theme.text.bodySmall.fontStyle};font-size:${index.theme.text.bodySmall.fontSize};line-height:${index.theme.text.bodySmall.lineHeight};font-weight:${index.theme.text.bodySmall.fontWeight};text-decoration:${index.theme.text.bodySmall.textDecoration};letter-spacing:${index.theme.text.bodySmall.letterSpacing};`;
+const Kbd = styled__default.default.kbd.withConfig({ displayName: "vui--Kbd", componentId: "vui--651mmm" }) `box-sizing:border-box;color:var(--kbdTextColor, ${index.theme.colors.neutral.ink.base});display:grid;place-items:center;text-transform:capitalize;border:1px solid var(--kbdTextColor, ${index.theme.colors.neutral.ink.base});border-radius:3px;padding:1px 3px;font-size:inherit;line-height:inherit;min-width:20px;font-family:${index.theme.text.bodySmall.fontFamily};font-style:${index.theme.text.bodySmall.fontStyle};`;
+
+exports.Kbd = Kbd;
+exports.ShortcutKeysContainer = ShortcutKeysContainer;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/ShortcutKeys/styled.ts"],"sourcesContent":[null],"names":["ShortcutKeysContainer","styled","div"],"mappings":"iJAsBO,MAAAA,EAASC,EAAAA,QAAAC,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/ShortcutKeys/styled.ts"],"sourcesContent":[null],"names":["styled","theme"],"mappings":";;;;;;;;;MAKa,qBAAqB,GAAGA,uBAAM,CAAC,GAAG,yGAE3B,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,EAAE,CAAC,CAKjC,yFAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,cAAA,EAC3CA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAChC,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,cAC/BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,aAAA,EAC3BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAC/B,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,oBAC3BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,CAAA,gBAAA,EACpCA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAA,CAAA;MAGzC,GAAG,GAAGD,uBAAM,CAAC,GAAG,wHAEEC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAIlB,iGAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,qGAAA,EAMtDA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAChC,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS;;;;;"}

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

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

package/dist/components/ShortcutKeys/styled.js

@@ -1,31 +1,8 @@
-import t from"styled-components";import{theme as e}from"../../theme/index.js";const o=t.div`
-  // If the inverse prop is passed, set the variable --kbdTextColor to the inverse color
-  --kbdTextColor: ${t=>t.$inverse?"#ffffff":""};
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--kbdTextColor, ${e.colors.neutral.ink.base});
-  font-family: ${e.text.bodySmall.fontFamily};
-  font-style: ${e.text.bodySmall.fontStyle};
-  font-size: ${e.text.bodySmall.fontSize};
-  line-height: ${e.text.bodySmall.lineHeight};
-  font-weight: ${e.text.bodySmall.fontWeight};
-  text-decoration: ${e.text.bodySmall.textDecoration};
-  letter-spacing: ${e.text.bodySmall.letterSpacing};
-`,l=t.kbd`
-  box-sizing: border-box;
-  color: var(--kbdTextColor, ${e.colors.neutral.ink.base});
-  display: grid;
-  place-items: center;
-  text-transform: capitalize;
-  border: 1px solid var(--kbdTextColor, ${e.colors.neutral.ink.base});
-  border-radius: 3px;
-  padding: 1px 3px;
-  font-size: inherit;
-  line-height: inherit;
-  min-width: 20px;
-  font-family: ${e.text.bodySmall.fontFamily};
-  font-style: ${e.text.bodySmall.fontStyle};
-`;export{l as Kbd,o as ShortcutKeysContainer};
+import styled from 'styled-components';
+import { theme } from '../../theme/index.js';
+
+const ShortcutKeysContainer = styled.div.withConfig({ displayName: "vui--ShortcutKeysContainer", componentId: "vui--t1odf6" }) `--kbdTextColor:${(props) => (props.$inverse ? '#ffffff' : '')};box-sizing:border-box;display:flex;align-items:center;gap:4px;color:var(--kbdTextColor, ${theme.colors.neutral.ink.base});font-family:${theme.text.bodySmall.fontFamily};font-style:${theme.text.bodySmall.fontStyle};font-size:${theme.text.bodySmall.fontSize};line-height:${theme.text.bodySmall.lineHeight};font-weight:${theme.text.bodySmall.fontWeight};text-decoration:${theme.text.bodySmall.textDecoration};letter-spacing:${theme.text.bodySmall.letterSpacing};`;
+const Kbd = styled.kbd.withConfig({ displayName: "vui--Kbd", componentId: "vui--651mmm" }) `box-sizing:border-box;color:var(--kbdTextColor, ${theme.colors.neutral.ink.base});display:grid;place-items:center;text-transform:capitalize;border:1px solid var(--kbdTextColor, ${theme.colors.neutral.ink.base});border-radius:3px;padding:1px 3px;font-size:inherit;line-height:inherit;min-width:20px;font-family:${theme.text.bodySmall.fontFamily};font-style:${theme.text.bodySmall.fontStyle};`;
+
+export { Kbd, ShortcutKeysContainer };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/ShortcutKeys/styled.ts"],"sourcesContent":[null],"names":["ShortcutKeysContainer","styled","div"],"mappings":"8EAsBO,MAAAA,EAASC,EAAAC,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/ShortcutKeys/styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;;MAKa,qBAAqB,GAAG,MAAM,CAAC,GAAG,yGAE3B,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,EAAE,CAAC,CAKjC,yFAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,cAAA,EAC3C,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAChC,YAAA,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,cAC/B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,aAAA,EAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAC/B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,oBAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,CAAA,gBAAA,EACpC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAA,CAAA;MAGzC,GAAG,GAAG,MAAM,CAAC,GAAG,wHAEE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAIlB,iGAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,qGAAA,EAMtD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAChC,YAAA,EAAA,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS;;;;"}

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

@@ -16,4 +16,3 @@ export type ShortcutAction = {
     mac: ShortcutPatterns;
     windows: ShortcutPatterns;
 };
-//# sourceMappingURL=types.d.ts.map