@seed-design/react 0.0.13 → 0.0.15

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]);
@@ -27,10 +28,6 @@ const HelpBubblePositioner = withContext(
   Popover.Positioner,
   "positioner"
 );
-const HelpBubbleBackdrop = withContext(
-  withStateProps(Primitive.div),
-  "backdrop"
-);
 const HelpBubbleContent = withContext(
   withStyleProps(withStateProps(Primitive.div)),
   "content"
@@ -81,4 +78,4 @@ const HelpBubbleDescription = withContext(
   "description"
 );
 
-export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleBackdrop, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger };
+export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger };

package/lib/components/HelpBubble/HelpBubble.namespace.cjs

@@ -9,7 +9,6 @@ const HelpBubble = require('./HelpBubble.cjs');
 exports.Anchor = HelpBubble.HelpBubbleAnchor;
 exports.Arrow = HelpBubble.HelpBubbleArrow;
 exports.ArrowTip = HelpBubble.HelpBubbleArrowTip;
-exports.Backdrop = HelpBubble.HelpBubbleBackdrop;
 exports.CloseButton = HelpBubble.HelpBubbleCloseButton;
 exports.Content = HelpBubble.HelpBubbleContent;
 exports.Description = HelpBubble.HelpBubbleDescription;

package/lib/components/HelpBubble/HelpBubble.namespace.d.ts

@@ -1,2 +1,2 @@
-export { HelpBubbleAnchor as Anchor, HelpBubbleArrow as Arrow, HelpBubbleArrowTip as ArrowTip, HelpBubbleBackdrop as Backdrop, HelpBubbleCloseButton as CloseButton, HelpBubbleContent as Content, HelpBubbleDescription as Description, HelpBubblePositioner as Positioner, HelpBubbleRoot as Root, HelpBubbleTitle as Title, HelpBubbleTrigger as Trigger, type HelpBubbleArrowProps as ArrowProps, type HelpBubbleArrowTipProps as ArrowTipProps, type HelpBubbleBackdropProps as BackdropProps, type HelpBubbleCloseButtonProps as CloseButtonProps, type HelpBubbleContentProps as ContentProps, type HelpBubbleDescriptionProps as DescriptionProps, type HelpBubblePositionerProps as PositionerProps, type HelpBubbleRootProps as RootProps, type HelpBubbleTitleProps as TitleProps, type HelpBubbleTriggerProps as TriggerProps, } from './HelpBubble';
+export { HelpBubbleAnchor as Anchor, HelpBubbleArrow as Arrow, HelpBubbleArrowTip as ArrowTip, HelpBubbleCloseButton as CloseButton, HelpBubbleContent as Content, HelpBubbleDescription as Description, HelpBubblePositioner as Positioner, HelpBubbleRoot as Root, HelpBubbleTitle as Title, HelpBubbleTrigger as Trigger, type HelpBubbleArrowProps as ArrowProps, type HelpBubbleArrowTipProps as ArrowTipProps, type HelpBubbleCloseButtonProps as CloseButtonProps, type HelpBubbleContentProps as ContentProps, type HelpBubbleDescriptionProps as DescriptionProps, type HelpBubblePositionerProps as PositionerProps, type HelpBubbleRootProps as RootProps, type HelpBubbleTitleProps as TitleProps, type HelpBubbleTriggerProps as TriggerProps, } from './HelpBubble';
 //# sourceMappingURL=HelpBubble.namespace.d.ts.map

