polen 0.11.0-next.2 → 0.11.0-next.21

package/build/lib/swiss/types.d.ts

@@ -0,0 +1,340 @@
+import type { LayoutProps, MarginProps } from '@radix-ui/themes/props';
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * Responsive value type that matches Radix UI Themes breakpoint pattern.
+ * Allows values to change at different viewport sizes.
+ */
+export type ResponsiveValue<T> = T | {
+    initial?: T;
+    xs?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+};
+/**
+ * Grid span zones for content placement.
+ */
+export type GridSpan = 'body' | 'extended' | 'viewport';
+/**
+ * Number of columns (1-12) for grid items.
+ */
+export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/**
+ * Grid column positions including the end position (13) for 12-column grids.
+ */
+export type GridPosition = GridColumns | 13;
+/**
+ * String literal types for explicit grid column positioning.
+ * Provides type-safe CSS grid-column values.
+ */
+export type GridColumnString = `${GridPosition}` | `${GridPosition} / ${GridPosition}` | `${GridPosition} / span ${GridColumns}` | `span ${GridColumns}` | 'auto';
+/**
+ * Props for the main Swiss Grid container component.
+ * Creates a 12-column grid system with semantic zones for content placement.
+ *
+ * The grid defines three content zones:
+ * - **Viewport**: Full viewport width
+ * - **Extended**: Slightly wider than body, for emphasis
+ * - **Body**: Main content area with 12 columns
+ *
+ * @example
+ * ```tsx
+ * <Swiss.Grid
+ *   maxWidth={1440}
+ *   gutter="var(--space-4)"
+ *   margins="var(--space-5)"
+ *   debug={true}
+ * >
+ *   <Swiss.Body>Main content</Swiss.Body>
+ *   <Swiss.Extended>Featured image</Swiss.Extended>
+ *   <Swiss.Viewport>Full-width hero</Swiss.Viewport>
+ * </Swiss.Grid>
+ * ```
+ */
+export interface GridProps extends LayoutProps, MarginProps {
+    children: ReactNode;
+    /**
+     * Gap between grid columns.
+     * Typically uses Radix space variables for consistent spacing.
+     *
+     * @default "var(--space-4, 1.5rem)"
+     *
+     * @example
+     * ```tsx
+     * // Using Radix space scale
+     * <Swiss.Grid gutter="var(--space-3)">
+     *
+     * // Responsive gaps
+     * <Swiss.Grid gutter={{ initial: "var(--space-2)", md: "var(--space-4)" }}>
+     * ```
+     */
+    gutter?: ResponsiveValue<string>;
+    /**
+     * Minimum margins on either side of the grid.
+     * These margins ensure content doesn't touch viewport edges.
+     *
+     * @default "var(--space-5, 2rem)"
+     *
+     * @example
+     * ```tsx
+     * // Consistent margins
+     * <Swiss.Grid margins="var(--space-6)">
+     *
+     * // Responsive margins - tighter on mobile
+     * <Swiss.Grid margins={{ initial: "var(--space-3)", md: "var(--space-5)" }}>
+     * ```
+     */
+    margins?: ResponsiveValue<string>;
+    /**
+     * Number of columns in the grid.
+     * Defaults to 12 for desktop, automatically adjusts for tablet (8) and mobile (4).
+     *
+     * @default 12
+     *
+     * @example
+     * ```tsx
+     * // Custom column count
+     * <Swiss.Grid columns={16}>
+     *
+     * // Responsive columns
+     * <Swiss.Grid columns={{ initial: 4, sm: 8, md: 12 }}>
+     * ```
+     */
+    columns?: ResponsiveValue<number>;
+    /**
+     * Enable debug mode to show grid overlay.
+     * Displays a visual grid to help with layout development.
+     *
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Additional inline styles.
+     */
+    style?: CSSProperties;
+}
+/**
+ * Props for semantic grid zone components (Body, Viewport, Extended).
+ * These components automatically span their respective grid zones.
+ *
+ * @example
+ * ```tsx
+ * // Body zone - main content area
+ * <Swiss.Body>
+ *   <article>Article content constrained to body width</article>
+ * </Swiss.Body>
+ *
+ * // Extended zone - slightly wider than body
+ * <Swiss.Extended>
+ *   <img src="feature.jpg" alt="Featured image breaks out slightly" />
+ * </Swiss.Extended>
+ *
+ * // Viewport zone - full width
+ * <Swiss.Viewport>
+ *   <section>Full-width hero section</section>
+ * </Swiss.Viewport>
+ * ```
+ */
+export interface GridItemProps extends LayoutProps, MarginProps {
+    children: ReactNode;
+    /**
+     * Whether to merge props onto immediate child element.
+     * When true, the component doesn't render its own element but merges
+     * its props (including grid zone positioning) onto the child element.
+     * Useful for maintaining semantic HTML while benefiting from grid zones.
+     *
+     * @default false
+     *
+     * @example
+     * ```tsx
+     * // Merges Body zone onto existing section element
+     * <Swiss.Body asChild>
+     *   <section>Content respects body zone without extra div</section>
+     * </Swiss.Body>
+     * ```
+     */
+    asChild?: boolean;
+    /**
+     * Enable subgrid to propagate parent grid tracks to children.
+     * When true, this item becomes a grid container with `grid-template-columns: subgrid`,
+     * allowing its children to align with the parent grid columns.
+     *
+     * @default false
+     *
+     * @example
+     * ```tsx
+     * // Navbar that aligns its children to parent grid
+     * <Swiss.Viewport subgrid flow="row">
+     *   <Logo />        // Aligns to grid columns
+     *   <Navigation />  // Aligns to grid columns
+     *   <Actions />     // Aligns to grid columns
+     * </Swiss.Viewport>
+     * ```
+     */
+    subgrid?: boolean;
+    /**
+     * Controls the layout direction when subgrid is enabled.
+     * Uses Flexbox-like semantics for intuitive API.
+     * - `'row'`: Horizontal layout (items placed left to right)
+     * - `'column'`: Vertical layout (items placed top to bottom)
+     * - `undefined`: Defaults to 'row' (horizontal) when subgrid is true
+     *
+     * Only applies when `subgrid=true`.
+     *
+     * @example
+     * ```tsx
+     * // Horizontal navbar (default)
+     * <Swiss.Body subgrid>
+     *   <Item cols={2}>Logo</Item>
+     *   <Item cols={8}>Nav</Item>
+     *   <Item cols={2}>Actions</Item>
+     * </Swiss.Body>
+     *
+     * // Vertical sidebar
+     * <Swiss.Extended subgrid flow="column">
+     *   <Item>Home</Item>
+     *   <Item>About</Item>
+     *   <Item>Contact</Item>
+     * </Swiss.Extended>
+     * ```
+     */
+    flow?: 'row' | 'column';
+    /**
+     * Additional CSS class names for custom styling.
+     */
+    className?: string;
+    /**
+     * Additional inline styles.
+     * Useful for one-off adjustments.
+     */
+    style?: CSSProperties;
+}
+/**
+ * Props for the flexible Item component.
+ * Provides intelligent column spanning with auto-placement or explicit positioning.
+ * Inherits subgrid and flow capabilities from GridItemProps.
+ */
+export interface ItemProps extends GridItemProps {
+    /**
+     * Semantic grid zone to span.
+     * - `'body'`: Main content area (12 columns)
+     * - `'extended'`: Slightly wider than body
+     * - `'viewport'`: Full viewport width
+     *
+     * @default 'body'
+     *
+     * @example
+     * ```tsx
+     * <Swiss.Item span="viewport">Full-width hero</Swiss.Item>
+     * <Swiss.Item span="body">Article content</Swiss.Item>
+     * <Swiss.Item span="extended">Featured image</Swiss.Item>
+     * ```
+     */
+    span?: ResponsiveValue<GridSpan>;
+    /**
+     * Column specification - intelligently handles both auto-placement and explicit positioning.
+     *
+     * **Number values** (1-12): Span that many columns in auto-flow
+     * **String values**: Explicit CSS grid-column positioning
+     *
+     * When used with `start` prop, number values specify the span from the start position.
+     *
+     * @example
+     * ```tsx
+     * // Auto-placement - just specify size
+     * <Swiss.Item cols={6}>Half width</Swiss.Item>
+     *
+     * // With start position
+     * <Swiss.Item cols={7} start={5}>Start at col 5, span 7 columns</Swiss.Item>
+     *
+     * // Explicit placement - exact position
+     * <Swiss.Item cols="3 / 11">Columns 3-10</Swiss.Item>
+     * <Swiss.Item cols="1 / span 4">Start at 1, span 4</Swiss.Item>
+     *
+     * // Responsive
+     * <Swiss.Item cols={{ initial: 12, md: 6, lg: "3 / 7" }}>
+     *   Full width mobile, half tablet, cols 3-6 desktop
+     * </Swiss.Item>
+     * ```
+     */
+    cols?: ResponsiveValue<GridColumns | GridColumnString>;
+    /**
+     * Starting column position (1-13) for explicit grid placement.
+     * When used with numeric `cols`, creates `grid-column: start / span cols`.
+     * Ignored when `cols` is a string value with explicit positioning.
+     *
+     * @example
+     * ```tsx
+     * // Start at column 5, span 7 columns
+     * <Swiss.Item start={5} cols={7}>Content</Swiss.Item>
+     *
+     * // Responsive start position
+     * <Swiss.Item start={{ initial: 1, md: 5 }} cols={7}>
+     *   Start at col 1 mobile, col 5 desktop
+     * </Swiss.Item>
+     * ```
+     */
+    start?: ResponsiveValue<GridPosition>;
+}
+/**
+ * Props for the Swiss Grid SubGrid component.
+ * SubGrid inherits grid tracks from its parent grid, enabling perfect alignment.
+ */
+export interface SubGridProps extends React.HTMLAttributes<HTMLDivElement>, LayoutProps {
+    /**
+     * Whether to merge props onto immediate child element.
+     * When true, SubGrid doesn't render its own element.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Number of parent grid columns this subgrid should span.
+     * Supports responsive values for different breakpoints.
+     *
+     * @example
+     * ```tsx
+     * // Span 12 columns on mobile, 8 on desktop
+     * <Swiss.SubGrid cols={{ initial: 12, md: 8 }}>
+     * ```
+     */
+    cols?: ResponsiveValue<number>;
+    /**
+     * Number of rows to span (optional).
+     * If not provided, inherits all rows from parent grid.
+     */
+    rows?: ResponsiveValue<number>;
+    /**
+     * Controls the layout direction of auto-placed items, using Flexbox-like semantics.
+     * - `'row'`: Horizontal layout (items placed left to right)
+     * - `'column'`: Vertical layout (items placed top to bottom)
+     * - `undefined`: Don't set flow direction (inherit from parent or use CSS default)
+     *
+     * Note: Internally maps to CSS grid-auto-flow with inverted values for intuitive API:
+     * - `'row'` → `grid-auto-flow: column` (fills columns first for horizontal appearance)
+     * - `'column'` → `grid-auto-flow: row` (fills rows first for vertical appearance)
+     *
+     * @example
+     * ```tsx
+     * // Horizontal navbar layout
+     * <Swiss.SubGrid flow="row">
+     *   <Swiss.Item cols={2}>Logo</Swiss.Item>
+     *   <Swiss.Item cols={8}>Navigation</Swiss.Item>
+     *   <Swiss.Item cols={2}>Actions</Swiss.Item>
+     * </Swiss.SubGrid>
+     *
+     * // Vertical sidebar layout
+     * <Swiss.SubGrid flow="column">
+     *   <Swiss.Item>Home</Swiss.Item>
+     *   <Swiss.Item>About</Swiss.Item>
+     *   <Swiss.Item>Contact</Swiss.Item>
+     * </Swiss.SubGrid>
+     * ```
+     */
+    flow?: 'row' | 'column';
+}
+//# sourceMappingURL=types.d.ts.map

