@veeqo/ui 14.2.0 → 14.3.0-beta-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/dist/components/Accordion/styled.cjs +19 -9
  2. package/dist/components/Accordion/styled.cjs.map +1 -1
  3. package/dist/components/Accordion/styled.d.ts +9 -23
  4. package/dist/components/Accordion/styled.js +19 -9
  5. package/dist/components/Accordion/styled.js.map +1 -1
  6. package/dist/components/Action/Action.d.ts +4 -4
  7. package/dist/components/AnimatedDropdown/components/styled.d.ts +2 -1
  8. package/dist/components/AnimatedDropdown/styled.d.ts +2 -2
  9. package/dist/components/Badge/styled.cjs +27 -4
  10. package/dist/components/Badge/styled.cjs.map +1 -1
  11. package/dist/components/Badge/styled.d.ts +4 -3
  12. package/dist/components/Badge/styled.js +27 -4
  13. package/dist/components/Badge/styled.js.map +1 -1
  14. package/dist/components/Banner/styled.cjs +27 -8
  15. package/dist/components/Banner/styled.cjs.map +1 -1
  16. package/dist/components/Banner/styled.d.ts +7 -7
  17. package/dist/components/Banner/styled.js +27 -8
  18. package/dist/components/Banner/styled.js.map +1 -1
  19. package/dist/components/BaseContainer/BaseContainer.cjs +7 -3
  20. package/dist/components/BaseContainer/BaseContainer.cjs.map +1 -1
  21. package/dist/components/BaseContainer/BaseContainer.d.ts +2 -1
  22. package/dist/components/BaseContainer/BaseContainer.js +6 -2
  23. package/dist/components/BaseContainer/BaseContainer.js.map +1 -1
  24. package/dist/components/BaseContainer/BaseContainer.module.scss.cjs +9 -0
  25. package/dist/components/BaseContainer/BaseContainer.module.scss.cjs.map +1 -0
  26. package/dist/components/BaseContainer/BaseContainer.module.scss.js +7 -0
  27. package/dist/components/BaseContainer/BaseContainer.module.scss.js.map +1 -0
  28. package/dist/components/DataTable/components/ColumnHeader.d.ts +1 -1
  29. package/dist/components/DimensionsInput/DimensionsInput.cjs +8 -8
  30. package/dist/components/DimensionsInput/DimensionsInput.cjs.map +1 -1
  31. package/dist/components/DimensionsInput/DimensionsInput.d.ts +8 -8
  32. package/dist/components/DimensionsInput/DimensionsInput.js +1 -1
  33. package/dist/components/FilterTag/styled.d.ts +4 -4
  34. package/dist/components/Grid/index.cjs +7 -1
  35. package/dist/components/Grid/index.cjs.map +1 -1
  36. package/dist/components/Grid/index.d.ts +2 -1
  37. package/dist/components/Grid/index.js +7 -1
  38. package/dist/components/Grid/index.js.map +1 -1
  39. package/dist/components/InputAffix/InputAffix.cjs +3 -4
  40. package/dist/components/InputAffix/InputAffix.cjs.map +1 -1
  41. package/dist/components/InputAffix/InputAffix.js +1 -2
  42. package/dist/components/InputAffix/InputAffix.js.map +1 -1
  43. package/dist/components/InputGroup/InputGroup.cjs +21 -0
  44. package/dist/components/InputGroup/InputGroup.cjs.map +1 -0
  45. package/dist/components/InputGroup/InputGroup.d.ts +2 -0
  46. package/dist/components/InputGroup/InputGroup.js +15 -0
  47. package/dist/components/InputGroup/InputGroup.js.map +1 -0
  48. package/dist/components/InputGroup/InputGroup.module.scss.cjs +9 -0
  49. package/dist/components/InputGroup/InputGroup.module.scss.cjs.map +1 -0
  50. package/dist/components/InputGroup/InputGroup.module.scss.js +7 -0
  51. package/dist/components/InputGroup/InputGroup.module.scss.js.map +1 -0
  52. package/dist/components/InputGroup/index.d.ts +2 -4
  53. package/dist/components/InputGroup/types.d.ts +3 -0
  54. package/dist/components/LegacyDataTable/SpecificState/styled.d.ts +4 -4
  55. package/dist/components/Pagination/styled.d.ts +8 -8
  56. package/dist/components/PhoneInput/index.d.ts +8 -8
  57. package/dist/components/PriceInput/PriceInput.cjs +4 -4
  58. package/dist/components/PriceInput/PriceInput.cjs.map +1 -1
  59. package/dist/components/PriceInput/PriceInput.js +1 -1
  60. package/dist/components/Search/Search.d.ts +8 -8
  61. package/dist/components/Search/styled.cjs +12 -2
  62. package/dist/components/Search/styled.cjs.map +1 -1
  63. package/dist/components/Search/styled.d.ts +9 -9
  64. package/dist/components/Search/styled.js +12 -2
  65. package/dist/components/Search/styled.js.map +1 -1
  66. package/dist/components/SegmentedControl/styled.d.ts +2 -1
  67. package/dist/components/Stack/Stack.cjs +26 -45
  68. package/dist/components/Stack/Stack.cjs.map +1 -1
  69. package/dist/components/Stack/Stack.d.ts +2 -1
  70. package/dist/components/Stack/Stack.js +25 -44
  71. package/dist/components/Stack/Stack.js.map +1 -1
  72. package/dist/components/Stack/Stack.module.scss.cjs +9 -0
  73. package/dist/components/Stack/Stack.module.scss.cjs.map +1 -0
  74. package/dist/components/Stack/Stack.module.scss.js +7 -0
  75. package/dist/components/Stack/Stack.module.scss.js.map +1 -0
  76. package/dist/components/Stack/types.d.ts +4 -0
  77. package/dist/components/Stepper/styled.cjs +16 -3
  78. package/dist/components/Stepper/styled.cjs.map +1 -1
  79. package/dist/components/Stepper/styled.d.ts +2 -1
  80. package/dist/components/Stepper/styled.js +16 -3
  81. package/dist/components/Stepper/styled.js.map +1 -1
  82. package/dist/components/Text/Text.d.ts +1 -1
  83. package/dist/components/TextField/TextField.d.ts +8 -8
  84. package/dist/components/TextField/index.d.ts +8 -8
  85. package/dist/components/ToastsLayout/components/styled.cjs +37 -4
  86. package/dist/components/ToastsLayout/components/styled.cjs.map +1 -1
  87. package/dist/components/ToastsLayout/components/styled.d.ts +5 -5
  88. package/dist/components/ToastsLayout/components/styled.js +37 -4
  89. package/dist/components/ToastsLayout/components/styled.js.map +1 -1
  90. package/dist/components/Toggle/styled.d.ts +2 -1
  91. package/dist/components/VideoModal/components/styled.d.ts +4 -3
  92. package/dist/components/View/styled.d.ts +4 -4
  93. package/dist/components/ViewTab/ViewTab.d.ts +1 -1
  94. package/dist/components/WeightInput/WeightInput.cjs +8 -8
  95. package/dist/components/WeightInput/WeightInput.cjs.map +1 -1
  96. package/dist/components/WeightInput/WeightInput.js +1 -1
  97. package/dist/components/index.d.ts +1 -1
  98. package/dist/hoc/withClassNames/withClassNames.d.ts +1 -1
  99. package/dist/hoc/withLabels/styled.d.ts +2 -1
  100. package/dist/index.cjs +10 -10
  101. package/dist/index.js +1 -1
  102. package/dist/utils/forms/form.module.scss.cjs +2 -2
  103. package/dist/utils/forms/form.module.scss.cjs.map +1 -1
  104. package/dist/utils/forms/form.module.scss.js +2 -2
  105. package/dist/utils/forms/form.module.scss.js.map +1 -1
  106. package/dist/utils/forms/inputStyles.cjs +1 -2
  107. package/dist/utils/forms/inputStyles.cjs.map +1 -1
  108. package/dist/utils/forms/inputStyles.js +1 -2
  109. package/dist/utils/forms/inputStyles.js.map +1 -1
  110. package/package.json +1 -1
  111. package/dist/components/InputGroup/index.cjs +0 -13
  112. package/dist/components/InputGroup/index.cjs.map +0 -1
  113. package/dist/components/InputGroup/index.js +0 -7
  114. package/dist/components/InputGroup/index.js.map +0 -1
  115. package/dist/components/Stack/Alignments.cjs +0 -12
  116. package/dist/components/Stack/Alignments.cjs.map +0 -1
  117. package/dist/components/Stack/Alignments.js +0 -12
  118. package/dist/components/Stack/Alignments.js.map +0 -1
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
4
+
5
+ ___$insertStyle("._base_1i7yi_1 {\n display: flex;\n}\n\n/* Direction classes */\n._vertical-direction_1i7yi_6 {\n flex-direction: column;\n}\n\n._horizontal-direction_1i7yi_10 {\n flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n._alignItems-start_1i7yi_15 {\n align-items: flex-start;\n}\n\n._alignItems-center_1i7yi_19 {\n align-items: center;\n}\n\n._alignItems-end_1i7yi_23 {\n align-items: flex-end;\n}\n\n._alignItems-stretch_1i7yi_27 {\n align-items: stretch;\n}\n\n._alignItems-between_1i7yi_31 {\n align-items: space-between;\n}\n\n._alignItems-around_1i7yi_35 {\n align-items: space-around;\n}\n\n._justifyContent-start_1i7yi_39 {\n justify-content: flex-start;\n}\n\n._justifyContent-center_1i7yi_43 {\n justify-content: center;\n}\n\n._justifyContent-end_1i7yi_47 {\n justify-content: flex-end;\n}\n\n._justifyContent-stretch_1i7yi_51 {\n justify-content: stretch;\n}\n\n._justifyContent-between_1i7yi_55 {\n justify-content: space-between;\n}\n\n._justifyContent-around_1i7yi_59 {\n justify-content: space-around;\n}\n\n/* Spacing is applied via row-gap / column-gap as an inline style on the\n container (see Stack.tsx). gap is resolved on the parent element, so nested\n Stacks cannot shadow each other's spacing values.\n Direct children have their directional margins reset so that gap is the sole\n spacing source, matching the old styled-components behavior where the\n && > * + * { margin } rule implicitly overrode child margins. */\n._base_1i7yi_1._vertical-direction_1i7yi_6 > * {\n margin-top: 0;\n margin-bottom: 0;\n}\n\n._base_1i7yi_1._horizontal-direction_1i7yi_10 > * {\n margin-left: 0;\n margin-right: 0;\n}\n\n/* Stretch modifier: child items get flex: 1 */\n._stretch-children_1i7yi_80 > * {\n flex: 1;\n}");
6
+ var styles = {"base":"_base_1i7yi_1","vertical-direction":"_vertical-direction_1i7yi_6","horizontal-direction":"_horizontal-direction_1i7yi_10","alignItems-start":"_alignItems-start_1i7yi_15","alignItems-center":"_alignItems-center_1i7yi_19","alignItems-end":"_alignItems-end_1i7yi_23","alignItems-stretch":"_alignItems-stretch_1i7yi_27","alignItems-between":"_alignItems-between_1i7yi_31","alignItems-around":"_alignItems-around_1i7yi_35","justifyContent-start":"_justifyContent-start_1i7yi_39","justifyContent-center":"_justifyContent-center_1i7yi_43","justifyContent-end":"_justifyContent-end_1i7yi_47","justifyContent-stretch":"_justifyContent-stretch_1i7yi_51","justifyContent-between":"_justifyContent-between_1i7yi_55","justifyContent-around":"_justifyContent-around_1i7yi_59","stretch-children":"_stretch-children_1i7yi_80"};
7
+
8
+ module.exports = styles;
9
+ //# sourceMappingURL=Stack.module.scss.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Stack.module.scss.cjs","sources":["../../../src/components/Stack/Stack.module.scss"],"sourcesContent":["@use './variables.scss' as vars;\n\n.base {\n display: flex;\n}\n\n/* Direction classes */\n.vertical-direction {\n flex-direction: column;\n}\n\n.horizontal-direction {\n flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n@each $name, $value in vars.$align-items {\n .alignItems-#{$name} {\n align-items: $value;\n }\n}\n\n@each $name, $value in vars.$justify-content {\n .justifyContent-#{$name} {\n justify-content: $value;\n }\n}\n\n/* Spacing is applied via row-gap / column-gap as an inline style on the\n container (see Stack.tsx). gap is resolved on the parent element, so nested\n Stacks cannot shadow each other's spacing values.\n Direct children have their directional margins reset so that gap is the sole\n spacing source, matching the old styled-components behavior where the\n && > * + * { margin } rule implicitly overrode child margins. */\n.base.vertical-direction > * {\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.base.horizontal-direction > * {\n margin-left: 0;\n margin-right: 0;\n}\n\n/* Stretch modifier: child items get flex: 1 */\n.stretch-children > * {\n flex: 1;\n}\n"],"names":[],"mappings":";;;;AAGE,eAAA,CAAA,4uDAAA;;;;;"}
@@ -0,0 +1,7 @@
1
+ import insertStyle from '../../_virtual/____insertStyle.js';
2
+
3
+ insertStyle("._base_1i7yi_1 {\n display: flex;\n}\n\n/* Direction classes */\n._vertical-direction_1i7yi_6 {\n flex-direction: column;\n}\n\n._horizontal-direction_1i7yi_10 {\n flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n._alignItems-start_1i7yi_15 {\n align-items: flex-start;\n}\n\n._alignItems-center_1i7yi_19 {\n align-items: center;\n}\n\n._alignItems-end_1i7yi_23 {\n align-items: flex-end;\n}\n\n._alignItems-stretch_1i7yi_27 {\n align-items: stretch;\n}\n\n._alignItems-between_1i7yi_31 {\n align-items: space-between;\n}\n\n._alignItems-around_1i7yi_35 {\n align-items: space-around;\n}\n\n._justifyContent-start_1i7yi_39 {\n justify-content: flex-start;\n}\n\n._justifyContent-center_1i7yi_43 {\n justify-content: center;\n}\n\n._justifyContent-end_1i7yi_47 {\n justify-content: flex-end;\n}\n\n._justifyContent-stretch_1i7yi_51 {\n justify-content: stretch;\n}\n\n._justifyContent-between_1i7yi_55 {\n justify-content: space-between;\n}\n\n._justifyContent-around_1i7yi_59 {\n justify-content: space-around;\n}\n\n/* Spacing is applied via row-gap / column-gap as an inline style on the\n container (see Stack.tsx). gap is resolved on the parent element, so nested\n Stacks cannot shadow each other's spacing values.\n Direct children have their directional margins reset so that gap is the sole\n spacing source, matching the old styled-components behavior where the\n && > * + * { margin } rule implicitly overrode child margins. */\n._base_1i7yi_1._vertical-direction_1i7yi_6 > * {\n margin-top: 0;\n margin-bottom: 0;\n}\n\n._base_1i7yi_1._horizontal-direction_1i7yi_10 > * {\n margin-left: 0;\n margin-right: 0;\n}\n\n/* Stretch modifier: child items get flex: 1 */\n._stretch-children_1i7yi_80 > * {\n flex: 1;\n}");
4
+ var styles = {"base":"_base_1i7yi_1","vertical-direction":"_vertical-direction_1i7yi_6","horizontal-direction":"_horizontal-direction_1i7yi_10","alignItems-start":"_alignItems-start_1i7yi_15","alignItems-center":"_alignItems-center_1i7yi_19","alignItems-end":"_alignItems-end_1i7yi_23","alignItems-stretch":"_alignItems-stretch_1i7yi_27","alignItems-between":"_alignItems-between_1i7yi_31","alignItems-around":"_alignItems-around_1i7yi_35","justifyContent-start":"_justifyContent-start_1i7yi_39","justifyContent-center":"_justifyContent-center_1i7yi_43","justifyContent-end":"_justifyContent-end_1i7yi_47","justifyContent-stretch":"_justifyContent-stretch_1i7yi_51","justifyContent-between":"_justifyContent-between_1i7yi_55","justifyContent-around":"_justifyContent-around_1i7yi_59","stretch-children":"_stretch-children_1i7yi_80"};
5
+
6
+ export { styles as default };
7
+ //# sourceMappingURL=Stack.module.scss.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Stack.module.scss.js","sources":["../../../src/components/Stack/Stack.module.scss"],"sourcesContent":["@use './variables.scss' as vars;\n\n.base {\n display: flex;\n}\n\n/* Direction classes */\n.vertical-direction {\n flex-direction: column;\n}\n\n.horizontal-direction {\n flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n@each $name, $value in vars.$align-items {\n .alignItems-#{$name} {\n align-items: $value;\n }\n}\n\n@each $name, $value in vars.$justify-content {\n .justifyContent-#{$name} {\n justify-content: $value;\n }\n}\n\n/* Spacing is applied via row-gap / column-gap as an inline style on the\n container (see Stack.tsx). gap is resolved on the parent element, so nested\n Stacks cannot shadow each other's spacing values.\n Direct children have their directional margins reset so that gap is the sole\n spacing source, matching the old styled-components behavior where the\n && > * + * { margin } rule implicitly overrode child margins. */\n.base.vertical-direction > * {\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.base.horizontal-direction > * {\n margin-left: 0;\n margin-right: 0;\n}\n\n/* Stretch modifier: child items get flex: 1 */\n.stretch-children > * {\n flex: 1;\n}\n"],"names":["___$insertStyle"],"mappings":";;AAGEA,WAAA,CAAA,4uDAAA;;;;;"}
@@ -34,5 +34,9 @@ export type StackProps = {
34
34
  alignX?: Alignment;
35
35
  alignY?: Alignment;
36
36
  spacing?: Size;
37
+ /**
38
+ * Polymorphic element type. Defaults to 'div'.
39
+ */
40
+ as?: React.ElementType;
37
41
  };