package/lib/components/HelpBubble/HelpBubble.namespace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelpBubble.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/HelpBubble.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,IAAI,MAAM,EAC1B,eAAe,IAAI,KAAK,EACxB,kBAAkB,IAAI,QAAQ,EAC9B,kBAAkB,IAAI,QAAQ,EAC9B,qBAAqB,IAAI,WAAW,EACpC,iBAAiB,IAAI,OAAO,EAC5B,qBAAqB,IAAI,WAAW,EACpC,oBAAoB,IAAI,UAAU,EAClC,cAAc,IAAI,IAAI,EACtB,eAAe,IAAI,KAAK,EACxB,iBAAiB,IAAI,OAAO,EAC5B,KAAK,oBAAoB,IAAI,UAAU,EACvC,KAAK,uBAAuB,IAAI,aAAa,EAC7C,KAAK,uBAAuB,IAAI,aAAa,EAC7C,KAAK,0BAA0B,IAAI,gBAAgB,EACnD,KAAK,sBAAsB,IAAI,YAAY,EAC3C,KAAK,0BAA0B,IAAI,gBAAgB,EACnD,KAAK,yBAAyB,IAAI,eAAe,EACjD,KAAK,mBAAmB,IAAI,SAAS,EACrC,KAAK,oBAAoB,IAAI,UAAU,EACvC,KAAK,sBAAsB,IAAI,YAAY,GAC5C,MAAM,cAAc,CAAC"}
+{"version":3,"file":"HelpBubble.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/HelpBubble.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,IAAI,MAAM,EAC1B,eAAe,IAAI,KAAK,EACxB,kBAAkB,IAAI,QAAQ,EAC9B,qBAAqB,IAAI,WAAW,EACpC,iBAAiB,IAAI,OAAO,EAC5B,qBAAqB,IAAI,WAAW,EACpC,oBAAoB,IAAI,UAAU,EAClC,cAAc,IAAI,IAAI,EACtB,eAAe,IAAI,KAAK,EACxB,iBAAiB,IAAI,OAAO,EAC5B,KAAK,oBAAoB,IAAI,UAAU,EACvC,KAAK,uBAAuB,IAAI,aAAa,EAC7C,KAAK,0BAA0B,IAAI,gBAAgB,EACnD,KAAK,sBAAsB,IAAI,YAAY,EAC3C,KAAK,0BAA0B,IAAI,gBAAgB,EACnD,KAAK,yBAAyB,IAAI,eAAe,EACjD,KAAK,mBAAmB,IAAI,SAAS,EACrC,KAAK,oBAAoB,IAAI,UAAU,EACvC,KAAK,sBAAsB,IAAI,YAAY,GAC5C,MAAM,cAAc,CAAC"}

package/lib/components/HelpBubble/HelpBubble.namespace.js

@@ -1 +1 @@
-export { HelpBubbleAnchor as Anchor, HelpBubbleArrow as Arrow, HelpBubbleArrowTip as ArrowTip, HelpBubbleBackdrop as Backdrop, HelpBubbleCloseButton as CloseButton, HelpBubbleContent as Content, HelpBubbleDescription as Description, HelpBubblePositioner as Positioner, HelpBubbleRoot as Root, HelpBubbleTitle as Title, HelpBubbleTrigger as Trigger } from './HelpBubble.js';
+export { HelpBubbleAnchor as Anchor, HelpBubbleArrow as Arrow, HelpBubbleArrowTip as ArrowTip, HelpBubbleCloseButton as CloseButton, HelpBubbleContent as Content, HelpBubbleDescription as Description, HelpBubblePositioner as Positioner, HelpBubbleRoot as Root, HelpBubbleTitle as Title, HelpBubbleTrigger as Trigger } from './HelpBubble.js';

package/lib/components/HelpBubble/index.cjs

@@ -10,7 +10,6 @@ const HelpBubble_namespace = require('./HelpBubble.namespace.cjs');
 exports.HelpBubbleAnchor = HelpBubble.HelpBubbleAnchor;
 exports.HelpBubbleArrow = HelpBubble.HelpBubbleArrow;
 exports.HelpBubbleArrowTip = HelpBubble.HelpBubbleArrowTip;
-exports.HelpBubbleBackdrop = HelpBubble.HelpBubbleBackdrop;
 exports.HelpBubbleCloseButton = HelpBubble.HelpBubbleCloseButton;
 exports.HelpBubbleContent = HelpBubble.HelpBubbleContent;
 exports.HelpBubbleDescription = HelpBubble.HelpBubbleDescription;

