@guardian/stand 0.0.56 → 0.0.57

package/dist/Tabs.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_tabs = require("./styleD/build/typescript/component/tabs.cjs");
+const require_Tabs = require("./components/Tabs/Tabs.cjs");
+exports.Tabs = require_Tabs.Tabs;
+exports.componentTabs = require_tabs.componentTabs;

package/dist/Tabs.d.cts

@@ -0,0 +1,5 @@
+import { ComponentTabs, componentTabs } from "./styleD/build/typescript/component/tabs.cjs";
+import { PartialTabListTheme, PartialTabPanelTheme, PartialTabPanelsTheme, PartialTabTheme, PartialTabsTheme } from "./components/Tabs/styles.cjs";
+import { TabListProps, TabPanelProps, TabPanelsProps, TabProps, TabsProps } from "./components/Tabs/types.cjs";
+import { Tabs } from "./components/Tabs/Tabs.cjs";
+export { type ComponentTabs, type TabListProps, type PartialTabListTheme as TabListTheme, type TabPanelProps, type PartialTabPanelTheme as TabPanelTheme, type TabPanelsProps, type PartialTabPanelsTheme as TabPanelsTheme, type TabProps, type PartialTabTheme as TabTheme, Tabs, type TabsProps, type PartialTabsTheme as TabsTheme, componentTabs };

package/dist/Tabs.d.ts

@@ -0,0 +1,5 @@
+import { ComponentTabs, componentTabs } from "./styleD/build/typescript/component/tabs.js";
+import { PartialTabListTheme, PartialTabPanelTheme, PartialTabPanelsTheme, PartialTabTheme, PartialTabsTheme } from "./components/Tabs/styles.js";
+import { TabListProps, TabPanelProps, TabPanelsProps, TabProps, TabsProps } from "./components/Tabs/types.js";
+import { Tabs } from "./components/Tabs/Tabs.js";
+export { type ComponentTabs, type TabListProps, type PartialTabListTheme as TabListTheme, type TabPanelProps, type PartialTabPanelTheme as TabPanelTheme, type TabPanelsProps, type PartialTabPanelsTheme as TabPanelsTheme, type TabProps, type PartialTabTheme as TabTheme, Tabs, type TabsProps, type PartialTabsTheme as TabsTheme, componentTabs };

package/dist/Tabs.js

@@ -0,0 +1,3 @@
+import { componentTabs } from "./styleD/build/typescript/component/tabs.js";
+import { Tabs } from "./components/Tabs/Tabs.js";
+export { Tabs, componentTabs };

package/dist/components/Tabs/Tabs.cjs

@@ -0,0 +1,88 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_Icon = require("../Icon/Icon.cjs");
+const require_styles = require("./styles.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+//#region src/components/Tabs/Tabs.tsx
+function TabsRoot({ children, orientation = "horizontal", size = "md", theme = {}, cssOverrides, ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultTabsTheme, theme);
+	const validChildren = [];
+	react.default.Children.forEach(children, (child, i) => {
+		if (!react.default.isValidElement(child)) return;
+		if (child.type === TabList || child.type === TabPanels) validChildren.push(react.default.cloneElement(child, {
+			key: `${child.key}-${i}`,
+			orientation,
+			size
+		}));
+	});
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Tabs, {
+		css: [require_styles.tabsStyles(mergedTheme), cssOverrides],
+		orientation,
+		...props,
+		children: validChildren
+	});
+}
+function TabList({ children, orientation = "horizontal", size = "md", theme = {}, cssOverrides, ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultTabListTheme, theme);
+	const tabs = [];
+	react.default.Children.forEach(children, (child, i) => {
+		if (!react.default.isValidElement(child)) return;
+		if (child.type === Tab) tabs.push(react.default.cloneElement(child, {
+			key: `${child.key}-${i}`,
+			orientation,
+			size
+		}));
+	});
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.TabList, {
+		css: [require_styles.tabListStyles(mergedTheme), cssOverrides],
+		...props,
+		children: tabs
+	});
+}
+function Tab({ children, orientation = "horizontal", size = "md", icon, theme = {}, cssOverrides, ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultTabTheme, theme);
+	const iconSize = size === "md" ? "lg" : "sm";
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.Tab, {
+		css: [require_styles.tabStyles(mergedTheme, {
+			orientation,
+			size,
+			icon
+		}), cssOverrides],
+		...props,
+		children: [icon && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+			size: iconSize,
+			children: icon
+		}), children]
+	});
+}
+function TabPanels({ children, theme = {}, cssOverrides, ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultTabPanelsTheme, theme);
+	const panels = [];
+	react.default.Children.forEach(children, (child, i) => {
+		if (!react.default.isValidElement(child)) return;
+		if (child.type === TabPanel) panels.push(react.default.cloneElement(child, { key: `${child.key}-${i}` }));
+	});
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.TabPanels, {
+		css: [require_styles.tabPanelsStyles(mergedTheme), cssOverrides],
+		...props,
+		children: panels
+	});
+}
+function TabPanel({ children, theme = {}, cssOverrides, ...props }) {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.TabPanel, {
+		css: [require_styles.tabPanelStyles(require_mergeDeep.mergeDeep(require_styles.defaultTabPanelTheme, theme)), cssOverrides],
+		...props,
+		children
+	});
+}
+const Tabs = Object.assign(TabsRoot, {
+	TabList,
+	Tab,
+	TabPanels,
+	TabPanel
+});
+//#endregion
+exports.Tabs = Tabs;

package/dist/components/Tabs/Tabs.d.cts

