@guardian/stand 0.0.55 → 0.0.57

package/dist/ButtonGroup.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_buttonGroup = require("./styleD/build/typescript/component/buttonGroup.cjs");
+const require_ButtonGroup = require("./components/ButtonGroup/ButtonGroup.cjs");
+exports.ButtonGroup = require_ButtonGroup.ButtonGroup;
+exports.componentButtonGroup = require_buttonGroup.componentButtonGroup;

package/dist/ButtonGroup.d.cts

@@ -0,0 +1,5 @@
+import { ComponentButtonGroup, componentButtonGroup } from "./styleD/build/typescript/component/buttonGroup.cjs";
+import { PartialButtonGroupTheme } from "./components/ButtonGroup/styles.cjs";
+import { ButtonGroupProps } from "./components/ButtonGroup/types.cjs";
+import { ButtonGroup } from "./components/ButtonGroup/ButtonGroup.cjs";
+export { ButtonGroup, type ButtonGroupProps, type PartialButtonGroupTheme as ButtonGroupTheme, type ComponentButtonGroup, componentButtonGroup };

package/dist/ButtonGroup.d.ts

@@ -0,0 +1,5 @@
+import { ComponentButtonGroup, componentButtonGroup } from "./styleD/build/typescript/component/buttonGroup.js";
+import { PartialButtonGroupTheme } from "./components/ButtonGroup/styles.js";
+import { ButtonGroupProps } from "./components/ButtonGroup/types.js";
+import { ButtonGroup } from "./components/ButtonGroup/ButtonGroup.js";
+export { ButtonGroup, type ButtonGroupProps, type PartialButtonGroupTheme as ButtonGroupTheme, type ComponentButtonGroup, componentButtonGroup };

package/dist/ButtonGroup.js

@@ -0,0 +1,3 @@
+import { componentButtonGroup } from "./styleD/build/typescript/component/buttonGroup.js";
+import { ButtonGroup } from "./components/ButtonGroup/ButtonGroup.js";
+export { ButtonGroup, componentButtonGroup };

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/ButtonGroup/ButtonGroup.cjs

@@ -0,0 +1,25 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_Button = require("../Button/Button.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");
+//#region src/components/ButtonGroup/ButtonGroup.tsx
+const ButtonGroup = ({ size = "md", theme = {}, children, cssOverrides }) => {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultButtonGroupTheme, theme);
+	const buttons = [];
+	react.default.Children.forEach(children, (child, index) => {
+		if (!react.default.isValidElement(child) || child.type !== require_Button.Button) return;
+		buttons.push(react.default.cloneElement(child, {
+			key: child.key ?? index,
+			size
+		}));
+	});
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+		css: [require_styles.buttonGroupStyles(mergedTheme), cssOverrides],
+		children: buttons
+	});
+};
+//#endregion
+exports.ButtonGroup = ButtonGroup;

package/dist/components/ButtonGroup/ButtonGroup.d.cts

