@vector-im/compound-web 8.3.6 → 8.4.0

package/dist/components/Form/Controls/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 import { forwardRef } from "react";
 import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";

package/dist/components/Form/Controls/EditInPlace/EditInPlace.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditInPlace.cjs","sources":["../../../../../src/components/Form/Controls/EditInPlace/EditInPlace.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  useEffect,\n  useReducer,\n} from \"react\";\nimport { Submit, ValidityState } from \"@radix-ui/react-form\";\nimport CheckIcon from \"@vector-im/compound-design-tokens/assets/web/icons/check\";\nimport CancelIcon from \"@vector-im/compound-design-tokens/assets/web/icons/close\";\n\nimport styles from \"./EditInPlace.module.css\";\n\nimport {\n  Field,\n  HelpMessage,\n  Label,\n  LoadingMessage,\n  Root,\n  SuccessMessage,\n  TextControl,\n} from \"../..\";\nimport { Button, Tooltip } from \"../../../..\";\n\ntype Props = {\n  /**\n   * The label for the control\n   */\n  label: string;\n\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Callback for when the user confirms the change\n   */\n  onSave?: (e: React.FormEvent<HTMLFormElement>) => Promise<void> | void;\n\n  /**\n   * Callback for when the user wishes to cancel the change\n   */\n  onCancel?: (e: React.FormEvent<HTMLFormElement>) => void;\n\n  /**\n   * onInput event handler on the text control\n   */\n  onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n\n  /**\n   * Callback for when the server validation errors should be cleared.\n   */\n  onClearServerErrors?: () => void;\n\n  /**\n   * Whether the field is in an error state according to the server validation.\n   *\n   * For validation messages, use native validations properties directly, or add custom error messages as children.\n   */\n  serverInvalid?: boolean;\n\n  /**\n   * Label to be displayed by the green check at the bottom. Will only be displayed\n   * for 2 seconds after the onSave callback promise resolves successfully.\n   */\n  savedLabel?: string;\n\n  /**\n   * The label for the save button\n   */\n  saveButtonLabel: string;\n\n  /**\n   * The label for the 'in progress' saving caption\n   */\n  savingLabel: string;\n\n  /**\n   * The label for the cancel button\n   */\n  cancelButtonLabel: string;\n\n  /**\n   * Label to be displayed under the input as a help text\n   */\n  helpLabel?: string;\n\n  /**\n   * If true, disabled the entire component to disallow editing.\n   */\n  disabled?: boolean;\n} & React.ComponentProps<typeof TextControl>;\n\nenum State {\n  /** No changes on the input has been made */\n  Initial,\n\n  /** The input has been changed */\n  Dirty,\n\n  /** The input is being saved */\n  Saving,\n\n  /** The input has been saved */\n  Saved,\n}\n\nenum Event {\n  Touch, // The user 'touched' the control\n  Save, // The user has clicked the save button\n  Saved, // The onSave callback finished successfully\n  SaveError, // The onSave callback finished with an error\n  Cancel, // The user has clicked the cancel button\n  SavedTimeout, // The user has clicked the save button and the saved label has been shown for 2 seconds\n}\n\nfunction reducer(state: State, action: Event): State {\n  switch (action) {\n    case Event.Touch:\n      if (state === State.Initial || state === State.Saved) return State.Dirty;\n      else return state;\n\n    case Event.Save:\n      return State.Saving;\n\n    case Event.Cancel:\n      return State.Initial;\n\n    case Event.Saved:\n      if (state === State.Saving) return State.Saved;\n      else return state;\n\n    case Event.SaveError:\n      if (state === State.Saving) return State.Initial;\n      else return state;\n\n    case Event.SavedTimeout:\n      if (state === State.Saved) return State.Initial;\n      else return state;\n  }\n\n  assertNever(action);\n}\n\nfunction assertNever(value: never): never {\n  throw new Error(`Unreachable value: ${value}`);\n}\n\n/**\n * A text box with save/cancel buttons that appear when the field is active.\n * Since thios control has its own 'save' button, it should *not* appear as part\n * of a larger form: it exists as its own form that submits separately.\n */\nexport const EditInPlace = forwardRef<HTMLInputElement, Props>(\n  function EditInPlace(\n    {\n      className,\n      label,\n      onSave,\n      onCancel,\n      onInput,\n      onClearServerErrors,\n      serverInvalid,\n      saveButtonLabel,\n      cancelButtonLabel,\n      savedLabel,\n      savingLabel,\n      helpLabel,\n      disabled,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const [state, dispatch] = useReducer(reducer, State.Initial);\n\n    // Tracks the focus state of the form\n    // This uses a `ref` to make sure the onFocus/onBlur callback don't trigger unnecessary re-renders\n    // and a state to track the focus state and hide the buttons when the form is not focused\n    const isFocusWithinRef = useRef(false);\n    const [isFocusWithin, setFocusWithin] = useState(false);\n\n    const shouldShowSaveButton =\n      state === State.Dirty || state === State.Saving || isFocusWithin;\n\n    const hideTimer = useRef<ReturnType<typeof setTimeout> | undefined>(\n      undefined,\n    );\n\n    useEffect(() => {\n      // Start a timer when we switch to the saved state\n      if (state === State.Saved) {\n        hideTimer.current = setTimeout(() => {\n          dispatch(Event.SavedTimeout);\n          hideTimer.current = undefined;\n        }, 2000);\n      }\n\n      return () => {\n        // Clear any timers that may have been set\n        if (hideTimer.current) clearTimeout(hideTimer.current);\n        hideTimer.current = undefined;\n      };\n    }, [state]);\n\n    const formRef = useRef<HTMLFormElement>(null);\n    const saveButtonRef = useRef<HTMLButtonElement>(null);\n    const cancelButtonRef = useRef<HTMLButtonElement>(null);\n\n    const onFocus = useCallback(() => {\n      if (isFocusWithinRef.current) return;\n      isFocusWithinRef.current = true;\n      setFocusWithin(true);\n    }, [isFocusWithin, setFocusWithin]);\n\n    const onBlur = useCallback(\n      (e: React.FocusEvent) => {\n        if (!isFocusWithinRef.current) return;\n        // If the user switched to another element within the form\n        // consider that we're still focused within the form\n        if (e.currentTarget.contains(e.relatedTarget)) return;\n\n        isFocusWithinRef.current = false;\n        setFocusWithin(false);\n      },\n      [isFocusWithin, setFocusWithin],\n    );\n\n    const onInputHandler = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        dispatch(Event.Touch);\n        onInput?.(e);\n      },\n      [dispatch, onInput],\n    );\n\n    const onFormSubmit = useCallback(\n      async (e: React.FormEvent<HTMLFormElement>) => {\n        e.preventDefault();\n\n        // Prevent submitting the form if the user has not yet entered any text\n        if (state === State.Initial) {\n          return;\n        }\n\n        try {\n          dispatch(Event.Save);\n          saveButtonRef.current?.blur();\n          await onSave?.(e);\n          dispatch(Event.Saved);\n        } catch {\n          // We don't really need to do anything here, we just don't want to display the\n          // 'saved' label, obviously. The user of the component can update the error to\n          // show what failed.\n          dispatch(Event.SaveError);\n        }\n      },\n      [onSave, state, hideTimer],\n    );\n\n    const onFormReset = useCallback(\n      (e: React.FormEvent<HTMLFormElement>) => {\n        cancelButtonRef.current?.blur();\n        onCancel?.(e);\n        dispatch(Event.Cancel);\n      },\n      [cancelButtonRef, onCancel],\n    );\n\n    return (\n      <Root\n        className={className}\n        onSubmit={onFormSubmit}\n        onReset={onFormReset}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onClearServerErrors={onClearServerErrors}\n        ref={formRef}\n      >\n        <Field name=\"input\" serverInvalid={serverInvalid}>\n          <Label>{label}</Label>\n          <div className={styles.controls}>\n            <TextControl\n              ref={ref}\n              {...props}\n              onInput={onInputHandler}\n              disabled={disabled || state === State.Saving}\n            />\n\n            {shouldShowSaveButton && (\n              <div className={styles[\"button-group\"]}>\n                <Tooltip label={saveButtonLabel}>\n                  <Submit asChild>\n                    <Button\n                      type=\"submit\"\n                      kind=\"primary\"\n                      size=\"sm\"\n                      ref={saveButtonRef}\n                      disabled={state !== State.Dirty}\n                      iconOnly\n                      Icon={CheckIcon}\n                    />\n                  </Submit>\n                </Tooltip>\n\n                <Tooltip label={cancelButtonLabel}>\n                  <Button\n                    type=\"reset\"\n                    kind=\"secondary\"\n                    size=\"sm\"\n                    ref={cancelButtonRef}\n                    className={styles.button}\n                    disabled={state === State.Saving}\n                    iconOnly\n                    Icon={CancelIcon}\n                  />\n                </Tooltip>\n              </div>\n            )}\n          </div>\n\n          {/*\n            During the loading saving state, we only show the saving message.\n            Else, we show whatever children were passed on, as they will have other validation messages\n          */}\n          {state === State.Saving ? (\n            <LoadingMessage>{savingLabel}</LoadingMessage>\n          ) : (\n            children\n          )}\n\n          {savedLabel && state === State.Saved && (\n            <SuccessMessage>{savedLabel}</SuccessMessage>\n          )}\n\n          {/*\n            We show the help message only if:\n              - the helpLabel is set\n              - the form hasn't been validated yet\n              - the 'serverInvalid' prop is not set\n              - we're in the initial or dirty state\n            */}\n          {helpLabel && (state === State.Initial || state === State.Dirty) && (\n            <ValidityState>\n              {(validity) =>\n                (validity === undefined || validity.valid) &&\n                !serverInvalid && <HelpMessage>{helpLabel}</HelpMessage>\n              }\n            </ValidityState>\n          )}\n        </Field>\n      </Root>\n    );\n  },\n);\n"],"names":["forwardRef","EditInPlace","useReducer","useRef","useState","useEffect","useCallback","jsx","Root","jsxs","Field","Label","styles","TextControl","Tooltip","Submit","Button","CancelIcon","LoadingMessage","SuccessMessage","ValidityState","HelpMessage"],"mappings":"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"}
+{"version":3,"file":"EditInPlace.cjs","sources":["../../../../../src/components/Form/Controls/EditInPlace/EditInPlace.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  useEffect,\n  useReducer,\n} from \"react\";\nimport { Submit, ValidityState } from \"@radix-ui/react-form\";\nimport CheckIcon from \"@vector-im/compound-design-tokens/assets/web/icons/check\";\nimport CancelIcon from \"@vector-im/compound-design-tokens/assets/web/icons/close\";\n\nimport styles from \"./EditInPlace.module.css\";\n\nimport {\n  Field,\n  HelpMessage,\n  Label,\n  LoadingMessage,\n  Root,\n  SuccessMessage,\n  TextControl,\n} from \"../..\";\nimport { Button, Tooltip } from \"../../../..\";\n\ntype Props = {\n  /**\n   * The label for the control\n   */\n  label: string;\n\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Callback for when the user confirms the change\n   */\n  onSave?: (e: React.FormEvent<HTMLFormElement>) => Promise<void> | void;\n\n  /**\n   * Callback for when the user wishes to cancel the change\n   */\n  onCancel?: (e: React.FormEvent<HTMLFormElement>) => void;\n\n  /**\n   * onInput event handler on the text control\n   */\n  onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n\n  /**\n   * Callback for when the server validation errors should be cleared.\n   */\n  onClearServerErrors?: () => void;\n\n  /**\n   * Whether the field is in an error state according to the server validation.\n   *\n   * For validation messages, use native validations properties directly, or add custom error messages as children.\n   */\n  serverInvalid?: boolean;\n\n  /**\n   * Label to be displayed by the green check at the bottom. Will only be displayed\n   * for 2 seconds after the onSave callback promise resolves successfully.\n   */\n  savedLabel?: string;\n\n  /**\n   * The label for the save button\n   */\n  saveButtonLabel: string;\n\n  /**\n   * The label for the 'in progress' saving caption\n   */\n  savingLabel: string;\n\n  /**\n   * The label for the cancel button\n   */\n  cancelButtonLabel: string;\n\n  /**\n   * Label to be displayed under the input as a help text\n   */\n  helpLabel?: string;\n\n  /**\n   * If true, disabled the entire component to disallow editing.\n   */\n  disabled?: boolean;\n} & React.ComponentProps<typeof TextControl>;\n\nenum State {\n  /** No changes on the input has been made */\n  Initial,\n\n  /** The input has been changed */\n  Dirty,\n\n  /** The input is being saved */\n  Saving,\n\n  /** The input has been saved */\n  Saved,\n}\n\nenum Event {\n  Touch, // The user 'touched' the control\n  Save, // The user has clicked the save button\n  Saved, // The onSave callback finished successfully\n  SaveError, // The onSave callback finished with an error\n  Cancel, // The user has clicked the cancel button\n  SavedTimeout, // The user has clicked the save button and the saved label has been shown for 2 seconds\n}\n\nfunction reducer(state: State, action: Event): State {\n  switch (action) {\n    case Event.Touch:\n      if (state === State.Initial || state === State.Saved) return State.Dirty;\n      else return state;\n\n    case Event.Save:\n      return State.Saving;\n\n    case Event.Cancel:\n      return State.Initial;\n\n    case Event.Saved:\n      if (state === State.Saving) return State.Saved;\n      else return state;\n\n    case Event.SaveError:\n      if (state === State.Saving) return State.Initial;\n      else return state;\n\n    case Event.SavedTimeout:\n      if (state === State.Saved) return State.Initial;\n      else return state;\n  }\n\n  assertNever(action);\n}\n\nfunction assertNever(value: never): never {\n  throw new Error(`Unreachable value: ${value}`);\n}\n\n/**\n * A text box with save/cancel buttons that appear when the field is active.\n * Since thios control has its own 'save' button, it should *not* appear as part\n * of a larger form: it exists as its own form that submits separately.\n */\nexport const EditInPlace = forwardRef<HTMLInputElement, Props>(\n  function EditInPlace(\n    {\n      className,\n      label,\n      onSave,\n      onCancel,\n      onInput,\n      onClearServerErrors,\n      serverInvalid,\n      saveButtonLabel,\n      cancelButtonLabel,\n      savedLabel,\n      savingLabel,\n      helpLabel,\n      disabled,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const [state, dispatch] = useReducer(reducer, State.Initial);\n\n    // Tracks the focus state of the form\n    // This uses a `ref` to make sure the onFocus/onBlur callback don't trigger unnecessary re-renders\n    // and a state to track the focus state and hide the buttons when the form is not focused\n    const isFocusWithinRef = useRef(false);\n    const [isFocusWithin, setFocusWithin] = useState(false);\n\n    const shouldShowSaveButton =\n      state === State.Dirty || state === State.Saving || isFocusWithin;\n\n    const hideTimer = useRef<ReturnType<typeof setTimeout> | undefined>(\n      undefined,\n    );\n\n    useEffect(() => {\n      // Start a timer when we switch to the saved state\n      if (state === State.Saved) {\n        hideTimer.current = setTimeout(() => {\n          dispatch(Event.SavedTimeout);\n          hideTimer.current = undefined;\n        }, 2000);\n      }\n\n      return () => {\n        // Clear any timers that may have been set\n        if (hideTimer.current) clearTimeout(hideTimer.current);\n        hideTimer.current = undefined;\n      };\n    }, [state]);\n\n    const formRef = useRef<HTMLFormElement>(null);\n    const saveButtonRef = useRef<HTMLButtonElement>(null);\n    const cancelButtonRef = useRef<HTMLButtonElement>(null);\n\n    const onFocus = useCallback(() => {\n      if (isFocusWithinRef.current) return;\n      isFocusWithinRef.current = true;\n      setFocusWithin(true);\n    }, [isFocusWithin, setFocusWithin]);\n\n    const onBlur = useCallback(\n      (e: React.FocusEvent) => {\n        if (!isFocusWithinRef.current) return;\n        // If the user switched to another element within the form\n        // consider that we're still focused within the form\n        if (e.currentTarget.contains(e.relatedTarget)) return;\n\n        isFocusWithinRef.current = false;\n        setFocusWithin(false);\n      },\n      [isFocusWithin, setFocusWithin],\n    );\n\n    const onInputHandler = useCallback(\n      (e: React.InputEvent<HTMLInputElement>) => {\n        dispatch(Event.Touch);\n        onInput?.(e);\n      },\n      [dispatch, onInput],\n    );\n\n    const onFormSubmit = useCallback(\n      async (e: React.FormEvent<HTMLFormElement>) => {\n        e.preventDefault();\n\n        // Prevent submitting the form if the user has not yet entered any text\n        if (state === State.Initial) {\n          return;\n        }\n\n        try {\n          dispatch(Event.Save);\n          saveButtonRef.current?.blur();\n          await onSave?.(e);\n          dispatch(Event.Saved);\n        } catch {\n          // We don't really need to do anything here, we just don't want to display the\n          // 'saved' label, obviously. The user of the component can update the error to\n          // show what failed.\n          dispatch(Event.SaveError);\n        }\n      },\n      [onSave, state, hideTimer],\n    );\n\n    const onFormReset = useCallback(\n      (e: React.FormEvent<HTMLFormElement>) => {\n        cancelButtonRef.current?.blur();\n        onCancel?.(e);\n        dispatch(Event.Cancel);\n      },\n      [cancelButtonRef, onCancel],\n    );\n\n    return (\n      <Root\n        className={className}\n        onSubmit={onFormSubmit}\n        onReset={onFormReset}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onClearServerErrors={onClearServerErrors}\n        ref={formRef}\n      >\n        <Field name=\"input\" serverInvalid={serverInvalid}>\n          <Label>{label}</Label>\n          <div className={styles.controls}>\n            <TextControl\n              ref={ref}\n              {...props}\n              onInput={onInputHandler}\n              disabled={disabled || state === State.Saving}\n            />\n\n            {shouldShowSaveButton && (\n              <div className={styles[\"button-group\"]}>\n                <Tooltip label={saveButtonLabel}>\n                  <Submit asChild>\n                    <Button\n                      type=\"submit\"\n                      kind=\"primary\"\n                      size=\"sm\"\n                      ref={saveButtonRef}\n                      disabled={state !== State.Dirty}\n                      iconOnly\n                      Icon={CheckIcon}\n                    />\n                  </Submit>\n                </Tooltip>\n\n                <Tooltip label={cancelButtonLabel}>\n                  <Button\n                    type=\"reset\"\n                    kind=\"secondary\"\n                    size=\"sm\"\n                    ref={cancelButtonRef}\n                    className={styles.button}\n                    disabled={state === State.Saving}\n                    iconOnly\n                    Icon={CancelIcon}\n                  />\n                </Tooltip>\n              </div>\n            )}\n          </div>\n\n          {/*\n            During the loading saving state, we only show the saving message.\n            Else, we show whatever children were passed on, as they will have other validation messages\n          */}\n          {state === State.Saving ? (\n            <LoadingMessage>{savingLabel}</LoadingMessage>\n          ) : (\n            children\n          )}\n\n          {savedLabel && state === State.Saved && (\n            <SuccessMessage>{savedLabel}</SuccessMessage>\n          )}\n\n          {/*\n            We show the help message only if:\n              - the helpLabel is set\n              - the form hasn't been validated yet\n              - the 'serverInvalid' prop is not set\n              - we're in the initial or dirty state\n            */}\n          {helpLabel && (state === State.Initial || state === State.Dirty) && (\n            <ValidityState>\n              {(validity) =>\n                (validity === undefined || validity.valid) &&\n                !serverInvalid && <HelpMessage>{helpLabel}</HelpMessage>\n              }\n            </ValidityState>\n          )}\n        </Field>\n      </Root>\n    );\n  },\n);\n"],"names":["forwardRef","EditInPlace","useReducer","useRef","useState","useEffect","useCallback","jsx","Root","jsxs","Field","Label","styles","TextControl","Tooltip","Submit","Button","CancelIcon","LoadingMessage","SuccessMessage","ValidityState","HelpMessage"],"mappings":"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"}

