@redsift/design-system 11.6.0-muiv5-alpha.4 → 11.6.0-muiv5-alpha.6

package/_internal/LinkButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.js","sources":["../../src/components/link-button/LinkButton.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledLink } from '../link';\nimport { LinkButtonProps } from './types';\nimport { useTheme } from '../theme';\nimport { Icon } from '../icon';\n\nconst COMPONENT_NAME = 'LinkButton';\nconst CLASSNAME = 'redsift-link-button';\n\n/**\n * The LinkButton is a semantic button that looks like a link.\n *\n * For a semantic button that looks like a button, please use the Button component.\n * For a semantic link that looks like a link, please use the Link component.\n * For a semantic link that looks like a button, please use the ButtonLink component.\n */\nexport const LinkButton: Comp<LinkButtonProps, HTMLButtonElement> = forwardRef((props, ref) => {\n  const buttonRef = ref || useRef<HTMLButtonElement>();\n\n  const {\n    children,\n    className,\n    color = 'primary',\n    disabled,\n    isDisabled: propsIsDisabled,\n    leftIcon,\n    leftIconProps,\n    rightIcon,\n    rightIconProps,\n    theme: propsTheme,\n    ...forwardedProps\n  } = props;\n  const isDisabled = propsIsDisabled || disabled;\n\n  const theme = useTheme(propsTheme);\n\n  return (\n    <StyledLink\n      as=\"button\"\n      {...forwardedProps}\n      $color={color}\n      $isDisabled={isDisabled || disabled}\n      $theme={theme}\n      aria-disabled={isDisabled || disabled}\n      className={classNames(LinkButton.className, className)}\n      disabled={isDisabled || disabled}\n      // @ts-ignore\n      ref={buttonRef as RefObject<HTMLButtonElement>}\n    >\n      {leftIcon || rightIcon ? (\n        <>\n          {leftIcon ? (\n            <Icon icon={leftIcon} aria-hidden=\"true\" className=\"left\" size=\"xsmall\" {...leftIconProps} />\n          ) : null}\n          <span className=\"text\">{children}</span>\n          {rightIcon ? (\n            <Icon icon={rightIcon} aria-hidden=\"true\" className=\"right\" size=\"xsmall\" {...rightIconProps} />\n          ) : null}\n        </>\n      ) : (\n        children\n      )}\n    </StyledLink>\n  );\n});\nLinkButton.className = CLASSNAME;\nLinkButton.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","LinkButton","forwardRef","props","ref","buttonRef","useRef","children","className","color","disabled","isDisabled","propsIsDisabled","leftIcon","leftIconProps","rightIcon","rightIconProps","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","StyledLink","_extends","as","$color","$isDisabled","$theme","classNames","Fragment","Icon","icon","size","displayName"],"mappings":";;;;;;;;AAQA,MAAMA,cAAc,GAAG,YAAY,CAAA;AACnC,MAAMC,SAAS,GAAG,qBAAqB,CAAA;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAoD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;AAC7F,EAAA,MAAMC,SAAS,GAAGD,GAAG,IAAIE,MAAM,EAAqB,CAAA;EAEpD,MAAM;MACJC,QAAQ;MACRC,SAAS;AACTC,MAAAA,KAAK,GAAG,SAAS;MACjBC,QAAQ;AACRC,MAAAA,UAAU,EAAEC,eAAe;MAC3BC,QAAQ;MACRC,aAAa;MACbC,SAAS;MACTC,cAAc;AACdC,MAAAA,KAAK,EAAEC,UAAAA;AAET,KAAC,GAAGf,KAAK;AADJgB,IAAAA,cAAc,GAAAC,wBAAA,CACfjB,KAAK,EAAAkB,SAAA,CAAA,CAAA;AACT,EAAA,MAAMV,UAAU,GAAGC,eAAe,IAAIF,QAAQ,CAAA;AAE9C,EAAA,MAAMO,KAAK,GAAGK,QAAQ,CAACJ,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEK,cAAA,CAAAC,aAAA,CAACC,UAAU,EAAAC,QAAA,CAAA;AACTC,IAAAA,EAAE,EAAC,QAAA;AAAQ,GAAA,EACPR,cAAc,EAAA;AAClBS,IAAAA,MAAM,EAAEnB,KAAM;IACdoB,WAAW,EAAElB,UAAU,IAAID,QAAS;AACpCoB,IAAAA,MAAM,EAAEb,KAAM;IACd,eAAeN,EAAAA,UAAU,IAAID,QAAS;IACtCF,SAAS,EAAEuB,UAAU,CAAC9B,UAAU,CAACO,SAAS,EAAEA,SAAS,CAAE;IACvDE,QAAQ,EAAEC,UAAU,IAAID,QAAAA;AACxB;AAAA;AACAN,IAAAA,GAAG,EAAEC,SAAAA;GAEJQ,CAAAA,EAAAA,QAAQ,IAAIE,SAAS,gBACpBQ,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAS,QAAA,EACGnB,IAAAA,EAAAA,QAAQ,gBACPU,cAAA,CAAAC,aAAA,CAACS,IAAI,EAAAP,QAAA,CAAA;AAACQ,IAAAA,IAAI,EAAErB,QAAS;AAAC,IAAA,aAAA,EAAY,MAAM;AAACL,IAAAA,SAAS,EAAC,MAAM;AAAC2B,IAAAA,IAAI,EAAC,QAAA;GAAarB,EAAAA,aAAa,CAAG,CAAC,GAC3F,IAAI,eACRS,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMhB,IAAAA,SAAS,EAAC,MAAA;GAAQD,EAAAA,QAAe,CAAC,EACvCQ,SAAS,gBACRQ,cAAA,CAAAC,aAAA,CAACS,IAAI,EAAAP,QAAA,CAAA;AAACQ,IAAAA,IAAI,EAAEnB,SAAU;AAAC,IAAA,aAAA,EAAY,MAAM;AAACP,IAAAA,SAAS,EAAC,OAAO;AAAC2B,IAAAA,IAAI,EAAC,QAAA;GAAanB,EAAAA,cAAc,CAAG,CAAC,GAC9F,IACJ,CAAC,GAEHT,QAEQ,CAAC,CAAA;AAEjB,CAAC,EAAC;AACFN,UAAU,CAACO,SAAS,GAAGR,SAAS,CAAA;AAChCC,UAAU,CAACmC,WAAW,GAAGrC,cAAc;;;;"}

package/_internal/Listbox2.js

@@ -0,0 +1,274 @@
+import { b as _objectWithoutProperties, c as _extends, _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useCallback, useRef, useReducer, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import { a as ListboxActionType, d as ListboxContext, b as ListboxVariant, c as LISTBOX_INITIAL_STATE } from './useListboxItem.js';
+import styled, { css } from 'styled-components';
+import { j as baseContainer } from './styles4.js';
+import { F as Flexbox } from './Flexbox2.js';
+import { u as useFocusOnList, F as FocusWithinGroup } from './useFocusOnList.js';
+import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
+import { u as useId } from './useId.js';
+import { C as ConditionalWrapper } from './ConditionalWrapper.js';
+
+const _excluded$2 = ["children", "id", "isDisabled", "context"];
+const ActiveDescendantListbox = /*#__PURE__*/forwardRef((props, ref) => {
+  var _context$state$active;
+  const {
+      children,
+      id,
+      isDisabled,
+      context
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$2);
+  const {
+    activedescendant,
+    handleKeyDown: handleFocusKeyDown,
+    handleFocus,
+    handleBlur
+  } = useFocusOnList();
+  const handleKeyDown = useCallback(event => {
+    handleFocusKeyDown(event);
+    const code = event.code;
+    if (code === 'Enter' || code === 'Space') {
+      if (context.state.selectionMode === 'multiple') {
+        var _activedescendant$;
+        context.dispatch({
+          type: ListboxActionType.TOGGLE,
+          payload: {
+            value: (_activedescendant$ = activedescendant === null || activedescendant === void 0 ? void 0 : activedescendant[1]) !== null && _activedescendant$ !== void 0 ? _activedescendant$ : '',
+            activedescendant
+          }
+        });
+      } else {
+        var _activedescendant$2;
+        context.dispatch({
+          type: ListboxActionType.SET,
+          payload: {
+            values: [(_activedescendant$2 = activedescendant === null || activedescendant === void 0 ? void 0 : activedescendant[1]) !== null && _activedescendant$2 !== void 0 ? _activedescendant$2 : ''],
+            activedescendant
+          }
+        });
+      }
+    }
+  }, [activedescendant]);
+  return /*#__PURE__*/React__default.createElement(Flexbox, _extends({
+    flexDirection: "column",
+    gap: "8px"
+  }, forwardedProps, {
+    "aria-disabled": isDisabled,
+    ref: ref,
+    id: id,
+    role: "listbox",
+    "aria-activedescendant": (_context$state$active = context.state.activedescendant) === null || _context$state$active === void 0 ? void 0 : _context$state$active[0],
+    "aria-multiselectable": context.state.selectionMode === 'multiple',
+    tabIndex: 0,
+    style: {
+      outline: 'none'
+    },
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseDown: event => event.preventDefault(),
+    onMouseLeave: handleBlur,
+    onKeyDown: handleKeyDown
+  }), /*#__PURE__*/React__default.createElement(ListboxContext.Provider, {
+    value: context
+  }, children));
+});
+
+const _excluded$1 = ["children", "id", "isDisabled", "context"];
+const RovingTabindexListbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      id,
+      isDisabled,
+      context
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+  return /*#__PURE__*/React__default.createElement(Flexbox, _extends({
+    flexDirection: "column",
+    gap: "8px"
+  }, forwardedProps, {
+    "aria-disabled": isDisabled,
+    ref: ref,
+    id: id,
+    role: "listbox",
+    "aria-multiselectable": context.state.selectionMode === 'multiple'
+  }), /*#__PURE__*/React__default.createElement(ListboxContext.Provider, {
+    value: context
+  }, children));
+});
+
+/**
+ * Component style.
+ */
+const StyledListbox = styled.div`
+  ${baseContainer}
+  outline: none;
+
+  ${_ref => {
+  let {
+    $variant,
+    $isDisabled,
+    $isInvalid
+  } = _ref;
+  return $variant === ListboxVariant.standalone ? css`
+          span.redsift-listbox-label {
+            font-family: var(--redsift-typography-body-font-family);
+            font-weight: var(--redsift-typography-body-font-weight);
+            font-size: var(--redsift-typography-body-font-size);
+            line-height: var(--redsift-typography-body-line-height);
+
+            color: var(--redsift-color-neutral-black);
+            ${$isDisabled ? `
+          color: var(--redsift-color-neutral-mid-grey);
+        ` : ''}
+            ${$isInvalid ? `
+          color: var(--redsift-color-red-n);
+        ` : ''}
+          }
+
+          .redsift-listbox-list {
+            border: 1px solid var(--redsift-color-neutral-mid-grey);
+            padding: 4px;
+            min-width: 200px;
+          }
+        ` : '';
+}}
+`;
+
+const ListboxReducer = (state, action) => {
+  switch (action.type) {
+    case ListboxActionType.TOGGLE:
+      {
+        if (state.isReadOnly || state.isDisabled) {
+          return state;
+        }
+        if (!state.selectedValues.includes(action.payload.value)) {
+          return _objectSpread2(_objectSpread2({}, state), {}, {
+            selectedValues: state.selectedValues.concat(action.payload.value)
+          }, action.payload.activedescendant && {
+            activedescendant: action.payload.activedescendant
+          });
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedValues: state.selectedValues.filter(existingValue => existingValue !== action.payload.value)
+        }, action.payload.activedescendant && {
+          activedescendant: action.payload.activedescendant
+        });
+      }
+    case ListboxActionType.SET:
+      {
+        if (state.isReadOnly || state.isDisabled) {
+          return state;
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedValues: action.payload.values
+        }, action.payload.activedescendant && {
+          activedescendant: action.payload.activedescendant
+        });
+      }
+    case ListboxActionType.UPDATE_OPTIONS:
+      {
+        return _objectSpread2(_objectSpread2({}, state), action.payload);
+      }
+    default:
+      return state;
+  }
+};
+
+const _excluded = ["children", "className", "defaultValues", "direction", "focusOnClick", "focusType", "id", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "loopAround", "onChange", "selectionMode", "values", "variant"];
+const COMPONENT_NAME = 'Listbox';
+const CLASSNAME = 'redsift-listbox';
+
+/**
+ * The Listbox component.
+ * Can be used as controlled or uncontrolled.
+ */
+const Listbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      defaultValues,
+      direction,
+      focusOnClick = false,
+      focusType = 'roving-tabindex',
+      id: propsId,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      label,
+      loopAround,
+      onChange,
+      selectionMode = 'single',
+      values,
+      variant = ListboxVariant.standalone
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const _ref = useRef();
+  const divRef = ref !== null && ref !== void 0 ? ref : _ref;
+  const [state, dispatch] = useReducer(ListboxReducer, _objectSpread2(_objectSpread2({}, LISTBOX_INITIAL_STATE), {}, {
+    isDisabled,
+    isReadOnly,
+    selectedValues: values || defaultValues || [],
+    selectionMode
+  }));
+  useEffect(() => {
+    if (values && values.length >= 0) {
+      dispatch({
+        type: ListboxActionType.SET,
+        payload: {
+          values
+        }
+      });
+    }
+  }, [values]);
+  const context = useMemo(() => ({
+    state,
+    dispatch
+  }), [state]);
+  useEffect(() => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(state.selectedValues);
+  }, [state.selectedValues]);
+  warnIfNoAccessibleLabelFound(props, [label]);
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    wrapper: children => /*#__PURE__*/React__default.createElement(StyledListbox, _extends({
+      flexDirection: "column",
+      gap: "8px"
+    }, forwardedProps, {
+      $isDisabled: isDisabled,
+      $isInvalid: isInvalid || isRequired && state.selectedValues.length === 0,
+      $isReadOnly: isReadOnly,
+      className: classNames(Listbox.className, className),
+      ref: divRef,
+      id: id,
+      $variant: variant
+    }), children),
+    condition: variant === ListboxVariant.standalone
+  }, /*#__PURE__*/React__default.createElement(FocusWithinGroup, {
+    direction: direction,
+    focusOnClick: focusOnClick,
+    loopAround: loopAround,
+    focusType: focusType
+  }, label ? /*#__PURE__*/React__default.createElement("span", {
+    id: `${id}-label`,
+    className: `${Listbox.className}-label`
+  }, label, isRequired ? /*#__PURE__*/React__default.createElement("span", {
+    "aria-hidden": "true"
+  }, ' *') : null) : null, focusType === 'roving-tabindex' ? /*#__PURE__*/React__default.createElement(RovingTabindexListbox, _extends({}, forwardedProps, {
+    className: `${Listbox.className}-list`,
+    context: context,
+    ref: divRef
+  }), children) : /*#__PURE__*/React__default.createElement(ActiveDescendantListbox, _extends({}, forwardedProps, {
+    className: `${Listbox.className}-list`,
+    context: context,
+    ref: divRef
+  }), children)));
+});
+Listbox.className = CLASSNAME;
+Listbox.displayName = COMPONENT_NAME;
+
+export { ActiveDescendantListbox as A, Listbox as L, RovingTabindexListbox as R, ListboxReducer as a };
+//# sourceMappingURL=Listbox2.js.map

