@protonradio/proton-ui 0.11.16 → 0.11.18-beta.1

package/dist/components/Input/BaseInput/Input.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.es.js","sources":["../../../../src/components/Input/BaseInput/Input.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { forwardRef, useEffect, useRef } from \"react\";\n\nimport { useTheme } from \"../../ThemeProvider\";\nimport { csx } from \"../../../utils\";\nimport \"./Input.css\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\n\nexport interface BaseInputProps {\n  /**\n   * onChange handler for the input\n   */\n  onChange?: (value: string) => void;\n\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n\n  /** Description text shown above the input. */\n  description?: React.ReactNode | string;\n\n  /**\n   * The position of the description text.\n   * @default \"top\"\n   */\n  descriptionPosition?: \"top\" | \"bottom\";\n\n  /** Error state that changes the input's visual style and displays an error message. */\n  error?: React.ReactNode | string;\n\n  /**\n   * Label for the input element.\n   * @note When a label is provided, the input will have extra padding, and the label will float above the text input when focused or filled.\n   */\n  label?: string;\n\n  /** Test ID for the component. */\n  \"data-testid\"?: string;\n\n  /** Content to display before the input. Typically used for icons. */\n  prefix?: React.ReactNode;\n\n  /** Content to display after the input. Typically used for icons. */\n  suffix?: React.ReactNode;\n\n  /**\n   * Should the browser's autocomplete be enabled?\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n   */\n  autoComplete?: boolean;\n\n  /**\n   * Should the input be autofocused?\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autofocus\n   */\n  autoFocus?: boolean;\n\n  /**\n   * The name attribute of the input element.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name\n   */\n  name: string;\n\n  /**\n   * The placeholder text to display when the input is empty.\n   * @note label takes precedence over placeholder, if both are provided.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder\n   */\n  placeholder?: string;\n\n  /**\n   * The type attribute of the input element.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/type\n   * @default \"text\"\n   */\n  type?: string;\n\n  /**\n   * The value of the input.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value\n   */\n  value?: string;\n\n  /**\n   * Whether the input is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /**\n   * Whether the input is read-only.\n   * @default false\n   */\n  isReadOnly?: boolean;\n\n  /**\n   * Called when the input is submitted (e.g. by pressing Enter).\n   */\n  onSubmit?: React.FormEventHandler<HTMLInputElement>;\n\n  /**\n   * Called when the input is cleared (e.g. by pressing Escape).\n   */\n  onClear?: () => void;\n}\n\n/**\n * A controlled and customizable input component with support for labels, prefixes, suffixes, and error states.\n *\n * API:\n *  - {@link BaseInputProps}\n */\nexport const Input = forwardRef<HTMLInputElement, BaseInputProps>(\n  (\n    {\n      prefix,\n      suffix,\n      description,\n      descriptionPosition = \"top\",\n      isDisabled,\n      error,\n      onChange,\n      label,\n      name,\n      placeholder,\n      type = \"text\",\n      value,\n      autoFocus,\n      autoComplete,\n      isRequired = false,\n      isReadOnly = false,\n      onSubmit,\n      onClear,\n      \"data-testid\": testId,\n    },\n    forwardedRef: React.RefObject<HTMLInputElement>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const prefixRef = useRef<HTMLDivElement>(null);\n    const suffixRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { className } = useTheme();\n    const ref = forwardedRef || inputRef;\n\n    // Control dynamic prefix and suffix widths using ResizeObserver\n    useEffect(() => {\n      if (!containerRef.current) return;\n\n      const updateSizes = () => {\n        if (containerRef.current) {\n          const containerWidth = containerRef.current.offsetWidth || 200;\n          containerRef.current.style.setProperty(\n            \"--container-width\",\n            `${containerWidth}px`\n          );\n        }\n\n        if (prefixRef.current) {\n          const prefixWidth = prefixRef.current.offsetWidth || 32;\n          containerRef.current?.style.setProperty(\n            \"--prefix-width\",\n            `${prefixWidth}px`\n          );\n        }\n\n        if (suffixRef.current) {\n          const suffixWidth = suffixRef.current.offsetWidth || 32;\n          containerRef.current?.style.setProperty(\n            \"--suffix-width\",\n            `${suffixWidth}px`\n          );\n        }\n      };\n\n      updateSizes();\n\n      const resizeObserver = new ResizeObserver(updateSizes);\n\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n      if (prefixRef.current) {\n        resizeObserver.observe(prefixRef.current);\n      }\n      if (suffixRef.current) {\n        resizeObserver.observe(suffixRef.current);\n      }\n\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [prefix, suffix]);\n\n    const inputId = `${name}-input`;\n    const errorId = `${name}-error`;\n    const descriptionId = `${name}-description`;\n\n    return (\n      <div ref={containerRef}>\n        {description && descriptionPosition === \"top\" && (\n          <div\n            id={descriptionId}\n            className=\"proton-Input__text\"\n            aria-live=\"polite\"\n          >\n            {description}\n          </div>\n        )}\n        <div className={csx(\n          \"proton-Input__container-inner\",\n          prefix && \"proton-Input__has-prefix\",\n          suffix && \"proton-Input__has-suffix\"\n        )}>\n          {prefix && (\n            <div\n              ref={prefixRef}\n              className={csx(\n                \"proton-Input__descriptor\",\n                \"proton-Input__prefix\"\n              )}\n            >\n              {prefix}\n            </div>\n          )}\n\n          <input\n            id={inputId}\n            name={name}\n            type={type}\n            value={value}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n              onChange?.(e.target.value);\n            }}\n            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n              switch (e.key) {\n                case \"Enter\":\n                  if (onSubmit) {\n                    e.preventDefault();\n                    onSubmit(e);\n                  }\n                  break;\n                case \"Escape\":\n                  if (onClear) {\n                    e.preventDefault();\n                    onClear();\n                  }\n                  break;\n              }\n            }}\n            onCopy={async () =>\n              await copyTextToClipboard(inputRef.current?.value)\n            }\n            disabled={isDisabled}\n            readOnly={isReadOnly}\n            required={isRequired}\n            autoFocus={autoFocus}\n            autoComplete={autoComplete ? \"on\" : \"off\"}\n            placeholder={label ? undefined : placeholder}\n            aria-label={label || name}\n            aria-invalid={Boolean(error)}\n            aria-errormessage={typeof error === \"string\" ? error : errorId}\n            aria-required={isRequired}\n            aria-readonly={isReadOnly}\n            aria-describedby={\n              error ? errorId : description ? descriptionId : undefined\n            }\n            aria-disabled={isDisabled}\n            data-testid={testId}\n            ref={ref}\n            className={csx(\n              \"proton-Input\",\n              error && \"proton-Input--error\",\n              label && \"proton-Input__label-top\",\n              className\n            )}\n          />\n\n          <label\n            htmlFor={inputId}\n            className={csx(\n              \"proton-Input__label\",\n              value && \"proton-Input__label--filled\"\n            )}\n          >\n            {label}\n            {isRequired && <span aria-hidden=\"true\"> *</span>}\n          </label>\n\n          {suffix && (\n            <div\n              ref={suffixRef}\n              className={csx(\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\"\n              )}\n            >\n              {suffix}\n            </div>\n          )}\n        </div>\n\n        {error ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-Input__error\", \"proton-Input__text\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : description && descriptionPosition === \"bottom\" ? (\n          <div\n            id={descriptionId}\n            className=\"proton-Input__text\"\n            aria-live=\"polite\"\n          >\n            {description}\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n);\n\nInput.displayName = \"ProtonUIInput\";\n"],"names":["Input","forwardRef","prefix","suffix","description","descriptionPosition","isDisabled","error","onChange","label","name","placeholder","type","value","autoFocus","autoComplete","isRequired","isReadOnly","onSubmit","onClear","testId","forwardedRef","inputRef","useRef","prefixRef","suffixRef","containerRef","className","useTheme","ref","useEffect","updateSizes","containerWidth","prefixWidth","_a","suffixWidth","_b","resizeObserver","inputId","errorId","descriptionId","jsxs","jsx","csx","e","copyTextToClipboard"],"mappings":"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"}
+{"version":3,"file":"Input.es.js","sources":["../../../../src/components/Input/BaseInput/Input.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { forwardRef, useEffect, useRef } from \"react\";\n\nimport { useTheme } from \"../../ThemeProvider\";\nimport { csx } from \"../../../utils\";\nimport \"./Input.css\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\n\nexport interface BaseInputProps {\n  /**\n   * onChange handler for the input\n   */\n  onChange?: (value: string) => void;\n\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n\n  /** Description text shown above the input. */\n  description?: React.ReactNode | string;\n\n  /**\n   * The position of the description text.\n   * @default \"top\"\n   */\n  descriptionPosition?: \"top\" | \"bottom\";\n\n  /** Error state that changes the input's visual style and displays an error message. */\n  error?: React.ReactNode | string;\n\n  /**\n   * Label for the input element.\n   * @note When a label is provided, the input will have extra padding, and the label will float above the text input when focused or filled.\n   */\n  label?: string;\n\n  /** Test ID for the component. */\n  \"data-testid\"?: string;\n\n  /** Content to display before the input. Typically used for icons. */\n  prefix?: React.ReactNode;\n\n  /** Content to display after the input. Typically used for icons. */\n  suffix?: React.ReactNode;\n\n  /**\n   * Should the browser's autocomplete be enabled?\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n   */\n  autoComplete?: boolean;\n\n  /**\n   * Should the input be autofocused?\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autofocus\n   */\n  autoFocus?: boolean;\n\n  /**\n   * The name attribute of the input element.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name\n   */\n  name: string;\n\n  /**\n   * The placeholder text to display when the input is empty.\n   * @note label takes precedence over placeholder, if both are provided.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder\n   */\n  placeholder?: string;\n\n  /**\n   * The type attribute of the input element.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/type\n   * @default \"text\"\n   */\n  type?: string;\n\n  /**\n   * The value of the input.\n   * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value\n   */\n  value?: string;\n\n  /**\n   * Whether the input is required.\n   * @default false\n   */\n  isRequired?: boolean;\n\n  /**\n   * Whether the input is read-only.\n   * @default false\n   */\n  isReadOnly?: boolean;\n\n  /**\n   * Called when the input is submitted (e.g. by pressing Enter).\n   */\n  onSubmit?: React.FormEventHandler<HTMLInputElement>;\n\n  /**\n   * Called when the input is cleared (e.g. by pressing Escape).\n   */\n  onClear?: () => void;\n}\n\n/**\n * A controlled and customizable input component with support for labels, prefixes, suffixes, and error states.\n *\n * API:\n *  - {@link BaseInputProps}\n */\nexport const Input = forwardRef<HTMLInputElement, BaseInputProps>(\n  (\n    {\n      prefix,\n      suffix,\n      description,\n      descriptionPosition = \"top\",\n      isDisabled,\n      error,\n      onChange,\n      label,\n      name,\n      placeholder,\n      type = \"text\",\n      value,\n      autoFocus,\n      autoComplete,\n      isRequired = false,\n      isReadOnly = false,\n      onSubmit,\n      onClear,\n      \"data-testid\": testId,\n    },\n    forwardedRef: React.RefObject<HTMLInputElement>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const prefixRef = useRef<HTMLDivElement>(null);\n    const suffixRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { className } = useTheme();\n    const ref = forwardedRef || inputRef;\n\n    // Control dynamic prefix and suffix widths using ResizeObserver\n    useEffect(() => {\n      if (!containerRef.current) return;\n\n      const updateSizes = () => {\n        if (containerRef.current) {\n          const containerWidth = containerRef.current.offsetWidth || 200;\n          containerRef.current.style.setProperty(\n            \"--container-width\",\n            `${containerWidth}px`\n          );\n        }\n\n        if (prefixRef.current) {\n          const prefixWidth = prefixRef.current.offsetWidth || 32;\n          containerRef.current?.style.setProperty(\n            \"--prefix-width\",\n            `${prefixWidth}px`\n          );\n        }\n\n        if (suffixRef.current) {\n          const suffixWidth = suffixRef.current.offsetWidth || 32;\n          containerRef.current?.style.setProperty(\n            \"--suffix-width\",\n            `${suffixWidth}px`\n          );\n        }\n      };\n\n      updateSizes();\n\n      const resizeObserver = new ResizeObserver(updateSizes);\n\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n      if (prefixRef.current) {\n        resizeObserver.observe(prefixRef.current);\n      }\n      if (suffixRef.current) {\n        resizeObserver.observe(suffixRef.current);\n      }\n\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [prefix, suffix]);\n\n    const inputId = `${name}-input`;\n    const errorId = `${name}-error`;\n    const descriptionId = `${name}-description`;\n\n    return (\n      <div ref={containerRef}>\n        {description && descriptionPosition === \"top\" && (\n          <div\n            id={descriptionId}\n            className=\"proton-Input__text\"\n            aria-live=\"polite\"\n          >\n            {description}\n          </div>\n        )}\n        <div className={csx(\n          \"proton-Input__container-inner\",\n          prefix && \"proton-Input__has-prefix\",\n          suffix && \"proton-Input__has-suffix\"\n        )}>\n          {prefix && (\n            <div\n              ref={prefixRef}\n              className={csx(\n                \"proton-Input__descriptor\",\n                \"proton-Input__prefix\"\n              )}\n            >\n              {prefix}\n            </div>\n          )}\n\n          <input\n            id={inputId}\n            name={name}\n            type={type}\n            value={value}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n              onChange?.(e.target.value);\n            }}\n            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n              switch (e.key) {\n                case \"Enter\":\n                  if (onSubmit) {\n                    e.preventDefault();\n                    onSubmit(e);\n                  }\n                  break;\n                case \"Escape\":\n                  if (onClear) {\n                    e.preventDefault();\n                    onClear();\n                  }\n                  break;\n              }\n            }}\n            onCopy={async () =>\n              await copyTextToClipboard(inputRef.current?.value)\n            }\n            disabled={isDisabled}\n            readOnly={isReadOnly}\n            required={isRequired}\n            autoFocus={autoFocus}\n            autoComplete={autoComplete ? \"on\" : \"off\"}\n            placeholder={label ? undefined : placeholder}\n            aria-label={label || name}\n            aria-invalid={Boolean(error)}\n            aria-errormessage={typeof error === \"string\" ? error : errorId}\n            aria-required={isRequired}\n            aria-readonly={isReadOnly}\n            aria-describedby={\n              error ? errorId : description ? descriptionId : undefined\n            }\n            aria-disabled={isDisabled}\n            data-testid={testId}\n            ref={ref}\n            className={csx(\n              \"proton-Input\",\n              error && \"proton-Input--error\",\n              label && \"proton-Input__label-top\",\n              className\n            )}\n          />\n\n          <label\n            htmlFor={inputId}\n            className={csx(\n              \"proton-Input__label\",\n              value && \"proton-Input__label--filled\"\n            )}\n          >\n            {label}\n            {isRequired && <span aria-hidden=\"true\"> *</span>}\n          </label>\n\n          {suffix && (\n            <div\n              ref={suffixRef}\n              className={csx(\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\"\n              )}\n            >\n              {suffix}\n            </div>\n          )}\n        </div>\n\n        {error ? (\n          <div\n            role=\"alert\"\n            className={csx(\"proton-Input__error\", \"proton-Input__text\")}\n            id={errorId}\n          >\n            {error}\n          </div>\n        ) : description && descriptionPosition === \"bottom\" ? (\n          <div\n            id={descriptionId}\n            className=\"proton-Input__text\"\n            aria-live=\"polite\"\n          >\n            {description}\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n);\n\nInput.displayName = \"ProtonUIInput\";\n"],"names":["Input","forwardRef","prefix","suffix","description","descriptionPosition","isDisabled","error","onChange","label","name","placeholder","type","value","autoFocus","autoComplete","isRequired","isReadOnly","onSubmit","onClear","testId","forwardedRef","inputRef","useRef","prefixRef","suffixRef","containerRef","className","useTheme","ref","useEffect","updateSizes","containerWidth","prefixWidth","_a","suffixWidth","_b","resizeObserver","inputId","errorId","descriptionId","jsxs","jsx","csx","e","copyTextToClipboard"],"mappings":"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"}