package/dist/components/Form/Controls/EditInPlace/EditInPlace.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditInPlace.js","sources":["../../../../../src/components/Form/Controls/EditInPlace/EditInPlace.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  useEffect,\n  useReducer,\n} from \"react\";\nimport { Submit, ValidityState } from \"@radix-ui/react-form\";\nimport CheckIcon from \"@vector-im/compound-design-tokens/assets/web/icons/check\";\nimport CancelIcon from \"@vector-im/compound-design-tokens/assets/web/icons/close\";\n\nimport styles from \"./EditInPlace.module.css\";\n\nimport {\n  Field,\n  HelpMessage,\n  Label,\n  LoadingMessage,\n  Root,\n  SuccessMessage,\n  TextControl,\n} from \"../..\";\nimport { Button, Tooltip } from \"../../../..\";\n\ntype Props = {\n  /**\n   * The label for the control\n   */\n  label: string;\n\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Callback for when the user confirms the change\n   */\n  onSave?: (e: React.FormEvent<HTMLFormElement>) => Promise<void> | void;\n\n  /**\n   * Callback for when the user wishes to cancel the change\n   */\n  onCancel?: (e: React.FormEvent<HTMLFormElement>) => void;\n\n  /**\n   * onInput event handler on the text control\n   */\n  onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n\n  /**\n   * Callback for when the server validation errors should be cleared.\n   */\n  onClearServerErrors?: () => void;\n\n  /**\n   * Whether the field is in an error state according to the server validation.\n   *\n   * For validation messages, use native validations properties directly, or add custom error messages as children.\n   */\n  serverInvalid?: boolean;\n\n  /**\n   * Label to be displayed by the green check at the bottom. Will only be displayed\n   * for 2 seconds after the onSave callback promise resolves successfully.\n   */\n  savedLabel?: string;\n\n  /**\n   * The label for the save button\n   */\n  saveButtonLabel: string;\n\n  /**\n   * The label for the 'in progress' saving caption\n   */\n  savingLabel: string;\n\n  /**\n   * The label for the cancel button\n   */\n  cancelButtonLabel: string;\n\n  /**\n   * Label to be displayed under the input as a help text\n   */\n  helpLabel?: string;\n\n  /**\n   * If true, disabled the entire component to disallow editing.\n   */\n  disabled?: boolean;\n} & React.ComponentProps<typeof TextControl>;\n\nenum State {\n  /** No changes on the input has been made */\n  Initial,\n\n  /** The input has been changed */\n  Dirty,\n\n  /** The input is being saved */\n  Saving,\n\n  /** The input has been saved */\n  Saved,\n}\n\nenum Event {\n  Touch, // The user 'touched' the control\n  Save, // The user has clicked the save button\n  Saved, // The onSave callback finished successfully\n  SaveError, // The onSave callback finished with an error\n  Cancel, // The user has clicked the cancel button\n  SavedTimeout, // The user has clicked the save button and the saved label has been shown for 2 seconds\n}\n\nfunction reducer(state: State, action: Event): State {\n  switch (action) {\n    case Event.Touch:\n      if (state === State.Initial || state === State.Saved) return State.Dirty;\n      else return state;\n\n    case Event.Save:\n      return State.Saving;\n\n    case Event.Cancel:\n      return State.Initial;\n\n    case Event.Saved:\n      if (state === State.Saving) return State.Saved;\n      else return state;\n\n    case Event.SaveError:\n      if (state === State.Saving) return State.Initial;\n      else return state;\n\n    case Event.SavedTimeout:\n      if (state === State.Saved) return State.Initial;\n      else return state;\n  }\n\n  assertNever(action);\n}\n\nfunction assertNever(value: never): never {\n  throw new Error(`Unreachable value: ${value}`);\n}\n\n/**\n * A text box with save/cancel buttons that appear when the field is active.\n * Since thios control has its own 'save' button, it should *not* appear as part\n * of a larger form: it exists as its own form that submits separately.\n */\nexport const EditInPlace = forwardRef<HTMLInputElement, Props>(\n  function EditInPlace(\n    {\n      className,\n      label,\n      onSave,\n      onCancel,\n      onInput,\n      onClearServerErrors,\n      serverInvalid,\n      saveButtonLabel,\n      cancelButtonLabel,\n      savedLabel,\n      savingLabel,\n      helpLabel,\n      disabled,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const [state, dispatch] = useReducer(reducer, State.Initial);\n\n    // Tracks the focus state of the form\n    // This uses a `ref` to make sure the onFocus/onBlur callback don't trigger unnecessary re-renders\n    // and a state to track the focus state and hide the buttons when the form is not focused\n    const isFocusWithinRef = useRef(false);\n    const [isFocusWithin, setFocusWithin] = useState(false);\n\n    const shouldShowSaveButton =\n      state === State.Dirty || state === State.Saving || isFocusWithin;\n\n    const hideTimer = useRef<ReturnType<typeof setTimeout> | undefined>(\n      undefined,\n    );\n\n    useEffect(() => {\n      // Start a timer when we switch to the saved state\n      if (state === State.Saved) {\n        hideTimer.current = setTimeout(() => {\n          dispatch(Event.SavedTimeout);\n          hideTimer.current = undefined;\n        }, 2000);\n      }\n\n      return () => {\n        // Clear any timers that may have been set\n        if (hideTimer.current) clearTimeout(hideTimer.current);\n        hideTimer.current = undefined;\n      };\n    }, [state]);\n\n    const formRef = useRef<HTMLFormElement>(null);\n    const saveButtonRef = useRef<HTMLButtonElement>(null);\n    const cancelButtonRef = useRef<HTMLButtonElement>(null);\n\n    const onFocus = useCallback(() => {\n      if (isFocusWithinRef.current) return;\n      isFocusWithinRef.current = true;\n      setFocusWithin(true);\n    }, [isFocusWithin, setFocusWithin]);\n\n    const onBlur = useCallback(\n      (e: React.FocusEvent) => {\n        if (!isFocusWithinRef.current) return;\n        // If the user switched to another element within the form\n        // consider that we're still focused within the form\n        if (e.currentTarget.contains(e.relatedTarget)) return;\n\n        isFocusWithinRef.current = false;\n        setFocusWithin(false);\n      },\n      [isFocusWithin, setFocusWithin],\n    );\n\n    const onInputHandler = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        dispatch(Event.Touch);\n        onInput?.(e);\n      },\n      [dispatch, onInput],\n    );\n\n    const onFormSubmit = useCallback(\n      async (e: React.FormEvent<HTMLFormElement>) => {\n        e.preventDefault();\n\n        // Prevent submitting the form if the user has not yet entered any text\n        if (state === State.Initial) {\n          return;\n        }\n\n        try {\n          dispatch(Event.Save);\n          saveButtonRef.current?.blur();\n          await onSave?.(e);\n          dispatch(Event.Saved);\n        } catch {\n          // We don't really need to do anything here, we just don't want to display the\n          // 'saved' label, obviously. The user of the component can update the error to\n          // show what failed.\n          dispatch(Event.SaveError);\n        }\n      },\n      [onSave, state, hideTimer],\n    );\n\n    const onFormReset = useCallback(\n      (e: React.FormEvent<HTMLFormElement>) => {\n        cancelButtonRef.current?.blur();\n        onCancel?.(e);\n        dispatch(Event.Cancel);\n      },\n      [cancelButtonRef, onCancel],\n    );\n\n    return (\n      <Root\n        className={className}\n        onSubmit={onFormSubmit}\n        onReset={onFormReset}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onClearServerErrors={onClearServerErrors}\n        ref={formRef}\n      >\n        <Field name=\"input\" serverInvalid={serverInvalid}>\n          <Label>{label}</Label>\n          <div className={styles.controls}>\n            <TextControl\n              ref={ref}\n              {...props}\n              onInput={onInputHandler}\n              disabled={disabled || state === State.Saving}\n            />\n\n            {shouldShowSaveButton && (\n              <div className={styles[\"button-group\"]}>\n                <Tooltip label={saveButtonLabel}>\n                  <Submit asChild>\n                    <Button\n                      type=\"submit\"\n                      kind=\"primary\"\n                      size=\"sm\"\n                      ref={saveButtonRef}\n                      disabled={state !== State.Dirty}\n                      iconOnly\n                      Icon={CheckIcon}\n                    />\n                  </Submit>\n                </Tooltip>\n\n                <Tooltip label={cancelButtonLabel}>\n                  <Button\n                    type=\"reset\"\n                    kind=\"secondary\"\n                    size=\"sm\"\n                    ref={cancelButtonRef}\n                    className={styles.button}\n                    disabled={state === State.Saving}\n                    iconOnly\n                    Icon={CancelIcon}\n                  />\n                </Tooltip>\n              </div>\n            )}\n          </div>\n\n          {/*\n            During the loading saving state, we only show the saving message.\n            Else, we show whatever children were passed on, as they will have other validation messages\n          */}\n          {state === State.Saving ? (\n            <LoadingMessage>{savingLabel}</LoadingMessage>\n          ) : (\n            children\n          )}\n\n          {savedLabel && state === State.Saved && (\n            <SuccessMessage>{savedLabel}</SuccessMessage>\n          )}\n\n          {/*\n            We show the help message only if:\n              - the helpLabel is set\n              - the form hasn't been validated yet\n              - the 'serverInvalid' prop is not set\n              - we're in the initial or dirty state\n            */}\n          {helpLabel && (state === State.Initial || state === State.Dirty) && (\n            <ValidityState>\n              {(validity) =>\n                (validity === undefined || validity.valid) &&\n                !serverInvalid && <HelpMessage>{helpLabel}</HelpMessage>\n              }\n            </ValidityState>\n          )}\n        </Field>\n      </Root>\n    );\n  },\n);\n"],"names":["EditInPlace","CancelIcon"],"mappings":"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"}
+{"version":3,"file":"EditInPlace.js","sources":["../../../../../src/components/Form/Controls/EditInPlace/EditInPlace.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  useEffect,\n  useReducer,\n} from \"react\";\nimport { Submit, ValidityState } from \"@radix-ui/react-form\";\nimport CheckIcon from \"@vector-im/compound-design-tokens/assets/web/icons/check\";\nimport CancelIcon from \"@vector-im/compound-design-tokens/assets/web/icons/close\";\n\nimport styles from \"./EditInPlace.module.css\";\n\nimport {\n  Field,\n  HelpMessage,\n  Label,\n  LoadingMessage,\n  Root,\n  SuccessMessage,\n  TextControl,\n} from \"../..\";\nimport { Button, Tooltip } from \"../../../..\";\n\ntype Props = {\n  /**\n   * The label for the control\n   */\n  label: string;\n\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Callback for when the user confirms the change\n   */\n  onSave?: (e: React.FormEvent<HTMLFormElement>) => Promise<void> | void;\n\n  /**\n   * Callback for when the user wishes to cancel the change\n   */\n  onCancel?: (e: React.FormEvent<HTMLFormElement>) => void;\n\n  /**\n   * onInput event handler on the text control\n   */\n  onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n\n  /**\n   * Callback for when the server validation errors should be cleared.\n   */\n  onClearServerErrors?: () => void;\n\n  /**\n   * Whether the field is in an error state according to the server validation.\n   *\n   * For validation messages, use native validations properties directly, or add custom error messages as children.\n   */\n  serverInvalid?: boolean;\n\n  /**\n   * Label to be displayed by the green check at the bottom. Will only be displayed\n   * for 2 seconds after the onSave callback promise resolves successfully.\n   */\n  savedLabel?: string;\n\n  /**\n   * The label for the save button\n   */\n  saveButtonLabel: string;\n\n  /**\n   * The label for the 'in progress' saving caption\n   */\n  savingLabel: string;\n\n  /**\n   * The label for the cancel button\n   */\n  cancelButtonLabel: string;\n\n  /**\n   * Label to be displayed under the input as a help text\n   */\n  helpLabel?: string;\n\n  /**\n   * If true, disabled the entire component to disallow editing.\n   */\n  disabled?: boolean;\n} & React.ComponentProps<typeof TextControl>;\n\nenum State {\n  /** No changes on the input has been made */\n  Initial,\n\n  /** The input has been changed */\n  Dirty,\n\n  /** The input is being saved */\n  Saving,\n\n  /** The input has been saved */\n  Saved,\n}\n\nenum Event {\n  Touch, // The user 'touched' the control\n  Save, // The user has clicked the save button\n  Saved, // The onSave callback finished successfully\n  SaveError, // The onSave callback finished with an error\n  Cancel, // The user has clicked the cancel button\n  SavedTimeout, // The user has clicked the save button and the saved label has been shown for 2 seconds\n}\n\nfunction reducer(state: State, action: Event): State {\n  switch (action) {\n    case Event.Touch:\n      if (state === State.Initial || state === State.Saved) return State.Dirty;\n      else return state;\n\n    case Event.Save:\n      return State.Saving;\n\n    case Event.Cancel:\n      return State.Initial;\n\n    case Event.Saved:\n      if (state === State.Saving) return State.Saved;\n      else return state;\n\n    case Event.SaveError:\n      if (state === State.Saving) return State.Initial;\n      else return state;\n\n    case Event.SavedTimeout:\n      if (state === State.Saved) return State.Initial;\n      else return state;\n  }\n\n  assertNever(action);\n}\n\nfunction assertNever(value: never): never {\n  throw new Error(`Unreachable value: ${value}`);\n}\n\n/**\n * A text box with save/cancel buttons that appear when the field is active.\n * Since thios control has its own 'save' button, it should *not* appear as part\n * of a larger form: it exists as its own form that submits separately.\n */\nexport const EditInPlace = forwardRef<HTMLInputElement, Props>(\n  function EditInPlace(\n    {\n      className,\n      label,\n      onSave,\n      onCancel,\n      onInput,\n      onClearServerErrors,\n      serverInvalid,\n      saveButtonLabel,\n      cancelButtonLabel,\n      savedLabel,\n      savingLabel,\n      helpLabel,\n      disabled,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const [state, dispatch] = useReducer(reducer, State.Initial);\n\n    // Tracks the focus state of the form\n    // This uses a `ref` to make sure the onFocus/onBlur callback don't trigger unnecessary re-renders\n    // and a state to track the focus state and hide the buttons when the form is not focused\n    const isFocusWithinRef = useRef(false);\n    const [isFocusWithin, setFocusWithin] = useState(false);\n\n    const shouldShowSaveButton =\n      state === State.Dirty || state === State.Saving || isFocusWithin;\n\n    const hideTimer = useRef<ReturnType<typeof setTimeout> | undefined>(\n      undefined,\n    );\n\n    useEffect(() => {\n      // Start a timer when we switch to the saved state\n      if (state === State.Saved) {\n        hideTimer.current = setTimeout(() => {\n          dispatch(Event.SavedTimeout);\n          hideTimer.current = undefined;\n        }, 2000);\n      }\n\n      return () => {\n        // Clear any timers that may have been set\n        if (hideTimer.current) clearTimeout(hideTimer.current);\n        hideTimer.current = undefined;\n      };\n    }, [state]);\n\n    const formRef = useRef<HTMLFormElement>(null);\n    const saveButtonRef = useRef<HTMLButtonElement>(null);\n    const cancelButtonRef = useRef<HTMLButtonElement>(null);\n\n    const onFocus = useCallback(() => {\n      if (isFocusWithinRef.current) return;\n      isFocusWithinRef.current = true;\n      setFocusWithin(true);\n    }, [isFocusWithin, setFocusWithin]);\n\n    const onBlur = useCallback(\n      (e: React.FocusEvent) => {\n        if (!isFocusWithinRef.current) return;\n        // If the user switched to another element within the form\n        // consider that we're still focused within the form\n        if (e.currentTarget.contains(e.relatedTarget)) return;\n\n        isFocusWithinRef.current = false;\n        setFocusWithin(false);\n      },\n      [isFocusWithin, setFocusWithin],\n    );\n\n    const onInputHandler = useCallback(\n      (e: React.InputEvent<HTMLInputElement>) => {\n        dispatch(Event.Touch);\n        onInput?.(e);\n      },\n      [dispatch, onInput],\n    );\n\n    const onFormSubmit = useCallback(\n      async (e: React.FormEvent<HTMLFormElement>) => {\n        e.preventDefault();\n\n        // Prevent submitting the form if the user has not yet entered any text\n        if (state === State.Initial) {\n          return;\n        }\n\n        try {\n          dispatch(Event.Save);\n          saveButtonRef.current?.blur();\n          await onSave?.(e);\n          dispatch(Event.Saved);\n        } catch {\n          // We don't really need to do anything here, we just don't want to display the\n          // 'saved' label, obviously. The user of the component can update the error to\n          // show what failed.\n          dispatch(Event.SaveError);\n        }\n      },\n      [onSave, state, hideTimer],\n    );\n\n    const onFormReset = useCallback(\n      (e: React.FormEvent<HTMLFormElement>) => {\n        cancelButtonRef.current?.blur();\n        onCancel?.(e);\n        dispatch(Event.Cancel);\n      },\n      [cancelButtonRef, onCancel],\n    );\n\n    return (\n      <Root\n        className={className}\n        onSubmit={onFormSubmit}\n        onReset={onFormReset}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onClearServerErrors={onClearServerErrors}\n        ref={formRef}\n      >\n        <Field name=\"input\" serverInvalid={serverInvalid}>\n          <Label>{label}</Label>\n          <div className={styles.controls}>\n            <TextControl\n              ref={ref}\n              {...props}\n              onInput={onInputHandler}\n              disabled={disabled || state === State.Saving}\n            />\n\n            {shouldShowSaveButton && (\n              <div className={styles[\"button-group\"]}>\n                <Tooltip label={saveButtonLabel}>\n                  <Submit asChild>\n                    <Button\n                      type=\"submit\"\n                      kind=\"primary\"\n                      size=\"sm\"\n                      ref={saveButtonRef}\n                      disabled={state !== State.Dirty}\n                      iconOnly\n                      Icon={CheckIcon}\n                    />\n                  </Submit>\n                </Tooltip>\n\n                <Tooltip label={cancelButtonLabel}>\n                  <Button\n                    type=\"reset\"\n                    kind=\"secondary\"\n                    size=\"sm\"\n                    ref={cancelButtonRef}\n                    className={styles.button}\n                    disabled={state === State.Saving}\n                    iconOnly\n                    Icon={CancelIcon}\n                  />\n                </Tooltip>\n              </div>\n            )}\n          </div>\n\n          {/*\n            During the loading saving state, we only show the saving message.\n            Else, we show whatever children were passed on, as they will have other validation messages\n          */}\n          {state === State.Saving ? (\n            <LoadingMessage>{savingLabel}</LoadingMessage>\n          ) : (\n            children\n          )}\n\n          {savedLabel && state === State.Saved && (\n            <SuccessMessage>{savedLabel}</SuccessMessage>\n          )}\n\n          {/*\n            We show the help message only if:\n              - the helpLabel is set\n              - the form hasn't been validated yet\n              - the 'serverInvalid' prop is not set\n              - we're in the initial or dirty state\n            */}\n          {helpLabel && (state === State.Initial || state === State.Dirty) && (\n            <ValidityState>\n              {(validity) =>\n                (validity === undefined || validity.valid) &&\n                !serverInvalid && <HelpMessage>{helpLabel}</HelpMessage>\n              }\n            </ValidityState>\n          )}\n        </Field>\n      </Root>\n    );\n  },\n);\n"],"names":["EditInPlace","CancelIcon"],"mappings":"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"}