package/lib/components/HelpBubble/index.d.ts

@@ -1,3 +1,3 @@
-export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleBackdrop, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger, type HelpBubbleAnchorProps, type HelpBubbleArrowProps, type HelpBubbleArrowTipProps, type HelpBubbleBackdropProps, type HelpBubbleCloseButtonProps, type HelpBubbleContentProps, type HelpBubbleDescriptionProps, type HelpBubblePositionerProps, type HelpBubbleRootProps, type HelpBubbleTitleProps, type HelpBubbleTriggerProps, } from './HelpBubble';
+export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger, type HelpBubbleAnchorProps, type HelpBubbleArrowProps, type HelpBubbleArrowTipProps, type HelpBubbleCloseButtonProps, type HelpBubbleContentProps, type HelpBubbleDescriptionProps, type HelpBubblePositionerProps, type HelpBubbleRootProps, type HelpBubbleTitleProps, type HelpBubbleTriggerProps, } from './HelpBubble';
 export * as HelpBubble from './HelpBubble.namespace';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/HelpBubble/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,uBAAuB,EAC5B,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAC/B,KAAK,sBAAsB,EAC3B,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,GAC5B,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,UAAU,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAC/B,KAAK,sBAAsB,EAC3B,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,GAC5B,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,UAAU,MAAM,wBAAwB,CAAC"}

package/lib/components/HelpBubble/index.js

@@ -1,3 +1,3 @@
-export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleBackdrop, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger } from './HelpBubble.js';
+export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger } from './HelpBubble.js';
 import * as HelpBubble_namespace from './HelpBubble.namespace.js';
 export { HelpBubble_namespace as HelpBubble };

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
     }
   );

package/lib/components/InlineBanner/InlineBanner.cjs

@@ -6,6 +6,7 @@ const inlineBanner = require('@seed-design/css/recipes/inline-banner');
 const reactPrimitive = require('@seed-design/react-primitive');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const useDismissible = require('../private/useDismissible.cjs');
