@veeqo/ui 9.1.2 → 9.3.0

package/dist/components/Choice/Choice.cjs

@@ -17,7 +17,7 @@ const generateClassNames = (prefix) => ({
     tooltip: prefix ? 'choice__tooltip' : undefined,
     error: prefix ? 'choice__error' : undefined,
 });
-const Choice = ({ id, className, label, hint, tooltip, error, bordered, Badge, Accessory, Footer, children, disabled = false, labelVariant = 'body', inputPosition = 'left', }) => {
+const Choice = ({ id, className, label, hint, tooltip, tooltipContent, error, bordered, Badge, Accessory, Footer, children, disabled = false, labelVariant = 'body', inputPosition = 'left', }) => {
     const classNames = generateClassNames(className);
     const contentMarkup = (React__default.default.createElement(styled.RootLayout, null,
         inputPosition === 'left' && (React__default.default.createElement(styled.InputLayout, { align: Accessory ? 'center' : 'top' }, children)),
@@ -26,8 +26,8 @@ const Choice = ({ id, className, label, hint, tooltip, error, bordered, Badge, A
             React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
                 Badge,
                 label && (React__default.default.createElement(Text.Text, { variant: labelVariant, className: classNames.label }, label)),
-                tooltip && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip, className: classNames.tooltip },
-                    React__default.default.createElement(HelpIcon.HelpIcon, { name: "help", width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.lightest })))),
+                (tooltip || tooltipContent) && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
+                    React__default.default.createElement(HelpIcon.HelpIcon, { "data-testid": "tooltip-help", name: "help", width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.lightest })))),
             hint && React__default.default.createElement(styled.HintText, { className: classNames.hint }, hint),
             error && React__default.default.createElement(styled.ErrorText, { className: classNames.error }, error),
             Footer)) : null,

