@veeqo/ui 14.7.1 → 14.9.0-beta-1

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      },\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,11 +1,13 @@
 import React from 'react';
 export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     rel?: string | undefined;
+    placeholder?: string | undefined;
     form?: string | undefined;
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
     pattern?: string | undefined;
+    list?: string | undefined;
     className?: string | undefined;
     children?: React.ReactNode;
     defaultChecked?: boolean | undefined;
@@ -14,7 +16,7 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -22,10 +24,9 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
-    placeholder?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined;
-    translate?: "no" | "yes" | undefined;
+    translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: React.AriaRole | undefined;
     about?: string | undefined;
@@ -61,7 +62,7 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "step" | "date" | "page" | "location" | undefined;
+    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -70,7 +71,7 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -262,13 +263,13 @@ export declare const 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;
-    alt?: string | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
+    alt?: string | undefined;
     autoComplete?: string | undefined;
     accept?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
@@ -280,17 +281,16 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
     maxLength?: number | undefined;
     minLength?: number | undefined;
     src?: string | undefined;
-    list?: string | undefined;
-    name?: string | undefined;
     height?: string | number | undefined;
     max?: string | number | undefined;
     min?: string | number | undefined;
+    name?: string | undefined;
     width?: string | number | undefined;
+    wrap?: string | undefined;
+    step?: string | number | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
-    step?: string | number | undefined;
     rows?: number | undefined;
