@marigold/components 6.0.1 → 6.1.0

package/dist/index.d.ts

@@ -26,7 +26,7 @@ import { AriaSelectProps } from '@react-types/select';
 import { AriaSliderProps } from '@react-types/slider';
 import { AriaSwitchProps } from '@react-types/switch';
 import { AriaTableProps } from '@react-aria/table';
-import { TableStateProps, RowProps as RowProps$1, TableBody, Cell, Column, TableHeader } from '@react-stately/table';
+import { TableStateProps, RowProps as RowProps$1, TableBody, Cell, TableHeader, ColumnProps as ColumnProps$1 } from '@react-stately/table';
 import { AriaTextFieldProps } from '@react-types/textfield';
 import { PositionProps } from '@react-types/overlays';
 import { TooltipTriggerProps as TooltipTriggerProps$1 } from '@react-types/tooltip';
@@ -643,6 +643,8 @@ interface RowProps extends RowProps$1 {
     variant?: string;
     size?: string;
 }
+interface ColumnProps extends Omit<ColumnProps$1<any>, 'width'>, WidthProp {
+}
 declare const Table: Table;
 /**
  * Necessary since TypeScript can not infer the
@@ -652,8 +654,8 @@ interface Table {
     (props: TableProps): JSX.Element;
     Body: typeof TableBody;
     Cell: typeof Cell;
-    Column: typeof Column;
     Header: typeof TableHeader;
+    Column: (props: ColumnProps) => JSX.Element;
     Row: (props: RowProps) => JSX.Element;
 }
 

package/dist/index.js

@@ -1296,13 +1296,20 @@ var import_focus7 = require("@react-aria/focus");
 var import_interactions3 = require("@react-aria/interactions");
 var import_utils11 = require("@react-aria/utils");
 var import_toggle = require("@react-stately/toggle");
-var import_system23 = require("@marigold/system");
+var import_system24 = require("@marigold/system");
+
+// src/Checkbox/CheckboxField.tsx
+var import_system22 = require("@marigold/system");
+var CheckboxField = ({ children, labelWidth }) => {
+  const classNames2 = (0, import_system22.useClassNames)({ component: "Field" });
+  return /* @__PURE__ */ React.createElement("div", { className: classNames2 }, /* @__PURE__ */ React.createElement("div", { className: "w-[--labelWidth]", style: (0, import_system22.createVar)({ labelWidth }) }), children);
+};
 
 // src/Checkbox/CheckboxGroup.tsx
 var import_react32 = __toESM(require("react"));
 var import_checkbox = require("@react-aria/checkbox");
 var import_checkbox2 = require("@react-stately/checkbox");
-var import_system22 = require("@marigold/system");
+var import_system23 = require("@marigold/system");
 var CheckboxGroupContext = (0, import_react32.createContext)(
   null
 );