package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
 import { Label } from "../../Label.js";
 import { HelpMessage } from "../../Message.js";

package/dist/components/Form/index.cjs

@@ -8,14 +8,14 @@ const reactForm = require("@radix-ui/react-form");
 const Message = require("./Message.cjs");
 const Submit = require("./Submit.cjs");
 const Action = require("./Controls/Action/Action.cjs");
-const Password = require("./Controls/Password/Password.cjs");
-const Text = require("./Controls/Text/Text.cjs");
-const MFA = require("./Controls/MFA/MFA.cjs");
 const Checkbox = require("./Controls/Checkbox/Checkbox.cjs");
-const Radio = require("./Controls/Radio/Radio.cjs");
-const Toggle = require("./Controls/Toggle/Toggle.cjs");
 const EditInPlace = require("./Controls/EditInPlace/EditInPlace.cjs");
+const MFA = require("./Controls/MFA/MFA.cjs");
+const Password = require("./Controls/Password/Password.cjs");
+const Radio = require("./Controls/Radio/Radio.cjs");
 const SettingsToggle = require("./Controls/SettingsToggle/SettingsToggle.cjs");
+const Text = require("./Controls/Text/Text.cjs");
+const Toggle = require("./Controls/Toggle/Toggle.cjs");
 exports.Root = Root.Root;
 exports.Field = Field.Field;
 exports.InlineField = InlineField.InlineField;
