@simplybusiness/mobius 4.3.6 → 4.4.1

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 (91) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/components/Box/Box.js +19 -1
  3. package/dist/cjs/components/Box/Box.js.map +1 -1
  4. package/dist/cjs/components/Box/types.js +6 -0
  5. package/dist/cjs/components/Box/types.js.map +1 -0
  6. package/dist/cjs/components/Drawer/Drawer.js +12 -6
  7. package/dist/cjs/components/Drawer/Drawer.js.map +1 -1
  8. package/dist/cjs/components/Flex/propUtils.js +6 -8
  9. package/dist/cjs/components/Flex/propUtils.js.map +1 -1
  10. package/dist/cjs/components/Grid/Grid.js +5 -5
  11. package/dist/cjs/components/Grid/Grid.js.map +1 -1
  12. package/dist/cjs/components/Modal/Modal.js +12 -6
  13. package/dist/cjs/components/Modal/Modal.js.map +1 -1
  14. package/dist/cjs/tsconfig.tsbuildinfo +1 -1
  15. package/dist/cjs/utils/filterUndefinedProps.js +21 -0
  16. package/dist/cjs/utils/filterUndefinedProps.js.map +1 -0
  17. package/dist/cjs/utils/getSpacingValue.js +21 -0
  18. package/dist/cjs/utils/getSpacingValue.js.map +1 -0
  19. package/dist/cjs/utils/index.js +3 -0
  20. package/dist/cjs/utils/index.js.map +1 -1
  21. package/dist/cjs/utils/sizeClasses.js +1 -0
  22. package/dist/cjs/utils/sizeClasses.js.map +1 -1
  23. package/dist/cjs/utils/sizeOptions.js +22 -0
  24. package/dist/cjs/utils/sizeOptions.js.map +1 -0
  25. package/dist/esm/components/Box/Box.js +19 -1
  26. package/dist/esm/components/Box/Box.js.map +1 -1
  27. package/dist/esm/components/Box/types.js +3 -0
  28. package/dist/esm/components/Box/types.js.map +1 -0
  29. package/dist/esm/components/Drawer/Drawer.js +12 -6
  30. package/dist/esm/components/Drawer/Drawer.js.map +1 -1
  31. package/dist/esm/components/Flex/propUtils.js +6 -5
  32. package/dist/esm/components/Flex/propUtils.js.map +1 -1
  33. package/dist/esm/components/Flex/types.js.map +1 -1
  34. package/dist/esm/components/Grid/Grid.js +5 -5
  35. package/dist/esm/components/Grid/Grid.js.map +1 -1
  36. package/dist/esm/components/Modal/Modal.js +12 -6
  37. package/dist/esm/components/Modal/Modal.js.map +1 -1
  38. package/dist/esm/types/size.js.map +1 -1
  39. package/dist/esm/utils/filterUndefinedProps.js +11 -0
  40. package/dist/esm/utils/filterUndefinedProps.js.map +1 -0
  41. package/dist/esm/utils/getSpacingValue.js +11 -0
  42. package/dist/esm/utils/getSpacingValue.js.map +1 -0
  43. package/dist/esm/utils/index.js +3 -0
  44. package/dist/esm/utils/index.js.map +1 -1
  45. package/dist/esm/utils/sizeClasses.js +1 -0
  46. package/dist/esm/utils/sizeClasses.js.map +1 -1
  47. package/dist/esm/utils/sizeOptions.js +12 -0
  48. package/dist/esm/utils/sizeOptions.js.map +1 -0
  49. package/dist/types/components/Box/Box.d.ts +2 -11
  50. package/dist/types/components/Box/types.d.ts +31 -0
  51. package/dist/types/components/Flex/propUtils.d.ts +1 -6
  52. package/dist/types/components/Flex/types.d.ts +4 -3
  53. package/dist/types/components/Grid/Grid.d.ts +4 -3
  54. package/dist/types/types/size.d.ts +2 -1
  55. package/dist/types/utils/filterUndefinedProps.d.ts +1 -0
  56. package/dist/types/utils/filterUndefinedProps.test.d.ts +1 -0
  57. package/dist/types/utils/getSpacingValue.d.ts +2 -0
  58. package/dist/types/utils/getSpacingValue.test.d.ts +1 -0
  59. package/dist/types/utils/index.d.ts +3 -0
  60. package/dist/types/utils/sizeClasses.d.ts +2 -0
  61. package/dist/types/utils/sizeOptions.d.ts +2 -0
  62. package/package.json +19 -19
  63. package/src/components/Box/Box.mdx +6 -2
  64. package/src/components/Box/Box.stories.tsx +72 -6
  65. package/src/components/Box/Box.test.tsx +189 -8
  66. package/src/components/Box/Box.tsx +52 -15
  67. package/src/components/Box/types.ts +34 -0
  68. package/src/components/Drawer/Drawer.tsx +15 -7
  69. package/src/components/Flex/Flex.mdx +0 -10
  70. package/src/components/Flex/Flex.stories.tsx +3 -17
  71. package/src/components/Flex/propUtils.test.ts +14 -35
  72. package/src/components/Flex/propUtils.ts +6 -7
  73. package/src/components/Flex/types.ts +4 -3
  74. package/src/components/Grid/Grid.mdx +0 -10
  75. package/src/components/Grid/Grid.stories.tsx +6 -19
  76. package/src/components/Grid/Grid.tsx +9 -8
  77. package/src/components/Modal/Modal.tsx +15 -7
  78. package/src/types/size.ts +3 -1
  79. package/src/utils/filterUndefinedProps.test.ts +15 -0
  80. package/src/utils/filterUndefinedProps.ts +9 -0
  81. package/src/utils/getSpacingValue.test.ts +33 -0
  82. package/src/utils/getSpacingValue.ts +15 -0
  83. package/src/utils/index.ts +3 -0
  84. package/src/utils/sizeClasses.test.ts +1 -1
  85. package/src/utils/sizeClasses.ts +1 -0
  86. package/src/utils/sizeOptions.ts +12 -0
  87. package/dist/cjs/components/Icon/IconStyle.js +0 -413
  88. package/dist/cjs/components/Icon/IconStyle.js.map +0 -1
  89. package/dist/esm/components/Icon/IconStyle.js +0 -403
  90. package/dist/esm/components/Icon/IconStyle.js.map +0 -1
  91. package/dist/types/components/Icon/IconStyle.d.ts +0 -1
