@ndla/primitives 0.0.17 → 0.0.18

package/dist/panda.buildinfo.json

@@ -9,23 +9,23 @@
       "justifyContent]___[value:space-between",
       "background]___[value:surface.default",
       "cursor]___[value:pointer",
-      "paddingInline]___[value:medium",
-      "paddingBlock]___[value:medium",
-      "boxShadowColor]___[value:stroke.subtle",
-      "boxShadow]___[value:inset 0 0 0 1px var(--shadow-color)",
-      "borderRadius]___[value:xsmall",
       "transitionDuration]___[value:fast",
       "transitionTimingFunction]___[value:default",
       "transitionProperty]___[value:background, border-color, border, border-radius",
-      "width]___[value:100%",
       "transitionProperty]___[value:background, border-color, border, border-radius]___[cond:_closed",
       "cursor]___[value:not-allowed]___[cond:_disabled",
-      "background]___[value:surface..disabled.subtle]___[cond:_disabled",
+      "background]___[value:surface.disabled.subtle]___[cond:_disabled",
       "boxShadowColor]___[value:stroke.disabled]___[cond:_disabled",
       "color]___[value:text.disabled]___[cond:_disabled",
       "background]___[value:surface.disabled.subtle]___[cond:_disabled<___>_hover",
       "boxShadowColor]___[value:stroke.disabled]___[cond:_disabled<___>_hover",
       "color]___[value:text.disabled]___[cond:_disabled<___>_hover",
+      "paddingInline]___[value:medium",
+      "paddingBlock]___[value:medium",
+      "width]___[value:100%",
+      "borderRadius]___[value:xsmall",
+      "boxShadowColor]___[value:stroke.subtle",
+      "boxShadow]___[value:inset 0 0 0 1px var(--shadow-color)",
       "background]___[value:surface.actionSubtle.hover]___[cond:_hover",
       "boxShadowColor]___[value:stroke.hover]___[cond:_hover",
       "backgroundColor]___[value:surface.actionSubtle.active]___[cond:_open",
@@ -43,12 +43,12 @@
       "transitionProperty]___[value:padding-bottom",
       "paddingBlock]___[value:xsmall",
       "paddingInline]___[value:small",
+      "animation]___[value:collapse-in]___[cond:_open",
+      "animation]___[value:collapse-out]___[cond:_closed",
       "borderBottomRadius]___[value:xsmall",
       "borderWidth]___[value:0 1px 1px",
       "borderStyle]___[value:solid",
       "borderColor]___[value:stroke.default",
-      "animation]___[value:collapse-in]___[cond:_open",
-      "animation]___[value:collapse-out]___[cond:_closed",
       "listStyle]___[value:revert",
       "listStylePosition]___[value:inside",
       "paddingInlineStart]___[value:small",
@@ -543,7 +543,9 @@
       "right]___[value:xxsmall",
       "paddingInline]___[value:xxsmall",
       "--arrow-size]___[value:spacing.xxsmall",
-      "--arrow-background]___[value:colors.surface.action"
+      "--arrow-background]___[value:colors.surface.action",
+      "height]___[value:200px",
+      "objectFit]___[value:cover"
     ],
     "recipes": {}
   }

package/dist/styles.css

@@ -109,20 +109,20 @@
     padding-block: var(--spacing-medium);
 }
 
