next-helios-fe 1.8.7 → 1.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.7",
+  "version": "1.8.9",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/content-container/drawer.tsx

@@ -61,7 +61,7 @@ export const Drawer: React.FC<DrawerProps> = ({
               </div>
               <button
                 type="button"
-                className="flex justify-center items-center rounded-full p-1 text-slate-400 hover:bg-secondary-light"
+                className="flex justify-center items-center rounded-full p-1 text-disabled hover:bg-secondary-light"
                 onClick={() => {
                   setOpen(false);
                 }}

package/src/components/content-container/modal/index.tsx

@@ -68,10 +68,10 @@ export const Modal: React.FC<ModalProps> = ({
               <span className="text-lg">{title}</span>
               {!options?.disableClose && (
                 <div className="flex items-center gap-2">
-                  <span className="text-sm text-slate-400">[esc]</span>
+                  <span className="text-sm text-disabled">[esc]</span>
                   <button
                     type="button"
-                    className="flex justify-center items-center rounded-full px-1 py-1 text-slate-400 hover:bg-secondary-light"
+                    className="flex justify-center items-center rounded-full px-1 py-1 text-disabled hover:bg-secondary-light"
                     onClick={() => {
                       onClose && onClose();
                     }}

package/src/components/content-container/wizard/index.tsx

@@ -108,7 +108,10 @@ export const Wizard: WizardComponent = ({
                             setActiveTab(index);
                           }}
                         >
-                          <Icon icon={tab.icon} className="text-2xl pointer-events-none" />
+                          <Icon
+                            icon={tab.icon}
+                            className="text-2xl pointer-events-none"
+                          />
                         </button>
                       </div>
                       <div className="flex flex-col items-center text-center">
@@ -135,7 +138,7 @@ export const Wizard: WizardComponent = ({
       <div className="flex justify-between">
         <button
           type="button"
-          className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-slate-400"
+          className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-disabled"
           disabled={activeTab === 0}
           onClick={() => {
             setActiveTab((prev) => prev - 1);
@@ -148,7 +151,7 @@ export const Wizard: WizardComponent = ({
         </button>
         <button
           type="button"
-          className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-slate-400"
+          className="flex items-center gap-2 text-primary hover:text-primary-dark disabled:text-disabled"
           disabled={activeTab === childrenList.length - 1}
           onClick={() => {
             setActiveTab((prev) => prev + 1);

package/src/components/dialog/index.tsx

@@ -84,7 +84,7 @@ export const Dialog: React.FC<DialogProps> = ({
             <div className="flex justify-end gap-4">
               <button
                 type="button"
-                className={`disabled:text-slate-400 disabled:pointer-events-none ${actionVariant}`}
+                className={`disabled:text-disabled disabled:pointer-events-none ${actionVariant}`}
                 disabled={loading}
                 onClick={() => {
                   action.onClick && action.onClick();

package/src/components/form/input/checkbox.tsx

@@ -47,7 +47,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         <div className="flex items-center gap-2">
           <span
             className={`flex-1 text-sm select-none ${
-              rest.disabled ? "text-slate-400" : "cursor-pointer"
+              rest.disabled ? "text-disabled" : "cursor-pointer"
             }`}
           >
             {label}

package/src/components/form/input/color.tsx

@@ -75,7 +75,7 @@ export const Color: React.FC<ColorProps> = ({
         <div className="relative flex flex-col">
           <button
             type="button"
-            className={`h-full px-4 border-default border rounded-md text-slate-400 cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+            className={`h-full px-4 border-default border rounded-md text-disabled cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
             style={{ backgroundColor: tempValue }}
             tabIndex={-1}
             onClick={() => {
@@ -99,14 +99,14 @@ export const Color: React.FC<ColorProps> = ({
         <div className="relative flex-1 flex items-center">
           <input
             type="text"
-            className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+            className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
             placeholder={rest.placeholder}
             value={tempValue}
             onChange={(e) => setTempValue(e.target.value.toUpperCase())}
           />
           <button
             type="button"
-            className="absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+            className="absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
             tabIndex={-1}
             onClick={(e) => {
               e.preventDefault();

package/src/components/form/input/date.tsx

@@ -111,7 +111,7 @@ export const Date: React.FC<DateProps> = ({
         <div className="relative flex items-center">
           <input
             type="text"
-            className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+            className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
             disabled={rest.disabled}
             readOnly
             value={
@@ -128,7 +128,7 @@ export const Date: React.FC<DateProps> = ({
           />
           <button
             type="button"
-            className="absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+            className="absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
             tabIndex={-1}
             disabled={rest.disabled}
             onClick={(e) => {

package/src/components/form/input/email.tsx

@@ -61,7 +61,7 @@ export const Email: React.FC<EmailProps> = ({
       )}
       <input
         type="email"
-        className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+        className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
         {...rest}
       />
     </label>

package/src/components/form/input/file.tsx

@@ -105,7 +105,7 @@ export const File: React.FC<FileProps> = ({
             <input
               ref={inputRef}
               type="file"
-              className={`peer/file w-full px-4 border-default border rounded-md bg-secondary-bg text-transparent file:hidden focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+              className={`peer/file w-full px-4 border-default border rounded-md bg-secondary-bg text-transparent file:hidden focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
               onChange={(e) => {
                 if (rest.onChange) {
                   rest.onChange({
@@ -120,7 +120,7 @@ export const File: React.FC<FileProps> = ({
             <span
               className={`absolute px-4 pointer-events-none ${
                 tempFile.length === 0 &&
-                "text-slate-300 duration-300 translate-x-0 peer-focus/file:translate-x-1"
+                "text-silent duration-300 translate-x-0 peer-focus/file:translate-x-1"
               }`}
             >
               {tempFile[0]?.name ?? rest.placeholder}
@@ -194,14 +194,14 @@ export const File: React.FC<FileProps> = ({
                   tempFile.length !== 0 ? "mdi:file-outline" : "mynaui:upload"
                 }
                 className={`text-5xl ${
-                  tempFile.length !== 0 ? "" : "text-slate-400"
+                  tempFile.length !== 0 ? "" : "text-disabled"
                 }`}
               />
               <div className="flex flex-col gap-2 items-center">
                 {tempFile.length !== 0 ? (
                   <span>{tempFile[0]?.name}</span>
                 ) : (
-                  <div className="flex gap-2 text-slate-400">
+                  <div className="flex gap-2 text-disabled">
                     <span className="underline underline-offset-2">
                       Click to upload
                     </span>
@@ -210,7 +210,7 @@ export const File: React.FC<FileProps> = ({
                 )}
                 <span
                   className={`text-sm font-light ${
-                    tempFile.length !== 0 ? "" : "text-slate-400"
+                    tempFile.length !== 0 ? "" : "text-disabled"
                   }`}
                 >
                   {tempFile.length !== 0

package/src/components/form/input/number.tsx

@@ -65,7 +65,7 @@ export const Number: React.FC<NumberProps> = ({
         <input
           ref={inputRef}
           type="number"
-          className={`w-full ps-4 pe-20 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+          className={`w-full ps-4 pe-20 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
           {...rest}
         />
         <div className="absolute right-4 flex gap-2">

package/src/components/form/input/password.tsx

@@ -63,12 +63,12 @@ export const Password: React.FC<PasswordProps> = ({
       <div className="relative flex items-center">
         <input
           type={show ? "text" : "password"}
-          className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+          className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
           {...rest}
         />
         <button
           type="button"
-          className="absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+          className="absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
           tabIndex={-1}
           onClick={(e) => {
             e.preventDefault();

package/src/components/form/input/radio.tsx

@@ -46,7 +46,7 @@ export const Radio: React.FC<RadioProps> = ({
         <div className="flex items-center gap-2">
           <span
             className={`flex-1 text-sm select-none ${
-              rest.disabled ? "text-slate-400" : "cursor-pointer"
+              rest.disabled ? "text-disabled" : "cursor-pointer"
             }`}
           >
             {label}

package/src/components/form/input/search.tsx

@@ -23,17 +23,17 @@ export const Search: React.FC<SearchProps> = ({ options, ...rest }) => {
     <label className={`relative flex items-center ${width}`}>
       <Icon
         icon="ic:round-search"
-        className="absolute left-3 text-lg text-slate-400"
+        className="absolute left-3 text-lg text-disabled"
       />
       <input
         type="search"
-        className={`w-full px-9 pe-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+        className={`w-full px-9 pe-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
         {...rest}
       />
       {rest.value && (
         <div
           className={
-            "absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+            "absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
           }
           onClick={() => {
             rest.onChange &&

package/src/components/form/input/text.tsx

@@ -60,7 +60,7 @@ export const Text: React.FC<TextProps> = ({
       )}
       <input
         type="text"
-        className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+        className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
         {...rest}
       />
     </label>

package/src/components/form/input/time.tsx

@@ -184,7 +184,7 @@ export const Time: React.FC<TimeProps> = ({
         <div className="relative flex items-center">
           <input
             type="time"
-            className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-calendar-picker-indicator]:hidden focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+            className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-calendar-picker-indicator]:hidden focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
             value={tempValue}
             onChange={(e) => {
               setTempValue(e.target.value);
@@ -193,7 +193,7 @@ export const Time: React.FC<TimeProps> = ({
           />
           <button
             type="button"
-            className="absolute right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+            className="absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
             tabIndex={-1}
             disabled={rest.disabled}
             onClick={(e) => {

package/src/components/form/other/autocomplete.tsx

@@ -138,7 +138,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
         >
           <input
             type="text"
-            className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+            className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
             placeholder={placeholder}
             required={rest.required}
             disabled={rest.disabled}
@@ -152,7 +152,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
               setTempFilter("");
             }}
           />
-          <div className="absolute right-4 text-xl text-slate-400 pointer-events-none">
+          <div className="absolute right-4 text-xl text-disabled pointer-events-none">
             <Icon icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`} />
           </div>
         </div>

package/src/components/form/other/multipleSelect.tsx

@@ -69,25 +69,12 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
   }, []);
 
   useEffect(() => {
-    if (value) {
+    if (value?.length) {
       setTempValue(value);
       return;
     }
   }, [value]);
 
-  useEffect(() => {
-    onChange &&
-      onChange({
-        target: { value: tempValue },
-      });
-  }, [tempValue]);
-
-  useEffect(() => {
-    if (tempValue.length === 0) {
-      fakeInputRef.current;
-    }
-  }, [tempValue]);
-
   useEffect(() => {
     if (tempValue.length === 0) {
       inputRef.current?.setCustomValidity(
@@ -150,7 +137,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
           >
             {!tempValue || tempValue?.length === 0 ? (
               <span
-                className={`text-slate-300 select-none duration-300 ${
+                className={`text-silent select-none duration-300 ${
                   openDropdown ? "translate-x-1" : "translate-x-0"
                 }`}
               >
@@ -168,12 +155,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
                       className="flex items-center gap-2 px-2 py-0.5 rounded-md bg-primary text-white cursor-default pointer-events-auto"
                     >
                       <span>{menus.find((i) => i.value === item)?.label}</span>
-                      <div
-                        className="cursor-pointer"
-                        onClick={() => {
-                          setTempValue(tempValue.filter((i) => i !== item));
-                        }}
-                      >
+                      <div className="cursor-pointer">
                         <Icon icon="pajamas:close" />
                       </div>
                     </div>
@@ -181,7 +163,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
                 })}
               </div>
             )}
-            <div className="ms-auto text-xl text-slate-400 pointer-events-none">
+            <div className="ms-auto text-xl text-disabled pointer-events-none">
               <Icon
                 icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
               />
@@ -210,6 +192,13 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
                     onClick={() => {
                       if (!disabled) {
                         setTempValue(tempValue.filter((i) => i !== item));
+                        if (onChange) {
+                          onChange({
+                            target: {
+                              value: tempValue.filter((i) => i !== item),
+                            },
+                          } as any);
+                        }
                       }
                     }}
                   >
@@ -258,6 +247,11 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
                   }
                   onClick={() => {
                     setTempValue([...tempValue, item.value]);
+                    if (onChange) {
+                      onChange({
+                        target: { value: [...tempValue, item.value] },
+                      } as any);
+                    }
                   }}
                 >
                   {item.label}

package/src/components/form/other/phoneNumber.tsx

@@ -1595,7 +1595,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
       <div className="flex flex-row-reverse gap-4">
         <div className="relative flex-1 flex items-center">
           <div className="absolute left-0 flex justify-center w-14 border-r">
-            <span className="text-slate-400">
+            <span className="text-disabled">
               {countryCodes.find(
                 (item) => item.code === tempValue[0].split(" ")[1]
               )?.dial_code || ""}
@@ -1603,7 +1603,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
           </div>
           <input
             type="number"
-            className={`w-full ps-16 pe-4 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+            className={`w-full ps-16 pe-4 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
             value={tempValue[1]}
             onChange={(e) => {
               setTempValue((prev) => [prev[0], e.target.value]);
@@ -1614,7 +1614,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
           <div className="relative" ref={triggerRef}>
             <input
               type="text"
-              className={`max-w-[92px] w-min px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 disabled:cursor-default ${height}`}
+              className={`max-w-[92px] w-min px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled disabled:cursor-default ${height}`}
               disabled={rest.disabled}
               value={tempValue[0]}
               onChange={(e) => {

package/src/components/form/other/pin.tsx

@@ -53,7 +53,7 @@ export const Pin: React.FC<PinProps> = ({
       )}
       <div className="flex items-center gap-4">
         <PinField
-          className={`text-center w-10 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+          className={`text-center w-10 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
           length={6}
           validate={/^[0-9]$/}
           onChange={(value) => {

package/src/components/form/other/rating.tsx

@@ -98,7 +98,7 @@ export const Rating: React.FC<RatingProps> = ({
                   }
                 }}
                 className={`duration-300 ease-in-out ${starHeight} ${
-                  rest.disabled ? "text-slate-400" : "text-warning"
+                  rest.disabled ? "text-disabled" : "text-warning"
                 }`}
               >
                 <Icon

package/src/components/form/other/secret.tsx

@@ -58,7 +58,7 @@ export const Secret: React.FC<SecretProps> = ({
       <div className="relative flex items-center">
         <input
           type="text"
-          className={`w-full ps-4 pe-20 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+          className={`w-full ps-4 pe-20 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
           value={show ? value : value ? value.slice(0, 3) + ".." : ""}
           disabled
           {...rest}
@@ -66,7 +66,7 @@ export const Secret: React.FC<SecretProps> = ({
         <div className="absolute right-4 flex">
           <button
             type="button"
-            className="p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+            className="p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
             tabIndex={-1}
             onClick={(e) => {
               e.preventDefault();
@@ -77,7 +77,7 @@ export const Secret: React.FC<SecretProps> = ({
           </button>
           <button
             type="button"
-            className="p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+            className="p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
             tabIndex={-1}
             onClick={(e) => {
               e.preventDefault();

package/src/components/form/other/select.tsx

@@ -98,7 +98,7 @@ export const Select: React.FC<SelectProps> = ({
           <input
             ref={inputRef}
             type="text"
-            className={`w-full ps-4 pe-14 border rounded-md bg-secondary-bg cursor-pointer caret-transparent placeholder:duration-300 placeholder:text-slate-300 focus:placeholder:translate-x-1 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 disabled:cursor-default ${height} ${
+            className={`w-full ps-4 pe-14 border rounded-md bg-secondary-bg cursor-pointer caret-transparent placeholder:duration-300 placeholder:text-silent focus:placeholder:translate-x-1 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled disabled:cursor-default ${height} ${
               openDropdown
                 ? "placeholder:translate-x-1 outline-none ring-1 ring-primary shadow shadow-primary border-primary-dark"
                 : "border-default placeholder:translate-x-0"
@@ -121,7 +121,7 @@ export const Select: React.FC<SelectProps> = ({
               );
             }}
           />
-          <div className="absolute right-4 text-xl text-slate-400 pointer-events-none">
+          <div className="absolute right-4 text-xl text-disabled pointer-events-none">
             <Icon icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`} />
           </div>
         </div>
@@ -182,7 +182,7 @@ export const Select: React.FC<SelectProps> = ({
                     <button
                       key={index}
                       type="button"
-                      className="flex justify-between items-center min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:text-slate-400"
+                      className="flex justify-between items-center min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:text-disabled"
                       disabled={item.disabled}
                       onClick={() => {
                         setTempValue(item.value);

package/src/components/form/other/textarea.tsx

@@ -61,7 +61,7 @@ export const Textarea: React.FC<TextareaProps> = ({
       )}
       <textarea
         rows={rest.rows || 10}
-        className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
+        className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
         {...rest}
       />
     </label>

package/src/components/syntax-highlighter/index.tsx

@@ -31,7 +31,7 @@ export const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({
         {codeString}
       </SH>
       <div
-        className="absolute top-4 right-4 p-1 rounded-full text-xl text-slate-400 cursor-pointer hover:bg-secondary-light"
+        className="absolute top-4 right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
         onClick={(e) => {
           e.preventDefault();
           navigator.clipboard.writeText(codeString);

package/src/components/table/index.tsx

@@ -348,11 +348,11 @@ export const Table: TableComponentProps = ({
               <div className="relative flex items-center">
                 <Icon
                   icon="ic:round-search"
-                  className="absolute text-sm text-slate-400"
+                  className="absolute text-sm text-disabled"
                 />
                 <input
                   type="search"
-                  className="w-full px-6 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
+                  className="w-full px-6 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled"
                   placeholder="search.."
                   value={
                     filter?.find((filterItem) => filterItem.key === item.key)
@@ -371,7 +371,7 @@ export const Table: TableComponentProps = ({
                 {filter?.find((filterItem) => filterItem.key === item.key)
                   ?.value && (
                   <button
-                    className="absolute right-0 rounded-full text-slate-400 hover:bg-secondary-light"
+                    className="absolute right-0 rounded-full text-disabled hover:bg-secondary-light"
                     onClick={() => {
                       setFilter(
                         filter?.map((filterItem) => {
@@ -669,7 +669,7 @@ export const Table: TableComponentProps = ({
                       <div className="invisible w-0 overflow-hidden">
                         <input
                           type="search"
-                          className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
+                          className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled"
                         />
                       </div>
                     )}
@@ -684,7 +684,7 @@ export const Table: TableComponentProps = ({
                       <div className="invisible w-0 overflow-hidden">
                         <input
                           type="search"
-                          className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
+                          className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled"
                         />
                       </div>
                     )}
@@ -701,7 +701,7 @@ export const Table: TableComponentProps = ({
                         <div className="invisible w-0 overflow-hidden">
                           <input
                             type="search"
-                            className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
+                            className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled"
                           />
                         </div>
                       )}
@@ -768,7 +768,7 @@ export const Table: TableComponentProps = ({
             />
           </div>
           {filteredData && filteredData.length !== 0 && (
-            <span className="hidden md:block text-sm text-slate-400">{`Showing ${
+            <span className="hidden md:block text-sm text-disabled">{`Showing ${
               (page - 1) * maxRow + 1
             } to ${
               page * maxRow > filteredData?.length
@@ -779,7 +779,7 @@ export const Table: TableComponentProps = ({
           <div className="flex items-center gap-2 text-xs">
             <button
               type="button"
-              className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
+              className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled disabled:pointer-events-none"
               disabled={page === 1}
               onClick={() => {
                 setPage(1);
@@ -793,7 +793,7 @@ export const Table: TableComponentProps = ({
             </button>
             <button
               type="button"
-              className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
+              className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled disabled:pointer-events-none"
               disabled={page === 1}
               onClick={() => {
                 setPage((prev) => prev - 1);
@@ -827,7 +827,7 @@ export const Table: TableComponentProps = ({
             </div>
             <button
               type="button"
-              className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
+              className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled disabled:pointer-events-none"
               disabled={filteredData?.length <= page * maxRow}
               onClick={() => {
                 setPage((prev) => prev + 1);
@@ -838,7 +838,7 @@ export const Table: TableComponentProps = ({
             </button>
             <button
               type="button"
-              className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
+              className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled disabled:pointer-events-none"
               disabled={filteredData?.length <= page * maxRow}
               onClick={() => {
                 setPage(Math.ceil(filteredData?.length / maxRow));