@navikt/ds-react 7.8.1 → 7.9.1

package/src/date/parts/DateWrapper.tsx

@@ -5,7 +5,8 @@ import { Modal } from "../../modal";
 import { useModalContext } from "../../modal/Modal.context";
 import { Popover } from "../../popover";
 import { useMedia } from "../../util/hooks";
-import { TFunction, useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
+import { TFunction } from "../../util/i18n/i18n.types";
 import { getGlobalTranslations } from "../utils";
 
 const variantToLabel = {

package/src/expansion-card/ExpansionCardHeader.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 import { ExpansionCardContext } from "./context";
 
 export interface ExpansionCardHeaderProps

package/src/form/ReadOnlyIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 export const ReadOnlyIcon = () => (
   <PadlockLockedFillIcon

package/src/form/combobox/Combobox.tsx

@@ -71,7 +71,11 @@ export const Combobox = forwardRef<
         aria-relevant="additions removals"
         aria-live="polite"
       >
-        {showErrorMsg && <ErrorMessage size={size}>{error}</ErrorMessage>}
+        {showErrorMsg && (
+          <ErrorMessage size={size} showIcon>
+            {error}
+          </ErrorMessage>
+        )}
       </div>
     </ComboboxWrapper>
   );

package/src/form/combobox/FilteredOptions/AddNewOption.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React from "react";
 import { PlusIcon } from "@navikt/aksel-icons";
 import { BodyShort, Label } from "../../../typography";
-import { useI18n } from "../../../util/i18n/i18n.context";
+import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { isInList, toComboboxOption } from "../combobox-utils";

package/src/form/combobox/FilteredOptions/LoadingMessage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Loader } from "../../../loader";
-import { useI18n } from "../../../util/i18n/i18n.context";
+import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import filteredOptionsUtil from "./filtered-options-util";
 

package/src/form/combobox/FilteredOptions/MaxSelectedMessage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useI18n } from "../../../util/i18n/i18n.context";
+import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import filteredOptionsUtil from "./filtered-options-util";

package/src/form/confirmation-panel/ConfirmationPanel.tsx

@@ -91,7 +91,11 @@ export const ConfirmationPanel = forwardRef<
         </Checkbox>
       </div>
       <div className="navds-form-field__error" id={errorId} role="alert">
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+        {showErrorMsg && (
+          <ErrorMessage size={size} showIcon>
+            {props.error}
+          </ErrorMessage>
+        )}
       </div>
     </div>
   );

package/src/form/error-summary/ErrorSummary.tsx

@@ -3,7 +3,7 @@ import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { BodyShort, Heading } from "../../typography";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { useMergeRefs } from "../../util/hooks";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import ErrorSummaryItem from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps

package/src/form/fieldset/Fieldset.tsx

@@ -113,7 +113,9 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             className="navds-fieldset__error"
           >
             {showErrorMsg && (
-              <ErrorMessage size={size}>{props.error}</ErrorMessage>
+              <ErrorMessage size={size} showIcon>
+                {props.error}
+              </ErrorMessage>
             )}
           </div>
         </fieldset>

package/src/form/file-upload/parts/dropzone/Dropzone.tsx

@@ -5,7 +5,7 @@ import { Button } from "../../../../button";
 import { BodyShort, ErrorMessage, Label } from "../../../../typography";
 import { composeEventHandlers } from "../../../../util/composeEventHandlers";
 import { useId } from "../../../../util/hooks";
-import { useI18n } from "../../../../util/i18n/i18n.context";
+import { useI18n } from "../../../../util/i18n/i18n.hooks";
 import { omit } from "../../../../util/omit";
 import { useFormField } from "../../../useFormField";
 import { useFileUploadTranslation } from "../../FileUpload.context";
@@ -177,7 +177,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
           aria-relevant="additions removals"
           aria-live="polite"
         >
-          {showErrorMsg && <ErrorMessage>{error}</ErrorMessage>}
+          {showErrorMsg && <ErrorMessage showIcon>{error}</ErrorMessage>}
         </div>
       </div>
     );

package/src/form/file-upload/parts/item/Item.tsx

@@ -3,7 +3,7 @@ import React, { MouseEvent, forwardRef } from "react";
 import { ExclamationmarkTriangleIcon } from "@navikt/aksel-icons";
 import { BodyShort } from "../../../../typography";
 import { OverridableComponent } from "../../../../util";
