ndcloud-storybook 1.2.0 → 1.2.2-beta.0

package/dist/index.cjs

@@ -1,30 +1,14 @@
 'use strict';
 
 var react = require('@emotion/react');
-var styled = require('@emotion/styled');
+var styled16 = require('@emotion/styled');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefault(styled);
+var styled16__default = /*#__PURE__*/_interopDefault(styled16);
 
 // src/atoms/Button/Button.tsx
-var spin = react.keyframes`
-  from { transform: rotate(0deg); }
-  to   { transform: rotate(360deg); }
-`;
-var Wrapper = styled__default.default.div`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  svg {
-    width: ${({ size = 20 }) => size}px;
-    height: ${({ size = 20 }) => size}px;
-    animation: ${spin} ${({ speed = "0.75s" }) => speed} linear infinite;
-    transform-origin: center;
-  }
-`;
 var Spinner = ({
   size = 20,
   speed = "0.75s",
@@ -53,6 +37,22 @@ var Spinner = ({
   }
 ) });
 var Spinner_default = Spinner;
+var spin = react.keyframes`
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+`;
+var Wrapper = styled16__default.default.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: ${({ size = 20 }) => size}px;
+    height: ${({ size = 20 }) => size}px;
+    animation: ${spin} ${({ speed = "0.75s" }) => speed} linear infinite;
+    transform-origin: center;
+  }
+`;
 
 // src/tokens/colors.ts
 var colors = {
@@ -61,6 +61,7 @@ var colors = {
     // Brand
     primaryGreen: "#7EE896",
     primaryPurple: "#6D65DA",
+    primaryBlue: "#55A3BD",
     // Palette
     darkBlue1: "#12131B",
     darkBlue2: "#2A2B33",
@@ -126,6 +127,27 @@ var typography = {
     relaxed: 1.75
   }
 };
+var FONT_SIZE_KEYS = {
+  xxs: "xxs",
+  xs: "xs",
+  s: "s",
+  m: "m",
+  base: "base",
+  lg: "lg",
+  xl: "xl",
+  "2xl": "2xl"
+};
+
+// src/utils/colorHelpers.ts
+function getOpacity(hexColor, opacity) {
+  const hex = hexColor.trim().replace(/^#/, "");
+  if (!/^[\da-fA-F]{6}$/.test(hex)) {
+    throw new Error(`Invalid hex color: ${hexColor}`);
+  }
+  const opacityFraction = Math.round(opacity / 100 * 255);
+  const alphaHex = opacityFraction.toString(16).padStart(2, "0");
+  return `#${hex}${alphaHex}`;
+}
 var Variant = /* @__PURE__ */ ((Variant2) => {
   Variant2["Primary"] = "primary";
   Variant2["Secondary"] = "secondary";
@@ -143,11 +165,35 @@ var VARIANTS = {
   },
   outline: {
     background: colors.backgrounds.transparent,
-    border: "1px solid rgba(70, 70, 74, 0.10)",
-    color: "#0E1116D9"
+    border: `1px solid ${getOpacity(colors.baseColors.grey2, 10)}`,
+    color: getOpacity(colors.baseColors.darkBlue3, 85)
   }
 };
-var StyledButton = styled__default.default.button`
+var Button = ({
+  label,
+  icon,
+  loading,
+  disabled,
+  className,
+  variant = "primary",
+  selected,
+  ...rest
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  StyledButton,
+  {
+    variant,
+    disabled: disabled || loading,
+    selected,
+    className,
+    ...rest,
+    children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner_default, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx("span", { children: icon }),
+      label
+    ] })
+  }
+);
+var Button_default = Button;
+var StyledButton = styled16__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -177,46 +223,12 @@ var StyledButton = styled__default.default.button`
       pointer-events: ${disabled ? "none" : "auto"};
 
       &:focus-visible {
-        outline: 2px solid #0070f3;
+        outline: 2px solid ${colors.baseColors.primaryBlue};
         outline-offset: 2px;
       }
     `;
 }}
 `;
-var Button = ({
-  label,
-  icon,
-  loading,
-  disabled,
-  className,
-  ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  StyledButton,
-  {
-    label: "",
-    disabled: disabled || loading,
-    className,
-    ...rest,
-    children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner_default, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      icon && /* @__PURE__ */ jsxRuntime.jsx("span", { children: icon }),
-      label
-    ] })
-  }
-);
-var Button_default = Button;
-
-// src/utils/colorHelpers.ts
-function getOpacity(hexColor, opacity) {
-  const hex = hexColor.trim().replace(/^#/, "");
-  if (!/^[\da-fA-F]{6}$/.test(hex)) {
-    throw new Error(`Invalid hex color: ${hexColor}`);
-  }
-  const opacityFraction = Math.round(opacity / 100 * 255);
-  const alphaHex = opacityFraction.toString(16).padStart(2, "0");
-  return `#${hex}${alphaHex}`;
-}
-
-// src/atoms/shared/inputStyles.ts
 var defaultPadding = "9px 17px";
 var focusedPadding = "8px 16px";
 var baseInputStyles = react.css`
@@ -276,7 +288,7 @@ var Input = ({ className, error, warning, ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledInput, { className, error, warning, ...rest });
 };
 var Input_default = Input;
-var StyledInput = styled__default.default.input`
+var StyledInput = styled16__default.default.input`
   ${baseInputStyles}
 
   ${({ error }) => error && errorStyles}
@@ -290,7 +302,7 @@ var Textarea = ({ className, error, warning, ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledTextarea, { className, error, warning, ...rest });
 };
 var Textarea_default = Textarea;
-var StyledTextarea = styled__default.default.textarea`
+var StyledTextarea = styled16__default.default.textarea`
   ${baseInputStyles}
   resize: vertical;
   min-height: 80px;
@@ -318,7 +330,7 @@ var Tab = ({
   );
 };
 var Tab_default = Tab;
-var StyledTab = styled__default.default.div`
+var StyledTab = styled16__default.default.div`
   display: inline-block;
   padding: 8px 16px;
   user-select: none;
@@ -339,7 +351,7 @@ var StyledTab = styled__default.default.div`
     }
   `}
 `;