+require('@seed-design/css/recipes/inline-banner.css');
 
 const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(inlineBanner.inlineBanner);
 const InlineBannerRoot = withProvider(

package/lib/components/InlineBanner/InlineBanner.js

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

package/lib/components/LinkContent/LinkContent.cjs

@@ -6,6 +6,7 @@ const linkContent = require('@seed-design/css/recipes/link-content');
 const reactPrimitive = require('@seed-design/react-primitive');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const styled = require('../../utils/styled.cjs');
+require('@seed-design/css/recipes/link-content.css');
 
 const { withContext } = createRecipeContext.createRecipeContext(linkContent.linkContent);
 const LinkContent = withContext(

package/lib/components/LinkContent/LinkContent.js

@@ -2,6 +2,7 @@ import { linkContent } from '@seed-design/css/recipes/link-content';
 import { Primitive } from '@seed-design/react-primitive';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { withStyleProps } from '../../utils/styled.js';
+import '@seed-design/css/recipes/link-content.css';
 
 const { withContext } = createRecipeContext(linkContent);
 const LinkContent = withContext(

package/lib/components/MannerTemp/MannerTemp.cjs

@@ -8,6 +8,7 @@ const reactPrimitive = require('@seed-design/react-primitive');
 const React = require('react');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const MannerTempEmote = require('./MannerTempEmote.cjs');
+require('@seed-design/css/recipes/manner-temp.css');
 
 const { withContext } = createRecipeContext.createRecipeContext(mannerTemp.mannerTemp);
 const MannerTempBase = withContext(reactPrimitive.Primitive.span);

package/lib/components/MannerTemp/MannerTemp.js

@@ -4,6 +4,7 @@ import { Primitive } from '@seed-design/react-primitive';
 import { forwardRef, useMemo } from 'react';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { MannerTempEmotePropsProvider } from './MannerTempEmote.js';
+import '@seed-design/css/recipes/manner-temp.css';
 
 const { withContext } = createRecipeContext(mannerTemp);
 const MannerTempBase = withContext(Primitive.span);

package/lib/components/MannerTempBadge/MannerTempBadge.cjs

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

package/lib/components/MannerTempBadge/MannerTempBadge.js

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

package/lib/components/NotificationBadge/NotificationBadge.cjs

@@ -9,6 +9,8 @@ const reactPrimitive = require('@seed-design/react-primitive');
 const clsx = require('clsx');
 const React = require('react');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
+require('@seed-design/css/recipes/notification-badge.css');
+require('@seed-design/css/recipes/notification-badge-positioner.css');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/lib/components/NotificationBadge/NotificationBadge.js

@@ -6,6 +6,8 @@ import clsx from 'clsx';
 import * as React from 'react';
 import { useMemo } from 'react';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
+import '@seed-design/css/recipes/notification-badge.css';
+import '@seed-design/css/recipes/notification-badge-positioner.css';
 
 const { withContext, PropsProvider } = createRecipeContext(notificationBadge);
 const NotificationBadge = withContext(

package/lib/components/ProgressCircle/ProgressCircle.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const reactProgress = require('@seed-design/react-progress');
 const progressCircle = require('@seed-design/css/recipes/progress-circle');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
+require('@seed-design/css/recipes/progress-circle.css');
 
 const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(progressCircle.progressCircle);
 const ProgressCircleRoot = withProvider(

package/lib/components/ProgressCircle/ProgressCircle.js

@@ -1,6 +1,7 @@
 import { ProgressCircle } from '@seed-design/react-progress';
 import { progressCircle } from '@seed-design/css/recipes/progress-circle';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
+import '@seed-design/css/recipes/progress-circle.css';
 
 const { withContext, withProvider } = createSlotRecipeContext(progressCircle);
 const ProgressCircleRoot = withProvider(

package/lib/components/PullToRefresh/PullToRefresh.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const reactPullToRefresh = require('@seed-design/react-pull-to-refresh');
 const pullToRefresh = require('@seed-design/css/recipes/pull-to-refresh');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
+require('@seed-design/css/recipes/pull-to-refresh.css');
 
 const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(pullToRefresh.pullToRefresh);
 const PullToRefreshRoot = withProvider(

package/lib/components/PullToRefresh/PullToRefresh.js

@@ -1,6 +1,7 @@
 import { PullToRefresh } from '@seed-design/react-pull-to-refresh';
 import { pullToRefresh } from '@seed-design/css/recipes/pull-to-refresh';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
+import '@seed-design/css/recipes/pull-to-refresh.css';
 
 const { withContext, withProvider } = createSlotRecipeContext(pullToRefresh);
 const PullToRefreshRoot = withProvider(

package/lib/components/ReactionButton/ReactionButton.cjs

@@ -8,6 +8,7 @@ const reactToggle = require('@seed-design/react-toggle');
 const clsx = require('clsx');
 const React = require('react');
 const usePendingButton = require('../LoadingIndicator/usePendingButton.cjs');
+require('@seed-design/css/recipes/reaction-button.css');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/lib/components/ReactionButton/ReactionButton.js

@@ -4,6 +4,7 @@ import { Toggle } from '@seed-design/react-toggle';
 import clsx from 'clsx';
 import * as React from 'react';
 import { usePendingButton, PendingButtonProvider } from '../LoadingIndicator/usePendingButton.js';
+import '@seed-design/css/recipes/reaction-button.css';
 
 const ReactionButton = React.forwardRef(
   ({ size = "small", loading = false, className, ...otherProps }, ref) => {

package/lib/components/SegmentedControl/SegmentedControl.cjs

@@ -6,6 +6,7 @@ const segmentedControl = require('@seed-design/css/recipes/segmented-control');
 const reactPrimitive = require('@seed-design/react-primitive');
 const reactSegmentedControl = require('@seed-design/react-segmented-control');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
+require('@seed-design/css/recipes/segmented-control.css');
 
 const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(segmentedControl.segmentedControl);
 const SegmentedControlRoot = withProvider(

package/lib/components/SegmentedControl/SegmentedControl.js

@@ -2,6 +2,7 @@ import { segmentedControl } from '@seed-design/css/recipes/segmented-control';
 import { Primitive } from '@seed-design/react-primitive';
 import { SegmentedControl } from '@seed-design/react-segmented-control';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
+import '@seed-design/css/recipes/segmented-control.css';
 
 const { withProvider, withContext } = createSlotRecipeContext(segmentedControl);
 const SegmentedControlRoot = withProvider(

package/lib/components/SelectBox/CheckSelectBox.cjs

@@ -12,6 +12,8 @@ const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 const Icon = require('../private/Icon.cjs');
+require('@seed-design/css/recipes/select-box.css');
+require('@seed-design/css/recipes/select-box-group.css');
 
 const { withContext: withGroupContext } = createRecipeContext.createRecipeContext(selectBoxGroup.selectBoxGroup);
 const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(selectBox.selectBox);

package/lib/components/SelectBox/CheckSelectBox.d.ts

@@ -6,7 +6,7 @@ export interface CheckSelectBoxGroupProps extends PrimitiveProps, React.HTMLAttr
 }
 /**
  * CheckSelectBoxGroup is a simple div wrapper for future extensibility.
- * It does not have spacing by default, nesting <Stack> under it is recommended.
+ * It does not have spacing by default, nesting <VStack> under it is recommended.
  */
 export declare const CheckSelectBoxGroup: ForwardRefExoticComponent<CheckSelectBoxGroupProps & RefAttributes<HTMLDivElement>>;
 export interface CheckSelectBoxRootProps extends CheckboxPrimitive.RootProps {

package/lib/components/SelectBox/CheckSelectBox.js

@@ -8,6 +8,8 @@ import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 import { InternalIcon } from '../private/Icon.js';
+import '@seed-design/css/recipes/select-box.css';
+import '@seed-design/css/recipes/select-box-group.css';
 
 const { withContext: withGroupContext } = createRecipeContext(selectBoxGroup);
 const { withContext, withProvider } = createSlotRecipeContext(selectBox);

package/lib/components/SelectBox/RadioSelectBox.cjs

@@ -10,6 +10,8 @@ const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 const Icon = require('../private/Icon.cjs');
+require('@seed-design/css/recipes/select-box.css');
+require('@seed-design/css/recipes/select-box-group.css');
 
 const { withContext: withGroupContext } = createRecipeContext.createRecipeContext(selectBoxGroup.selectBoxGroup);
 const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(selectBox.selectBox);

package/lib/components/SelectBox/RadioSelectBox.js

@@ -6,6 +6,8 @@ import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 import { InternalIcon } from '../private/Icon.js';
+import '@seed-design/css/recipes/select-box.css';
+import '@seed-design/css/recipes/select-box-group.css';
 
 const { withContext: withGroupContext } = createRecipeContext(selectBoxGroup);
 const { withContext, withProvider } = createSlotRecipeContext(selectBox);

package/lib/components/Skeleton/Skeleton.cjs

@@ -6,6 +6,7 @@ const reactPrimitive = require('@seed-design/react-primitive');
 const skeleton = require('@seed-design/css/recipes/skeleton');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const styled = require('../../utils/styled.cjs');
+require('@seed-design/css/recipes/skeleton.css');
 
 const { withContext } = createRecipeContext.createRecipeContext(skeleton.skeleton);
 const Skeleton = withContext(styled.withStyleProps(reactPrimitive.Primitive.div));

package/lib/components/Skeleton/Skeleton.js

@@ -2,6 +2,7 @@ import { Primitive } from '@seed-design/react-primitive';
 import { skeleton } from '@seed-design/css/recipes/skeleton';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { withStyleProps } from '../../utils/styled.js';
+import '@seed-design/css/recipes/skeleton.css';
 
 const { withContext } = createRecipeContext(skeleton);
 const Skeleton = withContext(withStyleProps(Primitive.div));

package/lib/components/Snackbar/Snackbar.cjs

@@ -12,6 +12,8 @@ const React = require('react');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const Icon = require('../private/Icon.cjs');
+require('@seed-design/css/recipes/snackbar.css');
+require('@seed-design/css/recipes/snackbar-region.css');
 
 const { withContext: withRegionContext } = createRecipeContext.createRecipeContext(snackbarRegion.snackbarRegion);
 const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(snackbar.snackbar);

package/lib/components/Snackbar/Snackbar.js

@@ -8,6 +8,8 @@ import { forwardRef } from 'react';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { InternalIcon } from '../private/Icon.js';
+import '@seed-design/css/recipes/snackbar.css';
+import '@seed-design/css/recipes/snackbar-region.css';
 
 const { withContext: withRegionContext } = createRecipeContext(snackbarRegion);
 const { withProvider, withContext } = createSlotRecipeContext(snackbar);

package/lib/components/Stack/Stack.cjs

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const Box = require('../Box/Box.cjs');
+const Flex = require('../Flex/Flex.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -26,7 +26,15 @@ function _interopNamespaceDefault(e) {
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const Stack = React__namespace.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { ref, display: "flex", flexDirection: "column", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(Flex.Flex, { ref, display: "flex", flexDirection: "column", ...props });
+});
+const VStack = React__namespace.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Flex.Flex, { ref, display: "flex", flexDirection: "column", ...props });
+});
+const HStack = React__namespace.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Flex.Flex, { ref, display: "flex", flexDirection: "row", ...props });
 });
 
+exports.HStack = HStack;
 exports.Stack = Stack;
+exports.VStack = VStack;

package/lib/components/Stack/Stack.d.ts

@@ -1,6 +1,18 @@
-import { BoxProps } from '../Box/Box';
+import { FlexProps } from '../Flex';
 import * as React from "react";
-export interface StackProps extends Omit<BoxProps, "display" | "direction"> {
+/**
+ * @deprecated Use `VStack` instead.
+ */
+export interface StackProps extends Omit<FlexProps, "flexDirection"> {
 }
+/**
+ * @deprecated Use `VStack` instead.
+ */
 export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
+export interface VStackProps extends Omit<FlexProps, "flexDirection"> {
+}
+export declare const VStack: React.ForwardRefExoticComponent<VStackProps & React.RefAttributes<HTMLDivElement>>;
+export interface HStackProps extends Omit<FlexProps, "flexDirection"> {
+}
+export declare const HStack: React.ForwardRefExoticComponent<HStackProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Stack.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,WAAW,CAAC;CAAG;AAE9E,eAAO,MAAM,KAAK,mFAEhB,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,SAAS,EAAE,eAAe,CAAC;CAAG;AAEvE;;GAEG;AACH,eAAO,MAAM,KAAK,mFAEhB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,SAAS,EAAE,eAAe,CAAC;CAAG;AAExE,eAAO,MAAM,MAAM,oFAEjB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,SAAS,EAAE,eAAe,CAAC;CAAG;AAExE,eAAO,MAAM,MAAM,oFAEjB,CAAC"}

package/lib/components/Stack/Stack.js

@@ -1,9 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Box } from '../Box/Box.js';
+import { Flex } from '../Flex/Flex.js';
 
 const Stack = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(Box, { ref, display: "flex", flexDirection: "column", ...props });
+  return /* @__PURE__ */ jsx(Flex, { ref, display: "flex", flexDirection: "column", ...props });
+});
+const VStack = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Flex, { ref, display: "flex", flexDirection: "column", ...props });
+});
+const HStack = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Flex, { ref, display: "flex", flexDirection: "row", ...props });
 });
 
