@ctlyst.id/internal-ui 2.2.1 → 2.2.2

package/dist/index.d.mts

@@ -339,6 +339,7 @@ type HeaderProps = BoxProps & {
     hideEnv?: boolean;
     urlLogo?: string;
     profile?: React$1.ReactNode;
+    versionStyle?: BadgeProps$1;
 };
 declare const Header: React$1.FC<HeaderProps>;
 

package/dist/index.d.ts

@@ -339,6 +339,7 @@ type HeaderProps = BoxProps & {
     hideEnv?: boolean;
     urlLogo?: string;
     profile?: React$1.ReactNode;
+    versionStyle?: BadgeProps$1;
 };
 declare const Header: React$1.FC<HeaderProps>;
 

package/dist/index.js

@@ -992,89 +992,94 @@ var InputField = import_react23.default.forwardRef((props, ref) => {
       leftHelperText,
       rightHelperText,
       isRequired,
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react22.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-        import_react22.InputGroup,
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        import_react22.Box,
         {
-          size: size2,
+          transition: "all 0.15s",
+          boxShadow: "none",
           borderRadius: "sm",
-          backgroundColor: isDisabled ? "neutral.300" : "white.high",
-          cursor: isDisabled ? "not-allowed" : "default",
-          children: [
-            addOnLeft,
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              import_react22.Input,
-              {
-                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__ */ (0, import_jsx_runtime21.jsxs)(
-              import_react22.Box,
-              {
-                "data-test-id": "CT_Component_ClearInput",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "16px",
-                mr: "10px",
-                children: [
-                  withClear && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                    import_react22.Box,
-                    {
-                      display: "flex",
-                      justifyContent: "center",
-                      onClick: !isDisabled ? onClear : void 0,
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Close, { size: 4, color: iconColor })
-                    }
-                  ),
-                  type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                    import_react22.Box,
-                    {
-                      "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
-                      onClick: () => {
-                        if (!isDisabled) setIsShowPassword(true);
-                      },
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      display: "flex",
-                      justifyContent: "center",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.EyeOff, { size: 4, color: iconColor })
-                    }
-                  ),
-                  type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                    import_react22.Box,
-                    {
-                      "data-test-id": "sfc2388bmeXBmdla45Ibk",
-                      onClick: () => {
-                        if (!isDisabled) setIsShowPassword(false);
-                      },
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      display: "flex",
-                      justifyContent: "center",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Eye, { size: 4, color: iconColor })
-                    }
-                  ),
-                  isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(loader_default, { size: "sm" })
-                ]
-              }
-            ),
-            addOnRight
-          ]
+          border: "1px solid",
+          borderColor: outlineColor,
+          _focusWithin: {
+            borderColor: focusColor
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+            import_react22.InputGroup,
+            {
+              size: size2,
+              borderRadius: "sm",
+              backgroundColor: isDisabled ? "neutral.300" : "white.high",
+              cursor: isDisabled ? "not-allowed" : "default",
+              children: [
+                addOnLeft,
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  import_react22.Input,
+                  {
+                    ref,
+                    type: inputType,
+                    value,
+                    isDisabled,
+                    isSuccess,
+                    ...inputProps,
+                    fontSize
+                  }
+                ),
+                (withClear || isLoading || type === "password") && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                  import_react22.Box,
+                  {
+                    "data-test-id": "CT_Component_ClearInput",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "16px",
+                    mr: "10px",
+                    children: [
+                      withClear && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        import_react22.Box,
+                        {
+                          display: "flex",
+                          justifyContent: "center",
+                          onClick: !isDisabled ? onClear : void 0,
+                          cursor: isDisabled ? "not-allowed" : "pointer",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Close, { size: 4, color: iconColor })
+                        }
+                      ),
+                      type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        import_react22.Box,
+                        {
+                          "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
+                          onClick: () => {
+                            if (!isDisabled) setIsShowPassword(true);
+                          },
+                          cursor: isDisabled ? "not-allowed" : "pointer",
+                          display: "flex",
+                          justifyContent: "center",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.EyeOff, { size: 4, color: iconColor })
+                        }
+                      ),
+                      type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        import_react22.Box,
+                        {
+                          "data-test-id": "sfc2388bmeXBmdla45Ibk",
+                          onClick: () => {
+                            if (!isDisabled) setIsShowPassword(false);
+                          },
+                          cursor: isDisabled ? "not-allowed" : "pointer",
+                          display: "flex",
+                          justifyContent: "center",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Eye, { size: 4, color: iconColor })
+                        }
+                      ),
+                      isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(loader_default, { size: "sm" })
+                    ]
+                  }
+                ),
+                addOnRight
+              ]
+            }
+          )
         }