package/dist/components/Choice/Choice.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n  Wrapper,\n  BorderedWrapper,\n  RootLayout,\n  InputLayout,\n  AccessoryLayout,\n  TextLayout,\n  HintText,\n  ErrorText,\n  BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: string;\n  hint?: string;\n  tooltip?: string;\n  error?: string;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  id: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  id,\n  className,\n  label,\n  hint,\n  tooltip,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const contentMarkup = (\n    <RootLayout>\n      {inputPosition === 'left' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n      {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n      {label || hint || error || Badge || Footer ? (\n        <TextLayout>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text variant={labelVariant} className={classNames.label}>\n                {label}\n              </Text>\n            )}\n            {tooltip && (\n              <BlockTooltip text={tooltip} className={classNames.tooltip}>\n                <HelpIcon\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && <HintText className={classNames.hint}>{hint}</HintText>}\n          {error && <ErrorText className={classNames.error}>{error}</ErrorText>}\n          {Footer}\n        </TextLayout>\n      ) : null}\n      {inputPosition === 'right' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n    </RootLayout>\n  );\n\n  if (bordered) {\n    return (\n      <BorderedWrapper disabled={disabled} htmlFor={id} className={className}>\n        {contentMarkup}\n      </BorderedWrapper>\n    );\n  }\n\n  return (\n    <Wrapper disabled={disabled} htmlFor={id} className={className}>\n      {contentMarkup}\n    </Wrapper>\n  );\n};\n"],"names":["React","RootLayout","InputLayout","AccessoryLayout","TextLayout","Stack","Text","BlockTooltip","HelpIcon","theme","HintText","ErrorText","BorderedWrapper","Wrapper"],"mappings":"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"}
+{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n  Wrapper,\n  BorderedWrapper,\n  RootLayout,\n  InputLayout,\n  AccessoryLayout,\n  TextLayout,\n  HintText,\n  ErrorText,\n  BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n  error?: ReactNode;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  id: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  id,\n  className,\n  label,\n  hint,\n  tooltip,\n  tooltipContent,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const contentMarkup = (\n    <RootLayout>\n      {inputPosition === 'left' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n      {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n      {label || hint || error || Badge || Footer ? (\n        <TextLayout>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text variant={labelVariant} className={classNames.label}>\n                {label}\n              </Text>\n            )}\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && <HintText className={classNames.hint}>{hint}</HintText>}\n          {error && <ErrorText className={classNames.error}>{error}</ErrorText>}\n          {Footer}\n        </TextLayout>\n      ) : null}\n      {inputPosition === 'right' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n    </RootLayout>\n  );\n\n  if (bordered) {\n    return (\n      <BorderedWrapper disabled={disabled} htmlFor={id} className={className}>\n        {contentMarkup}\n      </BorderedWrapper>\n    );\n  }\n\n  return (\n    <Wrapper disabled={disabled} htmlFor={id} className={className}>\n      {contentMarkup}\n    </Wrapper>\n  );\n};\n"],"names":["React","RootLayout","InputLayout","AccessoryLayout","TextLayout","Stack","Text","BlockTooltip","HelpIcon","theme","HintText","ErrorText","BorderedWrapper","Wrapper"],"mappings":";;;;;;;;;;;;;AAwCA,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAAW;IACpD,IAAI,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS;IACzC,KAAK,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS;IAC3C,OAAO,EAAE,MAAM,GAAG,iBAAiB,GAAG,SAAS;IAC/C,KAAK,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS;AAC5C,CAAA,CAAC;AAEW,MAAA,MAAM,GAAG,CAAC,EACrB,EAAE,EACF,SAAS,EACT,KAAK,EACL,IAAI,EACJ,OAAO,EACP,cAAc,EACd,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,MAAM,EACrB,aAAa,GAAG,MAAM,GACV,KAAI;AAChB,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAEhD,IAAA,MAAM,aAAa,IACjBA,sBAAA,CAAA,aAAA,CAACC,iBAAU,EAAA,IAAA;QACR,aAAa,KAAK,MAAM,KACvBD,qCAACE,kBAAW,EAAA,EAAC,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,KAAK,EAAA,EAAG,QAAQ,CAAe,CAC3E;AACA,QAAA,SAAS,IAAIF,sBAAA,CAAA,aAAA,CAACG,sBAAe,EAAA,IAAA,EAAE,SAAS,CAAmB;AAC3D,QAAA,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,IACxCH,qCAACI,iBAAU,EAAA,IAAA;AACT,YAAAJ,sBAAA,CAAA,aAAA,CAACK,WAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;gBACvD,KAAK;AACL,gBAAA,KAAK,KACJL,sBAAA,CAAA,aAAA,CAACM,SAAI,EAAA,EAAC,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,KAAK,EACrD,EAAA,KAAK,CACD,CACR;gBACA,CAAC,OAAO,IAAI,cAAc,MACzBN,sBAAA,CAAA,aAAA,CAACO,mBAAY,EAAC,EAAA,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA;AACjF,oBAAAP,sBAAA,CAAA,aAAA,CAACQ,iBAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,IAAI,EAAC,MAAM,EACX,KAAK,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EACxC,CAAA,CACW,CAChB,CACK;YACP,IAAI,IAAIT,sBAAC,CAAA,aAAA,CAAAU,eAAQ,EAAC,EAAA,SAAS,EAAE,UAAU,CAAC,IAAI,EAAG,EAAA,IAAI,CAAY;YAC/D,KAAK,IAAIV,sBAAC,CAAA,aAAA,CAAAW,gBAAS,EAAC,EAAA,SAAS,EAAE,UAAU,CAAC,KAAK,EAAG,EAAA,KAAK,CAAa;AACpE,YAAA,MAAM,CACI,IACX,IAAI;QACP,aAAa,KAAK,OAAO,KACxBX,sBAAA,CAAA,aAAA,CAACE,kBAAW,EAAC,EAAA,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,KAAK,EAAA,EAAG,QAAQ,CAAe,CAC3E,CACU,CACd;AAED,IAAA,IAAI,QAAQ,EAAE;AACZ,QAAA,QACEF,sBAAC,CAAA,aAAA,CAAAY,sBAAe,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,IACnE,aAAa,CACE;AAErB;AAED,IAAA,QACEZ,sBAAC,CAAA,aAAA,CAAAa,cAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,IAC3D,aAAa,CACN;AAEd;;;;"}

package/dist/components/Choice/Choice.d.ts

@@ -3,10 +3,11 @@ import { TextVariant } from '../Text/types';
 export interface ForwardedChoiceProps {
     className?: string;
     disabled?: boolean;
-    label?: string;
-    hint?: string;
+    label?: ReactNode;
+    hint?: ReactNode;
     tooltip?: string;
-    error?: string;
+    tooltipContent?: ReactNode;
+    error?: ReactNode;
     bordered?: boolean;
     Badge?: ReactNode;
     Accessory?: ReactNode;
@@ -18,4 +19,4 @@ export interface ChoiceProps extends ForwardedChoiceProps {
     id: string;
     children: ReactNode;
 }
-export declare const Choice: ({ id, className, label, hint, tooltip, error, bordered, Badge, Accessory, Footer, children, disabled, labelVariant, inputPosition, }: ChoiceProps) => React.JSX.Element;
+export declare const Choice: ({ id, className, label, hint, tooltip, tooltipContent, error, bordered, Badge, Accessory, Footer, children, disabled, labelVariant, inputPosition, }: ChoiceProps) => React.JSX.Element;

package/dist/components/Choice/Choice.js

@@ -11,7 +11,7 @@ const generateClassNames = (prefix) => ({
     tooltip: prefix ? 'choice__tooltip' : undefined,
     error: prefix ? 'choice__error' : undefined,
 });
-const Choice = ({ id, className, label, hint, tooltip, error, bordered, Badge, Accessory, Footer, children, disabled = false, labelVariant = 'body', inputPosition = 'left', }) => {
+const Choice = ({ id, className, label, hint, tooltip, tooltipContent, error, bordered, Badge, Accessory, Footer, children, disabled = false, labelVariant = 'body', inputPosition = 'left', }) => {
     const classNames = generateClassNames(className);
     const contentMarkup = (React.createElement(RootLayout, null,
         inputPosition === 'left' && (React.createElement(InputLayout, { align: Accessory ? 'center' : 'top' }, children)),
@@ -20,8 +20,8 @@ const Choice = ({ id, className, label, hint, tooltip, error, bordered, Badge, A
             React.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
                 Badge,
                 label && (React.createElement(Text, { variant: labelVariant, className: classNames.label }, label)),
-                tooltip && (React.createElement(BlockTooltip, { text: tooltip, className: classNames.tooltip },
-                    React.createElement(HelpIcon, { name: "help", width: theme.sizes.base, color: theme.colors.neutral.ink.lightest })))),
+                (tooltip || tooltipContent) && (React.createElement(BlockTooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
+                    React.createElement(HelpIcon, { "data-testid": "tooltip-help", name: "help", width: theme.sizes.base, color: theme.colors.neutral.ink.lightest })))),
             hint && React.createElement(HintText, { className: classNames.hint }, hint),
             error && React.createElement(ErrorText, { className: classNames.error }, error),
             Footer)) : null,

package/dist/components/Choice/Choice.js.map

@@ -1 +1 @@
-{"version":3,"file":"Choice.js","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n  Wrapper,\n  BorderedWrapper,\n  RootLayout,\n  InputLayout,\n  AccessoryLayout,\n  TextLayout,\n  HintText,\n  ErrorText,\n  BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: string;\n  hint?: string;\n  tooltip?: string;\n  error?: string;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  id: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  id,\n  className,\n  label,\n  hint,\n  tooltip,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const contentMarkup = (\n    <RootLayout>\n      {inputPosition === 'left' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n      {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n      {label || hint || error || Badge || Footer ? (\n        <TextLayout>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text variant={labelVariant} className={classNames.label}>\n                {label}\n              </Text>\n            )}\n            {tooltip && (\n              <BlockTooltip text={tooltip} className={classNames.tooltip}>\n                <HelpIcon\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && <HintText className={classNames.hint}>{hint}</HintText>}\n          {error && <ErrorText className={classNames.error}>{error}</ErrorText>}\n          {Footer}\n        </TextLayout>\n      ) : null}\n      {inputPosition === 'right' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n    </RootLayout>\n  );\n\n  if (bordered) {\n    return (\n      <BorderedWrapper disabled={disabled} htmlFor={id} className={className}>\n        {contentMarkup}\n      </BorderedWrapper>\n    );\n  }\n\n  return (\n    <Wrapper disabled={disabled} htmlFor={id} className={className}>\n      {contentMarkup}\n    </Wrapper>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAuCA,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAAW;IACpD,IAAI,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS;IACzC,KAAK,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS;IAC3C,OAAO,EAAE,MAAM,GAAG,iBAAiB,GAAG,SAAS;IAC/C,KAAK,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS;AAC5C,CAAA,CAAC;AAEW,MAAA,MAAM,GAAG,CAAC,EACrB,EAAE,EACF,SAAS,EACT,KAAK,EACL,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,MAAM,EACrB,aAAa,GAAG,MAAM,GACV,KAAI;AAChB,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAEhD,IAAA,MAAM,aAAa,IACjB,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;QACR,aAAa,KAAK,MAAM,KACvB,oBAAC,WAAW,EAAA,EAAC,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,KAAK,EAAA,EAAG,QAAQ,CAAe,CAC3E;AACA,QAAA,SAAS,IAAI,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,EAAE,SAAS,CAAmB;AAC3D,QAAA,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,MAAM,IACxC,oBAAC,UAAU,EAAA,IAAA;AACT,YAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;gBACvD,KAAK;AACL,gBAAA,KAAK,KACJ,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,KAAK,EACrD,EAAA,KAAK,CACD,CACR;AACA,gBAAA,OAAO,KACN,KAAC,CAAA,aAAA,CAAA,YAAY,EAAC,EAAA,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA;AACxD,oBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAA,CACxC,CACW,CAChB,CACK;YACP,IAAI,IAAI,KAAC,CAAA,aAAA,CAAA,QAAQ,EAAC,EAAA,SAAS,EAAE,UAAU,CAAC,IAAI,EAAG,EAAA,IAAI,CAAY;YAC/D,KAAK,IAAI,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,SAAS,EAAE,UAAU,CAAC,KAAK,EAAG,EAAA,KAAK,CAAa;AACpE,YAAA,MAAM,CACI,IACX,IAAI;QACP,aAAa,KAAK,OAAO,KACxB,KAAA,CAAA,aAAA,CAAC,WAAW,EAAC,EAAA,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,KAAK,EAAA,EAAG,QAAQ,CAAe,CAC3E,CACU,CACd;AAED,IAAA,IAAI,QAAQ,EAAE;AACZ,QAAA,QACE,KAAC,CAAA,aAAA,CAAA,eAAe,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,IACnE,aAAa,CACE;AAErB;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,OAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,IAC3D,aAAa,CACN;AAEd;;;;"}
+{"version":3,"file":"Choice.js","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n  Wrapper,\n  BorderedWrapper,\n  RootLayout,\n  InputLayout,\n  AccessoryLayout,\n  TextLayout,\n  HintText,\n  ErrorText,\n  BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n  className?: string;\n  disabled?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  tooltip?: string;\n  tooltipContent?: ReactNode;\n  error?: ReactNode;\n  bordered?: boolean;\n  Badge?: ReactNode;\n  Accessory?: ReactNode;\n  Footer?: ReactNode;\n  inputPosition?: 'left' | 'right';\n  labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n  id: string;\n  children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n  hint: prefix ? 'choice__hint' : undefined,\n  label: prefix ? 'choice__label' : undefined,\n  tooltip: prefix ? 'choice__tooltip' : undefined,\n  error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n  id,\n  className,\n  label,\n  hint,\n  tooltip,\n  tooltipContent,\n  error,\n  bordered,\n  Badge,\n  Accessory,\n  Footer,\n  children,\n  disabled = false,\n  labelVariant = 'body',\n  inputPosition = 'left',\n}: ChoiceProps) => {\n  const classNames = generateClassNames(className);\n\n  const contentMarkup = (\n    <RootLayout>\n      {inputPosition === 'left' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n      {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n      {label || hint || error || Badge || Footer ? (\n        <TextLayout>\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n            {Badge}\n            {label && (\n              <Text variant={labelVariant} className={classNames.label}>\n                {label}\n              </Text>\n            )}\n            {(tooltip || tooltipContent) && (\n              <BlockTooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n                <HelpIcon\n                  data-testid=\"tooltip-help\"\n                  name=\"help\"\n                  width={theme.sizes.base}\n                  color={theme.colors.neutral.ink.lightest}\n                />\n              </BlockTooltip>\n            )}\n          </Stack>\n          {hint && <HintText className={classNames.hint}>{hint}</HintText>}\n          {error && <ErrorText className={classNames.error}>{error}</ErrorText>}\n          {Footer}\n        </TextLayout>\n      ) : null}\n      {inputPosition === 'right' && (\n        <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n      )}\n    </RootLayout>\n  );\n\n  if (bordered) {\n    return (\n      <BorderedWrapper disabled={disabled} htmlFor={id} className={className}>\n        {contentMarkup}\n      </BorderedWrapper>\n    );\n  }\n\n  return (\n    <Wrapper disabled={disabled} htmlFor={id} className={className}>\n      {contentMarkup}\n    </Wrapper>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/DimensionsInput/DimensionsInput.cjs

@@ -3,27 +3,27 @@
 var React = require('react');
 var index$1 = require('../InputGroup/index.cjs');
 var types = require('../types.cjs');
-var withLabels = require('../../hoc/withLabels/withLabels.cjs');
 var styled = require('./styled.cjs');
 var CrossIcon = require('../../tempIcons/CrossIcon.cjs');
 var index = require('../../theme/index.cjs');
 var blockInvalidCharacters = require('../../utils/blockInvalidCharacters.cjs');
 var invalidCharactersNumeric = require('../../utils/invalidCharactersNumeric.cjs');
+var InputGroupLabel = require('../InputGroup/components/InputGroupLabel/InputGroupLabel.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const blockInvalidChars = (e) => blockInvalidCharacters.blockInvalidCharacters(e, invalidCharactersNumeric.invalidCharsList);
-const DimensionsInput = withLabels.withLabels(({ size = types.ComponentSize.base, handleChangeHeight, handleChangeWidth, handleChangeLength, className, height, width, length, unit, ...rest }) => (React__default.default.createElement(styled.Container, { className: className },
+const DimensionsInput = ({ size = types.ComponentSize.base, handleChangeHeight, handleChangeWidth, handleChangeLength, className, height, width, length, unit = 'cm', ...rest }) => (React__default.default.createElement(styled.Container, { className: className, role: "group", "aria-label": "Dimensions" },
     React__default.default.createElement(styled.Row, null,
-        React__default.default.createElement(styled.TextField, { onChange: handleChangeLength, size: size, name: "length", type: "number", placeholder: "L", value: length, min: "0", step: "any", onKeyDown: blockInvalidChars, ...rest }),
-        React__default.default.createElement(CrossIcon.CrossIcon, { height: index.theme.sizes.base, width: index.theme.sizes.base }),
-        React__default.default.createElement(styled.TextField, { onChange: handleChangeWidth, size: size, name: "width", type: "number", placeholder: "W", value: width, min: "0", step: "any", onKeyDown: blockInvalidChars, ...rest }),
-        React__default.default.createElement(CrossIcon.CrossIcon, { height: index.theme.sizes.base, width: index.theme.sizes.base }),
+        React__default.default.createElement(styled.TextField, { name: "length", type: "number", value: length, "aria-label": "Length", "aria-describedby": "dimensions-unit", min: "0", step: "any", onChange: handleChangeLength, onKeyDown: blockInvalidChars, size: size, placeholder: "L", ...rest }),
+        React__default.default.createElement(CrossIcon.CrossIcon, { height: index.theme.sizes.base, width: index.theme.sizes.base, role: "presentation" }),
+        React__default.default.createElement(styled.TextField, { name: "width", type: "number", value: width, "aria-label": "Width", "aria-describedby": "dimensions-unit", min: "0", step: "any", onChange: handleChangeWidth, onKeyDown: blockInvalidChars, size: size, placeholder: "W", ...rest }),
+        React__default.default.createElement(CrossIcon.CrossIcon, { height: index.theme.sizes.base, width: index.theme.sizes.base, role: "presentation" }),
         React__default.default.createElement(index$1.InputGroup, null,
-            React__default.default.createElement(styled.TextField, { onChange: handleChangeHeight, size: size, name: "height", type: "number", placeholder: "H", value: height, min: "0", step: "any", onKeyDown: blockInvalidChars, ...rest }),
-            React__default.default.createElement(styled.Button, { size: size }, unit))))));
+            React__default.default.createElement(styled.TextField, { name: "height", type: "number", value: height, "aria-label": "Height", "aria-describedby": "dimensions-unit", min: "0", step: "any", onChange: handleChangeHeight, onKeyDown: blockInvalidChars, size: size, placeholder: "H", ...rest }),
+            React__default.default.createElement(InputGroupLabel.InputGroupLabel, { size: size, unit: unit, id: "dimensions-unit" })))));
 DimensionsInput.displayName = 'DimensionsInput';
 
 exports.DimensionsInput = DimensionsInput;

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

@@ -1 +1 @@
-{"version":3,"file":"DimensionsInput.cjs","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { InputGroup } from '../InputGroup';\nimport { ComponentSize } from '../types';\nimport { withLabels } from '../../hoc';\n\nimport { Container, Row, TextField, Button } from './styled';\n\nimport { DimensionsProps } from './types';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { theme } from '../../theme';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\nexport const DimensionsInput: FC<DimensionsProps> = withLabels(\n  ({\n    size = ComponentSize.base,\n    handleChangeHeight,\n    handleChangeWidth,\n    handleChangeLength,\n    className,\n    height,\n    width,\n    length,\n    unit,\n    ...rest\n  }: DimensionsProps) => (\n    <Container className={className}>\n      <Row>\n        <TextField\n          onChange={handleChangeLength}\n          size={size}\n          name=\"length\"\n          type=\"number\"\n          placeholder=\"L\"\n          value={length}\n          min=\"0\"\n          step=\"any\"\n          onKeyDown={blockInvalidChars}\n          {...rest}\n        />\n        <CrossIcon height={theme.sizes.base} width={theme.sizes.base} />\n        <TextField\n          onChange={handleChangeWidth}\n          size={size}\n          name=\"width\"\n          type=\"number\"\n          placeholder=\"W\"\n          value={width}\n          min=\"0\"\n          step=\"any\"\n          onKeyDown={blockInvalidChars}\n          {...rest}\n        />\n        <CrossIcon height={theme.sizes.base} width={theme.sizes.base} />\n        <InputGroup>\n          <TextField\n            onChange={handleChangeHeight}\n            size={size}\n            name=\"height\"\n            type=\"number\"\n            placeholder=\"H\"\n            value={height}\n            min=\"0\"\n            step=\"any\"\n            onKeyDown={blockInvalidChars}\n            {...rest}\n          />\n          <Button size={size}>{unit}</Button>\n        </InputGroup>\n      </Row>\n    </Container>\n  ),\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","ComponentSize","React","Container","Row","TextField","CrossIcon","theme","InputGroup","Button"],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAM,iBAAiB,GAAG,CAAC,CAAsB,KAAKA,6CAAsB,CAAC,CAAC,EAAEC,yCAAgB,CAAC;AACpF,MAAA,eAAe,GAAwBC,qBAAU,CAC5D,CAAC,EACC,IAAI,GAAGC,mBAAa,CAAC,IAAI,EACzB,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,IAAI,EACJ,GAAG,IAAI,EACS,MAChBC,sBAAA,CAAA,aAAA,CAACC,gBAAS,EAAC,EAAA,SAAS,EAAE,SAAS,EAAA;AAC7B,IAAAD,sBAAA,CAAA,aAAA,CAACE,UAAG,EAAA,IAAA;AACF,QAAAF,sBAAA,CAAA,aAAA,CAACG,gBAAS,EACR,EAAA,QAAQ,EAAE,kBAAkB,EAC5B,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,GAAG,EACf,KAAK,EAAE,MAAM,EACb,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,iBAAiB,EAAA,GACxB,IAAI,EACR,CAAA;AACF,QAAAH,sBAAA,CAAA,aAAA,CAACI,mBAAS,EAAC,EAAA,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EAAI,CAAA;AAChE,QAAAL,sBAAA,CAAA,aAAA,CAACG,gBAAS,EACR,EAAA,QAAQ,EAAE,iBAAiB,EAC3B,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,GAAG,EACf,KAAK,EAAE,KAAK,EACZ,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,iBAAiB,EAAA,GACxB,IAAI,EACR,CAAA;AACF,QAAAH,sBAAA,CAAA,aAAA,CAACI,mBAAS,EAAC,EAAA,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EAAI,CAAA;AAChE,QAAAL,sBAAA,CAAA,aAAA,CAACM,kBAAU,EAAA,IAAA;AACT,YAAAN,sBAAA,CAAA,aAAA,CAACG,gBAAS,EACR,EAAA,QAAQ,EAAE,kBAAkB,EAC5B,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,GAAG,EACf,KAAK,EAAE,MAAM,EACb,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,iBAAiB,EAAA,GACxB,IAAI,EACR,CAAA;AACF,YAAAH,sBAAA,CAAA,aAAA,CAACO,aAAM,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,EAAG,IAAI,CAAU,CACxB,CACT,CACI,CACb;AAGH,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"DimensionsInput.cjs","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { InputGroup, InputGroupLabel } from '../InputGroup';\nimport { ComponentSize } from '../types';\n\nimport { Container, Row, TextField } from './styled';\n\nimport { DimensionsProps } from './types';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { theme } from '../../theme';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const DimensionsInput: FC<DimensionsProps> = ({\n  size = ComponentSize.base,\n  handleChangeHeight,\n  handleChangeWidth,\n  handleChangeLength,\n  className,\n  height,\n  width,\n  length,\n  unit = 'cm',\n  ...rest\n}: DimensionsProps) => (\n  <Container className={className} role=\"group\" aria-label=\"Dimensions\">\n    <Row>\n      <TextField\n        name=\"length\"\n        type=\"number\"\n        value={length}\n        aria-label=\"Length\"\n        aria-describedby=\"dimensions-unit\"\n        min=\"0\"\n        step=\"any\"\n        onChange={handleChangeLength}\n        onKeyDown={blockInvalidChars}\n        size={size}\n        placeholder=\"L\"\n        {...rest}\n      />\n      <CrossIcon height={theme.sizes.base} width={theme.sizes.base} role=\"presentation\" />\n      <TextField\n        name=\"width\"\n        type=\"number\"\n        value={width}\n        aria-label=\"Width\"\n        aria-describedby=\"dimensions-unit\"\n        min=\"0\"\n        step=\"any\"\n        onChange={handleChangeWidth}\n        onKeyDown={blockInvalidChars}\n        size={size}\n        placeholder=\"W\"\n        {...rest}\n      />\n      <CrossIcon height={theme.sizes.base} width={theme.sizes.base} role=\"presentation\" />\n      <InputGroup>\n        <TextField\n          name=\"height\"\n          type=\"number\"\n          value={height}\n          aria-label=\"Height\"\n          aria-describedby=\"dimensions-unit\"\n          min=\"0\"\n          step=\"any\"\n          onChange={handleChangeHeight}\n          onKeyDown={blockInvalidChars}\n          size={size}\n          placeholder=\"H\"\n          {...rest}\n        />\n        <InputGroupLabel size={size} unit={unit} id=\"dimensions-unit\" />\n      </InputGroup>\n    </Row>\n  </Container>\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["blockInvalidCharacters","invalidCharsList","ComponentSize","React","Container","Row","TextField","CrossIcon","theme","InputGroup","InputGroupLabel"],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,CAAsB,KAAKA,6CAAsB,CAAC,CAAC,EAAEC,yCAAgB,CAAC;MAEpF,eAAe,GAAwB,CAAC,EACnD,IAAI,GAAGC,mBAAa,CAAC,IAAI,EACzB,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,IAAI,GAAG,IAAI,EACX,GAAG,IAAI,EACS,MAChBC,qCAACC,gBAAS,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,EAAA,YAAA,EAAY,YAAY,EAAA;AACnE,IAAAD,sBAAA,CAAA,aAAA,CAACE,UAAG,EAAA,IAAA;AACF,QAAAF,sBAAA,CAAA,aAAA,CAACG,gBAAS,EACR,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,EACF,YAAA,EAAA,QAAQ,sBACF,iBAAiB,EAClC,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI,EACV,WAAW,EAAC,GAAG,EAAA,GACX,IAAI,EACR,CAAA;QACFH,sBAAC,CAAA,aAAA,CAAAI,mBAAS,IAAC,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,EAAC,cAAc,EAAG,CAAA;AACpF,QAAAL,sBAAA,CAAA,aAAA,CAACG,gBAAS,EACR,EAAA,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,EACD,YAAA,EAAA,OAAO,sBACD,iBAAiB,EAClC,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI,EACV,WAAW,EAAC,GAAG,EAAA,GACX,IAAI,EACR,CAAA;QACFH,sBAAC,CAAA,aAAA,CAAAI,mBAAS,IAAC,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,EAAC,cAAc,EAAG,CAAA;AACpF,QAAAL,sBAAA,CAAA,aAAA,CAACM,kBAAU,EAAA,IAAA;AACT,YAAAN,sBAAA,CAAA,aAAA,CAACG,gBAAS,EACR,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,EACF,YAAA,EAAA,QAAQ,sBACF,iBAAiB,EAClC,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI,EACV,WAAW,EAAC,GAAG,EAAA,GACX,IAAI,EACR,CAAA;AACF,YAAAH,sBAAA,CAAA,aAAA,CAACO,+BAAe,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAC,iBAAiB,EAAA,CAAG,CACrD,CACT,CACI;AAGd,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/dist/components/DimensionsInput/DimensionsInput.js

@@ -1,23 +1,23 @@
 import React from 'react';
 import { InputGroup } from '../InputGroup/index.js';
 import { ComponentSize } from '../types.js';
-import { withLabels } from '../../hoc/withLabels/withLabels.js';
-import { Container, Row, TextField as StyledTextField, Button as StyledButton } from './styled.js';
+import { Container, Row, TextField as StyledTextField } from './styled.js';
 import { CrossIcon } from '../../tempIcons/CrossIcon.js';
 import { theme } from '../../theme/index.js';
 import { blockInvalidCharacters } from '../../utils/blockInvalidCharacters.js';
 import { invalidCharsList } from '../../utils/invalidCharactersNumeric.js';
+import { InputGroupLabel } from '../InputGroup/components/InputGroupLabel/InputGroupLabel.js';
 
 const blockInvalidChars = (e) => blockInvalidCharacters(e, invalidCharsList);
-const DimensionsInput = withLabels(({ size = ComponentSize.base, handleChangeHeight, handleChangeWidth, handleChangeLength, className, height, width, length, unit, ...rest }) => (React.createElement(Container, { className: className },
+const DimensionsInput = ({ size = ComponentSize.base, handleChangeHeight, handleChangeWidth, handleChangeLength, className, height, width, length, unit = 'cm', ...rest }) => (React.createElement(Container, { className: className, role: "group", "aria-label": "Dimensions" },
     React.createElement(Row, null,
-        React.createElement(StyledTextField, { onChange: handleChangeLength, size: size, name: "length", type: "number", placeholder: "L", value: length, min: "0", step: "any", onKeyDown: blockInvalidChars, ...rest }),
-        React.createElement(CrossIcon, { height: theme.sizes.base, width: theme.sizes.base }),
-        React.createElement(StyledTextField, { onChange: handleChangeWidth, size: size, name: "width", type: "number", placeholder: "W", value: width, min: "0", step: "any", onKeyDown: blockInvalidChars, ...rest }),
-        React.createElement(CrossIcon, { height: theme.sizes.base, width: theme.sizes.base }),
+        React.createElement(StyledTextField, { name: "length", type: "number", value: length, "aria-label": "Length", "aria-describedby": "dimensions-unit", min: "0", step: "any", onChange: handleChangeLength, onKeyDown: blockInvalidChars, size: size, placeholder: "L", ...rest }),
+        React.createElement(CrossIcon, { height: theme.sizes.base, width: theme.sizes.base, role: "presentation" }),
+        React.createElement(StyledTextField, { name: "width", type: "number", value: width, "aria-label": "Width", "aria-describedby": "dimensions-unit", min: "0", step: "any", onChange: handleChangeWidth, onKeyDown: blockInvalidChars, size: size, placeholder: "W", ...rest }),
+        React.createElement(CrossIcon, { height: theme.sizes.base, width: theme.sizes.base, role: "presentation" }),
         React.createElement(InputGroup, null,
-            React.createElement(StyledTextField, { onChange: handleChangeHeight, size: size, name: "height", type: "number", placeholder: "H", value: height, min: "0", step: "any", onKeyDown: blockInvalidChars, ...rest }),
-            React.createElement(StyledButton, { size: size }, unit))))));
+            React.createElement(StyledTextField, { name: "height", type: "number", value: height, "aria-label": "Height", "aria-describedby": "dimensions-unit", min: "0", step: "any", onChange: handleChangeHeight, onKeyDown: blockInvalidChars, size: size, placeholder: "H", ...rest }),
+            React.createElement(InputGroupLabel, { size: size, unit: unit, id: "dimensions-unit" })))));
 DimensionsInput.displayName = 'DimensionsInput';
 
 export { DimensionsInput };

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

@@ -1 +1 @@
-{"version":3,"file":"DimensionsInput.js","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { InputGroup } from '../InputGroup';\nimport { ComponentSize } from '../types';\nimport { withLabels } from '../../hoc';\n\nimport { Container, Row, TextField, Button } from './styled';\n\nimport { DimensionsProps } from './types';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { theme } from '../../theme';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\nexport const DimensionsInput: FC<DimensionsProps> = withLabels(\n  ({\n    size = ComponentSize.base,\n    handleChangeHeight,\n    handleChangeWidth,\n    handleChangeLength,\n    className,\n    height,\n    width,\n    length,\n    unit,\n    ...rest\n  }: DimensionsProps) => (\n    <Container className={className}>\n      <Row>\n        <TextField\n          onChange={handleChangeLength}\n          size={size}\n          name=\"length\"\n          type=\"number\"\n          placeholder=\"L\"\n          value={length}\n          min=\"0\"\n          step=\"any\"\n          onKeyDown={blockInvalidChars}\n          {...rest}\n        />\n        <CrossIcon height={theme.sizes.base} width={theme.sizes.base} />\n        <TextField\n          onChange={handleChangeWidth}\n          size={size}\n          name=\"width\"\n          type=\"number\"\n          placeholder=\"W\"\n          value={width}\n          min=\"0\"\n          step=\"any\"\n          onKeyDown={blockInvalidChars}\n          {...rest}\n        />\n        <CrossIcon height={theme.sizes.base} width={theme.sizes.base} />\n        <InputGroup>\n          <TextField\n            onChange={handleChangeHeight}\n            size={size}\n            name=\"height\"\n            type=\"number\"\n            placeholder=\"H\"\n            value={height}\n            min=\"0\"\n            step=\"any\"\n            onKeyDown={blockInvalidChars}\n            {...rest}\n          />\n          <Button size={size}>{unit}</Button>\n        </InputGroup>\n      </Row>\n    </Container>\n  ),\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["TextField","Button"],"mappings":";;;;;;;;;;AAcA,MAAM,iBAAiB,GAAG,CAAC,CAAsB,KAAK,sBAAsB,CAAC,CAAC,EAAE,gBAAgB,CAAC;AACpF,MAAA,eAAe,GAAwB,UAAU,CAC5D,CAAC,EACC,IAAI,GAAG,aAAa,CAAC,IAAI,EACzB,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,IAAI,EACJ,GAAG,IAAI,EACS,MAChB,KAAA,CAAA,aAAA,CAAC,SAAS,EAAC,EAAA,SAAS,EAAE,SAAS,EAAA;AAC7B,IAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,IAAA;AACF,QAAA,KAAA,CAAA,aAAA,CAACA,eAAS,EACR,EAAA,QAAQ,EAAE,kBAAkB,EAC5B,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,GAAG,EACf,KAAK,EAAE,MAAM,EACb,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,iBAAiB,EAAA,GACxB,IAAI,EACR,CAAA;AACF,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAC,EAAA,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAI,CAAA;AAChE,QAAA,KAAA,CAAA,aAAA,CAACA,eAAS,EACR,EAAA,QAAQ,EAAE,iBAAiB,EAC3B,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,GAAG,EACf,KAAK,EAAE,KAAK,EACZ,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,iBAAiB,EAAA,GACxB,IAAI,EACR,CAAA;AACF,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAC,EAAA,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAI,CAAA;AAChE,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;AACT,YAAA,KAAA,CAAA,aAAA,CAACA,eAAS,EACR,EAAA,QAAQ,EAAE,kBAAkB,EAC5B,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,GAAG,EACf,KAAK,EAAE,MAAM,EACb,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,iBAAiB,EAAA,GACxB,IAAI,EACR,CAAA;AACF,YAAA,KAAA,CAAA,aAAA,CAACC,YAAM,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,EAAG,IAAI,CAAU,CACxB,CACT,CACI,CACb;AAGH,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"DimensionsInput.js","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { InputGroup, InputGroupLabel } from '../InputGroup';\nimport { ComponentSize } from '../types';\n\nimport { Container, Row, TextField } from './styled';\n\nimport { DimensionsProps } from './types';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { theme } from '../../theme';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const DimensionsInput: FC<DimensionsProps> = ({\n  size = ComponentSize.base,\n  handleChangeHeight,\n  handleChangeWidth,\n  handleChangeLength,\n  className,\n  height,\n  width,\n  length,\n  unit = 'cm',\n  ...rest\n}: DimensionsProps) => (\n  <Container className={className} role=\"group\" aria-label=\"Dimensions\">\n    <Row>\n      <TextField\n        name=\"length\"\n        type=\"number\"\n        value={length}\n        aria-label=\"Length\"\n        aria-describedby=\"dimensions-unit\"\n        min=\"0\"\n        step=\"any\"\n        onChange={handleChangeLength}\n        onKeyDown={blockInvalidChars}\n        size={size}\n        placeholder=\"L\"\n        {...rest}\n      />\n      <CrossIcon height={theme.sizes.base} width={theme.sizes.base} role=\"presentation\" />\n      <TextField\n        name=\"width\"\n        type=\"number\"\n        value={width}\n        aria-label=\"Width\"\n        aria-describedby=\"dimensions-unit\"\n        min=\"0\"\n        step=\"any\"\n        onChange={handleChangeWidth}\n        onKeyDown={blockInvalidChars}\n        size={size}\n        placeholder=\"W\"\n        {...rest}\n      />\n      <CrossIcon height={theme.sizes.base} width={theme.sizes.base} role=\"presentation\" />\n      <InputGroup>\n        <TextField\n          name=\"height\"\n          type=\"number\"\n          value={height}\n          aria-label=\"Height\"\n          aria-describedby=\"dimensions-unit\"\n          min=\"0\"\n          step=\"any\"\n          onChange={handleChangeHeight}\n          onKeyDown={blockInvalidChars}\n          size={size}\n          placeholder=\"H\"\n          {...rest}\n        />\n        <InputGroupLabel size={size} unit={unit} id=\"dimensions-unit\" />\n      </InputGroup>\n    </Row>\n  </Container>\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["TextField"],"mappings":";;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,CAAsB,KAAK,sBAAsB,CAAC,CAAC,EAAE,gBAAgB,CAAC;MAEpF,eAAe,GAAwB,CAAC,EACnD,IAAI,GAAG,aAAa,CAAC,IAAI,EACzB,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,IAAI,GAAG,IAAI,EACX,GAAG,IAAI,EACS,MAChB,oBAAC,SAAS,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,EAAA,YAAA,EAAY,YAAY,EAAA;AACnE,IAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,IAAA;AACF,QAAA,KAAA,CAAA,aAAA,CAACA,eAAS,EACR,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,EACF,YAAA,EAAA,QAAQ,sBACF,iBAAiB,EAClC,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI,EACV,WAAW,EAAC,GAAG,EAAA,GACX,IAAI,EACR,CAAA;QACF,KAAC,CAAA,aAAA,CAAA,SAAS,IAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,EAAC,cAAc,EAAG,CAAA;AACpF,QAAA,KAAA,CAAA,aAAA,CAACA,eAAS,EACR,EAAA,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,EACD,YAAA,EAAA,OAAO,sBACD,iBAAiB,EAClC,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI,EACV,WAAW,EAAC,GAAG,EAAA,GACX,IAAI,EACR,CAAA;QACF,KAAC,CAAA,aAAA,CAAA,SAAS,IAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,EAAC,cAAc,EAAG,CAAA;AACpF,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;AACT,YAAA,KAAA,CAAA,aAAA,CAACA,eAAS,EACR,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,EACF,YAAA,EAAA,QAAQ,sBACF,iBAAiB,EAClC,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI,EACV,WAAW,EAAC,GAAG,EAAA,GACX,IAAI,EACR,CAAA;AACF,YAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAC,iBAAiB,EAAA,CAAG,CACrD,CACT,CACI;AAGd,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/dist/components/DimensionsInput/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var withLabels = require('../../hoc/withLabels/withLabels.cjs');
+require('react');
+var DimensionsInput$1 = require('./DimensionsInput.cjs');
+
+const DimensionsInput = withLabels.withLabels(DimensionsInput$1.DimensionsInput);
+
+exports.DimensionsInput = DimensionsInput;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/DimensionsInput/index.ts"],"sourcesContent":["import { withLabels } from '../../hoc';\nimport { DimensionsInput as BaseDimensionsInput } from './DimensionsInput';\n\nexport const DimensionsInput = withLabels(BaseDimensionsInput);\n"],"names":["withLabels","BaseDimensionsInput"],"mappings":";;;;;;MAGa,eAAe,GAAGA,qBAAU,CAACC,iCAAmB;;;;"}

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

@@ -1 +1,2 @@
-export { DimensionsInput } from './DimensionsInput';
+/// <reference types="react" />
+export declare const DimensionsInput: import("react").FC<import("./types").DimensionsProps & import("../../hoc/withLabels/withLabels").WithLabelsProps>;

package/dist/components/DimensionsInput/index.js

@@ -0,0 +1,8 @@
+import { withLabels } from '../../hoc/withLabels/withLabels.js';
+import 'react';
+import { DimensionsInput as DimensionsInput$1 } from './DimensionsInput.js';
+
+const DimensionsInput = withLabels(DimensionsInput$1);
+
+export { DimensionsInput };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/DimensionsInput/index.ts"],"sourcesContent":["import { withLabels } from '../../hoc';\nimport { DimensionsInput as BaseDimensionsInput } from './DimensionsInput';\n\nexport const DimensionsInput = withLabels(BaseDimensionsInput);\n"],"names":["BaseDimensionsInput"],"mappings":";;;;MAGa,eAAe,GAAG,UAAU,CAACA,iBAAmB;;;;"}

package/dist/components/DimensionsInput/styled.cjs

@@ -1,9 +1,7 @@
 'use strict';
 
 var styled = require('styled-components');
-var Text = require('../Text/Text.cjs');
 var index = require('../TextField/index.cjs');
-var Button = require('../Button/Button.cjs');
 var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
 var index$1 = require('../../theme/index.cjs');
 
@@ -14,12 +12,9 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--oxhxoy" }) `display:flex;flex-direction:column;position:relative;`;
 const Row = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--w9sg63" }) `display:flex;align-items:center;margin-top:4px;gap:8px;`;
 const StyledTextField = styled__default.default(index.TextField).withConfig({ displayName: "vui--StyledTextField", componentId: "vui--1dp86fg" }) `width:52px;margin:0;padding:0 6px;&&&{text-align:left;border-color:${index$1.theme.colors.neutral.ink.lightest};}`;
-const StyledButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--StyledButton", componentId: "vui--1h9einl" }) `padding:0 6px;border-color:${index$1.theme.colors.neutral.ink.lightest};`;
-styled__default.default(Text.Text).withConfig({ displayName: "vui--Label", componentId: "vui--2iwwsg" }) ``;
-styled__default.default.span.withConfig({ displayName: "vui--Error", componentId: "vui--1ln478r" }) `display:block;font-family:${index$1.theme.text.error.fontFamily};font-size:${index$1.theme.text.error.fontSize};font-weight:${index$1.theme.text.error.fontWeight};line-height:${index$1.theme.text.error.lineHeight};color:${index$1.theme.text.error.color};&::before{content:'';position:absolute;top:0;bottom:0;left:calc(${index$1.theme.sizes[2]} * -1);width:2px;background-color:${index$1.theme.colors.secondary.red.base};}`;
-styled__default.default.span.withConfig({ displayName: "vui--Hint", componentId: "vui--5lfadq" }) `display:block;font-family:${index$1.theme.fontFamily};font-size:${index$1.theme.sizes[3]};line-height:${index$1.theme.sizes[4]};color:${index$1.theme.colors.neutral.ink.light};`;
+styled__default.default.span.withConfig({ displayName: "vui--Error", componentId: "vui--1isax7l" }) `display:block;font-family:${index$1.theme.text.error.fontFamily};font-size:${index$1.theme.text.error.fontSize};font-weight:${index$1.theme.text.error.fontWeight};line-height:${index$1.theme.text.error.lineHeight};color:${index$1.theme.text.error.color};&::before{content:'';position:absolute;top:0;bottom:0;left:calc(${index$1.theme.sizes[2]} * -1);width:2px;background-color:${index$1.theme.colors.secondary.red.base};}`;
+styled__default.default.span.withConfig({ displayName: "vui--Hint", componentId: "vui--gorpke" }) `display:block;font-family:${index$1.theme.fontFamily};font-size:${index$1.theme.sizes[3]};line-height:${index$1.theme.sizes[4]};color:${index$1.theme.colors.neutral.ink.light};`;
 
-exports.Button = StyledButton;
 exports.Container = Container;
 exports.Row = Row;
 exports.TextField = StyledTextField;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/DimensionsInput/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Text } from '../Text';\nimport { TextField } from '../TextField';\nimport { Button } from '../Button';\nimport { BaseContainer } from '../BaseContainer';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n`;\n\nconst Row = styled(BaseContainer)`\n  display: flex;\n  align-items: center;\n  margin-top: 4px;\n\n  gap: 8px;\n`;\n\nconst StyledTextField = styled(TextField)`\n  width: 52px;\n  margin: 0;\n  padding: 0 6px;\n\n  &&& {\n    text-align: left;\n    border-color: ${theme.colors.neutral.ink.lightest};\n  }\n`;\n\nconst StyledButton = styled(Button)`\n  padding: 0 6px;\n  border-color: ${theme.colors.neutral.ink.lightest};\n`;\n\nconst Label = styled(Text)``;\n\nconst 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\nconst 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 { Container, Row, Error, Hint, StyledTextField as TextField, StyledButton as Button, Label };\n"],"names":["styled","BaseContainer","TextField","theme","Button","Text"],"mappings":";;;;;;;;;;;;;AAQA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC;AAMvC,MAAM,GAAG,GAAGD,uBAAM,CAACC,2BAAa,CAAC;AAQjC,MAAM,eAAe,GAAGD,uBAAM,CAACE,eAAS,CAAC,CAOrB,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mEAAA,EAAAC,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;AAIrD,MAAM,YAAY,GAAGH,uBAAM,CAACI,aAAM,CAAC,CAEjB,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2BAAA,EAAAD,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;AAGrCH,uBAAM,CAACK,SAAI,CAAC;AAEZL,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,0BAAA,EAERG,aAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA,WAAA,EAC7BA,aAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA,aAAA,EACvBA,aAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC3B,aAAA,EAAAA,aAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CACjC,OAAA,EAAAA,aAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,oEAOhBA,aAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAEP,kCAAA,EAAAA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;AAI1CH,uBAAM,CAAC,IAAI,CAEP,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,0BAAA,EAAAG,aAAK,CAAC,UAAU,cAClBA,aAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,aAAA,EACZA,aAAK,CAAC,KAAK,CAAC,CAAC,CAAC,UACpBA,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/DimensionsInput/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n`;\n\nconst Row = styled(BaseContainer)`\n  display: flex;\n  align-items: center;\n  margin-top: 4px;\n\n  gap: 8px;\n`;\n\nconst StyledTextField = styled(TextField)`\n  width: 52px;\n  margin: 0;\n  padding: 0 6px;\n\n  &&& {\n    text-align: left;\n    border-color: ${theme.colors.neutral.ink.lightest};\n  }\n`;\n\nconst 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\nconst 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 { Container, Row, Error, Hint, StyledTextField as TextField };\n"],"names":["styled","BaseContainer","TextField","theme"],"mappings":";;;;;;;;;;;AAMA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC;AAMvC,MAAM,GAAG,GAAGD,uBAAM,CAACC,2BAAa,CAAC;AAQjC,MAAM,eAAe,GAAGD,uBAAM,CAACE,eAAS,CAAC,CAOrB,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mEAAA,EAAAC,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;AAIvCH,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,0BAAA,EAERG,aAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA,WAAA,EAC7BA,aAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA,aAAA,EACvBA,aAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC3B,aAAA,EAAAA,aAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CACjC,OAAA,EAAAA,aAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,oEAOhBA,aAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAEP,kCAAA,EAAAA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;AAI1CH,uBAAM,CAAC,IAAI,CAEP,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,0BAAA,EAAAG,aAAK,CAAC,UAAU,cAClBA,aAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,aAAA,EACZA,aAAK,CAAC,KAAK,CAAC,CAAC,CAAC,UACpBA,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;;;;;;"}

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

@@ -303,16 +303,6 @@ declare const StyledTextField: import("styled-components").StyledComponent<impor
     size?: "base" | "sm" | undefined;
     multiline?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement> & import("../../hoc/withLabels/withLabels").WithLabelsProps>, any, {}, never>;
-declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
-    children?: import("react").ReactNode;
-    variant?: import("../Button/types").ButtonVariant | undefined;
-    size?: "base" | "sm" | undefined;
-    iconSlot?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    dropdown?: boolean | undefined;
-    loading?: boolean | undefined;
-    contentStyles?: import("react").CSSProperties | undefined;
-} & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
-declare const Label: import("styled-components").StyledComponent<"span", any, {} & import("../Text/types").TextProps, never>;
 declare const Error: import("styled-components").StyledComponent<"span", any, {}, never>;
 declare const Hint: import("styled-components").StyledComponent<"span", any, {}, never>;
-export { Container, Row, Error, Hint, StyledTextField as TextField, StyledButton as Button, Label };
+export { Container, Row, Error, Hint, StyledTextField as TextField };

package/dist/components/DimensionsInput/styled.js

@@ -1,17 +1,13 @@
 import styled from 'styled-components';
-import { Text } from '../Text/Text.js';
 import { TextField } from '../TextField/index.js';
-import { Button } from '../Button/Button.js';
 import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 import { theme } from '../../theme/index.js';
 
 const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--oxhxoy" }) `display:flex;flex-direction:column;position:relative;`;
 const Row = styled(BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--w9sg63" }) `display:flex;align-items:center;margin-top:4px;gap:8px;`;
 const StyledTextField = styled(TextField).withConfig({ displayName: "vui--StyledTextField", componentId: "vui--1dp86fg" }) `width:52px;margin:0;padding:0 6px;&&&{text-align:left;border-color:${theme.colors.neutral.ink.lightest};}`;
-const StyledButton = styled(Button).withConfig({ displayName: "vui--StyledButton", componentId: "vui--1h9einl" }) `padding:0 6px;border-color:${theme.colors.neutral.ink.lightest};`;
-styled(Text).withConfig({ displayName: "vui--Label", componentId: "vui--2iwwsg" }) ``;
-styled.span.withConfig({ displayName: "vui--Error", componentId: "vui--1ln478r" }) `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};}`;
-styled.span.withConfig({ displayName: "vui--Hint", componentId: "vui--5lfadq" }) `display:block;font-family:${theme.fontFamily};font-size:${theme.sizes[3]};line-height:${theme.sizes[4]};color:${theme.colors.neutral.ink.light};`;
+styled.span.withConfig({ displayName: "vui--Error", componentId: "vui--1isax7l" }) `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};}`;
+styled.span.withConfig({ displayName: "vui--Hint", componentId: "vui--gorpke" }) `display:block;font-family:${theme.fontFamily};font-size:${theme.sizes[3]};line-height:${theme.sizes[4]};color:${theme.colors.neutral.ink.light};`;
 
-export { StyledButton as Button, Container, Row, StyledTextField as TextField };
+export { Container, Row, StyledTextField as TextField };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/DimensionsInput/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Text } from '../Text';\nimport { TextField } from '../TextField';\nimport { Button } from '../Button';\nimport { BaseContainer } from '../BaseContainer';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n`;\n\nconst Row = styled(BaseContainer)`\n  display: flex;\n  align-items: center;\n  margin-top: 4px;\n\n  gap: 8px;\n`;\n\nconst StyledTextField = styled(TextField)`\n  width: 52px;\n  margin: 0;\n  padding: 0 6px;\n\n  &&& {\n    text-align: left;\n    border-color: ${theme.colors.neutral.ink.lightest};\n  }\n`;\n\nconst StyledButton = styled(Button)`\n  padding: 0 6px;\n  border-color: ${theme.colors.neutral.ink.lightest};\n`;\n\nconst Label = styled(Text)``;\n\nconst 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\nconst 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 { Container, Row, Error, Hint, StyledTextField as TextField, StyledButton as Button, Label };\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC;AAMvC,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAQjC,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAOrB,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mEAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;AAIrD,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAEjB,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;AAGrC,MAAM,CAAC,IAAI,CAAC;AAEZ,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,0BAAA,EAER,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA,WAAA,EAC7B,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA,aAAA,EACvB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC3B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CACjC,OAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,oEAOhB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAEP,kCAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;AAI1C,MAAM,CAAC,IAAI,CAEP,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,0BAAA,EAAA,KAAK,CAAC,UAAU,cAClB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,aAAA,EACZ,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,UACpB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/DimensionsInput/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n`;\n\nconst Row = styled(BaseContainer)`\n  display: flex;\n  align-items: center;\n  margin-top: 4px;\n\n  gap: 8px;\n`;\n\nconst StyledTextField = styled(TextField)`\n  width: 52px;\n  margin: 0;\n  padding: 0 6px;\n\n  &&& {\n    text-align: left;\n    border-color: ${theme.colors.neutral.ink.lightest};\n  }\n`;\n\nconst 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\nconst 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 { Container, Row, Error, Hint, StyledTextField as TextField };\n"],"names":[],"mappings":";;;;;AAMA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC;AAMvC,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAQjC,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAOrB,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,mEAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;AAIvC,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,0BAAA,EAER,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAA,WAAA,EAC7B,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA,aAAA,EACvB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAC3B,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CACjC,OAAA,EAAA,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,oEAOhB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAEP,kCAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;AAI1C,MAAM,CAAC,IAAI,CAEP,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,0BAAA,EAAA,KAAK,CAAC,UAAU,cAClB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,aAAA,EACZ,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,UACpB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;;;;"}

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

@@ -1,15 +1,12 @@
 import { ComponentSize } from '../types';
-export interface DimensionsProps {
+export type DimensionsProps = {
     size?: ComponentSize;
     handleChangeHeight: (value: string) => void;
     handleChangeWidth: (value: string) => void;
     handleChangeLength: (value: string) => void;
-    label?: string;
-    hint?: string;
-    error?: string;
     height: string;
     width: string;
     length: string;
     unit?: string;
     className?: string;
-}
+};

package/dist/components/InputGroup/components/InputGroupLabel/InputGroupLabel.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var Text = require('../../../Text/Text.cjs');
+var styled = require('./styled.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const InputGroupLabel = ({ id, unit, size }) => (React__default.default.createElement(styled.GroupLabelWrapper, { size: size },
+    React__default.default.createElement(Text.Text, { variant: "body", id: id }, unit)));
+
+exports.InputGroupLabel = InputGroupLabel;
+//# sourceMappingURL=InputGroupLabel.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroupLabel.cjs","sources":["../../../../../src/components/InputGroup/components/InputGroupLabel/InputGroupLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { ComponentSize } from 'src/components/types';\nimport { Text } from '../../../Text';\nimport { GroupLabelWrapper } from './styled';\n\ntype InputGroupLabelProps = {\n  id?: string;\n  unit: string;\n  size: ComponentSize;\n};\n\nexport const InputGroupLabel = ({ id, unit, size }: InputGroupLabelProps) => (\n  <GroupLabelWrapper size={size}>\n    <Text variant=\"body\" id={id}>\n      {unit}\n    </Text>\n  </GroupLabelWrapper>\n);\n"],"names":["React","GroupLabelWrapper","Text"],"mappings":";;;;;;;;;;MAWa,eAAe,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAwB,MACtEA,qCAACC,wBAAiB,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA;AAC3B,IAAAD,sBAAA,CAAA,aAAA,CAACE,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,EAAE,EAAE,EAAE,EACxB,EAAA,IAAI,CACA,CACW;;;;"}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ComponentSize } from 'src/components/types';
+type InputGroupLabelProps = {
+    id?: string;
+    unit: string;
+    size: ComponentSize;
+};
+export declare const InputGroupLabel: ({ id, unit, size }: InputGroupLabelProps) => React.JSX.Element;
+export {};

