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

package/dist/components/Select/components/SelectReadonly.js

@@ -1,42 +1,39 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as c, useMemo as u } from "react";
-import { propagateTestid as R } from "../../../helpers/utility/propagateTestid.js";
-import { mapNodesToSelectOptions as S } from "../helpers/nodesToSelectOptions.js";
-import { IressReadonly as b } from "../../Readonly/Readonly.js";
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as l, useMemo as c } from "react";
+import { propagateTestid as u } from "../../../helpers/utility/propagateTestid.js";
+import { mapNodesToSelectOptions as R } from "../helpers/nodesToSelectOptions.js";
+import { IressReadonly as S } from "../../Readonly/Readonly.js";
 import "../../Readonly/Readonly.styles.js";
-const g = ({
+const b = ({
   children: t,
-  className: r,
-  "data-testid": m,
-  name: p,
-  required: s,
-  width: i,
+  className: e,
+  "data-testid": r,
+  name: m,
+  required: p,
+  width: s,
   value: o,
-  ...n
-}, a) => {
-  const d = u(() => {
-    var e;
-    return String(
-      ((e = S(t).find(
-        (f) => f.value === o
-      )) == null ? void 0 : e.label) ?? ""
-    );
-  }, [t, o]);
-  return /* @__PURE__ */ l(
-    b,
+  ...i
+}, n) => {
+  const a = c(() => String(
+    R(t).find(
+      (d) => d.value === o
+    )?.label ?? ""
+  ), [t, o]);
+  return /* @__PURE__ */ f(
+    S,
     {
-      ...n,
-      className: r,
-      "data-testid": R(m, "pseudo"),
-      name: p,
-      ref: a,
-      required: s,
-      width: i,
+      ...i,
+      className: e,
+      "data-testid": u(r, "pseudo"),
+      name: m,
+      ref: n,
+      required: p,
+      width: s,
       value: o,
-      children: d
+      children: a
     }
   );
-}, I = c(g);
+}, C = l(b);
 export {
-  I as SelectReadonly
+  C as SelectReadonly
 };

package/dist/components/Select/helpers/nodesToSelectOptions.js

@@ -1,42 +1,41 @@
-import { toArray as h } from "../../../helpers/formatting/toArray.js";
-import { getFormControlValueAsString as f } from "../../../helpers/form/getFormControlValueAsString.js";
-import { IressSelectOption as s } from "../SelectOption/SelectOption.js";
-const n = (i) => h(i).reduce(
-  (e, r = { type: s, props: { label: "" }, key: "" }) => {
-    var p, t;
+import { toArray as n } from "../../../helpers/formatting/toArray.js";
+import { getFormControlValueAsString as o } from "../../../helpers/form/getFormControlValueAsString.js";
+import { IressSelectOption as t } from "../SelectOption/SelectOption.js";
+const l = (i) => n(i).reduce(
+  (e, r = { type: t, props: { label: "" }, key: "" }) => {
     if (r.type === "optgroup")
       e = [
         ...e,
         {
           label: r.props.label,
-          children: n(r.props.children)
+          children: l(r.props.children)
         }
       ];
-    else if ([s, "option"].includes(r.type)) {
-      const l = { ...r.props };
-      delete l.children;
-      const o = String(r.props.children);
+    else if ([t, "option"].includes(r.type)) {
+      const p = { ...r.props };
+      delete p.children;
+      const s = String(r.props.children);
       e = [
         ...e,
         {
-          ...l,
-          label: o
+          ...p,
+          label: s
         }
       ];
-    } else ((p = r.props) != null && p.children || Array.isArray(r)) && (e = [
+    } else (r.props?.children || Array.isArray(r)) && (e = [
       ...e,
-      ...n(
-        ((t = r.props) == null ? void 0 : t.children) ?? r
+      ...l(
+        r.props?.children ?? r
       )
     ]);
     return e;
   },
   []
-), y = (i, e = []) => e.reduce(
-  (r, p) => r || (p.children ? y(i, p.children) : f(p.value) === i ? p.value : r),
+), h = (i, e = []) => e.reduce(
+  (r, p) => r || (p.children ? h(i, p.children) : o(p.value) === i ? p.value : r),
   void 0
 );
 export {
-  y as findValueFromStringInSelectOptions,
-  n as mapNodesToSelectOptions
+  h as findValueFromStringInSelectOptions,
+  l as mapNodesToSelectOptions
 };

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

@@ -1,4 +1,4 @@
-import { a as t } from "../../cva-B2x59Dph.js";
+import { c as t } from "../../cva-JiDXAa83.js";
 const o = t({
   base: {
     backgroundColor: "colour.neutral.30",
@@ -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-BXzmntRi.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

@@ -1,12 +1,12 @@
-import { a } from "../../cva-B2x59Dph.js";
-const s = a({
+import { c as t } from "../../cva-JiDXAa83.js";
+const s = t({
   base: {
     position: "absolute",
     top: "[0]",
     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 q } from "react/jsx-runtime";
-import { c as ee } from "../../cx-DN21T1EH.js";
-import { useState as te, useRef as O, useEffect as w, useMemo as F, useCallback as ne, cloneElement as re } from "react";
-import { u as se, b as le, c as oe, d as ie, e as ue, g as fe } from "../../floating-ui.react-CPN4oQCc.js";
-import { idsLogger as ae } from "../../helpers/utility/idsLogger.js";
-import { propagateTestid as ce } from "../../helpers/utility/propagateTestid.js";
-import { SlideoutInner as de } from "./components/SlideoutInner.js";
-import { slideout as me } from "./Slideout.styles.js";
-import { useIdIfNeeded as he } from "../../hooks/useIdIfNeeded.js";
-import { IressText as pe } from "../Text/Text.js";
-import { usePushElement as ge } from "./hooks/usePushElement.js";
-import { s as ye } from "../../is-valid-prop-DFFvE05x.js";
-import { GlobalCSSClass as U } from "../../enums.js";
-import { timeStringToNumber as Se } from "../../helpers/transition/timeStringToNumber.js";
-import { useProviderSlideout as be } from "./hooks/useProviderSlideout.js";
-function Ne(r) {
-  function i() {
-    s && (e.length > 0 && /^[~+>]$/.test(e[e.length - 1]) && e.push(" "), e.push(s));
+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 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, s, u, n = [0], o = 0, f, a = /(?:[^\\]|(?:^|[^\\])(?:\\\\)+)$/, m = /^\s+$/, h = [
+  var e = [], t, r, i, n = [0], s = 0, a, u = /(?:[^\\]|(?:^|[^\\])(?:\\\\)+)$/, d = /^\s+$/, m = [
     /\s+|\/\*|["'>~+[(]/g,
     // general
     /\s+|\/\*|["'[\]()]/g,
@@ -29,216 +29,216 @@ function Ne(r) {
     /\*\//g
     // comment
   ];
-  for (r = r.trim(); ; )
-    if (s = "", u = h[n[n.length - 1]], u.lastIndex = o, t = u.exec(r), t)
-      if (f = o, o = u.lastIndex, f < o - t[0].length && (s = r.substring(
-        f,
-        o - t[0].length
+  for (o = o.trim(); ; )
+    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
       )), n[n.length - 1] < 3) {
-        if (i(), t[0] === "[")
+        if (l(), t[0] === "[")
           n.push(1);
         else if (t[0] === "(")
           n.push(2);
         else if (/^["']$/.test(t[0]))
-          n.push(3), h[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)
           n.pop();
-        else if (/^(?:\s+|[~+>])$/.test(t[0]) && (e.length > 0 && !m.test(e[e.length - 1]) && n[n.length - 1] === 0 && e.push(" "), n[n.length - 1] === 1 && e.length === 5 && e[2].charAt(e[2].length - 1) === "=" && (e[4] = " " + e[4]), m.test(t[0])))
+        else if (/^(?:\s+|[~+>])$/.test(t[0]) && (e.length > 0 && !d.test(e[e.length - 1]) && n[n.length - 1] === 0 && e.push(" "), n[n.length - 1] === 1 && e.length === 5 && e[2].charAt(e[2].length - 1) === "=" && (e[4] = " " + e[4]), d.test(t[0])))
           continue;
         e.push(t[0]);
       } else
-        e[e.length - 1] += s, a.test(e[e.length - 1]) && (n[n.length - 1] === 4 && (e.length < 2 || m.test(e[e.length - 2]) ? e.pop() : e[e.length - 1] = " ", t[0] = ""), n.pop()), e[e.length - 1] += t[0];
+        e[e.length - 1] += r, u.test(e[e.length - 1]) && (n[n.length - 1] === 4 && (e.length < 2 || d.test(e[e.length - 2]) ? e.pop() : e[e.length - 1] = " ", t[0] = ""), n.pop()), e[e.length - 1] += t[0];
     else {
-      s = r.substr(o), i();
+      r = o.substr(s), l();
       break;
     }
   return e.join("").trim();
 }
-function we(r, i = document, e = null) {
-  return Ie(r, !1, i, e);
+function Ee(o, l = document, e = null) {
+  return be(o, !1, l, e);
 }
-function Ie(r, i, e, t = null) {
-  r = Ne(r);
-  let s = e.querySelector(r);
-  return document.head.createShadowRoot || document.head.attachShadow ? s || v(r, ",").reduce((n, o) => {
+function be(o, l, e, t = null) {
+  o = Se(o);
+  let r = e.querySelector(o);
+  return document.head.createShadowRoot || document.head.attachShadow ? r || C(o, ",").reduce((n, s) => {
     if (n)
       return n;
-    const f = v(o.replace(/^\s+/g, "").replace(/\s*([>+~]+)\s*/g, "$1"), " ").filter((g) => !!g).map((g) => v(g, ">")), a = f.length - 1, m = f[a][f[a].length - 1], h = xe(m, e, t), S = _e(f, a, e);
-    return n = h.find(S), n || null;
-  }, null) : s;
+    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 _e(r, i, e) {
+function we(o, l, e) {
   return (t) => {
-    let s = i, u = t, n = !1;
-    for (; u && !Re(u); ) {
-      let o = !0;
-      if (r[s].length === 1)
-        o = u.matches(r[s]);
+    let r = l, i = t, n = !1;
+    for (; i && !Ie(i); ) {
+      let s = !0;
+      if (o[r].length === 1)
+        s = i.matches(o[r]);
       else {
-        const f = [].concat(r[s]).reverse();
-        let a = u;
-        for (const m of f) {
-          if (!a || !a.matches(m)) {
-            o = !1;
+        const a = [].concat(o[r]).reverse();
+        let u = i;
+        for (const d of a) {
+          if (!u || !u.matches(d)) {
+            s = !1;
             break;
           }
-          a = Q(a, e);
+          u = T(u, e);
         }
       }
-      if (o && s === 0) {
+      if (s && r === 0) {
         n = !0;
         break;
       }
-      o && s--, u = Q(u, e);
+      s && r--, i = T(i, e);
     }
     return n;
   };
 }
-function v(r, i) {
-  return r.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 === i ? e.a.push("") : e.a[e.a.length - 1] += t, e), { a: [""] }).a;
+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 Re(r) {
-  return r.nodeType === Node.DOCUMENT_FRAGMENT_NODE || r.nodeType === Node.DOCUMENT_NODE;
+function Ie(o) {
+  return o.nodeType === Node.DOCUMENT_FRAGMENT_NODE || o.nodeType === Node.DOCUMENT_NODE;
 }
-function Q(r, i) {
-  const e = r.parentNode;
-  return e && e.host && e.nodeType === 11 ? e.host : e === i ? null : e;
+function T(o, l) {
+  const e = o.parentNode;
+  return e && e.host && e.nodeType === 11 ? e.host : e === l ? null : e;
 }
-function xe(r = null, i, e = null) {
+function Ne(o = null, l, e = null) {
   let t = [];
   if (e)
     t = e;
   else {
-    const s = function(u) {
-      for (let n = 0; n < u.length; n++) {
-        const o = u[n];
-        t.push(o), o.shadowRoot && s(o.shadowRoot.querySelectorAll("*"));
+    const r = function(i) {
+      for (let n = 0; n < i.length; n++) {
+        const s = i[n];
+        t.push(s), s.shadowRoot && r(s.shadowRoot.querySelectorAll("*"));
       }
     };
-    i.shadowRoot && s(i.shadowRoot.querySelectorAll("*")), s(i.querySelectorAll("*"));
+    l.shadowRoot && r(l.shadowRoot.querySelectorAll("*")), r(l.querySelectorAll("*"));
   }
-  return r ? t.filter((s) => s.matches(r)) : t;
+  return o ? t.filter((r) => r.matches(o)) : t;
 }
-const He = ({
-  children: r,
-  className: i,
+const Ue = ({
+  children: o,
+  className: l,
   closeText: e = "Close",
   container: t,
-  "data-testid": s,
-  defaultShow: u = !1,
+  "data-testid": r,
+  defaultShow: i = !1,
   eleToPush: n,
-  footer: o,
-  heading: f,
-  mode: a = "overlay",
-  onEntered: m,
-  onExited: h,
-  onShowChange: S,
+  footer: s,
+  heading: a,
+  mode: u = "overlay",
+  onEntered: d,
+  onExited: m,
+  onShowChange: w,
   onStatus: g,
-  onTransitionEnd: I,
-  position: b = "right",
-  show: R,
-  size: x = "sm",
-  style: j,
-  ...M
+  onTransitionEnd: D,
+  position: y = "right",
+  show: I,
+  size: N = "sm",
+  style: P,
+  ...x
 }) => {
-  const [G, H] = te(u), C = O(240), N = O(null), y = be(M.id), D = he({ id: M.id }), _ = `${D}--heading`, P = y.opened || R || G, $ = (l, c, A) => {
-    var E;
-    (E = y == null ? void 0 : y.show) == null || E.call(y, l), H(l), S == null || S(l, A);
-  }, { context: p } = se({
-    open: P,
-    onOpenChange: $
-  }), B = le(p, {
+  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: Q,
+    onOpenChange: q
+  }), j = oe(h, {
     enabled: !0,
     outsidePress: !1
-  }), L = oe(p), J = ie([B, L]), { isMounted: K, status: d } = ue(p, {
-    duration: C.current
-  }), W = me({
-    position: b,
-    size: x,
-    status: d,
-    mode: a
+  }), 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: N,
+    status: c,
+    mode: u
   });
-  w(() => {
-    y.opened && R && ae(
+  b(() => {
+    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."
     );
-  }, [y.opened, R]), w(() => {
-    g == null || g(d);
-  }, [d, g]), w(() => {
-    const l = (c) => typeof c == "string" ? we(c) : c instanceof Element ? c : c == null ? void 0 : c.current;
-    return a === "overlay" ? N.current = null : N.current = l(n), () => {
-      N.current = null;
+  }, [E.opened, I]), b(() => {
+    g?.(c);
+  }, [c, g]), b(() => {
+    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, a]), w(() => {
-    var l, c;
-    d === "initial" && ((l = p.refs.floating) != null && l.current) && (C.current = Se(
-      ((c = window.getComputedStyle(p.refs.floating.current, null)) == null ? void 0 : c.getPropertyValue("--iress-transition-duration")) || ".3s"
-    ) * 1.2);
-  }, [p.refs.floating, d]), w(() => {
-    var l, c;
-    d === "open" && ((c = (l = p.refs.floating) == null ? void 0 : l.current) == null || c.focus());
-  }, [p.refs.floating, d]);
-  const X = F(
+  }, [n, u]), b(() => {
+    c === "open" && h.refs.floating?.current?.focus();
+  }, [h.refs.floating, c]);
+  const J = A(
     () => ({
-      element: N.current ?? null,
-      isActive: a === "push",
-      position: b,
-      size: x,
-      status: d
+      // eslint-disable-next-line react-hooks/refs -- we want to forward the ref
+      element: S.current ?? null,
+      isActive: u === "push",
+      position: y,
+      size: N,
+      status: c
     }),
-    [N, a, b, x, d]
+    [S, u, y, N, c]
   );
-  ge(X);
-  const Y = ne(
-    (l) => {
-      I == null || I(l);
-      const c = b === "right" ? "right" : "left";
-      !(l.propertyName === c || l.propertyName === "opacity" || !l.propertyName) || l.target !== l.currentTarget || (d === "open" ? m == null || m() : d === "close" && (h == null || h()));
+  pe(J);
+  const K = te(
+    (f) => {
+      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?.());
     },
-    [I, b, d, m, h]
-  ), k = F(() => typeof f == "string" ? /* @__PURE__ */ q(
-    pe,
+    [D, y, c, d, m]
+  ), $ = A(() => typeof a == "string" ? /* @__PURE__ */ _(
+    he,
     {
-      id: _,
-      "data-testid": ce(s, "heading"),
+      id: v,
+      "data-testid": ae(r, "heading"),
       element: "h2",
-      children: f
+      children: a
     }
-  ) : f ? re(f, {
-    id: _
-  }) : null, [s, _, f]);
-  if (!K) return null;
-  const Z = ee(
-    W.root,
-    i,
-    U.Slideout,
-    d === "open" && U.SlideoutOpen
-  ), [z, T] = ye(M), V = {
-    "aria-labelledby": k ? _ : void 0,
-    children: r,
-    className: Z,
+  ) : a, [r, v, a]);
+  if (!B) return null;
+  const W = z(
+    L.root,
+    l,
+    O.Slideout,
+    c === "open" && O.SlideoutOpen
+  ), [X, Y] = me(x), Z = {
+    "aria-labelledby": $ ? v : void 0,
+    children: o,
+    className: W,
     closeText: e,
-    "data-testid": s,
-    footer: o,
-    floatingRef: (l) => p.refs.setFloating(l),
-    heading: k,
-    id: D,
-    onOpenChange: $,
-    ...z,
-    ...J.getFloatingProps(T),
-    onTransitionEnd: Y
+    "data-testid": r,
+    footer: s,
+    floatingRef: (f) => h.refs.setFloating(f),
+    heading: $,
+    id: R,
+    onOpenChange: q,
+    ...X,
+    ...H.getFloatingProps(Y),
+    onTransitionEnd: K
   };
-  return /* @__PURE__ */ q(fe, { root: t, children: /* @__PURE__ */ q(
-    de,
+  return /* @__PURE__ */ _(ie, { root: t, children: /* @__PURE__ */ _(
+    fe,
     {
-      ...V,
-      style: j,
-      "data-testid": s
+      ...Z,
+      style: P,
+      "data-testid": r
     }
   ) });
 };
 export {
-  He as IressSlideout
+  Ue as IressSlideout
 };

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

@@ -1,11 +1,11 @@
-import { s as t } from "../../sva-TRyehFkb.js";
+import { s as t } from "../../sva-OmxClA9g.js";
 const i = t({
   slots: ["root", "content", "footer", "closeButton"],
   base: {
     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"
         }
       }
     }