@ndla/primitives 1.0.130-alpha.0 → 1.0.132-alpha.0

package/lib/Tabs.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Tabs } from "@ark-ui/react";
+import { Tabs } from "@ark-ui/react/tabs";
 import { type RecipeVariantProps } from "@ndla/styled-system/css";
 import type { StyledProps } from "@ndla/styled-system/types";
 import type { RefAttributes } from "react";

package/lib/Tabs.js

@@ -1,7 +1,7 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_tabs = require("@ark-ui/react/tabs");
 //#region src/Tabs.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -174,16 +174,16 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 		}
 	} }
 }));
-const InternalTabsRoot = withProvider(_ark_ui_react.Tabs.Root, "root", { baseComponent: true });
+const InternalTabsRoot = withProvider(_ark_ui_react_tabs.Tabs.Root, "root", { baseComponent: true });
 const TabsRoot = ({ lazyMount = true, unmountOnExit = true, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalTabsRoot, {
 	lazyMount,
 	unmountOnExit,
 	...props
 });
-const TabsContent = withContext(_ark_ui_react.Tabs.Content, "content", { baseComponent: true });
-const TabsIndicator = withContext(_ark_ui_react.Tabs.Indicator, "indicator", { baseComponent: true });
-const TabsList = withContext(_ark_ui_react.Tabs.List, "list", { baseComponent: true });
-const InternalTabsTrigger = withContext(_ark_ui_react.Tabs.Trigger, "trigger", { baseComponent: true });
+const TabsContent = withContext(_ark_ui_react_tabs.Tabs.Content, "content", { baseComponent: true });
+const TabsIndicator = withContext(_ark_ui_react_tabs.Tabs.Indicator, "indicator", { baseComponent: true });
+const TabsList = withContext(_ark_ui_react_tabs.Tabs.List, "list", { baseComponent: true });
+const InternalTabsTrigger = withContext(_ark_ui_react_tabs.Tabs.Trigger, "trigger", { baseComponent: true });
 const TabsTrigger = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalTabsTrigger, {
 	className: (0, _ndla_styled_system_css.cx)("peer", className),
 	...props

package/lib/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["Tabs"],"sources":["../src/Tabs.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Tabs } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, cx, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\n\nconst tabsRecipe = sva({\n  // TODO: This still doesn't work. Need to figure out why we need to pass keys manually.\n  // slots: tabsAnatomy.keys(),\n  slots: [\"root\", \"list\", \"trigger\", \"content\", \"indicator\"],\n  base: {\n    root: {\n      position: \"relative\",\n      display: \"flex\",\n      width: \"100%\",\n      _horizontal: {\n        flexDirection: \"column\",\n      },\n      _vertical: {\n        flexDirection: \"row\",\n      },\n    },\n    list: {\n      position: \"relative\",\n      display: \"flex\",\n      flexShrink: \"0\",\n      flexWrap: \"wrap\",\n      _horizontal: {\n        flexDirection: \"row\",\n      },\n      _vertical: {\n        flexDirection: \"column\",\n      },\n    },\n    trigger: {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      flexShrink: \"0\",\n      cursor: \"pointer\",\n      textStyle: \"label.small\",\n      fontWeight: \"bold\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"color, background, border-color\",\n      transitionTimingFunction: \"default\",\n      whiteSpace: \"nowrap\",\n      paddingInline: \"small\",\n      paddingBlock: \"3xsmall\",\n      zIndex: \"1\",\n      _hover: {\n        color: \"text.action\",\n      },\n      _selected: {\n        color: \"text.strong\",\n      },\n      _disabled: {\n        color: \"text.subtle\",\n        cursor: \"not-allowed\",\n        _hover: {\n          color: \"text.subtle\",\n        },\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n      gap: \"xsmall\",\n    },\n  },\n  defaultVariants: {\n    variant: \"line\",\n  },\n  variants: {\n    variant: {\n      line: {\n        trigger: {\n          borderColor: \"stroke.default\",\n          _hover: {\n            borderColor: \"stroke.hover\",\n            _focusVisible: {\n              borderColor: \"stroke.default\",\n            },\n          },\n          _horizontal: {\n            borderBottom: \"1px solid\",\n          },\n          _disabled: {\n            borderColor: \"stroke.default\",\n            _hover: {\n              borderColor: \"stroke.default\",\n            },\n          },\n          _vertical: {\n            borderLeft: \"1px solid\",\n            justifyContent: \"flex-start\",\n          },\n          _focusVisible: {\n            outline: \"none\",\n            borderRadius: \"unset\",\n          },\n        },\n        indicator: {\n          background: \"stroke.default\",\n          _peerFocusVisible: {\n            height: \"var(--height)\",\n            width: \"var(--width)\",\n            outline: \"3px solid\",\n            outlineOffset: \"-3px\",\n            outlineColor: \"stroke.default\",\n            background: \"transparent\",\n            _horizontal: {\n              borderTopRadius: \"xsmall\",\n            },\n            _vertical: {\n              borderRightRadius: \"xsmall\",\n            },\n          },\n          _horizontal: {\n            top: \"calc(var(--top) + var(--height) - 6px)\",\n            height: \"3\",\n            width: \"var(--width)\",\n            _peerFocusVisible: { top: \"var(--top)\" },\n          },\n          _vertical: {\n            height: \"var(--height)\",\n            left: \"0\",\n            width: \"3\",\n          },\n        },\n        content: {\n          zIndex: \"1\",\n          _horizontal: {\n            paddingBlockStart: \"xsmall\",\n          },\n          _vertical: {\n            paddingInlineStart: \"xsmall\",\n          },\n          _focusVisible: {\n            outline: \"none\",\n            boxShadow: \"0 0 0 3px var(--shadow-color)\",\n            boxShadowColor: \"stroke.default\",\n          },\n        },\n      },\n      outline: {\n        list: {\n          _horizontal: {\n            marginBlockEnd: \"-1px\",\n          },\n          _vertical: {\n            marginInlineEnd: \"-1px\",\n          },\n        },\n        trigger: {\n          borderColor: \"transparent\",\n          borderWidth: \"1px\",\n          _horizontal: {\n            borderTopRadius: \"xsmall\",\n          },\n          _vertical: {\n            borderTopLeftRadius: \"xsmall\",\n            borderBottomLeftRadius: \"xsmall\",\n          },\n          _selected: {\n            background: \"surface.default\",\n            borderColor: \"stroke.default\",\n            _horizontal: {\n              borderBottom: \"none\",\n            },\n            _vertical: {\n              borderRight: \"none\",\n            },\n          },\n          _focusVisible: {\n            outline: \"3px solid\",\n            outlineOffset: \"-3px\",\n            outlineColor: \"stroke.default\",\n          },\n        },\n        content: {\n          borderWidth: \"1px\",\n          borderColor: \"stroke.default\",\n          background: \"surface.default\",\n          width: \"100%\",\n          padding: \"xsmall\",\n          _vertical: {\n            borderBottomRadius: \"xsmall\",\n            borderRightRadius: \"xsmall\",\n          },\n          _horizontal: {\n            borderRightRadius: \"xsmall\",\n            borderBottomLeftRadius: \"xsmall\",\n          },\n          _focusVisible: {\n            outline: \"3px solid\",\n            outlineOffset: \"-3px\",\n            outlineColor: \"stroke.default\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(tabsRecipe);\n\nexport type TabsVariantProps = NonNullable<RecipeVariantProps<typeof tabsRecipe>>;\n\nexport interface TabsRootProps extends Tabs.RootProps, TabsVariantProps, StyledProps, RefAttributes<HTMLDivElement> {\n  translations: Tabs.RootProps[\"translations\"];\n}\n\nconst InternalTabsRoot = withProvider(Tabs.Root, \"root\", { baseComponent: true });\n\nexport const TabsRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: TabsRootProps) => (\n  <InternalTabsRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const TabsContent = withContext(Tabs.Content, \"content\", { baseComponent: true });\n\nexport const TabsIndicator = withContext(Tabs.Indicator, \"indicator\", { baseComponent: true });\n\nexport const TabsList = withContext(Tabs.List, \"list\", { baseComponent: true });\n\nconst InternalTabsTrigger = withContext(Tabs.Trigger, \"trigger\", { baseComponent: true });\n\ninterface TabsTriggerProps extends Tabs.TriggerProps, StyledProps, RefAttributes<HTMLButtonElement> {}\n\nexport const TabsTrigger = ({ className, ...props }: TabsTriggerProps) => (\n  <InternalTabsTrigger className={cx(\"peer\", className)} {...props} />\n);\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":["Tabs"],"sources":["../src/Tabs.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Tabs } from \"@ark-ui/react/tabs\";\nimport { type RecipeVariantProps, cx, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\n\nconst tabsRecipe = sva({\n  // TODO: This still doesn't work. Need to figure out why we need to pass keys manually.\n  // slots: tabsAnatomy.keys(),\n  slots: [\"root\", \"list\", \"trigger\", \"content\", \"indicator\"],\n  base: {\n    root: {\n      position: \"relative\",\n      display: \"flex\",\n      width: \"100%\",\n      _horizontal: {\n        flexDirection: \"column\",\n      },\n      _vertical: {\n        flexDirection: \"row\",\n      },\n    },\n    list: {\n      position: \"relative\",\n      display: \"flex\",\n      flexShrink: \"0\",\n      flexWrap: \"wrap\",\n      _horizontal: {\n        flexDirection: \"row\",\n      },\n      _vertical: {\n        flexDirection: \"column\",\n      },\n    },\n    trigger: {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      flexShrink: \"0\",\n      cursor: \"pointer\",\n      textStyle: \"label.small\",\n      fontWeight: \"bold\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"color, background, border-color\",\n      transitionTimingFunction: \"default\",\n      whiteSpace: \"nowrap\",\n      paddingInline: \"small\",\n      paddingBlock: \"3xsmall\",\n      zIndex: \"1\",\n      _hover: {\n        color: \"text.action\",\n      },\n      _selected: {\n        color: \"text.strong\",\n      },\n      _disabled: {\n        color: \"text.subtle\",\n        cursor: \"not-allowed\",\n        _hover: {\n          color: \"text.subtle\",\n        },\n      },\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n      gap: \"xsmall\",\n    },\n  },\n  defaultVariants: {\n    variant: \"line\",\n  },\n  variants: {\n    variant: {\n      line: {\n        trigger: {\n          borderColor: \"stroke.default\",\n          _hover: {\n            borderColor: \"stroke.hover\",\n            _focusVisible: {\n              borderColor: \"stroke.default\",\n            },\n          },\n          _horizontal: {\n            borderBottom: \"1px solid\",\n          },\n          _disabled: {\n            borderColor: \"stroke.default\",\n            _hover: {\n              borderColor: \"stroke.default\",\n            },\n          },\n          _vertical: {\n            borderLeft: \"1px solid\",\n            justifyContent: \"flex-start\",\n          },\n          _focusVisible: {\n            outline: \"none\",\n            borderRadius: \"unset\",\n          },\n        },\n        indicator: {\n          background: \"stroke.default\",\n          _peerFocusVisible: {\n            height: \"var(--height)\",\n            width: \"var(--width)\",\n            outline: \"3px solid\",\n            outlineOffset: \"-3px\",\n            outlineColor: \"stroke.default\",\n            background: \"transparent\",\n            _horizontal: {\n              borderTopRadius: \"xsmall\",\n            },\n            _vertical: {\n              borderRightRadius: \"xsmall\",\n            },\n          },\n          _horizontal: {\n            top: \"calc(var(--top) + var(--height) - 6px)\",\n            height: \"3\",\n            width: \"var(--width)\",\n            _peerFocusVisible: { top: \"var(--top)\" },\n          },\n          _vertical: {\n            height: \"var(--height)\",\n            left: \"0\",\n            width: \"3\",\n          },\n        },\n        content: {\n          zIndex: \"1\",\n          _horizontal: {\n            paddingBlockStart: \"xsmall\",\n          },\n          _vertical: {\n            paddingInlineStart: \"xsmall\",\n          },\n          _focusVisible: {\n            outline: \"none\",\n            boxShadow: \"0 0 0 3px var(--shadow-color)\",\n            boxShadowColor: \"stroke.default\",\n          },\n        },\n      },\n      outline: {\n        list: {\n          _horizontal: {\n            marginBlockEnd: \"-1px\",\n          },\n          _vertical: {\n            marginInlineEnd: \"-1px\",\n          },\n        },\n        trigger: {\n          borderColor: \"transparent\",\n          borderWidth: \"1px\",\n          _horizontal: {\n            borderTopRadius: \"xsmall\",\n          },\n          _vertical: {\n            borderTopLeftRadius: \"xsmall\",\n            borderBottomLeftRadius: \"xsmall\",\n          },\n          _selected: {\n            background: \"surface.default\",\n            borderColor: \"stroke.default\",\n            _horizontal: {\n              borderBottom: \"none\",\n            },\n            _vertical: {\n              borderRight: \"none\",\n            },\n          },\n          _focusVisible: {\n            outline: \"3px solid\",\n            outlineOffset: \"-3px\",\n            outlineColor: \"stroke.default\",\n          },\n        },\n        content: {\n          borderWidth: \"1px\",\n          borderColor: \"stroke.default\",\n          background: \"surface.default\",\n          width: \"100%\",\n          padding: \"xsmall\",\n          _vertical: {\n            borderBottomRadius: \"xsmall\",\n            borderRightRadius: \"xsmall\",\n          },\n          _horizontal: {\n            borderRightRadius: \"xsmall\",\n            borderBottomLeftRadius: \"xsmall\",\n          },\n          _focusVisible: {\n            outline: \"3px solid\",\n            outlineOffset: \"-3px\",\n            outlineColor: \"stroke.default\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(tabsRecipe);\n\nexport type TabsVariantProps = NonNullable<RecipeVariantProps<typeof tabsRecipe>>;\n\nexport interface TabsRootProps extends Tabs.RootProps, TabsVariantProps, StyledProps, RefAttributes<HTMLDivElement> {\n  translations: Tabs.RootProps[\"translations\"];\n}\n\nconst InternalTabsRoot = withProvider(Tabs.Root, \"root\", { baseComponent: true });\n\nexport const TabsRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: TabsRootProps) => (\n  <InternalTabsRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const TabsContent = withContext(Tabs.Content, \"content\", { baseComponent: true });\n\nexport const TabsIndicator = withContext(Tabs.Indicator, \"indicator\", { baseComponent: true });\n\nexport const TabsList = withContext(Tabs.List, \"list\", { baseComponent: true });\n\nconst InternalTabsTrigger = withContext(Tabs.Trigger, \"trigger\", { baseComponent: true });\n\ninterface TabsTriggerProps extends Tabs.TriggerProps, StyledProps, RefAttributes<HTMLButtonElement> {}\n\nexport const TabsTrigger = ({ className, ...props }: TabsTriggerProps) => (\n  <InternalTabsTrigger className={cx(\"peer\", className)} {...props} />\n);\n"],"mappings":"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"}

package/lib/TagsInput.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { TagsInput } from "@ark-ui/react";
+import { TagsInput } from "@ark-ui/react/tags-input";
 import type { StyledProps } from "@ndla/styled-system/types";
 import { type RefAttributes } from "react";
 import { type TextProps } from "./Text";

package/lib/TagsInput.js

@@ -1,9 +1,9 @@
 const require_Label = require("./Label.js");
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+let _ark_ui_react_tags_input = require("@ark-ui/react/tags-input");
 //#region src/TagsInput.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -13,7 +13,7 @@ let react = require("react");
 *
 */
 const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
-	slots: _ark_ui_react.tagsInputAnatomy.keys(),
+	slots: _ark_ui_react_tags_input.tagsInputAnatomy.keys(),
 	base: {
 		root: {
 			display: "flex",
@@ -86,16 +86,16 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 		}
 	}
 }));
