@strapi/design-system 1.8.2 → 1.10.0-alpha.0

package/dist/Checkbox/Checkbox.mjs

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import styled from 'styled-components';
+import { useId } from '../hooks/useId.mjs';
+import { useField } from '../Field/FieldContext.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+import { BaseCheckbox } from '../BaseCheckbox/BaseCheckbox.mjs';
+import { Field } from '../Field/Field.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Box } from '../Box/Box.mjs';
+import { FieldHint } from '../Field/FieldHint.mjs';
+import { FieldError } from '../Field/FieldError.mjs';
+
+const CheckboxLabel = styled(Typography) `
+  display: flex;
+  align-items: flex-start;
+  * {
+    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  }
+`;
+const CheckboxTick = React.forwardRef((props, forwardedRef) => {
+    const { id } = useField();
+    return jsx(BaseCheckbox, { ref: forwardedRef, id: id, ...props });
+});
+const Checkbox = React.forwardRef(({ children, disabled = false, id, hint, error, ...props }, forwardedRef) => {
+    const generatedId = useId(id);
+    let ariaDescription;
+    if (error) {
+        ariaDescription = `${generatedId}-error`;
+    }
+    else if (hint) {
+        ariaDescription = `${generatedId}-hint`;
+    }
+    return (jsx(Field, { id: generatedId, hint: hint, error: error, children: jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsxs(CheckboxLabel, { as: "label", textColor: "neutral800", disabled: disabled, children: [jsx(CheckboxTick, { ref: forwardedRef, disabled: disabled, "aria-describedby": ariaDescription, ...props }), jsx(Box, { paddingLeft: 2, children: children })] }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }));
+});
+
+export { Checkbox };

package/dist/Checkbox/index.js

@@ -1,4 +1,9 @@
-import { Checkbox as r } from "./Checkbox.js";
-export {
-  r as Checkbox
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Checkbox = require('./Checkbox.js');
+
+
+
+exports.Checkbox = Checkbox.Checkbox;

package/dist/Checkbox/index.mjs

@@ -0,0 +1 @@
+export { Checkbox } from './Checkbox.mjs';

package/dist/Combobox/Combobox.js

@@ -1,65 +1,131 @@
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import * as m from "react";
-import { Cross as me, CarretDown as ge } from "@strapi/icons";
-import { Combobox as n } from "@strapi/ui-primitives";
-import l from "styled-components";
-import { stripReactIdOfColon as be } from "../helpers/strings.js";
-import { useControllableState as I } from "../hooks/useControllableState.js";
-import { useId as w } from "../hooks/useId.js";
-import { useIntersection as $e } from "../hooks/useIntersection.js";
-import { getThemeSize as Ce, inputFocusStyle as xe } from "../themes/utils.js";
-import { Loader as Ie } from "../Loader/Loader.js";
-import { Box as R } from "../Box/Box.js";
-import { Typography as h } from "../Typography/Typography.js";
-import { Flex as g } from "../Flex/Flex.js";
-import { Field as we } from "../Field/Field.js";
-import { FieldLabel as Re } from "../Field/FieldLabel.js";
-import { FieldHint as ve } from "../Field/FieldHint.js";
-import { FieldError as ye } from "../Field/FieldError.js";
-const ke = ({ allowCustomValue: e, autocomplete: o, children: u, className: a, clearLabel: s = "clear", creatable: i = !1, createMessage: b = (f) => `Create "${f}"`, defaultFilterValue: p, defaultTextValue: y, defaultOpen: W = !1, open: L, onOpenChange: U, disabled: $ = !1, error: k, filterValue: A, hasMoreItems: G = !1, id: V, isPrintableCharacter: J, loading: C = !1, loadingMessage: K = "Loading content...", noOptionsMessage: M = () => "No results found", onChange: T, onClear: x, onCreateOption: F, onFilterValueChange: Q, onInputChange: O, onTextValueChange: X, onLoadMore: z, placeholder: Y = "Select or enter a value", required: Z = !1, size: _ = "M", startIcon: B, textValue: ee, value: P, ...re }) => {
-  const [f, oe] = I({
-    prop: L,
-    defaultProp: W,
-    onChange: U
-  }), [d, S] = I({
-    prop: ee,
-    defaultProp: e && !y ? P : y,
-    onChange: X
-  }), [te, j] = I({
-    prop: A,
-    defaultProp: p,
-    onChange: Q
-  }), E = m.useRef(null), q = m.useRef(null), ne = m.useRef(null), ie = (t) => {
-    x && !$ && (S(""), j(""), x(t), q.current.focus());
-  }, le = (t) => {
-    oe(t);
-  }, ae = (t) => {
-    S(t);
-  }, se = (t) => {
-    j(t);
-  }, de = (t) => {
-    O && O(t);
-  }, ce = (t) => {
-    T && T(t);
-  }, ue = (t) => {
-    z && G && !C && z(t);
-  }, N = () => {
-    F && d && F(d);
-  }, D = w(V), he = w(), H = `intersection-${be(he)}`;
-  $e(E, ue, {
-    selectorToWatch: `#${H}`,
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const icons = require('@strapi/icons');
+const uiPrimitives = require('@strapi/ui-primitives');
+const styled = require('styled-components');
+const strings = require('../helpers/strings.js');
+const useComposeRefs = require('../hooks/useComposeRefs.js');
+const useControllableState = require('../hooks/useControllableState.js');
+const useId = require('../hooks/useId.js');
+const useIntersection = require('../hooks/useIntersection.js');
+const Loader = require('../Loader/Loader.js');
+const utils = require('../themes/utils.js');
+const Flex = require('../Flex/Flex.js');
+const Box = require('../Box/Box.js');
+const Typography = require('../Typography/Typography.js');
+const Field = require('../Field/Field.js');
+const FieldLabel = require('../Field/FieldLabel.js');
+const FieldHint = require('../Field/FieldHint.js');
+const FieldError = require('../Field/FieldError.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespace(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const ComboboxInput = React__namespace.forwardRef(({ allowCustomValue, autocomplete, children, className, clearLabel = 'clear', creatable = false, createMessage = (value) => `Create "${value}"`, defaultFilterValue, defaultTextValue, defaultOpen = false, open, onOpenChange, disabled = false, error, filterValue, hasMoreItems = false, id, isPrintableCharacter, loading = false, loadingMessage = 'Loading content...', noOptionsMessage = () => 'No results found', onChange, onClear, onCreateOption, onFilterValueChange, onInputChange, onTextValueChange, onLoadMore, placeholder = 'Select or enter a value', required = false, size = 'M', startIcon, textValue, value, ...restProps }, forwardedRef) => {
+    const [internalIsOpen, setInternalIsOpen] = useControllableState.useControllableState({
+        prop: open,
+        defaultProp: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const [internalTextValue, setInternalTextValue] = useControllableState.useControllableState({
+        prop: textValue,
+        defaultProp: allowCustomValue && !defaultTextValue ? value : defaultTextValue,
+        onChange: onTextValueChange,
+    });
+    const [internalFilterValue, setInternalFilterValue] = useControllableState.useControllableState({
+        prop: filterValue,
+        defaultProp: defaultFilterValue,
+        onChange: onFilterValueChange,
+    });
     /**
-     * We need to know when the select is open because only then will viewportRef
-     * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
+     * Used for the intersection observer
      */
-    skipWhen: !f
-  });
-  const pe = `${D}-hint`, fe = `${D}-error`;
-  return c(n.Root, { autocomplete: o || (i ? "list" : "both"), onOpenChange: le, open: f, onTextValueChange: ae, textValue: d, allowCustomValue: i || e, disabled: $, required: Z, value: P, onValueChange: ce, filterValue: te, onFilterValueChange: se, isPrintableCharacter: J, children: [c(Fe, { $hasError: !!k, $size: _, className: a, children: [c(g, { flex: "1", as: "span", gap: 3, children: [B ? r(R, { as: "span", "aria-hidden": !0, children: B }) : null, r(Oe, { placeholder: Y, id: V, "aria-invalid": !!k, "aria-describedby": `${pe} ${fe}`, onChange: de, ref: q, ...re })] }), c(g, { as: "span", gap: 3, children: [d && x ? r(Te, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: ie, "aria-disabled": $, "aria-label": s, title: s, ref: ne, children: r(me, {}) }) : null, r(ze, { children: r(ge, {}) })] })] }), r(n.Portal, { children: r(Be, { sideOffset: 4, children: c(Pe, { ref: E, children: [u, i ? r(n.CreateItem, { onPointerUp: N, onClick: N, asChild: !0, children: r(v, { children: r(h, { children: b(d ?? "") }) }) }) : null, !i && !C ? r(n.NoValueFound, { asChild: !0, children: r(v, { $hasHover: !1, children: r(h, { children: M(d ?? "") }) }) }) : null, C ? r(g, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: r(Ie, { small: !0, children: K }) }) : null, r(R, { id: H, width: "100%", height: "1px" })] }) }) })] });
-}, Ve = ({ error: e, hint: o, id: u, label: a, labelAction: s, required: i = !1, ...b }) => {
-  const p = w(u);
-  return r(we, { hint: o, error: e, id: p, required: i, children: c(g, { direction: "column", alignItems: "stretch", gap: 1, children: [a ? r(Re, { action: s, children: a }) : null, r(ke, { id: p, error: e, required: i, ...b }), r(ve, {}), r(ye, {})] }) });
-}, Ye = (e) => r(Ve, { ...e, creatable: !0 }), Te = l(R)`
+    const viewportRef = React__namespace.useRef(null);
+    const triggerRef = React__namespace.useRef(null);
+    const composedTriggerRefs = useComposeRefs.useComposedRefs(triggerRef, forwardedRef);
+    const clearRef = React__namespace.useRef(null);
+    const handleClearClick = (e) => {
+        if (onClear && !disabled) {
+            setInternalTextValue('');
+            setInternalFilterValue('');
+            onClear(e);
+            triggerRef.current.focus();
+        }
+    };
+    const handleOpenChange = (open) => {
+        setInternalIsOpen(open);
+    };
+    const handleTextValueChange = (textValue) => {
+        setInternalTextValue(textValue);
+    };
+    const handleFilterValueChange = (filterValue) => {
+        setInternalFilterValue(filterValue);
+    };
+    const handleInputChange = (e) => {
+        if (onInputChange) {
+            onInputChange(e);
+        }
+    };
+    const handleChange = (value) => {
+        if (onChange) {
+            onChange(value);
+        }
+    };
+    const handleReachEnd = (entry) => {
+        if (onLoadMore && hasMoreItems && !loading) {
+            onLoadMore(entry);
+        }
+    };
+    const handleCreateItemClick = () => {
+        if (onCreateOption && internalTextValue) {
+            onCreateOption(internalTextValue);
+        }
+    };
+    const generatedId = useId.useId(id);
+    const generatedIntersectionId = useId.useId();
+    const intersectionId = `intersection-${strings.stripReactIdOfColon(generatedIntersectionId)}`;
+    useIntersection.useIntersection(viewportRef, handleReachEnd, {
+        selectorToWatch: `#${intersectionId}`,
+        /**
+         * We need to know when the select is open because only then will viewportRef
+         * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
+         */
+        skipWhen: !internalIsOpen,
+    });
+    const hintId = `${generatedId}-hint`;
+    const errorId = `${generatedId}-error`;
+    return (jsxRuntime.jsxs(uiPrimitives.Combobox.Root, { autocomplete: autocomplete || (creatable ? 'list' : 'both'), onOpenChange: handleOpenChange, open: internalIsOpen, onTextValueChange: handleTextValueChange, textValue: internalTextValue, allowCustomValue: creatable || allowCustomValue, disabled: disabled, required: required, value: value, onValueChange: handleChange, filterValue: internalFilterValue, onFilterValueChange: handleFilterValueChange, isPrintableCharacter: isPrintableCharacter, children: [jsxRuntime.jsxs(Trigger, { "$hasError": Boolean(error), "$size": size, className: className, children: [jsxRuntime.jsxs(Flex.Flex, { flex: "1", as: "span", gap: 3, children: [startIcon ? (jsxRuntime.jsx(Box.Box, { as: "span", "aria-hidden": true, children: startIcon })) : null, jsxRuntime.jsx(TextInput, { placeholder: placeholder, id: id, "aria-invalid": Boolean(error), "aria-describedby": `${hintId} ${errorId}`, onChange: handleInputChange, ref: composedTriggerRefs, ...restProps })] }), jsxRuntime.jsxs(Flex.Flex, { as: "span", gap: 3, children: [internalTextValue && onClear ? (jsxRuntime.jsx(IconBox, { as: "button", hasRadius: true, background: "transparent", type: "button", onClick: handleClearClick, "aria-disabled": disabled, "aria-label": clearLabel, title: clearLabel, ref: clearRef, children: jsxRuntime.jsx(icons.Cross, {}) })) : null, jsxRuntime.jsx(DownIcon, { children: jsxRuntime.jsx(icons.CarretDown, {}) })] })] }), jsxRuntime.jsx(uiPrimitives.Combobox.Portal, { children: jsxRuntime.jsx(Content, { sideOffset: 4, children: jsxRuntime.jsxs(Viewport, { ref: viewportRef, children: [children, creatable ? (jsxRuntime.jsx(uiPrimitives.Combobox.CreateItem, { onPointerUp: handleCreateItemClick, onClick: handleCreateItemClick, asChild: true, children: jsxRuntime.jsx(OptionBox, { children: jsxRuntime.jsx(Typography.Typography, { children: createMessage(internalTextValue ?? '') }) }) })) : null, !creatable && !loading ? (jsxRuntime.jsx(uiPrimitives.Combobox.NoValueFound, { asChild: true, children: jsxRuntime.jsx(OptionBox, { "$hasHover": false, children: jsxRuntime.jsx(Typography.Typography, { children: noOptionsMessage(internalTextValue ?? '') }) }) })) : null, loading ? (jsxRuntime.jsx(Flex.Flex, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: jsxRuntime.jsx(Loader.Loader, { small: true, children: loadingMessage }) })) : null, jsxRuntime.jsx(Box.Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) })] }));
+});
+const Combobox = React__namespace.forwardRef(({ error, hint, id, label, labelAction, required = false, ...restProps }, forwardedRef) => {
+    const generatedId = useId.useId(id);
+    return (jsxRuntime.jsx(Field.Field, { hint: hint, error: error, id: generatedId, required: required, children: jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label ? jsxRuntime.jsx(FieldLabel.FieldLabel, { action: labelAction, children: label }) : null, jsxRuntime.jsx(ComboboxInput, { ref: forwardedRef, id: generatedId, error: error, required: required, ...restProps }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
+});
+const CreatableCombobox = (props) => jsxRuntime.jsx(Combobox, { ...props, creatable: true });
+const IconBox = styled__default.default(Box.Box) `
   border: none;
 
   svg {
@@ -68,25 +134,26 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: u, className: a, c
   }
 
   svg path {
-    fill: ${({ theme: e }) => e.colors.neutral600};
+    fill: ${({ theme }) => theme.colors.neutral600};
   }
-`, Fe = l(n.Trigger)`
+`;
+const Trigger = styled__default.default(uiPrimitives.Combobox.Trigger) `
   position: relative;
-  border: 1px solid ${({ theme: e, $hasError: o }) => o ? e.colors.danger600 : e.colors.neutral200};
-  padding-right: ${({ theme: e }) => e.spaces[3]};
-  padding-left: ${({ theme: e }) => e.spaces[3]};
-  border-radius: ${({ theme: e }) => e.borderRadius};
-  background: ${({ theme: e }) => e.colors.neutral0};
+  border: 1px solid ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};
+  padding-right: ${({ theme }) => theme.spaces[3]};
+  padding-left: ${({ theme }) => theme.spaces[3]};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: ${({ theme }) => theme.colors.neutral0};
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: ${({ theme: e }) => e.spaces[4]};
-  min-height: ${({ theme: e, $size: o }) => Ce("input")({ theme: e, size: o })};
+  gap: ${({ theme }) => theme.spaces[4]};
+  min-height: ${({ theme, $size }) => utils.getThemeSize('input')({ theme, size: $size })};
 
   &[data-disabled] {
-    color: ${({ theme: e }) => e.colors.neutral600};
-    background: ${({ theme: e }) => e.colors.neutral150};
+    color: ${({ theme }) => theme.colors.neutral600};
+    background: ${({ theme }) => theme.colors.neutral150};
     cursor: not-allowed;
   }
 
@@ -95,11 +162,12 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: u, className: a, c
     outline: none;
   }
 
-  ${({ theme: e, $hasError: o }) => xe()({ theme: e, hasError: o })};
-`, Oe = l(n.TextInput)`
+  ${({ theme, $hasError }) => utils.inputFocusStyle()({ theme, hasError: $hasError })};
+`;
+const TextInput = styled__default.default(uiPrimitives.Combobox.TextInput) `
   width: 100%;
   font-size: ${14 / 16}rem;
-  color: ${({ theme: e }) => e.colors.neutral800};
+  color: ${({ theme }) => theme.colors.neutral800};
   padding: 0;
   border: none;
   background-color: transparent;
@@ -111,44 +179,51 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: u, className: a, c
   &[aria-disabled='true'] {
     cursor: inherit;
   }
-`, ze = l(n.Icon)`
+`;
+const DownIcon = styled__default.default(uiPrimitives.Combobox.Icon) `
   & > svg {
     width: ${6 / 16}rem;
 
     & > path {
-      fill: ${({ theme: e }) => e.colors.neutral600};
+      fill: ${({ theme }) => theme.colors.neutral600};
     }
   }
 
   &[aria-disabled='true'] {
     cursor: inherit;
   }
-`, Be = l(n.Content)`
-  background: ${({ theme: e }) => e.colors.neutral0};
-  box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
-  border: 1px solid ${({ theme: e }) => e.colors.neutral150};
-  border-radius: ${({ theme: e }) => e.borderRadius};
+`;
+const Content = styled__default.default(uiPrimitives.Combobox.Content) `
+  background: ${({ theme }) => theme.colors.neutral0};
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  border: 1px solid ${({ theme }) => theme.colors.neutral150};
+  border-radius: ${({ theme }) => theme.borderRadius};
   width: var(--radix-combobox-trigger-width);
   /* This is from the design-system figma file. */
   max-height: 15rem;
-  z-index: ${({ theme: e }) => e.zIndices[1]};
-`, Pe = l(n.Viewport)`
-  padding: ${({ theme: e }) => e.spaces[1]};
-`, Ze = m.forwardRef(({ children: e, value: o, disabled: u, textValue: a, ...s }, i) => r(n.ComboboxItem, { asChild: !0, value: o, disabled: u, textValue: a, children: r(v, { ref: i, ...s, children: r(n.ItemText, { asChild: !0, children: r(h, { children: e }) }) }) })), v = l.div`
+  z-index: ${({ theme }) => theme.zIndices[1]};
+`;
+const Viewport = styled__default.default(uiPrimitives.Combobox.Viewport) `
+  padding: ${({ theme }) => theme.spaces[1]};
+`;
+const Option = React__namespace.forwardRef(({ children, value, disabled, textValue, ...props }, ref) => {
+    return (jsxRuntime.jsx(uiPrimitives.Combobox.ComboboxItem, { asChild: true, value: value, disabled: disabled, textValue: textValue, children: jsxRuntime.jsx(OptionBox, { ref: ref, ...props, children: jsxRuntime.jsx(uiPrimitives.Combobox.ItemText, { asChild: true, children: jsxRuntime.jsx(Typography.Typography, { children: children }) }) }) }));
+});
+const OptionBox = styled__default.default.div `
   width: 100%;
   border: none;
   text-align: left;
   outline-offset: -3px;
-  padding: ${({ theme: e }) => e.spaces[2]} ${({ theme: e }) => e.spaces[4]};
-  background-color: ${({ theme: e }) => e.colors.neutral0};
-  border-radius: ${({ theme: e }) => e.borderRadius};
+  padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
+  background-color: ${({ theme }) => theme.colors.neutral0};
+  border-radius: ${({ theme }) => theme.borderRadius};
   user-select: none;
 
   &[data-state='checked'] {
-    background-color: ${({ theme: e }) => e.colors.primary100};
+    background-color: ${({ theme }) => theme.colors.primary100};
 
-    ${h} {
-      color: ${({ theme: e }) => e.colors.primary600};
+    ${Typography.Typography} {
+      color: ${({ theme }) => theme.colors.primary600};
       font-weight: bold;
     }
   }
@@ -156,20 +231,19 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: u, className: a, c
   &:hover,
   &[data-highlighted] {
     outline: none;
-    background-color: ${({ theme: e, $hasHover: o = !0 }) => o ? e.colors.primary100 : e.colors.neutral0};
+    background-color: ${({ theme, $hasHover = true }) => ($hasHover ? theme.colors.primary100 : theme.colors.neutral0)};
   }
 
   &[data-highlighted] {
-    ${h} {
-      color: ${({ theme: e }) => e.colors.primary600};
+    ${Typography.Typography} {
+      color: ${({ theme }) => theme.colors.primary600};
       font-weight: bold;
     }
   }
 `;
-export {
-  Ve as Combobox,
-  ke as ComboboxInput,
-  Ye as CreatableCombobox,
-  Ze as Option,
-  v as OptionBox
-};
+
+exports.Combobox = Combobox;
+exports.ComboboxInput = ComboboxInput;
+exports.CreatableCombobox = CreatableCombobox;
+exports.Option = Option;
+exports.OptionBox = OptionBox;

package/dist/Combobox/Combobox.mjs

@@ -0,0 +1,218 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Cross, CarretDown } from '@strapi/icons';
+import { Combobox as Combobox$1 } from '@strapi/ui-primitives';
+import styled from 'styled-components';
+import { stripReactIdOfColon } from '../helpers/strings.mjs';
+import { useComposedRefs } from '../hooks/useComposeRefs.mjs';
+import { useControllableState } from '../hooks/useControllableState.mjs';
+import { useId } from '../hooks/useId.mjs';
+import { useIntersection } from '../hooks/useIntersection.mjs';
+import { Loader } from '../Loader/Loader.mjs';
+import { getThemeSize, inputFocusStyle } from '../themes/utils.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+import { Field } from '../Field/Field.mjs';
+import { FieldLabel } from '../Field/FieldLabel.mjs';
+import { FieldHint } from '../Field/FieldHint.mjs';
+import { FieldError } from '../Field/FieldError.mjs';
+
+const ComboboxInput = React.forwardRef(({ allowCustomValue, autocomplete, children, className, clearLabel = 'clear', creatable = false, createMessage = (value) => `Create "${value}"`, defaultFilterValue, defaultTextValue, defaultOpen = false, open, onOpenChange, disabled = false, error, filterValue, hasMoreItems = false, id, isPrintableCharacter, loading = false, loadingMessage = 'Loading content...', noOptionsMessage = () => 'No results found', onChange, onClear, onCreateOption, onFilterValueChange, onInputChange, onTextValueChange, onLoadMore, placeholder = 'Select or enter a value', required = false, size = 'M', startIcon, textValue, value, ...restProps }, forwardedRef) => {
+    const [internalIsOpen, setInternalIsOpen] = useControllableState({
+        prop: open,
+        defaultProp: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const [internalTextValue, setInternalTextValue] = useControllableState({
+        prop: textValue,
+        defaultProp: allowCustomValue && !defaultTextValue ? value : defaultTextValue,
+        onChange: onTextValueChange,
+    });
+    const [internalFilterValue, setInternalFilterValue] = useControllableState({
+        prop: filterValue,
+        defaultProp: defaultFilterValue,
+        onChange: onFilterValueChange,
+    });
+    /**
+     * Used for the intersection observer
+     */
+    const viewportRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const composedTriggerRefs = useComposedRefs(triggerRef, forwardedRef);
+    const clearRef = React.useRef(null);
+    const handleClearClick = (e) => {
+        if (onClear && !disabled) {
+            setInternalTextValue('');
+            setInternalFilterValue('');
+            onClear(e);
+            triggerRef.current.focus();
+        }
+    };
+    const handleOpenChange = (open) => {
+        setInternalIsOpen(open);
+    };
+    const handleTextValueChange = (textValue) => {
+        setInternalTextValue(textValue);
+    };
+    const handleFilterValueChange = (filterValue) => {
+        setInternalFilterValue(filterValue);
+    };
+    const handleInputChange = (e) => {
+        if (onInputChange) {
+            onInputChange(e);
+        }
+    };
+    const handleChange = (value) => {
+        if (onChange) {
+            onChange(value);
+        }
+    };
+    const handleReachEnd = (entry) => {
+        if (onLoadMore && hasMoreItems && !loading) {
+            onLoadMore(entry);
+        }
+    };
+    const handleCreateItemClick = () => {
+        if (onCreateOption && internalTextValue) {
+            onCreateOption(internalTextValue);
+        }
+    };
+    const generatedId = useId(id);
+    const generatedIntersectionId = useId();
+    const intersectionId = `intersection-${stripReactIdOfColon(generatedIntersectionId)}`;
+    useIntersection(viewportRef, handleReachEnd, {
+        selectorToWatch: `#${intersectionId}`,
+        /**
+         * We need to know when the select is open because only then will viewportRef
+         * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
+         */
+        skipWhen: !internalIsOpen,
+    });
+    const hintId = `${generatedId}-hint`;
+    const errorId = `${generatedId}-error`;
+    return (jsxs(Combobox$1.Root, { autocomplete: autocomplete || (creatable ? 'list' : 'both'), onOpenChange: handleOpenChange, open: internalIsOpen, onTextValueChange: handleTextValueChange, textValue: internalTextValue, allowCustomValue: creatable || allowCustomValue, disabled: disabled, required: required, value: value, onValueChange: handleChange, filterValue: internalFilterValue, onFilterValueChange: handleFilterValueChange, isPrintableCharacter: isPrintableCharacter, children: [jsxs(Trigger, { "$hasError": Boolean(error), "$size": size, className: className, children: [jsxs(Flex, { flex: "1", as: "span", gap: 3, children: [startIcon ? (jsx(Box, { as: "span", "aria-hidden": true, children: startIcon })) : null, jsx(TextInput, { placeholder: placeholder, id: id, "aria-invalid": Boolean(error), "aria-describedby": `${hintId} ${errorId}`, onChange: handleInputChange, ref: composedTriggerRefs, ...restProps })] }), jsxs(Flex, { as: "span", gap: 3, children: [internalTextValue && onClear ? (jsx(IconBox, { as: "button", hasRadius: true, background: "transparent", type: "button", onClick: handleClearClick, "aria-disabled": disabled, "aria-label": clearLabel, title: clearLabel, ref: clearRef, children: jsx(Cross, {}) })) : null, jsx(DownIcon, { children: jsx(CarretDown, {}) })] })] }), jsx(Combobox$1.Portal, { children: jsx(Content, { sideOffset: 4, children: jsxs(Viewport, { ref: viewportRef, children: [children, creatable ? (jsx(Combobox$1.CreateItem, { onPointerUp: handleCreateItemClick, onClick: handleCreateItemClick, asChild: true, children: jsx(OptionBox, { children: jsx(Typography, { children: createMessage(internalTextValue ?? '') }) }) })) : null, !creatable && !loading ? (jsx(Combobox$1.NoValueFound, { asChild: true, children: jsx(OptionBox, { "$hasHover": false, children: jsx(Typography, { children: noOptionsMessage(internalTextValue ?? '') }) }) })) : null, loading ? (jsx(Flex, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: jsx(Loader, { small: true, children: loadingMessage }) })) : null, jsx(Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) })] }));
+});
+const Combobox = React.forwardRef(({ error, hint, id, label, labelAction, required = false, ...restProps }, forwardedRef) => {
+    const generatedId = useId(id);
+    return (jsx(Field, { hint: hint, error: error, id: generatedId, required: required, children: jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label ? jsx(FieldLabel, { action: labelAction, children: label }) : null, jsx(ComboboxInput, { ref: forwardedRef, id: generatedId, error: error, required: required, ...restProps }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }));
+});
+const CreatableCombobox = (props) => jsx(Combobox, { ...props, creatable: true });
+const IconBox = styled(Box) `
+  border: none;
+
+  svg {
+    height: ${11 / 16}rem;
+    width: ${11 / 16}rem;
+  }
+
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral600};
+  }
+`;
+const Trigger = styled(Combobox$1.Trigger) `
+  position: relative;
+  border: 1px solid ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};
+  padding-right: ${({ theme }) => theme.spaces[3]};
+  padding-left: ${({ theme }) => theme.spaces[3]};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: ${({ theme }) => theme.colors.neutral0};
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.spaces[4]};
+  min-height: ${({ theme, $size }) => getThemeSize('input')({ theme, size: $size })};
+
+  &[data-disabled] {
+    color: ${({ theme }) => theme.colors.neutral600};
+    background: ${({ theme }) => theme.colors.neutral150};
+    cursor: not-allowed;
+  }
+
+  /* Required to ensure the below inputFocusStyles are adhered too */
+  &:focus-visible {
+    outline: none;
+  }
+
+  ${({ theme, $hasError }) => inputFocusStyle()({ theme, hasError: $hasError })};
+`;
+const TextInput = styled(Combobox$1.TextInput) `
+  width: 100%;
+  font-size: ${14 / 16}rem;
+  color: ${({ theme }) => theme.colors.neutral800};
+  padding: 0;
+  border: none;
+  background-color: transparent;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: inherit;
+  }
+`;
+const DownIcon = styled(Combobox$1.Icon) `
+  & > svg {
+    width: ${6 / 16}rem;
+
+    & > path {
+      fill: ${({ theme }) => theme.colors.neutral600};
+    }
+  }
+
+  &[aria-disabled='true'] {
+    cursor: inherit;
+  }
+`;
+const Content = styled(Combobox$1.Content) `
+  background: ${({ theme }) => theme.colors.neutral0};
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  border: 1px solid ${({ theme }) => theme.colors.neutral150};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  width: var(--radix-combobox-trigger-width);
+  /* This is from the design-system figma file. */
+  max-height: 15rem;
+  z-index: ${({ theme }) => theme.zIndices[1]};
+`;
+const Viewport = styled(Combobox$1.Viewport) `
+  padding: ${({ theme }) => theme.spaces[1]};
+`;
+const Option = React.forwardRef(({ children, value, disabled, textValue, ...props }, ref) => {
+    return (jsx(Combobox$1.ComboboxItem, { asChild: true, value: value, disabled: disabled, textValue: textValue, children: jsx(OptionBox, { ref: ref, ...props, children: jsx(Combobox$1.ItemText, { asChild: true, children: jsx(Typography, { children: children }) }) }) }));
+});
+const OptionBox = styled.div `
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline-offset: -3px;
+  padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
+  background-color: ${({ theme }) => theme.colors.neutral0};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  user-select: none;
+
+  &[data-state='checked'] {
+    background-color: ${({ theme }) => theme.colors.primary100};
+
+    ${Typography} {
+      color: ${({ theme }) => theme.colors.primary600};
+      font-weight: bold;
+    }
+  }
+
+  &:hover,
+  &[data-highlighted] {
+    outline: none;
+    background-color: ${({ theme, $hasHover = true }) => ($hasHover ? theme.colors.primary100 : theme.colors.neutral0)};
+  }
+
+  &[data-highlighted] {
+    ${Typography} {
+      color: ${({ theme }) => theme.colors.primary600};
+      font-weight: bold;
+    }
+  }
+`;
+
+export { Combobox, ComboboxInput, CreatableCombobox, Option, OptionBox };