welcome-ui 0.32.2 → 1.0.0-beta.10

package/dist/Search.mjs

@@ -0,0 +1,225 @@
+"use client";
+import t, { useState as me, useCallback as pe, useMemo as fe, Fragment as ue } from "react";
+import H from "downshift";
+import { IconWrapper as he } from "./Field.mjs";
+import { ClearButton as ge } from "./ClearButton.mjs";
+import { shouldForwardProp as j, forwardRef as Ee } from "./System.mjs";
+import { c as we } from "./create-event-rXDe5aCQ.mjs";
+import { d as ye, F as $e } from "./field-styles-CeV7pnOp.mjs";
+import { t as Ie } from "./throttle-BDBzFeFj.mjs";
+import a, { system as A, css as b, th as o } from "@xstyled/styled-components";
+import { StyledIcon as be } from "./Icon.mjs";
+import { o as B } from "./overflow-ellipsis-DGV5Kgt-.mjs";
+const G = a("div").withConfig({ shouldForwardProp: j })`
+  position: relative;
+  ${A};
+`, Fe = a.div`
+  position: relative;
+`, Se = a("input").withConfig({ shouldForwardProp: j })(
+  ({ iconPlacement: i, size: n, transparent: s, variant: g }) => b`
+    position: relative;
+    ${ye({ iconPlacement: i, size: n, variant: g, transparent: s, isClearable: !0 })};
+    ${B};
+    ${A};
+
+    br {
+      display: none;
+    }
+  `
+), ke = a.ul`
+  ${o("defaultFields.select.default")};
+  ${o("cards.default")};
+  position: absolute;
+  color: neutral-90;
+  z-index: 2;
+  right: 0;
+  left: 0;
+  margin: 0;
+  margin-top: md;
+  padding: 0;
+  transition: medium;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+`, O = a.li(
+  ({ isExisting: i, isHighlighted: n, isSelected: s }) => b`
+    color: beige-70;
+    ${n && o("defaultFields.select.highlighted")};
+    ${s && o("defaultFields.select.selected")};
+    ${i && o("defaultFields.select.existing")};
+    ${s && n && o("defaultFields.select.selectedAndHighlighted")};
+    ${B};
+    padding: sm;
+    list-style: none;
+    text-decoration: none;
+    font-size: sm;
+    transition: background ${o.transition("medium")};
+  `
+), Ce = a.div`
+  position: absolute;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+`, ve = a.button(
+  ({ isOpen: i, size: n }) => b`
+    position: relative;
+    height: 100%;
+    width: ${o(`defaultFields.sizes.${n}.height`)};
+    padding: 0;
+    outline: none !important; /* important for firefox */
+    appearance: none;
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    ${be} {
+      transform: ${i ? "rotate3d(0, 0, 1, 180deg)" : "rotate3d(0)"};
+      transition: medium;
+    }
+
+    &:not(:last-child) {
+      width: auto;
+    }
+  `
+), V = "", Re = H.default || H, xe = Ee(
+  ({
+    autoComplete: i = "off",
+    autoFocus: n,
+    dataTestId: s,
+    disabled: g,
+    groupsEnabled: L,
+    icon: p,
+    id: Y,
+    itemToString: l,
+    minChars: E = 3,
+    name: F,
+    onBlur: Z,
+    onChange: S,
+    onClick: q,
+    onFocus: k,
+    placeholder: J = "Search…",
+    renderGroupHeader: K,
+    renderItem: C,
+    search: v,
+    size: w = "md",
+    throttle: R = 500,
+    value: f = V,
+    variant: Q,
+    ...y
+  }, U) => {
+    const X = f ? l(f) : V, [x, d] = me([]), _ = pe(
+      async (e) => {
+        if (E === 0 || (e == null ? void 0 : e.length) >= E) {
+          const m = await v(e);
+          d(m || []);
+        } else
+          d([]);
+      },
+      [E, v]
+    ), D = fe(
+      () => Ie(_, R, !1),
+      [_, R]
+    ), $ = (e) => {
+      const m = we({ name: F, value: e });
+      S && S(e, m);
+    }, z = (e) => {
+      e ? $(e) : ($(), d([]));
+    }, ee = () => {
+      f || z(), d([]);
+    }, te = (e) => l(e) || "";
+    return /* @__PURE__ */ t.createElement(
+      Re,
+      {
+        initialInputValue: X,
+        itemToString: te,
+        onInputValueChange: D,
+        onOuterClick: ee,
+        onSelect: z,
+        selectedItem: f,
+        ...y
+      },
+      ({
+        clearSelection: e,
+        getInputProps: m,
+        getItemProps: M,
+        getMenuProps: ne,
+        getRootProps: oe,
+        highlightedIndex: P,
+        inputValue: ie,
+        isOpen: N,
+        selectedItem: u,
+        toggleMenu: ae
+      }) => {
+        const se = () => {
+          d([]), $(), e();
+        }, le = N && x.length > 0, re = /* @__PURE__ */ t.createElement(ve, { as: "div", size: w }, /* @__PURE__ */ t.createElement(ge, { onClick: se })), ce = m({
+          autoComplete: i,
+          autoFocus: n,
+          "data-testid": s,
+          disabled: g,
+          iconPlacement: !!p && "left",
+          id: Y,
+          name: F,
+          onBlur: Z,
+          onClick: q,
+          onFocus: (r) => {
+            k && k(r), D(""), ae();
+          },
+          placeholder: J,
+          ref: U,
+          size: w,
+          tabIndex: 0,
+          variant: N ? "focused" : Q,
+          ...y
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        }), T = $e[w];
+        return /* @__PURE__ */ t.createElement(G, { ...oe(y) }, /* @__PURE__ */ t.createElement(Fe, null, /* @__PURE__ */ t.createElement(Se, { ...ce }), p && /* @__PURE__ */ t.createElement(he, { iconPlacement: "left", size: T }, t.cloneElement(p, { ...p.props, size: T })), /* @__PURE__ */ t.createElement(Ce, null, ie && re)), le && /* @__PURE__ */ t.createElement(ke, { ...ne() }, x.reduce(
+          (r, c, h) => (L ? r.itemsToRender.push(
+            // eslint-disable-next-line react/no-array-index-key
+            /* @__PURE__ */ t.createElement(ue, { key: h }, K(c), c.options && c.options.map((I, de) => {
+              const W = r.itemIndex++;
+              return /* @__PURE__ */ t.createElement(
+                O,
+                {
+                  key: de,
+                  ...M({
+                    index: W,
+                    isSelected: u && l(u) === l(I),
+                    item: I
+                  }),
+                  isHighlighted: P === W
+                },
+                C(I)
+              );
+            }))
+          ) : r.itemsToRender.push(
+            /* @__PURE__ */ t.createElement(
+              O,
+              {
+                key: h,
+                ...M({
+                  index: h,
+                  isSelected: u && l(u) === l(c),
+                  item: c
+                }),
+                isHighlighted: P === h
+              },
+              C(c)
+            )
+          ), r),
+          { itemsToRender: [], itemIndex: 0 }
+        ).itemsToRender));
+      }
+    );
+  }
+);
+xe.displayName = "Search";
+const Ae = G;
+export {
+  xe as Search,
+  Ae as StyledSearch
+};

