@seed-design/react 1.1.17 → 1.2.0

package/lib/components/RadioGroupField/RadioGroupField.cjs

@@ -0,0 +1,79 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const field = require('@seed-design/css/recipes/field');
+const fieldLabel = require('@seed-design/css/recipes/field-label');
+const reactPrimitive = require('@seed-design/react-primitive');
+const reactRadioGroup = require('@seed-design/react-radio-group');
+const React = require('react');
+const clsx = require('clsx');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
+const Icon = require('../private/Icon.cjs');
+
+const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(field.field);
+const {
+  withContext: withLabelContext,
+  withProvider: withLabelProvider,
+  useClassNames: useLabelClassNames
+} = createSlotRecipeContext.createSlotRecipeContext(fieldLabel.fieldLabel);
+const RadioGroupFieldRoot = withProvider(
+  reactRadioGroup.RadioGroup.Root,
+  "root"
+);
+const RadioGroupFieldHeader = withContext(
+  reactPrimitive.Primitive.div,
+  "header"
+);
+const RadioGroupFieldLabel = withLabelProvider(
+  reactRadioGroup.RadioGroup.Label,
+  "root"
+);
+const RadioGroupFieldIndicatorText = withLabelContext(reactPrimitive.Primitive.span, "indicatorText");
+const RadioGroupFieldRequiredIndicator = React.forwardRef(({ className, ...props }, ref) => {
+  const { indicatorIcon } = useLabelClassNames();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Icon.InternalIcon,
+    {
+      svg: (
+        // biome-ignore lint/a11y/noSvgWithoutTitle: InternalIcon is aria-hidden
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            viewBox: "0 0 6 6",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            className: clsx(indicatorIcon, className),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M3.75002 1.55859L4.41318 1.09468C4.75243 0.857361 5.21982 0.939865 5.45732 1.27899C5.69499 1.61836 5.61243 2.08615 5.27295 2.32366L4.30763 2.99902L5.27372 3.67612C5.61285 3.91381 5.69517 4.38137 5.45761 4.72059C5.21999 5.0599 4.7523 5.14233 4.41299 4.90471L3.75002 4.44043V5.25C3.75002 5.66421 3.41423 6 3.00002 6C2.5858 6 2.25002 5.66421 2.25002 5.25V4.44043L1.58704 4.90471C1.24773 5.14233 0.780041 5.0599 0.542418 4.72059C0.304856 4.38137 0.387176 3.91381 0.726309 3.67612L1.6924 2.99902L0.727079 2.32366C0.387603 2.08615 0.305043 1.61836 0.542707 1.27899C0.780206 0.939865 1.2476 0.857361 1.58685 1.09468L2.25002 1.55859V0.75C2.25002 0.335786 2.5858 0 3.00002 0C3.41423 0 3.75002 0.335786 3.75002 0.75V1.55859Z",
+                fill: "currentColor"
+              }
+            )
+          }
+        )
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+RadioGroupFieldRequiredIndicator.displayName = "RadioGroupFieldRequiredIndicator";
+const RadioGroupFieldFooter = withContext(
+  reactPrimitive.Primitive.div,
+  "footer"
+);
+const RadioGroupFieldDescription = withContext(reactRadioGroup.RadioGroup.Description, "description");
+const RadioGroupFieldErrorMessage = withContext(reactRadioGroup.RadioGroup.ErrorMessage, "errorMessage");
+
+exports.RadioGroupFieldDescription = RadioGroupFieldDescription;
+exports.RadioGroupFieldErrorMessage = RadioGroupFieldErrorMessage;
+exports.RadioGroupFieldFooter = RadioGroupFieldFooter;
+exports.RadioGroupFieldHeader = RadioGroupFieldHeader;
+exports.RadioGroupFieldIndicatorText = RadioGroupFieldIndicatorText;
+exports.RadioGroupFieldLabel = RadioGroupFieldLabel;
+exports.RadioGroupFieldRequiredIndicator = RadioGroupFieldRequiredIndicator;
+exports.RadioGroupFieldRoot = RadioGroupFieldRoot;

package/lib/components/RadioGroupField/RadioGroupField.d.ts

