@moving-walls/design-system 1.0.14 → 1.0.16

package/dist/index.js

@@ -37588,7 +37588,8 @@ function Form(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
     _ref$layout = _ref.layout,
-    layout = _ref$layout === void 0 ? 'vertical' : _ref$layout;
+    layout = _ref$layout === void 0 ? 'vertical' : _ref$layout,
+    id = _ref.id;
   var handleSubmit = function handleSubmit(event) {
     if (onSubmit) {
       event.preventDefault();
@@ -37601,6 +37602,7 @@ function Form(_ref) {
       size: size
     },
     children: require$$1.jsx("form", {
+      id: id,
       onSubmit: handleSubmit,
       className: cn$m(formLayouts[layout], formSizes[size], className),
       children: children
@@ -40497,6 +40499,338 @@ function CardDescription(_a) {
   }));
 }
 
+function cn$f() {
+  for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
+    classes[_key] = arguments[_key];
+  }
+  return classes.filter(Boolean).join(' ');
+}
+var containerSizes = {
+  xs: 'max-w-xs',
+  // 320px
+  sm: 'max-w-sm',
+  // 384px 
+  md: 'max-w-md',
+  // 448px
+  lg: 'max-w-lg',
+  // 512px
+  xl: 'max-w-xl',
+  // 576px
+  '2xl': 'max-w-2xl',
+  // 672px
+  full: 'max-w-full'
+};
+var containerPadding = {
+  none: '',
+  sm: 'px-4',
+  md: 'px-6',
+  lg: 'px-8',
+  xl: 'px-12'
+};
+function Container(_ref) {
+  var children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'full' : _ref$size,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? 'md' : _ref$padding,
+    _ref$centered = _ref.centered,
+    centered = _ref$centered === void 0 ? true : _ref$centered,
+    className = _ref.className,
+    _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? 'div' : _ref$as;
+  return require$$1.jsx(Component, {
+    className: cn$f(containerSizes[size], containerPadding[padding], centered && 'mx-auto', className),
+    children: children
+  });
+}
+function ResponsiveContainer(_ref2) {
+  var children = _ref2.children,
+    _ref2$breakpoints = _ref2.breakpoints,
+    breakpoints = _ref2$breakpoints === void 0 ? {
+      sm: 'sm',
+      md: 'md',
+      lg: 'lg',
+      xl: 'xl',
+      '2xl': '2xl'
+    } : _ref2$breakpoints,
+    _ref2$padding = _ref2.padding,
+    padding = _ref2$padding === void 0 ? 'md' : _ref2$padding,
+    _ref2$centered = _ref2.centered,
+    centered = _ref2$centered === void 0 ? true : _ref2$centered,
+    className = _ref2.className,
+    _ref2$as = _ref2.as,
+    Component = _ref2$as === void 0 ? 'div' : _ref2$as;
+  var responsiveClasses = Object.entries(breakpoints).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      breakpoint = _ref4[0],
+      size = _ref4[1];
+    if (breakpoint === 'sm') return containerSizes[size];
+    return "".concat(breakpoint, ":").concat(containerSizes[size]);
+  }).join(' ');
+  return require$$1.jsx(Component, {
+    className: cn$f(responsiveClasses, containerPadding[padding], centered && 'mx-auto', className),
+    children: children
+  });
+}
+function GridContainer(_ref5) {
+  var children = _ref5.children,
+    _ref5$cols = _ref5.cols,
+    cols = _ref5$cols === void 0 ? 1 : _ref5$cols,
+    _ref5$gap = _ref5.gap,
+    gap = _ref5$gap === void 0 ? 4 : _ref5$gap,
+    className = _ref5.className;
+  var getGridCols = function getGridCols() {
+    if (typeof cols === 'number') {
+      return "grid-cols-".concat(cols);
+    }
+    var classes = [];
+    if (cols.sm) classes.push("grid-cols-".concat(cols.sm));
+    if (cols.md) classes.push("md:grid-cols-".concat(cols.md));
+    if (cols.lg) classes.push("lg:grid-cols-".concat(cols.lg));
+    if (cols.xl) classes.push("xl:grid-cols-".concat(cols.xl));
+    return classes.join(' ');
+  };
+  var getGap = function getGap() {
+    if (typeof gap === 'number') {
+      return "gap-".concat(gap);
+    }
+    var classes = [];
+    if (gap.x) classes.push("gap-x-".concat(gap.x));
+    if (gap.y) classes.push("gap-y-".concat(gap.y));
+    return classes.join(' ');
+  };
+  return require$$1.jsx("div", {
+    className: cn$f('grid', getGridCols(), getGap(), className),
+    children: children
+  });
+}
+function FlexContainer(_ref6) {
+  var children = _ref6.children,
+    _ref6$direction = _ref6.direction,
+    direction = _ref6$direction === void 0 ? 'row' : _ref6$direction,
+    _ref6$wrap = _ref6.wrap,
+    wrap = _ref6$wrap === void 0 ? 'nowrap' : _ref6$wrap,
+    _ref6$align = _ref6.align,
+    align = _ref6$align === void 0 ? 'start' : _ref6$align,
+    _ref6$justify = _ref6.justify,
+    justify = _ref6$justify === void 0 ? 'start' : _ref6$justify,
+    _ref6$gap = _ref6.gap,
+    gap = _ref6$gap === void 0 ? 0 : _ref6$gap,
+    className = _ref6.className;
+  var directionClasses = {
+    'row': 'flex-row',
+    'row-reverse': 'flex-row-reverse',
+    'col': 'flex-col',
+    'col-reverse': 'flex-col-reverse'
+  };
+  var wrapClasses = {
+    'wrap': 'flex-wrap',
+    'wrap-reverse': 'flex-wrap-reverse',
+    'nowrap': 'flex-nowrap'
+  };
+  var alignClasses = {
+    'start': 'items-start',
+    'end': 'items-end',
+    'center': 'items-center',
+    'baseline': 'items-baseline',
+    'stretch': 'items-stretch'
+  };
+  var justifyClasses = {
+    'start': 'justify-start',
+    'end': 'justify-end',
+    'center': 'justify-center',
+    'between': 'justify-between',
+    'around': 'justify-around',
+    'evenly': 'justify-evenly'
+  };
+  return require$$1.jsx("div", {
+    className: cn$f('flex', directionClasses[direction], wrapClasses[wrap], alignClasses[align], justifyClasses[justify], gap > 0 && "gap-".concat(gap), className),
+    children: children
+  });
+}
+function Stack(_ref7) {
+  var children = _ref7.children,
+    _ref7$spacing = _ref7.spacing,
+    spacing = _ref7$spacing === void 0 ? 4 : _ref7$spacing,
+    divider = _ref7.divider,
+    className = _ref7.className;
+  var childrenArray = React.Children.toArray(children);
+  return require$$1.jsx("div", {
+    className: cn$f("space-y-".concat(spacing), className),
+    children: childrenArray.map(function (child, index) {
+      return require$$1.jsxs(React.Fragment, {
+        children: [child, divider && index < childrenArray.length - 1 && require$$1.jsx("div", {
+          className: "flex justify-center",
+          children: divider
+        })]
+      }, index);
+    })
+  });
+}
+function HStack(_ref8) {
+  var children = _ref8.children,
+    _ref8$spacing = _ref8.spacing,
+    spacing = _ref8$spacing === void 0 ? 4 : _ref8$spacing,
+    divider = _ref8.divider,
+    _ref8$align = _ref8.align,
+    align = _ref8$align === void 0 ? 'center' : _ref8$align,
+    className = _ref8.className;
+  var childrenArray = React.Children.toArray(children);
+  var alignClasses = {
+    'start': 'items-start',
+    'end': 'items-end',
+    'center': 'items-center',
+    'baseline': 'items-baseline',
+    'stretch': 'items-stretch'
+  };
+  return require$$1.jsx("div", {
+    className: cn$f('flex', alignClasses[align], "gap-".concat(spacing), className),
+    children: childrenArray.map(function (child, index) {
+      return require$$1.jsxs(React.Fragment, {
+        children: [child, divider && index < childrenArray.length - 1 && require$$1.jsx("div", {
+          className: "flex items-center",
+          children: divider
+        })]
+      }, index);
+    })
+  });
+}
+
+function MetricCard(_ref) {
+  var title = _ref.title,
+    value = _ref.value,
+    description = _ref.description,
+    icon = _ref.icon,
+    change = _ref.change,
+    _ref$showTrendIcon = _ref.showTrendIcon,
+    showTrendIcon = _ref$showTrendIcon === void 0 ? false : _ref$showTrendIcon,
+    centerY = _ref.centerY,
+    className = _ref.className;
+  var shouldCenterY = centerY !== null && centerY !== void 0 ? centerY : false;
+  var showTrend = (change === null || change === void 0 ? void 0 : change.value) != null && change.value !== '';
+  var showIcon = showTrendIcon && showTrend;
+  return require$$1.jsx(Card, {
+    className: clsx('flex-1 flex flex-col gap-2 rounded-md border border-mw-neutral-200 bg-white dark:bg-mw-neutral-900 dark:border-mw-neutral-700 p-4 min-w-0', className),
+    children: require$$1.jsxs(FlexContainer, {
+      direction: icon ? 'row' : 'col',
+      align: icon ? 'center' : undefined,
+      gap: 3,
+      className: clsx(shouldCenterY && 'h-full justify-center'),
+      children: [icon && require$$1.jsx("div", {
+        className: "shrink-0",
+        children: icon
+      }), require$$1.jsxs(FlexContainer, {
+        direction: "col",
+        gap: 2,
+        children: [require$$1.jsx("p", {
+          className: "text-sm font-normal text-mw-neutral-500 dark:text-mw-neutral-400",
+          children: title
+        }), require$$1.jsxs(FlexContainer, {
+          direction: "col",
+          gap: 1,
+          children: [require$$1.jsx("p", {
+            className: "text-lg font-semibold text-mw-primary-600 dark:text-mw-primary-400",
+            children: value
+          }), description && require$$1.jsx("p", {
+            className: "text-xs font-normal text-mw-neutral-400 dark:text-mw-neutral-500",
+            children: description
+          }), showTrend && change && require$$1.jsxs(FlexContainer, {
+            direction: "row",
+            align: "center",
+            gap: 1,
+            children: [showIcon && change.isPositive && require$$1.jsx(TrendingUp, {
+              className: "w-4 h-4 text-success-600 flex-shrink-0"
+            }), showIcon && !change.isPositive && require$$1.jsx(TrendingDown, {
+              className: "w-4 h-4 text-error-500 flex-shrink-0"
+            }), require$$1.jsx("p", {
+              className: clsx('text-xs font-normal', change.isPositive ? 'text-success-600 dark:text-success-400' : 'text-error-500 dark:text-error-400'),
+              children: change.value
+            })]
+          })]
+        })]
+      })]
+    })
+  });
+}
+
+var sizeConfig = {
+  small: {
+    track: 'h-1.5',
+    fill: 'h-1.5'
+  },
+  medium: {
+    track: 'h-2',
+    fill: 'h-2'
+  }
+};
+var colorConfig = {
+  primary: {
+    fill: 'bg-mw-primary-600',
+    disabled: 'bg-mw-neutral-200'
+  },
+  success: {
+    fill: 'bg-success-500',
+    disabled: 'bg-mw-neutral-200'
+  },
+  danger: {
+    fill: 'bg-error-500',
+    disabled: 'bg-mw-neutral-200'
+  },
+  warning: {
+    fill: 'bg-warning-500',
+    disabled: 'bg-mw-neutral-200'
+  },
+  neutral: {
+    fill: 'bg-mw-neutral-500',
+    disabled: 'bg-mw-neutral-200'
+  }
+};
+var ProgressBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var value = _ref.value,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'primary' : _ref$color,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$showLabel = _ref.showLabel,
+    showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
+    className = _ref.className,
+    ariaLabel = _ref.ariaLabel;
+  var clamped = Math.min(Math.max(value, 0), 100);
+  var _sizeConfig$size = sizeConfig[size],
+    track = _sizeConfig$size.track,
+    fill = _sizeConfig$size.fill;
+  var _colorConfig$color = colorConfig[color],
+    fillColor = _colorConfig$color.fill,
+    disabledColor = _colorConfig$color.disabled;
+  return require$$1.jsxs("div", {
+    ref: ref,
+    className: clsx('flex items-center gap-2 w-full', disabled && 'opacity-50', className),
+    role: "progressbar",
+    "aria-valuenow": clamped,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Progress: ".concat(clamped, "%"),
+    children: [require$$1.jsx("div", {
+      className: "flex-1 min-w-0",
+      children: require$$1.jsx("div", {
+        className: clsx('w-full rounded-full border border-mw-neutral-200 dark:border-mw-neutral-700', track, 'bg-mw-neutral-100 dark:bg-mw-neutral-800'),
+        children: require$$1.jsx("div", {
+          className: clsx('rounded-full transition-all duration-300 ease-in-out', fill, disabled ? disabledColor : fillColor),
+          style: {
+            width: "".concat(clamped, "%")
+          }
+        })
+      })
+    }), showLabel && require$$1.jsxs("span", {
+      className: "shrink-0 text-sm font-normal text-mw-neutral-500 dark:text-mw-neutral-400 tabular-nums w-10 text-right",
+      children: [Math.round(clamped), "%"]
+    })]
+  });
+});
+ProgressBar.displayName = 'ProgressBar';
+
 var badgeVariants = {
   "default": 'bg-mw-primary-500 text-white dark:bg-mw-primary-600 dark:text-white',
   primary: 'bg-mw-primary-100 text-mw-primary-500 dark:bg-mw-primary-900/20 dark:text-mw-primary-300',
@@ -41308,7 +41642,7 @@ var ModalFooter = function ModalFooter(_ref4) {
   });
 };
 
