@fangxinyan/lumina 0.6.18 → 0.8.0

package/dist/chunk-KCDOC3HS.cjs

@@ -0,0 +1,100 @@
+'use strict';
+
+var chunk2AUXUZ3Z_cjs = require('./chunk-2AUXUZ3Z.cjs');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+require('./tokens-CEJVVA3G.css');
+require('./shared-NJHRNLRH.css');
+require('./Checkbox-IHFML4FV.css');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var CheckboxBase = React__namespace.forwardRef(({
+  checked,
+  defaultChecked,
+  indeterminate,
+  onChange,
+  disabled,
+  label,
+  className = "",
+  id,
+  name,
+  value: formValue,
+  required,
+  form,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
+  ...rest
+}, ref) => {
+  const [inner, setInner] = React__namespace.useState(defaultChecked ?? false);
+  const isControlled = checked !== void 0;
+  const value = isControlled ? checked : inner;
+  const inputRef = React__namespace.useRef(null);
+  React__namespace.useEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = !!indeterminate;
+  }, [indeterminate]);
+  const toggle = (next) => {
+    if (disabled) return;
+    if (!isControlled) setInner(next);
+    onChange?.(next);
+  };
+  const cls = [
+    "checkbox",
+    value && "checked",
+    indeterminate && "indeterminate",
+    disabled && "disabled",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { ref, className: cls, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        className: "checkbox-native",
+        checked: value,
+        disabled,
+        onChange: (event) => toggle(event.target.checked),
+        id,
+        name,
+        value: formValue ?? "on",
+        required,
+        form,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": ariaInvalid,
+        "aria-required": ariaRequired,
+        "aria-checked": indeterminate ? "mixed" : value
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "checkbox-box", children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(chunk2AUXUZ3Z_cjs.Icon, { name: "minus", size: 11 }) : value ? /* @__PURE__ */ jsxRuntime.jsx(chunk2AUXUZ3Z_cjs.Icon, { name: "check", size: 11 }) : null }),
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "checkbox-label", children: label })
+  ] });
+});
+CheckboxBase.displayName = "Checkbox";
+var Checkbox = chunkNRJXZPZR_cjs.withComponentTheme(CheckboxBase, "Checkbox", "checkbox");
+
+exports.Checkbox = Checkbox;

package/dist/{chunk-M4NJTJKV.cjs → chunk-LDX6Q6RK.cjs}

@@ -1,8 +1,9 @@
 'use strict';
 
-require('./tokens-RYJ3DFTU.css');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+require('./tokens-CEJVVA3G.css');
 require('./shared-NJHRNLRH.css');
