@strapi/design-system 1.19.0-typescript.0 → 2.0.0-beta.1

package/dist/RawTable/RawTbody.mjs

@@ -1,18 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Children, isValidElement, cloneElement } from 'react';
-
-const RawTbody = ({ children, ...props }) => {
-    /**
-     * aria-rowindex is 1-based: we have to start from 1
-     * since the <tr><th></th></tr> elements count as 1 row, we have to increment the index by 2 (because of the base 1 AND the th)
-     */
-    const childrenClone = Children.toArray(children).map((child, index) => {
-        if (isValidElement(child)) {
-            return cloneElement(child, { 'aria-rowindex': index + 2 });
-        }
-        return child;
-    });
-    return jsx("tbody", { ...props, children: childrenClone });
-};
-
-export { RawTbody };

package/dist/RawTable/RawThead.js

@@ -1,21 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-
-const RawThead = ({ children, ...props }) => {
-    /**
-     * aria-rowindex is 1-based: we have to start from 1
-     */
-    const childrenClone = React.Children.toArray(children).map((child) => {
-        if (React.isValidElement(child)) {
-            return React.cloneElement(child, { 'aria-rowindex': 1 });
-        }
-        return child;
-    });
-    return jsxRuntime.jsx("thead", { ...props, children: childrenClone });
-};
-
-exports.RawThead = RawThead;

package/dist/RawTable/RawThead.mjs

@@ -1,17 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Children, isValidElement, cloneElement } from 'react';
-
-const RawThead = ({ children, ...props }) => {
-    /**
-     * aria-rowindex is 1-based: we have to start from 1
-     */
-    const childrenClone = Children.toArray(children).map((child) => {
-        if (isValidElement(child)) {
-            return cloneElement(child, { 'aria-rowindex': 1 });
-        }
-        return child;
-    });
-    return jsx("thead", { ...props, children: childrenClone });
-};
-
-export { RawThead };

package/dist/RawTable/RawTr.js

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const Box = require('../Box/Box.js');
-
-const RawTr = ({ children, ...props }) => {
-    const childrenClone = React.Children.toArray(children).map((child, index) => {
-        if (React.isValidElement(child)) {
-            return React.cloneElement(child, {
-                'aria-colindex': index + 1,
-                coords: { col: index + 1, row: props['aria-rowindex'] },
-            });
-        }
-        return child;
-    });
-    return (jsxRuntime.jsx(Box.Box, { as: "tr", ...props, children: childrenClone }));
-};
-
-exports.RawTr = RawTr;

package/dist/RawTable/RawTr.mjs

@@ -1,18 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Children, isValidElement, cloneElement } from 'react';
-import { Box } from '../Box/Box.mjs';
-
-const RawTr = ({ children, ...props }) => {
-    const childrenClone = Children.toArray(children).map((child, index) => {
-        if (isValidElement(child)) {
-            return cloneElement(child, {
-                'aria-colindex': index + 1,
-                coords: { col: index + 1, row: props['aria-rowindex'] },
-            });
-        }
-        return child;
-    });
-    return (jsx(Box, { as: "tr", ...props, children: childrenClone }));
-};
-
-export { RawTr };

package/dist/RawTable/focusFocusable.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const focusFocusable = (node) => {
-    const nextNode = node.querySelector('[tabindex="0"]');
-    if (nextNode) {
-        nextNode.focus();
-    }
-};
-
-exports.focusFocusable = focusFocusable;

package/dist/RawTable/focusFocusable.mjs

@@ -1,8 +0,0 @@
-const focusFocusable = (node) => {
-    const nextNode = node.querySelector('[tabindex="0"]');
-    if (nextNode) {
-        nextNode.focus();
-    }
-};
-
-export { focusFocusable };

package/dist/RawTable/index.js