-const TagsInputRoot = withProvider(_ark_ui_react.TagsInput.Root, "root", { baseComponent: true });
-const TagsInputClearTrigger = withContext(_ark_ui_react.TagsInput.ClearTrigger, "clearTrigger", { baseComponent: true });
-const TagsInputControl = withContext(_ark_ui_react.TagsInput.Control, "control", { baseComponent: true });
-const TagsInputInput = withContext(_ark_ui_react.TagsInput.Input, "input", { baseComponent: true });
-const TagsInputItemDeleteTrigger = withContext(_ark_ui_react.TagsInput.ItemDeleteTrigger, "itemDeleteTrigger", { baseComponent: true });
-const TagsInputItemInput = withContext(_ark_ui_react.TagsInput.ItemInput, "itemInput", { baseComponent: true });
-const TagsInputItemPreview = withContext(_ark_ui_react.TagsInput.ItemPreview, "itemPreview", { baseComponent: true });
-const TagsInputItem = withContext(_ark_ui_react.TagsInput.Item, "item", { baseComponent: true });
-const TagsInputItemText = withContext(_ark_ui_react.TagsInput.ItemText, "itemText", { baseComponent: true });
-const InternalTagsInputLabel = withContext(_ark_ui_react.TagsInput.Label, "label");
+const TagsInputRoot = withProvider(_ark_ui_react_tags_input.TagsInput.Root, "root", { baseComponent: true });
+const TagsInputClearTrigger = withContext(_ark_ui_react_tags_input.TagsInput.ClearTrigger, "clearTrigger", { baseComponent: true });
+const TagsInputControl = withContext(_ark_ui_react_tags_input.TagsInput.Control, "control", { baseComponent: true });
+const TagsInputInput = withContext(_ark_ui_react_tags_input.TagsInput.Input, "input", { baseComponent: true });
+const TagsInputItemDeleteTrigger = withContext(_ark_ui_react_tags_input.TagsInput.ItemDeleteTrigger, "itemDeleteTrigger", { baseComponent: true });
+const TagsInputItemInput = withContext(_ark_ui_react_tags_input.TagsInput.ItemInput, "itemInput", { baseComponent: true });
+const TagsInputItemPreview = withContext(_ark_ui_react_tags_input.TagsInput.ItemPreview, "itemPreview", { baseComponent: true });
+const TagsInputItem = withContext(_ark_ui_react_tags_input.TagsInput.Item, "item", { baseComponent: true });
+const TagsInputItemText = withContext(_ark_ui_react_tags_input.TagsInput.ItemText, "itemText", { baseComponent: true });
+const InternalTagsInputLabel = withContext(_ark_ui_react_tags_input.TagsInput.Label, "label");
 const TagsInputLabel = (0, react.forwardRef)(({ children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalTagsInputLabel, {
 	asChild: true,
 	ref,

package/lib/TagsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.js","names":["tagsInputAnatomy","TagsInput","Label"],"sources":["../src/TagsInput.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { TagsInput, tagsInputAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { type TextProps } from \"./Text\";\n\nconst tagsInputRecipe = sva({\n  slots: tagsInputAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xxsmall\",\n      width: \"full\",\n    },\n    control: {\n      display: \"inline-flex\",\n      gap: \"xxsmall\",\n      alignItems: \"center\",\n      flexWrap: \"wrap\",\n    },\n    item: {\n      paddingBlock: \"3xsmall\",\n    },\n    itemPreview: {\n      display: \"flex\",\n      gap: \"1\",\n      paddingBlock: \"4xsmall\",\n      paddingInlineEnd: \"3xsmall\",\n      paddingInlineStart: \"xsmall\",\n      cursor: \"initial\",\n      borderRadius: \"large\",\n      outline: \"1px solid\",\n      outlineColor: \"transparent\",\n      backgroundColor: \"surface.action.selected\",\n      color: \"text.onAction\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"background, outline-color, color\",\n      transitionTimingFunction: \"default\",\n      textStyle: \"label.medium\",\n      _hover: {\n        backgroundColor: \"surface.actionSubtle.hover\",\n        outlineColor: \"stroke.hover\",\n        color: \"text.default\",\n        \"& svg\": {\n          color: \"stroke.hover\",\n        },\n        _motionReduce: {\n          transition: \"none\",\n          transitionDuration: \"0s\",\n        },\n      },\n      _highlighted: {\n        backgroundColor: \"surface.actionSubtle.hover\",\n        outlineWidth: \"3px\",\n        outlineOffset: \"-1px\",\n        outlineColor: \"stroke.hover\",\n        color: \"text.default\",\n        \"& svg\": {\n          color: \"stroke.hover\",\n        },\n        _motionReduce: {\n          transition: \"none\",\n          transitionDuration: \"0s\",\n        },\n      },\n    },\n    input: {\n      flex: \"1\",\n    },\n    itemDeleteTrigger: {\n      paddingBottom: \"1\",\n      cursor: \"pointer\",\n      \"& span\": {\n        display: \"inline-block\",\n      },\n      \"& svg\": {\n        marginInline: \"0\",\n        marginBlock: \"0\",\n        width: \"medium\",\n        height: \"medium\",\n      },\n    },\n    itemText: {\n      paddingBottom: \"1\",\n    },\n    itemInput: {\n      outline: \"none\",\n      background: \"transparent\",\n    },\n  },\n});\nconst { withProvider, withContext } = createStyleContext(tagsInputRecipe);\n\nexport interface TagsInputRootProps extends TagsInput.RootProps, StyledProps {\n  translations: TagsInput.RootProps[\"translations\"];\n}\n\nexport const TagsInputRoot = withProvider(TagsInput.Root, \"root\", {\n  baseComponent: true,\n});\n\nexport interface TagsInputClearTriggerProps extends TagsInput.ClearTriggerProps, StyledProps {}\n\nexport const TagsInputClearTrigger = withContext(TagsInput.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport interface TagsInputControlProps extends TagsInput.ControlProps, StyledProps {}\n\nexport const TagsInputControl = withContext(TagsInput.Control, \"control\", { baseComponent: true });\n\nexport interface TagsInputInputProps extends TagsInput.InputProps, StyledProps {}\n\nexport const TagsInputInput = withContext(TagsInput.Input, \"input\", { baseComponent: true });\n\nexport interface TagsInputItemDeleteTriggerProps extends TagsInput.ItemDeleteTriggerProps, StyledProps {}\n\nexport const TagsInputItemDeleteTrigger = withContext(TagsInput.ItemDeleteTrigger, \"itemDeleteTrigger\", {\n  baseComponent: true,\n});\n\nexport interface TagsInputItemInputProps extends TagsInput.ItemInputProps, StyledProps {}\n\nexport const TagsInputItemInput = withContext(TagsInput.ItemInput, \"itemInput\", { baseComponent: true });\n\nexport interface TagsInputItemPreviewProps extends TagsInput.ItemPreviewProps, StyledProps {}\n\nexport const TagsInputItemPreview = withContext(TagsInput.ItemPreview, \"itemPreview\", { baseComponent: true });\n\nexport interface TagsInputItemProps extends TagsInput.ItemProps, StyledProps {}\n\nexport const TagsInputItem = withContext(TagsInput.Item, \"item\", { baseComponent: true });\n\nexport interface TagsInputItemTextProps extends TagsInput.ItemTextProps, StyledProps {}\n\nexport const TagsInputItemText = withContext(TagsInput.ItemText, \"itemText\", { baseComponent: true });\n\nconst InternalTagsInputLabel = withContext(TagsInput.Label, \"label\");\n\nexport interface TagsInputLabelProps\n  extends Omit<TagsInput.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nexport const TagsInputLabel = forwardRef<HTMLLabelElement, TagsInputLabelProps>(({ children, ...props }, ref) => (\n  <InternalTagsInputLabel asChild ref={ref} {...props}>\n    <Label>{children}</Label>\n  </InternalTagsInputLabel>\n));\n"],"mappings":";;;;;;;;;;;;;;AAsGA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KAtFM;CAC1B,OAAOA,cAAAA,iBAAiB,KAAK;CAC7B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,OAAO;EACT;EACA,SAAS;GACP,SAAS;GACT,KAAK;GACL,YAAY;GACZ,UAAU;EACZ;EACA,MAAM,EACJ,cAAc,UAChB;EACA,aAAa;GACX,SAAS;GACT,KAAK;GACL,cAAc;GACd,kBAAkB;GAClB,oBAAoB;GACpB,QAAQ;GACR,cAAc;GACd,SAAS;GACT,cAAc;GACd,iBAAiB;GACjB,OAAO;GACP,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,WAAW;GACX,QAAQ;IACN,iBAAiB;IACjB,cAAc;IACd,OAAO;IACP,SAAS,EACP,OAAO,eACT;IACA,eAAe;KACb,YAAY;KACZ,oBAAoB;IACtB;GACF;GACA,cAAc;IACZ,iBAAiB;IACjB,cAAc;IACd,eAAe;IACf,cAAc;IACd,OAAO;IACP,SAAS,EACP,OAAO,eACT;IACA,eAAe;KACb,YAAY;KACZ,oBAAoB;IACtB;GACF;EACF;EACA,OAAO,EACL,MAAM,IACR;EACA,mBAAmB;GACjB,eAAe;GACf,QAAQ;GACR,UAAU,EACR,SAAS,eACX;GACA,SAAS;IACP,cAAc;IACd,aAAa;IACb,OAAO;IACP,QAAQ;GACV;EACF;EACA,UAAU,EACR,eAAe,IACjB;EACA,WAAW;GACT,SAAS;GACT,YAAY;EACd;CACF;AACF,CACuE,CAAC;AAMxE,MAAa,gBAAgB,aAAaC,cAAAA,UAAU,MAAM,QAAQ,EAChE,eAAe,KACjB,CAAC;AAID,MAAa,wBAAwB,YAAYA,cAAAA,UAAU,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAIhH,MAAa,mBAAmB,YAAYA,cAAAA,UAAU,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAIjG,MAAa,iBAAiB,YAAYA,cAAAA,UAAU,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAI3F,MAAa,6BAA6B,YAAYA,cAAAA,UAAU,mBAAmB,qBAAqB,EACtG,eAAe,KACjB,CAAC;AAID,MAAa,qBAAqB,YAAYA,cAAAA,UAAU,WAAW,aAAa,EAAE,eAAe,KAAK,CAAC;AAIvG,MAAa,uBAAuB,YAAYA,cAAAA,UAAU,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC;AAI7G,MAAa,gBAAgB,YAAYA,cAAAA,UAAU,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAIxF,MAAa,oBAAoB,YAAYA,cAAAA,UAAU,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAEpG,MAAM,yBAAyB,YAAYA,cAAAA,UAAU,OAAO,OAAO;AAKnE,MAAa,kBAAA,GAAA,MAAA,aAAoE,EAAE,UAAU,GAAG,SAAS,QACvG,iBAAA,GAAA,kBAAA,KAAC,wBAAD;CAAwB,SAAA;CAAa;CAAK,GAAI;WAC5C,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD,EAAQ,SAAgB,CAAA;AACF,CAAA,CACzB"}
+{"version":3,"file":"TagsInput.js","names":["tagsInputAnatomy","TagsInput","Label"],"sources":["../src/TagsInput.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { TagsInput, tagsInputAnatomy } from \"@ark-ui/react/tags-input\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { type TextProps } from \"./Text\";\n\nconst tagsInputRecipe = sva({\n  slots: tagsInputAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xxsmall\",\n      width: \"full\",\n    },\n    control: {\n      display: \"inline-flex\",\n      gap: \"xxsmall\",\n      alignItems: \"center\",\n      flexWrap: \"wrap\",\n    },\n    item: {\n      paddingBlock: \"3xsmall\",\n    },\n    itemPreview: {\n      display: \"flex\",\n      gap: \"1\",\n      paddingBlock: \"4xsmall\",\n      paddingInlineEnd: \"3xsmall\",\n      paddingInlineStart: \"xsmall\",\n      cursor: \"initial\",\n      borderRadius: \"large\",\n      outline: \"1px solid\",\n      outlineColor: \"transparent\",\n      backgroundColor: \"surface.action.selected\",\n      color: \"text.onAction\",\n      transitionDuration: \"normal\",\n      transitionProperty: \"background, outline-color, color\",\n      transitionTimingFunction: \"default\",\n      textStyle: \"label.medium\",\n      _hover: {\n        backgroundColor: \"surface.actionSubtle.hover\",\n        outlineColor: \"stroke.hover\",\n        color: \"text.default\",\n        \"& svg\": {\n          color: \"stroke.hover\",\n        },\n        _motionReduce: {\n          transition: \"none\",\n          transitionDuration: \"0s\",\n        },\n      },\n      _highlighted: {\n        backgroundColor: \"surface.actionSubtle.hover\",\n        outlineWidth: \"3px\",\n        outlineOffset: \"-1px\",\n        outlineColor: \"stroke.hover\",\n        color: \"text.default\",\n        \"& svg\": {\n          color: \"stroke.hover\",\n        },\n        _motionReduce: {\n          transition: \"none\",\n          transitionDuration: \"0s\",\n        },\n      },\n    },\n    input: {\n      flex: \"1\",\n    },\n    itemDeleteTrigger: {\n      paddingBottom: \"1\",\n      cursor: \"pointer\",\n      \"& span\": {\n        display: \"inline-block\",\n      },\n      \"& svg\": {\n        marginInline: \"0\",\n        marginBlock: \"0\",\n        width: \"medium\",\n        height: \"medium\",\n      },\n    },\n    itemText: {\n      paddingBottom: \"1\",\n    },\n    itemInput: {\n      outline: \"none\",\n      background: \"transparent\",\n    },\n  },\n});\nconst { withProvider, withContext } = createStyleContext(tagsInputRecipe);\n\nexport interface TagsInputRootProps extends TagsInput.RootProps, StyledProps {\n  translations: TagsInput.RootProps[\"translations\"];\n}\n\nexport const TagsInputRoot = withProvider(TagsInput.Root, \"root\", {\n  baseComponent: true,\n});\n\nexport interface TagsInputClearTriggerProps extends TagsInput.ClearTriggerProps, StyledProps {}\n\nexport const TagsInputClearTrigger = withContext(TagsInput.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport interface TagsInputControlProps extends TagsInput.ControlProps, StyledProps {}\n\nexport const TagsInputControl = withContext(TagsInput.Control, \"control\", { baseComponent: true });\n\nexport interface TagsInputInputProps extends TagsInput.InputProps, StyledProps {}\n\nexport const TagsInputInput = withContext(TagsInput.Input, \"input\", { baseComponent: true });\n\nexport interface TagsInputItemDeleteTriggerProps extends TagsInput.ItemDeleteTriggerProps, StyledProps {}\n\nexport const TagsInputItemDeleteTrigger = withContext(TagsInput.ItemDeleteTrigger, \"itemDeleteTrigger\", {\n  baseComponent: true,\n});\n\nexport interface TagsInputItemInputProps extends TagsInput.ItemInputProps, StyledProps {}\n\nexport const TagsInputItemInput = withContext(TagsInput.ItemInput, \"itemInput\", { baseComponent: true });\n\nexport interface TagsInputItemPreviewProps extends TagsInput.ItemPreviewProps, StyledProps {}\n\nexport const TagsInputItemPreview = withContext(TagsInput.ItemPreview, \"itemPreview\", { baseComponent: true });\n\nexport interface TagsInputItemProps extends TagsInput.ItemProps, StyledProps {}\n\nexport const TagsInputItem = withContext(TagsInput.Item, \"item\", { baseComponent: true });\n\nexport interface TagsInputItemTextProps extends TagsInput.ItemTextProps, StyledProps {}\n\nexport const TagsInputItemText = withContext(TagsInput.ItemText, \"itemText\", { baseComponent: true });\n\nconst InternalTagsInputLabel = withContext(TagsInput.Label, \"label\");\n\nexport interface TagsInputLabelProps\n  extends Omit<TagsInput.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nexport const TagsInputLabel = forwardRef<HTMLLabelElement, TagsInputLabelProps>(({ children, ...props }, ref) => (\n  <InternalTagsInputLabel asChild ref={ref} {...props}>\n    <Label>{children}</Label>\n  </InternalTagsInputLabel>\n));\n"],"mappings":";;;;;;;;;;;;;;AAsGA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KAtFM;CAC1B,OAAOA,yBAAAA,iBAAiB,KAAK;CAC7B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,OAAO;EACT;EACA,SAAS;GACP,SAAS;GACT,KAAK;GACL,YAAY;GACZ,UAAU;EACZ;EACA,MAAM,EACJ,cAAc,UAChB;EACA,aAAa;GACX,SAAS;GACT,KAAK;GACL,cAAc;GACd,kBAAkB;GAClB,oBAAoB;GACpB,QAAQ;GACR,cAAc;GACd,SAAS;GACT,cAAc;GACd,iBAAiB;GACjB,OAAO;GACP,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,WAAW;GACX,QAAQ;IACN,iBAAiB;IACjB,cAAc;IACd,OAAO;IACP,SAAS,EACP,OAAO,eACT;IACA,eAAe;KACb,YAAY;KACZ,oBAAoB;IACtB;GACF;GACA,cAAc;IACZ,iBAAiB;IACjB,cAAc;IACd,eAAe;IACf,cAAc;IACd,OAAO;IACP,SAAS,EACP,OAAO,eACT;IACA,eAAe;KACb,YAAY;KACZ,oBAAoB;IACtB;GACF;EACF;EACA,OAAO,EACL,MAAM,IACR;EACA,mBAAmB;GACjB,eAAe;GACf,QAAQ;GACR,UAAU,EACR,SAAS,eACX;GACA,SAAS;IACP,cAAc;IACd,aAAa;IACb,OAAO;IACP,QAAQ;GACV;EACF;EACA,UAAU,EACR,eAAe,IACjB;EACA,WAAW;GACT,SAAS;GACT,YAAY;EACd;CACF;AACF,CACuE,CAAC;AAMxE,MAAa,gBAAgB,aAAaC,yBAAAA,UAAU,MAAM,QAAQ,EAChE,eAAe,KACjB,CAAC;AAID,MAAa,wBAAwB,YAAYA,yBAAAA,UAAU,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAIhH,MAAa,mBAAmB,YAAYA,yBAAAA,UAAU,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAIjG,MAAa,iBAAiB,YAAYA,yBAAAA,UAAU,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAI3F,MAAa,6BAA6B,YAAYA,yBAAAA,UAAU,mBAAmB,qBAAqB,EACtG,eAAe,KACjB,CAAC;AAID,MAAa,qBAAqB,YAAYA,yBAAAA,UAAU,WAAW,aAAa,EAAE,eAAe,KAAK,CAAC;AAIvG,MAAa,uBAAuB,YAAYA,yBAAAA,UAAU,aAAa,eAAe,EAAE,eAAe,KAAK,CAAC;AAI7G,MAAa,gBAAgB,YAAYA,yBAAAA,UAAU,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAIxF,MAAa,oBAAoB,YAAYA,yBAAAA,UAAU,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAEpG,MAAM,yBAAyB,YAAYA,yBAAAA,UAAU,OAAO,OAAO;AAKnE,MAAa,kBAAA,GAAA,MAAA,aAAoE,EAAE,UAAU,GAAG,SAAS,QACvG,iBAAA,GAAA,kBAAA,KAAC,wBAAD;CAAwB,SAAA;CAAa;CAAK,GAAI;WAC5C,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD,EAAQ,SAAgB,CAAA;AACF,CAAA,CACzB"}

package/lib/Text.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type HTMLArkProps } from "@ark-ui/react";
+import { type HTMLArkProps } from "@ark-ui/react/factory";
 import type { ColorToken, FontWeightToken } from "@ndla/styled-system/tokens";
 import type { StyledProps, UtilityValues } from "@ndla/styled-system/types";
 export interface TextProps {

package/lib/Text.js

@@ -1,7 +1,7 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 let react = require("react");
 //#region src/Text.tsx
 /**
@@ -11,7 +11,7 @@ let react = require("react");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledP = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.p, {}, { baseComponent: true });
+const StyledP = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.p, {}, { baseComponent: true });
 const Text = (0, react.forwardRef)(({ textStyle = "body.medium", fontWeight, color, srOnly, css: cssProp, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledP, {
 	css: _ndla_styled_system_css.css.raw({
 		textStyle,
@@ -22,7 +22,7 @@ const Text = (0, react.forwardRef)(({ textStyle = "body.medium", fontWeight, col
 	ref,
 	...rest
 }));
-const StyledH1 = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.h1, {}, { baseComponent: true });
+const StyledH1 = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.h1, {}, { baseComponent: true });
 const Heading = (0, react.forwardRef)(({ textStyle = "heading.medium", fontWeight, color, srOnly, css: cssProp, ...rest }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledH1, {
 	css: _ndla_styled_system_css.css.raw({
 		textStyle,

package/lib/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["ark","css"],"sources":["../src/Text.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ColorToken, FontWeightToken } from \"@ndla/styled-system/tokens\";\nimport type { StyledProps, UtilityValues } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nexport interface TextProps {\n  textStyle?: UtilityValues[\"textStyle\"];\n  fontWeight?: FontWeightToken;\n  color?: ColorToken;\n  srOnly?: boolean;\n}\n\nconst StyledP = styled(ark.p, {}, { baseComponent: true });\n\nexport interface TextComponentProps extends Omit<HTMLArkProps<\"p\">, \"color\">, StyledProps, TextProps {}\n\nexport const Text = forwardRef<HTMLParagraphElement, TextComponentProps>(\n  ({ textStyle = \"body.medium\", fontWeight, color, srOnly, css: cssProp, ...rest }, ref) => (\n    <StyledP css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} ref={ref} {...rest} />\n  ),\n);\n\nconst StyledH1 = styled(ark.h1, {}, { baseComponent: true });\n\nexport interface HeadingComponentProps extends Omit<HTMLArkProps<\"h1\">, \"color\">, StyledProps, TextProps {}\n\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingComponentProps>(\n  ({ textStyle = \"heading.medium\", fontWeight, color, srOnly, css: cssProp, ...rest }, ref) => (\n    <StyledH1 css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} ref={ref} {...rest} />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,WAAA,GAAA,wBAAA,QAAiBA,cAAAA,IAAI,GAAG,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAIzD,MAAa,QAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,QAAQ,QAChF,iBAAA,GAAA,kBAAA,KAAC,SAAD;CAAS,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;CAAO,GAAG,OAAO;CAAQ;CAAK,GAAI;AAAO,CAAA,CAEnG;AAEA,MAAM,YAAA,GAAA,wBAAA,QAAkBD,cAAAA,IAAI,IAAI,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAI3D,MAAa,WAAA,GAAA,MAAA,aACV,EAAE,YAAY,kBAAkB,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,QAAQ,QACnF,iBAAA,GAAA,kBAAA,KAAC,UAAD;CAAU,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;CAAO,GAAG,OAAO;CAAQ;CAAK,GAAI;AAAO,CAAA,CAEpG"}
+{"version":3,"file":"Text.js","names":["ark","css"],"sources":["../src/Text.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLArkProps, ark } from \"@ark-ui/react/factory\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ColorToken, FontWeightToken } from \"@ndla/styled-system/tokens\";\nimport type { StyledProps, UtilityValues } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nexport interface TextProps {\n  textStyle?: UtilityValues[\"textStyle\"];\n  fontWeight?: FontWeightToken;\n  color?: ColorToken;\n  srOnly?: boolean;\n}\n\nconst StyledP = styled(ark.p, {}, { baseComponent: true });\n\nexport interface TextComponentProps extends Omit<HTMLArkProps<\"p\">, \"color\">, StyledProps, TextProps {}\n\nexport const Text = forwardRef<HTMLParagraphElement, TextComponentProps>(\n  ({ textStyle = \"body.medium\", fontWeight, color, srOnly, css: cssProp, ...rest }, ref) => (\n    <StyledP css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} ref={ref} {...rest} />\n  ),\n);\n\nconst StyledH1 = styled(ark.h1, {}, { baseComponent: true });\n\nexport interface HeadingComponentProps extends Omit<HTMLArkProps<\"h1\">, \"color\">, StyledProps, TextProps {}\n\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingComponentProps>(\n  ({ textStyle = \"heading.medium\", fontWeight, color, srOnly, css: cssProp, ...rest }, ref) => (\n    <StyledH1 css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} ref={ref} {...rest} />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,WAAA,GAAA,wBAAA,QAAiBA,sBAAAA,IAAI,GAAG,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAIzD,MAAa,QAAA,GAAA,MAAA,aACV,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,QAAQ,QAChF,iBAAA,GAAA,kBAAA,KAAC,SAAD;CAAS,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;CAAO,GAAG,OAAO;CAAQ;CAAK,GAAI;AAAO,CAAA,CAEnG;AAEA,MAAM,YAAA,GAAA,wBAAA,QAAkBD,sBAAAA,IAAI,IAAI,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAI3D,MAAa,WAAA,GAAA,MAAA,aACV,EAAE,YAAY,kBAAkB,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,QAAQ,QACnF,iBAAA,GAAA,kBAAA,KAAC,UAAD;CAAU,KAAKC,wBAAAA,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;CAAO,GAAG,OAAO;CAAQ;CAAK,GAAI;AAAO,CAAA,CAEpG"}

package/lib/Toast.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Toast } from "@ark-ui/react";
+import { Toast } from "@ark-ui/react/toast";
 import type { StyledProps, RecipeVariantProps } from "@ndla/styled-system/types";
 import type { RefAttributes } from "react";
 import { type TextProps } from "./Text";

package/lib/Toast.js

@@ -1,8 +1,8 @@
 const require_Text = require("./Text.js");
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ark_ui_react_toast = require("@ark-ui/react/toast");
 //#region src/Toast.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -12,7 +12,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *
 */
 const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
-	slots: _ark_ui_react.toastAnatomy.keys(),
+	slots: _ark_ui_react_toast.toastAnatomy.keys(),
 	base: {
 		root: {
 			position: "relative",
@@ -56,10 +56,10 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 		} }
 	} }
 }));