package/_internal/Listbox2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox2.js","sources":["../../src/components/listbox/ActiveDescendantListbox.tsx","../../src/components/listbox/RovingTabindexListbox.tsx","../../src/components/listbox/styles.ts","../../src/components/listbox/reducer.ts","../../src/components/listbox/Listbox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, KeyboardEvent } from 'react';\nimport { ListboxActionType, ListboxContextProps, ListboxProps } from './types';\nimport { ListboxContext } from './context';\nimport { Flexbox } from '../flexbox';\nimport { useFocusOnList } from '../focus-within-group';\n\nexport const ActiveDescendantListbox = forwardRef<\n  HTMLDivElement,\n  Omit<ListboxProps, 'onChange'> & { context: ListboxContextProps }\n>((props, ref) => {\n  const { children, id, isDisabled, context, ...forwardedProps } = props;\n\n  const { activedescendant, handleKeyDown: handleFocusKeyDown, handleFocus, handleBlur } = useFocusOnList();\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      handleFocusKeyDown(event);\n      const code = event.code;\n      if (code === 'Enter' || code === 'Space') {\n        if (context.state.selectionMode === 'multiple') {\n          context.dispatch({\n            type: ListboxActionType.TOGGLE,\n            payload: { value: activedescendant?.[1] ?? '', activedescendant },\n          });\n        } else {\n          context.dispatch({\n            type: ListboxActionType.SET,\n            payload: {\n              values: [activedescendant?.[1] ?? ''],\n              activedescendant,\n            },\n          });\n        }\n      }\n    },\n    [activedescendant]\n  );\n\n  return (\n    <Flexbox\n      flexDirection=\"column\"\n      gap=\"8px\"\n      {...forwardedProps}\n      aria-disabled={isDisabled}\n      ref={ref}\n      id={id}\n      role=\"listbox\"\n      aria-activedescendant={context.state.activedescendant?.[0]}\n      aria-multiselectable={context.state.selectionMode === 'multiple'}\n      tabIndex={0}\n      style={{ outline: 'none' }}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseDown={(event) => event.preventDefault()}\n      onMouseLeave={handleBlur}\n      onKeyDown={handleKeyDown}\n    >\n      <ListboxContext.Provider value={context}>{children}</ListboxContext.Provider>\n    </Flexbox>\n  );\n});\n","import React, { forwardRef } from 'react';\nimport { ListboxContextProps, ListboxProps } from './types';\nimport { ListboxContext } from './context';\nimport { Flexbox } from '../flexbox';\n\nexport const RovingTabindexListbox = forwardRef<\n  HTMLDivElement,\n  Omit<ListboxProps, 'onChange'> & { context: ListboxContextProps }\n>((props, ref) => {\n  const { children, id, isDisabled, context, ...forwardedProps } = props;\n\n  return (\n    <Flexbox\n      flexDirection=\"column\"\n      gap=\"8px\"\n      {...forwardedProps}\n      aria-disabled={isDisabled}\n      ref={ref}\n      id={id}\n      role=\"listbox\"\n      aria-multiselectable={context.state.selectionMode === 'multiple'}\n    >\n      <ListboxContext.Provider value={context}>{children}</ListboxContext.Provider>\n    </Flexbox>\n  );\n});\n","import styled, { css } from 'styled-components';\nimport { ListboxVariant, StyledListboxProps } from './types';\nimport { baseContainer } from '../shared';\n\n/**\n * Component style.\n */\nexport const StyledListbox = styled.div<StyledListboxProps>`\n  ${baseContainer}\n  outline: none;\n\n  ${({ $variant, $isDisabled, $isInvalid }) =>\n    $variant === ListboxVariant.standalone\n      ? css`\n          span.redsift-listbox-label {\n            font-family: var(--redsift-typography-body-font-family);\n            font-weight: var(--redsift-typography-body-font-weight);\n            font-size: var(--redsift-typography-body-font-size);\n            line-height: var(--redsift-typography-body-line-height);\n\n            color: var(--redsift-color-neutral-black);\n            ${$isDisabled\n              ? `\n          color: var(--redsift-color-neutral-mid-grey);\n        `\n              : ''}\n            ${$isInvalid\n              ? `\n          color: var(--redsift-color-red-n);\n        `\n              : ''}\n          }\n\n          .redsift-listbox-list {\n            border: 1px solid var(--redsift-color-neutral-mid-grey);\n            padding: 4px;\n            min-width: 200px;\n          }\n        `\n      : ''}\n`;\n","import { ListboxState, ListboxAction, ListboxActionType } from './types';\n\nexport const ListboxReducer = (state: ListboxState, action: ListboxAction): ListboxState => {\n  switch (action.type) {\n    case ListboxActionType.TOGGLE: {\n      if (state.isReadOnly || state.isDisabled) {\n        return state;\n      }\n      if (!state.selectedValues.includes(action.payload.value)) {\n        return {\n          ...state,\n          selectedValues: state.selectedValues.concat(action.payload.value),\n          ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n        };\n      }\n      return {\n        ...state,\n        selectedValues: state.selectedValues.filter((existingValue) => existingValue !== action.payload.value),\n        ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n      };\n    }\n    case ListboxActionType.SET: {\n      if (state.isReadOnly || state.isDisabled) {\n        return state;\n      }\n      return {\n        ...state,\n        selectedValues: action.payload.values,\n        ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n      };\n    }\n    case ListboxActionType.UPDATE_OPTIONS: {\n      return {\n        ...state,\n        ...action.payload,\n      };\n    }\n    default:\n      return state;\n  }\n};\n","import React, { ComponentProps, forwardRef, RefObject, useEffect, useMemo, useReducer, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { ListboxActionType, ListboxContextProps, ListboxProps, ListboxState, ListboxVariant } from './types';\nimport { LISTBOX_INITIAL_STATE } from './context';\nimport { StyledListbox } from './styles';\nimport { ListboxReducer } from './reducer';\nimport { FocusWithinGroup } from '../focus-within-group';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { RovingTabindexListbox } from './RovingTabindexListbox';\nimport { ActiveDescendantListbox } from './ActiveDescendantListbox';\nimport { useId, warnIfNoAccessibleLabelFound } from '../../utils';\n\nconst COMPONENT_NAME = 'Listbox';\nconst CLASSNAME = 'redsift-listbox';\n\n/**\n * The Listbox component.\n * Can be used as controlled or uncontrolled.\n */\nexport const Listbox: Comp<ListboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    children,\n    className,\n    defaultValues,\n    direction,\n    focusOnClick = false,\n    focusType = 'roving-tabindex',\n    id: propsId,\n    isDisabled,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    label,\n    loopAround,\n    onChange,\n    selectionMode = 'single',\n    values,\n    variant = ListboxVariant.standalone,\n    ...forwardedProps\n  } = props;\n  const [_id] = useId();\n  const id = propsId ?? _id;\n  const _ref = useRef<HTMLDivElement>();\n  const divRef = ref ?? _ref;\n\n  const [state, dispatch] = useReducer(ListboxReducer, {\n    ...LISTBOX_INITIAL_STATE,\n    isDisabled,\n    isReadOnly,\n    selectedValues: values || defaultValues || [],\n    selectionMode,\n  } as ListboxState);\n\n  useEffect(() => {\n    if (values && values.length >= 0) {\n      dispatch({\n        type: ListboxActionType.SET,\n        payload: {\n          values,\n        },\n      });\n    }\n  }, [values]);\n\n  const context = useMemo<ListboxContextProps>(\n    () => ({\n      state,\n      dispatch,\n    }),\n    [state]\n  );\n\n  useEffect(() => {\n    onChange?.(state.selectedValues);\n  }, [state.selectedValues]);\n\n  warnIfNoAccessibleLabelFound(props as ComponentProps<keyof JSX.IntrinsicElements>, [label]);\n\n  return (\n    <ConditionalWrapper\n      wrapper={(children) => (\n        <StyledListbox\n          flexDirection=\"column\"\n          gap=\"8px\"\n          {...forwardedProps}\n          $isDisabled={isDisabled}\n          $isInvalid={isInvalid || (isRequired && state.selectedValues.length === 0)}\n          $isReadOnly={isReadOnly}\n          className={classNames(Listbox.className, className)}\n          ref={divRef as RefObject<HTMLDivElement>}\n          id={id}\n          $variant={variant}\n        >\n          {children}\n        </StyledListbox>\n      )}\n      condition={variant === ListboxVariant.standalone}\n    >\n      <FocusWithinGroup direction={direction} focusOnClick={focusOnClick} loopAround={loopAround} focusType={focusType}>\n        {label ? (\n          <span id={`${id}-label`} className={`${Listbox.className}-label`}>\n            {label}\n            {isRequired ? <span aria-hidden=\"true\">{' *'}</span> : null}\n          </span>\n        ) : null}\n        {focusType === 'roving-tabindex' ? (\n          <RovingTabindexListbox\n            {...forwardedProps}\n            className={`${Listbox.className}-list`}\n            context={context}\n            ref={divRef as RefObject<HTMLDivElement>}\n          >\n            {children}\n          </RovingTabindexListbox>\n        ) : (\n          <ActiveDescendantListbox\n            {...forwardedProps}\n            className={`${Listbox.className}-list`}\n            context={context}\n            ref={divRef as RefObject<HTMLDivElement>}\n          >\n            {children}\n          </ActiveDescendantListbox>\n        )}\n      </FocusWithinGroup>\n    </ConditionalWrapper>\n  );\n});\nListbox.className = CLASSNAME;\nListbox.displayName = COMPONENT_NAME;\n"],"names":["ActiveDescendantListbox","forwardRef","props","ref","_context$state$active","children","id","isDisabled","context","forwardedProps","_objectWithoutProperties","_excluded","activedescendant","handleKeyDown","handleFocusKeyDown","handleFocus","handleBlur","useFocusOnList","useCallback","event","code","state","selectionMode","_activedescendant$","dispatch","type","ListboxActionType","TOGGLE","payload","value","_activedescendant$2","SET","values","React","createElement","Flexbox","_extends","flexDirection","gap","role","tabIndex","style","outline","onFocus","onBlur","onMouseDown","preventDefault","onMouseLeave","onKeyDown","ListboxContext","Provider","RovingTabindexListbox","StyledListbox","styled","div","baseContainer","_ref","$variant","$isDisabled","$isInvalid","ListboxVariant","standalone","css","ListboxReducer","action","isReadOnly","selectedValues","includes","_objectSpread","concat","filter","existingValue","UPDATE_OPTIONS","COMPONENT_NAME","CLASSNAME","Listbox","className","defaultValues","direction","focusOnClick","focusType","propsId","isInvalid","isRequired","label","loopAround","onChange","variant","_id","useId","useRef","divRef","useReducer","LISTBOX_INITIAL_STATE","useEffect","length","useMemo","warnIfNoAccessibleLabelFound","ConditionalWrapper","wrapper","$isReadOnly","classNames","condition","FocusWithinGroup","displayName"],"mappings":";;;;;;;;;;;;;AAMO,MAAMA,uBAAuB,gBAAGC,UAAU,CAG/C,CAACC,KAAK,EAAEC,GAAG,KAAK;AAAA,EAAA,IAAAC,qBAAA,CAAA;EAChB,MAAM;MAAEC,QAAQ;MAAEC,EAAE;MAAEC,UAAU;AAAEC,MAAAA,OAAAA;AAA2B,KAAC,GAAGN,KAAK;AAAxBO,IAAAA,cAAc,GAAAC,wBAAA,CAAKR,KAAK,EAAAS,WAAA,CAAA,CAAA;EAEtE,MAAM;IAAEC,gBAAgB;AAAEC,IAAAA,aAAa,EAAEC,kBAAkB;IAAEC,WAAW;AAAEC,IAAAA,UAAAA;GAAY,GAAGC,cAAc,EAAE,CAAA;AAEzG,EAAA,MAAMJ,aAAa,GAAGK,WAAW,CAC9BC,KAAoB,IAAK;IACxBL,kBAAkB,CAACK,KAAK,CAAC,CAAA;AACzB,IAAA,MAAMC,IAAI,GAAGD,KAAK,CAACC,IAAI,CAAA;AACvB,IAAA,IAAIA,IAAI,KAAK,OAAO,IAAIA,IAAI,KAAK,OAAO,EAAE;AACxC,MAAA,IAAIZ,OAAO,CAACa,KAAK,CAACC,aAAa,KAAK,UAAU,EAAE;AAAA,QAAA,IAAAC,kBAAA,CAAA;QAC9Cf,OAAO,CAACgB,QAAQ,CAAC;UACfC,IAAI,EAAEC,iBAAiB,CAACC,MAAM;AAC9BC,UAAAA,OAAO,EAAE;AAAEC,YAAAA,KAAK,GAAAN,kBAAA,GAAEX,gBAAgB,KAAA,IAAA,IAAhBA,gBAAgB,KAAhBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,gBAAgB,CAAG,CAAC,CAAC,MAAAW,IAAAA,IAAAA,kBAAA,KAAAA,KAAAA,CAAAA,GAAAA,kBAAA,GAAI,EAAE;AAAEX,YAAAA,gBAAAA;AAAiB,WAAA;AAClE,SAAC,CAAC,CAAA;AACJ,OAAC,MAAM;AAAA,QAAA,IAAAkB,mBAAA,CAAA;QACLtB,OAAO,CAACgB,QAAQ,CAAC;UACfC,IAAI,EAAEC,iBAAiB,CAACK,GAAG;AAC3BH,UAAAA,OAAO,EAAE;AACPI,YAAAA,MAAM,EAAE,CAAAF,CAAAA,mBAAA,GAAClB,gBAAgB,KAAA,IAAA,IAAhBA,gBAAgB,KAAhBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,gBAAgB,CAAG,CAAC,CAAC,MAAAkB,IAAAA,IAAAA,mBAAA,cAAAA,mBAAA,GAAI,EAAE,CAAC;AACrClB,YAAAA,gBAAAA;AACF,WAAA;AACF,SAAC,CAAC,CAAA;AACJ,OAAA;AACF,KAAA;AACF,GAAC,EACD,CAACA,gBAAgB,CACnB,CAAC,CAAA;AAED,EAAA,oBACEqB,cAAA,CAAAC,aAAA,CAACC,OAAO,EAAAC,QAAA,CAAA;AACNC,IAAAA,aAAa,EAAC,QAAQ;AACtBC,IAAAA,GAAG,EAAC,KAAA;AAAK,GAAA,EACL7B,cAAc,EAAA;AAClB,IAAA,eAAA,EAAeF,UAAW;AAC1BJ,IAAAA,GAAG,EAAEA,GAAI;AACTG,IAAAA,EAAE,EAAEA,EAAG;AACPiC,IAAAA,IAAI,EAAC,SAAS;AACd,IAAA,uBAAA,EAAA,CAAAnC,qBAAA,GAAuBI,OAAO,CAACa,KAAK,CAACT,gBAAgB,MAAA,IAAA,IAAAR,qBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAA9BA,qBAAA,CAAiC,CAAC,CAAE;AAC3D,IAAA,sBAAA,EAAsBI,OAAO,CAACa,KAAK,CAACC,aAAa,KAAK,UAAW;AACjEkB,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,OAAO,EAAE,MAAA;KAAS;AAC3BC,IAAAA,OAAO,EAAE5B,WAAY;AACrB6B,IAAAA,MAAM,EAAE5B,UAAW;AACnB6B,IAAAA,WAAW,EAAG1B,KAAK,IAAKA,KAAK,CAAC2B,cAAc,EAAG;AAC/CC,IAAAA,YAAY,EAAE/B,UAAW;AACzBgC,IAAAA,SAAS,EAAEnC,aAAAA;AAAc,GAAA,CAAA,eAEzBoB,cAAA,CAAAC,aAAA,CAACe,cAAc,CAACC,QAAQ,EAAA;AAACrB,IAAAA,KAAK,EAAErB,OAAAA;GAAUH,EAAAA,QAAkC,CACrE,CAAC,CAAA;AAEd,CAAC;;;ACvDM,MAAM8C,qBAAqB,gBAAGlD,UAAU,CAG7C,CAACC,KAAK,EAAEC,GAAG,KAAK;EAChB,MAAM;MAAEE,QAAQ;MAAEC,EAAE;MAAEC,UAAU;AAAEC,MAAAA,OAAAA;AAA2B,KAAC,GAAGN,KAAK;AAAxBO,IAAAA,cAAc,GAAAC,wBAAA,CAAKR,KAAK,EAAAS,WAAA,CAAA,CAAA;AAEtE,EAAA,oBACEsB,cAAA,CAAAC,aAAA,CAACC,OAAO,EAAAC,QAAA,CAAA;AACNC,IAAAA,aAAa,EAAC,QAAQ;AACtBC,IAAAA,GAAG,EAAC,KAAA;AAAK,GAAA,EACL7B,cAAc,EAAA;AAClB,IAAA,eAAA,EAAeF,UAAW;AAC1BJ,IAAAA,GAAG,EAAEA,GAAI;AACTG,IAAAA,EAAE,EAAEA,EAAG;AACPiC,IAAAA,IAAI,EAAC,SAAS;AACd,IAAA,sBAAA,EAAsB/B,OAAO,CAACa,KAAK,CAACC,aAAa,KAAK,UAAA;AAAW,GAAA,CAAA,eAEjEW,cAAA,CAAAC,aAAA,CAACe,cAAc,CAACC,QAAQ,EAAA;AAACrB,IAAAA,KAAK,EAAErB,OAAAA;GAAUH,EAAAA,QAAkC,CACrE,CAAC,CAAA;AAEd,CAAC;;ACrBD;AACA;AACA;AACO,MAAM+C,aAAa,GAAGC,MAAM,CAACC,GAAwB,CAAA;AAC5D,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC,WAAW;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAH,IAAA,CAAA;AAAA,EAAA,OACtCC,QAAQ,KAAKG,cAAc,CAACC,UAAU,GAClCC,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAA,EAAcJ,WAAW,GACR,CAAA;AACjB;AACA,QAAA,CAAS,GACO,EAAG,CAAA;AACnB,YAAA,EAAcC,UAAU,GACP,CAAA;AACjB;AACA,QAAA,CAAS,GACO,EAAG,CAAA;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX,CAAC;;MCtCYI,cAAc,GAAGA,CAAC1C,KAAmB,EAAE2C,MAAqB,KAAmB;EAC1F,QAAQA,MAAM,CAACvC,IAAI;IACjB,KAAKC,iBAAiB,CAACC,MAAM;AAAE,MAAA;AAC7B,QAAA,IAAIN,KAAK,CAAC4C,UAAU,IAAI5C,KAAK,CAACd,UAAU,EAAE;AACxC,UAAA,OAAOc,KAAK,CAAA;AACd,SAAA;AACA,QAAA,IAAI,CAACA,KAAK,CAAC6C,cAAc,CAACC,QAAQ,CAACH,MAAM,CAACpC,OAAO,CAACC,KAAK,CAAC,EAAE;AACxD,UAAA,OAAAuC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACK/C,KAAK,CAAA,EAAA,EAAA,EAAA;YACR6C,cAAc,EAAE7C,KAAK,CAAC6C,cAAc,CAACG,MAAM,CAACL,MAAM,CAACpC,OAAO,CAACC,KAAK,CAAA;AAAC,WAAA,EAC7DmC,MAAM,CAACpC,OAAO,CAAChB,gBAAgB,IAAI;AAAEA,YAAAA,gBAAgB,EAAEoD,MAAM,CAACpC,OAAO,CAAChB,gBAAAA;WAAkB,CAAA,CAAA;AAEhG,SAAA;AACA,QAAA,OAAAwD,cAAA,CAAAA,cAAA,CAAA,EAAA,EACK/C,KAAK,CAAA,EAAA,EAAA,EAAA;AACR6C,UAAAA,cAAc,EAAE7C,KAAK,CAAC6C,cAAc,CAACI,MAAM,CAAEC,aAAa,IAAKA,aAAa,KAAKP,MAAM,CAACpC,OAAO,CAACC,KAAK,CAAA;AAAC,SAAA,EAClGmC,MAAM,CAACpC,OAAO,CAAChB,gBAAgB,IAAI;AAAEA,UAAAA,gBAAgB,EAAEoD,MAAM,CAACpC,OAAO,CAAChB,gBAAAA;SAAkB,CAAA,CAAA;AAEhG,OAAA;IACA,KAAKc,iBAAiB,CAACK,GAAG;AAAE,MAAA;AAC1B,QAAA,IAAIV,KAAK,CAAC4C,UAAU,IAAI5C,KAAK,CAACd,UAAU,EAAE;AACxC,UAAA,OAAOc,KAAK,CAAA;AACd,SAAA;AACA,QAAA,OAAA+C,cAAA,CAAAA,cAAA,CAAA,EAAA,EACK/C,KAAK,CAAA,EAAA,EAAA,EAAA;AACR6C,UAAAA,cAAc,EAAEF,MAAM,CAACpC,OAAO,CAACI,MAAAA;AAAM,SAAA,EACjCgC,MAAM,CAACpC,OAAO,CAAChB,gBAAgB,IAAI;AAAEA,UAAAA,gBAAgB,EAAEoD,MAAM,CAACpC,OAAO,CAAChB,gBAAAA;SAAkB,CAAA,CAAA;AAEhG,OAAA;IACA,KAAKc,iBAAiB,CAAC8C,cAAc;AAAE,MAAA;QACrC,OAAAJ,cAAA,CAAAA,cAAA,CAAA,EAAA,EACK/C,KAAK,CACL2C,EAAAA,MAAM,CAACpC,OAAO,CAAA,CAAA;AAErB,OAAA;AACA,IAAA;AACE,MAAA,OAAOP,KAAK,CAAA;AAChB,GAAA;AACF;;;AC3BA,MAAMoD,cAAc,GAAG,SAAS,CAAA;AAChC,MAAMC,SAAS,GAAG,iBAAiB,CAAA;;AAEnC;AACA;AACA;AACA;AACO,MAAMC,OAA2C,gBAAG1E,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpF,MAAM;MACJE,QAAQ;MACRuE,SAAS;MACTC,aAAa;MACbC,SAAS;AACTC,MAAAA,YAAY,GAAG,KAAK;AACpBC,MAAAA,SAAS,GAAG,iBAAiB;AAC7B1E,MAAAA,EAAE,EAAE2E,OAAO;MACX1E,UAAU;MACV2E,SAAS;MACTjB,UAAU;MACVkB,UAAU;MACVC,KAAK;MACLC,UAAU;MACVC,QAAQ;AACRhE,MAAAA,aAAa,GAAG,QAAQ;MACxBU,MAAM;MACNuD,OAAO,GAAG3B,cAAc,CAACC,UAAAA;AAE3B,KAAC,GAAG3D,KAAK;AADJO,IAAAA,cAAc,GAAAC,wBAAA,CACfR,KAAK,EAAAS,SAAA,CAAA,CAAA;AACT,EAAA,MAAM,CAAC6E,GAAG,CAAC,GAAGC,KAAK,EAAE,CAAA;EACrB,MAAMnF,EAAE,GAAG2E,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,OAAO,GAAIO,GAAG,CAAA;AACzB,EAAA,MAAMhC,IAAI,GAAGkC,MAAM,EAAkB,CAAA;EACrC,MAAMC,MAAM,GAAGxF,GAAG,KAAA,IAAA,IAAHA,GAAG,KAAHA,KAAAA,CAAAA,GAAAA,GAAG,GAAIqD,IAAI,CAAA;AAE1B,EAAA,MAAM,CAACnC,KAAK,EAAEG,QAAQ,CAAC,GAAGoE,UAAU,CAAC7B,cAAc,EAAAK,cAAA,CAAAA,cAAA,KAC9CyB,qBAAqB,CAAA,EAAA,EAAA,EAAA;IACxBtF,UAAU;IACV0D,UAAU;AACVC,IAAAA,cAAc,EAAElC,MAAM,IAAI6C,aAAa,IAAI,EAAE;AAC7CvD,IAAAA,aAAAA;AAAa,GAAA,CACE,CAAC,CAAA;AAElBwE,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAI9D,MAAM,IAAIA,MAAM,CAAC+D,MAAM,IAAI,CAAC,EAAE;AAChCvE,MAAAA,QAAQ,CAAC;QACPC,IAAI,EAAEC,iBAAiB,CAACK,GAAG;AAC3BH,QAAAA,OAAO,EAAE;AACPI,UAAAA,MAAAA;AACF,SAAA;AACF,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAC,EAAE,CAACA,MAAM,CAAC,CAAC,CAAA;AAEZ,EAAA,MAAMxB,OAAO,GAAGwF,OAAO,CACrB,OAAO;IACL3E,KAAK;AACLG,IAAAA,QAAAA;AACF,GAAC,CAAC,EACF,CAACH,KAAK,CACR,CAAC,CAAA;AAEDyE,EAAAA,SAAS,CAAC,MAAM;IACdR,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAARA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,QAAQ,CAAGjE,KAAK,CAAC6C,cAAc,CAAC,CAAA;AAClC,GAAC,EAAE,CAAC7C,KAAK,CAAC6C,cAAc,CAAC,CAAC,CAAA;AAE1B+B,EAAAA,4BAA4B,CAAC/F,KAAK,EAAiD,CAACkF,KAAK,CAAC,CAAC,CAAA;AAE3F,EAAA,oBACEnD,cAAA,CAAAC,aAAA,CAACgE,kBAAkB,EAAA;IACjBC,OAAO,EAAG9F,QAAQ,iBAChB4B,cAAA,CAAAC,aAAA,CAACkB,aAAa,EAAAhB,QAAA,CAAA;AACZC,MAAAA,aAAa,EAAC,QAAQ;AACtBC,MAAAA,GAAG,EAAC,KAAA;AAAK,KAAA,EACL7B,cAAc,EAAA;AAClBiD,MAAAA,WAAW,EAAEnD,UAAW;MACxBoD,UAAU,EAAEuB,SAAS,IAAKC,UAAU,IAAI9D,KAAK,CAAC6C,cAAc,CAAC6B,MAAM,KAAK,CAAG;AAC3EK,MAAAA,WAAW,EAAEnC,UAAW;MACxBW,SAAS,EAAEyB,UAAU,CAAC1B,OAAO,CAACC,SAAS,EAAEA,SAAS,CAAE;AACpDzE,MAAAA,GAAG,EAAEwF,MAAoC;AACzCrF,MAAAA,EAAE,EAAEA,EAAG;AACPmD,MAAAA,QAAQ,EAAE8B,OAAAA;AAAQ,KAAA,CAAA,EAEjBlF,QACY,CACf;AACFiG,IAAAA,SAAS,EAAEf,OAAO,KAAK3B,cAAc,CAACC,UAAAA;AAAW,GAAA,eAEjD5B,cAAA,CAAAC,aAAA,CAACqE,gBAAgB,EAAA;AAACzB,IAAAA,SAAS,EAAEA,SAAU;AAACC,IAAAA,YAAY,EAAEA,YAAa;AAACM,IAAAA,UAAU,EAAEA,UAAW;AAACL,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,EAC9GI,KAAK,gBACJnD,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IAAM5B,EAAE,EAAG,CAAEA,EAAAA,EAAG,CAAQ,MAAA,CAAA;AAACsE,IAAAA,SAAS,EAAG,CAAA,EAAED,OAAO,CAACC,SAAU,CAAA,MAAA,CAAA;AAAQ,GAAA,EAC9DQ,KAAK,EACLD,UAAU,gBAAGlD,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IAAM,aAAY,EAAA,MAAA;GAAQ,EAAA,IAAW,CAAC,GAAG,IACnD,CAAC,GACL,IAAI,EACP8C,SAAS,KAAK,iBAAiB,gBAC9B/C,cAAA,CAAAC,aAAA,CAACiB,qBAAqB,EAAAf,QAAA,KAChB3B,cAAc,EAAA;AAClBmE,IAAAA,SAAS,EAAG,CAAA,EAAED,OAAO,CAACC,SAAU,CAAO,KAAA,CAAA;AACvCpE,IAAAA,OAAO,EAAEA,OAAQ;AACjBL,IAAAA,GAAG,EAAEwF,MAAAA;GAEJtF,CAAAA,EAAAA,QACoB,CAAC,gBAExB4B,cAAA,CAAAC,aAAA,CAAClC,uBAAuB,EAAAoC,QAAA,CAAA,EAAA,EAClB3B,cAAc,EAAA;AAClBmE,IAAAA,SAAS,EAAG,CAAA,EAAED,OAAO,CAACC,SAAU,CAAO,KAAA,CAAA;AACvCpE,IAAAA,OAAO,EAAEA,OAAQ;AACjBL,IAAAA,GAAG,EAAEwF,MAAAA;GAEJtF,CAAAA,EAAAA,QACsB,CAEX,CACA,CAAC,CAAA;AAEzB,CAAC,EAAC;AACFsE,OAAO,CAACC,SAAS,GAAGF,SAAS,CAAA;AAC7BC,OAAO,CAAC6B,WAAW,GAAG/B,cAAc;;;;"}

