@seed-design/react 0.0.4 → 0.0.6

package/lib/components/ActionButton/ActionButton.cjs

@@ -7,9 +7,9 @@ const actionButton = require('@seed-design/css/recipes/action-button');
 const reactPrimitive = require('@seed-design/react-primitive');
 const clsx = require('clsx');
 const React = require('react');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
-const usePendingButton = require('../LoadingIndicator/usePendingButton.cjs');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const Icon = require('../Icon/Icon.cjs');
+const usePendingButton = require('../LoadingIndicator/usePendingButton.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -30,21 +30,21 @@ function _interopNamespaceDefault(e) {
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const { ClassNamesProvider } = createStyleContext.createStyleContext(actionButton.actionButton);
+const { ClassNameProvider } = createRecipeContext.createRecipeContext(actionButton.actionButton);
 const ActionButton = React__namespace.forwardRef(
   ({ variant, size, loading = false, layout = "withText", className, children, ...otherProps }, ref) => {
-    const classNames = actionButton.actionButton({ variant, layout, size });
+    const recipeClassName = actionButton.actionButton({ variant, layout, size });
     const api = usePendingButton.usePendingButton({ loading, disabled: otherProps.disabled });
     if (layout === "iconOnly" && !(otherProps["aria-label"] || otherProps["aria-labelledby"])) {
       console.warn(
         "When layout is 'iconOnly', 'aria-label' or 'aria-labelledby' should be provided."
       );
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(usePendingButton.PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.IconRequired, { enabled: layout === "iconOnly", children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ClassNameProvider, { value: recipeClassName, children: /* @__PURE__ */ jsxRuntime.jsx(usePendingButton.PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.IconRequired, { enabled: layout === "iconOnly", children: /* @__PURE__ */ jsxRuntime.jsx(
       reactPrimitive.Primitive.button,
       {
         ref,
-        className: clsx(classNames.root, className),
+        className: clsx(recipeClassName, className),
         ...api.stateProps,
         ...otherProps,
         children

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

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

package/lib/components/ActionButton/ActionButton.js

@@ -3,25 +3,25 @@ import { actionButton } from '@seed-design/css/recipes/action-button';
 import { Primitive } from '@seed-design/react-primitive';
 import clsx from 'clsx';
 import * as React from 'react';
-import { createStyleContext } from '../../utils/createStyleContext.js';
-import { usePendingButton, PendingButtonProvider } from '../LoadingIndicator/usePendingButton.js';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { IconRequired } from '../Icon/Icon.js';
+import { usePendingButton, PendingButtonProvider } from '../LoadingIndicator/usePendingButton.js';
 
-const { ClassNamesProvider } = createStyleContext(actionButton);
+const { ClassNameProvider } = createRecipeContext(actionButton);
 const ActionButton = React.forwardRef(
   ({ variant, size, loading = false, layout = "withText", className, children, ...otherProps }, ref) => {
-    const classNames = actionButton({ variant, layout, size });
+    const recipeClassName = actionButton({ variant, layout, size });
     const api = usePendingButton({ loading, disabled: otherProps.disabled });
     if (layout === "iconOnly" && !(otherProps["aria-label"] || otherProps["aria-labelledby"])) {
       console.warn(
         "When layout is 'iconOnly', 'aria-label' or 'aria-labelledby' should be provided."
       );
     }
-    return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsx(IconRequired, { enabled: layout === "iconOnly", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(ClassNameProvider, { value: recipeClassName, children: /* @__PURE__ */ jsx(PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsx(IconRequired, { enabled: layout === "iconOnly", children: /* @__PURE__ */ jsx(
       Primitive.button,
       {
         ref,
-        className: clsx(classNames.root, className),
+        className: clsx(recipeClassName, className),
         ...api.stateProps,
         ...otherProps,
         children

package/lib/components/ActionChip/ActionChip.cjs

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const reactPrimitive = require('@seed-design/react-primitive');
 const actionChip = require('@seed-design/css/recipes/action-chip');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const reactPrimitive = require('@seed-design/react-primitive');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const Icon = require('../Icon/Icon.cjs');
 
-const { withProvider } = createStyleContext.createStyleContext(actionChip.actionChip);
+const { withProvider } = createRecipeContext.createRecipeContext(actionChip.actionChip);
 const ActionChip = Icon.withIconRequired(
-  withProvider(reactPrimitive.Primitive.button, "root"),
+  withProvider(reactPrimitive.Primitive.button),
   (props) => props.layout === "iconOnly"
 );
 ActionChip.displayName = "ActionChip";

package/lib/components/ActionChip/ActionChip.d.ts

@@ -1,5 +1,5 @@
-import { PrimitiveProps } from '@seed-design/react-primitive';
 import { ActionChipVariantProps } from '@seed-design/css/recipes/action-chip';
+import { PrimitiveProps } from '@seed-design/react-primitive';
 import type * as React from "react";
 export interface ActionChipProps extends ActionChipVariantProps, PrimitiveProps, React.ButtonHTMLAttributes<HTMLButtonElement> {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ActionChip.d.ts","sourceRoot":"","sources":["../../../src/components/ActionChip/ActionChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAC/F,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,MAAM,WAAW,eACf,SAAQ,sBAAsB,EAC5B,cAAc,EACd,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,UAAU,iJAGtB,CAAC"}
+{"version":3,"file":"ActionChip.d.ts","sourceRoot":"","sources":["../../../src/components/ActionChip/ActionChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAC/F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,MAAM,WAAW,eACf,SAAQ,sBAAsB,EAC5B,cAAc,EACd,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,UAAU,iJAGtB,CAAC"}

package/lib/components/ActionChip/ActionChip.js

@@ -1,11 +1,11 @@
-import { Primitive } from '@seed-design/react-primitive';
 import { actionChip } from '@seed-design/css/recipes/action-chip';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { Primitive } from '@seed-design/react-primitive';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { withIconRequired } from '../Icon/Icon.js';
 
-const { withProvider } = createStyleContext(actionChip);
+const { withProvider } = createRecipeContext(actionChip);
 const ActionChip = withIconRequired(
-  withProvider(Primitive.button, "root"),
+  withProvider(Primitive.button),
   (props) => props.layout === "iconOnly"
 );
 ActionChip.displayName = "ActionChip";

package/lib/components/ActionSheet/ActionSheet.cjs

@@ -2,15 +2,16 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const reactDialog = require('@seed-design/react-dialog');
-const reactPrimitive = require('@seed-design/react-primitive');
 const actionSheet = require('@seed-design/css/recipes/action-sheet');
 const actionSheetItem = require('@seed-design/css/recipes/action-sheet-item');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const reactDialog = require('@seed-design/react-dialog');
+const reactPrimitive = require('@seed-design/react-primitive');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 
-const { withRootProvider, withContext } = createStyleContext.createStyleContext(actionSheet.actionSheet);
-const { withProvider: withItemProvider } = createStyleContext.createStyleContext(actionSheetItem.actionSheetItem);
+const { withRootProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(actionSheet.actionSheet);
+const { withProvider: withItemProvider } = createRecipeContext.createRecipeContext(actionSheetItem.actionSheetItem);
 const withStateProps = createWithStateProps.createWithStateProps([reactDialog.useDialogContext]);
 const ActionSheetRoot = withRootProvider(reactDialog.Dialog.Root, {
   defaultProps: {
@@ -45,8 +46,7 @@ const ActionSheetList = withContext(
   "list"
 );
 const ActionSheetItem = withItemProvider(
-  withStateProps(reactPrimitive.Primitive.button),
-  "root"
+  withStateProps(reactPrimitive.Primitive.button)
 );
 const ActionSheetCloseButton = withContext(
   reactDialog.Dialog.CloseButton,

package/lib/components/ActionSheet/ActionSheet.d.ts

@@ -1,7 +1,7 @@
-import { Dialog as DialogPrimitive } from '@seed-design/react-dialog';
-import { PrimitiveProps } from '@seed-design/react-primitive';
 import { ActionSheetVariantProps } from '@seed-design/css/recipes/action-sheet';
 import { ActionSheetItemVariantProps } from '@seed-design/css/recipes/action-sheet-item';
+import { Dialog as DialogPrimitive } from '@seed-design/react-dialog';
+import { PrimitiveProps } from '@seed-design/react-primitive';
 import type * as React from "react";
 export interface ActionSheetRootProps extends ActionSheetVariantProps, DialogPrimitive.RootProps {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ActionSheet.d.ts","sourceRoot":"","sources":["../../../src/components/ActionSheet/ActionSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAoB,MAAM,2BAA2B,CAAC;AACxF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAe,KAAK,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAClG,OAAO,EAEL,KAAK,2BAA2B,EACjC,MAAM,4CAA4C,CAAC;AACpD,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAUpC,MAAM,WAAW,oBAAqB,SAAQ,uBAAuB,EAAE,eAAe,CAAC,SAAS;CAAG;AAEnG,eAAO,MAAM,eAAe,uDAK1B,CAAC;AAIH,MAAM,WAAW,uBAAwB,SAAQ,eAAe,CAAC,YAAY;CAAG;AAEhF,eAAO,MAAM,kBAAkB,wGAA0B,CAAC;AAI1D,MAAM,WAAW,0BAA2B,SAAQ,eAAe,CAAC,eAAe;CAAG;AAEtF,eAAO,MAAM,qBAAqB,mGAGjC,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,eAAe,CAAC,aAAa;CAAG;AAElF,eAAO,MAAM,mBAAmB,iGAG/B,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,eAAe,CAAC,YAAY;CAAG;AAEhF,eAAO,MAAM,kBAAkB,gGAG9B,CAAC;AAIF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,+FAG7B,CAAC;AAIF,MAAM,WAAW,qBAAsB,SAAQ,eAAe,CAAC,UAAU;CAAG;AAE5E,eAAO,MAAM,gBAAgB,kGAG5B,CAAC;AAIF,MAAM,WAAW,2BAA4B,SAAQ,eAAe,CAAC,gBAAgB;CAAG;AAExF,eAAO,MAAM,sBAAsB,0GAGU,CAAC;AAI9C,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAErF,eAAO,MAAM,eAAe,6FAG3B,CAAC;AAIF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,2BAA2B,EAC3B,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;CAAG;AAE9C,eAAO,MAAM,eAAe,gGAG3B,CAAC;AAIF,MAAM,WAAW,2BAA4B,SAAQ,eAAe,CAAC,gBAAgB;CAAG;AAExF,eAAO,MAAM,sBAAsB,oGAGlC,CAAC"}
+{"version":3,"file":"ActionSheet.d.ts","sourceRoot":"","sources":["../../../src/components/ActionSheet/ActionSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAClG,OAAO,EAEL,KAAK,2BAA2B,EACjC,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,MAAM,IAAI,eAAe,EAAoB,MAAM,2BAA2B,CAAC;AACxF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAWpC,MAAM,WAAW,oBAAqB,SAAQ,uBAAuB,EAAE,eAAe,CAAC,SAAS;CAAG;AAEnG,eAAO,MAAM,eAAe,uDAK1B,CAAC;AAIH,MAAM,WAAW,uBAAwB,SAAQ,eAAe,CAAC,YAAY;CAAG;AAEhF,eAAO,MAAM,kBAAkB,wGAA0B,CAAC;AAI1D,MAAM,WAAW,0BAA2B,SAAQ,eAAe,CAAC,eAAe;CAAG;AAEtF,eAAO,MAAM,qBAAqB,mGAGjC,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,eAAe,CAAC,aAAa;CAAG;AAElF,eAAO,MAAM,mBAAmB,iGAG/B,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,eAAe,CAAC,YAAY;CAAG;AAEhF,eAAO,MAAM,kBAAkB,gGAG9B,CAAC;AAIF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,+FAG7B,CAAC;AAIF,MAAM,WAAW,qBAAsB,SAAQ,eAAe,CAAC,UAAU;CAAG;AAE5E,eAAO,MAAM,gBAAgB,kGAG5B,CAAC;AAIF,MAAM,WAAW,2BAA4B,SAAQ,eAAe,CAAC,gBAAgB;CAAG;AAExF,eAAO,MAAM,sBAAsB,0GAGU,CAAC;AAI9C,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAErF,eAAO,MAAM,eAAe,6FAG3B,CAAC;AAIF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,2BAA2B,EAC3B,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;CAAG;AAE9C,eAAO,MAAM,eAAe,gGAE3B,CAAC;AAIF,MAAM,WAAW,2BAA4B,SAAQ,eAAe,CAAC,gBAAgB;CAAG;AAExF,eAAO,MAAM,sBAAsB,oGAGlC,CAAC"}

package/lib/components/ActionSheet/ActionSheet.js

@@ -1,12 +1,13 @@
-import { Dialog, useDialogContext } from '@seed-design/react-dialog';
-import { Primitive } from '@seed-design/react-primitive';
 import { actionSheet } from '@seed-design/css/recipes/action-sheet';
 import { actionSheetItem } from '@seed-design/css/recipes/action-sheet-item';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { Dialog, useDialogContext } from '@seed-design/react-dialog';
+import { Primitive } from '@seed-design/react-primitive';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 
-const { withRootProvider, withContext } = createStyleContext(actionSheet);
-const { withProvider: withItemProvider } = createStyleContext(actionSheetItem);
+const { withRootProvider, withContext } = createSlotRecipeContext(actionSheet);
+const { withProvider: withItemProvider } = createRecipeContext(actionSheetItem);
 const withStateProps = createWithStateProps([useDialogContext]);
 const ActionSheetRoot = withRootProvider(Dialog.Root, {
   defaultProps: {
@@ -41,8 +42,7 @@ const ActionSheetList = withContext(
   "list"
 );
 const ActionSheetItem = withItemProvider(
-  withStateProps(Primitive.button),
-  "root"
+  withStateProps(Primitive.button)
 );
 const ActionSheetCloseButton = withContext(
   Dialog.CloseButton,

package/lib/components/Avatar/Avatar.cjs

@@ -9,7 +9,7 @@ const avatar = require('@seed-design/css/recipes/avatar');
 const avatarStack = require('@seed-design/css/recipes/avatar-stack');
 const clsx = require('clsx');
 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' } });
@@ -30,7 +30,7 @@ function _interopNamespaceDefault(e) {
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const { PropsProvider, withProvider, withContext } = createStyleContext.createStyleContext(avatar.avatar);
+const { PropsProvider, withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(avatar.avatar);
 const AvatarRoot = withProvider(
   reactAvatar.Avatar.Root,
   "root"

package/lib/components/Avatar/Avatar.js

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

package/lib/components/Badge/Badge.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAS,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAOpC,MAAM,WAAW,UACf,SAAQ,iBAAiB,EACvB,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,KAAK,oFAAoE,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAS,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAOpC,MAAM,WAAW,UACf,SAAQ,iBAAiB,EACvB,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,KAAK,oFAA4D,CAAC"}

package/lib/components/Badge/Badge.js

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

package/lib/components/BottomSheet/BottomSheet.cjs

@@ -5,11 +5,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const reactDialog = require('@seed-design/react-dialog');
 const reactPrimitive = require('@seed-design/react-primitive');
 const bottomSheet = require('@seed-design/css/recipes/bottom-sheet');
-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(bottomSheet.bottomSheet);
+const { withRootProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(bottomSheet.bottomSheet);
 const withStateProps = createWithStateProps.createWithStateProps([reactDialog.useDialogContext]);
 const BottomSheetRoot = withRootProvider(reactDialog.Dialog.Root, {
   defaultProps: {

package/lib/components/BottomSheet/BottomSheet.js

@@ -1,11 +1,11 @@
 import { Dialog, useDialogContext } from '@seed-design/react-dialog';
 import { Primitive } from '@seed-design/react-primitive';
 import { bottomSheet } from '@seed-design/css/recipes/bottom-sheet';
-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(bottomSheet);
+const { withRootProvider, withContext } = createSlotRecipeContext(bottomSheet);
 const withStateProps = createWithStateProps([useDialogContext]);
 const BottomSheetRoot = withRootProvider(Dialog.Root, {
   defaultProps: {

package/lib/components/Callout/Callout.cjs

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

package/lib/components/Callout/Callout.js

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

package/lib/components/Checkbox/Checkbox.cjs

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

package/lib/components/Checkbox/Checkbox.js

@@ -4,11 +4,11 @@ import { Checkbox, useCheckboxContext } from '@seed-design/react-checkbox';
 import { Primitive } from '@seed-design/react-primitive';
 import { checkbox } from '@seed-design/css/recipes/checkbox';
 import { forwardRef } from 'react';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 import { InternalIcon } from '../private/Icon.js';
 
-const { withProvider, withContext, useClassNames } = createStyleContext(checkbox);
+const { withProvider, withContext, useClassNames } = createSlotRecipeContext(checkbox);
 const withStateProps = createWithStateProps([useCheckboxContext]);
 const CheckboxRoot = withProvider(
   Checkbox.Root,

package/lib/components/ChipTabs/ChipTabs.cjs

@@ -4,9 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const chipTabs = require('@seed-design/css/recipes/chip-tabs');
 const reactTabs = require('@seed-design/react-tabs');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 
-const { withProvider, withContext } = createStyleContext.createStyleContext(chipTabs.chipTabs);
+const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(chipTabs.chipTabs);
 const ChipTabsRoot = withProvider(
   reactTabs.Tabs.Root,
   "root"

package/lib/components/ChipTabs/ChipTabs.js

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

package/lib/components/ControlChip/ControlChip.cjs

@@ -4,12 +4,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const controlChip = require('@seed-design/css/recipes/control-chip');
 const reactPrimitive = require('@seed-design/react-primitive');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const Icon = require('../Icon/Icon.cjs');
 
-const { withProvider } = createStyleContext.createStyleContext(controlChip.controlChip);
+const { withProvider } = createRecipeContext.createRecipeContext(controlChip.controlChip);
 const ControlChip = Icon.withIconRequired(
-  withProvider(reactPrimitive.Primitive.button, "root"),
+  withProvider(reactPrimitive.Primitive.button),
   (props) => props.layout === "iconOnly"
 );
 

package/lib/components/ControlChip/ControlChip.js

@@ -1,11 +1,11 @@
 import { controlChip } from '@seed-design/css/recipes/control-chip';
 import { Primitive } from '@seed-design/react-primitive';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { withIconRequired } from '../Icon/Icon.js';
 
-const { withProvider } = createStyleContext(controlChip);
+const { withProvider } = createRecipeContext(controlChip);
 const ControlChip = withIconRequired(
-  withProvider(Primitive.button, "root"),
+  withProvider(Primitive.button),
   (props) => props.layout === "iconOnly"
 );
 

package/lib/components/Dialog/Dialog.cjs

@@ -7,10 +7,10 @@ const reactDialog = require('@seed-design/react-dialog');
 const reactPrimitive = require('@seed-design/react-primitive');
 const dialog = require('@seed-design/css/recipes/dialog');
 const React = require('react');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 
-const { withRootProvider, withContext } = createStyleContext.createStyleContext(dialog.dialog);
+const { withRootProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(dialog.dialog);
 const withStateProps = createWithStateProps.createWithStateProps([reactDialog.useDialogContext]);
 const DialogRoot = withRootProvider(reactDialog.Dialog.Root, {
   defaultProps: {

package/lib/components/Dialog/Dialog.js

@@ -3,10 +3,10 @@ import { Dialog, useDialogContext } from '@seed-design/react-dialog';
 import { Primitive } from '@seed-design/react-primitive';
 import { dialog } from '@seed-design/css/recipes/dialog';
 import { forwardRef } from 'react';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 
-const { withRootProvider, withContext } = createStyleContext(dialog);
+const { withRootProvider, withContext } = createSlotRecipeContext(dialog);
 const withStateProps = createWithStateProps([useDialogContext]);
 const DialogRoot = withRootProvider(Dialog.Root, {
   defaultProps: {

package/lib/components/ExtendedActionSheet/ExtendedActionSheet.cjs

@@ -6,11 +6,12 @@ const reactDialog = require('@seed-design/react-dialog');
 const reactPrimitive = require('@seed-design/react-primitive');
 const extendedActionSheet = require('@seed-design/css/recipes/extended-action-sheet');
 const extendedActionSheetItem = require('@seed-design/css/recipes/extended-action-sheet-item');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 
-const { withRootProvider, withContext } = createStyleContext.createStyleContext(extendedActionSheet.extendedActionSheet);
-const { withProvider: withItemProvider } = createStyleContext.createStyleContext(extendedActionSheetItem.extendedActionSheetItem);
+const { withRootProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(extendedActionSheet.extendedActionSheet);
+const { withProvider: withItemProvider } = createRecipeContext.createRecipeContext(extendedActionSheetItem.extendedActionSheetItem);
 const withStateProps = createWithStateProps.createWithStateProps([reactDialog.useDialogContext]);
 const ExtendedActionSheetRoot = withRootProvider(
   reactDialog.Dialog.Root,
@@ -35,7 +36,7 @@ const ExtendedActionSheetGroup = withContext(
   withStateProps(reactPrimitive.Primitive.div),
   "group"
 );
-const ExtendedActionSheetItem = withItemProvider(withStateProps(reactPrimitive.Primitive.button), "root");
+const ExtendedActionSheetItem = withItemProvider(withStateProps(reactPrimitive.Primitive.button));
 const ExtendedActionSheetFooter = withContext(withStateProps(reactPrimitive.Primitive.div), "footer");
 const ExtendedActionSheetCloseButton = withContext(reactDialog.Dialog.CloseButton, "closeButton");
 

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

@@ -1 +1 @@
-{"version":3,"file":"ExtendedActionSheet.d.ts","sourceRoot":"","sources":["../../../src/components/ExtendedActionSheet/ExtendedActionSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAoB,MAAM,2BAA2B,CAAC;AACxF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAEL,KAAK,+BAA+B,EACrC,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAEL,KAAK,mCAAmC,EACzC,MAAM,qDAAqD,CAAC;AAC7D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAUpC,MAAM,WAAW,4BACf,SAAQ,+BAA+B,EACrC,eAAe,CAAC,SAAS;CAAG;AAEhC,eAAO,MAAM,uBAAuB,+DAQnC,CAAC;AAIF,MAAM,WAAW,+BAAgC,SAAQ,eAAe,CAAC,YAAY;CAAG;AAExF,eAAO,MAAM,0BAA0B,wGAA0B,CAAC;AAIlE,MAAM,WAAW,kCAAmC,SAAQ,eAAe,CAAC,eAAe;CAAG;AAE9F,eAAO,MAAM,6BAA6B,2GAGC,CAAC;AAI5C,MAAM,WAAW,gCAAiC,SAAQ,eAAe,CAAC,aAAa;CAAG;AAE1F,eAAO,MAAM,2BAA2B,yGAGD,CAAC;AAIxC,MAAM,WAAW,+BAAgC,SAAQ,eAAe,CAAC,YAAY;CAAG;AAExF,eAAO,MAAM,0BAA0B,wGAGF,CAAC;AAItC,MAAM,WAAW,8BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,yBAAyB,uGAGI,CAAC;AAI3C,MAAM,WAAW,6BAA8B,SAAQ,eAAe,CAAC,UAAU;CAAG;AAEpF,eAAO,MAAM,wBAAwB,0GAGG,CAAC;AAIzC,MAAM,WAAW,4BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,uBAAuB,qGAGnC,CAAC;AAIF,MAAM,WAAW,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE9F,eAAO,MAAM,wBAAwB,sGAGpC,CAAC;AAIF,MAAM,WAAW,4BACf,SAAQ,cAAc,EACpB,mCAAmC,EACnC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;CAAG;AAE9C,eAAO,MAAM,uBAAuB,wGAGO,CAAC;AAI5C,MAAM,WAAW,8BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,yBAAyB,uGAGI,CAAC;AAI3C,MAAM,WAAW,mCAAoC,SAAQ,eAAe,CAAC,gBAAgB;CAAG;AAEhG,eAAO,MAAM,8BAA8B,4GAGE,CAAC"}
+{"version":3,"file":"ExtendedActionSheet.d.ts","sourceRoot":"","sources":["../../../src/components/ExtendedActionSheet/ExtendedActionSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAoB,MAAM,2BAA2B,CAAC;AACxF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAEL,KAAK,+BAA+B,EACrC,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAEL,KAAK,mCAAmC,EACzC,MAAM,qDAAqD,CAAC;AAC7D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAWpC,MAAM,WAAW,4BACf,SAAQ,+BAA+B,EACrC,eAAe,CAAC,SAAS;CAAG;AAEhC,eAAO,MAAM,uBAAuB,+DAQnC,CAAC;AAIF,MAAM,WAAW,+BAAgC,SAAQ,eAAe,CAAC,YAAY;CAAG;AAExF,eAAO,MAAM,0BAA0B,wGAA0B,CAAC;AAIlE,MAAM,WAAW,kCAAmC,SAAQ,eAAe,CAAC,eAAe;CAAG;AAE9F,eAAO,MAAM,6BAA6B,2GAGC,CAAC;AAI5C,MAAM,WAAW,gCAAiC,SAAQ,eAAe,CAAC,aAAa;CAAG;AAE1F,eAAO,MAAM,2BAA2B,yGAGD,CAAC;AAIxC,MAAM,WAAW,+BAAgC,SAAQ,eAAe,CAAC,YAAY;CAAG;AAExF,eAAO,MAAM,0BAA0B,wGAGF,CAAC;AAItC,MAAM,WAAW,8BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,yBAAyB,uGAGI,CAAC;AAI3C,MAAM,WAAW,6BAA8B,SAAQ,eAAe,CAAC,UAAU;CAAG;AAEpF,eAAO,MAAM,wBAAwB,0GAGG,CAAC;AAIzC,MAAM,WAAW,4BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,uBAAuB,qGAGnC,CAAC;AAIF,MAAM,WAAW,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE9F,eAAO,MAAM,wBAAwB,sGAGpC,CAAC;AAIF,MAAM,WAAW,4BACf,SAAQ,cAAc,EACpB,mCAAmC,EACnC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;CAAG;AAE9C,eAAO,MAAM,uBAAuB,wGAGD,CAAC;AAIpC,MAAM,WAAW,8BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,yBAAyB,uGAGI,CAAC;AAI3C,MAAM,WAAW,mCAAoC,SAAQ,eAAe,CAAC,gBAAgB;CAAG;AAEhG,eAAO,MAAM,8BAA8B,4GAGE,CAAC"}

package/lib/components/ExtendedActionSheet/ExtendedActionSheet.js

@@ -2,11 +2,12 @@ import { Dialog, useDialogContext } from '@seed-design/react-dialog';
 import { Primitive } from '@seed-design/react-primitive';
 import { extendedActionSheet } from '@seed-design/css/recipes/extended-action-sheet';
 import { extendedActionSheetItem } from '@seed-design/css/recipes/extended-action-sheet-item';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 
-const { withRootProvider, withContext } = createStyleContext(extendedActionSheet);
-const { withProvider: withItemProvider } = createStyleContext(extendedActionSheetItem);
+const { withRootProvider, withContext } = createSlotRecipeContext(extendedActionSheet);
+const { withProvider: withItemProvider } = createRecipeContext(extendedActionSheetItem);
 const withStateProps = createWithStateProps([useDialogContext]);
 const ExtendedActionSheetRoot = withRootProvider(
   Dialog.Root,
@@ -31,7 +32,7 @@ const ExtendedActionSheetGroup = withContext(
   withStateProps(Primitive.div),
   "group"
 );
-const ExtendedActionSheetItem = withItemProvider(withStateProps(Primitive.button), "root");
+const ExtendedActionSheetItem = withItemProvider(withStateProps(Primitive.button));
 const ExtendedActionSheetFooter = withContext(withStateProps(Primitive.div), "footer");
 const ExtendedActionSheetCloseButton = withContext(Dialog.CloseButton, "closeButton");
 

package/lib/components/ExtendedFab/ExtendedFab.cjs

@@ -4,18 +4,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const reactPrimitive = require('@seed-design/react-primitive');
 const extendedFab = require('@seed-design/css/recipes/extended-fab');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 
-const { withProvider } = createStyleContext.createStyleContext(extendedFab.extendedFab);
-const ExtendedFab = withProvider(
-  reactPrimitive.Primitive.button,
-  "root",
-  {
-    defaultProps: {
-      variant: "neutralSolid",
-      size: "medium"
-    }
+const { withProvider } = createRecipeContext.createRecipeContext(extendedFab.extendedFab);
+const ExtendedFab = withProvider(reactPrimitive.Primitive.button, {
+  defaultProps: {
+    variant: "neutralSolid",
+    size: "medium"
   }
-);
+});
 
 exports.ExtendedFab = ExtendedFab;

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

@@ -1 +1 @@
-{"version":3,"file":"ExtendedFab.d.ts","sourceRoot":"","sources":["../../../src/components/ExtendedFab/ExtendedFab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAe,KAAK,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAOlG,MAAM,WAAW,gBACf,SAAQ,uBAAuB,EAC7B,cAAc,EACd,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,WAAW,gHASvB,CAAC"}
+{"version":3,"file":"ExtendedFab.d.ts","sourceRoot":"","sources":["../../../src/components/ExtendedFab/ExtendedFab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAe,KAAK,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAOlG,MAAM,WAAW,gBACf,SAAQ,uBAAuB,EAC7B,cAAc,EACd,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,WAAW,gHAKtB,CAAC"}

package/lib/components/ExtendedFab/ExtendedFab.js

@@ -1,17 +1,13 @@
 import { Primitive } from '@seed-design/react-primitive';
 import { extendedFab } from '@seed-design/css/recipes/extended-fab';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
 
-const { withProvider } = createStyleContext(extendedFab);
-const ExtendedFab = withProvider(
-  Primitive.button,
-  "root",
-  {
-    defaultProps: {
-      variant: "neutralSolid",
-      size: "medium"
-    }
+const { withProvider } = createRecipeContext(extendedFab);
+const ExtendedFab = withProvider(Primitive.button, {
+  defaultProps: {
+    variant: "neutralSolid",
+    size: "medium"
   }
-);
+});
 
 export { ExtendedFab };

package/lib/components/Fab/Fab.cjs

@@ -4,9 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const reactPrimitive = require('@seed-design/react-primitive');
 const fab = require('@seed-design/css/recipes/fab');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 
-const { withProvider } = createStyleContext.createStyleContext(fab.fab);
-const Fab = withProvider(reactPrimitive.Primitive.button, "root");
+const { withProvider } = createRecipeContext.createRecipeContext(fab.fab);
+const Fab = withProvider(reactPrimitive.Primitive.button);
 
 exports.Fab = Fab;

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

@@ -1 +1 @@
-{"version":3,"file":"Fab.d.ts","sourceRoot":"","sources":["../../../src/components/Fab/Fab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAO,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAOpC,MAAM,WAAW,QACf,SAAQ,eAAe,EACrB,cAAc,EACd,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,GAAG,oFAAsE,CAAC"}
+{"version":3,"file":"Fab.d.ts","sourceRoot":"","sources":["../../../src/components/Fab/Fab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAO,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAOpC,MAAM,WAAW,QACf,SAAQ,eAAe,EACrB,cAAc,EACd,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,GAAG,oFAA8D,CAAC"}