-export { Stack };
+export { HStack, Stack, VStack };

package/lib/components/Stack/index.cjs

@@ -6,4 +6,6 @@ const Stack = require('./Stack.cjs');
 
 
 
+exports.HStack = Stack.HStack;
 exports.Stack = Stack.Stack;
+exports.VStack = Stack.VStack;

package/lib/components/Stack/index.d.ts

@@ -1,2 +1,2 @@
-export { Stack, type StackProps } from './Stack';
+export { Stack, VStack, HStack, type StackProps, type VStackProps, type HStackProps, } from './Stack';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Stack/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,WAAW,GACjB,MAAM,SAAS,CAAC"}

package/lib/components/Stack/index.js

@@ -1 +1 @@
-export { Stack } from './Stack.js';
+export { HStack, Stack, VStack } from './Stack.js';

package/lib/components/Switch/Switch.cjs

@@ -7,6 +7,7 @@ const _switch = require('@seed-design/css/recipes/switch');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const reactPrimitive = require('@seed-design/react-primitive');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
+require('@seed-design/css/recipes/switch.css');
 
 const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(_switch.switchStyle);
 const withStateProps = createWithStateProps.createWithStateProps([reactSwitch.useSwitchContext]);

package/lib/components/Switch/Switch.js

@@ -3,6 +3,7 @@ import { switchStyle } from '@seed-design/css/recipes/switch';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { Primitive } from '@seed-design/react-primitive';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
+import '@seed-design/css/recipes/switch.css';
 
 const { withProvider, withContext } = createSlotRecipeContext(switchStyle);
 const withStateProps = createWithStateProps([useSwitchContext]);

