@descope/web-components-ui 1.0.75 → 1.0.77
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +355 -247
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/447.js +1 -1
- package/dist/umd/744.js +1 -1
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-phone-field-index-js.js +1 -1
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-passcode/Passcode.js +44 -10
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +32 -14
- package/src/components/descope-phone-field/PhoneField.js +1 -1
- package/src/components/descope-text-area/TextArea.js +3 -1
- package/src/components/descope-text-field/TextField.js +10 -3
- package/src/components/descope-text-field/textFieldMappings.js +20 -15
- package/src/mixins/normalizeBooleanAttributesMixin.js +16 -7
- package/src/mixins/proxyInputMixin.js +1 -1
- package/src/theme/components/button.js +0 -3
- package/src/theme/components/passcode.js +36 -3
- package/src/theme/components/textArea.js +5 -2
- package/src/theme/components/textField.js +4 -1
package/dist/index.esm.js
CHANGED
@@ -692,7 +692,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
|
|
692
692
|
}
|
693
693
|
};
|
694
694
|
|
695
|
-
const errorAttrs = ['invalid', '
|
695
|
+
const errorAttrs = ['invalid', 'required'];
|
696
696
|
|
697
697
|
const propertyObserver = (src, target, property) => {
|
698
698
|
Object.defineProperty(src, property, {
|
@@ -991,15 +991,22 @@ const changeMixin = (superclass) => class ChangeMixinClass extends superclass {
|
|
991
991
|
}
|
992
992
|
};
|
993
993
|
|
994
|
-
// we want all the valueless attributes to have "true" value
|
994
|
+
// we want all the valueless attributes to have "true" value
|
995
|
+
// and all the falsy attribute to be removed
|
995
996
|
const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAttributesMixinClass extends superclass {
|
996
|
-
|
997
|
-
|
998
|
-
this.setAttribute(attrName, 'true');
|
999
|
-
newValue = 'true';
|
1000
|
-
}
|
997
|
+
init() {
|
998
|
+
super.init?.();
|
1001
999
|
|
1002
|
-
|
1000
|
+
observeAttributes(this, (attrs) =>
|
1001
|
+
attrs.forEach(attr => {
|
1002
|
+
const attrVal = this.getAttribute(attr);
|
1003
|
+
|
1004
|
+
if (attrVal === '') {
|
1005
|
+
this.setAttribute(attr, 'true');
|
1006
|
+
} else if (attrVal === 'false') {
|
1007
|
+
this.removeAttribute(attr);
|
1008
|
+
}
|
1009
|
+
}), {});
|
1003
1010
|
}
|
1004
1011
|
};
|
1005
1012
|
|
@@ -1466,39 +1473,44 @@ customElements.define(componentName$f, Divider);
|
|
1466
1473
|
|
1467
1474
|
const selectors$2 = {
|
1468
1475
|
label: '::part(label)',
|
1469
|
-
|
1476
|
+
inputWrapper: '::part(input-field)',
|
1470
1477
|
readOnlyInput: '[readonly]::part(input-field)::after',
|
1471
1478
|
placeholder: '> input:placeholder-shown',
|
1472
|
-
host: () => ':host'
|
1479
|
+
host: () => ':host',
|
1480
|
+
input: 'input'
|
1473
1481
|
};
|
1474
1482
|
|
1475
1483
|
var textFieldMappings = {
|
1476
|
-
backgroundColor: { selector: selectors$2.
|
1477
|
-
color: { selector: selectors$2.
|
1484
|
+
backgroundColor: { selector: selectors$2.inputWrapper },
|
1485
|
+
color: { selector: selectors$2.inputWrapper },
|
1478
1486
|
width: { selector: selectors$2.host },
|
1479
1487
|
borderColor: [
|
1480
|
-
{ selector: selectors$2.
|
1488
|
+
{ selector: selectors$2.inputWrapper },
|
1481
1489
|
{ selector: selectors$2.readOnlyInput }
|
1482
1490
|
],
|
1483
1491
|
borderWidth: [
|
1484
|
-
{ selector: selectors$2.
|
1492
|
+
{ selector: selectors$2.inputWrapper },
|
1485
1493
|
{ selector: selectors$2.readOnlyInput }
|
1486
1494
|
],
|
1487
1495
|
borderStyle: [
|
1488
|
-
{ selector: selectors$2.
|
1496
|
+
{ selector: selectors$2.inputWrapper },
|
1489
1497
|
{ selector: selectors$2.readOnlyInput }
|
1490
1498
|
],
|
1491
|
-
borderRadius: { selector: selectors$2.
|
1492
|
-
boxShadow: { selector: selectors$2.
|
1499
|
+
borderRadius: { selector: selectors$2.inputWrapper },
|
1500
|
+
boxShadow: { selector: selectors$2.inputWrapper },
|
1493
1501
|
|
1494
1502
|
// we apply font-size also on the host so we can set its width with em
|
1495
1503
|
fontSize: [{}, { selector: selectors$2.host }],
|
1496
|
-
|
1497
|
-
height: { selector: selectors$2.
|
1498
|
-
padding: { selector: selectors$2.
|
1499
|
-
|
1500
|
-
|
1501
|
-
|
1504
|
+
|
1505
|
+
height: { selector: selectors$2.inputWrapper },
|
1506
|
+
padding: { selector: selectors$2.inputWrapper },
|
1507
|
+
margin: { selector: selectors$2.inputWrapper },
|
1508
|
+
caretColor: { selector: selectors$2.input },
|
1509
|
+
outlineColor: { selector: selectors$2.inputWrapper },
|
1510
|
+
outlineStyle: { selector: selectors$2.inputWrapper },
|
1511
|
+
outlineWidth: { selector: selectors$2.inputWrapper },
|
1512
|
+
outlineOffset: { selector: selectors$2.inputWrapper },
|
1513
|
+
textAlign: {selector: selectors$2.input},
|
1502
1514
|
placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
|
1503
1515
|
};
|
1504
1516
|
|
@@ -1765,6 +1777,10 @@ const getSanitizedCharacters = (str) => {
|
|
1765
1777
|
const componentName$9 = getComponentName('passcode-internal');
|
1766
1778
|
|
1767
1779
|
const observedAttributes$1 = [
|
1780
|
+
'digits'
|
1781
|
+
];
|
1782
|
+
|
1783
|
+
const forwardAttributes = [
|
1768
1784
|
'disabled',
|
1769
1785
|
'bordered',
|
1770
1786
|
'size',
|
@@ -1788,22 +1804,35 @@ class PasscodeInternal extends BaseInputClass$1 {
|
|
1788
1804
|
|
1789
1805
|
constructor() {
|
1790
1806
|
super();
|
1807
|
+
|
1808
|
+
this.innerHTML = `
|
1809
|
+
<div class="wrapper"></div>
|
1810
|
+
<style>
|
1811
|
+
.wrapper {
|
1812
|
+
display: flex;
|
1813
|
+
width: 100%;
|
1814
|
+
justify-content: space-between;
|
1815
|
+
}
|
1816
|
+
</style>
|
1817
|
+
`;
|
1818
|
+
|
1819
|
+
this.wrapperEle = this.querySelector('div');
|
1820
|
+
}
|
1821
|
+
|
1822
|
+
renderInputs() {
|
1791
1823
|
const inputs = [...Array(this.digits).keys()].map((idx) => `
|
1792
1824
|
<descope-text-field
|
1793
|
-
st-width="35px"
|
1794
1825
|
data-id=${idx}
|
1795
1826
|
type="tel"
|
1796
1827
|
autocomplete="off"
|
1797
1828
|
></descope-text-field>
|
1798
1829
|
`);
|
1799
1830
|
|
1800
|
-
this.innerHTML =
|
1801
|
-
<div>
|
1802
|
-
${inputs.join('')}
|
1803
|
-
</div>
|
1804
|
-
`;
|
1831
|
+
this.wrapperEle.innerHTML = inputs.join('');
|
1805
1832
|
|
1806
1833
|
this.inputs = Array.from(this.querySelectorAll('descope-text-field'));
|
1834
|
+
|
1835
|
+
this.initInputs();
|
1807
1836
|
}
|
1808
1837
|
|
1809
1838
|
get digits() {
|
@@ -1811,7 +1840,7 @@ class PasscodeInternal extends BaseInputClass$1 {
|
|
1811
1840
|
}
|
1812
1841
|
|
1813
1842
|
get value() {
|
1814
|
-
return this.inputs
|
1843
|
+
return this.inputs?.map(({ value }) => value).join('') || ''
|
1815
1844
|
}
|
1816
1845
|
|
1817
1846
|
set value(val) {
|
@@ -1850,7 +1879,8 @@ class PasscodeInternal extends BaseInputClass$1 {
|
|
1850
1879
|
|
1851
1880
|
super.init?.();
|
1852
1881
|
|
1853
|
-
this.
|
1882
|
+
this.renderInputs();
|
1883
|
+
|
1854
1884
|
}
|
1855
1885
|
|
1856
1886
|
getInputIdx(inputEle) {
|
@@ -1939,6 +1969,8 @@ class PasscodeInternal extends BaseInputClass$1 {
|
|
1939
1969
|
input.value = ''; // we are clearing the previous value so we can override it with the new value
|
1940
1970
|
}
|
1941
1971
|
};
|
1972
|
+
|
1973
|
+
forwardAttrs(this, input, { includeAttrs: forwardAttributes });
|
1942
1974
|
});
|
1943
1975
|
}
|
1944
1976
|
|
@@ -1948,11 +1980,9 @@ class PasscodeInternal extends BaseInputClass$1 {
|
|
1948
1980
|
// sync attributes to inputs
|
1949
1981
|
if (oldValue !== newValue) {
|
1950
1982
|
if (observedAttributes$1.includes(attrName)) {
|
1951
|
-
|
1952
|
-
(
|
1953
|
-
|
1954
|
-
input.setAttribute(attrName, newValue)
|
1955
|
-
);
|
1983
|
+
if (attrName === 'digits') {
|
1984
|
+
this.renderInputs();
|
1985
|
+
}
|
1956
1986
|
}
|
1957
1987
|
}
|
1958
1988
|
}
|
@@ -2013,9 +2043,7 @@ overrides$3 = `
|
|
2013
2043
|
width: 100%;
|
2014
2044
|
height: 100%;
|
2015
2045
|
}
|
2016
|
-
|
2017
|
-
min-height: 0;
|
2018
|
-
}
|
2046
|
+
|
2019
2047
|
vaadin-text-field::part(input-field) {
|
2020
2048
|
overflow: hidden;
|
2021
2049
|
padding: 0;
|
@@ -2031,6 +2059,11 @@ overrides$3 = `
|
|
2031
2059
|
-webkit-text-fill-color: var(${TextField.cssVarList.color});
|
2032
2060
|
box-shadow: 0 0 0 var(${TextField.cssVarList.height}) var(${TextField.cssVarList.backgroundColor}) inset;
|
2033
2061
|
}
|
2062
|
+
|
2063
|
+
vaadin-text-field input {
|
2064
|
+
-webkit-mask-image: none;
|
2065
|
+
}
|
2066
|
+
|
2034
2067
|
vaadin-text-field > label,
|
2035
2068
|
vaadin-text-field::part(input-field) {
|
2036
2069
|
color: var(${TextField.cssVarList.color});
|
@@ -2046,6 +2079,10 @@ overrides$3 = `
|
|
2046
2079
|
vaadin-text-field[readonly]::part(input-field)::after {
|
2047
2080
|
border: 0 solid;
|
2048
2081
|
}
|
2082
|
+
|
2083
|
+
vaadin-text-field::before {
|
2084
|
+
height: unset;
|
2085
|
+
}
|
2049
2086
|
`;
|
2050
2087
|
|
2051
2088
|
const componentName$7 = getComponentName('passcode');
|
@@ -2076,16 +2113,20 @@ const customMixin$1 = (superclass) =>
|
|
2076
2113
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
2077
2114
|
|
2078
2115
|
this.inputElement = this.shadowRoot.querySelector(componentName$9);
|
2116
|
+
|
2117
|
+
forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
|
2079
2118
|
}
|
2080
2119
|
};
|
2081
2120
|
|
2082
2121
|
const { borderStyle, borderWidth, ...restTextFieldMappings } =
|
2083
2122
|
textFieldMappings;
|
2084
2123
|
|
2085
|
-
const { digitField, label: label$1, requiredIndicator: requiredIndicator$1 } = {
|
2124
|
+
const { digitField, label: label$1, requiredIndicator: requiredIndicator$1, internalWrapper, focusedValidDigitField } = {
|
2125
|
+
focusedValidDigitField: { selector: () => `${TextField.componentName}[focused="true"]:not([invalid="true"])` },
|
2086
2126
|
digitField: { selector: () => TextField.componentName },
|
2087
2127
|
label: { selector: '> label' },
|
2088
|
-
requiredIndicator: { selector: '[required]::part(required-indicator)::after' }
|
2128
|
+
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
2129
|
+
internalWrapper: { selector: 'descope-passcode-internal .wrapper' }
|
2089
2130
|
};
|
2090
2131
|
|
2091
2132
|
const textVars$1 = TextField.cssVarList;
|
@@ -2095,7 +2136,20 @@ const Passcode = compose(
|
|
2095
2136
|
mappings: {
|
2096
2137
|
...restTextFieldMappings,
|
2097
2138
|
borderColor: { ...digitField, property: textVars$1.borderColor },
|
2139
|
+
outlineColor: { ...digitField, property: textVars$1.outlineColor },
|
2140
|
+
outlineWidth: [
|
2141
|
+
{ ...digitField, property: textVars$1.outlineWidth },
|
2142
|
+
// we want to leave enough space to the digits outline,
|
2143
|
+
// ideally, this would be part of the text field
|
2144
|
+
{ ...internalWrapper, property: 'padding' }
|
2145
|
+
],
|
2098
2146
|
color: [restTextFieldMappings.color, label$1, requiredIndicator$1],
|
2147
|
+
padding: { ...digitField, property: textVars$1.padding },
|
2148
|
+
margin: { ...digitField, property: textVars$1.margin },
|
2149
|
+
textAlign: { ...digitField, property: textVars$1.textAlign },
|
2150
|
+
caretColor: { ...digitField, property: textVars$1.caretColor },
|
2151
|
+
digitsGap: { ...internalWrapper, property: 'gap' },
|
2152
|
+
focusedValidDigitFieldBorderColor: { ...focusedValidDigitField, property: textVars$1.borderColor }
|
2099
2153
|
},
|
2100
2154
|
}),
|
2101
2155
|
draggableMixin,
|
@@ -2114,30 +2168,47 @@ const Passcode = compose(
|
|
2114
2168
|
|
2115
2169
|
descope-passcode-internal {
|
2116
2170
|
-webkit-mask-image: none;
|
2117
|
-
display: flex;
|
2118
|
-
gap: 2px;
|
2119
|
-
align-items: center;
|
2120
2171
|
padding: 0;
|
2172
|
+
width: 100%;
|
2173
|
+
height: 100%;
|
2174
|
+
min-height: initial;
|
2121
2175
|
}
|
2176
|
+
|
2177
|
+
descope-passcode-internal .wrapper {
|
2178
|
+
box-sizing: border-box;
|
2179
|
+
min-height: initial;
|
2180
|
+
height: 100%;
|
2181
|
+
}
|
2182
|
+
|
2183
|
+
descope-passcode-internal descope-text-field {
|
2184
|
+
width: var(${textVars$1.height})
|
2185
|
+
}
|
2186
|
+
|
2122
2187
|
vaadin-text-field::part(input-field) {
|
2123
2188
|
background-color: transparent;
|
2124
2189
|
padding: 0;
|
2125
2190
|
overflow: hidden;
|
2191
|
+
-webkit-mask-image: none;
|
2126
2192
|
}
|
2193
|
+
|
2127
2194
|
vaadin-text-field {
|
2128
2195
|
margin: 0;
|
2129
2196
|
padding: 0;
|
2197
|
+
width: 100%
|
2198
|
+
}
|
2199
|
+
|
2200
|
+
vaadin-text-field::before {
|
2201
|
+
height: initial;
|
2130
2202
|
}
|
2203
|
+
|
2131
2204
|
vaadin-text-field[readonly] > input:placeholder-shown {
|
2132
2205
|
opacity: 1;
|
2133
2206
|
}
|
2134
|
-
|
2135
|
-
vaadin-text-field::part(input-field) {
|
2136
|
-
cursor: pointer;
|
2137
|
-
}
|
2207
|
+
|
2138
2208
|
vaadin-text-field::part(input-field):focus {
|
2139
2209
|
cursor: text;
|
2140
2210
|
}
|
2211
|
+
|
2141
2212
|
vaadin-text-field[required]::part(required-indicator)::after {
|
2142
2213
|
font-size: "12px";
|
2143
2214
|
content: "*";
|
@@ -2331,7 +2402,9 @@ const TextArea = compose(
|
|
2331
2402
|
borderStyle: { selector: selectors.input },
|
2332
2403
|
borderColor: { selector: selectors.input },
|
2333
2404
|
borderRadius: { selector: selectors.input },
|
2334
|
-
|
2405
|
+
outlineWidth: { selector: selectors.input },
|
2406
|
+
outlineStyle: { selector: selectors.input },
|
2407
|
+
outlineColor: { selector: selectors.input },
|
2335
2408
|
outlineOffset: { selector: selectors.input }
|
2336
2409
|
}
|
2337
2410
|
}),
|
@@ -4100,7 +4173,7 @@ const PhoneField = compose(
|
|
4100
4173
|
|
4101
4174
|
phoneInputWidth: { ...phoneInput, property: 'width' },
|
4102
4175
|
|
4103
|
-
color: [label, requiredIndicator],
|
4176
|
+
color: [label, requiredIndicator, {...phoneInput, property: textVars.color}, {...countryCodeInput, property: comboVars.color}],
|
4104
4177
|
|
4105
4178
|
placeholderColor: {
|
4106
4179
|
...phoneInput,
|
@@ -4451,146 +4524,143 @@ var globals = {
|
|
4451
4524
|
fonts
|
4452
4525
|
};
|
4453
4526
|
|
4454
|
-
const globalRefs$
|
4455
|
-
const vars$
|
4527
|
+
const globalRefs$a = getThemeRefs(globals);
|
4528
|
+
const vars$f = Button.cssVarList;
|
4456
4529
|
|
4457
4530
|
const mode = {
|
4458
|
-
primary: globalRefs$
|
4459
|
-
secondary: globalRefs$
|
4460
|
-
success: globalRefs$
|
4461
|
-
error: globalRefs$
|
4462
|
-
surface: globalRefs$
|
4531
|
+
primary: globalRefs$a.colors.primary,
|
4532
|
+
secondary: globalRefs$a.colors.secondary,
|
4533
|
+
success: globalRefs$a.colors.success,
|
4534
|
+
error: globalRefs$a.colors.error,
|
4535
|
+
surface: globalRefs$a.colors.surface
|
4463
4536
|
};
|
4464
4537
|
|
4465
4538
|
const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$l);
|
4466
4539
|
|
4467
4540
|
const button = {
|
4468
4541
|
...helperTheme$2,
|
4469
|
-
[vars$
|
4542
|
+
[vars$f.width]: 'fit-content',
|
4470
4543
|
size: {
|
4471
4544
|
xs: {
|
4472
|
-
[vars$
|
4473
|
-
[vars$
|
4474
|
-
[vars$
|
4545
|
+
[vars$f.height]: '10px',
|
4546
|
+
[vars$f.fontSize]: '10px',
|
4547
|
+
[vars$f.padding]: `0 ${globalRefs$a.spacing.xs}`
|
4475
4548
|
},
|
4476
4549
|
sm: {
|
4477
|
-
[vars$
|
4478
|
-
[vars$
|
4479
|
-
[vars$
|
4550
|
+
[vars$f.height]: '20px',
|
4551
|
+
[vars$f.fontSize]: '10px',
|
4552
|
+
[vars$f.padding]: `0 ${globalRefs$a.spacing.sm}`
|
4480
4553
|
},
|
4481
4554
|
md: {
|
4482
|
-
[vars$
|
4483
|
-
[vars$
|
4484
|
-
[vars$
|
4555
|
+
[vars$f.height]: '30px',
|
4556
|
+
[vars$f.fontSize]: '14px',
|
4557
|
+
[vars$f.padding]: `0 ${globalRefs$a.spacing.md}`
|
4485
4558
|
},
|
4486
4559
|
lg: {
|
4487
|
-
[vars$
|
4488
|
-
[vars$
|
4489
|
-
[vars$
|
4560
|
+
[vars$f.height]: '40px',
|
4561
|
+
[vars$f.fontSize]: '20px',
|
4562
|
+
[vars$f.padding]: `0 ${globalRefs$a.spacing.lg}`
|
4490
4563
|
},
|
4491
4564
|
xl: {
|
4492
|
-
[vars$
|
4493
|
-
[vars$
|
4494
|
-
[vars$
|
4565
|
+
[vars$f.height]: '50px',
|
4566
|
+
[vars$f.fontSize]: '25px',
|
4567
|
+
[vars$f.padding]: `0 ${globalRefs$a.spacing.xl}`
|
4495
4568
|
}
|
4496
4569
|
},
|
4497
4570
|
|
4498
|
-
[vars$
|
4499
|
-
[vars$
|
4500
|
-
[vars$
|
4501
|
-
[vars$
|
4502
|
-
[vars$
|
4571
|
+
[vars$f.borderRadius]: globalRefs$a.radius.lg,
|
4572
|
+
[vars$f.cursor]: 'pointer',
|
4573
|
+
[vars$f.borderWidth]: '2px',
|
4574
|
+
[vars$f.borderStyle]: 'solid',
|
4575
|
+
[vars$f.borderColor]: 'transparent',
|
4503
4576
|
|
4504
4577
|
_fullWidth: {
|
4505
|
-
[vars$
|
4578
|
+
[vars$f.width]: '100%'
|
4506
4579
|
},
|
4507
4580
|
_loading: {
|
4508
|
-
[vars$
|
4581
|
+
[vars$f.cursor]: 'wait'
|
4509
4582
|
},
|
4510
4583
|
|
4511
4584
|
variant: {
|
4512
4585
|
contained: {
|
4513
|
-
[vars$
|
4514
|
-
[vars$
|
4586
|
+
[vars$f.color]: helperRefs$2.contrast,
|
4587
|
+
[vars$f.backgroundColor]: helperRefs$2.main,
|
4515
4588
|
_hover: {
|
4516
|
-
[vars$
|
4589
|
+
[vars$f.backgroundColor]: helperRefs$2.dark
|
4517
4590
|
},
|
4518
4591
|
_loading: {
|
4519
|
-
[vars$
|
4592
|
+
[vars$f.backgroundColor]: helperRefs$2.main
|
4520
4593
|
}
|
4521
4594
|
},
|
4522
4595
|
outline: {
|
4523
|
-
[vars$
|
4524
|
-
[vars$
|
4596
|
+
[vars$f.color]: helperRefs$2.main,
|
4597
|
+
[vars$f.borderColor]: helperRefs$2.main,
|
4525
4598
|
_hover: {
|
4526
|
-
[vars$
|
4527
|
-
[vars$
|
4599
|
+
[vars$f.color]: helperRefs$2.dark,
|
4600
|
+
[vars$f.borderColor]: helperRefs$2.dark,
|
4528
4601
|
_error: {
|
4529
|
-
[vars$
|
4602
|
+
[vars$f.color]: helperRefs$2.error
|
4530
4603
|
}
|
4531
4604
|
}
|
4532
4605
|
},
|
4533
4606
|
link: {
|
4534
|
-
[vars$
|
4535
|
-
[vars$
|
4536
|
-
[vars$e.margin]: 0,
|
4537
|
-
[vars$e.lineHeight]: helperRefs$2.height,
|
4538
|
-
[vars$e.borderRadius]: 0,
|
4607
|
+
[vars$f.color]: helperRefs$2.main,
|
4608
|
+
[vars$f.lineHeight]: helperRefs$2.height,
|
4539
4609
|
_hover: {
|
4540
|
-
[vars$
|
4541
|
-
[vars$
|
4610
|
+
[vars$f.color]: helperRefs$2.main,
|
4611
|
+
[vars$f.textDecoration]: 'underline'
|
4542
4612
|
}
|
4543
4613
|
}
|
4544
4614
|
}
|
4545
4615
|
};
|
4546
4616
|
|
4547
|
-
const globalRefs$
|
4617
|
+
const globalRefs$9 = getThemeRefs(globals);
|
4548
4618
|
|
4549
|
-
const vars$
|
4619
|
+
const vars$e = TextField.cssVarList;
|
4550
4620
|
|
4551
4621
|
const textField = (vars) => ({
|
4552
4622
|
size: {
|
4553
4623
|
xs: {
|
4554
4624
|
[vars.height]: '14px',
|
4555
4625
|
[vars.fontSize]: '8px',
|
4556
|
-
[vars.padding]: `0 ${globalRefs$
|
4626
|
+
[vars.padding]: `0 ${globalRefs$9.spacing.xs}`
|
4557
4627
|
},
|
4558
4628
|
sm: {
|
4559
4629
|
[vars.height]: '20px',
|
4560
4630
|
[vars.fontSize]: '10px',
|
4561
|
-
[vars.padding]: `0 ${globalRefs$
|
4631
|
+
[vars.padding]: `0 ${globalRefs$9.spacing.sm}`
|
4562
4632
|
},
|
4563
4633
|
md: {
|
4564
4634
|
[vars.height]: '30px',
|
4565
4635
|
[vars.fontSize]: '14px',
|
4566
|
-
[vars.padding]: `0 ${globalRefs$
|
4636
|
+
[vars.padding]: `0 ${globalRefs$9.spacing.md}`
|
4567
4637
|
},
|
4568
4638
|
lg: {
|
4569
4639
|
[vars.height]: '40px',
|
4570
4640
|
[vars.fontSize]: '20px',
|
4571
|
-
[vars.padding]: `0 ${globalRefs$
|
4641
|
+
[vars.padding]: `0 ${globalRefs$9.spacing.lg}`
|
4572
4642
|
},
|
4573
4643
|
xl: {
|
4574
4644
|
[vars.height]: '50px',
|
4575
4645
|
[vars.fontSize]: '25px',
|
4576
|
-
[vars.padding]: `0 ${globalRefs$
|
4646
|
+
[vars.padding]: `0 ${globalRefs$9.spacing.xl}`
|
4577
4647
|
}
|
4578
4648
|
},
|
4579
4649
|
|
4580
|
-
[vars.color]: globalRefs$
|
4581
|
-
[vars.placeholderColor]: globalRefs$
|
4650
|
+
[vars.color]: globalRefs$9.colors.surface.contrast,
|
4651
|
+
[vars.placeholderColor]: globalRefs$9.colors.surface.main,
|
4582
4652
|
|
4583
|
-
[vars.backgroundColor]: globalRefs$
|
4653
|
+
[vars.backgroundColor]: globalRefs$9.colors.surface.light,
|
4584
4654
|
|
4585
4655
|
[vars.borderWidth]: '1px',
|
4586
4656
|
[vars.borderStyle]: 'solid',
|
4587
4657
|
[vars.borderColor]: 'transparent',
|
4588
|
-
[vars.borderRadius]: globalRefs$
|
4658
|
+
[vars.borderRadius]: globalRefs$9.radius.sm,
|
4589
4659
|
|
4590
4660
|
_disabled: {
|
4591
|
-
[vars.color]: globalRefs$
|
4592
|
-
[vars.placeholderColor]: globalRefs$
|
4593
|
-
[vars.backgroundColor]: globalRefs$
|
4661
|
+
[vars.color]: globalRefs$9.colors.surface.dark,
|
4662
|
+
[vars.placeholderColor]: globalRefs$9.colors.surface.light,
|
4663
|
+
[vars.backgroundColor]: globalRefs$9.colors.surface.main
|
4594
4664
|
},
|
4595
4665
|
|
4596
4666
|
_fullWidth: {
|
@@ -4598,27 +4668,30 @@ const textField = (vars) => ({
|
|
4598
4668
|
},
|
4599
4669
|
|
4600
4670
|
_focused: {
|
4601
|
-
[vars.
|
4671
|
+
[vars.outlineWidth]: '2px',
|
4672
|
+
[vars.outlineStyle]: 'solid',
|
4673
|
+
[vars.outlineColor]: globalRefs$9.colors.surface.main
|
4602
4674
|
},
|
4603
4675
|
|
4604
4676
|
_bordered: {
|
4605
|
-
[vars.borderColor]: globalRefs$
|
4677
|
+
[vars.borderColor]: globalRefs$9.colors.surface.main
|
4606
4678
|
},
|
4607
4679
|
|
4608
4680
|
_invalid: {
|
4609
|
-
[vars.borderColor]: globalRefs$
|
4610
|
-
[vars.color]: globalRefs$
|
4611
|
-
[vars.
|
4681
|
+
[vars.borderColor]: globalRefs$9.colors.error.main,
|
4682
|
+
[vars.color]: globalRefs$9.colors.error.main,
|
4683
|
+
[vars.outlineColor]: globalRefs$9.colors.error.light,
|
4684
|
+
[vars.placeholderColor]: globalRefs$9.colors.error.light
|
4612
4685
|
}
|
4613
4686
|
});
|
4614
4687
|
|
4615
|
-
var textField$1 = textField(vars$
|
4688
|
+
var textField$1 = textField(vars$e);
|
4616
4689
|
|
4617
|
-
const vars$
|
4690
|
+
const vars$d = PasswordField.cssVarList;
|
4618
4691
|
|
4619
4692
|
const passwordField = {
|
4620
|
-
...textField(vars$
|
4621
|
-
[vars$
|
4693
|
+
...textField(vars$d),
|
4694
|
+
[vars$d.revealCursor]: 'pointer'
|
4622
4695
|
};
|
4623
4696
|
|
4624
4697
|
const numberField = {
|
@@ -4629,58 +4702,61 @@ const emailField = {
|
|
4629
4702
|
...textField(EmailField.cssVarList)
|
4630
4703
|
};
|
4631
4704
|
|
4632
|
-
const globalRefs$
|
4633
|
-
const vars$
|
4705
|
+
const globalRefs$8 = getThemeRefs(globals);
|
4706
|
+
const vars$c = TextArea.cssVarList;
|
4634
4707
|
|
4635
4708
|
const textArea = {
|
4636
|
-
[vars$
|
4637
|
-
[vars$
|
4638
|
-
[vars$
|
4639
|
-
[vars$
|
4709
|
+
[vars$c.width]: '100%',
|
4710
|
+
[vars$c.color]: globalRefs$8.colors.primary.main,
|
4711
|
+
[vars$c.backgroundColor]: globalRefs$8.colors.surface.light,
|
4712
|
+
[vars$c.resize]: 'vertical',
|
4713
|
+
|
4714
|
+
[vars$c.borderRadius]: globalRefs$8.radius.sm,
|
4715
|
+
[vars$c.borderWidth]: '1px',
|
4716
|
+
[vars$c.borderStyle]: 'solid',
|
4717
|
+
[vars$c.borderColor]: 'transparent',
|
4718
|
+
[vars$c.outlineWidth]: '2px',
|
4719
|
+
[vars$c.outlineStyle]: 'solid',
|
4640
4720
|
|
4641
|
-
[vars$b.borderRadius]: globalRefs$7.radius.sm,
|
4642
|
-
[vars$b.borderWidth]: '1px',
|
4643
|
-
[vars$b.borderStyle]: 'solid',
|
4644
|
-
[vars$b.borderColor]: 'transparent',
|
4645
4721
|
|
4646
4722
|
_bordered: {
|
4647
|
-
[vars$
|
4723
|
+
[vars$c.borderColor]: globalRefs$8.colors.surface.main
|
4648
4724
|
},
|
4649
4725
|
|
4650
4726
|
_focused: {
|
4651
|
-
[vars$
|
4727
|
+
[vars$c.outlineColor]: globalRefs$8.colors.surface.main
|
4652
4728
|
},
|
4653
4729
|
|
4654
4730
|
_fullWidth: {
|
4655
|
-
[vars$
|
4731
|
+
[vars$c.width]: '100%'
|
4656
4732
|
},
|
4657
4733
|
|
4658
4734
|
_disabled: {
|
4659
|
-
[vars$
|
4735
|
+
[vars$c.cursor]: 'not-allowed'
|
4660
4736
|
},
|
4661
4737
|
|
4662
4738
|
_invalid: {
|
4663
|
-
[vars$
|
4739
|
+
[vars$c.outlineColor]: globalRefs$8.colors.error.main
|
4664
4740
|
}
|
4665
4741
|
};
|
4666
4742
|
|
4667
|
-
const vars$
|
4743
|
+
const vars$b = Checkbox.cssVarList;
|
4668
4744
|
|
4669
4745
|
const checkbox = {
|
4670
|
-
[vars$
|
4671
|
-
[vars$
|
4746
|
+
[vars$b.cursor]: 'pointer',
|
4747
|
+
[vars$b.width]: 'fit-content'
|
4672
4748
|
};
|
4673
4749
|
|
4674
|
-
const vars$
|
4750
|
+
const vars$a = SwitchToggle.cssVarList;
|
4675
4751
|
|
4676
4752
|
const swtichToggle = {
|
4677
|
-
[vars$
|
4678
|
-
[vars$
|
4753
|
+
[vars$a.width]: '70px',
|
4754
|
+
[vars$a.cursor]: [{}, { selector: '> label' }]
|
4679
4755
|
};
|
4680
4756
|
|
4681
|
-
const globalRefs$
|
4757
|
+
const globalRefs$7 = getThemeRefs(globals);
|
4682
4758
|
|
4683
|
-
const vars$
|
4759
|
+
const vars$9 = Container.cssVarList;
|
4684
4760
|
|
4685
4761
|
const verticalAlignment = {
|
4686
4762
|
start: { verticalAlignment: 'start' },
|
@@ -4703,31 +4779,31 @@ const [helperTheme$1, helperRefs$1, helperVars] =
|
|
4703
4779
|
|
4704
4780
|
const container = {
|
4705
4781
|
...helperTheme$1,
|
4706
|
-
[vars$
|
4782
|
+
[vars$9.width]: '100%',
|
4707
4783
|
verticalPadding: {
|
4708
|
-
sm: { [vars$
|
4709
|
-
md: { [vars$
|
4710
|
-
lg: { [vars$
|
4784
|
+
sm: { [vars$9.verticalPadding]: '5px' },
|
4785
|
+
md: { [vars$9.verticalPadding]: '10px' },
|
4786
|
+
lg: { [vars$9.verticalPadding]: '20px' },
|
4711
4787
|
},
|
4712
4788
|
horizontalPadding: {
|
4713
|
-
sm: { [vars$
|
4714
|
-
md: { [vars$
|
4715
|
-
lg: { [vars$
|
4789
|
+
sm: { [vars$9.horizontalPadding]: '5px' },
|
4790
|
+
md: { [vars$9.horizontalPadding]: '10px' },
|
4791
|
+
lg: { [vars$9.horizontalPadding]: '20px' },
|
4716
4792
|
},
|
4717
4793
|
direction: {
|
4718
4794
|
row: {
|
4719
|
-
[vars$
|
4720
|
-
[vars$
|
4721
|
-
[vars$
|
4795
|
+
[vars$9.flexDirection]: 'row',
|
4796
|
+
[vars$9.alignItems]: helperRefs$1.verticalAlignment,
|
4797
|
+
[vars$9.justifyContent]: helperRefs$1.horizontalAlignment,
|
4722
4798
|
horizontalAlignment: {
|
4723
4799
|
spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
|
4724
4800
|
}
|
4725
4801
|
},
|
4726
4802
|
|
4727
4803
|
column: {
|
4728
|
-
[vars$
|
4729
|
-
[vars$
|
4730
|
-
[vars$
|
4804
|
+
[vars$9.flexDirection]: 'column',
|
4805
|
+
[vars$9.alignItems]: helperRefs$1.horizontalAlignment,
|
4806
|
+
[vars$9.justifyContent]: helperRefs$1.verticalAlignment,
|
4731
4807
|
verticalAlignment: {
|
4732
4808
|
spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
|
4733
4809
|
}
|
@@ -4736,187 +4812,187 @@ const container = {
|
|
4736
4812
|
|
4737
4813
|
spaceBetween: {
|
4738
4814
|
sm: {
|
4739
|
-
[vars$
|
4815
|
+
[vars$9.gap]: '10px'
|
4740
4816
|
},
|
4741
4817
|
md: {
|
4742
|
-
[vars$
|
4818
|
+
[vars$9.gap]: '20px'
|
4743
4819
|
},
|
4744
4820
|
lg: {
|
4745
|
-
[vars$
|
4821
|
+
[vars$9.gap]: '30px'
|
4746
4822
|
}
|
4747
4823
|
},
|
4748
4824
|
|
4749
4825
|
shadow: {
|
4750
4826
|
sm: {
|
4751
|
-
[vars$
|
4827
|
+
[vars$9.boxShadow]: `${globalRefs$7.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$7.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
|
4752
4828
|
},
|
4753
4829
|
md: {
|
4754
|
-
[vars$
|
4830
|
+
[vars$9.boxShadow]: `${globalRefs$7.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$7.shadow.narrow.md} ${helperRefs$1.shadowColor}`
|
4755
4831
|
},
|
4756
4832
|
lg: {
|
4757
|
-
[vars$
|
4833
|
+
[vars$9.boxShadow]: `${globalRefs$7.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$7.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
|
4758
4834
|
},
|
4759
4835
|
xl: {
|
4760
|
-
[vars$
|
4836
|
+
[vars$9.boxShadow]: `${globalRefs$7.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$7.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
|
4761
4837
|
},
|
4762
4838
|
'2xl': {
|
4763
4839
|
[helperVars.shadowColor]: '#00000050',
|
4764
|
-
[vars$
|
4840
|
+
[vars$9.boxShadow]: `${globalRefs$7.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
|
4765
4841
|
},
|
4766
4842
|
},
|
4767
4843
|
|
4768
4844
|
borderRadius: {
|
4769
4845
|
sm: {
|
4770
|
-
[vars$
|
4846
|
+
[vars$9.borderRadius]: globalRefs$7.radius.sm
|
4771
4847
|
},
|
4772
4848
|
md: {
|
4773
|
-
[vars$
|
4849
|
+
[vars$9.borderRadius]: globalRefs$7.radius.md
|
4774
4850
|
},
|
4775
4851
|
lg: {
|
4776
|
-
[vars$
|
4852
|
+
[vars$9.borderRadius]: globalRefs$7.radius.lg
|
4777
4853
|
},
|
4778
4854
|
}
|
4779
4855
|
};
|
4780
4856
|
|
4781
|
-
const vars$
|
4857
|
+
const vars$8 = Logo.cssVarList;
|
4782
4858
|
|
4783
4859
|
const logo = {
|
4784
|
-
[vars$
|
4860
|
+
[vars$8.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
|
4785
4861
|
};
|
4786
4862
|
|
4787
|
-
const globalRefs$
|
4863
|
+
const globalRefs$6 = getThemeRefs(globals);
|
4788
4864
|
|
4789
|
-
const vars$
|
4865
|
+
const vars$7 = Text.cssVarList;
|
4790
4866
|
|
4791
4867
|
const text = {
|
4792
|
-
[vars$
|
4793
|
-
[vars$
|
4794
|
-
[vars$
|
4795
|
-
[vars$
|
4868
|
+
[vars$7.lineHeight]: '1em',
|
4869
|
+
[vars$7.display]: 'inline-block',
|
4870
|
+
[vars$7.textAlign]: 'left',
|
4871
|
+
[vars$7.color]: globalRefs$6.colors.surface.dark,
|
4796
4872
|
variant: {
|
4797
4873
|
h1: {
|
4798
|
-
[vars$
|
4799
|
-
[vars$
|
4800
|
-
[vars$
|
4874
|
+
[vars$7.fontSize]: globalRefs$6.typography.h1.size,
|
4875
|
+
[vars$7.fontWeight]: globalRefs$6.typography.h1.weight,
|
4876
|
+
[vars$7.fontFamily]: globalRefs$6.typography.h1.font
|
4801
4877
|
},
|
4802
4878
|
h2: {
|
4803
|
-
[vars$
|
4804
|
-
[vars$
|
4805
|
-
[vars$
|
4879
|
+
[vars$7.fontSize]: globalRefs$6.typography.h2.size,
|
4880
|
+
[vars$7.fontWeight]: globalRefs$6.typography.h2.weight,
|
4881
|
+
[vars$7.fontFamily]: globalRefs$6.typography.h2.font
|
4806
4882
|
},
|
4807
4883
|
h3: {
|
4808
|
-
[vars$
|
4809
|
-
[vars$
|
4810
|
-
[vars$
|
4884
|
+
[vars$7.fontSize]: globalRefs$6.typography.h3.size,
|
4885
|
+
[vars$7.fontWeight]: globalRefs$6.typography.h3.weight,
|
4886
|
+
[vars$7.fontFamily]: globalRefs$6.typography.h3.font
|
4811
4887
|
},
|
4812
4888
|
subtitle1: {
|
4813
|
-
[vars$
|
4814
|
-
[vars$
|
4815
|
-
[vars$
|
4889
|
+
[vars$7.fontSize]: globalRefs$6.typography.subtitle1.size,
|
4890
|
+
[vars$7.fontWeight]: globalRefs$6.typography.subtitle1.weight,
|
4891
|
+
[vars$7.fontFamily]: globalRefs$6.typography.subtitle1.font
|
4816
4892
|
},
|
4817
4893
|
subtitle2: {
|
4818
|
-
[vars$
|
4819
|
-
[vars$
|
4820
|
-
[vars$
|
4894
|
+
[vars$7.fontSize]: globalRefs$6.typography.subtitle2.size,
|
4895
|
+
[vars$7.fontWeight]: globalRefs$6.typography.subtitle2.weight,
|
4896
|
+
[vars$7.fontFamily]: globalRefs$6.typography.subtitle2.font
|
4821
4897
|
},
|
4822
4898
|
body1: {
|
4823
|
-
[vars$
|
4824
|
-
[vars$
|
4825
|
-
[vars$
|
4899
|
+
[vars$7.fontSize]: globalRefs$6.typography.body1.size,
|
4900
|
+
[vars$7.fontWeight]: globalRefs$6.typography.body1.weight,
|
4901
|
+
[vars$7.fontFamily]: globalRefs$6.typography.body1.font
|
4826
4902
|
},
|
4827
4903
|
body2: {
|
4828
|
-
[vars$
|
4829
|
-
[vars$
|
4830
|
-
[vars$
|
4904
|
+
[vars$7.fontSize]: globalRefs$6.typography.body2.size,
|
4905
|
+
[vars$7.fontWeight]: globalRefs$6.typography.body2.weight,
|
4906
|
+
[vars$7.fontFamily]: globalRefs$6.typography.body2.font
|
4831
4907
|
}
|
4832
4908
|
},
|
4833
4909
|
mode: {
|
4834
4910
|
primary: {
|
4835
|
-
[vars$
|
4911
|
+
[vars$7.color]: globalRefs$6.colors.primary.main
|
4836
4912
|
},
|
4837
4913
|
secondary: {
|
4838
|
-
[vars$
|
4914
|
+
[vars$7.color]: globalRefs$6.colors.secondary.main
|
4839
4915
|
},
|
4840
4916
|
error: {
|
4841
|
-
[vars$
|
4917
|
+
[vars$7.color]: globalRefs$6.colors.error.main
|
4842
4918
|
},
|
4843
4919
|
success: {
|
4844
|
-
[vars$
|
4920
|
+
[vars$7.color]: globalRefs$6.colors.success.main
|
4845
4921
|
}
|
4846
4922
|
},
|
4847
4923
|
textAlign: {
|
4848
|
-
right: { [vars$
|
4849
|
-
left: { [vars$
|
4850
|
-
center: { [vars$
|
4924
|
+
right: { [vars$7.textAlign]: 'right' },
|
4925
|
+
left: { [vars$7.textAlign]: 'left' },
|
4926
|
+
center: { [vars$7.textAlign]: 'center' }
|
4851
4927
|
},
|
4852
4928
|
_fullWidth: {
|
4853
|
-
[vars$
|
4854
|
-
[vars$
|
4929
|
+
[vars$7.width]: '100%',
|
4930
|
+
[vars$7.display]: 'block'
|
4855
4931
|
},
|
4856
4932
|
_italic: {
|
4857
|
-
[vars$
|
4933
|
+
[vars$7.fontStyle]: 'italic'
|
4858
4934
|
},
|
4859
4935
|
_uppercase: {
|
4860
|
-
[vars$
|
4936
|
+
[vars$7.textTransform]: 'uppercase'
|
4861
4937
|
},
|
4862
4938
|
_lowercase: {
|
4863
|
-
[vars$
|
4939
|
+
[vars$7.textTransform]: 'lowercase'
|
4864
4940
|
}
|
4865
4941
|
};
|
4866
4942
|
|
4867
|
-
const globalRefs$
|
4868
|
-
const vars$
|
4943
|
+
const globalRefs$5 = getThemeRefs(globals);
|
4944
|
+
const vars$6 = Link.cssVarList;
|
4869
4945
|
|
4870
4946
|
const link = {
|
4871
|
-
[vars$
|
4872
|
-
[vars$
|
4873
|
-
[vars$
|
4874
|
-
[vars$
|
4875
|
-
[vars$
|
4947
|
+
[vars$6.cursor]: 'pointer',
|
4948
|
+
[vars$6.borderBottomWidth]: '2px',
|
4949
|
+
[vars$6.borderBottomStyle]: 'solid',
|
4950
|
+
[vars$6.borderBottomColor]: 'transparent',
|
4951
|
+
[vars$6.color]: globalRefs$5.colors.primary.main,
|
4876
4952
|
|
4877
4953
|
_hover: {
|
4878
|
-
[vars$
|
4954
|
+
[vars$6.borderBottomColor]: globalRefs$5.colors.primary.main
|
4879
4955
|
},
|
4880
4956
|
|
4881
4957
|
textAlign: {
|
4882
|
-
right: { [vars$
|
4883
|
-
left: { [vars$
|
4884
|
-
center: { [vars$
|
4958
|
+
right: { [vars$6.textAlign]: 'right' },
|
4959
|
+
left: { [vars$6.textAlign]: 'left' },
|
4960
|
+
center: { [vars$6.textAlign]: 'center' }
|
4885
4961
|
},
|
4886
4962
|
|
4887
4963
|
_fullWidth: {
|
4888
|
-
[vars$
|
4964
|
+
[vars$6.width]: '100%'
|
4889
4965
|
},
|
4890
4966
|
|
4891
4967
|
mode: {
|
4892
4968
|
primary: {
|
4893
|
-
[vars$
|
4969
|
+
[vars$6.color]: globalRefs$5.colors.primary.main,
|
4894
4970
|
_hover: {
|
4895
|
-
[vars$
|
4971
|
+
[vars$6.borderBottomColor]: globalRefs$5.colors.primary.main
|
4896
4972
|
}
|
4897
4973
|
},
|
4898
4974
|
secondary: {
|
4899
|
-
[vars$
|
4975
|
+
[vars$6.color]: globalRefs$5.colors.secondary.main,
|
4900
4976
|
_hover: {
|
4901
|
-
[vars$
|
4977
|
+
[vars$6.borderBottomColor]: globalRefs$5.colors.secondary.main
|
4902
4978
|
}
|
4903
4979
|
},
|
4904
4980
|
error: {
|
4905
|
-
[vars$
|
4981
|
+
[vars$6.color]: globalRefs$5.colors.error.main,
|
4906
4982
|
_hover: {
|
4907
|
-
[vars$
|
4983
|
+
[vars$6.borderBottomColor]: globalRefs$5.colors.error.main
|
4908
4984
|
}
|
4909
4985
|
},
|
4910
4986
|
success: {
|
4911
|
-
[vars$
|
4987
|
+
[vars$6.color]: globalRefs$5.colors.success.main,
|
4912
4988
|
_hover: {
|
4913
|
-
[vars$
|
4989
|
+
[vars$6.borderBottomColor]: globalRefs$5.colors.success.main
|
4914
4990
|
}
|
4915
4991
|
}
|
4916
4992
|
}
|
4917
4993
|
};
|
4918
4994
|
|
4919
|
-
const vars$
|
4995
|
+
const vars$5 = Divider.cssVarList;
|
4920
4996
|
|
4921
4997
|
const thickness = '2px';
|
4922
4998
|
const textPaddingSize = '10px';
|
@@ -4925,30 +5001,62 @@ const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize
|
|
4925
5001
|
|
4926
5002
|
const divider = {
|
4927
5003
|
...helperTheme,
|
4928
|
-
[vars$
|
4929
|
-
[vars$
|
4930
|
-
[vars$
|
4931
|
-
[vars$
|
4932
|
-
[vars$
|
4933
|
-
[vars$
|
4934
|
-
[vars$
|
4935
|
-
[vars$
|
4936
|
-
[vars$
|
4937
|
-
[vars$
|
5004
|
+
[vars$5.alignItems]: 'center',
|
5005
|
+
[vars$5.dividerHeight]: helperRefs.thickness,
|
5006
|
+
[vars$5.backgroundColor]: 'currentColor',
|
5007
|
+
[vars$5.opacity]: '0.2',
|
5008
|
+
[vars$5.textPadding]: `0 ${helperRefs.textPaddingSize}`,
|
5009
|
+
[vars$5.width]: '100%',
|
5010
|
+
[vars$5.flexDirection]: 'row',
|
5011
|
+
[vars$5.alignSelf]: 'strech',
|
5012
|
+
[vars$5.textWidth]: 'fit-content',
|
5013
|
+
[vars$5.maxTextWidth]: 'calc(100% - 100px)',
|
4938
5014
|
_vertical: {
|
4939
|
-
[vars$
|
4940
|
-
[vars$
|
4941
|
-
[vars$
|
4942
|
-
[vars$
|
4943
|
-
[vars$
|
4944
|
-
[vars$
|
4945
|
-
[vars$
|
4946
|
-
[vars$
|
5015
|
+
[vars$5.padding]: `0 calc(${thickness} * 3)`,
|
5016
|
+
[vars$5.width]: 'fit-content',
|
5017
|
+
[vars$5.textPadding]: `${helperRefs.textPaddingSize} 0`,
|
5018
|
+
[vars$5.flexDirection]: 'column',
|
5019
|
+
[vars$5.minHeight]: '200px',
|
5020
|
+
[vars$5.textWidth]: 'fit-content',
|
5021
|
+
[vars$5.dividerWidth]: helperRefs.thickness,
|
5022
|
+
[vars$5.maxTextWidth]: '100%',
|
4947
5023
|
}
|
4948
5024
|
};
|
4949
5025
|
|
5026
|
+
const vars$4 = Passcode.cssVarList;
|
5027
|
+
const globalRefs$4 = getThemeRefs(globals);
|
5028
|
+
|
4950
5029
|
const passcode = {
|
4951
|
-
|
5030
|
+
[vars$4.backgroundColor]: globalRefs$4.colors.surface.light,
|
5031
|
+
[vars$4.outlineWidth]: '2px',
|
5032
|
+
[vars$4.outlineColor]: globalRefs$4.colors.primary.main,
|
5033
|
+
[vars$4.padding]: '0',
|
5034
|
+
[vars$4.textAlign]: 'center',
|
5035
|
+
[vars$4.borderColor]: 'transparent',
|
5036
|
+
[vars$4.digitsGap]: '4px',
|
5037
|
+
[vars$4.focusedValidDigitFieldBorderColor]: globalRefs$4.colors.primary.main,
|
5038
|
+
|
5039
|
+
_hideCursor: {
|
5040
|
+
[vars$4.caretColor]: 'transparent',
|
5041
|
+
},
|
5042
|
+
|
5043
|
+
_disabled: {
|
5044
|
+
[vars$4.backgroundColor]: globalRefs$4.colors.surface.main
|
5045
|
+
},
|
5046
|
+
|
5047
|
+
_fullWidth: {
|
5048
|
+
[vars$4.width]: '100%'
|
5049
|
+
},
|
5050
|
+
|
5051
|
+
_bordered: {
|
5052
|
+
[vars$4.borderColor]: globalRefs$4.colors.surface.main
|
5053
|
+
},
|
5054
|
+
|
5055
|
+
_invalid: {
|
5056
|
+
[vars$4.borderColor]: globalRefs$4.colors.error.main,
|
5057
|
+
[vars$4.color]: globalRefs$4.colors.error.main,
|
5058
|
+
[vars$4.outlineColor]: globalRefs$4.colors.error.light,
|
5059
|
+
},
|
4952
5060
|
};
|
4953
5061
|
|
4954
5062
|
const globalRefs$3 = getThemeRefs(globals);
|