@seed-design/react 0.0.14 → 0.0.15

package/lib/components/ActionButton/ActionButton.cjs

@@ -9,6 +9,8 @@ const clsx = require('clsx');
 const React = require('react');
 const Icon = require('../Icon/Icon.cjs');
 const usePendingButton = require('../LoadingIndicator/usePendingButton.cjs');
+const styled = require('../../utils/styled.cjs');
+require('@seed-design/css/recipes/action-button.css');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -33,6 +35,7 @@ const ActionButton = React__namespace.forwardRef(
   ({ variant, size, loading = false, layout = "withText", className, children, ...otherProps }, ref) => {
     const recipeClassName = actionButton.actionButton({ variant, layout, size });
     const api = usePendingButton.usePendingButton({ loading, disabled: otherProps.disabled });
+    const { style, restProps } = styled.useStyleProps(otherProps);
     if (layout === "iconOnly" && !(otherProps["aria-label"] || otherProps["aria-labelledby"])) {
       console.warn(
         "When layout is 'iconOnly', 'aria-label' or 'aria-labelledby' should be provided."
@@ -43,8 +46,9 @@ const ActionButton = React__namespace.forwardRef(
       {
         ref,
         className: clsx(recipeClassName, className),
+        style,
         ...api.stateProps,
-        ...otherProps,
+        ...restProps,
         children
       }
     ) }) });

package/lib/components/ActionButton/ActionButton.d.ts

@@ -1,8 +1,9 @@
 import { ActionButtonVariantProps } from '@seed-design/css/recipes/action-button';
 import { PrimitiveProps } from '@seed-design/react-primitive';
 import { UsePendingButtonProps } from '../LoadingIndicator/usePendingButton';
+import { StyleProps } from '../../utils/styled';
 import * as React from "react";
-export interface ActionButtonProps extends ActionButtonVariantProps, UsePendingButtonProps, PrimitiveProps, React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ActionButtonProps extends ActionButtonVariantProps, UsePendingButtonProps, PrimitiveProps, Pick<StyleProps, "flexGrow">, React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 export declare const ActionButton: React.ForwardRefExoticComponent<ActionButtonProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=ActionButton.d.ts.map

package/lib/components/ActionButton/ActionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButton/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,qBAAqB,EACrB,cAAc,EACd,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,YAAY,6FA6BxB,CAAC"}
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButton/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEpE,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,qBAAqB,EACrB,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,EAC5B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,YAAY,6FA+BxB,CAAC"}

package/lib/components/ActionButton/ActionButton.js

@@ -5,11 +5,14 @@ import clsx from 'clsx';
 import * as React from 'react';
 import { IconRequired } from '../Icon/Icon.js';
 import { usePendingButton, PendingButtonProvider } from '../LoadingIndicator/usePendingButton.js';
+import { useStyleProps } from '../../utils/styled.js';
+import '@seed-design/css/recipes/action-button.css';
 
 const ActionButton = React.forwardRef(
   ({ variant, size, loading = false, layout = "withText", className, children, ...otherProps }, ref) => {
     const recipeClassName = actionButton({ variant, layout, size });
     const api = usePendingButton({ loading, disabled: otherProps.disabled });
+    const { style, restProps } = useStyleProps(otherProps);
     if (layout === "iconOnly" && !(otherProps["aria-label"] || otherProps["aria-labelledby"])) {
       console.warn(
         "When layout is 'iconOnly', 'aria-label' or 'aria-labelledby' should be provided."
@@ -20,8 +23,9 @@ const ActionButton = React.forwardRef(
       {
         ref,
         className: clsx(recipeClassName, className),
+        style,
         ...api.stateProps,
-        ...otherProps,
+        ...restProps,
         children
       }
     ) }) });

package/lib/components/ActionChip/ActionChip.cjs

@@ -6,6 +6,7 @@ const actionChip = require('@seed-design/css/recipes/action-chip');
 const reactPrimitive = require('@seed-design/react-primitive');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const Icon = require('../Icon/Icon.cjs');
