@spark-web/box 0.0.0-snapshot-release-20260409001813

package/CLAUDE.md

@@ -0,0 +1,87 @@
+# @spark-web/box — AI Context
+
+## What this is
+
+The foundational layout primitive. Every Spark component is built on `Box`. It
+exposes a prop-based API for applying theme-constrained styles to any HTML
+element. Use it when no higher-level layout component (`Stack`, `Row`,
+`Columns`) fits the shape of what you need.
+
+## What this is NOT
+
+- Not a text component — use `Text` for any rendered text content
+- Not a layout shorthand — for vertical stacks use `Stack`, for horizontal rows
+  use `Row`, for CSS grid use `Columns`
+- Not a button — use `Button` or `ButtonLink` for interactive elements
+
+## Props interface
+
+`Box` accepts all `BoxStyleProps` (see below) plus:
+
+| Prop        | Type                          | Notes                                            |
+| ----------- | ----------------------------- | ------------------------------------------------ |
+| `as`        | `keyof HTMLElementTagNameMap` | Changes the rendered element; defaults to `div`  |
+| `asElement` | `keyof HTMLElementTagNameMap` | Tells the reset system what element `as` renders |
+| `children`  | `ReactNode`                   | —                                                |
+| `data`      | `DataAttributeMap`            | Test/analytics attributes                        |
+| `id`        | `string`                      | —                                                |
+| `css`       | `CSSObject`                   | Escape hatch for styles not covered by props     |
+
+### BoxStyleProps — commonly used
+
+Spacing values map to `SparkTheme['spacing']` keys:
+`none | xsmall | small | medium | large | xlarge | xxlarge`
+
+Sizing values map to `SparkTheme['sizing']` keys:
+`xxsmall | xsmall | small | medium | large | xlarge | xxlarge | full`
+
+| Prop                              | Values                                                                       |
+| --------------------------------- | ---------------------------------------------------------------------------- |
+| `padding`                         | spacing token (responsive)                                                   |
+| `paddingX`                        | spacing token (responsive)                                                   |
+| `paddingY`                        | spacing token (responsive)                                                   |
+| `paddingTop/Bottom/Left/Right`    | spacing token (responsive)                                                   |
+| `margin`                          | spacing token (responsive)                                                   |
+| `marginX/Y/Top/Bottom/Left/Right` | spacing token (responsive)                                                   |
+| `gap`                             | spacing token (responsive, excludes `none` and `full`)                       |
+| `width`                           | sizing token or `'full'` (responsive)                                        |
+| `height`                          | sizing token (responsive)                                                    |
+| `display`                         | `'block' \| 'inline' \| 'inline-block' \| 'inline-flex' \| 'flex' \| 'none'` |
+| `flexDirection`                   | `'row' \| 'rowReverse' \| 'column' \| 'columnReverse'`                       |
+| `flexWrap`                        | `'wrap' \| 'nowrap'`                                                         |
+| `alignItems`                      | `'center' \| 'flexStart' \| 'flexEnd' \| 'stretch'`                          |
+| `justifyContent`                  | `'start' \| 'center' \| 'end' \| 'spaceBetween' \| 'stretch'`                |
+| `flexShrink`                      | `0 \| 1`                                                                     |
+| `position`                        | `'relative' \| 'absolute' \| 'fixed' \| 'sticky'`                            |
+| `top/bottom/left/right`           | `number` (responsive)                                                        |
+| `overflow`                        | `'hidden' \| 'auto' \| 'scroll' \| 'visible'`                                |
+| `background`                      | background token (e.g. `'surface' \| 'primary' \| 'primarySoft'`)            |
+| `border`                          | border color token (e.g. `'standard' \| 'primary'`)                          |
+| `borderRadius`                    | `'small' \| 'medium' \| 'large' \| 'full'`                                   |
+| `cursor`                          | `'default' \| 'pointer'`                                                     |
+
+## Token usage
+
+All values come from the theme — never raw hex, px, or Tailwind. Use
+`useTheme()` from `@spark-web/theme` for any value not expressible as a Box prop
+(e.g. inline color from `theme.color.foreground.muted`).
+
+The `background` prop automatically pushes a background context so child `Text`
+components can invert their color tone when placed on dark backgrounds.
+
+## Composition
+
+`Box` is the leaf — it does not compose other Spark components. Every other
+Spark component composes `Box` internally.
+
+## Do NOTs
+
+- NEVER use raw hex, px, em, rem, or Tailwind classes
+- NEVER use `Box` for text content — use `Text`
+- NEVER use `Box` when `Stack`, `Row`, or `Columns` fits the layout — those
+  components encode the correct flex/grid setup automatically
+- NEVER pass `display`, `alignItems`, `flexDirection`, or `justifyContent` to
+  `Stack` or `Row` — those are locked internally; use `Box` if you need custom
+  flex control
+- NEVER use `style={{}}` for theme values — use Box props or `css` prop with
+  theme tokens

