@autoguru/overdrive 4.43.0-next.1 → 4.43.0-next.3

package/dist/components/Box/Box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAoBpD,eAAO,MAAM,GAAG;KAAI,CAAC,SAAS,WAAW,kCAGtC,WAAW,CAAC,CAAC,CAAC;;CAIhB,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAyBpD,eAAO,MAAM,GAAG;KAAI,CAAC,SAAS,WAAW,kCAGtC,WAAW,CAAC,CAAC,CAAC;;CAUhB,CAAC"}

package/dist/components/Box/Box.js

@@ -5,7 +5,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 const _excluded = ["children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React from 'react';
+import React, { cloneElement } from 'react';
 import { useBox } from "./useBox.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Box = _ref => {
@@ -15,8 +15,12 @@ export const Box = _ref => {
     props = _objectWithoutProperties(_ref, _excluded);
   const {
     Component,
-    componentProps
+    componentProps,
+    reactElement
   } = useBox(props);
+  if (reactElement) {
+    return cloneElement(reactElement, componentProps, children);
+  }
   return _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
     children: children
   }));

package/dist/components/Box/Box.stories.d.ts

@@ -1,8 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Box } from '.';
+import { Box } from './Box';
 declare const meta: Meta<typeof Box>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Standard: Story;
 export declare const ResponsiveProps: Story;
+export declare const DataAttributes: Story;
+export declare const ComponentAsProp: Story;
 //# sourceMappingURL=Box.stories.d.ts.map

package/dist/components/Box/Box.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC;AAExB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAgB1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAKlC,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC"}
+{"version":3,"file":"Box.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAgB1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAKlC,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAKF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC;AAKF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC"}

package/dist/components/Box/Box.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Box.test.d.ts.map

package/dist/components/Box/Box.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.test.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/Box.test.tsx"],"names":[],"mappings":""}

package/dist/components/Box/Box.test.js

@@ -0,0 +1,113 @@
+"use strict";
+
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Box } from "./Box.js";
+import * as stories from "./Box.stories.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  ComponentAsProp,
+  DataAttributes,
+  ResponsiveProps,
+  Standard
+} = composeStories(stories);
+describe('Box', async () => {
+  await it('renders the standard Box story', async () => {
+    await Standard.run();
+    const text = Standard.args.children;
+    const boxElement = screen.getByText(text);
+    expect(boxElement.tagName).toBe('DIV');
+  });
+  await it('renders the Box story with responsive props', async () => {
+    await ResponsiveProps.run();
+    const boxElement = screen.getByText('Resize the viewport');
+    expect(boxElement.className).toMatchSnapshot();
+  });
+  await it('merges custom className with component styles', () => {
+    render(_jsx(Box, {
+      padding: "3",
+      className: "my-custom-class another-class",
+      children: "Custom Class Box"
+    }));
+    const boxElement = screen.getByText('Custom Class Box');
+    expect(boxElement.className).toContain('my-custom-class');
+    expect(boxElement.className).toContain('another-class');
+    expect(boxElement).not.toHaveAttribute('padding');
+    expect(boxElement.className).toMatchSnapshot();
+  });
+  await it('renders as a button element', () => {
+    render(_jsx(Box, {
+      as: "button",
+      children: "Button Box"
+    }));
+    const buttonElement = screen.getByRole('button', {
+      name: 'Button Box'
+    });
+    expect(buttonElement.tagName).toBe('BUTTON');
+  });
+  await it('renders using a React element passed to "as" prop', async () => {
+    await ComponentAsProp.run();
+    const boxElement = screen.getByText('Styled props merged with custom component');
+    expect(boxElement.tagName).toBe('A');
+    expect(boxElement).toHaveAttribute('href', '#hello');
+    expect(boxElement.className).toContain('keep-my-custom-class-name');
+    expect(boxElement).not.toHaveAttribute('backgroundColor');
+    expect(boxElement).not.toHaveAttribute('borderColor');
+    expect(boxElement).not.toHaveAttribute('borderWidth');
+    expect(boxElement).not.toHaveAttribute('p');
+  });
+  await it('renders as an anchor tag with href', () => {
+    render(_jsx(Box, {
+      as: "a",
+      href: "/test-link",
+      children: "Anchor Box"
+    }));
+    const anchorElement = screen.getByRole('link', {
+      name: 'Anchor Box'
+    });
+    expect(anchorElement.tagName).toBe('A');
+    expect(anchorElement).toHaveAttribute('href', '/test-link');
+  });
+  await it('renders with odComponent and testId props', async () => {
+    await DataAttributes.run();
+    const boxElement = screen.getByText('The most basic box (or is it?)');
+    expect(boxElement).toHaveAttribute('data-od-component', 'box-basic');
+    expect(boxElement).toHaveAttribute('data-test-id', 'so-basic');
+    expect(boxElement).toHaveAttribute('data-custom-attribute', 'somewhat less basic');
+  });
+  await it('applies basic style props (padding)', () => {
+    render(_jsx(Box, {
+      padding: "4",
+      children: "Padded Box"
+    }));
+    const boxElement = screen.getByText('Padded Box');
+    expect(boxElement.className).toMatchSnapshot();
+  });
+  await it('applies responsive style props for padding', () => {
+    render(_jsx(Box, {
+      padding: ['2', '4', '6'],
+      children: "Responsive Padded Box"
+    }));
+    const boxElement = screen.getByText('Responsive Padded Box');
+    expect(boxElement.className).toMatchSnapshot();
+  });
+  await it('applies colour and backgroundColour props', () => {
+    render(_jsx(Box, {
+      color: "onSurface",
+      backgroundColor: "danger",
+      children: "Coloured Box"
+    }));
+    const boxElement = screen.getByText('Coloured Box');
+    expect(boxElement.className).toMatchSnapshot();
+  });
+  await it('applies border props correctly', () => {
+    render(_jsx(Box, {
+      borderColor: "warning",
+      borderWidth: "2",
+      children: "Bordered Box"
+    }));
+    const boxElement = screen.getByText('Bordered Box');
+    expect(boxElement.className).toMatchSnapshot();
+  });
+});