-import { useI18n } from "../../../../util/i18n/i18n.context";
+import { useI18n } from "../../../../util/i18n/i18n.hooks";
 import { ComponentTranslation } from "../../../../util/i18n/i18n.types";
 import { useFileUploadTranslation } from "../../FileUpload.context";
 import { FileItem } from "./Item.types";

package/src/form/form-progress/FormProgress.tsx

@@ -6,7 +6,7 @@ import { HStack } from "../../layout/stack";
 import { ProgressBar } from "../../progress-bar";
 import { Stepper, StepperStepProps } from "../../stepper";
 import { BodyShort } from "../../typography";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import { ComponentTranslation } from "../../util/i18n/i18n.types";
 
 export interface FormProgressProps

package/src/form/form-summary/FormSummaryEditLink.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Link } from "../../link";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import { OverridableComponent } from "../../util/types";
 
 export interface FormSummaryEditProps

package/src/form/search/Search.tsx

@@ -7,11 +7,11 @@ import React, {
 } from "react";
 import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../../button";
-import { UNSAFE_useAkselTheme } from "../../provider";
+import { useThemeInternal } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";
 import { SearchContext } from "./context";
@@ -125,7 +125,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       ...rest
     } = props;
 
-    const themeContext = UNSAFE_useAkselTheme(false);
+    const themeContext = useThemeInternal(false);
 
     const searchRef = useRef<HTMLInputElement | null>(null);
     const mergedRef = useMergeRefs(searchRef, ref);
@@ -263,7 +263,9 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           aria-live="polite"
         >
           {showErrorMsg && (
-            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+            <ErrorMessage size={size} showIcon>
+              {props.error}
+            </ErrorMessage>
           )}
         </div>
       </div>

package/src/form/search/SearchButton.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef, useContext } from "react";
 import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import { Button, ButtonProps } from "../../button";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import { SearchContext } from "./context";
 
 export interface SearchButtonProps

package/src/form/select/Select.tsx

@@ -151,7 +151,9 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           aria-live="polite"
         >
           {showErrorMsg && (
-            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+            <ErrorMessage size={size} showIcon>
+              {props.error}
+            </ErrorMessage>
           )}
         </div>
       </div>

package/src/form/switch/Switch.tsx

@@ -6,7 +6,6 @@ import React, {
   useState,
 } from "react";
 import { Loader } from "../../loader";
-import { UNSAFE_useAkselTheme } from "../../provider";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
@@ -69,8 +68,6 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       defaultChecked ?? checkedProp ?? false,
     );
 
-    const themeContext = UNSAFE_useAkselTheme(false);
-
     useEffect(() => {
       checkedProp !== undefined && setChecked(checkedProp);
     }, [checkedProp]);
@@ -121,13 +118,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
               <Loader
                 size="xsmall"
                 aria-live="polite"
-                variant={
-                  checked
-                    ? "interaction"
-                    : themeContext
-                      ? "inverted"
-                      : "neutral"
-                }
+                variant={checked ? "interaction" : "inverted"}
               />
             ) : (
               <svg

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/textarea/TextareaCounter.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { useEffect, useState } from "react";
 import { BodyShort } from "../../typography";
 import debounce from "../../util/debounce";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import type { TextareaProps } from "./Textarea";
 
 interface Props {

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/guide-panel/Illustration.darkside.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 export const DarksideGudiepanelIllustration = () => {
   const translate = useI18n("GuidePanel");

package/src/guide-panel/Illustration.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 export const DefaultIllustration = () => {
   const translate = useI18n("GuidePanel");

package/src/help-text/HelpText.tsx

@@ -1,10 +1,10 @@
 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";
+import { useI18n } from "../util/i18n/i18n.hooks";
 import { HelpTextIcon } from "./HelpTextIcon";
 
 export interface HelpTextProps
@@ -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.tsx

@@ -1,8 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { type BorderRadiusKeys } from "@navikt/ds-tokens/types";
-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, {
@@ -109,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/loader/Loader.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { SVGProps, forwardRef } from "react";
 import { omit } from "../util";
 import { useId } from "../util/hooks";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
   /**

package/src/modal/ModalHeader.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../button";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 import { useModalContext } from "./Modal.context";
 
 export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {

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/Pagination.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import { BodyShort, Heading } from "../typography";
 import { useId } from "../util";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 import PaginationItem, {
   PaginationItemProps,
   PaginationItemType,

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/progress-bar/ProgressBar.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, useEffect, useRef } from "react";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 interface ProgressBarPropsBase
   extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {

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";