@@ -0,0 +1,30 @@
+import { FieldVariantProps } from '@seed-design/css/recipes/field';
+import { FieldLabelVariantProps } from '@seed-design/css/recipes/field-label';
+import { PrimitiveProps } from '@seed-design/react-primitive';
+import { RadioGroup as RadioGroupPrimitive } from '@seed-design/react-radio-group';
+import type * as React from "react";
+export interface RadioGroupFieldRootProps extends FieldVariantProps, RadioGroupPrimitive.RootProps {
+}
+export declare const RadioGroupFieldRoot: React.ForwardRefExoticComponent<RadioGroupFieldRootProps & React.RefAttributes<HTMLDivElement>>;
+export interface RadioGroupFieldHeaderProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const RadioGroupFieldHeader: React.ForwardRefExoticComponent<RadioGroupFieldHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface RadioGroupFieldLabelProps extends FieldLabelVariantProps, RadioGroupPrimitive.LabelProps {
+}
+export declare const RadioGroupFieldLabel: React.ForwardRefExoticComponent<RadioGroupFieldLabelProps & React.RefAttributes<HTMLDivElement>>;
+export interface RadioGroupFieldIndicatorTextProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare const RadioGroupFieldIndicatorText: React.ForwardRefExoticComponent<RadioGroupFieldIndicatorTextProps & React.RefAttributes<HTMLSpanElement>>;
+export interface RadioGroupFieldRequiredIndicatorProps extends React.SVGProps<SVGElement> {
+}
+export declare const RadioGroupFieldRequiredIndicator: React.ForwardRefExoticComponent<Omit<RadioGroupFieldRequiredIndicatorProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export interface RadioGroupFieldFooterProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const RadioGroupFieldFooter: React.ForwardRefExoticComponent<RadioGroupFieldFooterProps & React.RefAttributes<HTMLDivElement>>;
+export interface RadioGroupFieldDescriptionProps extends RadioGroupPrimitive.DescriptionProps {
+}
+export declare const RadioGroupFieldDescription: React.ForwardRefExoticComponent<RadioGroupFieldDescriptionProps & React.RefAttributes<HTMLSpanElement>>;
+export interface RadioGroupFieldErrorMessageProps extends RadioGroupPrimitive.ErrorMessageProps {
+}
+export declare const RadioGroupFieldErrorMessage: React.ForwardRefExoticComponent<RadioGroupFieldErrorMessageProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=RadioGroupField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupField.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroupField/RadioGroupField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAC/F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACnF,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAepC,MAAM,WAAW,wBACf,SAAQ,iBAAiB,EACvB,mBAAmB,CAAC,SAAS;CAAG;AAEpC,eAAO,MAAM,mBAAmB,iGAG/B,CAAC;AAIF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,mGAGjC,CAAC;AAEF,MAAM,WAAW,yBACf,SAAQ,sBAAsB,EAC5B,mBAAmB,CAAC,UAAU;CAAG;AAErC,eAAO,MAAM,oBAAoB,kGAGhC,CAAC;AAEF,MAAM,WAAW,iCACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,4BAA4B,2GAGP,CAAC;AAEnC,MAAM,WAAW,qCAAsC,SAAQ,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC;CAAG;AAE5F,eAAO,MAAM,gCAAgC,0HA0B3C,CAAC;AAKH,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,mGAGjC,CAAC;AAEF,MAAM,WAAW,+BAAgC,SAAQ,mBAAmB,CAAC,gBAAgB;CAAG;AAEhG,eAAO,MAAM,0BAA0B,yGAGU,CAAC;AAElD,MAAM,WAAW,gCAAiC,SAAQ,mBAAmB,CAAC,iBAAiB;CAAG;AAElG,eAAO,MAAM,2BAA2B,yGAGW,CAAC"}

