commons-shared-web-ui 0.0.38 → 0.0.40

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 (29) hide show
  1. package/fesm2022/commons-shared-web-ui.mjs +1582 -1346
  2. package/fesm2022/commons-shared-web-ui.mjs.map +1 -1
  3. package/index.d.ts +76 -8
  4. package/package.json +1 -1
  5. package/src/lib/modules/alert/alert.theme.scss +84 -84
  6. package/src/lib/modules/button/button.theme.scss +120 -120
  7. package/src/lib/modules/configurable-form/configurable-form.theme.scss +77 -77
  8. package/src/lib/modules/confirmation-modal/confirmation-modal.theme.scss +86 -86
  9. package/src/lib/modules/filter/filter.theme.scss +91 -91
  10. package/src/lib/modules/filter-sidebar/filter-sidebar.theme.scss +37 -37
  11. package/src/lib/modules/filter-table-selector/filter-table-selector.theme.scss +36 -36
  12. package/src/lib/modules/form-builder/form-builder.theme.scss +212 -212
  13. package/src/lib/modules/form-components/components/checkbox/_theme.scss +62 -62
  14. package/src/lib/modules/form-components/components/datepicker/_theme.scss +81 -81
  15. package/src/lib/modules/form-components/components/dropdown/_theme.scss +90 -90
  16. package/src/lib/modules/form-components/components/input/_theme.scss +76 -76
  17. package/src/lib/modules/form-components/components/radio/_theme.scss +60 -60
  18. package/src/lib/modules/form-components/components/search/_theme.scss +72 -72
  19. package/src/lib/modules/form-components/components/toggle/_theme.scss +44 -44
  20. package/src/lib/modules/form-components/form-components.theme.scss +24 -24
  21. package/src/lib/modules/nav/nav.theme.scss +86 -86
  22. package/src/lib/modules/pagination/pagination.theme.scss +66 -66
  23. package/src/lib/modules/side-nav/side-nav.theme.scss +111 -111
  24. package/src/lib/modules/smart-form/smart-form.theme.scss +889 -889
  25. package/src/lib/modules/smart-table/smart-table.theme.scss +335 -323
  26. package/src/lib/modules/snackbar/snackbar.theme.scss +93 -93
  27. package/src/lib/modules/summary-card/summary-card.theme.scss +175 -175
  28. package/src/lib/styles/global.scss +151 -134
  29. package/src/lib/styles/utilities.scss +250 -250