38
42
  export {};
@@ -10,9 +10,22 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
10
10
  var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
11
11
 
12
12
  const { colors: { neutral, secondary }, radius, } = index.theme;
13
- const ContainerStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ContainerStack", componentId: "vui--7zcmtq" }) `--background-color:${({ disabled }) => (disabled ? neutral.grey.light : 'white')};--border-color:${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};box-sizing:border-box;display:inline-flex;background-color:var(--background-color);border:${index.theme.sizes.line} solid var(--border-color);border-radius:${radius.base};height:${({ compact }) => (compact ? index.theme.sizes[8] : index.theme.sizes[10])};`;
14
- const StepButton = styled__default.default.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--z17r9v" }) `appearance:none;border:0;background-color:transparent;border-radius:${radius.base};cursor:pointer;height:100%;aspect-ratio:1;&:hover{background-color:${neutral.grey.light};}${inputStyles.inputFocusStyles}`;
15
- const StepperDivider = styled__default.default.div.withConfig({ displayName: "vui--StepperDivider", componentId: "vui--1vucank" }) `width:${index.theme.sizes.line};background-color:${neutral.ink.lightest};height:${({ compact }) => (compact ? index.theme.sizes[4] : index.theme.sizes[6])};`;
13
+ const ContainerStack = styled__default.default(Stack.Stack).withConfig({
14
+ shouldForwardProp: (prop) => !['hasError', 'compact'].includes(prop),
15
+ }) `
16
+ --background-color: ${({ disabled }) => (disabled ? neutral.grey.light : 'white')};
17
+ --border-color: ${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};
18
+
19
+ box-sizing: border-box;
20
+ display: inline-flex;
21
+ background-color: var(--background-color);
22
+ border: ${index.theme.sizes.line} solid var(--border-color);
23
+ border-radius: ${radius.base};
24
+
25
+ height: ${({ compact }) => (compact ? index.theme.sizes[8] : index.theme.sizes[10])};
26
+ `;
27
+ const StepButton = styled__default.default.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--1j6prbe" }) `appearance:none;border:0;background-color:transparent;border-radius:${radius.base};cursor:pointer;height:100%;aspect-ratio:1;&:hover{background-color:${neutral.grey.light};}${inputStyles.inputFocusStyles}`;
28
+ const StepperDivider = styled__default.default.div.withConfig({ displayName: "vui--StepperDivider", componentId: "vui--19ho080" }) `width:${index.theme.sizes.line};background-color:${neutral.ink.lightest};height:${({ compact }) => (compact ? index.theme.sizes[4] : index.theme.sizes[6])};`;
16
29
 