@@ -0,0 +1,15 @@
+import { TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabPanelsProps as TabPanelsProps$1, TabProps as TabProps$1, TabsProps as TabsProps$1 } from "./types.cjs";
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from "react-aria-components";
+import React from "react";
+
+//#region src/components/Tabs/Tabs.d.ts
+interface TabsCompound {
+  (props: TabsProps$1): React.ReactElement<TabsProps$1, typeof Tabs>;
+  TabList: (props: TabListProps$1) => React.ReactElement<TabListProps$1, typeof TabList>;
+  Tab: (props: TabProps$1) => React.ReactElement<TabProps$1, typeof Tab>;
+  TabPanels: (props: TabPanelsProps$1) => React.ReactElement<TabPanelsProps$1, typeof TabPanels>;
+  TabPanel: (props: TabPanelProps$1) => React.ReactElement<TabPanelProps$1, typeof TabPanel>;
+}
+declare const Tabs$1: TabsCompound;
+//#endregion
+export { Tabs$1 as Tabs };

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,15 @@
+import { TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabPanelsProps as TabPanelsProps$1, TabProps as TabProps$1, TabsProps as TabsProps$1 } from "./types.js";
+import React from "react";
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from "react-aria-components";
+
+//#region src/components/Tabs/Tabs.d.ts
+interface TabsCompound {
+  (props: TabsProps$1): React.ReactElement<TabsProps$1, typeof Tabs>;
+  TabList: (props: TabListProps$1) => React.ReactElement<TabListProps$1, typeof TabList>;
+  Tab: (props: TabProps$1) => React.ReactElement<TabProps$1, typeof Tab>;
+  TabPanels: (props: TabPanelsProps$1) => React.ReactElement<TabPanelsProps$1, typeof TabPanels>;
+  TabPanel: (props: TabPanelProps$1) => React.ReactElement<TabPanelProps$1, typeof TabPanel>;
+}
+declare const Tabs$1: TabsCompound;
+//#endregion
+export { Tabs$1 as Tabs };

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,86 @@
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { Icon } from "../Icon/Icon.js";
+import { defaultTabListTheme, defaultTabPanelTheme, defaultTabPanelsTheme, defaultTabTheme, defaultTabsTheme, tabListStyles, tabPanelStyles, tabPanelsStyles, tabStyles, tabsStyles } from "./styles.js";
+import React from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from "react-aria-components";
+//#region src/components/Tabs/Tabs.tsx
+function TabsRoot({ children, orientation = "horizontal", size = "md", theme = {}, cssOverrides, ...props }) {
+	const mergedTheme = mergeDeep(defaultTabsTheme, theme);
+	const validChildren = [];
+	React.Children.forEach(children, (child, i) => {
+		if (!React.isValidElement(child)) return;
+		if (child.type === TabList$1 || child.type === TabPanels$1) validChildren.push(React.cloneElement(child, {
+			key: `${child.key}-${i}`,
+			orientation,
+			size
+		}));
+	});
+	return /* @__PURE__ */ jsx(Tabs, {
+		css: [tabsStyles(mergedTheme), cssOverrides],
+		orientation,
+		...props,
+		children: validChildren
+	});
+}
+function TabList$1({ children, orientation = "horizontal", size = "md", theme = {}, cssOverrides, ...props }) {
+	const mergedTheme = mergeDeep(defaultTabListTheme, theme);
+	const tabs = [];
+	React.Children.forEach(children, (child, i) => {
+		if (!React.isValidElement(child)) return;
+		if (child.type === Tab$1) tabs.push(React.cloneElement(child, {
+			key: `${child.key}-${i}`,
+			orientation,
+			size
+		}));
+	});
+	return /* @__PURE__ */ jsx(TabList, {
+		css: [tabListStyles(mergedTheme), cssOverrides],
+		...props,
+		children: tabs
+	});
+}
+function Tab$1({ children, orientation = "horizontal", size = "md", icon, theme = {}, cssOverrides, ...props }) {
+	const mergedTheme = mergeDeep(defaultTabTheme, theme);
+	const iconSize = size === "md" ? "lg" : "sm";
+	return /* @__PURE__ */ jsxs(Tab, {
+		css: [tabStyles(mergedTheme, {
+			orientation,
+			size,
+			icon
+		}), cssOverrides],
+		...props,
+		children: [icon && /* @__PURE__ */ jsx(Icon, {
+			size: iconSize,
+			children: icon
+		}), children]
+	});
+}
+function TabPanels$1({ children, theme = {}, cssOverrides, ...props }) {
+	const mergedTheme = mergeDeep(defaultTabPanelsTheme, theme);
+	const panels = [];
+	React.Children.forEach(children, (child, i) => {
+		if (!React.isValidElement(child)) return;
+		if (child.type === TabPanel$1) panels.push(React.cloneElement(child, { key: `${child.key}-${i}` }));
+	});
+	return /* @__PURE__ */ jsx(TabPanels, {
+		css: [tabPanelsStyles(mergedTheme), cssOverrides],
+		...props,
+		children: panels
+	});
+}
+function TabPanel$1({ children, theme = {}, cssOverrides, ...props }) {
+	return /* @__PURE__ */ jsx(TabPanel, {
+		css: [tabPanelStyles(mergeDeep(defaultTabPanelTheme, theme)), cssOverrides],
+		...props,
+		children
+	});
+}
+const Tabs$1 = Object.assign(TabsRoot, {
+	TabList: TabList$1,
+	Tab: Tab$1,
+	TabPanels: TabPanels$1,
+	TabPanel: TabPanel$1
+});
+//#endregion
+export { Tabs$1 as Tabs };

package/dist/components/Tabs/styles.cjs

