@activecollab/components 1.0.389 → 1.0.391

package/dist/index.js

@@ -12412,105 +12412,20 @@
   });
   InputAdornment.displayName = "InputAdornment";
 
-  var StyledDiv = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledDiv",
-    componentId: "sc-1wapx2a-0"
-  })(["", " ", " ", ""], FontStyle, BoxSizingStyle, {
-    "position": "relative",
-    "display": "inline-block",
-    "maxWidth": "100%"
-  });
-  var StyledSpan = styled__default["default"](Typography).withConfig({
-    displayName: "Styles__StyledSpan",
-    componentId: "sc-1wapx2a-1"
-  })(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre;font-variant-numeric:tabular-nums;", " &:empty:before{content:\" \";}"], function (_ref) {
-    var $disabled = _ref.$disabled;
-    return $disabled && styled.css(["visibility:visible;"]);
-  });
-  StyledSpan.displayName = "StyledSpan";
-  var StyledInput$1 = styled__default["default"](Typography).withConfig({
-    displayName: "Styles__StyledInput",
-    componentId: "sc-1wapx2a-2"
-  })(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;font-variant-numeric:tabular-nums;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;&:disabled{display:none;}"], {
-    "position": "absolute",
-    "inset": "0px",
-    "boxSizing": "border-box",
-    "width": "100%",
-    "overflow": "hidden",
-    "whiteSpace": "nowrap",
-    "borderRadius": "0.375rem",
-    "borderWidth": "1px",
-    "borderStyle": "solid",
-    "borderColor": "transparent",
-    ":focus-within": {
-      "overflow": "scroll",
-      "borderColor": "var(--color-theme-700)"
-    },
-    ":hover": {
-      "borderColor": "var(--color-theme-700)"
-    }
-  });
-  StyledInput$1.displayName = "StyledInput";
-
-  var _excluded$H = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef"];
-  var EditableContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var className = _ref.className,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? "Body 2" : _ref$variant,
-      weight = _ref.weight,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      inputProps = _ref.inputProps,
-      wrapRef = _ref.wrapRef,
-      props = _objectWithoutProperties(_ref, _excluded$H);
-    var intInputRef = React.useRef(null);
-    var handleRef = useForkRef(ref, intInputRef);
-    var handleBlur = React.useCallback(function (evt) {
-      if (intInputRef !== null && intInputRef !== void 0 && intInputRef.current) {
-        intInputRef.current.scrollLeft = 0;
-      }
-      typeof (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === "function" && (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur(evt));
-    }, [inputProps]);
-    return /*#__PURE__*/React__default["default"].createElement(StyledDiv, _extends({
-      className: className,
-      ref: wrapRef
-    }, props), /*#__PURE__*/React__default["default"].createElement(StyledSpan, {
-      variant: variant,
-      forwardedAs: "span",
-      weight: weight,
-      $disabled: disabled
-    }, inputProps === null || inputProps === void 0 ? void 0 : inputProps.value), /*#__PURE__*/React__default["default"].createElement(StyledInput$1, _extends({}, inputProps, {
-      ref: handleRef,
-      forwardedAs: "input",
-      variant: variant,
-      weight: weight,
-      value: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value,
-      onBlur: handleBlur,
-      disabled: disabled,
-      "data-form-type": "other"
-    })));
-  });
-  EditableContent.displayName = "EditableContent";
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-
-  var HoursWrapper = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-    var children = _ref.children,
-      value = _ref.value,
-      onCancel = _ref.onCancel,
+  var useInputHours = function useInputHours(_ref, inputRef) {
+    var value = _ref.value,
+      withLeadingZero = _ref.withLeadingZero,
       onSave = _ref.onSave,
-      onEnterKeyPress = _ref.onEnterKeyPress,
-      allowEmptyValue = _ref.allowEmptyValue,
-      _ref$withLeadingZero = _ref.withLeadingZero,
-      withLeadingZero = _ref$withLeadingZero === void 0 ? true : _ref$withLeadingZero,
       _ref$validation = _ref.validation,
       validation = _ref$validation === void 0 ? validateTimeInput : _ref$validation,
-      _ref$incrementOnlySel = _ref.incrementOnlySelected,
-      incrementOnlySelected = _ref$incrementOnlySel === void 0 ? false : _ref$incrementOnlySel,
+      allowEmptyValue = _ref.allowEmptyValue,
+      onCancel = _ref.onCancel,
       _ref$minuteIncrement = _ref.minuteIncrement,
-      minuteIncrement = _ref$minuteIncrement === void 0 ? 1 : _ref$minuteIncrement;
-    var inputRef = React.useRef(null);
-    var handleRef = useForkRef(ref, inputRef);
+      minuteIncrement = _ref$minuteIncrement === void 0 ? 1 : _ref$minuteIncrement,
+      incrementOnlySelected = _ref.incrementOnlySelected,
+      onEnterKeyPress = _ref.onEnterKeyPress,
+      onChange = _ref.onChange,
+      onClick = _ref.onClick;
     var _useState = React.useState(function () {
         return decimalToHours(value, withLeadingZero);
       }),
@@ -12524,17 +12439,6 @@
       prevValue = _useState4[0],
       setPrevValue = _useState4[1];
     var escapeRef = React.useRef(false);
-    React.useEffect(function () {
-      var _value;
-      if (value !== undefined) {
-        _value = decimalToHours(value, withLeadingZero);
-      }
-      if (currentValue !== _value) {
-        setCurrentValue(_value);
-        setPrevValue(_value);
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value]);
     var handleBlur = React.useCallback(function (e) {
       if (escapeRef.current) {
         setCurrentValue(prevValue);
@@ -12614,11 +12518,11 @@
           }
         }
       }
-    }, [currentValue, incrementOnlySelected, minuteIncrement, validation, withLeadingZero]);
+    }, [currentValue, incrementOnlySelected, inputRef, minuteIncrement, validation, withLeadingZero]);
     var handleKeyDown = React.useCallback(function (e) {
       if (e.key === "Enter") {
         e.target.blur();
-        onEnterKeyPress && onEnterKeyPress();
+        if (typeof onEnterKeyPress === "function") onEnterKeyPress(e.target.value);
       }
       if (e.key === "ArrowLeft") {
         return;
@@ -12687,11 +12591,12 @@
           return;
         }
       }
-    }, [handleIncrementDecrement, onCancel, onEnterKeyPress, validation, withLeadingZero]);
+    }, [handleIncrementDecrement, inputRef, onCancel, onEnterKeyPress, validation, withLeadingZero]);
     var handleChange = React.useCallback(function (e) {
       setCurrentValue(e.target.value);
-    }, []);
-    var handleClick = function handleClick() {
+      if (onChange) onChange(e.target.value);
+    }, [onChange]);
+    var handleClick = React.useCallback(function (e) {
       var _inputRef$current5;
       var selectionStart = (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.selectionStart;
       if (inputRef.current && currentValue && currentValue.length > 0 && typeof selectionStart === "number") {
@@ -12704,47 +12609,39 @@
           (_inputRef$current7 = inputRef.current) === null || _inputRef$current7 === void 0 ? void 0 : _inputRef$current7.setSelectionRange(dotsIndex + 1, currentValue.length);
         }
       }
-    };
-    var handleDoubleClick = function handleDoubleClick() {
+      if (typeof onClick === "function") {
+        onClick(e);
+      }
+    }, [currentValue, inputRef, onClick]);
+    var handleDoubleClick = React.useCallback(function () {
       if (inputRef.current) {
         var _inputRef$current8;
         (_inputRef$current8 = inputRef.current) === null || _inputRef$current8 === void 0 ? void 0 : _inputRef$current8.select();
       }
+    }, [inputRef]);
+    var inputProps = React.useMemo(function () {
+      return {
+        value: currentValue,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        onChange: handleChange,
+        onClick: handleClick,
+        onDoubleClick: handleDoubleClick
+      };
+    }, [currentValue, handleBlur, handleChange, handleClick, handleDoubleClick, handleKeyDown]);
+    return {
+      inputProps: inputProps,
+      setCurrentValue: setCurrentValue,
+      setPrevValue: setPrevValue
     };
