@ctlyst.id/internal-ui 2.2.1 → 2.2.2

package/dist/index.mjs

@@ -673,89 +673,94 @@ var InputField = React3.forwardRef((props, ref) => {
       leftHelperText,
       rightHelperText,
       isRequired,
-      children: /* @__PURE__ */ jsx20(Box9, { children: /* @__PURE__ */ jsxs6(
-        InputGroup,
+      children: /* @__PURE__ */ jsx20(
+        Box9,
         {
-          size: size2,
+          transition: "all 0.15s",
+          boxShadow: "none",
           borderRadius: "sm",
-          backgroundColor: isDisabled ? "neutral.300" : "white.high",
-          cursor: isDisabled ? "not-allowed" : "default",
-          children: [
-            addOnLeft,
-            /* @__PURE__ */ jsx20(
-              ChakraInput,
-              {
-                ref,
-                type: inputType,
-                value,
-                isDisabled,
-                isSuccess,
-                transition: "all 0.15s",
-                boxShadow: "none",
-                borderRadius: "sm",
-                border: "1px solid",
-                borderColor: outlineColor,
-                _focusWithin: {
-                  borderColor: focusColor
-                },
-                ...inputProps,
-                fontSize
-              }
-            ),
-            (withClear || isLoading || type === "password") && /* @__PURE__ */ jsxs6(
-              Box9,
-              {
-                "data-test-id": "CT_Component_ClearInput",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "16px",
-                mr: "10px",
-                children: [
-                  withClear && !isLoading && /* @__PURE__ */ jsx20(
-                    Box9,
-                    {
-                      display: "flex",
-                      justifyContent: "center",
-                      onClick: !isDisabled ? onClear : void 0,
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      children: /* @__PURE__ */ jsx20(Close3, { size: 4, color: iconColor })
-                    }
-                  ),
-                  type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ jsx20(
-                    Box9,
-                    {
-                      "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
-                      onClick: () => {
-                        if (!isDisabled) setIsShowPassword(true);
-                      },
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      display: "flex",
-                      justifyContent: "center",
-                      children: /* @__PURE__ */ jsx20(EyeOff, { size: 4, color: iconColor })
-                    }
-                  ),
-                  type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ jsx20(
-                    Box9,
-                    {
-                      "data-test-id": "sfc2388bmeXBmdla45Ibk",
-                      onClick: () => {
-                        if (!isDisabled) setIsShowPassword(false);
-                      },
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      display: "flex",
-                      justifyContent: "center",
-                      children: /* @__PURE__ */ jsx20(Eye2, { size: 4, color: iconColor })
-                    }
-                  ),
-                  isLoading && /* @__PURE__ */ jsx20(loader_default, { size: "sm" })
-                ]
-              }
-            ),
-            addOnRight
-          ]
+          border: "1px solid",
+          borderColor: outlineColor,
+          _focusWithin: {
+            borderColor: focusColor
+          },
+          children: /* @__PURE__ */ jsxs6(
+            InputGroup,
+            {
+              size: size2,
+              borderRadius: "sm",
+              backgroundColor: isDisabled ? "neutral.300" : "white.high",
+              cursor: isDisabled ? "not-allowed" : "default",
+              children: [
+                addOnLeft,
+                /* @__PURE__ */ jsx20(
+                  ChakraInput,
+                  {
+                    ref,
+                    type: inputType,
+                    value,
+                    isDisabled,
+                    isSuccess,
+                    ...inputProps,
+                    fontSize
+                  }
+                ),
+                (withClear || isLoading || type === "password") && /* @__PURE__ */ jsxs6(
+                  Box9,
+                  {
+                    "data-test-id": "CT_Component_ClearInput",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "16px",
+                    mr: "10px",
+                    children: [
+                      withClear && !isLoading && /* @__PURE__ */ jsx20(
+                        Box9,
+                        {
+                          display: "flex",
+                          justifyContent: "center",
+                          onClick: !isDisabled ? onClear : void 0,
+                          cursor: isDisabled ? "not-allowed" : "pointer",
+                          children: /* @__PURE__ */ jsx20(Close3, { size: 4, color: iconColor })
+                        }
+                      ),
+                      type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ jsx20(
+                        Box9,
+                        {
+                          "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
+                          onClick: () => {
+                            if (!isDisabled) setIsShowPassword(true);
+                          },
+                          cursor: isDisabled ? "not-allowed" : "pointer",
+                          display: "flex",
+                          justifyContent: "center",
+                          children: /* @__PURE__ */ jsx20(EyeOff, { size: 4, color: iconColor })
+                        }
+                      ),
+                      type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ jsx20(
+                        Box9,
+                        {
+                          "data-test-id": "sfc2388bmeXBmdla45Ibk",
+                          onClick: () => {
+                            if (!isDisabled) setIsShowPassword(false);
+                          },
+                          cursor: isDisabled ? "not-allowed" : "pointer",
+                          display: "flex",
+                          justifyContent: "center",
+                          children: /* @__PURE__ */ jsx20(Eye2, { size: 4, color: iconColor })
+                        }
+                      ),
+                      isLoading && /* @__PURE__ */ jsx20(loader_default, { size: "sm" })
+                    ]
+                  }
+                ),
+                addOnRight
+              ]
+            }
+          )
         }
-      ) })
+      )
     }
   );
 });
