@liner-fe/prism 2.8.4 → 2.8.6

package/lib/index.d.ts

@@ -70,7 +70,9 @@ interface IToastBase extends ToastProps, RefAttributes<HTMLLIElement> {
     isLoading?: boolean;
 }
 interface IToastIcon {
-    icon: Omit<IconProps, 'size'>;
+    icon: {
+        icon: IconComponentType;
+    } & Pick<IconProps, 'fill' | 'thick' | 'type' | 'fillType'>;
     button?: never;
 }
 interface IToastButton {
@@ -219,7 +221,9 @@ interface PopoverTriggerProps {
 interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
     level?: 'primary' | 'secondary';
     tag?: string;
-    icon?: Pick<IconProps, 'name' | 'thick' | 'fill'>;
+    icon?: {
+        icon: IconComponentType;
+    } & Pick<IconProps, 'name' | 'thick' | 'fill'>;
     title?: string;
     description?: string;
     position?: 'top' | 'right' | 'bottom' | 'left';
@@ -391,7 +395,9 @@ interface SelectItemProps {
     value: string;
     text?: string;
     disabled?: boolean;
-    icon?: IconProps;
+    icon?: {
+        icon: IconComponentType;
+    } & Pick<IconProps, 'fill' | 'thick' | 'type' | 'fillType' | 'size'>;
     onClick?: () => void;
 }
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<never>> & {
@@ -407,7 +413,9 @@ interface ItemProps {
     value: string;
     text: string;
     disabled?: boolean;
-    icon?: IconProps;
+    icon?: {
+        icon: IconComponentType;
+    } & Pick<IconProps, 'fill' | 'thick' | 'type' | 'fillType' | 'size'>;
     onClick?: () => void;
 }
 declare const List: (({ children, className, ...props }: ListRootProps) => react_jsx_runtime.JSX.Element) & {
@@ -425,7 +433,9 @@ interface ButtonType {
 }
 interface ISnackbarBasic {
     kind?: 'basic';
-    icon?: Pick<IconProps, 'name' | 'fill' | 'thick'>;
+    icon?: {
+        icon: IconComponentType;
+    } & Pick<IconProps, 'fill' | 'thick' | 'type' | 'fillType'>;
     button?: {
         text?: ButtonType;
         basic?: ButtonType;
@@ -595,7 +605,9 @@ interface BaseCoachMarkContentProps extends Omit<PrimitiveCoachMarkContentProps,
     onClose?: () => void;
 }
 type BaseCoachMarkContent = {
-    icon?: Pick<IconProps, 'name' | 'thick' | 'fill'>;
+    icon?: {
+        icon: IconComponentType;
+    } & Pick<IconProps, 'fill' | 'thick' | 'type' | 'fillType'>;
     description?: string;
     step?: Step;
     primaryButton?: RestrictedButtonProps;

package/lib/index.js

@@ -1893,7 +1893,6 @@ var Paragraph = (0, import_react4.forwardRef)(
 );
 
 // src/components/Toast/index.tsx
-var import_icon = require("@liner-fe/icon");
 var import_recoil2 = require("recoil");
 var import_lottie_web = __toESM(require("lottie-web"));
 
@@ -2420,7 +2419,8 @@ var SingleToast = /* @__PURE__ */ __name((props) => {
   }, [isLoading]);
   const renderIcon = /* @__PURE__ */ __name(() => {
     if (!icon) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("i", { className: style_module_default3.Icon, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icon.Icon, { ...icon, size: "m" }) });
+    const { icon: IconCmp, ...rest } = icon;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("i", { className: style_module_default3.Icon, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconCmp, { ...rest, size: "m" }) });
   }, "renderIcon");
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Root2, { className: style_module_default3.ToastRoot, open: isOpen, ...props, children: [
     isLoading && !toastSuccess.current ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: lottieRef, style: { width: "24px", height: "24px" } }) : renderIcon(),
@@ -2696,7 +2696,7 @@ var style_module_default5 = {
 // src/components/Popover/index.tsx
 var import_cva4 = require("cva");
 var import_clsx8 = require("clsx");
-var import_icon2 = require("@liner-fe/icon");
+var import_icon = require("@liner-fe/icon");
 
 // src/components/TextButton/index.tsx
 var import_cva3 = require("cva");
@@ -2889,7 +2889,7 @@ var PopoverContent = React17.forwardRef(
           /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: style_module_default5.contentContainer, children: [
             (tag || icon || onClose) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: style_module_default5.heading, children: [
               tag && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: popoverTagVariants(), children: tag }),
-              icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icon2.Icon, { name: icon.name, size: "xs", thick: icon.thick, fill: icon.fill }),
+              icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(icon.icon, { size: "xs", thick: icon.thick, fill: icon.fill }),
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: popoverTitleVariants(), children: title }),
               onClose && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 import_radix_ui.Popover.PopoverClose,
@@ -2898,16 +2898,7 @@ var PopoverContent = React17.forwardRef(
                   onClick: () => {
                     onClose();
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_icon2.Icon,
-                    {
-                      name: "close-fill",
-                      size: "s",
-                      fill: true,
-                      thick: true,
-                      type: "neutral-label-static-primary"
-                    }
-                  )
+                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icon.IconCloseFill, { size: "s", fill: true, thick: true, type: "neutral-label-static-primary" })
                 }
               )
             ] }),