package/src/lib/styles/utilities.scss CHANGED
@@ -1,250 +1,250 @@
1
- /* utilities.scss */
2
-
3
- /* Display Classes */
4
- .d-flex { display: flex; }
5
- .d-inline-flex { display: inline-flex; }
6
- .d-grid { display: grid; }
7
- .d-block { display: block; }
8
- .d-none { display: none; }
9
-
10
- /* Flexbox Directions & Wraps */
11
- .flex-column { flex-direction: column; }
12
- .flex-row { flex-direction: row; }
13
- .flex-row-reverse { flex-direction: row-reverse; }
14
- .flex-wrap { flex-wrap: wrap; }
15
- .flex-1 { flex: 1; }
16
-
17
- /* Alignments */
18
- .align-items-center { align-items: center; }
19
- .align-items-start { align-items: flex-start; }
20
- .align-items-end { align-items: flex-end; }
21
- .justify-content-center { justify-content: center; }
22
- .justify-content-between { justify-content: space-between; }
23
- .justify-content-start { justify-content: flex-start; }
24
- .justify-content-end { justify-content: flex-end; }
25
-
26
- /* Grid */
27
- .grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
28
-
29
- /* Width & Height (Percentages) */
30
- .w-100 { width: 100%; }
31
- .h-100 { height: 100%; }
32
-
33
- /* Positioning */
34
- .position-relative { position: relative; }
35
- .position-absolute { position: absolute; }
36
-
37
- /* Text Alignment */
38
- .text-center { text-align: center; }
39
- .text-left { text-align: left; }
40
- .text-right { text-align: right; }
41
-
42
- /* Fonts */
43
- .font-poppins { font-family: var(--cc-sf-font-family, 'Poppins', sans-serif); }
44
- .font-weight-400 { font-weight: 400; }
45
- .font-weight-500 { font-weight: 500; }
46
- .font-weight-600 { font-weight: 600; }
47
-
48
- .text-13 { font-size: 13px; }
49
- .text-14 { font-size: 14px; }
50
- .text-16 { font-size: 16px; }
51
-
52
- /* Colors (from variables) */
53
- .color-white { color: #ffffff; }
54
- .color-dark { color: #111827; }
55
- .color-gray { color: #6B7280; }
56
- .color-error { color: var(--cc-sf-error-text-color, #DC2626); }
57
- .bg-white { background-color: #ffffff; }
58
- .bg-transparent { background-color: transparent; }
59
-
60
- /* Margins */
61
- .m-0 { margin: 0; }
62
- .mt-4 { margin-top: 4px; }
63
- .mt-8 { margin-top: 8px; }
64
- .mt-10 { margin-top: 10px; }
65
- .mt-12 { margin-top: 12px; }
66
- .mt-16 { margin-top: 16px; }
67
- .mt-20 { margin-top: 20px; }
68
- .mt-24 { margin-top: 24px; }
69
-
70
- .mb-0 { margin-bottom: 0px; }
71
- .mb-4 { margin-bottom: 4px; }
72
- .mb-8 { margin-bottom: 8px; }
73
- .mb-10 { margin-bottom: 10px; }
74
- .mb-12 { margin-bottom: 12px; }
75
- .mb-16 { margin-bottom: 16px; }
76
- .mb-20 { margin-bottom: 20px; }
77
- .mb-24 { margin-bottom: 24px; }
78
-
79
- .ml-16 { margin-left: 16px; }
80
- .ml-20 { margin-left: 20px; }
81
-
82
- /* Paddings */
83
- .p-0 { padding: 0; }
84
- .p-16 { padding: 16px; }
85
- .p-20 { padding: 20px; }
86
- .p-24 { padding: 24px; }
87
- .pt-20 { padding-top: 20px; }
88
- .pb-10 { padding-bottom: 10px; }
89
-
90
- /* Gaps */
91
- .gap-4 { gap: 4px; }
92
- .gap-6 { gap: 6px; }
93
- .gap-8 { gap: 8px; }
94
- .gap-10 { gap: 10px; }
95
- .gap-12 { gap: 12px; }
96
- .gap-16 { gap: 16px; }
97
- .gap-20 { gap: 20px; }
98
-
99
- /* Border Radius */
100
- .rounded-4 { border-radius: 4px; }
101
- .rounded-6 { border-radius: 6px; }
102
- .rounded-8 { border-radius: 8px; }
103
- .rounded-10 { border-radius: 10px; }
104
- .rounded-12 { border-radius: 12px; }
105
- .rounded-20 { border-radius: 20px; }
106
- .rounded-24 { border-radius: 24px; }
107
- .rounded-50 { border-radius: 50%; }
108
-
109
- /* Utilities */
110
- .cursor-pointer { cursor: pointer; }
111
- .overflow-hidden { overflow: hidden; }
112
- .resize-vertical { resize: vertical; }
113
- .box-sizing-border { box-sizing: border-box; }
114
-
115
- /* Form Auto Extracted Utilities 2 */
116
- .border-none { border: none !important; }
117
- .mb-16px { margin-bottom: var(--cc-sf-grid-gap, 16px) !important; }
118
- .c-DC2626 { color: var(--cc-sf-label-required-color, #DC2626) !important; }
119
- .ml-0-125rem { margin-left: 0.125rem !important; }
120
- .fs-0-875rem { font-size: 0.875rem !important; }
121
- .c-111827 { color: var(--cc-sf-label-color, #111827) !important; }
122
- .br-7px { border-radius: var(--cc-sf-input-radius, 7px) !important; }
123
- .c-6B7280 { color: var(--cc-sf-hint-color, #6B7280) !important; }
124
- .fs-0-75rem { font-size: var(--cc-sf-error-text-size, 0.75rem) !important; }
125
- .b-none { background: none !important; }
126
- .p-32px-24px { padding: 32px 24px !important; }
127
- .us-none { user-select: none !important; }
128
- .c-1E293B { color: var(--cc-sf-label-color, #1E293B) !important; }
129
- .c-3B82F6 { color: var(--cc-sf-chip-selected-bg, #3B82F6) !important; }
130
- .fs-0-78rem { font-size: 0.78rem !important; }
131
- .p-10px-14px { padding: 10px 14px !important; }
132
- .fs-0-85rem { font-size: 0.85rem !important; }
133
- .fs-0-72rem { font-size: 0.72rem !important; }
134
- .c-94A3B8 { color: #94A3B8 !important; }
135
- .p-4px { padding: 4px !important; }
136
- .br-8px { border-radius: var(--cc-sf-input-radius, 8px) !important; }
137
- .bc-F3F4F6 { background-color: var(--cc-sf-input-disabled-bg, #F3F4F6) !important; }
138
- .br-none { border-right: none !important; }
139
- .bl-none { border-left: none !important; }
140
- .pe-none { pointer-events: none !important; }
141
- .fs-1-1rem { font-size: 1.1rem !important; }
142
- .c-9CA3AF { color: var(--cc-sf-hint-color, #9CA3AF) !important; }
143
- .pl-2-4rem { padding-left: 2.4rem !important; }
144
- .fs-0-8125rem { font-size: 0.8125rem !important; }
145
- .ls-none { list-style: none !important; }
146
- .br-12px { border-radius: var(--mu-carousel-radius, 12px) !important; }
147
- .b-FFFAF1 { background: var(--cc-sf-dropzone-bg, #FFFAF1) !important; }
148
- .fs-18px { font-size: 18px !important; }
149
- .b-FEF2F2 { background: var(--cc-sf-error-bg, #FEF2F2) !important; }
150
-
151
- /* Form Auto Extracted Utilities 3 */
152
- .bc-DC2626 { border-color: var(--cc-sf-error-border, #DC2626) !important; }
153
- .c-202124 { color: var(--cc-sf-label-color, #202124) !important; }
154
- .fs-18px { font-size: var(--cc-sf-label-size, 18px) !important; }
155
- .mb-0-5rem { margin-bottom: 0.5rem !important; }
156
- .pt-0-625rem { padding-top: var(--cc-sf-input-padding-y, 0.625rem) !important; }
157
- .pb-0-625rem { padding-bottom: var(--cc-sf-input-padding-y, 0.625rem) !important; }
158
- .pl-16px { padding-left: var(--cc-sf-input-padding-x, 16px) !important; }
159
- .pr-16px { padding-right: var(--cc-sf-input-padding-x, 16px) !important; }
160
- .bc-ffffff { background-color: var(--cc-sf-section-bg, #ffffff) !important; }
161
- .b-1px-solid-D1D5DB { border: 1px solid var(--cc-sf-input-border, #D1D5DB) !important; }
162
- .fs-0-75rem { font-size: 0.75rem !important; }
163
- .c-1F2937 { color: var(--cc-sf-section-label-color, #1F2937) !important; }
164
- .p-6px-14px { padding: var(--cc-sf-chip-padding, 6px 14px) !important; }
165
- .b-ffffff { background: var(--loc-suggestion-bg, #ffffff) !important; }
166
- .c-374151 { color: var(--cc-sf-label-color, #374151) !important; }
167
- .br-20px { border-radius: var(--cc-sf-chip-radius, 20px) !important; }
168
- .fs-0-875rem { font-size: var(--cc-sf-btn-font-size, 0.875rem) !important; }
169
- .bc-D1D5DB { background-color: var(--cc-sf-switch-track-off, #D1D5DB) !important; }
170
- .pr-2-75rem { padding-right: 2.75rem !important; }
171
- .p-0-25rem { padding: 0.25rem !important; }
172
- .p-0-625rem-0-875rem { padding: var(--cc-sf-generated-padding, 0.625rem 0.875rem) !important; }
173
- .b-F3F4F6 { background: var(--cc-sf-generated-bg, #F3F4F6) !important; }
174
- .b-1px-solid-E5E7EB { border: 1px solid var(--cc-sf-input-disabled-border, #E5E7EB) !important; }
175
- .br-8px { border-radius: var(--cc-sf-uploaded-item-radius, 8px) !important; }
176
- .c-6B7280 { color: var(--ms-desc-color, #6B7280) !important; }
177
- .mb-20px { margin-bottom: var(--cc-sf-section-gap, 20px) !important; }
178
- .br-10px { border-radius: var(--cc-sf-input-radius, 10px) !important; }
179
- .p-20px { padding: var(--cc-sf-section-padding, 20px) !important; }
180
- .fs-1rem { font-size: 1rem !important; }
181
- .m-0-0-16px-0 { margin: 0 0 16px 0 !important; }
182
- .bb-2px-solid-E5E7EB { border-bottom: var(--cc-sf-section-label-border, 2px solid #E5E7EB) !important; }
183
- .p-16px { padding: var(--cc-sf-instance-padding, 16px) !important; }
184
- .b-F9FAFB { background: var(--loc-tba-bg, #F9FAFB) !important; }
185
- .bb-1px-dashed-D1D5DB { border-bottom: var(--cc-sf-instance-divider, 1px dashed #D1D5DB) !important; }
186
- .c-4B5563 { color: var(--cc-sf-instance-num-color, #4B5563) !important; }
187
- .fs-0-8125rem { font-size: var(--cc-sf-hint-size, 0.8125rem) !important; }
188
- .pb-0 { padding-bottom: 0 !important; }
189
- .p-18px-24px { padding: 18px 24px !important; }
190
- .c-111827 { color: var(--ms-title-color, #111827) !important; }
191
- .bt-1px-solid-E5E7EB { border-top: 1px solid #E5E7EB !important; }
192
- .p-4px-10px { padding: 4px 10px !important; }
193
- .b-FFF5F5 { background: var(--cc-sf-btn-remove-bg, #FFF5F5) !important; }
194
- .c-E53E3E { color: var(--loc-delete-color, #E53E3E) !important; }
195
- .b-1px-solid-FED7D7 { border: var(--cc-sf-btn-remove-border, 1px solid #FED7D7) !important; }
196
- .br-4px { border-radius: var(--cc-sf-btn-remove-radius, 4px) !important; }
197
- .p-8px-16px { padding: 8px 16px !important; }
198
- .b-transparent { background: var(--cc-sf-btn-add-bg, transparent) !important; }
199
- .c-3B82F6 { color: var(--cc-sf-input-focus-border, #3B82F6) !important; }
200
- .b-1px-dashed-CBD5E1 { border: var(--cc-sf-btn-add-border, 1px dashed #CBD5E1) !important; }
201
- .br-6px { border-radius: var(--cc-sf-btn-add-radius, 6px) !important; }
202
- .b-1-5px-dashed-CBD5E1 { border: var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1) !important; }
203
- .br-12px { border-radius: var(--cc-sf-dropzone-radius, 12px) !important; }
204
- .bc-FFFAF1 { background-color: var(--cc-sf-dropzone-bg, #FFFAF1) !important; }
205
- .c-94A3B8 { color: var(--cc-sf-uploaded-remove-color, #94A3B8) !important; }
206
- .fs-0-9rem { font-size: var(--cc-sf-input-font-size, 0.9rem) !important; }
207
- .c-64748B { color: var(--cc-sf-dropzone-hint-color, #64748B) !important; }
208
- .b-1px-solid-E2E8F0 { border: var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0) !important; }
209
- .b-2px-solid-E2E8F0 { border: 2px solid #E2E8F0 !important; }
210
- .pr-3-5rem { padding-right: 3.5rem !important; }
211
- .p-0-0-875rem { padding: 0 0.875rem !important; }
212
- .bc-FFFFFF { background-color: var(--cc-sf-input-bg, #FFFFFF) !important; }
213
- .b-1-5px-solid-D1D5DB { border: var(--cc-sf-input-border, 1.5px solid #D1D5DB) !important; }
214
- .mb-0-75rem { margin-bottom: 0.75rem !important; }
215
- .mt-6px { margin-top: 6px !important; }
216
- .pr-2-4rem { padding-right: 2.4rem !important; }
217
- .p-0-2rem { padding: 0.2rem !important; }
218
- .fs-1-35rem { font-size: 1.35rem !important; }
219
- .p-4px-12px { padding: 4px 12px !important; }
220
- .b-111827 { background: var(--cc-sf-label-color, #111827) !important; }
221
- .b-2px-dashed-CBD5E1 { border: 2px dashed var(--cc-sf-dropzone-border, #CBD5E1) !important; }
222
- .fs-52px { font-size: 52px !important; }
223
- .p-12px-16px { padding: 12px 16px !important; }
224
- .bb-1px-solid-F3F4F6 { border-bottom: 1px solid var(--cc-sf-input-disabled-border, #F3F4F6) !important; }
225
- .b-0F172A { background: var(--mu-carousel-bg, #0F172A) !important; }
226
- .b-3px-solid-rgba-255-255-255-0-15 { border: 3px solid rgba(255, 255, 255, 0.15) !important; }
227
- .b-rgba-255-255-255-0-85 { background: rgba(255, 255, 255, 0.85) !important; }
228
- .b-rgba-0-0-0-0-55 { background: rgba(0, 0, 0, 0.55) !important; }
229
- .b-rgba-255-255-255-0-45 { background: rgba(255, 255, 255, 0.45) !important; }
230
- .pb-4px { padding-bottom: 4px !important; }
231
- .b-2px-solid-transparent { border: 2px solid transparent !important; }
232
- .b-E2E8F0 { background: var(--mu-thumb-bg, #E2E8F0) !important; }
233
- .b-1E293B { background: #1E293B !important; }
234
- .c-EF4444 { color: #EF4444 !important; }
235
- .b-rgba-0-0-0-0-5 { background: rgba(0, 0, 0, 0.5) !important; }
236
- .br-16px { border-radius: var(--mu-modal-radius, 16px) !important; }
237
- .p-24px-28px { padding: 24px 28px !important; }
238
- .bb-1px-solid-E5E7EB { border-bottom: 1px solid var(--cc-sf-input-disabled-border, #E5E7EB) !important; }
239
- .fs-1-25rem { font-size: 1.25rem !important; }
240
- .p-48px-24px { padding: 48px 24px !important; }
241
- .b-3px-solid-E2E8F0 { border: 3px solid #E2E8F0 !important; }
242
- .p-16px-24px { padding: 16px 24px !important; }
243
- .p-28px { padding: 28px !important; }
244
- .b-3px-solid-transparent { border: 3px solid transparent !important; }
245
- .b-rgba-59-130-246-0-12 { background: rgba(59, 130, 246, 0.12) !important; }
246
- .p-20px-28px { padding: 20px 28px !important; }
247
- .c-1A56DB { color: var(--loc-add-color, #1A56DB) !important; }
248
- .b-1px-dashed-D1D5DB { border: 1px dashed var(--cc-sf-input-disabled-border, #D1D5DB) !important; }
249
- .fs-40px { font-size: 40px !important; }
250
- .c-9CA3AF { color: var(--loc-tba-icon-color, #9CA3AF) !important; }
1
+ /* utilities.scss */
2
+
3
+ /* Display Classes */
4
+ .d-flex { display: flex; }
5
+ .d-inline-flex { display: inline-flex; }
6
+ .d-grid { display: grid; }
7
+ .d-block { display: block; }
8
+ .d-none { display: none; }
9
+
10
+ /* Flexbox Directions & Wraps */
11
+ .flex-column { flex-direction: column; }
12
+ .flex-row { flex-direction: row; }
13
+ .flex-row-reverse { flex-direction: row-reverse; }
14
+ .flex-wrap { flex-wrap: wrap; }
15
+ .flex-1 { flex: 1; }
16
+
17
+ /* Alignments */
18
+ .align-items-center { align-items: center; }
19
+ .align-items-start { align-items: flex-start; }
20
+ .align-items-end { align-items: flex-end; }
21
+ .justify-content-center { justify-content: center; }
22
+ .justify-content-between { justify-content: space-between; }
23
+ .justify-content-start { justify-content: flex-start; }
24
+ .justify-content-end { justify-content: flex-end; }
25
+
26
+ /* Grid */
27
+ .grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
28
+
29
+ /* Width & Height (Percentages) */
30
+ .w-100 { width: 100%; }
31
+ .h-100 { height: 100%; }
32
+
33
+ /* Positioning */
34
+ .position-relative { position: relative; }
35
+ .position-absolute { position: absolute; }
36
+
37
+ /* Text Alignment */
38
+ .text-center { text-align: center; }
39
+ .text-left { text-align: left; }
40
+ .text-right { text-align: right; }
41
+
42
+ /* Fonts */
43
+ .font-poppins { font-family: var(--cc-sf-font-family, 'Poppins', sans-serif); }
44
+ .font-weight-400 { font-weight: 400; }
45
+ .font-weight-500 { font-weight: 500; }
46
+ .font-weight-600 { font-weight: 600; }
47
+
48
+ .text-13 { font-size: 13px; }
49
+ .text-14 { font-size: 14px; }
50
+ .text-16 { font-size: 16px; }
51
+
52
+ /* Colors (from variables) */
53
+ .color-white { color: #ffffff; }
54
+ .color-dark { color: #111827; }
55
+ .color-gray { color: #6B7280; }
56
+ .color-error { color: var(--cc-sf-error-text-color, #DC2626); }
57
+ .bg-white { background-color: #ffffff; }
58
+ .bg-transparent { background-color: transparent; }
59
+
60
+ /* Margins */
61
+ .m-0 { margin: 0; }
62
+ .mt-4 { margin-top: 4px; }
63
+ .mt-8 { margin-top: 8px; }
64
+ .mt-10 { margin-top: 10px; }
65
+ .mt-12 { margin-top: 12px; }
66
+ .mt-16 { margin-top: 16px; }
67
+ .mt-20 { margin-top: 20px; }
68
+ .mt-24 { margin-top: 24px; }
69
+
70
+ .mb-0 { margin-bottom: 0px; }
71
+ .mb-4 { margin-bottom: 4px; }
72
+ .mb-8 { margin-bottom: 8px; }
73
+ .mb-10 { margin-bottom: 10px; }
74
+ .mb-12 { margin-bottom: 12px; }
75
+ .mb-16 { margin-bottom: 16px; }
76
+ .mb-20 { margin-bottom: 20px; }
77
+ .mb-24 { margin-bottom: 24px; }
78
+
79
+ .ml-16 { margin-left: 16px; }
80
+ .ml-20 { margin-left: 20px; }
81
+
82
+ /* Paddings */
83
+ .p-0 { padding: 0; }
84
+ .p-16 { padding: 16px; }
85
+ .p-20 { padding: 20px; }
86
+ .p-24 { padding: 24px; }
87
+ .pt-20 { padding-top: 20px; }
88
+ .pb-10 { padding-bottom: 10px; }
89
+
90
+ /* Gaps */
91
+ .gap-4 { gap: 4px; }
92
+ .gap-6 { gap: 6px; }
93
+ .gap-8 { gap: 8px; }
94
+ .gap-10 { gap: 10px; }
95
+ .gap-12 { gap: 12px; }
96
+ .gap-16 { gap: 16px; }
97
+ .gap-20 { gap: 20px; }
98
+
99
+ /* Border Radius */
100
+ .rounded-4 { border-radius: 4px; }
101
+ .rounded-6 { border-radius: 6px; }
102
+ .rounded-8 { border-radius: 8px; }
103
+ .rounded-10 { border-radius: 10px; }
104
+ .rounded-12 { border-radius: 12px; }
105
+ .rounded-20 { border-radius: 20px; }
106
+ .rounded-24 { border-radius: 24px; }
107
+ .rounded-50 { border-radius: 50%; }
108
+
109
+ /* Utilities */
110
+ .cursor-pointer { cursor: pointer; }
111
+ .overflow-hidden { overflow: hidden; }
112
+ .resize-vertical { resize: vertical; }
113
+ .box-sizing-border { box-sizing: border-box; }
114
+
115
+ /* Form Auto Extracted Utilities 2 */
116
+ .border-none { border: none !important; }
117
+ .mb-16px { margin-bottom: var(--cc-sf-grid-gap, 16px) !important; }
118
+ .c-DC2626 { color: var(--cc-sf-label-required-color, #DC2626) !important; }
119
+ .ml-0-125rem { margin-left: 0.125rem !important; }
120
+ .fs-0-875rem { font-size: 0.875rem !important; }
121
+ .c-111827 { color: var(--cc-sf-label-color, #111827) !important; }
122
+ .br-7px { border-radius: var(--cc-sf-input-radius, 7px) !important; }
123
+ .c-6B7280 { color: var(--cc-sf-hint-color, #6B7280) !important; }
124
+ .fs-0-75rem { font-size: var(--cc-sf-error-text-size, 0.75rem) !important; }
125
+ .b-none { background: none !important; }
126
+ .p-32px-24px { padding: 32px 24px !important; }
127
+ .us-none { user-select: none !important; }
128
+ .c-1E293B { color: var(--cc-sf-label-color, #1E293B) !important; }
129
+ .c-3B82F6 { color: var(--cc-sf-chip-selected-bg, #3B82F6) !important; }
130
+ .fs-0-78rem { font-size: 0.78rem !important; }
131
+ .p-10px-14px { padding: 10px 14px !important; }
132
+ .fs-0-85rem { font-size: 0.85rem !important; }
133
+ .fs-0-72rem { font-size: 0.72rem !important; }
134
+ .c-94A3B8 { color: #94A3B8 !important; }
135
+ .p-4px { padding: 4px !important; }
136
+ .br-8px { border-radius: var(--cc-sf-input-radius, 8px) !important; }
137
+ .bc-F3F4F6 { background-color: var(--cc-sf-input-disabled-bg, #F3F4F6) !important; }
138
+ .br-none { border-right: none !important; }
139
+ .bl-none { border-left: none !important; }
140
+ .pe-none { pointer-events: none !important; }
141
+ .fs-1-1rem { font-size: 1.1rem !important; }
142
+ .c-9CA3AF { color: var(--cc-sf-hint-color, #9CA3AF) !important; }
143
+ .pl-2-4rem { padding-left: 2.4rem !important; }
144
+ .fs-0-8125rem { font-size: 0.8125rem !important; }
145
+ .ls-none { list-style: none !important; }
146
+ .br-12px { border-radius: var(--mu-carousel-radius, 12px) !important; }
147
+ .b-FFFAF1 { background: var(--cc-sf-dropzone-bg, #FFFAF1) !important; }
148
+ .fs-18px { font-size: 18px !important; }
149
+ .b-FEF2F2 { background: var(--cc-sf-error-bg, #FEF2F2) !important; }
150
+
151
+ /* Form Auto Extracted Utilities 3 */
152
+ .bc-DC2626 { border-color: var(--cc-sf-error-border, #DC2626) !important; }
153
+ .c-202124 { color: var(--cc-sf-label-color, #202124) !important; }
154
+ .fs-18px { font-size: var(--cc-sf-label-size, 18px) !important; }
155
+ .mb-0-5rem { margin-bottom: 0.5rem !important; }
156
+ .pt-0-625rem { padding-top: var(--cc-sf-input-padding-y, 0.625rem) !important; }
157
+ .pb-0-625rem { padding-bottom: var(--cc-sf-input-padding-y, 0.625rem) !important; }
158
+ .pl-16px { padding-left: var(--cc-sf-input-padding-x, 16px) !important; }
159
+ .pr-16px { padding-right: var(--cc-sf-input-padding-x, 16px) !important; }
160
+ .bc-ffffff { background-color: var(--cc-sf-section-bg, #ffffff) !important; }
161
+ .b-1px-solid-D1D5DB { border: 1px solid var(--cc-sf-input-border, #D1D5DB) !important; }
162
+ .fs-0-75rem { font-size: 0.75rem !important; }
163
+ .c-1F2937 { color: var(--cc-sf-section-label-color, #1F2937) !important; }
164
+ .p-6px-14px { padding: var(--cc-sf-chip-padding, 6px 14px) !important; }
165
+ .b-ffffff { background: var(--loc-suggestion-bg, #ffffff) !important; }
166
+ .c-374151 { color: var(--cc-sf-label-color, #374151) !important; }
167
+ .br-20px { border-radius: var(--cc-sf-chip-radius, 20px) !important; }
168
+ .fs-0-875rem { font-size: var(--cc-sf-btn-font-size, 0.875rem) !important; }
169
+ .bc-D1D5DB { background-color: var(--cc-sf-switch-track-off, #D1D5DB) !important; }
170
+ .pr-2-75rem { padding-right: 2.75rem !important; }
171
+ .p-0-25rem { padding: 0.25rem !important; }
172
+ .p-0-625rem-0-875rem { padding: var(--cc-sf-generated-padding, 0.625rem 0.875rem) !important; }
173
+ .b-F3F4F6 { background: var(--cc-sf-generated-bg, #F3F4F6) !important; }
174
+ .b-1px-solid-E5E7EB { border: 1px solid var(--cc-sf-input-disabled-border, #E5E7EB) !important; }
175
+ .br-8px { border-radius: var(--cc-sf-uploaded-item-radius, 8px) !important; }
176
+ .c-6B7280 { color: var(--ms-desc-color, #6B7280) !important; }
177
+ .mb-20px { margin-bottom: var(--cc-sf-section-gap, 20px) !important; }
178
+ .br-10px { border-radius: var(--cc-sf-input-radius, 10px) !important; }
179
+ .p-20px { padding: var(--cc-sf-section-padding, 20px) !important; }
180
+ .fs-1rem { font-size: 1rem !important; }
181
+ .m-0-0-16px-0 { margin: 0 0 16px 0 !important; }
182
+ .bb-2px-solid-E5E7EB { border-bottom: var(--cc-sf-section-label-border, 2px solid #E5E7EB) !important; }
183
+ .p-16px { padding: var(--cc-sf-instance-padding, 16px) !important; }
184
+ .b-F9FAFB { background: var(--loc-tba-bg, #F9FAFB) !important; }
185
+ .bb-1px-dashed-D1D5DB { border-bottom: var(--cc-sf-instance-divider, 1px dashed #D1D5DB) !important; }
186
+ .c-4B5563 { color: var(--cc-sf-instance-num-color, #4B5563) !important; }
187
+ .fs-0-8125rem { font-size: var(--cc-sf-hint-size, 0.8125rem) !important; }
188
+ .pb-0 { padding-bottom: 0 !important; }
189
+ .p-18px-24px { padding: 18px 24px !important; }
190
+ .c-111827 { color: var(--ms-title-color, #111827) !important; }
191
+ .bt-1px-solid-E5E7EB { border-top: 1px solid #E5E7EB !important; }
192
+ .p-4px-10px { padding: 4px 10px !important; }
193
+ .b-FFF5F5 { background: var(--cc-sf-btn-remove-bg, #FFF5F5) !important; }
194
+ .c-E53E3E { color: var(--loc-delete-color, #E53E3E) !important; }
195
+ .b-1px-solid-FED7D7 { border: var(--cc-sf-btn-remove-border, 1px solid #FED7D7) !important; }
196
+ .br-4px { border-radius: var(--cc-sf-btn-remove-radius, 4px) !important; }
197
+ .p-8px-16px { padding: 8px 16px !important; }
198
+ .b-transparent { background: var(--cc-sf-btn-add-bg, transparent) !important; }
199
+ .c-3B82F6 { color: var(--cc-sf-input-focus-border, #3B82F6) !important; }
200
+ .b-1px-dashed-CBD5E1 { border: var(--cc-sf-btn-add-border, 1px dashed #CBD5E1) !important; }
201
+ .br-6px { border-radius: var(--cc-sf-btn-add-radius, 6px) !important; }
202
+ .b-1-5px-dashed-CBD5E1 { border: var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1) !important; }
203
+ .br-12px { border-radius: var(--cc-sf-dropzone-radius, 12px) !important; }
204
+ .bc-FFFAF1 { background-color: var(--cc-sf-dropzone-bg, #FFFAF1) !important; }
205
+ .c-94A3B8 { color: var(--cc-sf-uploaded-remove-color, #94A3B8) !important; }
206
+ .fs-0-9rem { font-size: var(--cc-sf-input-font-size, 0.9rem) !important; }
207
+ .c-64748B { color: var(--cc-sf-dropzone-hint-color, #64748B) !important; }
208
+ .b-1px-solid-E2E8F0 { border: var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0) !important; }
209
+ .b-2px-solid-E2E8F0 { border: 2px solid #E2E8F0 !important; }
210
+ .pr-3-5rem { padding-right: 3.5rem !important; }
211
+ .p-0-0-875rem { padding: 0 0.875rem !important; }
212
+ .bc-FFFFFF { background-color: var(--cc-sf-input-bg, #FFFFFF) !important; }
213
+ .b-1-5px-solid-D1D5DB { border: var(--cc-sf-input-border, 1.5px solid #D1D5DB) !important; }
214
+ .mb-0-75rem { margin-bottom: 0.75rem !important; }
215
+ .mt-6px { margin-top: 6px !important; }
216
+ .pr-2-4rem { padding-right: 2.4rem !important; }
217
+ .p-0-2rem { padding: 0.2rem !important; }
218
+ .fs-1-35rem { font-size: 1.35rem !important; }
219
+ .p-4px-12px { padding: 4px 12px !important; }
220
+ .b-111827 { background: var(--cc-sf-label-color, #111827) !important; }
221
+ .b-2px-dashed-CBD5E1 { border: 2px dashed var(--cc-sf-dropzone-border, #CBD5E1) !important; }
222
+ .fs-52px { font-size: 52px !important; }
223
+ .p-12px-16px { padding: 12px 16px !important; }
224
+ .bb-1px-solid-F3F4F6 { border-bottom: 1px solid var(--cc-sf-input-disabled-border, #F3F4F6) !important; }
225
+ .b-0F172A { background: var(--mu-carousel-bg, #0F172A) !important; }
226
+ .b-3px-solid-rgba-255-255-255-0-15 { border: 3px solid rgba(255, 255, 255, 0.15) !important; }
227
+ .b-rgba-255-255-255-0-85 { background: rgba(255, 255, 255, 0.85) !important; }
228
+ .b-rgba-0-0-0-0-55 { background: rgba(0, 0, 0, 0.55) !important; }
229
+ .b-rgba-255-255-255-0-45 { background: rgba(255, 255, 255, 0.45) !important; }
230
+ .pb-4px { padding-bottom: 4px !important; }
231
+ .b-2px-solid-transparent { border: 2px solid transparent !important; }
232
+ .b-E2E8F0 { background: var(--mu-thumb-bg, #E2E8F0) !important; }
233
+ .b-1E293B { background: #1E293B !important; }
234
+ .c-EF4444 { color: #EF4444 !important; }
235
+ .b-rgba-0-0-0-0-5 { background: rgba(0, 0, 0, 0.5) !important; }
236
+ .br-16px { border-radius: var(--mu-modal-radius, 16px) !important; }
237
+ .p-24px-28px { padding: 24px 28px !important; }
238
+ .bb-1px-solid-E5E7EB { border-bottom: 1px solid var(--cc-sf-input-disabled-border, #E5E7EB) !important; }
239
+ .fs-1-25rem { font-size: 1.25rem !important; }
240
+ .p-48px-24px { padding: 48px 24px !important; }
241
+ .b-3px-solid-E2E8F0 { border: 3px solid #E2E8F0 !important; }
242
+ .p-16px-24px { padding: 16px 24px !important; }
243
+ .p-28px { padding: 28px !important; }
244
+ .b-3px-solid-transparent { border: 3px solid transparent !important; }
245
+ .b-rgba-59-130-246-0-12 { background: rgba(59, 130, 246, 0.12) !important; }
246
+ .p-20px-28px { padding: 20px 28px !important; }
247
+ .c-1A56DB { color: var(--loc-add-color, #1A56DB) !important; }
248
+ .b-1px-dashed-D1D5DB { border: 1px dashed var(--cc-sf-input-disabled-border, #D1D5DB) !important; }
249
+ .fs-40px { font-size: 40px !important; }
250
+ .c-9CA3AF { color: var(--loc-tba-icon-color, #9CA3AF) !important; }