-    var inputProps = {
-      value: currentValue,
-      onBlur: handleBlur,
-      onKeyDown: handleKeyDown,
-      onChange: handleChange,
-      onClick: handleClick,
-      onDoubleClick: handleDoubleClick,
-      onEnterKeyPress: onEnterKeyPress
-    };
-    if (!children) {
-      console.error("No children provided!");
-      return null;
-    }
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].Children.map(children, function (child) {
-      var el = child;
-      if (el && el.type === EditableContent) {
-        return /*#__PURE__*/React__default["default"].cloneElement(child, {
-          ref: handleRef,
-          inputProps: inputProps
-        });
-      }
-      return /*#__PURE__*/React__default["default"].cloneElement(child, _objectSpread2({
-        ref: handleRef
-      }, inputProps));
-    }));
-  });
-  HoursWrapper.displayName = "HoursWrapper";
+  };
 
-  var _excluded$G = ["value", "onCancel", "onSave", "onEnterKeyPress", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className"];
+  var _excluded$H = ["value", "onCancel", "onSave", "onEnterKeyPress", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className", "onChange", "onClick"];
   var InputHours = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-    var value = _ref.value,
+    var defaultValue = _ref.value,
       onCancel = _ref.onCancel,
       onSave = _ref.onSave,
-      onEnterKeyPress = _ref.onEnterKeyPress,
+      externalEnterKeyPress = _ref.onEnterKeyPress,
       allowEmptyValue = _ref.allowEmptyValue,
       _ref$withLeadingZero = _ref.withLeadingZero,
       withLeadingZero = _ref$withLeadingZero === void 0 ? true : _ref$withLeadingZero,
@@ -12755,32 +12652,50 @@
       _ref$minuteIncrement = _ref.minuteIncrement,
       minuteIncrement = _ref$minuteIncrement === void 0 ? 1 : _ref$minuteIncrement,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$G);
+      externalOnChange = _ref.onChange,
+      externalOnClick = _ref.onClick,
+      rest = _objectWithoutProperties(_ref, _excluded$H);
     var inputRef = React.useRef(null);
     var handleRef = useForkRef(ref, inputRef);
-    return /*#__PURE__*/React__default["default"].createElement(HoursWrapper, {
+    var _useInputHours = useInputHours({
+        value: defaultValue,
+        withLeadingZero: withLeadingZero,
+        onSave: onSave,
+        validation: validation,
+        allowEmptyValue: allowEmptyValue,
+        onCancel: onCancel,
+        minuteIncrement: minuteIncrement,
+        incrementOnlySelected: incrementOnlySelected,
+        onEnterKeyPress: externalEnterKeyPress,
+        onChange: externalOnChange,
+        onClick: externalOnClick
+      }, inputRef),
+      inputProps = _useInputHours.inputProps;
+    var value = inputProps.value,
+      onBlur = inputProps.onBlur,
+      onKeyDown = inputProps.onKeyDown,
+      onChange = inputProps.onChange,
+      onClick = inputProps.onClick,
+      onDoubleClick = inputProps.onDoubleClick;
+    return /*#__PURE__*/React__default["default"].createElement(Input, _extends({}, rest, {
+      className: className,
+      placeholder: withLeadingZero ? "00:00" : "0:00",
       value: value,
-      onCancel: onCancel,
-      onSave: onSave,
-      onEnterKeyPress: onEnterKeyPress,
-      incrementOnlySelected: incrementOnlySelected,
-      minuteIncrement: minuteIncrement,
-      allowEmptyValue: allowEmptyValue,
-      withLeadingZero: withLeadingZero,
-      validation: validation,
+      onBlur: onBlur,
+      onKeyDown: onKeyDown,
+      onChange: onChange,
+      onClick: onClick,
+      onDoubleClick: onDoubleClick,
       ref: handleRef
-    }, /*#__PURE__*/React__default["default"].createElement(Input, _extends({
-      className: className,
-      placeholder: withLeadingZero ? "00:00" : "0:00"
-    }, rest)));
+    }));
   });
   InputHours.displayName = "InputHours";
 
