@itcase/ui 1.1.24 → 1.2.0

package/dist/components/Response.js

@@ -1,25 +1,88 @@
-export { R as Response, r as responseConfig } from '../Response-sCPsxYoM.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
-import 'clsx';
-import 'react-inlinesvg';
-import '../hooks/useDeviceTargetClass.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import SVG from 'react-inlinesvg';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import { B as Button } from '../Button-CmZbTSyf.js';
+import { G as Group } from '../Group-BXfLh7AZ.js';
+import { T as Text } from '../Text-CG3xPG27.js';
+import { T as Title } from '../Title-BfSFPJtJ.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Button-Vxs8zjSy.js';
-import '../Icon-BLqnXYOO.js';
-import '../_tslib-S-VPg1Cw.js';
-import '../Link-DtzAAQn8.js';
-import '../Tooltip-IVq3_vb4.js';
-import '../Text-Dz-KPI5I.js';
-import '../Title-zpOK2AxL.js';
-import '../Loader-VCP1ZNcb.js';
-import '../Group-DLmtajo8.js';
+import '../Icon-CsE2-ieX.js';
+import '../tslib.es6-S-VPg1Cw.js';
+import '../Link-Bqu5amIb.js';
+import '../Tooltip-DJufHBiQ.js';
+import '../Loader-CJ8ZCdwy.js';
+
+var responseConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        responseConfig.appearance = newComponent;
+    },
+};
+function Response(props) {
+    var after = props.after, before = props.before, appearance = props.appearance, imageSrc = props.imageSrc, className = props.className, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, message = props.message, messageTextColor = props.messageTextColor, messageTextSize = props.messageTextSize, messageTextWeight = props.messageTextWeight, primaryButton = props.primaryButton, primaryButtonAfter = props.primaryButtonAfter, primaryButtonAppearance = props.primaryButtonAppearance, primaryButtonBefore = props.primaryButtonBefore, primaryButtonFill = props.primaryButtonFill, primaryButtonFillHover = props.primaryButtonFillHover, primaryButtonLabel = props.primaryButtonLabel, primaryButtonLabelTextColor = props.primaryButtonLabelTextColor, primaryButtonLabelTextSize = props.primaryButtonLabelTextSize, primaryButtonShape = props.primaryButtonShape, primaryButtonSize = props.primaryButtonSize, primaryButtonWidth = props.primaryButtonWidth, secondaryButton = props.secondaryButton, secondaryButtonAfter = props.secondaryButtonAfter, secondaryButtonAppearance = props.secondaryButtonAppearance, secondaryButtonBefore = props.secondaryButtonBefore, secondaryButtonFill = props.secondaryButtonFill, secondaryButtonFillHover = props.secondaryButtonFillHover, secondaryButtonLabel = props.secondaryButtonLabel, secondaryButtonLabelTextColor = props.secondaryButtonLabelTextColor, secondaryButtonLabelTextSize = props.secondaryButtonLabelTextSize, secondaryButtonShape = props.secondaryButtonShape, secondaryButtonSize = props.secondaryButtonSize, secondaryButtonWidth = props.secondaryButtonWidth, set = props.set, onClickPrimaryButton = props.onClickPrimaryButton, onClickSecondaryButton = props.onClickSecondaryButton;
+    var ImageComponent = useMemo(function () {
+        if (imageSrc) {
+            // eslint-disable-next-line react/prop-types
+            if (imageSrc.endsWith('.svg')) {
+                return jsx(SVG, { src: imageSrc });
+            }
+            return jsx("img", { src: imageSrc });
+        }
+        return null;
+    }, [imageSrc]);
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'response_shape_',
+        propsKey: 'shape',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderColorHoverClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_hover_',
+        propsKey: 'borderColorHover',
+    });
+    var borderWidthClass = useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    // @ts-expect-error
+    var responseStyles = useStyles(props).styles;
+    var appearanceConfig = appearance && responseConfig.appearance && responseConfig.appearance[appearance];
+    return (jsxs("div", { className: clsx(className, 'response', fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
+                "fill_hover_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, set && "response_set_".concat(set)), style: responseStyles, children: [before, ImageComponent || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.imageSrc), jsxs(Group, { className: "response__desc", width: "fill", children: [title && (jsx(Title, { className: "response__title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextSize) || 'h2', textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextWeight) || '600', children: title })), message && (jsx(Text, { className: "response__message", size: messageTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.messageTextSize) || 'xxl', textColor: messageTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.messageTextColor), textWeight: messageTextWeight, children: message }))] }), (primaryButtonLabel ||
+                primaryButton ||
+                secondaryButtonLabel ||
+                secondaryButton ||
+                appearanceConfig) && (jsxs(Group, { className: "response__button", width: "fill", children: [primaryButtonLabel || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonLabel) ? (jsx(Button, { after: primaryButtonAfter, appearance: primaryButtonAppearance || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonAppearance) || 'dev', before: primaryButtonBefore, className: "response__button-item", fill: primaryButtonFill, fillHover: primaryButtonFillHover, label: primaryButtonLabel || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonLabel), labelTextColor: primaryButtonLabelTextColor, labelTextSize: primaryButtonLabelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonLabelTextSize), shape: primaryButtonShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonShape), size: primaryButtonSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonSize), width: primaryButtonWidth || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonWidth) || 'fill', onClick: onClickPrimaryButton })) : (primaryButton), secondaryButtonLabel || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonLabel) ? (jsx(Button, { after: secondaryButtonAfter, appearance: secondaryButtonAppearance || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonAppearance) || 'dev', before: secondaryButtonBefore, className: "response__button-item", fill: secondaryButtonFill, fillHover: secondaryButtonFillHover, label: secondaryButtonLabel || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonLabel), labelTextColor: secondaryButtonLabelTextColor, labelTextSize: secondaryButtonLabelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonLabelTextSize), shape: secondaryButtonShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonShape), size: secondaryButtonSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonSize), width: secondaryButtonWidth || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonWidth) || 'fill', onClick: onClickSecondaryButton })) : (secondaryButton)] })), after] }));
+}
+
+export { Response, responseConfig };

