@seed-design/react 0.0.8 → 0.0.10

package/lib/components/ActionButton/ActionButton.cjs

@@ -7,7 +7,6 @@ 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 createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const Icon = require('../Icon/Icon.cjs');
 const usePendingButton = require('../LoadingIndicator/usePendingButton.cjs');
 
@@ -30,7 +29,6 @@ function _interopNamespaceDefault(e) {
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const { ClassNameProvider } = createRecipeContext.createRecipeContext(actionButton.actionButton);
 const ActionButton = React__namespace.forwardRef(
   ({ variant, size, loading = false, layout = "withText", className, children, ...otherProps }, ref) => {
     const recipeClassName = actionButton.actionButton({ variant, layout, size });
@@ -40,7 +38,7 @@ const ActionButton = React__namespace.forwardRef(
         "When layout is 'iconOnly', 'aria-label' or 'aria-labelledby' should be provided."
       );
     }
-    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(
+    return /* @__PURE__ */ jsxRuntime.jsx(usePendingButton.PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.IconRequired, { enabled: layout === "iconOnly", children: /* @__PURE__ */ jsxRuntime.jsx(
       reactPrimitive.Primitive.button,
       {
         ref,
@@ -49,7 +47,7 @@ const ActionButton = React__namespace.forwardRef(
         ...otherProps,
         children
       }
-    ) }) }) });
+    ) }) });
   }
 );
 ActionButton.displayName = "ActionButton";

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;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"}
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButton/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,qBAAqB,EACrB,cAAc,EACd,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,YAAY,6FA6BxB,CAAC"}

package/lib/components/ActionButton/ActionButton.js

@@ -3,11 +3,9 @@ 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 { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { IconRequired } from '../Icon/Icon.js';
 import { usePendingButton, PendingButtonProvider } from '../LoadingIndicator/usePendingButton.js';
 
-const { ClassNameProvider } = createRecipeContext(actionButton);
 const ActionButton = React.forwardRef(
   ({ variant, size, loading = false, layout = "withText", className, children, ...otherProps }, ref) => {
     const recipeClassName = actionButton({ variant, layout, size });
@@ -17,7 +15,7 @@ const ActionButton = React.forwardRef(
         "When layout is 'iconOnly', 'aria-label' or 'aria-labelledby' should be provided."
       );
     }
-    return /* @__PURE__ */ jsx(ClassNameProvider, { value: recipeClassName, children: /* @__PURE__ */ jsx(PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsx(IconRequired, { enabled: layout === "iconOnly", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsx(IconRequired, { enabled: layout === "iconOnly", children: /* @__PURE__ */ jsx(
       Primitive.button,
       {
         ref,
@@ -26,7 +24,7 @@ const ActionButton = React.forwardRef(
         ...otherProps,
         children
       }
-    ) }) }) });
+    ) }) });
   }
 );
 ActionButton.displayName = "ActionButton";

package/lib/components/ActionChip/ActionChip.cjs

@@ -7,9 +7,9 @@ const reactPrimitive = require('@seed-design/react-primitive');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const Icon = require('../Icon/Icon.cjs');
 
-const { withProvider } = createRecipeContext.createRecipeContext(actionChip.actionChip);
+const { withContext } = createRecipeContext.createRecipeContext(actionChip.actionChip);
 const ActionChip = Icon.withIconRequired(
-  withProvider(reactPrimitive.Primitive.button),
+  withContext(reactPrimitive.Primitive.button),
   (props) => props.layout === "iconOnly"
 );
 ActionChip.displayName = "ActionChip";

package/lib/components/ActionChip/ActionChip.js

@@ -3,9 +3,9 @@ import { Primitive } from '@seed-design/react-primitive';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { withIconRequired } from '../Icon/Icon.js';
 
-const { withProvider } = createRecipeContext(actionChip);
+const { withContext } = createRecipeContext(actionChip);
 const ActionChip = withIconRequired(
-  withProvider(Primitive.button),
+  withContext(Primitive.button),
   (props) => props.layout === "iconOnly"
 );
 ActionChip.displayName = "ActionChip";

