@itcase/ui 1.1.8 → 1.1.10

package/dist/components/Response.js

@@ -1,235 +1,25 @@
-import React__default, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import SVG from 'react-inlinesvg';
-import borderColorProps from '../constants/componentProps/borderColor.js';
-import borderTypeProps from '../constants/componentProps/borderType.js';
-import borderWidthProps from '../constants/componentProps/borderWidth.js';
-import fillHoverProps from '../constants/componentProps/fillHover.js';
-import fillProps from '../constants/componentProps/fill.js';
-import shapeProps from '../constants/componentProps/shape.js';
-import sizeProps from '../constants/componentProps/size.js';
-import textColorProps from '../constants/componentProps/textColor.js';
-import textSizeProps from '../constants/componentProps/textSize.js';
-import textWeightProps from '../constants/componentProps/textWeight.js';
-import titleSizeProps from '../constants/componentProps/titleSize.js';
-import widthProps from '../constants/componentProps/width.js';
-import { B as Button } from '../Button-B7vbiqrJ.js';
-import { G as Group } from '../Group-fbVPmr8W.js';
-import { T as Text } from '../Text-BcGbRc14.js';
-import { Title } from './Title.js';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { useStyles } from '../hooks/useStyles.js';
-import '../jsx-runtime-ClDdVO4Q.js';
-import '../Icon-Dn2eEZvb.js';
-import '../Link-ByBzBRDH.js';
-import './Tooltip.js';
-import '../constants/componentProps/textAlign.js';
-import '../constants/componentProps/textGradient.js';
-import '../constants/componentProps/textStyle.js';
-import '../constants/componentProps/type.js';
-import '../constants/componentProps/wrap.js';
+export { R as Response, r as responseConfig } from '../Response-C5_yetym.js';
+import '../jsx-runtime-C2uP7l8s.js';
+import 'react';
+import 'clsx';
+import 'react-inlinesvg';
+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 'lodash/castArray';
-import 'lodash/camelCase';
+import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import './Loader.js';
-
-const responseConfig = {
-  appearance: {},
-  setAppearance: newComponent => {
-    responseConfig.appearance = newComponent;
-  }
-};
-function Response(props) {
-  const {
-    after,
-    before,
-    appearance,
-    imageSrc,
-    className,
-    title,
-    titleTextSize,
-    titleTextWeight,
-    titleTextColor,
-    message,
-    messageTextColor,
-    messageTextSize,
-    primaryButton,
-    primaryButtonAfter,
-    primaryButtonAppearance,
-    primaryButtonBefore,
-    primaryButtonFill,
-    primaryButtonFillHover,
-    primaryButtonLabel,
-    primaryButtonLabelTextColor,
-    primaryButtonLabelTextSize,
-    primaryButtonShape,
-    primaryButtonSize,
-    primaryButtonWidth,
-    secondaryButton,
-    secondaryButtonAfter,
-    secondaryButtonAppearance,
-    secondaryButtonBefore,
-    secondaryButtonFill,
-    secondaryButtonFillHover,
-    secondaryButtonLabel,
-    secondaryButtonLabelTextColor,
-    secondaryButtonLabelTextSize,
-    secondaryButtonShape,
-    secondaryButtonSize,
-    secondaryButtonWidth,
-    set,
-    onClickPrimaryButton,
-    onClickSecondaryButton
-  } = props;
-  const ImageComponent = useMemo(() => {
-    if (imageSrc) {
-      // eslint-disable-next-line react/prop-types
-      if (imageSrc.endsWith('.svg')) {
-        return /*#__PURE__*/React__default.createElement(SVG, {
-          src: imageSrc
-        });
-      }
-      return /*#__PURE__*/React__default.createElement("img", {
-        src: imageSrc
-      });
-    }
-    return null;
-  }, [imageSrc]);
-  const fillClass = useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'fill'
-  });
-  const fillHoverClass = useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'fillHover'
-  });
-  const shapeClass = useDeviceTargetClass(props, {
-    prefix: 'response_shape_',
-    propsKey: 'shape'
-  });
-  const borderColorClass = useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'borderColor'
-  });
-  const borderColorHoverClass = useDeviceTargetClass(props, {
-    prefix: 'border-color_hover_',
-    propsKey: 'borderColorHover'
-  });
-  const borderWidthClass = useDeviceTargetClass(props, {
-    prefix: 'border-width_',
-    propsKey: 'borderWidth'
-  });
-  const borderTypeClass = useDeviceTargetClass(props, {
-    prefix: 'border_type_',
-    propsKey: 'borderType'
-  });
-  const {
-    styles: responseStyles
-  } = useStyles(props);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: clsx(className, 'response', fillClass || responseConfig.appearance[appearance]?.fill && `fill_${responseConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || responseConfig.appearance[appearance]?.fillHover && `fill_hover_${responseConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass || responseConfig.appearance[appearance]?.shape && `fill_hover_${responseConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, set && `response_set_${set}`),
-    style: responseStyles
-  }, before, ImageComponent || responseConfig.appearance[appearance]?.imageSrc, /*#__PURE__*/React__default.createElement(Group, {
-    className: "response__desc",
-    width: "fill"
-  }, title && /*#__PURE__*/React__default.createElement(Title, {
-    className: "response__title",
-    size: titleTextSize || responseConfig.appearance[appearance]?.titleTextSize || 'h2',
-    textColor: titleTextColor || responseConfig.appearance[appearance]?.titleTextColor,
-    textWeight: titleTextWeight || responseConfig.appearance[appearance]?.titleTextWeight || '600'
-  }, title), message && /*#__PURE__*/React__default.createElement(Text, {
-    className: "response__message",
-    size: messageTextSize || responseConfig.appearance[appearance]?.messageTextSize || 'xxl',
-    textColor: messageTextColor || responseConfig.appearance[appearance]?.messageTextColor
-  }, message)), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || responseConfig.appearance[appearance]) && /*#__PURE__*/React__default.createElement(Group, {
-    className: "response__button",
-    width: "fill"
-  }, primaryButtonLabel || responseConfig.appearance[appearance].primaryButtonLabel ? /*#__PURE__*/React__default.createElement(Button, {
-    after: primaryButtonAfter,
-    appearance: primaryButtonAppearance || responseConfig.appearance[appearance]?.primaryButtonAppearance || 'dev',
-    before: primaryButtonBefore,
-    className: "response__button-item",
-    fill: primaryButtonFill,
-    fillHover: primaryButtonFillHover,
-    label: primaryButtonLabel || responseConfig.appearance[appearance]?.primaryButtonLabel,
-    labelTextColor: primaryButtonLabelTextColor,
-    labelTextSize: primaryButtonLabelTextSize || responseConfig.appearance[appearance]?.primaryButtonLabelTextSize,
-    shape: primaryButtonShape || responseConfig.appearance[appearance]?.primaryButtonShape,
-    size: primaryButtonSize || responseConfig.appearance[appearance]?.primaryButtonSize,
-    width: primaryButtonWidth || responseConfig.appearance[appearance]?.primaryButtonWidth || 'fill',
-    onClick: onClickPrimaryButton
-  }) : primaryButton, secondaryButtonLabel || responseConfig.appearance[appearance]?.secondaryButtonLabel ? /*#__PURE__*/React__default.createElement(Button, {
-    after: secondaryButtonAfter,
-    appearance: secondaryButtonAppearance || responseConfig.appearance[appearance]?.secondaryButtonAppearance || 'dev',
-    before: secondaryButtonBefore,
-    className: "response__button-item",
-    fill: secondaryButtonFill,
-    fillHover: secondaryButtonFillHover,
-    label: secondaryButtonLabel || responseConfig.appearance[appearance]?.secondaryButtonLabel,
-    labelTextColor: secondaryButtonLabelTextColor,
-    labelTextSize: secondaryButtonLabelTextSize || responseConfig.appearance[appearance]?.secondaryButtonLabelTextSize,
-    shape: secondaryButtonShape || responseConfig.appearance[appearance]?.secondaryButtonShape,
-    size: secondaryButtonSize || responseConfig.appearance[appearance]?.secondaryButtonSize,
-    width: secondaryButtonWidth || responseConfig.appearance[appearance]?.secondaryButtonWidth || 'fill',
-    onClick: onClickSecondaryButton
-  }) : secondaryButton), after);
-}
-Response.propsTypes = {
-  borderColor: PropTypes.oneOf(borderColorProps),
-  borderType: PropTypes.oneOf(borderTypeProps),
-  borderWidth: PropTypes.oneOf(borderWidthProps),
-  className: PropTypes.string,
-  fill: PropTypes.oneOf(fillProps),
-  fillHover: PropTypes.oneOf(fillHoverProps),
-  shape: PropTypes.oneOf(shapeProps),
-  after: PropTypes.any,
-  before: PropTypes.any,
-  appearance: PropTypes.string,
-  imageSrc: PropTypes.string,
-  title: PropTypes.string,
-  titleTextSize: PropTypes.oneOf(titleSizeProps),
-  titleTextWeight: PropTypes.oneOf(textWeightProps),
-  titleTextColor: PropTypes.oneOf(textColorProps),
-  message: PropTypes.string,
-  messageTextColor: PropTypes.oneOf(textColorProps),
-  messageTextSize: PropTypes.oneOf(textSizeProps),
-  primaryButton: PropTypes.any,
-  primaryButtonAfter: PropTypes.any,
-  primaryButtonAppearance: PropTypes.string,
-  primaryButtonBefore: PropTypes.any,
-  primaryButtonFill: PropTypes.oneOf(fillProps),
-  primaryButtonFillHover: PropTypes.oneOf(fillHoverProps),
-  primaryButtonLabel: PropTypes.string,
-  primaryButtonLabelTextColor: PropTypes.oneOf(textColorProps),
-  primaryButtonLabelTextSize: PropTypes.oneOf(textSizeProps),
-  primaryButtonShape: PropTypes.oneOf(shapeProps),
-  primaryButtonSize: PropTypes.oneOf(sizeProps),
-  primaryButtonWidth: PropTypes.oneOf(widthProps),
-  secondaryButton: PropTypes.any,
-  secondaryButtonAfter: PropTypes.any,
-  secondaryButtonAppearance: PropTypes.string,
-  secondaryButtonBefore: PropTypes.any,
-  secondaryButtonFill: PropTypes.oneOf(fillProps),
-  secondaryButtonFillHover: PropTypes.oneOf(fillHoverProps),
-  secondaryButtonLabel: PropTypes.string,
-  secondaryButtonLabelTextColor: PropTypes.oneOf(textColorProps),
-  secondaryButtonLabelTextSize: PropTypes.oneOf(textSizeProps),
-  secondaryButtonShape: PropTypes.oneOf(shapeProps),
-  secondaryButtonSize: PropTypes.oneOf(sizeProps),
-  secondaryButtonWidth: PropTypes.oneOf(widthProps),
-  onClickPrimaryButton: PropTypes.func,
-  onClickSecondaryButton: PropTypes.func
-};
-Response.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "Response"
-};
-
-export { Response, responseConfig };
+import '../Button-CyO_Wl49.js';
+import '../Icon-C1j6rkeI.js';
+import '../_tslib-S-VPg1Cw.js';
+import '../Link-CbCqej5B.js';
+import '../Tooltip-jT5A43he.js';
+import '../Text-edtauAM6.js';
+import '../Title-BUN57fWw.js';
+import '../Loader-BUgSIcId.js';
+import '../Group-C2kJKhWJ.js';

package/dist/components/ScrollOnDrag/ScrollOnDrag.d.ts

@@ -0,0 +1,8 @@
+import { IScrollOnDragProps } from './ScrollOnDrag.interface';
+declare function ScrollOnDrag(props: IScrollOnDragProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ScrollOnDrag {
+    var defaultProps: {
+        width: string;
+    };
+}
+export { ScrollOnDrag };

package/dist/components/ScrollOnDrag/ScrollOnDrag.interface.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties, ReactNode } from 'react';
+import ScrollContainer from 'react-indiana-drag-scroll';
+import { TypeStyleAttributes } from '../../hooks/styleAttributes.interface';
+import { borderColorPropsType, borderTypePropsType, borderWidthPropsType, elevationPropsType, fillHoverPropsType, fillPropsType, heightPropsType, widthPropsType } from '../../types';
+export interface IScrollOnDragProps extends TypeStyleAttributes {
+    borderColor?: borderColorPropsType;
+    borderType?: borderTypePropsType;
+    borderWidth?: borderWidthPropsType;
+    children?: ReactNode;
+    className?: string;
+    elevation?: elevationPropsType;
+    fill?: fillPropsType;
+    fillHover?: fillHoverPropsType;
+    height?: heightPropsType;
+    scrollContainerProps?: typeof ScrollContainer;
+    style?: CSSProperties;
+    width?: widthPropsType;
+}

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

@@ -0,0 +1 @@
+export { ScrollOnDrag } from './ScrollOnDrag';

package/dist/components/ScrollOnDrag.js

@@ -1,18 +1,13 @@
+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 PropTypes from 'prop-types';
 import clsx from 'clsx';
-import borderColorProps from '../constants/componentProps/borderColor.js';
-import borderTypeProps from '../constants/componentProps/borderType.js';
-import borderWidthProps from '../constants/componentProps/borderWidth.js';
-import fillProps from '../constants/componentProps/fill.js';
-import fillHoverProps from '../constants/componentProps/fillHover.js';
-import heightProps from '../constants/componentProps/height.js';
-import widthProps from '../constants/componentProps/width.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
+import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
@@ -22,185 +17,46 @@ 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) {
-  const {
-    children,
-    className,
-    scrollContainerProps
-  } = props;
-  const ref = useRef(null);
-  const fillClass = useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'fill'
-  });
-  const fillHoverClass = useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'fillHover'
-  });
-  const widthClass = useDeviceTargetClass(props, {
-    prefix: 'width_',
-    propsKey: 'width'
-  });
-  const heightClass = useDeviceTargetClass(props, {
-    prefix: 'height_',
-    propsKey: 'height'
-  });
-  const borderColorClass = useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'borderColor'
-  });
-  const borderWidthClass = useDeviceTargetClass(props, {
-    prefix: 'border-width_',
-    propsKey: 'borderWidth'
-  });
-  const borderTypeClass = useDeviceTargetClass(props, {
-    prefix: 'border_type_',
-    propsKey: 'borderType'
-  });
-  const elevationClass = useDeviceTargetClass(props, {
-    prefix: 'elevation_',
-    propsKey: 'elevation'
-  });
-  const {
-    styles: styles,
-    scrollContainer: scrollContainerStyles
-  } = useStyles(props);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: clsx('scroll-on-drag', className, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, fillClass, fillHoverClass, heightClass, widthClass),
-    ref: ref,
-    style: styles
-  }, /*#__PURE__*/React__default.createElement(S, Object.assign({
-    className: "scroll-on-drag__wrapper"
-  }, scrollContainerProps, {
-    style: scrollContainerStyles
-  }), children));
+    var children = props.children, className = props.className, scrollContainerProps = props.scrollContainerProps;
+    var ref = useRef(null);
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var heightClass = useDeviceTargetClass(props, {
+        prefix: 'height_',
+        propsKey: 'height',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderWidthClass = useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var elevationClass = useDeviceTargetClass(props, {
+        prefix: 'elevation_',
+        propsKey: 'elevation',
+    });
+    // @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 })) }));
 }
 ScrollOnDrag.defaultProps = {
-  width: 'fill'
-};
-ScrollOnDrag.propTypes = {
-  borderColor: PropTypes.oneOf(borderColorProps),
-  borderType: PropTypes.oneOf(borderTypeProps),
-  borderWidth: PropTypes.oneOf(borderWidthProps),
-  children: PropTypes.any,
-  className: PropTypes.string,
-  elevation: PropTypes.oneOf(),
-  fill: PropTypes.oneOf(fillProps),
-  fillHover: PropTypes.oneOf(fillHoverProps),
-  height: PropTypes.oneOf(heightProps),
-  isScrollHidden: PropTypes.bool,
-  speed: PropTypes.number,
-  width: PropTypes.oneOf(widthProps)
-};
-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
-    }
-  }
+    width: 'fill',
 };
 
 export { ScrollOnDrag };

package/dist/components/Scrollbar/Scrollbar.d.ts

@@ -0,0 +1,8 @@
+import { IScrollbarProps } from './Scrollbar.interface';
+declare function Scrollbar(props: IScrollbarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Scrollbar {
+    var defaultProps: {
+        scrollHeight: string;
+    };
+}
+export { Scrollbar };

package/dist/components/Scrollbar/Scrollbar.interface.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { TypeStyleAttributes } from '../../hooks/styleAttributes.interface';
+export interface IScrollbarProps extends TypeStyleAttributes {
+    children?: ReactNode;
+    className?: string;
+    noDefaultStyles?: boolean;
+    scrollHeight?: number | string;
+    scrollbarWidth?: number;
+    onScroll?: () => void;
+}

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

@@ -0,0 +1 @@
+export { Scrollbar } from './Scrollbar';

package/dist/components/Scrollbar.js

@@ -1,64 +1,5 @@
-import React__default from 'react';
-import clsx from 'clsx';
-import { Scrollbar as Scrollbar$1 } from 'react-scrollbars-custom';
-
-function Scrollbar(props) {
-  const {
-    children,
-    className,
-    scrollbarWidth,
-    scrollHeight,
-    onScroll,
-    noDefaultStyles
-  } = props;
-  console.log(scrollHeight);
-  return /*#__PURE__*/React__default.createElement(Scrollbar$1, {
-    className: clsx('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
-    }
-  }
-};
-
-export { Scrollbar };
+export { S as Scrollbar } from '../Scrollbar-DrRNpn12.js';
+import '../jsx-runtime-C2uP7l8s.js';
+import 'react';
+import 'clsx';
+import 'react-scrollbars-custom';