@@ -35,19 +35,19 @@ exports.SuccessMessage = Message.SuccessMessage;
 exports.Submit = Submit.Submit;
 exports.ActionControl = Action.ActionControl;
 exports.ActionInput = Action.ActionInput;
-exports.PasswordControl = Password.PasswordControl;
-exports.PasswordInput = Password.PasswordInput;
-exports.TextControl = Text.TextControl;
-exports.TextInput = Text.TextInput;
-exports.MFAControl = MFA.MFAControl;
-exports.MFAInput = MFA.MFAInput;
 exports.CheckboxControl = Checkbox.CheckboxControl;
 exports.CheckboxInput = Checkbox.CheckboxInput;
+exports.EditInPlace = EditInPlace.EditInPlace;
+exports.MFAControl = MFA.MFAControl;
+exports.MFAInput = MFA.MFAInput;
+exports.PasswordControl = Password.PasswordControl;
+exports.PasswordInput = Password.PasswordInput;
 exports.RadioControl = Radio.RadioControl;
 exports.RadioInput = Radio.RadioInput;
-exports.ToggleControl = Toggle.ToggleControl;
-exports.ToggleInput = Toggle.ToggleInput;
-exports.EditInPlace = EditInPlace.EditInPlace;
 exports.SettingsToggleControl = SettingsToggle.SettingsToggleControl;
 exports.SettingsToggleInput = SettingsToggle.SettingsToggleInput;