-    wrap?: string | undefined;
 } & {
     value?: string | undefined;
     type?: import("../TextField").TextFieldType | undefined;

package/dist/components/DimensionsInput/DimensionsInput.js

@@ -36,7 +36,6 @@ const DimensionsInput = withLabels(({ size = 'base', handleChangeHeight, handleC
         },
         inputAffix: {
             compact,
-            hasError,
         },
     };
     return (React__default.createElement(Stack, { direction: "horizontal", alignY: "center", className: className },

package/dist/components/DimensionsInput/DimensionsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DimensionsInput.js","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":["React"],"mappings":"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"}
+{"version":3,"file":"DimensionsInput.js","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      },\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":["React"],"mappings":"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"}

package/dist/components/Dropdown/styled.cjs

@@ -9,7 +9,18 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const DropdownContainer = styled__default.default(framerMotion.motion(Card.Card.Surface)).withConfig({ displayName: "vui--DropdownContainer", componentId: "vui--1yrw4mw" }) `display:inline-flex;flex-direction:column;overflow:hidden;background-color:white;box-shadow:${index.theme.shadows.md};border-radius:${index.theme.radius.base};padding:${index.theme.sizes.base};`;
+const DropdownContainer = styled__default.default(framerMotion.motion(Card.Card.Surface)).withConfig({
+    shouldForwardProp: (prop) => !['useAnchorWidth', 'reversed'].includes(prop),
+}) `
+  display: inline-flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  background-color: white;
+  box-shadow: ${index.theme.shadows.md};
+  border-radius: ${index.theme.radius.base};
+  padding: ${index.theme.sizes.base};
+`;
 
 exports.DropdownContainer = DropdownContainer;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Dropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../theme';\nimport { Card } from '../Card';\n\nexport const DropdownContainer = styled(motion(Card.Surface))`\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n\n  background-color: white;\n  box-shadow: ${theme.shadows.md};\n  border-radius: ${theme.radius.base};\n  padding: ${theme.sizes.base};\n`;\n"],"names":["styled","motion","Card","theme"],"mappings":";;;;;;;;;;;AAMO,MAAM,iBAAiB,GAAGA,uBAAM,CAACC,mBAAM,CAACC,SAAI,CAAC,OAAO,CAAC,CAAC,mLAM7CC,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACbA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,SAAA,EACvBA,WAAK,CAAC,KAAK,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Dropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../theme';\nimport { Card } from '../Card';\n\nexport const DropdownContainer = styled(motion(Card.Surface)).withConfig({\n  shouldForwardProp: (prop) => !['useAnchorWidth', 'reversed'].includes(prop),\n})<{ useAnchorWidth?: boolean; reversed?: boolean }>`\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n\n  background-color: white;\n  box-shadow: ${theme.shadows.md};\n  border-radius: ${theme.radius.base};\n  padding: ${theme.sizes.base};\n`;\n"],"names":["styled","motion","Card","theme"],"mappings":";;;;;;;;;;;AAMO,MAAM,iBAAiB,GAAGA,uBAAM,CAACC,mBAAM,CAACC,SAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC;AACvE,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC5E,CAAA,CAAC,CAAkD;;;;;;gBAMpCC,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA;mBACbA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA;aACvBA,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA;;;;;"}

package/dist/components/Dropdown/styled.js

@@ -3,7 +3,18 @@ import { motion } from 'framer-motion';
 import { theme } from '../../theme/index.js';
 import { Card } from '../Card/Card.js';
 
-const DropdownContainer = styled(motion(Card.Surface)).withConfig({ displayName: "vui--DropdownContainer", componentId: "vui--1yrw4mw" }) `display:inline-flex;flex-direction:column;overflow:hidden;background-color:white;box-shadow:${theme.shadows.md};border-radius:${theme.radius.base};padding:${theme.sizes.base};`;
+const DropdownContainer = styled(motion(Card.Surface)).withConfig({
+    shouldForwardProp: (prop) => !['useAnchorWidth', 'reversed'].includes(prop),
+}) `
+  display: inline-flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  background-color: white;
+  box-shadow: ${theme.shadows.md};
+  border-radius: ${theme.radius.base};
+  padding: ${theme.sizes.base};
+`;
 
 export { DropdownContainer };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Dropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../theme';\nimport { Card } from '../Card';\n\nexport const DropdownContainer = styled(motion(Card.Surface))`\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n\n  background-color: white;\n  box-shadow: ${theme.shadows.md};\n  border-radius: ${theme.radius.base};\n  padding: ${theme.sizes.base};\n`;\n"],"names":[],"mappings":";;;;;AAMO,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,mLAM7C,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACb,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,SAAA,EACvB,KAAK,CAAC,KAAK,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Dropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { theme } from '../../theme';\nimport { Card } from '../Card';\n\nexport const DropdownContainer = styled(motion(Card.Surface)).withConfig({\n  shouldForwardProp: (prop) => !['useAnchorWidth', 'reversed'].includes(prop),\n})<{ useAnchorWidth?: boolean; reversed?: boolean }>`\n  display: inline-flex;\n  flex-direction: column;\n  overflow: hidden;\n\n  background-color: white;\n  box-shadow: ${theme.shadows.md};\n  border-radius: ${theme.radius.base};\n  padding: ${theme.sizes.base};\n`;\n"],"names":[],"mappings":";;;;;AAMO,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC;AACvE,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC5E,CAAA,CAAC,CAAkD;;;;;;gBAMpC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;mBACb,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA;aACvB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA;;;;;"}

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

@@ -7,7 +7,7 @@ declare const Container: import("styled-components").StyledComponent<import("rea
 declare const GroupLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     as?: import("../Text").ValidTextTag | undefined;
     muted?: boolean | undefined;
-    variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
+    variant?: "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "body" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholder" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "button" | "buttonSmall" | "linkLarge" | "linkMedium" | "link" | "linkSmall" | undefined;
 } & 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;

package/dist/components/Flex/FlexCol/FlexCol.d.ts

@@ -5,6 +5,6 @@ export declare const FlexCol: React.ForwardRefExoticComponent<{
     alignItems?: ("baseline" | "center" | "flex-start" | "flex-end" | "stretch") | undefined;
     justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly") | undefined;
     gap?: keyof import("../../../theme/modules/sizes").SizeScale | undefined;
-    flexWrap?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
+    flexWrap?: ("nowrap" | "wrap" | "wrap-reverse") | undefined;
     flexGrow?: import("csstype").Property.FlexGrow | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/FlexRow/FlexRow.d.ts

@@ -5,6 +5,6 @@ export declare const FlexRow: React.ForwardRefExoticComponent<{
     alignItems?: ("baseline" | "center" | "flex-start" | "flex-end" | "stretch") | undefined;
     justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly") | undefined;
     gap?: keyof import("../../../theme/modules/sizes").SizeScale | undefined;
-    flexWrap?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
+    flexWrap?: ("nowrap" | "wrap" | "wrap-reverse") | undefined;
     flexGrow?: import("csstype").Property.FlexGrow | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/InputAffix/InputAffix.cjs

@@ -1,23 +1,19 @@
 'use strict';
 
 var React = require('react');
-var styled = require('styled-components');
-var inputStyles = require('../../utils/forms/inputStyles.cjs');
-var index = require('../../theme/index.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
 var Text = require('../Text/Text.cjs');
+var InputAffix_module = require('./InputAffix.module.scss.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} [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)));
+function InputAffix({ children, compact, className, ...otherProps }) {
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([InputAffix_module.container, compact && InputAffix_module.compact, className]), ...otherProps },
+        React__default.default.createElement(Text.Text, { variant: "hintText", className: InputAffix_module.hint }, children)));
 }
-InputAffix.Container = Container;
 
 exports.InputAffix = InputAffix;
 //# sourceMappingURL=InputAffix.cjs.map

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 { 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;;;;"}
+{"version":3,"file":"InputAffix.cjs","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Text } from '../Text';\n\nimport styles from './InputAffix.module.scss';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & {\n  compact?: boolean;\n};\n\nexport function InputAffix({ children, compact, className, ...otherProps }: InputAffixProps) {\n  return (\n    <div\n      className={buildClassnames([styles.container, compact && styles.compact, className])}\n      {...otherProps}\n    >\n      <Text variant=\"hintText\" className={styles.hint}>\n        {children}\n      </Text>\n    </div>\n  );\n}\n"],"names":["React","buildClassnames","styles","Text"],"mappings":";;;;;;;;;;;;AAUM,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,UAAU,EAAmB,EAAA;IACzF,QACEA,8CACE,SAAS,EAAEC,+BAAe,CAAC,CAACC,iBAAM,CAAC,SAAS,EAAE,OAAO,IAAIA,iBAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA,GAChF,UAAU,EAAA;AAEd,QAAAF,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,SAAS,EAAED,iBAAM,CAAC,IAAI,EAAA,EAC5C,QAAQ,CACJ,CACH;AAEV;;;;"}

package/dist/components/InputAffix/InputAffix.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-import { FormComponentProps } from '../types';
-export type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;
-export declare function InputAffix({ children, ...otherProps }: InputAffixProps): React.JSX.Element;
-export declare namespace InputAffix {
-    var Container: import("styled-components").StyledComponent<"div", any, React.HTMLAttributes<HTMLDivElement> & FormComponentProps, never>;
-}
+export type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & {
+    compact?: boolean;
+};
+export declare function InputAffix({ children, compact, className, ...otherProps }: InputAffixProps): React.JSX.Element;

package/dist/components/InputAffix/InputAffix.js

@@ -1,16 +1,13 @@
 import React__default from 'react';
-import styled from 'styled-components';
-import { inputFullStyles } from '../../utils/forms/inputStyles.js';
-import { theme } from '../../theme/index.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
 import { Text } from '../Text/Text.js';
+import styles from './InputAffix.module.scss.js';
 
-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 },
-        React__default.createElement(StyledHint, { variant: "hintText" }, children)));
+function InputAffix({ children, compact, className, ...otherProps }) {
+    return (React__default.createElement("div", { className: buildClassnames([styles.container, compact && styles.compact, className]), ...otherProps },
+        React__default.createElement(Text, { variant: "hintText", className: styles.hint }, children)));
 }
-InputAffix.Container = Container;
 
 export { InputAffix };
 //# sourceMappingURL=InputAffix.js.map

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 { 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;;;;"}
+{"version":3,"file":"InputAffix.js","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Text } from '../Text';\n\nimport styles from './InputAffix.module.scss';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & {\n  compact?: boolean;\n};\n\nexport function InputAffix({ children, compact, className, ...otherProps }: InputAffixProps) {\n  return (\n    <div\n      className={buildClassnames([styles.container, compact && styles.compact, className])}\n      {...otherProps}\n    >\n      <Text variant=\"hintText\" className={styles.hint}>\n        {children}\n      </Text>\n    </div>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;AAUM,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,UAAU,EAAmB,EAAA;IACzF,QACEA,sCACE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,IAAI,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,EAAA,GAChF,UAAU,EAAA;AAEd,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,EAC5C,QAAQ,CACJ,CACH;AAEV;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_nmclh_1 {\n  user-select: none;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  background-color: white;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: var(--sizes-line) solid var(--border-color, var(--colors-neutral-ink-lightest));\n  display: flex;\n  align-items: center;\n}\n[data-input-group] > ._container_nmclh_1:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n[data-input-group] > ._container_nmclh_1:last-child {\n  padding-left: var(--sizes-2);\n}\n[data-input-group] > ._container_nmclh_1:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}\n[data-input-group]:has(:disabled) ._container_nmclh_1 {\n  background-color: var(--colors-neutral-grey-light);\n}\n\n._compact_nmclh_26 {\n  min-height: var(--sizes-8);\n}\n\n._hint_nmclh_30 {\n  font-size: var(--text-body-font-size);\n}");
+var styles = {"container":"_container_nmclh_1","compact":"_compact_nmclh_26","hint":"_hint_nmclh_30"};
+
+module.exports = styles;
+//# sourceMappingURL=InputAffix.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputAffix.module.scss.cjs","sources":["../../../src/components/InputAffix/InputAffix.module.scss"],"sourcesContent":[".container {\n  user-select: none;\n  flex-shrink: 0;\n  box-sizing: border-box;\n\n  background-color: white;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: var(--sizes-line) solid var(--border-color, var(--colors-neutral-ink-lightest));\n\n  display: flex;\n  align-items: center;\n\n  [data-input-group] > &:first-child {\n    padding-right: calc(var(--sizes-3) - var(--sizes-1));\n  }\n\n  [data-input-group] > &:last-child {\n    padding-left: var(--sizes-2);\n  }\n\n  [data-input-group] > &:not(:first-child):not(:last-child) {\n    padding-inline: var(--sizes-2);\n  }\n\n  [data-input-group]:has(:disabled) & {\n    background-color: var(--colors-neutral-grey-light);\n  }\n}\n\n.compact {\n  min-height: var(--sizes-8);\n}\n\n.hint {\n  font-size: var(--text-body-font-size);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,45BAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._container_nmclh_1 {\n  user-select: none;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  background-color: white;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: var(--sizes-line) solid var(--border-color, var(--colors-neutral-ink-lightest));\n  display: flex;\n  align-items: center;\n}\n[data-input-group] > ._container_nmclh_1:first-child {\n  padding-right: calc(var(--sizes-3) - var(--sizes-1));\n}\n[data-input-group] > ._container_nmclh_1:last-child {\n  padding-left: var(--sizes-2);\n}\n[data-input-group] > ._container_nmclh_1:not(:first-child):not(:last-child) {\n  padding-inline: var(--sizes-2);\n}\n[data-input-group]:has(:disabled) ._container_nmclh_1 {\n  background-color: var(--colors-neutral-grey-light);\n}\n\n._compact_nmclh_26 {\n  min-height: var(--sizes-8);\n}\n\n._hint_nmclh_30 {\n  font-size: var(--text-body-font-size);\n}");
+var styles = {"container":"_container_nmclh_1","compact":"_compact_nmclh_26","hint":"_hint_nmclh_30"};
+
+export { styles as default };
+//# sourceMappingURL=InputAffix.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputAffix.module.scss.js","sources":["../../../src/components/InputAffix/InputAffix.module.scss"],"sourcesContent":[".container {\n  user-select: none;\n  flex-shrink: 0;\n  box-sizing: border-box;\n\n  background-color: white;\n  min-height: var(--sizes-10);\n  padding-inline: var(--sizes-3);\n  border-radius: var(--radius-base);\n  border: var(--sizes-line) solid var(--border-color, var(--colors-neutral-ink-lightest));\n\n  display: flex;\n  align-items: center;\n\n  [data-input-group] > &:first-child {\n    padding-right: calc(var(--sizes-3) - var(--sizes-1));\n  }\n\n  [data-input-group] > &:last-child {\n    padding-left: var(--sizes-2);\n  }\n\n  [data-input-group] > &:not(:first-child):not(:last-child) {\n    padding-inline: var(--sizes-2);\n  }\n\n  [data-input-group]:has(:disabled) & {\n    background-color: var(--colors-neutral-grey-light);\n  }\n}\n\n.compact {\n  min-height: var(--sizes-8);\n}\n\n.hint {\n  font-size: var(--text-body-font-size);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,45BAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}

package/dist/components/LegacyDataTable/SpecificState/styled.d.ts

@@ -7,11 +7,11 @@ declare const EllipseContainer: import("styled-components").StyledComponent<impo
 declare const TitleText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     as?: import("../../Text").ValidTextTag | undefined;
     muted?: boolean | undefined;
-    variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
+    variant?: "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "body" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholder" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "button" | "buttonSmall" | "linkLarge" | "linkMedium" | "link" | "linkSmall" | undefined;
 } & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 declare const SubTitleText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     as?: import("../../Text").ValidTextTag | undefined;
     muted?: boolean | undefined;
-    variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
+    variant?: "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "body" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholder" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "button" | "buttonSmall" | "linkLarge" | "linkMedium" | "link" | "linkSmall" | undefined;
 } & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export { SpecificStateContainer, EllipseContainer, TitleText, SubTitleText };

package/dist/components/Modal/components/Dialog/styles/baseStyles.cjs

@@ -7,7 +7,7 @@ var index = require('../../../../../theme/index.cjs');
 var styled = require('../../styled.cjs');
 var constants = require('../constants.cjs');
 
-const baseModalStyles = styled$1.css `padding:0;border:none;border-radius:${index.theme.sizes.sm};box-shadow:${index.theme.shadows.lg};z-index:${index.theme.layers.modal};&::backdrop{animation:fadeIn 0.25s ease forwards;background-color:${color.getOpaqueHexColor(index.theme.colors.neutral.ink.base, 0.5)};width:100%;height:100%;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}& > ${Card.Card.Surface}{display:flex;flex-direction:column;${styled.MainSection}{padding-bottom:${index.theme.sizes.md};}${Card.Card.Footer}{margin-top:0;}}@media (max-width: ${({ variant }) => constants.fullScreenBreakpointMap[variant]}){margin:0;width:100%;max-width:100vw;max-height:100vh;&,& > ${Card.Card.Surface}{border-radius:0;height:100%;width:100%;max-height:unset;}}`;
+const baseModalStyles = styled$1.css `padding:0;border:none;border-radius:${index.theme.sizes.sm};box-shadow:${index.theme.shadows.lg};z-index:${index.theme.layers.modal};&::backdrop{animation:fadeIn 0.25s ease forwards;background-color:${color.getOpaqueHexColor(index.theme.colors.neutral.ink.base, 0.5)};width:100%;height:100%;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}& > ${Card.Card.Surface.toString()}{display:flex;flex-direction:column;${styled.MainSection}{padding-bottom:${index.theme.sizes.md};}${Card.Card.Footer.toString()}{margin-top:0;}}@media (max-width: ${({ variant }) => constants.fullScreenBreakpointMap[variant]}){margin:0;width:100%;max-width:100vw;max-height:100vh;&,& > ${Card.Card.Surface.toString()}{border-radius:0;height:100%;width:100%;max-height:unset;}}`;
 
 exports.baseModalStyles = baseModalStyles;
 //# sourceMappingURL=baseStyles.cjs.map

package/dist/components/Modal/components/Dialog/styles/baseStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"baseStyles.cjs","sources":["../../../../../../src/components/Modal/components/Dialog/styles/baseStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { ModalVariants } from '../../../types';\nimport { getOpaqueHexColor } from '../../../../../utils/color';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { MainSection } from '../../styled';\nimport { fullScreenBreakpointMap } from '../constants';\n\nexport const baseModalStyles = css<{ variant: ModalVariants }>`\n  padding: 0;\n  border: none;\n  border-radius: ${theme.sizes.sm};\n  box-shadow: ${theme.shadows.lg};\n  z-index: ${theme.layers.modal};\n\n  &::backdrop {\n    animation: fadeIn 0.25s ease forwards;\n    background-color: ${getOpaqueHexColor(theme.colors.neutral.ink.base, 0.5)};\n    width: 100%;\n    height: 100%;\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  & > ${Card.Surface} {\n    display: flex;\n    flex-direction: column;\n\n    ${MainSection} {\n      padding-bottom: ${theme.sizes.md};\n    }\n\n    ${Card.Footer} {\n      margin-top: 0;\n    }\n  }\n\n  @media (max-width: ${({ variant }) => fullScreenBreakpointMap[variant]}) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > ${Card.Surface} {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n`;\n"],"names":["css","theme","getOpaqueHexColor","Card","MainSection","fullScreenBreakpointMap"],"mappings":";;;;;;;;;AAQO,MAAM,eAAe,GAAGA,YAAG,CAAA,CAAA,oCAAA,EAGfC,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,YAAA,EACjBA,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,SAAA,EACnBA,WAAK,CAAC,MAAM,CAAC,KAAK,CAAA,mEAAA,EAIPC,uBAAiB,CAACD,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA,8EAAA,EAcrEE,SAAI,CAAC,OAAO,CAAA,oCAAA,EAIdC,kBAAW,CAAA,gBAAA,EACOH,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,EAAA,EAGhCE,SAAI,CAAC,MAAM,CAAA,mCAAA,EAKM,CAAC,EAAE,OAAO,EAAE,KAAKE,iCAAuB,CAAC,OAAO,CAAC,CAAA,6DAAA,EAO9DF,SAAI,CAAC,OAAO;;;;"}
+{"version":3,"file":"baseStyles.cjs","sources":["../../../../../../src/components/Modal/components/Dialog/styles/baseStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { ModalVariants } from '../../../types';\nimport { getOpaqueHexColor } from '../../../../../utils/color';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { MainSection } from '../../styled';\nimport { fullScreenBreakpointMap } from '../constants';\n\nexport const baseModalStyles = css<{ variant: ModalVariants }>`\n  padding: 0;\n  border: none;\n  border-radius: ${theme.sizes.sm};\n  box-shadow: ${theme.shadows.lg};\n  z-index: ${theme.layers.modal};\n\n  &::backdrop {\n    animation: fadeIn 0.25s ease forwards;\n    background-color: ${getOpaqueHexColor(theme.colors.neutral.ink.base, 0.5)};\n    width: 100%;\n    height: 100%;\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  & > ${Card.Surface.toString()} {\n    display: flex;\n    flex-direction: column;\n\n    ${MainSection} {\n      padding-bottom: ${theme.sizes.md};\n    }\n\n    ${Card.Footer.toString()} {\n      margin-top: 0;\n    }\n  }\n\n  @media (max-width: ${({ variant }) => fullScreenBreakpointMap[variant]}) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > ${Card.Surface.toString()} {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n`;\n"],"names":["css","theme","getOpaqueHexColor","Card","MainSection","fullScreenBreakpointMap"],"mappings":";;;;;;;;;AAQO,MAAM,eAAe,GAAGA,YAAG,wCAGfC,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,YAAA,EACjBA,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,SAAA,EACnBA,WAAK,CAAC,MAAM,CAAC,KAAK,CAAA,mEAAA,EAIPC,uBAAiB,CAACD,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA,8EAAA,EAcrEE,SAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAA,oCAAA,EAIzBC,kBAAW,mBACOH,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,EAAA,EAGhCE,SAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAA,mCAAA,EAKL,CAAC,EAAE,OAAO,EAAE,KAAKE,iCAAuB,CAAC,OAAO,CAAC,CAAA,6DAAA,EAO9DF,SAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;;;;"}

