@ctlyst.id/voila-ui 3.0.0 → 4.0.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { HTMLAttributes, FC, ElementType, ButtonHTMLAttributes, ComponentPropsWithoutRef, ReactNode, MouseEventHandler, InputHTMLAttributes, TextareaHTMLAttributes, ReactElement, ImgHTMLAttributes, AnchorHTMLAttributes, LiHTMLAttributes, PropsWithChildren, CSSProperties, SVGProps, RefObject } from 'react';
+import { HTMLAttributes, FC, ElementType, ButtonHTMLAttributes, ComponentPropsWithoutRef, ReactNode, MouseEventHandler, InputHTMLAttributes, TextareaHTMLAttributes, ImgHTMLAttributes, ReactElement, AnchorHTMLAttributes, LiHTMLAttributes, PropsWithChildren, CSSProperties, SVGProps, RefObject } from 'react';
 import { AccordionSingleProps, AccordionMultipleProps, AccordionContentProps, AccordionItemProps, AccordionTriggerProps } from '@radix-ui/react-accordion';
 import { AspectRatioProps as AspectRatioProps$1 } from '@radix-ui/react-aspect-ratio';
 import * as Select$1 from '@radix-ui/react-select';
@@ -11,7 +11,7 @@ import { RecipeVariants } from '@vanilla-extract/recipes';
 import { PortalProps } from '@radix-ui/react-portal';
 import { ClassValue } from 'clsx';
 import { RiveProps } from '@rive-app/react-canvas/dist/types/components/Rive';
-import { DialogContentProps, DialogProps as DialogProps$1 } from '@radix-ui/react-dialog';
+import { DialogProps as DialogProps$1, DialogContentProps } from '@radix-ui/react-dialog';
 import { RadioGroupItemProps, RadioGroupProps } from '@radix-ui/react-radio-group';
 import { SwitchProps as SwitchProps$1 } from '@radix-ui/react-switch';
 import * as ToastPrimitives from '@radix-ui/react-toast';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { HTMLAttributes, FC, ElementType, ButtonHTMLAttributes, ComponentPropsWithoutRef, ReactNode, MouseEventHandler, InputHTMLAttributes, TextareaHTMLAttributes, ReactElement, ImgHTMLAttributes, AnchorHTMLAttributes, LiHTMLAttributes, PropsWithChildren, CSSProperties, SVGProps, RefObject } from 'react';
+import { HTMLAttributes, FC, ElementType, ButtonHTMLAttributes, ComponentPropsWithoutRef, ReactNode, MouseEventHandler, InputHTMLAttributes, TextareaHTMLAttributes, ImgHTMLAttributes, ReactElement, AnchorHTMLAttributes, LiHTMLAttributes, PropsWithChildren, CSSProperties, SVGProps, RefObject } from 'react';
 import { AccordionSingleProps, AccordionMultipleProps, AccordionContentProps, AccordionItemProps, AccordionTriggerProps } from '@radix-ui/react-accordion';
 import { AspectRatioProps as AspectRatioProps$1 } from '@radix-ui/react-aspect-ratio';
 import * as Select$1 from '@radix-ui/react-select';
@@ -11,7 +11,7 @@ import { RecipeVariants } from '@vanilla-extract/recipes';
 import { PortalProps } from '@radix-ui/react-portal';
 import { ClassValue } from 'clsx';
 import { RiveProps } from '@rive-app/react-canvas/dist/types/components/Rive';
-import { DialogContentProps, DialogProps as DialogProps$1 } from '@radix-ui/react-dialog';
+import { DialogProps as DialogProps$1, DialogContentProps } from '@radix-ui/react-dialog';
 import { RadioGroupItemProps, RadioGroupProps } from '@radix-ui/react-radio-group';
 import { SwitchProps as SwitchProps$1 } from '@radix-ui/react-switch';
 import * as ToastPrimitives from '@radix-ui/react-toast';

package/dist/index.js

@@ -873,12 +873,12 @@ var import_react_spring3 = require("react-spring");
 var import_react_use_gesture = require("react-use-gesture");
 
 // src/components/bottom-sheet/bottom-sheet.header.tsx
-var import_icons5 = require("@ctlyst.id/icons");
+var import_icons4 = require("@ctlyst.id/icons");
 var import_voila_ui_core8 = require("@ctlyst.id/voila-ui-core");
 var import_react18 = require("react");
 
 // src/components/close-button/close-button.tsx
-var import_icons4 = require("@ctlyst.id/icons");
+var import_v2 = require("@ctlyst.id/icons/src/icons/v2");
 var import_voila_ui_core7 = require("@ctlyst.id/voila-ui-core");
 var import_clsx16 = __toESM(require("clsx"));
 var import_react17 = require("react");
@@ -904,7 +904,7 @@ var CloseButton = (0, import_react17.forwardRef)(
         disabled: isDisabled,
         style,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(box_default, { display: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons4.IconCloseRounded, { size: iconSize, color: isDisabled ? import_voila_ui_core7.theme.colors.grey1 : import_voila_ui_core7.theme.colors.black }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(box_default, { display: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_v2.Close, { size: iconSize, color: isDisabled ? import_voila_ui_core7.theme.colors.grey1 : import_voila_ui_core7.theme.colors.black }) })
       }
     );
   }