package/dist/Select.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react");require("downshift");require("match-sorter");require("./Icon.js");const e=require("./index-DG7ovxHW.js");require("./ClearButton.js");require("./System.js");require("./create-event-YSlay9Ef.js");require("./field-styles-D_gf6ypV.js");exports.Select=e.Select;exports.StyledSelect=e.StyledSelect;

package/dist/Select.mjs

@@ -0,0 +1,13 @@
+import "react";
+import "downshift";
+import "match-sorter";
+import "./Icon.mjs";
+import { a as c, S as s } from "./index-CmBs24Im.mjs";
+import "./ClearButton.mjs";
+import "./System.mjs";
+import "./create-event-rXDe5aCQ.mjs";
+import "./field-styles-CeV7pnOp.mjs";
+export {
+  c as Select,
+  s as StyledSelect
+};

package/dist/Shape.js

@@ -0,0 +1,23 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),d=require("./System.js"),s=require("@xstyled/styled-components"),r=require("./get-max-width-height-CDLBnp_J.js"),l=require("./Box.js"),h=(t,e,i)=>s.css`
+  width: ${r.getMax(t,e)};
+  height: ${r.getMax(t,e)};
+  border-radius: ${i==="circle"&&"50%"};
+`,u=s(l.Box)(({h:t,shape:e,w:i})=>s.css`
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      object-fit: cover;
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+    }
+
+    ${s.system};
+
+    /* we must override shapeStyles (let this line under ${s.system}) */
+    ${e&&h(i,t,e)}
+  `),o=d.forwardRef(({children:t,dataTestId:e,shape:i,...c},n)=>a.createElement(u,{"data-testid":e,ref:n,shape:i,...c},t));o.displayName="Shape";exports.Shape=o;

