@ndla/primitives 1.0.54-alpha.0 → 1.0.56-alpha.0

package/dist/panda.buildinfo.json

@@ -131,12 +131,15 @@
       "color]___[value:text.onAction]___[cond:_active",
       "background]___[value:surface.action.active]___[cond:_active",
       "boxShadow]___[value:inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor]___[cond:_focusVisible",
+      "background]___[value:surface.action.selected]___[cond:_on",
       "color]___[value:text.strong",
       "background]___[value:surface.actionSubtle.hover.strong]___[cond:_active",
+      "background]___[value:surface.actionSubtle.active]___[cond:_on",
       "background]___[value:transparent",
       "boxShadow]___[value:inset 0 0 0 1px var(--shadow-color)]___[cond:_hover",
       "boxShadow]___[value:inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color)]___[cond:_hover<___>_focusVisible",
       "borderColor]___[value:stroke.default]___[cond:_active",
+      "boxShadow]___[value:inset 0 0 0 1px var(--shadow-color)]___[cond:_on",
       "color]___[value:stroke.hover]___[cond:_hover",
       "color]___[value:surface.actionSubtle.hover.strong]___[cond:_hover",
       "background]___[value:surface.danger",
@@ -554,6 +557,7 @@
       "display]___[value:table-cell]___[cond:& td, & th",
       "paddingInline]___[value:xsmall]___[cond:& td, & th",
       "paddingBlock]___[value:3xsmall]___[cond:& td, & th",
+      "minWidth]___[value:large]___[cond:& td, & th",
       "textAlign]___[value:center]___[cond:& td, & th<___>&[data-align='center']",
       "textAlign]___[value:left]___[cond:& td, & th<___>&[data-align='left']",
       "textAlign]___[value:right]___[cond:& td, & th<___>&[data-align='right']",
@@ -647,14 +651,14 @@
       "top]___[value:xxsmall",
       "right]___[value:xxsmall",
       "flexDirection]___[value:row",
-      "background]___[value:surface.action.selected]___[cond:_on",
-      "background]___[value:surface.actionSubtle.active]___[cond:_on",
-      "boxShadow]___[value:inset 0 0 0 1px var(--shadow-color)]___[cond:_on",
       "--arrow-size]___[value:spacing.xxsmall",
       "--arrow-background]___[value:colors.surface.action",
       "height]___[value:200px",
       "gap]___[value:xxlarge",
       "gap]___[value:medium",
+      "paddingBlockEnd]___[value:5xlarge",
+      "paddingBlockStart]___[value:xxlarge",
+      "paddingBlockStart]___[value:4xlarge",
       "transitionDuration]___[value:default",
       "alignContent]___[value:start",
       "gridColumnGap]___[value:var(--gutter, 0)",

package/dist/styles.css

@@ -957,6 +957,18 @@
     gap: var(--spacing-medium);
 }
 
+  .pbe_5xlarge {
+    padding-block-end: var(--spacing-5xlarge);
+}
+
+  .pbs_xxlarge {
+    padding-block-start: var(--spacing-xxlarge);
+}
+
+  .pbs_4xlarge {
+    padding-block-start: var(--spacing-4xlarge);
+}
+
   .\--size_sizes\.surface\.contentMax {
     --size: var(--sizes-surface-content-max);
 }
@@ -1549,6 +1561,18 @@
     --shadow-color: var(--colors-surface-disabled);
 }
 
+  .on\:bg_surface\.action\.selected:is([data-state="on"]) {
+    background: var(--colors-surface-action-selected);
+}
+
+  .on\:bg_surface\.actionSubtle\.active:is([data-state="on"]) {
+    background: var(--colors-surface-action-subtle-active);
+}
+
+  .on\:bx-sh_inset_0_0_0_1px_var\(--shadow-color\):is([data-state="on"]) {
+    box-shadow: inset 0 0 0 1px var(--shadow-color);
+}
+
   .\[\&_svg\]\:mx_0 svg {
     margin-inline: 0;
 }
@@ -1841,6 +1865,10 @@
     padding-block: var(--spacing-3xsmall);
 }
 
+  .\[\&_td\,_\&_th\]\:min-w_large td,.\[\&_td\,_\&_th\]\:min-w_large th {
+    min-width: var(--sizes-large);
+}
+
   .horizontal\:mbe_-1px[data-orientation=horizontal] {
     margin-block-end: -1px;
 }
@@ -1912,18 +1940,6 @@
     display: inline-block;
 }
 
-  .on\:bg_surface\.action\.selected:is([data-state="on"]) {
-    background: var(--colors-surface-action-selected);
-}
-
-  .on\:bg_surface\.actionSubtle\.active:is([data-state="on"]) {
-    background: var(--colors-surface-action-subtle-active);
-}
-
-  .on\:bx-sh_inset_0_0_0_1px_var\(--shadow-color\):is([data-state="on"]) {
-    box-shadow: inset 0 0 0 1px var(--shadow-color);
-}
-
   .\[\&\]\:w_100\% {
     width: 100%;
 }

