kiban-design-system 1.1.9 → 1.1.10

package/dist/index.cjs.js

@@ -4445,7 +4445,7 @@ const Icon = ({
   children: /*#__PURE__*/React2.createElement(Icons[name])
 });
 
-const MAIN_CLASS$t = 'Alert';
+const MAIN_CLASS$u = 'Alert';
 /**
  * Alert
  *
@@ -4465,13 +4465,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__*/jsxRuntime.jsxs("div", {
     className: className,
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: `${MAIN_CLASS$t}__content`,
+      className: `${MAIN_CLASS$u}__content`,
       children: [icon && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: `${MAIN_CLASS$t}__icon`,
+        className: `${MAIN_CLASS$u}__icon`,
         children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
           name: icon
         })
@@ -4479,7 +4479,7 @@ const Alert = ({
         children: content
       })]
     }), onDismiss ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: `${MAIN_CLASS$t}__close`,
+      className: `${MAIN_CLASS$u}__close`,
       onClick: () => onDismiss(id),
       children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
         name: "Close"
@@ -4488,7 +4488,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”.
@@ -4533,7 +4533,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__*/jsxRuntime.jsxs("button", {
     className: className,
     onClick: rest.disabled || isLoading ? () => {} : onClick,
@@ -4782,7 +4782,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.
  *
@@ -4808,7 +4808,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;
@@ -6507,7 +6507,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>
@@ -6532,14 +6532,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__*/jsxRuntime.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
@@ -6555,7 +6555,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__*/jsxRuntime.jsx("div", {
     className: className,
     children: children
@@ -7065,7 +7065,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.
@@ -7096,7 +7096,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__*/jsxRuntime.jsx("button", {
     className: className,
     onClick: onClick,
@@ -16549,8 +16549,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,
@@ -16580,7 +16580,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__*/jsxRuntime.jsx("button", {
       className: classNames,
@@ -16593,7 +16593,7 @@ const Tag = ({
   const removeButton = onRemove && /*#__PURE__*/jsxRuntime.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,
@@ -16930,7 +16930,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.
@@ -16953,7 +16953,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__*/jsxRuntime.jsx("div", {
     className: className,
     children: icon && /*#__PURE__*/jsxRuntime.jsx(Icon, {
@@ -17119,7 +17119,7 @@ const Item$3 = ({
   children: children
 });
 
-const MAIN_CLASS$l = 'FormLayout__items';
+const MAIN_CLASS$m = 'FormLayout__items';
 
 /**
  *
@@ -17139,7 +17139,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__*/jsxRuntime.jsx("div", {
     className: className,
     children: itemsMarkup
@@ -17164,7 +17164,7 @@ const FormLayout = ({
 };
 FormLayout.Group = Group;
 
-const MAIN_CLASS$k = 'PageActions';
+const MAIN_CLASS$l = 'PageActions';
 
 /**
  * PageActions component is used to display the buttons
@@ -17198,7 +17198,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__*/jsxRuntime.jsxs("div", {
     className: className,
     children: [extraAction && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -17211,7 +17211,7 @@ const PageActions = ({
   });
 };
 
-const MAIN_CLASS$j = 'Tabs__Tab';
+const MAIN_CLASS$k = 'Tabs__Tab';
 const Tab = ({
   ariaLabel,
   content,
@@ -17219,7 +17219,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__*/jsxRuntime.jsx("button", {
     "aria-label": ariaLabel,
     className: className,
@@ -17228,7 +17228,7 @@ const Tab = ({
   });
 };
 
-const MAIN_CLASS$i = 'Tabs__TabsWrapper';
+const MAIN_CLASS$j = 'Tabs__TabsWrapper';
 const TabsWrapper = ({
   onSelect,
   selected,
@@ -17246,18 +17246,18 @@ const TabsWrapper = ({
     isFitted: areFitted
   }, tab.id);
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
     className: className,
     id: id,
@@ -17347,7 +17347,7 @@ const FilterField$1 = ({
   });
 };
 
-const MAIN_CLASS$g = 'AlphaFilterControl';
+const MAIN_CLASS$h = 'AlphaFilterControl';
 const AlphaFilterControl = ({
   primaryAction,
   secondaryActions,
@@ -17364,7 +17364,7 @@ const AlphaFilterControl = ({
     panelID: `panel-${section.id}`
   }));
   const headerMarkup = /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: `${MAIN_CLASS$g}__HeaderWrapper`,
+    className: `${MAIN_CLASS$h}__HeaderWrapper`,
     children: /*#__PURE__*/jsxRuntime.jsx("span", {
       children: title
     })
@@ -17427,7 +17427,7 @@ const AlphaFilterControl = ({
     setFilterValues(values);
   }, [values]);
   const bodyMarkup = React2.useMemo(() => /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: `${MAIN_CLASS$g}__BodyWrapper`,
+    className: `${MAIN_CLASS$h}__BodyWrapper`,
     children: /*#__PURE__*/jsxRuntime.jsx(Tabs, {
       selected: selectedTab,
       tabs: tabsConfig,
@@ -17436,7 +17436,7 @@ const AlphaFilterControl = ({
     })
   }), [tabsConfig, selectedTab, fieldsSearch]);
   const actionsMarkup = /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: `${MAIN_CLASS$g}__ActionWrapper`,
+    className: `${MAIN_CLASS$h}__ActionWrapper`,
     children: /*#__PURE__*/jsxRuntime.jsx(PageActions, {
       position: "flex-end",
       primaryAction: {
@@ -17447,12 +17447,12 @@ const AlphaFilterControl = ({
     })
   });
   return /*#__PURE__*/jsxRuntime.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
 }) => {
@@ -17462,14 +17462,14 @@ const AlphaGraphicCard = ({
       percent
     } = dataGraphic;
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: `${MAIN_CLASS$f}__GraphicContainerWrapper`,
+      className: `${MAIN_CLASS$g}__GraphicContainerWrapper`,
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: `${MAIN_CLASS$f}__Graphic`,
+        className: `${MAIN_CLASS$g}__Graphic`,
         style: {
           width: `${percent}%`
         }
       }), /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: `${MAIN_CLASS$f}__GraphicLabel`,
+        className: `${MAIN_CLASS$g}__GraphicLabel`,
         children: label
       })]
     }, `graphic-item-${index}`);
@@ -17480,12 +17480,12 @@ const AlphaGraphicCard = ({
       total
     } = dataGraphic;
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: `${MAIN_CLASS$f}__TotalContainer`,
+      className: `${MAIN_CLASS$g}__TotalContainer`,
       children: [!hidePercent ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
           children: [percent, "%"]
         }), /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: `${MAIN_CLASS$f}__TotalDivider`
+          className: `${MAIN_CLASS$g}__TotalDivider`
         })]
       }) : null, /*#__PURE__*/jsxRuntime.jsx("span", {
         children: total
@@ -17499,15 +17499,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__*/jsxRuntime.jsxs("div", {
-      className: `${MAIN_CLASS$f}__DataContainer`,
+      className: `${MAIN_CLASS$g}__DataContainer`,
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: `${MAIN_CLASS$f}__TitleContainer`,
+        className: `${MAIN_CLASS$g}__TitleContainer`,
         children: title
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: `${MAIN_CLASS$f}__GraphicTotalWrapper`,
+        className: `${MAIN_CLASS$g}__GraphicTotalWrapper`,
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
           className: classesGraphicWrapper,
           children: dataGraphics.map(renderGraphic)
@@ -17528,14 +17528,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__*/jsxRuntime.jsx("div", {
       className: classesContainer,
       children: renderContent(item)
     }, `graphic-card-${index}`);
   };
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: MAIN_CLASS$f,
+    className: MAIN_CLASS$g,
     children: data.map(renderContainer)
   });
 };
@@ -18863,7 +18863,7 @@ const AnnotatedSection = ({
   })]
 });
 
-const MAIN_CLASS$e = "Thumbnail";
+const MAIN_CLASS$f = "Thumbnail";
 
 /** Thumbnail is used to provides a miniaturized version of image
  *
@@ -18888,7 +18888,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__*/jsxRuntime.jsxs("div", {
     className: className,
     children: [source !== "" && /*#__PURE__*/jsxRuntime.jsx("img", {
@@ -18900,7 +18900,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.
@@ -18941,7 +18941,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__*/jsxRuntime.jsxs("div", {
     className: className,
@@ -19045,7 +19045,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.
@@ -19072,7 +19072,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__*/jsxRuntime.jsxs("div", {
     className: classes,
     children: [icon && /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -25230,7 +25230,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
@@ -25260,7 +25260,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__*/jsxRuntime.jsx("legend", {
     children: title
@@ -25277,7 +25277,7 @@ const ChoiceList = ({
       }
     };
     return /*#__PURE__*/jsxRuntime.jsx("li", {
-      className: `${MAIN_CLASS$b}__ListItem`,
+      className: `${MAIN_CLASS$c}__ListItem`,
       children: /*#__PURE__*/jsxRuntime.jsx(ControlComponent, {
         "aria-label": ariaLabel,
         name: name,
@@ -25309,10 +25309,10 @@ const ChoiceList = ({
   return /*#__PURE__*/jsxRuntime.jsxs("fieldset", {
     className: className,
     children: [titleMarkup || checkboxSelectAllMarkup ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: `${MAIN_CLASS$b}__TitleContainer`,
+      className: `${MAIN_CLASS$c}__TitleContainer`,
       children: [checkboxSelectAllMarkup, titleMarkup]
     }) : null, /*#__PURE__*/jsxRuntime.jsx("ul", {
-      className: `${MAIN_CLASS$b}__List`,
+      className: `${MAIN_CLASS$c}__List`,
       children: choicesMarkup
     })]
   });
@@ -25429,7 +25429,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,
@@ -25441,7 +25441,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);
   };
@@ -25449,30 +25449,30 @@ const Connector = ({
     className: classes,
     onClick: handleOnClick,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: `${MAIN_CLASS$a}__container`,
+      className: `${MAIN_CLASS$b}__container`,
       children: [!image && icon && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: `${MAIN_CLASS$a}__icon`,
+        className: `${MAIN_CLASS$b}__icon`,
         children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
           name: icon
         })
       }), image && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: `${MAIN_CLASS$a}__image`,
+        className: `${MAIN_CLASS$b}__image`,
         children: /*#__PURE__*/jsxRuntime.jsx("img", {
           alt: alt,
           src: image
         })
       }), name && /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: `${MAIN_CLASS$a}__name`,
+        className: `${MAIN_CLASS$b}__name`,
         children: name
       }), meta && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: `${MAIN_CLASS$a}__meta`,
+        className: `${MAIN_CLASS$b}__meta`,
         children: meta
       })]
     })
   });
 };
 
-const MAIN_CLASS$9 = 'Container';
+const MAIN_CLASS$a = 'Container';
 
 /**
  *
@@ -25485,14 +25485,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__*/jsxRuntime.jsx("div", {
     className: className,
     children: children
   });
 };
 
-const MAIN_CLASS$8 = 'Cover';
+const MAIN_CLASS$9 = 'Cover';
 
 /**
  *
@@ -25508,7 +25508,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__*/jsxRuntime.jsx("div", {
     style: {
       backgroundImage: `url(${source})`
@@ -33877,14 +33877,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__*/jsxRuntime.jsxs("div", {
     className: className,
     children: [title, /*#__PURE__*/jsxRuntime.jsx("button", {
@@ -33897,6 +33897,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] = React2.useState(false);
+  const fileInputRef = React2.useRef(null);
+  const dropzoneRef = React2.useRef(null);
+  const validateFile = React2.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 = React2.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 = React2.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 = React2.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 = React2.useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!disabled) {
+      setIsDragging(true);
+    }
+  }, [disabled]);
+  const handleDragLeave = React2.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 = React2.useCallback(() => {
+    if (!disabled && fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, [disabled]);
+  const handleRemoveFile = React2.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__*/jsxRuntime.jsx("label", {
+    className: `${MAIN_CLASS$7}__label`,
+    children: label
+  }) : null;
+  const dropzoneMarkup = /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
+      className: `${MAIN_CLASS$7}__container`,
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: `${MAIN_CLASS$7}__icon-wrapper`,
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+          name: iconName
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: `${MAIN_CLASS$7}__copy-wrapper`,
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: `${MAIN_CLASS$7}__copy-title`,
+          children: title
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: `${MAIN_CLASS$7}__copy-subtitle`,
+          children: subtitle
+        })]
+      })]
+    }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
+    className: `${MAIN_CLASS$7}__list`,
+    children: value.map((file, index) => /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: `${MAIN_CLASS$7}__item`,
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: `${MAIN_CLASS$7}__item-content`,
+        children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
+          name: "Paperclip"
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: `${MAIN_CLASS$7}__item-info`,
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            className: `${MAIN_CLASS$7}__item-name`,
+            children: file.name
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: `${MAIN_CLASS$7}__item-size`,
+            children: formatFileSize(file.size)
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("button", {
+        className: `${MAIN_CLASS$7}__item-delete`,
+        onClick: () => handleRemoveFile(file),
+        "aria-label": `Remove ${file.name}`,
+        type: "button",
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+          name: "Close"
+        })
+      })]
+    }, `${file.name}-${index}`))
+  }) : null;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: MAIN_CLASS$7,
+    children: [labelMarkup, dropzoneMarkup, fileListMarkup]
+  });
+};
+
 const MAIN_CLASS$6 = 'Label';
 
 /**
@@ -41087,6 +41314,7 @@ exports.DynamicForm = DynamicForm;
 exports.EmptyState = EmptyState;
 exports.ErrorIcon = ErrorIcon;
 exports.FileDownloader = FileDownloader;
+exports.FileUpload = FileUpload;
 exports.Filedrop = Filedrop;
 exports.FilterControl = FilterControl;
 exports.Filters = Filters;