@ndla/primitives 1.0.53-alpha.0 → 1.0.55-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",
@@ -504,6 +507,8 @@
       "borderInlineEndColor]___[value:stroke.default",
       "animationDuration]___[value:2s]___[cond:_motionReduce",
       "borderWidth]___[value:4px",
+      "height]___[value:small",
+      "width]___[value:small",
       "borderWidth]___[value:8px",
       "background]___[value:surface.disabled.strong",
       "padding]___[value:1",
@@ -645,9 +650,6 @@
       "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",

package/dist/styles.css

@@ -813,6 +813,14 @@
     border-block-color: var(--colors-background-subtle);
 }
 
+  .h_small {
+    height: var(--sizes-small);
+}
+
+  .w_small {
+    width: var(--sizes-small);
+}
+
   .bg_surface\.disabled\.strong {
     background: var(--colors-surface-disabled-strong);
 }
@@ -1541,6 +1549,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;
 }
@@ -1904,18 +1924,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/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/Spinner.js

@@ -32,8 +32,8 @@ export const spinnerRecipe = cva({
     size: {
       small: {
         borderWidth: "4px",
-        height: "medium",
-        width: "medium"
+        height: "small",
+        width: "small"
       },
       medium: {
         borderWidth: "4px",

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

@@ -12,9 +12,10 @@ export { Badge } from "./Badge";
 export { BlockQuote } from "./BlockQuote";
 export { Button, IconButton, buttonBaseRecipe, buttonRecipe, iconButtonRecipe } from "./Button";
 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";
@@ -36,7 +37,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/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/Spinner.d.ts

@@ -12,8 +12,8 @@ export declare const spinnerRecipe: import("@ndla/styled-system/types").RecipeRu
     size: {
         small: {
             borderWidth: "4px";
-            height: "medium";
-            width: "medium";
+            height: "small";
+            width: "small";
         };
         medium: {
             borderWidth: "4px";

package/lib/Spinner.js

@@ -38,8 +38,8 @@ const spinnerRecipe = exports.spinnerRecipe = (0, _css.cva)({
     size: {
       small: {
         borderWidth: "4px",
-        height: "medium",
-        width: "medium"
+        height: "small",
+        width: "small"
       },
       medium: {
         borderWidth: "4px",

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

@@ -17,12 +17,13 @@ export type { ButtonProps, ButtonVariantProps, IconButtonProps, IconButtonVarian
 export { Button, IconButton, buttonBaseRecipe, buttonRecipe, iconButtonRecipe } from "./Button";
 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";
@@ -64,7 +65,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 () {
@@ -831,6 +837,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 () {
@@ -1287,6 +1299,12 @@ Object.defineProperty(exports, "buttonRecipe", {
     return _Button.buttonRecipe;
   }
 });
+Object.defineProperty(exports, "createStyleContext", {
+  enumerable: true,
+  get: function () {
+    return _createStyleContext.createStyleContext;
+  }
+});
 Object.defineProperty(exports, "getSrcSet", {
   enumerable: true,
   get: function () {
@@ -1311,6 +1329,7 @@ var _Badge = require("./Badge");
 var _BlockQuote = require("./BlockQuote");
 var _Button = require("./Button");
 var _Card = require("./Card/Card");
+var _createStyleContext = require("./createStyleContext");
 var _ToggleGroup = require("./ToggleGroup");
 var _Checkbox = require("./Checkbox");
 var _Combobox = require("./Combobox");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.53-alpha.0",
+  "version": "1.0.55-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2efa77f5b96c8c53d39d536d4f428bae6412c862"
+  "gitHead": "428dc6978a13bfff19a02020ecdbb69ce5e3fb5e"
 }