+require('@seed-design/css/recipes/action-chip.css');
 
 const { withContext } = createRecipeContext.createRecipeContext(actionChip.actionChip);
 const ActionChip = Icon.withIconRequired(

package/lib/components/ActionChip/ActionChip.js

@@ -2,6 +2,7 @@ import { actionChip } from '@seed-design/css/recipes/action-chip';
 import { Primitive } from '@seed-design/react-primitive';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { withIconRequired } from '../Icon/Icon.js';
+import '@seed-design/css/recipes/action-chip.css';
 
 const { withContext } = createRecipeContext(actionChip);
 const ActionChip = withIconRequired(

package/lib/components/ActionSheet/ActionSheet.cjs

@@ -9,6 +9,8 @@ const reactPrimitive = require('@seed-design/react-primitive');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
+require('@seed-design/css/recipes/action-sheet.css');
+require('@seed-design/css/recipes/action-sheet-item.css');
 
 const { withRootProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(actionSheet.actionSheet);
 const { withContext: withItemContext } = createRecipeContext.createRecipeContext(actionSheetItem.actionSheetItem);

package/lib/components/ActionSheet/ActionSheet.js

@@ -5,6 +5,8 @@ import { Primitive } from '@seed-design/react-primitive';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
+import '@seed-design/css/recipes/action-sheet.css';
+import '@seed-design/css/recipes/action-sheet-item.css';
 
 const { withRootProvider, withContext } = createSlotRecipeContext(actionSheet);
 const { withContext: withItemContext } = createRecipeContext(actionSheetItem);

package/lib/components/Avatar/Avatar.cjs

@@ -10,6 +10,8 @@ const avatarStack = require('@seed-design/css/recipes/avatar-stack');
 const clsx = require('clsx');
 const React = require('react');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
+require('@seed-design/css/recipes/avatar.css');
+require('@seed-design/css/recipes/avatar-stack.css');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/lib/components/Avatar/Avatar.js

@@ -7,6 +7,8 @@ import clsx from 'clsx';
 import * as React from 'react';
 import { useMemo } from 'react';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
+import '@seed-design/css/recipes/avatar.css';
+import '@seed-design/css/recipes/avatar-stack.css';
 
 const { PropsProvider, withProvider, withContext } = createSlotRecipeContext(avatar);
 const AvatarRoot = withProvider(

package/lib/components/Badge/Badge.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const reactPrimitive = require('@seed-design/react-primitive');
 const badge = require('@seed-design/css/recipes/badge');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
+require('@seed-design/css/recipes/badge.css');
 
 const { withContext } = createRecipeContext.createRecipeContext(badge.badge);
 const Badge = withContext(reactPrimitive.Primitive.span);

package/lib/components/Badge/Badge.js

@@ -1,6 +1,7 @@
 import { Primitive } from '@seed-design/react-primitive';
 import { badge } from '@seed-design/css/recipes/badge';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
+import '@seed-design/css/recipes/badge.css';
 
 const { withContext } = createRecipeContext(badge);
 const Badge = withContext(Primitive.span);

package/lib/components/BottomSheet/BottomSheet.cjs

@@ -8,6 +8,7 @@ const bottomSheet = require('@seed-design/css/recipes/bottom-sheet');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 const styled = require('../../utils/styled.cjs');
+require('@seed-design/css/recipes/bottom-sheet.css');
 
 const { withRootProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(bottomSheet.bottomSheet);
 const withStateProps = createWithStateProps.createWithStateProps([reactDialog.useDialogContext]);

package/lib/components/BottomSheet/BottomSheet.js

@@ -4,6 +4,7 @@ import { bottomSheet } from '@seed-design/css/recipes/bottom-sheet';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 import { withStyleProps } from '../../utils/styled.js';
+import '@seed-design/css/recipes/bottom-sheet.css';
 
 const { withRootProvider, withContext } = createSlotRecipeContext(bottomSheet);
 const withStateProps = createWithStateProps([useDialogContext]);

package/lib/components/Callout/Callout.cjs

@@ -6,6 +6,7 @@ const reactPrimitive = require('@seed-design/react-primitive');
 const callout = require('@seed-design/css/recipes/callout');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const useDismissible = require('../private/useDismissible.cjs');
+require('@seed-design/css/recipes/callout.css');
 
 const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(callout.callout);
 const CalloutRoot = withProvider(useDismissible.DismissibleRoot, "root");

package/lib/components/Callout/Callout.js

@@ -2,6 +2,7 @@ import { Primitive } from '@seed-design/react-primitive';
 import { callout } from '@seed-design/css/recipes/callout';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { DismissibleCloseButton, DismissibleRoot } from '../private/useDismissible.js';
+import '@seed-design/css/recipes/callout.css';
 
 const { withContext, withProvider } = createSlotRecipeContext(callout);
 const CalloutRoot = withProvider(DismissibleRoot, "root");

package/lib/components/Checkbox/Checkbox.cjs

@@ -11,6 +11,7 @@ const React = require('react');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 const Icon = require('../private/Icon.cjs');
+require('@seed-design/css/recipes/checkbox.css');
 
 const { withProvider, withContext, useClassNames } = createSlotRecipeContext.createSlotRecipeContext(checkbox.checkbox);
 const withStateProps = createWithStateProps.createWithStateProps([reactCheckbox.useCheckboxContext]);

package/lib/components/Checkbox/Checkbox.js

@@ -7,6 +7,7 @@ import { forwardRef } from 'react';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 import { InternalIcon } from '../private/Icon.js';
+import '@seed-design/css/recipes/checkbox.css';
 
 const { withProvider, withContext, useClassNames } = createSlotRecipeContext(checkbox);
 const withStateProps = createWithStateProps([useCheckboxContext]);

package/lib/components/ChipTabs/ChipTabs.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const chipTabs = require('@seed-design/css/recipes/chip-tabs');
 const reactTabs = require('@seed-design/react-tabs');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
+require('@seed-design/css/recipes/chip-tabs.css');
 
 const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(chipTabs.chipTabs);
 const ChipTabsRoot = withProvider(

package/lib/components/ChipTabs/ChipTabs.js

@@ -1,6 +1,7 @@
 import { chipTabs } from '@seed-design/css/recipes/chip-tabs';
 import { Tabs } from '@seed-design/react-tabs';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
+import '@seed-design/css/recipes/chip-tabs.css';
 
 const { withProvider, withContext } = createSlotRecipeContext(chipTabs);
 const ChipTabsRoot = withProvider(

package/lib/components/Columns/Columns.cjs

@@ -33,7 +33,7 @@ const Columns = React__namespace.forwardRef((props, ref) => {
       display: "flex",
       flexDirection: "row",
       flexWrap: "nowrap",
-      justifyContent: "flexStart",
+      justifyContent: "flex-start",
       ...props
     }
   );

package/lib/components/Columns/Columns.d.ts

@@ -1,10 +1,22 @@
 import { BoxProps } from '../Box/Box';
 import * as React from "react";
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export interface ColumnsProps extends Omit<BoxProps, "display" | "direction"> {
 }
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export declare const Columns: React.ForwardRefExoticComponent<ColumnsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export interface ColumnProps extends Omit<BoxProps, "display" | "flexDirection" | "width"> {
     width?: BoxProps["width"] | "content";
 }
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export declare const Column: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Columns.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Columns.d.ts","sourceRoot":"","sources":["../../../src/components/Columns/Columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,WAAW,CAAC;CAAG;AAEhF,eAAO,MAAM,OAAO,qFAWlB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,eAAe,GAAG,OAAO,CAAC;IACxF,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;CACvC;AAGD,eAAO,MAAM,MAAM,oFAcjB,CAAC"}
+{"version":3,"file":"Columns.d.ts","sourceRoot":"","sources":["../../../src/components/Columns/Columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,WAAW,CAAC;CAAG;AAEhF;;GAEG;AACH,eAAO,MAAM,OAAO,qFAWlB,CAAC;AAEH;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,eAAe,GAAG,OAAO,CAAC;IACxF,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;CACvC;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,oFAcjB,CAAC"}

package/lib/components/Columns/Columns.js

@@ -10,7 +10,7 @@ const Columns = React.forwardRef((props, ref) => {
       display: "flex",
       flexDirection: "row",
       flexWrap: "nowrap",
-      justifyContent: "flexStart",
+      justifyContent: "flex-start",
       ...props
     }
   );

package/lib/components/ControlChip/ControlChip.cjs

@@ -6,6 +6,7 @@ const controlChip = require('@seed-design/css/recipes/control-chip');
 const reactPrimitive = require('@seed-design/react-primitive');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const Icon = require('../Icon/Icon.cjs');
+require('@seed-design/css/recipes/control-chip.css');
 
 const { withContext } = createRecipeContext.createRecipeContext(controlChip.controlChip);
 const ControlChip = Icon.withIconRequired(

package/lib/components/ControlChip/ControlChip.js

@@ -2,6 +2,7 @@ import { controlChip } from '@seed-design/css/recipes/control-chip';
 import { Primitive } from '@seed-design/react-primitive';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { withIconRequired } from '../Icon/Icon.js';
+import '@seed-design/css/recipes/control-chip.css';
 
 const { withContext } = createRecipeContext(controlChip);
 const ControlChip = withIconRequired(

package/lib/components/Dialog/Dialog.cjs

@@ -9,6 +9,7 @@ const dialog = require('@seed-design/css/recipes/dialog');
 const React = require('react');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
+require('@seed-design/css/recipes/dialog.css');
 
 const { withRootProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(dialog.dialog);
 const withStateProps = createWithStateProps.createWithStateProps([reactDialog.useDialogContext]);

package/lib/components/Dialog/Dialog.js

@@ -5,6 +5,7 @@ import { dialog } from '@seed-design/css/recipes/dialog';
 import { forwardRef } from 'react';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
+import '@seed-design/css/recipes/dialog.css';
 
 const { withRootProvider, withContext } = createSlotRecipeContext(dialog);
 const withStateProps = createWithStateProps([useDialogContext]);

package/lib/components/Divider/Divider.cjs

@@ -26,15 +26,16 @@ function _interopNamespaceDefault(e) {
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const Divider = React__namespace.forwardRef((props, ref) => {
-  const { as = "hr", borderColor = "stroke.neutral", borderWidth = 1, ...rest } = props;
+  const { as = "hr", color = "stroke.neutral", thickness = 1, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box.Box,
     {
       ref,
       as,
       display: "block",
-      borderColor,
-      borderWidth,
+      borderColor: color,
+      borderWidth: 0,
+      borderBottomWidth: thickness,
       ...rest
     }
   );

package/lib/components/Divider/Divider.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps } from '../Box/Box';
 import * as React from "react";
-export interface DividerProps extends Omit<BoxProps, "display"> {
+export interface DividerProps {
     /**
      * @default "hr"
      */
@@ -8,11 +8,11 @@ export interface DividerProps extends Omit<BoxProps, "display"> {
     /**
      * @default "stroke.neutral"
      */
-    borderColor?: BoxProps["borderColor"];
+    color?: BoxProps["borderColor"];
     /**
      * @default 1
      */
-    borderWidth?: BoxProps["borderWidth"];
+    thickness?: BoxProps["borderBottomWidth"];
 }
 export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLHRElement>>;
 //# sourceMappingURL=Divider.d.ts.map

package/lib/components/Divider/Divider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7D;;OAEG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEtC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;CACvC;AAED,eAAO,MAAM,OAAO,oFAalB,CAAC"}
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,OAAO,oFAclB,CAAC"}

package/lib/components/Divider/Divider.js

@@ -3,15 +3,16 @@ import * as React from 'react';
 import { Box } from '../Box/Box.js';
 
 const Divider = React.forwardRef((props, ref) => {
-  const { as = "hr", borderColor = "stroke.neutral", borderWidth = 1, ...rest } = props;
+  const { as = "hr", color = "stroke.neutral", thickness = 1, ...rest } = props;
   return /* @__PURE__ */ jsx(
     Box,
     {
       ref,
       as,
       display: "block",
-      borderColor,
-      borderWidth,
+      borderColor: color,
+      borderWidth: 0,
+      borderBottomWidth: thickness,
       ...rest
     }
   );

package/lib/components/ExtendedActionSheet/ExtendedActionSheet.cjs

@@ -9,6 +9,8 @@ const extendedActionSheetItem = require('@seed-design/css/recipes/extended-actio
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
+require('@seed-design/css/recipes/extended-action-sheet.css');
+require('@seed-design/css/recipes/extended-action-sheet-item.css');
 
 const { withRootProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(extendedActionSheet.extendedActionSheet);
 const { withContext: withItemContext } = createRecipeContext.createRecipeContext(extendedActionSheetItem.extendedActionSheetItem);

package/lib/components/ExtendedActionSheet/ExtendedActionSheet.js

@@ -5,6 +5,8 @@ import { extendedActionSheetItem } from '@seed-design/css/recipes/extended-actio
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
+import '@seed-design/css/recipes/extended-action-sheet.css';
+import '@seed-design/css/recipes/extended-action-sheet-item.css';
 
 const { withRootProvider, withContext } = createSlotRecipeContext(extendedActionSheet);
 const { withContext: withItemContext } = createRecipeContext(extendedActionSheetItem);

package/lib/components/ExtendedFab/ExtendedFab.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const reactPrimitive = require('@seed-design/react-primitive');
 const extendedFab = require('@seed-design/css/recipes/extended-fab');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
+require('@seed-design/css/recipes/extended-fab.css');
 
 const { withContext } = createRecipeContext.createRecipeContext(extendedFab.extendedFab);
 const ExtendedFab = withContext(reactPrimitive.Primitive.button, {

package/lib/components/ExtendedFab/ExtendedFab.js

@@ -1,6 +1,7 @@
 import { Primitive } from '@seed-design/react-primitive';
 import { extendedFab } from '@seed-design/css/recipes/extended-fab';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
+import '@seed-design/css/recipes/extended-fab.css';
 
 const { withContext } = createRecipeContext(extendedFab);
 const ExtendedFab = withContext(Primitive.button, {

package/lib/components/Fab/Fab.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const reactPrimitive = require('@seed-design/react-primitive');
 const fab = require('@seed-design/css/recipes/fab');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
+require('@seed-design/css/recipes/fab.css');
 
 const { withContext } = createRecipeContext.createRecipeContext(fab.fab);
 const Fab = withContext(reactPrimitive.Primitive.button);

package/lib/components/Fab/Fab.js

@@ -1,6 +1,7 @@
 import { Primitive } from '@seed-design/react-primitive';
 import { fab } from '@seed-design/css/recipes/fab';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
+import '@seed-design/css/recipes/fab.css';
 
 const { withContext } = createRecipeContext(fab);
 const Fab = withContext(Primitive.button);

package/lib/components/Flex/Flex.cjs

@@ -26,8 +26,21 @@ function _interopNamespaceDefault(e) {
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const Flex = React__namespace.forwardRef((props, ref) => {
-  const { direction, wrap, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { ref, display: "flex", flexDirection: direction, flexWrap: wrap, ...rest });
+  const { direction, wrap, align, justify, grow, shrink, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box.Box,
+    {
+      ref,
+      display: "flex",
+      flexDirection: direction,
+      flexWrap: wrap === true ? "wrap" : wrap,
+      alignItems: align,
+      justifyContent: justify,
+      flexGrow: grow === true ? 1 : grow,
+      flexShrink: shrink,
+      ...rest
+    }
+  );
 });
 
 exports.Flex = Flex;

package/lib/components/Flex/Flex.d.ts

@@ -5,8 +5,32 @@ export interface FlexProps extends Omit<BoxProps, "display"> {
      * @default "flex"
      */
     display?: "flex" | "none";
-    direction?: "row" | "column" | "rowReverse" | "columnReverse";
-    wrap?: "wrap" | "nowrap";
+    /**
+     * Shorthand for `flexDirection`.
+     */
+    direction?: BoxProps["flexDirection"];
+    /**
+     * Shorthand for `flexWrap`.
+     * If true, flex-wrap will be set to `wrap`.
+     */
+    wrap?: BoxProps["flexWrap"] | true;
+    /**
+     * Shorthand for `alignItems`.
+     */
+    align?: BoxProps["alignItems"];
+    /**
+     * Shorthand for `justifyContent`.
+     */
+    justify?: BoxProps["justifyContent"];
+    /**
+     * Shorthand for `flexGrow`.
+     * If true, flex-grow will be set to `1`.
+     */
+    grow?: BoxProps["flexGrow"] | true;
+    /**
+     * Shorthand for `flexShrink`.
+     */
+    shrink?: BoxProps["flexShrink"];
 }
 export declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Flex.d.ts.map

package/lib/components/Flex/Flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC1D;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,YAAY,GAAG,eAAe,CAAC;IAE9D,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CAC1B;AAED,eAAO,MAAM,IAAI,kFAIf,CAAC"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC1D;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC;IAEtC;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;IAEnC;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;IAE/B;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAErC;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;IAEnC;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;CACjC;AAED,eAAO,MAAM,IAAI,kFAgBf,CAAC"}

package/lib/components/Flex/Flex.js

@@ -3,8 +3,21 @@ import * as React from 'react';
 import { Box } from '../Box/Box.js';
 
 const Flex = React.forwardRef((props, ref) => {
-  const { direction, wrap, ...rest } = props;
-  return /* @__PURE__ */ jsx(Box, { ref, display: "flex", flexDirection: direction, flexWrap: wrap, ...rest });
+  const { direction, wrap, align, justify, grow, shrink, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      display: "flex",
+      flexDirection: direction,
+      flexWrap: wrap === true ? "wrap" : wrap,
+      alignItems: align,
+      justifyContent: justify,
+      flexGrow: grow === true ? 1 : grow,
+      flexShrink: shrink,
+      ...rest
+    }
+  );
 });
 
 export { Flex };

package/lib/components/HelpBubble/HelpBubble.cjs

@@ -10,6 +10,7 @@ const React = require('react');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 const styled = require('../../utils/styled.cjs');
+require('@seed-design/css/recipes/help-bubble.css');
 
 const { withRootProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(helpBubble.helpBubble);
 const withStateProps = createWithStateProps.createWithStateProps([reactPopover.usePopoverContext]);

package/lib/components/HelpBubble/HelpBubble.js

@@ -6,6 +6,7 @@ import { forwardRef } from 'react';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 import { withStyleProps } from '../../utils/styled.js';
+import '@seed-design/css/recipes/help-bubble.css';
 
 const { withRootProvider, withContext } = createSlotRecipeContext(helpBubble);
 const withStateProps = createWithStateProps([usePopoverContext]);

package/lib/components/IdentityPlaceholder/IdentityPlaceholder.cjs

@@ -8,6 +8,7 @@ const domUtils = require('@seed-design/dom-utils');
 const reactPrimitive = require('@seed-design/react-primitive');
 const React = require('react');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
+require('@seed-design/css/recipes/identity-placeholder.css');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/lib/components/IdentityPlaceholder/IdentityPlaceholder.js

@@ -4,6 +4,7 @@ import { mergeProps } from '@seed-design/dom-utils';
 import { Primitive } from '@seed-design/react-primitive';
 import * as React from 'react';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
+import '@seed-design/css/recipes/identity-placeholder.css';
 
 const { useClassNames, withProvider } = createSlotRecipeContext(identityPlaceholder);
 const IdentityPlaceholderRoot = withProvider(

package/lib/components/Inline/Inline.cjs

@@ -33,8 +33,8 @@ const Inline = React__namespace.forwardRef((props, ref) => {
       display: "flex",
       flexDirection: "row",
       flexWrap: "wrap",
-      alignItems: "flexStart",
-      justifyContent: "flexStart",
+      alignItems: "flex-start",
+      justifyContent: "flex-start",
       ...props
     }
   );

package/lib/components/Inline/Inline.d.ts

@@ -1,6 +1,12 @@
 import { BoxProps } from '../Box/Box';
 import * as React from "react";
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export interface InlineProps extends Omit<BoxProps, "display" | "direction" | "flexWrap"> {
 }
+/**
+ * @deprecated Use `HStack` instead.
+ */
 export declare const Inline: React.ForwardRefExoticComponent<InlineProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Inline.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../src/components/Inline/Inline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CAAG;AAE5F,eAAO,MAAM,MAAM,oFAYjB,CAAC"}
+{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../src/components/Inline/Inline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CAAG;AAE5F;;GAEG;AACH,eAAO,MAAM,MAAM,oFAYjB,CAAC"}

package/lib/components/Inline/Inline.js

@@ -10,8 +10,8 @@ const Inline = React.forwardRef((props, ref) => {
       display: "flex",
       flexDirection: "row",
       flexWrap: "wrap",
-      alignItems: "flexStart",
-      justifyContent: "flexStart",
+      alignItems: "flex-start",
+      justifyContent: "flex-start",
       ...props
     }
   );