@spaced-out/ui-design-system 0.3.39-beta.0 → 0.3.40-beta.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.40-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.3.39...v0.3.40-beta.0) (2025-05-14)
+
+
+### Features
+
+* [GDS-512] simple and generic typeahead story for paginated api calls & useDebounce hook ([#344](https://github.com/spaced-out/ui-design-system/issues/344)) ([c5b917d](https://github.com/spaced-out/ui-design-system/commit/c5b917d963031f75ca3c73b4bc06f89d224ce0c1))
+
+
+### Bug Fixes
+
+* fixes TLI story ([4e3d6d4](https://github.com/spaced-out/ui-design-system/commit/4e3d6d46852f125553127d3d1d5b6e5d746486a1))
+
+### [0.3.39](https://github.com/spaced-out/ui-design-system/compare/v0.3.39-beta.0...v0.3.39) (2025-05-13)
+
+
+### Bug Fixes
+
+* revert react 19 ([#341](https://github.com/spaced-out/ui-design-system/issues/341)) ([2132e96](https://github.com/spaced-out/ui-design-system/commit/2132e969e50675e14070a168721a5a27f736552f))
+
 ### [0.3.39-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.3.38...v0.3.39-beta.0) (2025-05-13)
 
 

package/lib/components/Chip/Chip.d.ts

@@ -165,6 +165,7 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
               type={iconType}
               size="small"
               ariaLabel="Dismiss"
+              disabled={disabled}
               onClick={(event) => {
                 event.stopPropagation();
 

package/lib/components/Chip/Chip.js

@@ -107,6 +107,7 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     type: iconType,
     size: "small",
     ariaLabel: "Dismiss",
+    disabled: disabled,
     onClick: event => {
       event.stopPropagation();
       if (!disabled && onDismiss) {

package/lib/components/Chip/Chip.js.flow

@@ -166,6 +166,7 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
               type={iconType}
               size="small"
               ariaLabel="Dismiss"
+              disabled={disabled}
               onClick={(event) => {
                 event.stopPropagation();
                 if (!disabled && onDismiss) {

package/lib/components/Icon/ClickableIcon.d.ts

@@ -12,6 +12,7 @@ type ClassNames = $ReadOnly<{
   button?: string;
 }>;
 export type ClickableIconProps = IconProps & {
+  disabled?: boolean;
   classNames?: ClassNames;
 };
 export const ClickableIcon: React$AbstractComponent<
@@ -26,6 +27,7 @@ export const ClickableIcon: React$AbstractComponent<
       className,
       // Deprecated for Clickable Icon
       classNames,
+      disabled,
       ...props
     }: ClickableIconProps,
     ref,
@@ -41,6 +43,7 @@ export const ClickableIcon: React$AbstractComponent<
       <UnstyledButton
         {...props}
         onClick={onClick}
+        disabled={disabled}
         onKeyDown={onKeyDownHandler}
         ariaLabel={ariaLabel}
         className={classify(
@@ -74,6 +77,7 @@ export type CloseIconProps = {
   className?: string;
   // Deprecated for Clickable Icon
   ariaLabel?: string;
+  disabled?: boolean;
   classNames?: ClassNames;
 };
 export const CloseIcon: React$AbstractComponent<

package/lib/components/Icon/ClickableIcon.js

@@ -22,6 +22,7 @@ const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className,
     // Deprecated for Clickable Icon
     classNames,
+    disabled,
     ...props
   } = _ref;
   const onKeyDownHandler = e => {
@@ -32,6 +33,7 @@ const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   };
   return /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, props, {
     onClick: onClick,
+    disabled: disabled,
     onKeyDown: onKeyDownHandler,
     ariaLabel: ariaLabel,
     className: (0, _classify.default)(_ClickableIconModule.default.button, {

package/lib/components/Icon/ClickableIcon.js.flow

@@ -20,6 +20,7 @@ type ClassNames = $ReadOnly<{
 
 export type ClickableIconProps = {
   ...IconProps,
+  disabled?: boolean,
   classNames?: ClassNames,
 };
 
@@ -34,6 +35,7 @@ export const ClickableIcon: React$AbstractComponent<
       onClick,
       className, // Deprecated for Clickable Icon
       classNames,
+      disabled,
       ...props
     }: ClickableIconProps,
     ref,
@@ -48,6 +50,7 @@ export const ClickableIcon: React$AbstractComponent<
       <UnstyledButton
         {...props}
         onClick={onClick}
+        disabled={disabled}
         onKeyDown={onKeyDownHandler}
         ariaLabel={ariaLabel}
         className={classify(
@@ -78,6 +81,7 @@ export type CloseIconProps = {
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   className?: string, // Deprecated for Clickable Icon
   ariaLabel?: string,
+  disabled?: boolean,
   classNames?: ClassNames,
 };
 

package/lib/components/SearchInput/SearchInput.module.css

@@ -29,7 +29,6 @@
   width: size42;
   align-items: center;
   justify-content: center;
-  align-items: center;
   margin-left: calc(size42 * -1);
 }
 

package/lib/components/TokenListInput/TokenListInput.d.ts

@@ -7,6 +7,7 @@ import {
   offset, // $FlowFixMe[untyped-import]
   useFloating,
 } from '@floating-ui/react';
+import without from 'lodash/without';
 import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {TEXT_COLORS} from '../../types/typography';
@@ -19,6 +20,7 @@ import {
   getFirstOptionFromGroup,
 } from '../../utils/token-list-input/token-list-input';
 import {ANCHOR_POSITION_TYPE, STRATEGY_TYPE} from '../ButtonDropdown';
+import {CircularLoader} from '../CircularLoader';
 import {Icon} from '../Icon';
 import type {InputProps} from '../Input';
 import type {BaseMenuProps} from '../Menu';
@@ -50,6 +52,7 @@ export type Props<T> = {
   clickAwayRef?: ClickAwayRefType;
   disabled?: boolean;
   // disables user interaction with the input
+  error?: boolean;
   errorText?: string;
   focusOnMount?: boolean;
   helperText?: string;
@@ -57,6 +60,7 @@ export type Props<T> = {
   inputPlaceholder?: string;
   limit?: number;
   // maximum number of values
+  isLoading?: boolean;
   locked?: boolean;
   onChange: (values: Array<T>) => unknown;
   // an onChange handler
@@ -79,12 +83,14 @@ export function TokenListInput<T>(props: Props<T>): React.ReactNode {
     classNames,
     clickAwayRef,
     disabled = false,
+    error,
     errorText,
     focusOnMount,
     helperText,
     inputValue = '',
     inputPlaceholder = '',
     limit = DEFAULT_LIMIT_VALUE,
+    isLoading,
     locked,
     onChange,
     menu,
@@ -144,6 +150,13 @@ export function TokenListInput<T>(props: Props<T>): React.ReactNode {
     }, 0);
   };
 
+  const removeValue = (value: T) => {
+    !disabled && !locked && onChange(without(values, value));
+    setTimeout(() => {
+      inputRef.current && inputRef.current.focus();
+    }, 0);
+  };
+
   const hideInput = values.length >= limit || disabled || locked;
 
   const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -227,7 +240,7 @@ export function TokenListInput<T>(props: Props<T>): React.ReactNode {
                   [css.inputDisabled]: disabled,
                   [css.medium]: size === 'medium',
                   [css.small]: size === 'small',
-                  [css.withError]: errorText,
+                  [css.withError]: error,
                   [css.inputLocked]: locked,
                 },
                 classNames?.box,
@@ -239,7 +252,7 @@ export function TokenListInput<T>(props: Props<T>): React.ReactNode {
                 resolveTokenValue={resolveTokenValue}
                 disabled={disabled}
                 locked={locked}
-                onChange={onChange}
+                onDismiss={removeValue}
               />
               {!hideInput && (
                 <input
@@ -271,6 +284,11 @@ export function TokenListInput<T>(props: Props<T>): React.ReactNode {
                   autoComplete="off"
                 />
               )}
+              {isLoading && (
+                <div className={css.loaderContainer}>
+                  <CircularLoader size="small" colorToken="colorFillPrimary" />
+                </div>
+              )}
               {locked && (
                 <Icon
                   name="lock"
@@ -282,7 +300,7 @@ export function TokenListInput<T>(props: Props<T>): React.ReactNode {
             </div>
             {!isOpen && (Boolean(helperText) || errorText) && (
               <div className={css.footerTextContainer}>
-                {errorText ? (
+                {error && errorText ? (
                   <BodySmall color={TEXT_COLORS.danger}>{errorText}</BodySmall>
                 ) : typeof helperText === 'string' ? (
                   <BodySmall color={TEXT_COLORS.secondary}>

package/lib/components/TokenListInput/TokenListInput.js

@@ -7,6 +7,7 @@ exports.DEFAULT_LIMIT_VALUE = void 0;
 exports.TokenListInput = TokenListInput;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
+var _without = _interopRequireDefault(require("lodash/without"));
 var _size = require("../../styles/variables/_size");
 var _space = require("../../styles/variables/_space");
 var _typography = require("../../types/typography");
@@ -15,6 +16,7 @@ var _clickAway = require("../../utils/click-away");
 var _mergeRefs = require("../../utils/merge-refs");
 var _tokenListInput = require("../../utils/token-list-input/token-list-input");
 var _ButtonDropdown = require("../ButtonDropdown");
+var _CircularLoader = require("../CircularLoader");
 var _Icon = require("../Icon");
 var _Menu = require("../Menu");
 var _Text = require("../Text");
@@ -31,12 +33,14 @@ function TokenListInput(props) {
     classNames,
     clickAwayRef,
     disabled = false,
+    error,
     errorText,
     focusOnMount,
     helperText,
     inputValue = '',
     inputPlaceholder = '',
     limit = DEFAULT_LIMIT_VALUE,
+    isLoading,
     locked,
     onChange,
     menu,
@@ -95,6 +99,12 @@ function TokenListInput(props) {
       inputRef.current && inputRef.current.focus();
     }, 0);
   };
+  const removeValue = value => {
+    !disabled && !locked && onChange((0, _without.default)(values, value));
+    setTimeout(() => {
+      inputRef.current && inputRef.current.focus();
+    }, 0);
+  };
   const hideInput = values.length >= limit || disabled || locked;
   const handleInputKeyDown = event => {
     const value = event.currentTarget.value;
@@ -169,7 +179,7 @@ function TokenListInput(props) {
         [_TokenListInputModule.default.inputDisabled]: disabled,
         [_TokenListInputModule.default.medium]: size === 'medium',
         [_TokenListInputModule.default.small]: size === 'small',
-        [_TokenListInputModule.default.withError]: errorText,
+        [_TokenListInputModule.default.withError]: error,
         [_TokenListInputModule.default.inputLocked]: locked
       }, classNames?.box),
       ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef])
@@ -178,7 +188,7 @@ function TokenListInput(props) {
       resolveTokenValue: resolveTokenValue,
       disabled: disabled,
       locked: locked,
-      onChange: onChange
+      onDismiss: removeValue
     }), !hideInput && /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
       ref: inputRef,
       type: "text",
@@ -198,6 +208,11 @@ function TokenListInput(props) {
         [_TokenListInputModule.default.inputSmall]: size === 'small'
       }, classNames?.input),
       autoComplete: "off"
+    })), isLoading && /*#__PURE__*/React.createElement("div", {
+      className: _TokenListInputModule.default.loaderContainer
+    }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
+      size: "small",
+      colorToken: "colorFillPrimary"
     })), locked && /*#__PURE__*/React.createElement(_Icon.Icon, {
       name: "lock",
       color: disabled ? 'disabled' : 'secondary',
@@ -205,7 +220,7 @@ function TokenListInput(props) {
       className: _TokenListInputModule.default.lockIcon
     })), !isOpen && (Boolean(helperText) || errorText) && /*#__PURE__*/React.createElement("div", {
       className: _TokenListInputModule.default.footerTextContainer
-    }, errorText ? /*#__PURE__*/React.createElement(_Text.BodySmall, {
+    }, error && errorText ? /*#__PURE__*/React.createElement(_Text.BodySmall, {
       color: _typography.TEXT_COLORS.danger
     }, errorText) : typeof helperText === 'string' ? /*#__PURE__*/React.createElement(_Text.BodySmall, {
       color: _typography.TEXT_COLORS.secondary

package/lib/components/TokenListInput/TokenListInput.js.flow

@@ -11,6 +11,7 @@ import {
   // $FlowFixMe[untyped-import]
   useFloating,
 } from '@floating-ui/react';
+import without from 'lodash/without';
 
 import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
@@ -24,6 +25,7 @@ import {
   getFirstOptionFromGroup,
 } from '../../utils/token-list-input/token-list-input';
 import {ANCHOR_POSITION_TYPE, STRATEGY_TYPE} from '../ButtonDropdown';
+import {CircularLoader} from '../CircularLoader';
 import {Icon} from '../Icon';
 import type {InputProps} from '../Input';
 import type {BaseMenuProps} from '../Menu';
@@ -67,12 +69,14 @@ export type Props<T> = {
   classNames?: ClassNames,
   clickAwayRef?: ClickAwayRefType,
   disabled?: boolean, // disables user interaction with the input
+  error?: boolean,
   errorText?: string,
   focusOnMount?: boolean,
   helperText?: string,
   inputValue?: string,
   inputPlaceholder?: string,
   limit?: number, // maximum number of values
+  isLoading?: boolean,
   locked?: boolean,
   onChange: (values: Array<T>) => mixed, // an onChange handler
   onInputBlur?: (e: SyntheticEvent<HTMLInputElement>) => mixed,
@@ -94,12 +98,14 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
     classNames,
     clickAwayRef,
     disabled = false,
+    error,
     errorText,
     focusOnMount,
     helperText,
     inputValue = '',
     inputPlaceholder = '',
     limit = DEFAULT_LIMIT_VALUE,
+    isLoading,
     locked,
     onChange,
     menu,
@@ -158,6 +164,14 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
       inputRef.current && inputRef.current.focus();
     }, 0);
   };
+
+  const removeValue = (value: T) => {
+    !disabled && !locked && onChange(without(values, value));
+    setTimeout(() => {
+      inputRef.current && inputRef.current.focus();
+    }, 0);
+  };
+
   const hideInput = values.length >= limit || disabled || locked;
 
   const handleInputKeyDown = (
@@ -238,7 +252,7 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
                   [css.inputDisabled]: disabled,
                   [css.medium]: size === 'medium',
                   [css.small]: size === 'small',
-                  [css.withError]: errorText,
+                  [css.withError]: error,
                   [css.inputLocked]: locked,
                 },
                 classNames?.box,
@@ -250,7 +264,7 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
                 resolveTokenValue={resolveTokenValue}
                 disabled={disabled}
                 locked={locked}
-                onChange={onChange}
+                onDismiss={removeValue}
               />
               {!hideInput && (
                 <input
@@ -282,6 +296,11 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
                   autoComplete="off"
                 />
               )}
+              {isLoading && (
+                <div className={css.loaderContainer}>
+                  <CircularLoader size="small" colorToken="colorFillPrimary" />
+                </div>
+              )}
               {locked && (
                 <Icon
                   name="lock"
@@ -293,7 +312,7 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
             </div>
             {!isOpen && (Boolean(helperText) || errorText) && (
               <div className={css.footerTextContainer}>
-                {errorText ? (
+                {error && errorText ? (
                   <BodySmall color={TEXT_COLORS.danger}>{errorText}</BodySmall>
                 ) : typeof helperText === 'string' ? (
                   <BodySmall color={TEXT_COLORS.secondary}>

package/lib/components/TokenListInput/TokenListInput.module.css

@@ -4,20 +4,15 @@
   spaceXSmall,
   spaceXXSmall
 ) from '../../styles/variables/_space.css';
-
 @value (
-  colorFocusPrimary,
   colorFocusDanger,
-
+  colorFillPrimary,
   colorFillDisabled,
-
-  colorBorderPrimary,
-  colorBorderTertiary,
+  colorFocusPrimary,
   colorBorderDanger,
-
-  colorFillPrimary
+  colorBorderPrimary,
+  colorBorderTertiary
 ) from '../../styles/variables/_color.css';
-
 @value (
   borderWidthPrimary,
   borderRadiusMedium,
@@ -25,11 +20,11 @@
   borderWidthNone,
   borderWidthTertiary
 ) from '../../styles/variables/_border.css';
-
 @value (
   size2,
-  size8,
   size4,
+  size8,
+  size26,
   size228,
   sizeFluid
 ) from '../../styles/variables/_size.css';
@@ -89,6 +84,7 @@
   position: relative;
   flex-flow: column;
   width: sizeFluid;
+  gap: spaceXXSmall;
 }
 
 .tokenListHeader {
@@ -145,3 +141,12 @@
   justify-content: center;
   margin-left: auto;
 }
+
+.loaderContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: size26;
+  height: size26;
+  margin-left: auto;
+}

package/lib/components/TokenListInput/TokenValueChips.d.ts

@@ -1,18 +1,17 @@
 import * as React from 'react';
-import without from 'lodash/without';
 import {Chip} from '../Chip';
 import {Tooltip} from '../Tooltip';
 type Props<T> = {
   values: Array<T>;
   disabled?: boolean;
   locked?: boolean;
-  onChange: (arg0: Array<T>) => unknown;
+  onDismiss: (arg0: T) => unknown;
   resolveTokenValue?: (arg0: ResolveTokenValueProps<T>) => React.ReactNode;
 };
 export type ResolveTokenValueProps<T> = {
   token: T;
   disabled?: boolean;
-  onDismiss?: (e: React.SyntheticEvent<HTMLElement>) => unknown;
+  onDismiss?: (arg0: T) => unknown;
   locked?: boolean;
 };
 
@@ -27,7 +26,7 @@ function defaultResolveTokenValue<T>({
     <Tooltip body={token?.label}>
       <Chip // $FlowFixMe - assumes token has key
         key={token?.key}
-        onDismiss={onDismiss}
+        onDismiss={(_) => onDismiss?.(token)}
         dismissable={true}
         semantic={'primary'}
         disabled={disabled}
@@ -44,14 +43,10 @@ export function TokenValueChips<T>(props: Props<T>): React.ReactNode {
     values,
     disabled,
     locked,
-    onChange,
+    onDismiss,
     resolveTokenValue = defaultResolveTokenValue,
   } = props;
   return values.map((token) => {
-    const onDismiss = (e) => {
-      !disabled && !locked && onChange(without(values, token));
-    };
-
     const resolvedTokenValue = resolveTokenValue({
       token,
       onDismiss,

package/lib/components/TokenListInput/TokenValueChips.js

@@ -5,10 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TokenValueChips = TokenValueChips;
 var React = _interopRequireWildcard(require("react"));
-var _without = _interopRequireDefault(require("lodash/without"));
 var _Chip = require("../Chip");
 var _Tooltip = require("../Tooltip");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
@@ -19,6 +17,7 @@ function defaultResolveTokenValue(_ref) {
     onDismiss
   } = _ref;
   // $FlowFixMe[prop-missing] - assumes token has label and key
+
   return (
     /*#__PURE__*/
     // $FlowFixMe - assumes token has label and key
@@ -28,7 +27,7 @@ function defaultResolveTokenValue(_ref) {
     // $FlowFixMe - assumes token has key
     , {
       key: token?.key,
-      onDismiss: onDismiss,
+      onDismiss: _ => onDismiss?.(token),
       dismissable: true,
       semantic: 'primary',
       disabled: disabled
@@ -40,13 +39,10 @@ function TokenValueChips(props) {
     values,
     disabled,
     locked,
-    onChange,
+    onDismiss,
     resolveTokenValue = defaultResolveTokenValue
   } = props;
   return values.map(token => {
-    const onDismiss = e => {
-      !disabled && !locked && onChange((0, _without.default)(values, token));
-    };
     const resolvedTokenValue = resolveTokenValue({
       token,
       onDismiss,

package/lib/components/TokenListInput/TokenValueChips.js.flow

@@ -1,6 +1,5 @@
 // @flow strict
 import * as React from 'react';
-import without from 'lodash/without';
 
 import {Chip} from '../Chip';
 import {Tooltip} from '../Tooltip';
@@ -10,14 +9,14 @@ type Props<T> = {
   values: Array<T>,
   disabled?: boolean,
   locked?: boolean,
-  onChange: (Array<T>) => mixed,
+  onDismiss: (T) => mixed,
   resolveTokenValue?: (ResolveTokenValueProps<T>) => React.Node,
 };
 
 export type ResolveTokenValueProps<T> = {
   token: T,
   disabled?: boolean,
-  onDismiss?: (e: SyntheticEvent<HTMLElement>) => mixed,
+  onDismiss?: (T) => mixed,
   locked?: boolean,
 };
 
@@ -27,13 +26,14 @@ function defaultResolveTokenValue<T>({
   onDismiss,
 }: ResolveTokenValueProps<T>): React.Node {
   // $FlowFixMe[prop-missing] - assumes token has label and key
+
   return (
     // $FlowFixMe - assumes token has label and key
     <Tooltip body={token?.label}>
       <Chip
         // $FlowFixMe - assumes token has key
         key={token?.key}
-        onDismiss={onDismiss}
+        onDismiss={(_) => onDismiss?.(token)}
         dismissable={true}
         semantic={'primary'}
         disabled={disabled}
@@ -50,14 +50,11 @@ export function TokenValueChips<T>(props: Props<T>): React.Node {
     values,
     disabled,
     locked,
-    onChange,
+    onDismiss,
     resolveTokenValue = defaultResolveTokenValue,
   } = props;
 
   return values.map((token) => {
-    const onDismiss = (e) => {
-      !disabled && !locked && onChange(without(values, token));
-    };
     const resolvedTokenValue = resolveTokenValue({
       token,
       onDismiss,

package/lib/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export * from './useArbitraryOptionAddition';
 export * from './useCopyToClipboard';
+export * from './useDebounce';
 export * from './useFileUpload';
 export * from './useFilteredOptions';
 export * from './useInputState';

package/lib/hooks/index.js

@@ -25,6 +25,17 @@ Object.keys(_useCopyToClipboard).forEach(function (key) {
     }
   });
 });
+var _useDebounce = require("./useDebounce");
+Object.keys(_useDebounce).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useDebounce[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useDebounce[key];
+    }
+  });
+});
 var _useFileUpload = require("./useFileUpload");
 Object.keys(_useFileUpload).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/hooks/index.js.flow

@@ -2,6 +2,7 @@
 
 export * from './useArbitraryOptionAddition';
 export * from './useCopyToClipboard';
+export * from './useDebounce';
 export * from './useFileUpload';
 export * from './useFilteredOptions';
 export * from './useInputState';

package/lib/hooks/useDebounce/index.d.ts

@@ -0,0 +1 @@
+export * from './useDebounce';

package/lib/hooks/useDebounce/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useDebounce = require("./useDebounce");
+Object.keys(_useDebounce).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useDebounce[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useDebounce[key];
+    }
+  });
+});

package/lib/hooks/useDebounce/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useDebounce';

package/lib/hooks/useDebounce/useDebounce.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export const useDebounce = <T>(value: T, delay: number): T => {
+  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
+  React.useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+};

package/lib/hooks/useDebounce/useDebounce.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDebounce = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+  React.useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+};
+exports.useDebounce = useDebounce;

package/lib/hooks/useDebounce/useDebounce.js.flow

@@ -0,0 +1,17 @@
+// @flow strict
+
+import * as React from 'react';
+
+
+export const useDebounce = <T>(value: T, delay: number): T => {
+  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
+  React.useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.39-beta.0",
+  "version": "0.3.40-beta.0",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -40,8 +40,8 @@
     "Sense"
   ],
   "peerDependencies": {
-    "react": ">=19.1.0",
-    "react-dom": ">=19.1.0"
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   },
   "dependencies": {
     "@floating-ui/react": "^0.24.0",
@@ -106,8 +106,8 @@
     "lint-staged": "^10.5.1",
     "paths.macro": "^3.0.1",
     "prettier": "^2.5.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "rimraf": "^3.0.2",
     "simple-git": "^3.12.0",
     "standard-version": "^9.5.0",