-var HelperText = styled__default.default.div`
+var HelperText = styled16__default.default.div`
   margin-top: 4px;
   font-size: ${typography.fontSize.xs}px;
   color: ${({ error, warning }) => {
@@ -348,6 +360,94 @@ var HelperText = styled__default.default.div`
   return colors.baseColors.grey3;
 }};
 `;
+var USER_ROLES = {
+  OWNER: "owner",
+  EDITOR: "editor",
+  VIEWER: "viewer",
+  AUDITOR: "auditor"
+};
+var USER_STATUS = {
+  INVITED: "invited"
+};
+var getBadgeColor = (role, status) => {
+  if (status?.toLowerCase() === USER_STATUS.INVITED) {
+    return colors.accents.warning;
+  }
+  const roleLower = role.toLowerCase();
+  switch (roleLower) {
+    case USER_ROLES.OWNER:
+      return colors.baseColors.primaryGreen;
+    case USER_ROLES.EDITOR:
+      return colors.baseColors.primaryBlue;
+    case USER_ROLES.VIEWER:
+    case USER_ROLES.AUDITOR:
+      return colors.baseColors.primaryPurple;
+    default:
+      return colors.baseColors.primaryGreen;
+  }
+};
+function GroupBadge({ role, status, children }) {
+  const badgeColor = getBadgeColor(role, status);
+  const displayText = status?.toLowerCase() === USER_STATUS.INVITED ? "Invited" : children;
+  return /* @__PURE__ */ jsxRuntime.jsx(Badge, { badgeColor, children: displayText });
+}
+var Badge = styled16__default.default.div`
+  display: inline-flex;
+  padding: 8px 28px;
+  border-radius: 100px;
+  background-color: ${({ badgeColor }) => getOpacity(badgeColor, 20)};
+  border: 1px solid ${({ badgeColor }) => badgeColor};
+  color: ${({ badgeColor }) => badgeColor};
+  font-size: ${FONT_SIZES.s}px;
+  font-weight: ${FONT_WEIGHTS.bold};
+  text-transform: capitalize;
+`;
+var Badge_default = GroupBadge;
+function UserAvatar({
+  initials,
+  badgeColor,
+  onClick,
+  size = 56
+}) {
+  if (!initials || !initials.trim()) {
+    return null;
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ProfileAvatar,
+      {
+        badgeColor,
+        size,
+        onClick,
+        children: initials
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ColourAvatar, { badgeColor, size, children: initials });
+}
+var UserAvatar_default = UserAvatar;
+var ColourAvatar = styled16__default.default.div`
+  width: ${({ size }) => typeof size === "number" ? `${size}px` : size === "large" ? "56px" : "40px"};
+  height: ${({ size }) => typeof size === "number" ? `${size}px` : size === "large" ? "56px" : "40px"};
+  border-radius: 50%;
+  background: ${({ badgeColor }) => badgeColor ? getOpacity(badgeColor, 20) : "linear-gradient(90deg, #6d65da 0.08%, #55a3bd 68.44%)"};
+  border: ${({ badgeColor }) => badgeColor ? `2px solid ${badgeColor}` : "none"};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${colors.baseColors.darkBlue1};
+  font-size: ${({ size }) => typeof size === "number" ? `${size * 0.325}px` : size === "large" ? `${FONT_SIZES.xs}px` : `${FONT_SIZES.s}px`};
+  font-weight: ${FONT_WEIGHTS.normal};
+  flex-shrink: 0;
+`;
+var ProfileAvatar = styled16__default.default(ColourAvatar)`
+  color: #fff;
+  background: ${colors.gradients.gradient1};
+  border: none;
+  border-radius: 999px;
+  line-height: 138%;
+  margin-bottom: 12px;
+`;
 var FormField = ({
   id,
   label,
@@ -385,7 +485,7 @@ var FormField = ({
     displayText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
   ] });
 };
-var FormFieldWrapper = styled__default.default.div`
+var FormFieldWrapper = styled16__default.default.div`
   display: flex;
   flex-direction: column;
   
@@ -433,7 +533,7 @@ var FormFieldTextarea = ({
     displayText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
   ] });
 };
-var FormFieldWrapper2 = styled__default.default.div`
+var FormFieldWrapper2 = styled16__default.default.div`
   display: flex;
   flex-direction: column;
   
@@ -444,19 +544,333 @@ var FormFieldWrapper2 = styled__default.default.div`
   }
 `;
 var FormFieldTextarea_default = FormFieldTextarea;
+var SearchContainer = styled16__default.default.div`
+  width: ${({ width }) => typeof width === "number" ? `${width}px` : width || "208px"};
+`;
+var InputWrapper = styled16__default.default.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+`;
+var IconWrapper = styled16__default.default.div`
+  position: absolute;
+  left: 17px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${colors.baseColors.grey3};
+  pointer-events: none;
+  z-index: 2;
+`;
+var StyledInput2 = styled16__default.default(Input_default)`
+  width: 100%;
+  padding-right: ${({ hasClearButton }) => hasClearButton ? "32px" : "17px"};
+  padding-left: ${({ hasIcon }) => hasIcon ? "44px" : "17px"};
+  font-size: ${({ fontSize = "s" }) => `${typography.fontSize[fontSize]}px`};
+  position: relative;
+  z-index: 1;
+
+  &:focus {
+    padding-left: ${({ hasIcon }) => hasIcon ? "43px" : "16px"};
+  }
+`;
+var ClearButton = styled16__default.default.button`
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${colors.baseColors.grey3};
+  transition: color 0.2s ease;
+  z-index: 3;
+
+  &:hover {
+    color: ${colors.baseColors.grey1};
+  }
+
+  &:focus {
+    outline: 2px solid ${colors.baseColors.primaryPurple};
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+`;
+var ClearIcon = styled16__default.default.svg`
+  width: 16px;
+  height: 16px;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+`;
+function SearchInput({
+  value,
+  onChange,
+  placeholder = "Search...",
+  showClearButton = false,
+  icon,
+  width = "208px",
+  fontSize = "s"
+}) {
+  const handleChange = (e) => {
+    onChange(e.target.value);
+  };
+  const handleClear = () => {
+    onChange("");
+  };
+  const hasClearButton = showClearButton && !!value;
+  const hasIcon = !!icon;
+  return /* @__PURE__ */ jsxRuntime.jsx(SearchContainer, { width, children: /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper, { children: [
+    hasIcon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      StyledInput2,
+      {
+        type: "text",
+        placeholder,
+        value,
+        onChange: handleChange,
+        autoComplete: "off",
+        hasClearButton,
+        hasIcon,
+        fontSize
+      }
+    ),
+    hasClearButton && /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { onClick: handleClear, type: "button", "aria-label": "Clear search", children: /* @__PURE__ */ jsxRuntime.jsxs(ClearIcon, { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+    ] }) })
+  ] }) });
+}
+var SearchInput_default = SearchInput;
+function TableElement({ children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledTable, { ...rest, children });
+}
+var Table_default = TableElement;
+var StyledTable = styled16__default.default.table`
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0 4px;
+`;
+function TableHeader({ alignRight, children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledTableHeader, { alignRight, ...rest, children });
+}
+var TableHeader_default = TableHeader;
+var StyledTableHeader = styled16__default.default.th`
+  padding-bottom: 12px;
+  text-align: ${({ alignRight }) => alignRight ? "right" : "left"};
+  font-size: ${FONT_SIZES.xs}px;
+  font-weight: ${FONT_WEIGHTS.bold};
+  padding-left: ${({ alignRight }) => alignRight ? "0" : "24px"};
+  padding-right: ${({ alignRight }) => alignRight ? "60px" : "0"};
+`;
+function TableCell({ children, colSpan, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledTableCell, { colSpan, ...rest, children });
+}
+var TableCell_default = TableCell;
+var StyledTableCell = styled16__default.default.td`
+
+`;
+function TableRow({ children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledTableRow, { ...rest, children });
+}
+var TableRow_default = TableRow;
+var StyledTableRow = styled16__default.default.tr`
+  /* Base row styling */
+`;
+var TableRowWrapper = styled16__default.default.div`
+  border-radius: 6px;
+  border: 1px solid ${colors.baseColors.grey7};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 24px;
+`;
+var CheckboxWrapper = styled16__default.default.div`
+  display: flex;
+  align-items: center;
+`;
+var ActionsWrapper = styled16__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+var AlignedTableCell = styled16__default.default(TableCell_default)`
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-left: ${({ alignRight }) => alignRight ? "0" : "24px"};
+  padding-right: ${({ alignRight }) => alignRight ? "60px" : "0"};
+  text-align: ${({ alignRight }) => alignRight ? "right" : "left"};
+  border: 1px solid ${colors.baseColors.grey7};
+  border-right: ${({ isLast }) => isLast ? `1px solid ${colors.baseColors.grey7}` : "none"};
+  border-left: ${({ isFirst }) => isFirst ? `1px solid ${colors.baseColors.grey7}` : "none"};
+  ${({ isFirst }) => isFirst && `border-top-left-radius: 6px; border-bottom-left-radius: 6px;`}
+  ${({ isLast }) => isLast && `border-top-right-radius: 6px; border-bottom-right-radius: 6px;`}
+`;
+var CellContent = styled16__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: ${({ alignRight }) => alignRight ? "flex-end" : "flex-start"};
+  flex: ${({ alignRight }) => alignRight ? "0 0 auto" : "1"};
+  min-width: 0;
+`;
+var TableWrapper = styled16__default.default.div`
+  margin-top: 32px;
+`;
+var EmptyState = styled16__default.default.div`
+  padding: 24px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+var EmptyHeader = styled16__default.default.div`
+  font-size: 26px;
+  font-weight: 700;
+  color: ${colors.baseColors.darkBlue1};
+`;
+var EmptySubheader = styled16__default.default.div`
+  font-size: 12px;
+  font-weight: 500;
+  color: ${colors.baseColors.grey3};
+`;
+function getCellContent(column, row, rowIndex) {
+  if (column.renderCell) {
+    return column.renderCell(row, rowIndex);
+  }
+  if (column.accessor) {
+    if (typeof column.accessor === "function") {
+      return column.accessor(row);
+    }
+    return String(row[column.accessor] ?? "");
+  }
+  return null;
+}
+function getTotalColumns(columns, showCheckboxes, renderActions) {
+  return columns.length + (showCheckboxes ? 1 : 0) + (renderActions ? 1 : 0);
+}
+function Table({
+  data,
+  columns,
+  getRowKey,
+  emptyMessage,
+  emptyHeader,
+  emptySubheader,
+  showCheckboxes = false,
+  onSelectAll,
+  onSelectRow,
+  selectedRows = /* @__PURE__ */ new Set(),
+  renderActions,
+  rowLayout = "aligned"
+}) {
+  const getKey = getRowKey || ((row, index) => index);
+  const allSelected = data.length > 0 && data.every((row, idx) => selectedRows.has(getKey(row, idx)));
+  const someSelected = data.some((row, idx) => selectedRows.has(getKey(row, idx)));
+  const totalColumns = getTotalColumns(columns, showCheckboxes, renderActions);
+  const handleSelectAll = (e) => {
+    onSelectAll?.(e.target.checked);
+  };
+  const handleSelectRow = (row, e) => {
+    onSelectRow?.(row, e.target.checked);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TableWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table_default, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow_default, { children: [
+      showCheckboxes && /* @__PURE__ */ jsxRuntime.jsx(TableHeader_default, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: allSelected,
+          ref: (input) => {
+            if (input) input.indeterminate = someSelected && !allSelected;
+          },
+          onChange: handleSelectAll,
+          "aria-label": "Select all rows"
+        }
+      ) }),
+      columns.map((column, index) => /* @__PURE__ */ jsxRuntime.jsx(TableHeader_default, { alignRight: column.alignRight, children: column.label }, index)),
+      renderActions && /* @__PURE__ */ jsxRuntime.jsx(TableHeader_default, { alignRight: true, children: " " })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow_default, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell_default, { colSpan: totalColumns, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: emptyHeader ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(EmptyHeader, { children: emptyHeader }),
+      emptySubheader && /* @__PURE__ */ jsxRuntime.jsx(EmptySubheader, { children: emptySubheader })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: emptyMessage || "No data found" }) }) }) }) : data.map((row, rowIndex) => {
+      const rowKey = getKey(row, rowIndex);
+      const isSelected = selectedRows.has(rowKey);
+      if (rowLayout === "spaced") {
+        return /* @__PURE__ */ jsxRuntime.jsx(TableRow_default, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell_default, { colSpan: totalColumns, children: /* @__PURE__ */ jsxRuntime.jsxs(TableRowWrapper, { children: [
+          showCheckboxes && /* @__PURE__ */ jsxRuntime.jsx(CheckboxWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: isSelected,
+              onChange: (e) => handleSelectRow(row, e),
+              "aria-label": `Select row ${rowIndex + 1}`
+            }
+          ) }),
+          columns.map((column, colIndex) => {
+            const cellContent = getCellContent(column, row, rowIndex);
+            const isLast = colIndex === columns.length - 1 && !renderActions;
+            return /* @__PURE__ */ jsxRuntime.jsx(CellContent, { alignRight: column.alignRight, isLast, children: cellContent }, colIndex);
+          }),
+          renderActions && /* @__PURE__ */ jsxRuntime.jsx(ActionsWrapper, { children: renderActions(row, rowIndex) })
+        ] }) }) }, rowKey);
+      } else {
+        return /* @__PURE__ */ jsxRuntime.jsxs(TableRow_default, { children: [
+          showCheckboxes && /* @__PURE__ */ jsxRuntime.jsx(AlignedTableCell, { isFirst: true, isLast: totalColumns === 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: isSelected,
+              onChange: (e) => handleSelectRow(row, e),
+              "aria-label": `Select row ${rowIndex + 1}`
+            }
+          ) }),
+          columns.map((column, colIndex) => {
+            const cellContent = getCellContent(column, row, rowIndex);
+            const isFirst = !showCheckboxes && colIndex === 0;
+            const isLast = !renderActions && colIndex === columns.length - 1;
+            return /* @__PURE__ */ jsxRuntime.jsx(AlignedTableCell, { alignRight: column.alignRight, isFirst, isLast, children: cellContent }, colIndex);
+          }),
+          renderActions && /* @__PURE__ */ jsxRuntime.jsx(AlignedTableCell, { alignRight: true, isLast: true, children: renderActions(row, rowIndex) })
+        ] }, rowKey);
+      }
+    }) })
+  ] }) });
+}
+var DataTable_default = Table;
 
+exports.Badge = Badge_default;
 exports.Button = Button_default;
 exports.FONT_SIZES = FONT_SIZES;
+exports.FONT_SIZE_KEYS = FONT_SIZE_KEYS;
 exports.FONT_WEIGHTS = FONT_WEIGHTS;
 exports.FormField = FormField_default;
 exports.FormFieldTextarea = FormFieldTextarea_default;
+exports.GroupBadge = GroupBadge;
 exports.HelperText = HelperText;
 exports.Input = Input_default;
 exports.Label = Label_default;
+exports.SearchInput = SearchInput_default;
 exports.Tab = Tab_default;
+exports.Table = DataTable_default;
+exports.TableCell = TableCell_default;
+exports.TableElement = Table_default;
+exports.TableHeader = TableHeader_default;
+exports.TableRow = TableRow_default;
+exports.TableRowWrapper = TableRowWrapper;
 exports.Textarea = Textarea_default;
+exports.USER_ROLES = USER_ROLES;
+exports.USER_STATUS = USER_STATUS;
+exports.UserAvatar = UserAvatar_default;
 exports.Variant = Variant;
 exports.colors = colors;
+exports.getBadgeColor = getBadgeColor;
 exports.getOpacity = getOpacity;
 exports.typography = typography;
 //# sourceMappingURL=index.cjs.map