@seed-design/react 1.1.8 → 1.1.10

package/lib/components/Field/Field.cjs

@@ -75,25 +75,33 @@ const FieldErrorMessage = withContext(
   "errorMessage"
 );
 const FieldCharacterCount = React.forwardRef(
-  ({ current, max, ...otherProps }, ref) => {
+  ({ current, max, className, ...otherProps }, ref) => {
     const classNames = useClassNames();
     const { stateProps } = reactField.useFieldContext();
-    return /* @__PURE__ */ jsxRuntime.jsxs(reactPrimitive.Primitive.div, { ref, ...otherProps, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          ...current === 0 ? { "data-empty": true } : {},
-          ...current > max ? { "data-exceeded": true } : {},
-          className: classNames.characterCount,
-          ...stateProps,
-          children: current
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: classNames.maxCharacterCount, ...stateProps, children: [
-        "/",
-        max
-      ] })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactPrimitive.Primitive.div,
+      {
+        className: clsx(classNames.characterCountArea, className),
+        ref,
+        ...otherProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              ...current === 0 ? { "data-empty": true } : {},
+              ...current > max ? { "data-exceeded": true } : {},
+              className: classNames.characterCount,
+              ...stateProps,
+              children: current
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: classNames.maxCharacterCount, ...stateProps, children: [
+            "/",
+            max
+          ] })
+        ]
+      }
+    );
   }
 );
 

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

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/components/Field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,KAAK,EAAmB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAS,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAc/F,MAAM,WAAW,cAAe,SAAQ,iBAAiB,EAAE,KAAK,CAAC,SAAS;CAAG;AAE7E,eAAO,MAAM,SAAS,uFAAmE,CAAC;AAI1F,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjG,eAAO,MAAM,WAAW,yFAGvB,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,sBAAsB,EAAE,KAAK,CAAC,UAAU;CAAG;AAEpF,eAAO,MAAM,UAAU,0FAA4E,CAAC;AAEpG,MAAM,WAAW,uBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,kBAAkB,iGAG9B,CAAC;AAEF,MAAM,WAAW,2BAA4B,SAAQ,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC;CAAG;AAElF,eAAO,MAAM,sBAAsB,gHAyBlC,CAAC;AAIF,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjG,eAAO,MAAM,WAAW,yFAGvB,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,gBAAgB;CAAG;AAExE,eAAO,MAAM,gBAAgB,+FAG5B,CAAC;AAEF,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,iBAAiB;CAAG;AAE1E,eAAO,MAAM,iBAAiB,gGAG7B,CAAC;AAIF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,mBAAmB,iGAqB/B,CAAC"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/components/Field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,KAAK,EAAmB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAS,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAc/F,MAAM,WAAW,cAAe,SAAQ,iBAAiB,EAAE,KAAK,CAAC,SAAS;CAAG;AAE7E,eAAO,MAAM,SAAS,uFAAmE,CAAC;AAI1F,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjG,eAAO,MAAM,WAAW,yFAGvB,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,sBAAsB,EAAE,KAAK,CAAC,UAAU;CAAG;AAEpF,eAAO,MAAM,UAAU,0FAA4E,CAAC;AAEpG,MAAM,WAAW,uBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,kBAAkB,iGAG9B,CAAC;AAEF,MAAM,WAAW,2BAA4B,SAAQ,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC;CAAG;AAElF,eAAO,MAAM,sBAAsB,gHAyBlC,CAAC;AAIF,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjG,eAAO,MAAM,WAAW,yFAGvB,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,gBAAgB;CAAG;AAExE,eAAO,MAAM,gBAAgB,+FAG5B,CAAC;AAEF,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,iBAAiB;CAAG;AAE1E,eAAO,MAAM,iBAAiB,gGAG7B,CAAC;AAIF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,mBAAmB,iGAyB/B,CAAC"}

package/lib/components/Field/Field.js

@@ -71,25 +71,33 @@ const FieldErrorMessage = withContext(
   "errorMessage"
 );
 const FieldCharacterCount = forwardRef(
-  ({ current, max, ...otherProps }, ref) => {
+  ({ current, max, className, ...otherProps }, ref) => {
     const classNames = useClassNames();
     const { stateProps } = useFieldContext();
-    return /* @__PURE__ */ jsxs(Primitive.div, { ref, ...otherProps, children: [
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          ...current === 0 ? { "data-empty": true } : {},
-          ...current > max ? { "data-exceeded": true } : {},
-          className: classNames.characterCount,
-          ...stateProps,
-          children: current
-        }
-      ),
-      /* @__PURE__ */ jsxs("span", { className: classNames.maxCharacterCount, ...stateProps, children: [
-        "/",
-        max
-      ] })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      Primitive.div,
+      {
+        className: clsx(classNames.characterCountArea, className),
+        ref,
+        ...otherProps,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ...current === 0 ? { "data-empty": true } : {},
+              ...current > max ? { "data-exceeded": true } : {},
+              className: classNames.characterCount,
+              ...stateProps,
+              children: current
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: classNames.maxCharacterCount, ...stateProps, children: [
+            "/",
+            max
+          ] })
+        ]
+      }
+    );
   }
 );
 

