@splunk/react-ui 5.3.0 → 5.4.0

package/Switch.js

@@ -90,9 +90,9 @@
     var m =  e.n(g);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
     const h = require("@splunk/react-ui/Clickable");
-    var k =  e.n(h);
+    var y =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const y = require("@splunk/themes");
+    const k = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Switch/SwitchStyles.ts
     var C = "20px";
     var S = "12px";
@@ -101,31 +101,31 @@
         var w = u()(m()).withConfig({
         displayName: "SwitchStyles__StyledBox",
         componentId: "sc-844ieu-0"
-    })([ "display:inline;position:relative;flex-shrink:0;gap:", ";min-height:", ";align-items:center;color:", ";", "" ], y.variables.spacingSmall, y.variables.inputHeight, y.variables.contentColorActive, (function(e) {
+    })([ "display:inline;position:relative;flex-shrink:0;gap:", ";min-height:", ";align-items:center;color:", ";", "" ], k.variables.spacingSmall, k.variables.inputHeight, k.variables.contentColorActive, (function(e) {
         var r = e.$disabled;
-        return r && (0, s.css)([ "color:", ";" ], y.variables.contentColorDisabled);
+        return r && (0, s.css)([ "color:", ";" ], k.variables.contentColorDisabled);
     }));
-    var B = (0, s.css)([ "", " position:relative;width:", ";height:", ";line-height:", ";border-radius:", ";border:", " solid ", ";background-color:", ";cursor:pointer;flex:0 0 auto;&:not([disabled]){&:focus{box-shadow:", ";}color:", ";", "}&[disabled]{border-color:", ";background-color:", ";", ";}" ], y.mixins.reset("inline"), C, C, C, y.variables.borderRadius, y.variables.inputBorderWidth, y.variables.interactiveColorBorder, y.variables.interactiveColorBackground, y.variables.focusShadow, (0, 
-    y.pick)({
-        light: y.variables.white,
-        dark: y.variables.black
+    var B = (0, s.css)([ "", " position:relative;width:", ";height:", ";line-height:", ";border-radius:", ";border:", " solid ", ";background-color:", ";cursor:pointer;flex:0 0 auto;&:not([disabled]){&:focus{box-shadow:", ";}color:", ";", "}&[disabled]{border-color:", ";background-color:", ";", ";}" ], k.mixins.reset("inline"), C, C, C, k.variables.borderRadius, k.variables.inputBorderWidth, k.variables.interactiveColorBorder, k.variables.interactiveColorBackground, k.variables.focusShadow, (0, 
+    k.pick)({
+        light: k.variables.white,
+        dark: k.variables.black
     }), (function(e) {
         var r = e.$error, a = e.$selected;
         if (a && !r) {
-            return (0, s.css)([ "background-color:", ";border:none;" ], y.variables.interactiveColorAccent);
+            return (0, s.css)([ "background-color:", ";border:none;" ], k.variables.interactiveColorAccent);
         }
         if (!a && r) {
-            return (0, s.css)([ "border-color:", ";&:hover{border-color:", ";background-color:", ";}" ], y.variables.interactiveColorAccentError, y.mixins.overlayColors(y.variables.interactiveColorAccentError, y.variables.interactiveColorBorderHover), y.mixins.overlayColors(y.variables.interactiveColorBackground, y.variables.interactiveColorOverlayHover));
+            return (0, s.css)([ "border-color:", ";&:hover{border-color:", ";background-color:", ";}" ], k.variables.interactiveColorAccentError, k.mixins.overlayColors(k.variables.interactiveColorAccentError, k.variables.interactiveColorBorderHover), k.mixins.overlayColors(k.variables.interactiveColorBackground, k.variables.interactiveColorOverlayHover));
         }
         if (a && r) {
-            return (0, s.css)([ "background-color:", ";border:none;" ], y.variables.interactiveColorAccentError);
+            return (0, s.css)([ "background-color:", ";border:none;" ], k.variables.interactiveColorAccentError);
         }
-        return (0, s.css)([ "&:hover{border-color:", ";background-color:", ";}" ], y.variables.interactiveColorBorderHover, y.mixins.overlayColors(y.variables.interactiveColorBackground, y.variables.interactiveColorOverlayHover));
-    }), y.variables.interactiveColorBorderDisabled, y.variables.interactiveColorBackgroundDisabled, (function(e) {
+        return (0, s.css)([ "&:hover{border-color:", ";background-color:", ";}" ], k.variables.interactiveColorBorderHover, k.mixins.overlayColors(k.variables.interactiveColorBackground, k.variables.interactiveColorOverlayHover));
+    }), k.variables.interactiveColorBorderDisabled, k.variables.interactiveColorBackgroundDisabled, (function(e) {
         var r = e.$selected;
-        return r && (0, s.css)([ "border:none;background-color:", ";" ], y.variables.neutral100);
+        return r && (0, s.css)([ "border:none;background-color:", ";" ], k.variables.neutral100);
     }));
-    var O = u()(k()).withConfig({
+    var O = u()(y()).withConfig({
         displayName: "SwitchStyles__StyledCheckboxClickable",
         componentId: "sc-844ieu-1"
     })([ "", "" ], B);
@@ -141,46 +141,46 @@
     var E = u().div.withConfig({
         displayName: "SwitchStyles__StyledToggleIndicator",
         componentId: "sc-844ieu-4"
-    })([ "--toggle-indicator-margin:calc(", " - ", ");background-color:", ";border-radius:50%;box-sizing:border-box;width:", ";height:", ";position:absolute;left:var(--toggle-indicator-margin);top:var(--toggle-indicator-margin);", ";", " ", " ", ";" ], x, y.variables.inputBorderWidth, (0, 
-    y.pick)({
-        light: y.variables.black,
-        dark: y.variables.white
+    })([ "--toggle-indicator-margin:calc( ", " - ", " );background-color:", ";border-radius:50%;box-sizing:border-box;width:", ";height:", ";position:absolute;left:var(--toggle-indicator-margin);top:var(--toggle-indicator-margin);", ";", " ", " ", ";" ], x, k.variables.inputBorderWidth, (0, 
+    k.pick)({
+        light: k.variables.black,
+        dark: k.variables.white
     }), S, S, (function(e) {
         var r = e.$delay;
         return r && (0, s.css)([ "transition:left ", ";" ], r);
-    }), (0, y.pick)({
-        prisma: (0, s.css)([ "box-shadow:", ";" ], y.variables.embossShadow)
+    }), (0, k.pick)({
+        prisma: (0, s.css)([ "box-shadow:", ";" ], k.variables.embossShadow)
     }), (function(e) {
         var r = e.$selected, a = e.$disabled;
         return (0, s.css)([ "", " ", "" ], r && (0, s.css)([ "left:calc(100% - (", " + var(--toggle-indicator-margin)));" ], S), !a && r && (0, 
-        s.css)([ "background-color:", ";" ], (0, y.pick)({
-            light: y.variables.white,
-            dark: y.variables.black
+        s.css)([ "background-color:", ";" ], (0, k.pick)({
+            light: k.variables.white,
+            dark: k.variables.black
         })));
     }), (function(e) {
         var r = e.$disabled;
-        return r && (0, s.css)([ "background-color:", ";" ], y.variables.neutral400);
+        return r && (0, s.css)([ "background-color:", ";" ], k.variables.neutral400);
     }));
-    var _ = (0, s.css)([ "position:relative;width:calc(", " * 2);height:", ";background-color:", ";transition:background-color ", ";flex:0 0 auto;border-radius:calc(", " / 2);border:", " solid ", ";&:not([disabled]){&:focus{box-shadow:", ";}", "}&[disabled]{border:", " solid ", ";background-color:", ";", "}" ], C, C, y.variables.interactiveColorBackground, (function(e) {
+    var _ = (0, s.css)([ "position:relative;width:calc(", " * 2);height:", ";background-color:", ";transition:background-color ", ";flex:0 0 auto;border-radius:calc(", " / 2);border:", " solid ", ";&:not([disabled]){&:focus{box-shadow:", ";}", "}&[disabled]{border:", " solid ", ";background-color:", ";", "}" ], C, C, k.variables.interactiveColorBackground, (function(e) {
         return e.$delay;
-    }), C, y.variables.inputBorderWidth, y.variables.interactiveColorBorder, y.variables.focusShadow, (function(e) {
+    }), C, k.variables.inputBorderWidth, k.variables.interactiveColorBorder, k.variables.focusShadow, (function(e) {
         var r = e.$selected;
         if (!r) {
-            return (0, s.css)([ "&:hover{border-color:", ";background-color:", ";}" ], y.variables.interactiveColorBorderHover, y.mixins.overlayColors(y.variables.interactiveColorBackground, y.variables.interactiveColorOverlayHover));
+            return (0, s.css)([ "&:hover{border-color:", ";background-color:", ";}" ], k.variables.interactiveColorBorderHover, k.mixins.overlayColors(k.variables.interactiveColorBackground, k.variables.interactiveColorOverlayHover));
         }
-        return (0, s.css)([ "border-color:transparent;background-color:", ";" ], y.variables.interactiveColorAccent);
-    }), y.variables.inputBorderWidth, y.variables.interactiveColorBorderDisabled, y.variables.interactiveColorBackgroundDisabled, (function(e) {
+        return (0, s.css)([ "border-color:transparent;background-color:", ";" ], k.variables.interactiveColorAccent);
+    }), k.variables.inputBorderWidth, k.variables.interactiveColorBorderDisabled, k.variables.interactiveColorBackgroundDisabled, (function(e) {
         var r = e.$selected;
-        return r && (0, s.css)([ "background-color:", ";" ], y.variables.neutral100);
+        return r && (0, s.css)([ "background-color:", ";" ], k.variables.neutral100);
     }));
-    var R = u()(k()).withConfig({
+    var R = u()(y()).withConfig({
         displayName: "SwitchStyles__StyledToggleClickable",
         componentId: "sc-844ieu-5"
     })([ "", "" ], _);
     var N = u().label.withConfig({
         displayName: "SwitchStyles__StyledLabel",
         componentId: "sc-844ieu-6"
-    })([ "", " flex:1 1 auto;color:inherit;line-height:", ";", ";" ], y.mixins.reset("inline-block"), y.variables.lineHeight, (function(e) {
+    })([ "", " flex:1 1 auto;color:inherit;line-height:", ";", ";" ], k.mixins.reset("inline-block"), k.variables.lineHeight, (function(e) {
         var r = e.$disabled;
         return !r && (0, s.css)([ "cursor:pointer;" ]);
     }));
@@ -261,6 +261,7 @@
     /** @public */    var V = {
         appearance: t().oneOf([ "checkbox", "toggle" ]),
         children: t().node,
+        describedBy: t().string,
         disabled: t().bool,
         elementRef: t().oneOfType([ t().func, t().object ]),
         error: t().bool,
@@ -280,65 +281,67 @@
     // eslint-disable-next-line docs-props-type-match
     // eslint-disable-next-line docs-props-type-match
         var W = function e(r) {
-        var a = r.ariaChecked, o = r.ariaInvalid, t = r.ariaLabelledBy, n = r.ariaRequired, c = r.dataTest, d = r.dataSelected, s = r.disabled, u = r.elementRef, b = r.id, v = r.onClick, f = r.selected;
-        var p = s === true ? "disabled" : undefined;
-        var g = (0, l.useAnimationToggle)();
-        var m = g === "on" ? "200ms" : undefined;
-        var h =  i().createElement(E, {
-            $delay: m,
-            $disabled: !!p,
-            $selected: f
+        var a = r.ariaChecked, o = r.ariaInvalid, t = r.ariaLabelledBy, n = r.ariaRequired, c = r.dataTest, d = r.dataSelected, s = r.describedBy, u = r.disabled, b = r.elementRef, v = r.id, f = r.onClick, p = r.selected;
+        var g = u === true ? "disabled" : undefined;
+        var m = (0, l.useAnimationToggle)();
+        var h = m === "on" ? "200ms" : undefined;
+        var y =  i().createElement(E, {
+            $delay: h,
+            $disabled: !!g,
+            $selected: p
         });
         
         return i().createElement(R, {
             role: "switch",
             "aria-checked": a,
+            "aria-describedby": s,
             "aria-invalid": o,
             "aria-labelledby": t,
             "aria-required": n,
             "data-selected": d,
             "data-test": c,
-            disabled: p,
-            elementRef: u,
-            id: b,
-            onClick: v,
-            $delay: m,
-            $selected: f || false
-        }, h);
+            disabled: g,
+            elementRef: b,
+            id: v,
+            onClick: f,
+            $delay: h,
+            $selected: p || false
+        }, y);
     };
     var F = function e(r) {
-        var a = r.ariaChecked, o = r.ariaInvalid, t = r.ariaLabelledBy, l = r.ariaRequired, n = r.dataTest, c = r.dataSelected, d = r.disabled, s = r.error, u = r.id, b = r.elementRef, v = r.onClick, f = r.role, p = r.selected, g = r.tabIndex;
+        var a = r.ariaChecked, o = r.ariaInvalid, t = r.ariaLabelledBy, l = r.ariaRequired, n = r.dataTest, c = r.dataSelected, d = r.describedBy, s = r.disabled, u = r.error, b = r.id, v = r.elementRef, f = r.onClick, p = r.role, g = r.selected, m = r.tabIndex;
         /* Setting viewbox to rescale the icons to appear larger. Cannot directly adjust svg
    * width and height without the svg being larger than the checkbox and box-model.
-   */        var m = "4 4 16 16";
-        var h =  i().createElement(i().Fragment, null, p === true &&  i().createElement(I, {
-            viewBox: m
-        }), p === "some" &&  i().createElement(q, {
-            viewBox: m
+   */        var h = "4 4 16 16";
+        var y =  i().createElement(i().Fragment, null, g === true &&  i().createElement(I, {
+            viewBox: h
+        }), g === "some" &&  i().createElement(q, {
+            viewBox: h
         }));
-        var k = d === true ? "disabled" : undefined;
+        var k = s === true ? "disabled" : undefined;
         
         return i().createElement(O, {
             "aria-checked": a,
+            "aria-describedby": d,
             "aria-invalid": o,
             "aria-labelledby": t,
             "aria-required": l,
             "data-selected": c,
             "data-test": n,
             disabled: k,
-            elementRef: b,
-            id: u,
-            onClick: v,
-            role: f || "checkbox",
-            tabIndex: g,
-            $error: s || false,
-            $selected: p === "some" || p || false
-        }, h);
+            elementRef: v,
+            id: b,
+            onClick: f,
+            role: p || "checkbox",
+            tabIndex: m,
+            $error: u || false,
+            $selected: g === "some" || g || false
+        }, y);
     };
     /**
  * `Switch` is a basic form control with an on/off state.
  */    function z(e) {
-        var r = e.appearance, o = r === void 0 ? "checkbox" : r, t = e.children, l = e.disabled, n = e.elementRef, s = e.error, u = e.id, b = e.inline, v = e.labelledBy, f = e.onClick, p = e.required, g = e.selected, m = e.selectedLabel, h = e.someSelectedLabel, k = e.role, y = e.tabIndex, C = e.toggleRef, S = e.unselectedLabel, x = e.value, B = H(e, [ "appearance", "children", "disabled", "elementRef", "error", "id", "inline", "labelledBy", "onClick", "required", "selected", "selectedLabel", "someSelectedLabel", "role", "tabIndex", "toggleRef", "unselectedLabel", "value" ]);
+        var r = e.appearance, o = r === void 0 ? "checkbox" : r, t = e.children, l = e.describedBy, n = e.disabled, s = e.elementRef, u = e.error, b = e.id, v = e.inline, f = e.labelledBy, p = e.onClick, g = e.required, m = e.selected, h = e.selectedLabel, y = e.someSelectedLabel, k = e.role, C = e.tabIndex, S = e.toggleRef, x = e.unselectedLabel, B = e.value, O = H(e, [ "appearance", "children", "describedBy", "disabled", "elementRef", "error", "id", "inline", "labelledBy", "onClick", "required", "selected", "selectedLabel", "someSelectedLabel", "role", "tabIndex", "toggleRef", "unselectedLabel", "value" ]);
         // @docs-props-type SwitchPropsBase
                 D({
             componentName: "Switch",
@@ -348,67 +351,68 @@
         });
         /* If has internal label defined with children, must have an id and must use generated labelId.
    * Otherwise, use customer defined id and external label.
-   */        var O = t && u == null ? (0, d.createDOMID)("clickable") : u;
-        var $ = t ? (0, d.createDOMID)("label") : v;
+   */        var $ = t && b == null ? (0, d.createDOMID)("clickable") : b;
+        var I = t ? (0, d.createDOMID)("label") : f;
         (0, a.useEffect)((function() {
             if (false) {}
             if (false) {}
-        }), [ g, o, s ]);
-        var I = (0, a.useCallback)((function(e) {
-            f === null || f === void 0 ? void 0 : f(e, {
-                value: x,
+        }), [ m, o, u ]);
+        var q = (0, a.useCallback)((function(e) {
+            p === null || p === void 0 ? void 0 : p(e, {
+                value: B,
                 // @ts-expect-error - safe due to individual prop interfaces
-                selected: g
+                selected: m
             });
-        }), [ f, x, g ]);
-        var q = (0, a.useCallback)((function(e) {
-            L(C, e);
-        }), [ C ]);
-        var E = g === "some" ? "mixed" : g;
-        var _ = {
-            true: m,
-            false: S,
-            some: h
-        };
+        }), [ p, B, m ]);
+        var E = (0, a.useCallback)((function(e) {
+            L(S, e);
+        }), [ S ]);
+        var _ = m === "some" ? "mixed" : m;
         var R = {
-            id: O,
-            onClick: l ? undefined : I,
-            elementRef: q,
-            ariaLabelledBy: $,
-            ariaChecked: E,
-            ariaInvalid: s ? true : undefined,
-            ariaRequired: p,
+            true: h,
+            false: x,
+            some: y
+        };
+        var T = {
+            id: $,
+            onClick: n ? undefined : q,
+            elementRef: E,
+            ariaLabelledBy: I,
+            ariaChecked: _,
+            ariaInvalid: u ? true : undefined,
+            ariaRequired: g,
             dataTest: "toggle",
-            dataSelected: g,
+            dataSelected: m,
+            describedBy: l,
             role: k,
-            tabIndex: y
+            tabIndex: C
         };
-        var T = !!m || !!h || !!S;
+        var j = !!h || !!y || !!x;
         
         return i().createElement(w, A({
             flex: true,
-            inline: b,
+            inline: v,
             "data-test": "switch",
-            "data-test-selected": g,
-            "data-test-value": x,
-            "data-test-error": s ? true : undefined,
-            "data-error": s ? true : undefined,
-            "data-test-disabled": l ? "disabled" : undefined,
-            elementRef: n,
-            $disabled: l || false
-        }, B), o === "toggle" ?  i().createElement(W, A({
-            disabled: l || false,
-            selected: !!g
-        }, R)) :  i().createElement(F, A({
-            error: s || false,
-            disabled: l || false,
-            selected: g
-        }, R)), T &&  i().createElement(c(), null, _["".concat(g)]), t &&  i().createElement(N, {
-            $disabled: l || false,
+            "data-test-selected": m,
+            "data-test-value": B,
+            "data-test-error": u ? true : undefined,
+            "data-error": u ? true : undefined,
+            "data-test-disabled": n ? "disabled" : undefined,
+            elementRef: s,
+            $disabled: n || false
+        }, O), o === "toggle" ?  i().createElement(W, A({
+            disabled: n || false,
+            selected: !!m
+        }, T)) :  i().createElement(F, A({
+            error: u || false,
+            disabled: n || false,
+            selected: m
+        }, T)), j &&  i().createElement(c(), null, R["".concat(m)]), t &&  i().createElement(N, {
+            $disabled: n || false,
             "data-test": "label",
-            id: $,
-            htmlFor: O,
-            "data-disabled": l || null
+            id: I,
+            htmlFor: $,
+            "data-disabled": n || null
         }, t));
     }
     z.propTypes = V;

package/TabBar.js

@@ -122,31 +122,31 @@
     var M = function e(t) {
         var n = t.$hasIcon, r = t.$hasMenu, a = t.$iconPosition;
         if (a === "above" && n && r) {
-            return (0, O.css)([ "grid-template-areas:'icon icon icon' 'menu-counter-neg-space label menu' 'gutter gutter gutter' 'underline underline underline';grid-template-columns:", " 1fr min-content;grid-template-rows:repeat(2,auto) ", " auto;" ], T.variables.spacingXSmall, T.variables.spacingXSmall);
+            return (0, O.css)([ "grid-template-areas:'icon icon icon' 'menu-counter-neg-space content menu' 'gutter gutter gutter' 'underline underline underline';grid-template-columns:", " 1fr min-content;grid-template-rows:repeat(2,auto) ", " auto;" ], T.variables.spacingXSmall, T.variables.spacingXSmall);
         }
         if (a === "above" && n) {
-            return (0, O.css)([ "grid-template-areas:'icon' 'label' 'gutter' 'underline';grid-template-columns:1fr;grid-template-rows:repeat(2,auto) ", " auto;" ], T.variables.spacingXSmall);
+            return (0, O.css)([ "grid-template-areas:'icon' 'content' 'gutter' 'underline';grid-template-columns:1fr;grid-template-rows:repeat(2,auto) ", " auto;" ], T.variables.spacingXSmall);
         }
         if (a === "left" && n && r) {
-            return (0, O.css)([ "grid-template-areas:'menu-counter-neg-space icon label menu' 'underline underline underline underline';grid-template-columns:", " min-content 1fr min-content;" ], T.variables.spacingXSmall);
+            return (0, O.css)([ "grid-template-areas:'menu-counter-neg-space icon content menu' 'underline underline underline underline';grid-template-columns:", " min-content 1fr min-content;" ], T.variables.spacingXSmall);
         }
         if (a === "left" && n) {
-            return (0, O.css)([ "grid-template-areas:'icon label' 'underline underline';grid-template-columns:min-content 1fr;" ]);
+            return (0, O.css)([ "grid-template-areas:'icon content' 'underline underline';grid-template-columns:min-content 1fr;" ]);
         }
         if (r) {
-            return (0, O.css)([ "grid-template-areas:'menu-counter-neg-space label menu' 'underline underline underline';grid-template-columns:", " minmax(auto,min-content) min-content;" ], T.variables.spacingXSmall);
+            return (0, O.css)([ "grid-template-areas:'menu-counter-neg-space content menu' 'underline underline underline';grid-template-columns:", " minmax(auto,min-content) min-content;" ], T.variables.spacingXSmall);
         }
-        return (0, O.css)([ "grid-template-areas:'label' 'underline';grid-template-columns:minmax(auto,min-content);" ]);
+        return (0, O.css)([ "grid-template-areas:'content' 'underline';grid-template-columns:minmax(auto,min-content);" ]);
     };
     var $ = function e(t) {
         var n = t.$hasIcon, r = t.$iconPosition;
         if (r === "above" && n) {
-            return (0, O.css)([ "grid-template-areas:'icon gutter underline' 'label gutter underline';grid-template-columns:1fr ", " ", ";" ], T.variables.spacingXSmall, P);
+            return (0, O.css)([ "grid-template-areas:'icon gutter underline' 'content gutter underline';grid-template-columns:1fr ", " ", ";" ], T.variables.spacingXSmall, P);
         }
         if (r === "left" && n) {
-            return (0, O.css)([ "grid-template-areas:'icon label gutter underline';grid-template-columns:min-content 1fr ", " ", ";" ], T.variables.spacingXSmall, P);
+            return (0, O.css)([ "grid-template-areas:'icon content gutter underline';grid-template-columns:min-content 1fr ", " ", ";" ], T.variables.spacingXSmall, P);
         }
-        return (0, O.css)([ "grid-template-areas:'label gutter underline';grid-template-columns:1fr ", " ", ";" ], T.variables.spacingXSmall, P);
+        return (0, O.css)([ "grid-template-areas:'content gutter underline';grid-template-columns:1fr ", " ", ";" ], T.variables.spacingXSmall, P);
     };
     var A = x()(k()).withConfig({
         displayName: "TabStyles__StyledClickable",
@@ -199,7 +199,7 @@
     var N = x().div.withConfig({
         displayName: "TabStyles__StyledContent",
         componentId: "sc-1ry8mzj-4"
-    })([ "display:inline-flex;align-items:baseline;grid-area:label;min-width:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", "" ], (function(e) {
+    })([ "display:inline-flex;align-items:baseline;grid-area:content;min-width:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", "" ], (function(e) {
         var t = e.$iconPosition;
         return t === "above" && (0, O.css)([ "justify-content:center;text-align:center;" ]);
     }));