@orfium/ictinus 5.26.0 → 5.28.0

package/dist/index.js

@@ -17937,33 +17937,7 @@ const kD = (e) => e, ae = kD(fe()), TD = (e) => ({
 }], Ot = ae;
 Ot.toDate(), Ot.subtract(1, "day").toDate(), Ot.subtract(2, "day").toDate(), Ot.subtract(4, "day").toDate();
 Ot.subtract(7, "day").toDate(), Ot.add(7, "day").toDate(), Ot.subtract(7, "day").toDate(), Ot.add(7, "day").toDate();
-const LD = () => (e) => /* @__PURE__ */ y("max-height:inherit;overflow:auto;background-color:", e.tokens.colors.get("palette.tertiary.base"), ";margin-top:", e.globals.spacing.get("4"), ";box-shadow:", e.tokens.boxShadow.get("3"), ";border-radius:", e.dimension.borderRadius.get("md"), ";border-color:", e.tokens.colors.get("borderColor.decorative.default"), ";", ""), Ws = {
-  single: {
-    minWidth: 120,
-    maxWidth: 300
-  },
-  multi: {
-    minWidth: 140,
-    maxWidth: 440
-  },
-  maxHeight: 340
-}, MD = 253, ID = {
-  height: {
-    value: "{sizing.9}",
-    type: "sizing",
-    description: "Sets fixed height for filter"
-  }
-}, BD = (e) => ze(ID, e), qD = ({
-  isActive: e = !1,
-  isPopulated: t = !1,
-  isMulti: r = !1,
-  isDisabled: n
-}) => (o) => {
-  const a = BD(o), i = (l = !1) => e ? o.tokens.colors.get("palette.primary.contrast") : l ? o.tokens.colors.get("palette.secondary.muted") : o.tokens.colors.get("palette.secondary.base");
-  return /* @__PURE__ */ y("display:flex;align-items:center;cursor:", n ? "not-allowed" : "pointer", ";height:", a("height"), ";padding:0 ", o.dimension.spacing.get("md"), " 0 ", o.dimension.spacing.get("lg"), ";max-width:", $(Ws[r ? "multi" : "single"].maxWidth), ";gap:", o.dimension.spacing.get("xs"), ";background-color:", i(), ";color:", o.tokens.colors.get(e ? "textColor.inverted.primary" : "textColor.default.active"), ";border:", o.dimension.borderWidth.get("default"), " solid ", o.tokens.colors.get("borderColor.interactive.default"), ";border-radius:", o.dimension.borderRadius.get("circle"), ";", U(o.tokens.typography.get("normal.label02")), ";&:not([disabled]){&:focus-visible,&:hover{background-color:", i(!0), ";}}transition:background-color 0.1s ease-in-out;opacity:", n ? o.tokens.disabledState.get("default") : 1, ";", "");
-}, DD = ({
-  isActive: e
-}) => () => /* @__PURE__ */ y("transform:rotate(", e ? "180" : "0", "deg);", be(0.2), ";", ""), c1 = {
+const LD = () => (e) => /* @__PURE__ */ y("max-height:inherit;overflow:auto;background-color:", e.tokens.colors.get("palette.tertiary.base"), ";margin-top:", e.globals.spacing.get("4"), ";box-shadow:", e.tokens.boxShadow.get("3"), ";border-radius:", e.dimension.borderRadius.get("md"), ";border-color:", e.tokens.colors.get("borderColor.decorative.default"), ";", ""), c1 = {
   blue: {
     text: "textColor.default.active",
     border: "palette.primaryAlt.contrast",
@@ -17994,7 +17968,7 @@ const LD = () => (e) => /* @__PURE__ */ y("max-height:inherit;overflow:auto;back
     border: "borderColor.interactive.warning",
     fill: "palette.warning.muted"
   }
-}, ND = {
+}, MD = {
   normal: {
     height: {
       value: "{sizing.6}",
@@ -18009,16 +17983,16 @@ const LD = () => (e) => /* @__PURE__ */ y("max-height:inherit;overflow:auto;back
       description: "sets fixed height for small tag"
     }
   }
-}, HD = (e) => ze(ND, e), FD = ({
+}, ID = (e) => ze(MD, e), BD = ({
   size: e = "normal",
   color: t = "blue",
   isSelectable: r,
   isClearable: n,
   isSelected: o
 }) => (a) => {
-  const i = HD(a), l = r || n, s = () => l ? o ? a.tokens.colors.get("palette.secondary.muted") : a.tokens.colors.get("palette.secondary.base") : a.tokens.colors.get(c1[t].fill), c = e === "normal" ? "normal.label02" : "normal.label03";
+  const i = ID(a), l = r || n, s = () => l ? o ? a.tokens.colors.get("palette.secondary.muted") : a.tokens.colors.get("palette.secondary.base") : a.tokens.colors.get(c1[t].fill), c = e === "normal" ? "normal.label02" : "normal.label03";
   return /* @__PURE__ */ y("display:flex;justify-content:center;align-items:center;height:", i(`${e}.height`), ";width:fit-content;box-sizing:border-box;gap:", a.dimension.spacing.get("xs"), ";padding:", `${a.dimension.spacing.get("2xs")}  ${a.dimension.spacing.get(e === "normal" ? "sm" : "xs")}`, ";cursor:", r ? "pointer" : "auto", ";background:", s(), ";color:", l ? a.tokens.colors.get(c1.blue.text) : a.tokens.colors.get(c1[t].text), ";border:", a.dimension.borderWidth.get("default"), " solid;border-color:", l ? a.tokens.colors.get("borderColor.interactive.default") : a.tokens.colors.get(c1[t].border), ";border-radius:", a.dimension.borderRadius.get(e === "normal" ? "md" : "sm"), ";&:hover{background:", r ? a.tokens.colors.get("palette.secondary.muted") : null, ";}&:focus-visible{background:", l ? a.tokens.colors.get("palette.secondary.muted") : null, ";border-color:", l ? a.tokens.colors.get("borderColor.interactive.active") : null, ";}", U(a.tokens.typography.get(c)), " ", L1, ";", "");
-}, zD = () => (e) => /* @__PURE__ */ y("/** @TODO: revisit all these styles when Interactive Icon is implemented */width:", $(16), ";height:", $(16), ";display:flex;align-items:center;justify-content:center;cursor:pointer;&:hover{background:", e.tokens.state.get("backgroundColor.hover"), ";border-radius:", e.globals.borderRadius.get("7"), ";}", ""), VD = ({
+}, qD = () => (e) => /* @__PURE__ */ y("/** @TODO: revisit all these styles when Interactive Icon is implemented */width:", $(16), ";height:", $(16), ";display:flex;align-items:center;justify-content:center;cursor:pointer;&:hover{background:", e.tokens.state.get("backgroundColor.hover"), ";border-radius:", e.globals.borderRadius.get("7"), ";}", ""), DD = ({
   color: e = "neutral",
   iconName: t,
   onSelect: r,
@@ -18028,7 +18002,7 @@ const LD = () => (e) => /* @__PURE__ */ y("max-height:inherit;overflow:auto;back
 }) => {
   const i = D(), l = r && !n, s = !!n, c = l || s, u = W((C) => {
     C.key === "Enter" && l && r && r(), C.key === "Enter" && s && n && n();
-  }, [s, l, n, r]), p = Q(() => l && o ? /* @__PURE__ */ d(H, { dataTestId: `${a}_tag_prefix`, size: i.dimension.sizing.get("icon.sm"), name: "check", color: i.tokens.colors.get("textColor.default.active") }) : !c && t ? /* @__PURE__ */ d(H, { size: i.dimension.sizing.get("icon.sm"), name: t, color: i.tokens.colors.get(c1[e].text) }) : null, [e, a, t, c, l, o, i.dimension.sizing, i.tokens.colors]), f = Q(() => s ? /* @__PURE__ */ d("div", { tabIndex: -1, "aria-hidden": "true", css: zD(), children: /* @__PURE__ */ d(H, { onClick: n, hasHover: !1, size: i.dimension.sizing.get("icon.sm"), name: "close", color: i.tokens.colors.get("textColor.default.active"), dataTestId: `${a}_tag_suffix` }) }) : null, [a, s, n, i.dimension.sizing, i.tokens.colors]);
+  }, [s, l, n, r]), p = Q(() => l && o ? /* @__PURE__ */ d(H, { dataTestId: `${a}_tag_prefix`, size: i.dimension.sizing.get("icon.sm"), name: "check", color: i.tokens.colors.get("textColor.default.active") }) : !c && t ? /* @__PURE__ */ d(H, { size: i.dimension.sizing.get("icon.sm"), name: t, color: i.tokens.colors.get(c1[e].text) }) : null, [e, a, t, c, l, o, i.dimension.sizing, i.tokens.colors]), f = Q(() => s ? /* @__PURE__ */ d("div", { tabIndex: -1, "aria-hidden": "true", css: qD(), children: /* @__PURE__ */ d(H, { onClick: n, hasHover: !1, size: i.dimension.sizing.get("icon.sm"), name: "close", color: i.tokens.colors.get("textColor.default.active"), dataTestId: `${a}_tag_suffix` }) }) : null, [a, s, n, i.dimension.sizing, i.tokens.colors]);
   return {
     isSelectable: l,
     isClearable: s,
@@ -18056,7 +18030,7 @@ const LD = () => (e) => /* @__PURE__ */ y("max-height:inherit;overflow:auto;back
     handleKeyDown: m,
     prefix: v,
     suffix: w
-  } = VD({
+  } = DD({
     color: e,
     iconName: r,
     onSelect: n,
@@ -18064,7 +18038,7 @@ const LD = () => (e) => /* @__PURE__ */ y("max-height:inherit;overflow:auto;back
     isSelected: a,
     dataTestPrefixId: l
   });
-  return /* @__PURE__ */ E("div", { onClick: n, onKeyDown: m, tabIndex: C ? 0 : -1, css: FD({
+  return /* @__PURE__ */ E("div", { onClick: n, onKeyDown: m, tabIndex: C ? 0 : -1, css: BD({
     size: t,
     color: e,
     isSelectable: p,
@@ -18077,6 +18051,33 @@ const LD = () => (e) => /* @__PURE__ */ y("max-height:inherit;overflow:auto;back
   ] });
 });
 tl.displayName = "Tag";
+const Ws = {
+  single: {
+    minWidth: 120,
+    maxWidth: 300
+  },
+  multi: {
+    minWidth: 140,
+    maxWidth: 440
+  },
+  maxHeight: 340
+}, ND = 253, HD = {
+  height: {
+    value: "{sizing.9}",
+    type: "sizing",
+    description: "Sets fixed height for filter"
+  }
+}, FD = (e) => ze(HD, e), zD = ({
+  isActive: e = !1,
+  isPopulated: t = !1,
+  isMulti: r = !1,
+  isDisabled: n
+}) => (o) => {
+  const a = FD(o), i = (l = !1) => e ? o.tokens.colors.get("palette.primary.contrast") : l ? o.tokens.colors.get("palette.secondary.muted") : o.tokens.colors.get("palette.secondary.base");
+  return /* @__PURE__ */ y("display:flex;align-items:center;cursor:", n ? "not-allowed" : "pointer", ";height:", a("height"), ";padding:0 ", o.dimension.spacing.get("md"), " 0 ", o.dimension.spacing.get("lg"), ";max-width:", $(Ws[r ? "multi" : "single"].maxWidth), ";gap:", o.dimension.spacing.get("xs"), ";background-color:", i(), ";color:", o.tokens.colors.get(e ? "textColor.inverted.primary" : "textColor.default.active"), ";border:", o.dimension.borderWidth.get("default"), " solid ", o.tokens.colors.get("borderColor.interactive.default"), ";border-radius:", o.dimension.borderRadius.get("circle"), ";", U(o.tokens.typography.get("normal.label02")), ";&:not([disabled]){&:focus-visible,&:hover{background-color:", i(!0), ";}}transition:background-color 0.1s ease-in-out;opacity:", n ? o.tokens.disabledState.get("default") : 1, ";", "");
+}, VD = ({
+  isActive: e
+}) => () => /* @__PURE__ */ y("transform:rotate(", e ? "180" : "0", "deg);", be(0.2), ";", "");
 var WD = {
   name: "12wal98",
   styles: "text-overflow:ellipsis;overflow:hidden;white-space:nowrap"
@@ -18100,7 +18101,7 @@ const rc = P.forwardRef((e, t) => {
   } = e, C = D(), m = r === "added", v = P.useMemo(() => a ? void 0 : (w) => {
     w.stopPropagation(), i();
   }, [a, i]);
-  return /* @__PURE__ */ E("button", { css: qD({
+  return /* @__PURE__ */ E("button", { css: zD({
     isActive: l,
     isPopulated: s,
     isMulti: p,
@@ -18111,10 +18112,10 @@ const rc = P.forwardRef((e, t) => {
       "+",
       c
     ] }),
-    /* @__PURE__ */ d("div", { css: DD({
+    /* @__PURE__ */ d("div", { css: VD({
       isActive: l
     }), children: /* @__PURE__ */ d(H, { name: "triangleDown", size: C.dimension.sizing.get("icon.sm"), color: C.tokens.colors.get(l ? "textColor.inverted.primary" : "textColor.default.active") }) }),
-    m && /* @__PURE__ */ d(H, { name: "close", size: C.dimension.sizing.get("icon.sm"), color: C.tokens.colors.get(l ? "textColor.inverted.primary" : "textColor.default.active"), onClick: v, dataTestPrefixId: `${u}_filter_close` })
+    m && /* @__PURE__ */ d(H, { role: "button", "aria-label": "Remove filter", name: "close", size: C.dimension.sizing.get("icon.sm"), color: C.tokens.colors.get(l ? "textColor.inverted.primary" : "textColor.default.active"), onClick: v, dataTestPrefixId: `${u}_filter_close` })
   ] });
 });
 rc.displayName = "FilterButton";
@@ -18209,115 +18210,21 @@ const UD = {
       description: "Sets horizontal/vertical padding for field content"
     }
   }
-}, Gt = (e) => ze(UD, e), ZD = ({
-  isTextfield: e,
-  label: t,
-  placeholder: r,
-  isRequired: n,
-  isLocked: o,
-  hasValue: a,
-  value: i,
-  onOptionDelete: l,
-  onClearAllOptions: s,
-  onKeyDown: c
-}) => {
-  const u = P.useRef(null), p = D(), f = !!t, C = Q(() => {
-    if (!a && r)
-      return n ? `${r} *` : r;
-    if (!a)
-      return t;
-  }, [a, t, r, n]), m = Q(() => {
-    if (o)
-      return "lock";
-    if (a)
-      return "close";
-    if (!e)
-      return "search";
-  }, [a, e, o]), v = (h) => (x) => {
-    i === "" && x.key === "Backspace" && l(h), c && c(x);
-  }, w = Q(() => {
-    const h = m === "close" ? () => s() : void 0;
-    if (m)
-      return /* @__PURE__ */ d(H, { size: 20, name: m, color: p.tokens.colors.get("textColor.default.secondary"), onClick: h, dataTestId: "select-right-icon" });
-  }, [m, s, p.tokens.colors]);
-  return {
-    inputPlaceholder: C,
-    handleKeyDown: v,
-    icon: w,
-    hasLabel: f,
-    TextfieldRef: u
-  };
-}, dr = $(3), GD = ({
+}, Gt = (e) => ze(UD, e), dr = $(3), ZD = ({
   isAnimated: e,
   hasError: t,
   size: r = "normal"
 }) => (n) => {
   const o = r === "normal" ? "normal.body02" : "normal.body03";
   return /* @__PURE__ */ y("transition:transform 0.25s,opacity 0.25s ease-in-out;transform-origin:0 0;width:100%;position:absolute;user-select:none;transform:", e ? `translate(${dr}, -95%) scale(0.8);` : `translate(${dr}, 0)`, ";color:", t ? n.tokens.colors.get("textColor.default.error") : n.tokens.colors.get("textColor.default.secondary"), ";align-items:center;display:flex;top:0;bottom:0;right:", $(3), ";margin:auto;white-space:nowrap;overflow:hidden;", U(n.tokens.typography.get(o)), ";", "");
-}, KD = ({
-  maxWidth: e
-}) => () => /* @__PURE__ */ y("white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:", e ? q(e - 120) : "unset", ";", ""), YD = () => (e) => /* @__PURE__ */ y("position:absolute!important;bottom:0;right:", e.globals.spacing.get("4"), ";top:0;display:flex;align-items:center;", ""), XD = () => (e) => /* @__PURE__ */ y("padding-right:", e.globals.spacing.get("5"), ";", ""), QD = () => (e) => /* @__PURE__ */ y("position:relative;margin-right:", e.globals.spacing.get("3"), ";", ""), JD = () => (e) => /* @__PURE__ */ y("position:static;width:100%;display:flex;flex-wrap:wrap;row-gap:", e.globals.spacing.get("3"), ";z-index:2;", ""), eN = ({
-  hasValue: e,
-  hasLabel: t,
-  isResponsive: r,
-  isTextfield: n
-}) => (o) => {
-  const a = {
-    fontWeight: `${o.globals.typography.fontWeight.get("bold")}`,
-    transform: `translate(${dr}, -82%) scale(0.8) !important`,
-    bottom: "auto"
-  }, i = t ? 21 : 13, l = t ? 5 : 13, s = Gt(o);
-  return {
-    wrapper: {
-      height: "unset",
-      // TODO - fix this
-      minHeight: `${q(52)} !important`,
-      ...e ? {
-        label: a
-      } : {
-        "input:focus": {
-          label: a
-        },
-        label: {
-          transform: `translate(${dr}, -8px)`
-        }
-      }
-    },
-    textField: {
-      // For the paddings we use specifically custom numbers that don't match the
-      // ictinus spacing (the are calculated by combining internal absolute positioned component widths)
-      // so we can override the existing TextFieldInputBase paddings to
-      // perfectly position and align the content inside.
-      padding: `${q(i)} ${q(40)} ${q(l)} ${o.globals.spacing.get("5")}`,
-      ...r ? {
-        width: "max-content",
-        minWidth: q(s("minWidth.large.normal"))
-      } : {},
-      ...n ? {
-        minWidth: q(s("minWidth.large.normal")),
-        width: "100%"
-      } : {}
-    }
-  };
-}, tN = () => ({
-  input: {
-    top: "unset",
-    flex: "1 1 0%",
-    minWidth: "20%",
-    "&:focus, &:not(:placeholder-shown)": {
-      "& + label": {
-        transform: `translate(${dr}, -82%) scale(0.8)`
-      }
-    }
-  }
-}), rl = ({
+}, rl = ({
   hasError: e = !1,
   htmlFor: t,
   label: r,
   size: n = "normal",
   isRequired: o = !1,
   isAnimated: a = !1
-}) => /* @__PURE__ */ E("label", { htmlFor: t, css: GD({
+}) => /* @__PURE__ */ E("label", { htmlFor: t, css: ZD({
   isAnimated: a,
   hasError: e,
   size: n
@@ -18325,7 +18232,7 @@ const UD = {
   r,
   " ",
   o && "*"
-] }), rN = {
+] }), GD = {
   height: {
     linear: {
       value: "{sizing.1}",
@@ -18338,14 +18245,14 @@ const UD = {
       description: "Sets fxed height for normal linearBlock progress indicator"
     }
   }
-}, nN = (e) => ze(rN, e), oN = ({
+}, KD = (e) => ze(GD, e), YD = ({
   isBlock: e
-}) => (t) => /* @__PURE__ */ y("display:grid;grid-template-areas:'label value' 'bar bar';grid-template-columns:1fr auto;gap:", $(4), ";width:100%;&:not([aria-valuenow]){.fill{width:50%;border-radius:", e ? t.dimension.borderRadius.get("none") : t.dimension.borderRadius.get("circle"), ";animation:indeterminate 1.7s infinite ease-in-out;will-change:transform;}}@keyframes indeterminate{from{transform:translateX(-100%);}to{transform:translateX(200%);}}", ""), aN = ({
+}) => (t) => /* @__PURE__ */ y("display:grid;grid-template-areas:'label value' 'bar bar';grid-template-columns:1fr auto;gap:", $(4), ";width:100%;&:not([aria-valuenow]){.fill{width:50%;border-radius:", e ? t.dimension.borderRadius.get("none") : t.dimension.borderRadius.get("circle"), ";animation:indeterminate 1.7s infinite ease-in-out;will-change:transform;}}@keyframes indeterminate{from{transform:translateX(-100%);}to{transform:translateX(200%);}}", ""), XD = ({
   isBlock: e
 }) => (t) => {
-  const r = nN(t);
+  const r = KD(t);
   return /* @__PURE__ */ y("grid-area:bar;background-color:", t.tokens.colors.get("palette.primaryAlt.muted"), ";height:", r(e ? "height.linearBlock" : "height.linear"), ";border-radius:", e ? t.dimension.borderRadius.get("none") : t.dimension.borderRadius.get("circle"), ";overflow:hidden;will-change:transform;", "");
-}, iN = ({
+}, QD = ({
   status: e,
   value: t,
   isBlock: r
@@ -18365,18 +18272,18 @@ const UD = {
       value: e
     }
   };
-  return /* @__PURE__ */ d(j4, { ...a, css: oN({
+  return /* @__PURE__ */ d(j4, { ...a, css: YD({
     isBlock: r
-  }), ref: o, children: () => /* @__PURE__ */ d("div", { css: aN({
+  }), ref: o, children: () => /* @__PURE__ */ d("div", { css: XD({
     isBlock: r
-  }), className: "bar", "data-testid": `${n}_linear_progress_container`, children: /* @__PURE__ */ d("div", { css: iN({
+  }), className: "bar", "data-testid": `${n}_linear_progress_container`, children: /* @__PURE__ */ d("div", { css: QD({
     status: t,
     value: e,
     isBlock: r
   }), className: "fill", "data-testid": `${n}_linear_progress_value` }) }) });
 });
 Zd.displayName = "ProgressBar";
-const lN = (e) => () => /* @__PURE__ */ y("transition:stroke-dashoffset 0.5s;", e && `
+const JD = (e) => () => /* @__PURE__ */ y("transition:stroke-dashoffset 0.5s;", e && `
         @keyframes rotating {
           from {
             transform: rotate(0deg);
@@ -18391,7 +18298,7 @@ const lN = (e) => () => /* @__PURE__ */ y("transition:stroke-dashoffset 0.5s;",
         animation: rotating 2s linear infinite;
       
       `, ";", "");
-var sN = {
+var eN = {
   name: "zjik7",
   styles: "display:flex"
 };
@@ -18408,9 +18315,9 @@ const Gd = P.forwardRef(({
       isIndeterminate: !0
     }
   }, a = D(), i = 16, l = a.dimension.sizing.get("icon.sm"), s = dp(Number.parseFloat(a.dimension.borderWidth.get("active"))), u = 2 * (16 - s) * Math.PI, p = t === "error";
-  return /* @__PURE__ */ d(j4, { ...o, ref: n, css: sN, children: ({
+  return /* @__PURE__ */ d(j4, { ...o, ref: n, css: eN, children: ({
     percentage: f = e ?? 75
-  }) => /* @__PURE__ */ d("svg", { width: l, height: l, viewBox: "0 0 32 32", fill: "none", strokeWidth: s, "data-testid": `${r}_circular_progress_container`, children: /* @__PURE__ */ d("circle", { cx: i, cy: i, r: 14, stroke: p ? a.tokens.colors.get("textColor.inverted.error") : a.tokens.colors.get("palette.primary.muted"), strokeDasharray: `${u} ${u}`, strokeDashoffset: u - f / 100 * u, strokeLinecap: "round", transform: "rotate(-90 16 16)", css: lN(Js(e)), "data-testid": `${r}_circular_progress_value` }) }) });
+  }) => /* @__PURE__ */ d("svg", { width: l, height: l, viewBox: "0 0 32 32", fill: "none", strokeWidth: s, "data-testid": `${r}_circular_progress_container`, children: /* @__PURE__ */ d("circle", { cx: i, cy: i, r: 14, stroke: p ? a.tokens.colors.get("textColor.inverted.error") : a.tokens.colors.get("palette.primary.muted"), strokeDasharray: `${u} ${u}`, strokeDashoffset: u - f / 100 * u, strokeLinecap: "round", transform: "rotate(-90 16 16)", css: JD(Js(e)), "data-testid": `${r}_circular_progress_value` }) }) });
 });
 Gd.displayName = "ProgressCircle";
 const nl = P.forwardRef(({
@@ -18421,7 +18328,7 @@ const nl = P.forwardRef(({
   dataTestPrefixId: o
 }, a) => e === "linear" ? /* @__PURE__ */ d(Zd, { value: t, isBlock: n, status: r, ref: a, dataTestPrefixId: o }) : /* @__PURE__ */ d(Gd, { value: t, status: r, ref: a, dataTestPrefixId: o }));
 nl.displayName = "ProgressIndicator";
-const cN = ({
+const tN = ({
   theme: e,
   hasError: t,
   isLocked: r,
@@ -18445,7 +18352,7 @@ const cN = ({
     backgroundColor: i,
     ...o ? s : {}
   };
-}, uN = ({
+}, rN = ({
   isDisabled: e,
   status: t,
   isInteractive: r,
@@ -18467,7 +18374,7 @@ const cN = ({
     cursor: e ? "not-allowed" : "text",
     height: s(`container.${n}`),
     minWidth: $(s(`minWidth.small.${n}`)),
-    ...cN({
+    ...tN({
       theme: a,
       hasError: l,
       isLocked: i,
@@ -18476,7 +18383,7 @@ const cN = ({
     }),
     ...o == null ? void 0 : o.wrapper
   }, "", "");
-}, dN = ({
+}, nN = ({
   sx: e
 }) => (t) => {
   const r = Gt(t);
@@ -18548,7 +18455,7 @@ const cN = ({
     },
     ...a == null ? void 0 : a.input
   }, "", "");
-}, pN = ({
+}, oN = ({
   status: e,
   isDisabled: t
 }) => (r) => /* @__PURE__ */ y({
@@ -18562,7 +18469,7 @@ const cN = ({
     alignItems: "stretch",
     padding: 0
   }
-}, I1(r), "", ""), fN = ({
+}, I1(r), "", ""), aN = ({
   isDisabled: e,
   dataTestId: t,
   status: r = {
@@ -18573,7 +18480,7 @@ const cN = ({
   children: a,
   sx: i
 }) => {
-  const l = D(), s = r.hintMessage && /* @__PURE__ */ E("div", { "data-testid": J("error", t), css: pN({
+  const l = D(), s = r.hintMessage && /* @__PURE__ */ E("div", { "data-testid": J("error", t), css: oN({
     status: r,
     isDisabled: e
   }), children: [
@@ -18581,18 +18488,112 @@ const cN = ({
     /* @__PURE__ */ d("span", { id: r.id, children: r.hintMessage })
   ] });
   return /* @__PURE__ */ E(P.Fragment, { children: [
-    /* @__PURE__ */ d("div", { "data-testid": t, css: uN({
+    /* @__PURE__ */ d("div", { "data-testid": t, css: rN({
       isDisabled: e,
       status: r,
       size: n,
       sx: i,
       isInteractive: o
-    }), children: /* @__PURE__ */ d("div", { css: dN({
+    }), children: /* @__PURE__ */ d("div", { css: nN({
       sx: i
     }), children: a }) }),
     r.hintMessage && s
   ] });
-}, j1 = P.memo(fN, ce), ol = P.forwardRef((e, t) => {
+}, j1 = P.memo(aN, ce), iN = ({
+  isTextfield: e,
+  label: t,
+  placeholder: r,
+  isRequired: n,
+  isLocked: o,
+  hasValue: a,
+  value: i,
+  onOptionDelete: l,
+  onClearAllOptions: s,
+  onKeyDown: c
+}) => {
+  const u = P.useRef(null), p = D(), f = !!t, C = Q(() => {
+    if (!a && r)
+      return n ? `${r} *` : r;
+    if (!a)
+      return t;
+  }, [a, t, r, n]), m = Q(() => {
+    if (o)
+      return "lock";
+    if (a)
+      return "close";
+    if (!e)
+      return "search";
+  }, [a, e, o]), v = (h) => (x) => {
+    i === "" && x.key === "Backspace" && l(h), c && c(x);
+  }, w = Q(() => {
+    const h = m === "close" ? () => s() : void 0;
+    if (m)
+      return /* @__PURE__ */ d(H, { role: "button", "aria-label": "Remove all", size: 20, name: m, color: p.tokens.colors.get("textColor.default.secondary"), onClick: h, dataTestId: "select-right-icon" });
+  }, [m, s, p.tokens.colors]);
+  return {
+    inputPlaceholder: C,
+    handleKeyDown: v,
+    icon: w,
+    hasLabel: f,
+    TextfieldRef: u
+  };
+}, lN = ({
+  maxWidth: e
+}) => () => /* @__PURE__ */ y("white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:", e ? q(e - 120) : "unset", ";", ""), sN = () => (e) => /* @__PURE__ */ y("position:absolute!important;bottom:0;right:", e.globals.spacing.get("4"), ";top:0;display:flex;align-items:center;", ""), cN = () => (e) => /* @__PURE__ */ y("padding-right:", e.globals.spacing.get("5"), ";", ""), uN = () => (e) => /* @__PURE__ */ y("position:relative;margin-right:", e.globals.spacing.get("3"), ";", ""), dN = () => (e) => /* @__PURE__ */ y("position:static;width:100%;display:flex;flex-wrap:wrap;row-gap:", e.globals.spacing.get("3"), ";z-index:2;", ""), pN = ({
+  hasValue: e,
+  hasLabel: t,
+  isResponsive: r,
+  isTextfield: n
+}) => (o) => {
+  const a = {
+    fontWeight: `${o.globals.typography.fontWeight.get("bold")}`,
+    transform: `translate(${dr}, -82%) scale(0.8) !important`,
+    bottom: "auto"
+  }, i = t ? 21 : 13, l = t ? 5 : 13, s = Gt(o);
+  return {
+    wrapper: {
+      height: "unset",
+      // TODO - fix this
+      minHeight: `${q(52)} !important`,
+      ...e ? {
+        label: a
+      } : {
+        "input:focus": {
+          label: a
+        },
+        label: {
+          transform: `translate(${dr}, -8px)`
+        }
+      }
+    },
+    textField: {
+      // For the paddings we use specifically custom numbers that don't match the
+      // ictinus spacing (the are calculated by combining internal absolute positioned component widths)
+      // so we can override the existing TextFieldInputBase paddings to
+      // perfectly position and align the content inside.
+      padding: `${q(i)} ${q(40)} ${q(l)} ${o.globals.spacing.get("5")}`,
+      ...r ? {
+        width: "max-content",
+        minWidth: q(s("minWidth.large.normal"))
+      } : {},
+      ...n ? {
+        minWidth: q(s("minWidth.large.normal")),
+        width: "100%"
+      } : {}
+    }
+  };
+}, fN = () => ({
+  input: {
+    top: "unset",
+    flex: "1 1 0%",
+    minWidth: "20%",
+    "&:focus, &:not(:placeholder-shown)": {
+      "& + label": {
+        transform: `translate(${dr}, -82%) scale(0.8)`
+      }
+    }
+  }
+}), ol = P.forwardRef((e, t) => {
   const {
     selectedOptions: r,
     value: n,
@@ -18620,7 +18621,7 @@ const cN = ({
     icon: I,
     hasLabel: A,
     TextfieldRef: B
-  } = ZD({
+  } = iN({
     isTextfield: w,
     label: l,
     placeholder: c,
@@ -18633,7 +18634,7 @@ const cN = ({
     onKeyDown: h
   }), L = Q(() => /* @__PURE__ */ d(xe, { children: r == null ? void 0 : r.map((N, X) => {
     var oe;
-    return /* @__PURE__ */ d("span", { css: QD(), children: /* @__PURE__ */ d(tl, { onClear: (a == null ? void 0 : a.type) === "read-only" || o ? void 0 : () => p(N), dataTestPrefixId: `tag_${X}`, children: /* @__PURE__ */ d("div", { title: typeof N == "string" ? N : N.label, css: KD({
+    return /* @__PURE__ */ d("span", { css: uN(), children: /* @__PURE__ */ d(tl, { onClear: (a == null ? void 0 : a.type) === "read-only" || o ? void 0 : () => p(N), dataTestPrefixId: `tag_${X}`, children: /* @__PURE__ */ d("div", { title: typeof N == "string" ? N : N.label, css: lN({
       maxWidth: (oe = B.current) == null ? void 0 : oe.getBoundingClientRect().width
     }), children: typeof N == "string" ? N : N.label }) }) }, au("tag" + (typeof N == "string" ? N : N.label)));
   }) }), [o, p, r, a == null ? void 0 : a.type]);
@@ -18642,24 +18643,24 @@ const cN = ({
     id: k
   } : {
     type: "normal"
-  }, ...S, isInteractive: m, sx: O4(eN({
+  }, ...S, isInteractive: m, sx: O4(pN({
     hasValue: b,
     hasLabel: A,
     isResponsive: v,
     isTextfield: w
   })(R), x), children: [
-    /* @__PURE__ */ E("div", { css: JD(), children: [
+    /* @__PURE__ */ E("div", { css: dN(), "data-testid": "selected-tags", children: [
       L,
       /* @__PURE__ */ d("input", { readOnly: _ || i, onKeyDown: Z(Q9(r)), css: Xr({
         placeholder: c,
         label: l,
-        sx: tN(),
+        sx: fN(),
         isLocked: _,
         isDisabled: o
       }), placeholder: M, required: u, id: T, disabled: o || _, "data-testid": S.dataTestId ? `input_${S.dataTestId}` : "input", "aria-invalid": (a == null ? void 0 : a.type) === "error", "aria-describedby": k, ...Ye(S, "dataTestId"), value: n, ref: t }),
       l && /* @__PURE__ */ d(rl, { htmlFor: T, label: l, isRequired: u, isAnimated: b, hasError: !o && (a == null ? void 0 : a.type) === "error" })
     ] }),
-    !o && /* @__PURE__ */ d("div", { css: YD(), children: C ? /* @__PURE__ */ d("div", { css: XD(), children: /* @__PURE__ */ d(nl, { type: "circular", dataTestPrefixId: "multi_textdield_base" }) }) : I })
+    !o && /* @__PURE__ */ d("div", { css: sN(), children: C ? /* @__PURE__ */ d("div", { css: cN(), children: /* @__PURE__ */ d(nl, { type: "circular", dataTestPrefixId: "multi_textdield_base" }) }) : I })
   ] }) });
 });
 ol.displayName = "MultiTextFieldBase";
@@ -20226,7 +20227,7 @@ const ZF = () => UF, GF = ({
   dataTestPrefixId: l,
   listRef: s
 }) => {
-  const c = e.length > Rm, u = c ? MD : void 0, p = W((f) => {
+  const c = e.length > Rm, u = c ? ND : void 0, p = W((f) => {
     const C = String(st(Array.from(f)));
     if (C === Te.value)
       t(Te);
@@ -20237,7 +20238,7 @@ const ZF = () => UF, GF = ({
   }, [e, t]);
   return e.length ? /* @__PURE__ */ d("div", { css: XF({
     isMulti: i
-  }), children: /* @__PURE__ */ E(io, { ref: s, label: "filter-options", selectedKeys: i === !1 && n ? [n.value] : [], disabledKeys: e.filter((f) => f.isDisabled).map((f) => f.value), onSelectionChange: p, isVirtualized: o && c, height: u, dataTestPrefixId: `${l}_filter_list`, children: [
+  }), children: /* @__PURE__ */ E(io, { ref: s, label: "filter-options", selectedKeys: i === !1 && n ? [n.value] : [], disabledKeys: e.filter((f) => f.isDisabled).map((f) => f.value), onSelectionChange: p, isVirtualized: o && c, height: u, dataTestPrefixId: `${l}_filter_list`, "aria-label": "Available options", children: [
     a ? /* @__PURE__ */ d(Ke, { textValue: Te.label, children: /* @__PURE__ */ d(ut, { children: Te.label }) }, Te.value) : null,
     e.filter((f) => f.value !== r.value).map((f) => /* @__PURE__ */ d(Ke, { children: /* @__PURE__ */ d(ut, { children: f.label }) }, f.value))
   ] }) }) : /* @__PURE__ */ d("div", { css: QF(), "data-testid": `${l}_filter_list_no_options`, children: "No options" });
@@ -20963,7 +20964,7 @@ const VG = P.memo(x9, ce), bz = /* @__PURE__ */ Ae("div", {
     var w;
     return /* @__PURE__ */ d(Ez, { dataTestId: `${a ?? ""}thumb_${v}`, restProps: C, isDisabled: o, value: m, initialValue: (w = l.current) == null ? void 0 : w[v] }, `thumb_${v}`);
   };
-  return /* @__PURE__ */ E(kz, { "data-testid": `${a ?? ""}slider_component`, children: [
+  return /* @__PURE__ */ E(kz, { "data-testid": `${a ?? ""}slider_component`, "aria-disabled": o ? "true" : "false", children: [
     /* @__PURE__ */ d("div", { css: /* @__PURE__ */ y({
       opacity: o ? i.tokens.disabledState.get("default") : "inherit"
     }, "", ""), children: /* @__PURE__ */ d(j8, { step: n ? js : $z, min: u1, max: Rn, disabled: o, values: e, onChange: t, onFinalChange: r, renderMark: u, renderTrack: p, renderThumb: f }) }),
@@ -22104,11 +22105,11 @@ const QV = (e = !1) => (t) => /* @__PURE__ */ y("border:none;background:", t.tok
       const {
         id: u,
         label: p,
-        counter: f
-      } = c, C = u === n;
+        counter: f = null
+      } = c, C = typeof f == "number", m = u === n;
       return /* @__PURE__ */ E(A9, { id: u, "data-testid": `${i}_tab_${u}`, sx: s == null ? void 0 : s.tab, children: [
         /* @__PURE__ */ d("span", { children: p }),
-        !!f && /* @__PURE__ */ d(tl, { css: QV(C), dataTestPrefixId: `${i}_tab_${u}_counter`, children: f })
+        C && /* @__PURE__ */ d(tl, { css: QV(m), dataTestPrefixId: `${i}_tab_${u}_counter`, children: f })
       ] }, u);
     }) }),
     l