+exports.TextControl = Text.TextControl;
+exports.TextInput = Text.TextInput;
+exports.ToggleControl = Toggle.ToggleControl;
+exports.ToggleInput = Toggle.ToggleInput;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Form/index.js

@@ -6,14 +6,14 @@ import { Message, ValidityState } from "@radix-ui/react-form";
 import { ErrorMessage, HelpMessage, LoadingMessage, SuccessMessage } from "./Message.js";
 import { Submit } from "./Submit.js";
 import { ActionControl, ActionInput } from "./Controls/Action/Action.js";
-import { PasswordControl, PasswordInput } from "./Controls/Password/Password.js";
-import { TextControl, TextInput } from "./Controls/Text/Text.js";
-import { MFAControl, MFAInput } from "./Controls/MFA/MFA.js";
 import { CheckboxControl, CheckboxInput } from "./Controls/Checkbox/Checkbox.js";
-import { RadioControl, RadioInput } from "./Controls/Radio/Radio.js";
-import { ToggleControl, ToggleInput } from "./Controls/Toggle/Toggle.js";
 import { EditInPlace } from "./Controls/EditInPlace/EditInPlace.js";
+import { MFAControl, MFAInput } from "./Controls/MFA/MFA.js";
+import { PasswordControl, PasswordInput } from "./Controls/Password/Password.js";
+import { RadioControl, RadioInput } from "./Controls/Radio/Radio.js";
 import { SettingsToggleControl, SettingsToggleInput } from "./Controls/SettingsToggle/SettingsToggle.js";
+import { TextControl, TextInput } from "./Controls/Text/Text.js";
+import { ToggleControl, ToggleInput } from "./Controls/Toggle/Toggle.js";
 export {
   ActionControl,
   ActionInput,

package/dist/components/Menu/Menu.cjs

@@ -15,6 +15,7 @@ const DropdownMenuItemWrapper = ({
   children
 }) => /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.DropdownMenuItem, { onSelect: onSelect ?? void 0, asChild: true, children });
 const Menu = ({
+  className,
   title,
   showTitle = true,
   open,
@@ -42,7 +43,15 @@ const Menu = ({
     ] })
   ] }) : /* @__PURE__ */ jsxRuntime.jsxs(reactDropdownMenu.Root, { open, onOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Content, { asChild: true, side, align, sideOffset: 8, children: /* @__PURE__ */ jsxRuntime.jsx(FloatingMenu.FloatingMenu, { title, showTitle, children }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Content, { asChild: true, side, align, sideOffset: 8, children: /* @__PURE__ */ jsxRuntime.jsx(
+      FloatingMenu.FloatingMenu,
+      {
+        className,
+        title,
+        showTitle,
+        children
+      }
+    ) }) })
   ] });
 };
 exports.Menu = Menu;

