@ndla/primitives 0.0.18 → 0.0.20

package/es/Hero.js

@@ -0,0 +1,108 @@
+/**
+ * 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 { ark } from "@ark-ui/react";
+import { sva } from "@ndla/styled-system/css";
+import { createStyleContext } from "./createStyleContext";
+const heroRecipe = sva({
+  slots: ["root", "background", "content"],
+  base: {
+    root: {
+      width: "100%",
+      position: "relative",
+      zIndex: "base"
+    },
+    background: {
+      height: "350px",
+      width: "100%",
+      zIndex: "hide",
+      overflow: "hidden",
+      clipPath: "polygon(0 0, 100% 0, 100% 65%, 0 100%)"
+    },
+    content: {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "flex-end",
+      paddingBlock: "xsmall",
+      tablet: {
+        paddingBlockStart: "xxlarge"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    absolute: true
+  },
+  variants: {
+    absolute: {
+      true: {
+        background: {
+          position: "absolute"
+        }
+      }
+    },
+    variant: {
+      primary: {
+        background: {
+          background: "primary"
+        },
+        content: {
+          color: "text.onAction"
+        }
+      },
+      brand2Strong: {
+        background: {
+          // TODO: This is not a semantic token.
+          background: "blue.800"
+        },
+        content: {
+          color: "text.onAction"
+        }
+      },
+      brand2: {
+        background: {
+          background: "surface.brand.2"
+        }
+      },
+      brand1: {
+        background: {
+          background: "surface.brand.1"
+        }
+      },
+      brand1Subtle: {
+        background: {
+          background: "surface.brand.1.subtle"
+        }
+      },
+      neutral: {
+        background: {
+          background: "surface.infoSubtle"
+        }
+      },
+      brand4: {
+        background: {
+          // TODO: This needs a proper color...
+          background: "surface.brand.4"
+        }
+      }
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = createStyleContext(heroRecipe);
+export const Hero = withProvider(ark.div, "root", {
+  baseComponent: true
+});
+export const HeroBackground = withContext(ark.div, "background", {
+  baseComponent: true
+});
+export const HeroContent = withContext(ark.div, "content", {
+  baseComponent: true
+});

package/es/Select.js

@@ -217,4 +217,7 @@ export const SelectTrigger = withContext(Select.Trigger, "trigger", {
 });
 export const SelectValueText = withContext(Select.ValueText, "valueText", {
   baseComponent: true
+});
+export const SelectList = withContext(Select.List, "list", {
+  baseComponent: true
 });

package/es/Tabs.js

@@ -6,12 +6,14 @@
  *
  */
 
