@activecollab/components 2.0.401 → 2.0.403

package/dist/index.js

@@ -15529,6 +15529,198 @@
   StyledButton$1.displayName = "StyledButton";
   StyledControl.displayName = "StyledControl";
 
+  var _excluded$1m = ["mixed", "data-testid"];
+
+  /**
+   * @component CheckboxIcon
+   * @description
+   *
+   * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
+   * The Icon component is
+   * customizable, allowing for variations in size, color, and style to fit the needs of the application.
+   *
+   *
+   * @example
+   * return (
+   *   <CheckboxIcon className="mr-2" showAdditionalIcon={true} />
+   * )
+   *
+   * @see
+   * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
+   * @see
+   * https://design.activecollab.com/docs/foundations/icons
+   */
+  var CheckboxIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
+    var mixed = _ref.mixed,
+      testId = _ref["data-testid"],
+      props = _objectWithoutProperties(_ref, _excluded$1m);
+    // const [animate, setAnimate] = useState(false);
+    // const mountRef = useRef(false);
+
+    // useEffect(() => {
+    //   if (mountRef.current) {
+    //     setAnimate(true);
+    //   } else {
+    //     mountRef.current = true;
+    //   }
+    // }, [mixed]);
+
+    if (mixed) {
+      return /*#__PURE__*/React__default["default"].createElement("svg", {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-testid": "checkbox-mixed-icon"
+      }, /*#__PURE__*/React__default["default"].createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M14.2222 0C15.2041 0 16 0.795938 16 1.77778V14.2222C16 15.2041 15.2041 16 14.2222 16H1.77778C0.795938 16 0 15.2041 0 14.2222V1.77778C0 0.795938 0.795938 0 1.77778 0H14.2222Z",
+        fill: "var(--color-secondary)"
+      }), /*#__PURE__*/React__default["default"].createElement("rect", {
+        x: "3",
+        y: "7",
+        width: 10,
+        height: "2",
+        rx: "1",
+        fill: "var(--page-paper-main)"
+      }));
+    }
+    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+      width: 16,
+      height: 16,
+      viewBox: "0 0 16 16",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "var(--color-theme-600)",
+      focusable: false,
+      ref: svgRef
+    }, props, {
+      "data-testid": testId
+    }), /*#__PURE__*/React__default["default"].createElement("g", {
+      fillRule: "evenodd"
+    }, /*#__PURE__*/React__default["default"].createElement("rect", {
+      stroke: "#8E8E8E",
+      x: 0.5,
+      y: 0.5,
+      width: 15,
+      height: 15,
+      rx: 2
+    }), /*#__PURE__*/React__default["default"].createElement("path", {
+      stroke: "#979797",
+      strokeWidth: 2,
+      d: "M12.243 5l-5.657 5.657-2.829-2.829"
+    })));
+  });
+  CheckboxIcon.displayName = "CheckboxIcon";
+  var CheckboxIcon$1 = CheckboxIcon;
+
+  var StyledInput$4 = styled__default["default"].input.withConfig({
+    displayName: "Styles__StyledInput",
+    componentId: "sc-y7zymm-0"
+  })(["border:0px;clip:rect(0px,0px,0px,0px);cursor:pointer;height:1px;margin:-1px;opacity:0;overflow:hidden;padding:0px;position:absolute;white-space:nowrap;width:1px;"]);
+  StyledInput$4.displayName = "StyledInput";
+  var StyledLabel$1 = styled__default["default"].label.withConfig({
+    displayName: "Styles__StyledLabel",
+    componentId: "sc-y7zymm-1"
+  })([""]);
+  StyledLabel$1.displayName = "StyledLabel";
+  var StyledCheckbox$1 = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledCheckbox",
+    componentId: "sc-y7zymm-2"
+  })(["height:16px;width:16px;position:relative;transition-duration:0.2s;border-radius:2px;path{transition-duration:0.2s;stroke:transparent;stroke-dashoffset:12;stroke-dasharray:12;}svg{cursor:pointer;border-radius:2px;fill:transparent;}", " rect{transition-duration:0.2s;", " ", "}", ":disabled ~ ", "{opacity:0.5;cursor:not-allowed;}", ":focus ~ ", "{", "}&:not(.c-checkbox__controlled) ", ":hover:not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);", " stroke-width:3px;}}", " ", ":checked ~ ", "{path{", "}rect{stroke:var(--color-secondary);stroke-width:19px;", "}}"], function (props) {
+    return props.$disabled && styled.css(["svg{cursor:not-allowed;}"]);
+  }, function (props) {
+    return !props.mixed && styled.css(["stroke:var(--color-theme-500);"]);
+  }, function (props) {
+    return props.mixed && styled.css(["stroke:transparent;"]);
+  }, StyledInput$4, StyledLabel$1, StyledInput$4, StyledLabel$1, function (props) {
+    return !props.mixed && styled.css(["rect{stroke:var(--color-secondary);stroke-width:3px;}"]);
+  }, StyledInput$4, StyledLabel$1, function (props) {
+    return props.mixed && styled.css(["stroke:transparent;"]);
+  }, function (props) {
+    return props.hover && !props.mixed && styled.css(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput$4, StyledLabel$1);
+  }, StyledInput$4, StyledLabel$1, function (props) {
+    return !props.mixed && styled.css(["stroke:var(--page-paper-main);stroke-dashoffset:24;"]);
+  }, function (props) {
+    return props.mixed && styled.css(["stroke:transparent;"]);
+  });
+  StyledCheckbox$1.displayName = "StyledCheckbox";
+
+  var _excluded$1l = ["className", "hover", "id", "mixed", "checked", "onChange", "disabled"];
+  /**
+   * Checkbox component
+   */
+  var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var className = _ref.className,
+      hover = _ref.hover,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? "checkbox" : _ref$id,
+      _ref$mixed = _ref.mixed,
+      mixed = _ref$mixed === void 0 ? false : _ref$mixed,
+      checked = _ref.checked,
+      onChange = _ref.onChange,
+      disabled = _ref.disabled,
+      rest = _objectWithoutProperties(_ref, _excluded$1l);
+    var _useState = React.useState(mixed && !checked),
+      _useState2 = _slicedToArray(_useState, 2),
+      indeterminate = _useState2[0],
+      setIndeterminate = _useState2[1];
+    var _useState3 = React.useState(checked),
+      _useState4 = _slicedToArray(_useState3, 2),
+      initialChecked = _useState4[0],
+      setInitialChecked = _useState4[1];
+    var handleChange = React.useCallback(function (e) {
+      typeof onChange === "function" && onChange(e);
+      setInitialChecked(function (prev) {
+        return !prev;
+      });
+      setIndeterminate(false);
+    }, [onChange]);
+    React.useEffect(function () {
+      if (checked !== initialChecked) {
+        setInitialChecked(checked);
+        setIndeterminate(false);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [checked]);
+    React.useEffect(function () {
+      if (mixed !== indeterminate && !checked) {
+        setIndeterminate(mixed);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mixed]);
+    return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox$1, {
+      className: classNames__default["default"]("c-checkbox", {
+        "c-checkbox__hover": hover,
+        "c-checkbox__controlled": typeof hover === "boolean"
+      }, className),
+      hover: hover,
+      tabIndex: -1,
+      mixed: indeterminate,
+      $disabled: disabled
+    }, /*#__PURE__*/React__default["default"].createElement(StyledInput$4, _extends({
+      role: "checkbox",
+      id: id,
+      className: "c-checkbox--input",
+      type: "checkbox",
+      ref: ref
+    }, rest, {
+      checked: initialChecked,
+      onChange: handleChange,
+      disabled: disabled
+    })), /*#__PURE__*/React__default["default"].createElement(StyledLabel$1, {
+      htmlFor: id,
+      className: "c-checkbox--label"
+    }, /*#__PURE__*/React__default["default"].createElement(CheckboxIcon$1, {
+      "data-testid": "checkbox-icon",
+      height: 16,
+      width: 16,
+      mixed: indeterminate
+    })));
+  });
+  Checkbox.displayName = "Checkbox";
+
   var size = {
     sm: "640px",
     md: "768px",
@@ -15570,13 +15762,13 @@
   })(["padding:20px 30px;", " ", ""], FontStyle, BoxSizingStyle);
   StyledDialogActions.displayName = "StyledDialogActions";
 