package/dist/components/SVGContent.js

@@ -1,4 +1,4 @@
-import { j as jsxRuntimeExports } from '../jsx-runtime-C2uP7l8s.js';
+import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
@@ -25,7 +25,7 @@ function SVGContent(props) {
     });
     // @ts-expect-error
     var svgContentStyles = useStyles(props).styles;
-    return (jsxRuntimeExports.jsx("div", { className: clsx(className, 'svg-content', svgFillClass, svgFillHoverClass), style: svgContentStyles, children: SvgImage && jsxRuntimeExports.jsx(SvgImage, {}) }));
+    return (jsx("div", { className: clsx(className, 'svg-content', svgFillClass, svgFillHoverClass), style: svgContentStyles, children: SvgImage && jsx(SvgImage, {}) }));
 }
 
 export { SVGContent };

package/dist/components/ScrollOnDrag.js

@@ -1,7 +1,8 @@
-import { _ as __assign } from '../_tslib-S-VPg1Cw.js';
-import { j as jsxRuntimeExports } from '../jsx-runtime-C2uP7l8s.js';
-import React__default, { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
+import { _ as __assign } from '../tslib.es6-S-VPg1Cw.js';
+import { jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
 import clsx from 'clsx';
+import { ScrollContainer } from 'react-indiana-drag-scroll';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import 'lodash/castArray';
@@ -14,8 +15,6 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 
-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=useRef(e);return 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=useRef(null),S=1/60*1e3,w=useRef({scrolling:!1,started:!1,pressed:!1,artificial:!1,mouse:!1}),y=useRef({active:{left:!1,top:!1},initialClick:{left:0,top:0},speedX:0,speedY:0,clientX:0,clientY:0}),g=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=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),useRef(d((function(){var e;null===(e=u.current)||void 0===e||e.call(u);}),(function(){return p.current}))).current),k=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 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=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.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) {
     var children = props.children, className = props.className, scrollContainerProps = props.scrollContainerProps;
     var ref = useRef(null);
@@ -53,7 +52,7 @@ function ScrollOnDrag(props) {
     });
     // @ts-expect-error
     var _a = useStyles(props), styles = _a.styles, scrollContainerStyles = _a.scrollContainer;
