@speakapbv/dough-component-library 9.30.0 → 9.31.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/progress-bar/progress-bar.d.ts +14 -0
- package/dist/components/texts/texts.d.ts +11 -7
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +251 -227
- package/dist/index.js +251 -226
- package/dist/src/components/progress-bar/progress-bar.stories.d.ts +3 -0
- package/dist/src/utils/styles.d.ts +3 -0
- package/package.json +4 -4
package/dist/index.es.js
CHANGED
|
@@ -857,7 +857,7 @@ var LayoutFlexBox = function (props) {
|
|
|
857
857
|
};
|
|
858
858
|
LayoutFlexBox.displayName = "LayoutFlexBox";
|
|
859
859
|
|
|
860
|
-
var css_248z$6 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-typo {\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5;\n box-sizing: border-box;\n margin: 0;\n user-select: text;\n position: relative;\n}\n.dough-typo.dough-text-nowrap {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dough-typo.dough-text-ellipsis {\n text-overflow: ellipsis;\n}\n.dough-typo.dough-text-align-left {\n text-align: left;\n}\n.dough-typo.dough-text-align-right {\n text-align: right;\n}\n.dough-typo.dough-text-align-center {\n text-align: center;\n}\n.dough-typo.dough-text-align-inherit {\n text-align: inherit;\n}\n.dough-typo.dough-text-align-justify {\n text-align: justify;\n}\n.dough-typo.dough-text {\n line-height: 1.3rem;\n}\n.dough-typo.dough-text-h1 {\n font-size: 1.625rem;\n line-height: 1.875rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h1 input[type=text],\n.dough-typo.dough-text-h1 .dough-fe-label {\n font-size: 1.625rem !important;\n font-weight: 700 !important;\n top: 0.40625rem;\n}\n.dough-typo.dough-text-h2 {\n font-size: 1.5rem;\n line-height: 1.75rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h2 input[type=text],\n.dough-typo.dough-text-h2 .dough-fe-label {\n font-size: 1.5rem !important;\n font-weight: 700 !important;\n top: 0.375rem;\n}\n.dough-typo.dough-text-h3 {\n font-size: 1.25rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h3 input[type=text],\n.dough-typo.dough-text-h3 .dough-fe-label {\n font-size: 1.25rem !important;\n font-weight: 700 !important;\n top: 0.3125rem;\n}\n.dough-typo.dough-text-h4 {\n font-size: 1.125rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h4 input[type=text],\n.dough-typo.dough-text-h4 .dough-fe-label {\n font-size: 1.125rem !important;\n font-weight: 700 !important;\n top: 0.28125rem;\n}\n.dough-typo.dough-text-h5 {\n font-size: 1rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h5 input[type=text],\n.dough-typo.dough-text-h5 .dough-fe-label {\n font-size: 1rem !important;\n font-weight: 700 !important;\n top: 0.25rem;\n}\n.dough-typo.dough-text-h6 {\n font-size: 0.875rem;\n line-height: 1.3rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h6 input[type=text],\n.dough-typo.dough-text-h6 .dough-fe-label {\n font-size: 0.875rem !important;\n font-weight: 700 !important;\n top: 0.21875rem;\n}\n.dough-typo.dough-text-h7 {\n font-size: 0.8125rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h7 input[type=text],\n.dough-typo.dough-text-h7 .dough-fe-label {\n font-size: 0.8125rem !important;\n font-weight: 700 !important;\n top: 0.203125rem;\n}\n.dough-typo.dough-text-subtitle {\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n box-sizing: border-box;\n font-weight: 400;\n font-size: 0.8125rem;\n line-height: 0.94rem;\n}\n.dough-typo.dough-text-subtitle:not([class*=dough-color-text]) {\n color: rgb(158, 158, 158);\n}\n.dough-typo.dough-text-paragraph, .dough-typo.dough-text-paragraph p {\n font-size: 0.875rem;\n}\n.dough-typo.dough-text-unordered-list {\n padding-left: 24px;\n}\n.dough-typo.dough-text-small, .dough-typo.dough-text-small * {\n line-height: 0.94rem;\n font-size: 0.8125rem;\n}\n.dough-typo.dough-text-xsmall, .dough-typo.dough-text-xsmall * {\n line-height: 0.8rem;\n font-size: 0.75rem;\n}\n.dough-typo.dough-text-tiny, .dough-typo.dough-text-tiny * {\n line-height: 0.6875rem;\n font-size: 0.6875rem;\n}\n.dough-typo.dough-text-italic {\n font-style: italic;\n}\n.dough-typo.dough-text-strong, .dough-typo.dough-text-strong * {\n font-weight: 700;\n}\n.dough-typo.dough-text-underlined {\n text-decoration: underline;\n}\n.dough-typo.dough-text-strikethrough {\n text-decoration: line-through;\n}";
|
|
860
|
+
var css_248z$6 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-typo {\n font-family: \"Roboto\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5;\n box-sizing: border-box;\n margin: 0;\n user-select: text;\n position: relative;\n}\n.dough-typo.dough-text-nowrap {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dough-typo.dough-text-ellipsis {\n text-overflow: ellipsis;\n}\n.dough-typo.dough-text-align-left {\n text-align: left;\n}\n.dough-typo.dough-text-align-right {\n text-align: right;\n}\n.dough-typo.dough-text-align-center {\n text-align: center;\n}\n.dough-typo.dough-text-align-inherit {\n text-align: inherit;\n}\n.dough-typo.dough-text-align-justify {\n text-align: justify;\n}\n.dough-typo.dough-text {\n line-height: 1.3rem;\n}\n.dough-typo.dough-text-h1 {\n font-size: 1.625rem;\n line-height: 1.875rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h1 input[type=text],\n.dough-typo.dough-text-h1 .dough-fe-label {\n font-size: 1.625rem !important;\n font-weight: 700 !important;\n top: 0.40625rem;\n}\n.dough-typo.dough-text-h1.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h2 {\n font-size: 1.5rem;\n line-height: 1.75rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h2 input[type=text],\n.dough-typo.dough-text-h2 .dough-fe-label {\n font-size: 1.5rem !important;\n font-weight: 700 !important;\n top: 0.375rem;\n}\n.dough-typo.dough-text-h2.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h3 {\n font-size: 1.25rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h3 input[type=text],\n.dough-typo.dough-text-h3 .dough-fe-label {\n font-size: 1.25rem !important;\n font-weight: 700 !important;\n top: 0.3125rem;\n}\n.dough-typo.dough-text-h3.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h4 {\n font-size: 1.125rem;\n line-height: 1.5rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h4 input[type=text],\n.dough-typo.dough-text-h4 .dough-fe-label {\n font-size: 1.125rem !important;\n font-weight: 700 !important;\n top: 0.28125rem;\n}\n.dough-typo.dough-text-h4.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h5 {\n font-size: 1rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h5 input[type=text],\n.dough-typo.dough-text-h5 .dough-fe-label {\n font-size: 1rem !important;\n font-weight: 700 !important;\n top: 0.25rem;\n}\n.dough-typo.dough-text-h5.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h6 {\n font-size: 0.875rem;\n line-height: 1.3rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h6 input[type=text],\n.dough-typo.dough-text-h6 .dough-fe-label {\n font-size: 0.875rem !important;\n font-weight: 700 !important;\n top: 0.21875rem;\n}\n.dough-typo.dough-text-h6.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-h7 {\n font-size: 0.8125rem;\n line-height: 1.175rem;\n font-weight: 700;\n min-width: 100%;\n display: block;\n}\n.dough-typo.dough-text-h7 input[type=text],\n.dough-typo.dough-text-h7 .dough-fe-label {\n font-size: 0.8125rem !important;\n font-weight: 700 !important;\n top: 0.203125rem;\n}\n.dough-typo.dough-text-h7.dough-header-regular {\n font-weight: 400;\n}\n.dough-typo.dough-text-subtitle {\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n box-sizing: border-box;\n font-weight: 400;\n font-size: 0.8125rem;\n line-height: 0.94rem;\n}\n.dough-typo.dough-text-subtitle:not([class*=dough-color-text]) {\n color: rgb(158, 158, 158);\n}\n.dough-typo.dough-text-paragraph, .dough-typo.dough-text-paragraph p {\n font-size: 0.875rem;\n}\n.dough-typo.dough-text-unordered-list {\n padding-left: 24px;\n}\n.dough-typo.dough-text-small, .dough-typo.dough-text-small * {\n line-height: 0.94rem;\n font-size: 0.8125rem;\n}\n.dough-typo.dough-text-xsmall, .dough-typo.dough-text-xsmall * {\n line-height: 0.8rem;\n font-size: 0.75rem;\n}\n.dough-typo.dough-text-tiny, .dough-typo.dough-text-tiny * {\n line-height: 0.6875rem;\n font-size: 0.6875rem;\n}\n.dough-typo.dough-text-italic {\n font-style: italic;\n}\n.dough-typo.dough-text-strong, .dough-typo.dough-text-strong * {\n font-weight: 700;\n}\n.dough-typo.dough-text-underlined {\n text-decoration: underline;\n}\n.dough-typo.dough-text-strikethrough {\n text-decoration: line-through;\n}";
|
|
861
861
|
styleInject(css_248z$6);
|
|
862
862
|
|
|
863
863
|
var TextAlignment;
|
|
@@ -882,19 +882,22 @@ var TextElement = function (props) {
|
|
|
882
882
|
"dough-text-tiny": props.tiny,
|
|
883
883
|
}) }, props.dataAttributes), props.children);
|
|
884
884
|
};
|
|
885
|
-
var
|
|
885
|
+
var HeaderElement = function (props) { return (React.createElement(TextElement, __assign({}, props, { className: cn(props.className, {
|
|
886
|
+
"dough-header-regular": props.regular,
|
|
887
|
+
}) }))); };
|
|
888
|
+
var H1 = function (props) { return (React.createElement(HeaderElement, __assign({}, props, { className: cn(props.className, "dough-text-h1"), component: props.component ? props.component : "h1" }))); };
|
|
886
889
|
H1.displayName = "H1";
|
|
887
|
-
var H2 = function (props) { return (React.createElement(
|
|
890
|
+
var H2 = function (props) { return (React.createElement(HeaderElement, __assign({}, props, { className: cn(props.className, "dough-text-h2"), component: props.component ? props.component : "h2" }))); };
|
|
888
891
|
H2.displayName = "H2";
|
|
889
|
-
var H3 = function (props) { return (React.createElement(
|
|
892
|
+
var H3 = function (props) { return (React.createElement(HeaderElement, __assign({}, props, { className: cn(props.className, "dough-text-h3"), component: props.component ? props.component : "h3" }))); };
|
|
890
893
|
H3.displayName = "H3";
|
|
891
|
-
var H4 = function (props) { return (React.createElement(
|
|
894
|
+
var H4 = function (props) { return (React.createElement(HeaderElement, __assign({}, props, { className: cn(props.className, "dough-text-h4"), component: props.component ? props.component : "h4" }))); };
|
|
892
895
|
H4.displayName = "H4";
|
|
893
|
-
var H5 = function (props) { return (React.createElement(
|
|
896
|
+
var H5 = function (props) { return (React.createElement(HeaderElement, __assign({}, props, { className: cn(props.className, "dough-text-h5"), component: props.component ? props.component : "h5" }))); };
|
|
894
897
|
H5.displayName = "H5";
|
|
895
|
-
var H6 = function (props) { return (React.createElement(
|
|
898
|
+
var H6 = function (props) { return (React.createElement(HeaderElement, __assign({}, props, { className: cn(props.className, "dough-text-h6"), component: props.component ? props.component : "h6" }))); };
|
|
896
899
|
H6.displayName = "H6";
|
|
897
|
-
var H7 = function (props) { return (React.createElement(
|
|
900
|
+
var H7 = function (props) { return (React.createElement(HeaderElement, __assign({}, props, { className: cn(props.className, "dough-text-h7"), component: props.component ? props.component : "span" }))); };
|
|
898
901
|
H7.displayName = "H7";
|
|
899
902
|
var Subtitle = function (props) { return (React.createElement(TextElement, __assign({}, props, { className: cn(props.className, "dough-text-subtitle"), component: props.component ? props.component : "span" }))); };
|
|
900
903
|
Subtitle.displayName = "Subtitle";
|
|
@@ -4503,9 +4506,215 @@ var PanelOverlay = function (props) {
|
|
|
4503
4506
|
};
|
|
4504
4507
|
PanelOverlay.displayName = "PanelOverlay";
|
|
4505
4508
|
|
|
4506
|
-
var css_248z$x = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-
|
|
4509
|
+
var css_248z$x = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-progress-bar {\n height: 4px;\n width: 100%;\n border-radius: 4px;\n position: relative;\n}\n\n.dough-progress-bar__progress {\n position: absolute;\n height: 100%;\n border-radius: 4px;\n z-index: 1;\n}";
|
|
4507
4510
|
styleInject(css_248z$x);
|
|
4508
4511
|
|
|
4512
|
+
var DesignTokens = {
|
|
4513
|
+
colors: {
|
|
4514
|
+
colorWhite: "#ffffff",
|
|
4515
|
+
colorBackdropDark: "rgba(0,0,0,0.8)",
|
|
4516
|
+
colorBackdrop: "rgba(0,0,0,0.4)",
|
|
4517
|
+
colorGrey6: "#f5f5f5",
|
|
4518
|
+
colorGrey5: "#e6e6e6",
|
|
4519
|
+
colorGrey4: "#d2d2d2",
|
|
4520
|
+
colorGrey3: "#9f9f9f",
|
|
4521
|
+
colorGrey2: "#696969",
|
|
4522
|
+
colorGrey1: "#444444",
|
|
4523
|
+
colorStatusWarningLight: "#ffefdd",
|
|
4524
|
+
colorStatusWarning: "#ff8800",
|
|
4525
|
+
colorStatusSuccess: "#008800",
|
|
4526
|
+
colorStatusDanger: "#bf2900",
|
|
4527
|
+
colorBrandButton: "#47aa3c",
|
|
4528
|
+
colorBrandButtonHover: "#39942f",
|
|
4529
|
+
colorBrandButtonClick: "#2a7f20",
|
|
4530
|
+
colorBrandHeaderLight: "#5ea2e9",
|
|
4531
|
+
colorBrandHeader: "#4484c7",
|
|
4532
|
+
colorBrandHeaderDark: "#2f659f",
|
|
4533
|
+
colorLike: "#F24025",
|
|
4534
|
+
},
|
|
4535
|
+
fixedColors: {
|
|
4536
|
+
colorSelector1: "#fa4b34",
|
|
4537
|
+
colorSelector2: "#ffa822",
|
|
4538
|
+
colorSelector3: "#0091ff",
|
|
4539
|
+
colorSelector4: "#14cad7",
|
|
4540
|
+
colorSelector5: "#8f00ff",
|
|
4541
|
+
},
|
|
4542
|
+
textColors: {
|
|
4543
|
+
colorTextWarning: "#bf2900",
|
|
4544
|
+
colorTextSuccess: "#008800",
|
|
4545
|
+
colorTextDanger: "#bf2900",
|
|
4546
|
+
colorTextBrandLink: "#4484c7",
|
|
4547
|
+
colorTextWhite: "#ffffff",
|
|
4548
|
+
colorTextLight: "#9e9e9e",
|
|
4549
|
+
colorTextDefault: "#6e6f75",
|
|
4550
|
+
colorTextDark: "#444444",
|
|
4551
|
+
colorIconWhite: "#ffffff",
|
|
4552
|
+
colorIconPrimary: "#4484c7",
|
|
4553
|
+
colorIconDefault: "#999999",
|
|
4554
|
+
},
|
|
4555
|
+
typography: {
|
|
4556
|
+
textSmall: "0.8125rem",
|
|
4557
|
+
textBase: "0.875rem",
|
|
4558
|
+
textH5: "1rem",
|
|
4559
|
+
textH4: "1.125rem",
|
|
4560
|
+
textH3: "1.25rem",
|
|
4561
|
+
textH2: "1.5rem",
|
|
4562
|
+
textH1: "1.625rem",
|
|
4563
|
+
textTiny: "0.6875rem",
|
|
4564
|
+
lineHeightHeading: "1.25",
|
|
4565
|
+
lineHeightBody: "1.5",
|
|
4566
|
+
lineHeightReset: "1",
|
|
4567
|
+
fontWeightRegular: "400",
|
|
4568
|
+
fontWeightBold: "700",
|
|
4569
|
+
fontFamilyBase: "Roboto",
|
|
4570
|
+
},
|
|
4571
|
+
spacing: {
|
|
4572
|
+
spacerHalf: "4px",
|
|
4573
|
+
spacer1: "8px",
|
|
4574
|
+
spacer2: "16px",
|
|
4575
|
+
spacer3: "24px",
|
|
4576
|
+
spacer4: "32px",
|
|
4577
|
+
spacer5: "40px",
|
|
4578
|
+
spacer6: "48px",
|
|
4579
|
+
},
|
|
4580
|
+
borders: {
|
|
4581
|
+
borderSolidWhite3: "3px solid #ffffff",
|
|
4582
|
+
borderSolidWhite2: "2px solid #ffffff",
|
|
4583
|
+
borderSolidWhite1: "1px solid #ffffff",
|
|
4584
|
+
borderDottedLight3: "3px dashed #ededed",
|
|
4585
|
+
borderSolidLight3: "3px solid #ededed",
|
|
4586
|
+
borderDottedLight2: "2px dashed #ededed",
|
|
4587
|
+
borderSolidLight2: "2px solid #ededed",
|
|
4588
|
+
borderDottedLight1: "1px dashed #ededed",
|
|
4589
|
+
borderSolidLight1: "1px solid #ededed",
|
|
4590
|
+
},
|
|
4591
|
+
shadows: {
|
|
4592
|
+
boxShadowDropdown: "0 2px 20px 0 rgba(0,0,0,0.1)",
|
|
4593
|
+
boxShadowNotify: "0 1px 15px 0 rgba(0,0,0,0.2)",
|
|
4594
|
+
boxShadowCard: "0 1px 1px 0 rgba(0,0,0,0.1)",
|
|
4595
|
+
boxShadowButton: "0 1px 3px 0 rgba(0,0,0,0.2)",
|
|
4596
|
+
},
|
|
4597
|
+
sizes: {
|
|
4598
|
+
sizeDialogSmall: "464px",
|
|
4599
|
+
sizeDialogMedium: "768px",
|
|
4600
|
+
sizeDialogLarge: "1024px",
|
|
4601
|
+
sizeViewportExtraLarge: "1200px",
|
|
4602
|
+
sizeViewportLarge: "1080px",
|
|
4603
|
+
sizeViewportMedium: "768px",
|
|
4604
|
+
sizeViewportSmall: "576px",
|
|
4605
|
+
sizeHeaderHeight: "56px",
|
|
4606
|
+
sizeAvatarXs: "24px",
|
|
4607
|
+
sizeAvatarS: "32px",
|
|
4608
|
+
sizeAvatarM: "40px",
|
|
4609
|
+
sizeAvatarL: "80px",
|
|
4610
|
+
sizeAvatarXl: "120px",
|
|
4611
|
+
},
|
|
4612
|
+
};
|
|
4613
|
+
|
|
4614
|
+
var _a;
|
|
4615
|
+
var IE11SpecificCases = {
|
|
4616
|
+
flex: function (value) { return value + " " + value + " auto"; },
|
|
4617
|
+
};
|
|
4618
|
+
var MediaQueryDevices;
|
|
4619
|
+
(function (MediaQueryDevices) {
|
|
4620
|
+
MediaQueryDevices["MOBILE"] = "mobile";
|
|
4621
|
+
MediaQueryDevices["TABLETPORTRAIT"] = "tabletPortrait";
|
|
4622
|
+
MediaQueryDevices["TABLETLANDSCAPE"] = "tabletLandscape";
|
|
4623
|
+
MediaQueryDevices["DESKTOP"] = "desktop";
|
|
4624
|
+
})(MediaQueryDevices || (MediaQueryDevices = {}));
|
|
4625
|
+
var enumToStyleValueMap = (_a = {},
|
|
4626
|
+
_a[Sizes.XXS] = DesignTokens.spacing.spacerHalf,
|
|
4627
|
+
_a[Sizes.XS] = DesignTokens.spacing.spacer1,
|
|
4628
|
+
_a[Sizes.SMALL] = DesignTokens.spacing.spacer2,
|
|
4629
|
+
_a[Sizes.NORMAL] = DesignTokens.spacing.spacer3,
|
|
4630
|
+
_a[Sizes.LARGE] = DesignTokens.spacing.spacer4,
|
|
4631
|
+
_a[Sizes.XL] = DesignTokens.spacing.spacer5,
|
|
4632
|
+
_a[Sizes.XXL] = DesignTokens.spacing.spacer6,
|
|
4633
|
+
_a);
|
|
4634
|
+
var getStyleValue = function (styleValue) {
|
|
4635
|
+
if (enumToStyleValueMap[styleValue] === undefined) {
|
|
4636
|
+
return styleValue;
|
|
4637
|
+
}
|
|
4638
|
+
return enumToStyleValueMap[styleValue];
|
|
4639
|
+
};
|
|
4640
|
+
var getMediaQueryStyles = function (props, propToStyleMap, deviceType) {
|
|
4641
|
+
var mediaQueryStyles = "";
|
|
4642
|
+
Object.keys(propToStyleMap).forEach(function (propKey) {
|
|
4643
|
+
if (deviceType &&
|
|
4644
|
+
typeof props[propKey] === "object" &&
|
|
4645
|
+
props[propKey][deviceType] !== undefined) {
|
|
4646
|
+
mediaQueryStyles += "\n " + propToStyleMap[propKey]
|
|
4647
|
+
.map(function (styleAttr) {
|
|
4648
|
+
return styleAttr + ": " + getStyleValue(props[propKey][deviceType]) + ";";
|
|
4649
|
+
})
|
|
4650
|
+
.join("") + "\n ";
|
|
4651
|
+
}
|
|
4652
|
+
else if (deviceType === undefined &&
|
|
4653
|
+
typeof props[propKey] === "string") {
|
|
4654
|
+
mediaQueryStyles += "\n " + propToStyleMap[propKey]
|
|
4655
|
+
.map(function (styleAttr) {
|
|
4656
|
+
return styleAttr + ": " + getStyleValue(props[propKey]) + ";";
|
|
4657
|
+
})
|
|
4658
|
+
.join("") + "\n ";
|
|
4659
|
+
}
|
|
4660
|
+
});
|
|
4661
|
+
return mediaQueryStyles;
|
|
4662
|
+
};
|
|
4663
|
+
var getIESpecificStyles = function (props, propToStyleMap) {
|
|
4664
|
+
var IE11Styles = "";
|
|
4665
|
+
Object.keys(propToStyleMap).forEach(function (propKey) {
|
|
4666
|
+
IE11Styles += "\n " + propToStyleMap[propKey]
|
|
4667
|
+
.map(function (styleAttr) {
|
|
4668
|
+
if (IE11SpecificCases[styleAttr]) {
|
|
4669
|
+
return styleAttr + ": " + IE11SpecificCases[styleAttr](getStyleValue(props[propKey])) + ";";
|
|
4670
|
+
}
|
|
4671
|
+
return "";
|
|
4672
|
+
})
|
|
4673
|
+
.join("") + "\n ";
|
|
4674
|
+
});
|
|
4675
|
+
return IE11Styles;
|
|
4676
|
+
};
|
|
4677
|
+
var generateStyles = function (props, selector, propToStyleMap, noMediaQuery) {
|
|
4678
|
+
var elementMainStyles = "";
|
|
4679
|
+
var mainStyleProps = getMediaQueryStyles(props, propToStyleMap);
|
|
4680
|
+
if (mainStyleProps.trim() !== "") {
|
|
4681
|
+
elementMainStyles = "\n " + selector + " {\n " + mainStyleProps + "\n }\n ";
|
|
4682
|
+
if (!!window.MSInputMethodContext && !!document.documentMode) {
|
|
4683
|
+
var ie11Styles = getIESpecificStyles(props, propToStyleMap);
|
|
4684
|
+
if (ie11Styles.trim() !== "") {
|
|
4685
|
+
elementMainStyles += "\n html.dough-IE11 " + selector + " {\n " + mainStyleProps + "\n }\n ";
|
|
4686
|
+
}
|
|
4687
|
+
}
|
|
4688
|
+
}
|
|
4689
|
+
if (!noMediaQuery) {
|
|
4690
|
+
elementMainStyles += "\n @media (min-width: 0px) and (max-width: " + DesignTokens.sizes.sizeViewportSmall + ") {\n " + selector + " {\n " + getMediaQueryStyles(props, propToStyleMap, MediaQueryDevices.MOBILE) + "\n }\n }\n @media (min-width: " + (parseFloat(DesignTokens.sizes.sizeViewportSmall) +
|
|
4691
|
+
1) + "px) and (max-width: " + DesignTokens.sizes.sizeViewportMedium + ") {\n " + selector + " {\n " + getMediaQueryStyles(props, propToStyleMap, MediaQueryDevices.TABLETPORTRAIT) + "\n }\n }\n @media (min-width: " + (parseFloat(DesignTokens.sizes.sizeViewportMedium) +
|
|
4692
|
+
1) + "px) and (max-width: " + DesignTokens.sizes.sizeViewportLarge + ") {\n " + selector + " {\n " + getMediaQueryStyles(props, propToStyleMap, MediaQueryDevices.TABLETLANDSCAPE) + "\n }\n }\n @media (min-width: " + DesignTokens.sizes.sizeViewportLarge + ") {\n " + selector + " {\n " + getMediaQueryStyles(props, propToStyleMap, MediaQueryDevices.DESKTOP) + "\n }\n }";
|
|
4693
|
+
}
|
|
4694
|
+
return elementMainStyles;
|
|
4695
|
+
};
|
|
4696
|
+
var isStandardColor = function (color) {
|
|
4697
|
+
return Object.values(Colors).includes(color);
|
|
4698
|
+
};
|
|
4699
|
+
var getColorWithFallback = function (color) {
|
|
4700
|
+
return isStandardColor(color) ? "var(--" + color + ")" : color;
|
|
4701
|
+
};
|
|
4702
|
+
|
|
4703
|
+
var ProgressBar = function (_a) {
|
|
4704
|
+
var total = _a.total, completed = _a.completed, _b = _a.railColor, railColor = _b === void 0 ? "#EDEDED" : _b, _c = _a.barColor, barColor = _c === void 0 ? Colors.SUCCESS : _c, dataAttributes = _a.dataAttributes, className = _a.className;
|
|
4705
|
+
return (React.createElement("div", __assign({ className: cn("dough-progress-bar", className) }, dataAttributes, { style: {
|
|
4706
|
+
backgroundColor: getColorWithFallback(railColor),
|
|
4707
|
+
} }),
|
|
4708
|
+
React.createElement("div", { className: "dough-progress-bar__progress", style: {
|
|
4709
|
+
backgroundColor: getColorWithFallback(barColor),
|
|
4710
|
+
width: "calc(" + (completed > total ? total : completed) + " / " + total + " * 100%)",
|
|
4711
|
+
} })));
|
|
4712
|
+
};
|
|
4713
|
+
ProgressBar.displayName = "ProgressBar";
|
|
4714
|
+
|
|
4715
|
+
var css_248z$y = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-alert-textbox {\n font-family: \"Roboto\", sans-serif;\n display: block;\n width: 100%;\n position: relative;\n padding: 16px 24px 16px 28px;\n border-radius: 12px;\n box-sizing: border-box;\n}\n.dough-alert-textbox > .before {\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 3;\n width: auto;\n height: auto;\n opacity: 0.05;\n border-radius: 12px;\n}\n.dough-alert-textbox > .after {\n border-radius: 12px;\n position: absolute;\n top: 8px;\n bottom: 8px;\n left: 8px;\n z-index: 5;\n width: 4px;\n height: auto;\n}\n.dough-alert-textbox > .dough-alert-textbox-title {\n margin-bottom: 4px;\n}\n.dough-alert-textbox.dough-alert-status-neutral > .before,\n.dough-alert-textbox.dough-alert-status-neutral > .after {\n background-color: rgb(68, 132, 199);\n background-color: var(--dough-color-primary);\n}\n.dough-alert-textbox.dough-alert-status-success > .before,\n.dough-alert-textbox.dough-alert-status-success > .after {\n background-color: rgb(0, 136, 0);\n background-color: var(--dough-color-status-success);\n}\n.dough-alert-textbox.dough-alert-status-warning > .before,\n.dough-alert-textbox.dough-alert-status-warning > .after {\n background-color: rgb(255, 136, 0);\n background-color: var(--dough-color-status-warning);\n}\n.dough-alert-textbox.dough-alert-status-error > .before,\n.dough-alert-textbox.dough-alert-status-error > .after {\n background-color: rgb(191, 41, 0);\n background-color: var(--dough-color-status-danger);\n}";
|
|
4716
|
+
styleInject(css_248z$y);
|
|
4717
|
+
|
|
4509
4718
|
var AlertText = function (props) {
|
|
4510
4719
|
var _a = props.type, type = _a === void 0 ? AlertStatus.NEUTRAL : _a;
|
|
4511
4720
|
return (React.createElement("div", __assign({ className: cn(props.className, Colors.THEME, "dough-alert-textbox", "dough-alert-status-" + type) }, props.dataAttributes),
|
|
@@ -4516,8 +4725,8 @@ var AlertText = function (props) {
|
|
|
4516
4725
|
};
|
|
4517
4726
|
AlertText.displayName = "AlertText";
|
|
4518
4727
|
|
|
4519
|
-
var css_248z$
|
|
4520
|
-
styleInject(css_248z$
|
|
4728
|
+
var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-notification-wrapper {\n pointer-events: all;\n width: 100%;\n margin-bottom: 8px;\n position: relative;\n opacity: 0;\n transform: translate3d(0, 16px, 0);\n transform-origin: top center;\n font-family: \"Roboto\", sans-serif;\n border-radius: 12px;\n}\nbody:not(.no-transition) .dough-notification-wrapper {\n transition: all 1000ms cubic-bezier(0.25, 1.3, 0, 1);\n}\nbody.no-transition .dough-notification-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-notification-wrapper.dough-notification-clickable {\n cursor: pointer;\n}\n.dough-notification-wrapper.dough-notification-show {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n pointer-events: fill;\n}\n.dough-notification-wrapper > .dough-notification-close-button {\n position: absolute;\n top: 4px;\n right: 4px;\n width: auto;\n height: auto;\n}\n.dough-notification-wrapper > .dough-notification-close-button > .dough-button {\n width: 24px;\n height: 24px;\n min-width: 24px;\n min-height: 24px;\n}\n.dough-notification-wrapper .dough-notification-card {\n box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-notification-wrapper.dough-notification-as-toast {\n text-align: center;\n}\n.dough-notification-wrapper.dough-notification-as-toast .dough-notification-card {\n display: inline-block;\n width: auto !important;\n background-color: rgba(0, 0, 0, 0.75) !important;\n}\n.dough-notification-wrapper.dough-notification-as-toast .dough-notification-card .dough-notification-content-container {\n padding-right: 0;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper {\n width: 24px;\n height: 24px;\n box-sizing: border-box;\n border-radius: 100%;\n border: 2px solid transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper > .dough-inline-svg-icon {\n width: 70%;\n height: 70%;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-neutral {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-primary);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-neutral > .dough-inline-svg-icon path {\n fill: rgb(68, 132, 199);\n fill: var(--dough-color-primary);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-success {\n border-color: rgb(0, 136, 0);\n border-color: var(--dough-color-status-success);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-success > .dough-inline-svg-icon path {\n fill: rgb(0, 136, 0);\n fill: var(--dough-color-status-success);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-warning {\n border-color: rgb(255, 136, 0);\n border-color: var(--dough-color-status-warning);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-warning > .dough-inline-svg-icon path {\n fill: rgb(255, 136, 0);\n fill: var(--dough-color-status-warning);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-error {\n border-color: rgb(191, 41, 0);\n border-color: var(--dough-color-status-danger);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-error > .dough-inline-svg-icon path {\n fill: rgb(191, 41, 0);\n fill: var(--dough-color-status-danger);\n}\n.dough-notification-wrapper .dough-notification-title-container,\n.dough-notification-wrapper .dough-notification-content-container {\n padding-right: 12px;\n}";
|
|
4729
|
+
styleInject(css_248z$z);
|
|
4521
4730
|
|
|
4522
4731
|
var Notification = function (props) {
|
|
4523
4732
|
var _a = props.show, show = _a === void 0 ? true : _a, _b = props.horizontalAlignSelf, horizontalAlignSelf = _b === void 0 ? HorizontalAlignment.RIGHT : _b, _c = props.verticalAlignSelf, verticalAlignSelf = _c === void 0 ? VerticalAlignment.TOP : _c, _d = props.type, type = _d === void 0 ? AlertStatus.NEUTRAL : _d, _e = props.duration, duration = _e === void 0 ? -1 : _e;
|
|
@@ -4614,8 +4823,8 @@ var Notification = function (props) {
|
|
|
4614
4823
|
};
|
|
4615
4824
|
Notification.displayName = "Notification";
|
|
4616
4825
|
|
|
4617
|
-
var css_248z$
|
|
4618
|
-
styleInject(css_248z$
|
|
4826
|
+
var css_248z$A = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tab-item-selection-border {\n position: absolute;\n right: 0;\n left: 0;\n z-index: 5;\n width: auto;\n height: 4px;\n border-radius: 12px;\n transform: translate3d(0, 0, 0);\n opacity: 1;\n}\n.dough-tab-item-selection-border.dough-tabs-container-top-border {\n top: 1px;\n}\n.dough-tab-item-selection-border:not(.dough-tabs-container-top-border) {\n bottom: 1px;\n}\nbody:not(.no-transition) .dough-tab-item-selection-border {\n transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tab-item-selection-border {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n\n.dough-tab-item-button {\n width: 100% !important;\n height: 100% !important;\n min-width: 40px;\n color: rgb(158, 158, 158);\n color: var(--dough-color-text-light);\n cursor: pointer;\n font-size: 0.75rem;\n font-weight: 700;\n font-family: \"Roboto\", sans-serif;\n line-height: 1.5;\n}\n.dough-tab-item-button .dough-box {\n max-height: 60px;\n min-height: 60px;\n}\n.dough-tab-item-button.dough-item-small .dough-box {\n max-height: 40px;\n min-height: 40px;\n}\n\n.dough-tab-item {\n padding: 0 !important;\n overflow: hidden;\n position: relative;\n height: 100%;\n}\nbody:not(.no-transition) .dough-tab-item {\n transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tab-item {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-tab-item.dough-tab-item-stretch-tabs {\n flex-grow: 1;\n}\n.dough-tab-item .dough-tab-item-selection-border {\n opacity: 0;\n}\n.dough-tab-item:hover .dough-tab-item-button {\n color: rgb(68, 68, 68);\n color: var(--dough-color-text-dark);\n}\n.dough-tab-item:hover .dough-tab-item-selection-border.dough-tab-item-selection-border-hover {\n opacity: 0.25;\n}\n.dough-tab-item.active .dough-tab-item-button {\n color: rgb(68, 68, 68);\n color: var(--dough-color-text-dark);\n}\n\n.dough-tabs-container {\n position: relative;\n flex-flow: row nowrap !important;\n align-items: stretch !important;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n margin-bottom: -1px;\n}\n.dough-tabs-container.dough-tabs-container-divider {\n border-top: 1px solid rgb(230, 230, 230);\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-top-border {\n border-top: 1px solid var(--dough-color-gray-5);\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-bottom-border {\n border-bottom: 1px solid var(--dough-color-gray-5);\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item + .dough-tab-item {\n margin-left: 16px;\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item-button {\n padding-bottom: 16px;\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item-button .dough-box {\n max-height: unset;\n min-height: 0;\n}\n.dough-tabs-container.dough-tabs-container-compact.dough-tabs-container-top-border .dough-tab-item.dough-tab-item-compact .dough-tab-item-button {\n padding-bottom: 0;\n padding-top: 16px;\n}";
|
|
4827
|
+
styleInject(css_248z$A);
|
|
4619
4828
|
|
|
4620
4829
|
var simplifyKey = function (key) {
|
|
4621
4830
|
return key ? key.slice(key.indexOf("$") + 1) : key;
|
|
@@ -4684,8 +4893,8 @@ var TabsContainer = function (props) {
|
|
|
4684
4893
|
};
|
|
4685
4894
|
TabsContainer.displayName = "TabsContainer";
|
|
4686
4895
|
|
|
4687
|
-
var css_248z$
|
|
4688
|
-
styleInject(css_248z$
|
|
4896
|
+
var css_248z$B = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-collapser-container {\n display: block;\n width: 100%;\n box-sizing: border-box;\n font-family: \"Roboto\", sans-serif;\n}\n.dough-collapser-container > .dough-collapser-title {\n cursor: pointer;\n user-select: none;\n}\n.dough-collapser-container > .dough-collapser-title * {\n user-select: none;\n}\n.dough-collapser-container > .dough-collapser-title .arrow-icon-container {\n width: 16px;\n height: 16px;\n text-align: center;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n}\n.dough-collapser-container > .dough-collapser-title .arrow-icon-container .dough-inline-svg-icon {\n width: 0.875em;\n display: inline-block;\n font-size: inherit;\n height: 1em;\n overflow: visible;\n vertical-align: -0.125em;\n}\n.dough-collapser-container > .dough-collapser-title .arrow-icon-container .dough-inline-svg-icon > path {\n fill: rgb(159, 159, 159);\n}\n.dough-collapser-container > .dough-collapser-content .dough-collapser-content-inner {\n display: block;\n width: 100%;\n box-sizing: border-box;\n opacity: 1;\n overflow: hidden;\n}\nbody:not(.no-transition) .dough-collapser-container > .dough-collapser-content .dough-collapser-content-inner {\n transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-collapser-container > .dough-collapser-content .dough-collapser-content-inner {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-collapser-container > .dough-collapser-content .dough-collapser-content-inner.dough-collapser-content-collapsed {\n opacity: 0;\n}";
|
|
4897
|
+
styleInject(css_248z$B);
|
|
4689
4898
|
|
|
4690
4899
|
var Collapser = function (props) {
|
|
4691
4900
|
var _a = props.folded, folded = _a === void 0 ? true : _a, _b = props.guidingIcon, guidingIcon = _b === void 0 ? true : _b;
|
|
@@ -4751,8 +4960,8 @@ var Collapser = function (props) {
|
|
|
4751
4960
|
};
|
|
4752
4961
|
Collapser.displayName = "Collapser";
|
|
4753
4962
|
|
|
4754
|
-
var css_248z$
|
|
4755
|
-
styleInject(css_248z$
|
|
4963
|
+
var css_248z$C = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-color-tile {\n border-radius: 4px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.dough-color-tile.dough-color-tile-size-small {\n width: 24px;\n height: 24px;\n}\n.dough-color-tile.dough-color-tile-size-normal {\n width: 32px;\n height: 32px;\n}\n.dough-color-tile.dough-color-tile-size-large {\n width: 40px;\n height: 40px;\n}\n.dough-color-tile.dough-color-tile-size-extra-large {\n width: 48px;\n height: 48px;\n}";
|
|
4964
|
+
styleInject(css_248z$C);
|
|
4756
4965
|
|
|
4757
4966
|
var ColorTile = forwardRef(function (_a, ref) {
|
|
4758
4967
|
var className = _a.className, dataAttributes = _a.dataAttributes, color = _a.color, size = _a.size, absoluteColor = _a.absoluteColor, children = _a.children;
|
|
@@ -4770,8 +4979,8 @@ var ColorTile = forwardRef(function (_a, ref) {
|
|
|
4770
4979
|
});
|
|
4771
4980
|
ColorTile.displayName = "ColorTile";
|
|
4772
4981
|
|
|
4773
|
-
var css_248z$
|
|
4774
|
-
styleInject(css_248z$
|
|
4982
|
+
var css_248z$D = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-steps-indicator {\n display: inline-flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n overflow: hidden;\n}\n.dough-steps-indicator.dough-steps-indicator-full-width {\n display: flex;\n width: 100%;\n padding: 8px;\n}\n.dough-steps-indicator > .dough-steps-indicator-step {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 8px;\n background-color: rgb(210, 210, 210);\n background-color: var(--dough-color-gray-4);\n}\n.dough-steps-indicator > .dough-steps-indicator-step.dough-indicator-step-clickable {\n cursor: pointer;\n}\n.dough-steps-indicator > .dough-steps-indicator-step:not(:last-child) {\n margin-right: 8px;\n}\n.dough-steps-indicator > .dough-steps-indicator-step.dough-indicator-step-active {\n background-color: rgb(68, 132, 199);\n background-color: var(--dough-color-header);\n}";
|
|
4983
|
+
styleInject(css_248z$D);
|
|
4775
4984
|
|
|
4776
4985
|
var StepsIndicator = function (props) {
|
|
4777
4986
|
var _a = props.fullWidth, fullWidth = _a === void 0 ? false : _a, _b = props.activeStep, activeStep = _b === void 0 ? 0 : _b, _c = props.stepsAmount, stepsAmount = _c === void 0 ? 1 : _c;
|
|
@@ -4793,8 +5002,8 @@ var StepsIndicator = function (props) {
|
|
|
4793
5002
|
};
|
|
4794
5003
|
StepsIndicator.displayName = "StepsIndicator";
|
|
4795
5004
|
|
|
4796
|
-
var css_248z$D = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-avatar {\n position: relative;\n display: inline-block;\n box-sizing: border-box;\n overflow: visible;\n border-radius: 100%;\n font-size: 0.8125rem;\n font-family: \"Roboto\", sans-serif;\n}\n.dough-avatar.has-click {\n cursor: pointer;\n}\n.dough-avatar.has-padding {\n padding: 4px;\n}\n.dough-avatar.has-border {\n border: 3px solid rgba(0, 0, 0, 0);\n}\n.dough-avatar.has-border.dough-color-background-border {\n border-color: #eceffb;\n border-color: var(--dough-color-background);\n}\n.dough-avatar.has-border.dough-color-theme-border {\n border-color: rgb(255, 255, 255);\n border-color: var(--dough-color-theme);\n}\n.dough-avatar.has-border.dough-color-white-border {\n border-color: rgb(255, 255, 255);\n border-color: var(--dough-color-white);\n}\n.dough-avatar.has-border.dough-color-primary-border {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-primary);\n}\n.dough-avatar.has-border.dough-color-header-border {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-header);\n}\n.dough-avatar.has-border.dough-color-header-light-border {\n border-color: rgb(94, 162, 233);\n border-color: var(--dough-color-header-light);\n}\n.dough-avatar.has-border.dough-color-header-dark-border {\n border-color: rgb(47, 101, 159);\n border-color: var(--dough-color-header-dark);\n}\n.dough-avatar.has-border.dough-color-button-border {\n border-color: rgb(71, 170, 60);\n border-color: var(--dough-color-button);\n}\n.dough-avatar.has-border.dough-color-like-border {\n border-color: rgb(242, 64, 37);\n border-color: var(--dough-color-like);\n}\n.dough-avatar.has-border.dough-color-status-success-border {\n border-color: rgb(0, 136, 0);\n border-color: var(--dough-color-status-success);\n}\n.dough-avatar.has-border.dough-color-status-warning-light-border {\n border-color: rgb(255, 239, 221);\n border-color: var(--dough-color-status-warning-light);\n}\n.dough-avatar.has-border.dough-color-status-warning-border {\n border-color: rgb(255, 136, 0);\n border-color: var(--dough-color-status-warning);\n}\n.dough-avatar.has-border.dough-color-status-danger-border {\n border-color: rgb(191, 41, 0);\n border-color: var(--dough-color-status-danger);\n}\n.dough-avatar.has-border.dough-color-selector-1-border {\n border-color: rgb(250, 75, 52);\n border-color: var(--dough-color-selector-1);\n}\n.dough-avatar.has-border.dough-color-selector-2-border {\n border-color: rgb(255, 168, 34);\n border-color: var(--dough-color-selector-2);\n}\n.dough-avatar.has-border.dough-color-selector-3-border {\n border-color: rgb(0, 145, 255);\n border-color: var(--dough-color-selector-3);\n}\n.dough-avatar.has-border.dough-color-selector-4-border {\n border-color: rgb(20, 202, 215);\n border-color: var(--dough-color-selector-4);\n}\n.dough-avatar.has-border.dough-color-selector-5-border {\n border-color: rgb(143, 0, 255);\n border-color: var(--dough-color-selector-5);\n}\n.dough-avatar.has-border.dough-color-gray-1-border {\n border-color: rgb(68, 68, 68);\n border-color: var(--dough-color-gray-1);\n}\n.dough-avatar.has-border.dough-color-gray-2-border {\n border-color: rgb(105, 105, 105);\n border-color: var(--dough-color-gray-2);\n}\n.dough-avatar.has-border.dough-color-gray-3-border {\n border-color: rgb(159, 159, 159);\n border-color: var(--dough-color-gray-3);\n}\n.dough-avatar.has-border.dough-color-gray-4-border {\n border-color: rgb(210, 210, 210);\n border-color: var(--dough-color-gray-4);\n}\n.dough-avatar.has-border.dough-color-gray-5-border {\n border-color: rgb(230, 230, 230);\n border-color: var(--dough-color-gray-5);\n}\n.dough-avatar.has-border.dough-color-gray-6-border {\n border-color: rgb(245, 245, 245);\n border-color: var(--dough-color-gray-6);\n}\n.dough-avatar.has-border.dough-color-transparent-border {\n border-color: rgba(255, 255, 255, 0);\n border-color: var(--dough-color-transparent);\n}\n.dough-avatar.size-extra-small {\n width: 16px !important;\n height: 16px !important;\n}\n.dough-avatar.size-small {\n width: 20px !important;\n height: 20px !important;\n}\n.dough-avatar.size-normal {\n width: 32px !important;\n height: 32px !important;\n}\n.dough-avatar.size-large {\n width: 40px !important;\n height: 40px !important;\n}\n.dough-avatar.size-extra-large {\n width: 48px !important;\n height: 48px !important;\n}\n.dough-avatar > .dough-avatar-content-wrapper {\n display: flex;\n flex-flow: column nowrap;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n box-sizing: border-box;\n}\n.dough-avatar > .dough-avatar-status-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100%;\n height: 100%;\n transform: rotateZ(135deg);\n pointer-events: none;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status {\n border: 3px solid rgba(0, 0, 0, 0);\n border-radius: 100%;\n pointer-events: initial;\n display: flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: center;\n align-content: center;\n line-height: 0;\n transform: rotateZ(-135deg);\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 50%;\n z-index: 10;\n width: 10px;\n height: 10px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-background-border {\n border-color: #eceffb;\n border-color: var(--dough-color-background);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-theme-border {\n border-color: rgb(255, 255, 255);\n border-color: var(--dough-color-theme);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-white-border {\n border-color: rgb(255, 255, 255);\n border-color: var(--dough-color-white);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-primary-border {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-primary);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-header-border {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-header);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-header-light-border {\n border-color: rgb(94, 162, 233);\n border-color: var(--dough-color-header-light);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-header-dark-border {\n border-color: rgb(47, 101, 159);\n border-color: var(--dough-color-header-dark);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-button-border {\n border-color: rgb(71, 170, 60);\n border-color: var(--dough-color-button);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-like-border {\n border-color: rgb(242, 64, 37);\n border-color: var(--dough-color-like);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-status-success-border {\n border-color: rgb(0, 136, 0);\n border-color: var(--dough-color-status-success);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-status-warning-light-border {\n border-color: rgb(255, 239, 221);\n border-color: var(--dough-color-status-warning-light);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-status-warning-border {\n border-color: rgb(255, 136, 0);\n border-color: var(--dough-color-status-warning);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-status-danger-border {\n border-color: rgb(191, 41, 0);\n border-color: var(--dough-color-status-danger);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-1-border {\n border-color: rgb(250, 75, 52);\n border-color: var(--dough-color-selector-1);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-2-border {\n border-color: rgb(255, 168, 34);\n border-color: var(--dough-color-selector-2);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-3-border {\n border-color: rgb(0, 145, 255);\n border-color: var(--dough-color-selector-3);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-4-border {\n border-color: rgb(20, 202, 215);\n border-color: var(--dough-color-selector-4);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-5-border {\n border-color: rgb(143, 0, 255);\n border-color: var(--dough-color-selector-5);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-1-border {\n border-color: rgb(68, 68, 68);\n border-color: var(--dough-color-gray-1);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-2-border {\n border-color: rgb(105, 105, 105);\n border-color: var(--dough-color-gray-2);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-3-border {\n border-color: rgb(159, 159, 159);\n border-color: var(--dough-color-gray-3);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-4-border {\n border-color: rgb(210, 210, 210);\n border-color: var(--dough-color-gray-4);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-5-border {\n border-color: rgb(230, 230, 230);\n border-color: var(--dough-color-gray-5);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-6-border {\n border-color: rgb(245, 245, 245);\n border-color: var(--dough-color-gray-6);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-transparent-border {\n border-color: rgba(255, 255, 255, 0);\n border-color: var(--dough-color-transparent);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-tiny {\n border-width: 2px;\n width: 8px;\n height: 8px;\n margin-top: -4px;\n margin-left: -4px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-extra-small {\n border-width: 2px;\n width: 10px;\n height: 10px;\n margin-top: -5px;\n margin-left: -5px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-small {\n border-width: 2px;\n width: 16px;\n height: 16px;\n margin-top: -8px;\n margin-left: -8px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-normal {\n width: 24px;\n height: 24px;\n margin-top: -12px;\n margin-left: -12px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-large {\n border-width: 4px;\n width: 32px;\n height: 32px;\n margin-top: -16px;\n margin-left: -16px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-extra-large {\n border-width: 4px;\n width: 40px;\n height: 40px;\n margin-top: -20px;\n margin-left: -20px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-huge {\n border-width: 4px;\n width: 48px;\n height: 48px;\n margin-top: -24px;\n margin-left: -24px;\n}\n.dough-avatar.disabled {\n pointer-events: none !important;\n cursor: default;\n opacity: 0.5;\n}\n.dough-avatar.disabled * {\n pointer-events: none !important;\n}";
|
|
4797
|
-
styleInject(css_248z$
|
|
5005
|
+
var css_248z$E = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-avatar {\n position: relative;\n display: inline-block;\n box-sizing: border-box;\n overflow: visible;\n border-radius: 100%;\n font-size: 0.8125rem;\n font-family: \"Roboto\", sans-serif;\n}\n.dough-avatar.has-click {\n cursor: pointer;\n}\n.dough-avatar.has-padding {\n padding: 4px;\n}\n.dough-avatar.has-border {\n border: 3px solid rgba(0, 0, 0, 0);\n}\n.dough-avatar.has-border.dough-color-background-border {\n border-color: #eceffb;\n border-color: var(--dough-color-background);\n}\n.dough-avatar.has-border.dough-color-theme-border {\n border-color: rgb(255, 255, 255);\n border-color: var(--dough-color-theme);\n}\n.dough-avatar.has-border.dough-color-white-border {\n border-color: rgb(255, 255, 255);\n border-color: var(--dough-color-white);\n}\n.dough-avatar.has-border.dough-color-primary-border {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-primary);\n}\n.dough-avatar.has-border.dough-color-header-border {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-header);\n}\n.dough-avatar.has-border.dough-color-header-light-border {\n border-color: rgb(94, 162, 233);\n border-color: var(--dough-color-header-light);\n}\n.dough-avatar.has-border.dough-color-header-dark-border {\n border-color: rgb(47, 101, 159);\n border-color: var(--dough-color-header-dark);\n}\n.dough-avatar.has-border.dough-color-button-border {\n border-color: rgb(71, 170, 60);\n border-color: var(--dough-color-button);\n}\n.dough-avatar.has-border.dough-color-like-border {\n border-color: rgb(242, 64, 37);\n border-color: var(--dough-color-like);\n}\n.dough-avatar.has-border.dough-color-status-success-border {\n border-color: rgb(0, 136, 0);\n border-color: var(--dough-color-status-success);\n}\n.dough-avatar.has-border.dough-color-status-warning-light-border {\n border-color: rgb(255, 239, 221);\n border-color: var(--dough-color-status-warning-light);\n}\n.dough-avatar.has-border.dough-color-status-warning-border {\n border-color: rgb(255, 136, 0);\n border-color: var(--dough-color-status-warning);\n}\n.dough-avatar.has-border.dough-color-status-danger-border {\n border-color: rgb(191, 41, 0);\n border-color: var(--dough-color-status-danger);\n}\n.dough-avatar.has-border.dough-color-selector-1-border {\n border-color: rgb(250, 75, 52);\n border-color: var(--dough-color-selector-1);\n}\n.dough-avatar.has-border.dough-color-selector-2-border {\n border-color: rgb(255, 168, 34);\n border-color: var(--dough-color-selector-2);\n}\n.dough-avatar.has-border.dough-color-selector-3-border {\n border-color: rgb(0, 145, 255);\n border-color: var(--dough-color-selector-3);\n}\n.dough-avatar.has-border.dough-color-selector-4-border {\n border-color: rgb(20, 202, 215);\n border-color: var(--dough-color-selector-4);\n}\n.dough-avatar.has-border.dough-color-selector-5-border {\n border-color: rgb(143, 0, 255);\n border-color: var(--dough-color-selector-5);\n}\n.dough-avatar.has-border.dough-color-gray-1-border {\n border-color: rgb(68, 68, 68);\n border-color: var(--dough-color-gray-1);\n}\n.dough-avatar.has-border.dough-color-gray-2-border {\n border-color: rgb(105, 105, 105);\n border-color: var(--dough-color-gray-2);\n}\n.dough-avatar.has-border.dough-color-gray-3-border {\n border-color: rgb(159, 159, 159);\n border-color: var(--dough-color-gray-3);\n}\n.dough-avatar.has-border.dough-color-gray-4-border {\n border-color: rgb(210, 210, 210);\n border-color: var(--dough-color-gray-4);\n}\n.dough-avatar.has-border.dough-color-gray-5-border {\n border-color: rgb(230, 230, 230);\n border-color: var(--dough-color-gray-5);\n}\n.dough-avatar.has-border.dough-color-gray-6-border {\n border-color: rgb(245, 245, 245);\n border-color: var(--dough-color-gray-6);\n}\n.dough-avatar.has-border.dough-color-transparent-border {\n border-color: rgba(255, 255, 255, 0);\n border-color: var(--dough-color-transparent);\n}\n.dough-avatar.size-extra-small {\n width: 16px !important;\n height: 16px !important;\n}\n.dough-avatar.size-small {\n width: 20px !important;\n height: 20px !important;\n}\n.dough-avatar.size-normal {\n width: 32px !important;\n height: 32px !important;\n}\n.dough-avatar.size-large {\n width: 40px !important;\n height: 40px !important;\n}\n.dough-avatar.size-extra-large {\n width: 48px !important;\n height: 48px !important;\n}\n.dough-avatar > .dough-avatar-content-wrapper {\n display: flex;\n flex-flow: column nowrap;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n box-sizing: border-box;\n}\n.dough-avatar > .dough-avatar-status-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100%;\n height: 100%;\n transform: rotateZ(135deg);\n pointer-events: none;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status {\n border: 3px solid rgba(0, 0, 0, 0);\n border-radius: 100%;\n pointer-events: initial;\n display: flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: center;\n align-content: center;\n line-height: 0;\n transform: rotateZ(-135deg);\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 50%;\n z-index: 10;\n width: 10px;\n height: 10px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-background-border {\n border-color: #eceffb;\n border-color: var(--dough-color-background);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-theme-border {\n border-color: rgb(255, 255, 255);\n border-color: var(--dough-color-theme);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-white-border {\n border-color: rgb(255, 255, 255);\n border-color: var(--dough-color-white);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-primary-border {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-primary);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-header-border {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-header);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-header-light-border {\n border-color: rgb(94, 162, 233);\n border-color: var(--dough-color-header-light);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-header-dark-border {\n border-color: rgb(47, 101, 159);\n border-color: var(--dough-color-header-dark);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-button-border {\n border-color: rgb(71, 170, 60);\n border-color: var(--dough-color-button);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-like-border {\n border-color: rgb(242, 64, 37);\n border-color: var(--dough-color-like);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-status-success-border {\n border-color: rgb(0, 136, 0);\n border-color: var(--dough-color-status-success);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-status-warning-light-border {\n border-color: rgb(255, 239, 221);\n border-color: var(--dough-color-status-warning-light);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-status-warning-border {\n border-color: rgb(255, 136, 0);\n border-color: var(--dough-color-status-warning);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-status-danger-border {\n border-color: rgb(191, 41, 0);\n border-color: var(--dough-color-status-danger);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-1-border {\n border-color: rgb(250, 75, 52);\n border-color: var(--dough-color-selector-1);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-2-border {\n border-color: rgb(255, 168, 34);\n border-color: var(--dough-color-selector-2);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-3-border {\n border-color: rgb(0, 145, 255);\n border-color: var(--dough-color-selector-3);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-4-border {\n border-color: rgb(20, 202, 215);\n border-color: var(--dough-color-selector-4);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-selector-5-border {\n border-color: rgb(143, 0, 255);\n border-color: var(--dough-color-selector-5);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-1-border {\n border-color: rgb(68, 68, 68);\n border-color: var(--dough-color-gray-1);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-2-border {\n border-color: rgb(105, 105, 105);\n border-color: var(--dough-color-gray-2);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-3-border {\n border-color: rgb(159, 159, 159);\n border-color: var(--dough-color-gray-3);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-4-border {\n border-color: rgb(210, 210, 210);\n border-color: var(--dough-color-gray-4);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-5-border {\n border-color: rgb(230, 230, 230);\n border-color: var(--dough-color-gray-5);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-gray-6-border {\n border-color: rgb(245, 245, 245);\n border-color: var(--dough-color-gray-6);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.dough-color-transparent-border {\n border-color: rgba(255, 255, 255, 0);\n border-color: var(--dough-color-transparent);\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-tiny {\n border-width: 2px;\n width: 8px;\n height: 8px;\n margin-top: -4px;\n margin-left: -4px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-extra-small {\n border-width: 2px;\n width: 10px;\n height: 10px;\n margin-top: -5px;\n margin-left: -5px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-small {\n border-width: 2px;\n width: 16px;\n height: 16px;\n margin-top: -8px;\n margin-left: -8px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-normal {\n width: 24px;\n height: 24px;\n margin-top: -12px;\n margin-left: -12px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-large {\n border-width: 4px;\n width: 32px;\n height: 32px;\n margin-top: -16px;\n margin-left: -16px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-extra-large {\n border-width: 4px;\n width: 40px;\n height: 40px;\n margin-top: -20px;\n margin-left: -20px;\n}\n.dough-avatar > .dough-avatar-status-wrapper > .dough-avatar-status.size-huge {\n border-width: 4px;\n width: 48px;\n height: 48px;\n margin-top: -24px;\n margin-left: -24px;\n}\n.dough-avatar.disabled {\n pointer-events: none !important;\n cursor: default;\n opacity: 0.5;\n}\n.dough-avatar.disabled * {\n pointer-events: none !important;\n}";
|
|
5006
|
+
styleInject(css_248z$E);
|
|
4798
5007
|
|
|
4799
5008
|
var Avatar = function (props) {
|
|
4800
5009
|
var _a;
|
|
@@ -4826,8 +5035,8 @@ var Avatar = function (props) {
|
|
|
4826
5035
|
};
|
|
4827
5036
|
Avatar.displayName = "Avatar";
|
|
4828
5037
|
|
|
4829
|
-
var css_248z$
|
|
4830
|
-
styleInject(css_248z$
|
|
5038
|
+
var css_248z$F = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-fader {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 0;\n width: auto;\n height: auto;\n position: absolute !important;\n pointer-events: none;\n}\nhtml.dough-IE11 .dough-fader {\n display: none;\n}\n.dough-fader > .dough-fader-top {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: 20px;\n mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #000000 100%);\n -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #000000 100%);\n}\n.dough-fader > .dough-fader-bottom {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: 20px;\n mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);\n -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);\n}\n.dough-fader > .dough-fader-right {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: 10;\n width: 20px;\n height: auto;\n mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000000 100%);\n -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000000 100%);\n}\n.dough-fader > .dough-fader-left {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: 20px;\n height: auto;\n mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, #000000 100%);\n -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, #000000 100%);\n}\n.dough-fader.dough-fader-dark > .dough-fader-top,\n.dough-fader.dough-fader-dark > .dough-fader-right,\n.dough-fader.dough-fader-dark > .dough-fader-bottom,\n.dough-fader.dough-fader-dark > .dough-fader-left {\n background-color: rgba(0, 0, 0, 0.4);\n}\n.dough-fader.dough-fader-full-size > .dough-fader-side {\n height: 100%;\n width: 100%;\n}\n.dough-fader > .dough-fader-side {\n pointer-events: none;\n display: none;\n}\n.dough-fader.dough-fader-top > .dough-fader-top {\n display: block;\n}\n.dough-fader.dough-fader-right > .dough-fader-right {\n display: block;\n}\n.dough-fader.dough-fader-bottom > .dough-fader-bottom {\n display: block;\n}\n.dough-fader.dough-fader-left > .dough-fader-left {\n display: block;\n}";
|
|
5039
|
+
styleInject(css_248z$F);
|
|
4831
5040
|
|
|
4832
5041
|
var Fader = function (props) { return (React.createElement("span", __assign({ className: cn(props.className, "dough-fader", {
|
|
4833
5042
|
"dough-fader-dark": props.dark,
|
|
@@ -4859,116 +5068,14 @@ var Fader = function (props) { return (React.createElement("span", __assign({ cl
|
|
|
4859
5068
|
: Colors.THEME, "dough-fader-side dough-fader-left") }))); };
|
|
4860
5069
|
Fader.displayName = "Fader";
|
|
4861
5070
|
|
|
4862
|
-
var css_248z$
|
|
4863
|
-
styleInject(css_248z$
|
|
5071
|
+
var css_248z$G = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-overlay {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: auto;\n height: auto;\n position: absolute !important;\n pointer-events: none;\n}\nhtml.dough-IE11 .dough-overlay {\n display: none;\n}";
|
|
5072
|
+
styleInject(css_248z$G);
|
|
4864
5073
|
|
|
4865
5074
|
var Overlay = function (props) { return (React.createElement("span", __assign({ className: cn(props.className, "dough-overlay", props.color) }, props.dataAttributes, { style: {
|
|
4866
5075
|
opacity: props.opacity,
|
|
4867
5076
|
} }))); };
|
|
4868
5077
|
Overlay.displayName = "Overlay";
|
|
4869
5078
|
|
|
4870
|
-
var DesignTokens = {
|
|
4871
|
-
colors: {
|
|
4872
|
-
colorWhite: "#ffffff",
|
|
4873
|
-
colorBackdropDark: "rgba(0,0,0,0.8)",
|
|
4874
|
-
colorBackdrop: "rgba(0,0,0,0.4)",
|
|
4875
|
-
colorGrey6: "#f5f5f5",
|
|
4876
|
-
colorGrey5: "#e6e6e6",
|
|
4877
|
-
colorGrey4: "#d2d2d2",
|
|
4878
|
-
colorGrey3: "#9f9f9f",
|
|
4879
|
-
colorGrey2: "#696969",
|
|
4880
|
-
colorGrey1: "#444444",
|
|
4881
|
-
colorStatusWarningLight: "#ffefdd",
|
|
4882
|
-
colorStatusWarning: "#ff8800",
|
|
4883
|
-
colorStatusSuccess: "#008800",
|
|
4884
|
-
colorStatusDanger: "#bf2900",
|
|
4885
|
-
colorBrandButton: "#47aa3c",
|
|
4886
|
-
colorBrandButtonHover: "#39942f",
|
|
4887
|
-
colorBrandButtonClick: "#2a7f20",
|
|
4888
|
-
colorBrandHeaderLight: "#5ea2e9",
|
|
4889
|
-
colorBrandHeader: "#4484c7",
|
|
4890
|
-
colorBrandHeaderDark: "#2f659f",
|
|
4891
|
-
colorLike: "#F24025",
|
|
4892
|
-
},
|
|
4893
|
-
fixedColors: {
|
|
4894
|
-
colorSelector1: "#fa4b34",
|
|
4895
|
-
colorSelector2: "#ffa822",
|
|
4896
|
-
colorSelector3: "#0091ff",
|
|
4897
|
-
colorSelector4: "#14cad7",
|
|
4898
|
-
colorSelector5: "#8f00ff",
|
|
4899
|
-
},
|
|
4900
|
-
textColors: {
|
|
4901
|
-
colorTextWarning: "#bf2900",
|
|
4902
|
-
colorTextSuccess: "#008800",
|
|
4903
|
-
colorTextDanger: "#bf2900",
|
|
4904
|
-
colorTextBrandLink: "#4484c7",
|
|
4905
|
-
colorTextWhite: "#ffffff",
|
|
4906
|
-
colorTextLight: "#9e9e9e",
|
|
4907
|
-
colorTextDefault: "#6e6f75",
|
|
4908
|
-
colorTextDark: "#444444",
|
|
4909
|
-
colorIconWhite: "#ffffff",
|
|
4910
|
-
colorIconPrimary: "#4484c7",
|
|
4911
|
-
colorIconDefault: "#999999",
|
|
4912
|
-
},
|
|
4913
|
-
typography: {
|
|
4914
|
-
textSmall: "0.8125rem",
|
|
4915
|
-
textBase: "0.875rem",
|
|
4916
|
-
textH5: "1rem",
|
|
4917
|
-
textH4: "1.125rem",
|
|
4918
|
-
textH3: "1.25rem",
|
|
4919
|
-
textH2: "1.5rem",
|
|
4920
|
-
textH1: "1.625rem",
|
|
4921
|
-
textTiny: "0.6875rem",
|
|
4922
|
-
lineHeightHeading: "1.25",
|
|
4923
|
-
lineHeightBody: "1.5",
|
|
4924
|
-
lineHeightReset: "1",
|
|
4925
|
-
fontWeightRegular: "400",
|
|
4926
|
-
fontWeightBold: "700",
|
|
4927
|
-
fontFamilyBase: "Roboto",
|
|
4928
|
-
},
|
|
4929
|
-
spacing: {
|
|
4930
|
-
spacerHalf: "4px",
|
|
4931
|
-
spacer1: "8px",
|
|
4932
|
-
spacer2: "16px",
|
|
4933
|
-
spacer3: "24px",
|
|
4934
|
-
spacer4: "32px",
|
|
4935
|
-
spacer5: "40px",
|
|
4936
|
-
spacer6: "48px",
|
|
4937
|
-
},
|
|
4938
|
-
borders: {
|
|
4939
|
-
borderSolidWhite3: "3px solid #ffffff",
|
|
4940
|
-
borderSolidWhite2: "2px solid #ffffff",
|
|
4941
|
-
borderSolidWhite1: "1px solid #ffffff",
|
|
4942
|
-
borderDottedLight3: "3px dashed #ededed",
|
|
4943
|
-
borderSolidLight3: "3px solid #ededed",
|
|
4944
|
-
borderDottedLight2: "2px dashed #ededed",
|
|
4945
|
-
borderSolidLight2: "2px solid #ededed",
|
|
4946
|
-
borderDottedLight1: "1px dashed #ededed",
|
|
4947
|
-
borderSolidLight1: "1px solid #ededed",
|
|
4948
|
-
},
|
|
4949
|
-
shadows: {
|
|
4950
|
-
boxShadowDropdown: "0 2px 20px 0 rgba(0,0,0,0.1)",
|
|
4951
|
-
boxShadowNotify: "0 1px 15px 0 rgba(0,0,0,0.2)",
|
|
4952
|
-
boxShadowCard: "0 1px 1px 0 rgba(0,0,0,0.1)",
|
|
4953
|
-
boxShadowButton: "0 1px 3px 0 rgba(0,0,0,0.2)",
|
|
4954
|
-
},
|
|
4955
|
-
sizes: {
|
|
4956
|
-
sizeDialogSmall: "464px",
|
|
4957
|
-
sizeDialogMedium: "768px",
|
|
4958
|
-
sizeDialogLarge: "1024px",
|
|
4959
|
-
sizeViewportExtraLarge: "1200px",
|
|
4960
|
-
sizeViewportLarge: "1080px",
|
|
4961
|
-
sizeViewportMedium: "768px",
|
|
4962
|
-
sizeViewportSmall: "576px",
|
|
4963
|
-
sizeHeaderHeight: "56px",
|
|
4964
|
-
sizeAvatarXs: "24px",
|
|
4965
|
-
sizeAvatarS: "32px",
|
|
4966
|
-
sizeAvatarM: "40px",
|
|
4967
|
-
sizeAvatarL: "80px",
|
|
4968
|
-
sizeAvatarXl: "120px",
|
|
4969
|
-
},
|
|
4970
|
-
};
|
|
4971
|
-
|
|
4972
5079
|
var IconArrowLeft = {
|
|
4973
5080
|
src: "<?xml version=\"1.0\" standalone=\"no\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\" >\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" viewBox=\"-10 0 895 1000\">\n <path fill=\"currentColor\"\nd=\"M449 926l39 -39q7 -7 7 -16.5t-7 -16.5l-303 -303h667q10 0 16.5 -7t6.5 -17v-54q0 -10 -6.5 -17t-16.5 -7h-667l303 -303q7 -7 7 -16.5t-7 -16.5l-39 -39q-7 -7 -16.5 -7t-16.5 7l-409 409q-7 7 -7 16.5t7 17.5l409 409q7 7 16.5 7t16.5 -7z\" />\n</svg>\n",
|
|
4974
5081
|
key: "arrow-left",
|
|
@@ -4979,8 +5086,8 @@ var IconArrowRight = {
|
|
|
4979
5086
|
key: "arrow-right",
|
|
4980
5087
|
};
|
|
4981
5088
|
|
|
4982
|
-
var css_248z$
|
|
4983
|
-
styleInject(css_248z$
|
|
5089
|
+
var css_248z$H = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-horizontal-list-slider-container {\n transition: transform 450ms cubic-bezier(0.25, 1, 0, 1);\n}\n\n.dough-horizontal-list-slider-buttons-wrapper {\n z-index: 100 !important;\n pointer-events: none;\n}\n.dough-horizontal-list-slider-buttons-wrapper .dough-horizonal-list-slider-button-icon > svg {\n width: 15px;\n height: 15px;\n}\n\n@media not screen and (hover: hover) and (pointer: fine) {\n .dough-horizontal-list-slider-wrapper {\n padding-left: 16px;\n padding-right: 16px;\n overflow-x: auto !important;\n padding-bottom: 16px;\n margin-bottom: -16px;\n }\n .dough-horizontal-list-slider-slide-button {\n display: none !important;\n }\n .dough-horizontal-list-slider-fader > .dough-fader-right,\n.dough-horizontal-list-slider-fader > .dough-fader-left {\n display: block !important;\n }\n}";
|
|
5090
|
+
styleInject(css_248z$H);
|
|
4984
5091
|
|
|
4985
5092
|
var HorizontalListSlider = function (props) {
|
|
4986
5093
|
var _a = useState(false), showLeftSlideButton = _a[0], setShowLeftSlideButton = _a[1];
|
|
@@ -5076,8 +5183,8 @@ var HorizontalListSlider = function (props) {
|
|
|
5076
5183
|
};
|
|
5077
5184
|
HorizontalListSlider.displayName = "HorizontalListSlider";
|
|
5078
5185
|
|
|
5079
|
-
var css_248z$
|
|
5080
|
-
styleInject(css_248z$
|
|
5186
|
+
var css_248z$I = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\nbody:not(.no-transition) .dough-carouel-wrapper > .dough-carouel-container:not(.dough-carouel-container-no-anim) {\n transition: transform 750ms cubic-bezier(0.5, 0.25, 0.25, 1);\n}\nbody.no-transition .dough-carouel-wrapper > .dough-carouel-container:not(.dough-carouel-container-no-anim) {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-carouel-wrapper > .dough-carousel-touch-listener {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1000;\n width: auto;\n height: auto;\n background-color: rgba(255, 0, 0, 0.2);\n display: block;\n}\n\n@media not screen and (hover: hover) and (pointer: fine) {\n body:not(.no-transition) .dough-carouel-wrapper > .dough-carouel-container:not(.dough-carouel-container-no-anim) {\n transition: transform 1000ms cubic-bezier(0.2, 0.75, 0, 1);\n }\n body.no-transition .dough-carouel-wrapper > .dough-carouel-container:not(.dough-carouel-container-no-anim) {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n }\n}";
|
|
5187
|
+
styleInject(css_248z$I);
|
|
5081
5188
|
|
|
5082
5189
|
var Carousel = function (props) {
|
|
5083
5190
|
var conatinerRef = useRef(null);
|
|
@@ -5175,8 +5282,8 @@ var Carousel = function (props) {
|
|
|
5175
5282
|
};
|
|
5176
5283
|
Carousel.displayName = "Carousel";
|
|
5177
5284
|
|
|
5178
|
-
var css_248z$
|
|
5179
|
-
styleInject(css_248z$
|
|
5285
|
+
var css_248z$J = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\nbody:not(.no-transition) .dough-content-slider > .dough-content-slider-inner {\n transition: all 350ms cubic-bezier(0.2, 1, 0, 1);\n}\nbody.no-transition .dough-content-slider > .dough-content-slider-inner {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-content-slider > .dough-content-slider-inner.dough-content-slider-inner-to-left {\n transform: translate3d(-100%, 0, 0);\n opacity: 0;\n}\n.dough-content-slider > .dough-content-slider-inner.dough-content-slider-inner-to-right {\n transform: translate3d(100%, 0, 0);\n opacity: 0;\n}";
|
|
5286
|
+
styleInject(css_248z$J);
|
|
5180
5287
|
|
|
5181
5288
|
var ContentSlider = function (props) {
|
|
5182
5289
|
var _a = useState(props.children), appliedChildren = _a[0], setAppliedChildren = _a[1];
|
|
@@ -5220,8 +5327,8 @@ var ContentSlider = function (props) {
|
|
|
5220
5327
|
};
|
|
5221
5328
|
ContentSlider.displayName = "ContentSlider";
|
|
5222
5329
|
|
|
5223
|
-
var css_248z$
|
|
5224
|
-
styleInject(css_248z$
|
|
5330
|
+
var css_248z$K = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-image-viewer {\n display: inline-flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n box-sizing: border-box;\n position: relative;\n z-index: 1;\n background-size: 0px 0px;\n}\n.dough-image-viewer.dough-image-border-radius {\n border-radius: 12px;\n}\n.dough-box.dough-box-border-radius .dough-image-viewer.dough-image-border-radius {\n border-radius: 6px;\n}\n.dough-image-viewer.has-border {\n padding: 3px;\n}\n.dough-image-viewer.has-border > .after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n width: auto;\n height: auto;\n}\n.dough-image-viewer > .dough-image-viewer-as-background {\n display: none;\n}\n.dough-image-viewer > img {\n position: relative;\n z-index: 5;\n object-fit: cover;\n width: 100%;\n height: 100%;\n object-position: center center;\n text-indent: -101%;\n overflow: hidden;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n opacity: 0;\n}\n.dough-image-viewer.dough-image-with-ratio > img {\n position: absolute;\n top: 0;\n left: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > .dough-image-viewer-as-background {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n width: auto;\n height: auto;\n background-position: center center;\n background-size: cover;\n background-repeat: no-repeat;\n}\nhtml.dough-IE11 .dough-image-viewer.has-border > .dough-image-viewer-as-background {\n position: absolute;\n top: 3px;\n right: 3px;\n bottom: 3px;\n left: 3px;\n z-index: 1;\n width: auto;\n height: auto;\n}\n.dough-image-viewer.dough-image-viewer-fit-to-view > img {\n object-fit: contain;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > img {\n opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > .dough-image-viewer-as-background {\n background-size: contain;\n}\n.dough-image-viewer.size-extra-small {\n width: 32px !important;\n height: 32px !important;\n}\n.dough-image-viewer.size-extra-small > img {\n width: 100%;\n height: 100%;\n}\n.dough-image-viewer.size-small {\n width: 64px !important;\n height: 64px !important;\n}\n.dough-image-viewer.size-small > img {\n width: 100%;\n height: 100%;\n}\n.dough-image-viewer.size-normal {\n width: 96px !important;\n height: 96px !important;\n}\n.dough-image-viewer.size-normal > img {\n width: 100%;\n height: 100%;\n}\n.dough-image-viewer.size-large {\n width: 128px !important;\n height: 128px !important;\n}\n.dough-image-viewer.size-large > img {\n width: 100%;\n height: 100%;\n}\n.dough-image-viewer.size-extra-large {\n width: 160px !important;\n height: 160px !important;\n}\n.dough-image-viewer.size-extra-large > img {\n width: 100%;\n height: 100%;\n}\n.dough-image-viewer.rounded {\n border-radius: 100%;\n}\n.dough-image-viewer.rounded > .dough-image-viewer-as-background,\n.dough-image-viewer.rounded > .after,\n.dough-image-viewer.rounded > img {\n border-radius: 100%;\n}\n.dough-image-viewer > .dough-image-viewer-content-container {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n}\nbody:not(.no-transition) .dough-image-viewer > .dough-image-viewer-content-container {\n transition: all 650ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-image-viewer > .dough-image-viewer-content-container {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-image-viewer.dough-image-have-children-text-color * {\n color: inherit !important;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover > .dough-image-viewer-content-container {\n opacity: 0;\n pointer-events: none;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover:hover > .dough-image-viewer-content-container {\n opacity: 1;\n}\n.dough-image-viewer:not(:hover) .dough-image-show-only-on-image-hover {\n opacity: 0 !important;\n pointer-events: none !important;\n}";
|
|
5331
|
+
styleInject(css_248z$K);
|
|
5225
5332
|
|
|
5226
5333
|
var ImageContentShowOnHoverClassName = "dough-image-show-only-on-image-hover";
|
|
5227
5334
|
var Image = function (props) {
|
|
@@ -5254,8 +5361,8 @@ var Image = function (props) {
|
|
|
5254
5361
|
};
|
|
5255
5362
|
Image.displayName = "Image";
|
|
5256
5363
|
|
|
5257
|
-
var css_248z$
|
|
5258
|
-
styleInject(css_248z$
|
|
5364
|
+
var css_248z$L = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-image-carousel {\n position: relative;\n display: block;\n}\n.dough-image-carousel > .dough-image-carousel-item {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n background-position: center center;\n background-size: cover;\n background-repeat: no-repeat;\n display: block;\n opacity: 0;\n}";
|
|
5365
|
+
styleInject(css_248z$L);
|
|
5259
5366
|
|
|
5260
5367
|
var ImageCarousel = function (props) {
|
|
5261
5368
|
var _a = props.duration, duration = _a === void 0 ? 5000 : _a, _b = props.height, height = _b === void 0 ? "100%" : _b, _c = props.width, width = _c === void 0 ? "100%" : _c;
|
|
@@ -5322,8 +5429,8 @@ var ImageCarousel = function (props) {
|
|
|
5322
5429
|
};
|
|
5323
5430
|
ImageCarousel.displayName = "ImageCarousel";
|
|
5324
5431
|
|
|
5325
|
-
var css_248z$
|
|
5326
|
-
styleInject(css_248z$
|
|
5432
|
+
var css_248z$M = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-table {\n font-family: \"Roboto\", sans-serif;\n}\n.dough-table > .dough-table-row-wrapper {\n font-size: 0.875rem;\n position: relative;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container {\n width: 100%;\n display: block;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row-button-list-container {\n position: absolute;\n top: 0;\n right: 8px;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n display: flex;\n flex-flow: row nowrap;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n opacity: 0;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row,\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header {\n align-items: stretch;\n padding: 0;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell,\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell {\n padding: 16px;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n min-width: 1px !important;\n overflow: hidden;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell.v-border,\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell.v-border {\n border-bottom: 1px solid #ededed;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell.h-border:not(:first-child),\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell.h-border:not(:first-child) {\n border-left: 1px solid #ededed;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell.no-v-border,\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell.no-v-border {\n border-bottom: none !important;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell.no-h-border,\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell.no-h-border {\n border-left: none !important;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header {\n font-weight: 700;\n background-color: rgb(245, 245, 245);\n background-color: var(--dough-color-gray-6);\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container.keep-active > .dough-table-row-button-list-container, .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container:hover > .dough-table-row-button-list-container {\n opacity: 1;\n}\n.dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container.keep-active > .dough-table-row.dough-table-row-clickable, .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container:hover > .dough-table-row.dough-table-row-clickable {\n cursor: pointer;\n background-color: rgb(245, 245, 245);\n background-color: var(--dough-color-gray-6);\n}\n.dough-table.dough-table-vertical-borders > .dough-table-row-wrapper:not(:last-child) > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell,\n.dough-table.dough-table-vertical-borders > .dough-table-row-wrapper:not(:last-child) > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-header > .dough-table-cell:not(.no-v-border) {\n border-bottom: 1px solid #ededed;\n}\n.dough-table.dough-table-horizontal-borders > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row > .dough-table-cell:not(:first-child):not(.no-h-border) {\n border-left: 1px solid #ededed;\n}\n\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-medium .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row-button-list-container {\n opacity: 1;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-medium .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row-button-list-container > .dough-drop-menu > .dough-button-wrapper > .dough-button {\n background-color: rgba(255, 255, 255, 0.5);\n background-color: rgba(var(--dough-color-white), 0.5);\n}\n\n@media only screen and (max-width: 768px) {\n body:not(.dough-no-viewport-control) .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row-button-list-container {\n opacity: 1;\n }\n body:not(.dough-no-viewport-control) .dough-table > .dough-table-row-wrapper > .dough-layout-flexbox-content > .dough-table-row-container > .dough-table-row-button-list-container > .dough-drop-menu > .dough-button-wrapper > .dough-button {\n background-color: rgba(255, 255, 255, 0.5);\n background-color: rgba(var(--dough-color-white), 0.5);\n }\n}";
|
|
5433
|
+
styleInject(css_248z$M);
|
|
5327
5434
|
|
|
5328
5435
|
var Table = function (props) {
|
|
5329
5436
|
var _a = props.verticalBorders, verticalBorders = _a === void 0 ? true : _a, _b = props.horizontalBorders, horizontalBorders = _b === void 0 ? true : _b;
|
|
@@ -5379,8 +5486,8 @@ var TableCell = function (props) {
|
|
|
5379
5486
|
};
|
|
5380
5487
|
TableCell.displayName = "TableCell";
|
|
5381
5488
|
|
|
5382
|
-
var css_248z$
|
|
5383
|
-
styleInject(css_248z$
|
|
5489
|
+
var css_248z$N = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-skeleton {\n display: inline-block;\n box-sizing: border-box;\n background-color: transparent;\n width: 100%;\n position: relative;\n overflow: hidden;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n pointer-events: all;\n transform: translateZ(0);\n cursor: default;\n}\n.dough-skeleton.dough-skeleton-fit-to-parent {\n height: 100%;\n}\n.dough-skeleton.dough-skeleton-circular {\n border-radius: 100%;\n}\n.dough-skeleton + .dough-skeleton {\n margin-top: 8px;\n}\n.dough-skeleton > div {\n position: relative;\n display: block;\n box-sizing: border-box;\n}\n.dough-skeleton > .dough-skeleton-row {\n width: 100%;\n height: 12px;\n border-radius: 4px;\n}\n.dough-skeleton > .dough-skeleton-row.dough-skeleton-row-half {\n width: 50%;\n}\n.dough-skeleton > .dough-skeleton-row.dough-skeleton-row-slim {\n height: 8px;\n}\n.dough-skeleton > .dough-skeleton-row.dough-skeleton-row-slim + .dough-skeleton-row:last-child {\n width: 65%;\n}\n.dough-skeleton > .dough-skeleton-row + .dough-skeleton-row {\n margin-top: 8px;\n}\n.dough-skeleton > .dough-skeleton-box.size-none {\n width: 0;\n height: 0;\n}\n.dough-skeleton > .dough-skeleton-box.size-huge {\n width: 48px;\n height: 48px;\n}\n.dough-skeleton > .dough-skeleton-box.size-extra-large {\n width: 40px;\n height: 40px;\n}\n.dough-skeleton > .dough-skeleton-box.size-large {\n width: 32px;\n height: 32px;\n}\n.dough-skeleton > .dough-skeleton-box.size-normal {\n width: 24px;\n height: 24px;\n}\n.dough-skeleton > .dough-skeleton-box.size-small {\n width: 16px;\n height: 16px;\n}\n.dough-skeleton > .dough-skeleton-box.size-extra-small {\n width: 8px;\n height: 8px;\n}\n.dough-skeleton > .dough-skeleton-box.size-tiny {\n width: 4px;\n height: 4px;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-fit-to-parent {\n width: 100% !important;\n height: 100% !important;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-circular {\n border-radius: 100%;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-h, .dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-v {\n position: relative;\n background-color: transparent !important;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-h > .after, .dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-v > .after {\n position: absolute;\n border-radius: 4px;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-h > .after {\n top: 4px;\n height: calc(100% - 8px);\n left: 0;\n width: 100%;\n}\n.dough-skeleton > .dough-skeleton-box.dough-skeleton-rectangle-v > .after {\n top: 0;\n height: 100%;\n left: 4px;\n width: calc(100% - 8px);\n}\n.dough-skeleton > div:not(:empty) > span {\n display: block;\n width: 100%;\n height: 100%;\n}\n.dough-skeleton.dough-skeleton-animated * {\n position: relative;\n}\n.dough-skeleton.dough-skeleton-animated > div:empty:before,\n.dough-skeleton.dough-skeleton-animated > div:not(:empty) > span:before {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99;\n width: auto;\n height: auto;\n background-color: rgba(0, 0, 0, 0);\n opacity: 0.9;\n background-image: linear-gradient(-75deg, rgba(255, 255, 0, 0) 0%, rgba(255, 255, 255, 0) 30%, white 50%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);\n background-image: linear-gradient(-75deg, rgba(255, 255, 0, 0) 0%, rgba(255, 255, 255, 0) 30%, var(--dough-color-theme) 50%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);\n background-size: 500% 500%;\n}\nbody:not(.no-transition) .dough-skeleton.dough-skeleton-animated > div:empty:before,\nbody:not(.no-transition) .dough-skeleton.dough-skeleton-animated > div:not(:empty) > span:before {\n animation: glass-reflection 2000ms 1000ms linear infinite;\n}\nbody.no-transition .dough-skeleton.dough-skeleton-animated > div:empty:before,\nbody.no-transition .dough-skeleton.dough-skeleton-animated > div:not(:empty) > span:before {\n animation: none 0ms linear;\n animation-delay: 0ms !important;\n}\n\n@keyframes glass-reflection {\n 0% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n}";
|
|
5490
|
+
styleInject(css_248z$N);
|
|
5384
5491
|
|
|
5385
5492
|
var SkeletonShape;
|
|
5386
5493
|
(function (SkeletonShape) {
|
|
@@ -5421,91 +5528,8 @@ var Skeleton = function (props) {
|
|
|
5421
5528
|
};
|
|
5422
5529
|
Skeleton.displayName = "Skeleton";
|
|
5423
5530
|
|
|
5424
|
-
var css_248z$
|
|
5425
|
-
styleInject(css_248z$
|
|
5426
|
-
|
|
5427
|
-
var _a;
|
|
5428
|
-
var IE11SpecificCases = {
|
|
5429
|
-
flex: function (value) { return value + " " + value + " auto"; },
|
|
5430
|
-
};
|
|
5431
|
-
var MediaQueryDevices;
|
|
5432
|
-
(function (MediaQueryDevices) {
|
|
5433
|
-
MediaQueryDevices["MOBILE"] = "mobile";
|
|
5434
|
-
MediaQueryDevices["TABLETPORTRAIT"] = "tabletPortrait";
|
|
5435
|
-
MediaQueryDevices["TABLETLANDSCAPE"] = "tabletLandscape";
|
|
5436
|
-
MediaQueryDevices["DESKTOP"] = "desktop";
|
|
5437
|
-
})(MediaQueryDevices || (MediaQueryDevices = {}));
|
|
5438
|
-
var enumToStyleValueMap = (_a = {},
|
|
5439
|
-
_a[Sizes.XXS] = DesignTokens.spacing.spacerHalf,
|
|
5440
|
-
_a[Sizes.XS] = DesignTokens.spacing.spacer1,
|
|
5441
|
-
_a[Sizes.SMALL] = DesignTokens.spacing.spacer2,
|
|
5442
|
-
_a[Sizes.NORMAL] = DesignTokens.spacing.spacer3,
|
|
5443
|
-
_a[Sizes.LARGE] = DesignTokens.spacing.spacer4,
|
|
5444
|
-
_a[Sizes.XL] = DesignTokens.spacing.spacer5,
|
|
5445
|
-
_a[Sizes.XXL] = DesignTokens.spacing.spacer6,
|
|
5446
|
-
_a);
|
|
5447
|
-
var getStyleValue = function (styleValue) {
|
|
5448
|
-
if (enumToStyleValueMap[styleValue] === undefined) {
|
|
5449
|
-
return styleValue;
|
|
5450
|
-
}
|
|
5451
|
-
return enumToStyleValueMap[styleValue];
|
|
5452
|
-
};
|
|
5453
|
-
var getMediaQueryStyles = function (props, propToStyleMap, deviceType) {
|
|
5454
|
-
var mediaQueryStyles = "";
|
|
5455
|
-
Object.keys(propToStyleMap).forEach(function (propKey) {
|
|
5456
|
-
if (deviceType &&
|
|
5457
|
-
typeof props[propKey] === "object" &&
|
|
5458
|
-
props[propKey][deviceType] !== undefined) {
|
|
5459
|
-
mediaQueryStyles += "\n " + propToStyleMap[propKey]
|
|
5460
|
-
.map(function (styleAttr) {
|
|
5461
|
-
return styleAttr + ": " + getStyleValue(props[propKey][deviceType]) + ";";
|
|
5462
|
-
})
|
|
5463
|
-
.join("") + "\n ";
|
|
5464
|
-
}
|
|
5465
|
-
else if (deviceType === undefined &&
|
|
5466
|
-
typeof props[propKey] === "string") {
|
|
5467
|
-
mediaQueryStyles += "\n " + propToStyleMap[propKey]
|
|
5468
|
-
.map(function (styleAttr) {
|
|
5469
|
-
return styleAttr + ": " + getStyleValue(props[propKey]) + ";";
|
|
5470
|
-
})
|
|
5471
|
-
.join("") + "\n ";
|
|
5472
|
-
}
|
|
5473
|
-
});
|
|
5474
|
-
return mediaQueryStyles;
|
|
5475
|
-
};
|
|
5476
|
-
var getIESpecificStyles = function (props, propToStyleMap) {
|
|
5477
|
-
var IE11Styles = "";
|
|
5478
|
-
Object.keys(propToStyleMap).forEach(function (propKey) {
|
|
5479
|
-
IE11Styles += "\n " + propToStyleMap[propKey]
|
|
5480
|
-
.map(function (styleAttr) {
|
|
5481
|
-
if (IE11SpecificCases[styleAttr]) {
|
|
5482
|
-
return styleAttr + ": " + IE11SpecificCases[styleAttr](getStyleValue(props[propKey])) + ";";
|
|
5483
|
-
}
|
|
5484
|
-
return "";
|
|
5485
|
-
})
|
|
5486
|
-
.join("") + "\n ";
|
|
5487
|
-
});
|
|
5488
|
-
return IE11Styles;
|
|
5489
|
-
};
|
|
5490
|
-
var generateStyles = function (props, selector, propToStyleMap, noMediaQuery) {
|
|
5491
|
-
var elementMainStyles = "";
|
|
5492
|
-
var mainStyleProps = getMediaQueryStyles(props, propToStyleMap);
|
|
5493
|
-
if (mainStyleProps.trim() !== "") {
|
|
5494
|
-
elementMainStyles = "\n " + selector + " {\n " + mainStyleProps + "\n }\n ";
|
|
5495
|
-
if (!!window.MSInputMethodContext && !!document.documentMode) {
|
|
5496
|
-
var ie11Styles = getIESpecificStyles(props, propToStyleMap);
|
|
5497
|
-
if (ie11Styles.trim() !== "") {
|
|
5498
|
-
elementMainStyles += "\n html.dough-IE11 " + selector + " {\n " + mainStyleProps + "\n }\n ";
|
|
5499
|
-
}
|
|
5500
|
-
}
|
|
5501
|
-
}
|
|
5502
|
-
if (!noMediaQuery) {
|
|
5503
|
-
elementMainStyles += "\n @media (min-width: 0px) and (max-width: " + DesignTokens.sizes.sizeViewportSmall + ") {\n " + selector + " {\n " + getMediaQueryStyles(props, propToStyleMap, MediaQueryDevices.MOBILE) + "\n }\n }\n @media (min-width: " + (parseFloat(DesignTokens.sizes.sizeViewportSmall) +
|
|
5504
|
-
1) + "px) and (max-width: " + DesignTokens.sizes.sizeViewportMedium + ") {\n " + selector + " {\n " + getMediaQueryStyles(props, propToStyleMap, MediaQueryDevices.TABLETPORTRAIT) + "\n }\n }\n @media (min-width: " + (parseFloat(DesignTokens.sizes.sizeViewportMedium) +
|
|
5505
|
-
1) + "px) and (max-width: " + DesignTokens.sizes.sizeViewportLarge + ") {\n " + selector + " {\n " + getMediaQueryStyles(props, propToStyleMap, MediaQueryDevices.TABLETLANDSCAPE) + "\n }\n }\n @media (min-width: " + DesignTokens.sizes.sizeViewportLarge + ") {\n " + selector + " {\n " + getMediaQueryStyles(props, propToStyleMap, MediaQueryDevices.DESKTOP) + "\n }\n }";
|
|
5506
|
-
}
|
|
5507
|
-
return elementMainStyles;
|
|
5508
|
-
};
|
|
5531
|
+
var css_248z$O = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-grid {\n display: grid;\n box-sizing: border-box;\n}\nhtml.dough-IE11 .dough-grid {\n display: -ms-grid;\n}\n.dough-grid.dough-padding-top-none {\n padding-top: 0;\n}\n.dough-grid.dough-padding-right-none {\n padding-right: 0;\n}\n.dough-grid.dough-padding-bottom-none {\n padding-bottom: 0;\n}\n.dough-grid.dough-padding-left-none {\n padding-left: 0;\n}\n.dough-grid.dough-padding-none {\n padding: 0;\n}\n.dough-grid.dough-padding-top-huge {\n padding-top: 48px;\n}\n.dough-grid.dough-padding-right-huge {\n padding-right: 48px;\n}\n.dough-grid.dough-padding-bottom-huge {\n padding-bottom: 48px;\n}\n.dough-grid.dough-padding-left-huge {\n padding-left: 48px;\n}\n.dough-grid.dough-padding-huge {\n padding: 48px;\n}\n.dough-grid.dough-padding-top-extra-large {\n padding-top: 40px;\n}\n.dough-grid.dough-padding-right-extra-large {\n padding-right: 40px;\n}\n.dough-grid.dough-padding-bottom-extra-large {\n padding-bottom: 40px;\n}\n.dough-grid.dough-padding-left-extra-large {\n padding-left: 40px;\n}\n.dough-grid.dough-padding-extra-large {\n padding: 40px;\n}\n.dough-grid.dough-padding-top-large {\n padding-top: 32px;\n}\n.dough-grid.dough-padding-right-large {\n padding-right: 32px;\n}\n.dough-grid.dough-padding-bottom-large {\n padding-bottom: 32px;\n}\n.dough-grid.dough-padding-left-large {\n padding-left: 32px;\n}\n.dough-grid.dough-padding-large {\n padding: 32px;\n}\n.dough-grid.dough-padding-top-normal {\n padding-top: 24px;\n}\n.dough-grid.dough-padding-right-normal {\n padding-right: 24px;\n}\n.dough-grid.dough-padding-bottom-normal {\n padding-bottom: 24px;\n}\n.dough-grid.dough-padding-left-normal {\n padding-left: 24px;\n}\n.dough-grid.dough-padding-normal {\n padding: 24px;\n}\n.dough-grid.dough-padding-top-small {\n padding-top: 16px;\n}\n.dough-grid.dough-padding-right-small {\n padding-right: 16px;\n}\n.dough-grid.dough-padding-bottom-small {\n padding-bottom: 16px;\n}\n.dough-grid.dough-padding-left-small {\n padding-left: 16px;\n}\n.dough-grid.dough-padding-small {\n padding: 16px;\n}\n.dough-grid.dough-padding-top-extra-small {\n padding-top: 8px;\n}\n.dough-grid.dough-padding-right-extra-small {\n padding-right: 8px;\n}\n.dough-grid.dough-padding-bottom-extra-small {\n padding-bottom: 8px;\n}\n.dough-grid.dough-padding-left-extra-small {\n padding-left: 8px;\n}\n.dough-grid.dough-padding-extra-small {\n padding: 8px;\n}\n.dough-grid.dough-padding-top-tiny {\n padding-top: 4px;\n}\n.dough-grid.dough-padding-right-tiny {\n padding-right: 4px;\n}\n.dough-grid.dough-padding-bottom-tiny {\n padding-bottom: 4px;\n}\n.dough-grid.dough-padding-left-tiny {\n padding-left: 4px;\n}\n.dough-grid.dough-padding-tiny {\n padding: 4px;\n}\n\n.dough-grid-item {\n position: relative;\n display: block;\n}";
|
|
5532
|
+
styleInject(css_248z$O);
|
|
5509
5533
|
|
|
5510
5534
|
var GridItemsAlignment;
|
|
5511
5535
|
(function (GridItemsAlignment) {
|
|
@@ -5602,4 +5626,4 @@ GridItem.displayName = "GridItem";
|
|
|
5602
5626
|
|
|
5603
5627
|
injectRobotoFont();
|
|
5604
5628
|
|
|
5605
|
-
export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreadCrumbText, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, Carousel, CheckBox, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DoughDateInput, DoughListItem, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, Notification, NumericInput, Overlay, PanelOverlay, Paragraph, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, UnorderedList, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, setBreakpointSizeManually };
|
|
5629
|
+
export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreadCrumbText, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, Carousel, CheckBox, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DoughDateInput, DoughListItem, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, Notification, NumericInput, Overlay, PanelOverlay, Paragraph, ProgressBar, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, UnorderedList, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, setBreakpointSizeManually };
|