@seed-design/react 0.0.4 → 0.0.5

package/lib/components/Fab/Fab.js

@@ -1,8 +1,8 @@
 import { Primitive } from '@seed-design/react-primitive';
 import { fab } from '@seed-design/css/recipes/fab';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
 
-const { withProvider } = createStyleContext(fab);
-const Fab = withProvider(Primitive.button, "root");
+const { withProvider } = createRecipeContext(fab);
+const Fab = withProvider(Primitive.button);
 
 export { Fab };

package/lib/components/HelpBubble/HelpBubble.cjs

@@ -7,16 +7,17 @@ const reactPopover = require('@seed-design/react-popover');
 const reactPrimitive = require('@seed-design/react-primitive');
 const helpBubble = require('@seed-design/css/recipes/help-bubble');
 const React = require('react');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 const styled = require('../../utils/styled.cjs');
 
-const { withRootProvider, withContext } = createStyleContext.createStyleContext(helpBubble.helpBubble);
+const { withRootProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(helpBubble.helpBubble);
 const withStateProps = createWithStateProps.createWithStateProps([reactPopover.usePopoverContext]);
 const HelpBubbleRoot = withRootProvider(reactPopover.Popover.Root, {
   defaultProps: {
     placement: "top",
     gutter: 4,
+    // TODO: get value from rootage spec
     overflowPadding: 16,
     arrowPadding: 14,
     flip: true,
@@ -44,7 +45,11 @@ const HelpBubbleArrow = withContext(
 );
 const HelpBubbleArrowTip = React.forwardRef(
   (props, ref) => {
-    const { tipRadius = 1, ...otherProps } = props;
+    const {
+      tipRadius = 2,
+      // TODO: get value from rootage spec
+      ...otherProps
+    } = props;
     const api = reactPopover.usePopoverContext();
     const width = api.rects.arrow?.width || 0;
     const height = api.rects.arrow?.height || 0;

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

@@ -1 +1 @@
-{"version":3,"file":"HelpBubble.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/HelpBubble.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAqB,MAAM,4BAA4B,CAAC;AAC5F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAI/F,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOrE,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB,EAAE,gBAAgB,CAAC,SAAS;CAAG;AAElG,eAAO,MAAM,cAAc,gEAUzB,CAAC;AAIH,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB,CAAC,WAAW;CAAG;AAE9E,eAAO,MAAM,gBAAgB,yHAA0B,CAAC;AAIxD,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB,CAAC,YAAY;CAAG;AAEhF,eAAO,MAAM,iBAAiB,6HAA2B,CAAC;AAI1D,MAAM,WAAW,yBAA0B,SAAQ,gBAAgB,CAAC,eAAe;CAAG;AAEtF,eAAO,MAAM,oBAAoB,sHAGhC,CAAC;AAIF,MAAM,WAAW,uBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,kBAAkB,oHAG9B,CAAC;AAIF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,EAC5B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,mHAG7B,CAAC;AAIF,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB,CAAC,UAAU;CAAG;AAE5E,eAAO,MAAM,eAAe,iHAG3B,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;IAC5E;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB,gIA0B9B,CAAC;AAIF,MAAM,WAAW,0BAA2B,SAAQ,gBAAgB,CAAC,gBAAgB;CAAG;AAExF,eAAO,MAAM,qBAAqB,0HAGjC,CAAC;AAIF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,kHAG3B,CAAC;AAIF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC"}
+{"version":3,"file":"HelpBubble.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/HelpBubble.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAqB,MAAM,4BAA4B,CAAC;AAC5F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAI/F,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOrE,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB,EAAE,gBAAgB,CAAC,SAAS;CAAG;AAElG,eAAO,MAAM,cAAc,gEAUzB,CAAC;AAIH,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB,CAAC,WAAW;CAAG;AAE9E,eAAO,MAAM,gBAAgB,yHAA0B,CAAC;AAIxD,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB,CAAC,YAAY;CAAG;AAEhF,eAAO,MAAM,iBAAiB,6HAA2B,CAAC;AAI1D,MAAM,WAAW,yBAA0B,SAAQ,gBAAgB,CAAC,eAAe;CAAG;AAEtF,eAAO,MAAM,oBAAoB,sHAGhC,CAAC;AAIF,MAAM,WAAW,uBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,kBAAkB,oHAG9B,CAAC;AAIF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,EAC5B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,mHAG7B,CAAC;AAIF,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB,CAAC,UAAU;CAAG;AAE5E,eAAO,MAAM,eAAe,iHAG3B,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;IAC5E;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB,gIA6B9B,CAAC;AAIF,MAAM,WAAW,0BAA2B,SAAQ,gBAAgB,CAAC,gBAAgB;CAAG;AAExF,eAAO,MAAM,qBAAqB,0HAGjC,CAAC;AAIF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,kHAG3B,CAAC;AAIF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC"}

package/lib/components/HelpBubble/HelpBubble.js

@@ -3,16 +3,17 @@ import { Popover, usePopoverContext } from '@seed-design/react-popover';
 import { Primitive } from '@seed-design/react-primitive';
 import { helpBubble } from '@seed-design/css/recipes/help-bubble';
 import { forwardRef } from 'react';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 import { withStyleProps } from '../../utils/styled.js';
 
-const { withRootProvider, withContext } = createStyleContext(helpBubble);
+const { withRootProvider, withContext } = createSlotRecipeContext(helpBubble);
 const withStateProps = createWithStateProps([usePopoverContext]);
 const HelpBubbleRoot = withRootProvider(Popover.Root, {
   defaultProps: {
     placement: "top",
     gutter: 4,
+    // TODO: get value from rootage spec
     overflowPadding: 16,
     arrowPadding: 14,
     flip: true,
@@ -40,7 +41,11 @@ const HelpBubbleArrow = withContext(
 );
 const HelpBubbleArrowTip = forwardRef(
   (props, ref) => {
-    const { tipRadius = 1, ...otherProps } = props;
+    const {
+      tipRadius = 2,
+      // TODO: get value from rootage spec
+      ...otherProps
+    } = props;
     const api = usePopoverContext();
     const width = api.rects.arrow?.width || 0;
     const height = api.rects.arrow?.height || 0;

package/lib/components/IdentityPlaceholder/IdentityPlaceholder.cjs

@@ -7,7 +7,7 @@ const identityPlaceholder = require('@seed-design/css/recipes/identity-placehold
 const domUtils = require('@seed-design/dom-utils');
 const reactPrimitive = require('@seed-design/react-primitive');
 const React = require('react');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -28,7 +28,7 @@ function _interopNamespaceDefault(e) {
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const { useClassNames, withProvider } = createStyleContext.createStyleContext(identityPlaceholder.identityPlaceholder);
+const { useClassNames, withProvider } = createSlotRecipeContext.createSlotRecipeContext(identityPlaceholder.identityPlaceholder);
 const IdentityPlaceholderRoot = withProvider(
   reactPrimitive.Primitive.div,
   "root"

package/lib/components/IdentityPlaceholder/IdentityPlaceholder.js

@@ -3,9 +3,9 @@ import { identityPlaceholder } from '@seed-design/css/recipes/identity-placehold
 import { mergeProps } from '@seed-design/dom-utils';
 import { Primitive } from '@seed-design/react-primitive';
 import * as React from 'react';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 
-const { useClassNames, withProvider } = createStyleContext(identityPlaceholder);
+const { useClassNames, withProvider } = createSlotRecipeContext(identityPlaceholder);
 const IdentityPlaceholderRoot = withProvider(
   Primitive.div,
   "root"

package/lib/components/InlineBanner/InlineBanner.cjs

@@ -4,10 +4,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const inlineBanner = require('@seed-design/css/recipes/inline-banner');
 const reactPrimitive = require('@seed-design/react-primitive');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const useDismissible = require('../private/useDismissible.cjs');
 
-const { withContext, withProvider } = createStyleContext.createStyleContext(inlineBanner.inlineBanner);
+const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(inlineBanner.inlineBanner);
 const InlineBannerRoot = withProvider(
   useDismissible.DismissibleRoot,
   "root"

package/lib/components/InlineBanner/InlineBanner.js

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

package/lib/components/LinkContent/LinkContent.cjs

@@ -4,13 +4,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const linkContent = require('@seed-design/css/recipes/link-content');
 const reactPrimitive = require('@seed-design/react-primitive');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const styled = require('../../utils/styled.cjs');
 
-const { withProvider } = createStyleContext.createStyleContext(linkContent.linkContent);
+const { withProvider } = createRecipeContext.createRecipeContext(linkContent.linkContent);
 const LinkContent = withProvider(
-  styled.withStyleProps(reactPrimitive.Primitive.span),
-  "root"
+  styled.withStyleProps(reactPrimitive.Primitive.span)
 );
 
 exports.LinkContent = LinkContent;

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

@@ -1 +1 @@
-{"version":3,"file":"LinkContent.d.ts","sourceRoot":"","sources":["../../../src/components/LinkContent/LinkContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAClG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAG9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIrE,MAAM,WAAW,gBACf,SAAQ,uBAAuB,EAC7B,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,EACzB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;CAAG;AAE3D,eAAO,MAAM,WAAW,4FAGvB,CAAC"}
+{"version":3,"file":"LinkContent.d.ts","sourceRoot":"","sources":["../../../src/components/LinkContent/LinkContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAClG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIrE,MAAM,WAAW,gBACf,SAAQ,uBAAuB,EAC7B,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,EACzB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;CAAG;AAE3D,eAAO,MAAM,WAAW,4FAEvB,CAAC"}

package/lib/components/LinkContent/LinkContent.js

@@ -1,12 +1,11 @@
 import { linkContent } from '@seed-design/css/recipes/link-content';
 import { Primitive } from '@seed-design/react-primitive';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { withStyleProps } from '../../utils/styled.js';
 
-const { withProvider } = createStyleContext(linkContent);
+const { withProvider } = createRecipeContext(linkContent);
 const LinkContent = withProvider(
-  withStyleProps(Primitive.span),
-  "root"
+  withStyleProps(Primitive.span)
 );
 
 export { LinkContent };

package/lib/components/MannerTempBadge/MannerTempBadge.cjs

@@ -2,14 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const reactPrimitive = require('@seed-design/react-primitive');
 const mannerTempBadge = require('@seed-design/css/recipes/manner-temp-badge');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const reactPrimitive = require('@seed-design/react-primitive');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 
-const { withProvider } = createStyleContext.createStyleContext(mannerTempBadge.mannerTempBadge);
-const MannerTempBadge = withProvider(
-  reactPrimitive.Primitive.span,
-  "root"
-);
+const { withProvider } = createRecipeContext.createRecipeContext(mannerTempBadge.mannerTempBadge);
+const MannerTempBadge = withProvider(reactPrimitive.Primitive.span);
 
 exports.MannerTempBadge = MannerTempBadge;

package/lib/components/MannerTempBadge/MannerTempBadge.d.ts

@@ -1,5 +1,5 @@
-import { PrimitiveProps } from '@seed-design/react-primitive';
 import { MannerTempBadgeVariantProps } from '@seed-design/css/recipes/manner-temp-badge';
+import { PrimitiveProps } from '@seed-design/react-primitive';
 import type * as React from "react";
 export interface MannerTempBadgeProps extends MannerTempBadgeVariantProps, PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"MannerTempBadge.d.ts","sourceRoot":"","sources":["../../../src/components/MannerTempBadge/MannerTempBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAEL,KAAK,2BAA2B,EACjC,MAAM,4CAA4C,CAAC;AACpD,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAOpC,MAAM,WAAW,oBACf,SAAQ,2BAA2B,EACjC,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,8FAG3B,CAAC"}
+{"version":3,"file":"MannerTempBadge.d.ts","sourceRoot":"","sources":["../../../src/components/MannerTempBadge/MannerTempBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,2BAA2B,EACjC,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAOpC,MAAM,WAAW,oBACf,SAAQ,2BAA2B,EACjC,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,8FAAsE,CAAC"}

package/lib/components/MannerTempBadge/MannerTempBadge.js

@@ -1,11 +1,8 @@
-import { Primitive } from '@seed-design/react-primitive';
 import { mannerTempBadge } from '@seed-design/css/recipes/manner-temp-badge';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { Primitive } from '@seed-design/react-primitive';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
 
-const { withProvider } = createStyleContext(mannerTempBadge);
-const MannerTempBadge = withProvider(
-  Primitive.span,
-  "root"
-);
+const { withProvider } = createRecipeContext(mannerTempBadge);
+const MannerTempBadge = withProvider(Primitive.span);
 
 export { MannerTempBadge };

package/lib/components/ProgressCircle/ProgressCircle.cjs

@@ -4,9 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const reactProgress = require('@seed-design/react-progress');
 const progressCircle = require('@seed-design/css/recipes/progress-circle');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 
-const { withContext, withProvider } = createStyleContext.createStyleContext(progressCircle.progressCircle);
+const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(progressCircle.progressCircle);
 const ProgressCircleRoot = withProvider(
   reactProgress.ProgressCircle.Root,
   "root"

package/lib/components/ProgressCircle/ProgressCircle.js

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

package/lib/components/PullToRefresh/PullToRefresh.cjs

@@ -4,9 +4,9 @@ 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 createStyleContext = require('../../utils/createStyleContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 
-const { withContext, withProvider } = createStyleContext.createStyleContext(pullToRefresh.pullToRefresh);
+const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(pullToRefresh.pullToRefresh);
 const PullToRefreshRoot = withProvider(
   reactPullToRefresh.PullToRefresh.Root,
   "root"

package/lib/components/PullToRefresh/PullToRefresh.js

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

package/lib/components/ReactionButton/ReactionButton.cjs

@@ -7,7 +7,7 @@ const reactionButton = require('@seed-design/css/recipes/reaction-button');
 const reactToggle = require('@seed-design/react-toggle');
 const clsx = require('clsx');
 const React = require('react');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const usePendingButton = require('../LoadingIndicator/usePendingButton.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -29,16 +29,16 @@ function _interopNamespaceDefault(e) {
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const { ClassNamesProvider } = createStyleContext.createStyleContext(reactionButton.reactionButton);
+const { ClassNameProvider } = createRecipeContext.createRecipeContext(reactionButton.reactionButton);
 const ReactionButton = React__namespace.forwardRef(
   ({ size = "small", loading = false, className, ...otherProps }, ref) => {
-    const classNames = reactionButton.reactionButton({ size });
+    const recipeClassName = reactionButton.reactionButton({ size });
     const api = usePendingButton.usePendingButton({ loading, disabled: otherProps.disabled });
-    return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(usePendingButton.PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ClassNameProvider, { value: recipeClassName, children: /* @__PURE__ */ jsxRuntime.jsx(usePendingButton.PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
       reactToggle.Toggle.Root,
       {
         ref,
-        className: clsx(classNames.root, className),
+        className: clsx(recipeClassName, className),
         ...api.stateProps,
         ...otherProps
       }

package/lib/components/ReactionButton/ReactionButton.js

@@ -3,19 +3,19 @@ import { reactionButton } from '@seed-design/css/recipes/reaction-button';
 import { Toggle } from '@seed-design/react-toggle';
 import clsx from 'clsx';
 import * as React from 'react';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { usePendingButton, PendingButtonProvider } from '../LoadingIndicator/usePendingButton.js';
 
-const { ClassNamesProvider } = createStyleContext(reactionButton);
+const { ClassNameProvider } = createRecipeContext(reactionButton);
 const ReactionButton = React.forwardRef(
   ({ size = "small", loading = false, className, ...otherProps }, ref) => {
-    const classNames = reactionButton({ size });
+    const recipeClassName = reactionButton({ size });
     const api = usePendingButton({ loading, disabled: otherProps.disabled });
-    return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(ClassNameProvider, { value: recipeClassName, children: /* @__PURE__ */ jsx(PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsx(
       Toggle.Root,
       {
         ref,
-        className: clsx(classNames.root, className),
+        className: clsx(recipeClassName, className),
         ...api.stateProps,
         ...otherProps
       }

package/lib/components/SegmentedControl/SegmentedControl.cjs

@@ -5,9 +5,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 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 createStyleContext = require('../../utils/createStyleContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 
-const { withProvider, withContext } = createStyleContext.createStyleContext(segmentedControl.segmentedControl);
+const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(segmentedControl.segmentedControl);
 const SegmentedControlRoot = withProvider(
   reactSegmentedControl.SegmentedControl.Root,
   "root"

package/lib/components/SegmentedControl/SegmentedControl.js

@@ -1,9 +1,9 @@
 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 { createStyleContext } from '../../utils/createStyleContext.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 
-const { withProvider, withContext } = createStyleContext(segmentedControl);
+const { withProvider, withContext } = createSlotRecipeContext(segmentedControl);
 const SegmentedControlRoot = withProvider(
   SegmentedControl.Root,
   "root"

package/lib/components/SelectBox/CheckSelectBox.cjs

@@ -3,21 +3,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const reactCheckbox = require('@seed-design/react-checkbox');
-const reactPrimitive = require('@seed-design/react-primitive');
 const selectBox = require('@seed-design/css/recipes/select-box');
 const selectBoxGroup = require('@seed-design/css/recipes/select-box-group');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const reactCheckbox = require('@seed-design/react-checkbox');
+const reactPrimitive = require('@seed-design/react-primitive');
+const React = require('react');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 const Icon = require('../private/Icon.cjs');
-const React = require('react');
 
-const { withProvider: withGroupProvider } = createStyleContext.createStyleContext(selectBoxGroup.selectBoxGroup);
-const { withProvider, withContext } = createStyleContext.createStyleContext(selectBox.selectBox);
+const { withProvider: withGroupProvider } = createRecipeContext.createRecipeContext(selectBoxGroup.selectBoxGroup);
+const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(selectBox.selectBox);
 const withStateProps = createWithStateProps.createWithStateProps([reactCheckbox.useCheckboxContext]);
 const CheckSelectBoxGroup = withGroupProvider(
-  React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref, role: "group", ...props })),
-  "root"
+  React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref, role: "group", ...props }))
 );
 const CheckSelectBoxRoot = withProvider(
   reactCheckbox.Checkbox.Root,

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

@@ -1 +1 @@
-{"version":3,"file":"CheckSelectBox.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/CheckSelectBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAsB,MAAM,6BAA6B,CAAC;AAChG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAK9E,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAOvE,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C;;;GAGG;AACH,eAAO,MAAM,mBAAmB,qHAK/B,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB,CAAC,SAAS;CAAG;AAE/E,eAAO,MAAM,kBAAkB,sHAG9B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,sHAG/B,CAAC;AAEF,MAAM,WAAW,8BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,yBAAyB,4HAGU,CAAC;AAEjD,MAAM,WAAW,0BAA2B,SAAQ,iBAAiB,CAAC,YAAY;CAAG;AAErF,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,mHAG9B,CAAC;AAEF,MAAM,WAAW,8BAA+B,SAAQ,iBAAiB,CAAC,gBAAgB;CAAG;AAE7F,eAAO,MAAM,yBAAyB,iIAAgC,CAAC"}
+{"version":3,"file":"CheckSelectBox.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/CheckSelectBox.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAsB,MAAM,6BAA6B,CAAC;AAChG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAK9E,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAMvE,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C;;;GAGG;AACH,eAAO,MAAM,mBAAmB,qHAI/B,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB,CAAC,SAAS;CAAG;AAE/E,eAAO,MAAM,kBAAkB,sHAG9B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,sHAG/B,CAAC;AAEF,MAAM,WAAW,8BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,yBAAyB,4HAGU,CAAC;AAEjD,MAAM,WAAW,0BAA2B,SAAQ,iBAAiB,CAAC,YAAY;CAAG;AAErF,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,mHAG9B,CAAC;AAEF,MAAM,WAAW,8BAA+B,SAAQ,iBAAiB,CAAC,gBAAgB;CAAG;AAE7F,eAAO,MAAM,yBAAyB,iIAAgC,CAAC"}

package/lib/components/SelectBox/CheckSelectBox.js

@@ -1,19 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
-import { Checkbox, useCheckboxContext } from '@seed-design/react-checkbox';
-import { Primitive } from '@seed-design/react-primitive';
 import { selectBox } from '@seed-design/css/recipes/select-box';
 import { selectBoxGroup } from '@seed-design/css/recipes/select-box-group';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { Checkbox, useCheckboxContext } from '@seed-design/react-checkbox';
+import { Primitive } from '@seed-design/react-primitive';
+import { forwardRef } from 'react';
+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 { forwardRef } from 'react';
 
-const { withProvider: withGroupProvider } = createStyleContext(selectBoxGroup);
-const { withProvider, withContext } = createStyleContext(selectBox);
+const { withProvider: withGroupProvider } = createRecipeContext(selectBoxGroup);
+const { withProvider, withContext } = createSlotRecipeContext(selectBox);
 const withStateProps = createWithStateProps([useCheckboxContext]);
 const CheckSelectBoxGroup = withGroupProvider(
-  forwardRef((props, ref) => /* @__PURE__ */ jsx(Primitive.div, { ref, role: "group", ...props })),
-  "root"
+  forwardRef((props, ref) => /* @__PURE__ */ jsx(Primitive.div, { ref, role: "group", ...props }))
 );
 const CheckSelectBoxRoot = withProvider(
   Checkbox.Root,

package/lib/components/SelectBox/RadioSelectBox.cjs

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const reactPrimitive = require('@seed-design/react-primitive');
-const reactRadioGroup = require('@seed-design/react-radio-group');
 const selectBox = require('@seed-design/css/recipes/select-box');
 const selectBoxGroup = require('@seed-design/css/recipes/select-box-group');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const reactPrimitive = require('@seed-design/react-primitive');
+const reactRadioGroup = require('@seed-design/react-radio-group');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 const Icon = require('../private/Icon.cjs');
 
-const { withProvider: withGroupProvider } = createStyleContext.createStyleContext(selectBoxGroup.selectBoxGroup);
-const { withProvider, withContext } = createStyleContext.createStyleContext(selectBox.selectBox);
+const { withProvider: withGroupProvider } = createRecipeContext.createRecipeContext(selectBoxGroup.selectBoxGroup);
+const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(selectBox.selectBox);
 const withStateProps = createWithStateProps.createWithStateProps([reactRadioGroup.useRadioGroupItemContext]);
 const RadioSelectBoxRoot = withGroupProvider(
-  reactRadioGroup.RadioGroup.Root,
-  "root"
+  reactRadioGroup.RadioGroup.Root
 );
 const RadioSelectBoxItem = withProvider(
   reactRadioGroup.RadioGroup.Item,

package/lib/components/SelectBox/RadioSelectBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioSelectBox.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/RadioSelectBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EACL,UAAU,IAAI,mBAAmB,EAElC,MAAM,gCAAgC,CAAC;AAKxC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAMvE,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB,CAAC,SAAS;CAAG;AAEjF,eAAO,MAAM,kBAAkB,oHAG9B,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB,CAAC,SAAS;CAAG;AAEjF,eAAO,MAAM,kBAAkB,sHAG9B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,sHAG/B,CAAC;AAEF,MAAM,WAAW,8BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,yBAAyB,4HAGU,CAAC;AAEjD,MAAM,WAAW,0BAA2B,SAAQ,mBAAmB,CAAC,gBAAgB;CAAG;AAE3F,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,mHAG9B,CAAC;AAEF,MAAM,WAAW,8BAA+B,SAAQ,mBAAmB,CAAC,oBAAoB;CAAG;AAEnG,eAAO,MAAM,yBAAyB,uIAAsC,CAAC"}
+{"version":3,"file":"RadioSelectBox.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/RadioSelectBox.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EACL,UAAU,IAAI,mBAAmB,EAElC,MAAM,gCAAgC,CAAC;AAIxC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAMvE,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB,CAAC,SAAS;CAAG;AAEjF,eAAO,MAAM,kBAAkB,oHAE9B,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB,CAAC,SAAS;CAAG;AAEjF,eAAO,MAAM,kBAAkB,sHAG9B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,sHAG/B,CAAC;AAEF,MAAM,WAAW,8BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,yBAAyB,4HAGU,CAAC;AAEjD,MAAM,WAAW,0BAA2B,SAAQ,mBAAmB,CAAC,gBAAgB;CAAG;AAE3F,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,mHAG9B,CAAC;AAEF,MAAM,WAAW,8BAA+B,SAAQ,mBAAmB,CAAC,oBAAoB;CAAG;AAEnG,eAAO,MAAM,yBAAyB,uIAAsC,CAAC"}

package/lib/components/SelectBox/RadioSelectBox.js

@@ -1,17 +1,17 @@
-import { Primitive } from '@seed-design/react-primitive';
-import { RadioGroup, useRadioGroupItemContext } from '@seed-design/react-radio-group';
 import { selectBox } from '@seed-design/css/recipes/select-box';
 import { selectBoxGroup } from '@seed-design/css/recipes/select-box-group';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { Primitive } from '@seed-design/react-primitive';
+import { RadioGroup, useRadioGroupItemContext } from '@seed-design/react-radio-group';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 import { InternalIcon } from '../private/Icon.js';
 
-const { withProvider: withGroupProvider } = createStyleContext(selectBoxGroup);
-const { withProvider, withContext } = createStyleContext(selectBox);
+const { withProvider: withGroupProvider } = createRecipeContext(selectBoxGroup);
+const { withProvider, withContext } = createSlotRecipeContext(selectBox);
 const withStateProps = createWithStateProps([useRadioGroupItemContext]);
 const RadioSelectBoxRoot = withGroupProvider(
-  RadioGroup.Root,
-  "root"
+  RadioGroup.Root
 );
 const RadioSelectBoxItem = withProvider(
   RadioGroup.Item,

package/lib/components/Skeleton/Skeleton.cjs

@@ -4,13 +4,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const reactPrimitive = require('@seed-design/react-primitive');
 const skeleton = require('@seed-design/css/recipes/skeleton');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const styled = require('../../utils/styled.cjs');
 
-const { withProvider } = createStyleContext.createStyleContext(skeleton.skeleton);
-const Skeleton = withProvider(
-  styled.withStyleProps(reactPrimitive.Primitive.div),
-  "root"
-);
+const { withProvider } = createRecipeContext.createRecipeContext(skeleton.skeleton);
+const Skeleton = withProvider(styled.withStyleProps(reactPrimitive.Primitive.div));
 
 exports.Skeleton = Skeleton;

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACxF,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIrE,MAAM,WAAW,aACf,SAAQ,oBAAoB,EAC1B,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,OAAO,CAAC,EACpC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;CAAG;AAE1D,eAAO,MAAM,QAAQ,sFAGpB,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACxF,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIrE,MAAM,WAAW,aACf,SAAQ,oBAAoB,EAC1B,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,OAAO,CAAC,EACpC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;CAAG;AAE1D,eAAO,MAAM,QAAQ,sFAA6E,CAAC"}

package/lib/components/Skeleton/Skeleton.js

@@ -1,12 +1,9 @@
 import { Primitive } from '@seed-design/react-primitive';
 import { skeleton } from '@seed-design/css/recipes/skeleton';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { withStyleProps } from '../../utils/styled.js';
 
-const { withProvider } = createStyleContext(skeleton);
-const Skeleton = withProvider(
-  withStyleProps(Primitive.div),
-  "root"
-);
+const { withProvider } = createRecipeContext(skeleton);
+const Skeleton = withProvider(withStyleProps(Primitive.div));
 
 export { Skeleton };

package/lib/components/Snackbar/Snackbar.cjs

@@ -3,22 +3,22 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const reactPrimitive = require('@seed-design/react-primitive');
-const reactSnackbar = require('@seed-design/react-snackbar');
 const snackbar = require('@seed-design/css/recipes/snackbar');
 const snackbarRegion = require('@seed-design/css/recipes/snackbar-region');
 const visuallyHidden = require('@seed-design/css/recipes/visually-hidden');
+const reactPrimitive = require('@seed-design/react-primitive');
+const reactSnackbar = require('@seed-design/react-snackbar');
 const clsx = require('clsx');
 const React = require('react');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const Icon = require('../private/Icon.cjs');
 
-const { withProvider: withRegionProvider } = createStyleContext.createStyleContext(snackbarRegion.snackbarRegion);
-const { withProvider, withContext } = createStyleContext.createStyleContext(snackbar.snackbar);
+const { withProvider: withRegionProvider } = createRecipeContext.createRecipeContext(snackbarRegion.snackbarRegion);
+const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(snackbar.snackbar);
 const SnackbarRootProvider = reactSnackbar.Snackbar.RootProvider;
 const SnackbarRegion = withRegionProvider(
-  reactSnackbar.Snackbar.Region,
-  "root"
+  reactSnackbar.Snackbar.Region
 );
 const SnackbarRoot = withProvider(
   reactSnackbar.Snackbar.Root,
@@ -39,12 +39,12 @@ const SnackbarActionButton = withContext(
 const SnackbarCloseButton = React.forwardRef(
   (props, ref) => {
     const { className, ...otherProps } = props;
-    const classNames = React.useMemo(() => visuallyHidden.visuallyHidden(), []);
+    const visuallyHiddenClassName = React.useMemo(() => visuallyHidden.visuallyHidden(), []);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactSnackbar.Snackbar.CloseButton,
       {
         ref,
-        className: clsx(classNames.root, className),
+        className: clsx(visuallyHiddenClassName, className),
         ...otherProps
       }
     );

package/lib/components/Snackbar/Snackbar.d.ts

@@ -1,6 +1,6 @@
+import { SnackbarVariantProps } from '@seed-design/css/recipes/snackbar';
 import { PrimitiveProps } from '@seed-design/react-primitive';
 import { Snackbar as SnackbarPrimitive } from '@seed-design/react-snackbar';
-import { SnackbarVariantProps } from '@seed-design/css/recipes/snackbar';
 import { InternalIconProps } from '../private/Icon';
 import { ForwardRefExoticComponent, RefAttributes, ReactNode, ReactElement, JSXElementConstructor } from 'react';
 export interface SnackbarRootProviderProps extends SnackbarPrimitive.RootProviderProps {