@navikt/ds-react 7.8.0 → 7.9.0

package/src/form/textarea/Textarea.tsx

@@ -193,7 +193,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           aria-live="polite"
         >
           {showErrorMsg && (
-            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+            <ErrorMessage size={size} showIcon>
+              {props.error}
+            </ErrorMessage>
           )}
         </div>
       </div>

package/src/form/textfield/TextField.tsx

@@ -127,7 +127,9 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           aria-live="polite"
         >
           {showErrorMsg && (
-            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+            <ErrorMessage size={size} showIcon>
+              {props.error}
+            </ErrorMessage>
           )}
         </div>
       </div>

package/src/guide-panel/GuidePanel.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { UNSAFE_useAkselTheme } from "../provider";
+import { useThemeInternal } from "../theme/Theme";
 import { DefaultIllustration } from "./Illustration";
 import { DarksideGudiepanelIllustration } from "./Illustration.darkside";
 
@@ -37,7 +37,7 @@ export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
  */
 export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
   ({ children, className, illustration, poster, ...rest }, ref) => {
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal(false);
 
     return (
       <div

package/src/help-text/HelpText.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useRef, useState } from "react";
 import { Popover, PopoverProps } from "../popover";
-import { UNSAFE_useAkselTheme } from "../provider";
+import { useThemeInternal } from "../theme/Theme";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { useI18n } from "../util/i18n/i18n.context";
@@ -52,7 +52,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     const buttonRef = useRef<HTMLButtonElement | null>(null);
     const mergedRef = useMergeRefs(buttonRef, ref);
     const [open, setOpen] = useState(false);
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal(false);
     const translate = useI18n("HelpText");
 
     const titleWithFallback = title || translate("title");

package/src/internal-header/InternalHeader.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { UNSAFE_AkselTheme, UNSAFE_useAkselTheme } from "../provider";
+import { Theme, useThemeInternal } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 import InternalHeaderButton, {
   InternalHeaderButtonProps,
@@ -78,20 +78,20 @@ interface InternalHeaderComponent
  * ```
  */
 export const InternalHeader = forwardRef(({ className, ...rest }, ref) => {
-  const themeContext = UNSAFE_useAkselTheme(false);
+  const themeContext = useThemeInternal(false);
 
   /*
    * Component is always in "dark" mode, so we manually override global theme.
    */
   if (themeContext) {
     return (
-      <UNSAFE_AkselTheme theme="dark" asChild>
+      <Theme theme="dark" asChild>
         <header
           {...rest}
           ref={ref}
           className={cl("navds-internalheader", className)}
         />
-      </UNSAFE_AkselTheme>
+      </Theme>
     );
   }
 

package/src/layout/base/BasePrimitive.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React from "react";
-import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
+import { useThemeInternal } from "../../theme/Theme";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
@@ -252,7 +252,7 @@ export const BasePrimitive = ({
   flexShrink,
   gridColumn,
 }: BasePrimitiveProps) => {
-  const themeContext = UNSAFE_useAkselTheme(false);
+  const themeContext = useThemeInternal(false);
   const prefix = themeContext ? "ax" : "a";
 
   const style: React.CSSProperties = {

package/src/layout/bleed/Bleed.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
+import { useThemeInternal } from "../../theme/Theme";
 import { getResponsiveProps } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
@@ -81,7 +81,7 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
     },
     ref,
   ) => {
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal(false);
     const prefix = themeContext ? "ax" : "a";
 
     let style: React.CSSProperties = {

package/src/layout/box/Box.darkside.tsx

@@ -1,6 +1,13 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { BorderKeys } from "@navikt/ds-tokens/darkside/tokens/semantic-roles";
+import type {
+  BorderColorKeys,
+  BorderColorWithRoleKeys,
+  BorderRadiusKeys,
+  DefaultBgKeys,
+  ShadowKeys,
+  StaticBgKeys,
+} from "@navikt/ds-tokens/types";
 import { Slot } from "../../slot/Slot";
 import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
@@ -10,27 +17,21 @@ import BasePrimitive, {
 } from "../base/BasePrimitive";
 import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { getResponsiveProps } from "../utilities/css";
-import {
-  BorderRadiiToken,
-  ResponsiveProp,
-  SemanticRoleBgDarkside,
-  SemanticShadowTokens,
-  SemanticStaticBgDarkside,
-  SemanticStaticBorderDarkside,
-  SpaceDelimitedAttribute,
-} from "../utilities/types";
+import { ResponsiveProp, SpaceDelimitedAttribute } from "../utilities/types";
 
 export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
    * CSS `background-color` property.
    * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
+   * @see {@link DefaultBgKeys} and {@link StaticBgKeys}
    */
-  background?: SemanticStaticBgDarkside | SemanticRoleBgDarkside;
+  background?: DefaultBgKeys | StaticBgKeys;
   /**
    * CSS `border-color` property.
    * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
+   * @see {@link BorderColorKeys} and {@link BorderColorWithRoleKeys}
    */
-  borderColor?: BorderKeys | SemanticStaticBorderDarkside;
+  borderColor?: Exclude<BorderColorKeys, "focus"> | BorderColorWithRoleKeys;
   /**
    * CSS `border-radius` property.
    * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31)
@@ -39,8 +40,11 @@ export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
    * borderRadius='full'
    * borderRadius='0 full large small'
    * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
+   * @see {@link BorderRadiusKeys}
    */
-  borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
+  borderRadius?: ResponsiveProp<
+    SpaceDelimitedAttribute<BorderRadiusKeys | "0">
+  >;
   /**
    * CSS `border-width` property. If this is not set there will be no border.
    * @example
@@ -51,8 +55,9 @@ export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
   /** Shadow on box. Accepts a shadow token.
    * @example
    * shadow='small'
+   * @see {@link ShadowKeys}
    */
-  shadow?: SemanticShadowTokens;
+  shadow?: ShadowKeys;
 } & PrimitiveProps &
   PrimitiveAsChildProps;
 

package/src/layout/box/Box.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { UNSAFE_useAkselTheme } from "../../provider";
+import { type BorderRadiusKeys } from "@navikt/ds-tokens/types";
 import { Slot } from "../../slot/Slot";
+import { useThemeInternal } from "../../theme/Theme";
 import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
 import BasePrimitive, {
@@ -13,7 +14,6 @@ import { getResponsiveProps } from "../utilities/css";
 import {
   BackgroundColorToken,
   BorderColorToken,
-  BorderRadiiToken,
   ResponsiveProp,
   ShadowToken,
   SpaceDelimitedAttribute,
@@ -41,7 +41,9 @@ export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
    * borderRadius='0 full large small'
    * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
    */
-  borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
+  borderRadius?: ResponsiveProp<
+    SpaceDelimitedAttribute<BorderRadiusKeys | "0">
+  >;
   /**
    * CSS `border-width` property. If this is not set there will be no border.
    * @example
@@ -107,7 +109,7 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
       },
       ref,
     ) => {
-      const themeContext = UNSAFE_useAkselTheme(false);
+      const themeContext = useThemeInternal(false);
 
       if (
         process.env.NODE_ENV !== "production" &&

package/src/layout/grid/HGrid.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
+import { useThemeInternal } from "../../theme/Theme";
 import { OverridableComponent, omit } from "../../util";
 import BasePrimitive, {
   PRIMITIVE_PROPS,
@@ -78,7 +78,7 @@ export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
       },
       ref,
     ) => {
-      const themeContext = UNSAFE_useAkselTheme(false);
+      const themeContext = useThemeInternal(false);
       const prefix = themeContext ? "ax" : "a";
 
       const styles: React.CSSProperties = {

package/src/layout/page/Page.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { UNSAFE_useAkselTheme } from "../../provider";
+import { useThemeInternal } from "../../theme/Theme";
 import { OverridableComponent } from "../../util";
 import { BackgroundColorToken } from "../utilities/types";
 import { PageBlock } from "./parts/PageBlock";
@@ -54,7 +54,7 @@ export const PageComponent: OverridableComponent<PageProps, HTMLElement> =
       },
       ref,
     ) => {
-      const themeContext = UNSAFE_useAkselTheme(false);
+      const themeContext = useThemeInternal(false);
 
       if (process.env.NODE_ENV !== "production" && themeContext && background) {
         console.warn(

package/src/layout/stack/Stack.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
+import { useThemeInternal } from "../../theme/Theme";
 import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
 import BasePrimitive, {
@@ -84,7 +84,7 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
       },
       ref,
     ) => {
-      const themeContext = UNSAFE_useAkselTheme(false);
+      const themeContext = useThemeInternal(false);
       const prefix = themeContext ? "ax" : "a";
 
       const style: React.CSSProperties = {

package/src/layout/utilities/types.ts

@@ -1,27 +1,23 @@
-/* Darkside tokens */
-import { semanticTokenConfig } from "@navikt/ds-tokens/darkside/tokens/semantic";
-import { SemanticTokensForAllRolesConfigT } from "@navikt/ds-tokens/darkside/tokens/semantic-roles";
-import { shadowTokenConfig } from "@navikt/ds-tokens/darkside/tokens/shadow";
-
-/* Old */
-import borderRadii from "@navikt/ds-tokens/src/border.json";
-import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
-import borderColors from "@navikt/ds-tokens/src/colors-border.json";
-import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
-import shadows from "@navikt/ds-tokens/src/shadow.json";
-import Spacing from "@navikt/ds-tokens/src/spacing.json";
-
-export type BackgroundColorToken = keyof typeof bgColors.a;
-export type SurfaceColorToken = keyof typeof surfaceColors.a;
-export type BorderColorToken = keyof typeof borderColors.a;
-export type BorderRadiiToken =
-  | keyof (typeof borderRadii.a)["border-radius"]
-  | "0";
-export type ShadowToken = keyof typeof shadows.a.shadow;
-
-export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
-
-export type SpacingScale = keyof (typeof Spacing)["a"]["spacing"];
+import type {
+  BreakPointKeys,
+  LegacyBgColorKeys,
+  LegacyBorderColorKeys,
+  LegacyShadowKeys,
+  LegacySurfaceColorKeys,
+  SpacingKeys,
+} from "@navikt/ds-tokens/types";
+
+export type BackgroundColorToken = LegacyBgColorKeys;
+export type SurfaceColorToken = LegacySurfaceColorKeys;
+export type BorderColorToken = LegacyBorderColorKeys;
+export type ShadowToken = LegacyShadowKeys;
+
+export type BreakpointsAlias = Extract<
+  BreakPointKeys,
+  "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+>;
+
+export type SpacingScale = SpacingKeys;
 
 export type SpaceDelimitedAttribute<T extends string> =
   | T
@@ -33,21 +29,3 @@ type FixedResponsiveT<T> = {
 };
 
 export type ResponsiveProp<T> = T | FixedResponsiveT<T>;
-
-/**
- * Darkside tokens
- */
-export type SemanticShadowTokens = keyof ReturnType<
-  typeof shadowTokenConfig
->["shadow"];
-
-export type SemanticStaticBgDarkside = keyof ReturnType<
-  typeof semanticTokenConfig
->["bg"];
-
-export type SemanticRoleBgDarkside =
-  keyof SemanticTokensForAllRolesConfigT<"color">["bg"];
-
-export type SemanticStaticBorderDarkside = keyof ReturnType<
-  typeof semanticTokenConfig
->["border"];

package/src/overlays/action-menu/ActionMenu.tsx

@@ -2,8 +2,8 @@ import cl from "clsx";
 import React, { forwardRef, useRef } from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 import { useModalContext } from "../../modal/Modal.context";
-import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
+import { useThemeInternal } from "../../theme/Theme";
 import { OverridableComponent, useId } from "../../util";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { createContext } from "../../util/create-context";
@@ -736,7 +736,7 @@ export const ActionMenuRadioItem = forwardRef<
     { children, className, onSelect, ...rest }: ActionMenuRadioItemProps,
     ref,
   ) => {
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal(false);
 
     return (
       <Menu.RadioItem

package/src/pagination/PaginationItem.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Button, ButtonProps } from "../button";
-import { UNSAFE_useAkselTheme } from "../provider";
+import { useThemeInternal } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 
 export interface PaginationItemProps extends ButtonProps {
@@ -40,7 +40,7 @@ export const Item: PaginationItemType = forwardRef(
     },
     ref,
   ) => {
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal(false);
 
     return (
       <Button

package/src/popover/Popover.tsx

@@ -11,7 +11,7 @@ import React, { HTMLAttributes, forwardRef, useContext, useRef } from "react";
 import { DateInputContext } from "../date/context";
 import { useModalContext } from "../modal/Modal.context";
 import { DismissableLayer } from "../overlays/dismissablelayer/DismissableLayer";
-import { UNSAFE_useAkselTheme } from "../provider";
+import { useThemeInternal } from "../theme/Theme";
 import { useClientLayoutEffect } from "../util/hooks";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
@@ -125,7 +125,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
     const chosenFlip = isInDatepicker ? false : _flip;
 
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal(false);
 
     const {
       update,

package/src/portal/Portal.tsx

@@ -2,6 +2,7 @@ import React, { HTMLAttributes, forwardRef } from "react";
 import ReactDOM from "react-dom";
 import { useProvider } from "../provider/Provider";
 import { Slot } from "../slot/Slot";
+import { Theme, useThemeInternal } from "../theme/Theme";
 import { AsChildProps } from "../util/types";
 
 interface PortalBaseProps extends HTMLAttributes<HTMLDivElement> {
@@ -15,11 +16,27 @@ export type PortalProps = PortalBaseProps & AsChildProps;
 
 export const Portal = forwardRef<HTMLDivElement, PortalProps>(
   ({ rootElement, asChild, ...rest }, ref) => {
+    const themeContext = useThemeInternal(false);
     const contextRoot = useProvider()?.rootElement;
     const root = rootElement ?? contextRoot ?? globalThis?.document?.body;
 
     const Component = asChild ? Slot : "div";
 
+    /**
+     * Portal can be mounted outside of theme-classNames.
+     * If a theme is present, we want to make sure that theme cascades to portaled element.
+     */
+    if (themeContext) {
+      return root
+        ? ReactDOM.createPortal(
+            <Theme theme={themeContext.theme} asChild hasBackground={false}>
+              <Component ref={ref} data-aksel-portal="" {...rest} />
+            </Theme>,
+            root,
+          )
+        : null;
+    }
+
     return root
       ? ReactDOM.createPortal(
           <Component ref={ref} data-aksel-portal="" {...rest} />,

package/src/provider/index.ts

@@ -1,6 +1,2 @@
 "use client";
 export { default as Provider, type ProviderProps } from "./Provider";
-export {
-  AkselTheme as UNSAFE_AkselTheme,
-  useAkselTheme as UNSAFE_useAkselTheme,
-} from "./theme/AkselTheme";

package/src/read-more/ReadMore.tsx

@@ -1,7 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { UNSAFE_useAkselTheme } from "../provider";
 import { BodyLong } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -75,8 +74,6 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
       onChange: onOpenChange,
     });
 
-    const themeContext = UNSAFE_useAkselTheme(false);
-
     const typoSize = size === "small" ? "small" : "medium";
 
     return (
@@ -87,7 +84,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           className,
           { "navds-read-more--open": _open },
         )}
-        data-volume={themeContext?.volume}
+        data-volume="low"
       >
         <button
           {...rest}

package/src/tag/Tag.tsx

@@ -31,7 +31,13 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
     | "alt2-moderate"
     | "alt3"
     | "alt3-filled"
-    | "alt3-moderate";
+    | "alt3-moderate"
+    | "meta-purple"
+    | "meta-purple-filled"
+    | "meta-purple-moderate"
+    | "meta-lime"
+    | "meta-lime-filled"
+    | "meta-lime-moderate";
   /**
    * @default "medium"
    */
@@ -54,23 +60,31 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
  * ```
  */
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ children, className, variant, size = "medium", icon, ...rest }, ref) => (
-    <BodyShort
-      {...rest}
-      ref={ref}
-      as="span"
-      size={size === "medium" ? "medium" : "small"}
-      className={cl(
-        "navds-tag",
-        className,
-        `navds-tag--${variant}`,
-        `navds-tag--${size}`,
-      )}
-    >
-      {icon && <span className="navds-tag__icon--left">{icon}</span>}
-      {children}
-    </BodyShort>
-  ),
+  ({ children, className, variant, size = "medium", icon, ...rest }, ref) => {
+    const filledVariant = variant?.endsWith("-filled") && "strong";
+    const moderateVariant = variant?.endsWith("-moderate") && "moderate";
+    const color = variant?.replace("-filled", "").replace("-moderate", "");
+
+    return (
+      <BodyShort
+        {...rest}
+        ref={ref}
+        as="span"
+        size={size === "medium" ? "medium" : "small"}
+        className={cl(
+          "navds-tag",
+          className,
+          `navds-tag--${variant}`,
+          `navds-tag--${size}`,
+          `navds-tag--${filledVariant || moderateVariant || "outline"}`,
+          `navds-tag--${color}`,
+        )}
+      >
+        {icon && <span className="navds-tag__icon--left">{icon}</span>}
+        {children}
+      </BodyShort>
+    );
+  },
 );
 
 export default Tag;

