@lidofinance/lido-ui 3.0.2 → 3.2.0

package/dist/cjs/input/OptionsSlider.js

@@ -16,23 +16,29 @@ const OptionsSlider = (param)=>{
         sliderIndex = 0;
     }
     const max = options.length - 1;
-    const firstOption = options[0];
-    const lastOption = options[max];
     const getLabel = (optionIndex)=>{
         return options[optionIndex].label;
     };
     const handleSliderChange = (e)=>{
         const optionIndex = Number(e.target.value);
-        onChange(e, options[optionIndex].value, optionIndex);
+        onChange(options[optionIndex].value, optionIndex);
     };
+    const labels = options.map((param, index)=>{
+        let { label  } = param;
+        return {
+            value: index,
+            label
+        };
+    });
     return /*#__PURE__*/ _react.default.createElement(_sliderInput.default, {
         min: 0,
         max: max,
         value: sliderIndex,
         onChange: handleSliderChange,
-        minLabel: firstOption.label,
-        maxLabel: lastOption.label,
-        getLabel: getLabel
+        getLabel: getLabel,
+        labels: labels,
+        borderNone: true,
+        onLabelClick: (optionIndex)=>onChange(options[optionIndex].value, optionIndex)
     });
 };
 const _default = OptionsSlider;

package/dist/cjs/input/OptionsSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../packages/input/OptionsSlider.tsx"],"sourcesContent":["import React from 'react'\nimport SliderInput from './SliderInput'\nimport { OptionsSliderInputProps } from './types'\n\nconst OptionsSlider = ({\n  options,\n  value,\n  onChange,\n}: OptionsSliderInputProps): React.ReactElement => {\n  let sliderIndex = options.findIndex((option) => option.value === value)\n\n  if (sliderIndex === -1) {\n    sliderIndex = 0\n  }\n\n  const max = options.length - 1\n\n  const firstOption = options[0]\n  const lastOption = options[max]\n\n  const getLabel = (optionIndex: number) => {\n    return options[optionIndex].label\n  }\n\n  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const optionIndex = Number(e.target.value)\n    onChange(e, options[optionIndex].value, optionIndex)\n  }\n  return (\n    <SliderInput\n      min={0}\n      max={max}\n      value={sliderIndex}\n      onChange={handleSliderChange}\n      minLabel={firstOption.label}\n      maxLabel={lastOption.label}\n      getLabel={getLabel}\n    />\n  )\n}\n\nexport default OptionsSlider\n"],"names":["OptionsSlider","options","value","onChange","sliderIndex","findIndex","option","max","length","firstOption","lastOption","getLabel","optionIndex","label","handleSliderChange","e","Number","target","SliderInput","min","minLabel","maxLabel"],"mappings":"AAAA;;;;+BAyCA,SAA4B;;aAA5B,QAA4B;;;4DAzCV,OAAO;kEACD,eAAe;AAGvC,MAAMA,aAAa,GAAG,SAI6B;QAJ5B,EACrBC,OAAO,CAAA,EACPC,KAAK,CAAA,EACLC,QAAQ,CAAA,EACgB;IACxB,IAAIC,WAAW,GAAGH,OAAO,CAACI,SAAS,CAAC,CAACC,MAAM,GAAKA,MAAM,CAACJ,KAAK,KAAKA,KAAK,CAAC;IAEvE,IAAIE,WAAW,KAAK,CAAC,CAAC,EAAE;QACtBA,WAAW,GAAG,CAAC;IACjB,CAAC;IAED,MAAMG,GAAG,GAAGN,OAAO,CAACO,MAAM,GAAG,CAAC;IAE9B,MAAMC,WAAW,GAAGR,OAAO,CAAC,CAAC,CAAC;IAC9B,MAAMS,UAAU,GAAGT,OAAO,CAACM,GAAG,CAAC;IAE/B,MAAMI,QAAQ,GAAG,CAACC,WAAmB,GAAK;QACxC,OAAOX,OAAO,CAACW,WAAW,CAAC,CAACC,KAAK,CAAA;IACnC,CAAC;IAED,MAAMC,kBAAkB,GAAG,CAACC,CAAsC,GAAK;QACrE,MAAMH,WAAW,GAAGI,MAAM,CAACD,CAAC,CAACE,MAAM,CAACf,KAAK,CAAC;QAC1CC,QAAQ,CAACY,CAAC,EAAEd,OAAO,CAACW,WAAW,CAAC,CAACV,KAAK,EAAEU,WAAW,CAAC;IACtD,CAAC;IACD,qBACE,6BAACM,YAAW,QAAA;QACVC,GAAG,EAAE,CAAC;QACNZ,GAAG,EAAEA,GAAG;QACRL,KAAK,EAAEE,WAAW;QAClBD,QAAQ,EAAEW,kBAAkB;QAC5BM,QAAQ,EAAEX,WAAW,CAACI,KAAK;QAC3BQ,QAAQ,EAAEX,UAAU,CAACG,KAAK;QAC1BF,QAAQ,EAAEA,QAAQ;MAClB,CACH;AACH,CAAC;MAED,QAA4B,GAAbX,aAAa"}
+{"version":3,"sources":["../../../packages/input/OptionsSlider.tsx"],"sourcesContent":["import React from 'react'\nimport SliderInput from './SliderInput'\nimport { OptionsSliderInputProps } from './types'\n\nconst OptionsSlider = ({\n  options,\n  value,\n  onChange,\n}: OptionsSliderInputProps): React.ReactElement => {\n  let sliderIndex = options.findIndex((option) => option.value === value)\n\n  if (sliderIndex === -1) {\n    sliderIndex = 0\n  }\n\n  const max = options.length - 1\n\n  const getLabel = (optionIndex: number) => {\n    return options[optionIndex].label\n  }\n\n  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const optionIndex = Number(e.target.value)\n    onChange(options[optionIndex].value, optionIndex)\n  }\n\n  const labels = options.map(({ label }, index) => ({ value: index, label }))\n  return (\n    <SliderInput\n      min={0}\n      max={max}\n      value={sliderIndex}\n      onChange={handleSliderChange}\n      getLabel={getLabel}\n      labels={labels}\n      borderNone={true}\n      onLabelClick={(optionIndex) =>\n        onChange(options[optionIndex].value, optionIndex)\n      }\n    />\n  )\n}\n\nexport default OptionsSlider\n"],"names":["OptionsSlider","options","value","onChange","sliderIndex","findIndex","option","max","length","getLabel","optionIndex","label","handleSliderChange","e","Number","target","labels","map","index","SliderInput","min","borderNone","onLabelClick"],"mappings":"AAAA;;;;+BA2CA,SAA4B;;aAA5B,QAA4B;;;4DA3CV,OAAO;kEACD,eAAe;AAGvC,MAAMA,aAAa,GAAG,SAI6B;QAJ5B,EACrBC,OAAO,CAAA,EACPC,KAAK,CAAA,EACLC,QAAQ,CAAA,EACgB;IACxB,IAAIC,WAAW,GAAGH,OAAO,CAACI,SAAS,CAAC,CAACC,MAAM,GAAKA,MAAM,CAACJ,KAAK,KAAKA,KAAK,CAAC;IAEvE,IAAIE,WAAW,KAAK,CAAC,CAAC,EAAE;QACtBA,WAAW,GAAG,CAAC;IACjB,CAAC;IAED,MAAMG,GAAG,GAAGN,OAAO,CAACO,MAAM,GAAG,CAAC;IAE9B,MAAMC,QAAQ,GAAG,CAACC,WAAmB,GAAK;QACxC,OAAOT,OAAO,CAACS,WAAW,CAAC,CAACC,KAAK,CAAA;IACnC,CAAC;IAED,MAAMC,kBAAkB,GAAG,CAACC,CAAsC,GAAK;QACrE,MAAMH,WAAW,GAAGI,MAAM,CAACD,CAAC,CAACE,MAAM,CAACb,KAAK,CAAC;QAC1CC,QAAQ,CAACF,OAAO,CAACS,WAAW,CAAC,CAACR,KAAK,EAAEQ,WAAW,CAAC;IACnD,CAAC;IAED,MAAMM,MAAM,GAAGf,OAAO,CAACgB,GAAG,CAAC,QAAYC,KAAK,GAAK;YAArB,EAAEP,KAAK,CAAA,EAAE;eAAa;YAAET,KAAK,EAAEgB,KAAK;YAAEP,KAAK;SAAE;IAAA,CAAC,CAAC;IAC3E,qBACE,6BAACQ,YAAW,QAAA;QACVC,GAAG,EAAE,CAAC;QACNb,GAAG,EAAEA,GAAG;QACRL,KAAK,EAAEE,WAAW;QAClBD,QAAQ,EAAES,kBAAkB;QAC5BH,QAAQ,EAAEA,QAAQ;QAClBO,MAAM,EAAEA,MAAM;QACdK,UAAU,EAAE,IAAI;QAChBC,YAAY,EAAE,CAACZ,WAAW,GACxBP,QAAQ,CAACF,OAAO,CAACS,WAAW,CAAC,CAACR,KAAK,EAAEQ,WAAW,CAAC;MAEnD,CACH;AACH,CAAC;MAED,QAA4B,GAAbV,aAAa"}

package/dist/cjs/input/SliderInput.js

@@ -10,17 +10,36 @@ const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_defaul
 const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
 const _sliderInputStyles = require("./SliderInputStyles");
 function SliderInput(param) {
-    let { value , onChange , min =0 , max =100 , step =1 , minLabel , maxLabel , getLabel =(val)=>String(val)  } = param;
+    let { value , onChange , onLabelClick , min =0 , max =100 , step =1 , minLabel , maxLabel , getLabel =(val)=>String(val) , borderNone , labels  } = param;
     const fillPercentage = (value - min) / (max - min) * 100;
-    return /*#__PURE__*/ _react.default.createElement(_sliderInputStyles.SliderWrapper, null, /*#__PURE__*/ _react.default.createElement(_sliderInputStyles.Slider, null, getLabel(value), /*#__PURE__*/ _react.default.createElement(_sliderInputStyles.Track, {
-        fillPercentage: fillPercentage
+    const LabelComponent = onLabelClick ? _sliderInputStyles.LabelButton : _sliderInputStyles.Label;
+    const createClickHandler = (value)=>{
+        return ()=>{
+            return onLabelClick === null || onLabelClick === void 0 ? void 0 : onLabelClick(value);
+        };
+    };
+    return /*#__PURE__*/ _react.default.createElement(_sliderInputStyles.SliderWrapper, null, /*#__PURE__*/ _react.default.createElement(_sliderInputStyles.Slider, {
+        borderNone: borderNone
+    }, getLabel(value), /*#__PURE__*/ _react.default.createElement(_sliderInputStyles.Track, {
+        fillPercentage: fillPercentage,
+        borderNone: borderNone
     })), /*#__PURE__*/ _react.default.createElement(_sliderInputStyles.RangeInputSlider, {
         value: value,
         step: step,
         onChange: onChange,
         min: min,
         max: max
-    }), /*#__PURE__*/ _react.default.createElement(_sliderInputStyles.LabelContainer, null, /*#__PURE__*/ _react.default.createElement(_sliderInputStyles.Label, null, minLabel), /*#__PURE__*/ _react.default.createElement(_sliderInputStyles.Label, null, maxLabel)));
+    }), /*#__PURE__*/ _react.default.createElement(_sliderInputStyles.LabelContainer, null, minLabel && /*#__PURE__*/ _react.default.createElement(LabelComponent, {
+        onClick: createClickHandler(min)
+    }, minLabel), labels === null || labels === void 0 ? void 0 : labels.map((param)=>/*#__PURE__*/ {
+        let { value , label  } = param;
+        return _react.default.createElement(LabelComponent, {
+            onClick: createClickHandler(value),
+            key: value
+        }, label);
+    }), maxLabel && /*#__PURE__*/ _react.default.createElement(LabelComponent, {
+        onClick: createClickHandler(max)
+    }, maxLabel)));
 }
 const _default = SliderInput;
 

package/dist/cjs/input/SliderInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../packages/input/SliderInput.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  Label,\n  LabelContainer,\n  RangeInputSlider,\n  Slider,\n  SliderWrapper,\n  Track,\n} from './SliderInputStyles'\nimport { SliderInputProps } from './types'\n\nfunction SliderInput({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  minLabel,\n  maxLabel,\n  getLabel = (val) => String(val),\n}: SliderInputProps): React.ReactElement {\n  const fillPercentage = ((value - min) / (max - min)) * 100\n  return (\n    <SliderWrapper>\n      <Slider>\n        {getLabel(value)}\n        <Track fillPercentage={fillPercentage} />\n      </Slider>\n      <RangeInputSlider\n        value={value}\n        step={step}\n        onChange={onChange}\n        min={min}\n        max={max}\n      />\n      <LabelContainer>\n        <Label>{minLabel}</Label>\n        <Label>{maxLabel}</Label>\n      </LabelContainer>\n    </SliderWrapper>\n  )\n}\n\nexport default SliderInput\n"],"names":["SliderInput","value","onChange","min","max","step","minLabel","maxLabel","getLabel","val","String","fillPercentage","SliderWrapper","Slider","Track","RangeInputSlider","LabelContainer","Label"],"mappings":"AAAA;;;;+BA2CA,SAA0B;;aAA1B,QAA0B;;;4DA3CR,OAAO;mCAQlB,qBAAqB;AAG5B,SAASA,WAAW,CAAC,KASF,EAAsB;QATpB,EACnBC,KAAK,CAAA,EACLC,QAAQ,CAAA,EACRC,GAAG,EAAG,CAAC,CAAA,EACPC,GAAG,EAAG,GAAG,CAAA,EACTC,IAAI,EAAG,CAAC,CAAA,EACRC,QAAQ,CAAA,EACRC,QAAQ,CAAA,EACRC,QAAQ,EAAG,CAACC,GAAG,GAAKC,MAAM,CAACD,GAAG,CAAC,CAAA,EACd,GATE,KASF;IACjB,MAAME,cAAc,GAAG,AAAC,CAACV,KAAK,GAAGE,GAAG,CAAC,GAAG,CAACC,GAAG,GAAGD,GAAG,CAAC,GAAI,GAAG;IAC1D,qBACE,6BAACS,kBAAa,cAAA,sBACZ,6BAACC,kBAAM,OAAA,QACJL,QAAQ,CAACP,KAAK,CAAC,gBAChB,6BAACa,kBAAK,MAAA;QAACH,cAAc,EAAEA,cAAc;MAAI,CAClC,gBACT,6BAACI,kBAAgB,iBAAA;QACfd,KAAK,EAAEA,KAAK;QACZI,IAAI,EAAEA,IAAI;QACVH,QAAQ,EAAEA,QAAQ;QAClBC,GAAG,EAAEA,GAAG;QACRC,GAAG,EAAEA,GAAG;MACR,gBACF,6BAACY,kBAAc,eAAA,sBACb,6BAACC,kBAAK,MAAA,QAAEX,QAAQ,CAAS,gBACzB,6BAACW,kBAAK,MAAA,QAAEV,QAAQ,CAAS,CACV,CACH,CACjB;AACH,CAAC;MAED,QAA0B,GAAXP,WAAW"}
+{"version":3,"sources":["../../../packages/input/SliderInput.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  Label,\n  LabelButton,\n  LabelContainer,\n  RangeInputSlider,\n  Slider,\n  SliderWrapper,\n  Track,\n} from './SliderInputStyles'\nimport { SliderInputProps } from './types'\n\nfunction SliderInput({\n  value,\n  onChange,\n  onLabelClick,\n  min = 0,\n  max = 100,\n  step = 1,\n  minLabel,\n  maxLabel,\n  getLabel = (val) => String(val),\n  borderNone,\n  labels,\n}: SliderInputProps): React.ReactElement {\n  const fillPercentage = ((value - min) / (max - min)) * 100\n  const LabelComponent = onLabelClick ? LabelButton : Label\n  const createClickHandler = (value: number) => () => onLabelClick?.(value)\n\n  return (\n    <SliderWrapper>\n      <Slider borderNone={borderNone}>\n        {getLabel(value)}\n        <Track fillPercentage={fillPercentage} borderNone={borderNone} />\n      </Slider>\n      <RangeInputSlider\n        value={value}\n        step={step}\n        onChange={onChange}\n        min={min}\n        max={max}\n      />\n      <LabelContainer>\n        {minLabel && (\n          <LabelComponent onClick={createClickHandler(min)}>\n            {minLabel}\n          </LabelComponent>\n        )}\n        {labels?.map(({ value, label }) => (\n          <LabelComponent onClick={createClickHandler(value)} key={value}>\n            {label}\n          </LabelComponent>\n        ))}\n        {maxLabel && (\n          <LabelComponent onClick={createClickHandler(max)}>\n            {maxLabel}\n          </LabelComponent>\n        )}\n      </LabelContainer>\n    </SliderWrapper>\n  )\n}\n\nexport default SliderInput\n"],"names":["SliderInput","value","onChange","onLabelClick","min","max","step","minLabel","maxLabel","getLabel","val","String","borderNone","labels","fillPercentage","LabelComponent","LabelButton","Label","createClickHandler","SliderWrapper","Slider","Track","RangeInputSlider","LabelContainer","onClick","map","label","key"],"mappings":"AAAA;;;;+BA+DA,SAA0B;;aAA1B,QAA0B;;;4DA/DR,OAAO;mCASlB,qBAAqB;AAG5B,SAASA,WAAW,CAAC,KAYF,EAAsB;QAZpB,EACnBC,KAAK,CAAA,EACLC,QAAQ,CAAA,EACRC,YAAY,CAAA,EACZC,GAAG,EAAG,CAAC,CAAA,EACPC,GAAG,EAAG,GAAG,CAAA,EACTC,IAAI,EAAG,CAAC,CAAA,EACRC,QAAQ,CAAA,EACRC,QAAQ,CAAA,EACRC,QAAQ,EAAG,CAACC,GAAG,GAAKC,MAAM,CAACD,GAAG,CAAC,CAAA,EAC/BE,UAAU,CAAA,EACVC,MAAM,CAAA,EACW,GAZE,KAYF;IACjB,MAAMC,cAAc,GAAG,AAAC,CAACb,KAAK,GAAGG,GAAG,CAAC,GAAG,CAACC,GAAG,GAAGD,GAAG,CAAC,GAAI,GAAG;IAC1D,MAAMW,cAAc,GAAGZ,YAAY,GAAGa,kBAAW,YAAA,GAAGC,kBAAK,MAAA;IACzD,MAAMC,kBAAkB,GAAG,CAACjB,KAAa;QAAK,OAAA;YAAME,OAAAA,YAAY,aAAZA,YAAY,WAAS,GAArBA,KAAAA,CAAqB,GAArBA,YAAY,CAAGF,KAAK,CAAC,CAAA;SAAA,CAAA;KAAA;IAEzE,qBACE,6BAACkB,kBAAa,cAAA,sBACZ,6BAACC,kBAAM,OAAA;QAACR,UAAU,EAAEA,UAAU;OAC3BH,QAAQ,CAACR,KAAK,CAAC,gBAChB,6BAACoB,kBAAK,MAAA;QAACP,cAAc,EAAEA,cAAc;QAAEF,UAAU,EAAEA,UAAU;MAAI,CAC1D,gBACT,6BAACU,kBAAgB,iBAAA;QACfrB,KAAK,EAAEA,KAAK;QACZK,IAAI,EAAEA,IAAI;QACVJ,QAAQ,EAAEA,QAAQ;QAClBE,GAAG,EAAEA,GAAG;QACRC,GAAG,EAAEA,GAAG;MACR,gBACF,6BAACkB,kBAAc,eAAA,QACZhB,QAAQ,kBACP,6BAACQ,cAAc;QAACS,OAAO,EAAEN,kBAAkB,CAACd,GAAG,CAAC;OAC7CG,QAAQ,CACM,AAClB,EACAM,MAAM,aAANA,MAAM,WAAK,GAAXA,KAAAA,CAAW,GAAXA,MAAM,CAAEY,GAAG,CAAC,uBACX;YADY,EAAExB,KAAK,CAAA,EAAEyB,KAAK,CAAA,EAAE;eAC5B,6BAACX,cAAc;YAACS,OAAO,EAAEN,kBAAkB,CAACjB,KAAK,CAAC;YAAE0B,GAAG,EAAE1B,KAAK;WAC3DyB,KAAK,CACS;IAAD,CACjB,CAAC,EACDlB,QAAQ,kBACP,6BAACO,cAAc;QAACS,OAAO,EAAEN,kBAAkB,CAACb,GAAG,CAAC;OAC7CG,QAAQ,CACM,AAClB,CACc,CACH,CACjB;AACH,CAAC;MAED,QAA0B,GAAXR,WAAW"}