package/dist/components/Modal/components/Dialog/styles/baseStyles.js

@@ -5,7 +5,7 @@ import { theme } from '../../../../../theme/index.js';
 import { MainSection } from '../../styled.js';
 import { fullScreenBreakpointMap } from '../constants.js';
 
-const baseModalStyles = css `padding:0;border:none;border-radius:${theme.sizes.sm};box-shadow:${theme.shadows.lg};z-index:${theme.layers.modal};&::backdrop{animation:fadeIn 0.25s ease forwards;background-color:${getOpaqueHexColor(theme.colors.neutral.ink.base, 0.5)};width:100%;height:100%;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}& > ${Card.Surface}{display:flex;flex-direction:column;${MainSection}{padding-bottom:${theme.sizes.md};}${Card.Footer}{margin-top:0;}}@media (max-width: ${({ variant }) => fullScreenBreakpointMap[variant]}){margin:0;width:100%;max-width:100vw;max-height:100vh;&,& > ${Card.Surface}{border-radius:0;height:100%;width:100%;max-height:unset;}}`;
+const baseModalStyles = css `padding:0;border:none;border-radius:${theme.sizes.sm};box-shadow:${theme.shadows.lg};z-index:${theme.layers.modal};&::backdrop{animation:fadeIn 0.25s ease forwards;background-color:${getOpaqueHexColor(theme.colors.neutral.ink.base, 0.5)};width:100%;height:100%;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}& > ${Card.Surface.toString()}{display:flex;flex-direction:column;${MainSection}{padding-bottom:${theme.sizes.md};}${Card.Footer.toString()}{margin-top:0;}}@media (max-width: ${({ variant }) => fullScreenBreakpointMap[variant]}){margin:0;width:100%;max-width:100vw;max-height:100vh;&,& > ${Card.Surface.toString()}{border-radius:0;height:100%;width:100%;max-height:unset;}}`;
 
 export { baseModalStyles };
 //# sourceMappingURL=baseStyles.js.map

package/dist/components/Modal/components/Dialog/styles/baseStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"baseStyles.js","sources":["../../../../../../src/components/Modal/components/Dialog/styles/baseStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { ModalVariants } from '../../../types';\nimport { getOpaqueHexColor } from '../../../../../utils/color';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { MainSection } from '../../styled';\nimport { fullScreenBreakpointMap } from '../constants';\n\nexport const baseModalStyles = css<{ variant: ModalVariants }>`\n  padding: 0;\n  border: none;\n  border-radius: ${theme.sizes.sm};\n  box-shadow: ${theme.shadows.lg};\n  z-index: ${theme.layers.modal};\n\n  &::backdrop {\n    animation: fadeIn 0.25s ease forwards;\n    background-color: ${getOpaqueHexColor(theme.colors.neutral.ink.base, 0.5)};\n    width: 100%;\n    height: 100%;\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  & > ${Card.Surface} {\n    display: flex;\n    flex-direction: column;\n\n    ${MainSection} {\n      padding-bottom: ${theme.sizes.md};\n    }\n\n    ${Card.Footer} {\n      margin-top: 0;\n    }\n  }\n\n  @media (max-width: ${({ variant }) => fullScreenBreakpointMap[variant]}) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > ${Card.Surface} {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n`;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA,oCAAA,EAGf,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,YAAA,EACjB,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,SAAA,EACnB,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA,mEAAA,EAIP,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA,8EAAA,EAcrE,IAAI,CAAC,OAAO,CAAA,oCAAA,EAId,WAAW,CAAA,gBAAA,EACO,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,EAAA,EAGhC,IAAI,CAAC,MAAM,CAAA,mCAAA,EAKM,CAAC,EAAE,OAAO,EAAE,KAAK,uBAAuB,CAAC,OAAO,CAAC,CAAA,6DAAA,EAO9D,IAAI,CAAC,OAAO;;;;"}
+{"version":3,"file":"baseStyles.js","sources":["../../../../../../src/components/Modal/components/Dialog/styles/baseStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { ModalVariants } from '../../../types';\nimport { getOpaqueHexColor } from '../../../../../utils/color';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { MainSection } from '../../styled';\nimport { fullScreenBreakpointMap } from '../constants';\n\nexport const baseModalStyles = css<{ variant: ModalVariants }>`\n  padding: 0;\n  border: none;\n  border-radius: ${theme.sizes.sm};\n  box-shadow: ${theme.shadows.lg};\n  z-index: ${theme.layers.modal};\n\n  &::backdrop {\n    animation: fadeIn 0.25s ease forwards;\n    background-color: ${getOpaqueHexColor(theme.colors.neutral.ink.base, 0.5)};\n    width: 100%;\n    height: 100%;\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  & > ${Card.Surface.toString()} {\n    display: flex;\n    flex-direction: column;\n\n    ${MainSection} {\n      padding-bottom: ${theme.sizes.md};\n    }\n\n    ${Card.Footer.toString()} {\n      margin-top: 0;\n    }\n  }\n\n  @media (max-width: ${({ variant }) => fullScreenBreakpointMap[variant]}) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > ${Card.Surface.toString()} {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n`;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,eAAe,GAAG,GAAG,wCAGf,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,YAAA,EACjB,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,SAAA,EACnB,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA,mEAAA,EAIP,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA,8EAAA,EAcrE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAA,oCAAA,EAIzB,WAAW,mBACO,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,EAAA,EAGhC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAA,mCAAA,EAKL,CAAC,EAAE,OAAO,EAAE,KAAK,uBAAuB,CAAC,OAAO,CAAC,CAAA,6DAAA,EAO9D,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;;;;"}

package/dist/components/Modal/components/Dialog/styles/modalTypeStyles.cjs

@@ -6,8 +6,8 @@ var index = require('../../../../../theme/index.cjs');
 var constants = require('../constants.cjs');
 
 const { breakpoints } = index.theme;
-const modalStyles = styled.css `min-width:464px;& > ${Card.Card.Surface}{max-height:${({ variant }) => constants.heightMap[variant]};}&:not([open]){display:block;position:fixed;inset:0;transform:translate(-50%, -50%);}@media (min-width: calc(${breakpoints.mobile} + 1px))and (max-width: ${breakpoints.tablet}){max-width:${({ variant }) => constants.widthMap[breakpoints.tablet][variant]};}@media (min-width: ${breakpoints.tablet})and (max-width: ${breakpoints.lgTablet}){max-width:${({ variant }) => constants.widthMap[breakpoints.lgTablet][variant]};}@media (min-width: ${breakpoints.lgTablet})and (max-width: ${breakpoints.desktop}){max-width:${({ variant }) => constants.widthMap[breakpoints.desktop][variant]};}@media (min-width: ${breakpoints.desktop}){max-width:${({ variant }) => constants.widthMap[breakpoints.lgDesktop][variant]};}`;
-const sideDrawerBaseStyles = styled.css `height:100%;max-height:100%;min-width:320px;width:400px;margin:0;position:fixed;transform:none;border-radius:0;overflow:visible;& > ${Card.Card.Surface}{border-radius:0;height:100%;}&:not([open]){display:block;}`;
+const modalStyles = styled.css `min-width:464px;& > ${Card.Card.Surface.toString()}{max-height:${({ variant }) => constants.heightMap[variant]};}&:not([open]){display:block;position:fixed;inset:0;transform:translate(-50%, -50%);}@media (min-width: calc(${breakpoints.mobile} + 1px))and (max-width: ${breakpoints.tablet}){max-width:${({ variant }) => constants.widthMap[breakpoints.tablet][variant]};}@media (min-width: ${breakpoints.tablet})and (max-width: ${breakpoints.lgTablet}){max-width:${({ variant }) => constants.widthMap[breakpoints.lgTablet][variant]};}@media (min-width: ${breakpoints.lgTablet})and (max-width: ${breakpoints.desktop}){max-width:${({ variant }) => constants.widthMap[breakpoints.desktop][variant]};}@media (min-width: ${breakpoints.desktop}){max-width:${({ variant }) => constants.widthMap[breakpoints.lgDesktop][variant]};}`;
+const sideDrawerBaseStyles = styled.css `height:100%;max-height:100%;min-width:320px;width:400px;margin:0;position:fixed;transform:none;border-radius:0;overflow:visible;& > ${Card.Card.Surface.toString()}{border-radius:0;height:100%;}&:not([open]){display:block;}`;
 const leftDrawerStyles = styled.css `${sideDrawerBaseStyles} inset:0 auto 0 0;`;
 const rightDrawerStyles = styled.css `${sideDrawerBaseStyles} inset:0 0 0 auto;`;
 

package/dist/components/Modal/components/Dialog/styles/modalTypeStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"modalTypeStyles.cjs","sources":["../../../../../../src/components/Modal/components/Dialog/styles/modalTypeStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { ModalVariants } from '../../../types';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { heightMap, widthMap } from '../constants';\n\nconst { breakpoints } = theme;\n\nexport const modalStyles = css<{ variant: ModalVariants }>`\n  min-width: 464px;\n\n  & > ${Card.Surface} {\n    max-height: ${({ variant }) => heightMap[variant]};\n  }\n\n  &:not([open]) {\n    display: block;\n    position: fixed;\n    inset: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  // ** Responsive Design ** //\n\n  // Tablet\n  @media (min-width: calc(${breakpoints.mobile} + 1px)) and (max-width: ${breakpoints.tablet}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.tablet][variant]};\n  }\n\n  // Lg Tablet\n  @media (min-width: ${breakpoints.tablet}) and (max-width: ${breakpoints.lgTablet}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.lgTablet][variant]};\n  }\n\n  // Desktop\n  @media (min-width: ${breakpoints.lgTablet}) and (max-width: ${breakpoints.desktop}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.desktop][variant]};\n  }\n\n  // Lg Desktop\n  @media (min-width: ${breakpoints.desktop}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.lgDesktop][variant]};\n  }\n`;\n\nconst sideDrawerBaseStyles = css`\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n\n  & > ${Card.Surface} {\n    border-radius: 0;\n    height: 100%;\n  }\n\n  &:not([open]) {\n    display: block;\n  }\n`;\n\nexport const leftDrawerStyles = css`\n  ${sideDrawerBaseStyles}\n  inset: 0 auto 0 0;\n`;\n\nexport const rightDrawerStyles = css`\n  ${sideDrawerBaseStyles}\n  inset: 0 0 0 auto;\n`;\n"],"names":["theme","css","Card","heightMap","widthMap"],"mappings":";;;;;;;AAMA,MAAM,EAAE,WAAW,EAAE,GAAGA,WAAK;AAEtB,MAAM,WAAW,GAAGC,UAAG,CAAA,CAAA,oBAAA,EAGtBC,SAAI,CAAC,OAAO,CAAA,YAAA,EACF,CAAC,EAAE,OAAO,EAAE,KAAKC,mBAAS,CAAC,OAAO,CAAC,CAAA,8GAAA,EAazB,WAAW,CAAC,MAAM,CAAA,wBAAA,EAA4B,WAAW,CAAC,MAAM,CAAA,YAAA,EAC3E,CAAC,EAAE,OAAO,EAAE,KAAKC,kBAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIhD,WAAW,CAAC,MAAM,CAAA,iBAAA,EAAqB,WAAW,CAAC,QAAQ,CAAA,YAAA,EACjE,CAAC,EAAE,OAAO,EAAE,KAAKA,kBAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIlD,WAAW,CAAC,QAAQ,CAAA,iBAAA,EAAqB,WAAW,CAAC,OAAO,CAAA,YAAA,EAClE,CAAC,EAAE,OAAO,EAAE,KAAKA,kBAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIjD,WAAW,CAAC,OAAO,CAAA,YAAA,EACzB,CAAC,EAAE,OAAO,EAAE,KAAKA,kBAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAA,EAAA;AAI1E,MAAM,oBAAoB,GAAGH,UAAG,CAAA,CAAA,oIAAA,EAWxBC,SAAI,CAAC,OAAO,6DAQnB;MAEY,gBAAgB,GAAGD,UAAG,CAAA,CAAA,EAC/B,oBAAoB;MAIX,iBAAiB,GAAGA,UAAG,CAAA,CAAA,EAChC,oBAAoB;;;;;;"}
+{"version":3,"file":"modalTypeStyles.cjs","sources":["../../../../../../src/components/Modal/components/Dialog/styles/modalTypeStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { ModalVariants } from '../../../types';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { heightMap, widthMap } from '../constants';\n\nconst { breakpoints } = theme;\n\nexport const modalStyles = css<{ variant: ModalVariants }>`\n  min-width: 464px;\n\n  & > ${Card.Surface.toString()} {\n    max-height: ${({ variant }) => heightMap[variant]};\n  }\n\n  &:not([open]) {\n    display: block;\n    position: fixed;\n    inset: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  // ** Responsive Design ** //\n\n  // Tablet\n  @media (min-width: calc(${breakpoints.mobile} + 1px)) and (max-width: ${breakpoints.tablet}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.tablet][variant]};\n  }\n\n  // Lg Tablet\n  @media (min-width: ${breakpoints.tablet}) and (max-width: ${breakpoints.lgTablet}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.lgTablet][variant]};\n  }\n\n  // Desktop\n  @media (min-width: ${breakpoints.lgTablet}) and (max-width: ${breakpoints.desktop}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.desktop][variant]};\n  }\n\n  // Lg Desktop\n  @media (min-width: ${breakpoints.desktop}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.lgDesktop][variant]};\n  }\n`;\n\nconst sideDrawerBaseStyles = css`\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n\n  & > ${Card.Surface.toString()} {\n    border-radius: 0;\n    height: 100%;\n  }\n\n  &:not([open]) {\n    display: block;\n  }\n`;\n\nexport const leftDrawerStyles = css`\n  ${sideDrawerBaseStyles}\n  inset: 0 auto 0 0;\n`;\n\nexport const rightDrawerStyles = css`\n  ${sideDrawerBaseStyles}\n  inset: 0 0 0 auto;\n`;\n"],"names":["theme","css","Card","heightMap","widthMap"],"mappings":";;;;;;;AAMA,MAAM,EAAE,WAAW,EAAE,GAAGA,WAAK;AAEtB,MAAM,WAAW,GAAGC,UAAG,CAAA,CAAA,oBAAA,EAGtBC,SAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAA,YAAA,EACb,CAAC,EAAE,OAAO,EAAE,KAAKC,mBAAS,CAAC,OAAO,CAAC,CAAA,8GAAA,EAazB,WAAW,CAAC,MAAM,CAAA,wBAAA,EAA4B,WAAW,CAAC,MAAM,CAAA,YAAA,EAC3E,CAAC,EAAE,OAAO,EAAE,KAAKC,kBAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIhD,WAAW,CAAC,MAAM,CAAA,iBAAA,EAAqB,WAAW,CAAC,QAAQ,CAAA,YAAA,EACjE,CAAC,EAAE,OAAO,EAAE,KAAKA,kBAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIlD,WAAW,CAAC,QAAQ,CAAA,iBAAA,EAAqB,WAAW,CAAC,OAAO,CAAA,YAAA,EAClE,CAAC,EAAE,OAAO,EAAE,KAAKA,kBAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIjD,WAAW,CAAC,OAAO,CAAA,YAAA,EACzB,CAAC,EAAE,OAAO,EAAE,KAAKA,kBAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAA,EAAA;AAI1E,MAAM,oBAAoB,GAAGH,UAAG,CAAA,CAAA,oIAAA,EAWxBC,SAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAA,2DAAA,CAQ9B;MAEY,gBAAgB,GAAGD,UAAG,CAAA,CAAA,EAC/B,oBAAoB;MAIX,iBAAiB,GAAGA,UAAG,CAAA,CAAA,EAChC,oBAAoB;;;;;;"}

