@descope/web-components-ui 1.0.52 → 1.0.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/index.esm.js +514 -281
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/umd/832.js +1 -0
  4. package/dist/umd/descope-button-index-js.js +1 -1
  5. package/dist/umd/descope-checkbox-index-js.js +1 -1
  6. package/dist/umd/descope-combo-index-js.js +1 -1
  7. package/dist/umd/descope-container-index-js.js +1 -1
  8. package/dist/umd/descope-date-picker-index-js.js +1 -1
  9. package/dist/umd/descope-divider-index-js.js +1 -0
  10. package/dist/umd/descope-email-field-index-js.js +1 -1
  11. package/dist/umd/descope-logo-index-js.js +1 -1
  12. package/dist/umd/descope-number-field-index-js.js +1 -1
  13. package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
  14. package/dist/umd/descope-passcode-index-js.js +1 -1
  15. package/dist/umd/descope-password-field-index-js.js +1 -1
  16. package/dist/umd/descope-switch-toggle-index-js.js +1 -1
  17. package/dist/umd/descope-text-area-index-js.js +1 -1
  18. package/dist/umd/descope-text-field-index-js.js +1 -1
  19. package/dist/umd/descope-text-index-js.js +1 -1
  20. package/dist/umd/index.js +1 -1
  21. package/package.json +1 -1
  22. package/src/components/DescopeBaseClass.js +1 -0
  23. package/src/components/descope-button/Button.js +0 -1
  24. package/src/components/descope-combo/index.js +2 -1
  25. package/src/components/descope-container/Container.js +13 -5
  26. package/src/components/descope-divider/Divider.js +85 -0
  27. package/src/components/descope-divider/index.js +6 -0
  28. package/src/components/descope-logo/Logo.js +5 -4
  29. package/src/components/descope-password-field/PasswordField.js +0 -1
  30. package/src/components/descope-text/Text.js +8 -1
  31. package/src/components/descope-text/index.js +0 -1
  32. package/src/componentsHelpers/createProxy/helpers.js +24 -7
  33. package/src/componentsHelpers/createProxy/index.js +6 -3
  34. package/src/componentsHelpers/enforceNestingElementsStylesMixin.js +95 -0
  35. package/src/index.js +3 -0
  36. package/src/theme/components/divider.js +24 -0
  37. package/src/theme/components/index.js +2 -0
  38. package/src/theme/components/text.js +6 -0
  39. package/dist/umd/433.js +0 -1
package/dist/index.esm.js CHANGED
@@ -5,6 +5,7 @@ import '@vaadin/email-field';
5
5
  import '@vaadin/password-field';
6
6
  import '@vaadin/text-area';
7
7
  import '@vaadin/date-picker';
8
+ import '@vaadin/checkbox';
8
9
  import merge from 'lodash.merge';
9
10
  import set from 'lodash.set';
10
11
  import Color from 'color';
@@ -246,17 +247,32 @@ const draggableMixin = (superclass) =>
246
247
  }
247
248
  };
248
249
 
249
- const observeAttributes = (ele, callback, excludeAttrs) => {
250
+ class DescopeBaseClass extends HTMLElement {}
251
+
252
+ const observeAttributes = (
253
+ ele,
254
+ callback,
255
+ { excludeAttrs = [], includeAttrs = [] }
256
+ ) => {
250
257
  // sync all attrs on init
251
- callback(...Array.from(ele.attributes).map((attr) => attr.name));
258
+ callback(
259
+ ...Array.from(ele.attributes)
260
+ .filter(
261
+ (attr) =>
262
+ !excludeAttrs.includes(attr.name) &&
263
+ (!includeAttrs.length || includeAttrs.includes(attr.name))
264
+ )
265
+ .map((attr) => attr.name)
266
+ );
252
267
 
253
268
  const observer = new MutationObserver((mutationsList) => {
254
269
  for (const mutation of mutationsList) {
255
270
  if (
256
271
  mutation.type === 'attributes' &&
257
- !excludeAttrs.includes(mutation.attributeName)
272
+ !excludeAttrs.includes(mutation.attributeName) &&
273
+ (!includeAttrs.length || includeAttrs.includes(attr.name))
258
274
  ) {
259
- callback(mutation.attributeName);
275
+ callback([mutation.attributeName]);
260
276
  }
261
277
  }
262
278
  });
@@ -279,9 +295,13 @@ const createSyncAttrsCb =
279
295
  });
280
296
  };
281
297
 
282
- const syncAttrs = (ele1, ele2, excludeAttrs) => {
283
- observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), excludeAttrs);
284
- observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), excludeAttrs);
298
+ const syncAttrs = (ele1, ele2, options) => {
299
+ observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
300
+ observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
301
+ };
302
+
303
+ const forwardAttrs = (source, dest, options) => {
304
+ observeAttributes(source, createSyncAttrsCb(source, dest), options);
285
305
  };
286
306
 
