lau-ecom-design-system 1.0.19 → 1.0.20

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 (48) hide show
  1. package/README.md +49 -0
  2. package/dist/316236bc7a52233c.png +0 -0
  3. package/dist/lau-ecom-design-system.esm.css +6 -1
  4. package/dist/lau-ecom-design-system.esm.js +900 -327
  5. package/dist/lau-ecom-design-system.min.css +6 -1
  6. package/dist/lau-ecom-design-system.min.js +1 -1
  7. package/dist/lau-ecom-design-system.ssr.css +6 -1
  8. package/dist/lau-ecom-design-system.ssr.js +787 -256
  9. package/dist/style.css +120 -12
  10. package/package.json +80 -80
  11. package/src/components/LauEcomBannerCookies/LauEcomBannerCookies.vue +178 -168
  12. package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue +160 -159
  13. package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfigAccordion.vue +80 -76
  14. package/src/components/LauEcomButton/LauEcomButton.vue +137 -137
  15. package/src/components/LauEcomCheckbox/LauEcomCheckbox.vue +143 -143
  16. package/src/components/LauEcomDisclamer/LauEcomDisclamer.vue +79 -79
  17. package/src/components/LauEcomDropdown/LauEcomDropdown.vue +203 -203
  18. package/src/components/LauEcomFooter/LauEcomFooter.vue +24 -73
  19. package/src/components/LauEcomFooter/LauEcomSubFooter.vue +5 -31
  20. package/src/components/LauEcomFooter/LauEcomSubFooterCategory.vue +9 -48
  21. package/src/components/LauEcomIcon/LauEcomCoreIconBook.vue +26 -26
  22. package/src/components/LauEcomIcon/LauEcomCoreIconFileCode.vue +28 -28
  23. package/src/components/LauEcomIcon/LauEcomUpcIconArrowDown.vue +0 -7
  24. package/src/components/LauEcomIcon/LauEcomUpcIconCertificate.vue +28 -28
  25. package/src/components/LauEcomIcon/LauEcomUpcIconCheck.vue +26 -26
  26. package/src/components/LauEcomIcon/LauEcomUpcIconCheckCircle.vue +28 -28
  27. package/src/components/LauEcomIcon/LauEcomUpcIconCreditCard.vue +28 -28
  28. package/src/components/LauEcomIcon/LauEcomUpcIconExclamationCircle.vue +28 -28
  29. package/src/components/LauEcomIcon/LauEcomUpcIconExclamationTriangle.vue +28 -28
  30. package/src/components/LauEcomIcon/LauEcomUpcIconInfoCircle.vue +26 -26
  31. package/src/components/LauEcomIcon/LauEcomUpcIconNavArrow.vue +26 -26
  32. package/src/components/LauEcomIcon/LauEcomUpcIconNavBack.vue +25 -0
  33. package/src/components/LauEcomIcon/LauEcomUpcIconNavCheckmark.vue +26 -26
  34. package/src/components/LauEcomInput/LauEcomInput.vue +207 -207
  35. package/src/components/LauEcomLoaderPage/LauEcomLoaderPage.vue +16 -16
  36. package/src/components/LauEcomPaginator/LauEcomPaginator.vue +57 -0
  37. package/src/components/LauEcomPaginator/LauEcomPaginatorButton.vue +68 -0
  38. package/src/components/LauEcomRadioButton/LauEcomRadioButton.vue +103 -103
  39. package/src/components/LauEcomRtb/LauEcomRtb.vue +71 -71
  40. package/src/components/LauEcomStepbar/LauEcomStepbar.vue +43 -43
  41. package/src/components/LauEcomStepbar/LauEcomStepbarItem.vue +128 -128
  42. package/src/components/LauEcomSwitch/LauEcomSwitch.vue +110 -108
  43. package/src/components/LauEcomTab/LauEcomTab.vue +82 -82
  44. package/src/components/LauEcomTag/LauEcomTag.vue +56 -0
  45. package/src/components/LauEcomTextButton/LauEcomTextButton.vue +71 -71
  46. package/src/components/LauEcomTyPage/LauEcomSummary.vue +14 -0
  47. package/src/components/LauEcomTyPage/LauEcomSummaryItem.vue +22 -0
  48. package/src/components/LauEcomTyPage/LauEcomTyPage.vue +149 -0