-import { Tabs, tabsAnatomy } from "@ark-ui/react";
+import { Tabs } from "@ark-ui/react";
 import { cx, sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "./createStyleContext";
 import { jsx as _jsx } from "react/jsx-runtime";
 const tabsRecipe = sva({
-  slots: tabsAnatomy.keys(),
+  // TODO: This still doesn't work. Need to figure out why we need to pass keys manually.
+  // slots: tabsAnatomy.keys(),
+  slots: ["root", "list", "trigger", "content", "indicator"],
   base: {
     root: {
       position: "relative",
@@ -28,7 +30,7 @@ const tabsRecipe = sva({
       position: "relative",
       display: "flex",
       flexShrink: "0",
-      overflow: "auto",
+      flexWrap: "wrap",
       _horizontal: {
         flexDirection: "row"
       },
@@ -106,10 +108,9 @@ const tabsRecipe = sva({
         },
         indicator: {
           background: "transparent",
-          outline: "4px solid",
+          outline: "3px solid",
           outlineColor: "stroke.default",
-          pointerEvents: "none",
-          outlineOffset: "-4px",
+          outlineOffset: "-3px",
           _peerFocusVisible: {
             height: "var(--height)",
             width: "var(--width)",
@@ -121,14 +122,17 @@ const tabsRecipe = sva({
             }
           },
           _horizontal: {
-            bottom: "0",
-            height: "2",
+            top: "calc(var(--top) + var(--height) - 6px)",
+            _peerFocusVisible: {
+              top: "var(--top)"
+            },
+            height: "3",
             width: "var(--width)"
           },
           _vertical: {
             height: "var(--height)",
             left: "0",
-            width: "2"
+            width: "3"
           }
         },
         content: {

package/es/index.js

@@ -13,7 +13,7 @@ export { BlockQuote } from "./BlockQuote";
 export { Button, IconButton, buttonBaseRecipe, buttonRecipe, iconButtonRecipe } from "./Button";
 export { CardRoot, CardHeading, CardContent, CardImage } from "./Card/Card";
 export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, CheckboxGroup, CheckboxHiddenInput } from "./Checkbox";
-export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger } from "./Combobox";
+export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, ComboboxList } from "./Combobox";
 export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody } from "./Dialog";
 export { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
 export { FieldRoot } from "./Field";
@@ -21,6 +21,7 @@ export { FieldErrorMessage } from "./FieldErrorMessage";
 export { FieldHelper } from "./FieldHelper";
 export { Figure } from "./Figure";
 export { FramedContent } from "./FramedContent";
+export { Hero, HeroBackground, HeroContent } from "./Hero";
 export { Picture, Img, Image, makeSrcQueryString, getSrcSet } from "./Image";
 export { Input, FieldInput, InputContainer, TextArea, FieldTextArea } from "./Input";
 export { Label, FieldLabel } from "./Label";
@@ -30,7 +31,7 @@ export { NdlaLogoEn, NdlaLogoNb, NdlaLogoText } from "./NdlaLogo";
 export { PaginationRoot, PaginationItem, PaginationEllipsis, PaginationPrevTrigger, PaginationNextTrigger } from "./Pagination";
 export { PopoverRoot, PopoverAnchor, PopoverArrowStandalone, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContentStandalone, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger } from "./Popover";
 export { RadioGroupRoot, RadioGroupIndicator, RadioGroupItemControl, RadioGroupItem, RadioGroupItemText, RadioGroupLabel, RadioGroupItemHiddenInput } from "./RadioGroup";
-export { SelectRoot, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItemGroupLabel, SelectItemGroup, SelectItemIndicator, SelectItem, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText } from "./Select";
+export { SelectRoot, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItemGroupLabel, SelectItemGroup, SelectItemIndicator, SelectItem, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, SelectList } from "./Select";
 export { Skeleton } from "./Skeleton";
 export { SliderRoot, SliderControl, SliderTrack, SliderRange, SliderThumb, SliderLabel, SliderHiddenInput } from "./Slider";
 export { Spinner } from "./Spinner";

package/lib/ArticleLists.d.ts

@@ -10,29 +10,74 @@ import { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
 declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     variant: {
         numbers: {
+            counterReset: "level1";
+            "&[data-count='true']": {
+                counterReset: "level1 var(--start, 0)";
+            };
+            marginInline: "small";
             "& > li": {
+                counterIncrement: "level1";
                 _marker: {
-                    content: "counters(list-item, '.') '. '";
+                    content: "counter(level1, decimal) '. '";
+                };
+                "& > ol:not([data-variant='letters'])": {
+                    marginInlineStart: "xlarge";
+                    counterReset: "level2";
+                    "&[data-count='true']": {
+                        counterReset: "level2 var(--start, 0)";
+                    };
+                    "& > li": {
+                        counterIncrement: "level2";
+                        _marker: {
+                            content: "counter(level1, decimal) '.' counter(level2, decimal) '. '";
+                        };
+                        "& > ol:not([data-variant='letters'])": {
+                            marginInlineStart: "xxlarge";
+                            counterReset: "level3";
+                            "&[data-count='true']": {
+                                counterReset: "level3 var(--start, 0)";
+                            };
+                            "& > li": {
+                                counterIncrement: "level3";
+                                _marker: {
+                                    content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '";
+                                };
+                            };
+                            "& > ol:not([data-variant='letters'])": {
+                                counterReset: "level4";
+                                "&[data-count='true']": {
+                                    counterReset: "level4 var(--start, 0)";
+                                };
+                                "& > li": {
+                                    counterIncrement: "level4";
+                                    _marker: {
+                                        content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4,  decimal) '. '";
+                                    };
+                                };
+                            };
+                        };
+                    };
                 };
             };
         };
         letters: {
-            "& ol[data-variant='numbers'] > li": {
-                _marker: {
-                    content: "counter(list-item, numeric) '. '";
-                };
+            counterReset: "level1";
+            "&[data-count='true']": {
+                counterReset: "level1 var(--start, 0)";
             };
-            "& li": {
+            paddingInlineStart: "small";
+            "& > li": {
+                counterIncrement: "level1";
                 _marker: {
-                    content: "counter(list-item, upper-alpha) '. '";
+                    content: "counter(level1, upper-alpha) '. '";
                 };
-                "& > ol > li": {
+                "& > ol[data-variant='letters'] > li": {
                     _marker: {
-                        content: "counter(list-item, lower-alpha) '. '";
+                        content: "counter(level1, lower-alpha) '. '";
                     };
-                    "& li": {
+                    "& > ol[data-variant='letters'] > li": {
                         _marker: {
-                            content: "counter(list-item, lower-roman) '. '";
+                            content: "counter(level1, lower-roman) '. '";
                         };
                     };
                 };

package/lib/ArticleLists.js

@@ -19,9 +19,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const orderedListRecipe = (0, _css.cva)({
   base: {
-    listStyle: "revert",
-    listStylePosition: "inside",
-    paddingInlineStart: "small",
     "& li": {
       marginBlock: "small"
     }
@@ -32,29 +29,74 @@ const orderedListRecipe = (0, _css.cva)({
   variants: {
     variant: {
       numbers: {
+        counterReset: "level1",
+        "&[data-count='true']": {
+          counterReset: "level1 var(--start, 0)"
+        },
+        marginInline: "small",
         "& > li": {
+          counterIncrement: "level1",
           _marker: {
-            content: "counters(list-item, '.') '. '"
+            content: "counter(level1, decimal) '. '"
+          },
+          "& > ol:not([data-variant='letters'])": {
+            marginInlineStart: "xlarge",
+            counterReset: "level2",
+            "&[data-count='true']": {
+              counterReset: "level2 var(--start, 0)"
+            },
+            "& > li": {
+              counterIncrement: "level2",
+              _marker: {
+                content: "counter(level1, decimal) '.' counter(level2, decimal) '. '"
+              },
+              "& > ol:not([data-variant='letters'])": {
+                marginInlineStart: "xxlarge",
+                counterReset: "level3",
+                "&[data-count='true']": {
+                  counterReset: "level3 var(--start, 0)"
+                },
+                "& > li": {
+                  counterIncrement: "level3",
+                  _marker: {
+                    content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '"
+                  }
+                },
+                "& > ol:not([data-variant='letters'])": {
+                  counterReset: "level4",
+                  "&[data-count='true']": {
+                    counterReset: "level4 var(--start, 0)"
+                  },
+                  "& > li": {
+                    counterIncrement: "level4",
+                    _marker: {
+                      content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4,  decimal) '. '"
+                    }
+                  }
+                }
+              }
+            }
           }
         }
       },
       letters: {
-        "& ol[data-variant='numbers'] > li": {
-          _marker: {
-            content: "counter(list-item, numeric) '. '"
-          }
+        counterReset: "level1",
+        "&[data-count='true']": {
+          counterReset: "level1 var(--start, 0)"
         },
-        "& li": {
+        paddingInlineStart: "small",
+        "& > li": {
+          counterIncrement: "level1",
           _marker: {
-            content: "counter(list-item, upper-alpha) '. '"
+            content: "counter(level1, upper-alpha) '. '"
           },
-          "& > ol > li": {
+          "& > ol[data-variant='letters'] > li": {
             _marker: {
-              content: "counter(list-item, lower-alpha) '. '"
+              content: "counter(level1, lower-alpha) '. '"
             },
-            "& li": {
+            "& > ol[data-variant='letters'] > li": {
               _marker: {
-                content: "counter(list-item, lower-roman) '. '"
+                content: "counter(level1, lower-roman) '. '"
               }
             }
           }
@@ -70,21 +112,27 @@ const OrderedList = exports.OrderedList = /*#__PURE__*/(0, _react.forwardRef)((_
   let {
     variant,
     css: cssProp,
+    start,
     ...props
   } = _ref;
+  const style = (0, _react.useMemo)(() => ({
+    "--start": start ? start - 1 : undefined
+  }), [start]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledOrderedList, {
+    "data-variant": variant,
+    "data-count": start !== undefined,
     css: _css.css.raw(orderedListRecipe.raw({
       variant
     }), cssProp),
-    ...props,
-    ref: ref
+    style: style,
+    ref: ref,
+    ...props
   });
 });
 const UnOrderedList = exports.UnOrderedList = (0, _jsx2.styled)("ul", {
   base: {
     listStyle: "revert",
-    listStylePosition: "inside",
-    paddingInlineStart: "small",
+    paddingInlineStart: "medium",
     "& li": {
       marginBlock: "small",
       _marker: {

package/lib/Combobox.d.ts

@@ -88,4 +88,8 @@ export type ComboboxTriggerProps = Combobox.TriggerProps & JsxStyleProps;
 export declare const ComboboxTrigger: import("react").ForwardRefExoticComponent<Combobox.TriggerProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
+export type ComboboxListProps = Combobox.ListProps & JsxStyleProps;
+export declare const ComboboxList: import("react").ForwardRefExoticComponent<Combobox.ListProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/Combobox.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ComboboxTrigger = exports.ComboboxRoot = exports.ComboboxPositioner = exports.ComboboxLabel = exports.ComboboxItemText = exports.ComboboxItemIndicator = exports.ComboboxItemGroupLabel = exports.ComboboxItemGroup = exports.ComboboxItem = exports.ComboboxInput = exports.ComboboxControl = exports.ComboboxContent = exports.ComboboxClearTrigger = void 0;
+exports.ComboboxTrigger = exports.ComboboxRoot = exports.ComboboxPositioner = exports.ComboboxList = exports.ComboboxLabel = exports.ComboboxItemText = exports.ComboboxItemIndicator = exports.ComboboxItemGroupLabel = exports.ComboboxItemGroup = exports.ComboboxItem = exports.ComboboxInput = exports.ComboboxControl = exports.ComboboxContent = exports.ComboboxClearTrigger = void 0;
 var _react = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _createStyleContext = require("./createStyleContext");
@@ -256,4 +256,7 @@ const ComboboxPositioner = exports.ComboboxPositioner = withContext(_react.Combo
 });
 const ComboboxTrigger = exports.ComboboxTrigger = withContext(_react.Combobox.Trigger, "trigger", {
   baseComponent: true
+});
+const ComboboxList = exports.ComboboxList = withContext(_react.Combobox.List, "list", {
+  baseComponent: true
 });

package/lib/Hero.d.ts

@@ -0,0 +1,80 @@
+/**
+ * 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 { type HTMLArkProps } from "@ark-ui/react";
+import { type RecipeVariantProps } from "@ndla/styled-system/css";
+import { type JsxStyleProps } from "@ndla/styled-system/types";
+declare const heroRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"content" | "root" | "background", {
+    absolute: {
+        true: {
+            background: {
+                position: "absolute";
+            };
+        };
+    };
+    variant: {
+        primary: {
+            background: {
+                background: "primary";
+            };
+            content: {
+                color: "text.onAction";
+            };
+        };
+        brand2Strong: {
+            background: {
+                background: "blue.800";
+            };
+            content: {
+                color: "text.onAction";
+            };
+        };
+        brand2: {
+            background: {
+                background: "surface.brand.2";
+            };
+        };
+        brand1: {
+            background: {
+                background: "surface.brand.1";
+            };
+        };
+        brand1Subtle: {
+            background: {
+                background: "surface.brand.1.subtle";
+            };
+        };
+        neutral: {
+            background: {
+                background: "surface.infoSubtle";
+            };
+        };
+        brand4: {
+            background: {
+                background: "surface.brand.4";
+            };
+        };
+    };
+}>;
+export type HeroVariantProps = RecipeVariantProps<typeof heroRecipe>;
+export type HeroVariant = NonNullable<HeroVariantProps>["variant"];
+export type HeroProps = HTMLArkProps<"div"> & JsxStyleProps & HeroVariantProps;
+export declare const Hero: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & {
+    absolute?: boolean | undefined;
+    variant?: "primary" | "neutral" | "brand1" | "brand2" | "brand2Strong" | "brand1Subtle" | "brand4" | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export type HeroBackgroundProps = HTMLArkProps<"div"> & JsxStyleProps;
+export declare const HeroBackground: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export type HeroContentProps = HTMLArkProps<"div"> & JsxStyleProps;
+export declare const HeroContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib/Hero.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeroContent = exports.HeroBackground = exports.Hero = void 0;
+var _react = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+var _createStyleContext = require("./createStyleContext");
+/**
+ * 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 heroRecipe = (0, _css.sva)({
+  slots: ["root", "background", "content"],
+  base: {
+    root: {
+      width: "100%",
+      position: "relative",
+      zIndex: "base"
+    },
+    background: {
+      height: "350px",
+      width: "100%",
+      zIndex: "hide",
+      overflow: "hidden",
+      clipPath: "polygon(0 0, 100% 0, 100% 65%, 0 100%)"
+    },
+    content: {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "flex-end",
+      paddingBlock: "xsmall",
+      tablet: {
+        paddingBlockStart: "xxlarge"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    absolute: true
+  },
+  variants: {
+    absolute: {
+      true: {
+        background: {
+          position: "absolute"
+        }
+      }
+    },
+    variant: {
+      primary: {
+        background: {
+          background: "primary"
+        },
+        content: {
+          color: "text.onAction"
+        }
+      },
+      brand2Strong: {
+        background: {
+          // TODO: This is not a semantic token.
+          background: "blue.800"
+        },
+        content: {
+          color: "text.onAction"
+        }
+      },
+      brand2: {
+        background: {
+          background: "surface.brand.2"
+        }
+      },
+      brand1: {
+        background: {
+          background: "surface.brand.1"
+        }
+      },
+      brand1Subtle: {
+        background: {
+          background: "surface.brand.1.subtle"
+        }
+      },
+      neutral: {
+        background: {
+          background: "surface.infoSubtle"
+        }
+      },
+      brand4: {
+        background: {
+          // TODO: This needs a proper color...
+          background: "surface.brand.4"
+        }
+      }
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = (0, _createStyleContext.createStyleContext)(heroRecipe);
+const Hero = exports.Hero = withProvider(_react.ark.div, "root", {
+  baseComponent: true
+});
+const HeroBackground = exports.HeroBackground = withContext(_react.ark.div, "background", {
+  baseComponent: true
+});
+const HeroContent = exports.HeroContent = withContext(_react.ark.div, "content", {
+  baseComponent: true
+});

package/lib/Select.d.ts

@@ -49,3 +49,6 @@ export declare const SelectTrigger: import("react").ForwardRefExoticComponent<Se
 export declare const SelectValueText: import("react").ForwardRefExoticComponent<Select.ValueTextProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const SelectList: import("react").ForwardRefExoticComponent<Select.ListProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;

package/lib/Select.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectValueText = exports.SelectTrigger = exports.SelectRoot = exports.SelectPositioner = exports.SelectLabel = exports.SelectItemText = exports.SelectItemIndicator = exports.SelectItemGroupLabel = exports.SelectItemGroup = exports.SelectItem = exports.SelectIndicator = exports.SelectControl = exports.SelectContent = exports.SelectClearTrigger = void 0;
+exports.SelectValueText = exports.SelectTrigger = exports.SelectRoot = exports.SelectPositioner = exports.SelectList = exports.SelectLabel = exports.SelectItemText = exports.SelectItemIndicator = exports.SelectItemGroupLabel = exports.SelectItemGroup = exports.SelectItem = exports.SelectIndicator = exports.SelectControl = exports.SelectContent = exports.SelectClearTrigger = void 0;
 var _react = require("react");
 var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
@@ -224,4 +224,7 @@ const SelectTrigger = exports.SelectTrigger = withContext(_react2.Select.Trigger
 });
 const SelectValueText = exports.SelectValueText = withContext(_react2.Select.ValueText, "valueText", {
   baseComponent: true
+});
+const SelectList = exports.SelectList = withContext(_react2.Select.List, "list", {
+  baseComponent: true
 });