package/es/Button.js

@@ -67,6 +67,9 @@ export const buttonBaseRecipe = cva({
         },
         _focusVisible: {
           boxShadow: "inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor"
+        },
+        _on: {
+          background: "surface.action.selected"
         }
       },
       secondary: {
@@ -78,6 +81,9 @@ export const buttonBaseRecipe = cva({
         },
         _active: {
           background: "surface.actionSubtle.hover.strong"
+        },
+        _on: {
+          background: "surface.actionSubtle.active"
         }
       },
       tertiary: {
@@ -93,6 +99,10 @@ export const buttonBaseRecipe = cva({
         _active: {
           borderColor: "stroke.default",
           background: "surface.actionSubtle.hover.strong"
+        },
+        _on: {
+          background: "surface.actionSubtle.active",
+          boxShadow: "inset 0 0 0 1px var(--shadow-color)"
         }
       },
       clear: {

package/es/Combobox.js

@@ -6,6 +6,7 @@
  *
  */
 
+import { forwardRef } from "react";
 import { Combobox, comboboxAnatomy } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "./createStyleContext";
@@ -162,9 +163,15 @@ export const ComboboxRoot = _ref => {
 export const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, "clearTrigger", {
   baseComponent: true
 });
-export const ComboboxContent = withContext(Combobox.Content, "content", {
+export const ComboboxContentStandalone = withContext(Combobox.Content, "content", {
   baseComponent: true
 });
+export const ComboboxContent = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(ComboboxPositioner, {
+  children: /*#__PURE__*/_jsx(ComboboxContentStandalone, {
+    ref: ref,
+    ...props
+  })
+}));
 export const ComboboxControl = withContext(Combobox.Control, "control", {
   baseComponent: true
 });

package/es/Layout/PageContainer.js

@@ -0,0 +1,48 @@
+/**
+ * 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 { forwardRef } from "react";
+import { css, cva } from "@ndla/styled-system/css";
+import { PageContent } from "./PageContent";
+import { jsx as _jsx } from "react/jsx-runtime";
+const pageContainerRecipe = cva({
+  defaultVariants: {
+    padding: "medium"
+  },
+  variants: {
+    padding: {
+      none: {},
+      small: {
+        paddingBlockStart: "medium",
+        paddingBlockEnd: "5xlarge"
+      },
+      medium: {
+        paddingBlockStart: "xxlarge",
+        paddingBlockEnd: "5xlarge"
+      },
+      large: {
+        paddingBlockStart: "4xlarge",
+        paddingBlockEnd: "5xlarge"
+      }
+    }
+  }
+});
+export const PageContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    padding,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(PageContent, {
+    css: css.raw(pageContainerRecipe.raw({
+      padding
+    }), cssProp),
+    ...props,
+    ref: ref
+  });
+});

package/es/Menu.js

@@ -148,9 +148,15 @@ export const MenuRoot = _ref => {
     ...props
   });
 };
-export const MenuContent = withContext(Menu.Content, "content", {
+export const MenuContentStandalone = withContext(Menu.Content, "content", {
   baseComponent: true
 });
+export const MenuContent = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(MenuPositioner, {
+  children: /*#__PURE__*/_jsx(MenuContentStandalone, {
+    ref: ref,
+    ...props
+  })
+}));
 const InternalMenuItemGroupLabel = withContext(Menu.ItemGroupLabel, "itemGroupLabel");
 export const MenuItemGroupLabel = _ref2 => {
   let {

package/es/NdlaLogo.js

@@ -12,11 +12,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BaseSvg = _ref => {
   let {
     color = "primary",
+    "aria-hidden": ariaHidden = true,
     css: cssProp,
     ...props
   } = _ref;
   return /*#__PURE__*/_jsx(styled.svg, {
     xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": ariaHidden,
     css: css.raw({
       color
     }, cssProp),

package/es/Select.js

@@ -163,9 +163,15 @@ export const SelectRoot = _ref => {
 export const SelectClearTrigger = withContext(Select.ClearTrigger, "clearTrigger", {
   baseComponent: true
 });
-export const SelectContent = withContext(Select.Content, "content", {
+export const SelectContentStandalone = withContext(Select.Content, "content", {
   baseComponent: true
 });
+export const SelectContent = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(SelectPositioner, {
+  children: /*#__PURE__*/_jsx(SelectContentStandalone, {
+    ref: ref,
+    ...props
+  })
+}));
 export const SelectControl = withContext(Select.Control, "control", {
   baseComponent: true
 });

package/es/Table.js

@@ -58,6 +58,7 @@ export const Table = styled(ark.table, {
       display: "table-cell",
       paddingInline: "xsmall",
       paddingBlock: "3xsmall",
+      minWidth: "large",
       "&[data-align='center']": {
         textAlign: "center"
       },

package/es/ToggleGroup.js

@@ -6,12 +6,9 @@
  *
  */
 
-import { forwardRef } from "react";
 import { toggleGroupAnatomy, ToggleGroup } from "@ark-ui/react";
-import { css, cva, sva } from "@ndla/styled-system/css";
-import { IconButton } from "./Button";
+import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "./createStyleContext";
-import { jsx as _jsx } from "react/jsx-runtime";
 const toggleGroupRecipe = sva({
   slots: toggleGroupAnatomy.keys(),
   base: {
@@ -22,31 +19,6 @@ const toggleGroupRecipe = sva({
     }
   }
 });
-const toggleGroupItemRecipe = cva({
-  defaultVariants: {
-    variant: "primary"
-  },
-  variants: {
-    variant: {
-      primary: {
-        _on: {
-          background: "surface.action.selected"
-        }
-      },
-      secondary: {
-        _on: {
-          background: "surface.actionSubtle.active"
-        }
-      },
-      tertiary: {
-        _on: {
-          background: "surface.actionSubtle.active",
-          boxShadow: "inset 0 0 0 1px var(--shadow-color)"
-        }
-      }
-    }
-  }
-});
 const {
   withProvider,
   withContext
@@ -54,24 +26,6 @@ const {
 export const ToggleGroupRoot = withProvider(ToggleGroup.Root, "root", {
   baseComponent: true
 });
-const InternalToggleGroupItem = withContext(ToggleGroup.Item, "item");
-export const ToggleGroupItem = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    children,
-    variant,
-    css: cssProp,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_jsx(InternalToggleGroupItem, {
-    ...props,
-    css: css.raw(toggleGroupItemRecipe.raw({
-      variant
-    }), cssProp),
-    ref: ref,
-    asChild: true,
-    children: /*#__PURE__*/_jsx(IconButton, {
-      variant: variant,
-      children: children
-    })
-  });
+export const ToggleGroupItem = withContext(ToggleGroup.Item, "item", {
+  baseComponent: true
 });

package/es/index.js

@@ -15,7 +15,7 @@ export { CardRoot, CardHeading, CardContent, CardImage } from "./Card/Card";
 export { createStyleContext } from "./createStyleContext";
 export { ToggleGroupRoot, ToggleGroupItem } from "./ToggleGroup";
 export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, CheckboxGroup, CheckboxHiddenInput } from "./Checkbox";
-export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, ComboboxList } from "./Combobox";
+export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxContentStandalone, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, ComboboxList } from "./Combobox";
 export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody, DialogFooter } from "./Dialog";
 export { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
 export { ErrorMessageRoot, ErrorMessageContent, ErrorMessageActions, ErrorMessageDescription, ErrorMessageTitle } from "./ErrorMessage/ErrorMessage";
@@ -30,6 +30,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 { PageContainer } from "./Layout/PageContainer";
 export { PageContent, BleedPageContent } from "./Layout/PageContent";
 export { MenuRoot, MenuContent, MenuItemGroupLabel, MenuItemGroup, MenuItem, MenuPositioner, MenuTriggerItem, MenuTrigger, MenuSeparator, MenuItemText } from "./Menu";
 export { MessageBox } from "./MessageBox";
@@ -37,7 +38,7 @@ export { NdlaLogoEn, NdlaLogoNb, NdlaLogoText } from "./NdlaLogo";
 export { PaginationRoot, PaginationContext, PaginationItem, PaginationEllipsis, PaginationPrevTrigger, PaginationNextTrigger } from "./Pagination";
 export { PopoverRoot, PopoverAnchor, PopoverArrowStandalone, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContentStandalone, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger } from "./Popover";
 export { RadioGroupRoot, RadioGroupIndicator, RadioGroupItemControl, RadioGroupItem, RadioGroupItemText, RadioGroupLabel, RadioGroupItemHiddenInput } from "./RadioGroup";
-export { SelectRoot, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItemGroupLabel, SelectItemGroup, SelectItemIndicator, SelectItem, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, SelectList, SelectHiddenSelect } from "./Select";
+export { SelectRoot, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItemGroupLabel, SelectItemGroup, SelectItemIndicator, SelectItem, SelectItemText, SelectLabel, SelectPositioner, SelectContentStandalone, SelectTrigger, SelectValueText, SelectList, SelectHiddenSelect } from "./Select";
 export { Skeleton } from "./Skeleton";
 export { SliderRoot, SliderControl, SliderTrack, SliderRange, SliderThumb, SliderLabel, SliderHiddenInput } from "./Slider";
 export { Spinner } from "./Spinner";

package/lib/Button.d.ts

@@ -25,6 +25,9 @@ export declare const buttonBaseRecipe: import("@ndla/styled-system/types").Recip
             _focusVisible: {
                 boxShadow: "inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor";
             };
+            _on: {
+                background: "surface.action.selected";
+            };
         };
         secondary: {
             color: "text.strong";
@@ -36,6 +39,9 @@ export declare const buttonBaseRecipe: import("@ndla/styled-system/types").Recip
             _active: {
                 background: "surface.actionSubtle.hover.strong";
             };
+            _on: {
+                background: "surface.actionSubtle.active";
+            };
         };
         tertiary: {
             color: "text.strong";
@@ -51,6 +57,10 @@ export declare const buttonBaseRecipe: import("@ndla/styled-system/types").Recip
                 borderColor: "stroke.default";
                 background: "surface.actionSubtle.hover.strong";
             };
+            _on: {
+                background: "surface.actionSubtle.active";
+                boxShadow: "inset 0 0 0 1px var(--shadow-color)";
+            };
         };
         clear: {
             background: "transparent";

package/lib/Button.js

@@ -73,6 +73,9 @@ const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
         },
         _focusVisible: {
           boxShadow: "inset 0 0 0 var(--shadow-width, 3px) var(--shadow-color), inset 0px 0px 0px calc(var(--shadow-width, 3px) * 2) currentcolor"
+        },
+        _on: {
+          background: "surface.action.selected"
         }
       },
       secondary: {
@@ -84,6 +87,9 @@ const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
         },
         _active: {
           background: "surface.actionSubtle.hover.strong"
+        },
+        _on: {
+          background: "surface.actionSubtle.active"
         }
       },
       tertiary: {
@@ -99,6 +105,10 @@ const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
         _active: {
           borderColor: "stroke.default",
           background: "surface.actionSubtle.hover.strong"
+        },
+        _on: {
+          background: "surface.actionSubtle.active",
+          boxShadow: "inset 0 0 0 1px var(--shadow-color)"
         }
       },
       clear: {

package/lib/Combobox.d.ts

@@ -42,6 +42,9 @@ export declare const ComboboxClearTrigger: import("react").ForwardRefExoticCompo
     consumeCss?: boolean;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
 export type ComboboxContentProps = Combobox.ContentProps & JsxStyleProps;
+export declare const ComboboxContentStandalone: import("react").ForwardRefExoticComponent<Combobox.ContentProps & {
+    consumeCss?: boolean;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ComboboxContent: import("react").ForwardRefExoticComponent<Combobox.ContentProps & {
     consumeCss?: boolean;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;

package/lib/Combobox.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ComboboxTrigger = exports.ComboboxRoot = exports.ComboboxPositioner = exports.ComboboxList = exports.ComboboxLabel = exports.ComboboxItemText = exports.ComboboxItemIndicator = exports.ComboboxItemGroupLabel = exports.ComboboxItemGroup = exports.ComboboxItem = exports.ComboboxInput = exports.ComboboxControl = exports.ComboboxContent = exports.ComboboxClearTrigger = void 0;
-var _react = require("@ark-ui/react");
+exports.ComboboxTrigger = exports.ComboboxRoot = exports.ComboboxPositioner = exports.ComboboxList = exports.ComboboxLabel = exports.ComboboxItemText = exports.ComboboxItemIndicator = exports.ComboboxItemGroupLabel = exports.ComboboxItemGroup = exports.ComboboxItem = exports.ComboboxInput = exports.ComboboxControl = exports.ComboboxContentStandalone = exports.ComboboxContent = exports.ComboboxClearTrigger = void 0;
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _createStyleContext = require("./createStyleContext");
 var _Label = require("./Label");
@@ -19,7 +20,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const comboboxRecipe = (0, _css.sva)({
-  slots: _react.comboboxAnatomy.keys(),
+  slots: _react2.comboboxAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -150,7 +151,7 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(comboboxRecipe);
-const InternalComboboxRoot = withProvider(_react.Combobox.Root, "root", {
+const InternalComboboxRoot = withProvider(_react2.Combobox.Root, "root", {
   baseComponent: true
 });
 const ComboboxRoot = _ref => {
@@ -166,19 +167,25 @@ const ComboboxRoot = _ref => {
   });
 };
 exports.ComboboxRoot = ComboboxRoot;
-const ComboboxClearTrigger = exports.ComboboxClearTrigger = withContext(_react.Combobox.ClearTrigger, "clearTrigger", {
+const ComboboxClearTrigger = exports.ComboboxClearTrigger = withContext(_react2.Combobox.ClearTrigger, "clearTrigger", {
   baseComponent: true
 });
-const ComboboxContent = exports.ComboboxContent = withContext(_react.Combobox.Content, "content", {
+const ComboboxContentStandalone = exports.ComboboxContentStandalone = withContext(_react2.Combobox.Content, "content", {
   baseComponent: true
 });
-const ComboboxControl = exports.ComboboxControl = withContext(_react.Combobox.Control, "control", {
+const ComboboxContent = exports.ComboboxContent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ComboboxPositioner, {
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ComboboxContentStandalone, {
+    ref: ref,
+    ...props
+  })
+}));
+const ComboboxControl = exports.ComboboxControl = withContext(_react2.Combobox.Control, "control", {
   baseComponent: true
 });
-const ComboboxInput = exports.ComboboxInput = withContext(_react.Combobox.Input, "input", {
+const ComboboxInput = exports.ComboboxInput = withContext(_react2.Combobox.Input, "input", {
   baseComponent: true
 });
-const InternalComboboxItemGroupLabel = withContext(_react.Combobox.ItemGroupLabel, "itemGroupLabel");
+const InternalComboboxItemGroupLabel = withContext(_react2.Combobox.ItemGroupLabel, "itemGroupLabel");
 const ComboboxItemGroupLabel = _ref2 => {
   let {
     children,
@@ -201,16 +208,16 @@ const ComboboxItemGroupLabel = _ref2 => {
   });
 };
 exports.ComboboxItemGroupLabel = ComboboxItemGroupLabel;
-const ComboboxItemGroup = exports.ComboboxItemGroup = withContext(_react.Combobox.ItemGroup, "itemGroup", {
+const ComboboxItemGroup = exports.ComboboxItemGroup = withContext(_react2.Combobox.ItemGroup, "itemGroup", {
   baseComponent: true
 });
-const ComboboxItemIndicator = exports.ComboboxItemIndicator = withContext(_react.Combobox.ItemIndicator, "itemIndicator", {
+const ComboboxItemIndicator = exports.ComboboxItemIndicator = withContext(_react2.Combobox.ItemIndicator, "itemIndicator", {
   baseComponent: true
 });
-const ComboboxItem = exports.ComboboxItem = withContext(_react.Combobox.Item, "item", {
+const ComboboxItem = exports.ComboboxItem = withContext(_react2.Combobox.Item, "item", {
   baseComponent: true
 });
-const InternalComboboxItemText = withContext(_react.Combobox.ItemText, "itemText");
+const InternalComboboxItemText = withContext(_react2.Combobox.ItemText, "itemText");
 const ComboboxItemText = _ref3 => {
   let {
     textStyle = "label.medium",
@@ -231,7 +238,7 @@ const ComboboxItemText = _ref3 => {
   });
 };
 exports.ComboboxItemText = ComboboxItemText;
-const InternalComboboxLabel = withContext(_react.Combobox.Label, "label");
+const InternalComboboxLabel = withContext(_react2.Combobox.Label, "label");
 const ComboboxLabel = _ref4 => {
   let {
     textStyle = "label.medium",
@@ -248,12 +255,12 @@ const ComboboxLabel = _ref4 => {
   });
 };
 exports.ComboboxLabel = ComboboxLabel;
-const ComboboxPositioner = exports.ComboboxPositioner = withContext(_react.Combobox.Positioner, "positioner", {
+const ComboboxPositioner = exports.ComboboxPositioner = withContext(_react2.Combobox.Positioner, "positioner", {
   baseComponent: true
 });
-const ComboboxTrigger = exports.ComboboxTrigger = withContext(_react.Combobox.Trigger, "trigger", {
+const ComboboxTrigger = exports.ComboboxTrigger = withContext(_react2.Combobox.Trigger, "trigger", {
   baseComponent: true
 });
-const ComboboxList = exports.ComboboxList = withContext(_react.Combobox.List, "list", {
+const ComboboxList = exports.ComboboxList = withContext(_react2.Combobox.List, "list", {
   baseComponent: true
 });

package/lib/Layout/PageContainer.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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 { HTMLArkProps } from "@ark-ui/react";
+import { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
+import { PageContentVariantProps } from "./PageContent";
+declare const pageContainerRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
+    padding: {
+        none: {};
+        small: {
+            paddingBlockStart: "medium";
+            paddingBlockEnd: "5xlarge";
+        };
+        medium: {
+            paddingBlockStart: "xxlarge";
+            paddingBlockEnd: "5xlarge";
+        };
+        large: {
+            paddingBlockStart: "4xlarge";
+            paddingBlockEnd: "5xlarge";
+        };
+    };
+}>;
+export type PageContainerVariantProps = RecipeVariantProps<typeof pageContainerRecipe>;
+export type PageContainerProps = HTMLArkProps<"div"> & JsxStyleProps & PageContentVariantProps & PageContainerVariantProps;
+export declare const PageContainer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean;
+} & import("@ndla/styled-system/types").WithCss & {
+    variant?: "article" | "page" | "wide" | "content" | undefined;
+    gutters?: "always" | "never" | "mobileUp" | "tabletUp" | undefined;
+} & {
+    padding?: "small" | "none" | "medium" | "large" | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib/Layout/PageContainer.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PageContainer = void 0;
+var _react = require("react");
+var _css = require("@ndla/styled-system/css");
+var _PageContent = require("./PageContent");
+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 pageContainerRecipe = (0, _css.cva)({
+  defaultVariants: {
+    padding: "medium"
+  },
+  variants: {
+    padding: {
+      none: {},
+      small: {
+        paddingBlockStart: "medium",
+        paddingBlockEnd: "5xlarge"
+      },
+      medium: {
+        paddingBlockStart: "xxlarge",
+        paddingBlockEnd: "5xlarge"
+      },
+      large: {
+        paddingBlockStart: "4xlarge",
+        paddingBlockEnd: "5xlarge"
+      }
+    }
+  }
+});
+const PageContainer = exports.PageContainer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    padding,
+    css: cssProp,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageContent.PageContent, {
+    css: _css.css.raw(pageContainerRecipe.raw({
+      padding
+    }), cssProp),
+    ...props,
+    ref: ref
+  });
+});

package/lib/Menu.d.ts

@@ -48,6 +48,9 @@ declare const itemCva: import("@ndla/styled-system/types").RecipeRuntimeFn<{
 }>;
 export type MenuRootProps = Menu.RootProps;
 export declare const MenuRoot: ({ lazyMount, unmountOnExit, ...props }: MenuRootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuContentStandalone: import("react").ForwardRefExoticComponent<{
+    consumeCss?: boolean;
+} & import("@ndla/styled-system/types").WithCss & Menu.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const MenuContent: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean;
 } & import("@ndla/styled-system/types").WithCss & Menu.ContentProps & import("react").RefAttributes<HTMLDivElement>>;

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.MenuItemText = 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.MenuContentStandalone = exports.MenuContent = void 0;
 var _react = require("react");
 var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
@@ -155,9 +155,15 @@ const MenuRoot = _ref => {
   });
 };
 exports.MenuRoot = MenuRoot;
-const MenuContent = exports.MenuContent = withContext(_react2.Menu.Content, "content", {
+const MenuContentStandalone = exports.MenuContentStandalone = withContext(_react2.Menu.Content, "content", {
   baseComponent: true
 });
+const MenuContent = exports.MenuContent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuPositioner, {
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuContentStandalone, {
+    ref: ref,
+    ...props
+  })
+}));
 const InternalMenuItemGroupLabel = withContext(_react2.Menu.ItemGroupLabel, "itemGroupLabel");
 const MenuItemGroupLabel = _ref2 => {
   let {

package/lib/NdlaLogo.js

@@ -18,11 +18,13 @@ var _jsxRuntime = require("react/jsx-runtime");
 const BaseSvg = _ref => {
   let {
     color = "primary",
+    "aria-hidden": ariaHidden = true,
     css: cssProp,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.svg, {
     xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": ariaHidden,
     css: _css.css.raw({
       color
     }, cssProp),

package/lib/Select.d.ts

@@ -13,6 +13,9 @@ export declare const SelectRoot: <T extends unknown>({ lazyMount, unmountOnExit,
 export declare const SelectClearTrigger: import("react").ForwardRefExoticComponent<Select.ClearTriggerProps & {
     consumeCss?: boolean;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SelectContentStandalone: import("react").ForwardRefExoticComponent<Select.ContentProps & {
+    consumeCss?: boolean;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectContent: import("react").ForwardRefExoticComponent<Select.ContentProps & {
     consumeCss?: boolean;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;

package/lib/Select.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectValueText = exports.SelectTrigger = exports.SelectRoot = exports.SelectPositioner = exports.SelectList = exports.SelectLabel = exports.SelectItemText = exports.SelectItemIndicator = exports.SelectItemGroupLabel = exports.SelectItemGroup = exports.SelectItem = exports.SelectIndicator = exports.SelectHiddenSelect = exports.SelectControl = exports.SelectContent = exports.SelectClearTrigger = void 0;
+exports.SelectValueText = exports.SelectTrigger = exports.SelectRoot = exports.SelectPositioner = exports.SelectList = exports.SelectLabel = exports.SelectItemText = exports.SelectItemIndicator = exports.SelectItemGroupLabel = exports.SelectItemGroup = exports.SelectItem = exports.SelectIndicator = exports.SelectHiddenSelect = exports.SelectControl = exports.SelectContentStandalone = exports.SelectContent = exports.SelectClearTrigger = void 0;
 var _react = require("react");
 var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
@@ -170,9 +170,15 @@ exports.SelectRoot = SelectRoot;
 const SelectClearTrigger = exports.SelectClearTrigger = withContext(_react2.Select.ClearTrigger, "clearTrigger", {
   baseComponent: true
 });
-const SelectContent = exports.SelectContent = withContext(_react2.Select.Content, "content", {
+const SelectContentStandalone = exports.SelectContentStandalone = withContext(_react2.Select.Content, "content", {
   baseComponent: true
 });
+const SelectContent = exports.SelectContent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectPositioner, {
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectContentStandalone, {
+    ref: ref,
+    ...props
+  })
+}));
 const SelectControl = exports.SelectControl = withContext(_react2.Select.Control, "control", {
   baseComponent: true
 });

package/lib/Table.js

@@ -64,6 +64,7 @@ const Table = exports.Table = (0, _jsx.styled)(_react.ark.table, {
       display: "table-cell",
       paddingInline: "xsmall",
       paddingBlock: "3xsmall",
+      minWidth: "large",
       "&[data-align='center']": {
         textAlign: "center"
       },

package/lib/ToggleGroup.d.ts

@@ -8,40 +8,14 @@
 import { ToggleGroup } from "@ark-ui/react";
 import { RecipeVariantProps } from "@ndla/styled-system/css";
 import { JsxStyleProps } from "@ndla/styled-system/types";
-import { IconButtonProps } from "./Button";
 declare const toggleGroupRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "item">>;
-declare const toggleGroupItemRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
-    variant: {
-        primary: {
-            _on: {
-                background: "surface.action.selected";
-            };
-        };
-        secondary: {
-            _on: {
-                background: "surface.actionSubtle.active";
-            };
-        };
-        tertiary: {
-            _on: {
-                background: "surface.actionSubtle.active";
-                boxShadow: "inset 0 0 0 1px var(--shadow-color)";
-            };
-        };
-    };
-}>;
 export type ToggleGroupVariantProps = RecipeVariantProps<typeof toggleGroupRecipe>;
 export type ToggleGroupRootProps = ToggleGroup.RootProps & JsxStyleProps & ToggleGroupVariantProps;
 export declare const ToggleGroupRoot: import("react").ForwardRefExoticComponent<ToggleGroup.RootProps & {
     consumeCss?: boolean;
 } & import("@ndla/styled-system/types").WithCss & {} & import("react").RefAttributes<HTMLDivElement>>;
-export type ToggleGroupItemVariantProps = RecipeVariantProps<typeof toggleGroupItemRecipe>;
-export type ToggleGroupItemProps = ToggleGroup.ItemProps & IconButtonProps & ToggleGroupItemVariantProps;
-export declare const ToggleGroupItem: import("react").ForwardRefExoticComponent<ToggleGroup.ItemProps & import("./Button").BaseButtonProps & {
-    variant?: "clear" | "primary" | "secondary" | "tertiary" | "clearSubtle" | "danger" | "success";
-} & {
-    size?: "small" | "medium" | undefined;
-} & {
-    variant?: "primary" | "secondary" | "tertiary" | undefined;
-} & import("react").RefAttributes<HTMLButtonElement>>;
+export type ToggleGroupItemProps = ToggleGroup.ItemProps & JsxStyleProps;
+export declare const ToggleGroupItem: import("react").ForwardRefExoticComponent<ToggleGroup.ItemProps & {
+    consumeCss?: boolean;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/lib/ToggleGroup.js

@@ -4,12 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToggleGroupRoot = exports.ToggleGroupItem = void 0;
-var _react = require("react");
-var _react2 = require("@ark-ui/react");
+var _react = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
-var _Button = require("./Button");
 var _createStyleContext = require("./createStyleContext");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Copyright (c) 2024-present, NDLA.
  *
@@ -19,7 +16,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const toggleGroupRecipe = (0, _css.sva)({
-  slots: _react2.toggleGroupAnatomy.keys(),
+  slots: _react.toggleGroupAnatomy.keys(),
   base: {
     root: {
       display: "flex",
@@ -28,56 +25,13 @@ const toggleGroupRecipe = (0, _css.sva)({
     }
   }
 });
-const toggleGroupItemRecipe = (0, _css.cva)({
-  defaultVariants: {
-    variant: "primary"
-  },
-  variants: {
-    variant: {
-      primary: {
-        _on: {
-          background: "surface.action.selected"
-        }
-      },
-      secondary: {
-        _on: {
-          background: "surface.actionSubtle.active"
-        }
-      },
-      tertiary: {
-        _on: {
-          background: "surface.actionSubtle.active",
-          boxShadow: "inset 0 0 0 1px var(--shadow-color)"
-        }
-      }
-    }
-  }
-});
 const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(toggleGroupRecipe);
-const ToggleGroupRoot = exports.ToggleGroupRoot = withProvider(_react2.ToggleGroup.Root, "root", {
+const ToggleGroupRoot = exports.ToggleGroupRoot = withProvider(_react.ToggleGroup.Root, "root", {
   baseComponent: true
 });
-const InternalToggleGroupItem = withContext(_react2.ToggleGroup.Item, "item");
-const ToggleGroupItem = exports.ToggleGroupItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    children,
-    variant,
-    css: cssProp,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalToggleGroupItem, {
-    ...props,
-    css: _css.css.raw(toggleGroupItemRecipe.raw({
-      variant
-    }), cssProp),
-    ref: ref,
-    asChild: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-      variant: variant,
-      children: children
-    })
-  });
+const ToggleGroupItem = exports.ToggleGroupItem = withContext(_react.ToggleGroup.Item, "item", {
+  baseComponent: true
 });

package/lib/index.d.ts

@@ -19,11 +19,11 @@ export type { CardRootProps, CardVariantProps } from "./Card/Card";
 export { CardRoot, CardHeading, CardContent, CardImage } from "./Card/Card";
 export { createStyleContext } from "./createStyleContext";
 export { ToggleGroupRoot, ToggleGroupItem } from "./ToggleGroup";
-export type { ToggleGroupRootProps, ToggleGroupVariantProps, ToggleGroupItemProps, ToggleGroupItemVariantProps, } from "./ToggleGroup";
+export type { ToggleGroupRootProps, ToggleGroupVariantProps, ToggleGroupItemProps } from "./ToggleGroup";
 export type { CheckboxVariantProps, CheckboxRootProps } from "./Checkbox";
 export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, CheckboxGroup, CheckboxHiddenInput, } from "./Checkbox";
 export type { ComboboxVariantProps, ComboboxRootProps, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemProps, ComboboxItemIndicatorProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxPositionerProps, ComboboxTriggerProps, ComboboxListProps, } from "./Combobox";
-export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, ComboboxList, } from "./Combobox";
+export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxContentStandalone, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, ComboboxList, } from "./Combobox";
 export type { DialogVariantProps, DialogRootProps } from "./Dialog";
 export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody, DialogFooter, } from "./Dialog";
 export type { ExpandableBoxProps, ExpandableBoxSummaryProps } from "./ExpandableBox";
@@ -50,6 +50,8 @@ export type { LabelProps, LegendProps, FieldsetLegendProps } from "./Label";
 export { Label, FieldLabel, Legend, FieldsetLegend } from "./Label";
 export type { ListItemVariantProps, ListItemProps } from "./ListItem/ListItem";
 export { ListItemRoot, ListItemHeading, ListItemContent, ListItemImage } from "./ListItem/ListItem";
+export type { PageContainerVariantProps, PageContainerProps } from "./Layout/PageContainer";
+export { PageContainer } from "./Layout/PageContainer";
 export type { PageContentVariantProps } from "./Layout/PageContent";
 export { PageContent, BleedPageContent } from "./Layout/PageContent";
 export type { MenuRootProps, MenuItemVariantProps, MenuItemProps } from "./Menu";
@@ -65,7 +67,7 @@ export { PopoverRoot, PopoverAnchor, PopoverArrowStandalone, PopoverArrow, Popov
 export type { RadioGroupRootProps } from "./RadioGroup";
 export { RadioGroupRoot, RadioGroupIndicator, RadioGroupItemControl, RadioGroupItem, RadioGroupItemText, RadioGroupLabel, RadioGroupItemHiddenInput, } from "./RadioGroup";
 export type { SelectRootProps } from "./Select";
-export { SelectRoot, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItemGroupLabel, SelectItemGroup, SelectItemIndicator, SelectItem, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, SelectList, SelectHiddenSelect, } from "./Select";
+export { SelectRoot, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItemGroupLabel, SelectItemGroup, SelectItemIndicator, SelectItem, SelectItemText, SelectLabel, SelectPositioner, SelectContentStandalone, SelectTrigger, SelectValueText, SelectList, SelectHiddenSelect, } from "./Select";
 export type { SkeletonProps } from "./Skeleton";
 export { Skeleton } from "./Skeleton";
 export type { SliderRootProps } from "./Slider";

package/lib/index.js

@@ -129,6 +129,12 @@ Object.defineProperty(exports, "ComboboxContent", {
     return _Combobox.ComboboxContent;
   }
 });
+Object.defineProperty(exports, "ComboboxContentStandalone", {
+  enumerable: true,
+  get: function () {
+    return _Combobox.ComboboxContentStandalone;
+  }
+});
 Object.defineProperty(exports, "ComboboxControl", {
   enumerable: true,
   get: function () {
@@ -651,6 +657,12 @@ Object.defineProperty(exports, "OrderedList", {
     return _ArticleLists.OrderedList;
   }
 });
+Object.defineProperty(exports, "PageContainer", {
+  enumerable: true,
+  get: function () {
+    return _PageContainer.PageContainer;
+  }
+});
 Object.defineProperty(exports, "PageContent", {
   enumerable: true,
   get: function () {
@@ -831,6 +843,12 @@ Object.defineProperty(exports, "SelectContent", {
     return _Select.SelectContent;
   }
 });
+Object.defineProperty(exports, "SelectContentStandalone", {
+  enumerable: true,
+  get: function () {
+    return _Select.SelectContentStandalone;
+  }
+});
 Object.defineProperty(exports, "SelectControl", {
   enumerable: true,
   get: function () {
@@ -1335,6 +1353,7 @@ var _Image = require("./Image");
 var _Input = require("./Input");
 var _Label = require("./Label");
 var _ListItem = require("./ListItem/ListItem");
+var _PageContainer = require("./Layout/PageContainer");
 var _PageContent = require("./Layout/PageContent");
 var _Menu = require("./Menu");
 var _MessageBox = require("./MessageBox");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.54-alpha.0",
+  "version": "1.0.56-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e06a706dabbce890a06465bf25e2a424811e7523"
+  "gitHead": "9977b1ca38cb32c54458378b13fea3f7ca19a187"
 }