@ctlyst.id/internal-ui 2.1.14 → 2.1.16

package/dist/index.mjs

@@ -867,7 +867,7 @@ var Counter = ({
           isReadOnly,
           width: 12,
           type: "number",
-          borderColor: "neutral.200"
+          borderColor: isError ? "danger.500" : "neutral.200"
         }
       ),
       /* @__PURE__ */ jsx22(
@@ -916,7 +916,6 @@ var getCommonPinningStyles = (column) => {
     left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
     right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
     position: isPinned ? "sticky" : "relative",
-    width: column.getSize(),
     zIndex: isPinned ? 1 : 0,
     backgroundColor: "white",
     ...isLastLeftPinnedColumn ? {
@@ -1078,8 +1077,8 @@ var DataTable = React5.forwardRef((props, ref) => {
           Th,
           {
             colSpan: header.colSpan,
-            width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
             sx: getCommonPinningStyles(header.column),
+            width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
             ...styles == null ? void 0 : styles.tableColumnHeader,
             children: /* @__PURE__ */ jsxs9(
               Flex,
@@ -2664,12 +2663,10 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/navigation/components/navigation.tsx
-import { ChevronDownIcon as ChevronDownIcon2 } from "@chakra-ui/icons";
 import {
-  Box as Box20,
+  Box as Box21,
+  Button as Button2,
   Flex as Flex6,
-  HStack as HStack5,
-  Icon as Icon2,
   Link as Link2,
   Popover as Popover2,
   PopoverContent as PopoverContent2,
@@ -2678,111 +2675,65 @@ import {
   Text as Text8,
   useColorModeValue as useColorModeValue8
 } from "@chakra-ui/react";
+import * as Icon3 from "@ctlyst.id/internal-icon";
 import { css as css3 } from "@emotion/react";
 
-// src/components/navigation/components/mapping-icon.ts
-import {
-  FiBox,
-  FiDollarSign,
-  FiGift,
-  FiLayers,
-  FiLayout,
-  FiRepeat,
-  FiRotateCcw,
-  FiSettings,
-  FiShoppingBag,
-  FiShoppingCart,
-  FiUsers
-} from "react-icons/fi";
-
-// src/components/navigation/components/customer-icon.tsx
-import { createIcon } from "@chakra-ui/react";
+// src/components/navigation/components/mapping-icon.tsx
+import * as Icon2 from "@ctlyst.id/internal-icon";
 import { jsx as jsx40 } from "react/jsx-runtime";
-var CustomerIcon = createIcon({
-  displayName: "CustomerIcon",
-  viewBox: "0 0 16 16",
-  path: [
-    /* @__PURE__ */ jsx40(
-      "path",
-      {
-        fill: "currentColor",
-        fillRule: "inherit",
-        d: "M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2ZM.667 8a7.333 7.333 0 1 1 14.666 0A7.333 7.333 0 0 1 .667 8Z",
-        clipRule: "inherit"
-      }
-    ),
-    /* @__PURE__ */ jsx40(
-      "path",
-      {
-        fill: "currentColor",
-        d: "M12.416 12.698a1.997 1.997 0 0 0-1.75-1.031H5.334a2 2 0 0 0-1.864 1.277 7.722 7.722 0 0 1-.943-1.074 3.329 3.329 0 0 1 2.807-1.537h5.334a3.333 3.333 0 0 1 2.703 1.384c-.275.325-.594.66-.954.98Z"
-      }
-    ),
-    /* @__PURE__ */ jsx40(
-      "path",
-      {
-        fill: "currentColor",
-        fillRule: "inherit",
-        d: "M8 5.333A1.333 1.333 0 1 0 8 8a1.333 1.333 0 0 0 0-2.667ZM5.333 6.667a2.667 2.667 0 1 1 5.334 0 2.667 2.667 0 0 1-5.334 0Z",
-        clipRule: "inherit"
-      }
-    )
-  ]
-});
-var customer_icon_default = CustomerIcon;
-
-// src/components/navigation/components/mapping-icon.ts
 var mappingIcon = /* @__PURE__ */ new Map([
-  ["Order", FiShoppingBag],
-  ["Fulfillment", FiShoppingCart],
-  ["Transfer Stock", FiRepeat],
-  ["Stock", FiBox],
-  ["Product Database", FiLayers],
-  ["Purchasing", FiDollarSign],
-  ["Reseller", FiUsers],
-  ["Retur", FiRotateCcw],
-  ["Other", FiSettings],
-  ["Content", FiLayout],
-  ["Voucher", FiGift],
-  ["Customer", customer_icon_default]
+  ["Order", /* @__PURE__ */ jsx40(Icon2.ShoppingBag, { size: 4, color: "inherit" }, "order")],
+  ["Fulfillment", /* @__PURE__ */ jsx40(Icon2.ShoppingCart, { size: 4, color: "inherit" }, "fullfilment")],
+  ["Transfer Stock", /* @__PURE__ */ jsx40(Icon2.Repeat, { size: 4, color: "inherit" }, "transfer-stock")],
+  ["Stock", /* @__PURE__ */ jsx40(Icon2.Box, { size: 4, color: "inherit" }, "stock")],
+  ["Product Database", /* @__PURE__ */ jsx40(Icon2.Layers, { size: 4, color: "inherit" }, "product-database")],
+  ["Purchasing", /* @__PURE__ */ jsx40(Icon2.DollarSign, { size: 4, color: "inherit" }, "purchasing")],
+  ["Reseller", /* @__PURE__ */ jsx40(Icon2.Users, { size: 4, color: "inherit" }, "reseller")],
+  ["Retur", /* @__PURE__ */ jsx40(Icon2.RotateCcw, { size: 4, color: "inherit" }, "retur")],
+  ["Other", /* @__PURE__ */ jsx40(Icon2.Settings, { size: 4, color: "inherit" }, "other")],
+  ["Content", /* @__PURE__ */ jsx40(Icon2.Layout, { size: 4, color: "inherit" }, "content")],
+  ["Customer", /* @__PURE__ */ jsx40(Icon2.HelpCircle, { size: 4, color: "inherit" }, "content")],
+  ["Voucher", /* @__PURE__ */ jsx40(Icon2.Gift, { size: 4, color: "inherit" }, "content")]
 ]);
 
 // src/components/navigation/components/navigation.tsx
 import { Fragment as Fragment4, jsx as jsx41, jsxs as jsxs17 } from "react/jsx-runtime";
 var Navigation = ({ navigations, activePath, as, host, ...props }) => {
-  return /* @__PURE__ */ jsx41(
-    Box20,
+  return /* @__PURE__ */ jsx41(Box21, { borderRadius: "md", overflowX: "auto", ...props, children: /* @__PURE__ */ jsx41(
+    Flex6,
     {
-      bg: useColorModeValue8("white", "ebony-clay.800"),
-      boxShadow: "0 4px 20px 0 rgb(0 0 0 / 5%)",
-      borderRadius: "md",
-      overflowX: "auto",
-      ...props,
-      children: /* @__PURE__ */ jsx41(Flex6, { alignItems: "center", p: 2, children: /* @__PURE__ */ jsx41(HStack5, { spacing: 2, children: navigations == null ? void 0 : navigations.map((navigation) => {
+      bg: "white",
+      w: "full",
+      rounded: "md",
+      flexWrap: "wrap",
+      alignItems: "center",
+      shadow: "raised",
+      gap: 1,
+      px: 4,
+      py: 2,
+      children: navigations == null ? void 0 : navigations.map((navigation) => {
         const isActive = activePath.startsWith(navigation.navLink || "");
         const activeBg = isActive ? "primary.500" : void 0;
         return /* @__PURE__ */ jsx41(Popover2, { trigger: "hover", placement: "bottom-start", children: ({ isOpen }) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
-          /* @__PURE__ */ jsx41(PopoverTrigger2, { children: /* @__PURE__ */ jsxs17(
-            Box20,
+          /* @__PURE__ */ jsx41(PopoverTrigger2, { children: /* @__PURE__ */ jsx41(
+            Button2,
             {
-              display: "flex",
-              alignItems: "center",
-              borderRadius: "md",
-              cursor: "pointer",
+              h: 7.5,
+              p: 2,
+              size: "sm",
+              variant: "ghost",
+              "data-test-id": `CT_component_navigation_button-${navigation.title}${isActive ? "-active" : ""}`,
               _hover: {
-                backgroundColor: !isActive ? useColorModeValue8("dove-gray.50", "transparent") : activeBg
+                backgroundColor: !isActive ? "neutral.400" : activeBg
               },
-              backgroundColor: isOpen && !isActive ? useColorModeValue8("dove-gray.50", "transparent") : activeBg,
-              color: isActive ? "white" : "inherit",
-              p: 2,
-              children: [
-                /* @__PURE__ */ jsx41(Icon2, { as: mappingIcon.get(navigation.title), mr: 2 }),
-                /* @__PURE__ */ jsx41(Text8, { whiteSpace: "nowrap", fontSize: "text.sm", fontWeight: 400, children: navigation.title }),
-                /* @__PURE__ */ jsx41(ChevronDownIcon2, { ml: 2 })
-              ]
+              backgroundColor: isOpen && !isActive ? "neutral.400" : activeBg,
+              color: isActive ? "primary.50" : "black.high",
+              leftIcon: mappingIcon.get(navigation.title),
+              rightIcon: /* @__PURE__ */ jsx41(Icon3.ChevronDown, { size: 4, color: "inherit" }),
+              children: navigation.title
             }
           ) }),
-          navigation.children && /* @__PURE__ */ jsx41(Portal, { children: /* @__PURE__ */ jsx41(Box20, { zIndex: "popover", children: /* @__PURE__ */ jsx41(
+          navigation.children && /* @__PURE__ */ jsx41(Portal, { children: /* @__PURE__ */ jsx41(Box21, { zIndex: "popover", children: /* @__PURE__ */ jsx41(
             PopoverContent2,
             {
               bg: useColorModeValue8("white", "ebony-clay.800"),
@@ -2803,7 +2754,7 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                       textDecoration: "none"
                     },
                     children: /* @__PURE__ */ jsxs17(
-                      Box20,
+                      Box21,
                       {
                         display: "flex",
                         position: "relative",
@@ -2820,15 +2771,15 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                         },
                         color: isActiveSub ? "primary.500" : "inherit",
                         css: css3`
-                                      border-spacing: 4px;
-                                    `,
+                                    border-spacing: 4px;
+                                  `,
                         px: 6,
                         py: 4,
                         children: [
-                          /* @__PURE__ */ jsx41(Icon2, { as: mappingIcon.get(navigation.title), mr: 3 }),
-                          /* @__PURE__ */ jsx41(Text8, { fontSize: "text.sm", children: title }),
+                          mappingIcon.get(navigation.title),
+                          /* @__PURE__ */ jsx41(Text8, { fontSize: "text.sm", ml: 3, children: title }),
                           isActiveSub && /* @__PURE__ */ jsx41(
-                            Box20,
+                            Box21,
                             {
                               width: 0.5,
                               height: 8,
@@ -2849,9 +2800,9 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
             navigation.title
           ) }) })
         ] }) }, navigation.title);
-      }) }) })
+      })
     }
-  );
+  ) });
 };
 Navigation.defaultProps = {
   navigations: void 0,
@@ -2861,8 +2812,8 @@ Navigation.defaultProps = {
 var navigation_default = Navigation;
 
 // src/components/navigation/components/navigation-bar.tsx
-import { Box as Box21, Button as Button2, Flex as Flex7, Link as Link3, Popover as Popover3, PopoverContent as PopoverContent3, PopoverTrigger as PopoverTrigger3, Text as Text9 } from "@chakra-ui/react";
-import * as Icon3 from "@ctlyst.id/internal-icon";
+import { Box as Box22, Button as Button3, Flex as Flex7, Link as Link3, Popover as Popover3, PopoverContent as PopoverContent3, PopoverTrigger as PopoverTrigger3, Text as Text9 } from "@chakra-ui/react";
+import * as Icon4 from "@ctlyst.id/internal-icon";
 import { Fragment as Fragment5, jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
 var NavigationBar = ({
   navigations,
@@ -2878,80 +2829,69 @@ var NavigationBar = ({
     }
     return subMenu.navHost + subMenu.navLink;
   };
-  return /* @__PURE__ */ jsx42(
-    Box21,
+  return /* @__PURE__ */ jsx42(Box22, { hidden: isFetched && navigations === void 0, "data-test-id": "CT_component_navigation_cms", ...props, children: /* @__PURE__ */ jsx42(
+    Flex7,
     {
-      hidden: isFetched && navigations === void 0,
-      backgroundRepeat: "repeat-x",
-      "data-test-id": "CT_component_navigation_cms",
-      ...props,
-      children: /* @__PURE__ */ jsx42(
-        Flex7,
-        {
-          bg: "white",
-          w: "full",
-          rounded: "md",
-          flexWrap: "wrap",
-          alignItems: "center",
-          shadow: "raised",
-          gap: 1,
-          px: 4,
-          py: 2,
-          children: navigations == null ? void 0 : navigations.map((item) => {
-            var _a;
-            const childMenu = item.children.filter((subMenu) => asPath == null ? void 0 : asPath.includes(subMenu.navLink));
-            const isActive = pathname == null ? void 0 : pathname.startsWith((_a = childMenu[0]) == null ? void 0 : _a.navLink);
-            const activeBg = isActive ? "primary.500" : void 0;
-            return /* @__PURE__ */ jsx42(Popover3, { isLazy: true, trigger: "hover", placement: "bottom-start", openDelay: 100, closeDelay: 100, children: ({ isOpen, onClose }) => /* @__PURE__ */ jsxs18(Fragment5, { children: [
-              /* @__PURE__ */ jsx42(PopoverTrigger3, { children: /* @__PURE__ */ jsx42(
-                Button2,
-                {
-                  h: 7.5,
-                  p: 2,
-                  size: "sm",
-                  variant: "ghost",
-                  "data-test-id": `CT_component_navigation_button-${item.title}${isActive ? "-active" : ""}`,
-                  _hover: {
-                    backgroundColor: !isActive ? "neutral.400" : activeBg
-                  },
-                  backgroundColor: isOpen && !isActive ? "neutral.400" : activeBg,
-                  color: isActive ? "primary.50" : "black.high",
-                  leftIcon: mappingIcon2.get(item.title),
-                  rightIcon: /* @__PURE__ */ jsx42(Icon3.ChevronDown, { size: 4, color: "inherit" }),
-                  children: item.title
-                }
-              ) }),
-              item.children && /* @__PURE__ */ jsx42(PopoverContent3, { border: "none", shadow: "raised", py: 1, width: 240, children: item.children.map((subMenu) => /* @__PURE__ */ jsxs18(
-                Link3,
-                {
-                  href: urlMenu(subMenu),
-                  display: "flex",
-                  alignItems: "center",
-                  transition: "padding 0.35s ease 0s",
-                  _hover: {
-                    pl: 6
-                  },
-                  _first: { borderTopRadius: "md" },
-                  _last: { borderBottomRadius: "md" },
-                  py: 3,
-                  px: 4,
-                  color: (pathname == null ? void 0 : pathname.startsWith(subMenu.navLink)) ? "primary.800" : "black.high",
-                  onClick: onClose,
-                  background: (pathname == null ? void 0 : pathname.startsWith(subMenu.navLink)) ? "primary.50" : "transparent",
-                  "data-test-id": `CT_component_navigation_link-${item.id}`,
-                  children: [
-                    mappingIcon2.get(item.title),
-                    /* @__PURE__ */ jsx42(Text9, { textStyle: "text-sm", ml: 3, children: subMenu.title })
-                  ]
-                },
-                subMenu.id
-              )) })
-            ] }) }, item.id);
-          })
-        }
-      )
+      bg: "white",
+      w: "full",
+      rounded: "md",
+      flexWrap: "wrap",
+      alignItems: "center",
+      shadow: "raised",
+      gap: 1,
+      px: 4,
+      py: 2,
+      children: navigations == null ? void 0 : navigations.map((item) => {
+        var _a;
+        const childMenu = item.children.filter((subMenu) => asPath == null ? void 0 : asPath.includes(subMenu.navLink));
+        const isActive = pathname == null ? void 0 : pathname.startsWith((_a = childMenu[0]) == null ? void 0 : _a.navLink);
+        const activeBg = isActive ? "primary.500" : void 0;
+        return /* @__PURE__ */ jsx42(Popover3, { isLazy: true, trigger: "hover", placement: "bottom-start", openDelay: 100, closeDelay: 100, children: ({ isOpen, onClose }) => /* @__PURE__ */ jsxs18(Fragment5, { children: [
+          /* @__PURE__ */ jsx42(PopoverTrigger3, { children: /* @__PURE__ */ jsx42(
+            Button3,
+            {
+              h: 7.5,
+              p: 2,
+              size: "sm",
+              variant: "ghost",
+              "data-test-id": `CT_component_navigation_button-${item.title}${isActive ? "-active" : ""}`,
+              _hover: {
+                backgroundColor: !isActive ? "neutral.400" : activeBg
+              },
+              backgroundColor: isOpen && !isActive ? "neutral.400" : activeBg,
+              color: isActive ? "primary.50" : "black.high",
+              leftIcon: mappingIcon2.get(item.title),
+              rightIcon: /* @__PURE__ */ jsx42(Icon4.ChevronDown, { size: 4, color: "inherit" }),
+              children: item.title
+            }
+          ) }),
+          item.children && /* @__PURE__ */ jsx42(PopoverContent3, { bg: "white", boxShadow: "raised", borderRadius: "md", py: 1, width: 240, children: item.children.map((subMenu) => /* @__PURE__ */ jsxs18(
+            Link3,
+            {
+              href: urlMenu(subMenu),
+              display: "flex",
+              alignItems: "center",
+              transition: "padding 0.35s ease 0s",
+              _hover: {
+                pl: 6
+              },
+              py: 3,
+              px: 4,
+              color: (pathname == null ? void 0 : pathname.startsWith(subMenu.navLink)) ? "primary.800" : "black.high",
+              onClick: onClose,
+              background: (pathname == null ? void 0 : pathname.startsWith(subMenu.navLink)) ? "primary.50" : "transparent",
+              "data-test-id": `CT_component_navigation_link-${item.id}`,
+              children: [
+                mappingIcon2.get(item.title),
+                /* @__PURE__ */ jsx42(Text9, { textStyle: "text-sm", ml: 3, children: subMenu.title })
+              ]
+            },
+            subMenu.id
+          )) })
+        ] }) }, item.id);
+      })
     }
-  );
+  ) });
 };
 NavigationBar.defaultProps = {
   navigations: void 0
@@ -2960,10 +2900,10 @@ var navigation_bar_default = NavigationBar;
 
 // src/components/pagination/components/pagination.tsx
 import { ArrowLeftIcon, ArrowRightIcon, ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon } from "@chakra-ui/icons";
-import { Box as Box22, Text as Text10, useColorModeValue as useColorModeValue10 } from "@chakra-ui/react";
+import { Box as Box23, Text as Text10, useColorModeValue as useColorModeValue10 } from "@chakra-ui/react";
 
 // src/components/pagination/components/pagination-button.tsx
-import { Button as Button3, forwardRef as forwardRef12, useColorModeValue as useColorModeValue9 } from "@chakra-ui/react";
+import { Button as Button4, forwardRef as forwardRef12, useColorModeValue as useColorModeValue9 } from "@chakra-ui/react";
 import { jsx as jsx43 } from "react/jsx-runtime";
 var PaginationButton = forwardRef12(({ className, style, isActive, children, ...rest }, ref) => {
   const btnBg = useColorModeValue9("neutral.300", "mirage.900");
@@ -2971,7 +2911,7 @@ var PaginationButton = forwardRef12(({ className, style, isActive, children, ...
   const btnNotActiveBg = useColorModeValue9("secondary.50", "primary.500");
   const btnNotActiveColor = useColorModeValue9("primary.500", "white");
   return /* @__PURE__ */ jsx43(
-    Button3,
+    Button4,
     {
       "data-test-id": "Pagination-Button",
       ref,
@@ -3060,8 +3000,8 @@ var Pagination = ({ className, current, total, onSelect }) => {
     }
     return pageButtons;
   };
-  return /* @__PURE__ */ jsxs20(Box22, { className, display: "inline-flex", alignItems: "center", children: [
-    /* @__PURE__ */ jsx45(Box22, { mr: 1, children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsxs20(Box23, { className, display: "inline-flex", alignItems: "center", children: [
+    /* @__PURE__ */ jsx45(Box23, { mr: 1, children: /* @__PURE__ */ jsx45(
       pagination_button_trigger_default,
       {
         "data-test-id": "Pagination-Button",
@@ -3072,7 +3012,7 @@ var Pagination = ({ className, current, total, onSelect }) => {
         icon: /* @__PURE__ */ jsx45(ArrowLeftIcon, { width: 2 })
       }
     ) }),
-    /* @__PURE__ */ jsxs20(Box22, { bg: "neutral.300", borderRadius: "full", children: [
+    /* @__PURE__ */ jsxs20(Box23, { bg: "neutral.300", borderRadius: "full", children: [
       /* @__PURE__ */ jsx45(
         pagination_button_trigger_default,
         {
@@ -3108,7 +3048,7 @@ var Pagination = ({ className, current, total, onSelect }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx45(Box22, { ml: 1, children: /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx45(Box23, { ml: 1, children: /* @__PURE__ */ jsx45(
       pagination_button_trigger_default,
       {
         "data-test-id": "Pagination-Button",
@@ -3145,7 +3085,7 @@ var PaginationDetail = ({
 var pagination_detail_default = PaginationDetail;
 
 // src/components/pagination/components/pagination-filter.tsx
-import { Box as Box23, Select, Text as Text12, useColorModeValue as useColorModeValue11 } from "@chakra-ui/react";
+import { Box as Box24, Select, Text as Text12, useColorModeValue as useColorModeValue11 } from "@chakra-ui/react";
 import * as React13 from "react";
 import { FiChevronDown } from "react-icons/fi";
 import { jsx as jsx47, jsxs as jsxs21 } from "react/jsx-runtime";
@@ -3157,7 +3097,7 @@ var PaginationFilter = ({
   ...rest
 }) => {
   const [value, setValue] = React13.useState(limit);
-  return /* @__PURE__ */ jsxs21(Box23, { display: "flex", flexDirection: "row", alignItems: "center", children: [
+  return /* @__PURE__ */ jsxs21(Box24, { display: "flex", flexDirection: "row", alignItems: "center", children: [
     /* @__PURE__ */ jsx47(Text12, { fontSize: "text.sm", lineHeight: 18, color: useColorModeValue11("neutral.900", "white"), ...rest, children: label }),
     /* @__PURE__ */ jsx47(
       Select,
@@ -3211,7 +3151,7 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/radio/components/radio.tsx
-import { Box as Box24, Radio as ChakraRadio, Text as Text13 } from "@chakra-ui/react";
+import { Box as Box25, Radio as ChakraRadio, Text as Text13 } from "@chakra-ui/react";
 import { jsx as jsx48, jsxs as jsxs22 } from "react/jsx-runtime";
 var Radio = ({
   isError = false,
@@ -3222,9 +3162,9 @@ var Radio = ({
   ...rest
 }) => {
   const variant = isError ? "errors" : "unstyled";
-  return /* @__PURE__ */ jsxs22(Box24, { children: [
-    /* @__PURE__ */ jsx48(Box24, { display: "flex", children: /* @__PURE__ */ jsx48(ChakraRadio, { variant, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
-    /* @__PURE__ */ jsx48(Box24, { mt: "5px", ml: "24px", children: isError ? /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
+  return /* @__PURE__ */ jsxs22(Box25, { children: [
+    /* @__PURE__ */ jsx48(Box25, { display: "flex", children: /* @__PURE__ */ jsx48(ChakraRadio, { variant, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
+    /* @__PURE__ */ jsx48(Box25, { mt: "5px", ml: "24px", children: isError ? /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
   ] });
 };
 Radio.displayName = "Radio";
@@ -3235,7 +3175,7 @@ Radio.defaultProps = {
 };
 
 // src/components/radio/components/radio-group.tsx
-import { Box as Box25, RadioGroup as ChakraRadioGroup, Stack as Stack3 } from "@chakra-ui/react";
+import { Box as Box26, RadioGroup as ChakraRadioGroup, Stack as Stack3 } from "@chakra-ui/react";
 import { jsx as jsx49 } from "react/jsx-runtime";
 var RadioGroup = ({
   children,
@@ -3245,7 +3185,7 @@ var RadioGroup = ({
   errorMessage,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx49(field_default, { ...props, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ jsx49(Box25, { mt: "12px", children: /* @__PURE__ */ jsx49(ChakraRadioGroup, { ...props, children: /* @__PURE__ */ jsx49(Stack3, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
+  return /* @__PURE__ */ jsx49(field_default, { ...props, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ jsx49(Box26, { mt: "12px", children: /* @__PURE__ */ jsx49(ChakraRadioGroup, { ...props, children: /* @__PURE__ */ jsx49(Stack3, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
 };
 RadioGroup.displayName = "RadioGroup";
 RadioGroup.defaultProps = {
@@ -3786,7 +3726,7 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/tabs/components/tab.tsx
-import { Button as Button4, Flex as Flex9, forwardRef as forwardRef14, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
+import { Button as Button5, Flex as Flex9, forwardRef as forwardRef14, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
 import { jsx as jsx56, jsxs as jsxs24 } from "react/jsx-runtime";
 var Tab = forwardRef14((props, ref) => {
   var _a, _b;
@@ -3794,7 +3734,7 @@ var Tab = forwardRef14((props, ref) => {
   const isSelected = !!tabProps["aria-selected"];
   const styles = useMultiStyleConfig3("Tabs", tabProps);
   return /* @__PURE__ */ jsx56(
-    Button4,
+    Button5,
     {
       "data-test-id": props["data-test-id"],
       p: 4,
@@ -4088,7 +4028,34 @@ var baseStyle = definePartsStyle({
   panel: baseStylePanel,
   icon: baseStyleIcon
 });
-var accordionTheme = defineMultiStyleConfig({ baseStyle });
+var collapseStyleButton = defineStyle2({
+  height: 13,
+  borderRadius: "sm",
+  borderWidth: "1px",
+  borderStyle: "solid",
+  borderColor: "neutral.300"
+});
+var collapseStylePanel = defineStyle2({
+  py: 0,
+  pr: 0,
+  pl: 12,
+  borderBottomRadius: "sm",
+  overflow: "hidden",
+  backgroundColor: "neutral.200"
+});
+var collapse = definePartsStyle({
+  button: collapseStyleButton,
+  panel: collapseStylePanel
+});
+var accordionTheme = defineMultiStyleConfig({
+  baseStyle,
+  variants: {
+    collapse
+  },
+  defaultProps: {
+    variant: void 0
+  }
+});
 var accordion_default = accordionTheme;
 
 // src/config/theme/components/alert.ts
@@ -4258,7 +4225,7 @@ var badge_default2 = Badge2;
 
 // src/config/theme/components/button.ts
 import { defineStyleConfig } from "@chakra-ui/styled-system";
-var Button5 = defineStyleConfig({
+var Button6 = defineStyleConfig({
   // The styles all button have in common
   baseStyle: {
     fontSize: "body.1",
@@ -4513,7 +4480,7 @@ var Button5 = defineStyleConfig({
     colorScheme: "primary"
   }
 });
-var button_default2 = Button5;
+var button_default2 = Button6;
 
 // src/config/theme/components/card.ts
 import { defineStyleConfig as defineStyleConfig2 } from "@chakra-ui/styled-system";