@cfx-dev/ui-components 4.5.16 → 4.5.18

package/dist/components/Checkbox/Checkbox.js

@@ -1,9 +1,9 @@
 import { jsx as s, jsxs as w, Fragment as $ } from "react/jsx-runtime";
 import * as l from "react";
 import G from "react";
-import { c as K, P as g, d as X, u as B, e as q, f as J } from "../../index-DCuJlMqr.js";
+import { c as K, P as g, u as X, b as B, a as q, d as J } from "../../index-CfQtbUfi.js";
 import { u as Q } from "../../index-BZPx6jYI.js";
-import { P as V } from "../../index-DWzyrn_L.js";
+import { P as V } from "../../index-3ctv5u9o.js";
 import "../Icons/cfx-icons/Close.js";
 import "../Icons/cfx-icons/Controller.js";
 import "../Icons/cfx-icons/Copy.js";
@@ -58,7 +58,7 @@ import "../Icons/cfx-icons-big/Warning.js";
 import "../Icons/cfx-icons-big/Confirm.js";
 import { clsx as N } from "../../utils/clsx.js";
 import { getColor as Z } from "../../utils/color.js";
-var R = "Checkbox", [ee, Co] = K(R), [oe, E] = ee(R);
+var R = "Checkbox", [ee, bo] = K(R), [oe, E] = ee(R);
 function te(o) {
   const {
     __scopeCheckbox: a,
@@ -70,10 +70,10 @@ function te(o) {
     name: _,
     onCheckedChange: d,
     required: h,
-    value: C = "on",
+    value: b = "on",
     // @ts-expect-error
     internal_do_not_use_render: p
-  } = o, [i, b] = X({
+  } = o, [i, C] = X({
     prop: n,
     defaultProp: r ?? !1,
     onChange: d,
@@ -84,12 +84,12 @@ function te(o) {
   ), P = {
     checked: i,
     disabled: e,
-    setChecked: b,
+    setChecked: C,
     control: u,
     setControl: k,
     name: _,
     form: f,
-    value: C,
+    value: b,
     hasConsumerStoppedPropagationRef: c,
     required: h,
     defaultChecked: v(r) ? !1 : r,
@@ -114,12 +114,12 @@ var T = "CheckboxTrigger", M = l.forwardRef(
       disabled: _,
       checked: d,
       required: h,
-      setControl: C,
+      setControl: b,
       setChecked: p,
       hasConsumerStoppedPropagationRef: i,
-      isFormControl: b,
+      isFormControl: C,
       bubbleInput: u
-    } = E(T, o), k = B(r, C), I = l.useRef(d);
+    } = E(T, o), k = B(r, b), I = l.useRef(d);
     return l.useEffect(() => {
       const t = e == null ? void 0 : e.form;
       if (t) {
@@ -143,7 +143,7 @@ var T = "CheckboxTrigger", M = l.forwardRef(
           t.key === "Enter" && t.preventDefault();
         }),
         onClick: q(n, (t) => {
-          p((c) => v(c) ? !0 : !c), u && b && (i.current = t.isPropagationStopped(), i.current || t.stopPropagation());
+          p((c) => v(c) ? !0 : !c), u && C && (i.current = t.isPropagationStopped(), i.current || t.stopPropagation());
         })
       }
     );
@@ -161,7 +161,7 @@ var U = l.forwardRef(
       disabled: _,
       value: d,
       onCheckedChange: h,
-      form: C,
+      form: b,
       ...p
     } = o;
     return /* @__PURE__ */ s(
@@ -174,7 +174,7 @@ var U = l.forwardRef(
         required: f,
         onCheckedChange: h,
         name: m,
-        form: C,
+        form: b,
         value: d,
         internal_do_not_use_render: ({ isFormControl: i }) => /* @__PURE__ */ w($, { children: [
           /* @__PURE__ */ s(
@@ -229,11 +229,11 @@ var F = "CheckboxBubbleInput", L = l.forwardRef(
       required: _,
       disabled: d,
       name: h,
-      value: C,
+      value: b,
       form: p,
       bubbleInput: i,
-      setBubbleInput: b
-    } = E(F, o), u = B(n, b), k = Q(e), I = J(m);
+      setBubbleInput: C
+    } = E(F, o), u = B(n, C), k = Q(e), I = J(m);
     l.useEffect(() => {
       const c = i;
       if (!c) return;
@@ -256,7 +256,7 @@ var F = "CheckboxBubbleInput", L = l.forwardRef(
         required: _,
         disabled: d,
         name: h,
-        value: C,
+        value: b,
         form: p,
         ...a,
         tabIndex: -1,
@@ -309,10 +309,10 @@ function de(o) {
     squareClassName: _,
     colorToken: d,
     color: h,
-    opacity: C,
+    opacity: b,
     luminance: p,
     checked: i,
-    name: b,
+    name: C,
     iconIndicator: u = z,
     iconSquare: k = W,
     ...I
@@ -341,11 +341,11 @@ function de(o) {
       style: { color: t },
       className: c,
       children: [
-        b && /* @__PURE__ */ s(
+        C && /* @__PURE__ */ s(
           "input",
           {
             type: "hidden",
-            name: b,
+            name: C,
             value: i ? "on" : ""
           }
         ),
@@ -355,7 +355,7 @@ function de(o) {
     }
   );
 }
-const bo = G.memo(de);
+const Co = G.memo(de);
 export {
-  bo as default
+  Co as default
 };

package/dist/components/DropdownContent/DropdownContent.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { D as a, g as i } from "../../DropdownContent-CLtPVRZg.js";
+import { D as a, g as i } from "../../DropdownContent-MvHlrWi6.js";
 import "react";
 import "../../utils/clsx.js";
 import "../../utils/ui/ui.js";

package/dist/components/DropdownContent/index.js

@@ -1,4 +1,4 @@
-import { D as n, g as t } from "../../DropdownContent-CLtPVRZg.js";
+import { D as n, g as t } from "../../DropdownContent-MvHlrWi6.js";
 export {
   n as DropdownContent,
   t as getDropdownContentSizeClassNames

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,5 +1,5 @@
 import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import { R as m, T as p, D as f } from "../../DropdownContent-CLtPVRZg.js";
+import { R as m, T as p, D as f } from "../../DropdownContent-MvHlrWi6.js";
 import u from "react";
 function h(t) {
   const {

package/dist/components/DropdownSelect/DropdownSelect.js

@@ -1,5 +1,5 @@
 import { jsxs as f, jsx as l } from "react/jsx-runtime";
-import { g as W, R as N, T as R, D as v } from "../../DropdownContent-CLtPVRZg.js";
+import { g as W, R as N, T as R, D as v } from "../../DropdownContent-MvHlrWi6.js";
 import _, { useRef as b, useState as z, useEffect as I } from "react";
 import T from "../Flex/Flex.js";
 import { clsx as j } from "../../utils/clsx.js";

package/dist/components/Flyout/Flyout.d.ts

@@ -1,15 +1,18 @@
 import { default as React } from 'react';
 
 export declare const FLYOUT_OUTLET_ID = "flyout-outlet";
+export declare const FLYOUT_ROOT_ID = "cfxui-root";
+export declare const FLYOUT_ROOT_SHRINK_CLASSNAME = "shrink";
 export type FlyoutSize = 'normal' | 'small' | 'xsmall' | 'xxsmall';
-export type FlyoutTheme = 'default' | 'filter';
-export interface FlyoutProps {
+export type FlyoutTheme = 'default' | 'legacy';
+export interface FlyoutProps extends React.PropsWithChildren {
     disabled?: boolean;
     theme?: FlyoutTheme;
     size?: FlyoutSize;
     onClose?(): void;
-    children?: React.ReactNode;
     holderClassName?: string;
+    rootClassName?: string;
+    maskClassName?: string;
 }
 export declare function Flyout(props: FlyoutProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Flyout {
@@ -19,4 +22,5 @@ export interface FlyoutHeaderProps {
     onClose?(): void;
     children: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
+    className?: string;
 }

package/dist/components/Flyout/Flyout.js

@@ -1,66 +1,79 @@
-import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import f from "react";
-import { F as p } from "../../Combination-N-vN9BB-.js";
-import h from "../Button/Button.js";
-import { clsx as r } from "../../utils/clsx.js";
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import y from "react";
+import { F as x } from "../../Combination-N-vN9BB-.js";
+import F from "../Button/Button.js";
+import { clsx as s } from "../../utils/clsx.js";
 import "../../utils/links.js";
-import { Interactive as x } from "../Interactive/Interactive.js";
-import { noop as y } from "../../utils/functional.js";
+import { Interactive as k } from "../Interactive/Interactive.js";
+import { noop as b } from "../../utils/functional.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
-import { useKeyboardClose as F } from "../../utils/hooks/useKeyboardClose.js";
-import { useOutlet as k } from "../../utils/hooks/useOutlet.js";
-const b = "cfxui__Flyout__root__eba04", v = "cfxui__Flyout__backdrop__57f9e", z = "cfxui__Flyout__mask__72713", C = "cfxui__Flyout__holder__d80b5", N = "cfxui__Flyout__content__04e42", L = "cfxui__Flyout__active__14a29", O = "cfxui__Flyout__header__40009", E = "cfxui__Flyout__title__b235a", e = {
-  root: b,
-  backdrop: v,
-  mask: z,
-  holder: C,
-  content: N,
+import { useKeyboardClose as N } from "../../utils/hooks/useKeyboardClose.js";
+import { useOutlet as C } from "../../utils/hooks/useOutlet.js";
+const v = "cfxui__Flyout__root__eba04", z = "cfxui__Flyout__backdrop__57f9e", O = "cfxui__Flyout__holder__d80b5", L = "cfxui__Flyout__content__04e42", T = "cfxui__Flyout__header__40009", I = "cfxui__Flyout__title__b235a", E = "cfxui__Flyout__active__14a29", U = "cfxui__Flyout__mask__72713", e = {
+  root: v,
+  backdrop: z,
+  holder: O,
+  content: L,
+  header: T,
+  title: I,
+  active: E,
+  "backdrop-appearance": "cfxui__Flyout__backdrop-appearance__d9564",
+  mask: U,
+  "holder-appearance-btu": "cfxui__Flyout__holder-appearance-btu__84100",
+  "holder-appearance-rtl": "cfxui__Flyout__holder-appearance-rtl__3ccf2",
+  "theme-legacy": "cfxui__Flyout__theme-legacy__a3452",
   "size-normal": "cfxui__Flyout__size-normal__e1165",
   "size-small": "cfxui__Flyout__size-small__038a5",
   "size-xsmall": "cfxui__Flyout__size-xsmall__839e8",
   "size-xxsmall": "cfxui__Flyout__size-xxsmall__33712",
-  "theme-filter": "cfxui__Flyout__theme-filter__1fcce",
-  active: L,
-  "backdrop-appearance": "cfxui__Flyout__backdrop-appearance__d9564",
-  "holder-appearance": "cfxui__Flyout__holder-appearance__e818c",
-  header: O,
-  title: E
-}, I = "flyout-outlet";
-function T(c) {
+  "backdrop-appearance-rtl": "cfxui__Flyout__backdrop-appearance-rtl__9f651"
+}, g = "flyout-outlet", H = "cfxui-root", n = "shrink";
+function S(i) {
   const {
     disabled: t = !1,
-    size: l = "normal",
-    theme: a = "default",
-    onClose: s = y,
-    children: n,
-    holderClassName: m
-  } = c, u = k(I);
-  f.useEffect(() => {
+    size: a = "normal",
+    theme: c = "default",
+    onClose: l = b,
+    children: r,
+    holderClassName: u,
+    rootClassName: d,
+    maskClassName: f
+  } = i, p = C(g);
+  y.useEffect(() => {
     if (t)
       return;
-    const _ = document.getElementById("cfxui-root");
-    return _ == null || _.classList.add("shrink"), () => _ == null ? void 0 : _.classList.remove("shrink");
-  }, [t]), F(s);
-  const d = r(e.root, e[`size-${l}`], e[`theme-${a}`], {
-    [e.active]: !t
-  });
-  return /* @__PURE__ */ o(u, { children: /* @__PURE__ */ i("div", { className: d, children: [
-    /* @__PURE__ */ o(x, { showPointer: !1, className: e.backdrop, onClick: s }),
-    /* @__PURE__ */ o("div", { className: e.mask, children: /* @__PURE__ */ o("div", { className: r(e.holder, m), children: /* @__PURE__ */ o(p, { disabled: !!t, className: e.content, children: n }) }) })
+    const _ = document.getElementById(H);
+    return _ == null || _.classList.add(n), () => _ == null ? void 0 : _.classList.remove(n);
+  }, [t]), N(l);
+  const h = s(
+    e.root,
+    e[`size-${a}`],
+    e[`theme-${c}`],
+    {
+      [e.active]: !t
+    },
+    d
+  );
+  return /* @__PURE__ */ o(p, { children: /* @__PURE__ */ m("div", { className: h, children: [
+    /* @__PURE__ */ o(k, { showPointer: !1, className: e.backdrop, onClick: l }),
+    /* @__PURE__ */ o("div", { className: s(e.mask, f), children: /* @__PURE__ */ o("div", { className: s(e.holder, u), children: /* @__PURE__ */ o(x, { disabled: t, className: e.content, children: r }) }) })
   ] }) });
 }
-T.Header = function(t) {
+S.Header = function(t) {
   const {
-    onClose: l,
-    children: a,
-    ref: s
+    onClose: a,
+    children: c,
+    ref: l,
+    className: r
   } = t;
-  return /* @__PURE__ */ i("div", { ref: s, className: e.header, children: [
-    /* @__PURE__ */ o("div", { className: e.title, children: a }),
-    !!l && /* @__PURE__ */ o(h, { icon: "Close", onClick: l })
+  return /* @__PURE__ */ m("div", { ref: l, className: s(e.header, r), children: [
+    /* @__PURE__ */ o("div", { className: e.title, children: c }),
+    !!a && /* @__PURE__ */ o(F, { icon: "Close", onClick: a })
   ] });
 };
 export {
-  I as FLYOUT_OUTLET_ID,
-  T as Flyout
+  g as FLYOUT_OUTLET_ID,
+  H as FLYOUT_ROOT_ID,
+  n as FLYOUT_ROOT_SHRINK_CLASSNAME,
+  S as Flyout
 };

package/dist/components/Flyout/FlyoutShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function FlyoutShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FlyoutShowcase>;
+export default _default;

package/dist/components/Flyout/FlyoutShowcase.js

@@ -0,0 +1,28 @@
+import { jsxs as o, Fragment as s, jsx as r } from "react/jsx-runtime";
+import n from "react";
+import { Flyout as l } from "./Flyout.js";
+function i() {
+  const [e, t] = n.useState(!0);
+  return /* @__PURE__ */ o(s, { children: [
+    /* @__PURE__ */ o("button", { type: "button", onClick: () => t(!e), children: [
+      e ? "Open" : "Close",
+      " ",
+      "Flyout"
+    ] }),
+    /* @__PURE__ */ o(
+      l,
+      {
+        disabled: e,
+        onClose: () => t(!0),
+        children: [
+          /* @__PURE__ */ r(l.Header, { onClose: () => t(!0), children: /* @__PURE__ */ r("h1", { children: "Header" }) }),
+          /* @__PURE__ */ r("p", { children: "This is a flyout" })
+        ]
+      }
+    )
+  ] });
+}
+const d = n.memo(i);
+export {
+  d as default
+};

package/dist/components/Flyout/index.d.ts

@@ -1,2 +1,2 @@
-export { FLYOUT_OUTLET_ID, Flyout } from './Flyout';
+export { Flyout, FLYOUT_OUTLET_ID, FLYOUT_ROOT_ID, FLYOUT_ROOT_SHRINK_CLASSNAME, } from './Flyout';
 export type { FlyoutProps, FlyoutSize, FlyoutTheme, } from './Flyout';

package/dist/components/Flyout/index.js

@@ -1,5 +1,7 @@
-import { FLYOUT_OUTLET_ID as r, Flyout as t } from "./Flyout.js";
+import { FLYOUT_OUTLET_ID as _, FLYOUT_ROOT_ID as L, FLYOUT_ROOT_SHRINK_CLASSNAME as F, Flyout as U } from "./Flyout.js";
 export {
-  r as FLYOUT_OUTLET_ID,
-  t as Flyout
+  _ as FLYOUT_OUTLET_ID,
+  L as FLYOUT_ROOT_ID,
+  F as FLYOUT_ROOT_SHRINK_CLASSNAME,
+  U as Flyout
 };

package/dist/components/Range/Range.d.ts

@@ -0,0 +1,4 @@
+import { RangeProps } from './Range.types';
+
+declare function Range(props: RangeProps): import("react/jsx-runtime").JSX.Element;
+export default Range;

package/dist/components/Range/Range.js

@@ -0,0 +1,90 @@
+import { jsxs as R, jsx as a } from "react/jsx-runtime";
+import { R as p, T as w, a as N, b as s } from "../../index-D5SMGei3.js";
+import L from "react";
+import { clsx as r } from "../../utils/clsx.js";
+const k = "cfxui__Range__root__9b6c3", v = "cfxui__Range__disabled__1bbc7", I = "cfxui__Range__track__28130", T = "cfxui__Range__range__2adcc", V = "cfxui__Range__thumb__905e9", B = "cfxui__Range__thumbIcon__acb4e", e = {
+  root: k,
+  disabled: v,
+  track: I,
+  range: T,
+  thumb: V,
+  thumbIcon: B
+};
+function j(t) {
+  return /* @__PURE__ */ a(
+    "svg",
+    {
+      viewBox: "0 0 16 22",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...t,
+      children: /* @__PURE__ */ a(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M0 1.74333C0 0.595035 1.29793 -0.0729044 2.23234 0.594526L15.1917 9.8512C15.9799 10.4142 15.9799 11.5858 15.1917 12.1488L2.23234 21.4055C1.29793 22.0729 0 21.405 0 20.2567V1.74333Z"
+        }
+      )
+    }
+  );
+}
+function M(t) {
+  return /* @__PURE__ */ a(
+    "svg",
+    {
+      viewBox: "0 0 16 22",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...t,
+      children: /* @__PURE__ */ a(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M15.8 20.2567C15.8 21.405 14.5021 22.0729 13.5677 21.4055L0.608372 12.1488C-0.179886 11.5858 -0.179887 10.4142 0.608371 9.8512L13.5677 0.594526C14.5021 -0.0729047 15.8001 0.595036 15.8001 1.74333L15.8 20.2567Z"
+        }
+      )
+    }
+  );
+}
+function P(t) {
+  const {
+    value: o,
+    defaultValue: l,
+    ariaLabelStart: u,
+    ariaLabelEnd: _,
+    className: i,
+    trackClassName: m,
+    min: b = 0,
+    max: h,
+    minStepsBetweenThumbs: d = 1,
+    onValueChange: n,
+    ref: f,
+    disabled: c = !1,
+    ...g
+  } = t, x = L.useCallback((C) => {
+    n && n(C);
+  }, [n]);
+  return /* @__PURE__ */ R(
+    p,
+    {
+      ...g,
+      defaultValue: l,
+      ref: f,
+      min: b,
+      max: h,
+      value: o,
+      minStepsBetweenThumbs: d,
+      className: r(e.root, i, {
+        [e.disabled]: c
+      }),
+      onValueChange: x,
+      disabled: c,
+      children: [
+        /* @__PURE__ */ a(w, { className: r(e.track, m), children: /* @__PURE__ */ a(N, { className: e.range }) }),
+        /* @__PURE__ */ a(s, { className: e.thumb, "aria-label": u, children: /* @__PURE__ */ a(j, { className: e.thumbIcon }) }),
+        /* @__PURE__ */ a(s, { className: e.thumb, "aria-label": _, children: /* @__PURE__ */ a(M, { className: e.thumbIcon }) })
+      ]
+    }
+  );
+}
+export {
+  P as default
+};

package/dist/components/Range/Range.types.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import * as RadixSlider from '@radix-ui/react-slider';
+export interface RangeProps extends RadixSlider.SliderProps {
+    ariaLabelStart?: string;
+    ariaLabelEnd?: string;
+    ref?: React.Ref<HTMLSpanElement>;
+    className?: string;
+    trackClassName?: string;
+}

package/dist/components/Range/Range.types.js

@@ -0,0 +1 @@
+

package/dist/components/Range/RangeInput.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { StyledInputProps } from '../StyledInput';
+
+export interface RangeInputProps extends Omit<StyledInputProps, 'onChange'> {
+    fullWidth?: boolean;
+    containerClassName?: string;
+    sign?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: () => void;
+    onKeyDown?(event: React.KeyboardEvent<HTMLInputElement>): void;
+}
+declare function RangeInput(props: RangeInputProps): import("react/jsx-runtime").JSX.Element;
+export default RangeInput;

package/dist/components/Range/RangeInput.js

@@ -0,0 +1,78 @@
+import { jsxs as k, jsx as g } from "react/jsx-runtime";
+import a from "react";
+import v from "../StyledInput/StyledInput.js";
+import { clsx as h } from "../../utils/clsx.js";
+const A = "cfxui__RangeInput__root__d7257", D = "cfxui__RangeInput__fullWidth__4ffc7", K = "cfxui__RangeInput__input__3bdcc", j = "cfxui__RangeInput__sign__c4033", n = {
+  root: A,
+  fullWidth: D,
+  input: K,
+  sign: j
+};
+function X(o) {
+  const {
+    fullWidth: R = !1,
+    value: e,
+    defaultValue: _,
+    onChange: s,
+    onSubmit: l,
+    onKeyDown: u,
+    pattern: F,
+    className: x,
+    containerClassName: y,
+    type: N = "number",
+    ref: b,
+    sign: f,
+    ...I
+  } = o, [i, C] = a.useState(e || _), w = typeof i < "u" && i !== "" && i !== null || typeof e < "u" && e !== "" && e !== null;
+  let r, m, d;
+  if (o.type === "number") {
+    const {
+      min: t,
+      max: c,
+      step: W
+    } = o;
+    d = W ?? 1, r = t ?? Number.MIN_SAFE_INTEGER, m = c ?? Number.MAX_SAFE_INTEGER;
+  }
+  const p = a.useCallback((t) => {
+    C(t), s && s(t);
+  }, [s]), E = a.useCallback(
+    (t) => {
+      const {
+        value: c
+      } = t.target;
+      p(c);
+    },
+    [p]
+  ), S = a.useCallback((t) => {
+    u && u(t), l && t.key === "Enter" && l();
+  }, [u, l]), V = h(
+    n.root,
+    y,
+    {
+      [n.fullWidth]: R,
+      [n.empty]: !w
+    }
+  );
+  return /* @__PURE__ */ k("div", { className: V, children: [
+    f && /* @__PURE__ */ g("div", { className: n.sign, children: f }),
+    /* @__PURE__ */ g(
+      v,
+      {
+        ref: b,
+        type: N,
+        className: h(n.input, x),
+        value: e,
+        onChange: E,
+        onKeyDown: S,
+        min: r,
+        max: m,
+        step: d,
+        defaultValue: _,
+        ...I
+      }
+    )
+  ] });
+}
+export {
+  X as default
+};

package/dist/components/Range/RangeShowcase.d.ts

@@ -0,0 +1,2 @@
+declare function RangeShowcase(): import("react/jsx-runtime").JSX.Element;
+export default RangeShowcase;

package/dist/components/Range/RangeShowcase.js

@@ -0,0 +1,41 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import r from "../Flex/Flex.js";
+import { Text as t } from "../Text/Text.js";
+import "../../utils/ui/ui.js";
+import i from "./RangeWithInputs.js";
+function g() {
+  return /* @__PURE__ */ a(r, { gap: "large", vertical: !0, pb: 20, children: [
+    /* @__PURE__ */ a(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(t, { children: "Range With Inputs" }),
+      /* @__PURE__ */ e(
+        i,
+        {
+          defaultValue: [55, 100],
+          max: 200,
+          step: 5,
+          maxSign: "$",
+          minSign: "$",
+          name: "range-with-inputs"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(t, { children: "Disabled: Range With Inputs" }),
+      /* @__PURE__ */ e(
+        i,
+        {
+          defaultValue: [55, 100],
+          max: 200,
+          step: 5,
+          maxSign: "$",
+          minSign: "$",
+          disabled: !0,
+          name: "disabled-range"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  g as default
+};

package/dist/components/Range/RangeWithInputs.d.ts

@@ -0,0 +1,8 @@
+import { RangeProps } from './Range.types';
+
+export type RangeWithInputsProps = RangeProps & {
+    minSign?: string;
+    maxSign?: string;
+};
+declare function RangeWithInputs(props: RangeWithInputsProps): import("react/jsx-runtime").JSX.Element;
+export default RangeWithInputs;