package/_internal/Number.d2.ts

@@ -0,0 +1,69 @@
+import { b as TextProps } from './types.d28.ts';
+import { C as Comp } from './helpers.js';
+
+interface NumberFormatOptions {
+}
+/**
+ * Component props.
+ */
+interface NumberProps extends TextProps {
+    /** Value. */
+    value: number;
+    /** The formatting style to use. */
+    type?: 'decimal' | 'currency' | 'percent' | 'unit';
+    /** Only used when notation is 'compact'. */
+    compactDisplay?: 'short' | 'long';
+    /** The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB */
+    currency?: string;
+    /** How to display the currency in currency formatting. */
+    currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code' | 'name';
+    /** In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. */
+    currencySign?: 'standard' | 'accounting';
+    /** The locale matching algorithm to use. */
+    localeMatcher?: 'best fit' | 'lookup';
+    /** The formatting that should be displayed for the number. */
+    notation?: 'standard' | 'scientific' | 'engineering' | 'compact';
+    /** Overrides default numbering system for the current locale. */
+    numberingSystem?: string;
+    /** When to display the sign for the number. */
+    signDisplay?: 'auto' | 'always' | 'exceptZero' | 'never';
+    /** The unit to use in unit formatting. */
+    unit?: string;
+    /** The unit formatting style to use in unit formatting. */
+    unitDisplay?: 'long' | 'short' | 'narrow';
+    /** Whether to use grouping separators. */
+    useGrouping?: boolean;
+    /** Options for rounding modes. */
+    roundingMode?: 'ceil' | 'floor' | 'expand' | 'trunc' | 'halfCeil' | 'halfFloor' | 'halfExpand' | 'halfTrunc' | 'halfEven';
+    /** Specify how rounding conflicts will be resolved. */
+    roundingPriority?: 'auto' | 'morePrecision' | 'lessPrecision';
+    /** Specifies the rounding-increment precision. */
+    roundingIncrement?: 1 | 2 | 5 | 10 | 20 | 25 | 50 | 100 | 200 | 250 | 500 | 1000 | 2000 | 2500 | 5000;
+    /** A string expressing the strategy for displaying trailing zeros on whole numbers. */
+    trailingZeroDisplay?: 'auto' | 'stripIfInteger';
+    /** The minimum number of integer digits to use. A value with a smaller number of integer digits than this number will be left-padded with zeros (to the specified length) when formatted. */
+    minimumIntegerDigits?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21;
+    /** The minimum number of fraction digits to use. */
+    minimumFractionDigits?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20;
+    /** The maximum number of fraction digits to use. */
+    maximumFractionDigits?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20;
+    /** The minimum number of significant digits to use. */
+    minimumSignificantDigits?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21;
+    /** The maximum number of significant digits to use. */
+    maximumSignificantDigits?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21;
+}
+type StyledNumberProps = Omit<NumberProps, 'as' | 'color' | 'fontFamily' | 'fontSize' | 'value' | 'variant'> & {
+    $color: NumberProps['color'];
+    $fontFamily: NumberProps['fontFamily'];
+    $fontSize: NumberProps['fontSize'];
+    $fontWeight: NumberProps['fontWeight'];
+    $variant: NumberProps['variant'];
+    $theme: NumberProps['theme'];
+};
+
+/**
+ * The Number component.
+ */
+declare const Number: Comp<NumberProps, HTMLDivElement>;
+
+export { NumberFormatOptions as N, StyledNumberProps as S, NumberProps as a, Number as b };