@@ -0,0 +1,146 @@
+const require_typography = require("../../styleD/utils/semantic/typography.cjs");
+const require_tabs = require("../../styleD/build/typescript/component/tabs.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/Tabs/styles.ts
+const defaultTabsTheme = require_tabs.componentTabs.tabs;
+const tabsStyles = (theme) => {
+	return _emotion_react.css`
+		display: ${theme.shared.display};
+		max-width: ${theme.shared.maxWidth};
+
+		&[data-orientation='vertical'] {
+			flex-direction: ${theme.shared.orientation.vertical.flexDirection};
+			width: ${theme.shared.orientation.vertical.width};
+		}
+
+		&[data-orientation='horizontal'] {
+			flex-direction: ${theme.shared.orientation.horizontal.flexDirection};
+		}
+	`;
+};
+const defaultTabTheme = require_tabs.componentTabs.tab;
+const tabStyles = (theme, { orientation, size, icon }) => {
+	const hasIcon = !!icon;
+	return _emotion_react.css`
+		position: ${theme.shared.position};
+		display: ${theme.shared.display};
+		gap: ${theme.shared.gap};
+		height: ${theme[size].height};
+		cursor: ${theme.shared.cursor};
+		flex-direction: ${theme.shared.flexDirection};
+		justify-content: ${theme.shared.justifyContent};
+		align-items: ${theme.shared.alignItems};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+		${hasIcon && _emotion_react.css`
+			padding-right: ${theme.shared.padding.withIcon.right};
+		`}
+		color: ${theme.shared.color};
+		${require_typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
+
+		&[data-disabled] {
+			cursor: ${theme.shared.disabled.cursor};
+			color: ${theme.shared.disabled.color};
+		}
+
+		/* Override default browser focus behaviour */
+		&:focus-visible {
+			outline: none;
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.shared.focusVisible.outline};
+			outline-offset: ${theme.shared.focusVisible.outlineOffset};
+		}
+
+		&[data-selected] {
+			background: ${theme.shared.selected.background};
+		}
+
+		&[data-hovered]::after,
+		&[data-selected]::after {
+			background: ${theme.shared.selected.border.background};
+		}
+
+		${orientation === "horizontal" && _emotion_react.css`
+			border-right: ${theme.shared.border};
+
+			&:first-child {
+				border-left: ${theme.shared.border};
+			}
+
+			&::after {
+				content: '';
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				height: ${theme.shared.selected.border.size};
+				background: transparent;
+			}
+		`}
+
+		${orientation === "vertical" && _emotion_react.css`
+			border-bottom: ${theme.shared.border};
+			padding-right: ${theme.shared.padding.verticalRight};
+			${hasIcon && _emotion_react.css`
+				padding-right: ${theme.shared.padding.withIcon.verticalRight};
+			`}
+
+			&:first-child {
+				border-top: ${theme.shared.border};
+			}
+
+			&::after {
+				content: '';
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				right: 0;
+				width: ${theme.shared.selected.border.size};
+				background: transparent;
+			}
+		`}
+	`;
+};
+const defaultTabListTheme = require_tabs.componentTabs.tabList;
+const tabListStyles = (theme) => {
+	return _emotion_react.css`
+		display: ${theme.shared.display};
+
+		&[data-orientation='horizontal'] {
+			flex-direction: ${theme.shared.orientation.horizontal.flexDirection};
+		}
+
+		&[data-orientation='vertical'] {
+			flex-direction: ${theme.shared.orientation.vertical.flexDirection};
+		}
+	`;
+};
+const defaultTabPanelsTheme = require_tabs.componentTabs.tabPanels;
+const tabPanelsStyles = (theme) => {
+	return _emotion_react.css`
+		position: ${theme.shared.position};
+		height: var(--tab-panel-height, auto);
+		width: var(--tab-panel-width, auto);
+		overflow: ${theme.shared.overflow};
+	`;
+};
+const defaultTabPanelTheme = require_tabs.componentTabs.tabPanel;
+const tabPanelStyles = (theme) => {
+	return _emotion_react.css`
+		/* TODO: Designs to be provided for tab panel */
+		position: ${theme.shared.position};
+	`;
+};
+//#endregion
+exports.defaultTabListTheme = defaultTabListTheme;
+exports.defaultTabPanelTheme = defaultTabPanelTheme;
+exports.defaultTabPanelsTheme = defaultTabPanelsTheme;
+exports.defaultTabTheme = defaultTabTheme;
+exports.defaultTabsTheme = defaultTabsTheme;
+exports.tabListStyles = tabListStyles;
+exports.tabPanelStyles = tabPanelStyles;
+exports.tabPanelsStyles = tabPanelsStyles;
+exports.tabStyles = tabStyles;
+exports.tabsStyles = tabsStyles;

package/dist/components/Tabs/styles.d.cts

@@ -0,0 +1,17 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentTabs } from "../../styleD/build/typescript/component/tabs.cjs";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/Tabs/styles.d.ts
+type TabsTheme = Prettify<ComponentTabs['tabs']>;
+type PartialTabsTheme = DeepPartial<TabsTheme>;
+type TabTheme = Prettify<ComponentTabs['tab']>;
+type PartialTabTheme = DeepPartial<TabTheme>;
+type TabListTheme = Prettify<ComponentTabs['tabList']>;
+type PartialTabListTheme = DeepPartial<TabListTheme>;
+type TabPanelsTheme = Prettify<ComponentTabs['tabPanels']>;
+type PartialTabPanelsTheme = DeepPartial<TabPanelsTheme>;
+type TabPanelTheme = Prettify<ComponentTabs['tabPanel']>;
+type PartialTabPanelTheme = DeepPartial<TabPanelTheme>;
+//#endregion
+export { PartialTabListTheme, PartialTabPanelTheme, PartialTabPanelsTheme, PartialTabTheme, PartialTabsTheme, TabListTheme, TabPanelTheme, TabPanelsTheme, TabTheme, TabsTheme };

package/dist/components/Tabs/styles.d.ts