@@ -1,18 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const RawTable = require('./RawTable.js');
-const RawCell = require('./RawCell.js');
-const RawThead = require('./RawThead.js');
-const RawTbody = require('./RawTbody.js');
-const RawTr = require('./RawTr.js');
-
-
-
-exports.RawTable = RawTable.RawTable;
-exports.RawTd = RawCell.RawTd;
-exports.RawTh = RawCell.RawTh;
-exports.RawThead = RawThead.RawThead;
-exports.RawTbody = RawTbody.RawTbody;
-exports.RawTr = RawTr.RawTr;

package/dist/RawTable/index.mjs

@@ -1,5 +0,0 @@
-export { RawTable } from './RawTable.mjs';
-export { RawTd, RawTh } from './RawCell.mjs';
-export { RawThead } from './RawThead.mjs';
-export { RawTbody } from './RawTbody.mjs';
-export { RawTr } from './RawTr.mjs';

package/dist/Searchbar/SearchForm.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-
-const SearchForm = (props) => jsxRuntime.jsx("form", { ...props, role: "search" });
-
-exports.SearchForm = SearchForm;

package/dist/Searchbar/SearchForm.mjs

@@ -1,5 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-
-const SearchForm = (props) => jsx("form", { ...props, role: "search" });
-
-export { SearchForm };

package/dist/Searchbar/Searchbar.js