-  var _excluded$1m = ["className", "children"];
+  var _excluded$1k = ["className", "children"];
   // import { useDialogContext } from "./DialogContext";
 
   var DialogActions = function DialogActions(_ref) {
     var className = _ref.className,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$1m);
+      rest = _objectWithoutProperties(_ref, _excluded$1k);
     // useDialogContext();
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogActions, _extends({
@@ -15585,13 +15777,13 @@
   };
   DialogActions.displayName = "DialogActions";
 
-  var _excluded$1l = ["className", "children"];
+  var _excluded$1j = ["className", "children"];
   // import { useDialogContext } from "./DialogContext";
 
   var DialogContent = function DialogContent(_ref) {
     var className = _ref.className,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$1l);
+      rest = _objectWithoutProperties(_ref, _excluded$1j);
     // useDialogContext();
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogContent, _extends({
@@ -15612,10 +15804,10 @@
   };
   DialogContentDivider.displayName = "DialogContentDivider";
 
-  var _excluded$1k = ["children"];
+  var _excluded$1i = ["children"];
   var Header3 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$1k);
+      props = _objectWithoutProperties(_ref, _excluded$1i);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: "bold",
       variant: "Header 3",
@@ -15624,7 +15816,7 @@
   });
   Header3.displayName = "Header3";
 
-  var _excluded$1j = ["children", "className", "disableDefaultHeading"];
+  var _excluded$1h = ["children", "className", "disableDefaultHeading"];
   // import { useDialogContext } from "./DialogContext";
 
   var DialogTitle = function DialogTitle(_ref) {
@@ -15632,7 +15824,7 @@
       className = _ref.className,
       _ref$disableDefaultHe = _ref.disableDefaultHeading,
       disableDefaultHeading = _ref$disableDefaultHe === void 0 ? false : _ref$disableDefaultHe,
-      rest = _objectWithoutProperties(_ref, _excluded$1j);
+      rest = _objectWithoutProperties(_ref, _excluded$1h);
     // useDialogContext();
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogTitle, _extends({
@@ -15661,7 +15853,7 @@
     function () {});
   }
 
-  var _excluded$1i = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose", "onClickOutside"];
+  var _excluded$1g = ["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;
   };
@@ -15681,7 +15873,7 @@
       defaultOpen = _ref$open === void 0 ? false : _ref$open,
       onClose = _ref.onClose,
       onClickOutside = _ref.onClickOutside,
-      rest = _objectWithoutProperties(_ref, _excluded$1i);
+      rest = _objectWithoutProperties(_ref, _excluded$1g);
     var _useState = React.useState(defaultOpen),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
@@ -15749,7 +15941,7 @@
   });
   Modal.displayName = "Modal";
 