package/build/lib/swiss/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/swiss/types.ts"],"names":[],"mappings":"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"}

package/build/lib/swiss/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build/lib/swiss/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/lib/swiss/types.ts"],"names":[],"mappings":""}

package/build/lib/swiss/utils.d.ts

@@ -0,0 +1,37 @@
+import type { GridColumns, GridSpan, ResponsiveValue } from './types.js';
+/**
+ * Generate CSS variables from responsive props.
+ */
+export declare const generateCSSVars: (props: {
+    maxWidth?: ResponsiveValue<number | string>;
+    gutter?: ResponsiveValue<string>;
+    margins?: ResponsiveValue<string>;
+    columns?: ResponsiveValue<number>;
+}) => Record<string, string | undefined>;
+/**
+ * Generate data attributes for responsive grid item behavior.
+ */
+export declare const generateDataAttributes: (props: {
+    span?: ResponsiveValue<GridSpan>;
+    cols?: ResponsiveValue<GridColumns>;
+}) => Record<string, string>;
+/**
+ * Combine class names, filtering out undefined values.
+ */
+export declare const cx: (...classes: (string | undefined | false)[]) => string;
+/**
+ * Extract layout props (margin, padding, position, etc.) from component props.
+ * Uses Radix UI Themes' extractProps to generate classNames and styles.
+ */
+export declare const extractLayoutProps: <T extends Record<string, any>>(props: T) => Omit<T & {
+    className?: string;
+    style?: import("react").CSSProperties;
+}, "width" | "height" | "left" | "right" | "p" | "px" | "py" | "pt" | "pr" | "pb" | "pl" | "minWidth" | "maxWidth" | "minHeight" | "maxHeight" | "position" | "inset" | "top" | "bottom" | "overflow" | "overflowX" | "overflowY" | "flexBasis" | "flexShrink" | "flexGrow" | "gridArea" | "gridColumn" | "gridColumnStart" | "gridColumnEnd" | "gridRow" | "gridRowStart" | "gridRowEnd" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml">;
+/**
+ * @deprecated Use extractLayoutProps instead
+ */
+export declare const extractSpacingProps: <T extends Record<string, any>>(props: T) => Omit<T & {
+    className?: string;
+    style?: import("react").CSSProperties;
+}, "width" | "height" | "left" | "right" | "p" | "px" | "py" | "pt" | "pr" | "pb" | "pl" | "minWidth" | "maxWidth" | "minHeight" | "maxHeight" | "position" | "inset" | "top" | "bottom" | "overflow" | "overflowX" | "overflowY" | "flexBasis" | "flexShrink" | "flexGrow" | "gridArea" | "gridColumn" | "gridColumnStart" | "gridColumnEnd" | "gridRow" | "gridRowStart" | "gridRowEnd" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml">;
+//# sourceMappingURL=utils.d.ts.map