package/dist/components/Input/CopyInput/CopyInput.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../node_modules/react/jsx-runtime.cjs.js"),x=require("react"),a=require("../../../utils/copy.cjs.js"),c=require("../BaseInput/Input.cjs.js");;/* empty css                   */const r=require("../../../utils/string.cjs.js");function l({name:o,value:e,isDisabled:p,onError:u,onSuccess:n}){const[i,s]=x.useState(!1);return t.jsxRuntimeExports.jsx(c.Input,{name:o,value:e,isDisabled:p,suffix:t.jsxRuntimeExports.jsx(j,{isCopied:i,onClick:async()=>{await a.copyTextToClipboard(e,u)&&(s(!0),n==null||n(),setTimeout(()=>s(!1),5e3))}})})}const j=({isCopied:o,onClick:e})=>t.jsxRuntimeExports.jsx("div",{className:"proton-CopyInput-button-container",onClick:e,children:t.jsxRuntimeExports.jsxs("button",{"data-testid":"COPY_BUTTON",className:r.csx("proton-CopyInput-button",o&&"proton-CopyInput-button--copied"),children:[t.jsxRuntimeExports.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 512 512",children:[t.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"M408 480H184a72 72 0 0 1-72-72V184a72 72 0 0 1 72-72h224a72 72 0 0 1 72 72v224a72 72 0 0 1-72 72"}),t.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"M160 80h235.88A72.12 72.12 0 0 0 328 32H104a72 72 0 0 0-72 72v224a72.12 72.12 0 0 0 48 67.88V160a80 80 0 0 1 80-80"})]}),t.jsxRuntimeExports.jsx("span",{className:r.csx("proton-CopyInput-button-text",o&&"proton-CopyInput-button-text--copied"),children:o?"Copied!":"Copy"})]})});exports.CopyInput=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../node_modules/react/jsx-runtime.cjs.js"),x=require("react"),c=require("../../../utils/copy.cjs.js"),a=require("../BaseInput/Input.cjs.js");;/* empty css                   */const r=require("../../../utils/string.cjs.js");function l({name:o,value:e,isDisabled:p,onError:i,onSuccess:n}){const[u,s]=x.useState(!1);return t.jsxRuntimeExports.jsx(a.Input,{name:o,value:e,isDisabled:p,suffix:t.jsxRuntimeExports.jsx(j,{isCopied:u,onClick:async()=>{console.log("copy button clicked",{value:e}),await c.copyTextToClipboard(e,i)&&(s(!0),n==null||n(),setTimeout(()=>s(!1),5e3))}})})}const j=({isCopied:o,onClick:e})=>t.jsxRuntimeExports.jsx("div",{className:"proton-CopyInput-button-container",onClick:e,children:t.jsxRuntimeExports.jsxs("button",{"data-testid":"COPY_BUTTON",className:r.csx("proton-CopyInput-button",o&&"proton-CopyInput-button--copied"),children:[t.jsxRuntimeExports.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 512 512",children:[t.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"M408 480H184a72 72 0 0 1-72-72V184a72 72 0 0 1 72-72h224a72 72 0 0 1 72 72v224a72 72 0 0 1-72 72"}),t.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"M160 80h235.88A72.12 72.12 0 0 0 328 32H104a72 72 0 0 0-72 72v224a72.12 72.12 0 0 0 48 67.88V160a80 80 0 0 1 80-80"})]}),t.jsxRuntimeExports.jsx("span",{className:r.csx("proton-CopyInput-button-text",o&&"proton-CopyInput-button-text--copied"),children:o?"Copied!":"Copy"})]})});exports.CopyInput=l;
 //# sourceMappingURL=CopyInput.cjs.js.map

package/dist/components/Input/CopyInput/CopyInput.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyInput.cjs.js","sources":["../../../../src/components/Input/CopyInput/CopyInput.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { csx } from \"../../../utils\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\nimport { Input } from \"../BaseInput/Input\";\nimport \"./CopyInput.css\";\n\nexport interface CopyInputProps {\n  /** The name of the input field */\n  name: string;\n\n  /** The value to display in the input and copy to clipboard */\n  value: string;\n\n  /** Whether the input is disabled */\n  isDisabled?: boolean;\n\n  /** Optional callback when copy fails, receives the error object */\n  onError?: (error: Error) => void;\n\n  /** Optional callback when copy succeeds */\n  onSuccess?: () => void;\n}\n\n/**\n * Input with a button to copy value to the clipboard.\n *\n * API:\n *  - {@link CopyInputProps}\n */\nexport function CopyInput({\n  name,\n  value,\n  isDisabled,\n  onError,\n  onSuccess,\n}: CopyInputProps) {\n  const [isCopied, setCopied] = useState(false);\n\n  return (\n    <Input\n      name={name}\n      value={value}\n      isDisabled={isDisabled}\n      suffix={\n        <CopyButton\n          isCopied={isCopied}\n          onClick={async () => {\n            const copySuccess = await copyTextToClipboard(value, onError);\n            if (!copySuccess) return;\n\n            setCopied(true);\n            onSuccess?.();\n            setTimeout(() => setCopied(false), 5000);\n          }}\n        />\n      }\n    />\n  );\n}\n\nconst CopyButton = ({ isCopied, onClick }) => {\n  return (\n    <div className=\"proton-CopyInput-button-container\" onClick={onClick}>\n      <button\n        data-testid=\"COPY_BUTTON\"\n        className={csx(\n          \"proton-CopyInput-button\",\n          isCopied && \"proton-CopyInput-button--copied\"\n        )}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 512 512\"\n        >\n          <path\n            fill=\"currentColor\"\n            d=\"M408 480H184a72 72 0 0 1-72-72V184a72 72 0 0 1 72-72h224a72 72 0 0 1 72 72v224a72 72 0 0 1-72 72\"\n          />\n          <path\n            fill=\"currentColor\"\n            d=\"M160 80h235.88A72.12 72.12 0 0 0 328 32H104a72 72 0 0 0-72 72v224a72.12 72.12 0 0 0 48 67.88V160a80 80 0 0 1 80-80\"\n          />\n        </svg>\n        <span\n          className={csx(\n            \"proton-CopyInput-button-text\",\n            isCopied && \"proton-CopyInput-button-text--copied\"\n          )}\n        >\n          {isCopied ? \"Copied!\" : \"Copy\"}\n        </span>\n      </button>\n    </div>\n  );\n};\n"],"names":["CopyInput","name","value","isDisabled","onError","onSuccess","isCopied","setCopied","useState","jsx","Input","CopyButton","copyTextToClipboard","onClick","jsxs","csx"],"mappings":"sUA6BO,SAASA,EAAU,CACxB,KAAAC,EACA,MAAAC,EACA,WAAAC,EACA,QAAAC,EACA,UAAAC,CACF,EAAmB,CACjB,KAAM,CAACC,EAAUC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EAE5C,OACEC,EAAAA,kBAAAA,IAACC,EAAAA,MAAA,CACC,KAAAT,EACA,MAAAC,EACA,WAAAC,EACA,OACEM,EAAAA,kBAAAA,IAACE,EAAA,CACC,SAAAL,EACA,QAAS,SAAY,CACC,MAAMM,sBAAoBV,EAAOE,CAAO,IAG5DG,EAAU,EAAI,EACdF,GAAA,MAAAA,IACA,WAAW,IAAME,EAAU,EAAK,EAAG,GAAI,EACzC,CAAA,CAAA,CACF,CAAA,CAIR,CAEA,MAAMI,EAAa,CAAC,CAAE,SAAAL,EAAU,QAAAO,KAE5BJ,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,oCAAoC,QAAAI,EACjD,SAAAC,EAAAA,kBAAAA,KAAC,SAAA,CACC,cAAY,cACZ,UAAWC,EAAAA,IACT,0BACAT,GAAY,iCAAA,EAGd,SAAA,CAAAQ,EAAAA,kBAAAA,KAAC,MAAA,CACC,MAAM,6BACN,MAAM,KACN,OAAO,KACP,QAAQ,cAER,SAAA,CAAAL,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,kGAAA,CAAA,EAEJA,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,oHAAA,CAAA,CACJ,CAAA,CAAA,EAEFA,EAAAA,kBAAAA,IAAC,OAAA,CACC,UAAWM,EAAAA,IACT,+BACAT,GAAY,sCAAA,EAGb,WAAW,UAAY,MAAA,CAAA,CAC1B,CAAA,CAAA,EAEJ"}
+{"version":3,"file":"CopyInput.cjs.js","sources":["../../../../src/components/Input/CopyInput/CopyInput.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { csx } from \"../../../utils\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\nimport { Input } from \"../BaseInput/Input\";\nimport \"./CopyInput.css\";\n\nexport interface CopyInputProps {\n  /** The name of the input field */\n  name: string;\n\n  /** The value to display in the input and copy to clipboard */\n  value: string;\n\n  /** Whether the input is disabled */\n  isDisabled?: boolean;\n\n  /** Optional callback when copy fails, receives the error object */\n  onError?: (error: Error) => void;\n\n  /** Optional callback when copy succeeds */\n  onSuccess?: () => void;\n}\n\n/**\n * Input with a button to copy value to the clipboard.\n *\n * API:\n *  - {@link CopyInputProps}\n */\nexport function CopyInput({\n  name,\n  value,\n  isDisabled,\n  onError,\n  onSuccess,\n}: CopyInputProps) {\n  const [isCopied, setCopied] = useState(false);\n\n  return (\n    <Input\n      name={name}\n      value={value}\n      isDisabled={isDisabled}\n      suffix={\n        <CopyButton\n          isCopied={isCopied}\n          onClick={async () => {\n            console.log(\"copy button clicked\", { value})\n\n            const copySuccess = await copyTextToClipboard(value, onError);\n            if (!copySuccess) return;\n\n            setCopied(true);\n            onSuccess?.();\n            setTimeout(() => setCopied(false), 5000);\n          }}\n        />\n      }\n    />\n  );\n}\n\nconst CopyButton = ({ isCopied, onClick }) => {\n  return (\n    <div className=\"proton-CopyInput-button-container\" onClick={onClick}>\n      <button\n        data-testid=\"COPY_BUTTON\"\n        className={csx(\n          \"proton-CopyInput-button\",\n          isCopied && \"proton-CopyInput-button--copied\"\n        )}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 512 512\"\n        >\n          <path\n            fill=\"currentColor\"\n            d=\"M408 480H184a72 72 0 0 1-72-72V184a72 72 0 0 1 72-72h224a72 72 0 0 1 72 72v224a72 72 0 0 1-72 72\"\n          />\n          <path\n            fill=\"currentColor\"\n            d=\"M160 80h235.88A72.12 72.12 0 0 0 328 32H104a72 72 0 0 0-72 72v224a72.12 72.12 0 0 0 48 67.88V160a80 80 0 0 1 80-80\"\n          />\n        </svg>\n        <span\n          className={csx(\n            \"proton-CopyInput-button-text\",\n            isCopied && \"proton-CopyInput-button-text--copied\"\n          )}\n        >\n          {isCopied ? \"Copied!\" : \"Copy\"}\n        </span>\n      </button>\n    </div>\n  );\n};\n"],"names":["CopyInput","name","value","isDisabled","onError","onSuccess","isCopied","setCopied","useState","jsx","Input","CopyButton","copyTextToClipboard","onClick","jsxs","csx"],"mappings":"sUA6BO,SAASA,EAAU,CACxB,KAAAC,EACA,MAAAC,EACA,WAAAC,EACA,QAAAC,EACA,UAAAC,CACF,EAAmB,CACjB,KAAM,CAACC,EAAUC,CAAS,EAAIC,WAAS,EAAK,EAG1C,OAAAC,EAAA,kBAAA,IAACC,EAAA,MAAA,CACC,KAAAT,EACA,MAAAC,EACA,WAAAC,EACA,OACEM,EAAA,kBAAA,IAACE,EAAA,CACC,SAAAL,EACA,QAAS,SAAY,CACnB,QAAQ,IAAI,sBAAuB,CAAE,MAAAJ,CAAM,CAAA,EAEvB,MAAMU,EAAAA,oBAAoBV,EAAOE,CAAO,IAG5DG,EAAU,EAAI,EACFF,GAAA,MAAAA,IACZ,WAAW,IAAME,EAAU,EAAK,EAAG,GAAI,EACzC,CAAA,CACF,CAAA,CAAA,CAIR,CAEA,MAAMI,EAAa,CAAC,CAAE,SAAAL,EAAU,QAAAO,KAE3BJ,EAAAA,kBAAAA,IAAA,MAAA,CAAI,UAAU,oCAAoC,QAAAI,EACjD,SAAAC,EAAA,kBAAA,KAAC,SAAA,CACC,cAAY,cACZ,UAAWC,EAAA,IACT,0BACAT,GAAY,iCACd,EAEA,SAAA,CAAAQ,EAAA,kBAAA,KAAC,MAAA,CACC,MAAM,6BACN,MAAM,KACN,OAAO,KACP,QAAQ,cAER,SAAA,CAAAL,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,kGAAA,CACJ,EACAA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,oHAAA,CACJ,CAAA,CAAA,CACF,EACAA,EAAA,kBAAA,IAAC,OAAA,CACC,UAAWM,EAAA,IACT,+BACAT,GAAY,sCACd,EAEC,WAAW,UAAY,MAAA,CAC1B,CAAA,CAAA,CAEJ,CAAA,CAAA"}

package/dist/components/Input/CopyInput/CopyInput.es.js

@@ -1,7 +1,7 @@
 import { j as t } from "../../../node_modules/react/jsx-runtime.es.js";