@@ -0,0 +1,17 @@
+import { DeepPartial, Prettify } from "../../util/types.js";
+import { ComponentTabs } from "../../styleD/build/typescript/component/tabs.js";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/Tabs/styles.d.ts
+type TabsTheme = Prettify<ComponentTabs['tabs']>;
+type PartialTabsTheme = DeepPartial<TabsTheme>;
+type TabTheme = Prettify<ComponentTabs['tab']>;
+type PartialTabTheme = DeepPartial<TabTheme>;
+type TabListTheme = Prettify<ComponentTabs['tabList']>;
+type PartialTabListTheme = DeepPartial<TabListTheme>;
+type TabPanelsTheme = Prettify<ComponentTabs['tabPanels']>;
+type PartialTabPanelsTheme = DeepPartial<TabPanelsTheme>;
+type TabPanelTheme = Prettify<ComponentTabs['tabPanel']>;
+type PartialTabPanelTheme = DeepPartial<TabPanelTheme>;
+//#endregion
+export { PartialTabListTheme, PartialTabPanelTheme, PartialTabPanelsTheme, PartialTabTheme, PartialTabsTheme, TabListTheme, TabPanelTheme, TabPanelsTheme, TabTheme, TabsTheme };

package/dist/components/Tabs/styles.js

@@ -0,0 +1,137 @@
+import { convertTypographyToEmotionStringStyle } from "../../styleD/utils/semantic/typography.js";
+import { componentTabs } from "../../styleD/build/typescript/component/tabs.js";
+import { css } from "@emotion/react";
+//#region src/components/Tabs/styles.ts
+const defaultTabsTheme = componentTabs.tabs;
+const tabsStyles = (theme) => {
+	return css`
+		display: ${theme.shared.display};
+		max-width: ${theme.shared.maxWidth};
+
+		&[data-orientation='vertical'] {
+			flex-direction: ${theme.shared.orientation.vertical.flexDirection};
+			width: ${theme.shared.orientation.vertical.width};
+		}
+
+		&[data-orientation='horizontal'] {
+			flex-direction: ${theme.shared.orientation.horizontal.flexDirection};
+		}
+	`;
+};
+const defaultTabTheme = componentTabs.tab;
+const tabStyles = (theme, { orientation, size, icon }) => {
+	const hasIcon = !!icon;
+	return css`
+		position: ${theme.shared.position};
+		display: ${theme.shared.display};
+		gap: ${theme.shared.gap};
+		height: ${theme[size].height};
+		cursor: ${theme.shared.cursor};
+		flex-direction: ${theme.shared.flexDirection};
+		justify-content: ${theme.shared.justifyContent};
+		align-items: ${theme.shared.alignItems};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+		${hasIcon && css`
+			padding-right: ${theme.shared.padding.withIcon.right};
+		`}
+		color: ${theme.shared.color};
+		${convertTypographyToEmotionStringStyle(theme[size].typography)}
+
+		&[data-disabled] {
+			cursor: ${theme.shared.disabled.cursor};
+			color: ${theme.shared.disabled.color};
+		}
+
+		/* Override default browser focus behaviour */
+		&:focus-visible {
+			outline: none;
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.shared.focusVisible.outline};
+			outline-offset: ${theme.shared.focusVisible.outlineOffset};
+		}
+
+		&[data-selected] {
+			background: ${theme.shared.selected.background};
+		}
+
+		&[data-hovered]::after,
+		&[data-selected]::after {
+			background: ${theme.shared.selected.border.background};
+		}
+
+		${orientation === "horizontal" && css`
+			border-right: ${theme.shared.border};
+
+			&:first-child {
+				border-left: ${theme.shared.border};
+			}
+
+			&::after {
+				content: '';
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				height: ${theme.shared.selected.border.size};
+				background: transparent;
+			}
+		`}
+
+		${orientation === "vertical" && css`
+			border-bottom: ${theme.shared.border};
+			padding-right: ${theme.shared.padding.verticalRight};
+			${hasIcon && css`
+				padding-right: ${theme.shared.padding.withIcon.verticalRight};
+			`}
+
+			&:first-child {
+				border-top: ${theme.shared.border};
+			}
+
+			&::after {
+				content: '';
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				right: 0;
+				width: ${theme.shared.selected.border.size};
+				background: transparent;
+			}
+		`}
+	`;
+};
+const defaultTabListTheme = componentTabs.tabList;
+const tabListStyles = (theme) => {
+	return css`
+		display: ${theme.shared.display};
+
+		&[data-orientation='horizontal'] {
+			flex-direction: ${theme.shared.orientation.horizontal.flexDirection};
+		}
+
+		&[data-orientation='vertical'] {
+			flex-direction: ${theme.shared.orientation.vertical.flexDirection};
+		}
+	`;
+};
+const defaultTabPanelsTheme = componentTabs.tabPanels;
+const tabPanelsStyles = (theme) => {
+	return css`
+		position: ${theme.shared.position};
+		height: var(--tab-panel-height, auto);
+		width: var(--tab-panel-width, auto);
+		overflow: ${theme.shared.overflow};
+	`;
+};
+const defaultTabPanelTheme = componentTabs.tabPanel;
+const tabPanelStyles = (theme) => {
+	return css`
+		/* TODO: Designs to be provided for tab panel */
+		position: ${theme.shared.position};
+	`;
+};
+//#endregion
+export { defaultTabListTheme, defaultTabPanelTheme, defaultTabPanelsTheme, defaultTabTheme, defaultTabsTheme, tabListStyles, tabPanelStyles, tabPanelsStyles, tabStyles, tabsStyles };

package/dist/components/Tabs/types.d.cts