package/dist/components/InputGroup/components/InputGroupLabel/InputGroupLabel.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Text } from '../../../Text/Text.js';
+import { GroupLabelWrapper } from './styled.js';
+
+const InputGroupLabel = ({ id, unit, size }) => (React.createElement(GroupLabelWrapper, { size: size },
+    React.createElement(Text, { variant: "body", id: id }, unit)));
+
+export { InputGroupLabel };
+//# sourceMappingURL=InputGroupLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroupLabel.js","sources":["../../../../../src/components/InputGroup/components/InputGroupLabel/InputGroupLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { ComponentSize } from 'src/components/types';\nimport { Text } from '../../../Text';\nimport { GroupLabelWrapper } from './styled';\n\ntype InputGroupLabelProps = {\n  id?: string;\n  unit: string;\n  size: ComponentSize;\n};\n\nexport const InputGroupLabel = ({ id, unit, size }: InputGroupLabelProps) => (\n  <GroupLabelWrapper size={size}>\n    <Text variant=\"body\" id={id}>\n      {unit}\n    </Text>\n  </GroupLabelWrapper>\n);\n"],"names":[],"mappings":";;;;MAWa,eAAe,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAwB,MACtE,oBAAC,iBAAiB,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA;AAC3B,IAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,EAAE,EAAE,EAAE,EACxB,EAAA,IAAI,CACA,CACW;;;;"}

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