package/build/lib/swiss/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/swiss/utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AASxE;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO;IACrC,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IAC3C,MAAM,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAChC,OAAO,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IACjC,OAAO,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;CAClC,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CA4DpC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,OAAO;IAC5C,IAAI,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAA;IAChC,IAAI,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;CACpC,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAgCxB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,EAAE,GAAI,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,EAAE,KAAG,MAE/D,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,CAAC;;;0aAMzE,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAXG,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,SAAS,CAAC;;;0aAWrB,CAAA"}

package/build/lib/swiss/utils.js

@@ -0,0 +1,163 @@
+import { extractProps } from '@radix-ui/themes/helpers';
+import { layoutPropDefs, marginPropDefs, paddingPropDefs } from '@radix-ui/themes/props';
+/**
+ * Convert a value to pixels if it's a number, otherwise return as-is.
+ */
+const toPx = (value) => {
+    return typeof value === 'number' ? `${value}px` : value;
+};
+/**
+ * Generate CSS variables from responsive props.
+ */
+export const generateCSSVars = (props) => {
+    const vars = {};
+    // Handle maxWidth
+    if (props.maxWidth !== undefined) {
+        if (typeof props.maxWidth === 'object') {
+            if (props.maxWidth.initial !== undefined)
+                vars['--swiss-max'] = toPx(props.maxWidth.initial);
+            if (props.maxWidth.xs !== undefined)
+                vars['--swiss-max-xs'] = toPx(props.maxWidth.xs);
+            if (props.maxWidth.sm !== undefined)
+                vars['--swiss-max-sm'] = toPx(props.maxWidth.sm);
+            if (props.maxWidth.md !== undefined)
+                vars['--swiss-max-md'] = toPx(props.maxWidth.md);
+            if (props.maxWidth.lg !== undefined)
+                vars['--swiss-max-lg'] = toPx(props.maxWidth.lg);
+            if (props.maxWidth.xl !== undefined)
+                vars['--swiss-max-xl'] = toPx(props.maxWidth.xl);
+        }
+        else {
+            vars['--swiss-max'] = toPx(props.maxWidth);
+        }
+    }
+    // Handle gutter
+    if (props.gutter !== undefined) {
+        if (typeof props.gutter === 'object') {
+            if (props.gutter.initial !== undefined)
+                vars['--swiss-gutter'] = props.gutter.initial;
+            if (props.gutter.xs !== undefined)
+                vars['--swiss-gutter-xs'] = props.gutter.xs;
+            if (props.gutter.sm !== undefined)
+                vars['--swiss-gutter-sm'] = props.gutter.sm;
+            if (props.gutter.md !== undefined)
+                vars['--swiss-gutter-md'] = props.gutter.md;
+            if (props.gutter.lg !== undefined)
+                vars['--swiss-gutter-lg'] = props.gutter.lg;
+            if (props.gutter.xl !== undefined)
+                vars['--swiss-gutter-xl'] = props.gutter.xl;
+        }
+        else {
+            vars['--swiss-gutter'] = props.gutter;
+        }
+    }
+    // Handle margins
+    if (props.margins !== undefined) {
+        if (typeof props.margins === 'object') {
+            if (props.margins.initial !== undefined)
+                vars['--swiss-margins'] = props.margins.initial;
+            if (props.margins.xs !== undefined)
+                vars['--swiss-margins-xs'] = props.margins.xs;
+            if (props.margins.sm !== undefined)
+                vars['--swiss-margins-sm'] = props.margins.sm;
+            if (props.margins.md !== undefined)
+                vars['--swiss-margins-md'] = props.margins.md;
+            if (props.margins.lg !== undefined)
+                vars['--swiss-margins-lg'] = props.margins.lg;
+            if (props.margins.xl !== undefined)
+                vars['--swiss-margins-xl'] = props.margins.xl;
+        }
+        else {
+            vars['--swiss-margins'] = props.margins;
+        }
+    }
+    // Handle columns
+    if (props.columns !== undefined) {
+        if (typeof props.columns === 'object') {
+            if (props.columns.initial !== undefined)
+                vars['--swiss-columns'] = String(props.columns.initial);
+            if (props.columns.xs !== undefined)
+                vars['--swiss-columns-xs'] = String(props.columns.xs);
+            if (props.columns.sm !== undefined)
+                vars['--swiss-columns-sm'] = String(props.columns.sm);
+            if (props.columns.md !== undefined)
+                vars['--swiss-columns-md'] = String(props.columns.md);
+            if (props.columns.lg !== undefined)
+                vars['--swiss-columns-lg'] = String(props.columns.lg);
+            if (props.columns.xl !== undefined)
+                vars['--swiss-columns-xl'] = String(props.columns.xl);
+        }
+        else {
+            vars['--swiss-columns'] = String(props.columns);
+        }
+    }
+    return vars;
+};
+/**
+ * Generate data attributes for responsive grid item behavior.
+ */
+export const generateDataAttributes = (props) => {
+    const attrs = {};
+    // Handle span
+    if (props.span !== undefined) {
+        if (typeof props.span === 'object') {
+            if (props.span.initial !== undefined)
+                attrs['data-span'] = props.span.initial;
+            if (props.span.xs !== undefined)
+                attrs['data-span-xs'] = props.span.xs;
+            if (props.span.sm !== undefined)
+                attrs['data-span-sm'] = props.span.sm;
+            if (props.span.md !== undefined)
+                attrs['data-span-md'] = props.span.md;
+            if (props.span.lg !== undefined)
+                attrs['data-span-lg'] = props.span.lg;
+            if (props.span.xl !== undefined)
+                attrs['data-span-xl'] = props.span.xl;
+        }
+        else {
+            attrs['data-span'] = props.span;
+        }
+    }
+    // Handle cols
+    if (props.cols !== undefined) {
+        if (typeof props.cols === 'object') {
+            if (props.cols.initial !== undefined)
+                attrs['data-cols'] = String(props.cols.initial);
+            if (props.cols.xs !== undefined)
+                attrs['data-cols-xs'] = String(props.cols.xs);
+            if (props.cols.sm !== undefined)
+                attrs['data-cols-sm'] = String(props.cols.sm);
+            if (props.cols.md !== undefined)
+                attrs['data-cols-md'] = String(props.cols.md);
+            if (props.cols.lg !== undefined)
+                attrs['data-cols-lg'] = String(props.cols.lg);
+            if (props.cols.xl !== undefined)
+                attrs['data-cols-xl'] = String(props.cols.xl);
+        }
+        else {
+            attrs['data-cols'] = String(props.cols);
+        }
+    }
+    return attrs;
+};
+/**
+ * Combine class names, filtering out undefined values.
+ */
+export const cx = (...classes) => {
+    return classes.filter(Boolean).join(' ');
+};
+/**
+ * Extract layout props (margin, padding, position, etc.) from component props.
+ * Uses Radix UI Themes' extractProps to generate classNames and styles.
+ */
+export const extractLayoutProps = (props) => {
+    // Use Radix's extractProps with layout and margin prop definitions
+    // Note: layoutPropDefs already includes padding, width, and height internally
+    const extracted = extractProps(props, layoutPropDefs, marginPropDefs);
+    return extracted;
+};
+/**
+ * @deprecated Use extractLayoutProps instead
+ */
+export const extractSpacingProps = extractLayoutProps;
+//# sourceMappingURL=utils.js.map