package/dist/components/Menu/Menu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.cjs","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { type FC, type ReactNode, useMemo } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  DropdownMenuItem,\n} from \"@radix-ui/react-dropdown-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerMenu from \"./DrawerMenu.module.css\";\nimport {\n  MenuContext,\n  type MenuData,\n  type MenuItemWrapperProps,\n} from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title. This can be hidden with `showTitle={false}` in which case it will only\n   * be a label for screen readers.\n   */\n  title: string;\n  /**\n   * Controls whether the title is displayed (see `title` prop). Titles are only displayed on\n   * web: on mobile, this parameter is ignored.\n   */\n  showTitle?: boolean;\n  /**\n   * Whether the menu is open.\n   */\n  open: boolean;\n  /**\n   * Event handler called when the open state of the menu changes. This includes\n   * anything like clicking the trigger, selecting a menu item, or dismissing\n   * the menu with the mouse or keyboard.\n   */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * The button that opens the menu. This must be a component that accepts a ref\n   * and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n  /**\n   * The side of the trigger on which to place the menu. Note that the menu may\n   * still end up on a different side than the one you request if there isn't\n   * enough space.\n   * @default bottom\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /**\n   * The edge along which the menu and trigger will be aligned.\n   * @default center\n   */\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nconst DropdownMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <DropdownMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </DropdownMenuItem>\n);\n\n/**\n * A menu opened by pressing a button.\n */\nexport const Menu: FC<Props> = ({\n  title,\n  showTitle = true,\n  open,\n  onOpenChange,\n  trigger,\n  children: childrenProp,\n  side = \"bottom\",\n  align = \"center\",\n}) => {\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  return drawer ? (\n    <Drawer.Root open={open} onOpenChange={onOpenChange}>\n      <Drawer.Trigger asChild>{trigger}</Drawer.Trigger>\n      <Drawer.Portal>\n        <Drawer.Overlay className={classnames(drawerMenu.bg)} />\n        <Drawer.Content asChild>\n          <DrawerMenu title={title}>{children}</DrawerMenu>\n        </Drawer.Content>\n      </Drawer.Portal>\n    </Drawer.Root>\n  ) : (\n    <Root open={open} onOpenChange={onOpenChange}>\n      <Trigger asChild>{trigger}</Trigger>\n      <Portal>\n        <Content asChild side={side} align={align} sideOffset={8}>\n          <FloatingMenu title={title} showTitle={showTitle}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["DropdownMenuItem","platform","getPlatform","useMemo","jsx","MenuContext","jsxs","Drawer","classnames","drawerMenu","DrawerMenu","Root","Trigger","Portal","Content","FloatingMenu"],"mappings":";;;;;;;;;;;;AAwEA,MAAM,0BAAoD,CAAC;AAAA,EACzD;AAAA,EACA;AACF,qCACGA,oCAAA,EAAiB,UAAU,YAAY,QAAW,SAAO,MACvD,UACH;AAMK,MAAM,OAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AACV,MAAM;AAGJ,QAAMC,aAAWC,SAAAA,YAAA;AACjB,QAAM,SAASD,eAAa,aAAaA,eAAa;AACtD,QAAM,UAAoBE,MAAAA;AAAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EAAA;AAEf,QAAM,WACJC,+BAACC,YAAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAA,cAAa;AAGtD,SAAO,SACLC,2BAAAA,KAACC,KAAAA,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA;AAAA,IAAAH,2BAAAA,IAACG,KAAAA,OAAO,SAAP,EAAe,SAAO,MAAE,UAAA,SAAQ;AAAA,IACjCD,2BAAAA,KAACC,KAAAA,OAAO,QAAP,EACC,UAAA;AAAA,MAAAH,+BAACG,KAAAA,OAAO,SAAP,EAAe,WAAWC,WAAWC,kBAAAA,QAAW,EAAE,GAAG;AAAA,MACtDL,2BAAAA,IAACG,KAAAA,OAAO,SAAP,EAAe,SAAO,MACrB,UAAAH,2BAAAA,IAACM,WAAAA,YAAA,EAAW,OAAe,SAAA,CAAS,EAAA,CACtC;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,IAEAJ,2BAAAA,KAACK,kBAAAA,MAAA,EAAK,MAAY,cAChB,UAAA;AAAA,IAAAP,2BAAAA,IAACQ,kBAAAA,SAAA,EAAQ,SAAO,MAAE,UAAA,SAAQ;AAAA,mCACzBC,kBAAAA,QAAA,EACC,UAAAT,2BAAAA,IAACU,kBAAAA,SAAA,EAAQ,SAAO,MAAC,MAAY,OAAc,YAAY,GACrD,yCAACC,2BAAA,EAAa,OAAc,WACzB,UACH,GACF,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;;"}
+{"version":3,"file":"Menu.cjs","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { type FC, type ReactNode, useMemo } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  DropdownMenuItem,\n} from \"@radix-ui/react-dropdown-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerMenu from \"./DrawerMenu.module.css\";\nimport {\n  MenuContext,\n  type MenuData,\n  type MenuItemWrapperProps,\n} from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * CSS classes for the menu.\n   */\n  className?: string;\n\n  /**\n   * The menu title. This can be hidden with `showTitle={false}` in which case it will only\n   * be a label for screen readers.\n   */\n  title: string;\n  /**\n   * Controls whether the title is displayed (see `title` prop). Titles are only displayed on\n   * web: on mobile, this parameter is ignored.\n   */\n  showTitle?: boolean;\n  /**\n   * Whether the menu is open.\n   */\n  open: boolean;\n  /**\n   * Event handler called when the open state of the menu changes. This includes\n   * anything like clicking the trigger, selecting a menu item, or dismissing\n   * the menu with the mouse or keyboard.\n   */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * The button that opens the menu. This must be a component that accepts a ref\n   * and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n  /**\n   * The side of the trigger on which to place the menu. Note that the menu may\n   * still end up on a different side than the one you request if there isn't\n   * enough space.\n   * @default bottom\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /**\n   * The edge along which the menu and trigger will be aligned.\n   * @default center\n   */\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nconst DropdownMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <DropdownMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </DropdownMenuItem>\n);\n\n/**\n * A menu opened by pressing a button.\n */\nexport const Menu: FC<Props> = ({\n  className,\n  title,\n  showTitle = true,\n  open,\n  onOpenChange,\n  trigger,\n  children: childrenProp,\n  side = \"bottom\",\n  align = \"center\",\n}) => {\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  return drawer ? (\n    <Drawer.Root open={open} onOpenChange={onOpenChange}>\n      <Drawer.Trigger asChild>{trigger}</Drawer.Trigger>\n      <Drawer.Portal>\n        <Drawer.Overlay className={classnames(drawerMenu.bg)} />\n        <Drawer.Content asChild>\n          <DrawerMenu title={title}>{children}</DrawerMenu>\n        </Drawer.Content>\n      </Drawer.Portal>\n    </Drawer.Root>\n  ) : (\n    <Root open={open} onOpenChange={onOpenChange}>\n      <Trigger asChild>{trigger}</Trigger>\n      <Portal>\n        <Content asChild side={side} align={align} sideOffset={8}>\n          <FloatingMenu\n            className={className}\n            title={title}\n            showTitle={showTitle}\n          >\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["DropdownMenuItem","platform","getPlatform","useMemo","jsx","MenuContext","jsxs","Drawer","classnames","drawerMenu","DrawerMenu","Root","Trigger","Portal","Content","FloatingMenu"],"mappings":";;;;;;;;;;;;AA6EA,MAAM,0BAAoD,CAAC;AAAA,EACzD;AAAA,EACA;AACF,qCACGA,oCAAA,EAAiB,UAAU,YAAY,QAAW,SAAO,MACvD,UACH;AAMK,MAAM,OAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AACV,MAAM;AAGJ,QAAMC,aAAWC,SAAAA,YAAA;AACjB,QAAM,SAASD,eAAa,aAAaA,eAAa;AACtD,QAAM,UAAoBE,MAAAA;AAAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EAAA;AAEf,QAAM,WACJC,+BAACC,YAAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAA,cAAa;AAGtD,SAAO,SACLC,2BAAAA,KAACC,KAAAA,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA;AAAA,IAAAH,2BAAAA,IAACG,KAAAA,OAAO,SAAP,EAAe,SAAO,MAAE,UAAA,SAAQ;AAAA,IACjCD,2BAAAA,KAACC,KAAAA,OAAO,QAAP,EACC,UAAA;AAAA,MAAAH,+BAACG,KAAAA,OAAO,SAAP,EAAe,WAAWC,WAAWC,kBAAAA,QAAW,EAAE,GAAG;AAAA,MACtDL,2BAAAA,IAACG,KAAAA,OAAO,SAAP,EAAe,SAAO,MACrB,UAAAH,2BAAAA,IAACM,WAAAA,YAAA,EAAW,OAAe,SAAA,CAAS,EAAA,CACtC;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,IAEAJ,2BAAAA,KAACK,kBAAAA,MAAA,EAAK,MAAY,cAChB,UAAA;AAAA,IAAAP,2BAAAA,IAACQ,kBAAAA,SAAA,EAAQ,SAAO,MAAE,UAAA,SAAQ;AAAA,IAC1BR,2BAAAA,IAACS,kBAAAA,UACC,UAAAT,2BAAAA,IAACU,kBAAAA,SAAA,EAAQ,SAAO,MAAC,MAAY,OAAc,YAAY,GACrD,UAAAV,2BAAAA;AAAAA,MAACW,aAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;;"}

package/dist/components/Menu/Menu.d.ts

@@ -1,5 +1,9 @@
 import { FC, ReactNode } from 'react';
 interface Props {
+    /**
+     * CSS classes for the menu.
+     */
+    className?: string;
     /**
      * The menu title. This can be hidden with `showTitle={false}` in which case it will only
      * be a label for screen readers.

package/dist/components/Menu/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAoBhE,UAAU,KAAK;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;;;OAIG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AAWD;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,KAAK,CA+C1B,CAAC"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAoBhE,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;;;OAIG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AAWD;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,KAAK,CAoD1B,CAAC"}

package/dist/components/Menu/Menu.js

@@ -13,6 +13,7 @@ const DropdownMenuItemWrapper = ({
   children
 }) => /* @__PURE__ */ jsx(DropdownMenuItem, { onSelect: onSelect ?? void 0, asChild: true, children });
 const Menu = ({
+  className,
   title,
   showTitle = true,
   open,
@@ -40,7 +41,15 @@ const Menu = ({
     ] })
   ] }) : /* @__PURE__ */ jsxs(Root, { open, onOpenChange, children: [
     /* @__PURE__ */ jsx(Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { asChild: true, side, align, sideOffset: 8, children: /* @__PURE__ */ jsx(FloatingMenu, { title, showTitle, children }) }) })
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { asChild: true, side, align, sideOffset: 8, children: /* @__PURE__ */ jsx(
+      FloatingMenu,
+      {
+        className,
+        title,
+        showTitle,
+        children
+      }
+    ) }) })
   ] });
 };
 export {

package/dist/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { type FC, type ReactNode, useMemo } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  DropdownMenuItem,\n} from \"@radix-ui/react-dropdown-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerMenu from \"./DrawerMenu.module.css\";\nimport {\n  MenuContext,\n  type MenuData,\n  type MenuItemWrapperProps,\n} from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title. This can be hidden with `showTitle={false}` in which case it will only\n   * be a label for screen readers.\n   */\n  title: string;\n  /**\n   * Controls whether the title is displayed (see `title` prop). Titles are only displayed on\n   * web: on mobile, this parameter is ignored.\n   */\n  showTitle?: boolean;\n  /**\n   * Whether the menu is open.\n   */\n  open: boolean;\n  /**\n   * Event handler called when the open state of the menu changes. This includes\n   * anything like clicking the trigger, selecting a menu item, or dismissing\n   * the menu with the mouse or keyboard.\n   */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * The button that opens the menu. This must be a component that accepts a ref\n   * and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n  /**\n   * The side of the trigger on which to place the menu. Note that the menu may\n   * still end up on a different side than the one you request if there isn't\n   * enough space.\n   * @default bottom\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /**\n   * The edge along which the menu and trigger will be aligned.\n   * @default center\n   */\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nconst DropdownMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <DropdownMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </DropdownMenuItem>\n);\n\n/**\n * A menu opened by pressing a button.\n */\nexport const Menu: FC<Props> = ({\n  title,\n  showTitle = true,\n  open,\n  onOpenChange,\n  trigger,\n  children: childrenProp,\n  side = \"bottom\",\n  align = \"center\",\n}) => {\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  return drawer ? (\n    <Drawer.Root open={open} onOpenChange={onOpenChange}>\n      <Drawer.Trigger asChild>{trigger}</Drawer.Trigger>\n      <Drawer.Portal>\n        <Drawer.Overlay className={classnames(drawerMenu.bg)} />\n        <Drawer.Content asChild>\n          <DrawerMenu title={title}>{children}</DrawerMenu>\n        </Drawer.Content>\n      </Drawer.Portal>\n    </Drawer.Root>\n  ) : (\n    <Root open={open} onOpenChange={onOpenChange}>\n      <Trigger asChild>{trigger}</Trigger>\n      <Portal>\n        <Content asChild side={side} align={align} sideOffset={8}>\n          <FloatingMenu title={title} showTitle={showTitle}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;;;;;;;AAwEA,MAAM,0BAAoD,CAAC;AAAA,EACzD;AAAA,EACA;AACF,0BACG,kBAAA,EAAiB,UAAU,YAAY,QAAW,SAAO,MACvD,UACH;AAMK,MAAM,OAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AACV,MAAM;AAGJ,QAAM,WAAW,YAAA;AACjB,QAAM,SAAS,aAAa,aAAa,aAAa;AACtD,QAAM,UAAoB;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EAAA;AAEf,QAAM,WACJ,oBAAC,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAA,cAAa;AAGtD,SAAO,SACL,qBAAC,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA;AAAA,IAAA,oBAAC,OAAO,SAAP,EAAe,SAAO,MAAE,UAAA,SAAQ;AAAA,IACjC,qBAAC,OAAO,QAAP,EACC,UAAA;AAAA,MAAA,oBAAC,OAAO,SAAP,EAAe,WAAWA,WAAW,WAAW,EAAE,GAAG;AAAA,MACtD,oBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,UAAA,oBAAC,YAAA,EAAW,OAAe,SAAA,CAAS,EAAA,CACtC;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,IAEA,qBAAC,MAAA,EAAK,MAAY,cAChB,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,SAAO,MAAE,UAAA,SAAQ;AAAA,wBACzB,QAAA,EACC,UAAA,oBAAC,SAAA,EAAQ,SAAO,MAAC,MAAY,OAAc,YAAY,GACrD,8BAAC,cAAA,EAAa,OAAc,WACzB,UACH,GACF,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { type FC, type ReactNode, useMemo } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  DropdownMenuItem,\n} from \"@radix-ui/react-dropdown-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerMenu from \"./DrawerMenu.module.css\";\nimport {\n  MenuContext,\n  type MenuData,\n  type MenuItemWrapperProps,\n} from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * CSS classes for the menu.\n   */\n  className?: string;\n\n  /**\n   * The menu title. This can be hidden with `showTitle={false}` in which case it will only\n   * be a label for screen readers.\n   */\n  title: string;\n  /**\n   * Controls whether the title is displayed (see `title` prop). Titles are only displayed on\n   * web: on mobile, this parameter is ignored.\n   */\n  showTitle?: boolean;\n  /**\n   * Whether the menu is open.\n   */\n  open: boolean;\n  /**\n   * Event handler called when the open state of the menu changes. This includes\n   * anything like clicking the trigger, selecting a menu item, or dismissing\n   * the menu with the mouse or keyboard.\n   */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * The button that opens the menu. This must be a component that accepts a ref\n   * and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n  /**\n   * The side of the trigger on which to place the menu. Note that the menu may\n   * still end up on a different side than the one you request if there isn't\n   * enough space.\n   * @default bottom\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /**\n   * The edge along which the menu and trigger will be aligned.\n   * @default center\n   */\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nconst DropdownMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <DropdownMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </DropdownMenuItem>\n);\n\n/**\n * A menu opened by pressing a button.\n */\nexport const Menu: FC<Props> = ({\n  className,\n  title,\n  showTitle = true,\n  open,\n  onOpenChange,\n  trigger,\n  children: childrenProp,\n  side = \"bottom\",\n  align = \"center\",\n}) => {\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  return drawer ? (\n    <Drawer.Root open={open} onOpenChange={onOpenChange}>\n      <Drawer.Trigger asChild>{trigger}</Drawer.Trigger>\n      <Drawer.Portal>\n        <Drawer.Overlay className={classnames(drawerMenu.bg)} />\n        <Drawer.Content asChild>\n          <DrawerMenu title={title}>{children}</DrawerMenu>\n        </Drawer.Content>\n      </Drawer.Portal>\n    </Drawer.Root>\n  ) : (\n    <Root open={open} onOpenChange={onOpenChange}>\n      <Trigger asChild>{trigger}</Trigger>\n      <Portal>\n        <Content asChild side={side} align={align} sideOffset={8}>\n          <FloatingMenu\n            className={className}\n            title={title}\n            showTitle={showTitle}\n          >\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;;;;;;;AA6EA,MAAM,0BAAoD,CAAC;AAAA,EACzD;AAAA,EACA;AACF,0BACG,kBAAA,EAAiB,UAAU,YAAY,QAAW,SAAO,MACvD,UACH;AAMK,MAAM,OAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AACV,MAAM;AAGJ,QAAM,WAAW,YAAA;AACjB,QAAM,SAAS,aAAa,aAAa,aAAa;AACtD,QAAM,UAAoB;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EAAA;AAEf,QAAM,WACJ,oBAAC,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAA,cAAa;AAGtD,SAAO,SACL,qBAAC,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA;AAAA,IAAA,oBAAC,OAAO,SAAP,EAAe,SAAO,MAAE,UAAA,SAAQ;AAAA,IACjC,qBAAC,OAAO,QAAP,EACC,UAAA;AAAA,MAAA,oBAAC,OAAO,SAAP,EAAe,WAAWA,WAAW,WAAW,EAAE,GAAG;AAAA,MACtD,oBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,UAAA,oBAAC,YAAA,EAAW,OAAe,SAAA,CAAS,EAAA,CACtC;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,IAEA,qBAAC,MAAA,EAAK,MAAY,cAChB,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,SAAO,MAAE,UAAA,SAAQ;AAAA,IAC1B,oBAAC,UACC,UAAA,oBAAC,SAAA,EAAQ,SAAO,MAAC,MAAY,OAAc,YAAY,GACrD,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/ReleaseAnnouncement/ReleaseAnnouncementContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReleaseAnnouncementContext.d.ts","sourceRoot":"","sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncementContext.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,GAAG,IAAI,CAAC;AACpE;;GAEG;AACH,eAAO,MAAM,0BAA0B,sCAAmC,CAAC;AAE3E;;GAEG;AACH,wBAAgB,6BAA6B;;;;;;;;;iCAWuinC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EADxwnC"}
+{"version":3,"file":"ReleaseAnnouncementContext.d.ts","sourceRoot":"","sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncementContext.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,GAAG,IAAI,CAAC;AACpE;;GAEG;AACH,eAAO,MAAM,0BAA0B,sCAAmC,CAAC;AAE3E;;GAEG;AACH,wBAAgB,6BAA6B;;;;;;;;;iCAW0qnC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAD34nC"}

