@seed-design/react 0.0.14 → 0.0.15

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) => {

package/lib/components/index.cjs

@@ -242,7 +242,9 @@ Object.defineProperty(exports, "useSnackbarContext", {
 });
 exports.useSnackbarAdapter = useSnackbarAdapter.useSnackbarAdapter;
 exports.Snackbar = Snackbar_namespace;
+exports.HStack = Stack.HStack;
 exports.Stack = Stack.Stack;
+exports.VStack = Stack.VStack;
 exports.SwitchControl = Switch.SwitchControl;
 exports.SwitchHiddenInput = Switch.SwitchHiddenInput;
 exports.SwitchLabel = Switch.SwitchLabel;

package/lib/components/index.js

@@ -74,7 +74,7 @@ export { useSnackbarContext } from '@seed-design/react-snackbar';
 export { useSnackbarAdapter } from './Snackbar/useSnackbarAdapter.js';
 import * as Snackbar_namespace from './Snackbar/Snackbar.namespace.js';
 export { Snackbar_namespace as Snackbar };
-export { Stack } from './Stack/Stack.js';
+export { HStack, Stack, VStack } from './Stack/Stack.js';
 export { SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb } from './Switch/Switch.js';
 import * as Switch_namespace from './Switch/Switch.namespace.js';
 export { Switch_namespace as Switch };

package/lib/index.cjs

@@ -242,7 +242,9 @@ Object.defineProperty(exports, "useSnackbarContext", {
 });
 exports.useSnackbarAdapter = useSnackbarAdapter.useSnackbarAdapter;
 exports.Snackbar = Snackbar_namespace;
+exports.HStack = Stack.HStack;
 exports.Stack = Stack.Stack;
+exports.VStack = Stack.VStack;
 exports.SwitchControl = Switch.SwitchControl;
 exports.SwitchHiddenInput = Switch.SwitchHiddenInput;
 exports.SwitchLabel = Switch.SwitchLabel;

package/lib/index.js

@@ -74,7 +74,7 @@ export { useSnackbarContext } from '@seed-design/react-snackbar';
 export { useSnackbarAdapter } from './components/Snackbar/useSnackbarAdapter.js';
 import * as Snackbar_namespace from './components/Snackbar/Snackbar.namespace.js';
 export { Snackbar_namespace as Snackbar };
-export { Stack } from './components/Stack/Stack.js';
+export { HStack, Stack, VStack } from './components/Stack/Stack.js';
 export { SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb } from './components/Switch/Switch.js';
 import * as Switch_namespace from './components/Switch/Switch.namespace.js';
 export { Switch_namespace as Switch };