@itcase/ui 1.1.5 → 1.1.7

package/dist/cjs/components/ScrollOnDrag.js

@@ -0,0 +1,214 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var borderColor = require('../constants/componentProps/borderColor.js');
+var borderType = require('../constants/componentProps/borderType.js');
+var borderWidth = require('../constants/componentProps/borderWidth.js');
+var fill = require('../constants/componentProps/fill.js');
+var fillHover = require('../constants/componentProps/fillHover.js');
+var height = require('../constants/componentProps/height.js');
+var width = require('../constants/componentProps/width.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var l=function(){return (l=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function i(e,t,r,n,o){var c=r>0?Math.max(0,Math.min(r,-t)):Math.min(0,Math.max(r,-t)),l=Math.min(Math.max(e+r-c,n),o)-Math.min(Math.max(e,n),o);return [l,r-l]}function u(e,t,r){return 0===Math.abs(t)&&Math.abs(r)>0||Math.sign(t)===Math.sign(r)?.3*e*Math.sign(r)*Math.log10(1+.5*Math.abs(r)/e):r}function s(e){return !!e&&e.scrollWidth>e.clientWidth}function a(e){return !!e&&e.scrollHeight>e.clientHeight}var f;function p(e){return "function"==typeof e}function d(e,t){var r,n,o=function(){for(var c=[],l=0;l<arguments.length;l++)c[l]=arguments[l];var i=Date.now()-r,u=p(t)?t():t||0;i<u&&i>=0?n=setTimeout((function(){return o.apply(void 0,c)}),u-i):e.apply(void 0,c);},c=function(){for(var e=[],c=0;c<arguments.length;c++)e[c]=arguments[c];r=Date.now(),n=setTimeout((function(){return o.apply(void 0,e)}),p(t)?t():t||0);};return c.clear=function(){clearTimeout(n);},c}function v(e){var n=React.useRef(e);return React.useEffect((function(){n.current=e;}),[e]),n}!function(e){e[e.Left=1]="Left",e[e.Middle=4]="Middle",e[e.Right=2]="Right";}(f||(f={}));var h=function(){function e(e,t){var r,n,o,c,l=this;this.getScrollMode=function(e){if(l.getOptions().overscroll&&l.reference.current&&e){var t=l.reference.current,r=t.scrollLeft,n=t.scrollTop,o=t.clientHeight,c=t.clientWidth,i=t.scrollHeight,u=t.scrollWidth;return e.left<0&&r>0||e.left>0&&r<u-c||e.top<0&&n>0||e.top>0&&n<i-o?"local":"global"}return "local"},this.clearStyles=function(){l.reference.current&&l.reference.current.childNodes.forEach((function(e,t){e.style.transition=l.originalStyles.transition[t],e.style.transform=l.originalStyles.transform[t],e.style.pointerEvents=l.originalStyles.pointerEvents[t];})),l.overflow.left=0,l.overflow.top=0,l.overflow.prevent=!1;},this.inertia=function(e,t){var r=l.calculateScroll({left:l.inertiaSpeed.left*e,top:l.inertiaSpeed.top*e});l.inertiaSpeed.left=(r.left.local+r.left.overflow)/e*.95,l.inertiaSpeed.top=(r.top.local+r.top.overflow)/e*.95,l.applyScroll(r),Math.abs(l.inertiaSpeed.left)<.05&&Math.abs(l.inertiaSpeed.top)<.05&&(null==t||t());},this.reference=e,this.options=t,this.originalStyles={transform:[],transition:[],pointerEvents:[]},this.overflow={left:0,top:0,prevent:!1},this.inertiaSpeed={left:0,top:0},this.mode=null,this.active=!1,this.loopedInertia=(r=this.inertia,o=!1,c={run:function(e){o=!1;var t=performance.now(),l=function(){c.cancel(),null==e||e();},i=function(e){o||(r(e-t,l),t=e,n=window.requestAnimationFrame((function(e){return i(e)})));};n=window.requestAnimationFrame((function(e){return i(e)}));},cancel:function(){o=!0,window.cancelAnimationFrame(n);}}),this.debouncedClearStyles=d(this.clearStyles,300);}return e.prototype.getOptions=function(){return l({inertia:!0,rubberBand:!0},this.options.current)},e.prototype.start=function(e){var t=this;this.active&&this.cancel(),this.mode=this.getScrollMode(e),this.reference.current&&this.reference.current.childNodes.forEach((function(e){e.addEventListener("click",t.preventEvent);var r=window.getComputedStyle(e),n=r.transform,o=r.transition,c=r.pointerEvents;t.originalStyles.transition.push(o),t.originalStyles.transform.push(n),t.originalStyles.pointerEvents.push(c),e.style.pointerEvents="none";})),this.active=!0;},e.prototype.scroll=function(e){this.applyScroll(this.calculateScroll(e));},e.prototype.end=function(e,t){var r=this,n=this.getOptions().inertia,o=function(){r.cancel(),null==t||t();};this.inertiaSpeed.left=e?e.left:0,this.inertiaSpeed.top=e?e.top:0,n?this.loopedInertia.run(o):o();},e.prototype.cancel=function(){var e,t=this;null===(e=this.reference.current)||void 0===e||e.childNodes.forEach((function(e){e.removeEventListener("click",t.preventEvent);})),this.resetOverflow(),this.loopedInertia.cancel(),this.mode=null,this.active=!1;},e.prototype.resetOverflow=function(){var e,t=this.overflow.left||this.overflow.top;t&&(this.overflow.prevent=!0,(null===(e=this.reference.current)||void 0===e?void 0:e.childNodes).forEach((function(e){e.style.transform="translate3d(0px, 0px, 0px)",e.style.transition="300ms";}))),t?this.debouncedClearStyles():this.clearStyles();},e.prototype.preventEvent=function(e){e.preventDefault(),e.stopImmediatePropagation();},e.prototype.applyScroll=function(e){var t=this,r=e.left,n=e.top;(r.global||n.global)&&window.scrollTo({left:window.scrollX+r.global,top:window.scrollY+n.global,behavior:"auto"}),this.reference.current&&(this.reference.current.scrollLeft+=r.local,this.reference.current.scrollTop+=n.local,this.overflow.prevent||!r.overflow&&!n.overflow||(this.overflow.left+=r.overflow,this.overflow.top+=n.overflow,this.reference.current.childNodes.forEach((function(e){e.style.transform="translate3d("+-t.overflow.left+"px, "+-t.overflow.top+"px, 0px)",e.style.transition="0ms";}))));},e.prototype.calculateScroll=function(e){var t=this.getOptions().rubberBand,r={local:0,global:0,overflow:0},n={local:0,global:0,overflow:0};if("global"===this.mode)r.global=e.left,n.global=e.top;else if(this.reference.current){var o=this.reference.current,c=o.scrollLeft,l=o.scrollTop,f=o.scrollWidth,p=o.clientWidth,d=o.scrollHeight,v=o.clientHeight;if(s(this.reference.current)){var h=i(c,this.overflow.left,e.left,0,f-p),m=h[0],S=h[1];r.local=m,t&&(r.overflow=u(p,this.overflow.left,S));}if(a(this.reference.current)){var w=i(l,this.overflow.top,e.top,0,d-v);m=w[0],S=w[1];n.local=m,t&&(n.overflow=u(p,this.overflow.top,S));}}return {left:r,top:n}},e}();function m(e){void 0===e&&(e={mouseScroll:!0});var c,i,u,p,m=React.useRef(null),S=1/60*1e3,w=React.useRef({scrolling:!1,started:!1,pressed:!1,artificial:!1,mouse:!1}),y=React.useRef({active:{left:!1,top:!1},initialClick:{left:0,top:0},speedX:0,speedY:0,clientX:0,clientY:0}),g=React.useRef({body:{},reference:{}}),b=v(e),E=v(l({activationDistance:20,cursor:!0,buttons:[f.Left]},null!==(c=b.current.mouseScroll)&&"object"==typeof c?b.current.mouseScroll:{})),M=React.useState("mouseScrollImplementation"in e&&e.mouseScrollImplementation?e.mouseScrollImplementation(m,E):function(e,t){return new h(e,t)}(m,E))[0],L=function(){var e=function(){window.requestAnimationFrame((function(){var e,t;null===(t=(e=b.current).onEndScroll)||void 0===t||t.call(e),w.current.started=!1,w.current.scrolling=!1,w.current.artificial=!1;}));};w.current.artificial?M.end({left:y.current.speedX,top:y.current.speedY},e):e();},O=function(e){var t,r,n=E.current.ignoreElements;b.current.mouseScroll&&(function(e,t,r){if(r&&e&&t){var n=e.closest(r);return null===n||n.contains(t)}return Boolean(e&&t)}(e.target,m.current,n)&&(s(m.current)||a(m.current))&&-1!==E.current.buttons.indexOf(e.buttons)&&(t=e.clientX,r=e.clientY,y.current.speedY=0,y.current.speedX=0,y.current.clientX=t,y.current.clientY=r,y.current.active.left=!1,y.current.active.top=!1,y.current.initialClick.top=r,y.current.initialClick.left=t,w.current.mouse=!0,w.current.pressed=!0,M.cancel()));},x=function(e){b.current.mouseScroll&&w.current.pressed&&w.current.mouse&&(!function(e,t){var r=E.current,n=r.activationDistance,o=r.cursor;Math.abs(e-y.current.initialClick.left)>n&&(y.current.active.left=!0),Math.abs(t-y.current.initialClick.top)>n&&(y.current.active.top=!0);var c={left:y.current.active.left?y.current.clientX-e:0,top:y.current.active.top?y.current.clientY-t:0};M.active?w.current.pressed&&(y.current.speedX=c.left/S,y.current.speedY=c.top/S,y.current.clientX=e,y.current.clientY=t,M.scroll(c),window.requestAnimationFrame((function(){y.current.speedX=0,y.current.speedY=0;}))):(y.current.active.top||y.current.active.left)&&(M.start(c),y.current.clientX=e,y.current.clientY=t,w.current.artificial=!0,o&&(g.current.body.cursor=document.body.style.cursor,document.body.style.cursor="grabbing",m.current&&(g.current.reference.cursor=m.current.style.cursor,m.current.style.cursor="grabbing")),m.current&&(g.current.reference.userSelect=m.current.style.userSelect,m.current.style.userSelect="none"));}(e.clientX,e.clientY),e.preventDefault(),e.stopPropagation());},X=function(){w.current.pressed&&(M.active&&L(),w.current.pressed=!1,w.current.mouse=!1,Y());},Y=function(){E.current.cursor&&(document.body.style.cursor=g.current.body.cursor||"",m.current&&(m.current.style.cursor=g.current.reference.cursor||"")),m.current&&(m.current.style.userSelect=g.current.reference.userSelect||"");},I=function(){w.current.artificial=!1,w.current.pressed=!0;},j=function(){w.current.pressed&&(w.current.started&&!w.current.scrolling&&L(),w.current.pressed=!1);},C=function(){var e,t;w.current.scrolling=!0,w.current.started?null===(t=(e=b.current).onScroll)||void 0===t||t.call(e):function(){var e,t;w.current.started=!0,null===(t=(e=b.current).onStartScroll)||void 0===t||t.call(e);}(),N();},N=(i=250,u=v((function(){var e=w.current,t=e.pressed,r=e.started,n=e.artificial;t||!r||n||L(),w.current.scrolling=!1;})),p=v(i),React.useRef(d((function(){var e;null===(e=u.current)||void 0===e||e.call(u);}),(function(){return p.current}))).current),k=React.useCallback((function(e){m.current!==e&&(m.current&&(m.current.removeEventListener("mousedown",O),m.current.removeEventListener("scroll",C),m.current.removeEventListener("touchstart",I)),m.current=e,m.current&&(m.current.addEventListener("mousedown",O,{passive:!1}),m.current.addEventListener("scroll",C,{passive:!1}),m.current.addEventListener("touchstart",I)));}),[]);return React.useEffect((function(){return window.addEventListener("mouseup",X),window.addEventListener("mousemove",x),window.addEventListener("touchend",j),function(){window.removeEventListener("mouseup",X),window.removeEventListener("mousemove",x),window.removeEventListener("touchend",j),Y();}}),[]),{ref:k}}var S=React.forwardRef((function(t,r){var n,o,c=l({mouseScrollImplementation:void 0},t),i=c.children,u=c.className,s=c.component,a=c.hideScrollbars,f=void 0===a||a,p=c.mouseScroll,d=void 0===p||p,v=c.mouseScrollImplementation,h=c.onStartScroll,S=c.onEndScroll,w=c.onScroll,y=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]]);}return r}(c,["children","className","component","hideScrollbars","mouseScroll","mouseScrollImplementation","onStartScroll","onEndScroll","onScroll"]),g=s||"div",b=m({mouseScroll:d,mouseScrollImplementation:v,onStartScroll:h,onEndScroll:S,onScroll:w});return React__default.default.createElement(g,l({className:(o=[u,"indiana-scroll-container",f&&"indiana-scroll-container--hide-scrollbars"],o.filter((function(e){return e})).join(" ")),ref:(n=[r,b.ref],function(e){n.forEach((function(t){"function"==typeof t?t(e):null!=t&&(t.current=e);}));})},y),i)}));
+
+function ScrollOnDrag(props) {
+  const {
+    children,
+    className,
+    scrollContainerProps
+  } = props;
+  const ref = React.useRef(null);
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'height_',
+    propsKey: 'height'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
+  const elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'elevation_',
+    propsKey: 'elevation'
+  });
+  const {
+    styles: styles,
+    scrollContainer: scrollContainerStyles
+  } = useStyles.useStyles(props);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('scroll-on-drag', className, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, fillClass, fillHoverClass, heightClass, widthClass),
+    ref: ref,
+    style: styles
+  }, /*#__PURE__*/React__default.default.createElement(S, Object.assign({
+    className: "scroll-on-drag__wrapper"
+  }, scrollContainerProps, {
+    style: scrollContainerStyles
+  }), children));
+}
+ScrollOnDrag.defaultProps = {
+  width: 'fill'
+};
+ScrollOnDrag.propTypes = {
+  borderColor: PropTypes__default.default.oneOf(borderColor.default),
+  borderType: PropTypes__default.default.oneOf(borderType.default),
+  borderWidth: PropTypes__default.default.oneOf(borderWidth.default),
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  elevation: PropTypes__default.default.oneOf(),
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillHover: PropTypes__default.default.oneOf(fillHover.default),
+  height: PropTypes__default.default.oneOf(height.default),
+  isScrollHidden: PropTypes__default.default.bool,
+  speed: PropTypes__default.default.number,
+  width: PropTypes__default.default.oneOf(width.default)
+};
+ScrollOnDrag.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ScrollOnDrag",
+  "props": {
+    "width": {
+      "defaultValue": {
+        "value": "'fill'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "widthProps"
+      },
+      "required": false
+    },
+    "borderColor": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderColorProps"
+      },
+      "required": false
+    },
+    "borderType": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderTypeProps"
+      },
+      "required": false
+    },
+    "borderWidth": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "borderWidthProps"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "elevation": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "PropTypes.oneOf()"
+      },
+      "required": false
+    },
+    "fill": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "fillHover": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillHoverProps"
+      },
+      "required": false
+    },
+    "height": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "heightProps"
+      },
+      "required": false
+    },
+    "isScrollHidden": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "speed": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.ScrollOnDrag = ScrollOnDrag;