17
30
  exports.ContainerStack = ContainerStack;
18
31
  exports.StepButton = StepButton;
@@ -1 +1 @@
1
- {"version":3,"file":"styled.cjs","sources":["../../../src/components/Stepper/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { inputFocusStyles } from '../../utils/forms/inputStyles';\nimport { Stack } from '../Stack';\nimport { FormComponentProps } from '../types';\n\nconst {\n colors: { neutral, secondary },\n radius,\n} = theme;\n\nexport const ContainerStack = styled(Stack)<FormComponentProps>`\n --background-color: ${({ disabled }) => (disabled ? neutral.grey.light : 'white')};\n --border-color: ${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};\n\n box-sizing: border-box;\n display: inline-flex;\n background-color: var(--background-color);\n border: ${theme.sizes.line} solid var(--border-color);\n border-radius: ${radius.base};\n\n height: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};\n`;\n\nexport const StepButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n border-radius: ${radius.base};\n cursor: pointer;\n\n height: 100%;\n aspect-ratio: 1;\n\n &:hover {\n background-color: ${neutral.grey.light};\n }\n\n ${inputFocusStyles}\n`;\n\nexport const StepperDivider = styled.div<Pick<FormComponentProps, 'compact'>>`\n width: ${theme.sizes.line};\n background-color: ${neutral.ink.lightest};\n height: ${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};\n`;\n"],"names":["theme","styled","Stack","inputFocusStyles"],"mappings":";;;;;;;;;;;AAMA,MAAM,EACJ,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAC9B,MAAM,GACP,GAAGA,WAAK;MAEI,cAAc,GAAGC,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mBAAA,EACnB,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAA,gBAAA,EAC/D,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,8FAKhFF,WAAK,CAAC,KAAK,CAAC,IAAI,4CACT,MAAM,CAAC,IAAI,CAAA,QAAA,EAElB,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAGA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA,CAAA;MAG5D,UAAU,GAAGC,uBAAM,CAAC,MAAM,mJAIpB,MAAM,CAAC,IAAI,CAAA,oEAAA,EAON,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,EAAA,EAGtCE,4BAAgB;MAGP,cAAc,GAAGF,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAC7BD,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA,kBAAA,EACL,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,QAAA,EAC9B,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA,CAAA;;;;;;"}
1
+ {"version":3,"file":"styled.cjs","sources":["../../../src/components/Stepper/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { inputFocusStyles } from '../../utils/forms/inputStyles';\nimport { Stack } from '../Stack';\nimport { FormComponentProps } from '../types';\n\nconst {\n colors: { neutral, secondary },\n radius,\n} = theme;\n\nexport const ContainerStack = styled(Stack).withConfig({\n shouldForwardProp: (prop) => !['hasError', 'compact'].includes(prop),\n})<FormComponentProps>`\n --background-color: ${({ disabled }) => (disabled ? neutral.grey.light : 'white')};\n --border-color: ${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};\n\n box-sizing: border-box;\n display: inline-flex;\n background-color: var(--background-color);\n border: ${theme.sizes.line} solid var(--border-color);\n border-radius: ${radius.base};\n\n height: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};\n`;\n\nexport const StepButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n border-radius: ${radius.base};\n cursor: pointer;\n\n height: 100%;\n aspect-ratio: 1;\n\n &:hover {\n background-color: ${neutral.grey.light};\n }\n\n ${inputFocusStyles}\n`;\n\nexport const StepperDivider = styled.div<Pick<FormComponentProps, 'compact'>>`\n width: ${theme.sizes.line};\n background-color: ${neutral.ink.lightest};\n height: ${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};\n`;\n"],"names":["theme","styled","Stack","inputFocusStyles"],"mappings":";;;;;;;;;;;AAMA,MAAM,EACJ,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAC9B,MAAM,GACP,GAAGA,WAAK;AAEF,MAAM,cAAc,GAAGC,uBAAM,CAACC,WAAK,CAAC,CAAC,UAAU,CAAC;AACrD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AACrE,CAAA,CAAC,CAAoB;wBACE,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAA;oBAC/D,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;;;;;YAKhFF,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA;AACT,iBAAA,EAAA,MAAM,CAAC,IAAI,CAAA;;YAElB,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAGA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;;MAG5D,UAAU,GAAGC,uBAAM,CAAC,MAAM,oJAIpB,MAAM,CAAC,IAAI,CAAA,oEAAA,EAON,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,EAAA,EAGtCE,4BAAgB;MAGP,cAAc,GAAGF,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAC7BD,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA,kBAAA,EACL,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,QAAA,EAC9B,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAGA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA,CAAA;;;;;;"}
@@ -1,4 +1,5 @@
1
+ /// <reference types="react" />
1
2
  import { FormComponentProps } from '../types';