package/lib/components/RadioGroupField/RadioGroupField.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { field } from '@seed-design/css/recipes/field';
+import { fieldLabel } from '@seed-design/css/recipes/field-label';
+import { Primitive } from '@seed-design/react-primitive';
+import { RadioGroup } from '@seed-design/react-radio-group';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
+import { InternalIcon } from '../private/Icon.js';
+
+const { withProvider, withContext } = createSlotRecipeContext(field);
+const {
+  withContext: withLabelContext,
+  withProvider: withLabelProvider,
+  useClassNames: useLabelClassNames
+} = createSlotRecipeContext(fieldLabel);
+const RadioGroupFieldRoot = withProvider(
+  RadioGroup.Root,
+  "root"
+);
+const RadioGroupFieldHeader = withContext(
+  Primitive.div,
+  "header"
+);
+const RadioGroupFieldLabel = withLabelProvider(
+  RadioGroup.Label,
+  "root"
+);
+const RadioGroupFieldIndicatorText = withLabelContext(Primitive.span, "indicatorText");
+const RadioGroupFieldRequiredIndicator = forwardRef(({ className, ...props }, ref) => {
+  const { indicatorIcon } = useLabelClassNames();
+  return /* @__PURE__ */ jsx(
+    InternalIcon,
+    {
+      svg: (
+        // biome-ignore lint/a11y/noSvgWithoutTitle: InternalIcon is aria-hidden
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 6 6",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            className: clsx(indicatorIcon, className),
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M3.75002 1.55859L4.41318 1.09468C4.75243 0.857361 5.21982 0.939865 5.45732 1.27899C5.69499 1.61836 5.61243 2.08615 5.27295 2.32366L4.30763 2.99902L5.27372 3.67612C5.61285 3.91381 5.69517 4.38137 5.45761 4.72059C5.21999 5.0599 4.7523 5.14233 4.41299 4.90471L3.75002 4.44043V5.25C3.75002 5.66421 3.41423 6 3.00002 6C2.5858 6 2.25002 5.66421 2.25002 5.25V4.44043L1.58704 4.90471C1.24773 5.14233 0.780041 5.0599 0.542418 4.72059C0.304856 4.38137 0.387176 3.91381 0.726309 3.67612L1.6924 2.99902L0.727079 2.32366C0.387603 2.08615 0.305043 1.61836 0.542707 1.27899C0.780206 0.939865 1.2476 0.857361 1.58685 1.09468L2.25002 1.55859V0.75C2.25002 0.335786 2.5858 0 3.00002 0C3.41423 0 3.75002 0.335786 3.75002 0.75V1.55859Z",
+                fill: "currentColor"
+              }
+            )
+          }
+        )
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+RadioGroupFieldRequiredIndicator.displayName = "RadioGroupFieldRequiredIndicator";
+const RadioGroupFieldFooter = withContext(
+  Primitive.div,
+  "footer"
+);
+const RadioGroupFieldDescription = withContext(RadioGroup.Description, "description");
+const RadioGroupFieldErrorMessage = withContext(RadioGroup.ErrorMessage, "errorMessage");
+
+export { RadioGroupFieldDescription, RadioGroupFieldErrorMessage, RadioGroupFieldFooter, RadioGroupFieldHeader, RadioGroupFieldIndicatorText, RadioGroupFieldLabel, RadioGroupFieldRequiredIndicator, RadioGroupFieldRoot };

package/lib/components/RadioGroupField/RadioGroupField.namespace.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const RadioGroupField = require('./RadioGroupField.cjs');
+
+
+
+exports.Description = RadioGroupField.RadioGroupFieldDescription;
+exports.ErrorMessage = RadioGroupField.RadioGroupFieldErrorMessage;
+exports.Footer = RadioGroupField.RadioGroupFieldFooter;
+exports.Header = RadioGroupField.RadioGroupFieldHeader;
+exports.IndicatorText = RadioGroupField.RadioGroupFieldIndicatorText;
+exports.Label = RadioGroupField.RadioGroupFieldLabel;
+exports.RequiredIndicator = RadioGroupField.RadioGroupFieldRequiredIndicator;
+exports.Root = RadioGroupField.RadioGroupFieldRoot;

package/lib/components/RadioGroupField/RadioGroupField.namespace.d.ts

@@ -0,0 +1,2 @@
+export { RadioGroupFieldRoot as Root, RadioGroupFieldHeader as Header, RadioGroupFieldLabel as Label, RadioGroupFieldIndicatorText as IndicatorText, RadioGroupFieldRequiredIndicator as RequiredIndicator, RadioGroupFieldFooter as Footer, RadioGroupFieldDescription as Description, RadioGroupFieldErrorMessage as ErrorMessage, type RadioGroupFieldRootProps as RootProps, type RadioGroupFieldHeaderProps as HeaderProps, type RadioGroupFieldLabelProps as LabelProps, type RadioGroupFieldIndicatorTextProps as IndicatorTextProps, type RadioGroupFieldRequiredIndicatorProps as RequiredIndicatorProps, type RadioGroupFieldFooterProps as FooterProps, type RadioGroupFieldDescriptionProps as DescriptionProps, type RadioGroupFieldErrorMessageProps as ErrorMessageProps, } from './RadioGroupField';
+//# sourceMappingURL=RadioGroupField.namespace.d.ts.map

package/lib/components/RadioGroupField/RadioGroupField.namespace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupField.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroupField/RadioGroupField.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,IAAI,IAAI,EAC3B,qBAAqB,IAAI,MAAM,EAC/B,oBAAoB,IAAI,KAAK,EAC7B,4BAA4B,IAAI,aAAa,EAC7C,gCAAgC,IAAI,iBAAiB,EACrD,qBAAqB,IAAI,MAAM,EAC/B,0BAA0B,IAAI,WAAW,EACzC,2BAA2B,IAAI,YAAY,EAC3C,KAAK,wBAAwB,IAAI,SAAS,EAC1C,KAAK,0BAA0B,IAAI,WAAW,EAC9C,KAAK,yBAAyB,IAAI,UAAU,EAC5C,KAAK,iCAAiC,IAAI,kBAAkB,EAC5D,KAAK,qCAAqC,IAAI,sBAAsB,EACpE,KAAK,0BAA0B,IAAI,WAAW,EAC9C,KAAK,+BAA+B,IAAI,gBAAgB,EACxD,KAAK,gCAAgC,IAAI,iBAAiB,GAC3D,MAAM,mBAAmB,CAAC"}

package/lib/components/RadioGroupField/RadioGroupField.namespace.js

@@ -0,0 +1 @@
+export { RadioGroupFieldDescription as Description, RadioGroupFieldErrorMessage as ErrorMessage, RadioGroupFieldFooter as Footer, RadioGroupFieldHeader as Header, RadioGroupFieldIndicatorText as IndicatorText, RadioGroupFieldLabel as Label, RadioGroupFieldRequiredIndicator as RequiredIndicator, RadioGroupFieldRoot as Root } from './RadioGroupField.js';

package/lib/components/RadioGroupField/index.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const RadioGroupField = require('./RadioGroupField.cjs');
+const RadioGroupField_namespace = require('./RadioGroupField.namespace.cjs');
+
+
+
+exports.RadioGroupFieldDescription = RadioGroupField.RadioGroupFieldDescription;
+exports.RadioGroupFieldErrorMessage = RadioGroupField.RadioGroupFieldErrorMessage;
+exports.RadioGroupFieldFooter = RadioGroupField.RadioGroupFieldFooter;
+exports.RadioGroupFieldHeader = RadioGroupField.RadioGroupFieldHeader;
+exports.RadioGroupFieldIndicatorText = RadioGroupField.RadioGroupFieldIndicatorText;
+exports.RadioGroupFieldLabel = RadioGroupField.RadioGroupFieldLabel;
+exports.RadioGroupFieldRequiredIndicator = RadioGroupField.RadioGroupFieldRequiredIndicator;
+exports.RadioGroupFieldRoot = RadioGroupField.RadioGroupFieldRoot;
+exports.RadioGroupField = RadioGroupField_namespace;

package/lib/components/RadioGroupField/index.d.ts

@@ -0,0 +1,3 @@
+export * from './RadioGroupField';
+export * as RadioGroupField from './RadioGroupField.namespace';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/RadioGroupField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroupField/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,OAAO,KAAK,eAAe,MAAM,6BAA6B,CAAC"}

package/lib/components/RadioGroupField/index.js

@@ -0,0 +1,3 @@
+export { RadioGroupFieldDescription, RadioGroupFieldErrorMessage, RadioGroupFieldFooter, RadioGroupFieldHeader, RadioGroupFieldIndicatorText, RadioGroupFieldLabel, RadioGroupFieldRequiredIndicator, RadioGroupFieldRoot } from './RadioGroupField.js';
+import * as RadioGroupField_namespace from './RadioGroupField.namespace.js';
+export { RadioGroupField_namespace as RadioGroupField };

package/lib/components/SelectBox/CheckSelectBox.cjs

@@ -4,37 +4,146 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const reactComposeRefs = require('@radix-ui/react-compose-refs');
 const selectBox = require('@seed-design/css/recipes/select-box');
+const selectBoxCheckmark = require('@seed-design/css/recipes/selectBoxCheckmark');
 const selectBoxGroup = require('@seed-design/css/recipes/select-box-group');
 const reactCheckbox = require('@seed-design/react-checkbox');
+const reactCollapsible = require('@seed-design/react-collapsible');
 const reactPrimitive = require('@seed-design/react-primitive');
+const clsx = require('clsx');
 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 { withContext: withGroupContext } = createRecipeContext.createRecipeContext(selectBoxGroup.selectBoxGroup);
-const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(selectBox.selectBox);
+const { PropsProvider, ClassNamesProvider, withContext, useProps, useClassNames } = createSlotRecipeContext.createSlotRecipeContext(selectBox.selectBox);
 const withStateProps = createWithStateProps.createWithStateProps([reactCheckbox.useCheckboxContext]);
-const CheckSelectBoxGroup = withGroupContext(
-  React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref, role: "group", ...props }))
+const FooterContext = React.createContext(null);
+const CheckSelectBoxGroup = React.forwardRef(
+  ({ columns = 1, className, style, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBoxGroup.selectBoxGroup.splitVariantProps(props);
+    const recipeClassName = selectBoxGroup.selectBoxGroup(variantProps);
+    const layout = columns === 1 ? "horizontal" : "vertical";
+    return /* @__PURE__ */ jsxRuntime.jsx(PropsProvider, { value: { layout }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactPrimitive.Primitive.div,
+      {
+        ref,
+        "data-columns": columns,
+        className: clsx(recipeClassName, className),
+        style: {
+          ...style,
+          "--seed-select-box-group--columns": columns
+        },
+        ...otherProps
+      }
+    ) });
+  }
 );