package/README.md

@@ -0,0 +1,143 @@
+---
+title: Box
+storybookPath: page-layout-box--default
+isExperimentalPackage: false
+---
+
+The Box component is our lowest-level primitive. The goal of the Box component
+is to map props to our tokens so that consumers should be able to use these
+props for all of their styling needs. Ideally, you shouldn't need to use the
+`className` or `style` prop at all. Internally, all Spark Web components are
+composed using the Box component.
+
+Box is a polymorphic component (meaning it will render different elements
+depending on what is provided to the `as` prop). If no `as` prop is provided,
+Box will render a `div`.
+
+We also spread in consumer props, so any valid HTML attributes are also valid
+for Box. Due to some clever TypeScript we can even warn you when you use an
+invalid combination of props.
+
+```jsx
+<Box as="input" href="https://spark.brighte.com.au" />
+```
+
+In the example above, you should see a "red squiggly" under the `href` element
+with the following error:
+
+```console
+Type '{ as: "input"; href: string; }' is not assignable to type 'IntrinsicAttributes & { as?: "input" | undefined; ref?: Ref<HTMLInputElement> | undefined; } & Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>>, "as"> & { ...; } & UnresponsiveBoxProps & ResponsiveBoxProps'.
+  Property 'href' does not exist on type 'IntrinsicAttributes & { as?: "input" | undefined; ref?: Ref<HTMLInputElement> | undefined; } & Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>>, "as"> & { ...; } & UnresponsiveBoxProps & ResponsiveBoxProps'. Did you mean 'ref'?
+```
+
+Unfortunately TypeScript errors can be pretty cryptic sometimes 🙃.
+
+**Pro tip**: copying the error message and pasting it into
+[TypeScript Error Translator](https://ts-error-translator.vercel.app/) can
+sometimes help make these errors easier to understand.
+
+A minimal CSS reset is also applied to each element rendered with Box. This
+helps prevent styles from "leaking" out and effecting other elements (which
+should make it easier to incrementally adopt Spark Web into existing projects).
+If you provide a non-Spark component to the `as` prop instead of an element, it
+is recommended that you also use the `asElement` prop so the appropriate styles
+can be applied.
+
+## Examples
+
+### Responsive styles
+
+Most of Box's props accept a string value (usually corresponding to a token), we
+also accept an object for responsive styles.
+
+```jsx live
+const items = [1, 2, 3];
+
+return (
+  <Box
+    background="primaryLow"
+    display="inline-flex"
+    flexDirection={{ mobile: 'row', tablet: 'column', desktop: 'rowReverse' }}
+    gap={{ mobile: 'small', tablet: 'medium', desktop: 'large' }}
+    padding={{ mobile: 'small', tablet: 'medium', desktop: 'large' }}
+  >
+    {items.map(item => (
+      <Row
+        key={item}
+        align="center"
+        alignY="center"
+        background="primary"
+        height={{ mobile: 'small', tablet: 'medium', desktop: 'large' }}
+        width={{ mobile: 'small', tablet: 'medium', desktop: 'large' }}
+      >
+        <Text>{item}</Text>
+      </Row>
+    ))}
+  </Box>
+);
+```
+
+Resize your browser to see the example above change at different breakpoints.
+
+### Backgrounds
+
+Box stores the background in a provider. We can use this to work out what colour
+to use by default for text elements.
+
+```jsx live
+const backgroundTones = [
+  // Light
+  ['surface', 'positiveLight', 'infoLight', 'cautionLight', 'criticalLight'],
+  // Dark
+  ['muted', 'positive', 'info', 'caution', 'critical'],
+];
+
+return (
+  <Stack gap="large">
+    {backgroundTones.map((backgrounds, index) => (
+      <Columns
+        key={index}
+        collapseBelow="tablet"
+        gap="large"
+        template={[1, 1, 1]}
+      >
+        {backgrounds.map(background => (
+          <Box
+            key={background}
+            shadow="medium"
+            background={background}
+            height="large"
+            display="flex"
+            flexShrink={0}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Text weight="semibold">{background}</Text>
+          </Box>
+        ))}
+      </Columns>
+    ))}
+  </Stack>
+);
+```
+
+Notice that the Text in the example above doesn't use the tone prop, the colour
+is worked out using the BackgroundProvider in Box.
+
+**Note:** this will only work if you use the `background` prop. If you try to
+style the background colour in any other way the Text component will not know
+what colour the background is and so cannot invert its colour to make sure that
+its contents are readable.
+
+```jsx
+<Box style={{ background: 'midnightblue' }} padding="large">
+  <Text>Good luck reading this!</Text>
+</Box>
+```
+
+## Props
+
+<PropsTable displayName="Box" />
+
+By default, Box renders a `div` element. You can customise this via the `as`
+prop. Extra props will also be forwarded to the underlying element.

package/dist/declarations/src/background-provider.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react';
+export type BackgroundProviderProps = {
+    type: 'light' | 'dark';
+    children: ReactElement;
+};
+/** Enforce background "lightness" without applying a background color. */
+export declare const BackgroundProvider: ({ type, children, }: BackgroundProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/declarations/src/box.d.ts

@@ -0,0 +1,48 @@
+import type { CSSObject } from '@emotion/react';
+import type { DataAttributeMap } from '@spark-web/utils/internal';
+import type { ReactNode } from 'react';
+import type { BoxStyleProps } from "./use-box-styles.js";
+export type BoxProps = {
+    /** Children element to be rendered inside the component. */
+    children?: ReactNode;
+    /** Sets data attributes on the component. */
+    data?: DataAttributeMap;
+    /** An identifier which must be unique in the whole document. */
+    id?: string;
+    /** Custom css styles. */
+    css?: CSSObject;
+    /**
+     * When providing a component using the "as" prop, optionally tell the system
+     * what the underlying element will be. Used internally to manage reset
+     * styles.
+     */
+    asElement?: keyof HTMLElementTagNameMap;
+} & BoxStyleProps;
+/** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
+export declare const Box: <Comp extends import("react").ElementType = "div">(props: {
+    as?: Comp | undefined;
+    ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
+} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
+    /** Children element to be rendered inside the component. */
+    children?: ReactNode;
+    /** Sets data attributes on the component. */
+    data?: DataAttributeMap;
+    /** An identifier which must be unique in the whole document. */
+    id?: string;
+    /** Custom css styles. */
+    css?: CSSObject;
+    /**
+     * When providing a component using the "as" prop, optionally tell the system
+     * what the underlying element will be. Used internally to manage reset
+     * styles.
+     */
+    asElement?: keyof HTMLElementTagNameMap;
+} & {
+    background?: keyof import("@spark-web/theme").SparkTheme["color"]["background"];
+    cursor?: "default" | "pointer";
+    minHeight?: 0;
+    minWidth?: 0;
+    overflow?: "hidden" | "scroll" | "visible" | "auto";
+    shadow?: keyof import("@spark-web/theme").SparkTheme["shadow"] | string | null;
+    userSelect?: "none";
+} & import("./use-box-styles.js").ResponsiveBoxProps) => import("react").ReactElement;