package/dist/components/ReleaseAnnouncement/useReleaseAnnouncement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReleaseAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/ReleaseAnnouncement/useReleaseAnnouncement.tsx"],"names":[],"mappings":"AAOA,OAAO,EAKL,KAAK,SAAS,EAMf,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAEhE,UAAU,2BAA2B;IACnC;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC9C;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,MAAM,EACN,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,YAAY,GACb,EAAE,2BAA2B;;;;;;;;;iCA0D08jC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAD5pkC"}
+{"version":3,"file":"useReleaseAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/ReleaseAnnouncement/useReleaseAnnouncement.tsx"],"names":[],"mappings":"AAOA,OAAO,EAKL,KAAK,SAAS,EAMf,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAEhE,UAAU,2BAA2B;IACnC;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC9C;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,MAAM,EACN,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,YAAY,GACb,EAAE,2BAA2B;;;;;;;;;iCA0D6kkC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAD/xkC"}

package/dist/components/ReleaseAnnouncement/useReleaseAnnouncement.js

@@ -1,4 +1,4 @@
-import { useId, useFloating, offset, shift, arrow, autoUpdate, limitShift, useRole, useInteractions } from "@floating-ui/react";
+import { useId, useFloating, autoUpdate, offset, shift, limitShift, arrow, useRole, useInteractions } from "@floating-ui/react";
 import { useRef, useMemo } from "react";
 function useReleaseAnnouncement({
   open,

package/dist/components/Tooltip/TooltipContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContext.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipContext.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;AACxD;;GAEG;AACH,eAAO,MAAM,cAAc,sCAAmC,CAAC;AAE/D;;GAEG;AACH,wBAAgB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAS4qnC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;;;;;;;;;EADj4nC"}
+{"version":3,"file":"TooltipContext.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipContext.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;AACxD;;GAEG;AACH,eAAO,MAAM,cAAc,sCAAmC,CAAC;AAE/D;;GAEG;AACH,wBAAgB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAS+ynC,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;;;;;;;;;EADpgoC"}

package/dist/components/Tooltip/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/useTooltip.ts"],"names":[],"mappings":"AAOA,OAAO,EAKL,KAAK,gBAAgB,EACrB,KAAK,SAAS,EAUf,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAIL,KAAK,GAAG,EACR,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,qBAAqB;IACpC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,IAAI,EAAE,OAAO,EACb,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,EACzB,MAAM,CAAC,EAAE,gBAAgB,GAAG,SAAS,KAClC,IAAI,CAAC;IACV;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;OAOG;IACH,oBAAoB,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,aAAa,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,KAAK,eAAe,GAAG,qBAAqB,GAC1C,CAAC,YAAY,GAAG,kBAAkB,CAAC,CAAC;AAEtC,wBAAgB,UAAU,CAAC,EACzB,IAAI,EAAE,cAAc,EACpB,QAAgB,EAChB,YAAY,EACZ,SAAoB,EACpB,oBAAoB,EACpB,OAAO,EACP,aAAa,EAAE,UAAU,EACzB,WAAW,EAAE,QAAQ,EACrB,GAAG,KAAK,EACT,EAAE,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAyJ+h7B,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;;aAxB5s7B,OAAO,GAAG,aAAa;;oBAvHvC,OAAO,UACL,KAAK,GAAG,SAAS,WAChB,gBAAgB,GAAG,SAAS;;;;;EA4IxC"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/useTooltip.ts"],"names":[],"mappings":"AAOA,OAAO,EAKL,KAAK,gBAAgB,EACrB,KAAK,SAAS,EAUf,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAIL,KAAK,GAAG,EACR,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,qBAAqB;IACpC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,IAAI,EAAE,OAAO,EACb,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,EACzB,MAAM,CAAC,EAAE,gBAAgB,GAAG,SAAS,KAClC,IAAI,CAAC;IACV;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;OAOG;IACH,oBAAoB,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,aAAa,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,KAAK,eAAe,GAAG,qBAAqB,GAC1C,CAAC,YAAY,GAAG,kBAAkB,CAAC,CAAC;AAEtC,wBAAgB,UAAU,CAAC,EACzB,IAAI,EAAE,cAAc,EACpB,QAAgB,EAChB,YAAY,EACZ,SAAoB,EACpB,oBAAoB,EACpB,OAAO,EACP,aAAa,EAAE,UAAU,EACzB,WAAW,EAAE,QAAQ,EACrB,GAAG,KAAK,EACT,EAAE,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAyJkq7B,CAAC;gCAAyF,CAAC;4BAAyF,CAAC;;;;;;;aAxB/07B,OAAO,GAAG,aAAa;;oBAvHvC,OAAO,UACL,KAAK,GAAG,SAAS,WAChB,gBAAgB,GAAG,SAAS;;;;;EA4IxC"}

package/dist/components/Tooltip/useTooltip.js