-      ) })
+      )
     }
   );
 });
@@ -1121,12 +1126,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);
   };
@@ -1157,7 +1156,7 @@ var Counter = ({
           isError,
           isDisabled: disabled || max === 0,
           textAlign: "center",
-          size: getFieldSize(),
+          size: size2,
           min,
           max,
           onChange: handleChange,
@@ -2665,7 +2664,7 @@ function environmentName(env) {
 
 // src/components/header/components/version.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var Version = ({ hideEnv, version, environment, onOpenModalRelease }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+var Version = ({ hideEnv, version, environment, onOpenModalRelease, versionStyle }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
   version && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     badge_default,
     {
@@ -2674,6 +2673,7 @@ var Version = ({ hideEnv, version, environment, onOpenModalRelease }) => /* @__P
       variant: "neutral-light",
       onClick: onOpenModalRelease,
       cursor: onOpenModalRelease ? "pointer" : "auto",
+      ...versionStyle,
       children: version
     }
   ),
@@ -2695,7 +2695,8 @@ Version.defaultProps = {
   hideEnv: false,
   environment: void 0,
   version: void 0,
-  onOpenModalRelease: void 0
+  onOpenModalRelease: void 0,
+  versionStyle: void 0
 };
 var version_default = Version;
 
@@ -2716,6 +2717,7 @@ var Header = ({
   children,
   profile,
   bg = "white",
+  versionStyle,
   ...props
 }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react45.Flex, { minH: 15, bg, shadow: "raised", px: 6, py: 3, alignItems: "center", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react45.Flex, { h: "auto", w: "full", alignItems: "center", justifyContent: profile ? "flex-end" : "space-between", pos: "relative", children: [
   mainLogo && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react45.Flex, { alignItems: "center", children: [
@@ -2730,7 +2732,8 @@ var Header = ({
         hideEnv,
         version: data == null ? void 0 : data.version,
         environment: data == null ? void 0 : data.environment,
-        onOpenModalRelease
+        onOpenModalRelease,
+        versionStyle
       }
     )
   ] }),
@@ -2751,7 +2754,8 @@ Header.defaultProps = {
   centerLogoSize: void 0,
   hideEnv: false,
   urlLogo: void 0,
-  profile: void 0
+  profile: void 0,
+  versionStyle: void 0
 };
 var header_default = Header;
 
@@ -4981,19 +4985,25 @@ var baseStyle5 = definePartsStyle4({
 });
 var size = {
   lg: (0, import_styled_system7.defineStyle)({
-    fontSize: "text.lg",
+    textStyle: "text.lg",
     h: 12,
     borderRadius: "sm"
   }),
   md: (0, import_styled_system7.defineStyle)({
-    fontSize: "text.md",
+    textStyle: "text.md",
     h: 10,
     borderRadius: "sm"
   }),
   sm: (0, import_styled_system7.defineStyle)({
-    fontSize: "text.sm",
+    textStyle: "text.sm",
     h: 9.5,
     borderRadius: "sm"
+  }),
+  xs: (0, import_styled_system7.defineStyle)({
+    textStyle: "text.sm",
+    p: 1,
+    h: 5.5,
+    borderRadius: "sm"
   })
 };
 var sizes2 = {
@@ -5008,6 +5018,10 @@ var sizes2 = {
   sm: definePartsStyle4({
     field: size.sm,
     addon: size.sm
+  }),
+  xs: definePartsStyle4({
+    field: size.xs,
+    addon: size.xs
   })
 };
 var outline = definePartsStyle4((props) => {