package/_internal/Number2.js

@@ -0,0 +1,111 @@
+import { b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { S as StyledText } from './styles5.js';
+import { u as useNumberFormatter } from './useNumberFormatter.js';
+import { u as useTheme } from './useTheme.js';
+
+/**
+ * Component style.
+ */
+const StyledNumber = styled(StyledText)``;
+
+const _excluded = ["as", "className", "color", "compactDisplay", "currency", "currencyDisplay", "currencySign", "fontSize", "fontFamily", "fontWeight", "lineHeight", "localeMatcher", "maximumFractionDigits", "maximumSignificantDigits", "minimumFractionDigits", "minimumIntegerDigits", "minimumSignificantDigits", "notation", "noWrap", "numberingSystem", "roundingIncrement", "roundingMode", "roundingPriority", "signDisplay", "theme", "trailingZeroDisplay", "type", "unit", "unitDisplay", "useGrouping", "value", "variant"];
+const COMPONENT_NAME = 'Number';
+const CLASSNAME = 'redsift-number';
+
+/**
+ * The Number component.
+ */
+const Number = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      className,
+      color,
+      compactDisplay = 'short',
+      currency,
+      currencyDisplay = 'symbol',
+      currencySign = 'standard',
+      fontSize,
+      fontFamily,
+      fontWeight,
+      lineHeight,
+      localeMatcher = 'best fit',
+      maximumFractionDigits,
+      maximumSignificantDigits,
+      minimumFractionDigits,
+      minimumIntegerDigits,
+      minimumSignificantDigits,
+      notation = 'standard',
+      noWrap,
+      numberingSystem,
+      roundingIncrement,
+      roundingMode = 'halfExpand',
+      roundingPriority = 'auto',
+      signDisplay = 'auto',
+      theme: propsTheme,
+      trailingZeroDisplay = 'auto',
+      type = 'decimal',
+      unit,
+      unitDisplay = 'short',
+      useGrouping,
+      value,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const formatter = useNumberFormatter(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+    compactDisplay,
+    currency,
+    currencyDisplay,
+    currencySign,
+    localeMatcher
+  }, maximumFractionDigits !== undefined && {
+    maximumFractionDigits
+  }), maximumSignificantDigits !== undefined && {
+    maximumSignificantDigits
+  }), minimumFractionDigits !== undefined && {
+    minimumFractionDigits
+  }), minimumIntegerDigits !== undefined && {
+    minimumIntegerDigits
+  }), minimumSignificantDigits !== undefined && {
+    minimumSignificantDigits
+  }), {}, {
+    notation,
+    numberingSystem,
+    // @ts-ignore
+    roundingIncrement,
+    // @ts-ignore
+    roundingMode,
+    // @ts-ignore
+    roundingPriority,
+    signDisplay,
+    style: type,
+    // @ts-ignore
+    trailingZeroDisplay,
+    unit,
+    unitDisplay,
+    useGrouping
+  }));
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(StyledNumber, _extends({
+    as: as
+  }, forwardedProps, {
+    $as: as,
+    className: classNames(Number.className, className),
+    ref: ref,
+    $color: color,
+    $lineHeight: lineHeight,
+    $fontSize: fontSize,
+    $fontFamily: fontFamily,
+    $fontWeight: fontWeight,
+    $noWrap: noWrap,
+    $theme: theme,
+    $variant: variant
+  }), formatter.format(value));
+});
+Number.className = CLASSNAME;
+Number.displayName = COMPONENT_NAME;
+
+export { Number as N };
+//# sourceMappingURL=Number2.js.map

