@iress-oss/ids-components 6.0.0-alpha.1 → 6.0.0-alpha.2

package/dist/components/Select/Select.styles.js

@@ -16,7 +16,7 @@ const t = ["wrapper", "control", "element"], c = e({
       display: "block",
       width: "[100%]",
       height: "[calc({sizes.input.height} - 2px)]",
-      paddingInline: "spacing.200",
+      paddingInline: "spacing.2",
       appearance: "none",
       border: "[0]",
       background: "[transparent]",
@@ -32,7 +32,7 @@ const t = ["wrapper", "control", "element"], c = e({
     width: {
       2: {
         wrapper: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.2})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.2})]"
         },
         element: {
           width: "auto"
@@ -40,7 +40,7 @@ const t = ["wrapper", "control", "element"], c = e({
       },
       4: {
         wrapper: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.4})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.4})]"
         },
         element: {
           width: "auto"
@@ -48,7 +48,7 @@ const t = ["wrapper", "control", "element"], c = e({
       },
       6: {
         wrapper: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.6})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.6})]"
         },
         element: {
           width: "auto"
@@ -56,7 +56,7 @@ const t = ["wrapper", "control", "element"], c = e({
       },
       8: {
         wrapper: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.8})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.8})]"
         },
         element: {
           width: "auto"
@@ -64,7 +64,7 @@ const t = ["wrapper", "control", "element"], c = e({
       },
       10: {
         wrapper: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.10})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.10})]"
         },
         element: {
           width: "auto"
@@ -72,12 +72,12 @@ const t = ["wrapper", "control", "element"], c = e({
       },
       12: {
         wrapper: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.12})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.12})]"
         }
       },
       16: {
         wrapper: {
-          width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]"
+          width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]"
         },
         element: {
           width: "auto"

package/dist/components/Skeleton/Skeleton.styles.js

@@ -25,7 +25,7 @@ const o = t({
       },
       text: {
         width: "[100%]",
-        height: "[spacing.600]"
+        height: "[spacing.6]"
       }
     }
   },

package/dist/components/SkipLink/SkipLink.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
-import { I as p } from "../../Button-D6AL0bia.js";
+import { I as p } from "../../Button-mmhMLwp9.js";
 import "../Button/CloseButton/CloseButton.js";
 import { c as k } from "../../cx-DN21T1EH.js";
 import { skipLink as n } from "./SkipLink.styles.js";

package/dist/components/SkipLink/SkipLink.styles.js