-import { useState as u } from "react";
-import { copyTextToClipboard as c } from "../../../utils/copy.es.js";
-import { Input as x } from "../BaseInput/Input.es.js";
+import { useState as c } from "react";
+import { copyTextToClipboard as u } from "../../../utils/copy.es.js";
+import { Input as l } from "../BaseInput/Input.es.js";
 /* empty css                 */
 import { csx as e } from "../../../utils/string.es.js";
 function b({
@@ -9,28 +9,28 @@ function b({
   value: p,
   isDisabled: s,
   onError: i,
-  onSuccess: r
+  onSuccess: n
 }) {
-  const [a, n] = u(!1);
+  const [a, r] = c(!1);
   return /* @__PURE__ */ t.jsx(
-    x,
+    l,
     {
       name: o,
       value: p,
       isDisabled: s,
       suffix: /* @__PURE__ */ t.jsx(
-        l,
+        x,
         {
           isCopied: a,
           onClick: async () => {
-            await c(p, i) && (n(!0), r == null || r(), setTimeout(() => n(!1), 5e3));
+            console.log("copy button clicked", { value: p }), await u(p, i) && (r(!0), n == null || n(), setTimeout(() => r(!1), 5e3));
           }
         }
       )
     }
   );
 }
-const l = ({ isCopied: o, onClick: p }) => /* @__PURE__ */ t.jsx("div", { className: "proton-CopyInput-button-container", onClick: p, children: /* @__PURE__ */ t.jsxs(
+const x = ({ isCopied: o, onClick: p }) => /* @__PURE__ */ t.jsx("div", { className: "proton-CopyInput-button-container", onClick: p, children: /* @__PURE__ */ t.jsxs(
   "button",
   {
     "data-testid": "COPY_BUTTON",

package/dist/components/Input/CopyInput/CopyInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyInput.es.js","sources":["../../../../src/components/Input/CopyInput/CopyInput.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { csx } from \"../../../utils\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\nimport { Input } from \"../BaseInput/Input\";\nimport \"./CopyInput.css\";\n\nexport interface CopyInputProps {\n  /** The name of the input field */\n  name: string;\n\n  /** The value to display in the input and copy to clipboard */\n  value: string;\n\n  /** Whether the input is disabled */\n  isDisabled?: boolean;\n\n  /** Optional callback when copy fails, receives the error object */\n  onError?: (error: Error) => void;\n\n  /** Optional callback when copy succeeds */\n  onSuccess?: () => void;\n}\n\n/**\n * Input with a button to copy value to the clipboard.\n *\n * API:\n *  - {@link CopyInputProps}\n */\nexport function CopyInput({\n  name,\n  value,\n  isDisabled,\n  onError,\n  onSuccess,\n}: CopyInputProps) {\n  const [isCopied, setCopied] = useState(false);\n\n  return (\n    <Input\n      name={name}\n      value={value}\n      isDisabled={isDisabled}\n      suffix={\n        <CopyButton\n          isCopied={isCopied}\n          onClick={async () => {\n            const copySuccess = await copyTextToClipboard(value, onError);\n            if (!copySuccess) return;\n\n            setCopied(true);\n            onSuccess?.();\n            setTimeout(() => setCopied(false), 5000);\n          }}\n        />\n      }\n    />\n  );\n}\n\nconst CopyButton = ({ isCopied, onClick }) => {\n  return (\n    <div className=\"proton-CopyInput-button-container\" onClick={onClick}>\n      <button\n        data-testid=\"COPY_BUTTON\"\n        className={csx(\n          \"proton-CopyInput-button\",\n          isCopied && \"proton-CopyInput-button--copied\"\n        )}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 512 512\"\n        >\n          <path\n            fill=\"currentColor\"\n            d=\"M408 480H184a72 72 0 0 1-72-72V184a72 72 0 0 1 72-72h224a72 72 0 0 1 72 72v224a72 72 0 0 1-72 72\"\n          />\n          <path\n            fill=\"currentColor\"\n            d=\"M160 80h235.88A72.12 72.12 0 0 0 328 32H104a72 72 0 0 0-72 72v224a72.12 72.12 0 0 0 48 67.88V160a80 80 0 0 1 80-80\"\n          />\n        </svg>\n        <span\n          className={csx(\n            \"proton-CopyInput-button-text\",\n            isCopied && \"proton-CopyInput-button-text--copied\"\n          )}\n        >\n          {isCopied ? \"Copied!\" : \"Copy\"}\n        </span>\n      </button>\n    </div>\n  );\n};\n"],"names":["CopyInput","name","value","isDisabled","onError","onSuccess","isCopied","setCopied","useState","jsx","Input","CopyButton","copyTextToClipboard","onClick","jsxs","csx"],"mappings":";;;;;;AA6BO,SAASA,EAAU;AAAA,EACxB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,GAAmB;AACjB,QAAM,CAACC,GAAUC,CAAS,IAAIC,EAAS,EAAK;AAE5C,SACEC,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,QACEM,gBAAAA,EAAAA;AAAAA,QAACE;AAAA,QAAA;AAAA,UACC,UAAAL;AAAA,UACA,SAAS,YAAY;AAEnB,YADoB,MAAMM,EAAoBV,GAAOE,CAAO,MAG5DG,EAAU,EAAI,GACdF,KAAA,QAAAA,KACA,WAAW,MAAME,EAAU,EAAK,GAAG,GAAI;AAAA,UACzC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIR;AAEA,MAAMI,IAAa,CAAC,EAAE,UAAAL,GAAU,SAAAO,QAE5BJ,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAU,qCAAoC,SAAAI,GACjD,UAAAC,gBAAAA,EAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAY;AAAA,IACZ,WAAWC;AAAA,MACT;AAAA,MACAT,KAAY;AAAA,IAAA;AAAA,IAGd,UAAA;AAAA,MAAAQ,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UAER,UAAA;AAAA,YAAAL,gBAAAA,EAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,GAAE;AAAA,cAAA;AAAA,YAAA;AAAA,YAEJA,gBAAAA,EAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,GAAE;AAAA,cAAA;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA;AAAA,MAAA;AAAA,MAEFA,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWM;AAAA,YACT;AAAA,YACAT,KAAY;AAAA,UAAA;AAAA,UAGb,cAAW,YAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1B;AAAA,EAAA;AAAA,GAEJ;"}
+{"version":3,"file":"CopyInput.es.js","sources":["../../../../src/components/Input/CopyInput/CopyInput.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { csx } from \"../../../utils\";\nimport { copyTextToClipboard } from \"../../../utils/copy\";\nimport { Input } from \"../BaseInput/Input\";\nimport \"./CopyInput.css\";\n\nexport interface CopyInputProps {\n  /** The name of the input field */\n  name: string;\n\n  /** The value to display in the input and copy to clipboard */\n  value: string;\n\n  /** Whether the input is disabled */\n  isDisabled?: boolean;\n\n  /** Optional callback when copy fails, receives the error object */\n  onError?: (error: Error) => void;\n\n  /** Optional callback when copy succeeds */\n  onSuccess?: () => void;\n}\n\n/**\n * Input with a button to copy value to the clipboard.\n *\n * API:\n *  - {@link CopyInputProps}\n */\nexport function CopyInput({\n  name,\n  value,\n  isDisabled,\n  onError,\n  onSuccess,\n}: CopyInputProps) {\n  const [isCopied, setCopied] = useState(false);\n\n  return (\n    <Input\n      name={name}\n      value={value}\n      isDisabled={isDisabled}\n      suffix={\n        <CopyButton\n          isCopied={isCopied}\n          onClick={async () => {\n            console.log(\"copy button clicked\", { value})\n\n            const copySuccess = await copyTextToClipboard(value, onError);\n            if (!copySuccess) return;\n\n            setCopied(true);\n            onSuccess?.();\n            setTimeout(() => setCopied(false), 5000);\n          }}\n        />\n      }\n    />\n  );\n}\n\nconst CopyButton = ({ isCopied, onClick }) => {\n  return (\n    <div className=\"proton-CopyInput-button-container\" onClick={onClick}>\n      <button\n        data-testid=\"COPY_BUTTON\"\n        className={csx(\n          \"proton-CopyInput-button\",\n          isCopied && \"proton-CopyInput-button--copied\"\n        )}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 512 512\"\n        >\n          <path\n            fill=\"currentColor\"\n            d=\"M408 480H184a72 72 0 0 1-72-72V184a72 72 0 0 1 72-72h224a72 72 0 0 1 72 72v224a72 72 0 0 1-72 72\"\n          />\n          <path\n            fill=\"currentColor\"\n            d=\"M160 80h235.88A72.12 72.12 0 0 0 328 32H104a72 72 0 0 0-72 72v224a72.12 72.12 0 0 0 48 67.88V160a80 80 0 0 1 80-80\"\n          />\n        </svg>\n        <span\n          className={csx(\n            \"proton-CopyInput-button-text\",\n            isCopied && \"proton-CopyInput-button-text--copied\"\n          )}\n        >\n          {isCopied ? \"Copied!\" : \"Copy\"}\n        </span>\n      </button>\n    </div>\n  );\n};\n"],"names":["CopyInput","name","value","isDisabled","onError","onSuccess","isCopied","setCopied","useState","jsx","Input","CopyButton","copyTextToClipboard","onClick","jsxs","csx"],"mappings":";;;;;;AA6BO,SAASA,EAAU;AAAA,EACxB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,GAAmB;AACjB,QAAM,CAACC,GAAUC,CAAS,IAAIC,EAAS,EAAK;AAG1C,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,QACEM,gBAAAA,EAAA;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,UAAAL;AAAA,UACA,SAAS,YAAY;AAInB,YAHA,QAAQ,IAAI,uBAAuB,EAAE,OAAAJ,EAAM,CAAA,GAEvB,MAAMU,EAAoBV,GAAOE,CAAO,MAG5DG,EAAU,EAAI,GACFF,KAAA,QAAAA,KACZ,WAAW,MAAME,EAAU,EAAK,GAAG,GAAI;AAAA,UACzC;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,MAAMI,IAAa,CAAC,EAAE,UAAAL,GAAU,SAAAO,QAE3BJ,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,qCAAoC,SAAAI,GACjD,UAAAC,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAY;AAAA,IACZ,WAAWC;AAAA,MACT;AAAA,MACAT,KAAY;AAAA,IACd;AAAA,IAEA,UAAA;AAAA,MAAAQ,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UAER,UAAA;AAAA,YAAAL,gBAAAA,EAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,GAAE;AAAA,cAAA;AAAA,YACJ;AAAA,YACAA,gBAAAA,EAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,GAAE;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,MACAA,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWM;AAAA,YACT;AAAA,YACAT,KAAY;AAAA,UACd;AAAA,UAEC,cAAW,YAAY;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA;AAAA,EAAA;AAEJ,EAAA,CAAA;"}

package/dist/components/Input/SearchInput/SearchInput.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.cjs.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport \"./SearchInput.css\";\nimport { csx } from \"../../../utils\";\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\n\nexport interface SearchInputProps\n  extends Omit<\n    BaseInputProps,\n    | \"prefix\"\n    | \"suffix\"\n    | \"value\"\n    | \"onChange\"\n    | \"description\"\n    | \"descriptionPosition\"\n    | \"label\"\n  > {\n  /** The initial value of the input. */\n  defaultValue?: string;\n\n  /** Should the clear button be shown when there is text? */\n  isClearable?: boolean;\n\n  /** Called when the input value changes. */\n  onChange?: (value: string) => void;\n\n  /** Called when the clear button is clicked. */\n  onClear?: () => void;\n\n  /** The current value of the input (for controlled usage) */\n  value?: string;\n}\n\n/**\n * A search input component with optional clear functionality and URL parameter sync.\n *\n * API:\n *  - {@link SearchInputProps}\n *  - extends {@link BaseInputProps}\n */\nexport const SearchInput = ({\n  name = \"search\",\n  placeholder = \"Search...\",\n  autoComplete,\n  isClearable = true,\n  isDisabled = false,\n  error,\n  defaultValue,\n  value: controlledValue,\n  \"data-testid\": testId = \"proton-SearchInput\",\n  onChange,\n  onClear,\n}: SearchInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\n\n  // Sync with controlled value if provided\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setValue(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleClear = () => {\n    setValue(\"\");\n    onChange?.(\"\");\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div\n      className=\"proton-SearchInput__wrapper\"\n      data-testid={testId}\n      role=\"search\"\n    >\n      <Input\n        type=\"search\"\n        onChange={handleChange}\n        value={value}\n        name={name}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        error={error}\n        ref={inputRef}\n        isDisabled={isDisabled}\n        prefix={\n          <svg\n            aria-hidden=\"true\"\n            width=\"2.8em\"\n            height=\"1.6em\"\n            viewBox=\"0 0 24 24\"\n            onClick={() => inputRef.current?.focus()}\n          >\n            <title>Magnifying Glass</title>\n            <path\n              fill=\"currentColor\"\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\n            />\n          </svg>\n        }\n        suffix={\n          isClearable && value.length > 0 ? (\n            <button\n              type=\"button\"\n              className={csx(\n                \"proton-SearchInput__button\",\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\"\n              )}\n              data-testid={`${testId}-clear`}\n              onClick={handleClear}\n              aria-label=\"Clear search\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 50 50\"\n                width=\"2.2em\"\n                height=\"1.2em\"\n              >\n                <title>Clear</title>\n                <path\n                  fill=\"currentColor\"\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\n                />\n                <path\n                  fill=\"currentColor\"\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\n                />\n              </svg>\n            </button>\n          ) : null\n        }\n      />\n    </div>\n  );\n};\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","useEffect","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":"gSAyCaA,EAAc,CAAC,CAC1B,KAAAC,EAAO,SACP,YAAAC,EAAc,YACd,aAAAC,EACA,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,MAAAC,EACA,aAAAC,EACA,MAAOC,EACP,cAAeC,EAAS,qBACxB,SAAAC,EACA,QAAAC,CACF,IAAwB,CACtB,MAAMC,EAAWC,EAAAA,OAAyB,IAAI,EACxC,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAASR,GAAmBD,GAAgB,EAAE,EAGxEU,EAAAA,UAAU,IAAM,CACVT,IAAoB,QACtBO,EAASP,CAAe,CAE5B,EAAG,CAACA,CAAe,CAAC,EAEpB,MAAMU,EAAgBC,GAAqB,CACzCJ,EAASI,CAAQ,EACjBT,GAAA,MAAAA,EAAWS,EACb,EAEMC,EAAc,IAAM,OACxBL,EAAS,EAAE,EACXL,GAAA,MAAAA,EAAW,IACXC,GAAA,MAAAA,KACAU,EAAAT,EAAS,UAAT,MAAAS,EAAkB,OACpB,EAEA,OACEC,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,8BACV,cAAab,EACb,KAAK,SAEL,SAAAa,EAAAA,kBAAAA,IAACC,EAAAA,MAAA,CACC,KAAK,SACL,SAAUL,EACV,MAAAJ,EACA,KAAAb,EACA,YAAAC,EACA,aAAAC,EACA,MAAAG,EACA,IAAKM,EACL,WAAAP,EACA,OACEmB,EAAAA,kBAAAA,KAAC,MAAA,CACC,cAAY,OACZ,MAAM,QACN,OAAO,QACP,QAAQ,YACR,QAAS,IAAA,OAAM,OAAAH,EAAAT,EAAS,UAAT,YAAAS,EAAkB,SAEjC,SAAA,CAAAC,EAAAA,kBAAAA,IAAC,SAAM,SAAA,kBAAA,CAAgB,EACvBA,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,4HAAA,CAAA,CACJ,CAAA,CAAA,EAGJ,OACElB,GAAeU,EAAM,OAAS,EAC5BQ,EAAAA,kBAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAWG,EAAAA,IACT,6BACA,2BACA,sBAAA,EAEF,cAAa,GAAGhB,CAAM,SACtB,QAASW,EACT,aAAW,eAEX,SAAAI,EAAAA,kBAAAA,KAAC,MAAA,CACC,cAAY,OACZ,QAAQ,YACR,MAAM,QACN,OAAO,QAEP,SAAA,CAAAF,EAAAA,kBAAAA,IAAC,SAAM,SAAA,OAAA,CAAK,EACZA,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wDAAA,CAAA,EAEJA,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,yDAAA,CAAA,CACJ,CAAA,CAAA,CACF,CAAA,EAEA,IAAA,CAAA,CAER,CAAA,CAGN"}
+{"version":3,"file":"SearchInput.cjs.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport \"./SearchInput.css\";\nimport { csx } from \"../../../utils\";\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\n\nexport interface SearchInputProps\n  extends Omit<\n    BaseInputProps,\n    | \"prefix\"\n    | \"suffix\"\n    | \"value\"\n    | \"onChange\"\n    | \"description\"\n    | \"descriptionPosition\"\n    | \"label\"\n  > {\n  /** The initial value of the input. */\n  defaultValue?: string;\n\n  /** Should the clear button be shown when there is text? */\n  isClearable?: boolean;\n\n  /** Called when the input value changes. */\n  onChange?: (value: string) => void;\n\n  /** Called when the clear button is clicked. */\n  onClear?: () => void;\n\n  /** The current value of the input (for controlled usage) */\n  value?: string;\n}\n\n/**\n * A search input component with optional clear functionality and URL parameter sync.\n *\n * API:\n *  - {@link SearchInputProps}\n *  - extends {@link BaseInputProps}\n */\nexport const SearchInput = ({\n  name = \"search\",\n  placeholder = \"Search...\",\n  autoComplete,\n  isClearable = true,\n  isDisabled = false,\n  error,\n  defaultValue,\n  value: controlledValue,\n  \"data-testid\": testId = \"proton-SearchInput\",\n  onChange,\n  onClear,\n}: SearchInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\n\n  // Sync with controlled value if provided\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setValue(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleClear = () => {\n    setValue(\"\");\n    onChange?.(\"\");\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div\n      className=\"proton-SearchInput__wrapper\"\n      data-testid={testId}\n      role=\"search\"\n    >\n      <Input\n        type=\"search\"\n        onChange={handleChange}\n        value={value}\n        name={name}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        error={error}\n        ref={inputRef}\n        isDisabled={isDisabled}\n        prefix={\n          <svg\n            aria-hidden=\"true\"\n            width=\"2.8em\"\n            height=\"1.6em\"\n            viewBox=\"0 0 24 24\"\n            onClick={() => inputRef.current?.focus()}\n          >\n            <title>Magnifying Glass</title>\n            <path\n              fill=\"currentColor\"\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\n            />\n          </svg>\n        }\n        suffix={\n          isClearable && value.length > 0 ? (\n            <button\n              type=\"button\"\n              className={csx(\n                \"proton-SearchInput__button\",\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\"\n              )}\n              data-testid={`${testId}-clear`}\n              onClick={handleClear}\n              aria-label=\"Clear search\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 50 50\"\n                width=\"2.2em\"\n                height=\"1.2em\"\n              >\n                <title>Clear</title>\n                <path\n                  fill=\"currentColor\"\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\n                />\n                <path\n                  fill=\"currentColor\"\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\n                />\n              </svg>\n            </button>\n          ) : null\n        }\n      />\n    </div>\n  );\n};\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","useEffect","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":"gSAyCaA,EAAc,CAAC,CAC1B,KAAAC,EAAO,SACP,YAAAC,EAAc,YACd,aAAAC,EACA,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,MAAAC,EACA,aAAAC,EACA,MAAOC,EACP,cAAeC,EAAS,qBACxB,SAAAC,EACA,QAAAC,CACF,IAAwB,CAChB,MAAAC,EAAWC,SAAyB,IAAI,EACxC,CAACC,EAAOC,CAAQ,EAAIC,EAAS,SAAAR,GAAmBD,GAAgB,EAAE,EAGxEU,EAAAA,UAAU,IAAM,CACVT,IAAoB,QACtBO,EAASP,CAAe,CAC1B,EACC,CAACA,CAAe,CAAC,EAEd,MAAAU,EAAgBC,GAAqB,CACzCJ,EAASI,CAAQ,EACjBT,GAAA,MAAAA,EAAWS,EAAQ,EAGfC,EAAc,IAAM,OACxBL,EAAS,EAAE,EACXL,GAAA,MAAAA,EAAW,IACDC,GAAA,MAAAA,KACVU,EAAAT,EAAS,UAAT,MAAAS,EAAkB,OAAM,EAIxB,OAAAC,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,8BACV,cAAab,EACb,KAAK,SAEL,SAAAa,EAAA,kBAAA,IAACC,EAAA,MAAA,CACC,KAAK,SACL,SAAUL,EACV,MAAAJ,EACA,KAAAb,EACA,YAAAC,EACA,aAAAC,EACA,MAAAG,EACA,IAAKM,EACL,WAAAP,EACA,OACEmB,EAAA,kBAAA,KAAC,MAAA,CACC,cAAY,OACZ,MAAM,QACN,OAAO,QACP,QAAQ,YACR,QAAS,IAAM,OAAA,OAAAH,EAAAT,EAAS,UAAT,YAAAS,EAAkB,SAEjC,SAAA,CAAAC,EAAAA,kBAAAA,IAAC,SAAM,SAAgB,kBAAA,CAAA,EACvBA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,4HAAA,CACJ,CAAA,CAAA,CACF,EAEF,OACElB,GAAeU,EAAM,OAAS,EAC5BQ,EAAA,kBAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAWG,EAAA,IACT,6BACA,2BACA,sBACF,EACA,cAAa,GAAGhB,CAAM,SACtB,QAASW,EACT,aAAW,eAEX,SAAAI,EAAA,kBAAA,KAAC,MAAA,CACC,cAAY,OACZ,QAAQ,YACR,MAAM,QACN,OAAO,QAEP,SAAA,CAAAF,EAAAA,kBAAAA,IAAC,SAAM,SAAK,OAAA,CAAA,EACZA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wDAAA,CACJ,EACAA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,yDAAA,CACJ,CAAA,CAAA,CACF,CAAA,CAAA,EAEA,IAAA,CAER,CAAA,CAAA,CAGN"}

package/dist/components/Input/SearchInput/SearchInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.es.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport \"./SearchInput.css\";\nimport { csx } from \"../../../utils\";\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\n\nexport interface SearchInputProps\n  extends Omit<\n    BaseInputProps,\n    | \"prefix\"\n    | \"suffix\"\n    | \"value\"\n    | \"onChange\"\n    | \"description\"\n    | \"descriptionPosition\"\n    | \"label\"\n  > {\n  /** The initial value of the input. */\n  defaultValue?: string;\n\n  /** Should the clear button be shown when there is text? */\n  isClearable?: boolean;\n\n  /** Called when the input value changes. */\n  onChange?: (value: string) => void;\n\n  /** Called when the clear button is clicked. */\n  onClear?: () => void;\n\n  /** The current value of the input (for controlled usage) */\n  value?: string;\n}\n\n/**\n * A search input component with optional clear functionality and URL parameter sync.\n *\n * API:\n *  - {@link SearchInputProps}\n *  - extends {@link BaseInputProps}\n */\nexport const SearchInput = ({\n  name = \"search\",\n  placeholder = \"Search...\",\n  autoComplete,\n  isClearable = true,\n  isDisabled = false,\n  error,\n  defaultValue,\n  value: controlledValue,\n  \"data-testid\": testId = \"proton-SearchInput\",\n  onChange,\n  onClear,\n}: SearchInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\n\n  // Sync with controlled value if provided\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setValue(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleClear = () => {\n    setValue(\"\");\n    onChange?.(\"\");\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div\n      className=\"proton-SearchInput__wrapper\"\n      data-testid={testId}\n      role=\"search\"\n    >\n      <Input\n        type=\"search\"\n        onChange={handleChange}\n        value={value}\n        name={name}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        error={error}\n        ref={inputRef}\n        isDisabled={isDisabled}\n        prefix={\n          <svg\n            aria-hidden=\"true\"\n            width=\"2.8em\"\n            height=\"1.6em\"\n            viewBox=\"0 0 24 24\"\n            onClick={() => inputRef.current?.focus()}\n          >\n            <title>Magnifying Glass</title>\n            <path\n              fill=\"currentColor\"\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\n            />\n          </svg>\n        }\n        suffix={\n          isClearable && value.length > 0 ? (\n            <button\n              type=\"button\"\n              className={csx(\n                \"proton-SearchInput__button\",\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\"\n              )}\n              data-testid={`${testId}-clear`}\n              onClick={handleClear}\n              aria-label=\"Clear search\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 50 50\"\n                width=\"2.2em\"\n                height=\"1.2em\"\n              >\n                <title>Clear</title>\n                <path\n                  fill=\"currentColor\"\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\n                />\n                <path\n                  fill=\"currentColor\"\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\n                />\n              </svg>\n            </button>\n          ) : null\n        }\n      />\n    </div>\n  );\n};\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","useEffect","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":";;;;;AAyCO,MAAMA,IAAc,CAAC;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAOC;AAAA,EACP,eAAeC,IAAS;AAAA,EACxB,UAAAC;AAAA,EACA,SAAAC;AACF,MAAwB;AACtB,QAAMC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAOC,CAAQ,IAAIC,EAASR,KAAmBD,KAAgB,EAAE;AAGxE,EAAAU,EAAU,MAAM;AACd,IAAIT,MAAoB,UACtBO,EAASP,CAAe;AAAA,EAE5B,GAAG,CAACA,CAAe,CAAC;AAEpB,QAAMU,IAAe,CAACC,MAAqB;AACzC,IAAAJ,EAASI,CAAQ,GACjBT,KAAA,QAAAA,EAAWS;AAAA,EACb,GAEMC,IAAc,MAAM;;AACxB,IAAAL,EAAS,EAAE,GACXL,KAAA,QAAAA,EAAW,KACXC,KAAA,QAAAA,MACAU,IAAAT,EAAS,YAAT,QAAAS,EAAkB;AAAA,EACpB;AAEA,SACEC,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAab;AAAA,MACb,MAAK;AAAA,MAEL,UAAAa,gBAAAA,EAAAA;AAAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAUL;AAAA,UACV,OAAAJ;AAAA,UACA,MAAAb;AAAA,UACA,aAAAC;AAAA,UACA,cAAAC;AAAA,UACA,OAAAG;AAAA,UACA,KAAKM;AAAA,UACL,YAAAP;AAAA,UACA,QACEmB,gBAAAA,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,OAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,SAAS,MAAA;;AAAM,wBAAAH,IAAAT,EAAS,YAAT,gBAAAS,EAAkB;AAAA;AAAA,cAEjC,UAAA;AAAA,gBAAAC,gBAAAA,EAAAA,IAAC,WAAM,UAAA,mBAAA,CAAgB;AAAA,gBACvBA,gBAAAA,EAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,GAAE;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,QACElB,KAAeU,EAAM,SAAS,IAC5BQ,gBAAAA,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAWG;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAEF,eAAa,GAAGhB,CAAM;AAAA,cACtB,SAASW;AAAA,cACT,cAAW;AAAA,cAEX,UAAAI,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,QAAO;AAAA,kBAEP,UAAA;AAAA,oBAAAF,gBAAAA,EAAAA,IAAC,WAAM,UAAA,QAAA,CAAK;AAAA,oBACZA,gBAAAA,EAAAA;AAAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAEJA,gBAAAA,EAAAA;AAAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACJ;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA,IAEA;AAAA,QAAA;AAAA,MAAA;AAAA,IAER;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"SearchInput.es.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport \"./SearchInput.css\";\nimport { csx } from \"../../../utils\";\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\n\nexport interface SearchInputProps\n  extends Omit<\n    BaseInputProps,\n    | \"prefix\"\n    | \"suffix\"\n    | \"value\"\n    | \"onChange\"\n    | \"description\"\n    | \"descriptionPosition\"\n    | \"label\"\n  > {\n  /** The initial value of the input. */\n  defaultValue?: string;\n\n  /** Should the clear button be shown when there is text? */\n  isClearable?: boolean;\n\n  /** Called when the input value changes. */\n  onChange?: (value: string) => void;\n\n  /** Called when the clear button is clicked. */\n  onClear?: () => void;\n\n  /** The current value of the input (for controlled usage) */\n  value?: string;\n}\n\n/**\n * A search input component with optional clear functionality and URL parameter sync.\n *\n * API:\n *  - {@link SearchInputProps}\n *  - extends {@link BaseInputProps}\n */\nexport const SearchInput = ({\n  name = \"search\",\n  placeholder = \"Search...\",\n  autoComplete,\n  isClearable = true,\n  isDisabled = false,\n  error,\n  defaultValue,\n  value: controlledValue,\n  \"data-testid\": testId = \"proton-SearchInput\",\n  onChange,\n  onClear,\n}: SearchInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\n\n  // Sync with controlled value if provided\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setValue(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleClear = () => {\n    setValue(\"\");\n    onChange?.(\"\");\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div\n      className=\"proton-SearchInput__wrapper\"\n      data-testid={testId}\n      role=\"search\"\n    >\n      <Input\n        type=\"search\"\n        onChange={handleChange}\n        value={value}\n        name={name}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        error={error}\n        ref={inputRef}\n        isDisabled={isDisabled}\n        prefix={\n          <svg\n            aria-hidden=\"true\"\n            width=\"2.8em\"\n            height=\"1.6em\"\n            viewBox=\"0 0 24 24\"\n            onClick={() => inputRef.current?.focus()}\n          >\n            <title>Magnifying Glass</title>\n            <path\n              fill=\"currentColor\"\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\n            />\n          </svg>\n        }\n        suffix={\n          isClearable && value.length > 0 ? (\n            <button\n              type=\"button\"\n              className={csx(\n                \"proton-SearchInput__button\",\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\"\n              )}\n              data-testid={`${testId}-clear`}\n              onClick={handleClear}\n              aria-label=\"Clear search\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 50 50\"\n                width=\"2.2em\"\n                height=\"1.2em\"\n              >\n                <title>Clear</title>\n                <path\n                  fill=\"currentColor\"\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\n                />\n                <path\n                  fill=\"currentColor\"\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\n                />\n              </svg>\n            </button>\n          ) : null\n        }\n      />\n    </div>\n  );\n};\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","useEffect","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":";;;;;AAyCO,MAAMA,IAAc,CAAC;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAOC;AAAA,EACP,eAAeC,IAAS;AAAA,EACxB,UAAAC;AAAA,EACA,SAAAC;AACF,MAAwB;AAChB,QAAAC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAOC,CAAQ,IAAIC,EAASR,KAAmBD,KAAgB,EAAE;AAGxE,EAAAU,EAAU,MAAM;AACd,IAAIT,MAAoB,UACtBO,EAASP,CAAe;AAAA,EAC1B,GACC,CAACA,CAAe,CAAC;AAEd,QAAAU,IAAe,CAACC,MAAqB;AACzC,IAAAJ,EAASI,CAAQ,GACjBT,KAAA,QAAAA,EAAWS;AAAA,EAAQ,GAGfC,IAAc,MAAM;;AACxB,IAAAL,EAAS,EAAE,GACXL,KAAA,QAAAA,EAAW,KACDC,KAAA,QAAAA,MACVU,IAAAT,EAAS,YAAT,QAAAS,EAAkB;AAAA,EAAM;AAIxB,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAab;AAAA,MACb,MAAK;AAAA,MAEL,UAAAa,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAUL;AAAA,UACV,OAAAJ;AAAA,UACA,MAAAb;AAAA,UACA,aAAAC;AAAA,UACA,cAAAC;AAAA,UACA,OAAAG;AAAA,UACA,KAAKM;AAAA,UACL,YAAAP;AAAA,UACA,QACEmB,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,OAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,SAAS,MAAM;;AAAA,wBAAAH,IAAAT,EAAS,YAAT,gBAAAS,EAAkB;AAAA;AAAA,cAEjC,UAAA;AAAA,gBAAAC,gBAAAA,EAAAA,IAAC,WAAM,UAAgB,mBAAA,CAAA;AAAA,gBACvBA,gBAAAA,EAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,GAAE;AAAA,kBAAA;AAAA,gBACJ;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,QACElB,KAAeU,EAAM,SAAS,IAC5BQ,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAWG;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACA,eAAa,GAAGhB,CAAM;AAAA,cACtB,SAASW;AAAA,cACT,cAAW;AAAA,cAEX,UAAAI,gBAAAA,EAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,QAAO;AAAA,kBAEP,UAAA;AAAA,oBAAAF,gBAAAA,EAAAA,IAAC,WAAM,UAAK,QAAA,CAAA;AAAA,oBACZA,gBAAAA,EAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBACJ;AAAA,oBACAA,gBAAAA,EAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBACJ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAAA,IAEA;AAAA,QAAA;AAAA,MAER;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -1 +1 @@
-{"version":3,"file":"MenuTrigger.cjs.js","sources":["../../../src/components/Menu/MenuTrigger.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useMemo, useRef, useState } from \"react\";\n\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { PopoverMenu } from \"./PopoverMenu\";\n\nimport \"./MenuTrigger.css\";\nimport \"./Menu.css\";\n\nexport interface MenuTriggerProps {\n  disabled?: boolean;\n  isOpen?: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n}\n\nexport interface MenuProps {\n  /** Custom trigger component. If not provided, defaults to ellipsis icon.\n   * - @prop triggerProps {@link TriggerProps}\n   */\n  renderTrigger?: (triggerProps: MenuTriggerProps) => ReactNode;\n\n  /** Size of the trigger icon\n   * @default 24\n   */\n  size?: number;\n\n  /** Title of the parent menu */\n  title?: string;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /** Callback when the menu closes */\n  onClose?: () => void;\n\n  /** Test ID for the trigger button */\n  triggerTestId?: string;\n\n  /** Test ID for the menu */\n  menuTestId?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange?: (key: string) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n}\n\n/**\n * An uncontrolled component that displays either a popover menu or an action menu\n * depending on the screen size when the menu trigger is pressed.\n *\n * API:\n *  - {@link MenuProps}\n */\nexport function MenuTrigger({\n  renderTrigger,\n  size = 24,\n  title,\n  items,\n  disabled,\n  onClose,\n  triggerTestId = \"MenuTrigger-Trigger\",\n  menuTestId,\n  onSelectionChange,\n  selectedKey,\n  disabledKeys,\n}: MenuProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n  const [isOpen, setIsOpen] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const menuItems = useMemo(\n    () => items.map((item) => ({ ...item, id: item.key })),\n    [items]\n  );\n\n  const handleSelectionChange = (key: string) => {\n    onSelectionChange?.(key);\n    setIsOpen(false);\n  };\n\n  const triggerButton = renderTrigger ? (\n    renderTrigger({\n      isOpen,\n      disabled,\n      setIsOpen,\n    })\n  ) : (\n    <button\n      data-testid={triggerTestId}\n      disabled={disabled}\n      className=\"proton-MenuTrigger__button\"\n      ref={triggerRef}\n      onClick={() => setIsOpen(!isOpen)}\n      type=\"button\"\n    >\n      <EllipsisIcon size={size} />\n    </button>\n  );\n\n  if (isMobile) {\n    return (\n      <>\n        {triggerButton}\n        {isOpen && (\n          <ActionMenu\n            actions={menuItems}\n            title={title}\n            isOpen={isOpen}\n            onClose={() => {\n              setIsOpen(false);\n              onClose?.();\n            }}\n            showCancel\n            data-testid={menuTestId}\n            selectionMode=\"single\"\n            onSelectionChange={(keys) => {\n              const nextKey = Array.from(keys)[0];\n              if (nextKey) handleSelectionChange(nextKey as string);\n            }}\n            selectedKeys={selectedKey ? [selectedKey] : undefined}\n            disabledKeys={disabledKeys}\n          />\n        )}\n      </>\n    );\n  }\n\n  return (\n    <PopoverMenu\n      trigger={triggerButton}\n      items={menuItems}\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      selectedKey={selectedKey}\n      onSelectionChange={handleSelectionChange}\n      disabledKeys={disabledKeys}\n      title={title}\n    />\n  );\n}\n\nconst EllipsisIcon = ({ size }: { size: number }) => (\n  <svg viewBox=\"0 0 24 24\" width={size} height={size}>\n    <path\n      fill=\"currentColor\"\n      d=\"M4 14c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\n    />\n  </svg>\n);\n"],"names":["MenuTrigger","renderTrigger","size","title","items","disabled","onClose","triggerTestId","menuTestId","onSelectionChange","selectedKey","disabledKeys","isMobile","useBreakpoint","BREAKPOINTS","isOpen","setIsOpen","useState","triggerRef","useRef","menuItems","useMemo","item","handleSelectionChange","key","triggerButton","jsx","EllipsisIcon","jsxs","Fragment","ActionMenu","keys","nextKey","PopoverMenu"],"mappings":"qZAoEO,SAASA,EAAY,CAC1B,cAAAC,EACA,KAAAC,EAAO,GACP,MAAAC,EACA,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,cAAAC,EAAgB,sBAChB,WAAAC,EACA,kBAAAC,EACA,YAAAC,EACA,aAAAC,CACF,EAAc,CACZ,MAAMC,EAAWC,EAAAA,cAAcC,EAAAA,YAAY,KAAK,EAC1C,CAACC,EAAQC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EACpCC,EAAaC,EAAAA,OAA0B,IAAI,EAE3CC,EAAYC,EAAAA,QAChB,IAAMjB,EAAM,IAAKkB,IAAU,CAAE,GAAGA,EAAM,GAAIA,EAAK,GAAA,EAAM,EACrD,CAAClB,CAAK,CAAA,EAGFmB,EAAyBC,GAAgB,CAC7Cf,GAAA,MAAAA,EAAoBe,GACpBR,EAAU,EAAK,CACjB,EAEMS,EAAgBxB,EACpBA,EAAc,CACZ,OAAAc,EACA,SAAAV,EACA,UAAAW,CAAA,CACD,EAEDU,EAAAA,kBAAAA,IAAC,SAAA,CACC,cAAanB,EACb,SAAAF,EACA,UAAU,6BACV,IAAKa,EACL,QAAS,IAAMF,EAAU,CAACD,CAAM,EAChC,KAAK,SAEL,SAAAW,EAAAA,kBAAAA,IAACC,GAAa,KAAAzB,CAAA,CAAY,CAAA,CAAA,EAI9B,OAAIU,EAEAgB,EAAAA,kBAAAA,KAAAC,6BAAA,CACG,SAAA,CAAAJ,EACAV,GACCW,EAAAA,kBAAAA,IAACI,EAAAA,WAAA,CACC,QAASV,EACT,MAAAjB,EACA,OAAAY,EACA,QAAS,IAAM,CACbC,EAAU,EAAK,EACfV,GAAA,MAAAA,GACF,EACA,WAAU,GACV,cAAaE,EACb,cAAc,SACd,kBAAoBuB,GAAS,CAC3B,MAAMC,EAAU,MAAM,KAAKD,CAAI,EAAE,CAAC,EAC9BC,KAA+BA,CAAiB,CACtD,EACA,aAActB,EAAc,CAACA,CAAW,EAAI,OAC5C,aAAAC,CAAA,CAAA,CACF,EAEJ,EAKFe,EAAAA,kBAAAA,IAACO,EAAAA,YAAA,CACC,QAASR,EACT,MAAOL,EACP,OAAAL,EACA,aAAcC,EACd,YAAAN,EACA,kBAAmBa,EACnB,aAAAZ,EACA,MAAAR,CAAA,CAAA,CAGN,CAEA,MAAMwB,EAAe,CAAC,CAAE,KAAAzB,CAAA,IACtBwB,EAAAA,kBAAAA,IAAC,MAAA,CAAI,QAAQ,YAAY,MAAOxB,EAAM,OAAQA,EAC5C,SAAAwB,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,mJAAA,CACJ,EACF"}
+{"version":3,"file":"MenuTrigger.cjs.js","sources":["../../../src/components/Menu/MenuTrigger.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useMemo, useRef, useState } from \"react\";\n\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { PopoverMenu } from \"./PopoverMenu\";\n\nimport \"./MenuTrigger.css\";\nimport \"./Menu.css\";\n\nexport interface MenuTriggerProps {\n  disabled?: boolean;\n  isOpen?: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n}\n\nexport interface MenuProps {\n  /** Custom trigger component. If not provided, defaults to ellipsis icon.\n   * - @prop triggerProps {@link TriggerProps}\n   */\n  renderTrigger?: (triggerProps: MenuTriggerProps) => ReactNode;\n\n  /** Size of the trigger icon\n   * @default 24\n   */\n  size?: number;\n\n  /** Title of the parent menu */\n  title?: string;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /** Callback when the menu closes */\n  onClose?: () => void;\n\n  /** Test ID for the trigger button */\n  triggerTestId?: string;\n\n  /** Test ID for the menu */\n  menuTestId?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange?: (key: string) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n}\n\n/**\n * An uncontrolled component that displays either a popover menu or an action menu\n * depending on the screen size when the menu trigger is pressed.\n *\n * API:\n *  - {@link MenuProps}\n */\nexport function MenuTrigger({\n  renderTrigger,\n  size = 24,\n  title,\n  items,\n  disabled,\n  onClose,\n  triggerTestId = \"MenuTrigger-Trigger\",\n  menuTestId,\n  onSelectionChange,\n  selectedKey,\n  disabledKeys,\n}: MenuProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n  const [isOpen, setIsOpen] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const menuItems = useMemo(\n    () => items.map((item) => ({ ...item, id: item.key })),\n    [items]\n  );\n\n  const handleSelectionChange = (key: string) => {\n    onSelectionChange?.(key);\n    setIsOpen(false);\n  };\n\n  const triggerButton = renderTrigger ? (\n    renderTrigger({\n      isOpen,\n      disabled,\n      setIsOpen,\n    })\n  ) : (\n    <button\n      data-testid={triggerTestId}\n      disabled={disabled}\n      className=\"proton-MenuTrigger__button\"\n      ref={triggerRef}\n      onClick={() => setIsOpen(!isOpen)}\n      type=\"button\"\n    >\n      <EllipsisIcon size={size} />\n    </button>\n  );\n\n  if (isMobile) {\n    return (\n      <>\n        {triggerButton}\n        {isOpen && (\n          <ActionMenu\n            actions={menuItems}\n            title={title}\n            isOpen={isOpen}\n            onClose={() => {\n              setIsOpen(false);\n              onClose?.();\n            }}\n            showCancel\n            data-testid={menuTestId}\n            selectionMode=\"single\"\n            onSelectionChange={(keys) => {\n              const nextKey = Array.from(keys)[0];\n              if (nextKey) handleSelectionChange(nextKey as string);\n            }}\n            selectedKeys={selectedKey ? [selectedKey] : undefined}\n            disabledKeys={disabledKeys}\n          />\n        )}\n      </>\n    );\n  }\n\n  return (\n    <PopoverMenu\n      trigger={triggerButton}\n      items={menuItems}\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      selectedKey={selectedKey}\n      onSelectionChange={handleSelectionChange}\n      disabledKeys={disabledKeys}\n      title={title}\n    />\n  );\n}\n\nconst EllipsisIcon = ({ size }: { size: number }) => (\n  <svg viewBox=\"0 0 24 24\" width={size} height={size}>\n    <path\n      fill=\"currentColor\"\n      d=\"M4 14c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\n    />\n  </svg>\n);\n"],"names":["MenuTrigger","renderTrigger","size","title","items","disabled","onClose","triggerTestId","menuTestId","onSelectionChange","selectedKey","disabledKeys","isMobile","useBreakpoint","BREAKPOINTS","isOpen","setIsOpen","useState","triggerRef","useRef","menuItems","useMemo","item","handleSelectionChange","key","triggerButton","jsx","EllipsisIcon","jsxs","Fragment","ActionMenu","keys","nextKey","PopoverMenu"],"mappings":"qZAoEO,SAASA,EAAY,CAC1B,cAAAC,EACA,KAAAC,EAAO,GACP,MAAAC,EACA,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,cAAAC,EAAgB,sBAChB,WAAAC,EACA,kBAAAC,EACA,YAAAC,EACA,aAAAC,CACF,EAAc,CACN,MAAAC,EAAWC,EAAAA,cAAcC,EAAA,YAAY,KAAK,EAC1C,CAACC,EAAQC,CAAS,EAAIC,WAAS,EAAK,EACpCC,EAAaC,SAA0B,IAAI,EAE3CC,EAAYC,EAAA,QAChB,IAAMjB,EAAM,IAAKkB,IAAU,CAAE,GAAGA,EAAM,GAAIA,EAAK,GAAA,EAAM,EACrD,CAAClB,CAAK,CAAA,EAGFmB,EAAyBC,GAAgB,CAC7Cf,GAAA,MAAAA,EAAoBe,GACpBR,EAAU,EAAK,CAAA,EAGXS,EAAgBxB,EACpBA,EAAc,CACZ,OAAAc,EACA,SAAAV,EACA,UAAAW,CACD,CAAA,EAEDU,EAAA,kBAAA,IAAC,SAAA,CACC,cAAanB,EACb,SAAAF,EACA,UAAU,6BACV,IAAKa,EACL,QAAS,IAAMF,EAAU,CAACD,CAAM,EAChC,KAAK,SAEL,SAAAW,EAAA,kBAAA,IAACC,GAAa,KAAAzB,CAAY,CAAA,CAAA,CAAA,EAI9B,OAAIU,EAGGgB,EAAA,kBAAA,KAAAC,6BAAA,CAAA,SAAA,CAAAJ,EACAV,GACCW,EAAA,kBAAA,IAACI,EAAA,WAAA,CACC,QAASV,EACT,MAAAjB,EACA,OAAAY,EACA,QAAS,IAAM,CACbC,EAAU,EAAK,EACLV,GAAA,MAAAA,GACZ,EACA,WAAU,GACV,cAAaE,EACb,cAAc,SACd,kBAAoBuB,GAAS,CAC3B,MAAMC,EAAU,MAAM,KAAKD,CAAI,EAAE,CAAC,EAC9BC,KAA+BA,CAAiB,CACtD,EACA,aAActB,EAAc,CAACA,CAAW,EAAI,OAC5C,aAAAC,CAAA,CACF,CAEJ,CAAA,CAAA,EAKFe,EAAA,kBAAA,IAACO,EAAA,YAAA,CACC,QAASR,EACT,MAAOL,EACP,OAAAL,EACA,aAAcC,EACd,YAAAN,EACA,kBAAmBa,EACnB,aAAAZ,EACA,MAAAR,CAAA,CAAA,CAGN,CAEA,MAAMwB,EAAe,CAAC,CAAE,KAAAzB,CACtB,IAAAwB,EAAA,kBAAA,IAAC,MAAI,CAAA,QAAQ,YAAY,MAAOxB,EAAM,OAAQA,EAC5C,SAAAwB,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,mJAAA,CACJ,EACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"MenuTrigger.es.js","sources":["../../../src/components/Menu/MenuTrigger.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useMemo, useRef, useState } from \"react\";\n\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { PopoverMenu } from \"./PopoverMenu\";\n\nimport \"./MenuTrigger.css\";\nimport \"./Menu.css\";\n\nexport interface MenuTriggerProps {\n  disabled?: boolean;\n  isOpen?: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n}\n\nexport interface MenuProps {\n  /** Custom trigger component. If not provided, defaults to ellipsis icon.\n   * - @prop triggerProps {@link TriggerProps}\n   */\n  renderTrigger?: (triggerProps: MenuTriggerProps) => ReactNode;\n\n  /** Size of the trigger icon\n   * @default 24\n   */\n  size?: number;\n\n  /** Title of the parent menu */\n  title?: string;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /** Callback when the menu closes */\n  onClose?: () => void;\n\n  /** Test ID for the trigger button */\n  triggerTestId?: string;\n\n  /** Test ID for the menu */\n  menuTestId?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange?: (key: string) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n}\n\n/**\n * An uncontrolled component that displays either a popover menu or an action menu\n * depending on the screen size when the menu trigger is pressed.\n *\n * API:\n *  - {@link MenuProps}\n */\nexport function MenuTrigger({\n  renderTrigger,\n  size = 24,\n  title,\n  items,\n  disabled,\n  onClose,\n  triggerTestId = \"MenuTrigger-Trigger\",\n  menuTestId,\n  onSelectionChange,\n  selectedKey,\n  disabledKeys,\n}: MenuProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n  const [isOpen, setIsOpen] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const menuItems = useMemo(\n    () => items.map((item) => ({ ...item, id: item.key })),\n    [items]\n  );\n\n  const handleSelectionChange = (key: string) => {\n    onSelectionChange?.(key);\n    setIsOpen(false);\n  };\n\n  const triggerButton = renderTrigger ? (\n    renderTrigger({\n      isOpen,\n      disabled,\n      setIsOpen,\n    })\n  ) : (\n    <button\n      data-testid={triggerTestId}\n      disabled={disabled}\n      className=\"proton-MenuTrigger__button\"\n      ref={triggerRef}\n      onClick={() => setIsOpen(!isOpen)}\n      type=\"button\"\n    >\n      <EllipsisIcon size={size} />\n    </button>\n  );\n\n  if (isMobile) {\n    return (\n      <>\n        {triggerButton}\n        {isOpen && (\n          <ActionMenu\n            actions={menuItems}\n            title={title}\n            isOpen={isOpen}\n            onClose={() => {\n              setIsOpen(false);\n              onClose?.();\n            }}\n            showCancel\n            data-testid={menuTestId}\n            selectionMode=\"single\"\n            onSelectionChange={(keys) => {\n              const nextKey = Array.from(keys)[0];\n              if (nextKey) handleSelectionChange(nextKey as string);\n            }}\n            selectedKeys={selectedKey ? [selectedKey] : undefined}\n            disabledKeys={disabledKeys}\n          />\n        )}\n      </>\n    );\n  }\n\n  return (\n    <PopoverMenu\n      trigger={triggerButton}\n      items={menuItems}\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      selectedKey={selectedKey}\n      onSelectionChange={handleSelectionChange}\n      disabledKeys={disabledKeys}\n      title={title}\n    />\n  );\n}\n\nconst EllipsisIcon = ({ size }: { size: number }) => (\n  <svg viewBox=\"0 0 24 24\" width={size} height={size}>\n    <path\n      fill=\"currentColor\"\n      d=\"M4 14c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\n    />\n  </svg>\n);\n"],"names":["MenuTrigger","renderTrigger","size","title","items","disabled","onClose","triggerTestId","menuTestId","onSelectionChange","selectedKey","disabledKeys","isMobile","useBreakpoint","BREAKPOINTS","isOpen","setIsOpen","useState","triggerRef","useRef","menuItems","useMemo","item","handleSelectionChange","key","triggerButton","jsx","EllipsisIcon","jsxs","Fragment","ActionMenu","keys","nextKey","PopoverMenu"],"mappings":";;;;;;;;AAoEO,SAASA,EAAY;AAAA,EAC1B,eAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AACF,GAAc;AACZ,QAAMC,IAAWC,EAAcC,EAAY,KAAK,GAC1C,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAaC,EAA0B,IAAI,GAE3CC,IAAYC;AAAA,IAChB,MAAMjB,EAAM,IAAI,CAACkB,OAAU,EAAE,GAAGA,GAAM,IAAIA,EAAK,IAAA,EAAM;AAAA,IACrD,CAAClB,CAAK;AAAA,EAAA,GAGFmB,IAAwB,CAACC,MAAgB;AAC7C,IAAAf,KAAA,QAAAA,EAAoBe,IACpBR,EAAU,EAAK;AAAA,EACjB,GAEMS,IAAgBxB,IACpBA,EAAc;AAAA,IACZ,QAAAc;AAAA,IACA,UAAAV;AAAA,IACA,WAAAW;AAAA,EAAA,CACD,IAEDU,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAanB;AAAA,MACb,UAAAF;AAAA,MACA,WAAU;AAAA,MACV,KAAKa;AAAA,MACL,SAAS,MAAMF,EAAU,CAACD,CAAM;AAAA,MAChC,MAAK;AAAA,MAEL,UAAAW,gBAAAA,EAAAA,IAACC,KAAa,MAAAzB,EAAA,CAAY;AAAA,IAAA;AAAA,EAAA;AAI9B,SAAIU,IAEAgB,gBAAAA,EAAAA,KAAAC,YAAA,EACG,UAAA;AAAA,IAAAJ;AAAA,IACAV,KACCW,gBAAAA,EAAAA;AAAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAASV;AAAA,QACT,OAAAjB;AAAA,QACA,QAAAY;AAAA,QACA,SAAS,MAAM;AACb,UAAAC,EAAU,EAAK,GACfV,KAAA,QAAAA;AAAA,QACF;AAAA,QACA,YAAU;AAAA,QACV,eAAaE;AAAA,QACb,eAAc;AAAA,QACd,mBAAmB,CAACuB,MAAS;AAC3B,gBAAMC,IAAU,MAAM,KAAKD,CAAI,EAAE,CAAC;AAClC,UAAIC,OAA+BA,CAAiB;AAAA,QACtD;AAAA,QACA,cAActB,IAAc,CAACA,CAAW,IAAI;AAAA,QAC5C,cAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ,IAKFe,gBAAAA,EAAAA;AAAAA,IAACO;AAAA,IAAA;AAAA,MACC,SAASR;AAAA,MACT,OAAOL;AAAA,MACP,QAAAL;AAAA,MACA,cAAcC;AAAA,MACd,aAAAN;AAAA,MACA,mBAAmBa;AAAA,MACnB,cAAAZ;AAAA,MACA,OAAAR;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,MAAMwB,IAAe,CAAC,EAAE,MAAAzB,EAAA,MACtBwB,gBAAAA,EAAAA,IAAC,OAAA,EAAI,SAAQ,aAAY,OAAOxB,GAAM,QAAQA,GAC5C,UAAAwB,gBAAAA,EAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,GAAE;AAAA,EAAA;AACJ,GACF;"}
+{"version":3,"file":"MenuTrigger.es.js","sources":["../../../src/components/Menu/MenuTrigger.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, useMemo, useRef, useState } from \"react\";\n\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\nimport { PopoverMenu } from \"./PopoverMenu\";\n\nimport \"./MenuTrigger.css\";\nimport \"./Menu.css\";\n\nexport interface MenuTriggerProps {\n  disabled?: boolean;\n  isOpen?: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n}\n\nexport interface MenuProps {\n  /** Custom trigger component. If not provided, defaults to ellipsis icon.\n   * - @prop triggerProps {@link TriggerProps}\n   */\n  renderTrigger?: (triggerProps: MenuTriggerProps) => ReactNode;\n\n  /** Size of the trigger icon\n   * @default 24\n   */\n  size?: number;\n\n  /** Title of the parent menu */\n  title?: string;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /** Callback when the menu closes */\n  onClose?: () => void;\n\n  /** Test ID for the trigger button */\n  triggerTestId?: string;\n\n  /** Test ID for the menu */\n  menuTestId?: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange?: (key: string) => void;\n\n  /** The key of the selected item */\n  selectedKey?: string;\n\n  /** The keys of the disabled items */\n  disabledKeys?: string[];\n}\n\n/**\n * An uncontrolled component that displays either a popover menu or an action menu\n * depending on the screen size when the menu trigger is pressed.\n *\n * API:\n *  - {@link MenuProps}\n */\nexport function MenuTrigger({\n  renderTrigger,\n  size = 24,\n  title,\n  items,\n  disabled,\n  onClose,\n  triggerTestId = \"MenuTrigger-Trigger\",\n  menuTestId,\n  onSelectionChange,\n  selectedKey,\n  disabledKeys,\n}: MenuProps) {\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\n  const [isOpen, setIsOpen] = useState(false);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n\n  const menuItems = useMemo(\n    () => items.map((item) => ({ ...item, id: item.key })),\n    [items]\n  );\n\n  const handleSelectionChange = (key: string) => {\n    onSelectionChange?.(key);\n    setIsOpen(false);\n  };\n\n  const triggerButton = renderTrigger ? (\n    renderTrigger({\n      isOpen,\n      disabled,\n      setIsOpen,\n    })\n  ) : (\n    <button\n      data-testid={triggerTestId}\n      disabled={disabled}\n      className=\"proton-MenuTrigger__button\"\n      ref={triggerRef}\n      onClick={() => setIsOpen(!isOpen)}\n      type=\"button\"\n    >\n      <EllipsisIcon size={size} />\n    </button>\n  );\n\n  if (isMobile) {\n    return (\n      <>\n        {triggerButton}\n        {isOpen && (\n          <ActionMenu\n            actions={menuItems}\n            title={title}\n            isOpen={isOpen}\n            onClose={() => {\n              setIsOpen(false);\n              onClose?.();\n            }}\n            showCancel\n            data-testid={menuTestId}\n            selectionMode=\"single\"\n            onSelectionChange={(keys) => {\n              const nextKey = Array.from(keys)[0];\n              if (nextKey) handleSelectionChange(nextKey as string);\n            }}\n            selectedKeys={selectedKey ? [selectedKey] : undefined}\n            disabledKeys={disabledKeys}\n          />\n        )}\n      </>\n    );\n  }\n\n  return (\n    <PopoverMenu\n      trigger={triggerButton}\n      items={menuItems}\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      selectedKey={selectedKey}\n      onSelectionChange={handleSelectionChange}\n      disabledKeys={disabledKeys}\n      title={title}\n    />\n  );\n}\n\nconst EllipsisIcon = ({ size }: { size: number }) => (\n  <svg viewBox=\"0 0 24 24\" width={size} height={size}>\n    <path\n      fill=\"currentColor\"\n      d=\"M4 14c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\n    />\n  </svg>\n);\n"],"names":["MenuTrigger","renderTrigger","size","title","items","disabled","onClose","triggerTestId","menuTestId","onSelectionChange","selectedKey","disabledKeys","isMobile","useBreakpoint","BREAKPOINTS","isOpen","setIsOpen","useState","triggerRef","useRef","menuItems","useMemo","item","handleSelectionChange","key","triggerButton","jsx","EllipsisIcon","jsxs","Fragment","ActionMenu","keys","nextKey","PopoverMenu"],"mappings":";;;;;;;;AAoEO,SAASA,EAAY;AAAA,EAC1B,eAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AACF,GAAc;AACN,QAAAC,IAAWC,EAAcC,EAAY,KAAK,GAC1C,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAaC,EAA0B,IAAI,GAE3CC,IAAYC;AAAA,IAChB,MAAMjB,EAAM,IAAI,CAACkB,OAAU,EAAE,GAAGA,GAAM,IAAIA,EAAK,IAAA,EAAM;AAAA,IACrD,CAAClB,CAAK;AAAA,EAAA,GAGFmB,IAAwB,CAACC,MAAgB;AAC7C,IAAAf,KAAA,QAAAA,EAAoBe,IACpBR,EAAU,EAAK;AAAA,EAAA,GAGXS,IAAgBxB,IACpBA,EAAc;AAAA,IACZ,QAAAc;AAAA,IACA,UAAAV;AAAA,IACA,WAAAW;AAAA,EACD,CAAA,IAEDU,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAanB;AAAA,MACb,UAAAF;AAAA,MACA,WAAU;AAAA,MACV,KAAKa;AAAA,MACL,SAAS,MAAMF,EAAU,CAACD,CAAM;AAAA,MAChC,MAAK;AAAA,MAEL,UAAAW,gBAAAA,EAAA,IAACC,KAAa,MAAAzB,EAAY,CAAA;AAAA,IAAA;AAAA,EAAA;AAI9B,SAAIU,IAGGgB,gBAAAA,EAAA,KAAAC,YAAA,EAAA,UAAA;AAAA,IAAAJ;AAAA,IACAV,KACCW,gBAAAA,EAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAASV;AAAA,QACT,OAAAjB;AAAA,QACA,QAAAY;AAAA,QACA,SAAS,MAAM;AACb,UAAAC,EAAU,EAAK,GACLV,KAAA,QAAAA;AAAA,QACZ;AAAA,QACA,YAAU;AAAA,QACV,eAAaE;AAAA,QACb,eAAc;AAAA,QACd,mBAAmB,CAACuB,MAAS;AAC3B,gBAAMC,IAAU,MAAM,KAAKD,CAAI,EAAE,CAAC;AAC9B,UAAAC,OAA+BA,CAAiB;AAAA,QACtD;AAAA,QACA,cAActB,IAAc,CAACA,CAAW,IAAI;AAAA,QAC5C,cAAAC;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA,IAKFe,gBAAAA,EAAA;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,SAASR;AAAA,MACT,OAAOL;AAAA,MACP,QAAAL;AAAA,MACA,cAAcC;AAAA,MACd,aAAAN;AAAA,MACA,mBAAmBa;AAAA,MACnB,cAAAZ;AAAA,MACA,OAAAR;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,MAAMwB,IAAe,CAAC,EAAE,MAAAzB,EACtB,MAAAwB,gBAAAA,EAAA,IAAC,OAAI,EAAA,SAAQ,aAAY,OAAOxB,GAAM,QAAQA,GAC5C,UAAAwB,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,GAAE;AAAA,EAAA;AACJ,GACF;"}

package/dist/components/Menu/PopoverMenu.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../node_modules/react/jsx-runtime.cjs.js"),s=require("radix-ui"),h=require("../ThemeProvider.cjs.js"),u=require("../../utils/string.cjs.js");function R({trigger:m,items:p,isOpen:a,onOpenChange:n,selectedKey:j,onSelectionChange:l,disabledKeys:M,title:x}){const{className:_,style:g}=h.useTheme();function c(d){const{item:e,disabledKeys:t,onClose:o}=d;return e.children&&e.children.length>0?r.jsxRuntimeExports.jsxs(s.DropdownMenu.Sub,{children:[r.jsxRuntimeExports.jsxs(s.DropdownMenu.SubTrigger,{className:u.csx("proton-Menu__item","proton-MenuTrigger__menu-item"),children:[e.label,r.jsxRuntimeExports.jsx("svg",{className:"proton-MenuTrigger__chevron",viewBox:"0 0 256 256",width:16,height:12,children:r.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17"})})]}),r.jsxRuntimeExports.jsx(s.DropdownMenu.SubContent,{sideOffset:8,"data-has-submenu":"true",className:u.csx("proton-Menu","proton-MenuTrigger__menu"),children:e.children.map(i=>c({item:i,disabledKeys:t,onClose:o}))})]},e.key):r.jsxRuntimeExports.jsxs(s.DropdownMenu.Item,{className:u.csx("proton-Menu__item","proton-MenuTrigger__menu-item"),"aria-selected":j===e.key,disabled:t==null?void 0:t.includes(e.key),onSelect:()=>{var i;(i=e.onAction)==null||i.call(e,e.key),l==null||l(e.key),o==null||o()},children:[r.jsxRuntimeExports.jsx("span",{className:"proton-MenuTrigger__label",style:{gridArea:"label"},children:e.label}),e.description&&r.jsxRuntimeExports.jsx("span",{className:"proton-MenuTrigger__description",style:{gridArea:"desc"},children:e.description})]},e.key)}return r.jsxRuntimeExports.jsxs(s.DropdownMenu.Root,{open:a,onOpenChange:n,children:[r.jsxRuntimeExports.jsx(s.DropdownMenu.Trigger,{asChild:!0,children:m}),r.jsxRuntimeExports.jsx(s.DropdownMenu.Portal,{children:r.jsxRuntimeExports.jsxs(s.DropdownMenu.Content,{className:u.csx("proton-Menu","proton-MenuTrigger__menu",_),style:g,children:[x&&r.jsxRuntimeExports.jsx(s.DropdownMenu.Label,{className:"proton-MenuTrigger__menu-header",children:x}),p.map(d=>c({item:d,disabledKeys:M,onClose:()=>n==null?void 0:n(!1)}))]})})]})}exports.PopoverMenu=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../node_modules/react/jsx-runtime.cjs.js"),s=require("radix-ui"),R=require("../ThemeProvider.cjs.js"),u=require("../../utils/string.cjs.js");function b({trigger:p,items:j,isOpen:M,onOpenChange:n,selectedKey:_,onSelectionChange:l,disabledKeys:g,title:c}){const{className:x,style:m}=R.useTheme();function a(d){const{item:e,className:h,style:y,disabledKeys:t,onClose:o}=d;return e.children&&e.children.length>0?r.jsxRuntimeExports.jsxs(s.DropdownMenu.Sub,{children:[r.jsxRuntimeExports.jsxs(s.DropdownMenu.SubTrigger,{className:u.csx("proton-Menu__item","proton-MenuTrigger__menu-item"),children:[e.label,r.jsxRuntimeExports.jsx("svg",{className:"proton-MenuTrigger__chevron",viewBox:"0 0 256 256",width:16,height:12,children:r.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17"})})]}),r.jsxRuntimeExports.jsx(s.DropdownMenu.SubContent,{sideOffset:8,"data-has-submenu":"true",className:u.csx("proton-Menu","proton-MenuTrigger__menu"),children:e.children.map(i=>a({item:i,className:h,style:y,disabledKeys:t,onClose:o}))})]},e.key):r.jsxRuntimeExports.jsxs(s.DropdownMenu.Item,{className:u.csx("proton-Menu__item","proton-MenuTrigger__menu-item"),"aria-selected":_===e.key,disabled:t==null?void 0:t.includes(e.key),onSelect:()=>{var i;(i=e.onAction)==null||i.call(e,e.key),l==null||l(e.key),o==null||o()},children:[r.jsxRuntimeExports.jsx("span",{className:"proton-MenuTrigger__label",style:{gridArea:"label"},children:e.label}),e.description&&r.jsxRuntimeExports.jsx("span",{className:"proton-MenuTrigger__description",style:{gridArea:"desc"},children:e.description})]},e.key)}return r.jsxRuntimeExports.jsxs(s.DropdownMenu.Root,{open:M,onOpenChange:n,children:[r.jsxRuntimeExports.jsx(s.DropdownMenu.Trigger,{asChild:!0,children:p}),r.jsxRuntimeExports.jsx(s.DropdownMenu.Portal,{children:r.jsxRuntimeExports.jsxs(s.DropdownMenu.Content,{className:u.csx("proton-Menu","proton-MenuTrigger__menu",x),style:m,children:[c&&r.jsxRuntimeExports.jsx(s.DropdownMenu.Label,{className:"proton-MenuTrigger__menu-header",children:c}),j.map(d=>a({item:d,className:x,style:m,disabledKeys:g,onClose:()=>n==null?void 0:n(!1)}))]})})]})}exports.PopoverMenu=b;
 //# sourceMappingURL=PopoverMenu.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverMenu.cjs.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\n\nexport interface PopoverMenuProps {\n  /** The trigger component */\n  trigger: React.ReactNode;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is open */\n  isOpen: boolean;\n\n  /** Callback when the menu is opened or closed */\n  onOpenChange: (open: boolean) => void;\n\n  /** The key of the selected item */\n  selectedKey: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange: (key: string) => void;\n\n  /** The keys of the disabled items */\n  disabledKeys: string[];\n\n  /** The title of the menu */\n  title: string;\n}\n\n/**\n * A component that displays a popover menu.\n *\n * API:\n *  - {@link PopoverMenuProps}\n */\nexport function PopoverMenu({\n  trigger,\n  items,\n  isOpen,\n  onOpenChange,\n  selectedKey,\n  onSelectionChange,\n  disabledKeys,\n  title,\n}: PopoverMenuProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  function renderMenuItem(props) {\n    const { item, className, style, disabledKeys, onClose } = props;\n\n    if (item.children && item.children.length > 0) {\n      return (\n        <RadixDropdownMenu.Sub key={item.key}>\n          <RadixDropdownMenu.SubTrigger\n            className={csx(\n              \"proton-Menu__item\",\n              \"proton-MenuTrigger__menu-item\"\n            )}\n          >\n            {item.label}\n            <svg\n              className=\"proton-MenuTrigger__chevron\"\n              viewBox=\"0 0 256 256\"\n              width={16}\n              height={12}\n            >\n              <path\n                fill=\"currentColor\"\n                d=\"m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17\"\n              />\n            </svg>\n          </RadixDropdownMenu.SubTrigger>\n\n          <RadixDropdownMenu.SubContent\n            sideOffset={8}\n            data-has-submenu=\"true\"\n            className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\")}\n          >\n            {item.children.map((child) =>\n              renderMenuItem({\n                item: child,\n                className,\n                style,\n                disabledKeys,\n                onClose,\n              })\n            )}\n          </RadixDropdownMenu.SubContent>\n        </RadixDropdownMenu.Sub>\n      );\n    } else {\n      return (\n        <RadixDropdownMenu.Item\n          className={csx(\"proton-Menu__item\", \"proton-MenuTrigger__menu-item\")}\n          key={item.key}\n          aria-selected={selectedKey === item.key}\n          disabled={disabledKeys?.includes(item.key)}\n          onSelect={() => {\n            item.onAction?.(item.key);\n            onSelectionChange?.(item.key);\n            onClose?.();\n          }}\n        >\n          <span\n            className=\"proton-MenuTrigger__label\"\n            style={{ gridArea: \"label\" }}\n          >\n            {item.label}\n          </span>\n          {item.description && (\n            <span\n              className=\"proton-MenuTrigger__description\"\n              style={{ gridArea: \"desc\" }}\n            >\n              {item.description}\n            </span>\n          )}\n        </RadixDropdownMenu.Item>\n      );\n    }\n  }\n\n  return (\n    <RadixDropdownMenu.Root open={isOpen} onOpenChange={onOpenChange}>\n      <RadixDropdownMenu.Trigger asChild>{trigger}</RadixDropdownMenu.Trigger>\n      <RadixDropdownMenu.Portal>\n        <RadixDropdownMenu.Content\n          className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\", themeClass)}\n          style={themeStyle as React.CSSProperties}\n        >\n          {title && (\n            <RadixDropdownMenu.Label className=\"proton-MenuTrigger__menu-header\">\n              {title}\n            </RadixDropdownMenu.Label>\n          )}\n          {items.map((item) =>\n            renderMenuItem({\n              item,\n              className: themeClass,\n              style: themeStyle as React.CSSProperties,\n              disabledKeys,\n              onClose: () => onOpenChange?.(false),\n            })\n          )}\n        </RadixDropdownMenu.Content>\n      </RadixDropdownMenu.Portal>\n    </RadixDropdownMenu.Root>\n  );\n}\n"],"names":["PopoverMenu","trigger","items","isOpen","onOpenChange","selectedKey","onSelectionChange","disabledKeys","title","themeClass","themeStyle","useTheme","renderMenuItem","props","item","onClose","jsxs","RadixDropdownMenu","csx","jsx","child","_a"],"mappings":"iPAuCO,SAASA,EAAY,CAC1B,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,MAAAC,CACF,EAAqB,CACnB,KAAM,CAAE,UAAWC,EAAY,MAAOC,CAAA,EAAeC,EAAAA,SAAA,EAErD,SAASC,EAAeC,EAAO,CAC7B,KAAM,CAAE,KAAAC,EAAwB,aAAAP,EAAc,QAAAQ,GAAYF,EAE1D,OAAIC,EAAK,UAAYA,EAAK,SAAS,OAAS,EAExCE,yBAACC,EAAAA,aAAkB,IAAlB,CACC,SAAA,CAAAD,EAAAA,kBAAAA,KAACC,EAAAA,aAAkB,WAAlB,CACC,UAAWC,EAAAA,IACT,oBACA,+BAAA,EAGD,SAAA,CAAAJ,EAAK,MACNK,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAU,8BACV,QAAQ,cACR,MAAO,GACP,OAAQ,GAER,SAAAA,EAAAA,kBAAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wGAAA,CAAA,CACJ,CAAA,CACF,CAAA,CAAA,EAGFA,EAAAA,kBAAAA,IAACF,EAAAA,aAAkB,WAAlB,CACC,WAAY,EACZ,mBAAiB,OACjB,UAAWC,EAAAA,IAAI,cAAe,0BAA0B,EAEvD,WAAK,SAAS,IAAKE,GAClBR,EAAe,CACb,KAAMQ,EAGN,aAAAb,EACA,QAAAQ,CAAA,CACD,CAAA,CACH,CAAA,CACF,CAAA,EAnC0BD,EAAK,GAoCjC,EAIAE,EAAAA,kBAAAA,KAACC,EAAAA,aAAkB,KAAlB,CACC,UAAWC,EAAAA,IAAI,oBAAqB,+BAA+B,EAEnE,gBAAeb,IAAgBS,EAAK,IACpC,SAAUP,GAAAA,YAAAA,EAAc,SAASO,EAAK,KACtC,SAAU,IAAM,QACdO,EAAAP,EAAK,WAAL,MAAAO,EAAA,KAAAP,EAAgBA,EAAK,KACrBR,GAAA,MAAAA,EAAoBQ,EAAK,KACzBC,GAAA,MAAAA,GACF,EAEA,SAAA,CAAAI,EAAAA,kBAAAA,IAAC,OAAA,CACC,UAAU,4BACV,MAAO,CAAE,SAAU,OAAA,EAElB,SAAAL,EAAK,KAAA,CAAA,EAEPA,EAAK,aACJK,EAAAA,kBAAAA,IAAC,OAAA,CACC,UAAU,kCACV,MAAO,CAAE,SAAU,MAAA,EAElB,SAAAL,EAAK,WAAA,CAAA,CACR,CAAA,EArBGA,EAAK,GAAA,CA0BlB,CAEA,gCACGG,EAAAA,aAAkB,KAAlB,CAAuB,KAAMd,EAAQ,aAAAC,EACpC,SAAA,CAAAe,EAAAA,kBAAAA,IAACF,EAAAA,aAAkB,QAAlB,CAA0B,QAAO,GAAE,SAAAhB,EAAQ,EAC5CkB,EAAAA,kBAAAA,IAACF,EAAAA,aAAkB,OAAlB,CACC,SAAAD,EAAAA,kBAAAA,KAACC,EAAAA,aAAkB,QAAlB,CACC,UAAWC,EAAAA,IAAI,cAAe,2BAA4BT,CAAU,EACpE,MAAOC,EAEN,SAAA,CAAAF,2BACES,EAAAA,aAAkB,MAAlB,CAAwB,UAAU,kCAChC,SAAAT,EACH,EAEDN,EAAM,IAAKY,GACVF,EAAe,CACb,KAAAE,EAGA,aAAAP,EACA,QAAS,IAAMH,GAAA,YAAAA,EAAe,GAAK,CACpC,CAAA,CACH,CAAA,CAAA,CACF,CACF,CAAA,EACF,CAEJ"}
