@ndla/primitives 1.0.2-alpha.0 → 1.0.4-alpha.0

package/dist/panda.buildinfo.json

@@ -199,6 +199,7 @@
       "outlineStyle]___[value:solid]___[cond:_focus",
       "outlineWidth]___[value:2px]___[cond:_focus",
       "outlineOffset]___[value:-2px]___[cond:_focus",
+      "flexShrink]___[value:0",
       "width]___[value:medium",
       "height]___[value:medium",
       "border]___[value:2px solid",
@@ -271,7 +272,7 @@
       "width]___[value:var(--size)",
       "animation]___[value:dialog-in]___[cond:_open",
       "animation]___[value:dialog-out]___[cond:_closed",
-      "marginInlineStart]___[value:min(var(--margin), 5%)",
+      "marginInlineStart]___[value:var(--margin)",
       "marginInlineEnd]___[value:var(--margin)",
       "marginBlockEnd]___[value:var(--margin)",
       "marginBlockStart]___[value:var(--margin)",
@@ -454,7 +455,6 @@
       "background]___[value:surface.disabled.strong",
       "padding]___[value:1",
       "borderRadius]___[value:medium",
-      "flexShrink]___[value:0",
       "background]___[value:surface.action.active]___[cond:_checked",
       "background]___[value:icon.onAction",
       "width]___[value:10",
@@ -606,8 +606,10 @@
       "borderBottomColor]___[value:stroke.hover]___[cond:_hover<___>_last",
       "borderTopColor]___[value:stroke.hover]___[cond:_highlighted",
       "borderBottomColor]___[value:stroke.hover]___[cond:_highlighted<___>_last",
-      "height]___[value:40px",
-      "width]___[value:56px"
+      "minHeight]___[value:40px",
+      "maxHeight]___[value:40px",
+      "minWidth]___[value:56px",
+      "maxWidth]___[value:56px"
     ],
     "recipes": {}
   }

package/dist/styles.css

@@ -436,8 +436,8 @@
     width: var(--size);
 }
 