package/_internal/Number2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Number2.js","sources":["../../src/components/number/styles.ts","../../src/components/number/Number.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledText } from '../text/styles';\nimport { StyledNumberProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledNumber = styled(StyledText)<StyledNumberProps>``;\n","import React, { forwardRef, RefObject } from 'react';\nimport { useNumberFormatter } from '../../react-aria/react-aria/i18n';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledNumber } from './styles';\nimport { NumberProps } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Number';\nconst CLASSNAME = 'redsift-number';\n\n/**\n * The Number component.\n */\nexport const Number: Comp<NumberProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    as,\n    className,\n    color,\n    compactDisplay = 'short',\n    currency,\n    currencyDisplay = 'symbol',\n    currencySign = 'standard',\n    fontSize,\n    fontFamily,\n    fontWeight,\n    lineHeight,\n    localeMatcher = 'best fit',\n    maximumFractionDigits,\n    maximumSignificantDigits,\n    minimumFractionDigits,\n    minimumIntegerDigits,\n    minimumSignificantDigits,\n    notation = 'standard',\n    noWrap,\n    numberingSystem,\n    roundingIncrement,\n    roundingMode = 'halfExpand',\n    roundingPriority = 'auto',\n    signDisplay = 'auto',\n    theme: propsTheme,\n    trailingZeroDisplay = 'auto',\n    type = 'decimal',\n    unit,\n    unitDisplay = 'short',\n    useGrouping,\n    value,\n    variant,\n    ...forwardedProps\n  } = props;\n  const formatter = useNumberFormatter({\n    compactDisplay,\n    currency,\n    currencyDisplay,\n    currencySign,\n    localeMatcher,\n    ...(maximumFractionDigits !== undefined && { maximumFractionDigits }),\n    ...(maximumSignificantDigits !== undefined && {\n      maximumSignificantDigits,\n    }),\n    ...(minimumFractionDigits !== undefined && { minimumFractionDigits }),\n    ...(minimumIntegerDigits !== undefined && { minimumIntegerDigits }),\n    ...(minimumSignificantDigits !== undefined && {\n      minimumSignificantDigits,\n    }),\n    notation,\n    numberingSystem,\n    // @ts-ignore\n    roundingIncrement,\n    // @ts-ignore\n    roundingMode,\n    // @ts-ignore\n    roundingPriority,\n    signDisplay,\n    style: type,\n    // @ts-ignore\n    trailingZeroDisplay,\n    unit,\n    unitDisplay,\n    useGrouping,\n  });\n\n  const theme = useTheme(propsTheme);\n\n  return (\n    <StyledNumber\n      as={as}\n      {...forwardedProps}\n      $as={as}\n      className={classNames(Number.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $color={color}\n      $lineHeight={lineHeight}\n      $fontSize={fontSize}\n      $fontFamily={fontFamily}\n      $fontWeight={fontWeight}\n      $noWrap={noWrap}\n      $theme={theme}\n      $variant={variant}\n    >\n      {formatter.format(value)}\n    </StyledNumber>\n  );\n});\nNumber.className = CLASSNAME;\nNumber.displayName = COMPONENT_NAME;\n"],"names":["StyledNumber","styled","StyledText","COMPONENT_NAME","CLASSNAME","Number","forwardRef","props","ref","as","className","color","compactDisplay","currency","currencyDisplay","currencySign","fontSize","fontFamily","fontWeight","lineHeight","localeMatcher","maximumFractionDigits","maximumSignificantDigits","minimumFractionDigits","minimumIntegerDigits","minimumSignificantDigits","notation","noWrap","numberingSystem","roundingIncrement","roundingMode","roundingPriority","signDisplay","theme","propsTheme","trailingZeroDisplay","type","unit","unitDisplay","useGrouping","value","variant","forwardedProps","_objectWithoutProperties","_excluded","formatter","useNumberFormatter","_objectSpread","undefined","style","useTheme","React","createElement","_extends","$as","classNames","$color","$lineHeight","$fontSize","$fontFamily","$fontWeight","$noWrap","$theme","$variant","format","displayName"],"mappings":"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"}