-const CheckSelectBoxRoot = withProvider(
-  reactCheckbox.Checkbox.Root,
-  "root"
+function FooterVisibilityProvider({
+  children,
+  footerVisibility
+}) {
+  const { checked } = reactCheckbox.useCheckboxContext();
+  const collapsible = reactCollapsible.useCollapsible({
+    open: {
+      "when-selected": checked,
+      "when-not-selected": !checked
+    }[footerVisibility]
+  });
+  const [isFooterRendered, setIsFooterRendered] = React.useState(false);
+  const footerRef = React.useCallback((node) => {
+    setIsFooterRendered(!!node);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactCollapsible.CollapsibleProvider, { value: collapsible, children: /* @__PURE__ */ jsxRuntime.jsx(FooterContext.Provider, { value: { isFooterRendered, footerRef, footerVisibility }, children }) });
+}
+const CheckSelectBoxRoot = React.forwardRef(
+  ({ footerVisibility = "when-selected", className, children, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBox.selectBox.splitVariantProps(props);
+    const classNames = selectBox.selectBox({
+      ...useProps(),
+      ...variantProps
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactCheckbox.Checkbox.Root,
+      {
+        ref,
+        className: clsx(classNames.root, className),
+        ...otherProps,
+        children: footerVisibility === "always" ? children : /* @__PURE__ */ jsxRuntime.jsx(FooterVisibilityProvider, { footerVisibility, children })
+      }
+    ) });
+  }
+);
+const CheckSelectBoxTrigger = withContext(
+  withStateProps(reactPrimitive.Primitive.div),
+  "trigger"
 );
 const CheckSelectBoxContent = withContext(
   withStateProps(reactPrimitive.Primitive.div),
   "content"
 );
+const CheckSelectBoxBody = withContext(
+  withStateProps(reactPrimitive.Primitive.div),
+  "body"
+);
 const CheckSelectBoxLabel = withContext(
   withStateProps(reactPrimitive.Primitive.div),
   "label"
 );
 const CheckSelectBoxDescription = withContext(withStateProps(reactPrimitive.Primitive.div), "description");
+const { withProvider: withCheckmarkProvider, withContext: withCheckmarkContext } = createSlotRecipeContext.createSlotRecipeContext(selectBoxCheckmark.selectBoxCheckmark);
+const withCheckmarkStateProps = createWithStateProps.createWithStateProps([reactCheckbox.useCheckboxContext]);
+const CheckSelectBoxCheckmarkControl = withCheckmarkProvider(reactCheckbox.Checkbox.Control, "root");
+const CheckSelectBoxCheckmarkIcon = withCheckmarkContext(withCheckmarkStateProps(Icon.InternalIcon), "icon");
+const CheckSelectBoxHiddenInput = React.forwardRef((props, ref) => {
+  const collapsibleContext = reactCollapsible.useCollapsibleContext({ strict: false });
+  const footerContext = React.useContext(FooterContext);
+  const triggerAriaProps = footerContext?.isFooterRendered ? collapsibleContext?.triggerAriaProps : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(reactCheckbox.Checkbox.HiddenInput, { ref, ...triggerAriaProps, ...props });
+});
+CheckSelectBoxHiddenInput.displayName = "CheckSelectBoxHiddenInput";
+const CheckSelectBoxFooter = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { stateProps } = reactCheckbox.useCheckboxContext();
+    const collapsibleContext = reactCollapsible.useCollapsibleContext({ strict: false });
+    const footerContext = React.useContext(FooterContext);
+    const composedRef = reactComposeRefs.composeRefs(ref, footerContext?.footerRef ?? null);
+    if (collapsibleContext) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        reactCollapsible.Collapsible.Content,
+        {
+          ref: composedRef,
+          className: clsx(classNames.footer, className),
+          ...stateProps,
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactPrimitive.Primitive.div,
+      {
+        ref: composedRef,
+        className: clsx(classNames.footer, className),
+        ...stateProps,
+        ...props,
+        children
+      }
+    );
+  }
+);
+CheckSelectBoxFooter.displayName = "CheckSelectBoxFooter";
 
