@ctlyst.id/internal-ui 5.5.1 → 5.5.3

package/dist/index.mjs

@@ -2053,11 +2053,9 @@ id.localize.month = buildLocalizeFn2({
 });
 
 // src/components/datepicker/components/styles.tsx
-import { useColorMode } from "@chakra-ui/system";
 import { Global } from "@emotion/react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var Styles = ({ showHeader }) => {
-  const { colorMode } = useColorMode();
   return /* @__PURE__ */ jsx25(
     Global,
     {
@@ -2066,7 +2064,7 @@ var Styles = ({ showHeader }) => {
       .react-datepicker__year-read-view--down-arrow,
       .react-datepicker__month-read-view--down-arrow,
       .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
-        border-color: ${colorMode === "light" ? "#6E6B7B" : "#d0d1d2"};
+        border-color: #6E6B7B;
         border-style: solid;
         border-width: 1px 1px 0 0;
         content: "";
@@ -2137,8 +2135,8 @@ var Styles = ({ showHeader }) => {
 
       .react-datepicker {
         font-family: Poppins;
-        background-color: ${colorMode === "light" ? "#ffffff" : "#283046"};
-        color: ${colorMode === "light" ? "#000" : "#d0d1d2"};
+        background-color: #ffffff;
+        color: #000;
         filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.08));
         border-radius: 0.3rem;
         display: inline-block;
@@ -2227,7 +2225,7 @@ var Styles = ({ showHeader }) => {
       .react-datepicker-year-header {
         display:${showHeader ? "block" : "none"};
         margin-top: 0;
-        color: ${colorMode === "light" ? "#111111" : "#d0d1d2"};
+        color: #111111;
         font-size:14px;
         font-weight:600;
       }
@@ -2410,18 +2408,18 @@ var Styles = ({ showHeader }) => {
       }
       .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
         cursor: pointer;
-        background-color: ${colorMode === "light" ? "#f0f0f0" : "#131620"};
+        background-color: #f0f0f0;
       }
       .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
-        background-color: ${colorMode === "light" ? "#12784A" : "#131620"};
+        background-color: #12784A;
         color: white;
         font-weight: bold;
       }
       .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
-        background-color: ${colorMode === "light" ? "#12784A" : "#131620"};
+        background-color: #12784A;
       }
       .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
-        color: ${colorMode === "light" ? "#ccc" : "#d0d1d2"};
+        color: #ccc;
       }
       .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
         cursor: default;
@@ -2429,7 +2427,7 @@ var Styles = ({ showHeader }) => {
       }
 
       .react-datepicker__week-number {
-        color: ${colorMode === "light" ? "#ccc" : "#d0d1d2"};
+        color: #ccc;
         display: inline-block;
         width: 1.7rem;
         line-height: 1.7rem;
@@ -2441,7 +2439,7 @@ var Styles = ({ showHeader }) => {
       }
       .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
         border-radius: 0.3rem;
-        background-color: ${colorMode === "light" ? "#f0f0f0" : "#131620"};
+        background-color: #f0f0f0;
       }
 
       .react-datepicker__day-names,