-  var _excluded$1h = ["in", "children", "style", "timeout"];
+  var _excluded$1f = ["in", "children", "style", "timeout"];
   var defaultStyle$2 = function defaultStyle(duration) {
     return {
       transition: "all ".concat(duration, "ms ease-in-out"),
@@ -15777,7 +15969,7 @@
       style = _ref.style,
       _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 500 : _ref$timeout,
-      rest = _objectWithoutProperties(_ref, _excluded$1h);
+      rest = _objectWithoutProperties(_ref, _excluded$1f);
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
       appear: true,
       in: inProp,
@@ -15792,7 +15984,7 @@
   };
   Fade.displayName = "Fade";
 
-  var _excluded$1g = ["in", "children", "style", "timeout", "initialDirection"];
+  var _excluded$1e = ["in", "children", "style", "timeout", "initialDirection"];
   var Slide = function Slide(_ref) {
     var _ref$in = _ref.in,
       inProp = _ref$in === void 0 ? false : _ref$in,
@@ -15802,7 +15994,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$1g);
+      rest = _objectWithoutProperties(_ref, _excluded$1e);
     var directionSign;
     switch (initialDirection) {
       case "right":
@@ -15908,12 +16100,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$1f = ["children", "direction"];
+  var _excluded$1d = ["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$1f);
+      props = _objectWithoutProperties(_ref, _excluded$1d);
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, _extends({
       timeout: 200,
       classNames: "c-slide",
@@ -15956,7 +16148,7 @@
   };
   ResizeTransition.displayName = "ResizeTransition";
 
-  var _excluded$1e = ["in", "children", "style", "timeout"];
+  var _excluded$1c = ["in", "children", "style", "timeout"];
   var defaultStyle = function defaultStyle(duration) {
     return {
       transition: "all ".concat(duration, "ms ease-in"),
@@ -15990,7 +16182,7 @@
       style = _ref.style,
       _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 200 : _ref$timeout,
-      rest = _objectWithoutProperties(_ref, _excluded$1e);
+      rest = _objectWithoutProperties(_ref, _excluded$1c);
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
       appear: true,
       in: inProp,
@@ -16040,7 +16232,7 @@
   };
   Scale.displayName = "Scale";
 
-  var _excluded$1d = ["children", "open", "onClose", "className", "enableBackgroundClick", "disableCloseOnEsc", "animate", "onClickOutside"];
+  var _excluded$1b = ["children", "open", "onClose", "className", "enableBackgroundClick", "disableCloseOnEsc", "animate", "onClickOutside"];
   var _Dialog = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       _ref$open = _ref.open,
@@ -16054,7 +16246,7 @@
       _ref$animate = _ref.animate,
       animate = _ref$animate === void 0 ? "slide" : _ref$animate,
       onClickOutside = _ref.onClickOutside,
-      rest = _objectWithoutProperties(_ref, _excluded$1d);
+      rest = _objectWithoutProperties(_ref, _excluded$1b);
     var animateDialog = function animateDialog() {
       switch (animate) {
         case "fade":
@@ -16095,6 +16287,13 @@
     Actions: DialogActions
   });
 
+  var StyledConfirmation = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledConfirmation",
+    componentId: "sc-1hepb1k-0"
+  })(["display:flex;align-items:center;gap:8px;margin-top:16px;label{cursor:pointer;}"]);
+  StyledConfirmation.displayName = "StyledConfirmation";
+
+  var CONFIRMATION_CHECKBOX_ID = "confirm-dialog-confirmation";
   var ConfirmDialog = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$open = _ref.open,
       open = _ref$open === void 0 ? false : _ref$open,
@@ -16112,10 +16311,24 @@
       _ref$shouldShowCancel = _ref.shouldShowCancelButton,
       shouldShowCancelButton = _ref$shouldShowCancel === void 0 ? true : _ref$shouldShowCancel,
       _ref$isLoading = _ref.isLoading,
-      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      confirmationLabel = _ref.confirmationLabel;
+    var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      confirmed = _useState2[0],
+      setConfirmed = _useState2[1];
+    var isConfirmBlocked = Boolean(confirmationLabel) && !confirmed;
+    var handleToggleConfirmed = React.useCallback(function (event) {
+      return setConfirmed(event.target.checked);
+    }, []);
+    React.useEffect(function () {
+      if (!open) {
+        setConfirmed(false);
+      }
+    }, [open]);
     React.useEffect(function () {
       var handleKeyDown = function handleKeyDown(event) {
-        if (event.key === "Enter" && onConfirm) {
+        if (event.key === "Enter" && onConfirm && !isConfirmBlocked) {
           event.preventDefault();
           onConfirm();
         }
@@ -16126,7 +16339,7 @@
       return function () {
         window.removeEventListener("keydown", handleKeyDown);
       };
-    }, [open, onConfirm]);
+    }, [open, onConfirm, isConfirmBlocked]);
     return /*#__PURE__*/React__default["default"].createElement(Dialog, {
       ref: ref,
       open: open,
@@ -16137,13 +16350,24 @@
       lineHeight: "loose",
       color: "secondary",
       whitespace: "pre-line"
-    }, dialogContent)), /*#__PURE__*/React__default["default"].createElement(Dialog.ContentDivider, null), /*#__PURE__*/React__default["default"].createElement(Dialog.Actions, null, /*#__PURE__*/React__default["default"].createElement(Button, {
+    }, dialogContent), confirmationLabel ? /*#__PURE__*/React__default["default"].createElement(StyledConfirmation, {
+      className: "c-confirm-dialog--confirmation"
+    }, /*#__PURE__*/React__default["default"].createElement(Checkbox, {
+      id: CONFIRMATION_CHECKBOX_ID,
+      checked: confirmed,
+      onChange: handleToggleConfirmed,
+      disabled: isLoading
+    }), /*#__PURE__*/React__default["default"].createElement("label", {
+      htmlFor: CONFIRMATION_CHECKBOX_ID
+    }, /*#__PURE__*/React__default["default"].createElement(Body2, {
+      color: "secondary"
+    }, confirmationLabel))) : null), /*#__PURE__*/React__default["default"].createElement(Dialog.ContentDivider, null), /*#__PURE__*/React__default["default"].createElement(Dialog.Actions, null, /*#__PURE__*/React__default["default"].createElement(Button, {
       variant: "primary",
       style: {
         marginRight: "12px"
       },
       onClick: onConfirm,
-      disabled: isLoading
+      disabled: isLoading || isConfirmBlocked
     }, confirmBtnText), shouldShowCancelButton ? /*#__PURE__*/React__default["default"].createElement(Button, {
       variant: "secondary",
       "data-action": "cancel",
@@ -17584,10 +17808,10 @@
     componentId: "sc-1n0a2yl-0"
   })(["width:70%;background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.05) 50%,rgba(255,255,255,0) 60% );background-size:400%;height:16px;border-radius:8px;", " &{background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0) 60% );background-size:500%;}animation-duration:1s;animation-iteration-count:infinite;animation-name:", ";animation-timing-function:linear;animation-direction:reverse;"], DARK_THEME_SELECTOR, linearAnimation);
 
-  var _excluded$1c = ["className"];
+  var _excluded$1a = ["className"];
   var SkeletonLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$1c);
+      rest = _objectWithoutProperties(_ref, _excluded$1a);
     return /*#__PURE__*/React__default["default"].createElement(StyledSkeletonLoader, _extends({
       ref: ref,
       className: classNames__default["default"]("c-loader c-loader--linear", className)
@@ -17601,10 +17825,10 @@
     componentId: "sc-1f35d5h-0"
   })(["display:inline-block;text-align:center;& > span{display:inline-block;width:18px;height:18px;background-color:#777;border-radius:100%;animation:", " 1.4s infinite ease-in-out both;}span:nth-child(1){animation-delay:-0.32s;}span:nth-child(2){animation-delay:-0.16s;}"], dotAnimation);
 
-  var _excluded$1b = ["className"];
+  var _excluded$19 = ["className"];
   var DotsLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$1b);
+      rest = _objectWithoutProperties(_ref, _excluded$19);
     return /*#__PURE__*/React__default["default"].createElement(StyledDotsLoader, _extends({
       ref: ref,
       className: classNames__default["default"]("c-loader c-loader--dots", className)
@@ -17626,7 +17850,7 @@
     return props.$activeColorPercentage === "75%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
   });
 
-  var _excluded$1a = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
+  var _excluded$18 = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
   var SpinnerLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$radius = _ref.radius,
       radius = _ref$radius === void 0 ? 10 : _ref$radius,
@@ -17641,7 +17865,7 @@
       _ref$rotateDurationIn = _ref.rotateDurationInSeconds,
       rotateDurationInSeconds = _ref$rotateDurationIn === void 0 ? 0.75 : _ref$rotateDurationIn,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$1a);
+      rest = _objectWithoutProperties(_ref, _excluded$18);
     return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader$1, _extends({
       ref: ref,
       className: className,
@@ -17680,7 +17904,7 @@
   });
   StyledLinearLoader.displayName = "StyledLinearLoader";
 
-  var _excluded$19 = ["height", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "animationDuration"];
+  var _excluded$17 = ["height", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "animationDuration"];
   var LinearLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$height = _ref.height,
       height = _ref$height === void 0 ? 4 : _ref$height,
@@ -17692,7 +17916,7 @@
       activeColorPercentage = _ref$activeColorPerce === void 0 ? "25%" : _ref$activeColorPerce,
       _ref$animationDuratio = _ref.animationDuration,
       animationDuration = _ref$animationDuratio === void 0 ? 0.75 : _ref$animationDuratio,
-      rest = _objectWithoutProperties(_ref, _excluded$19);
+      rest = _objectWithoutProperties(_ref, _excluded$17);
     return /*#__PURE__*/React__default["default"].createElement(StyledLinearLoader, _extends({
       ref: ref,
       $height: height,
@@ -17704,7 +17928,7 @@
   });
   LinearLoader.displayName = "LinearLoader";
 
-  var _excluded$18 = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue", "loading", "loadingRows"];
+  var _excluded$16 = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue", "loading", "loadingRows"];
   var SortDirection = /*#__PURE__*/function (SortDirection) {
     SortDirection["None"] = "none";
     SortDirection["Asc"] = "asc";
@@ -17754,7 +17978,7 @@
       loading = _ref.loading,
       _ref$loadingRows = _ref.loadingRows,
       loadingRows = _ref$loadingRows === void 0 ? 7 : _ref$loadingRows,
-      args = _objectWithoutProperties(_ref, _excluded$18);
+      args = _objectWithoutProperties(_ref, _excluded$16);
     var _useState = React.useState(sortDirection),
       _useState2 = _slicedToArray(_useState, 2),
       columnDirection = _useState2[0],
@@ -18114,7 +18338,7 @@
   });
   StyledCompleteCheckbox.displayName = "StyledCompleteCheckbox";
 
-  var _excluded$17 = ["completed", "disabled", "animate", "onClick", "className", "primary", "checkMarkClassName"];
+  var _excluded$15 = ["completed", "disabled", "animate", "onClick", "className", "primary", "checkMarkClassName"];
   var CompleteCheckbox = function CompleteCheckbox(_ref) {
     var _ref$completed = _ref.completed,
       completed = _ref$completed === void 0 ? false : _ref$completed,
@@ -18127,7 +18351,7 @@
       _ref$primary = _ref.primary,
       primary = _ref$primary === void 0 ? false : _ref$primary,
       checkMarkClassName = _ref.checkMarkClassName,
-      rest = _objectWithoutProperties(_ref, _excluded$17);
+      rest = _objectWithoutProperties(_ref, _excluded$15);
     return /*#__PURE__*/React__default["default"].createElement(StyledCompleteCheckbox, _extends({
       onClick: onClick,
       className: classNames__default["default"]("c-complete-checkbox", className),
@@ -18162,7 +18386,7 @@
   });
   StyledPaper.displayName = "StyledPaper";
 
-  var _excluded$16 = ["children", "className", "type", "hover", "useOptimizedShadow"];
+  var _excluded$14 = ["children", "className", "type", "hover", "useOptimizedShadow"];
   /**
    * This is a component description and should sit directly above your component
    */
@@ -18175,7 +18399,7 @@
       hover = _ref$hover === void 0 ? false : _ref$hover,
       _ref$useOptimizedShad = _ref.useOptimizedShadow,
       useOptimizedShadow = _ref$useOptimizedShad === void 0 ? false : _ref$useOptimizedShad,
-      rest = _objectWithoutProperties(_ref, _excluded$16);
+      rest = _objectWithoutProperties(_ref, _excluded$14);
     return /*#__PURE__*/React__default["default"].createElement(StyledPaper, _extends({
       className: classNames__default["default"](className, {
         "ac-shadow--raised--lg": !useOptimizedShadow && hover && type === "paper-1",
@@ -18231,7 +18455,7 @@
   });
   StyledCard.displayName = "StyledCard";
 
-  var _excluded$15 = ["children", "className", "hoverable", "variant", "onClick"];
+  var _excluded$13 = ["children", "className", "hoverable", "variant", "onClick"];
   var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
@@ -18240,7 +18464,7 @@
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "paper-2" : _ref$variant,
       onClick = _ref.onClick,
-      rest = _objectWithoutProperties(_ref, _excluded$15);
+      rest = _objectWithoutProperties(_ref, _excluded$13);
     return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends({}, rest, {
       type: variant,
       className: classNames__default["default"]("c-card", className),
@@ -18321,12 +18545,12 @@
   });
   EntityCard$1.displayName = "EntityCard";
 
-  var _excluded$14 = ["weight", "children"];
+  var _excluded$12 = ["weight", "children"];
   var Title1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? "light" : _ref$weight,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$14);
+      props = _objectWithoutProperties(_ref, _excluded$12);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: weight,
       variant: "Title 1",
@@ -18335,12 +18559,12 @@
   });
   Title1.displayName = "Title1";
 
-  var _excluded$13 = ["weight", "children"];
+  var _excluded$11 = ["weight", "children"];
   var Title2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? "light" : _ref$weight,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$13);
+      props = _objectWithoutProperties(_ref, _excluded$11);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: weight,
       variant: "Title 2",
@@ -18349,10 +18573,10 @@
   });
   Title2.displayName = "Title2";
 
-  var _excluded$12 = ["children"];
+  var _excluded$10 = ["children"];
   var Header2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$12);