@@ -0,0 +1 @@
+export { InputGroupLabel } from './InputGroupLabel';

package/dist/components/InputGroup/components/InputGroupLabel/styled.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var styled = require('styled-components');
+var index = require('../../../../theme/index.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const GroupLabelWrapper = styled__default.default.div.withConfig({ displayName: "vui--GroupLabelWrapper", componentId: "vui--1nbjbcg" }) `display:flex;align-items:center;padding:0 6px;border:1px solid;border-color:${index.theme.colors.neutral.ink.lightest};border-radius:${index.theme.radius.base};`;
+
+exports.GroupLabelWrapper = GroupLabelWrapper;
+//# sourceMappingURL=styled.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.cjs","sources":["../../../../../src/components/InputGroup/components/InputGroupLabel/styled.ts"],"sourcesContent":["import { ComponentSize } from 'src/components/types';\nimport styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const GroupLabelWrapper = styled.div<{ size: ComponentSize }>`\n  display: flex;\n  align-items: center;\n\n  padding: 0 6px;\n\n  border: 1px solid;\n  border-color: ${theme.colors.neutral.ink.lightest};\n  border-radius: ${theme.radius.base};\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAIa,MAAA,iBAAiB,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,4EAAA,EAOzBC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAChC,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,CAAA;;;;"}

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

@@ -0,0 +1,4 @@
+import { ComponentSize } from 'src/components/types';
+export declare const GroupLabelWrapper: import("styled-components").StyledComponent<"div", any, {
+    size: ComponentSize;
+}, never>;

package/dist/components/InputGroup/components/InputGroupLabel/styled.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { theme } from '../../../../theme/index.js';
+
+const GroupLabelWrapper = styled.div.withConfig({ displayName: "vui--GroupLabelWrapper", componentId: "vui--1nbjbcg" }) `display:flex;align-items:center;padding:0 6px;border:1px solid;border-color:${theme.colors.neutral.ink.lightest};border-radius:${theme.radius.base};`;
+
+export { GroupLabelWrapper };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../src/components/InputGroup/components/InputGroupLabel/styled.ts"],"sourcesContent":["import { ComponentSize } from 'src/components/types';\nimport styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const GroupLabelWrapper = styled.div<{ size: ComponentSize }>`\n  display: flex;\n  align-items: center;\n\n  padding: 0 6px;\n\n  border: 1px solid;\n  border-color: ${theme.colors.neutral.ink.lightest};\n  border-radius: ${theme.radius.base};\n`;\n"],"names":[],"mappings":";;;AAIa,MAAA,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,4EAAA,EAOzB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAChC,eAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,CAAA;;;;"}

package/dist/components/InputGroup/index.cjs

@@ -1,12 +1,15 @@
 'use strict';
 
 var styled = require('styled-components');
+require('react');
+require('../Text/Text.cjs');
+require('./components/InputGroupLabel/styled.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const InputGroup = styled__default.default.div.withConfig({ displayName: "vui--InputGroup", componentId: "vui--1w0e9jz" }) `display:flex;& > *{margin-left:0;margin-right:0;box-shadow:none;}& > *:not(:last-child){border-right-width:0 !important;}& > *:hover{}& > *:focus,& > *:active{z-index:5;border-right-width:1px !important;}& > *:focus + *,& > *:active + *{border-left-width:0 !important;}& > *:not(:first-child):not(:last-child){border-top-left-radius:0 !important;border-top-right-radius:0 !important;border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important;}& > *:first-child{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;}& > *:last-child{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;}`;
+const InputGroup = styled__default.default.div.withConfig({ displayName: "vui--InputGroup", componentId: "vui--1w0e9jz" }) `display:flex;& > *{margin-left:0;margin-right:0;box-shadow:none;}& > *:not(:last-child){border-right-width:0 !important;}& > *:focus,& > *:active{z-index:5;}& > *:not(:first-child):not(:last-child){border-top-left-radius:0 !important;border-top-right-radius:0 !important;border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important;}& > *:first-child{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;}& > *:last-child{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;}`;
 
 exports.InputGroup = InputGroup;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/InputGroup/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const InputGroup = styled.div`\n  display: flex;\n\n  & > * {\n    margin-left: 0;\n    margin-right: 0;\n    box-shadow: none;\n  }\n\n  & > *:not(:last-child) {\n    border-right-width: 0 !important;\n  }\n\n  & > *:hover {\n  }\n\n  & > *:focus,\n  & > *:active {\n    z-index: 5;\n    border-right-width: 1px !important;\n  }\n\n  & > *:focus + *,\n  & > *:active + * {\n    border-left-width: 0 !important;\n  }\n\n  & > *:not(:first-child):not(:last-child) {\n    border-top-left-radius: 0 !important;\n    border-top-right-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n  }\n\n  & > *:first-child {\n    border-top-right-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n  }\n\n  & > *:last-child {\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n  }\n`;\n"],"names":["styled"],"mappings":";;;;;;;;MAEa,UAAU,GAAGA,uBAAM,CAAC,GAAG;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/InputGroup/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport { InputGroupLabel } from './components/InputGroupLabel';\n\nexport const InputGroup = styled.div`\n  display: flex;\n\n  & > * {\n    margin-left: 0;\n    margin-right: 0;\n    box-shadow: none;\n  }\n\n  & > *:not(:last-child) {\n    border-right-width: 0 !important;\n  }\n\n  & > *:focus,\n  & > *:active {\n    z-index: 5;\n  }\n\n  & > *:not(:first-child):not(:last-child) {\n    border-top-left-radius: 0 !important;\n    border-top-right-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n  }\n\n  & > *:first-child {\n    border-top-right-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n  }\n\n  & > *:last-child {\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n  }\n`;\n"],"names":["styled"],"mappings":";;;;;;;;;;;MAIa,UAAU,GAAGA,uBAAM,CAAC,GAAG;;;;"}

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

@@ -1 +1,2 @@
+export { InputGroupLabel } from './components/InputGroupLabel';
 export declare const InputGroup: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/InputGroup/index.js

@@ -1,6 +1,9 @@
 import styled from 'styled-components';
+import 'react';
+import '../Text/Text.js';
+import './components/InputGroupLabel/styled.js';
 
-const InputGroup = styled.div.withConfig({ displayName: "vui--InputGroup", componentId: "vui--1w0e9jz" }) `display:flex;& > *{margin-left:0;margin-right:0;box-shadow:none;}& > *:not(:last-child){border-right-width:0 !important;}& > *:hover{}& > *:focus,& > *:active{z-index:5;border-right-width:1px !important;}& > *:focus + *,& > *:active + *{border-left-width:0 !important;}& > *:not(:first-child):not(:last-child){border-top-left-radius:0 !important;border-top-right-radius:0 !important;border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important;}& > *:first-child{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;}& > *:last-child{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;}`;
+const InputGroup = styled.div.withConfig({ displayName: "vui--InputGroup", componentId: "vui--1w0e9jz" }) `display:flex;& > *{margin-left:0;margin-right:0;box-shadow:none;}& > *:not(:last-child){border-right-width:0 !important;}& > *:focus,& > *:active{z-index:5;}& > *:not(:first-child):not(:last-child){border-top-left-radius:0 !important;border-top-right-radius:0 !important;border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important;}& > *:first-child{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;}& > *:last-child{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;}`;
 
 export { InputGroup };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/InputGroup/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const InputGroup = styled.div`\n  display: flex;\n\n  & > * {\n    margin-left: 0;\n    margin-right: 0;\n    box-shadow: none;\n  }\n\n  & > *:not(:last-child) {\n    border-right-width: 0 !important;\n  }\n\n  & > *:hover {\n  }\n\n  & > *:focus,\n  & > *:active {\n    z-index: 5;\n    border-right-width: 1px !important;\n  }\n\n  & > *:focus + *,\n  & > *:active + * {\n    border-left-width: 0 !important;\n  }\n\n  & > *:not(:first-child):not(:last-child) {\n    border-top-left-radius: 0 !important;\n    border-top-right-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n  }\n\n  & > *:first-child {\n    border-top-right-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n  }\n\n  & > *:last-child {\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n  }\n`;\n"],"names":[],"mappings":";;MAEa,UAAU,GAAG,MAAM,CAAC,GAAG;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/InputGroup/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport { InputGroupLabel } from './components/InputGroupLabel';\n\nexport const InputGroup = styled.div`\n  display: flex;\n\n  & > * {\n    margin-left: 0;\n    margin-right: 0;\n    box-shadow: none;\n  }\n\n  & > *:not(:last-child) {\n    border-right-width: 0 !important;\n  }\n\n  & > *:focus,\n  & > *:active {\n    z-index: 5;\n  }\n\n  & > *:not(:first-child):not(:last-child) {\n    border-top-left-radius: 0 !important;\n    border-top-right-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n  }\n\n  & > *:first-child {\n    border-top-right-radius: 0 !important;\n    border-bottom-right-radius: 0 !important;\n  }\n\n  & > *:last-child {\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n  }\n`;\n"],"names":[],"mappings":";;;;;MAIa,UAAU,GAAG,MAAM,CAAC,GAAG;;;;"}

package/dist/components/WeightInput/WeightInput.cjs

@@ -1,31 +1,32 @@
 'use strict';
 
 var React = require('react');
+var index$1 = require('../../theme/index.cjs');
 var types = require('./types.cjs');
 var types$1 = require('../types.cjs');
 var index = require('../InputGroup/index.cjs');
-var withLabels = require('../../hoc/withLabels/withLabels.cjs');
 var styled = require('./styled.cjs');
 var blockInvalidCharacters = require('../../utils/blockInvalidCharacters.cjs');
 var invalidCharactersNumeric = require('../../utils/invalidCharactersNumeric.cjs');
+var InputGroupLabel = require('../InputGroup/components/InputGroupLabel/InputGroupLabel.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const blockInvalidChars = (e) => blockInvalidCharacters.blockInvalidCharacters(e, invalidCharactersNumeric.invalidCharsList);
-const WeightInput = withLabels.withLabels(({ size = types$1.ComponentSize.base, hasError, className, ...rest }) => (React__default.default.createElement(styled.Container, { className: className },
+const WeightInput = ({ size = types$1.ComponentSize.base, hasError, className, ...rest }) => (React__default.default.createElement(styled.Container, { className: className, role: "group", "aria-label": "Weight" },
     React__default.default.createElement(styled.Row, null,
         types.isWeightMetric(rest) && (React__default.default.createElement(index.InputGroup, null,
-            React__default.default.createElement(styled.TextField, { size: size, onChange: rest.handleChangeGram, name: "gram", type: "number", value: rest.gram, hasError: hasError, min: "0", step: "any", onKeyDown: blockInvalidChars, ...rest }),
-            React__default.default.createElement(styled.Button, { hasError: hasError, size: size }, "g"))),
+            React__default.default.createElement(styled.TextField, { name: "gram", type: "number", value: rest.gram, "aria-label": "Grams", min: "0", step: "any", size: size, hasError: hasError, onChange: rest.handleChangeGram, onKeyDown: blockInvalidChars }),
+            React__default.default.createElement(InputGroupLabel.InputGroupLabel, { unit: "g", size: size }))),
         types.isWeightImperial(rest) && (React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(index.InputGroup, { style: { marginRight: index$1.theme.sizes.xs } },
+                React__default.default.createElement(styled.TextField, { name: "pound", type: "number", value: rest.pound, "aria-label": "Pounds", min: "0", step: "any", size: size, hasError: hasError, onChange: rest.handleChangePound, onKeyDown: blockInvalidChars }),
+                React__default.default.createElement(InputGroupLabel.InputGroupLabel, { unit: "lb", size: size })),
             React__default.default.createElement(index.InputGroup, null,
-                React__default.default.createElement(styled.TextField, { size: size, onChange: rest.handleChangePound, name: "pound", type: "number", value: rest.pound, hasError: hasError, step: "any", min: "0", onKeyDown: blockInvalidChars, ...rest }),
-                React__default.default.createElement(styled.Button, { hasError: hasError, size: size }, "lb")),
-            React__default.default.createElement(index.InputGroup, null,
-                React__default.default.createElement(styled.TextField, { size: size, onChange: rest.handleChangeOunce, name: "ounce", type: "number", value: rest.ounce, hasError: hasError, min: "0", step: "any", onKeyDown: blockInvalidChars, ...rest }),
-                React__default.default.createElement(styled.Button, { hasError: hasError, size: size }, "oz"))))))));
+                React__default.default.createElement(styled.TextField, { name: "ounce", type: "number", value: rest.ounce, "aria-label": "Ounces", min: "0", step: "any", size: size, hasError: hasError, onChange: rest.handleChangeOunce, onKeyDown: blockInvalidChars }),
+                React__default.default.createElement(InputGroupLabel.InputGroupLabel, { unit: "oz", size: size })))))));
 WeightInput.displayName = 'WeightInput';
 WeightInput.defaultProps = {
     weightUnit: 'lb',

package/dist/components/WeightInput/WeightInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"WeightInput.cjs","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { WeightProps, isWeightImperial, isWeightMetric } from './types';\nimport { ComponentSize } from '../types';\nimport { InputGroup } from '../InputGroup';\nimport { withLabels } from '../../hoc';\n\nimport { Container, TextField, Row, Button } from './styled';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\nexport const WeightInput: FC<WeightProps> = withLabels(\n  ({ size = ComponentSize.base, hasError, className, ...rest }: WeightProps) => (\n    <Container className={className}>\n      <Row>\n        {isWeightMetric(rest) && (\n          <InputGroup>\n            <TextField\n              size={size}\n              onChange={rest.handleChangeGram}\n              name=\"gram\"\n              type=\"number\"\n              value={rest.gram}\n              hasError={hasError}\n              min=\"0\"\n              step=\"any\"\n              onKeyDown={blockInvalidChars}\n              {...rest}\n            />\n            <Button hasError={hasError} size={size}>\n              g\n            </Button>\n          </InputGroup>\n        )}\n\n        {isWeightImperial(rest) && (\n          <>\n            <InputGroup>\n              <TextField\n                size={size}\n                onChange={rest.handleChangePound}\n                name=\"pound\"\n                type=\"number\"\n                value={rest.pound}\n                hasError={hasError}\n                step=\"any\"\n                min=\"0\"\n                onKeyDown={blockInvalidChars}\n                {...rest}\n              />\n              <Button hasError={hasError} size={size}>\n                lb\n              </Button>\n            </InputGroup>\n            <InputGroup>\n              <TextField\n                size={size}\n                onChange={rest.handleChangeOunce}\n                name=\"ounce\"\n                type=\"number\"\n                value={rest.ounce}\n                hasError={hasError}\n                min=\"0\"\n                step=\"any\"\n                onKeyDown={blockInvalidChars}\n                {...rest}\n              />\n              <Button hasError={hasError} size={size}>\n                oz\n              </Button>\n            </InputGroup>\n          </>\n        )}\n      </Row>\n    </Container>\n  ),\n);\n\nWeightInput.displayName = 'WeightInput';\n\nWeightInput.defaultProps = {\n  weightUnit: 'lb',\n};\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","ComponentSize","React","Container","Row","isWeightMetric","InputGroup","TextField","Button","isWeightImperial"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAM,iBAAiB,GAAG,CAAC,CAAsB,KAAKA,6CAAsB,CAAC,CAAC,EAAEC,yCAAgB,CAAC;AAC1F,MAAM,WAAW,GAAoBC,qBAAU,CACpD,CAAC,EAAE,IAAI,GAAGC,qBAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAe,MACvEC,sBAAC,CAAA,aAAA,CAAAC,gBAAS,EAAC,EAAA,SAAS,EAAE,SAAS,EAAA;AAC7B,IAAAD,sBAAA,CAAA,aAAA,CAACE,UAAG,EAAA,IAAA;AACD,QAAAC,oBAAc,CAAC,IAAI,CAAC,KACnBH,qCAACI,gBAAU,EAAA,IAAA;AACT,YAAAJ,sBAAA,CAAA,aAAA,CAACK,gBAAS,EACR,EAAA,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,iBAAiB,EAAA,GACxB,IAAI,EACR,CAAA;YACFL,sBAAC,CAAA,aAAA,CAAAM,aAAM,EAAC,EAAA,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAE7B,EAAA,GAAA,CAAA,CACE,CACd;AAEA,QAAAC,sBAAgB,CAAC,IAAI,CAAC,KACrBP,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;AACE,YAAAA,sBAAA,CAAA,aAAA,CAACI,gBAAU,EAAA,IAAA;AACT,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,gBAAS,EACR,EAAA,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,KAAK,EACV,GAAG,EAAC,GAAG,EACP,SAAS,EAAE,iBAAiB,EAAA,GACxB,IAAI,EACR,CAAA;gBACFL,sBAAC,CAAA,aAAA,CAAAM,aAAM,EAAC,EAAA,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAA,EAAA,IAAA,CAE7B,CACE;AACb,YAAAN,sBAAA,CAAA,aAAA,CAACI,gBAAU,EAAA,IAAA;AACT,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,gBAAS,EACR,EAAA,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,iBAAiB,EAAA,GACxB,IAAI,EACR,CAAA;AACF,gBAAAL,sBAAA,CAAA,aAAA,CAACM,aAAM,EAAC,EAAA,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAA,EAAA,IAAA,CAE7B,CACE,CACZ,CACJ,CACG,CACI,CACb;AAGH,WAAW,CAAC,WAAW,GAAG,aAAa;AAEvC,WAAW,CAAC,YAAY,GAAG;AACzB,IAAA,UAAU,EAAE,IAAI;CACjB;;;;"}
+{"version":3,"file":"WeightInput.cjs","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { theme } from 'Theme';\nimport { WeightProps, isWeightImperial, isWeightMetric } from './types';\nimport { ComponentSize } from '../types';\nimport { InputGroup, InputGroupLabel } from '../InputGroup';\n\nimport { Container, TextField, Row } from './styled';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const WeightInput: FC<WeightProps> = ({\n  size = ComponentSize.base,\n  hasError,\n  className,\n  ...rest\n}: WeightProps) => (\n  <Container className={className} role=\"group\" aria-label=\"Weight\">\n    <Row>\n      {isWeightMetric(rest) && (\n        <InputGroup>\n          <TextField\n            name=\"gram\"\n            type=\"number\"\n            value={rest.gram}\n            aria-label=\"Grams\"\n            min=\"0\"\n            step=\"any\"\n            size={size}\n            hasError={hasError}\n            onChange={rest.handleChangeGram}\n            onKeyDown={blockInvalidChars}\n          />\n          <InputGroupLabel unit=\"g\" size={size} />\n        </InputGroup>\n      )}\n\n      {isWeightImperial(rest) && (\n        <>\n          <InputGroup style={{ marginRight: theme.sizes.xs }}>\n            <TextField\n              name=\"pound\"\n              type=\"number\"\n              value={rest.pound}\n              aria-label=\"Pounds\"\n              min=\"0\"\n              step=\"any\"\n              size={size}\n              hasError={hasError}\n              onChange={rest.handleChangePound}\n              onKeyDown={blockInvalidChars}\n            />\n            <InputGroupLabel unit=\"lb\" size={size} />\n          </InputGroup>\n          <InputGroup>\n            <TextField\n              name=\"ounce\"\n              type=\"number\"\n              value={rest.ounce}\n              aria-label=\"Ounces\"\n              min=\"0\"\n              step=\"any\"\n              size={size}\n              hasError={hasError}\n              onChange={rest.handleChangeOunce}\n              onKeyDown={blockInvalidChars}\n            />\n            <InputGroupLabel unit=\"oz\" size={size} />\n          </InputGroup>\n        </>\n      )}\n    </Row>\n  </Container>\n);\n\nWeightInput.displayName = 'WeightInput';\n\nWeightInput.defaultProps = {\n  weightUnit: 'lb',\n};\n"],"names":["blockInvalidCharacters","invalidCharsList","ComponentSize","React","Container","Row","isWeightMetric","InputGroup","TextField","InputGroupLabel","isWeightImperial","theme"],"mappings":";;;;;;;;;;;;;;;;AAWA,MAAM,iBAAiB,GAAG,CAAC,CAAsB,KAAKA,6CAAsB,CAAC,CAAC,EAAEC,yCAAgB,CAAC;AAE1F,MAAM,WAAW,GAAoB,CAAC,EAC3C,IAAI,GAAGC,qBAAa,CAAC,IAAI,EACzB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACK,MACZC,qCAACC,gBAAS,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,gBAAY,QAAQ,EAAA;AAC/D,IAAAD,sBAAA,CAAA,aAAA,CAACE,UAAG,EAAA,IAAA;AACD,QAAAC,oBAAc,CAAC,IAAI,CAAC,KACnBH,qCAACI,gBAAU,EAAA,IAAA;AACT,YAAAJ,sBAAA,CAAA,aAAA,CAACK,gBAAS,EACR,EAAA,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,IAAI,gBACL,OAAO,EAClB,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,SAAS,EAAE,iBAAiB,EAC5B,CAAA;YACFL,sBAAC,CAAA,aAAA,CAAAM,+BAAe,EAAC,EAAA,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAI,CAAA,CAC7B,CACd;AAEA,QAAAC,sBAAgB,CAAC,IAAI,CAAC,KACrBP,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;AACE,YAAAA,sBAAA,CAAA,aAAA,CAACI,gBAAU,EAAA,EAAC,KAAK,EAAE,EAAE,WAAW,EAAEI,aAAK,CAAC,KAAK,CAAC,EAAE,EAAE,EAAA;AAChD,gBAAAR,sBAAA,CAAA,aAAA,CAACK,gBAAS,EACR,EAAA,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,gBACN,QAAQ,EACnB,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,SAAS,EAAE,iBAAiB,EAC5B,CAAA;gBACFL,sBAAC,CAAA,aAAA,CAAAM,+BAAe,EAAC,EAAA,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,EAAA,CAAI,CAC9B;AACb,YAAAN,sBAAA,CAAA,aAAA,CAACI,gBAAU,EAAA,IAAA;AACT,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,gBAAS,EACR,EAAA,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,gBACN,QAAQ,EACnB,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,SAAS,EAAE,iBAAiB,EAC5B,CAAA;AACF,gBAAAL,sBAAA,CAAA,aAAA,CAACM,+BAAe,EAAC,EAAA,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,EAAA,CAAI,CAC9B,CACZ,CACJ,CACG,CACI;AAGd,WAAW,CAAC,WAAW,GAAG,aAAa;AAEvC,WAAW,CAAC,YAAY,GAAG;AACzB,IAAA,UAAU,EAAE,IAAI;CACjB;;;;"}

