@telia-ace/widget-components-area 1.3.58-rc.0 → 1.3.58-rc.1

package/area-C_etcvzs.mjs

@@ -0,0 +1,182 @@
+import { jsx as n, jsxs as G } from "react/jsx-runtime";
+import { css as S } from "@emotion/react";
+import u from "@emotion/styled";
+import { WidgetRenderState as d } from "@telia-ace/widget-core";
+import { isModalActive as I, genericComponentStyling as T, Component as w } from "@telia-ace/widget-types-grid";
+import { useContainer as A, TransitionComponent as F, Grid as E, useComponentDescriptor as H, useRenderState as J, useContext as K, useProperties as Q, useChildren as U, useScroll as V, createEmptyComponent as X, ColumnContext as D, filterCssProps as Y, Dropdown as Z, DrawerAnimationType as _, Drawer as ee, filterCssPropsStyle as te, paddedBorderTabStyle as ne, Button as re, Text as oe, SymbolBadge as ie } from "@telia-ace/widget-ui";
+import { appendClassNames as b, Logger as se } from "@telia-ace/widget-utilities";
+import { forwardRef as ae, useEffect as le, useCallback as ce } from "react";
+import { A as m } from "./index-DFgNeZBv.mjs";
+const me = ae(
+  ({ children: e, className: t, renderState: o, animation: s, ...p }, c) => {
+    const a = A();
+    return le(() => {
+      if (o === "open") {
+        const i = a.get("widgetDOMElement");
+        if (a.get("triggerDOMElement") && i && !I(i))
+          return;
+        const l = document.querySelector(
+          `[data-node-id='${p.id}']`
+        );
+        l && l.focus();
+      }
+    }), o ? /* @__PURE__ */ n(
+      F,
+      {
+        mountOnEnter: o !== d.hidden,
+        timeout: 200,
+        in: o === d.open,
+        transitions: s,
+        unmountOnExit: o === d.closed,
+        children: (i, l) => /* @__PURE__ */ n(
+          de,
+          {
+            ...p,
+            tabIndex: "-1",
+            animationCss: l,
+            "data-state": i,
+            ref: c,
+            className: b("humany-animated-area", t),
+            children: e
+          }
+        )
+      }
+    ) : null;
+  }
+), de = u(E)`
+  ${T}
+  ${(e) => !!e.animationCss && e.animationCss}
+  ${(e) => !!e.scrollableCss && e.scrollableCss}
+  text-size-adjust: 100%;
+  input::-ms-clear {
+    display: none;
+  }
+  :focus-visible {
+    outline: none !important;
+  }
+  ${(e) => e.hidden && e["data-state"] === "exited" && S`
+      visibility: collapse;
+      pointer-events: none;
+    `};
+`, Se = ({ className: e, ...t }) => {
+  const { name: o } = H(), s = J(), p = K(), c = Q(), a = U(), i = A(), { gap: l = "0" } = p, {
+    columns: h = 1,
+    animation: f = "none",
+    scrollable: P = !1,
+    mode: g = m.Static,
+    trigger: M = {},
+    fullScreen: O,
+    header: j,
+    ...z
+  } = c, { size: B = 24, symbol: C, label: $, ariaLabel: N, ...R } = M, [L, W] = V(P), k = ce(
+    (r) => {
+      const { events: q } = i.get("$widget");
+      return q.dispatch("widget:area-rendered", {
+        name: o,
+        properties: c,
+        element: r
+      }), W.current = r, r;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [c, s]
+  );
+  if (!a.length)
+    return X(i, {
+      ...t,
+      className: b(e, "humany-area")
+    });
+  const x = {
+    ...t,
+    className: b(
+      e,
+      "humany-area",
+      `humany-area-${o}`
+    ),
+    scrollableCss: L,
+    ...z,
+    columns: h,
+    gap: l,
+    renderState: s,
+    animation: f,
+    hidden: s === d.hidden,
+    ref: k
+  }, y = f !== "none" ? /* @__PURE__ */ n(D.Provider, { value: h, children: /* @__PURE__ */ n(me, { ...x, children: a.map((r) => /* @__PURE__ */ n(w, { id: r.id, branch: "default" }, r.id)) }) }) : s === d.closed ? null : /* @__PURE__ */ n(D.Provider, { value: h, children: /* @__PURE__ */ n(ge, { ...x, children: a.map((r) => /* @__PURE__ */ n(w, { id: r.id, branch: "default" }, r.id)) }) });
+  if (g === m.Static)
+    return y;
+  const v = /* @__PURE__ */ G(
+    ue,
+    {
+      className: "humany-area-trigger",
+      title: N,
+      ...Y(R),
+      children: [
+        $ && /* @__PURE__ */ n(pe, { children: $ }),
+        C && /* @__PURE__ */ n(fe, { symbol: C, size: B })
+      ]
+    }
+  );
+  if (g === m.Dropdown)
+    return /* @__PURE__ */ n(Z, { trigger: v, children: y });
+  if (g === m.Drawer) {
+    const r = Object.values(_).includes(f) && {
+      type: f
+    } || void 0;
+    return /* @__PURE__ */ n(
+      ee,
+      {
+        header: j,
+        animation: r,
+        fullScreen: O,
+        trigger: v,
+        children: y
+      }
+    );
+  }
+  return g === m.Modal && se.warn("modal area not implemented"), null;
+}, ue = u(re)`
+  display: flex;
+  align-items: inherit;
+  align-self: center;
+  width: fit-content;
+  height: fit-content;
+  ${te}
+
+  ${(e) => e.theme.fonts && `
+    font-family: ${e.theme.fonts.type};
+    font-size: ${e.theme.fonts.normal};
+  `}
+
+  &:focus-visible {
+    ${ne};
+  }
+`, pe = u(oe)`
+  margin: 0 ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}} 0 0;
+  color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+`, fe = u(ie)`
+  path {
+    fill: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+  }
+`, ge = u(E)`
+  ${T}
+  ${(e) => !!e.scrollableCss && e.scrollableCss}
+  text-size-adjust: 100%;
+  input::-ms-clear {
+    display: none;
+  }
+  ${(e) => e.hidden && S`
+      visibility: collapse;
+      pointer-events: none;
+    `};
+`;
+export {
+  Se as default
+};

package/area-z-whIfPj.js

@@ -0,0 +1,50 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),M=require("@emotion/react"),p=require("@emotion/styled"),m=require("@telia-ace/widget-core"),g=require("@telia-ace/widget-types-grid"),t=require("@telia-ace/widget-ui"),x=require("@telia-ace/widget-utilities"),$=require("react"),u=require("./index-COv3jJWQ.js"),G=$.forwardRef(({children:e,className:n,renderState:i,animation:a,...f},c)=>{const l=t.useContainer();return $.useEffect(()=>{if(i==="open"){const o=l.get("widgetDOMElement");if(l.get("triggerDOMElement")&&o&&!g.isModalActive(o))return;const d=document.querySelector(`[data-node-id='${f.id}']`);d&&d.focus()}}),i?r.jsx(t.TransitionComponent,{mountOnEnter:i!==m.WidgetRenderState.hidden,timeout:200,in:i===m.WidgetRenderState.open,transitions:a,unmountOnExit:i===m.WidgetRenderState.closed,children:(o,d)=>r.jsx(L,{...f,tabIndex:"-1",animationCss:d,"data-state":o,ref:c,className:x.appendClassNames("humany-animated-area",n),children:e})}):null}),L=p(t.Grid)`
+  ${g.genericComponentStyling}
+  ${e=>!!e.animationCss&&e.animationCss}
+  ${e=>!!e.scrollableCss&&e.scrollableCss}
+  text-size-adjust: 100%;
+  input::-ms-clear {
+    display: none;
+  }
+  :focus-visible {
+    outline: none !important;
+  }
+  ${e=>e.hidden&&e["data-state"]==="exited"&&M.css`
+      visibility: collapse;
+      pointer-events: none;
+    `};
+`,U=({className:e,...n})=>{const{name:i}=t.useComponentDescriptor(),a=t.useRenderState(),f=t.useContext(),c=t.useProperties(),l=t.useChildren(),o=t.useContainer(),{gap:d="0"}=f,{columns:y=1,animation:h="none",scrollable:q=!1,mode:C=u.AreaMode.Static,trigger:A={},fullScreen:T,header:D,...R}=c,{size:P=24,symbol:j,label:w,ariaLabel:E,...O}=A,[W,N]=t.useScroll(q),z=$.useCallback(s=>{const{events:B}=o.get("$widget");return B.dispatch("widget:area-rendered",{name:i,properties:c,element:s}),N.current=s,s},[c,a]);if(!l.length)return t.createEmptyComponent(o,{...n,className:x.appendClassNames(e,"humany-area")});const S={...n,className:x.appendClassNames(e,"humany-area",`humany-area-${i}`),scrollableCss:W,...R,columns:y,gap:d,renderState:a,animation:h,hidden:a===m.WidgetRenderState.hidden,ref:z},b=h!=="none"?r.jsx(t.ColumnContext.Provider,{value:y,children:r.jsx(G,{...S,children:l.map(s=>r.jsx(g.Component,{id:s.id,branch:"default"},s.id))})}):a===m.WidgetRenderState.closed?null:r.jsx(t.ColumnContext.Provider,{value:y,children:r.jsx(H,{...S,children:l.map(s=>r.jsx(g.Component,{id:s.id,branch:"default"},s.id))})});if(C===u.AreaMode.Static)return b;const v=r.jsxs(k,{className:"humany-area-trigger",title:E,...t.filterCssProps(O),children:[w&&r.jsx(I,{children:w}),j&&r.jsx(F,{symbol:j,size:P})]});if(C===u.AreaMode.Dropdown)return r.jsx(t.Dropdown,{trigger:v,children:b});if(C===u.AreaMode.Drawer){const s=Object.values(t.DrawerAnimationType).includes(h)&&{type:h}||void 0;return r.jsx(t.Drawer,{header:D,animation:s,fullScreen:T,trigger:v,children:b})}return C===u.AreaMode.Modal&&x.Logger.warn("modal area not implemented"),null},k=p(t.Button)`
+  display: flex;
+  align-items: inherit;
+  align-self: center;
+  width: fit-content;
+  height: fit-content;
+  ${t.filterCssPropsStyle}
+
+  ${e=>e.theme.fonts&&`
+    font-family: ${e.theme.fonts.type};
+    font-size: ${e.theme.fonts.normal};
+  `}
+
+  &:focus-visible {
+    ${t.paddedBorderTabStyle};
+  }
+`,I=p(t.Text)`
+  margin: 0 ${e=>{var n;return(n=e.theme.sizes)==null?void 0:n.small}} 0 0;
+  color: ${e=>{var n;return(n=e.theme.colors)==null?void 0:n.text}};
+`,F=p(t.SymbolBadge)`
+  path {
+    fill: ${e=>{var n;return(n=e.theme.colors)==null?void 0:n.text}};
+  }
+`,H=p(t.Grid)`
+  ${g.genericComponentStyling}
+  ${e=>!!e.scrollableCss&&e.scrollableCss}
+  text-size-adjust: 100%;
+  input::-ms-clear {
+    display: none;
+  }
+  ${e=>e.hidden&&M.css`
+      visibility: collapse;
+      pointer-events: none;
+    `};
+`;exports.default=U;