-function cn$f() {
+function cn$e() {
   for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
     classes[_key] = arguments[_key];
   }
@@ -41473,7 +41807,7 @@ function AdvancedTableHeaderCell(_ref) {
     };
   }, [isResizing, column.id, column.minWidth, onResize]);
   return require$$1.jsx("th", {
-    className: cn$f('bg-mw-neutral-50 dark:bg-mw-neutral-800 border-b border-mw-neutral-200 dark:border-mw-neutral-700 relative', densityClasses[density], column.align === 'center' && 'text-center', column.align === 'right' && 'text-right', column.sticky === 'left' && 'sticky left-0 z-20', column.sticky === 'right' && 'sticky right-0 z-20', column.pinned && 'bg-mw-primary-50 dark:bg-mw-primary-950/20'),
+    className: cn$e('bg-mw-neutral-50 dark:bg-mw-neutral-800 border-b border-mw-neutral-200 dark:border-mw-neutral-700 relative', densityClasses[density], column.align === 'center' && 'text-center', column.align === 'right' && 'text-right', column.sticky === 'left' && 'sticky left-0 z-20', column.sticky === 'right' && 'sticky right-0 z-20', column.pinned && 'bg-mw-primary-50 dark:bg-mw-primary-950/20'),
     style: {
       width: column.width,
       minWidth: column.minWidth,
@@ -41484,7 +41818,7 @@ function AdvancedTableHeaderCell(_ref) {
       children: [require$$1.jsxs("div", {
         className: "flex items-center space-x-2 min-w-0 flex-1",
         children: [require$$1.jsx("span", {
-          className: cn$f('text-xs font-medium text-mw-neutral-900 dark:text-white uppercase tracking-wider truncate', column.sortable && 'cursor-pointer hover:text-mw-primary-600 dark:hover:text-mw-primary-400 select-none'),
+          className: cn$e('text-xs font-medium text-mw-neutral-900 dark:text-white uppercase tracking-wider truncate', column.sortable && 'cursor-pointer hover:text-mw-primary-600 dark:hover:text-mw-primary-400 select-none'),
           onClick: handleSort,
           title: typeof column.header === 'string' ? column.header : column.id,
           children: column.header
@@ -41680,7 +42014,7 @@ function AdvancedTableCell(_ref2) {
     }
   };
   return require$$1.jsx("td", {
-    className: cn$f('text-sm text-mw-neutral-900 dark:text-white border-r border-mw-neutral-200 dark:border-mw-neutral-700 last:border-r-0', densityClasses[density], column.align === 'center' && 'text-center', column.align === 'right' && 'text-right', column.sticky === 'left' && 'sticky left-0 z-10 bg-white dark:bg-mw-neutral-900', column.sticky === 'right' && 'sticky right-0 z-10 bg-white dark:bg-mw-neutral-900', onClick && 'cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800'),
+    className: cn$e('text-sm text-mw-neutral-900 dark:text-white border-r border-mw-neutral-200 dark:border-mw-neutral-700 last:border-r-0', densityClasses[density], column.align === 'center' && 'text-center', column.align === 'right' && 'text-right', column.sticky === 'left' && 'sticky left-0 z-10 bg-white dark:bg-mw-neutral-900', column.sticky === 'right' && 'sticky right-0 z-10 bg-white dark:bg-mw-neutral-900', onClick && 'cursor-pointer hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800'),
     onClick: onClick,
     children: renderCellContent()
   });
@@ -42205,7 +42539,7 @@ function AdvancedTable(_ref3) {
   var hasActions = rowActions && rowActions.length > 0;
   return require$$1.jsxs("div", {
     ref: tableRef,
-    className: cn$f('bg-white dark:bg-mw-neutral-900 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg overflow-hidden', isFullscreen && 'fixed inset-0 z-50 rounded-none', className),
+    className: cn$e('bg-white dark:bg-mw-neutral-900 border border-mw-neutral-200 dark:border-mw-neutral-700 rounded-lg overflow-hidden', isFullscreen && 'fixed inset-0 z-50 rounded-none', className),
     children: [renderToolbar(), require$$1.jsx(Modal, {
       isOpen: showColumnSettings,
       onClose: function onClose() {
@@ -42280,17 +42614,17 @@ function AdvancedTable(_ref3) {
         })]
       })
     }), "      ", require$$1.jsx("div", {
-      className: cn$f('overflow-auto', stickyHeader && 'max-h-96'),
+      className: cn$e('overflow-auto', stickyHeader && 'max-h-96'),
       style: {
         maxHeight: maxHeight
       },
       children: require$$1.jsxs("table", {
         className: "w-full",
         children: [require$$1.jsx("thead", {
-          className: cn$f(stickyHeader && 'sticky top-0 z-10'),
+          className: cn$e(stickyHeader && 'sticky top-0 z-10'),
           children: require$$1.jsxs("tr", {
             children: [hasSelection && require$$1.jsx("th", {
-              className: cn$f('w-12 bg-mw-neutral-50 dark:bg-mw-neutral-800 border-b border-mw-neutral-200 dark:border-mw-neutral-700', internalState.density === 'compact' ? 'px-2 py-1' : internalState.density === 'normal' ? 'px-4 py-2' : 'px-6 py-3'),
+              className: cn$e('w-12 bg-mw-neutral-50 dark:bg-mw-neutral-800 border-b border-mw-neutral-200 dark:border-mw-neutral-700', internalState.density === 'compact' ? 'px-2 py-1' : internalState.density === 'normal' ? 'px-4 py-2' : 'px-6 py-3'),
               children: selection.mode === 'multiple' && require$$1.jsx("input", {
                 type: "checkbox",
                 checked: paginatedData.length > 0 && paginatedData.every(function (row, index) {
@@ -42309,7 +42643,7 @@ function AdvancedTable(_ref3) {
                 density: internalState.density
               }, column.id);
             }), hasActions && require$$1.jsx("th", {
-              className: cn$f('w-16 bg-mw-neutral-50 dark:bg-mw-neutral-800 border-b border-mw-neutral-200 dark:border-mw-neutral-700', internalState.density === 'compact' ? 'px-2 py-1' : internalState.density === 'normal' ? 'px-4 py-2' : 'px-6 py-3'),
+              className: cn$e('w-16 bg-mw-neutral-50 dark:bg-mw-neutral-800 border-b border-mw-neutral-200 dark:border-mw-neutral-700', internalState.density === 'compact' ? 'px-2 py-1' : internalState.density === 'normal' ? 'px-4 py-2' : 'px-6 py-3'),
               children: require$$1.jsx("span", {
                 className: "sr-only",
                 children: "Actions"
@@ -42355,7 +42689,7 @@ function AdvancedTable(_ref3) {
             var isSelected = selection === null || selection === void 0 ? void 0 : selection.selectedRows.has(rowId);
             return require$$1.jsxs(React.Fragment, {
               children: [require$$1.jsxs("tr", {
-                className: cn$f('transition-colors', hoverable && 'hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800/50', striped && index % 2 === 1 && 'bg-mw-neutral-25 dark:bg-mw-neutral-950/50', isSelected && 'bg-mw-primary-50 dark:bg-mw-primary-950/20', onRowClick && 'cursor-pointer', internalState.density === 'compact' ? 'h-10' : internalState.density === 'normal' ? 'h-12' : 'h-16'),
+                className: cn$e('transition-colors', hoverable && 'hover:bg-mw-neutral-50 dark:hover:bg-mw-neutral-800/50', striped && index % 2 === 1 && 'bg-mw-neutral-25 dark:bg-mw-neutral-950/50', isSelected && 'bg-mw-primary-50 dark:bg-mw-primary-950/20', onRowClick && 'cursor-pointer', internalState.density === 'compact' ? 'h-10' : internalState.density === 'normal' ? 'h-12' : 'h-16'),
                 onClick: function onClick() {
                   return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, index);
                 },
@@ -42366,7 +42700,7 @@ function AdvancedTable(_ref3) {
                   return onRowHover === null || onRowHover === void 0 ? void 0 : onRowHover(row, index);
                 },
                 children: [hasSelection && require$$1.jsx("td", {
-                  className: cn$f(internalState.density === 'compact' ? 'px-2 py-1' : internalState.density === 'normal' ? 'px-4 py-2' : 'px-6 py-3'),
+                  className: cn$e(internalState.density === 'compact' ? 'px-2 py-1' : internalState.density === 'normal' ? 'px-4 py-2' : 'px-6 py-3'),
                   children: require$$1.jsx("input", {
                     type: "checkbox",
                     checked: isSelected,
@@ -42387,7 +42721,7 @@ function AdvancedTable(_ref3) {
                     }
                   }, column.id);
                 }), hasActions && require$$1.jsx("td", {
-                  className: cn$f('text-center', internalState.density === 'compact' ? 'px-2 py-1' : internalState.density === 'normal' ? 'px-4 py-2' : 'px-6 py-3'),
+                  className: cn$e('text-center', internalState.density === 'compact' ? 'px-2 py-1' : internalState.density === 'normal' ? 'px-4 py-2' : 'px-6 py-3'),
                   children: require$$1.jsxs("div", {
                     className: "flex items-center justify-center space-x-1",
                     children: [rowActions.slice(0, 3).map(function (action, actionIndex) {
@@ -42459,7 +42793,7 @@ function AdvancedTable(_ref3) {
           className: "bg-mw-neutral-50 dark:bg-mw-neutral-800 border-t border-mw-neutral-200 dark:border-mw-neutral-700",
           children: require$$1.jsxs("tr", {
             children: [hasSelection && require$$1.jsx("td", {
-              className: cn$f(internalState.density === 'compact' ? 'px-2 py-1' : internalState.density === 'normal' ? 'px-4 py-2' : 'px-6 py-3')
+              className: cn$e(internalState.density === 'compact' ? 'px-2 py-1' : internalState.density === 'normal' ? 'px-4 py-2' : 'px-6 py-3')
             }), visibleColumns.map(function (column) {
               var columnData = processedData.map(function (row) {
                 return column.accessorFn ? column.accessorFn(row) : column.accessorKey ? row[column.accessorKey] : row;
@@ -42471,11 +42805,11 @@ function AdvancedTable(_ref3) {
                 footerContent = column.footer;
               }
               return require$$1.jsx("td", {
-                className: cn$f('text-sm font-medium text-mw-neutral-900 dark:text-white', internalState.density === 'compact' ? 'px-2 py-1' : internalState.density === 'normal' ? 'px-4 py-2' : 'px-6 py-3', column.align === 'center' && 'text-center', column.align === 'right' && 'text-right'),
+                className: cn$e('text-sm font-medium text-mw-neutral-900 dark:text-white', internalState.density === 'compact' ? 'px-2 py-1' : internalState.density === 'normal' ? 'px-4 py-2' : 'px-6 py-3', column.align === 'center' && 'text-center', column.align === 'right' && 'text-right'),
                 children: footerContent
               }, column.id);
             }), hasActions && require$$1.jsx("td", {
-              className: cn$f(internalState.density === 'compact' ? 'px-2 py-1' : internalState.density === 'normal' ? 'px-4 py-2' : 'px-6 py-3')
+              className: cn$e(internalState.density === 'compact' ? 'px-2 py-1' : internalState.density === 'normal' ? 'px-4 py-2' : 'px-6 py-3')
             })]
           })
         })]
@@ -42730,7 +43064,7 @@ function CollapsibleCode(_ref) {
   });
 }
 
-function cn$e() {
+function cn$d() {
   for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
     classes[_key] = arguments[_key];
   }
@@ -42762,7 +43096,7 @@ function List(_ref) {
     className = _ref.className;
   var Component = variant === 'ordered' ? 'ol' : 'ul';
   return require$$1.jsx(Component, {
-    className: cn$e(listVariants[variant], listSizes[size], listSpacing[spacing], variant !== 'none' && 'pl-5', 'text-mw-neutral-700 dark:text-mw-neutral-300', className),
+    className: cn$d(listVariants[variant], listSizes[size], listSpacing[spacing], variant !== 'none' && 'pl-5', 'text-mw-neutral-700 dark:text-mw-neutral-300', className),
     children: children
   });
 }
@@ -42772,7 +43106,7 @@ function ListItem(_ref2) {
     startContent = _ref2.startContent,
     endContent = _ref2.endContent;
   return require$$1.jsxs("li", {
-    className: cn$e('flex items-start', className),
+    className: cn$d('flex items-start', className),
     children: [startContent && require$$1.jsx("div", {
       className: "flex-shrink-0 mr-2",
       children: startContent
@@ -42791,14 +43125,14 @@ function DescriptionList(_ref3) {
     layout = _ref3$layout === void 0 ? 'vertical' : _ref3$layout,
     className = _ref3.className;
   return require$$1.jsx("dl", {
-    className: cn$e(layout === 'horizontal' ? 'grid grid-cols-3 gap-x-4 gap-y-2' : 'space-y-3', className),
+    className: cn$d(layout === 'horizontal' ? 'grid grid-cols-3 gap-x-4 gap-y-2' : 'space-y-3', className),
     children: items.map(function (item, index) {
       return require$$1.jsxs(React.Fragment, {
         children: [require$$1.jsx("dt", {
-          className: cn$e('font-medium text-mw-neutral-900 dark:text-white', layout === 'horizontal' ? 'col-span-1' : 'mb-1'),
+          className: cn$d('font-medium text-mw-neutral-900 dark:text-white', layout === 'horizontal' ? 'col-span-1' : 'mb-1'),
           children: item.term
         }), require$$1.jsx("dd", {
-          className: cn$e('text-mw-neutral-600 dark:text-mw-neutral-300', layout === 'horizontal' ? 'col-span-2' : ''),
+          className: cn$d('text-mw-neutral-600 dark:text-mw-neutral-300', layout === 'horizontal' ? 'col-span-2' : ''),
           children: item.description
         })]
       }, index);
@@ -42809,12 +43143,12 @@ function NavigationList(_ref4) {
   var items = _ref4.items,
     className = _ref4.className;
   return require$$1.jsx("ul", {
-    className: cn$e('space-y-1', className),
+    className: cn$d('space-y-1', className),
     children: items.map(function (item, index) {
       return require$$1.jsx("li", {
         children: item.href ? require$$1.jsxs("a", {
           href: item.href,
-          className: cn$e('flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors', item.active ? 'bg-mw-primary-100 dark:bg-mw-primary-900/20 text-mw-primary-700 dark:text-mw-primary-300' : 'text-mw-neutral-600 dark:text-mw-neutral-300 hover:bg-mw-neutral-100 dark:hover:bg-mw-neutral-800 hover:text-mw-neutral-900 dark:hover:text-white', item.disabled && 'opacity-50 cursor-not-allowed pointer-events-none'),
+          className: cn$d('flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors', item.active ? 'bg-mw-primary-100 dark:bg-mw-primary-900/20 text-mw-primary-700 dark:text-mw-primary-300' : 'text-mw-neutral-600 dark:text-mw-neutral-300 hover:bg-mw-neutral-100 dark:hover:bg-mw-neutral-800 hover:text-mw-neutral-900 dark:hover:text-white', item.disabled && 'opacity-50 cursor-not-allowed pointer-events-none'),
           children: [item.icon && require$$1.jsx("span", {
             className: "mr-2",
             children: item.icon
@@ -42822,7 +43156,7 @@ function NavigationList(_ref4) {
         }) : require$$1.jsxs("button", {
           onClick: item.onClick,
           disabled: item.disabled,
-          className: cn$e('w-full flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors text-left', item.active ? 'bg-mw-primary-100 dark:bg-mw-primary-900/20 text-mw-primary-700 dark:text-mw-primary-300' : 'text-mw-neutral-600 dark:text-mw-neutral-300 hover:bg-mw-neutral-100 dark:hover:bg-mw-neutral-800 hover:text-mw-neutral-900 dark:hover:text-white', item.disabled && 'opacity-50 cursor-not-allowed'),
+          className: cn$d('w-full flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors text-left', item.active ? 'bg-mw-primary-100 dark:bg-mw-primary-900/20 text-mw-primary-700 dark:text-mw-primary-300' : 'text-mw-neutral-600 dark:text-mw-neutral-300 hover:bg-mw-neutral-100 dark:hover:bg-mw-neutral-800 hover:text-mw-neutral-900 dark:hover:text-white', item.disabled && 'opacity-50 cursor-not-allowed'),
           children: [item.icon && require$$1.jsx("span", {
             className: "mr-2",
             children: item.icon
@@ -42833,7 +43167,7 @@ function NavigationList(_ref4) {
   });
 }
 
-function cn$d() {
+function cn$c() {
   for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
     classes[_key] = arguments[_key];
   }
@@ -42849,7 +43183,7 @@ function CarouselSlide(_ref) {
   var children = _ref.children,
     className = _ref.className;
   return require$$1.jsx("div", {
-    className: cn$d('flex-shrink-0 w-full', className),
+    className: cn$c('flex-shrink-0 w-full', className),
     children: children
   });
 }
@@ -42892,7 +43226,7 @@ function CarouselControls(_ref2) {
           onClick: function onClick() {
             return onSlideSelect(index);
           },
-          className: cn$d('w-2 h-2 rounded-full transition-all duration-200', index === currentSlide ? 'bg-white dark:bg-mw-neutral-200 w-6' : 'bg-white/50 dark:bg-mw-neutral-200/50 hover:bg-white/75 dark:hover:bg-mw-neutral-200/75'),
+          className: cn$c('w-2 h-2 rounded-full transition-all duration-200', index === currentSlide ? 'bg-white dark:bg-mw-neutral-200 w-6' : 'bg-white/50 dark:bg-mw-neutral-200/50 hover:bg-white/75 dark:hover:bg-mw-neutral-200/75'),
           "aria-label": "Go to slide ".concat(index + 1)
         }, index);
       }), onToggleAutoplay && require$$1.jsx("button", {
@@ -43033,7 +43367,7 @@ function Carousel(_ref3) {
   var translateX = -(currentSlide * (100 / slidesToShow));
   return require$$1.jsxs("div", {
     ref: carouselRef,
-    className: cn$d('relative overflow-hidden rounded-lg focus:outline-none', aspectRatios$1[aspectRatio], className),
+    className: cn$c('relative overflow-hidden rounded-lg focus:outline-none', aspectRatios$1[aspectRatio], className),
     tabIndex: 0,
     onMouseEnter: function onMouseEnter() {
       return setIsPaused(true);
@@ -43088,7 +43422,7 @@ function ImageCarousel(_a) {
           children: [require$$1.jsx("img", {
             src: image.src,
             alt: image.alt,
-            className: cn$d('w-full h-full', objectFit === 'cover' ? 'object-cover' : 'object-contain')
+            className: cn$c('w-full h-full', objectFit === 'cover' ? 'object-cover' : 'object-contain')
           }), image.caption && require$$1.jsx("div", {
             className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4",
             children: require$$1.jsx("p", {
@@ -43102,203 +43436,6 @@ function ImageCarousel(_a) {
   }));
 }
 
-function cn$c() {
-  for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
-    classes[_key] = arguments[_key];
-  }
-  return classes.filter(Boolean).join(' ');
-}
-var containerSizes = {
-  xs: 'max-w-xs',
-  // 320px
-  sm: 'max-w-sm',
-  // 384px 
-  md: 'max-w-md',
-  // 448px
-  lg: 'max-w-lg',
-  // 512px
-  xl: 'max-w-xl',
-  // 576px
-  '2xl': 'max-w-2xl',
-  // 672px
-  full: 'max-w-full'
-};
-var containerPadding = {
-  none: '',
-  sm: 'px-4',
-  md: 'px-6',
-  lg: 'px-8',
-  xl: 'px-12'
-};
-function Container(_ref) {
-  var children = _ref.children,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'full' : _ref$size,
-    _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? 'md' : _ref$padding,
-    _ref$centered = _ref.centered,
-    centered = _ref$centered === void 0 ? true : _ref$centered,
-    className = _ref.className,
-    _ref$as = _ref.as,
-    Component = _ref$as === void 0 ? 'div' : _ref$as;
-  return require$$1.jsx(Component, {
-    className: cn$c(containerSizes[size], containerPadding[padding], centered && 'mx-auto', className),
-    children: children
-  });
-}
-function ResponsiveContainer(_ref2) {
-  var children = _ref2.children,
-    _ref2$breakpoints = _ref2.breakpoints,
-    breakpoints = _ref2$breakpoints === void 0 ? {
-      sm: 'sm',
-      md: 'md',
-      lg: 'lg',
-      xl: 'xl',
-      '2xl': '2xl'
-    } : _ref2$breakpoints,
-    _ref2$padding = _ref2.padding,
-    padding = _ref2$padding === void 0 ? 'md' : _ref2$padding,
-    _ref2$centered = _ref2.centered,
-    centered = _ref2$centered === void 0 ? true : _ref2$centered,
-    className = _ref2.className,
-    _ref2$as = _ref2.as,
-    Component = _ref2$as === void 0 ? 'div' : _ref2$as;
-  var responsiveClasses = Object.entries(breakpoints).map(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-      breakpoint = _ref4[0],
-      size = _ref4[1];
-    if (breakpoint === 'sm') return containerSizes[size];
-    return "".concat(breakpoint, ":").concat(containerSizes[size]);
-  }).join(' ');
-  return require$$1.jsx(Component, {
-    className: cn$c(responsiveClasses, containerPadding[padding], centered && 'mx-auto', className),
-    children: children
-  });
-}
-function GridContainer(_ref5) {
-  var children = _ref5.children,
-    _ref5$cols = _ref5.cols,
-    cols = _ref5$cols === void 0 ? 1 : _ref5$cols,
-    _ref5$gap = _ref5.gap,
-    gap = _ref5$gap === void 0 ? 4 : _ref5$gap,
-    className = _ref5.className;
-  var getGridCols = function getGridCols() {
-    if (typeof cols === 'number') {
-      return "grid-cols-".concat(cols);
-    }
-    var classes = [];
-    if (cols.sm) classes.push("grid-cols-".concat(cols.sm));
-    if (cols.md) classes.push("md:grid-cols-".concat(cols.md));
-    if (cols.lg) classes.push("lg:grid-cols-".concat(cols.lg));
-    if (cols.xl) classes.push("xl:grid-cols-".concat(cols.xl));
-    return classes.join(' ');
-  };
-  var getGap = function getGap() {
-    if (typeof gap === 'number') {
-      return "gap-".concat(gap);
-    }
-    var classes = [];
-    if (gap.x) classes.push("gap-x-".concat(gap.x));
-    if (gap.y) classes.push("gap-y-".concat(gap.y));
-    return classes.join(' ');
-  };
-  return require$$1.jsx("div", {
-    className: cn$c('grid', getGridCols(), getGap(), className),
-    children: children
-  });
-}
-function FlexContainer(_ref6) {
-  var children = _ref6.children,
-    _ref6$direction = _ref6.direction,
-    direction = _ref6$direction === void 0 ? 'row' : _ref6$direction,
-    _ref6$wrap = _ref6.wrap,
-    wrap = _ref6$wrap === void 0 ? 'nowrap' : _ref6$wrap,
-    _ref6$align = _ref6.align,
-    align = _ref6$align === void 0 ? 'start' : _ref6$align,
-    _ref6$justify = _ref6.justify,
-    justify = _ref6$justify === void 0 ? 'start' : _ref6$justify,
-    _ref6$gap = _ref6.gap,
-    gap = _ref6$gap === void 0 ? 0 : _ref6$gap,
-    className = _ref6.className;
-  var directionClasses = {
-    'row': 'flex-row',
-    'row-reverse': 'flex-row-reverse',
-    'col': 'flex-col',
-    'col-reverse': 'flex-col-reverse'
-  };
-  var wrapClasses = {
-    'wrap': 'flex-wrap',
-    'wrap-reverse': 'flex-wrap-reverse',
-    'nowrap': 'flex-nowrap'
-  };
-  var alignClasses = {
-    'start': 'items-start',
-    'end': 'items-end',
-    'center': 'items-center',
-    'baseline': 'items-baseline',
-    'stretch': 'items-stretch'
-  };
-  var justifyClasses = {
-    'start': 'justify-start',
-    'end': 'justify-end',
-    'center': 'justify-center',
-    'between': 'justify-between',
-    'around': 'justify-around',
-    'evenly': 'justify-evenly'
-  };
-  return require$$1.jsx("div", {
-    className: cn$c('flex', directionClasses[direction], wrapClasses[wrap], alignClasses[align], justifyClasses[justify], gap > 0 && "gap-".concat(gap), className),
-    children: children
-  });
-}
-function Stack(_ref7) {
-  var children = _ref7.children,
-    _ref7$spacing = _ref7.spacing,
-    spacing = _ref7$spacing === void 0 ? 4 : _ref7$spacing,
-    divider = _ref7.divider,
-    className = _ref7.className;
-  var childrenArray = React.Children.toArray(children);
-  return require$$1.jsx("div", {
-    className: cn$c("space-y-".concat(spacing), className),
-    children: childrenArray.map(function (child, index) {
-      return require$$1.jsxs(React.Fragment, {
-        children: [child, divider && index < childrenArray.length - 1 && require$$1.jsx("div", {
-          className: "flex justify-center",
-          children: divider
-        })]
-      }, index);
-    })
-  });
-}
-function HStack(_ref8) {
-  var children = _ref8.children,
-    _ref8$spacing = _ref8.spacing,
-    spacing = _ref8$spacing === void 0 ? 4 : _ref8$spacing,
-    divider = _ref8.divider,
-    _ref8$align = _ref8.align,
-    align = _ref8$align === void 0 ? 'center' : _ref8$align,
-    className = _ref8.className;
-  var childrenArray = React.Children.toArray(children);
-  var alignClasses = {
-    'start': 'items-start',
-    'end': 'items-end',
-    'center': 'items-center',
-    'baseline': 'items-baseline',
-    'stretch': 'items-stretch'
-  };
-  return require$$1.jsx("div", {
-    className: cn$c('flex', alignClasses[align], "gap-".concat(spacing), className),
-    children: childrenArray.map(function (child, index) {
-      return require$$1.jsxs(React.Fragment, {
-        children: [child, divider && index < childrenArray.length - 1 && require$$1.jsx("div", {
-          className: "flex items-center",
-          children: divider
-        })]
-      }, index);
-    })
-  });
-}
-
 var TabsContext = /*#__PURE__*/React.createContext(null);
 function Tabs(_ref) {
   var _ref$defaultValue = _ref.defaultValue,
@@ -57281,6 +57418,7 @@ exports.MenuItem = MenuItem;
 exports.MenuRadioGroup = MenuRadioGroup;
 exports.MenuRadioItem = MenuRadioItem;
 exports.MenuSeparator = MenuSeparator;
+exports.MetricCard = MetricCard;
 exports.MinusIcon = MinusIcon;
 exports.Modal = Modal;
 exports.ModalBody = ModalBody;
@@ -57308,6 +57446,7 @@ exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
 exports.ProcessFlowAnimation = ProcessFlowAnimation;
 exports.Progress = Progress;
+exports.ProgressBar = ProgressBar;
 exports.Radio = Radio$1;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;