+exports.CheckSelectBoxBody = CheckSelectBoxBody;
+exports.CheckSelectBoxCheckmarkControl = CheckSelectBoxCheckmarkControl;
+exports.CheckSelectBoxCheckmarkIcon = CheckSelectBoxCheckmarkIcon;
 exports.CheckSelectBoxContent = CheckSelectBoxContent;
 exports.CheckSelectBoxDescription = CheckSelectBoxDescription;
+exports.CheckSelectBoxFooter = CheckSelectBoxFooter;
 exports.CheckSelectBoxGroup = CheckSelectBoxGroup;
+exports.CheckSelectBoxHiddenInput = CheckSelectBoxHiddenInput;
 exports.CheckSelectBoxLabel = CheckSelectBoxLabel;
 exports.CheckSelectBoxRoot = CheckSelectBoxRoot;
+exports.CheckSelectBoxTrigger = CheckSelectBoxTrigger;

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

@@ -1,23 +1,51 @@
+import { SelectBoxVariantProps } from '@seed-design/css/recipes/select-box';
+import { SelectBoxCheckmarkVariantProps } from '@seed-design/css/recipes/selectBoxCheckmark';
+import { SelectBoxGroupVariantProps } from '@seed-design/css/recipes/select-box-group';
 import { Checkbox as CheckboxPrimitive } from '@seed-design/react-checkbox';
 import { PrimitiveProps } from '@seed-design/react-primitive';
+import { InternalIconProps } from '../private/Icon';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface CheckSelectBoxGroupProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+export interface CheckSelectBoxGroupProps extends SelectBoxGroupVariantProps, PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Number of columns in the grid layout. When bigger than 1, child `CheckSelectBoxRoot` will have a default layout of "vertical".
+     * @default 1
+     */
+    columns?: number;
 }
