kiban-design-system 1.1.9 → 1.1.10

package/dist/index.esm.js

@@ -4425,7 +4425,7 @@ const Icon = ({
   children: /*#__PURE__*/createElement(Icons[name])
 });
 
-const MAIN_CLASS$t = 'Alert';
+const MAIN_CLASS$u = 'Alert';
 /**
  * Alert
  *
@@ -4445,13 +4445,13 @@ const Alert = ({
   onDismiss,
   id
 }) => {
-  const className = [MAIN_CLASS$t, appearance && `${MAIN_CLASS$t}--${appearance}`].filter(Boolean).join(' ');
+  const className = [MAIN_CLASS$u, appearance && `${MAIN_CLASS$u}--${appearance}`].filter(Boolean).join(' ');
   return /*#__PURE__*/jsxs("div", {
     className: className,
     children: [/*#__PURE__*/jsxs("div", {
-      className: `${MAIN_CLASS$t}__content`,
+      className: `${MAIN_CLASS$u}__content`,
       children: [icon && /*#__PURE__*/jsx("div", {
-        className: `${MAIN_CLASS$t}__icon`,
+        className: `${MAIN_CLASS$u}__icon`,
         children: /*#__PURE__*/jsx(Icon, {
           name: icon
         })
@@ -4459,7 +4459,7 @@ const Alert = ({
         children: content
       })]
     }), onDismiss ? /*#__PURE__*/jsx("div", {
-      className: `${MAIN_CLASS$t}__close`,
+      className: `${MAIN_CLASS$u}__close`,
       onClick: () => onDismiss(id),
       children: /*#__PURE__*/jsx(Icon, {
         name: "Close"
@@ -4468,7 +4468,7 @@ const Alert = ({
   });
 };
 
-const MAIN_CLASS$s = 'Button';
+const MAIN_CLASS$t = 'Button';
 
 /**
  * Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”.
@@ -4513,7 +4513,7 @@ const Button = ({
   } = useTheme();
   const THEME_CLASS = `Button--${theme}`;
   /** Check if every prop has been passed and asign the class name to the className const */
-  const className = [MAIN_CLASS$s, THEME_CLASS, appearance && `${THEME_CLASS}--is-${appearance}`, isDanger && `${MAIN_CLASS$s}--is-danger`, isBorderLess && `${MAIN_CLASS$s}--is-borderless`, isFullWidth && `${MAIN_CLASS$s}--is-full-width`, icon && `${MAIN_CLASS$s}--has-icon`, iconPosition && !isLoading && `${MAIN_CLASS$s}--icon-${iconPosition}`, contentAlign && `${MAIN_CLASS$s}--content-${contentAlign}`, size && `${MAIN_CLASS$s}--is-${size}`].filter(Boolean).join(' ');
+  const className = [MAIN_CLASS$t, THEME_CLASS, appearance && `${THEME_CLASS}--is-${appearance}`, isDanger && `${MAIN_CLASS$t}--is-danger`, isBorderLess && `${MAIN_CLASS$t}--is-borderless`, isFullWidth && `${MAIN_CLASS$t}--is-full-width`, icon && `${MAIN_CLASS$t}--has-icon`, iconPosition && !isLoading && `${MAIN_CLASS$t}--icon-${iconPosition}`, contentAlign && `${MAIN_CLASS$t}--content-${contentAlign}`, size && `${MAIN_CLASS$t}--is-${size}`].filter(Boolean).join(' ');
   return /*#__PURE__*/jsxs("button", {
     className: className,
     onClick: rest.disabled || isLoading ? () => {} : onClick,
@@ -4762,7 +4762,7 @@ const ActionList = ({
   });
 };
 
-const MAIN_CLASS$r = 'avatar';
+const MAIN_CLASS$s = 'avatar';
 /**
  * Avatar is a graphic representation that is associated with a user for identification.
  *
@@ -4788,7 +4788,7 @@ const Avatar = ({
   const {
     theme
   } = useTheme();
-  const className = [MAIN_CLASS$r, theme && `is-${theme}`, appearance && `${MAIN_CLASS$r}--is-${appearance}`, size && `${MAIN_CLASS$r}--${size}`, isRounded && `${MAIN_CLASS$r}--rounded`].filter(Boolean).join(' ');
+  const className = [MAIN_CLASS$s, theme && `is-${theme}`, appearance && `${MAIN_CLASS$s}--is-${appearance}`, size && `${MAIN_CLASS$s}--${size}`, isRounded && `${MAIN_CLASS$s}--rounded`].filter(Boolean).join(' ');
   let showIcon = false;
   let showInitials = false;
   let showSourse = false;
@@ -6487,7 +6487,7 @@ const useDeleteAlert = () => {
   return deleteAlert;
 };
 
-const MAIN_CLASS$q = "column";
+const MAIN_CLASS$r = "column";
 /** Grid.Item is used for set size of element in the Grid
  * @example
  * <Grid>
@@ -6512,14 +6512,14 @@ const GridItem = ({
   sizeTablet,
   sizeMobile
 }) => {
-  const className = [MAIN_CLASS$q, size && typeof size === "string" && `${size}`, size && typeof size !== "string" && `is-${size}`, sizeFullHD && `${sizeFullHD}`, sizeWidescreen && `${sizeWidescreen}`, sizeDesktop && `${sizeDesktop}`, sizeTablet && `${sizeTablet}`, sizeMobile && `${sizeMobile}`].filter(Boolean).join(" ");
+  const className = [MAIN_CLASS$r, size && typeof size === "string" && `${size}`, size && typeof size !== "string" && `is-${size}`, sizeFullHD && `${sizeFullHD}`, sizeWidescreen && `${sizeWidescreen}`, sizeDesktop && `${sizeDesktop}`, sizeTablet && `${sizeTablet}`, sizeMobile && `${sizeMobile}`].filter(Boolean).join(" ");
   return /*#__PURE__*/jsx("div", {
     className: className,
     children: children
   });
 };
 
-const MAIN_CLASS$p = "columns";
+const MAIN_CLASS$q = "columns";
 
 /** The grid system is used to arrange elements on a screen, usually by columns.
  * @example
@@ -6535,7 +6535,7 @@ const Grid = ({
   children,
   isMultiline
 }) => {
-  const className = [MAIN_CLASS$p, isMultiline && "is-multiline"].filter(Boolean).join(" ");
+  const className = [MAIN_CLASS$q, isMultiline && "is-multiline"].filter(Boolean).join(" ");
   return /*#__PURE__*/jsx("div", {
     className: className,
     children: children
@@ -7045,7 +7045,7 @@ const AlphaTooltip = ({
   });
 };
 
-const MAIN_CLASS$o = 'Icon-button';
+const MAIN_CLASS$p = 'Icon-button';
 
 /**
  * Icon Button are used primarily for actions, this component only contain a icon.
@@ -7076,7 +7076,7 @@ const IconButton = ({
     theme
   } = useTheme();
   /** Check if every prop has been passed and asign the class name to the className const */
-  const className = [MAIN_CLASS$o, appearance && `${MAIN_CLASS$o}--is-${appearance}`, theme && `is-${theme}`, size && `${MAIN_CLASS$o}--is-${size}`, isRound && `${MAIN_CLASS$o}--is-round`, isDisabled && `${MAIN_CLASS$o}--is-disabled`].filter(Boolean).join(' ');
+  const className = [MAIN_CLASS$p, appearance && `${MAIN_CLASS$p}--is-${appearance}`, theme && `is-${theme}`, size && `${MAIN_CLASS$p}--is-${size}`, isRound && `${MAIN_CLASS$p}--is-round`, isDisabled && `${MAIN_CLASS$p}--is-disabled`].filter(Boolean).join(' ');
   return /*#__PURE__*/jsx("button", {
     className: className,
     onClick: onClick,
@@ -16529,8 +16529,8 @@ const OptionList = ({
   });
 };
 
-const MAIN_CLASS$n = 'Tag'; // Component main class name
-const TAG_TEXT = `${MAIN_CLASS$n}__text`; // Text container class name
+const MAIN_CLASS$o = 'Tag'; // Component main class name
+const TAG_TEXT = `${MAIN_CLASS$o}__text`; // Text container class name
 
 /**
  * Tag represents a set of interactive, supplied keywords that help label,
@@ -16560,7 +16560,7 @@ const Tag = ({
     theme
   } = useTheme();
   /** Check if every prop has been passed and asign the class name to the className const */
-  const classNames = [MAIN_CLASS$n, `${MAIN_CLASS$n}--${theme}`, onClick && `${MAIN_CLASS$n}--is-clickable`, isDisabled && `${MAIN_CLASS$n}--is-disabled`, isDanger && `${MAIN_CLASS$n}--is-danger`].filter(Boolean).join(' ');
+  const classNames = [MAIN_CLASS$o, `${MAIN_CLASS$o}--${theme}`, onClick && `${MAIN_CLASS$o}--is-clickable`, isDisabled && `${MAIN_CLASS$o}--is-disabled`, isDanger && `${MAIN_CLASS$o}--is-danger`].filter(Boolean).join(' ');
   if (onClick) {
     return /*#__PURE__*/jsx("button", {
       className: classNames,
@@ -16573,7 +16573,7 @@ const Tag = ({
   const removeButton = onRemove && /*#__PURE__*/jsx("button", {
     "aria-label": ariaLabel,
     type: "button",
-    className: `${MAIN_CLASS$n}__Remove-Button`,
+    className: `${MAIN_CLASS$o}__Remove-Button`,
     onClick: onRemove,
     disabled: isDisabled,
     tabIndex: -1,
@@ -16910,7 +16910,7 @@ const Select = ({
   });
 };
 
-const MAIN_CLASS$m = 'Media';
+const MAIN_CLASS$n = 'Media';
 
 /**
  * Media component are used primarily for show a little box whit a icon inside.
@@ -16933,7 +16933,7 @@ const Media = ({
     theme
   } = useTheme();
   /** Check if every prop has been passed and asign the class name to the className const */
-  const className = [MAIN_CLASS$m, `${MAIN_CLASS$m}--${themeAppearance ? themeAppearance : theme}`, appearance && `${MAIN_CLASS$m}--is-${appearance}`, appearance && `${MAIN_CLASS$m}--is-${appearance}--${themeAppearance ? themeAppearance : theme}`, size && `${MAIN_CLASS$m}--is-${size}`].filter(Boolean).join(' ');
+  const className = [MAIN_CLASS$n, `${MAIN_CLASS$n}--${themeAppearance ? themeAppearance : theme}`, appearance && `${MAIN_CLASS$n}--is-${appearance}`, appearance && `${MAIN_CLASS$n}--is-${appearance}--${themeAppearance ? themeAppearance : theme}`, size && `${MAIN_CLASS$n}--is-${size}`].filter(Boolean).join(' ');
   return /*#__PURE__*/jsx("div", {
     className: className,
     children: icon && /*#__PURE__*/jsx(Icon, {
@@ -17099,7 +17099,7 @@ const Item$3 = ({
   children: children
 });
 
-const MAIN_CLASS$l = 'FormLayout__items';
+const MAIN_CLASS$m = 'FormLayout__items';
 
 /**
  *
@@ -17119,7 +17119,7 @@ const Group = ({
       children: child
     }, index);
   });
-  const className = [MAIN_CLASS$l, !condensed && `${MAIN_CLASS$l}--grouped`, condensed && `${MAIN_CLASS$l}--condensed`].filter(Boolean).join(' ');
+  const className = [MAIN_CLASS$m, !condensed && `${MAIN_CLASS$m}--grouped`, condensed && `${MAIN_CLASS$m}--condensed`].filter(Boolean).join(' ');
   return /*#__PURE__*/jsx("div", {
     className: className,
     children: itemsMarkup
@@ -17144,7 +17144,7 @@ const FormLayout = ({
 };
 FormLayout.Group = Group;
 
-const MAIN_CLASS$k = 'PageActions';
+const MAIN_CLASS$l = 'PageActions';
 
 /**
  * PageActions component is used to display the buttons
@@ -17178,7 +17178,7 @@ const PageActions = ({
       children: buttonProps.children
     }, `pageAction-${index}`);
   };
-  const className = [MAIN_CLASS$k, `${MAIN_CLASS$k}__container`, position && `${MAIN_CLASS$k}--position-${position}`, isReverse && `${MAIN_CLASS$k}--is-reverse`, extraAction && `${MAIN_CLASS$k}--has-extra-action`].filter(Boolean).join(' ');
+  const className = [MAIN_CLASS$l, `${MAIN_CLASS$l}__container`, position && `${MAIN_CLASS$l}--position-${position}`, isReverse && `${MAIN_CLASS$l}--is-reverse`, extraAction && `${MAIN_CLASS$l}--has-extra-action`].filter(Boolean).join(' ');
   return /*#__PURE__*/jsxs("div", {
     className: className,
     children: [extraAction && /*#__PURE__*/jsx("div", {
@@ -17191,7 +17191,7 @@ const PageActions = ({
   });
 };
 
-const MAIN_CLASS$j = 'Tabs__Tab';
+const MAIN_CLASS$k = 'Tabs__Tab';
 const Tab = ({
   ariaLabel,
   content,
@@ -17199,7 +17199,7 @@ const Tab = ({
   onClick,
   isFitted
 }) => {
-  const className = cssClassName(MAIN_CLASS$j, isSelected && 'isSelected', isFitted && 'isFitted');
+  const className = cssClassName(MAIN_CLASS$k, isSelected && 'isSelected', isFitted && 'isFitted');
   return /*#__PURE__*/jsx("button", {
     "aria-label": ariaLabel,
     className: className,
@@ -17208,7 +17208,7 @@ const Tab = ({
   });
 };
 
-const MAIN_CLASS$i = 'Tabs__TabsWrapper';
+const MAIN_CLASS$j = 'Tabs__TabsWrapper';
 const TabsWrapper = ({
   onSelect,
   selected,
@@ -17226,18 +17226,18 @@ const TabsWrapper = ({
     isFitted: areFitted
   }, tab.id);
   return /*#__PURE__*/jsx("div", {
-    className: MAIN_CLASS$i,
+    className: MAIN_CLASS$j,
     children: tabs.map(renderTab)
   });
 };
 
-const MAIN_CLASS$h = 'Tabs__Panel';
+const MAIN_CLASS$i = 'Tabs__Panel';
 const Panel$1 = ({
   id,
   children,
   isHidden
 }) => {
-  const className = [MAIN_CLASS$h, isHidden && `${MAIN_CLASS$h}--is-hidden`].filter(Boolean).join(' ');
+  const className = [MAIN_CLASS$i, isHidden && `${MAIN_CLASS$i}--is-hidden`].filter(Boolean).join(' ');
   return /*#__PURE__*/jsx("div", {
     className: className,
     id: id,
@@ -17327,7 +17327,7 @@ const FilterField$1 = ({
   });
 };
 
-const MAIN_CLASS$g = 'AlphaFilterControl';
+const MAIN_CLASS$h = 'AlphaFilterControl';
 const AlphaFilterControl = ({
   primaryAction,
   secondaryActions,
@@ -17344,7 +17344,7 @@ const AlphaFilterControl = ({
     panelID: `panel-${section.id}`
   }));
   const headerMarkup = /*#__PURE__*/jsx("div", {
-    className: `${MAIN_CLASS$g}__HeaderWrapper`,
+    className: `${MAIN_CLASS$h}__HeaderWrapper`,
     children: /*#__PURE__*/jsx("span", {
       children: title
     })
@@ -17407,7 +17407,7 @@ const AlphaFilterControl = ({
     setFilterValues(values);
   }, [values]);
   const bodyMarkup = useMemo(() => /*#__PURE__*/jsx("div", {
-    className: `${MAIN_CLASS$g}__BodyWrapper`,
+    className: `${MAIN_CLASS$h}__BodyWrapper`,
     children: /*#__PURE__*/jsx(Tabs, {
       selected: selectedTab,
       tabs: tabsConfig,
@@ -17416,7 +17416,7 @@ const AlphaFilterControl = ({
     })
   }), [tabsConfig, selectedTab, fieldsSearch]);
   const actionsMarkup = /*#__PURE__*/jsx("div", {
-    className: `${MAIN_CLASS$g}__ActionWrapper`,
+    className: `${MAIN_CLASS$h}__ActionWrapper`,
     children: /*#__PURE__*/jsx(PageActions, {
       position: "flex-end",
       primaryAction: {
@@ -17427,12 +17427,12 @@ const AlphaFilterControl = ({
     })
   });
   return /*#__PURE__*/jsxs("div", {
-    className: `${MAIN_CLASS$g}`,
+    className: `${MAIN_CLASS$h}`,
     children: [headerMarkup, bodyMarkup, actionsMarkup]
   });
 };
 
-const MAIN_CLASS$f = "AlphaGraphicCard";
+const MAIN_CLASS$g = "AlphaGraphicCard";
 const AlphaGraphicCard = ({
   data
 }) => {
@@ -17442,14 +17442,14 @@ const AlphaGraphicCard = ({
       percent
     } = dataGraphic;
     return /*#__PURE__*/jsxs("div", {
-      className: `${MAIN_CLASS$f}__GraphicContainerWrapper`,
+      className: `${MAIN_CLASS$g}__GraphicContainerWrapper`,
       children: [/*#__PURE__*/jsx("div", {
-        className: `${MAIN_CLASS$f}__Graphic`,
+        className: `${MAIN_CLASS$g}__Graphic`,
         style: {
           width: `${percent}%`
         }
       }), /*#__PURE__*/jsx("span", {
-        className: `${MAIN_CLASS$f}__GraphicLabel`,
+        className: `${MAIN_CLASS$g}__GraphicLabel`,
         children: label
       })]
     }, `graphic-item-${index}`);
@@ -17460,12 +17460,12 @@ const AlphaGraphicCard = ({
       total
     } = dataGraphic;
     return /*#__PURE__*/jsxs("div", {
-      className: `${MAIN_CLASS$f}__TotalContainer`,
+      className: `${MAIN_CLASS$g}__TotalContainer`,
       children: [!hidePercent ? /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsxs("span", {
           children: [percent, "%"]
         }), /*#__PURE__*/jsx("span", {
-          className: `${MAIN_CLASS$f}__TotalDivider`
+          className: `${MAIN_CLASS$g}__TotalDivider`
         })]
       }) : null, /*#__PURE__*/jsx("span", {
         children: total
@@ -17479,15 +17479,15 @@ const AlphaGraphicCard = ({
       variant,
       hidePercent
     } = dataCard;
-    const classesGraphicWrapper = cssClassName(`${MAIN_CLASS$f}__GraphicWrapper`, variant || "primary");
-    const classesTotalWrapper = cssClassName(`${MAIN_CLASS$f}__TotalWrapper`, variant || "primary");
+    const classesGraphicWrapper = cssClassName(`${MAIN_CLASS$g}__GraphicWrapper`, variant || "primary");
+    const classesTotalWrapper = cssClassName(`${MAIN_CLASS$g}__TotalWrapper`, variant || "primary");
     return /*#__PURE__*/jsxs("div", {
-      className: `${MAIN_CLASS$f}__DataContainer`,
+      className: `${MAIN_CLASS$g}__DataContainer`,
       children: [/*#__PURE__*/jsx("div", {
-        className: `${MAIN_CLASS$f}__TitleContainer`,
+        className: `${MAIN_CLASS$g}__TitleContainer`,
         children: title
       }), /*#__PURE__*/jsxs("div", {
-        className: `${MAIN_CLASS$f}__GraphicTotalWrapper`,
+        className: `${MAIN_CLASS$g}__GraphicTotalWrapper`,
         children: [/*#__PURE__*/jsx("div", {
           className: classesGraphicWrapper,
           children: dataGraphics.map(renderGraphic)
@@ -17508,14 +17508,14 @@ const AlphaGraphicCard = ({
     const isOnlyRow = allItems.length <= 3;
     const haveItemTop = index > 3;
     const haveItemBottom = index + 4 <= totalItems;
-    const classesContainer = cssClassName(`${MAIN_CLASS$f}__Container`, isFirst && "isFirst", isLast && "isLast", isStartRow && "isStartRow", isEndRow && "isEndRow", isMiddle && "isMiddle", isOnlyRow && "isOnlyRow", haveItemTop && "haveItemTop", (isEndRow || isStartRow) && !haveItemBottom && "haveNotItemBottom");
+    const classesContainer = cssClassName(`${MAIN_CLASS$g}__Container`, isFirst && "isFirst", isLast && "isLast", isStartRow && "isStartRow", isEndRow && "isEndRow", isMiddle && "isMiddle", isOnlyRow && "isOnlyRow", haveItemTop && "haveItemTop", (isEndRow || isStartRow) && !haveItemBottom && "haveNotItemBottom");
     return /*#__PURE__*/jsx("div", {
       className: classesContainer,
       children: renderContent(item)
     }, `graphic-card-${index}`);
   };
   return /*#__PURE__*/jsx("div", {
-    className: MAIN_CLASS$f,
+    className: MAIN_CLASS$g,
     children: data.map(renderContainer)
   });
 };
@@ -18843,7 +18843,7 @@ const AnnotatedSection = ({
   })]
 });
 
-const MAIN_CLASS$e = "Thumbnail";
+const MAIN_CLASS$f = "Thumbnail";
 
 /** Thumbnail is used to provides a miniaturized version of image
  *
@@ -18868,7 +18868,7 @@ const Thumbnail = ({
   source,
   icon
 }) => {
-  const className = [MAIN_CLASS$e, size && `${MAIN_CLASS$e}--is-${size}`, isTransparent && `${MAIN_CLASS$e}--is-transparent`, fit && `${MAIN_CLASS$e}--image-${fit}`, hasShadow && `${MAIN_CLASS$e}--has-shadow`].filter(Boolean).join(" ");
+  const className = [MAIN_CLASS$f, size && `${MAIN_CLASS$f}--is-${size}`, isTransparent && `${MAIN_CLASS$f}--is-transparent`, fit && `${MAIN_CLASS$f}--image-${fit}`, hasShadow && `${MAIN_CLASS$f}--has-shadow`].filter(Boolean).join(" ");
   return /*#__PURE__*/jsxs("div", {
     className: className,
     children: [source !== "" && /*#__PURE__*/jsx("img", {
@@ -18880,7 +18880,7 @@ const Thumbnail = ({
   });
 };
 
-const MAIN_CLASS$d = 'Card';
+const MAIN_CLASS$e = 'Card';
 
 /**
  * Card component are used primarily for show  a little information, sometimes with image.
@@ -18921,7 +18921,7 @@ const Card = ({
   title,
   icon
 }) => {
-  const className = [MAIN_CLASS$d, isBorderLess && `${MAIN_CLASS$d}--is-border-less`, isDisabled && `${MAIN_CLASS$d}--is-disabled`, isSelected && `${MAIN_CLASS$d}--is-selected`, size && `${MAIN_CLASS$d}--is-${size}`, image && `${MAIN_CLASS$d}--with-image`, onClick && !isDisabled && `${MAIN_CLASS$d}--is-clickable`].filter(Boolean).join(' ');
+  const className = [MAIN_CLASS$e, isBorderLess && `${MAIN_CLASS$e}--is-border-less`, isDisabled && `${MAIN_CLASS$e}--is-disabled`, isSelected && `${MAIN_CLASS$e}--is-selected`, size && `${MAIN_CLASS$e}--is-${size}`, image && `${MAIN_CLASS$e}--with-image`, onClick && !isDisabled && `${MAIN_CLASS$e}--is-clickable`].filter(Boolean).join(' ');
   const showThumbnail = source !== undefined || icon;
   return /*#__PURE__*/jsxs("div", {
     className: className,
@@ -19025,7 +19025,7 @@ const Badge = ({
   children: children
 });
 
-const MAIN_CLASS$c = 'Banner';
+const MAIN_CLASS$d = 'Banner';
 
 /**
  * Banner are used primarily show something informatión in a small container blue.
@@ -19052,7 +19052,7 @@ const Banner = ({
   const {
     theme
   } = useTheme();
-  const classes = [MAIN_CLASS$c, `${MAIN_CLASS$c}--${theme}`, hasShadow && 'Banner--has-shadow', appearance && `Banner--${appearance}`, appearance === 'info' && `Banner--${appearance}-${theme}`].filter(Boolean).join(' ');
+  const classes = [MAIN_CLASS$d, `${MAIN_CLASS$d}--${theme}`, hasShadow && 'Banner--has-shadow', appearance && `Banner--${appearance}`, appearance === 'info' && `Banner--${appearance}-${theme}`].filter(Boolean).join(' ');
   return /*#__PURE__*/jsxs("div", {
     className: classes,
     children: [icon && /*#__PURE__*/jsxs("div", {
@@ -25210,7 +25210,7 @@ const Checkbox = ({
   });
 };
 
-const MAIN_CLASS$b = 'ChoiceList';
+const MAIN_CLASS$c = 'ChoiceList';
 
 /**
  * Allow user to select one or multiple options from a list. Make sure all options
@@ -25240,7 +25240,7 @@ const ChoiceList = ({
   onChange,
   title
 }) => {
-  const className = [MAIN_CLASS$b].filter(Boolean).join(' ');
+  const className = [MAIN_CLASS$c].filter(Boolean).join(' ');
   const ControlComponent = allowMultiple ? Checkbox : RadioButton;
   const titleMarkup = title ? /*#__PURE__*/jsx("legend", {
     children: title
@@ -25257,7 +25257,7 @@ const ChoiceList = ({
       }
     };
     return /*#__PURE__*/jsx("li", {
-      className: `${MAIN_CLASS$b}__ListItem`,
+      className: `${MAIN_CLASS$c}__ListItem`,
       children: /*#__PURE__*/jsx(ControlComponent, {
         "aria-label": ariaLabel,
         name: name,
@@ -25289,10 +25289,10 @@ const ChoiceList = ({
   return /*#__PURE__*/jsxs("fieldset", {
     className: className,
     children: [titleMarkup || checkboxSelectAllMarkup ? /*#__PURE__*/jsxs("div", {
-      className: `${MAIN_CLASS$b}__TitleContainer`,
+      className: `${MAIN_CLASS$c}__TitleContainer`,
       children: [checkboxSelectAllMarkup, titleMarkup]
     }) : null, /*#__PURE__*/jsx("ul", {
-      className: `${MAIN_CLASS$b}__List`,
+      className: `${MAIN_CLASS$c}__List`,
       children: choicesMarkup
     })]
   });
@@ -25409,7 +25409,7 @@ const DataTable = ({
 DataTable.Row = Row$1;
 DataTable.Cell = Cell$1;
 
-const MAIN_CLASS$a = "Connector";
+const MAIN_CLASS$b = "Connector";
 const Connector = ({
   alt,
   icon,
@@ -25421,7 +25421,7 @@ const Connector = ({
   onClick,
   theme = "CLOUD"
 }) => {
-  const classes = [`${MAIN_CLASS$a}`, theme && `${MAIN_CLASS$a}--is-${theme}`, isActive && `${MAIN_CLASS$a}--is-active`].filter(Boolean).join(" ");
+  const classes = [`${MAIN_CLASS$b}`, theme && `${MAIN_CLASS$b}--is-${theme}`, isActive && `${MAIN_CLASS$b}--is-active`].filter(Boolean).join(" ");
   const handleOnClick = () => {
     onClick && onClick(id);
   };
@@ -25429,30 +25429,30 @@ const Connector = ({
     className: classes,
     onClick: handleOnClick,
     children: /*#__PURE__*/jsxs("div", {
-      className: `${MAIN_CLASS$a}__container`,
+      className: `${MAIN_CLASS$b}__container`,
       children: [!image && icon && /*#__PURE__*/jsx("div", {
-        className: `${MAIN_CLASS$a}__icon`,
+        className: `${MAIN_CLASS$b}__icon`,
         children: /*#__PURE__*/jsx(Icon, {
           name: icon
         })
       }), image && /*#__PURE__*/jsx("div", {
-        className: `${MAIN_CLASS$a}__image`,
+        className: `${MAIN_CLASS$b}__image`,
         children: /*#__PURE__*/jsx("img", {
           alt: alt,
           src: image
         })
       }), name && /*#__PURE__*/jsx("span", {
-        className: `${MAIN_CLASS$a}__name`,
+        className: `${MAIN_CLASS$b}__name`,
         children: name
       }), meta && /*#__PURE__*/jsx("div", {
-        className: `${MAIN_CLASS$a}__meta`,
+        className: `${MAIN_CLASS$b}__meta`,
         children: meta
       })]
     })
   });
 };
 
-const MAIN_CLASS$9 = 'Container';
+const MAIN_CLASS$a = 'Container';
 
 /**
  *
@@ -25465,14 +25465,14 @@ const Container = ({
   children,
   hasShadow = true
 }) => {
-  const className = [MAIN_CLASS$9, hasShadow && `${MAIN_CLASS$9}--has-shadow`].filter(Boolean).join(' ');
+  const className = [MAIN_CLASS$a, hasShadow && `${MAIN_CLASS$a}--has-shadow`].filter(Boolean).join(' ');
   return /*#__PURE__*/jsx("div", {
     className: className,
     children: children
   });
 };
 
-const MAIN_CLASS$8 = 'Cover';
+const MAIN_CLASS$9 = 'Cover';
 
 /**
  *
@@ -25488,7 +25488,7 @@ const Cover = ({
   source,
   hasShadow = false
 }) => {
-  const className = [MAIN_CLASS$8, position && `${MAIN_CLASS$8}--${position}`, hasShadow && `${MAIN_CLASS$8}--has-shadow`].filter(Boolean).join(' ');
+  const className = [MAIN_CLASS$9, position && `${MAIN_CLASS$9}--${position}`, hasShadow && `${MAIN_CLASS$9}--has-shadow`].filter(Boolean).join(' ');
   return /*#__PURE__*/jsx("div", {
     style: {
       backgroundImage: `url(${source})`
@@ -33857,14 +33857,14 @@ const EmptyState = ({
   });
 };
 
-const MAIN_CLASS$7 = "FileDownloader";
+const MAIN_CLASS$8 = "FileDownloader";
 const FileDownloader = ({
   ariaLabel,
   title = "Download",
   isDisabled,
   onDownload
 }) => {
-  const className = [MAIN_CLASS$7, isDisabled && `${MAIN_CLASS$7}--is-disabled`].filter(Boolean).join(" ");
+  const className = [MAIN_CLASS$8, isDisabled && `${MAIN_CLASS$8}--is-disabled`].filter(Boolean).join(" ");
   return /*#__PURE__*/jsxs("div", {
     className: className,
     children: [title, /*#__PURE__*/jsx("button", {
@@ -33877,6 +33877,233 @@ const FileDownloader = ({
   });
 };
 
+const MAIN_CLASS$7 = 'FileUpload';
+
+/**
+ * FileUpload component with drag and drop functionality
+ *
+ * @example
+ * <FileUpload
+ *   label="Upload File"
+ *   iconName="Upload"
+ *   title="Drag & drop files here"
+ *   subtitle="Or click to browse"
+ *   value={files}
+ *   onValueChange={setFiles}
+ *   maxFiles={5}
+ *   maxSize={5 * 1024 * 1024}
+ *   accept=".csv"
+ *   multiple
+ * />
+ */
+const FileUpload = ({
+  label,
+  iconName = 'Upload',
+  title = 'Drag & drop files here',
+  subtitle = 'Or click to browse',
+  value = [],
+  onValueChange,
+  maxFiles,
+  maxSize,
+  accept,
+  multiple = false,
+  disabled = false,
+  onFileReject,
+  onFileRemove,
+  onDrop,
+  ariaLabel
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef(null);
+  const dropzoneRef = useRef(null);
+  const validateFile = useCallback(file => {
+    // Check max size
+    if (maxSize && file.size > maxSize) {
+      return `File size exceeds maximum of ${formatFileSize(maxSize)}`;
+    }
+
+    // Check accept
+    if (accept) {
+      const acceptTypes = accept.split(',').map(t => t.trim());
+      const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
+      const fileType = file.type;
+      const isAccepted = acceptTypes.some(acceptType => {
+        if (acceptType.startsWith('.')) {
+          return fileExtension === acceptType.toLowerCase();
+        }
+        if (acceptType.includes('/*')) {
+          const baseType = acceptType.split('/')[0];
+          return fileType.startsWith(baseType + '/');
+        }
+        return fileType === acceptType;
+      });
+      if (!isAccepted) {
+        return `File type not accepted. Accepted types: ${accept}`;
+      }
+    }
+    return null;
+  }, [maxSize, accept]);
+  const validateAndAddFiles = useCallback(newFiles => {
+    const currentFiles = value || [];
+    const validFiles = [];
+
+    // Check max files limit
+    const remainingSlots = maxFiles ? maxFiles - currentFiles.length : Infinity;
+    if (remainingSlots <= 0) {
+      newFiles.forEach(file => {
+        const message = `Maximum ${maxFiles} file(s) allowed`;
+        onFileReject?.(file, message);
+      });
+      return currentFiles;
+    }
+
+    // Validate and add files
+    const filesToAdd = newFiles.slice(0, remainingSlots);
+    const filesToReject = newFiles.slice(remainingSlots);
+    filesToAdd.forEach(file => {
+      const error = validateFile(file);
+      if (error) {
+        onFileReject?.(file, error);
+      } else {
+        validFiles.push(file);
+      }
+    });
+    filesToReject.forEach(file => {
+      const message = `Maximum ${maxFiles} file(s) allowed`;
+      onFileReject?.(file, message);
+    });
+    if (validFiles.length > 0) {
+      const updatedFiles = multiple ? [...currentFiles, ...validFiles] : validFiles.slice(0, 1);
+      onValueChange?.(updatedFiles);
+      return updatedFiles;
+    }
+    return currentFiles;
+  }, [value, maxFiles, multiple, validateFile, onValueChange, onFileReject]);
+  const handleFileInputChange = useCallback(event => {
+    const files = event.target.files ? Array.from(event.target.files) : [];
+    if (files.length > 0) {
+      validateAndAddFiles(files);
+    }
+    // Reset input to allow selecting the same file again
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  }, [validateAndAddFiles]);
+  const handleDrop = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragging(false);
+    if (disabled) return;
+    const files = Array.from(event.dataTransfer.files);
+    if (files.length > 0) {
+      const updatedFiles = validateAndAddFiles(files);
+      onDrop?.(updatedFiles);
+    }
+  }, [disabled, validateAndAddFiles, onDrop]);
+  const handleDragOver = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!disabled) {
+      setIsDragging(true);
+    }
+  }, [disabled]);
+  const handleDragLeave = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    // Only set dragging to false if we're leaving the dropzone
+    if (!dropzoneRef.current?.contains(event.relatedTarget)) {
+      setIsDragging(false);
+    }
+  }, []);
+  const handleClick = useCallback(() => {
+    if (!disabled && fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, [disabled]);
+  const handleRemoveFile = useCallback(fileToRemove => {
+    const updatedFiles = value.filter(file => file !== fileToRemove);
+    onValueChange?.(updatedFiles);
+    onFileRemove?.(fileToRemove);
+  }, [value, onValueChange, onFileRemove]);
+  const dropzoneClassName = [`${MAIN_CLASS$7}__dropzone`, isDragging && `${MAIN_CLASS$7}__dropzone--dragging`, disabled && `${MAIN_CLASS$7}__dropzone--disabled`].filter(Boolean).join(' ');
+  const labelMarkup = label ? /*#__PURE__*/jsx("label", {
+    className: `${MAIN_CLASS$7}__label`,
+    children: label
+  }) : null;
+  const dropzoneMarkup = /*#__PURE__*/jsxs("div", {
+    ref: dropzoneRef,
+    className: dropzoneClassName,
+    onDrop: handleDrop,
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onClick: handleClick,
+    role: "button",
+    tabIndex: disabled ? -1 : 0,
+    "aria-label": ariaLabel || 'File upload dropzone',
+    "aria-disabled": disabled,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: `${MAIN_CLASS$7}__container`,
+      children: [/*#__PURE__*/jsx("div", {
+        className: `${MAIN_CLASS$7}__icon-wrapper`,
+        children: /*#__PURE__*/jsx(Icon, {
+          name: iconName
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: `${MAIN_CLASS$7}__copy-wrapper`,
+        children: [/*#__PURE__*/jsx("div", {
+          className: `${MAIN_CLASS$7}__copy-title`,
+          children: title
+        }), /*#__PURE__*/jsx("div", {
+          className: `${MAIN_CLASS$7}__copy-subtitle`,
+          children: subtitle
+        })]
+      })]
+    }), /*#__PURE__*/jsx("input", {
+      ref: fileInputRef,
+      type: "file",
+      multiple: multiple,
+      accept: accept,
+      onChange: handleFileInputChange,
+      disabled: disabled,
+      "aria-label": `${ariaLabel || 'file'}-input`,
+      className: `${MAIN_CLASS$7}__input`
+    })]
+  });
+  const fileListMarkup = value && value.length > 0 ? /*#__PURE__*/jsx("div", {
+    className: `${MAIN_CLASS$7}__list`,
+    children: value.map((file, index) => /*#__PURE__*/jsxs("div", {
+      className: `${MAIN_CLASS$7}__item`,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: `${MAIN_CLASS$7}__item-content`,
+        children: [/*#__PURE__*/jsx(Icon, {
+          name: "Paperclip"
+        }), /*#__PURE__*/jsxs("div", {
+          className: `${MAIN_CLASS$7}__item-info`,
+          children: [/*#__PURE__*/jsx("span", {
+            className: `${MAIN_CLASS$7}__item-name`,
+            children: file.name
+          }), /*#__PURE__*/jsx("span", {
+            className: `${MAIN_CLASS$7}__item-size`,
+            children: formatFileSize(file.size)
+          })]
+        })]
+      }), /*#__PURE__*/jsx("button", {
+        className: `${MAIN_CLASS$7}__item-delete`,
+        onClick: () => handleRemoveFile(file),
+        "aria-label": `Remove ${file.name}`,
+        type: "button",
+        children: /*#__PURE__*/jsx(Icon, {
+          name: "Close"
+        })
+      })]
+    }, `${file.name}-${index}`))
+  }) : null;
+  return /*#__PURE__*/jsxs("div", {
+    className: MAIN_CLASS$7,
+    children: [labelMarkup, dropzoneMarkup, fileListMarkup]
+  });
+};
+
 const MAIN_CLASS$6 = 'Label';
 
 /**
@@ -41020,5 +41247,5 @@ const Link = ({
   });
 };
 
-export { ActionList, Alert, AlertProvider, AlphaAttributeInput, AlphaBadge, AlphaButton, AlphaChip, AlphaFilterControl, AlphaGraphicCard, AlphaIcon, AlphaInlineError, AlphaInputDate, InputTag$1 as AlphaInputTag, AlphaInputText, AlphaLabel, AlphaLabelledField, AlphaMultiSelectionPicker, AlphaSegmentedControl, AlphaSideMenu, AlphaSpinner, AlphaStepper, AlphaTag, AlphaTile, AlphaTooltip, Totalizer as AlphaTotalizer, AlphaZipCodeInput, AnnotatedSection, Avatar, Badge, Banner, Button, CalendarPicker, Card, Checkbox, ChoiceList, Collapsible, Connector, Container, Cover, DataTable, DatePicker, DeletableSection, Divider, DynamicForm, EmptyState, ErrorIcon, FileDownloader, Filedrop, FilterControl, Filters, Footer, Form$1 as Form, FormField, FormLayout, Frame, Grid, GridItem, Header$1 as Header, Icon, IconButton, IndexList, InlineEdit, InputPhoneNumber, InputTag, InputText, Item$2 as Item, JsonViewer, Label, Link, ListInfo, Loader, Logo, Media, Modal, ModalHeader, Nip, OptionList, Page, PageActions, Pagination, Pane, Panel, PanelFooter, PanelHeader, PendingIcon, Popover$1 as Popover, Progress, RadioButton, Section$1 as Section, SectionForm, Select, SideMenu, SkeletonInput, SkeletonMedia, SkeletonTabs, SkeletonText, SkeletonTitle, SortableList, Spinner, Stack, StepDefault, SuccessIcon, Table, Tabs, Tag, ThemeProvider, ThreadItem, Thumbnail, Tier, Tile, TimeSelector, Title, Toggle, Tooltip, WarningIcon, capitalize, cssClassName, formatDate, formatFileSize, isComponentTypeOf, isValidIcon, themeClassConverter, useDeleteAlert, useShowAlert, useTheme };
+export { ActionList, Alert, AlertProvider, AlphaAttributeInput, AlphaBadge, AlphaButton, AlphaChip, AlphaFilterControl, AlphaGraphicCard, AlphaIcon, AlphaInlineError, AlphaInputDate, InputTag$1 as AlphaInputTag, AlphaInputText, AlphaLabel, AlphaLabelledField, AlphaMultiSelectionPicker, AlphaSegmentedControl, AlphaSideMenu, AlphaSpinner, AlphaStepper, AlphaTag, AlphaTile, AlphaTooltip, Totalizer as AlphaTotalizer, AlphaZipCodeInput, AnnotatedSection, Avatar, Badge, Banner, Button, CalendarPicker, Card, Checkbox, ChoiceList, Collapsible, Connector, Container, Cover, DataTable, DatePicker, DeletableSection, Divider, DynamicForm, EmptyState, ErrorIcon, FileDownloader, FileUpload, Filedrop, FilterControl, Filters, Footer, Form$1 as Form, FormField, FormLayout, Frame, Grid, GridItem, Header$1 as Header, Icon, IconButton, IndexList, InlineEdit, InputPhoneNumber, InputTag, InputText, Item$2 as Item, JsonViewer, Label, Link, ListInfo, Loader, Logo, Media, Modal, ModalHeader, Nip, OptionList, Page, PageActions, Pagination, Pane, Panel, PanelFooter, PanelHeader, PendingIcon, Popover$1 as Popover, Progress, RadioButton, Section$1 as Section, SectionForm, Select, SideMenu, SkeletonInput, SkeletonMedia, SkeletonTabs, SkeletonText, SkeletonTitle, SortableList, Spinner, Stack, StepDefault, SuccessIcon, Table, Tabs, Tag, ThemeProvider, ThreadItem, Thumbnail, Tier, Tile, TimeSelector, Title, Toggle, Tooltip, WarningIcon, capitalize, cssClassName, formatDate, formatFileSize, isComponentTypeOf, isValidIcon, themeClassConverter, useDeleteAlert, useShowAlert, useTheme };
 //# sourceMappingURL=index.esm.js.map