package/dist/components/Box/boxStyles.d.ts

@@ -1,5 +1,5 @@
 import type { ElementType } from 'react';
-import type { BoxBasedProps, StyleProps } from './';
-export type BoxStylesProps<E extends ElementType = 'div'> = StyleProps & Omit<BoxBasedProps<E>, 'children'>;
+import type { AsPolyProp, CustomProps, StyleProps } from './';
+export type BoxStylesProps<E extends ElementType = 'div'> = AsPolyProp<E> & Pick<CustomProps, 'className'> & StyleProps;
 export declare const boxStyles: <E extends ElementType = "div">({ as, className, ...props }: BoxStylesProps<E>) => string;
 //# sourceMappingURL=boxStyles.d.ts.map

package/dist/components/Box/boxStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"boxStyles.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/boxStyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAUzC,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAEpD,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,UAAU,GACrE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AA4BpC,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,6BAItD,cAAc,CAAC,CAAC,CAAC,WA2BnB,CAAC"}
+{"version":3,"file":"boxStyles.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/boxStyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAUzC,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAE9D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,GACxE,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,GAC9B,UAAU,CAAC;AA4BZ,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,6BAItD,cAAc,CAAC,CAAC,CAAC,WA4BnB,CAAC"}

package/dist/components/Box/boxStyles.js

@@ -5,7 +5,7 @@ const _excluded = ["as", "className"];
 import clsx from 'clsx';
 import { element } from "../../reset/reset.css.js";
 import { sprinkles, sprinklesLegacyColours, sprinklesResponsive } from "../../styles/sprinkles.css.js";
-import { filterSprinklesProps } from "../../utils/sprinkles.js";
+import { filterPropsWithStyles } from "../../utils/sprinkles.js";
 const borderColorProps = ['borderColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor'];
 const borderStyleProps = ['borderStyle', 'borderBottomStyle', 'borderLeftStyle', 'borderRightStyle', 'borderTopStyle'];
 const borderWidthProps = ['borderWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth'];