@@ -1,4 +1,4 @@
-import { useId, useFloating, offset, flip, shift, arrow, autoUpdate, useDelayGroup, useHover, useFocus, useDismiss, useRole, useInteractions } from "@floating-ui/react";
+import { useId, useFloating, autoUpdate, offset, flip, shift, arrow, useDelayGroup, useHover, useFocus, useDismiss, useRole, useInteractions } from "@floating-ui/react";
 import { useRef, useState, useEffect, useMemo } from "react";
 import { hoverDelay } from "./TooltipProvider.js";
 function useTooltip({

package/dist/index.cjs

@@ -5,7 +5,7 @@ const Avatar = require("./components/Avatar/Avatar.cjs");
 const AvatarStack = require("./components/Avatar/AvatarStack.cjs");
 const Badge = require("./components/Badge/Badge.cjs");
 const Body = require("./components/Typography/Body.cjs");
-const Text = require("./components/Typography/Text.cjs");
+const Text$1 = require("./components/Typography/Text.cjs");
 const ContextMenu = require("./components/Menu/ContextMenu.cjs");
 const Glass = require("./components/Glass/Glass.cjs");
 const Heading = require("./components/Typography/Heading.cjs");
@@ -27,43 +27,43 @@ const index = require("./components/Form/index.cjs");
 const useIdColorHash = require("./components/Avatar/useIdColorHash.cjs");
 const string = require("./utils/string.cjs");
 ;/* empty css                    */
-const Button = require("./components/Button/Button.cjs");
-const IconButton = require("./components/Button/IconButton/IconButton.cjs");
+const Action = require("./components/Form/Controls/Action/Action.cjs");
 const BigIcon = require("./components/Icon/BigIcon/BigIcon.cjs");
-const NavBar = require("./components/Nav/NavBar.cjs");
-const NavItem = require("./components/Nav/NavItem.cjs");
-const ReleaseAnnouncement = require("./components/ReleaseAnnouncement/ReleaseAnnouncement.cjs");
-const Dropdown = require("./components/Dropdown/Dropdown.cjs");
-const InlineSpinner = require("./components/InlineSpinner/InlineSpinner.cjs");
 const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
-const VisualList = require("./components/VisualList/VisualList.cjs");
-const VisualListItem = require("./components/VisualList/VisualListItem.cjs");
+const Button = require("./components/Button/Button.cjs");
 const ChatFilter = require("./components/ChatFilter/ChatFilter.cjs");
-const UnreadCounter = require("./components/ActivityMarker/UnreadCounter.cjs");
-const Pill = require("./components/ActivityMarker/Pill.cjs");
-const Unread = require("./components/ActivityMarker/Unread.cjs");
-const Text$1 = require("./components/Form/Controls/Text/Text.cjs");
-const Action = require("./components/Form/Controls/Action/Action.cjs");
-const Password = require("./components/Form/Controls/Password/Password.cjs");
-const MFA = require("./components/Form/Controls/MFA/MFA.cjs");
 const Checkbox = require("./components/Form/Controls/Checkbox/Checkbox.cjs");
-const Radio = require("./components/Form/Controls/Radio/Radio.cjs");
-const Toggle = require("./components/Form/Controls/Toggle/Toggle.cjs");
-const Root = require("./components/Form/Root.cjs");
-const Submit = require("./components/Form/Submit.cjs");
-const reactForm = require("@radix-ui/react-form");
+const Text = require("./components/Form/Controls/Text/Text.cjs");
+const Dropdown = require("./components/Dropdown/Dropdown.cjs");
+const EditInPlace = require("./components/Form/Controls/EditInPlace/EditInPlace.cjs");
 const Message = require("./components/Form/Message.cjs");
 const Field = require("./components/Form/Field.cjs");
+const IconButton = require("./components/Button/IconButton/IconButton.cjs");
 const InlineField = require("./components/Form/InlineField.cjs");
+const InlineSpinner = require("./components/InlineSpinner/InlineSpinner.cjs");
 const Label = require("./components/Form/Label.cjs");
-const EditInPlace = require("./components/Form/Controls/EditInPlace/EditInPlace.cjs");
+const MFA = require("./components/Form/Controls/MFA/MFA.cjs");
+const reactForm = require("@radix-ui/react-form");
+const NavBar = require("./components/Nav/NavBar.cjs");
+const NavItem = require("./components/Nav/NavItem.cjs");
+const Password = require("./components/Form/Controls/Password/Password.cjs");
+const Pill = require("./components/ActivityMarker/Pill.cjs");
+const Radio = require("./components/Form/Controls/Radio/Radio.cjs");
+const ReleaseAnnouncement = require("./components/ReleaseAnnouncement/ReleaseAnnouncement.cjs");
+const Root = require("./components/Form/Root.cjs");
 const SettingsToggle = require("./components/Form/Controls/SettingsToggle/SettingsToggle.cjs");
+const Submit = require("./components/Form/Submit.cjs");
+const Toggle = require("./components/Form/Controls/Toggle/Toggle.cjs");
+const Unread = require("./components/ActivityMarker/Unread.cjs");
+const UnreadCounter = require("./components/ActivityMarker/UnreadCounter.cjs");
+const VisualList = require("./components/VisualList/VisualList.cjs");
+const VisualListItem = require("./components/VisualList/VisualListItem.cjs");
 exports.Alert = Alert.Alert;
 exports.Avatar = Avatar.Avatar;
 exports.AvatarStack = AvatarStack.AvatarStack;
 exports.Badge = Badge.Badge;
 exports.Body = Body.Body;
-exports.Text = Text.Text;
+exports.Text = Text$1.Text;
 exports.ContextMenu = ContextMenu.ContextMenu;
 exports.Glass = Glass.Glass;
 exports.H1 = Heading.H1;
@@ -90,41 +90,29 @@ exports.Toast = Toast.Toast;
 exports.Form = index;
 exports.useIdColorHash = useIdColorHash.useIdColorHash;
 exports.getInitialLetter = string.getInitialLetter;
-exports.Button = Button.Button;
-exports.IconButton = IconButton.IconButton;
+exports.ActionControl = Action.ActionControl;
+exports.ActionInput = Action.ActionInput;
 exports.BigIcon = BigIcon.BigIcon;
-exports.NavBar = NavBar.NavBar;
-exports.NavItem = NavItem.NavItem;
-exports.ReleaseAnnouncement = ReleaseAnnouncement.ReleaseAnnouncement;
-exports.Dropdown = Dropdown.Dropdown;
-exports.InlineSpinner = InlineSpinner.InlineSpinner;
 exports.Breadcrumb = Breadcrumb.Breadcrumb;
-exports.VisualList = VisualList.VisualList;
-exports.VisualListItem = VisualListItem.VisualListItem;
+exports.Button = Button.Button;
 exports.ChatFilter = ChatFilter.ChatFilter;
-exports.UnreadCounter = UnreadCounter.UnreadCounter;
-exports.Pill = Pill.Pill;
-exports.Unread = Unread.Unread;
-exports.Control = Text$1.TextControl;
-exports.TextControl = Text$1.TextControl;
-exports.TextInput = Text$1.TextInput;
-exports.ActionControl = Action.ActionControl;
-exports.ActionInput = Action.ActionInput;
-exports.PasswordControl = Password.PasswordControl;
-exports.PasswordInput = Password.PasswordInput;
-exports.MFAControl = MFA.MFAControl;
-exports.MFAInput = MFA.MFAInput;
 exports.Checkbox = Checkbox.CheckboxInput;
 exports.CheckboxControl = Checkbox.CheckboxControl;
 exports.CheckboxInput = Checkbox.CheckboxInput;
-exports.Radio = Radio.RadioInput;
-exports.RadioControl = Radio.RadioControl;
-exports.RadioInput = Radio.RadioInput;
-exports.Toggle = Toggle.ToggleInput;
-exports.ToggleControl = Toggle.ToggleControl;
-exports.ToggleInput = Toggle.ToggleInput;
-exports.Root = Root.Root;
-exports.Submit = Submit.Submit;
+exports.Control = Text.TextControl;
+exports.TextControl = Text.TextControl;
+exports.TextInput = Text.TextInput;
+exports.Dropdown = Dropdown.Dropdown;
+exports.EditInPlace = EditInPlace.EditInPlace;
+exports.ErrorMessage = Message.ErrorMessage;
+exports.HelpMessage = Message.HelpMessage;
+exports.Field = Field.Field;
+exports.IconButton = IconButton.IconButton;
+exports.InlineField = InlineField.InlineField;
+exports.InlineSpinner = InlineSpinner.InlineSpinner;
+exports.Label = Label.Label;
+exports.MFAControl = MFA.MFAControl;
+exports.MFAInput = MFA.MFAInput;
 Object.defineProperty(exports, "Message", {
   enumerable: true,
   get: () => reactForm.Message
@@ -133,12 +121,24 @@ Object.defineProperty(exports, "ValidityState", {
   enumerable: true,
   get: () => reactForm.ValidityState
 });
-exports.ErrorMessage = Message.ErrorMessage;
-exports.HelpMessage = Message.HelpMessage;
-exports.Field = Field.Field;
-exports.InlineField = InlineField.InlineField;
-exports.Label = Label.Label;
-exports.EditInPlace = EditInPlace.EditInPlace;
+exports.NavBar = NavBar.NavBar;
+exports.NavItem = NavItem.NavItem;
+exports.PasswordControl = Password.PasswordControl;
+exports.PasswordInput = Password.PasswordInput;
+exports.Pill = Pill.Pill;
+exports.Radio = Radio.RadioInput;
+exports.RadioControl = Radio.RadioControl;
+exports.RadioInput = Radio.RadioInput;
+exports.ReleaseAnnouncement = ReleaseAnnouncement.ReleaseAnnouncement;
+exports.Root = Root.Root;
 exports.SettingsToggleControl = SettingsToggle.SettingsToggleControl;
 exports.SettingsToggleInput = SettingsToggle.SettingsToggleInput;
+exports.Submit = Submit.Submit;
+exports.Toggle = Toggle.ToggleInput;
+exports.ToggleControl = Toggle.ToggleControl;
+exports.ToggleInput = Toggle.ToggleInput;
+exports.Unread = Unread.Unread;
+exports.UnreadCounter = UnreadCounter.UnreadCounter;
+exports.VisualList = VisualList.VisualList;
+exports.VisualListItem = VisualListItem.VisualListItem;
 //# sourceMappingURL=index.cjs.map