@ndla/primitives 0.0.17 → 0.0.18

package/lib/Combobox.js

@@ -153,7 +153,9 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(comboboxRecipe);
-const InternalComboboxRoot = withProvider(_react.Combobox.Root, "root");
+const InternalComboboxRoot = withProvider(_react.Combobox.Root, "root", {
+  baseComponent: true
+});
 const ComboboxRoot = _ref => {
   let {
     ...props
@@ -167,10 +169,18 @@ const ComboboxRoot = _ref => {
   );
 };
 exports.ComboboxRoot = ComboboxRoot;
-const ComboboxClearTrigger = exports.ComboboxClearTrigger = withContext(_react.Combobox.ClearTrigger, "clearTrigger");
-const ComboboxContent = exports.ComboboxContent = withContext(_react.Combobox.Content, "content");
-const ComboboxControl = exports.ComboboxControl = withContext(_react.Combobox.Control, "control");
-const ComboboxInput = exports.ComboboxInput = withContext(_react.Combobox.Input, "input");
+const ComboboxClearTrigger = exports.ComboboxClearTrigger = withContext(_react.Combobox.ClearTrigger, "clearTrigger", {
+  baseComponent: true
+});
+const ComboboxContent = exports.ComboboxContent = withContext(_react.Combobox.Content, "content", {
+  baseComponent: true
+});
+const ComboboxControl = exports.ComboboxControl = withContext(_react.Combobox.Control, "control", {
+  baseComponent: true
+});
+const ComboboxInput = exports.ComboboxInput = withContext(_react.Combobox.Input, "input", {
+  baseComponent: true
+});
 const InternalComboboxItemGroupLabel = withContext(_react.Combobox.ItemGroupLabel, "itemGroupLabel");
 const ComboboxItemGroupLabel = _ref2 => {
   let {
@@ -194,9 +204,15 @@ const ComboboxItemGroupLabel = _ref2 => {
   });
 };
 exports.ComboboxItemGroupLabel = ComboboxItemGroupLabel;
-const ComboboxItemGroup = exports.ComboboxItemGroup = withContext(_react.Combobox.ItemGroup, "itemGroup");
-const ComboboxItemIndicator = exports.ComboboxItemIndicator = withContext(_react.Combobox.ItemIndicator, "itemIndicator");
-const ComboboxItem = exports.ComboboxItem = withContext(_react.Combobox.Item, "item");
+const ComboboxItemGroup = exports.ComboboxItemGroup = withContext(_react.Combobox.ItemGroup, "itemGroup", {
+  baseComponent: true
+});
+const ComboboxItemIndicator = exports.ComboboxItemIndicator = withContext(_react.Combobox.ItemIndicator, "itemIndicator", {
+  baseComponent: true
+});
+const ComboboxItem = exports.ComboboxItem = withContext(_react.Combobox.Item, "item", {
+  baseComponent: true
+});
 const InternalComboboxItemText = withContext(_react.Combobox.ItemText, "itemText");
 const ComboboxItemText = _ref3 => {
   let {
@@ -235,5 +251,9 @@ const ComboboxLabel = _ref4 => {
   });
 };
 exports.ComboboxLabel = ComboboxLabel;
-const ComboboxPositioner = exports.ComboboxPositioner = withContext(_react.Combobox.Positioner, "positioner");
-const ComboboxTrigger = exports.ComboboxTrigger = withContext(_react.Combobox.Trigger, "trigger");
+const ComboboxPositioner = exports.ComboboxPositioner = withContext(_react.Combobox.Positioner, "positioner", {
+  baseComponent: true
+});
+const ComboboxTrigger = exports.ComboboxTrigger = withContext(_react.Combobox.Trigger, "trigger", {
+  baseComponent: true
+});

package/lib/Dialog.js

@@ -272,9 +272,15 @@ const DialogRoot = _ref => {
   });
 };
 exports.DialogRoot = DialogRoot;
