@stack-spot/citric-react 0.25.1 → 0.27.0

package/dist/components/Select/RichSelect.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
 import { useTranslate } from '@stack-spot/portal-translate';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { applyCSSVariable } from '../../utils/css.js';
 import { defaultRenderKey, defaultRenderLabel } from '../../utils/options.js';
 import { withRef } from '../../utils/react.js';
 import { CitricComponent } from '../CitricComponent.js';
 import { Input } from '../Input.js';
 import { ProgressCircular } from '../ProgressCircular.js';
+import { useDisabledEffect, useFocusEffect, useOpenPanelEffect } from './hooks.js';
 import { SimpleSelect } from './SimpleSelect.js';
-export const RichSelect = withRef(function RichSelect({ ref, options, value, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, required = true, disabled, loading, renderOption, renderHeader, searchable, maxHeight, style, className, onFocus, onBlur, showArrow, ...props }) {
+export const RichSelect = withRef(function RichSelect({ ref, options, value, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, required = true, disabled, loading, renderOption, renderHeader, searchable, maxHeight, style, className, onFocus, onBlur, showArrow, placeholder, ...props }) {
     const [search, setSearch] = useState('');
     const _element = useRef(null);
     const element = ref ?? _element;
@@ -21,122 +22,21 @@ export const RichSelect = withRef(function RichSelect({ ref, options, value, onC
         setOpen(false);
     }, []);
     const renderedOptions = useMemo(() => {
-        const items = required ? [] : [_jsx("li", { className: "empty", onClick: change(undefined), children: renderLabel(undefined) || t.empty }, "")];
+        const items = required
+            ? []
+            : [_jsx("li", { className: "empty option", onClick: change(undefined), children: renderLabel(undefined) || t.empty }, "")];
         options.forEach((o) => {
             const key = renderKey(o);
             const label = renderLabel(o);
-            if (!search.trim() || label.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase())) {
-                items.push(_jsx("li", { onClick: change(o), children: renderOption?.(o) ?? label }, key));
+            if (!search?.trim() || label.toLocaleLowerCase().includes(search?.trim().toLocaleLowerCase())) {
+                items.push(_jsx("li", { onClick: change(o), className: "option", children: renderOption?.(o) ?? label }, key));
             }
         });
         return items;
     }, [options, value, required, search]);
-    /* this runs whenever the selection panel is opened */
-    useEffect(() => {
-        if (open) {
-            setSearch('');
-            const selectionPanel = element.current?.querySelector('.selection-panel');
-            selectionPanel?.querySelector('ul')?.scrollTo({ top: 0 });
-            const getCurrent = () => selectionPanel?.querySelector('li.focused');
-            const scrollTo = (li) => {
-                const ul = li.closest('ul');
-                if (!ul)
-                    return;
-                const { top: ulTop, height: ulHeight } = ul.getBoundingClientRect();
-                const { height: liHeight, top: liTop } = li.getBoundingClientRect();
-                const offset = liTop + ul.scrollTop - ulTop;
-                if ((ul.scrollTop + ulHeight < offset + liHeight) || ul.scrollTop > offset) {
-                    ul.scrollTo({ top: offset });
-                }
-            };
-            /* keyboard and mouse controls */
-            const listenToMouse = (event) => {
-                if (!selectionPanel?.contains(event.target)) {
-                    setOpen(false);
-                }
-            };
-            const listenToKeyboard = (event) => {
-                const isCharacter = event.key.length === 1;
-                if (['Escape', 'ArrowUp', 'ArrowDown', 'Enter'].includes(event.key) ||
-                    (searchable && (isCharacter || event.key === 'Backspace'))) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-                if (event.key === 'Escape')
-                    setOpen(false);
-                if (searchable) {
-                    if (isCharacter)
-                        setSearch(v => `${v}${event.key}`);
-                    if (event.key === 'Backspace')
-                        setSearch(v => v.substring(0, v.length - 1));
-                }
-                if (event.key === 'ArrowDown') {
-                    const current = getCurrent();
-                    const next = (current?.nextElementSibling ?? selectionPanel?.querySelector('li'));
-                    if (next) {
-                        current?.classList.remove('focused');
-                        next.classList.add('focused');
-                        scrollTo(next);
-                    }
-                }
-                if (event.key === 'ArrowUp') {
-                    const current = getCurrent();
-                    const prev = (current?.previousElementSibling ?? selectionPanel?.querySelector('li:last-child'));
-                    if (prev) {
-                        current?.classList.remove('focused');
-                        prev.classList.add('focused');
-                        scrollTo(prev);
-                    }
-                }
-                if (event.key === 'Enter') {
-                    setTimeout(() => getCurrent()?.click(), 0);
-                }
-            };
-            // below, we wait 20ms so the same click that opened the select doesn't close it. Removing it will cause problems with selects under
-            // labels.
-            setTimeout(() => document.addEventListener('click', listenToMouse), 20);
-            document.addEventListener('keydown', listenToKeyboard);
-            return () => {
-                document.removeEventListener('click', listenToMouse);
-                document.removeEventListener('keydown', listenToKeyboard);
-                getCurrent()?.classList.remove('focused');
-            };
-        }
-    }, [open]);
-    /* this runs whenever the select is focused */
-    useEffect(() => {
-        if (focused) {
-            const listenToMouse = (event) => {
-                if (!element.current?.contains(event.target)) {
-                    setFocused(false);
-                }
-            };
-            const listenToKeyboard = (event) => {
-                if (['Enter', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
-                    event.preventDefault();
-                    if (!element.current?.classList.contains('open'))
-                        setOpen(true);
-                }
-                if (event.key === 'Tab') {
-                    setFocused(false);
-                    if (element.current?.classList.contains('open'))
-                        setOpen(false);
-                }
-            };
-            document.addEventListener('click', listenToMouse);
-            document.addEventListener('keydown', listenToKeyboard);
-            return () => {
-                document.removeEventListener('click', listenToMouse);
-                document.removeEventListener('keydown', listenToKeyboard);
-            };
-        }
-    }, [focused]);
-    useEffect(() => {
-        if (disabled) {
-            setOpen(false);
-            setFocused(false);
-        }
-    }, [disabled]);
+    useOpenPanelEffect({ open, setOpen, setSearch, element, searchable });
+    useFocusEffect({ element, focused, setFocused, setOpen });
+    useDisabledEffect({ disabled, setOpen, setFocused });
     return (_jsxs(CitricComponent, { tag: "div", component: "rich-select", style: maxHeight ? applyCSSVariable(style, 'max-height', `${maxHeight}px`) : style, className: listToClass([className, showArrow === false && 'hide-arrow', open && 'open', focused && 'focused']), ref: element, "aria-busy": loading, ...props, children: [_jsx(SimpleSelect, { options: options, value: value, renderLabel: renderLabel, renderKey: renderKey, required: required, disabled: disabled, onChange: onChange, onFocus: onFocus, onBlur: onBlur, wrap: false }), _jsxs("header", { onClick: (e) => {
                     if (disabled)
                         return;
@@ -144,7 +44,9 @@ export const RichSelect = withRef(function RichSelect({ ref, options, value, onC
                         e.stopPropagation();
                     setFocused(true);
                     setOpen(true);
-                }, "aria-hidden": true, children: [(renderHeader?.(value) ?? renderOption?.(value) ?? renderLabel(value)) || _jsx("span", {}), loading && _jsx(ProgressCircular, { size: "xs", className: "loader" })] }), _jsxs("div", { className: "selection-panel", "aria-hidden": true, children: [searchable && _jsx("div", { className: "search-bar", children: _jsxs("div", { "data-citric": "field-group", className: "auto", children: [_jsx("i", { "data-citric": "icon-box", className: "citric-icon outline Search" }), _jsx(Input, { type: "search", value: search, onChange: setSearch, tabIndex: -1 })] }) }), _jsx("ul", { children: renderedOptions })] })] }));
+                }, "aria-hidden": true, children: [value === undefined
+                        ? _jsx("span", { className: "placeholder", children: placeholder })
+                        : ((renderHeader?.(value) ?? renderOption?.(value) ?? renderLabel(value)) || _jsx("span", {})), loading && _jsx(ProgressCircular, { size: "xs", className: "loader" })] }), _jsxs("div", { className: "selection-panel", "aria-hidden": true, children: [searchable && _jsx("div", { className: "search-bar", children: _jsxs("div", { "data-citric": "field-group", className: "auto", children: [_jsx("i", { "data-citric": "icon-box", className: "citric-icon outline Search" }), _jsx(Input, { type: "search", value: search, onChange: setSearch, tabIndex: -1 })] }) }), _jsx("ul", { className: "options", children: renderedOptions })] })] }));
 });
 const dictionary = {
     en: {

package/dist/components/Select/RichSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichSelect.js","sourceRoot":"","sources":["../../../src/components/Select/RichSelect.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"RichSelect.js","sourceRoot":"","sources":["../../../src/components/Select/RichSelect.tsx"],"names":[],"mappings":"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"}

package/dist/components/Select/hooks.d.ts

@@ -0,0 +1,23 @@
+interface OpenPanelEffectParams {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setSearch: React.Dispatch<React.SetStateAction<string | undefined>>;
+    element: React.MutableRefObject<HTMLDivElement | null>;
+    searchable?: boolean;
+}
+interface FocusEffectParams {
+    element: React.MutableRefObject<HTMLDivElement | null>;
+    focused: boolean;
+    setFocused: React.Dispatch<React.SetStateAction<boolean>>;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+interface DisabledEffectParams {
+    disabled?: boolean;
+    setFocused: React.Dispatch<React.SetStateAction<boolean>>;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare function useOpenPanelEffect({ open, setOpen, setSearch, element, searchable }: OpenPanelEffectParams): void;
+export declare function useFocusEffect({ element, focused, setFocused, setOpen }: FocusEffectParams): void;
+export declare function useDisabledEffect({ disabled, setOpen, setFocused }: DisabledEffectParams): void;
+export {};
+//# sourceMappingURL=hooks.d.ts.map

package/dist/components/Select/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/Select/hooks.ts"],"names":[],"mappings":"AAEA,UAAU,qBAAqB;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACvD,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;IACpE,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1D,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACxD;AAED,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1D,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACxD;AAGD,wBAAgB,kBAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,qBAAqB,QAsE1G;AAGD,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,iBAAiB,QA0B1F;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,oBAAoB,QAOxF"}

package/dist/components/Select/hooks.js

@@ -0,0 +1,114 @@
+import { useEffect } from 'react';
+/* this runs whenever the selection panel is opened */
+export function useOpenPanelEffect({ open, setOpen, setSearch, element, searchable }) {
+    useEffect(() => {
+        if (open) {
+            setSearch('');
+            const selectionPanel = element.current?.querySelector('.selection-panel');
+            selectionPanel?.querySelector('.options')?.scrollTo({ top: 0 });
+            const getCurrent = () => selectionPanel?.querySelector('.option.focused');
+            const scrollTo = (item) => {
+                const list = item.closest('.options');
+                if (!list)
+                    return;
+                const { top: listTop, height: listHeight } = list.getBoundingClientRect();
+                const { height: itemHeight, top: itemTop } = item.getBoundingClientRect();
+                const offset = itemTop + list.scrollTop - listTop;
+                if ((list.scrollTop + listHeight < offset + itemHeight) || list.scrollTop > offset) {
+                    list.scrollTo({ top: offset });
+                }
+            };
+            /* keyboard and mouse controls */
+            const listenToMouse = (event) => {
+                if (!selectionPanel?.contains(event.target)) {
+                    setOpen(false);
+                }
+            };
+            const listenToKeyboard = (event) => {
+                const isCharacter = event.key.length === 1;
+                if (['Escape', 'ArrowUp', 'ArrowDown', 'Enter'].includes(event.key) ||
+                    (searchable && (isCharacter || event.key === 'Backspace'))) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+                if (event.key === 'Escape')
+                    setOpen(false);
+                if (searchable) {
+                    if (isCharacter)
+                        setSearch(v => `${v}${event.key}`);
+                    if (event.key === 'Backspace')
+                        setSearch(v => v?.substring(0, v.length - 1));
+                }
+                if (event.key === 'ArrowDown') {
+                    const current = getCurrent();
+                    const next = (current?.nextElementSibling ?? selectionPanel?.querySelector('.option'));
+                    if (next) {
+                        current?.classList.remove('focused');
+                        next.classList.add('focused');
+                        scrollTo(next);
+                    }
+                }
+                if (event.key === 'ArrowUp') {
+                    const current = getCurrent();
+                    const prev = (current?.previousElementSibling ?? selectionPanel?.querySelector('.option:last-child'));
+                    if (prev) {
+                        current?.classList.remove('focused');
+                        prev.classList.add('focused');
+                        scrollTo(prev);
+                    }
+                }
+                if (event.key === 'Enter') {
+                    setTimeout(() => getCurrent()?.click(), 0);
+                }
+            };
+            // below, we wait 20ms so the same click that opened the select doesn't close it. Removing it will cause problems with selects under
+            // labels.
+            setTimeout(() => document.addEventListener('click', listenToMouse), 20);
+            document.addEventListener('keydown', listenToKeyboard);
+            return () => {
+                document.removeEventListener('click', listenToMouse);
+                document.removeEventListener('keydown', listenToKeyboard);
+                getCurrent()?.classList.remove('focused');
+            };
+        }
+    }, [open]);
+}
+/* this runs whenever the select is focused */
+export function useFocusEffect({ element, focused, setFocused, setOpen }) {
+    useEffect(() => {
+        if (focused) {
+            const listenToMouse = (event) => {
+                if (!element.current?.contains(event.target)) {
+                    setFocused(false);
+                }
+            };
+            const listenToKeyboard = (event) => {
+                if (['Enter', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
+                    event.preventDefault();
+                    if (!element.current?.classList.contains('open'))
+                        setOpen(true);
+                }
+                if (event.key === 'Tab') {
+                    setFocused(false);
+                    if (element.current?.classList.contains('open'))
+                        setOpen(false);
+                }
+            };
+            document.addEventListener('click', listenToMouse);
+            document.addEventListener('keydown', listenToKeyboard);
+            return () => {
+                document.removeEventListener('click', listenToMouse);
+                document.removeEventListener('keydown', listenToKeyboard);
+            };
+        }
+    }, [focused]);
+}
+export function useDisabledEffect({ disabled, setOpen, setFocused }) {
+    useEffect(() => {
+        if (disabled) {
+            setOpen(false);
+            setFocused(false);
+        }
+    }, [disabled]);
+}
+//# sourceMappingURL=hooks.js.map

package/dist/components/Select/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../src/components/Select/hooks.ts"],"names":[],"mappings":"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"}

package/dist/components/Select/index.d.ts

@@ -7,7 +7,7 @@ export type * from './types.js';
  * The default select from the browser is also rendered when `rich = true`, but it is only accessible when navigating with the keyboard
  * (accessibility).
  *
- * This Select is searchable! You just need to set `selectable = true`.
+ * This Select is searchable! You just need to set `searchable = true`.
  *
  * Attention: this component doesn't accept children, instead of manually writing the tag "option", use the property "options".
  *

package/dist/components/Select/index.js

@@ -9,7 +9,7 @@ import { SimpleSelect } from './SimpleSelect.js';
  * The default select from the browser is also rendered when `rich = true`, but it is only accessible when navigating with the keyboard
  * (accessibility).
  *
- * This Select is searchable! You just need to set `selectable = true`.
+ * This Select is searchable! You just need to set `searchable = true`.
  *
  * Attention: this component doesn't accept children, instead of manually writing the tag "option", use the property "options".
  *

package/dist/components/Select/types.d.ts

@@ -31,7 +31,7 @@ export interface CommonSelectProps<T> extends WithColorScheme {
      * @param option the item to compute a key for.
      * @returns a string key.
      */
-    renderKey?: (value: T) => string | number | undefined;
+    renderKey?: (option: T) => string | number | undefined;
     /**
      * Whether or not this input is required. This is also used to figure out if an empty option should be rendered or not.
      *
@@ -72,6 +72,10 @@ export interface CommonSelectProps<T> extends WithColorScheme {
      * @default 'rich'
      */
     type?: 'simple' | 'rich';
+    /**
+     * A text to show when no option is selected.
+     */
+    placeholder?: string;
 }
 export interface SimpleSelectProps<T> extends CommonSelectProps<T> {
     type: 'simple';
@@ -89,18 +93,18 @@ export interface RichSelectProps<T> extends CommonSelectProps<T> {
      * A function to render the option in the selectable list.
      *
      * The `renderLabel` function is used if this is not provided.
-     * @param value the option.
+     * @param option the option.
      * @returns the React Node.
      */
-    renderOption?: (value: T | undefined) => React.ReactNode;
+    renderOption?: (option: T | undefined) => React.ReactNode;
     /**
      * A function to render the selected option in the header.
      *
      * The `renderOption` function is used if this is not provided.
-     * @param value the option.
+     * @param option the option.
      * @returns the React Node.
      */
-    renderHeader?: (value: T | undefined) => React.ReactNode;
+    renderHeader?: (option: T | undefined) => React.ReactNode;
     /**
      * The maximum height of the options list in pixels.
      *
@@ -113,6 +117,10 @@ export interface RichSelectProps<T> extends CommonSelectProps<T> {
      */
     showArrow?: boolean;
     ref?: React.MutableRefObject<HTMLDivElement>;
+    /**
+     * Text to show in the header when no option is selected.
+     */
+    placeholder?: string;
 }
 export type BaseSelectProps<T> = SimpleSelectProps<T> | RichSelectProps<T>;
 export type SelectProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange'> & BaseSelectProps<T>;

package/dist/components/Select/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,eAAe;IAC3D;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;IAC1C;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,MAAM,CAAC;IAC/C;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACtD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC;IACnF;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC;IAClF;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,iBAAiB,CAAC,CAAC,CAAC;IAChE,IAAI,EAAE,QAAQ,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC;CAClE;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,iBAAiB,CAAC,CAAC,CAAC;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IACzD;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IACzD;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CAC9C;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAE1E,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,eAAe;IAC3D;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;IAC1C;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,MAAM,CAAC;IAC/C;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC;IACnF;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC;IAClF;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,iBAAiB,CAAC,CAAC,CAAC;IAChE,IAAI,EAAE,QAAQ,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC;CAClE;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,iBAAiB,CAAC,CAAC,CAAC;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAE1E,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA"}

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/Badge.js';
 export * from './components/Blockquote.js';
 export * from './components/Breadcrumb.js';
 export * from './components/Button.js';
+export * from './components/ButtonLink.js';
 export * from './components/Card.js';
 export * from './components/Checkbox.js';
 export * from './components/CheckboxGroup.js';
@@ -36,6 +37,7 @@ export * from './components/ProgressCircular.js';
 export * from './components/RadioGroup.js';
 export * from './components/Rating.js';
 export * from './components/Select/index.js';
+export * from './components/Select/MultiSelect.js';
 export * from './components/SelectBox.js';
 export * from './components/Skeleton.js';
 export * from './components/Slider.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}

package/dist/index.js

@@ -7,6 +7,7 @@ export * from './components/Badge.js';
 export * from './components/Blockquote.js';
 export * from './components/Breadcrumb.js';
 export * from './components/Button.js';
+export * from './components/ButtonLink.js';
 export * from './components/Card.js';
 export * from './components/Checkbox.js';
 export * from './components/CheckboxGroup.js';
@@ -36,6 +37,7 @@ export * from './components/ProgressCircular.js';
 export * from './components/RadioGroup.js';
 export * from './components/Rating.js';
 export * from './components/Select/index.js';
+export * from './components/Select/MultiSelect.js';
 export * from './components/SelectBox.js';
 export * from './components/Skeleton.js';
 export * from './components/Slider.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AAExC,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AAExC,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}

package/dist/utils/checkbox.js

@@ -54,7 +54,7 @@ export function useCheckboxGroupControls(params) {
         /**
          * Apply a new filter.
          */
-        setFilter: setFilter,
+        setFilter,
         /**
          * The options that should be passed to the checkbox group.
          */

package/dist/utils/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/utils/checkbox.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/utils/checkbox.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/citric-react",
-  "version": "0.25.1",
+  "version": "0.27.0",
   "author": "StackSpot",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Button.tsx

@@ -56,7 +56,7 @@ export type ButtonProps = Omit<React.JSX.IntrinsicElements['button'], 'onClick'>
  * 
  * @example
  * ```
- * <Button>My Button</MyButton>
+ * <Button>My Button</Button>
  * ```
  */
 export const Button = withRef((

package/src/components/ButtonLink.tsx

@@ -0,0 +1,45 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { Children, useMemo } from 'react'
+import { useCitricController } from '../context/hooks'
+import { withRef } from '../utils/react'
+import { BaseButtonProps } from './Button'
+import { asCitricProps, CitricComponent } from './CitricComponent'
+
+export type BaseButtonLinkProps = Omit<BaseButtonProps, 'onClick' | 'loading' | 'type'>
+export type ButtonLinkProps = React.JSX.IntrinsicElements['a'] & BaseButtonLinkProps
+
+/**
+ * Renders a link with the appearance of a button.
+ * 
+ * Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
+ * prop `analytics`.
+ * 
+ * @example
+ * ```
+ * <ButtonLink href="#">My Button Link</ButtonLink>
+ * ```
+ */
+export const ButtonLink = withRef((
+  { appearance, size, feedback, onClick, className, children, analytics, ...props }: ButtonLinkProps,
+) => {
+  const citric = useCitricController()
+  const isAllLowercase = useMemo(
+    () => !Children.toArray(children).some(c => typeof c === 'string' && c.toLocaleLowerCase() !== c),
+    [children],
+  )
+
+  const linkProps = {
+    component: 'button',
+    className: listToClass([size, appearance, isAllLowercase && 'short-text', className]),
+    onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
+      onClick?.(e)
+      citric?.onClickLink?.(e, analytics ?? false)
+    },
+    'data-feedback': feedback || undefined,
+    ...props,
+  } as const
+
+  return citric?.renderLink
+    ? citric.renderLink(asCitricProps({ ...linkProps, children }))
+    : <CitricComponent tag="a" {...linkProps}>{children}</CitricComponent>
+})

package/src/components/CheckboxGroup.tsx

@@ -68,6 +68,18 @@ export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
    * @returns true if the item should be disabled, false otherwise.
    */
   isDisabled?: (option: T) => boolean,
+  /**
+   * The space between options.
+   * 
+   * @default "8px"
+   */
+  gap?: string,
+  /**
+   * If set to false, the checkboxes will have tabIndex = -1.
+   * 
+   * @default true
+   */
+  focusable?: boolean,
 }
 
 export type CheckboxGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseCheckboxGroupProps<T>
@@ -79,6 +91,8 @@ export type CheckboxGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'on
  * 
  * Tip: if you need to implement features like "search" and "select all", use the hook `useCheckboxGroupControls`.
  * 
+ * Tip: If you need a checkbox group that doesn't occupy much height, consider using a MultiSelect.
+ * 
  * @example
  * 
  * ```
@@ -106,6 +120,8 @@ export const CheckboxGroup = withRef(
     isDisabled,
     colorScheme,
     style,
+    gap = '8px',
+    focusable = true,
     ...props
   }: CheckboxGroupProps<T>) {
     const items = useMemo(() => {
@@ -121,6 +137,7 @@ export const CheckboxGroup = withRef(
           checked={value.includes(o) || (!isNil(key) && valueKeys.includes(key))}
           onChange={(e) => onChange?.(e.target.checked ? [...(value ?? []), o] : (value?.filter(item => item != o) ?? []))}
           disabled={isDisabled?.(o)}
+          tabIndex={focusable ? undefined : -1}
         />
         return renderItem ? renderItem(checkbox, o) : (
           <CitricComponent tag="label" component={`${appearance}-row`} key={key} colorScheme={colorScheme}>
@@ -130,6 +147,6 @@ export const CheckboxGroup = withRef(
         )
       })
     }, [options, value, name, colorScheme, appearance])
-    return <Column {...props} style={{ gap: '8px', ...style }}>{items}</Column>
+    return <Column {...props} style={{ gap, ...style }}>{items}</Column>
   },
 )