package/_internal/NumberField.d.ts

@@ -0,0 +1,80 @@
+import { FocusEvent, KeyboardEvent, ChangeEvent } from 'react';
+import { b as TextFieldProps } from './types.d29.ts';
+import { V as ValueOf, C as Comp } from './helpers.js';
+
+/**
+ * Component variant.
+ */
+declare const NumberFieldVariant: {
+    readonly default: "default";
+    readonly underline: "underline";
+};
+type NumberFieldVariant = ValueOf<typeof NumberFieldVariant>;
+/**
+ * Component props.
+ */
+interface NumberFieldProps extends Omit<TextFieldProps, 'defaultValue' | 'onChange' | 'value' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'after' | 'internal' | 'pills' | 'placeholder'> {
+    /** Handler that is called when the element receives focus. */
+    onFocus?: (e: FocusEvent<Element>) => void;
+    /** Handler that is called when the element loses focus. */
+    onBlur?: (e: FocusEvent<Element>) => void;
+    /** Handler that is called when the element's focus status changes. */
+    onFocusChange?: (isFocused: boolean) => void;
+    /** Handler that is called when a key is pressed. */
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
+    /** Handler that is called when a key is released. */
+    onKeyUp?: (e: KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Default value.
+     * Used for uncontrolled version.
+     */
+    defaultValue?: number;
+    /** Method to handle component change. */
+    onChange?(value?: number, name?: string, event?: ChangeEvent<HTMLInputElement>): void;
+    /**
+     * Input value.
+     * Used for controlled version.
+     */
+    value?: number;
+    /** Placeholder. */
+    placeholder?: number;
+    /** A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used. */
+    decrementAriaLabel?: string;
+    /** A custom aria-label for the increment button. If not provided, the localized string "Increment" is used. */
+    incrementAriaLabel?: string;
+    /**
+     * Enables or disables changing the value with scroll.
+     */
+    isWheelDisabled?: boolean;
+    /**
+     * Formatting options for the value displayed in the number field.
+     * This also affects what characters are allowed to be typed by the user.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** The smallest value allowed for the input. */
+    minValue?: number;
+    /** The largest value allowed for the input. */
+    maxValue?: number;
+    /** The amount that the input value changes with each increment or decrement "tick". */
+    step?: number;
+}
+type StyledNumberFieldProps = Omit<NumberFieldProps, 'color' | 'isColored' | 'isDisabled' | 'isInvalid' | 'isRequired' | 'onChange' | 'onBlur' | 'onFocus'> & {
+    $hasLeftIcon: boolean;
+    $hasContent: boolean;
+    $isColored: NumberFieldProps['isColored'];
+    $isDisabled: NumberFieldProps['isDisabled'];
+    $isInvalid: NumberFieldProps['isInvalid'];
+    $isFocused: boolean;
+    $isFocusVisible: boolean;
+    $isRequired: NumberFieldProps['isRequired'];
+    $theme: NumberFieldProps['theme'];
+    $variant: NumberFieldProps['variant'];
+};
+
+/**
+ * The NumberField component.
+ * Can be used as controlled or uncontrolled.
+ */
+declare const NumberField: Comp<NumberFieldProps, HTMLDivElement>;
+
+export { NumberFieldVariant as N, StyledNumberFieldProps as S, NumberFieldProps as a, NumberField as b };