-  .ms_min\(var\(--margin\)\,_5\%\) {
-    margin-inline-start: min(var(--margin), 5%);
+  .ms_var\(--margin\) {
+    margin-inline-start: var(--margin);
 }
 
   .me_var\(--margin\) {
@@ -889,12 +889,20 @@
     border-bottom: 1px solid;
 }
 
-  .h_40px {
-    height: 40px;
+  .min-h_40px {
+    min-height: 40px;
 }
 
-  .w_56px {
-    width: 56px;
+  .max-h_40px {
+    max-height: 40px;
+}
+
+  .min-w_56px {
+    min-width: 56px;
+}
+
+  .max-w_56px {
+    max-width: 56px;
 }
 
   .flex-d_column {
@@ -1009,6 +1017,10 @@
     transition-property: border-color, background, box-shadow, color;
 }
 
+  .flex-sh_0 {
+    flex-shrink: 0;
+}
+
   .ov-y_auto {
     overflow-y: auto;
 }
@@ -1131,10 +1143,6 @@
     border-width: 8px;
 }
 
-  .flex-sh_0 {
-    flex-shrink: 0;
-}
-
   .trs-prop_color {
     --transition-prop: color;
     transition-property: color;

package/es/Checkbox.js

@@ -33,6 +33,7 @@ const checkboxRecipe = sva({
       flexDirection: "column"
     },
     control: {
+      flexShrink: "0",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",

package/es/Dialog.js

@@ -197,7 +197,7 @@ const dialogRecipe = sva({
     position: {
       left: {
         content: {
-          marginInlineStart: "min(var(--margin), 5%)"
+          marginInlineStart: "var(--margin)"
         }
       },
       center: {},
@@ -327,6 +327,7 @@ export const DialogHeader = styled("div", {
     paddingInline: "medium",
     paddingBlockStart: "medium",
     justifyContent: "space-between",
+    alignItems: "center",
     gap: "xsmall"
   }
 });

package/es/Figure.js

@@ -99,7 +99,7 @@ const StyledFigure = styled(ark.figure, {}, {
 });
 export const Figure = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-    size = "medium",
+    size,
     float,
     css: cssProp,
     ...props

package/es/ListItem/ListItem.js

@@ -47,8 +47,10 @@ export const listItemRecipe = sva({
       }
     },
     image: {
-      height: "40px",
-      width: "56px",
+      minHeight: "40px",
+      maxHeight: "40px",
+      minWidth: "56px",
+      maxWidth: "56px",
       borderRadius: "xsmall",
       objectFit: "cover"
     }

package/es/Menu.js

@@ -207,4 +207,7 @@ export const MenuTrigger = withContext(Menu.Trigger, "trigger", {
 });
 export const MenuSeparator = withContext(Menu.Separator, "separator", {
   baseComponent: true
+});
+export const MenuItemText = withContext(Menu.ItemText, "itemText", {
+  baseComponent: true
 });

package/es/RadioGroup.js

@@ -29,6 +29,7 @@ const radioGroupRecipe = sva({
       }
     },
     itemControl: {
+      flexShrink: "0",
       background: "surface.default",
       borderColor: "stroke.subtle",
       borderRadius: "full",

package/es/index.js

@@ -26,7 +26,7 @@ export { Picture, Img, Image, makeSrcQueryString, getSrcSet } from "./Image";
 export { Input, FieldInput, InputContainer, TextArea, FieldTextArea } from "./Input";
 export { Label, FieldLabel, Legend, FieldsetLegend } from "./Label";
 export { ListItemRoot, ListItemHeading, ListItemContent, ListItemImage } from "./ListItem/ListItem";
-export { MenuRoot, MenuContent, MenuItemGroupLabel, MenuItemGroup, MenuItem, MenuPositioner, MenuTriggerItem, MenuTrigger, MenuSeparator } from "./Menu";
+export { MenuRoot, MenuContent, MenuItemGroupLabel, MenuItemGroup, MenuItem, MenuPositioner, MenuTriggerItem, MenuTrigger, MenuSeparator, MenuItemText } from "./Menu";
 export { MessageBox } from "./MessageBox";
 export { NdlaLogoEn, NdlaLogoNb, NdlaLogoText } from "./NdlaLogo";
 export { PaginationRoot, PaginationItem, PaginationEllipsis, PaginationPrevTrigger, PaginationNextTrigger } from "./Pagination";

package/lib/Checkbox.js

@@ -39,6 +39,7 @@ const checkboxRecipe = (0, _css.sva)({
       flexDirection: "column"
     },
     control: {
+      flexShrink: "0",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",

package/lib/Dialog.d.ts

@@ -35,7 +35,7 @@ declare const dialogRecipe: import("@ndla/styled-system/types").SlotRecipeRuntim
     position: {
         left: {
             content: {
-                marginInlineStart: "min(var(--margin), 5%)";
+                marginInlineStart: "var(--margin)";
             };
         };
         center: {};

package/lib/Dialog.js

@@ -203,7 +203,7 @@ const dialogRecipe = (0, _css.sva)({
     position: {
       left: {
         content: {
-          marginInlineStart: "min(var(--margin), 5%)"
+          marginInlineStart: "var(--margin)"
         }
       },
       center: {},
@@ -336,6 +336,7 @@ const DialogHeader = exports.DialogHeader = (0, _jsx2.styled)("div", {
     paddingInline: "medium",
     paddingBlockStart: "medium",
     justifyContent: "space-between",
+    alignItems: "center",
     gap: "xsmall"
   }
 });

package/lib/Figure.js

@@ -105,7 +105,7 @@ const StyledFigure = (0, _jsx2.styled)(_react2.ark.figure, {}, {
 });
 const Figure = exports.Figure = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
-    size = "medium",
+    size,
     float,
     css: cssProp,
     ...props

package/lib/ListItem/ListItem.js

@@ -53,8 +53,10 @@ const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
       }
     },
     image: {
-      height: "40px",
-      width: "56px",
+      minHeight: "40px",
+      maxHeight: "40px",
+      minWidth: "56px",
+      maxWidth: "56px",
       borderRadius: "xsmall",
       objectFit: "cover"
     }

package/lib/Menu.d.ts

@@ -76,4 +76,7 @@ export declare const MenuTrigger: import("react").ForwardRefExoticComponent<{
 export declare const MenuSeparator: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Menu.SeparatorProps & import("react").RefAttributes<HTMLHRElement>>;
+export declare const MenuItemText: import("react").ForwardRefExoticComponent<{
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Menu.ItemTextProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/Menu.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MenuTriggerItem = exports.MenuTrigger = exports.MenuSeparator = exports.MenuRoot = exports.MenuPositioner = exports.MenuItemGroupLabel = exports.MenuItemGroup = exports.MenuItem = exports.MenuContent = void 0;
+exports.MenuTriggerItem = exports.MenuTrigger = exports.MenuSeparator = exports.MenuRoot = exports.MenuPositioner = exports.MenuItemText = exports.MenuItemGroupLabel = exports.MenuItemGroup = exports.MenuItem = exports.MenuContent = void 0;
 var _react = require("react");
 var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
@@ -215,4 +215,7 @@ const MenuTrigger = exports.MenuTrigger = withContext(_react2.Menu.Trigger, "tri
 });
 const MenuSeparator = exports.MenuSeparator = withContext(_react2.Menu.Separator, "separator", {
   baseComponent: true
+});
+const MenuItemText = exports.MenuItemText = withContext(_react2.Menu.ItemText, "itemText", {
+  baseComponent: true
 });

package/lib/RadioGroup.js

@@ -35,6 +35,7 @@ const radioGroupRecipe = (0, _css.sva)({
       }
     },
     itemControl: {
+      flexShrink: "0",
       background: "surface.default",
       borderColor: "stroke.subtle",
       borderRadius: "full",

package/lib/index.d.ts

@@ -41,7 +41,7 @@ export { Label, FieldLabel, Legend, FieldsetLegend } from "./Label";
 export type { ListItemVariantProps, ListItemProps } from "./ListItem/ListItem";
 export { ListItemRoot, ListItemHeading, ListItemContent, ListItemImage } from "./ListItem/ListItem";
 export type { MenuRootProps, MenuItemVariantProps, MenuItemProps } from "./Menu";
-export { MenuRoot, MenuContent, MenuItemGroupLabel, MenuItemGroup, MenuItem, MenuPositioner, MenuTriggerItem, MenuTrigger, MenuSeparator, } from "./Menu";
+export { MenuRoot, MenuContent, MenuItemGroupLabel, MenuItemGroup, MenuItem, MenuPositioner, MenuTriggerItem, MenuTrigger, MenuSeparator, MenuItemText, } from "./Menu";
 export type { MessageBoxVariantProps, MessageBoxProps } from "./MessageBox";
 export { MessageBox } from "./MessageBox";
 export type { LogoProps } from "./NdlaLogo";

package/lib/index.js

@@ -465,6 +465,12 @@ Object.defineProperty(exports, "MenuItemGroupLabel", {
     return _Menu.MenuItemGroupLabel;
   }
 });
+Object.defineProperty(exports, "MenuItemText", {
+  enumerable: true,
+  get: function () {
+    return _Menu.MenuItemText;
+  }
+});
 Object.defineProperty(exports, "MenuPositioner", {
   enumerable: true,
   get: function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.2-alpha.0",
+  "version": "1.0.4-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,7 +33,7 @@
     "@ndla/util": "^4.1.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.14",
+    "@ndla/preset-panda": "^0.0.15",
     "@pandacss/dev": "^0.44.0"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "45fb10125bc642d020ed37c03b9492976ef7f0d6"
+  "gitHead": "0fdd094fea36baa5ee2bdfe5b2bc6c423d304f22"
 }