@dmsi/wedgekit-react 0.0.46 → 0.0.48

package/dist/components/DateInput.js

@@ -135,7 +135,11 @@ var DateInput = (_a) => {
     setInputValue(formattedValue);
     requestAnimationFrame(() => {
       if (triggerRef.current) {
-        const newPosition = calculateCursorPosition(rawValue, formattedValue, cursorPosition);
+        const newPosition = calculateCursorPosition(
+          rawValue,
+          formattedValue,
+          cursorPosition
+        );
         triggerRef.current.setSelectionRange(newPosition, newPosition);
       }
     });

package/dist/components/FilterGroup.js

@@ -2,9 +2,13 @@
 import {
   OptionPill
 } from "../chunk-4N2PED4P.js";
+import {
+  Checkbox
+} from "../chunk-WT5XXW6G.js";
 import {
   Search
 } from "../chunk-SGQWENE2.js";
+import "../chunk-VG4EPHJA.js";
 import "../chunk-724LJWFR.js";
 import {
   Label
@@ -13,10 +17,6 @@ import {
   Link
 } from "../chunk-AOELEEUS.js";
 import "../chunk-MZJS2ZAU.js";
-import {
-  Checkbox
-} from "../chunk-WT5XXW6G.js";
-import "../chunk-VG4EPHJA.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";

package/dist/components/MenuOption.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-S46RZBT4.js";
+} from "../chunk-T22EH3MG.js";
 import "../chunk-SEKKGFM6.js";
-import "../chunk-S5K22XTH.js";
 import "../chunk-VG4EPHJA.js";
+import "../chunk-S5K22XTH.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/MobileDataGrid.cjs

@@ -130,6 +130,7 @@ var Stack = (_a) => {
     grow,
     padding,
     paddingX,
+    paddingY,
     margin,
     marginX,
     marginY,
@@ -164,6 +165,7 @@ var Stack = (_a) => {
     "grow",
     "padding",
     "paddingX",
+    "paddingY",
     "margin",
     "marginX",
     "marginY",
@@ -234,6 +236,10 @@ var Stack = (_a) => {
         paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
         paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
         paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
+        paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+        paddingY && sizing === "layout-group" && "py-mobile-layout-group-padding desktop:py-desktop-layout-group-padding compact:py-desktop-compact-layout-group-padding",
+        paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
         margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
         marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
         marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",

package/dist/components/MobileDataGrid.js

@@ -3,16 +3,16 @@ import {
 } from "../chunk-6DONKNDT.js";
 import {
   Stack
-} from "../chunk-KXUUKAQM.js";
+} from "../chunk-K27465U2.js";
 import {
   Heading3
 } from "../chunk-J6LETUNM.js";
-import {
-  Button
-} from "../chunk-MZJS2ZAU.js";
 import {
   Paragraph
 } from "../chunk-VG4EPHJA.js";
+import {
+  Button
+} from "../chunk-MZJS2ZAU.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";

package/dist/components/Modal.js

@@ -2,6 +2,9 @@
 import {
   useMounted
 } from "../chunk-4RJKB7LC.js";
+import {
+  ModalButtons
+} from "../chunk-QUPHLL7D.js";
 import {
   ModalContent
 } from "../chunk-FWPJ73IK.js";
@@ -11,9 +14,6 @@ import {
 import {
   ModalScrim
 } from "../chunk-4JLU7TAC.js";
-import {
-  ModalButtons
-} from "../chunk-QUPHLL7D.js";
 import "../chunk-J6LETUNM.js";
 import {
   useMatchesMobile

package/dist/components/NestedMenu.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-S46RZBT4.js";
+} from "../chunk-T22EH3MG.js";
 import "../chunk-SEKKGFM6.js";
-import "../chunk-S5K22XTH.js";
 import "../chunk-VG4EPHJA.js";
+import "../chunk-S5K22XTH.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";

package/dist/components/Notification.cjs

@@ -497,6 +497,7 @@ var Stack = (_a) => {
     grow,
     padding,
     paddingX,
+    paddingY,
     margin,
     marginX,
     marginY,
@@ -531,6 +532,7 @@ var Stack = (_a) => {
     "grow",
     "padding",
     "paddingX",
+    "paddingY",
     "margin",
     "marginX",
     "marginY",
@@ -601,6 +603,10 @@ var Stack = (_a) => {
         paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
         paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
         paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
+        paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+        paddingY && sizing === "layout-group" && "py-mobile-layout-group-padding desktop:py-desktop-layout-group-padding compact:py-desktop-compact-layout-group-padding",
+        paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
         margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
         marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
         marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",

package/dist/components/Notification.js

@@ -1,16 +1,16 @@
 "use client";
 import {
   Stack
-} from "../chunk-KXUUKAQM.js";
+} from "../chunk-K27465U2.js";
 import {
   Heading3
 } from "../chunk-J6LETUNM.js";
-import {
-  Button
-} from "../chunk-MZJS2ZAU.js";
 import {
   Paragraph
 } from "../chunk-VG4EPHJA.js";
+import {
+  Button
+} from "../chunk-MZJS2ZAU.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";

package/dist/components/SideMenuGroup.cjs

@@ -269,6 +269,7 @@ var Stack = (_a) => {
     grow,
     padding,
     paddingX,
+    paddingY,
     margin,
     marginX,
     marginY,
@@ -303,6 +304,7 @@ var Stack = (_a) => {
     "grow",
     "padding",
     "paddingX",
+    "paddingY",
     "margin",
     "marginX",
     "marginY",
@@ -373,6 +375,10 @@ var Stack = (_a) => {
         paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
         paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
         paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
+        paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+        paddingY && sizing === "layout-group" && "py-mobile-layout-group-padding desktop:py-desktop-layout-group-padding compact:py-desktop-compact-layout-group-padding",
+        paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
         margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
         marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
         marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",

package/dist/components/SideMenuGroup.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Stack
-} from "../chunk-KXUUKAQM.js";
+} from "../chunk-K27465U2.js";
 import {
   Label
 } from "../chunk-S5K22XTH.js";

package/dist/components/SideMenuItem.cjs

@@ -224,6 +224,7 @@ var Stack = (_a) => {
     grow,
     padding,
     paddingX,
+    paddingY,
     margin,
     marginX,
     marginY,
@@ -258,6 +259,7 @@ var Stack = (_a) => {
     "grow",
     "padding",
     "paddingX",
+    "paddingY",
     "margin",
     "marginX",
     "marginY",
@@ -328,6 +330,10 @@ var Stack = (_a) => {
         paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
         paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
         paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
+        paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+        paddingY && sizing === "layout-group" && "py-mobile-layout-group-padding desktop:py-desktop-layout-group-padding compact:py-desktop-compact-layout-group-padding",
+        paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
         margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
         marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
         marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",

package/dist/components/SideMenuItem.js

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "../chunk-KXUUKAQM.js";
+} from "../chunk-K27465U2.js";
 import {
   Paragraph
 } from "../chunk-VG4EPHJA.js";

package/dist/components/Stack.cjs

@@ -95,6 +95,7 @@ var Stack = (_a) => {
     grow,
     padding,
     paddingX,
+    paddingY,
     margin,
     marginX,
     marginY,
@@ -129,6 +130,7 @@ var Stack = (_a) => {
     "grow",
     "padding",
     "paddingX",
+    "paddingY",
     "margin",
     "marginX",
     "marginY",
@@ -199,6 +201,10 @@ var Stack = (_a) => {
         paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
         paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
         paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
+        paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+        paddingY && sizing === "layout-group" && "py-mobile-layout-group-padding desktop:py-desktop-layout-group-padding compact:py-desktop-compact-layout-group-padding",
+        paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
         margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
         marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
         marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",

package/dist/components/Stack.js

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "../chunk-KXUUKAQM.js";
+} from "../chunk-K27465U2.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Stack

package/dist/components/Swatch.cjs

@@ -274,6 +274,7 @@ var Stack = (_a) => {
     grow,
     padding,
     paddingX,
+    paddingY,
     margin,
     marginX,
     marginY,
@@ -308,6 +309,7 @@ var Stack = (_a) => {
     "grow",
     "padding",
     "paddingX",
+    "paddingY",
     "margin",
     "marginX",
     "marginY",
@@ -378,6 +380,10 @@ var Stack = (_a) => {
         paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
         paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
         paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
+        paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+        paddingY && sizing === "layout-group" && "py-mobile-layout-group-padding desktop:py-desktop-layout-group-padding compact:py-desktop-compact-layout-group-padding",
+        paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
         margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
         marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
         marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",

package/dist/components/Swatch.js

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "../chunk-KXUUKAQM.js";
+} from "../chunk-K27465U2.js";
 import {
   Display1
 } from "../chunk-AY7ELVQY.js";

package/dist/components/Time.cjs

@@ -745,6 +745,7 @@ var Stack = (_a) => {
     grow,
     padding,
     paddingX,
+    paddingY,
     margin,
     marginX,
     marginY,
@@ -779,6 +780,7 @@ var Stack = (_a) => {
     "grow",
     "padding",
     "paddingX",
+    "paddingY",
     "margin",
     "marginX",
     "marginY",
@@ -849,6 +851,10 @@ var Stack = (_a) => {
         paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
         paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
         paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
+        paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+        paddingY && sizing === "layout-group" && "py-mobile-layout-group-padding desktop:py-desktop-layout-group-padding compact:py-desktop-compact-layout-group-padding",
+        paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
         margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
         marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
         marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",

package/dist/components/Time.js

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "../chunk-KXUUKAQM.js";
+} from "../chunk-K27465U2.js";
 import {
   findDocumentRoot
 } from "../chunk-4T7F5BZZ.js";

package/dist/components/Toast.js

@@ -2,12 +2,12 @@
 import {
   Heading3
 } from "../chunk-J6LETUNM.js";
-import {
-  Button
-} from "../chunk-MZJS2ZAU.js";
 import {
   Paragraph
 } from "../chunk-VG4EPHJA.js";
+import {
+  Button
+} from "../chunk-MZJS2ZAU.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";

package/dist/index.css

@@ -692,6 +692,10 @@
     width: calc(var(--spacing) * 10) !important;
     height: calc(var(--spacing) * 10) !important;
   }
+  .size-2 {
+    width: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 2);
+  }
   .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -978,6 +982,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-0\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -1805,6 +1812,9 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-\[15px\] {
+    padding-block: 15px;
+  }
   .py-\[calc\(var\(--spacing-mobile-component-padding\)_\+_3px\)\] {
     padding-block: calc(var(--spacing-mobile-component-padding) + 3px);
   }
@@ -1868,6 +1878,9 @@
   .text-\[0\.6rem\] {
     font-size: 0.6rem;
   }
+  .text-\[13px\] {
+    font-size: 13px;
+  }
   .text-\[14px\] {
     font-size: 14px;
   }
@@ -1905,6 +1918,10 @@
     --tw-leading: calc(var(--spacing) * 6) !important;
     line-height: calc(var(--spacing) * 6) !important;
   }
+  .leading-\[1\.38462\] {
+    --tw-leading: 1.38462;
+    line-height: 1.38462;
+  }
   .leading-\[1\] {
     --tw-leading: 1;
     line-height: 1;
@@ -2855,6 +2872,13 @@
       }
     }
   }
+  .hover\:text-text-action-primary-normal {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-text-action-primary-normal);
+      }
+    }
+  }
   .hover\:text-text-link-hover {
     &:hover {
       @media (hover: hover) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.46",
+  "version": "0.0.48",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/AccessChangerTabItem.tsx

@@ -0,0 +1,56 @@
+import clsx from "clsx";
+import { ComponentProps } from "react";
+import { Subheader } from "./Subheader";
+import { Icon } from "./Icon";
+
+export function AccessChangerTabItem(props: ComponentProps<"div"> & { selected?: boolean, loading?: boolean, disabled?: boolean, additionalText?: string, borderTop?: boolean, borderBottom?: boolean }) {
+    const {
+        additionalText,
+        borderTop,
+        borderBottom,
+        selected,
+        children,
+        loading,
+        disabled,
+        onClick,
+        ...rest
+    } = props;
+
+    return (
+        <div
+            className={clsx(
+                "flex items-center justify-between",
+                "py-[15px] px-4 gap-4",
+                "bg-background-grouped-primary-normal cursor-pointer",
+                borderTop && 'border-t',
+                borderBottom && 'border-b',
+                borderTop || borderBottom ? "border-border-primary-normal" : "border-transparent",
+                selected ? "text-text-action-primary-normal" : "text-text-primary-normal hover:text-text-action-primary-normal",
+            )}
+            onClick={(e) => {
+                if (selected || loading || disabled) {
+                    return;
+                }
+
+                onClick?.(e);
+            }}
+            {...rest}
+        >
+            <div className="flex flex-col gap-0.5">
+                <Subheader>{children}</Subheader>
+                {additionalText && <p className="text-text-primary-normal text-[13px] leading-[1.38462] font-normal">{additionalText}</p>}
+            </div>
+
+            {loading && !selected && (
+                <Icon name="cached" size={16} />
+            )}
+
+            {selected && (
+                <div className="flex items-center gap-1">
+                    <div className="rounded-full size-2 bg-text-action-primary-normal"></div>
+                    <Subheader>Active</Subheader>
+                </div>
+            )}
+        </div>
+    )
+}

package/src/components/ContentTab.tsx

@@ -9,6 +9,7 @@ export type ContentTabProps = {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   selected?: boolean;
   className?: string;
+  fullWidth?: boolean;
   id?: string;
 } & Omit<ComponentPropsWithRef<"button">, "id">;
 
@@ -19,6 +20,7 @@ export const ContentTab = ({
   disabled = false,
   onClick,
   ref,
+  fullWidth,
   id,
   ...props
 }: ContentTabProps) => {
@@ -45,9 +47,13 @@ export const ContentTab = ({
   );
 
   return (
-    <div id={id} className="relative">
+    <div id={id} className={clsx(
+      "relative",
+      fullWidth && "flex-1"
+    )}>
       <Button
         id={id ? `${id}-button` : undefined}
+        block={fullWidth}
         ref={ref}
         variant="tertiary"
         disabled={disabled}

package/src/components/ContentTabs.tsx

@@ -12,13 +12,14 @@ type Tab = {
 export type ContentTabsProps = {
   tabs: Tab[];
   onTabChange?: (tabId: string) => void;
+  fullWidthTabs?: boolean;
   id?: string;
 };
 
 const afterClasses =
   "after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-border-primary-normal z-0";
 
-export const ContentTabs = ({ tabs, onTabChange, id }: ContentTabsProps) => {
+export const ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id }: ContentTabsProps) => {
   const [selectedTab, setSelectedTab] = useState<string>(tabs[0]?.id || "");
   const [focusedTabIndex, setFocusedTabIndex] = useState<number>(0);
   const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
@@ -66,6 +67,7 @@ export const ContentTabs = ({ tabs, onTabChange, id }: ContentTabsProps) => {
             const isSelected = selectedTab === tab.id;
             return (
               <ContentTab
+                fullWidth={fullWidthTabs}
                 key={tab.id}
                 id={id ? `${id}-tab-${tab.id}` : undefined}
                 label={tab.label}