@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.
- package/dist/components/Accordion/styled.cjs +19 -9
- package/dist/components/Accordion/styled.cjs.map +1 -1
- package/dist/components/Accordion/styled.d.ts +9 -23
- package/dist/components/Accordion/styled.js +19 -9
- package/dist/components/Accordion/styled.js.map +1 -1
- package/dist/components/Action/Action.d.ts +4 -4
- package/dist/components/AnimatedDropdown/components/styled.d.ts +2 -1
- package/dist/components/AnimatedDropdown/styled.d.ts +2 -2
- package/dist/components/Badge/styled.cjs +27 -4
- package/dist/components/Badge/styled.cjs.map +1 -1
- package/dist/components/Badge/styled.d.ts +4 -3
- package/dist/components/Badge/styled.js +27 -4
- package/dist/components/Badge/styled.js.map +1 -1
- package/dist/components/Banner/styled.cjs +27 -8
- package/dist/components/Banner/styled.cjs.map +1 -1
- package/dist/components/Banner/styled.d.ts +7 -7
- package/dist/components/Banner/styled.js +27 -8
- package/dist/components/Banner/styled.js.map +1 -1
- package/dist/components/BaseContainer/BaseContainer.cjs +7 -3
- package/dist/components/BaseContainer/BaseContainer.cjs.map +1 -1
- package/dist/components/BaseContainer/BaseContainer.d.ts +2 -1
- package/dist/components/BaseContainer/BaseContainer.js +6 -2
- package/dist/components/BaseContainer/BaseContainer.js.map +1 -1
- package/dist/components/BaseContainer/BaseContainer.module.scss.cjs +9 -0
- package/dist/components/BaseContainer/BaseContainer.module.scss.cjs.map +1 -0
- package/dist/components/BaseContainer/BaseContainer.module.scss.js +7 -0
- package/dist/components/BaseContainer/BaseContainer.module.scss.js.map +1 -0
- package/dist/components/DataTable/components/ColumnHeader.d.ts +1 -1
- package/dist/components/DimensionsInput/DimensionsInput.cjs +8 -8
- package/dist/components/DimensionsInput/DimensionsInput.cjs.map +1 -1
- package/dist/components/DimensionsInput/DimensionsInput.d.ts +8 -8
- package/dist/components/DimensionsInput/DimensionsInput.js +1 -1
- package/dist/components/FilterTag/styled.d.ts +4 -4
- package/dist/components/Grid/index.cjs +7 -1
- package/dist/components/Grid/index.cjs.map +1 -1
- package/dist/components/Grid/index.d.ts +2 -1
- package/dist/components/Grid/index.js +7 -1
- package/dist/components/Grid/index.js.map +1 -1
- package/dist/components/InputAffix/InputAffix.cjs +3 -4
- package/dist/components/InputAffix/InputAffix.cjs.map +1 -1
- package/dist/components/InputAffix/InputAffix.js +1 -2
- package/dist/components/InputAffix/InputAffix.js.map +1 -1
- package/dist/components/InputGroup/InputGroup.cjs +21 -0
- package/dist/components/InputGroup/InputGroup.cjs.map +1 -0
- package/dist/components/InputGroup/InputGroup.d.ts +2 -0
- package/dist/components/InputGroup/InputGroup.js +15 -0
- package/dist/components/InputGroup/InputGroup.js.map +1 -0
- package/dist/components/InputGroup/InputGroup.module.scss.cjs +9 -0
- package/dist/components/InputGroup/InputGroup.module.scss.cjs.map +1 -0
- package/dist/components/InputGroup/InputGroup.module.scss.js +7 -0
- package/dist/components/InputGroup/InputGroup.module.scss.js.map +1 -0
- package/dist/components/InputGroup/index.d.ts +2 -4
- package/dist/components/InputGroup/types.d.ts +3 -0
- package/dist/components/LegacyDataTable/SpecificState/styled.d.ts +4 -4
- package/dist/components/Pagination/styled.d.ts +8 -8
- package/dist/components/PhoneInput/index.d.ts +8 -8
- package/dist/components/PriceInput/PriceInput.cjs +4 -4
- package/dist/components/PriceInput/PriceInput.cjs.map +1 -1
- package/dist/components/PriceInput/PriceInput.js +1 -1
- package/dist/components/Search/Search.d.ts +8 -8
- package/dist/components/Search/styled.cjs +12 -2
- package/dist/components/Search/styled.cjs.map +1 -1
- package/dist/components/Search/styled.d.ts +9 -9
- package/dist/components/Search/styled.js +12 -2
- package/dist/components/Search/styled.js.map +1 -1
- package/dist/components/SegmentedControl/styled.d.ts +2 -1
- package/dist/components/Stack/Stack.cjs +26 -45
- package/dist/components/Stack/Stack.cjs.map +1 -1
- package/dist/components/Stack/Stack.d.ts +2 -1
- package/dist/components/Stack/Stack.js +25 -44
- package/dist/components/Stack/Stack.js.map +1 -1
- package/dist/components/Stack/Stack.module.scss.cjs +9 -0
- package/dist/components/Stack/Stack.module.scss.cjs.map +1 -0
- package/dist/components/Stack/Stack.module.scss.js +7 -0
- package/dist/components/Stack/Stack.module.scss.js.map +1 -0
- package/dist/components/Stack/types.d.ts +4 -0
- package/dist/components/Stepper/styled.cjs +16 -3
- package/dist/components/Stepper/styled.cjs.map +1 -1
- package/dist/components/Stepper/styled.d.ts +2 -1
- package/dist/components/Stepper/styled.js +16 -3
- package/dist/components/Stepper/styled.js.map +1 -1
- package/dist/components/Text/Text.d.ts +1 -1
- package/dist/components/TextField/TextField.d.ts +8 -8
- package/dist/components/TextField/index.d.ts +8 -8
- package/dist/components/ToastsLayout/components/styled.cjs +37 -4
- package/dist/components/ToastsLayout/components/styled.cjs.map +1 -1
- package/dist/components/ToastsLayout/components/styled.d.ts +5 -5
- package/dist/components/ToastsLayout/components/styled.js +37 -4
- package/dist/components/ToastsLayout/components/styled.js.map +1 -1
- package/dist/components/Toggle/styled.d.ts +2 -1
- package/dist/components/VideoModal/components/styled.d.ts +4 -3
- package/dist/components/View/styled.d.ts +4 -4
- package/dist/components/ViewTab/ViewTab.d.ts +1 -1
- package/dist/components/WeightInput/WeightInput.cjs +8 -8
- package/dist/components/WeightInput/WeightInput.cjs.map +1 -1
- package/dist/components/WeightInput/WeightInput.js +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/hoc/withClassNames/withClassNames.d.ts +1 -1
- package/dist/hoc/withLabels/styled.d.ts +2 -1
- package/dist/index.cjs +10 -10
- package/dist/index.js +1 -1
- package/dist/utils/forms/form.module.scss.cjs +2 -2
- package/dist/utils/forms/form.module.scss.cjs.map +1 -1
- package/dist/utils/forms/form.module.scss.js +2 -2
- package/dist/utils/forms/form.module.scss.js.map +1 -1
- package/dist/utils/forms/inputStyles.cjs +1 -2
- package/dist/utils/forms/inputStyles.cjs.map +1 -1
- package/dist/utils/forms/inputStyles.js +1 -2
- package/dist/utils/forms/inputStyles.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/InputGroup/index.cjs +0 -13
- package/dist/components/InputGroup/index.cjs.map +0 -1
- package/dist/components/InputGroup/index.js +0 -7
- package/dist/components/InputGroup/index.js.map +0 -1
- package/dist/components/Stack/Alignments.cjs +0 -12
- package/dist/components/Stack/Alignments.cjs.map +0 -1
- package/dist/components/Stack/Alignments.js +0 -12
- 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;;;;;"}
|
|
@@ -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({
|
|
14
|
-
|
|
15
|
-
|
|
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;
|
|
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<"
|
|
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({
|
|
8
|
-
|
|
9
|
-
|
|
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;
|
|
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?: "
|
|
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?: "
|
|
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?: "
|
|
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({
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
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,
|
|
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<"
|
|
3
|
-
export declare const Toast: import("styled-components").StyledComponent<"
|
|
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<"
|
|
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<"
|
|
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?: "
|
|
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({
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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,
|
|
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<"
|
|
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<"
|
|
5
|
-
export declare const Shadow: import("styled-components").StyledComponent<"
|
|
6
|
-
export declare const Wrap: import("styled-components").StyledComponent<"
|
|
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<"
|
|
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?: "
|
|
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<"
|
|
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?: "
|
|
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>, "
|
|
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
|
|
8
|
+
var InputGroup = require('../InputGroup/InputGroup.cjs');
|
|
9
9
|
var InputAffix = require('../InputAffix/InputAffix.cjs');
|
|
10
|
-
var index
|
|
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(
|
|
50
|
-
React__default.default.createElement(index
|
|
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(
|
|
57
|
-
React__default.default.createElement(index
|
|
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(
|
|
60
|
-
React__default.default.createElement(index
|
|
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":";;;;;;;;;;;;;;;;AAoBA,MAAM,SAAS,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE;AAE7B,MAAM,iBAAiB,GAAG,CAAC,CAAsB,KAAKA,6CAAsB,CAAC,CAAC,EAAEC,yCAAgB,CAAC;MAEpF,WAAW,GAAGC,qBAAU,CAAc,CAAC,KAAK,KAAI;AAC3D,IAAA,MAAM,EAAE,IAAI,GAAG,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK;AAE9D,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,IAAI;AAE7B,IAAA,MAAM,UAAU,GAAwB;AACtC,QAAA,KAAK,EAAE;AACL,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA;AACD,QAAA,UAAU,EAAE;AACV,YAAA,KAAK,EAAE,SAAS;AACjB,SAAA;AACD,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,WAAW,EAAE,GAAG;AAChB,YAAA,GAAG,EAAE,GAAG;AACR,YAAA,IAAI,EAAE,KAAK;YACX,IAAI;YACJ,QAAQ;YACR,QAAQ;AACR,YAAA,SAAS,EAAE,iBAAiB;AAC5B,YAAA,KAAK,EAAE,SAAS;AACjB,SAAA;AACD,QAAA,UAAU,EAAE;YACV,OAAO;YACP,QAAQ;AACT,SAAA;KACF;;AAGD,IAAA,IAAIC,oBAAc,CAAC,KAAK,CAAC,EAAE;QACzB,QACEC,sBAAA,CAAA,aAAA,CAACC,
|
|
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":";;;;;;;;;;;;;;;;AAoBA,MAAM,SAAS,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE;AAE7B,MAAM,iBAAiB,GAAG,CAAC,CAAsB,KAAKA,6CAAsB,CAAC,CAAC,EAAEC,yCAAgB,CAAC;MAEpF,WAAW,GAAGC,qBAAU,CAAc,CAAC,KAAK,KAAI;AAC3D,IAAA,MAAM,EAAE,IAAI,GAAG,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK;AAE9D,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,IAAI;AAE7B,IAAA,MAAM,UAAU,GAAwB;AACtC,QAAA,KAAK,EAAE;AACL,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA;AACD,QAAA,UAAU,EAAE;AACV,YAAA,KAAK,EAAE,SAAS;AACjB,SAAA;AACD,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,WAAW,EAAE,GAAG;AAChB,YAAA,GAAG,EAAE,GAAG;AACR,YAAA,IAAI,EAAE,KAAK;YACX,IAAI;YACJ,QAAQ;YACR,QAAQ;AACR,YAAA,SAAS,EAAE,iBAAiB;AAC5B,YAAA,KAAK,EAAE,SAAS;AACjB,SAAA;AACD,QAAA,UAAU,EAAE;YACV,OAAO;YACP,QAAQ;AACT,SAAA;KACF;;AAGD,IAAA,IAAIC,oBAAc,CAAC,KAAK,CAAC,EAAE;QACzB,QACEC,sBAAA,CAAA,aAAA,CAACC,qBAAU,EAAA,EAAA,GAAK,UAAU,CAAC,UAAU,EAAE,SAAS,EAAE,SAAS,EAAA;YACzDD,sBAAA,CAAA,aAAA,CAACE,eAAS,OACJ,UAAU,CAAC,SAAS,EACxB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,YAAA,EACN,OAAO,EAClB,QAAQ,EAAE,KAAK,CAAC,gBAAgB,EAAA,CAChC;YACFF,sBAAA,CAAA,aAAA,CAACG,qBAAU,OAAK,UAAU,CAAC,UAAU,EAAA,EAAA,GAAA,CAAgB,CAC1C;AAEhB,IAAA;;AAGD,IAAA,IAAIC,sBAAgB,CAAC,KAAK,CAAC,EAAE;QAC3B,QACEJ,sBAAA,CAAA,aAAA,CAACK,WAAK,EAAA,EAAA,GAAK,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAA;AAC/C,YAAAL,sBAAA,CAAA,aAAA,CAACC,qBAAU,EAAA,EAAA,GAAK,UAAU,CAAC,UAAU,EAAA;gBACnCD,sBAAA,CAAA,aAAA,CAACE,eAAS,OACJ,UAAU,CAAC,SAAS,EACxB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,CAAC,KAAK,EAAA,YAAA,EACP,QAAQ,EACnB,QAAQ,EAAE,KAAK,CAAC,iBAAiB,EAAA,CACjC;AACF,gBAAAF,sBAAA,CAAA,aAAA,CAACG,qBAAU,EAAA,EAAA,GAAK,UAAU,CAAC,UAAU,SAAiB,CAC3C;AACb,YAAAH,sBAAA,CAAA,aAAA,CAACC,qBAAU,EAAA,EAAA,GAAK,UAAU,CAAC,UAAU,EAAA;gBACnCD,sBAAA,CAAA,aAAA,CAACE,eAAS,OACJ,UAAU,CAAC,SAAS,EACxB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,CAAC,KAAK,EAAA,YAAA,EACP,QAAQ,EACnB,QAAQ,EAAE,KAAK,CAAC,iBAAiB,EAAA,CACjC;gBACFF,sBAAA,CAAA,aAAA,CAACG,qBAAU,OAAK,UAAU,CAAC,UAAU,EAAA,EAAA,IAAA,CAAiB,CAC3C,CACP;AAEX,IAAA;;AAGD,IAAA,OAAO,IAAI;AACb,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa;AAEvC,WAAW,CAAC,YAAY,GAAG;AACzB,IAAA,UAAU,EAAE,IAAI;CACjB;;;;"}
|
|
@@ -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/
|
|
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';
|