-const DialogBackdrop = exports.DialogBackdrop = withContext(_react2.Dialog.Backdrop, "backdrop");
-const DialogStandaloneContent = exports.DialogStandaloneContent = withContext(_react2.Dialog.Content, "content");
-const DialogPositioner = exports.DialogPositioner = withContext(_react2.Dialog.Positioner, "positioner");
+const DialogBackdrop = exports.DialogBackdrop = withContext(_react2.Dialog.Backdrop, "backdrop", {
+  baseComponent: true
+});
+const DialogStandaloneContent = exports.DialogStandaloneContent = withContext(_react2.Dialog.Content, "content", {
+  baseComponent: true
+});
+const DialogPositioner = exports.DialogPositioner = withContext(_react2.Dialog.Positioner, "positioner", {
+  baseComponent: true
+});
 const DialogContent = exports.DialogContent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DialogBackdrop, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogPositioner, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogStandaloneContent, {

package/lib/Menu.js

@@ -148,7 +148,9 @@ const MenuRoot = _ref => {
   });
 };
 exports.MenuRoot = MenuRoot;
-const MenuContent = exports.MenuContent = withContext(_react2.Menu.Content, "content");
+const MenuContent = exports.MenuContent = withContext(_react2.Menu.Content, "content", {
+  baseComponent: true
+});
 const InternalMenuItemGroupLabel = withContext(_react2.Menu.ItemGroupLabel, "itemGroupLabel");
 const MenuItemGroupLabel = _ref2 => {
   let {
@@ -168,8 +170,12 @@ const MenuItemGroupLabel = _ref2 => {
   });
 };
 exports.MenuItemGroupLabel = MenuItemGroupLabel;
-const MenuItemGroup = exports.MenuItemGroup = withContext(_react2.Menu.ItemGroup, "itemGroup");
-const InternalMenuItem = withContext(_react2.Menu.Item, "item");
+const MenuItemGroup = exports.MenuItemGroup = withContext(_react2.Menu.ItemGroup, "itemGroup", {
+  baseComponent: true
+});
+const InternalMenuItem = withContext(_react2.Menu.Item, "item", {
+  baseComponent: true
+});
 const MenuItem = exports.MenuItem = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     css: cssProp = {},
@@ -184,8 +190,12 @@ const MenuItem = exports.MenuItem = /*#__PURE__*/(0, _react.forwardRef)((_ref3,
     ref: ref
   });
 });
-const MenuPositioner = exports.MenuPositioner = withContext(_react2.Menu.Positioner, "positioner");
-const InternalMenuTriggerItem = withContext(_react2.Menu.TriggerItem, "triggerItem");
+const MenuPositioner = exports.MenuPositioner = withContext(_react2.Menu.Positioner, "positioner", {
+  baseComponent: true
+});
+const InternalMenuTriggerItem = withContext(_react2.Menu.TriggerItem, "triggerItem", {
+  baseComponent: true
+});
 const MenuTriggerItem = exports.MenuTriggerItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   let {
     css: cssProp = {},
@@ -200,5 +210,9 @@ const MenuTriggerItem = exports.MenuTriggerItem = /*#__PURE__*/(0, _react.forwar
     ref: ref
   });
 });
-const MenuTrigger = exports.MenuTrigger = withContext(_react2.Menu.Trigger, "trigger");
-const MenuSeparator = exports.MenuSeparator = withContext(_react2.Menu.Separator, "separator");
+const MenuTrigger = exports.MenuTrigger = withContext(_react2.Menu.Trigger, "trigger", {
+  baseComponent: true
+});
+const MenuSeparator = exports.MenuSeparator = withContext(_react2.Menu.Separator, "separator", {
+  baseComponent: true
+});

package/lib/Pagination.d.ts

@@ -7,10 +7,13 @@
  */
 import { Pagination } from "@ark-ui/react";
 import { JsxStyleProps } from "@ndla/styled-system/types";
-export type PaginationRootProps = JsxStyleProps & Pagination.RootProps;
+interface RootProps extends Pagination.RootProps {
+    translations: Pagination.RootProps["translations"];
+}
+export type PaginationRootProps = JsxStyleProps & RootProps;
 export declare const PaginationRoot: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean | undefined;
