@veeqo/ui 9.10.3 → 10.0.0-beta.2

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

@@ -1,21 +1,20 @@
-import { ComponentSize, ImperialWeight, MetricWeight } from '../types';
-export interface BaseWeightProps {
-    hasError?: boolean;
+import { ComponentSize, ImperialWeight, InputProps, MetricWeight } from '../types';
+export type BaseWeightProps = InputProps & {
     size?: ComponentSize;
     className?: string;
-}
-export interface GramWeightProps extends BaseWeightProps {
+};
+export type GramWeightProps = BaseWeightProps & {
     weightUnit: MetricWeight;
     gram: string;
     handleChangeGram: (value: string) => void;
-}
-export interface LbWeightProps extends BaseWeightProps {
+};
+export type LbWeightProps = BaseWeightProps & {
     weightUnit: ImperialWeight;
     ounce: string;
     pound: string;
     handleChangeOunce: (value: string) => void;
     handleChangePound: (value: string) => void;
-}
+};
 export type WeightProps = GramWeightProps | LbWeightProps;
 export declare const isWeightMetric: (props: WeightProps) => props is GramWeightProps;
 export declare const isWeightImperial: (props: WeightProps) => props is LbWeightProps;

package/dist/components/WeightInput/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/WeightInput/types.ts"],"sourcesContent":["import { ComponentSize, ImperialWeight, MetricWeight } from '../types';\n\nexport interface BaseWeightProps {\n  hasError?: boolean;\n  size?: ComponentSize;\n  className?: string;\n}\n\nexport interface GramWeightProps extends BaseWeightProps {\n  weightUnit: MetricWeight;\n  gram: string;\n  handleChangeGram: (value: string) => void;\n}\n\nexport interface LbWeightProps extends BaseWeightProps {\n  weightUnit: ImperialWeight;\n  ounce: string;\n  pound: string;\n  handleChangeOunce: (value: string) => void;\n  handleChangePound: (value: string) => void;\n}\n\nexport type WeightProps = GramWeightProps | LbWeightProps;\n\nexport const isWeightMetric = (props: WeightProps): props is GramWeightProps => {\n  return props.weightUnit === 'g';\n};\n\nexport const isWeightImperial = (props: WeightProps): props is LbWeightProps => {\n  return props.weightUnit === 'lb' || props.weightUnit === 'oz';\n};\n"],"names":[],"mappings":"AAwBa,MAAA,cAAc,GAAG,CAAC,KAAkB,KAA8B;AAC7E,IAAA,OAAO,KAAK,CAAC,UAAU,KAAK,GAAG;AACjC;AAEa,MAAA,gBAAgB,GAAG,CAAC,KAAkB,KAA4B;IAC7E,OAAO,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,UAAU,KAAK,IAAI;AAC/D;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/components/WeightInput/types.ts"],"sourcesContent":["import { ComponentSize, ImperialWeight, InputProps, MetricWeight } from '../types';\n\nexport type BaseWeightProps = InputProps & {\n  size?: ComponentSize;\n  className?: string;\n};\n\nexport type GramWeightProps = BaseWeightProps & {\n  weightUnit: MetricWeight;\n  gram: string;\n  handleChangeGram: (value: string) => void;\n};\n\nexport type LbWeightProps = BaseWeightProps & {\n  weightUnit: ImperialWeight;\n  ounce: string;\n  pound: string;\n  handleChangeOunce: (value: string) => void;\n  handleChangePound: (value: string) => void;\n};\n\nexport type WeightProps = GramWeightProps | LbWeightProps;\n\nexport const isWeightMetric = (props: WeightProps): props is GramWeightProps => {\n  return props.weightUnit === 'g';\n};\n\nexport const isWeightImperial = (props: WeightProps): props is LbWeightProps => {\n  return props.weightUnit === 'lb' || props.weightUnit === 'oz';\n};\n"],"names":[],"mappings":"AAuBa,MAAA,cAAc,GAAG,CAAC,KAAkB,KAA8B;AAC7E,IAAA,OAAO,KAAK,CAAC,UAAU,KAAK,GAAG;AACjC;AAEa,MAAA,gBAAgB,GAAG,CAAC,KAAkB,KAA4B;IAC7E,OAAO,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,UAAU,KAAK,IAAI;AAC/D;;;;"}

package/dist/components/index.d.ts

@@ -28,6 +28,7 @@ export { Dropdown } from './Dropdown';
 export { FilterTag } from './FilterTag';
 export { Grid } from './Grid';
 export { Image } from './Image';
+export { InputAffix } from './InputAffix';
 export { InputGroup } from './InputGroup';
 export { LegacyDataTable } from './LegacyDataTable';
 export { Loader } from './Loader';

package/dist/components/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","sources":["../../src/components/types.ts"],"sourcesContent":["import { SyntheticEvent } from 'react';\n\nexport enum ComponentSize {\n  base = 'base',\n  sm = 'sm',\n}\n\nexport type MetricWeight = 'g';\nexport type ImperialWeight = 'lb' | 'oz';\n\nexport type EventHandlerProps = {\n  onClick?: (event: SyntheticEvent) => void;\n  onKeyUp?: (event: SyntheticEvent) => void;\n  onKeyDown?: (event: SyntheticEvent) => void;\n  onKeyPress?: (event: SyntheticEvent) => void;\n  onMouseEnter?: (event: SyntheticEvent) => void;\n  onMouseLeave?: (event: SyntheticEvent) => void;\n  onChange?: (event: SyntheticEvent) => void;\n  onBlur?: (event: SyntheticEvent) => void;\n  onFocus?: (event: SyntheticEvent) => void;\n};\n"],"names":["ComponentSize"],"mappings":";;AAEYA;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,aAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACX,CAAC,EAHWA,qBAAa,KAAbA,qBAAa,GAGxB,EAAA,CAAA,CAAA;;"}
+{"version":3,"file":"types.cjs","sources":["../../src/components/types.ts"],"sourcesContent":["import { SyntheticEvent } from 'react';\n\nexport enum ComponentSize {\n  base = 'base',\n  sm = 'sm',\n}\n\nexport type MetricWeight = 'g';\nexport type ImperialWeight = 'lb' | 'oz';\n\nexport type EventHandlerProps = {\n  onClick?: (event: SyntheticEvent) => void;\n  onKeyUp?: (event: SyntheticEvent) => void;\n  onKeyDown?: (event: SyntheticEvent) => void;\n  onKeyPress?: (event: SyntheticEvent) => void;\n  onMouseEnter?: (event: SyntheticEvent) => void;\n  onMouseLeave?: (event: SyntheticEvent) => void;\n  onChange?: (event: SyntheticEvent) => void;\n  onBlur?: (event: SyntheticEvent) => void;\n  onFocus?: (event: SyntheticEvent) => void;\n};\n\n/* Geneeric props for all input field components (e.g. TextField, Select, etc.) */\nexport type InputProps = {\n  hasError?: boolean;\n  disabled?: boolean;\n  compact?: boolean;\n};\n"],"names":["ComponentSize"],"mappings":";;AAEYA;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,aAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACX,CAAC,EAHWA,qBAAa,KAAbA,qBAAa,GAGxB,EAAA,CAAA,CAAA;;"}

package/dist/components/types.d.ts