package/dist/declarations/src/context.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react';
+import type { BoxStyleProps } from "./use-box-styles.js";
+export type BackgroundVariant = NonNullable<BoxStyleProps['background']> | 'UNKNOWN_DARK' | 'UNKNOWN_LIGHT';
+export declare const InternalBackgroundProvider: import("react").Provider<BackgroundVariant>;
+export declare const useBackground: () => BackgroundVariant;
+export declare function renderBackgroundProvider(background: BackgroundVariant | undefined, element: ReactElement | null): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const useBackgroundLightness: (backgroundOverride?: ReturnType<typeof useBackground>) => "light" | "dark";

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,5 @@
+export { BackgroundProvider } from "./background-provider.js";
+export { Box } from "./box.js";
+export { useBackground, useBackgroundLightness } from "./context.js";
+export type { BackgroundProviderProps } from "./background-provider.js";
+export type { BoxProps } from "./box.js";

package/dist/declarations/src/use-box-styles.d.ts

@@ -0,0 +1,227 @@
+import type { ResponsiveProp, SparkTheme } from '@spark-web/theme';
+type ValidGapKeys = keyof Omit<SparkTheme['spacing'], 'none' | 'full'>;
+type ResponsiveSpacing = ResponsiveProp<keyof SparkTheme['spacing']>;
+type ResponsiveSizing = ResponsiveProp<keyof SparkTheme['sizing']>;
+export type ResponsiveBoxProps = {
+    /**
+     * The `margin` shorthand property sets the margin area on all four sides of
+     * an element at once.
+     */
+    margin?: ResponsiveSpacing;
+    /**
+     * The `marginTop` property sets the margin area on the top side of an
+     * element.
+     */
+    marginTop?: ResponsiveSpacing;
+    /**
+     * The `marginRight` property sets the margin area on the right side of an
+     * element.
+     */
+    marginRight?: ResponsiveSpacing;
+    /**
+     * The `marginBottom` property sets the margin area on the bottom side of an
+     * element.
+     */
+    marginBottom?: ResponsiveSpacing;
+    /**
+     * The `marginLeft` property sets the margin area on the left side of an
+     * element.
+     */
+    marginLeft?: ResponsiveSpacing;
+    /**
+     * The `marginY` shorthand property sets the margin area on the top and
+     * bottom of the element.
+     */
+    marginY?: ResponsiveSpacing;
+    /**
+     * The `marginY` shorthand property sets the margin area on the left and
+     * right of the element.
+     */
+    marginX?: ResponsiveSpacing;
+    /**
+     * The `padding` shorthand property sets the padding area on all four sides
+     * of an element at once.
+     */
+    padding?: ResponsiveSpacing;
+    /**
+     * The `paddingTop` property sets the height of the padding area on the top
+     * of an element.
+     */
+    paddingTop?: ResponsiveSpacing;
+    /**
+     * The `paddingRight` property sets the width of the padding area on the
+     * right of an element.
+     */
+    paddingRight?: ResponsiveSpacing;
+    /**
+     * The `paddingBottom` property sets the height of the padding area on the
+     * bottom of an element.
+     */
+    paddingBottom?: ResponsiveSpacing;
+    /**
+     * The `paddingLeft` property sets the width of the padding area on the left
+     * of an element.
+     */
+    paddingLeft?: ResponsiveSpacing;
+    /**
+     * The `paddingY` shorthand property sets the padding area on the top and
+     * bottom of the element.
+     */
+    paddingY?: ResponsiveSpacing;
+    /**
+     * The `paddingX` shorthand property sets the padding area on the left and
+     * right of the element.
+     */
+    paddingX?: ResponsiveSpacing;
+    /** The `border` property sets the color of an element's border. */
+    border?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
+    /** The `border` property sets the color of an element's border on the top side. */
+    borderTop?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
+    /** The `border` property sets the color of an element's border on the bottom side. */
+    borderBottom?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
+    /** The `border` property sets the color of an element's border on the left side. */
+    borderLeft?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
+    /** The `border` property sets the color of an element's border on the right side. */
+    borderRight?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
+    /**
+     * The `borderRadius` property rounds the corners of an element's outer
+     * border edge.
+     */
+    borderRadius?: ResponsiveProp<keyof SparkTheme['border']['radius']> | number;
+    /**
+     * The `borderWidth` property sets the width of an element's border.
+     */
+    borderWidth?: ResponsiveProp<keyof SparkTheme['border']['width']>;
+    /** Sets the element's height. */
+    height?: ResponsiveSizing;
+    /** Sets the element's width. */
+    width?: ResponsiveSizing;
+    /** Controls the alignment of items on the cross axis. */
+    alignItems?: ResponsiveProp<keyof typeof flexMap.alignItems>;
+    /** The size of the gap between each child element. */
+    gap?: ResponsiveProp<ValidGapKeys>;
+    /** Defines the main axis, or how the children are placed. */
+    flexDirection?: ResponsiveProp<keyof typeof flexMap.flexDirection>;
+    /**
+     * defines how the browser distributes space between and around content items
+     * along the main-axis.
+     */
+    justifyContent?: ResponsiveProp<keyof typeof flexMap.justifyContent>;
+    /** Allow flex items to flow onto multiple lines. */
+    flexWrap?: ResponsiveProp<'nowrap' | 'wrap'>;
+    /**
+     * Overrides the parent's `align-items` value. Controls the alignment of
+     * item's on the cross axis.
+     */
+    alignSelf?: ResponsiveProp<keyof typeof flexMap.alignItems>;
+    /**
+     * The `flex` shorthand property sets how a flex item will grow or shrink to
+     * fit the space available in its flex container.
+     */
+    flex?: ResponsiveProp<0 | 1>;
+    /** The `flexGrow` property sets the flex grow factor of a flex item main size. */
+    flexGrow?: ResponsiveProp<0 | 1>;
+    /**
+     * The `flexShrink` property sets the flex shrink factor of a flex item. If
+     * the size of all flex items is larger than the flex container, items shrink
+     * to fit according to `flex-shrink`.
+     */
+    flexShrink?: ResponsiveProp<0 | 1>;
+    /**
+     * The `position` property sets how an element is positioned in a document.
+     * The `top`, `right`, `bottom`, and `left` properties determine the final
+     * location of positioned elements.
+     */
+    position?: ResponsiveProp<'absolute' | 'fixed' | 'relative' | 'sticky'>;
+    /**
+     * The `top` property participates in specifying the vertical position of a
+     * positioned element. It has no effect on non-positioned elements.
+     */
+    top?: ResponsiveProp<number>;
+    /**
+     * The `right` property participates in specifying the horizontal position of
+     * a positioned element. It has no effect on non-positioned elements.
+     */
+    right?: ResponsiveProp<number>;
+    /**
+     * The `bottom` property participates in setting the vertical position of a
+     * positioned element. It has no effect on non-positioned elements.
+     */
+    bottom?: ResponsiveProp<number>;
+    /**
+     * The `left` property participates in specifying the horizontal position of a
+     * positioned element. It has no effect on non-positioned elements.
+     */
+    left?: ResponsiveProp<number>;
+    /**
+     * The `zIndex` property sets the "z-order" of a positioned element and its
+     * descendants or flex items. Overlapping elements with a larger z-index cover
+     * those with a smaller one.
+     */
+    zIndex?: ResponsiveProp<keyof SparkTheme['elevation']>;
+    /**
+     * Sets whether an element is treated as a block or inline element and the
+     * layout used for its children.
+     */
+    display?: ResponsiveProp<'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex' | 'none'>;
+    /**
+     * Sets the opacity of the element. Opacity is the degree to which content
+     * behind an element is hidden, and is the opposite of transparency.
+     */
+    opacity?: ResponsiveProp<number>;
+};
+type UnresponsiveBoxProps = {
+    /** The `background` property sets the background color of an element. */
+    background?: keyof SparkTheme['color']['background'];
+    /**
+     * The `cursor` property sets the type of mouse cursor, if any, to show when
+     * the mouse pointer is over an element.
+     */
+    cursor?: 'default' | 'pointer';
+    /**
+     * The `minHeight` property sets the minimum height of an element. It prevents
+     * the used value of the height property from becoming smaller than the value
+     * specified for `minHeight`.
+     */
+    minHeight?: 0;
+    /**
+     * The `minWidth` property sets the minimum width of an element. It prevents
+     * the used value of the width property from becoming smaller than the value
+     * specified for `minWidth`.
+     */
+    minWidth?: 0;
+    /**
+     * The `overflow` shorthand property sets the desired behavior for an
+     * element's overflow — i.e. when an element's content is too big to fit in
+     * its block formatting context — in both directions.
+     */
+    overflow?: 'hidden' | 'scroll' | 'visible' | 'auto';
+    /** The `boxShadow` property adds shadow effects around an element's frame. */
+    shadow?: keyof SparkTheme['shadow'] | string | null;
+    /** The `userSelect` property controls whether the user can select text. */
+    userSelect?: 'none';
+};
+export type BoxStyleProps = UnresponsiveBoxProps & ResponsiveBoxProps;
+export declare const useBoxStyles: ({ alignItems, alignSelf, background, border, borderTop, borderBottom, borderLeft, borderRight, borderRadius, borderWidth, bottom, cursor, display, flex, flexDirection, flexGrow, flexShrink, flexWrap, gap, height, justifyContent, left, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, minHeight, minWidth, opacity, overflow, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, position, right, shadow, top, userSelect, width, zIndex, }: BoxStyleProps) => import("facepaint").DynamicStyle[];
+declare const flexMap: {
+    readonly alignItems: {
+        readonly start: "flex-start";
+        readonly center: "center";
+        readonly end: "flex-end";
+        readonly stretch: "stretch";
+    };
+    readonly justifyContent: {
+        readonly start: "flex-start";
+        readonly center: "center";
+        readonly end: "flex-end";
+        readonly spaceBetween: "space-between";
+        readonly stretch: "stretch";
+    };
+    readonly flexDirection: {
+        readonly row: "row";
+        readonly rowReverse: "row-reverse";
+        readonly column: "column";
+        readonly columnReverse: "column-reverse";
+    };
+};
+export {};

package/dist/spark-web-box.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWJveC5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=