-const ToastRoot = withProvider(_ark_ui_react.Toast.Root, "root", { baseComponent: true });
-const ToastActionTrigger = withContext(_ark_ui_react.Toast.ActionTrigger, "actionTrigger", { baseComponent: true });
-const ToastCloseTrigger = withContext(_ark_ui_react.Toast.CloseTrigger, "closeTrigger", { baseComponent: true });
-const InternalToastDescription = withContext(_ark_ui_react.Toast.Description, "description");
+const ToastRoot = withProvider(_ark_ui_react_toast.Toast.Root, "root", { baseComponent: true });
+const ToastActionTrigger = withContext(_ark_ui_react_toast.Toast.ActionTrigger, "actionTrigger", { baseComponent: true });
+const ToastCloseTrigger = withContext(_ark_ui_react_toast.Toast.CloseTrigger, "closeTrigger", { baseComponent: true });
+const InternalToastDescription = withContext(_ark_ui_react_toast.Toast.Description, "description");
 const ToastDescription = ({ textStyle = "label.medium", children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalToastDescription, {
 	asChild: true,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
@@ -70,7 +70,7 @@ const ToastDescription = ({ textStyle = "label.medium", children, ...props }) =>
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })
 	})
 });
-const InternalToastTitle = withContext(_ark_ui_react.Toast.Title, "title");
+const InternalToastTitle = withContext(_ark_ui_react_toast.Toast.Title, "title");
 const ToastTitle = ({ textStyle = "label.medium", fontWeight = "semibold", children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalToastTitle, {
 	asChild: true,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {

package/lib/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","names":["toastAnatomy","Toast","Text"],"sources":["../src/Toast.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Toast, toastAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst toastRecipe = sva({\n  slots: toastAnatomy.keys(),\n  base: {\n    root: {\n      position: \"relative\",\n      borderRadius: \"xsmall\",\n      boxShadow: \"medium\",\n      minWidth: \"20rem\",\n      maxWidth: \"30rem\",\n      height: \"var(--height)\",\n      opacity: \"var(--opacity)\",\n      overflowWrap: \"anywhere\",\n      padding: \"small\",\n      scale: \"var(--scale)\",\n      translate: \"var(--x) var(--y) 0\",\n      willChange: \"translate, scale, opacity, height\",\n      zIndex: \"var(--z-index)\",\n      transitionDuration: \"slow\",\n      transitionProperty: \"translate, scale, opacity, height\",\n      transitionTimingFunction: \"default\",\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    title: {\n      paddingInlineEnd: \"xxlarge\",\n    },\n    closeTrigger: {\n      position: \"absolute\",\n      top: \"xxsmall\",\n      right: \"xxsmall\",\n    },\n    description: {\n      paddingInlineEnd: \"xxlarge\",\n    },\n  },\n  defaultVariants: {\n    variant: \"light\",\n  },\n  variants: {\n    variant: {\n      light: {\n        root: {\n          background: \"surface.brand.1.moderate\",\n          color: \"text.default\",\n        },\n      },\n      dark: {\n        root: {\n          background: \"surface.brand.1.strong\",\n          color: \"text.onAction\",\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(toastRecipe);\n\nexport type ToastRootVariantProps = NonNullable<RecipeVariantProps<typeof toastRecipe>>;\n\nexport interface ToastRootProps extends Toast.RootProps, StyledProps, ToastRootVariantProps {}\nexport const ToastRoot = withProvider(Toast.Root, \"root\", { baseComponent: true });\n\nexport const ToastActionTrigger = withContext(Toast.ActionTrigger, \"actionTrigger\", { baseComponent: true });\n\nexport const ToastCloseTrigger = withContext(Toast.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nconst InternalToastDescription = withContext(Toast.Description, \"description\");\n\ninterface ToastDescriptionProps\n  extends Omit<Toast.DescriptionProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ToastDescription = ({ textStyle = \"label.medium\", children, ...props }: ToastDescriptionProps) => (\n  <InternalToastDescription asChild>\n    <Text asChild consumeCss textStyle={textStyle} {...props}>\n      <div>{children}</div>\n    </Text>\n  </InternalToastDescription>\n);\n\nconst InternalToastTitle = withContext(Toast.Title, \"title\");\n\ninterface ToastTitleProps\n  extends Omit<Toast.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ToastTitle = ({\n  textStyle = \"label.medium\",\n  fontWeight = \"semibold\",\n  children,\n  ...props\n}: ToastTitleProps) => (\n  <InternalToastTitle asChild>\n    <Text asChild consumeCss fontWeight={fontWeight} textStyle={textStyle} {...props}>\n      <div>{children}</div>\n    </Text>\n  </InternalToastTitle>\n);\n"],"mappings":";;;;;;;;;;;;;AAyEA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA1DE;CACtB,OAAOA,cAAAA,aAAa,KAAK;CACzB,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,cAAc;GACd,WAAW;GACX,UAAU;GACV,UAAU;GACV,QAAQ;GACR,SAAS;GACT,cAAc;GACd,SAAS;GACT,OAAO;GACP,WAAW;GACX,YAAY;GACZ,QAAQ;GACR,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,eAAe;IACb,YAAY;IACZ,oBAAoB;GACtB;EACF;EACA,OAAO,EACL,kBAAkB,UACpB;EACA,cAAc;GACZ,UAAU;GACV,KAAK;GACL,OAAO;EACT;EACA,aAAa,EACX,kBAAkB,UACpB;CACF;CACA,iBAAiB,EACf,SAAS,QACX;CACA,UAAU,EACR,SAAS;EACP,OAAO,EACL,MAAM;GACJ,YAAY;GACZ,OAAO;EACT,EACF;EACA,MAAM,EACJ,MAAM;GACJ,YAAY;GACZ,OAAO;EACT,EACF;CACF,EACF;AACF,CAEmE,CAAC;AAKpE,MAAa,YAAY,aAAaC,cAAAA,MAAM,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAEjF,MAAa,qBAAqB,YAAYA,cAAAA,MAAM,eAAe,iBAAiB,EAAE,eAAe,KAAK,CAAC;AAE3G,MAAa,oBAAoB,YAAYA,cAAAA,MAAM,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAExG,MAAM,2BAA2B,YAAYA,cAAAA,MAAM,aAAa,aAAa;AAK7E,MAAa,oBAAoB,EAAE,YAAY,gBAAgB,UAAU,GAAG,YAC1E,iBAAA,GAAA,kBAAA,KAAC,0BAAD;CAA0B,SAAA;WACxB,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAsB;EAAW,GAAI;YACjD,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAM,SAAc,CAAA;CAChB,CAAA;AACkB,CAAA;AAG5B,MAAM,qBAAqB,YAAYD,cAAAA,MAAM,OAAO,OAAO;AAK3D,MAAa,cAAc,EACzB,YAAY,gBACZ,aAAa,YACb,UACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAAC,oBAAD;CAAoB,SAAA;WAClB,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAuB;EAAuB;EAAW,GAAI;YACzE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAM,SAAc,CAAA;CAChB,CAAA;AACY,CAAA"}
+{"version":3,"file":"Toast.js","names":["toastAnatomy","Toast","Text"],"sources":["../src/Toast.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Toast, toastAnatomy } from \"@ark-ui/react/toast\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst toastRecipe = sva({\n  slots: toastAnatomy.keys(),\n  base: {\n    root: {\n      position: \"relative\",\n      borderRadius: \"xsmall\",\n      boxShadow: \"medium\",\n      minWidth: \"20rem\",\n      maxWidth: \"30rem\",\n      height: \"var(--height)\",\n      opacity: \"var(--opacity)\",\n      overflowWrap: \"anywhere\",\n      padding: \"small\",\n      scale: \"var(--scale)\",\n      translate: \"var(--x) var(--y) 0\",\n      willChange: \"translate, scale, opacity, height\",\n      zIndex: \"var(--z-index)\",\n      transitionDuration: \"slow\",\n      transitionProperty: \"translate, scale, opacity, height\",\n      transitionTimingFunction: \"default\",\n      _motionReduce: {\n        transition: \"none\",\n        transitionDuration: \"0s\",\n      },\n    },\n    title: {\n      paddingInlineEnd: \"xxlarge\",\n    },\n    closeTrigger: {\n      position: \"absolute\",\n      top: \"xxsmall\",\n      right: \"xxsmall\",\n    },\n    description: {\n      paddingInlineEnd: \"xxlarge\",\n    },\n  },\n  defaultVariants: {\n    variant: \"light\",\n  },\n  variants: {\n    variant: {\n      light: {\n        root: {\n          background: \"surface.brand.1.moderate\",\n          color: \"text.default\",\n        },\n      },\n      dark: {\n        root: {\n          background: \"surface.brand.1.strong\",\n          color: \"text.onAction\",\n        },\n      },\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(toastRecipe);\n\nexport type ToastRootVariantProps = NonNullable<RecipeVariantProps<typeof toastRecipe>>;\n\nexport interface ToastRootProps extends Toast.RootProps, StyledProps, ToastRootVariantProps {}\nexport const ToastRoot = withProvider(Toast.Root, \"root\", { baseComponent: true });\n\nexport const ToastActionTrigger = withContext(Toast.ActionTrigger, \"actionTrigger\", { baseComponent: true });\n\nexport const ToastCloseTrigger = withContext(Toast.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nconst InternalToastDescription = withContext(Toast.Description, \"description\");\n\ninterface ToastDescriptionProps\n  extends Omit<Toast.DescriptionProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ToastDescription = ({ textStyle = \"label.medium\", children, ...props }: ToastDescriptionProps) => (\n  <InternalToastDescription asChild>\n    <Text asChild consumeCss textStyle={textStyle} {...props}>\n      <div>{children}</div>\n    </Text>\n  </InternalToastDescription>\n);\n\nconst InternalToastTitle = withContext(Toast.Title, \"title\");\n\ninterface ToastTitleProps\n  extends Omit<Toast.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ToastTitle = ({\n  textStyle = \"label.medium\",\n  fontWeight = \"semibold\",\n  children,\n  ...props\n}: ToastTitleProps) => (\n  <InternalToastTitle asChild>\n    <Text asChild consumeCss fontWeight={fontWeight} textStyle={textStyle} {...props}>\n      <div>{children}</div>\n    </Text>\n  </InternalToastTitle>\n);\n"],"mappings":";;;;;;;;;;;;;AAyEA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA1DE;CACtB,OAAOA,oBAAAA,aAAa,KAAK;CACzB,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,cAAc;GACd,WAAW;GACX,UAAU;GACV,UAAU;GACV,QAAQ;GACR,SAAS;GACT,cAAc;GACd,SAAS;GACT,OAAO;GACP,WAAW;GACX,YAAY;GACZ,QAAQ;GACR,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,eAAe;IACb,YAAY;IACZ,oBAAoB;GACtB;EACF;EACA,OAAO,EACL,kBAAkB,UACpB;EACA,cAAc;GACZ,UAAU;GACV,KAAK;GACL,OAAO;EACT;EACA,aAAa,EACX,kBAAkB,UACpB;CACF;CACA,iBAAiB,EACf,SAAS,QACX;CACA,UAAU,EACR,SAAS;EACP,OAAO,EACL,MAAM;GACJ,YAAY;GACZ,OAAO;EACT,EACF;EACA,MAAM,EACJ,MAAM;GACJ,YAAY;GACZ,OAAO;EACT,EACF;CACF,EACF;AACF,CAEmE,CAAC;AAKpE,MAAa,YAAY,aAAaC,oBAAAA,MAAM,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAEjF,MAAa,qBAAqB,YAAYA,oBAAAA,MAAM,eAAe,iBAAiB,EAAE,eAAe,KAAK,CAAC;AAE3G,MAAa,oBAAoB,YAAYA,oBAAAA,MAAM,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAExG,MAAM,2BAA2B,YAAYA,oBAAAA,MAAM,aAAa,aAAa;AAK7E,MAAa,oBAAoB,EAAE,YAAY,gBAAgB,UAAU,GAAG,YAC1E,iBAAA,GAAA,kBAAA,KAAC,0BAAD;CAA0B,SAAA;WACxB,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAsB;EAAW,GAAI;YACjD,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAM,SAAc,CAAA;CAChB,CAAA;AACkB,CAAA;AAG5B,MAAM,qBAAqB,YAAYD,oBAAAA,MAAM,OAAO,OAAO;AAK3D,MAAa,cAAc,EACzB,YAAY,gBACZ,aAAa,YACb,UACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAAC,oBAAD;CAAoB,SAAA;WAClB,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;EAAM,SAAA;EAAQ,YAAA;EAAuB;EAAuB;EAAW,GAAI;YACzE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAM,SAAc,CAAA;CAChB,CAAA;AACY,CAAA"}

package/lib/ToggleGroup.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ToggleGroup } from "@ark-ui/react";
+import { ToggleGroup } from "@ark-ui/react/toggle-group";
 import { type RecipeVariantProps } from "@ndla/styled-system/css";
 import type { StyledProps } from "@ndla/styled-system/types";
 declare const toggleGroupRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "item">>;

package/lib/ToggleGroup.js

@@ -1,5 +1,6 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ark_ui_react_toggle_group = require("@ark-ui/react/toggle-group");
 //#region src/ToggleGroup.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -8,16 +9,16 @@ let _ndla_styled_system_css = require("@ndla/styled-system/css");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const { withProvider, withContext } = (0, require("@ndla/styled-system/jsx").createStyleContext)((0, _ndla_styled_system_css.sva)({
-	slots: _ark_ui_react.toggleGroupAnatomy.keys(),
+const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
+	slots: _ark_ui_react_toggle_group.toggleGroupAnatomy.keys(),
 	base: { root: {
 		display: "flex",
 		flexDirection: "row",
 		gap: "4xsmall"
 	} }
 }));
-const ToggleGroupRoot = withProvider(_ark_ui_react.ToggleGroup.Root, "root", { baseComponent: true });
-const ToggleGroupItem = withContext(_ark_ui_react.ToggleGroup.Item, "item", { baseComponent: true });
+const ToggleGroupRoot = withProvider(_ark_ui_react_toggle_group.ToggleGroup.Root, "root", { baseComponent: true });
+const ToggleGroupItem = withContext(_ark_ui_react_toggle_group.ToggleGroup.Item, "item", { baseComponent: true });
 //#endregion
 exports.ToggleGroupItem = ToggleGroupItem;
 exports.ToggleGroupRoot = ToggleGroupRoot;

package/lib/ToggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.js","names":["toggleGroupAnatomy","ToggleGroup"],"sources":["../src/ToggleGroup.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { toggleGroupAnatomy, ToggleGroup } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst toggleGroupRecipe = sva({\n  slots: toggleGroupAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"row\",\n      gap: \"4xsmall\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(toggleGroupRecipe);\n\nexport type ToggleGroupVariantProps = NonNullable<RecipeVariantProps<typeof toggleGroupRecipe>>;\nexport interface ToggleGroupRootProps extends ToggleGroup.RootProps, StyledProps, ToggleGroupVariantProps {}\n\nexport const ToggleGroupRoot = withProvider(ToggleGroup.Root, \"root\", { baseComponent: true });\n\nexport interface ToggleGroupItemProps extends ToggleGroup.ItemProps, StyledProps {}\n\nexport const ToggleGroupItem = withContext(ToggleGroup.Item, \"item\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;AAwBA,MAAM,EAAE,cAAc,iBAAA,oCAAA,EAAA,qBAAA,GAAA,wBAAA,KAXQ;CAC5B,OAAOA,cAAAA,mBAAmB,KAAK;CAC/B,MAAM,EACJ,MAAM;EACJ,SAAS;EACT,eAAe;EACf,KAAK;CACP,EACF;AACF,CAEyE,CAAC;AAK1E,MAAa,kBAAkB,aAAaC,cAAAA,YAAY,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAI7F,MAAa,kBAAkB,YAAYA,cAAAA,YAAY,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC"}
+{"version":3,"file":"ToggleGroup.js","names":["toggleGroupAnatomy","ToggleGroup"],"sources":["../src/ToggleGroup.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { toggleGroupAnatomy, ToggleGroup } from \"@ark-ui/react/toggle-group\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst toggleGroupRecipe = sva({\n  slots: toggleGroupAnatomy.keys(),\n  base: {\n    root: {\n      display: \"flex\",\n      flexDirection: \"row\",\n      gap: \"4xsmall\",\n    },\n  },\n});\n\nconst { withProvider, withContext } = createStyleContext(toggleGroupRecipe);\n\nexport type ToggleGroupVariantProps = NonNullable<RecipeVariantProps<typeof toggleGroupRecipe>>;\nexport interface ToggleGroupRootProps extends ToggleGroup.RootProps, StyledProps, ToggleGroupVariantProps {}\n\nexport const ToggleGroupRoot = withProvider(ToggleGroup.Root, \"root\", { baseComponent: true });\n\nexport interface ToggleGroupItemProps extends ToggleGroup.ItemProps, StyledProps {}\n\nexport const ToggleGroupItem = withContext(ToggleGroup.Item, \"item\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;AAwBA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KAXQ;CAC5B,OAAOA,2BAAAA,mBAAmB,KAAK;CAC/B,MAAM,EACJ,MAAM;EACJ,SAAS;EACT,eAAe;EACf,KAAK;CACP,EACF;AACF,CAEyE,CAAC;AAK1E,MAAa,kBAAkB,aAAaC,2BAAAA,YAAY,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC;AAI7F,MAAa,kBAAkB,YAAYA,2BAAAA,YAAY,MAAM,QAAQ,EAAE,eAAe,KAAK,CAAC"}

package/lib/Tooltip.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Tooltip } from "@ark-ui/react";
+import { Tooltip } from "@ark-ui/react/tooltip";
 import type { StyledProps } from "@ndla/styled-system/types";
 export type TooltipRootProps = Tooltip.RootProps;
 export declare const TooltipRoot: import("@ndla/styled-system/jsx").StyleContextRootProvider<(props: Tooltip.RootProps) => import("react/jsx-runtime").JSX.Element, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"content" | "trigger" | "positioner" | "arrow" | "arrowTip">>>;

package/lib/Tooltip.js

@@ -1,8 +1,8 @@
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+let _ark_ui_react_tooltip = require("@ark-ui/react/tooltip");
 //#region src/Tooltip.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -12,7 +12,7 @@ let react = require("react");
 *
 */
 const { withRootProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
-	slots: _ark_ui_react.tooltipAnatomy.keys(),
+	slots: _ark_ui_react_tooltip.tooltipAnatomy.keys(),
 	base: { content: {
 		background: "surface.action",
 		textStyle: "label.small",
@@ -31,17 +31,17 @@ const { withRootProvider, withContext } = (0, _ndla_styled_system_jsx.createStyl
 		}
 	} }
 }));
-const TooltipRoot = withRootProvider(_ark_ui_react.Tooltip.Root);
-const TooltipArrow = withContext(_ark_ui_react.Tooltip.Arrow, "arrow", { baseComponent: true });
-const TooltipArrowTip = withContext(_ark_ui_react.Tooltip.ArrowTip, "arrowTip", { baseComponent: true });
-const TooltipContentStandalone = withContext(_ark_ui_react.Tooltip.Content, "content", { baseComponent: true });
+const TooltipRoot = withRootProvider(_ark_ui_react_tooltip.Tooltip.Root);
+const TooltipArrow = withContext(_ark_ui_react_tooltip.Tooltip.Arrow, "arrow", { baseComponent: true });
+const TooltipArrowTip = withContext(_ark_ui_react_tooltip.Tooltip.ArrowTip, "arrowTip", { baseComponent: true });
+const TooltipContentStandalone = withContext(_ark_ui_react_tooltip.Tooltip.Content, "content", { baseComponent: true });
 const TooltipContent = (0, react.forwardRef)(({ children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipPositioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TooltipContentStandalone, {
 	...props,
 	ref,
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipArrow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipArrowTip, {}) }), children]
 }) }));