package/dist/Shape.mjs

@@ -0,0 +1,37 @@
+"use client";
+import l from "react";
+import { forwardRef as m } from "./System.mjs";
+import n, { css as s, system as o } from "@xstyled/styled-components";
+import { g as r } from "./get-max-width-height-DoUro2T7.mjs";
+import { Box as c } from "./Box.mjs";
+const f = (t, e, i) => s`
+  width: ${r(t, e)};
+  height: ${r(t, e)};
+  border-radius: ${i === "circle" && "50%"};
+`, p = n(c)(
+  ({ h: t, shape: e, w: i }) => s`
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      object-fit: cover;
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+    }
+
+    ${o};
+
+    /* we must override shapeStyles (let this line under ${o}) */
+    ${e && f(i, t, e)}
+  `
+), h = m(
+  ({ children: t, dataTestId: e, shape: i, ...a }, d) => /* @__PURE__ */ l.createElement(p, { "data-testid": e, ref: d, shape: i, ...a }, t)
+);
+h.displayName = "Shape";
+export {
+  h as Shape
+};

package/dist/Slider.js

@@ -0,0 +1,190 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),Y=require("./Text.js"),P=require("./InputText.js"),Z=require("./System.js"),p=require("./Box.js"),F=require("./Hint.js"),n=require("@xstyled/styled-components"),H=n.css`
+  appearance: none;
+  cursor: pointer;
+  height: 20;
+  width: 20;
+  transform: scale(1);
+  transition:
+    background-color ${n.th.transition("medium")},
+    border-color ${n.th.transition("medium")},
+    transform 100ms ease-in-out;
+`,O=n.css`
+  ${n.th("sliders.focused")};
+  transform: scale(1.2);
+`,ee=n.css`
+  position: absolute;
+  width: 100%;
+  height: ${n.th("space.xs")};
+`,le=n.input(({borderSelectorColor:l,disabled:c})=>n.css`
+    ${n.th("sliders.default")};
+    appearance: none;
+    cursor: pointer;
+    background-repeat: no-repeat;
+    border-radius: 0;
+    margin: auto 0;
+    width: 100%;
+    height: ${n.th("space.xs")};
+
+    &::-webkit-slider-thumb {
+      ${n.th("sliders.selector")};
+      ${H};
+      border-color: ${l||"transparent"};
+    }
+
+    &::-moz-range-thumb {
+      ${n.th("sliders.selector")};
+      ${H};
+      border-color: ${l||"transparent"};
+    }
+
+    &:active,
+    &:focus-visible {
+      outline: none;
+
+      &::-webkit-slider-thumb {
+        ${O};
+      }
+
+      &::-moz-range-thumb {
+        ${O};
+      }
+    }
+
+    ${c&&n.css`
+      ${n.th("sliders.disabled")}
+      cursor: not-allowed;
+
+      &::-webkit-slider-thumb {
+        ${n.th("sliders.selector.disabled")};
+        cursor: not-allowed;
+      }
+
+      &::-moz-range-thumb {
+        ${n.th("sliders.selector.disabled")};
+        cursor: not-allowed;
+      }
+
+      &:active {
+        &::-webkit-slider-thumb {
+          ${n.th("sliders.focused.disabled")};
+        }
+
+        &::-moz-range-thumb {
+          ${n.th("sliders.focused.disabled")};
+        }
+      }
+    `};
+  `),Q=n.input(({borderSelectorColor:l,disabled:c})=>n.css`
+    ${n.th("sliders.rangeInput")}
+    appearance: none;
+    pointer-events: none;
+    position: absolute;
+    height: 0;
+    width: 100%;
+    outline: none;
+    z-index: 1;
+    top: ${n.th("space.xxs")};
+
+    &::-webkit-slider-thumb {
+      ${n.th("sliders.selector")};
+      ${H};
+
+      border-color: ${l||"transparent"};
+      top: ${n.th("space.sm")};
+      pointer-events: all;
+      position: relative;
+    }
+
+    &::-moz-range-thumb {
+      ${n.th("sliders.selector")};
+      ${H};
+
+      border-color: ${l||"transparent"};
+      top: ${n.th("space.sm")};
+      pointer-events: all;
+      position: relative;
+    }
+
+    &:active,
+    &:focus-visible {
+      &::-webkit-slider-thumb {
+        ${O};
+      }
+
+      &::-moz-range-thumb {
+        ${O};
+      }
+    }
+
+    ${c&&n.css`
+      &::-webkit-slider-thumb {
+        ${n.th("sliders.selector.disabled")};
+        cursor: not-allowed;
+      }
+
+      &::-moz-range-thumb {
+        ${n.th("sliders.selector.disabled")};
+        cursor: not-allowed;
+      }
+
+      &:active {
+        &::-webkit-slider-thumb {
+          ${n.th("sliders.focused.disabled")};
+        }
+
+        &::-moz-range-thumb {
+          ${n.th("sliders.focused.disabled")};
+        }
+      }
+    `};
+  `),ae=n(p.Box)(()=>n.css`
+    ${ee};
+    background-color: beige-40;
+  `),ie=n(p.Box)(({disabled:l})=>n.css`
+    ${ee};
+    background-color: primary-40;
+
+    ${l&&n.css`
+      ${n.th("sliders.disabled")}
+      cursor: not-allowed;
+    `};
+  `),te=n(p.Box)(()=>n.css`
+    position: absolute;
+
+    :before {
+      content: '';
+      position: absolute;
+      background-color: neutral-30;
+      height: 6;
+      width: 1;
+      transform: translate(-50%);
+    }
+  `),ne=n(F.Hint)(()=>n.css`
+    position: absolute;
+    color: neutral-50;
+    top: 0;
+    transform: translate(-50%);
+    white-space: nowrap;
+  `),W=n.outputBox(({isVisible:l})=>n.css`
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 150ms ease-in-out,
+      visibility 150ms ease-in-out,
+      transform 150ms ease-in-out;
+    position: absolute;
+    text-align: center;
+    transform: translate(-50%, calc(-100% + -${n.th("space.xs")}));
+
+    ${l&&n.css`
+      opacity: 100;
+      visibility: visible;
+      transform: translate(-50%, calc(-100% + -${n.th("space.sm")}));
+    `}
+  `),j=n(p.Box)(()=>n.css`
+    ${n.th("sliders.output.tooltip")};
+    flex: 1 1 auto;
+    margin: auto;
+    min-width: ${n.th("space.xxs")};
+    padding: ${n.th("space.xs")} ${n.th("space.sm")};
+  `),X=20,z=({min:l,step:c,toCompare:$,value:E})=>{let s=Math.min(E,$-1*c);return s=Math.max(s,l),A(s,c)},N=({max:l,step:c,toCompare:$,value:E})=>{let s=Math.max(E,$+1*c);return s=Math.min(s,l),A(s,c)},ce=Z.forwardRef(({borderSelectorColor:l="neutral-10",disabled:c,hint:$,label:E,max:s,min:a,onChange:g,step:i=1,tooltip:y,type:b,value:h,values:C,...L},U)=>{const[u,M]=e.useState(a),[f,B]=e.useState(s),[I,w]=e.useState(s),[x,v]=e.useState(s),D=e.useRef(null),q=e.useRef(null),k=e.useRef(null),R=e.useRef(null),T=e.useRef(null),[S,o]=e.useState(!1),[d,_]=e.useState(!1),se=t=>{const r=z({value:parseInt(t.target.value,10),toCompare:f,step:i,min:a});w(r),M(r),t.target.value=r.toString()},oe=t=>{const r=N({value:parseInt(t.target.value,10),toCompare:u,step:i,max:s});v(r),B(r),t.target.value=r.toString()},J=(t,r)=>{if(t.preventDefault(),r==="min"){let m=u;t.key==="ArrowRight"&&(m=z({value:m+i,toCompare:f,step:i,min:a})),t.key==="ArrowLeft"&&(m=z({value:m-i,toCompare:f,step:i,min:a})),w(m),M(m),g({min:m,max:f})}if(r==="max"){let m=f;t.key==="ArrowRight"&&(m=N({value:m+i,toCompare:u,step:i,max:s})),t.key==="ArrowLeft"&&(m=N({value:m-i,toCompare:u,step:i,max:s})),v(m),B(m),g({min:u,max:m})}},V=e.useCallback(t=>{const r=Math.round((t-a)/(s-a)*100);return r<0?0:r>100?100:r},[a,s]);return e.useEffect(()=>{if(q.current){const t=V(u),r=V(parseInt(q.current.value,10));k.current&&(k.current.style.left=`${t}%`,k.current.style.width=`${r-t}%`)}},[u,V]),e.useEffect(()=>{if(D.current){const t=V(parseInt(D.current.value,10)),r=V(f);if(k.current&&(k.current.style.width=`${r-t}%`),R.current){const m=V(u)/100;R.current.style.left=`calc(${m*100}% + ${(.5-m)*X}px)`}if(T.current){const m=V(f)/100;T.current.style.left=`calc(${m*100}% + ${(.5-m)*X}px)`}}},[u,f,V]),e.useEffect(()=>{if(h){if(!isNaN(h.min)&&h.min!==u){const t=z({value:h.min||a,toCompare:f,step:i,min:a});M(t),w(t)}if(!isNaN(h.max)&&h.max!==f){const t=N({value:h.max||s,toCompare:u,step:i,max:s});B(t),v(t)}}},[h]),e.createElement(p.Box,{position:"relative",ref:U,w:"100%"},E&&e.createElement(Y.Text,{as:"label",variant:"sm"},E),e.createElement(p.Box,{alignItems:"center",display:"flex",gap:"sm"},(b==="inline"||b==="fields")&&(b==="fields"?e.createElement(P.InputText,{disabled:c,max:f,min:a,onBlur:()=>{const t=z({value:I,toCompare:f,step:i,min:a});w(t),M(t),g({min:t,max:f})},onChange:t=>{let r=parseInt(t.target.value,10);isNaN(r)&&(r=0),w(r)},onKeyDown:t=>{if(t.key==="Enter"){const r=z({value:I,toCompare:f,step:i,min:a});w(r),M(r),g({min:r,max:f})}},size:"sm",type:"number",value:I.toString(),w:72}):e.createElement(p.Box,null,a)),e.createElement(p.Box,{flexGrow:"1",position:"relative"},y&&e.createElement(e.Fragment,null,e.createElement(W,{isVisible:S,ref:R},e.createElement(j,null,u)),e.createElement(W,{isVisible:d,ref:T},e.createElement(j,null,f))),e.createElement(p.Box,{h:20,pb:"sm",position:"relative",pt:"sm",w:"100%"},e.createElement(Q,{...L,borderSelectorColor:l,disabled:c,max:s,min:a,onChange:se,onKeyDown:t=>J(t,"min"),onMouseDown:()=>{y&&S===!1&&o(!0)},onMouseUp:()=>{g({min:u,max:f}),y&&o(!1)},ref:D,step:i,type:"range",value:u}),e.createElement(Q,{...L,borderSelectorColor:l,disabled:c,max:s,min:a,onChange:oe,onKeyDown:t=>J(t,"max"),onMouseDown:()=>{y&&d===!1&&_(!0)},onMouseUp:()=>{g({min:u,max:f}),y&&_(!1)},ref:q,step:i,type:"range",value:f}),e.createElement(ae,null),e.createElement(ie,{disabled:c,ref:k})),C&&e.createElement(p.Box,{h:24,ml:10,mr:10,position:"relative"},C.reduce((t,r)=>t.includes(r)?t:[...t,r],[]).filter(t=>t>=a&&t<=s).map((t,r)=>e.createElement(te,{key:`${t}-${r}`,left:`${V(t)}%`},e.createElement(ne,null,t))))),(b==="inline"||b==="fields")&&(b==="fields"?e.createElement(P.InputText,{disabled:c,max:s,min:u+1,onBlur:()=>{const t=N({value:x,toCompare:u,step:i,max:s});v(t),B(t),g({min:u,max:t})},onChange:t=>{let r=parseInt(t.target.value,10);isNaN(r)&&(r=0),v(r)},onKeyDown:t=>{if(t.key==="Enter"){const r=N({value:x,toCompare:u,step:i,max:s});v(r),B(r),g({min:u,max:r})}},size:"sm",type:"number",value:x.toString(),w:72}):e.createElement(p.Box,null,s))),$&&e.createElement(F.Hint,{color:"neutral-50",mt:0},$))}),re=20,A=(l,c)=>Math.round(l/c)*c,K=(l,c,$,E)=>(l=A(l,E),l<c?c:l>$?$:l),G=Z.forwardRef(({borderSelectorColor:l="neutral-10",disabled:c,hint:$,label:E,max:s,min:a,onChange:g,step:i=1,tooltip:y,type:b,value:h,values:C,...L},U)=>{const u=e.useRef(null),M=e.useRef(null),[f,B]=e.useState(!1),[I,w]=e.useState(K(h,a,s,i)),[x,v]=e.useState(K(h,a,s,i)),D=o=>{o=A(o,i),v(o)},q=o=>{o.preventDefault();let d=x;o.key==="ArrowRight"&&(d=K(d+i,a,s,i)),o.key==="ArrowLeft"&&(d=K(d-i,a,s,i)),v(d),w(d),g(d)},k=o=>{let d=parseInt(o.target.value,10);isNaN(d)&&(d=0),w(d)},R=()=>{const o=K(I,a,s,i);w(o),v(o),g(o)},T=o=>{o.key==="Enter"&&R()},S=e.useCallback(o=>Math.round((o-a)/(s-a)*100),[a,s]);return e.useEffect(()=>{if(u.current&&(u.current.style.backgroundSize=`${S(x)}% 100%`),M.current){const o=S(x)/100;M.current.style.left=`calc(${o*100}% + ${(.5-o)*re}px)`}},[x,S]),e.useEffect(()=>{!isNaN(h)&&h!==x&&h&&(D(h),w(h))},[h]),e.createElement(p.Box,{display:"flex",flexDirection:"column",position:"relative",ref:U},E&&e.createElement(Y.Text,{as:"label",variant:"sm"},E),e.createElement(p.Box,{alignItems:"center",display:"flex",gap:"sm"},(b==="inline"||b==="left-field")&&(b==="left-field"?e.createElement(P.InputText,{disabled:c,max:s,min:a,onBlur:R,onChange:k,onKeyDown:T,size:"sm",type:"number",value:I.toString(),w:72}):e.createElement(p.Box,null,a)),e.createElement(p.Box,{display:"flex",flexDirection:"column",flexGrow:"1",h:20,position:"relative"},e.createElement(le,{borderSelectorColor:l,disabled:c,list:"tickmarks",max:s,min:a,onChange:o=>{const d=parseInt(o.target.value,10);D(d),w(d)},onKeyDown:q,onMouseDown:()=>{y&&f===!1&&B(!0)},onMouseUp:()=>{g(x),y&&B(!1)},ref:u,step:i,type:"range",value:x,...L}),y&&e.createElement(W,{isVisible:f,ref:M},e.createElement(j,null,x)),C&&e.createElement(p.Box,{h:24,ml:10,mr:10,mt:5,position:"relative"},C.reduce((o,d)=>o.includes(d)?o:[...o,d],[]).filter(o=>o>=a&&o<=s).map((o,d)=>e.createElement(te,{key:`${o}-${d}`,left:`${S(o)}%`},e.createElement(ne,null,o))))),(b==="inline"||b==="right-field")&&(b==="right-field"?e.createElement(P.InputText,{disabled:c,max:s,min:a,onBlur:R,onChange:k,onKeyDown:T,size:"sm",type:"number",value:I.toString(),w:72}):e.createElement(p.Box,null,s))),$&&e.createElement(F.Hint,{color:"neutral-50",mt:0},$))});G.displayName="Slider";const ue=Object.assign(G,{Range:ce});exports.Slider=ue;exports.SliderComponent=G;exports.ensureMinMax=K;exports.round=A;exports.thumbWidth=re;