-} & import("@ndla/styled-system/types").WithCss & Pagination.RootProps & import("react").RefAttributes<HTMLElement>>;
+} & import("@ndla/styled-system/types").WithCss & RootProps & import("react").RefAttributes<HTMLElement>>;
 export declare const PaginationItem: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Pagination.ItemProps & import("react").RefAttributes<HTMLButtonElement>>;
@@ -23,3 +26,4 @@ export declare const PaginationPrevTrigger: import("react").ForwardRefExoticComp
 export declare const PaginationNextTrigger: import("react").ForwardRefExoticComponent<{
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & Pagination.NextTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/lib/Pagination.js

@@ -35,8 +35,18 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(paginationRecipe);
-const PaginationRoot = exports.PaginationRoot = withProvider(_react.Pagination.Root, "root");
-const PaginationItem = exports.PaginationItem = withContext(_react.Pagination.Item, "item");
-const PaginationEllipsis = exports.PaginationEllipsis = withContext(_react.Pagination.Ellipsis, "ellipsis");
-const PaginationPrevTrigger = exports.PaginationPrevTrigger = withContext(_react.Pagination.PrevTrigger, "prevTrigger");
-const PaginationNextTrigger = exports.PaginationNextTrigger = withContext(_react.Pagination.NextTrigger, "nextTrigger");
+const PaginationRoot = exports.PaginationRoot = withProvider(_react.Pagination.Root, "root", {
+  baseComponent: true
+});
+const PaginationItem = exports.PaginationItem = withContext(_react.Pagination.Item, "item", {
+  baseComponent: true
+});
+const PaginationEllipsis = exports.PaginationEllipsis = withContext(_react.Pagination.Ellipsis, "ellipsis", {
+  baseComponent: true
+});
+const PaginationPrevTrigger = exports.PaginationPrevTrigger = withContext(_react.Pagination.PrevTrigger, "prevTrigger", {
+  baseComponent: true
+});
+const PaginationNextTrigger = exports.PaginationNextTrigger = withContext(_react.Pagination.NextTrigger, "nextTrigger", {
+  baseComponent: true
+});

package/lib/Popover.js

@@ -62,25 +62,45 @@ const PopoverRoot = _ref => {
   });
 };
 exports.PopoverRoot = PopoverRoot;
-const PopoverAnchor = exports.PopoverAnchor = withContext(_react.Popover.Anchor, "anchor");
-const PopoverArrowStandalone = exports.PopoverArrowStandalone = withContext(_react.Popover.Arrow, "arrow");
+const PopoverAnchor = exports.PopoverAnchor = withContext(_react.Popover.Anchor, "anchor", {
+  baseComponent: true
+});
+const PopoverArrowStandalone = exports.PopoverArrowStandalone = withContext(_react.Popover.Arrow, "arrow", {
+  baseComponent: true
+});
 const PopoverArrow = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverArrowStandalone, {
   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverArrowTip, {
     ...props
   })
 });
 exports.PopoverArrow = PopoverArrow;
-const PopoverArrowTip = exports.PopoverArrowTip = withContext(_react.Popover.ArrowTip, "arrowTip");
-const PopoverCloseTrigger = exports.PopoverCloseTrigger = withContext(_react.Popover.CloseTrigger, "closeTrigger");
-const PopoverContentStandalone = exports.PopoverContentStandalone = withContext(_react.Popover.Content, "content");
+const PopoverArrowTip = exports.PopoverArrowTip = withContext(_react.Popover.ArrowTip, "arrowTip", {
+  baseComponent: true
+});
+const PopoverCloseTrigger = exports.PopoverCloseTrigger = withContext(_react.Popover.CloseTrigger, "closeTrigger", {
+  baseComponent: true
+});
+const PopoverContentStandalone = exports.PopoverContentStandalone = withContext(_react.Popover.Content, "content", {
+  baseComponent: true
+});
 const PopoverContent = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverPositioner, {
   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverContentStandalone, {
     ...props
   })
 });
 exports.PopoverContent = PopoverContent;
