@ctlyst.id/internal-ui 2.2.1 → 2.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -673,89 +673,94 @@ var InputField = React3.forwardRef((props, ref) => {
673
673
  leftHelperText,
674
674
  rightHelperText,
675
675
  isRequired,
676
- children: /* @__PURE__ */ jsx20(Box9, { children: /* @__PURE__ */ jsxs6(
677
- InputGroup,
676
+ children: /* @__PURE__ */ jsx20(
677
+ Box9,
678
678
  {
679
- size: size2,
679
+ transition: "all 0.15s",
680
+ boxShadow: "none",
680
681
  borderRadius: "sm",
681
- backgroundColor: isDisabled ? "neutral.300" : "white.high",
682
- cursor: isDisabled ? "not-allowed" : "default",
683
- children: [
684
- addOnLeft,
685
- /* @__PURE__ */ jsx20(
686
- ChakraInput,
687
- {
688
- ref,
689
- type: inputType,
690
- value,
691
- isDisabled,
692
- isSuccess,
693
- transition: "all 0.15s",
694
- boxShadow: "none",
695
- borderRadius: "sm",
696
- border: "1px solid",
697
- borderColor: outlineColor,
698
- _focusWithin: {
699
- borderColor: focusColor
700
- },
701
- ...inputProps,
702
- fontSize
703
- }
704
- ),
705
- (withClear || isLoading || type === "password") && /* @__PURE__ */ jsxs6(
706
- Box9,
707
- {
708
- "data-test-id": "CT_Component_ClearInput",
709
- display: "flex",
710
- alignItems: "center",
711
- justifyContent: "center",
712
- width: "16px",
713
- mr: "10px",
714
- children: [
715
- withClear && !isLoading && /* @__PURE__ */ jsx20(
716
- Box9,
717
- {
718
- display: "flex",
719
- justifyContent: "center",
720
- onClick: !isDisabled ? onClear : void 0,
721
- cursor: isDisabled ? "not-allowed" : "pointer",
722
- children: /* @__PURE__ */ jsx20(Close3, { size: 4, color: iconColor })
723
- }
724
- ),
725
- type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ jsx20(
726
- Box9,
727
- {
728
- "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
729
- onClick: () => {
730
- if (!isDisabled) setIsShowPassword(true);
731
- },
732
- cursor: isDisabled ? "not-allowed" : "pointer",
733
- display: "flex",
734
- justifyContent: "center",
735
- children: /* @__PURE__ */ jsx20(EyeOff, { size: 4, color: iconColor })
736
- }
737
- ),
738
- type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ jsx20(
739
- Box9,
740
- {
741
- "data-test-id": "sfc2388bmeXBmdla45Ibk",
742
- onClick: () => {
743
- if (!isDisabled) setIsShowPassword(false);
744
- },
745
- cursor: isDisabled ? "not-allowed" : "pointer",
746
- display: "flex",
747
- justifyContent: "center",
748
- children: /* @__PURE__ */ jsx20(Eye2, { size: 4, color: iconColor })
749
- }
750
- ),
751
- isLoading && /* @__PURE__ */ jsx20(loader_default, { size: "sm" })
752
- ]
753
- }
754
- ),
755
- addOnRight
756
- ]
682
+ border: "1px solid",
683
+ borderColor: outlineColor,
684
+ _focusWithin: {
685
+ borderColor: focusColor
686
+ },
687
+ children: /* @__PURE__ */ jsxs6(
688
+ InputGroup,
689
+ {
690
+ size: size2,
691
+ borderRadius: "sm",
692
+ backgroundColor: isDisabled ? "neutral.300" : "white.high",
693
+ cursor: isDisabled ? "not-allowed" : "default",
694
+ children: [
695
+ addOnLeft,
696
+ /* @__PURE__ */ jsx20(
697
+ ChakraInput,
698
+ {
699
+ ref,
700
+ type: inputType,
701
+ value,
702
+ isDisabled,
703
+ isSuccess,
704
+ ...inputProps,
705
+ fontSize
706
+ }
707
+ ),
708
+ (withClear || isLoading || type === "password") && /* @__PURE__ */ jsxs6(
709
+ Box9,
710
+ {
711
+ "data-test-id": "CT_Component_ClearInput",
712
+ display: "flex",
713
+ alignItems: "center",
714
+ justifyContent: "center",
715
+ width: "16px",
716
+ mr: "10px",
717
+ children: [
718
+ withClear && !isLoading && /* @__PURE__ */ jsx20(
719
+ Box9,
720
+ {
721
+ display: "flex",
722
+ justifyContent: "center",
723
+ onClick: !isDisabled ? onClear : void 0,
724
+ cursor: isDisabled ? "not-allowed" : "pointer",
725
+ children: /* @__PURE__ */ jsx20(Close3, { size: 4, color: iconColor })
726
+ }
727
+ ),
728
+ type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ jsx20(
729
+ Box9,
730
+ {
731
+ "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
732
+ onClick: () => {
733
+ if (!isDisabled) setIsShowPassword(true);
734
+ },
735
+ cursor: isDisabled ? "not-allowed" : "pointer",
736
+ display: "flex",
737
+ justifyContent: "center",
738
+ children: /* @__PURE__ */ jsx20(EyeOff, { size: 4, color: iconColor })
739
+ }
740
+ ),
741
+ type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ jsx20(
742
+ Box9,
743
+ {
744
+ "data-test-id": "sfc2388bmeXBmdla45Ibk",
745
+ onClick: () => {
746
+ if (!isDisabled) setIsShowPassword(false);
747
+ },
748
+ cursor: isDisabled ? "not-allowed" : "pointer",
749
+ display: "flex",
750
+ justifyContent: "center",
751
+ children: /* @__PURE__ */ jsx20(Eye2, { size: 4, color: iconColor })
752
+ }
753
+ ),
754
+ isLoading && /* @__PURE__ */ jsx20(loader_default, { size: "sm" })
755
+ ]
756
+ }
757
+ ),
758
+ addOnRight
759
+ ]
760
+ }
761
+ )
757
762
  }
758
- ) })
763
+ )
759
764
  }
760
765
  );