@@ -6,7 +6,7 @@ const s = t({
     left: "[50%]",
     zIndex: "100",
     transform: "[translateX(-50%) translateY(-125%)]",
-    marginTop: "spacing.200",
+    marginTop: "spacing.2",
     _focus: {
       transform: "[translateX(-50%) translateY(0)]"
     }

package/dist/components/Slideout/Slideout.js

@@ -1,23 +1,23 @@
-import { jsx as C } from "react/jsx-runtime";
-import { c as V } from "../../cx-DN21T1EH.js";
-import { useState as ee, useRef as A, useEffect as b, useMemo as O, useCallback as te } from "react";
-import { u as ne, b as oe, c as re, d as se, e as le, g as ie } from "../../floating-ui.react-CmSaAiNF.js";
+import { jsx as _ } from "react/jsx-runtime";
+import { c as z } from "../../cx-DN21T1EH.js";
+import { useState as V, useRef as ee, useEffect as b, useMemo as A, useCallback as te } from "react";
+import { u as ne, b as oe, c as re, d as se, e as le, g as ie } from "../../floating-ui.react-BetVZ099.js";
 import { idsLogger as ue } from "../../helpers/utility/idsLogger.js";
 import { propagateTestid as ae } from "../../helpers/utility/propagateTestid.js";
 import { SlideoutInner as fe } from "./components/SlideoutInner.js";
 import { slideout as ce } from "./Slideout.styles.js";
 import { useIdIfNeeded as de } from "../../hooks/useIdIfNeeded.js";
 import { IressText as he } from "../Text/Text.js";
-import { usePushElement as me } from "./hooks/usePushElement.js";
-import { s as pe } from "../../is-valid-prop-Ce0wiweq.js";
-import { GlobalCSSClass as P } from "../../enums.js";
-import { timeStringToNumber as ge } from "../../helpers/transition/timeStringToNumber.js";
-import { useProviderSlideout as ye } from "./hooks/useProviderSlideout.js";
+import { usePushElement as pe } from "./hooks/usePushElement.js";
+import { s as me } from "../../is-valid-prop-Ce0wiweq.js";
+import { GlobalCSSClass as O } from "../../enums.js";
+import { useProviderSlideout as ge } from "./hooks/useProviderSlideout.js";
+import { getTransitionDuration as ye } from "../../helpers/transition/getTransitionDuration.js";
 function Se(o) {
   function l() {
     r && (e.length > 0 && /^[~+>]$/.test(e[e.length - 1]) && e.push(" "), e.push(r));
   }
-  var e = [], t, r, i, n = [0], s = 0, a, u = /(?:[^\\]|(?:^|[^\\])(?:\\\\)+)$/, d = /^\s+$/, p = [
+  var e = [], t, r, i, n = [0], s = 0, a, u = /(?:[^\\]|(?:^|[^\\])(?:\\\\)+)$/, d = /^\s+$/, m = [
     /\s+|\/\*|["'>~+[(]/g,
     // general
     /\s+|\/\*|["'[\]()]/g,
@@ -30,7 +30,7 @@ function Se(o) {
     // comment
   ];
   for (o = o.trim(); ; )
-    if (r = "", i = p[n[n.length - 1]], i.lastIndex = s, t = i.exec(o), t)
+    if (r = "", i = m[n[n.length - 1]], i.lastIndex = s, t = i.exec(o), t)
       if (a = s, s = i.lastIndex, a < s - t[0].length && (r = o.substring(
         a,
         s - t[0].length
@@ -40,7 +40,7 @@ function Se(o) {
         else if (t[0] === "(")
           n.push(2);
         else if (/^["']$/.test(t[0]))
-          n.push(3), p[3] = new RegExp(t[0], "g");
+          n.push(3), m[3] = new RegExp(t[0], "g");
         else if (t[0] === "/*")
           n.push(4);
         else if (/^[\])]$/.test(t[0]) && n.length > 0)
@@ -56,23 +56,23 @@ function Se(o) {
     }
   return e.join("").trim();
 }
-function be(o, l = document, e = null) {
-  return we(o, !1, l, e);
+function Ee(o, l = document, e = null) {
+  return be(o, !1, l, e);
 }
-function we(o, l, e, t = null) {
+function be(o, l, e, t = null) {
   o = Se(o);
   let r = e.querySelector(o);
-  return document.head.createShadowRoot || document.head.attachShadow ? r || _(o, ",").reduce((n, s) => {
+  return document.head.createShadowRoot || document.head.attachShadow ? r || C(o, ",").reduce((n, s) => {
     if (n)
       return n;
-    const a = _(s.replace(/^\s+/g, "").replace(/\s*([>+~]+)\s*/g, "$1"), " ").filter((g) => !!g).map((g) => _(g, ">")), u = a.length - 1, d = a[u][a[u].length - 1], p = Ie(d, e, t), E = Ee(a, u, e);
-    return n = p.find(E), n || null;
+    const a = C(s.replace(/^\s+/g, "").replace(/\s*([>+~]+)\s*/g, "$1"), " ").filter((g) => !!g).map((g) => C(g, ">")), u = a.length - 1, d = a[u][a[u].length - 1], m = Ne(d, e, t), w = we(a, u, e);
+    return n = m.find(w), n || null;
   }, null) : r;
 }
-function Ee(o, l, e) {
+function we(o, l, e) {
   return (t) => {
     let r = l, i = t, n = !1;
-    for (; i && !Ne(i); ) {
+    for (; i && !Ie(i); ) {
       let s = !0;
       if (o[r].length === 1)
         s = i.matches(o[r]);
@@ -96,17 +96,17 @@ function Ee(o, l, e) {
     return n;
   };
 }
-function _(o, l) {
+function C(o, l) {
   return o.match(/\\?.|^$/g).reduce((e, t) => (t === '"' && !e.sQuote ? (e.quote ^= 1, e.a[e.a.length - 1] += t) : t === "'" && !e.quote ? (e.sQuote ^= 1, e.a[e.a.length - 1] += t) : !e.quote && !e.sQuote && t === l ? e.a.push("") : e.a[e.a.length - 1] += t, e), { a: [""] }).a;
 }
-function Ne(o) {
+function Ie(o) {
   return o.nodeType === Node.DOCUMENT_FRAGMENT_NODE || o.nodeType === Node.DOCUMENT_NODE;
 }
 function T(o, l) {
   const e = o.parentNode;
   return e && e.host && e.nodeType === 11 ? e.host : e === l ? null : e;
 }
-function Ie(o = null, l, e = null) {
+function Ne(o = null, l, e = null) {
   let t = [];
   if (e)
     t = e;
@@ -133,69 +133,74 @@ const Ue = ({
   heading: a,
   mode: u = "overlay",
   onEntered: d,
-  onExited: p,
-  onShowChange: E,
+  onExited: m,
+  onShowChange: w,
   onStatus: g,
-  onTransitionEnd: R,
+  onTransitionEnd: D,
   position: y = "right",
-  show: N,
-  size: I = "sm",
-  style: F,
+  show: I,
+  size: N = "sm",
+  style: P,
   ...x
 }) => {
-  const [U, Q] = ee(i), M = A(240), S = A(null), w = ye(x.id), q = de({ id: x.id }), v = `${q}--heading`, j = w.opened || N || U, D = (f, m, k) => {
-    w?.show?.(f), Q(f), E?.(f, k);
+  const [F, U] = V(i);
+  let M = 240;
+  const S = ee(null), E = ge(x.id), R = de({ id: x.id }), v = `${R}--heading`, Q = E.opened || I || F, q = (f, p, k) => {
+    E?.show?.(f), U(f), w?.(f, k);
   }, { context: h } = ne({
-    open: j,
-    onOpenChange: D
-  }), G = oe(h, {
+    open: Q,
+    onOpenChange: q
+  }), j = oe(h, {
     enabled: !0,
     outsidePress: !1
-  }), H = re(h), B = se([G, H]), { isMounted: L, status: c } = le(h, {
-    duration: M.current
-  }), J = ce({
+  }), G = re(h), H = se([j, G]);
+  h.refs.floating.current && (M = ye(
+    h.refs.floating.current,
+    1.2,
+    240
+  ));
+  const { isMounted: B, status: c } = le(h, {
+    duration: M
+  }), L = ce({
     position: y,
-    size: I,
+    size: N,
     status: c,
     mode: u
   });
   b(() => {
-    w.opened && N && ue(
+    E.opened && I && ue(
       "IressSlideout: Please use either IressSlideoutProvider for uncontrolled components, or the show prop for controlled components, rather than both. If you use both, the open state of the slideout will become unpredictable. If you want to show a slideout by default in uncontrolled mode, use the defaultShow prop."
     );
-  }, [w.opened, N]), b(() => {
+  }, [E.opened, I]), b(() => {
     g?.(c);
   }, [c, g]), b(() => {
-    const f = (m) => typeof m == "string" ? be(m) : m instanceof Element ? m : m?.current;
+    const f = (p) => typeof p == "string" ? Ee(p) : p instanceof Element ? p : p?.current;
     return u === "overlay" ? S.current = null : S.current = f(n), () => {
       S.current = null;
     };
   }, [n, u]), b(() => {
-    c === "initial" && h.refs.floating?.current && (M.current = ge(
-      window.getComputedStyle(h.refs.floating.current, null)?.getPropertyValue("--iress-transition-duration") || ".3s"
-    ) * 1.2);
-  }, [h.refs.floating, c]), b(() => {
     c === "open" && h.refs.floating?.current?.focus();
   }, [h.refs.floating, c]);
-  const K = O(
+  const J = A(
     () => ({
+      // eslint-disable-next-line react-hooks/refs -- we want to forward the ref
       element: S.current ?? null,
       isActive: u === "push",
       position: y,
-      size: I,
+      size: N,
       status: c
     }),
-    [S, u, y, I, c]
+    [S, u, y, N, c]
   );
-  me(K);
-  const W = te(
+  pe(J);
+  const K = te(
     (f) => {
-      R?.(f);
-      const m = y === "right" ? "right" : "left";
-      !(f.propertyName === m || f.propertyName === "opacity" || !f.propertyName) || f.target !== f.currentTarget || (c === "open" ? d?.() : c === "close" && p?.());
+      D?.(f);
+      const p = y === "right" ? "right" : "left";
+      !(f.propertyName === p || f.propertyName === "opacity" || !f.propertyName) || f.target !== f.currentTarget || (c === "open" ? d?.() : c === "close" && m?.());
     },
-    [R, y, c, d, p]
-  ), $ = O(() => typeof a == "string" ? /* @__PURE__ */ C(
+    [D, y, c, d, m]
+  ), $ = A(() => typeof a == "string" ? /* @__PURE__ */ _(
     he,
     {
       id: v,
@@ -204,32 +209,32 @@ const Ue = ({
       children: a
     }
   ) : a, [r, v, a]);
-  if (!L) return null;
-  const X = V(
-    J.root,
+  if (!B) return null;
+  const W = z(
+    L.root,
     l,
-    P.Slideout,
-    c === "open" && P.SlideoutOpen
-  ), [Y, Z] = pe(x), z = {
+    O.Slideout,
+    c === "open" && O.SlideoutOpen
+  ), [X, Y] = me(x), Z = {
     "aria-labelledby": $ ? v : void 0,
     children: o,
-    className: X,
+    className: W,
     closeText: e,
     "data-testid": r,
     footer: s,
     floatingRef: (f) => h.refs.setFloating(f),
     heading: $,
-    id: q,
-    onOpenChange: D,
-    ...Y,
-    ...B.getFloatingProps(Z),
-    onTransitionEnd: W
+    id: R,
+    onOpenChange: q,
+    ...X,
+    ...H.getFloatingProps(Y),
+    onTransitionEnd: K
   };
-  return /* @__PURE__ */ C(ie, { root: t, children: /* @__PURE__ */ C(
+  return /* @__PURE__ */ _(ie, { root: t, children: /* @__PURE__ */ _(
     fe,
     {
-      ...z,
-      style: F,
+      ...Z,
+      style: P,
       "data-testid": r
     }
   ) });

package/dist/components/Slideout/Slideout.styles.js

@@ -5,7 +5,7 @@ const i = t({
     root: {
       textStyle: "typography.body.md",
       position: "fixed",
-      insetBlockStart: "spacing.000",
+      insetBlockStart: "spacing.0",
       height: "[100%]",
       maxWidth: "[100%]",
       overflowY: "auto",
@@ -31,15 +31,15 @@ const i = t({
     },
     closeButton: {
       position: "absolute",
-      insetInlineEnd: "spacing.050",
-      insetBlockStart: "spacing.050"
+      insetInlineEnd: "spacing.1",
+      insetBlockStart: "spacing.1"
     }
   },
   variants: {
     position: {
       right: {
         root: {
-          insetInlineEnd: "spacing.000",
+          insetInlineEnd: "spacing.0",
           borderStartStartRadius: "radius.050",
           borderEndStartRadius: "radius.050",
           borderStartEndRadius: "radius.000",
@@ -51,7 +51,7 @@ const i = t({
       },
       left: {
         root: {
-          insetInlineStart: "spacing.000",
+          insetInlineStart: "spacing.0",
           borderStartStartRadius: "radius.000",
           borderEndStartRadius: "radius.000",
           borderStartEndRadius: "radius.050",
@@ -143,7 +143,7 @@ const i = t({
       position: "right",
       css: {
         root: {
-          insetInlineEnd: "spacing.000"
+          insetInlineEnd: "spacing.0"
         }
       }
     },
@@ -152,7 +152,7 @@ const i = t({
       position: "left",
       css: {
         root: {
-          insetInlineStart: "spacing.000"
+          insetInlineStart: "spacing.0"
         }
       }
     }

package/dist/components/Slideout/components/SlideoutInner.js

@@ -1,6 +1,6 @@
 import { jsxs as c, jsx as d } from "react/jsx-runtime";
 import { propagateTestid as o } from "../../../helpers/utility/propagateTestid.js";
-import "../../../Button-D6AL0bia.js";
+import "../../../Button-mmhMLwp9.js";
 import { IressCloseButton as j } from "../../Button/CloseButton/CloseButton.js";
 import { slideout as v } from "../Slideout.styles.js";
 import { s as f } from "../../../factory-oPXoMw9H.js";

package/dist/components/Slideout/hooks/usePushElement.js

@@ -1,6 +1,6 @@
 import { useRef as m, useEffect as y } from "react";
 import { GlobalCSSClass as e } from "../../../enums.js";
-import { t as p } from "../../../index-CvOVcYUc.js";
+import { t as p } from "../../../index-CZ9ot38T.js";
 import { useBreakpoint as S } from "../../../hooks/useBreakpoint.js";
 function h({
   element: r,

package/dist/components/Slider/Slider.styles.js

@@ -19,7 +19,7 @@ const i = e({
       cursor: "pointer",
       borderRadius: "radius.100",
       height: "slider.thumb",
-      margin: "spacing.000",
+      margin: "spacing.0",
       width: "[100%]",
       _focus: {
         outline: "[none]"
@@ -59,7 +59,7 @@ const i = e({
       lineHeight: 1,
       "& option": {
         minHeight: "[0]",
-        padding: "spacing.000"
+        padding: "spacing.0"
       }
     },
     tickMark: {
@@ -67,7 +67,7 @@ const i = e({
       flex: "[0 0 0]",
       marginInlineStart: "var(--iress-tick-label-width)",
       width: "[0]",
-      padding: "spacing.000",
+      padding: "spacing.0",
       _selected: {
         _before: {
           backgroundColor: "colour.primary.fill"

package/dist/components/Stack/Stack.styles.js

@@ -4,7 +4,7 @@ const i = e({
     display: "flex",
     flexDirection: "column",
     "& > :not(.ids-field)": {
-      marginBlock: "spacing.000"
+      marginBlock: "spacing.0"
       // If you stick it in a stack, you should be using gap instead of margin to space the items inside the stack
     }
   },

package/dist/components/TabSet/Tab/Tab.js

@@ -6,7 +6,7 @@ import { createPortal as H } from "react-dom";
 import { s as K } from "../../../factory-oPXoMw9H.js";
 import { tab as q } from "./Tab.styles.js";
 import { c as G } from "../../../cx-DN21T1EH.js";
-import { a as U } from "../../../floating-ui.react-CmSaAiNF.js";
+import { a as U } from "../../../floating-ui.react-BetVZ099.js";
 import { focusableElements as W } from "../../../helpers/dom/focusableElements.js";
 import { GlobalCSSClass as Y } from "../../../enums.js";
 import { TabSetContext as z } from "../TabSetProvider.js";

package/dist/components/TabSet/Tab/Tab.styles.js

@@ -7,8 +7,8 @@ const e = t({
     display: "inline-flex",
     minHeight: "input.height",
     position: "relative",
-    px: "spacing.250",
-    py: "spacing.300",
+    px: "spacing.3",
+    py: "spacing.3",
     textOverflow: "ellipsis",
     textDecoration: "none",
     textStyle: "typography.body.md",

package/dist/components/TabSet/TabSet.js

@@ -1,92 +1,95 @@
-import { jsx as e, jsxs as v, Fragment as N } from "react/jsx-runtime";
-import { C as T } from "../../floating-ui.react-CmSaAiNF.js";
+import { jsx as e, jsxs as p, Fragment as N } from "react/jsx-runtime";
+import { C as T } from "../../floating-ui.react-BetVZ099.js";
 import { propagateTestid as C } from "../../helpers/utility/propagateTestid.js";
-import { TabSetProvider as y, TabSetContext as h } from "./TabSetProvider.js";
-import { useState as d, useContext as u, useEffect as x } from "react";
-import { s as m } from "../../factory-oPXoMw9H.js";
-import { tabSet as I } from "./TabSet.styles.js";
-import { c as n } from "../../cx-DN21T1EH.js";
-import { GlobalCSSClass as $ } from "../../enums.js";
-const g = (a) => {
-  const [c, r] = d({}), t = u(h);
+import { TabSetProvider as y, TabSetContext as v } from "./TabSetProvider.js";
+import { useState as u, useContext as h, useEffect as x, useRef as I } from "react";
+import { s as n } from "../../factory-oPXoMw9H.js";
+import { tabSet as $ } from "./TabSet.styles.js";
+import { c as m } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as g } from "../../enums.js";
+const j = (r) => {
+  const a = I({}), s = h(v);
+  let t;
+  if (s?.hover) {
+    const { offsetLeft: c, scrollWidth: o } = s.hover;
+    t = {
+      opacity: 1,
+      left: `${c}px`,
+      width: `${o}px`
+    };
+  } else
+    t = {
+      // eslint-disable-next-line react-hooks/refs -- we want to persist the previous style
+      ...a.current,
+      opacity: 0
+    };
   return x(() => {
-    if (t?.hover) {
-      const { offsetLeft: s, scrollWidth: o } = t.hover;
-      r({
-        opacity: 1,
-        left: `${s}px`,
-        width: `${o}px`
-      });
-    } else
-      r((s) => ({
-        ...s,
-        opacity: 0
-      }));
-  }, [t?.hover]), /* @__PURE__ */ e("div", { ...a, style: c });
-}, j = (a) => {
-  const [c, r] = d({}), t = u(h);
+    s?.hover && (a.current = t);
+  }, [s?.hover, t]), /* @__PURE__ */ e("div", { ...r, style: t });
+}, w = (r) => {
+  const [a, s] = u({}), t = h(v);
   return x(() => {
-    const s = setTimeout(() => {
+    const c = setTimeout(() => {
       if (t?.active) {
         const { offsetLeft: o, scrollWidth: l } = t.active;
-        r({
+        s({
           left: `${o}px`,
           width: `${l}px`
         });
       }
     }, 150);
-    return () => clearTimeout(s);
-  }, [t?.active]), /* @__PURE__ */ e("div", { ...a, style: c });
+    return () => clearTimeout(c);
+  }, [t?.active]), /* @__PURE__ */ e("div", { ...r, style: a });
 }, k = ({
-  children: a,
-  className: c,
-  defaultSelected: r,
+  children: r,
+  className: a,
+  defaultSelected: s,
   layout: t = "top-left",
-  onChange: s,
+  onChange: c,
   panelStyle: o,
   selected: l,
-  tabHolderStyle: f,
-  ...p
+  tabHolderStyle: d,
+  ...f
 }) => {
-  const [S, b] = d(null), i = I({ layout: t });
+  const [S, b] = u(null), i = $({ layout: t });
   return /* @__PURE__ */ e(
     y,
     {
-      defaultSelected: r,
-      onChange: s,
+      defaultSelected: s,
+      onChange: c,
       panel: S,
       selected: l,
       children: /* @__PURE__ */ e(
-        m.div,
+        n.div,
         {
-          className: n(c, i.root, $.TabSet),
-          ...p,
-          children: a && /* @__PURE__ */ v(N, { children: [
-            /* @__PURE__ */ v(
-              m.div,
+          className: m(a, i.root, g.TabSet),
+          ...f,
+          children: r && /* @__PURE__ */ p(N, { children: [
+            /* @__PURE__ */ p(
+              n.div,
               {
-                ...f,
-                className: n(i.listHolder, f?.className),
+                ...d,
+                className: m(i.listHolder, d?.className),
                 children: [
-                  /* @__PURE__ */ e(j, { className: i.activeIndicator }),
-                  /* @__PURE__ */ e(g, { className: i.hoverIndicator }),
+                  /* @__PURE__ */ e(w, { className: i.activeIndicator }),
+                  /* @__PURE__ */ e(j, { className: i.hoverIndicator }),
                   /* @__PURE__ */ e(
                     T,
                     {
                       render: /* @__PURE__ */ e("div", { className: i.list, role: "tablist" }),
                       loop: !1,
-                      children: a
+                      children: r
                     }
                   )
                 ]
               }
             ),
             /* @__PURE__ */ e(
-              m.div,
+              n.div,
               {
                 ...o,
-                className: n(i.panel, o?.className),
-                "data-testid": o?.["data-testid"] ?? C(p["data-testid"], "panel"),
+                className: m(i.panel, o?.className),
+                "data-testid": o?.["data-testid"] ?? C(f["data-testid"], "panel"),
                 ref: b
               }
             )

package/dist/components/TabSet/TabSet.styles.js

@@ -18,7 +18,7 @@ const e = t({
       flexWrap: "wrap",
       borderBottom: "divider",
       "& > :has(.ids-badge)": {
-        mr: "spacing.350"
+        mr: "spacing.4"
       }
     },
     listHolder: {
@@ -41,8 +41,8 @@ const e = t({
     },
     hoverIndicator: {
       position: "absolute",
-      top: "spacing.150",
-      bottom: "spacing.150",
+      top: "spacing.2",
+      bottom: "spacing.2",
       left: "[0]",
       bg: "colour.primary.surfaceHover",
       transition: "all",