-  .bx-sh-c_stroke\.subtle {
-    --shadow-color: var(--colors-stroke-subtle);
-}
-
-  .bx-sh_inset_0_0_0_1px_var\(--shadow-color\) {
-    box-shadow: inset 0 0 0 1px var(--shadow-color);
+  .w_100\% {
+    width: 100%;
 }
 
   .bdr_xsmall {
     border-radius: var(--radii-xsmall);
 }
 
-  .w_100\% {
-    width: 100%;
+  .bx-sh-c_stroke\.subtle {
+    --shadow-color: var(--colors-stroke-subtle);
+}
+
+  .bx-sh_inset_0_0_0_1px_var\(--shadow-color\) {
+    box-shadow: inset 0 0 0 1px var(--shadow-color);
 }
 
   .c_icon\.strong {
@@ -832,6 +832,14 @@
     --arrow-background: var(--colors-surface-action);
 }
 
+  .h_200px {
+    height: 200px;
+}
+
+  .obj-f_cover {
+    object-fit: cover;
+}
+
   .flex-d_column {
     flex-direction: column;
 }
@@ -1131,8 +1139,8 @@
     cursor: not-allowed;
 }
 
-  .disabled\:bg_surface\.\.disabled\.subtle:is(:disabled, [disabled], [data-disabled]) {
-    background: surface..disabled.subtle;
+  .disabled\:bg_surface\.disabled\.subtle:is(:disabled, [disabled], [data-disabled]) {
+    background: var(--colors-surface-disabled-subtle);
 }
 
   .disabled\:bx-sh-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) {

package/es/Accordion.js

@@ -23,21 +23,15 @@ const accordionRecipe = sva({
       justifyContent: "space-between",
       background: "surface.default",
       cursor: "pointer",
-      paddingInline: "medium",
-      paddingBlock: "medium",
-      boxShadowColor: "stroke.subtle",
-      boxShadow: "inset 0 0 0 1px var(--shadow-color)",
-      borderRadius: "xsmall",
       transitionDuration: "fast",
       transitionTimingFunction: "default",
       transitionProperty: "background, border-color, border, border-radius",
-      width: "100%",
       _closed: {
         transitionProperty: "background, border-color, border, border-radius"
       },
       _disabled: {
         cursor: "not-allowed",
-        background: "surface..disabled.subtle",
+        background: "surface.disabled.subtle",
         boxShadowColor: "stroke.disabled",
         color: "text.disabled",
         _hover: {
@@ -45,20 +39,6 @@ const accordionRecipe = sva({
           boxShadowColor: "stroke.disabled",
           color: "text.disabled"
         }
-      },
-      _hover: {
-        background: "surface.actionSubtle.hover",
-        boxShadowColor: "stroke.hover"
-      },
-      _open: {
-        backgroundColor: "surface.actionSubtle.active",
-        boxShadowColor: "stroke.default",
-        borderBottomRadius: "sharp"
-      },
-      _focusVisible: {
-        outline: "none",
-        boxShadowColor: "stroke.default",
-        boxShadow: "inset 0 0 0 2px var(--shadow-color)"
       }
     },
     itemIndicator: {
@@ -73,21 +53,59 @@ const accordionRecipe = sva({
     },
     itemContent: {
       overflow: "hidden",
+      // TODO: Is this needed?
       transitionProperty: "padding-bottom",
       transitionDuration: "normal",
       transitionTimingFunction: "default",
       paddingBlock: "xsmall",
       paddingInline: "small",
-      borderBottomRadius: "xsmall",
-      borderWidth: "0 1px 1px",
-      borderStyle: "solid",
-      borderColor: "stroke.default",
       _open: {
         animation: "collapse-in"
       },
       _closed: {
         animation: "collapse-out"
       }
+    },
+    item: {
+      width: "100%"
+    }
+  },
+  defaultVariants: {
+    variant: "bordered"
+  },
+  variants: {
+    variant: {
+      clean: {},
+      bordered: {
+        itemTrigger: {
+          paddingInline: "medium",
+          paddingBlock: "medium",
+          width: "100%",
+          borderRadius: "xsmall",
+          boxShadowColor: "stroke.subtle",
+          boxShadow: "inset 0 0 0 1px var(--shadow-color)",
+          _hover: {
+            background: "surface.actionSubtle.hover",
+            boxShadowColor: "stroke.hover"
+          },
+          _open: {
+            backgroundColor: "surface.actionSubtle.active",
+            boxShadowColor: "stroke.default",
+            borderBottomRadius: "sharp"
+          },
+          _focusVisible: {
+            outline: "none",
+            boxShadowColor: "stroke.default",
+            boxShadow: "inset 0 0 0 2px var(--shadow-color)"
+          }
+        },
+        itemContent: {
+          borderBottomRadius: "xsmall",
+          borderWidth: "0 1px 1px",
+          borderStyle: "solid",
+          borderColor: "stroke.default"
+        }
+      }
     }
   }
 });
@@ -95,8 +113,18 @@ const {
   withProvider,
   withContext
 } = createStyleContext(accordionRecipe);
-export const AccordionRoot = withProvider(Accordion.Root, "root");
-export const AccordionItemContent = withContext(Accordion.ItemContent, "itemContent");
-export const AccordionItemIndicator = withContext(Accordion.ItemIndicator, "itemIndicator");
-export const AccordionItem = withContext(Accordion.Item, "item");
-export const AccordionItemTrigger = withContext(Accordion.ItemTrigger, "itemTrigger");
+export const AccordionRoot = withProvider(Accordion.Root, "root", {
+  baseComponent: true
+});
+export const AccordionItemContent = withContext(Accordion.ItemContent, "itemContent", {
+  baseComponent: true
+});
+export const AccordionItemIndicator = withContext(Accordion.ItemIndicator, "itemIndicator", {
+  baseComponent: true
+});
+export const AccordionItem = withContext(Accordion.Item, "item", {
+  baseComponent: true
+});
+export const AccordionItemTrigger = withContext(Accordion.ItemTrigger, "itemTrigger", {
+  baseComponent: true
+});

package/es/Button.js

@@ -153,7 +153,7 @@ export const buttonRecipe = cva({
   variants: {
     size: {
       default: {
-        paddingInline: "medium",
+        paddingInline: "xsmall",
         paddingBlock: "xxsmall",
         minHeight: "24"
       },

package/es/Card/Card.js

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { forwardRef } from "react";
+import { ark } from "@ark-ui/react";
+import { sva } from "@ndla/styled-system/css";
+import { createStyleContext } from "../createStyleContext";
+import { Image } from "../Image";
+import { Heading } from "../Text";
+import { jsx as _jsx } from "react/jsx-runtime";
+const cardRecipe = sva({
+  slots: ["root", "title", "content", "image"],
+  base: {
+    root: {
+      position: "relative",
+      border: "1px solid",
+      borderRadius: "xsmall",
+      borderColor: "stroke.subtle",
+      transitionDuration: "fast",
+      transitionProperty: "background, color",
+      transitionTimingFunction: "default",
+      background: "surface.default",
+      _hover: {
+        background: "surface.actionSubtle.hover",
+        borderColor: "stroke.hover"
+      }
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "xsmall",
+      paddingBlock: "xsmall",
+      paddingInline: "medium"
+    },
+    title: {
+      textDecoration: "underline",
+      _hover: {
+        textDecoration: "none"
+      }
+    },
+    image: {
+      height: "200px",
+      objectFit: "cover",
+      width: "100%"
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = createStyleContext(cardRecipe);
+export const CardRoot = withProvider(ark.article, "root", {
+  baseComponent: true
+});
+const InternalCardHeading = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    textStyle = "label.large",
+    fontWeight = "bold",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(Heading, {
+    textStyle: textStyle,
+    fontWeight: fontWeight,
+    ...props,
+    ref: ref
+  });
+});
+export const CardHeading = withContext(InternalCardHeading, "title");
+export const CardContent = withContext(ark.div, "content", {
+  baseComponent: true
+});
+export const CardImage = withContext(Image, "image");

package/es/Checkbox.js

@@ -209,8 +209,12 @@ const {
   withProvider,
   withContext
 } = createStyleContext(checkboxRecipe);
-export const CheckboxRoot = withProvider(Checkbox.Root, "root");
-export const CheckboxIndicator = withContext(Checkbox.Indicator, "indicator");
+export const CheckboxRoot = withProvider(Checkbox.Root, "root", {
+  baseComponent: true
+});
+export const CheckboxIndicator = withContext(Checkbox.Indicator, "indicator", {
+  baseComponent: true
+});
 const InternalCheckboxLabel = withContext(Checkbox.Label, "label");
 export const CheckboxLabel = _ref => {
   let {
@@ -227,6 +231,10 @@ export const CheckboxLabel = _ref => {
     })
   });
 };
-export const CheckboxControl = withContext(Checkbox.Control, "control");
-export const CheckboxGroup = withProvider(Checkbox.Group, "group");
+export const CheckboxControl = withContext(Checkbox.Control, "control", {
+  baseComponent: true
+});
+export const CheckboxGroup = withProvider(Checkbox.Group, "group", {
+  baseComponent: true
+});
 export const CheckboxHiddenInput = Checkbox.HiddenInput;

package/es/Combobox.js

@@ -147,7 +147,9 @@ const {
   withProvider,
   withContext
 } = createStyleContext(comboboxRecipe);
-const InternalComboboxRoot = withProvider(Combobox.Root, "root");
+const InternalComboboxRoot = withProvider(Combobox.Root, "root", {
+  baseComponent: true
+});
 export const ComboboxRoot = _ref => {
   let {
     ...props
@@ -160,10 +162,18 @@ export const ComboboxRoot = _ref => {
     })
   );
 };
-export const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, "clearTrigger");
-export const ComboboxContent = withContext(Combobox.Content, "content");
-export const ComboboxControl = withContext(Combobox.Control, "control");
-export const ComboboxInput = withContext(Combobox.Input, "input");
+export const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, "clearTrigger", {
+  baseComponent: true
+});
+export const ComboboxContent = withContext(Combobox.Content, "content", {
+  baseComponent: true
+});
+export const ComboboxControl = withContext(Combobox.Control, "control", {
+  baseComponent: true
+});
+export const ComboboxInput = withContext(Combobox.Input, "input", {
+  baseComponent: true
+});
 const InternalComboboxItemGroupLabel = withContext(Combobox.ItemGroupLabel, "itemGroupLabel");
 export const ComboboxItemGroupLabel = _ref2 => {
   let {
@@ -186,9 +196,15 @@ export const ComboboxItemGroupLabel = _ref2 => {
     })
   });
 };
-export const ComboboxItemGroup = withContext(Combobox.ItemGroup, "itemGroup");
-export const ComboboxItemIndicator = withContext(Combobox.ItemIndicator, "itemIndicator");
-export const ComboboxItem = withContext(Combobox.Item, "item");
+export const ComboboxItemGroup = withContext(Combobox.ItemGroup, "itemGroup", {
+  baseComponent: true
+});
+export const ComboboxItemIndicator = withContext(Combobox.ItemIndicator, "itemIndicator", {
+  baseComponent: true
+});
+export const ComboboxItem = withContext(Combobox.Item, "item", {
+  baseComponent: true
+});
 const InternalComboboxItemText = withContext(Combobox.ItemText, "itemText");
 export const ComboboxItemText = _ref3 => {
   let {
@@ -225,5 +241,9 @@ export const ComboboxLabel = _ref4 => {
     })
   });
 };
-export const ComboboxPositioner = withContext(Combobox.Positioner, "positioner");
-export const ComboboxTrigger = withContext(Combobox.Trigger, "trigger");
+export const ComboboxPositioner = withContext(Combobox.Positioner, "positioner", {
+  baseComponent: true
+});
+export const ComboboxTrigger = withContext(Combobox.Trigger, "trigger", {
+  baseComponent: true
+});

package/es/Dialog.js

@@ -265,9 +265,15 @@ export const DialogRoot = _ref => {
     ...props
   });
 };