2
- export declare const ContainerStack: import("styled-components").StyledComponent<"div", any, import("../Stack").StackProps & FormComponentProps, never>;
3
+ export declare const ContainerStack: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Stack").StackProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>, any, FormComponentProps, never>;
3
4
  export declare const StepButton: import("styled-components").StyledComponent<"button", any, FormComponentProps, never>;
4
5
  export declare const StepperDivider: import("styled-components").StyledComponent<"div", any, Pick<FormComponentProps, "compact">, never>;
@@ -4,9 +4,22 @@ import { inputFocusStyles } from '../../utils/forms/inputStyles.js';
4
4
  import { Stack } from '../Stack/Stack.js';
5
5
 
6
6
  const { colors: { neutral, secondary }, radius, } = theme;
7
- const ContainerStack = styled(Stack).withConfig({ displayName: "vui--ContainerStack", componentId: "vui--7zcmtq" }) `--background-color:${({ disabled }) => (disabled ? neutral.grey.light : 'white')};--border-color:${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};box-sizing:border-box;display:inline-flex;background-color:var(--background-color);border:${theme.sizes.line} solid var(--border-color);border-radius:${radius.base};height:${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};`;
8
- const StepButton = styled.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--z17r9v" }) `appearance:none;border:0;background-color:transparent;border-radius:${radius.base};cursor:pointer;height:100%;aspect-ratio:1;&:hover{background-color:${neutral.grey.light};}${inputFocusStyles}`;
9
- const StepperDivider = styled.div.withConfig({ displayName: "vui--StepperDivider", componentId: "vui--1vucank" }) `width:${theme.sizes.line};background-color:${neutral.ink.lightest};height:${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};`;
7
+ const ContainerStack = styled(Stack).withConfig({
8
+ shouldForwardProp: (prop) => !['hasError', 'compact'].includes(prop),
9
+ }) `
10
+ --background-color: ${({ disabled }) => (disabled ? neutral.grey.light : 'white')};
11
+ --border-color: ${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};
12
+
13
+ box-sizing: border-box;
14
+ display: inline-flex;
15
+ background-color: var(--background-color);
16
+ border: ${theme.sizes.line} solid var(--border-color);
17
+ border-radius: ${radius.base};
18
+
19
+ height: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};
20
+ `;
21
+ const StepButton = styled.button.withConfig({ displayName: "vui--StepButton", componentId: "vui--1j6prbe" }) `appearance:none;border:0;background-color:transparent;border-radius:${radius.base};cursor:pointer;height:100%;aspect-ratio:1;&:hover{background-color:${neutral.grey.light};}${inputFocusStyles}`;
22
+ const StepperDivider = styled.div.withConfig({ displayName: "vui--StepperDivider", componentId: "vui--19ho080" }) `width:${theme.sizes.line};background-color:${neutral.ink.lightest};height:${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};`;
10
23
 
11
24
  export { ContainerStack, StepButton, StepperDivider };
12
25
  //# sourceMappingURL=styled.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"styled.js","sources":["../../../src/components/Stepper/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { inputFocusStyles } from '../../utils/forms/inputStyles';\nimport { Stack } from '../Stack';\nimport { FormComponentProps } from '../types';\n\nconst {\n colors: { neutral, secondary },\n radius,\n} = theme;\n\nexport const ContainerStack = styled(Stack)<FormComponentProps>`\n --background-color: ${({ disabled }) => (disabled ? neutral.grey.light : 'white')};\n --border-color: ${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};\n\n box-sizing: border-box;\n display: inline-flex;\n background-color: var(--background-color);\n border: ${theme.sizes.line} solid var(--border-color);\n border-radius: ${radius.base};\n\n height: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};\n`;\n\nexport const StepButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n border-radius: ${radius.base};\n cursor: pointer;\n\n height: 100%;\n aspect-ratio: 1;\n\n &:hover {\n background-color: ${neutral.grey.light};\n }\n\n ${inputFocusStyles}\n`;\n\nexport const StepperDivider = styled.div<Pick<FormComponentProps, 'compact'>>`\n width: ${theme.sizes.line};\n background-color: ${neutral.ink.lightest};\n height: ${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};\n`;\n"],"names":[],"mappings":";;;;;AAMA,MAAM,EACJ,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAC9B,MAAM,GACP,GAAG,KAAK;MAEI,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mBAAA,EACnB,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAA,gBAAA,EAC/D,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,8FAKhF,KAAK,CAAC,KAAK,CAAC,IAAI,4CACT,MAAM,CAAC,IAAI,CAAA,QAAA,EAElB,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA,CAAA;MAG5D,UAAU,GAAG,MAAM,CAAC,MAAM,mJAIpB,MAAM,CAAC,IAAI,CAAA,oEAAA,EAON,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,EAAA,EAGtC,gBAAgB;MAGP,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAC7B,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,kBAAA,EACL,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,QAAA,EAC9B,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA,CAAA;;;;"}
1
+ {"version":3,"file":"styled.js","sources":["../../../src/components/Stepper/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { inputFocusStyles } from '../../utils/forms/inputStyles';\nimport { Stack } from '../Stack';\nimport { FormComponentProps } from '../types';\n\nconst {\n colors: { neutral, secondary },\n radius,\n} = theme;\n\nexport const ContainerStack = styled(Stack).withConfig({\n shouldForwardProp: (prop) => !['hasError', 'compact'].includes(prop),\n})<FormComponentProps>`\n --background-color: ${({ disabled }) => (disabled ? neutral.grey.light : 'white')};\n --border-color: ${({ hasError }) => (hasError ? secondary.red.base : neutral.ink.lightest)};\n\n box-sizing: border-box;\n display: inline-flex;\n background-color: var(--background-color);\n border: ${theme.sizes.line} solid var(--border-color);\n border-radius: ${radius.base};\n\n height: ${({ compact }) => (compact ? theme.sizes[8] : theme.sizes[10])};\n`;\n\nexport const StepButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n border-radius: ${radius.base};\n cursor: pointer;\n\n height: 100%;\n aspect-ratio: 1;\n\n &:hover {\n background-color: ${neutral.grey.light};\n }\n\n ${inputFocusStyles}\n`;\n\nexport const StepperDivider = styled.div<Pick<FormComponentProps, 'compact'>>`\n width: ${theme.sizes.line};\n background-color: ${neutral.ink.lightest};\n height: ${({ compact }) => (compact ? theme.sizes[4] : theme.sizes[6])};\n`;\n"],"names":[],"mappings":";;;;;AAMA,MAAM,EACJ,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EAC9B,MAAM,GACP,GAAG,KAAK;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;AACrD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AACrE,CAAA,CAAC,CAAoB;wBACE,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAA;oBAC/D,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;;;;;YAKhF,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA;AACT,iBAAA,EAAA,MAAM,CAAC,IAAI,CAAA;;YAElB,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;;MAG5D,UAAU,GAAG,MAAM,CAAC,MAAM,oJAIpB,MAAM,CAAC,IAAI,CAAA,oEAAA,EAON,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,EAAA,EAGtC,gBAAgB;MAGP,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAC7B,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,kBAAA,EACL,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,QAAA,EAC9B,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA,CAAA;;;;"}
@@ -7,5 +7,5 @@ import React from 'react';
7
7
  export declare const Text: React.ForwardRefExoticComponent<{
8
8
  as?: import("./types").ValidTextTag | undefined;
9
9
  muted?: boolean | undefined;
10
- variant?: "body" | "button" | "link" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholder" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
10
+ variant?: "placeholder" | "link" | "body" | "button" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
11
11
  } & React.HTMLAttributes<HTMLElement> & React.LabelHTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLElement>>;
@@ -1,13 +1,6 @@
1
1
  import React from 'react';
2
2
  export declare const TextField: React.ForwardRefExoticComponent<{
3
- form?: string | undefined;
4
- slot?: string | undefined;
5
- style?: React.CSSProperties | undefined;
6
- title?: string | undefined;
7
- pattern?: string | undefined;
8
3
  rel?: string | undefined;
9
- placeholder?: string | undefined;
10
- list?: string | undefined;
11
4
  className?: string | undefined;
12
5
  children?: React.ReactNode;
13
6
  defaultChecked?: boolean | undefined;
@@ -24,8 +17,12 @@ export declare const TextField: React.ForwardRefExoticComponent<{
24
17
  id?: string | undefined;
25
18
  lang?: string | undefined;
26
19
  nonce?: string | undefined;
20
+ placeholder?: string | undefined;
21
+ slot?: string | undefined;
27
22
  spellCheck?: (boolean | "true" | "false") | undefined;
23
+ style?: React.CSSProperties | undefined;
28
24
  tabIndex?: number | undefined;
25
+ title?: string | undefined;
29
26
  translate?: "yes" | "no" | undefined;
30
27
  radioGroup?: string | undefined;
31
28
  role?: React.AriaRole | undefined;
@@ -51,7 +48,7 @@ export declare const TextField: React.ForwardRefExoticComponent<{
51
48
  results?: number | undefined;
52
49
  security?: string | undefined;
53
50
  unselectable?: "on" | "off" | undefined;
54
- inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
51
+ inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
55
52
  is?: string | undefined;
56
53
  'aria-activedescendant'?: string | undefined;
57
54
  'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -263,6 +260,9 @@ export declare const TextField: React.ForwardRefExoticComponent<{
263
260
  onAnimationIterationCapture?: (React.AnimationEventHandler<HTMLInputElement> & React.AnimationEventHandler<HTMLTextAreaElement>) | undefined;
264
261
  onTransitionEnd?: (React.TransitionEventHandler<HTMLInputElement> & React.TransitionEventHandler<HTMLTextAreaElement>) | undefined;
265
262
  onTransitionEndCapture?: (React.TransitionEventHandler<HTMLInputElement> & React.TransitionEventHandler<HTMLTextAreaElement>) | undefined;
263
+ form?: string | undefined;
264
+ pattern?: string | undefined;
265
+ list?: string | undefined;
266
266
  alt?: string | undefined;
267
267
  disabled?: boolean | undefined;
268
268
  formAction?: string | undefined;
@@ -1,14 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  export type * from './types';
3
3
  export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
4
- form?: string | undefined;
5
- slot?: string | undefined;
6
- style?: import("react").CSSProperties | undefined;
7
- title?: string | undefined;
8
- pattern?: string | undefined;
9
4
  rel?: string | undefined;
10
- placeholder?: string | undefined;
11
- list?: string | undefined;
12
5
  className?: string | undefined;
13
6
  children?: import("react").ReactNode;
14
7
  defaultChecked?: boolean | undefined;
@@ -25,8 +18,12 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
25
18
  id?: string | undefined;
26
19
  lang?: string | undefined;
27
20
  nonce?: string | undefined;
21
+ placeholder?: string | undefined;
22
+ slot?: string | undefined;
28
23
  spellCheck?: (boolean | "true" | "false") | undefined;
24
+ style?: import("react").CSSProperties | undefined;
29
25
  tabIndex?: number | undefined;
26
+ title?: string | undefined;
30
27
  translate?: "yes" | "no" | undefined;
31
28
  radioGroup?: string | undefined;
32
29
  role?: import("react").AriaRole | undefined;
@@ -52,7 +49,7 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
52
49
  results?: number | undefined;
53
50
  security?: string | undefined;
54
51
  unselectable?: "on" | "off" | undefined;
55
- inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
52
+ inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
56
53
  is?: string | undefined;
57
54
  'aria-activedescendant'?: string | undefined;
58
55
  'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -264,6 +261,9 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<{
264
261
  onAnimationIterationCapture?: (import("react").AnimationEventHandler<HTMLInputElement> & import("react").AnimationEventHandler<HTMLTextAreaElement>) | undefined;
265
262
  onTransitionEnd?: (import("react").TransitionEventHandler<HTMLInputElement> & import("react").TransitionEventHandler<HTMLTextAreaElement>) | undefined;
266
263
  onTransitionEndCapture?: (import("react").TransitionEventHandler<HTMLInputElement> & import("react").TransitionEventHandler<HTMLTextAreaElement>) | undefined;
264
+ form?: string | undefined;
265
+ pattern?: string | undefined;
266
+ list?: string | undefined;
267
267
  alt?: string | undefined;
268
268
  disabled?: boolean | undefined;
269
269
  formAction?: string | undefined;
@@ -12,10 +12,43 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
12
12
  var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
13
13
 
14
14
  const ToastsLayoutContainer = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ToastsLayoutContainer", componentId: "vui--1iztsl9" }) `position:fixed;bottom:24px;width:100%;pointer-events:none;z-index:${index.theme.layers.tooltip};`;
15
- const Toast = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--Toast", componentId: "vui--1o64628" }) `background-color:${index.theme.colors.neutral.ink.dark};padding:12px 24px 12px 12px;box-shadow:${index.theme.shadows.lg};border-radius:${index.theme.radius.md};pointer-events:auto;z-index:40;min-width:${({ minWidth }) => minWidth};max-width:80vw;&.veeqo-components-toast-enter{transform:translateY(12px);opacity:0;}&.veeqo-components-toast-enter-active{transform:translateY(0);opacity:1;transition:500ms ease;}&.veeqo-components-toast-exit{transform:${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};opacity:1;}&.veeqo-components-toast-exit-active{transform:${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};opacity:0;transition:500ms ease;}`;
16
- const IconWrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--1nmtetq" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${index.theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.sizes.md};height:${sizes.sizes.md};}`;
17
- const ContentStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--fvpujj" }) `flex-grow:1;`;
18
- const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--ppieao" }) `color:white;font-size:16px;`;
15
+ const Toast = styled__default.default(Stack.Stack).withConfig({
16
+ shouldForwardProp: (prop) => !['minWidth', 'last'].includes(prop),
17
+ }) `
18
+ background-color: ${index.theme.colors.neutral.ink.dark};
19
+ padding: 12px 24px 12px 12px;
20
+ box-shadow: ${index.theme.shadows.lg};
21
+ border-radius: ${index.theme.radius.md};
22
+ pointer-events: auto;
23
+ z-index: 40;
24
+ min-width: ${({ minWidth }) => minWidth};
25
+ max-width: 80vw;
26
+
27
+ &.veeqo-components-toast-enter {
28
+ transform: translateY(12px);
29
+ opacity: 0;
30
+ }
31
+
32
+ &.veeqo-components-toast-enter-active {
33
+ transform: translateY(0);
34
+ opacity: 1;
35
+ transition: 500ms ease;
36
+ }
37
+
38
+ &.veeqo-components-toast-exit {
39
+ transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};
40
+ opacity: 1;
41
+ }
42
+
43
+ &.veeqo-components-toast-exit-active {
44
+ transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};
45
+ opacity: 0;
46
+ transition: 500ms ease;
47
+ }
48
+ `;
49
+ const IconWrap = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--1vysgv9" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${index.theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.sizes.md};height:${sizes.sizes.md};}`;
50
+ const ContentStack = styled__default.default(Stack.Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--19akvqb" }) `flex-grow:1;`;
51
+ const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--1bqcjr9" }) `color:white;font-size:16px;`;
19
52
 
20
53
  exports.ContentStack = ContentStack;
21
54
  exports.IconWrap = IconWrap;
@@ -1 +1 @@
1
- {"version":3,"file":"styled.cjs","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n position: fixed;\n bottom: 24px;\n width: 100%;\n pointer-events: none;\n z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n minWidth: number | string;\n last: boolean;\n}>`\n background-color: ${theme.colors.neutral.ink.dark};\n padding: 12px 24px 12px 12px;\n box-shadow: ${theme.shadows.lg};\n border-radius: ${theme.radius.md};\n pointer-events: auto;\n z-index: 40;\n min-width: ${({ minWidth }) => minWidth};\n max-width: 80vw;\n\n &.veeqo-components-toast-enter {\n transform: translateY(12px);\n opacity: 0;\n }\n\n &.veeqo-components-toast-enter-active {\n transform: translateY(0);\n opacity: 1;\n transition: 500ms ease;\n }\n\n &.veeqo-components-toast-exit {\n transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n opacity: 1;\n }\n\n &.veeqo-components-toast-exit-active {\n transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n opacity: 0;\n transition: 500ms ease;\n }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n height: 40px;\n width: 40px;\n border-radius: ${theme.radius.md};\n background-color: ${({ color }) => color};\n color: #fff;\n\n svg {\n width: ${sizes.md};\n height: ${sizes.md};\n }\n`;\n\nexport const ContentStack = styled(Stack)`\n flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n color: white;\n font-size: 16px;\n`;\n"],"names":["styled","Stack","theme","BaseContainer","sizes","Text"],"mappings":";;;;;;;;;;;;;AAQO,MAAM,qBAAqB,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrCC,WAAK,CAAC,MAAM,CAAC,OAAO;AAG1B,MAAM,KAAK,GAAGF,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAIZC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,wCAAA,EAEnCA,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACbA,WAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAAA,4NAAA,EAexB,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAGF,uBAAM,CAACG,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1BD,WAAK,CAAC,MAAM,CAAC,EAAE,CAAA,kBAAA,EACZ,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAA,sBAAA,EAI7BE,WAAK,CAAC,EAAE,CAAA,QAAA,EACPA,WAAK,CAAC,EAAE;MAIT,YAAY,GAAGJ,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAGD,uBAAM,CAACK,SAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;;;;;"}
1
+ {"version":3,"file":"styled.cjs","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n position: fixed;\n bottom: 24px;\n width: 100%;\n pointer-events: none;\n z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack).withConfig({\n shouldForwardProp: (prop) => !['minWidth', 'last'].includes(prop),\n})<{\n minWidth: number | string;\n last: boolean;\n}>`\n background-color: ${theme.colors.neutral.ink.dark};\n padding: 12px 24px 12px 12px;\n box-shadow: ${theme.shadows.lg};\n border-radius: ${theme.radius.md};\n pointer-events: auto;\n z-index: 40;\n min-width: ${({ minWidth }) => minWidth};\n max-width: 80vw;\n\n &.veeqo-components-toast-enter {\n transform: translateY(12px);\n opacity: 0;\n }\n\n &.veeqo-components-toast-enter-active {\n transform: translateY(0);\n opacity: 1;\n transition: 500ms ease;\n }\n\n &.veeqo-components-toast-exit {\n transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n opacity: 1;\n }\n\n &.veeqo-components-toast-exit-active {\n transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n opacity: 0;\n transition: 500ms ease;\n }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n height: 40px;\n width: 40px;\n border-radius: ${theme.radius.md};\n background-color: ${({ color }) => color};\n color: #fff;\n\n svg {\n width: ${sizes.md};\n height: ${sizes.md};\n }\n`;\n\nexport const ContentStack = styled(Stack)`\n flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n color: white;\n font-size: 16px;\n`;\n"],"names":["styled","Stack","theme","BaseContainer","sizes","Text"],"mappings":";;;;;;;;;;;;;AAQO,MAAM,qBAAqB,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrCC,WAAK,CAAC,MAAM,CAAC,OAAO;AAG1B,MAAM,KAAK,GAAGF,uBAAM,CAACC,WAAK,CAAC,CAAC,UAAU,CAAC;AAC5C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAClE,CAAA,CAAC,CAGA;AACoB,oBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;gBAEnCA,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA;mBACbA,WAAK,CAAC,MAAM,CAAC,EAAE,CAAA;;;AAGnB,aAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAAA;;;;;;;;;;;;;;;AAexB,eAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA;;;;;AAKxD,eAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC,CAAA;;;;;AAMxE,MAAM,QAAQ,GAAGF,uBAAM,CAACG,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1BD,WAAK,CAAC,MAAM,CAAC,EAAE,CAAA,kBAAA,EACZ,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAA,sBAAA,EAI7BE,WAAK,CAAC,EAAE,CAAA,QAAA,EACPA,WAAK,CAAC,EAAE;MAIT,YAAY,GAAGJ,uBAAM,CAACC,WAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAGD,uBAAM,CAACK,SAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;;;;;"}
@@ -1,15 +1,15 @@
1
1
  /// <reference types="react" />
2
- export declare const ToastsLayoutContainer: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps, never>;
3
- export declare const Toast: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps & {
2
+ export declare const ToastsLayoutContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Stack").StackProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
3
+ export declare const Toast: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Stack").StackProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>, any, {
4
4
  minWidth: number | string;
5
5
  last: boolean;
6
6
  }, never>;
7
- export declare const IconWrap: import("styled-components").StyledComponent<"div", any, {
7
+ export declare const IconWrap: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
8
8
  color: string;
9
9
  }, never>;
10
- export declare const ContentStack: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps, never>;
10
+ export declare const ContentStack: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Stack").StackProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
11
11
  export declare const StyledText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
12
12
  as?: import("../../Text").ValidTextTag | undefined;
13
13
  muted?: boolean | undefined;
14
- variant?: "body" | "button" | "link" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholder" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
14
+ variant?: "placeholder" | "link" | "body" | "button" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
15
15
  } & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
@@ -6,10 +6,43 @@ import { theme } from '../../../theme/index.js';
6
6
  import { sizes } from '../../../theme/modules/sizes.js';
7
7
 
8
8
  const ToastsLayoutContainer = styled(Stack).withConfig({ displayName: "vui--ToastsLayoutContainer", componentId: "vui--1iztsl9" }) `position:fixed;bottom:24px;width:100%;pointer-events:none;z-index:${theme.layers.tooltip};`;
9
- const Toast = styled(Stack).withConfig({ displayName: "vui--Toast", componentId: "vui--1o64628" }) `background-color:${theme.colors.neutral.ink.dark};padding:12px 24px 12px 12px;box-shadow:${theme.shadows.lg};border-radius:${theme.radius.md};pointer-events:auto;z-index:40;min-width:${({ minWidth }) => minWidth};max-width:80vw;&.veeqo-components-toast-enter{transform:translateY(12px);opacity:0;}&.veeqo-components-toast-enter-active{transform:translateY(0);opacity:1;transition:500ms ease;}&.veeqo-components-toast-exit{transform:${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};opacity:1;}&.veeqo-components-toast-exit-active{transform:${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};opacity:0;transition:500ms ease;}`;
10
- const IconWrap = styled(BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--1nmtetq" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.md};height:${sizes.md};}`;
11
- const ContentStack = styled(Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--fvpujj" }) `flex-grow:1;`;
12
- const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--ppieao" }) `color:white;font-size:16px;`;
9
+ const Toast = styled(Stack).withConfig({
10
+ shouldForwardProp: (prop) => !['minWidth', 'last'].includes(prop),
11
+ }) `
12
+ background-color: ${theme.colors.neutral.ink.dark};
13
+ padding: 12px 24px 12px 12px;
14
+ box-shadow: ${theme.shadows.lg};
15
+ border-radius: ${theme.radius.md};
16
+ pointer-events: auto;
17
+ z-index: 40;
18
+ min-width: ${({ minWidth }) => minWidth};
19
+ max-width: 80vw;
20
+
21
+ &.veeqo-components-toast-enter {
22
+ transform: translateY(12px);
23
+ opacity: 0;
24
+ }
25
+
26
+ &.veeqo-components-toast-enter-active {
27
+ transform: translateY(0);
28
+ opacity: 1;
29
+ transition: 500ms ease;
30
+ }
31
+
32
+ &.veeqo-components-toast-exit {
33
+ transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};
34
+ opacity: 1;
35
+ }
36
+
37
+ &.veeqo-components-toast-exit-active {
38
+ transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};
39
+ opacity: 0;
40
+ transition: 500ms ease;
41
+ }
42
+ `;
43
+ const IconWrap = styled(BaseContainer).withConfig({ displayName: "vui--IconWrap", componentId: "vui--1vysgv9" }) `display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:40px;border-radius:${theme.radius.md};background-color:${({ color }) => color};color:#fff;svg{width:${sizes.md};height:${sizes.md};}`;
44
+ const ContentStack = styled(Stack).withConfig({ displayName: "vui--ContentStack", componentId: "vui--19akvqb" }) `flex-grow:1;`;
45
+ const StyledText = styled(Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--1bqcjr9" }) `color:white;font-size:16px;`;
13
46
 
14
47
  export { ContentStack, IconWrap, StyledText, Toast, ToastsLayoutContainer };
15
48
  //# sourceMappingURL=styled.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"styled.js","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n position: fixed;\n bottom: 24px;\n width: 100%;\n pointer-events: none;\n z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack)<{\n minWidth: number | string;\n last: boolean;\n}>`\n background-color: ${theme.colors.neutral.ink.dark};\n padding: 12px 24px 12px 12px;\n box-shadow: ${theme.shadows.lg};\n border-radius: ${theme.radius.md};\n pointer-events: auto;\n z-index: 40;\n min-width: ${({ minWidth }) => minWidth};\n max-width: 80vw;\n\n &.veeqo-components-toast-enter {\n transform: translateY(12px);\n opacity: 0;\n }\n\n &.veeqo-components-toast-enter-active {\n transform: translateY(0);\n opacity: 1;\n transition: 500ms ease;\n }\n\n &.veeqo-components-toast-exit {\n transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n opacity: 1;\n }\n\n &.veeqo-components-toast-exit-active {\n transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n opacity: 0;\n transition: 500ms ease;\n }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n height: 40px;\n width: 40px;\n border-radius: ${theme.radius.md};\n background-color: ${({ color }) => color};\n color: #fff;\n\n svg {\n width: ${sizes.md};\n height: ${sizes.md};\n }\n`;\n\nexport const ContentStack = styled(Stack)`\n flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n color: white;\n font-size: 16px;\n`;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrC,KAAK,CAAC,MAAM,CAAC,OAAO;AAG1B,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAIZ,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,wCAAA,EAEnC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,eAAA,EACb,KAAK,CAAC,MAAM,CAAC,EAAE,6CAGnB,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAAA,4NAAA,EAexB,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA,2DAAA,EAKxD,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAMxE,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1B,KAAK,CAAC,MAAM,CAAC,EAAE,CAAA,kBAAA,EACZ,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAA,sBAAA,EAI7B,KAAK,CAAC,EAAE,CAAA,QAAA,EACP,KAAK,CAAC,EAAE;MAIT,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;"}
1
+ {"version":3,"file":"styled.js","sources":["../../../../src/components/ToastsLayout/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Stack } from '../../Stack';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\nexport const ToastsLayoutContainer = styled(Stack)`\n position: fixed;\n bottom: 24px;\n width: 100%;\n pointer-events: none;\n z-index: ${theme.layers.tooltip};\n`;\n\nexport const Toast = styled(Stack).withConfig({\n shouldForwardProp: (prop) => !['minWidth', 'last'].includes(prop),\n})<{\n minWidth: number | string;\n last: boolean;\n}>`\n background-color: ${theme.colors.neutral.ink.dark};\n padding: 12px 24px 12px 12px;\n box-shadow: ${theme.shadows.lg};\n border-radius: ${theme.radius.md};\n pointer-events: auto;\n z-index: 40;\n min-width: ${({ minWidth }) => minWidth};\n max-width: 80vw;\n\n &.veeqo-components-toast-enter {\n transform: translateY(12px);\n opacity: 0;\n }\n\n &.veeqo-components-toast-enter-active {\n transform: translateY(0);\n opacity: 1;\n transition: 500ms ease;\n }\n\n &.veeqo-components-toast-exit {\n transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};\n opacity: 1;\n }\n\n &.veeqo-components-toast-exit-active {\n transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};\n opacity: 0;\n transition: 500ms ease;\n }\n`;\n\nexport const IconWrap = styled(BaseContainer)<{ color: string }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n height: 40px;\n width: 40px;\n border-radius: ${theme.radius.md};\n background-color: ${({ color }) => color};\n color: #fff;\n\n svg {\n width: ${sizes.md};\n height: ${sizes.md};\n }\n`;\n\nexport const ContentStack = styled(Stack)`\n flex-grow: 1;\n`;\n\nexport const StyledText = styled(Text)`\n color: white;\n font-size: 16px;\n`;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kEAAA,EAKrC,KAAK,CAAC,MAAM,CAAC,OAAO;AAG1B,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;AAC5C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAClE,CAAA,CAAC,CAGA;AACoB,oBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;gBAEnC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;mBACb,KAAK,CAAC,MAAM,CAAC,EAAE,CAAA;;;AAGnB,aAAA,EAAA,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,CAAA;;;;;;;;;;;;;;;AAexB,eAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,eAAe,GAAG,eAAe,CAAC,CAAA;;;;;AAKxD,eAAA,EAAA,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,CAAC,CAAA;;;;;AAMxE,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO1B,KAAK,CAAC,MAAM,CAAC,EAAE,CAAA,kBAAA,EACZ,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAA,sBAAA,EAI7B,KAAK,CAAC,EAAE,CAAA,QAAA,EACP,KAAK,CAAC,EAAE;MAIT,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,YAAA;MAI5B,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2BAAA;;;;"}
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { ToggleProps } from './types';
2
3
  declare const Slider: import("styled-components").StyledComponent<"span", any, {
3
4
  switched?: boolean | undefined;
@@ -5,7 +6,7 @@ declare const Slider: import("styled-components").StyledComponent<"span", any, {
5
6
  }, never>;
6
7
  declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
7
8
  declare const Switch: import("styled-components").StyledComponent<"span", any, ToggleProps, never>;
8
- declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
9
+ declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
9
10
  disabled?: boolean | undefined;
10
11
  }, never>;
11
12
  export { Switch, Slider, Input, Wrapper };
@@ -1,7 +1,8 @@
1
+ /// <reference types="react" />
1
2
  interface IContainer {
2
3
  shouldShow: boolean;
3
4
  }
4
- export declare const Container: import("styled-components").StyledComponent<"div", any, IContainer, never>;
5
- export declare const Shadow: import("styled-components").StyledComponent<"div", any, {}, never>;
6
- export declare const Wrap: import("styled-components").StyledComponent<"div", any, {}, never>;
5
+ export declare const Container: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, IContainer, never>;
6
+ export declare const Shadow: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
7
+ export declare const Wrap: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
7
8
  export {};
@@ -12,20 +12,20 @@ export type CounterProps = {
12
12
  $active?: boolean;
13
13
  $customTextColour?: string;
14
14
  } & RequiredPalette;
15
- declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
15
+ declare const Container: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
16
16
  declare const CounterText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
17
17
  as?: import("../Text").ValidTextTag | undefined;
18
18
  muted?: boolean | undefined;
19
- variant?: "body" | "button" | "link" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholder" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
19
+ variant?: "placeholder" | "link" | "body" | "button" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
20
20
  } & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
21
- declare const Contour: import("styled-components").StyledComponent<"div", any, {
21
+ declare const Contour: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
22
22
  $active?: boolean | undefined;
23
23
  $customTextColour?: string | undefined;
24
24
  } & RequiredPalette, never>;
25
25
  declare const CounterContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
26
26
  as?: import("../Text").ValidTextTag | undefined;
27
27
  muted?: boolean | undefined;
28
- variant?: "body" | "button" | "link" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholder" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
28
+ variant?: "placeholder" | "link" | "body" | "button" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
29
29
  } & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {
30
30
  $active?: boolean | undefined;
31
31
  $customTextColour?: string | undefined;
@@ -6,7 +6,7 @@ export interface ClassNamesReturnPayload {
6
6
  active?: string;
7
7
  counter?: string;
8
8
  }
9
- export declare const ViewTab: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "id" | "onClick" | "name"> & {
9
+ export declare const ViewTab: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "onClick" | "type" | "name"> & {
10
10
  colourPalette?: import("../../theme/modules/colors").ColourPalette | undefined;
11
11
  customTextColour?: string | undefined;
12
12
  active?: boolean | undefined;
@@ -5,9 +5,9 @@ var withLabels = require('../../hoc/withLabels/withLabels.cjs');
5
5
  var blockInvalidCharacters = require('../../utils/blockInvalidCharacters.cjs');
6
6
  var invalidCharactersNumeric = require('../../utils/invalidCharactersNumeric.cjs');
7
7
  var Stack = require('../Stack/Stack.cjs');
8
- var index = require('../InputGroup/index.cjs');
8
+ var InputGroup = require('../InputGroup/InputGroup.cjs');
9
9
  var InputAffix = require('../InputAffix/InputAffix.cjs');
10
- var index$1 = require('../TextField/index.cjs');
10
+ var index = require('../TextField/index.cjs');
11
11
  var types = require('./types.cjs');
12
12
 
13
13
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -46,18 +46,18 @@ const WeightInput = withLabels.withLabels((props) => {
46
46
  };
47
47
  // If the weight is metric, render grams
48
48
  if (types.isWeightMetric(props)) {
49
- return (React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup, className: className },
50
- React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "gram", value: props.gram, "aria-label": "Grams", onChange: props.handleChangeGram }),
49
+ return (React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup, className: className },
50
+ React__default.default.createElement(index.TextField, { ...childProps.textField, name: "gram", value: props.gram, "aria-label": "Grams", onChange: props.handleChangeGram }),
51
51
  React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "g")));
52
52
  }
53
53
  // If the weight is imperial, render pounds and ounces
54
54
  if (types.isWeightImperial(props)) {
55
55
  return (React__default.default.createElement(Stack.Stack, { ...childProps.stack, className: className },
56
- React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup },
57
- React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "pound", value: props.pound, "aria-label": "Pounds", onChange: props.handleChangePound }),
56
+ React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup },
57
+ React__default.default.createElement(index.TextField, { ...childProps.textField, name: "pound", value: props.pound, "aria-label": "Pounds", onChange: props.handleChangePound }),
58
58
  React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "lb")),
59
- React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup },
60
- React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "ounce", value: props.ounce, "aria-label": "Ounces", onChange: props.handleChangeOunce }),
59
+ React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup },
60
+ React__default.default.createElement(index.TextField, { ...childProps.textField, name: "ounce", value: props.ounce, "aria-label": "Ounces", onChange: props.handleChangeOunce }),
61
61
  React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "oz"))));
62
62
  }
63
63
  // If neither metric nor imperial, return null or handle as needed
@@ -1 +1 @@
1
- {"version":3,"file":"WeightInput.cjs","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n\nimport { Stack, StackProps } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\n\nimport { WeightProps, isWeightImperial, isWeightMetric } from './types';\n\ntype ChildComponentProps = {\n stack: Partial<StackProps>;\n inputGroup: Partial<InputGroupProps>;\n textField: Partial<TextFieldProps>;\n inputAffix: Partial<InputAffixProps>;\n};\n\nconst flexStyle = { flex: 1 };\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const WeightInput = withLabels<WeightProps>((props) => {\n const { size = 'base', hasError, disabled, className } = props;\n\n const compact = size === 'sm';\n\n const childProps: ChildComponentProps = {\n stack: {\n direction: 'horizontal',\n alignY: 'center',\n spacing: 'base',\n },\n inputGroup: {\n style: flexStyle,\n },\n textField: {\n type: 'number',\n placeholder: '0',\n min: '0',\n step: 'any',\n size,\n disabled,\n hasError,\n onKeyDown: blockInvalidChars,\n style: flexStyle,\n },\n inputAffix: {\n compact,\n hasError,\n },\n };\n\n // If the weight is metric, render grams\n if (isWeightMetric(props)) {\n return (\n <InputGroup {...childProps.inputGroup} className={className}>\n <TextField\n {...childProps.textField}\n name=\"gram\"\n value={props.gram}\n aria-label=\"Grams\"\n onChange={props.handleChangeGram}\n />\n <InputAffix {...childProps.inputAffix}>g</InputAffix>\n </InputGroup>\n );\n }\n\n // If the weight is imperial, render pounds and ounces\n if (isWeightImperial(props)) {\n return (\n <Stack {...childProps.stack} className={className}>\n <InputGroup {...childProps.inputGroup}>\n <TextField\n {...childProps.textField}\n name=\"pound\"\n value={props.pound}\n aria-label=\"Pounds\"\n onChange={props.handleChangePound}\n />\n <InputAffix {...childProps.inputAffix}>lb</InputAffix>\n </InputGroup>\n <InputGroup {...childProps.inputGroup}>\n <TextField\n {...childProps.textField}\n name=\"ounce\"\n value={props.ounce}\n aria-label=\"Ounces\"\n onChange={props.handleChangeOunce}\n />\n <InputAffix {...childProps.inputAffix}>oz</InputAffix>\n </InputGroup>\n </Stack>\n );\n }\n\n // If neither metric nor imperial, return null or handle as needed\n return null;\n});\n\nWeightInput.displayName = 'WeightInput';\n\nWeightInput.defaultProps = {\n weightUnit: 'lb',\n};\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","isWeightMetric","React","InputGroup","TextField","InputAffix","isWeightImperial","Stack"],"mappings":"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"}
1
+ {"version":3,"file":"WeightInput.cjs","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n\nimport { Stack, StackProps } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\n\nimport { WeightProps, isWeightImperial, isWeightMetric } from './types';\n\ntype ChildComponentProps = {\n stack: Partial<StackProps>;\n inputGroup: Partial<InputGroupProps>;\n textField: Partial<TextFieldProps>;\n inputAffix: Partial<InputAffixProps>;\n};\n\nconst flexStyle = { flex: 1 };\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const WeightInput = withLabels<WeightProps>((props) => {\n const { size = 'base', hasError, disabled, className } = props;\n\n const compact = size === 'sm';\n\n const childProps: ChildComponentProps = {\n stack: {\n direction: 'horizontal',\n alignY: 'center',\n spacing: 'base',\n },\n inputGroup: {\n style: flexStyle,\n },\n textField: {\n type: 'number',\n placeholder: '0',\n min: '0',\n step: 'any',\n size,\n disabled,\n hasError,\n onKeyDown: blockInvalidChars,\n style: flexStyle,\n },\n inputAffix: {\n compact,\n hasError,\n },\n };\n\n // If the weight is metric, render grams\n if (isWeightMetric(props)) {\n return (\n <InputGroup {...childProps.inputGroup} className={className}>\n <TextField\n {...childProps.textField}\n name=\"gram\"\n value={props.gram}\n aria-label=\"Grams\"\n onChange={props.handleChangeGram}\n />\n <InputAffix {...childProps.inputAffix}>g</InputAffix>\n </InputGroup>\n );\n }\n\n // If the weight is imperial, render pounds and ounces\n if (isWeightImperial(props)) {\n return (\n <Stack {...childProps.stack} className={className}>\n <InputGroup {...childProps.inputGroup}>\n <TextField\n {...childProps.textField}\n name=\"pound\"\n value={props.pound}\n aria-label=\"Pounds\"\n onChange={props.handleChangePound}\n />\n <InputAffix {...childProps.inputAffix}>lb</InputAffix>\n </InputGroup>\n <InputGroup {...childProps.inputGroup}>\n <TextField\n {...childProps.textField}\n name=\"ounce\"\n value={props.ounce}\n aria-label=\"Ounces\"\n onChange={props.handleChangeOunce}\n />\n <InputAffix {...childProps.inputAffix}>oz</InputAffix>\n </InputGroup>\n </Stack>\n );\n }\n\n // If neither metric nor imperial, return null or handle as needed\n return null;\n});\n\nWeightInput.displayName = 'WeightInput';\n\nWeightInput.defaultProps = {\n weightUnit: 'lb',\n};\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","isWeightMetric","React","InputGroup","TextField","InputAffix","isWeightImperial","Stack"],"mappings":"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"}
@@ -3,7 +3,7 @@ import { withLabels } from '../../hoc/withLabels/withLabels.js';
3
3
  import { blockInvalidCharacters } from '../../utils/blockInvalidCharacters.js';
4
4
  import { invalidCharsList } from '../../utils/invalidCharactersNumeric.js';
5
5
  import { Stack } from '../Stack/Stack.js';
6
- import { InputGroup } from '../InputGroup/index.js';
6
+ import { InputGroup } from '../InputGroup/InputGroup.js';
7
7
  import { InputAffix } from '../InputAffix/InputAffix.js';
8
8
  import { TextField } from '../TextField/index.js';
9
9
  import { isWeightMetric, isWeightImperial } from './types.js';
@@ -34,7 +34,7 @@ export { FilterTag } from './FilterTag';
34
34
  export { Grid } from './Grid';
35
35
  export { Image } from './Image';
36
36
  export { InputAffix } from './InputAffix';
37
- export { InputGroup } from './InputGroup';
37
+ export { InputGroup, type InputGroupProps } from './InputGroup';
38
38
  export { LegacyDataTable } from './LegacyDataTable';
39
39
  export { Loader } from './Loader';
40
40
  export { LoginWithAmazonButton } from './LoginWithAmazonButton';