@@ -822,12 +827,6 @@ var Counter = ({
   helperText = "",
   isReadOnly = false
 }) => {
-  const getFieldSize = () => {
-    if (size2 === "xl") return "lg";
-    if (size2 === "lg") return "md";
-    if (size2 === "md") return "sm";
-    return "xs";
-  };
   const decrement = () => {
     onChange(value - 1);
   };
@@ -858,7 +857,7 @@ var Counter = ({
           isError,
           isDisabled: disabled || max === 0,
           textAlign: "center",
-          size: getFieldSize(),
+          size: size2,
           min,
           max,
           onChange: handleChange,
@@ -2400,7 +2399,7 @@ function environmentName(env) {
 
 // src/components/header/components/version.tsx
 import { Fragment as Fragment3, jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
-var Version = ({ hideEnv, version, environment, onOpenModalRelease }) => /* @__PURE__ */ jsxs15(Fragment3, { children: [
+var Version = ({ hideEnv, version, environment, onOpenModalRelease, versionStyle }) => /* @__PURE__ */ jsxs15(Fragment3, { children: [
   version && /* @__PURE__ */ jsx33(
     badge_default,
     {
@@ -2409,6 +2408,7 @@ var Version = ({ hideEnv, version, environment, onOpenModalRelease }) => /* @__P
       variant: "neutral-light",
       onClick: onOpenModalRelease,
       cursor: onOpenModalRelease ? "pointer" : "auto",
+      ...versionStyle,
       children: version
     }
   ),
@@ -2430,7 +2430,8 @@ Version.defaultProps = {
   hideEnv: false,
   environment: void 0,
   version: void 0,
-  onOpenModalRelease: void 0
+  onOpenModalRelease: void 0,
+  versionStyle: void 0
 };
 var version_default = Version;
 
@@ -2451,6 +2452,7 @@ var Header = ({
   children,
   profile,
   bg = "white",
+  versionStyle,
   ...props
 }) => /* @__PURE__ */ jsx34(Flex4, { minH: 15, bg, shadow: "raised", px: 6, py: 3, alignItems: "center", ...props, children: /* @__PURE__ */ jsxs16(Flex4, { h: "auto", w: "full", alignItems: "center", justifyContent: profile ? "flex-end" : "space-between", pos: "relative", children: [
   mainLogo && /* @__PURE__ */ jsxs16(Flex4, { alignItems: "center", children: [
@@ -2465,7 +2467,8 @@ var Header = ({
         hideEnv,
         version: data == null ? void 0 : data.version,
         environment: data == null ? void 0 : data.environment,
-        onOpenModalRelease
+        onOpenModalRelease,
+        versionStyle
       }
     )
   ] }),
@@ -2486,7 +2489,8 @@ Header.defaultProps = {
   centerLogoSize: void 0,
   hideEnv: false,
   urlLogo: void 0,
-  profile: void 0
+  profile: void 0,
+  versionStyle: void 0
 };
 var header_default = Header;
 
@@ -4901,19 +4905,25 @@ var baseStyle5 = definePartsStyle4({
 });
 var size = {
   lg: defineStyle3({
-    fontSize: "text.lg",
+    textStyle: "text.lg",
     h: 12,
     borderRadius: "sm"
   }),
   md: defineStyle3({
-    fontSize: "text.md",
+    textStyle: "text.md",
     h: 10,
     borderRadius: "sm"
   }),
   sm: defineStyle3({
-    fontSize: "text.sm",
+    textStyle: "text.sm",
     h: 9.5,
     borderRadius: "sm"
+  }),
+  xs: defineStyle3({
+    textStyle: "text.sm",
+    p: 1,
+    h: 5.5,
+    borderRadius: "sm"
   })
 };
 var sizes2 = {
@@ -4928,6 +4938,10 @@ var sizes2 = {
   sm: definePartsStyle4({
     field: size.sm,
     addon: size.sm
+  }),
+  xs: definePartsStyle4({
+    field: size.xs,
+    addon: size.xs
   })
 };
 var outline = definePartsStyle4((props) => {