package/lib/components/ActionSheet/ActionSheet.cjs

@@ -11,7 +11,7 @@ const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 
 const { withRootProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(actionSheet.actionSheet);
-const { withProvider: withItemProvider } = createRecipeContext.createRecipeContext(actionSheetItem.actionSheetItem);
+const { withContext: withItemContext } = createRecipeContext.createRecipeContext(actionSheetItem.actionSheetItem);
 const withStateProps = createWithStateProps.createWithStateProps([reactDialog.useDialogContext]);
 const ActionSheetRoot = withRootProvider(reactDialog.Dialog.Root, {
   defaultProps: {
@@ -45,7 +45,7 @@ const ActionSheetList = withContext(
   withStateProps(reactPrimitive.Primitive.div),
   "list"
 );
-const ActionSheetItem = withItemProvider(
+const ActionSheetItem = withItemContext(
   withStateProps(reactPrimitive.Primitive.button)
 );
 const ActionSheetCloseButton = withContext(

package/lib/components/ActionSheet/ActionSheet.js

@@ -7,7 +7,7 @@ import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js'
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 
 const { withRootProvider, withContext } = createSlotRecipeContext(actionSheet);
-const { withProvider: withItemProvider } = createRecipeContext(actionSheetItem);
+const { withContext: withItemContext } = createRecipeContext(actionSheetItem);
 const withStateProps = createWithStateProps([useDialogContext]);
 const ActionSheetRoot = withRootProvider(Dialog.Root, {
   defaultProps: {
@@ -41,7 +41,7 @@ const ActionSheetList = withContext(
   withStateProps(Primitive.div),
   "list"
 );
-const ActionSheetItem = withItemProvider(
+const ActionSheetItem = withItemContext(
   withStateProps(Primitive.button)
 );
 const ActionSheetCloseButton = withContext(

package/lib/components/Badge/Badge.cjs

@@ -6,7 +6,7 @@ const reactPrimitive = require('@seed-design/react-primitive');
 const badge = require('@seed-design/css/recipes/badge');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 
-const { withProvider } = createRecipeContext.createRecipeContext(badge.badge);
-const Badge = withProvider(reactPrimitive.Primitive.span);
+const { withContext } = createRecipeContext.createRecipeContext(badge.badge);
+const Badge = withContext(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,oFAA4D,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,oFAA2D,CAAC"}

package/lib/components/Badge/Badge.js

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

package/lib/components/ControlChip/ControlChip.cjs

@@ -7,9 +7,9 @@ const reactPrimitive = require('@seed-design/react-primitive');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const Icon = require('../Icon/Icon.cjs');
 
-const { withProvider } = createRecipeContext.createRecipeContext(controlChip.controlChip);
+const { withContext } = createRecipeContext.createRecipeContext(controlChip.controlChip);
 const ControlChip = Icon.withIconRequired(
-  withProvider(reactPrimitive.Primitive.button),
+  withContext(reactPrimitive.Primitive.button),
   (props) => props.layout === "iconOnly"
 );
 

package/lib/components/ControlChip/ControlChip.js

@@ -3,9 +3,9 @@ import { Primitive } from '@seed-design/react-primitive';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { withIconRequired } from '../Icon/Icon.js';
 
-const { withProvider } = createRecipeContext(controlChip);
+const { withContext } = createRecipeContext(controlChip);
 const ControlChip = withIconRequired(
-  withProvider(Primitive.button),
+  withContext(Primitive.button),
   (props) => props.layout === "iconOnly"
 );
 

package/lib/components/ExtendedActionSheet/ExtendedActionSheet.cjs

@@ -11,7 +11,7 @@ const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 
 const { withRootProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(extendedActionSheet.extendedActionSheet);
-const { withProvider: withItemProvider } = createRecipeContext.createRecipeContext(extendedActionSheetItem.extendedActionSheetItem);
+const { withContext: withItemContext } = createRecipeContext.createRecipeContext(extendedActionSheetItem.extendedActionSheetItem);
 const withStateProps = createWithStateProps.createWithStateProps([reactDialog.useDialogContext]);
 const ExtendedActionSheetRoot = withRootProvider(
   reactDialog.Dialog.Root,
@@ -36,7 +36,7 @@ const ExtendedActionSheetGroup = withContext(
   withStateProps(reactPrimitive.Primitive.div),
   "group"
 );
-const ExtendedActionSheetItem = withItemProvider(withStateProps(reactPrimitive.Primitive.button));
+const ExtendedActionSheetItem = withItemContext(withStateProps(reactPrimitive.Primitive.button));
 const ExtendedActionSheetFooter = withContext(withStateProps(reactPrimitive.Primitive.div), "footer");
 const ExtendedActionSheetCloseButton = withContext(reactDialog.Dialog.CloseButton, "closeButton");
 

package/lib/components/ExtendedActionSheet/ExtendedActionSheet.js

@@ -7,7 +7,7 @@ import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js'
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 
 const { withRootProvider, withContext } = createSlotRecipeContext(extendedActionSheet);
-const { withProvider: withItemProvider } = createRecipeContext(extendedActionSheetItem);
+const { withContext: withItemContext } = createRecipeContext(extendedActionSheetItem);
 const withStateProps = createWithStateProps([useDialogContext]);
 const ExtendedActionSheetRoot = withRootProvider(
   Dialog.Root,
@@ -32,7 +32,7 @@ const ExtendedActionSheetGroup = withContext(
   withStateProps(Primitive.div),
   "group"
 );
-const ExtendedActionSheetItem = withItemProvider(withStateProps(Primitive.button));
+const ExtendedActionSheetItem = withItemContext(withStateProps(Primitive.button));
 const ExtendedActionSheetFooter = withContext(withStateProps(Primitive.div), "footer");
 const ExtendedActionSheetCloseButton = withContext(Dialog.CloseButton, "closeButton");
 

package/lib/components/ExtendedFab/ExtendedFab.cjs

@@ -6,8 +6,8 @@ const reactPrimitive = require('@seed-design/react-primitive');
 const extendedFab = require('@seed-design/css/recipes/extended-fab');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 
-const { withProvider } = createRecipeContext.createRecipeContext(extendedFab.extendedFab);
-const ExtendedFab = withProvider(reactPrimitive.Primitive.button, {
+const { withContext } = createRecipeContext.createRecipeContext(extendedFab.extendedFab);
+const ExtendedFab = withContext(reactPrimitive.Primitive.button, {
   defaultProps: {
     variant: "neutralSolid",
     size: "medium"

package/lib/components/ExtendedFab/ExtendedFab.js

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

package/lib/components/Fab/Fab.cjs

@@ -6,7 +6,7 @@ const reactPrimitive = require('@seed-design/react-primitive');
 const fab = require('@seed-design/css/recipes/fab');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 
-const { withProvider } = createRecipeContext.createRecipeContext(fab.fab);
-const Fab = withProvider(reactPrimitive.Primitive.button);
+const { withContext } = createRecipeContext.createRecipeContext(fab.fab);
+const Fab = withContext(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,oFAA8D,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,oFAA6D,CAAC"}

package/lib/components/Fab/Fab.js

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

package/lib/components/Icon/Icon.cjs

@@ -6,6 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const reactSlot = require('@radix-ui/react-slot');
 const reactUseLayoutEffect = require('@radix-ui/react-use-layout-effect');
 const React = require('react');
+const styled = require('../../utils/styled.cjs');
 
 const PrefixIcon = React.forwardRef(
   ({ svg, ...otherProps }, ref) => {
@@ -83,25 +84,33 @@ const IconRequired = ({
   }, [enabled, parentContext, register, unregister]);
   return /* @__PURE__ */ jsxRuntime.jsx(IconContext.Provider, { value: providerValue, children });
 };
-const Icon = React.forwardRef(({ svg, ...otherProps }, ref) => {
-  const context = React.useContext(IconContext);
-  reactUseLayoutEffect.useLayoutEffect(() => {
-    context?.register();
-    return () => {
-      context?.unregister();
-    };
-  }, [context]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactSlot.Slot,
-    {
-      ref,
-      "aria-hidden": true,
-      className: "seed-icon",
-      ...otherProps,
-      children: svg
-    }
-  );
-});
+const Icon = React.forwardRef(
+  ({ svg, size, color, ...otherProps }, ref) => {
+    const context = React.useContext(IconContext);
+    reactUseLayoutEffect.useLayoutEffect(() => {
+      context?.register();
+      return () => {
+        context?.unregister();
+      };
+    }, [context]);
+    const sizeValue = styled.handleDimension(size);
+    const colorValue = styled.handleColor(color);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactSlot.Slot,
+      {
+        ref,
+        "aria-hidden": true,
+        className: "seed-icon",
+        style: {
+          "--seed-icon-size": sizeValue,
+          "--seed-icon-color": colorValue
+        },
+        ...otherProps,
+        children: svg
+      }
+    );
+  }
+);
 function withIconRequired(Component, enabledPredicate) {
   const Node = React.forwardRef((props, ref) => {
     const enabled = enabledPredicate(props);

package/lib/components/Icon/Icon.d.ts

@@ -1,3 +1,4 @@
+import { ColorFg, ColorPalette, Dimension } from '@seed-design/css/vars';
 import { ForwardRefExoticComponent, RefAttributes, PropsWithoutRef } from 'react';
 export interface PrefixIconProps {
     svg: React.ReactNode;
@@ -13,6 +14,8 @@ export declare const IconRequired: ({ children, enabled, }: {
 }) => import("react/jsx-runtime").JSX.Element;
 export interface IconProps {
     svg: React.ReactNode;
+    size?: Dimension | string;
+    color?: `fg.${ColorFg}` | `palette.${ColorPalette}`;
 }
 export declare const Icon: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
 export declare function withIconRequired<P extends {}, R>(Component: React.ComponentType<P & React.RefAttributes<R>>, enabledPredicate: (props: React.PropsWithoutRef<P>) => boolean): ForwardRefExoticComponent< PropsWithoutRef<P> & RefAttributes<R>>;

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";AAIA,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2GAatB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2GAatB,CAAC;AAIF,eAAO,MAAM,YAAY,2BAGtB;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,4CAsDjD,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,IAAI,qGAoBf,CAAC;AAEH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,EAC9C,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAC1D,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,OAAO,oHAe/D"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAI9E,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2GAatB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2GAatB,CAAC;AAIF,eAAO,MAAM,YAAY,2BAGtB;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,4CAsDjD,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;IAErB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAE1B,KAAK,CAAC,EAAE,MAAM,OAAO,EAAE,GAAG,WAAW,YAAY,EAAE,CAAC;CACrD;AAED,eAAO,MAAM,IAAI,qGA+BhB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,EAC9C,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAC1D,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,OAAO,oHAe/D"}

package/lib/components/Icon/Icon.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { useLayoutEffect } from '@radix-ui/react-use-layout-effect';
 import { forwardRef, useContext, createContext, useRef, useCallback, useMemo } from 'react';
+import { handleDimension, handleColor } from '../../utils/styled.js';
 
 const PrefixIcon = forwardRef(
   ({ svg, ...otherProps }, ref) => {
@@ -79,25 +80,33 @@ const IconRequired = ({
   }, [enabled, parentContext, register, unregister]);
   return /* @__PURE__ */ jsx(IconContext.Provider, { value: providerValue, children });
 };
-const Icon = forwardRef(({ svg, ...otherProps }, ref) => {
-  const context = useContext(IconContext);
-  useLayoutEffect(() => {
-    context?.register();
-    return () => {
-      context?.unregister();
-    };
-  }, [context]);
-  return /* @__PURE__ */ jsx(
-    Slot,
-    {
-      ref,
-      "aria-hidden": true,
-      className: "seed-icon",
-      ...otherProps,
-      children: svg
-    }
-  );
-});
+const Icon = forwardRef(
+  ({ svg, size, color, ...otherProps }, ref) => {
+    const context = useContext(IconContext);
+    useLayoutEffect(() => {
+      context?.register();
+      return () => {
+        context?.unregister();
+      };
+    }, [context]);
+    const sizeValue = handleDimension(size);
+    const colorValue = handleColor(color);
+    return /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ref,
+        "aria-hidden": true,
+        className: "seed-icon",
+        style: {
+          "--seed-icon-size": sizeValue,
+          "--seed-icon-color": colorValue
+        },
+        ...otherProps,
+        children: svg
+      }
+    );
+  }
+);
 function withIconRequired(Component, enabledPredicate) {
   const Node = forwardRef((props, ref) => {
     const enabled = enabledPredicate(props);

package/lib/components/LinkContent/LinkContent.cjs

@@ -7,8 +7,8 @@ const reactPrimitive = require('@seed-design/react-primitive');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const styled = require('../../utils/styled.cjs');
 
-const { withProvider } = createRecipeContext.createRecipeContext(linkContent.linkContent);
-const LinkContent = withProvider(
+const { withContext } = createRecipeContext.createRecipeContext(linkContent.linkContent);
+const LinkContent = withContext(
   styled.withStyleProps(reactPrimitive.Primitive.span)
 );
 

package/lib/components/LinkContent/LinkContent.js

@@ -3,8 +3,8 @@ import { Primitive } from '@seed-design/react-primitive';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { withStyleProps } from '../../utils/styled.js';
 
-const { withProvider } = createRecipeContext(linkContent);
-const LinkContent = withProvider(
+const { withContext } = createRecipeContext(linkContent);
+const LinkContent = withContext(
   withStyleProps(Primitive.span)
 );
 

package/lib/components/MannerTemp/MannerTemp.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const mannerTemp = require('@seed-design/css/recipes/manner-temp');
+const reactPrimitive = require('@seed-design/react-primitive');
+const React = require('react');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
+const MannerTempEmote = require('./MannerTempEmote.cjs');
+
+const { withContext } = createRecipeContext.createRecipeContext(mannerTemp.mannerTemp);
+const MannerTempBase = withContext(reactPrimitive.Primitive.span);
+const MannerTemp = React.forwardRef((props, ref) => {
+  const emoteProps = React.useMemo(() => ({ level: props.level }), [props.level]);
+  return /* @__PURE__ */ jsxRuntime.jsx(MannerTempEmote.MannerTempEmotePropsProvider, { value: emoteProps, children: /* @__PURE__ */ jsxRuntime.jsx(MannerTempBase, { ...props, ref }) });
+});
+
+exports.MannerTemp = MannerTemp;

package/lib/components/MannerTemp/MannerTemp.d.ts

@@ -0,0 +1,7 @@
+import { MannerTempVariantProps } from '@seed-design/css/recipes/manner-temp';
+import { PrimitiveProps } from '@seed-design/react-primitive';
+import type * as React from "react";
+export interface MannerTempProps extends MannerTempVariantProps, PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare const MannerTemp: React.ForwardRefExoticComponent<MannerTempProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=MannerTemp.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MannerTemp.d.ts","sourceRoot":"","sources":["../../../src/components/MannerTemp/MannerTemp.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;AAOpC,MAAM,WAAW,eACf,SAAQ,sBAAsB,EAC5B,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAI5C,eAAO,MAAM,UAAU,yFAQrB,CAAC"}

package/lib/components/MannerTemp/MannerTemp.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { mannerTemp } from '@seed-design/css/recipes/manner-temp';
+import { Primitive } from '@seed-design/react-primitive';
+import { forwardRef, useMemo } from 'react';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
+import { MannerTempEmotePropsProvider } from './MannerTempEmote.js';
+
+const { withContext } = createRecipeContext(mannerTemp);
+const MannerTempBase = withContext(Primitive.span);
+const MannerTemp = forwardRef((props, ref) => {
+  const emoteProps = useMemo(() => ({ level: props.level }), [props.level]);
+  return /* @__PURE__ */ jsx(MannerTempEmotePropsProvider, { value: emoteProps, children: /* @__PURE__ */ jsx(MannerTempBase, { ...props, ref }) });
+});
+
+export { MannerTemp };