@@ -0,0 +1,63 @@
+import { DefaultPropsWithChildren } from "../../util/types.cjs";
+import { IconProps } from "../Icon/types.cjs";
+import { TabListTheme, TabPanelTheme, TabPanelsTheme, TabTheme, TabsTheme } from "./styles.cjs";
+import { TabListProps, TabPanelProps, TabPanelsProps, TabProps, TabsProps } from "react-aria-components";
+
+//#region src/components/Tabs/types.d.ts
+interface TabsProps$1 extends DefaultPropsWithChildren<TabsTheme, TabsProps['className']>, Omit<TabsProps, 'children'> {
+  /**
+   * Size of the tab. Can be either 'sm', 'md'.
+   * Shouldn't need to set this manually, as it will be inherited from the parent `Tabs`.
+   * @default 'md'
+   */
+  size?: keyof Omit<TabTheme, 'shared'>;
+}
+interface TabListProps$1 extends DefaultPropsWithChildren<TabListTheme, TabListProps<object>['className']>, Omit<TabListProps<object>, 'children'> {
+  /**
+   * Orientation of the tabs. Can be either 'horizontal' or 'vertical'.
+   * Shouldn't need to set this manually, as it will be inherited from the parent `Tabs`.
+   * @default 'horizontal'
+   */
+  orientation?: TabsProps$1['orientation'];
+  /**
+   * Size of the tab. Can be either 'sm', 'md'.
+   * Shouldn't need to set this manually, as it will be inherited from the parent `Tabs`.
+   * @default 'md'
+   */
+  size?: keyof Omit<TabTheme, 'shared'>;
+}
+interface TabProps$1 extends DefaultPropsWithChildren<TabTheme, TabProps['className']>, Omit<TabProps, 'children'> {
+  /**
+   * Orientation of the tabs. Can be either 'horizontal' or 'vertical'.
+   * Shouldn't need to set this manually, as it will be inherited from `Tabs` via `TabList`.
+   * @default 'horizontal'
+   */
+  orientation?: TabsProps$1['orientation'];
+  /**
+   * Size of the tab. Can be either 'sm', 'md'.
+   * Shouldn't need to set this manually, as it will be inherited from `Tabs` via `TabList`.
+   * @default 'md'
+   */
+  size?: keyof Omit<TabTheme, 'shared'>;
+  /**
+   * Icon to display in the tab. Can be either a symbol from the Icon component or a custom ReactNode.
+   */
+  icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+}
+interface TabPanelsProps$1 extends DefaultPropsWithChildren<TabPanelsTheme, TabPanelsProps<object>['className']>, Omit<TabPanelsProps<object>, 'children'> {
+  /**
+   * Orientation of the tabs. Can be either 'horizontal' or 'vertical'.
+   * Shouldn't need to set this manually, as it will be inherited from the parent `TabList`.
+   * @default 'horizontal'
+   */
+  orientation?: TabsProps$1['orientation'];
+  /**
+   * Size of the tab. Can be either 'sm', 'md'.
+   * Shouldn't need to set this manually, as it will be inherited from the parent `Tabs`.
+   * @default 'md'
+   */
+  size?: keyof Omit<TabTheme, 'shared'>;
+}
+interface TabPanelProps$1 extends DefaultPropsWithChildren<TabPanelTheme, TabPanelProps['className']>, Omit<TabPanelProps, 'children'> {}
+//#endregion
+export { TabListProps$1 as TabListProps, TabPanelProps$1 as TabPanelProps, TabPanelsProps$1 as TabPanelsProps, TabProps$1 as TabProps, TabsProps$1 as TabsProps };

package/dist/components/Tabs/types.d.ts

@@ -0,0 +1,63 @@
+import { DefaultPropsWithChildren } from "../../util/types.js";
+import { IconProps } from "../Icon/types.js";
+import { TabListTheme, TabPanelTheme, TabPanelsTheme, TabTheme, TabsTheme } from "./styles.js";
+import { TabListProps, TabPanelProps, TabPanelsProps, TabProps, TabsProps } from "react-aria-components";
+
+//#region src/components/Tabs/types.d.ts
+interface TabsProps$1 extends DefaultPropsWithChildren<TabsTheme, TabsProps['className']>, Omit<TabsProps, 'children'> {
+  /**
+   * Size of the tab. Can be either 'sm', 'md'.
+   * Shouldn't need to set this manually, as it will be inherited from the parent `Tabs`.
+   * @default 'md'
+   */
+  size?: keyof Omit<TabTheme, 'shared'>;
+}
+interface TabListProps$1 extends DefaultPropsWithChildren<TabListTheme, TabListProps<object>['className']>, Omit<TabListProps<object>, 'children'> {
+  /**
+   * Orientation of the tabs. Can be either 'horizontal' or 'vertical'.
+   * Shouldn't need to set this manually, as it will be inherited from the parent `Tabs`.
+   * @default 'horizontal'
+   */
+  orientation?: TabsProps$1['orientation'];
+  /**
+   * Size of the tab. Can be either 'sm', 'md'.
+   * Shouldn't need to set this manually, as it will be inherited from the parent `Tabs`.
+   * @default 'md'
+   */
+  size?: keyof Omit<TabTheme, 'shared'>;
+}
+interface TabProps$1 extends DefaultPropsWithChildren<TabTheme, TabProps['className']>, Omit<TabProps, 'children'> {
+  /**
+   * Orientation of the tabs. Can be either 'horizontal' or 'vertical'.
+   * Shouldn't need to set this manually, as it will be inherited from `Tabs` via `TabList`.
+   * @default 'horizontal'
+   */
+  orientation?: TabsProps$1['orientation'];
+  /**
+   * Size of the tab. Can be either 'sm', 'md'.
+   * Shouldn't need to set this manually, as it will be inherited from `Tabs` via `TabList`.
+   * @default 'md'
+   */
+  size?: keyof Omit<TabTheme, 'shared'>;
+  /**
+   * Icon to display in the tab. Can be either a symbol from the Icon component or a custom ReactNode.
+   */
+  icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+}
+interface TabPanelsProps$1 extends DefaultPropsWithChildren<TabPanelsTheme, TabPanelsProps<object>['className']>, Omit<TabPanelsProps<object>, 'children'> {
+  /**
+   * Orientation of the tabs. Can be either 'horizontal' or 'vertical'.
+   * Shouldn't need to set this manually, as it will be inherited from the parent `TabList`.
+   * @default 'horizontal'
+   */
+  orientation?: TabsProps$1['orientation'];
+  /**
+   * Size of the tab. Can be either 'sm', 'md'.
+   * Shouldn't need to set this manually, as it will be inherited from the parent `Tabs`.
+   * @default 'md'
+   */
+  size?: keyof Omit<TabTheme, 'shared'>;
+}
+interface TabPanelProps$1 extends DefaultPropsWithChildren<TabPanelTheme, TabPanelProps['className']>, Omit<TabPanelProps, 'children'> {}
+//#endregion
+export { TabListProps$1 as TabListProps, TabPanelProps$1 as TabPanelProps, TabPanelsProps$1 as TabPanelsProps, TabProps$1 as TabProps, TabsProps$1 as TabsProps };