-/**
- * CheckSelectBoxGroup is a simple div wrapper for future extensibility.
- * It does not have spacing by default, nesting <VStack> under it is recommended.
- */
 export declare const CheckSelectBoxGroup: ForwardRefExoticComponent<CheckSelectBoxGroupProps & RefAttributes<HTMLDivElement>>;
-export interface CheckSelectBoxRootProps extends CheckboxPrimitive.RootProps {
+export interface CheckSelectBoxRootProps extends SelectBoxVariantProps, CheckboxPrimitive.RootProps {
+    /**
+     * Controls when the footer is visible.
+     * @default "when-selected"
+     */
+    footerVisibility?: "when-selected" | "when-not-selected" | "always";
 }
 export declare const CheckSelectBoxRoot: ForwardRefExoticComponent<CheckSelectBoxRootProps & RefAttributes<HTMLLabelElement>>;
+export interface CheckSelectBoxTriggerProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const CheckSelectBoxTrigger: ForwardRefExoticComponent<CheckSelectBoxTriggerProps & RefAttributes<HTMLDivElement>>;
 export interface CheckSelectBoxContentProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
 }
 export declare const CheckSelectBoxContent: ForwardRefExoticComponent<CheckSelectBoxContentProps & RefAttributes<HTMLDivElement>>;
-export interface CheckSelectBoxLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
+export interface CheckSelectBoxBodyProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const CheckSelectBoxBody: ForwardRefExoticComponent<CheckSelectBoxBodyProps & RefAttributes<HTMLDivElement>>;
+export interface CheckSelectBoxLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const CheckSelectBoxLabel: ForwardRefExoticComponent<CheckSelectBoxLabelProps & RefAttributes<HTMLDivElement>>;
+export interface CheckSelectBoxDescriptionProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const CheckSelectBoxDescription: ForwardRefExoticComponent<CheckSelectBoxDescriptionProps & RefAttributes<HTMLDivElement>>;
+export interface CheckSelectBoxCheckmarkControlProps extends SelectBoxCheckmarkVariantProps, CheckboxPrimitive.ControlProps {
+}
+export declare const CheckSelectBoxCheckmarkControl: ForwardRefExoticComponent<CheckSelectBoxCheckmarkControlProps & RefAttributes<HTMLDivElement>>;
+export interface CheckSelectBoxCheckmarkIconProps extends InternalIconProps {
+}
+export declare const CheckSelectBoxCheckmarkIcon: ForwardRefExoticComponent<CheckSelectBoxCheckmarkIconProps & RefAttributes<SVGSVGElement>>;
+export interface CheckSelectBoxHiddenInputProps extends CheckboxPrimitive.HiddenInputProps {
 }
-export declare const CheckSelectBoxLabel: ForwardRefExoticComponent<CheckSelectBoxLabelProps & RefAttributes<HTMLSpanElement>>;
-export interface CheckSelectBoxDescriptionProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
+export declare const CheckSelectBoxHiddenInput: ForwardRefExoticComponent<CheckSelectBoxHiddenInputProps & RefAttributes<HTMLInputElement>>;
+export interface CheckSelectBoxFooterProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
 }
-export declare const CheckSelectBoxDescription: ForwardRefExoticComponent<CheckSelectBoxDescriptionProps & RefAttributes<HTMLSpanElement>>;
+export declare const CheckSelectBoxFooter: ForwardRefExoticComponent<CheckSelectBoxFooterProps & RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=CheckSelectBox.d.ts.map

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":";AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAsB,MAAM,6BAA6B,CAAC;AAChG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAU9E,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,4HAGS,CAAC"}
+{"version":3,"file":"CheckSelectBox.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/CheckSelectBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5F,OAAO,EAEL,KAAK,8BAA8B,EACpC,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAsB,MAAM,6BAA6B,CAAC;AAOhG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAY9E,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAYvE,MAAM,WAAW,wBACf,SAAQ,0BAA0B,EAChC,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,qHAuB/B,CAAC;AA+BF,MAAM,WAAW,uBACf,SAAQ,qBAAqB,EAC3B,iBAAiB,CAAC,SAAS;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,eAAe,GAAG,mBAAmB,GAAG,QAAQ,CAAC;CACrE;AAED,eAAO,MAAM,kBAAkB,sHA0B9B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,uBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,kBAAkB,oHAG9B,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,mBAAmB,qHAG/B,CAAC;AAEF,MAAM,WAAW,8BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,yBAAyB,2HAGS,CAAC;AAMhD,MAAM,WAAW,mCACf,SAAQ,8BAA8B,EACpC,iBAAiB,CAAC,YAAY;CAAG;AAErC,eAAO,MAAM,8BAA8B,gIAGP,CAAC;AAErC,MAAM,WAAW,gCAAiC,SAAQ,iBAAiB;CAAG;AAE9E,eAAO,MAAM,2BAA2B,4HAGQ,CAAC;AAEjD,MAAM,WAAW,8BAA+B,SAAQ,iBAAiB,CAAC,gBAAgB;CAAG;AAE7F,eAAO,MAAM,yBAAyB,6HAapC,CAAC;AAGH,MAAM,WAAW,yBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,oBAAoB,sHAgChC,CAAC"}