-const TooltipPositioner = withContext(_ark_ui_react.Tooltip.Positioner, "positioner", { baseComponent: true });
-const TooltipTrigger = withContext(_ark_ui_react.Tooltip.Trigger, "trigger", { baseComponent: true });
+const TooltipPositioner = withContext(_ark_ui_react_tooltip.Tooltip.Positioner, "positioner", { baseComponent: true });
+const TooltipTrigger = withContext(_ark_ui_react_tooltip.Tooltip.Trigger, "trigger", { baseComponent: true });
 //#endregion
 exports.TooltipArrow = TooltipArrow;
 exports.TooltipArrowTip = TooltipArrowTip;

package/lib/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["tooltipAnatomy","Tooltip"],"sources":["../src/Tooltip.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Tooltip, tooltipAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst tooltipRecipe = sva({\n  slots: tooltipAnatomy.keys(),\n  base: {\n    content: {\n      background: \"surface.action\",\n      textStyle: \"label.small\",\n      color: \"text.onAction\",\n      paddingInline: \"xxsmall\",\n      paddingBlock: \"4xsmall\",\n      \"--arrow-size\": \"spacing.xxsmall\",\n      \"--arrow-background\": \"colors.surface.action\",\n      _open: {\n        animation: \"fade-shift-in 0.2s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"fade-shift-out 0.2s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(tooltipRecipe);\n\nexport type TooltipRootProps = Tooltip.RootProps;\nexport const TooltipRoot = withRootProvider(Tooltip.Root);\n\nexport const TooltipArrow = withContext(Tooltip.Arrow, \"arrow\", { baseComponent: true });\n\nexport const TooltipArrowTip = withContext(Tooltip.ArrowTip, \"arrowTip\", { baseComponent: true });\n\nexport const TooltipContentStandalone = withContext(Tooltip.Content, \"content\", { baseComponent: true });\n\ninterface TooltipContentProps extends Tooltip.ContentProps, StyledProps {}\n\nexport const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(({ children, ...props }, ref) => (\n  <TooltipPositioner>\n    <TooltipContentStandalone {...props} ref={ref}>\n      <TooltipArrow>\n        <TooltipArrowTip />\n      </TooltipArrow>\n      {children}\n    </TooltipContentStandalone>\n  </TooltipPositioner>\n));\n\nexport const TooltipPositioner = withContext(Tooltip.Positioner, \"positioner\", { baseComponent: true });\n\nexport const TooltipTrigger = withContext(Tooltip.Trigger, \"trigger\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;;AAyCA,MAAM,EAAE,kBAAkB,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA3BA;CACxB,OAAOA,cAAAA,eAAe,KAAK;CAC3B,MAAM,EACJ,SAAS;EACP,YAAY;EACZ,WAAW;EACX,OAAO;EACP,eAAe;EACf,cAAc;EACd,gBAAgB;EAChB,sBAAsB;EACtB,OAAO;GACL,WAAW;GACX,eAAe,EACb,WAAW,OACb;EACF;EACA,SAAS;GACP,WAAW;GACX,eAAe,EACb,WAAW,OACb;EACF;CACF,EACF;AACF,CAEyE,CAAC;AAG1E,MAAa,cAAc,iBAAiBC,cAAAA,QAAQ,IAAI;AAExD,MAAa,eAAe,YAAYA,cAAAA,QAAQ,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAEvF,MAAa,kBAAkB,YAAYA,cAAAA,QAAQ,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAEhG,MAAa,2BAA2B,YAAYA,cAAAA,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAIvG,MAAa,kBAAA,GAAA,MAAA,aAAkE,EAAE,UAAU,GAAG,SAAS,QACrG,iBAAA,GAAA,kBAAA,KAAC,mBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAAC,0BAAD;CAA0B,GAAI;CAAY;WAA1C,CACE,iBAAA,GAAA,kBAAA,KAAC,cAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,iBAAD,CAAkB,CAAA,EACN,CAAA,GACb,QACuB;GACT,CAAA,CACpB;AAED,MAAa,oBAAoB,YAAYA,cAAAA,QAAQ,YAAY,cAAc,EAAE,eAAe,KAAK,CAAC;AAEtG,MAAa,iBAAiB,YAAYA,cAAAA,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Tooltip.js","names":["tooltipAnatomy","Tooltip"],"sources":["../src/Tooltip.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Tooltip, tooltipAnatomy } from \"@ark-ui/react/tooltip\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst tooltipRecipe = sva({\n  slots: tooltipAnatomy.keys(),\n  base: {\n    content: {\n      background: \"surface.action\",\n      textStyle: \"label.small\",\n      color: \"text.onAction\",\n      paddingInline: \"xxsmall\",\n      paddingBlock: \"4xsmall\",\n      \"--arrow-size\": \"spacing.xxsmall\",\n      \"--arrow-background\": \"colors.surface.action\",\n      _open: {\n        animation: \"fade-shift-in 0.2s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n      _closed: {\n        animation: \"fade-shift-out 0.2s ease-out\",\n        _motionReduce: {\n          animation: \"none\",\n        },\n      },\n    },\n  },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(tooltipRecipe);\n\nexport type TooltipRootProps = Tooltip.RootProps;\nexport const TooltipRoot = withRootProvider(Tooltip.Root);\n\nexport const TooltipArrow = withContext(Tooltip.Arrow, \"arrow\", { baseComponent: true });\n\nexport const TooltipArrowTip = withContext(Tooltip.ArrowTip, \"arrowTip\", { baseComponent: true });\n\nexport const TooltipContentStandalone = withContext(Tooltip.Content, \"content\", { baseComponent: true });\n\ninterface TooltipContentProps extends Tooltip.ContentProps, StyledProps {}\n\nexport const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(({ children, ...props }, ref) => (\n  <TooltipPositioner>\n    <TooltipContentStandalone {...props} ref={ref}>\n      <TooltipArrow>\n        <TooltipArrowTip />\n      </TooltipArrow>\n      {children}\n    </TooltipContentStandalone>\n  </TooltipPositioner>\n));\n\nexport const TooltipPositioner = withContext(Tooltip.Positioner, \"positioner\", { baseComponent: true });\n\nexport const TooltipTrigger = withContext(Tooltip.Trigger, \"trigger\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;;AAyCA,MAAM,EAAE,kBAAkB,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KA3BA;CACxB,OAAOA,sBAAAA,eAAe,KAAK;CAC3B,MAAM,EACJ,SAAS;EACP,YAAY;EACZ,WAAW;EACX,OAAO;EACP,eAAe;EACf,cAAc;EACd,gBAAgB;EAChB,sBAAsB;EACtB,OAAO;GACL,WAAW;GACX,eAAe,EACb,WAAW,OACb;EACF;EACA,SAAS;GACP,WAAW;GACX,eAAe,EACb,WAAW,OACb;EACF;CACF,EACF;AACF,CAEyE,CAAC;AAG1E,MAAa,cAAc,iBAAiBC,sBAAAA,QAAQ,IAAI;AAExD,MAAa,eAAe,YAAYA,sBAAAA,QAAQ,OAAO,SAAS,EAAE,eAAe,KAAK,CAAC;AAEvF,MAAa,kBAAkB,YAAYA,sBAAAA,QAAQ,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAEhG,MAAa,2BAA2B,YAAYA,sBAAAA,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAIvG,MAAa,kBAAA,GAAA,MAAA,aAAkE,EAAE,UAAU,GAAG,SAAS,QACrG,iBAAA,GAAA,kBAAA,KAAC,mBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAAC,0BAAD;CAA0B,GAAI;CAAY;WAA1C,CACE,iBAAA,GAAA,kBAAA,KAAC,cAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,iBAAD,CAAkB,CAAA,EACN,CAAA,GACb,QACuB;GACT,CAAA,CACpB;AAED,MAAa,oBAAoB,YAAYA,sBAAAA,QAAQ,YAAY,cAAc,EAAE,eAAe,KAAK,CAAC;AAEtG,MAAa,iBAAiB,YAAYA,sBAAAA,QAAQ,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC"}

package/lib/Tree/Tree.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { TreeView, type TreeNode } from "@ark-ui/react";
+import { TreeView, type TreeNode } from "@ark-ui/react/tree-view";
 import type { StyledProps } from "@ndla/styled-system/types";
 import { type RefAttributes } from "react";
 import { type TextProps } from "../Text";
@@ -35,5 +35,5 @@ export declare const Tree: import("@ndla/styled-system/jsx").StyleContextConsume
 export declare const createTreeCollection: <T extends unknown>(options: import("@zag-js/collection").TreeCollectionOptions<T>) => import("@zag-js/collection").TreeCollection<T>;
 export declare const TreeNodeProvider: typeof TreeView.NodeProvider;
 export declare const TreeNodeContext: (props: TreeView.NodeContextProps) => import("react").ReactNode;
-export declare const useTreeView: <T extends unknown>(props: import("@ark-ui/react").UseTreeViewProps<T>) => import("@ark-ui/react").UseTreeViewReturn<T>;
+export declare const useTreeView: <T extends unknown>(props: import("@ark-ui/react/tree-view").UseTreeViewProps<T>) => import("@ark-ui/react/tree-view").UseTreeViewReturn<T>;
 export {};

package/lib/Tree/Tree.js

@@ -1,9 +1,9 @@
 const require_Text = require("../Text.js");
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
+let _ark_ui_react_tree_view = require("@ark-ui/react/tree-view");
 //#region src/Tree/Tree.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -13,7 +13,7 @@ let react = require("react");
 *
 */
 const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
-	slots: _ark_ui_react.treeViewAnatomy.keys(),
+	slots: _ark_ui_react_tree_view.treeViewAnatomy.keys(),
 	base: {
 		root: { width: "100%" },
 		branch: {
@@ -86,15 +86,15 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
 		}
 	}
 }));