@@ -3212,7 +3203,7 @@ var Label = (0, import_react15.forwardRef)(
 Label.displayName = "Label";
 
 // src/components/CheckBox/index.tsx
-var import_icon3 = require("@liner-fe/icon");
+var import_icon2 = require("@liner-fe/icon");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var Checkbox = (0, import_react16.forwardRef)(
   ({ className, label, description, ...props }, ref) => {
@@ -3223,7 +3214,7 @@ var Checkbox = (0, import_react16.forwardRef)(
       ] }),
       children
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children }), "CheckboxWrapper");
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CheckboxWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_radix_ui5.Checkbox.Root, { className: (0, import_clsx12.default)(style_module_default9.checkbox, className), ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_radix_ui5.Checkbox.Indicator, { className: style_module_default9["checkbox-indicator"], children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icon3.IconCheckMark, { thick: true, size: "xs", type: "inverse-label-primary" }) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CheckboxWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_radix_ui5.Checkbox.Root, { className: (0, import_clsx12.default)(style_module_default9.checkbox, className), ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_radix_ui5.Checkbox.Indicator, { className: style_module_default9["checkbox-indicator"], children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icon2.IconCheckMark, { thick: true, size: "xs", type: "inverse-label-primary" }) }) }) });
   }
 );
 
@@ -3299,7 +3290,7 @@ var style_module_default12 = {
 // src/components/Textfield/index.tsx
 var import_cva8 = require("cva");
 var import_clsx14 = __toESM(require("clsx"));
-var import_icon4 = require("@liner-fe/icon");
+var import_icon3 = require("@liner-fe/icon");
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var defaultTextfieldVariants = (0, import_cva8.cva)({
@@ -3416,7 +3407,7 @@ var Textfield = (0, import_react18.forwardRef)((props, ref) => {
                 level: "secondary",
                 fill: false,
                 icon: {
-                  icon: import_icon4.IconCloseFill,
+                  icon: import_icon3.IconCloseFill,
                   size: "s",
                   thick: true
                 },
@@ -3434,7 +3425,7 @@ var Textfield = (0, import_react18.forwardRef)((props, ref) => {
                 level: "secondary",
                 fill: false,
                 icon: {
-                  icon: deidentifiy ? import_icon4.IconVisibilityOff : import_icon4.IconVisibility,
+                  icon: deidentifiy ? import_icon3.IconVisibilityOff : import_icon3.IconVisibility,
                   size: "s",
                   fill: true
                 },
@@ -3451,16 +3442,7 @@ var Textfield = (0, import_react18.forwardRef)((props, ref) => {
     ),
     displayFooter && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: style_module_default12.footer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: style_module_default12["error-wrapper"], children: error && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          import_icon4.Icon,
-          {
-            name: "exclamationmark-fill",
-            fill: true,
-            thick: true,
-            size: "xs",
-            type: "function-label-negative"
-          }
-        ),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icon3.IconExclamationmarkFill, { fill: true, thick: true, size: "xs", type: "function-label-negative" }),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           Caption,
           {
@@ -3514,7 +3496,7 @@ var style_module_default13 = {
 };
 
 // src/components/Select/index.tsx
-var import_icon5 = require("@liner-fe/icon");
+var import_icon4 = require("@liner-fe/icon");
 var import_react19 = require("react");
 var import_clsx15 = __toESM(require("clsx"));
 var import_jsx_runtime27 = require("react/jsx-runtime");
@@ -3622,7 +3604,7 @@ var SelectRoot = (0, import_react19.forwardRef)(
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_radix_ui7.Select.Trigger, { className: style_module_default13.trigger, ref, id, children: [
               /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_radix_ui7.Select.Value, { className: style_module_default13.placeholder, placeholder }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_radix_ui7.Select.Icon, { className: style_module_default13.openIcon, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icon5.Icon, { name: "drop-down", fill: true, thick: true, size: "xs" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_radix_ui7.Select.Icon, { className: style_module_default13.openIcon, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icon4.IconDropDown, { fill: true, thick: true, size: "xs" }) })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectContent, { ...contentProps })
           ]
@@ -3643,8 +3625,8 @@ var SelectItem = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick
     },
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_radix_ui7.Select.ItemText, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Paragraph, { size: 3, type: "normal", weight: "medium", children: text ?? value }) }),
-      icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_radix_ui7.Select.Icon, { className: style_module_default13.icon, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icon5.Icon, { size: "xs", ...icon }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_radix_ui7.Select.ItemIndicator, { className: style_module_default13.itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icon5.Icon, { thick: true, size: "xs", name: "check-mark", type: "brand-label-primary" }) })
+      icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_radix_ui7.Select.Icon, { className: style_module_default13.icon, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(icon.icon, { size: "xs", ...icon }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_radix_ui7.Select.ItemIndicator, { className: style_module_default13.itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icon4.IconCheckMark, { thick: true, size: "xs", type: "brand-label-primary" }) })
     ]
   }
 ), "SelectItem");
