@kosdev-code/kos-ddk-styles 3.0.6 → 3.0.8
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.
- package/index.cjs +135 -44
- package/index.cjs.map +1 -1
- package/index.d.ts +1 -0
- package/index.d.ts.map +1 -1
- package/index.js +135 -44
- package/index.js.map +1 -1
- package/layout.d.ts +19 -0
- package/layout.d.ts.map +1 -0
- package/package.json +2 -2
- package/styles.d.ts.map +1 -1
- package/tokens/base/base-component.d.ts.map +1 -1
- package/tokens/base/base-generic.d.ts.map +1 -1
- package/tokens/base/base-semantic.d.ts.map +1 -1
- package/tokens/compact/compact-component.d.ts.map +1 -1
- package/tokens/flex-eu/flex-eu-component.d.ts.map +1 -1
package/index.d.ts
CHANGED
package/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/kos-ddk-styles/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/kos-ddk-styles/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
|
package/index.js
CHANGED
|
@@ -72,6 +72,50 @@ const fontStyles = css`
|
|
|
72
72
|
font-weight: 600;
|
|
73
73
|
}
|
|
74
74
|
`;
|
|
75
|
+
const layoutStyles = css`
|
|
76
|
+
body[data-orientation="landscape"] {
|
|
77
|
+
/* --- page width (the single knob Container/View consume) --- */
|
|
78
|
+
--ddk-component-shell-max-width: 1920px;
|
|
79
|
+
--ddk-component-page-max-width: 1820px;
|
|
80
|
+
/* kept for any consumer still reading the large-container token directly */
|
|
81
|
+
--ddk-component-container-max-width-large: 1820px;
|
|
82
|
+
|
|
83
|
+
/* --- dashboard structure: holder rows stack full-width, cards reflow --- */
|
|
84
|
+
--ddk-component-dashboard-card-flex-direction: var(--ddk-component-dashboard-card-flex-direction-horizontal);
|
|
85
|
+
--ddk-component-dashboard-card-flex-wrap: wrap;
|
|
86
|
+
--ddk-component-dashboard-overflow: visible;
|
|
87
|
+
|
|
88
|
+
/* grid: macros & assembly share the last row */
|
|
89
|
+
--ddk-component-dashboard-grid-template-areas: var(--ddk-component-dashboard-grid-template-areas-horizontal);
|
|
90
|
+
--ddk-component-dashboard-grid-template-columns: var(--ddk-component-dashboard-grid-template-columns-horizontal);
|
|
91
|
+
--ddk-component-dashboard-grid-template-rows: var(--ddk-component-dashboard-grid-template-rows-horizontal);
|
|
92
|
+
--ddk-component-dashboard-grid-template-areas-3col: var(--ddk-component-dashboard-grid-template-areas-3col-horizontal);
|
|
93
|
+
--ddk-component-dashboard-grid-template-columns-3col: var(--ddk-component-dashboard-grid-template-columns-3col-horizontal);
|
|
94
|
+
--ddk-component-dashboard-grid-template-rows-3col: var(--ddk-component-dashboard-grid-template-rows-3col-horizontal);
|
|
95
|
+
|
|
96
|
+
/* spacing */
|
|
97
|
+
--ddk-component-dashboard-row-gap: var(--ddk-component-dashboard-row-gap-horizontal);
|
|
98
|
+
--ddk-component-dashboard-column-gap: var(--ddk-component-dashboard-column-gap-horizontal);
|
|
99
|
+
|
|
100
|
+
/* --- card value defaults for landscape (themes/overlay may refine) --- */
|
|
101
|
+
--ddk-component-dashboard-card-height: var(--ddk-component-dashboard-card-height-horizontal);
|
|
102
|
+
--ddk-component-dashboard-card-small-height: var(--ddk-component-dashboard-card-small-height-horizontal);
|
|
103
|
+
--ddk-component-dashboard-card-large-width: var(--ddk-component-dashboard-card-large-width-horizontal);
|
|
104
|
+
--ddk-component-dashboard-card-small-width: var(--ddk-component-dashboard-card-small-width-horizontal);
|
|
105
|
+
--ddk-component-dashboard-card-min-width: var(--ddk-component-dashboard-card-min-width-horizontal);
|
|
106
|
+
--ddk-component-dashboard-card-max-height: var(--ddk-component-dashboard-card-max-height-horizontal);
|
|
107
|
+
--ddk-component-macro-card-height: var(--ddk-component-macro-card-height-horizontal);
|
|
108
|
+
|
|
109
|
+
/* modal */
|
|
110
|
+
--ddk-component-modal-max-width: 1000px;
|
|
111
|
+
--ddk-component-modal-max-height: 750px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* small cards (macros & assembly) take the shorter macro height */
|
|
115
|
+
body[data-orientation="landscape"] [data-card-size="small"] {
|
|
116
|
+
--ddk-component-dashboard-card-height: var(--ddk-component-macro-card-height-horizontal);
|
|
117
|
+
}
|
|
118
|
+
`;
|
|
75
119
|
const rootStyles = css`
|
|
76
120
|
::-webkit-scrollbar {
|
|
77
121
|
background-color: transparent;
|
|
@@ -333,6 +377,7 @@ const compactComponentStyles = css`
|
|
|
333
377
|
|
|
334
378
|
// modal-container
|
|
335
379
|
/* --ddk-component-modal-container-gap: 0px; */
|
|
380
|
+
--ddk-component-base-modal-container-gap: 0px;
|
|
336
381
|
|
|
337
382
|
// modal-content
|
|
338
383
|
--ddk-component-modal-content-justify-content: flex-start;
|
|
@@ -491,6 +536,22 @@ const compactComponentStyles = css`
|
|
|
491
536
|
// view
|
|
492
537
|
--ddk-component-view-padding: var(--ddk-generic-padding-large) var(--ddk-generic-padding-medium);
|
|
493
538
|
--ddk-component-view-gap: var(--ddk-generic-padding-large);
|
|
539
|
+
|
|
540
|
+
// quit-confirmation
|
|
541
|
+
--ddk-component-quit-confirmation-border-radius: 0;
|
|
542
|
+
--ddk-component-quit-confirmation-list-gap: 0;
|
|
543
|
+
--ddk-component-quit-confirmation-list-margin: 0;
|
|
544
|
+
--ddk-component-quit-confirmation-list-padding: 0;
|
|
545
|
+
|
|
546
|
+
// step-title
|
|
547
|
+
--ddk-component-step-title-font-family: Manrope;
|
|
548
|
+
--ddk-component-step-title-font-size: 16px;
|
|
549
|
+
--ddk-component-step-title-font-weight: 500;
|
|
550
|
+
--ddk-component-step-title-color: #101223;
|
|
551
|
+
--ddk-component-step-title-line-height: 150%;
|
|
552
|
+
|
|
553
|
+
// setup-step
|
|
554
|
+
--ddk-component-setup-sidebar-step-item-padding: 12px 16px;
|
|
494
555
|
}
|
|
495
556
|
`;
|
|
496
557
|
const compactSemanticStyles = css`
|
|
@@ -630,6 +691,15 @@ const baseComponentStyles = css`
|
|
|
630
691
|
--ddk-component-typography-heading-large-letter-spacing: 1.5%;
|
|
631
692
|
--ddk-component-typography-heading-large-line-height: 120%;
|
|
632
693
|
|
|
694
|
+
// typography-heading-x-large
|
|
695
|
+
--ddk-component-typography-heading-x-large-color: var(--ddk-generic-color-grey-100);
|
|
696
|
+
--ddk-component-typography-heading-x-large-font-family: var(--ddk-component-root-font-family-default);
|
|
697
|
+
--ddk-component-typography-heading-x-large-font-size: 48px;
|
|
698
|
+
--ddk-component-typography-heading-x-large-font-style: normal;
|
|
699
|
+
--ddk-component-typography-heading-x-large-font-weight: 600;
|
|
700
|
+
--ddk-component-typography-heading-x-large-letter-spacing: 0.72px;
|
|
701
|
+
--ddk-component-typography-heading-x-large-line-height: 120%;
|
|
702
|
+
|
|
633
703
|
// typography-label
|
|
634
704
|
--ddk-component-typography-label-color: var(--ddk-generic-color-grey-100);
|
|
635
705
|
--ddk-component-typography-label-font-family: var(--ddk-component-root-font-family-default);
|
|
@@ -833,11 +903,23 @@ const baseComponentStyles = css`
|
|
|
833
903
|
--ddk-component-input-enable-card-toggle-container-padding: 12px;
|
|
834
904
|
--ddk-component-input-enable-card-toggle-container-width: initial;
|
|
835
905
|
|
|
906
|
+
// input-step
|
|
907
|
+
--ddk-component-input-step-font-size: 28px;
|
|
908
|
+
--ddk-component-input-step-font-weight: 28px;
|
|
909
|
+
--ddk-component-input-step-button-width: 80px;
|
|
910
|
+
--ddk-component-input-step-button-height: 80px;
|
|
911
|
+
--ddk-component-input-step-button-border-radius: 400px;
|
|
912
|
+
|
|
836
913
|
// container
|
|
837
914
|
--ddk-component-container-max-width-large: 960px;
|
|
838
915
|
--ddk-component-container-max-width-medium: 640px;
|
|
839
916
|
--ddk-component-container-max-width-small: 408px;
|
|
840
917
|
|
|
918
|
+
// page width — single knob consumed by Container/View (decoupled from
|
|
919
|
+
// container-max-width-large so the orientation skeleton/overlay can widen
|
|
920
|
+
// pages without disturbing other consumers). Landscape widens it in layout.ts.
|
|
921
|
+
--ddk-component-page-max-width: var(--ddk-component-container-max-width-large);
|
|
922
|
+
|
|
841
923
|
// frame-container
|
|
842
924
|
--ddk-component-frame-body-padding: var(--ddk-semantic-control-padding-small);
|
|
843
925
|
--ddk-component-frame-container-background-color: var(--ddk-generic-color-grey-5);
|
|
@@ -951,6 +1033,11 @@ const baseComponentStyles = css`
|
|
|
951
1033
|
--ddk-component-info-container-font-weight: 600;
|
|
952
1034
|
--ddk-component-info-container-padding: 24px 32px;
|
|
953
1035
|
|
|
1036
|
+
// info-message
|
|
1037
|
+
--ddk-component-info-message-icon-width: 40px;
|
|
1038
|
+
--ddk-component-info-message-icon-height: 40px;
|
|
1039
|
+
--ddk-component-info-message-icon-padding: 4px;
|
|
1040
|
+
|
|
954
1041
|
// input-container
|
|
955
1042
|
--ddk-component-input-container-align-items: center;
|
|
956
1043
|
--ddk-component-input-container-flex-direction: column;
|
|
@@ -1083,6 +1170,7 @@ const baseComponentStyles = css`
|
|
|
1083
1170
|
|
|
1084
1171
|
// modal-container
|
|
1085
1172
|
--ddk-component-modal-container-gap: 32px;
|
|
1173
|
+
--ddk-component-base-modal-container-gap: 32px;
|
|
1086
1174
|
|
|
1087
1175
|
// modal-content
|
|
1088
1176
|
--ddk-component-modal-content-gap: var(--ddk-generic-padding-medium);
|
|
@@ -1423,7 +1511,20 @@ const baseComponentStyles = css`
|
|
|
1423
1511
|
--ddk-component-quit-confirmation-border-radius: var(--ddk-generic-border-radius-large);
|
|
1424
1512
|
--ddk-component-quit-confirmation-color: var(--ddk-generic-color-grey-50);
|
|
1425
1513
|
--ddk-component-quit-confirmation-font-size: var(--ddk-generic-font-size-large);
|
|
1514
|
+
--ddk-component-quit-confirmation-gap: var(--ddk-semantic-control-container-padding-x-large);
|
|
1426
1515
|
--ddk-component-quit-confirmation-padding: var(--ddk-semantic-control-container-padding-x-large);
|
|
1516
|
+
--ddk-component-quit-confirmation-list-gap: var(--ddk-semantic-control-container-padding-x-large);
|
|
1517
|
+
--ddk-component-quit-confirmation-list-margin: 0 auto;
|
|
1518
|
+
--ddk-component-quit-confirmation-list-padding: var(--ddk-semantic-control-container-padding-x-large);
|
|
1519
|
+
|
|
1520
|
+
--ddk-component-step-title-font-family: initial;
|
|
1521
|
+
--ddk-component-step-title-font-size: var(--ddk-component-sidebar-font-size-medium);
|
|
1522
|
+
--ddk-component-step-title-font-style: normal;
|
|
1523
|
+
--ddk-component-step-title-font-weight: var(--ddk-semantic-control-font-weight);
|
|
1524
|
+
--ddk-component-step-title-color: var(--ddk-generic-color-grey-100);
|
|
1525
|
+
--ddk-component-step-title-line-height: 135%;
|
|
1526
|
+
--ddk-component-step-title-letter-spacing: 0.44px;
|
|
1527
|
+
--ddk-component-step-title-white-space: nowrap;
|
|
1427
1528
|
|
|
1428
1529
|
// style-sub-nav-button ?
|
|
1429
1530
|
--ddk-style-sub-nav-button-color-active: var(--ddk-generic-color-grey-100);
|
|
@@ -1443,26 +1544,38 @@ const baseComponentStyles = css`
|
|
|
1443
1544
|
// dashboard layout mode flag (set to 'horizontal' to activate horizontal layout)
|
|
1444
1545
|
--ddk-component-dashboard-layout-mode: vertical;
|
|
1445
1546
|
|
|
1547
|
+
// dashboard - structural defaults (orientation skeleton refines these in layout.ts)
|
|
1548
|
+
--ddk-component-dashboard-card-flex-wrap: nowrap;
|
|
1549
|
+
--ddk-component-dashboard-overflow: visible;
|
|
1550
|
+
|
|
1446
1551
|
// dashboard-card
|
|
1447
1552
|
--ddk-component-dashboard-card-background-color-unassigned: var(--ddk-generic-color-grey-10);
|
|
1553
|
+
--ddk-component-dashboard-card-background-color-removed: var(--ddk-generic-color-grey-10);
|
|
1554
|
+
--ddk-component-dashboard-card-background-color-disabled: var(--ddk-generic-color-grey-50);
|
|
1448
1555
|
--ddk-component-dashboard-card-flex-direction: column;
|
|
1556
|
+
--ddk-component-dashboard-card-header-background-color: var(--ddk-generic-color-grey-20);
|
|
1557
|
+
--ddk-component-dashboard-card-header-background-color-removed: var(--ddk-generic-color-grey-20);
|
|
1449
1558
|
--ddk-component-dashboard-card-height: 115px; // validated
|
|
1450
1559
|
--ddk-component-dashboard-card-small-height: 115px; // validated
|
|
1451
1560
|
--ddk-component-dashboard-card-large-width: 316px; // validated
|
|
1452
1561
|
--ddk-component-dashboard-card-small-width: 216px; // validated
|
|
1453
1562
|
--ddk-component-dashboard-card-max-height: 92px; // validated
|
|
1454
1563
|
|
|
1455
|
-
// dashboard-card - horizontal layout overrides (cards
|
|
1564
|
+
// dashboard-card - horizontal layout overrides (cards reflow into a wrapping grid)
|
|
1565
|
+
// Heights sized for actual content (title + small fuel gauge + footer/troubles);
|
|
1566
|
+
// the old 284px was tuned for a single horizontal-scroll row. ~1.5x the 115px
|
|
1567
|
+
// portrait height gives the wider landscape card visual balance without empty
|
|
1568
|
+
// space. Tune per device via theme :root or the device theme-overlay.css.
|
|
1456
1569
|
--ddk-component-dashboard-card-flex-direction-horizontal: row;
|
|
1457
|
-
--ddk-component-dashboard-card-height-horizontal:
|
|
1458
|
-
--ddk-component-dashboard-card-small-height-horizontal:
|
|
1570
|
+
--ddk-component-dashboard-card-height-horizontal: 176px;
|
|
1571
|
+
--ddk-component-dashboard-card-small-height-horizontal: 176px;
|
|
1459
1572
|
--ddk-component-dashboard-card-large-width-horizontal: 217px;
|
|
1460
1573
|
--ddk-component-dashboard-card-small-width-horizontal: 217px;
|
|
1461
1574
|
--ddk-component-dashboard-card-min-width-horizontal: 217px;
|
|
1462
1575
|
--ddk-component-dashboard-card-max-height-horizontal: none;
|
|
1463
1576
|
|
|
1464
1577
|
// macro-card - horizontal layout overrides (different height than holder cards)
|
|
1465
|
-
--ddk-component-macro-card-height-horizontal:
|
|
1578
|
+
--ddk-component-macro-card-height-horizontal: 148px;
|
|
1466
1579
|
|
|
1467
1580
|
// dashboard - horizontal layout overrides (macros and assembly on same row)
|
|
1468
1581
|
--ddk-component-dashboard-grid-template-areas-horizontal: "holder1 holder1" "holder2 holder2" "macros assembly";
|
|
@@ -1571,48 +1684,21 @@ const baseComponentStyles = css`
|
|
|
1571
1684
|
--ddk-component-utility-modal-heading-font-size: var(--ddk-generic-font-size-large);
|
|
1572
1685
|
--ddk-component-utility-modal-heading-font-weight: var(--ddk-generic-font-weight-medium);
|
|
1573
1686
|
--ddk-component-utility-modal-heading-letter-spacing: -0.48px;
|
|
1574
|
-
}
|
|
1575
|
-
|
|
1576
|
-
/* Horizontal dashboard layout mode overrides */
|
|
1577
|
-
[data-dashboard-layout="horizontal"] {
|
|
1578
|
-
--ddk-component-shell-max-width: 1920px;
|
|
1579
|
-
--ddk-component-container-max-width-large: 1820px;
|
|
1580
|
-
|
|
1581
|
-
/* Override 2-column layout */
|
|
1582
|
-
--ddk-component-dashboard-grid-template-areas: var(--ddk-component-dashboard-grid-template-areas-horizontal);
|
|
1583
|
-
--ddk-component-dashboard-grid-template-columns: var(--ddk-component-dashboard-grid-template-columns-horizontal);
|
|
1584
|
-
--ddk-component-dashboard-grid-template-rows: var(--ddk-component-dashboard-grid-template-rows-horizontal);
|
|
1585
|
-
|
|
1586
|
-
/* Override 3-column layout */
|
|
1587
|
-
--ddk-component-dashboard-grid-template-areas-3col: var(--ddk-component-dashboard-grid-template-areas-3col-horizontal);
|
|
1588
|
-
--ddk-component-dashboard-grid-template-columns-3col: var(--ddk-component-dashboard-grid-template-columns-3col-horizontal);
|
|
1589
|
-
--ddk-component-dashboard-grid-template-rows-3col: var(--ddk-component-dashboard-grid-template-rows-3col-horizontal);
|
|
1590
|
-
|
|
1591
|
-
/* Override spacing */
|
|
1592
|
-
--ddk-component-dashboard-row-gap: var(--ddk-component-dashboard-row-gap-horizontal);
|
|
1593
|
-
--ddk-component-dashboard-column-gap: var(--ddk-component-dashboard-column-gap-horizontal);
|
|
1594
1687
|
|
|
1595
|
-
|
|
1596
|
-
--ddk-component-
|
|
1597
|
-
--ddk-component-dashboard-card-height: var(--ddk-component-dashboard-card-height-horizontal);
|
|
1598
|
-
--ddk-component-dashboard-card-small-height: var(--ddk-component-dashboard-card-small-height-horizontal);
|
|
1599
|
-
--ddk-component-dashboard-card-large-width: var(--ddk-component-dashboard-card-large-width-horizontal);
|
|
1600
|
-
--ddk-component-dashboard-card-small-width: var(--ddk-component-dashboard-card-small-width-horizontal);
|
|
1601
|
-
--ddk-component-dashboard-card-min-width: var(--ddk-component-dashboard-card-min-width-horizontal);
|
|
1602
|
-
--ddk-component-dashboard-card-max-height: var(--ddk-component-dashboard-card-max-height-horizontal);
|
|
1688
|
+
// workflow-modal
|
|
1689
|
+
--ddk-component-workflow-modal-min-height: 502px;
|
|
1603
1690
|
|
|
1604
|
-
|
|
1605
|
-
--ddk-component-
|
|
1606
|
-
|
|
1607
|
-
/* Modal dimensions in horizontal mode */
|
|
1608
|
-
--ddk-component-modal-max-width: 1000px;
|
|
1609
|
-
--ddk-component-modal-max-height: 750px;
|
|
1691
|
+
// setup-step
|
|
1692
|
+
--ddk-component-setup-sidebar-step-item-padding: 0px;
|
|
1610
1693
|
}
|
|
1611
1694
|
|
|
1612
|
-
/*
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1695
|
+
/*
|
|
1696
|
+
* Landscape orientation overrides have moved to the always-on structural
|
|
1697
|
+
* skeleton in ./layout.ts (selector body[data-orientation="landscape"]), so
|
|
1698
|
+
* they win over any theme :root by specificity instead of being clobbered.
|
|
1699
|
+
* The *-horizontal value tokens above remain here as the values that skeleton
|
|
1700
|
+
* reads.
|
|
1701
|
+
*/
|
|
1616
1702
|
`;
|
|
1617
1703
|
const baseGenericStyles = css`
|
|
1618
1704
|
:root {
|
|
@@ -1667,6 +1753,7 @@ const baseGenericStyles = css`
|
|
|
1667
1753
|
--ddk-generic-color-grey-90-05: #1012230d;
|
|
1668
1754
|
--ddk-generic-color-grey-100: #171717;
|
|
1669
1755
|
--ddk-generic-color-grey-100-50: #17171780;
|
|
1756
|
+
--ddk-generic-color-orange-50: #fff3dd;
|
|
1670
1757
|
--ddk-generic-color-orange-100: #ff9e32;
|
|
1671
1758
|
--ddk-generic-color-orange-200: #c87321;
|
|
1672
1759
|
--ddk-generic-color-red-5: #ffe1e2;
|
|
@@ -1718,6 +1805,7 @@ const baseSemanticStyles = css`
|
|
|
1718
1805
|
--ddk-semantic-color-system-blue: var(--ddk-generic-color-blue-80);
|
|
1719
1806
|
--ddk-semantic-color-system-green: var(--ddk-generic-color-green-100);
|
|
1720
1807
|
--ddk-semantic-color-system-orange: var(--ddk-generic-color-orange-100);
|
|
1808
|
+
--ddk-semantic-color-system-orange-light: var(--ddk-generic-color-orange-50);
|
|
1721
1809
|
--ddk-semantic-color-system-red: var(--ddk-generic-color-red-100);
|
|
1722
1810
|
--ddk-semantic-color-system-grey-60: var(--ddk-generic-color-grey-60);
|
|
1723
1811
|
|
|
@@ -1965,7 +2053,6 @@ const flexEUComponentStyles = css`
|
|
|
1965
2053
|
// dashboard card
|
|
1966
2054
|
--ddk-component-dashboard-card-color-unassigned: var(--ddk-generic-color-grey-50);
|
|
1967
2055
|
--ddk-component-dashboard-card-color: var(--ddk-generic-color-grey-90);
|
|
1968
|
-
--ddk-component-dashboard-card-header-background-color: var(--ddk-generic-color-grey-20);
|
|
1969
2056
|
--ddk-component-dashboard-card-height: 92px; // validated
|
|
1970
2057
|
--ddk-component-dashboard-card-small-height: 92px; // validated
|
|
1971
2058
|
--ddk-component-dashboard-card-large-width: 260px; // validated
|
|
@@ -2049,6 +2136,7 @@ const getStyles = (temporaryThemeID) => temporaryThemeID === "flex-eu" ? [
|
|
|
2049
2136
|
baseGenericStyles,
|
|
2050
2137
|
baseComponentStyles,
|
|
2051
2138
|
baseSemanticStyles,
|
|
2139
|
+
layoutStyles,
|
|
2052
2140
|
flexEUComponentStyles,
|
|
2053
2141
|
flexEUSemanticStyles
|
|
2054
2142
|
] : temporaryThemeID === "compact" ? [
|
|
@@ -2057,6 +2145,7 @@ const getStyles = (temporaryThemeID) => temporaryThemeID === "flex-eu" ? [
|
|
|
2057
2145
|
baseGenericStyles,
|
|
2058
2146
|
baseComponentStyles,
|
|
2059
2147
|
baseSemanticStyles,
|
|
2148
|
+
layoutStyles,
|
|
2060
2149
|
flexEUComponentStyles,
|
|
2061
2150
|
flexEUSemanticStyles,
|
|
2062
2151
|
compactComponentStyles,
|
|
@@ -2066,7 +2155,8 @@ const getStyles = (temporaryThemeID) => temporaryThemeID === "flex-eu" ? [
|
|
|
2066
2155
|
rootStyles,
|
|
2067
2156
|
baseGenericStyles,
|
|
2068
2157
|
baseComponentStyles,
|
|
2069
|
-
baseSemanticStyles
|
|
2158
|
+
baseSemanticStyles,
|
|
2159
|
+
layoutStyles
|
|
2070
2160
|
];
|
|
2071
2161
|
const SvgAlertFilled = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M12.0009 7.23564C11.6963 7.23613 11.4496 7.48285 11.4491 7.78735V15.1544C11.4491 15.4591 11.6961 15.7061 12.0009 15.7061C12.3056 15.7061 12.5526 15.4591 12.5526 15.1544V7.78735C12.5521 7.48285 12.3054 7.23613 12.0009 7.23564Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.07318 20.7783L11.5263 2.67477C11.6239 2.50482 11.8049 2.40002 12.0009 2.40002C12.1969 2.40002 12.3779 2.50482 12.4755 2.67477L22.9268 20.7783C23.0245 20.9478 23.0244 21.1566 22.9265 21.326C22.8287 21.4955 22.6479 21.5999 22.4522 21.6H1.54779C1.35211 21.5999 1.17134 21.4955 1.07348 21.326C0.975613 21.1566 0.975501 20.9478 1.07318 20.7783ZM12.0009 16.4238C11.3001 16.4228 10.7323 15.855 10.7313 15.1544V7.78735C10.7313 7.08629 11.2997 6.51796 12.0009 6.51796C12.702 6.51796 13.2704 7.08629 13.2704 7.78735V15.1544C13.2694 15.855 12.7016 16.4228 12.0009 16.4238ZM12.0009 19.6291C11.9067 19.6289 11.8129 19.6184 11.721 19.5977C11.3898 19.5246 11.1014 19.3227 10.9194 19.0365C10.7374 18.7503 10.6769 18.4035 10.7511 18.0726C10.7943 17.8791 10.9861 17.7572 11.1795 17.8004C11.373 17.8435 11.495 18.0352 11.4518 18.2287C11.3849 18.5305 11.5753 18.8293 11.877 18.8963C12.1788 18.9634 12.4778 18.7732 12.5449 18.4715C12.612 18.1698 12.4219 17.8708 12.1202 17.8035C12.054 17.7883 11.9856 17.7856 11.9184 17.7954C11.7889 17.8197 11.6565 17.7712 11.5735 17.6689C11.4904 17.5666 11.4701 17.427 11.5206 17.3053C11.5711 17.1836 11.6841 17.0994 11.8152 17.0858C12.2862 17.0219 12.7537 17.2248 13.0288 17.6124C13.3039 18.0001 13.341 18.5083 13.1252 18.9318C12.9093 19.3552 12.4762 19.6239 12.0009 19.6291Z", fill: "currentColor" }));
|
|
2072
2162
|
const SvgCloseSidebar = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_1054_40209)" }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 12C0 5.36842 5.36842 0 12 0C18.6316 0 24 5.36842 24 12C24 18.6316 18.6316 24 12 24C5.36842 24 0 18.6316 0 12ZM1.38947 12C1.38947 17.8737 6.12632 22.6105 12 22.6105C17.8737 22.6105 22.6105 17.8737 22.6105 12C22.6105 6.12632 17.8737 1.38947 12 1.38947C6.12632 1.38947 1.38947 6.12632 1.38947 12ZM14.9684 7.38947L10.3579 12L14.9684 16.6105C15.2211 16.8632 15.2211 17.2737 14.9684 17.5263C14.7158 17.8105 14.2737 17.8105 14.0211 17.5579L9.41053 12.9474L8.46316 12L9.41053 11.0526L14.0211 6.44211C14.3053 6.18947 14.7158 6.18947 14.9684 6.44211C15.2211 6.69474 15.2211 7.13684 14.9684 7.38947Z", fill: "currentColor" })), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_1054_40209" }, /* @__PURE__ */ React.createElement("rect", { width: 24, height: 24, fill: "white" }))));
|
|
@@ -2344,6 +2434,7 @@ export {
|
|
|
2344
2434
|
getRgb,
|
|
2345
2435
|
getStyles,
|
|
2346
2436
|
hsvToRgb,
|
|
2437
|
+
layoutStyles,
|
|
2347
2438
|
padHex,
|
|
2348
2439
|
rgbToHex,
|
|
2349
2440
|
seedRandom,
|