@@ -24,7 +24,7 @@ export const boxStyles = _ref => {
     sprinklesProps,
     sprinklesResponsiveProps,
     sprinklesLegacyColourProps
-  } = filterSprinklesProps(props);
+  } = filterPropsWithStyles(props);
   if (hasBorderColorOrWidth && !hasBorderStyle) {
     sprinklesProps['borderStyle'] = 'solid';
   }

package/dist/components/Box/useBox.d.ts

@@ -1,22 +1,26 @@
 import type { ClassValue as ClassName } from 'clsx';
-import type { ComponentPropsWithRef, ElementType, PropsWithChildren } from 'react';
+import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type ReactElement } from 'react';
 import type { Sprinkles, SprinklesResponsive, SprinklesLegacyColours } from '../../styles/sprinkles.css';
-export interface BoxBasedProps<E extends ElementType> extends PropsWithChildren {
-    as?: E;
+export type StyleProps = Sprinkles & SprinklesResponsive & SprinklesLegacyColours;
+export interface CustomProps extends PropsWithChildren {
     className?: ClassName;
     odComponent?: string;
+    testId?: string;
 }
-export type StyleProps = Sprinkles & SprinklesResponsive & SprinklesLegacyColours;
-export type PolymorphicBoxProps<E extends ElementType, Props = object> = BoxBasedProps<E> & Omit<ComponentPropsWithRef<E>, keyof Props | 'as' | 'className'> & Props;
-export type UseBoxProps<E extends ElementType = 'div'> = PolymorphicBoxProps<E, StyleProps>;
-export type ComponentProps<E extends ElementType> = Omit<ComponentPropsWithRef<E>, 'as'>;
-export declare const useBox: <E extends ElementType = "div">({ as, className, odComponent, testId, ...props }: UseBoxProps<E>) => {
+export type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref'];
+export type AsPolyProp<C extends ElementType> = {
+    as?: C | ReactElement;
+};
+export type RefPolyProp<C extends ElementType> = {
+    ref?: PolymorphicRef<C>;
+};
+export type PropsToOmit<C extends ElementType, P> = keyof (AsPolyProp<C> & P);
+export type PolymorphicComponentProps<C extends ElementType, Props = object> = PropsWithChildren<Props & AsPolyProp<C> & RefPolyProp<C>> & Omit<ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+export type UseBoxProps<E extends ElementType = 'div'> = PolymorphicComponentProps<E, CustomProps & StyleProps>;
+export declare const useBox: <E extends ElementType = "div">({ as: _as, className: _className, odComponent, testId, ...props }: UseBoxProps<E>) => {
     Component: ElementType;
-    componentProps: {
-        className: string;
-    } & (Omit<UseBoxProps<E>, "className" | "as" | "odComponent" | "testId"> extends infer T extends object ? { [K in keyof T]: Omit<UseBoxProps<E>, "className" | "as" | "odComponent" | "testId">[K]; } : never) & {
-        [key: string]: string;
-    };
+    componentProps: ComponentPropsWithRef<E>;
+    reactElement: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
     SemanticChild: ElementType | undefined;
 };
 //# sourceMappingURL=useBox.d.ts.map

package/dist/components/Box/useBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBox.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/useBox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,SAAS,EAAE,MAAM,MAAM,CAAC;AACpD,OAAO,KAAK,EACX,qBAAqB,EACrB,WAAW,EAEX,iBAAiB,EACjB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACX,SAAS,EACT,mBAAmB,EACnB,sBAAsB,EACtB,MAAM,4BAA4B,CAAC;AAUpC,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,WAAW,CACnD,SAAQ,iBAAiB;IAKzB,EAAE,CAAC,EAAE,CAAC,CAAC;IAIP,SAAS,CAAC,EAAE,SAAS,CAAC;IAItB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAGD,MAAM,MAAM,UAAU,GAAG,SAAS,GACjC,mBAAmB,GACnB,sBAAsB,CAAC;AAGxB,MAAM,MAAM,mBAAmB,CAC9B,CAAC,SAAS,WAAW,EACrB,KAAK,GAAG,MAAM,IACX,aAAa,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,GAAG,IAAI,GAAG,WAAW,CAAC,GAChE,KAAK,CAAC;AAGP,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,mBAAmB,CAC3E,CAAC,EACD,UAAU,CACV,CAAC;AAGF,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,IAAI,CACvD,qBAAqB,CAAC,CAAC,CAAC,EACxB,IAAI,CACJ,CAAC;AAcF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,kDAMnD,WAAW,CAAC,CAAC,CAAC;;;;;;;;CAoChB,CAAC"}
+{"version":3,"file":"useBox.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/useBox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,SAAS,EAAE,MAAM,MAAM,CAAC;AACpD,OAAO,EAEN,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EAEhB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACX,SAAS,EACT,mBAAmB,EACnB,sBAAsB,EACtB,MAAM,4BAA4B,CAAC;AAOpC,MAAM,MAAM,UAAU,GAAG,SAAS,GACjC,mBAAmB,GACnB,sBAAsB,CAAC;AAMxB,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IAIrD,SAAS,CAAC,EAAE,SAAS,CAAC;IAItB,WAAW,CAAC,EAAE,MAAM,CAAC;IAIrB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAC/C,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AAGjC,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,WAAW,IAAI;IAC/C,EAAE,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC;CACtB,CAAC;AAGF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI;IAChD,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CACxB,CAAC;AAGF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAO9E,MAAM,MAAM,yBAAyB,CACpC,CAAC,SAAS,WAAW,EACrB,KAAK,GAAG,MAAM,IACX,iBAAiB,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,GAC5D,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;AAG1D,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IACpD,yBAAyB,CAAC,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC,CAAC;AAkBxD,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,mEAMnD,WAAW,CAAC,CAAC,CAAC;;;;;CA2ChB,CAAC"}

package/dist/components/Box/useBox.js

@@ -5,6 +5,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 const _excluded = ["as", "className", "odComponent", "testId"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { isValidElement } from 'react';
 import { useDeepCompareMemo } from "../../hooks/index.js";
 import { dataAttrs } from "../../utils/dataAttrs.js";
 import { filterNonSprinklesProps } from "../../utils/sprinkles.js";
@@ -15,28 +16,32 @@ const LIST_TAGS = ['ul', 'ol'];
 const OD_COMPONENT_ATTR = 'od-component';
 export const useBox = _ref => {
   let {
-      as,
-      className,
+      as: _as,
+      className: _className,
       odComponent,
       testId
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  const isReactElement = typeof _as !== 'string' && isValidElement(_as);
+  const as = isReactElement ? undefined : _as !== null && _as !== void 0 ? _as : DEFAULT_TAG;
   const Component = as !== null && as !== void 0 ? as : DEFAULT_TAG;
   const isList = LIST_TAGS.includes(Component);
   const SemanticChild = isList ? LIST_ITEM_TAG : undefined;
-  const style = useDeepCompareMemo(() => boxStyles(_objectSpread({
+  const className = useDeepCompareMemo(() => boxStyles(_objectSpread({
     as,
-    className
-  }, props)), [className, props]);
+    className: _className
+  }, props)), [as, _className, props]);
   const remainingProps = useDeepCompareMemo(() => _objectSpread(_objectSpread({}, filterNonSprinklesProps(props)), dataAttrs({
     [OD_COMPONENT_ATTR]: odComponent === null || odComponent === void 0 ? void 0 : odComponent.toLocaleLowerCase(),
     testId
-  })), [props]);
+  })), [odComponent, props, testId]);
+  const componentProps = _objectSpread(_objectSpread({}, remainingProps), {}, {
+    className
+  });
   return {
     Component,
-    componentProps: _objectSpread({
-      className: style
-    }, remainingProps),
+    componentProps,
+    reactElement: isReactElement ? _as : undefined,
     SemanticChild
   };
 };