-const InternalTreeRoot = withProvider(_ark_ui_react.TreeView.Root, "root", { baseComponent: true });
+const InternalTreeRoot = withProvider(_ark_ui_react_tree_view.TreeView.Root, "root", { baseComponent: true });
 const TreeRoot = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalTreeRoot, { ...props });
-const InternalTreeRootProvider = withProvider(_ark_ui_react.TreeView.RootProvider, "root", { baseComponent: true });
+const InternalTreeRootProvider = withProvider(_ark_ui_react_tree_view.TreeView.RootProvider, "root", { baseComponent: true });
 const TreeRootProvider = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalTreeRootProvider, { ...props });
-const TreeBranchContent = withContext(_ark_ui_react.TreeView.BranchContent, "branchContent", { baseComponent: true });
-const TreeBranchControl = withContext(_ark_ui_react.TreeView.BranchControl, "branchControl", { baseComponent: true });
-const TreeBranchIndicator = withContext(_ark_ui_react.TreeView.BranchIndicator, "branchIndicator", { baseComponent: true });
-const TreeBranch = withContext(_ark_ui_react.TreeView.Branch, "branch", { baseComponent: true });
-const InternalTreeBranchText = withContext(_ark_ui_react.TreeView.BranchText, "branchText", { baseComponent: true });
+const TreeBranchContent = withContext(_ark_ui_react_tree_view.TreeView.BranchContent, "branchContent", { baseComponent: true });
+const TreeBranchControl = withContext(_ark_ui_react_tree_view.TreeView.BranchControl, "branchControl", { baseComponent: true });
+const TreeBranchIndicator = withContext(_ark_ui_react_tree_view.TreeView.BranchIndicator, "branchIndicator", { baseComponent: true });
+const TreeBranch = withContext(_ark_ui_react_tree_view.TreeView.Branch, "branch", { baseComponent: true });
+const InternalTreeBranchText = withContext(_ark_ui_react_tree_view.TreeView.BranchText, "branchText", { baseComponent: true });
 const TreeBranchText = (0, react.forwardRef)(({ textStyle = "label.medium", fontWeight = "bold", children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalTreeBranchText, {
 	asChild: true,
 	...props,
@@ -107,10 +107,10 @@ const TreeBranchText = (0, react.forwardRef)(({ textStyle = "label.medium", font
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })
 	})
 }));