@@ -3660,7 +3642,7 @@ var style_module_default14 = {
 };
 
 // src/components/List/index.tsx
-var import_icon6 = require("@liner-fe/icon");
+var import_icon5 = require("@liner-fe/icon");
 var import_react21 = require("react");
 
 // src/hooks/collection.tsx
@@ -3689,7 +3671,15 @@ var Item = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) =>
   const [isFocused, setIsFocused] = (0, import_react21.useState)(false);
   const { value: contextValue, onChangeValue } = useCollectionContext();
   const isSelected = contextValue === value;
-  const iconProps = isSelected ? { name: "check-mark", type: "brand-label-primary", thick: true } : icon ? icon : {};
+  const renderIcon = /* @__PURE__ */ __name(() => {
+    if (isSelected) {
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icon5.IconCheckMark, { type: "brand-label-primary", thick: true });
+    }
+    if (icon) {
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(icon.icon, { className: style_module_default14.icon, size: "xs", ...icon });
+    }
+    return null;
+  }, "renderIcon");
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "li",
     {
@@ -3709,7 +3699,7 @@ var Item = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) =>
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Paragraph, { size: 3, type: "normal", weight: "medium", children: text }),
-        (icon || isSelected) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icon6.Icon, { className: style_module_default14.icon, size: "xs", ...iconProps })
+        renderIcon()
       ]
     }
   );
@@ -3760,9 +3750,6 @@ var useSnackbar = /* @__PURE__ */ __name(() => {
   };
 }, "useSnackbar");
 
-// src/components/Snackbar/SnackbarIcon/index.tsx
-var import_icon7 = require("@liner-fe/icon");
-
 // src/components/Snackbar/SnackbarIcon/style.module.scss
 var style_module_default16 = {
   "container": "_container_1witc_1"
@@ -3773,11 +3760,11 @@ var import_jsx_runtime30 = require("react/jsx-runtime");
 var SnackbarIcon = /* @__PURE__ */ __name((props) => {
   const { icon } = props;
   if (!icon) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icon7.Icon, { ...icon, size: "m", className: style_module_default16.container });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(icon.icon, { ...icon, size: "m", className: style_module_default16.container });
 }, "SnackbarIcon");
 
 // src/components/Snackbar/index.tsx
-var import_icon8 = require("@liner-fe/icon");
+var import_icon6 = require("@liner-fe/icon");
 
 // src/components/Snackbar/SnackbarTitle/index.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
@@ -3909,7 +3896,7 @@ var SingleSnackbar = /* @__PURE__ */ __name((props) => {
             /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SnackbarDescription, { description })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-            import_icon8.IconArrowForward,
+            import_icon6.IconArrowForward,
             {
               fill: true,
               thick: true,
@@ -8302,7 +8289,7 @@ var style_module_default21 = {
 
 // src/components/coach-mark/main/index.tsx
 var import_react28 = require("react");
-var import_icon9 = require("@liner-fe/icon");
+var import_icon7 = require("@liner-fe/icon");
 var import_cva12 = require("cva");
 var import_clsx22 = __toESM(require("clsx"));
 
@@ -8456,7 +8443,7 @@ var CoachMarkContent = (0, import_react28.forwardRef)(
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           IconButton,
           {
-            icon: { icon: import_icon9.IconClose },
+            icon: { icon: import_icon7.IconClose },
             size: "xs",
             level: level === "inverse" ? "inverse" : "inverse-static",
             fill: false,
@@ -8477,9 +8464,8 @@ var CoachMarkContent = (0, import_react28.forwardRef)(
                 }
               ),
               icon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                import_icon9.Icon,
+                icon.icon,
                 {
-                  name: icon.name,
                   size: "xs",
                   thick: icon.thick,
                   fill: icon.fill,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/prism",
-  "version": "2.8.4",
+  "version": "2.8.6",
   "scripts": {
     "dev": "next dev",
     "start": "next start",