@veeqo/ui 9.10.3 → 10.0.0-beta.2

package/dist/components/ViewTab/styled.cjs

@@ -14,10 +14,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--13z4q4k" }) `line-height:1;`;
-const ThreeDotsIconStyling = styled__default.default(ThreeDotsIcon.ThreeDotsIcon).withConfig({ displayName: "vui--ThreeDotsIconStyling", componentId: "vui--lo8tpb" }) ``;
-const CrossIconStyling = styled__default.default(CrossIcon.CrossIcon).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--u5oj4b" }) ``;
-const CounterContainer = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1nbpnol" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
+const CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--h7w298" }) `line-height:1;`;
+const ThreeDotsIconStyling = styled__default.default(ThreeDotsIcon.ThreeDotsIcon).withConfig({ displayName: "vui--ThreeDotsIconStyling", componentId: "vui--srai30" }) ``;
+const CrossIconStyling = styled__default.default(CrossIcon.CrossIcon).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--1aruzvl" }) ``;
+const CounterContainer = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--17dajvu" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
     `
       background-color: ${colourPalette.dark};
 
@@ -25,7 +25,7 @@ const CounterContainer = styled__default.default(Text.Text).withConfig({ display
         color: ${colors.colors.neutral.grey.lightest};
       }
   `}`;
-const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--1fc3r48" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:${index.theme.sizes.sm};border:1px solid transparent;cursor:pointer;background-color:transparent;${({ customTextColour }) => `
+const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--ex0imc" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:${index.theme.sizes.sm};border:1px solid transparent;cursor:pointer;background-color:transparent;${({ customTextColour }) => `
 
   &:hover {
     background-color: ${colors.colors.neutral.grey.base};
@@ -64,7 +64,7 @@ const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig(
       color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colourPalette.dark};
     }
   `}`;
-const ViewButton = styled__default.default(styled$1.FlatButton).withConfig({ displayName: "vui--ViewButton", componentId: "vui--i4ro1b" }) `padding:${index.theme.sizes.sm};box-sizing:border-box;border-radius:4px;border:none;position:relative;margin:0;padding:0;${({ customTextColour }) => `
+const ViewButton = styled__default.default(styled$1.FlatButton).withConfig({ displayName: "vui--ViewButton", componentId: "vui--125nec2" }) `padding:${index.theme.sizes.sm};box-sizing:border-box;border-radius:4px;border:none;position:relative;margin:0;padding:0;${({ customTextColour }) => `
   &:focus-visible {
     ${Contour} {
       background-color: ${colors.colors.neutral.grey.base};
@@ -93,7 +93,7 @@ const IconStyling = {
         width: sizes.sizes.base,
     },
 };
-const CustomIconWrapper = styled__default.default.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--1cuc9yu" }) `display:flex;align-items:center;margin-right:${sizes.sizes.sm};svg{height:${sizes.sizes.base};width:${sizes.sizes.base};}`;
+const CustomIconWrapper = styled__default.default.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--j41rgu" }) `display:flex;align-items:center;margin-right:${sizes.sizes.sm};svg{height:${sizes.sizes.base};width:${sizes.sizes.base};}`;
 
 exports.Text = Text.Text;
 exports.Contour = Contour;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon } from '../../tempIcons/ThreeDotsIcon';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 2px 4px;\n  min-width: 20px;\n  height: 20px;\n  margin-left: 8px;\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n      background-color: ${colourPalette.dark};\n\n      & > ${CounterText} {\n        color: ${colors.neutral.grey.lightest};\n      }\n  `}\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 40px;\n  border-radius: 4px;\n  padding: ${theme.sizes.sm};\n  border: 1px solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  ${({ customTextColour }) => `\n\n  &:hover {\n    background-color: ${colors.neutral.grey.base};\n    & > ${CounterContainer} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterText} {\n        color: ${colors.neutral.ink.base};\n      }\n    }\n    & > ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n    & > ${ThreeDotsIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n  }\n\n  & > ${Text} {\n    color: ${customTextColour ?? colors.neutral.ink.dark};\n  }\n  `}\n\n  ${({ active, colourPalette, customTextColour }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n\n    & > ${ThreeDotsIconStyling} {\n      color: ${colourPalette.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colourPalette.dark};\n    }\n\n    & > ${Text} {\n      color: ${customTextColour ?? colourPalette.dark};\n    }\n  `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n  padding: ${theme.sizes.sm};\n  box-sizing: border-box;\n  border-radius: 4px;\n  border: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n\n  ${({ customTextColour }) => `\n  &:focus-visible {\n    ${Contour} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterContainer} {\n        background-color: ${colors.neutral.grey.base};\n        & > ${CounterText} {\n          color: ${colors.neutral.ink.base};\n        }\n      }\n      & > ${Text} {\n        color: ${customTextColour ?? colors.neutral.ink.dark};\n      }\n      & > ${ThreeDotsIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n      & > ${CrossIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n    }\n  `}\n`;\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${sizes.sm};\n\n  svg {\n    height: ${sizes.base};\n    width: ${sizes.base};\n  }\n`;\n\nexport {\n  ViewButton,\n  Contour,\n  Text,\n  CounterContainer,\n  CounterText,\n  IconStyling,\n  ThreeDotsIconStyling,\n  CrossIconStyling,\n};\n"],"names":["styled","Text","ThreeDotsIcon","CrossIcon","colors","BaseContainer","theme","FlatButton","sizes"],"mappings":"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"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon } from '../../tempIcons/ThreeDotsIcon';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 2px 4px;\n  min-width: 20px;\n  height: 20px;\n  margin-left: 8px;\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n      background-color: ${colourPalette.dark};\n\n      & > ${CounterText} {\n        color: ${colors.neutral.grey.lightest};\n      }\n  `}\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 40px;\n  border-radius: 4px;\n  padding: ${theme.sizes.sm};\n  border: 1px solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  ${({ customTextColour }) => `\n\n  &:hover {\n    background-color: ${colors.neutral.grey.base};\n    & > ${CounterContainer} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterText} {\n        color: ${colors.neutral.ink.base};\n      }\n    }\n    & > ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n    & > ${ThreeDotsIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n  }\n\n  & > ${Text} {\n    color: ${customTextColour ?? colors.neutral.ink.dark};\n  }\n  `}\n\n  ${({ active, colourPalette, customTextColour }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n\n    & > ${ThreeDotsIconStyling} {\n      color: ${colourPalette.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colourPalette.dark};\n    }\n\n    & > ${Text} {\n      color: ${customTextColour ?? colourPalette.dark};\n    }\n  `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n  padding: ${theme.sizes.sm};\n  box-sizing: border-box;\n  border-radius: 4px;\n  border: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n\n  ${({ customTextColour }) => `\n  &:focus-visible {\n    ${Contour} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterContainer} {\n        background-color: ${colors.neutral.grey.base};\n        & > ${CounterText} {\n          color: ${colors.neutral.ink.base};\n        }\n      }\n      & > ${Text} {\n        color: ${customTextColour ?? colors.neutral.ink.dark};\n      }\n      & > ${ThreeDotsIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n      & > ${CrossIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n    }\n  `}\n`;\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${sizes.sm};\n\n  svg {\n    height: ${sizes.base};\n    width: ${sizes.base};\n  }\n`;\n\nexport {\n  ViewButton,\n  Contour,\n  Text,\n  CounterContainer,\n  CounterText,\n  IconStyling,\n  ThreeDotsIconStyling,\n  CrossIconStyling,\n};\n"],"names":["styled","Text","ThreeDotsIcon","CrossIcon","colors","BaseContainer","theme","FlatButton","sizes"],"mappings":"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"}

