@navikt/ds-react 7.8.0 → 7.9.0

package/src/timeline/Pin.tsx

@@ -15,6 +15,7 @@ import {
 } from "@floating-ui/react";
 import { format } from "date-fns";
 import React, { forwardRef, useRef, useState } from "react";
+import { useThemeInternal } from "../theme/Theme";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { useI18n } from "../util/i18n/i18n.context";
 import { useTimelineContext } from "./hooks/useTimelineContext";
@@ -47,6 +48,9 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const translate = useI18n("Timeline");
 
+    const themeContext = useThemeInternal(false);
+    const showArrow = !themeContext;
+
     const {
       context,
       placement,
@@ -59,7 +63,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
       onOpenChange: (_open) => setOpen(_open),
       whileElementsMounted: autoUpdate,
       middleware: [
-        offset(16),
+        offset(showArrow ? 16 : 8),
         shift(),
         flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         flArrow({ element: arrowRef, padding: 5 }),
@@ -135,15 +139,17 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
               style={floatingStyles}
             >
               {children}
-              <div
-                ref={arrowRef}
-                style={{
-                  ...(arrowX != null ? { left: arrowX } : {}),
-                  ...(arrowY != null ? { top: arrowY } : {}),
-                  ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
-                }}
-                className="navds-timeline__popover-arrow"
-              />
+              {showArrow && (
+                <div
+                  ref={arrowRef}
+                  style={{
+                    ...(arrowX != null ? { left: arrowX } : {}),
+                    ...(arrowY != null ? { top: arrowY } : {}),
+                    ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
+                  }}
+                  className="navds-timeline__popover-arrow"
+                />
+              )}
             </div>
           </FloatingFocusManager>
         )}

package/src/timeline/hooks/useTimelineRows.ts

@@ -134,17 +134,33 @@ export const useTimelineRows = (
     [rows, startDate, endDate, direction],
   );
 
-const earliestDate = (earliest: Date, period: Period) =>
-  period.start < earliest ? period.start : earliest;
+export const useEarliestDate = ({
+  startDate,
+  rows,
+}: {
+  startDate?: Date;
+  rows: Pick<Period, "start">[][];
+}) =>
+  useMemo(() => {
+    if (startDate) {
+      return startDate;
+    }
 
-const earliestFomDate = (rader: Period[][]) =>
-  rader.flat().reduce(earliestDate, new Date());
+    const startDates = rows
+      .flat()
+      .filter((period) => period.start)
+      .map((period) => period.start);
 
-export const useEarliestDate = ({ startDate, rows }: any) =>
-  useMemo(
-    () => (startDate ? startDate : earliestFomDate(rows)),
-    [startDate, rows],
-  );
+    if (startDates.length === 0) {
+      return new Date();
+    }
+
+    const earliestDate = startDates.reduce((earliest, current) =>
+      current < earliest ? current : earliest,
+    );
+
+    return earliestDate;
+  }, [startDate, rows]);
 
 const latestDate = (latest: Date, period: Period) =>
   period.end > latest ? period.end : latest;

package/src/timeline/period/ClickablePeriod.tsx

@@ -15,6 +15,7 @@ import {
 } from "@floating-ui/react";
 import cl from "clsx";
 import React, { useRef, useState } from "react";
+import { useThemeInternal } from "../../theme/Theme";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { useI18n } from "../../util/i18n/i18n.context";
 import { usePeriodContext } from "../hooks/usePeriodContext";