package/dist/components/WeightInput/WeightInput.js

@@ -1,25 +1,26 @@
 import React from 'react';
+import { theme } from '../../theme/index.js';
 import { isWeightMetric, isWeightImperial } from './types.js';
 import { ComponentSize } from '../types.js';
 import { InputGroup } from '../InputGroup/index.js';
-import { withLabels } from '../../hoc/withLabels/withLabels.js';
-import { Container, Row, TextField as StyledTextField, Button as StyledButton } from './styled.js';
+import { Container, Row, TextField as StyledTextField } from './styled.js';
 import { blockInvalidCharacters } from '../../utils/blockInvalidCharacters.js';
 import { invalidCharsList } from '../../utils/invalidCharactersNumeric.js';
+import { InputGroupLabel } from '../InputGroup/components/InputGroupLabel/InputGroupLabel.js';
 
 const blockInvalidChars = (e) => blockInvalidCharacters(e, invalidCharsList);
-const WeightInput = withLabels(({ size = ComponentSize.base, hasError, className, ...rest }) => (React.createElement(Container, { className: className },
+const WeightInput = ({ size = ComponentSize.base, hasError, className, ...rest }) => (React.createElement(Container, { className: className, role: "group", "aria-label": "Weight" },
     React.createElement(Row, null,
         isWeightMetric(rest) && (React.createElement(InputGroup, null,
-            React.createElement(StyledTextField, { size: size, onChange: rest.handleChangeGram, name: "gram", type: "number", value: rest.gram, hasError: hasError, min: "0", step: "any", onKeyDown: blockInvalidChars, ...rest }),
-            React.createElement(StyledButton, { hasError: hasError, size: size }, "g"))),
+            React.createElement(StyledTextField, { name: "gram", type: "number", value: rest.gram, "aria-label": "Grams", min: "0", step: "any", size: size, hasError: hasError, onChange: rest.handleChangeGram, onKeyDown: blockInvalidChars }),
+            React.createElement(InputGroupLabel, { unit: "g", size: size }))),
         isWeightImperial(rest) && (React.createElement(React.Fragment, null,
+            React.createElement(InputGroup, { style: { marginRight: theme.sizes.xs } },
+                React.createElement(StyledTextField, { name: "pound", type: "number", value: rest.pound, "aria-label": "Pounds", min: "0", step: "any", size: size, hasError: hasError, onChange: rest.handleChangePound, onKeyDown: blockInvalidChars }),
+                React.createElement(InputGroupLabel, { unit: "lb", size: size })),
             React.createElement(InputGroup, null,
-                React.createElement(StyledTextField, { size: size, onChange: rest.handleChangePound, name: "pound", type: "number", value: rest.pound, hasError: hasError, step: "any", min: "0", onKeyDown: blockInvalidChars, ...rest }),
-                React.createElement(StyledButton, { hasError: hasError, size: size }, "lb")),
-            React.createElement(InputGroup, null,
-                React.createElement(StyledTextField, { size: size, onChange: rest.handleChangeOunce, name: "ounce", type: "number", value: rest.ounce, hasError: hasError, min: "0", step: "any", onKeyDown: blockInvalidChars, ...rest }),
-                React.createElement(StyledButton, { hasError: hasError, size: size }, "oz"))))))));
+                React.createElement(StyledTextField, { name: "ounce", type: "number", value: rest.ounce, "aria-label": "Ounces", min: "0", step: "any", size: size, hasError: hasError, onChange: rest.handleChangeOunce, onKeyDown: blockInvalidChars }),
+                React.createElement(InputGroupLabel, { unit: "oz", size: size })))))));
 WeightInput.displayName = 'WeightInput';
 WeightInput.defaultProps = {
     weightUnit: 'lb',

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

@@ -1 +1 @@
-{"version":3,"file":"WeightInput.js","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { WeightProps, isWeightImperial, isWeightMetric } from './types';\nimport { ComponentSize } from '../types';\nimport { InputGroup } from '../InputGroup';\nimport { withLabels } from '../../hoc';\n\nimport { Container, TextField, Row, Button } from './styled';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\nexport const WeightInput: FC<WeightProps> = withLabels(\n  ({ size = ComponentSize.base, hasError, className, ...rest }: WeightProps) => (\n    <Container className={className}>\n      <Row>\n        {isWeightMetric(rest) && (\n          <InputGroup>\n            <TextField\n              size={size}\n              onChange={rest.handleChangeGram}\n              name=\"gram\"\n              type=\"number\"\n              value={rest.gram}\n              hasError={hasError}\n              min=\"0\"\n              step=\"any\"\n              onKeyDown={blockInvalidChars}\n              {...rest}\n            />\n            <Button hasError={hasError} size={size}>\n              g\n            </Button>\n          </InputGroup>\n        )}\n\n        {isWeightImperial(rest) && (\n          <>\n            <InputGroup>\n              <TextField\n                size={size}\n                onChange={rest.handleChangePound}\n                name=\"pound\"\n                type=\"number\"\n                value={rest.pound}\n                hasError={hasError}\n                step=\"any\"\n                min=\"0\"\n                onKeyDown={blockInvalidChars}\n                {...rest}\n              />\n              <Button hasError={hasError} size={size}>\n                lb\n              </Button>\n            </InputGroup>\n            <InputGroup>\n              <TextField\n                size={size}\n                onChange={rest.handleChangeOunce}\n                name=\"ounce\"\n                type=\"number\"\n                value={rest.ounce}\n                hasError={hasError}\n                min=\"0\"\n                step=\"any\"\n                onKeyDown={blockInvalidChars}\n                {...rest}\n              />\n              <Button hasError={hasError} size={size}>\n                oz\n              </Button>\n            </InputGroup>\n          </>\n        )}\n      </Row>\n    </Container>\n  ),\n);\n\nWeightInput.displayName = 'WeightInput';\n\nWeightInput.defaultProps = {\n  weightUnit: 'lb',\n};\n"],"names":["TextField","Button"],"mappings":";;;;;;;;;AAWA,MAAM,iBAAiB,GAAG,CAAC,CAAsB,KAAK,sBAAsB,CAAC,CAAC,EAAE,gBAAgB,CAAC;AAC1F,MAAM,WAAW,GAAoB,UAAU,CACpD,CAAC,EAAE,IAAI,GAAG,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAe,MACvE,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,SAAS,EAAE,SAAS,EAAA;AAC7B,IAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,IAAA;AACD,QAAA,cAAc,CAAC,IAAI,CAAC,KACnB,oBAAC,UAAU,EAAA,IAAA;AACT,YAAA,KAAA,CAAA,aAAA,CAACA,eAAS,EACR,EAAA,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,iBAAiB,EAAA,GACxB,IAAI,EACR,CAAA;YACF,KAAC,CAAA,aAAA,CAAAC,YAAM,EAAC,EAAA,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAE7B,EAAA,GAAA,CAAA,CACE,CACd;AAEA,QAAA,gBAAgB,CAAC,IAAI,CAAC,KACrB,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;AACE,YAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;AACT,gBAAA,KAAA,CAAA,aAAA,CAACD,eAAS,EACR,EAAA,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,KAAK,EACV,GAAG,EAAC,GAAG,EACP,SAAS,EAAE,iBAAiB,EAAA,GACxB,IAAI,EACR,CAAA;gBACF,KAAC,CAAA,aAAA,CAAAC,YAAM,EAAC,EAAA,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAA,EAAA,IAAA,CAE7B,CACE;AACb,YAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;AACT,gBAAA,KAAA,CAAA,aAAA,CAACD,eAAS,EACR,EAAA,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,iBAAiB,EAAA,GACxB,IAAI,EACR,CAAA;AACF,gBAAA,KAAA,CAAA,aAAA,CAACC,YAAM,EAAC,EAAA,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAA,EAAA,IAAA,CAE7B,CACE,CACZ,CACJ,CACG,CACI,CACb;AAGH,WAAW,CAAC,WAAW,GAAG,aAAa;AAEvC,WAAW,CAAC,YAAY,GAAG;AACzB,IAAA,UAAU,EAAE,IAAI;CACjB;;;;"}
+{"version":3,"file":"WeightInput.js","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { theme } from 'Theme';\nimport { WeightProps, isWeightImperial, isWeightMetric } from './types';\nimport { ComponentSize } from '../types';\nimport { InputGroup, InputGroupLabel } from '../InputGroup';\n\nimport { Container, TextField, Row } from './styled';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const WeightInput: FC<WeightProps> = ({\n  size = ComponentSize.base,\n  hasError,\n  className,\n  ...rest\n}: WeightProps) => (\n  <Container className={className} role=\"group\" aria-label=\"Weight\">\n    <Row>\n      {isWeightMetric(rest) && (\n        <InputGroup>\n          <TextField\n            name=\"gram\"\n            type=\"number\"\n            value={rest.gram}\n            aria-label=\"Grams\"\n            min=\"0\"\n            step=\"any\"\n            size={size}\n            hasError={hasError}\n            onChange={rest.handleChangeGram}\n            onKeyDown={blockInvalidChars}\n          />\n          <InputGroupLabel unit=\"g\" size={size} />\n        </InputGroup>\n      )}\n\n      {isWeightImperial(rest) && (\n        <>\n          <InputGroup style={{ marginRight: theme.sizes.xs }}>\n            <TextField\n              name=\"pound\"\n              type=\"number\"\n              value={rest.pound}\n              aria-label=\"Pounds\"\n              min=\"0\"\n              step=\"any\"\n              size={size}\n              hasError={hasError}\n              onChange={rest.handleChangePound}\n              onKeyDown={blockInvalidChars}\n            />\n            <InputGroupLabel unit=\"lb\" size={size} />\n          </InputGroup>\n          <InputGroup>\n            <TextField\n              name=\"ounce\"\n              type=\"number\"\n              value={rest.ounce}\n              aria-label=\"Ounces\"\n              min=\"0\"\n              step=\"any\"\n              size={size}\n              hasError={hasError}\n              onChange={rest.handleChangeOunce}\n              onKeyDown={blockInvalidChars}\n            />\n            <InputGroupLabel unit=\"oz\" size={size} />\n          </InputGroup>\n        </>\n      )}\n    </Row>\n  </Container>\n);\n\nWeightInput.displayName = 'WeightInput';\n\nWeightInput.defaultProps = {\n  weightUnit: 'lb',\n};\n"],"names":["TextField"],"mappings":";;;;;;;;;;AAWA,MAAM,iBAAiB,GAAG,CAAC,CAAsB,KAAK,sBAAsB,CAAC,CAAC,EAAE,gBAAgB,CAAC;AAE1F,MAAM,WAAW,GAAoB,CAAC,EAC3C,IAAI,GAAG,aAAa,CAAC,IAAI,EACzB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACK,MACZ,oBAAC,SAAS,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,gBAAY,QAAQ,EAAA;AAC/D,IAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,IAAA;AACD,QAAA,cAAc,CAAC,IAAI,CAAC,KACnB,oBAAC,UAAU,EAAA,IAAA;AACT,YAAA,KAAA,CAAA,aAAA,CAACA,eAAS,EACR,EAAA,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,IAAI,gBACL,OAAO,EAClB,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,SAAS,EAAE,iBAAiB,EAC5B,CAAA;YACF,KAAC,CAAA,aAAA,CAAA,eAAe,EAAC,EAAA,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAI,CAAA,CAC7B,CACd;AAEA,QAAA,gBAAgB,CAAC,IAAI,CAAC,KACrB,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;AACE,YAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,EAAA;AAChD,gBAAA,KAAA,CAAA,aAAA,CAACA,eAAS,EACR,EAAA,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,gBACN,QAAQ,EACnB,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,SAAS,EAAE,iBAAiB,EAC5B,CAAA;gBACF,KAAC,CAAA,aAAA,CAAA,eAAe,EAAC,EAAA,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,EAAA,CAAI,CAC9B;AACb,YAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;AACT,gBAAA,KAAA,CAAA,aAAA,CAACA,eAAS,EACR,EAAA,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,gBACN,QAAQ,EACnB,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,SAAS,EAAE,iBAAiB,EAC5B,CAAA;AACF,gBAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAC,EAAA,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,EAAA,CAAI,CAC9B,CACZ,CACJ,CACG,CACI;AAGd,WAAW,CAAC,WAAW,GAAG,aAAa;AAEvC,WAAW,CAAC,YAAY,GAAG;AACzB,IAAA,UAAU,EAAE,IAAI;CACjB;;;;"}