package/dist/index.cjs

@@ -26,6 +26,7 @@ const require_textArea = require("./styleD/build/typescript/component/textArea.c
 const require_textInput = require("./styleD/build/typescript/component/textInput.cjs");
 const require_topBar = require("./styleD/build/typescript/component/topBar.cjs");
 const require_typography = require("./styleD/build/typescript/component/typography.cjs");
+const require_tabs = require("./styleD/build/typescript/component/tabs.cjs");
 const require_colors = require("./styleD/build/typescript/base/colors.cjs");
 const require_radius = require("./styleD/build/typescript/base/radius.cjs");
 const require_sizing = require("./styleD/build/typescript/base/sizing.cjs");
@@ -63,6 +64,7 @@ exports.componentMenu = require_menu.componentMenu;
 exports.componentModal = require_modal.componentModal;
 exports.componentRadioGroup = require_radioGroup.componentRadioGroup;
 exports.componentSelect = require_select.componentSelect;
+exports.componentTabs = require_tabs.componentTabs;
 exports.componentTagTable = require_tagTable.componentTagTable;
 exports.componentTextArea = require_textArea.componentTextArea;
 exports.componentTextInput = require_textInput.componentTextInput;

package/dist/index.d.cts

@@ -20,6 +20,7 @@ import { ComponentMenu, componentMenu } from "./styleD/build/typescript/componen
 import { ComponentModal, componentModal } from "./styleD/build/typescript/component/modal.cjs";
 import { ComponentRadioGroup, componentRadioGroup } from "./styleD/build/typescript/component/radioGroup.cjs";
 import { ComponentSelect, componentSelect } from "./styleD/build/typescript/component/select.cjs";
+import { ComponentTabs, componentTabs } from "./styleD/build/typescript/component/tabs.cjs";
 import { ComponentAutocomplete, componentAutocomplete } from "./styleD/build/typescript/component/autocomplete.cjs";
 import { ComponentTagTable, componentTagTable } from "./styleD/build/typescript/component/tagTable.cjs";
 import { ComponentTextArea, componentTextArea } from "./styleD/build/typescript/component/textArea.cjs";
@@ -37,4 +38,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.cjs";
 import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.cjs";
 import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.cjs";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.d.ts

@@ -20,6 +20,7 @@ import { ComponentMenu, componentMenu } from "./styleD/build/typescript/componen
 import { ComponentModal, componentModal } from "./styleD/build/typescript/component/modal.js";
 import { ComponentRadioGroup, componentRadioGroup } from "./styleD/build/typescript/component/radioGroup.js";
 import { ComponentSelect, componentSelect } from "./styleD/build/typescript/component/select.js";
+import { ComponentTabs, componentTabs } from "./styleD/build/typescript/component/tabs.js";
 import { ComponentAutocomplete, componentAutocomplete } from "./styleD/build/typescript/component/autocomplete.js";
 import { ComponentTagTable, componentTagTable } from "./styleD/build/typescript/component/tagTable.js";
 import { ComponentTextArea, componentTextArea } from "./styleD/build/typescript/component/textArea.js";
@@ -37,4 +38,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
 import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
 import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.js

@@ -25,6 +25,7 @@ import { componentTextArea } from "./styleD/build/typescript/component/textArea.
 import { componentTextInput } from "./styleD/build/typescript/component/textInput.js";
 import { componentTopBar } from "./styleD/build/typescript/component/topBar.js";
 import { componentTypography } from "./styleD/build/typescript/component/typography.js";
+import { componentTabs } from "./styleD/build/typescript/component/tabs.js";
 import { baseColors } from "./styleD/build/typescript/base/colors.js";
 import { baseRadius } from "./styleD/build/typescript/base/radius.js";
 import { baseSizing } from "./styleD/build/typescript/base/sizing.js";
@@ -37,4 +38,4 @@ import { semanticSizing } from "./styleD/build/typescript/semantic/sizing.js";
 import { semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
 import { semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
 import { semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
-export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/styleD/build/css/component/tabs.css

@@ -0,0 +1,49 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-tabs-tabs-shared-display: flex;
+	--component-tabs-tabs-shared-max-width: 100%;
+	--component-tabs-tabs-shared-orientation-vertical-flex-direction: row;
+	--component-tabs-tabs-shared-orientation-vertical-width: 100%;
+	--component-tabs-tabs-shared-orientation-horizontal-flex-direction: column;
+	--component-tabs-tab-shared-position: relative;
+	--component-tabs-tab-shared-display: inline-flex;
+	--component-tabs-tab-shared-gap: 0.375rem;
+	--component-tabs-tab-shared-cursor: pointer;
+	--component-tabs-tab-shared-flex-direction: row;
+	--component-tabs-tab-shared-justify-content: center;
+	--component-tabs-tab-shared-align-items: center;
+	--component-tabs-tab-shared-padding-top: 0;
+	--component-tabs-tab-shared-padding-bottom: 0;
+	--component-tabs-tab-shared-padding-left: 1rem;
+	--component-tabs-tab-shared-padding-right: 1rem;
+	--component-tabs-tab-shared-padding-vertical-right: 1.25rem;
+	--component-tabs-tab-shared-padding-with-icon-right: 1.25rem;
+	--component-tabs-tab-shared-padding-with-icon-vertical-right: 1.5rem;
+	--component-tabs-tab-shared-color: #545454;
+	--component-tabs-tab-shared-border: 0.0625rem solid #cccccc;
+	--component-tabs-tab-shared-selected-background: #f6f6f6;
+	--component-tabs-tab-shared-selected-border-border: 0.5rem solid #0072a9;
+	--component-tabs-tab-shared-selected-border-size: 0.5rem;
+	--component-tabs-tab-shared-selected-border-background: #0072a9;
+	--component-tabs-tab-shared-disabled-cursor: not-allowed;
+	--component-tabs-tab-shared-disabled-color: #999999;
+	--component-tabs-tab-shared-focus-visible-outline: 0.125rem solid #0072a9;
+	--component-tabs-tab-shared-focus-visible-outline-offset: -0.0625rem;
+	--component-tabs-tab-md-height: 3rem;
+	--component-tabs-tab-md-typography-font: normal 700 1rem/1.15 'Open Sans';
+	--component-tabs-tab-md-typography-letter-spacing: -0.03125rem;
+	--component-tabs-tab-md-typography-font-width: 95;
+	--component-tabs-tab-sm-height: 2.5rem;
+	--component-tabs-tab-sm-typography-font: normal 700 0.875rem/1.15 'Open Sans';
+	--component-tabs-tab-sm-typography-letter-spacing: -0.0125rem;
+	--component-tabs-tab-sm-typography-font-width: 95;
+	--component-tabs-tab-list-shared-display: flex;
+	--component-tabs-tab-list-shared-orientation-horizontal-flex-direction: row;
+	--component-tabs-tab-list-shared-orientation-vertical-flex-direction: column;
+	--component-tabs-tab-panels-shared-position: relative;
+	--component-tabs-tab-panels-shared-overflow: clip;
+	--component-tabs-tab-panel-shared-position: initial;
+}

package/dist/styleD/build/typescript/component/tabs.cjs

@@ -0,0 +1,87 @@
+//#region src/styleD/build/typescript/component/tabs.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentTabs = {
+	tabs: { shared: {
+		display: "flex",
+		maxWidth: "100%",
+		orientation: {
+			vertical: {
+				flexDirection: "row",
+				width: "100%"
+			},
+			horizontal: { flexDirection: "column" }
+		}
+	} },
+	tab: {
+		shared: {
+			position: "relative",
+			display: "inline-flex",
+			gap: "0.375rem",
+			cursor: "pointer",
+			flexDirection: "row",
+			justifyContent: "center",
+			alignItems: "center",
+			padding: {
+				top: "0",
+				bottom: "0",
+				left: "1rem",
+				right: "1rem",
+				verticalRight: "1.25rem",
+				withIcon: {
+					right: "1.25rem",
+					verticalRight: "1.5rem"
+				}
+			},
+			color: "#545454",
+			border: "0.0625rem solid #cccccc",
+			selected: {
+				background: "#f6f6f6",
+				border: {
+					border: "0.5rem solid #0072a9",
+					size: "0.5rem",
+					background: "#0072a9"
+				}
+			},
+			disabled: {
+				cursor: "not-allowed",
+				color: "#999999"
+			},
+			focusVisible: {
+				outline: "0.125rem solid #0072a9",
+				outlineOffset: "-0.0625rem"
+			}
+		},
+		md: {
+			height: "3rem",
+			typography: {
+				font: "normal 700 1rem/1.15 Open Sans",
+				letterSpacing: "-0.03125rem",
+				fontWidth: 95
+			}
+		},
+		sm: {
+			height: "2.5rem",
+			typography: {
+				font: "normal 700 0.875rem/1.15 Open Sans",
+				letterSpacing: "-0.0125rem",
+				fontWidth: 95
+			}
+		}
+	},
+	tabList: { shared: {
+		display: "flex",
+		orientation: {
+			horizontal: { flexDirection: "row" },
+			vertical: { flexDirection: "column" }
+		}
+	} },
+	tabPanels: { shared: {
+		position: "relative",
+		overflow: "clip"
+	} },
+	tabPanel: { shared: { position: "initial" } }
+};
+//#endregion
+exports.componentTabs = componentTabs;

package/dist/styleD/build/typescript/component/tabs.d.cts

@@ -0,0 +1,104 @@
+//#region src/styleD/build/typescript/component/tabs.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentTabs: {
+  tabs: {
+    shared: {
+      display: string;
+      maxWidth: string;
+      orientation: {
+        vertical: {
+          flexDirection: string;
+          width: string;
+        };
+        horizontal: {
+          flexDirection: string;
+        };
+      };
+    };
+  };
+  tab: {
+    shared: {
+      position: string;
+      display: string;
+      gap: string;
+      cursor: string;
+      flexDirection: string;
+      justifyContent: string;
+      alignItems: string;
+      padding: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+        verticalRight: string;
+        withIcon: {
+          right: string;
+          verticalRight: string;
+        };
+      };
+      color: string;
+      border: string;
+      selected: {
+        background: string;
+        border: {
+          border: string;
+          size: string;
+          background: string;
+        };
+      };
+      disabled: {
+        cursor: string;
+        color: string;
+      };
+      focusVisible: {
+        outline: string;
+        outlineOffset: string;
+      };
+    };
+    md: {
+      height: string;
+      typography: {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+      };
+    };
+    sm: {
+      height: string;
+      typography: {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+      };
+    };
+  };
+  tabList: {
+    shared: {
+      display: string;
+      orientation: {
+        horizontal: {
+          flexDirection: string;
+        };
+        vertical: {
+          flexDirection: string;
+        };
+      };
+    };
+  };
+  tabPanels: {
+    shared: {
+      position: string;
+      overflow: string;
+    };
+  };
+  tabPanel: {
+    shared: {
+      position: string;
+    };
+  };
+};
+type ComponentTabs = typeof componentTabs;
+//#endregion
+export { ComponentTabs, componentTabs };