-const TreeBranchTrigger = withContext(_ark_ui_react.TreeView.BranchTrigger, "branchTrigger", { baseComponent: true });
-const TreeItemIndicator = withContext(_ark_ui_react.TreeView.ItemIndicator, "itemIndicator", { baseComponent: true });
-const TreeItem = withContext(_ark_ui_react.TreeView.Item, "item", { baseComponent: true });
-const InternalTreeItemText = withContext(_ark_ui_react.TreeView.ItemText, "itemText", { baseComponent: true });
+const TreeBranchTrigger = withContext(_ark_ui_react_tree_view.TreeView.BranchTrigger, "branchTrigger", { baseComponent: true });
+const TreeItemIndicator = withContext(_ark_ui_react_tree_view.TreeView.ItemIndicator, "itemIndicator", { baseComponent: true });
+const TreeItem = withContext(_ark_ui_react_tree_view.TreeView.Item, "item", { baseComponent: true });
+const InternalTreeItemText = withContext(_ark_ui_react_tree_view.TreeView.ItemText, "itemText", { baseComponent: true });
 const TreeItemText = (0, react.forwardRef)(({ textStyle = "label.medium", fontWeight = "bold", children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalTreeItemText, {
 	asChild: true,
 	...props,
@@ -123,7 +123,7 @@ const TreeItemText = (0, react.forwardRef)(({ textStyle = "label.medium", fontWe
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })
 	})
 }));
