prometeo-design-system 4.4.3 → 4.5.0

package/dist/Header.es.js

@@ -1,33 +1,34 @@
-import { j as s } from "./jsx-runtime-GkKLlHH4.js";
-import { c as a } from "./cn-B6yFEsav.js";
+import { j as t } from "./jsx-runtime-GkKLlHH4.js";
+import { c as i } from "./cn-B6yFEsav.js";
 import { motion as n } from "framer-motion";
 import { memo as f } from "react";
-const c = ({ title: e, subtitle: t, children: i, className: r, subtitleClassName: m, titleClassName: d, mainActionSlot: l }) => /* @__PURE__ */ s.jsxs(
+const c = ({ title: e, subtitle: s, children: l, className: m, subtitleClassName: r, titleClassName: d, mainActionSlot: a }) => /* @__PURE__ */ t.jsxs(
   n.header,
   {
     initial: { opacity: 0, y: -10 },
     animate: { opacity: 1, y: 0 },
     transition: { duration: 0.6, ease: "easeOut" },
-    className: a(
-      "h-16 flex items-center px-4 sm:h-20 md:h-24 md:px-6 lg:h-28 xl:h-32 2xl:h-36 overflow-hidden",
+    className: i(
+      "flex items-center sm:min-h-20 md:min-h-24 lg:min-h-28 xl:min-h-32 2xl:min-h-36 overflow-hidden px-4 md:px-0 py-2 md:py-3",
       "flex justify-between items-center w-full",
-      r
+      a && "px-1",
+      m
     ),
     children: [
-      /* @__PURE__ */ s.jsxs("div", { className: a(
+      /* @__PURE__ */ t.jsxs("div", { className: i(
         "flex items-center md:items-start md:flex-col leading-6 h-full justify-center min-w-max",
-        l && "justify-start"
+        a && "justify-start gap-1"
       ), children: [
-        l && /* @__PURE__ */ s.jsx("div", { children: typeof l == "function" ? l() : l }),
-        /* @__PURE__ */ s.jsxs("div", { className: "flex flex-col leading-6 justify-center", children: [
-          t && /* @__PURE__ */ s.jsx("h3", { className: a(" prometeo-fonts-body-medium text-neutral-medium-default ", m), children: t }),
-          e && /* @__PURE__ */ s.jsx("h1", { className: a("prometeo-fonts-headline-small text-neutral-strong-default", d), children: e })
+        a && /* @__PURE__ */ t.jsx("div", { className: "md:px-3", children: typeof a == "function" ? a() : a }),
+        /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col leading-6 justify-center md:px-6", children: [
+          s && /* @__PURE__ */ t.jsx("h3", { className: i(" prometeo-fonts-body-medium text-neutral-medium-default ", r), children: s }),
+          e && /* @__PURE__ */ t.jsx("h1", { className: i("prometeo-fonts-headline-small text-neutral-strong-default", d), children: e })
         ] })
       ] }),
-      i && /* @__PURE__ */ s.jsx("div", { className: "bg-red-400 px-2", children: i })
+      l && /* @__PURE__ */ t.jsx("div", { className: "bg-red-400 px-2", children: l })
     ]
   }
-), u = f(c, (e, t) => e.title !== t.title || e.subtitle !== t.subtitle || e.className !== t.className ? !1 : e.children !== t.children ? !e.children && !t.children : !0);
+), u = f(c, (e, s) => e.title !== s.title || e.subtitle !== s.subtitle || e.className !== s.className ? !1 : e.children !== s.children ? !e.children && !s.children : !0);
 u.displayName = "Header";
 export {
   u as default

package/dist/IconButton.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/IconButton'
+export {}
+import PrometeoDesignSystem from './exports/IconButton'
+export default PrometeoDesignSystem
+export * from './exports/IconButton'
+export {}

package/dist/IconButton.es.js

@@ -0,0 +1,306 @@
+import { j as r } from "./jsx-runtime-GkKLlHH4.js";
+import { memo as C, useMemo as E } from "react";
+import R from "./Spinner.es.js";
+import { c as b } from "./index-BOQuZ0gG.js";
+import { c as f } from "./cn-B6yFEsav.js";
+const u = {
+  small: {
+    container: "w-8 h-8 p-0 rounded-[6px]"
+  },
+  medium: {
+    container: "w-8 h-8 p-0 rounded-[6px]"
+  },
+  large: {
+    container: "w-12 h-12 p-0"
+  }
+}, e = {
+  fill: {
+    primary: {
+      container: ` bg-primary-default-default border-primary-default-default
+            hover:bg-primary-default-hover
+            active:bg-primary-default-focused            
+            `,
+      icon: "text-neutral-strong-default! group-hover:text-neutral-strong-hover! group-active:text-neutral-strong-pressed!"
+    },
+    secondary: {
+      container: `bg-neutral-medium-default border-neutral-medium-default
+            hover:bg-neutral-medium-hover
+            active:bg-neutral-medium-pressed`,
+      icon: "text-neutral-strong-default! group-hover:text-neutral-strong-hover! group-active:text-neutral-strong-pressed!"
+    },
+    success: {
+      container: "bg-success-default-default border-success-default-default hover:bg-success-default-hover active:bg-success-default-pressed",
+      icon: "text-neutral-weak-default group-hover:text-neutral-weak-hover group-active:text-neutral-weak-pressed"
+    },
+    error: {
+      container: "bg-error-default-default hover:bg-error-default-hover active:bg-error-default-pressed",
+      icon: "text-neutral-strong-default group-hover:text-neutral-strong-hover group-active:text-neutral-strong-pressed"
+    },
+    warning: {
+      container: "bg-warning-default-default hover:bg-warning-default-hover active:bg-warning-default-pressed",
+      icon: "text-neutral-weak-default group-hover:text-neutral-weak-hover group-active:text-neutral-weak-pressed"
+    },
+    disabled: {
+      container: "bg-primary-medium-disabled border-transparent cursor-default!",
+      icon: "text-neutral-strong-disabled group-hover:text-neutral-strong-disabled group-active:text-neutral-strong-disabled"
+    }
+  },
+  outline: {
+    primary: {
+      container: `bg-transparent border-primary-default-default border
+            hover:bg-neutral-default-hover hover:border-primary-medium-hover
+            active:bg-neutral-default-pressed active:border-primary-medium-pressed
+            `,
+      icon: "text-primary-default-default group-hover:text-primary-medium-hover group-active:text-primary-medium-pressed"
+    },
+    secondary: {
+      container: "bg-transparent border-neutral-medium-default border hover:bg-neutral-default-hover hover:border-neutral-medium-hover active:bg-neutral-default-pressed active:border-neutral-medium-pressed",
+      icon: "text-neutral-strong-default group-hover:text-neutral-storng-hover group-active:text-neutral-storng-pressed"
+    },
+    success: {
+      container: "border border-success-default-default hover:border-success-default-hover hover:bg-neutral-default-hover active:border-success-default-pressed active:bg-neutral-default-pressed",
+      icon: "text-success-medium-default group-hover:text-success-medium-hover group-active:text-success-medium-pressed"
+    },
+    error: {
+      container: "border border-error-default-default hover:border-error-default-hover hover:bg-neutral-default-hover active:border-error-default-pressed active:bg-neutral-default-pressed",
+      icon: "text-error-medium-default group-hover:text-error-medium-hover group-active:text-error-medium-pressed"
+    },
+    warning: {
+      container: "border border-warning-default-default hover:border-warning-default-hover hover:bg-neutral-default-hover active:border-warning-default-pressed active:bg-neutral-default-pressed",
+      icon: "text-warning-medium-default group-hover:text-warning-medium-hover group-active:text-warning-medium-pressed"
+    },
+    disabled: {
+      container: "bg-neutral-default-disabled border-neutral-default-disabled border cursor-default!",
+      icon: "text-neutral-default-disabled group-hover:text-neutral-default-disabled group-active:text-neutral-default-disabled"
+    }
+  },
+  text: {
+    primary: {
+      container: " bg-transparent border-0 text-primary-default-default hover:bg-neutral-default-hover hover:border-primary-medium-hover active:bg-neutral-default-pressed",
+      icon: "text-primary-default-default group-hover:text-primary-medium-hover group-active:text-primary-medium-pressed"
+    },
+    secondary: {
+      container: "bg-transparent border-0 hover:bg-neutral-default-hover hover:border-neutral-medium-hover active:bg-neutral-default-pressed",
+      icon: "text-neutral-strong-hover group-hover:text-neutral-storng-hover group-active:text-neutral-storng-pressed"
+    },
+    success: {
+      container: "border border-transparent hover:border-success-default-hover hover:bg-neutral-default-hover hover:border-success-default-hover active:border-success-default-pressed active:bg-neutral-default-pressed",
+      icon: "text-success-medium-default group-hover:text-success-medium-hover group-active:text-success-medium-pressed"
+    },
+    error: {
+      container: "border border-transparent hover:border-error-default-hover hover:bg-neutral-default-hover hover:border-error-default-hover active:border-error-default-pressed active:bg-neutral-default-pressed",
+      icon: "text-error-medium-default group-hover:text-error-medium-hover group-active:text-error-medium-pressed"
+    },
+    warning: {
+      container: "border border-transparent hover:border-warning-default-hover hover:bg-neutral-default-hover hover:border-warning-default-hover active:border-warning-default-pressed active:bg-neutral-default-pressed",
+      icon: "text-warning-medium-default group-hover:text-warning-medium-hover group-active:text-warning-medium-pressed"
+    },
+    disabled: {
+      container: "bg-transparent border-neutral-default-disabled border-none cursor-default! hover:bg-transparent",
+      icon: "text-neutral-medium-focused group-hover:text-neutral-medium-focused group-active:text-neutral-medium-focused"
+    }
+  }
+}, a = {
+  small: {
+    container: "",
+    icon: ""
+  },
+  medium: {
+    container: "",
+    icon: ""
+  },
+  large: {
+    container: "",
+    icon: ""
+  }
+}, h = {
+  container: "flex justify-center items-center gap-1 w-max rounded-lg bg-transparent cursor-pointer transition-all ease-in-out duration-300 relative",
+  icon: "w-max transition-all ease-in-out duration-300 flex justify-center items-center"
+}, p = {
+  true: {
+    container: "hover:scale-105 active:scale-95 disabled:scale-100"
+  },
+  false: {
+    container: ""
+  }
+}, g = {
+  true: {
+    icon: "group-hover:rotate-90 group-active:rotate-0 group-disabled:rotate-0"
+  },
+  false: {
+    icon: ""
+  }
+}, q = b(h.container, {
+  variants: {
+    size: {
+      small: `${a.small.container} ${u.small.container}`,
+      medium: `${a.medium.container} ${u.medium.container}`,
+      large: `${a.large.container} ${u.large.container}`
+    },
+    variant: {
+      fill: "",
+      outline: "",
+      text: ""
+    },
+    color: {
+      primary: "",
+      secondary: "",
+      success: "",
+      error: "",
+      warning: "",
+      disabled: ""
+    },
+    animation: {
+      true: p.true.container,
+      false: p.false.container
+    }
+  },
+  compoundVariants: [
+    { variant: "fill", color: "primary", class: e.fill.primary.container },
+    { variant: "fill", color: "secondary", class: e.fill.secondary.container },
+    { variant: "fill", color: "success", class: e.fill.success.container },
+    { variant: "fill", color: "error", class: e.fill.error.container },
+    { variant: "fill", color: "warning", class: e.fill.warning.container },
+    { variant: "fill", color: "disabled", class: e.fill.disabled.container },
+    { variant: "outline", color: "primary", class: e.outline.primary.container },
+    { variant: "outline", color: "secondary", class: e.outline.secondary.container },
+    { variant: "outline", color: "success", class: e.outline.success.container },
+    { variant: "outline", color: "error", class: e.outline.error.container },
+    { variant: "outline", color: "warning", class: e.outline.warning.container },
+    { variant: "outline", color: "disabled", class: e.outline.disabled.container },
+    { variant: "text", color: "primary", class: e.text.primary.container },
+    { variant: "text", color: "secondary", class: e.text.secondary.container },
+    { variant: "text", color: "success", class: e.text.success.container },
+    { variant: "text", color: "error", class: e.text.error.container },
+    { variant: "text", color: "warning", class: e.text.warning.container },
+    { variant: "text", color: "disabled", class: e.text.disabled.container }
+  ],
+  defaultVariants: {
+    size: "medium",
+    variant: "fill",
+    color: "primary",
+    animation: !0
+  }
+}), A = b(h.icon, {
+  variants: {
+    size: {
+      small: a.small.icon,
+      medium: a.medium.icon,
+      large: a.large.icon
+    },
+    variant: {
+      fill: "",
+      outline: "",
+      text: ""
+    },
+    color: {
+      primary: "",
+      secondary: "",
+      success: "",
+      error: "",
+      warning: "",
+      disabled: ""
+    },
+    animateIcon: {
+      true: g.true.icon,
+      false: g.false.icon
+    }
+  },
+  compoundVariants: [
+    { variant: "fill", color: "primary", class: e.fill.primary.icon },
+    { variant: "fill", color: "secondary", class: e.fill.secondary.icon },
+    { variant: "fill", color: "success", class: e.fill.success.icon },
+    { variant: "fill", color: "error", class: e.fill.error.icon },
+    { variant: "fill", color: "warning", class: e.fill.warning.icon },
+    { variant: "fill", color: "disabled", class: e.fill.disabled.icon },
+    { variant: "outline", color: "primary", class: e.outline.primary.icon },
+    { variant: "outline", color: "secondary", class: e.outline.secondary.icon },
+    { variant: "outline", color: "success", class: e.outline.success.icon },
+    { variant: "outline", color: "error", class: e.outline.error.icon },
+    { variant: "outline", color: "warning", class: e.outline.warning.icon },
+    { variant: "outline", color: "disabled", class: e.outline.disabled.icon },
+    { variant: "text", color: "primary", class: e.text.primary.icon },
+    { variant: "text", color: "secondary", class: e.text.secondary.icon },
+    { variant: "text", color: "success", class: e.text.success.icon },
+    { variant: "text", color: "error", class: e.text.error.icon },
+    { variant: "text", color: "warning", class: e.text.warning.icon },
+    { variant: "text", color: "disabled", class: e.text.disabled.icon }
+  ],
+  defaultVariants: {
+    size: "medium",
+    variant: "fill",
+    color: "primary",
+    animateIcon: !0
+  }
+}), M = ({
+  onClick: x,
+  icon: y,
+  contentClassName: n,
+  animate: w = !1,
+  animateIcon: j = !1,
+  isLoading: t = !1,
+  children: V,
+  hideSpinner: d = !1,
+  spinner: v = /* @__PURE__ */ r.jsx(R, { size: "small", variant: "clip", color: "var(--neutral-600)", className: "size-4 " }),
+  type: I,
+  className: $,
+  disabled: o,
+  variant: i = "fill",
+  form: k,
+  size: l = "medium",
+  color: z = "primary"
+}) => {
+  const s = V || y;
+  if (!s)
+    throw new Error('IconButton: Se requiere un icon (prop "icon" o "children")');
+  const m = !!(j && !o && !t), S = !!(w && !o && !t), c = o || t ? "disabled" : z, N = E(() => {
+    if (t)
+      return /* @__PURE__ */ r.jsx("div", { className: "flex items-center justify-center", children: !d && v });
+    const B = s;
+    return /* @__PURE__ */ r.jsx("div", { className: f("flex items-center justify-center select-none", n), children: /* @__PURE__ */ r.jsx(
+      "span",
+      {
+        className: A({
+          size: l,
+          variant: i,
+          color: c,
+          animateIcon: m
+        }),
+        children: /* @__PURE__ */ r.jsx(B, {})
+      }
+    ) });
+  }, [
+    n,
+    s,
+    i,
+    l,
+    c,
+    t,
+    d,
+    v,
+    m
+  ]);
+  return /* @__PURE__ */ r.jsx(
+    "button",
+    {
+      type: I,
+      className: f(
+        "group",
+        q({
+          size: l,
+          variant: i,
+          color: c,
+          animation: S
+        }),
+        $
+      ),
+      disabled: o || t,
+      form: k,
+      onClick: x,
+      children: /* @__PURE__ */ r.jsx("div", { className: `flex items-center gap-1 ${n}`, children: N })
+    }
+  );
+}, H = C(M);
+export {
+  H as default
+};

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,22 @@
+import { ButtonVariant, ColorVariant, SizeVariant } from '../Shared/types';
+import { IconComponent } from '../../Icons/types';
+export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    icon?: IconComponent;
+    contentClassName?: string;
+    animate?: boolean;
+    animateIcon?: boolean;
+    isLoading?: boolean;
+    children?: IconComponent;
+    spinner?: React.ReactNode;
+    type?: 'button' | "submit" | "reset";
+    className?: string;
+    disabled?: boolean;
+    variant?: ButtonVariant;
+    form?: string;
+    size?: SizeVariant;
+    color?: ColorVariant;
+    hideSpinner?: boolean;
+}
+declare const _default: import('react').MemoExoticComponent<({ onClick, icon, contentClassName, animate, animateIcon, isLoading, children, hideSpinner, spinner, type, className, disabled, variant, form, size, color }: IconButtonProps) => React.ReactElement>;
+export default _default;

package/dist/exports/IconButton.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../components/IconButton/IconButton';
+export { type IconButtonProps } from '../components/IconButton/IconButton';

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export { default as Switch } from './components/Switch/Switch';
 export { default as DatePicker } from './components/DatePicker/DatePicker';
 export { default as RecurrentDatePicker } from './components/RecurrentDatePicker/RecurrentDatePicker';
 export { default as RecurrentDatePickerRRule } from './components/RecurrentDatePicker/RecurrentDatePickerRRule';
+export { default as IconButton } from './components/IconButton/IconButton';
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from './components/Table/Table';
 export { default as TabLinks } from './components/TabLinks/TabLinks';
 export { default as TextArea } from './components/TextArea/TextArea';

package/dist/prometeo-design-system.es.js

@@ -2,7 +2,7 @@ import { default as h } from "./Avatar.es.js";
 import { default as C } from "./Button.es.js";
 import { default as E } from "./CardProfile.es.js";
 import { default as R } from "./CheckBox.es.js";
-import { default as S, useDialogControl as I } from "./DialogModal.es.js";
+import { default as I, useDialogControl as S } from "./DialogModal.es.js";
 import { default as M, useDrawerDesktop as j } from "./DrawerDesktop.es.js";
 import { default as y, useDrawerMobile as H } from "./DrawerMobile.es.js";
 import { default as A } from "./Header.es.js";
@@ -20,27 +20,28 @@ import { default as fe } from "./Switch.es.js";
 import { D as ne } from "./DatePicker-QuBgR5DQ.js";
 import { RecurrentDatePicker as me } from "./RecurrentDatePicker.es.js";
 import { RecurrentDatePickerRRule as ie } from "./RecurrentDatePickerRRule.es.js";
-import { Table as ce, TableBody as be, TableCaption as De, TableCell as ve, TableFooter as Te, TableHead as ge, TableHeader as ke, TableRow as he } from "./Table.es.js";
-import { T as Ce } from "./TabLinks-DnoWdrdk.js";
-import { default as Ee } from "./TextArea.es.js";
-import { default as Re } from "./Tooltip.es.js";
-import { default as Se } from "./Skeleton.es.js";
-import { default as Le } from "./SegmentedButton.es.js";
-import { I as je } from "./ImageGallery-DG9ovlQ-.js";
-import { default as ye } from "./Image.es.js";
-import { default as Oe, toastpyrion as Ae } from "./Toast.es.js";
-import { default as Ge } from "./ToastProvider.es.js";
-import { default as Ze } from "./SelectSearch.es.js";
-import { default as Je } from "./FAButton.es.js";
-import { default as Qe } from "./RadioButton.es.js";
-import { B as We } from "./badge-BEx-0Q-K.js";
+import { default as ce } from "./IconButton.es.js";
+import { Table as De, TableBody as ve, TableCaption as Te, TableCell as ge, TableFooter as ke, TableHead as he, TableHeader as Be, TableRow as Ce } from "./Table.es.js";
+import { T as Ee } from "./TabLinks-DnoWdrdk.js";
+import { default as Re } from "./TextArea.es.js";
+import { default as Ie } from "./Tooltip.es.js";
+import { default as Le } from "./Skeleton.es.js";
+import { default as je } from "./SegmentedButton.es.js";
+import { I as ye } from "./ImageGallery-DG9ovlQ-.js";
+import { default as Oe } from "./Image.es.js";
+import { default as _e, toastpyrion as Ge } from "./Toast.es.js";
+import { default as Ze } from "./ToastProvider.es.js";
+import { default as Je } from "./SelectSearch.es.js";
+import { default as Qe } from "./FAButton.es.js";
+import { default as We } from "./RadioButton.es.js";
+import { B as Ye } from "./badge-BEx-0Q-K.js";
 import { j as s } from "./jsx-runtime-GkKLlHH4.js";
 import { CloseNavBarDesktop as l } from "./Icons/CloseNavBarDesktop.es.js";
-import { default as Ye } from "./OtpInput.es.js";
+import { default as Fe } from "./OtpInput.es.js";
 import n, { useRef as p, useEffect as m } from "react";
 import { useDropzone as d } from "react-dropzone";
-import { u as Fe } from "./useDevice-vwn4GLwK.js";
-import { default as tt } from "./DropZone.es.js";
+import { u as tt } from "./useDevice-vwn4GLwK.js";
+import { default as ot } from "./DropZone.es.js";
 const D = ({
   isCollapsed: e,
   onToggle: t
@@ -95,56 +96,57 @@ const T = (e, t = !0) => {
 };
 export {
   h as Avatar,
-  We as Badge,
+  Ye as Badge,
   C as Button,
   E as CardProfile,
   R as CheckBox,
   ne as DatePicker,
-  S as DialogModal,
+  I as DialogModal,
   M as DrawerDesktop,
   y as DrawerMobile,
-  tt as DropZone,
-  Je as FAButton,
+  ot as DropZone,
+  Qe as FAButton,
   A as Header,
-  ye as Image,
-  je as ImageGallery,
+  ce as IconButton,
+  Oe as Image,
+  ye as ImageGallery,
   G as Input,
   Z as InputMultiple,
   J as Logo,
   Q as Menu,
   D as NavbarCollapseButton,
-  Ye as OtpInput,
+  Fe as OtpInput,
   W as Pagination,
   Y as ProfilePictureUpload,
   F as ProgressBar,
-  Qe as RadioButton,
+  We as RadioButton,
   me as RecurrentDatePicker,
   ie as RecurrentDatePickerRRule,
-  Le as SegmentedButton,
+  je as SegmentedButton,
   te as Select,
-  Ze as SelectSearch,
-  Se as Skeleton,
+  Je as SelectSearch,
+  Le as Skeleton,
   oe as Spinner,
   se as Steps,
   fe as Switch,
-  Ce as TabLinks,
-  ce as Table,
-  be as TableBody,
-  De as TableCaption,
-  ve as TableCell,
-  Te as TableFooter,
-  ge as TableHead,
-  ke as TableHeader,
-  he as TableRow,
-  Ee as TextArea,
-  Oe as Toast,
-  Ge as ToastProvider,
-  Re as Tooltip,
-  Ae as toastpyrion,
+  Ee as TabLinks,
+  De as Table,
+  ve as TableBody,
+  Te as TableCaption,
+  ge as TableCell,
+  ke as TableFooter,
+  he as TableHead,
+  Be as TableHeader,
+  Ce as TableRow,
+  Re as TextArea,
+  _e as Toast,
+  Ze as ToastProvider,
+  Ie as Tooltip,
+  Ge as toastpyrion,
   T as useClickOutside,
-  I as useDialogControl,
+  S as useDialogControl,
   j as useDrawerDesktop,
   H as useDrawerMobile,
   v as useFileDropzone,
-  Fe as useIsMobile
+  tt as useIsMobile
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "4.4.3",
+  "version": "4.5.0",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",
@@ -206,6 +206,10 @@
       "types": "./dist/Chip.d.ts",
       "import": "./dist/Chip.es.js"
     },
+    "./IconButton": {
+      "types": "./dist/IconButton.d.ts",
+      "import": "./dist/IconButton.es.js"
+    },
     "./styles": "./dist/styles.css",
     "./intellisense": "./src/styles/intellisense.css"
   },