-  var _excluded$F = ["expanded"];
+  var _excluded$G = ["expanded"];
   var ExpandAll = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$expanded = _ref.expanded,
       expanded = _ref$expanded === void 0 ? false : _ref$expanded,
-      rest = _objectWithoutProperties(_ref, _excluded$F);
+      rest = _objectWithoutProperties(_ref, _excluded$G);
     return /*#__PURE__*/React__default["default"].createElement(StyledExpand, _extends({
       ref: ref,
       viewBox: "0 0 24 24"
@@ -12898,14 +12813,14 @@
   });
   StyledTextarea.displayName = "StyledTextarea";
 
-  var _excluded$E = ["className", "disabled", "invalid"];
+  var _excluded$F = ["className", "disabled", "invalid"];
   var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$invalid = _ref.invalid,
       invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-      rest = _objectWithoutProperties(_ref, _excluded$E);
+      rest = _objectWithoutProperties(_ref, _excluded$F);
     return /*#__PURE__*/React__default["default"].createElement(StyledTextarea, _extends({}, rest, {
       $invalid: invalid,
       ref: ref,
@@ -12937,7 +12852,7 @@
     function () {});
   }
 
-  var _excluded$D = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose", "onClickOutside"];
+  var _excluded$E = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose", "onClickOutside"];
   var getHasTransition = function getHasTransition(children) {
     return children.props ? Object.prototype.hasOwnProperty.call(children.props, "in") : false;
   };
@@ -12957,7 +12872,7 @@
       defaultOpen = _ref$open === void 0 ? false : _ref$open,
       onClose = _ref.onClose,
       onClickOutside = _ref.onClickOutside,
-      rest = _objectWithoutProperties(_ref, _excluded$D);
+      rest = _objectWithoutProperties(_ref, _excluded$E);
     var _useState = React.useState(defaultOpen),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
@@ -13098,7 +13013,7 @@
   });
   StyledCssTransition.displayName = "StyledCssTransition";
 
-  var _excluded$C = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
+  var _excluded$D = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
   var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       onClose = _ref.onClose,
@@ -13122,7 +13037,7 @@
       bodyClassName = _ref.bodyClassName,
       _ref$disableBackgroun2 = _ref.disableBackgroundClick,
       disableBackgroundClick = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
-      rest = _objectWithoutProperties(_ref, _excluded$C);
+      rest = _objectWithoutProperties(_ref, _excluded$D);
     var _useState = React.useState(defaultOpen),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
@@ -13215,13 +13130,13 @@
   });
   StyledHeader.displayName = "StyledHeader";
 
-  var _excluded$B = ["className", "size", "children"];
+  var _excluded$C = ["className", "size", "children"];
   var Header = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "small" : _ref$size,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$B);
+      rest = _objectWithoutProperties(_ref, _excluded$C);
     return /*#__PURE__*/React__default["default"].createElement(StyledHeader, _extends({
       type: "paper-2",
       className: classNames__default["default"]("c-header", className),
@@ -13237,7 +13152,7 @@
   })(["white-space:pre-wrap;overflow-wrap:break-word;resize:none;"]);
   StyledAutoResizeTextarea.displayName = "StyledAutoResizeTextarea";
 
-  var _excluded$A = ["minRows", "maxRows", "lineHeight", "onChange", "className", "preventNewRowOnEnter", "cursorAtTextEnd", "onKeyDown", "value"];
+  var _excluded$B = ["minRows", "maxRows", "lineHeight", "onChange", "className", "preventNewRowOnEnter", "cursorAtTextEnd", "onKeyDown", "value"];
   var AutoResizeTextarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$minRows = _ref.minRows,
       minRows = _ref$minRows === void 0 ? 1 : _ref$minRows,
@@ -13253,7 +13168,7 @@
       cursorAtTextEnd = _ref$cursorAtTextEnd === void 0 ? false : _ref$cursorAtTextEnd,
       onKeyDown = _ref.onKeyDown,
       value = _ref.value,
-      rest = _objectWithoutProperties(_ref, _excluded$A);
+      rest = _objectWithoutProperties(_ref, _excluded$B);
     var innerRef = React.useRef(null);
     var _useState = React.useState(minRows),
       _useState2 = _slicedToArray(_useState, 2),
@@ -13529,7 +13444,7 @@
   });
   StyledChoose.displayName = "StyledChoose";
 