287
307
  const createProxy = ({
@@ -299,7 +319,7 @@ const createProxy = ({
299
319
  </${wrappedEleName}>
300
320
  `;
301
321
 
302
- class ProxyElement extends HTMLElement {
322
+ class ProxyElement extends DescopeBaseClass {
303
323
  static get componentName() {
304
324
  return componentName;
305
325
  }
@@ -307,7 +327,6 @@ const createProxy = ({
307
327
  constructor() {
308
328
  super().attachShadow({ mode: 'open' }).innerHTML = template;
309
329
  this.hostElement = this.shadowRoot.host;
310
- this.componentName = this.hostElement.tagName.toLowerCase();
311
330
  this.baseSelector = wrappedEleName;
312
331
  this.shadowRoot.getElementById('create-proxy').innerHTML =
313
332
  typeof style === 'function' ? style() : style;
@@ -348,7 +367,10 @@ const createProxy = ({
348
367
 
349
368
  // sync events
350
369
  this.addEventListener = (...args) => this.proxyElement.addEventListener(...args);
351
- syncAttrs(this.proxyElement, this.hostElement, excludeAttrsSync);
370
+
371
+ syncAttrs(this.proxyElement, this.hostElement, {
372
+ excludeAttrs: excludeAttrsSync
373
+ });
352
374
  }
353
375
  }
354
376
 
@@ -494,7 +516,7 @@ const compose =
494
516
  (val) =>
495
517
  fns.reduceRight((res, fn) => fn(res), val);
496
518
 
497
- const componentName$e = getComponentName('button');
519
+ const componentName$f = getComponentName('button');
498
520
 
499
521
  const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
500
522
  const resetStyles = `
@@ -517,17 +539,16 @@ const iconStyles = `
517
539
  }
518
540
  `;
519
541
 
520
- const selectors$2 = {
542
+ const selectors$3 = {
521
543
  label: '::part(label)'
522
544
  };
523
545
 
524
546
  const Button = compose(
525
547
  createStyleMixin({
526
- // todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
527
548
  mappings: {
528
549
  backgroundColor: {},
529
550
  borderRadius: {},
530
- color: { selector: selectors$2.label },
551
+ color: { selector: selectors$3.label },
531
552
  borderColor: {},
532
553
  borderStyle: {},
533
554
  borderWidth: {},
@@ -535,8 +556,8 @@ const Button = compose(
535
556
  height: {},
536
557
  width: matchHostStyle(),
537
558
  cursor: {},
538
- padding: [{ selector: selectors$2.label }],
539
- textDecoration: { selector: selectors$2.label }
559
+ padding: [{ selector: selectors$3.label }],
560
+ textDecoration: { selector: selectors$3.label }
540
561
  }
541
562
  }),
542
563
  draggableMixin,
@@ -548,7 +569,7 @@ const Button = compose(
548
569
  style: () =>
549
570
  `${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
550
571
  excludeAttrsSync: ['tabindex'],
551
- componentName: componentName$e
572
+ componentName: componentName$f
552
573
  })
553
574
  );
554
575
 
@@ -581,9 +602,9 @@ const loadingIndicatorStyles = `
581
602
  }
582
603
  `;
583
604
 
584
- customElements.define(componentName$e, Button);
605
+ customElements.define(componentName$f, Button);
585
606
 
586
- const selectors$1 = {
607
+ const selectors$2 = {
587
608
  label: '::part(label)',
588
609
  input: '::part(input-field)',
589
610
  readOnlyInput: '[readonly]::part(input-field)::after',
@@ -591,34 +612,34 @@ const selectors$1 = {
591
612
  };
592
613
 
593
614
  var textFieldMappings = {
594
- color: { selector: selectors$1.input },
595
- backgroundColor: { selector: selectors$1.input },
596
- color: { selector: selectors$1.input },
615
+ color: { selector: selectors$2.input },
616
+ backgroundColor: { selector: selectors$2.input },
617
+ color: { selector: selectors$2.input },
597
618
  width: matchHostStyle({}),
598
619
  borderColor: [
599
- { selector: selectors$1.input },
600
- { selector: selectors$1.readOnlyInput }
620
+ { selector: selectors$2.input },
621
+ { selector: selectors$2.readOnlyInput }
601
622
  ],
602
623
  borderWidth: [
603
- { selector: selectors$1.input },
604
- { selector: selectors$1.readOnlyInput }
624
+ { selector: selectors$2.input },
625
+ { selector: selectors$2.readOnlyInput }
605
626
  ],
606
627
  borderStyle: [
607
- { selector: selectors$1.input },
608
- { selector: selectors$1.readOnlyInput }
628
+ { selector: selectors$2.input },
629
+ { selector: selectors$2.readOnlyInput }
609
630
  ],
610
- borderRadius: { selector: selectors$1.input },
611
- boxShadow: { selector: selectors$1.input },
631
+ borderRadius: { selector: selectors$2.input },
632
+ boxShadow: { selector: selectors$2.input },
612
633
  fontSize: {},
613
- height: { selector: selectors$1.input },
614
- padding: { selector: selectors$1.input },
615
- outline: { selector: selectors$1.input },
616
- outlineOffset: { selector: selectors$1.input },
634
+ height: { selector: selectors$2.input },
635
+ padding: { selector: selectors$2.input },
636
+ outline: { selector: selectors$2.input },
637
+ outlineOffset: { selector: selectors$2.input },
617
638
 
618
- placeholderColor: { selector: selectors$1.placeholder, property: 'color' }
639
+ placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
619
640
  };
620
641
 
621
- const componentName$d = getComponentName('text-field');
642
+ const componentName$e = getComponentName('text-field');
622
643
 
623
644
  let overrides$6 = ``;
624
645
 
@@ -635,7 +656,7 @@ const TextField = compose(
635
656
  wrappedEleName: 'vaadin-text-field',
636
657
  style: () => overrides$6,
637
658
  excludeAttrsSync: ['tabindex'],
638
- componentName: componentName$d
659
+ componentName: componentName$e
639
660
  })
640
661
  );
641
662
 
@@ -680,18 +701,18 @@ overrides$6 = `
680
701
  }
681
702
  `;
682
703
 
683
- customElements.define(componentName$d, TextField);
704
+ customElements.define(componentName$e, TextField);
684
705
 
685
706
  const template = document.createElement('template');
686
707
 
687
- const componentName$c = getComponentName('combo');
708
+ const componentName$d = getComponentName('combo');
688
709
 
689
710
  template.innerHTML = `
690
711
  <descope-button></descope-button>
691
712
  <descope-text-field></descope-text-field>
692
713
  `;
693
714
 
694
- class Combo extends HTMLElement {
715
+ class Combo extends DescopeBaseClass {
695
716
  constructor() {
696
717
  super();
697
718
 
@@ -701,9 +722,9 @@ class Combo extends HTMLElement {
701
722
  }
702
723
  }
703
724
 
704
- customElements.define(componentName$c, Combo);
725
+ customElements.define(componentName$d, Combo);
705
726
 
706
- const componentName$b = getComponentName('number-field');
727
+ const componentName$c = getComponentName('number-field');
707
728
 
708
729
  let overrides$5 = ``;
709
730
 
@@ -722,7 +743,7 @@ const NumberField = compose(
722
743
  wrappedEleName: 'vaadin-number-field',
723
744
  style: () => overrides$5,
724
745
  excludeAttrsSync: ['tabindex'],
725
- componentName: componentName$b
746
+ componentName: componentName$c
726
747
  })
727
748
  );
728
749
 
@@ -766,9 +787,9 @@ overrides$5 = `
766
787
  }
767
788
  `;
768
789
 
769
- customElements.define(componentName$b, NumberField);
790
+ customElements.define(componentName$c, NumberField);
770
791
 
771
- const componentName$a = getComponentName('email-field');
792
+ const componentName$b = getComponentName('email-field');
772
793
 
773
794
  let overrides$4 = ``;
774
795
 
@@ -787,7 +808,7 @@ const EmailField = compose(
787
808
  wrappedEleName: 'vaadin-email-field',
788
809
  style: () => overrides$4,
789
810
  excludeAttrsSync: ['tabindex'],
790
- componentName: componentName$a
811
+ componentName: componentName$b
791
812
  })
792
813
  );
793
814
 
@@ -831,9 +852,9 @@ overrides$4 = `
831
852
  }
832
853
  `;
833
854
 
834
- customElements.define(componentName$a, EmailField);
855
+ customElements.define(componentName$b, EmailField);
835
856
 
836
- const componentName$9 = getComponentName('password-field');
857
+ const componentName$a = getComponentName('password-field');
837
858
 
838
859
  let overrides$3 = ``;
839
860
 
@@ -841,7 +862,6 @@ const PasswordField = compose(
841
862
  createStyleMixin({
842
863
  mappings: {
843
864
  ...textFieldMappings,
844
- // todo: override cursor from lumo
845
865
  revealCursor: [
846
866
  {
847
867
  selector: '::part(reveal-button)::before',
@@ -859,7 +879,7 @@ const PasswordField = compose(
859
879
  wrappedEleName: 'vaadin-password-field',
860
880
  style: () => overrides$3,
861
881
  excludeAttrsSync: ['tabindex'],
862
- componentName: componentName$9
882
+ componentName: componentName$a
863
883
  })
864
884
  );
865
885
 
@@ -903,11 +923,11 @@ overrides$3 = `
903
923
  }
904
924
  `;
905
925
 
906
- customElements.define(componentName$9, PasswordField);
926
+ customElements.define(componentName$a, PasswordField);
907
927
 
908
- const componentName$8 = getComponentName('text-area');
928
+ const componentName$9 = getComponentName('text-area');
909
929
 
910
- const selectors = {
930
+ const selectors$1 = {
911
931
  label: '::part(label)',
912
932
  input: '::part(input-field)',
913
933
  required: '::part(required-indicator)::after'
@@ -919,16 +939,16 @@ const TextArea = compose(
919
939
  createStyleMixin({
920
940
  mappings: {
921
941
  resize: { selector: '> textarea' },
922
- color: { selector: selectors.label },
942
+ color: { selector: selectors$1.label },
923
943
  cursor: {},
924
944
  width: matchHostStyle(),
925
- backgroundColor: { selector: selectors.input },
926
- borderWidth: { selector: selectors.input },
927
- borderStyle: { selector: selectors.input },
928
- borderColor: { selector: selectors.input },
929
- borderRadius: { selector: selectors.input },
930
- outline: { selector: selectors.input },
931
- outlineOffset: { selector: selectors.input }
945
+ backgroundColor: { selector: selectors$1.input },
946
+ borderWidth: { selector: selectors$1.input },
947
+ borderStyle: { selector: selectors$1.input },
948
+ borderColor: { selector: selectors$1.input },
949
+ borderRadius: { selector: selectors$1.input },
950
+ outline: { selector: selectors$1.input },
951
+ outlineOffset: { selector: selectors$1.input }
932
952
  }
933
953
  }),
934
954
  draggableMixin,
@@ -940,7 +960,7 @@ const TextArea = compose(
940
960
  wrappedEleName: 'vaadin-text-area',
941
961
  style: () => overrides$2,
942
962
  excludeAttrsSync: ['tabindex'],
943
- componentName: componentName$8
963
+ componentName: componentName$9
944
964
  })
945
965
  );
946
966
 
@@ -965,34 +985,41 @@ overrides$2 = `
965
985
  }
966
986
  `;
967
987
 
968
- customElements.define(componentName$8, TextArea);
988
+ customElements.define(componentName$9, TextArea);
969
989
 
970
- const componentName$7 = getComponentName('date-picker');
990
+ const componentName$8 = getComponentName('date-picker');
971
991
 
972
992
  const DatePicker = compose(
973
993
  draggableMixin,
974
994
  componentNameValidationMixin
975
995
  )(
976
996
  createProxy({
977
- componentName: componentName$7,
997
+ componentName: componentName$8,
978
998
  slots: ['prefix', 'suffix'],
979
999
  wrappedEleName: 'vaadin-date-picker',
980
1000
  style: ``
981
1001
  })
982
1002
  );
983
1003
 
984
- customElements.define(componentName$7, DatePicker);
1004
+ customElements.define(componentName$8, DatePicker);
985
1005
 
986
- const componentName$6 = getComponentName('container');
1006
+ const componentName$7 = getComponentName('container');
987
1007
 
988
- class RawContainer extends HTMLElement {
1008
+ class RawContainer extends DescopeBaseClass {
989
1009
  static get componentName() {
990
- return componentName$6;
1010
+ return componentName$7;
991
1011
  }
992
1012
  constructor() {
993
1013
  super();
994
1014
  const template = document.createElement('template');
995
- template.innerHTML = `<slot></slot>`;
1015
+ template.innerHTML = `
1016
+ <style>
1017
+ :host > slot {
1018
+ box-sizing: border-box;
1019
+ }
1020
+ </style>
1021
+ <slot></slot>
1022
+ `;
996
1023
 
997
1024
  this.attachShadow({ mode: 'open' });
998
1025
  this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -1003,10 +1030,9 @@ class RawContainer extends HTMLElement {
1003
1030
 
1004
1031
  const Container = compose(
1005
1032
  createStyleMixin({
1006
- // todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
1007
1033
  mappings: {
1008
- height: {},
1009
- width: {},
1034
+ height: matchHostStyle(),
1035
+ width: matchHostStyle(),
1010
1036
 
1011
1037
  verticalPadding: [
1012
1038
  { property: 'padding-top' },
@@ -1037,13 +1063,13 @@ const Container = compose(
1037
1063
  componentNameValidationMixin
1038
1064
  )(RawContainer);
1039
1065
 
1040
- customElements.define(componentName$6, Container);
1066
+ customElements.define(componentName$7, Container);
1041
1067
 
1042
- const componentName$5 = getComponentName('text');
1068
+ const componentName$6 = getComponentName('text');
1043
1069
 
1044
- class RawText extends HTMLElement {
1070
+ class RawText extends DescopeBaseClass {
1045
1071
  static get componentName() {
1046
- return componentName$5;
1072
+ return componentName$6;
1047
1073
  }
1048
1074
  constructor() {
1049
1075
  super();
@@ -1067,6 +1093,12 @@ const Text = compose(
1067
1093
  fontWeight: {},
1068
1094
  width: {},
1069
1095
  color: {},
1096
+ letterSpacing: {},
1097
+ textShadow: {},
1098
+ borderWidth: {},
1099
+ borderStyle: {},
1100
+ borderColor: {},
1101
+ textTransform: {},
1070
1102
  textAlign: matchHostStyle(),
1071
1103
  display: matchHostStyle()
1072
1104
  }
@@ -1075,7 +1107,254 @@ const Text = compose(
1075
1107
  componentNameValidationMixin
1076
1108
  )(RawText);
1077
1109
 
1078
- customElements.define(componentName$5, Text);
1110
+ customElements.define(componentName$6, Text);
1111
+
1112
+ const getChildObserver = (callback) => {
1113
+ return new MutationObserver((mutationsList) => {
1114
+ for (const mutation of mutationsList) {
1115
+ if (mutation.type === 'childList') {
1116
+ callback(mutation);
1117
+ }
1118
+ }
1119
+ });
1120
+ };
1121
+
1122
+ const insertNestingLevel = (srcEle, nestingEle) => {
1123
+ nestingEle.append(...srcEle.childNodes);
1124
+ srcEle.appendChild(nestingEle);
1125
+ };
1126
+
1127
+ // adds a nesting element to the component, and move all existing children
1128
+ // to be under the nesting element
1129
+ const enforceNestingElementsStylesMixin =
1130
+ ({ nestingElementTagName, nestingElementDestSlotName, forwardAttrOptions }) =>
1131
+ (superclass) => {
1132
+ const getChildNodeEle = () =>
1133
+ Object.assign(document.createElement(nestingElementTagName), {
1134
+ slot: nestingElementDestSlotName
1135
+ });
1136
+
1137
+ let childObserver;
1138
+
1139
+ const getObserver = () => childObserver;
1140
+
1141
+ return class EnforceNestingElementsStylesMixinClass extends superclass {
1142
+ constructor() {
1143
+ super();
1144
+
1145
+ const childObserverCallback = () => {
1146
+ // we are going to change the DOM, so we need to disconnect the observer before
1147
+ // and reconnect it after the child component is added
1148
+ getObserver().disconnect(this.shadowRoot.host);
1149
+
1150
+ const isNestingElementExist = this.shadowRoot.host.querySelector(nestingElementTagName);
1151
+ const hasNewChildren = this.shadowRoot.host.childNodes.length > 0;
1152
+
1153
+ if (!isNestingElementExist && hasNewChildren) {
1154
+ // if before there were no children and now there are children - insert
1155
+ insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
1156
+ } else if (isNestingElementExist && hasNewChildren) {
1157
+ // if children existed, and they changed -
1158
+ // we need to update (move) the new children into
1159
+ // descope-text and remove previous children
1160
+ this.shadowRoot.host.querySelector(child).remove();
1161
+ insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
1162
+ }
1163
+ else if (isNestingElementExist && !hasNewChildren) {
1164
+ // if children existed and now there are none -
1165
+ // we need to remove descope-text completely
1166
+ this.shadowRoot.host.querySelector(child).remove();
1167
+ }
1168
+
1169
+ // we need a new observer, because we remove the nesting element
1170
+ this.shadowRoot.host.querySelector(nestingElementTagName) &&
1171
+ forwardAttrs(
1172
+ this.shadowRoot.host,
1173
+ this.shadowRoot.host.querySelector(nestingElementTagName),
1174
+ forwardAttrOptions
1175
+ );
1176
+
1177
+ getObserver().observe(this.shadowRoot.host, {
1178
+ childList: true
1179
+ });
1180
+ };
1181
+
1182
+ childObserver = getChildObserver(childObserverCallback);
1183
+ }
1184
+
1185
+ connectedCallback() {
1186
+ super.connectedCallback?.();
1187
+
1188
+ if (this.shadowRoot.host.childNodes.length > 0) {
1189
+ // on the first render - we want to move all component's children to be under descope-text
1190
+ insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
1191
+
1192
+ forwardAttrs(
1193
+ this.shadowRoot.host,
1194
+ this.shadowRoot.host.querySelector(nestingElementTagName),
1195
+ forwardAttrOptions
1196
+ );
1197
+ }
1198
+
1199
+ getObserver().observe(this.shadowRoot.host, {
1200
+ childList: true
1201
+ });
1202
+ }
1203
+ };
1204
+ };
1205
+
1206
+ const componentName$5 = getComponentName('divider');
1207
+ class RawDivider extends DescopeBaseClass {
1208
+ static get componentName() {
1209
+ return componentName$5;
1210
+ }
1211
+ constructor() {
1212
+ super();
1213
+ const template = document.createElement('template');
1214
+ template.innerHTML = `
1215
+ <style>
1216
+ :host > div {
1217
+ display: flex;
1218
+ height: 100%;
1219
+ }
1220
+ :host > div::before,
1221
+ :host > div::after {
1222
+ content: '';
1223
+ flex-grow: 1;
1224
+ width: 100%;
1225
+ }
1226
+ ::slotted(*) {
1227
+ flex-grow: 0;
1228
+ flex-shrink: 0;
1229
+ }
1230
+ </style>
1231
+ <div>
1232
+ <slot></slot>
1233
+ <slot name="text"></slot>
1234
+ </div>
1235
+ `;
1236
+ this.attachShadow({ mode: 'open' });
1237
+ this.shadowRoot.appendChild(template.content.cloneNode(true));
1238
+
1239
+ this.baseSelector = ':host > div';
1240
+ }
1241
+ }
1242
+
1243
+ const selectors = {
1244
+ root: { selector: '' },
1245
+ before: { selector: '::before' },
1246
+ after: { selector: '::after' },
1247
+ slotted: { selector: () => '::slotted(*)' }
1248
+ };
1249
+
1250
+ const { root, before, after, slotted } = selectors;
1251
+
1252
+ const Divider = compose(
1253
+ enforceNestingElementsStylesMixin({
1254
+ nestingElementTagName: 'descope-text',
1255
+ nestingElementDestSlotName: 'text',
1256
+ forwardAttrOptions: {
1257
+ includeAttrs: ['mode', 'variant'],
1258
+ excludeAttrs: []
1259
+ }
1260
+ }),
1261
+ createStyleMixin({
1262
+ mappings: {
1263
+ minHeight: root,
1264
+ alignItems: root,
1265
+ alignSelf: root,
1266
+ flexDirection: root,
1267
+ padding: slotted,
1268
+ width: matchHostStyle(),
1269
+ height: [before, after],
1270
+ backgroundColor: [before, after],
1271
+ opacity: [before, after],
1272
+ textWidth: { ...slotted, property: 'width' }
1273
+ }
1274
+ }),
1275
+ draggableMixin,
1276
+ componentNameValidationMixin
1277
+ )(RawDivider);
1278
+
1279
+ customElements.define(componentName$5, Divider);
1280
+
1281
+ const componentName$4 = getComponentName('logo');
1282
+
1283
+ let style;
1284
+ const getStyle = () => style;
1285
+
1286
+ class RawLogo extends DescopeBaseClass {
1287
+ static get componentName() {
1288
+ return componentName$4;
1289
+ }
1290
+ constructor() {
1291
+ super();
1292
+ const template = document.createElement('template');
1293
+ template.innerHTML = `
1294
+ <style>
1295
+ ${getStyle()}
1296
+ </style>
1297
+ <div></div>`;
1298
+
1299
+ this.attachShadow({ mode: 'open' });
1300
+ this.shadowRoot.appendChild(template.content.cloneNode(true));
1301
+
1302
+ this.baseSelector = ':host > div';
1303
+ }
1304
+ }
1305
+
1306
+ const Logo = compose(
1307
+ createStyleMixin({
1308
+ mappings: {
1309
+ height: {},
1310
+ width: {},
1311
+ url: {},
1312
+ fallbackUrl: {}
1313
+ }
1314
+ }),
1315
+ draggableMixin,
1316
+ componentNameValidationMixin
1317
+ )(RawLogo);
1318
+
1319
+ style = `
1320
+ :host {
1321
+ display: inline-block;
1322
+ }
1323
+ :host > div {
1324
+ display: inline-block;
1325
+ content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
1326
+ }
1327
+ `;
1328
+
1329
+ customElements.define(componentName$4, Logo);
1330
+
1331
+ const componentName$3 = getComponentName('checkbox');
1332
+
1333
+ const Checkbox = compose(
1334
+ createStyleMixin({
1335
+ mappings: {
1336
+ width: matchHostStyle(),
1337
+ cursor: [{}, { selector: '> label' }]
1338
+ }
1339
+ }),
1340
+ draggableMixin,
1341
+ inputMixin,
1342
+ componentNameValidationMixin
1343
+ )(
1344
+ createProxy({
1345
+ slots: [],
1346
+ wrappedEleName: 'vaadin-checkbox',
1347
+ style: `
1348
+ :host {
1349
+ display: inline-block;
1350
+ }
1351
+ `,
1352
+ excludeAttrsSync: ['tabindex'],
1353
+ componentName: componentName$3
1354
+ })
1355
+ );
1356
+
1357
+ customElements.define(componentName$3, Checkbox);
1079
1358
 
1080
1359
  const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
1081
1360
 
@@ -1316,7 +1595,7 @@ var globals = {
1316
1595
  };
1317
1596
 
1318
1597
  const globalRefs$4 = getThemeRefs(globals);
1319
- const vars$8 = Button.cssVarList;
1598
+ const vars$9 = Button.cssVarList;
1320
1599
 
1321
1600
  const mode = {
1322
1601
  primary: globalRefs$4.colors.primary,
@@ -1326,83 +1605,83 @@ const mode = {
1326
1605
  surface: globalRefs$4.colors.surface
1327
1606
  };
1328
1607
 
1329
- const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$e);
1608
+ const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$f);
1330
1609
 
1331
1610
  const button = {
1332
1611
  ...helperTheme$1,
1333
1612
 
1334
1613
  size: {
1335
1614
  xs: {
1336
- [vars$8.height]: '10px',
1337
- [vars$8.fontSize]: '10px',
1338
- [vars$8.padding]: `0 ${globalRefs$4.spacing.xs}`
1615
+ [vars$9.height]: '10px',
1616
+ [vars$9.fontSize]: '10px',
1617
+ [vars$9.padding]: `0 ${globalRefs$4.spacing.xs}`
1339
1618
  },
1340
1619
  sm: {
1341
- [vars$8.height]: '20px',
1342
- [vars$8.fontSize]: '10px',
1343
- [vars$8.padding]: `0 ${globalRefs$4.spacing.sm}`
1620
+ [vars$9.height]: '20px',
1621
+ [vars$9.fontSize]: '10px',
1622
+ [vars$9.padding]: `0 ${globalRefs$4.spacing.sm}`
1344
1623
  },
1345
1624
  md: {
1346
- [vars$8.height]: '30px',
1347
- [vars$8.fontSize]: '14px',
1348
- [vars$8.padding]: `0 ${globalRefs$4.spacing.md}`
1625
+ [vars$9.height]: '30px',
1626
+ [vars$9.fontSize]: '14px',
1627
+ [vars$9.padding]: `0 ${globalRefs$4.spacing.md}`
1349
1628
  },
1350
1629
  lg: {
1351
- [vars$8.height]: '40px',
1352
- [vars$8.fontSize]: '20px',
1353
- [vars$8.padding]: `0 ${globalRefs$4.spacing.lg}`
1630
+ [vars$9.height]: '40px',
1631
+ [vars$9.fontSize]: '20px',
1632
+ [vars$9.padding]: `0 ${globalRefs$4.spacing.lg}`
1354
1633
  },
1355
1634
  xl: {
1356
- [vars$8.height]: '50px',
1357
- [vars$8.fontSize]: '25px',
1358
- [vars$8.padding]: `0 ${globalRefs$4.spacing.xl}`
1635
+ [vars$9.height]: '50px',
1636
+ [vars$9.fontSize]: '25px',
1637
+ [vars$9.padding]: `0 ${globalRefs$4.spacing.xl}`
1359
1638
  }
1360
1639
  },
1361
1640
 
1362
- [vars$8.borderRadius]: globalRefs$4.radius.lg,
1363
- [vars$8.cursor]: 'pointer',
1364
- [vars$8.borderWidth]: '2px',
1365
- [vars$8.borderStyle]: 'solid',
1366
- [vars$8.borderColor]: 'transparent',
1641
+ [vars$9.borderRadius]: globalRefs$4.radius.lg,
1642
+ [vars$9.cursor]: 'pointer',
1643
+ [vars$9.borderWidth]: '2px',
1644
+ [vars$9.borderStyle]: 'solid',
1645
+ [vars$9.borderColor]: 'transparent',
1367
1646
 
1368
1647
  _fullWidth: {
1369
- [vars$8.width]: '100%'
1648
+ [vars$9.width]: '100%'
1370
1649
  },
1371
1650
  _loading: {
1372
- [vars$8.cursor]: 'wait'
1651
+ [vars$9.cursor]: 'wait'
1373
1652
  },
1374
1653
 
1375
1654
  variant: {
1376
1655
  contained: {
1377
- [vars$8.color]: helperRefs$1.contrast,
1378
- [vars$8.backgroundColor]: helperRefs$1.main,
1656
+ [vars$9.color]: helperRefs$1.contrast,
1657
+ [vars$9.backgroundColor]: helperRefs$1.main,
1379
1658
  _hover: {
1380
- [vars$8.backgroundColor]: helperRefs$1.dark
1659
+ [vars$9.backgroundColor]: helperRefs$1.dark
1381
1660
  },
1382
1661
  _loading: {
1383
- [vars$8.backgroundColor]: helperRefs$1.main
1662
+ [vars$9.backgroundColor]: helperRefs$1.main
1384
1663
  }
1385
1664
  },
1386
1665
  outline: {
1387
- [vars$8.color]: helperRefs$1.main,
1388
- [vars$8.borderColor]: helperRefs$1.main,
1666
+ [vars$9.color]: helperRefs$1.main,
1667
+ [vars$9.borderColor]: helperRefs$1.main,
1389
1668
  _hover: {
1390
- [vars$8.color]: helperRefs$1.dark,
1391
- [vars$8.borderColor]: helperRefs$1.dark,
1669
+ [vars$9.color]: helperRefs$1.dark,
1670
+ [vars$9.borderColor]: helperRefs$1.dark,
1392
1671
  _error: {
1393
- [vars$8.color]: helperRefs$1.error
1672
+ [vars$9.color]: helperRefs$1.error
1394
1673
  }
1395
1674
  }
1396
1675
  },
1397
1676
  link: {
1398
- [vars$8.color]: helperRefs$1.main,
1399
- [vars$8.padding]: 0,
1400
- [vars$8.margin]: 0,
1401
- [vars$8.lineHeight]: helperRefs$1.height,
1402
- [vars$8.borderRadius]: 0,
1677
+ [vars$9.color]: helperRefs$1.main,
1678
+ [vars$9.padding]: 0,
1679
+ [vars$9.margin]: 0,
1680
+ [vars$9.lineHeight]: helperRefs$1.height,
1681
+ [vars$9.borderRadius]: 0,
1403
1682
  _hover: {
1404
- [vars$8.color]: helperRefs$1.main,
1405
- [vars$8.textDecoration]: 'underline'
1683
+ [vars$9.color]: helperRefs$1.main,
1684
+ [vars$9.textDecoration]: 'underline'
1406
1685
  }
1407
1686
  }
1408
1687
  }
@@ -1410,7 +1689,7 @@ const button = {
1410
1689
 
1411
1690
  const globalRefs$3 = getThemeRefs(globals);
1412
1691
 
1413
- const vars$7 = TextField.cssVarList;
1692
+ const vars$8 = TextField.cssVarList;
1414
1693
 
1415
1694
  const textField = (vars) => ({
1416
1695
  size: {
@@ -1480,13 +1759,13 @@ const textField = (vars) => ({
1480
1759
  }
1481
1760
  });
1482
1761
 
1483
- var textField$1 = textField(vars$7);
1762
+ var textField$1 = textField(vars$8);
1484
1763
 
1485
- const vars$6 = PasswordField.cssVarList;
1764
+ const vars$7 = PasswordField.cssVarList;
1486
1765
 
1487
1766
  const passwordField = {
1488
- ...textField(vars$6),
1489
- [vars$6.revealCursor]: 'pointer'
1767
+ ...textField(vars$7),
1768
+ [vars$7.revealCursor]: 'pointer'
1490
1769
  };
1491
1770
 
1492
1771
  const numberField = {
@@ -1498,76 +1777,50 @@ const emailField = {
1498
1777
  };
1499
1778
 
1500
1779
  const globalRefs$2 = getThemeRefs(globals);
1501
- const vars$5 = TextArea.cssVarList;
1780
+ const vars$6 = TextArea.cssVarList;
1502
1781
 
1503
1782
  const textArea = {
1504
- [vars$5.color]: globalRefs$2.colors.primary.main,
1505
- [vars$5.backgroundColor]: globalRefs$2.colors.surface.light,
1506
- [vars$5.resize]: 'vertical',
1783
+ [vars$6.color]: globalRefs$2.colors.primary.main,
1784
+ [vars$6.backgroundColor]: globalRefs$2.colors.surface.light,
1785
+ [vars$6.resize]: 'vertical',
1507
1786
 
1508
- [vars$5.borderRadius]: globalRefs$2.radius.sm,
1509
- [vars$5.borderWidth]: '1px',
1510
- [vars$5.borderStyle]: 'solid',
1511
- [vars$5.borderColor]: 'transparent',
1787
+ [vars$6.borderRadius]: globalRefs$2.radius.sm,
1788
+ [vars$6.borderWidth]: '1px',
1789
+ [vars$6.borderStyle]: 'solid',
1790
+ [vars$6.borderColor]: 'transparent',
1512
1791
 
1513
1792
  _borderOffset: {
1514
- [vars$5.outlineOffset]: '2px'
1793
+ [vars$6.outlineOffset]: '2px'
1515
1794
  },
1516
1795
 
1517
1796
  _bordered: {
1518
- [vars$5.borderColor]: globalRefs$2.colors.surface.main
1797
+ [vars$6.borderColor]: globalRefs$2.colors.surface.main
1519
1798
  },
1520
1799
 
1521
1800
  _focused: {
1522
- [vars$5.outline]: `2px solid ${globalRefs$2.colors.surface.main}`
1801
+ [vars$6.outline]: `2px solid ${globalRefs$2.colors.surface.main}`
1523
1802
  },
1524
1803
 
1525
1804
  _fullWidth: {
1526
- [vars$5.width]: '100%'
1805
+ [vars$6.width]: '100%'
1527
1806
  },
1528
1807
 
1529
1808
  _disabled: {
1530
- [vars$5.cursor]: 'not-allowed'
1809
+ [vars$6.cursor]: 'not-allowed'
1531
1810
  },
1532
1811
 
1533
1812
  _invalid: {
1534
- [vars$5.outline]: `2px solid ${globalRefs$2.colors.error.main}`
1813
+ [vars$6.outline]: `2px solid ${globalRefs$2.colors.error.main}`
1535
1814
  }
1536
1815
  };
1537
1816
 
1538
- const componentName$4 = getComponentName('checkbox');
1539
-
1540
- const Checkbox = compose(
1541
- createStyleMixin({
1542
- mappings: {
1543
- width: matchHostStyle(),
1544
- cursor: [{}, { selector: '> label' }]
1545
- }
1546
- }),
1547
- draggableMixin,
1548
- inputMixin,
1549
- componentNameValidationMixin
1550
- )(
1551
- createProxy({
1552
- slots: [],
1553
- wrappedEleName: 'vaadin-checkbox',
1554
- style: `
1555
- :host {
1556
- display: inline-block;
1557
- }
1558
- `,
1559
- excludeAttrsSync: ['tabindex'],
1560
- componentName: componentName$4
1561
- })
1562
- );
1563
-
1564
- const vars$4 = Checkbox.cssVarList;
1817
+ const vars$5 = Checkbox.cssVarList;
1565
1818
 
1566
1819
  const checkbox = {
1567
- [vars$4.cursor]: 'pointer'
1820
+ [vars$5.cursor]: 'pointer'
1568
1821
  };
1569
1822
 
1570
- const componentName$3 = getComponentName('switch-toggle');
1823
+ const componentName$2 = getComponentName('switch-toggle');
1571
1824
 
1572
1825
  let overrides$1 = ``;
1573
1826
 
@@ -1587,7 +1840,7 @@ const SwitchToggle = compose(
1587
1840
  wrappedEleName: 'vaadin-checkbox',
1588
1841
  style: () => overrides$1,
1589
1842
  excludeAttrsSync: ['tabindex'],
1590
- componentName: componentName$3
1843
+ componentName: componentName$2
1591
1844
  })
1592
1845
  );
1593
1846
 
@@ -1641,16 +1894,16 @@ overrides$1 = `
1641
1894
  }
1642
1895
  `;
1643
1896
 
1644
- const vars$3 = SwitchToggle.cssVarList;
1897
+ const vars$4 = SwitchToggle.cssVarList;
1645
1898
 
1646
1899
  const swtichToggle = {
1647
- [vars$3.width]: '70px',
1648
- [vars$3.cursor]: [{}, { selector: '> label' }]
1900
+ [vars$4.width]: '70px',
1901
+ [vars$4.cursor]: [{}, { selector: '> label' }]
1649
1902
  };
1650
1903
 
1651
1904
  const globalRefs$1 = getThemeRefs(globals);
1652
1905
 
1653
- const vars$2 = Container.cssVarList;
1906
+ const vars$3 = Container.cssVarList;
1654
1907
 
1655
1908
  const verticalAlignment = {
1656
1909
  start: { verticalAlignment: 'start' },
@@ -1673,31 +1926,31 @@ const [helperTheme, helperRefs, helperVars] =
1673
1926
 
1674
1927
  const container = {
1675
1928
  ...helperTheme,
1676
- [vars$2.display]: 'flex',
1929
+ [vars$3.display]: 'flex',
1677
1930
  verticalPadding: {
1678
- sm: { [vars$2.verticalPadding]: '5px' },
1679
- md: { [vars$2.verticalPadding]: '10px' },
1680
- lg: { [vars$2.verticalPadding]: '20px' },
1931
+ sm: { [vars$3.verticalPadding]: '5px' },
1932
+ md: { [vars$3.verticalPadding]: '10px' },
1933
+ lg: { [vars$3.verticalPadding]: '20px' },
1681
1934
  },
1682
1935
  horizontalPadding: {
1683
- sm: { [vars$2.horizontalPadding]: '5px' },
1684
- md: { [vars$2.horizontalPadding]: '10px' },
1685
- lg: { [vars$2.horizontalPadding]: '20px' },
1936
+ sm: { [vars$3.horizontalPadding]: '5px' },
1937
+ md: { [vars$3.horizontalPadding]: '10px' },
1938
+ lg: { [vars$3.horizontalPadding]: '20px' },
1686
1939
  },
1687
1940
  direction: {
1688
1941
  row: {
1689
- [vars$2.flexDirection]: 'row',
1690
- [vars$2.alignItems]: helperRefs.verticalAlignment,
1691
- [vars$2.justifyContent]: helperRefs.horizontalAlignment,
1942
+ [vars$3.flexDirection]: 'row',
1943
+ [vars$3.alignItems]: helperRefs.verticalAlignment,
1944
+ [vars$3.justifyContent]: helperRefs.horizontalAlignment,
1692
1945
  horizontalAlignment: {
1693
1946
  spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
1694
1947
  }
1695
1948
  },
1696
1949
 
1697
1950
  column: {
1698
- [vars$2.flexDirection]: 'column',
1699
- [vars$2.alignItems]: helperRefs.horizontalAlignment,
1700
- [vars$2.justifyContent]: helperRefs.verticalAlignment,
1951
+ [vars$3.flexDirection]: 'column',
1952
+ [vars$3.alignItems]: helperRefs.horizontalAlignment,
1953
+ [vars$3.justifyContent]: helperRefs.verticalAlignment,
1701
1954
  verticalAlignment: {
1702
1955
  spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
1703
1956
  }
@@ -1706,173 +1959,152 @@ const container = {
1706
1959
 
1707
1960
  spaceBetween: {
1708
1961
  sm: {
1709
- [vars$2.gap]: '10px'
1962
+ [vars$3.gap]: '10px'
1710
1963
  },
1711
1964
  md: {
1712
- [vars$2.gap]: '20px'
1965
+ [vars$3.gap]: '20px'
1713
1966
  },
1714
1967
  lg: {
1715
- [vars$2.gap]: '30px'
1968
+ [vars$3.gap]: '30px'
1716
1969
  }
1717
1970
  },
1718
1971
 
1719
1972
  shadow: {
1720
1973
  sm: {
1721
- [vars$2.boxShadow]: `${globalRefs$1.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.sm} ${helperRefs.shadowColor}`
1974
+ [vars$3.boxShadow]: `${globalRefs$1.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.sm} ${helperRefs.shadowColor}`
1722
1975
  },
1723
1976
  md: {
1724
- [vars$2.boxShadow]: `${globalRefs$1.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.md} ${helperRefs.shadowColor}`
1977
+ [vars$3.boxShadow]: `${globalRefs$1.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.md} ${helperRefs.shadowColor}`
1725
1978
  },
1726
1979
  lg: {
1727
- [vars$2.boxShadow]: `${globalRefs$1.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.lg} ${helperRefs.shadowColor}`
1980
+ [vars$3.boxShadow]: `${globalRefs$1.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.lg} ${helperRefs.shadowColor}`
1728
1981
  },
1729
1982
  xl: {
1730
- [vars$2.boxShadow]: `${globalRefs$1.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.xl} ${helperRefs.shadowColor}`
1983
+ [vars$3.boxShadow]: `${globalRefs$1.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.xl} ${helperRefs.shadowColor}`
1731
1984
  },
1732
1985
  '2xl': {
1733
1986
  [helperVars.shadowColor]: '#00000050',
1734
- [vars$2.boxShadow]: `${globalRefs$1.shadow.wide['2xl']} ${helperRefs.shadowColor}`
1987
+ [vars$3.boxShadow]: `${globalRefs$1.shadow.wide['2xl']} ${helperRefs.shadowColor}`
1735
1988
  },
1736
1989
  },
1737
1990
 
1738
1991
  borderRadius: {
1739
1992
  sm: {
1740
- [vars$2.borderRadius]: globalRefs$1.radius.sm
1993
+ [vars$3.borderRadius]: globalRefs$1.radius.sm
1741
1994
  },
1742
1995
  md: {
1743
- [vars$2.borderRadius]: globalRefs$1.radius.md
1996
+ [vars$3.borderRadius]: globalRefs$1.radius.md
1744
1997
  },
1745
1998
  lg: {
1746
- [vars$2.borderRadius]: globalRefs$1.radius.lg
1999
+ [vars$3.borderRadius]: globalRefs$1.radius.lg
1747
2000
  },
1748
2001
  }
1749
2002
  };
1750
2003
 
1751
- const componentName$2 = getComponentName('logo');
1752
-
1753
- let style;
1754
- const getStyle = () => style;
1755
-
1756
- class RawLogo extends HTMLElement {
1757
- static get componentName() {
1758
- return componentName$2;
1759
- }
1760
- constructor() {
1761
- super();
1762
- const template = document.createElement('template');
1763
- template.innerHTML = `
1764
- <style>
1765
- ${getStyle()}
1766
- </style>
1767
- <div></div>`;
1768
-
1769
- this.attachShadow({ mode: 'open' });
1770
- this.shadowRoot.appendChild(template.content.cloneNode(true));
1771
-
1772
- this.baseSelector = ':host > div';
1773
- }
1774
- }
1775
-
1776
- const Logo = compose(
1777
- createStyleMixin({
1778
- mappings: {
1779
- height: {},
1780
- width: {},
1781
- url: {},
1782
- fallbackUrl: {},
1783
- }
1784
- }),
1785
- draggableMixin,
1786
- componentNameValidationMixin
1787
- )(RawLogo);
1788
-
1789
- style = `
1790
- :host {
1791
- display: inline-block;
1792
- }
1793
- :host > div {
1794
- display: inline-block;
1795
- content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
1796
- }
1797
- `;
1798
-
1799
- const vars$1 = Logo.cssVarList;
2004
+ const vars$2 = Logo.cssVarList;
1800
2005
 
1801
2006
  const logo = {
1802
- [vars$1.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
2007
+ [vars$2.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
1803
2008
  };
1804
2009
 
1805
2010
  const globalRefs = getThemeRefs(globals);
1806
2011
 
1807
- const vars = Text.cssVarList;
2012
+ const vars$1 = Text.cssVarList;
1808
2013
 
1809
2014
  const text = {
1810
- [vars.lineHeight]: '1em',
1811
- [vars.display]: 'inline-block',
1812
- [vars.textAlign]: 'left',
1813
- [vars.color]: globalRefs.colors.surface.dark,
2015
+ [vars$1.lineHeight]: '1em',
2016
+ [vars$1.display]: 'inline-block',
2017
+ [vars$1.textAlign]: 'left',
2018
+ [vars$1.color]: globalRefs.colors.surface.dark,
1814
2019
  variant: {
1815
2020
  h1: {
1816
- [vars.fontSize]: globalRefs.typography.h1.size,
1817
- [vars.fontWeight]: globalRefs.typography.h1.weight,
1818
- [vars.fontFamily]: globalRefs.typography.h1.font
2021
+ [vars$1.fontSize]: globalRefs.typography.h1.size,
2022
+ [vars$1.fontWeight]: globalRefs.typography.h1.weight,
2023
+ [vars$1.fontFamily]: globalRefs.typography.h1.font
1819
2024
  },
1820
2025
  h2: {
1821
- [vars.fontSize]: globalRefs.typography.h2.size,
1822
- [vars.fontWeight]: globalRefs.typography.h2.weight,
1823
- [vars.fontFamily]: globalRefs.typography.h2.font
2026
+ [vars$1.fontSize]: globalRefs.typography.h2.size,
2027
+ [vars$1.fontWeight]: globalRefs.typography.h2.weight,
2028
+ [vars$1.fontFamily]: globalRefs.typography.h2.font
1824
2029
  },
1825
2030
  h3: {
1826
- [vars.fontSize]: globalRefs.typography.h3.size,
1827
- [vars.fontWeight]: globalRefs.typography.h3.weight,
1828
- [vars.fontFamily]: globalRefs.typography.h3.font
2031
+ [vars$1.fontSize]: globalRefs.typography.h3.size,
2032
+ [vars$1.fontWeight]: globalRefs.typography.h3.weight,
2033
+ [vars$1.fontFamily]: globalRefs.typography.h3.font
1829
2034
  },
1830
2035
  subtitle1: {
1831
- [vars.fontSize]: globalRefs.typography.subtitle1.size,
1832
- [vars.fontWeight]: globalRefs.typography.subtitle1.weight,
1833
- [vars.fontFamily]: globalRefs.typography.subtitle1.font
2036
+ [vars$1.fontSize]: globalRefs.typography.subtitle1.size,
2037
+ [vars$1.fontWeight]: globalRefs.typography.subtitle1.weight,
2038
+ [vars$1.fontFamily]: globalRefs.typography.subtitle1.font
1834
2039
  },
1835
2040
  subtitle2: {
1836
- [vars.fontSize]: globalRefs.typography.subtitle2.size,
1837
- [vars.fontWeight]: globalRefs.typography.subtitle2.weight,
1838
- [vars.fontFamily]: globalRefs.typography.subtitle2.font
2041
+ [vars$1.fontSize]: globalRefs.typography.subtitle2.size,
2042
+ [vars$1.fontWeight]: globalRefs.typography.subtitle2.weight,
2043
+ [vars$1.fontFamily]: globalRefs.typography.subtitle2.font
1839
2044
  },
1840
2045
  body1: {
1841
- [vars.fontSize]: globalRefs.typography.body1.size,
1842
- [vars.fontWeight]: globalRefs.typography.body1.weight,
1843
- [vars.fontFamily]: globalRefs.typography.body1.font
2046
+ [vars$1.fontSize]: globalRefs.typography.body1.size,
2047
+ [vars$1.fontWeight]: globalRefs.typography.body1.weight,
2048
+ [vars$1.fontFamily]: globalRefs.typography.body1.font
1844
2049
  },
1845
2050
  body2: {
1846
- [vars.fontSize]: globalRefs.typography.body2.size,
1847
- [vars.fontWeight]: globalRefs.typography.body2.weight,
1848
- [vars.fontFamily]: globalRefs.typography.body2.font
2051
+ [vars$1.fontSize]: globalRefs.typography.body2.size,
2052
+ [vars$1.fontWeight]: globalRefs.typography.body2.weight,
2053
+ [vars$1.fontFamily]: globalRefs.typography.body2.font
1849
2054
  }
1850
2055
  },
1851
2056
  mode: {
1852
2057
  primary: {
1853
- [vars.color]: globalRefs.colors.primary.main
2058
+ [vars$1.color]: globalRefs.colors.primary.main
1854
2059
  },
1855
2060
  secondary: {
1856
- [vars.color]: globalRefs.colors.secondary.main
2061
+ [vars$1.color]: globalRefs.colors.secondary.main
1857
2062
  },
1858
2063
  error: {
1859
- [vars.color]: globalRefs.colors.error.main
2064
+ [vars$1.color]: globalRefs.colors.error.main
1860
2065
  },
1861
2066
  success: {
1862
- [vars.color]: globalRefs.colors.success.main
2067
+ [vars$1.color]: globalRefs.colors.success.main
1863
2068
  }
1864
2069
  },
1865
2070
  textAlign: {
1866
- right: { [vars.textAlign]: 'right' },
1867
- left: { [vars.textAlign]: 'left' },
1868
- center: { [vars.textAlign]: 'center' }
2071
+ right: { [vars$1.textAlign]: 'right' },
2072
+ left: { [vars$1.textAlign]: 'left' },
2073
+ center: { [vars$1.textAlign]: 'center' }
1869
2074
  },
1870
2075
  _fullWidth: {
1871
- [vars.width]: '100%',
1872
- [vars.display]: 'block'
2076
+ [vars$1.width]: '100%',
2077
+ [vars$1.display]: 'block'
1873
2078
  },
1874
2079
  _italic: {
1875
- [vars.fontStyle]: 'italic'
2080
+ [vars$1.fontStyle]: 'italic'
2081
+ },
2082
+ _uppercase: {
2083
+ [vars$1.textTransform]: 'uppercase'
2084
+ },
2085
+ _lowercase: {
2086
+ [vars$1.textTransform]: 'lowercase'
2087
+ }
2088
+ };
2089
+
2090
+ const vars = Divider.cssVarList;
2091
+
2092
+ const divider = {
2093
+ [vars.alignItems]: 'center',
2094
+ [vars.height]: '2px',
2095
+ [vars.backgroundColor]: 'currentColor',
2096
+ [vars.opacity]: '0.2',
2097
+ [vars.padding]: '0 10px',
2098
+ [vars.width]: '100%',
2099
+ [vars.flexDirection]: 'row',
2100
+ [vars.alignSelf]: 'strech',
2101
+ [vars.textWidth]: 'fit-content',
2102
+ _vertical: {
2103
+ [vars.width]: '2px',
2104
+ [vars.padding]: '10px 0',
2105
+ [vars.flexDirection]: 'column',
2106
+ [vars.minHeight]: '200px',
2107
+ [vars.textWidth]: 'max-content'
1876
2108
  }
1877
2109
  };
1878
2110
 
@@ -2021,6 +2253,7 @@ var components = {
2021
2253
  container,
2022
2254
  logo,
2023
2255
  text,
2256
+ divider,
2024
2257
  passcode
2025
2258
  };
2026
2259