package/lib/components/SelectBox/CheckSelectBox.js

@@ -1,32 +1,135 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { composeRefs } from '@radix-ui/react-compose-refs';
 import { selectBox } from '@seed-design/css/recipes/select-box';
+import { selectBoxCheckmark } from '@seed-design/css/recipes/selectBoxCheckmark';
 import { selectBoxGroup } from '@seed-design/css/recipes/select-box-group';
 import { Checkbox, useCheckboxContext } from '@seed-design/react-checkbox';
+import { useCollapsibleContext, Collapsible, useCollapsible, CollapsibleProvider } from '@seed-design/react-collapsible';
 import { Primitive } from '@seed-design/react-primitive';
-import { forwardRef } from 'react';
-import { createRecipeContext } from '../../utils/createRecipeContext.js';
+import clsx from 'clsx';
+import { forwardRef, useContext, createContext, useState, useCallback } from 'react';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
+import { InternalIcon } from '../private/Icon.js';
 
-const { withContext: withGroupContext } = createRecipeContext(selectBoxGroup);
-const { withContext, withProvider } = createSlotRecipeContext(selectBox);
+const { PropsProvider, ClassNamesProvider, withContext, useProps, useClassNames } = createSlotRecipeContext(selectBox);
 const withStateProps = createWithStateProps([useCheckboxContext]);