@@ -1,413 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- Object.defineProperty(exports, "applyStyles", {
6
- enumerable: true,
7
- get: function() {
8
- return applyStyles;
9
- }
10
- });
11
- const styleText = `
12
- svg:not(:root).svg-inline--mobius-icon, svg:not(:host).svg-inline--mobius-icon {
13
- overflow: visible;
14
- box-sizing: content-box;
15
- }
16
-
17
- .svg-inline--mobius-icon {
18
- display: var(--mobius-icon-display, inline-block);
19
- height: 1em;
20
- overflow: visible;
21
- vertical-align: -0.125em;
22
- }
23
- .svg-inline--mobius-icon.mobius-icon-2xs {
24
- vertical-align: 0.1em;
25
- }
26
- .svg-inline--mobius-icon.mobius-icon-xs {
27
- vertical-align: 0em;
28
- }
29
- .svg-inline--mobius-icon.mobius-icon-sm {
30
- vertical-align: -0.0714285705em;
31
- }
32
- .svg-inline--mobius-icon.mobius-icon-lg {
33
- vertical-align: -0.2em;
34
- }
35
- .svg-inline--mobius-icon.mobius-icon-xl {
36
- vertical-align: -0.25em;
37
- }
38
- .svg-inline--mobius-icon.mobius-icon-2xl {
39
- vertical-align: -0.3125em;
40
- }
41
- .svg-inline--mobius-icon.mobius-icon-pull-left {
42
- margin-right: var(--mobius-icon-pull-margin, 0.3em);
43
- width: auto;
44
- }
45
- .svg-inline--mobius-icon.mobius-icon-pull-right {
46
- margin-left: var(--mobius-icon-pull-margin, 0.3em);
47
- width: auto;
48
- }
49
- .svg-inline--mobius-icon.mobius-icon-li {
50
- width: var(--mobius-icon-li-width, 2em);
51
- top: 0.25em;
52
- }
53
- .svg-inline--mobius-icon.mobius-icon-fw {
54
- width: var(--mobius-icon-fw-width, 1.25em);
55
- }
56
-
57
- .mobius-icon-layers svg.svg-inline--mobius-icon {
58
- bottom: 0;
59
- left: 0;
60
- margin: auto;
61
- position: absolute;
62
- right: 0;
63
- top: 0;
64
- }
65
-
66
- .mobius-icon-layers-counter, .mobius-icon-layers-text {
67
- display: inline-block;
68
- position: absolute;
69
- text-align: center;
70
- }
71
-
72
- .mobius-icon-layers {
73
- display: inline-block;
74
- height: 1em;
75
- position: relative;
76
- text-align: center;
77
- vertical-align: -0.125em;
78
- width: 1em;
79
- }
80
- .mobius-icon-layers svg.svg-inline--mobius-icon {
81
- transform-origin: center center;
82
- }
83
-
84
- .mobius-icon-layers-text {
85
- left: 50%;
86
- top: 50%;
87
- transform: translate(-50%, -50%);
88
- transform-origin: center center;
89
- }
90
-
91
- .mobius-icon-layers-counter {
92
- background-color: var(--mobius-icon-counter-background-color, #ff253a);
93
- border-radius: var(--mobius-icon-counter-border-radius, 1em);
94
- box-sizing: border-box;
95
- color: var(--mobius-icon-inverse, #fff);
96
- line-height: var(--mobius-icon-counter-line-height, 1);
97
- max-width: var(--mobius-icon-counter-max-width, 5em);
98
- min-width: var(--mobius-icon-counter-min-width, 1.5em);
99
- overflow: hidden;
100
- padding: var(--mobius-icon-counter-padding, 0.25em 0.5em);
101
- right: var(--mobius-icon-right, 0);
102
- text-overflow: ellipsis;
103
- top: var(--mobius-icon-top, 0);
104
- transform: scale(var(--mobius-icon-counter-scale, 0.25));
105
- transform-origin: top right;
106
- }
107
-
108
- .mobius-icon-layers-bottom-right {
109
- bottom: var(--mobius-icon-bottom, 0);
110
- right: var(--mobius-icon-right, 0);
111
- top: auto;
112
- transform: scale(var(--mobius-icon-layers-scale, 0.25));
113
- transform-origin: bottom right;
114
- }
115
-
116
- .mobius-icon-layers-bottom-left {
117
- bottom: var(--mobius-icon-bottom, 0);
118
- left: var(--mobius-icon-left, 0);
119
- right: auto;
120
- top: auto;
121
- transform: scale(var(--mobius-icon-layers-scale, 0.25));
122
- transform-origin: bottom left;
123
- }
124
-
125
- .mobius-icon-layers-top-right {
126
- top: var(--mobius-icon-top, 0);
127
- right: var(--mobius-icon-right, 0);
128
- transform: scale(var(--mobius-icon-layers-scale, 0.25));
129
- transform-origin: top right;
130
- }
131
-
132
- .mobius-icon-layers-top-left {
133
- left: var(--mobius-icon-left, 0);
134
- right: auto;
135
- top: var(--mobius-icon-top, 0);
136
- transform: scale(var(--mobius-icon-layers-scale, 0.25));
137
- transform-origin: top left;
138
- }
139
-
140
- .mobius-icon-1x {
141
- font-size: 1em;
142
- }
143
-
144
- .mobius-icon-2x {
145
- font-size: 2em;
146
- }
147
-
148
- .mobius-icon-3x {
149
- font-size: 3em;
150
- }
151
-
152
- .mobius-icon-4x {
153
- font-size: 4em;
154
- }
155
-
156
- .mobius-icon-5x {
157
- font-size: 5em;
158
- }
159
-
160
- .mobius-icon-6x {
161
- font-size: 6em;
162
- }
163
-
164
- .mobius-icon-7x {
165
- font-size: 7em;
166
- }
167
-
168
- .mobius-icon-8x {
169
- font-size: 8em;
170
- }
171
-
172
- .mobius-icon-9x {
173
- font-size: 9em;
174
- }
175
-
176
- .mobius-icon-10x {
177
- font-size: 10em;
178
- }
179
-
180
- .mobius-icon-2xs {
181
- font-size: 0.625em;
182
- line-height: 0.1em;
183
- vertical-align: 0.225em;
184
- }
185
-
186
- .mobius-icon-xs {
187
- font-size: 0.75em;
188
- line-height: 0.0833333337em;
189
- vertical-align: 0.125em;
190
- }
191
-
192
- .mobius-icon-sm {
193
- font-size: 0.875em;
194
- line-height: 0.0714285718em;
195
- vertical-align: 0.0535714295em;
196
- }
197
-
198
- .mobius-icon-lg {
199
- font-size: 1.25em;
200
- line-height: 0.05em;
201
- vertical-align: -0.075em;
202
- }
203
-
204
- .mobius-icon-xl {
205
- font-size: 1.5em;
206
- line-height: 0.0416666682em;
207
- vertical-align: -0.125em;
208
- }
209
-
210
- .mobius-icon-2xl {
211
- font-size: 2em;
212
- line-height: 0.03125em;
213
- vertical-align: -0.1875em;
214
- }
215
-
216
- .mobius-icon-fw {
217
- text-align: center;
218
- width: 1.25em;
219
- }
220
-
221
- .mobius-icon-ul {
222
- list-style-type: none;
223
- margin-left: var(--mobius-icon-li-margin, 2.5em);
224
- padding-left: 0;
225
- }
226
- .mobius-icon-ul > li {
227
- position: relative;
228
- }
229
-
230
- .mobius-icon-li {
231
- left: calc(var(--mobius-icon-li-width, 2em) * -1);
232
- position: absolute;
233
- text-align: center;
234
- width: var(--mobius-icon-li-width, 2em);
235
- line-height: inherit;
236
- }
237
-
238
- .mobius-icon-border {
239
- border-color: var(--mobius-icon-border-color, #eee);
240
- border-radius: var(--mobius-icon-border-radius, 0.1em);
241
- border-style: var(--mobius-icon-border-style, solid);
242
- border-width: var(--mobius-icon-border-width, 0.08em);
243
- padding: var(--mobius-icon-border-padding, 0.2em 0.25em 0.15em);
244
- }
245
-
246
- .mobius-icon-pull-left {
247
- float: left;
248
- margin-right: var(--mobius-icon-pull-margin, 0.3em);
249
- }
250
-
251
- .mobius-icon-pull-right {
252
- float: right;
253
- margin-left: var(--mobius-icon-pull-margin, 0.3em);
254
- }
255
-
256
- .mobius-icon-spin {
257
- animation-name: mobius-icon-spin;
258
- animation-delay: var(--mobius-icon-animation-delay, 0s);
259
- animation-direction: var(--mobius-icon-animation-direction, normal);
260
- animation-duration: var(--mobius-icon-animation-duration, 2s);
261
- animation-iteration-count: var(--mobius-icon-animation-iteration-count, infinite);
262
- animation-timing-function: var(--mobius-icon-animation-timing, linear);
263
- }
264
-
265
- .mobius-icon-spin-reverse {
266
- --mobius-icon-animation-direction: reverse;
267
- }
268
-
269
- @media (prefers-reduced-motion: reduce) {
270
- .mobius-icon-spin {
271
- animation-delay: -1ms;
272
- animation-duration: 1ms;
273
- animation-iteration-count: 1;
274
- transition-delay: 0s;
275
- transition-duration: 0s;
276
- }
277
- }
278
- @keyframes mobius-icon-spin {
279
- 0% {
280
- transform: rotate(0deg);
281
- }
282
- 100% {
283
- transform: rotate(360deg);
284
- }
285
- }
286
- .mobius-icon-rotate-90 {
287
- transform: rotate(90deg);
288
- }
289
-
290
- .mobius-icon-rotate-180 {
291
- transform: rotate(180deg);
292
- }
293
-
294
- .mobius-icon-rotate-270 {
295
- transform: rotate(270deg);
296
- }
297
-
298
- .mobius-icon-flip-horizontal {
299
- transform: scale(-1, 1);
300
- }
301
-
302
- .mobius-icon-flip-vertical {
303
- transform: scale(1, -1);
304
- }
305
-
306
- .mobius-icon-flip-both,
307
- .mobius-icon-flip-horizontal.mobius-icon-flip-vertical {
308
- transform: scale(-1, -1);
309
- }
310
-
311
- .mobius-icon-rotate-by {
312
- transform: rotate(var(--mobius-icon-rotate-angle, none));
313
- }
314
-
315
- .mobius-icon-stack {
316
- display: inline-block;
317
- vertical-align: middle;
318
- height: 2em;
319
- position: relative;
320
- width: 2.5em;
321
- }
322
-
323
- .mobius-icon-stack-1x,
324
- .mobius-icon-stack-2x {
325
- bottom: 0;
326
- left: 0;
327
- margin: auto;
328
- position: absolute;
329
- right: 0;
330
- top: 0;
331
- z-index: var(--mobius-icon-stack-z-index, auto);
332
- }
333
-
334
- .svg-inline--mobius-icon.mobius-icon-stack-1x {
335
- height: 1em;
336
- width: 1.25em;
337
- }
338
- .svg-inline--mobius-icon.mobius-icon-stack-2x {
339
- height: 2em;
340
- width: 2.5em;
341
- }
342
-
343
- .mobius-icon-inverse {
344
- color: var(--mobius-icon-inverse, #fff);
345
- }
346
-
347
- .sr-only,
348
- .mobius-icon-sr-only {
349
- position: absolute;
350
- width: 1px;
351
- height: 1px;
352
- padding: 0;
353
- margin: -1px;
354
- overflow: hidden;
355
- clip: rect(0, 0, 0, 0);
356
- white-space: nowrap;
357
- border-width: 0;
358
- }
359
-
360
- .sr-only-focusable:not(:focus),
361
- .mobius-icon-sr-only-focusable:not(:focus) {
362
- position: absolute;
363
- width: 1px;
364
- height: 1px;
365
- padding: 0;
366
- margin: -1px;
367
- overflow: hidden;
368
- clip: rect(0, 0, 0, 0);
369
- white-space: nowrap;
370
- border-width: 0;
371
- }
372
-
373
- .svg-inline--mobius-icon .mobius-icon-primary {
374
- fill: var(--mobius-icon-primary-color, currentColor);
375
- opacity: var(--mobius-icon-primary-opacity, 1);
376
- }
377
-
378
- .svg-inline--mobius-icon .mobius-icon-secondary {
379
- fill: var(--mobius-icon-secondary-color, currentColor);
380
- opacity: var(--mobius-icon-secondary-opacity, 0.4);
381
- }
382
-
383
- .svg-inline--mobius-icon.mobius-icon-swap-opacity .mobius-icon-primary {
384
- opacity: var(--mobius-icon-secondary-opacity, 0.4);
385
- }
386
-
387
- .svg-inline--mobius-icon.mobius-icon-swap-opacity .mobius-icon-secondary {
388
- opacity: var(--mobius-icon-primary-opacity, 1);
389
- }
390
-
391
- .svg-inline--mobius-icon mask .mobius-icon-primary,
392
- .svg-inline--mobius-icon mask .mobius-icon-secondary {
393
- fill: black;
394
- }
395
-
396
- .fad.mobius-icon-inverse,
397
- .mobius-icon-duotone.mobius-icon-inverse {
398
- color: var(--mobius-icon-inverse, #fff);
399
- }
400
- `;
401
- let appliedStyles = false;
402
- function applyStyles() {
403
- if (appliedStyles) {
404
- return;
405
- }
406
- appliedStyles = true;
407
- const style = document.createElement("style");
408
- style.setAttribute("data-id", "icon-style");
409
- style.innerText = styleText;
410
- document.head.append(style);
411
- }
412
-
413
- //# sourceMappingURL=IconStyle.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../../src/components/Icon/IconStyle.tsx"],"sourcesContent":["const styleText = `\nsvg:not(:root).svg-inline--mobius-icon, svg:not(:host).svg-inline--mobius-icon {\n overflow: visible;\n box-sizing: content-box;\n}\n\n.svg-inline--mobius-icon {\n display: var(--mobius-icon-display, inline-block);\n height: 1em;\n overflow: visible;\n vertical-align: -0.125em;\n}\n.svg-inline--mobius-icon.mobius-icon-2xs {\n vertical-align: 0.1em;\n}\n.svg-inline--mobius-icon.mobius-icon-xs {\n vertical-align: 0em;\n}\n.svg-inline--mobius-icon.mobius-icon-sm {\n vertical-align: -0.0714285705em;\n}\n.svg-inline--mobius-icon.mobius-icon-lg {\n vertical-align: -0.2em;\n}\n.svg-inline--mobius-icon.mobius-icon-xl {\n vertical-align: -0.25em;\n}\n.svg-inline--mobius-icon.mobius-icon-2xl {\n vertical-align: -0.3125em;\n}\n.svg-inline--mobius-icon.mobius-icon-pull-left {\n margin-right: var(--mobius-icon-pull-margin, 0.3em);\n width: auto;\n}\n.svg-inline--mobius-icon.mobius-icon-pull-right {\n margin-left: var(--mobius-icon-pull-margin, 0.3em);\n width: auto;\n}\n.svg-inline--mobius-icon.mobius-icon-li {\n width: var(--mobius-icon-li-width, 2em);\n top: 0.25em;\n}\n.svg-inline--mobius-icon.mobius-icon-fw {\n width: var(--mobius-icon-fw-width, 1.25em);\n}\n\n.mobius-icon-layers svg.svg-inline--mobius-icon {\n bottom: 0;\n left: 0;\n margin: auto;\n position: absolute;\n right: 0;\n top: 0;\n}\n\n.mobius-icon-layers-counter, .mobius-icon-layers-text {\n display: inline-block;\n position: absolute;\n text-align: center;\n}\n\n.mobius-icon-layers {\n display: inline-block;\n height: 1em;\n position: relative;\n text-align: center;\n vertical-align: -0.125em;\n width: 1em;\n}\n.mobius-icon-layers svg.svg-inline--mobius-icon {\n transform-origin: center center;\n}\n\n.mobius-icon-layers-text {\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n transform-origin: center center;\n}\n\n.mobius-icon-layers-counter {\n background-color: var(--mobius-icon-counter-background-color, #ff253a);\n border-radius: var(--mobius-icon-counter-border-radius, 1em);\n box-sizing: border-box;\n color: var(--mobius-icon-inverse, #fff);\n line-height: var(--mobius-icon-counter-line-height, 1);\n max-width: var(--mobius-icon-counter-max-width, 5em);\n min-width: var(--mobius-icon-counter-min-width, 1.5em);\n overflow: hidden;\n padding: var(--mobius-icon-counter-padding, 0.25em 0.5em);\n right: var(--mobius-icon-right, 0);\n text-overflow: ellipsis;\n top: var(--mobius-icon-top, 0);\n transform: scale(var(--mobius-icon-counter-scale, 0.25));\n transform-origin: top right;\n}\n\n.mobius-icon-layers-bottom-right {\n bottom: var(--mobius-icon-bottom, 0);\n right: var(--mobius-icon-right, 0);\n top: auto;\n transform: scale(var(--mobius-icon-layers-scale, 0.25));\n transform-origin: bottom right;\n}\n\n.mobius-icon-layers-bottom-left {\n bottom: var(--mobius-icon-bottom, 0);\n left: var(--mobius-icon-left, 0);\n right: auto;\n top: auto;\n transform: scale(var(--mobius-icon-layers-scale, 0.25));\n transform-origin: bottom left;\n}\n\n.mobius-icon-layers-top-right {\n top: var(--mobius-icon-top, 0);\n right: var(--mobius-icon-right, 0);\n transform: scale(var(--mobius-icon-layers-scale, 0.25));\n transform-origin: top right;\n}\n\n.mobius-icon-layers-top-left {\n left: var(--mobius-icon-left, 0);\n right: auto;\n top: var(--mobius-icon-top, 0);\n transform: scale(var(--mobius-icon-layers-scale, 0.25));\n transform-origin: top left;\n}\n\n.mobius-icon-1x {\n font-size: 1em;\n}\n\n.mobius-icon-2x {\n font-size: 2em;\n}\n\n.mobius-icon-3x {\n font-size: 3em;\n}\n\n.mobius-icon-4x {\n font-size: 4em;\n}\n\n.mobius-icon-5x {\n font-size: 5em;\n}\n\n.mobius-icon-6x {\n font-size: 6em;\n}\n\n.mobius-icon-7x {\n font-size: 7em;\n}\n\n.mobius-icon-8x {\n font-size: 8em;\n}\n\n.mobius-icon-9x {\n font-size: 9em;\n}\n\n.mobius-icon-10x {\n font-size: 10em;\n}\n\n.mobius-icon-2xs {\n font-size: 0.625em;\n line-height: 0.1em;\n vertical-align: 0.225em;\n}\n\n.mobius-icon-xs {\n font-size: 0.75em;\n line-height: 0.0833333337em;\n vertical-align: 0.125em;\n}\n\n.mobius-icon-sm {\n font-size: 0.875em;\n line-height: 0.0714285718em;\n vertical-align: 0.0535714295em;\n}\n\n.mobius-icon-lg {\n font-size: 1.25em;\n line-height: 0.05em;\n vertical-align: -0.075em;\n}\n\n.mobius-icon-xl {\n font-size: 1.5em;\n line-height: 0.0416666682em;\n vertical-align: -0.125em;\n}\n\n.mobius-icon-2xl {\n font-size: 2em;\n line-height: 0.03125em;\n vertical-align: -0.1875em;\n}\n\n.mobius-icon-fw {\n text-align: center;\n width: 1.25em;\n}\n\n.mobius-icon-ul {\n list-style-type: none;\n margin-left: var(--mobius-icon-li-margin, 2.5em);\n padding-left: 0;\n}\n.mobius-icon-ul > li {\n position: relative;\n}\n\n.mobius-icon-li {\n left: calc(var(--mobius-icon-li-width, 2em) * -1);\n position: absolute;\n text-align: center;\n width: var(--mobius-icon-li-width, 2em);\n line-height: inherit;\n}\n\n.mobius-icon-border {\n border-color: var(--mobius-icon-border-color, #eee);\n border-radius: var(--mobius-icon-border-radius, 0.1em);\n border-style: var(--mobius-icon-border-style, solid);\n border-width: var(--mobius-icon-border-width, 0.08em);\n padding: var(--mobius-icon-border-padding, 0.2em 0.25em 0.15em);\n}\n\n.mobius-icon-pull-left {\n float: left;\n margin-right: var(--mobius-icon-pull-margin, 0.3em);\n}\n\n.mobius-icon-pull-right {\n float: right;\n margin-left: var(--mobius-icon-pull-margin, 0.3em);\n}\n\n.mobius-icon-spin {\n animation-name: mobius-icon-spin;\n animation-delay: var(--mobius-icon-animation-delay, 0s);\n animation-direction: var(--mobius-icon-animation-direction, normal);\n animation-duration: var(--mobius-icon-animation-duration, 2s);\n animation-iteration-count: var(--mobius-icon-animation-iteration-count, infinite);\n animation-timing-function: var(--mobius-icon-animation-timing, linear);\n}\n\n.mobius-icon-spin-reverse {\n --mobius-icon-animation-direction: reverse;\n}\n\n@media (prefers-reduced-motion: reduce) {\n.mobius-icon-spin {\n animation-delay: -1ms;\n animation-duration: 1ms;\n animation-iteration-count: 1;\n transition-delay: 0s;\n transition-duration: 0s;\n }\n}\n@keyframes mobius-icon-spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.mobius-icon-rotate-90 {\n transform: rotate(90deg);\n}\n\n.mobius-icon-rotate-180 {\n transform: rotate(180deg);\n}\n\n.mobius-icon-rotate-270 {\n transform: rotate(270deg);\n}\n\n.mobius-icon-flip-horizontal {\n transform: scale(-1, 1);\n}\n\n.mobius-icon-flip-vertical {\n transform: scale(1, -1);\n}\n\n.mobius-icon-flip-both,\n.mobius-icon-flip-horizontal.mobius-icon-flip-vertical {\n transform: scale(-1, -1);\n}\n\n.mobius-icon-rotate-by {\n transform: rotate(var(--mobius-icon-rotate-angle, none));\n}\n\n.mobius-icon-stack {\n display: inline-block;\n vertical-align: middle;\n height: 2em;\n position: relative;\n width: 2.5em;\n}\n\n.mobius-icon-stack-1x,\n.mobius-icon-stack-2x {\n bottom: 0;\n left: 0;\n margin: auto;\n position: absolute;\n right: 0;\n top: 0;\n z-index: var(--mobius-icon-stack-z-index, auto);\n}\n\n.svg-inline--mobius-icon.mobius-icon-stack-1x {\n height: 1em;\n width: 1.25em;\n}\n.svg-inline--mobius-icon.mobius-icon-stack-2x {\n height: 2em;\n width: 2.5em;\n}\n\n.mobius-icon-inverse {\n color: var(--mobius-icon-inverse, #fff);\n}\n\n.sr-only,\n.mobius-icon-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.sr-only-focusable:not(:focus),\n.mobius-icon-sr-only-focusable:not(:focus) {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.svg-inline--mobius-icon .mobius-icon-primary {\n fill: var(--mobius-icon-primary-color, currentColor);\n opacity: var(--mobius-icon-primary-opacity, 1);\n}\n\n.svg-inline--mobius-icon .mobius-icon-secondary {\n fill: var(--mobius-icon-secondary-color, currentColor);\n opacity: var(--mobius-icon-secondary-opacity, 0.4);\n}\n\n.svg-inline--mobius-icon.mobius-icon-swap-opacity .mobius-icon-primary {\n opacity: var(--mobius-icon-secondary-opacity, 0.4);\n}\n\n.svg-inline--mobius-icon.mobius-icon-swap-opacity .mobius-icon-secondary {\n opacity: var(--mobius-icon-primary-opacity, 1);\n}\n\n.svg-inline--mobius-icon mask .mobius-icon-primary,\n.svg-inline--mobius-icon mask .mobius-icon-secondary {\n fill: black;\n}\n\n.fad.mobius-icon-inverse,\n.mobius-icon-duotone.mobius-icon-inverse {\n color: var(--mobius-icon-inverse, #fff);\n}\n`;\n\nlet appliedStyles = false;\n\nexport function applyStyles() {\n if (appliedStyles) {\n return;\n }\n appliedStyles = true;\n\n const style = document.createElement(\"style\");\n style.setAttribute(\"data-id\", \"icon-style\");\n style.innerText = styleText;\n document.head.append(style);\n}\n"],"names":["applyStyles","styleText","appliedStyles","style","document","createElement","setAttribute","innerText","head","append"],"mappings":";;;;+BAyYgBA;;;eAAAA;;;AAzYhB,MAAMC,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqYnB,CAAC;AAED,IAAIC,gBAAgB;AAEb,SAASF;IACd,IAAIE,eAAe;QACjB;IACF;IACAA,gBAAgB;IAEhB,MAAMC,QAAQC,SAASC,aAAa,CAAC;IACrCF,MAAMG,YAAY,CAAC,WAAW;IAC9BH,MAAMI,SAAS,GAAGN;IAClBG,SAASI,IAAI,CAACC,MAAM,CAACN;AACvB"}