package/dist/cjs/input/SliderInputStyles.js

@@ -14,7 +14,8 @@ _export(exports, {
     Slider: ()=>Slider,
     SliderWrapper: ()=>SliderWrapper,
     LabelContainer: ()=>LabelContainer,
-    Label: ()=>Label
+    Label: ()=>Label,
+    LabelButton: ()=>LabelButton
 });
 const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
 const _styledComponents = /*#__PURE__*/ _interopRequireDefault(require("styled-components"));
@@ -89,6 +90,10 @@ const Track = _styledComponents.default.div`
   right: 0;
   background: var(--lido-color-border);
 
+  ${(props)=>props.borderNone && `
+    background: none;
+    `};
+
   &:before {
     content: '';
     position: absolute;
@@ -111,6 +116,12 @@ const Slider = _styledComponents.default.div`
   border-left: 1px solid var(--lido-color-border);
   border-top: 1px solid var(--lido-color-border);
 
+  ${(props)=>props.borderNone && `
+    border-right: none;
+    border-left: none;
+    border-top: none;
+    `};
+
   border-radius: 10px;
   overflow: hidden;
 `;
@@ -130,5 +141,16 @@ const Label = _styledComponents.default.span`
   color: var(--lido-color-text);
   opacity: 0.5;
 `;
+const LabelButton = _styledComponents.default.button`
+  border: none;
+  background-color: transparent;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--lido-color-text);
+  opacity: 0.5;
+  cursor: pointer;
+`;
 
 //# sourceMappingURL=SliderInputStyles.js.map

package/dist/cjs/input/SliderInputStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../packages/input/SliderInputStyles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const RangeInputSlider = styled.input.attrs({ type: 'range' })`\n  width: 100%;\n  background-color: transparent;\n  -webkit-appearance: none;\n  position: absolute;\n  margin: 0;\n  top: 56px;\n  left: 0;\n  right: 0;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-webkit-slider-runnable-track {\n    background: transparent;\n    border: 0;\n    border-radius: 10px;\n    width: 100%;\n    height: 2px;\n    cursor: pointer;\n  }\n\n  &::-webkit-slider-thumb {\n    margin-top: -8px;\n    width: 18px;\n    height: 18px;\n    background: #ffffff;\n    box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 13px rgba(0, 0, 0, 0.12);\n    border: 0;\n    border-radius: 50px;\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n\n  &::-moz-range-track {\n    background: #00a3ff;\n    border: 0;\n    border-radius: 10px;\n    width: 100%;\n    height: 2px;\n    cursor: pointer;\n  }\n\n  &::-moz-range-thumb {\n    width: 18px;\n    height: 18px;\n    background: #ffffff;\n    border: 0;\n    border-radius: 50px;\n    cursor: pointer;\n  }\n\n  &::-ms-track {\n    background: transparent;\n    color: transparent;\n    width: 100%;\n    height: 2px;\n    cursor: pointer;\n  }\n`\n\nexport const Track = styled.div<{ fillPercentage: number }>`\n  height: 1px;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: var(--lido-color-border);\n\n  &:before {\n    content: '';\n    position: absolute;\n    display: block;\n    height: 2px;\n    bottom: 0;\n    left: 0;\n    background: var(--lido-color-primary);\n    width: ${(props) => props.fillPercentage || 0}%;\n  }\n`\n\nexport const Slider = styled.div`\n  position: relative;\n  height: 56px;\n  padding: 16px 20px;\n  box-sizing: border-box;\n\n  background: var(--lido-color-accentControlBg);\n  border-right: 1px solid var(--lido-color-border);\n  border-left: 1px solid var(--lido-color-border);\n  border-top: 1px solid var(--lido-color-border);\n\n  border-radius: 10px;\n  overflow: hidden;\n`\n\nexport const SliderWrapper = styled.div`\n  position: relative;\n`\n\nexport const LabelContainer = styled.div`\n  display: flex;\n  justify-content: space-between;\n  margin-top: 8px;\n`\n\nexport const Label = styled.span`\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 20px;\n  color: var(--lido-color-text);\n  opacity: 0.5;\n`\n"],"names":["RangeInputSlider","Track","Slider","SliderWrapper","LabelContainer","Label","styled","input","attrs","type","div","props","fillPercentage","span"],"mappings":"AAAA;;;;;;;;;;;IAEaA,gBAAgB,MAAhBA,gBAAgB;IA8DhBC,KAAK,MAALA,KAAK;IAoBLC,MAAM,MAANA,MAAM;IAeNC,aAAa,MAAbA,aAAa;IAIbC,cAAc,MAAdA,cAAc;IAMdC,KAAK,MAALA,KAAK;;;uEA7GC,mBAAmB;AAE/B,MAAML,gBAAgB,GAAGM,iBAAM,QAAA,CAACC,KAAK,CAACC,KAAK,CAAC;IAAEC,IAAI,EAAE,OAAO;CAAE,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DtE,CAAC;AAEM,MAAMR,KAAK,GAAGK,iBAAM,QAAA,CAACI,GAAG,AAA4B,CAAC;;;;;;;;;;;;;;;;WAgBjD,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,cAAc,IAAI,CAAC,CAAC;;AAElD,CAAC;AAEM,MAAMV,MAAM,GAAGI,iBAAM,QAAA,CAACI,GAAG,CAAC;;;;;;;;;;;;;AAajC,CAAC;AAEM,MAAMP,aAAa,GAAGG,iBAAM,QAAA,CAACI,GAAG,CAAC;;AAExC,CAAC;AAEM,MAAMN,cAAc,GAAGE,iBAAM,QAAA,CAACI,GAAG,CAAC;;;;AAIzC,CAAC;AAEM,MAAML,KAAK,GAAGC,iBAAM,QAAA,CAACO,IAAI,CAAC;;;;;;;AAOjC,CAAC"}
+{"version":3,"sources":["../../../packages/input/SliderInputStyles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const RangeInputSlider = styled.input.attrs({ type: 'range' })`\n  width: 100%;\n  background-color: transparent;\n  -webkit-appearance: none;\n  position: absolute;\n  margin: 0;\n  top: 56px;\n  left: 0;\n  right: 0;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-webkit-slider-runnable-track {\n    background: transparent;\n    border: 0;\n    border-radius: 10px;\n    width: 100%;\n    height: 2px;\n    cursor: pointer;\n  }\n\n  &::-webkit-slider-thumb {\n    margin-top: -8px;\n    width: 18px;\n    height: 18px;\n    background: #ffffff;\n    box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 13px rgba(0, 0, 0, 0.12);\n    border: 0;\n    border-radius: 50px;\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n\n  &::-moz-range-track {\n    background: #00a3ff;\n    border: 0;\n    border-radius: 10px;\n    width: 100%;\n    height: 2px;\n    cursor: pointer;\n  }\n\n  &::-moz-range-thumb {\n    width: 18px;\n    height: 18px;\n    background: #ffffff;\n    border: 0;\n    border-radius: 50px;\n    cursor: pointer;\n  }\n\n  &::-ms-track {\n    background: transparent;\n    color: transparent;\n    width: 100%;\n    height: 2px;\n    cursor: pointer;\n  }\n`\n\nexport const Track = styled.div<{\n  fillPercentage: number\n  borderNone?: boolean\n}>`\n  height: 1px;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: var(--lido-color-border);\n\n  ${(props) =>\n    props.borderNone &&\n    `\n    background: none;\n    `};\n\n  &:before {\n    content: '';\n    position: absolute;\n    display: block;\n    height: 2px;\n    bottom: 0;\n    left: 0;\n    background: var(--lido-color-primary);\n    width: ${(props) => props.fillPercentage || 0}%;\n  }\n`\n\nexport const Slider = styled.div<{\n  borderNone?: boolean\n}>`\n  position: relative;\n  height: 56px;\n  padding: 16px 20px;\n  box-sizing: border-box;\n\n  background: var(--lido-color-accentControlBg);\n  border-right: 1px solid var(--lido-color-border);\n  border-left: 1px solid var(--lido-color-border);\n  border-top: 1px solid var(--lido-color-border);\n\n  ${(props) =>\n    props.borderNone &&\n    `\n    border-right: none;\n    border-left: none;\n    border-top: none;\n    `};\n\n  border-radius: 10px;\n  overflow: hidden;\n`\n\nexport const SliderWrapper = styled.div`\n  position: relative;\n`\n\nexport const LabelContainer = styled.div`\n  display: flex;\n  justify-content: space-between;\n  margin-top: 8px;\n`\n\nexport const Label = styled.span`\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 20px;\n  color: var(--lido-color-text);\n  opacity: 0.5;\n`\n\nexport const LabelButton = styled.button`\n  border: none;\n  background-color: transparent;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 20px;\n  color: var(--lido-color-text);\n  opacity: 0.5;\n  cursor: pointer;\n`\n"],"names":["RangeInputSlider","Track","Slider","SliderWrapper","LabelContainer","Label","LabelButton","styled","input","attrs","type","div","props","borderNone","fillPercentage","span","button"],"mappings":"AAAA;;;;;;;;;;;IAEaA,gBAAgB,MAAhBA,gBAAgB;IA8DhBC,KAAK,MAALA,KAAK;IA6BLC,MAAM,MAANA,MAAM;IAyBNC,aAAa,MAAbA,aAAa;IAIbC,cAAc,MAAdA,cAAc;IAMdC,KAAK,MAALA,KAAK;IASLC,WAAW,MAAXA,WAAW;;;uEAzIL,mBAAmB;AAE/B,MAAMN,gBAAgB,GAAGO,iBAAM,QAAA,CAACC,KAAK,CAACC,KAAK,CAAC;IAAEC,IAAI,EAAE,OAAO;CAAE,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DtE,CAAC;AAEM,MAAMT,KAAK,GAAGM,iBAAM,QAAA,CAACI,GAAG,AAG7B,CAAC;;;;;;;;EAQD,EAAE,CAACC,KAAK,GACNA,KAAK,CAACC,UAAU,IAChB,CAAC;;IAED,CAAC,CAAC;;;;;;;;;;WAUK,EAAE,CAACD,KAAK,GAAKA,KAAK,CAACE,cAAc,IAAI,CAAC,CAAC;;AAElD,CAAC;AAEM,MAAMZ,MAAM,GAAGK,iBAAM,QAAA,CAACI,GAAG,AAE9B,CAAC;;;;;;;;;;;EAWD,EAAE,CAACC,KAAK,GACNA,KAAK,CAACC,UAAU,IAChB,CAAC;;;;IAID,CAAC,CAAC;;;;AAIN,CAAC;AAEM,MAAMV,aAAa,GAAGI,iBAAM,QAAA,CAACI,GAAG,CAAC;;AAExC,CAAC;AAEM,MAAMP,cAAc,GAAGG,iBAAM,QAAA,CAACI,GAAG,CAAC;;;;AAIzC,CAAC;AAEM,MAAMN,KAAK,GAAGE,iBAAM,QAAA,CAACQ,IAAI,CAAC;;;;;;;AAOjC,CAAC;AAEM,MAAMT,WAAW,GAAGC,iBAAM,QAAA,CAACS,MAAM,CAAC;;;;;;;;;;AAUzC,CAAC"}

package/dist/cjs/input/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../packages/input/types.ts"],"sourcesContent":["import { LidoComponentProps } from '@lidofinance/utils'\nimport React, { ChangeEventHandler } from 'react'\nexport type { Theme } from '@lidofinance/theme'\n\nexport enum InputMessageVariant {\n  error,\n  warning,\n  success,\n}\nexport type InputMessageVariants = keyof typeof InputMessageVariant\n\nexport enum InputType {\n  text,\n  password,\n  number,\n  email,\n  search,\n  tel,\n  url,\n}\nexport type InputTypes = keyof typeof InputType\n\nexport enum InputVariant {\n  small,\n  default,\n}\nexport type InputVariants = keyof typeof InputVariant\n\nexport enum InputColor {\n  default,\n  accent,\n}\nexport type InputColors = keyof typeof InputColor\n\ntype CommonProps = {\n  label?: React.ReactNode\n  error?: React.ReactNode | boolean\n  warning?: React.ReactNode | boolean\n  success?: React.ReactNode | boolean\n  variant?: InputVariants\n  color?: InputColors\n  active?: boolean\n  fullwidth?: boolean\n  wrapperRef?: React.RefObject<HTMLLabelElement>\n  as?: never\n}\n\nexport type InputProps = LidoComponentProps<\n  'input',\n  CommonProps & {\n    type?: InputTypes\n    leftDecorator?: React.ReactNode\n    rightDecorator?: React.ReactNode\n  }\n>\n\nexport type TextareaProps = LidoComponentProps<'textarea', CommonProps>\n\nexport type InputGroupProps = LidoComponentProps<\n  'span',\n  {\n    fullwidth?: boolean\n    error?: React.ReactNode\n    success?: React.ReactNode\n  }\n>\n\ntype SliderProps = {\n  value: number\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  min?: number\n  max?: number\n  minLabel?: React.ReactNode\n  maxLabel?: React.ReactNode\n  step?: number\n  getLabel?: (value: number) => React.ReactNode\n}\n\nexport type SliderInputProps = LidoComponentProps<'input', SliderProps>\n\ntype SliderOptionValue = string | number\n\ninterface SliderOption {\n  value: SliderOptionValue\n  label: React.ReactNode\n}\n\ninterface OptionsSliderProps {\n  options: [SliderOption, SliderOption, ...SliderOption[]] // this is declaration like T[] but with \"at least 2 elements\" constraint\n  value?: SliderOptionValue // if value is not provided, component should act isolated; initial value should be first option\n  onChange: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: SliderOptionValue,\n    valueIndex: number\n  ) => unknown\n}\n\nexport type OptionsSliderInputProps = LidoComponentProps<\n  'input',\n  OptionsSliderProps\n>\n"],"names":["InputMessageVariant","error","warning","success","InputType","text","password","number","email","search","tel","url","InputVariant","small","default","InputColor","accent"],"mappings":"AAAA;;;;;;;;;;;;;;;;;4DAC0C,OAAO;IAG1C,mBAIN;UAJWA,mBAAmB;IAAnBA,mBAAmB,CAAnBA,mBAAmB,CAC7BC,OAAK,IAALA,CAAK,IAALA,OAAK;IADKD,mBAAmB,CAAnBA,mBAAmB,CAE7BE,SAAO,IAAPA,CAAO,IAAPA,SAAO;IAFGF,mBAAmB,CAAnBA,mBAAmB,CAG7BG,SAAO,IAAPA,CAAO,IAAPA,SAAO;GAHGH,mBAAmB,KAAnBA,mBAAmB;IAOxB,SAQN;UARWI,SAAS;IAATA,SAAS,CAATA,SAAS,CACnBC,MAAI,IAAJA,CAAI,IAAJA,MAAI;IADMD,SAAS,CAATA,SAAS,CAEnBE,UAAQ,IAARA,CAAQ,IAARA,UAAQ;IAFEF,SAAS,CAATA,SAAS,CAGnBG,QAAM,IAANA,CAAM,IAANA,QAAM;IAHIH,SAAS,CAATA,SAAS,CAInBI,OAAK,IAALA,CAAK,IAALA,OAAK;IAJKJ,SAAS,CAATA,SAAS,CAKnBK,QAAM,IAANA,CAAM,IAANA,QAAM;IALIL,SAAS,CAATA,SAAS,CAMnBM,KAAG,IAAHA,CAAG,IAAHA,KAAG;IANON,SAAS,CAATA,SAAS,CAOnBO,KAAG,IAAHA,CAAG,IAAHA,KAAG;GAPOP,SAAS,KAATA,SAAS;IAWd,YAGN;UAHWQ,YAAY;IAAZA,YAAY,CAAZA,YAAY,CACtBC,OAAK,IAALA,CAAK,IAALA,OAAK;IADKD,YAAY,CAAZA,YAAY,CAEtBE,SAAO,IAAPA,CAAO,IAAPA,SAAO;GAFGF,YAAY,KAAZA,YAAY;IAMjB,UAGN;UAHWG,UAAU;IAAVA,UAAU,CAAVA,UAAU,CACpBD,SAAO,IAAPA,CAAO,IAAPA,SAAO;IADGC,UAAU,CAAVA,UAAU,CAEpBC,QAAM,IAANA,CAAM,IAANA,QAAM;GAFID,UAAU,KAAVA,UAAU"}
+{"version":3,"sources":["../../../packages/input/types.ts"],"sourcesContent":["import { LidoComponentProps } from '@lidofinance/utils'\nimport React, { ChangeEventHandler } from 'react'\nexport type { Theme } from '@lidofinance/theme'\n\nexport enum InputMessageVariant {\n  error,\n  warning,\n  success,\n}\nexport type InputMessageVariants = keyof typeof InputMessageVariant\n\nexport enum InputType {\n  text,\n  password,\n  number,\n  email,\n  search,\n  tel,\n  url,\n}\nexport type InputTypes = keyof typeof InputType\n\nexport enum InputVariant {\n  small,\n  default,\n}\nexport type InputVariants = keyof typeof InputVariant\n\nexport enum InputColor {\n  default,\n  accent,\n}\nexport type InputColors = keyof typeof InputColor\n\ntype CommonProps = {\n  label?: React.ReactNode\n  error?: React.ReactNode | boolean\n  warning?: React.ReactNode | boolean\n  success?: React.ReactNode | boolean\n  variant?: InputVariants\n  color?: InputColors\n  active?: boolean\n  fullwidth?: boolean\n  wrapperRef?: React.RefObject<HTMLLabelElement>\n  as?: never\n}\n\nexport type InputProps = LidoComponentProps<\n  'input',\n  CommonProps & {\n    type?: InputTypes\n    leftDecorator?: React.ReactNode\n    rightDecorator?: React.ReactNode\n  }\n>\n\nexport type TextareaProps = LidoComponentProps<'textarea', CommonProps>\n\nexport type InputGroupProps = LidoComponentProps<\n  'span',\n  {\n    fullwidth?: boolean\n    error?: React.ReactNode\n    success?: React.ReactNode\n  }\n>\n\ninterface ValueLabel {\n  value: number\n  label: React.ReactNode\n}\n\ntype SliderProps = {\n  value: number\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  min?: number\n  max?: number\n  minLabel?: React.ReactNode\n  maxLabel?: React.ReactNode\n  step?: number\n  getLabel?: (value: number) => React.ReactNode\n  borderNone?: boolean\n  labels?: ValueLabel[]\n  onLabelClick?: (value: number) => unknown\n}\n\nexport type SliderInputProps = LidoComponentProps<'input', SliderProps>\n\ntype SliderOptionValue = string | number\n\ninterface SliderOption {\n  value: SliderOptionValue\n  label: React.ReactNode\n}\n\ninterface OptionsSliderProps {\n  options: [SliderOption, SliderOption, ...SliderOption[]] // this is declaration like T[] but with \"at least 2 elements\" constraint\n  value?: SliderOptionValue // if value is not provided, component should act isolated; initial value should be first option\n  onChange: (value: SliderOptionValue, valueIndex: number) => unknown\n}\n\nexport type OptionsSliderInputProps = LidoComponentProps<\n  'input',\n  OptionsSliderProps\n>\n"],"names":["InputMessageVariant","error","warning","success","InputType","text","password","number","email","search","tel","url","InputVariant","small","default","InputColor","accent"],"mappings":"AAAA;;;;;;;;;;;;;;;;;4DAC0C,OAAO;IAG1C,mBAIN;UAJWA,mBAAmB;IAAnBA,mBAAmB,CAAnBA,mBAAmB,CAC7BC,OAAK,IAALA,CAAK,IAALA,OAAK;IADKD,mBAAmB,CAAnBA,mBAAmB,CAE7BE,SAAO,IAAPA,CAAO,IAAPA,SAAO;IAFGF,mBAAmB,CAAnBA,mBAAmB,CAG7BG,SAAO,IAAPA,CAAO,IAAPA,SAAO;GAHGH,mBAAmB,KAAnBA,mBAAmB;IAOxB,SAQN;UARWI,SAAS;IAATA,SAAS,CAATA,SAAS,CACnBC,MAAI,IAAJA,CAAI,IAAJA,MAAI;IADMD,SAAS,CAATA,SAAS,CAEnBE,UAAQ,IAARA,CAAQ,IAARA,UAAQ;IAFEF,SAAS,CAATA,SAAS,CAGnBG,QAAM,IAANA,CAAM,IAANA,QAAM;IAHIH,SAAS,CAATA,SAAS,CAInBI,OAAK,IAALA,CAAK,IAALA,OAAK;IAJKJ,SAAS,CAATA,SAAS,CAKnBK,QAAM,IAANA,CAAM,IAANA,QAAM;IALIL,SAAS,CAATA,SAAS,CAMnBM,KAAG,IAAHA,CAAG,IAAHA,KAAG;IANON,SAAS,CAATA,SAAS,CAOnBO,KAAG,IAAHA,CAAG,IAAHA,KAAG;GAPOP,SAAS,KAATA,SAAS;IAWd,YAGN;UAHWQ,YAAY;IAAZA,YAAY,CAAZA,YAAY,CACtBC,OAAK,IAALA,CAAK,IAALA,OAAK;IADKD,YAAY,CAAZA,YAAY,CAEtBE,SAAO,IAAPA,CAAO,IAAPA,SAAO;GAFGF,YAAY,KAAZA,YAAY;IAMjB,UAGN;UAHWG,UAAU;IAAVA,UAAU,CAAVA,UAAU,CACpBD,SAAO,IAAPA,CAAO,IAAPA,SAAO;IADGC,UAAU,CAAVA,UAAU,CAEpBC,QAAM,IAANA,CAAM,IAANA,QAAM;GAFID,UAAU,KAAVA,UAAU"}

package/dist/cjs/theme/base/colors.js

@@ -30,6 +30,8 @@ const colors = {
     warning: '#EC8600',
     warningHover: '#f0a431',
     warningContrast: '#fff',
+    warningBackground: '#FFFAE0',
+    textDark: '#273852',
     success: '#53BA95',
     successHover: '#5dae5e',
     successContrast: '#fff'

package/dist/cjs/theme/base/colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../packages/theme/base/colors.ts"],"sourcesContent":["const colors = {\n  darkThemeOpacity: '0',\n  lightThemeOpacity: '1',\n\n  lightModeVisibility: 'visible',\n  darkModeVisibility: 'hidden',\n\n  lightDisplay: 'initial',\n  darkDisplay: 'none',\n\n  primary: '#00a3ff',\n  primaryHover: '#009bf2',\n  primaryContrast: '#fff',\n  primaryVisited: '#4bbeff',\n\n  accent: '#27272e',\n  accentContrast: '#fff',\n  accentContrastSecondary: 'rgba(255, 255, 255, 0.6)',\n  accentDarken: 'rgba(0, 0, 0, .2)',\n  accentControlBg: 'rgba(0, 0, 0, .1)',\n  accentBorder: 'rgba(255, 255, 255, 0.2)',\n  accentBorderHover: 'rgba(255, 255, 255, 0.3)',\n\n  error: '#e14d4d',\n  errorHover: '#d44c4d',\n  errorContrast: '#fff',\n\n  warning: '#EC8600',\n  warningHover: '#f0a431',\n  warningContrast: '#fff',\n\n  success: '#53BA95',\n  successHover: '#5dae5e',\n  successContrast: '#fff',\n} as const\n\nexport default { colors }\n"],"names":["colors","darkThemeOpacity","lightThemeOpacity","lightModeVisibility","darkModeVisibility","lightDisplay","darkDisplay","primary","primaryHover","primaryContrast","primaryVisited","accent","accentContrast","accentContrastSecondary","accentDarken","accentControlBg","accentBorder","accentBorderHover","error","errorHover","errorContrast","warning","warningHover","warningContrast","success","successHover","successContrast"],"mappings":"AAAA;;;;+BAoCA,SAAyB;;aAAzB,QAAyB;;AApCzB,MAAMA,MAAM,GAAG;IACbC,gBAAgB,EAAE,GAAG;IACrBC,iBAAiB,EAAE,GAAG;IAEtBC,mBAAmB,EAAE,SAAS;IAC9BC,kBAAkB,EAAE,QAAQ;IAE5BC,YAAY,EAAE,SAAS;IACvBC,WAAW,EAAE,MAAM;IAEnBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IACvBC,cAAc,EAAE,SAAS;IAEzBC,MAAM,EAAE,SAAS;IACjBC,cAAc,EAAE,MAAM;IACtBC,uBAAuB,EAAE,0BAA0B;IACnDC,YAAY,EAAE,mBAAmB;IACjCC,eAAe,EAAE,mBAAmB;IACpCC,YAAY,EAAE,0BAA0B;IACxCC,iBAAiB,EAAE,0BAA0B;IAE7CC,KAAK,EAAE,SAAS;IAChBC,UAAU,EAAE,SAAS;IACrBC,aAAa,EAAE,MAAM;IAErBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IAEvBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;CACxB,AAAS;MAEV,QAAyB,GAAV;IAAE1B,MAAM;CAAE"}
+{"version":3,"sources":["../../../../packages/theme/base/colors.ts"],"sourcesContent":["const colors = {\n  darkThemeOpacity: '0',\n  lightThemeOpacity: '1',\n\n  lightModeVisibility: 'visible',\n  darkModeVisibility: 'hidden',\n\n  lightDisplay: 'initial',\n  darkDisplay: 'none',\n\n  primary: '#00a3ff',\n  primaryHover: '#009bf2',\n  primaryContrast: '#fff',\n  primaryVisited: '#4bbeff',\n\n  accent: '#27272e',\n  accentContrast: '#fff',\n  accentContrastSecondary: 'rgba(255, 255, 255, 0.6)',\n  accentDarken: 'rgba(0, 0, 0, .2)',\n  accentControlBg: 'rgba(0, 0, 0, .1)',\n  accentBorder: 'rgba(255, 255, 255, 0.2)',\n  accentBorderHover: 'rgba(255, 255, 255, 0.3)',\n\n  error: '#e14d4d',\n  errorHover: '#d44c4d',\n  errorContrast: '#fff',\n\n  warning: '#EC8600',\n  warningHover: '#f0a431',\n  warningContrast: '#fff',\n  warningBackground: '#FFFAE0',\n\n  textDark: '#273852',\n\n  success: '#53BA95',\n  successHover: '#5dae5e',\n  successContrast: '#fff',\n} as const\n\nexport default { colors }\n"],"names":["colors","darkThemeOpacity","lightThemeOpacity","lightModeVisibility","darkModeVisibility","lightDisplay","darkDisplay","primary","primaryHover","primaryContrast","primaryVisited","accent","accentContrast","accentContrastSecondary","accentDarken","accentControlBg","accentBorder","accentBorderHover","error","errorHover","errorContrast","warning","warningHover","warningContrast","warningBackground","textDark","success","successHover","successContrast"],"mappings":"AAAA;;;;+BAuCA,SAAyB;;aAAzB,QAAyB;;AAvCzB,MAAMA,MAAM,GAAG;IACbC,gBAAgB,EAAE,GAAG;IACrBC,iBAAiB,EAAE,GAAG;IAEtBC,mBAAmB,EAAE,SAAS;IAC9BC,kBAAkB,EAAE,QAAQ;IAE5BC,YAAY,EAAE,SAAS;IACvBC,WAAW,EAAE,MAAM;IAEnBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IACvBC,cAAc,EAAE,SAAS;IAEzBC,MAAM,EAAE,SAAS;IACjBC,cAAc,EAAE,MAAM;IACtBC,uBAAuB,EAAE,0BAA0B;IACnDC,YAAY,EAAE,mBAAmB;IACjCC,eAAe,EAAE,mBAAmB;IACpCC,YAAY,EAAE,0BAA0B;IACxCC,iBAAiB,EAAE,0BAA0B;IAE7CC,KAAK,EAAE,SAAS;IAChBC,UAAU,EAAE,SAAS;IACrBC,aAAa,EAAE,MAAM;IAErBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IACvBC,iBAAiB,EAAE,SAAS;IAE5BC,QAAQ,EAAE,SAAS;IAEnBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;CACxB,AAAS;MAEV,QAAyB,GAAV;IAAE5B,MAAM;CAAE"}

package/dist/cjs/theme/themes.js

@@ -34,6 +34,7 @@ const themeLight = {
         secondaryContrast: '#fff',
         background: '#f2f4f6',
         backgroundDarken: '#dae0e5',
+        backgroundSecondary: '#EFF2F6',
         foreground: '#fff',
         overlay: 'rgba(0, 0, 0, 0.5)',
         shadowLight: 'rgba(39, 56, 82, 0.08)',
@@ -68,6 +69,7 @@ const themeDark = {
         secondaryContrast: '#273852',
         background: '#1c1c21',
         backgroundDarken: '#131317',
+        backgroundSecondary: '#27272E',
         foreground: '#34343d',
         overlay: 'rgba(0, 0, 0, 0.5)',
         shadowLight: 'rgba(0, 0, 0, .25)',

package/dist/cjs/theme/themes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../packages/theme/themes.ts"],"sourcesContent":["import themeBase from './base'\nimport { ThemeName } from './constants'\n\nexport const themeLight = {\n  ...themeBase,\n  name: ThemeName.light,\n  colors: {\n    ...themeBase.colors,\n    darkThemeOpacity: '0',\n    lightThemeOpacity: '1',\n\n    lightModeVisibility: 'visible',\n    darkModeVisibility: 'hidden',\n\n    lightDisplay: 'initial',\n    darkDisplay: 'none',\n\n    secondary: '#273852',\n    secondaryHover: '#212f45',\n    secondaryContrast: '#fff',\n\n    background: '#f2f4f6',\n    backgroundDarken: '#dae0e5',\n\n    foreground: '#fff',\n\n    overlay: 'rgba(0, 0, 0, 0.5)',\n\n    shadowLight: 'rgba(39, 56, 82, 0.08)',\n    shadowDark: 'rgba(0, 0, 0, .25)',\n\n    text: '#273852',\n    textSecondary: '#7a8aa0',\n    accentText: '#273852',\n\n    border: 'rgba(0, 10, 61, 0.12)',\n    borderActive: 'rgba(0, 10, 61, 0.48)',\n    borderHover: 'rgba(0, 10, 61, 0.24)',\n    borderLight: '#dfe5eb',\n    accentBorder: 'rgba(0, 10, 61, 0.12)',\n    accentBorderHover: 'rgba(0, 10, 61, 0.24)',\n\n    controlBg: '#fff',\n    accentControlBg: 'rgba(239, 242, 246, 0.56)',\n\n    popupMenuItemBgActiveHover: '#000a3d',\n  },\n}\n\nexport const themeDark = {\n  ...themeBase,\n  name: ThemeName.dark,\n  colors: {\n    ...themeBase.colors,\n    darkThemeOpacity: '1',\n    lightThemeOpacity: '0',\n\n    lightModeVisibility: 'hidden',\n    darkModeVisibility: 'visible',\n\n    lightDisplay: 'none',\n    darkDisplay: 'initial',\n\n    secondary: 'rgba(255, 255, 255, .8)',\n    secondaryHover: '#fff',\n    secondaryContrast: '#273852',\n\n    background: '#1c1c21',\n    backgroundDarken: '#131317',\n\n    foreground: '#34343d',\n\n    overlay: 'rgba(0, 0, 0, 0.5)',\n\n    shadowLight: 'rgba(0, 0, 0, .25)',\n    shadowDark: 'rgba(0, 0, 0, .5)',\n\n    text: '#fff',\n    textSecondary: 'rgba(255, 255, 255, .8)',\n    accentText: '#fff',\n\n    border: 'rgba(255, 255, 255, 0.12)',\n    borderActive: 'rgba(255, 255, 255, 0.48)',\n    borderHover: 'rgba(255, 255, 255, 0.24)',\n    borderLight: '#484855',\n    accentBorder: 'rgba(255, 255, 255, 0.12)',\n    accentBorderHover: 'rgba(255, 255, 255, 0.24)',\n\n    controlBg: '#2f2f37',\n    accentControlBg: 'rgba(39, 39, 46, 0.56)',\n\n    popupMenuItemBgActiveHover: '#fff',\n  },\n}\n\nexport const themeMap = {\n  [ThemeName.light]: themeLight,\n  [ThemeName.dark]: themeDark,\n}\n\nexport const reverseThemeMap = new WeakMap([\n  [themeLight, ThemeName.light],\n  [themeDark, ThemeName.dark],\n])\n\nexport const themeDefault = themeLight\n"],"names":["themeLight","themeDark","themeMap","reverseThemeMap","themeDefault","themeBase","name","ThemeName","light","colors","darkThemeOpacity","lightThemeOpacity","lightModeVisibility","darkModeVisibility","lightDisplay","darkDisplay","secondary","secondaryHover","secondaryContrast","background","backgroundDarken","foreground","overlay","shadowLight","shadowDark","text","textSecondary","accentText","border","borderActive","borderHover","borderLight","accentBorder","accentBorderHover","controlBg","accentControlBg","popupMenuItemBgActiveHover","dark","WeakMap"],"mappings":"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"}
+{"version":3,"sources":["../../../packages/theme/themes.ts"],"sourcesContent":["import themeBase from './base'\nimport { ThemeName } from './constants'\n\nexport const themeLight = {\n  ...themeBase,\n  name: ThemeName.light,\n  colors: {\n    ...themeBase.colors,\n    darkThemeOpacity: '0',\n    lightThemeOpacity: '1',\n\n    lightModeVisibility: 'visible',\n    darkModeVisibility: 'hidden',\n\n    lightDisplay: 'initial',\n    darkDisplay: 'none',\n\n    secondary: '#273852',\n    secondaryHover: '#212f45',\n    secondaryContrast: '#fff',\n\n    background: '#f2f4f6',\n    backgroundDarken: '#dae0e5',\n    backgroundSecondary: '#EFF2F6',\n\n    foreground: '#fff',\n\n    overlay: 'rgba(0, 0, 0, 0.5)',\n\n    shadowLight: 'rgba(39, 56, 82, 0.08)',\n    shadowDark: 'rgba(0, 0, 0, .25)',\n\n    text: '#273852',\n    textSecondary: '#7a8aa0',\n    accentText: '#273852',\n\n    border: 'rgba(0, 10, 61, 0.12)',\n    borderActive: 'rgba(0, 10, 61, 0.48)',\n    borderHover: 'rgba(0, 10, 61, 0.24)',\n    borderLight: '#dfe5eb',\n    accentBorder: 'rgba(0, 10, 61, 0.12)',\n    accentBorderHover: 'rgba(0, 10, 61, 0.24)',\n\n    controlBg: '#fff',\n    accentControlBg: 'rgba(239, 242, 246, 0.56)',\n\n    popupMenuItemBgActiveHover: '#000a3d',\n  },\n}\n\nexport const themeDark = {\n  ...themeBase,\n  name: ThemeName.dark,\n  colors: {\n    ...themeBase.colors,\n    darkThemeOpacity: '1',\n    lightThemeOpacity: '0',\n\n    lightModeVisibility: 'hidden',\n    darkModeVisibility: 'visible',\n\n    lightDisplay: 'none',\n    darkDisplay: 'initial',\n\n    secondary: 'rgba(255, 255, 255, .8)',\n    secondaryHover: '#fff',\n    secondaryContrast: '#273852',\n\n    background: '#1c1c21',\n    backgroundDarken: '#131317',\n    backgroundSecondary: '#27272E',\n\n    foreground: '#34343d',\n\n    overlay: 'rgba(0, 0, 0, 0.5)',\n\n    shadowLight: 'rgba(0, 0, 0, .25)',\n    shadowDark: 'rgba(0, 0, 0, .5)',\n\n    text: '#fff',\n    textSecondary: 'rgba(255, 255, 255, .8)',\n    accentText: '#fff',\n\n    border: 'rgba(255, 255, 255, 0.12)',\n    borderActive: 'rgba(255, 255, 255, 0.48)',\n    borderHover: 'rgba(255, 255, 255, 0.24)',\n    borderLight: '#484855',\n    accentBorder: 'rgba(255, 255, 255, 0.12)',\n    accentBorderHover: 'rgba(255, 255, 255, 0.24)',\n\n    controlBg: '#2f2f37',\n    accentControlBg: 'rgba(39, 39, 46, 0.56)',\n\n    popupMenuItemBgActiveHover: '#fff',\n  },\n}\n\nexport const themeMap = {\n  [ThemeName.light]: themeLight,\n  [ThemeName.dark]: themeDark,\n}\n\nexport const reverseThemeMap = new WeakMap([\n  [themeLight, ThemeName.light],\n  [themeDark, ThemeName.dark],\n])\n\nexport const themeDefault = themeLight\n"],"names":["themeLight","themeDark","themeMap","reverseThemeMap","themeDefault","themeBase","name","ThemeName","light","colors","darkThemeOpacity","lightThemeOpacity","lightModeVisibility","darkModeVisibility","lightDisplay","darkDisplay","secondary","secondaryHover","secondaryContrast","background","backgroundDarken","backgroundSecondary","foreground","overlay","shadowLight","shadowDark","text","textSecondary","accentText","border","borderActive","borderHover","borderLight","accentBorder","accentBorderHover","controlBg","accentControlBg","popupMenuItemBgActiveHover","dark","WeakMap"],"mappings":"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"}

package/dist/esm/input/OptionsSlider.js

@@ -7,23 +7,29 @@ const OptionsSlider = (param)=>{
         sliderIndex = 0;
     }
     const max = options.length - 1;
-    const firstOption = options[0];
-    const lastOption = options[max];
     const getLabel = (optionIndex)=>{
         return options[optionIndex].label;
     };
     const handleSliderChange = (e)=>{
         const optionIndex = Number(e.target.value);
-        onChange(e, options[optionIndex].value, optionIndex);
+        onChange(options[optionIndex].value, optionIndex);
     };
+    const labels = options.map((param, index)=>{
+        let { label  } = param;
+        return {
+            value: index,
+            label
+        };
+    });
     return /*#__PURE__*/ React.createElement(SliderInput, {
         min: 0,
         max: max,
         value: sliderIndex,
         onChange: handleSliderChange,
-        minLabel: firstOption.label,
-        maxLabel: lastOption.label,
-        getLabel: getLabel
+        getLabel: getLabel,
+        labels: labels,
+        borderNone: true,
+        onLabelClick: (optionIndex)=>onChange(options[optionIndex].value, optionIndex)
     });
 };
 export default OptionsSlider;

package/dist/esm/input/OptionsSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../packages/input/OptionsSlider.tsx"],"sourcesContent":["import React from 'react'\nimport SliderInput from './SliderInput'\nimport { OptionsSliderInputProps } from './types'\n\nconst OptionsSlider = ({\n  options,\n  value,\n  onChange,\n}: OptionsSliderInputProps): React.ReactElement => {\n  let sliderIndex = options.findIndex((option) => option.value === value)\n\n  if (sliderIndex === -1) {\n    sliderIndex = 0\n  }\n\n  const max = options.length - 1\n\n  const firstOption = options[0]\n  const lastOption = options[max]\n\n  const getLabel = (optionIndex: number) => {\n    return options[optionIndex].label\n  }\n\n  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const optionIndex = Number(e.target.value)\n    onChange(e, options[optionIndex].value, optionIndex)\n  }\n  return (\n    <SliderInput\n      min={0}\n      max={max}\n      value={sliderIndex}\n      onChange={handleSliderChange}\n      minLabel={firstOption.label}\n      maxLabel={lastOption.label}\n      getLabel={getLabel}\n    />\n  )\n}\n\nexport default OptionsSlider\n"],"names":["React","SliderInput","OptionsSlider","options","value","onChange","sliderIndex","findIndex","option","max","length","firstOption","lastOption","getLabel","optionIndex","label","handleSliderChange","e","Number","target","min","minLabel","maxLabel"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO,CAAA;AACzB,OAAOC,WAAW,MAAM,eAAe,CAAA;AAGvC,MAAMC,aAAa,GAAG,SAI6B;QAJ5B,EACrBC,OAAO,CAAA,EACPC,KAAK,CAAA,EACLC,QAAQ,CAAA,EACgB;IACxB,IAAIC,WAAW,GAAGH,OAAO,CAACI,SAAS,CAAC,CAACC,MAAM,GAAKA,MAAM,CAACJ,KAAK,KAAKA,KAAK,CAAC;IAEvE,IAAIE,WAAW,KAAK,CAAC,CAAC,EAAE;QACtBA,WAAW,GAAG,CAAC;IACjB,CAAC;IAED,MAAMG,GAAG,GAAGN,OAAO,CAACO,MAAM,GAAG,CAAC;IAE9B,MAAMC,WAAW,GAAGR,OAAO,CAAC,CAAC,CAAC;IAC9B,MAAMS,UAAU,GAAGT,OAAO,CAACM,GAAG,CAAC;IAE/B,MAAMI,QAAQ,GAAG,CAACC,WAAmB,GAAK;QACxC,OAAOX,OAAO,CAACW,WAAW,CAAC,CAACC,KAAK,CAAA;IACnC,CAAC;IAED,MAAMC,kBAAkB,GAAG,CAACC,CAAsC,GAAK;QACrE,MAAMH,WAAW,GAAGI,MAAM,CAACD,CAAC,CAACE,MAAM,CAACf,KAAK,CAAC;QAC1CC,QAAQ,CAACY,CAAC,EAAEd,OAAO,CAACW,WAAW,CAAC,CAACV,KAAK,EAAEU,WAAW,CAAC;IACtD,CAAC;IACD,qBACE,oBAACb,WAAW;QACVmB,GAAG,EAAE,CAAC;QACNX,GAAG,EAAEA,GAAG;QACRL,KAAK,EAAEE,WAAW;QAClBD,QAAQ,EAAEW,kBAAkB;QAC5BK,QAAQ,EAAEV,WAAW,CAACI,KAAK;QAC3BO,QAAQ,EAAEV,UAAU,CAACG,KAAK;QAC1BF,QAAQ,EAAEA,QAAQ;MAClB,CACH;AACH,CAAC;AAED,eAAeX,aAAa,CAAA"}
+{"version":3,"sources":["../../../packages/input/OptionsSlider.tsx"],"sourcesContent":["import React from 'react'\nimport SliderInput from './SliderInput'\nimport { OptionsSliderInputProps } from './types'\n\nconst OptionsSlider = ({\n  options,\n  value,\n  onChange,\n}: OptionsSliderInputProps): React.ReactElement => {\n  let sliderIndex = options.findIndex((option) => option.value === value)\n\n  if (sliderIndex === -1) {\n    sliderIndex = 0\n  }\n\n  const max = options.length - 1\n\n  const getLabel = (optionIndex: number) => {\n    return options[optionIndex].label\n  }\n\n  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const optionIndex = Number(e.target.value)\n    onChange(options[optionIndex].value, optionIndex)\n  }\n\n  const labels = options.map(({ label }, index) => ({ value: index, label }))\n  return (\n    <SliderInput\n      min={0}\n      max={max}\n      value={sliderIndex}\n      onChange={handleSliderChange}\n      getLabel={getLabel}\n      labels={labels}\n      borderNone={true}\n      onLabelClick={(optionIndex) =>\n        onChange(options[optionIndex].value, optionIndex)\n      }\n    />\n  )\n}\n\nexport default OptionsSlider\n"],"names":["React","SliderInput","OptionsSlider","options","value","onChange","sliderIndex","findIndex","option","max","length","getLabel","optionIndex","label","handleSliderChange","e","Number","target","labels","map","index","min","borderNone","onLabelClick"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO,CAAA;AACzB,OAAOC,WAAW,MAAM,eAAe,CAAA;AAGvC,MAAMC,aAAa,GAAG,SAI6B;QAJ5B,EACrBC,OAAO,CAAA,EACPC,KAAK,CAAA,EACLC,QAAQ,CAAA,EACgB;IACxB,IAAIC,WAAW,GAAGH,OAAO,CAACI,SAAS,CAAC,CAACC,MAAM,GAAKA,MAAM,CAACJ,KAAK,KAAKA,KAAK,CAAC;IAEvE,IAAIE,WAAW,KAAK,CAAC,CAAC,EAAE;QACtBA,WAAW,GAAG,CAAC;IACjB,CAAC;IAED,MAAMG,GAAG,GAAGN,OAAO,CAACO,MAAM,GAAG,CAAC;IAE9B,MAAMC,QAAQ,GAAG,CAACC,WAAmB,GAAK;QACxC,OAAOT,OAAO,CAACS,WAAW,CAAC,CAACC,KAAK,CAAA;IACnC,CAAC;IAED,MAAMC,kBAAkB,GAAG,CAACC,CAAsC,GAAK;QACrE,MAAMH,WAAW,GAAGI,MAAM,CAACD,CAAC,CAACE,MAAM,CAACb,KAAK,CAAC;QAC1CC,QAAQ,CAACF,OAAO,CAACS,WAAW,CAAC,CAACR,KAAK,EAAEQ,WAAW,CAAC;IACnD,CAAC;IAED,MAAMM,MAAM,GAAGf,OAAO,CAACgB,GAAG,CAAC,QAAYC,KAAK,GAAK;YAArB,EAAEP,KAAK,CAAA,EAAE;eAAa;YAAET,KAAK,EAAEgB,KAAK;YAAEP,KAAK;SAAE;IAAA,CAAC,CAAC;IAC3E,qBACE,oBAACZ,WAAW;QACVoB,GAAG,EAAE,CAAC;QACNZ,GAAG,EAAEA,GAAG;QACRL,KAAK,EAAEE,WAAW;QAClBD,QAAQ,EAAES,kBAAkB;QAC5BH,QAAQ,EAAEA,QAAQ;QAClBO,MAAM,EAAEA,MAAM;QACdI,UAAU,EAAE,IAAI;QAChBC,YAAY,EAAE,CAACX,WAAW,GACxBP,QAAQ,CAACF,OAAO,CAACS,WAAW,CAAC,CAACR,KAAK,EAAEQ,WAAW,CAAC;MAEnD,CACH;AACH,CAAC;AAED,eAAeV,aAAa,CAAA"}

package/dist/esm/input/SliderInput.js

@@ -1,17 +1,36 @@
 import React from "react";
-import { Label, LabelContainer, RangeInputSlider, Slider, SliderWrapper, Track } from "./SliderInputStyles";
+import { Label, LabelButton, LabelContainer, RangeInputSlider, Slider, SliderWrapper, Track } from "./SliderInputStyles";
 function SliderInput(param) {
-    let { value , onChange , min =0 , max =100 , step =1 , minLabel , maxLabel , getLabel =(val)=>String(val)  } = param;
+    let { value , onChange , onLabelClick , min =0 , max =100 , step =1 , minLabel , maxLabel , getLabel =(val)=>String(val) , borderNone , labels  } = param;
     const fillPercentage = (value - min) / (max - min) * 100;
-    return /*#__PURE__*/ React.createElement(SliderWrapper, null, /*#__PURE__*/ React.createElement(Slider, null, getLabel(value), /*#__PURE__*/ React.createElement(Track, {
-        fillPercentage: fillPercentage
+    const LabelComponent = onLabelClick ? LabelButton : Label;
+    const createClickHandler = (value)=>{
+        return ()=>{
+            return onLabelClick === null || onLabelClick === void 0 ? void 0 : onLabelClick(value);
+        };
+    };
+    return /*#__PURE__*/ React.createElement(SliderWrapper, null, /*#__PURE__*/ React.createElement(Slider, {
+        borderNone: borderNone
+    }, getLabel(value), /*#__PURE__*/ React.createElement(Track, {
+        fillPercentage: fillPercentage,
+        borderNone: borderNone
     })), /*#__PURE__*/ React.createElement(RangeInputSlider, {
         value: value,
         step: step,
         onChange: onChange,
         min: min,
         max: max
-    }), /*#__PURE__*/ React.createElement(LabelContainer, null, /*#__PURE__*/ React.createElement(Label, null, minLabel), /*#__PURE__*/ React.createElement(Label, null, maxLabel)));
+    }), /*#__PURE__*/ React.createElement(LabelContainer, null, minLabel && /*#__PURE__*/ React.createElement(LabelComponent, {
+        onClick: createClickHandler(min)
+    }, minLabel), labels === null || labels === void 0 ? void 0 : labels.map((param)=>/*#__PURE__*/ {
+        let { value , label  } = param;
+        return React.createElement(LabelComponent, {
+            onClick: createClickHandler(value),
+            key: value
+        }, label);
+    }), maxLabel && /*#__PURE__*/ React.createElement(LabelComponent, {
+        onClick: createClickHandler(max)
+    }, maxLabel)));
 }
 export default SliderInput;
 

package/dist/esm/input/SliderInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../packages/input/SliderInput.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  Label,\n  LabelContainer,\n  RangeInputSlider,\n  Slider,\n  SliderWrapper,\n  Track,\n} from './SliderInputStyles'\nimport { SliderInputProps } from './types'\n\nfunction SliderInput({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  minLabel,\n  maxLabel,\n  getLabel = (val) => String(val),\n}: SliderInputProps): React.ReactElement {\n  const fillPercentage = ((value - min) / (max - min)) * 100\n  return (\n    <SliderWrapper>\n      <Slider>\n        {getLabel(value)}\n        <Track fillPercentage={fillPercentage} />\n      </Slider>\n      <RangeInputSlider\n        value={value}\n        step={step}\n        onChange={onChange}\n        min={min}\n        max={max}\n      />\n      <LabelContainer>\n        <Label>{minLabel}</Label>\n        <Label>{maxLabel}</Label>\n      </LabelContainer>\n    </SliderWrapper>\n  )\n}\n\nexport default SliderInput\n"],"names":["React","Label","LabelContainer","RangeInputSlider","Slider","SliderWrapper","Track","SliderInput","value","onChange","min","max","step","minLabel","maxLabel","getLabel","val","String","fillPercentage"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO,CAAA;AACzB,SACEC,KAAK,EACLC,cAAc,EACdC,gBAAgB,EAChBC,MAAM,EACNC,aAAa,EACbC,KAAK,QACA,qBAAqB,CAAA;AAG5B,SAASC,WAAW,CAAC,KASF,EAAsB;QATpB,EACnBC,KAAK,CAAA,EACLC,QAAQ,CAAA,EACRC,GAAG,EAAG,CAAC,CAAA,EACPC,GAAG,EAAG,GAAG,CAAA,EACTC,IAAI,EAAG,CAAC,CAAA,EACRC,QAAQ,CAAA,EACRC,QAAQ,CAAA,EACRC,QAAQ,EAAG,CAACC,GAAG,GAAKC,MAAM,CAACD,GAAG,CAAC,CAAA,EACd,GATE,KASF;IACjB,MAAME,cAAc,GAAG,AAAC,CAACV,KAAK,GAAGE,GAAG,CAAC,GAAG,CAACC,GAAG,GAAGD,GAAG,CAAC,GAAI,GAAG;IAC1D,qBACE,oBAACL,aAAa,sBACZ,oBAACD,MAAM,QACJW,QAAQ,CAACP,KAAK,CAAC,gBAChB,oBAACF,KAAK;QAACY,cAAc,EAAEA,cAAc;MAAI,CAClC,gBACT,oBAACf,gBAAgB;QACfK,KAAK,EAAEA,KAAK;QACZI,IAAI,EAAEA,IAAI;QACVH,QAAQ,EAAEA,QAAQ;QAClBC,GAAG,EAAEA,GAAG;QACRC,GAAG,EAAEA,GAAG;MACR,gBACF,oBAACT,cAAc,sBACb,oBAACD,KAAK,QAAEY,QAAQ,CAAS,gBACzB,oBAACZ,KAAK,QAAEa,QAAQ,CAAS,CACV,CACH,CACjB;AACH,CAAC;AAED,eAAeP,WAAW,CAAA"}
+{"version":3,"sources":["../../../packages/input/SliderInput.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  Label,\n  LabelButton,\n  LabelContainer,\n  RangeInputSlider,\n  Slider,\n  SliderWrapper,\n  Track,\n} from './SliderInputStyles'\nimport { SliderInputProps } from './types'\n\nfunction SliderInput({\n  value,\n  onChange,\n  onLabelClick,\n  min = 0,\n  max = 100,\n  step = 1,\n  minLabel,\n  maxLabel,\n  getLabel = (val) => String(val),\n  borderNone,\n  labels,\n}: SliderInputProps): React.ReactElement {\n  const fillPercentage = ((value - min) / (max - min)) * 100\n  const LabelComponent = onLabelClick ? LabelButton : Label\n  const createClickHandler = (value: number) => () => onLabelClick?.(value)\n\n  return (\n    <SliderWrapper>\n      <Slider borderNone={borderNone}>\n        {getLabel(value)}\n        <Track fillPercentage={fillPercentage} borderNone={borderNone} />\n      </Slider>\n      <RangeInputSlider\n        value={value}\n        step={step}\n        onChange={onChange}\n        min={min}\n        max={max}\n      />\n      <LabelContainer>\n        {minLabel && (\n          <LabelComponent onClick={createClickHandler(min)}>\n            {minLabel}\n          </LabelComponent>\n        )}\n        {labels?.map(({ value, label }) => (\n          <LabelComponent onClick={createClickHandler(value)} key={value}>\n            {label}\n          </LabelComponent>\n        ))}\n        {maxLabel && (\n          <LabelComponent onClick={createClickHandler(max)}>\n            {maxLabel}\n          </LabelComponent>\n        )}\n      </LabelContainer>\n    </SliderWrapper>\n  )\n}\n\nexport default SliderInput\n"],"names":["React","Label","LabelButton","LabelContainer","RangeInputSlider","Slider","SliderWrapper","Track","SliderInput","value","onChange","onLabelClick","min","max","step","minLabel","maxLabel","getLabel","val","String","borderNone","labels","fillPercentage","LabelComponent","createClickHandler","onClick","map","label","key"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO,CAAA;AACzB,SACEC,KAAK,EACLC,WAAW,EACXC,cAAc,EACdC,gBAAgB,EAChBC,MAAM,EACNC,aAAa,EACbC,KAAK,QACA,qBAAqB,CAAA;AAG5B,SAASC,WAAW,CAAC,KAYF,EAAsB;QAZpB,EACnBC,KAAK,CAAA,EACLC,QAAQ,CAAA,EACRC,YAAY,CAAA,EACZC,GAAG,EAAG,CAAC,CAAA,EACPC,GAAG,EAAG,GAAG,CAAA,EACTC,IAAI,EAAG,CAAC,CAAA,EACRC,QAAQ,CAAA,EACRC,QAAQ,CAAA,EACRC,QAAQ,EAAG,CAACC,GAAG,GAAKC,MAAM,CAACD,GAAG,CAAC,CAAA,EAC/BE,UAAU,CAAA,EACVC,MAAM,CAAA,EACW,GAZE,KAYF;IACjB,MAAMC,cAAc,GAAG,AAAC,CAACb,KAAK,GAAGG,GAAG,CAAC,GAAG,CAACC,GAAG,GAAGD,GAAG,CAAC,GAAI,GAAG;IAC1D,MAAMW,cAAc,GAAGZ,YAAY,GAAGT,WAAW,GAAGD,KAAK;IACzD,MAAMuB,kBAAkB,GAAG,CAACf,KAAa;QAAK,OAAA;YAAME,OAAAA,YAAY,aAAZA,YAAY,WAAS,GAArBA,KAAAA,CAAqB,GAArBA,YAAY,CAAGF,KAAK,CAAC,CAAA;SAAA,CAAA;KAAA;IAEzE,qBACE,oBAACH,aAAa,sBACZ,oBAACD,MAAM;QAACe,UAAU,EAAEA,UAAU;OAC3BH,QAAQ,CAACR,KAAK,CAAC,gBAChB,oBAACF,KAAK;QAACe,cAAc,EAAEA,cAAc;QAAEF,UAAU,EAAEA,UAAU;MAAI,CAC1D,gBACT,oBAAChB,gBAAgB;QACfK,KAAK,EAAEA,KAAK;QACZK,IAAI,EAAEA,IAAI;QACVJ,QAAQ,EAAEA,QAAQ;QAClBE,GAAG,EAAEA,GAAG;QACRC,GAAG,EAAEA,GAAG;MACR,gBACF,oBAACV,cAAc,QACZY,QAAQ,kBACP,oBAACQ,cAAc;QAACE,OAAO,EAAED,kBAAkB,CAACZ,GAAG,CAAC;OAC7CG,QAAQ,CACM,AAClB,EACAM,MAAM,aAANA,MAAM,WAAK,GAAXA,KAAAA,CAAW,GAAXA,MAAM,CAAEK,GAAG,CAAC,uBACX;YADY,EAAEjB,KAAK,CAAA,EAAEkB,KAAK,CAAA,EAAE;eAC5B,oBAACJ,cAAc;YAACE,OAAO,EAAED,kBAAkB,CAACf,KAAK,CAAC;YAAEmB,GAAG,EAAEnB,KAAK;WAC3DkB,KAAK,CACS;IAAD,CACjB,CAAC,EACDX,QAAQ,kBACP,oBAACO,cAAc;QAACE,OAAO,EAAED,kBAAkB,CAACX,GAAG,CAAC;OAC7CG,QAAQ,CACM,AAClB,CACc,CACH,CACjB;AACH,CAAC;AAED,eAAeR,WAAW,CAAA"}

package/dist/esm/input/SliderInputStyles.js

@@ -70,6 +70,10 @@ export const Track = styled.div`
   right: 0;
   background: var(--lido-color-border);
 
+  ${(props)=>props.borderNone && `
+    background: none;
+    `};
+
   &:before {
     content: '';
     position: absolute;
@@ -92,6 +96,12 @@ export const Slider = styled.div`
   border-left: 1px solid var(--lido-color-border);
   border-top: 1px solid var(--lido-color-border);
 
+  ${(props)=>props.borderNone && `
+    border-right: none;
+    border-left: none;
+    border-top: none;
+    `};
+
   border-radius: 10px;
   overflow: hidden;
 `;
@@ -111,5 +121,16 @@ export const Label = styled.span`
   color: var(--lido-color-text);
   opacity: 0.5;
 `;
+export const LabelButton = styled.button`
+  border: none;
+  background-color: transparent;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--lido-color-text);
+  opacity: 0.5;
+  cursor: pointer;
+`;
 
 //# sourceMappingURL=SliderInputStyles.js.map

package/dist/esm/input/SliderInputStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../packages/input/SliderInputStyles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const RangeInputSlider = styled.input.attrs({ type: 'range' })`\n  width: 100%;\n  background-color: transparent;\n  -webkit-appearance: none;\n  position: absolute;\n  margin: 0;\n  top: 56px;\n  left: 0;\n  right: 0;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-webkit-slider-runnable-track {\n    background: transparent;\n    border: 0;\n    border-radius: 10px;\n    width: 100%;\n    height: 2px;\n    cursor: pointer;\n  }\n\n  &::-webkit-slider-thumb {\n    margin-top: -8px;\n    width: 18px;\n    height: 18px;\n    background: #ffffff;\n    box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 13px rgba(0, 0, 0, 0.12);\n    border: 0;\n    border-radius: 50px;\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n\n  &::-moz-range-track {\n    background: #00a3ff;\n    border: 0;\n    border-radius: 10px;\n    width: 100%;\n    height: 2px;\n    cursor: pointer;\n  }\n\n  &::-moz-range-thumb {\n    width: 18px;\n    height: 18px;\n    background: #ffffff;\n    border: 0;\n    border-radius: 50px;\n    cursor: pointer;\n  }\n\n  &::-ms-track {\n    background: transparent;\n    color: transparent;\n    width: 100%;\n    height: 2px;\n    cursor: pointer;\n  }\n`\n\nexport const Track = styled.div<{ fillPercentage: number }>`\n  height: 1px;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: var(--lido-color-border);\n\n  &:before {\n    content: '';\n    position: absolute;\n    display: block;\n    height: 2px;\n    bottom: 0;\n    left: 0;\n    background: var(--lido-color-primary);\n    width: ${(props) => props.fillPercentage || 0}%;\n  }\n`\n\nexport const Slider = styled.div`\n  position: relative;\n  height: 56px;\n  padding: 16px 20px;\n  box-sizing: border-box;\n\n  background: var(--lido-color-accentControlBg);\n  border-right: 1px solid var(--lido-color-border);\n  border-left: 1px solid var(--lido-color-border);\n  border-top: 1px solid var(--lido-color-border);\n\n  border-radius: 10px;\n  overflow: hidden;\n`\n\nexport const SliderWrapper = styled.div`\n  position: relative;\n`\n\nexport const LabelContainer = styled.div`\n  display: flex;\n  justify-content: space-between;\n  margin-top: 8px;\n`\n\nexport const Label = styled.span`\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 20px;\n  color: var(--lido-color-text);\n  opacity: 0.5;\n`\n"],"names":["styled","RangeInputSlider","input","attrs","type","Track","div","props","fillPercentage","Slider","SliderWrapper","LabelContainer","Label","span"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,MAAMC,gBAAgB,GAAGD,MAAM,CAACE,KAAK,CAACC,KAAK,CAAC;IAAEC,IAAI,EAAE,OAAO;CAAE,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DtE,CAAC,CAAA;AAED,OAAO,MAAMC,KAAK,GAAGL,MAAM,CAACM,GAAG,AAA4B,CAAC;;;;;;;;;;;;;;;;WAgBjD,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,cAAc,IAAI,CAAC,CAAC;;AAElD,CAAC,CAAA;AAED,OAAO,MAAMC,MAAM,GAAGT,MAAM,CAACM,GAAG,CAAC;;;;;;;;;;;;;AAajC,CAAC,CAAA;AAED,OAAO,MAAMI,aAAa,GAAGV,MAAM,CAACM,GAAG,CAAC;;AAExC,CAAC,CAAA;AAED,OAAO,MAAMK,cAAc,GAAGX,MAAM,CAACM,GAAG,CAAC;;;;AAIzC,CAAC,CAAA;AAED,OAAO,MAAMM,KAAK,GAAGZ,MAAM,CAACa,IAAI,CAAC;;;;;;;AAOjC,CAAC,CAAA"}
+{"version":3,"sources":["../../../packages/input/SliderInputStyles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const RangeInputSlider = styled.input.attrs({ type: 'range' })`\n  width: 100%;\n  background-color: transparent;\n  -webkit-appearance: none;\n  position: absolute;\n  margin: 0;\n  top: 56px;\n  left: 0;\n  right: 0;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-webkit-slider-runnable-track {\n    background: transparent;\n    border: 0;\n    border-radius: 10px;\n    width: 100%;\n    height: 2px;\n    cursor: pointer;\n  }\n\n  &::-webkit-slider-thumb {\n    margin-top: -8px;\n    width: 18px;\n    height: 18px;\n    background: #ffffff;\n    box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 13px rgba(0, 0, 0, 0.12);\n    border: 0;\n    border-radius: 50px;\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n\n  &::-moz-range-track {\n    background: #00a3ff;\n    border: 0;\n    border-radius: 10px;\n    width: 100%;\n    height: 2px;\n    cursor: pointer;\n  }\n\n  &::-moz-range-thumb {\n    width: 18px;\n    height: 18px;\n    background: #ffffff;\n    border: 0;\n    border-radius: 50px;\n    cursor: pointer;\n  }\n\n  &::-ms-track {\n    background: transparent;\n    color: transparent;\n    width: 100%;\n    height: 2px;\n    cursor: pointer;\n  }\n`\n\nexport const Track = styled.div<{\n  fillPercentage: number\n  borderNone?: boolean\n}>`\n  height: 1px;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: var(--lido-color-border);\n\n  ${(props) =>\n    props.borderNone &&\n    `\n    background: none;\n    `};\n\n  &:before {\n    content: '';\n    position: absolute;\n    display: block;\n    height: 2px;\n    bottom: 0;\n    left: 0;\n    background: var(--lido-color-primary);\n    width: ${(props) => props.fillPercentage || 0}%;\n  }\n`\n\nexport const Slider = styled.div<{\n  borderNone?: boolean\n}>`\n  position: relative;\n  height: 56px;\n  padding: 16px 20px;\n  box-sizing: border-box;\n\n  background: var(--lido-color-accentControlBg);\n  border-right: 1px solid var(--lido-color-border);\n  border-left: 1px solid var(--lido-color-border);\n  border-top: 1px solid var(--lido-color-border);\n\n  ${(props) =>\n    props.borderNone &&\n    `\n    border-right: none;\n    border-left: none;\n    border-top: none;\n    `};\n\n  border-radius: 10px;\n  overflow: hidden;\n`\n\nexport const SliderWrapper = styled.div`\n  position: relative;\n`\n\nexport const LabelContainer = styled.div`\n  display: flex;\n  justify-content: space-between;\n  margin-top: 8px;\n`\n\nexport const Label = styled.span`\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 20px;\n  color: var(--lido-color-text);\n  opacity: 0.5;\n`\n\nexport const LabelButton = styled.button`\n  border: none;\n  background-color: transparent;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 20px;\n  color: var(--lido-color-text);\n  opacity: 0.5;\n  cursor: pointer;\n`\n"],"names":["styled","RangeInputSlider","input","attrs","type","Track","div","props","borderNone","fillPercentage","Slider","SliderWrapper","LabelContainer","Label","span","LabelButton","button"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,MAAMC,gBAAgB,GAAGD,MAAM,CAACE,KAAK,CAACC,KAAK,CAAC;IAAEC,IAAI,EAAE,OAAO;CAAE,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DtE,CAAC,CAAA;AAED,OAAO,MAAMC,KAAK,GAAGL,MAAM,CAACM,GAAG,AAG7B,CAAC;;;;;;;;EAQD,EAAE,CAACC,KAAK,GACNA,KAAK,CAACC,UAAU,IAChB,CAAC;;IAED,CAAC,CAAC;;;;;;;;;;WAUK,EAAE,CAACD,KAAK,GAAKA,KAAK,CAACE,cAAc,IAAI,CAAC,CAAC;;AAElD,CAAC,CAAA;AAED,OAAO,MAAMC,MAAM,GAAGV,MAAM,CAACM,GAAG,AAE9B,CAAC;;;;;;;;;;;EAWD,EAAE,CAACC,KAAK,GACNA,KAAK,CAACC,UAAU,IAChB,CAAC;;;;IAID,CAAC,CAAC;;;;AAIN,CAAC,CAAA;AAED,OAAO,MAAMG,aAAa,GAAGX,MAAM,CAACM,GAAG,CAAC;;AAExC,CAAC,CAAA;AAED,OAAO,MAAMM,cAAc,GAAGZ,MAAM,CAACM,GAAG,CAAC;;;;AAIzC,CAAC,CAAA;AAED,OAAO,MAAMO,KAAK,GAAGb,MAAM,CAACc,IAAI,CAAC;;;;;;;AAOjC,CAAC,CAAA;AAED,OAAO,MAAMC,WAAW,GAAGf,MAAM,CAACgB,MAAM,CAAC;;;;;;;;;;AAUzC,CAAC,CAAA"}

package/dist/esm/input/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../packages/input/types.ts"],"sourcesContent":["import { LidoComponentProps } from '@lidofinance/utils'\nimport React, { ChangeEventHandler } from 'react'\nexport type { Theme } from '@lidofinance/theme'\n\nexport enum InputMessageVariant {\n  error,\n  warning,\n  success,\n}\nexport type InputMessageVariants = keyof typeof InputMessageVariant\n\nexport enum InputType {\n  text,\n  password,\n  number,\n  email,\n  search,\n  tel,\n  url,\n}\nexport type InputTypes = keyof typeof InputType\n\nexport enum InputVariant {\n  small,\n  default,\n}\nexport type InputVariants = keyof typeof InputVariant\n\nexport enum InputColor {\n  default,\n  accent,\n}\nexport type InputColors = keyof typeof InputColor\n\ntype CommonProps = {\n  label?: React.ReactNode\n  error?: React.ReactNode | boolean\n  warning?: React.ReactNode | boolean\n  success?: React.ReactNode | boolean\n  variant?: InputVariants\n  color?: InputColors\n  active?: boolean\n  fullwidth?: boolean\n  wrapperRef?: React.RefObject<HTMLLabelElement>\n  as?: never\n}\n\nexport type InputProps = LidoComponentProps<\n  'input',\n  CommonProps & {\n    type?: InputTypes\n    leftDecorator?: React.ReactNode\n    rightDecorator?: React.ReactNode\n  }\n>\n\nexport type TextareaProps = LidoComponentProps<'textarea', CommonProps>\n\nexport type InputGroupProps = LidoComponentProps<\n  'span',\n  {\n    fullwidth?: boolean\n    error?: React.ReactNode\n    success?: React.ReactNode\n  }\n>\n\ntype SliderProps = {\n  value: number\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  min?: number\n  max?: number\n  minLabel?: React.ReactNode\n  maxLabel?: React.ReactNode\n  step?: number\n  getLabel?: (value: number) => React.ReactNode\n}\n\nexport type SliderInputProps = LidoComponentProps<'input', SliderProps>\n\ntype SliderOptionValue = string | number\n\ninterface SliderOption {\n  value: SliderOptionValue\n  label: React.ReactNode\n}\n\ninterface OptionsSliderProps {\n  options: [SliderOption, SliderOption, ...SliderOption[]] // this is declaration like T[] but with \"at least 2 elements\" constraint\n  value?: SliderOptionValue // if value is not provided, component should act isolated; initial value should be first option\n  onChange: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: SliderOptionValue,\n    valueIndex: number\n  ) => unknown\n}\n\nexport type OptionsSliderInputProps = LidoComponentProps<\n  'input',\n  OptionsSliderProps\n>\n"],"names":["React","InputMessageVariant","error","warning","success","InputType","text","password","number","email","search","tel","url","InputVariant","small","default","InputColor","accent"],"mappings":"AACA,OAAOA,KAAK,MAA8B,OAAO,CAAA;WAG1C,mBAIN;UAJWC,mBAAmB;IAAnBA,mBAAmB,CAAnBA,mBAAmB,CAC7BC,OAAK,IAALA,CAAK,IAALA,OAAK;IADKD,mBAAmB,CAAnBA,mBAAmB,CAE7BE,SAAO,IAAPA,CAAO,IAAPA,SAAO;IAFGF,mBAAmB,CAAnBA,mBAAmB,CAG7BG,SAAO,IAAPA,CAAO,IAAPA,SAAO;GAHGH,mBAAmB,KAAnBA,mBAAmB;WAOxB,SAQN;UARWI,SAAS;IAATA,SAAS,CAATA,SAAS,CACnBC,MAAI,IAAJA,CAAI,IAAJA,MAAI;IADMD,SAAS,CAATA,SAAS,CAEnBE,UAAQ,IAARA,CAAQ,IAARA,UAAQ;IAFEF,SAAS,CAATA,SAAS,CAGnBG,QAAM,IAANA,CAAM,IAANA,QAAM;IAHIH,SAAS,CAATA,SAAS,CAInBI,OAAK,IAALA,CAAK,IAALA,OAAK;IAJKJ,SAAS,CAATA,SAAS,CAKnBK,QAAM,IAANA,CAAM,IAANA,QAAM;IALIL,SAAS,CAATA,SAAS,CAMnBM,KAAG,IAAHA,CAAG,IAAHA,KAAG;IANON,SAAS,CAATA,SAAS,CAOnBO,KAAG,IAAHA,CAAG,IAAHA,KAAG;GAPOP,SAAS,KAATA,SAAS;WAWd,YAGN;UAHWQ,YAAY;IAAZA,YAAY,CAAZA,YAAY,CACtBC,OAAK,IAALA,CAAK,IAALA,OAAK;IADKD,YAAY,CAAZA,YAAY,CAEtBE,SAAO,IAAPA,CAAO,IAAPA,SAAO;GAFGF,YAAY,KAAZA,YAAY;WAMjB,UAGN;UAHWG,UAAU;IAAVA,UAAU,CAAVA,UAAU,CACpBD,SAAO,IAAPA,CAAO,IAAPA,SAAO;IADGC,UAAU,CAAVA,UAAU,CAEpBC,QAAM,IAANA,CAAM,IAANA,QAAM;GAFID,UAAU,KAAVA,UAAU"}
+{"version":3,"sources":["../../../packages/input/types.ts"],"sourcesContent":["import { LidoComponentProps } from '@lidofinance/utils'\nimport React, { ChangeEventHandler } from 'react'\nexport type { Theme } from '@lidofinance/theme'\n\nexport enum InputMessageVariant {\n  error,\n  warning,\n  success,\n}\nexport type InputMessageVariants = keyof typeof InputMessageVariant\n\nexport enum InputType {\n  text,\n  password,\n  number,\n  email,\n  search,\n  tel,\n  url,\n}\nexport type InputTypes = keyof typeof InputType\n\nexport enum InputVariant {\n  small,\n  default,\n}\nexport type InputVariants = keyof typeof InputVariant\n\nexport enum InputColor {\n  default,\n  accent,\n}\nexport type InputColors = keyof typeof InputColor\n\ntype CommonProps = {\n  label?: React.ReactNode\n  error?: React.ReactNode | boolean\n  warning?: React.ReactNode | boolean\n  success?: React.ReactNode | boolean\n  variant?: InputVariants\n  color?: InputColors\n  active?: boolean\n  fullwidth?: boolean\n  wrapperRef?: React.RefObject<HTMLLabelElement>\n  as?: never\n}\n\nexport type InputProps = LidoComponentProps<\n  'input',\n  CommonProps & {\n    type?: InputTypes\n    leftDecorator?: React.ReactNode\n    rightDecorator?: React.ReactNode\n  }\n>\n\nexport type TextareaProps = LidoComponentProps<'textarea', CommonProps>\n\nexport type InputGroupProps = LidoComponentProps<\n  'span',\n  {\n    fullwidth?: boolean\n    error?: React.ReactNode\n    success?: React.ReactNode\n  }\n>\n\ninterface ValueLabel {\n  value: number\n  label: React.ReactNode\n}\n\ntype SliderProps = {\n  value: number\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  min?: number\n  max?: number\n  minLabel?: React.ReactNode\n  maxLabel?: React.ReactNode\n  step?: number\n  getLabel?: (value: number) => React.ReactNode\n  borderNone?: boolean\n  labels?: ValueLabel[]\n  onLabelClick?: (value: number) => unknown\n}\n\nexport type SliderInputProps = LidoComponentProps<'input', SliderProps>\n\ntype SliderOptionValue = string | number\n\ninterface SliderOption {\n  value: SliderOptionValue\n  label: React.ReactNode\n}\n\ninterface OptionsSliderProps {\n  options: [SliderOption, SliderOption, ...SliderOption[]] // this is declaration like T[] but with \"at least 2 elements\" constraint\n  value?: SliderOptionValue // if value is not provided, component should act isolated; initial value should be first option\n  onChange: (value: SliderOptionValue, valueIndex: number) => unknown\n}\n\nexport type OptionsSliderInputProps = LidoComponentProps<\n  'input',\n  OptionsSliderProps\n>\n"],"names":["React","InputMessageVariant","error","warning","success","InputType","text","password","number","email","search","tel","url","InputVariant","small","default","InputColor","accent"],"mappings":"AACA,OAAOA,KAAK,MAA8B,OAAO,CAAA;WAG1C,mBAIN;UAJWC,mBAAmB;IAAnBA,mBAAmB,CAAnBA,mBAAmB,CAC7BC,OAAK,IAALA,CAAK,IAALA,OAAK;IADKD,mBAAmB,CAAnBA,mBAAmB,CAE7BE,SAAO,IAAPA,CAAO,IAAPA,SAAO;IAFGF,mBAAmB,CAAnBA,mBAAmB,CAG7BG,SAAO,IAAPA,CAAO,IAAPA,SAAO;GAHGH,mBAAmB,KAAnBA,mBAAmB;WAOxB,SAQN;UARWI,SAAS;IAATA,SAAS,CAATA,SAAS,CACnBC,MAAI,IAAJA,CAAI,IAAJA,MAAI;IADMD,SAAS,CAATA,SAAS,CAEnBE,UAAQ,IAARA,CAAQ,IAARA,UAAQ;IAFEF,SAAS,CAATA,SAAS,CAGnBG,QAAM,IAANA,CAAM,IAANA,QAAM;IAHIH,SAAS,CAATA,SAAS,CAInBI,OAAK,IAALA,CAAK,IAALA,OAAK;IAJKJ,SAAS,CAATA,SAAS,CAKnBK,QAAM,IAANA,CAAM,IAANA,QAAM;IALIL,SAAS,CAATA,SAAS,CAMnBM,KAAG,IAAHA,CAAG,IAAHA,KAAG;IANON,SAAS,CAATA,SAAS,CAOnBO,KAAG,IAAHA,CAAG,IAAHA,KAAG;GAPOP,SAAS,KAATA,SAAS;WAWd,YAGN;UAHWQ,YAAY;IAAZA,YAAY,CAAZA,YAAY,CACtBC,OAAK,IAALA,CAAK,IAALA,OAAK;IADKD,YAAY,CAAZA,YAAY,CAEtBE,SAAO,IAAPA,CAAO,IAAPA,SAAO;GAFGF,YAAY,KAAZA,YAAY;WAMjB,UAGN;UAHWG,UAAU;IAAVA,UAAU,CAAVA,UAAU,CACpBD,SAAO,IAAPA,CAAO,IAAPA,SAAO;IADGC,UAAU,CAAVA,UAAU,CAEpBC,QAAM,IAANA,CAAM,IAANA,QAAM;GAFID,UAAU,KAAVA,UAAU"}

package/dist/esm/theme/base/colors.js

@@ -22,6 +22,8 @@ const colors = {
     warning: '#EC8600',
     warningHover: '#f0a431',
     warningContrast: '#fff',
+    warningBackground: '#FFFAE0',
+    textDark: '#273852',
     success: '#53BA95',
     successHover: '#5dae5e',
     successContrast: '#fff'

package/dist/esm/theme/base/colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../packages/theme/base/colors.ts"],"sourcesContent":["const colors = {\n  darkThemeOpacity: '0',\n  lightThemeOpacity: '1',\n\n  lightModeVisibility: 'visible',\n  darkModeVisibility: 'hidden',\n\n  lightDisplay: 'initial',\n  darkDisplay: 'none',\n\n  primary: '#00a3ff',\n  primaryHover: '#009bf2',\n  primaryContrast: '#fff',\n  primaryVisited: '#4bbeff',\n\n  accent: '#27272e',\n  accentContrast: '#fff',\n  accentContrastSecondary: 'rgba(255, 255, 255, 0.6)',\n  accentDarken: 'rgba(0, 0, 0, .2)',\n  accentControlBg: 'rgba(0, 0, 0, .1)',\n  accentBorder: 'rgba(255, 255, 255, 0.2)',\n  accentBorderHover: 'rgba(255, 255, 255, 0.3)',\n\n  error: '#e14d4d',\n  errorHover: '#d44c4d',\n  errorContrast: '#fff',\n\n  warning: '#EC8600',\n  warningHover: '#f0a431',\n  warningContrast: '#fff',\n\n  success: '#53BA95',\n  successHover: '#5dae5e',\n  successContrast: '#fff',\n} as const\n\nexport default { colors }\n"],"names":["colors","darkThemeOpacity","lightThemeOpacity","lightModeVisibility","darkModeVisibility","lightDisplay","darkDisplay","primary","primaryHover","primaryContrast","primaryVisited","accent","accentContrast","accentContrastSecondary","accentDarken","accentControlBg","accentBorder","accentBorderHover","error","errorHover","errorContrast","warning","warningHover","warningContrast","success","successHover","successContrast"],"mappings":"AAAA,MAAMA,MAAM,GAAG;IACbC,gBAAgB,EAAE,GAAG;IACrBC,iBAAiB,EAAE,GAAG;IAEtBC,mBAAmB,EAAE,SAAS;IAC9BC,kBAAkB,EAAE,QAAQ;IAE5BC,YAAY,EAAE,SAAS;IACvBC,WAAW,EAAE,MAAM;IAEnBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IACvBC,cAAc,EAAE,SAAS;IAEzBC,MAAM,EAAE,SAAS;IACjBC,cAAc,EAAE,MAAM;IACtBC,uBAAuB,EAAE,0BAA0B;IACnDC,YAAY,EAAE,mBAAmB;IACjCC,eAAe,EAAE,mBAAmB;IACpCC,YAAY,EAAE,0BAA0B;IACxCC,iBAAiB,EAAE,0BAA0B;IAE7CC,KAAK,EAAE,SAAS;IAChBC,UAAU,EAAE,SAAS;IACrBC,aAAa,EAAE,MAAM;IAErBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IAEvBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;CACxB,AAAS;AAEV,eAAe;IAAE1B,MAAM;CAAE,CAAA"}
+{"version":3,"sources":["../../../../packages/theme/base/colors.ts"],"sourcesContent":["const colors = {\n  darkThemeOpacity: '0',\n  lightThemeOpacity: '1',\n\n  lightModeVisibility: 'visible',\n  darkModeVisibility: 'hidden',\n\n  lightDisplay: 'initial',\n  darkDisplay: 'none',\n\n  primary: '#00a3ff',\n  primaryHover: '#009bf2',\n  primaryContrast: '#fff',\n  primaryVisited: '#4bbeff',\n\n  accent: '#27272e',\n  accentContrast: '#fff',\n  accentContrastSecondary: 'rgba(255, 255, 255, 0.6)',\n  accentDarken: 'rgba(0, 0, 0, .2)',\n  accentControlBg: 'rgba(0, 0, 0, .1)',\n  accentBorder: 'rgba(255, 255, 255, 0.2)',\n  accentBorderHover: 'rgba(255, 255, 255, 0.3)',\n\n  error: '#e14d4d',\n  errorHover: '#d44c4d',\n  errorContrast: '#fff',\n\n  warning: '#EC8600',\n  warningHover: '#f0a431',\n  warningContrast: '#fff',\n  warningBackground: '#FFFAE0',\n\n  textDark: '#273852',\n\n  success: '#53BA95',\n  successHover: '#5dae5e',\n  successContrast: '#fff',\n} as const\n\nexport default { colors }\n"],"names":["colors","darkThemeOpacity","lightThemeOpacity","lightModeVisibility","darkModeVisibility","lightDisplay","darkDisplay","primary","primaryHover","primaryContrast","primaryVisited","accent","accentContrast","accentContrastSecondary","accentDarken","accentControlBg","accentBorder","accentBorderHover","error","errorHover","errorContrast","warning","warningHover","warningContrast","warningBackground","textDark","success","successHover","successContrast"],"mappings":"AAAA,MAAMA,MAAM,GAAG;IACbC,gBAAgB,EAAE,GAAG;IACrBC,iBAAiB,EAAE,GAAG;IAEtBC,mBAAmB,EAAE,SAAS;IAC9BC,kBAAkB,EAAE,QAAQ;IAE5BC,YAAY,EAAE,SAAS;IACvBC,WAAW,EAAE,MAAM;IAEnBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IACvBC,cAAc,EAAE,SAAS;IAEzBC,MAAM,EAAE,SAAS;IACjBC,cAAc,EAAE,MAAM;IACtBC,uBAAuB,EAAE,0BAA0B;IACnDC,YAAY,EAAE,mBAAmB;IACjCC,eAAe,EAAE,mBAAmB;IACpCC,YAAY,EAAE,0BAA0B;IACxCC,iBAAiB,EAAE,0BAA0B;IAE7CC,KAAK,EAAE,SAAS;IAChBC,UAAU,EAAE,SAAS;IACrBC,aAAa,EAAE,MAAM;IAErBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IACvBC,iBAAiB,EAAE,SAAS;IAE5BC,QAAQ,EAAE,SAAS;IAEnBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;CACxB,AAAS;AAEV,eAAe;IAAE5B,MAAM;CAAE,CAAA"}

package/dist/esm/theme/themes.js

@@ -16,6 +16,7 @@ export const themeLight = {
         secondaryContrast: '#fff',
         background: '#f2f4f6',
         backgroundDarken: '#dae0e5',
+        backgroundSecondary: '#EFF2F6',
         foreground: '#fff',
         overlay: 'rgba(0, 0, 0, 0.5)',
         shadowLight: 'rgba(39, 56, 82, 0.08)',
@@ -50,6 +51,7 @@ export const themeDark = {
         secondaryContrast: '#273852',
         background: '#1c1c21',
         backgroundDarken: '#131317',
+        backgroundSecondary: '#27272E',
         foreground: '#34343d',
         overlay: 'rgba(0, 0, 0, 0.5)',
         shadowLight: 'rgba(0, 0, 0, .25)',

package/dist/esm/theme/themes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../packages/theme/themes.ts"],"sourcesContent":["import themeBase from './base'\nimport { ThemeName } from './constants'\n\nexport const themeLight = {\n  ...themeBase,\n  name: ThemeName.light,\n  colors: {\n    ...themeBase.colors,\n    darkThemeOpacity: '0',\n    lightThemeOpacity: '1',\n\n    lightModeVisibility: 'visible',\n    darkModeVisibility: 'hidden',\n\n    lightDisplay: 'initial',\n    darkDisplay: 'none',\n\n    secondary: '#273852',\n    secondaryHover: '#212f45',\n    secondaryContrast: '#fff',\n\n    background: '#f2f4f6',\n    backgroundDarken: '#dae0e5',\n\n    foreground: '#fff',\n\n    overlay: 'rgba(0, 0, 0, 0.5)',\n\n    shadowLight: 'rgba(39, 56, 82, 0.08)',\n    shadowDark: 'rgba(0, 0, 0, .25)',\n\n    text: '#273852',\n    textSecondary: '#7a8aa0',\n    accentText: '#273852',\n\n    border: 'rgba(0, 10, 61, 0.12)',\n    borderActive: 'rgba(0, 10, 61, 0.48)',\n    borderHover: 'rgba(0, 10, 61, 0.24)',\n    borderLight: '#dfe5eb',\n    accentBorder: 'rgba(0, 10, 61, 0.12)',\n    accentBorderHover: 'rgba(0, 10, 61, 0.24)',\n\n    controlBg: '#fff',\n    accentControlBg: 'rgba(239, 242, 246, 0.56)',\n\n    popupMenuItemBgActiveHover: '#000a3d',\n  },\n}\n\nexport const themeDark = {\n  ...themeBase,\n  name: ThemeName.dark,\n  colors: {\n    ...themeBase.colors,\n    darkThemeOpacity: '1',\n    lightThemeOpacity: '0',\n\n    lightModeVisibility: 'hidden',\n    darkModeVisibility: 'visible',\n\n    lightDisplay: 'none',\n    darkDisplay: 'initial',\n\n    secondary: 'rgba(255, 255, 255, .8)',\n    secondaryHover: '#fff',\n    secondaryContrast: '#273852',\n\n    background: '#1c1c21',\n    backgroundDarken: '#131317',\n\n    foreground: '#34343d',\n\n    overlay: 'rgba(0, 0, 0, 0.5)',\n\n    shadowLight: 'rgba(0, 0, 0, .25)',\n    shadowDark: 'rgba(0, 0, 0, .5)',\n\n    text: '#fff',\n    textSecondary: 'rgba(255, 255, 255, .8)',\n    accentText: '#fff',\n\n    border: 'rgba(255, 255, 255, 0.12)',\n    borderActive: 'rgba(255, 255, 255, 0.48)',\n    borderHover: 'rgba(255, 255, 255, 0.24)',\n    borderLight: '#484855',\n    accentBorder: 'rgba(255, 255, 255, 0.12)',\n    accentBorderHover: 'rgba(255, 255, 255, 0.24)',\n\n    controlBg: '#2f2f37',\n    accentControlBg: 'rgba(39, 39, 46, 0.56)',\n\n    popupMenuItemBgActiveHover: '#fff',\n  },\n}\n\nexport const themeMap = {\n  [ThemeName.light]: themeLight,\n  [ThemeName.dark]: themeDark,\n}\n\nexport const reverseThemeMap = new WeakMap([\n  [themeLight, ThemeName.light],\n  [themeDark, ThemeName.dark],\n])\n\nexport const themeDefault = themeLight\n"],"names":["themeBase","ThemeName","themeLight","name","light","colors","darkThemeOpacity","lightThemeOpacity","lightModeVisibility","darkModeVisibility","lightDisplay","darkDisplay","secondary","secondaryHover","secondaryContrast","background","backgroundDarken","foreground","overlay","shadowLight","shadowDark","text","textSecondary","accentText","border","borderActive","borderHover","borderLight","accentBorder","accentBorderHover","controlBg","accentControlBg","popupMenuItemBgActiveHover","themeDark","dark","themeMap","reverseThemeMap","WeakMap","themeDefault"],"mappings":"AAAA,OAAOA,SAAS,MAAM,cAAQ,CAAA;AAC9B,SAASC,SAAS,QAAQ,aAAa,CAAA;AAEvC,OAAO,MAAMC,UAAU,GAAG;IACxB,GAAGF,SAAS;IACZG,IAAI,EAAEF,SAAS,CAACG,KAAK;IACrBC,MAAM,EAAE;QACN,GAAGL,SAAS,CAACK,MAAM;QACnBC,gBAAgB,EAAE,GAAG;QACrBC,iBAAiB,EAAE,GAAG;QAEtBC,mBAAmB,EAAE,SAAS;QAC9BC,kBAAkB,EAAE,QAAQ;QAE5BC,YAAY,EAAE,SAAS;QACvBC,WAAW,EAAE,MAAM;QAEnBC,SAAS,EAAE,SAAS;QACpBC,cAAc,EAAE,SAAS;QACzBC,iBAAiB,EAAE,MAAM;QAEzBC,UAAU,EAAE,SAAS;QACrBC,gBAAgB,EAAE,SAAS;QAE3BC,UAAU,EAAE,MAAM;QAElBC,OAAO,EAAE,oBAAoB;QAE7BC,WAAW,EAAE,wBAAwB;QACrCC,UAAU,EAAE,oBAAoB;QAEhCC,IAAI,EAAE,SAAS;QACfC,aAAa,EAAE,SAAS;QACxBC,UAAU,EAAE,SAAS;QAErBC,MAAM,EAAE,uBAAuB;QAC/BC,YAAY,EAAE,uBAAuB;QACrCC,WAAW,EAAE,uBAAuB;QACpCC,WAAW,EAAE,SAAS;QACtBC,YAAY,EAAE,uBAAuB;QACrCC,iBAAiB,EAAE,uBAAuB;QAE1CC,SAAS,EAAE,MAAM;QACjBC,eAAe,EAAE,2BAA2B;QAE5CC,0BAA0B,EAAE,SAAS;KACtC;CACF,CAAA;AAED,OAAO,MAAMC,SAAS,GAAG;IACvB,GAAGjC,SAAS;IACZG,IAAI,EAAEF,SAAS,CAACiC,IAAI;IACpB7B,MAAM,EAAE;QACN,GAAGL,SAAS,CAACK,MAAM;QACnBC,gBAAgB,EAAE,GAAG;QACrBC,iBAAiB,EAAE,GAAG;QAEtBC,mBAAmB,EAAE,QAAQ;QAC7BC,kBAAkB,EAAE,SAAS;QAE7BC,YAAY,EAAE,MAAM;QACpBC,WAAW,EAAE,SAAS;QAEtBC,SAAS,EAAE,yBAAyB;QACpCC,cAAc,EAAE,MAAM;QACtBC,iBAAiB,EAAE,SAAS;QAE5BC,UAAU,EAAE,SAAS;QACrBC,gBAAgB,EAAE,SAAS;QAE3BC,UAAU,EAAE,SAAS;QAErBC,OAAO,EAAE,oBAAoB;QAE7BC,WAAW,EAAE,oBAAoB;QACjCC,UAAU,EAAE,mBAAmB;QAE/BC,IAAI,EAAE,MAAM;QACZC,aAAa,EAAE,yBAAyB;QACxCC,UAAU,EAAE,MAAM;QAElBC,MAAM,EAAE,2BAA2B;QACnCC,YAAY,EAAE,2BAA2B;QACzCC,WAAW,EAAE,2BAA2B;QACxCC,WAAW,EAAE,SAAS;QACtBC,YAAY,EAAE,2BAA2B;QACzCC,iBAAiB,EAAE,2BAA2B;QAE9CC,SAAS,EAAE,SAAS;QACpBC,eAAe,EAAE,wBAAwB;QAEzCC,0BAA0B,EAAE,MAAM;KACnC;CACF,CAAA;AAED,OAAO,MAAMG,QAAQ,GAAG;IACtB,CAAClC,SAAS,CAACG,KAAK,CAAC,EAAEF,UAAU;IAC7B,CAACD,SAAS,CAACiC,IAAI,CAAC,EAAED,SAAS;CAC5B,CAAA;AAED,OAAO,MAAMG,eAAe,GAAG,IAAIC,OAAO,CAAC;IACzC;QAACnC,UAAU;QAAED,SAAS,CAACG,KAAK;KAAC;IAC7B;QAAC6B,SAAS;QAAEhC,SAAS,CAACiC,IAAI;KAAC;CAC5B,CAAC,CAAA;AAEF,OAAO,MAAMI,YAAY,GAAGpC,UAAU,CAAA"}
+{"version":3,"sources":["../../../packages/theme/themes.ts"],"sourcesContent":["import themeBase from './base'\nimport { ThemeName } from './constants'\n\nexport const themeLight = {\n  ...themeBase,\n  name: ThemeName.light,\n  colors: {\n    ...themeBase.colors,\n    darkThemeOpacity: '0',\n    lightThemeOpacity: '1',\n\n    lightModeVisibility: 'visible',\n    darkModeVisibility: 'hidden',\n\n    lightDisplay: 'initial',\n    darkDisplay: 'none',\n\n    secondary: '#273852',\n    secondaryHover: '#212f45',\n    secondaryContrast: '#fff',\n\n    background: '#f2f4f6',\n    backgroundDarken: '#dae0e5',\n    backgroundSecondary: '#EFF2F6',\n\n    foreground: '#fff',\n\n    overlay: 'rgba(0, 0, 0, 0.5)',\n\n    shadowLight: 'rgba(39, 56, 82, 0.08)',\n    shadowDark: 'rgba(0, 0, 0, .25)',\n\n    text: '#273852',\n    textSecondary: '#7a8aa0',\n    accentText: '#273852',\n\n    border: 'rgba(0, 10, 61, 0.12)',\n    borderActive: 'rgba(0, 10, 61, 0.48)',\n    borderHover: 'rgba(0, 10, 61, 0.24)',\n    borderLight: '#dfe5eb',\n    accentBorder: 'rgba(0, 10, 61, 0.12)',\n    accentBorderHover: 'rgba(0, 10, 61, 0.24)',\n\n    controlBg: '#fff',\n    accentControlBg: 'rgba(239, 242, 246, 0.56)',\n\n    popupMenuItemBgActiveHover: '#000a3d',\n  },\n}\n\nexport const themeDark = {\n  ...themeBase,\n  name: ThemeName.dark,\n  colors: {\n    ...themeBase.colors,\n    darkThemeOpacity: '1',\n    lightThemeOpacity: '0',\n\n    lightModeVisibility: 'hidden',\n    darkModeVisibility: 'visible',\n\n    lightDisplay: 'none',\n    darkDisplay: 'initial',\n\n    secondary: 'rgba(255, 255, 255, .8)',\n    secondaryHover: '#fff',\n    secondaryContrast: '#273852',\n\n    background: '#1c1c21',\n    backgroundDarken: '#131317',\n    backgroundSecondary: '#27272E',\n\n    foreground: '#34343d',\n\n    overlay: 'rgba(0, 0, 0, 0.5)',\n\n    shadowLight: 'rgba(0, 0, 0, .25)',\n    shadowDark: 'rgba(0, 0, 0, .5)',\n\n    text: '#fff',\n    textSecondary: 'rgba(255, 255, 255, .8)',\n    accentText: '#fff',\n\n    border: 'rgba(255, 255, 255, 0.12)',\n    borderActive: 'rgba(255, 255, 255, 0.48)',\n    borderHover: 'rgba(255, 255, 255, 0.24)',\n    borderLight: '#484855',\n    accentBorder: 'rgba(255, 255, 255, 0.12)',\n    accentBorderHover: 'rgba(255, 255, 255, 0.24)',\n\n    controlBg: '#2f2f37',\n    accentControlBg: 'rgba(39, 39, 46, 0.56)',\n\n    popupMenuItemBgActiveHover: '#fff',\n  },\n}\n\nexport const themeMap = {\n  [ThemeName.light]: themeLight,\n  [ThemeName.dark]: themeDark,\n}\n\nexport const reverseThemeMap = new WeakMap([\n  [themeLight, ThemeName.light],\n  [themeDark, ThemeName.dark],\n])\n\nexport const themeDefault = themeLight\n"],"names":["themeBase","ThemeName","themeLight","name","light","colors","darkThemeOpacity","lightThemeOpacity","lightModeVisibility","darkModeVisibility","lightDisplay","darkDisplay","secondary","secondaryHover","secondaryContrast","background","backgroundDarken","backgroundSecondary","foreground","overlay","shadowLight","shadowDark","text","textSecondary","accentText","border","borderActive","borderHover","borderLight","accentBorder","accentBorderHover","controlBg","accentControlBg","popupMenuItemBgActiveHover","themeDark","dark","themeMap","reverseThemeMap","WeakMap","themeDefault"],"mappings":"AAAA,OAAOA,SAAS,MAAM,cAAQ,CAAA;AAC9B,SAASC,SAAS,QAAQ,aAAa,CAAA;AAEvC,OAAO,MAAMC,UAAU,GAAG;IACxB,GAAGF,SAAS;IACZG,IAAI,EAAEF,SAAS,CAACG,KAAK;IACrBC,MAAM,EAAE;QACN,GAAGL,SAAS,CAACK,MAAM;QACnBC,gBAAgB,EAAE,GAAG;QACrBC,iBAAiB,EAAE,GAAG;QAEtBC,mBAAmB,EAAE,SAAS;QAC9BC,kBAAkB,EAAE,QAAQ;QAE5BC,YAAY,EAAE,SAAS;QACvBC,WAAW,EAAE,MAAM;QAEnBC,SAAS,EAAE,SAAS;QACpBC,cAAc,EAAE,SAAS;QACzBC,iBAAiB,EAAE,MAAM;QAEzBC,UAAU,EAAE,SAAS;QACrBC,gBAAgB,EAAE,SAAS;QAC3BC,mBAAmB,EAAE,SAAS;QAE9BC,UAAU,EAAE,MAAM;QAElBC,OAAO,EAAE,oBAAoB;QAE7BC,WAAW,EAAE,wBAAwB;QACrCC,UAAU,EAAE,oBAAoB;QAEhCC,IAAI,EAAE,SAAS;QACfC,aAAa,EAAE,SAAS;QACxBC,UAAU,EAAE,SAAS;QAErBC,MAAM,EAAE,uBAAuB;QAC/BC,YAAY,EAAE,uBAAuB;QACrCC,WAAW,EAAE,uBAAuB;QACpCC,WAAW,EAAE,SAAS;QACtBC,YAAY,EAAE,uBAAuB;QACrCC,iBAAiB,EAAE,uBAAuB;QAE1CC,SAAS,EAAE,MAAM;QACjBC,eAAe,EAAE,2BAA2B;QAE5CC,0BAA0B,EAAE,SAAS;KACtC;CACF,CAAA;AAED,OAAO,MAAMC,SAAS,GAAG;IACvB,GAAGlC,SAAS;IACZG,IAAI,EAAEF,SAAS,CAACkC,IAAI;IACpB9B,MAAM,EAAE;QACN,GAAGL,SAAS,CAACK,MAAM;QACnBC,gBAAgB,EAAE,GAAG;QACrBC,iBAAiB,EAAE,GAAG;QAEtBC,mBAAmB,EAAE,QAAQ;QAC7BC,kBAAkB,EAAE,SAAS;QAE7BC,YAAY,EAAE,MAAM;QACpBC,WAAW,EAAE,SAAS;QAEtBC,SAAS,EAAE,yBAAyB;QACpCC,cAAc,EAAE,MAAM;QACtBC,iBAAiB,EAAE,SAAS;QAE5BC,UAAU,EAAE,SAAS;QACrBC,gBAAgB,EAAE,SAAS;QAC3BC,mBAAmB,EAAE,SAAS;QAE9BC,UAAU,EAAE,SAAS;QAErBC,OAAO,EAAE,oBAAoB;QAE7BC,WAAW,EAAE,oBAAoB;QACjCC,UAAU,EAAE,mBAAmB;QAE/BC,IAAI,EAAE,MAAM;QACZC,aAAa,EAAE,yBAAyB;QACxCC,UAAU,EAAE,MAAM;QAElBC,MAAM,EAAE,2BAA2B;QACnCC,YAAY,EAAE,2BAA2B;QACzCC,WAAW,EAAE,2BAA2B;QACxCC,WAAW,EAAE,SAAS;QACtBC,YAAY,EAAE,2BAA2B;QACzCC,iBAAiB,EAAE,2BAA2B;QAE9CC,SAAS,EAAE,SAAS;QACpBC,eAAe,EAAE,wBAAwB;QAEzCC,0BAA0B,EAAE,MAAM;KACnC;CACF,CAAA;AAED,OAAO,MAAMG,QAAQ,GAAG;IACtB,CAACnC,SAAS,CAACG,KAAK,CAAC,EAAEF,UAAU;IAC7B,CAACD,SAAS,CAACkC,IAAI,CAAC,EAAED,SAAS;CAC5B,CAAA;AAED,OAAO,MAAMG,eAAe,GAAG,IAAIC,OAAO,CAAC;IACzC;QAACpC,UAAU;QAAED,SAAS,CAACG,KAAK;KAAC;IAC7B;QAAC8B,SAAS;QAAEjC,SAAS,CAACkC,IAAI;KAAC;CAC5B,CAAC,CAAA;AAEF,OAAO,MAAMI,YAAY,GAAGrC,UAAU,CAAA"}

package/dist/types/input/OptionsSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OptionsSlider.d.ts","sourceRoot":"","sources":["../../../packages/input/OptionsSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAEjD,QAAA,MAAM,aAAa,kCAIhB,uBAAuB,KAAG,MAAM,YA+BlC,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"OptionsSlider.d.ts","sourceRoot":"","sources":["../../../packages/input/OptionsSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAEjD,QAAA,MAAM,aAAa,kCAIhB,uBAAuB,KAAG,MAAM,YAiClC,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/types/input/SliderInput.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { SliderInputProps } from './types';
-declare function SliderInput({ value, onChange, min, max, step, minLabel, maxLabel, getLabel, }: SliderInputProps): React.ReactElement;
+declare function SliderInput({ value, onChange, onLabelClick, min, max, step, minLabel, maxLabel, getLabel, borderNone, labels, }: SliderInputProps): React.ReactElement;
 export default SliderInput;
 //# sourceMappingURL=SliderInput.d.ts.map

package/dist/types/input/SliderInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SliderInput.d.ts","sourceRoot":"","sources":["../../../packages/input/SliderInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE1C,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,QAAQ,EACR,GAAO,EACP,GAAS,EACT,IAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAA+B,GAChC,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAqBvC;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"SliderInput.d.ts","sourceRoot":"","sources":["../../../packages/input/SliderInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE1C,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,GAAO,EACP,GAAS,EACT,IAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAA+B,EAC/B,UAAU,EACV,MAAM,GACP,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAqCvC;AAED,eAAe,WAAW,CAAA"}

package/dist/types/input/SliderInputStyles.d.ts

@@ -3,9 +3,13 @@ export declare const RangeInputSlider: import("styled-components").StyledCompone
 }, "type">;
 export declare const Track: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     fillPercentage: number;
+    borderNone?: boolean | undefined;
+}, never>;
+export declare const Slider: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    borderNone?: boolean | undefined;
 }, never>;
-export declare const Slider: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const SliderWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const LabelContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const Label: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const LabelButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=SliderInputStyles.d.ts.map

package/dist/types/input/SliderInputStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SliderInputStyles.d.ts","sourceRoot":"","sources":["../../../packages/input/SliderInputStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB;;UA4D5B,CAAA;AAED,eAAO,MAAM,KAAK;oBAAgC,MAAM;SAkBvD,CAAA;AAED,eAAO,MAAM,MAAM,yGAalB,CAAA;AAED,eAAO,MAAM,aAAa,yGAEzB,CAAA;AAED,eAAO,MAAM,cAAc,yGAI1B,CAAA;AAED,eAAO,MAAM,KAAK,0GAOjB,CAAA"}
+{"version":3,"file":"SliderInputStyles.d.ts","sourceRoot":"","sources":["../../../packages/input/SliderInputStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB;;UA4D5B,CAAA;AAED,eAAO,MAAM,KAAK;oBACA,MAAM;;SA0BvB,CAAA;AAED,eAAO,MAAM,MAAM;;SAuBlB,CAAA;AAED,eAAO,MAAM,aAAa,yGAEzB,CAAA;AAED,eAAO,MAAM,cAAc,yGAI1B,CAAA;AAED,eAAO,MAAM,KAAK,0GAOjB,CAAA;AAED,eAAO,MAAM,WAAW,4GAUvB,CAAA"}

package/dist/types/input/types.d.ts

@@ -50,6 +50,10 @@ export declare type InputGroupProps = LidoComponentProps<'span', {
     error?: React.ReactNode;
     success?: React.ReactNode;
 }>;
+interface ValueLabel {
+    value: number;
+    label: React.ReactNode;
+}
 declare type SliderProps = {
     value: number;
     onChange?: ChangeEventHandler<HTMLInputElement>;
@@ -59,6 +63,9 @@ declare type SliderProps = {
     maxLabel?: React.ReactNode;
     step?: number;
     getLabel?: (value: number) => React.ReactNode;
+    borderNone?: boolean;
+    labels?: ValueLabel[];
+    onLabelClick?: (value: number) => unknown;
 };
 export declare type SliderInputProps = LidoComponentProps<'input', SliderProps>;
 declare type SliderOptionValue = string | number;
@@ -69,7 +76,7 @@ interface SliderOption {
 interface OptionsSliderProps {
     options: [SliderOption, SliderOption, ...SliderOption[]];
     value?: SliderOptionValue;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>, value: SliderOptionValue, valueIndex: number) => unknown;
+    onChange: (value: SliderOptionValue, valueIndex: number) => unknown;
 }
 export declare type OptionsSliderInputProps = LidoComponentProps<'input', OptionsSliderProps>;
 //# sourceMappingURL=types.d.ts.map

package/dist/types/input/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../packages/input/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../packages/input/types.ts"],"names":[],"mappings":"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"}

package/dist/types/theme/base/colors.d.ts

@@ -23,6 +23,8 @@ declare const _default: {
         readonly warning: "#EC8600";
         readonly warningHover: "#f0a431";
         readonly warningContrast: "#fff";
+        readonly warningBackground: "#FFFAE0";
+        readonly textDark: "#273852";
         readonly success: "#53BA95";
         readonly successHover: "#5dae5e";
         readonly successContrast: "#fff";

package/dist/types/theme/base/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../packages/theme/base/colors.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,wBAAyB"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../packages/theme/base/colors.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,wBAAyB"}

package/dist/types/theme/base/index.d.ts

@@ -83,6 +83,8 @@ declare const _default: {
         readonly warning: "#EC8600";
         readonly warningHover: "#f0a431";
         readonly warningContrast: "#fff";
+        readonly warningBackground: "#FFFAE0";
+        readonly textDark: "#273852";
         readonly success: "#53BA95";
         readonly successHover: "#5dae5e";
         readonly successContrast: "#fff";

package/dist/types/theme/base/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/theme/base/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBAQC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/theme/base/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBAQC"}

package/dist/types/theme/themes.d.ts

@@ -13,6 +13,7 @@ export declare const themeLight: {
         secondaryContrast: string;
         background: string;
         backgroundDarken: string;
+        backgroundSecondary: string;
         foreground: string;
         overlay: string;
         shadowLight: string;
@@ -43,6 +44,8 @@ export declare const themeLight: {
         warning: "#EC8600";
         warningHover: "#f0a431";
         warningContrast: "#fff";
+        warningBackground: "#FFFAE0";
+        textDark: "#273852";
         success: "#53BA95";
         successHover: "#5dae5e";
         successContrast: "#fff";
@@ -156,6 +159,7 @@ export declare const themeDark: {
         secondaryContrast: string;
         background: string;
         backgroundDarken: string;
+        backgroundSecondary: string;
         foreground: string;
         overlay: string;
         shadowLight: string;
@@ -186,6 +190,8 @@ export declare const themeDark: {
         warning: "#EC8600";
         warningHover: "#f0a431";
         warningContrast: "#fff";
+        warningBackground: "#FFFAE0";
+        textDark: "#273852";
         success: "#53BA95";
         successHover: "#5dae5e";
         successContrast: "#fff";
@@ -300,6 +306,7 @@ export declare const themeMap: {
             secondaryContrast: string;
             background: string;
             backgroundDarken: string;
+            backgroundSecondary: string;
             foreground: string;
             overlay: string;
             shadowLight: string;
@@ -330,6 +337,8 @@ export declare const themeMap: {
             warning: "#EC8600";
             warningHover: "#f0a431";
             warningContrast: "#fff";
+            warningBackground: "#FFFAE0";
+            textDark: "#273852";
             success: "#53BA95";
             successHover: "#5dae5e";
             successContrast: "#fff";
@@ -443,6 +452,7 @@ export declare const themeMap: {
             secondaryContrast: string;
             background: string;
             backgroundDarken: string;
+            backgroundSecondary: string;
             foreground: string;
             overlay: string;
             shadowLight: string;
@@ -473,6 +483,8 @@ export declare const themeMap: {
             warning: "#EC8600";
             warningHover: "#f0a431";
             warningContrast: "#fff";
+            warningBackground: "#FFFAE0";
+            textDark: "#273852";
             success: "#53BA95";
             successHover: "#5dae5e";
             successContrast: "#fff";
@@ -587,6 +599,7 @@ export declare const reverseThemeMap: WeakMap<{
         secondaryContrast: string;
         background: string;
         backgroundDarken: string;
+        backgroundSecondary: string;
         foreground: string;
         overlay: string;
         shadowLight: string;
@@ -617,6 +630,8 @@ export declare const reverseThemeMap: WeakMap<{
         warning: "#EC8600";
         warningHover: "#f0a431";
         warningContrast: "#fff";
+        warningBackground: "#FFFAE0";
+        textDark: "#273852";
         success: "#53BA95";
         successHover: "#5dae5e";
         successContrast: "#fff";
@@ -730,6 +745,7 @@ export declare const themeDefault: {
         secondaryContrast: string;
         background: string;
         backgroundDarken: string;
+        backgroundSecondary: string;
         foreground: string;
         overlay: string;
         shadowLight: string;
@@ -760,6 +776,8 @@ export declare const themeDefault: {
         warning: "#EC8600";
         warningHover: "#f0a431";
         warningContrast: "#fff";
+        warningBackground: "#FFFAE0";
+        textDark: "#273852";
         success: "#53BA95";
         successHover: "#5dae5e";
         successContrast: "#fff";

package/dist/types/theme/themes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../packages/theme/themes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CtB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CrB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGpB,CAAA;AAED,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAG1B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAa,CAAA"}
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../packages/theme/themes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CtB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CrB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGpB,CAAA;AAED,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAG1B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAa,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lidofinance/lido-ui",
-  "version": "3.0.2",
+  "version": "3.2.0",
   "homepage": "https://github.com/lidofinance/ui",
   "repository": {
     "type": "git",