package/dist/styleD/build/typescript/component/tabs.d.ts

@@ -0,0 +1,104 @@
+//#region src/styleD/build/typescript/component/tabs.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentTabs: {
+  tabs: {
+    shared: {
+      display: string;
+      maxWidth: string;
+      orientation: {
+        vertical: {
+          flexDirection: string;
+          width: string;
+        };
+        horizontal: {
+          flexDirection: string;
+        };
+      };
+    };
+  };
+  tab: {
+    shared: {
+      position: string;
+      display: string;
+      gap: string;
+      cursor: string;
+      flexDirection: string;
+      justifyContent: string;
+      alignItems: string;
+      padding: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+        verticalRight: string;
+        withIcon: {
+          right: string;
+          verticalRight: string;
+        };
+      };
+      color: string;
+      border: string;
+      selected: {
+        background: string;
+        border: {
+          border: string;
+          size: string;
+          background: string;
+        };
+      };
+      disabled: {
+        cursor: string;
+        color: string;
+      };
+      focusVisible: {
+        outline: string;
+        outlineOffset: string;
+      };
+    };
+    md: {
+      height: string;
+      typography: {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+      };
+    };
+    sm: {
+      height: string;
+      typography: {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+      };
+    };
+  };
+  tabList: {
+    shared: {
+      display: string;
+      orientation: {
+        horizontal: {
+          flexDirection: string;
+        };
+        vertical: {
+          flexDirection: string;
+        };
+      };
+    };
+  };
+  tabPanels: {
+    shared: {
+      position: string;
+      overflow: string;
+    };
+  };
+  tabPanel: {
+    shared: {
+      position: string;
+    };
+  };
+};
+type ComponentTabs = typeof componentTabs;
+//#endregion
+export { ComponentTabs, componentTabs };