@@ -16,3 +16,8 @@ export type EventHandlerProps = {
     onBlur?: (event: SyntheticEvent) => void;
     onFocus?: (event: SyntheticEvent) => void;
 };
+export type InputProps = {
+    hasError?: boolean;
+    disabled?: boolean;
+    compact?: boolean;
+};

package/dist/components/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../src/components/types.ts"],"sourcesContent":["import { SyntheticEvent } from 'react';\n\nexport enum ComponentSize {\n  base = 'base',\n  sm = 'sm',\n}\n\nexport type MetricWeight = 'g';\nexport type ImperialWeight = 'lb' | 'oz';\n\nexport type EventHandlerProps = {\n  onClick?: (event: SyntheticEvent) => void;\n  onKeyUp?: (event: SyntheticEvent) => void;\n  onKeyDown?: (event: SyntheticEvent) => void;\n  onKeyPress?: (event: SyntheticEvent) => void;\n  onMouseEnter?: (event: SyntheticEvent) => void;\n  onMouseLeave?: (event: SyntheticEvent) => void;\n  onChange?: (event: SyntheticEvent) => void;\n  onBlur?: (event: SyntheticEvent) => void;\n  onFocus?: (event: SyntheticEvent) => void;\n};\n"],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,aAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACX,CAAC,EAHW,aAAa,KAAb,aAAa,GAGxB,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../src/components/types.ts"],"sourcesContent":["import { SyntheticEvent } from 'react';\n\nexport enum ComponentSize {\n  base = 'base',\n  sm = 'sm',\n}\n\nexport type MetricWeight = 'g';\nexport type ImperialWeight = 'lb' | 'oz';\n\nexport type EventHandlerProps = {\n  onClick?: (event: SyntheticEvent) => void;\n  onKeyUp?: (event: SyntheticEvent) => void;\n  onKeyDown?: (event: SyntheticEvent) => void;\n  onKeyPress?: (event: SyntheticEvent) => void;\n  onMouseEnter?: (event: SyntheticEvent) => void;\n  onMouseLeave?: (event: SyntheticEvent) => void;\n  onChange?: (event: SyntheticEvent) => void;\n  onBlur?: (event: SyntheticEvent) => void;\n  onFocus?: (event: SyntheticEvent) => void;\n};\n\n/* Geneeric props for all input field components (e.g. TextField, Select, etc.) */\nexport type InputProps = {\n  hasError?: boolean;\n  disabled?: boolean;\n  compact?: boolean;\n};\n"],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,aAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACX,CAAC,EAHW,aAAa,KAAb,aAAa,GAGxB,EAAA,CAAA,CAAA;;;;"}

package/dist/hoc/withLabels/styled.cjs