package/dist/components/WeightInput/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var withLabels = require('../../hoc/withLabels/withLabels.cjs');
+require('react');
+var WeightInput$1 = require('./WeightInput.cjs');
+
+const WeightInput = withLabels.withLabels(WeightInput$1.WeightInput);
+
+exports.WeightInput = WeightInput;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/WeightInput/index.ts"],"sourcesContent":["import { withLabels } from '../../hoc';\nimport { WeightInput as BaseWeightInput } from './WeightInput';\n\nexport const WeightInput = withLabels(BaseWeightInput);\n"],"names":["withLabels","BaseWeightInput"],"mappings":";;;;;;MAGa,WAAW,GAAGA,qBAAU,CAACC,yBAAe;;;;"}

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

@@ -1 +1,2 @@
-export { WeightInput } from './WeightInput';
+/// <reference types="react" />
+export declare const WeightInput: import("react").FC<import("./types").WeightProps & import("../../hoc/withLabels/withLabels").WithLabelsProps>;

package/dist/components/WeightInput/index.js

@@ -0,0 +1,8 @@
+import { withLabels } from '../../hoc/withLabels/withLabels.js';
+import 'react';
+import { WeightInput as WeightInput$1 } from './WeightInput.js';
+
+const WeightInput = withLabels(WeightInput$1);
+
+export { WeightInput };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/WeightInput/index.ts"],"sourcesContent":["import { withLabels } from '../../hoc';\nimport { WeightInput as BaseWeightInput } from './WeightInput';\n\nexport const WeightInput = withLabels(BaseWeightInput);\n"],"names":["BaseWeightInput"],"mappings":";;;;MAGa,WAAW,GAAG,UAAU,CAACA,aAAe;;;;"}

