@veeqo/ui 14.2.0 → 14.3.0-beta-1

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

@@ -1,20 +1,20 @@
 /// <reference types="react" />
-declare const BannerLayout: import("styled-components").StyledComponent<"div", any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+declare const BannerLayout: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     children?: import("react").ReactNode;
     className?: string | undefined;
     accentColor?: string | undefined;
     backgroundColor?: string | undefined;
 }, never>;
-declare const Row: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const Col: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconCol: import("styled-components").StyledComponent<"div", any, {
+declare const Row: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+declare const Col: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const IconCol: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
     accentColor: string;
 }, never>;
-export declare const ChildContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const HeaderCol: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChildContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+declare const HeaderCol: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 declare const StyledText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     as?: import("../Text").ValidTextTag | undefined;
     muted?: boolean | undefined;
-    variant?: "body" | "button" | "link" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholder" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
+    variant?: "placeholder" | "link" | "body" | "button" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
 } & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export { BannerLayout as Pill, StyledText as Text, Row, Col, HeaderCol };

package/dist/components/Banner/styled.js

@@ -3,16 +3,35 @@ 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 &&
+const BannerLayout = styled(BaseContainer).withConfig({
+    shouldForwardProp: (prop) => !['accentColor', 'backgroundColor'].includes(prop),
+}) `
+  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;`;
+    `}
+  background-color: ${({ backgroundColor }) => backgroundColor || 'white'};
+`;
+const Row = styled(BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--efzdvm" }) `display:flex;flex-direction:row;`;
+const Col = styled(BaseContainer).withConfig({ displayName: "vui--Col", componentId: "vui--1c3cv6m" }) `display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;`;
+const IconCol = styled(Col).withConfig({
+    shouldForwardProp: (prop) => !['accentColor'].includes(prop),
+}) `
+  svg {
+    width: ${sizes.md};
+    height: ${sizes.md};
+    color: ${({ accentColor }) => accentColor};
+  }
+`;
+const ChildContainer = styled(BaseContainer).withConfig({ displayName: "vui--ChildContainer", componentId: "vui--1ryyp4c" }) `width:100%;`;
+const HeaderCol = styled(Col).withConfig({ displayName: "vui--HeaderCol", componentId: "vui--2c6441" }) `flex-grow:2;margin-right:12px;`;
+const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--53focc" }) `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":["import styled from 'styled-components';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\nimport { PillProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst BannerLayout = styled(BaseContainer)<PillProps>`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  padding: 20px 24px 24px 24px;\n  border-radius: 4px;\n  ${({ accentColor }) =>\n    accentColor &&\n    `\n      box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};\n    `}\n  background-color: ${({ backgroundColor }) => backgroundColor || 'white'};\n`;\n\nconst Row = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Col = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  flex-wrap: wrap;\n`;\n\nexport const IconCol = styled(Col)<{ accentColor: string }>`\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n    color: ${({ accentColor }) => accentColor};\n  }\n`;\n\nexport const ChildContainer = styled(BaseContainer)`\n  width: 100%;\n`;\n\nconst HeaderCol = styled(Col)`\n  flex-grow: 2;\n  margin-right: 12px;\n`;\n\nconst StyledText = styled(Text)`\n  position: relative;\n  top: -2px;\n`;\n\nexport { BannerLayout as Pill, StyledText as Text, Row, Col, HeaderCol };\n"],"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,CAAA,kBAAA,EACiB,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;AAO1B,MAAM,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,CAAA,OAAA,EACT,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;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Banner/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\nimport { PillProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst BannerLayout = styled(BaseContainer).withConfig({\n  shouldForwardProp: (prop) => !['accentColor', 'backgroundColor'].includes(prop),\n})<PillProps>`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  padding: 20px 24px 24px 24px;\n  border-radius: 4px;\n  ${({ accentColor }) =>\n    accentColor &&\n    `\n      box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};\n    `}\n  background-color: ${({ backgroundColor }) => backgroundColor || 'white'};\n`;\n\nconst Row = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Col = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  flex-wrap: wrap;\n`;\n\nexport const IconCol = styled(Col).withConfig({\n  shouldForwardProp: (prop) => !['accentColor'].includes(prop),\n})<{ accentColor: string }>`\n  svg {\n    width: ${sizes.md};\n    height: ${sizes.md};\n    color: ${({ accentColor }) => accentColor};\n  }\n`;\n\nexport const ChildContainer = styled(BaseContainer)`\n  width: 100%;\n`;\n\nconst HeaderCol = styled(Col)`\n  flex-grow: 2;\n  margin-right: 12px;\n`;\n\nconst StyledText = styled(Text)`\n  position: relative;\n  top: -2px;\n`;\n\nexport { BannerLayout as Pill, StyledText as Text, Row, Col, HeaderCol };\n"],"names":[],"mappings":";;;;;AAOA,MAAM,YAAY,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC;AACpD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAChF,CAAA,CAAC,CAAW;;;;;;;AAOT,EAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAChB,WAAW;AACX,IAAA;0EACsE,WAAW,CAAA;AAChF,IAAA,CAAA;sBACiB,CAAC,EAAE,eAAe,EAAE,KAAK,eAAe,IAAI,OAAO,CAAA;;AAGzE,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAKjC,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAO1B,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC;AAC5C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC7D,CAAA,CAAC,CAAyB;;AAEd,WAAA,EAAA,KAAK,CAAC,EAAE,CAAA;AACP,YAAA,EAAA,KAAK,CAAC,EAAE,CAAA;AACT,WAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA;;;MAIhC,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,WAAA;AAInD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC;AAK7B,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC;;;;"}

