@strapi/design-system 1.9.0 → 1.10.0

package/dist/Tabs/Tabs.js

@@ -1,76 +1,153 @@
-import { jsx as c } from "react/jsx-runtime";
-import { Children as T, cloneElement as I, useRef as g, useEffect as k } from "react";
-import { useCallbackRef as w } from "@strapi/ui-primitives";
-import R from "styled-components";
-import { DefaultTabsRow as v, SimpleTabBox as B, DefaultTabButton as E, DefaultTabBox as K } from "./components.js";
-import { useTabs as A } from "./TabsContext.js";
-import { KeyboardKeys as y } from "../helpers/keyboardKeys.js";
-import { Typography as C } from "../Typography/Typography.js";
-const N = (s, b) => {
-  const i = g(null), l = g(!1), r = w(b);
-  return k(() => {
-    if (i.current) {
-      if (l.current) {
-        const d = i.current.querySelector('[tabindex="0"]');
-        d && (d.focus(), r(s));
-      }
-      l.current || (l.current = !0);
-    }
-  }, [s, r]), i;
-}, $ = R.button`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const uiPrimitives = require('@strapi/ui-primitives');
+const styled = require('styled-components');
+const components = require('./components.js');
+const TabsContext = require('./TabsContext.js');
+const keyboardKeys = require('../helpers/keyboardKeys.js');
+const Typography = require('../Typography/Typography.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const useTabsFocus = (selectedTabIndex, onTabChange) => {
+    const tabsRef = React.useRef(null);
+    const mountedRef = React.useRef(false);
+    const handleTabChange = uiPrimitives.useCallbackRef(onTabChange);
+    React.useEffect(() => {
+        if (!tabsRef.current)
+            return;
+        // We don't' want to send the focus to the tab when it mounts
+        // It could break the navigating flow of the users if the focus was supposed to be
+        // on another element
+        if (mountedRef.current) {
+            const nextFocusEl = tabsRef.current.querySelector('[tabindex="0"]');
+            if (nextFocusEl) {
+                nextFocusEl.focus();
+                handleTabChange(selectedTabIndex);
+            }
+        }
+        if (!mountedRef.current) {
+            mountedRef.current = true;
+        }
+    }, [selectedTabIndex, handleTabChange]);
+    return tabsRef;
+};
+const TabButton = styled__default.default.button `
   &[aria-disabled='true'] {
     cursor: not-allowed;
   }