package/{index-CWPZwxU2.js → index-COv3jJWQ.js}

@@ -1 +1 @@
-"use strict";const t=require("@telia-ace/widget-ui");var r=(e=>(e.Static="static",e.Drawer="drawer",e.Dropdown="dropdown",e.Modal="modal",e))(r||{});const o=e=>t.createReactComponent(e,"area",Promise.resolve().then(()=>require("./area-DyI3HP8x.js")),n=>{});exports.AreaComponent=o;exports.AreaMode=r;
+"use strict";const t=require("@telia-ace/widget-ui");var r=(e=>(e.Static="static",e.Drawer="drawer",e.Dropdown="dropdown",e.Modal="modal",e))(r||{});const o=e=>t.createReactComponent(e,"area",Promise.resolve().then(()=>require("./area-z-whIfPj.js")),n=>{});exports.AreaComponent=o;exports.AreaMode=r;

package/{index-B0bvuHPd.mjs → index-DFgNeZBv.mjs}

@@ -3,7 +3,7 @@ var o = /* @__PURE__ */ ((r) => (r.Static = "static", r.Drawer = "drawer", r.Dro
 const p = (r) => t(
   r,
   "area",
-  import("./area-CZoTvAjY.mjs"),
+  import("./area-C_etcvzs.mjs"),
   (a) => {
   }
 );

package/index.js

@@ -1 +1 @@
-"use strict";const e=require("./index-CWPZwxU2.js");module.exports=e.AreaComponent;
+"use strict";const e=require("./index-COv3jJWQ.js");module.exports=e.AreaComponent;

package/index.mjs

@@ -1,4 +1,4 @@
-import { a as f } from "./index-B0bvuHPd.mjs";
+import { a as f } from "./index-DFgNeZBv.mjs";
 export {
   f as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/widget-components-area",
-  "version": "1.3.58-rc.0",
+  "version": "1.3.58-rc.1",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -10,10 +10,10 @@
     }
   },
   "dependencies": {
-    "@telia-ace/widget-core": "^1.3.58-rc.0",
-    "@telia-ace/widget-types-grid": "^1.3.58-rc.0",
-    "@telia-ace/widget-ui": "^1.3.58-rc.0",
-    "@telia-ace/widget-utilities": "^1.3.58-rc.0",
+    "@telia-ace/widget-core": "^1.3.58-rc.1",
+    "@telia-ace/widget-types-grid": "^1.3.58-rc.1",
+    "@telia-ace/widget-ui": "^1.3.58-rc.1",
+    "@telia-ace/widget-utilities": "^1.3.58-rc.1",
     "@webprovisions/platform": "^1.1.4"
   },
   "peerDependencies": {

package/area-CZoTvAjY.mjs

@@ -1,176 +0,0 @@
-import { jsx as n, jsxs as q } from "react/jsx-runtime";
-import { css as S } from "@emotion/react";
-import m from "@emotion/styled";
-import { WidgetRenderState as c } from "@telia-ace/widget-core";
-import { genericComponentStyling as T, Component as v } from "@telia-ace/widget-types-grid";
-import { TransitionComponent as G, Grid as P, useComponentDescriptor as I, useRenderState as F, useContext as H, useProperties as J, useChildren as K, useContainer as Q, useScroll as U, createEmptyComponent as V, ColumnContext as w, filterCssProps as X, Dropdown as Y, DrawerAnimationType as Z, Drawer as _, filterCssPropsStyle as ee, paddedBorderTabStyle as te, Button as ne, Text as re, SymbolBadge as oe } from "@telia-ace/widget-ui";
-import { appendClassNames as y, Logger as ie } from "@telia-ace/widget-utilities";
-import { forwardRef as se, useEffect as ae, useCallback as le } from "react";
-import { A as l } from "./index-B0bvuHPd.mjs";
-const ce = se(
-  ({ children: e, className: t, renderState: o, animation: s, ...d }, a) => (ae(() => {
-    if (o === "open") {
-      const i = document.querySelector(
-        `[data-node-id='${d.id}']`
-      );
-      i && i.focus();
-    }
-  }), o ? /* @__PURE__ */ n(
-    G,
-    {
-      mountOnEnter: o !== c.hidden,
-      timeout: 200,
-      in: o === c.open,
-      transitions: s,
-      unmountOnExit: o === c.closed,
-      children: (i, u) => /* @__PURE__ */ n(
-        me,
-        {
-          ...d,
-          tabIndex: "-1",
-          animationCss: u,
-          "data-state": i,
-          ref: a,
-          className: y("humany-animated-area", t),
-          children: e
-        }
-      )
-    }
-  ) : null)
-), me = m(P)`
-  ${T}
-  ${(e) => !!e.animationCss && e.animationCss}
-  ${(e) => !!e.scrollableCss && e.scrollableCss}
-  text-size-adjust: 100%;
-  input::-ms-clear {
-    display: none;
-  }
-  :focus-visible {
-    outline: none !important;
-  }
-  ${(e) => e.hidden && e["data-state"] === "exited" && S`
-      visibility: collapse;
-      pointer-events: none;
-    `};
-`, Se = ({ className: e, ...t }) => {
-  const { name: o } = I(), s = F(), d = H(), a = J(), i = K(), u = Q(), { gap: A = "0" } = d, {
-    columns: g = 1,
-    animation: p = "none",
-    scrollable: D = !1,
-    mode: f = l.Static,
-    trigger: j = {},
-    fullScreen: z,
-    header: B,
-    ...E
-  } = a, { size: N = 24, symbol: b, label: C, ariaLabel: R, ...L } = j, [O, W] = U(D), M = le(
-    (r) => {
-      const { events: k } = u.get("$widget");
-      return k.dispatch("widget:area-rendered", {
-        name: o,
-        properties: a,
-        element: r
-      }), W.current = r, r;
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [a, s]
-  );
-  if (!i.length)
-    return V(u, {
-      ...t,
-      className: y(e, "humany-area")
-    });
-  const $ = {
-    ...t,
-    className: y(
-      e,
-      "humany-area",
-      `humany-area-${o}`
-    ),
-    scrollableCss: O,
-    ...E,
-    columns: g,
-    gap: A,
-    renderState: s,
-    animation: p,
-    hidden: s === c.hidden,
-    ref: M
-  }, h = p !== "none" ? /* @__PURE__ */ n(w.Provider, { value: g, children: /* @__PURE__ */ n(ce, { ...$, children: i.map((r) => /* @__PURE__ */ n(v, { id: r.id, branch: "default" }, r.id)) }) }) : s === c.closed ? null : /* @__PURE__ */ n(w.Provider, { value: g, children: /* @__PURE__ */ n(fe, { ...$, children: i.map((r) => /* @__PURE__ */ n(v, { id: r.id, branch: "default" }, r.id)) }) });
-  if (f === l.Static)
-    return h;
-  const x = /* @__PURE__ */ q(
-    de,
-    {
-      className: "humany-area-trigger",
-      title: R,
-      ...X(L),
-      children: [
-        C && /* @__PURE__ */ n(ue, { children: C }),
-        b && /* @__PURE__ */ n(pe, { symbol: b, size: N })
-      ]
-    }
-  );
-  if (f === l.Dropdown)
-    return /* @__PURE__ */ n(Y, { trigger: x, children: h });
-  if (f === l.Drawer) {
-    const r = Object.values(Z).includes(p) && {
-      type: p
-    } || void 0;
-    return /* @__PURE__ */ n(
-      _,
-      {
-        header: B,
-        animation: r,
-        fullScreen: z,
-        trigger: x,
-        children: h
-      }
-    );
-  }
-  return f === l.Modal && ie.warn("modal area not implemented"), null;
-}, de = m(ne)`
-  display: flex;
-  align-items: inherit;
-  align-self: center;
-  width: fit-content;
-  height: fit-content;
-  ${ee}
-
-  ${(e) => e.theme.fonts && `
-    font-family: ${e.theme.fonts.type};
-    font-size: ${e.theme.fonts.normal};
-  `}
-
-  &:focus-visible {
-    ${te};
-  }
-`, ue = m(re)`
-  margin: 0 ${(e) => {
-  var t;
-  return (t = e.theme.sizes) == null ? void 0 : t.small;
-}} 0 0;
-  color: ${(e) => {
-  var t;
-  return (t = e.theme.colors) == null ? void 0 : t.text;
-}};
-`, pe = m(oe)`
-  path {
-    fill: ${(e) => {
-  var t;
-  return (t = e.theme.colors) == null ? void 0 : t.text;
-}};
-  }
-`, fe = m(P)`
-  ${T}
-  ${(e) => !!e.scrollableCss && e.scrollableCss}
-  text-size-adjust: 100%;
-  input::-ms-clear {
-    display: none;
-  }
-  ${(e) => e.hidden && S`
-      visibility: collapse;
-      pointer-events: none;
-    `};
-`;
-export {
-  Se as default
-};

package/area-DyI3HP8x.js

@@ -1,50 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),v=require("@emotion/react"),u=require("@emotion/styled"),c=require("@telia-ace/widget-core"),C=require("@telia-ace/widget-types-grid"),t=require("@telia-ace/widget-ui"),h=require("@telia-ace/widget-utilities"),b=require("react"),d=require("./index-CWPZwxU2.js"),G=b.forwardRef(({children:e,className:n,renderState:i,animation:a,...m},l)=>(b.useEffect(()=>{if(i==="open"){const o=document.querySelector(`[data-node-id='${m.id}']`);o&&o.focus()}}),i?r.jsx(t.TransitionComponent,{mountOnEnter:i!==c.WidgetRenderState.hidden,timeout:200,in:i===c.WidgetRenderState.open,transitions:a,unmountOnExit:i===c.WidgetRenderState.closed,children:(o,p)=>r.jsx(L,{...m,tabIndex:"-1",animationCss:p,"data-state":o,ref:l,className:h.appendClassNames("humany-animated-area",n),children:e})}):null)),L=u(t.Grid)`
-  ${C.genericComponentStyling}
-  ${e=>!!e.animationCss&&e.animationCss}
-  ${e=>!!e.scrollableCss&&e.scrollableCss}
-  text-size-adjust: 100%;
-  input::-ms-clear {
-    display: none;
-  }
-  :focus-visible {
-    outline: none !important;
-  }
-  ${e=>e.hidden&&e["data-state"]==="exited"&&v.css`
-      visibility: collapse;
-      pointer-events: none;
-    `};
-`,U=({className:e,...n})=>{const{name:i}=t.useComponentDescriptor(),a=t.useRenderState(),m=t.useContext(),l=t.useProperties(),o=t.useChildren(),p=t.useContainer(),{gap:q="0"}=m,{columns:x=1,animation:g="none",scrollable:T=!1,mode:f=d.AreaMode.Static,trigger:A={},fullScreen:R,header:P,...M}=l,{size:W=24,symbol:$,label:j,ariaLabel:D,...N}=A,[z,B]=t.useScroll(T),E=b.useCallback(s=>{const{events:O}=p.get("$widget");return O.dispatch("widget:area-rendered",{name:i,properties:l,element:s}),B.current=s,s},[l,a]);if(!o.length)return t.createEmptyComponent(p,{...n,className:h.appendClassNames(e,"humany-area")});const w={...n,className:h.appendClassNames(e,"humany-area",`humany-area-${i}`),scrollableCss:z,...M,columns:x,gap:q,renderState:a,animation:g,hidden:a===c.WidgetRenderState.hidden,ref:E},y=g!=="none"?r.jsx(t.ColumnContext.Provider,{value:x,children:r.jsx(G,{...w,children:o.map(s=>r.jsx(C.Component,{id:s.id,branch:"default"},s.id))})}):a===c.WidgetRenderState.closed?null:r.jsx(t.ColumnContext.Provider,{value:x,children:r.jsx(H,{...w,children:o.map(s=>r.jsx(C.Component,{id:s.id,branch:"default"},s.id))})});if(f===d.AreaMode.Static)return y;const S=r.jsxs(k,{className:"humany-area-trigger",title:D,...t.filterCssProps(N),children:[j&&r.jsx(I,{children:j}),$&&r.jsx(F,{symbol:$,size:W})]});if(f===d.AreaMode.Dropdown)return r.jsx(t.Dropdown,{trigger:S,children:y});if(f===d.AreaMode.Drawer){const s=Object.values(t.DrawerAnimationType).includes(g)&&{type:g}||void 0;return r.jsx(t.Drawer,{header:P,animation:s,fullScreen:R,trigger:S,children:y})}return f===d.AreaMode.Modal&&h.Logger.warn("modal area not implemented"),null},k=u(t.Button)`
-  display: flex;
-  align-items: inherit;
-  align-self: center;
-  width: fit-content;
-  height: fit-content;
-  ${t.filterCssPropsStyle}
-
-  ${e=>e.theme.fonts&&`
-    font-family: ${e.theme.fonts.type};
-    font-size: ${e.theme.fonts.normal};
-  `}
-
-  &:focus-visible {
-    ${t.paddedBorderTabStyle};
-  }
-`,I=u(t.Text)`
-  margin: 0 ${e=>{var n;return(n=e.theme.sizes)==null?void 0:n.small}} 0 0;
-  color: ${e=>{var n;return(n=e.theme.colors)==null?void 0:n.text}};
-`,F=u(t.SymbolBadge)`
-  path {
-    fill: ${e=>{var n;return(n=e.theme.colors)==null?void 0:n.text}};
-  }
-`,H=u(t.Grid)`
-  ${C.genericComponentStyling}
-  ${e=>!!e.scrollableCss&&e.scrollableCss}
-  text-size-adjust: 100%;
-  input::-ms-clear {
-    display: none;
-  }
-  ${e=>e.hidden&&v.css`
-      visibility: collapse;
-      pointer-events: none;
-    `};
-`;exports.default=U;