761
766
  });
@@ -822,12 +827,6 @@ var Counter = ({
822
827
  helperText = "",
823
828
  isReadOnly = false
824
829
  }) => {
825
- const getFieldSize = () => {
826
- if (size2 === "xl") return "lg";
827
- if (size2 === "lg") return "md";
828
- if (size2 === "md") return "sm";
829
- return "xs";
830
- };
831
830
  const decrement = () => {
832
831
  onChange(value - 1);
833
832
  };
@@ -858,7 +857,7 @@ var Counter = ({
858
857
  isError,
859
858
  isDisabled: disabled || max === 0,
860
859
  textAlign: "center",
861
- size: getFieldSize(),
860
+ size: size2,
862
861
  min,
863
862
  max,
864
863
  onChange: handleChange,
@@ -2400,7 +2399,7 @@ function environmentName(env) {
2400
2399
 
2401
2400
  // src/components/header/components/version.tsx
2402
2401
  import { Fragment as Fragment3, jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
2403
- var Version = ({ hideEnv, version, environment, onOpenModalRelease }) => /* @__PURE__ */ jsxs15(Fragment3, { children: [
2402
+ var Version = ({ hideEnv, version, environment, onOpenModalRelease, versionStyle }) => /* @__PURE__ */ jsxs15(Fragment3, { children: [
2404
2403
  version && /* @__PURE__ */ jsx33(
2405
2404
  badge_default,
2406
2405
  {
@@ -2409,6 +2408,7 @@ var Version = ({ hideEnv, version, environment, onOpenModalRelease }) => /* @__P
2409
2408
  variant: "neutral-light",
2410
2409
  onClick: onOpenModalRelease,
2411
2410
  cursor: onOpenModalRelease ? "pointer" : "auto",
2411
+ ...versionStyle,
2412
2412
  children: version
2413
2413
  }
2414
2414
  ),
@@ -2430,7 +2430,8 @@ Version.defaultProps = {
2430
2430
  hideEnv: false,
2431
2431
  environment: void 0,
2432
2432
  version: void 0,
2433
- onOpenModalRelease: void 0
2433
+ onOpenModalRelease: void 0,
2434
+ versionStyle: void 0
2434
2435
  };
2435
2436
  var version_default = Version;
2436
2437
 
@@ -2451,6 +2452,7 @@ var Header = ({
2451
2452
  children,
2452
2453
  profile,
2453
2454
  bg = "white",
2455
+ versionStyle,
2454
2456
  ...props
2455
2457
  }) => /* @__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: [
2456
2458
  mainLogo && /* @__PURE__ */ jsxs16(Flex4, { alignItems: "center", children: [
@@ -2465,7 +2467,8 @@ var Header = ({
2465
2467
  hideEnv,
2466
2468
  version: data == null ? void 0 : data.version,
2467
2469
  environment: data == null ? void 0 : data.environment,
2468
- onOpenModalRelease
2470
+ onOpenModalRelease,
2471
+ versionStyle
2469
2472
  }
2470
2473
  )
2471
2474
  ] }),
@@ -2486,7 +2489,8 @@ Header.defaultProps = {
2486
2489
  centerLogoSize: void 0,
2487
2490
  hideEnv: false,
2488
2491
  urlLogo: void 0,
2489
- profile: void 0
2492
+ profile: void 0,
2493
+ versionStyle: void 0
2490
2494
  };
2491
2495
  var header_default = Header;
2492
2496
 
@@ -4901,19 +4905,25 @@ var baseStyle5 = definePartsStyle4({
4901
4905
  });
4902
4906
  var size = {
4903
4907
  lg: defineStyle3({
4904
- fontSize: "text.lg",
4908
+ textStyle: "text.lg",
4905
4909
  h: 12,
4906
4910
  borderRadius: "sm"
4907
4911
  }),
4908
4912
  md: defineStyle3({
4909
- fontSize: "text.md",
4913
+ textStyle: "text.md",
4910
4914
  h: 10,
4911
4915
  borderRadius: "sm"
4912
4916
  }),
4913
4917
  sm: defineStyle3({
4914
- fontSize: "text.sm",
4918
+ textStyle: "text.sm",
4915
4919
  h: 9.5,
4916
4920
  borderRadius: "sm"
4921
+ }),
4922
+ xs: defineStyle3({
4923
+ textStyle: "text.sm",
4924
+ p: 1,
4925
+ h: 5.5,
4926
+ borderRadius: "sm"
4917
4927
  })
4918
4928
  };
4919
4929
  var sizes2 = {
@@ -4928,6 +4938,10 @@ var sizes2 = {
4928
4938
  sm: definePartsStyle4({
4929
4939
  field: size.sm,
4930
4940
  addon: size.sm
4941
+ }),
4942
+ xs: definePartsStyle4({
4943
+ field: size.xs,
4944
+ addon: size.xs
4931
4945
  })
4932
4946
  };
4933
4947
  var outline = definePartsStyle4((props) => {