@homecode/ui 4.22.16 → 4.22.18

package/dist/esm/index.js

@@ -74,8 +74,8 @@ import * as resizeObserver from './src/tools/resizeObserver.js';
 export { resizeObserver };
 import * as queryParams from './src/tools/queryParams.js';
 export { queryParams };
-export { useThrottle } from './src/hooks/useThrottle.js';
-export { useDebounce } from './src/hooks/useDebounce.js';
+export { useThrottle, useThrottleCallback } from './src/hooks/useThrottle.js';
+export { useDebounce, useDebounceCallback } from './src/hooks/useDebounce.js';
 import 'react';
 export { useIsMounted } from './src/hooks/useIsMounted.js';
 export { useListKeyboardControl } from './src/hooks/useListKeyboardControl.js';

package/dist/esm/src/components/Calendar/Calendar.js

@@ -5,6 +5,7 @@ import S from './Calendar.styl.js';
 import { valueToDate, getWeekDaysArray, getDaysArray, isWeekend, weekDays, isSameDay } from './Calendar.helpers.js';
 import { Input } from '../Input/Input.js';
 import { Select } from '../Select/Select.js';
+import { useThrottleCallback } from '../../hooks/useThrottle.js';
 
 const MONTHS = [
     'January',
@@ -35,6 +36,73 @@ function Calendar({ className, value, onDayPointerDown, onDayPointerUp, renderDa
         id: i + 1,
         label: renderMonthLabel?.(i + 1) ?? m,
     })), [renderMonthLabel]);
