@splunk/react-ui 5.0.0-beta.3 → 5.0.0-beta.5

package/Layer.js

@@ -73,28 +73,28 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        LayerContext: () => /* reexport */ g,
-        LayerStackContext: () => /* reexport */ b,
-        LayerStackGlobalProvider: () => /* reexport */ w,
-        default: () => /* reexport */ K
+        LayerContext: () => /* reexport */ b,
+        LayerStackContext: () => /* reexport */ g,
+        LayerStackGlobalProvider: () => /* reexport */ E,
+        default: () => /* reexport */ G
     });
     // CONCATENATED MODULE: external "react"
     const n = require("react");
     var r =  e.n(n);
     // CONCATENATED MODULE: external "react-dom"
-    const a = require("react-dom");
+    const o = require("react-dom");
     // CONCATENATED MODULE: external "prop-types"
-    const o = require("prop-types");
-    var i =  e.n(o);
+    const a = require("prop-types");
+    var i =  e.n(a);
     // CONCATENATED MODULE: external "lodash/includes"
-    const l = require("lodash/includes");
-    var u =  e.n(l);
+    const u = require("lodash/includes");
+    var l =  e.n(u);
     // CONCATENATED MODULE: external "lodash/last"
     const c = require("lodash/last");
     var s =  e.n(c);
     // CONCATENATED MODULE: external "lodash/pull"
-    const d = require("lodash/pull");
-    var f =  e.n(d);
+    const f = require("lodash/pull");
+    var d =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
     const v = require("@splunk/react-ui/EventListener");
     var y =  e.n(v);
@@ -109,8 +109,8 @@
  * depend on it, such as `Modal`) uses to determine the order of open layers.
  * @public
  */