package/dist/components/BaseContainer/BaseContainer.cjs

@@ -1,12 +1,16 @@
 'use strict';
 
-var styled = require('styled-components');
+var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var BaseContainer_module = require('./BaseContainer.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const BaseContainer = styled__default.default.div.withConfig({ displayName: "vui--BaseContainer", componentId: "vui--jtpszk" }) `box-sizing:border-box;position:relative;margin:0;padding:0;`;
+const BaseContainer = React__default.default.forwardRef(({ className, children, ...rest }, ref) => (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([BaseContainer_module.base, className]), ref: ref, ...rest }, children)));
+BaseContainer.displayName = 'BaseContainer';
 
 exports.BaseContainer = BaseContainer;
 //# sourceMappingURL=BaseContainer.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseContainer.cjs","sources":["../../../src/components/BaseContainer/BaseContainer.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const BaseContainer = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n`;\n"],"names":["styled"],"mappings":";;;;;;;;MAEa,aAAa,GAAGA,uBAAM,CAAC,GAAG;;;;"}
+{"version":3,"file":"BaseContainer.cjs","sources":["../../../src/components/BaseContainer/BaseContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport styles from './BaseContainer.module.scss';\n\nexport const BaseContainer = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...rest }, ref) => (\n  <div className={buildClassnames([styles.base, className])} ref={ref} {...rest}>\n    {children}\n  </div>\n));\n\nBaseContainer.displayName = 'BaseContainer';\n"],"names":["React","buildClassnames","styles"],"mappings":";;;;;;;;;;;MAIa,aAAa,GAAGA,sBAAK,CAAC,UAAU,CAG3C,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACtCA,8CAAK,SAAS,EAAEC,+BAAe,CAAC,CAACC,oBAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAA,GAAM,IAAI,IAC1E,QAAQ,CACL,CACP;AAED,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}

package/dist/components/BaseContainer/BaseContainer.d.ts

@@ -1 +1,2 @@
-export declare const BaseContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+import React from 'react';
+export declare const BaseContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/BaseContainer/BaseContainer.js

@@ -1,6 +1,10 @@
-import styled from 'styled-components';
+import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './BaseContainer.module.scss.js';
 
-const BaseContainer = styled.div.withConfig({ displayName: "vui--BaseContainer", componentId: "vui--jtpszk" }) `box-sizing:border-box;position:relative;margin:0;padding:0;`;
+const BaseContainer = React__default.forwardRef(({ className, children, ...rest }, ref) => (React__default.createElement("div", { className: buildClassnames([styles.base, className]), ref: ref, ...rest }, children)));
+BaseContainer.displayName = 'BaseContainer';
 
 export { BaseContainer };
 //# sourceMappingURL=BaseContainer.js.map

package/dist/components/BaseContainer/BaseContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseContainer.js","sources":["../../../src/components/BaseContainer/BaseContainer.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const BaseContainer = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n`;\n"],"names":[],"mappings":";;MAEa,aAAa,GAAG,MAAM,CAAC,GAAG;;;;"}
+{"version":3,"file":"BaseContainer.js","sources":["../../../src/components/BaseContainer/BaseContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport styles from './BaseContainer.module.scss';\n\nexport const BaseContainer = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...rest }, ref) => (\n  <div className={buildClassnames([styles.base, className])} ref={ref} {...rest}>\n    {children}\n  </div>\n));\n\nBaseContainer.displayName = 'BaseContainer';\n"],"names":["React"],"mappings":";;;;;MAIa,aAAa,GAAGA,cAAK,CAAC,UAAU,CAG3C,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACtCA,sCAAK,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAA,GAAM,IAAI,IAC1E,QAAQ,CACL,CACP;AAED,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._base_1khh5_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n}");
+var styles = {"base":"_base_1khh5_1"};
+
+module.exports = styles;
+//# sourceMappingURL=BaseContainer.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseContainer.module.scss.cjs","sources":["../../../src/components/BaseContainer/BaseContainer.module.scss"],"sourcesContent":[".base {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,oGAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._base_1khh5_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n}");
+var styles = {"base":"_base_1khh5_1"};
+
+export { styles as default };
+//# sourceMappingURL=BaseContainer.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseContainer.module.scss.js","sources":["../../../src/components/BaseContainer/BaseContainer.module.scss"],"sourcesContent":[".base {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,oGAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA;;;;"}

package/dist/components/DataTable/components/ColumnHeader.d.ts

@@ -3,4 +3,4 @@ export declare const HeaderContent: import("styled-components").StyledComponent<
 export declare const ClickableHeaderContent: import("styled-components").StyledComponent<"span", any, {
     as: string;
     type: string;
-}, "type" | "as">;
+}, "as" | "type">;

package/dist/components/DimensionsInput/DimensionsInput.cjs

@@ -5,9 +5,9 @@ var withLabels = require('../../hoc/withLabels/withLabels.cjs');
 var invalidCharactersNumeric = require('../../utils/invalidCharactersNumeric.cjs');
 var blockInvalidCharacters = require('../../utils/blockInvalidCharacters.cjs');
 var InputAffix = require('../InputAffix/InputAffix.cjs');
-var index$1 = require('../TextField/index.cjs');
+var index = require('../TextField/index.cjs');
 var Stack = require('../Stack/Stack.cjs');
-var index = require('../InputGroup/index.cjs');
+var InputGroup = require('../InputGroup/InputGroup.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -46,17 +46,17 @@ const DimensionsInput = withLabels.withLabels(({ size = 'base', handleChangeHeig
         },
     };
     return (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", className: className },
-        React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+        React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
             React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "L"),
-            React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "length", value: length, "aria-label": "Length", "aria-describedby": "length-unit", onChange: handleChangeLength, placeholder: "0" }),
+            React__default.default.createElement(index.TextField, { ...childProps.textField, name: "length", value: length, "aria-label": "Length", "aria-describedby": "length-unit", onChange: handleChangeLength, placeholder: "0" }),
             React__default.default.createElement(InputAffix.InputAffix, { id: "length-unit", ...childProps.inputAffix }, unit)),
-        React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+        React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
             React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "W"),
-            React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "width", value: width, "aria-label": "Width", "aria-describedby": "width-unit", onChange: handleChangeWidth, placeholder: "0" }),
+            React__default.default.createElement(index.TextField, { ...childProps.textField, name: "width", value: width, "aria-label": "Width", "aria-describedby": "width-unit", onChange: handleChangeWidth, placeholder: "0" }),
             React__default.default.createElement(InputAffix.InputAffix, { id: "width-unit", ...childProps.inputAffix }, unit)),
-        React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+        React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
             React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "H"),
-            React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "height", value: height, "aria-label": "Height", "aria-describedby": "height-unit", onChange: handleChangeHeight, placeholder: "0" }),
+            React__default.default.createElement(index.TextField, { ...childProps.textField, name: "height", value: height, "aria-label": "Height", "aria-describedby": "height-unit", onChange: handleChangeHeight, placeholder: "0" }),
             React__default.default.createElement(InputAffix.InputAffix, { id: "height-unit", ...childProps.inputAffix }, unit))));
 });
 DimensionsInput.displayName = 'DimensionsInput';

package/dist/components/DimensionsInput/DimensionsInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DimensionsInput.cjs","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\nimport { Stack } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nconst styles = {\n  inputGroup: {\n    flex: 1,\n  },\n  textField: {\n    flex: 1,\n  },\n};\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n  ({\n    size = 'base',\n    handleChangeHeight,\n    handleChangeWidth,\n    handleChangeLength,\n    className,\n    height,\n    width,\n    length,\n    unit = 'cm',\n    hasError,\n    ...rest\n  }) => {\n    const compact = size === 'sm';\n\n    const childProps: ChildComponentProps = {\n      inputGroup: {\n        hasError,\n        compact,\n        style: styles.inputGroup,\n      },\n      textField: {\n        type: 'number',\n        min: '0',\n        step: 'any',\n        onKeyDown: blockInvalidChars,\n        size,\n        hasError,\n        style: styles.textField,\n        ...rest,\n      },\n      inputAffix: {\n        compact,\n        hasError,\n      },\n    };\n\n    return (\n      <Stack direction=\"horizontal\" alignY=\"center\" className={className}>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>L</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"length\"\n            value={length}\n            aria-label=\"Length\"\n            aria-describedby=\"length-unit\"\n            onChange={handleChangeLength}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>W</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"width\"\n            value={width}\n            aria-label=\"Width\"\n            aria-describedby=\"width-unit\"\n            onChange={handleChangeWidth}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>H</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"height\"\n            value={height}\n            aria-label=\"Height\"\n            aria-describedby=\"height-unit\"\n            onChange={handleChangeHeight}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n      </Stack>\n    );\n  },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","React","Stack","InputGroup","InputAffix","TextField"],"mappings":"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"}
+{"version":3,"file":"DimensionsInput.cjs","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\nimport { Stack } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nconst styles = {\n  inputGroup: {\n    flex: 1,\n  },\n  textField: {\n    flex: 1,\n  },\n};\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n  ({\n    size = 'base',\n    handleChangeHeight,\n    handleChangeWidth,\n    handleChangeLength,\n    className,\n    height,\n    width,\n    length,\n    unit = 'cm',\n    hasError,\n    ...rest\n  }) => {\n    const compact = size === 'sm';\n\n    const childProps: ChildComponentProps = {\n      inputGroup: {\n        hasError,\n        compact,\n        style: styles.inputGroup,\n      },\n      textField: {\n        type: 'number',\n        min: '0',\n        step: 'any',\n        onKeyDown: blockInvalidChars,\n        size,\n        hasError,\n        style: styles.textField,\n        ...rest,\n      },\n      inputAffix: {\n        compact,\n        hasError,\n      },\n    };\n\n    return (\n      <Stack direction=\"horizontal\" alignY=\"center\" className={className}>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>L</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"length\"\n            value={length}\n            aria-label=\"Length\"\n            aria-describedby=\"length-unit\"\n            onChange={handleChangeLength}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>W</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"width\"\n            value={width}\n            aria-label=\"Width\"\n            aria-describedby=\"width-unit\"\n            onChange={handleChangeWidth}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>H</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"height\"\n            value={height}\n            aria-label=\"Height\"\n            aria-describedby=\"height-unit\"\n            onChange={handleChangeHeight}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n      </Stack>\n    );\n  },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","React","Stack","InputGroup","InputAffix","TextField"],"mappings":"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"}

package/dist/components/DimensionsInput/DimensionsInput.d.ts

@@ -1,13 +1,6 @@
 import React from 'react';
 export declare const DimensionsInput: React.ForwardRefExoticComponent<{
-    form?: string | undefined;
-    slot?: string | undefined;
-    style?: React.CSSProperties | undefined;
-    title?: string | undefined;
-    pattern?: string | undefined;
     rel?: string | undefined;
-    placeholder?: string | undefined;
-    list?: string | undefined;
     className?: string | undefined;
     children?: React.ReactNode;
     defaultChecked?: boolean | undefined;
@@ -24,8 +17,12 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    placeholder?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
+    style?: React.CSSProperties | undefined;
     tabIndex?: number | undefined;
+    title?: string | undefined;
     translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: React.AriaRole | undefined;
@@ -51,7 +48,7 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -263,6 +260,9 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     onAnimationIterationCapture?: (React.AnimationEventHandler<HTMLInputElement> & React.AnimationEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEnd?: (React.TransitionEventHandler<HTMLInputElement> & React.TransitionEventHandler<HTMLTextAreaElement>) | undefined;
     onTransitionEndCapture?: (React.TransitionEventHandler<HTMLInputElement> & React.TransitionEventHandler<HTMLTextAreaElement>) | undefined;
+    form?: string | undefined;
+    pattern?: string | undefined;
+    list?: string | undefined;
     alt?: string | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;

package/dist/components/DimensionsInput/DimensionsInput.js

@@ -5,7 +5,7 @@ import { blockInvalidCharacters } from '../../utils/blockInvalidCharacters.js';
 import { InputAffix } from '../InputAffix/InputAffix.js';
 import { TextField } from '../TextField/index.js';
 import { Stack } from '../Stack/Stack.js';
-import { InputGroup } from '../InputGroup/index.js';
+import { InputGroup } from '../InputGroup/InputGroup.js';
 
 const blockInvalidChars = (e) => blockInvalidCharacters(e, invalidCharsList);
 const styles = {

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

@@ -1,20 +1,20 @@
 /// <reference types="react" />
 import { Text } from '../Text';
 import { AnimatedDropdown } from '../AnimatedDropdown';
-declare const Container: import("styled-components").StyledComponent<"div", any, {
+declare const Container: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
     as: string;
 }, "as">;
 declare const GroupLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     as?: import("../Text").ValidTextTag | undefined;
     muted?: boolean | undefined;
-    variant?: "body" | "button" | "link" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholder" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
+    variant?: "placeholder" | "link" | "body" | "button" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
 } & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 declare const MainIcon: import("styled-components").StyledComponent<(props: import("react").SVGProps<SVGSVGElement>) => import("react").JSX.Element, any, {
     $shouldShow?: boolean | undefined;
 }, never>;
 declare const StyledCrossIcon: import("styled-components").StyledComponent<(props: import("react").SVGProps<SVGSVGElement>) => import("react").JSX.Element, any, {}, never>;
-declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const Header: import("styled-components").StyledComponent<"div", any, {
+declare const Content: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+declare const Header: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
     color: string;
 }, never>;
 export { Container, Text, AnimatedDropdown as Dropdown, GroupLabel, Content, Header, MainIcon, StyledCrossIcon as CrossIcon, };

package/dist/components/Grid/index.cjs

@@ -8,7 +8,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Grid = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Grid", componentId: "vui--12w0ynf" }) `display:grid;grid-template-columns:repeat(${({ columns }) => columns}, 1fr);grid-gap:${({ spacing = 'base' }) => (spacing ? sizes.sizes[spacing] : 0)};`;
+const Grid = styled__default.default(BaseContainer.BaseContainer).withConfig({
+    shouldForwardProp: (prop) => !['columns', 'spacing'].includes(prop),
+}) `
+  display: grid;
+  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);
+  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes.sizes[spacing] : 0)};
+`;
 
 exports.Grid = Grid;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Grid/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Grid/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { GridProps } from './types';\n\nexport const Grid = styled(BaseContainer)<GridProps>`\n  display: grid;\n  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);\n  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};\n`;\n"],"names":["styled","BaseContainer","sizes"],"mappings":";;;;;;;;;;AAOO,MAAM,IAAI,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,0CAAA,EAEP,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA,gBAAA,EAC5C,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,OAAO,GAAGC,WAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Grid/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { GridProps } from './types';\n\nexport const Grid = styled(BaseContainer).withConfig({\n  shouldForwardProp: (prop) => !['columns', 'spacing'].includes(prop),\n})<GridProps>`\n  display: grid;\n  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);\n  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};\n`;\n"],"names":["styled","BaseContainer","sizes"],"mappings":";;;;;;;;;;AAOO,MAAM,IAAI,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,UAAU,CAAC;AACnD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AACpE,CAAA,CAAC,CAAW;;AAEqB,gCAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA;cAC5C,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,OAAO,GAAGC,WAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;;;;;"}

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { GridProps } from './types';
-export declare const Grid: import("styled-components").StyledComponent<"div", any, GridProps, never>;
+export declare const Grid: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, GridProps, never>;

package/dist/components/Grid/index.js

@@ -2,7 +2,13 @@ import styled from 'styled-components';
 import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 import { sizes } from '../../theme/modules/sizes.js';
 
-const Grid = styled(BaseContainer).withConfig({ displayName: "vui--Grid", componentId: "vui--12w0ynf" }) `display:grid;grid-template-columns:repeat(${({ columns }) => columns}, 1fr);grid-gap:${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};`;
+const Grid = styled(BaseContainer).withConfig({
+    shouldForwardProp: (prop) => !['columns', 'spacing'].includes(prop),
+}) `
+  display: grid;
+  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);
+  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};
+`;
 
 export { Grid };
 //# sourceMappingURL=index.js.map

package/dist/components/Grid/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Grid/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { GridProps } from './types';\n\nexport const Grid = styled(BaseContainer)<GridProps>`\n  display: grid;\n  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);\n  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};\n`;\n"],"names":[],"mappings":";;;;AAOO,MAAM,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,0CAAA,EAEP,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA,gBAAA,EAC5C,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Grid/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { GridProps } from './types';\n\nexport const Grid = styled(BaseContainer).withConfig({\n  shouldForwardProp: (prop) => !['columns', 'spacing'].includes(prop),\n})<GridProps>`\n  display: grid;\n  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);\n  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};\n`;\n"],"names":[],"mappings":";;;;AAOO,MAAM,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC;AACnD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AACpE,CAAA,CAAC,CAAW;;AAEqB,gCAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA;cAC5C,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;;;;;"}

package/dist/components/InputAffix/InputAffix.cjs

@@ -3,17 +3,16 @@
 var React = require('react');
 var styled = require('styled-components');
 var inputStyles = require('../../utils/forms/inputStyles.cjs');
-var index$1 = require('../../theme/index.cjs');
+var index = require('../../theme/index.cjs');
 var Text = require('../Text/Text.cjs');
-var index = require('../InputGroup/index.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--zm6t34" }) `user-select:none;flex-shrink:0;${inputStyles.inputFullStyles} ${index.InputGroup}:has(:disabled)&{background-color:${index$1.theme.colors.neutral.grey.light};}`;
-const StyledHint = styled__default.default(Text.Text).attrs({ variant: 'hintText' }).withConfig({ displayName: "vui--StyledHint", componentId: "vui--8xnkei" }) `font-size:${index$1.theme.text.body.fontSize};`;
+const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--zm6t34" }) `user-select:none;flex-shrink:0;${inputStyles.inputFullStyles} [data-input-group]:has(:disabled)&{background-color:${index.theme.colors.neutral.grey.light};}`;
+const StyledHint = styled__default.default(Text.Text).attrs({ variant: 'hintText' }).withConfig({ displayName: "vui--StyledHint", componentId: "vui--8xnkei" }) `font-size:${index.theme.text.body.fontSize};`;
 function InputAffix({ children, ...otherProps }) {
     return (React__default.default.createElement(Container, { ...otherProps },
         React__default.default.createElement(StyledHint, { variant: "hintText" }, children)));

package/dist/components/InputAffix/InputAffix.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputAffix.cjs","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { FormComponentProps } from '../types';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nconst Container = styled.div<InputAffixProps>`\n  user-select: none;\n  flex-shrink: 0;\n\n  ${inputFullStyles}\n\n  ${InputGroup}:has(:disabled) & {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n`;\n\nconst StyledHint = styled(Text).attrs({ variant: 'hintText' })`\n  font-size: ${theme.text.body.fontSize};\n`;\n\nexport function InputAffix({ children, ...otherProps }: InputAffixProps) {\n  return (\n    <Container {...otherProps}>\n      <StyledHint variant=\"hintText\">{children}</StyledHint>\n    </Container>\n  );\n}\n\nInputAffix.Container = Container;\n"],"names":["styled","inputFullStyles","InputGroup","theme","Text","React"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+BAAA,EAIxBC,2BAAe,IAEfC,gBAAU,CAAA,kCAAA,EACUC,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,IAEtD;AAED,MAAM,UAAU,GAAGH,uBAAM,CAACI,SAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAC/CD,aAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,CAAA,CACtC;AAEK,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAmB,EAAA;AACrE,IAAA,QACEE,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GAAK,UAAU,EAAA;QACvBA,sBAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,UAAU,IAAE,QAAQ,CAAc,CAC5C;AAEhB;AAEA,UAAU,CAAC,SAAS,GAAG,SAAS;;;;"}
+{"version":3,"file":"InputAffix.cjs","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\nimport { FormComponentProps } from '../types';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nconst Container = styled.div<InputAffixProps>`\n  user-select: none;\n  flex-shrink: 0;\n\n  ${inputFullStyles}\n\n  [data-input-group]:has(:disabled) & {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n`;\n\nconst StyledHint = styled(Text).attrs({ variant: 'hintText' })`\n  font-size: ${theme.text.body.fontSize};\n`;\n\nexport function InputAffix({ children, ...otherProps }: InputAffixProps) {\n  return (\n    <Container {...otherProps}>\n      <StyledHint variant=\"hintText\">{children}</StyledHint>\n    </Container>\n  );\n}\n\nInputAffix.Container = Container;\n"],"names":["styled","inputFullStyles","theme","Text","React"],"mappings":";;;;;;;;;;;;;AASA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+BAAA,EAIxBC,2BAAe,CAAA,qDAAA,EAGKC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,IAEtD;AAED,MAAM,UAAU,GAAGF,uBAAM,CAACG,SAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAC/CD,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,CAAA,CACtC;AAEK,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAmB,EAAA;AACrE,IAAA,QACEE,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GAAK,UAAU,EAAA;QACvBA,sBAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,UAAU,IAAE,QAAQ,CAAc,CAC5C;AAEhB;AAEA,UAAU,CAAC,SAAS,GAAG,SAAS;;;;"}

package/dist/components/InputAffix/InputAffix.js

@@ -3,9 +3,8 @@ import styled from 'styled-components';
 import { inputFullStyles } from '../../utils/forms/inputStyles.js';
 import { theme } from '../../theme/index.js';
 import { Text } from '../Text/Text.js';
-import { InputGroup } from '../InputGroup/index.js';
 
-const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--zm6t34" }) `user-select:none;flex-shrink:0;${inputFullStyles} ${InputGroup}:has(:disabled)&{background-color:${theme.colors.neutral.grey.light};}`;
+const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--zm6t34" }) `user-select:none;flex-shrink:0;${inputFullStyles} [data-input-group]:has(:disabled)&{background-color:${theme.colors.neutral.grey.light};}`;
 const StyledHint = styled(Text).attrs({ variant: 'hintText' }).withConfig({ displayName: "vui--StyledHint", componentId: "vui--8xnkei" }) `font-size:${theme.text.body.fontSize};`;
 function InputAffix({ children, ...otherProps }) {
     return (React__default.createElement(Container, { ...otherProps },

package/dist/components/InputAffix/InputAffix.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputAffix.js","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { FormComponentProps } from '../types';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nconst Container = styled.div<InputAffixProps>`\n  user-select: none;\n  flex-shrink: 0;\n\n  ${inputFullStyles}\n\n  ${InputGroup}:has(:disabled) & {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n`;\n\nconst StyledHint = styled(Text).attrs({ variant: 'hintText' })`\n  font-size: ${theme.text.body.fontSize};\n`;\n\nexport function InputAffix({ children, ...otherProps }: InputAffixProps) {\n  return (\n    <Container {...otherProps}>\n      <StyledHint variant=\"hintText\">{children}</StyledHint>\n    </Container>\n  );\n}\n\nInputAffix.Container = Container;\n"],"names":["React"],"mappings":";;;;;;;AAUA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+BAAA,EAIxB,eAAe,IAEf,UAAU,CAAA,kCAAA,EACU,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,IAEtD;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAC/C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,CAAA,CACtC;AAEK,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAmB,EAAA;AACrE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GAAK,UAAU,EAAA;QACvBA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,UAAU,IAAE,QAAQ,CAAc,CAC5C;AAEhB;AAEA,UAAU,CAAC,SAAS,GAAG,SAAS;;;;"}
+{"version":3,"file":"InputAffix.js","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\nimport { FormComponentProps } from '../types';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nconst Container = styled.div<InputAffixProps>`\n  user-select: none;\n  flex-shrink: 0;\n\n  ${inputFullStyles}\n\n  [data-input-group]:has(:disabled) & {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n`;\n\nconst StyledHint = styled(Text).attrs({ variant: 'hintText' })`\n  font-size: ${theme.text.body.fontSize};\n`;\n\nexport function InputAffix({ children, ...otherProps }: InputAffixProps) {\n  return (\n    <Container {...otherProps}>\n      <StyledHint variant=\"hintText\">{children}</StyledHint>\n    </Container>\n  );\n}\n\nInputAffix.Container = Container;\n"],"names":["React"],"mappings":";;;;;;AASA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+BAAA,EAIxB,eAAe,CAAA,qDAAA,EAGK,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,IAEtD;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAC/C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,CAAA,CACtC;AAEK,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAmB,EAAA;AACrE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GAAK,UAAU,EAAA;QACvBA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,UAAU,IAAE,QAAQ,CAAc,CAC5C;AAEhB;AAEA,UAAU,CAAC,SAAS,GAAG,SAAS;;;;"}

package/dist/components/InputGroup/InputGroup.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var InputGroup_module = require('./InputGroup.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const InputGroup = React__default.default.forwardRef(({ hasError, disabled, compact, className, children, ...rest }, ref) => (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
+        InputGroup_module.base,
+        hasError ? InputGroup_module.error : undefined,
+        compact ? InputGroup_module.compact : undefined,
+        className,
+    ]), ...rest, "data-input-group": true, ref: ref }, children)));
+InputGroup.displayName = 'InputGroup';
+
+exports.InputGroup = InputGroup;
+//# sourceMappingURL=InputGroup.cjs.map

package/dist/components/InputGroup/InputGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.cjs","sources":["../../../src/components/InputGroup/InputGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport styles from './InputGroup.module.scss';\nimport { InputGroupProps } from './types';\n\nexport const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(\n  ({ hasError, disabled, compact, className, children, ...rest }, ref) => (\n    <div\n      className={buildClassnames([\n        styles.base,\n        hasError ? styles.error : undefined,\n        compact ? styles.compact : undefined,\n        className,\n      ])}\n      {...rest}\n      data-input-group\n      ref={ref}\n    >\n      {children}\n    </div>\n  ),\n);\n\nInputGroup.displayName = 'InputGroup';\n"],"names":["React","buildClassnames","styles"],"mappings":";;;;;;;;;;;AAKO,MAAM,UAAU,GAAGA,sBAAK,CAAC,UAAU,CACxC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACjEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC;AACzB,QAAAC,iBAAM,CAAC,IAAI;QACX,QAAQ,GAAGA,iBAAM,CAAC,KAAK,GAAG,SAAS;QACnC,OAAO,GAAGA,iBAAM,CAAC,OAAO,GAAG,SAAS;QACpC,SAAS;KACV,CAAC,EAAA,GACE,IAAI,EAAA,kBAAA,EAAA,IAAA,EAER,GAAG,EAAE,GAAG,EAAA,EAEP,QAAQ,CACL,CACP;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/InputGroup/InputGroup.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const InputGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & import("../types").FormComponentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/InputGroup/InputGroup.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './InputGroup.module.scss.js';
+
+const InputGroup = React__default.forwardRef(({ hasError, disabled, compact, className, children, ...rest }, ref) => (React__default.createElement("div", { className: buildClassnames([
+        styles.base,
+        hasError ? styles.error : undefined,
+        compact ? styles.compact : undefined,
+        className,
+    ]), ...rest, "data-input-group": true, ref: ref }, children)));
+InputGroup.displayName = 'InputGroup';
+
+export { InputGroup };
+//# sourceMappingURL=InputGroup.js.map

package/dist/components/InputGroup/InputGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.js","sources":["../../../src/components/InputGroup/InputGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport styles from './InputGroup.module.scss';\nimport { InputGroupProps } from './types';\n\nexport const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(\n  ({ hasError, disabled, compact, className, children, ...rest }, ref) => (\n    <div\n      className={buildClassnames([\n        styles.base,\n        hasError ? styles.error : undefined,\n        compact ? styles.compact : undefined,\n        className,\n      ])}\n      {...rest}\n      data-input-group\n      ref={ref}\n    >\n      {children}\n    </div>\n  ),\n);\n\nInputGroup.displayName = 'InputGroup';\n"],"names":["React"],"mappings":";;;;;AAKO,MAAM,UAAU,GAAGA,cAAK,CAAC,UAAU,CACxC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACjEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,QAAA,MAAM,CAAC,IAAI;QACX,QAAQ,GAAG,MAAM,CAAC,KAAK,GAAG,SAAS;QACnC,OAAO,GAAG,MAAM,CAAC,OAAO,GAAG,SAAS;QACpC,SAAS;KACV,CAAC,EAAA,GACE,IAAI,EAAA,kBAAA,EAAA,IAAA,EAER,GAAG,EAAE,GAAG,EAAA,EAEP,QAAQ,CACL,CACP;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._base_1wk6x_1 {\n  --padding: var(--sizes-3);\n  --padding-right: var(--padding);\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n  display: flex;\n  /* Remove inline margins and shadows from all children.\n     !important needed because SC-based children (e.g. Button) inject\n     their box-shadow dynamically after CSS Module static styles. */\n  /* Bring in-focus and active children to the front to maintain outlines */\n  /* Remove inline borders for children in the middle */\n  /* Remove right border radius from first child */\n  /* Remove left border radius from last child */\n}\n._base_1wk6x_1 > * {\n  margin-left: 0;\n  margin-right: 0;\n  box-shadow: none !important;\n}\n._base_1wk6x_1 > *:focus, ._base_1wk6x_1 > *:active {\n  z-index: 5;\n}\n._base_1wk6x_1 > *:not(:first-child):not(:last-child) {\n  border-radius: 0 !important;\n  border-inline: 0 !important;\n}\n._base_1wk6x_1 > *:first-child {\n  border-top-right-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n  border-right: 0 !important;\n}\n._base_1wk6x_1 > *:last-child {\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n  border-left: 0 !important;\n}\n\n._error_1wk6x_39 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n\n._compact_1wk6x_44 {\n  --outline-size: 2px;\n}");
+var styles = {"base":"_base_1wk6x_1","error":"_error_1wk6x_39","compact":"_compact_1wk6x_44"};
+
+module.exports = styles;
+//# sourceMappingURL=InputGroup.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.module.scss.cjs","sources":["../../../src/components/InputGroup/InputGroup.module.scss"],"sourcesContent":[".base {\n  --padding: var(--sizes-3);\n  --padding-right: var(--padding);\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n\n  display: flex;\n\n  /* Remove inline margins and shadows from all children.\n     !important needed because SC-based children (e.g. Button) inject\n     their box-shadow dynamically after CSS Module static styles. */\n  & > * {\n    margin-left: 0;\n    margin-right: 0;\n    box-shadow: none !important;\n  }\n\n  /* Bring in-focus and active children to the front to maintain outlines */\n  & > *:focus,\n  & > *:active {\n    z-index: 5;\n  }\n\n  /* Remove inline borders for children in the middle */\n  & > *:not(:first-child):not(:last-child) {\n    border-radius: 0 !important;\n    border-inline: 0 !important;\n  }\n\n  /* Remove right border radius from first child */\n  & > *:first-child {\n    border-top-right-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n    border-right: 0 !important;\n  }\n\n  /* Remove left border radius from last child */\n  & > *:last-child {\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    border-left: 0 !important;\n  }\n}\n\n.error {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n\n.compact {\n  --outline-size: 2px;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,i8CAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._base_1wk6x_1 {\n  --padding: var(--sizes-3);\n  --padding-right: var(--padding);\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n  display: flex;\n  /* Remove inline margins and shadows from all children.\n     !important needed because SC-based children (e.g. Button) inject\n     their box-shadow dynamically after CSS Module static styles. */\n  /* Bring in-focus and active children to the front to maintain outlines */\n  /* Remove inline borders for children in the middle */\n  /* Remove right border radius from first child */\n  /* Remove left border radius from last child */\n}\n._base_1wk6x_1 > * {\n  margin-left: 0;\n  margin-right: 0;\n  box-shadow: none !important;\n}\n._base_1wk6x_1 > *:focus, ._base_1wk6x_1 > *:active {\n  z-index: 5;\n}\n._base_1wk6x_1 > *:not(:first-child):not(:last-child) {\n  border-radius: 0 !important;\n  border-inline: 0 !important;\n}\n._base_1wk6x_1 > *:first-child {\n  border-top-right-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n  border-right: 0 !important;\n}\n._base_1wk6x_1 > *:last-child {\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n  border-left: 0 !important;\n}\n\n._error_1wk6x_39 {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n\n._compact_1wk6x_44 {\n  --outline-size: 2px;\n}");
+var styles = {"base":"_base_1wk6x_1","error":"_error_1wk6x_39","compact":"_compact_1wk6x_44"};
+
+export { styles as default };
+//# sourceMappingURL=InputGroup.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.module.scss.js","sources":["../../../src/components/InputGroup/InputGroup.module.scss"],"sourcesContent":[".base {\n  --padding: var(--sizes-3);\n  --padding-right: var(--padding);\n  --outline-size: var(--sizes-xs);\n  --border-color: var(--colors-neutral-ink-lightest);\n  --shadow-color: var(--colors-secondary-blue-light);\n\n  display: flex;\n\n  /* Remove inline margins and shadows from all children.\n     !important needed because SC-based children (e.g. Button) inject\n     their box-shadow dynamically after CSS Module static styles. */\n  & > * {\n    margin-left: 0;\n    margin-right: 0;\n    box-shadow: none !important;\n  }\n\n  /* Bring in-focus and active children to the front to maintain outlines */\n  & > *:focus,\n  & > *:active {\n    z-index: 5;\n  }\n\n  /* Remove inline borders for children in the middle */\n  & > *:not(:first-child):not(:last-child) {\n    border-radius: 0 !important;\n    border-inline: 0 !important;\n  }\n\n  /* Remove right border radius from first child */\n  & > *:first-child {\n    border-top-right-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n    border-right: 0 !important;\n  }\n\n  /* Remove left border radius from last child */\n  & > *:last-child {\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    border-left: 0 !important;\n  }\n}\n\n.error {\n  --border-color: var(--colors-secondary-red-base);\n  --shadow-color: var(--colors-secondary-red-light);\n}\n\n.compact {\n  --outline-size: 2px;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,i8CAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

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

@@ -1,4 +1,2 @@
-/// <reference types="react" />
-import { FormComponentProps } from '../types';
-export type InputGroupProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;
-export declare const InputGroup: import("styled-components").StyledComponent<"div", any, import("react").HTMLAttributes<HTMLDivElement> & FormComponentProps, never>;
+export { InputGroup } from './InputGroup';
+export type { InputGroupProps } from './types';

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FormComponentProps } from '../types';
+export type InputGroupProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;