+      props = _objectWithoutProperties(_ref, _excluded$10);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: "bold",
       variant: "Header 2",
@@ -18361,12 +18585,12 @@
   });
   Header2.displayName = "Header2";
 
-  var _excluded$11 = ["weight", "children"];
+  var _excluded$$ = ["weight", "children"];
   var Body1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? "regular" : _ref$weight,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$11);
+      props = _objectWithoutProperties(_ref, _excluded$$);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Body 1",
       weight: weight,
@@ -18375,12 +18599,12 @@
   });
   Body1.displayName = "Body1";
 
-  var _excluded$10 = ["weight", "children"];
+  var _excluded$_ = ["weight", "children"];
   var Caption1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? "regular" : _ref$weight,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$10);
+      props = _objectWithoutProperties(_ref, _excluded$_);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Caption 1",
       weight: weight,
@@ -18389,12 +18613,12 @@
   });
   Caption1.displayName = "Caption1";
 
-  var _excluded$$ = ["weight", "children"];
+  var _excluded$Z = ["weight", "children"];
   var Caption2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? "regular" : _ref$weight,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$$);
+      props = _objectWithoutProperties(_ref, _excluded$Z);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Caption 2",
       weight: weight,
@@ -18607,7 +18831,7 @@
     componentId: "sc-5x2tyd-1"
   })(["border-radius:100%;object-fit:cover;"]);
 