-export const DialogBackdrop = withContext(Dialog.Backdrop, "backdrop");
-export const DialogStandaloneContent = withContext(Dialog.Content, "content");
-export const DialogPositioner = withContext(Dialog.Positioner, "positioner");
+export const DialogBackdrop = withContext(Dialog.Backdrop, "backdrop", {
+  baseComponent: true
+});
+export const DialogStandaloneContent = withContext(Dialog.Content, "content", {
+  baseComponent: true
+});
+export const DialogPositioner = withContext(Dialog.Positioner, "positioner", {
+  baseComponent: true
+});
 export const DialogContent = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsxs(_Fragment, {
   children: [/*#__PURE__*/_jsx(DialogBackdrop, {}), /*#__PURE__*/_jsx(DialogPositioner, {
     children: /*#__PURE__*/_jsx(DialogStandaloneContent, {

package/es/Menu.js

@@ -141,7 +141,9 @@ export const MenuRoot = _ref => {
     ...props
   });
 };
-export const MenuContent = withContext(Menu.Content, "content");
+export const MenuContent = withContext(Menu.Content, "content", {
+  baseComponent: true
+});
 const InternalMenuItemGroupLabel = withContext(Menu.ItemGroupLabel, "itemGroupLabel");
 export const MenuItemGroupLabel = _ref2 => {
   let {
@@ -160,8 +162,12 @@ export const MenuItemGroupLabel = _ref2 => {
     })
   });
 };
-export const MenuItemGroup = withContext(Menu.ItemGroup, "itemGroup");
-const InternalMenuItem = withContext(Menu.Item, "item");
+export const MenuItemGroup = withContext(Menu.ItemGroup, "itemGroup", {
+  baseComponent: true
+});
+const InternalMenuItem = withContext(Menu.Item, "item", {
+  baseComponent: true
+});
 export const MenuItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     css: cssProp = {},
@@ -176,8 +182,12 @@ export const MenuItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
     ref: ref
   });
 });