package/src/theme/Theme.tsx

@@ -0,0 +1,60 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { Slot } from "../slot/Slot";
+import { createContext } from "../util/create-context";
+import { AsChildProps } from "../util/types";
+
+type ThemeContext = {
+  /**
+   * Color theme
+   * @default "light"
+   */
+  theme: "light" | "dark";
+};
+
+const [ThemeProvider, useThemeInternal] = createContext<ThemeContext>({
+  hookName: "useTheme",
+  name: "ThemeProvider",
+  providerName: "ThemeProvider",
+});
+
+type ThemeProps = {
+  className?: string;
+  hasBackground?: boolean;
+} & ThemeContext &
+  AsChildProps;
+
+const Theme = forwardRef<HTMLDivElement, ThemeProps>(
+  (props: ThemeProps, ref) => {
+    const context = useThemeInternal(false);
+
+    const {
+      children,
+      className,
+      asChild = false,
+      theme = context?.theme ?? "light",
+      hasBackground: hasBackgroundProp = true,
+    } = props;
+
+    const isRoot = context === undefined;
+
+    const hasBackground =
+      hasBackgroundProp ?? (isRoot && props.theme !== undefined);
+
+    const SlotElement = asChild ? Slot : "div";
+
+    return (
+      <ThemeProvider theme={theme}>
+        <SlotElement
+          ref={ref}
+          className={cl("navds-theme", className, theme)}
+          data-background={hasBackground}
+        >
+          {children}
+        </SlotElement>
+      </ThemeProvider>
+    );
+  },
+);
+
+export { Theme, useThemeInternal };

package/src/theme/index.ts

@@ -0,0 +1,2 @@
+"use client";
+export { Theme } from "./Theme";