@@ -55,6 +56,9 @@ const ClickablePeriod = React.memo(
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const translate = useI18n("Timeline");
 
+    const themeContext = useThemeInternal(false);
+    const showArrow = !themeContext;
+
     const {
       context,
       placement,
@@ -67,7 +71,7 @@ const ClickablePeriod = React.memo(
       onOpenChange: (_open) => setOpen(_open),
       whileElementsMounted: autoUpdate,
       middleware: [
-        offset(16),
+        offset(showArrow ? 16 : 8),
         shift(),
         flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         flArrow({ element: arrowRef, padding: 5 }),
@@ -164,15 +168,17 @@ const ClickablePeriod = React.memo(
               style={floatingStyles}
             >
               {children}
-              <div
-                ref={arrowRef}
-                style={{
-                  ...(arrowX != null ? { left: arrowX } : {}),
-                  ...(arrowY != null ? { top: arrowY } : {}),
-                  ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
-                }}
-                className="navds-timeline__popover-arrow"
-              />
+              {showArrow && (
+                <div
+                  ref={arrowRef}
+                  style={{
+                    ...(arrowX != null ? { left: arrowX } : {}),
+                    ...(arrowY != null ? { top: arrowY } : {}),
+                    ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
+                  }}
+                  className="navds-timeline__popover-arrow"
+                />
+              )}
             </div>
           </FloatingFocusManager>
         )}

package/src/timeline/tests/useTimelineRows.test.ts

@@ -0,0 +1,131 @@
+import { renderHook } from "@testing-library/react";
+import { addDays, isSameDay } from "date-fns";
+import { describe, expect, test } from "vitest";
+import {
+  useEarliestDate,
+  useLatestDate,
+  useTimelineRows,
+} from "../hooks/useTimelineRows";
+
+describe("useEarliestDate", () => {
+  test("returns the provided startDate if it exists", () => {
+    const startDate = new Date(2023, 0, 1);
+    const { result } = renderHook(() =>
+      useEarliestDate({ startDate, rows: [] }),
+    );
+    expect(result.current).toEqual(startDate);
+  });
+
+  test("returns the earliest date from the rows if startDate is not provided", () => {
+    const rows = [
+      [{ start: new Date(2023, 0, 1) }],
+      [{ start: new Date(2022, 0, 1) }],
+    ];
+
+    const { result } = renderHook(() => useEarliestDate({ rows }));
+    expect(result.current).toEqual(new Date(2022, 0, 1));
+  });
+
+  test("returns the earliest date from the rows if startDate is not provided and date is later than todays date", () => {
+    const earliestDate = addDays(new Date(), 400);
+    const rows = [
+      [{ start: earliestDate }],
+      [{ start: addDays(earliestDate, 40) }],
+    ];
+
+    const { result } = renderHook(() => useEarliestDate({ rows }));
+    expect(result.current).toEqual(earliestDate);
+  });
+
+  test("returns the current date if no startDate and rows are empty", () => {
+    const { result } = renderHook(() => useEarliestDate({ rows: [] }));
+    expect(isSameDay(result.current, new Date())).toBeTruthy();
+  });
+});
+
+describe("useLatestDate", () => {
+  test("returns the provided endDate if it exists", () => {
+    const endDate = new Date(2023, 0, 1);
+    const { result } = renderHook(() => useLatestDate({ endDate, rows: [] }));
+    expect(result.current).toEqual(endDate);
+  });
+
+  test("returns the latest date from the rows plus one day if endDate is not provided", () => {
+    const rows = [
+      [{ start: new Date(2023, 0, 1), end: new Date(2023, 0, 10) }],
+      [{ start: new Date(2022, 0, 1), end: new Date(2022, 0, 5) }],
+    ];
+    const { result } = renderHook(() => useLatestDate({ rows }));
+    expect(result.current).toEqual(addDays(new Date(2023, 0, 10), 1));
+  });
+
+  test("returns the current date plus one day if no endDate and rows are empty", () => {
+    const { result } = renderHook(() => useLatestDate({ rows: [] }));
+    expect(result.current).toEqual(addDays(new Date(0), 1));
+  });
+});
+
+describe("useTimelineRows", () => {
+  const rows = [
+    {
+      label: "Row 1",
+      periods: [
+        {
+          start: new Date(2023, 0, 1),
+          end: new Date(2023, 0, 10),
+          status: "active",
+        },
+        {
+          start: new Date(2023, 0, 15),
+          end: new Date(2023, 0, 20),
+          status: "inactive",
+        },
+      ],
+    },
+    {
+      label: "Row 2",
+      periods: [
+        {
+          start: new Date(2022, 0, 1),
+          end: new Date(2022, 0, 5),
+          status: "active",
+        },
+      ],
+    },
+  ];
+
+  test("returns the correct timeline rows", () => {
+    const startDate = new Date(2022, 0, 1);
+    const endDate = new Date(2023, 0, 31);
+    const direction = "left";
+    const { result } = renderHook(() =>
+      useTimelineRows(rows, startDate, endDate, direction),
+    );
+
+    expect(result.current).toHaveLength(2);
+    expect(result.current[0].periods).toHaveLength(2);
+    expect(result.current[1].periods).toHaveLength(1);
+  });
+
+  test("handles empty rows", () => {
+    const startDate = new Date(2022, 0, 1);
+    const endDate = new Date(2023, 0, 31);
+    const direction = "left";
+    const { result } = renderHook(() =>
+      useTimelineRows([], startDate, endDate, direction),
+    );
+
+    expect(result.current).toHaveLength(0);
+  });
+
+  test("handles different directions", () => {
+    const startDate = new Date(2022, 0, 1);
+    const endDate = new Date(2023, 0, 31);
+    const direction = "right";
+    const { result } = renderHook(() =>
+      useTimelineRows(rows, startDate, endDate, direction),
+    );
+
+    expect(result.current[0].periods[0].start).toEqual(new Date(2023, 0, 15));
+  });
+});

package/src/toggle-group/parts/ToggleItem.tsx

@@ -76,6 +76,7 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
         type="button"
         role="radio"
         aria-checked={itemCtx.isSelected}
+        data-selected={itemCtx.isSelected}
         tabIndex={itemCtx.isFocused ? 0 : -1}
         onClick={itemCtx.onClick}
         onFocus={itemCtx.onFocus}

package/src/tooltip/Tooltip.tsx

@@ -16,6 +16,7 @@ import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
 import { Portal } from "../portal";
 import { Slot } from "../slot/Slot";
+import { useThemeInternal } from "../theme/Theme";
 import { Detail } from "../typography";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -123,6 +124,9 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     },
     ref,
   ) => {
+    const themeContext = useThemeInternal(false);
+    const showArrow = _arrow && !themeContext;
+
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
       value: open,
@@ -149,7 +153,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       open: _open,
       onOpenChange: (newState) => _setOpen(newState),
       middleware: [
-        offset(_offset ? _offset : _arrow ? 10 : 2),
+        offset(_offset ?? (themeContext ? 8 : _arrow ? 16 : 4)),
         shift(),
         flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         flArrow({ element: arrowRef, padding: 5 }),
@@ -228,6 +232,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                 ),
               })}
               data-side={placement}