-export const MenuPositioner = withContext(Menu.Positioner, "positioner");
-const InternalMenuTriggerItem = withContext(Menu.TriggerItem, "triggerItem");
+export const MenuPositioner = withContext(Menu.Positioner, "positioner", {
+  baseComponent: true
+});
+const InternalMenuTriggerItem = withContext(Menu.TriggerItem, "triggerItem", {
+  baseComponent: true
+});
 export const MenuTriggerItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
     css: cssProp = {},
@@ -192,5 +202,9 @@ export const MenuTriggerItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
     ref: ref
   });
 });
-export const MenuTrigger = withContext(Menu.Trigger, "trigger");
-export const MenuSeparator = withContext(Menu.Separator, "separator");
+export const MenuTrigger = withContext(Menu.Trigger, "trigger", {
+  baseComponent: true
+});
+export const MenuSeparator = withContext(Menu.Separator, "separator", {
+  baseComponent: true
+});

package/es/Pagination.js

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

package/es/Popover.js

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

package/es/RadioGroup.js

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

package/es/Select.js

@@ -132,7 +132,9 @@ const {
   withProvider,
   withContext
 } = createStyleContext(selectRecipe);
-const InternalSelectRoot = withProvider(Select.Root, "root");
+const InternalSelectRoot = withProvider(Select.Root, "root", {
+  baseComponent: true
+});
 export const SelectRoot = _ref => {
   let {
     lazyMount = true,
@@ -149,10 +151,18 @@ export const SelectRoot = _ref => {
     })
   );
 };
-export const SelectClearTrigger = withContext(Select.ClearTrigger, "clearTrigger");
-export const SelectContent = withContext(Select.Content, "content");
-export const SelectControl = withContext(Select.Control, "control");
-export const SelectIndicator = withContext(Select.Indicator, "indicator");
+export const SelectClearTrigger = withContext(Select.ClearTrigger, "clearTrigger", {
+  baseComponent: true
+});
+export const SelectContent = withContext(Select.Content, "content", {
+  baseComponent: true
+});
+export const SelectControl = withContext(Select.Control, "control", {
+  baseComponent: true
+});
+export const SelectIndicator = withContext(Select.Indicator, "indicator", {
+  baseComponent: true
+});
 export const SelectItemGroupLabel = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     children,
@@ -172,10 +182,18 @@ export const SelectItemGroupLabel = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
 });
 const InternalSelectItemGroupLabel = withContext(Select.ItemGroupLabel, "itemGroupLabel");
-export const SelectItemGroup = withContext(Select.ItemGroup, "itemGroup");
-export const SelectItemIndicator = withContext(Select.ItemIndicator, "itemIndicator");
-export const SelectItem = withContext(Select.Item, "item");
-export const SelectItemText = withContext(Select.ItemText, "itemText");
+export const SelectItemGroup = withContext(Select.ItemGroup, "itemGroup", {
+  baseComponent: true
+});
+export const SelectItemIndicator = withContext(Select.ItemIndicator, "itemIndicator", {
+  baseComponent: true
+});
+export const SelectItem = withContext(Select.Item, "item", {
+  baseComponent: true
+});
+export const SelectItemText = withContext(Select.ItemText, "itemText", {
+  baseComponent: true
+});
 const InternalSelectLabel = withContext(Select.Label, "label");
 export const SelectLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
@@ -191,6 +209,12 @@ export const SelectLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
     })
   });
 });
-export const SelectPositioner = withContext(Select.Positioner, "positioner");
-export const SelectTrigger = withContext(Select.Trigger, "trigger");
-export const SelectValueText = withContext(Select.ValueText, "valueText");
+export const SelectPositioner = withContext(Select.Positioner, "positioner", {
+  baseComponent: true
+});
+export const SelectTrigger = withContext(Select.Trigger, "trigger", {
+  baseComponent: true
+});
+export const SelectValueText = withContext(Select.ValueText, "valueText", {
+  baseComponent: true
+});