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

package/dist/components/Slideout/SlideoutProvider.js

@@ -1,39 +1,37 @@
 import { jsx as f } from "react/jsx-runtime";
-import { createContext as m, useState as p, useCallback as r, useMemo as x } from "react";
-const S = m(
-  void 0
-), P = ({
+import { useState as p, useCallback as u, useMemo as a } from "react";
+import { SlideoutContext as S } from "./hooks/useSlideout.js";
+const P = ({
   children: i,
-  container: u
+  container: n
 }) => {
-  const [t, c] = p([]), s = r((e) => {
-    c([e]);
-  }, []), n = r((e) => {
-    c(
-      (o) => o.includes(e) ? o.filter((a) => a !== e) : [...o]
+  const [t, l] = p([]), s = u((e) => {
+    l([e]);
+  }, []), r = u((e) => {
+    l(
+      (o) => o.includes(e) ? o.filter((m) => m !== e) : [...o]
     );
-  }, []), l = r(
+  }, []), c = u(
     (e, o) => {
       if (o !== void 0) {
         if (o)
           return s(e);
-        n(e);
+        r(e);
         return;
       }
-      t.includes(e) ? n(e) : s(e);
+      t.includes(e) ? r(e) : s(e);
     },
-    [n, s, t]
-  ), d = x(
+    [r, s, t]
+  ), d = a(
     () => ({
-      container: u,
+      container: n,
       opened: t,
-      showSlideout: l
+      showSlideout: c
     }),
-    [u, t, l]
+    [n, t, c]
   );
   return /* @__PURE__ */ f(S.Provider, { value: d, children: i });
 };
 export {
-  P as IressSlideoutProvider,
-  S as SlideoutContext
+  P as IressSlideoutProvider
 };

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

@@ -1,10 +1,10 @@
 import { jsxs as c, jsx as d } from "react/jsx-runtime";
 import { propagateTestid as o } from "../../../helpers/utility/propagateTestid.js";
-import "../../../Button-BXzmntRi.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-DHLOr79I.js";
-import { s as B } from "../../../is-valid-prop-DFFvE05x.js";
+import { s as f } from "../../../factory-oPXoMw9H.js";
+import { s as B } from "../../../is-valid-prop-Ce0wiweq.js";
 import { IressText as _ } from "../../Text/Text.js";
 const F = ({
   children: u,

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

@@ -1,13 +1,13 @@
-import { useContext as e } from "react";
-import { SlideoutContext as u } from "../SlideoutProvider.js";
-function l(o) {
-  const t = e(u);
+import { useContext as n } from "react";
+import { SlideoutContext as r } from "./useSlideout.js";
+function p(o) {
+  const e = n(r);
   return {
-    opened: o && (t == null ? void 0 : t.opened.includes(o)),
-    container: t == null ? void 0 : t.container,
-    show: (n) => o && (t == null ? void 0 : t.showSlideout(o, n))
+    opened: o && e?.opened.includes(o),
+    container: e?.container,
+    show: (t) => o && e?.showSlideout(o, t)
   };
 }
 export {
-  l as useProviderSlideout
+  p as useProviderSlideout
 };

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

@@ -1,49 +1,49 @@
-import { useRef as p, useEffect as y } from "react";
-import { GlobalCSSClass as f } from "../../../enums.js";
-import { t as m } from "../../../index-DlGwAtoO.js";
+import { useRef as m, useEffect as y } from "react";
+import { GlobalCSSClass as e } from "../../../enums.js";
+import { t as p } from "../../../index-CZ9ot38T.js";
 import { useBreakpoint as S } from "../../../hooks/useBreakpoint.js";
 function h({
   element: r,
-  isActive: o,
-  position: c,
-  size: d,
-  status: n,
-  onOpen: u,
-  onClose: i
+  isActive: l,
+  position: n,
+  size: u,
+  status: o,
+  onOpen: f,
+  onClose: a
 }) {
-  const s = p(null), { breakpoint: e } = S();
+  const t = m(null), { breakpoint: d } = S();
   y(() => {
     if (!r) return;
-    if (!s.current) {
-      const t = c === "left" ? "marginInlineStart" : "marginInlineEnd";
-      s.current = {
+    if (!t.current) {
+      const s = n === "left" ? "marginInlineStart" : "marginInlineEnd";
+      t.current = {
         classNames: [...r.classList],
         style: {
-          [t]: r.style[t],
+          [s]: r.style[s],
           transition: r.style.transition
         }
       };
     }
-    const a = window.matchMedia(
+    const i = window.matchMedia(
       "(prefers-reduced-motion: reduce)"
     ).matches;
-    return r.classList.add(f.SlideoutPushElement), r.style.transition = a ? "none" : "all 0.3s ease-out", () => {
-      if (r && s.current && (r.className = s.current.classNames.join(" "), s.current.style))
-        for (const t in s.current.style) {
-          const l = t;
+    return r.classList.add(e.SlideoutPushElement), r.style.transition = i ? "none" : "all 0.3s ease-out", () => {
+      if (r && t.current && (r.className = t.current.classNames.join(" "), t.current.style))
+        for (const s in t.current.style) {
+          const c = s;
           r.style.setProperty(
-            t,
-            String(s.current.style[l] ?? "")
+            s,
+            String(t.current.style[c] ?? "")
           );
         }
     };
-  }, [r, c]), y(() => {
-    if (!r || !o) return;
-    const a = c === "left" ? "marginInlineStart" : "marginInlineEnd", t = d === "md" ? "sizes.overlay.md" : "sizes.overlay.sm", l = ["xl", "xxl"];
-    return n === "open" ? (u == null || u(), r.classList.add(f.SlideoutOpen), l.includes(e) ? r.style[a] = m.var(t).replace(")", `, ${m(t)})`) : r.style[a] = "initial") : n === "close" && (i == null || i(), r.classList.remove(f.SlideoutOpen), r.style[a] = "initial"), () => {
-      r && n === "unmounted" && (i == null || i());
+  }, [r, n]), y(() => {
+    if (!r || !l) return;
+    const i = n === "left" ? "marginInlineStart" : "marginInlineEnd", s = u === "md" ? "sizes.overlay.md" : "sizes.overlay.sm", c = ["xl", "xxl"];
+    return o === "open" ? (f?.(), r.classList.add(e.SlideoutOpen), c.includes(d) ? r.style[i] = p.var(s).replace(")", `, ${p(s)})`) : r.style[i] = "initial") : o === "close" && (a?.(), r.classList.remove(e.SlideoutOpen), r.style[i] = "initial"), () => {
+      r && o === "unmounted" && a?.();
     };
-  }, [r, o, c, d, n, u, i, e]);
+  }, [r, l, n, u, o, f, a, d]);
 }
 export {
   h as usePushElement

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

@@ -1,20 +1,22 @@
-import { useContext as r, useMemo as s } from "react";
-import { SlideoutContext as u } from "../SlideoutProvider.js";
-const n = () => {
-  const o = r(u);
-  if (!o)
+import { createContext as r, useContext as s, useMemo as u } from "react";
+const i = r(
+  void 0
+), n = () => {
+  const e = s(i);
+  if (!e)
     throw new Error(
       "IressSlideout: showSlideout must be used within a IressSlideoutProvider"
     );
-  return s(
+  return u(
     () => ({
-      showSlideout: (e, t = !0) => {
-        o.showSlideout(e, t);
+      showSlideout: (t, o = !0) => {
+        e.showSlideout(t, o);
       }
     }),
-    [o]
+    [e]
   );
 };
 export {
+  i as SlideoutContext,
   n as useSlideout
 };

package/dist/components/Slideout/index.js

@@ -1,10 +1,11 @@
 import { IressSlideout as r } from "./Slideout.js";
-import { slideout as s } from "./Slideout.styles.js";
-import { IressSlideoutProvider as i } from "./SlideoutProvider.js";
-import { useSlideout as f } from "./hooks/useSlideout.js";
+import { slideout as d } from "./Slideout.styles.js";
+import { IressSlideoutProvider as s } from "./SlideoutProvider.js";
+import { SlideoutContext as l, useSlideout as x } from "./hooks/useSlideout.js";
 export {
   r as IressSlideout,
-  i as IressSlideoutProvider,
-  s as slideout,
-  f as useSlideout
+  s as IressSlideoutProvider,
+  l as SlideoutContext,
+  d as slideout,
+  x as useSlideout
 };

package/dist/components/Slider/Slider.js

@@ -1,112 +1,112 @@
-import { jsx as u, jsxs as F } from "react/jsx-runtime";
-import { c as R } from "../../cx-DN21T1EH.js";
-import { slider as w } from "./Slider.styles.js";
-import { forwardRef as A, useCallback as h } from "react";
-import { propagateTestid as b } from "../../helpers/utility/propagateTestid.js";
-import { SliderTicks as D } from "./components/SliderTicks.js";
-import { useControlledState as G } from "../../hooks/useControlledState.js";
-import { useIdIfNeeded as L } from "../../hooks/useIdIfNeeded.js";
-import { IressReadonly as q } from "../Readonly/Readonly.js";
+import { jsx as c, jsxs as x } from "react/jsx-runtime";
+import { c as F } from "../../cx-DN21T1EH.js";
+import { slider as R } from "./Slider.styles.js";
+import { forwardRef as T, useCallback as N } from "react";
+import { propagateTestid as f } from "../../helpers/utility/propagateTestid.js";
+import { SliderTicks as w } from "./components/SliderTicks.js";
+import { useControlledState as A } from "../../hooks/useControlledState.js";
+import { useIdIfNeeded as D } from "../../hooks/useIdIfNeeded.js";
+import { IressReadonly as G } from "../Readonly/Readonly.js";
 import "../Readonly/Readonly.styles.js";
-import { s as z } from "../../factory-DHLOr79I.js";
-import { s as B } from "../../is-valid-prop-DFFvE05x.js";
-import { GlobalCSSClass as E } from "../../enums.js";
-import { useNoDefaultValueInForms as H } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
-const J = (r = 0, c = 10, d = 1) => {
-  const l = [];
-  for (let i = r; i <= c; i += d) l.push(i);
-  return l;
-}, K = ({
+import { s as W } from "../../factory-oPXoMw9H.js";
+import { s as q } from "../../is-valid-prop-Ce0wiweq.js";
+import { GlobalCSSClass as z } from "../../enums.js";
+import { useNoDefaultValueInForms as B } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+const E = (r = 0, i = 10, n = 1) => {
+  const o = [];
+  for (let l = r; l <= i; l += n) o.push(l);
+  return o;
+}, H = ({
   "data-testid": r,
-  defaultValue: c,
-  className: d,
-  formatValue: l,
-  hiddenValueTooltip: i,
+  defaultValue: i,
+  className: n,
+  formatValue: o,
+  hiddenValueTooltip: l,
   max: a = 10,
   min: s = 0,
-  onChange: n,
-  readOnly: f,
-  step: S = 1,
-  style: I,
-  tickLabels: v,
-  value: N,
-  ...o
-}, $) => {
-  H({
+  onChange: g,
+  readOnly: m,
+  step: b = 1,
+  style: y,
+  tickLabels: S,
+  value: h,
+  ...u
+}, C) => {
+  B({
     component: "IressSelect",
-    defaultValue: c
+    defaultValue: i
   });
-  const y = L({ id: o == null ? void 0 : o.id }), m = (typeof v == "boolean" ? J(s, a, S) : v ?? []).map(
-    (t) => typeof t == "number" ? { value: t } : t
-  ), { value: e, setValue: g } = G({
+  const v = D({ id: u?.id }), d = (typeof S == "boolean" ? E(s, a, b) : S ?? []).map(
+    (e) => typeof e == "number" ? { value: e } : e
+  ), { value: t, setValue: I } = A({
     component: "IressSlider",
-    defaultValue: N ? void 0 : c ?? s,
-    value: N
-  }), k = h(() => {
-    const t = m == null ? void 0 : m.find((C) => C.value === e);
-    return l ? l(e ?? 0, t, f) : (t == null ? void 0 : t.label) ?? e;
-  }, [m, l, e, f]), M = h(() => {
-    const t = Math.min(
-      Number(((e ?? 0) - s) * 100 / (a - s)),
+    defaultValue: h ? void 0 : i ?? s,
+    value: h
+  }), k = N(() => {
+    const e = d?.find((j) => j.value === t);
+    return o ? o(t ?? 0, e, m) : e?.label ?? t;
+  }, [d, o, t, m]), $ = N(() => {
+    const e = Math.min(
+      Number(((t ?? 0) - s) * 100 / (a - s)),
       100
     );
-    return `calc(${t}% + ((1.75rem / 2) - ${t * 0.285}px))`;
-  }, [a, s, e]);
-  if (f)
-    return /* @__PURE__ */ u(
-      q,
+    return `calc(${e}% + ((1.75rem / 2) - ${e * 0.285}px))`;
+  }, [a, s, t]);
+  if (m)
+    return /* @__PURE__ */ c(
+      G,
       {
-        "data-testid": b(r, "slider"),
-        name: o == null ? void 0 : o.name,
-        value: e,
+        "data-testid": f(r, "slider"),
+        name: u?.name,
+        value: t,
         children: k()
       }
     );
-  const p = w(), [V, j] = B(o), x = {
-    ...I,
-    "--iress-thumb-value-offset": M()
+  const p = R(), [L, M] = q(u), V = {
+    ...y,
+    "--iress-thumb-value-offset": $()
   };
-  return /* @__PURE__ */ F(
-    z.div,
+  return /* @__PURE__ */ x(
+    W.div,
     {
-      ...V,
-      className: R(d, p.root, E.Slider),
-      style: x,
+      ...L,
+      className: F(n, p.root, z.Slider),
+      style: V,
       "data-testid": r,
       children: [
-        !i && /* @__PURE__ */ u("output", { className: p.thumbValue, children: k() }),
-        /* @__PURE__ */ u(
+        !l && /* @__PURE__ */ c("output", { className: p.thumbValue, children: k() }),
+        /* @__PURE__ */ c(
           "input",
           {
             className: p.control,
             max: a,
             min: s,
-            step: S,
-            ...j,
-            value: e,
+            step: b,
+            ...M,
+            value: t,
             type: "range",
-            onChange: (t) => {
-              n == null || n(t, Number(t.target.value)), g(Number(t.target.value));
+            onChange: (e) => {
+              g?.(e, Number(e.target.value)), I(Number(e.target.value));
             },
-            ref: $,
-            list: `${y}--markers`,
-            "data-testid": b(r, "slider")
+            ref: C,
+            list: `${v}--markers`,
+            "data-testid": f(r, "slider")
           }
         ),
-        /* @__PURE__ */ u(
-          D,
+        /* @__PURE__ */ c(
+          w,
           {
-            tickLabels: m,
-            id: `${y}--markers`,
+            tickLabels: d,
+            id: `${v}--markers`,
             max: a,
             min: s,
-            "data-testid": b(r, "datalist")
+            "data-testid": f(r, "datalist")
           }
         )
       ]
     }
   );
-}, lt = A(K);
+}, le = T(H);
 export {
-  lt as IressSlider
+  le as IressSlider
 };

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

@@ -1,4 +1,4 @@
-import { s as e } from "../../sva-TRyehFkb.js";
+import { s as e } from "../../sva-OmxClA9g.js";
 const i = e({
   slots: [
     "root",
@@ -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/Slider/components/SliderTicks.js

@@ -1,11 +1,10 @@
-import { jsx as d, jsxs as v } from "react/jsx-runtime";
-import { slider as m } from "../Slider.styles.js";
-import { c as n } from "../../../cx-DN21T1EH.js";
+import { jsx as o, jsxs as v } from "react/jsx-runtime";
+import { slider as n } from "../Slider.styles.js";
+import { c as d } from "../../../cx-DN21T1EH.js";
 import { propagateTestid as f } from "../../../helpers/utility/propagateTestid.js";
-import { s as u } from "../../../factory-DHLOr79I.js";
+import { s as u } from "../../../factory-oPXoMw9H.js";
 const N = (t, s, e, i, a) => {
-  var r;
-  const c = s === 0 ? t - a : t - (((r = e[s - 1]) == null ? void 0 : r.value) ?? 0);
+  const c = s === 0 ? t - a : t - (e[s - 1]?.value ?? 0);
   return `${Number(c / (i - a) * 100)}%`;
 }, T = ({
   allTickLabels: t,
@@ -15,34 +14,34 @@ const N = (t, s, e, i, a) => {
   min: a,
   tickLabel: c
 }) => {
-  const l = m(), { className: r, label: k, value: o, ...p } = c, h = {
+  const l = n(), { className: m, label: k, value: r, ...p } = c, h = {
     "--iress-tick-label-width": N(
-      o,
+      r,
       e,
       t,
       i,
       a
     )
   };
-  return /* @__PURE__ */ v("div", { className: n(l.tickMark), style: h, children: [
-    /* @__PURE__ */ d("option", { value: o, "data-testid": s }),
-    /* @__PURE__ */ d(
+  return /* @__PURE__ */ v("div", { className: d(l.tickMark), style: h, children: [
+    /* @__PURE__ */ o("option", { value: r, "data-testid": s }),
+    /* @__PURE__ */ o(
       u.div,
       {
         ...p,
-        className: n(l.tickMarkLabel, r),
-        children: k ?? `${o}`
+        className: d(l.tickMarkLabel, m),
+        children: k ?? `${r}`
       }
     )
-  ] }, o);
+  ] }, r);
 }, g = ({
   max: t = 10,
   min: s = 0,
   tickLabels: e = [],
   ...i
 }) => {
-  const a = m();
-  return /* @__PURE__ */ d("datalist", { className: a.tickMarkList, ...i, children: e.map((c, l) => /* @__PURE__ */ d(
+  const a = n();
+  return /* @__PURE__ */ o("datalist", { className: a.tickMarkList, ...i, children: e.map((c, l) => /* @__PURE__ */ o(
     T,
     {
       allTickLabels: e,

package/dist/components/Spinner/Spinner.styles.js

@@ -1,4 +1,4 @@
-import { a } from "../../cva-B2x59Dph.js";
+import { c as a } from "../../cva-JiDXAa83.js";
 const o = a({
   base: {
     boxSizing: "border-box"

package/dist/components/Stack/Stack.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
 import { useMemo as a } from "react";
 import { stack as c } from "./Stack.styles.js";
-import { s as i } from "../../factory-DHLOr79I.js";
+import { s as i } from "../../factory-oPXoMw9H.js";
 import { GlobalCSSClass as p } from "../../enums.js";
 import { c as f } from "../../cx-DN21T1EH.js";
 const n = ({

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

@@ -1,10 +1,10 @@
-import { a as e } from "../../cva-B2x59Dph.js";
-const a = e({
+import { c as e } from "../../cva-JiDXAa83.js";
+const i = e({
   base: {
     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
     }
   },
@@ -23,5 +23,5 @@ const a = e({
   }
 });
 export {
-  a as stack
+  i as stack
 };