package/dist/cjs/components/Scrollbar.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var reactScrollbarsCustom = require('react-scrollbars-custom');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Scrollbar(props) {
+  const {
+    children,
+    className,
+    scrollbarWidth,
+    scrollHeight,
+    onScroll,
+    noDefaultStyles
+  } = props;
+  console.log(scrollHeight);
+  return /*#__PURE__*/React__default.default.createElement(reactScrollbarsCustom.Scrollbar, {
+    className: clsx__default.default('scrollbar', className),
+    onScroll: onScroll,
+    scrollbarWidth: scrollbarWidth,
+    noDefaultStyles: noDefaultStyles,
+    wrapperProps: {
+      className: 'scrollbar__wrapper'
+    },
+    scrollerProps: {
+      className: 'scrollbar__scroll'
+    },
+    contentProps: {
+      className: 'scrollbar__scroll-content'
+    },
+    trackXProps: {
+      className: 'scrollbar__track-x'
+    },
+    trackYProps: {
+      className: 'scrollbar__track-y'
+    },
+    thumbXProps: {
+      className: 'scrollbar__track-x-item'
+    },
+    thumbYProps: {
+      className: 'scrollbar__track-y-item'
+    },
+    style: {
+      height: scrollHeight + 'px'
+    }
+  }, children);
+}
+Scrollbar.defaultProps = {
+  scrollHeight: '200'
+};
+Scrollbar.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Scrollbar",
+  "props": {
+    "scrollHeight": {
+      "defaultValue": {
+        "value": "'200'",
+        "computed": false
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Scrollbar = Scrollbar;

package/dist/cjs/components/Search.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var SearchResult = require('../SearchResult-CdsV7oDb.js');
+require('react');
+require('prop-types');
+require('clsx');
+require('../constants/componentProps/fill.js');
+require('./Icon.js');
+require('react-inlinesvg');
+require('./Link.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('../hooks/useStyles.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('../constants/componentProps/borderColor.js');
+require('../constants/componentProps/borderType.js');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/shape.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
+require('../Text-CfBPhwqK.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
+require('./Scrollbar.js');
+require('react-scrollbars-custom');
+
+
+
+exports.SearchInput = SearchResult.SearchInput;
+exports.SearchResult = SearchResult.SearchResult;
+exports.searchInputConfig = SearchResult.searchInputConfig;

package/dist/cjs/components/Segmented.js

@@ -0,0 +1,235 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var Text = require('../Text-CfBPhwqK.js');
+var fill = require('../constants/componentProps/fill.js');
+var textWrap = require('../constants/componentProps/textWrap.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('../hooks/useStyles.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+const segmentedConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    segmentedConfig.appearance = newComponent;
+  }
+};
+const Segmented = /*#__PURE__*/React__default.default.forwardRef((props, ref) => {
+  const {
+    appearance,
+    name,
+    className,
+    type,
+    segments,
+    activeSegment,
+    setActiveSegment,
+    size,
+    labelTextColor,
+    labelTextActiveColor,
+    labelTextSize,
+    labelTextWrap,
+    onChange
+  } = props;
+  const controlRef = React.useRef(null);
+  const segmentsRefs = React.useMemo(() => new Map(segments.map(item => [item.value, /*#__PURE__*/React.createRef()])), [segments]);
+  const onChangeValue = React.useCallback(item => {
+    onChange && onChange(item.value, name);
+    setActiveSegment && setActiveSegment(item);
+  }, [name, onChange, setActiveSegment]);
+  React.useEffect(() => {
+    let offsetWidth = 0;
+    let offsetLeft = 0;
+    const activeSegmentRef = segmentsRefs.get(activeSegment.value);
+    if (activeSegmentRef?.current) {
+      offsetWidth = activeSegmentRef.current.offsetWidth;
+      offsetLeft = activeSegmentRef.current.offsetLeft;
+    }
+    controlRef.current.style.setProperty('--segmented-active-width', `${offsetWidth}px`);
+    // controlRef.current.style.setProperty('--segmented-active-x-pos', `${offsetLeft - 2}px`)
+    controlRef.current.style.setProperty('--segmented-active-x-pos', `${offsetLeft}px`);
+  }, [activeSegment, segmentsRefs]);
+  const indicatorFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'indicatorFill'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'inputBorderColor'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'segmented_shape_',
+    propsKey: 'shape'
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'segmented_width_',
+    propsKey: 'width'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'segmented', shapeClass || segmentedConfig.appearance[appearance]?.shape && `segmented_shape_${segmentedConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillClass || segmentedConfig.appearance[appearance]?.fill && `fill_${segmentedConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), widthClass || segmentedConfig.appearance[appearance]?.width && `segmented_width_${segmentedConfig.appearance[appearance].width}`.replace(/([A-Z])/g, '-$1').toLowerCase(), size && `segmented_size_${size}`, type && `segmented_type_${type}`, borderColorClass, borderWidthClass, borderTypeClass),
+    ref: controlRef
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "segmented__wrapper"
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('segmented__wrapper-inner')
+  }, segments?.map((item, i) => /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('segmented__item', fillHoverClass || segmentedConfig.appearance[appearance]?.fillHover && `fill_hover_${segmentedConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), item.value === activeSegment.value && 'segmented__item_active'),
+    key: item.value,
+    ref: segmentsRefs.get(item.value)
+  }, /*#__PURE__*/React__default.default.createElement("input", {
+    checked: item.value === activeSegment.value,
+    className: "segmented__item-radio",
+    id: item.label,
+    name: name,
+    type: "radio",
+    value: item.value,
+    onChange: () => onChangeValue(item)
+  }), /*#__PURE__*/React__default.default.createElement("label", {
+    className: clsx__default.default('segmented__item-label'),
+    htmlFor: item.label
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: clsx__default.default('segmented__item-label-text', labelTextWrap && `word-wrap_${labelTextWrap}`),
+    size: labelTextSize || segmentedConfig.appearance[appearance]?.labelTextSize,
+    textColor: item.value === activeSegment.value ? labelTextActiveColor || segmentedConfig.appearance[appearance]?.labelTextActiveColor : labelTextColor || segmentedConfig.appearance[appearance]?.labelTextColor
+  }, item.label)))), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('segmented__indicator', indicatorFillClass || segmentedConfig.appearance[appearance]?.indicatorFill && `fill_${segmentedConfig.appearance[appearance].indicatorFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
+  }, "\xA0"))));
+});
+Segmented.displayName = 'Segmented';
+Segmented.propTypes = {
+  activeSegment: PropTypes__default.default.object,
+  className: PropTypes__default.default.string,
+  fill: PropTypes__default.default.string,
+  /**
+   * цвет бэкграунда выбранного элемента
+   */
+  indicatorFill: PropTypes__default.default.oneOf(fill.default),
+  labelTextWrap: PropTypes__default.default.oneOf(textWrap.default),
+  name: PropTypes__default.default.string,
+  segments: PropTypes__default.default.array,
+  setActiveSegment: PropTypes__default.default.func,
+  type: PropTypes__default.default.string
+};
+Segmented.defaultProps = {
+  activeSegment: {},
+  size: 'normal'
+};
+Segmented.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Segmented",
+  "props": {
+    "activeSegment": {
+      "defaultValue": {
+        "value": "{}",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "object"
+      },
+      "required": false
+    },
+    "size": {
+      "defaultValue": {
+        "value": "'normal'",
+        "computed": false
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "fill": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "indicatorFill": {
+      "description": "\u0446\u0432\u0435\u0442 \u0431\u044D\u043A\u0433\u0440\u0430\u0443\u043D\u0434\u0430 \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "fillProps"
+      },
+      "required": false
+    },
+    "labelTextWrap": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "textWrapProps"
+      },
+      "required": false
+    },
+    "name": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "segments": {
+      "description": "",
+      "type": {
+        "name": "array"
+      },
+      "required": false
+    },
+    "setActiveSegment": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Segmented = Segmented;
+exports.segmentedConfig = segmentedConfig;