-const PopoverDescription = exports.PopoverDescription = withContext(_react.Popover.Description, "description");
-const PopoverIndicator = exports.PopoverIndicator = withContext(_react.Popover.Indicator, "indicator");
-const PopoverPositioner = exports.PopoverPositioner = withContext(_react.Popover.Positioner, "positioner");
-const PopoverTitle = exports.PopoverTitle = withContext(_react.Popover.Title, "title");
-const PopoverTrigger = exports.PopoverTrigger = withContext(_react.Popover.Trigger, "trigger");
+const PopoverDescription = exports.PopoverDescription = withContext(_react.Popover.Description, "description", {
+  baseComponent: true
+});
+const PopoverIndicator = exports.PopoverIndicator = withContext(_react.Popover.Indicator, "indicator", {
+  baseComponent: true
+});
+const PopoverPositioner = exports.PopoverPositioner = withContext(_react.Popover.Positioner, "positioner", {
+  baseComponent: true
+});
+const PopoverTitle = exports.PopoverTitle = withContext(_react.Popover.Title, "title", {
+  baseComponent: true
+});
+const PopoverTrigger = exports.PopoverTrigger = withContext(_react.Popover.Trigger, "trigger", {
+  baseComponent: true
+});

package/lib/RadioGroup.js

@@ -96,10 +96,18 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(radioGroupRecipe);
-const RadioGroupRoot = exports.RadioGroupRoot = withProvider(_react2.RadioGroup.Root, "root");
-const RadioGroupIndicator = exports.RadioGroupIndicator = withContext(_react2.RadioGroup.Indicator, "indicator");
-const RadioGroupItemControl = exports.RadioGroupItemControl = withContext(_react2.RadioGroup.ItemControl, "itemControl");
-const RadioGroupItem = exports.RadioGroupItem = withContext(_react2.RadioGroup.Item, "item");
+const RadioGroupRoot = exports.RadioGroupRoot = withProvider(_react2.RadioGroup.Root, "root", {
+  baseComponent: true
+});
+const RadioGroupIndicator = exports.RadioGroupIndicator = withContext(_react2.RadioGroup.Indicator, "indicator", {
+  baseComponent: true
+});
+const RadioGroupItemControl = exports.RadioGroupItemControl = withContext(_react2.RadioGroup.ItemControl, "itemControl", {
+  baseComponent: true
+});
+const RadioGroupItem = exports.RadioGroupItem = withContext(_react2.RadioGroup.Item, "item", {
+  baseComponent: true
+});
 const InternalRadioGroupItemText = withContext(_react2.RadioGroup.ItemText, "itemText");
 const RadioGroupItemText = _ref => {
   let {

package/lib/Select.js

@@ -138,7 +138,9 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(selectRecipe);
-const InternalSelectRoot = withProvider(_react2.Select.Root, "root");
+const InternalSelectRoot = withProvider(_react2.Select.Root, "root", {
+  baseComponent: true
+});
 const SelectRoot = _ref => {
   let {
     lazyMount = true,
@@ -156,10 +158,18 @@ const SelectRoot = _ref => {
   );
 };
 exports.SelectRoot = SelectRoot;
-const SelectClearTrigger = exports.SelectClearTrigger = withContext(_react2.Select.ClearTrigger, "clearTrigger");
-const SelectContent = exports.SelectContent = withContext(_react2.Select.Content, "content");
-const SelectControl = exports.SelectControl = withContext(_react2.Select.Control, "control");
-const SelectIndicator = exports.SelectIndicator = withContext(_react2.Select.Indicator, "indicator");
+const SelectClearTrigger = exports.SelectClearTrigger = withContext(_react2.Select.ClearTrigger, "clearTrigger", {
+  baseComponent: true
+});
+const SelectContent = exports.SelectContent = withContext(_react2.Select.Content, "content", {
+  baseComponent: true
+});
+const SelectControl = exports.SelectControl = withContext(_react2.Select.Control, "control", {
+  baseComponent: true
+});
+const SelectIndicator = exports.SelectIndicator = withContext(_react2.Select.Indicator, "indicator", {
+  baseComponent: true
+});
 const SelectItemGroupLabel = exports.SelectItemGroupLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     children,
@@ -179,10 +189,18 @@ const SelectItemGroupLabel = exports.SelectItemGroupLabel = /*#__PURE__*/(0, _re
   });
 });
 const InternalSelectItemGroupLabel = withContext(_react2.Select.ItemGroupLabel, "itemGroupLabel");
