@soroush.tech/design-system 2.0.0-rc.0 → 2.0.0-rc.2

package/dist/{theme-BXlAP3xf.cjs → themes-gd6tcmqS.cjs}

@@ -1,8 +1,5 @@
 const require_utils = require("./utils.cjs");
 let _soroush_tech_styled_system = require("@soroush.tech/styled-system");
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _emotion_react = require("@emotion/react");
 //#region src/theme/utils/spacing.ts
 const spacing = (units) => units === 0 ? "0px" : `${Math.max(1, Math.round(8 * units))}px`;
 //#endregion
@@ -26,37 +23,6 @@ const withBreakpointHelpers = (scale) => {
 	return sizes;
 };
 //#endregion
-//#region src/theme/utils/createTheme.ts
-const isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
-const deepMerge = (base, overrides) => {
-	const merged = { ...base };
-	for (const [key, value] of Object.entries(overrides)) {
-		if (value === void 0) continue;
-		const baseValue = merged[key];
-		merged[key] = isPlainObject(baseValue) && isPlainObject(value) ? deepMerge(baseValue, value) : value;
-	}
-	return merged;
-};
-/**
-* Builds a theme by deep-merging sparse `overrides` onto `base`.
-*
-* - Recurses only where both sides are plain objects; arrays (`shadows`,
-*   `fontSizes`) and functions replace wholesale.
-* - `undefined` override values are ignored - a key can be added or replaced,
-*   never removed.
-* - Neither argument is mutated; untouched branches keep referential identity.
-* - `breakpoints` gets its query helpers back, built from the merged sizes.
-*/
-const createTheme = (base, overrides) => {
-	const theme = deepMerge(base, overrides);
-	return withHelpers(theme);
-};
-/** A theme whose `breakpoints` carry the query helpers - added when a hand-built theme lacks them. */
-const withHelpers = (theme) => theme.breakpoints && !("up" in theme.breakpoints) ? {
-	...theme,
-	breakpoints: withBreakpointHelpers(theme.breakpoints)
-} : theme;
-//#endregion
 //#region src/theme/themes.ts
 const shadow = {
 	color: "#000000",
@@ -418,84 +384,6 @@ const baseTheme = {
 */
 const { up, down, only, between, not, containerQueries } = breakpoints;
 //#endregion
-//#region src/theme/ThemeProvider.tsx
-function ThemeProvider({ children, theme = baseTheme, defaults }) {
-	const value = (0, react.useMemo)(() => defaults ? createTheme(theme, { defaults }) : withHelpers(theme), [theme, defaults]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_emotion_react.ThemeProvider, {
-		theme: value,
-		children
-	});
-}
-//#endregion
-//#region src/theme/LayoutProvider.tsx
-const pageLayout = (theme, layout) => {
-	const page = layout;
-	let carried = {};
-	const merged = {};
-	for (const key of Object.keys(theme.breakpoints)) {
-		carried = deepMerge(carried, page[key] ?? {});
-		if (Object.keys(carried).length > 0) merged[key] = carried;
-	}
-	return merged;
-};
-/**
-* @description A page-level layout: everything inside sees `theme.layout` with the page's
-* values merged on top - `View`, `Flex` and `Grid` with `layout`, and `useTheme().layout`. It
-* derives the theme from the one around it and changes nothing else, so colours, light/dark
-* switching and every other token stay the app theme's. Nested providers stack.
-*/
-function LayoutProvider({ layout, children }) {
-	const derive = (0, react.useCallback)((outer) => {
-		const theme = "breakpoints" in outer ? outer : baseTheme;
-		return createTheme(theme, { layout: pageLayout(theme, layout) });
-	}, [layout]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_emotion_react.ThemeProvider, {
-		theme: derive,
-		children
-	});
-}
-//#endregion
-//#region src/theme/hooks/useTheme.ts
-/**
-* The active theme, typed as this package's own `Theme` - Emotion is an
-* internal implementation detail, never part of the public type surface.
-*/
-const useTheme = () => (0, _emotion_react.useTheme)();
-//#endregion
-//#region src/theme/hooks/useDefaultProps.ts
-/**
-* The theme-contributed default prop values for a component
-* (`theme.components[name].defaultProps`), or an empty object.
-*
-* Components apply it as one step of the default-resolution chain:
-* explicit prop → group context → `useDefaultProps` → `theme.defaults.*` → literal fallback.
-*/
-function useDefaultProps(name) {
-	return useTheme().components?.[name]?.defaultProps ?? {};
-}
-//#endregion
-//#region src/theme/hoc/withTheme.tsx
-function withTheme(WrappedComponent) {
-	return function WithTheme(props) {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_emotion_react.ThemeContext.Consumer, { children: (theme) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WrappedComponent, {
-			...props,
-			theme
-		}) });
-	};
-}
-//#endregion
-Object.defineProperty(exports, "LayoutProvider", {
-	enumerable: true,
-	get: function() {
-		return LayoutProvider;
-	}
-});
-Object.defineProperty(exports, "ThemeProvider", {
-	enumerable: true,
-	get: function() {
-		return ThemeProvider;
-	}
-});
 Object.defineProperty(exports, "avatar", {
 	enumerable: true,
 	get: function() {
@@ -532,12 +420,6 @@ Object.defineProperty(exports, "containerQueries", {
 		return containerQueries;
 	}
 });
-Object.defineProperty(exports, "createTheme", {
-	enumerable: true,
-	get: function() {
-		return createTheme;
-	}
-});
 Object.defineProperty(exports, "down", {
 	enumerable: true,
 	get: function() {
@@ -628,30 +510,12 @@ Object.defineProperty(exports, "up", {
 		return up;
 	}
 });
-Object.defineProperty(exports, "useDefaultProps", {
-	enumerable: true,
-	get: function() {
-		return useDefaultProps;
-	}
-});
-Object.defineProperty(exports, "useTheme", {
-	enumerable: true,
-	get: function() {
-		return useTheme;
-	}
-});
 Object.defineProperty(exports, "withBreakpointHelpers", {
 	enumerable: true,
 	get: function() {
 		return withBreakpointHelpers;
 	}
 });
-Object.defineProperty(exports, "withTheme", {
-	enumerable: true,
-	get: function() {
-		return withTheme;
-	}
-});
 Object.defineProperty(exports, "zOrder", {
 	enumerable: true,
 	get: function() {

package/dist/{useTablePagination-COTiNH_8.d.mts → useTablePagination-C5VKtqDp.d.cts}

@@ -1,4 +1,4 @@
-import { n as TableSortLabelDirection } from "./index-nc4Sxiy9.mjs";
+import { n as TableSortLabelDirection } from "./index-DXhMkjQ6.cjs";
 //#region src/Table/hooks/useTableSort.d.ts
 /** One column's sort state - spreads directly onto `TableSortLabel`. */
 interface TableSortEntry {

package/dist/{useTablePagination-WFkaUZu8.d.cts → useTablePagination-C6LSlt3w.d.mts}

@@ -1,4 +1,4 @@
-import { n as TableSortLabelDirection } from "./index-DNwF3DUX.cjs";
+import { n as TableSortLabelDirection } from "./index-DeDxYlSQ.mjs";
 //#region src/Table/hooks/useTableSort.d.ts
 /** One column's sort state - spreads directly onto `TableSortLabel`. */
 interface TableSortEntry {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soroush.tech/design-system",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.2",
   "description": "Emotion + @soroush.tech/styled-system React component library - token-driven light/dark themes, layout primitives, forms, and overlays.",
   "keywords": [
     "design-system",
@@ -68,6 +68,16 @@
         "default": "./dist/Backdrop.cjs"
       }
     },
+    "./Breadcrumbs": {
+      "import": {
+        "types": "./dist/Breadcrumbs.d.mts",
+        "default": "./dist/Breadcrumbs.mjs"
+      },
+      "require": {
+        "types": "./dist/Breadcrumbs.d.cts",
+        "default": "./dist/Breadcrumbs.cjs"
+      }
+    },
     "./Button": {
       "import": {
         "types": "./dist/Button.d.mts",
@@ -238,6 +248,16 @@
         "default": "./dist/Link.cjs"
       }
     },
+    "./Menu": {
+      "import": {
+        "types": "./dist/Menu.d.mts",
+        "default": "./dist/Menu.mjs"
+      },
+      "require": {
+        "types": "./dist/Menu.d.cts",
+        "default": "./dist/Menu.cjs"
+      }
+    },
     "./MenuItem": {
       "import": {
         "types": "./dist/MenuItem.d.mts",
@@ -388,6 +408,16 @@
         "default": "./dist/Table.cjs"
       }
     },
+    "./Tabs": {
+      "import": {
+        "types": "./dist/Tabs.d.mts",
+        "default": "./dist/Tabs.mjs"
+      },
+      "require": {
+        "types": "./dist/Tabs.d.cts",
+        "default": "./dist/Tabs.cjs"
+      }
+    },
     "./TextInput": {
       "import": {
         "types": "./dist/TextInput.d.mts",
@@ -398,6 +428,16 @@
         "default": "./dist/TextInput.cjs"
       }
     },
+    "./catalog": {
+      "import": {
+        "types": "./dist/catalog.d.mts",
+        "default": "./dist/catalog.mjs"
+      },
+      "require": {
+        "types": "./dist/catalog.d.cts",
+        "default": "./dist/catalog.cjs"
+      }
+    },
     "./theme": {
       "import": {
         "types": "./dist/theme.d.mts",
@@ -487,7 +527,7 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@soroush.tech/styled-system": "^6.0.0-rc.0"
+    "@soroush.tech/styled-system": "^6.0.0-rc.2"
   },
   "peerDependencies": {
     "react": "^19.2.8",
@@ -516,6 +556,7 @@
     "typescript": "~7.0.2",
     "vitest": "^4.1.10",
     "zod": "^4.4.3",
+    "@soroush.tech/docs-content": "0.1.0",
     "@soroush.tech/eslint-config": "0.0.0"
   },
   "scripts": {

package/dist/Popover-DwnSLpp1.mjs

@@ -1,253 +0,0 @@
-import { o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
-import { r as useTheme } from "./theme-CDVxig_g.mjs";
-import { Paper } from "./Paper.mjs";
-import { t as Modal } from "./Modal-BcsyrrpH.mjs";
-import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/Popover/utils/resolveAnchorEl.ts
-/** Resolves the `anchorEl` prop, which may be an element or a function returning one. */
-function resolveAnchorEl(anchorEl) {
-	return (typeof anchorEl === "function" ? anchorEl() : anchorEl) ?? null;
-}
-//#endregion
-//#region src/Popover/utils/getOffset.ts
-/** Vertical offset within a rect for an anchor/transform origin keyword or explicit px. */
-function getOffsetTop(rect, vertical) {
-	if (typeof vertical === "number") return vertical;
-	if (vertical === "center") return rect.height / 2;
-	if (vertical === "bottom") return rect.height;
-	return 0;
-}
-/** Horizontal offset within a rect for an anchor/transform origin keyword or explicit px. */
-function getOffsetLeft(rect, horizontal) {
-	if (typeof horizontal === "number") return horizontal;
-	if (horizontal === "center") return rect.width / 2;
-	if (horizontal === "right") return rect.width;
-	return 0;
-}
-//#endregion
-//#region src/Popover/utils/getTransformOriginValue.ts
-/** Serializes a resolved transform origin (in px) to a CSS `transform-origin` value. */
-function getTransformOriginValue(origin) {
-	return `${origin.horizontal}px ${origin.vertical}px`;
-}
-//#endregion
-//#region src/Popover/utils/computePopoverPosition.ts
-/** Mirrors a keyword origin to the opposite edge; numbers and `center` are unchanged. */
-function flipVertical(origin) {
-	if (origin === "top") return "bottom";
-	if (origin === "bottom") return "top";
-	return origin;
-}
-function flipHorizontal(origin) {
-	if (origin === "left") return "right";
-	if (origin === "right") return "left";
-	return origin;
-}
-function resolveAxis({ anchorStart, anchorSize, anchorOrigin, transformOrigin, paperSize, viewportSize, margin, offset, flip }) {
-	const preferredTransform = offset(paperSize, transformOrigin);
-	const preferredPosition = anchorStart + offset(anchorSize, anchorOrigin) - preferredTransform;
-	let position = preferredPosition;
-	let transformOffset = preferredTransform;
-	if (margin != null) {
-		const fits = (candidate) => candidate >= margin && candidate + paperSize <= viewportSize - margin;
-		if (!fits(preferredPosition)) {
-			const flippedTransform = offset(paperSize, flip(transformOrigin));
-			const flippedPosition = anchorStart + offset(anchorSize, flip(anchorOrigin)) - flippedTransform;
-			if (fits(flippedPosition)) {
-				position = flippedPosition;
-				transformOffset = flippedTransform;
-			}
-		}
-		if (position < margin) {
-			const diff = position - margin;
-			position -= diff;
-			transformOffset += diff;
-		} else if (position + paperSize > viewportSize - margin) {
-			const diff = position + paperSize - (viewportSize - margin);
-			position -= diff;
-			transformOffset += diff;
-		}
-	}
-	return {
-		position,
-		transformOffset
-	};
-}
-/**
-* Places the paper so its `transformOrigin` meets the anchor's `anchorOrigin`, flipping
-* to the opposite side at a viewport edge and clamping as a fallback. Returns `null`
-* coordinates for `anchorReference === 'none'`.
-*/
-function computePopoverPosition(params) {
-	const { anchorReference, anchorRect, anchorPosition, paperRect, anchorOrigin, transformOrigin, viewport, marginThreshold } = params;
-	if (anchorReference === "none") return {
-		top: null,
-		left: null,
-		transformOrigin: getTransformOriginValue({
-			vertical: getOffsetTop(paperRect, transformOrigin.vertical),
-			horizontal: getOffsetLeft(paperRect, transformOrigin.horizontal)
-		})
-	};
-	const rect = anchorReference === "anchorPosition" ? {
-		top: anchorPosition?.top ?? 0,
-		left: anchorPosition?.left ?? 0,
-		width: 0,
-		height: 0
-	} : anchorRect ?? {
-		top: 0,
-		left: 0,
-		width: 0,
-		height: 0
-	};
-	const vertical = resolveAxis({
-		anchorStart: rect.top,
-		anchorSize: rect.height,
-		anchorOrigin: anchorOrigin.vertical,
-		transformOrigin: transformOrigin.vertical,
-		paperSize: paperRect.height,
-		viewportSize: viewport.height,
-		margin: marginThreshold,
-		offset: (size, origin) => getOffsetTop({ height: size }, origin),
-		flip: (origin) => flipVertical(origin)
-	});
-	const horizontal = resolveAxis({
-		anchorStart: rect.left,
-		anchorSize: rect.width,
-		anchorOrigin: anchorOrigin.horizontal,
-		transformOrigin: transformOrigin.horizontal,
-		paperSize: paperRect.width,
-		viewportSize: viewport.width,
-		margin: marginThreshold,
-		offset: (size, origin) => getOffsetLeft({ width: size }, origin),
-		flip: (origin) => flipHorizontal(origin)
-	});
-	return {
-		top: Math.floor(vertical.position),
-		left: Math.floor(horizontal.position),
-		transformOrigin: getTransformOriginValue({
-			vertical: vertical.transformOffset,
-			horizontal: horizontal.transformOffset
-		})
-	};
-}
-//#endregion
-//#region src/Popover/Popover.tsx
-const ANCHOR_ORIGIN_DEFAULT = {
-	vertical: "top",
-	horizontal: "left"
-};
-const Positioner = styled("div", {
-	name: "Popover",
-	slot: "positioner",
-	label: "PopoverPositioner",
-	shouldForwardProp: createShouldForwardProp(["isPositioned"])
-})(({ isPositioned }) => ({
-	position: "absolute",
-	...isPositioned ? {} : { opacity: 0 }
-}));
-const Surface = styled(Paper, {
-	name: "Popover",
-	label: "Popover"
-})({
-	overflowY: "auto",
-	overflowX: "hidden",
-	minWidth: 16,
-	minHeight: 16,
-	maxWidth: "calc(100vw - 32px)",
-	maxHeight: "calc(100vh - 32px)",
-	outline: 0
-});
-/**
-* @description Positions its content next to an anchor, portaled above the page.
-* Built on `Modal`, so it inherits the portal, optional backdrop, focus management,
-* scroll lock, and Escape/click-away close - then adds anchor positioning
-* (`anchorOrigin`/`transformOrigin`/`marginThreshold`).
-*/
-function Popover({ open, children, anchorEl = null, anchorReference = "anchorEl", anchorPosition, anchorOrigin = ANCHOR_ORIGIN_DEFAULT, transformOrigin = ANCHOR_ORIGIN_DEFAULT, onClose, elevation = 8, marginThreshold = 2, container, action, slotProps, hasBackdrop = false, disableScrollLock = false, disableAriaHidden = false, shouldAutoFocus = true, shouldTrapFocus = true, shouldEnforceFocus = true, shouldRestoreFocus = true, shouldKeepMounted = false, layer = "modal" }) {
-	const theme = useTheme();
-	const positionerRef = useRef(null);
-	const [isPositioned, setIsPositioned] = useState(false);
-	const anchorTop = anchorPosition?.top;
-	const anchorLeft = anchorPosition?.left;
-	const marginThresholdPx = marginThreshold == null ? null : Number.parseFloat(String(theme.space[marginThreshold]));
-	const setPositioningStyles = useCallback(() => {
-		const element = positionerRef.current;
-		if (!element) return;
-		const resolved = resolveAnchorEl(anchorEl);
-		const positioning = computePopoverPosition({
-			anchorReference,
-			anchorRect: anchorReference === "anchorEl" && resolved ? resolved.getBoundingClientRect() : null,
-			anchorPosition: anchorTop != null && anchorLeft != null ? {
-				top: anchorTop,
-				left: anchorLeft
-			} : void 0,
-			paperRect: {
-				width: element.offsetWidth,
-				height: element.offsetHeight
-			},
-			anchorOrigin,
-			transformOrigin,
-			viewport: {
-				width: window.innerWidth,
-				height: window.innerHeight
-			},
-			marginThreshold: marginThresholdPx
-		});
-		if (positioning.top !== null) element.style.top = `${positioning.top}px`;
-		if (positioning.left !== null) element.style.left = `${positioning.left}px`;
-		element.style.transformOrigin = positioning.transformOrigin;
-		setIsPositioned(true);
-	}, [
-		anchorEl,
-		anchorReference,
-		anchorTop,
-		anchorLeft,
-		anchorOrigin,
-		transformOrigin,
-		marginThresholdPx
-	]);
-	useLayoutEffect(() => {
-		if (open) setPositioningStyles();
-	});
-	useEffect(() => {
-		if (!open) return;
-		const handle = () => setPositioningStyles();
-		window.addEventListener("resize", handle);
-		if (disableScrollLock) window.addEventListener("scroll", handle, true);
-		return () => {
-			window.removeEventListener("resize", handle);
-			window.removeEventListener("scroll", handle, true);
-		};
-	}, [
-		open,
-		disableScrollLock,
-		setPositioningStyles
-	]);
-	useImperativeHandle(action, () => ({ updatePosition: setPositioningStyles }), [setPositioningStyles]);
-	return /* @__PURE__ */ jsx(Modal, {
-		isOpen: open,
-		onClose,
-		hasBackdrop,
-		shouldKeepMounted,
-		shouldLockScroll: !disableScrollLock,
-		disableAriaHidden,
-		shouldAutoFocus,
-		shouldTrapFocus,
-		shouldEnforceFocus,
-		shouldRestoreFocus,
-		portalContainer: container,
-		layer,
-		children: /* @__PURE__ */ jsx(Positioner, {
-			ref: positionerRef,
-			isPositioned,
-			children: /* @__PURE__ */ jsx(Surface, {
-				elevation,
-				...slotProps?.paper,
-				children
-			})
-		})
-	});
-}
-//#endregion
-export { Popover as t };

package/dist/index-B_dKjEDR.d.mts

@@ -1,23 +0,0 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { n as FlexProps } from "./index-CKZaErxJ.mjs";
-import { CSSProperties, ElementType } from "react";
-//#region src/Paper/Paper.d.ts
-type PaperElevation = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
-interface PaperProps extends FlexProps {
-  /** Shadow depth - 0 (flat) to 24 (highest). Resolves to theme.shadows[n]. Default: 1. */
-  elevation?: PaperElevation;
-  /** CSS transition for surface animations (e.g. hover elevation change). */
-  transition?: CSSProperties['transition'];
-  /** Resolves against theme.border - light · primary · dark */
-  borderColor?: keyof Theme['border'];
-  /** Resolves against theme.borderWidths - none · thin · base · thick */
-  borderWidth?: keyof Theme['borderWidths'];
-  /** CSS border-style value (e.g. 'solid', 'dashed'). */
-  borderStyle?: CSSProperties['borderStyle'];
-  /** Renders the surface as a different element (e.g. 'section'). */
-  as?: ElementType;
-}
-declare function Paper({ elevation, p, bg, borderRadius, ...rest }: Readonly<PaperProps>): import("react").JSX.Element;
-//#endregion
-export { PaperElevation as n, PaperProps as r, Paper as t };

package/dist/index-C1WqEDtQ.d.mts

@@ -1,69 +0,0 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import { CreateStyledComponent, FilteringStyledOptions, Interpolation, StyledOptions } from "@emotion/styled";
-import { PropsOf, css as css$1, keyframes } from "@emotion/react";
-import { createShouldForwardProp, props } from "@soroush.tech/styled-system/should-forward-prop";
-import { ComponentClass, ComponentProps, ComponentType, JSX, Ref } from "react";
-//#region src/style/styled.d.ts
-/**
- * Design-system additions to Emotion's styled options. A styled root that passes
- * `name` becomes theme-customizable: `theme.components[name]` may contribute
- * `styleOverrides` (per `slot`) and `variants`, appended after the component's
- * own styles so the theme wins the cascade. Roots without `name` are plain
- * Emotion - zero behavior change, zero cost.
- */
-interface ThemeCustomizationOptions {
-  /** `theme.components` key enabling styleOverrides/variants for this root. */
-  name?: string;
-  /** The `styleOverrides` slot this root maps to. Default: `'root'`. */
-  slot?: string;
-  /**
-   * Styled-system prop parsers (`space`, `layout`, ...) appended AFTER the theme
-   * override resolver, so per-instance props (`m`, `p`, `width`, ...) always beat
-   * theme `styleOverrides`.
-   */
-  systemProps?: ReadonlyArray<Interpolation<never>>;
-  /**
-   * Custom mapping from render props to applied override styles - replaces the
-   * default `styleOverrides[slot]` lookup (for prop-keyed override keys).
-   */
-  overridesResolver?: (props: Record<string, unknown>, styleOverrides: Record<string, unknown>) => unknown;
-}
-/**
- * The `styled.div`, `styled.span`, ... tag shorthands - mirrors Emotion's own
- * `StyledTags`, retyped against this package's `Theme` instead of Emotion's
- * (otherwise-empty) one, so `${({ theme }) => theme.space[2]}` template
- * interpolations resolve to the real theme shape.
- */
-type StyledTags = { [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent<{
-  theme?: Theme;
-  as?: React.ElementType;
-}, JSX.IntrinsicElements[Tag]>; };
-/** Overloads mirroring Emotion's, with the theme-customization options added. */
-interface CreateThemedStyled extends StyledTags {
-  <C extends ComponentClass<ComponentProps<C>>, ForwardedProps extends keyof ComponentProps<C> & string = keyof ComponentProps<C> & string>(component: C, options: FilteringStyledOptions<ComponentProps<C>, ForwardedProps> & ThemeCustomizationOptions): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
-    theme?: Theme;
-  }, {}, {
-    ref?: Ref<InstanceType<C>>;
-  }>;
-  <C extends ComponentType<ComponentProps<C>>, ForwardedProps extends keyof ComponentProps<C> & string = keyof ComponentProps<C> & string>(component: C, options: FilteringStyledOptions<ComponentProps<C>, ForwardedProps> & ThemeCustomizationOptions): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
-    theme?: Theme;
-  }>;
-  <C extends ComponentType<ComponentProps<C>>>(component: C, options?: StyledOptions<ComponentProps<C>> & ThemeCustomizationOptions): CreateStyledComponent<PropsOf<C> & {
-    theme?: Theme;
-  }>;
-  <Tag extends keyof JSX.IntrinsicElements, ForwardedProps extends keyof JSX.IntrinsicElements[Tag] & string = keyof JSX.IntrinsicElements[Tag] & string>(tag: Tag, options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps> & ThemeCustomizationOptions): CreateStyledComponent<{
-    theme?: Theme;
-    as?: React.ElementType;
-  }, Pick<JSX.IntrinsicElements[Tag], ForwardedProps>>;
-  <Tag extends keyof JSX.IntrinsicElements>(tag: Tag, options?: StyledOptions<JSX.IntrinsicElements[Tag]> & ThemeCustomizationOptions): CreateStyledComponent<{
-    theme?: Theme;
-    as?: React.ElementType;
-  }, JSX.IntrinsicElements[Tag]>;
-}
-/**
- * The design system's `styled` - Emotion's styled plus theme-level component
- * customization (`theme.components[name].styleOverrides` / `.variants`).
- */
-declare const styled: CreateThemedStyled;
-//#endregion
-export { ThemeCustomizationOptions as a, props as i, css$1 as n, styled as o, keyframes as r, createShouldForwardProp as t };

package/dist/index-CA7HnbtH.d.cts

@@ -1,21 +0,0 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { s as ViewProps } from "./index-nB94D7UM.cjs";
-import { FlexboxProps } from "@soroush.tech/styled-system";
-//#region src/Flex/Flex.d.ts
-/** Valid values for the gap prop - derived from theme.space keys. */
-type GapToken = keyof Theme['space'];
-/**
- * `layout` puts the flex container on the page frame, as on any View: the theme's margin and
- * max width per breakpoint. The flexbox stays as set - a column by default, a row with
- * `flexDirection="row"`. Columns are Grid's: content on the page columns uses `<Grid layout>`.
- */
-interface FlexProps extends ViewProps, FlexboxProps<Theme> {}
-declare const Flex: import("@emotion/styled").StyledComponent<{
-  theme?: Theme;
-  as?: React.ElementType;
-} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-  theme?: Theme;
-} & FlexProps, {}, {}>;
-//#endregion
-export { FlexProps as n, GapToken as r, Flex as t };

package/dist/index-CKZaErxJ.d.mts

@@ -1,21 +0,0 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { s as ViewProps } from "./index-cuv3o-L7.mjs";
-import { FlexboxProps } from "@soroush.tech/styled-system";
-//#region src/Flex/Flex.d.ts
-/** Valid values for the gap prop - derived from theme.space keys. */
-type GapToken = keyof Theme['space'];
-/**
- * `layout` puts the flex container on the page frame, as on any View: the theme's margin and
- * max width per breakpoint. The flexbox stays as set - a column by default, a row with
- * `flexDirection="row"`. Columns are Grid's: content on the page columns uses `<Grid layout>`.
- */
-interface FlexProps extends ViewProps, FlexboxProps<Theme> {}
-declare const Flex: import("@emotion/styled").StyledComponent<{
-  theme?: Theme;
-  as?: React.ElementType;
-} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-  theme?: Theme;
-} & FlexProps, {}, {}>;
-//#endregion
-export { FlexProps as n, GapToken as r, Flex as t };