@@ -9,11 +9,11 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Label = styled__default.default.label.withConfig({ displayName: "vui--Label", componentId: "vui--qydg5r" }) `display:block;font-family:${index.theme.text.inputLabel.fontFamily};font-size:${index.theme.text.inputLabel.fontSize};font-weight:${index.theme.text.inputLabel.fontWeight};line-height:${index.theme.text.inputLabel.lineHeight};color:${index.theme.text.inputLabel.color};`;
-const Hint = styled__default.default.span.withConfig({ displayName: "vui--Hint", componentId: "vui--1p3i1v3" }) `display:block;font-family:${index.theme.fontFamily};font-size:${index.theme.sizes[3]};line-height:${index.theme.sizes[4]};color:${index.theme.colors.neutral.ink.light};`;
-const Error = styled__default.default.span.withConfig({ displayName: "vui--Error", componentId: "vui--9vxkaw" }) `display:block;font-family:${index.theme.text.error.fontFamily};font-size:${index.theme.text.error.fontSize};font-weight:${index.theme.text.error.fontWeight};line-height:${index.theme.text.error.lineHeight};color:${index.theme.text.error.color};&::before{content:'';position:absolute;top:0;bottom:0;left:calc(${index.theme.sizes[2]} * -1);width:2px;background-color:${index.theme.colors.secondary.red.base};}`;
-const RootStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--RootStack", componentId: "vui--10dmq2i" }) `position:relative;`;
-const BlockTooltip = styled__default.default(Tooltip.Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1haf85r" }) `display:block;&-hoverable{display:flex;}`;
+const RootStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--RootStack", componentId: "vui--8t7kme" }) `position:relative;& > * + *{margin-top:${index.theme.sizes.sm};}`;
+const Label = styled__default.default.label.withConfig({ displayName: "vui--Label", componentId: "vui--17v8nzf" }) `display:block;font-family:${index.theme.text.inputLabel.fontFamily};font-weight:${index.theme.text.inputLabel.fontWeight};font-size:${index.theme.sizes[4]};line-height:${index.theme.sizes[5]};color:${index.theme.text.inputLabel.color};`;
+const Hint = styled__default.default.span.withConfig({ displayName: "vui--Hint", componentId: "vui--zb608e" }) `margin-top:${index.theme.sizes.xs};display:block;font-family:${index.theme.fontFamily};font-size:0.875rem;line-height:${index.theme.sizes[5]};color:${index.theme.colors.neutral.ink.light};`;
+const Error = styled__default.default.span.withConfig({ displayName: "vui--Error", componentId: "vui--1u9n7dv" }) `display:block;font-family:${index.theme.text.error.fontFamily};font-size:${index.theme.text.error.fontSize};/*${index.theme.text.error.fontWeight}*/line-height:${index.theme.text.error.lineHeight};color:${index.theme.text.error.color};`;
+const BlockTooltip = styled__default.default(Tooltip.Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1w0ilq2" }) `display:block;&-hoverable{display:flex;}`;
 
 exports.BlockTooltip = BlockTooltip;
 exports.Error = Error;

package/dist/hoc/withLabels/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/hoc/withLabels/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../components/Stack';\nimport { Tooltip } from '../../components/Tooltip';\nimport { theme } from '../../theme';\n\nexport const Label = styled.label`\n  display: block;\n  font-family: ${theme.text.inputLabel.fontFamily};\n  font-size: ${theme.text.inputLabel.fontSize};\n  font-weight: ${theme.text.inputLabel.fontWeight};\n  line-height: ${theme.text.inputLabel.lineHeight};\n  color: ${theme.text.inputLabel.color};\n`;\n\nexport const Hint = styled.span`\n  display: block;\n  font-family: ${theme.fontFamily};\n  font-size: ${theme.sizes[3]};\n  line-height: ${theme.sizes[4]};\n  color: ${theme.colors.neutral.ink.light};\n`;\n\nexport const Error = styled.span`\n  display: block;\n  font-family: ${theme.text.error.fontFamily};\n  font-size: ${theme.text.error.fontSize};\n  font-weight: ${theme.text.error.fontWeight};\n  line-height: ${theme.text.error.lineHeight};\n  color: ${theme.text.error.color};\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: calc(${theme.sizes[2]} * -1);\n    width: 2px;\n    background-color: ${theme.colors.secondary.red.base};\n  }\n`;\n\nexport const RootStack = styled(Stack)`\n  position: relative;\n`;\n\nexport const BlockTooltip = styled(Tooltip)`\n  /* Tooltip uses inline-block containers which add more height when\n     the child component is an inline element (e.g. Glyph or an SVG),\n     so we need to set to block to preserve the height and fix alignment. */\n  display: block;\n  &-hoverable {\n    display: flex;\n  }\n`;\n"],"names":["styled","theme","Stack","Tooltip"],"mappings":";;;;;;;;;;;MAKa,KAAK,GAAGA,uBAAM,CAAC,KAAK,CAEhB,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,0BAAA,EAAAC,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAClC,WAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAA,aAAA,EAC5BA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAChC,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,OAAA,EACtCA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAA,CAAA;AAGzB,MAAA,IAAI,GAAGD,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,0BAAA,EAEdC,WAAK,CAAC,UAAU,CAClB,WAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,aAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,UACpBA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;AAGlC,MAAM,KAAK,GAAGD,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,0BAAA,EAEfC,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC7B,WAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACvB,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA,aAAA,EAC3BA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA,OAAA,EACjCA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAOhB,iEAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,kCAAA,EAEPA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;MAI1C,SAAS,GAAGD,uBAAM,CAACE,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kBAAA;MAIzB,YAAY,GAAGF,uBAAM,CAACG,eAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wCAAA;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/hoc/withLabels/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../components/Stack';\nimport { Tooltip } from '../../components/Tooltip';\nimport { theme } from '../../theme';\n\nexport const RootStack = styled(Stack)`\n  position: relative;\n\n  & > * + * {\n    margin-top: ${theme.sizes.sm};\n  }\n`;\n\nexport const Label = styled.label`\n  display: block;\n  font-family: ${theme.text.inputLabel.fontFamily};\n  font-weight: ${theme.text.inputLabel.fontWeight};\n  font-size: ${theme.sizes[4]};\n  line-height: ${theme.sizes[5]};\n  color: ${theme.text.inputLabel.color};\n`;\n\nexport const Hint = styled.span`\n  margin-top: ${theme.sizes.xs};\n  display: block;\n  font-family: ${theme.fontFamily};\n  font-size: 0.875rem;\n  line-height: ${theme.sizes[5]};\n  color: ${theme.colors.neutral.ink.light};\n`;\n\nexport const Error = styled.span`\n  display: block;\n  font-family: ${theme.text.error.fontFamily};\n  font-size: ${theme.text.error.fontSize};\n  /* font-weight: ${theme.text.error.fontWeight}; */\n  line-height: ${theme.text.error.lineHeight};\n  color: ${theme.text.error.color};\n`;\n\nexport const BlockTooltip = styled(Tooltip)`\n  /* Tooltip uses inline-block containers which add more height when\n     the child component is an inline element (e.g. Glyph or an SVG),\n     so we need to set to block to preserve the height and fix alignment. */\n  display: block;\n  &-hoverable {\n    display: flex;\n  }\n`;\n"],"names":["styled","Stack","theme","Tooltip"],"mappings":";;;;;;;;;;;AAKO,MAAM,SAAS,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAIpBC,WAAK,CAAC,KAAK,CAAC,EAAE;MAInB,KAAK,GAAGF,uBAAM,CAAC,KAAK,qGAEhBE,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,aAAA,EAChCA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,cAClCA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,aAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,OAAA,EACpBA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAA,CAAA;AAG/B,MAAM,IAAI,GAAGF,uBAAM,CAAC,IAAI,CACf,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,WAAA,EAAAE,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,2BAAA,EAEbA,WAAK,CAAC,UAAU,CAEhB,gCAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,UACpBA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;MAG5B,KAAK,GAAGF,uBAAM,CAAC,IAAI,CAEf,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,0BAAA,EAAAE,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC7B,WAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA,GAAA,EACpBA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC9B,cAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA,OAAA,EACjCA,WAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA,CAAA;MAGpB,YAAY,GAAGF,uBAAM,CAACG,eAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wCAAA;;;;;;;;"}

package/dist/hoc/withLabels/styled.d.ts

@@ -1,5 +1,5 @@
+export declare const RootStack: import("styled-components").StyledComponent<"div", any, import("../../components/Stack/types").StackProps, never>;
 export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
 export declare const Hint: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Error: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const RootStack: import("styled-components").StyledComponent<"div", any, import("../../components/Stack/types").StackProps, never>;
 export declare const BlockTooltip: import("styled-components").StyledComponent<({ children, text, content, config, reversed, className, withTriangle, initialShouldShow, useReactPortal, }: import("../../components/Tooltip/types").TooltipProps) => JSX.Element | null, any, {}, never>;

package/dist/hoc/withLabels/styled.js

@@ -3,11 +3,11 @@ import { Stack } from '../../components/Stack/Stack.js';
 import { Tooltip } from '../../components/Tooltip/Tooltip.js';
 import { theme } from '../../theme/index.js';
 
-const Label = styled.label.withConfig({ displayName: "vui--Label", componentId: "vui--qydg5r" }) `display:block;font-family:${theme.text.inputLabel.fontFamily};font-size:${theme.text.inputLabel.fontSize};font-weight:${theme.text.inputLabel.fontWeight};line-height:${theme.text.inputLabel.lineHeight};color:${theme.text.inputLabel.color};`;
-const Hint = styled.span.withConfig({ displayName: "vui--Hint", componentId: "vui--1p3i1v3" }) `display:block;font-family:${theme.fontFamily};font-size:${theme.sizes[3]};line-height:${theme.sizes[4]};color:${theme.colors.neutral.ink.light};`;
-const Error = styled.span.withConfig({ displayName: "vui--Error", componentId: "vui--9vxkaw" }) `display:block;font-family:${theme.text.error.fontFamily};font-size:${theme.text.error.fontSize};font-weight:${theme.text.error.fontWeight};line-height:${theme.text.error.lineHeight};color:${theme.text.error.color};&::before{content:'';position:absolute;top:0;bottom:0;left:calc(${theme.sizes[2]} * -1);width:2px;background-color:${theme.colors.secondary.red.base};}`;
-const RootStack = styled(Stack).withConfig({ displayName: "vui--RootStack", componentId: "vui--10dmq2i" }) `position:relative;`;
-const BlockTooltip = styled(Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1haf85r" }) `display:block;&-hoverable{display:flex;}`;
+const RootStack = styled(Stack).withConfig({ displayName: "vui--RootStack", componentId: "vui--8t7kme" }) `position:relative;& > * + *{margin-top:${theme.sizes.sm};}`;
+const Label = styled.label.withConfig({ displayName: "vui--Label", componentId: "vui--17v8nzf" }) `display:block;font-family:${theme.text.inputLabel.fontFamily};font-weight:${theme.text.inputLabel.fontWeight};font-size:${theme.sizes[4]};line-height:${theme.sizes[5]};color:${theme.text.inputLabel.color};`;
+const Hint = styled.span.withConfig({ displayName: "vui--Hint", componentId: "vui--zb608e" }) `margin-top:${theme.sizes.xs};display:block;font-family:${theme.fontFamily};font-size:0.875rem;line-height:${theme.sizes[5]};color:${theme.colors.neutral.ink.light};`;
+const Error = styled.span.withConfig({ displayName: "vui--Error", componentId: "vui--1u9n7dv" }) `display:block;font-family:${theme.text.error.fontFamily};font-size:${theme.text.error.fontSize};/*${theme.text.error.fontWeight}*/line-height:${theme.text.error.lineHeight};color:${theme.text.error.color};`;
+const BlockTooltip = styled(Tooltip).withConfig({ displayName: "vui--BlockTooltip", componentId: "vui--1w0ilq2" }) `display:block;&-hoverable{display:flex;}`;
 
 export { BlockTooltip, Error, Hint, Label, RootStack };
 //# sourceMappingURL=styled.js.map

package/dist/hoc/withLabels/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/hoc/withLabels/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../components/Stack';\nimport { Tooltip } from '../../components/Tooltip';\nimport { theme } from '../../theme';\n\nexport const Label = styled.label`\n  display: block;\n  font-family: ${theme.text.inputLabel.fontFamily};\n  font-size: ${theme.text.inputLabel.fontSize};\n  font-weight: ${theme.text.inputLabel.fontWeight};\n  line-height: ${theme.text.inputLabel.lineHeight};\n  color: ${theme.text.inputLabel.color};\n`;\n\nexport const Hint = styled.span`\n  display: block;\n  font-family: ${theme.fontFamily};\n  font-size: ${theme.sizes[3]};\n  line-height: ${theme.sizes[4]};\n  color: ${theme.colors.neutral.ink.light};\n`;\n\nexport const Error = styled.span`\n  display: block;\n  font-family: ${theme.text.error.fontFamily};\n  font-size: ${theme.text.error.fontSize};\n  font-weight: ${theme.text.error.fontWeight};\n  line-height: ${theme.text.error.lineHeight};\n  color: ${theme.text.error.color};\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: calc(${theme.sizes[2]} * -1);\n    width: 2px;\n    background-color: ${theme.colors.secondary.red.base};\n  }\n`;\n\nexport const RootStack = styled(Stack)`\n  position: relative;\n`;\n\nexport const BlockTooltip = styled(Tooltip)`\n  /* Tooltip uses inline-block containers which add more height when\n     the child component is an inline element (e.g. Glyph or an SVG),\n     so we need to set to block to preserve the height and fix alignment. */\n  display: block;\n  &-hoverable {\n    display: flex;\n  }\n`;\n"],"names":[],"mappings":";;;;;MAKa,KAAK,GAAG,MAAM,CAAC,KAAK,CAEhB,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,0BAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAClC,WAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAA,aAAA,EAC5B,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAChC,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,OAAA,EACtC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAA,CAAA;AAGzB,MAAA,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,0BAAA,EAEd,KAAK,CAAC,UAAU,CAClB,WAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,aAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,UACpB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;AAGlC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,0BAAA,EAEf,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC7B,WAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACvB,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA,aAAA,EAC3B,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA,OAAA,EACjC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAOhB,iEAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,kCAAA,EAEP,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;MAI1C,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kBAAA;MAIzB,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wCAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/hoc/withLabels/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../components/Stack';\nimport { Tooltip } from '../../components/Tooltip';\nimport { theme } from '../../theme';\n\nexport const RootStack = styled(Stack)`\n  position: relative;\n\n  & > * + * {\n    margin-top: ${theme.sizes.sm};\n  }\n`;\n\nexport const Label = styled.label`\n  display: block;\n  font-family: ${theme.text.inputLabel.fontFamily};\n  font-weight: ${theme.text.inputLabel.fontWeight};\n  font-size: ${theme.sizes[4]};\n  line-height: ${theme.sizes[5]};\n  color: ${theme.text.inputLabel.color};\n`;\n\nexport const Hint = styled.span`\n  margin-top: ${theme.sizes.xs};\n  display: block;\n  font-family: ${theme.fontFamily};\n  font-size: 0.875rem;\n  line-height: ${theme.sizes[5]};\n  color: ${theme.colors.neutral.ink.light};\n`;\n\nexport const Error = styled.span`\n  display: block;\n  font-family: ${theme.text.error.fontFamily};\n  font-size: ${theme.text.error.fontSize};\n  /* font-weight: ${theme.text.error.fontWeight}; */\n  line-height: ${theme.text.error.lineHeight};\n  color: ${theme.text.error.color};\n`;\n\nexport const BlockTooltip = styled(Tooltip)`\n  /* Tooltip uses inline-block containers which add more height when\n     the child component is an inline element (e.g. Glyph or an SVG),\n     so we need to set to block to preserve the height and fix alignment. */\n  display: block;\n  &-hoverable {\n    display: flex;\n  }\n`;\n"],"names":[],"mappings":";;;;;AAKO,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAIpB,KAAK,CAAC,KAAK,CAAC,EAAE;MAInB,KAAK,GAAG,MAAM,CAAC,KAAK,qGAEhB,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,aAAA,EAChC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,cAClC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,aAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,OAAA,EACpB,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAA,CAAA;AAG/B,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CACf,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,WAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,2BAAA,EAEb,KAAK,CAAC,UAAU,CAEhB,gCAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,UACpB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;MAG5B,KAAK,GAAG,MAAM,CAAC,IAAI,CAEf,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,0BAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC7B,WAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA,GAAA,EACpB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC9B,cAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA,OAAA,EACjC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA,CAAA;MAGpB,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wCAAA;;;;"}

package/dist/hoc/withLabels/withLabels.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var AttentionIcon = require('../../tempIcons/AttentionIcon.cjs');
+var CriticalIcon = require('../../tempIcons/CriticalIcon.cjs');
 var index = require('../../theme/index.cjs');
 var Stack = require('../../components/Stack/Stack.cjs');
 var styled = require('./styled.cjs');
@@ -12,22 +12,23 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const withLabels = (Component) => ({ label, hint, error, tooltip, tooltipContent, ...otherProps }) => {
-    const componentId = useId.useId({ id: otherProps === null || otherProps === undefined ? undefined : otherProps.id, prefix: Component.name });
-    if (!label)
-        return React__default.default.createElement(Component, { hasError: !!error, ...otherProps });
-    return (React__default.default.createElement(styled.RootStack, { spacing: "sm", alignX: "stretch" },
-        React__default.default.createElement("div", { style: { marginBottom: index.theme.sizes.xs } },
+function withLabels(Component) {
+    return ({ label, hint, error, tooltip, tooltipContent, id, ...otherProps }) => {
+        const componentId = useId.useId({ id, prefix: Component.name });
+        if (!label)
+            return React__default.default.createElement(Component, { id: componentId, hasError: !!error, ...otherProps });
+        return (React__default.default.createElement(styled.RootStack, { spacing: "sm", alignX: "stretch" },
             React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
                 React__default.default.createElement(styled.Label, { id: `${componentId}-label`, htmlFor: componentId }, label),
                 (tooltip || tooltipContent) && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip, content: tooltipContent },
                     React__default.default.createElement(HelpIcon.HelpIcon, { "data-testid": "tooltip-help", width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light })))),
-            hint && React__default.default.createElement(styled.Hint, { id: `${componentId}-hint` }, hint)),
-        React__default.default.createElement(Component, { id: componentId, hasError: !!error, ...otherProps }),
-        error && (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "xs" },
-            React__default.default.createElement(AttentionIcon.AttentionIcon, { width: 16, height: 16, color: index.theme.colors.secondary.red.base }),
-            React__default.default.createElement(styled.Error, null, error)))));
-};
+            hint && React__default.default.createElement(styled.Hint, { id: `${componentId}-hint` }, hint),
+            React__default.default.createElement(Component, { id: componentId, hasError: !!error, ...otherProps }),
+            error && (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "xs" },
+                React__default.default.createElement(CriticalIcon.CriticalIcon, { width: 16, height: 16, color: index.theme.colors.secondary.red.base }),
+                React__default.default.createElement(styled.Error, null, error)))));
+    };
+}
 
 exports.withLabels = withLabels;
 //# sourceMappingURL=withLabels.cjs.map

package/dist/hoc/withLabels/withLabels.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactNode } from 'react';\nimport { AttentionIcon } from '../../tempIcons/AttentionIcon';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\nexport const withLabels =\n  <P extends object>(Component: ComponentType<P>): FC<P & WithLabelsProps> =>\n  ({ label, hint, error, tooltip, tooltipContent, ...otherProps }: WithLabelsProps) => {\n    const componentId = useId({ id: otherProps?.id, prefix: Component.name });\n\n    if (!label) return <Component hasError={!!error} {...(otherProps as P)} />;\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <div style={{ marginBottom: theme.sizes.xs }}>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            <Label id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Label>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n        </div>\n        <Component id={componentId} hasError={!!error} {...(otherProps as P)} />\n        {error && (\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <AttentionIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n            <Error>{error}</Error>\n          </Stack>\n        )}\n      </RootStack>\n    );\n  };\n"],"names":["useId","React","RootStack","theme","Stack","Label","BlockTooltip","HelpIcon","Hint","AttentionIcon","Error"],"mappings":";;;;;;;;;;;;;;AAkBa,MAAA,UAAU,GACrB,CAAmB,SAA2B,KAC9C,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,UAAU,EAAmB,KAAI;IAClF,MAAM,WAAW,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,SAAA,GAAA,SAAA,GAAV,UAAU,CAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzE,IAAA,IAAI,CAAC,KAAK;QAAE,OAAOC,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAA,CAAI;IAE1E,QACEA,sBAAC,CAAA,aAAA,CAAAC,gBAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;QACtCD,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAEE,WAAK,CAAC,KAAK,CAAC,EAAE,EAAE,EAAA;AAC1C,YAAAF,sBAAA,CAAA,aAAA,CAACG,WAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAAH,sBAAA,CAAA,aAAA,CAACI,YAAK,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAQ,MAAA,CAAA,EAAE,OAAO,EAAE,WAAW,EAAA,EACpD,KAAK,CACA;AACP,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBJ,sBAAA,CAAA,aAAA,CAACK,mBAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAL,sBAAA,CAAA,aAAA,CAACM,iBAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAEJ,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EACrC,CAAA,CACW,CAChB,CACK;AACP,YAAA,IAAI,IAAIF,sBAAA,CAAA,aAAA,CAACO,WAAI,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAO,KAAA,CAAA,EAAA,EAAG,IAAI,CAAQ,CACnD;AACN,QAAAP,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;AACvE,QAAA,KAAK,KACJA,sBAAC,CAAA,aAAA,CAAAG,WAAK,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;YACxDH,sBAAC,CAAA,aAAA,CAAAQ,2BAAa,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAEN,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;YAChFF,sBAAC,CAAA,aAAA,CAAAS,YAAK,QAAE,KAAK,CAAS,CAChB,CACT,CACS;AAEhB;;;;"}
+{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactNode } from 'react';\nimport { CriticalIcon } from '../../tempIcons/CriticalIcon';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\nexport function withLabels<P>(Component: ComponentType<P>): FC<P & WithLabelsProps> {\n  return ({ label, hint, error, tooltip, tooltipContent, id, ...otherProps }) => {\n    const componentId = useId({ id, prefix: Component.name });\n\n    if (!label) return <Component id={componentId} hasError={!!error} {...(otherProps as P)} />;\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n          <Label id={`${componentId}-label`} htmlFor={componentId}>\n            {label}\n          </Label>\n          {(tooltip || tooltipContent) && (\n            <BlockTooltip text={tooltip} content={tooltipContent}>\n              <HelpIcon\n                data-testid=\"tooltip-help\"\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\n            </BlockTooltip>\n          )}\n        </Stack>\n        {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n        <Component id={componentId} hasError={!!error} {...(otherProps as P)} />\n        {error && (\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n            <Error>{error}</Error>\n          </Stack>\n        )}\n      </RootStack>\n    );\n  };\n}\n"],"names":["useId","React","RootStack","Stack","Label","BlockTooltip","HelpIcon","theme","Hint","CriticalIcon","Error"],"mappings":";;;;;;;;;;;;;;AAkBM,SAAU,UAAU,CAAI,SAA2B,EAAA;AACvD,IAAA,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,KAAI;AAC5E,QAAA,MAAM,WAAW,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAOC,sBAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAO,GAAA,UAAgB,GAAI;QAE3F,QACEA,sBAAC,CAAA,aAAA,CAAAC,gBAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;AACtC,YAAAD,sBAAA,CAAA,aAAA,CAACE,WAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAAF,sBAAA,CAAA,aAAA,CAACG,YAAK,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAQ,MAAA,CAAA,EAAE,OAAO,EAAE,WAAW,EAAA,EACpD,KAAK,CACA;AACP,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBH,sBAAA,CAAA,aAAA,CAACI,mBAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAJ,sBAAA,CAAA,aAAA,CAACK,iBAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EACrC,CAAA,CACW,CAChB,CACK;YACP,IAAI,IAAIN,sBAAC,CAAA,aAAA,CAAAO,WAAI,EAAC,EAAA,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAG,EAAA,IAAI,CAAQ;AACvD,YAAAP,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;AACvE,YAAA,KAAK,KACJA,sBAAC,CAAA,aAAA,CAAAE,WAAK,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;gBACxDF,sBAAC,CAAA,aAAA,CAAAQ,yBAAY,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAEF,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;gBAC/EN,sBAAC,CAAA,aAAA,CAAAS,YAAK,QAAE,KAAK,CAAS,CAChB,CACT,CACS;AAEhB,KAAC;AACH;;;;"}

package/dist/hoc/withLabels/withLabels.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentType, FC, ReactNode } from 'react';
+import { ComponentType, FC, ReactNode } from 'react';
 export interface WithLabelsProps {
     id?: string;
     label?: ReactNode;
@@ -7,4 +7,4 @@ export interface WithLabelsProps {
     tooltip?: string;
     tooltipContent?: ReactNode;
 }
-export declare const withLabels: <P extends object>(Component: React.ComponentType<P>) => React.FC<P & WithLabelsProps>;
+export declare function withLabels<P>(Component: ComponentType<P>): FC<P & WithLabelsProps>;

package/dist/hoc/withLabels/withLabels.js

@@ -1,27 +1,28 @@
 import React__default from 'react';
-import { AttentionIcon } from '../../tempIcons/AttentionIcon.js';
+import { CriticalIcon } from '../../tempIcons/CriticalIcon.js';
 import { theme } from '../../theme/index.js';
 import { Stack } from '../../components/Stack/Stack.js';
 import { RootStack, Label, BlockTooltip, Hint, Error } from './styled.js';
 import { HelpIcon } from '../../tempIcons/HelpIcon.js';
 import { useId } from '../../hooks/useId.js';
 
-const withLabels = (Component) => ({ label, hint, error, tooltip, tooltipContent, ...otherProps }) => {
-    const componentId = useId({ id: otherProps === null || otherProps === undefined ? undefined : otherProps.id, prefix: Component.name });
-    if (!label)
-        return React__default.createElement(Component, { hasError: !!error, ...otherProps });
-    return (React__default.createElement(RootStack, { spacing: "sm", alignX: "stretch" },
-        React__default.createElement("div", { style: { marginBottom: theme.sizes.xs } },
+function withLabels(Component) {
+    return ({ label, hint, error, tooltip, tooltipContent, id, ...otherProps }) => {
+        const componentId = useId({ id, prefix: Component.name });
+        if (!label)
+            return React__default.createElement(Component, { id: componentId, hasError: !!error, ...otherProps });
+        return (React__default.createElement(RootStack, { spacing: "sm", alignX: "stretch" },
             React__default.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
                 React__default.createElement(Label, { id: `${componentId}-label`, htmlFor: componentId }, label),
                 (tooltip || tooltipContent) && (React__default.createElement(BlockTooltip, { text: tooltip, content: tooltipContent },
                     React__default.createElement(HelpIcon, { "data-testid": "tooltip-help", width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.neutral.ink.light })))),
-            hint && React__default.createElement(Hint, { id: `${componentId}-hint` }, hint)),
-        React__default.createElement(Component, { id: componentId, hasError: !!error, ...otherProps }),
-        error && (React__default.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "xs" },
-            React__default.createElement(AttentionIcon, { width: 16, height: 16, color: theme.colors.secondary.red.base }),
-            React__default.createElement(Error, null, error)))));
-};
+            hint && React__default.createElement(Hint, { id: `${componentId}-hint` }, hint),
+            React__default.createElement(Component, { id: componentId, hasError: !!error, ...otherProps }),
+            error && (React__default.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "xs" },
+                React__default.createElement(CriticalIcon, { width: 16, height: 16, color: theme.colors.secondary.red.base }),
+                React__default.createElement(Error, null, error)))));
+    };
+}
 
 export { withLabels };
 //# sourceMappingURL=withLabels.js.map