-    return (jsxRuntimeExports.jsx("div", { className: clsx('scroll-on-drag', className, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, fillClass, fillHoverClass, heightClass, widthClass), ref: ref, style: styles, children: jsxRuntimeExports.jsx(S, __assign({ className: "scroll-on-drag__wrapper" }, scrollContainerProps, { style: scrollContainerStyles, children: children })) }));
+    return (jsx("div", { className: clsx('scroll-on-drag', className, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, fillClass, fillHoverClass, heightClass, widthClass), ref: ref, style: styles, children: jsx(ScrollContainer, __assign({ className: "scroll-on-drag__wrapper" }, scrollContainerProps, { style: scrollContainerStyles, children: children })) }));
 }
 ScrollOnDrag.defaultProps = {
     width: 'fill',

package/dist/components/ScrollToView.js

@@ -1,17 +1,67 @@
-export { S as ScrollToView } from '../ScrollToView-W6XhacKJ.js';
-import '../jsx-runtime-C2uP7l8s.js';
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { ScrollLink } from 'react-scroll';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
 import 'react';
-import 'clsx';
-import 'lodash.throttle';
-import 'prop-types';
-import 'react-dom';
-import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
+import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+
+var ScrollToView = ScrollLink(function ScrollToView(props) {
+    var id = props.id, children = props.children, className = props.className, _a = props.tag, Tag = _a === void 0 ? 'div' : _a;
+    var alignItemsClass = useDeviceTargetClass(props, {
+        prefix: 'align-items_',
+        propsKey: 'alignItems',
+    });
+    var alignSelfClass = useDeviceTargetClass(props, {
+        prefix: 'align-self_',
+        propsKey: 'alignSelf',
+    });
+    var alignDirectionClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var justifyContentClass = useDeviceTargetClass(props, {
+        prefix: 'justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'direction_',
+        propsKey: 'direction',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var heightClass = useDeviceTargetClass(props, {
+        prefix: 'height_',
+        propsKey: 'height',
+    });
+    var textColorClass = useDeviceTargetClass(props, {
+        prefix: 'scroll-to-view_text-color_',
+        propsKey: 'textColor',
+    });
+    var textColorActiveClass = useDeviceTargetClass(props, {
+        prefix: 'scroll-to-view_text-color_active_',
+        propsKey: 'textColorActive',
+    });
+    var textColorHoverClass = useDeviceTargetClass(props, {
+        prefix: 'scroll-to-view_text-color_hover_',
+        propsKey: 'textColorHover',
+    });
+    var scrollToViewStyles = useStyles(props).styles;
+    return (jsx(Tag, { onClick: props.onClick, id: id, className: clsx(className, 'scroll-to-view', alignItemsClass, widthClass, heightClass, alignDirectionClass, alignClass, textColorClass, textColorActiveClass, textColorHoverClass, justifyContentClass, directionClass, alignSelfClass), style: Object.assign({}, scrollToViewStyles, props.style), children: children }));
+});
+
+export { ScrollToView };

package/dist/components/Scrollbar.js

@@ -1,5 +1,4 @@
-export { S as Scrollbar } from '../Scrollbar-DrRNpn12.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
+export { S as Scrollbar } from '../Scrollbar-CrGXCZ_F.js';
+import 'react/jsx-runtime';
 import 'clsx';
 import 'react-scrollbars-custom';

package/dist/components/Search.js

@@ -1,24 +1,135 @@
-export { S as SearchInput, a as SearchResult, s as searchInputConfig } from '../SearchResult-6Vg0m_NA.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useCallback } from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import { I as Icon } from '../Icon-CsE2-ieX.js';
+import { T as Text } from '../Text-CG3xPG27.js';
+import { S as Scrollbar } from '../Scrollbar-CrGXCZ_F.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-BLqnXYOO.js';
-import '../_tslib-S-VPg1Cw.js';
+import '../tslib.es6-S-VPg1Cw.js';
 import 'react-inlinesvg';
-import '../Link-DtzAAQn8.js';
-import '../Tooltip-IVq3_vb4.js';
-import '../Text-Dz-KPI5I.js';
-import '../Title-zpOK2AxL.js';
-import '../Scrollbar-DrRNpn12.js';
+import '../Link-Bqu5amIb.js';
+import '../Tooltip-DJufHBiQ.js';
+import '../Title-BfSFPJtJ.js';
 import 'react-scrollbars-custom';
+
+var searchInputConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        searchInputConfig.appearance = newComponent;
+    },
+};
+var SearchInput = React.forwardRef(function SearchInput(props, ref) {
+    var after = props.after, appearance = props.appearance, before = props.before, className = props.className, size = props.size, dataTour = props.dataTour, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconAfterFill = props.iconAfterFill, iconAfterSize = props.iconAfterSize, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, iconBeforeFill = props.iconBeforeFill, iconBeforeSize = props.iconBeforeSize, iconClear = props.iconClear, iconClearSrc = props.iconClearSrc, iconClearFill = props.iconClearFill, iconClearSize = props.iconClearSize, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, placeholderTextSize = props.placeholderTextSize, placeholderTextStyle = props.placeholderTextStyle, placeholderTextWeight = props.placeholderTextWeight, type = props.type, value = props.value, onChange = props.onChange, onClickClean = props.onClickClean, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    var onChangeSearchInput = useCallback(function (event) {
+        onChange && onChange(event.target.value);
+    }, [onChange]);
+    var onClickClearIcon = useCallback(function (event) {
+        event.stopPropagation();
+        onChange && onChange('');
+        if (onClickClean) {
+            onClickClean();
+        }
+    }, [onChange, onClickClean]);
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'search_shape_',
+        propsKey: 'shape',
+    });
+    var inputFillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'inputFill',
+    });
+    var inputShapeClass = useDeviceTargetClass(props, {
+        prefix: 'search-input_shape_',
+        propsKey: 'inputShape',
+    });
+    var inputTextSizeClass = useDeviceTargetClass(props, {
+        prefix: 'text_size_',
+        propsKey: 'inputTextSize',
+    });
+    var inputWeightClass = useDeviceTargetClass(props, {
+        prefix: 'text-weight_',
+        propsKey: 'inputTextWeight',
+    });
+    var inputTextColorClass = useDeviceTargetClass(props, {
+        prefix: 'text-color_',
+        propsKey: 'inputTextColor',
+    });
+    var inputTextStyleClass = useDeviceTargetClass(props, {
+        prefix: 'text-style_',
+        propsKey: 'inputTextStyle',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderColorHoverClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_hover_',
+        propsKey: 'borderHover',
+    });
+    var borderWidthClass = useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    // @ts-expect-error
+    var searchInputStyles = useStyles(props).styles;
+    var appearanceConfig = appearance && searchInputConfig.appearance && searchInputConfig.appearance[appearance];
+    return (jsxs("label", { className: clsx(className, 'search-input', shapeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
+                "search_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), widthClass, borderColorClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
+                "border-color_".concat(appearanceConfig.borderColor)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), borderColorHoverClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderHover) &&
+                "border-color_hover_".concat(appearanceConfig.borderHover)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), borderWidthClass, borderTypeClass, size && "search-input_size_".concat(size), type && "search-input_type_".concat(type)), "data-tour": dataTour, style: searchInputStyles, children: [before, (iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "search-input__icon search-input__icon-before", iconFill: iconBeforeFill, imageSrc: iconBeforeSrc, size: iconBeforeSize, SvgImage: iconBefore })), jsxs("div", { className: clsx('search-input__wrapper', inputFillClass, inputShapeClass), children: [jsx("input", { className: clsx('search-input__value', (inputTextSizeClass ||
+                            inputWeightClass ||
+                            inputTextColorClass ||
+                            inputTextStyleClass) &&
+                            'text', inputTextSizeClass, inputWeightClass, inputTextColorClass, inputTextStyleClass), ref: ref, required: true, type: "text", value: value, onChange: onChangeSearchInput, onFocus: onFocus, onKeyDown: onKeyDown }), jsx("div", { className: "search-input__placeholder", children: jsx(Text, { className: clsx('search-input__placeholder-value'), size: placeholderTextSize, textColor: placeholderTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.placeholderTextColor), textStyle: placeholderTextStyle, textWeight: placeholderTextWeight, children: placeholder || 'Search' }) }), value && (jsx(Icon, { className: clsx('search-input__clear', 'cursor_type_pointer'), iconFill: iconClearFill, imageSrc: iconClearSrc, size: iconClearSize, SvgImage: iconClear, onClick: onClickClearIcon }))] }), (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "search-input__icon search-input__icon-after", iconFill: iconAfterFill, imageSrc: iconAfterSrc, size: iconAfterSize, SvgImage: iconAfter })), after] }));
+});
+// @ts-expect-error
+SearchInput.DEFAULT_REF_STATE = {
+    input: null,
+};
+SearchInput.defaultProps = {
+    placeholderTextSize: 'm',
+    inputTextSize: 'm',
+    size: 'normal',
+};
+
+var SearchResult = React.forwardRef(function SearchResult(props, ref) {
+    var children = props.children, className = props.className, after = props.after, before = props.before, scrollHeight = props.scrollHeight, type = props.type;
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    return (jsx("div", { className: clsx(className, 'search-result', fillClass, type && "search-result_type_".concat(type)), children: jsxs("div", { className: "search-result__wrapper", children: [before, React.Children.toArray(children).filter(Boolean).length && (jsx(Scrollbar, { scrollHeight: scrollHeight ? "".concat(scrollHeight, "px") : '300px', children: children })), after] }) }));
+});
+
+export { SearchInput, SearchResult, searchInputConfig };

