@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.cjs
CHANGED
|
@@ -91,6 +91,50 @@ const fontStyles = react.css`
|
|
|
91
91
|
font-weight: 600;
|
|
92
92
|
}
|
|
93
93
|
`;
|
|
94
|
+
const layoutStyles = react.css`
|
|
95
|
+
body[data-orientation="landscape"] {
|
|
96
|
+
/* --- page width (the single knob Container/View consume) --- */
|
|
97
|
+
--ddk-component-shell-max-width: 1920px;
|
|
98
|
+
--ddk-component-page-max-width: 1820px;
|
|
99
|
+
/* kept for any consumer still reading the large-container token directly */
|
|
100
|
+
--ddk-component-container-max-width-large: 1820px;
|
|
101
|
+
|
|
102
|
+
/* --- dashboard structure: holder rows stack full-width, cards reflow --- */
|
|
103
|
+
--ddk-component-dashboard-card-flex-direction: var(--ddk-component-dashboard-card-flex-direction-horizontal);
|
|
104
|
+
--ddk-component-dashboard-card-flex-wrap: wrap;
|
|
105
|
+
--ddk-component-dashboard-overflow: visible;
|
|
106
|
+
|
|
107
|
+
/* grid: macros & assembly share the last row */
|
|
108
|
+
--ddk-component-dashboard-grid-template-areas: var(--ddk-component-dashboard-grid-template-areas-horizontal);
|
|
109
|
+
--ddk-component-dashboard-grid-template-columns: var(--ddk-component-dashboard-grid-template-columns-horizontal);
|
|
110
|
+
--ddk-component-dashboard-grid-template-rows: var(--ddk-component-dashboard-grid-template-rows-horizontal);
|
|
111
|
+
--ddk-component-dashboard-grid-template-areas-3col: var(--ddk-component-dashboard-grid-template-areas-3col-horizontal);
|
|
112
|
+
--ddk-component-dashboard-grid-template-columns-3col: var(--ddk-component-dashboard-grid-template-columns-3col-horizontal);
|
|
113
|
+
--ddk-component-dashboard-grid-template-rows-3col: var(--ddk-component-dashboard-grid-template-rows-3col-horizontal);
|
|
114
|
+
|
|
115
|
+
/* spacing */
|
|
116
|
+
--ddk-component-dashboard-row-gap: var(--ddk-component-dashboard-row-gap-horizontal);
|
|
117
|
+
--ddk-component-dashboard-column-gap: var(--ddk-component-dashboard-column-gap-horizontal);
|
|
118
|
+
|
|
119
|
+
/* --- card value defaults for landscape (themes/overlay may refine) --- */
|
|
120
|
+
--ddk-component-dashboard-card-height: var(--ddk-component-dashboard-card-height-horizontal);
|
|
121
|
+
--ddk-component-dashboard-card-small-height: var(--ddk-component-dashboard-card-small-height-horizontal);
|
|
122
|
+
--ddk-component-dashboard-card-large-width: var(--ddk-component-dashboard-card-large-width-horizontal);
|
|
123
|
+
--ddk-component-dashboard-card-small-width: var(--ddk-component-dashboard-card-small-width-horizontal);
|
|
124
|
+
--ddk-component-dashboard-card-min-width: var(--ddk-component-dashboard-card-min-width-horizontal);
|
|
125
|
+
--ddk-component-dashboard-card-max-height: var(--ddk-component-dashboard-card-max-height-horizontal);
|
|
126
|
+
--ddk-component-macro-card-height: var(--ddk-component-macro-card-height-horizontal);
|
|
127
|
+
|
|
128
|
+
/* modal */
|
|
129
|
+
--ddk-component-modal-max-width: 1000px;
|
|
130
|
+
--ddk-component-modal-max-height: 750px;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* small cards (macros & assembly) take the shorter macro height */
|
|
134
|
+
body[data-orientation="landscape"] [data-card-size="small"] {
|
|
135
|
+
--ddk-component-dashboard-card-height: var(--ddk-component-macro-card-height-horizontal);
|
|
136
|
+
}
|
|
137
|
+
`;
|
|
94
138
|
const rootStyles = react.css`
|
|
95
139
|
::-webkit-scrollbar {
|
|
96
140
|
background-color: transparent;
|
|
@@ -352,6 +396,7 @@ const compactComponentStyles = react.css`
|
|
|
352
396
|
|
|
353
397
|
// modal-container
|
|
354
398
|
/* --ddk-component-modal-container-gap: 0px; */
|
|
399
|
+
--ddk-component-base-modal-container-gap: 0px;
|
|
355
400
|
|
|
356
401
|
// modal-content
|
|
357
402
|
--ddk-component-modal-content-justify-content: flex-start;
|
|
@@ -510,6 +555,22 @@ const compactComponentStyles = react.css`
|
|
|
510
555
|
// view
|
|
511
556
|
--ddk-component-view-padding: var(--ddk-generic-padding-large) var(--ddk-generic-padding-medium);
|
|
512
557
|
--ddk-component-view-gap: var(--ddk-generic-padding-large);
|
|
558
|
+
|
|
559
|
+
// quit-confirmation
|
|
560
|
+
--ddk-component-quit-confirmation-border-radius: 0;
|
|
561
|
+
--ddk-component-quit-confirmation-list-gap: 0;
|
|
562
|
+
--ddk-component-quit-confirmation-list-margin: 0;
|
|
563
|
+
--ddk-component-quit-confirmation-list-padding: 0;
|
|
564
|
+
|
|
565
|
+
// step-title
|
|
566
|
+
--ddk-component-step-title-font-family: Manrope;
|
|
567
|
+
--ddk-component-step-title-font-size: 16px;
|
|
568
|
+
--ddk-component-step-title-font-weight: 500;
|
|
569
|
+
--ddk-component-step-title-color: #101223;
|
|
570
|
+
--ddk-component-step-title-line-height: 150%;
|
|
571
|
+
|
|
572
|
+
// setup-step
|
|
573
|
+
--ddk-component-setup-sidebar-step-item-padding: 12px 16px;
|
|
513
574
|
}
|
|
514
575
|
`;
|
|
515
576
|
const compactSemanticStyles = react.css`
|
|
@@ -649,6 +710,15 @@ const baseComponentStyles = react.css`
|
|
|
649
710
|
--ddk-component-typography-heading-large-letter-spacing: 1.5%;
|
|
650
711
|
--ddk-component-typography-heading-large-line-height: 120%;
|
|
651
712
|
|
|
713
|
+
// typography-heading-x-large
|
|
714
|
+
--ddk-component-typography-heading-x-large-color: var(--ddk-generic-color-grey-100);
|
|
715
|
+
--ddk-component-typography-heading-x-large-font-family: var(--ddk-component-root-font-family-default);
|
|
716
|
+
--ddk-component-typography-heading-x-large-font-size: 48px;
|
|
717
|
+
--ddk-component-typography-heading-x-large-font-style: normal;
|
|
718
|
+
--ddk-component-typography-heading-x-large-font-weight: 600;
|
|
719
|
+
--ddk-component-typography-heading-x-large-letter-spacing: 0.72px;
|
|
720
|
+
--ddk-component-typography-heading-x-large-line-height: 120%;
|
|
721
|
+
|
|
652
722
|
// typography-label
|
|
653
723
|
--ddk-component-typography-label-color: var(--ddk-generic-color-grey-100);
|
|
654
724
|
--ddk-component-typography-label-font-family: var(--ddk-component-root-font-family-default);
|
|
@@ -852,11 +922,23 @@ const baseComponentStyles = react.css`
|
|
|
852
922
|
--ddk-component-input-enable-card-toggle-container-padding: 12px;
|
|
853
923
|
--ddk-component-input-enable-card-toggle-container-width: initial;
|
|
854
924
|
|
|
925
|
+
// input-step
|
|
926
|
+
--ddk-component-input-step-font-size: 28px;
|
|
927
|
+
--ddk-component-input-step-font-weight: 28px;
|
|
928
|
+
--ddk-component-input-step-button-width: 80px;
|
|
929
|
+
--ddk-component-input-step-button-height: 80px;
|
|
930
|
+
--ddk-component-input-step-button-border-radius: 400px;
|
|
931
|
+
|
|
855
932
|
// container
|
|
856
933
|
--ddk-component-container-max-width-large: 960px;
|
|
857
934
|
--ddk-component-container-max-width-medium: 640px;
|
|
858
935
|
--ddk-component-container-max-width-small: 408px;
|
|
859
936
|
|
|
937
|
+
// page width — single knob consumed by Container/View (decoupled from
|
|
938
|
+
// container-max-width-large so the orientation skeleton/overlay can widen
|
|
939
|
+
// pages without disturbing other consumers). Landscape widens it in layout.ts.
|
|
940
|
+
--ddk-component-page-max-width: var(--ddk-component-container-max-width-large);
|
|
941
|
+
|
|
860
942
|
// frame-container
|
|
861
943
|
--ddk-component-frame-body-padding: var(--ddk-semantic-control-padding-small);
|
|
862
944
|
--ddk-component-frame-container-background-color: var(--ddk-generic-color-grey-5);
|
|
@@ -970,6 +1052,11 @@ const baseComponentStyles = react.css`
|
|
|
970
1052
|
--ddk-component-info-container-font-weight: 600;
|
|
971
1053
|
--ddk-component-info-container-padding: 24px 32px;
|
|
972
1054
|
|
|
1055
|
+
// info-message
|
|
1056
|
+
--ddk-component-info-message-icon-width: 40px;
|
|
1057
|
+
--ddk-component-info-message-icon-height: 40px;
|
|
1058
|
+
--ddk-component-info-message-icon-padding: 4px;
|
|
1059
|
+
|
|
973
1060
|
// input-container
|
|
974
1061
|
--ddk-component-input-container-align-items: center;
|
|
975
1062
|
--ddk-component-input-container-flex-direction: column;
|
|
@@ -1102,6 +1189,7 @@ const baseComponentStyles = react.css`
|
|
|
1102
1189
|
|
|
1103
1190
|
// modal-container
|
|
1104
1191
|
--ddk-component-modal-container-gap: 32px;
|
|
1192
|
+
--ddk-component-base-modal-container-gap: 32px;
|
|
1105
1193
|
|
|
1106
1194
|
// modal-content
|
|
1107
1195
|
--ddk-component-modal-content-gap: var(--ddk-generic-padding-medium);
|
|
@@ -1442,7 +1530,20 @@ const baseComponentStyles = react.css`
|
|
|
1442
1530
|
--ddk-component-quit-confirmation-border-radius: var(--ddk-generic-border-radius-large);
|
|
1443
1531
|
--ddk-component-quit-confirmation-color: var(--ddk-generic-color-grey-50);
|
|
1444
1532
|
--ddk-component-quit-confirmation-font-size: var(--ddk-generic-font-size-large);
|
|
1533
|
+
--ddk-component-quit-confirmation-gap: var(--ddk-semantic-control-container-padding-x-large);
|
|
1445
1534
|
--ddk-component-quit-confirmation-padding: var(--ddk-semantic-control-container-padding-x-large);
|
|
1535
|
+
--ddk-component-quit-confirmation-list-gap: var(--ddk-semantic-control-container-padding-x-large);
|
|
1536
|
+
--ddk-component-quit-confirmation-list-margin: 0 auto;
|
|
1537
|
+
--ddk-component-quit-confirmation-list-padding: var(--ddk-semantic-control-container-padding-x-large);
|
|
1538
|
+
|
|
1539
|
+
--ddk-component-step-title-font-family: initial;
|
|
1540
|
+
--ddk-component-step-title-font-size: var(--ddk-component-sidebar-font-size-medium);
|
|
1541
|
+
--ddk-component-step-title-font-style: normal;
|
|
1542
|
+
--ddk-component-step-title-font-weight: var(--ddk-semantic-control-font-weight);
|
|
1543
|
+
--ddk-component-step-title-color: var(--ddk-generic-color-grey-100);
|
|
1544
|
+
--ddk-component-step-title-line-height: 135%;
|
|
1545
|
+
--ddk-component-step-title-letter-spacing: 0.44px;
|
|
1546
|
+
--ddk-component-step-title-white-space: nowrap;
|
|
1446
1547
|
|
|
1447
1548
|
// style-sub-nav-button ?
|
|
1448
1549
|
--ddk-style-sub-nav-button-color-active: var(--ddk-generic-color-grey-100);
|
|
@@ -1462,26 +1563,38 @@ const baseComponentStyles = react.css`
|
|
|
1462
1563
|
// dashboard layout mode flag (set to 'horizontal' to activate horizontal layout)
|
|
1463
1564
|
--ddk-component-dashboard-layout-mode: vertical;
|
|
1464
1565
|
|
|
1566
|
+
// dashboard - structural defaults (orientation skeleton refines these in layout.ts)
|
|
1567
|
+
--ddk-component-dashboard-card-flex-wrap: nowrap;
|
|
1568
|
+
--ddk-component-dashboard-overflow: visible;
|
|
1569
|
+
|
|
1465
1570
|
// dashboard-card
|
|
1466
1571
|
--ddk-component-dashboard-card-background-color-unassigned: var(--ddk-generic-color-grey-10);
|
|
1572
|
+
--ddk-component-dashboard-card-background-color-removed: var(--ddk-generic-color-grey-10);
|
|
1573
|
+
--ddk-component-dashboard-card-background-color-disabled: var(--ddk-generic-color-grey-50);
|
|
1467
1574
|
--ddk-component-dashboard-card-flex-direction: column;
|
|
1575
|
+
--ddk-component-dashboard-card-header-background-color: var(--ddk-generic-color-grey-20);
|
|
1576
|
+
--ddk-component-dashboard-card-header-background-color-removed: var(--ddk-generic-color-grey-20);
|
|
1468
1577
|
--ddk-component-dashboard-card-height: 115px; // validated
|
|
1469
1578
|
--ddk-component-dashboard-card-small-height: 115px; // validated
|
|
1470
1579
|
--ddk-component-dashboard-card-large-width: 316px; // validated
|
|
1471
1580
|
--ddk-component-dashboard-card-small-width: 216px; // validated
|
|
1472
1581
|
--ddk-component-dashboard-card-max-height: 92px; // validated
|
|
1473
1582
|
|
|
1474
|
-
// dashboard-card - horizontal layout overrides (cards
|
|
1583
|
+
// dashboard-card - horizontal layout overrides (cards reflow into a wrapping grid)
|
|
1584
|
+
// Heights sized for actual content (title + small fuel gauge + footer/troubles);
|
|
1585
|
+
// the old 284px was tuned for a single horizontal-scroll row. ~1.5x the 115px
|
|
1586
|
+
// portrait height gives the wider landscape card visual balance without empty
|
|
1587
|
+
// space. Tune per device via theme :root or the device theme-overlay.css.
|
|
1475
1588
|
--ddk-component-dashboard-card-flex-direction-horizontal: row;
|
|
1476
|
-
--ddk-component-dashboard-card-height-horizontal:
|
|
1477
|
-
--ddk-component-dashboard-card-small-height-horizontal:
|
|
1589
|
+
--ddk-component-dashboard-card-height-horizontal: 176px;
|
|
1590
|
+
--ddk-component-dashboard-card-small-height-horizontal: 176px;
|
|
1478
1591
|
--ddk-component-dashboard-card-large-width-horizontal: 217px;
|
|
1479
1592
|
--ddk-component-dashboard-card-small-width-horizontal: 217px;
|
|
1480
1593
|
--ddk-component-dashboard-card-min-width-horizontal: 217px;
|
|
1481
1594
|
--ddk-component-dashboard-card-max-height-horizontal: none;
|
|
1482
1595
|
|
|
1483
1596
|
// macro-card - horizontal layout overrides (different height than holder cards)
|
|
1484
|
-
--ddk-component-macro-card-height-horizontal:
|
|
1597
|
+
--ddk-component-macro-card-height-horizontal: 148px;
|
|
1485
1598
|
|
|
1486
1599
|
// dashboard - horizontal layout overrides (macros and assembly on same row)
|
|
1487
1600
|
--ddk-component-dashboard-grid-template-areas-horizontal: "holder1 holder1" "holder2 holder2" "macros assembly";
|
|
@@ -1590,48 +1703,21 @@ const baseComponentStyles = react.css`
|
|
|
1590
1703
|
--ddk-component-utility-modal-heading-font-size: var(--ddk-generic-font-size-large);
|
|
1591
1704
|
--ddk-component-utility-modal-heading-font-weight: var(--ddk-generic-font-weight-medium);
|
|
1592
1705
|
--ddk-component-utility-modal-heading-letter-spacing: -0.48px;
|
|
1593
|
-
}
|
|
1594
|
-
|
|
1595
|
-
/* Horizontal dashboard layout mode overrides */
|
|
1596
|
-
[data-dashboard-layout="horizontal"] {
|
|
1597
|
-
--ddk-component-shell-max-width: 1920px;
|
|
1598
|
-
--ddk-component-container-max-width-large: 1820px;
|
|
1599
|
-
|
|
1600
|
-
/* Override 2-column layout */
|
|
1601
|
-
--ddk-component-dashboard-grid-template-areas: var(--ddk-component-dashboard-grid-template-areas-horizontal);
|
|
1602
|
-
--ddk-component-dashboard-grid-template-columns: var(--ddk-component-dashboard-grid-template-columns-horizontal);
|
|
1603
|
-
--ddk-component-dashboard-grid-template-rows: var(--ddk-component-dashboard-grid-template-rows-horizontal);
|
|
1604
|
-
|
|
1605
|
-
/* Override 3-column layout */
|
|
1606
|
-
--ddk-component-dashboard-grid-template-areas-3col: var(--ddk-component-dashboard-grid-template-areas-3col-horizontal);
|
|
1607
|
-
--ddk-component-dashboard-grid-template-columns-3col: var(--ddk-component-dashboard-grid-template-columns-3col-horizontal);
|
|
1608
|
-
--ddk-component-dashboard-grid-template-rows-3col: var(--ddk-component-dashboard-grid-template-rows-3col-horizontal);
|
|
1609
|
-
|
|
1610
|
-
/* Override spacing */
|
|
1611
|
-
--ddk-component-dashboard-row-gap: var(--ddk-component-dashboard-row-gap-horizontal);
|
|
1612
|
-
--ddk-component-dashboard-column-gap: var(--ddk-component-dashboard-column-gap-horizontal);
|
|
1613
1706
|
|
|
1614
|
-
|
|
1615
|
-
--ddk-component-
|
|
1616
|
-
--ddk-component-dashboard-card-height: var(--ddk-component-dashboard-card-height-horizontal);
|
|
1617
|
-
--ddk-component-dashboard-card-small-height: var(--ddk-component-dashboard-card-small-height-horizontal);
|
|
1618
|
-
--ddk-component-dashboard-card-large-width: var(--ddk-component-dashboard-card-large-width-horizontal);
|
|
1619
|
-
--ddk-component-dashboard-card-small-width: var(--ddk-component-dashboard-card-small-width-horizontal);
|
|
1620
|
-
--ddk-component-dashboard-card-min-width: var(--ddk-component-dashboard-card-min-width-horizontal);
|
|
1621
|
-
--ddk-component-dashboard-card-max-height: var(--ddk-component-dashboard-card-max-height-horizontal);
|
|
1707
|
+
// workflow-modal
|
|
1708
|
+
--ddk-component-workflow-modal-min-height: 502px;
|
|
1622
1709
|
|
|
1623
|
-
|
|
1624
|
-
--ddk-component-
|
|
1625
|
-
|
|
1626
|
-
/* Modal dimensions in horizontal mode */
|
|
1627
|
-
--ddk-component-modal-max-width: 1000px;
|
|
1628
|
-
--ddk-component-modal-max-height: 750px;
|
|
1710
|
+
// setup-step
|
|
1711
|
+
--ddk-component-setup-sidebar-step-item-padding: 0px;
|
|
1629
1712
|
}
|
|
1630
1713
|
|
|
1631
|
-
/*
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
1714
|
+
/*
|
|
1715
|
+
* Landscape orientation overrides have moved to the always-on structural
|
|
1716
|
+
* skeleton in ./layout.ts (selector body[data-orientation="landscape"]), so
|
|
1717
|
+
* they win over any theme :root by specificity instead of being clobbered.
|
|
1718
|
+
* The *-horizontal value tokens above remain here as the values that skeleton
|
|
1719
|
+
* reads.
|
|
1720
|
+
*/
|
|
1635
1721
|
`;
|
|
1636
1722
|
const baseGenericStyles = react.css`
|
|
1637
1723
|
:root {
|
|
@@ -1686,6 +1772,7 @@ const baseGenericStyles = react.css`
|
|
|
1686
1772
|
--ddk-generic-color-grey-90-05: #1012230d;
|
|
1687
1773
|
--ddk-generic-color-grey-100: #171717;
|
|
1688
1774
|
--ddk-generic-color-grey-100-50: #17171780;
|
|
1775
|
+
--ddk-generic-color-orange-50: #fff3dd;
|
|
1689
1776
|
--ddk-generic-color-orange-100: #ff9e32;
|
|
1690
1777
|
--ddk-generic-color-orange-200: #c87321;
|
|
1691
1778
|
--ddk-generic-color-red-5: #ffe1e2;
|
|
@@ -1737,6 +1824,7 @@ const baseSemanticStyles = react.css`
|
|
|
1737
1824
|
--ddk-semantic-color-system-blue: var(--ddk-generic-color-blue-80);
|
|
1738
1825
|
--ddk-semantic-color-system-green: var(--ddk-generic-color-green-100);
|
|
1739
1826
|
--ddk-semantic-color-system-orange: var(--ddk-generic-color-orange-100);
|
|
1827
|
+
--ddk-semantic-color-system-orange-light: var(--ddk-generic-color-orange-50);
|
|
1740
1828
|
--ddk-semantic-color-system-red: var(--ddk-generic-color-red-100);
|
|
1741
1829
|
--ddk-semantic-color-system-grey-60: var(--ddk-generic-color-grey-60);
|
|
1742
1830
|
|
|
@@ -1984,7 +2072,6 @@ const flexEUComponentStyles = react.css`
|
|
|
1984
2072
|
// dashboard card
|
|
1985
2073
|
--ddk-component-dashboard-card-color-unassigned: var(--ddk-generic-color-grey-50);
|
|
1986
2074
|
--ddk-component-dashboard-card-color: var(--ddk-generic-color-grey-90);
|
|
1987
|
-
--ddk-component-dashboard-card-header-background-color: var(--ddk-generic-color-grey-20);
|
|
1988
2075
|
--ddk-component-dashboard-card-height: 92px; // validated
|
|
1989
2076
|
--ddk-component-dashboard-card-small-height: 92px; // validated
|
|
1990
2077
|
--ddk-component-dashboard-card-large-width: 260px; // validated
|
|
@@ -2068,6 +2155,7 @@ const getStyles = (temporaryThemeID) => temporaryThemeID === "flex-eu" ? [
|
|
|
2068
2155
|
baseGenericStyles,
|
|
2069
2156
|
baseComponentStyles,
|
|
2070
2157
|
baseSemanticStyles,
|
|
2158
|
+
layoutStyles,
|
|
2071
2159
|
flexEUComponentStyles,
|
|
2072
2160
|
flexEUSemanticStyles
|
|
2073
2161
|
] : temporaryThemeID === "compact" ? [
|
|
@@ -2076,6 +2164,7 @@ const getStyles = (temporaryThemeID) => temporaryThemeID === "flex-eu" ? [
|
|
|
2076
2164
|
baseGenericStyles,
|
|
2077
2165
|
baseComponentStyles,
|
|
2078
2166
|
baseSemanticStyles,
|
|
2167
|
+
layoutStyles,
|
|
2079
2168
|
flexEUComponentStyles,
|
|
2080
2169
|
flexEUSemanticStyles,
|
|
2081
2170
|
compactComponentStyles,
|
|
@@ -2085,7 +2174,8 @@ const getStyles = (temporaryThemeID) => temporaryThemeID === "flex-eu" ? [
|
|
|
2085
2174
|
rootStyles,
|
|
2086
2175
|
baseGenericStyles,
|
|
2087
2176
|
baseComponentStyles,
|
|
2088
|
-
baseSemanticStyles
|
|
2177
|
+
baseSemanticStyles,
|
|
2178
|
+
layoutStyles
|
|
2089
2179
|
];
|
|
2090
2180
|
const SvgAlertFilled = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.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__namespace.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" }));
|
|
2091
2181
|
const SvgCloseSidebar = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_1054_40209)" }, /* @__PURE__ */ React__namespace.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__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_1054_40209" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 24, height: 24, fill: "white" }))));
|
|
@@ -2362,6 +2452,7 @@ exports.getNextSequentialColor = getNextSequentialColor;
|
|
|
2362
2452
|
exports.getRgb = getRgb;
|
|
2363
2453
|
exports.getStyles = getStyles;
|
|
2364
2454
|
exports.hsvToRgb = hsvToRgb;
|
|
2455
|
+
exports.layoutStyles = layoutStyles;
|
|
2365
2456
|
exports.padHex = padHex;
|
|
2366
2457
|
exports.rgbToHex = rgbToHex;
|
|
2367
2458
|
exports.seedRandom = seedRandom;
|