@@ -2472,14 +2470,14 @@ var Styles = ({ showHeader }) => {
       .react-datepicker__quarter--in-selecting-range,
       .react-datepicker__quarter--in-range {
         border-radius: 0.3rem;
-        background-color: ${colorMode === "light" ? "#12784A" : "#131620"};
+        background-color: #12784A;
         color: #fff;
       }
       .react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,
       .react-datepicker__quarter--selected:hover,
       .react-datepicker__quarter--in-selecting-range:hover,
       .react-datepicker__quarter--in-range:hover {
-        background-color: ${colorMode === "light" ? "#075331" : "#131620"};
+        background-color: #075331;
       }
       .react-datepicker__month--disabled,
       .react-datepicker__quarter--disabled {
@@ -2562,14 +2560,14 @@ var Styles = ({ showHeader }) => {
       .react-datepicker__quarter-text--keyboard-selected,
       .react-datepicker__year-text--keyboard-selected {
         border-radius: 2rem;
-        background-color: ${colorMode === "light" ? "#075331" : "#131620"};
+        background-color: #075331;
         color: #fff;
       }
       .react-datepicker__day--keyboard-selected:hover,
       .react-datepicker__month-text--keyboard-selected:hover,
       .react-datepicker__quarter-text--keyboard-selected:hover,
       .react-datepicker__year-text--keyboard-selected:hover {
-        background-color: ${colorMode === "light" ? "#075331" : "#131620"};
+        background-color: #075331;
       }
       .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
       .react-datepicker__month-text--in-range,
@@ -2588,7 +2586,7 @@ var Styles = ({ showHeader }) => {
       .react-datepicker__quarter-text--in-range,
       .react-datepicker__year-text--in-range) {
         background-color: var(--chakra-colors-primary-50);
-        color: ${colorMode === "light" ? "#000" : "#d0d1d2"};
+        color: #000;
       }
       .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
       .react-datepicker__month-text--in-selecting-range,
@@ -2606,8 +2604,8 @@ var Styles = ({ showHeader }) => {
       .react-datepicker__month-text--in-selecting-range,
       .react-datepicker__quarter-text--in-selecting-range,
       .react-datepicker__year-text--in-selecting-range) {
-        background-color: ${colorMode === "light" ? "#f0f0f0" : "#131620"};
-        color: ${colorMode === "light" ? "#000" : "#d0d1d2"};
+        background-color: #f0f0f0;
+        color: #000;
       }
       .react-datepicker__day--disabled,
       .react-datepicker__month-text--disabled,
@@ -2628,11 +2626,11 @@ var Styles = ({ showHeader }) => {
       .react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
       .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
       .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
-        background-color: ${colorMode === "light" ? "#12784A" : "#131620"};
+        background-color: #12784A;
       }
       .react-datepicker__month-text:hover,
       .react-datepicker__quarter-text:hover {
-        background-color: ${colorMode === "light" ? "#f0f0f0" : "#131620"};
+        background-color: #f0f0f0;
       }
 
       .react-datepicker__input-container {
@@ -2682,7 +2680,7 @@ var Styles = ({ showHeader }) => {
       .react-datepicker__year-dropdown,
       .react-datepicker__month-dropdown,
       .react-datepicker__month-year-dropdown {
-        background-color: ${colorMode === "light" ? "#f0f0f0" : "#131620"};
+        background-color: #f0f0f0;
         position: absolute;
         width: 50%;
         left: 25%;
@@ -2766,7 +2764,7 @@ var Styles = ({ showHeader }) => {
       }
       .react-datepicker__close-icon::after {
         cursor: pointer;
-        background-color: ${colorMode === "light" ? "#12784A" : "#131620"};
+        background-color: #12784A;
         color: #fff;
         border-radius: 50%;
         height: 16px;
@@ -2823,7 +2821,7 @@ var Styles = ({ showHeader }) => {
 
       /** injected styles **/
       .react-datepicker__day--outside-month {
-        color: ${colorMode === "light" ? "#B9B9C3" : "#4D4D4D"};
+        color: #B9B9C3;
       }
       .react-datepicker__day.react-datepicker__day--in-range {
         border-radius: 0;
@@ -3544,11 +3542,11 @@ Profile.defaultProps = {
 };
 
 // src/components/header/components/switch-mode.tsx
-import { Box as Box17, useColorMode as useColorMode2 } from "@chakra-ui/react";
+import { Box as Box17, useColorMode } from "@chakra-ui/react";
 import { FiMoon, FiSun } from "react-icons/fi";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var SwitchMode = () => {
-  const { colorMode, toggleColorMode } = useColorMode2();
+  const { colorMode, toggleColorMode } = useColorMode();
   return /* @__PURE__ */ jsx37(Box17, { "data-test-id": "rhYuTDCiWkFqr96upiEEh", mx: 5, onClick: toggleColorMode, cursor: "pointer", children: colorMode === "light" ? /* @__PURE__ */ jsx37(FiMoon, { size: 20 }) : /* @__PURE__ */ jsx37(FiSun, { size: 20 }) });
 };
 var switch_mode_default = SwitchMode;
@@ -4396,7 +4394,7 @@ var rating_default = Rating;
 
 // src/components/select/components/select.tsx
 import { Badge as Badge2, Center as Center2, Flex as Flex11 } from "@chakra-ui/react";
-import { useColorMode as useColorMode3 } from "@chakra-ui/system";
+import { useColorMode as useColorMode2 } from "@chakra-ui/system";
 import * as Icon7 from "@ctlyst.id/internal-icon";
 import ReactSelect, { components as componentRS } from "react-select";
 
@@ -4794,7 +4792,7 @@ function Select2({
   isError = false,
   ...rest
 }) {
-  const { colorMode } = useColorMode3();
+  const { colorMode } = useColorMode2();
   const { components, value, onChange } = rest;
   return /* @__PURE__ */ jsx54(
     ReactSelect,
@@ -4821,7 +4819,7 @@ function Select2({
 var select_default = Select2;
 
 // src/components/select/components/select-async.tsx
-import { useColorMode as useColorMode4 } from "@chakra-ui/system";
+import { useColorMode as useColorMode3 } from "@chakra-ui/system";
 import { AsyncPaginate } from "react-select-async-paginate";
 import { jsx as jsx55 } from "react/jsx-runtime";
 function SelectAsync({
@@ -4829,7 +4827,7 @@ function SelectAsync({
   isError = false,
   ...rest
 }) {
-  const { colorMode } = useColorMode4();
+  const { colorMode } = useColorMode3();
   const { components } = rest;
   return /* @__PURE__ */ jsx55(
     AsyncPaginate,
@@ -4851,11 +4849,11 @@ function SelectAsync({
 var select_async_default = SelectAsync;
 
 // src/components/select/components/select-async-creatable.tsx
-import { useColorMode as useColorMode5 } from "@chakra-ui/system";
+import { useColorMode as useColorMode4 } from "@chakra-ui/system";
 import ReactSelectAsyncCreatable from "react-select/async-creatable";
 import { jsx as jsx56 } from "react/jsx-runtime";
 function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
-  const { colorMode } = useColorMode5();
+  const { colorMode } = useColorMode4();
   return /* @__PURE__ */ jsx56(
     ReactSelectAsyncCreatable,
     {
@@ -4874,11 +4872,11 @@ function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
 }
 
 // src/components/select/components/select-creatable.tsx
-import { useColorMode as useColorMode6 } from "@chakra-ui/system";
+import { useColorMode as useColorMode5 } from "@chakra-ui/system";
 import ReactSelectCreatable from "react-select/creatable";
 import { jsx as jsx57 } from "react/jsx-runtime";
 function SelectCreatable({ styles, isError = false, ...rest }) {
-  const { colorMode } = useColorMode6();
+  const { colorMode } = useColorMode5();
   return /* @__PURE__ */ jsx57(
     ReactSelectCreatable,
     {
@@ -4898,7 +4896,7 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
 
 // src/components/select/components/select-with-checkbox.tsx
 import { Checkbox as Checkbox2, Flex as Flex12, Text as Text14 } from "@chakra-ui/react";
-import { useColorMode as useColorMode7 } from "@chakra-ui/system";
+import { useColorMode as useColorMode6 } from "@chakra-ui/system";
 import ReactSelect2, { components as ComponentRS } from "react-select";
 import { Fragment as Fragment8, jsx as jsx58, jsxs as jsxs24 } from "react/jsx-runtime";
 var CHECKBOX_STATE = {
@@ -4975,14 +4973,16 @@ var InputOption = ({
                   isIndeterminate: checkedState === CHECKBOX_STATE.INDETERMINATE,
                   isDisabled,
                   pointerEvents: "none",
-                  "data-test-id": "CT_component_select-checkbox_select-all-option"
+                  "data-test-id": "CT_component_select-checkbox_select-all-option",
+                  isInvalid: false
                 }
               ) : /* @__PURE__ */ jsx58(
                 Checkbox2,
                 {
                   pointerEvents: "none",
                   isChecked: isSelected,
-                  "data-test-id": "CT_component_select-checkbox_option-checkbox"
+                  "data-test-id": "CT_component_select-checkbox_option-checkbox",
+                  isInvalid: false
                 }
               ),
               /* @__PURE__ */ jsx58(Text14, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
@@ -5003,7 +5003,7 @@ var SelectWithCheckboxBase = ({
   value,
   ...rest
 }) => {
-  const { colorMode } = useColorMode7();
+  const { colorMode } = useColorMode6();
   return /* @__PURE__ */ jsx58(
     ReactSelect2,
     {
@@ -8079,7 +8079,7 @@ function useFetcher() {
 import {
   useBoolean,
   useClipboard,
-  useColorMode as useColorMode8,
+  useColorMode as useColorMode7,
   useColorModeValue as useColorModeValue7,
   useConst,
   useControllableProp,
@@ -8432,7 +8432,7 @@ export {
   useCheckbox2 as useCheckbox,
   useCheckboxGroup,
   useClipboard,
-  useColorMode8 as useColorMode,
+  useColorMode7 as useColorMode,
   useColorModePreference,
   useColorModeValue7 as useColorModeValue,
   useConst,