@@ -1,62 +0,0 @@
-'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 styled = require('styled-components');
-const useComposeRefs = require('../hooks/useComposeRefs.js');
-const utils = require('../themes/utils.js');
-const FieldInput = require('../Field/FieldInput.js');
-const FieldAction = require('../Field/FieldAction.js');
-const Field = require('../Field/Field.js');
-const VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
-const FieldLabel = require('../Field/FieldLabel.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const CloseIcon = styled__default.default(icons.Cross) `
-  font-size: 0.5rem;
-  path {
-    fill: ${({ theme }) => theme.colors.neutral400};
-  }
-`;
-const SearchIcon = styled__default.default(icons.Search) `
-  font-size: 0.8rem;
-  path {
-    fill: ${({ theme }) => theme.colors.neutral800};
-  }
-`;
-const SearchbarWrapper = styled__default.default.div `
-  border-radius: ${({ theme }) => theme.borderRadius};
-  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
-
-  &:focus-within {
-    ${SearchIcon} {
-      path {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-    }
-  }
-
-  ${FieldInput.InputWrapper} {
-    border: 1px solid transparent;
-  }
-
-  ${utils.inputFocusStyle(FieldInput.InputWrapper)}
-`;
-const Searchbar = React.forwardRef(({ name, size = 'M', children, value = '', onClear, clearLabel, ...props }, ref) => {
-    const inputRef = React.useRef(null);
-    const isCompleting = value.length > 0;
-    const handleClear = (e) => {
-        onClear(e);
-        inputRef.current.focus();
-    };
-    const actualRef = useComposeRefs.composeRefs(ref, inputRef);
-    return (jsxRuntime.jsx(SearchbarWrapper, { children: jsxRuntime.jsxs(Field.Field, { name: name, children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: jsxRuntime.jsx(FieldLabel.FieldLabel, { children: children }) }), jsxRuntime.jsx(FieldInput.FieldInput, { ref: actualRef, value: value, startAction: jsxRuntime.jsx(SearchIcon, { "aria-hidden": true }), size: size, endAction: isCompleting ? (jsxRuntime.jsx(FieldAction.FieldAction, { label: clearLabel, onClick: handleClear, children: jsxRuntime.jsx(CloseIcon, {}) })) : undefined, ...props })] }) }));
-});
-
-exports.Searchbar = Searchbar;

package/dist/Searchbar/Searchbar.mjs

@@ -1,54 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
-import { Cross, Search } from '@strapi/icons';
-import styled from 'styled-components';
-import { composeRefs } from '../hooks/useComposeRefs.mjs';
-import { inputFocusStyle } from '../themes/utils.mjs';
-import { InputWrapper, FieldInput } from '../Field/FieldInput.mjs';
-import { FieldAction } from '../Field/FieldAction.mjs';
-import { Field } from '../Field/Field.mjs';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
-import { FieldLabel } from '../Field/FieldLabel.mjs';
-
-const CloseIcon = styled(Cross) `
-  font-size: 0.5rem;
-  path {
-    fill: ${({ theme }) => theme.colors.neutral400};
-  }
-`;
-const SearchIcon = styled(Search) `
-  font-size: 0.8rem;
-  path {
-    fill: ${({ theme }) => theme.colors.neutral800};
-  }
-`;
-const SearchbarWrapper = styled.div `
-  border-radius: ${({ theme }) => theme.borderRadius};
-  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
-
-  &:focus-within {
-    ${SearchIcon} {
-      path {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-    }
-  }
-
-  ${InputWrapper} {
-    border: 1px solid transparent;
-  }
-
-  ${inputFocusStyle(InputWrapper)}
-`;
-const Searchbar = forwardRef(({ name, size = 'M', children, value = '', onClear, clearLabel, ...props }, ref) => {
-    const inputRef = useRef(null);
-    const isCompleting = value.length > 0;
-    const handleClear = (e) => {
-        onClear(e);
-        inputRef.current.focus();
-    };
-    const actualRef = composeRefs(ref, inputRef);
-    return (jsx(SearchbarWrapper, { children: jsxs(Field, { name: name, children: [jsx(VisuallyHidden, { children: jsx(FieldLabel, { children: children }) }), jsx(FieldInput, { ref: actualRef, value: value, startAction: jsx(SearchIcon, { "aria-hidden": true }), size: size, endAction: isCompleting ? (jsx(FieldAction, { label: clearLabel, onClick: handleClear, children: jsx(CloseIcon, {}) })) : undefined, ...props })] }) }));
-});
-
-export { Searchbar };

package/dist/Searchbar/index.js

@@ -1,11 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Searchbar = require('./Searchbar.js');
-const SearchForm = require('./SearchForm.js');
-
-
-
-exports.Searchbar = Searchbar.Searchbar;
-exports.SearchForm = SearchForm.SearchForm;

package/dist/Searchbar/index.mjs

@@ -1,2 +0,0 @@
-export { Searchbar } from './Searchbar.mjs';
-export { SearchForm } from './SearchForm.mjs';

package/dist/Select/MultiSelect.js

@@ -1,167 +0,0 @@
-'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 styled = require('styled-components');
-const SelectParts = require('./SelectParts.js');
-const checkmark = require('../BaseCheckbox/assets/checkmark.svg.js');
-const strings = require('../helpers/strings.js');
-const useComposeRefs = require('../hooks/useComposeRefs.js');
-const useId = require('../hooks/useId.js');
-const useIntersection = require('../hooks/useIntersection.js');
-const Tag = require('../Tag/Tag.js');
-const Field = require('../Field/Field.js');
-const Flex = require('../Flex/Flex.js');
-const FieldLabel = require('../Field/FieldLabel.js');
-const Box = require('../Box/Box.js');
-const FieldHint = require('../Field/FieldHint.js');
-const FieldError = require('../Field/FieldError.js');
-const Typography = require('../Typography/Typography.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 MultiSelect = React__namespace.forwardRef(({ 'aria-label': ariaLabel, children, clearLabel = 'Clear', customizeContent, disabled, error, hint, id, label, labelAction, onChange, onClear, onCloseAutoFocus, onReachEnd, placeholder, required, selectButtonTitle: _deprecatedSelectButtonTitle, startIcon, size = 'M', value: passedValue, withTags, ...restProps }, forwardedRef) => {
-    /**
-     * Used for the intersection observer
-     */
-    const viewportRef = React__namespace.useRef(null);
-    /**
-     * These values are drawn out from the internals of the Radix component
-     * We can then use them to react to visual changes for the component
-     */
-    const [internalValue, setInternalValue] = React__namespace.useState();
-    const [internalIsOpen, setInternalIsOpen] = React__namespace.useState(false);
-    const generatedId = useId.useId(id);
-    const hintId = `${generatedId}-hint`;
-    const errorId = `${generatedId}-error`;
-    const handleValueChange = (value) => {
-        /**
-         * If it's being externally managed then we shouldn't
-         * both setting our copy of the internal value.
-         */
-        if (onChange) {
-            onChange(value);
-        }
-        else {
-            setInternalValue(value);
-        }
-    };
-    const handleTagClick = (value) => () => {
-        const newValue = Array.isArray(passedValue)
-            ? passedValue.filter((val) => val !== value)
-            : (internalValue ?? []).filter((val) => val !== value);
-        if (onChange) {
-            onChange(newValue);
-        }
-        else {
-            setInternalValue(newValue);
-        }
-    };
-    const handleOpenChange = (open) => {
-        setInternalIsOpen(open);
-    };
-    /**
-     * Because the trigger needs to be a `div` to allow the clear
-     * button & tags to be clickable, we need to manually focus it.
-     */
-    const triggerRef = React__namespace.useRef(null);
-    const handleFieldLabelClick = () => {
-        triggerRef.current.focus();
-    };
-    const generatedIntersectionId = useId.useId();
-    const intersectionId = `intersection-${strings.stripReactIdOfColon(generatedIntersectionId)}`;
-    const handleReachEnd = (entry) => {
-        if (onReachEnd) {
-            onReachEnd(entry);
-        }
-    };
-    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 value = typeof passedValue !== 'undefined' && passedValue !== null ? passedValue : internalValue;
-    const renderTags = (arg) => {
-        if (arg && typeof arg === 'object' && arg.value) {
-            return (jsxRuntime.jsx(Tag.Tag, { tabIndex: -1, disabled: disabled, icon: jsxRuntime.jsx(icons.Cross, {}), onClick: handleTagClick(arg.value), children: arg.textValue }, arg.value));
-        }
-        return null;
-    };
-    const composedTriggerRefs = useComposeRefs.useComposedRefs(triggerRef, forwardedRef);
-    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, { onClick: handleFieldLabelClick, action: labelAction, children: label })) : null, jsxRuntime.jsxs(SelectParts.Root, { onOpenChange: handleOpenChange, disabled: disabled, required: required, onValueChange: handleValueChange, value: value, ...restProps, multi: true, children: [jsxRuntime.jsx(SelectParts.Trigger, { ref: composedTriggerRefs, "aria-label": label ?? ariaLabel, "aria-describedby": `${hintId} ${errorId}`, id: generatedId, startIcon: startIcon, size: size, hasError: Boolean(error), disabled: disabled, clearLabel: clearLabel, onClear: value?.length ? onClear : undefined, paddingLeft: withTags && value?.length ? 1 : 3, children: jsxRuntime.jsx(SelectParts.Value, { placeholder: placeholder, textColor: value?.length ? 'neutral800' : 'neutral600', children: value?.length
-                                    ? withTags
-                                        ? renderTags
-                                        : customizeContent
-                                            ? customizeContent(value)
-                                            : undefined
-                                    : undefined }) }), jsxRuntime.jsx(SelectParts.Portal, { children: jsxRuntime.jsx(SelectParts.Content, { position: "popper", sideOffset: 4, onCloseAutoFocus: onCloseAutoFocus, children: jsxRuntime.jsxs(SelectParts.Viewport, { ref: viewportRef, children: [children, jsxRuntime.jsx(Box.Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) })] }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
-});
-const MultiSelectOption = React__namespace.forwardRef(({ value, children, startIcon, ...restProps }, ref) => {
-    return (jsxRuntime.jsxs(SelectParts.Item, { ref: ref, value: value.toString(), ...restProps, children: [startIcon && (jsxRuntime.jsx(Box.Box, { as: "span", "aria-hidden": true, children: startIcon })), jsxRuntime.jsx(SelectParts.ItemIndicator, { children: ({ isSelected, isIntermediate }) => (jsxRuntime.jsx(CheckMark, { hasRadius: true, overflow: "hidden", position: "relative", "$indeterminate": isIntermediate, "$selected": isSelected, zIndex: 1, height: "18px", width: "18px" })) }), jsxRuntime.jsx(Typography.Typography, { textColor: "neutral800", children: jsxRuntime.jsx(SelectParts.ItemText, { children: children }) })] }));
-});
-const CheckMark = styled__default.default(Box.Box) `
-  border: 1px solid
-    ${({ theme, $selected, $indeterminate }) => $selected || $indeterminate ? theme.colors.primary600 : theme.colors.neutral300};
-  background-color: ${({ theme, $selected, $indeterminate }) => $selected || $indeterminate ? theme.colors.primary600 : theme.colors.neutral0};
-
-  ${({ theme, $indeterminate }) => $indeterminate &&
-    styled.css `
-      &::after {
-        content: '';
-        display: block;
-        position: relative;
-        color: white;
-        height: 2px;
-        width: 10px;
-        background-color: ${theme.colors.neutral0};
-        left: 50%;
-        top: 50%;
-        transform: translateX(-50%) translateY(-50%);
-      }
-    `}
-
-  ${({ $selected }) => $selected &&
-    styled.css `
-      &::after {
-        content: '';
-        background: ${() => `url("${checkmark}") no-repeat no-repeat center center`};
-        width: 100%;
-        height: 100%;
-        position: absolute;
-      }
-    `}
-`;
-const MultiSelectGroup = React__namespace.forwardRef(({ children, label, startIcon, values = [], ...restProps }, ref) => {
-    return (jsxRuntime.jsxs(SelectParts.Group, { ref: ref, children: [jsxRuntime.jsxs(SelectParts.Item, { value: values, ...restProps, children: [startIcon && (jsxRuntime.jsx(Box.Box, { as: "span", "aria-hidden": true, children: startIcon })), jsxRuntime.jsx(SelectParts.ItemIndicator, { children: ({ isSelected, isIntermediate }) => (jsxRuntime.jsx(CheckMark, { hasRadius: true, overflow: "hidden", position: "relative", "$indeterminate": isIntermediate, "$selected": isSelected, zIndex: 1, height: "18px", width: "18px" })) }), jsxRuntime.jsx(Typography.Typography, { textColor: "neutral800", children: label })] }), children] }));
-});
-
-exports.MultiSelect = MultiSelect;
-exports.MultiSelectGroup = MultiSelectGroup;
-exports.MultiSelectOption = MultiSelectOption;

package/dist/Select/MultiSelect.mjs

@@ -1,138 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
-import { Cross } from '@strapi/icons';
-import styled, { css } from 'styled-components';
-import { Root, Trigger, Value, Portal, Content, Viewport, Item, ItemIndicator, ItemText, Group } from './SelectParts.mjs';
-import checkmarkIcon from '../BaseCheckbox/assets/checkmark.svg.mjs';
-import { stripReactIdOfColon } from '../helpers/strings.mjs';
-import { useComposedRefs } from '../hooks/useComposeRefs.mjs';
-import { useId } from '../hooks/useId.mjs';
-import { useIntersection } from '../hooks/useIntersection.mjs';
-import { Tag } from '../Tag/Tag.mjs';
-import { Field } from '../Field/Field.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { FieldLabel } from '../Field/FieldLabel.mjs';
-import { Box } from '../Box/Box.mjs';
-import { FieldHint } from '../Field/FieldHint.mjs';
-import { FieldError } from '../Field/FieldError.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-
-const MultiSelect = React.forwardRef(({ 'aria-label': ariaLabel, children, clearLabel = 'Clear', customizeContent, disabled, error, hint, id, label, labelAction, onChange, onClear, onCloseAutoFocus, onReachEnd, placeholder, required, selectButtonTitle: _deprecatedSelectButtonTitle, startIcon, size = 'M', value: passedValue, withTags, ...restProps }, forwardedRef) => {
-    /**
-     * Used for the intersection observer
-     */
-    const viewportRef = React.useRef(null);
-    /**
-     * These values are drawn out from the internals of the Radix component
-     * We can then use them to react to visual changes for the component
-     */
-    const [internalValue, setInternalValue] = React.useState();
-    const [internalIsOpen, setInternalIsOpen] = React.useState(false);
-    const generatedId = useId(id);
-    const hintId = `${generatedId}-hint`;
-    const errorId = `${generatedId}-error`;
-    const handleValueChange = (value) => {
-        /**
-         * If it's being externally managed then we shouldn't
-         * both setting our copy of the internal value.
-         */
-        if (onChange) {
-            onChange(value);
-        }
-        else {
-            setInternalValue(value);
-        }
-    };
-    const handleTagClick = (value) => () => {
-        const newValue = Array.isArray(passedValue)
-            ? passedValue.filter((val) => val !== value)
-            : (internalValue ?? []).filter((val) => val !== value);
-        if (onChange) {
-            onChange(newValue);
-        }
-        else {
-            setInternalValue(newValue);
-        }
-    };
-    const handleOpenChange = (open) => {
-        setInternalIsOpen(open);
-    };
-    /**
-     * Because the trigger needs to be a `div` to allow the clear
-     * button & tags to be clickable, we need to manually focus it.
-     */
-    const triggerRef = React.useRef(null);
-    const handleFieldLabelClick = () => {
-        triggerRef.current.focus();
-    };
-    const generatedIntersectionId = useId();
-    const intersectionId = `intersection-${stripReactIdOfColon(generatedIntersectionId)}`;
-    const handleReachEnd = (entry) => {
-        if (onReachEnd) {
-            onReachEnd(entry);
-        }
-    };
-    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 value = typeof passedValue !== 'undefined' && passedValue !== null ? passedValue : internalValue;
-    const renderTags = (arg) => {
-        if (arg && typeof arg === 'object' && arg.value) {
-            return (jsx(Tag, { tabIndex: -1, disabled: disabled, icon: jsx(Cross, {}), onClick: handleTagClick(arg.value), children: arg.textValue }, arg.value));
-        }
-        return null;
-    };
-    const composedTriggerRefs = useComposedRefs(triggerRef, forwardedRef);
-    return (jsx(Field, { hint: hint, error: error, id: generatedId, required: required, children: jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label ? (jsx(FieldLabel, { onClick: handleFieldLabelClick, action: labelAction, children: label })) : null, jsxs(Root, { onOpenChange: handleOpenChange, disabled: disabled, required: required, onValueChange: handleValueChange, value: value, ...restProps, multi: true, children: [jsx(Trigger, { ref: composedTriggerRefs, "aria-label": label ?? ariaLabel, "aria-describedby": `${hintId} ${errorId}`, id: generatedId, startIcon: startIcon, size: size, hasError: Boolean(error), disabled: disabled, clearLabel: clearLabel, onClear: value?.length ? onClear : undefined, paddingLeft: withTags && value?.length ? 1 : 3, children: jsx(Value, { placeholder: placeholder, textColor: value?.length ? 'neutral800' : 'neutral600', children: value?.length
-                                    ? withTags
-                                        ? renderTags
-                                        : customizeContent
-                                            ? customizeContent(value)
-                                            : undefined
-                                    : undefined }) }), jsx(Portal, { children: jsx(Content, { position: "popper", sideOffset: 4, onCloseAutoFocus: onCloseAutoFocus, children: jsxs(Viewport, { ref: viewportRef, children: [children, jsx(Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) })] }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }));
-});
-const MultiSelectOption = React.forwardRef(({ value, children, startIcon, ...restProps }, ref) => {
-    return (jsxs(Item, { ref: ref, value: value.toString(), ...restProps, children: [startIcon && (jsx(Box, { as: "span", "aria-hidden": true, children: startIcon })), jsx(ItemIndicator, { children: ({ isSelected, isIntermediate }) => (jsx(CheckMark, { hasRadius: true, overflow: "hidden", position: "relative", "$indeterminate": isIntermediate, "$selected": isSelected, zIndex: 1, height: "18px", width: "18px" })) }), jsx(Typography, { textColor: "neutral800", children: jsx(ItemText, { children: children }) })] }));
-});
-const CheckMark = styled(Box) `
-  border: 1px solid
-    ${({ theme, $selected, $indeterminate }) => $selected || $indeterminate ? theme.colors.primary600 : theme.colors.neutral300};
-  background-color: ${({ theme, $selected, $indeterminate }) => $selected || $indeterminate ? theme.colors.primary600 : theme.colors.neutral0};
-
-  ${({ theme, $indeterminate }) => $indeterminate &&
-    css `
-      &::after {
-        content: '';
-        display: block;
-        position: relative;
-        color: white;
-        height: 2px;
-        width: 10px;
-        background-color: ${theme.colors.neutral0};
-        left: 50%;
-        top: 50%;
-        transform: translateX(-50%) translateY(-50%);
-      }
-    `}
-
-  ${({ $selected }) => $selected &&
-    css `
-      &::after {
-        content: '';
-        background: ${() => `url("${checkmarkIcon}") no-repeat no-repeat center center`};
-        width: 100%;
-        height: 100%;
-        position: absolute;
-      }
-    `}
-`;
-const MultiSelectGroup = React.forwardRef(({ children, label, startIcon, values = [], ...restProps }, ref) => {
-    return (jsxs(Group, { ref: ref, children: [jsxs(Item, { value: values, ...restProps, children: [startIcon && (jsx(Box, { as: "span", "aria-hidden": true, children: startIcon })), jsx(ItemIndicator, { children: ({ isSelected, isIntermediate }) => (jsx(CheckMark, { hasRadius: true, overflow: "hidden", position: "relative", "$indeterminate": isIntermediate, "$selected": isSelected, zIndex: 1, height: "18px", width: "18px" })) }), jsx(Typography, { textColor: "neutral800", children: label })] }), children] }));
-});
-
-export { MultiSelect, MultiSelectGroup, MultiSelectOption };

package/dist/Select/MultiSelectNested.js

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const styled = require('styled-components');
-const MultiSelect = require('./MultiSelect.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const MultiSelectNested = ({ options, ...props }) => {
-    return (jsxRuntime.jsx(MultiSelect.MultiSelect, { ...props, children: options.map((opt) => {
-            if ('children' in opt) {
-                return (jsxRuntime.jsx(MultiSelect.MultiSelectGroup, { label: opt.label, values: opt.children.map((child) => child.value.toString()), children: opt.children.map((child) => (jsxRuntime.jsx(NestedOption, { value: child.value, children: child.label }, child.value))) }, opt.label));
-            }
-            return (jsxRuntime.jsx(MultiSelect.MultiSelectOption, { value: opt.value, children: opt.label }, opt.value));
-        }) }));
-};
-const NestedOption = styled__default.default(MultiSelect.MultiSelectOption) `
-  padding-left: ${({ theme }) => theme.spaces[7]};
-`;
-
-exports.MultiSelectNested = MultiSelectNested;

package/dist/Select/MultiSelectNested.mjs

@@ -1,17 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { MultiSelectOption, MultiSelect, MultiSelectGroup } from './MultiSelect.mjs';
-
-const MultiSelectNested = ({ options, ...props }) => {
-    return (jsx(MultiSelect, { ...props, children: options.map((opt) => {
-            if ('children' in opt) {
-                return (jsx(MultiSelectGroup, { label: opt.label, values: opt.children.map((child) => child.value.toString()), children: opt.children.map((child) => (jsx(NestedOption, { value: child.value, children: child.label }, child.value))) }, opt.label));
-            }
-            return (jsx(MultiSelectOption, { value: opt.value, children: opt.label }, opt.value));
-        }) }));
-};
-const NestedOption = styled(MultiSelectOption) `
-  padding-left: ${({ theme }) => theme.spaces[7]};
-`;
-
-export { MultiSelectNested };