@ndla/primitives 0.0.12 → 0.0.13

package/lib/Select.d.ts

@@ -11,41 +11,41 @@ import { TextProps } from "./Text";
 export type SelectRootProps<T extends Select.CollectionItem> = Select.RootProps<T> & JsxStyleProps;
 export declare const SelectRoot: <T extends Select.CollectionItem>({ lazyMount, unmountOnExit, ...props }: SelectRootProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const SelectClearTrigger: import("react").ForwardRefExoticComponent<Select.ClearTriggerProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const SelectContent: import("react").ForwardRefExoticComponent<Select.ContentProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectControl: import("react").ForwardRefExoticComponent<Select.ControlProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectIndicator: import("react").ForwardRefExoticComponent<Select.IndicatorProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectItemGroupLabel: import("react").ForwardRefExoticComponent<Select.ItemGroupLabelProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectItemGroup: import("react").ForwardRefExoticComponent<Select.ItemGroupProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectItemIndicator: import("react").ForwardRefExoticComponent<Select.ItemIndicatorProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectItem: import("react").ForwardRefExoticComponent<Select.ItemProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectItemText: import("react").ForwardRefExoticComponent<Select.ItemTextProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectLabel: import("react").ForwardRefExoticComponent<Select.LabelProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLLabelElement>>;
 export declare const SelectPositioner: import("react").ForwardRefExoticComponent<Select.PositionerProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectTrigger: import("react").ForwardRefExoticComponent<Select.TriggerProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const SelectValueText: import("react").ForwardRefExoticComponent<Select.ValueTextProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLSpanElement>>;

package/lib/Select.js

@@ -167,11 +167,11 @@ const SelectItemGroupLabel = exports.SelectItemGroupLabel = /*#__PURE__*/(0, _re
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalSelectItemGroupLabel, {
     asChild: true,
-    forwardCssProp: true,
     ref: ref,
     ...props,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
       asChild: true,
+      consumeCss: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         children: children
       })
@@ -191,7 +191,6 @@ const SelectLabel = exports.SelectLabel = /*#__PURE__*/(0, _react.forwardRef)((_
   } = _ref3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalSelectLabel, {
     asChild: true,
-    forwardCssProp: true,
     ref: ref,
     ...props,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {

package/lib/Skeleton.js

@@ -28,4 +28,6 @@ const Skeleton = exports.Skeleton = (0, _jsx.styled)(_react.ark.div, {
       visibility: "hidden"
     }
   }
+}, {
+  baseComponent: true
 });

package/lib/Slider.d.ts

@@ -10,19 +10,19 @@ import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
 export type SliderRootProps = Slider.RootProps & JsxStyleProps;
 export declare const SliderRoot: import("react").ForwardRefExoticComponent<Slider.RootProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SliderControl: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Slider.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SliderTrack: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Slider.TrackProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SliderRange: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Slider.RangeProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SliderThumb: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Slider.ThumbProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SliderLabel: ({ textStyle, ...props }: Slider.LabelProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SliderHiddenInput: import("react").ForwardRefExoticComponent<Slider.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/lib/Slider.js

@@ -98,7 +98,6 @@ const SliderLabel = _ref => {
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalSliderLabel, {
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
       textStyle: textStyle,
       ...props

package/lib/Spinner.d.ts

@@ -23,9 +23,9 @@ export declare const spinnerRecipe: import("@ndla/styled-system/types").RecipeRu
     };
 }>;
 export type SpinnerVariantProps = RecipeVariantProps<typeof spinnerRecipe>;
-export type SpinnerProps = HTMLArkProps<"div"> & SpinnerVariantProps & JsxStyleProps;
-export declare const Spinner: import("@ndla/styled-system/jsx").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {
+export type SpinnerProps = HTMLArkProps<"div"> & JsxStyleProps & SpinnerVariantProps;
+export declare const Spinner: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & {
     size?: "medium" | "large" | undefined;
-}>;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/lib/Spinner.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.spinnerRecipe = exports.Spinner = void 0;
-var _react = require("@ark-ui/react");
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
-var _jsx = require("@ndla/styled-system/jsx");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Copyright (c) 2024-present, NDLA.
  *
@@ -45,4 +47,20 @@ const spinnerRecipe = exports.spinnerRecipe = (0, _css.cva)({
     }
   }
 });
-const Spinner = exports.Spinner = (0, _jsx.styled)(_react.ark.div, spinnerRecipe);
+const StyledSpinner = (0, _jsx2.styled)(_react2.ark.div, {}, {
+  baseComponent: true
+});
+const Spinner = exports.Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    size,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSpinner, {
+    css: _css.css.raw(spinnerRecipe.raw({
+      size
+    }), cssProp),
+    ...props,
+    ref: ref
+  });
+});

package/lib/Switch.d.ts

@@ -13,13 +13,13 @@ declare const switchRecipe: import("@ndla/styled-system/types").SlotRecipeRuntim
 export type SwitchVariantProps = RecipeVariantProps<typeof switchRecipe>;
 export type SwitchRootProps = Switch.RootProps & JsxStyleProps & SwitchVariantProps;
 export declare const SwitchRoot: import("react").ForwardRefExoticComponent<Switch.RootProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & {} & import("react").RefAttributes<HTMLLabelElement>>;
 export declare const SwitchControl: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Switch.ControlProps & import("react").RefAttributes<HTMLSpanElement>>;
 export declare const SwitchThumb: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Switch.ThumbProps & import("react").RefAttributes<HTMLSpanElement>>;
 export declare const SwitchLabel: ({ textStyle, children, ...props }: Switch.LabelProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SwitchHiddenInput: import("react").ForwardRefExoticComponent<Switch.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/lib/Switch.js

@@ -58,7 +58,7 @@ const switchRecipe = (0, _css.sva)({
       justifyContent: "center",
       background: "icon.onAction",
       borderRadius: "full",
-      boxShadow: "xsmall",
+      boxShadow: "small",
       transitionDuration: "fast",
       transitionProperty: "transform",
       transitionTimingFunction: "default",
@@ -115,9 +115,9 @@ const SwitchLabel = _ref => {
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalSwitchLabel, {
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
       asChild: true,
+      consumeCss: true,
       textStyle: textStyle,
       ...props,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/lib/Table.js

@@ -75,4 +75,6 @@ const Table = exports.Table = (0, _jsx.styled)(_react.ark.table, {
       }
     }
   }
+}, {
+  baseComponent: true
 });

package/lib/Tabs.d.ts

@@ -8,7 +8,7 @@
 import { Tabs } from "@ark-ui/react";
 import { RecipeVariantProps } from "@ndla/styled-system/css";
 import { JsxStyleProps } from "@ndla/styled-system/types";
-declare const tabsRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"content" | "list" | "root" | "indicator" | "trigger", {
+declare const tabsRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"list" | "content" | "root" | "indicator" | "trigger", {
     variant: {
         line: {
             trigger: {
@@ -133,13 +133,13 @@ export type TabsVariantProps = RecipeVariantProps<typeof tabsRecipe>;
 export type TabsRootProps = Tabs.RootProps & TabsVariantProps & JsxStyleProps;
 export declare const TabsRoot: ({ lazyMount, unmountOnExit, ...props }: TabsRootProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TabsContent: import("react").ForwardRefExoticComponent<Tabs.ContentProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const TabsIndicator: import("react").ForwardRefExoticComponent<Tabs.IndicatorProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const TabsList: import("react").ForwardRefExoticComponent<Tabs.ListProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const TabsTrigger: ({ className, ...props }: Tabs.TriggerProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/TagsInput.d.ts

@@ -10,32 +10,32 @@ import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
 export type TagsInputRootProps = TagsInput.RootProps & JsxStyleProps;
 export declare const TagsInputRoot: import("react").ForwardRefExoticComponent<TagsInput.RootProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const TagsInputClearTrigger: import("react").ForwardRefExoticComponent<TagsInput.ClearTriggerProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const TagsInputControl: import("react").ForwardRefExoticComponent<TagsInput.ControlProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const TagsInputInput: import("react").ForwardRefExoticComponent<TagsInput.InputProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLInputElement>>;
 export declare const TagsInputItemDeleteTrigger: import("react").ForwardRefExoticComponent<TagsInput.ItemDeleteTriggerProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const TagsInputItemInput: import("react").ForwardRefExoticComponent<TagsInput.ItemInputProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLInputElement>>;
 export declare const TagsInputItemPreview: import("react").ForwardRefExoticComponent<TagsInput.ItemPreviewProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const TagsInputItem: import("react").ForwardRefExoticComponent<TagsInput.ItemProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const TagsInputItemText: import("react").ForwardRefExoticComponent<TagsInput.ItemTextProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLSpanElement>>;
 export declare const TagsInputLabel: import("react").ForwardRefExoticComponent<TagsInput.LabelProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLLabelElement>>;

package/lib/TagsInput.js

@@ -117,7 +117,6 @@ const TagsInputLabel = exports.TagsInputLabel = /*#__PURE__*/(0, _react.forwardR
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalTagsInputLabel, {
     asChild: true,
-    forwardCssProp: true,
     ref: ref,
     ...props,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {

package/lib/Text.d.ts

@@ -14,8 +14,8 @@ export interface TextProps {
     srOnly?: boolean;
 }
 export declare const Text: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLParagraphElement>>;
 export declare const Heading: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLHeadingElement>>;

package/lib/Text.js

@@ -17,7 +17,9 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const StyledP = (0, _jsx2.styled)(_react2.ark.p);
+const StyledP = (0, _jsx2.styled)(_react2.ark.p, {}, {
+  baseComponent: true
+});
 const Text = exports.Text = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     textStyle = "body.medium",
@@ -38,7 +40,9 @@ const Text = exports.Text = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     ...rest
   });
 });
-const StyledH1 = (0, _jsx2.styled)(_react2.ark.h1);
+const StyledH1 = (0, _jsx2.styled)(_react2.ark.h1, {}, {
+  baseComponent: true
+});
 const Heading = exports.Heading = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     textStyle = "heading.medium",

package/lib/Toast.d.ts

@@ -12,10 +12,10 @@ export interface ToastRootProps extends Toast.RootProps, JsxStyleProps {
 }
 export declare const ToastRoot: import("react").ForwardRefExoticComponent<ToastRootProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ToastActionTrigger: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Toast.ActionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const ToastCloseTrigger: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Toast.CloseTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ToastDescription: ({ textStyle, children, ...props }: Toast.DescriptionProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ToastTitle: ({ textStyle, fontWeight, children, ...props }: JsxStyleProps & Toast.TitleProps & TextProps) => import("react/jsx-runtime").JSX.Element;

package/lib/Toast.js

@@ -62,9 +62,9 @@ const ToastDescription = _ref => {
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalToastDescription, {
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
       asChild: true,
+      consumeCss: true,
       textStyle: textStyle,
       ...props,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -84,9 +84,9 @@ const ToastTitle = _ref2 => {
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalToastTitle, {
     asChild: true,
-    forwardCssProp: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
       asChild: true,
+      consumeCss: true,
       fontWeight: fontWeight,
       textStyle: textStyle,
       ...props,

package/lib/Tooltip.d.ts

@@ -9,20 +9,20 @@ import { Tooltip } from "@ark-ui/react";
 export type TooltipRootProps = Tooltip.RootProps;
 export declare const TooltipRoot: (props: Tooltip.RootProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TooltipArrow: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Tooltip.ArrowProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const TooltipArrowTip: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Tooltip.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const TooltipContentStandalone: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Tooltip.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const TooltipContent: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Tooltip.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const TooltipPositioner: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Tooltip.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<{
-    forwardCssProp?: boolean | undefined;
+    consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Tooltip.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/createStyleContext.d.ts

@@ -17,13 +17,13 @@ type Slot<R extends Recipe> = keyof ReturnType<R>;
 /**
  * A utility for creating a style context for a recipe, allowing one to change the styles of all parts of a component from the root component. Credit: https://github.com/cschroeter/park-ui/blob/main/website/src/lib/create-style-context.tsx.
  */
+interface BaseStyleContextProps {
+    asChild?: boolean;
+    consumeCss?: boolean;
+}
 export declare const createStyleContext: <R extends Recipe>(recipe: R) => {
     withRootProvider: <P extends {}>(Component: ElementType) => (props: P) => import("react/jsx-runtime").JSX.Element;
-    withProvider: <T, P_1 extends {
-        className?: string | undefined;
-    } & WithCss>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_1> & RefAttributes<T>>;
-    withContext: <T_1, P_2 extends {
-        className?: string | undefined;
-    } & WithCss>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_2> & RefAttributes<T_1>>;
+    withProvider: <T, P_1 extends BaseStyleContextProps & WithCss>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_1> & RefAttributes<T>>;
+    withContext: <T_1, P_2 extends BaseStyleContextProps & WithCss>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_2> & RefAttributes<T_1>>;
 };
 export {};

package/lib/createStyleContext.js

@@ -19,6 +19,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A utility for creating a style context for a recipe, allowing one to change the styles of all parts of a component from the root component. Credit: https://github.com/cschroeter/park-ui/blob/main/website/src/lib/create-style-context.tsx.
  */
+
 const createStyleContext = recipe => {
   const StyleContext = /*#__PURE__*/(0, _react.createContext)(null);
   const withRootProvider = Component => {
@@ -35,7 +36,10 @@ const createStyleContext = recipe => {
     return StyledComponent;
   };
   const withProvider = (Component, slot) => {
-    const StyledComponent = (0, _jsx2.styled)(Component);
+    const opts = typeof Component === "string" ? undefined : {
+      baseComponent: true
+    };
+    const StyledComponent = (0, _jsx2.styled)(Component, {}, opts);
     return /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       let {
         css: cssProp,
@@ -54,7 +58,10 @@ const createStyleContext = recipe => {
     });
   };
   const withContext = (Component, slot) => {
-    const StyledComponent = (0, _jsx2.styled)(Component);
+    const opts = typeof Component === "string" ? undefined : {
+      baseComponent: true
+    };
+    const StyledComponent = (0, _jsx2.styled)(Component, {}, opts);
     return /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
       let {
         css: cssProp,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ndla/primitives",
-  "version": "0.0.12",
-  "description": "Primitive components for NDLA",
+  "version": "0.0.13",
+  "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -29,11 +29,11 @@
   ],
   "dependencies": {
     "@ark-ui/react": "^3.5.0",
-    "@ndla/styled-system": "^0.0.2",
+    "@ndla/styled-system": "^0.0.4",
     "@ndla/util": "^4.1.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.6",
+    "@ndla/preset-panda": "^0.0.8-alpha.0",
     "@pandacss/dev": "^0.41.0"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cd39d6776c53f6ac8c00a723b25c96f28cf465c0"
+  "gitHead": "937b25e89d29636e8709a6ce7d1189a7b57c34d5"
 }

package/es/Icon.js

@@ -1,74 +0,0 @@
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { cva, css } from "@ndla/styled-system/css";
-import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const iconRecipe = cva({
-  base: {
-    display: "inline-block",
-    fill: "currentcolor",
-    verticalAlign: "middle",
-    lineHeight: "1em",
-    flexShrink: "0"
-  },
-  defaultVariants: {
-    size: "medium"
-  },
-  variants: {
-    size: {
-      xsmall: {
-        width: "xsmall",
-        height: "xsmall"
-      },
-      small: {
-        width: "small",
-        height: "small"
-      },
-      medium: {
-        width: "medium",
-        height: "medium"
-      },
-      large: {
-        width: "large",
-        height: "large"
-      }
-    }
-  }
-});
-const StyledSvg = styled("svg");
-
-// TODO: Move this component over to ndla/icons
-export const Icon = _ref => {
-  let {
-    children,
-    size,
-    role,
-    title,
-    description,
-    width,
-    height,
-    css: cssProp,
-    "aria-hidden": ariaHidden = true,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_jsxs(StyledSvg, {
-    "data-icon": "",
-    "aria-hidden": ariaHidden,
-    preserveAspectRatio: "xMidYMid meet",
-    css: css.raw(iconRecipe.raw({
-      size
-    }), cssProp),
-    ...props,
-    children: [title && /*#__PURE__*/_jsx("title", {
-      children: title
-    }), description && /*#__PURE__*/_jsx("desc", {
-      children: description
-    }), children]
-  });
-};

package/lib/Icon.d.ts

@@ -1,38 +0,0 @@
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import { ComponentPropsWithRef } from "react";
-import { type RecipeVariantProps } from "@ndla/styled-system/css";
-import { JsxStyleProps } from "@ndla/styled-system/types";
-export declare const iconRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
-    size: {
-        xsmall: {
-            width: "xsmall";
-            height: "xsmall";
-        };
-        small: {
-            width: "small";
-            height: "small";
-        };
-        medium: {
-            width: "medium";
-            height: "medium";
-        };
-        large: {
-            width: "large";
-            height: "large";
-        };
-    };
-}>;
-export type IconVariantProps = RecipeVariantProps<typeof iconRecipe>;
-interface BaseIconProps extends ComponentPropsWithRef<"svg"> {
-    title?: string;
-    description?: string;
-}
-export type IconProps = BaseIconProps & IconVariantProps & JsxStyleProps;
-export declare const Icon: ({ children, size, role, title, description, width, height, css: cssProp, "aria-hidden": ariaHidden, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export {};