@liner-fe/prism 2.7.16 → 2.8.0

package/lib/index.d.ts

@@ -3,7 +3,7 @@ import * as react from 'react';
 import react__default, { ButtonHTMLAttributes, RefAttributes, HTMLAttributes, ReactNode, ComponentPropsWithoutRef, InputHTMLAttributes, ComponentProps, LiHTMLAttributes, MouseEventHandler } from 'react';
 import * as cva from 'cva';
 import { VariantProps } from 'cva';
-import { IconProps } from '@liner-fe/icon';
+import { IconProps, IconComponentType } from '@liner-fe/icon';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ToastProps } from '@radix-ui/react-toast';
 import * as _artsy_fresnel_dist_Media from '@artsy/fresnel/dist/Media';
@@ -51,8 +51,12 @@ interface DefaultButtonProps<T extends FillType> extends CommonButtonProps, Vari
     size?: ButtonSizeType;
     align?: 'center' | 'spaceBetween';
     width?: 'full' | 'fit-content';
-    leftIcon?: ButtonIconProps;
-    rightIcon?: ButtonIconProps;
+    leftIcon?: {
+        icon: IconComponentType;
+    };
+    rightIcon?: {
+        icon: IconComponentType;
+    };
     isLoading?: boolean;
 }
 type ButtonProps = DefaultButtonProps<FillType>;

package/lib/index.js

@@ -115,7 +115,6 @@ var style_module_default = {
 // src/components/Button/index.tsx
 var import_cva2 = require("cva");
 var import_clsx = __toESM(require("clsx"));
-var import_icon = require("@liner-fe/icon");
 
 // src/components/Loading/style.module.scss
 var style_module_default2 = {
@@ -336,12 +335,12 @@ var DefaultButton = (0, import_react.forwardRef)(
       fillType: buttonFillLevelIconFillTypeMap[`${fill}`][level]
     };
     const renderContent = /* @__PURE__ */ __name((children2) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: (0, import_clsx.default)(defaultButtonChildrenVariants({ size: size4 })), children: [
-      !!leftIcon && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icon.Icon, { ...iconProps, ...leftIcon }),
+      !!leftIcon && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(leftIcon.icon, { ...iconProps }),
       isLoading ? !!leftIcon || !!rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { size: buttonLoadingSizeMap[size4], level: buttonLoadingLevelMap[level] }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: style_module_default.content, children: children2 })
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { size: buttonLoadingSizeMap[size4], level: buttonLoadingLevelMap[level] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: style_module_default.content, children: children2 }),
-      !!rightIcon && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icon.Icon, { ...iconProps, ...rightIcon })
+      !!rightIcon && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(rightIcon.icon, { ...iconProps })
     ] }), "renderContent");
     if (asChild) {
       const parent = import_react.Children.only(children);
@@ -1894,7 +1893,7 @@ var Paragraph = (0, import_react4.forwardRef)(
 );
 
 // src/components/Toast/index.tsx
-var import_icon2 = require("@liner-fe/icon");
+var import_icon = require("@liner-fe/icon");
 var import_recoil2 = require("recoil");
 var import_lottie_web = __toESM(require("lottie-web"));
 
@@ -2421,7 +2420,7 @@ 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_icon2.Icon, { ...icon, size: "m" }) });
+    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" }) });
   }, "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(),