@@ -937,7 +937,7 @@ var BottomSheetHeader = (0, import_react18.forwardRef)(
         header || /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(flex_default, { alignItems: "center", justifyContent: "space-between", pt: hasHandleBar ? "$16" : "$8", pb: "$8", gap: "$16", children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(flex_default, { alignItems: "center", gap: "$16", children: [
             showBack && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              import_icons5.IconChevronLeft,
+              import_icons4.IconChevronLeft,
               {
                 cursor: "pointer",
                 onClick: onBack,
@@ -2593,7 +2593,7 @@ Button.defaultProps = {
 var button_default = Button;
 
 // src/components/checkbox/checkbox.tsx
-var import_icons6 = require("@ctlyst.id/icons");
+var import_v22 = require("@ctlyst.id/icons/src/icons/v2");
 var import_react_checkbox = require("@radix-ui/react-checkbox");
 var import_react33 = require("react");
 
@@ -2645,8 +2645,8 @@ var Checkbox = (0, import_react33.forwardRef)(
           },
           ...props,
           children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_checkbox.Indicator, { className: checkboxIndicator, children: [
-            checked === "indeterminate" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons6.IconMinusRounded, { color: "white", className: checkboxIcon }),
-            checked === true && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons6.IconCheckRounded, { color: "white", className: checkboxIcon })
+            checked === "indeterminate" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_v22.Minus, { color: "white", className: checkboxIcon }),
+            checked === true && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_v22.Check, { color: "white", className: checkboxIcon })
           ] })
         }
       ),
@@ -3056,7 +3056,7 @@ Divider.displayName = "Divider";
 var divider_default = Divider;
 
 // src/components/form/input.tsx
-var import_icons7 = require("@ctlyst.id/icons");
+var import_v23 = require("@ctlyst.id/icons/src/icons/v2");
 var import_voila_ui_core11 = require("@ctlyst.id/voila-ui-core");
 var import_clsx23 = __toESM(require("clsx"));
 var import_react46 = require("react");
@@ -3224,7 +3224,7 @@ var Input = (0, import_react46.forwardRef)(
                   className: (0, import_clsx23.default)(isClearable && !isLoading && !hasIcon && clearStyle),
                   children: [
                     hasIcon && !isLoading && icon,
-                    isClearable && !isLoading && !hasIcon && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_icons7.IconCloseRounded, { size: 24, "data-test-id": `clear-input-${props["data-test-id"]}`, onClick: onClear }),
+                    isClearable && !isLoading && !hasIcon && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_v23.Close, { size: 24, "data-test-id": `clear-input-${props["data-test-id"]}`, onClick: onClear }),
                     isLoading && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(spinner_default, { color: import_voila_ui_core11.theme.colors.green1 })
                   ]
                 }
@@ -4538,7 +4538,7 @@ SelectList.defaultProps = {
 var select_list_default = SelectList;
 
 // src/components/select/select-list-item.tsx
-var import_icons8 = require("@ctlyst.id/icons");
+var import_icons5 = require("@ctlyst.id/icons");
 var import_voila_ui_core12 = require("@ctlyst.id/voila-ui-core");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var SelectListItem = ({ renderer, item, itemIndex }) => {
@@ -4582,7 +4582,7 @@ var SelectListItem = ({ renderer, item, itemIndex }) => {
       ...listItemProps,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: item.label }),
-        isMulti && multipleSelectedItems.includes(item) && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_icons8.IconCheck, { size: 16, color: import_voila_ui_core12.theme.colors.greenAccent1, "data-test-id": "" })
+        isMulti && multipleSelectedItems.includes(item) && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_icons5.IconCheck, { size: 16, color: import_voila_ui_core12.theme.colors.greenAccent1, "data-test-id": "" })
       ]
     },
     item.value