-`, G = ({ children: s, ...b }) => {
-  const { id: i, selectedTabIndex: l, selectTabIndex: r, label: d, variant: h, onTabChange: x } = A(), p = N(l, x), n = T.toArray(s).map((t, u) => I(t, {
-    id: `${i}-${u}`,
-    index: u,
-    selectedTabIndex: l,
-    onTabClick: () => r(u),
-    variant: h
-  })), m = (t) => {
-    if (!n.every((a) => a.props.disabled))
-      switch (t.key) {
-        case y.RIGHT: {
-          const a = l + 1, e = (o) => n[o].props.disabled ? o === n.length - 1 ? e(0) : e(o + 1) : o, f = e(a >= n.length ? 0 : a);
-          r(f);
-          break;
+`;
+const Tabs = ({ children, ...props }) => {
+    const { id, selectedTabIndex, selectTabIndex, label, variant, onTabChange } = TabsContext.useTabs();
+    const tabsRef = useTabsFocus(selectedTabIndex, onTabChange);
+    const childrenArray = React.Children.toArray(children).map((node, index) => React.cloneElement(node, {
+        id: `${id}-${index}`,
+        index,
+        selectedTabIndex,
+        onTabClick: () => selectTabIndex(index),
+        variant,
+    }));
+    const handleKeyDown = (e) => {
+        const hasAllChildrenDisabled = childrenArray.every((node) => node.props.disabled);
+        if (hasAllChildrenDisabled) {
+            return;
         }
-        case y.LEFT: {
-          const a = l - 1, e = (o) => n[o].props.disabled ? e(o === 0 ? n.length - 1 : o - 1) : o, f = e(a < 0 ? n.length - 1 : a);
-          r(f);
-          break;
+        switch (e.key) {
+            case keyboardKeys.KeyboardKeys.RIGHT: {
+                const nextWantedIndex = selectedTabIndex + 1;
+                const findNextIndex = (ref) => {
+                    const isDisabled = childrenArray[ref].props.disabled;
+                    if (!isDisabled) {
+                        return ref;
+                    }
+                    if (ref === childrenArray.length - 1) {
+                        return findNextIndex(0);
+                    }
+                    return findNextIndex(ref + 1);
+                };
+                const nextIndex = findNextIndex(nextWantedIndex >= childrenArray.length ? 0 : nextWantedIndex);
+                selectTabIndex(nextIndex);
+                break;
+            }
+            case keyboardKeys.KeyboardKeys.LEFT: {
+                const nextWantedIndex = selectedTabIndex - 1;
+                const findNextIndex = (ref) => {
+                    const isDisabled = childrenArray[ref].props.disabled;
+                    if (!isDisabled) {
+                        return ref;
+                    }
+                    if (ref === 0) {
+                        return findNextIndex(childrenArray.length - 1);
+                    }
+                    return findNextIndex(ref - 1);
+                };
+                const nextIndex = findNextIndex(nextWantedIndex < 0 ? childrenArray.length - 1 : nextWantedIndex);
+                selectTabIndex(nextIndex);
+                break;
+            }
+            case keyboardKeys.KeyboardKeys.HOME: {
+                const nextIndex = childrenArray.findIndex((node) => !node.props.disabled);
+                selectTabIndex(nextIndex);
+                break;
+            }
+            case keyboardKeys.KeyboardKeys.END: {
+                const arrayOfChildrenProps = childrenArray.map((node, index) => ({ isDisabled: node.props.disabled, index }));
+                const firstNonDisabledChildren = arrayOfChildrenProps.reverse().find(({ isDisabled }) => !isDisabled);
+                if (firstNonDisabledChildren) {
+                    selectTabIndex(firstNonDisabledChildren.index);
+                }
+                break;
+            }
         }
-        case y.HOME: {
-          const a = n.findIndex((e) => !e.props.disabled);
-          r(a);
-          break;
+    };
+    if (variant === 'simple') {
+        return (
+        // TODO: This needs to be reviewed how to handle correctly since it's supposed to have focus.
+        // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+        jsxRuntime.jsx("div", { ref: tabsRef, role: "tablist", "aria-label": label, onKeyDown: handleKeyDown, ...props, children: childrenArray }));
+    }
+    return (jsxRuntime.jsx(components.DefaultTabsRow, { ref: tabsRef, role: "tablist", alignItems: "flex-end", "aria-label": label, onKeyDown: handleKeyDown, ...props, children: childrenArray }));
+};
+const Tab = ({ disabled = false, id, children, variant, hasError = false, index, selectedTabIndex, onTabClick, ...props }) => {
+    const tabId = `${id}-tab`;
+    const tabPanelId = `${id}-tabpanel`;
+    const selected = index === selectedTabIndex;
+    const handleClick = () => {
+        if (disabled) {
+            return;
         }
-        case y.END: {
-          const e = n.map((f, o) => ({ isDisabled: f.props.disabled, index: o })).reverse().find(({ isDisabled: f }) => !f);
-          e && r(e.index);
-          break;
+        if (onTabClick) {
+            onTabClick();
         }
-      }
-  };
-  return h === "simple" ? (
-    // TODO: This needs to be reviewed how to handle correctly since it's supposed to have focus.
-    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    c("div", { ref: p, role: "tablist", "aria-label": d, onKeyDown: m, ...b, children: n })
-  ) : c(v, { ref: p, role: "tablist", alignItems: "flex-end", "aria-label": d, onKeyDown: m, ...b, children: n });
-}, L = ({ disabled: s = !1, id: b, children: i, variant: l, hasError: r = !1, index: d, selectedTabIndex: h, onTabClick: x, ...p }) => {
-  const n = `${b}-tab`, m = `${b}-tabpanel`, t = d === h, u = () => {
-    s || x && x();
-  };
-  if (l === "simple") {
-    let e;
-    return r ? e = "danger600" : t ? e = "primary600" : e = "neutral600", c($, { id: n, role: "tab", "aria-controls": t ? m : void 0, tabIndex: t ? 0 : -1, "aria-selected": t, type: "button", onClick: u, "aria-disabled": s, ...p, children: c(B, { padding: 4, selected: t, hasError: r, children: c(C, { variant: "sigma", textColor: e, children: i }) }) });
-  }
-  r && console.warn('The "hasError" prop is only available for the "simple" variant.');
-  const a = h && h - 1 === d;
-  return c(E, { id: n, role: "tab", type: "button", "aria-controls": t ? m : void 0, tabIndex: t ? 0 : -1, "aria-selected": t, onClick: u, "aria-disabled": s, showRightBorder: !!a, ...p, children: c(K, { padding: t ? 4 : 3, background: t ? "neutral0" : "neutral100", selected: t, children: c(C, { fontWeight: "bold", textColor: t ? "primary700" : "neutral600", children: i }) }) });
-};
-export {
-  L as Tab,
-  G as Tabs
+    };
+    if (variant === 'simple') {
+        let textColor;
+        if (hasError) {
+            textColor = 'danger600';
+        }
+        else if (selected) {
+            textColor = 'primary600';
+        }
+        else if (disabled) {
+            textColor = 'neutral600';
+        }
+        else {
+            textColor = 'neutral600';
+        }
+        return (jsxRuntime.jsx(TabButton, { id: tabId, role: "tab", "aria-controls": selected ? tabPanelId : undefined, tabIndex: selected ? 0 : -1, "aria-selected": selected, type: "button", onClick: handleClick, "aria-disabled": disabled, ...props, children: jsxRuntime.jsx(components.SimpleTabBox, { padding: 4, selected: selected, hasError: hasError, children: jsxRuntime.jsx(Typography.Typography, { variant: "sigma", textColor: textColor, children: children }) }) }));
+    }
+    if (hasError) {
+        console.warn('The "hasError" prop is only available for the "simple" variant.');
+    }
+    const showRightBorder = selectedTabIndex && selectedTabIndex - 1 === index;
+    return (jsxRuntime.jsx(components.DefaultTabButton, { id: tabId, role: "tab", type: "button", "aria-controls": selected ? tabPanelId : undefined, tabIndex: selected ? 0 : -1, "aria-selected": selected, onClick: handleClick, "aria-disabled": disabled, showRightBorder: Boolean(showRightBorder), ...props, children: jsxRuntime.jsx(components.DefaultTabBox, { padding: selected ? 4 : 3, background: selected ? 'neutral0' : 'neutral100', selected: selected, children: jsxRuntime.jsx(Typography.Typography, { fontWeight: "bold", textColor: selected ? 'primary700' : 'neutral600', children: children }) }) }));
 };
+
+exports.Tab = Tab;
+exports.Tabs = Tabs;

package/dist/Tabs/Tabs.mjs

@@ -0,0 +1,144 @@
+import { jsx } from 'react/jsx-runtime';
+import { Children, cloneElement, useRef, useEffect } from 'react';
+import { useCallbackRef } from '@strapi/ui-primitives';
+import styled from 'styled-components';
+import { DefaultTabsRow, SimpleTabBox, DefaultTabButton, DefaultTabBox } from './components.mjs';
+import { useTabs } from './TabsContext.mjs';
+import { KeyboardKeys } from '../helpers/keyboardKeys.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const useTabsFocus = (selectedTabIndex, onTabChange) => {
+    const tabsRef = useRef(null);
+    const mountedRef = useRef(false);
+    const handleTabChange = useCallbackRef(onTabChange);
+    useEffect(() => {
+        if (!tabsRef.current)
+            return;
+        // We don't' want to send the focus to the tab when it mounts
+        // It could break the navigating flow of the users if the focus was supposed to be
+        // on another element
+        if (mountedRef.current) {
+            const nextFocusEl = tabsRef.current.querySelector('[tabindex="0"]');
+            if (nextFocusEl) {
+                nextFocusEl.focus();
+                handleTabChange(selectedTabIndex);
+            }
+        }
+        if (!mountedRef.current) {
+            mountedRef.current = true;
+        }
+    }, [selectedTabIndex, handleTabChange]);
+    return tabsRef;
+};
+const TabButton = styled.button `
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+`;
+const Tabs = ({ children, ...props }) => {
+    const { id, selectedTabIndex, selectTabIndex, label, variant, onTabChange } = useTabs();
+    const tabsRef = useTabsFocus(selectedTabIndex, onTabChange);
+    const childrenArray = Children.toArray(children).map((node, index) => cloneElement(node, {
+        id: `${id}-${index}`,
+        index,
+        selectedTabIndex,
+        onTabClick: () => selectTabIndex(index),
+        variant,
+    }));
+    const handleKeyDown = (e) => {
+        const hasAllChildrenDisabled = childrenArray.every((node) => node.props.disabled);
+        if (hasAllChildrenDisabled) {
+            return;
+        }
+        switch (e.key) {
+            case KeyboardKeys.RIGHT: {
+                const nextWantedIndex = selectedTabIndex + 1;
+                const findNextIndex = (ref) => {
+                    const isDisabled = childrenArray[ref].props.disabled;
+                    if (!isDisabled) {
+                        return ref;
+                    }
+                    if (ref === childrenArray.length - 1) {
+                        return findNextIndex(0);
+                    }
+                    return findNextIndex(ref + 1);
+                };
+                const nextIndex = findNextIndex(nextWantedIndex >= childrenArray.length ? 0 : nextWantedIndex);
+                selectTabIndex(nextIndex);
+                break;
+            }
+            case KeyboardKeys.LEFT: {
+                const nextWantedIndex = selectedTabIndex - 1;
+                const findNextIndex = (ref) => {
+                    const isDisabled = childrenArray[ref].props.disabled;
+                    if (!isDisabled) {
+                        return ref;
+                    }
+                    if (ref === 0) {
+                        return findNextIndex(childrenArray.length - 1);
+                    }
+                    return findNextIndex(ref - 1);
+                };
+                const nextIndex = findNextIndex(nextWantedIndex < 0 ? childrenArray.length - 1 : nextWantedIndex);
+                selectTabIndex(nextIndex);
+                break;
+            }
+            case KeyboardKeys.HOME: {
+                const nextIndex = childrenArray.findIndex((node) => !node.props.disabled);
+                selectTabIndex(nextIndex);
+                break;
+            }
+            case KeyboardKeys.END: {
+                const arrayOfChildrenProps = childrenArray.map((node, index) => ({ isDisabled: node.props.disabled, index }));
+                const firstNonDisabledChildren = arrayOfChildrenProps.reverse().find(({ isDisabled }) => !isDisabled);
+                if (firstNonDisabledChildren) {
+                    selectTabIndex(firstNonDisabledChildren.index);
+                }
+                break;
+            }
+        }
+    };
+    if (variant === 'simple') {
+        return (
+        // TODO: This needs to be reviewed how to handle correctly since it's supposed to have focus.
+        // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+        jsx("div", { ref: tabsRef, role: "tablist", "aria-label": label, onKeyDown: handleKeyDown, ...props, children: childrenArray }));
+    }
+    return (jsx(DefaultTabsRow, { ref: tabsRef, role: "tablist", alignItems: "flex-end", "aria-label": label, onKeyDown: handleKeyDown, ...props, children: childrenArray }));
+};
+const Tab = ({ disabled = false, id, children, variant, hasError = false, index, selectedTabIndex, onTabClick, ...props }) => {
+    const tabId = `${id}-tab`;
+    const tabPanelId = `${id}-tabpanel`;
+    const selected = index === selectedTabIndex;
+    const handleClick = () => {
+        if (disabled) {
+            return;
+        }
+        if (onTabClick) {
+            onTabClick();
+        }
+    };
+    if (variant === 'simple') {
+        let textColor;
+        if (hasError) {
+            textColor = 'danger600';
+        }
+        else if (selected) {
+            textColor = 'primary600';
+        }
+        else if (disabled) {
+            textColor = 'neutral600';
+        }
+        else {
+            textColor = 'neutral600';
+        }
+        return (jsx(TabButton, { id: tabId, role: "tab", "aria-controls": selected ? tabPanelId : undefined, tabIndex: selected ? 0 : -1, "aria-selected": selected, type: "button", onClick: handleClick, "aria-disabled": disabled, ...props, children: jsx(SimpleTabBox, { padding: 4, selected: selected, hasError: hasError, children: jsx(Typography, { variant: "sigma", textColor: textColor, children: children }) }) }));
+    }
+    if (hasError) {
+        console.warn('The "hasError" prop is only available for the "simple" variant.');
+    }
+    const showRightBorder = selectedTabIndex && selectedTabIndex - 1 === index;
+    return (jsx(DefaultTabButton, { id: tabId, role: "tab", type: "button", "aria-controls": selected ? tabPanelId : undefined, tabIndex: selected ? 0 : -1, "aria-selected": selected, onClick: handleClick, "aria-disabled": disabled, showRightBorder: Boolean(showRightBorder), ...props, children: jsx(DefaultTabBox, { padding: selected ? 4 : 3, background: selected ? 'neutral0' : 'neutral100', selected: selected, children: jsx(Typography, { fontWeight: "bold", textColor: selected ? 'primary700' : 'neutral600', children: children }) }) }));
+};
+
+export { Tab, Tabs };

package/dist/Tabs/TabsContext.js

@@ -1,13 +1,18 @@
-import { createContext as e, useContext as t } from "react";
-const n = e({
-  id: "",
-  label: "",
-  selectedTabIndex: 0,
-  selectTabIndex() {
-    throw new Error("TabsContext.selectTabIndex is not implemented.");
-  }
-}), s = () => t(n);
-export {
-  n as TabsContext,
-  s as useTabs
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+
+const TabsContext = React.createContext({
+    id: '',
+    label: '',
+    selectedTabIndex: 0,
+    selectTabIndex() {
+        throw new Error('TabsContext.selectTabIndex is not implemented.');
+    },
+});
+const useTabs = () => React.useContext(TabsContext);
+
+exports.TabsContext = TabsContext;
+exports.useTabs = useTabs;

package/dist/Tabs/TabsContext.mjs

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+const TabsContext = createContext({
+    id: '',
+    label: '',
+    selectedTabIndex: 0,
+    selectTabIndex() {
+        throw new Error('TabsContext.selectTabIndex is not implemented.');
+    },
+});
+const useTabs = () => useContext(TabsContext);
+
+export { TabsContext, useTabs };

package/dist/Tabs/components.js

@@ -1,22 +1,43 @@
-import t from "styled-components";
-import { Box as n } from "../Box/Box.js";
-import { Flex as l } from "../Flex/Flex.js";
-const u = t(n)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styled = require('styled-components');
+const Box = require('../Box/Box.js');
+const Flex = require('../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+/** Simple variant */
+const SimpleTabBox = styled__default.default(Box.Box) `
   border-bottom: 2px solid
-    ${({ theme: r, selected: o, hasError: d }) => o ? d ? r.colors.danger600 : r.colors.primary600 : "transparent"};
-`, e = t(n)`
-  border-bottom: 1px solid ${({ theme: r, selected: o }) => o ? r.colors.neutral0 : r.colors.neutral150};
-`, a = t.button`
+    ${({ theme, selected, hasError }) => {
+    if (selected) {
+        if (hasError) {
+            return theme.colors.danger600;
+        }
+        return theme.colors.primary600;
+    }
+    return 'transparent';
+}};
+`;
+/** Default variant */
+const DefaultTabBox = styled__default.default(Box.Box) `
+  border-bottom: 1px solid ${({ theme, selected }) => (selected ? theme.colors.neutral0 : theme.colors.neutral150)};
+`;
+const DefaultTabButton = styled__default.default.button `
   border: none;
   background: transparent;
   padding: 0;
 
-  & + & > ${e} {
-    border-left: 1px solid ${({ theme: r }) => r.colors.neutral150};
+  & + & > ${DefaultTabBox} {
+    border-left: 1px solid ${({ theme }) => theme.colors.neutral150};
   }
 
-  ${e} {
-    border-right: ${({ theme: r, showRightBorder: o }) => o ? `1px solid ${r.colors.neutral150}` : "none"};
+  ${DefaultTabBox} {
+    border-right: ${({ theme, showRightBorder }) => showRightBorder ? `1px solid ${theme.colors.neutral150}` : 'none'};
   }
 
   // Hack preventing the outline from being overflow by the following tab
@@ -25,28 +46,28 @@ const u = t(n)`
   &[aria-disabled='true'] {
     cursor: not-allowed;
   }
-`, $ = t(l)`
+`;
+const DefaultTabsRow = styled__default.default(Flex.Flex) `
   & > * {
     flex: 1;
   }
 
-  & ${a}:first-of-type ${e} {
-    border-radius: ${({ theme: r }) => `${r.borderRadius} 0 0 0`};
+  & ${DefaultTabButton}:first-of-type ${DefaultTabBox} {
+    border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 0`};
   }
 
-  & ${a}:last-of-type ${e} {
-    border-radius: ${({ theme: r }) => `0 ${r.borderRadius} 0 0`};
+  & ${DefaultTabButton}:last-of-type ${DefaultTabBox} {
+    border-radius: ${({ theme }) => `0 ${theme.borderRadius} 0 0`};
   }
 
-  & ${a}[aria-selected="true"] ${e} {
-    border-radius: ${({ theme: r }) => `${r.borderRadius} ${r.borderRadius} 0 0`};
+  & ${DefaultTabButton}[aria-selected="true"] ${DefaultTabBox} {
+    border-radius: ${({ theme }) => `${theme.borderRadius} ${theme.borderRadius} 0 0`};
     border-left: none;
     border-right: none;
   }
 `;
-export {
-  e as DefaultTabBox,
-  a as DefaultTabButton,
-  $ as DefaultTabsRow,
-  u as SimpleTabBox
-};
+
+exports.DefaultTabBox = DefaultTabBox;
+exports.DefaultTabButton = DefaultTabButton;
+exports.DefaultTabsRow = DefaultTabsRow;
+exports.SimpleTabBox = SimpleTabBox;

package/dist/Tabs/components.mjs

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+import { Box } from '../Box/Box.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+/** Simple variant */
+const SimpleTabBox = styled(Box) `
+  border-bottom: 2px solid
+    ${({ theme, selected, hasError }) => {
+    if (selected) {
+        if (hasError) {
+            return theme.colors.danger600;
+        }
+        return theme.colors.primary600;
+    }
+    return 'transparent';
+}};
+`;
+/** Default variant */
+const DefaultTabBox = styled(Box) `
+  border-bottom: 1px solid ${({ theme, selected }) => (selected ? theme.colors.neutral0 : theme.colors.neutral150)};
+`;
+const DefaultTabButton = styled.button `
+  border: none;
+  background: transparent;
+  padding: 0;
+
+  & + & > ${DefaultTabBox} {
+    border-left: 1px solid ${({ theme }) => theme.colors.neutral150};
+  }
+
+  ${DefaultTabBox} {
+    border-right: ${({ theme, showRightBorder }) => showRightBorder ? `1px solid ${theme.colors.neutral150}` : 'none'};
+  }
+
+  // Hack preventing the outline from being overflow by the following tab
+  outline-offset: -2px;
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+`;
+const DefaultTabsRow = styled(Flex) `
+  & > * {
+    flex: 1;
+  }
+
+  & ${DefaultTabButton}:first-of-type ${DefaultTabBox} {
+    border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 0`};
+  }
+
+  & ${DefaultTabButton}:last-of-type ${DefaultTabBox} {
+    border-radius: ${({ theme }) => `0 ${theme.borderRadius} 0 0`};
+  }
+
+  & ${DefaultTabButton}[aria-selected="true"] ${DefaultTabBox} {
+    border-radius: ${({ theme }) => `${theme.borderRadius} ${theme.borderRadius} 0 0`};
+    border-left: none;
+    border-right: none;
+  }
+`;
+
+export { DefaultTabBox, DefaultTabButton, DefaultTabsRow, SimpleTabBox };

package/dist/Tabs/index.js

@@ -1,10 +1,15 @@
-import { Tab as r, Tabs as b } from "./Tabs.js";
-import { TabPanel as T, TabPanels as p } from "./TabPanels.js";
-import { TabGroup as m } from "./TabGroup.js";
-export {
-  r as Tab,
-  m as TabGroup,
-  T as TabPanel,
-  p as TabPanels,
-  b as Tabs
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Tabs = require('./Tabs.js');
+const TabPanels = require('./TabPanels.js');
+const TabGroup = require('./TabGroup.js');
+
+
+
+exports.Tab = Tabs.Tab;
+exports.Tabs = Tabs.Tabs;
+exports.TabPanel = TabPanels.TabPanel;
+exports.TabPanels = TabPanels.TabPanels;
+exports.TabGroup = TabGroup.TabGroup;

package/dist/Tabs/index.mjs

@@ -0,0 +1,3 @@
+export { Tab, Tabs } from './Tabs.mjs';
+export { TabPanel, TabPanels } from './TabPanels.mjs';
+export { TabGroup } from './TabGroup.mjs';