package/dist/components/Modal/components/Dialog/styles/modalTypeStyles.js

@@ -4,8 +4,8 @@ import { theme } from '../../../../../theme/index.js';
 import { heightMap, widthMap } from '../constants.js';
 
 const { breakpoints } = theme;
-const modalStyles = css `min-width:464px;& > ${Card.Surface}{max-height:${({ variant }) => heightMap[variant]};}&:not([open]){display:block;position:fixed;inset:0;transform:translate(-50%, -50%);}@media (min-width: calc(${breakpoints.mobile} + 1px))and (max-width: ${breakpoints.tablet}){max-width:${({ variant }) => widthMap[breakpoints.tablet][variant]};}@media (min-width: ${breakpoints.tablet})and (max-width: ${breakpoints.lgTablet}){max-width:${({ variant }) => widthMap[breakpoints.lgTablet][variant]};}@media (min-width: ${breakpoints.lgTablet})and (max-width: ${breakpoints.desktop}){max-width:${({ variant }) => widthMap[breakpoints.desktop][variant]};}@media (min-width: ${breakpoints.desktop}){max-width:${({ variant }) => widthMap[breakpoints.lgDesktop][variant]};}`;
-const sideDrawerBaseStyles = css `height:100%;max-height:100%;min-width:320px;width:400px;margin:0;position:fixed;transform:none;border-radius:0;overflow:visible;& > ${Card.Surface}{border-radius:0;height:100%;}&:not([open]){display:block;}`;
+const modalStyles = css `min-width:464px;& > ${Card.Surface.toString()}{max-height:${({ variant }) => heightMap[variant]};}&:not([open]){display:block;position:fixed;inset:0;transform:translate(-50%, -50%);}@media (min-width: calc(${breakpoints.mobile} + 1px))and (max-width: ${breakpoints.tablet}){max-width:${({ variant }) => widthMap[breakpoints.tablet][variant]};}@media (min-width: ${breakpoints.tablet})and (max-width: ${breakpoints.lgTablet}){max-width:${({ variant }) => widthMap[breakpoints.lgTablet][variant]};}@media (min-width: ${breakpoints.lgTablet})and (max-width: ${breakpoints.desktop}){max-width:${({ variant }) => widthMap[breakpoints.desktop][variant]};}@media (min-width: ${breakpoints.desktop}){max-width:${({ variant }) => widthMap[breakpoints.lgDesktop][variant]};}`;
+const sideDrawerBaseStyles = css `height:100%;max-height:100%;min-width:320px;width:400px;margin:0;position:fixed;transform:none;border-radius:0;overflow:visible;& > ${Card.Surface.toString()}{border-radius:0;height:100%;}&:not([open]){display:block;}`;
 const leftDrawerStyles = css `${sideDrawerBaseStyles} inset:0 auto 0 0;`;
 const rightDrawerStyles = css `${sideDrawerBaseStyles} inset:0 0 0 auto;`;
 