package/dist/components/BulletText/BulletText.d.ts

@@ -1,9 +1,9 @@
 import React, { type ElementType, type ReactNode } from 'react';
-import { type BoxBasedProps } from '../Box';
-export interface Props<E extends ElementType> extends BoxBasedProps<E> {
+import { type UseBoxProps } from '../Box';
+export interface Props {
     bullet?: ReactNode;
     variant?: 'primary' | 'secondary';
 }
-export declare const BulletText: <E extends ElementType>({ as, variant, children, bullet: Bullet, }: Props<E>) => React.JSX.Element;
+export declare const BulletText: <E extends ElementType>({ as, variant, children, bullet: Bullet, }: UseBoxProps<E> & Props) => React.JSX.Element;
 export default BulletText;
 //# sourceMappingURL=BulletText.d.ts.map

package/dist/components/BulletText/BulletText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BulletText.d.ts","sourceRoot":"","sources":["../../../lib/components/BulletText/BulletText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,WAAW,EAAkB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAE,KAAK,aAAa,EAAO,MAAM,QAAQ,CAAC;AAMjD,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC;IACrE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,EAAE,4CAK/C,KAAK,CAAC,CAAC,CAAC,sBAqCV,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"BulletText.d.ts","sourceRoot":"","sources":["../../../lib/components/BulletText/BulletText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEb,KAAK,WAAW,EAEhB,KAAK,SAAS,EACd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAO,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAM/C,MAAM,WAAW,KAAK;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,EAAE,4CAK/C,WAAW,CAAC,CAAC,CAAC,GAAG,KAAK,sBA2CxB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/BulletText/BulletText.js

@@ -15,9 +15,9 @@ export const BulletText = _ref => {
     bullet: Bullet = '•'
   } = _ref;
   return _jsxs(Inline, {
+    as: as,
     noWrap: true,
     space: "3",
-    as: as,
     alignX: "flex-start",
     alignY: "center",
     children: [isValidElement(Bullet) ? _jsx(Box, {

package/dist/components/BulletText/BulletText.stories.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { BulletText } from '.';
 declare const meta: {
     title: string;
-    component: <E extends React.ElementType>({ as, variant, children, bullet: Bullet, }: import("./BulletText").Props<E>) => React.JSX.Element;
+    component: <E extends React.ElementType>({ as, variant, children, bullet: Bullet, }: import("..").UseBoxProps<E> & import("./BulletText").Props) => React.JSX.Element;
     args: {
         as: "div";
         children: string;

package/dist/components/Columns/Column.css.d.ts

@@ -11,20 +11,6 @@ export declare const sprinklesColumnWidthResponsive: ((props: {
 };
 export type SprinklesColumnWidthResponsive = Parameters<typeof sprinklesColumnWidthResponsive>[0];
 export declare const columnStyle: import("@vanilla-extract/recipes").RuntimeFn<{
-    alignSelf: {
-        stretch: {
-            alignSelf: "stretch";
-        };
-        top: {
-            alignSelf: "flex-start";
-        };
-        center: {
-            alignSelf: "center";
-        };
-        bottom: {
-            alignSelf: "flex-end";
-        };
-    };
     grow: {
         true: {
             flexGrow: number;

package/dist/components/Columns/Column.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Column.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Column.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AA8BvE,eAAO,MAAM,8BAA8B;;;;;;;;;CAE1C,CAAC;AACF,MAAM,MAAM,8BAA8B,GAAG,UAAU,CACtD,OAAO,8BAA8B,CACrC,CAAC,CAAC,CAAC,CAAC;AAEL,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBtB,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAC7C,cAAc,CAAC,OAAO,WAAW,CAAC,CAClC,CAAC"}
+{"version":3,"file":"Column.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Column.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AA8BvE,eAAO,MAAM,8BAA8B;;;;;;;;;CAE1C,CAAC;AACF,MAAM,MAAM,8BAA8B,GAAG,UAAU,CACtD,OAAO,8BAA8B,CACrC,CAAC,CAAC,CAAC,CAAC;AAEL,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;EAgBtB,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAC7C,cAAc,CAAC,OAAO,WAAW,CAAC,CAClC,CAAC"}

package/dist/components/Columns/Column.css.js

@@ -32,20 +32,6 @@ export const sprinklesColumnWidthResponsive = createSprinkles(columnWidthRespons
 export const columnStyle = recipe({
   base: {},
   variants: {
-    alignSelf: {
-      stretch: {
-        alignSelf: 'stretch'
-      },
-      top: {
-        alignSelf: 'flex-start'
-      },
-      center: {
-        alignSelf: 'center'
-      },
-      bottom: {
-        alignSelf: 'flex-end'
-      }
-    },
     grow: {
       true: {
         flexGrow: 1

package/dist/components/Columns/Column.d.ts

@@ -1,13 +1,11 @@
-import React, { type ElementType, type Ref } from 'react';
-import { type BoxBasedProps, type StyleProps } from '../Box';
+import React, { type ElementType } from 'react';
+import { type UseBoxProps } from '../Box';
 import * as styles from './Column.css';
-export interface ColumnProps<E extends ElementType> extends BoxBasedProps<E>, styles.ColumnRecipeVariants {
-    order?: StyleProps['order'];
-    ref?: Ref<E>;
+export interface ColumnProps extends styles.ColumnRecipeVariants {
     width?: styles.SprinklesColumnWidthResponsive['flexBasis'];
 }
 export declare const Column: {
-    <E extends ElementType>({ alignSelf, children, grow, noShrink, order, ref, width, ...boxProps }: ColumnProps<E>): React.JSX.Element;
+    <E extends ElementType>({ children, grow, noShrink, order, ref, width, ...boxProps }: UseBoxProps<E> & ColumnProps): React.JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=Column.d.ts.map

package/dist/components/Columns/Column.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Column.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,WAAW,EAAE,KAAK,GAAG,EAAc,MAAM,OAAO,CAAC;AAEtE,OAAO,EAEN,KAAK,aAAa,EAClB,KAAK,UAAU,EAGf,MAAM,QAAQ,CAAC;AAEhB,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAGvC,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,WAAW,CACjD,SAAQ,aAAa,CAAC,CAAC,CAAC,EACvB,MAAM,CAAC,oBAAoB;IAC5B,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC,8BAA8B,CAAC,WAAW,CAAC,CAAC;CAC3D;AAQD,eAAO,MAAM,MAAM;KAAI,CAAC,SAAS,WAAW,2EASzC,WAAW,CAAC,CAAC,CAAC;;CAqChB,CAAC"}
+{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Column.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAgB,KAAK,WAAW,EAAc,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAEvD,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAGvC,MAAM,WAAW,WAAY,SAAQ,MAAM,CAAC,oBAAoB;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC,8BAA8B,CAAC,WAAW,CAAC,CAAC;CAC3D;AAQD,eAAO,MAAM,MAAM;KAAI,CAAC,SAAS,WAAW,gEAQzC,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW;;CA2C9B,CAAC"}

package/dist/components/Columns/Column.js

@@ -2,18 +2,17 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["alignSelf", "children", "grow", "noShrink", "order", "ref", "width"];
+const _excluded = ["children", "grow", "noShrink", "order", "ref", "width"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { invariant } from '@autoguru/utilities';
-import React, { useContext } from 'react';
+import React, { cloneElement, useContext } from 'react';
 import { Box, useBox } from "../Box/index.js";
 import * as styles from "./Column.css.js";
 import { ColumnContext } from "./Columns.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Column = _ref => {
   let {
-      alignSelf,
       children,
       grow = false,
       noShrink = false,
@@ -31,12 +30,19 @@ export const Column = _ref => {
   } = columnsContext;
   const {
     Component,
-    componentProps
+    componentProps,
+    reactElement
   } = useBox(_objectSpread(_objectSpread({}, boxProps), {}, {
     display: 'flex',
     height: 'full',
     width: 'full'
   }));
+  const ColumnContent = () => reactElement ? (cloneElement(reactElement, _objectSpread(_objectSpread({}, componentProps), {}, {
+    ref
+  }), children)) : _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
+    ref: ref,
+    children: children
+  }));
   return _jsx(Box, {
     as: isList ? 'li' : 'div',
     order: order,
@@ -45,14 +51,10 @@ export const Column = _ref => {
     className: [spaceXCls, spaceYCls, styles.sprinklesColumnWidthResponsive({
       flexBasis: width
     }), styles.columnStyle({
-      alignSelf,
       grow,
       noShrink
     })],
-    children: _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
-      ref: ref,
-      children: children
-    }))
+    children: _jsx(ColumnContent, {})
   });
 };
 Column.displayName = 'Column';

package/dist/components/Columns/Columns.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { SprinklesResponsive } from '../../styles/sprinkles.css';
 import { type UseBoxProps } from '../Box';
 import * as styles from './Columns.css';

package/dist/components/Columns/Columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Columns.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EACN,mBAAmB,EAEnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAElD,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAExC,KAAK,eAAe,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;AAEtD,MAAM,WAAW,YAAa,SAAQ,WAAW;IAIhD,KAAK,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAIrC,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAIvC,KAAK,CAAC,EAAE,eAAe,CAAC;IAIxB,MAAM,CAAC,EAAE,eAAe,CAAC;IAIzB,MAAM,CAAC,EAAE,eAAe,CAAC;IAIzB,iBAAiB,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC;CAC7D;AAED,UAAU,kBAAkB;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,0CAAiD,CAAC;AAgC5E,eAAO,MAAM,OAAO,kGAqEnB,CAAC;AAIF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Columns.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAMhF,OAAO,EACN,mBAAmB,EAEnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAElD,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAExC,KAAK,eAAe,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;AAEtD,MAAM,WAAW,YAAa,SAAQ,WAAW;IAIhD,KAAK,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAIrC,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAIvC,KAAK,CAAC,EAAE,eAAe,CAAC;IAIxB,MAAM,CAAC,EAAE,eAAe,CAAC;IAIzB,MAAM,CAAC,EAAE,eAAe,CAAC;IAIzB,iBAAiB,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC;CAC7D;AAED,UAAU,kBAAkB;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,0CAAiD,CAAC;AAgC5E,eAAO,MAAM,OAAO,kGA8EnB,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/dist/components/Columns/Columns.js

@@ -5,8 +5,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 const _excluded = ["as", "className", "children", "space", "spaceX", "spaceY", "noWrap", "wrappingDirection", "align"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import * as React from 'react';
-import { createContext, forwardRef, useMemo } from 'react';
+import React, { cloneElement, createContext, forwardRef, useMemo } from 'react';
 import { useNegativeMarginLeft, useNegativeMarginTop } from "../../hooks/useNegativeMargin/useNegativeMargin.js";
 import { sprinklesResponsive } from "../../styles/sprinkles.css.js";
 import { useBox } from "../Box/index.js";
@@ -32,7 +31,8 @@ export const Columns = forwardRef((_ref, ref) => {
   const marginTopFix = useNegativeMarginTop(resolvedSpaceY);
   const {
     Component,
-    componentProps
+    componentProps,
+    reactElement
   } = useBox(_objectSpread(_objectSpread({}, boxProps), {}, {
     as,
     className: [styles.columnsStyle({
@@ -42,18 +42,27 @@ export const Columns = forwardRef((_ref, ref) => {
     }), marginLeftFix, marginTopFix, className],
     odComponent: 'columns'
   }));
+  const contextValue = useMemo(() => ({
+    spaceXCls: sprinklesResponsive({
+      paddingLeft: resolvedSpaceX
+    }),
+    spaceYCls: sprinklesResponsive({
+      paddingTop: resolvedSpaceY
+    }),
+    isList: typeof as === 'string' && ['ul', 'ol'].includes(as)
+  }), [as, resolvedSpaceX, resolvedSpaceY]);
+  if (reactElement) {
+    return cloneElement(reactElement, _objectSpread(_objectSpread({}, componentProps), {}, {
+      ref
+    }), _jsx(ColumnContext.Provider, {
+      value: contextValue,
+      children: children
+    }));
+  }
   return _jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
     ref: ref,
     children: _jsx(ColumnContext.Provider, {
-      value: useMemo(() => ({
-        spaceXCls: sprinklesResponsive({
-          paddingLeft: resolvedSpaceX
-        }),
-        spaceYCls: sprinklesResponsive({
-          paddingTop: resolvedSpaceY
-        }),
-        isList: typeof as === 'string' && ['ul', 'ol'].includes(as)
-      }), [as, resolvedSpaceX, resolvedSpaceY]),
+      value: contextValue,
       children: children
     })
   }));

package/dist/components/Columns/Columns.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Columns.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,EAAU,OAAO,EAAoB,MAAM,GAAG,CAAC;AAEtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAwB9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,QAAQ,EAAE,KAyDtB,CAAC;AAOF,eAAO,MAAM,cAAc,EAAE,KAsE5B,CAAC"}
+{"version":3,"file":"Columns.stories.d.ts","sourceRoot":"","sources":["../../../lib/components/Columns/Columns.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,EAAU,OAAO,EAAE,MAAM,GAAG,CAAC;AAIpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAwB9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,QAAQ,EAAE,KAyDtB,CAAC;AAOF,eAAO,MAAM,cAAc,EAAE,KAsE5B,CAAC"}

package/dist/components/DropDown/DropDown.stories.d.ts

@@ -16,9 +16,9 @@ declare const meta: {
         id?: string | undefined | undefined;
         ref?: React.Ref<HTMLButtonElement> | undefined;
         className?: string | undefined | undefined;
+        testId?: string | undefined;
         lang?: Partial<Record<"loading", string>> | undefined;
         "aria-label"?: string | undefined | undefined;
-        testId?: string | undefined;
         type?: "submit" | "reset" | "button" | undefined | undefined;
         rounded?: boolean | undefined;
         minimal?: import("../Button/Button.css").ButtonMinimal | undefined;

package/dist/components/Heading/Heading.js

@@ -42,7 +42,7 @@ export const Heading = _ref => {
       breakWord
     }), className]
   }, dataAttrs({
-    'test-id': testId
+    testId
   })), {}, {
     children: children
   }));

package/dist/components/Inline/Inline.d.ts

@@ -1,16 +1,15 @@
 import React, { type ElementType, type ReactNode } from 'react';
 import type { SprinklesResponsive } from '../../styles/sprinkles.css';
+import { type UseBoxProps } from '../Box';
 export type InlineDivider = ReactNode | boolean;
-export interface InlineProps<E extends ElementType = 'div'> {
+export interface InlineProps {
     alignX?: SprinklesResponsive['justifyContent'];
     alignY?: SprinklesResponsive['alignItems'];
-    as?: E;
-    children: ReactNode;
     dividers?: InlineDivider;
     noWrap?: boolean;
     reverse?: boolean;
     space?: SprinklesResponsive['gap'];
     width?: SprinklesResponsive['width'];
 }
-export declare const Inline: <E extends ElementType = "div">({ alignX, alignY, children, dividers, noWrap, reverse, space, ...props }: InlineProps<E>) => React.JSX.Element;
+export declare const Inline: <E extends ElementType>({ alignX, alignY, children, dividers, noWrap, reverse, space, ...props }: UseBoxProps<E> & InlineProps) => React.JSX.Element;
 //# sourceMappingURL=Inline.d.ts.map

package/dist/components/Inline/Inline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../lib/components/Inline/Inline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGb,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAItE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;AAChD,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK;IAIzD,MAAM,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAK/C,MAAM,CAAC,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAK3C,EAAE,CAAC,EAAE,CAAC,CAAC;IAIP,QAAQ,EAAE,SAAS,CAAC;IAIpB,QAAQ,CAAC,EAAE,aAAa,CAAC;IAKzB,MAAM,CAAC,EAAE,OAAO,CAAC;IAIjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,KAAK,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAInC,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;CACrC;AAkCD,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,0EASnD,WAAW,CAAC,CAAC,CAAC,sBA4ChB,CAAC"}
+{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../lib/components/Inline/Inline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIb,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAGvD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;AAChD,MAAM,WAAW,WAAW;IAI3B,MAAM,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAK/C,MAAM,CAAC,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAI3C,QAAQ,CAAC,EAAE,aAAa,CAAC;IAKzB,MAAM,CAAC,EAAE,OAAO,CAAC;IAIjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,KAAK,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAInC,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;CACrC;AAkCD,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,EAAE,0EAS3C,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,sBAoD9B,CAAC"}