package/dist/components/WeightInput/styled.cjs

@@ -13,12 +13,11 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--18asccd" }) `display:flex;flex-direction:column;position:relative;`;
 const Row = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--hefld1" }) `display:flex;flex-direction:row;`;
 const StyledTextField = styled__default.default(index.TextField).withConfig({ displayName: "vui--StyledTextField", componentId: "vui--1w2y0ok" }) `&&&{text-align:left;width:52px;}`;
-const StyledButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--StyledButton", componentId: "vui--fqwvpz" }) `padding:0 4px;border-color:${index$1.theme.colors.neutral.ink.lightest};margin-right:4px;${(props) => props.hasError &&
+styled__default.default(Button.Button).withConfig({ displayName: "vui--StyledButton", componentId: "vui--fqwvpz" }) `padding:0 4px;border-color:${index$1.theme.colors.neutral.ink.lightest};margin-right:4px;${(props) => props.hasError &&
     `
     border-color: ${index$1.theme.colors.secondary.red.base};
   `};`;
 
-exports.Button = StyledButton;
 exports.Container = Container;
 exports.Row = Row;
 exports.TextField = StyledTextField;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/WeightInput/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { theme } from '../../theme';\n\nimport { Button } from '../Button';\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\n\nconst Container = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n`;\n\nconst Row = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst StyledTextField = styled(TextField)`\n  &&& {\n    text-align: left;\n    width: 52px;\n  }\n`;\n\nconst StyledButton = styled(Button)<{ hasError?: boolean }>`\n  padding: 0 4px;\n  border-color: ${theme.colors.neutral.ink.lightest};\n  margin-right: 4px;\n\n  ${(props) =>\n    props.hasError &&\n    `\n    border-color: ${theme.colors.secondary.red.base};\n  `};\n`;\n\nexport { Container, Row, StyledTextField as TextField, StyledButton as Button };\n"],"names":["styled","BaseContainer","TextField","Button","theme"],"mappings":";;;;;;;;;;;;AAQA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC;AAMvC,MAAM,GAAG,GAAGD,uBAAM,CAACC,2BAAa,CAAC;AAKjC,MAAM,eAAe,GAAGD,uBAAM,CAACE,eAAS,CAAC;AAOnC,MAAA,YAAY,GAAGF,uBAAM,CAACG,aAAM,CAAC,CAEjB,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2BAAA,EAAAC,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,kBAAA,EAG/C,CAAC,KAAK,KACN,KAAK,CAAC,QAAQ;AACd,IAAA;AACgB,kBAAA,EAAAA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AAChD,EAAA,CAAA,CAAA,CAAA;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/WeightInput/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { theme } from '../../theme';\n\nimport { Button } from '../Button';\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\n\nconst Container = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n`;\n\nconst Row = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst StyledTextField = styled(TextField)`\n  &&& {\n    text-align: left;\n    width: 52px;\n  }\n`;\n\nconst StyledButton = styled(Button)<{ hasError?: boolean }>`\n  padding: 0 4px;\n  border-color: ${theme.colors.neutral.ink.lightest};\n  margin-right: 4px;\n\n  ${(props) =>\n    props.hasError &&\n    `\n    border-color: ${theme.colors.secondary.red.base};\n  `};\n`;\n\nexport { Container, Row, StyledTextField as TextField, StyledButton as Button };\n"],"names":["styled","BaseContainer","TextField","Button","theme"],"mappings":";;;;;;;;;;;;AAQA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC;AAMvC,MAAM,GAAG,GAAGD,uBAAM,CAACC,2BAAa,CAAC;AAKjC,MAAM,eAAe,GAAGD,uBAAM,CAACE,eAAS,CAAC;AAOpBF,uBAAM,CAACG,aAAM,CAAC,CAEjB,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2BAAA,EAAAC,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,kBAAA,EAG/C,CAAC,KAAK,KACN,KAAK,CAAC,QAAQ;AACd,IAAA;AACgB,kBAAA,EAAAA,aAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AAChD,EAAA,CAAA,CAAA,CAAA;;;;;;"}