-const SelectItemGroup = exports.SelectItemGroup = withContext(_react2.Select.ItemGroup, "itemGroup");
-const SelectItemIndicator = exports.SelectItemIndicator = withContext(_react2.Select.ItemIndicator, "itemIndicator");
-const SelectItem = exports.SelectItem = withContext(_react2.Select.Item, "item");
-const SelectItemText = exports.SelectItemText = withContext(_react2.Select.ItemText, "itemText");
+const SelectItemGroup = exports.SelectItemGroup = withContext(_react2.Select.ItemGroup, "itemGroup", {
+  baseComponent: true
+});
+const SelectItemIndicator = exports.SelectItemIndicator = withContext(_react2.Select.ItemIndicator, "itemIndicator", {
+  baseComponent: true
+});
+const SelectItem = exports.SelectItem = withContext(_react2.Select.Item, "item", {
+  baseComponent: true
+});
+const SelectItemText = exports.SelectItemText = withContext(_react2.Select.ItemText, "itemText", {
+  baseComponent: true
+});
 const InternalSelectLabel = withContext(_react2.Select.Label, "label");
 const SelectLabel = exports.SelectLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
@@ -198,6 +216,12 @@ const SelectLabel = exports.SelectLabel = /*#__PURE__*/(0, _react.forwardRef)((_
     })
   });
 });
-const SelectPositioner = exports.SelectPositioner = withContext(_react2.Select.Positioner, "positioner");
-const SelectTrigger = exports.SelectTrigger = withContext(_react2.Select.Trigger, "trigger");
-const SelectValueText = exports.SelectValueText = withContext(_react2.Select.ValueText, "valueText");
+const SelectPositioner = exports.SelectPositioner = withContext(_react2.Select.Positioner, "positioner", {
+  baseComponent: true
+});
+const SelectTrigger = exports.SelectTrigger = withContext(_react2.Select.Trigger, "trigger", {
+  baseComponent: true
+});
+const SelectValueText = exports.SelectValueText = withContext(_react2.Select.ValueText, "valueText", {
+  baseComponent: true
+});

package/lib/Slider.js

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

package/lib/Switch.js

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

package/lib/Tabs.d.ts

@@ -130,7 +130,10 @@ declare const tabsRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeF
     };
 }>;
 export type TabsVariantProps = RecipeVariantProps<typeof tabsRecipe>;