package/dist/components/Segmented.js

@@ -1,16 +1,102 @@
-export { S as Segmented, s as segmentedConfig } from '../Segmented-BM1p7Ubz.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
-import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useRef, useMemo, createRef, useCallback, useEffect } from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../Text-Dz-KPI5I.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+
+var segmentedConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        segmentedConfig.appearance = newComponent;
+    },
+};
+var Segmented = React.forwardRef(function (props, ref) {
+    var appearance = props.appearance, name = props.name, className = props.className, type = props.type, segments = props.segments, activeSegment = props.activeSegment, setActiveSegment = props.setActiveSegment, size = props.size, labelTextColor = props.labelTextColor, labelTextActiveColor = props.labelTextActiveColor, labelTextSize = props.labelTextSize, labelTextWrap = props.labelTextWrap, onChange = props.onChange;
+    var controlRef = useRef(null);
+    var segmentsRefs = useMemo(function () { return new Map(segments.map(function (item) { return [item.value, createRef()]; })); }, [segments]);
+    var onChangeValue = useCallback(function (item) {
+        onChange && onChange(item.value, name);
+        setActiveSegment && setActiveSegment(item);
+    }, [name, onChange, setActiveSegment]);
+    useEffect(function () {
+        var _a, _b;
+        var offsetWidth = 0;
+        var offsetLeft = 0;
+        var activeSegmentRef = segmentsRefs.get(activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value);
+        if (activeSegmentRef === null || activeSegmentRef === void 0 ? void 0 : activeSegmentRef.current) {
+            offsetWidth = activeSegmentRef.current.offsetWidth;
+            offsetLeft = activeSegmentRef.current.offsetLeft;
+        }
+        (_a = controlRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('--segmented-active-width', "".concat(offsetWidth, "px"));
+        // controlRef.current.style.setProperty('--segmented-active-x-pos', `${offsetLeft - 2}px`)
+        (_b = controlRef.current) === null || _b === void 0 ? void 0 : _b.style.setProperty('--segmented-active-x-pos', "".concat(offsetLeft, "px"));
+    }, [activeSegment, segmentsRefs]);
+    var indicatorFillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'indicatorFill',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'inputBorderColor',
+    });
+    var borderWidthClass = useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'segmented_shape_',
+        propsKey: 'shape',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'segmented_width_',
+        propsKey: 'width',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    // prettier-ignore
+    var appearanceConfig = (appearance && segmentedConfig.appearance && segmentedConfig.appearance[appearance]);
+    return (jsx("div", { className: clsx(className, 'segmented', shapeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
+                "segmented_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), widthClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.width) &&
+                "segmented_width_".concat(appearanceConfig.width).replace(/([A-Z])/g, '-$1').toLowerCase()), size && "segmented_size_".concat(size), type && "segmented_type_".concat(type), borderColorClass, borderWidthClass, borderTypeClass), ref: controlRef, children: jsx("div", { className: "segmented__wrapper", children: jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments === null || segments === void 0 ? void 0 : segments.map(function (item, i) { return (jsxs("div", { className: clsx('segmented__item', fillHoverClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                                "fill_hover_".concat(appearanceConfig.fillHover)
+                                    .replace(/([A-Z])/g, '-$1')
+                                    .toLowerCase()), item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value) && 'segmented__item_active'), ref: segmentsRefs.get(item.value), children: [jsx("input", { checked: item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value), className: "segmented__item-radio", id: item.label, name: name, type: "radio", value: item.value, onChange: function () { return onChangeValue(item); } }), jsx("label", { className: clsx('segmented__item-label'), htmlFor: item.label, children: jsx(Text, { className: clsx('segmented__item-label-text', labelTextWrap && "word-wrap_".concat(labelTextWrap)), size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: item.value === (activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.value)
+                                        ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
+                                        : labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), children: item.label }) })] }, item.value)); }), jsx("div", { className: clsx('segmented__indicator', indicatorFillClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.indicatorFill) &&
+                                "fill_".concat(appearanceConfig.indicatorFill)
+                                    .replace(/([A-Z])/g, '-$1')
+                                    .toLowerCase())), children: "\u00A0" })] }) }) }));
+});
+Segmented.displayName = 'Segmented';
+Segmented.defaultProps = {
+    activeSegment: {},
+    size: 'normal',
+};
+
+export { Segmented, segmentedConfig };