package/dist/components/WeightInput/styled.js

@@ -7,10 +7,10 @@ import { BaseContainer } from '../BaseContainer/BaseContainer.js';
 const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--18asccd" }) `display:flex;flex-direction:column;position:relative;`;
 const Row = styled(BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--hefld1" }) `display:flex;flex-direction:row;`;
 const StyledTextField = styled(TextField).withConfig({ displayName: "vui--StyledTextField", componentId: "vui--1w2y0ok" }) `&&&{text-align:left;width:52px;}`;
-const StyledButton = styled(Button).withConfig({ displayName: "vui--StyledButton", componentId: "vui--fqwvpz" }) `padding:0 4px;border-color:${theme.colors.neutral.ink.lightest};margin-right:4px;${(props) => props.hasError &&
+styled(Button).withConfig({ displayName: "vui--StyledButton", componentId: "vui--fqwvpz" }) `padding:0 4px;border-color:${theme.colors.neutral.ink.lightest};margin-right:4px;${(props) => props.hasError &&
     `
     border-color: ${theme.colors.secondary.red.base};
   `};`;
 
-export { StyledButton as Button, Container, Row, StyledTextField as TextField };
+export { Container, Row, StyledTextField as TextField };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/WeightInput/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { theme } from '../../theme';\n\nimport { Button } from '../Button';\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\n\nconst Container = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n`;\n\nconst Row = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst StyledTextField = styled(TextField)`\n  &&& {\n    text-align: left;\n    width: 52px;\n  }\n`;\n\nconst StyledButton = styled(Button)<{ hasError?: boolean }>`\n  padding: 0 4px;\n  border-color: ${theme.colors.neutral.ink.lightest};\n  margin-right: 4px;\n\n  ${(props) =>\n    props.hasError &&\n    `\n    border-color: ${theme.colors.secondary.red.base};\n  `};\n`;\n\nexport { Container, Row, StyledTextField as TextField, StyledButton as Button };\n"],"names":[],"mappings":";;;;;;AAQA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC;AAMvC,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAKjC,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC;AAOnC,MAAA,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAEjB,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,kBAAA,EAG/C,CAAC,KAAK,KACN,KAAK,CAAC,QAAQ;AACd,IAAA;AACgB,kBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AAChD,EAAA,CAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/WeightInput/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { theme } from '../../theme';\n\nimport { Button } from '../Button';\nimport { TextField } from '../TextField';\nimport { BaseContainer } from '../BaseContainer';\n\nconst Container = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n`;\n\nconst Row = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst StyledTextField = styled(TextField)`\n  &&& {\n    text-align: left;\n    width: 52px;\n  }\n`;\n\nconst StyledButton = styled(Button)<{ hasError?: boolean }>`\n  padding: 0 4px;\n  border-color: ${theme.colors.neutral.ink.lightest};\n  margin-right: 4px;\n\n  ${(props) =>\n    props.hasError &&\n    `\n    border-color: ${theme.colors.secondary.red.base};\n  `};\n`;\n\nexport { Container, Row, StyledTextField as TextField, StyledButton as Button };\n"],"names":[],"mappings":";;;;;;AAQA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC;AAMvC,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAKjC,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC;AAOpB,MAAM,CAAC,MAAM,CAAC,CAEjB,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,kBAAA,EAG/C,CAAC,KAAK,KACN,KAAK,CAAC,QAAQ;AACd,IAAA;AACgB,kBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AAChD,EAAA,CAAA,CAAA,CAAA;;;;"}

package/dist/hoc/withLabels/withLabels.cjs

@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const withLabels = (Component) => ({ label, hint, error, tooltip, ...otherProps }) => {
+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 });
@@ -20,8 +20,8 @@ const withLabels = (Component) => ({ label, hint, error, tooltip, ...otherProps
         React__default.default.createElement("div", { style: { marginBottom: index.theme.sizes.xs } },
             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 && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip },
-                    React__default.default.createElement(HelpIcon.HelpIcon, { width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light })))),
+                (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" },

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 } 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?: string;\n  hint?: string | React.ReactNode;\n  error?: string;\n  tooltip?: string;\n}\n\nexport const withLabels =\n  <P extends object>(Component: ComponentType<P>): FC<P & WithLabelsProps> =>\n  ({ label, hint, error, tooltip, ...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 && (\n              <BlockTooltip text={tooltip}>\n                <HelpIcon\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":";;;;;;;;;;;;;;MAiBa,UAAU,GACrB,CAAmB,SAA2B,KAC9C,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,UAAU,EAAmB,KAAI;IAClE,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,OAAO,KACNJ,sBAAA,CAAA,aAAA,CAACK,mBAAY,EAAC,EAAA,IAAI,EAAE,OAAO,EAAA;AACzB,oBAAAL,sBAAA,CAAA,aAAA,CAACM,iBAAQ,EAAA,EACP,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 { 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;;;;"}

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

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

package/dist/hoc/withLabels/withLabels.js

@@ -6,7 +6,7 @@ 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, ...otherProps }) => {
+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.createElement(Component, { hasError: !!error, ...otherProps });
@@ -14,8 +14,8 @@ const withLabels = (Component) => ({ label, hint, error, tooltip, ...otherProps
         React.createElement("div", { style: { marginBottom: theme.sizes.xs } },
             React.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
                 React.createElement(Label, { id: `${componentId}-label`, htmlFor: componentId }, label),
-                tooltip && (React.createElement(BlockTooltip, { text: tooltip },
-                    React.createElement(HelpIcon, { width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.neutral.ink.light })))),
+                (tooltip || tooltipContent) && (React.createElement(BlockTooltip, { text: tooltip, content: tooltipContent },
+                    React.createElement(HelpIcon, { "data-testid": "tooltip-help", width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.neutral.ink.light })))),
             hint && React.createElement(Hint, { id: `${componentId}-hint` }, hint)),
         React.createElement(Component, { id: componentId, hasError: !!error, ...otherProps }),
         error && (React.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "xs" },

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 } 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?: string;\n  hint?: string | React.ReactNode;\n  error?: string;\n  tooltip?: string;\n}\n\nexport const withLabels =\n  <P extends object>(Component: ComponentType<P>): FC<P & WithLabelsProps> =>\n  ({ label, hint, error, tooltip, ...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 && (\n              <BlockTooltip text={tooltip}>\n                <HelpIcon\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":[],"mappings":";;;;;;;;MAiBa,UAAU,GACrB,CAAmB,SAA2B,KAC9C,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,UAAU,EAAmB,KAAI;IAClE,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,OAAO,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAA,CAAI;IAE1E,QACE,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;QACtC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,EAAA;AAC1C,YAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAQ,MAAA,CAAA,EAAE,OAAO,EAAE,WAAW,EAAA,EACpD,KAAK,CACA;AACP,gBAAA,OAAO,KACN,KAAA,CAAA,aAAA,CAAC,YAAY,EAAC,EAAA,IAAI,EAAE,OAAO,EAAA;AACzB,oBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,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,IAAI,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAO,KAAA,CAAA,EAAA,EAAG,IAAI,CAAQ,CACnD;AACN,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;AACvE,QAAA,KAAK,KACJ,KAAC,CAAA,aAAA,CAAA,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;YACxD,KAAC,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;YAChF,KAAC,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 { 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":[],"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,OAAO,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAA,CAAI;IAE1E,QACE,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAA;QACtC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,EAAA;AAC1C,YAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;AACxD,gBAAA,KAAA,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,MACzB,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAA,KAAA,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,IAAI,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,CAAG,EAAA,WAAW,CAAO,KAAA,CAAA,EAAA,EAAG,IAAI,CAAQ,CACnD;AACN,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAA,GAAO,UAAgB,EAAI,CAAA;AACvE,QAAA,KAAK,KACJ,KAAC,CAAA,aAAA,CAAA,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAA;YACxD,KAAC,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;YAChF,KAAC,CAAA,aAAA,CAAA,KAAK,QAAE,KAAK,CAAS,CAChB,CACT,CACS;AAEhB;;;;"}

package/dist/index.cjs

@@ -34,12 +34,12 @@ 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 DimensionsInput = require('./components/DimensionsInput/DimensionsInput.cjs');
+var index$1 = require('./components/DimensionsInput/index.cjs');
 var Dropdown = require('./components/Dropdown/Dropdown.cjs');
 var FilterTag = require('./components/FilterTag/FilterTag.cjs');
-var index$1 = require('./components/Grid/index.cjs');
+var index$2 = require('./components/Grid/index.cjs');
 var Image = require('./components/Image/Image.cjs');
-var index$2 = require('./components/InputGroup/index.cjs');
+var index$3 = 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 +61,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$3 = require('./components/TextField/index.cjs');
+var index$4 = 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,7 +73,7 @@ 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 WeightInput = require('./components/WeightInput/WeightInput.cjs');
+var index$5 = require('./components/WeightInput/index.cjs');
 var Indicator = require('./components/Indicator/Indicator.cjs');
 var useClickOutside = require('./hooks/useClickOutside.cjs');
 var useDebounce = require('./hooks/useDebounce.cjs');
@@ -89,7 +89,7 @@ var buildClassnames = require('./utils/buildClassnames.cjs');
 var color = require('./utils/color.cjs');
 var generateId = require('./utils/generateId.cjs');
 var isExternalLink = require('./utils/isExternalLink.cjs');
-var index$4 = require('./theme/index.cjs');
+var index$6 = require('./theme/index.cjs');
 var utils = require('./theme/utils.cjs');
 
 
@@ -135,12 +135,12 @@ exports.useScrollPosition = useScrollPosition.useScrollPosition;
 exports.useSelection = useSelection.useSelection;
 exports.DescriptionList = DescriptionList.DescriptionList;
 exports.DetailPage = DetailPage.DetailPage;
-exports.DimensionsInput = DimensionsInput.DimensionsInput;
+exports.DimensionsInput = index$1.DimensionsInput;
 exports.Dropdown = Dropdown.Dropdown;
 exports.FilterTag = FilterTag.FilterTag;
-exports.Grid = index$1.Grid;
+exports.Grid = index$2.Grid;
 exports.Image = Image.Image;
-exports.InputGroup = index$2.InputGroup;
+exports.InputGroup = index$3.InputGroup;
 exports.LegacyDataTable = LegacyDataTable.LegacyDataTable;
 exports.Loader = Loader.Loader;
 exports.LoginWithAmazonButton = LoginWithAmazonButton.LoginWithAmazonButton;
@@ -162,7 +162,7 @@ exports.Stack = Stack.Stack;
 exports.Stepper = Stepper.Stepper;
 exports.Tag = Tag.Tag;
 exports.Text = Text.Text;
-exports.TextField = index$3.TextField;
+exports.TextField = index$4.TextField;
 exports.ToastsLayout = ToastsLayout.ToastsLayout;
 exports.Toggle = Toggle.Toggle;
 exports.ToggleButton = ToggleButton.ToggleButton;
@@ -181,7 +181,7 @@ exports.Popup = Popup.Popup;
 exports.View = View.View;
 exports.ViewTab = ViewTab.ViewTab;
 exports.ViewsContainer = ViewsContainer.ViewsContainer;
-exports.WeightInput = WeightInput.WeightInput;
+exports.WeightInput = index$5.WeightInput;
 exports.Indicator = Indicator.Indicator;
 exports.useClickOutside = useClickOutside.useClickOutside;
 exports.useDebounce = useDebounce.useDebounce;
@@ -199,6 +199,6 @@ exports.getOpaqueHexColor = color.getOpaqueHexColor;
 exports.hexToRgb = color.hexToRgb;
 exports.generateId = generateId.generateId;
 exports.isExternalLink = isExternalLink.isExternalLink;
-exports.theme = index$4.theme;
+exports.theme = index$6.theme;
 exports.getTextStyles = utils.getTextStyles;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -32,7 +32,7 @@ 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/DimensionsInput.js';
+export { DimensionsInput } from './components/DimensionsInput/index.js';
 export { Dropdown } from './components/Dropdown/Dropdown.js';
 export { FilterTag } from './components/FilterTag/FilterTag.js';
 export { Grid } from './components/Grid/index.js';
@@ -71,7 +71,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/WeightInput.js';
+export { WeightInput } from './components/WeightInput/index.js';
 export { Indicator } from './components/Indicator/Indicator.js';
 export { useClickOutside } from './hooks/useClickOutside.js';
 export { useDebounce } from './hooks/useDebounce.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "9.1.2",
+  "version": "9.3.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",