-const InternalTreeLabel = withContext(_ark_ui_react.TreeView.Label, "label", { baseComponent: true });
+const InternalTreeLabel = withContext(_ark_ui_react_tree_view.TreeView.Label, "label", { baseComponent: true });
 const TreeLabel = (0, react.forwardRef)(({ children, textStyle = "label.medium", fontWeight = "bold", ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalTreeLabel, {
 	asChild: true,
 	...props,
@@ -136,11 +136,11 @@ const TreeLabel = (0, react.forwardRef)(({ children, textStyle = "label.medium",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })
 	})
 }));
-const Tree = withContext(_ark_ui_react.TreeView.Tree, "tree", { baseComponent: true });
-const createTreeCollection = _ark_ui_react.createTreeCollection;
-const TreeNodeProvider = _ark_ui_react.TreeView.NodeProvider;
-const TreeNodeContext = _ark_ui_react.TreeView.NodeContext;
-const useTreeView = _ark_ui_react.useTreeView;
+const Tree = withContext(_ark_ui_react_tree_view.TreeView.Tree, "tree", { baseComponent: true });
+const createTreeCollection = _ark_ui_react_tree_view.createTreeCollection;
+const TreeNodeProvider = _ark_ui_react_tree_view.TreeView.NodeProvider;
+const TreeNodeContext = _ark_ui_react_tree_view.TreeView.NodeContext;
+const useTreeView = _ark_ui_react_tree_view.useTreeView;
 //#endregion
 exports.Tree = Tree;
 exports.TreeBranch = TreeBranch;