@guardian/stand 0.0.56 → 0.0.58

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

@@ -7,7 +7,7 @@ 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/RadioGroup/RadioGroup.tsx
-function RadioGroup({ size = "md", isInvalid = false, theme = {}, children, ...props }) {
+function RadioGroup({ size = "md", orientation = "vertical", isInvalid = false, theme = {}, children, ...props }) {
 	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultRadioGroupTheme, theme);
 	const radios = [];
 	react.default.Children.forEach(children, (child) => {
@@ -24,7 +24,10 @@ function RadioGroup({ size = "md", isInvalid = false, theme = {}, children, ...p
 		isInvalid,
 		...props,
 		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
-			css: require_styles.radioGroupStyles(mergedTheme, { size }),
+			css: require_styles.radioGroupStyles(mergedTheme, {
+				size,
+				orientation
+			}),
 			children: radios
 		})
 	});

package/dist/components/RadioGroup/RadioGroup.d.cts

@@ -3,6 +3,7 @@ import { RadioGroupProps, RadioProps } from "./types.cjs";
 //#region src/components/RadioGroup/RadioGroup.d.ts
 declare function RadioGroup({
   size,
+  orientation,
   isInvalid,
   theme,
   children,

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -3,6 +3,7 @@ import { RadioGroupProps, RadioProps } from "./types.js";
 //#region src/components/RadioGroup/RadioGroup.d.ts
 declare function RadioGroup({
   size,
+  orientation,
   isInvalid,
   theme,
   children,

package/dist/components/RadioGroup/RadioGroup.js

@@ -5,7 +5,7 @@ import React from "react";
 import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { Radio, RadioGroup, composeRenderProps } from "react-aria-components";
 //#region src/components/RadioGroup/RadioGroup.tsx
-function RadioGroup$1({ size = "md", isInvalid = false, theme = {}, children, ...props }) {
+function RadioGroup$1({ size = "md", orientation = "vertical", isInvalid = false, theme = {}, children, ...props }) {
 	const mergedTheme = mergeDeep(defaultRadioGroupTheme, theme);
 	const radios = [];
 	React.Children.forEach(children, (child) => {
@@ -22,7 +22,10 @@ function RadioGroup$1({ size = "md", isInvalid = false, theme = {}, children, ..
 		isInvalid,
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
-			css: radioGroupStyles(mergedTheme, { size }),
+			css: radioGroupStyles(mergedTheme, {
+				size,
+				orientation
+			}),
 			children: radios
 		})
 	});

package/dist/components/RadioGroup/styles.cjs

@@ -3,13 +3,17 @@ const require_radioGroup = require("../../styleD/build/typescript/component/radi
 let _emotion_react = require("@emotion/react");
 //#region src/components/RadioGroup/styles.ts
 const defaultRadioGroupTheme = require_radioGroup.componentRadioGroup;
-const radioGroupStyles = (theme, { size }) => {
+const radioGroupStyles = (theme, { size, orientation }) => {
 	return _emotion_react.css`
 		display: ${theme.shared.display};
-		flex-direction: ${theme.shared.flexDirection};
+		flex-direction: ${theme.shared.orientation.vertical.flexDirection};
 		gap: ${theme[size].gap};
 		margin-top: ${theme.shared.marginTop};
 		margin-bottom: ${theme.shared.marginBottom};
+
+		${orientation === "horizontal" && _emotion_react.css`
+			flex-direction: ${theme.shared.orientation.horizontal.flexDirection};
+		`}
 	`;
 };
 const radioStyles = (theme, { size, isInvalid }) => {

package/dist/components/RadioGroup/styles.js

@@ -3,13 +3,17 @@ import { componentRadioGroup } from "../../styleD/build/typescript/component/rad
 import { css } from "@emotion/react";
 //#region src/components/RadioGroup/styles.ts
 const defaultRadioGroupTheme = componentRadioGroup;
-const radioGroupStyles = (theme, { size }) => {
+const radioGroupStyles = (theme, { size, orientation }) => {
 	return css`
 		display: ${theme.shared.display};
-		flex-direction: ${theme.shared.flexDirection};
+		flex-direction: ${theme.shared.orientation.vertical.flexDirection};
 		gap: ${theme[size].gap};
 		margin-top: ${theme.shared.marginTop};
 		margin-bottom: ${theme.shared.marginBottom};
+
+		${orientation === "horizontal" && css`
+			flex-direction: ${theme.shared.orientation.horizontal.flexDirection};
+		`}
 	`;
 };
 const radioStyles = (theme, { size, isInvalid }) => {

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

@@ -7,6 +7,11 @@ import { RadioGroupProps, RadioProps } from "react-aria-components";
 type RadioGroupProps$1 = FormInputContainerDefaultProps<RadioGroupProps, RadioGroupTheme>;
 interface RadioProps$1 extends DefaultProps<RadioGroupTheme, RadioProps['className']>, RadioProps {
   size?: keyof Omit<RadioGroupTheme, 'shared'>;
+  /**
+   * Orientation of the radio buttons. Can be either 'horizontal' or 'vertical'.
+   * @default 'vertical'
+   */
+  orientation?: 'horizontal' | 'vertical';
   /** Whether the input value is invalid. */
   isInvalid?: boolean;
 }

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

@@ -7,6 +7,11 @@ import { RadioGroupProps, RadioProps } from "react-aria-components";
 type RadioGroupProps$1 = FormInputContainerDefaultProps<RadioGroupProps, RadioGroupTheme>;
 interface RadioProps$1 extends DefaultProps<RadioGroupTheme, RadioProps['className']>, RadioProps {
   size?: keyof Omit<RadioGroupTheme, 'shared'>;
+  /**
+   * Orientation of the radio buttons. Can be either 'horizontal' or 'vertical'.
+   * @default 'vertical'
+   */
+  orientation?: 'horizontal' | 'vertical';
   /** Whether the input value is invalid. */
   isInvalid?: boolean;
 }

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