-require('./Skeleton-CVWH2VWN.css');
+require('./Skeleton-FMFE3BRI.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -26,9 +27,8 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// src/components/Skeleton/Skeleton.tsx
 var AVATAR_SIZE_PX = { sm: 32, md: 40, lg: 56 };
-var Skeleton = React__namespace.forwardRef(({
+var SkeletonBase = React__namespace.forwardRef(({
   width = "100%",
   height = 16,
   circle,
@@ -48,6 +48,7 @@ var Skeleton = React__namespace.forwardRef(({
         ref,
         className: `skeleton ${animation} ${circle ? "circle" : ""} ${className}`.trim(),
         style: { width, height, borderRadius: circle ? "50%" : void 0, ...style },
+        "aria-hidden": "true",
         ...rest
       }
     );
@@ -70,6 +71,7 @@ var Skeleton = React__namespace.forwardRef(({
       ref,
       className: `skeleton-box ${className}`.trim(),
       style,
+      "aria-hidden": "true",
       ...rest,
       children: [
         avatarCfg && /* @__PURE__ */ jsxRuntime.jsx(
@@ -105,6 +107,7 @@ var Skeleton = React__namespace.forwardRef(({
     }
   );
 });
-Skeleton.displayName = "Skeleton";
+SkeletonBase.displayName = "Skeleton";
+var Skeleton = chunkNRJXZPZR_cjs.withComponentTheme(SkeletonBase, "Skeleton", "skeleton");
 
 exports.Skeleton = Skeleton;

package/dist/chunk-LEDESWNL.js

@@ -0,0 +1,83 @@
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './Switch-TATU3LPB.css';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SwitchBase = React.forwardRef(({
+  checked,
+  defaultChecked,
+  onChange,
+  disabled,
+  label,
+  size = "md",
+  checkedChildren,
+  unCheckedChildren,
+  className = "",
+  id,
+  name,
+  value: formValue,
+  required,
+  form,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
+  ...rest
+}, ref) => {
+  const [inner, setInner] = React.useState(defaultChecked ?? false);
+  const isControlled = checked !== void 0;
+  const value = isControlled ? checked : inner;
+  const toggle = (next) => {
+    if (disabled) return;
+    if (!isControlled) setInner(next);
+    onChange?.(next);
+  };
+  const hasChildren = checkedChildren != null || unCheckedChildren != null;
+  const cls = [
+    "switch",
+    value && "on",
+    size !== "md" && size,
+    disabled && "disabled",
+    hasChildren && "with-children",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("label", { ref, className: cls, ...rest, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: "switch-native",
+        checked: value,
+        disabled,
+        onChange: (event) => toggle(event.target.checked),
+        id,
+        name,
+        value: formValue ?? "on",
+        required,
+        form,
+        role: "switch",
+        "aria-checked": value,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": ariaInvalid,
+        "aria-required": ariaRequired
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "switch-track", children: [
+      hasChildren && /* @__PURE__ */ jsxs("span", { className: "switch-inner", children: [
+        /* @__PURE__ */ jsx("span", { className: "switch-inner-on", children: checkedChildren }),
+        /* @__PURE__ */ jsx("span", { className: "switch-inner-off", children: unCheckedChildren })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "switch-thumb" })
+    ] }),
+    label && /* @__PURE__ */ jsx("span", { className: "switch-label", children: label })
+  ] });
+});
+SwitchBase.displayName = "Switch";
+var Switch = withComponentTheme(SwitchBase, "Switch", "switch");
+
+export { Switch };

package/dist/chunk-LG62MPMU.cjs

@@ -0,0 +1,213 @@
+'use strict';
+
+var chunkG5LCOBOT_cjs = require('./chunk-G5LCOBOT.cjs');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+var chunkEE5KXDRK_cjs = require('./chunk-EE5KXDRK.cjs');
+require('./tokens-CEJVVA3G.css');
+require('./shared-NJHRNLRH.css');
+require('./Surface-CTN775GD.css');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function createSurfaceThemePreset(key) {
+  const preset = chunkG5LCOBOT_cjs.cloneLuminaThemePreset(key);
+  delete preset.density;
+  delete preset.font;
+  delete preset.label;
+  delete preset.description;
+  return preset;
+}
+var SURFACE_THEME_PRESETS = {
+  mist: createSurfaceThemePreset("light"),
+  porcelain: createSurfaceThemePreset("porcelain"),
+  graphite: createSurfaceThemePreset("graphite"),
+  ember: createSurfaceThemePreset("ember")
+};
+var surfacePresetMap = SURFACE_THEME_PRESETS;
+var isDefined = (value) => value !== void 0;
+var Surface = React__namespace.forwardRef(
+  ({
+    preset = "inherit",
+    tone = "base",
+    variant = "plain",
+    padding = "md",
+    radius = "lg",
+    height = "content",
+    bordered,
+    scrollable,
+    mode,
+    colorScheme,
+    accent,
+    baseColor,
+    density,
+    intensity,
+    themeRadius,
+    font,
+    tokens,
+    colors,
+    components,
+    theme,
+    themes,
+    className = "",
+    children,
+    style,
+    ...rest
+  }, ref) => {
+    const inherited = chunkEE5KXDRK_cjs.useThemeOptional();
+    const normalizedTheme = chunkNRJXZPZR_cjs.normalizeComponentThemeInput(theme);
+    const presetConfig = preset === "inherit" ? void 0 : surfacePresetMap[preset];
+    const effectiveSurfaceMode = mode ?? colorScheme ?? normalizedTheme?.colorScheme ?? presetConfig?.base ?? inherited?.mode ?? "light";
+    const [systemDark, setSystemDark] = React__namespace.useState(
+      () => typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches
+    );
+    React__namespace.useEffect(() => {
+      if (effectiveSurfaceMode !== "system" || typeof window === "undefined") return;
+      const media = window.matchMedia("(prefers-color-scheme: dark)");
+      setSystemDark(media.matches);
+      const handleChange = (event) => setSystemDark(event.matches);
+      media.addEventListener?.("change", handleChange);
+      return () => media.removeEventListener?.("change", handleChange);
+    }, [effectiveSurfaceMode]);
+    const registeredModePreset = effectiveSurfaceMode != null && effectiveSurfaceMode !== "light" && effectiveSurfaceMode !== "dark" && effectiveSurfaceMode !== "system" ? themes?.[effectiveSurfaceMode] ?? inherited?.themes[effectiveSurfaceMode] : void 0;
+    const localComponents = chunkEE5KXDRK_cjs.mergeComponentThemeOverrides(
+      normalizedTheme?.components,
+      components
+    );
+    const hasLocalComponentPalette = normalizedTheme != null && [
+      normalizedTheme.baseColor,
+      normalizedTheme.colorScheme,
+      normalizedTheme.accent,
+      normalizedTheme.intensity,
+      normalizedTheme.colors,
+      normalizedTheme.tokens
+    ].some(isDefined);
+    const usesLocalTheme = preset !== "inherit" || isDefined(mode) || isDefined(colorScheme) || isDefined(accent) || isDefined(baseColor) || isDefined(density) || isDefined(intensity) || isDefined(themeRadius) || isDefined(font) || isDefined(tokens) || isDefined(colors) || hasLocalComponentPalette || isDefined(themes);
+    const modeBaseColorScheme = effectiveSurfaceMode === "light" || effectiveSurfaceMode === "dark" ? effectiveSurfaceMode : effectiveSurfaceMode === "system" ? systemDark ? "dark" : "light" : void 0;
+    const localSurfaceColorScheme = modeBaseColorScheme ?? colorScheme ?? normalizedTheme?.colorScheme ?? presetConfig?.base ?? registeredModePreset?.base;
+    const hasLocalSurfacePalette = presetConfig != null || registeredModePreset != null || mode === "light" || mode === "dark" || [
+      colorScheme,
+      accent,
+      baseColor,
+      intensity,
+      tokens,
+      colors
+    ].some(isDefined) || hasLocalComponentPalette;
+    const localSurfaceTheme = hasLocalSurfacePalette ? {
+      colorScheme: localSurfaceColorScheme,
+      baseColor: baseColor ?? normalizedTheme?.baseColor ?? presetConfig?.baseColor ?? registeredModePreset?.baseColor,
+      accent: accent ?? normalizedTheme?.accent ?? presetConfig?.accent ?? registeredModePreset?.accent,
+      intensity: intensity ?? normalizedTheme?.intensity ?? presetConfig?.intensity ?? registeredModePreset?.intensity,
+      tokens: {
+        ...registeredModePreset?.tokens ?? {},
+        ...presetConfig?.tokens ?? {},
+        ...normalizedTheme?.tokens ?? {},
+        ...tokens ?? {}
+      },
+      colors: {
+        ...registeredModePreset?.colors ?? {},
+        ...presetConfig?.colors ?? {},
+        ...normalizedTheme?.colors ?? {},
+        ...colors ?? {}
+      },
+      scope: "self"
+    } : void 0;
+    const [themeRootElement, themeRootRef] = chunkNRJXZPZR_cjs.useComponentThemeRootRef(
+      ref,
+      { component: "Surface", theme: localSurfaceTheme }
+    );
+    const cls = [
+      "surface",
+      `tone-${tone}`,
+      variant,
+      `pad-${padding}`,
+      `radius-${radius}`,
+      `height-${height}`,
+      bordered && "bordered",
+      scrollable && "scrollable",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      chunkNRJXZPZR_cjs.ComponentThemeBoundary,
+      {
+        component: "Surface",
+        cssPrefix: "surface",
+        theme: localSurfaceTheme,
+        rootElement: themeRootElement,
+        children: (themeState) => {
+          const surfaceNode = /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: themeRootRef,
+              className: cls,
+              "data-surface-preset": preset === "inherit" ? void 0 : preset,
+              "data-surface-tone": tone,
+              ...themeState.rootDataAttributes,
+              ...rest,
+              style: { ...themeState.rootStyle, ...style },
+              children
+            }
+          );
+          return /* @__PURE__ */ jsxRuntime.jsx(chunkEE5KXDRK_cjs.ComponentOverridesProvider, { value: localComponents, children: /* @__PURE__ */ jsxRuntime.jsx(
+            chunkEE5KXDRK_cjs.ThemeProvider,
+            {
+              enabled: usesLocalTheme,
+              target: "scope",
+              asChild: true,
+              mode: effectiveSurfaceMode,
+              colorScheme: localSurfaceColorScheme ?? inherited?.colorScheme ?? "light",
+              baseColor: baseColor ?? normalizedTheme?.baseColor ?? presetConfig?.baseColor,
+              accent: accent ?? normalizedTheme?.accent ?? presetConfig?.accent,
+              density: density ?? presetConfig?.density ?? registeredModePreset?.density ?? inherited?.density ?? "comfortable",
+              intensity: intensity ?? normalizedTheme?.intensity ?? presetConfig?.intensity ?? registeredModePreset?.intensity ?? inherited?.intensity ?? 5,
+              radius: themeRadius ?? presetConfig?.radius ?? registeredModePreset?.radius ?? inherited?.radius ?? 20,
+              font: font ?? presetConfig?.font ?? registeredModePreset?.font ?? inherited?.font ?? "sf",
+              tokens: {
+                ...presetConfig?.tokens ?? {},
+                ...normalizedTheme?.tokens ?? {},
+                ...tokens ?? {}
+              },
+              colors: {
+                ...presetConfig?.colors ?? {},
+                ...normalizedTheme?.colors ?? {},
+                ...colors ?? {}
+              },
+              components: chunkEE5KXDRK_cjs.mergeComponentThemeOverrides(
+                presetConfig?.components,
+                localComponents
+              ),
+              themes: {
+                ...inherited?.themes ?? {},
+                ...themes ?? {}
+              },
+              children: surfaceNode
+            }
+          ) });
+        }
+      }
+    );
+  }
+);
+Surface.displayName = "Surface";
+
+exports.SURFACE_THEME_PRESETS = SURFACE_THEME_PRESETS;
+exports.Surface = Surface;

package/dist/{chunk-7NTTRKNT.js → chunk-LJVQQEME.js}

@@ -1,14 +1,17 @@
 import { useInputTriggerToggle } from './chunk-RC6ULCQP.js';
-import { useFloating } from './chunk-DUFRASGO.js';
-import { Input } from './chunk-IOAOG5L7.js';
-import { Button } from './chunk-IPSNC5VZ.js';
-import { Calendar } from './chunk-I7TOBKJO.js';
-import './tokens-RYJ3DFTU.css';
+import { useFloating } from './chunk-3QXP2ZNP.js';
+import { Input } from './chunk-UE4HFGJ6.js';
+import { useOverlayLayer } from './chunk-2A4GYSN4.js';
+import { Button } from './chunk-JHM7MN3G.js';
+import { Calendar } from './chunk-3DKFS44V.js';
+import { useComponentPortalTheme, InternalComponentThemePart, withComponentTheme } from './chunk-DRDDQCDD.js';
+import { usePortalContainer } from './chunk-ULTDRMGN.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './DatePicker-VDVSIARF.css';
+import './DatePicker-ZSFDXAYD.css';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var pad = (value) => String(value).padStart(2, "0");
 var startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
@@ -37,12 +40,13 @@ var parseDateInput = (input) => {
   }
   return date;
 };
-var DatePicker = React.forwardRef(
+var DatePickerBase = React.forwardRef(
   ({
     value,
     defaultValue = null,
     onChange,
     format = "YYYY-MM-DD",
+    parse,
     placeholder = "\u8BF7\u9009\u62E9\u65E5\u671F",
     disabled,
     readOnly,
@@ -60,6 +64,12 @@ var DatePicker = React.forwardRef(
     dropdownClassName = "",
     className = "",
     onKeyDown,
+    id: fieldId,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-required": ariaRequired,
+    "aria-label": ariaLabel,
     ...rest
   }, ref) => {
     const controlled = value !== void 0;
@@ -94,13 +104,23 @@ var DatePicker = React.forwardRef(
       setOpen
     });
     const rootRef = React.useRef(null);
-    const panelRef = React.useRef(null);
-    const { triggerRef, floatingStyle } = useFloating({
+    const panelId = React.useId();
+    const portalContainer = usePortalContainer();
+    const portalTheme = useComponentPortalTheme("DatePicker");
+    const { triggerRef, floatingRef: panelRef, floatingStyle, zIndex: panelZIndex } = useFloating({
       open,
       placement,
       panelWidth: 344,
       panelHeight: 404
     });
+    useOverlayLayer({
+      open: open && !disabled && !readOnly && portalContainer != null,
+      containerRef: panelRef,
+      ownerRef: triggerRef,
+      zIndex: panelZIndex,
+      onEscape: () => setOpen(false),
+      restoreFocus: true
+    });
     const setRootRef = React.useCallback(
       (node) => {
         rootRef.current = node;
@@ -148,14 +168,9 @@ var DatePicker = React.forwardRef(
         if (panelRef.current?.contains(target)) return;
         setOpen(false);
       };
-      const onDocKey = (event) => {
-        if (event.key === "Escape") setOpen(false);
-      };
       document.addEventListener("mousedown", onDown);
-      document.addEventListener("keydown", onDocKey);
       return () => {
         document.removeEventListener("mousedown", onDown);
-        document.removeEventListener("keydown", onDocKey);
       };
     }, [open, setOpen]);
     const handleInputChange = (next) => {
@@ -167,12 +182,8 @@ var DatePicker = React.forwardRef(
         setDraft(formattedCurrent);
         return;
       }
-      if (typeof format === "function") {
-        setDraft(formattedCurrent);
-        return;
-      }
-      const parsed = parseDateInput(draft);
-      if (!parsed || isDisabledDate(parsed)) {
+      const parsed = parse ? parse(draft) : typeof format === "function" ? null : parseDateInput(draft);
+      if (!isValidDate(parsed) || isDisabledDate(parsed)) {
         setDraft(formattedCurrent);
         return;
       }
@@ -202,10 +213,16 @@ var DatePicker = React.forwardRef(
       invalid && "invalid",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs("div", { ref: setRootRef, className: rootClassName, onKeyDown: handleRootKeyDown, ...rest, children: [
+    return /* @__PURE__ */ jsx("div", { ref: setRootRef, className: rootClassName, onKeyDown: handleRootKeyDown, ...rest, children: /* @__PURE__ */ jsxs(InternalComponentThemePart, { components: ["Input", "Calendar", "Button"], children: [
       /* @__PURE__ */ jsx(
         Input,
         {
+          id: fieldId,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-invalid": ariaInvalid,
+          "aria-required": ariaRequired,
+          "aria-describedby": ariaDescribedBy,
           value: draft,
           size,
           placeholder,
@@ -219,17 +236,21 @@ var DatePicker = React.forwardRef(
           onBlur: handleInputBlur,
           inputMode: "numeric",
           "aria-expanded": open,
-          "aria-haspopup": "dialog"
+          "aria-haspopup": "dialog",
+          "aria-controls": open ? panelId : void 0
         }
       ),
-      open && !disabled && !readOnly && typeof document !== "undefined" && createPortal(
+      open && !disabled && !readOnly && portalContainer && createPortal(
         /* @__PURE__ */ jsxs(
           "div",
           {
             ref: panelRef,
+            id: panelId,
             className: `date-picker-panel ${mergedPanelClassName}`,
             role: "dialog",
-            style: floatingStyle,
+            "aria-label": "\u9009\u62E9\u65E5\u671F",
+            ...portalTheme.dataAttributes,
+            style: { ...floatingStyle, ...portalTheme.style, ...portalTheme.styles.popup },
             children: [
               /* @__PURE__ */ jsx(
                 Calendar,
@@ -267,11 +288,16 @@ var DatePicker = React.forwardRef(
             ]
           }
         ),
-        document.body
+        portalContainer
       )
-    ] });
+    ] }) });
   }
 );
-DatePicker.displayName = "DatePicker";
+DatePickerBase.displayName = "DatePicker";
+var DatePicker = withComponentTheme(
+  DatePickerBase,
+  "DatePicker",
+  ["date-picker", "calendar", "input", "button"]
+);
 
 export { DatePicker };