@@ -1325,7 +1332,7 @@ var CheckboxGroup = ({
   };
   const state = (0, import_checkbox2.useCheckboxGroupState)(props);
   const { groupProps, labelProps, descriptionProps, errorMessageProps } = (0, import_checkbox.useCheckboxGroup)(props, state);
-  const stateProps = (0, import_system22.useStateProps)({
+  const stateProps = (0, import_system23.useStateProps)({
     disabled,
     readOnly,
     error
@@ -1350,7 +1357,6 @@ var CheckboxGroup = ({
 };
 
 // src/Checkbox/Checkbox.tsx
-var import_system24 = require("@marigold/system");
 var CheckMark = () => /* @__PURE__ */ import_react33.default.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ import_react33.default.createElement(
   "path",
   {
@@ -1437,8 +1443,9 @@ var Checkbox = (0, import_react33.forwardRef)(
     const { hoverProps, isHovered } = (0, import_interactions3.useHover)({
       isDisabled: inputProps.disabled
     });
+    const { labelWidth } = useFieldGroupContext();
     const { isFocusVisible, focusProps } = (0, import_focus7.useFocusRing)();
-    const stateProps = (0, import_system23.useStateProps)({
+    const stateProps = (0, import_system24.useStateProps)({
       hover: isHovered,
       focus: isFocusVisible,
       checked: inputProps.checked,
@@ -1447,7 +1454,7 @@ var Checkbox = (0, import_react33.forwardRef)(
       readOnly,
       indeterminate
     });
-    return /* @__PURE__ */ import_react33.default.createElement(
+    const component = /* @__PURE__ */ import_react33.default.createElement(
       "label",
       {
         className: (0, import_system24.cn)(
@@ -1476,6 +1483,7 @@ var Checkbox = (0, import_react33.forwardRef)(
       ),
       props.children && /* @__PURE__ */ import_react33.default.createElement("div", { className: classNames2.label }, props.children)
     );
+    return !groupState && labelWidth ? /* @__PURE__ */ import_react33.default.createElement(CheckboxField, { labelWidth }, component) : component;
   }
 );
 
@@ -3362,7 +3370,7 @@ var Switch = (0, import_react78.forwardRef)(
 var import_react88 = __toESM(require("react"));
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system64 = require("@marigold/system");
+var import_system65 = require("@marigold/system");
 
 // src/Table/Context.tsx
 var import_react79 = require("react");
@@ -3480,6 +3488,7 @@ var import_interactions11 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
 var import_utils30 = require("@react-aria/utils");
 var import_system61 = require("@marigold/system");
+var import_system62 = require("@marigold/system");
 var SortIndicator = ({
   direction = "ascending",
   visible
@@ -3497,7 +3506,10 @@ var SortIndicator = ({
     direction === "ascending" ? "\u25B2" : "\u25BC"
   );
 };
-var TableColumnHeader = ({ column }) => {
+var TableColumnHeader = ({
+  column,
+  width = "auto"
+}) => {
   var _a, _b;
   const ref = (0, import_react83.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
@@ -3519,7 +3531,7 @@ var TableColumnHeader = ({ column }) => {
     {
       colSpan: column.colspan,
       ref,
-      className: (0, import_system61.cn)("cursor-default", classNames2 == null ? void 0 : classNames2.header),
+      className: (0, import_system61.cn)("cursor-default", import_system62.width[width], classNames2 == null ? void 0 : classNames2.header),
       ...(0, import_utils30.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps
     },
@@ -3558,12 +3570,12 @@ var import_focus19 = require("@react-aria/focus");
 var import_interactions12 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
 var import_utils31 = require("@react-aria/utils");
-var import_system62 = require("@marigold/system");
+var import_system63 = require("@marigold/system");
 var TableRow = ({ children, row }) => {
   const ref = (0, import_react86.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = (0, import_system62.useClassNames)({
+  const classNames2 = (0, import_system63.useClassNames)({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3581,7 +3593,7 @@ var TableRow = ({ children, row }) => {
   const { hoverProps, isHovered } = (0, import_interactions12.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system62.useStateProps)({
+  const stateProps = (0, import_system63.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
@@ -3592,7 +3604,7 @@ var TableRow = ({ children, row }) => {
     "tr",
     {
       ref,
-      className: (0, import_system62.cn)(
+      className: (0, import_system63.cn)(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -3611,8 +3623,11 @@ var import_focus20 = require("@react-aria/focus");
 var import_interactions13 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
 var import_utils32 = require("@react-aria/utils");
-var import_system63 = require("@marigold/system");
-var TableSelectAllCell = ({ column }) => {
+var import_system64 = require("@marigold/system");
+var TableSelectAllCell = ({
+  column,
+  width = "auto"
+}) => {
   const ref = (0, import_react87.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
@@ -3625,7 +3640,7 @@ var TableSelectAllCell = ({ column }) => {
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
   const { hoverProps, isHovered } = (0, import_interactions13.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus20.useFocusRing)();
-  const stateProps = (0, import_system63.useStateProps)({
+  const stateProps = (0, import_system64.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
@@ -3633,7 +3648,8 @@ var TableSelectAllCell = ({ column }) => {
     "th",
     {
       ref,
-      className: (0, import_system63.cn)(
+      className: (0, import_system64.cn)(
+        import_system64.width[width],
         ["text-center align-middle leading-none"],
         classNames2 == null ? void 0 : classNames2.header
       ),
@@ -3661,7 +3677,7 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const classNames2 = (0, import_system64.useClassNames)({
+  const classNames2 = (0, import_system65.useClassNames)({
     component: "Table",
     variant,
     size
@@ -3676,7 +3692,7 @@ var Table = ({
       "table",
       {
         ref: tableRef,
-        className: (0, import_system64.cn)(
+        className: (0, import_system65.cn)(
           "border-collapse overflow-auto whitespace-nowrap",
           stretch ? "table w-full" : "block",
           classNames2.table
@@ -3685,8 +3701,22 @@ var Table = ({
       },
       /* @__PURE__ */ import_react88.default.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react88.default.createElement(TableHeaderRow, { key: headerRow.key, item: headerRow }, [...collection.getChildren(headerRow.key)].map(
         (column) => {
-          var _a;
-          return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ import_react88.default.createElement(TableSelectAllCell, { key: column.key, column }) : /* @__PURE__ */ import_react88.default.createElement(TableColumnHeader, { key: column.key, column });
+          var _a, _b, _c;
+          return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ import_react88.default.createElement(
+            TableSelectAllCell,
+            {
+              width: (_b = column.props) == null ? void 0 : _b.width,
+              key: column.key,
+              column
+            }
+          ) : /* @__PURE__ */ import_react88.default.createElement(
+            TableColumnHeader,
+            {
+              width: (_c = column.props) == null ? void 0 : _c.width,
+              key: column.key,
+              column
+            }
+          );
         }
       )))),
       /* @__PURE__ */ import_react88.default.createElement(TableBody, null, ...collection.rows.map(
@@ -3708,7 +3738,7 @@ Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
 var import_react89 = __toESM(require("react"));
-var import_system65 = require("@marigold/system");
+var import_system66 = require("@marigold/system");
 var Text = ({
   variant,
   size,
@@ -3721,8 +3751,8 @@ var Text = ({
   children,
   ...props
 }) => {
-  const theme = (0, import_system65.useTheme)();
-  const classNames2 = (0, import_system65.useClassNames)({
+  const theme = (0, import_system66.useTheme)();
+  const classNames2 = (0, import_system66.useClassNames)({
     component: "Text",
     variant,
     size
@@ -3731,17 +3761,17 @@ var Text = ({
     "p",
     {
       ...props,
-      className: (0, import_system65.cn)(
+      className: (0, import_system66.cn)(
         classNames2,
         "text-[--color] outline-[--outline]",
-        fontStyle && import_system65.textStyle[fontStyle],
-        align && import_system65.textAlign[align],
-        cursor && import_system65.cursorStyle[cursor],
-        weight && import_system65.fontWeight[weight],
-        fontSize && import_system65.textSize[fontSize]
+        fontStyle && import_system66.textStyle[fontStyle],
+        align && import_system66.textAlign[align],
+        cursor && import_system66.cursorStyle[cursor],
+        weight && import_system66.fontWeight[weight],
+        fontSize && import_system66.textSize[fontSize]
       ),
-      style: (0, import_system65.createVar)({
-        color: color && theme.colors && (0, import_system65.get)(
+      style: (0, import_system66.createVar)({
+        color: color && theme.colors && (0, import_system66.get)(
           theme.colors,
           color.replace("-", "."),
           color
@@ -3759,7 +3789,7 @@ var import_interactions14 = require("@react-aria/interactions");
 var import_focus21 = require("@react-aria/focus");
 var import_textfield = require("@react-aria/textfield");
 var import_utils34 = require("@react-aria/utils");
-var import_system66 = require("@marigold/system");
+var import_system67 = require("@marigold/system");
 var TextArea = (0, import_react90.forwardRef)(
   ({
     variant,
@@ -3787,7 +3817,7 @@ var TextArea = (0, import_react90.forwardRef)(
     );
     const { hoverProps, isHovered } = (0, import_interactions14.useHover)({});
     const { focusProps, isFocusVisible } = (0, import_focus21.useFocusRing)();
-    const stateProps = (0, import_system66.useStateProps)({
+    const stateProps = (0, import_system67.useStateProps)({
       hover: isHovered,
       focus: isFocusVisible,
       disabled,
@@ -3795,7 +3825,7 @@ var TextArea = (0, import_react90.forwardRef)(
       required,
       error
     });
-    const classNames2 = (0, import_system66.useClassNames)({ component: "TextArea", variant, size });
+    const classNames2 = (0, import_system67.useClassNames)({ component: "TextArea", variant, size });
     return /* @__PURE__ */ import_react90.default.createElement(
       FieldBase,
       {
@@ -3832,7 +3862,7 @@ var import_interactions15 = require("@react-aria/interactions");
 var import_focus22 = require("@react-aria/focus");
 var import_textfield2 = require("@react-aria/textfield");
 var import_utils35 = require("@react-aria/utils");
-var import_system67 = require("@marigold/system");
+var import_system68 = require("@marigold/system");
 var TextField = (0, import_react91.forwardRef)(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
@@ -3852,7 +3882,7 @@ var TextField = (0, import_react91.forwardRef)(
       isTextInput: true,
       autoFocus
     });
-    const stateProps = (0, import_system67.useStateProps)({
+    const stateProps = (0, import_system68.useStateProps)({
       hover: isHovered,
       focus: isFocused,
       disabled,
@@ -3890,7 +3920,7 @@ var TextField = (0, import_react91.forwardRef)(
 
 // src/Tiles/Tiles.tsx
 var import_react92 = __toESM(require("react"));
-var import_system68 = require("@marigold/system");
+var import_system69 = require("@marigold/system");
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3907,13 +3937,13 @@ var Tiles = ({
     "div",
     {
       ...props,
-      className: (0, import_system68.cn)(
+      className: (0, import_system69.cn)(
         "grid",
-        import_system68.gapSpace[space],
+        import_system69.gapSpace[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: (0, import_system68.createVar)({ column, tilesWidth })
+      style: (0, import_system69.createVar)({ column, tilesWidth })
     },
     children
   );
@@ -3922,7 +3952,7 @@ var Tiles = ({
 // src/Tooltip/Tooltip.tsx
 var import_react95 = __toESM(require("react"));
 var import_tooltip3 = require("@react-aria/tooltip");
-var import_system69 = require("@marigold/system");
+var import_system70 = require("@marigold/system");
 
 // src/Tooltip/Context.ts
 var import_react93 = require("react");
@@ -3991,14 +4021,14 @@ var TooltipTrigger = ({
 var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = (0, import_tooltip3.useTooltip)({}, state);
-  const classNames2 = (0, import_system69.useClassNames)({ component: "Tooltip", variant, size });
+  const classNames2 = (0, import_system70.useClassNames)({ component: "Tooltip", variant, size });
   return /* @__PURE__ */ import_react95.default.createElement(
     "div",
     {
       ...tooltipProps,
       ...rest,
       ref: overlayRef,
-      className: (0, import_system69.cn)("group/tooltip", classNames2.container),
+      className: (0, import_system70.cn)("group/tooltip", classNames2.container),
       "data-placement": placement
     },
     /* @__PURE__ */ import_react95.default.createElement("div", null, children),
@@ -4006,7 +4036,7 @@ var Tooltip = ({ children, variant, size }) => {
       "div",
       {
         ...arrowProps,
-        className: (0, import_system69.cn)("absolute h-0 w-0", classNames2.arrow)
+        className: (0, import_system70.cn)("absolute h-0 w-0", classNames2.arrow)
       }
     )
   );
@@ -4020,13 +4050,13 @@ var import_collections6 = require("@react-stately/collections");
 var import_react97 = __toESM(require("react"));
 var import_tag2 = require("@react-aria/tag");
 var import_list = require("@react-stately/list");
-var import_system71 = require("@marigold/system");
+var import_system72 = require("@marigold/system");
 
 // src/TagGroup/Tag.tsx
 var import_react96 = __toESM(require("react"));
 var import_tag = require("@react-aria/tag");
 var import_focus24 = require("@react-aria/focus");
-var import_system70 = require("@marigold/system");
+var import_system71 = require("@marigold/system");
 var import_utils36 = require("@react-aria/utils");
 var Tag = ({ variant, size, item, state, ...rest }) => {
   const props = {
@@ -4043,7 +4073,7 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
     state,
     ref
   );
-  const classNames2 = (0, import_system70.useClassNames)({ component: "Tag", variant, size });
+  const classNames2 = (0, import_system71.useClassNames)({ component: "Tag", variant, size });
   return /* @__PURE__ */ import_react96.default.createElement(
     "span",
     {
@@ -4055,7 +4085,7 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
       Button,
       {
         ...removeButtonProps,
-        className: (0, import_system70.cn)("flex items-center", classNames2.closeButton),
+        className: (0, import_system71.cn)("flex items-center", classNames2.closeButton),
         role: "button"
       },
       /* @__PURE__ */ import_react96.default.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20 }, /* @__PURE__ */ import_react96.default.createElement("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }))
@@ -4079,7 +4109,7 @@ var TagGroup = ({
   const inputRef = (0, import_react97.useRef)(null);
   const state = (0, import_list.useListState)(props);
   const { gridProps, labelProps, descriptionProps, errorMessageProps } = (0, import_tag2.useTagGroup)(props, state, inputRef);
-  const stateProps = (0, import_system71.useStateProps)({
+  const stateProps = (0, import_system72.useStateProps)({
     error,
     required
   });
@@ -4125,10 +4155,10 @@ var Tag2 = import_collections6.Item;
 Tag2.Group = TagGroup;
 
 // src/XLoader/XLoader.tsx
-var import_system72 = require("@marigold/system");
+var import_system73 = require("@marigold/system");
 var import_react98 = __toESM(require("react"));
 var XLoader = (0, import_react98.forwardRef)((props, ref) => /* @__PURE__ */ import_react98.default.createElement(
-  import_system72.SVG,
+  import_system73.SVG,
   {
     id: "XLoader",
     xmlns: "http://www.w3.org/2000/svg",
@@ -4340,18 +4370,11 @@ var XLoader = (0, import_react98.forwardRef)((props, ref) => /* @__PURE__ */ imp
 
 // src/Tabs/Tabs.tsx
 var import_react104 = __toESM(require("react"));
+var import_react105 = require("react");
 var import_tabs3 = require("@react-aria/tabs");
-var import_system74 = require("@marigold/system");
+var import_collections7 = require("@react-stately/collections");
 var import_tabs4 = require("@react-stately/tabs");
-var import_react105 = require("react");
-
-// src/Tabs/Tab.tsx
-var import_react100 = __toESM(require("react"));
-var import_react101 = require("react");
-var import_system73 = require("@marigold/system");
-var import_tabs = require("@react-aria/tabs");
-var import_interactions16 = require("@react-aria/interactions");
-var import_utils37 = require("@react-aria/utils");
+var import_system76 = require("@marigold/system");
 
 // src/Tabs/Context.ts
 var import_react99 = require("react");
@@ -4359,6 +4382,12 @@ var TabContext = (0, import_react99.createContext)({});
 var useTabContext = () => (0, import_react99.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
+var import_react100 = __toESM(require("react"));
+var import_react101 = require("react");
+var import_system74 = require("@marigold/system");
+var import_tabs = require("@react-aria/tabs");
+var import_interactions16 = require("@react-aria/interactions");
+var import_utils37 = require("@react-aria/utils");
 var Tab = ({ item, state }) => {
   const { key, rendered } = item;
   const ref = (0, import_react101.useRef)(null);
@@ -4368,12 +4397,12 @@ var Tab = ({ item, state }) => {
     isDisabled: disabled || isSelected
   });
   const { focusProps } = (0, import_interactions16.useFocus)({});
-  const stateProps = (0, import_system73.useStateProps)({ active: isSelected, hover: isHovered });
+  const stateProps = (0, import_system74.useStateProps)({ active: isSelected, hover: isHovered });
   const { classNames: classNames2 } = useTabContext();
   return /* @__PURE__ */ import_react100.default.createElement(
     "div",
     {
-      className: (0, import_system73.cn)(
+      className: (0, import_system74.cn)(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -4388,15 +4417,17 @@ var Tab = ({ item, state }) => {
 var import_react102 = __toESM(require("react"));
 var import_react103 = require("react");
 var import_tabs2 = require("@react-aria/tabs");
+var import_system75 = require("@marigold/system");
 var TabPanel = ({ state, ...props }) => {
   var _a;
   const ref = (0, import_react103.useRef)(null);
   const { tabPanelProps } = (0, import_tabs2.useTabPanel)(props, state, ref);
-  return /* @__PURE__ */ import_react102.default.createElement("div", { ...tabPanelProps, ref }, (_a = state.selectedItem) == null ? void 0 : _a.props.children);
+  const selectedItemProps = (_a = state.selectedItem) == null ? void 0 : _a.props;
+  const { classNames: classNames2 } = useTabContext();
+  return /* @__PURE__ */ import_react102.default.createElement("div", { className: (0, import_system75.cn)(classNames2.tabpanel), ref, ...tabPanelProps }, selectedItemProps == null ? void 0 : selectedItemProps.children);
 };
 
 // src/Tabs/Tabs.tsx
-var import_collections7 = require("@react-stately/collections");
 var Tabs = ({
   space = 2,
   size = "medium",
@@ -4412,22 +4443,22 @@ var Tabs = ({
   };
   const state = (0, import_tabs4.useTabListState)(props);
   const { tabListProps } = (0, import_tabs3.useTabList)(props, state, ref);
-  const classNames2 = (0, import_system74.useClassNames)({
+  const classNames2 = (0, import_system76.useClassNames)({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ import_react104.default.createElement(TabContext.Provider, { value: { classNames: classNames2 } }, /* @__PURE__ */ import_react104.default.createElement(
+  return /* @__PURE__ */ import_react104.default.createElement(TabContext.Provider, { value: { classNames: classNames2 } }, /* @__PURE__ */ import_react104.default.createElement("div", { className: (0, import_system76.cn)(classNames2.container) }, /* @__PURE__ */ import_react104.default.createElement(
     "div",
     {
-      className: (0, import_system74.cn)("flex", import_system74.gapSpace[space], classNames2.tabs),
+      className: (0, import_system76.cn)("flex", import_system76.gapSpace[space], classNames2.tabs),
       ...tabListProps,
       ref
     },
     [...state.collection].map((item) => {
       return /* @__PURE__ */ import_react104.default.createElement(Tab, { key: item.key, item, state });
     })
-  ), /* @__PURE__ */ import_react104.default.createElement(TabPanel, { key: (_a = state.selectedItem) == null ? void 0 : _a.key, state }));
+  ), /* @__PURE__ */ import_react104.default.createElement(TabPanel, { key: (_a = state.selectedItem) == null ? void 0 : _a.key, state })));
 };
 Tabs.Item = import_collections7.Item;
 // Annotate the CommonJS export names for ESM import in node: