@lanaco/lnc-react-ui 3.11.35 → 4.0.2

package/dist/DetailsView.cjs

@@ -0,0 +1,18 @@
+"use strict";const s=require("react/jsx-runtime"),k=require("react"),e=require("./index-DXnSjbfJ.cjs"),b=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),D=require("./FlexGrid.cjs"),L=require("./FlexGridItem.cjs"),n=require("./utils-hdRGTsQ7.cjs"),_=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),W=require("./Button.cjs"),c=require("./IconButton.cjs"),A=b.newStyled.label`
+  display: block;
+  margin-bottom: 4px;
+  ${o=>n.getComponentTypographyCss(o.theme,"FormField",o.size,"enabled")}
+  color: ${o=>n.getColorRgbaValue(o.theme,"FormField",o.color,"enabled","text")};
+`,T=k.forwardRef((o,p)=>{const{size:g="small",color:a="primary",className:P="",style:l={},children:y}=o,u=_.useTheme();return s.jsx(A,{theme:u,size:g,className:"lnc-ui-label "+P,style:l,color:a,ref:p,children:y})});T.defaultProps={style:{},size:"small",color:"primary"};T.propTypes={className:e.PropTypes.string,style:e.PropTypes.object,size:e.PropTypes.oneOf(["small","medium","large"]),color:e.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};const j=b.newStyled.div`
+  display: flex;
+  justify-content: space-between;
+`,Y=b.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  box-shadow: ${o=>n.getComponentPropValue(o.theme,"Popover",o.color,"enabled","boxShadow")};
+  border-radius: ${o=>n.getBorderRadiusValueWithUnits(o.theme,o.borderRadius)};
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
+  padding: 12px;
+  background-color: ${o=>n.getColorRgbaValue(o.theme,"Popover","default","enabled","bg")};
+`,m=k.forwardRef((o,p)=>{const{__TYPE__:g="DETAILS_VIEW",goToPreviousView:a,id:P,data:l={},fields:y={},flexGridProps:u,goBackText:E="Go back",showBack:v=!0,showNext:B=!0,showPrevious:N=!0,showEdit:x=!0,disableGoBack:C=!1,disableNext:q=!1,disablePrevious:S=!1,disableEdit:h=!1,editOnTop:f=!1,goToNext:R=()=>{},goToPrevious:V=()=>{},onEdit:w=()=>{},goBack:F=()=>{},className:U="",style:H={},color:t="primary",size:i="small",children:G,...I}=o,z=_.useTheme(),O=(r,d)=>{a&&a(),F(r,d)},$=()=>s.jsx(s.Fragment,{children:G||s.jsx(D,{spacing:10,...u,children:y.map((r,d)=>s.jsxs(L,{...r,children:[s.jsxs(T,{color:t,size:i,children:[r.label,":"]},d),l[r.accessor]]},d))})});return s.jsxs(Y,{ref:p,theme:z,color:t,borderRadius:"regular",...I,children:[s.jsxs(j,{children:[v&&s.jsx(W,{leadingIcon:"arrow-circle-left",text:E,btnType:"outline",style:{width:"fit-content"},onClick:r=>O(r,l),disabled:C,color:t,size:i},0),x&&f&&s.jsx(c,{btnType:"outline",icon:"pen",disabled:h,onClick:r=>w(l,r),color:t,size:i})]}),$(),s.jsxs(j,{children:[s.jsxs("div",{children:[B&&s.jsxs(s.Fragment,{children:[s.jsx(c,{btnType:"outline",icon:"angle-left",disabled:S,onClick:r=>V(l,r),color:t,size:i}),"  "]}),N&&s.jsx(c,{btnType:"outline",icon:"angle-right",disabled:q,onClick:r=>R(l,r),color:t,size:i})]}),x&&!f&&s.jsx(c,{btnType:"outline",icon:"pen",disabled:h,onClick:r=>w(l,r),color:t,size:i})]})]})});m.propTypes={__TYPE__:e.PropTypes.string,goBackText:e.PropTypes.string,fields:e.PropTypes.array,data:e.PropTypes.object,showBack:e.PropTypes.bool,showNext:e.PropTypes.bool,showPrevious:e.PropTypes.bool,showEdit:e.PropTypes.bool,disableGoBack:e.PropTypes.bool,disableNext:e.PropTypes.bool,disablePrevious:e.PropTypes.bool,disableEdit:e.PropTypes.bool,flexGridProps:e.PropTypes.any,editOnTop:e.PropTypes.bool,goToNext:e.PropTypes.func,goToPrevious:e.PropTypes.func,onEdit:e.PropTypes.func,goBack:e.PropTypes.func,className:e.PropTypes.string,style:e.PropTypes.object,color:e.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:e.PropTypes.oneOf(["small","medium","large"])};m.displayName="DETAILS_VIEW";module.exports=m;

package/dist/DetailsView.js

@@ -0,0 +1,243 @@
+import { jsx as a, jsxs as t, Fragment as k } from "react/jsx-runtime";
+import v from "react";
+import { P as e } from "./index-Ds9PUTwb.js";
+import { n as p } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import W from "./FlexGrid.js";
+import A from "./FlexGridItem.js";
+import { a as Y, b as B, d as U, c as q } from "./utils-DEke8iwo.js";
+import { u as E } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+import H from "./Button.js";
+import c from "./IconButton.js";
+const J = p.label`
+  display: block;
+  margin-bottom: 4px;
+  ${(o) => Y(o.theme, "FormField", o.size, "enabled")}
+  color: ${(o) => B(
+  o.theme,
+  "FormField",
+  o.color,
+  "enabled",
+  "text"
+)};
+`, f = v.forwardRef((o, m) => {
+  const {
+    size: g = "small",
+    color: n = "primary",
+    className: h = "",
+    style: r = {},
+    children: b
+  } = o, u = E();
+  return /* @__PURE__ */ a(
+    J,
+    {
+      theme: u,
+      size: g,
+      className: "lnc-ui-label " + h,
+      style: r,
+      color: n,
+      ref: m,
+      children: b
+    }
+  );
+});
+f.defaultProps = {
+  style: {},
+  size: "small",
+  color: "primary"
+};
+f.propTypes = {
+  className: e.string,
+  style: e.object,
+  size: e.oneOf(["small", "medium", "large"]),
+  color: e.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+const P = p.div`
+  display: flex;
+  justify-content: space-between;
+`, K = p.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  box-shadow: ${(o) => U(
+  o.theme,
+  "Popover",
+  o.color,
+  "enabled",
+  "boxShadow"
+)};
+  border-radius: ${(o) => q(o.theme, o.borderRadius)};
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
+  padding: 12px;
+  background-color: ${(o) => B(o.theme, "Popover", "default", "enabled", "bg")};
+`, N = v.forwardRef((o, m) => {
+  const {
+    __TYPE__: g = "DETAILS_VIEW",
+    goToPreviousView: n,
+    id: h,
+    data: r = {},
+    fields: b = {},
+    flexGridProps: u,
+    goBackText: _ = "Go back",
+    showBack: C = !0,
+    showNext: G = !0,
+    showPrevious: V = !0,
+    showEdit: y = !0,
+    disableGoBack: F = !1,
+    disableNext: R = !1,
+    disablePrevious: S = !1,
+    disableEdit: x = !1,
+    editOnTop: T = !1,
+    //------------------
+    goToNext: j = () => {
+    },
+    goToPrevious: z = () => {
+    },
+    onEdit: w = () => {
+    },
+    goBack: I = () => {
+    },
+    //------------------
+    className: M = "",
+    style: Q = {},
+    color: i = "primary",
+    size: s = "small",
+    children: O,
+    ...$
+  } = o, D = E(), L = (l, d) => {
+    n && n(), I(l, d);
+  };
+  return /* @__PURE__ */ t(
+    K,
+    {
+      ref: m,
+      theme: D,
+      color: i,
+      borderRadius: "regular",
+      ...$,
+      children: [
+        /* @__PURE__ */ t(P, { children: [
+          C && /* @__PURE__ */ a(
+            H,
+            {
+              leadingIcon: "arrow-circle-left",
+              text: _,
+              btnType: "outline",
+              style: { width: "fit-content" },
+              onClick: (l) => L(l, r),
+              disabled: F,
+              color: i,
+              size: s
+            },
+            0
+          ),
+          y && T && /* @__PURE__ */ a(
+            c,
+            {
+              btnType: "outline",
+              icon: "pen",
+              disabled: x,
+              onClick: (l) => w(r, l),
+              color: i,
+              size: s
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a(k, { children: O || /* @__PURE__ */ a(W, { spacing: 10, ...u, children: b.map((l, d) => /* @__PURE__ */ t(A, { ...l, children: [
+          /* @__PURE__ */ t(f, { color: i, size: s, children: [
+            l.label,
+            ":"
+          ] }, d),
+          r[l.accessor]
+        ] }, d)) }) }),
+        /* @__PURE__ */ t(P, { children: [
+          /* @__PURE__ */ t("div", { children: [
+            G && /* @__PURE__ */ t(k, { children: [
+              /* @__PURE__ */ a(
+                c,
+                {
+                  btnType: "outline",
+                  icon: "angle-left",
+                  disabled: S,
+                  onClick: (l) => z(r, l),
+                  color: i,
+                  size: s
+                }
+              ),
+              "  "
+            ] }),
+            V && /* @__PURE__ */ a(
+              c,
+              {
+                btnType: "outline",
+                icon: "angle-right",
+                disabled: R,
+                onClick: (l) => j(r, l),
+                color: i,
+                size: s
+              }
+            )
+          ] }),
+          y && !T && /* @__PURE__ */ a(
+            c,
+            {
+              btnType: "outline",
+              icon: "pen",
+              disabled: x,
+              onClick: (l) => w(r, l),
+              color: i,
+              size: s
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+N.propTypes = {
+  __TYPE__: e.string,
+  goBackText: e.string,
+  fields: e.array,
+  data: e.object,
+  showBack: e.bool,
+  showNext: e.bool,
+  showPrevious: e.bool,
+  showEdit: e.bool,
+  disableGoBack: e.bool,
+  disableNext: e.bool,
+  disablePrevious: e.bool,
+  disableEdit: e.bool,
+  flexGridProps: e.any,
+  editOnTop: e.bool,
+  //-----------------------------------------------------------
+  goToNext: e.func,
+  goToPrevious: e.func,
+  onEdit: e.func,
+  goBack: e.func,
+  //------------------------------------------------------------
+  className: e.string,
+  style: e.object,
+  color: e.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "information",
+    "neutral",
+    "gray"
+  ]),
+  size: e.oneOf(["small", "medium", "large"])
+};
+N.displayName = "DETAILS_VIEW";
+export {
+  N as default
+};

package/dist/DoubleRangeSlider.cjs

@@ -0,0 +1,114 @@
+"use strict";const t=require("react/jsx-runtime"),i=require("react"),v=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),s=require("./index-DXnSjbfJ.cjs"),o=require("./utils-hdRGTsQ7.cjs"),S=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),C=({theme:e,size:y})=>{var u=o.getSizeValueWithUnits(e,y);return`
+    min-height: ${u};
+    max-height: ${u};
+  `},b={small:"0.875rem",medium:"1.125rem",large:"1.375rem"},N=v.newStyled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  ${e=>C(e)};
+
+  /* Removing the default appearance */
+  & > :is(.thumb, .thumb::-webkit-slider-thumb) {
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  & > .thumb {
+    pointer-events: none;
+    position: absolute;
+    height: 0;
+    width: 100%;
+    outline: none;
+  }
+
+  & > .thumb--left {
+    z-index: 3;
+  }
+
+  & > .thumb--right {
+    z-index: 4;
+  }
+
+  /* For Chrome browsers */
+  & > .thumb::-webkit-slider-thumb {
+    -webkit-appearance: none; /* Override default look */
+    appearance: none;
+    width: ${e=>b[e.size]}; /* Set a specific slider handle width */
+    height: ${e=>b[e.size]}; /* Slider handle height */
+    border-radius: 50%;
+    background-color: ${e=>o.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
+    cursor: pointer; /* Cursor on hover */
+    border: none;
+    pointer-events: all;
+  }
+
+  /* For Firefox browsers */
+  & > .thumb::-moz-range-thumb {
+    width: ${e=>b[e.size]}; /* Set a specific slider handle width */
+    height: ${e=>b[e.size]}; /* Slider handle height */
+    border-radius: 50%;
+    background-color: ${e=>o.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
+    cursor: pointer; /* Cursor on hover */
+    border: none;
+    pointer-events: all;
+  }
+`,T=v.newStyled.div`
+  position: relative;
+  width: 100%;
+  height: 0.25rem;
+  &
+    > :is(.slider__track, .slider__range, .slider__left-value, .slider__right-value) {
+    position: absolute;
+  }
+
+  & > :is(.slider__track, .slider__range) {
+    height: 0.25rem;
+  }
+
+  & > .slider__track {
+    background-color: ${e=>o.getColorRgbaValue(e.theme,"Range",e.color,"enabled","unfilled")};
+    width: 100%;
+    z-index: 1;
+    border-radius: ${e=>o.getBorderRadiusValueWithUnits(e.theme,"regular")};
+  }
+
+  & > .slider__range {
+    border-radius: ${e=>o.getBorderRadiusValueWithUnits(e.theme,"regular")};
+    background-color: ${e=>o.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
+    z-index: 2;
+  }
+`,R=v.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  left: ${e=>`calc(${e.inputValue+"%"} + (${8-e.inputValue*.15}px))`};
+  top: ${e=>"calc(-"+b[e.size]+")"};
+  transform: translateX(-50%);
+  ${e=>o.getComponentTypographyCss(e.theme,"Range",e.size,"enabled")};
+  & > .text-content {
+    color: white;
+    background-color: ${e=>o.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
+    border-radius: 3px;
+    z-index: 2;
+    padding: 2px 6px;
+  }
+  & > .arrow {
+    & > .outer {
+      height: 4px;
+      position: relative;
+      & > .inner {
+        width: 8px;
+        height: 8px;
+        background-color: ${e=>o.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
+        transform: rotate(45deg);
+        position: absolute;
+        top: -6px;
+        left: -4px;
+        z-index: 1;
+        border-radius: 1px;
+      }
+    }
+  }
+`,j=i.forwardRef((e,y)=>{const{minValue:u=null,maxValue:f=null,min:h=0,max:m=100,disabled:g=!1,onChange:w=()=>{},color:V="primary",size:P="small",...z}=e,x={theme:S.useTheme(),size:P,color:V},[_,p]=i.useState(),[r,$]=i.useState(u),[n,k]=i.useState(f);i.useEffect(()=>{$(u),k(f)},[u,f]);const c=i.useRef(null),l=i.useCallback(a=>Math.round((a-h)/(m-h)*100),[h,m]);return i.useEffect(()=>{const a=l(r),d=l(n);c.current&&(c.current.style.left=`${a}%`,c.current.style.width=`${d-a}%`)},[r,l]),i.useEffect(()=>{const a=l(r),d=l(n);c.current&&(c.current.style.width=`${d-a}%`)},[n,l]),i.useEffect(()=>{w({min:r,max:n})},[r,n,w]),t.jsxs(N,{disabled:g,...x,...z,children:[_&&r&&t.jsx(t.Fragment,{children:t.jsxs(R,{...x,inputValue:l(r),disabled:g,children:[t.jsx("div",{className:"text-content",children:r}),t.jsx("div",{className:"arrow",children:t.jsx("div",{className:"outer",children:t.jsx("div",{className:"inner"})})})]})}),_&&n&&t.jsx(t.Fragment,{children:t.jsxs(R,{...x,inputValue:l(n),disabled:g,children:[t.jsx("div",{className:"text-content",children:n}),t.jsx("div",{className:"arrow",children:t.jsx("div",{className:"outer",children:t.jsx("div",{className:"inner"})})})]})}),t.jsx("input",{type:"range",min:h,max:m,value:r|"",onChange:a=>{const d=Math.min(Number(a.target.value),n-1);$(d)},className:"thumb thumb--left",style:{zIndex:r>m-100&&"5"},onMouseEnter:()=>{p(!0)},onMouseLeave:()=>{p(!1)}}),t.jsx("input",{type:"range",min:h,max:m,value:n|"",onChange:a=>{const d=Math.max(Number(a.target.value),r+1);k(d)},className:"thumb thumb--right",onMouseEnter:()=>{p(!0)},onMouseLeave:()=>{p(!1)}}),t.jsxs(T,{...x,disabled:g,children:[t.jsx("div",{className:"slider__track"}),t.jsx("div",{ref:c,className:"slider__range"})]})]})});j.propTypes={minValue:s.PropTypes.number,maxValue:s.PropTypes.number,min:s.PropTypes.number,max:s.PropTypes.number,disabled:s.PropTypes.bool,onChange:s.PropTypes.func,className:s.PropTypes.string,style:s.PropTypes.object,size:s.PropTypes.oneOf(["small","medium","large"]),color:s.PropTypes.oneOf(["primary","secondary","success","danger","warning","disabled","information","neutral","gray"])};module.exports=j;

package/dist/DoubleRangeSlider.js

@@ -0,0 +1,289 @@
+import { jsxs as p, jsx as r, Fragment as R } from "react/jsx-runtime";
+import F, { useState as w, useEffect as x, useRef as T, useCallback as j } from "react";
+import { n as $ } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { P as i } from "./index-Ds9PUTwb.js";
+import { b as u, c as V, a as E, f as O } from "./utils-DEke8iwo.js";
+import { u as D } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const L = ({ theme: e, size: k }) => {
+  var s = O(e, k);
+  return `
+    min-height: ${s};
+    max-height: ${s};
+  `;
+}, h = {
+  small: "0.875rem",
+  medium: "1.125rem",
+  large: "1.375rem"
+}, U = $.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  ${(e) => L(e)};
+
+  /* Removing the default appearance */
+  & > :is(.thumb, .thumb::-webkit-slider-thumb) {
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  & > .thumb {
+    pointer-events: none;
+    position: absolute;
+    height: 0;
+    width: 100%;
+    outline: none;
+  }
+
+  & > .thumb--left {
+    z-index: 3;
+  }
+
+  & > .thumb--right {
+    z-index: 4;
+  }
+
+  /* For Chrome browsers */
+  & > .thumb::-webkit-slider-thumb {
+    -webkit-appearance: none; /* Override default look */
+    appearance: none;
+    width: ${(e) => h[e.size]}; /* Set a specific slider handle width */
+    height: ${(e) => h[e.size]}; /* Slider handle height */
+    border-radius: 50%;
+    background-color: ${(e) => u(
+  e.theme,
+  "Range",
+  e.color,
+  e.disabled === !0 ? "disabled" : "enabled",
+  "background"
+)};
+    cursor: pointer; /* Cursor on hover */
+    border: none;
+    pointer-events: all;
+  }
+
+  /* For Firefox browsers */
+  & > .thumb::-moz-range-thumb {
+    width: ${(e) => h[e.size]}; /* Set a specific slider handle width */
+    height: ${(e) => h[e.size]}; /* Slider handle height */
+    border-radius: 50%;
+    background-color: ${(e) => u(
+  e.theme,
+  "Range",
+  e.color,
+  e.disabled === !0 ? "disabled" : "enabled",
+  "background"
+)};
+    cursor: pointer; /* Cursor on hover */
+    border: none;
+    pointer-events: all;
+  }
+`, W = $.div`
+  position: relative;
+  width: 100%;
+  height: 0.25rem;
+  &
+    > :is(.slider__track, .slider__range, .slider__left-value, .slider__right-value) {
+    position: absolute;
+  }
+
+  & > :is(.slider__track, .slider__range) {
+    height: 0.25rem;
+  }
+
+  & > .slider__track {
+    background-color: ${(e) => u(
+  e.theme,
+  "Range",
+  e.color,
+  "enabled",
+  "unfilled"
+)};
+    width: 100%;
+    z-index: 1;
+    border-radius: ${(e) => V(e.theme, "regular")};
+  }
+
+  & > .slider__range {
+    border-radius: ${(e) => V(e.theme, "regular")};
+    background-color: ${(e) => u(
+  e.theme,
+  "Range",
+  e.color,
+  e.disabled === !0 ? "disabled" : "enabled",
+  "background"
+)};
+    z-index: 2;
+  }
+`, S = $.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  left: ${(e) => `calc(${e.inputValue + "%"} + (${8 - e.inputValue * 0.15}px))`};
+  top: ${(e) => "calc(-" + h[e.size] + ")"};
+  transform: translateX(-50%);
+  ${(e) => E(e.theme, "Range", e.size, "enabled")};
+  & > .text-content {
+    color: white;
+    background-color: ${(e) => u(
+  e.theme,
+  "Range",
+  e.color,
+  e.disabled === !0 ? "disabled" : "enabled",
+  "background"
+)};
+    border-radius: 3px;
+    z-index: 2;
+    padding: 2px 6px;
+  }
+  & > .arrow {
+    & > .outer {
+      height: 4px;
+      position: relative;
+      & > .inner {
+        width: 8px;
+        height: 8px;
+        background-color: ${(e) => u(
+  e.theme,
+  "Range",
+  e.color,
+  e.disabled === !0 ? "disabled" : "enabled",
+  "background"
+)};
+        transform: rotate(45deg);
+        position: absolute;
+        top: -6px;
+        left: -4px;
+        z-index: 1;
+        border-radius: 1px;
+      }
+    }
+  }
+`, B = F.forwardRef((e, k) => {
+  const {
+    minValue: s = null,
+    maxValue: v = null,
+    min: c = 0,
+    max: m = 100,
+    disabled: b = !1,
+    onChange: _ = () => {
+    },
+    color: C = "primary",
+    size: P = "small",
+    ...M
+  } = e, g = { theme: D(), size: P, color: C }, [y, f] = w(), [t, z] = w(s), [a, N] = w(v);
+  x(() => {
+    z(s), N(v);
+  }, [s, v]);
+  const d = T(null), l = j(
+    (n) => Math.round((n - c) / (m - c) * 100),
+    [c, m]
+  );
+  return x(() => {
+    const n = l(t), o = l(a);
+    d.current && (d.current.style.left = `${n}%`, d.current.style.width = `${o - n}%`);
+  }, [t, l]), x(() => {
+    const n = l(t), o = l(a);
+    d.current && (d.current.style.width = `${o - n}%`);
+  }, [a, l]), x(() => {
+    _({ min: t, max: a });
+  }, [t, a, _]), /* @__PURE__ */ p(U, { disabled: b, ...g, ...M, children: [
+    y && t && /* @__PURE__ */ r(R, { children: /* @__PURE__ */ p(
+      S,
+      {
+        ...g,
+        inputValue: l(t),
+        disabled: b,
+        children: [
+          /* @__PURE__ */ r("div", { className: "text-content", children: t }),
+          /* @__PURE__ */ r("div", { className: "arrow", children: /* @__PURE__ */ r("div", { className: "outer", children: /* @__PURE__ */ r("div", { className: "inner" }) }) })
+        ]
+      }
+    ) }),
+    y && a && /* @__PURE__ */ r(R, { children: /* @__PURE__ */ p(
+      S,
+      {
+        ...g,
+        inputValue: l(a),
+        disabled: b,
+        children: [
+          /* @__PURE__ */ r("div", { className: "text-content", children: a }),
+          /* @__PURE__ */ r("div", { className: "arrow", children: /* @__PURE__ */ r("div", { className: "outer", children: /* @__PURE__ */ r("div", { className: "inner" }) }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ r(
+      "input",
+      {
+        type: "range",
+        min: c,
+        max: m,
+        value: t | "",
+        onChange: (n) => {
+          const o = Math.min(Number(n.target.value), a - 1);
+          z(o);
+        },
+        className: "thumb thumb--left",
+        style: { zIndex: t > m - 100 && "5" },
+        onMouseEnter: () => {
+          f(!0);
+        },
+        onMouseLeave: () => {
+          f(!1);
+        }
+      }
+    ),
+    /* @__PURE__ */ r(
+      "input",
+      {
+        type: "range",
+        min: c,
+        max: m,
+        value: a | "",
+        onChange: (n) => {
+          const o = Math.max(Number(n.target.value), t + 1);
+          N(o);
+        },
+        className: "thumb thumb--right",
+        onMouseEnter: () => {
+          f(!0);
+        },
+        onMouseLeave: () => {
+          f(!1);
+        }
+      }
+    ),
+    /* @__PURE__ */ p(W, { ...g, disabled: b, children: [
+      /* @__PURE__ */ r("div", { className: "slider__track" }),
+      /* @__PURE__ */ r("div", { ref: d, className: "slider__range" })
+    ] })
+  ] });
+});
+B.propTypes = {
+  minValue: i.number,
+  maxValue: i.number,
+  min: i.number,
+  max: i.number,
+  disabled: i.bool,
+  //-----------------------------
+  onChange: i.func,
+  //-------------------------
+  className: i.string,
+  style: i.object,
+  size: i.oneOf(["small", "medium", "large"]),
+  color: i.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "disabled",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+export {
+  B as default
+};