@ndla/primitives 1.0.20-alpha.0 → 1.0.22-alpha.0

package/dist/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "0.45.2",
+  "schemaVersion": "0.46.0",
   "styles": {
     "atomic": [
       "display]___[value:flex",

package/es/Button.js

@@ -171,7 +171,7 @@ export const buttonRecipe = cva({
     size: {
       medium: {
         textStyle: "label.medium",
-        paddingInline: "medium",
+        paddingInline: "small",
         paddingBlock: "xxsmall",
         minHeight: "24"
       },

package/es/Image.js

@@ -44,6 +44,19 @@ export const Picture = /*#__PURE__*/forwardRef((_ref, ref) => {
     }), children]
   });
 });
+const StyledImage = styled("img", {
+  defaultVariants: {
+    variant: "regular"
+  },
+  variants: {
+    variant: {
+      regular: {},
+      rounded: {
+        borderRadius: "xsmall"
+      }
+    }
+  }
+});
 export const Img = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     fallbackWidth = FALLBACK_WIDTH,
@@ -55,7 +68,7 @@ export const Img = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...props
   } = _ref2;
   const queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);
-  return /*#__PURE__*/_jsx(styled.img, {
+  return /*#__PURE__*/_jsx(StyledImage, {
     alt: alt,
     src: contentType === "image/gif" ? src : `${src}?${queryString}`,
     ...props,
@@ -83,7 +96,7 @@ export const Image = /*#__PURE__*/forwardRef((_ref3, ref) => {
       type: contentType,
       srcSet: srcSet,
       sizes: sizes
-    }), /*#__PURE__*/_jsx(styled.img, {
+    }), /*#__PURE__*/_jsx(StyledImage, {
       alt: alt,
       src: contentType === "image/gif" ? src : fallbackSrc,
       ...props,

package/es/ListItem/ListItem.js

@@ -49,7 +49,6 @@ export const listItemRecipe = sva({
       maxHeight: "40px",
       minWidth: "56px",
       maxWidth: "56px",
-      borderRadius: "xsmall",
       objectFit: "cover"
     }
   },
@@ -215,4 +214,15 @@ export const ListItemHeading = withContext(InternalListItemHeading, "title");
 export const ListItemContent = withContext(ark.div, "content", {
   baseComponent: true
 });
-export const ListItemImage = withContext(Image, "image");
+const InternalListItemImage = withContext(Image, "image");
+export const ListItemImage = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    variant = "rounded",
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/_jsx(InternalListItemImage, {
+    variant: variant,
+    ...props,
+    ref: ref
+  });
+});

package/lib/Button.d.ts

@@ -120,7 +120,7 @@ export declare const buttonRecipe: import("@ndla/styled-system/types").RecipeRun
     size: {
         medium: {
             textStyle: "label.medium";
-            paddingInline: "medium";
+            paddingInline: "small";
             paddingBlock: "xxsmall";
             minHeight: "24";
         };

package/lib/Button.js

@@ -176,7 +176,7 @@ const buttonRecipe = exports.buttonRecipe = (0, _css.cva)({
     size: {
       medium: {
         textStyle: "label.medium",
-        paddingInline: "medium",
+        paddingInline: "small",
         paddingBlock: "xxsmall",
         minHeight: "24"
       },

package/lib/Image.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import { ComponentPropsWithRef } from "react";
-import { JsxStyleProps } from "@ndla/styled-system/types";
+import { JsxStyleProps, StyledVariantProps } from "@ndla/styled-system/types";
 export interface ImageCrop {
     startX: number;
     startY: number;
@@ -28,7 +28,11 @@ export interface PictureProps extends JsxStyleProps, ComponentPropsWithRef<"pict
     focalPoint?: ImageFocalPoint;
 }
 export declare const Picture: import("react").ForwardRefExoticComponent<Omit<PictureProps, "ref"> & import("react").RefAttributes<HTMLPictureElement>>;
-export interface ImgProps extends JsxStyleProps, ComponentPropsWithRef<"img"> {
+declare const StyledImage: import("@ndla/styled-system/types").StyledComponent<"img", {
+    variant?: "regular" | "rounded" | undefined;
+}>;
+type ImageVariantProps = StyledVariantProps<typeof StyledImage>;
+export interface ImgProps extends JsxStyleProps, ComponentPropsWithRef<"img">, ImageVariantProps {
     alt: string;
     src: string;
     fallbackWidth?: number;
@@ -37,7 +41,7 @@ export interface ImgProps extends JsxStyleProps, ComponentPropsWithRef<"img"> {
     focalPoint?: ImageFocalPoint;
 }
 export declare const Img: import("react").ForwardRefExoticComponent<Omit<ImgProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
-export interface ImageProps extends JsxStyleProps, ComponentPropsWithRef<"img"> {
+export interface ImageProps extends JsxStyleProps, ComponentPropsWithRef<"img">, ImageVariantProps {
     alt: string;
     src: string;
     sizes?: string;
@@ -47,3 +51,4 @@ export interface ImageProps extends JsxStyleProps, ComponentPropsWithRef<"img">
     focalPoint?: ImageFocalPoint;
 }
 export declare const Image: import("react").ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+export {};

package/lib/Image.js

@@ -52,6 +52,19 @@ const Picture = exports.Picture = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref
     }), children]
   });
 });
+const StyledImage = (0, _jsx2.styled)("img", {
+  defaultVariants: {
+    variant: "regular"
+  },
+  variants: {
+    variant: {
+      regular: {},
+      rounded: {
+        borderRadius: "xsmall"
+      }
+    }
+  }
+});
 const Img = exports.Img = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     fallbackWidth = FALLBACK_WIDTH,
@@ -63,7 +76,7 @@ const Img = exports.Img = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ...props
   } = _ref2;
   const queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.img, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImage, {
     alt: alt,
     src: contentType === "image/gif" ? src : `${src}?${queryString}`,
     ...props,
@@ -91,7 +104,7 @@ const Image = exports.Image = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) =
       type: contentType,
       srcSet: srcSet,
       sizes: sizes
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.img, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImage, {
       alt: alt,
       src: contentType === "image/gif" ? src : fallbackSrc,
       ...props,

package/lib/ListItem/ListItem.js

@@ -55,7 +55,6 @@ const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
       maxHeight: "40px",
       minWidth: "56px",
       maxWidth: "56px",
-      borderRadius: "xsmall",
       objectFit: "cover"
     }
   },
@@ -221,4 +220,15 @@ const ListItemHeading = exports.ListItemHeading = withContext(InternalListItemHe
 const ListItemContent = exports.ListItemContent = withContext(_react2.ark.div, "content", {
   baseComponent: true
 });
-const ListItemImage = exports.ListItemImage = withContext(_Image.Image, "image");
+const InternalListItemImage = withContext(_Image.Image, "image");
+const ListItemImage = exports.ListItemImage = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    variant = "rounded",
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalListItemImage, {
+    variant: variant,
+    ...props,
+    ref: ref
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.20-alpha.0",
+  "version": "1.0.22-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -29,12 +29,12 @@
   ],
   "dependencies": {
     "@ark-ui/react": "^3.9.0",
-    "@ndla/styled-system": "^0.0.17",
+    "@ndla/styled-system": "^0.0.18",
     "@ndla/util": "^4.1.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.25",
-    "@pandacss/dev": "^0.45.2"
+    "@ndla/preset-panda": "^0.0.26",
+    "@pandacss/dev": "^0.46.0"
   },
   "peerDependencies": {
     "react": ">= 18",
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d40977f8ad6f9927572a6a62bf6a397189d0cfa4"
+  "gitHead": "7713c89290c9b308be47bce300ad7db4a52a42dd"
 }