@@ -2697,10 +2696,10 @@ var style_module_default5 = {
 // src/components/Popover/index.tsx
 var import_cva4 = require("cva");
 var import_clsx8 = require("clsx");
-var import_icon4 = require("@liner-fe/icon");
+var import_icon3 = require("@liner-fe/icon");
 
 // src/components/TextButton/index.tsx
-var import_icon3 = require("@liner-fe/icon");
+var import_icon2 = require("@liner-fe/icon");
 var import_cva3 = require("cva");
 
 // src/components/TextButton/style.module.scss
@@ -2780,9 +2779,9 @@ var TextButton = (0, import_react12.forwardRef)(
       ...icon
     }), "getIconProps");
     const renderContent = /* @__PURE__ */ __name((children2) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: style_module_default6["text-children"], children: [
-      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icon3.Icon, { ...getIconProps(leftIcon) }),
+      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icon2.Icon, { ...getIconProps(leftIcon) }),
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: children2 }),
-      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icon3.Icon, { ...getIconProps(rightIcon) })
+      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icon2.Icon, { ...getIconProps(rightIcon) })
     ] }), "renderContent");
     if (asChild) {
       const parent = import_react12.Children.only(children);
@@ -2891,7 +2890,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_icon4.Icon, { name: icon.name, size: "xs", thick: icon.thick, fill: icon.fill }),
+              icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icon3.Icon, { name: icon.name, 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,
@@ -2901,7 +2900,7 @@ var PopoverContent = React17.forwardRef(
                     onClose();
                   },
                   children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_icon4.Icon,
+                    import_icon3.Icon,
                     {
                       name: "close-fill",
                       size: "s",
@@ -2989,7 +2988,7 @@ var Tooltip = Object.assign(TooltipRoot, {
 // src/components/IconButton/index.tsx
 var import_cva6 = require("cva");
 var import_react14 = require("react");
-var import_icon5 = require("@liner-fe/icon");
+var import_icon4 = require("@liner-fe/icon");
 var import_clsx10 = __toESM(require("clsx"));
 
 // src/components/IconButton/style.module.scss
@@ -3107,7 +3106,7 @@ var IconButton = (0, import_react14.forwardRef)(
         "aria-label": icon.name,
         role: "button",
         children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loading, { size: iconButtonLoadingSizeMap[size4], level: iconButtonLoadingLevelMap[level] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_icon5.Icon,
+          import_icon4.Icon,
           {
             size: iconButtonSizeIconSizeMap[size4],
             type: iconButtonLevelIconTypeMap[fill ? "fill" : "ghost"][level],
@@ -3133,7 +3132,6 @@ var style_module_default9 = {
 
 // src/components/CheckBox/index.tsx
 var import_react16 = require("react");
-var import_icon6 = require("@liner-fe/icon");
 var import_clsx12 = __toESM(require("clsx"));
 
 // src/components/Label/index.tsx
@@ -3217,6 +3215,7 @@ var Label = (0, import_react15.forwardRef)(
 Label.displayName = "Label";
 
 // src/components/CheckBox/index.tsx
+var import_icon5 = require("@liner-fe/icon");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var Checkbox = (0, import_react16.forwardRef)(
   ({ className, label, description, ...props }, ref) => {
@@ -3227,7 +3226,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_icon6.Icon, { name: "check-mark", 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_icon5.IconCheckMark, { thick: true, size: "xs", type: "inverse-label-primary" }) }) }) });
   }
 );
 
@@ -3303,7 +3302,7 @@ var style_module_default12 = {
 // src/components/Textfield/index.tsx
 var import_cva8 = require("cva");
 var import_clsx14 = __toESM(require("clsx"));
-var import_icon7 = require("@liner-fe/icon");
+var import_icon6 = 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)({
@@ -3456,7 +3455,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_icon7.Icon,
+          import_icon6.Icon,
           {
             name: "exclamationmark-fill",
             fill: true,
@@ -3518,7 +3517,7 @@ var style_module_default13 = {
 };
 
 // src/components/Select/index.tsx
-var import_icon8 = require("@liner-fe/icon");
+var import_icon7 = require("@liner-fe/icon");
 var import_react19 = require("react");
 var import_clsx15 = __toESM(require("clsx"));
 var import_jsx_runtime27 = require("react/jsx-runtime");
@@ -3626,7 +3625,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_icon8.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_icon7.Icon, { name: "drop-down", fill: true, thick: true, size: "xs" }) })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectContent, { ...contentProps })
           ]
@@ -3647,8 +3646,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_icon8.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_icon8.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)(import_icon7.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_icon7.Icon, { thick: true, size: "xs", name: "check-mark", type: "brand-label-primary" }) })
     ]
   }
 ), "SelectItem");
@@ -3664,7 +3663,7 @@ var style_module_default14 = {
 };
 
 // src/components/List/index.tsx
-var import_icon9 = require("@liner-fe/icon");
+var import_icon8 = require("@liner-fe/icon");
 var import_react21 = require("react");
 
 // src/hooks/collection.tsx
@@ -3713,7 +3712,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_icon9.Icon, { className: style_module_default14.icon, size: "xs", ...iconProps })
+        (icon || isSelected) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icon8.Icon, { className: style_module_default14.icon, size: "xs", ...iconProps })
       ]
     }
   );
@@ -3765,7 +3764,7 @@ var useSnackbar = /* @__PURE__ */ __name(() => {
 }, "useSnackbar");
 
 // src/components/Snackbar/SnackbarIcon/index.tsx
-var import_icon10 = require("@liner-fe/icon");
+var import_icon9 = require("@liner-fe/icon");
 
 // src/components/Snackbar/SnackbarIcon/style.module.scss
 var style_module_default16 = {
@@ -3777,11 +3776,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_icon10.Icon, { ...icon, size: "m", className: style_module_default16.container });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icon9.Icon, { ...icon, size: "m", className: style_module_default16.container });
 }, "SnackbarIcon");
 
 // src/components/Snackbar/index.tsx
-var import_icon11 = require("@liner-fe/icon");
+var import_icon10 = require("@liner-fe/icon");
 
 // src/components/Snackbar/SnackbarTitle/index.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
@@ -3913,7 +3912,7 @@ var SingleSnackbar = /* @__PURE__ */ __name((props) => {
             /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SnackbarDescription, { description })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-            import_icon11.IconArrowForward,
+            import_icon10.IconArrowForward,
             {
               fill: true,
               thick: true,
@@ -8306,7 +8305,7 @@ var style_module_default21 = {
 
 // src/components/coach-mark/main/index.tsx
 var import_react28 = require("react");
-var import_icon12 = require("@liner-fe/icon");
+var import_icon11 = require("@liner-fe/icon");
 var import_cva12 = require("cva");
 var import_clsx22 = __toESM(require("clsx"));
 
@@ -8481,7 +8480,7 @@ var CoachMarkContent = (0, import_react28.forwardRef)(
                 }
               ),
               icon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                import_icon12.Icon,
+                import_icon11.Icon,
                 {
                   name: icon.name,
                   size: "xs",

package/package.json

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