package/dist/styleD/build/typescript/component/tabs.js

@@ -0,0 +1,87 @@
+//#region src/styleD/build/typescript/component/tabs.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentTabs = {
+	tabs: { shared: {
+		display: "flex",
+		maxWidth: "100%",
+		orientation: {
+			vertical: {
+				flexDirection: "row",
+				width: "100%"
+			},
+			horizontal: { flexDirection: "column" }
+		}
+	} },
+	tab: {
+		shared: {
+			position: "relative",
+			display: "inline-flex",
+			gap: "0.375rem",
+			cursor: "pointer",
+			flexDirection: "row",
+			justifyContent: "center",
+			alignItems: "center",
+			padding: {
+				top: "0",
+				bottom: "0",
+				left: "1rem",
+				right: "1rem",
+				verticalRight: "1.25rem",
+				withIcon: {
+					right: "1.25rem",
+					verticalRight: "1.5rem"
+				}
+			},
+			color: "#545454",
+			border: "0.0625rem solid #cccccc",
+			selected: {
+				background: "#f6f6f6",
+				border: {
+					border: "0.5rem solid #0072a9",
+					size: "0.5rem",
+					background: "#0072a9"
+				}
+			},
+			disabled: {
+				cursor: "not-allowed",
+				color: "#999999"
+			},
+			focusVisible: {
+				outline: "0.125rem solid #0072a9",
+				outlineOffset: "-0.0625rem"
+			}
+		},
+		md: {
+			height: "3rem",
+			typography: {
+				font: "normal 700 1rem/1.15 Open Sans",
+				letterSpacing: "-0.03125rem",
+				fontWidth: 95
+			}
+		},
+		sm: {
+			height: "2.5rem",
+			typography: {
+				font: "normal 700 0.875rem/1.15 Open Sans",
+				letterSpacing: "-0.0125rem",
+				fontWidth: 95
+			}
+		}
+	},
+	tabList: { shared: {
+		display: "flex",
+		orientation: {
+			horizontal: { flexDirection: "row" },
+			vertical: { flexDirection: "column" }
+		}
+	} },
+	tabPanels: { shared: {
+		position: "relative",
+		overflow: "clip"
+	} },
+	tabPanel: { shared: { position: "initial" } }
+};
+//#endregion
+export { componentTabs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.56",
+  "version": "0.0.57",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },
@@ -317,6 +317,16 @@
         "default": "./dist/Modal.cjs"
       }
     },
+    "./Tabs": {
+      "import": {
+        "types": "./dist/Tabs.d.ts",
+        "default": "./dist/Tabs.js"
+      },
+      "require": {
+        "types": "./dist/Tabs.d.cts",
+        "default": "./dist/Tabs.cjs"
+      }
+    },
     "./utils": {
       "import": {
         "types": "./dist/utils.d.ts",
@@ -370,7 +380,8 @@
     "./component/link.css": "./dist/styleD/build/css/component/link.css",
     "./component/grid.css": "./dist/styleD/build/css/component/grid.css",
     "./component/layout.css": "./dist/styleD/build/css/component/layout.css",
-    "./component/modal.css": "./dist/styleD/build/css/component/modal.css"
+    "./component/modal.css": "./dist/styleD/build/css/component/modal.css",
+    "./component/tabs.css": "./dist/styleD/build/css/component/tabs.css"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -469,6 +480,9 @@
       ],
       "Modal": [
         "./dist/Modal.d.ts"
+      ],
+      "Tabs": [
+        "./dist/Tabs.d.ts"
       ]
     }
   },
@@ -515,7 +529,7 @@
     "prosemirror-view": "1.37.2",
     "publint": "0.3.21",
     "react": "17.0.2",
-    "react-aria-components": "1.13.0",
+    "react-aria-components": "1.14.0",
     "react-dom": "17.0.2",
     "remark-gfm": "4.0.1",
     "rimraf": "6.1.3",
@@ -540,7 +554,7 @@
     "prosemirror-state": "^1.4.3",
     "prosemirror-view": "^1.37.2",
     "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
-    "react-aria-components": ">= 1.13.0 <= 1.18.0",
+    "react-aria-components": ">= 1.14.0 <= 1.19.0",
     "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0",
     "typescript": ">=5.0.0 <=5.9.3"
   },