@@ -4594,7 +4594,7 @@ SelectListItem.defaultProps = {
 var select_list_item_default = SelectListItem;
 
 // src/components/select/select-toggle.tsx
-var import_icons9 = require("@ctlyst.id/icons");
+var import_v24 = require("@ctlyst.id/icons/src/icons/v2");
 var import_voila_ui_core13 = require("@ctlyst.id/voila-ui-core");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 var SelectToggle = ({ renderer, ...rest }) => {
@@ -4607,7 +4607,7 @@ var SelectToggle = ({ renderer, ...rest }) => {
     });
   }
   const iconColor = import_voila_ui_core13.theme.colors.grey1;
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: toggleStyle, "data-test-id": rest["data-test-id"], "data-disabled": disabled, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_icons9.IconChevronUpRounded, { color: iconColor, size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_icons9.IconChevronDownRounded, { color: iconColor, size: 24 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: toggleStyle, "data-test-id": rest["data-test-id"], "data-disabled": disabled, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_v24.ChevronUp, { color: iconColor, size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_v24.ChevronDown, { color: iconColor, size: 24 }) });
 };
 SelectToggle.defaultProps = {
   renderer: void 0,
@@ -5183,7 +5183,8 @@ var RadioGroupDefault = ({ className, children, ...props }) => {
 var radio_group_default = RadioGroupDefault;
 
 // src/components/search/search.tsx
-var import_icons10 = require("@ctlyst.id/icons");
+var import_icons6 = require("@ctlyst.id/icons");
+var import_v25 = require("@ctlyst.id/icons/src/icons/v2");
 var import_clsx37 = __toESM(require("clsx"));
 var import_react63 = require("react");
 
@@ -5226,7 +5227,7 @@ var Search = (0, import_react63.forwardRef)(
     };
     const isHasIcon = (0, import_react63.useMemo)(() => !!(withIcon && (icon || value && isFocused)), [withIcon, isFocused, value, icon]);
     return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(box_default, { className: container, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(box_default, { className: (0, import_clsx37.default)(leftIconContainer), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_icons10.IconSearch, { size: 24 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(box_default, { className: (0, import_clsx37.default)(leftIconContainer), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_icons6.IconSearch, { size: 24 }) }),
       /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         "input",
         {
@@ -5240,7 +5241,7 @@ var Search = (0, import_react63.forwardRef)(
           ...props
         }
       ),
-      isHasIcon && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(box_default, { className: (0, import_clsx37.default)(rightIconContainer), children: icon && (!isFocused || isFocused && !value) ? icon : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(box_default, { className: (0, import_clsx37.default)(closeIconContainer), onMouseDown: onClear, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_icons10.IconCloseRounded, { "data-test-id": "icon-close-search", onMouseDown: onClear, cursor: "pointer", size: 24 }) }) })
+      isHasIcon && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(box_default, { className: (0, import_clsx37.default)(rightIconContainer), children: icon && (!isFocused || isFocused && !value) ? icon : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(box_default, { className: (0, import_clsx37.default)(closeIconContainer), onMouseDown: onClear, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_v25.Close, { "data-test-id": "icon-close-search", onMouseDown: onClear, cursor: "pointer", size: 24 }) }) })
     ] });
   }
 );
@@ -5255,7 +5256,7 @@ Search.defaultProps = {
 var search_default = Search;
 
 // src/components/switch/switch.tsx
-var import_icons11 = require("@ctlyst.id/icons");
+var import_icons7 = require("@ctlyst.id/icons");
 var import_react_switch = require("@radix-ui/react-switch");
 var import_clsx38 = __toESM(require("clsx"));
 var import_react64 = require("react");
@@ -5292,7 +5293,7 @@ var Switch = (0, import_react64.forwardRef)((props, ref) => {
               variant: size
             })
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_icons11.IconCheck, { className: checkThumb, size: ICON_SIZE[size] })
+          children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_icons7.IconCheck, { className: checkThumb, size: ICON_SIZE[size] })
         }
       )
     }
@@ -5307,7 +5308,7 @@ Switch.defaultProps = {
 var import_react66 = require("react");
 
 // src/components/table/sort-button.tsx
-var import_icons12 = require("@ctlyst.id/icons");
+var import_icons8 = require("@ctlyst.id/icons");
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var SortButton = ({ accessor, sortColumn, sortable, "data-test-id": testId }) => {
   const isActiveSort = sortColumn.by === accessor;
@@ -5315,8 +5316,8 @@ var SortButton = ({ accessor, sortColumn, sortable, "data-test-id": testId }) =>
   const isAscendant = sortColumn.order === "ASC";
   if (!sortable) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(flex_default, { flexDirection: "column", "data-test-id": testId, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_icons12.IconChevronUp, { size: 10, color: isActiveSort && isDescendant ? "white" : "grey" }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_icons12.IconChevronDown, { size: 10, color: isActiveSort && isAscendant ? "white" : "grey" })
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_icons8.IconChevronUp, { size: 10, color: isActiveSort && isDescendant ? "white" : "grey" }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_icons8.IconChevronDown, { size: 10, color: isActiveSort && isAscendant ? "white" : "grey" })
   ] });
 };
 SortButton.defaultProps = {
@@ -5868,7 +5869,7 @@ Toaster.displayName = "Toaster";
 var toaster_default = Toaster;
 
 // src/components/tooltip/tooltip.tsx
-var import_icons13 = require("@ctlyst.id/icons");
+var import_icons9 = require("@ctlyst.id/icons");
 var import_voila_ui_core14 = require("@ctlyst.id/voila-ui-core");
 var RadixTooltip = __toESM(require("@radix-ui/react-tooltip"));
 var import_dynamic = require("@vanilla-extract/dynamic");
@@ -5930,7 +5931,7 @@ var Tooltip = (0, import_react72.forwardRef)(
               className: (0, import_clsx43.default)(tooltipContentStyle, commonClass, borderClass),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(flex_default, { gap: "$6", children: [
-                  withIcon && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(flex_default, { width: "$24", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_icons13.IconHelpSolid, { size: 24 }) }),
+                  withIcon && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(flex_default, { width: "$24", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_icons9.IconHelpSolid, { size: 24 }) }),
                   content
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(