package/dist/components/Modal/components/Dialog/styles/modalTypeStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"modalTypeStyles.js","sources":["../../../../../../src/components/Modal/components/Dialog/styles/modalTypeStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { ModalVariants } from '../../../types';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { heightMap, widthMap } from '../constants';\n\nconst { breakpoints } = theme;\n\nexport const modalStyles = css<{ variant: ModalVariants }>`\n  min-width: 464px;\n\n  & > ${Card.Surface} {\n    max-height: ${({ variant }) => heightMap[variant]};\n  }\n\n  &:not([open]) {\n    display: block;\n    position: fixed;\n    inset: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  // ** Responsive Design ** //\n\n  // Tablet\n  @media (min-width: calc(${breakpoints.mobile} + 1px)) and (max-width: ${breakpoints.tablet}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.tablet][variant]};\n  }\n\n  // Lg Tablet\n  @media (min-width: ${breakpoints.tablet}) and (max-width: ${breakpoints.lgTablet}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.lgTablet][variant]};\n  }\n\n  // Desktop\n  @media (min-width: ${breakpoints.lgTablet}) and (max-width: ${breakpoints.desktop}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.desktop][variant]};\n  }\n\n  // Lg Desktop\n  @media (min-width: ${breakpoints.desktop}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.lgDesktop][variant]};\n  }\n`;\n\nconst sideDrawerBaseStyles = css`\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n\n  & > ${Card.Surface} {\n    border-radius: 0;\n    height: 100%;\n  }\n\n  &:not([open]) {\n    display: block;\n  }\n`;\n\nexport const leftDrawerStyles = css`\n  ${sideDrawerBaseStyles}\n  inset: 0 auto 0 0;\n`;\n\nexport const rightDrawerStyles = css`\n  ${sideDrawerBaseStyles}\n  inset: 0 0 0 auto;\n`;\n"],"names":[],"mappings":";;;;;AAMA,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK;AAEtB,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA,oBAAA,EAGtB,IAAI,CAAC,OAAO,CAAA,YAAA,EACF,CAAC,EAAE,OAAO,EAAE,KAAK,SAAS,CAAC,OAAO,CAAC,CAAA,8GAAA,EAazB,WAAW,CAAC,MAAM,CAAA,wBAAA,EAA4B,WAAW,CAAC,MAAM,CAAA,YAAA,EAC3E,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIhD,WAAW,CAAC,MAAM,CAAA,iBAAA,EAAqB,WAAW,CAAC,QAAQ,CAAA,YAAA,EACjE,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIlD,WAAW,CAAC,QAAQ,CAAA,iBAAA,EAAqB,WAAW,CAAC,OAAO,CAAA,YAAA,EAClE,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIjD,WAAW,CAAC,OAAO,CAAA,YAAA,EACzB,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAA,EAAA;AAI1E,MAAM,oBAAoB,GAAG,GAAG,CAAA,CAAA,oIAAA,EAWxB,IAAI,CAAC,OAAO,6DAQnB;MAEY,gBAAgB,GAAG,GAAG,CAAA,CAAA,EAC/B,oBAAoB;MAIX,iBAAiB,GAAG,GAAG,CAAA,CAAA,EAChC,oBAAoB;;;;"}
+{"version":3,"file":"modalTypeStyles.js","sources":["../../../../../../src/components/Modal/components/Dialog/styles/modalTypeStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { ModalVariants } from '../../../types';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { heightMap, widthMap } from '../constants';\n\nconst { breakpoints } = theme;\n\nexport const modalStyles = css<{ variant: ModalVariants }>`\n  min-width: 464px;\n\n  & > ${Card.Surface.toString()} {\n    max-height: ${({ variant }) => heightMap[variant]};\n  }\n\n  &:not([open]) {\n    display: block;\n    position: fixed;\n    inset: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  // ** Responsive Design ** //\n\n  // Tablet\n  @media (min-width: calc(${breakpoints.mobile} + 1px)) and (max-width: ${breakpoints.tablet}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.tablet][variant]};\n  }\n\n  // Lg Tablet\n  @media (min-width: ${breakpoints.tablet}) and (max-width: ${breakpoints.lgTablet}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.lgTablet][variant]};\n  }\n\n  // Desktop\n  @media (min-width: ${breakpoints.lgTablet}) and (max-width: ${breakpoints.desktop}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.desktop][variant]};\n  }\n\n  // Lg Desktop\n  @media (min-width: ${breakpoints.desktop}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.lgDesktop][variant]};\n  }\n`;\n\nconst sideDrawerBaseStyles = css`\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n\n  & > ${Card.Surface.toString()} {\n    border-radius: 0;\n    height: 100%;\n  }\n\n  &:not([open]) {\n    display: block;\n  }\n`;\n\nexport const leftDrawerStyles = css`\n  ${sideDrawerBaseStyles}\n  inset: 0 auto 0 0;\n`;\n\nexport const rightDrawerStyles = css`\n  ${sideDrawerBaseStyles}\n  inset: 0 0 0 auto;\n`;\n"],"names":[],"mappings":";;;;;AAMA,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK;AAEtB,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA,oBAAA,EAGtB,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAA,YAAA,EACb,CAAC,EAAE,OAAO,EAAE,KAAK,SAAS,CAAC,OAAO,CAAC,CAAA,8GAAA,EAazB,WAAW,CAAC,MAAM,CAAA,wBAAA,EAA4B,WAAW,CAAC,MAAM,CAAA,YAAA,EAC3E,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIhD,WAAW,CAAC,MAAM,CAAA,iBAAA,EAAqB,WAAW,CAAC,QAAQ,CAAA,YAAA,EACjE,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIlD,WAAW,CAAC,QAAQ,CAAA,iBAAA,EAAqB,WAAW,CAAC,OAAO,CAAA,YAAA,EAClE,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIjD,WAAW,CAAC,OAAO,CAAA,YAAA,EACzB,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAA,EAAA;AAI1E,MAAM,oBAAoB,GAAG,GAAG,CAAA,CAAA,oIAAA,EAWxB,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAA,2DAAA,CAQ9B;MAEY,gBAAgB,GAAG,GAAG,CAAA,CAAA,EAC/B,oBAAoB;MAIX,iBAAiB,GAAG,GAAG,CAAA,CAAA,EAChC,oBAAoB;;;;"}