-    var b =  r().createContext([]);
-    var g =  r().createContext({});
+    var g =  r().createContext([]);
+    var b =  r().createContext({});
     var C = {
         children: i().node,
         name: i().string,
@@ -122,37 +122,37 @@
  * A `LayerStackContext` provider that stores a shared layer stack using a global variable.
  * Applications should only use this provider if there's a known need to support multiple
  * instances of this library on the same page.
- */    function w(t) {
-        var a = t.children, o = t.name, i = o === void 0 ? "__splunkui_layer_instances__" : o, l = t.scope, u = l === void 0 ? typeof window !== "undefined" ? window : e.g : l, c = t.separateStackingContexts, s = c === void 0 ? false : c;
-        if (!u[i]) {
-            u[i] = [];
+ */    function E(t) {
+        var o = t.children, a = t.name, i = a === void 0 ? "__splunkui_layer_instances__" : a, u = t.scope, l = u === void 0 ? typeof window !== "undefined" ? window : e.g : u, c = t.separateStackingContexts, s = c === void 0 ? false : c;
+        if (!l[i]) {
+            l[i] = [];
  // eslint-disable-line no-param-reassign
                 }
-        var d = (0, n.useMemo)((function() {
+        var f = (0, n.useMemo)((function() {
             return {
                 separateStackingContexts: s
             };
         }), [ s ]);
         
-        return r().createElement(b.Provider, {
-            value: u[i]
-        },  r().createElement(g.Provider, {
-            value: d
-        }, a));
+        return r().createElement(g.Provider, {
+            value: l[i]
+        },  r().createElement(b.Provider, {
+            value: f
+        }, o));
     }
-    w.propTypes = C;
+    E.propTypes = C;
     // CONCATENATED MODULE: external "styled-components"
-    const E = require("styled-components");
-    var S =  e.n(E);
+    const S = require("styled-components");
+    var k =  e.n(S);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const k = require("@splunk/themes");
+    const w = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Layer/LayerStyles.ts
-    var x = S().div.withConfig({
+    var T = k().div.withConfig({
         displayName: "LayerStyles__StyledLayer",
         componentId: "ii6psl-0"
     })([ "", "" ], (function(e) {
         var t = e.$separateStackingContexts;
-        return t && (0, E.css)([ "isolation:isolate;z-index:", ";" ], k.variables.zindexLayer);
+        return t && (0, S.css)([ "isolation:isolate;position:relative;z-index:", ";" ], w.variables.zindexLayer);
     }));
     // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
@@ -210,102 +210,167 @@
             search: ""
         }
     };
-    function T() {
+    function x() {
         var e = typeof document !== "undefined" ? document : q;
         return e;
     }
+    var A = x();
+    /* harmony default export */    const L = /* unused pure expression or super */ null && A;
+    // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
+    /* eslint-disable @typescript-eslint/no-empty-function */
+    var _ = {
+        document: q,
+        navigator: {
+            userAgent: ""
+        },
+        location: {
+            hash: "",
+            host: "",
+            hostname: "",
+            href: "",
+            origin: "",
+            pathname: "",
+            protocol: "",
+            search: ""
+        },
+        history: {
+            replaceState: function e() {},
+            pushState: function e() {},
+            go: function e() {},
+            back: function e() {}
+        },
+        CustomEvent: function e() {
+            return this;
+        },
+        addEventListener: function e() {},
+        removeEventListener: function e() {},
+        getComputedStyle: function e() {
+            return {
+                getPropertyValue: function e() {
+                    return "";
+                }
+            };
+        },
+        Image: function e() {},
+        Date: function e() {},
+        screen: {},
+        setTimeout: function e() {},
+        clearTimeout: function e() {},
+        matchMedia: function e() {
+            return {};
+        },
+        requestAnimationFrame: function e(t) {
+            if (typeof setTimeout === "undefined") {
+                t();
+                return null;
+            }
+            return setTimeout(t, 0);
+        },
+        cancelAnimationFrame: function e(t) {
+            if (typeof setTimeout === "undefined") {
+                return;
+            }
+            clearTimeout(t);
+        }
+    };
+    function j() {
+        var e = typeof window !== "undefined" ? window : _;
+        return e;
+    }
+    var O = j();
+    /* harmony default export */    const P = O;
     // CONCATENATED MODULE: ./src/Layer/Layer.tsx
-    function A(e, t) {
-        return P(e) || O(e, t) || _(e, t) || L();
+    function M(e, t) {
+        return D(e) || F(e, t) || N(e, t) || I();
     }
-    function L() {
+    function I() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function _(e, t) {
+    function N(e, t) {
         if (e) {
-            if ("string" == typeof e) return j(e, t);
+            if ("string" == typeof e) return R(e, t);
             var n = {}.toString.call(e).slice(8, -1);
-            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? j(e, t) : void 0;
+            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? R(e, t) : void 0;
         }
     }
-    function j(e, t) {
+    function R(e, t) {
         (null == t || t > e.length) && (t = e.length);
         for (var n = 0, r = Array(t); n < t; n++) {
             r[n] = e[n];
         }
         return r;
     }
-    function O(e, t) {
+    function F(e, t) {
         var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != n) {
-            var r, a, o, i, l = [], u = !0, c = !1;
+            var r, o, a, i, u = [], l = !0, c = !1;
             try {
-                if (o = (n = n.call(e)).next, 0 === t) {
+                if (a = (n = n.call(e)).next, 0 === t) {
                     if (Object(n) !== n) return;
-                    u = !1;
-                } else for (;!(u = (r = o.call(n)).done) && (l.push(r.value), l.length !== t); u = !0) {
+                    l = !1;
+                } else for (;!(l = (r = a.call(n)).done) && (u.push(r.value), u.length !== t); l = !0) {
                 }
             } catch (e) {
-                c = !0, a = e;
+                c = !0, o = e;
             } finally {
                 try {
-                    if (!u && null != n["return"] && (i = n["return"](), Object(i) !== i)) return;
+                    if (!l && null != n["return"] && (i = n["return"](), Object(i) !== i)) return;
                 } finally {
-                    if (c) throw a;
+                    if (c) throw o;
                 }
             }
-            return l;
+            return u;
         }
     }
-    function P(e) {
+    function D(e) {
         if (Array.isArray(e)) return e;
     }
     /** @public */
-    /** @public */    var M = [ "clickAway", "escapeKey" ];
-    var I = {
+    /** @public */    var K = [ "clickAway", "escapeKey" ];
+    var $ = {
         children: i().node,
-        closeReasons: i().arrayOf(i().oneOf(M)),
+        closeReasons: i().arrayOf(i().oneOf(K)),
         onRequestClose: i().func,
         open: i().bool
     };
-    var N = {
+    var z = {
         passive: true
     };
     // we need a custom type here in order to set layerContainer as a property
-        var R = function e(t) {
-        var o = t.children, i = t.closeReasons, l = i === void 0 ? M : i, c = t.open, d = t.onRequestClose;
-        var v = (0, n.useContext)(g), p = v.separateStackingContexts;
-        var C = (0, n.useContext)(b);
-        var w = (0, n.useRef)(null);
-        var E = (0, n.useState)((0, h.createGUID)()), S = A(E, 1), k = S[0];
+        var B = function e(t) {
+        var a = t.children, i = t.closeReasons, u = i === void 0 ? K : i, c = t.open, f = t.onRequestClose;
+        var v = (0, n.useContext)(b), p = v.separateStackingContexts;
+        var C = (0, n.useContext)(g);
+        var E = (0, n.useRef)(null);
+        var S = (0, n.useState)((0, h.createGUID)()), k = M(S, 1), w = k[0];
         var q = m()(c);
         (0, n.useEffect)((function() {
             if (c && !q) {
-                C.push(k);
+                C.push(w);
             } else if (q && !c) {
-                f()(C, k);
+                d()(C, w);
             }
-        }), [ k, C, c, q ]);
+        }), [ w, C, c, q ]);
         // it is not part of the previous useEffect because it needs to be equivalent to componentWillUnmount
         // the previous useEffect will get re-run every time open and prevOpen change which is not what we want
                 (0, n.useEffect)((function() {
             return function() {
-                f()(C, k);
+                d()(C, w);
             };
-        }), [ k, C ]);
+        }), [ w, C ]);
         if (!e.layerContainer) {
-            var L = T();
-            var _ = L.createElement("div");
-            _.setAttribute("data-test", "layer-container");
-            L.body.appendChild(_);
-            e.layerContainer = _;
+            var A = x();
+            var L = A.createElement("div");
+            L.setAttribute("data-test", "layer-container");
+            A.body.appendChild(L);
+            e.layerContainer = L;
         }
         // the fullscreen API does not render elements outside the fullscreen element
         // Layer renders in document.body, which means that anything using Layer will not render in fullscreen
         // this code moves the layer container into the fullscreen element, ensuring that it will render
-                var j = (0, n.useCallback)((function() {
+                var _ = (0, n.useCallback)((function() {
             if (e.layerContainer) {
-                var t = T();
+                var t = x();
                 if (t.fullscreenElement != null) {
                     t.fullscreenElement.appendChild(e.layerContainer);
                 } else {
@@ -313,69 +378,69 @@
                 }
             }
         }), []);
-        var O = (0, n.useCallback)((function(e) {
+        var j = (0, n.useCallback)((function(e) {
             var t = e.nativeEvent;
-            w.current = t;
+            E.current = t;
         }), []);
-        var P = (0, n.useCallback)((function(e) {
+        var O = (0, n.useCallback)((function(e) {
             // clicks inside the layer should not be considered clickAways
-            if (!c || !u()(l, "clickAway") || w.current === e) {
+            if (!c || !l()(u, "clickAway") || E.current === e) {
                 return;
             }
-            d === null || d === void 0 ? void 0 : d({
+            f === null || f === void 0 ? void 0 : f({
                 event: e,
                 reason: "clickAway"
             });
-        }), [ l, c, d ]);
+        }), [ u, c, f ]);
         var I = (0, n.useCallback)((function(e) {
-            if (c && e.key === "Escape" && s()(C) === k && u()(l, "escapeKey")) {
-                d === null || d === void 0 ? void 0 : d({
+            if (c && e.key === "Escape" && s()(C) === w && l()(u, "escapeKey")) {
+                f === null || f === void 0 ? void 0 : f({
                     event: e,
                     reason: "escapeKey"
                 });
             }
-        }), [ l, k, C, c, d ]);
-        var R =  r().createElement(y(), {
-            target: window,
+        }), [ u, w, C, c, f ]);
+        var N =  r().createElement(y(), {
+            target: P,
             eventType: "fullscreenchange",
-            listener: j,
+            listener: _,
             key: "fullScreenChange"
         });
         if (c) {
-            var K =  (0, a.createPortal)( r().createElement(x, {
+            var R =  (0, o.createPortal)( r().createElement(T, {
                 $separateStackingContexts: p,
                 "data-test": "layer",
-                onMouseDown: O,
-                onTouchStart: O
-            }, o), e.layerContainer);
+                onMouseDown: j,
+                onTouchStart: j
+            }, a), e.layerContainer);
             
             return r().createElement(r().Fragment, null,  r().createElement(y(), {
-                target: window,
+                target: P,
                 eventType: "keydown",
                 listener: I,
                 key: "eventListenerKeydown"
             }),  r().createElement(y(), {
-                target: window,
+                target: P,
                 eventType: "mousedown",
-                listener: P,
+                listener: O,
                 key: "eventListenerMouseDown"
             }),  r().createElement(y(), {
-                target: window,
+                target: P,
                 eventType: "touchstart",
-                listener: P,
+                listener: O,
                 key: "eventListenerTouchStart",
-                options: N
-            }), R, K);
+                options: z
+            }), N, R);
         }
         // the fragment has to be present to avoid type issues with React 18
         // eslint-disable-next-line react/jsx-no-useless-fragment
                 
-        return r().createElement(r().Fragment, null, R);
+        return r().createElement(r().Fragment, null, N);
     };
-    R.propTypes = I;
-    R.layerContainer = null;
-    R.possibleCloseReasons = M;
-    /* harmony default export */    const K = R;
+    B.propTypes = $;
+    B.layerContainer = null;
+    B.possibleCloseReasons = K;
+    /* harmony default export */    const G = B;
     // CONCATENATED MODULE: ./src/Layer/index.ts
     module.exports = t;
     /******/})();

package/Layout.d.ts

@@ -0,0 +1,2 @@
+export { default } from './types/src/Layout';
+export * from './types/src/Layout';

package/Link.js

@@ -89,10 +89,10 @@
     })([ "vertical-align:text-bottom;margin-left:", ";" ], f.variables.spacingXSmall);
     /* harmony default export */    const v = b;
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const m = require("@splunk/react-ui/Clickable");
-    var h =  e.n(m);
+    const g = require("@splunk/react-ui/Clickable");
+    var m =  e.n(g);
     // CONCATENATED MODULE: ./src/Link/LinkStyles.ts
-    var y = d()(h()).withConfig({
+    var h = d()(m()).withConfig({
         displayName: "LinkStyles__StyledClickable",
         componentId: "sc-1hhltcf-0"
     })([ "", ";text-decoration:none;font-size:inherit;font-weight:inherit;line-height:inherit;color:", ";", " &:not([disabled],[aria-disabled='true']){cursor:pointer;&:hover,&:active,&:focus{color:", ";text-decoration:underline;text-decoration-thickness:2px;}&:focus{box-shadow:", ";outline:0;&:active{box-shadow:none;}}}&[disabled],&[aria-disabled='true']{color:", ";}" ], f.mixins.reset("inline"), f.variables.contentColorLink, (0, 
@@ -101,8 +101,8 @@
         standalone: (0, c.css)([ "font-weight:", ";" ], f.variables.fontWeightSemiBold)
     }), f.variables.contentColorLink, f.variables.focusShadow, f.variables.contentColorDisabled);
     // CONCATENATED MODULE: ./src/Link/Link.tsx
-    function g() {
-        return g = Object.assign ? Object.assign.bind() : function(e) {
+    function y() {
+        return y = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -110,7 +110,7 @@
                 }
             }
             return e;
-        }, g.apply(null, arguments);
+        }, y.apply(null, arguments);
     }
     function w(e, n) {
         if (null == e) return {};
@@ -146,20 +146,27 @@
     /**
  * `Link` is a simple method for configuring `Button` for inline links. For more complex behaviors,
  * see the `Button` documentation.
- */    var k =  r().forwardRef((function(e, n) {
-        var t = e.appearance, o = t === void 0 ? "inline" : t, a = e.children, i = e.disabled, s = i === void 0 ? false : i, c = e.elementRef, d = e.openInNewContext, u = d === void 0 ? false : d, p = e.to, f = w(e, [ "appearance", "children", "disabled", "elementRef", "openInNewContext", "to" ]);
+ */    var k =  r().forwardRef((function(e, 
+    // SUI-7623 - needs to be specified for react-docgen versions less than 7.1.0
+    n) {
+        var t = e.appearance, o = t === void 0 ? "inline" : t, a = e.children, i = e.disabled, s = i === void 0 ? false : i, c = e.elementRef, d = e.openInNewContext, u = d === void 0 ? false : d, p = e.tag, f = p === void 0 ? "a" : p, b = e.to, g = w(e, [ "appearance", "children", "disabled", "elementRef", "openInNewContext", "tag", "to" ]);
         // @docs-props-type LinkPropsBase
-                var b = typeof u === "string" ? u : S;
+                var m = typeof u === "string" ? u : S;
+        // Ensure `Link` always renders as an `a` (unless overriden by `tag`) by passing a value to Clickable,
+        // using '' if disabled or the to is not passed.
+                var O = s && "" || b && b || "";
         
-        return r().createElement(y, g({
+        return r().createElement(h, y({
             "data-test": "link",
-            disabled: s,
+            disabled: s ? "disabled" : undefined,
             elementRef: c,
             openInNewContext: !!u,
             $appearance: o,
             ref: n,
-            to: s ? "" : p
-        }, f), a, u &&  r().createElement(r().Fragment, null,  r().createElement(v, null),  r().createElement(l(), null, b)));
+            to: O
+        }, g, {
+            tag: f
+        }), a, u &&  r().createElement(r().Fragment, null,  r().createElement(v, null),  r().createElement(l(), null, m)));
     }));
     k.propTypes = x;
     /* harmony default export */    const C = k;

package/MIGRATION.v5.mdx

@@ -207,7 +207,7 @@ Components that formerly supported class focus methods (`Color`, `Link`, `Menu`,
 ### Migration steps
 - Convert all usage of `ref` to `elementRef`.
 - For `Number` and `Text`: Replace all usage of the class `focus` method with passing a `ref` to the `inputRef` prop and calling `inputRef.current.focus()`.
-- For `Button`, `Color`, `Link`, `Menu`, `Select.Option`, `SplitButton.Item`, and `TabBar.Tab`: Replace all usage of the class `focus` method with passing a `ref` to the `elementRef` prop and calling `elementRef.current.focus()`.
+- For `Button`, `Color`, `Link`, `Menu`, `Multiselect.Option`, `Select.Option`, `SplitButton.Item`, and `TabBar.Tab`: Replace all usage of the class `focus` method with passing a `ref` to the `elementRef` prop and calling `elementRef.current.focus()`.
 - For `Table.HeadDropdownCell`: Replace all usage of the class `focus` method with passing a `ref` to the `buttonRef` prop and calling `buttonRef.current.focus()`.
 - For `Switch`: Replace all usage of the class `focus` method with passing a `ref` to the `toggleRef` prop and calling `toggleRef.current.focus()`.
 - For `Slider`: Replace all usage of the class `focus` method with passing a `ref` to the `thumbRef` prop and calling `thumbRef.current.focus()`.
@@ -261,6 +261,18 @@ This difference can cause confusion and conflict with accessibility expectations
 #### Migration steps
 - Replace Select with appearance="link" by using either appearance="default" or appearance="subtle", depending on design requirements.
 
+### Deprecated `TabBar` and `TabLayout`'s `iconPosition` prop
+
+#### Change
+`TabBar` and `TabLayouts`'s `iconPosition` prop is deprecated and will be removed in the next major version.
+
+#### Context
+`TabBar`'s `iconPosition="above"` value is deprecated because stacking an icon above text creates a vertical layout that’s harder to scan quickly, especially when multiple `Tab`s are present. The added vertical space can make the `TabBar` taller and more visually crowded, reducing the clarity and simplicity that `TabBar`s are supposed to offer.
+Due to this `TabBar`'s `iconPosition` would only have the value of `left` remaining thus there is no longer a need for the `iconPosition` prop to specify icon positioning. Because `TabLayout` uses `TabBar` its matching prop is deprecated as well.
+
+#### Migration steps
+- Remove any setting of `TabBar` or `TabLayout`'s `iconPosition` prop and instead allow its default behavior of left icon positioning to take effect when icons are passed.
+
 ### Deprecated `Multiselect`'s `selectAllAppearance="buttongroup"` value
 
 #### Change
@@ -437,3 +449,38 @@ Pass a `ref` that refers to an HTML Element to the `anchor` prop.
 ### Migration steps
 
 Replace all usage of `Switch`'s test hook `[data-test="button"]` with `[data-test="toggle"]`.
+
+## `TabBar`'s `tabWidth` prop has been removed
+
+### Change
+`TabBar`'s `tabWidth` prop has been removed. A new `maxTabWidth` prop has been added to support some use cases previously supported by the `tabWidth` prop.
+
+### Context
+In previous versions `TabBar.Tab`s could have their width statically set by passing the `tabWidth` prop to the `TabBar`. However, the updated design for `TabBar` has responsive widths for `TabBar.Tab`s so setting a static tab width is no longer supported.
+
+### Migration steps
+There are were two possible use cases for `tabWidth`:
+
+1) If you desire each `Tab` to not exceed a certain width, use `maxTabWidth`.
+2) If you desire each `Tab` to be the exact same width, we recommend against this - please reach out to us if you have a specific use case in mind.
+
+## Deprecated `Card.Header`'s `anchor` prop
+
+### Change
+
+`Card.Header`'s `anchor` prop has been deprecated and will be removed in the next major version.
+
+### Context
+
+Card titles need to be headings when there is content underneath to satisfy accessibility requirement WCAG 1.3.1.
+The recommended way to do this is to pass the `Heading` component into the `title` prop.
+
+The anchor prop leads to visual issues when non-text content (such as a Heading is passed to the `title` attribute). 
+To avoid this and because the functionality of the `anchor` prop can be achieved by passing the `Anchor` component to the `title` prop,
+we have deprecated the `anchor` prop.
+
+### Migration steps
+Replace all usage of the `anchor` prop with passing in the `Anchor` component to the `title` prop:
+```jsx
+    <Card.Header title={<Anchor name="Title">Title</Anchor>} />
+```

package/Markdown.js

@@ -179,7 +179,7 @@
     var E = a().code.withConfig({
         displayName: "MarkdownStyles__StyledCodeInline",
         componentId: "sc-1xadih-1"
-    })([ "", ";font-family:", ";background-color:", ";" ], k.mixins.reset("inline"), k.variables.monoFontFamily, k.variables.neutral100);
+    })([ "", ";font-size:inherit;font-family:", ";background-color:", ";" ], k.mixins.reset("inline"), k.variables.monoFontFamily, k.variables.neutral100);
     var R = a().blockquote.withConfig({
         displayName: "MarkdownStyles__StyledHint",
         componentId: "sc-1xadih-2"

package/Menu.js

@@ -119,7 +119,7 @@
     var C = d()(g()).withConfig({
         displayName: "ItemStyles__StyledNonInteractiveCheckbox",
         componentId: "sc-4kc053-4"
-    })([ "padding-right:", ";" ], f.variables.spacingSmall);
+    })([ "min-height:0;padding-right:", ";" ], f.variables.spacingSmall);
     var I = d()(b()).withConfig({
         displayName: "ItemStyles__StyledClickable",
         componentId: "sc-4kc053-5"