package/lib/components/PageBanner/PageBanner.cjs

@@ -3,15 +3,26 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
 const pageBanner = require('@seed-design/css/recipes/page-banner');
 const reactPrimitive = require('@seed-design/react-primitive');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const useDismissible = require('../private/useDismissible.cjs');
+const clsx = require('clsx');
 
-const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(pageBanner.pageBanner);
-const PageBannerRoot = withProvider(
-  useDismissible.DismissibleRoot,
-  "root"
+const { withContext, ClassNamesProvider } = createSlotRecipeContext.createSlotRecipeContext(pageBanner.pageBanner);
+const PageBannerRoot = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    if (props.variant === "solid" && props.tone === "magic") {
+      console.error(
+        `\`${props.tone}\` tone is not available for \`${props.variant}\` variant in PageBanner components. Please use variant="weak" or a different tone instead.`
+      );
+    }
+    const [variantProps, otherProps] = pageBanner.pageBanner.splitVariantProps(props);
+    const classNames = pageBanner.pageBanner(variantProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(useDismissible.DismissibleRoot, { className: clsx(classNames.root, className), ref, ...otherProps }) });
+  }
 );
 const PageBannerContent = withContext(
   reactPrimitive.Primitive.div,

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

@@ -1 +1 @@
-{"version":3,"file":"PageBanner.d.ts","sourceRoot":"","sources":["../../../src/components/PageBanner/PageBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAC/F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,2BAA2B,CAAC;AAInC,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB,EAAE,oBAAoB;CAAG;AAE5F,eAAO,MAAM,cAAc,4FAG1B,CAAC;AAEF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,+FAG7B,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEpG,eAAO,MAAM,cAAc,4FAG1B,CAAC;AAEF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,8FAG3B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,qBAAqB,oGAGjC,CAAC;AAEF,MAAM,WAAW,qBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,gBAAgB,iGAG5B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,qBAAqB,sGAGjC,CAAC"}
+{"version":3,"file":"PageBanner.d.ts","sourceRoot":"","sources":["../../../src/components/PageBanner/PageBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAC/F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,2BAA2B,CAAC;AAKnC,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB,EAAE,oBAAoB;CAAG;AAE5F,eAAO,MAAM,cAAc,4FAiB1B,CAAC;AAuBF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,+FAG7B,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEpG,eAAO,MAAM,cAAc,4FAG1B,CAAC;AAEF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,8FAG3B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,qBAAqB,oGAGjC,CAAC;AAEF,MAAM,WAAW,qBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,gBAAgB,iGAG5B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,qBAAqB,sGAGjC,CAAC"}

package/lib/components/PageBanner/PageBanner.js

@@ -1,13 +1,24 @@
 'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import { pageBanner } from '@seed-design/css/recipes/page-banner';
 import { Primitive } from '@seed-design/react-primitive';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { DismissibleCloseButton, DismissibleRoot } from '../private/useDismissible.js';
+import clsx from 'clsx';
 
-const { withContext, withProvider } = createSlotRecipeContext(pageBanner);
-const PageBannerRoot = withProvider(
-  DismissibleRoot,
-  "root"
+const { withContext, ClassNamesProvider } = createSlotRecipeContext(pageBanner);
+const PageBannerRoot = forwardRef(
+  ({ className, ...props }, ref) => {
+    if (props.variant === "solid" && props.tone === "magic") {
+      console.error(
+        `\`${props.tone}\` tone is not available for \`${props.variant}\` variant in PageBanner components. Please use variant="weak" or a different tone instead.`
+      );
+    }
+    const [variantProps, otherProps] = pageBanner.splitVariantProps(props);
+    const classNames = pageBanner(variantProps);
+    return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(DismissibleRoot, { className: clsx(classNames.root, className), ref, ...otherProps }) });
+  }
 );
 const PageBannerContent = withContext(
   Primitive.div,

package/lib/components/TagGroup/TagGroup.cjs

@@ -18,10 +18,13 @@ const TagGroupRoot = React.forwardRef(
   ({ className, children, separator = " · ", ...props }, ref) => {
     const [{ tagGroup: tagGroupVariantProps, tagGroupItem: tagGroupItemVariantProps }, otherProps] = splitMultipleVariantsProps.splitMultipleVariantsProps(props, { tagGroup: tagGroup.tagGroup, tagGroupItem: tagGroupItem.tagGroupItem });
     const classNames = tagGroup.tagGroup(tagGroupVariantProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(PropsProvider, { value: tagGroupItemVariantProps, children: /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.span, { ref, className: clsx(classNames.root, className), ...otherProps, children: React.Children.map(children, (child, index) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      index > 0 && /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.span, { "aria-hidden": true, className: classNames.separator, children: separator }),
-      child
-    ] })) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(PropsProvider, { value: tagGroupItemVariantProps, children: /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.span, { ref, className: clsx(classNames.root, className), ...otherProps, children: React.Children.toArray(children).filter((child) => child !== null && child !== void 0).map((child, index) => (
+      // biome-ignore lint/suspicious/noArrayIndexKey: those fragments won't change order
+      /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+        index > 0 && /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.span, { "aria-hidden": true, className: classNames.separator, children: separator }),
+        child
+      ] }, index)
+    )) }) });
   }
 );
 const TagGroupItem = React.forwardRef((props, ref) => {

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

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AACzF,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,yCAAyC,CAAC;AASjD,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAC1B,wBAAwB,EACxB,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,+GAuBxB,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,YAAY,+GAOvB,CAAC"}
+{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AACzF,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,yCAAyC,CAAC;AASjD,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAC1B,wBAAwB,EACxB,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,+GA0BxB,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,YAAY,+GAOvB,CAAC"}

package/lib/components/TagGroup/TagGroup.js

@@ -1,10 +1,10 @@
 'use client';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Primitive } from '@seed-design/react-primitive';
 import { tagGroup } from '@seed-design/css/recipes/tag-group';
 import { tagGroupItem } from '@seed-design/css/recipes/tag-group-item';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
-import { forwardRef, Children } from 'react';
+import { forwardRef, Children, Fragment } from 'react';
 import clsx from 'clsx';
 import { splitMultipleVariantsProps } from '../../utils/splitMultipleVariantsProps.js';
 import { mergeProps } from '@seed-design/dom-utils';
@@ -14,10 +14,13 @@ const TagGroupRoot = forwardRef(
   ({ className, children, separator = " · ", ...props }, ref) => {
     const [{ tagGroup: tagGroupVariantProps, tagGroupItem: tagGroupItemVariantProps }, otherProps] = splitMultipleVariantsProps(props, { tagGroup, tagGroupItem });
     const classNames = tagGroup(tagGroupVariantProps);
-    return /* @__PURE__ */ jsx(PropsProvider, { value: tagGroupItemVariantProps, children: /* @__PURE__ */ jsx(Primitive.span, { ref, className: clsx(classNames.root, className), ...otherProps, children: Children.map(children, (child, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      index > 0 && /* @__PURE__ */ jsx(Primitive.span, { "aria-hidden": true, className: classNames.separator, children: separator }),
-      child
-    ] })) }) });
+    return /* @__PURE__ */ jsx(PropsProvider, { value: tagGroupItemVariantProps, children: /* @__PURE__ */ jsx(Primitive.span, { ref, className: clsx(classNames.root, className), ...otherProps, children: Children.toArray(children).filter((child) => child !== null && child !== void 0).map((child, index) => (
+      // biome-ignore lint/suspicious/noArrayIndexKey: those fragments won't change order
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        index > 0 && /* @__PURE__ */ jsx(Primitive.span, { "aria-hidden": true, className: classNames.separator, children: separator }),
+        child
+      ] }, index)
+    )) }) });
   }
 );
 const TagGroupItem = forwardRef((props, ref) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -57,13 +57,14 @@
     "@seed-design/react-slider": "1.0.1",
     "@seed-design/react-snackbar": "1.0.0",
     "@seed-design/react-switch": "1.0.1",
-    "@seed-design/react-tabs": "1.0.1",
+    "@seed-design/react-tabs": "1.0.2",
     "@seed-design/react-text-field": "1.1.1",
     "@seed-design/react-toggle": "1.0.0",
     "clsx": "^2.1.1",
     "unicode-segmenter": "^0.14.0"
   },
   "peerDependencies": {
+    "@seed-design/css": ">=1.1.10",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },

package/src/components/Field/Field.tsx

@@ -113,12 +113,16 @@ export interface FieldCharacterCountProps
 }
 
 export const FieldCharacterCount = forwardRef<HTMLDivElement, FieldCharacterCountProps>(
-  ({ current, max, ...otherProps }, ref) => {
+  ({ current, max, className, ...otherProps }, ref) => {
     const classNames = useClassNames();
     const { stateProps } = useFieldContext();
 
     return (
-      <Primitive.div ref={ref} {...otherProps}>
+      <Primitive.div
+        className={clsx(classNames.characterCountArea, className)}
+        ref={ref}
+        {...otherProps}
+      >
         <span
           {...(current === 0 ? { "data-empty": true } : {})}
           {...(current > max ? { "data-exceeded": true } : {})}

package/src/components/PageBanner/PageBanner.tsx

@@ -1,4 +1,5 @@
 import type * as React from "react";
+import { forwardRef } from "react";
 
 import { pageBanner, type PageBannerVariantProps } from "@seed-design/css/recipes/page-banner";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
@@ -8,16 +9,52 @@ import {
   DismissibleRoot,
   type DismissibleRootProps,
 } from "../private/useDismissible";
+import clsx from "clsx";
 
-const { withContext, withProvider } = createSlotRecipeContext(pageBanner);
+const { withContext, ClassNamesProvider } = createSlotRecipeContext(pageBanner);
 
 export interface PageBannerRootProps extends PageBannerVariantProps, DismissibleRootProps {}
 
-export const PageBannerRoot = withProvider<HTMLDivElement, PageBannerRootProps>(
-  DismissibleRoot,
-  "root",
+export const PageBannerRoot = forwardRef<HTMLDivElement, PageBannerRootProps>(
+  ({ className, ...props }, ref) => {
+    if (props.variant === "solid" && props.tone === "magic") {
+      console.error(
+        `\`${props.tone}\` tone is not available for \`${props.variant}\` variant in PageBanner components. Please use variant="weak" or a different tone instead.`,
+      );
+    }
+
+    const [variantProps, otherProps] = pageBanner.splitVariantProps(props);
+    const classNames = pageBanner(variantProps);
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <DismissibleRoot className={clsx(classNames.root, className)} ref={ref} {...otherProps} />
+      </ClassNamesProvider>
+    );
+  },
 );
 
+// Use these instead when ts implements this:
+// Control flow analysis for destructured rest element of discriminated union
+// https://github.com/microsoft/TypeScript/issues/15300
+
+// export type PageBannerRootProps = DismissibleRootProps &
+//   (
+//     | {
+//         variant?: Exclude<PageBannerVariantProps["variant"], "solid">;
+//         tone?: PageBannerVariantProps["tone"];
+//       }
+//     | {
+//         variant: Extract<PageBannerVariantProps["variant"], "solid">;
+//         tone?: Exclude<PageBannerVariantProps["tone"], "magic">;
+//       }
+//   );
+
+// export const PageBannerRoot = withProvider<HTMLDivElement, PageBannerRootProps>(
+//   DismissibleRoot,
+//   "root",
+// );
+
 export interface PageBannerContentProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLDivElement> {}

package/src/components/TagGroup/TagGroup.tsx

@@ -5,7 +5,7 @@ import {
   type TagGroupItemVariantProps,
 } from "@seed-design/css/recipes/tag-group-item";
 import { createRecipeContext } from "../../utils/createRecipeContext";
-import { forwardRef, Children } from "react";
+import { forwardRef, Children, Fragment } from "react";
 import clsx from "clsx";
 import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
 import { mergeProps } from "@seed-design/dom-utils";
@@ -29,16 +29,19 @@ export const TagGroupRoot = forwardRef<HTMLSpanElement, TagGroupRootProps>(
     return (
       <PropsProvider value={tagGroupItemVariantProps}>
         <Primitive.span ref={ref} className={clsx(classNames.root, className)} {...otherProps}>
-          {Children.map(children, (child, index) => (
-            <>
-              {index > 0 && (
-                <Primitive.span aria-hidden className={classNames.separator}>
-                  {separator}
-                </Primitive.span>
-              )}
-              {child}
-            </>
-          ))}
+          {Children.toArray(children)
+            .filter((child) => child !== null && child !== undefined)
+            .map((child, index) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: those fragments won't change order
+              <Fragment key={index}>
+                {index > 0 && (
+                  <Primitive.span aria-hidden className={classNames.separator}>
+                    {separator}
+                  </Primitive.span>
+                )}
+                {child}
+              </Fragment>
+            ))}
         </Primitive.span>
       </PropsProvider>
     );