@boostdev/design-system-components 2.0.0 → 2.2.0
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/AGENTS.md +2 -1
- package/README.md +42 -1
- package/dist/client.cjs +305 -60
- package/dist/client.css +577 -523
- package/dist/client.d.cts +42 -2
- package/dist/client.d.ts +42 -2
- package/dist/client.js +311 -60
- package/dist/index.cjs +305 -60
- package/dist/index.css +577 -523
- package/dist/index.d.cts +42 -2
- package/dist/index.d.ts +42 -2
- package/dist/index.js +311 -60
- package/dist/native/index.cjs +5 -2
- package/dist/native/index.d.cts +3 -1
- package/dist/native/index.d.ts +3 -1
- package/dist/native/index.js +5 -2
- package/dist/web-components/{chunk-3REOIRDW.js → chunk-N3TN6WCH.js} +26 -1
- package/dist/web-components/index.d.ts +129 -1
- package/dist/web-components/index.js +312 -1
- package/dist/web-components/interaction/bds-button.d.ts +7 -0
- package/dist/web-components/interaction/bds-button.js +1 -1
- package/package.json +1 -1
- package/src/components/interaction/Button/Button.mdx +81 -36
- package/src/components/interaction/Button/Button.module.css +24 -0
- package/src/components/interaction/Button/Button.native.mdx +31 -12
- package/src/components/interaction/Button/Button.native.spec.tsx +20 -0
- package/src/components/interaction/Button/Button.native.stories.tsx +110 -9
- package/src/components/interaction/Button/Button.native.tsx +13 -4
- package/src/components/interaction/Button/Button.spec.tsx +16 -0
- package/src/components/interaction/Button/Button.stories.tsx +134 -16
- package/src/components/interaction/Button/Button.tsx +4 -0
- package/src/components/layout/Grid/Grid.mdx +244 -0
- package/src/components/layout/Grid/Grid.module.css +59 -0
- package/src/components/layout/Grid/Grid.spec.tsx +401 -0
- package/src/components/layout/Grid/Grid.stories.tsx +160 -0
- package/src/components/layout/Grid/Grid.tsx +85 -0
- package/src/components/layout/Grid/GridItem.tsx +150 -0
- package/src/components/layout/Grid/autoSpan.ts +77 -0
- package/src/components/layout/Grid/index.ts +4 -0
- package/src/components/layout/Grid/masonry.ts +134 -0
- package/src/components/layout/IconWrapper/IconWrapper.stories.tsx +46 -14
- package/src/index.ts +2 -0
- package/src/web-components/index.ts +4 -0
- package/src/web-components/interaction/BdsButton.mdx +46 -14
- package/src/web-components/interaction/BdsButton.stories.tsx +171 -19
- package/src/web-components/interaction/bds-button.spec.ts +35 -0
- package/src/web-components/interaction/bds-button.ts +28 -1
- package/src/web-components/layout/BdsGrid.mdx +210 -0
- package/src/web-components/layout/BdsGrid.stories.tsx +209 -0
- package/src/web-components/layout/BdsGridItem.mdx +52 -0
- package/src/web-components/layout/BdsGridItem.stories.tsx +72 -0
- package/src/web-components/layout/bds-grid-item.spec.ts +102 -0
- package/src/web-components/layout/bds-grid-item.ts +177 -0
- package/src/web-components/layout/bds-grid.spec.ts +62 -0
- package/src/web-components/layout/bds-grid.ts +184 -0
package/dist/client.cjs
CHANGED
|
@@ -53,6 +53,9 @@ __export(client_exports, {
|
|
|
53
53
|
DropdownMenu: () => DropdownMenu,
|
|
54
54
|
FileInput: () => FileInput,
|
|
55
55
|
FormInput: () => FormInput,
|
|
56
|
+
Grid: () => Grid,
|
|
57
|
+
GridItem: () => GridItem,
|
|
58
|
+
GridItemSpan: () => GridItemSpan,
|
|
56
59
|
IconWrapper: () => IconWrapper,
|
|
57
60
|
Link: () => Link,
|
|
58
61
|
Loading: () => Loading,
|
|
@@ -79,7 +82,7 @@ __export(client_exports, {
|
|
|
79
82
|
ToastProvider: () => ToastProvider,
|
|
80
83
|
Tooltip: () => Tooltip,
|
|
81
84
|
Typography: () => Typography,
|
|
82
|
-
cn: () =>
|
|
85
|
+
cn: () => import_design_system_foundation53.cn,
|
|
83
86
|
useToast: () => useToast
|
|
84
87
|
});
|
|
85
88
|
module.exports = __toCommonJS(client_exports);
|
|
@@ -88,7 +91,7 @@ module.exports = __toCommonJS(client_exports);
|
|
|
88
91
|
var import_react = require("react");
|
|
89
92
|
|
|
90
93
|
// src/components/ui/Accordion/Accordion.module.css
|
|
91
|
-
var Accordion_default = {"component":"
|
|
94
|
+
var Accordion_default = {"component":"bds220Accordion-component","accordion":"bds220Accordion-accordion","item":"bds220Accordion-item","heading":"bds220Accordion-heading","trigger":"bds220Accordion-trigger","triggerLabel":"bds220Accordion-triggerLabel","chevron":"bds220Accordion-chevron","--open":"bds220Accordion---open","panel":"bds220Accordion-panel","panelContent":"bds220Accordion-panelContent"};
|
|
92
95
|
|
|
93
96
|
// src/components/ui/Accordion/Accordion.tsx
|
|
94
97
|
var import_design_system_foundation = require("@boostdev/design-system-foundation");
|
|
@@ -157,7 +160,7 @@ function Accordion({
|
|
|
157
160
|
}
|
|
158
161
|
|
|
159
162
|
// src/components/ui/Alert/Alert.module.css
|
|
160
|
-
var Alert_default = {"component":"
|
|
163
|
+
var Alert_default = {"component":"bds220Alert-component","alert":"bds220Alert-alert","--variant_info":"bds220Alert---variant_info","--variant_success":"bds220Alert---variant_success","--variant_warning":"bds220Alert---variant_warning","--variant_error":"bds220Alert---variant_error","icon":"bds220Alert-icon","content":"bds220Alert-content","title":"bds220Alert-title","dismiss":"bds220Alert-dismiss"};
|
|
161
164
|
|
|
162
165
|
// src/components/ui/Alert/Alert.tsx
|
|
163
166
|
var import_design_system_foundation2 = require("@boostdev/design-system-foundation");
|
|
@@ -202,7 +205,7 @@ function Alert({
|
|
|
202
205
|
}
|
|
203
206
|
|
|
204
207
|
// src/components/ui/Avatar/Avatar.module.css
|
|
205
|
-
var Avatar_default = {"component":"
|
|
208
|
+
var Avatar_default = {"component":"bds220Avatar-component","avatar":"bds220Avatar-avatar","--fallback":"bds220Avatar---fallback","--size_small":"bds220Avatar---size_small","--size_medium":"bds220Avatar---size_medium","--size_large":"bds220Avatar---size_large","image":"bds220Avatar-image","initials":"bds220Avatar-initials"};
|
|
206
209
|
|
|
207
210
|
// src/components/ui/Avatar/Avatar.tsx
|
|
208
211
|
var import_design_system_foundation3 = require("@boostdev/design-system-foundation");
|
|
@@ -229,7 +232,7 @@ function Avatar({ src, alt, name, size = "medium", className, ...rest }) {
|
|
|
229
232
|
}
|
|
230
233
|
|
|
231
234
|
// src/components/ui/Badge/Badge.module.css
|
|
232
|
-
var Badge_default = {"component":"
|
|
235
|
+
var Badge_default = {"component":"bds220Badge-component","badge":"bds220Badge-badge","--variant_primary":"bds220Badge---variant_primary","--variant_secondary":"bds220Badge---variant_secondary","--variant_success":"bds220Badge---variant_success","--variant_error":"bds220Badge---variant_error","--variant_warning":"bds220Badge---variant_warning"};
|
|
233
236
|
|
|
234
237
|
// src/components/ui/Badge/Badge.tsx
|
|
235
238
|
var import_design_system_foundation4 = require("@boostdev/design-system-foundation");
|
|
@@ -239,7 +242,7 @@ function Badge({ children, variant = "primary", className, ...rest }) {
|
|
|
239
242
|
}
|
|
240
243
|
|
|
241
244
|
// src/components/ui/Breadcrumb/Breadcrumb.module.css
|
|
242
|
-
var Breadcrumb_default = {"component":"
|
|
245
|
+
var Breadcrumb_default = {"component":"bds220Breadcrumb-component","breadcrumb":"bds220Breadcrumb-breadcrumb","list":"bds220Breadcrumb-list","item":"bds220Breadcrumb-item","link":"bds220Breadcrumb-link","separator":"bds220Breadcrumb-separator","current":"bds220Breadcrumb-current"};
|
|
243
246
|
|
|
244
247
|
// src/components/ui/Breadcrumb/Breadcrumb.tsx
|
|
245
248
|
var import_design_system_foundation5 = require("@boostdev/design-system-foundation");
|
|
@@ -255,7 +258,7 @@ function Breadcrumb({ items, className, ...rest }) {
|
|
|
255
258
|
}
|
|
256
259
|
|
|
257
260
|
// src/components/ui/Collapsible/Collapsible.module.css
|
|
258
|
-
var Collapsible_default = {"component":"
|
|
261
|
+
var Collapsible_default = {"component":"bds220Collapsible-component","collapsible":"bds220Collapsible-collapsible","summary":"bds220Collapsible-summary","summaryContent":"bds220Collapsible-summaryContent","icon":"bds220Collapsible-icon","content":"bds220Collapsible-content"};
|
|
259
262
|
|
|
260
263
|
// src/components/ui/Collapsible/Collapsible.tsx
|
|
261
264
|
var import_design_system_foundation6 = require("@boostdev/design-system-foundation");
|
|
@@ -296,7 +299,7 @@ function Collapsible({
|
|
|
296
299
|
var import_react2 = require("react");
|
|
297
300
|
|
|
298
301
|
// src/components/ui/Calendar/Calendar.module.css
|
|
299
|
-
var Calendar_default = {"component":"
|
|
302
|
+
var Calendar_default = {"component":"bds220Calendar-component","calendar":"bds220Calendar-calendar","header":"bds220Calendar-header","monthYear":"bds220Calendar-monthYear","navBtn":"bds220Calendar-navBtn","grid":"bds220Calendar-grid","weekday":"bds220Calendar-weekday","empty":"bds220Calendar-empty","day":"bds220Calendar-day","disabled":"bds220Calendar-disabled","selected":"bds220Calendar-selected","today":"bds220Calendar-today"};
|
|
300
303
|
|
|
301
304
|
// src/components/ui/Calendar/Calendar.tsx
|
|
302
305
|
var import_design_system_foundation7 = require("@boostdev/design-system-foundation");
|
|
@@ -471,7 +474,7 @@ function Calendar({ value, defaultValue, min, max, onChange, className, ...rest
|
|
|
471
474
|
var import_react3 = require("react");
|
|
472
475
|
|
|
473
476
|
// src/components/ui/Carousel/Carousel.module.css
|
|
474
|
-
var Carousel_default = {"component":"
|
|
477
|
+
var Carousel_default = {"component":"bds220Carousel-component","carousel":"bds220Carousel-carousel","track":"bds220Carousel-track","slide":"bds220Carousel-slide","navBtn":"bds220Carousel-navBtn"};
|
|
475
478
|
|
|
476
479
|
// src/components/ui/Carousel/Carousel.tsx
|
|
477
480
|
var import_design_system_foundation8 = require("@boostdev/design-system-foundation");
|
|
@@ -524,7 +527,7 @@ function Carousel({ items, label, className, ...rest }) {
|
|
|
524
527
|
}
|
|
525
528
|
|
|
526
529
|
// src/components/ui/DescriptionList/DescriptionList.module.css
|
|
527
|
-
var DescriptionList_default = {"component":"
|
|
530
|
+
var DescriptionList_default = {"component":"bds220DescriptionList-component","list":"bds220DescriptionList-list","group":"bds220DescriptionList-group","term":"bds220DescriptionList-term","details":"bds220DescriptionList-details","--layout_inline":"bds220DescriptionList---layout_inline"};
|
|
528
531
|
|
|
529
532
|
// src/components/ui/DescriptionList/DescriptionList.tsx
|
|
530
533
|
var import_design_system_foundation9 = require("@boostdev/design-system-foundation");
|
|
@@ -537,7 +540,7 @@ function DescriptionList({ items, layout = "stacked", className, ...rest }) {
|
|
|
537
540
|
}
|
|
538
541
|
|
|
539
542
|
// src/components/ui/Link/Link.module.css
|
|
540
|
-
var Link_default = {"component":"
|
|
543
|
+
var Link_default = {"component":"bds220Link-component","link":"bds220Link-link","--variant_default":"bds220Link---variant_default","--variant_subtle":"bds220Link---variant_subtle","--variant_standalone":"bds220Link---variant_standalone","externalLabel":"bds220Link-externalLabel"};
|
|
541
544
|
|
|
542
545
|
// src/components/ui/Link/Link.tsx
|
|
543
546
|
var import_design_system_foundation10 = require("@boostdev/design-system-foundation");
|
|
@@ -568,7 +571,7 @@ function Link({
|
|
|
568
571
|
}
|
|
569
572
|
|
|
570
573
|
// src/components/ui/Loading/Loading.module.css
|
|
571
|
-
var Loading_default = {"component":"
|
|
574
|
+
var Loading_default = {"component":"bds220Loading-component","loading":"bds220Loading-loading","spinner":"bds220Loading-spinner","--size_small":"bds220Loading---size_small","--size_large":"bds220Loading---size_large"};
|
|
572
575
|
|
|
573
576
|
// src/components/ui/Loading/Loading.tsx
|
|
574
577
|
var import_design_system_foundation11 = require("@boostdev/design-system-foundation");
|
|
@@ -578,7 +581,7 @@ function Loading({ size = "medium", className, ...rest }) {
|
|
|
578
581
|
}
|
|
579
582
|
|
|
580
583
|
// src/components/ui/NotificationBanner/NotificationBanner.module.css
|
|
581
|
-
var NotificationBanner_default = {"component":"
|
|
584
|
+
var NotificationBanner_default = {"component":"bds220NotificationBanner-component","banner":"bds220NotificationBanner-banner","--variant_info":"bds220NotificationBanner---variant_info","--variant_success":"bds220NotificationBanner---variant_success","--variant_warning":"bds220NotificationBanner---variant_warning","--variant_error":"bds220NotificationBanner---variant_error","content":"bds220NotificationBanner-content","action":"bds220NotificationBanner-action","dismiss":"bds220NotificationBanner-dismiss"};
|
|
582
585
|
|
|
583
586
|
// src/components/ui/NotificationBanner/NotificationBanner.tsx
|
|
584
587
|
var import_design_system_foundation12 = require("@boostdev/design-system-foundation");
|
|
@@ -619,7 +622,7 @@ function NotificationBanner({
|
|
|
619
622
|
}
|
|
620
623
|
|
|
621
624
|
// src/components/ui/Pagination/Pagination.module.css
|
|
622
|
-
var Pagination_default = {"component":"
|
|
625
|
+
var Pagination_default = {"component":"bds220Pagination-component","pagination":"bds220Pagination-pagination","list":"bds220Pagination-list","button":"bds220Pagination-button","--active":"bds220Pagination---active","--nav":"bds220Pagination---nav","ellipsis":"bds220Pagination-ellipsis"};
|
|
623
626
|
|
|
624
627
|
// src/components/ui/Pagination/Pagination.tsx
|
|
625
628
|
var import_design_system_foundation13 = require("@boostdev/design-system-foundation");
|
|
@@ -684,7 +687,7 @@ function Pagination({
|
|
|
684
687
|
}
|
|
685
688
|
|
|
686
689
|
// src/components/ui/Progress/Progress.module.css
|
|
687
|
-
var Progress_default = {"component":"
|
|
690
|
+
var Progress_default = {"component":"bds220Progress-component","container":"bds220Progress-container","labelRow":"bds220Progress-labelRow","value":"bds220Progress-value","track":"bds220Progress-track","--size_small":"bds220Progress---size_small","--size_medium":"bds220Progress---size_medium","--size_large":"bds220Progress---size_large","fill":"bds220Progress-fill"};
|
|
688
691
|
|
|
689
692
|
// src/components/ui/Progress/Progress.tsx
|
|
690
693
|
var import_design_system_foundation14 = require("@boostdev/design-system-foundation");
|
|
@@ -723,7 +726,7 @@ function Progress({
|
|
|
723
726
|
}
|
|
724
727
|
|
|
725
728
|
// src/components/ui/ProgressCircle/ProgressCircle.module.css
|
|
726
|
-
var ProgressCircle_default = {"component":"
|
|
729
|
+
var ProgressCircle_default = {"component":"bds220ProgressCircle-component","wrapper":"bds220ProgressCircle-wrapper","svg":"bds220ProgressCircle-svg","track":"bds220ProgressCircle-track","fill":"bds220ProgressCircle-fill","value":"bds220ProgressCircle-value","--size_small":"bds220ProgressCircle---size_small","--size_medium":"bds220ProgressCircle---size_medium","--size_large":"bds220ProgressCircle---size_large"};
|
|
727
730
|
|
|
728
731
|
// src/components/ui/ProgressCircle/ProgressCircle.tsx
|
|
729
732
|
var import_design_system_foundation15 = require("@boostdev/design-system-foundation");
|
|
@@ -804,7 +807,7 @@ function ProgressCircle({
|
|
|
804
807
|
}
|
|
805
808
|
|
|
806
809
|
// src/components/ui/Separator/Separator.module.css
|
|
807
|
-
var Separator_default = {"component":"
|
|
810
|
+
var Separator_default = {"component":"bds220Separator-component","separator":"bds220Separator-separator","--horizontal":"bds220Separator---horizontal","--vertical":"bds220Separator---vertical"};
|
|
808
811
|
|
|
809
812
|
// src/components/ui/Separator/Separator.tsx
|
|
810
813
|
var import_design_system_foundation16 = require("@boostdev/design-system-foundation");
|
|
@@ -828,7 +831,7 @@ function Separator({ orientation = "horizontal", className, ...rest }) {
|
|
|
828
831
|
var import_design_system_foundation17 = require("@boostdev/design-system-foundation");
|
|
829
832
|
|
|
830
833
|
// src/components/ui/Skeleton/Skeleton.module.css
|
|
831
|
-
var Skeleton_default = {"component":"
|
|
834
|
+
var Skeleton_default = {"component":"bds220Skeleton-component","skeleton":"bds220Skeleton-skeleton"};
|
|
832
835
|
|
|
833
836
|
// src/components/ui/Skeleton/Skeleton.tsx
|
|
834
837
|
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
@@ -837,7 +840,7 @@ function Skeleton({ className, ...rest }) {
|
|
|
837
840
|
}
|
|
838
841
|
|
|
839
842
|
// src/components/ui/SkipLink/SkipLink.module.css
|
|
840
|
-
var SkipLink_default = {"component":"
|
|
843
|
+
var SkipLink_default = {"component":"bds220SkipLink-component","skipLink":"bds220SkipLink-skipLink"};
|
|
841
844
|
|
|
842
845
|
// src/components/ui/SkipLink/SkipLink.tsx
|
|
843
846
|
var import_design_system_foundation18 = require("@boostdev/design-system-foundation");
|
|
@@ -847,7 +850,7 @@ function SkipLink({ href = "#main", children = "Skip to main content", className
|
|
|
847
850
|
}
|
|
848
851
|
|
|
849
852
|
// src/components/ui/Table/Table.module.css
|
|
850
|
-
var Table_default = {"component":"
|
|
853
|
+
var Table_default = {"component":"bds220Table-component","wrapper":"bds220Table-wrapper","table":"bds220Table-table","caption":"bds220Table-caption","thead":"bds220Table-thead","th":"bds220Table-th","--sortable":"bds220Table---sortable","sortButton":"bds220Table-sortButton","sortIcon":"bds220Table-sortIcon","--sort-active":"bds220Table---sort-active","--sort-desc":"bds220Table---sort-desc","tbody":"bds220Table-tbody","tr":"bds220Table-tr","td":"bds220Table-td"};
|
|
851
854
|
|
|
852
855
|
// src/components/ui/Table/Table.tsx
|
|
853
856
|
var import_design_system_foundation19 = require("@boostdev/design-system-foundation");
|
|
@@ -917,7 +920,7 @@ function Table({
|
|
|
917
920
|
var import_react4 = require("react");
|
|
918
921
|
|
|
919
922
|
// src/components/ui/Tabs/Tabs.module.css
|
|
920
|
-
var Tabs_default = {"component":"
|
|
923
|
+
var Tabs_default = {"component":"bds220Tabs-component","tabs":"bds220Tabs-tabs","tabList":"bds220Tabs-tabList","tab":"bds220Tabs-tab","--active":"bds220Tabs---active","panel":"bds220Tabs-panel"};
|
|
921
924
|
|
|
922
925
|
// src/components/ui/Tabs/Tabs.tsx
|
|
923
926
|
var import_design_system_foundation20 = require("@boostdev/design-system-foundation");
|
|
@@ -997,7 +1000,7 @@ function Tabs({ tabs, defaultTab, className, ...rest }) {
|
|
|
997
1000
|
var import_react5 = require("react");
|
|
998
1001
|
|
|
999
1002
|
// src/components/ui/Tooltip/Tooltip.module.css
|
|
1000
|
-
var Tooltip_default = {"component":"
|
|
1003
|
+
var Tooltip_default = {"component":"bds220Tooltip-component","wrapper":"bds220Tooltip-wrapper","tooltip":"bds220Tooltip-tooltip","--placement_top":"bds220Tooltip---placement_top","--placement_bottom":"bds220Tooltip---placement_bottom","--placement_left":"bds220Tooltip---placement_left","--placement_right":"bds220Tooltip---placement_right"};
|
|
1001
1004
|
|
|
1002
1005
|
// src/components/ui/Tooltip/Tooltip.tsx
|
|
1003
1006
|
var import_design_system_foundation21 = require("@boostdev/design-system-foundation");
|
|
@@ -1041,7 +1044,7 @@ function Tooltip({
|
|
|
1041
1044
|
}
|
|
1042
1045
|
|
|
1043
1046
|
// src/components/ui/Typography/Typography.module.css
|
|
1044
|
-
var Typography_default = {"component":"
|
|
1047
|
+
var Typography_default = {"component":"bds220Typography-component","typography":"bds220Typography-typography","--h1":"bds220Typography---h1","--h2":"bds220Typography---h2","--h3":"bds220Typography---h3","--body":"bds220Typography---body","--body_s":"bds220Typography---body_s"};
|
|
1045
1048
|
|
|
1046
1049
|
// src/components/ui/Typography/Typography.tsx
|
|
1047
1050
|
var import_design_system_foundation22 = require("@boostdev/design-system-foundation");
|
|
@@ -1059,7 +1062,7 @@ function Typography({ variant = "body", component, children, className, ...rest
|
|
|
1059
1062
|
}
|
|
1060
1063
|
|
|
1061
1064
|
// src/components/interaction/Button/Button.module.css
|
|
1062
|
-
var Button_default = {"component":"
|
|
1065
|
+
var Button_default = {"component":"bds220Button-component","button":"bds220Button-button","--default":"bds220Button---default","--outline":"bds220Button---outline","--ghost":"bds220Button---ghost","--size_small":"bds220Button---size_small","--size_medium":"bds220Button---size_medium","--size_large":"bds220Button---size_large","--hasPulse":"bds220Button---hasPulse","iconStart":"bds220Button-iconStart","iconEnd":"bds220Button-iconEnd","--iconOnly":"bds220Button---iconOnly"};
|
|
1063
1066
|
|
|
1064
1067
|
// src/components/interaction/Button/Button.tsx
|
|
1065
1068
|
var import_design_system_foundation23 = require("@boostdev/design-system-foundation");
|
|
@@ -1073,6 +1076,7 @@ function Button({
|
|
|
1073
1076
|
iconEnd,
|
|
1074
1077
|
size = "medium",
|
|
1075
1078
|
hasPulse = false,
|
|
1079
|
+
isIconOnly = false,
|
|
1076
1080
|
href,
|
|
1077
1081
|
target,
|
|
1078
1082
|
rel,
|
|
@@ -1085,6 +1089,7 @@ function Button({
|
|
|
1085
1089
|
Button_default[`--${variant}`],
|
|
1086
1090
|
Button_default[`--size_${size}`],
|
|
1087
1091
|
hasPulse && Button_default["--hasPulse"],
|
|
1092
|
+
isIconOnly && Button_default["--iconOnly"],
|
|
1088
1093
|
className
|
|
1089
1094
|
);
|
|
1090
1095
|
const handleAnchorClick = (e) => {
|
|
@@ -1174,7 +1179,7 @@ function installInvokerCommandsPolyfill() {
|
|
|
1174
1179
|
}
|
|
1175
1180
|
|
|
1176
1181
|
// src/components/interaction/Command/Command.module.css
|
|
1177
|
-
var Command_default = {"component":"
|
|
1182
|
+
var Command_default = {"component":"bds220Command-component","dialog":"bds220Command-dialog","palette":"bds220Command-palette","searchRow":"bds220Command-searchRow","searchIcon":"bds220Command-searchIcon","search":"bds220Command-search","escHint":"bds220Command-escHint","list":"bds220Command-list","groupList":"bds220Command-groupList","group":"bds220Command-group","item":"bds220Command-item","itemActive":"bds220Command-itemActive","itemLabel":"bds220Command-itemLabel","itemDesc":"bds220Command-itemDesc","shortcut":"bds220Command-shortcut","empty":"bds220Command-empty"};
|
|
1178
1183
|
|
|
1179
1184
|
// src/components/interaction/Command/Command.tsx
|
|
1180
1185
|
var import_design_system_foundation24 = require("@boostdev/design-system-foundation");
|
|
@@ -1351,7 +1356,7 @@ function Command({
|
|
|
1351
1356
|
var import_react7 = require("react");
|
|
1352
1357
|
|
|
1353
1358
|
// src/components/interaction/Dialog/Dialog.module.css
|
|
1354
|
-
var Dialog_default = {"component":"
|
|
1359
|
+
var Dialog_default = {"component":"bds220Dialog-component","dialog":"bds220Dialog-dialog","dialogContent":"bds220Dialog-dialogContent","closeButton":"bds220Dialog-closeButton"};
|
|
1355
1360
|
|
|
1356
1361
|
// src/components/interaction/Dialog/Dialog.tsx
|
|
1357
1362
|
var import_design_system_foundation25 = require("@boostdev/design-system-foundation");
|
|
@@ -1457,7 +1462,7 @@ function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClo
|
|
|
1457
1462
|
var import_react8 = require("react");
|
|
1458
1463
|
|
|
1459
1464
|
// src/components/interaction/Drawer/Drawer.module.css
|
|
1460
|
-
var Drawer_default = {"component":"
|
|
1465
|
+
var Drawer_default = {"component":"bds220Drawer-component","drawer":"bds220Drawer-drawer","--side_left":"bds220Drawer---side_left","header":"bds220Drawer-header","closeButton":"bds220Drawer-closeButton","body":"bds220Drawer-body"};
|
|
1461
1466
|
|
|
1462
1467
|
// src/components/interaction/Drawer/Drawer.tsx
|
|
1463
1468
|
var import_design_system_foundation26 = require("@boostdev/design-system-foundation");
|
|
@@ -1558,7 +1563,7 @@ function Drawer({
|
|
|
1558
1563
|
var import_react9 = require("react");
|
|
1559
1564
|
|
|
1560
1565
|
// src/components/interaction/DropdownMenu/DropdownMenu.module.css
|
|
1561
|
-
var DropdownMenu_default = {"component":"
|
|
1566
|
+
var DropdownMenu_default = {"component":"bds220DropdownMenu-component","wrapper":"bds220DropdownMenu-wrapper","menu":"bds220DropdownMenu-menu","--placement_bottom-start":"bds220DropdownMenu---placement_bottom-start","--placement_bottom-end":"bds220DropdownMenu---placement_bottom-end","separator":"bds220DropdownMenu-separator","item":"bds220DropdownMenu-item","icon":"bds220DropdownMenu-icon"};
|
|
1562
1567
|
|
|
1563
1568
|
// src/components/interaction/DropdownMenu/DropdownMenu.tsx
|
|
1564
1569
|
var import_design_system_foundation27 = require("@boostdev/design-system-foundation");
|
|
@@ -1672,7 +1677,7 @@ function DropdownMenu({
|
|
|
1672
1677
|
var import_react10 = require("react");
|
|
1673
1678
|
|
|
1674
1679
|
// src/components/interaction/Popover/Popover.module.css
|
|
1675
|
-
var Popover_default = {"component":"
|
|
1680
|
+
var Popover_default = {"component":"bds220Popover-component","wrapper":"bds220Popover-wrapper","panel":"bds220Popover-panel","g":"bds220Popover-g"};
|
|
1676
1681
|
|
|
1677
1682
|
// src/components/interaction/Popover/Popover.tsx
|
|
1678
1683
|
var import_design_system_foundation28 = require("@boostdev/design-system-foundation");
|
|
@@ -1757,7 +1762,7 @@ function Popover({
|
|
|
1757
1762
|
}
|
|
1758
1763
|
|
|
1759
1764
|
// src/components/interaction/Rating/Rating.module.css
|
|
1760
|
-
var Rating_default = {"component":"
|
|
1765
|
+
var Rating_default = {"component":"bds220Rating-component","rating":"bds220Rating-rating","star":"bds220Rating-star","--filled":"bds220Rating---filled"};
|
|
1761
1766
|
|
|
1762
1767
|
// src/components/interaction/Rating/Rating.tsx
|
|
1763
1768
|
var import_design_system_foundation29 = require("@boostdev/design-system-foundation");
|
|
@@ -1789,7 +1794,7 @@ function Rating({ value, max = 5, className, ...rest }) {
|
|
|
1789
1794
|
var import_react11 = require("react");
|
|
1790
1795
|
|
|
1791
1796
|
// src/components/interaction/Toast/Toast.module.css
|
|
1792
|
-
var Toast_default = {"component":"
|
|
1797
|
+
var Toast_default = {"component":"bds220Toast-component","toastContainer":"bds220Toast-toastContainer","toast":"bds220Toast-toast","--variant_success":"bds220Toast---variant_success","--variant_warning":"bds220Toast---variant_warning","--variant_info":"bds220Toast---variant_info","--variant_error":"bds220Toast---variant_error","message":"bds220Toast-message","closeButton":"bds220Toast-closeButton"};
|
|
1793
1798
|
|
|
1794
1799
|
// src/components/interaction/Toast/Toast.tsx
|
|
1795
1800
|
var import_design_system_foundation30 = require("@boostdev/design-system-foundation");
|
|
@@ -1867,10 +1872,10 @@ function useToast() {
|
|
|
1867
1872
|
var import_react12 = require("react");
|
|
1868
1873
|
|
|
1869
1874
|
// src/components/interaction/form/Checkbox/Checkbox.module.css
|
|
1870
|
-
var Checkbox_default = {"component":"
|
|
1875
|
+
var Checkbox_default = {"component":"bds220Checkbox-component","checkboxGroup":"bds220Checkbox-checkboxGroup","inputWrapper":"bds220Checkbox-inputWrapper","checkbox":"bds220Checkbox-checkbox","checkboxError":"bds220Checkbox-checkboxError"};
|
|
1871
1876
|
|
|
1872
1877
|
// src/components/interaction/form/atoms/Message.module.css
|
|
1873
|
-
var Message_default = {"component":"
|
|
1878
|
+
var Message_default = {"component":"bds220Message-component","error":"bds220Message-error","hint":"bds220Message-hint"};
|
|
1874
1879
|
|
|
1875
1880
|
// src/components/interaction/form/atoms/Message.tsx
|
|
1876
1881
|
var import_design_system_foundation31 = require("@boostdev/design-system-foundation");
|
|
@@ -1881,7 +1886,7 @@ var Message = ({ message, type, inputId, className }) => {
|
|
|
1881
1886
|
};
|
|
1882
1887
|
|
|
1883
1888
|
// src/components/interaction/form/atoms/Label.module.css
|
|
1884
|
-
var Label_default = {"component":"
|
|
1889
|
+
var Label_default = {"component":"bds220Label-component","label":"bds220Label-label"};
|
|
1885
1890
|
|
|
1886
1891
|
// src/components/interaction/form/atoms/Label.tsx
|
|
1887
1892
|
var import_design_system_foundation32 = require("@boostdev/design-system-foundation");
|
|
@@ -1894,7 +1899,7 @@ var Label = ({ label, id, className }) => {
|
|
|
1894
1899
|
var import_design_system_foundation34 = require("@boostdev/design-system-foundation");
|
|
1895
1900
|
|
|
1896
1901
|
// src/components/interaction/form/atoms/InputContainer.module.css
|
|
1897
|
-
var InputContainer_default = {"component":"
|
|
1902
|
+
var InputContainer_default = {"component":"bds220InputContainer-component","container":"bds220InputContainer-container"};
|
|
1898
1903
|
|
|
1899
1904
|
// src/components/interaction/form/atoms/InputContainer.tsx
|
|
1900
1905
|
var import_design_system_foundation33 = require("@boostdev/design-system-foundation");
|
|
@@ -1935,7 +1940,7 @@ function Checkbox({ label, name, error, hint, className, ...props }) {
|
|
|
1935
1940
|
var import_react13 = require("react");
|
|
1936
1941
|
|
|
1937
1942
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css
|
|
1938
|
-
var CheckboxGroup_default = {"component":"
|
|
1943
|
+
var CheckboxGroup_default = {"component":"bds220CheckboxGroup-component","group":"bds220CheckboxGroup-group","legend":"bds220CheckboxGroup-legend","required":"bds220CheckboxGroup-required","items":"bds220CheckboxGroup-items"};
|
|
1939
1944
|
|
|
1940
1945
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
|
|
1941
1946
|
var import_design_system_foundation35 = require("@boostdev/design-system-foundation");
|
|
@@ -1977,7 +1982,7 @@ function CheckboxGroup({
|
|
|
1977
1982
|
var import_react14 = require("react");
|
|
1978
1983
|
|
|
1979
1984
|
// src/components/interaction/form/Combobox/Combobox.module.css
|
|
1980
|
-
var Combobox_default = {"component":"
|
|
1985
|
+
var Combobox_default = {"component":"bds220Combobox-component","formGroup":"bds220Combobox-formGroup","inputWrapper":"bds220Combobox-inputWrapper","input":"bds220Combobox-input","inputError":"bds220Combobox-inputError","chevron":"bds220Combobox-chevron","listbox":"bds220Combobox-listbox","option":"bds220Combobox-option","--highlighted":"bds220Combobox---highlighted","--selected":"bds220Combobox---selected","--disabled":"bds220Combobox---disabled"};
|
|
1981
1986
|
|
|
1982
1987
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
1983
1988
|
var import_design_system_foundation36 = require("@boostdev/design-system-foundation");
|
|
@@ -2128,7 +2133,7 @@ function Combobox({
|
|
|
2128
2133
|
var import_react15 = require("react");
|
|
2129
2134
|
|
|
2130
2135
|
// src/components/interaction/form/FileInput/FileInput.module.css
|
|
2131
|
-
var FileInput_default = {"component":"
|
|
2136
|
+
var FileInput_default = {"component":"bds220FileInput-component","formGroup":"bds220FileInput-formGroup","fieldLabel":"bds220FileInput-fieldLabel","dropZone":"bds220FileInput-dropZone","isDragging":"bds220FileInput-isDragging","hasError":"bds220FileInput-hasError","isDisabled":"bds220FileInput-isDisabled","icon":"bds220FileInput-icon","prompt":"bds220FileInput-prompt","acceptHint":"bds220FileInput-acceptHint","hiddenInput":"bds220FileInput-hiddenInput"};
|
|
2132
2137
|
|
|
2133
2138
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
2134
2139
|
var import_design_system_foundation37 = require("@boostdev/design-system-foundation");
|
|
@@ -2229,7 +2234,7 @@ function FileInput({
|
|
|
2229
2234
|
var import_react16 = require("react");
|
|
2230
2235
|
|
|
2231
2236
|
// src/components/interaction/form/FormInput/FormInput.module.css
|
|
2232
|
-
var FormInput_default = {"component":"
|
|
2237
|
+
var FormInput_default = {"component":"bds220FormInput-component","formGroup":"bds220FormInput-formGroup","input":"bds220FormInput-input","inputError":"bds220FormInput-inputError"};
|
|
2233
2238
|
|
|
2234
2239
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
2235
2240
|
var import_design_system_foundation38 = require("@boostdev/design-system-foundation");
|
|
@@ -2273,7 +2278,7 @@ function FormInput({
|
|
|
2273
2278
|
var import_react17 = require("react");
|
|
2274
2279
|
|
|
2275
2280
|
// src/components/interaction/form/NumberInput/NumberInput.module.css
|
|
2276
|
-
var NumberInput_default = {"component":"
|
|
2281
|
+
var NumberInput_default = {"component":"bds220NumberInput-component","formGroup":"bds220NumberInput-formGroup","inputRow":"bds220NumberInput-inputRow","input":"bds220NumberInput-input","inputError":"bds220NumberInput-inputError","stepper":"bds220NumberInput-stepper"};
|
|
2277
2282
|
|
|
2278
2283
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
2279
2284
|
var import_design_system_foundation39 = require("@boostdev/design-system-foundation");
|
|
@@ -2378,7 +2383,7 @@ function NumberInput({
|
|
|
2378
2383
|
var import_react18 = require("react");
|
|
2379
2384
|
|
|
2380
2385
|
// src/components/interaction/form/Radio/Radio.module.css
|
|
2381
|
-
var Radio_default = {"component":"
|
|
2386
|
+
var Radio_default = {"component":"bds220Radio-component","radioGroup":"bds220Radio-radioGroup","inputWrapper":"bds220Radio-inputWrapper","textWrapper":"bds220Radio-textWrapper","description":"bds220Radio-description","radio":"bds220Radio-radio","radioError":"bds220Radio-radioError"};
|
|
2382
2387
|
|
|
2383
2388
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2384
2389
|
var import_design_system_foundation40 = require("@boostdev/design-system-foundation");
|
|
@@ -2416,7 +2421,7 @@ function Radio({ label, name, description, error, hint, className, ...props }) {
|
|
|
2416
2421
|
var import_react19 = require("react");
|
|
2417
2422
|
|
|
2418
2423
|
// src/components/interaction/form/RadioGroup/RadioGroup.module.css
|
|
2419
|
-
var RadioGroup_default = {"component":"
|
|
2424
|
+
var RadioGroup_default = {"component":"bds220RadioGroup-component","group":"bds220RadioGroup-group","legend":"bds220RadioGroup-legend","required":"bds220RadioGroup-required","items":"bds220RadioGroup-items"};
|
|
2420
2425
|
|
|
2421
2426
|
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2422
2427
|
var import_design_system_foundation41 = require("@boostdev/design-system-foundation");
|
|
@@ -2458,7 +2463,7 @@ function RadioGroup({
|
|
|
2458
2463
|
var import_react20 = require("react");
|
|
2459
2464
|
|
|
2460
2465
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.module.css
|
|
2461
|
-
var SegmentedControl_default = {"component":"
|
|
2466
|
+
var SegmentedControl_default = {"component":"bds220SegmentedControl-component","control":"bds220SegmentedControl-control","thumb":"bds220SegmentedControl-thumb","indicator":"bds220SegmentedControl-indicator","item":"bds220SegmentedControl-item","--active":"bds220SegmentedControl---active","--disabled":"bds220SegmentedControl---disabled","--size_small":"bds220SegmentedControl---size_small","--size_large":"bds220SegmentedControl---size_large","--variant_outline":"bds220SegmentedControl---variant_outline"};
|
|
2462
2467
|
|
|
2463
2468
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2464
2469
|
var import_design_system_foundation42 = require("@boostdev/design-system-foundation");
|
|
@@ -2514,7 +2519,7 @@ function SegmentedControl({
|
|
|
2514
2519
|
var import_react21 = require("react");
|
|
2515
2520
|
|
|
2516
2521
|
// src/components/interaction/form/Select/Select.module.css
|
|
2517
|
-
var Select_default = {"component":"
|
|
2522
|
+
var Select_default = {"component":"bds220Select-component","formGroup":"bds220Select-formGroup","selectWrapper":"bds220Select-selectWrapper","select":"bds220Select-select","selectError":"bds220Select-selectError","chevron":"bds220Select-chevron"};
|
|
2518
2523
|
|
|
2519
2524
|
// src/components/interaction/form/Select/Select.tsx
|
|
2520
2525
|
var import_design_system_foundation43 = require("@boostdev/design-system-foundation");
|
|
@@ -2565,7 +2570,7 @@ function Select({
|
|
|
2565
2570
|
var import_react22 = require("react");
|
|
2566
2571
|
|
|
2567
2572
|
// src/components/interaction/form/Slider/Slider.module.css
|
|
2568
|
-
var Slider_default = {"component":"
|
|
2573
|
+
var Slider_default = {"component":"bds220Slider-component","formGroup":"bds220Slider-formGroup","labelRow":"bds220Slider-labelRow","value":"bds220Slider-value","slider":"bds220Slider-slider","sliderError":"bds220Slider-sliderError"};
|
|
2569
2574
|
|
|
2570
2575
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
2571
2576
|
var import_design_system_foundation44 = require("@boostdev/design-system-foundation");
|
|
@@ -2627,7 +2632,7 @@ function Slider({
|
|
|
2627
2632
|
var import_react23 = require("react");
|
|
2628
2633
|
|
|
2629
2634
|
// src/components/interaction/form/Switch/Switch.module.css
|
|
2630
|
-
var Switch_default = {"component":"
|
|
2635
|
+
var Switch_default = {"component":"bds220Switch-component","switchGroup":"bds220Switch-switchGroup","--size_small":"bds220Switch---size_small","--size_medium":"bds220Switch---size_medium","--size_large":"bds220Switch---size_large","inputWrapper":"bds220Switch-inputWrapper","trackWrapper":"bds220Switch-trackWrapper","switch":"bds220Switch-switch","track":"bds220Switch-track","thumb":"bds220Switch-thumb","switchError":"bds220Switch-switchError"};
|
|
2631
2636
|
|
|
2632
2637
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2633
2638
|
var import_design_system_foundation45 = require("@boostdev/design-system-foundation");
|
|
@@ -2675,7 +2680,7 @@ function Switch({
|
|
|
2675
2680
|
var import_react24 = require("react");
|
|
2676
2681
|
|
|
2677
2682
|
// src/components/interaction/form/Textarea/Textarea.module.css
|
|
2678
|
-
var Textarea_default = {"component":"
|
|
2683
|
+
var Textarea_default = {"component":"bds220Textarea-component","formGroup":"bds220Textarea-formGroup","textarea":"bds220Textarea-textarea","textareaError":"bds220Textarea-textareaError"};
|
|
2679
2684
|
|
|
2680
2685
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
2681
2686
|
var import_design_system_foundation46 = require("@boostdev/design-system-foundation");
|
|
@@ -2714,7 +2719,7 @@ function Textarea({
|
|
|
2714
2719
|
}
|
|
2715
2720
|
|
|
2716
2721
|
// src/components/layout/ButtonGroup/ButtonGroup.module.css
|
|
2717
|
-
var ButtonGroup_default = {"component":"
|
|
2722
|
+
var ButtonGroup_default = {"component":"bds220ButtonGroup-component","buttonGroup":"bds220ButtonGroup-buttonGroup","container":"bds220ButtonGroup-container","--variant_card":"bds220ButtonGroup---variant_card","--variant_flow":"bds220ButtonGroup---variant_flow","--variant_modal":"bds220ButtonGroup---variant_modal","--variant_content":"bds220ButtonGroup---variant_content","--variant_grid":"bds220ButtonGroup---variant_grid"};
|
|
2718
2723
|
|
|
2719
2724
|
// src/components/layout/ButtonGroup/ButtonGroup.tsx
|
|
2720
2725
|
var import_design_system_foundation47 = require("@boostdev/design-system-foundation");
|
|
@@ -2733,7 +2738,7 @@ function ButtonContainer({ children, className, variant, ...rest }) {
|
|
|
2733
2738
|
var ButtonGroup = ButtonContainer;
|
|
2734
2739
|
|
|
2735
2740
|
// src/components/layout/Card/Card.module.css
|
|
2736
|
-
var Card_default = {"component":"
|
|
2741
|
+
var Card_default = {"component":"bds220Card-component","card":"bds220Card-card","--default":"bds220Card---default","--elevated":"bds220Card---elevated","--outlined":"bds220Card---outlined","--clickable":"bds220Card---clickable","--padding-none":"bds220Card---padding-none","--padding-small":"bds220Card---padding-small","--padding-medium":"bds220Card---padding-medium","--padding-large":"bds220Card---padding-large","--padding-extra-large":"bds220Card---padding-extra-large","--text-start":"bds220Card---text-start","--text-center":"bds220Card---text-center","--text-end":"bds220Card---text-end"};
|
|
2737
2742
|
|
|
2738
2743
|
// src/components/layout/Card/Card.tsx
|
|
2739
2744
|
var import_design_system_foundation48 = require("@boostdev/design-system-foundation");
|
|
@@ -2769,12 +2774,249 @@ function Card({
|
|
|
2769
2774
|
);
|
|
2770
2775
|
}
|
|
2771
2776
|
|
|
2772
|
-
// src/components/layout/
|
|
2773
|
-
var
|
|
2777
|
+
// src/components/layout/Grid/Grid.tsx
|
|
2778
|
+
var import_react26 = require("react");
|
|
2774
2779
|
|
|
2775
|
-
// src/components/layout/
|
|
2780
|
+
// src/components/layout/Grid/Grid.module.css
|
|
2781
|
+
var Grid_default = {"component":"bds220Grid-component","grid":"bds220Grid-grid","--main":"bds220Grid---main","--page":"bds220Grid---page","--funnel":"bds220Grid---funnel","--custom":"bds220Grid---custom","--centered":"bds220Grid---centered","item":"bds220Grid-item","w3":"bds220Grid-w3","org":"bds220Grid-org","ts":"bds220Grid-ts","--masonry":"bds220Grid---masonry"};
|
|
2782
|
+
|
|
2783
|
+
// src/components/layout/Grid/Grid.tsx
|
|
2776
2784
|
var import_design_system_foundation49 = require("@boostdev/design-system-foundation");
|
|
2785
|
+
|
|
2786
|
+
// src/components/layout/Grid/masonry.ts
|
|
2787
|
+
var import_react25 = require("react");
|
|
2788
|
+
var ROW_UNIT_PX = 1;
|
|
2789
|
+
function supportsNativeMasonry() {
|
|
2790
|
+
if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return false;
|
|
2791
|
+
return CSS.supports("display", "grid-lanes") || CSS.supports("grid-template-rows", "masonry");
|
|
2792
|
+
}
|
|
2793
|
+
function applyMasonryLayout(container, rawChildren) {
|
|
2794
|
+
const cs = window.getComputedStyle(container);
|
|
2795
|
+
const targetGap = parseFloat(cs.columnGap) || 0;
|
|
2796
|
+
container.style.gridAutoRows = `${ROW_UNIT_PX}px`;
|
|
2797
|
+
container.style.rowGap = "0px";
|
|
2798
|
+
container.style.gridAutoFlow = "dense";
|
|
2799
|
+
const children = rawChildren.filter(
|
|
2800
|
+
(el) => el.nodeType === 1 && window.getComputedStyle(el).display !== "none"
|
|
2801
|
+
);
|
|
2802
|
+
for (const child of children) {
|
|
2803
|
+
child.style.gridRow = "";
|
|
2804
|
+
child.style.gridRowStart = "";
|
|
2805
|
+
child.style.gridRowEnd = "";
|
|
2806
|
+
}
|
|
2807
|
+
const heights = children.map((child) => child.offsetHeight);
|
|
2808
|
+
for (let i = 0; i < children.length; i++) {
|
|
2809
|
+
const span = Math.max(1, Math.ceil(heights[i] + targetGap));
|
|
2810
|
+
children[i].style.gridRowEnd = `span ${span}`;
|
|
2811
|
+
}
|
|
2812
|
+
}
|
|
2813
|
+
function clearMasonryLayout(container, rawChildren) {
|
|
2814
|
+
container.style.gridAutoRows = "";
|
|
2815
|
+
container.style.gridAutoFlow = "";
|
|
2816
|
+
container.style.rowGap = "";
|
|
2817
|
+
for (const child of rawChildren) {
|
|
2818
|
+
if (child.nodeType !== 1) continue;
|
|
2819
|
+
child.style.gridRow = "";
|
|
2820
|
+
child.style.gridRowStart = "";
|
|
2821
|
+
child.style.gridRowEnd = "";
|
|
2822
|
+
}
|
|
2823
|
+
}
|
|
2824
|
+
function useMasonry(ref, enabled) {
|
|
2825
|
+
(0, import_react25.useLayoutEffect)(() => {
|
|
2826
|
+
const container = ref.current;
|
|
2827
|
+
if (!container || !enabled) return;
|
|
2828
|
+
if (supportsNativeMasonry()) return;
|
|
2829
|
+
let frame = 0;
|
|
2830
|
+
const schedule = () => {
|
|
2831
|
+
cancelAnimationFrame(frame);
|
|
2832
|
+
frame = requestAnimationFrame(() => {
|
|
2833
|
+
applyMasonryLayout(container, Array.from(container.children));
|
|
2834
|
+
});
|
|
2835
|
+
};
|
|
2836
|
+
schedule();
|
|
2837
|
+
const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(schedule) : null;
|
|
2838
|
+
if (ro) {
|
|
2839
|
+
for (const child of Array.from(container.children)) ro.observe(child);
|
|
2840
|
+
}
|
|
2841
|
+
const mo = typeof MutationObserver !== "undefined" ? new MutationObserver(() => {
|
|
2842
|
+
if (ro) for (const child of Array.from(container.children)) ro.observe(child);
|
|
2843
|
+
schedule();
|
|
2844
|
+
}) : null;
|
|
2845
|
+
mo?.observe(container, { childList: true });
|
|
2846
|
+
return () => {
|
|
2847
|
+
cancelAnimationFrame(frame);
|
|
2848
|
+
ro?.disconnect();
|
|
2849
|
+
mo?.disconnect();
|
|
2850
|
+
clearMasonryLayout(container, Array.from(container.children));
|
|
2851
|
+
};
|
|
2852
|
+
}, [ref, enabled]);
|
|
2853
|
+
}
|
|
2854
|
+
|
|
2855
|
+
// src/components/layout/Grid/Grid.tsx
|
|
2777
2856
|
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
2857
|
+
var GridContext = (0, import_react26.createContext)({
|
|
2858
|
+
autoSpanMedia: false
|
|
2859
|
+
});
|
|
2860
|
+
function Grid({
|
|
2861
|
+
children,
|
|
2862
|
+
className,
|
|
2863
|
+
variant = "main",
|
|
2864
|
+
columns,
|
|
2865
|
+
isCentered = false,
|
|
2866
|
+
isMasonry = false,
|
|
2867
|
+
autoSpanMedia = false,
|
|
2868
|
+
as,
|
|
2869
|
+
style,
|
|
2870
|
+
...rest
|
|
2871
|
+
}) {
|
|
2872
|
+
const ref = (0, import_react26.useRef)(null);
|
|
2873
|
+
useMasonry(ref, isMasonry);
|
|
2874
|
+
const classNames = (0, import_design_system_foundation49.cn)(
|
|
2875
|
+
Grid_default.grid,
|
|
2876
|
+
Grid_default[`--${variant}`],
|
|
2877
|
+
isCentered && Grid_default["--centered"],
|
|
2878
|
+
isMasonry && Grid_default["--masonry"],
|
|
2879
|
+
className
|
|
2880
|
+
);
|
|
2881
|
+
const composedStyle = variant === "custom" && columns !== void 0 ? { ...style, ["--grid_columns"]: columns } : style;
|
|
2882
|
+
const Component = as ?? "div";
|
|
2883
|
+
const ctx = (0, import_react26.useMemo)(() => ({ autoSpanMedia }), [autoSpanMedia]);
|
|
2884
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Component, { ref, ...rest, className: classNames, style: composedStyle, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(GridContext.Provider, { value: ctx, children }) });
|
|
2885
|
+
}
|
|
2886
|
+
|
|
2887
|
+
// src/components/layout/Grid/GridItem.tsx
|
|
2888
|
+
var import_react27 = require("react");
|
|
2889
|
+
var import_design_system_foundation50 = require("@boostdev/design-system-foundation");
|
|
2890
|
+
|
|
2891
|
+
// src/components/layout/Grid/autoSpan.ts
|
|
2892
|
+
function aspectToColumnSpan(ratio) {
|
|
2893
|
+
if (!Number.isFinite(ratio) || ratio <= 0) return "one-quarter";
|
|
2894
|
+
if (ratio > 3.5) return "full";
|
|
2895
|
+
if (ratio > 2.2) return "three-quarters";
|
|
2896
|
+
if (ratio > 1.5) return "half";
|
|
2897
|
+
return "one-quarter";
|
|
2898
|
+
}
|
|
2899
|
+
function findMediaChild(root) {
|
|
2900
|
+
return root.querySelector("img, video");
|
|
2901
|
+
}
|
|
2902
|
+
function readMediaAspect(media) {
|
|
2903
|
+
if (media instanceof HTMLImageElement) {
|
|
2904
|
+
if (media.naturalWidth > 0 && media.naturalHeight > 0) {
|
|
2905
|
+
return media.naturalWidth / media.naturalHeight;
|
|
2906
|
+
}
|
|
2907
|
+
return null;
|
|
2908
|
+
}
|
|
2909
|
+
if (media.videoWidth > 0 && media.videoHeight > 0) {
|
|
2910
|
+
return media.videoWidth / media.videoHeight;
|
|
2911
|
+
}
|
|
2912
|
+
return null;
|
|
2913
|
+
}
|
|
2914
|
+
function mediaReadyEvent(media) {
|
|
2915
|
+
if (media instanceof HTMLImageElement) return media.complete ? null : "load";
|
|
2916
|
+
if (media.readyState < 1) return "loadedmetadata";
|
|
2917
|
+
return null;
|
|
2918
|
+
}
|
|
2919
|
+
|
|
2920
|
+
// src/components/layout/Grid/GridItem.tsx
|
|
2921
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
2922
|
+
var GridItemSpan = {
|
|
2923
|
+
full: "full",
|
|
2924
|
+
threeQuarters: "three-quarters",
|
|
2925
|
+
twoThirds: "two-thirds",
|
|
2926
|
+
half: "half",
|
|
2927
|
+
oneThird: "one-third",
|
|
2928
|
+
oneQuarter: "one-quarter",
|
|
2929
|
+
auto: "auto"
|
|
2930
|
+
};
|
|
2931
|
+
var SPAN_VAR = {
|
|
2932
|
+
full: "var(--bds-grid_span-100)",
|
|
2933
|
+
"three-quarters": "span var(--bds-grid_columns-75)",
|
|
2934
|
+
"two-thirds": "span var(--bds-grid_columns-66)",
|
|
2935
|
+
half: "span var(--bds-grid_columns-50)",
|
|
2936
|
+
"one-third": "span var(--bds-grid_columns-33)",
|
|
2937
|
+
"one-quarter": "span var(--bds-grid_columns-25)"
|
|
2938
|
+
};
|
|
2939
|
+
function resolveSpan(value) {
|
|
2940
|
+
if (typeof value === "number") return `span ${value}`;
|
|
2941
|
+
return SPAN_VAR[value];
|
|
2942
|
+
}
|
|
2943
|
+
function GridItem({
|
|
2944
|
+
children,
|
|
2945
|
+
className,
|
|
2946
|
+
columnSpan,
|
|
2947
|
+
rowSpan,
|
|
2948
|
+
startColumn,
|
|
2949
|
+
endColumn,
|
|
2950
|
+
as,
|
|
2951
|
+
style,
|
|
2952
|
+
...rest
|
|
2953
|
+
}) {
|
|
2954
|
+
const { autoSpanMedia } = (0, import_react27.useContext)(GridContext);
|
|
2955
|
+
const effectiveSpan = columnSpan ?? (autoSpanMedia ? "auto" : "full");
|
|
2956
|
+
const ref = (0, import_react27.useRef)(null);
|
|
2957
|
+
const [autoSpan, setAutoSpan] = (0, import_react27.useState)("one-quarter");
|
|
2958
|
+
(0, import_react27.useLayoutEffect)(() => {
|
|
2959
|
+
if (effectiveSpan !== "auto") return;
|
|
2960
|
+
const el = ref.current;
|
|
2961
|
+
if (!el) return;
|
|
2962
|
+
let cancelled = false;
|
|
2963
|
+
let cleanup;
|
|
2964
|
+
const resolve = () => {
|
|
2965
|
+
if (cancelled) return;
|
|
2966
|
+
const media = findMediaChild(el);
|
|
2967
|
+
if (!media) {
|
|
2968
|
+
setAutoSpan("one-quarter");
|
|
2969
|
+
return;
|
|
2970
|
+
}
|
|
2971
|
+
const aspect = readMediaAspect(media);
|
|
2972
|
+
if (aspect !== null) {
|
|
2973
|
+
setAutoSpan(aspectToColumnSpan(aspect));
|
|
2974
|
+
return;
|
|
2975
|
+
}
|
|
2976
|
+
const event = mediaReadyEvent(media);
|
|
2977
|
+
if (!event) {
|
|
2978
|
+
setAutoSpan("one-quarter");
|
|
2979
|
+
return;
|
|
2980
|
+
}
|
|
2981
|
+
const handler = () => {
|
|
2982
|
+
const a = readMediaAspect(media);
|
|
2983
|
+
if (a !== null) setAutoSpan(aspectToColumnSpan(a));
|
|
2984
|
+
};
|
|
2985
|
+
media.addEventListener(event, handler, { once: true });
|
|
2986
|
+
cleanup = () => media.removeEventListener(event, handler);
|
|
2987
|
+
};
|
|
2988
|
+
resolve();
|
|
2989
|
+
return () => {
|
|
2990
|
+
cancelled = true;
|
|
2991
|
+
cleanup?.();
|
|
2992
|
+
};
|
|
2993
|
+
}, [effectiveSpan, children]);
|
|
2994
|
+
const hasExplicitRange = startColumn !== void 0 || endColumn !== void 0;
|
|
2995
|
+
const gridColumn = hasExplicitRange ? `${startColumn ?? "auto"} / ${endColumn ?? "auto"}` : resolveSpan(effectiveSpan === "auto" ? autoSpan : effectiveSpan);
|
|
2996
|
+
const composedStyle = {
|
|
2997
|
+
...style,
|
|
2998
|
+
gridColumn,
|
|
2999
|
+
...rowSpan !== void 0 ? { gridRow: `span ${rowSpan}` } : {}
|
|
3000
|
+
};
|
|
3001
|
+
const Component = as ?? "div";
|
|
3002
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
3003
|
+
Component,
|
|
3004
|
+
{
|
|
3005
|
+
ref,
|
|
3006
|
+
...rest,
|
|
3007
|
+
className: (0, import_design_system_foundation50.cn)(Grid_default.item, className),
|
|
3008
|
+
style: composedStyle,
|
|
3009
|
+
children
|
|
3010
|
+
}
|
|
3011
|
+
);
|
|
3012
|
+
}
|
|
3013
|
+
|
|
3014
|
+
// src/components/layout/SectionHeader/SectionHeader.module.css
|
|
3015
|
+
var SectionHeader_default = {"component":"bds220SectionHeader-component","sectionHeader":"bds220SectionHeader-sectionHeader","title":"bds220SectionHeader-title","subtitle":"bds220SectionHeader-subtitle","--start":"bds220SectionHeader---start","--center":"bds220SectionHeader---center","--end":"bds220SectionHeader---end","--medium":"bds220SectionHeader---medium","--xs":"bds220SectionHeader---xs","--small":"bds220SectionHeader---small","--large":"bds220SectionHeader---large"};
|
|
3016
|
+
|
|
3017
|
+
// src/components/layout/SectionHeader/SectionHeader.tsx
|
|
3018
|
+
var import_design_system_foundation51 = require("@boostdev/design-system-foundation");
|
|
3019
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
2778
3020
|
function SectionHeader({
|
|
2779
3021
|
title,
|
|
2780
3022
|
subtitle,
|
|
@@ -2785,24 +3027,24 @@ function SectionHeader({
|
|
|
2785
3027
|
...rest
|
|
2786
3028
|
}) {
|
|
2787
3029
|
const Title = titleAs;
|
|
2788
|
-
return /* @__PURE__ */ (0,
|
|
2789
|
-
/* @__PURE__ */ (0,
|
|
2790
|
-
subtitle && /* @__PURE__ */ (0,
|
|
3030
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { ...rest, className: (0, import_design_system_foundation51.cn)(SectionHeader_default.sectionHeader, SectionHeader_default[`--${alignment}`], SectionHeader_default[`--${size}`], className), children: [
|
|
3031
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Title, { className: SectionHeader_default.title, children: title }),
|
|
3032
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: SectionHeader_default.subtitle, children: subtitle })
|
|
2791
3033
|
] });
|
|
2792
3034
|
}
|
|
2793
3035
|
|
|
2794
3036
|
// src/components/layout/IconWrapper/IconWrapper.module.css
|
|
2795
|
-
var IconWrapper_default = {"component":"
|
|
3037
|
+
var IconWrapper_default = {"component":"bds220IconWrapper-component","wrapper":"bds220IconWrapper-wrapper"};
|
|
2796
3038
|
|
|
2797
3039
|
// src/components/layout/IconWrapper/IconWrapper.tsx
|
|
2798
|
-
var
|
|
2799
|
-
var
|
|
3040
|
+
var import_design_system_foundation52 = require("@boostdev/design-system-foundation");
|
|
3041
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
2800
3042
|
function IconWrapper({ children, className, ...rest }) {
|
|
2801
|
-
return /* @__PURE__ */ (0,
|
|
3043
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ...rest, className: (0, import_design_system_foundation52.cn)(className, IconWrapper_default.wrapper), children });
|
|
2802
3044
|
}
|
|
2803
3045
|
|
|
2804
3046
|
// src/index.ts
|
|
2805
|
-
var
|
|
3047
|
+
var import_design_system_foundation53 = require("@boostdev/design-system-foundation");
|
|
2806
3048
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2807
3049
|
0 && (module.exports = {
|
|
2808
3050
|
Accordion,
|
|
@@ -2827,6 +3069,9 @@ var import_design_system_foundation51 = require("@boostdev/design-system-foundat
|
|
|
2827
3069
|
DropdownMenu,
|
|
2828
3070
|
FileInput,
|
|
2829
3071
|
FormInput,
|
|
3072
|
+
Grid,
|
|
3073
|
+
GridItem,
|
|
3074
|
+
GridItemSpan,
|
|
2830
3075
|
IconWrapper,
|
|
2831
3076
|
Link,
|
|
2832
3077
|
Loading,
|