package/lib/components/Tabs/Tabs.cjs

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

package/lib/components/Tabs/Tabs.js

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

package/lib/components/Text/Text.cjs

@@ -7,6 +7,7 @@ const text = require('@seed-design/css/recipes/text');
 const vars = require('@seed-design/css/vars');
 const clsx = require('clsx');
 const React = require('react');
+require('@seed-design/css/recipes/text.css');
 
 function handleColor(color) {
   if (!color) {

package/lib/components/Text/Text.js

@@ -3,6 +3,7 @@ import { text } from '@seed-design/css/recipes/text';
 import { vars } from '@seed-design/css/vars';
 import clsx from 'clsx';
 import { useMemo } from 'react';
+import '@seed-design/css/recipes/text.css';
 
 function handleColor(color) {
   if (!color) {

package/lib/components/TextField/TextField.cjs

@@ -13,6 +13,7 @@ const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 const Icon = require('../private/Icon.cjs');
 const reactComposeRefs = require('@radix-ui/react-compose-refs');
+require('@seed-design/css/recipes/text-field.css');
 
 const { withProvider, withContext, useClassNames } = createSlotRecipeContext.createSlotRecipeContext(textField.textField);
 const withStateProps = createWithStateProps.createWithStateProps([reactTextField.useTextFieldContext]);

package/lib/components/TextField/TextField.js

@@ -9,6 +9,7 @@ import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js'
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 import { InternalIcon } from '../private/Icon.js';
 import { composeRefs } from '@radix-ui/react-compose-refs';
+import '@seed-design/css/recipes/text-field.css';
 
 const { withProvider, withContext, useClassNames } = createSlotRecipeContext(textField);
 const withStateProps = createWithStateProps([useTextFieldContext]);

package/lib/components/ToggleButton/ToggleButton.cjs

@@ -8,6 +8,7 @@ const reactToggle = require('@seed-design/react-toggle');
 const clsx = require('clsx');
 const React = require('react');
 const usePendingButton = require('../LoadingIndicator/usePendingButton.cjs');
+require('@seed-design/css/recipes/toggle-button.css');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/lib/components/ToggleButton/ToggleButton.js

@@ -4,6 +4,7 @@ import { Toggle } from '@seed-design/react-toggle';
 import clsx from 'clsx';
 import * as React from 'react';
 import { usePendingButton, PendingButtonProvider } from '../LoadingIndicator/usePendingButton.js';
+import '@seed-design/css/recipes/toggle-button.css';
 
 const ToggleButton = React.forwardRef(
   ({ variant = "brandSolid", size = "small", loading = false, className, ...otherProps }, ref) => {