package/dist/hoc/withLabels/withLabels.js.map

@@ -1 +1 @@
-{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactNode } from 'react';\nimport { AttentionIcon } from '../../tempIcons/AttentionIcon';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\nexport const withLabels =\n  <P extends object>(Component: ComponentType<P>): FC<P & WithLabelsProps> =>\n  ({ label, hint, error, tooltip, tooltipContent, ...otherProps }: WithLabelsProps) => {\n    const componentId = useId({ id: otherProps?.id, prefix: Component.name });\n\n    if (!label) return <Component hasError={!!error} {...(otherProps as P)} />;\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <div style={{ marginBottom: theme.sizes.xs }}>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            <Label id={`${componentId}-label`} htmlFor={componentId}>\n              {label}\n            </Label>\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  width={theme.sizes.base}\n                  height={theme.sizes.base}\n                  color={theme.colors.neutral.ink.light}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n        </div>\n        <Component id={componentId} hasError={!!error} {...(otherProps as P)} />\n        {error && (\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <AttentionIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n            <Error>{error}</Error>\n          </Stack>\n        )}\n      </RootStack>\n    );\n  };\n"],"names":["React"],"mappings":";;;;;;;;AAkBa,MAAA,UAAU,GACrB,CAAmB,SAA2B,KAC9C,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,UAAU,EAAmB,KAAI;IAClF,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,SAAA,GAAA,SAAA,GAAV,UAAU,CAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzE,IAAA,IAAI,CAAC,KAAK;QAAE,OAAOA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAA,CAAI;IAE1E,QACEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;QACtCA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,EAAA;AAC1C,YAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAQ,MAAA,CAAA,EAAE,OAAO,EAAE,WAAW,EAAA,EACpD,KAAK,CACA;AACP,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EACrC,CAAA,CACW,CAChB,CACK;AACP,YAAA,IAAI,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAO,KAAA,CAAA,EAAA,EAAG,IAAI,CAAQ,CACnD;AACN,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;AACvE,QAAA,KAAK,KACJA,cAAC,CAAA,aAAA,CAAA,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;YACxDA,cAAC,CAAA,aAAA,CAAA,aAAa,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;YAChFA,cAAC,CAAA,aAAA,CAAA,KAAK,QAAE,KAAK,CAAS,CAChB,CACT,CACS;AAEhB;;;;"}
+{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, FC, ReactNode } from 'react';\nimport { CriticalIcon } from '../../tempIcons/CriticalIcon';\nimport { theme } from '../../theme';\nimport { Stack } from '../../components/Stack';\n\nimport { RootStack, Label, Hint, Error, BlockTooltip } from './styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { useId } from '../../hooks/useId';\n\nexport interface WithLabelsProps {\n  id?: string;\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n}\n\nexport function withLabels<P>(Component: ComponentType<P>): FC<P & WithLabelsProps> {\n  return ({ label, hint, error, tooltip, tooltipContent, id, ...otherProps }) => {\n    const componentId = useId({ id, prefix: Component.name });\n\n    if (!label) return <Component id={componentId} hasError={!!error} {...(otherProps as P)} />;\n\n    return (\n      <RootStack spacing=\"sm\" alignX=\"stretch\">\n        <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n          <Label id={`${componentId}-label`} htmlFor={componentId}>\n            {label}\n          </Label>\n          {(tooltip || tooltipContent) && (\n            <BlockTooltip text={tooltip} content={tooltipContent}>\n              <HelpIcon\n                data-testid=\"tooltip-help\"\n                width={theme.sizes.base}\n                height={theme.sizes.base}\n                color={theme.colors.neutral.ink.light}\n              />\n            </BlockTooltip>\n          )}\n        </Stack>\n        {hint && <Hint id={`${componentId}-hint`}>{hint}</Hint>}\n        <Component id={componentId} hasError={!!error} {...(otherProps as P)} />\n        {error && (\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"xs\">\n            <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n            <Error>{error}</Error>\n          </Stack>\n        )}\n      </RootStack>\n    );\n  };\n}\n"],"names":["React"],"mappings":";;;;;;;;AAkBM,SAAU,UAAU,CAAI,SAA2B,EAAA;AACvD,IAAA,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,KAAI;AAC5E,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAO,GAAA,UAAgB,GAAI;QAE3F,QACEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;AACtC,YAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAQ,MAAA,CAAA,EAAE,OAAO,EAAE,WAAW,EAAA,EACpD,KAAK,CACA;AACP,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EACrC,CAAA,CACW,CAChB,CACK;YACP,IAAI,IAAIA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAG,EAAA,IAAI,CAAQ;AACvD,YAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;AACvE,YAAA,KAAK,KACJA,cAAC,CAAA,aAAA,CAAA,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;gBACxDA,cAAC,CAAA,aAAA,CAAA,YAAY,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA;gBAC/EA,cAAC,CAAA,aAAA,CAAA,KAAK,QAAE,KAAK,CAAS,CAChB,CACT,CACS;AAEhB,KAAC;AACH;;;;"}