@@ -1,128 +1,128 @@
1
- <script lang="ts" setup>
2
- import { computed, toRefs } from "vue";
3
- import { Step } from "./types";
4
- import { LauEcomUpcIconCheck } from "../LauEcomIcon";
5
-
6
- interface Props {
7
- step: Step;
8
- totalSteps: number;
9
- isCurrentStep: boolean;
10
- isCompleted: boolean;
11
- isLastItem: boolean;
12
- }
13
-
14
- const props = withDefaults(defineProps<Props>(), {
15
- step: () => ({
16
- numberStep: 1,
17
- label: "Step,",
18
- }),
19
- totalSteps: 10,
20
- isCurrentStep: false,
21
- isCompleted: false,
22
- isLastItem: false,
23
- });
24
-
25
- const { numberStep, label } = toRefs(props.step);
26
-
27
- const stepbarItemClasses = computed(() => {
28
- return [
29
- "lau-ecom-step upc-font-body-reg-05-14px",
30
- {
31
- "lau-ecom-step--current-upc": props.isCurrentStep,
32
- },
33
- {
34
- "lau-ecom-step--completed-upc": props.isCompleted,
35
- },
36
- ];
37
- });
38
-
39
- const stepTrailClasses = computed(() => {
40
- return [
41
- "lau-ecom-step-trail",
42
- {
43
- "lau-ecom-step-trail--completed-upc": props.isCompleted,
44
- },
45
- ];
46
- });
47
-
48
- const stepLabelClasses = computed(() => {
49
- return [
50
- "lau-ecom-step-label core-font-body-reg-06-12px lau-ecom-step-label--upc",
51
- {
52
- "lau-ecom-step-label--disabled":
53
- !props.isCompleted && !props.isCurrentStep,
54
- },
55
- {
56
- "lau-ecom-step-label--current": props.isCurrentStep,
57
- },
58
- ];
59
- });
60
- </script>
61
-
62
- <template>
63
- <div class="dsEcom-w-full">
64
- <div class="dsEcom-flex dsEcom-items-center dsEcom-w-full">
65
- <div :class="stepbarItemClasses">
66
- <span v-if="!props.isCompleted">
67
- {{ `${numberStep < 10 && "0"}${numberStep}` }}
68
- </span>
69
- <LauEcomUpcIconCheck
70
- v-else
71
- class="dsEcom-fill-neutral-10"
72
- width="24"
73
- height="24"
74
- />
75
- </div>
76
- <span v-if="!isLastItem" :class="stepTrailClasses" />
77
- </div>
78
- <span :class="stepLabelClasses">{{ label }}</span>
79
- </div>
80
- </template>
81
-
82
- <style scoped>
83
- .lau-ecom-step {
84
- @apply dsEcom-flex
85
- dsEcom-items-center
86
- dsEcom-justify-center
87
- dsEcom-border
88
- dsEcom-border-neutral-70
89
- dsEcom-text-neutral-70
90
- dsEcom-bg-neutral-10
91
- dsEcom-w-8
92
- dsEcom-h-8
93
- dsEcom-rounded-full;
94
- }
95
-
96
- .lau-ecom-step--completed-upc {
97
- @apply !dsEcom-text-neutral-10
98
- !dsEcom-bg-primary-60
99
- dsEcom-border-primary-60;
100
- }
101
-
102
- .lau-ecom-step--current-upc {
103
- @apply !dsEcom-text-primary-60
104
- dsEcom-border-primary-60;
105
- }
106
-
107
- .lau-ecom-step-trail {
108
- @apply dsEcom-bg-neutral-70
109
- dsEcom-grow
110
- !dsEcom-h-[1px];
111
- }
112
-
113
- .lau-ecom-step-trail--completed-upc {
114
- @apply !dsEcom-bg-primary-60;
115
- }
116
-
117
- .lau-ecom-step-label--upc {
118
- @apply dsEcom-text-primary-60;
119
- }
120
-
121
- .lau-ecom-step-label--current {
122
- @apply dsEcom-font-bold;
123
- }
124
-
125
- .lau-ecom-step-label--disabled {
126
- @apply dsEcom-text-neutral-70;
127
- }
128
- </style>
1
+ <script lang="ts" setup>
2
+ import { computed, toRefs } from "vue";
3
+ import { Step } from "./types";
4
+ import { LauEcomUpcIconCheck } from "../LauEcomIcon";
5
+
6
+ interface Props {
7
+ step: Step;
8
+ totalSteps: number;
9
+ isCurrentStep: boolean;
10
+ isCompleted: boolean;
11
+ isLastItem: boolean;
12
+ }
13
+
14
+ const props = withDefaults(defineProps<Props>(), {
15
+ step: () => ({
16
+ numberStep: 1,
17
+ label: "Step,",
18
+ }),
19
+ totalSteps: 10,
20
+ isCurrentStep: false,
21
+ isCompleted: false,
22
+ isLastItem: false,
23
+ });
24
+
25
+ const { numberStep, label } = toRefs(props.step);
26
+
27
+ const stepbarItemClasses = computed(() => {
28
+ return [
29
+ "lau-ecom-step upc-font-body-reg-05-14px",
30
+ {
31
+ "lau-ecom-step--current-upc": props.isCurrentStep,
32
+ },
33
+ {
34
+ "lau-ecom-step--completed-upc": props.isCompleted,
35
+ },
36
+ ];
37
+ });
38
+
39
+ const stepTrailClasses = computed(() => {
40
+ return [
41
+ "lau-ecom-step-trail",
42
+ {
43
+ "lau-ecom-step-trail--completed-upc": props.isCompleted,
44
+ },
45
+ ];
46
+ });
47
+
48
+ const stepLabelClasses = computed(() => {
49
+ return [
50
+ "lau-ecom-step-label core-font-body-reg-06-12px lau-ecom-step-label--upc",
51
+ {
52
+ "lau-ecom-step-label--disabled":
53
+ !props.isCompleted && !props.isCurrentStep,
54
+ },
55
+ {
56
+ "lau-ecom-step-label--current": props.isCurrentStep,
57
+ },
58
+ ];
59
+ });
60
+ </script>
61
+
62
+ <template>
63
+ <div class="dsEcom-w-full">
64
+ <div class="dsEcom-flex dsEcom-items-center dsEcom-w-full">
65
+ <div :class="stepbarItemClasses">
66
+ <span v-if="!props.isCompleted">
67
+ {{ `${numberStep < 10 && "0"}${numberStep}` }}
68
+ </span>
69
+ <LauEcomUpcIconCheck
70
+ v-else
71
+ class="dsEcom-fill-neutral-10"
72
+ width="24"
73
+ height="24"
74
+ />
75
+ </div>
76
+ <span v-if="!isLastItem" :class="stepTrailClasses" />
77
+ </div>
78
+ <span :class="stepLabelClasses">{{ label }}</span>
79
+ </div>
80
+ </template>
81
+
82
+ <style scoped>
83
+ .lau-ecom-step {
84
+ @apply dsEcom-flex
85
+ dsEcom-items-center
86
+ dsEcom-justify-center
87
+ dsEcom-border
88
+ dsEcom-border-neutral-70
89
+ dsEcom-text-neutral-70
90
+ dsEcom-bg-neutral-10
91
+ dsEcom-w-8
92
+ dsEcom-h-8
93
+ dsEcom-rounded-full;
94
+ }
95
+
96
+ .lau-ecom-step--completed-upc {
97
+ @apply !dsEcom-text-neutral-10
98
+ !dsEcom-bg-primary-60
99
+ dsEcom-border-primary-60;
100
+ }
101
+
102
+ .lau-ecom-step--current-upc {
103
+ @apply !dsEcom-text-primary-60
104
+ dsEcom-border-primary-60;
105
+ }
106
+
107
+ .lau-ecom-step-trail {
108
+ @apply dsEcom-bg-neutral-70
109
+ dsEcom-grow
110
+ !dsEcom-h-[1px];
111
+ }
112
+
113
+ .lau-ecom-step-trail--completed-upc {
114
+ @apply !dsEcom-bg-primary-60;
115
+ }
116
+
117
+ .lau-ecom-step-label--upc {
118
+ @apply dsEcom-text-primary-60;
119
+ }
120
+
121
+ .lau-ecom-step-label--current {
122
+ @apply dsEcom-font-bold;
123
+ }
124
+
125
+ .lau-ecom-step-label--disabled {
126
+ @apply dsEcom-text-neutral-70;
127
+ }
128
+ </style>
@@ -1,108 +1,110 @@
1
- <script lang="ts" setup>
2
- import { computed, watch } from "vue";
3
-
4
- interface Props {
5
- currentClass?: string;
6
- isDisabled?: boolean;
7
- isChecked?: boolean;
8
- id?: string;
9
- name?: string;
10
- label?: string;
11
- }
12
-
13
- const props = withDefaults(defineProps<Props>(), {
14
- currentClass: "",
15
- isDisabled: false,
16
- isChecked: false,
17
- id: "",
18
- name: "",
19
- label: "",
20
- errorMessage: "",
21
- });
22
-
23
- const model = defineModel<boolean>();
24
-
25
- const emit = defineEmits(["onToggle"]);
26
-
27
- const lauEcomSwitchClasses = computed(() => {
28
- return {
29
- "dsEcom-peer lau-ecom-switch lau-ecom-switch--upc": true,
30
- "lau-ecom-switch--disabled": props.isDisabled,
31
- };
32
- });
33
-
34
- const lauEcomSwitchButtonClasses = computed(() => {
35
- return {
36
- "lau-ecom-switch-button": true,
37
- "lau-ecom-switch-button--disabled": props.isDisabled,
38
- };
39
- });
40
-
41
- watch(model, (newValue) => {
42
- if (newValue) emit("onToggle");
43
- });
44
- </script>
45
-
46
- <template>
47
- <div class="dsEcom-relative">
48
- <input
49
- :id="id"
50
- v-model="model"
51
- type="checkbox"
52
- :name="name"
53
- :disabled="isDisabled"
54
- :class="lauEcomSwitchClasses"
55
- />
56
- <div :class="lauEcomSwitchButtonClasses" />
57
- </div>
58
- </template>
59
-
60
- <style scoped>
61
- .lau-ecom-switch {
62
- @apply dsEcom-relative
63
- dsEcom-cursor-pointer
64
- dsEcom-shrink-0
65
- dsEcom-appearance-none
66
- dsEcom-w-10
67
- dsEcom-h-6
68
- dsEcom-border
69
- dsEcom-rounded-full
70
- dsEcom-bg-white
71
- dsEcom-transition-all
72
- dsEcom-duration-[0.3s]
73
- checked:dsEcom-p-1
74
- checked:dsEcom-cursor-pointer
75
- checked:disabled:!dsEcom-bg-neutral-60
76
- checked:disabled:!dsEcom-border-neutral-60;
77
- }
78
-
79
- .lau-ecom-switch--upc {
80
- @apply dsEcom-border-neutral-90
81
- checked:dsEcom-bg-primary-60
82
- checked:dsEcom-border-primary-60;
83
- }
84
-
85
- .lau-ecom-switch--disabled {
86
- @apply dsEcom-border-neutral-60
87
- dsEcom-pointer-events-none;
88
- }
89
-
90
- .lau-ecom-switch-button {
91
- @apply dsEcom-absolute
92
- dsEcom-top-1
93
- dsEcom-w-4
94
- dsEcom-h-4
95
- dsEcom-ml-1
96
- dsEcom-bg-neutral-90
97
- dsEcom-rounded-full
98
- dsEcom-pointer-events-none
99
- dsEcom-transition-all
100
- dsEcom-duration-[0.3s]
101
- peer-checked:dsEcom-ml-5
102
- peer-checked:dsEcom-bg-white;
103
- }
104
-
105
- .lau-ecom-switch-button--disabled {
106
- @apply dsEcom-bg-neutral-60;
107
- }
108
- </style>
1
+ <script lang="ts" setup>
2
+ import { computed, watch } from "vue";
3
+
4
+ interface Props {
5
+ currentClass?: string;
6
+ isDisabled?: boolean;
7
+ isChecked?: boolean;
8
+ id?: string;
9
+ name?: string;
10
+ label?: string;
11
+ }
12
+
13
+ const props = withDefaults(defineProps<Props>(), {
14
+ currentClass: "",
15
+ isDisabled: false,
16
+ isChecked: false,
17
+ id: "",
18
+ name: "",
19
+ label: "",
20
+ errorMessage: "",
21
+ });
22
+
23
+ const model = defineModel<boolean>();
24
+
25
+ const emit = defineEmits<{
26
+ (e: "onToggle", value: boolean): void;
27
+ }>();
28
+
29
+ const lauEcomSwitchClasses = computed(() => {
30
+ return {
31
+ "dsEcom-peer lau-ecom-switch lau-ecom-switch--upc": true,
32
+ "lau-ecom-switch--disabled": props.isDisabled,
33
+ };
34
+ });
35
+
36
+ const lauEcomSwitchButtonClasses = computed(() => {
37
+ return {
38
+ "lau-ecom-switch-button": true,
39
+ "lau-ecom-switch-button--disabled": props.isDisabled,
40
+ };
41
+ });
42
+
43
+ watch(model, (newValue) => {
44
+ if (newValue) emit("onToggle", newValue);
45
+ });
46
+ </script>
47
+
48
+ <template>
49
+ <div class="dsEcom-relative">
50
+ <input
51
+ :id="id"
52
+ v-model="model"
53
+ type="checkbox"
54
+ :name="name"
55
+ :disabled="isDisabled"
56
+ :class="lauEcomSwitchClasses"
57
+ />
58
+ <div :class="lauEcomSwitchButtonClasses" />
59
+ </div>
60
+ </template>
61
+
62
+ <style scoped>
63
+ .lau-ecom-switch {
64
+ @apply dsEcom-relative
65
+ dsEcom-cursor-pointer
66
+ dsEcom-shrink-0
67
+ dsEcom-appearance-none
68
+ dsEcom-w-10
69
+ dsEcom-h-6
70
+ dsEcom-border
71
+ dsEcom-rounded-full
72
+ dsEcom-bg-white
73
+ dsEcom-transition-all
74
+ dsEcom-duration-[0.3s]
75
+ checked:dsEcom-p-1
76
+ checked:dsEcom-cursor-pointer
77
+ checked:disabled:!dsEcom-bg-neutral-60
78
+ checked:disabled:!dsEcom-border-neutral-60;
79
+ }
80
+
81
+ .lau-ecom-switch--upc {
82
+ @apply dsEcom-border-neutral-90
83
+ checked:dsEcom-bg-primary-60
84
+ checked:dsEcom-border-primary-60;
85
+ }
86
+
87
+ .lau-ecom-switch--disabled {
88
+ @apply dsEcom-border-neutral-60
89
+ dsEcom-pointer-events-none;
90
+ }
91
+
92
+ .lau-ecom-switch-button {
93
+ @apply dsEcom-absolute
94
+ dsEcom-top-1
95
+ dsEcom-w-4
96
+ dsEcom-h-4
97
+ dsEcom-ml-1
98
+ dsEcom-bg-neutral-90
99
+ dsEcom-rounded-full
100
+ dsEcom-pointer-events-none
101
+ dsEcom-transition-all
102
+ dsEcom-duration-[0.3s]
103
+ peer-checked:dsEcom-ml-5
104
+ peer-checked:dsEcom-bg-white;
105
+ }
106
+
107
+ .lau-ecom-switch-button--disabled {
108
+ @apply dsEcom-bg-neutral-60;
109
+ }
110
+ </style>
@@ -1,82 +1,82 @@
1
- <script lang="ts" setup>
2
- import { computed } from "vue";
3
- import { LauEcomSize } from "../../enums";
4
-
5
- interface Props {
6
- size?: LauEcomSize;
7
- isDisabled?: boolean;
8
- isActive?: boolean;
9
- title?: string;
10
- }
11
-
12
- const props = withDefaults(defineProps<Props>(), {
13
- size: LauEcomSize.md,
14
- isDisabled: false,
15
- isActive: false,
16
- title: "item",
17
- });
18
-
19
- const lauEcomTabClasses = computed(() => {
20
- return {
21
- "lau-ecom-tab lau-ecom-tab--upc upc-font-button-16px": true,
22
- "lau-ecom-tab--disabled": props.isDisabled,
23
- "lau-ecom-tab--upc-active": props.isActive,
24
- };
25
- });
26
-
27
- const iconClasses = computed(() => {
28
- return {
29
- "dsEcom-fill-secondary-60": true,
30
- "dsEcom-fill-neutral-70": props.isDisabled,
31
- };
32
- });
33
- </script>
34
-
35
- <template>
36
- <div class="dsEcom-flex">
37
- <div :class="lauEcomTabClasses">
38
- <slot name="icon" :classIcon="iconClasses"></slot>
39
- <p>{{ title }}</p>
40
- </div>
41
- </div>
42
- </template>
43
-
44
- <style scoped>
45
- .lau-ecom-tab {
46
- @apply dsEcom-flex
47
- dsEcom-flex-col
48
- dsEcom-justify-center
49
- dsEcom-items-center
50
- dsEcom-pt-2
51
- dsEcom-pb-1
52
- dsEcom-px-5
53
- dsEcom-cursor-pointer
54
- dsEcom-rounded-[4px];
55
- }
56
-
57
- .lau-ecom-tab--disabled {
58
- @apply !dsEcom-text-neutral-70
59
- dsEcom-cursor-not-allowed
60
- hover:!dsEcom-bg-neutral-10;
61
- }
62
-
63
- .lau-ecom-tab--upc {
64
- @apply dsEcom-text-secondary-60
65
- hover:dsEcom-bg-neutral-20;
66
- }
67
-
68
- .lau-ecom-tab--upc-active {
69
- @apply dsEcom-border-b-4
70
- dsEcom-border-secondary-60
71
- dsEcom-rounded-b-[2px]
72
- hover:dsEcom-bg-neutral-10;
73
- }
74
-
75
- .lau-ecom-tab-line {
76
- @apply dsEcom-w-full
77
- dsEcom-mt-4
78
- dsEcom-h-[4px]
79
- dsEcom-rounded-[2px]
80
- dsEcom-bg-secondary-60;
81
- }
82
- </style>
1
+ <script lang="ts" setup>
2
+ import { computed } from "vue";
3
+ import { LauEcomSize } from "../../enums";
4
+
5
+ interface Props {
6
+ size?: LauEcomSize;
7
+ isDisabled?: boolean;
8
+ isActive?: boolean;
9
+ title?: string;
10
+ }
11
+
12
+ const props = withDefaults(defineProps<Props>(), {
13
+ size: LauEcomSize.md,
14
+ isDisabled: false,
15
+ isActive: false,
16
+ title: "item",
17
+ });
18
+
19
+ const lauEcomTabClasses = computed(() => {
20
+ return {
21
+ "lau-ecom-tab lau-ecom-tab--upc upc-font-button-16px": true,
22
+ "lau-ecom-tab--disabled": props.isDisabled,
23
+ "lau-ecom-tab--upc-active": props.isActive,
24
+ };
25
+ });
26
+
27
+ const iconClasses = computed(() => {
28
+ return {
29
+ "dsEcom-fill-secondary-60": true,
30
+ "dsEcom-fill-neutral-70": props.isDisabled,
31
+ };
32
+ });
33
+ </script>
34
+
35
+ <template>
36
+ <div class="dsEcom-flex">
37
+ <div :class="lauEcomTabClasses">
38
+ <slot name="icon" :classIcon="iconClasses"></slot>
39
+ <p>{{ title }}</p>
40
+ </div>
41
+ </div>
42
+ </template>
43
+
44
+ <style scoped>
45
+ .lau-ecom-tab {
46
+ @apply dsEcom-flex
47
+ dsEcom-flex-col
48
+ dsEcom-justify-center
49
+ dsEcom-items-center
50
+ dsEcom-pt-2
51
+ dsEcom-pb-1
52
+ dsEcom-px-5
53
+ dsEcom-cursor-pointer
54
+ dsEcom-rounded-[4px];
55
+ }
56
+
57
+ .lau-ecom-tab--disabled {
58
+ @apply !dsEcom-text-neutral-70
59
+ dsEcom-cursor-not-allowed
60
+ hover:!dsEcom-bg-neutral-10;
61
+ }
62
+
63
+ .lau-ecom-tab--upc {
64
+ @apply dsEcom-text-secondary-60
65
+ hover:dsEcom-bg-neutral-20;
66
+ }
67
+
68
+ .lau-ecom-tab--upc-active {
69
+ @apply dsEcom-border-b-4
70
+ dsEcom-border-secondary-60
71
+ dsEcom-rounded-b-[2px]
72
+ hover:dsEcom-bg-neutral-10;
73
+ }
74
+
75
+ .lau-ecom-tab-line {
76
+ @apply dsEcom-w-full
77
+ dsEcom-mt-4
78
+ dsEcom-h-[4px]
79
+ dsEcom-rounded-[2px]
80
+ dsEcom-bg-secondary-60;
81
+ }
82
+ </style>