-  var _excluded$z = ["children", "disabled", "active", "className"];
+  var _excluded$A = ["children", "disabled", "active", "className"];
   /**
    * Choose component
    */
@@ -13540,7 +13455,7 @@
       _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$z);
+      args = _objectWithoutProperties(_ref, _excluded$A);
     return /*#__PURE__*/React__default["default"].createElement(StyledChoose, _extends({
       disabled: disabled,
       className: classNames__default["default"]("c-choose", className),
@@ -13636,21 +13551,21 @@
   StyledLinkElements.displayName = "StyledLinkElements";
   StyledLink.displayName = "StyledLink";
 
-  var _excluded$y = ["children", "className"];
+  var _excluded$z = ["children", "className"];
   /**
    * Back link component
    */
   var BackLink = function BackLink(_ref) {
     var children = _ref.children,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$y);
+      args = _objectWithoutProperties(_ref, _excluded$z);
     return /*#__PURE__*/React__default["default"].createElement(StyledBackLink, _extends({
       className: classNames__default["default"]("c-back-link", className)
     }, args), children);
   };
   BackLink.displayName = "BackLink";
 
-  var _excluded$x = ["as", "children", "variant", "size", "disabled", "className"];
+  var _excluded$y = ["as", "children", "variant", "size", "disabled", "className"];
   /**
    * Link component
    */
@@ -13663,7 +13578,7 @@
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$x);
+      args = _objectWithoutProperties(_ref, _excluded$y);
     var Component = as || "a";
     return /*#__PURE__*/React__default["default"].createElement(StyledLink, _extends({
       ref: ref,
@@ -13774,7 +13689,7 @@
   })(["padding:20px 30px;", " ", ""], FontStyle, BoxSizingStyle);
   StyledDialogActions.displayName = "StyledDialogActions";
 
-  var _excluded$w = ["in", "children", "style", "timeout"];
+  var _excluded$x = ["in", "children", "style", "timeout"];
   var defaultStyle$1 = function defaultStyle(duration) {
     return {
       transition: "all ".concat(duration, "ms ease-in-out"),
@@ -13802,7 +13717,7 @@
       style = _ref.style,
       _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 500 : _ref$timeout,
-      rest = _objectWithoutProperties(_ref, _excluded$w);
+      rest = _objectWithoutProperties(_ref, _excluded$x);
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
       appear: true,
       in: inProp,
@@ -13817,7 +13732,7 @@
   };
   Fade.displayName = "Fade";
 
-  var _excluded$v = ["in", "children", "style", "timeout", "initialDirection"];
+  var _excluded$w = ["in", "children", "style", "timeout", "initialDirection"];
   var Slide = function Slide(_ref) {
     var _ref$in = _ref.in,
       inProp = _ref$in === void 0 ? false : _ref$in,
@@ -13827,7 +13742,7 @@
       timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
       _ref$initialDirection = _ref.initialDirection,
       initialDirection = _ref$initialDirection === void 0 ? "left" : _ref$initialDirection,
-      rest = _objectWithoutProperties(_ref, _excluded$v);
+      rest = _objectWithoutProperties(_ref, _excluded$w);
     var directionSign;
     switch (initialDirection) {
       case "right":
@@ -13880,12 +13795,12 @@
     return props.$direction === "right" && styled.css(["&.c-slide-enter{position:absolute;transform:translateX(-100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(100%);transition:all 200ms ease;}"]);
   });
 
-  var _excluded$u = ["children", "direction"];
+  var _excluded$v = ["children", "direction"];
   var SlideLeftRightTransition = function SlideLeftRightTransition(_ref) {
     var children = _ref.children,
       _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? "left" : _ref$direction,
-      props = _objectWithoutProperties(_ref, _excluded$u);
+      props = _objectWithoutProperties(_ref, _excluded$v);
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, _extends({
       timeout: 200,
       classNames: "c-slide",
@@ -13928,7 +13843,7 @@
   };
   ResizeTransition.displayName = "ResizeTransition";
 
-  var _excluded$t = ["in", "children", "style", "timeout"];
+  var _excluded$u = ["in", "children", "style", "timeout"];
   var defaultStyle = function defaultStyle(duration) {
     return {
       transition: "all ".concat(duration, "ms ease-in"),
@@ -13962,7 +13877,7 @@
       style = _ref.style,
       _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 200 : _ref$timeout,
-      rest = _objectWithoutProperties(_ref, _excluded$t);
+      rest = _objectWithoutProperties(_ref, _excluded$u);
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
       appear: true,
       in: inProp,
@@ -14012,13 +13927,13 @@
   };
   Scale.displayName = "Scale";
 
-  var _excluded$s = ["className", "children"];
+  var _excluded$t = ["className", "children"];
   // import { useDialogContext } from "./DialogContext";
 
   var DialogActions = function DialogActions(_ref) {
     var className = _ref.className,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$s);
+      rest = _objectWithoutProperties(_ref, _excluded$t);
     // useDialogContext();
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogActions, _extends({
@@ -14027,13 +13942,13 @@
   };
   DialogActions.displayName = "DialogActions";
 
-  var _excluded$r = ["className", "children"];
+  var _excluded$s = ["className", "children"];
   // import { useDialogContext } from "./DialogContext";
 
   var DialogContent = function DialogContent(_ref) {
     var className = _ref.className,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$r);
+      rest = _objectWithoutProperties(_ref, _excluded$s);
     // useDialogContext();
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogContent, _extends({
@@ -14054,7 +13969,7 @@
   };
   DialogContentDivider.displayName = "DialogContentDivider";
 
-  var _excluded$q = ["children", "className", "disableDefaultHeading"];
+  var _excluded$r = ["children", "className", "disableDefaultHeading"];
   // import { useDialogContext } from "./DialogContext";
 
   var DialogTitle = function DialogTitle(_ref) {
@@ -14062,7 +13977,7 @@
       className = _ref.className,
       _ref$disableDefaultHe = _ref.disableDefaultHeading,
       disableDefaultHeading = _ref$disableDefaultHe === void 0 ? false : _ref$disableDefaultHe,
-      rest = _objectWithoutProperties(_ref, _excluded$q);
+      rest = _objectWithoutProperties(_ref, _excluded$r);
     // useDialogContext();
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogTitle, _extends({
@@ -14071,7 +13986,7 @@
   };
   DialogTitle.displayName = "DialogTitle";
 
-  var _excluded$p = ["children", "open", "onClose", "className", "enableBackgroundClick", "disableCloseOnEsc", "animate", "onClickOutside"];
+  var _excluded$q = ["children", "open", "onClose", "className", "enableBackgroundClick", "disableCloseOnEsc", "animate", "onClickOutside"];
   var _Dialog = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       _ref$open = _ref.open,
@@ -14085,7 +14000,7 @@
       _ref$animate = _ref.animate,
       animate = _ref$animate === void 0 ? "slide" : _ref$animate,
       onClickOutside = _ref.onClickOutside,
-      rest = _objectWithoutProperties(_ref, _excluded$p);
+      rest = _objectWithoutProperties(_ref, _excluded$q);
     var animateDialog = function animateDialog() {
       switch (animate) {
         case "fade":
@@ -14334,7 +14249,7 @@
   });
   StyledPressed.displayName = "StyledPressed";
 
-  var _excluded$o = ["children", "active", "className"];
+  var _excluded$p = ["children", "active", "className"];
   /**
    * Pressed wrapper for button component
    * @deprecated
@@ -14344,7 +14259,7 @@
       _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$o);
+      args = _objectWithoutProperties(_ref, _excluded$p);
     return /*#__PURE__*/React__default["default"].createElement(StyledPressed, _extends({
       active: active,
       ref: ref,
@@ -14850,7 +14765,7 @@
   StyledToastMessage.displayName = "StyledToastMessage";
   StyledCloseSmallIcon.displayName = "StyledCloseSmallIcon";
 
-  var _excluded$n = ["text", "type", "onClose", "dismissible", "dropShadow", "timeout"];
+  var _excluded$o = ["text", "type", "onClose", "dismissible", "dropShadow", "timeout"];
   var ToastMessage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var text = _ref.text,
       type = _ref.type,
@@ -14861,7 +14776,7 @@
       dropShadow = _ref$dropShadow === void 0 ? false : _ref$dropShadow,
       _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 0 : _ref$timeout,
-      rest = _objectWithoutProperties(_ref, _excluded$n);
+      rest = _objectWithoutProperties(_ref, _excluded$o);
     var handleOnClose = React.useCallback(function () {
       if (typeof onClose === "function") {
         onClose();
@@ -14909,7 +14824,7 @@
   });
   StyledValueButton.displayName = "StyledValueButton";
 
-  var _excluded$m = ["active", "alwaysShowIcon", "icon", "label", "value"];
+  var _excluded$n = ["active", "alwaysShowIcon", "icon", "label", "value"];
   var ValueButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
@@ -14918,7 +14833,7 @@
       icon = _ref.icon,
       label = _ref.label,
       value = _ref.value,
-      args = _objectWithoutProperties(_ref, _excluded$m);
+      args = _objectWithoutProperties(_ref, _excluded$n);
     return /*#__PURE__*/React__default["default"].createElement(StyledValueButton, _extends({
       className: "c-value-button"
     }, args, {
@@ -14947,12 +14862,12 @@
   })(["border:none;margin:0;padding:0;width:auto;overflow:visible;cursor:pointer;background:transparent;outline:none;color:inherit;font:inherit;line-height:inherit;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;&::-moz-focus-inner{border:0;padding:0;}"]);
   StyledButton.displayName = "StyledButton";
 
-  var _excluded$l = ["children", "type"];
+  var _excluded$m = ["children", "type"];
   var Trigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? "button" : _ref$type,
-      rest = _objectWithoutProperties(_ref, _excluded$l);
+      rest = _objectWithoutProperties(_ref, _excluded$m);
     return /*#__PURE__*/React__default["default"].createElement(StyledButton, _extends({
       ref: ref,
       role: "button",
@@ -14998,7 +14913,7 @@
   });
   StyledCaretIcon.displayName = "StyledCaretIcon";
 
-  var _excluded$k = ["children", "type", "size", "invalid", "open", "endAdornment", "typographyProps"];
+  var _excluded$l = ["children", "type", "size", "invalid", "open", "endAdornment", "typographyProps"];
   var SelectTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       _ref$type = _ref.type,
@@ -15011,7 +14926,7 @@
       open = _ref$open === void 0 ? false : _ref$open,
       endAdornment = _ref.endAdornment,
       typographyProps = _ref.typographyProps,
-      rest = _objectWithoutProperties(_ref, _excluded$k);
+      rest = _objectWithoutProperties(_ref, _excluded$l);
     return /*#__PURE__*/React__default["default"].createElement(StyledSelectTrigger, _extends({
       ref: ref,
       role: "button",
@@ -15058,11 +14973,11 @@
   });
   StyledToggle.displayName = "StyledToggle";
 
-  var _excluded$j = ["hovered", "className"];
+  var _excluded$k = ["hovered", "className"];
   var Toggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var hovered = _ref.hovered,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$j);
+      args = _objectWithoutProperties(_ref, _excluded$k);
     return /*#__PURE__*/React__default["default"].createElement(StyledToggle, {
       className: classNames__default["default"]("c-toggle", className),
       $isHovered: hovered,
@@ -15166,7 +15081,7 @@
   })(["color:var(--color-theme-700);"]);
   ChipCloseIcon.displayName = "ChipCloseIcon";
 
-  var _excluded$i = ["leftAdornment", "label", "onClose", "size", "color", "backgroundColor", "closeClassName", "variant", "typographyProps"];
+  var _excluded$j = ["leftAdornment", "label", "onClose", "size", "color", "backgroundColor", "closeClassName", "variant", "typographyProps"];
   var Chip = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var leftAdornment = _ref.leftAdornment,
       label = _ref.label,
@@ -15178,7 +15093,7 @@
       closeClassName = _ref.closeClassName,
       variant = _ref.variant,
       typographyProps = _ref.typographyProps,
-      rest = _objectWithoutProperties(_ref, _excluded$i);
+      rest = _objectWithoutProperties(_ref, _excluded$j);
     var showClose = typeof onClose === "function";
     var _variant = React.useMemo(function () {
       if (typeof variant !== "undefined") {
@@ -15254,7 +15169,7 @@
     return isFirst.current;
   };
 
-  var _excluded$h = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear"];
+  var _excluded$i = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear"];
   var ComboBox = function ComboBox(_ref) {
     var _comboBoxRef$current2, _comboBoxRef$current3;
     var _ref$options = _ref.options,
@@ -15287,7 +15202,7 @@
       scrollWrapper = _ref.scrollWrapper,
       onClose = _ref.onClose,
       onClear = _ref.onClear,
-      prop = _objectWithoutProperties(_ref, _excluded$h);
+      prop = _objectWithoutProperties(_ref, _excluded$i);
     var selectedName = React.useMemo(function () {
       var value = "";
       if (!selected) {
@@ -15691,11 +15606,11 @@
   })(["display:flex;justify-content:center;gap:12px;align-items:center;height:32px;padding:4px 16px 4px 4px;position:relative;background:none;border:none;cursor:pointer;&:before{content:\"\";display:block;height:2px;width:0%;position:absolute;left:16px;background:var(--color-primary);transition:ease 0.3s all;border-radius:30px;opacity:0;}&:hover{", "{color:var(--page-paper-main);}&:before{height:32px;width:100%;left:0;opacity:1;}", "{fill:var(--page-paper-main);transform:rotate(90deg);transition:ease 0.3s;}}"], StyledText, StyledAddCrossIcon);
   StyledAddToListButton.displayName = "StyledAddToListButton";
 
-  var _excluded$g = ["text", "className"];
+  var _excluded$h = ["text", "className"];
   var AddToListButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var text = _ref.text,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$g);
+      rest = _objectWithoutProperties(_ref, _excluded$h);
     return /*#__PURE__*/React__default["default"].createElement(StyledAddToListButton, _extends({
       ref: ref,
       className: classNames__default["default"]("c--add-to-list-btn", className)
@@ -15878,11 +15793,11 @@
   };
   ProgressRing.displayName = "ProgressRing";
 
-  var _excluded$f = ["radius"];
+  var _excluded$g = ["radius"];
   var ProgressPie = function ProgressPie(_ref) {
     var _ref$radius = _ref.radius,
       radius = _ref$radius === void 0 ? 20 : _ref$radius,
-      rest = _objectWithoutProperties(_ref, _excluded$f);
+      rest = _objectWithoutProperties(_ref, _excluded$g);
     return /*#__PURE__*/React__default["default"].createElement(ProgressRing, _extends({}, rest, {
       stroke: radius,
       radius: radius
@@ -16206,7 +16121,7 @@
   ThumbsDownIcon.displayName = "ThumbsDownIcon";
   var ThumbsDownIcon$1 = ThumbsDownIcon;
 
-  var _excluded$e = ["invalid", "required", "size", "children", "className", "weight", "htmlFor"];
+  var _excluded$f = ["invalid", "required", "size", "children", "className", "weight", "htmlFor"];
   var Label = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$invalid = _ref.invalid,
       invalid = _ref$invalid === void 0 ? false : _ref$invalid,
@@ -16219,7 +16134,7 @@
       _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? "bold" : _ref$weight,
       htmlFor = _ref.htmlFor,
-      props = _objectWithoutProperties(_ref, _excluded$e);
+      props = _objectWithoutProperties(_ref, _excluded$f);
     var color = invalid ? "alert" : "primary";
     var variant = size === "regular" ? "Body 2" : "Caption 1";
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
@@ -16236,6 +16151,88 @@
 
   var GlobalStyle = styled.createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--color-pale-green:#c3e799;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--red-alert:rgb(237,97,97);-- --warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}html{color-scheme:light;}html{&.neon{color-scheme:dark;}}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}.c-cooltip{position:relative;--cooltip-spacing:0.5rem;--cooltip-padding:0.25rem 0.625rem;--cooltip-max-width:12.5rem;--cooltip-transition-duration:0.15s,0.1s,0.15s;--cooltip-transition-delay:0.6s;--cooltip-timing:ease,ease,cubic-bezier(0.39,0.575,0.565,1);}.c-cooltip::after{pointer-events:none;content:attr(data-tooltip);position:absolute;color:#fff;opacity:0;background-color:rgba(0,0,0,0.9);border-radius:0.5rem;font-size:0.75rem;font-weight:500;line-height:1.3;max-width:var(--cooltip-max-width);padding:var(--cooltip-padding);text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.c-cooltip--top::after{bottom:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--right::after{left:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip--bottom::after{top:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--left::after{right:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip:disabled::after,[aria-pressed=\"true\"]::after{display:none;}@media (hover:hover){.c-cooltip--top:not(:focus):hover::after,.c-cooltip--bottom:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1) translateX(-50%);opacity:1;}.c-cooltip--right:not(:focus):hover::after,.c-cooltip--left:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1);opacity:1;}}"]);
 
+  var StyledDiv = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledDiv",
+    componentId: "sc-1wapx2a-0"
+  })(["", " ", " ", ""], FontStyle, BoxSizingStyle, {
+    "position": "relative",
+    "display": "inline-block",
+    "maxWidth": "100%"
+  });
+  var StyledSpan = styled__default["default"](Typography).withConfig({
+    displayName: "Styles__StyledSpan",
+    componentId: "sc-1wapx2a-1"
+  })(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre;font-variant-numeric:tabular-nums;", " &:empty:before{content:\" \";}"], function (_ref) {
+    var $disabled = _ref.$disabled;
+    return $disabled && styled.css(["visibility:visible;"]);
+  });
+  StyledSpan.displayName = "StyledSpan";
+  var StyledInput$1 = styled__default["default"](Typography).withConfig({
+    displayName: "Styles__StyledInput",
+    componentId: "sc-1wapx2a-2"
+  })(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;font-variant-numeric:tabular-nums;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;&:disabled{display:none;}"], {
+    "position": "absolute",
+    "inset": "0px",
+    "boxSizing": "border-box",
+    "width": "100%",
+    "overflow": "hidden",
+    "whiteSpace": "nowrap",
+    "borderRadius": "0.375rem",
+    "borderWidth": "1px",
+    "borderStyle": "solid",
+    "borderColor": "transparent",
+    ":focus-within": {
+      "overflow": "scroll",
+      "borderColor": "var(--color-theme-700)"
+    },
+    ":hover": {
+      "borderColor": "var(--color-theme-700)"
+    }
+  });
+  StyledInput$1.displayName = "StyledInput";
+
+  var _excluded$e = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef", "children"];
+  var EditableContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var className = _ref.className,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "Body 2" : _ref$variant,
+      weight = _ref.weight,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      inputProps = _ref.inputProps,
+      wrapRef = _ref.wrapRef,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded$e);
+    var intInputRef = React.useRef(null);
+    var handleRef = useForkRef(ref, intInputRef);
+    var handleBlur = React.useCallback(function (evt) {
+      if (intInputRef !== null && intInputRef !== void 0 && intInputRef.current) {
+        intInputRef.current.scrollLeft = 0;
+      }
+      typeof (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === "function" && (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur(evt));
+    }, [inputProps]);
+    return /*#__PURE__*/React__default["default"].createElement(StyledDiv, _extends({
+      className: className,
+      ref: wrapRef
+    }, props), /*#__PURE__*/React__default["default"].createElement(StyledSpan, {
+      variant: variant,
+      forwardedAs: "span",
+      weight: weight,
+      $disabled: disabled,
+      className: "presentation"
+    }, children ? children : inputProps === null || inputProps === void 0 ? void 0 : inputProps.value), /*#__PURE__*/React__default["default"].createElement(StyledInput$1, _extends({}, inputProps, {
+      ref: handleRef,
+      forwardedAs: "input",
+      variant: variant,
+      weight: weight,
+      value: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value,
+      onBlur: handleBlur,
+      disabled: disabled,
+      "data-form-type": "other"
+    })));
+  });
+  EditableContent.displayName = "EditableContent";
+
   var _excluded$d = ["onSave", "onCancel", "value", "inputProps", "allowEmptyString"];
   var EditableText = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var onSave = _ref.onSave,
@@ -16301,41 +16298,104 @@
   });
   EditableText.displayName = "EditableText";
 
-  var _excluded$c = ["value", "onCancel", "onSave", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className", "inputProps"];
-  var EditableHours = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-    var value = _ref.value,
-      onCancel = _ref.onCancel,
-      onSave = _ref.onSave,
-      allowEmptyValue = _ref.allowEmptyValue,
-      _ref$withLeadingZero = _ref.withLeadingZero,
-      withLeadingZero = _ref$withLeadingZero === void 0 ? true : _ref$withLeadingZero,
-      _ref$validation = _ref.validation,
-      validation = _ref$validation === void 0 ? validateTimeInput : _ref$validation,
-      _ref$incrementOnlySel = _ref.incrementOnlySelected,
-      incrementOnlySelected = _ref$incrementOnlySel === void 0 ? false : _ref$incrementOnlySel,
-      _ref$minuteIncrement = _ref.minuteIncrement,
-      minuteIncrement = _ref$minuteIncrement === void 0 ? 1 : _ref$minuteIncrement,
-      className = _ref.className,
-      inputProps = _ref.inputProps,
-      rest = _objectWithoutProperties(_ref, _excluded$c);
+  var _excluded$c = ["value", "onCancel", "onSave", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className", "onEnterKeyPress", "inputProps", "onClick", "ticking", "onFocus"];
+  var StyledEditableContent = styled__default["default"](EditableContent).withConfig({
+    displayName: "EditableHours__StyledEditableContent",
+    componentId: "sc-nvi34j-0"
+  })(["", ""], function (_ref) {
+    var $ticking = _ref.$ticking;
+    return $ticking && styled.css([".presentation{visibility:visible;}input{opacity:0;}"]);
+  });
+  var EditableHours = /*#__PURE__*/React__default["default"].forwardRef(function (_ref2, ref) {
+    var defaultValue = _ref2.value,
+      onCancel = _ref2.onCancel,
+      onSave = _ref2.onSave,
+      allowEmptyValue = _ref2.allowEmptyValue,
+      _ref2$withLeadingZero = _ref2.withLeadingZero,
+      withLeadingZero = _ref2$withLeadingZero === void 0 ? true : _ref2$withLeadingZero,
+      _ref2$validation = _ref2.validation,
+      validation = _ref2$validation === void 0 ? validateTimeInput : _ref2$validation,
+      _ref2$incrementOnlySe = _ref2.incrementOnlySelected,
+      incrementOnlySelected = _ref2$incrementOnlySe === void 0 ? false : _ref2$incrementOnlySe,
+      _ref2$minuteIncrement = _ref2.minuteIncrement,
+      minuteIncrement = _ref2$minuteIncrement === void 0 ? 1 : _ref2$minuteIncrement,
+      className = _ref2.className,
+      externalEnterKeyPress = _ref2.onEnterKeyPress,
+      externalInputProps = _ref2.inputProps,
+      externalOnClick = _ref2.onClick,
+      ticking = _ref2.ticking,
+      onFocus = _ref2.onFocus,
+      rest = _objectWithoutProperties(_ref2, _excluded$c);
     var inputRef = React.useRef(null);
     var handleRef = useForkRef(ref, inputRef);
-    return /*#__PURE__*/React__default["default"].createElement(HoursWrapper, {
-      value: value,
-      onCancel: onCancel,
-      onSave: onSave,
-      incrementOnlySelected: incrementOnlySelected,
-      minuteIncrement: minuteIncrement,
-      allowEmptyValue: allowEmptyValue,
-      withLeadingZero: withLeadingZero,
-      validation: validation
-    }, /*#__PURE__*/React__default["default"].createElement(EditableContent, _extends({
+    var _useInputHours = useInputHours({
+        value: defaultValue,
+        withLeadingZero: withLeadingZero,
+        onSave: onSave,
+        validation: validation,
+        allowEmptyValue: allowEmptyValue,
+        onCancel: onCancel,
+        minuteIncrement: minuteIncrement,
+        incrementOnlySelected: incrementOnlySelected,
+        onEnterKeyPress: externalEnterKeyPress,
+        onClick: externalOnClick
+      }, inputRef),
+      inputProps = _useInputHours.inputProps,
+      setCurrentValue = _useInputHours.setCurrentValue,
+      setPrevValue = _useInputHours.setPrevValue;
+    var value = inputProps.value,
+      onBlur = inputProps.onBlur,
+      onKeyDown = inputProps.onKeyDown,
+      onChange = inputProps.onChange,
+      onClick = inputProps.onClick,
+      onDoubleClick = inputProps.onDoubleClick;
+    React.useEffect(function () {
+      var _value;
+      if (defaultValue !== undefined) {
+        _value = decimalToHours(defaultValue, withLeadingZero);
+      }
+      setCurrentValue(function (prevState) {
+        if (prevState !== _value) {
+          return _value;
+        }
+        return prevState;
+      });
+      setPrevValue(function (prevState) {
+        if (prevState !== _value) {
+          return _value;
+        }
+        return prevState;
+      });
+    }, [defaultValue, setCurrentValue, setPrevValue, withLeadingZero]);
+    var splitTime = React.useMemo(function () {
+      if (value && ticking) {
+        var _value$split = value.split(":"),
+          _value$split2 = _slicedToArray(_value$split, 2),
+          hours = _value$split2[0],
+          minutes = _value$split2[1];
+        return {
+          hours: hours,
+          minutes: minutes
+        };
+      }
+    }, [value, ticking]);
+    return /*#__PURE__*/React__default["default"].createElement(StyledEditableContent, _extends({
       ref: handleRef,
-      inputProps: _objectSpread2(_objectSpread2({}, inputProps), {}, {
-        type: "text",
-        className: classNames__default["default"]("c-input", className)
-      })
-    }, rest)));
+      className: className,
+      inputProps: _objectSpread2(_objectSpread2({}, externalInputProps), {}, {
+        value: value,
+        onBlur: onBlur,
+        onKeyDown: onKeyDown,
+        onChange: onChange,
+        onClick: onClick,
+        onDoubleClick: onDoubleClick,
+        onFocus: onFocus,
+        type: "text"
+      }),
+      $ticking: ticking
+    }, rest), ticking && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, splitTime === null || splitTime === void 0 ? void 0 : splitTime.hours, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "tw-animate-ping"
+    }, ":"), splitTime === null || splitTime === void 0 ? void 0 : splitTime.minutes));
   });
   EditableHours.displayName = "EditableHours";