package/dist/components/ViewTab/styled.js

@@ -8,10 +8,10 @@ import { CrossIcon } from '../../tempIcons/CrossIcon.js';
 import { FlatButton } from '../Button/components/styled.js';
 import { theme } from '../../theme/index.js';
 
-const CounterText = styled(Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--13z4q4k" }) `line-height:1;`;
-const ThreeDotsIconStyling = styled(ThreeDotsIcon).withConfig({ displayName: "vui--ThreeDotsIconStyling", componentId: "vui--lo8tpb" }) ``;
-const CrossIconStyling = styled(CrossIcon).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--u5oj4b" }) ``;
-const CounterContainer = styled(Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--1nbpnol" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
+const CounterText = styled(Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--h7w298" }) `line-height:1;`;
+const ThreeDotsIconStyling = styled(ThreeDotsIcon).withConfig({ displayName: "vui--ThreeDotsIconStyling", componentId: "vui--srai30" }) ``;
+const CrossIconStyling = styled(CrossIcon).withConfig({ displayName: "vui--CrossIconStyling", componentId: "vui--1aruzvl" }) ``;
+const CounterContainer = styled(Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--17dajvu" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ active, colourPalette }) => active &&
     `
       background-color: ${colourPalette.dark};
 
@@ -19,7 +19,7 @@ const CounterContainer = styled(Text).withConfig({ displayName: "vui--CounterCon
         color: ${colors.neutral.grey.lightest};
       }
   `}`;
-const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--1fc3r48" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:${theme.sizes.sm};border:1px solid transparent;cursor:pointer;background-color:transparent;${({ customTextColour }) => `
+const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--ex0imc" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:${theme.sizes.sm};border:1px solid transparent;cursor:pointer;background-color:transparent;${({ customTextColour }) => `
 
   &:hover {
     background-color: ${colors.neutral.grey.base};
@@ -58,7 +58,7 @@ const Contour = styled(BaseContainer).withConfig({ displayName: "vui--Contour",
       color: ${customTextColour !== null && customTextColour !== undefined ? customTextColour : colourPalette.dark};
     }
   `}`;
-const ViewButton = styled(FlatButton).withConfig({ displayName: "vui--ViewButton", componentId: "vui--i4ro1b" }) `padding:${theme.sizes.sm};box-sizing:border-box;border-radius:4px;border:none;position:relative;margin:0;padding:0;${({ customTextColour }) => `
+const ViewButton = styled(FlatButton).withConfig({ displayName: "vui--ViewButton", componentId: "vui--125nec2" }) `padding:${theme.sizes.sm};box-sizing:border-box;border-radius:4px;border:none;position:relative;margin:0;padding:0;${({ customTextColour }) => `
   &:focus-visible {
     ${Contour} {
       background-color: ${colors.neutral.grey.base};
@@ -87,7 +87,7 @@ const IconStyling = {
         width: sizes.base,
     },
 };
-const CustomIconWrapper = styled.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--1cuc9yu" }) `display:flex;align-items:center;margin-right:${sizes.sm};svg{height:${sizes.base};width:${sizes.base};}`;
+const CustomIconWrapper = styled.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--j41rgu" }) `display:flex;align-items:center;margin-right:${sizes.sm};svg{height:${sizes.base};width:${sizes.base};}`;
 
 export { Contour, CounterContainer, CounterText, CrossIconStyling, CustomIconWrapper, IconStyling, Text, ThreeDotsIconStyling, ViewButton };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon } from '../../tempIcons/ThreeDotsIcon';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 2px 4px;\n  min-width: 20px;\n  height: 20px;\n  margin-left: 8px;\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n      background-color: ${colourPalette.dark};\n\n      & > ${CounterText} {\n        color: ${colors.neutral.grey.lightest};\n      }\n  `}\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 40px;\n  border-radius: 4px;\n  padding: ${theme.sizes.sm};\n  border: 1px solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  ${({ customTextColour }) => `\n\n  &:hover {\n    background-color: ${colors.neutral.grey.base};\n    & > ${CounterContainer} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterText} {\n        color: ${colors.neutral.ink.base};\n      }\n    }\n    & > ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n    & > ${ThreeDotsIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n  }\n\n  & > ${Text} {\n    color: ${customTextColour ?? colors.neutral.ink.dark};\n  }\n  `}\n\n  ${({ active, colourPalette, customTextColour }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n\n    & > ${ThreeDotsIconStyling} {\n      color: ${colourPalette.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colourPalette.dark};\n    }\n\n    & > ${Text} {\n      color: ${customTextColour ?? colourPalette.dark};\n    }\n  `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n  padding: ${theme.sizes.sm};\n  box-sizing: border-box;\n  border-radius: 4px;\n  border: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n\n  ${({ customTextColour }) => `\n  &:focus-visible {\n    ${Contour} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterContainer} {\n        background-color: ${colors.neutral.grey.base};\n        & > ${CounterText} {\n          color: ${colors.neutral.ink.base};\n        }\n      }\n      & > ${Text} {\n        color: ${customTextColour ?? colors.neutral.ink.dark};\n      }\n      & > ${ThreeDotsIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n      & > ${CrossIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n    }\n  `}\n`;\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${sizes.sm};\n\n  svg {\n    height: ${sizes.base};\n    width: ${sizes.base};\n  }\n`;\n\nexport {\n  ViewButton,\n  Contour,\n  Text,\n  CounterContainer,\n  CounterText,\n  IconStyling,\n  ThreeDotsIconStyling,\n  CrossIconStyling,\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/ViewTab/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\n\nimport { ViewTabProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\nimport { ThreeDotsIcon } from '../../tempIcons/ThreeDotsIcon';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { FlatButton } from '../Button/components/styled';\nimport { theme } from '../../theme';\n\ntype RequiredPalette = { colourPalette: ColourPalette };\nexport type ContourProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type CounterProps = Pick<ViewTabProps, 'active' | 'customTextColour'> & RequiredPalette;\nexport type ViewButtonProps = Pick<ViewTabProps, 'customTextColour'>;\n\nconst CounterText = styled(Text)`\n  line-height: 1;\n`;\n\nconst ThreeDotsIconStyling = styled(ThreeDotsIcon)``;\nconst CrossIconStyling = styled(CrossIcon)``;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  padding: 2px 4px;\n  min-width: 20px;\n  height: 20px;\n  margin-left: 8px;\n\n  ${({ active, colourPalette }) =>\n    active &&\n    `\n      background-color: ${colourPalette.dark};\n\n      & > ${CounterText} {\n        color: ${colors.neutral.grey.lightest};\n      }\n  `}\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 40px;\n  border-radius: 4px;\n  padding: ${theme.sizes.sm};\n  border: 1px solid transparent;\n  cursor: pointer;\n  background-color: transparent;\n\n  ${({ customTextColour }) => `\n\n  &:hover {\n    background-color: ${colors.neutral.grey.base};\n    & > ${CounterContainer} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterText} {\n        color: ${colors.neutral.ink.base};\n      }\n    }\n    & > ${Text} {\n      color: ${customTextColour ?? colors.neutral.ink.dark};\n    }\n    & > ${ThreeDotsIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colors.neutral.ink.dark};\n    }\n  }\n\n  & > ${Text} {\n    color: ${customTextColour ?? colors.neutral.ink.dark};\n  }\n  `}\n\n  ${({ active, colourPalette, customTextColour }) =>\n    active &&\n    `\n    background-color: ${colourPalette.lightest};\n\n    & > ${ThreeDotsIconStyling} {\n      color: ${colourPalette.dark};\n    }\n    & > ${CrossIconStyling} {\n      color: ${colourPalette.dark};\n    }\n\n    & > ${Text} {\n      color: ${customTextColour ?? colourPalette.dark};\n    }\n  `}\n`;\n\nconst ViewButton = styled(FlatButton)<ViewButtonProps>`\n  padding: ${theme.sizes.sm};\n  box-sizing: border-box;\n  border-radius: 4px;\n  border: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n\n  ${({ customTextColour }) => `\n  &:focus-visible {\n    ${Contour} {\n      background-color: ${colors.neutral.grey.base};\n      & > ${CounterContainer} {\n        background-color: ${colors.neutral.grey.base};\n        & > ${CounterText} {\n          color: ${colors.neutral.ink.base};\n        }\n      }\n      & > ${Text} {\n        color: ${customTextColour ?? colors.neutral.ink.dark};\n      }\n      & > ${ThreeDotsIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n      & > ${CrossIconStyling} {\n        color: ${colors.neutral.ink.dark};\n      }\n    }\n  `}\n`;\n\nconst IconStyling = {\n  style: {\n    marginLeft: sizes.xs,\n    padding: sizes.xs,\n    height: sizes.base,\n    width: sizes.base,\n  } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${sizes.sm};\n\n  svg {\n    height: ${sizes.base};\n    width: ${sizes.base};\n  }\n`;\n\nexport {\n  ViewButton,\n  Contour,\n  Text,\n  CounterContainer,\n  CounterText,\n  IconStyling,\n  ThreeDotsIconStyling,\n  CrossIconStyling,\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ViewsContainer/styled.cjs

@@ -13,15 +13,15 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const ViewsWrapper = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ViewsWrapper", componentId: "vui--x8ukf0" }) `overflow-x:scroll;-ms-overflow-style:none;scrollbar-width:none;::-webkit-scrollbar{display:none;}gap:8px;height:inherit;padding:8px 6px 8px 12px;margin-left:0;`;
-const Container = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--Container", componentId: "vui--mlh8wa" }) `background-color:${colors.colors.neutral.grey.lightest};`;
-const StyledLeftIcon = styled__default.default(LeftArrowIcon.LeftArrowIcon).withConfig({ displayName: "vui--StyledLeftIcon", componentId: "vui--193620d" }) `color:${colors.colors.neutral.ink.base};`;
-const StyledRightIcon = styled__default.default(RightArrowIcon.RightArrowIcon).withConfig({ displayName: "vui--StyledRightIcon", componentId: "vui--erlipg" }) `color:${colors.colors.neutral.ink.base};`;
-const StyledMenuIcon = styled__default.default(ThreeDotsIcon.ThreeDotsIcon).withConfig({ displayName: "vui--StyledMenuIcon", componentId: "vui--eg23b0" }) `color:${colors.colors.neutral.ink.base};`;
-const StyledMenuButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--StyledMenuButton", componentId: "vui--1o9jbht" }) `background-color:white;&:hover{background-color:${colors.colors.neutral.grey.lightest};}`;
-const StyledLeftButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--StyledLeftButton", componentId: "vui--wtwmiz" }) `background-color:white;&:disabled{background-color:white;${StyledLeftIcon}{color:${colors.colors.neutral.ink.lightest};}}&:hover{background-color:${colors.colors.neutral.grey.lightest};}`;
-const StyledRightButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--StyledRightButton", componentId: "vui--1ycuwov" }) `background-color:white;&:disabled{background-color:white;${StyledRightIcon}{color:${colors.colors.neutral.ink.lightest};}}&:hover{background-color:${colors.colors.neutral.grey.lightest};}`;
-const StyledInputGroup = styled__default.default(index.InputGroup).withConfig({ displayName: "vui--StyledInputGroup", componentId: "vui--l3ez4z" }) `padding-right:8px;margin-left:0;& > *:first-child:last-child{border-radius:4px !important;}`;
+const ViewsWrapper = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ViewsWrapper", componentId: "vui--12onh8s" }) `overflow-x:scroll;-ms-overflow-style:none;scrollbar-width:none;::-webkit-scrollbar{display:none;}gap:8px;height:inherit;padding:8px 6px 8px 12px;margin-left:0;`;
+const Container = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--Container", componentId: "vui--1wfc8qr" }) `background-color:${colors.colors.neutral.grey.lightest};`;
+const StyledLeftIcon = styled__default.default(LeftArrowIcon.LeftArrowIcon).withConfig({ displayName: "vui--StyledLeftIcon", componentId: "vui--1g434cq" }) `color:${colors.colors.neutral.ink.base};`;
+const StyledRightIcon = styled__default.default(RightArrowIcon.RightArrowIcon).withConfig({ displayName: "vui--StyledRightIcon", componentId: "vui--12frpwt" }) `color:${colors.colors.neutral.ink.base};`;
+const StyledMenuIcon = styled__default.default(ThreeDotsIcon.ThreeDotsIcon).withConfig({ displayName: "vui--StyledMenuIcon", componentId: "vui--a4h4to" }) `color:${colors.colors.neutral.ink.base};`;
+const StyledMenuButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--StyledMenuButton", componentId: "vui--180rfki" }) `background-color:white;&:hover{background-color:${colors.colors.neutral.grey.lightest};}`;
+const StyledLeftButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--StyledLeftButton", componentId: "vui--uz9o0v" }) `background-color:white;&:disabled{background-color:white;${StyledLeftIcon}{color:${colors.colors.neutral.ink.lightest};}}&:hover{background-color:${colors.colors.neutral.grey.lightest};}`;
+const StyledRightButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--StyledRightButton", componentId: "vui--6mo9hm" }) `background-color:white;&:disabled{background-color:white;${StyledRightIcon}{color:${colors.colors.neutral.ink.lightest};}}&:hover{background-color:${colors.colors.neutral.grey.lightest};}`;
+const StyledInputGroup = styled__default.default(index.InputGroup).withConfig({ displayName: "vui--StyledInputGroup", componentId: "vui--2io8bw" }) `padding-right:8px;margin-left:0;& > *:first-child:last-child{border-radius:4px !important;}`;
 
 exports.Container = Container;
 exports.StyledInputGroup = StyledInputGroup;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewsContainer/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { LeftArrowIcon } from '../../tempIcons/LeftArrowIcon';\nimport { RightArrowIcon } from '../../tempIcons/RightArrowIcon';\nimport { colors } from '../../theme/modules/colors';\nimport { ThreeDotsIcon } from '../../tempIcons/ThreeDotsIcon';\nimport { InputGroup } from '../InputGroup';\n\nexport const ViewsWrapper = styled(Stack)`\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n\n  ::-webkit-scrollbar {\n    display: none; /* for Chrome, Safari, and Opera */\n  }\n\n  gap: 8px;\n  height: inherit;\n  padding: 8px 6px 8px 12px;\n  margin-left: 0;\n`;\n\nexport const Container = styled(Stack)`\n  background-color: ${colors.neutral.grey.lightest};\n`;\n\nexport const StyledLeftIcon = styled(LeftArrowIcon)`\n  color: ${colors.neutral.ink.base};\n`;\nexport const StyledRightIcon = styled(RightArrowIcon)`\n  color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuIcon = styled(ThreeDotsIcon)`\n  color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuButton = styled(Button)`\n  background-color: white;\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledLeftButton = styled(Button)`\n  background-color: white;\n\n  &:disabled {\n    background-color: white;\n    ${StyledLeftIcon} {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledRightButton = styled(Button)`\n  background-color: white;\n\n  &:disabled {\n    background-color: white;\n    ${StyledRightIcon} {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledInputGroup = styled(InputGroup)`\n  padding-right: 8px;\n  margin-left: 0;\n\n  & > *:first-child:last-child {\n    border-radius: 4px !important;\n  }\n`;\n"],"names":["styled","Stack","colors","LeftArrowIcon","RightArrowIcon","ThreeDotsIcon","Button","InputGroup"],"mappings":";;;;;;;;;;;;;;;MASa,YAAY,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+JAAA;AAe5B,MAAA,SAAS,GAAGD,uBAAM,CAACC,WAAK,CAAC,CAChB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAGrC,MAAA,cAAc,GAAGF,uBAAM,CAACG,2BAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAD,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAErB,MAAA,eAAe,GAAGF,uBAAM,CAACI,6BAAc,CAAC,CAC1C,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAF,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,cAAc,GAAGF,uBAAM,CAACK,2BAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAH,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,gBAAgB,GAAGF,uBAAM,CAACM,aAAM,CAAC,CAItB,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAAAJ,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAIvC,MAAA,gBAAgB,GAAGF,uBAAM,CAACM,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKxC,cAAc,CAAA,OAAA,EACLJ,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;AAIvC,MAAA,iBAAiB,GAAGF,uBAAM,CAACM,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKzC,eAAe,CAAA,OAAA,EACNJ,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIvC,gBAAgB,GAAGF,uBAAM,CAACO,gBAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2FAAA;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/ViewsContainer/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { LeftArrowIcon } from '../../tempIcons/LeftArrowIcon';\nimport { RightArrowIcon } from '../../tempIcons/RightArrowIcon';\nimport { colors } from '../../theme/modules/colors';\nimport { ThreeDotsIcon } from '../../tempIcons/ThreeDotsIcon';\nimport { InputGroup } from '../InputGroup';\n\nexport const ViewsWrapper = styled(Stack)`\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n\n  ::-webkit-scrollbar {\n    display: none; /* for Chrome, Safari, and Opera */\n  }\n\n  gap: 8px;\n  height: inherit;\n  padding: 8px 6px 8px 12px;\n  margin-left: 0;\n`;\n\nexport const Container = styled(Stack)`\n  background-color: ${colors.neutral.grey.lightest};\n`;\n\nexport const StyledLeftIcon = styled(LeftArrowIcon)`\n  color: ${colors.neutral.ink.base};\n`;\nexport const StyledRightIcon = styled(RightArrowIcon)`\n  color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuIcon = styled(ThreeDotsIcon)`\n  color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuButton = styled(Button)`\n  background-color: white;\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledLeftButton = styled(Button)`\n  background-color: white;\n\n  &:disabled {\n    background-color: white;\n    ${StyledLeftIcon} {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledRightButton = styled(Button)`\n  background-color: white;\n\n  &:disabled {\n    background-color: white;\n    ${StyledRightIcon} {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledInputGroup = styled(InputGroup)`\n  padding-right: 8px;\n  margin-left: 0;\n\n  & > *:first-child:last-child {\n    border-radius: 4px !important;\n  }\n`;\n"],"names":["styled","Stack","colors","LeftArrowIcon","RightArrowIcon","ThreeDotsIcon","Button","InputGroup"],"mappings":";;;;;;;;;;;;;;;MASa,YAAY,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+JAAA;AAe5B,MAAA,SAAS,GAAGD,uBAAM,CAACC,WAAK,CAAC,CAChB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAGrC,MAAA,cAAc,GAAGF,uBAAM,CAACG,2BAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAD,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAErB,MAAA,eAAe,GAAGF,uBAAM,CAACI,6BAAc,CAAC,CAC1C,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAF,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,cAAc,GAAGF,uBAAM,CAACK,2BAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAAH,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,gBAAgB,GAAGF,uBAAM,CAACM,aAAM,CAAC,CAItB,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAAAJ,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAIvC,MAAA,gBAAgB,GAAGF,uBAAM,CAACM,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKxC,cAAc,CAAA,OAAA,EACLJ,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;AAIvC,MAAA,iBAAiB,GAAGF,uBAAM,CAACM,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKzC,eAAe,CAAA,OAAA,EACNJ,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIvC,gBAAgB,GAAGF,uBAAM,CAACO,gBAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2FAAA;;;;;;;;;;;;"}

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

@@ -31,4 +31,4 @@ export declare const StyledRightButton: import("styled-components").StyledCompon
     loading?: boolean | undefined;
     contentStyles?: import("react").CSSProperties | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
-export declare const StyledInputGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledInputGroup: import("styled-components").StyledComponent<"div", any, import("../types").InputProps, never>;

package/dist/components/ViewsContainer/styled.js

@@ -7,15 +7,15 @@ import { colors } from '../../theme/modules/colors.js';
 import { ThreeDotsIcon } from '../../tempIcons/ThreeDotsIcon.js';
 import { InputGroup } from '../InputGroup/index.js';
 
-const ViewsWrapper = styled(Stack).withConfig({ displayName: "vui--ViewsWrapper", componentId: "vui--x8ukf0" }) `overflow-x:scroll;-ms-overflow-style:none;scrollbar-width:none;::-webkit-scrollbar{display:none;}gap:8px;height:inherit;padding:8px 6px 8px 12px;margin-left:0;`;
-const Container = styled(Stack).withConfig({ displayName: "vui--Container", componentId: "vui--mlh8wa" }) `background-color:${colors.neutral.grey.lightest};`;
-const StyledLeftIcon = styled(LeftArrowIcon).withConfig({ displayName: "vui--StyledLeftIcon", componentId: "vui--193620d" }) `color:${colors.neutral.ink.base};`;
-const StyledRightIcon = styled(RightArrowIcon).withConfig({ displayName: "vui--StyledRightIcon", componentId: "vui--erlipg" }) `color:${colors.neutral.ink.base};`;
-const StyledMenuIcon = styled(ThreeDotsIcon).withConfig({ displayName: "vui--StyledMenuIcon", componentId: "vui--eg23b0" }) `color:${colors.neutral.ink.base};`;
-const StyledMenuButton = styled(Button).withConfig({ displayName: "vui--StyledMenuButton", componentId: "vui--1o9jbht" }) `background-color:white;&:hover{background-color:${colors.neutral.grey.lightest};}`;
-const StyledLeftButton = styled(Button).withConfig({ displayName: "vui--StyledLeftButton", componentId: "vui--wtwmiz" }) `background-color:white;&:disabled{background-color:white;${StyledLeftIcon}{color:${colors.neutral.ink.lightest};}}&:hover{background-color:${colors.neutral.grey.lightest};}`;
-const StyledRightButton = styled(Button).withConfig({ displayName: "vui--StyledRightButton", componentId: "vui--1ycuwov" }) `background-color:white;&:disabled{background-color:white;${StyledRightIcon}{color:${colors.neutral.ink.lightest};}}&:hover{background-color:${colors.neutral.grey.lightest};}`;
-const StyledInputGroup = styled(InputGroup).withConfig({ displayName: "vui--StyledInputGroup", componentId: "vui--l3ez4z" }) `padding-right:8px;margin-left:0;& > *:first-child:last-child{border-radius:4px !important;}`;
+const ViewsWrapper = styled(Stack).withConfig({ displayName: "vui--ViewsWrapper", componentId: "vui--12onh8s" }) `overflow-x:scroll;-ms-overflow-style:none;scrollbar-width:none;::-webkit-scrollbar{display:none;}gap:8px;height:inherit;padding:8px 6px 8px 12px;margin-left:0;`;
+const Container = styled(Stack).withConfig({ displayName: "vui--Container", componentId: "vui--1wfc8qr" }) `background-color:${colors.neutral.grey.lightest};`;
+const StyledLeftIcon = styled(LeftArrowIcon).withConfig({ displayName: "vui--StyledLeftIcon", componentId: "vui--1g434cq" }) `color:${colors.neutral.ink.base};`;
+const StyledRightIcon = styled(RightArrowIcon).withConfig({ displayName: "vui--StyledRightIcon", componentId: "vui--12frpwt" }) `color:${colors.neutral.ink.base};`;
+const StyledMenuIcon = styled(ThreeDotsIcon).withConfig({ displayName: "vui--StyledMenuIcon", componentId: "vui--a4h4to" }) `color:${colors.neutral.ink.base};`;
+const StyledMenuButton = styled(Button).withConfig({ displayName: "vui--StyledMenuButton", componentId: "vui--180rfki" }) `background-color:white;&:hover{background-color:${colors.neutral.grey.lightest};}`;
+const StyledLeftButton = styled(Button).withConfig({ displayName: "vui--StyledLeftButton", componentId: "vui--uz9o0v" }) `background-color:white;&:disabled{background-color:white;${StyledLeftIcon}{color:${colors.neutral.ink.lightest};}}&:hover{background-color:${colors.neutral.grey.lightest};}`;
+const StyledRightButton = styled(Button).withConfig({ displayName: "vui--StyledRightButton", componentId: "vui--6mo9hm" }) `background-color:white;&:disabled{background-color:white;${StyledRightIcon}{color:${colors.neutral.ink.lightest};}}&:hover{background-color:${colors.neutral.grey.lightest};}`;
+const StyledInputGroup = styled(InputGroup).withConfig({ displayName: "vui--StyledInputGroup", componentId: "vui--2io8bw" }) `padding-right:8px;margin-left:0;& > *:first-child:last-child{border-radius:4px !important;}`;
 
 export { Container, StyledInputGroup, StyledLeftButton, StyledLeftIcon, StyledMenuButton, StyledMenuIcon, StyledRightButton, StyledRightIcon, ViewsWrapper };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/ViewsContainer/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { LeftArrowIcon } from '../../tempIcons/LeftArrowIcon';\nimport { RightArrowIcon } from '../../tempIcons/RightArrowIcon';\nimport { colors } from '../../theme/modules/colors';\nimport { ThreeDotsIcon } from '../../tempIcons/ThreeDotsIcon';\nimport { InputGroup } from '../InputGroup';\n\nexport const ViewsWrapper = styled(Stack)`\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n\n  ::-webkit-scrollbar {\n    display: none; /* for Chrome, Safari, and Opera */\n  }\n\n  gap: 8px;\n  height: inherit;\n  padding: 8px 6px 8px 12px;\n  margin-left: 0;\n`;\n\nexport const Container = styled(Stack)`\n  background-color: ${colors.neutral.grey.lightest};\n`;\n\nexport const StyledLeftIcon = styled(LeftArrowIcon)`\n  color: ${colors.neutral.ink.base};\n`;\nexport const StyledRightIcon = styled(RightArrowIcon)`\n  color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuIcon = styled(ThreeDotsIcon)`\n  color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuButton = styled(Button)`\n  background-color: white;\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledLeftButton = styled(Button)`\n  background-color: white;\n\n  &:disabled {\n    background-color: white;\n    ${StyledLeftIcon} {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledRightButton = styled(Button)`\n  background-color: white;\n\n  &:disabled {\n    background-color: white;\n    ${StyledRightIcon} {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledInputGroup = styled(InputGroup)`\n  padding-right: 8px;\n  margin-left: 0;\n\n  & > *:first-child:last-child {\n    border-radius: 4px !important;\n  }\n`;\n"],"names":[],"mappings":";;;;;;;;;MASa,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+JAAA;AAe5B,MAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAChB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAGrC,MAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAErB,MAAA,eAAe,GAAG,MAAM,CAAC,cAAc,CAAC,CAC1C,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAItB,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAIvC,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKxC,cAAc,CAAA,OAAA,EACL,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;AAIvC,MAAA,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKzC,eAAe,CAAA,OAAA,EACN,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIvC,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2FAAA;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/ViewsContainer/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../Stack';\nimport { Button } from '../Button';\nimport { LeftArrowIcon } from '../../tempIcons/LeftArrowIcon';\nimport { RightArrowIcon } from '../../tempIcons/RightArrowIcon';\nimport { colors } from '../../theme/modules/colors';\nimport { ThreeDotsIcon } from '../../tempIcons/ThreeDotsIcon';\nimport { InputGroup } from '../InputGroup';\n\nexport const ViewsWrapper = styled(Stack)`\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n\n  ::-webkit-scrollbar {\n    display: none; /* for Chrome, Safari, and Opera */\n  }\n\n  gap: 8px;\n  height: inherit;\n  padding: 8px 6px 8px 12px;\n  margin-left: 0;\n`;\n\nexport const Container = styled(Stack)`\n  background-color: ${colors.neutral.grey.lightest};\n`;\n\nexport const StyledLeftIcon = styled(LeftArrowIcon)`\n  color: ${colors.neutral.ink.base};\n`;\nexport const StyledRightIcon = styled(RightArrowIcon)`\n  color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuIcon = styled(ThreeDotsIcon)`\n  color: ${colors.neutral.ink.base};\n`;\n\nexport const StyledMenuButton = styled(Button)`\n  background-color: white;\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledLeftButton = styled(Button)`\n  background-color: white;\n\n  &:disabled {\n    background-color: white;\n    ${StyledLeftIcon} {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledRightButton = styled(Button)`\n  background-color: white;\n\n  &:disabled {\n    background-color: white;\n    ${StyledRightIcon} {\n      color: ${colors.neutral.ink.lightest};\n    }\n  }\n\n  &:hover {\n    background-color: ${colors.neutral.grey.lightest};\n  }\n`;\n\nexport const StyledInputGroup = styled(InputGroup)`\n  padding-right: 8px;\n  margin-left: 0;\n\n  & > *:first-child:last-child {\n    border-radius: 4px !important;\n  }\n`;\n"],"names":[],"mappings":";;;;;;;;;MASa,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+JAAA;AAe5B,MAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAChB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAGrC,MAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAErB,MAAA,eAAe,GAAG,MAAM,CAAC,cAAc,CAAC,CAC1C,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CACxC,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI;AAGrB,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAItB,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;AAIvC,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKxC,cAAc,CAAA,OAAA,EACL,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;AAIvC,MAAA,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,yDAAA,EAKzC,eAAe,CAAA,OAAA,EACN,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,4BAAA,EAKlB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIvC,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2FAAA;;;;"}

package/dist/components/WeightInput/WeightInput.cjs

@@ -1,32 +1,37 @@
 '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 withLabels = require('../../hoc/withLabels/withLabels.cjs');
+var types$1 = require('./types.cjs');
+var types = require('../types.cjs');
 var index = require('../InputGroup/index.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');
+var Stack = require('../Stack/Stack.cjs');
+var InputAffix = require('../InputAffix/InputAffix.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 = ({ 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, { 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, { 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 })))))));
+const WeightInput = withLabels.withLabels((props) => {
+    const { size = types.ComponentSize.base, hasError, disabled, className } = props;
+    const compact = size === 'sm';
+    return (React__default.default.createElement(styled.Container, { className: className, role: "group", "aria-label": "Weight" },
+        React__default.default.createElement(styled.Row, null,
+            types$1.isWeightMetric(props) && (React__default.default.createElement(index.InputGroup, null,
+                React__default.default.createElement(styled.TextField, { name: "gram", type: "number", value: props.gram, "aria-label": "Grams", placeholder: "0", min: "0", step: "any", size: size, disabled: disabled, hasError: hasError, onChange: props.handleChangeGram, onKeyDown: blockInvalidChars }),
+                React__default.default.createElement(InputAffix.InputAffix, { compact: compact, hasError: hasError }, "g"))),
+            types$1.isWeightImperial(props) && (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: 3 },
+                React__default.default.createElement(index.InputGroup, null,
+                    React__default.default.createElement(styled.TextField, { name: "pound", type: "number", value: props.pound, "aria-label": "Pounds", placeholder: "0", min: "0", step: "any", size: size, disabled: disabled, hasError: hasError, onChange: props.handleChangePound, onKeyDown: blockInvalidChars }),
+                    React__default.default.createElement(InputAffix.InputAffix, { compact: compact, hasError: hasError }, "lb")),
+                React__default.default.createElement(index.InputGroup, null,
+                    React__default.default.createElement(styled.TextField, { name: "ounce", type: "number", value: props.ounce, "aria-label": "Ounces", placeholder: "0", min: "0", step: "any", size: size, disabled: disabled, hasError: hasError, onChange: props.handleChangeOunce, onKeyDown: blockInvalidChars }),
+                    React__default.default.createElement(InputAffix.InputAffix, { compact: compact, hasError: hasError }, "oz")))))));
+});
 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 { 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;;;;"}
+{"version":3,"file":"WeightInput.cjs","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React from 'react';\nimport { withLabels } from '../../hoc';\n\nimport { WeightProps, isWeightImperial, isWeightMetric } from './types';\nimport { ComponentSize } from '../types';\nimport { InputGroup } from '../InputGroup';\n\nimport { Container, TextField, Row } from './styled';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport { Stack } from '../Stack';\nimport { InputAffix } from '../InputAffix';\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const WeightInput = withLabels<WeightProps>((props) => {\n  const { size = ComponentSize.base, hasError, disabled, className } = props;\n\n  const compact = size === 'sm';\n\n  return (\n    <Container className={className} role=\"group\" aria-label=\"Weight\">\n      <Row>\n        {isWeightMetric(props) && (\n          <InputGroup>\n            <TextField\n              name=\"gram\"\n              type=\"number\"\n              value={props.gram}\n              aria-label=\"Grams\"\n              placeholder=\"0\"\n              min=\"0\"\n              step=\"any\"\n              size={size}\n              disabled={disabled}\n              hasError={hasError}\n              onChange={props.handleChangeGram}\n              onKeyDown={blockInvalidChars}\n            />\n            <InputAffix compact={compact} hasError={hasError}>\n              g\n            </InputAffix>\n          </InputGroup>\n        )}\n\n        {isWeightImperial(props) && (\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing={3}>\n            <InputGroup>\n              <TextField\n                name=\"pound\"\n                type=\"number\"\n                value={props.pound}\n                aria-label=\"Pounds\"\n                placeholder=\"0\"\n                min=\"0\"\n                step=\"any\"\n                size={size}\n                disabled={disabled}\n                hasError={hasError}\n                onChange={props.handleChangePound}\n                onKeyDown={blockInvalidChars}\n              />\n              <InputAffix compact={compact} hasError={hasError}>\n                lb\n              </InputAffix>\n            </InputGroup>\n            <InputGroup>\n              <TextField\n                name=\"ounce\"\n                type=\"number\"\n                value={props.ounce}\n                aria-label=\"Ounces\"\n                placeholder=\"0\"\n                min=\"0\"\n                step=\"any\"\n                size={size}\n                disabled={disabled}\n                hasError={hasError}\n                onChange={props.handleChangeOunce}\n                onKeyDown={blockInvalidChars}\n              />\n              <InputAffix compact={compact} hasError={hasError}>\n                oz\n              </InputAffix>\n            </InputGroup>\n          </Stack>\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","InputAffix","isWeightImperial","Stack"],"mappings":"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"}

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

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

package/dist/components/WeightInput/WeightInput.js

@@ -1,26 +1,31 @@
 import React__default from 'react';
-import { theme } from '../../theme/index.js';
+import { withLabels } from '../../hoc/withLabels/withLabels.js';
 import { isWeightMetric, isWeightImperial } from './types.js';
 import { ComponentSize } from '../types.js';
 import { InputGroup } from '../InputGroup/index.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';
+import { Stack } from '../Stack/Stack.js';
+import { InputAffix } from '../InputAffix/InputAffix.js';
 
 const blockInvalidChars = (e) => blockInvalidCharacters(e, invalidCharsList);
-const WeightInput = ({ size = ComponentSize.base, hasError, className, ...rest }) => (React__default.createElement(Container, { className: className, role: "group", "aria-label": "Weight" },
-    React__default.createElement(Row, null,
-        isWeightMetric(rest) && (React__default.createElement(InputGroup, null,
-            React__default.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__default.createElement(InputGroupLabel, { unit: "g", size: size }))),
-        isWeightImperial(rest) && (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(InputGroup, { style: { marginRight: theme.sizes.xs } },
-                React__default.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__default.createElement(InputGroupLabel, { unit: "lb", size: size })),
-            React__default.createElement(InputGroup, null,
-                React__default.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__default.createElement(InputGroupLabel, { unit: "oz", size: size })))))));
+const WeightInput = withLabels((props) => {
+    const { size = ComponentSize.base, hasError, disabled, className } = props;
+    const compact = size === 'sm';
+    return (React__default.createElement(Container, { className: className, role: "group", "aria-label": "Weight" },
+        React__default.createElement(Row, null,
+            isWeightMetric(props) && (React__default.createElement(InputGroup, null,
+                React__default.createElement(StyledTextField, { name: "gram", type: "number", value: props.gram, "aria-label": "Grams", placeholder: "0", min: "0", step: "any", size: size, disabled: disabled, hasError: hasError, onChange: props.handleChangeGram, onKeyDown: blockInvalidChars }),
+                React__default.createElement(InputAffix, { compact: compact, hasError: hasError }, "g"))),
+            isWeightImperial(props) && (React__default.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: 3 },
+                React__default.createElement(InputGroup, null,
+                    React__default.createElement(StyledTextField, { name: "pound", type: "number", value: props.pound, "aria-label": "Pounds", placeholder: "0", min: "0", step: "any", size: size, disabled: disabled, hasError: hasError, onChange: props.handleChangePound, onKeyDown: blockInvalidChars }),
+                    React__default.createElement(InputAffix, { compact: compact, hasError: hasError }, "lb")),
+                React__default.createElement(InputGroup, null,
+                    React__default.createElement(StyledTextField, { name: "ounce", type: "number", value: props.ounce, "aria-label": "Ounces", placeholder: "0", min: "0", step: "any", size: size, disabled: disabled, hasError: hasError, onChange: props.handleChangeOunce, onKeyDown: blockInvalidChars }),
+                    React__default.createElement(InputAffix, { compact: compact, hasError: hasError }, "oz")))))));
+});
 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 { 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":["React","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,MACZA,6BAAC,SAAS,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,gBAAY,QAAQ,EAAA;AAC/D,IAAAA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,IAAA;AACD,QAAA,cAAc,CAAC,IAAI,CAAC,KACnBA,6BAAC,UAAU,EAAA,IAAA;AACT,YAAAA,cAAA,CAAA,aAAA,CAACC,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;YACFD,cAAC,CAAA,aAAA,CAAA,eAAe,EAAC,EAAA,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAI,CAAA,CAC7B,CACd;AAEA,QAAA,gBAAgB,CAAC,IAAI,CAAC,KACrBA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACE,YAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,EAAA;AAChD,gBAAAA,cAAA,CAAA,aAAA,CAACC,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;gBACFD,cAAC,CAAA,aAAA,CAAA,eAAe,EAAC,EAAA,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,EAAA,CAAI,CAC9B;AACb,YAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;AACT,gBAAAA,cAAA,CAAA,aAAA,CAACC,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,gBAAAD,cAAA,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;;;;"}
+{"version":3,"file":"WeightInput.js","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React from 'react';\nimport { withLabels } from '../../hoc';\n\nimport { WeightProps, isWeightImperial, isWeightMetric } from './types';\nimport { ComponentSize } from '../types';\nimport { InputGroup } from '../InputGroup';\n\nimport { Container, TextField, Row } from './styled';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport { Stack } from '../Stack';\nimport { InputAffix } from '../InputAffix';\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const WeightInput = withLabels<WeightProps>((props) => {\n  const { size = ComponentSize.base, hasError, disabled, className } = props;\n\n  const compact = size === 'sm';\n\n  return (\n    <Container className={className} role=\"group\" aria-label=\"Weight\">\n      <Row>\n        {isWeightMetric(props) && (\n          <InputGroup>\n            <TextField\n              name=\"gram\"\n              type=\"number\"\n              value={props.gram}\n              aria-label=\"Grams\"\n              placeholder=\"0\"\n              min=\"0\"\n              step=\"any\"\n              size={size}\n              disabled={disabled}\n              hasError={hasError}\n              onChange={props.handleChangeGram}\n              onKeyDown={blockInvalidChars}\n            />\n            <InputAffix compact={compact} hasError={hasError}>\n              g\n            </InputAffix>\n          </InputGroup>\n        )}\n\n        {isWeightImperial(props) && (\n          <Stack direction=\"horizontal\" alignY=\"center\" spacing={3}>\n            <InputGroup>\n              <TextField\n                name=\"pound\"\n                type=\"number\"\n                value={props.pound}\n                aria-label=\"Pounds\"\n                placeholder=\"0\"\n                min=\"0\"\n                step=\"any\"\n                size={size}\n                disabled={disabled}\n                hasError={hasError}\n                onChange={props.handleChangePound}\n                onKeyDown={blockInvalidChars}\n              />\n              <InputAffix compact={compact} hasError={hasError}>\n                lb\n              </InputAffix>\n            </InputGroup>\n            <InputGroup>\n              <TextField\n                name=\"ounce\"\n                type=\"number\"\n                value={props.ounce}\n                aria-label=\"Ounces\"\n                placeholder=\"0\"\n                min=\"0\"\n                step=\"any\"\n                size={size}\n                disabled={disabled}\n                hasError={hasError}\n                onChange={props.handleChangeOunce}\n                onKeyDown={blockInvalidChars}\n              />\n              <InputAffix compact={compact} hasError={hasError}>\n                oz\n              </InputAffix>\n            </InputGroup>\n          </Stack>\n        )}\n      </Row>\n    </Container>\n  );\n});\n\nWeightInput.displayName = 'WeightInput';\n\nWeightInput.defaultProps = {\n  weightUnit: 'lb',\n};\n"],"names":["React","TextField"],"mappings":"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"}

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

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

package/dist/components/WeightInput/styled.cjs

@@ -10,10 +10,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 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;}`;
-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 &&
+const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--9xw49z" }) `display:flex;flex-direction:column;position:relative;`;
+const Row = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--96bskv" }) `display:flex;flex-direction:row;`;
+const StyledTextField = styled__default.default(index.TextField).withConfig({ displayName: "vui--StyledTextField", componentId: "vui--18s5udl" }) `&&&{width:52px;}`;
+styled__default.default(Button.Button).withConfig({ displayName: "vui--StyledButton", componentId: "vui--1skql6a" }) `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};
   `};`;

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;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;;;;;;"}
+{"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    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;AAMpBF,uBAAM,CAACG,aAAM,CAAC,CAEjB,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,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.d.ts

@@ -300,7 +300,7 @@ declare const StyledTextField: import("styled-components").StyledComponent<impor
     type?: import("../TextField/types").TextFieldType | undefined;
     onChange?: ((value: string) => void) | undefined;
     hasError?: boolean | undefined;
-    size?: "base" | "sm" | undefined;
+    size?: import("../types").ComponentSize | 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> & {

package/dist/components/WeightInput/styled.js

@@ -4,10 +4,10 @@ import { Button } from '../Button/Button.js';
 import { TextField } from '../TextField/index.js';
 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;}`;
-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 &&
+const Container = styled(BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--9xw49z" }) `display:flex;flex-direction:column;position:relative;`;
+const Row = styled(BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--96bskv" }) `display:flex;flex-direction:row;`;
+const StyledTextField = styled(TextField).withConfig({ displayName: "vui--StyledTextField", componentId: "vui--18s5udl" }) `&&&{width:52px;}`;
+styled(Button).withConfig({ displayName: "vui--StyledButton", componentId: "vui--1skql6a" }) `padding:0 4px;border-color:${theme.colors.neutral.ink.lightest};margin-right:4px;${(props) => props.hasError &&
     `
     border-color: ${theme.colors.secondary.red.base};
   `};`;

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;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;;;;"}
+{"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    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;AAMpB,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,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/components/WeightInput/types.cjs.map

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