package/dist/index.cjs

@@ -34,12 +34,13 @@ var useScrollPosition = require('./components/DataTable/hooks/useScrollPosition.
 var useSelection = require('./components/DataTable/hooks/useSelection.cjs');
 var DescriptionList = require('./components/DescriptionList/DescriptionList.cjs');
 var DetailPage = require('./components/DetailPage/DetailPage.cjs');
-var index$1 = require('./components/DimensionsInput/index.cjs');
+var DimensionsInput = require('./components/DimensionsInput/DimensionsInput.cjs');
 var Dropdown = require('./components/Dropdown/Dropdown.cjs');
 var FilterTag = require('./components/FilterTag/FilterTag.cjs');
-var index$2 = require('./components/Grid/index.cjs');
+var index$1 = require('./components/Grid/index.cjs');
 var Image = require('./components/Image/Image.cjs');
-var index$3 = require('./components/InputGroup/index.cjs');
+var InputAffix = require('./components/InputAffix/InputAffix.cjs');
+var index$2 = require('./components/InputGroup/index.cjs');
 var LegacyDataTable = require('./components/LegacyDataTable/LegacyDataTable.cjs');
 var Loader = require('./components/Loader/Loader.cjs');
 var LoginWithAmazonButton = require('./components/LoginWithAmazonButton/LoginWithAmazonButton.cjs');
@@ -61,7 +62,7 @@ var Stack = require('./components/Stack/Stack.cjs');
 var Stepper = require('./components/Stepper/Stepper.cjs');
 var Tag = require('./components/Tag/Tag.cjs');
 var Text = require('./components/Text/Text.cjs');
-var index$4 = require('./components/TextField/index.cjs');
+var index$3 = require('./components/TextField/index.cjs');
 var ToastsLayout = require('./components/ToastsLayout/ToastsLayout.cjs');
 var Toggle = require('./components/Toggle/Toggle.cjs');
 var ToggleButton = require('./components/ToggleButton/ToggleButton.cjs');
@@ -73,9 +74,9 @@ var Popup = require('./components/VideoModal/components/Popup.cjs');
 var View = require('./components/View/View.cjs');
 var ViewTab = require('./components/ViewTab/ViewTab.cjs');
 var ViewsContainer = require('./components/ViewsContainer/ViewsContainer.cjs');
-var index$5 = require('./components/WeightInput/index.cjs');
+var WeightInput = require('./components/WeightInput/WeightInput.cjs');
 var Indicator = require('./components/Indicator/Indicator.cjs');
-var index$6 = require('./components/SelectDropdown/index.cjs');
+var index$4 = require('./components/SelectDropdown/index.cjs');
 var ThemeInjector = require('./components/ThemeInjector/ThemeInjector.cjs');
 var DataGrid = require('./components/DataGrid/DataGrid.cjs');
 var useClickOutside = require('./hooks/useClickOutside.cjs');
@@ -94,7 +95,7 @@ var withDeprecated = require('./hoc/withDeprecated.cjs');
 var buildClassnames = require('./utils/buildClassnames.cjs');
 var color = require('./utils/color.cjs');
 var generateId = require('./utils/generateId.cjs');
-var index$7 = require('./theme/index.cjs');
+var index$5 = require('./theme/index.cjs');
 var ActiveCheckboxIcon = require('./tempIcons/ActiveCheckboxIcon.cjs');
 var ActiveRadioIcon = require('./tempIcons/ActiveRadioIcon.cjs');
 var ArrowDownIcon = require('./tempIcons/ArrowDownIcon.cjs');
@@ -120,6 +121,7 @@ var InactiveRadioIcon = require('./tempIcons/InactiveRadioIcon.cjs');
 var InfoIcon = require('./tempIcons/InfoIcon.cjs');
 var LeftArrowIcon = require('./tempIcons/LeftArrowIcon.cjs');
 var MergeIcon = require('./tempIcons/MergeIcon.cjs');
+var MinusIcon = require('./tempIcons/MinusIcon.cjs');
 var PlusIcon = require('./tempIcons/PlusIcon.cjs');
 var RecommendIcon = require('./tempIcons/RecommendIcon.cjs');
 var ReorderIcon = require('./tempIcons/ReorderIcon.cjs');
@@ -181,12 +183,13 @@ exports.useScrollPosition = useScrollPosition.useScrollPosition;
 exports.useSelection = useSelection.useSelection;
 exports.DescriptionList = DescriptionList.DescriptionList;
 exports.DetailPage = DetailPage.DetailPage;
-exports.DimensionsInput = index$1.DimensionsInput;
+exports.DimensionsInput = DimensionsInput.DimensionsInput;
 exports.Dropdown = Dropdown.Dropdown;
 exports.FilterTag = FilterTag.FilterTag;
-exports.Grid = index$2.Grid;
+exports.Grid = index$1.Grid;
 exports.Image = Image.Image;
-exports.InputGroup = index$3.InputGroup;
+exports.InputAffix = InputAffix.InputAffix;
+exports.InputGroup = index$2.InputGroup;
 exports.LegacyDataTable = LegacyDataTable.LegacyDataTable;
 exports.Loader = Loader.Loader;
 exports.LoginWithAmazonButton = LoginWithAmazonButton.LoginWithAmazonButton;
@@ -208,7 +211,7 @@ exports.Stack = Stack.Stack;
 exports.Stepper = Stepper.Stepper;
 exports.Tag = Tag.Tag;
 exports.Text = Text.Text;
-exports.TextField = index$4.TextField;
+exports.TextField = index$3.TextField;
 exports.ToastsLayout = ToastsLayout.ToastsLayout;
 exports.Toggle = Toggle.Toggle;
 exports.ToggleButton = ToggleButton.ToggleButton;
@@ -227,9 +230,9 @@ exports.Popup = Popup.Popup;
 exports.View = View.View;
 exports.ViewTab = ViewTab.ViewTab;
 exports.ViewsContainer = ViewsContainer.ViewsContainer;
-exports.WeightInput = index$5.WeightInput;
+exports.WeightInput = WeightInput.WeightInput;
 exports.Indicator = Indicator.Indicator;
-exports.SelectDropdown = index$6.SelectDropdown;
+exports.SelectDropdown = index$4.SelectDropdown;
 exports.ThemeInjector = ThemeInjector.ThemeInjector;
 exports.DataGrid = DataGrid.DataGrid;
 exports.useClickOutside = useClickOutside.useClickOutside;
@@ -250,7 +253,7 @@ exports.buildClassnames = buildClassnames.buildClassnames;
 exports.getOpaqueHexColor = color.getOpaqueHexColor;
 exports.hexToRgb = color.hexToRgb;
 exports.generateId = generateId.generateId;
-exports.theme = index$7.theme;
+exports.theme = index$5.theme;
 exports.ActiveCheckboxIcon = ActiveCheckboxIcon.ActiveCheckboxIcon;
 exports.ActiveRadioIcon = ActiveRadioIcon.ActiveRadioIcon;
 exports.ArrowDownIcon = ArrowDownIcon.ArrowDownIcon;
@@ -276,6 +279,7 @@ exports.InactiveRadioIcon = InactiveRadioIcon.InactiveRadioIcon;
 exports.InfoIcon = InfoIcon.InfoIcon;
 exports.LeftArrowIcon = LeftArrowIcon.LeftArrowIcon;
 exports.MergeIcon = MergeIcon.MergeIcon;
+exports.MinusIcon = MinusIcon.MinusIcon;
 exports.PlusIcon = PlusIcon.PlusIcon;
 exports.RecommendIcon = RecommendIcon.RecommendIcon;
 exports.ReorderIcon = ReorderIcon.ReorderIcon;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -32,11 +32,12 @@ export { useScrollPosition } from './components/DataTable/hooks/useScrollPositio
 export { useSelection } from './components/DataTable/hooks/useSelection.js';
 export { DescriptionList } from './components/DescriptionList/DescriptionList.js';
 export { DetailPage } from './components/DetailPage/DetailPage.js';
-export { DimensionsInput } from './components/DimensionsInput/index.js';
+export { DimensionsInput } from './components/DimensionsInput/DimensionsInput.js';
 export { Dropdown } from './components/Dropdown/Dropdown.js';
 export { FilterTag } from './components/FilterTag/FilterTag.js';
 export { Grid } from './components/Grid/index.js';
 export { Image } from './components/Image/Image.js';
+export { InputAffix } from './components/InputAffix/InputAffix.js';
 export { InputGroup } from './components/InputGroup/index.js';
 export { LegacyDataTable } from './components/LegacyDataTable/LegacyDataTable.js';
 export { Loader } from './components/Loader/Loader.js';
@@ -71,7 +72,7 @@ export { Popup } from './components/VideoModal/components/Popup.js';
 export { View } from './components/View/View.js';
 export { ViewTab } from './components/ViewTab/ViewTab.js';
 export { ViewsContainer } from './components/ViewsContainer/ViewsContainer.js';
-export { WeightInput } from './components/WeightInput/index.js';
+export { WeightInput } from './components/WeightInput/WeightInput.js';
 export { Indicator } from './components/Indicator/Indicator.js';
 export { SelectDropdown } from './components/SelectDropdown/index.js';
 export { ThemeInjector } from './components/ThemeInjector/ThemeInjector.js';
@@ -118,6 +119,7 @@ export { InactiveRadioIcon } from './tempIcons/InactiveRadioIcon.js';
 export { InfoIcon } from './tempIcons/InfoIcon.js';
 export { LeftArrowIcon } from './tempIcons/LeftArrowIcon.js';
 export { MergeIcon } from './tempIcons/MergeIcon.js';
+export { MinusIcon } from './tempIcons/MinusIcon.js';
 export { PlusIcon } from './tempIcons/PlusIcon.js';
 export { RecommendIcon } from './tempIcons/RecommendIcon.js';
 export { ReorderIcon } from './tempIcons/ReorderIcon.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/tempIcons/CriticalIcon.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const CriticalIcon = (props) => (React__default.default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+    React__default.default.createElement("path", { d: "M8 1.33334C4.32 1.33334 1.33334 4.32001 1.33334 8.00001C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00001C14.6667 4.32001 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66668H7.33334V4.66668H8.66667V8.66668Z", fill: "currentColor" })));
+
+exports.CriticalIcon = CriticalIcon;
+//# sourceMappingURL=CriticalIcon.cjs.map

package/dist/tempIcons/CriticalIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CriticalIcon.cjs","sources":["../../src/tempIcons/CriticalIcon.tsx"],"sourcesContent":["import React from 'react';\n\nexport const CriticalIcon = (props: any) => (\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <path\n      d=\"M8 1.33334C4.32 1.33334 1.33334 4.32001 1.33334 8.00001C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00001C14.6667 4.32001 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66668H7.33334V4.66668H8.66667V8.66668Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"names":["React"],"mappings":";;;;;;;;MAEa,YAAY,GAAG,CAAC,KAAU,MACrCA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,GAAK,KAAK,EAAA;IAC/EA,sBACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,gRAAgR,EAClR,IAAI,EAAC,cAAc,EAAA,CACnB,CACE;;;;"}

package/dist/tempIcons/CriticalIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CriticalIcon: (props: any) => React.JSX.Element;

package/dist/tempIcons/CriticalIcon.js

@@ -0,0 +1,7 @@
+import React__default from 'react';
+
+const CriticalIcon = (props) => (React__default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+    React__default.createElement("path", { d: "M8 1.33334C4.32 1.33334 1.33334 4.32001 1.33334 8.00001C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00001C14.6667 4.32001 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66668H7.33334V4.66668H8.66667V8.66668Z", fill: "currentColor" })));
+
+export { CriticalIcon };
+//# sourceMappingURL=CriticalIcon.js.map

package/dist/tempIcons/CriticalIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CriticalIcon.js","sources":["../../src/tempIcons/CriticalIcon.tsx"],"sourcesContent":["import React from 'react';\n\nexport const CriticalIcon = (props: any) => (\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <path\n      d=\"M8 1.33334C4.32 1.33334 1.33334 4.32001 1.33334 8.00001C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00001C14.6667 4.32001 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66668H7.33334V4.66668H8.66667V8.66668Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"names":["React"],"mappings":";;MAEa,YAAY,GAAG,CAAC,KAAU,MACrCA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,GAAK,KAAK,EAAA;IAC/EA,cACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,gRAAgR,EAClR,IAAI,EAAC,cAAc,EAAA,CACnB,CACE;;;;"}

package/dist/tempIcons/MinusIcon.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const MinusIcon = (props) => (React__default.default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+    React__default.default.createElement("path", { d: "M14 8.85714H8.85714H7.14286H2V7.14286H7.14286L8.85714 7.14285L14 7.14286V8.85714Z", fill: "currentColor" })));
+
+exports.MinusIcon = MinusIcon;
+//# sourceMappingURL=MinusIcon.cjs.map

package/dist/tempIcons/MinusIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinusIcon.cjs","sources":["../../src/tempIcons/MinusIcon.tsx"],"sourcesContent":["import React from 'react';\n\nexport const MinusIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <path\n      d=\"M14 8.85714H8.85714H7.14286H2V7.14286H7.14286L8.85714 7.14285L14 7.14286V8.85714Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"names":["React"],"mappings":";;;;;;;;MAEa,SAAS,GAAG,CAAC,KAAoC,MAC5DA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,GAAK,KAAK,EAAA;IAC/EA,sBACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,mFAAmF,EACrF,IAAI,EAAC,cAAc,EAAA,CACnB,CACE;;;;"}

package/dist/tempIcons/MinusIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MinusIcon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/dist/tempIcons/MinusIcon.js

@@ -0,0 +1,7 @@
+import React__default from 'react';
+
+const MinusIcon = (props) => (React__default.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
+    React__default.createElement("path", { d: "M14 8.85714H8.85714H7.14286H2V7.14286H7.14286L8.85714 7.14285L14 7.14286V8.85714Z", fill: "currentColor" })));
+
+export { MinusIcon };
+//# sourceMappingURL=MinusIcon.js.map

package/dist/tempIcons/MinusIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinusIcon.js","sources":["../../src/tempIcons/MinusIcon.tsx"],"sourcesContent":["import React from 'react';\n\nexport const MinusIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n    <path\n      d=\"M14 8.85714H8.85714H7.14286H2V7.14286H7.14286L8.85714 7.14285L14 7.14286V8.85714Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"names":["React"],"mappings":";;MAEa,SAAS,GAAG,CAAC,KAAoC,MAC5DA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,GAAK,KAAK,EAAA;IAC/EA,cACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,mFAAmF,EACrF,IAAI,EAAC,cAAc,EAAA,CACnB,CACE;;;;"}

package/dist/tempIcons/index.d.ts

@@ -23,6 +23,7 @@ export { InactiveRadioIcon } from './InactiveRadioIcon';
 export { InfoIcon } from './InfoIcon';
 export { LeftArrowIcon } from './LeftArrowIcon';
 export { MergeIcon } from './MergeIcon';
+export { MinusIcon } from './MinusIcon';
 export { PlusIcon } from './PlusIcon';
 export { RecommendIcon } from './RecommendIcon';
 export { ReorderIcon } from './ReorderIcon';