@ndla/primitives 0.0.8 → 0.0.10

package/lib/Dialog.d.ts

@@ -9,7 +9,7 @@ import { Dialog } from "@ark-ui/react";
 import { RecipeVariantProps } from "@ndla/styled-system/css";
 import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
-declare const dialogRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"title" | "description" | "content" | "trigger" | "backdrop" | "positioner" | "closeTrigger", {
+declare const dialogRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"title" | "description" | "content" | "positioner" | "trigger" | "backdrop" | "closeTrigger", {
     variant: {
         drawer: {
             content: {

package/lib/Dialog.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InternalDialogRoot = exports.DialogTrigger = exports.DialogTitle = exports.DialogStandaloneContent = exports.DialogRoot = exports.DialogPositioner = exports.DialogHeader = exports.DialogDescription = exports.DialogContent = exports.DialogCloseTrigger = exports.DialogBody = exports.DialogBackdrop = void 0;
 var _react = require("react");
-var _anatomy = require("@ark-ui/anatomy");
 var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _jsx2 = require("@ndla/styled-system/jsx");
@@ -21,7 +20,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const dialogRecipe = (0, _css.sva)({
-  slots: _anatomy.dialogAnatomy.keys(),
+  slots: _react2.dialogAnatomy.keys(),
   base: {
     backdrop: {
       position: "fixed",

package/lib/Figure.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare const Figure: import("@ndla/styled-system/jsx").StyledComponent<"figure", {
+    size?: "small" | "xsmall" | "medium" | "full" | undefined;
+    float?: "left" | "right" | undefined;
+}>;

package/lib/Figure.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Figure = void 0;
+var _jsx = require("@ndla/styled-system/jsx");
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const Figure = exports.Figure = (0, _jsx.styled)("figure", {
+  base: {
+    position: "relative",
+    transitionDuration: "normal",
+    transitionProperty: "transform, width, height",
+    transitionTimingFunction: "default"
+  },
+  variants: {
+    size: {
+      full: {
+        width: "100%"
+      },
+      medium: {
+        tablet: {
+          width: "50%"
+        },
+        desktop: {
+          width: "65%"
+        }
+      },
+      small: {
+        tablet: {
+          width: "35%"
+        },
+        desktop: {
+          width: "50%"
+        }
+      },
+      xsmall: {
+        tablet: {
+          width: "25%"
+        },
+        desktop: {
+          width: "35%"
+        }
+      }
+    },
+    float: {
+      left: {
+        tablet: {
+          float: "left",
+          clear: "left",
+          paddingInlineEnd: "medium"
+        }
+      },
+      right: {
+        tablet: {
+          float: "right",
+          clear: "right",
+          paddingInlineStart: "medium"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "full"
+  },
+  compoundVariants: [{
+    float: ["left", "right"],
+    css: {
+      zIndex: "base",
+      left: "auto",
+      marginBlock: "xsmall"
+    }
+  }]
+});

package/lib/Menu.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MenuTriggerItem = exports.MenuTrigger = exports.MenuSeparator = exports.MenuRoot = exports.MenuPositioner = exports.MenuItemGroupLabel = exports.MenuItemGroup = exports.MenuItem = exports.MenuContent = void 0;
 var _react = require("react");
-var _anatomy = require("@ark-ui/anatomy");
 var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _createStyleContext = require("./createStyleContext");
@@ -98,7 +97,7 @@ const itemCva = (0, _css.cva)({
   }
 });
 const menuRecipe = (0, _css.sva)({
-  slots: _anatomy.menuAnatomy.keys(),
+  slots: _react2.menuAnatomy.keys(),
   base: {
     item: itemStyle,
     triggerItem: itemStyle,

package/lib/Pagination.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PaginationRoot = exports.PaginationPrevTrigger = exports.PaginationNextTrigger = exports.PaginationItem = exports.PaginationEllipsis = void 0;
-var _anatomy = require("@ark-ui/anatomy");
 var _react = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _createStyleContext = require("./createStyleContext");
@@ -17,7 +16,7 @@ var _createStyleContext = require("./createStyleContext");
  */
 
 const paginationRecipe = (0, _css.sva)({
-  slots: _anatomy.paginationAnatomy.keys(),
+  slots: _react.paginationAnatomy.keys(),
   base: {
     root: {
       display: "flex",

package/lib/Popover.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PopoverTrigger = exports.PopoverTitle = exports.PopoverRoot = exports.PopoverPositioner = exports.PopoverIndicator = exports.PopoverDescription = exports.PopoverContentStandalone = exports.PopoverContent = exports.PopoverCloseTrigger = exports.PopoverArrowTip = exports.PopoverArrowStandalone = exports.PopoverArrow = exports.PopoverAnchor = void 0;
-var _anatomy = require("@ark-ui/anatomy");
 var _react = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _createStyleContext = require("./createStyleContext");
@@ -18,7 +17,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const popoverRecipe = (0, _css.sva)({
-  slots: _anatomy.popoverAnatomy.keys(),
+  slots: _react.popoverAnatomy.keys(),
   base: {
     positioner: {
       position: "relative"

package/lib/RadioGroup.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RadioGroupRoot = exports.RadioGroupLabel = exports.RadioGroupItemText = exports.RadioGroupItemHiddenInput = exports.RadioGroupItemControl = exports.RadioGroupItem = exports.RadioGroupIndicator = exports.InternalRadioGroupLabel = void 0;
 var _react = require("react");
-var _anatomy = require("@ark-ui/anatomy");
 var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _createStyleContext = require("./createStyleContext");
@@ -21,7 +20,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const radioGroupRecipe = (0, _css.sva)({
-  slots: _anatomy.radioGroupAnatomy.keys(),
+  slots: _react2.radioGroupAnatomy.keys(),
   base: {
     root: {
       display: "flex",

package/lib/Select.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { Select } from "@ark-ui/react";
+import { JsxStyleProps } from "@ndla/styled-system/types";
+import { TextProps } from "./Text";
+export type SelectRootProps<T extends Select.CollectionItem> = Select.RootProps<T> & JsxStyleProps;
+export declare const SelectRoot: <T extends Select.CollectionItem>({ lazyMount, unmountOnExit, ...props }: SelectRootProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectClearTrigger: import("react").ForwardRefExoticComponent<Select.ClearTriggerProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SelectContent: import("react").ForwardRefExoticComponent<Select.ContentProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectControl: import("react").ForwardRefExoticComponent<Select.ControlProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectIndicator: import("react").ForwardRefExoticComponent<Select.IndicatorProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectItemGroupLabel: import("react").ForwardRefExoticComponent<Select.ItemGroupLabelProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectItemGroup: import("react").ForwardRefExoticComponent<Select.ItemGroupProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectItemIndicator: import("react").ForwardRefExoticComponent<Select.ItemIndicatorProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectItem: import("react").ForwardRefExoticComponent<Select.ItemProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectItemText: import("react").ForwardRefExoticComponent<Select.ItemTextProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectLabel: import("react").ForwardRefExoticComponent<Select.LabelProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const SelectPositioner: import("react").ForwardRefExoticComponent<Select.PositionerProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectTrigger: import("react").ForwardRefExoticComponent<Select.TriggerProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SelectValueText: import("react").ForwardRefExoticComponent<Select.ValueTextProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLSpanElement>>;

package/lib/Select.js

@@ -0,0 +1,204 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectValueText = exports.SelectTrigger = exports.SelectRoot = exports.SelectPositioner = exports.SelectLabel = exports.SelectItemText = exports.SelectItemIndicator = exports.SelectItemGroupLabel = exports.SelectItemGroup = exports.SelectItem = exports.SelectIndicator = exports.SelectControl = exports.SelectContent = exports.SelectClearTrigger = void 0;
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+var _createStyleContext = require("./createStyleContext");
+var _Label = require("./Label");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const selectRecipe = (0, _css.sva)({
+  slots: _react2.selectAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "3xsmall"
+    },
+    control: {
+      display: "flex",
+      gap: "4xsmall",
+      alignItems: "center"
+    },
+    content: {
+      display: "flex",
+      gap: "4xsmall",
+      flexDirection: "column",
+      zIndex: "dropdown",
+      background: "surface.default",
+      borderRadius: "xsmall",
+      boxShadow: "large",
+      padding: "xsmall",
+      overflowY: "auto",
+      maxHeight: "surface.xsmall",
+      _focusVisible: {
+        outlineOffset: "-1"
+      },
+      _open: {
+        animation: "fade-shift-in 0.25s ease-out"
+      },
+      _closed: {
+        animation: "fade-shift-out 0.25s ease-out"
+      }
+    },
+    item: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "xsmall",
+      background: "surface.default",
+      borderRadius: "xsmall",
+      cursor: "pointer",
+      transitionDuration: "fast",
+      transitionProperty: "background, color",
+      transitionTimingFunction: "default",
+      _hover: {
+        background: "surface.hover"
+      },
+      _selected: {
+        background: "surface.selected",
+        _hover: {
+          background: "surface.hover"
+        },
+        _highlighted: {
+          background: "surface.hover"
+        }
+      },
+      _highlighted: {
+        background: "surface.hover",
+        _hover: {
+          background: "surface.hover"
+        }
+      },
+      _disabled: {
+        cursor: "not-allowed",
+        color: "text.disabled",
+        background: "surface.disabled",
+        _highlighted: {
+          color: "text.disabled",
+          background: "surface.disabled"
+        },
+        _selected: {
+          color: "text.disabled",
+          background: "surface.disabled"
+        },
+        _hover: {
+          color: "text.disabled",
+          background: "surface.disabled"
+        }
+      }
+    },
+    indicator: {
+      color: "icon.default",
+      transformOrigin: "center",
+      transitionDuration: "normal",
+      transitionProperty: "transform",
+      transitionTimingFunction: "default",
+      _open: {
+        transform: "rotate(180deg)"
+      }
+    },
+    itemIndicator: {
+      color: "stroke.default"
+    },
+    itemText: {
+      _checked: {
+        textDecoration: "underline"
+      },
+      _highlighted: {
+        textDecoration: "underline"
+      }
+    },
+    trigger: {
+      justifyContent: "space-between",
+      width: "surface.small",
+      _ariaInvalid: {
+        boxShadowColor: "stroke.error"
+      }
+    },
+    itemGroup: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "4xsmall"
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = (0, _createStyleContext.createStyleContext)(selectRecipe);
+const InternalSelectRoot = withProvider(_react2.Select.Root, "root");
+const SelectRoot = _ref => {
+  let {
+    lazyMount = true,
+    unmountOnExit = true,
+    ...props
+  } = _ref;
+  return (
+    /*#__PURE__*/
+    //@ts-expect-error -- T does not necessarily match Select.CollectionItem. However, we prefer to use T over Select.CollectionItem to get the correct type during use.
+    (0, _jsxRuntime.jsx)(InternalSelectRoot, {
+      lazyMount: lazyMount,
+      unmountOnExit: unmountOnExit,
+      ...props
+    })
+  );
+};
+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 SelectItemGroupLabel = exports.SelectItemGroupLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalSelectItemGroupLabel, {
+    asChild: true,
+    forwardCssProp: true,
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
+      asChild: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: children
+      })
+    })
+  });
+});
+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 InternalSelectLabel = withContext(_react2.Select.Label, "label");
+const SelectLabel = exports.SelectLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref3;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalSelectLabel, {
+    asChild: true,
+    forwardCssProp: true,
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
+      children: children
+    })
+  });
+});
+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");

package/lib/Slider.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SliderTrack = exports.SliderThumb = exports.SliderRoot = exports.SliderRange = exports.SliderLabel = exports.SliderHiddenInput = exports.SliderControl = void 0;
-var _anatomy = require("@ark-ui/anatomy");
 var _react = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _createStyleContext = require("./createStyleContext");
@@ -19,7 +18,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const sliderRecipe = (0, _css.sva)({
-  slots: _anatomy.sliderAnatomy.keys(),
+  slots: _react.sliderAnatomy.keys(),
   base: {
     root: {
       display: "flex",

package/lib/Switch.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SwitchThumb = exports.SwitchRoot = exports.SwitchLabel = exports.SwitchHiddenInput = exports.SwitchControl = void 0;
-var _anatomy = require("@ark-ui/anatomy");
 var _react = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _createStyleContext = require("./createStyleContext");
@@ -19,7 +18,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const switchRecipe = (0, _css.sva)({
-  slots: _anatomy.switchAnatomy.keys(),
+  slots: _react.switchAnatomy.keys(),
   base: {
     root: {
       display: "inline-flex",

package/lib/Tabs.js

@@ -17,8 +17,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const tabsRecipe = (0, _css.sva)({
-  // TODO: anatomy keys do not work here.
-  slots: ["content", "list", "root", "indicator", "trigger"],
+  slots: _react.tabsAnatomy.keys(),
   base: {
     root: {
       position: "relative",

package/lib/TagsInput.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { 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 & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TagsInputClearTrigger: import("react").ForwardRefExoticComponent<TagsInput.ClearTriggerProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TagsInputControl: import("react").ForwardRefExoticComponent<TagsInput.ControlProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TagsInputInput: import("react").ForwardRefExoticComponent<TagsInput.InputProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TagsInputItemDeleteTrigger: import("react").ForwardRefExoticComponent<TagsInput.ItemDeleteTriggerProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TagsInputItemInput: import("react").ForwardRefExoticComponent<TagsInput.ItemInputProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TagsInputItemPreview: import("react").ForwardRefExoticComponent<TagsInput.ItemPreviewProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TagsInputItem: import("react").ForwardRefExoticComponent<TagsInput.ItemProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TagsInputItemText: import("react").ForwardRefExoticComponent<TagsInput.ItemTextProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const TagsInputLabel: import("react").ForwardRefExoticComponent<TagsInput.LabelProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLLabelElement>>;

package/lib/TagsInput.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TagsInputRoot = exports.TagsInputLabel = exports.TagsInputItemText = exports.TagsInputItemPreview = exports.TagsInputItemInput = exports.TagsInputItemDeleteTrigger = exports.TagsInputItem = exports.TagsInputInput = exports.TagsInputControl = exports.TagsInputClearTrigger = void 0;
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+var _createStyleContext = require("./createStyleContext");
+var _Label = require("./Label");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const tagsInputRecipe = (0, _css.sva)({
+  slots: _react2.tagsInputAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "xxsmall",
+      width: "full"
+    },
+    control: {
+      display: "inline-flex",
+      gap: "xxsmall",
+      alignItems: "center",
+      flexWrap: "wrap"
+    },
+    item: {
+      paddingBlock: "3xsmall"
+    },
+    itemPreview: {
+      display: "flex",
+      gap: "1",
+      paddingBlock: "4xsmall",
+      paddingInlineEnd: "3xsmall",
+      paddingInlineStart: "xsmall",
+      cursor: "initial",
+      borderRadius: "large",
+      outline: "1px solid",
+      outlineColor: "transparent",
+      backgroundColor: "surface.actionSubtle.selected",
+      color: "text.onAction",
+      transitionDuration: "normal",
+      transitionProperty: "background, outline-color, color",
+      transitionTimingFunction: "default",
+      textStyle: "label.medium",
+      _hover: {
+        backgroundColor: "surface.actionSubtle.hover",
+        outlineColor: "stroke.hover",
+        color: "text.default",
+        "& svg": {
+          color: "stroke.hover"
+        }
+      },
+      _highlighted: {
+        backgroundColor: "surface.actionSubtle.hover",
+        outlineWidth: "3px",
+        outlineOffset: "-1px",
+        outlineColor: "stroke.hover",
+        color: "text.default",
+        "& svg": {
+          color: "stroke.hover"
+        }
+      }
+    },
+    input: {
+      flex: "1"
+    },
+    itemDeleteTrigger: {
+      paddingBottom: "1",
+      cursor: "pointer",
+      "& span": {
+        display: "inline-block"
+      },
+      "& svg": {
+        marginInline: "0",
+        marginBlock: "0",
+        width: "medium",
+        height: "medium"
+      }
+    },
+    itemText: {
+      paddingBottom: "1"
+    },
+    itemInput: {
+      outline: "none",
+      background: "transparent"
+    }
+  }
+});
+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 InternalTagsInputLabel = withContext(_react2.TagsInput.Label, "label");
+const TagsInputLabel = exports.TagsInputLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalTagsInputLabel, {
+    asChild: true,
+    forwardCssProp: true,
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
+      children: children
+    })
+  });
+});