package/build/lib/swiss/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/lib/swiss/utils.ts"],"names":[],"mappings":"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"}

package/build/lib/theme/$$.d.ts

@@ -0,0 +1,2 @@
+export * from './theme.js';
+//# sourceMappingURL=$$.d.ts.map

package/build/lib/theme/$$.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"$$.d.ts","sourceRoot":"","sources":["../../../src/lib/theme/$$.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/build/lib/theme/$$.js

@@ -0,0 +1,2 @@
+export * from './theme.js';
+//# sourceMappingURL=$$.js.map

package/build/lib/theme/$$.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"$$.js","sourceRoot":"","sources":["../../../src/lib/theme/$$.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/build/lib/theme/$.d.ts

@@ -1,2 +1,2 @@
-export * as Theme from './theme.js';
+export * as Theme from './$$.js';
 //# sourceMappingURL=$.d.ts.map

package/build/lib/theme/$.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"$.d.ts","sourceRoot":"","sources":["../../../src/lib/theme/$.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,YAAY,CAAA"}
+{"version":3,"file":"$.d.ts","sourceRoot":"","sources":["../../../src/lib/theme/$.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,SAAS,CAAA"}

package/build/lib/theme/$.js

@@ -1,3 +1,3 @@
 // Namespace export
-export * as Theme from './theme.js';
+export * as Theme from './$$.js';
 //# sourceMappingURL=$.js.map

package/build/lib/theme/$.js.map

@@ -1 +1 @@
-{"version":3,"file":"$.js","sourceRoot":"","sources":["../../../src/lib/theme/$.ts"],"names":[],"mappings":"AAAA,mBAAmB;AACnB,OAAO,KAAK,KAAK,MAAM,YAAY,CAAA"}
+{"version":3,"file":"$.js","sourceRoot":"","sources":["../../../src/lib/theme/$.ts"],"names":[],"mappings":"AAAA,mBAAmB;AACnB,OAAO,KAAK,KAAK,MAAM,SAAS,CAAA"}

package/build/lib/version/$$.d.ts

@@ -0,0 +1,2 @@
+export * from './version.js';
+//# sourceMappingURL=$$.d.ts.map

package/build/lib/version/$$.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"$$.d.ts","sourceRoot":"","sources":["../../../src/lib/version/$$.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/build/lib/version/$$.js

@@ -0,0 +1,2 @@
+export * from './version.js';
+//# sourceMappingURL=$$.js.map

package/build/lib/version/$$.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"$$.js","sourceRoot":"","sources":["../../../src/lib/version/$$.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/build/lib/version/$.d.ts

@@ -0,0 +1,2 @@
+export * as Version from './$$.js';
+//# sourceMappingURL=$.d.ts.map

package/build/lib/version/$.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"$.d.ts","sourceRoot":"","sources":["../../../src/lib/version/$.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,SAAS,CAAA"}

package/build/lib/version/$.js

@@ -0,0 +1,2 @@
+export * as Version from './$$.js';
+//# sourceMappingURL=$.js.map

package/build/lib/version/$.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"$.js","sourceRoot":"","sources":["../../../src/lib/version/$.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,SAAS,CAAA"}