+{"version":3,"file":"PopoverMenu.cjs.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\n\nexport interface PopoverMenuProps {\n  /** The trigger component */\n  trigger: React.ReactNode;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is open */\n  isOpen: boolean;\n\n  /** Callback when the menu is opened or closed */\n  onOpenChange: (open: boolean) => void;\n\n  /** The key of the selected item */\n  selectedKey: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange: (key: string) => void;\n\n  /** The keys of the disabled items */\n  disabledKeys: string[];\n\n  /** The title of the menu */\n  title: string;\n}\n\n/**\n * A component that displays a popover menu.\n *\n * API:\n *  - {@link PopoverMenuProps}\n */\nexport function PopoverMenu({\n  trigger,\n  items,\n  isOpen,\n  onOpenChange,\n  selectedKey,\n  onSelectionChange,\n  disabledKeys,\n  title,\n}: PopoverMenuProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  function renderMenuItem(props) {\n    const { item, className, style, disabledKeys, onClose } = props;\n\n    if (item.children && item.children.length > 0) {\n      return (\n        <RadixDropdownMenu.Sub key={item.key}>\n          <RadixDropdownMenu.SubTrigger\n            className={csx(\n              \"proton-Menu__item\",\n              \"proton-MenuTrigger__menu-item\"\n            )}\n          >\n            {item.label}\n            <svg\n              className=\"proton-MenuTrigger__chevron\"\n              viewBox=\"0 0 256 256\"\n              width={16}\n              height={12}\n            >\n              <path\n                fill=\"currentColor\"\n                d=\"m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17\"\n              />\n            </svg>\n          </RadixDropdownMenu.SubTrigger>\n\n          <RadixDropdownMenu.SubContent\n            sideOffset={8}\n            data-has-submenu=\"true\"\n            className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\")}\n          >\n            {item.children.map((child) =>\n              renderMenuItem({\n                item: child,\n                className,\n                style,\n                disabledKeys,\n                onClose,\n              })\n            )}\n          </RadixDropdownMenu.SubContent>\n        </RadixDropdownMenu.Sub>\n      );\n    } else {\n      return (\n        <RadixDropdownMenu.Item\n          className={csx(\"proton-Menu__item\", \"proton-MenuTrigger__menu-item\")}\n          key={item.key}\n          aria-selected={selectedKey === item.key}\n          disabled={disabledKeys?.includes(item.key)}\n          onSelect={() => {\n            item.onAction?.(item.key);\n            onSelectionChange?.(item.key);\n            onClose?.();\n          }}\n        >\n          <span\n            className=\"proton-MenuTrigger__label\"\n            style={{ gridArea: \"label\" }}\n          >\n            {item.label}\n          </span>\n          {item.description && (\n            <span\n              className=\"proton-MenuTrigger__description\"\n              style={{ gridArea: \"desc\" }}\n            >\n              {item.description}\n            </span>\n          )}\n        </RadixDropdownMenu.Item>\n      );\n    }\n  }\n\n  return (\n    <RadixDropdownMenu.Root open={isOpen} onOpenChange={onOpenChange}>\n      <RadixDropdownMenu.Trigger asChild>{trigger}</RadixDropdownMenu.Trigger>\n      <RadixDropdownMenu.Portal>\n        <RadixDropdownMenu.Content\n          className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\", themeClass)}\n          style={themeStyle as React.CSSProperties}\n        >\n          {title && (\n            <RadixDropdownMenu.Label className=\"proton-MenuTrigger__menu-header\">\n              {title}\n            </RadixDropdownMenu.Label>\n          )}\n          {items.map((item) =>\n            renderMenuItem({\n              item,\n              className: themeClass,\n              style: themeStyle as React.CSSProperties,\n              disabledKeys,\n              onClose: () => onOpenChange?.(false),\n            })\n          )}\n        </RadixDropdownMenu.Content>\n      </RadixDropdownMenu.Portal>\n    </RadixDropdownMenu.Root>\n  );\n}\n"],"names":["PopoverMenu","trigger","items","isOpen","onOpenChange","selectedKey","onSelectionChange","disabledKeys","title","themeClass","themeStyle","useTheme","renderMenuItem","props","item","className","style","onClose","jsxs","RadixDropdownMenu","csx","jsx","child","_a"],"mappings":"iPAuCO,SAASA,EAAY,CAC1B,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,MAAAC,CACF,EAAqB,CACnB,KAAM,CAAE,UAAWC,EAAY,MAAOC,CAAA,EAAeC,EAAAA,WAErD,SAASC,EAAeC,EAAO,CAC7B,KAAM,CAAE,KAAAC,EAAM,UAAAC,EAAW,MAAAC,EAAO,aAAAT,EAAc,QAAAU,CAAY,EAAAJ,EAE1D,OAAIC,EAAK,UAAYA,EAAK,SAAS,OAAS,EAExCI,yBAACC,EAAAA,aAAkB,IAAlB,CACC,SAAA,CAAAD,EAAA,kBAAA,KAACC,EAAAA,aAAkB,WAAlB,CACC,UAAWC,EAAA,IACT,oBACA,+BACF,EAEC,SAAA,CAAKN,EAAA,MACNO,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,8BACV,QAAQ,cACR,MAAO,GACP,OAAQ,GAER,SAAAA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wGAAA,CACJ,CAAA,CACF,CAAA,CAAA,CACF,EAEAA,EAAA,kBAAA,IAACF,EAAAA,aAAkB,WAAlB,CACC,WAAY,EACZ,mBAAiB,OACjB,UAAWC,EAAAA,IAAI,cAAe,0BAA0B,EAEvD,WAAK,SAAS,IAAKE,GAClBV,EAAe,CACb,KAAMU,EACN,UAAAP,EACA,MAAAC,EACA,aAAAT,EACA,QAAAU,CAAA,CACD,CACH,CAAA,CACF,CAAA,GAnC0BH,EAAK,GAoCjC,EAIAI,EAAA,kBAAA,KAACC,EAAAA,aAAkB,KAAlB,CACC,UAAWC,EAAAA,IAAI,oBAAqB,+BAA+B,EAEnE,gBAAef,IAAgBS,EAAK,IACpC,SAAUP,GAAAA,YAAAA,EAAc,SAASO,EAAK,KACtC,SAAU,IAAM,QACTS,EAAAT,EAAA,WAAA,MAAAS,EAAA,KAAAT,EAAWA,EAAK,KACrBR,GAAA,MAAAA,EAAoBQ,EAAK,KACfG,GAAA,MAAAA,GACZ,EAEA,SAAA,CAAAI,EAAA,kBAAA,IAAC,OAAA,CACC,UAAU,4BACV,MAAO,CAAE,SAAU,OAAQ,EAE1B,SAAKP,EAAA,KAAA,CACR,EACCA,EAAK,aACJO,EAAA,kBAAA,IAAC,OAAA,CACC,UAAU,kCACV,MAAO,CAAE,SAAU,MAAO,EAEzB,SAAKP,EAAA,WAAA,CACR,CAAA,CAAA,EArBGA,EAAK,GAAA,CA0BlB,CAEA,gCACGK,EAAAA,aAAkB,KAAlB,CAAuB,KAAMhB,EAAQ,aAAAC,EACpC,SAAA,CAAAiB,EAAA,kBAAA,IAACF,EAAkB,aAAA,QAAlB,CAA0B,QAAO,GAAE,SAAQlB,EAAA,EAC5CoB,EAAAA,kBAAAA,IAACF,EAAkB,aAAA,OAAlB,CACC,SAAAD,EAAA,kBAAA,KAACC,EAAAA,aAAkB,QAAlB,CACC,UAAWC,EAAA,IAAI,cAAe,2BAA4BX,CAAU,EACpE,MAAOC,EAEN,SAAA,CAAAF,2BACEW,EAAAA,aAAkB,MAAlB,CAAwB,UAAU,kCAChC,SACHX,EAAA,EAEDN,EAAM,IAAKY,GACVF,EAAe,CACb,KAAAE,EACA,UAAWL,EACX,MAAOC,EACP,aAAAH,EACA,QAAS,IAAMH,GAAA,YAAAA,EAAe,GAAK,CACpC,CACH,CAAA,CAAA,CAAA,EAEJ,CACF,CAAA,CAAA,CAEJ"}