+    const updateMonthYear = useCallback((direction) => {
+        if (direction === 'backward') {
+            setMonth(prevMonth => {
+                if (prevMonth === 1) {
+                    setYear(prevYear => Math.max(MIN_YEAR, prevYear - 1));
+                    return 12;
+                }
+                return prevMonth - 1;
+            });
+        }
+        else {
+            setMonth(prevMonth => {
+                if (prevMonth === 12) {
+                    setYear(prevYear => prevYear + 1);
+                    return 1;
+                }
+                return prevMonth + 1;
+            });
+        }
+    }, [setMonth, setYear]);
+    const triggerMonthChangeWithTransition = useCallback((scrollDirection, monthDirection) => {
+        // @ts-ignore
+        if (!document.startViewTransition) {
+            updateMonthYear(monthDirection);
+            return;
+        }
+        document.documentElement.dataset.calendarTransitionDirection =
+            scrollDirection;
+        // @ts-ignore
+        const transition = document.startViewTransition(() => {
+            updateMonthYear(monthDirection);
+        });
+        transition.finished.finally(() => {
+            delete document.documentElement.dataset.calendarTransitionDirection;
+        });
+    }, [updateMonthYear]);
+    const handleWheelScroll = useThrottleCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const { deltaX, deltaY } = event;
+        let scrollDirection = '';
+        let monthDirection = null;
+        if (Math.abs(deltaY) > Math.abs(deltaX)) {
+            if (deltaY < 0) {
+                scrollDirection = 'up';
+                monthDirection = 'backward';
+            }
+            else {
+                scrollDirection = 'down';
+                monthDirection = 'forward';
+            }
+        }
+        else if (Math.abs(deltaX) > Math.abs(deltaY)) {
+            if (deltaX < 0) {
+                scrollDirection = 'left';
+                monthDirection = 'backward';
+            }
+            else {
+                scrollDirection = 'right';
+                monthDirection = 'forward';
+            }
+        }
+        if (scrollDirection && monthDirection) {
+            triggerMonthChangeWithTransition(scrollDirection, monthDirection);
+        }
+    }, 200, // Throttle time in ms
+    [triggerMonthChangeWithTransition]);
     const onYearChange = useCallback((e, val) => {
         if (String(val).length === 4)
             setYear(Math.max(MIN_YEAR, val));
@@ -50,7 +118,9 @@ function Calendar({ className, value, onDayPointerDown, onDayPointerUp, renderDa
                         // @ts-ignore
                         size: size, label: renderYearLabel?.(year) ?? 'Year', value: year, 
                         // @ts-ignore
-                        onChange: onYearChange, onBlur: onYearBlur }), jsx(Select, { className: S.month, size: size, label: renderMonthesLabel?.(month) ?? 'Month', options: monthOptions, value: month, onChange: val => setMonth(val), required: true, hideRequiredStar: true })] }), jsx("div", { className: S.weekDays, children: weekDaysArray.map((day, weekdayIndex) => (jsx("div", { className: cn(S.day, isWeekend(weekdayIndex) && weekendClassName), children: renderWeekDayLabel?.(day) ?? weekDays[day] }, `weekday-${day}`))) }), jsx("div", { className: S.days, children: daysArray.map((day, weekdayIndex) => {
+                        onChange: onYearChange, onBlur: onYearBlur }), jsx(Select, { className: S.month, size: size, label: renderMonthesLabel?.(month) ?? 'Month', options: monthOptions, value: month, onChange: val => setMonth(val), required: true, hideRequiredStar: true })] }), jsx("div", { className: S.weekDays, children: weekDaysArray.map((day, weekdayIndex) => (jsx("div", { className: cn(S.day, isWeekend(weekdayIndex) && weekendClassName), children: renderWeekDayLabel?.(day) ?? weekDays[day] }, `weekday-${day}`))) }), jsx("div", { className: S.days, onWheelCapture: handleWheelScroll, 
+                // @ts-ignore
+                style: { viewTransitionName: 'calendar-days' }, children: daysArray.map((day, weekdayIndex) => {
                     const className = cn(S.day, day.currentMonth && S.currMonth, isWeekend(weekdayIndex) && weekendClassName, isSameDay(day, value) && S.selected, isDayDisabled?.(day) && S.disabled);
                     const dayProps = { className };
                     if (onDayPointerDown) {

package/dist/esm/src/components/Calendar/Calendar.styl.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Calendar_size-s__MFLPb{font-size:.5em}.Calendar_size-m__IGeoI{font-size:.75em}.Calendar_size-l__a2zct{font-size:1em}.Calendar_root__v8Jg6{display:flex;flex-direction:column}.Calendar_header__IHzS-{align-items:center;display:flex;justify-content:space-between}.Calendar_month__gi10Q{width:100%}.Calendar_year__UlmLM{min-width:5em}.Calendar_year__UlmLM input{min-width:0;min-width:auto}.Calendar_month__gi10Q{margin-left:var(--indent-s)}.Calendar_weekDays__Pglyw{align-items:center;color:var(--accent-color-alpha-500);display:flex;font-size:.75em;margin-top:var(--indent-s);width:100%}.Calendar_weekDays__Pglyw .Calendar_day__A3NG-{padding:1.5em 0}.Calendar_size-s__MFLPb .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:first-child{border-top-left-radius:4px}.Calendar_size-s__MFLPb .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:last-child{border-top-right-radius:4px}.Calendar_size-m__IGeoI .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:first-child{border-top-left-radius:6px}.Calendar_size-m__IGeoI .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:last-child{border-top-right-radius:6px}.Calendar_size-l__a2zct .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:first-child{border-top-left-radius:8px}.Calendar_size-l__a2zct .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:last-child{border-top-right-radius:8px}.Calendar_days__64U-y{display:flex;flex-wrap:wrap;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Calendar_days__64U-y .Calendar_day__A3NG-:not(.Calendar_currMonth__oL4nl){color:var(--accent-color-alpha-500)}.Calendar_hideOtherMonthDays__DydjR .Calendar_days__64U-y .Calendar_day__A3NG-:not(.Calendar_currMonth__oL4nl){opacity:0;pointer-events:none}.Calendar_size-s__MFLPb .Calendar_days__64U-y .Calendar_day__A3NG-:first-child{border-top-left-radius:4px}.Calendar_size-m__IGeoI .Calendar_days__64U-y .Calendar_day__A3NG-:first-child{border-top-left-radius:6px}.Calendar_size-l__a2zct .Calendar_days__64U-y .Calendar_day__A3NG-:first-child{border-top-left-radius:8px}.Calendar_size-s__MFLPb .Calendar_days__64U-y .Calendar_day__A3NG-:last-child{border-bottom-right-radius:4px}.Calendar_size-m__IGeoI .Calendar_days__64U-y .Calendar_day__A3NG-:last-child{border-bottom-right-radius:6px}.Calendar_size-l__a2zct .Calendar_days__64U-y .Calendar_day__A3NG-:last-child{border-bottom-right-radius:8px}.Calendar_size-s__MFLPb .Calendar_days__64U-y .Calendar_day__A3NG-:nth-child(7){border-top-right-radius:4px}.Calendar_size-m__IGeoI .Calendar_days__64U-y .Calendar_day__A3NG-:nth-child(7){border-top-right-radius:6px}.Calendar_size-l__a2zct .Calendar_days__64U-y .Calendar_day__A3NG-:nth-child(7){border-top-right-radius:8px}.Calendar_size-s__MFLPb .Calendar_days__64U-y .Calendar_day__A3NG-:nth-last-child(7){border-bottom-left-radius:4px}.Calendar_size-m__IGeoI .Calendar_days__64U-y .Calendar_day__A3NG-:nth-last-child(7){border-bottom-left-radius:6px}.Calendar_size-l__a2zct .Calendar_days__64U-y .Calendar_day__A3NG-:nth-last-child(7){border-bottom-left-radius:8px}.Calendar_day__A3NG-{align-items:center;display:flex;height:2em;justify-content:center;min-width:0;min-width:auto;padding:0;width:14.28571%}.Calendar_day__A3NG-.Calendar_disabled__sZi-f{background-color:var(--accent-color-alpha-100);border-radius:0;opacity:.3;pointer-events:none}.Calendar_day__A3NG-.Calendar_selected__ffB6-{background-color:var(--active-color-alpha-500)!important}.Calendar_day__A3NG-.Calendar_currMonth__oL4nl{font-weight:700}.pointer .Calendar_day__A3NG-:focus{background-color:transparent}";
-var S = {"size-s":"Calendar_size-s__MFLPb","size-m":"Calendar_size-m__IGeoI","size-l":"Calendar_size-l__a2zct","root":"Calendar_root__v8Jg6","header":"Calendar_header__IHzS-","month":"Calendar_month__gi10Q","year":"Calendar_year__UlmLM","weekDays":"Calendar_weekDays__Pglyw","day":"Calendar_day__A3NG-","days":"Calendar_days__64U-y","currMonth":"Calendar_currMonth__oL4nl","hideOtherMonthDays":"Calendar_hideOtherMonthDays__DydjR","disabled":"Calendar_disabled__sZi-f","selected":"Calendar_selected__ffB6-"};
+var css_248z = ".Calendar_size-s__MFLPb{font-size:.5em}.Calendar_size-m__IGeoI{font-size:.75em}.Calendar_size-l__a2zct{font-size:1em}.Calendar_root__v8Jg6{display:flex;flex-direction:column}.Calendar_header__IHzS-{align-items:center;display:flex;justify-content:space-between}.Calendar_month__gi10Q{width:100%}.Calendar_year__UlmLM{min-width:5em}.Calendar_year__UlmLM input{min-width:0;min-width:auto}.Calendar_month__gi10Q{margin-left:var(--indent-s)}.Calendar_weekDays__Pglyw{align-items:center;color:var(--accent-color-alpha-500);display:flex;font-size:.75em;margin-top:var(--indent-s);width:100%}.Calendar_weekDays__Pglyw .Calendar_day__A3NG-{padding:1.5em 0}.Calendar_size-s__MFLPb .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:first-child{border-top-left-radius:4px}.Calendar_size-s__MFLPb .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:last-child{border-top-right-radius:4px}.Calendar_size-m__IGeoI .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:first-child{border-top-left-radius:6px}.Calendar_size-m__IGeoI .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:last-child{border-top-right-radius:6px}.Calendar_size-l__a2zct .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:first-child{border-top-left-radius:8px}.Calendar_size-l__a2zct .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:last-child{border-top-right-radius:8px}.Calendar_days__64U-y{display:flex;flex-wrap:wrap;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Calendar_days__64U-y .Calendar_day__A3NG-:not(.Calendar_currMonth__oL4nl){color:var(--accent-color-alpha-500)}.Calendar_hideOtherMonthDays__DydjR .Calendar_days__64U-y .Calendar_day__A3NG-:not(.Calendar_currMonth__oL4nl){opacity:0;pointer-events:none}.Calendar_size-s__MFLPb .Calendar_days__64U-y .Calendar_day__A3NG-:first-child{border-top-left-radius:4px}.Calendar_size-m__IGeoI .Calendar_days__64U-y .Calendar_day__A3NG-:first-child{border-top-left-radius:6px}.Calendar_size-l__a2zct .Calendar_days__64U-y .Calendar_day__A3NG-:first-child{border-top-left-radius:8px}.Calendar_size-s__MFLPb .Calendar_days__64U-y .Calendar_day__A3NG-:last-child{border-bottom-right-radius:4px}.Calendar_size-m__IGeoI .Calendar_days__64U-y .Calendar_day__A3NG-:last-child{border-bottom-right-radius:6px}.Calendar_size-l__a2zct .Calendar_days__64U-y .Calendar_day__A3NG-:last-child{border-bottom-right-radius:8px}.Calendar_size-s__MFLPb .Calendar_days__64U-y .Calendar_day__A3NG-:nth-child(7){border-top-right-radius:4px}.Calendar_size-m__IGeoI .Calendar_days__64U-y .Calendar_day__A3NG-:nth-child(7){border-top-right-radius:6px}.Calendar_size-l__a2zct .Calendar_days__64U-y .Calendar_day__A3NG-:nth-child(7){border-top-right-radius:8px}.Calendar_size-s__MFLPb .Calendar_days__64U-y .Calendar_day__A3NG-:nth-last-child(7){border-bottom-left-radius:4px}.Calendar_size-m__IGeoI .Calendar_days__64U-y .Calendar_day__A3NG-:nth-last-child(7){border-bottom-left-radius:6px}.Calendar_size-l__a2zct .Calendar_days__64U-y .Calendar_day__A3NG-:nth-last-child(7){border-bottom-left-radius:8px}.Calendar_day__A3NG-{align-items:center;display:flex;height:2em;justify-content:center;min-width:0;min-width:auto;padding:0;width:14.28571%}.Calendar_day__A3NG-.Calendar_disabled__sZi-f{background-color:var(--accent-color-alpha-100);border-radius:0;opacity:.3;pointer-events:none}.Calendar_day__A3NG-.Calendar_selected__ffB6-{background-color:var(--active-color-alpha-500)!important}.Calendar_day__A3NG-.Calendar_currMonth__oL4nl{font-weight:700}.pointer .Calendar_day__A3NG-:focus{background-color:transparent}::view-transition-image-pair(calendar-days){isolation:isolate}::view-transition-old(calendar-days){animation:Calendar_vt-fade-out__zW-xw .25s ease-in-out forwards}::view-transition-new(calendar-days){animation:Calendar_vt-fade-in__zBI3Y .25s ease-in-out forwards}:root[data-calendar-transition-direction=up]::view-transition-old(calendar-days){animation:Calendar_vt-slide-to-bottom__qRC-S .25s ease-in-out forwards}:root[data-calendar-transition-direction=up]::view-transition-new(calendar-days){animation:Calendar_vt-slide-from-top__GYRDJ .25s ease-in-out forwards}:root[data-calendar-transition-direction=down]::view-transition-old(calendar-days){animation:Calendar_vt-slide-to-top__qfqiD .25s ease-in-out forwards}:root[data-calendar-transition-direction=down]::view-transition-new(calendar-days){animation:Calendar_vt-slide-from-bottom__Jw2dp .25s ease-in-out forwards}:root[data-calendar-transition-direction=left]::view-transition-old(calendar-days){animation:Calendar_vt-slide-to-right__qJ4Ur .25s ease-in-out forwards}:root[data-calendar-transition-direction=left]::view-transition-new(calendar-days){animation:Calendar_vt-slide-from-left__Xlsac .25s ease-in-out forwards}:root[data-calendar-transition-direction=right]::view-transition-old(calendar-days){animation:Calendar_vt-slide-to-left__uMzUm .25s ease-in-out forwards}:root[data-calendar-transition-direction=right]::view-transition-new(calendar-days){animation:Calendar_vt-slide-from-right__Ewify .25s ease-in-out forwards}@keyframes Calendar_vt-fade-in__zBI3Y{0%{opacity:0}to{opacity:1}}@keyframes Calendar_vt-fade-out__zW-xw{0%{opacity:1}to{opacity:0}}@keyframes Calendar_vt-slide-from-top__GYRDJ{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes Calendar_vt-slide-to-bottom__qRC-S{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes Calendar_vt-slide-from-bottom__Jw2dp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes Calendar_vt-slide-to-top__qfqiD{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes Calendar_vt-slide-from-left__Xlsac{0%{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@keyframes Calendar_vt-slide-to-right__qJ4Ur{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(30px)}}@keyframes Calendar_vt-slide-from-right__Ewify{0%{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}@keyframes Calendar_vt-slide-to-left__uMzUm{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-30px)}}";
+var S = {"size-s":"Calendar_size-s__MFLPb","size-m":"Calendar_size-m__IGeoI","size-l":"Calendar_size-l__a2zct","root":"Calendar_root__v8Jg6","header":"Calendar_header__IHzS-","month":"Calendar_month__gi10Q","year":"Calendar_year__UlmLM","weekDays":"Calendar_weekDays__Pglyw","day":"Calendar_day__A3NG-","days":"Calendar_days__64U-y","currMonth":"Calendar_currMonth__oL4nl","hideOtherMonthDays":"Calendar_hideOtherMonthDays__DydjR","disabled":"Calendar_disabled__sZi-f","selected":"Calendar_selected__ffB6-","vt-fade-out":"Calendar_vt-fade-out__zW-xw","vt-fade-in":"Calendar_vt-fade-in__zBI3Y","vt-slide-to-bottom":"Calendar_vt-slide-to-bottom__qRC-S","vt-slide-from-top":"Calendar_vt-slide-from-top__GYRDJ","vt-slide-to-top":"Calendar_vt-slide-to-top__qfqiD","vt-slide-from-bottom":"Calendar_vt-slide-from-bottom__Jw2dp","vt-slide-to-right":"Calendar_vt-slide-to-right__qJ4Ur","vt-slide-from-left":"Calendar_vt-slide-from-left__Xlsac","vt-slide-to-left":"Calendar_vt-slide-to-left__uMzUm","vt-slide-from-right":"Calendar_vt-slide-from-right__Ewify"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/src/components/Flex/Flex.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import S from './Flex.styl.js';
 
-const Flex = ({ children, justifyContent, alignItems, flexDirection, flexWrap, flexGrow, flexShrink, flexBasis, flex, order, alignSelf, flexFlow, ...props }) => {
+const Flex = ({ children, justifyContent, alignItems, flexDirection, flexWrap, flexGrow, flexShrink, flexBasis, flex, order, alignSelf, flexFlow, width, height, ...props }) => {
     return (jsx("div", { className: S.root, 
         // {...props}
         style: {
@@ -16,6 +16,8 @@ const Flex = ({ children, justifyContent, alignItems, flexDirection, flexWrap, f
             order,
             alignSelf,
             flexFlow,
+            width,
+            height,
         }, children: children }));
 };
 

package/dist/esm/src/components/Icon/icons/index.js

@@ -70,6 +70,7 @@ var ICONS = {
     syncArrows: () => import('./syncArrows.svg.js'),
     table: () => import('./table.svg.js'),
     telegram: () => import('./telegram.svg.js'),
+    trafficLight: () => import('./trafficLight.svg.js'),
 };
 
 export { ICONS as default };

package/dist/esm/src/components/Icon/icons/trafficLight.svg.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgTrafficLight = function SvgTrafficLight(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    transform: "matrix(.13313 0 0 -.13313 -.035 223.653)"
+  }, _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M60.026 1675.113c-21.216-3.065-23.3-5.886-25.508-34.705-1.962-26.121-1.962-75.911 0-102.032 2.207-29.187 4.047-31.517 27.225-34.829 24.772-3.433 64.383-1.226 73.458 4.047 6.99 4.047 8.339 8.462 10.056 30.782 1.962 26.12 2.085 75.91.123 102.032-2.208 29.187-4.047 31.517-27.225 34.828-15.943 2.207-42.31 2.207-58.13-.123m38.752-9.688c6.132-2.575 8.83-5.15 11.528-11.037 4.047-8.707 1.84-20.848-4.537-26.612-6.378-5.64-16.801-7.358-24.65-4.047-6.132 2.576-8.83 5.151-11.528 11.038-3.801 8.216-2.33 19.008 3.557 25.63 5.518 6.132 17.291 8.462 25.63 5.028m0-55.185c6.132-2.576 8.83-5.151 11.528-11.038 4.047-8.707 1.84-20.847-4.537-26.611-6.378-5.641-16.801-7.358-24.65-4.047-6.132 2.575-8.83 5.15-11.528 11.037-3.801 8.217-2.33 19.008 3.557 25.63 5.518 6.132 17.291 8.462 25.63 5.029m0-55.186c6.132-2.575 8.83-5.15 11.528-11.037 4.047-8.707 1.84-20.848-4.537-26.612-6.378-5.641-16.801-7.358-24.65-4.047-6.132 2.576-8.83 5.15-11.528 11.037-3.801 8.217-2.33 19.009 3.557 25.631 5.518 6.132 17.291 8.462 25.63 5.028"
+  })), /*#__PURE__*/React.createElement("circle", {
+    cx: 89.992,
+    cy: -1644.533,
+    r: 23.827,
+    style: {
+      fill: "#e02020",
+      fillOpacity: 0.751445,
+      strokeWidth: 0.976535,
+      strokeLinecap: "round"
+    },
+    transform: "scale(1 -1)"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: 90.023,
+    cy: -1589.156,
+    r: 23.827,
+    style: {
+      fill: "#e0dd20",
+      fillOpacity: 0.751445,
+      strokeWidth: 0.976535,
+      strokeLinecap: "round"
+    },
+    transform: "scale(1 -1)"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: 89.745,
+    cy: -1534.207,
+    r: 23.827,
+    style: {
+      fill: "#20e020",
+      fillOpacity: 0.751445,
+      strokeWidth: 0.976535,
+      strokeLinecap: "round"
+    },
+    transform: "scale(1 -1)"
+  })));
+};
+
+export { SvgTrafficLight as default };

package/dist/esm/src/hooks/useDebounce.js

@@ -3,6 +3,9 @@ import debounce from '../tools/debounce.js';
 
 function useDebounce(fn, delay) {
     return useCallback(debounce(fn, delay), [fn, delay]);
+}
+function useDebounceCallback(fn, delay, deps) {
+    return useCallback(debounce(fn, delay), deps);
 }
 
-export { useDebounce };
+export { useDebounce, useDebounceCallback };

package/dist/esm/src/hooks/useThrottle.js

@@ -23,6 +23,9 @@ function useThrottle(cb, limit, options = { trailing: false }, deps = []) {
             timeoutId.current = setTimeout(execute, remaining);
         }
     }, [limit, options.trailing, ...deps]);
+}
+function useThrottleCallback(cb, limit, deps = []) {
+    return useCallback(useThrottle(cb, limit, { trailing: true }, deps), deps);
 }
 
-export { useThrottle };
+export { useThrottle, useThrottleCallback };

package/dist/esm/types/src/components/Flex/Flex.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, HTMLAttributes } from 'react';
-type FlexProps = HTMLAttributes<HTMLDivElement> & Pick<CSSProperties, 'justifyContent' | 'alignItems' | 'flexDirection' | 'flexWrap' | 'flexGrow' | 'flexShrink' | 'flexBasis' | 'flex' | 'order' | 'alignSelf' | 'flexFlow'> & {
+type FlexProps = HTMLAttributes<HTMLDivElement> & Pick<CSSProperties, 'justifyContent' | 'alignItems' | 'flexDirection' | 'flexWrap' | 'flexGrow' | 'flexShrink' | 'flexBasis' | 'flex' | 'order' | 'alignSelf' | 'flexFlow' | 'width' | 'height'> & {
     children: React.ReactNode;
 };
-export declare const Flex: ({ children, justifyContent, alignItems, flexDirection, flexWrap, flexGrow, flexShrink, flexBasis, flex, order, alignSelf, flexFlow, ...props }: FlexProps) => JSX.Element;
+export declare const Flex: ({ children, justifyContent, alignItems, flexDirection, flexWrap, flexGrow, flexShrink, flexBasis, flex, order, alignSelf, flexFlow, width, height, ...props }: FlexProps) => JSX.Element;
 export {};

package/dist/esm/types/src/components/Icon/Icon.d.ts

@@ -6,11 +6,13 @@ export declare const icons: {
     brain: () => Promise<any>;
     brokenImage: () => Promise<any>;
     camera: () => Promise<any>;
+    chat: () => Promise<any>;
     check: () => Promise<any>;
     close: () => Promise<any>;
     colors: () => Promise<any>;
-    compas: () => Promise<any>;
+    compass: () => Promise<any>;
     copy: () => Promise<any>;
+    checkers: () => Promise<any>;
     chevronUp: () => Promise<any>;
     chevronDown: () => Promise<any>;
     chevronRight: () => Promise<any>;
@@ -18,6 +20,8 @@ export declare const icons: {
     clearAll: () => Promise<any>;
     delete: () => Promise<any>;
     draft: () => Promise<any>;
+    dragHandlerHorizontal: () => Promise<any>;
+    dragHandlerVertical: () => Promise<any>;
     edit: () => Promise<any>;
     email: () => Promise<any>;
     externalLink: () => Promise<any>;
@@ -67,6 +71,7 @@ export declare const icons: {
     syncArrows: () => Promise<any>;
     table: () => Promise<any>;
     telegram: () => Promise<any>;
+    trafficLight: () => Promise<any>;
 };
 export type { IconType } from './Icon.types';
 export declare function Icon(props: T.Props): JSX.Element;

package/dist/esm/types/src/components/Icon/icons/index.d.ts

@@ -70,5 +70,6 @@ declare const _default: {
     syncArrows: () => Promise<any>;
     table: () => Promise<any>;
     telegram: () => Promise<any>;
+    trafficLight: () => Promise<any>;
 };
 export default _default;

package/dist/esm/types/src/hooks/useDebounce.d.ts

@@ -1 +1,2 @@
 export declare function useDebounce(fn: (...args: any[]) => void, delay: number): any;
+export declare function useDebounceCallback(fn: (...args: any[]) => void, delay: number, deps: any[]): any;

package/dist/esm/types/src/hooks/useThrottle.d.ts

@@ -2,4 +2,5 @@ type ThrottleOptions = {
     trailing?: boolean;
 };
 export declare function useThrottle<T extends any[]>(cb: (...args: T) => void, limit: number, options?: ThrottleOptions, deps?: any[]): (...args: T) => void;
+export declare function useThrottleCallback<T extends any[]>(cb: (...args: T) => void, limit: number, deps?: any[]): (...args: T) => void;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.22.16",
+  "version": "4.22.18",
   "description": "React UI components library",
   "scripts": {
     "test": "jest",