@@ -0,0 +1,11 @@
+import { ButtonGroupProps } from "./types.cjs";
+
+//#region src/components/ButtonGroup/ButtonGroup.d.ts
+declare const ButtonGroup: ({
+  size,
+  theme,
+  children,
+  cssOverrides
+}: ButtonGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { ButtonGroup };

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,11 @@
+import { ButtonGroupProps } from "./types.js";
+
+//#region src/components/ButtonGroup/ButtonGroup.d.ts
+declare const ButtonGroup: ({
+  size,
+  theme,
+  children,
+  cssOverrides
+}: ButtonGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { ButtonGroup };

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,23 @@
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { Button } from "../Button/Button.js";
+import { buttonGroupStyles, defaultButtonGroupTheme } from "./styles.js";
+import React from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+//#region src/components/ButtonGroup/ButtonGroup.tsx
+const ButtonGroup = ({ size = "md", theme = {}, children, cssOverrides }) => {
+	const mergedTheme = mergeDeep(defaultButtonGroupTheme, theme);
+	const buttons = [];
+	React.Children.forEach(children, (child, index) => {
+		if (!React.isValidElement(child) || child.type !== Button) return;
+		buttons.push(React.cloneElement(child, {
+			key: child.key ?? index,
+			size
+		}));
+	});
+	return /* @__PURE__ */ jsx("div", {
+		css: [buttonGroupStyles(mergedTheme), cssOverrides],
+		children: buttons
+	});
+};
+//#endregion
+export { ButtonGroup };

package/dist/components/ButtonGroup/styles.cjs

@@ -0,0 +1,21 @@
+const require_mq = require("../../styleD/utils/semantic/mq.cjs");
+const require_buttonGroup = require("../../styleD/build/typescript/component/buttonGroup.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/ButtonGroup/styles.ts
+const defaultButtonGroupTheme = require_buttonGroup.componentButtonGroup;
+const buttonGroupStyles = (theme) => {
+	return _emotion_react.css`
+		display: ${theme.display};
+		flex-direction: ${theme.flexDirection};
+		flex-wrap: ${theme.flexWrap};
+		gap: ${theme.gap};
+		width: ${theme.width};
+		justify-content: ${theme.justifyContent};
+		${require_mq.from.md} {
+			flex-direction: ${theme.md.flexDirection};
+		}
+	`;
+};
+//#endregion
+exports.buttonGroupStyles = buttonGroupStyles;
+exports.defaultButtonGroupTheme = defaultButtonGroupTheme;

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

@@ -0,0 +1,9 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentButtonGroup } from "../../styleD/build/typescript/component/buttonGroup.cjs";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/ButtonGroup/styles.d.ts
+type ButtonGroupTheme = Prettify<ComponentButtonGroup>;
+type PartialButtonGroupTheme = Prettify<DeepPartial<ButtonGroupTheme>>;
+//#endregion
+export { ButtonGroupTheme, PartialButtonGroupTheme };

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

@@ -0,0 +1,9 @@
+import { DeepPartial, Prettify } from "../../util/types.js";
+import { ComponentButtonGroup } from "../../styleD/build/typescript/component/buttonGroup.js";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/ButtonGroup/styles.d.ts
+type ButtonGroupTheme = Prettify<ComponentButtonGroup>;
+type PartialButtonGroupTheme = Prettify<DeepPartial<ButtonGroupTheme>>;
+//#endregion
+export { ButtonGroupTheme, PartialButtonGroupTheme };

package/dist/components/ButtonGroup/styles.js

@@ -0,0 +1,20 @@
+import { from } from "../../styleD/utils/semantic/mq.js";
+import { componentButtonGroup } from "../../styleD/build/typescript/component/buttonGroup.js";
+import { css } from "@emotion/react";
+//#region src/components/ButtonGroup/styles.ts
+const defaultButtonGroupTheme = componentButtonGroup;
+const buttonGroupStyles = (theme) => {
+	return css`
+		display: ${theme.display};
+		flex-direction: ${theme.flexDirection};
+		flex-wrap: ${theme.flexWrap};
+		gap: ${theme.gap};
+		width: ${theme.width};
+		justify-content: ${theme.justifyContent};
+		${from.md} {
+			flex-direction: ${theme.md.flexDirection};
+		}
+	`;
+};
+//#endregion
+export { buttonGroupStyles, defaultButtonGroupTheme };

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

@@ -0,0 +1,13 @@
+import { DefaultPropsWithChildren } from "../../util/types.cjs";
+import { ButtonTheme } from "../Button/styles.cjs";
+import { ButtonGroupTheme } from "./styles.cjs";
+
+//#region src/components/ButtonGroup/types.d.ts
+type ButtonGroupProps = DefaultPropsWithChildren<ButtonGroupTheme> & {
+  /**
+   * Size of buttons within the group
+   */
+  size?: keyof Omit<ButtonTheme['primary'], 'shared'>;
+};
+//#endregion
+export { ButtonGroupProps };

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

@@ -0,0 +1,13 @@
+import { DefaultPropsWithChildren } from "../../util/types.js";
+import { ButtonTheme } from "../Button/styles.js";
+import { ButtonGroupTheme } from "./styles.js";
+
+//#region src/components/ButtonGroup/types.d.ts
+type ButtonGroupProps = DefaultPropsWithChildren<ButtonGroupTheme> & {
+  /**
+   * Size of buttons within the group
+   */
+  size?: keyof Omit<ButtonTheme['primary'], 'shared'>;
+};
+//#endregion
+export { ButtonGroupProps };

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 };