-  var _excluded$_ = ["url", "alt", "size", "className", "imgClassName", "children"];
+  var _excluded$Y = ["url", "alt", "size", "className", "imgClassName", "children"];
   /**
    * @component Avatar
    * @description
@@ -18642,7 +18866,7 @@
       className = _ref.className,
       imgClassName = _ref.imgClassName,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$_);
+      rest = _objectWithoutProperties(_ref, _excluded$Y);
     var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       imageLoaded = _useState2[0],
@@ -18683,13 +18907,13 @@
     return props.$color && styled.css(["background-color:", ";"], props.$color);
   });
 
-  var _excluded$Z = ["color", "size", "className"];
+  var _excluded$X = ["color", "size", "className"];
   var Dot = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var color = _ref.color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 8 : _ref$size,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$Z);
+      rest = _objectWithoutProperties(_ref, _excluded$X);
     return /*#__PURE__*/React__default["default"].createElement(StyledDot, _extends({
       className: classNames__default["default"]("c-dot", className),
       ref: ref,
@@ -18726,7 +18950,7 @@
   });
   StyledTagText.displayName = "StyledTagText";
 
-  var _excluded$Y = ["name", "color", "showText", "showDot", "className"];
+  var _excluded$W = ["name", "color", "showText", "showDot", "className"];
   var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var name = _ref.name,
       color = _ref.color,
@@ -18735,7 +18959,7 @@
       _ref$showDot = _ref.showDot,
       showDot = _ref$showDot === void 0 ? true : _ref$showDot,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$Y);
