@widergy/energy-ui 3.181.0 → 3.182.0
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/CHANGELOG.md +9 -2
- package/dist/components/UTCheckList/versions/V1/README.MD +91 -61
- package/dist/components/UTCheckList/versions/V1/index.js +1 -1
- package/dist/components/UTCheckbox/versions/V1/constants.js +1 -1
- package/dist/components/UTCheckbox/versions/V1/index.js +1 -1
- package/dist/components/UTCheckbox/versions/V1/theme.js +1 -1
- package/dist/components/UTCheckbox/versions/V1/utils.js +1 -0
- package/dist/components/UTRadioGroup/versions/V1/components/Radio/theme.js +1 -1
- package/dist/esm/components/UTCheckList/versions/V1/README.MD +91 -61
- package/dist/esm/components/UTCheckList/versions/V1/index.js +1 -1
- package/dist/esm/components/UTCheckbox/versions/V1/constants.js +1 -1
- package/dist/esm/components/UTCheckbox/versions/V1/index.js +1 -1
- package/dist/esm/components/UTCheckbox/versions/V1/theme.js +1 -1
- package/dist/esm/components/UTCheckbox/versions/V1/utils.js +1 -0
- package/dist/esm/components/UTRadioGroup/versions/V1/components/Radio/theme.js +1 -1
- package/dist/esm/utils/hooks/useCSSVariables/dimensionTokens.js +1 -1
- package/dist/utils/hooks/useCSSVariables/dimensionTokens.js +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
|
-
# [3.
|
|
1
|
+
# [3.182.0](https://github.com/widergy/energy-ui/compare/v3.181.0...v3.182.0) (2026-09-01)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Features
|
|
5
5
|
|
|
6
|
-
* [
|
|
6
|
+
* [WDS-22] add card variant to UTCheckbox ([#856](https://github.com/widergy/energy-ui/issues/856)) ([aca6147](https://github.com/widergy/energy-ui/commit/aca6147821df722275ad3b2f977dd31a43ab1743))
|
|
7
|
+
|
|
8
|
+
# [3.181.0](https://github.com/widergy/energy-ui/compare/v3.180.3...v3.181.0) (2026-08-31)
|
|
9
|
+
|
|
10
|
+
### Novedades y Mejoras
|
|
11
|
+
|
|
12
|
+
* Las etiquetas de texto del dashboard ahora pueden mostrarse con un degradado de color acorde a su categoría semántica, en lugar de un color plano, mejorando la expresividad visual de los componentes de diagnóstico inteligente. [#854](https://github.com/widergy/Energy-UI/pull/854) [CX-2943](https://widergy.atlassian.net/browse/CX-2943)
|
|
13
|
+
* Se incorporó un nuevo ícono de documento con destello disponible para su uso en la interfaz. [#854](https://github.com/widergy/Energy-UI/pull/854) [CX-2943](https://widergy.atlassian.net/browse/CX-2943)
|
|
7
14
|
|
|
8
15
|
## [3.180.3](https://github.com/widergy/energy-ui/compare/v3.180.2...v3.180.3) (2026-08-28)
|
|
9
16
|
|
|
@@ -1,56 +1,58 @@
|
|
|
1
1
|
# UTCheckList
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Descripción
|
|
4
4
|
|
|
5
|
-
`UTCheckList`
|
|
5
|
+
`UTCheckList` es un componente personalizable que renderiza una lista de checkboxes, permitiendo a los usuarios seleccionar múltiples opciones de una lista. Soporta funcionalidades como "seleccionar todos", estado indeterminado, mensaje de error y opciones dinámicas. El checkbox de "Seleccionar todos" solo afecta a las opciones que no están deshabilitadas. Además, permite agrupar opciones por categoría, mostrando primero las que no tienen categoría.
|
|
6
6
|
|
|
7
7
|
## Props
|
|
8
8
|
|
|
9
|
-
|
|
|
10
|
-
|
|
|
11
|
-
| actions | object | |
|
|
12
|
-
| classNames | objectOf(string) | |
|
|
13
|
-
| CustomRow | elementType | |
|
|
14
|
-
| disabled | bool | false |
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
|
|
|
19
|
-
|
|
|
20
|
-
|
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
| disabled
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
9
|
+
| Nombre | Tipo | Default | Descripción |
|
|
10
|
+
| ------------------ | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
|
11
|
+
| actions | object | | Acciones a renderizar dentro de `UTFieldLabel`. |
|
|
12
|
+
| classNames | objectOf(string) | | Nombres de clase personalizados para distintos elementos del checklist (`root`, `header`, `checkboxesContainer`, `item`, `selectAll`). |
|
|
13
|
+
| CustomRow | elementType | | Componente custom para renderizar el contenido de cada checkbox. |
|
|
14
|
+
| disabled | bool | false | Deshabilita todos los checkboxes del checklist cuando es `true`. |
|
|
15
|
+
| error | string | | Mensaje de error a mostrar. |
|
|
16
|
+
| horizontalSpacing | string | medium | Espaciado horizontal entre el checkbox y el título. |
|
|
17
|
+
| isSimple | bool | false | Simplifica la selección para permitir marcar un solo checkbox a la vez. |
|
|
18
|
+
| onChange | func.isRequired | | Función a llamar cuando cambia la selección. |
|
|
19
|
+
| options | arrayOf(shape) | | Array de opciones a mostrar como checkboxes. Ver [Objeto Option](#objeto-option). |
|
|
20
|
+
| required | bool | false | Indica si el checklist es obligatorio. |
|
|
21
|
+
| reversed | bool | false | Si es `true`, invierte el orden del título y el checkbox. |
|
|
22
|
+
| selectAllLabel | string | | Etiqueta para el checkbox de "Seleccionar todos". |
|
|
23
|
+
| showSelectAll | bool | true | Determina si se muestra el checkbox de "Seleccionar todos". |
|
|
24
|
+
| title | string | | Título del checklist. |
|
|
25
|
+
| value | arrayOf(string) | [] | Array de valores seleccionados. |
|
|
26
|
+
| variant | string | | Variante visual del checklist (`default`, `button` o `card`, según lo soportado por `UTCheckbox`). |
|
|
27
|
+
| verticalSpacing | string | medium | Espaciado vertical entre los items. |
|
|
28
|
+
|
|
29
|
+
### Objeto Option
|
|
30
|
+
|
|
31
|
+
El prop `options` es un array de objetos. Cada campo del objeto se reenvía al `UTCheckbox` correspondiente cuando aplica (por ejemplo `description`, `tooltip` e `icon` solo tienen efecto visual en la variante `card`):
|
|
32
|
+
|
|
33
|
+
| Nombre | Tipo | Descripción |
|
|
34
|
+
| ----------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
|
|
35
|
+
| category | string | (Opcional) Categoría bajo la cual se agrupa la opción. Sin categoría, la opción aparece sin agrupar arriba. |
|
|
36
|
+
| checked | bool | Indica si la opción está marcada. |
|
|
37
|
+
| description | string | (Opcional) Texto secundario bajo el título. **Solo tiene efecto en la variante `card`.** |
|
|
38
|
+
| disabled | bool | Indica si la opción está deshabilitada. |
|
|
39
|
+
| icon | string \| elementType \| `{ src, alt }` | (Opcional) Ícono de la opción. En variantes `default`/`button` es el nombre de un ícono de `UTIcon`. En la variante `card` admite además un componente custom o un objeto `{ src, alt }` para una imagen. |
|
|
40
|
+
| name | string | Etiqueta a mostrar para la opción. |
|
|
41
|
+
| tooltip | string | (Opcional) Texto de ayuda junto al título. **Solo tiene efecto en la variante `card`.** |
|
|
42
|
+
| value | string | Valor de la opción. |
|
|
43
|
+
|
|
44
|
+
## Uso
|
|
45
|
+
|
|
46
|
+
### Ejemplo básico
|
|
45
47
|
|
|
46
48
|
```jsx
|
|
47
49
|
import React from 'react';
|
|
48
50
|
import UTCheckList from './UTCheckList';
|
|
49
51
|
|
|
50
52
|
const options = [
|
|
51
|
-
{ name: '
|
|
52
|
-
{ name: '
|
|
53
|
-
{ name: '
|
|
53
|
+
{ name: 'Opción 1', value: '1' },
|
|
54
|
+
{ name: 'Opción 2', value: '2' },
|
|
55
|
+
{ name: 'Opción 3', value: '3', disabled: true, checked: true }
|
|
54
56
|
];
|
|
55
57
|
|
|
56
58
|
const Example = () => {
|
|
@@ -58,12 +60,12 @@ const Example = () => {
|
|
|
58
60
|
|
|
59
61
|
return (
|
|
60
62
|
<UTCheckList
|
|
61
|
-
error="
|
|
62
|
-
title="
|
|
63
|
+
error="Selecciona al menos una opción"
|
|
64
|
+
title="Selecciona opciones"
|
|
63
65
|
onChange={setSelectedOptions}
|
|
64
66
|
options={options}
|
|
65
67
|
required
|
|
66
|
-
selectAllLabel="
|
|
68
|
+
selectAllLabel="Seleccionar todos"
|
|
67
69
|
value={selectedOptions}
|
|
68
70
|
/>
|
|
69
71
|
);
|
|
@@ -72,17 +74,17 @@ const Example = () => {
|
|
|
72
74
|
export default Example;
|
|
73
75
|
```
|
|
74
76
|
|
|
75
|
-
###
|
|
77
|
+
### Ejemplo categorizado
|
|
76
78
|
|
|
77
79
|
```jsx
|
|
78
80
|
import React from 'react';
|
|
79
81
|
import UTCheckList from './UTCheckList';
|
|
80
82
|
|
|
81
83
|
const options = [
|
|
82
|
-
{ name: '
|
|
83
|
-
{ name: '
|
|
84
|
-
{ name: '
|
|
85
|
-
{ name: '
|
|
84
|
+
{ name: 'Opción 1', value: '1' },
|
|
85
|
+
{ name: 'Opción 2', value: '2', category: 'Grupo A' },
|
|
86
|
+
{ name: 'Opción 3', value: '3', category: 'Grupo B', disabled: true },
|
|
87
|
+
{ name: 'Opción 4', value: '4', category: 'Grupo A' }
|
|
86
88
|
];
|
|
87
89
|
|
|
88
90
|
const Example = () => {
|
|
@@ -90,11 +92,11 @@ const Example = () => {
|
|
|
90
92
|
|
|
91
93
|
return (
|
|
92
94
|
<UTCheckList
|
|
93
|
-
error="
|
|
94
|
-
title="
|
|
95
|
+
error="Selecciona al menos una opción"
|
|
96
|
+
title="Checklist categorizado"
|
|
95
97
|
onChange={setSelectedOptions}
|
|
96
98
|
options={options}
|
|
97
|
-
selectAllLabel="
|
|
99
|
+
selectAllLabel="Seleccionar todos"
|
|
98
100
|
value={selectedOptions}
|
|
99
101
|
/>
|
|
100
102
|
);
|
|
@@ -103,32 +105,60 @@ const Example = () => {
|
|
|
103
105
|
export default Example;
|
|
104
106
|
```
|
|
105
107
|
|
|
106
|
-
###
|
|
108
|
+
### Ejemplo con variante `card`
|
|
107
109
|
|
|
108
110
|
```jsx
|
|
109
111
|
import React from 'react';
|
|
110
112
|
import UTCheckList from './UTCheckList';
|
|
111
113
|
|
|
112
|
-
const
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
114
|
+
const options = [
|
|
115
|
+
{
|
|
116
|
+
name: 'Plan Residencial',
|
|
117
|
+
value: '1',
|
|
118
|
+
icon: 'IconHome',
|
|
119
|
+
description: 'Cubre el consumo de un hogar estándar',
|
|
120
|
+
tooltip: 'Ideal para tu hogar'
|
|
121
|
+
},
|
|
122
|
+
{ name: 'Plan Comercial', value: '2', icon: 'IconBuildingStore', description: 'Pensado para pequeños comercios' }
|
|
123
|
+
];
|
|
124
|
+
|
|
125
|
+
const Example = () => {
|
|
126
|
+
const [selectedOptions, setSelectedOptions] = React.useState([]);
|
|
127
|
+
|
|
128
|
+
return (
|
|
129
|
+
<UTCheckList
|
|
130
|
+
title="Selecciona un plan"
|
|
131
|
+
onChange={setSelectedOptions}
|
|
132
|
+
options={options}
|
|
133
|
+
value={selectedOptions}
|
|
134
|
+
variant="card"
|
|
135
|
+
/>
|
|
136
|
+
);
|
|
116
137
|
};
|
|
117
138
|
|
|
139
|
+
export default Example;
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
### Ejemplo con estilos personalizados
|
|
143
|
+
|
|
144
|
+
```jsx
|
|
145
|
+
import React from 'react';
|
|
146
|
+
import UTCheckList from './UTCheckList';
|
|
147
|
+
|
|
118
148
|
const Example = () => {
|
|
119
149
|
const options = [
|
|
120
|
-
{ name: '
|
|
121
|
-
{ name: '
|
|
150
|
+
{ name: 'Opción 1', value: '1' },
|
|
151
|
+
{ name: 'Opción 2', value: '2' }
|
|
122
152
|
];
|
|
123
153
|
|
|
124
154
|
const [selectedOptions, setSelectedOptions] = React.useState([]);
|
|
125
155
|
|
|
126
156
|
return (
|
|
127
157
|
<UTCheckList
|
|
128
|
-
title="
|
|
158
|
+
title="Checklist con estilos personalizados"
|
|
129
159
|
onChange={setSelectedOptions}
|
|
130
160
|
options={options}
|
|
131
|
-
|
|
161
|
+
classNames={{ root: 'custom-root', checkboxesContainer: 'custom-container', header: 'custom-header' }}
|
|
132
162
|
value={selectedOptions}
|
|
133
163
|
/>
|
|
134
164
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_buttonTypes=require("../../../../types/buttonTypes"),_utils=require("../../../UTValidation/utils"),_constants=require("../../../UTCheckbox/versions/V1/constants"),_UTCheckbox=_interopRequireDefault(require("../../../UTCheckbox")),_UTFieldLabel=_interopRequireDefault(require("../../../UTFieldLabel")),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_UTValidation=_interopRequireDefault(require("../../../UTValidation")),_utils2=require("./utils"),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_constants2=require("./constants");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var s,o,l={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return l;if(s=t?r:a){if(s.has(e))return s.get(e);s.set(e,l)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?s(l,t,o):l[t]=e[t]);return l})(e,t)}const UTCheckList=e=>{let{actions:t,classNames:a={},CustomRow:r,dataTestId:s,disabled:o,error:l,horizontalSpacing:n="medium",isSimple:i=!1,itemDataTestId:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_buttonTypes=require("../../../../types/buttonTypes"),_utils=require("../../../UTValidation/utils"),_constants=require("../../../UTCheckbox/versions/V1/constants"),_UTCheckbox=_interopRequireDefault(require("../../../UTCheckbox")),_UTFieldLabel=_interopRequireDefault(require("../../../UTFieldLabel")),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_UTValidation=_interopRequireDefault(require("../../../UTValidation")),_utils2=require("./utils"),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_constants2=require("./constants");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var s,o,l={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return l;if(s=t?r:a){if(s.has(e))return s.get(e);s.set(e,l)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?s(l,t,o):l[t]=e[t]);return l})(e,t)}const UTCheckList=e=>{let{actions:t,classNames:a={},CustomRow:r,dataTestId:s,disabled:o,error:l,horizontalSpacing:n="medium",isSimple:i=!1,itemDataTestId:p,onChange:c=()=>{},options:u,required:_,reversed:d,selectAllLabel:T,showSelectAll:y=!0,title:f,value:m=null,variant:g,verticalSpacing:v="medium"}=e;const b=(0,_utils2.getPropValueBasedOnVariant)(g,d,!0),h=(0,_utils2.getPropValueBasedOnVariant)(g,v,_constants.SPACING.SMALL)===_constants.SPACING.SMALL?_stylesModule.default.smallVerticalSpacing:"",C=(0,_react.useMemo)(()=>l&&(0,_utils.formatErrorToValidation)(l,{withIcon:!1}),[l]);(0,_react.useEffect)(()=>{if(m){const e=(0,_utils2.convertIfIsString)(m);JSON.stringify(e)!==JSON.stringify(m)&&c(e)}},[m,c]);const O=(0,_react.useMemo)(()=>{const e=u.reduce((e,t)=>{const a=t.category||_constants2.NO_CATEGORY;return e[a]||(e[a]=[]),e[a].push(t),e},{NO_CATEGORY:[]});return Object.entries(e).filter(e=>{let[,t]=e;return t.length>0}).sort((e,t)=>{let[a]=e,[r]=t;return a===_constants2.NO_CATEGORY?-1:r===_constants2.NO_CATEGORY?1:0})},[u]),q=(0,_react.useMemo)(()=>u.filter(e=>!e.disabled),[u]),k=(0,_react.useMemo)(()=>q.every(e=>null==m?void 0:m.includes(e.value)),[q,m]),M=(0,_react.useMemo)(()=>q.some(e=>null==m?void 0:m.includes(e.value))&&!k,[q,m,k]),N=(0,_react.useCallback)(e=>{if(i)c([e]);else{var t;const a=null!=m&&null!==(t=m.some)&&void 0!==t&&t.call(m,t=>t===e)?m.filter(t=>t!==e):[...m||[],e];c(a)}},[m,c,i]),U=(0,_react.useCallback)(()=>{c(k?[]:q.map(e=>e.value))},[k,q,c]);return _react.default.createElement("div",{className:"".concat(_stylesModule.default.container," ").concat(h," ").concat(a.root),"data-testid":s},(f||C)&&_react.default.createElement("div",{className:"".concat(_stylesModule.default.headerContainer," ").concat(a.header)},f&&_react.default.createElement(_UTFieldLabel.default,{actions:t,required:_},f),C&&_react.default.createElement(_UTValidation.default,{validationData:C})),_react.default.createElement("div",{className:"".concat(_stylesModule.default.checkboxesContainer," ").concat(h," ").concat(g===_constants.BUTTON_VARIANT&&_stylesModule.default.buttonVariant," ").concat(a.checkboxesContainer)},y&&!i&&_react.default.createElement(_UTCheckbox.default,{className:a.selectAll,dataTestId:p?"".concat(p,".selectAll"):null,disabled:o,indeterminate:M,onChange:U,reversed:b,spacing:n,title:T,value:k,variant:g,version:"V1"}),O.map((e,t)=>{let[s,l]=e;const c="".concat(s,"-").concat(l.map(e=>e.value).join("-"));return _react.default.createElement("div",{className:"".concat(_stylesModule.default.categoryContainer," ").concat(h),key:c},s!==_constants2.NO_CATEGORY&&_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.categoryTitle,colorTheme:"gray",variant:"small",weight:"medium"},s.toUpperCase()),l.map((e,s)=>_react.default.createElement(_UTCheckbox.default,{classNames:a.item,CustomComponent:r?_react.default.createElement(r,{item:e,isChecked:(0,_utils2.isChecked)(e,m)}):void 0,dataTestId:p?"".concat(p,".category_").concat(t,".").concat(s):null,description:e.description,disabled:e.disabled||o,isSimple:i,key:e.value,icon:e.icon,onChange:()=>N(e.value),reversed:i?b:d,spacing:n,title:e.name,tooltip:e.tooltip,value:(0,_utils2.isChecked)(e,m),variant:g,version:"V1"})))})))};UTCheckList.propTypes={actions:(0,_propTypes.arrayOf)(_buttonTypes.buttonTypes),classNames:(0,_propTypes.objectOf)(_propTypes.string),CustomRow:_propTypes.elementType,dataTestId:_propTypes.string,disabled:_propTypes.bool,error:_propTypes.string,horizontalSpacing:_propTypes.string,isSimple:_propTypes.bool,itemDataTestId:_propTypes.string,onChange:_propTypes.func,options:(0,_propTypes.arrayOf)((0,_propTypes.shape)({category:_propTypes.string,checked:_propTypes.bool,description:_propTypes.string,disabled:_propTypes.bool,icon:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.elementType,(0,_propTypes.shape)({alt:_propTypes.string,src:_propTypes.string})]),name:_propTypes.string,tooltip:_propTypes.string,value:_propTypes.string})),required:_propTypes.bool,reversed:_propTypes.bool,selectAllLabel:_propTypes.string,showSelectAll:_propTypes.bool,title:_propTypes.string,value:(0,_propTypes.arrayOf)(_propTypes.string),variant:_propTypes.string,verticalSpacing:_propTypes.string};var _default=exports.default=UTCheckList;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SPACING=exports.INDETERMINATE_ICON=exports.CHECKED_ICON=exports.BUTTON_VARIANT=void 0;const CHECKED_ICON=exports.CHECKED_ICON="IconCheck",INDETERMINATE_ICON=exports.INDETERMINATE_ICON="IconMinus",SPACING=exports.SPACING={SMALL:"small",MEDIUM:"medium"},BUTTON_VARIANT=exports.BUTTON_VARIANT="button";
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SPACING=exports.INDETERMINATE_ICON=exports.ICON_CONTENT_TYPES=exports.CHECKED_ICON=exports.CARD_VARIANT=exports.CARD_ICON_SIZE=exports.CARD_ICON_AREA_SIZE=exports.CARD_ICON_AREA_RADIUS=exports.BUTTON_VARIANT=void 0;const CHECKED_ICON=exports.CHECKED_ICON="IconCheck",INDETERMINATE_ICON=exports.INDETERMINATE_ICON="IconMinus",SPACING=exports.SPACING={SMALL:"small",MEDIUM:"medium"},BUTTON_VARIANT=exports.BUTTON_VARIANT="button",CARD_VARIANT=exports.CARD_VARIANT="card",CARD_ICON_SIZE=exports.CARD_ICON_SIZE=16,CARD_ICON_AREA_SIZE=exports.CARD_ICON_AREA_SIZE=32,CARD_ICON_AREA_RADIUS=exports.CARD_ICON_AREA_RADIUS="var(--UT-checkbox-card-icon-area-radius, 8px)",ICON_CONTENT_TYPES=exports.ICON_CONTENT_TYPES={UT_ICON:"utIcon",IMAGE:"image",COMPONENT:"component"};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_form=require("@widergy/web-utils/lib/form"),_classesUtils=require("../../../../utils/classesUtils"),_UTFieldLabel=_interopRequireDefault(require("../../../UTFieldLabel")),_UTIcon=_interopRequireDefault(require("../../../UTIcon")),_WithTheme=_interopRequireDefault(require("../../../WithTheme")),_UTTouchableWithoutFeedback=_interopRequireDefault(require("../../../UTTouchableWithoutFeedback")),_buttonTypes=require("../../../../types/buttonTypes"),_formTypes=require("../../../../types/formTypes"),_utils=require("../../../UTValidation/utils"),_UTValidation=_interopRequireDefault(require("../../../UTValidation")),_constants=require("./constants"),_theme=require("./theme"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_form=require("@widergy/web-utils/lib/form"),_classesUtils=require("../../../../utils/classesUtils"),_UTFieldLabel=_interopRequireDefault(require("../../../UTFieldLabel")),_UTIcon=_interopRequireDefault(require("../../../UTIcon")),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_UTTooltip=_interopRequireDefault(require("../../../UTTooltip")),_WithTheme=_interopRequireDefault(require("../../../WithTheme")),_UTTouchableWithoutFeedback=_interopRequireDefault(require("../../../UTTouchableWithoutFeedback")),_buttonTypes=require("../../../../types/buttonTypes"),_formTypes=require("../../../../types/formTypes"),_utils=require("../../../UTValidation/utils"),_UTValidation=_interopRequireDefault(require("../../../UTValidation")),_constants=require("./constants"),_theme=require("./theme"),_utils2=require("./utils"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var l,o,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(l=t?r:a){if(l.has(e))return l.get(e);l.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(l=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?l(n,t,o):n[t]=e[t]);return n})(e,t)}const UTCheckbox=e=>{let{actions:t,checkboxDataTestId:a,classes:r,classNames:l,CustomComponent:o,dataTestId:n,description:s,disabled:i,icon:c,indeterminate:u,isSimple:d=!1,meta:_,onChange:p=()=>{},required:T,title:m,tooltip:f,value:y=!1,variant:h="default",withUpperTitle:b}=e;const E=(0,_react.useMemo)(()=>(0,_classesUtils.mergeMultipleClassNames)(r,l),[l,r]),N=h===_constants.CARD_VARIANT,U=(0,_react.useMemo)(()=>u?_constants.INDETERMINATE_ICON:!0===y?_constants.CHECKED_ICON:"",[u,y]),I=()=>{!i&&p&&p(!y)},q=!0===y&&h===_constants.BUTTON_VARIANT,C=_&&(0,_form.shouldShowErrors)(_)&&_.error||"",g=(0,_utils.formatErrorToValidation)(C);return N?_react.default.createElement(_react.default.Fragment,null,b&&_react.default.createElement(_UTFieldLabel.default,{actions:t,required:T},m),_react.default.createElement(_UTTouchableWithoutFeedback.default,{className:E.container,dataTestId:n,disabled:i,onMouseDown:I},_react.default.createElement("div",{className:E.content},(()=>{if(!c)return null;const e=(0,_utils2.getIconContentType)(c);if(e===_constants.ICON_CONTENT_TYPES.IMAGE)return _react.default.createElement("img",{alt:c.alt||"",className:E.iconImage,src:c.src});if(e===_constants.ICON_CONTENT_TYPES.COMPONENT){const e=c;return _react.default.createElement(e,{className:E.icon})}return _react.default.createElement(_UTIcon.default,{area:!0,areaBackground:"var(--light01)",areaBorderColor:"var(--light04)",areaRadius:_constants.CARD_ICON_AREA_RADIUS,areaSize:_constants.CARD_ICON_AREA_SIZE,colorTheme:"dark",name:c,size:_constants.CARD_ICON_SIZE})})(),_react.default.createElement("div",{className:E.contentContainer},f?_react.default.createElement("div",{className:E.titleAndTooltip},_react.default.createElement(_UTLabel.default,{className:E.name,colorTheme:"dark"},m),_react.default.createElement(_UTTooltip.default,{content:f},_react.default.createElement("span",{className:E.tooltip},_react.default.createElement(_UTIcon.default,{className:E.infoIcon,colorTheme:y?"accent":i?"gray":"dark",name:"IconHelp",size:20})))):_react.default.createElement(_UTLabel.default,{className:E.name,colorTheme:"dark"},m),s&&_react.default.createElement(_UTLabel.default,{className:E.description,colorTheme:"gray",variant:"body"},s))),_react.default.createElement("div",{className:E.boxContainer,"data-testid":a},_react.default.createElement("div",{className:E.box},_react.default.createElement("div",{className:E.iconContainer},U&&_react.default.createElement(_UTIcon.default,{colorTheme:"light",name:u?"IconMinus":"IconCheck",size:10})))),C&&_react.default.createElement(_UTValidation.default,{className:E.validation,validationData:g}))):_react.default.createElement(_react.default.Fragment,null,b&&_react.default.createElement(_UTFieldLabel.default,{actions:t,required:T},m),_react.default.createElement(_UTTouchableWithoutFeedback.default,{className:E.container,dataTestId:n,disabled:i,onMouseDown:I},_react.default.createElement("div",{className:E.content},_react.default.createElement("div",{className:E.boxContainer,"data-testid":a},d?_react.default.createElement(_UTIcon.default,{name:"IconCheck",shade:"04",colorTheme:"accent",className:y?void 0:_stylesModule.default.hidden}):_react.default.createElement("div",{className:E.box},_react.default.createElement("div",{className:E.iconContainer},U&&_react.default.createElement(_UTIcon.default,{colorTheme:"light",name:u?"IconMinus":"IconCheck",size:10})))),o||_react.default.createElement(_UTFieldLabel.default,{className:E.title,highlighted:q,icon:c,required:T},m)),C&&_react.default.createElement(_UTValidation.default,{className:E.validation,validationData:g})))};UTCheckbox.propTypes={actions:(0,_propTypes.arrayOf)(_buttonTypes.buttonTypes),checkboxDataTestId:_propTypes.string,classes:(0,_propTypes.objectOf)(_propTypes.string),classNames:(0,_propTypes.objectOf)(_propTypes.string),CustomComponent:_propTypes.elementType,dataTestId:_propTypes.string,description:_propTypes.string,disabled:_propTypes.bool,icon:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.elementType,(0,_propTypes.shape)({alt:_propTypes.string,src:_propTypes.string})]),indeterminate:_propTypes.bool,isSimple:_propTypes.bool,meta:_formTypes.metaPropTypes.isRequired,onChange:_propTypes.func,required:_propTypes.bool,title:_propTypes.string,tooltip:_propTypes.string,value:_propTypes.bool,variant:_propTypes.string,withUpperTitle:_propTypes.bool};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTCheckbox);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _form=require("@widergy/web-utils/lib/form"),_constants=require("./constants");const MEDIUM_SPACING="var(--UT-checkbox-gap-md, 8px)",SMALL_SPACING="var(--UT-checkbox-gap-sm, 4px)",baseCheckBoxTheme=e=>({container:{alignItems:"center !important",display:"flex",flexWrap:"wrap",gap:"0px"},content:{display:"flex",flexDirection:"row",alignItems:"center"},iconContainer:{border:"1px solid ".concat(e.Palette.light["05"]),borderRadius:"var(--UT-checkbox-radius, 4px)",display:"flex",height:"var(--UT-checkbox-size, 16px)",placeContent:"center",placeItems:"center",width:"var(--UT-checkbox-size, 16px)"},box:{borderRadius:25,overflow:"hidden",padding:3},validation:{flexBasis:"100%"}}),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _form=require("@widergy/web-utils/lib/form"),_constants=require("./constants");const MEDIUM_SPACING="var(--UT-checkbox-gap-md, 8px)",SMALL_SPACING="var(--UT-checkbox-gap-sm, 4px)",baseCheckBoxTheme=e=>({container:{alignItems:"center !important",display:"flex",flexWrap:"wrap",gap:"0px"},content:{display:"flex",flexDirection:"row",alignItems:"center"},iconContainer:{border:"1px solid ".concat(e.Palette.light["05"]),borderRadius:"var(--UT-checkbox-radius, 4px)",display:"flex",height:"var(--UT-checkbox-size, 16px)",placeContent:"center",placeItems:"center",width:"var(--UT-checkbox-size, 16px)"},box:{borderRadius:25,overflow:"hidden",padding:3},validation:{flexBasis:"100%"},contentContainer:{display:"flex",flexDirection:"column",gap:"var(--UT-checkbox-content-gap, 4px)"},titleAndTooltip:{alignItems:"center",display:"flex",gap:"var(--gap-xs, 4px)"},tooltip:{display:"flex"},icon:{flexShrink:0,height:"36px",width:"36px"},iconImage:{borderRadius:"50%",flexShrink:0,height:"36px",objectFit:"cover",width:"36px"},infoIcon:{flexShrink:0},name:{},description:{}}),getCardTheme=e=>{var t,o,a,n;let{theme:r,error:i}=e;const c=(null===(t=r.Palette.actions)||void 0===t?void 0:t.accent["01"])||r.Palette.accent["01"],l=(null===(o=r.Palette.actions)||void 0===o?void 0:o.accent["02"])||r.Palette.accent["02"],d=(null===(a=r.Palette.actions)||void 0===a?void 0:a.accent["03"])||r.Palette.accent["03"],s=(null===(n=r.Palette.actions)||void 0===n?void 0:n.accent["05"])||r.Palette.accent["05"];return{base:{backgroundColor:r.Palette.light["01"],boxShadow:"none",outline:"1px solid ".concat(i?r.Palette.error["04"]:r.Palette.light["04"]," !important"),"&:hover":{backgroundColor:i?r.Palette.error["01"]:r.Palette.light["03"]},"&:active":{backgroundColor:i?r.Palette.error["02"]:r.Palette.light["04"],"& $description":{color:r.Palette.gray["03"]}}},selected:{boxShadow:"none",outline:"2px solid ".concat(d," !important"),"& $icon path":{fill:s},"&:hover":{backgroundColor:c,outline:"2px solid ".concat(d," !important")},"&:active":{backgroundColor:l,outline:"2px solid ".concat(d," !important")}},disabled:{backgroundColor:r.Palette.light["03"],boxShadow:"none",outline:"2px solid transparent !important",pointerEvents:"none","& $name, & $description":{color:r.Palette.gray["04"]},"& $icon path":{fill:r.Palette.gray["04"]}}}},getCardCheckboxColors=e=>{var t;let{isMarked:o,disabled:a,theme:n}=e;const r=(null===(t=n.Palette.actions)||void 0===t?void 0:t.accent["04"])||n.Palette.accent["04"],i=n.Palette.gray["04"];return{backgroundColor:o?a?i:r:"transparent",borderColor:o?a?i:r:n.Palette.light["05"]}},conditionalStyles=e=>{var t,o,a,n,r;let{value:i,indeterminate:c,reversed:l,spacing:d,variant:s,theme:p,disabled:v,error:x}=e;const h=d===_constants.SPACING.SMALL?SMALL_SPACING:MEDIUM_SPACING,b=s===_constants.CARD_VARIANT,g=b&&getCardTheme({theme:p,error:x}),u=!0===i||c;return{container:{...l&&{flexDirection:"row-reverse",justifyContent:"space-between"},...v&&!b&&{opacity:.5},...s===_constants.BUTTON_VARIANT&&{borderRadius:"8px",padding:"small"===d?"8px 12px":"12px 16px",backgroundColor:x?p.Palette.error["01"]:"transparent","&:active, &:hover":{transition:"background-color 0.1s ease-in-out"},"&:active":{backgroundColor:x?p.Palette.error["02"]:p.Palette.light["04"]},"&:hover":{backgroundColor:x?p.Palette.error["02"]:p.Palette.light["03"]}},...b&&{borderRadius:"var(--UT-checkbox-card-radius, 12px)",gap:h,minHeight:"var(--UT-checkbox-card-min-height, 24px)",overflow:"visible",padding:"var(--UT-checkbox-card-padding-y, 12px) var(--UT-checkbox-card-padding-x, 16px)",...v?g.disabled:i?g.selected:g.base}},content:{...l&&{flexDirection:"row-reverse",justifyContent:"space-between",...s===_constants.BUTTON_VARIANT&&{width:"100%"}},...b&&{gap:h,marginRight:"auto"}},iconContainer:{...x&&{borderColor:p.Palette.error["04"]},...u&&{backgroundColor:(null===(t=p.Palette.actions)||void 0===t?void 0:t.accent["04"])||p.Palette.accent["04"],borderColor:(null===(o=p.Palette.actions)||void 0===o?void 0:o.accent["04"])||p.Palette.accent["04"]},...b&&getCardCheckboxColors({isMarked:u,disabled:v,theme:p})},boxContainer:{...b?{}:l?{marginLeft:h,marginRight:0}:{marginRight:h},...s!==_constants.BUTTON_VARIANT&&!b&&{"&:active, &:hover":{"& $box":{borderColor:x?p.Palette.error["03"]:(null===(a=p.Palette.actions)||void 0===a?void 0:a.accent["03"])||p.Palette.accent["03"],borderWidth:1,overflow:"hidden",transition:"background-color 0.1s ease-in-out"}},"&:active":{"& $box":{backgroundColor:x?p.Palette.error["02"]:(null===(n=p.Palette.actions)||void 0===n?void 0:n.accent["02"])||p.Palette.accent["02"]}},"&:hover":{"& $box":{backgroundColor:x?p.Palette.error["01"]:(null===(r=p.Palette.actions)||void 0===r?void 0:r.accent["01"])||p.Palette.accent["01"]}}}},title:s===_constants.BUTTON_VARIANT&&{userSelect:"none"}}},retrieveStyle=e=>{let{value:t,disabled:o,indeterminate:a,reversed:n,spacing:r,theme:i,variant:c,meta:l}=e;const d=baseCheckBoxTheme(i),s=l&&(0,_form.shouldShowErrors)(l),{container:p,content:v,iconContainer:x,boxContainer:h,title:b}=conditionalStyles({value:t,disabled:o,indeterminate:a,reversed:n,spacing:r,variant:c,theme:i,error:s});return{box:d.box,content:{...d.content,...v},container:{...d.container,...p},iconContainer:{...d.iconContainer,...x},boxContainer:h,title:b,validation:d.validation,contentContainer:d.contentContainer,titleAndTooltip:d.titleAndTooltip,tooltip:d.tooltip,icon:d.icon,iconImage:d.iconImage,infoIcon:d.infoIcon,name:d.name,description:d.description}};exports.retrieveStyle=retrieveStyle;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getIconContentType=void 0;var _componentUtils=require("../../../../utils/componentUtils"),_constants=require("./constants");const getIconContentType=t=>(0,_componentUtils.isUTIcon)(t)?_constants.ICON_CONTENT_TYPES.UT_ICON:t&&"object"==typeof t&&t.src?_constants.ICON_CONTENT_TYPES.IMAGE:_constants.ICON_CONTENT_TYPES.COMPONENT;exports.getIconContentType=getIconContentType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _constants=require("../../constants"),_constants2=require("./constants");const SPACING_VALUES={[_constants.SPACING.SMALL]:"var(--UT-radioGroup-control-gap-sm, 4px)",[_constants.SPACING.MEDIUM]:"var(--UT-radioGroup-control-gap-md, 8px)"},getCardRadioColors=t=>{let{accent04:o,disabled:e,selected:r,theme:a}=t;const n=a.Palette.gray["04"];return{backgroundColor:r?e?n:o:"transparent",borderColor:e?n:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _constants=require("../../constants"),_constants2=require("./constants");const SPACING_VALUES={[_constants.SPACING.SMALL]:"var(--UT-radioGroup-control-gap-sm, 4px)",[_constants.SPACING.MEDIUM]:"var(--UT-radioGroup-control-gap-md, 8px)"},getCardRadioColors=t=>{let{accent04:o,disabled:e,selected:r,theme:a}=t;const n=a.Palette.gray["04"];return{backgroundColor:r?e?n:o:"transparent",borderColor:r?e?n:o:a.Palette.light["05"]}},retrieveStyle=t=>{var o,e,r,a,n;let{theme:i,variant:l=_constants2.RADIO_VARIANTS.DEFAULT,disabled:c,selected:d,spacing:s=_constants.SPACING.MEDIUM,reversed:p}=t;const A=(null===(o=i.Palette.actions)||void 0===o?void 0:o.accent["01"])||i.Palette.accent["01"],g=(null===(e=i.Palette.actions)||void 0===e?void 0:e.accent["02"])||i.Palette.accent["02"],u=(null===(r=i.Palette.actions)||void 0===r?void 0:r.accent["03"])||i.Palette.accent["03"],h=(null===(a=i.Palette.actions)||void 0===a?void 0:a.accent["04"])||i.Palette.accent["04"],v=(null===(n=i.Palette.actions)||void 0===n?void 0:n.accent["05"])||i.Palette.accent["05"],x={[_constants2.RADIO_VARIANTS.CARD]:{backgroundColor:i.Palette.light["01"],boxShadow:"none",outline:"1px solid ".concat(i.Palette.light["04"]," !important"),"&:hover":{backgroundColor:i.Palette.light["03"]},"&:active":{backgroundColor:i.Palette.light["04"],"& $description":{color:i.Palette.gray["03"]}}},[_constants2.RADIO_VARIANTS.BUTTON]:{backgroundColor:i.Palette.light["01"],"&:hover":{backgroundColor:i.Palette.light["03"]},"&:active":{backgroundColor:i.Palette.light["04"]}},[_constants2.RADIO_VARIANTS.DEFAULT]:{}}[l],I={[_constants2.RADIO_VARIANTS.CARD]:{boxShadow:"none",outline:"2px solid ".concat(u," !important"),"& $icon path":{fill:v},"&:hover":{backgroundColor:A,outline:"2px solid ".concat(u," !important")},"&:active":{backgroundColor:g,outline:"2px solid ".concat(u," !important")}},[_constants2.RADIO_VARIANTS.BUTTON]:{},[_constants2.RADIO_VARIANTS.DEFAULT]:{}}[l],C={[_constants2.RADIO_VARIANTS.CARD]:{backgroundColor:i.Palette.light["03"],boxShadow:"none",outline:"2px solid transparent !important",pointerEvents:"none","& $name, & $description":{color:i.Palette.gray["04"]},"& $icon path":{fill:i.Palette.gray["04"]}},[_constants2.RADIO_VARIANTS.BUTTON]:{backgroundColor:i.Palette.light["01"],opacity:.5},[_constants2.RADIO_VARIANTS.DEFAULT]:{opacity:.5}}[l];return{root:{alignItems:"center !important",borderRadius:l===_constants2.RADIO_VARIANTS.CARD?"var(--UT-radioGroup-card-radius, 12px)":"var(--UT-radioGroup-row-radius, 8px)",display:"flex",flexDirection:"row",gap:SPACING_VALUES[s]||SPACING_VALUES[_constants.SPACING.MEDIUM],minHeight:"var(--UT-radioGroup-row-min-height, 24px)",overflow:l===_constants2.RADIO_VARIANTS.CARD?"visible":"hidden",...l!==_constants2.RADIO_VARIANTS.DEFAULT&&{padding:"var(--UT-radioGroup-row-padding-y, 12px) var(--UT-radioGroup-row-padding-x, 16px)"},...c?C:d?I:x},radioCircleContainer:{borderRadius:"50%",overflow:"hidden",padding:3,"&:hover":{backgroundColor:A},"&:active":{backgroundColor:g}},radioCircle:{alignItems:"center",border:"1px solid ".concat(i.Palette.light["05"]),borderRadius:"50%",display:"flex",flexShrink:0,height:"var(--UT-radioGroup-control-size, 16px)",justifyContent:"center",width:"var(--UT-radioGroup-control-size, 16px)",...d&&{backgroundColor:h,borderColor:h}},radioDot:{backgroundColor:i.Palette.light["01"],borderRadius:"50%",height:"var(--UT-radioGroup-control-dot-size, 8px)",width:"var(--UT-radioGroup-control-dot-size, 8px)"},cardRadio:{alignItems:"center",border:"1px solid transparent",borderRadius:"50%",display:"flex",flexShrink:0,height:"var(--UT-radioGroup-control-size, 16px)",justifyContent:"center",width:"var(--UT-radioGroup-control-size, 16px)",...getCardRadioColors({accent04:h,disabled:c,selected:d,theme:i})},content:{alignItems:"center",display:"flex",flexDirection:p?"row-reverse":"row",gap:SPACING_VALUES[s]||SPACING_VALUES[_constants.SPACING.MEDIUM],marginRight:"auto"},contentContainer:{display:"flex",flexDirection:"column",gap:"var(--UT-radioGroup-content-gap, 4px)"},titleAndTooltip:{alignItems:"center",display:"flex",gap:"var(--gap-xs, 4px)"},tooltip:{display:"flex"},icon:{flexShrink:0,height:"36px",width:"36px"},iconImage:{borderRadius:"50%",flexShrink:0,height:"36px",objectFit:"cover",width:"36px"},infoIcon:{flexShrink:0},name:{},description:{}}};exports.retrieveStyle=retrieveStyle;
|
|
@@ -1,56 +1,58 @@
|
|
|
1
1
|
# UTCheckList
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Descripción
|
|
4
4
|
|
|
5
|
-
`UTCheckList`
|
|
5
|
+
`UTCheckList` es un componente personalizable que renderiza una lista de checkboxes, permitiendo a los usuarios seleccionar múltiples opciones de una lista. Soporta funcionalidades como "seleccionar todos", estado indeterminado, mensaje de error y opciones dinámicas. El checkbox de "Seleccionar todos" solo afecta a las opciones que no están deshabilitadas. Además, permite agrupar opciones por categoría, mostrando primero las que no tienen categoría.
|
|
6
6
|
|
|
7
7
|
## Props
|
|
8
8
|
|
|
9
|
-
|
|
|
10
|
-
|
|
|
11
|
-
| actions | object | |
|
|
12
|
-
| classNames | objectOf(string) | |
|
|
13
|
-
| CustomRow | elementType | |
|
|
14
|
-
| disabled | bool | false |
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
|
|
|
19
|
-
|
|
|
20
|
-
|
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
| disabled
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
9
|
+
| Nombre | Tipo | Default | Descripción |
|
|
10
|
+
| ------------------ | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
|
11
|
+
| actions | object | | Acciones a renderizar dentro de `UTFieldLabel`. |
|
|
12
|
+
| classNames | objectOf(string) | | Nombres de clase personalizados para distintos elementos del checklist (`root`, `header`, `checkboxesContainer`, `item`, `selectAll`). |
|
|
13
|
+
| CustomRow | elementType | | Componente custom para renderizar el contenido de cada checkbox. |
|
|
14
|
+
| disabled | bool | false | Deshabilita todos los checkboxes del checklist cuando es `true`. |
|
|
15
|
+
| error | string | | Mensaje de error a mostrar. |
|
|
16
|
+
| horizontalSpacing | string | medium | Espaciado horizontal entre el checkbox y el título. |
|
|
17
|
+
| isSimple | bool | false | Simplifica la selección para permitir marcar un solo checkbox a la vez. |
|
|
18
|
+
| onChange | func.isRequired | | Función a llamar cuando cambia la selección. |
|
|
19
|
+
| options | arrayOf(shape) | | Array de opciones a mostrar como checkboxes. Ver [Objeto Option](#objeto-option). |
|
|
20
|
+
| required | bool | false | Indica si el checklist es obligatorio. |
|
|
21
|
+
| reversed | bool | false | Si es `true`, invierte el orden del título y el checkbox. |
|
|
22
|
+
| selectAllLabel | string | | Etiqueta para el checkbox de "Seleccionar todos". |
|
|
23
|
+
| showSelectAll | bool | true | Determina si se muestra el checkbox de "Seleccionar todos". |
|
|
24
|
+
| title | string | | Título del checklist. |
|
|
25
|
+
| value | arrayOf(string) | [] | Array de valores seleccionados. |
|
|
26
|
+
| variant | string | | Variante visual del checklist (`default`, `button` o `card`, según lo soportado por `UTCheckbox`). |
|
|
27
|
+
| verticalSpacing | string | medium | Espaciado vertical entre los items. |
|
|
28
|
+
|
|
29
|
+
### Objeto Option
|
|
30
|
+
|
|
31
|
+
El prop `options` es un array de objetos. Cada campo del objeto se reenvía al `UTCheckbox` correspondiente cuando aplica (por ejemplo `description`, `tooltip` e `icon` solo tienen efecto visual en la variante `card`):
|
|
32
|
+
|
|
33
|
+
| Nombre | Tipo | Descripción |
|
|
34
|
+
| ----------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
|
|
35
|
+
| category | string | (Opcional) Categoría bajo la cual se agrupa la opción. Sin categoría, la opción aparece sin agrupar arriba. |
|
|
36
|
+
| checked | bool | Indica si la opción está marcada. |
|
|
37
|
+
| description | string | (Opcional) Texto secundario bajo el título. **Solo tiene efecto en la variante `card`.** |
|
|
38
|
+
| disabled | bool | Indica si la opción está deshabilitada. |
|
|
39
|
+
| icon | string \| elementType \| `{ src, alt }` | (Opcional) Ícono de la opción. En variantes `default`/`button` es el nombre de un ícono de `UTIcon`. En la variante `card` admite además un componente custom o un objeto `{ src, alt }` para una imagen. |
|
|
40
|
+
| name | string | Etiqueta a mostrar para la opción. |
|
|
41
|
+
| tooltip | string | (Opcional) Texto de ayuda junto al título. **Solo tiene efecto en la variante `card`.** |
|
|
42
|
+
| value | string | Valor de la opción. |
|
|
43
|
+
|
|
44
|
+
## Uso
|
|
45
|
+
|
|
46
|
+
### Ejemplo básico
|
|
45
47
|
|
|
46
48
|
```jsx
|
|
47
49
|
import React from 'react';
|
|
48
50
|
import UTCheckList from './UTCheckList';
|
|
49
51
|
|
|
50
52
|
const options = [
|
|
51
|
-
{ name: '
|
|
52
|
-
{ name: '
|
|
53
|
-
{ name: '
|
|
53
|
+
{ name: 'Opción 1', value: '1' },
|
|
54
|
+
{ name: 'Opción 2', value: '2' },
|
|
55
|
+
{ name: 'Opción 3', value: '3', disabled: true, checked: true }
|
|
54
56
|
];
|
|
55
57
|
|
|
56
58
|
const Example = () => {
|
|
@@ -58,12 +60,12 @@ const Example = () => {
|
|
|
58
60
|
|
|
59
61
|
return (
|
|
60
62
|
<UTCheckList
|
|
61
|
-
error="
|
|
62
|
-
title="
|
|
63
|
+
error="Selecciona al menos una opción"
|
|
64
|
+
title="Selecciona opciones"
|
|
63
65
|
onChange={setSelectedOptions}
|
|
64
66
|
options={options}
|
|
65
67
|
required
|
|
66
|
-
selectAllLabel="
|
|
68
|
+
selectAllLabel="Seleccionar todos"
|
|
67
69
|
value={selectedOptions}
|
|
68
70
|
/>
|
|
69
71
|
);
|
|
@@ -72,17 +74,17 @@ const Example = () => {
|
|
|
72
74
|
export default Example;
|
|
73
75
|
```
|
|
74
76
|
|
|
75
|
-
###
|
|
77
|
+
### Ejemplo categorizado
|
|
76
78
|
|
|
77
79
|
```jsx
|
|
78
80
|
import React from 'react';
|
|
79
81
|
import UTCheckList from './UTCheckList';
|
|
80
82
|
|
|
81
83
|
const options = [
|
|
82
|
-
{ name: '
|
|
83
|
-
{ name: '
|
|
84
|
-
{ name: '
|
|
85
|
-
{ name: '
|
|
84
|
+
{ name: 'Opción 1', value: '1' },
|
|
85
|
+
{ name: 'Opción 2', value: '2', category: 'Grupo A' },
|
|
86
|
+
{ name: 'Opción 3', value: '3', category: 'Grupo B', disabled: true },
|
|
87
|
+
{ name: 'Opción 4', value: '4', category: 'Grupo A' }
|
|
86
88
|
];
|
|
87
89
|
|
|
88
90
|
const Example = () => {
|
|
@@ -90,11 +92,11 @@ const Example = () => {
|
|
|
90
92
|
|
|
91
93
|
return (
|
|
92
94
|
<UTCheckList
|
|
93
|
-
error="
|
|
94
|
-
title="
|
|
95
|
+
error="Selecciona al menos una opción"
|
|
96
|
+
title="Checklist categorizado"
|
|
95
97
|
onChange={setSelectedOptions}
|
|
96
98
|
options={options}
|
|
97
|
-
selectAllLabel="
|
|
99
|
+
selectAllLabel="Seleccionar todos"
|
|
98
100
|
value={selectedOptions}
|
|
99
101
|
/>
|
|
100
102
|
);
|
|
@@ -103,32 +105,60 @@ const Example = () => {
|
|
|
103
105
|
export default Example;
|
|
104
106
|
```
|
|
105
107
|
|
|
106
|
-
###
|
|
108
|
+
### Ejemplo con variante `card`
|
|
107
109
|
|
|
108
110
|
```jsx
|
|
109
111
|
import React from 'react';
|
|
110
112
|
import UTCheckList from './UTCheckList';
|
|
111
113
|
|
|
112
|
-
const
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
114
|
+
const options = [
|
|
115
|
+
{
|
|
116
|
+
name: 'Plan Residencial',
|
|
117
|
+
value: '1',
|
|
118
|
+
icon: 'IconHome',
|
|
119
|
+
description: 'Cubre el consumo de un hogar estándar',
|
|
120
|
+
tooltip: 'Ideal para tu hogar'
|
|
121
|
+
},
|
|
122
|
+
{ name: 'Plan Comercial', value: '2', icon: 'IconBuildingStore', description: 'Pensado para pequeños comercios' }
|
|
123
|
+
];
|
|
124
|
+
|
|
125
|
+
const Example = () => {
|
|
126
|
+
const [selectedOptions, setSelectedOptions] = React.useState([]);
|
|
127
|
+
|
|
128
|
+
return (
|
|
129
|
+
<UTCheckList
|
|
130
|
+
title="Selecciona un plan"
|
|
131
|
+
onChange={setSelectedOptions}
|
|
132
|
+
options={options}
|
|
133
|
+
value={selectedOptions}
|
|
134
|
+
variant="card"
|
|
135
|
+
/>
|
|
136
|
+
);
|
|
116
137
|
};
|
|
117
138
|
|
|
139
|
+
export default Example;
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
### Ejemplo con estilos personalizados
|
|
143
|
+
|
|
144
|
+
```jsx
|
|
145
|
+
import React from 'react';
|
|
146
|
+
import UTCheckList from './UTCheckList';
|
|
147
|
+
|
|
118
148
|
const Example = () => {
|
|
119
149
|
const options = [
|
|
120
|
-
{ name: '
|
|
121
|
-
{ name: '
|
|
150
|
+
{ name: 'Opción 1', value: '1' },
|
|
151
|
+
{ name: 'Opción 2', value: '2' }
|
|
122
152
|
];
|
|
123
153
|
|
|
124
154
|
const [selectedOptions, setSelectedOptions] = React.useState([]);
|
|
125
155
|
|
|
126
156
|
return (
|
|
127
157
|
<UTCheckList
|
|
128
|
-
title="
|
|
158
|
+
title="Checklist con estilos personalizados"
|
|
129
159
|
onChange={setSelectedOptions}
|
|
130
160
|
options={options}
|
|
131
|
-
|
|
161
|
+
classNames={{ root: 'custom-root', checkboxesContainer: 'custom-container', header: 'custom-header' }}
|
|
132
162
|
value={selectedOptions}
|
|
133
163
|
/>
|
|
134
164
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useEffect,useCallback,useMemo}from"react";import{arrayOf,bool,elementType,func,objectOf,shape,string}from"prop-types";import{buttonTypes}from"../../../../types/buttonTypes";import{formatErrorToValidation}from"../../../UTValidation/utils";import{SPACING,BUTTON_VARIANT}from"../../../UTCheckbox/versions/V1/constants";import UTCheckBox from"../../../UTCheckbox";import UTFieldLabel from"../../../UTFieldLabel";import UTLabel from"../../../UTLabel";import UTValidation from"../../../UTValidation";import{isChecked,convertIfIsString,getPropValueBasedOnVariant}from"./utils";import styles from"./styles.module.scss";import{NO_CATEGORY}from"./constants";const UTCheckList=e=>{let{actions:t,classNames:a={},CustomRow:o,dataTestId:s,disabled:
|
|
1
|
+
import React,{useEffect,useCallback,useMemo}from"react";import{arrayOf,bool,elementType,func,objectOf,oneOfType,shape,string}from"prop-types";import{buttonTypes}from"../../../../types/buttonTypes";import{formatErrorToValidation}from"../../../UTValidation/utils";import{SPACING,BUTTON_VARIANT}from"../../../UTCheckbox/versions/V1/constants";import UTCheckBox from"../../../UTCheckbox";import UTFieldLabel from"../../../UTFieldLabel";import UTLabel from"../../../UTLabel";import UTValidation from"../../../UTValidation";import{isChecked,convertIfIsString,getPropValueBasedOnVariant}from"./utils";import styles from"./styles.module.scss";import{NO_CATEGORY}from"./constants";const UTCheckList=e=>{let{actions:t,classNames:a={},CustomRow:o,dataTestId:s,disabled:n,error:r,horizontalSpacing:i="medium",isSimple:l=!1,itemDataTestId:c,onChange:m=()=>{},options:d,required:u,reversed:p,selectAllLabel:T,showSelectAll:g=!0,title:f,value:v=null,variant:b,verticalSpacing:C="medium"}=e;const y=getPropValueBasedOnVariant(b,p,!0),h=getPropValueBasedOnVariant(b,C,SPACING.SMALL)===SPACING.SMALL?styles.smallVerticalSpacing:"",O=useMemo(()=>r&&formatErrorToValidation(r,{withIcon:!1}),[r]);useEffect(()=>{if(v){const e=convertIfIsString(v);JSON.stringify(e)!==JSON.stringify(v)&&m(e)}},[v,m]);const N=useMemo(()=>{const e=d.reduce((e,t)=>{const a=t.category||NO_CATEGORY;return e[a]||(e[a]=[]),e[a].push(t),e},{NO_CATEGORY:[]});return Object.entries(e).filter(e=>{let[,t]=e;return t.length>0}).sort((e,t)=>{let[a]=e,[o]=t;return a===NO_CATEGORY?-1:o===NO_CATEGORY?1:0})},[d]),A=useMemo(()=>d.filter(e=>!e.disabled),[d]),R=useMemo(()=>A.every(e=>null==v?void 0:v.includes(e.value)),[A,v]),U=useMemo(()=>A.some(e=>null==v?void 0:v.includes(e.value))&&!R,[A,v,R]),k=useCallback(e=>{if(l)m([e]);else{var t;const a=null!=v&&null!==(t=v.some)&&void 0!==t&&t.call(v,t=>t===e)?v.filter(t=>t!==e):[...v||[],e];m(a)}},[v,m,l]),E=useCallback(()=>{m(R?[]:A.map(e=>e.value))},[R,A,m]);return React.createElement("div",{className:"".concat(styles.container," ").concat(h," ").concat(a.root),"data-testid":s},(f||O)&&React.createElement("div",{className:"".concat(styles.headerContainer," ").concat(a.header)},f&&React.createElement(UTFieldLabel,{actions:t,required:u},f),O&&React.createElement(UTValidation,{validationData:O})),React.createElement("div",{className:"".concat(styles.checkboxesContainer," ").concat(h," ").concat(b===BUTTON_VARIANT&&styles.buttonVariant," ").concat(a.checkboxesContainer)},g&&!l&&React.createElement(UTCheckBox,{className:a.selectAll,dataTestId:c?"".concat(c,".selectAll"):null,disabled:n,indeterminate:U,onChange:E,reversed:y,spacing:i,title:T,value:R,variant:b,version:"V1"}),N.map((e,t)=>{let[s,r]=e;const m="".concat(s,"-").concat(r.map(e=>e.value).join("-"));return React.createElement("div",{className:"".concat(styles.categoryContainer," ").concat(h),key:m},s!==NO_CATEGORY&&React.createElement(UTLabel,{className:styles.categoryTitle,colorTheme:"gray",variant:"small",weight:"medium"},s.toUpperCase()),r.map((e,s)=>React.createElement(UTCheckBox,{classNames:a.item,CustomComponent:o?React.createElement(o,{item:e,isChecked:isChecked(e,v)}):void 0,dataTestId:c?"".concat(c,".category_").concat(t,".").concat(s):null,description:e.description,disabled:e.disabled||n,isSimple:l,key:e.value,icon:e.icon,onChange:()=>k(e.value),reversed:l?y:p,spacing:i,title:e.name,tooltip:e.tooltip,value:isChecked(e,v),variant:b,version:"V1"})))})))};UTCheckList.propTypes={actions:arrayOf(buttonTypes),classNames:objectOf(string),CustomRow:elementType,dataTestId:string,disabled:bool,error:string,horizontalSpacing:string,isSimple:bool,itemDataTestId:string,onChange:func,options:arrayOf(shape({category:string,checked:bool,description:string,disabled:bool,icon:oneOfType([string,elementType,shape({alt:string,src:string})]),name:string,tooltip:string,value:string})),required:bool,reversed:bool,selectAllLabel:string,showSelectAll:bool,title:string,value:arrayOf(string),variant:string,verticalSpacing:string};export default UTCheckList;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const CHECKED_ICON="IconCheck";export const INDETERMINATE_ICON="IconMinus";export const SPACING={SMALL:"small",MEDIUM:"medium"};export const BUTTON_VARIANT="button";
|
|
1
|
+
export const CHECKED_ICON="IconCheck";export const INDETERMINATE_ICON="IconMinus";export const SPACING={SMALL:"small",MEDIUM:"medium"};export const BUTTON_VARIANT="button";export const CARD_VARIANT="card";export const CARD_ICON_SIZE=16;export const CARD_ICON_AREA_SIZE=32;export const CARD_ICON_AREA_RADIUS="var(--UT-checkbox-card-icon-area-radius, 8px)";export const ICON_CONTENT_TYPES={UT_ICON:"utIcon",IMAGE:"image",COMPONENT:"component"};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{
|
|
1
|
+
import React,{useMemo}from"react";import{arrayOf,bool,elementType,func,objectOf,oneOfType,shape,string}from"prop-types";import{shouldShowErrors}from"@widergy/web-utils/lib/form";import{mergeMultipleClassNames}from"../../../../utils/classesUtils";import UTFieldLabel from"../../../UTFieldLabel";import UTIcon from"../../../UTIcon";import UTLabel from"../../../UTLabel";import UTTooltip from"../../../UTTooltip";import WithTheme from"../../../WithTheme";import UTTouchableWithoutFeedback from"../../../UTTouchableWithoutFeedback";import{buttonTypes}from"../../../../types/buttonTypes";import{metaPropTypes}from"../../../../types/formTypes";import{formatErrorToValidation}from"../../../UTValidation/utils";import UTValidation from"../../../UTValidation";import{BUTTON_VARIANT,CARD_ICON_AREA_RADIUS,CARD_ICON_AREA_SIZE,CARD_ICON_SIZE,CARD_VARIANT,CHECKED_ICON,ICON_CONTENT_TYPES,INDETERMINATE_ICON}from"./constants";import{retrieveStyle}from"./theme";import{getIconContentType}from"./utils";import styles from"./styles.module.scss";const UTCheckbox=e=>{let{actions:t,checkboxDataTestId:a,classes:o,classNames:r,CustomComponent:c,dataTestId:n,description:i,disabled:l,icon:s,indeterminate:m,isSimple:T=!1,meta:d,onChange:p=()=>{},required:E,title:N,tooltip:R,value:u=!1,variant:C="default",withUpperTitle:I}=e;const h=useMemo(()=>mergeMultipleClassNames(o,r),[r,o]),b=C===CARD_VARIANT,U=useMemo(()=>m?INDETERMINATE_ICON:!0===u?CHECKED_ICON:"",[m,u]),f=()=>{!l&&p&&p(!u)},g=!0===u&&C===BUTTON_VARIANT,A=d&&shouldShowErrors(d)&&d.error||"",_=formatErrorToValidation(A);return b?React.createElement(React.Fragment,null,I&&React.createElement(UTFieldLabel,{actions:t,required:E},N),React.createElement(UTTouchableWithoutFeedback,{className:h.container,dataTestId:n,disabled:l,onMouseDown:f},React.createElement("div",{className:h.content},(()=>{if(!s)return null;const e=getIconContentType(s);if(e===ICON_CONTENT_TYPES.IMAGE)return React.createElement("img",{alt:s.alt||"",className:h.iconImage,src:s.src});if(e===ICON_CONTENT_TYPES.COMPONENT){const e=s;return React.createElement(e,{className:h.icon})}return React.createElement(UTIcon,{area:!0,areaBackground:"var(--light01)",areaBorderColor:"var(--light04)",areaRadius:CARD_ICON_AREA_RADIUS,areaSize:CARD_ICON_AREA_SIZE,colorTheme:"dark",name:s,size:CARD_ICON_SIZE})})(),React.createElement("div",{className:h.contentContainer},R?React.createElement("div",{className:h.titleAndTooltip},React.createElement(UTLabel,{className:h.name,colorTheme:"dark"},N),React.createElement(UTTooltip,{content:R},React.createElement("span",{className:h.tooltip},React.createElement(UTIcon,{className:h.infoIcon,colorTheme:u?"accent":l?"gray":"dark",name:"IconHelp",size:20})))):React.createElement(UTLabel,{className:h.name,colorTheme:"dark"},N),i&&React.createElement(UTLabel,{className:h.description,colorTheme:"gray",variant:"body"},i))),React.createElement("div",{className:h.boxContainer,"data-testid":a},React.createElement("div",{className:h.box},React.createElement("div",{className:h.iconContainer},U&&React.createElement(UTIcon,{colorTheme:"light",name:m?"IconMinus":"IconCheck",size:10})))),A&&React.createElement(UTValidation,{className:h.validation,validationData:_}))):React.createElement(React.Fragment,null,I&&React.createElement(UTFieldLabel,{actions:t,required:E},N),React.createElement(UTTouchableWithoutFeedback,{className:h.container,dataTestId:n,disabled:l,onMouseDown:f},React.createElement("div",{className:h.content},React.createElement("div",{className:h.boxContainer,"data-testid":a},T?React.createElement(UTIcon,{name:"IconCheck",shade:"04",colorTheme:"accent",className:u?void 0:styles.hidden}):React.createElement("div",{className:h.box},React.createElement("div",{className:h.iconContainer},U&&React.createElement(UTIcon,{colorTheme:"light",name:m?"IconMinus":"IconCheck",size:10})))),c||React.createElement(UTFieldLabel,{className:h.title,highlighted:g,icon:s,required:E},N)),A&&React.createElement(UTValidation,{className:h.validation,validationData:_})))};UTCheckbox.propTypes={actions:arrayOf(buttonTypes),checkboxDataTestId:string,classes:objectOf(string),classNames:objectOf(string),CustomComponent:elementType,dataTestId:string,description:string,disabled:bool,icon:oneOfType([string,elementType,shape({alt:string,src:string})]),indeterminate:bool,isSimple:bool,meta:metaPropTypes.isRequired,onChange:func,required:bool,title:string,tooltip:string,value:bool,variant:string,withUpperTitle:bool};export default WithTheme(retrieveStyle)(UTCheckbox);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{shouldShowErrors}from"@widergy/web-utils/lib/form";import{BUTTON_VARIANT,SPACING}from"./constants";const MEDIUM_SPACING="var(--UT-checkbox-gap-md, 8px)",SMALL_SPACING="var(--UT-checkbox-gap-sm, 4px)",baseCheckBoxTheme=e=>({container:{alignItems:"center !important",display:"flex",flexWrap:"wrap",gap:"0px"},content:{display:"flex",flexDirection:"row",alignItems:"center"},iconContainer:{border:"1px solid ".concat(e.Palette.light["05"]),borderRadius:"var(--UT-checkbox-radius, 4px)",display:"flex",height:"var(--UT-checkbox-size, 16px)",placeContent:"center",placeItems:"center",width:"var(--UT-checkbox-size, 16px)"},box:{borderRadius:25,overflow:"hidden",padding:3},validation:{flexBasis:"100%"}}),
|
|
1
|
+
import{shouldShowErrors}from"@widergy/web-utils/lib/form";import{BUTTON_VARIANT,CARD_VARIANT,SPACING}from"./constants";const MEDIUM_SPACING="var(--UT-checkbox-gap-md, 8px)",SMALL_SPACING="var(--UT-checkbox-gap-sm, 4px)",baseCheckBoxTheme=e=>({container:{alignItems:"center !important",display:"flex",flexWrap:"wrap",gap:"0px"},content:{display:"flex",flexDirection:"row",alignItems:"center"},iconContainer:{border:"1px solid ".concat(e.Palette.light["05"]),borderRadius:"var(--UT-checkbox-radius, 4px)",display:"flex",height:"var(--UT-checkbox-size, 16px)",placeContent:"center",placeItems:"center",width:"var(--UT-checkbox-size, 16px)"},box:{borderRadius:25,overflow:"hidden",padding:3},validation:{flexBasis:"100%"},contentContainer:{display:"flex",flexDirection:"column",gap:"var(--UT-checkbox-content-gap, 4px)"},titleAndTooltip:{alignItems:"center",display:"flex",gap:"var(--gap-xs, 4px)"},tooltip:{display:"flex"},icon:{flexShrink:0,height:"36px",width:"36px"},iconImage:{borderRadius:"50%",flexShrink:0,height:"36px",objectFit:"cover",width:"36px"},infoIcon:{flexShrink:0},name:{},description:{}}),getCardTheme=e=>{var t,o,a,n;let{theme:r,error:i}=e;const l=(null===(t=r.Palette.actions)||void 0===t?void 0:t.accent["01"])||r.Palette.accent["01"],c=(null===(o=r.Palette.actions)||void 0===o?void 0:o.accent["02"])||r.Palette.accent["02"],d=(null===(a=r.Palette.actions)||void 0===a?void 0:a.accent["03"])||r.Palette.accent["03"],s=(null===(n=r.Palette.actions)||void 0===n?void 0:n.accent["05"])||r.Palette.accent["05"];return{base:{backgroundColor:r.Palette.light["01"],boxShadow:"none",outline:"1px solid ".concat(i?r.Palette.error["04"]:r.Palette.light["04"]," !important"),"&:hover":{backgroundColor:i?r.Palette.error["01"]:r.Palette.light["03"]},"&:active":{backgroundColor:i?r.Palette.error["02"]:r.Palette.light["04"],"& $description":{color:r.Palette.gray["03"]}}},selected:{boxShadow:"none",outline:"2px solid ".concat(d," !important"),"& $icon path":{fill:s},"&:hover":{backgroundColor:l,outline:"2px solid ".concat(d," !important")},"&:active":{backgroundColor:c,outline:"2px solid ".concat(d," !important")}},disabled:{backgroundColor:r.Palette.light["03"],boxShadow:"none",outline:"2px solid transparent !important",pointerEvents:"none","& $name, & $description":{color:r.Palette.gray["04"]},"& $icon path":{fill:r.Palette.gray["04"]}}}},getCardCheckboxColors=e=>{var t;let{isMarked:o,disabled:a,theme:n}=e;const r=(null===(t=n.Palette.actions)||void 0===t?void 0:t.accent["04"])||n.Palette.accent["04"],i=n.Palette.gray["04"];return{backgroundColor:o?a?i:r:"transparent",borderColor:o?a?i:r:n.Palette.light["05"]}},conditionalStyles=e=>{var t,o,a,n,r;let{value:i,indeterminate:l,reversed:c,spacing:d,variant:s,theme:p,disabled:h,error:x}=e;const g=d===SPACING.SMALL?SMALL_SPACING:MEDIUM_SPACING,b=s===CARD_VARIANT,v=b&&getCardTheme({theme:p,error:x}),u=!0===i||l;return{container:{...c&&{flexDirection:"row-reverse",justifyContent:"space-between"},...h&&!b&&{opacity:.5},...s===BUTTON_VARIANT&&{borderRadius:"8px",padding:"small"===d?"8px 12px":"12px 16px",backgroundColor:x?p.Palette.error["01"]:"transparent","&:active, &:hover":{transition:"background-color 0.1s ease-in-out"},"&:active":{backgroundColor:x?p.Palette.error["02"]:p.Palette.light["04"]},"&:hover":{backgroundColor:x?p.Palette.error["02"]:p.Palette.light["03"]}},...b&&{borderRadius:"var(--UT-checkbox-card-radius, 12px)",gap:g,minHeight:"var(--UT-checkbox-card-min-height, 24px)",overflow:"visible",padding:"var(--UT-checkbox-card-padding-y, 12px) var(--UT-checkbox-card-padding-x, 16px)",...h?v.disabled:i?v.selected:v.base}},content:{...c&&{flexDirection:"row-reverse",justifyContent:"space-between",...s===BUTTON_VARIANT&&{width:"100%"}},...b&&{gap:g,marginRight:"auto"}},iconContainer:{...x&&{borderColor:p.Palette.error["04"]},...u&&{backgroundColor:(null===(t=p.Palette.actions)||void 0===t?void 0:t.accent["04"])||p.Palette.accent["04"],borderColor:(null===(o=p.Palette.actions)||void 0===o?void 0:o.accent["04"])||p.Palette.accent["04"]},...b&&getCardCheckboxColors({isMarked:u,disabled:h,theme:p})},boxContainer:{...b?{}:c?{marginLeft:g,marginRight:0}:{marginRight:g},...s!==BUTTON_VARIANT&&!b&&{"&:active, &:hover":{"& $box":{borderColor:x?p.Palette.error["03"]:(null===(a=p.Palette.actions)||void 0===a?void 0:a.accent["03"])||p.Palette.accent["03"],borderWidth:1,overflow:"hidden",transition:"background-color 0.1s ease-in-out"}},"&:active":{"& $box":{backgroundColor:x?p.Palette.error["02"]:(null===(n=p.Palette.actions)||void 0===n?void 0:n.accent["02"])||p.Palette.accent["02"]}},"&:hover":{"& $box":{backgroundColor:x?p.Palette.error["01"]:(null===(r=p.Palette.actions)||void 0===r?void 0:r.accent["01"])||p.Palette.accent["01"]}}}},title:s===BUTTON_VARIANT&&{userSelect:"none"}}};export const retrieveStyle=e=>{let{value:t,disabled:o,indeterminate:a,reversed:n,spacing:r,theme:i,variant:l,meta:c}=e;const d=baseCheckBoxTheme(i),s=c&&shouldShowErrors(c),{container:p,content:h,iconContainer:x,boxContainer:g,title:b}=conditionalStyles({value:t,disabled:o,indeterminate:a,reversed:n,spacing:r,variant:l,theme:i,error:s});return{box:d.box,content:{...d.content,...h},container:{...d.container,...p},iconContainer:{...d.iconContainer,...x},boxContainer:g,title:b,validation:d.validation,contentContainer:d.contentContainer,titleAndTooltip:d.titleAndTooltip,tooltip:d.tooltip,icon:d.icon,iconImage:d.iconImage,infoIcon:d.infoIcon,name:d.name,description:d.description}};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{isUTIcon}from"../../../../utils/componentUtils";import{ICON_CONTENT_TYPES}from"./constants";export const getIconContentType=T=>isUTIcon(T)?ICON_CONTENT_TYPES.UT_ICON:T&&"object"==typeof T&&T.src?ICON_CONTENT_TYPES.IMAGE:ICON_CONTENT_TYPES.COMPONENT;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{SPACING}from"../../constants";import{RADIO_VARIANTS}from"./constants";const SPACING_VALUES={[SPACING.SMALL]:"var(--UT-radioGroup-control-gap-sm, 4px)",[SPACING.MEDIUM]:"var(--UT-radioGroup-control-gap-md, 8px)"},getCardRadioColors=o=>{let{accent04:t,disabled:e,selected:r,theme:a}=o;const i=a.Palette.gray["04"];return{backgroundColor:r?e?i:t:"transparent",borderColor:e?i:
|
|
1
|
+
import{SPACING}from"../../constants";import{RADIO_VARIANTS}from"./constants";const SPACING_VALUES={[SPACING.SMALL]:"var(--UT-radioGroup-control-gap-sm, 4px)",[SPACING.MEDIUM]:"var(--UT-radioGroup-control-gap-md, 8px)"},getCardRadioColors=o=>{let{accent04:t,disabled:e,selected:r,theme:a}=o;const i=a.Palette.gray["04"];return{backgroundColor:r?e?i:t:"transparent",borderColor:r?e?i:t:a.Palette.light["05"]}};export const retrieveStyle=o=>{var t,e,r,a,i;let{theme:n,variant:l=RADIO_VARIANTS.DEFAULT,disabled:d,selected:c,spacing:p=SPACING.MEDIUM,reversed:A}=o;const s=(null===(t=n.Palette.actions)||void 0===t?void 0:t.accent["01"])||n.Palette.accent["01"],g=(null===(e=n.Palette.actions)||void 0===e?void 0:e.accent["02"])||n.Palette.accent["02"],u=(null===(r=n.Palette.actions)||void 0===r?void 0:r.accent["03"])||n.Palette.accent["03"],h=(null===(a=n.Palette.actions)||void 0===a?void 0:a.accent["04"])||n.Palette.accent["04"],I=(null===(i=n.Palette.actions)||void 0===i?void 0:i.accent["05"])||n.Palette.accent["05"],x={[RADIO_VARIANTS.CARD]:{backgroundColor:n.Palette.light["01"],boxShadow:"none",outline:"1px solid ".concat(n.Palette.light["04"]," !important"),"&:hover":{backgroundColor:n.Palette.light["03"]},"&:active":{backgroundColor:n.Palette.light["04"],"& $description":{color:n.Palette.gray["03"]}}},[RADIO_VARIANTS.BUTTON]:{backgroundColor:n.Palette.light["01"],"&:hover":{backgroundColor:n.Palette.light["03"]},"&:active":{backgroundColor:n.Palette.light["04"]}},[RADIO_VARIANTS.DEFAULT]:{}}[l],v={[RADIO_VARIANTS.CARD]:{boxShadow:"none",outline:"2px solid ".concat(u," !important"),"& $icon path":{fill:I},"&:hover":{backgroundColor:s,outline:"2px solid ".concat(u," !important")},"&:active":{backgroundColor:g,outline:"2px solid ".concat(u," !important")}},[RADIO_VARIANTS.BUTTON]:{},[RADIO_VARIANTS.DEFAULT]:{}}[l],C={[RADIO_VARIANTS.CARD]:{backgroundColor:n.Palette.light["03"],boxShadow:"none",outline:"2px solid transparent !important",pointerEvents:"none","& $name, & $description":{color:n.Palette.gray["04"]},"& $icon path":{fill:n.Palette.gray["04"]}},[RADIO_VARIANTS.BUTTON]:{backgroundColor:n.Palette.light["01"],opacity:.5},[RADIO_VARIANTS.DEFAULT]:{opacity:.5}}[l];return{root:{alignItems:"center !important",borderRadius:l===RADIO_VARIANTS.CARD?"var(--UT-radioGroup-card-radius, 12px)":"var(--UT-radioGroup-row-radius, 8px)",display:"flex",flexDirection:"row",gap:SPACING_VALUES[p]||SPACING_VALUES[SPACING.MEDIUM],minHeight:"var(--UT-radioGroup-row-min-height, 24px)",overflow:l===RADIO_VARIANTS.CARD?"visible":"hidden",...l!==RADIO_VARIANTS.DEFAULT&&{padding:"var(--UT-radioGroup-row-padding-y, 12px) var(--UT-radioGroup-row-padding-x, 16px)"},...d?C:c?v:x},radioCircleContainer:{borderRadius:"50%",overflow:"hidden",padding:3,"&:hover":{backgroundColor:s},"&:active":{backgroundColor:g}},radioCircle:{alignItems:"center",border:"1px solid ".concat(n.Palette.light["05"]),borderRadius:"50%",display:"flex",flexShrink:0,height:"var(--UT-radioGroup-control-size, 16px)",justifyContent:"center",width:"var(--UT-radioGroup-control-size, 16px)",...c&&{backgroundColor:h,borderColor:h}},radioDot:{backgroundColor:n.Palette.light["01"],borderRadius:"50%",height:"var(--UT-radioGroup-control-dot-size, 8px)",width:"var(--UT-radioGroup-control-dot-size, 8px)"},cardRadio:{alignItems:"center",border:"1px solid transparent",borderRadius:"50%",display:"flex",flexShrink:0,height:"var(--UT-radioGroup-control-size, 16px)",justifyContent:"center",width:"var(--UT-radioGroup-control-size, 16px)",...getCardRadioColors({accent04:h,disabled:d,selected:c,theme:n})},content:{alignItems:"center",display:"flex",flexDirection:A?"row-reverse":"row",gap:SPACING_VALUES[p]||SPACING_VALUES[SPACING.MEDIUM],marginRight:"auto"},contentContainer:{display:"flex",flexDirection:"column",gap:"var(--UT-radioGroup-content-gap, 4px)"},titleAndTooltip:{alignItems:"center",display:"flex",gap:"var(--gap-xs, 4px)"},tooltip:{display:"flex"},icon:{flexShrink:0,height:"36px",width:"36px"},iconImage:{borderRadius:"50%",flexShrink:0,height:"36px",objectFit:"cover",width:"36px"},infoIcon:{flexShrink:0},name:{},description:{}}};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export default{base:{"size-12a":"4.5rem","size-13a":"7.5rem","size-16a":"12.5rem","size-full":"100%","size-0":"0rem","size-1":"0.125rem","size-2":"0.25rem","size-3":"0.5rem","size-4":"0.75rem","size-5":"1rem","size-6":"1.25rem","size-7":"1.5rem","size-8":"2rem","size-9":"2.5rem","size-10":"3rem","size-11":"3.5rem","size-12":"4rem","size-13":"6rem","size-14":"8rem","size-15":"10rem","size-16":"12rem","size-17":"14rem","size-18":"16rem","size-19":"20rem","spacing-0":"0rem","spacing-1":"0.125rem","spacing-2":"0.25rem","spacing-3":"0.5rem","spacing-4":"0.75rem","spacing-5":"1rem","spacing-6":"1.25rem","spacing-7":"1.5rem","spacing-8":"2rem","spacing-9":"2.5rem","spacing-10":"3rem","spacing-11":"3.5rem","spacing-12":"4rem","spacing-13":"6rem","spacing-14":"8rem","font-family":"Inter","font-size-100":"0.625rem","font-size-200":"0.75rem","font-size-300":"0.875rem","font-size-400":"1rem","font-size-500":"1.125rem","font-size-600":"1.25rem","font-size-650":"1.375rem","font-size-700":"1.5rem","font-size-800":"1.875rem","font-size-900":"2.5rem","font-size-1000":"3rem","font-size-1100":"4rem","font-weight-100":"100","font-weight-200":"200","font-weight-300":"300","font-weight-400":"400","font-weight-500":"500","font-weight-600":"600","font-weight-700":"700","font-weight-800":"800","font-weight-900":"900","font-lh-100":"1","font-lh-120":"1.2","font-lh-140":"1.4","font-lh-150":"1.5","font-lh-170":"1.7","legacy-font-lh-full":"100%","legacy-font-lh-100":"1.125rem","legacy-font-lh-120":"1.25rem","legacy-font-lh-140":"1.375rem","radius-100":"4px","radius-200":"8px","radius-300":"12px","radius-400":"16px","radius-500":"24px","radius-full":"9999px"},semantic:{"padding-3xs":"spacing-1","padding-2xs":"spacing-2","padding-xs":"spacing-3","padding-sm":"spacing-4","padding-md":"spacing-5","padding-lg":"spacing-7","padding-xl":"spacing-8","padding-2xl":"spacing-9","gap-2xs":"spacing-1","gap-xs":"spacing-2","gap-sm":"spacing-3","gap-md":"spacing-4","gap-lg":"spacing-5","gap-xl":"spacing-7","gap-2xl":"spacing-8","gap-3xl":"spacing-9","gap-control-sm":"spacing-2","gap-control-md":"spacing-3","font-heading-size-1":"font-size-700","font-heading-size-2":"font-size-650","font-heading-size-3":"font-size-600","font-heading-size-4":"font-size-500","font-heading-size-5":"font-size-400","font-heading-size-6":"font-size-500","font-body-size-xs":"font-size-100","font-body-size-sm":"font-size-200","font-body-size-md":"font-size-300","font-body-size-lg":"font-size-400","font-metric-size-sm":"font-size-300","font-metric-size-md":"font-size-400","font-metric-size-lg":"font-size-500","font-action-size-sm":"font-size-200","font-action-size-md":"font-size-300","font-label-size-sm":"font-size-200","font-label-size-md":"font-size-300","font-input-size":"font-size-400","font-weight-thin":"font-weight-100","font-weight-extralight":"font-weight-200","font-weight-light":"font-weight-300","font-weight-regular":"font-weight-400","font-weight-medium":"font-weight-500","font-weight-semibold":"font-weight-600","font-weight-bold":"font-weight-700","font-weight-extrabold":"font-weight-800","font-weight-black":"font-weight-900","font-lh-reset":"font-lh-100","font-lh-heading":"font-lh-120","font-lh-subheading":"font-lh-140","font-lh-body":"font-lh-140","font-lh-caption":"font-lh-170","legacy-font-lh-small":"legacy-font-lh-120","legacy-font-lh-xsmall":"legacy-font-lh-100","size-control-2xs":"size-5","size-control-xs":"size-7","size-control-sm":"size-8","size-control-md":"size-9","size-control-lg":"size-10","size-control-xl":"size-11","size-control-2xl":"size-12","size-control-3xl":"size-13","size-control-4xl":"size-13a","size-brand-logo-2xs":"size-11","size-brand-logo-xs":"size-12a","size-brand-logo-sm":"size-13a","size-brand-logo-md":"size-15","size-brand-logo-lg":"size-16a","size-icon-3xs":"size-4","size-icon-2xs":"size-5","size-icon-xs":"size-6","size-icon-md":"size-7","size-icon-lg":"size-8","size-icon-xl":"size-10","size-layout-3xs":"size-11","size-layout-2xs":"size-12","size-layout-sm":"size-15","size-layout-md":"size-18","size-layout-lg":"size-19","size-overlay-sm":"size-14","size-overlay-md":"size-16","size-overlay-lg":"size-18","size-overlay-xl":"size-19","size-overlay-2xl":"size-21","size-overlay-3xl":"size-23","size-overlay-full":"size-full","radius-sm":"radius-100","radius-md":"radius-200","radius-lg":"radius-300","radius-xl":"radius-500"},component:{"UT-field-gap":"gap-sm","UT-alert-padding-y":"padding-xs","UT-alert-padding-x":"padding-md","UT-alert-action-padding":"padding-xs","UT-alert-icon-size":"size-icon-xs","UT-alert-icon-margin":"padding-xs","UT-actionCard-radius":"radius-md","UT-actionCard-padding-md":"padding-md","UT-actionCard-padding-lg":"padding-lg","UT-actionCard-gap-sm":"gap-sm","UT-actionCard-gap-lg":"gap-lg","UT-actionCard-avatar-size":"size-control-2xl","UT-attachmentList-radius":"radius-md","UT-attachmentList-gap-xs":"gap-xs","UT-attachmentList-gap-sm":"gap-sm","UT-attachmentList-gap-lg":"gap-lg","UT-attachmentList-padding-md":"padding-md","UT-attachmentList-padding-lg":"padding-lg","UT-attachmentList-margin-sm":"padding-sm","UT-attachmentList-margin-md":"padding-md","UT-attachmentList-preview-size":"size-control-lg","UT-attachmentList-icon-area-radius":"radius-md","UT-baseInput-gap-md":"gap-sm","UT-baseInput-gap-sm":"gap-xs","UT-baseInput-padding-y-sm":"padding-2xs","UT-baseInput-padding-y-md":"padding-xs","UT-baseInput-padding-x-sm":"padding-xs","UT-baseInput-padding-x-md":"padding-sm","UT-baseInput-radius":"radius-md","UT-baseInput-adornment-size":"size-icon-xs","UT-breadcrumbs-padding-y":"padding-2xs","UT-breadcrumbs-padding-x":"padding-xs","UT-banner-buttons-gap":"gap-sm","UT-banner-gap-lg":"gap-xl","UT-banner-gap-md":"gap-lg","UT-banner-gap-sm":"gap-sm","UT-banner-icon-gap":"gap-md","UT-banner-icon-size-lg":"size-icon-md","UT-banner-icon-size-sm":"size-icon-xs","UT-banner-padding-lg":"padding-lg","UT-banner-padding-md":"padding-md","UT-banner-padding-x-sm":"padding-sm","UT-banner-padding-y-sm":"padding-xs","UT-banner-radius":"radius-md","UT-banner-text-gap":"gap-sm","UT-button-height-sm":"size-control-sm","UT-button-height-md":"size-control-md","UT-button-height-lg":"size-control-lg","UT-button-padding-xs":"padding-3xs","UT-button-padding-sm":"padding-2xs","UT-button-padding-md":"padding-xs","UT-button-padding-lg":"padding-sm","UT-button-gap-sm":"gap-xs","UT-button-gap-md":"gap-sm","UT-button-label-size":"font-label-size-md","UT-button-label-weight":"font-weight-600","UT-button-label-lh":"font-lh-reset","UT-button-radius":"radius-sm","UT-button-icon-size-sm":"size-icon-2xs","UT-button-icon-size-md":"initial","UT-button-icon-size-lg":"size-icon-xs","UT-button-icon-size-xl":"size-icon-md","UT-checkbox-size":"size-control-2xs","UT-checkbox-radius":"radius-sm","UT-checkbox-gap-sm":"gap-control-sm","UT-checkbox-gap-md":"gap-control-md","UT-checkList-gap-sm":"gap-sm","UT-checkList-gap-lg":"gap-lg","UT-checkList-padding-y":"padding-xs","UT-buttonGroup-padding":"padding-2xs","UT-buttonGroup-radius":"radius-md","UT-dataCategory-padding":"padding-md","UT-dataCategory-gap":"gap-lg","UT-dataCategory-title-gap":"gap-sm","UT-dataCategory-title-size":"font-body-size-sm","UT-dataCategory-title-weight":"font-weight-medium","UT-dataCategory-icon-size":"size-icon-xs","UT-dataElement-chevron-icon-size":"size-icon-xs","UT-dataElement-padding-md":"padding-md","UT-dataElement-padding-sm":"padding-xs","UT-dataElement-gap-md":"gap-lg","UT-dataElement-gap-sm":"gap-sm","UT-dataElement-content-gap-x":"gap-sm","UT-dataElement-content-gap-y":"gap-sm","UT-dataElement-icon-size":"size-icon-md","UT-dataElement-title-size":"font-body-size-md","UT-dataElement-title-weight":"font-weight-medium","UT-dataElement-prefix-size":"font-body-size-md","UT-dataElement-prefix-weight":"font-weight-medium","UT-datepicker-root-gap":"gap-sm","UT-datepicker-adornments-gap":"gap-xs","UT-datepicker-day-padding-y":"padding-xs","UT-datepicker-day-padding-x":"padding-sm","UT-datepicker-calendar-gap":"gap-lg","UT-datepicker-calendar-padding":"padding-md","UT-datepicker-input-padding-x":"padding-sm","UT-datepicker-input-height":"size-control-sm","UT-fieldLabel-gap-xs":"gap-xs","UT-fieldLabel-gap-sm":"gap-sm","UT-fieldLabel-gap-lg":"gap-lg","UT-fileInput-radius":"radius-sm","UT-fileInput-container-margin":"gap-xs","UT-fileInput-container-height":"size-control-lg","UT-fileInput-container-padding":"padding-2xs","UT-fileInput-icon-height":"size-icon-xs","UT-fileInput-icon-width":"size-control-sm","UT-fileInput-icon-padding-top":"padding-3xs","UT-fileInput-icon-padding-sm":"padding-2xs","UT-fileInput-label-padding-top":"padding-2xs","UT-fileInput-label-padding-x":"padding-2xs","UT-fileInput-label-padding-bottom":"padding-xs","UT-header-gap-titles":"gap-md","UT-icon-area-radius":"radius-full","UT-imageRadio-radius":"radius-sm","UT-imageRadio-gap-sm":"gap-sm","UT-imageRadio-gap-lg":"gap-lg","UT-imageRadio-padding-md":"padding-md","UT-imageRadio-error-margin":"padding-xs","UT-kpi-radius":"radius-md","UT-kpi-padding-top":"padding-md","UT-kpi-padding-x":"padding-md","UT-kpi-padding-bottom":"padding-sm","UT-kpi-gap-md":"gap-lg","UT-kpi-gap-xs":"gap-xs","UT-label-size-title-1":"font-heading-size-1","UT-label-size-title-2":"font-heading-size-2","UT-label-size-title-3":"font-heading-size-3","UT-label-size-subtitle-1":"font-heading-size-4","UT-label-size-subtitle-2":"font-heading-size-5","UT-label-size-body":"font-body-size-lg","UT-label-size-small":"font-body-size-sm","UT-label-size-xsmall":"font-body-size-sm","UT-label-lh-heading":"font-lh-heading","UT-label-lh-subheading":"font-lh-subheading","UT-label-lh-body":"font-lh-body","UT-label-lh-small":"font-lh-140","UT-label-lh-xsmall":"font-lh-150","UT-label-weight-thin":"font-weight-thin","UT-label-weight-extralight":"font-weight-extralight","UT-label-weight-light":"font-weight-light","UT-label-weight-regular":"font-weight-regular","UT-label-weight-medium":"font-weight-medium","UT-label-weight-semibold":"font-weight-semibold","UT-label-weight-bold":"font-weight-bold","UT-label-weight-extrabold":"font-weight-extrabold","UT-label-weight-black":"font-weight-black","UT-label-markdown-margin-sm":"padding-xs","UT-label-markdown-margin-md":"padding-sm","UT-label-markdown-margin-lg":"padding-md","UT-label-markdown-margin-xl":"padding-lg","UT-label-markdown-padding-sm":"padding-xs","UT-label-markdown-padding-md":"padding-sm","UT-label-markdown-padding-lg":"padding-md","UT-label-markdown-padding-xl":"padding-lg","UT-loading-size":"size-control-4xl","UT-loading-logo-width":"size-brand-logo-2xs","UT-loading-color-start":"identitySolidTone3","UT-loading-color-end":"identitySolidTone2","UT-loading-text-size":"font-body-size-md","UT-loading-gap":"gap-lg","UT-panel-gap-xs":"gap-xs","UT-panel-gap-sm":"gap-sm","UT-panel-gap-md":"gap-md","UT-panel-gap-lg":"gap-lg","UT-panel-padding-xs":"padding-xs","UT-panel-padding-md":"padding-md","UT-panel-padding-lg":"padding-lg","UT-panel-sidebar-button-size":"size-control-md","UT-panel-sidebar-button-radius":"radius-sm","UT-panel-sidebar-width":"size-layout-3xs","UT-passwordField-gap":"gap-sm","UT-passwordField-warning-margin-top":"padding-md","UT-phoneInput-gap-sm":"gap-sm","UT-radioGroup-gap-sm":"gap-sm","UT-radioGroup-gap-lg":"gap-lg","UT-radioGroup-padding-y":"padding-xs","UT-radioGroup-control-size":"size-control-2xs","UT-radioGroup-control-dot-size":"size-3","UT-radioGroup-control-gap-sm":"gap-control-sm","UT-radioGroup-control-gap-md":"gap-control-md","UT-radioGroup-row-radius":"radius-md","UT-radioGroup-row-min-height":"size-control-xs","UT-radioGroup-row-padding-y":"padding-sm","UT-radioGroup-row-padding-x":"padding-md","UT-radioGroup-content-gap":"gap-xs","UT-radioGroup-card-radius":"radius-lg","UT-radioGroup-card-icon-area-radius":"radius-md","UT-richText-radius":"radius-sm","UT-richText-padding-y":"padding-sm","UT-richText-padding-x":"padding-md","UT-richText-gap":"gap-md","UT-richText-toolbar-gap":"gap-xs","UT-richText-separator-height":"size-icon-xs","UT-richText-block-gap":"gap-sm","UT-richText-list-indent":"spacing-6","UT-richText-body-size":"font-body-size-lg","UT-richText-body-lh":"font-lh-body","UT-richText-bold-weight":"font-weight-semibold","UT-richText-content-min-height":"size-12a","UT-richText-content-max-height":"size-17","UT-selectableCard-gap-none":"spacing-0","UT-selectableCard-gap-xs":"gap-xs","UT-selectableCard-gap-sm":"gap-sm","UT-selectableCard-gap-md":"gap-md","UT-selectableCard-gap-lg":"gap-lg","UT-selectableCard-gap-list":"gap-sm","UT-selectableCard-icon-area-radius":"radius-md","UT-selectableCard-padding-y-sm":"padding-xs","UT-selectableCard-padding-x-sm":"padding-md","UT-selectableCard-padding-md":"padding-md","UT-selectableCard-radius":"radius-lg","UT-selectableCard-radio-size":"size-control-2xs","UT-selectableCard-radio-dot-size":"size-3","UT-shortcutPanel-width":"size-layout-md","UT-shortcutPanel-width-collapsed":"size-layout-3xs","UT-shortcutPanel-padding":"padding-md","UT-shortcutPanel-header-height":"size-layout-2xs","UT-shortcutPanel-header-gap":"gap-sm","UT-shortcutPanel-header-label-size":"font-heading-size-5","UT-shortcutPanel-category-height":"size-control-md","UT-shortcutPanel-category-padding":"padding-xs","UT-shortcutPanel-category-gap":"gap-lg","UT-shortcutPanel-category-label-size":"font-body-size-sm","UT-shortcutPanel-category-icon-size":"size-icon-md","UT-shortcutPanel-item-height":"size-control-md","UT-shortcutPanel-item-padding":"padding-xs","UT-shortcutPanel-item-gap":"gap-sm","UT-shortcutPanel-item-label-size":"font-body-size-md","UT-shortcutPanel-item-icon-size":"size-icon-xs","UT-snackbar-padding-x":"padding-sm","UT-snackbar-padding-y":"padding-sm","UT-snackbar-radius":"radius-sm","UT-snackbar-gap-icon":"gap-sm","UT-snackbar-gap-description":"gap-xs","UT-snackbar-gap-actions":"gap-xs","UT-snackbar-gap-action-area":"gap-md","UT-snackbar-icon-size":"size-icon-xs","UT-snackbar-icon-offset":"spacing-1","UT-status-gap-large":"gap-sm","UT-status-gap-medium":"gap-sm","UT-status-gap-small":"gap-xs","UT-status-gap-xlarge":"gap-sm","UT-status-gap-xsmall":"gap-xs","UT-status-padding-y-large":"padding-2xs","UT-status-padding-x-large":"padding-xs","UT-status-padding-y-medium":"padding-2xs","UT-status-padding-x-medium":"padding-xs","UT-status-padding-y-small":"padding-2xs","UT-status-padding-x-small":"padding-xs","UT-status-padding-y-xlarge":"padding-xs","UT-status-padding-x-xlarge":"padding-sm","UT-status-padding-y-xsmall":"padding-3xs","UT-status-padding-x-xsmall":"padding-2xs","UT-status-radius":"radius-sm","UT-status-radius-rounded":"radius-full","UT-status-icon-size-3xs":"size-icon-3xs","UT-status-icon-size-2xs":"size-icon-2xs","UT-status-icon-size-xs":"size-icon-xs","UT-status-icon-size-md":"size-icon-md","UT-statusMessage-area-padding":"padding-lg","UT-statusMessage-area-padding-bottom":"spacing-10","UT-statusMessage-area-radius":"radius-400","UT-statusMessage-flag-height":"size-3","UT-stepper-padding-bottom":"padding-lg","UT-switch-gap-sm":"gap-control-sm","UT-switch-gap-md":"gap-control-md","UT-textArea-height":"size-control-3xl","UT-textArea-margin-y":"padding-xs","UT-textArea-gap":"gap-sm","UT-textArea-label-padding":"padding-2xs","UT-textInput-gap":"gap-sm","UT-workflowContainer-progress-height":"size-3","UT-workflowContainer-nav-min-height":"size-control-lg"}};
|
|
1
|
+
export default{base:{"size-12a":"4.5rem","size-13a":"7.5rem","size-16a":"12.5rem","size-full":"100%","size-0":"0rem","size-1":"0.125rem","size-2":"0.25rem","size-3":"0.5rem","size-4":"0.75rem","size-5":"1rem","size-6":"1.25rem","size-7":"1.5rem","size-8":"2rem","size-9":"2.5rem","size-10":"3rem","size-11":"3.5rem","size-12":"4rem","size-13":"6rem","size-14":"8rem","size-15":"10rem","size-16":"12rem","size-17":"14rem","size-18":"16rem","size-19":"20rem","spacing-0":"0rem","spacing-1":"0.125rem","spacing-2":"0.25rem","spacing-3":"0.5rem","spacing-4":"0.75rem","spacing-5":"1rem","spacing-6":"1.25rem","spacing-7":"1.5rem","spacing-8":"2rem","spacing-9":"2.5rem","spacing-10":"3rem","spacing-11":"3.5rem","spacing-12":"4rem","spacing-13":"6rem","spacing-14":"8rem","font-family":"Inter","font-size-100":"0.625rem","font-size-200":"0.75rem","font-size-300":"0.875rem","font-size-400":"1rem","font-size-500":"1.125rem","font-size-600":"1.25rem","font-size-650":"1.375rem","font-size-700":"1.5rem","font-size-800":"1.875rem","font-size-900":"2.5rem","font-size-1000":"3rem","font-size-1100":"4rem","font-weight-100":"100","font-weight-200":"200","font-weight-300":"300","font-weight-400":"400","font-weight-500":"500","font-weight-600":"600","font-weight-700":"700","font-weight-800":"800","font-weight-900":"900","font-lh-100":"1","font-lh-120":"1.2","font-lh-140":"1.4","font-lh-150":"1.5","font-lh-170":"1.7","legacy-font-lh-full":"100%","legacy-font-lh-100":"1.125rem","legacy-font-lh-120":"1.25rem","legacy-font-lh-140":"1.375rem","radius-100":"4px","radius-200":"8px","radius-300":"12px","radius-400":"16px","radius-500":"24px","radius-full":"9999px"},semantic:{"padding-3xs":"spacing-1","padding-2xs":"spacing-2","padding-xs":"spacing-3","padding-sm":"spacing-4","padding-md":"spacing-5","padding-lg":"spacing-7","padding-xl":"spacing-8","padding-2xl":"spacing-9","gap-2xs":"spacing-1","gap-xs":"spacing-2","gap-sm":"spacing-3","gap-md":"spacing-4","gap-lg":"spacing-5","gap-xl":"spacing-7","gap-2xl":"spacing-8","gap-3xl":"spacing-9","gap-control-sm":"spacing-2","gap-control-md":"spacing-3","font-heading-size-1":"font-size-700","font-heading-size-2":"font-size-650","font-heading-size-3":"font-size-600","font-heading-size-4":"font-size-500","font-heading-size-5":"font-size-400","font-heading-size-6":"font-size-500","font-body-size-xs":"font-size-100","font-body-size-sm":"font-size-200","font-body-size-md":"font-size-300","font-body-size-lg":"font-size-400","font-metric-size-sm":"font-size-300","font-metric-size-md":"font-size-400","font-metric-size-lg":"font-size-500","font-action-size-sm":"font-size-200","font-action-size-md":"font-size-300","font-label-size-sm":"font-size-200","font-label-size-md":"font-size-300","font-input-size":"font-size-400","font-weight-thin":"font-weight-100","font-weight-extralight":"font-weight-200","font-weight-light":"font-weight-300","font-weight-regular":"font-weight-400","font-weight-medium":"font-weight-500","font-weight-semibold":"font-weight-600","font-weight-bold":"font-weight-700","font-weight-extrabold":"font-weight-800","font-weight-black":"font-weight-900","font-lh-reset":"font-lh-100","font-lh-heading":"font-lh-120","font-lh-subheading":"font-lh-140","font-lh-body":"font-lh-140","font-lh-caption":"font-lh-170","legacy-font-lh-small":"legacy-font-lh-120","legacy-font-lh-xsmall":"legacy-font-lh-100","size-control-2xs":"size-5","size-control-xs":"size-7","size-control-sm":"size-8","size-control-md":"size-9","size-control-lg":"size-10","size-control-xl":"size-11","size-control-2xl":"size-12","size-control-3xl":"size-13","size-control-4xl":"size-13a","size-brand-logo-2xs":"size-11","size-brand-logo-xs":"size-12a","size-brand-logo-sm":"size-13a","size-brand-logo-md":"size-15","size-brand-logo-lg":"size-16a","size-icon-3xs":"size-4","size-icon-2xs":"size-5","size-icon-xs":"size-6","size-icon-md":"size-7","size-icon-lg":"size-8","size-icon-xl":"size-10","size-layout-3xs":"size-11","size-layout-2xs":"size-12","size-layout-sm":"size-15","size-layout-md":"size-18","size-layout-lg":"size-19","size-overlay-sm":"size-14","size-overlay-md":"size-16","size-overlay-lg":"size-18","size-overlay-xl":"size-19","size-overlay-2xl":"size-21","size-overlay-3xl":"size-23","size-overlay-full":"size-full","radius-sm":"radius-100","radius-md":"radius-200","radius-lg":"radius-300","radius-xl":"radius-500"},component:{"UT-field-gap":"gap-sm","UT-alert-padding-y":"padding-xs","UT-alert-padding-x":"padding-md","UT-alert-action-padding":"padding-xs","UT-alert-icon-size":"size-icon-xs","UT-alert-icon-margin":"padding-xs","UT-actionCard-radius":"radius-md","UT-actionCard-padding-md":"padding-md","UT-actionCard-padding-lg":"padding-lg","UT-actionCard-gap-sm":"gap-sm","UT-actionCard-gap-lg":"gap-lg","UT-actionCard-avatar-size":"size-control-2xl","UT-attachmentList-radius":"radius-md","UT-attachmentList-gap-xs":"gap-xs","UT-attachmentList-gap-sm":"gap-sm","UT-attachmentList-gap-lg":"gap-lg","UT-attachmentList-padding-md":"padding-md","UT-attachmentList-padding-lg":"padding-lg","UT-attachmentList-margin-sm":"padding-sm","UT-attachmentList-margin-md":"padding-md","UT-attachmentList-preview-size":"size-control-lg","UT-attachmentList-icon-area-radius":"radius-md","UT-baseInput-gap-md":"gap-sm","UT-baseInput-gap-sm":"gap-xs","UT-baseInput-padding-y-sm":"padding-2xs","UT-baseInput-padding-y-md":"padding-xs","UT-baseInput-padding-x-sm":"padding-xs","UT-baseInput-padding-x-md":"padding-sm","UT-baseInput-radius":"radius-md","UT-baseInput-adornment-size":"size-icon-xs","UT-breadcrumbs-padding-y":"padding-2xs","UT-breadcrumbs-padding-x":"padding-xs","UT-banner-buttons-gap":"gap-sm","UT-banner-gap-lg":"gap-xl","UT-banner-gap-md":"gap-lg","UT-banner-gap-sm":"gap-sm","UT-banner-icon-gap":"gap-md","UT-banner-icon-size-lg":"size-icon-md","UT-banner-icon-size-sm":"size-icon-xs","UT-banner-padding-lg":"padding-lg","UT-banner-padding-md":"padding-md","UT-banner-padding-x-sm":"padding-sm","UT-banner-padding-y-sm":"padding-xs","UT-banner-radius":"radius-md","UT-banner-text-gap":"gap-sm","UT-button-height-sm":"size-control-sm","UT-button-height-md":"size-control-md","UT-button-height-lg":"size-control-lg","UT-button-padding-xs":"padding-3xs","UT-button-padding-sm":"padding-2xs","UT-button-padding-md":"padding-xs","UT-button-padding-lg":"padding-sm","UT-button-gap-sm":"gap-xs","UT-button-gap-md":"gap-sm","UT-button-label-size":"font-label-size-md","UT-button-label-weight":"font-weight-600","UT-button-label-lh":"font-lh-reset","UT-button-radius":"radius-sm","UT-button-icon-size-sm":"size-icon-2xs","UT-button-icon-size-md":"initial","UT-button-icon-size-lg":"size-icon-xs","UT-button-icon-size-xl":"size-icon-md","UT-checkbox-size":"size-control-2xs","UT-checkbox-radius":"radius-sm","UT-checkbox-gap-sm":"gap-control-sm","UT-checkbox-gap-md":"gap-control-md","UT-checkbox-content-gap":"gap-xs","UT-checkbox-card-radius":"radius-lg","UT-checkbox-card-icon-area-radius":"radius-md","UT-checkbox-card-min-height":"size-control-xs","UT-checkbox-card-padding-y":"padding-sm","UT-checkbox-card-padding-x":"padding-md","UT-checkList-gap-sm":"gap-sm","UT-checkList-gap-lg":"gap-lg","UT-checkList-padding-y":"padding-xs","UT-buttonGroup-padding":"padding-2xs","UT-buttonGroup-radius":"radius-md","UT-dataCategory-padding":"padding-md","UT-dataCategory-gap":"gap-lg","UT-dataCategory-title-gap":"gap-sm","UT-dataCategory-title-size":"font-body-size-sm","UT-dataCategory-title-weight":"font-weight-medium","UT-dataCategory-icon-size":"size-icon-xs","UT-dataElement-chevron-icon-size":"size-icon-xs","UT-dataElement-padding-md":"padding-md","UT-dataElement-padding-sm":"padding-xs","UT-dataElement-gap-md":"gap-lg","UT-dataElement-gap-sm":"gap-sm","UT-dataElement-content-gap-x":"gap-sm","UT-dataElement-content-gap-y":"gap-sm","UT-dataElement-icon-size":"size-icon-md","UT-dataElement-title-size":"font-body-size-md","UT-dataElement-title-weight":"font-weight-medium","UT-dataElement-prefix-size":"font-body-size-md","UT-dataElement-prefix-weight":"font-weight-medium","UT-datepicker-root-gap":"gap-sm","UT-datepicker-adornments-gap":"gap-xs","UT-datepicker-day-padding-y":"padding-xs","UT-datepicker-day-padding-x":"padding-sm","UT-datepicker-calendar-gap":"gap-lg","UT-datepicker-calendar-padding":"padding-md","UT-datepicker-input-padding-x":"padding-sm","UT-datepicker-input-height":"size-control-sm","UT-fieldLabel-gap-xs":"gap-xs","UT-fieldLabel-gap-sm":"gap-sm","UT-fieldLabel-gap-lg":"gap-lg","UT-fileInput-radius":"radius-sm","UT-fileInput-container-margin":"gap-xs","UT-fileInput-container-height":"size-control-lg","UT-fileInput-container-padding":"padding-2xs","UT-fileInput-icon-height":"size-icon-xs","UT-fileInput-icon-width":"size-control-sm","UT-fileInput-icon-padding-top":"padding-3xs","UT-fileInput-icon-padding-sm":"padding-2xs","UT-fileInput-label-padding-top":"padding-2xs","UT-fileInput-label-padding-x":"padding-2xs","UT-fileInput-label-padding-bottom":"padding-xs","UT-header-gap-titles":"gap-md","UT-icon-area-radius":"radius-full","UT-imageRadio-radius":"radius-sm","UT-imageRadio-gap-sm":"gap-sm","UT-imageRadio-gap-lg":"gap-lg","UT-imageRadio-padding-md":"padding-md","UT-imageRadio-error-margin":"padding-xs","UT-kpi-radius":"radius-md","UT-kpi-padding-top":"padding-md","UT-kpi-padding-x":"padding-md","UT-kpi-padding-bottom":"padding-sm","UT-kpi-gap-md":"gap-lg","UT-kpi-gap-xs":"gap-xs","UT-label-size-title-1":"font-heading-size-1","UT-label-size-title-2":"font-heading-size-2","UT-label-size-title-3":"font-heading-size-3","UT-label-size-subtitle-1":"font-heading-size-4","UT-label-size-subtitle-2":"font-heading-size-5","UT-label-size-body":"font-body-size-lg","UT-label-size-small":"font-body-size-sm","UT-label-size-xsmall":"font-body-size-sm","UT-label-lh-heading":"font-lh-heading","UT-label-lh-subheading":"font-lh-subheading","UT-label-lh-body":"font-lh-body","UT-label-lh-small":"font-lh-140","UT-label-lh-xsmall":"font-lh-150","UT-label-weight-thin":"font-weight-thin","UT-label-weight-extralight":"font-weight-extralight","UT-label-weight-light":"font-weight-light","UT-label-weight-regular":"font-weight-regular","UT-label-weight-medium":"font-weight-medium","UT-label-weight-semibold":"font-weight-semibold","UT-label-weight-bold":"font-weight-bold","UT-label-weight-extrabold":"font-weight-extrabold","UT-label-weight-black":"font-weight-black","UT-label-markdown-margin-sm":"padding-xs","UT-label-markdown-margin-md":"padding-sm","UT-label-markdown-margin-lg":"padding-md","UT-label-markdown-margin-xl":"padding-lg","UT-label-markdown-padding-sm":"padding-xs","UT-label-markdown-padding-md":"padding-sm","UT-label-markdown-padding-lg":"padding-md","UT-label-markdown-padding-xl":"padding-lg","UT-loading-size":"size-control-4xl","UT-loading-logo-width":"size-brand-logo-2xs","UT-loading-color-start":"identitySolidTone3","UT-loading-color-end":"identitySolidTone2","UT-loading-text-size":"font-body-size-md","UT-loading-gap":"gap-lg","UT-panel-gap-xs":"gap-xs","UT-panel-gap-sm":"gap-sm","UT-panel-gap-md":"gap-md","UT-panel-gap-lg":"gap-lg","UT-panel-padding-xs":"padding-xs","UT-panel-padding-md":"padding-md","UT-panel-padding-lg":"padding-lg","UT-panel-sidebar-button-size":"size-control-md","UT-panel-sidebar-button-radius":"radius-sm","UT-panel-sidebar-width":"size-layout-3xs","UT-passwordField-gap":"gap-sm","UT-passwordField-warning-margin-top":"padding-md","UT-phoneInput-gap-sm":"gap-sm","UT-radioGroup-gap-sm":"gap-sm","UT-radioGroup-gap-lg":"gap-lg","UT-radioGroup-padding-y":"padding-xs","UT-radioGroup-control-size":"size-control-2xs","UT-radioGroup-control-dot-size":"size-3","UT-radioGroup-control-gap-sm":"gap-control-sm","UT-radioGroup-control-gap-md":"gap-control-md","UT-radioGroup-row-radius":"radius-md","UT-radioGroup-row-min-height":"size-control-xs","UT-radioGroup-row-padding-y":"padding-sm","UT-radioGroup-row-padding-x":"padding-md","UT-radioGroup-content-gap":"gap-xs","UT-radioGroup-card-radius":"radius-lg","UT-radioGroup-card-icon-area-radius":"radius-md","UT-richText-radius":"radius-sm","UT-richText-padding-y":"padding-sm","UT-richText-padding-x":"padding-md","UT-richText-gap":"gap-md","UT-richText-toolbar-gap":"gap-xs","UT-richText-separator-height":"size-icon-xs","UT-richText-block-gap":"gap-sm","UT-richText-list-indent":"spacing-6","UT-richText-body-size":"font-body-size-lg","UT-richText-body-lh":"font-lh-body","UT-richText-bold-weight":"font-weight-semibold","UT-richText-content-min-height":"size-12a","UT-richText-content-max-height":"size-17","UT-selectableCard-gap-none":"spacing-0","UT-selectableCard-gap-xs":"gap-xs","UT-selectableCard-gap-sm":"gap-sm","UT-selectableCard-gap-md":"gap-md","UT-selectableCard-gap-lg":"gap-lg","UT-selectableCard-gap-list":"gap-sm","UT-selectableCard-icon-area-radius":"radius-md","UT-selectableCard-padding-y-sm":"padding-xs","UT-selectableCard-padding-x-sm":"padding-md","UT-selectableCard-padding-md":"padding-md","UT-selectableCard-radius":"radius-lg","UT-selectableCard-radio-size":"size-control-2xs","UT-selectableCard-radio-dot-size":"size-3","UT-shortcutPanel-width":"size-layout-md","UT-shortcutPanel-width-collapsed":"size-layout-3xs","UT-shortcutPanel-padding":"padding-md","UT-shortcutPanel-header-height":"size-layout-2xs","UT-shortcutPanel-header-gap":"gap-sm","UT-shortcutPanel-header-label-size":"font-heading-size-5","UT-shortcutPanel-category-height":"size-control-md","UT-shortcutPanel-category-padding":"padding-xs","UT-shortcutPanel-category-gap":"gap-lg","UT-shortcutPanel-category-label-size":"font-body-size-sm","UT-shortcutPanel-category-icon-size":"size-icon-md","UT-shortcutPanel-item-height":"size-control-md","UT-shortcutPanel-item-padding":"padding-xs","UT-shortcutPanel-item-gap":"gap-sm","UT-shortcutPanel-item-label-size":"font-body-size-md","UT-shortcutPanel-item-icon-size":"size-icon-xs","UT-snackbar-padding-x":"padding-sm","UT-snackbar-padding-y":"padding-sm","UT-snackbar-radius":"radius-sm","UT-snackbar-gap-icon":"gap-sm","UT-snackbar-gap-description":"gap-xs","UT-snackbar-gap-actions":"gap-xs","UT-snackbar-gap-action-area":"gap-md","UT-snackbar-icon-size":"size-icon-xs","UT-snackbar-icon-offset":"spacing-1","UT-status-gap-large":"gap-sm","UT-status-gap-medium":"gap-sm","UT-status-gap-small":"gap-xs","UT-status-gap-xlarge":"gap-sm","UT-status-gap-xsmall":"gap-xs","UT-status-padding-y-large":"padding-2xs","UT-status-padding-x-large":"padding-xs","UT-status-padding-y-medium":"padding-2xs","UT-status-padding-x-medium":"padding-xs","UT-status-padding-y-small":"padding-2xs","UT-status-padding-x-small":"padding-xs","UT-status-padding-y-xlarge":"padding-xs","UT-status-padding-x-xlarge":"padding-sm","UT-status-padding-y-xsmall":"padding-3xs","UT-status-padding-x-xsmall":"padding-2xs","UT-status-radius":"radius-sm","UT-status-radius-rounded":"radius-full","UT-status-icon-size-3xs":"size-icon-3xs","UT-status-icon-size-2xs":"size-icon-2xs","UT-status-icon-size-xs":"size-icon-xs","UT-status-icon-size-md":"size-icon-md","UT-statusMessage-area-padding":"padding-lg","UT-statusMessage-area-padding-bottom":"spacing-10","UT-statusMessage-area-radius":"radius-400","UT-statusMessage-flag-height":"size-3","UT-stepper-padding-bottom":"padding-lg","UT-switch-gap-sm":"gap-control-sm","UT-switch-gap-md":"gap-control-md","UT-textArea-height":"size-control-3xl","UT-textArea-margin-y":"padding-xs","UT-textArea-gap":"gap-sm","UT-textArea-label-padding":"padding-2xs","UT-textInput-gap":"gap-sm","UT-workflowContainer-progress-height":"size-3","UT-workflowContainer-nav-min-height":"size-control-lg"}};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _default=exports.default={base:{"size-12a":"4.5rem","size-13a":"7.5rem","size-16a":"12.5rem","size-full":"100%","size-0":"0rem","size-1":"0.125rem","size-2":"0.25rem","size-3":"0.5rem","size-4":"0.75rem","size-5":"1rem","size-6":"1.25rem","size-7":"1.5rem","size-8":"2rem","size-9":"2.5rem","size-10":"3rem","size-11":"3.5rem","size-12":"4rem","size-13":"6rem","size-14":"8rem","size-15":"10rem","size-16":"12rem","size-17":"14rem","size-18":"16rem","size-19":"20rem","spacing-0":"0rem","spacing-1":"0.125rem","spacing-2":"0.25rem","spacing-3":"0.5rem","spacing-4":"0.75rem","spacing-5":"1rem","spacing-6":"1.25rem","spacing-7":"1.5rem","spacing-8":"2rem","spacing-9":"2.5rem","spacing-10":"3rem","spacing-11":"3.5rem","spacing-12":"4rem","spacing-13":"6rem","spacing-14":"8rem","font-family":"Inter","font-size-100":"0.625rem","font-size-200":"0.75rem","font-size-300":"0.875rem","font-size-400":"1rem","font-size-500":"1.125rem","font-size-600":"1.25rem","font-size-650":"1.375rem","font-size-700":"1.5rem","font-size-800":"1.875rem","font-size-900":"2.5rem","font-size-1000":"3rem","font-size-1100":"4rem","font-weight-100":"100","font-weight-200":"200","font-weight-300":"300","font-weight-400":"400","font-weight-500":"500","font-weight-600":"600","font-weight-700":"700","font-weight-800":"800","font-weight-900":"900","font-lh-100":"1","font-lh-120":"1.2","font-lh-140":"1.4","font-lh-150":"1.5","font-lh-170":"1.7","legacy-font-lh-full":"100%","legacy-font-lh-100":"1.125rem","legacy-font-lh-120":"1.25rem","legacy-font-lh-140":"1.375rem","radius-100":"4px","radius-200":"8px","radius-300":"12px","radius-400":"16px","radius-500":"24px","radius-full":"9999px"},semantic:{"padding-3xs":"spacing-1","padding-2xs":"spacing-2","padding-xs":"spacing-3","padding-sm":"spacing-4","padding-md":"spacing-5","padding-lg":"spacing-7","padding-xl":"spacing-8","padding-2xl":"spacing-9","gap-2xs":"spacing-1","gap-xs":"spacing-2","gap-sm":"spacing-3","gap-md":"spacing-4","gap-lg":"spacing-5","gap-xl":"spacing-7","gap-2xl":"spacing-8","gap-3xl":"spacing-9","gap-control-sm":"spacing-2","gap-control-md":"spacing-3","font-heading-size-1":"font-size-700","font-heading-size-2":"font-size-650","font-heading-size-3":"font-size-600","font-heading-size-4":"font-size-500","font-heading-size-5":"font-size-400","font-heading-size-6":"font-size-500","font-body-size-xs":"font-size-100","font-body-size-sm":"font-size-200","font-body-size-md":"font-size-300","font-body-size-lg":"font-size-400","font-metric-size-sm":"font-size-300","font-metric-size-md":"font-size-400","font-metric-size-lg":"font-size-500","font-action-size-sm":"font-size-200","font-action-size-md":"font-size-300","font-label-size-sm":"font-size-200","font-label-size-md":"font-size-300","font-input-size":"font-size-400","font-weight-thin":"font-weight-100","font-weight-extralight":"font-weight-200","font-weight-light":"font-weight-300","font-weight-regular":"font-weight-400","font-weight-medium":"font-weight-500","font-weight-semibold":"font-weight-600","font-weight-bold":"font-weight-700","font-weight-extrabold":"font-weight-800","font-weight-black":"font-weight-900","font-lh-reset":"font-lh-100","font-lh-heading":"font-lh-120","font-lh-subheading":"font-lh-140","font-lh-body":"font-lh-140","font-lh-caption":"font-lh-170","legacy-font-lh-small":"legacy-font-lh-120","legacy-font-lh-xsmall":"legacy-font-lh-100","size-control-2xs":"size-5","size-control-xs":"size-7","size-control-sm":"size-8","size-control-md":"size-9","size-control-lg":"size-10","size-control-xl":"size-11","size-control-2xl":"size-12","size-control-3xl":"size-13","size-control-4xl":"size-13a","size-brand-logo-2xs":"size-11","size-brand-logo-xs":"size-12a","size-brand-logo-sm":"size-13a","size-brand-logo-md":"size-15","size-brand-logo-lg":"size-16a","size-icon-3xs":"size-4","size-icon-2xs":"size-5","size-icon-xs":"size-6","size-icon-md":"size-7","size-icon-lg":"size-8","size-icon-xl":"size-10","size-layout-3xs":"size-11","size-layout-2xs":"size-12","size-layout-sm":"size-15","size-layout-md":"size-18","size-layout-lg":"size-19","size-overlay-sm":"size-14","size-overlay-md":"size-16","size-overlay-lg":"size-18","size-overlay-xl":"size-19","size-overlay-2xl":"size-21","size-overlay-3xl":"size-23","size-overlay-full":"size-full","radius-sm":"radius-100","radius-md":"radius-200","radius-lg":"radius-300","radius-xl":"radius-500"},component:{"UT-field-gap":"gap-sm","UT-alert-padding-y":"padding-xs","UT-alert-padding-x":"padding-md","UT-alert-action-padding":"padding-xs","UT-alert-icon-size":"size-icon-xs","UT-alert-icon-margin":"padding-xs","UT-actionCard-radius":"radius-md","UT-actionCard-padding-md":"padding-md","UT-actionCard-padding-lg":"padding-lg","UT-actionCard-gap-sm":"gap-sm","UT-actionCard-gap-lg":"gap-lg","UT-actionCard-avatar-size":"size-control-2xl","UT-attachmentList-radius":"radius-md","UT-attachmentList-gap-xs":"gap-xs","UT-attachmentList-gap-sm":"gap-sm","UT-attachmentList-gap-lg":"gap-lg","UT-attachmentList-padding-md":"padding-md","UT-attachmentList-padding-lg":"padding-lg","UT-attachmentList-margin-sm":"padding-sm","UT-attachmentList-margin-md":"padding-md","UT-attachmentList-preview-size":"size-control-lg","UT-attachmentList-icon-area-radius":"radius-md","UT-baseInput-gap-md":"gap-sm","UT-baseInput-gap-sm":"gap-xs","UT-baseInput-padding-y-sm":"padding-2xs","UT-baseInput-padding-y-md":"padding-xs","UT-baseInput-padding-x-sm":"padding-xs","UT-baseInput-padding-x-md":"padding-sm","UT-baseInput-radius":"radius-md","UT-baseInput-adornment-size":"size-icon-xs","UT-breadcrumbs-padding-y":"padding-2xs","UT-breadcrumbs-padding-x":"padding-xs","UT-banner-buttons-gap":"gap-sm","UT-banner-gap-lg":"gap-xl","UT-banner-gap-md":"gap-lg","UT-banner-gap-sm":"gap-sm","UT-banner-icon-gap":"gap-md","UT-banner-icon-size-lg":"size-icon-md","UT-banner-icon-size-sm":"size-icon-xs","UT-banner-padding-lg":"padding-lg","UT-banner-padding-md":"padding-md","UT-banner-padding-x-sm":"padding-sm","UT-banner-padding-y-sm":"padding-xs","UT-banner-radius":"radius-md","UT-banner-text-gap":"gap-sm","UT-button-height-sm":"size-control-sm","UT-button-height-md":"size-control-md","UT-button-height-lg":"size-control-lg","UT-button-padding-xs":"padding-3xs","UT-button-padding-sm":"padding-2xs","UT-button-padding-md":"padding-xs","UT-button-padding-lg":"padding-sm","UT-button-gap-sm":"gap-xs","UT-button-gap-md":"gap-sm","UT-button-label-size":"font-label-size-md","UT-button-label-weight":"font-weight-600","UT-button-label-lh":"font-lh-reset","UT-button-radius":"radius-sm","UT-button-icon-size-sm":"size-icon-2xs","UT-button-icon-size-md":"initial","UT-button-icon-size-lg":"size-icon-xs","UT-button-icon-size-xl":"size-icon-md","UT-checkbox-size":"size-control-2xs","UT-checkbox-radius":"radius-sm","UT-checkbox-gap-sm":"gap-control-sm","UT-checkbox-gap-md":"gap-control-md","UT-checkList-gap-sm":"gap-sm","UT-checkList-gap-lg":"gap-lg","UT-checkList-padding-y":"padding-xs","UT-buttonGroup-padding":"padding-2xs","UT-buttonGroup-radius":"radius-md","UT-dataCategory-padding":"padding-md","UT-dataCategory-gap":"gap-lg","UT-dataCategory-title-gap":"gap-sm","UT-dataCategory-title-size":"font-body-size-sm","UT-dataCategory-title-weight":"font-weight-medium","UT-dataCategory-icon-size":"size-icon-xs","UT-dataElement-chevron-icon-size":"size-icon-xs","UT-dataElement-padding-md":"padding-md","UT-dataElement-padding-sm":"padding-xs","UT-dataElement-gap-md":"gap-lg","UT-dataElement-gap-sm":"gap-sm","UT-dataElement-content-gap-x":"gap-sm","UT-dataElement-content-gap-y":"gap-sm","UT-dataElement-icon-size":"size-icon-md","UT-dataElement-title-size":"font-body-size-md","UT-dataElement-title-weight":"font-weight-medium","UT-dataElement-prefix-size":"font-body-size-md","UT-dataElement-prefix-weight":"font-weight-medium","UT-datepicker-root-gap":"gap-sm","UT-datepicker-adornments-gap":"gap-xs","UT-datepicker-day-padding-y":"padding-xs","UT-datepicker-day-padding-x":"padding-sm","UT-datepicker-calendar-gap":"gap-lg","UT-datepicker-calendar-padding":"padding-md","UT-datepicker-input-padding-x":"padding-sm","UT-datepicker-input-height":"size-control-sm","UT-fieldLabel-gap-xs":"gap-xs","UT-fieldLabel-gap-sm":"gap-sm","UT-fieldLabel-gap-lg":"gap-lg","UT-fileInput-radius":"radius-sm","UT-fileInput-container-margin":"gap-xs","UT-fileInput-container-height":"size-control-lg","UT-fileInput-container-padding":"padding-2xs","UT-fileInput-icon-height":"size-icon-xs","UT-fileInput-icon-width":"size-control-sm","UT-fileInput-icon-padding-top":"padding-3xs","UT-fileInput-icon-padding-sm":"padding-2xs","UT-fileInput-label-padding-top":"padding-2xs","UT-fileInput-label-padding-x":"padding-2xs","UT-fileInput-label-padding-bottom":"padding-xs","UT-header-gap-titles":"gap-md","UT-icon-area-radius":"radius-full","UT-imageRadio-radius":"radius-sm","UT-imageRadio-gap-sm":"gap-sm","UT-imageRadio-gap-lg":"gap-lg","UT-imageRadio-padding-md":"padding-md","UT-imageRadio-error-margin":"padding-xs","UT-kpi-radius":"radius-md","UT-kpi-padding-top":"padding-md","UT-kpi-padding-x":"padding-md","UT-kpi-padding-bottom":"padding-sm","UT-kpi-gap-md":"gap-lg","UT-kpi-gap-xs":"gap-xs","UT-label-size-title-1":"font-heading-size-1","UT-label-size-title-2":"font-heading-size-2","UT-label-size-title-3":"font-heading-size-3","UT-label-size-subtitle-1":"font-heading-size-4","UT-label-size-subtitle-2":"font-heading-size-5","UT-label-size-body":"font-body-size-lg","UT-label-size-small":"font-body-size-sm","UT-label-size-xsmall":"font-body-size-sm","UT-label-lh-heading":"font-lh-heading","UT-label-lh-subheading":"font-lh-subheading","UT-label-lh-body":"font-lh-body","UT-label-lh-small":"font-lh-140","UT-label-lh-xsmall":"font-lh-150","UT-label-weight-thin":"font-weight-thin","UT-label-weight-extralight":"font-weight-extralight","UT-label-weight-light":"font-weight-light","UT-label-weight-regular":"font-weight-regular","UT-label-weight-medium":"font-weight-medium","UT-label-weight-semibold":"font-weight-semibold","UT-label-weight-bold":"font-weight-bold","UT-label-weight-extrabold":"font-weight-extrabold","UT-label-weight-black":"font-weight-black","UT-label-markdown-margin-sm":"padding-xs","UT-label-markdown-margin-md":"padding-sm","UT-label-markdown-margin-lg":"padding-md","UT-label-markdown-margin-xl":"padding-lg","UT-label-markdown-padding-sm":"padding-xs","UT-label-markdown-padding-md":"padding-sm","UT-label-markdown-padding-lg":"padding-md","UT-label-markdown-padding-xl":"padding-lg","UT-loading-size":"size-control-4xl","UT-loading-logo-width":"size-brand-logo-2xs","UT-loading-color-start":"identitySolidTone3","UT-loading-color-end":"identitySolidTone2","UT-loading-text-size":"font-body-size-md","UT-loading-gap":"gap-lg","UT-panel-gap-xs":"gap-xs","UT-panel-gap-sm":"gap-sm","UT-panel-gap-md":"gap-md","UT-panel-gap-lg":"gap-lg","UT-panel-padding-xs":"padding-xs","UT-panel-padding-md":"padding-md","UT-panel-padding-lg":"padding-lg","UT-panel-sidebar-button-size":"size-control-md","UT-panel-sidebar-button-radius":"radius-sm","UT-panel-sidebar-width":"size-layout-3xs","UT-passwordField-gap":"gap-sm","UT-passwordField-warning-margin-top":"padding-md","UT-phoneInput-gap-sm":"gap-sm","UT-radioGroup-gap-sm":"gap-sm","UT-radioGroup-gap-lg":"gap-lg","UT-radioGroup-padding-y":"padding-xs","UT-radioGroup-control-size":"size-control-2xs","UT-radioGroup-control-dot-size":"size-3","UT-radioGroup-control-gap-sm":"gap-control-sm","UT-radioGroup-control-gap-md":"gap-control-md","UT-radioGroup-row-radius":"radius-md","UT-radioGroup-row-min-height":"size-control-xs","UT-radioGroup-row-padding-y":"padding-sm","UT-radioGroup-row-padding-x":"padding-md","UT-radioGroup-content-gap":"gap-xs","UT-radioGroup-card-radius":"radius-lg","UT-radioGroup-card-icon-area-radius":"radius-md","UT-richText-radius":"radius-sm","UT-richText-padding-y":"padding-sm","UT-richText-padding-x":"padding-md","UT-richText-gap":"gap-md","UT-richText-toolbar-gap":"gap-xs","UT-richText-separator-height":"size-icon-xs","UT-richText-block-gap":"gap-sm","UT-richText-list-indent":"spacing-6","UT-richText-body-size":"font-body-size-lg","UT-richText-body-lh":"font-lh-body","UT-richText-bold-weight":"font-weight-semibold","UT-richText-content-min-height":"size-12a","UT-richText-content-max-height":"size-17","UT-selectableCard-gap-none":"spacing-0","UT-selectableCard-gap-xs":"gap-xs","UT-selectableCard-gap-sm":"gap-sm","UT-selectableCard-gap-md":"gap-md","UT-selectableCard-gap-lg":"gap-lg","UT-selectableCard-gap-list":"gap-sm","UT-selectableCard-icon-area-radius":"radius-md","UT-selectableCard-padding-y-sm":"padding-xs","UT-selectableCard-padding-x-sm":"padding-md","UT-selectableCard-padding-md":"padding-md","UT-selectableCard-radius":"radius-lg","UT-selectableCard-radio-size":"size-control-2xs","UT-selectableCard-radio-dot-size":"size-3","UT-shortcutPanel-width":"size-layout-md","UT-shortcutPanel-width-collapsed":"size-layout-3xs","UT-shortcutPanel-padding":"padding-md","UT-shortcutPanel-header-height":"size-layout-2xs","UT-shortcutPanel-header-gap":"gap-sm","UT-shortcutPanel-header-label-size":"font-heading-size-5","UT-shortcutPanel-category-height":"size-control-md","UT-shortcutPanel-category-padding":"padding-xs","UT-shortcutPanel-category-gap":"gap-lg","UT-shortcutPanel-category-label-size":"font-body-size-sm","UT-shortcutPanel-category-icon-size":"size-icon-md","UT-shortcutPanel-item-height":"size-control-md","UT-shortcutPanel-item-padding":"padding-xs","UT-shortcutPanel-item-gap":"gap-sm","UT-shortcutPanel-item-label-size":"font-body-size-md","UT-shortcutPanel-item-icon-size":"size-icon-xs","UT-snackbar-padding-x":"padding-sm","UT-snackbar-padding-y":"padding-sm","UT-snackbar-radius":"radius-sm","UT-snackbar-gap-icon":"gap-sm","UT-snackbar-gap-description":"gap-xs","UT-snackbar-gap-actions":"gap-xs","UT-snackbar-gap-action-area":"gap-md","UT-snackbar-icon-size":"size-icon-xs","UT-snackbar-icon-offset":"spacing-1","UT-status-gap-large":"gap-sm","UT-status-gap-medium":"gap-sm","UT-status-gap-small":"gap-xs","UT-status-gap-xlarge":"gap-sm","UT-status-gap-xsmall":"gap-xs","UT-status-padding-y-large":"padding-2xs","UT-status-padding-x-large":"padding-xs","UT-status-padding-y-medium":"padding-2xs","UT-status-padding-x-medium":"padding-xs","UT-status-padding-y-small":"padding-2xs","UT-status-padding-x-small":"padding-xs","UT-status-padding-y-xlarge":"padding-xs","UT-status-padding-x-xlarge":"padding-sm","UT-status-padding-y-xsmall":"padding-3xs","UT-status-padding-x-xsmall":"padding-2xs","UT-status-radius":"radius-sm","UT-status-radius-rounded":"radius-full","UT-status-icon-size-3xs":"size-icon-3xs","UT-status-icon-size-2xs":"size-icon-2xs","UT-status-icon-size-xs":"size-icon-xs","UT-status-icon-size-md":"size-icon-md","UT-statusMessage-area-padding":"padding-lg","UT-statusMessage-area-padding-bottom":"spacing-10","UT-statusMessage-area-radius":"radius-400","UT-statusMessage-flag-height":"size-3","UT-stepper-padding-bottom":"padding-lg","UT-switch-gap-sm":"gap-control-sm","UT-switch-gap-md":"gap-control-md","UT-textArea-height":"size-control-3xl","UT-textArea-margin-y":"padding-xs","UT-textArea-gap":"gap-sm","UT-textArea-label-padding":"padding-2xs","UT-textInput-gap":"gap-sm","UT-workflowContainer-progress-height":"size-3","UT-workflowContainer-nav-min-height":"size-control-lg"}};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _default=exports.default={base:{"size-12a":"4.5rem","size-13a":"7.5rem","size-16a":"12.5rem","size-full":"100%","size-0":"0rem","size-1":"0.125rem","size-2":"0.25rem","size-3":"0.5rem","size-4":"0.75rem","size-5":"1rem","size-6":"1.25rem","size-7":"1.5rem","size-8":"2rem","size-9":"2.5rem","size-10":"3rem","size-11":"3.5rem","size-12":"4rem","size-13":"6rem","size-14":"8rem","size-15":"10rem","size-16":"12rem","size-17":"14rem","size-18":"16rem","size-19":"20rem","spacing-0":"0rem","spacing-1":"0.125rem","spacing-2":"0.25rem","spacing-3":"0.5rem","spacing-4":"0.75rem","spacing-5":"1rem","spacing-6":"1.25rem","spacing-7":"1.5rem","spacing-8":"2rem","spacing-9":"2.5rem","spacing-10":"3rem","spacing-11":"3.5rem","spacing-12":"4rem","spacing-13":"6rem","spacing-14":"8rem","font-family":"Inter","font-size-100":"0.625rem","font-size-200":"0.75rem","font-size-300":"0.875rem","font-size-400":"1rem","font-size-500":"1.125rem","font-size-600":"1.25rem","font-size-650":"1.375rem","font-size-700":"1.5rem","font-size-800":"1.875rem","font-size-900":"2.5rem","font-size-1000":"3rem","font-size-1100":"4rem","font-weight-100":"100","font-weight-200":"200","font-weight-300":"300","font-weight-400":"400","font-weight-500":"500","font-weight-600":"600","font-weight-700":"700","font-weight-800":"800","font-weight-900":"900","font-lh-100":"1","font-lh-120":"1.2","font-lh-140":"1.4","font-lh-150":"1.5","font-lh-170":"1.7","legacy-font-lh-full":"100%","legacy-font-lh-100":"1.125rem","legacy-font-lh-120":"1.25rem","legacy-font-lh-140":"1.375rem","radius-100":"4px","radius-200":"8px","radius-300":"12px","radius-400":"16px","radius-500":"24px","radius-full":"9999px"},semantic:{"padding-3xs":"spacing-1","padding-2xs":"spacing-2","padding-xs":"spacing-3","padding-sm":"spacing-4","padding-md":"spacing-5","padding-lg":"spacing-7","padding-xl":"spacing-8","padding-2xl":"spacing-9","gap-2xs":"spacing-1","gap-xs":"spacing-2","gap-sm":"spacing-3","gap-md":"spacing-4","gap-lg":"spacing-5","gap-xl":"spacing-7","gap-2xl":"spacing-8","gap-3xl":"spacing-9","gap-control-sm":"spacing-2","gap-control-md":"spacing-3","font-heading-size-1":"font-size-700","font-heading-size-2":"font-size-650","font-heading-size-3":"font-size-600","font-heading-size-4":"font-size-500","font-heading-size-5":"font-size-400","font-heading-size-6":"font-size-500","font-body-size-xs":"font-size-100","font-body-size-sm":"font-size-200","font-body-size-md":"font-size-300","font-body-size-lg":"font-size-400","font-metric-size-sm":"font-size-300","font-metric-size-md":"font-size-400","font-metric-size-lg":"font-size-500","font-action-size-sm":"font-size-200","font-action-size-md":"font-size-300","font-label-size-sm":"font-size-200","font-label-size-md":"font-size-300","font-input-size":"font-size-400","font-weight-thin":"font-weight-100","font-weight-extralight":"font-weight-200","font-weight-light":"font-weight-300","font-weight-regular":"font-weight-400","font-weight-medium":"font-weight-500","font-weight-semibold":"font-weight-600","font-weight-bold":"font-weight-700","font-weight-extrabold":"font-weight-800","font-weight-black":"font-weight-900","font-lh-reset":"font-lh-100","font-lh-heading":"font-lh-120","font-lh-subheading":"font-lh-140","font-lh-body":"font-lh-140","font-lh-caption":"font-lh-170","legacy-font-lh-small":"legacy-font-lh-120","legacy-font-lh-xsmall":"legacy-font-lh-100","size-control-2xs":"size-5","size-control-xs":"size-7","size-control-sm":"size-8","size-control-md":"size-9","size-control-lg":"size-10","size-control-xl":"size-11","size-control-2xl":"size-12","size-control-3xl":"size-13","size-control-4xl":"size-13a","size-brand-logo-2xs":"size-11","size-brand-logo-xs":"size-12a","size-brand-logo-sm":"size-13a","size-brand-logo-md":"size-15","size-brand-logo-lg":"size-16a","size-icon-3xs":"size-4","size-icon-2xs":"size-5","size-icon-xs":"size-6","size-icon-md":"size-7","size-icon-lg":"size-8","size-icon-xl":"size-10","size-layout-3xs":"size-11","size-layout-2xs":"size-12","size-layout-sm":"size-15","size-layout-md":"size-18","size-layout-lg":"size-19","size-overlay-sm":"size-14","size-overlay-md":"size-16","size-overlay-lg":"size-18","size-overlay-xl":"size-19","size-overlay-2xl":"size-21","size-overlay-3xl":"size-23","size-overlay-full":"size-full","radius-sm":"radius-100","radius-md":"radius-200","radius-lg":"radius-300","radius-xl":"radius-500"},component:{"UT-field-gap":"gap-sm","UT-alert-padding-y":"padding-xs","UT-alert-padding-x":"padding-md","UT-alert-action-padding":"padding-xs","UT-alert-icon-size":"size-icon-xs","UT-alert-icon-margin":"padding-xs","UT-actionCard-radius":"radius-md","UT-actionCard-padding-md":"padding-md","UT-actionCard-padding-lg":"padding-lg","UT-actionCard-gap-sm":"gap-sm","UT-actionCard-gap-lg":"gap-lg","UT-actionCard-avatar-size":"size-control-2xl","UT-attachmentList-radius":"radius-md","UT-attachmentList-gap-xs":"gap-xs","UT-attachmentList-gap-sm":"gap-sm","UT-attachmentList-gap-lg":"gap-lg","UT-attachmentList-padding-md":"padding-md","UT-attachmentList-padding-lg":"padding-lg","UT-attachmentList-margin-sm":"padding-sm","UT-attachmentList-margin-md":"padding-md","UT-attachmentList-preview-size":"size-control-lg","UT-attachmentList-icon-area-radius":"radius-md","UT-baseInput-gap-md":"gap-sm","UT-baseInput-gap-sm":"gap-xs","UT-baseInput-padding-y-sm":"padding-2xs","UT-baseInput-padding-y-md":"padding-xs","UT-baseInput-padding-x-sm":"padding-xs","UT-baseInput-padding-x-md":"padding-sm","UT-baseInput-radius":"radius-md","UT-baseInput-adornment-size":"size-icon-xs","UT-breadcrumbs-padding-y":"padding-2xs","UT-breadcrumbs-padding-x":"padding-xs","UT-banner-buttons-gap":"gap-sm","UT-banner-gap-lg":"gap-xl","UT-banner-gap-md":"gap-lg","UT-banner-gap-sm":"gap-sm","UT-banner-icon-gap":"gap-md","UT-banner-icon-size-lg":"size-icon-md","UT-banner-icon-size-sm":"size-icon-xs","UT-banner-padding-lg":"padding-lg","UT-banner-padding-md":"padding-md","UT-banner-padding-x-sm":"padding-sm","UT-banner-padding-y-sm":"padding-xs","UT-banner-radius":"radius-md","UT-banner-text-gap":"gap-sm","UT-button-height-sm":"size-control-sm","UT-button-height-md":"size-control-md","UT-button-height-lg":"size-control-lg","UT-button-padding-xs":"padding-3xs","UT-button-padding-sm":"padding-2xs","UT-button-padding-md":"padding-xs","UT-button-padding-lg":"padding-sm","UT-button-gap-sm":"gap-xs","UT-button-gap-md":"gap-sm","UT-button-label-size":"font-label-size-md","UT-button-label-weight":"font-weight-600","UT-button-label-lh":"font-lh-reset","UT-button-radius":"radius-sm","UT-button-icon-size-sm":"size-icon-2xs","UT-button-icon-size-md":"initial","UT-button-icon-size-lg":"size-icon-xs","UT-button-icon-size-xl":"size-icon-md","UT-checkbox-size":"size-control-2xs","UT-checkbox-radius":"radius-sm","UT-checkbox-gap-sm":"gap-control-sm","UT-checkbox-gap-md":"gap-control-md","UT-checkbox-content-gap":"gap-xs","UT-checkbox-card-radius":"radius-lg","UT-checkbox-card-icon-area-radius":"radius-md","UT-checkbox-card-min-height":"size-control-xs","UT-checkbox-card-padding-y":"padding-sm","UT-checkbox-card-padding-x":"padding-md","UT-checkList-gap-sm":"gap-sm","UT-checkList-gap-lg":"gap-lg","UT-checkList-padding-y":"padding-xs","UT-buttonGroup-padding":"padding-2xs","UT-buttonGroup-radius":"radius-md","UT-dataCategory-padding":"padding-md","UT-dataCategory-gap":"gap-lg","UT-dataCategory-title-gap":"gap-sm","UT-dataCategory-title-size":"font-body-size-sm","UT-dataCategory-title-weight":"font-weight-medium","UT-dataCategory-icon-size":"size-icon-xs","UT-dataElement-chevron-icon-size":"size-icon-xs","UT-dataElement-padding-md":"padding-md","UT-dataElement-padding-sm":"padding-xs","UT-dataElement-gap-md":"gap-lg","UT-dataElement-gap-sm":"gap-sm","UT-dataElement-content-gap-x":"gap-sm","UT-dataElement-content-gap-y":"gap-sm","UT-dataElement-icon-size":"size-icon-md","UT-dataElement-title-size":"font-body-size-md","UT-dataElement-title-weight":"font-weight-medium","UT-dataElement-prefix-size":"font-body-size-md","UT-dataElement-prefix-weight":"font-weight-medium","UT-datepicker-root-gap":"gap-sm","UT-datepicker-adornments-gap":"gap-xs","UT-datepicker-day-padding-y":"padding-xs","UT-datepicker-day-padding-x":"padding-sm","UT-datepicker-calendar-gap":"gap-lg","UT-datepicker-calendar-padding":"padding-md","UT-datepicker-input-padding-x":"padding-sm","UT-datepicker-input-height":"size-control-sm","UT-fieldLabel-gap-xs":"gap-xs","UT-fieldLabel-gap-sm":"gap-sm","UT-fieldLabel-gap-lg":"gap-lg","UT-fileInput-radius":"radius-sm","UT-fileInput-container-margin":"gap-xs","UT-fileInput-container-height":"size-control-lg","UT-fileInput-container-padding":"padding-2xs","UT-fileInput-icon-height":"size-icon-xs","UT-fileInput-icon-width":"size-control-sm","UT-fileInput-icon-padding-top":"padding-3xs","UT-fileInput-icon-padding-sm":"padding-2xs","UT-fileInput-label-padding-top":"padding-2xs","UT-fileInput-label-padding-x":"padding-2xs","UT-fileInput-label-padding-bottom":"padding-xs","UT-header-gap-titles":"gap-md","UT-icon-area-radius":"radius-full","UT-imageRadio-radius":"radius-sm","UT-imageRadio-gap-sm":"gap-sm","UT-imageRadio-gap-lg":"gap-lg","UT-imageRadio-padding-md":"padding-md","UT-imageRadio-error-margin":"padding-xs","UT-kpi-radius":"radius-md","UT-kpi-padding-top":"padding-md","UT-kpi-padding-x":"padding-md","UT-kpi-padding-bottom":"padding-sm","UT-kpi-gap-md":"gap-lg","UT-kpi-gap-xs":"gap-xs","UT-label-size-title-1":"font-heading-size-1","UT-label-size-title-2":"font-heading-size-2","UT-label-size-title-3":"font-heading-size-3","UT-label-size-subtitle-1":"font-heading-size-4","UT-label-size-subtitle-2":"font-heading-size-5","UT-label-size-body":"font-body-size-lg","UT-label-size-small":"font-body-size-sm","UT-label-size-xsmall":"font-body-size-sm","UT-label-lh-heading":"font-lh-heading","UT-label-lh-subheading":"font-lh-subheading","UT-label-lh-body":"font-lh-body","UT-label-lh-small":"font-lh-140","UT-label-lh-xsmall":"font-lh-150","UT-label-weight-thin":"font-weight-thin","UT-label-weight-extralight":"font-weight-extralight","UT-label-weight-light":"font-weight-light","UT-label-weight-regular":"font-weight-regular","UT-label-weight-medium":"font-weight-medium","UT-label-weight-semibold":"font-weight-semibold","UT-label-weight-bold":"font-weight-bold","UT-label-weight-extrabold":"font-weight-extrabold","UT-label-weight-black":"font-weight-black","UT-label-markdown-margin-sm":"padding-xs","UT-label-markdown-margin-md":"padding-sm","UT-label-markdown-margin-lg":"padding-md","UT-label-markdown-margin-xl":"padding-lg","UT-label-markdown-padding-sm":"padding-xs","UT-label-markdown-padding-md":"padding-sm","UT-label-markdown-padding-lg":"padding-md","UT-label-markdown-padding-xl":"padding-lg","UT-loading-size":"size-control-4xl","UT-loading-logo-width":"size-brand-logo-2xs","UT-loading-color-start":"identitySolidTone3","UT-loading-color-end":"identitySolidTone2","UT-loading-text-size":"font-body-size-md","UT-loading-gap":"gap-lg","UT-panel-gap-xs":"gap-xs","UT-panel-gap-sm":"gap-sm","UT-panel-gap-md":"gap-md","UT-panel-gap-lg":"gap-lg","UT-panel-padding-xs":"padding-xs","UT-panel-padding-md":"padding-md","UT-panel-padding-lg":"padding-lg","UT-panel-sidebar-button-size":"size-control-md","UT-panel-sidebar-button-radius":"radius-sm","UT-panel-sidebar-width":"size-layout-3xs","UT-passwordField-gap":"gap-sm","UT-passwordField-warning-margin-top":"padding-md","UT-phoneInput-gap-sm":"gap-sm","UT-radioGroup-gap-sm":"gap-sm","UT-radioGroup-gap-lg":"gap-lg","UT-radioGroup-padding-y":"padding-xs","UT-radioGroup-control-size":"size-control-2xs","UT-radioGroup-control-dot-size":"size-3","UT-radioGroup-control-gap-sm":"gap-control-sm","UT-radioGroup-control-gap-md":"gap-control-md","UT-radioGroup-row-radius":"radius-md","UT-radioGroup-row-min-height":"size-control-xs","UT-radioGroup-row-padding-y":"padding-sm","UT-radioGroup-row-padding-x":"padding-md","UT-radioGroup-content-gap":"gap-xs","UT-radioGroup-card-radius":"radius-lg","UT-radioGroup-card-icon-area-radius":"radius-md","UT-richText-radius":"radius-sm","UT-richText-padding-y":"padding-sm","UT-richText-padding-x":"padding-md","UT-richText-gap":"gap-md","UT-richText-toolbar-gap":"gap-xs","UT-richText-separator-height":"size-icon-xs","UT-richText-block-gap":"gap-sm","UT-richText-list-indent":"spacing-6","UT-richText-body-size":"font-body-size-lg","UT-richText-body-lh":"font-lh-body","UT-richText-bold-weight":"font-weight-semibold","UT-richText-content-min-height":"size-12a","UT-richText-content-max-height":"size-17","UT-selectableCard-gap-none":"spacing-0","UT-selectableCard-gap-xs":"gap-xs","UT-selectableCard-gap-sm":"gap-sm","UT-selectableCard-gap-md":"gap-md","UT-selectableCard-gap-lg":"gap-lg","UT-selectableCard-gap-list":"gap-sm","UT-selectableCard-icon-area-radius":"radius-md","UT-selectableCard-padding-y-sm":"padding-xs","UT-selectableCard-padding-x-sm":"padding-md","UT-selectableCard-padding-md":"padding-md","UT-selectableCard-radius":"radius-lg","UT-selectableCard-radio-size":"size-control-2xs","UT-selectableCard-radio-dot-size":"size-3","UT-shortcutPanel-width":"size-layout-md","UT-shortcutPanel-width-collapsed":"size-layout-3xs","UT-shortcutPanel-padding":"padding-md","UT-shortcutPanel-header-height":"size-layout-2xs","UT-shortcutPanel-header-gap":"gap-sm","UT-shortcutPanel-header-label-size":"font-heading-size-5","UT-shortcutPanel-category-height":"size-control-md","UT-shortcutPanel-category-padding":"padding-xs","UT-shortcutPanel-category-gap":"gap-lg","UT-shortcutPanel-category-label-size":"font-body-size-sm","UT-shortcutPanel-category-icon-size":"size-icon-md","UT-shortcutPanel-item-height":"size-control-md","UT-shortcutPanel-item-padding":"padding-xs","UT-shortcutPanel-item-gap":"gap-sm","UT-shortcutPanel-item-label-size":"font-body-size-md","UT-shortcutPanel-item-icon-size":"size-icon-xs","UT-snackbar-padding-x":"padding-sm","UT-snackbar-padding-y":"padding-sm","UT-snackbar-radius":"radius-sm","UT-snackbar-gap-icon":"gap-sm","UT-snackbar-gap-description":"gap-xs","UT-snackbar-gap-actions":"gap-xs","UT-snackbar-gap-action-area":"gap-md","UT-snackbar-icon-size":"size-icon-xs","UT-snackbar-icon-offset":"spacing-1","UT-status-gap-large":"gap-sm","UT-status-gap-medium":"gap-sm","UT-status-gap-small":"gap-xs","UT-status-gap-xlarge":"gap-sm","UT-status-gap-xsmall":"gap-xs","UT-status-padding-y-large":"padding-2xs","UT-status-padding-x-large":"padding-xs","UT-status-padding-y-medium":"padding-2xs","UT-status-padding-x-medium":"padding-xs","UT-status-padding-y-small":"padding-2xs","UT-status-padding-x-small":"padding-xs","UT-status-padding-y-xlarge":"padding-xs","UT-status-padding-x-xlarge":"padding-sm","UT-status-padding-y-xsmall":"padding-3xs","UT-status-padding-x-xsmall":"padding-2xs","UT-status-radius":"radius-sm","UT-status-radius-rounded":"radius-full","UT-status-icon-size-3xs":"size-icon-3xs","UT-status-icon-size-2xs":"size-icon-2xs","UT-status-icon-size-xs":"size-icon-xs","UT-status-icon-size-md":"size-icon-md","UT-statusMessage-area-padding":"padding-lg","UT-statusMessage-area-padding-bottom":"spacing-10","UT-statusMessage-area-radius":"radius-400","UT-statusMessage-flag-height":"size-3","UT-stepper-padding-bottom":"padding-lg","UT-switch-gap-sm":"gap-control-sm","UT-switch-gap-md":"gap-control-md","UT-textArea-height":"size-control-3xl","UT-textArea-margin-y":"padding-xs","UT-textArea-gap":"gap-sm","UT-textArea-label-padding":"padding-2xs","UT-textInput-gap":"gap-sm","UT-workflowContainer-progress-height":"size-3","UT-workflowContainer-nav-min-height":"size-control-lg"}};
|