package/dist/components/Menu/PopoverMenu.es.js

@@ -1,20 +1,20 @@
 import { j as r } from "../../node_modules/react/jsx-runtime.es.js";
 import { DropdownMenu as s } from "radix-ui";
-import { useTheme as M } from "../ThemeProvider.es.js";
+import { useTheme as b } from "../ThemeProvider.es.js";
 import { csx as o } from "../../utils/string.es.js";
-function N({
-  trigger: d,
-  items: p,
-  isOpen: _,
+function v({
+  trigger: _,
+  items: h,
+  isOpen: x,
   onOpenChange: t,
-  selectedKey: h,
+  selectedKey: g,
   onSelectionChange: a,
-  disabledKeys: x,
-  title: u
+  disabledKeys: j,
+  title: c
 }) {
-  const { className: g, style: j } = M();
-  function c(m) {
-    const { item: e, disabledKeys: i, onClose: n } = m;
+  const { className: u, style: d } = b();
+  function p(m) {
+    const { item: e, className: M, style: y, disabledKeys: l, onClose: i } = m;
     return e.children && e.children.length > 0 ? /* @__PURE__ */ r.jsxs(s.Sub, { children: [
       /* @__PURE__ */ r.jsxs(
         s.SubTrigger,
@@ -51,10 +51,12 @@ function N({
           "data-has-submenu": "true",
           className: o("proton-Menu", "proton-MenuTrigger__menu"),
           children: e.children.map(
-            (l) => c({
-              item: l,
-              disabledKeys: i,
-              onClose: n
+            (n) => p({
+              item: n,
+              className: M,
+              style: y,
+              disabledKeys: l,
+              onClose: i
             })
           )
         }
@@ -63,11 +65,11 @@ function N({
       s.Item,
       {
         className: o("proton-Menu__item", "proton-MenuTrigger__menu-item"),
-        "aria-selected": h === e.key,
-        disabled: i == null ? void 0 : i.includes(e.key),
+        "aria-selected": g === e.key,
+        disabled: l == null ? void 0 : l.includes(e.key),
         onSelect: () => {
-          var l;
-          (l = e.onAction) == null || l.call(e, e.key), a == null || a(e.key), n == null || n();
+          var n;
+          (n = e.onAction) == null || n.call(e, e.key), a == null || a(e.key), i == null || i();
         },
         children: [
           /* @__PURE__ */ r.jsx(
@@ -91,19 +93,21 @@ function N({
       e.key
     );
   }
-  return /* @__PURE__ */ r.jsxs(s.Root, { open: _, onOpenChange: t, children: [
-    /* @__PURE__ */ r.jsx(s.Trigger, { asChild: !0, children: d }),
+  return /* @__PURE__ */ r.jsxs(s.Root, { open: x, onOpenChange: t, children: [
+    /* @__PURE__ */ r.jsx(s.Trigger, { asChild: !0, children: _ }),
     /* @__PURE__ */ r.jsx(s.Portal, { children: /* @__PURE__ */ r.jsxs(
       s.Content,
       {
-        className: o("proton-Menu", "proton-MenuTrigger__menu", g),
-        style: j,
+        className: o("proton-Menu", "proton-MenuTrigger__menu", u),
+        style: d,
         children: [
-          u && /* @__PURE__ */ r.jsx(s.Label, { className: "proton-MenuTrigger__menu-header", children: u }),
-          p.map(
-            (m) => c({
+          c && /* @__PURE__ */ r.jsx(s.Label, { className: "proton-MenuTrigger__menu-header", children: c }),
+          h.map(
+            (m) => p({
               item: m,
-              disabledKeys: x,
+              className: u,
+              style: d,
+              disabledKeys: j,
               onClose: () => t == null ? void 0 : t(!1)
             })
           )
@@ -113,6 +117,6 @@ function N({
   ] });
 }
 export {
-  N as PopoverMenu
+  v as PopoverMenu
 };
 //# sourceMappingURL=PopoverMenu.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverMenu.es.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\n\nexport interface PopoverMenuProps {\n  /** The trigger component */\n  trigger: React.ReactNode;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is open */\n  isOpen: boolean;\n\n  /** Callback when the menu is opened or closed */\n  onOpenChange: (open: boolean) => void;\n\n  /** The key of the selected item */\n  selectedKey: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange: (key: string) => void;\n\n  /** The keys of the disabled items */\n  disabledKeys: string[];\n\n  /** The title of the menu */\n  title: string;\n}\n\n/**\n * A component that displays a popover menu.\n *\n * API:\n *  - {@link PopoverMenuProps}\n */\nexport function PopoverMenu({\n  trigger,\n  items,\n  isOpen,\n  onOpenChange,\n  selectedKey,\n  onSelectionChange,\n  disabledKeys,\n  title,\n}: PopoverMenuProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  function renderMenuItem(props) {\n    const { item, className, style, disabledKeys, onClose } = props;\n\n    if (item.children && item.children.length > 0) {\n      return (\n        <RadixDropdownMenu.Sub key={item.key}>\n          <RadixDropdownMenu.SubTrigger\n            className={csx(\n              \"proton-Menu__item\",\n              \"proton-MenuTrigger__menu-item\"\n            )}\n          >\n            {item.label}\n            <svg\n              className=\"proton-MenuTrigger__chevron\"\n              viewBox=\"0 0 256 256\"\n              width={16}\n              height={12}\n            >\n              <path\n                fill=\"currentColor\"\n                d=\"m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17\"\n              />\n            </svg>\n          </RadixDropdownMenu.SubTrigger>\n\n          <RadixDropdownMenu.SubContent\n            sideOffset={8}\n            data-has-submenu=\"true\"\n            className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\")}\n          >\n            {item.children.map((child) =>\n              renderMenuItem({\n                item: child,\n                className,\n                style,\n                disabledKeys,\n                onClose,\n              })\n            )}\n          </RadixDropdownMenu.SubContent>\n        </RadixDropdownMenu.Sub>\n      );\n    } else {\n      return (\n        <RadixDropdownMenu.Item\n          className={csx(\"proton-Menu__item\", \"proton-MenuTrigger__menu-item\")}\n          key={item.key}\n          aria-selected={selectedKey === item.key}\n          disabled={disabledKeys?.includes(item.key)}\n          onSelect={() => {\n            item.onAction?.(item.key);\n            onSelectionChange?.(item.key);\n            onClose?.();\n          }}\n        >\n          <span\n            className=\"proton-MenuTrigger__label\"\n            style={{ gridArea: \"label\" }}\n          >\n            {item.label}\n          </span>\n          {item.description && (\n            <span\n              className=\"proton-MenuTrigger__description\"\n              style={{ gridArea: \"desc\" }}\n            >\n              {item.description}\n            </span>\n          )}\n        </RadixDropdownMenu.Item>\n      );\n    }\n  }\n\n  return (\n    <RadixDropdownMenu.Root open={isOpen} onOpenChange={onOpenChange}>\n      <RadixDropdownMenu.Trigger asChild>{trigger}</RadixDropdownMenu.Trigger>\n      <RadixDropdownMenu.Portal>\n        <RadixDropdownMenu.Content\n          className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\", themeClass)}\n          style={themeStyle as React.CSSProperties}\n        >\n          {title && (\n            <RadixDropdownMenu.Label className=\"proton-MenuTrigger__menu-header\">\n              {title}\n            </RadixDropdownMenu.Label>\n          )}\n          {items.map((item) =>\n            renderMenuItem({\n              item,\n              className: themeClass,\n              style: themeStyle as React.CSSProperties,\n              disabledKeys,\n              onClose: () => onOpenChange?.(false),\n            })\n          )}\n        </RadixDropdownMenu.Content>\n      </RadixDropdownMenu.Portal>\n    </RadixDropdownMenu.Root>\n  );\n}\n"],"names":["PopoverMenu","trigger","items","isOpen","onOpenChange","selectedKey","onSelectionChange","disabledKeys","title","themeClass","themeStyle","useTheme","renderMenuItem","props","item","onClose","jsxs","RadixDropdownMenu","csx","jsx","child","_a"],"mappings":"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"}
+{"version":3,"file":"PopoverMenu.es.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from \"radix-ui\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { csx } from \"../../utils/string\";\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\n\nexport interface PopoverMenuProps {\n  /** The trigger component */\n  trigger: React.ReactNode;\n\n  /** Array of menu actions/items to display\n   * - type {@link ActionMenuAction}[]\n   */\n  items: ActionMenuAction[];\n\n  /** Whether the menu is open */\n  isOpen: boolean;\n\n  /** Callback when the menu is opened or closed */\n  onOpenChange: (open: boolean) => void;\n\n  /** The key of the selected item */\n  selectedKey: string;\n\n  /** Callback when the selection changes */\n  onSelectionChange: (key: string) => void;\n\n  /** The keys of the disabled items */\n  disabledKeys: string[];\n\n  /** The title of the menu */\n  title: string;\n}\n\n/**\n * A component that displays a popover menu.\n *\n * API:\n *  - {@link PopoverMenuProps}\n */\nexport function PopoverMenu({\n  trigger,\n  items,\n  isOpen,\n  onOpenChange,\n  selectedKey,\n  onSelectionChange,\n  disabledKeys,\n  title,\n}: PopoverMenuProps) {\n  const { className: themeClass, style: themeStyle } = useTheme();\n\n  function renderMenuItem(props) {\n    const { item, className, style, disabledKeys, onClose } = props;\n\n    if (item.children && item.children.length > 0) {\n      return (\n        <RadixDropdownMenu.Sub key={item.key}>\n          <RadixDropdownMenu.SubTrigger\n            className={csx(\n              \"proton-Menu__item\",\n              \"proton-MenuTrigger__menu-item\"\n            )}\n          >\n            {item.label}\n            <svg\n              className=\"proton-MenuTrigger__chevron\"\n              viewBox=\"0 0 256 256\"\n              width={16}\n              height={12}\n            >\n              <path\n                fill=\"currentColor\"\n                d=\"m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17\"\n              />\n            </svg>\n          </RadixDropdownMenu.SubTrigger>\n\n          <RadixDropdownMenu.SubContent\n            sideOffset={8}\n            data-has-submenu=\"true\"\n            className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\")}\n          >\n            {item.children.map((child) =>\n              renderMenuItem({\n                item: child,\n                className,\n                style,\n                disabledKeys,\n                onClose,\n              })\n            )}\n          </RadixDropdownMenu.SubContent>\n        </RadixDropdownMenu.Sub>\n      );\n    } else {\n      return (\n        <RadixDropdownMenu.Item\n          className={csx(\"proton-Menu__item\", \"proton-MenuTrigger__menu-item\")}\n          key={item.key}\n          aria-selected={selectedKey === item.key}\n          disabled={disabledKeys?.includes(item.key)}\n          onSelect={() => {\n            item.onAction?.(item.key);\n            onSelectionChange?.(item.key);\n            onClose?.();\n          }}\n        >\n          <span\n            className=\"proton-MenuTrigger__label\"\n            style={{ gridArea: \"label\" }}\n          >\n            {item.label}\n          </span>\n          {item.description && (\n            <span\n              className=\"proton-MenuTrigger__description\"\n              style={{ gridArea: \"desc\" }}\n            >\n              {item.description}\n            </span>\n          )}\n        </RadixDropdownMenu.Item>\n      );\n    }\n  }\n\n  return (\n    <RadixDropdownMenu.Root open={isOpen} onOpenChange={onOpenChange}>\n      <RadixDropdownMenu.Trigger asChild>{trigger}</RadixDropdownMenu.Trigger>\n      <RadixDropdownMenu.Portal>\n        <RadixDropdownMenu.Content\n          className={csx(\"proton-Menu\", \"proton-MenuTrigger__menu\", themeClass)}\n          style={themeStyle as React.CSSProperties}\n        >\n          {title && (\n            <RadixDropdownMenu.Label className=\"proton-MenuTrigger__menu-header\">\n              {title}\n            </RadixDropdownMenu.Label>\n          )}\n          {items.map((item) =>\n            renderMenuItem({\n              item,\n              className: themeClass,\n              style: themeStyle as React.CSSProperties,\n              disabledKeys,\n              onClose: () => onOpenChange?.(false),\n            })\n          )}\n        </RadixDropdownMenu.Content>\n      </RadixDropdownMenu.Portal>\n    </RadixDropdownMenu.Root>\n  );\n}\n"],"names":["PopoverMenu","trigger","items","isOpen","onOpenChange","selectedKey","onSelectionChange","disabledKeys","title","themeClass","themeStyle","useTheme","renderMenuItem","props","item","className","style","onClose","jsxs","RadixDropdownMenu","csx","jsx","child","_a"],"mappings":"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"}

package/dist/components/Modal/Modal.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { useButton } from \"@react-aria/button\";\nimport { useDialog } from \"@react-aria/dialog\";\nimport { FocusScope } from \"@react-aria/focus\";\nimport { useModalOverlay, usePreventScroll } from \"@react-aria/overlays\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport { useRef } from \"react\";\nimport { useOverlayTriggerState } from \"@react-stately/overlays\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks\";\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\nimport { csx } from \"../../utils\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport \"./Modal.css\";\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\n\nconst ModalTitle = ({ children }: { children: React.ReactNode }) => {\n  return <h2 className=\"proton-Modal__title\">{children}</h2>;\n};\n\nconst ModalSubtitle = ({ children }: { children: React.ReactNode }) => {\n  return <h3 className=\"proton-Modal__subtitle\">{children}</h3>;\n};\n\nconst ModalBody = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"proton-Modal__body\">{children}</div>;\n};\n\nconst ModalAction = (buttonProps: ButtonProps) => {\n  return (\n    <div className=\"proton-Modal__action\">\n      <Button {...buttonProps} />\n    </div>\n  );\n};\n\nconst ModalActions = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <FocusScope autoFocus>\n      <div className=\"proton-Modal__actions\">{children}</div>\n    </FocusScope>\n  );\n};\n\nconst ModalContent = ({\n  title,\n  subtitle,\n  body,\n  onClose,\n  children,\n  isClosing,\n  \"data-testid\": dataTestId,\n}: ModalProps & {\n  isClosing: boolean;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const state = useOverlayTriggerState({ isOpen: true, onOpenChange: onClose });\n  const { modalProps } = useModalOverlay(\n    {\n      isDismissable: false, //handle dismiss behavior in useIsClosing\n    },\n    state,\n    ref\n  );\n\n  const { dialogProps } = useDialog({ role: \"dialog\" }, ref);\n  usePreventScroll();\n\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const { buttonProps: closeButtonProps } = useButton(\n    {\n      onPress: onClose,\n      \"aria-label\": \"Close\",\n    },\n    closeButtonRef\n  );\n\n  return (\n    <FocusScope contain restoreFocus autoFocus>\n      <div\n        data-testid={dataTestId}\n        className={csx(\"proton-Modal\", isClosing && \"proton-Modal--closing\")}\n        {...mergeProps(modalProps, dialogProps)}\n        ref={ref}\n      >\n        <button\n          name=\"Close\"\n          className=\"proton-Modal__close-button\"\n          {...closeButtonProps}\n          ref={closeButtonRef}\n        >\n          ×\n        </button>\n        {title && <ModalTitle>{title}</ModalTitle>}\n        {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}\n        {body && <ModalBody>{body}</ModalBody>}\n        <div className=\"proton-Modal__content\">{children}</div>\n      </div>\n    </FocusScope>\n  );\n};\n\nexport interface ModalProps {\n  /**\n   * Optional body text content for the modal\n   * */\n  body?: string;\n  /**\n   * Content to render inside the modal\n   * */\n  children: React.ReactNode;\n  /**\n   * data-testid for the modal\n   * */\n  \"data-testid\"?: string;\n  /**\n   * Controls the visibility of the modal\n   * */\n  isOpen: boolean;\n  /**\n   * Whether to show the modal with an overlay background.\n   * @default true\n   * */\n  isOverlay?: boolean;\n  /**\n   * Callback function when modal is closed\n   * */\n  onClose?: () => void;\n  /**\n   * Optional subtitle text below the modal title\n   * */\n  subtitle?: string;\n  /**\n   * Optional title text for the modal header\n   * */\n  title?: string;\n}\n\n/**\n * Modal component with overlay support and responsive behavior.\n *\n * API:\n *  - {@link ModalProps}\n */\nconst ModalWrapper = ({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  body,\n  children,\n  isOverlay = true,\n  \"data-testid\": dataTestId,\n}: ModalProps) => {\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { isClosing, handleClose } = useIsClosing({\n    onClose,\n    overlayRef,\n  });\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\n\n  if (!isOpen) return null;\n\n  const modalContent = (\n    <ModalContent\n      isOpen={isOpen}\n      title={title}\n      subtitle={subtitle}\n      body={body}\n      onClose={handleClose}\n      isClosing={isClosing}\n      data-testid={dataTestId}\n    >\n      {children}\n    </ModalContent>\n  );\n\n  return isOverlay || isMobile ? (\n    <ScreenOverlay fadeIn ref={overlayRef} onClose={handleClose}>\n      {modalContent}\n    </ScreenOverlay>\n  ) : (\n    modalContent\n  );\n};\n\nexport const Modal = Object.assign(ModalWrapper, {\n  /**\n   * Renders a h2 styled title\n   * */\n  Title: ModalTitle,\n  /**\n   * Renders a h3 styled subtitle\n   * */\n  Subtitle: ModalSubtitle,\n  /**\n   * Renders a div styled body\n   * */\n  Body: ModalBody,\n  /**\n   * Renders a Proton Button action\n   * - @prop buttonProps {@link ButtonProps}\n   * */\n  Action: ModalAction,\n  /**\n   * Renders a group of Proton Buttons\n   * */\n  Actions: ModalActions,\n});\n"],"names":["ModalTitle","children","jsx","ModalSubtitle","ModalBody","ModalAction","buttonProps","Button","ModalActions","FocusScope","ModalContent","title","subtitle","body","onClose","isClosing","dataTestId","ref","useRef","state","useOverlayTriggerState","modalProps","useModalOverlay","dialogProps","useDialog","usePreventScroll","closeButtonRef","closeButtonProps","useButton","jsxs","csx","mergeProps","ModalWrapper","isOpen","isOverlay","overlayRef","handleClose","useIsClosing","isMobile","useBreakpoint","BREAKPOINTS","modalContent","ScreenOverlay","Modal"],"mappings":"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"}
+{"version":3,"file":"Modal.cjs.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { useButton } from \"@react-aria/button\";\nimport { useDialog } from \"@react-aria/dialog\";\nimport { FocusScope } from \"@react-aria/focus\";\nimport { useModalOverlay, usePreventScroll } from \"@react-aria/overlays\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport { useRef } from \"react\";\nimport { useOverlayTriggerState } from \"@react-stately/overlays\";\nimport { BREAKPOINTS } from \"../../constants\";\nimport { useBreakpoint } from \"../../hooks\";\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\nimport { csx } from \"../../utils\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport \"./Modal.css\";\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\n\nconst ModalTitle = ({ children }: { children: React.ReactNode }) => {\n  return <h2 className=\"proton-Modal__title\">{children}</h2>;\n};\n\nconst ModalSubtitle = ({ children }: { children: React.ReactNode }) => {\n  return <h3 className=\"proton-Modal__subtitle\">{children}</h3>;\n};\n\nconst ModalBody = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"proton-Modal__body\">{children}</div>;\n};\n\nconst ModalAction = (buttonProps: ButtonProps) => {\n  return (\n    <div className=\"proton-Modal__action\">\n      <Button {...buttonProps} />\n    </div>\n  );\n};\n\nconst ModalActions = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <FocusScope autoFocus>\n      <div className=\"proton-Modal__actions\">{children}</div>\n    </FocusScope>\n  );\n};\n\nconst ModalContent = ({\n  title,\n  subtitle,\n  body,\n  onClose,\n  children,\n  isClosing,\n  \"data-testid\": dataTestId,\n}: ModalProps & {\n  isClosing: boolean;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const state = useOverlayTriggerState({ isOpen: true, onOpenChange: onClose });\n  const { modalProps } = useModalOverlay(\n    {\n      isDismissable: false, //handle dismiss behavior in useIsClosing\n    },\n    state,\n    ref\n  );\n\n  const { dialogProps } = useDialog({ role: \"dialog\" }, ref);\n  usePreventScroll();\n\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const { buttonProps: closeButtonProps } = useButton(\n    {\n      onPress: onClose,\n      \"aria-label\": \"Close\",\n    },\n    closeButtonRef\n  );\n\n  return (\n    <FocusScope contain restoreFocus autoFocus>\n      <div\n        data-testid={dataTestId}\n        className={csx(\"proton-Modal\", isClosing && \"proton-Modal--closing\")}\n        {...mergeProps(modalProps, dialogProps)}\n        ref={ref}\n      >\n        <button\n          name=\"Close\"\n          className=\"proton-Modal__close-button\"\n          {...closeButtonProps}\n          ref={closeButtonRef}\n        >\n          ×\n        </button>\n        {title && <ModalTitle>{title}</ModalTitle>}\n        {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}\n        {body && <ModalBody>{body}</ModalBody>}\n        <div className=\"proton-Modal__content\">{children}</div>\n      </div>\n    </FocusScope>\n  );\n};\n\nexport interface ModalProps {\n  /**\n   * Optional body text content for the modal\n   * */\n  body?: string;\n  /**\n   * Content to render inside the modal\n   * */\n  children: React.ReactNode;\n  /**\n   * data-testid for the modal\n   * */\n  \"data-testid\"?: string;\n  /**\n   * Controls the visibility of the modal\n   * */\n  isOpen: boolean;\n  /**\n   * Whether to show the modal with an overlay background.\n   * @default true\n   * */\n  isOverlay?: boolean;\n  /**\n   * Callback function when modal is closed\n   * */\n  onClose?: () => void;\n  /**\n   * Optional subtitle text below the modal title\n   * */\n  subtitle?: string;\n  /**\n   * Optional title text for the modal header\n   * */\n  title?: string;\n}\n\n/**\n * Modal component with overlay support and responsive behavior.\n *\n * API:\n *  - {@link ModalProps}\n */\nconst ModalWrapper = ({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  body,\n  children,\n  isOverlay = true,\n  \"data-testid\": dataTestId,\n}: ModalProps) => {\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { isClosing, handleClose } = useIsClosing({\n    onClose,\n    overlayRef,\n  });\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\n\n  if (!isOpen) return null;\n\n  const modalContent = (\n    <ModalContent\n      isOpen={isOpen}\n      title={title}\n      subtitle={subtitle}\n      body={body}\n      onClose={handleClose}\n      isClosing={isClosing}\n      data-testid={dataTestId}\n    >\n      {children}\n    </ModalContent>\n  );\n\n  return isOverlay || isMobile ? (\n    <ScreenOverlay fadeIn ref={overlayRef} onClose={handleClose}>\n      {modalContent}\n    </ScreenOverlay>\n  ) : (\n    modalContent\n  );\n};\n\nexport const Modal = Object.assign(ModalWrapper, {\n  /**\n   * Renders a h2 styled title\n   * */\n  Title: ModalTitle,\n  /**\n   * Renders a h3 styled subtitle\n   * */\n  Subtitle: ModalSubtitle,\n  /**\n   * Renders a div styled body\n   * */\n  Body: ModalBody,\n  /**\n   * Renders a Proton Button action\n   * - @prop buttonProps {@link ButtonProps}\n   * */\n  Action: ModalAction,\n  /**\n   * Renders a group of Proton Buttons\n   * */\n  Actions: ModalActions,\n});\n"],"names":["ModalTitle","children","jsx","ModalSubtitle","ModalBody","ModalAction","buttonProps","Button","ModalActions","FocusScope","ModalContent","title","subtitle","body","onClose","isClosing","dataTestId","ref","useRef","state","useOverlayTriggerState","modalProps","useModalOverlay","dialogProps","useDialog","usePreventScroll","closeButtonRef","closeButtonProps","useButton","jsxs","csx","mergeProps","ModalWrapper","isOpen","isOverlay","overlayRef","handleClose","useIsClosing","isMobile","useBreakpoint","BREAKPOINTS","modalContent","ScreenOverlay","Modal"],"mappings":"u8BAiBMA,EAAa,CAAC,CAAE,SAAAC,KACZC,EAAAA,kBAAAA,IAAA,KAAA,CAAG,UAAU,sBAAuB,SAAAD,CAAS,CAAA,EAGjDE,EAAgB,CAAC,CAAE,SAAAF,KACfC,EAAAA,kBAAAA,IAAA,KAAA,CAAG,UAAU,yBAA0B,SAAAD,CAAS,CAAA,EAGpDG,EAAY,CAAC,CAAE,SAAAH,KACXC,EAAAA,kBAAAA,IAAA,MAAA,CAAI,UAAU,qBAAsB,SAAAD,CAAS,CAAA,EAGjDI,EAAeC,GAEjBJ,wBAAC,OAAI,UAAU,uBACb,iCAACK,EAAQ,OAAA,CAAA,GAAGD,CAAa,CAAA,CAC3B,CAAA,EAIEE,EAAe,CAAC,CAAE,SAAAP,KAEpBC,EAAA,kBAAA,IAACO,cAAW,UAAS,GACnB,iCAAC,MAAI,CAAA,UAAU,wBAAyB,SAAAR,CAAS,CAAA,CACnD,CAAA,EAIES,EAAe,CAAC,CACpB,MAAAC,EACA,SAAAC,EACA,KAAAC,EACA,QAAAC,EACA,SAAAb,EACA,UAAAc,EACA,cAAeC,CACjB,IAEM,CACE,MAAAC,EAAMC,SAAuB,IAAI,EACjCC,EAAQC,EAAAA,uBAAuB,CAAE,OAAQ,GAAM,aAAcN,EAAS,EACtE,CAAE,WAAAO,GAAeC,EAAA,gBACrB,CACE,cAAe,EACjB,EACAH,EACAF,CAAA,EAGI,CAAE,YAAAM,GAAgBC,EAAA,UAAU,CAAE,KAAM,QAAA,EAAYP,CAAG,EACxCQ,EAAAA,mBAEX,MAAAC,EAAiBR,SAA0B,IAAI,EAC/C,CAAE,YAAaS,CAAA,EAAqBC,EAAA,UACxC,CACE,QAASd,EACT,aAAc,OAChB,EACAY,CAAA,EAGF,+BACGjB,EAAAA,WAAW,CAAA,QAAO,GAAC,aAAY,GAAC,UAAS,GACxC,SAAAoB,EAAA,kBAAA,KAAC,MAAA,CACC,cAAab,EACb,UAAWc,EAAA,IAAI,eAAgBf,GAAa,uBAAuB,EAClE,GAAGgB,EAAW,WAAAV,EAAYE,CAAW,EACtC,IAAAN,EAEA,SAAA,CAAAf,EAAA,kBAAA,IAAC,SAAA,CACC,KAAK,QACL,UAAU,6BACT,GAAGyB,EACJ,IAAKD,EACN,SAAA,GAAA,CAED,EACCf,GAAUT,EAAAA,kBAAAA,IAAAF,EAAA,CAAY,SAAMW,CAAA,CAAA,EAC5BC,GAAaV,EAAAA,kBAAAA,IAAAC,EAAA,CAAe,SAASS,CAAA,CAAA,EACrCC,GAASX,EAAAA,kBAAAA,IAAAE,EAAA,CAAW,SAAKS,CAAA,CAAA,EACzBX,EAAAA,kBAAAA,IAAA,MAAA,CAAI,UAAU,wBAAyB,SAAAD,CAAS,CAAA,CAAA,CAAA,CAErD,CAAA,CAAA,CAEJ,EA4CM+B,EAAe,CAAC,CACpB,OAAAC,EACA,QAAAnB,EACA,MAAAH,EACA,SAAAC,EACA,KAAAC,EACA,SAAAZ,EACA,UAAAiC,EAAY,GACZ,cAAelB,CACjB,IAAkB,CACV,MAAAmB,EAAajB,SAAuB,IAAI,EACxC,CAAE,UAAAH,EAAW,YAAAqB,CAAY,EAAIC,eAAa,CAC9C,QAAAvB,EACA,WAAAqB,CAAA,CACD,EACKG,EAAWC,EAAAA,cAAcC,EAAA,YAAY,MAAM,EAE7C,GAAA,CAACP,EAAe,OAAA,KAEpB,MAAMQ,EACJvC,EAAA,kBAAA,IAACQ,EAAA,CACC,OAAAuB,EACA,MAAAtB,EACA,SAAAC,EACA,KAAAC,EACA,QAASuB,EACT,UAAArB,EACA,cAAaC,EAEZ,SAAAf,CAAA,CAAA,EAIE,OAAAiC,GAAaI,EAClBpC,EAAAA,kBAAAA,IAACwC,EAAAA,cAAc,CAAA,OAAM,GAAC,IAAKP,EAAY,QAASC,EAC7C,SAAAK,CAAA,CACH,EAEAA,CAEJ,EAEaE,EAAQ,OAAO,OAAOX,EAAc,CAI/C,MAAOhC,EAIP,SAAUG,EAIV,KAAMC,EAKN,OAAQC,EAIR,QAASG,CACX,CAAC"}