-const CheckSelectBoxGroup = withGroupContext(
-  forwardRef((props, ref) => /* @__PURE__ */ jsx(Primitive.div, { ref, role: "group", ...props }))
+const FooterContext = createContext(null);
+const CheckSelectBoxGroup = forwardRef(
+  ({ columns = 1, className, style, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBoxGroup.splitVariantProps(props);
+    const recipeClassName = selectBoxGroup(variantProps);
+    const layout = columns === 1 ? "horizontal" : "vertical";
+    return /* @__PURE__ */ jsx(PropsProvider, { value: { layout }, children: /* @__PURE__ */ jsx(
+      Primitive.div,
+      {
+        ref,
+        "data-columns": columns,
+        className: clsx(recipeClassName, className),
+        style: {
+          ...style,
+          "--seed-select-box-group--columns": columns
+        },
+        ...otherProps
+      }
+    ) });
+  }
 );
-const CheckSelectBoxRoot = withProvider(
-  Checkbox.Root,
-  "root"
+function FooterVisibilityProvider({
+  children,
+  footerVisibility
+}) {
+  const { checked } = useCheckboxContext();
+  const collapsible = useCollapsible({
+    open: {
+      "when-selected": checked,
+      "when-not-selected": !checked
+    }[footerVisibility]
+  });
+  const [isFooterRendered, setIsFooterRendered] = useState(false);
+  const footerRef = useCallback((node) => {
+    setIsFooterRendered(!!node);
+  }, []);
+  return /* @__PURE__ */ jsx(CollapsibleProvider, { value: collapsible, children: /* @__PURE__ */ jsx(FooterContext.Provider, { value: { isFooterRendered, footerRef, footerVisibility }, children }) });
+}
+const CheckSelectBoxRoot = forwardRef(
+  ({ footerVisibility = "when-selected", className, children, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBox.splitVariantProps(props);
+    const classNames = selectBox({
+      ...useProps(),
+      ...variantProps
+    });
+    return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
+      Checkbox.Root,
+      {
+        ref,
+        className: clsx(classNames.root, className),
+        ...otherProps,
+        children: footerVisibility === "always" ? children : /* @__PURE__ */ jsx(FooterVisibilityProvider, { footerVisibility, children })
+      }
+    ) });
+  }
+);
+const CheckSelectBoxTrigger = withContext(
+  withStateProps(Primitive.div),
+  "trigger"
 );
 const CheckSelectBoxContent = withContext(
   withStateProps(Primitive.div),
   "content"
 );
+const CheckSelectBoxBody = withContext(
+  withStateProps(Primitive.div),
+  "body"
+);
 const CheckSelectBoxLabel = withContext(
   withStateProps(Primitive.div),
   "label"
 );
 const CheckSelectBoxDescription = withContext(withStateProps(Primitive.div), "description");
+const { withProvider: withCheckmarkProvider, withContext: withCheckmarkContext } = createSlotRecipeContext(selectBoxCheckmark);
+const withCheckmarkStateProps = createWithStateProps([useCheckboxContext]);
+const CheckSelectBoxCheckmarkControl = withCheckmarkProvider(Checkbox.Control, "root");
+const CheckSelectBoxCheckmarkIcon = withCheckmarkContext(withCheckmarkStateProps(InternalIcon), "icon");
+const CheckSelectBoxHiddenInput = forwardRef((props, ref) => {
+  const collapsibleContext = useCollapsibleContext({ strict: false });
+  const footerContext = useContext(FooterContext);
+  const triggerAriaProps = footerContext?.isFooterRendered ? collapsibleContext?.triggerAriaProps : void 0;
+  return /* @__PURE__ */ jsx(Checkbox.HiddenInput, { ref, ...triggerAriaProps, ...props });
+});
+CheckSelectBoxHiddenInput.displayName = "CheckSelectBoxHiddenInput";
+const CheckSelectBoxFooter = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { stateProps } = useCheckboxContext();
+    const collapsibleContext = useCollapsibleContext({ strict: false });
+    const footerContext = useContext(FooterContext);
+    const composedRef = composeRefs(ref, footerContext?.footerRef ?? null);
+    if (collapsibleContext) {
+      return /* @__PURE__ */ jsx(
+        Collapsible.Content,
+        {
+          ref: composedRef,
+          className: clsx(classNames.footer, className),
+          ...stateProps,
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Primitive.div,
+      {
+        ref: composedRef,
+        className: clsx(classNames.footer, className),
+        ...stateProps,
+        ...props,
+        children
+      }
+    );
+  }
+);
+CheckSelectBoxFooter.displayName = "CheckSelectBoxFooter";
 
-export { CheckSelectBoxContent, CheckSelectBoxDescription, CheckSelectBoxGroup, CheckSelectBoxLabel, CheckSelectBoxRoot };
+export { CheckSelectBoxBody, CheckSelectBoxCheckmarkControl, CheckSelectBoxCheckmarkIcon, CheckSelectBoxContent, CheckSelectBoxDescription, CheckSelectBoxFooter, CheckSelectBoxGroup, CheckSelectBoxHiddenInput, CheckSelectBoxLabel, CheckSelectBoxRoot, CheckSelectBoxTrigger };

package/lib/components/SelectBox/CheckSelectBox.namespace.cjs

@@ -6,8 +6,14 @@ const CheckSelectBox = require('./CheckSelectBox.cjs');
 
 
 
+exports.Body = CheckSelectBox.CheckSelectBoxBody;
+exports.CheckmarkControl = CheckSelectBox.CheckSelectBoxCheckmarkControl;
+exports.CheckmarkIcon = CheckSelectBox.CheckSelectBoxCheckmarkIcon;
 exports.Content = CheckSelectBox.CheckSelectBoxContent;
 exports.Description = CheckSelectBox.CheckSelectBoxDescription;
+exports.Footer = CheckSelectBox.CheckSelectBoxFooter;
 exports.Group = CheckSelectBox.CheckSelectBoxGroup;
+exports.HiddenInput = CheckSelectBox.CheckSelectBoxHiddenInput;
 exports.Label = CheckSelectBox.CheckSelectBoxLabel;
 exports.Root = CheckSelectBox.CheckSelectBoxRoot;
+exports.Trigger = CheckSelectBox.CheckSelectBoxTrigger;

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

@@ -1,2 +1,2 @@
-export { CheckSelectBoxContent as Content, CheckSelectBoxDescription as Description, CheckSelectBoxGroup as Group, CheckSelectBoxLabel as Label, CheckSelectBoxRoot as Root, type CheckSelectBoxContentProps as ContentProps, type CheckSelectBoxDescriptionProps as DescriptionProps, type CheckSelectBoxGroupProps as GroupProps, type CheckSelectBoxLabelProps as LabelProps, type CheckSelectBoxRootProps as RootProps, } from './CheckSelectBox';
+export { CheckSelectBoxBody as Body, CheckSelectBoxCheckmarkControl as CheckmarkControl, CheckSelectBoxCheckmarkIcon as CheckmarkIcon, CheckSelectBoxContent as Content, CheckSelectBoxDescription as Description, CheckSelectBoxFooter as Footer, CheckSelectBoxGroup as Group, CheckSelectBoxHiddenInput as HiddenInput, CheckSelectBoxLabel as Label, CheckSelectBoxRoot as Root, CheckSelectBoxTrigger as Trigger, type CheckSelectBoxBodyProps as BodyProps, type CheckSelectBoxCheckmarkControlProps as CheckmarkControlProps, type CheckSelectBoxCheckmarkIconProps as CheckmarkIconProps, type CheckSelectBoxContentProps as ContentProps, type CheckSelectBoxDescriptionProps as DescriptionProps, type CheckSelectBoxFooterProps as FooterProps, type CheckSelectBoxGroupProps as GroupProps, type CheckSelectBoxHiddenInputProps as HiddenInputProps, type CheckSelectBoxLabelProps as LabelProps, type CheckSelectBoxRootProps as RootProps, type CheckSelectBoxTriggerProps as TriggerProps, } from './CheckSelectBox';
 //# sourceMappingURL=CheckSelectBox.namespace.d.ts.map