-export type TabsRootProps = Tabs.RootProps & TabsVariantProps & JsxStyleProps;
+interface RootProps extends Tabs.RootProps {
+    translations: Tabs.RootProps["translations"];
+}
+export type TabsRootProps = RootProps & TabsVariantProps & JsxStyleProps;
 export declare const TabsRoot: ({ lazyMount, unmountOnExit, ...props }: TabsRootProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TabsContent: import("react").ForwardRefExoticComponent<Tabs.ContentProps & {
     consumeCss?: boolean | undefined;

package/lib/Tabs.js

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

package/lib/TagsInput.d.ts

@@ -8,34 +8,47 @@
 import { TagsInput } from "@ark-ui/react";
 import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
-export type TagsInputRootProps = TagsInput.RootProps & JsxStyleProps;
-export declare const TagsInputRoot: import("react").ForwardRefExoticComponent<TagsInput.RootProps & {
+interface RootProps extends TagsInput.RootProps {
+    translations: TagsInput.RootProps["translations"];
+}
+export type TagsInputRootProps = RootProps & JsxStyleProps;
+export declare const TagsInputRoot: import("react").ForwardRefExoticComponent<RootProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export type TagsInputClearTriggerProps = TagsInput.ClearTriggerProps & JsxStyleProps;
 export declare const TagsInputClearTrigger: import("react").ForwardRefExoticComponent<TagsInput.ClearTriggerProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
+export type TagsInputControlProps = TagsInput.ControlProps & JsxStyleProps;
 export declare const TagsInputControl: import("react").ForwardRefExoticComponent<TagsInput.ControlProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export type TagsInputInputProps = TagsInput.InputProps & JsxStyleProps;
 export declare const TagsInputInput: import("react").ForwardRefExoticComponent<TagsInput.InputProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLInputElement>>;
+export type TagsInputItemDeleteTriggerProps = TagsInput.ItemDeleteTriggerProps & JsxStyleProps;
 export declare const TagsInputItemDeleteTrigger: import("react").ForwardRefExoticComponent<TagsInput.ItemDeleteTriggerProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
+export type TagsInputItemInputProps = TagsInput.ItemInputProps & JsxStyleProps;
 export declare const TagsInputItemInput: import("react").ForwardRefExoticComponent<TagsInput.ItemInputProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLInputElement>>;
+export type TagsInputItemPreviewProps = TagsInput.ItemPreviewProps & JsxStyleProps;
 export declare const TagsInputItemPreview: import("react").ForwardRefExoticComponent<TagsInput.ItemPreviewProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export type TagsInputItemProps = TagsInput.ItemProps & JsxStyleProps;
 export declare const TagsInputItem: import("react").ForwardRefExoticComponent<TagsInput.ItemProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export type TagsInputItemTextProps = TagsInput.ItemTextProps & JsxStyleProps;
 export declare const TagsInputItemText: import("react").ForwardRefExoticComponent<TagsInput.ItemTextProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLSpanElement>>;
+export type TagsInputLabelProps = TagsInput.LabelProps & JsxStyleProps & TextProps;
 export declare const TagsInputLabel: import("react").ForwardRefExoticComponent<TagsInput.LabelProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLLabelElement>>;
+export {};

package/lib/TagsInput.js

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

package/lib/Toast.js

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

package/lib/Tooltip.js

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

package/lib/createStyleContext.d.ts

@@ -21,9 +21,12 @@ interface BaseStyleContextProps {
     asChild?: boolean;
     consumeCss?: boolean;
 }
+interface CreateStyleContextOptions {
+    baseComponent?: boolean;
+}
 export declare const createStyleContext: <R extends Recipe>(recipe: R) => {
     withRootProvider: <P extends {}>(Component: ElementType) => (props: P) => import("react/jsx-runtime").JSX.Element;
-    withProvider: <T, P_1 extends BaseStyleContextProps & WithCss>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_1> & RefAttributes<T>>;
-    withContext: <T_1, P_2 extends BaseStyleContextProps & WithCss>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_2> & RefAttributes<T_1>>;
+    withProvider: <T, P_1 extends BaseStyleContextProps & WithCss>(Component: ElementType, slot: Slot<R>, options?: CreateStyleContextOptions) => ForwardRefExoticComponent<PropsWithoutRef<P_1> & RefAttributes<T>>;
+    withContext: <T_1, P_2 extends BaseStyleContextProps & WithCss>(Component: ElementType, slot: Slot<R>, options?: CreateStyleContextOptions) => ForwardRefExoticComponent<PropsWithoutRef<P_2> & RefAttributes<T_1>>;
 };
 export {};

package/lib/createStyleContext.js

@@ -35,11 +35,8 @@ const createStyleContext = recipe => {
     };
     return StyledComponent;
   };
-  const withProvider = (Component, slot) => {
-    const opts = typeof Component === "string" ? undefined : {
-      baseComponent: true
-    };
-    const StyledComponent = (0, _jsx2.styled)(Component, {}, opts);
+  const withProvider = (Component, slot, options) => {
+    const StyledComponent = (0, _jsx2.styled)(Component, {}, options);
     return /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       let {
         css: cssProp,
@@ -57,11 +54,8 @@ const createStyleContext = recipe => {
       });
     });
   };
-  const withContext = (Component, slot) => {
-    const opts = typeof Component === "string" ? undefined : {
-      baseComponent: true
-    };
-    const StyledComponent = (0, _jsx2.styled)(Component, {}, opts);
+  const withContext = (Component, slot, options) => {
+    const StyledComponent = (0, _jsx2.styled)(Component, {}, options);
     return /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
       let {
         css: cssProp,