+              data-state="open"
             >
               {content}
               {keys && (
@@ -239,7 +244,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                   ))}
                 </span>
               )}
-              {_arrow && (
+              {showArrow && (
                 <div
                   ref={(node) => {
                     arrowRef.current = node;

package/src/typography/ErrorMessage.tsx

@@ -16,6 +16,10 @@ export interface ErrorMessageProps
    * Error text.
    */
   children: React.ReactNode;
+  /**
+   * Render a triangular warning icon.
+   */
+  showIcon?: boolean;
 }
 
 /**
@@ -36,7 +40,18 @@ export const ErrorMessage: OverridableComponent<
   ErrorMessageProps,
   HTMLParagraphElement
 > = forwardRef(
-  ({ className, size, spacing, as: Component = "p", ...rest }, ref) => (
+  (
+    {
+      children,
+      className,
+      size,
+      spacing,
+      as: Component = "p",
+      showIcon = false,
+      ...rest
+    },
+    ref,
+  ) => (
     <Component
       {...rest}
       ref={ref}
@@ -49,9 +64,28 @@ export const ErrorMessage: OverridableComponent<
         }),
         {
           "navds-label--small": size === "small",
+          "navds-error-message--show-icon": showIcon,
         },
       )}
-    />
+    >
+      {showIcon && (
+        <svg
+          viewBox="0 0 17 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.49209 11.534L8.11398 2.7594C8.48895 2.04752 9.50833 2.04743 9.88343 2.75924L14.5073 11.5339C14.8582 12.1998 14.3753 13 13.6226 13H4.37685C3.6242 13 3.14132 12.1999 3.49209 11.534ZM9.74855 10.495C9.74855 10.9092 9.41276 11.245 8.99855 11.245C8.58433 11.245 8.24855 10.9092 8.24855 10.495C8.24855 10.0808 8.58433 9.74497 8.99855 9.74497C9.41276 9.74497 9.74855 10.0808 9.74855 10.495ZM9.49988 5.49997C9.49988 5.22383 9.27602 4.99997 8.99988 4.99997C8.72373 4.99997 8.49988 5.22383 8.49988 5.49997V7.99997C8.49988 8.27611 8.72373 8.49997 8.99988 8.49997C9.27602 8.49997 9.49988 8.27611 9.49988 7.99997V5.49997Z"
+            fill="currentColor"
+          />
+        </svg>
+      )}
+      {children}
+    </Component>
   ),
 );
 

package/src/util/TextareaAutoSize.tsx

@@ -167,19 +167,23 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
         });
       };
 
-      const handleResize = debounce(() => {
-        renders.current = 0;
-
-        if (inputRef.current?.style.height || inputRef.current?.style.width) {
-          // User has resized manually
-          if (inputRef.current?.style.overflow === "hidden") {
-            setState((oldState) => ({ ...oldState, overflow: false })); // The state update isn't important, we just need to trigger a rerender
+      const handleResize = debounce(
+        () => {
+          renders.current = 0;
+
+          if (inputRef.current?.style.height || inputRef.current?.style.width) {
+            // User has resized manually
+            if (inputRef.current?.style.overflow === "hidden") {
+              setState((oldState) => ({ ...oldState, overflow: false })); // The state update isn't important, we just need to trigger a rerender
+            }
+            return;
           }
-          return;
-        }
 
-        syncHeightWithFlushSync();
-      });
+          syncHeightWithFlushSync();
+        },
+        166,
+        true,
+      );
 
       const input = inputRef.current!;
       const containerWindow = ownerWindow(input);

package/src/util/debounce.ts

@@ -1,11 +1,19 @@
 "use client";
 // https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/debounce.js
-export default function debounce(func, wait = 166) {
-  let timeout: ReturnType<typeof setTimeout>;
-  function debounced(this: any, ...args) {
+export default function debounce<T extends unknown[]>(
+  func: (...args: T) => void,
+  wait = 166,
+  leading = false,
+) {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  function debounced(this: any, ...args: T) {
     const later = () => {
+      timeout = undefined;
       func.apply(this, args);
     };
+    if (!timeout && leading) {
+      later();
+    }
     clearTimeout(timeout);
     timeout = setTimeout(later, wait);
   }

package/cjs/provider/theme/AkselTheme.d.ts

@@ -1,22 +0,0 @@
-import React from "react";
-type AkselThemeContext = {
-    /**
-     * Color theme
-     * @default "light"
-     */
-    theme?: "light" | "dark";
-    /**
-     * Brand volume
-     * @default "low"
-     * This is experimental and subject to changes
-     */
-    volume?: "high" | "low";
-};
-declare const useAkselTheme: <S extends boolean = true>(strict?: S) => S extends true ? AkselThemeContext : AkselThemeContext | undefined;
-declare const AkselTheme: React.ForwardRefExoticComponent<{
-    children: React.ReactNode;
-    className?: string;
-    hasBackground?: boolean;
-    asChild?: boolean;
-} & AkselThemeContext & React.RefAttributes<HTMLDivElement>>;
-export { AkselTheme, useAkselTheme };

package/cjs/provider/theme/AkselTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AkselTheme.js","sourceRoot":"","sources":["../../../src/provider/theme/AkselTheme.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,0CAAuC;AACvC,8DAA0D;AAgB1D,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC,GAAG,IAAA,8BAAa,EAAoB;IACtE,YAAY,EAAE,sDAAsD;IACpE,QAAQ,EAAE,eAAe;IACzB,IAAI,EAAE,oBAAoB;IAC1B,YAAY,EAAE,oBAAoB;CACnC,CAAC,CAAC;AA6CkB,sCAAa;AAnClC,MAAM,UAAU,GAAG,IAAA,kBAAU,EAC3B,CAAC,KAAsB,EAAE,GAAG,EAAE,EAAE;;IAC9B,MAAM,OAAO,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAErC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,mCAAI,OAAO,EACjC,MAAM,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,mCAAI,KAAK,EACjC,aAAa,EAAE,iBAAiB,GAAG,IAAI,GACxC,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,OAAO,KAAK,SAAS,CAAC;IAErC,MAAM,aAAa,GACjB,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAE3C,OAAO,CACL,8BAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM;QACzC,8BAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EAAC,aAAa,EAAE,SAAS,EAAE,KAAK,CAAC,qBAC7B,aAAa,iBACjB,MAAM,IAElB,QAAQ,CACG,CACA,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,gCAAU"}

package/esm/provider/theme/AkselTheme.d.ts

@@ -1,22 +0,0 @@
-import React from "react";
-type AkselThemeContext = {
-    /**
-     * Color theme
-     * @default "light"
-     */
-    theme?: "light" | "dark";
-    /**
-     * Brand volume
-     * @default "low"
-     * This is experimental and subject to changes
-     */
-    volume?: "high" | "low";
-};
-declare const useAkselTheme: <S extends boolean = true>(strict?: S) => S extends true ? AkselThemeContext : AkselThemeContext | undefined;
-declare const AkselTheme: React.ForwardRefExoticComponent<{
-    children: React.ReactNode;
-    className?: string;
-    hasBackground?: boolean;
-    asChild?: boolean;
-} & AkselThemeContext & React.RefAttributes<HTMLDivElement>>;
-export { AkselTheme, useAkselTheme };

package/esm/provider/theme/AkselTheme.js

@@ -1,22 +0,0 @@
-import cl from "clsx";
-import React, { forwardRef } from "react";
-import { Slot } from "../../slot/Slot.js";
-import { createContext } from "../../util/create-context.js";
-const [ThemeProvider, useAkselTheme] = createContext({
-    errorMessage: "useAkselTheme must be used within AkselThemeProvider",
-    hookName: "useAkselTheme",
-    name: "AkselThemeProvider",
-    providerName: "AkselThemeProvider",
-});
-const AkselTheme = forwardRef((props, ref) => {
-    var _a, _b;
-    const context = useAkselTheme(false);
-    const { children, className, asChild = false, theme = (_a = context === null || context === void 0 ? void 0 : context.theme) !== null && _a !== void 0 ? _a : "light", volume = (_b = context === null || context === void 0 ? void 0 : context.volume) !== null && _b !== void 0 ? _b : "low", hasBackground: hasBackgroundProp = true, } = props;
-    const isRoot = context === undefined;
-    const hasBackground = hasBackgroundProp !== null && hasBackgroundProp !== void 0 ? hasBackgroundProp : (isRoot || props.theme !== undefined);
-    const SlotElement = asChild ? Slot : "div";
-    return (React.createElement(ThemeProvider, { theme: theme, volume: volume },
-        React.createElement(SlotElement, { ref: ref, className: cl("navds-theme", className, theme), "data-background": hasBackground, "data-volume": volume }, children)));
-});
-export { AkselTheme, useAkselTheme };
-//# sourceMappingURL=AkselTheme.js.map

package/esm/provider/theme/AkselTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AkselTheme.js","sourceRoot":"","sources":["../../../src/provider/theme/AkselTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAgB1D,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC,GAAG,aAAa,CAAoB;IACtE,YAAY,EAAE,sDAAsD;IACpE,QAAQ,EAAE,eAAe;IACzB,IAAI,EAAE,oBAAoB;IAC1B,YAAY,EAAE,oBAAoB;CACnC,CAAC,CAAC;AAUH,MAAM,UAAU,GAAG,UAAU,CAC3B,CAAC,KAAsB,EAAE,GAAG,EAAE,EAAE;;IAC9B,MAAM,OAAO,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAErC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,mCAAI,OAAO,EACjC,MAAM,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,mCAAI,KAAK,EACjC,aAAa,EAAE,iBAAiB,GAAG,IAAI,GACxC,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,OAAO,KAAK,SAAS,CAAC;IAErC,MAAM,aAAa,GACjB,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAE3C,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM;QACzC,oBAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,KAAK,CAAC,qBAC7B,aAAa,iBACjB,MAAM,IAElB,QAAQ,CACG,CACA,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC"}

package/src/provider/theme/AkselTheme.tsx

@@ -1,70 +0,0 @@
-import cl from "clsx";
-import React, { forwardRef } from "react";
-import { Slot } from "../../slot/Slot";
-import { createContext } from "../../util/create-context";
-
-type AkselThemeContext = {
-  /**
-   * Color theme
-   * @default "light"
-   */
-  theme?: "light" | "dark";
-  /**
-   * Brand volume
-   * @default "low"
-   * This is experimental and subject to changes
-   */
-  volume?: "high" | "low";
-};
-
-const [ThemeProvider, useAkselTheme] = createContext<AkselThemeContext>({
-  errorMessage: "useAkselTheme must be used within AkselThemeProvider",
-  hookName: "useAkselTheme",
-  name: "AkselThemeProvider",
-  providerName: "AkselThemeProvider",
-});
-
-type AkselThemeProps = {
-  children: React.ReactNode;
-  className?: string;
-  hasBackground?: boolean;
-  /* TODO: Handle this correctly with types */
-  asChild?: boolean;
-} & AkselThemeContext;
-
-const AkselTheme = forwardRef<HTMLDivElement, AkselThemeProps>(
-  (props: AkselThemeProps, ref) => {
-    const context = useAkselTheme(false);
-
-    const {
-      children,
-      className,
-      asChild = false,
-      theme = context?.theme ?? "light",
-      volume = context?.volume ?? "low",
-      hasBackground: hasBackgroundProp = true,
-    } = props;
-
-    const isRoot = context === undefined;
-
-    const hasBackground =
-      hasBackgroundProp ?? (isRoot || props.theme !== undefined);
-
-    const SlotElement = asChild ? Slot : "div";
-
-    return (
-      <ThemeProvider theme={theme} volume={volume}>
-        <SlotElement
-          ref={ref}
-          className={cl("navds-theme", className, theme)}
-          data-background={hasBackground}
-          data-volume={volume}
-        >
-          {children}
-        </SlotElement>
-      </ThemeProvider>
-    );
-  },
-);
-
-export { AkselTheme, useAkselTheme };