+      rest = _objectWithoutProperties(_ref, _excluded$W);
     return /*#__PURE__*/React__default["default"].createElement(StyledTag, _extends({
       className: classNames__default["default"]("c-tag", className),
       ref: ref
@@ -18847,7 +19071,7 @@
   });
   StyledNavAsMoreTarget.displayName = "StyledNavAsMoreTarget";
 
-  var _excluded$X = ["children", "active", "disabled", "className", "role"];
+  var _excluded$V = ["children", "active", "disabled", "className", "role"];
   var Item = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var children = _ref.children,
       _ref$active = _ref.active,
@@ -18856,7 +19080,7 @@
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       className = _ref.className,
       role = _ref.role,
-      rest = _objectWithoutProperties(_ref, _excluded$X);
+      rest = _objectWithoutProperties(_ref, _excluded$V);
     return /*#__PURE__*/React__default["default"].createElement(StyledNavListItem, _extends({
       className: classNames__default["default"]("c-nav__item", {
         "c-nav__item--active": active
@@ -18904,11 +19128,11 @@
   });
   StyledExpandSingle.displayName = "StyledExpandSingle";
 
-  var _excluded$W = ["expanded"];
+  var _excluded$U = ["expanded"];
   var ExpandSingle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$expanded = _ref.expanded,
       expanded = _ref$expanded === void 0 ? false : _ref$expanded,
-      rest = _objectWithoutProperties(_ref, _excluded$W);
+      rest = _objectWithoutProperties(_ref, _excluded$U);
     return /*#__PURE__*/React__default["default"].createElement(StyledExpandSingle, _extends({
       ref: ref,
       viewBox: "0 0 24 24",
@@ -19093,198 +19317,6 @@
   };
   OptionContent.displayName = "OptionContent";
 
-  var _excluded$V = ["mixed", "data-testid"];
-
-  /**
-   * @component CheckboxIcon
-   * @description
-   *
-   * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
-   * The Icon component is
-   * customizable, allowing for variations in size, color, and style to fit the needs of the application.
-   *
-   *
-   * @example
-   * return (
-   *   <CheckboxIcon className="mr-2" showAdditionalIcon={true} />
-   * )
-   *
-   * @see
-   * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
-   * @see
-   * https://design.activecollab.com/docs/foundations/icons
-   */
-  var CheckboxIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
-    var mixed = _ref.mixed,
-      testId = _ref["data-testid"],
-      props = _objectWithoutProperties(_ref, _excluded$V);
-    // const [animate, setAnimate] = useState(false);
-    // const mountRef = useRef(false);
-
-    // useEffect(() => {
-    //   if (mountRef.current) {
-    //     setAnimate(true);
-    //   } else {
-    //     mountRef.current = true;
-    //   }
-    // }, [mixed]);
-
-    if (mixed) {
-      return /*#__PURE__*/React__default["default"].createElement("svg", {
-        width: "16",
-        height: "16",
-        viewBox: "0 0 16 16",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        "data-testid": "checkbox-mixed-icon"
-      }, /*#__PURE__*/React__default["default"].createElement("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M14.2222 0C15.2041 0 16 0.795938 16 1.77778V14.2222C16 15.2041 15.2041 16 14.2222 16H1.77778C0.795938 16 0 15.2041 0 14.2222V1.77778C0 0.795938 0.795938 0 1.77778 0H14.2222Z",
-        fill: "var(--color-secondary)"
-      }), /*#__PURE__*/React__default["default"].createElement("rect", {
-        x: "3",
-        y: "7",
-        width: 10,
-        height: "2",
-        rx: "1",
-        fill: "var(--page-paper-main)"
-      }));
-    }
-    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
-      width: 16,
-      height: 16,
-      viewBox: "0 0 16 16",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "var(--color-theme-600)",
-      focusable: false,
-      ref: svgRef
-    }, props, {
-      "data-testid": testId
-    }), /*#__PURE__*/React__default["default"].createElement("g", {
-      fillRule: "evenodd"
-    }, /*#__PURE__*/React__default["default"].createElement("rect", {
-      stroke: "#8E8E8E",
-      x: 0.5,
-      y: 0.5,
-      width: 15,
-      height: 15,
-      rx: 2
-    }), /*#__PURE__*/React__default["default"].createElement("path", {
-      stroke: "#979797",
-      strokeWidth: 2,
-      d: "M12.243 5l-5.657 5.657-2.829-2.829"
-    })));
-  });
-  CheckboxIcon.displayName = "CheckboxIcon";
-  var CheckboxIcon$1 = CheckboxIcon;
-
-  var StyledInput$4 = styled__default["default"].input.withConfig({
-    displayName: "Styles__StyledInput",
-    componentId: "sc-y7zymm-0"
-  })(["border:0px;clip:rect(0px,0px,0px,0px);cursor:pointer;height:1px;margin:-1px;opacity:0;overflow:hidden;padding:0px;position:absolute;white-space:nowrap;width:1px;"]);
-  StyledInput$4.displayName = "StyledInput";
-  var StyledLabel$1 = styled__default["default"].label.withConfig({
-    displayName: "Styles__StyledLabel",
-    componentId: "sc-y7zymm-1"
-  })([""]);
-  StyledLabel$1.displayName = "StyledLabel";
-  var StyledCheckbox$1 = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledCheckbox",
-    componentId: "sc-y7zymm-2"
-  })(["height:16px;width:16px;position:relative;transition-duration:0.2s;border-radius:2px;path{transition-duration:0.2s;stroke:transparent;stroke-dashoffset:12;stroke-dasharray:12;}svg{cursor:pointer;border-radius:2px;fill:transparent;}", " rect{transition-duration:0.2s;", " ", "}", ":disabled ~ ", "{opacity:0.5;cursor:not-allowed;}", ":focus ~ ", "{", "}&:not(.c-checkbox__controlled) ", ":hover:not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);", " stroke-width:3px;}}", " ", ":checked ~ ", "{path{", "}rect{stroke:var(--color-secondary);stroke-width:19px;", "}}"], function (props) {
-    return props.$disabled && styled.css(["svg{cursor:not-allowed;}"]);
-  }, function (props) {
-    return !props.mixed && styled.css(["stroke:var(--color-theme-500);"]);
-  }, function (props) {
-    return props.mixed && styled.css(["stroke:transparent;"]);
-  }, StyledInput$4, StyledLabel$1, StyledInput$4, StyledLabel$1, function (props) {
-    return !props.mixed && styled.css(["rect{stroke:var(--color-secondary);stroke-width:3px;}"]);
-  }, StyledInput$4, StyledLabel$1, function (props) {
-    return props.mixed && styled.css(["stroke:transparent;"]);
-  }, function (props) {
-    return props.hover && !props.mixed && styled.css(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput$4, StyledLabel$1);
-  }, StyledInput$4, StyledLabel$1, function (props) {
-    return !props.mixed && styled.css(["stroke:var(--page-paper-main);stroke-dashoffset:24;"]);
-  }, function (props) {
-    return props.mixed && styled.css(["stroke:transparent;"]);
-  });
-  StyledCheckbox$1.displayName = "StyledCheckbox";
-
-  var _excluded$U = ["className", "hover", "id", "mixed", "checked", "onChange", "disabled"];
-  /**
-   * Checkbox component
-   */
-  var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var className = _ref.className,
-      hover = _ref.hover,
-      _ref$id = _ref.id,
-      id = _ref$id === void 0 ? "checkbox" : _ref$id,
-      _ref$mixed = _ref.mixed,
-      mixed = _ref$mixed === void 0 ? false : _ref$mixed,
-      checked = _ref.checked,
-      onChange = _ref.onChange,
-      disabled = _ref.disabled,
-      rest = _objectWithoutProperties(_ref, _excluded$U);
-    var _useState = React.useState(mixed && !checked),
-      _useState2 = _slicedToArray(_useState, 2),
-      indeterminate = _useState2[0],
-      setIndeterminate = _useState2[1];
-    var _useState3 = React.useState(checked),
-      _useState4 = _slicedToArray(_useState3, 2),
-      initialChecked = _useState4[0],
-      setInitialChecked = _useState4[1];
-    var handleChange = React.useCallback(function (e) {
-      typeof onChange === "function" && onChange(e);
-      setInitialChecked(function (prev) {
-        return !prev;
-      });
-      setIndeterminate(false);
-    }, [onChange]);
-    React.useEffect(function () {
-      if (checked !== initialChecked) {
-        setInitialChecked(checked);
-        setIndeterminate(false);
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [checked]);
-    React.useEffect(function () {
-      if (mixed !== indeterminate && !checked) {
-        setIndeterminate(mixed);
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [mixed]);
-    return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox$1, {
-      className: classNames__default["default"]("c-checkbox", {
-        "c-checkbox__hover": hover,
-        "c-checkbox__controlled": typeof hover === "boolean"
-      }, className),
-      hover: hover,
-      tabIndex: -1,
-      mixed: indeterminate,
-      $disabled: disabled
-    }, /*#__PURE__*/React__default["default"].createElement(StyledInput$4, _extends({
-      role: "checkbox",
-      id: id,
-      className: "c-checkbox--input",
-      type: "checkbox",
-      ref: ref
-    }, rest, {
-      checked: initialChecked,
-      onChange: handleChange,
-      disabled: disabled
-    })), /*#__PURE__*/React__default["default"].createElement(StyledLabel$1, {
-      htmlFor: id,
-      className: "c-checkbox--label"
-    }, /*#__PURE__*/React__default["default"].createElement(CheckboxIcon$1, {
-      "data-testid": "checkbox-icon",
-      height: 16,
-      width: 16,
-      mixed: indeterminate
-    })));
-  });
-  Checkbox.displayName = "Checkbox";
-
   var InputResetStyle = styled.css(["margin:0;padding:0;border:0;outline:0;font:inherit;"]);
 
   var StyledInputWrapper = styled__default["default"].div.withConfig({
@@ -25611,7 +25643,7 @@
   ThumbsDownIcon.displayName = "ThumbsDownIcon";
   var ThumbsDownIcon$1 = ThumbsDownIcon;
 
-  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;--color-progress-blue:#4182f2;--color-yellow:#FDF196;--color-yellow-darker:#948D5D;--color-yellow-lighter:#EBD429;--color-orange:#FBBB75;--color-orange-darker:#916C43;--color-orange-lighter:#E99841;--color-beige:#EAC2AD;--color-beige-darker:#877064;--color-beige-lighter:#B98A72;--color-pink:#FBD6E7;--color-pink-darker:#917C86;--color-pink-lighter:#E4A1C0;--color-coral:#FF9C9C;--color-coral-darker:#945A5A;--color-coral-lighter:#DB4545;--color-purple-dirty:#C49CB6;--color-purple-dirty-darker:#715A69;--color-purple-dirty-lighter:#B16E9A;--color-purple:#BEACF9;--color-purple-darker:#6E6390;--color-purple-lighter:#9B86DF;--color-blue-aqua:#BDF7FD;--color-blue-aqua-darker:#6D8F92;--color-blue-aqua-lighter:#7BDDE7;--color-blue-pale:#BEEAFF;--color-blue-pale-darker:#6E8794;--color-blue-pale-lighter:#92BFD4;--color-blue-sky:#A0CBFD;--color-blue-sky-darker:#5C7592;--color-blue-sky-lighter:#568CCB;--color-turquoise:#B9E4E0;--color-turquoise-darker:#6B8482;--color-turquoise-lighter:#70BFB8;--color-green-pale:#C3E799;--color-green-pale-darker:#718658;--color-green-pale-lighter:#80C333;--color-green-olive-drab:#98B57C;--color-green-olive-drab-darker:#647157;--color-green-olive-drab-lighter:#819F65;--color-gray-silver:#DDDDDD;--color-gray-silver-darker:#808080;--color-gray-silver-lighter:#ACACAC;--color-gray:#CACACA;--color-gray-darker:#757575;--color-gray-lighter:#7D7D7D;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--selectable:#d7d7da;--selectable-active:#3b82f6;--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;--color-primary-100:rgba(93,43,255,0.03);--color-primary-opaque-200:#f7f4ff;--muted-text:#6d6d73;--alert-surface:rgba(243,24,72,0.12);--muted-surface:#d7d7da;--muted-surface-text:#303037;--stripe-pattern:#e6e6e9;--drop-overlay-bg:rgba(255,255,255,0.93);--ai-gradient:linear-gradient(135deg,#4da2ed,#9f69e5,#ec43d8,#f72222);--ai-gradient-lighter:linear-gradient( 135deg,rgba(77,162,237,0.1),rgba(159,105,229,0.1),rgba(236,67,216,0.1),rgba(230,10,10,0.1) );--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;--color-primary-100:rgba(41,188,221,0.04);--color-primary-opaque-200:#f0fafc;}.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;--color-primary-100:rgba(65,130,242,0.04);--color-primary-opaque-200:#f2f6fe;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#292b34;--color-theme-300:#23252d;--color-theme-400:#17171a;--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:#334447;--color-primary-opaque-400:#3c605a;--color-secondary-opaque-300:#334447;--color-secondary-opaque-400:#3c605a;--body-bg-main:rgb(36,38,46);--body-bg-main-transparent:rgba(36,38,46,0);--page-paper-main:#2f323a;--border-primary:#17171a;--selectable:#17171a;--selectable-active:#3b82f6;--note-bg:#3d3c3c;--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( 47,50,58,0 );--modal-background:rgba(36,38,46,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#24262e;--only-white:#ffffff;--only-black:#000000;--color-primary-100:rgba(103,255,200,0.08);--color-primary-opaque-200:#31403b;--muted-text:#cfcfd0;--alert-surface:rgba(243,24,72,0.25);--muted-surface:#b4b4b8;--muted-surface-text:#4a4a4a;--stripe-pattern:#524145;--drop-overlay-bg:rgba(47,50,58,0.93);}.dracula{--color-primary:#bd93f9;--color-secondary:#ff79c6;--color-theme-100:#000000;--color-theme-200:#292a39;--color-theme-300:#1f212b;--color-theme-400:#111217;--color-theme-500:#6272a4;--color-theme-600:#7d8ab8;--color-theme-700:#a4aecd;--color-theme-800:#dededa;--color-theme-900:#f8f8f2;--color-primary-200:rgba(189,147,249,0.05);--color-primary-300:rgba(189,147,249,0.1);--color-primary-400:rgba(189,147,249,0.25);--color-primary-500:rgba(189,147,249,0.5);--color-primary-600:rgba(189,147,249,0.75);--color-primary-700:#bd93f9;--color-primary-800:#d2b6fb;--color-primary-900:#e4d3fd;--color-secondary-200:rgba(255,121,198,0.05);--color-secondary-300:rgba(255,121,198,0.1);--color-secondary-400:rgba(255,121,198,0.25);--color-secondary-500:rgba(255,121,198,0.5);--color-secondary-600:rgba(255,121,198,0.75);--color-secondary-700:#ff79c6;--color-secondary-800:#ffa3d7;--color-secondary-900:#ffc9e7;--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:#42385b;--color-primary-opaque-400:#534472;--color-secondary-opaque-300:#543448;--color-secondary-opaque-400:#6f435f;--body-bg-main:rgb(32,34,44);--body-bg-main-transparent:rgba(32,34,44,0);--page-paper-main:#2c2f3c;--border-primary:#111217;--selectable:#111217;--selectable-active:#3b82f6;--note-bg:#323026;--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(44,47,60,0);--modal-background:rgba(32,34,44,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#191a22;--color-primary-100:rgba(189,147,249,0.08);--color-primary-opaque-200:#302c3e;--muted-text:#d0d0cb;--alert-surface:rgba(255,85,85,0.25);--muted-surface:#a9aec4;--muted-surface-text:#282a36;--stripe-pattern:#503d47;--drop-overlay-bg:rgba(44,47,60,0.93);}.one-dark{--color-primary:#61afef;--color-secondary:#c678dd;--color-theme-100:#000000;--color-theme-200:#272c35;--color-theme-300:#1e2127;--color-theme-400:#191c21;--color-theme-500:#5c6370;--color-theme-600:#767d8a;--color-theme-700:#9aa2b1;--color-theme-800:#cdd3de;--color-theme-900:#dcdfe4;--color-primary-200:rgba(97,175,239,0.05);--color-primary-300:rgba(97,175,239,0.1);--color-primary-400:rgba(97,175,239,0.25);--color-primary-500:rgba(97,175,239,0.5);--color-primary-600:rgba(97,175,239,0.75);--color-primary-700:#61afef;--color-primary-800:#8ec6f4;--color-primary-900:#bcdcf9;--color-secondary-200:rgba(198,120,221,0.05);--color-secondary-300:rgba(198,120,221,0.1);--color-secondary-400:rgba(198,120,221,0.25);--color-secondary-500:rgba(198,120,221,0.5);--color-secondary-600:rgba(198,120,221,0.75);--color-secondary-700:#c678dd;--color-secondary-800:#d79ce8;--color-secondary-900:#e8c2f2;--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:#2d3e51;--color-primary-opaque-400:#364e65;--color-secondary-opaque-300:#402e47;--color-secondary-opaque-400:#543b5d;--body-bg-main:rgb(32,35,42);--body-bg-main-transparent:rgba(32,35,42,0);--page-paper-main:#292d35;--border-primary:#191c21;--selectable:#191c21;--selectable-active:#3b82f6;--note-bg:#302e28;--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(41,45,53,0);--modal-background:rgba(32,35,42,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#191c21;--color-primary-100:rgba(97,175,239,0.08);--color-primary-opaque-200:#25313e;--muted-text:#c5cbd6;--alert-surface:rgba(224,108,117,0.25);--muted-surface:#a3aab8;--muted-surface-text:#282c34;--stripe-pattern:#4b3e41;--drop-overlay-bg:rgba(41,45,53,0.93);}html{color-scheme:light;&", "{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;}}.c-date-picker--calendar{width:260px;padding:16px 0px 8px 0px;margin:auto;background-color:var(--page-paper-main);}"], DARK_THEME_MATCH);
+  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;--color-progress-blue:#4182f2;--color-yellow:#FDF196;--color-yellow-darker:#948D5D;--color-yellow-lighter:#EBD429;--color-orange:#FBBB75;--color-orange-darker:#916C43;--color-orange-lighter:#E99841;--color-beige:#EAC2AD;--color-beige-darker:#877064;--color-beige-lighter:#B98A72;--color-pink:#FBD6E7;--color-pink-darker:#917C86;--color-pink-lighter:#E4A1C0;--color-coral:#FF9C9C;--color-coral-darker:#945A5A;--color-coral-lighter:#DB4545;--color-purple-dirty:#C49CB6;--color-purple-dirty-darker:#715A69;--color-purple-dirty-lighter:#B16E9A;--color-purple:#BEACF9;--color-purple-darker:#6E6390;--color-purple-lighter:#9B86DF;--color-blue-aqua:#BDF7FD;--color-blue-aqua-darker:#6D8F92;--color-blue-aqua-lighter:#7BDDE7;--color-blue-pale:#BEEAFF;--color-blue-pale-darker:#6E8794;--color-blue-pale-lighter:#92BFD4;--color-blue-sky:#A0CBFD;--color-blue-sky-darker:#5C7592;--color-blue-sky-lighter:#568CCB;--color-turquoise:#B9E4E0;--color-turquoise-darker:#6B8482;--color-turquoise-lighter:#70BFB8;--color-green-pale:#C3E799;--color-green-pale-darker:#718658;--color-green-pale-lighter:#80C333;--color-green-olive-drab:#98B57C;--color-green-olive-drab-darker:#647157;--color-green-olive-drab-lighter:#819F65;--color-gray-silver:#DDDDDD;--color-gray-silver-darker:#808080;--color-gray-silver-lighter:#ACACAC;--color-gray:#CACACA;--color-gray-darker:#757575;--color-gray-lighter:#7D7D7D;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--selectable:#d7d7da;--selectable-active:#3b82f6;--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;--color-primary-100:rgba(93,43,255,0.03);--color-primary-opaque-200:#f7f4ff;--muted-text:#6d6d73;--alert-surface:rgba(243,24,72,0.12);--muted-surface:#d7d7da;--muted-surface-text:#303037;--stripe-pattern:#e6e6e9;--drop-overlay-bg:rgba(255,255,255,0.93);--ai-gradient:linear-gradient(135deg,#4da2ed,#9f69e5,#ec43d8,#f72222);--ai-gradient-lighter:linear-gradient( 135deg,rgba(77,162,237,0.1),rgba(159,105,229,0.1),rgba(236,67,216,0.1),rgba(230,10,10,0.1) );--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;--color-primary-100:rgba(41,188,221,0.04);--color-primary-opaque-200:#f0fafc;}.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;--color-primary-100:rgba(65,130,242,0.04);--color-primary-opaque-200:#f2f6fe;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#292b34;--color-theme-300:#202129;--color-theme-400:#17171a;--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:#334447;--color-primary-opaque-400:#3c605a;--color-secondary-opaque-300:#334447;--color-secondary-opaque-400:#3c605a;--body-bg-main:rgb(36,38,46);--body-bg-main-transparent:rgba(36,38,46,0);--page-paper-main:#2f323a;--border-primary:#17171a;--selectable:#17171a;--selectable-active:#3b82f6;--note-bg:#3d3c3c;--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( 47,50,58,0 );--modal-background:rgba(36,38,46,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#24262e;--only-white:#ffffff;--only-black:#000000;--color-primary-100:rgba(103,255,200,0.08);--color-primary-opaque-200:#31403b;--muted-text:#cfcfd0;--alert-surface:rgba(243,24,72,0.25);--muted-surface:#b4b4b8;--muted-surface-text:#4a4a4a;--stripe-pattern:#524145;--drop-overlay-bg:rgba(47,50,58,0.93);}.dracula{--color-primary:#bd93f9;--color-secondary:#ff79c6;--color-theme-100:#000000;--color-theme-200:#262735;--color-theme-300:#1c1e27;--color-theme-400:#111217;--color-theme-500:#6272a4;--color-theme-600:#7d8ab8;--color-theme-700:#a4aecd;--color-theme-800:#dededa;--color-theme-900:#f8f8f2;--color-primary-200:rgba(189,147,249,0.05);--color-primary-300:rgba(189,147,249,0.1);--color-primary-400:rgba(189,147,249,0.25);--color-primary-500:rgba(189,147,249,0.5);--color-primary-600:rgba(189,147,249,0.75);--color-primary-700:#bd93f9;--color-primary-800:#d2b6fb;--color-primary-900:#e4d3fd;--color-secondary-200:rgba(255,121,198,0.05);--color-secondary-300:rgba(255,121,198,0.1);--color-secondary-400:rgba(255,121,198,0.25);--color-secondary-500:rgba(255,121,198,0.5);--color-secondary-600:rgba(255,121,198,0.75);--color-secondary-700:#ff79c6;--color-secondary-800:#ffa3d7;--color-secondary-900:#ffc9e7;--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:#42385b;--color-primary-opaque-400:#534472;--color-secondary-opaque-300:#543448;--color-secondary-opaque-400:#6f435f;--body-bg-main:rgb(32,34,44);--body-bg-main-transparent:rgba(32,34,44,0);--page-paper-main:#2c2f3c;--border-primary:#111217;--selectable:#111217;--selectable-active:#3b82f6;--note-bg:#323026;--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(44,47,60,0);--modal-background:rgba(32,34,44,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#191a22;--color-primary-100:rgba(189,147,249,0.08);--color-primary-opaque-200:#302c3e;--muted-text:#d0d0cb;--alert-surface:rgba(255,85,85,0.25);--muted-surface:#a9aec4;--muted-surface-text:#282a36;--stripe-pattern:#503d47;--drop-overlay-bg:rgba(44,47,60,0.93);}.one-dark{--color-primary:#61afef;--color-secondary:#c678dd;--color-theme-100:#000000;--color-theme-200:#22262e;--color-theme-300:#1c1f24;--color-theme-400:#191c21;--color-theme-500:#5c6370;--color-theme-600:#767d8a;--color-theme-700:#9aa2b1;--color-theme-800:#cdd3de;--color-theme-900:#dcdfe4;--color-primary-200:rgba(97,175,239,0.05);--color-primary-300:rgba(97,175,239,0.1);--color-primary-400:rgba(97,175,239,0.25);--color-primary-500:rgba(97,175,239,0.5);--color-primary-600:rgba(97,175,239,0.75);--color-primary-700:#61afef;--color-primary-800:#8ec6f4;--color-primary-900:#bcdcf9;--color-secondary-200:rgba(198,120,221,0.05);--color-secondary-300:rgba(198,120,221,0.1);--color-secondary-400:rgba(198,120,221,0.25);--color-secondary-500:rgba(198,120,221,0.5);--color-secondary-600:rgba(198,120,221,0.75);--color-secondary-700:#c678dd;--color-secondary-800:#d79ce8;--color-secondary-900:#e8c2f2;--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:#2d3e51;--color-primary-opaque-400:#364e65;--color-secondary-opaque-300:#402e47;--color-secondary-opaque-400:#543b5d;--body-bg-main:rgb(32,35,42);--body-bg-main-transparent:rgba(32,35,42,0);--page-paper-main:#292d35;--border-primary:#191c21;--selectable:#191c21;--selectable-active:#3b82f6;--note-bg:#302e28;--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(41,45,53,0);--modal-background:rgba(32,35,42,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#191c21;--color-primary-100:rgba(97,175,239,0.08);--color-primary-opaque-200:#25313e;--muted-text:#c5cbd6;--alert-surface:rgba(224,108,117,0.25);--muted-surface:#a3aab8;--muted-surface-text:#282c34;--stripe-pattern:#4b3e41;--drop-overlay-bg:rgba(41,45,53,0.93);}html{color-scheme:light;&", "{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;}}.c-date-picker--calendar{width:260px;padding:16px 0px 8px 0px;margin:auto;background-color:var(--page-paper-main);}"], DARK_THEME_MATCH);
 
   var StyledDiv = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledDiv",