@ndla/primitives 0.0.16 → 0.0.18

package/es/Select.js

@@ -132,7 +132,9 @@ const {
   withProvider,
   withContext
 } = createStyleContext(selectRecipe);
-const InternalSelectRoot = withProvider(Select.Root, "root");
+const InternalSelectRoot = withProvider(Select.Root, "root", {
+  baseComponent: true
+});
 export const SelectRoot = _ref => {
   let {
     lazyMount = true,
@@ -149,10 +151,18 @@ export const SelectRoot = _ref => {
     })
   );
 };
-export const SelectClearTrigger = withContext(Select.ClearTrigger, "clearTrigger");
-export const SelectContent = withContext(Select.Content, "content");
-export const SelectControl = withContext(Select.Control, "control");
-export const SelectIndicator = withContext(Select.Indicator, "indicator");
+export const SelectClearTrigger = withContext(Select.ClearTrigger, "clearTrigger", {
+  baseComponent: true
+});
+export const SelectContent = withContext(Select.Content, "content", {
+  baseComponent: true
+});
+export const SelectControl = withContext(Select.Control, "control", {
+  baseComponent: true
+});
+export const SelectIndicator = withContext(Select.Indicator, "indicator", {
+  baseComponent: true
+});
 export const SelectItemGroupLabel = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     children,
@@ -172,10 +182,18 @@ export const SelectItemGroupLabel = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
 });
 const InternalSelectItemGroupLabel = withContext(Select.ItemGroupLabel, "itemGroupLabel");
-export const SelectItemGroup = withContext(Select.ItemGroup, "itemGroup");
-export const SelectItemIndicator = withContext(Select.ItemIndicator, "itemIndicator");
-export const SelectItem = withContext(Select.Item, "item");
-export const SelectItemText = withContext(Select.ItemText, "itemText");
+export const SelectItemGroup = withContext(Select.ItemGroup, "itemGroup", {
+  baseComponent: true
+});
+export const SelectItemIndicator = withContext(Select.ItemIndicator, "itemIndicator", {
+  baseComponent: true
+});
+export const SelectItem = withContext(Select.Item, "item", {
+  baseComponent: true
+});
+export const SelectItemText = withContext(Select.ItemText, "itemText", {
+  baseComponent: true
+});
 const InternalSelectLabel = withContext(Select.Label, "label");
 export const SelectLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
@@ -191,6 +209,12 @@ export const SelectLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
     })
   });
 });
-export const SelectPositioner = withContext(Select.Positioner, "positioner");
-export const SelectTrigger = withContext(Select.Trigger, "trigger");
-export const SelectValueText = withContext(Select.ValueText, "valueText");
+export const SelectPositioner = withContext(Select.Positioner, "positioner", {
+  baseComponent: true
+});
+export const SelectTrigger = withContext(Select.Trigger, "trigger", {
+  baseComponent: true
+});
+export const SelectValueText = withContext(Select.ValueText, "valueText", {
+  baseComponent: true
+});

package/es/Slider.js

@@ -79,11 +79,21 @@ const {
   withProvider,
   withContext
 } = createStyleContext(sliderRecipe);
-export const SliderRoot = withProvider(Slider.Root, "root");
-export const SliderControl = withContext(Slider.Control, "control");
-export const SliderTrack = withContext(Slider.Track, "track");
-export const SliderRange = withContext(Slider.Range, "range");
-export const SliderThumb = withContext(Slider.Thumb, "thumb");
+export const SliderRoot = withProvider(Slider.Root, "root", {
+  baseComponent: true
+});
+export const SliderControl = withContext(Slider.Control, "control", {
+  baseComponent: true
+});
+export const SliderTrack = withContext(Slider.Track, "track", {
+  baseComponent: true
+});
+export const SliderRange = withContext(Slider.Range, "range", {
+  baseComponent: true
+});
+export const SliderThumb = withContext(Slider.Thumb, "thumb", {
+  baseComponent: true
+});
 const InternalSliderLabel = withContext(Slider.Label, "label");
 export const SliderLabel = _ref => {
   let {

package/es/Switch.js

@@ -97,9 +97,15 @@ const {
   withProvider,
   withContext
 } = createStyleContext(switchRecipe);
-export const SwitchRoot = withProvider(Switch.Root, "root");
-export const SwitchControl = withContext(Switch.Control, "control");
-export const SwitchThumb = withContext(Switch.Thumb, "thumb");
+export const SwitchRoot = withProvider(Switch.Root, "root", {
+  baseComponent: true
+});
+export const SwitchControl = withContext(Switch.Control, "control", {
+  baseComponent: true
+});
+export const SwitchThumb = withContext(Switch.Thumb, "thumb", {
+  baseComponent: true
+});
 const InternalSwitchLabel = withContext(Switch.Label, "label");
 export const SwitchLabel = _ref => {
   let {

package/es/Tabs.js

@@ -201,7 +201,9 @@ const {
   withProvider,
   withContext
 } = createStyleContext(tabsRecipe);
-const InternalTabsRoot = withProvider(Tabs.Root, "root");
+const InternalTabsRoot = withProvider(Tabs.Root, "root", {
+  baseComponent: true
+});
 export const TabsRoot = _ref => {
   let {
     lazyMount = true,
@@ -214,10 +216,18 @@ export const TabsRoot = _ref => {
     ...props
   });
 };
-export const TabsContent = withContext(Tabs.Content, "content");
-export const TabsIndicator = withContext(Tabs.Indicator, "indicator");
-export const TabsList = withContext(Tabs.List, "list");
-const InternalTabsTrigger = withContext(Tabs.Trigger, "trigger");
+export const TabsContent = withContext(Tabs.Content, "content", {
+  baseComponent: true
+});
+export const TabsIndicator = withContext(Tabs.Indicator, "indicator", {
+  baseComponent: true
+});
+export const TabsList = withContext(Tabs.List, "list", {
+  baseComponent: true
+});
+const InternalTabsTrigger = withContext(Tabs.Trigger, "trigger", {
+  baseComponent: true
+});
 export const TabsTrigger = _ref2 => {
   let {
     className,

package/es/TagsInput.js

@@ -94,15 +94,33 @@ const {
   withProvider,
   withContext
 } = createStyleContext(tagsInputRecipe);
-export const TagsInputRoot = withProvider(TagsInput.Root, "root");
-export const TagsInputClearTrigger = withContext(TagsInput.ClearTrigger, "clearTrigger");
-export const TagsInputControl = withContext(TagsInput.Control, "control");
-export const TagsInputInput = withContext(TagsInput.Input, "input");
-export const TagsInputItemDeleteTrigger = withContext(TagsInput.ItemDeleteTrigger, "itemDeleteTrigger");
-export const TagsInputItemInput = withContext(TagsInput.ItemInput, "itemInput");
-export const TagsInputItemPreview = withContext(TagsInput.ItemPreview, "itemPreview");
-export const TagsInputItem = withContext(TagsInput.Item, "item");
-export const TagsInputItemText = withContext(TagsInput.ItemText, "itemText");
+export const TagsInputRoot = withProvider(TagsInput.Root, "root", {
+  baseComponent: true
+});
+export const TagsInputClearTrigger = withContext(TagsInput.ClearTrigger, "clearTrigger", {
+  baseComponent: true
+});
+export const TagsInputControl = withContext(TagsInput.Control, "control", {
+  baseComponent: true
+});
+export const TagsInputInput = withContext(TagsInput.Input, "input", {
+  baseComponent: true
+});
+export const TagsInputItemDeleteTrigger = withContext(TagsInput.ItemDeleteTrigger, "itemDeleteTrigger", {
+  baseComponent: true
+});
+export const TagsInputItemInput = withContext(TagsInput.ItemInput, "itemInput", {
+  baseComponent: true
+});
+export const TagsInputItemPreview = withContext(TagsInput.ItemPreview, "itemPreview", {
+  baseComponent: true
+});
+export const TagsInputItem = withContext(TagsInput.Item, "item", {
+  baseComponent: true
+});
+export const TagsInputItemText = withContext(TagsInput.ItemText, "itemText", {
+  baseComponent: true
+});
 const InternalTagsInputLabel = withContext(TagsInput.Label, "label");
 export const TagsInputLabel = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/es/Toast.js

@@ -44,9 +44,15 @@ const {
   withProvider,
   withContext
 } = createStyleContext(toastRecipe);
-export const ToastRoot = withProvider(Toast.Root, "root");
-export const ToastActionTrigger = withContext(Toast.ActionTrigger, "actionTrigger");
-export const ToastCloseTrigger = withContext(Toast.CloseTrigger, "closeTrigger");
+export const ToastRoot = withProvider(Toast.Root, "root", {
+  baseComponent: true
+});
+export const ToastActionTrigger = withContext(Toast.ActionTrigger, "actionTrigger", {
+  baseComponent: true
+});
+export const ToastCloseTrigger = withContext(Toast.CloseTrigger, "closeTrigger", {
+  baseComponent: true
+});
 const InternalToastDescription = withContext(Toast.Description, "description");
 export const ToastDescription = _ref => {
   let {

package/es/Tooltip.js

@@ -36,9 +36,15 @@ const {
   withContext
 } = createStyleContext(tooltipRecipe);
 export const TooltipRoot = withRootProvider(Tooltip.Root);
-export const TooltipArrow = withContext(Tooltip.Arrow, "arrow");
-export const TooltipArrowTip = withContext(Tooltip.ArrowTip, "arrowTip");
-export const TooltipContentStandalone = withContext(Tooltip.Content, "content");
+export const TooltipArrow = withContext(Tooltip.Arrow, "arrow", {
+  baseComponent: true
+});
+export const TooltipArrowTip = withContext(Tooltip.ArrowTip, "arrowTip", {
+  baseComponent: true
+});
+export const TooltipContentStandalone = withContext(Tooltip.Content, "content", {
+  baseComponent: true
+});
 export const TooltipContent = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
@@ -54,5 +60,9 @@ export const TooltipContent = /*#__PURE__*/forwardRef((_ref, ref) => {
     })
   });
 });
-export const TooltipPositioner = withContext(Tooltip.Positioner, "positioner");
-export const TooltipTrigger = withContext(Tooltip.Trigger, "trigger");
+export const TooltipPositioner = withContext(Tooltip.Positioner, "positioner", {
+  baseComponent: true
+});
+export const TooltipTrigger = withContext(Tooltip.Trigger, "trigger", {
+  baseComponent: true
+});

package/es/createStyleContext.js

@@ -29,11 +29,8 @@ export const createStyleContext = recipe => {
     };
     return StyledComponent;
   };
-  const withProvider = (Component, slot) => {
-    const opts = typeof Component === "string" ? undefined : {
-      baseComponent: true
-    };
-    const StyledComponent = styled(Component, {}, opts);
+  const withProvider = (Component, slot, options) => {
+    const StyledComponent = styled(Component, {}, options);
     return /*#__PURE__*/forwardRef((_ref, ref) => {
       let {
         css: cssProp,
@@ -46,16 +43,13 @@ export const createStyleContext = recipe => {
         children: /*#__PURE__*/_jsx(StyledComponent, {
           ...otherProps,
           ref: ref,
-          css: css.raw(slotStyles === null || slotStyles === void 0 ? void 0 : slotStyles[slot], cssProp)
+          css: css.raw(slotStyles?.[slot], cssProp)
         })
       });
     });
   };
-  const withContext = (Component, slot) => {
-    const opts = typeof Component === "string" ? undefined : {
-      baseComponent: true
-    };
-    const StyledComponent = styled(Component, {}, opts);
+  const withContext = (Component, slot, options) => {
+    const StyledComponent = styled(Component, {}, options);
     return /*#__PURE__*/forwardRef((_ref2, ref) => {
       let {
         css: cssProp,
@@ -65,7 +59,7 @@ export const createStyleContext = recipe => {
       return /*#__PURE__*/_jsx(StyledComponent, {
         ...props,
         ref: ref,
-        css: css.raw(slotStyles === null || slotStyles === void 0 ? void 0 : slotStyles[slot], cssProp)
+        css: css.raw(slotStyles?.[slot], cssProp)
       });
     });
   };

package/es/index.js

@@ -10,7 +10,8 @@ export { AccordionRoot, AccordionItemContent, AccordionItemIndicator, AccordionI
 export { OrderedList, UnOrderedList, DefinitionList } from "./ArticleLists";
 export { Badge } from "./Badge";
 export { BlockQuote } from "./BlockQuote";
-export { Button, IconButton } from "./Button";
+export { Button, IconButton, buttonBaseRecipe, buttonRecipe, iconButtonRecipe } from "./Button";
+export { CardRoot, CardHeading, CardContent, CardImage } from "./Card/Card";
 export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, CheckboxGroup, CheckboxHiddenInput } from "./Checkbox";
 export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger } from "./Combobox";
 export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody } from "./Dialog";
@@ -20,6 +21,7 @@ export { FieldErrorMessage } from "./FieldErrorMessage";
 export { FieldHelper } from "./FieldHelper";
 export { Figure } from "./Figure";
 export { FramedContent } from "./FramedContent";
+export { Picture, Img, Image, makeSrcQueryString, getSrcSet } from "./Image";
 export { Input, FieldInput, InputContainer, TextArea, FieldTextArea } from "./Input";
 export { Label, FieldLabel } from "./Label";
 export { MenuRoot, MenuContent, MenuItemGroupLabel, MenuItemGroup, MenuItem, MenuPositioner, MenuTriggerItem, MenuTrigger, MenuSeparator } from "./Menu";

package/lib/Accordion.d.ts

@@ -6,10 +6,48 @@
  *
  */
 import { Accordion } from "@ark-ui/react";
-import { JsxStyleProps } from "@ndla/styled-system/types";
+import { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
+declare const accordionRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator", {
+    variant: {
+        clean: {};
+        bordered: {
+            itemTrigger: {
+                paddingInline: "medium";
+                paddingBlock: "medium";
+                width: "100%";
+                borderRadius: "xsmall";
+                boxShadowColor: "stroke.subtle";
+                boxShadow: "inset 0 0 0 1px var(--shadow-color)";
+                _hover: {
+                    background: "surface.actionSubtle.hover";
+                    boxShadowColor: "stroke.hover";
+                };
+                _open: {
+                    backgroundColor: "surface.actionSubtle.active";
+                    boxShadowColor: "stroke.default";
+                    borderBottomRadius: "sharp";
+                };
+                _focusVisible: {
+                    outline: "none";
+                    boxShadowColor: "stroke.default";
+                    boxShadow: "inset 0 0 0 2px var(--shadow-color)";
+                };
+            };
+            itemContent: {
+                borderBottomRadius: "xsmall";
+                borderWidth: "0 1px 1px";
+                borderStyle: "solid";
+                borderColor: "stroke.default";
+            };
+        };
+    };
+}>;
+export type AccordionVariantProps = RecipeVariantProps<typeof accordionRecipe>;
 export interface AccordionRootProps extends JsxStyleProps, Accordion.RootProps {
 }
-export declare const AccordionRoot: import("react").ForwardRefExoticComponent<AccordionRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AccordionRoot: import("react").ForwardRefExoticComponent<AccordionRootProps & {
+    variant?: "bordered" | "clean" | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export declare const AccordionItemContent: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Accordion.ItemContentProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -22,3 +60,4 @@ export declare const AccordionItem: import("react").ForwardRefExoticComponent<{
 export declare const AccordionItemTrigger: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Accordion.ItemTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/lib/Accordion.js

@@ -29,21 +29,15 @@ const accordionRecipe = (0, _css.sva)({
       justifyContent: "space-between",
       background: "surface.default",
       cursor: "pointer",
-      paddingInline: "medium",
-      paddingBlock: "medium",
-      boxShadowColor: "stroke.subtle",
-      boxShadow: "inset 0 0 0 1px var(--shadow-color)",
-      borderRadius: "xsmall",
       transitionDuration: "fast",
       transitionTimingFunction: "default",
       transitionProperty: "background, border-color, border, border-radius",
-      width: "100%",
       _closed: {
         transitionProperty: "background, border-color, border, border-radius"
       },
       _disabled: {
         cursor: "not-allowed",
-        background: "surface..disabled.subtle",
+        background: "surface.disabled.subtle",
         boxShadowColor: "stroke.disabled",
         color: "text.disabled",
         _hover: {
@@ -51,20 +45,6 @@ const accordionRecipe = (0, _css.sva)({
           boxShadowColor: "stroke.disabled",
           color: "text.disabled"
         }
-      },
-      _hover: {
-        background: "surface.actionSubtle.hover",
-        boxShadowColor: "stroke.hover"
-      },
-      _open: {
-        backgroundColor: "surface.actionSubtle.active",
-        boxShadowColor: "stroke.default",
-        borderBottomRadius: "sharp"
-      },
-      _focusVisible: {
-        outline: "none",
-        boxShadowColor: "stroke.default",
-        boxShadow: "inset 0 0 0 2px var(--shadow-color)"
       }
     },
     itemIndicator: {
@@ -79,21 +59,59 @@ const accordionRecipe = (0, _css.sva)({
     },
     itemContent: {
       overflow: "hidden",
+      // TODO: Is this needed?
       transitionProperty: "padding-bottom",
       transitionDuration: "normal",
       transitionTimingFunction: "default",
       paddingBlock: "xsmall",
       paddingInline: "small",
-      borderBottomRadius: "xsmall",
-      borderWidth: "0 1px 1px",
-      borderStyle: "solid",
-      borderColor: "stroke.default",
       _open: {
         animation: "collapse-in"
       },
       _closed: {
         animation: "collapse-out"
       }
+    },
+    item: {
+      width: "100%"
+    }
+  },
+  defaultVariants: {
+    variant: "bordered"
+  },
+  variants: {
+    variant: {
+      clean: {},
+      bordered: {
+        itemTrigger: {
+          paddingInline: "medium",
+          paddingBlock: "medium",
+          width: "100%",
+          borderRadius: "xsmall",
+          boxShadowColor: "stroke.subtle",
+          boxShadow: "inset 0 0 0 1px var(--shadow-color)",
+          _hover: {
+            background: "surface.actionSubtle.hover",
+            boxShadowColor: "stroke.hover"
+          },
+          _open: {
+            backgroundColor: "surface.actionSubtle.active",
+            boxShadowColor: "stroke.default",
+            borderBottomRadius: "sharp"
+          },
+          _focusVisible: {
+            outline: "none",
+            boxShadowColor: "stroke.default",
+            boxShadow: "inset 0 0 0 2px var(--shadow-color)"
+          }
+        },
+        itemContent: {
+          borderBottomRadius: "xsmall",
+          borderWidth: "0 1px 1px",
+          borderStyle: "solid",
+          borderColor: "stroke.default"
+        }
+      }
     }
   }
 });
@@ -101,8 +119,18 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(accordionRecipe);
-const AccordionRoot = exports.AccordionRoot = withProvider(_react.Accordion.Root, "root");
-const AccordionItemContent = exports.AccordionItemContent = withContext(_react.Accordion.ItemContent, "itemContent");
-const AccordionItemIndicator = exports.AccordionItemIndicator = withContext(_react.Accordion.ItemIndicator, "itemIndicator");
-const AccordionItem = exports.AccordionItem = withContext(_react.Accordion.Item, "item");
-const AccordionItemTrigger = exports.AccordionItemTrigger = withContext(_react.Accordion.ItemTrigger, "itemTrigger");
+const AccordionRoot = exports.AccordionRoot = withProvider(_react.Accordion.Root, "root", {
+  baseComponent: true
+});
+const AccordionItemContent = exports.AccordionItemContent = withContext(_react.Accordion.ItemContent, "itemContent", {
+  baseComponent: true
+});
+const AccordionItemIndicator = exports.AccordionItemIndicator = withContext(_react.Accordion.ItemIndicator, "itemIndicator", {
+  baseComponent: true
+});
+const AccordionItem = exports.AccordionItem = withContext(_react.Accordion.Item, "item", {
+  baseComponent: true
+});
+const AccordionItemTrigger = exports.AccordionItemTrigger = withContext(_react.Accordion.ItemTrigger, "itemTrigger", {
+  baseComponent: true
+});

package/lib/Badge.d.ts

@@ -29,6 +29,7 @@ declare const badgeRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     };
 }>;
 export type BadgeVariantProps = RecipeVariantProps<typeof badgeRecipe>;
+export type BadgeVariant = NonNullable<BadgeVariantProps>["colorTheme"];
 export type BadgeProps = HTMLArkProps<"div"> & JsxStyleProps & BadgeVariantProps;
 export declare const Badge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
     consumeCss?: boolean | undefined;

package/lib/Button.d.ts

@@ -27,7 +27,7 @@ export declare const buttonBaseRecipe: import("@ndla/styled-system/types").Recip
         };
         secondary: {
             color: "text.strong";
-            background: "transparent";
+            background: "surface.default";
             boxShadow: "inset 0 0 0 1px var(--shadow-color)";
             _hover: {
                 background: "surface.actionSubtle.hover";
@@ -107,7 +107,7 @@ export declare const buttonBaseRecipe: import("@ndla/styled-system/types").Recip
 export declare const buttonRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     size: {
         default: {
-            paddingInline: "medium";
+            paddingInline: "xsmall";
             paddingBlock: "xxsmall";
             minHeight: "24";
         };

package/lib/Button.js

@@ -17,6 +17,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
+// TODO: Consider if any of the backgrounds should actually be transparent
 const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
   base: {
     display: "inline-flex",
@@ -73,7 +74,7 @@ const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
       },
       secondary: {
         color: "text.strong",
-        background: "transparent",
+        background: "surface.default",
         boxShadow: "inset 0 0 0 1px var(--shadow-color)",
         _hover: {
           background: "surface.actionSubtle.hover"
@@ -158,7 +159,7 @@ const buttonRecipe = exports.buttonRecipe = (0, _css.cva)({
   variants: {
     size: {
       default: {
-        paddingInline: "medium",
+        paddingInline: "xsmall",
         paddingBlock: "xxsmall",
         minHeight: "24"
       },

package/lib/Card/Card.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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 { type ImageProps } from "../Image";
+import { type TextProps } from "../Text";
+export declare const CardRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLElement>>;
+export declare const CardHeading: import("react").ForwardRefExoticComponent<TextProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const CardContent: 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 & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardImage: import("react").ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;

package/lib/Card/Card.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardRoot = exports.CardImage = exports.CardHeading = exports.CardContent = void 0;
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+var _createStyleContext = require("../createStyleContext");
+var _Image = require("../Image");
+var _Text = require("../Text");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ *
+ */
+
+const cardRecipe = (0, _css.sva)({
+  slots: ["root", "title", "content", "image"],
+  base: {
+    root: {
+      position: "relative",
+      border: "1px solid",
+      borderRadius: "xsmall",
+      borderColor: "stroke.subtle",
+      transitionDuration: "fast",
+      transitionProperty: "background, color",
+      transitionTimingFunction: "default",
+      background: "surface.default",
+      _hover: {
+        background: "surface.actionSubtle.hover",
+        borderColor: "stroke.hover"
+      }
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "xsmall",
+      paddingBlock: "xsmall",
+      paddingInline: "medium"
+    },
+    title: {
+      textDecoration: "underline",
+      _hover: {
+        textDecoration: "none"
+      }
+    },
+    image: {
+      height: "200px",
+      objectFit: "cover",
+      width: "100%"
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = (0, _createStyleContext.createStyleContext)(cardRecipe);
+const CardRoot = exports.CardRoot = withProvider(_react2.ark.article, "root", {
+  baseComponent: true
+});
+const InternalCardHeading = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    textStyle = "label.large",
+    fontWeight = "bold",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Heading, {
+    textStyle: textStyle,
+    fontWeight: fontWeight,
+    ...props,
+    ref: ref
+  });
+});
+const CardHeading = exports.CardHeading = withContext(InternalCardHeading, "title");
+const CardContent = exports.CardContent = withContext(_react2.ark.div, "content", {
+  baseComponent: true
+});
+const CardImage = exports.CardImage = withContext(_Image.Image, "image");