@transferwise/components 46.130.1 → 46.130.3

package/build/inputs/SelectInput/ButtonInput/SelectInputButtonInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputButtonInput.js","sources":["../../../../src/inputs/SelectInput/ButtonInput/SelectInputButtonInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { useInputPaddings } from '../../InputGroup';\nimport { inputClassNameBase } from '../../_common';\n\nexport interface SelectInputButtonInputProps extends React.ComponentPropsWithRef<'button'> {\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const SelectInputButtonInput = forwardRef(function ButtonInput(\n  { size = 'md', className, style, ...restProps }: SelectInputButtonInputProps,\n  ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  const inputPaddings = useInputPaddings();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={clsx(inputClassNameBase({ size }), 'np-button-input', className)}\n      style={{ ...inputPaddings, ...style }}\n      {...restProps}\n    />\n  );\n});\n"],"names":["SelectInputButtonInput","forwardRef","ButtonInput","size","className","style","restProps","ref","inputPaddings","useInputPaddings","_jsx","type","clsx","inputClassNameBase"],"mappings":";;;;;;;;MAUaA,sBAAsB,gBAAGC,gBAAU,CAAC,SAASC,WAAWA,CACnE;AAAEC,EAAAA,IAAI,GAAG,IAAI;EAAEC,SAAS;EAAEC,KAAK;EAAE,GAAGC;AAAS,CAA+B,EAC5EC,GAAiD,EAAA;AAEjD,EAAA,MAAMC,aAAa,GAAGC,2BAAgB,EAAE;AAExC,EAAA,oBACEC,cAAA,CAAA,QAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTI,IAAAA,IAAI,EAAC,QAAQ;AACbP,IAAAA,SAAS,EAAEQ,SAAI,CAACC,0BAAkB,CAAC;AAAEV,MAAAA;AAAI,KAAE,CAAC,EAAE,iBAAiB,EAAEC,SAAS,CAAE;AAC5EC,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGG,aAAa;MAAE,GAAGH;KAAQ;IAAA,GAClCC;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}

package/build/inputs/{_ButtonInput.mjs → SelectInput/ButtonInput/SelectInputButtonInput.mjs}

@@ -1,10 +1,10 @@
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
-import { useInputPaddings } from './InputGroup.mjs';
-import { inputClassNameBase } from './_common.mjs';
+import { useInputPaddings } from '../../InputGroup.mjs';
+import { inputClassNameBase } from '../../_common.mjs';
 import { jsx } from 'react/jsx-runtime';
 
-const ButtonInput = /*#__PURE__*/forwardRef(function ButtonInput({
+const SelectInputButtonInput = /*#__PURE__*/forwardRef(function ButtonInput({
   size = 'md',
   className,
   style,
@@ -25,5 +25,5 @@ const ButtonInput = /*#__PURE__*/forwardRef(function ButtonInput({
   });
 });
 
-export { ButtonInput };
-//# sourceMappingURL=_ButtonInput.mjs.map
+export { SelectInputButtonInput };
+//# sourceMappingURL=SelectInputButtonInput.mjs.map

package/build/inputs/SelectInput/ButtonInput/SelectInputButtonInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputButtonInput.mjs","sources":["../../../../src/inputs/SelectInput/ButtonInput/SelectInputButtonInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { useInputPaddings } from '../../InputGroup';\nimport { inputClassNameBase } from '../../_common';\n\nexport interface SelectInputButtonInputProps extends React.ComponentPropsWithRef<'button'> {\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const SelectInputButtonInput = forwardRef(function ButtonInput(\n  { size = 'md', className, style, ...restProps }: SelectInputButtonInputProps,\n  ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  const inputPaddings = useInputPaddings();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={clsx(inputClassNameBase({ size }), 'np-button-input', className)}\n      style={{ ...inputPaddings, ...style }}\n      {...restProps}\n    />\n  );\n});\n"],"names":["SelectInputButtonInput","forwardRef","ButtonInput","size","className","style","restProps","ref","inputPaddings","useInputPaddings","_jsx","type","clsx","inputClassNameBase"],"mappings":";;;;;;MAUaA,sBAAsB,gBAAGC,UAAU,CAAC,SAASC,WAAWA,CACnE;AAAEC,EAAAA,IAAI,GAAG,IAAI;EAAEC,SAAS;EAAEC,KAAK;EAAE,GAAGC;AAAS,CAA+B,EAC5EC,GAAiD,EAAA;AAEjD,EAAA,MAAMC,aAAa,GAAGC,gBAAgB,EAAE;AAExC,EAAA,oBACEC,GAAA,CAAA,QAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTI,IAAAA,IAAI,EAAC,QAAQ;AACbP,IAAAA,SAAS,EAAEQ,IAAI,CAACC,kBAAkB,CAAC;AAAEV,MAAAA;AAAI,KAAE,CAAC,EAAE,iBAAiB,EAAEC,SAAS,CAAE;AAC5EC,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGG,aAAa;MAAE,GAAGH;KAAQ;IAAA,GAClCC;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}

package/build/inputs/SelectInput/ClearButton/SelectInputClearButton.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var icons = require('@transferwise/icons');
+var clsx = require('clsx');
+var reactIntl = require('react-intl');
+var DateTrigger_messages = require('../../../dateLookup/dateTrigger/DateTrigger.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function SelectInputClearButton({
+  className,
+  onClick
+}) {
+  const intl = reactIntl.useIntl();
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
+    type: "button",
+    "aria-label": intl.formatMessage(DateTrigger_messages.default.ariaLabel),
+    className: clsx.clsx(className, 'np-select-input-addon np-select-input-addon--interactive'),
+    onClick: onClick,
+    children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {
+      size: 16
+    })
+  });
+}
+
+exports.SelectInputClearButton = SelectInputClearButton;
+//# sourceMappingURL=SelectInputClearButton.js.map

package/build/inputs/SelectInput/ClearButton/SelectInputClearButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputClearButton.js","sources":["../../../../src/inputs/SelectInput/ClearButton/SelectInputClearButton.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport dateTriggerMessages from '../../../dateLookup/dateTrigger/DateTrigger.messages';\n\nexport interface SelectInputClearButtonProps extends Pick<\n  React.ComponentPropsWithoutRef<'button'>,\n  'className' | 'onClick'\n> {}\n\n/**\n * A button component used to clear the selected value in a SelectInput.\n */\nexport function SelectInputClearButton({ className, onClick }: SelectInputClearButtonProps) {\n  const intl = useIntl();\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}\n      className={clsx(className, 'np-select-input-addon np-select-input-addon--interactive')}\n      onClick={onClick}\n    >\n      <Cross size={16} />\n    </button>\n  );\n}\n"],"names":["SelectInputClearButton","className","onClick","intl","useIntl","_jsx","type","formatMessage","dateTriggerMessages","ariaLabel","clsx","children","Cross","size"],"mappings":";;;;;;;;SAagBA,sBAAsBA,CAAC;EAAEC,SAAS;AAAEC,EAAAA;AAAO,CAA+B,EAAA;AACxF,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AAEtB,EAAA,oBACEC,cAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYH,IAAI,CAACI,aAAa,CAACC,4BAAmB,CAACC,SAAS,CAAE;AAC9DR,IAAAA,SAAS,EAAES,SAAI,CAACT,SAAS,EAAE,0DAA0D,CAAE;AACvFC,IAAAA,OAAO,EAAEA,OAAQ;IAAAS,QAAA,eAEjBN,cAAA,CAACO,WAAK,EAAA;AAACC,MAAAA,IAAI,EAAE;KAAG;AAClB,GAAQ,CAAC;AAEb;;;;"}

package/build/inputs/SelectInput/ClearButton/SelectInputClearButton.mjs

@@ -0,0 +1,24 @@
+import { Cross } from '@transferwise/icons';
+import { clsx } from 'clsx';
+import { useIntl } from 'react-intl';
+import messages from '../../../dateLookup/dateTrigger/DateTrigger.messages.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+function SelectInputClearButton({
+  className,
+  onClick
+}) {
+  const intl = useIntl();
+  return /*#__PURE__*/jsx("button", {
+    type: "button",
+    "aria-label": intl.formatMessage(messages.ariaLabel),
+    className: clsx(className, 'np-select-input-addon np-select-input-addon--interactive'),
+    onClick: onClick,
+    children: /*#__PURE__*/jsx(Cross, {
+      size: 16
+    })
+  });
+}
+
+export { SelectInputClearButton };
+//# sourceMappingURL=SelectInputClearButton.mjs.map

package/build/inputs/SelectInput/ClearButton/SelectInputClearButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputClearButton.mjs","sources":["../../../../src/inputs/SelectInput/ClearButton/SelectInputClearButton.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport dateTriggerMessages from '../../../dateLookup/dateTrigger/DateTrigger.messages';\n\nexport interface SelectInputClearButtonProps extends Pick<\n  React.ComponentPropsWithoutRef<'button'>,\n  'className' | 'onClick'\n> {}\n\n/**\n * A button component used to clear the selected value in a SelectInput.\n */\nexport function SelectInputClearButton({ className, onClick }: SelectInputClearButtonProps) {\n  const intl = useIntl();\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}\n      className={clsx(className, 'np-select-input-addon np-select-input-addon--interactive')}\n      onClick={onClick}\n    >\n      <Cross size={16} />\n    </button>\n  );\n}\n"],"names":["SelectInputClearButton","className","onClick","intl","useIntl","_jsx","type","formatMessage","dateTriggerMessages","ariaLabel","clsx","children","Cross","size"],"mappings":";;;;;;SAagBA,sBAAsBA,CAAC;EAAEC,SAAS;AAAEC,EAAAA;AAAO,CAA+B,EAAA;AACxF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtB,EAAA,oBACEC,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYH,IAAI,CAACI,aAAa,CAACC,QAAmB,CAACC,SAAS,CAAE;AAC9DR,IAAAA,SAAS,EAAES,IAAI,CAACT,SAAS,EAAE,0DAA0D,CAAE;AACvFC,IAAAA,OAAO,EAAEA,OAAQ;IAAAS,QAAA,eAEjBN,GAAA,CAACO,KAAK,EAAA;AAACC,MAAAA,IAAI,EAAE;KAAG;AAClB,GAAQ,CAAC;AAEb;;;;"}

package/build/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var icons = require('@transferwise/icons');
+var clsx = require('clsx');
+require('react');
+var InputGroup = require('../../InputGroup.js');
+var SelectInputClearButton = require('../ClearButton/SelectInputClearButton.js');
+var SelectInputTriggerButton = require('../TriggerButton/SelectInputTriggerButton.js');
+var SelectInputButtonInput = require('../ButtonInput/SelectInputButtonInput.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function SelectInputDefaultRenderTrigger({
+  content,
+  placeholderShown,
+  clear,
+  disabled,
+  size,
+  className
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(InputGroup.InputGroup, {
+    addonEnd: {
+      content: /*#__PURE__*/jsxRuntime.jsxs("span", {
+        className: clsx.clsx('np-select-input-addon-container', disabled && 'disabled'),
+        children: [clear != null && !placeholderShown ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(SelectInputClearButton.SelectInputClearButton, {
+            onClick: event => {
+              event.preventDefault();
+              clear();
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "np-select-input-addon-separator"
+          })]
+        }) : null, /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "np-select-input-addon",
+          children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronDown, {
+            size: 16
+          })
+        })]
+      }),
+      initialContentWidth: 24 + 4,
+      padding: 'sm'
+    },
+    disabled: disabled,
+    className: className,
+    children: /*#__PURE__*/jsxRuntime.jsx(SelectInputTriggerButton.SelectInputTriggerButton, {
+      as: SelectInputButtonInput.SelectInputButtonInput,
+      size: size,
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: clsx.clsx('np-select-input-content', placeholderShown && 'np-select-input-placeholder'),
+        children: content
+      })
+    })
+  });
+}
+const DefaultRenderTrigger = SelectInputDefaultRenderTrigger;
+
+exports.DefaultRenderTrigger = DefaultRenderTrigger;
+exports.SelectInputDefaultRenderTrigger = SelectInputDefaultRenderTrigger;
+//# sourceMappingURL=SelectInputDefaultRenderTrigger.js.map

package/build/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputDefaultRenderTrigger.js","sources":["../../../../src/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React from 'react';\n\nimport { InputGroup } from '../../InputGroup';\nimport { SelectInputClearButton } from '../ClearButton';\nimport { SelectInputTriggerButton } from '../TriggerButton';\nimport { SelectInputProps } from '../SelectInput.types';\nimport { SelectInputButtonInput } from '../ButtonInput';\n\nexport interface SelectInputDefaultRenderTriggerProps {\n  content: React.ReactNode;\n  placeholderShown: boolean;\n  clear: (() => void) | undefined;\n  disabled: boolean;\n  size: 'sm' | 'md' | 'lg';\n  className: string | undefined;\n}\n\n/**\n * Default render function for the SelectInput trigger.\n * Displays the selected value or placeholder with clear button and dropdown indicator.\n */\nexport function SelectInputDefaultRenderTrigger({\n  content,\n  placeholderShown,\n  clear,\n  disabled,\n  size,\n  className,\n}: SelectInputDefaultRenderTriggerProps) {\n  return (\n    <InputGroup\n      addonEnd={{\n        content: (\n          <span className={clsx('np-select-input-addon-container', disabled && 'disabled')}>\n            {clear != null && !placeholderShown ? (\n              <>\n                <SelectInputClearButton\n                  onClick={(event) => {\n                    event.preventDefault();\n                    clear();\n                  }}\n                />\n                <span className=\"np-select-input-addon-separator\" />\n              </>\n            ) : null}\n            <span className=\"np-select-input-addon\">\n              <ChevronDown size={16} />\n            </span>\n          </span>\n        ),\n        initialContentWidth: 24 + 4,\n        padding: 'sm',\n      }}\n      disabled={disabled}\n      className={className}\n    >\n      <SelectInputTriggerButton as={SelectInputButtonInput} size={size}>\n        <span\n          className={clsx(\n            'np-select-input-content',\n            placeholderShown && 'np-select-input-placeholder',\n          )}\n        >\n          {content}\n        </span>\n      </SelectInputTriggerButton>\n    </InputGroup>\n  );\n}\n\nexport const DefaultRenderTrigger =\n  SelectInputDefaultRenderTrigger satisfies SelectInputProps['renderTrigger'];\n"],"names":["SelectInputDefaultRenderTrigger","content","placeholderShown","clear","disabled","size","className","_jsx","InputGroup","addonEnd","_jsxs","clsx","children","_Fragment","SelectInputClearButton","onClick","event","preventDefault","ChevronDown","initialContentWidth","padding","SelectInputTriggerButton","as","SelectInputButtonInput","DefaultRenderTrigger"],"mappings":";;;;;;;;;;;AAuBM,SAAUA,+BAA+BA,CAAC;EAC9CC,OAAO;EACPC,gBAAgB;EAChBC,KAAK;EACLC,QAAQ;EACRC,IAAI;AACJC,EAAAA;AAAS,CAC4B,EAAA;EACrC,oBACEC,cAAA,CAACC,qBAAU,EAAA;AACTC,IAAAA,QAAQ,EAAE;AACRR,MAAAA,OAAO,eACLS,eAAA,CAAA,MAAA,EAAA;QAAMJ,SAAS,EAAEK,SAAI,CAAC,iCAAiC,EAAEP,QAAQ,IAAI,UAAU,CAAE;QAAAQ,QAAA,EAAA,CAC9ET,KAAK,IAAI,IAAI,IAAI,CAACD,gBAAgB,gBACjCQ,eAAA,CAAAG,mBAAA,EAAA;UAAAD,QAAA,EAAA,cACEL,cAAA,CAACO,6CAAsB,EAAA;YACrBC,OAAO,EAAGC,KAAK,IAAI;cACjBA,KAAK,CAACC,cAAc,EAAE;AACtBd,cAAAA,KAAK,EAAE;AACT,YAAA;WAAE,CAEJ,eAAAI,cAAA,CAAA,MAAA,EAAA;AAAMD,YAAAA,SAAS,EAAC;AAAiC,WAAA,CACnD;AAAA,SAAA,CAAG,GACD,IAAI,eACRC,cAAA,CAAA,MAAA,EAAA;AAAMD,UAAAA,SAAS,EAAC,uBAAuB;UAAAM,QAAA,eACrCL,cAAA,CAACW,iBAAW,EAAA;AAACb,YAAAA,IAAI,EAAE;WAAG;AACxB,SAAM,CACR;AAAA,OAAM,CACP;MACDc,mBAAmB,EAAE,EAAE,GAAG,CAAC;AAC3BC,MAAAA,OAAO,EAAE;KACT;AACFhB,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,SAAS,EAAEA,SAAU;IAAAM,QAAA,eAErBL,cAAA,CAACc,iDAAwB,EAAA;AAACC,MAAAA,EAAE,EAAEC,6CAAuB;AAAClB,MAAAA,IAAI,EAAEA,IAAK;AAAAO,MAAAA,QAAA,eAC/DL,cAAA,CAAA,MAAA,EAAA;QACED,SAAS,EAAEK,SAAI,CACb,yBAAyB,EACzBT,gBAAgB,IAAI,6BAA6B,CACjD;AAAAU,QAAAA,QAAA,EAEDX;OACG;KACkB;AAC5B,GAAY,CAAC;AAEjB;AAEO,MAAMuB,oBAAoB,GAC/BxB;;;;;"}

package/build/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.mjs

@@ -0,0 +1,56 @@
+import { ChevronDown } from '@transferwise/icons';
+import { clsx } from 'clsx';
+import 'react';
+import { InputGroup } from '../../InputGroup.mjs';
+import { SelectInputClearButton } from '../ClearButton/SelectInputClearButton.mjs';
+import { SelectInputTriggerButton } from '../TriggerButton/SelectInputTriggerButton.mjs';
+import { SelectInputButtonInput } from '../ButtonInput/SelectInputButtonInput.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function SelectInputDefaultRenderTrigger({
+  content,
+  placeholderShown,
+  clear,
+  disabled,
+  size,
+  className
+}) {
+  return /*#__PURE__*/jsx(InputGroup, {
+    addonEnd: {
+      content: /*#__PURE__*/jsxs("span", {
+        className: clsx('np-select-input-addon-container', disabled && 'disabled'),
+        children: [clear != null && !placeholderShown ? /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(SelectInputClearButton, {
+            onClick: event => {
+              event.preventDefault();
+              clear();
+            }
+          }), /*#__PURE__*/jsx("span", {
+            className: "np-select-input-addon-separator"
+          })]
+        }) : null, /*#__PURE__*/jsx("span", {
+          className: "np-select-input-addon",
+          children: /*#__PURE__*/jsx(ChevronDown, {
+            size: 16
+          })
+        })]
+      }),
+      initialContentWidth: 24 + 4,
+      padding: 'sm'
+    },
+    disabled: disabled,
+    className: className,
+    children: /*#__PURE__*/jsx(SelectInputTriggerButton, {
+      as: SelectInputButtonInput,
+      size: size,
+      children: /*#__PURE__*/jsx("span", {
+        className: clsx('np-select-input-content', placeholderShown && 'np-select-input-placeholder'),
+        children: content
+      })
+    })
+  });
+}
+const DefaultRenderTrigger = SelectInputDefaultRenderTrigger;
+
+export { DefaultRenderTrigger, SelectInputDefaultRenderTrigger };
+//# sourceMappingURL=SelectInputDefaultRenderTrigger.mjs.map

package/build/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputDefaultRenderTrigger.mjs","sources":["../../../../src/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React from 'react';\n\nimport { InputGroup } from '../../InputGroup';\nimport { SelectInputClearButton } from '../ClearButton';\nimport { SelectInputTriggerButton } from '../TriggerButton';\nimport { SelectInputProps } from '../SelectInput.types';\nimport { SelectInputButtonInput } from '../ButtonInput';\n\nexport interface SelectInputDefaultRenderTriggerProps {\n  content: React.ReactNode;\n  placeholderShown: boolean;\n  clear: (() => void) | undefined;\n  disabled: boolean;\n  size: 'sm' | 'md' | 'lg';\n  className: string | undefined;\n}\n\n/**\n * Default render function for the SelectInput trigger.\n * Displays the selected value or placeholder with clear button and dropdown indicator.\n */\nexport function SelectInputDefaultRenderTrigger({\n  content,\n  placeholderShown,\n  clear,\n  disabled,\n  size,\n  className,\n}: SelectInputDefaultRenderTriggerProps) {\n  return (\n    <InputGroup\n      addonEnd={{\n        content: (\n          <span className={clsx('np-select-input-addon-container', disabled && 'disabled')}>\n            {clear != null && !placeholderShown ? (\n              <>\n                <SelectInputClearButton\n                  onClick={(event) => {\n                    event.preventDefault();\n                    clear();\n                  }}\n                />\n                <span className=\"np-select-input-addon-separator\" />\n              </>\n            ) : null}\n            <span className=\"np-select-input-addon\">\n              <ChevronDown size={16} />\n            </span>\n          </span>\n        ),\n        initialContentWidth: 24 + 4,\n        padding: 'sm',\n      }}\n      disabled={disabled}\n      className={className}\n    >\n      <SelectInputTriggerButton as={SelectInputButtonInput} size={size}>\n        <span\n          className={clsx(\n            'np-select-input-content',\n            placeholderShown && 'np-select-input-placeholder',\n          )}\n        >\n          {content}\n        </span>\n      </SelectInputTriggerButton>\n    </InputGroup>\n  );\n}\n\nexport const DefaultRenderTrigger =\n  SelectInputDefaultRenderTrigger satisfies SelectInputProps['renderTrigger'];\n"],"names":["SelectInputDefaultRenderTrigger","content","placeholderShown","clear","disabled","size","className","_jsx","InputGroup","addonEnd","_jsxs","clsx","children","_Fragment","SelectInputClearButton","onClick","event","preventDefault","ChevronDown","initialContentWidth","padding","SelectInputTriggerButton","as","SelectInputButtonInput","DefaultRenderTrigger"],"mappings":";;;;;;;;;AAuBM,SAAUA,+BAA+BA,CAAC;EAC9CC,OAAO;EACPC,gBAAgB;EAChBC,KAAK;EACLC,QAAQ;EACRC,IAAI;AACJC,EAAAA;AAAS,CAC4B,EAAA;EACrC,oBACEC,GAAA,CAACC,UAAU,EAAA;AACTC,IAAAA,QAAQ,EAAE;AACRR,MAAAA,OAAO,eACLS,IAAA,CAAA,MAAA,EAAA;QAAMJ,SAAS,EAAEK,IAAI,CAAC,iCAAiC,EAAEP,QAAQ,IAAI,UAAU,CAAE;QAAAQ,QAAA,EAAA,CAC9ET,KAAK,IAAI,IAAI,IAAI,CAACD,gBAAgB,gBACjCQ,IAAA,CAAAG,QAAA,EAAA;UAAAD,QAAA,EAAA,cACEL,GAAA,CAACO,sBAAsB,EAAA;YACrBC,OAAO,EAAGC,KAAK,IAAI;cACjBA,KAAK,CAACC,cAAc,EAAE;AACtBd,cAAAA,KAAK,EAAE;AACT,YAAA;WAAE,CAEJ,eAAAI,GAAA,CAAA,MAAA,EAAA;AAAMD,YAAAA,SAAS,EAAC;AAAiC,WAAA,CACnD;AAAA,SAAA,CAAG,GACD,IAAI,eACRC,GAAA,CAAA,MAAA,EAAA;AAAMD,UAAAA,SAAS,EAAC,uBAAuB;UAAAM,QAAA,eACrCL,GAAA,CAACW,WAAW,EAAA;AAACb,YAAAA,IAAI,EAAE;WAAG;AACxB,SAAM,CACR;AAAA,OAAM,CACP;MACDc,mBAAmB,EAAE,EAAE,GAAG,CAAC;AAC3BC,MAAAA,OAAO,EAAE;KACT;AACFhB,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,SAAS,EAAEA,SAAU;IAAAM,QAAA,eAErBL,GAAA,CAACc,wBAAwB,EAAA;AAACC,MAAAA,EAAE,EAAEC,sBAAuB;AAAClB,MAAAA,IAAI,EAAEA,IAAK;AAAAO,MAAAA,QAAA,eAC/DL,GAAA,CAAA,MAAA,EAAA;QACED,SAAS,EAAEK,IAAI,CACb,yBAAyB,EACzBT,gBAAgB,IAAI,6BAA6B,CACjD;AAAAU,QAAAA,QAAA,EAEDX;OACG;KACkB;AAC5B,GAAY,CAAC;AAEjB;AAEO,MAAMuB,oBAAoB,GAC/BxB;;;;"}

package/build/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+var Header = require('../../../../header/Header.js');
+var Section = require('../../../../section/Section.js');
+var SelectInputItemView = require('../SelectInputItemView.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function SelectInputGroupItemView({
+  item,
+  renderValue,
+  needle
+}) {
+  const headerId = React.useId();
+  const header = /*#__PURE__*/jsxRuntime.jsx(Header.default, {
+    as: "header",
+    role: "none",
+    id: headerId,
+    title: item.label
+    // @ts-expect-error when we migrate ActionButton to new Button this should be sorted
+    ,
+    action: item.action && {
+      text: item.action.label,
+      onClick: item.action.onClick
+    },
+    className: "np-select-input-group-item-header p-x-1"
+  });
+  return (
+    /*#__PURE__*/
+    // An empty container may be rendered when no options match `needle`
+    // However, pre-filtering would result in worse performance overall
+    jsxRuntime.jsxs(Section.default, {
+      as: "section",
+      role: "group",
+      "aria-labelledby": headerId,
+      className: clsx.clsx('m-y-0', needle === null && 'np-select-input-group-item--without-needle'),
+      children: [needle == null ? header : null, item.options.map((option, index) => /*#__PURE__*/jsxRuntime.jsx(SelectInputItemView.SelectInputItemView
+      // eslint-disable-next-line react/no-array-index-key
+      , {
+        item: option,
+        renderValue: renderValue,
+        needle: needle
+      }, index))]
+    })
+  );
+}
+
+exports.SelectInputGroupItemView = SelectInputGroupItemView;
+//# sourceMappingURL=SelectInputGroupItemView.js.map

package/build/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputGroupItemView.js","sources":["../../../../../src/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId } from 'react';\nimport Header from '../../../../header';\nimport Section from '../../../../section';\nimport { SelectInputGroupItem } from '../../SelectInput.types';\nimport { SelectInputItemView, SelectInputItemViewProps } from '..';\n\nexport interface SelectInputGroupItemViewProps<T = string> extends SelectInputItemViewProps<\n  T,\n  SelectInputGroupItem<T | undefined>\n> {}\n\n/**\n * Component that renders a group of SelectInput options with a header.\n */\nexport function SelectInputGroupItemView<T = string>({\n  item,\n  renderValue,\n  needle,\n}: SelectInputGroupItemViewProps<T>) {\n  const headerId = useId();\n\n  const header = (\n    <Header\n      as=\"header\"\n      role=\"none\"\n      id={headerId}\n      title={item.label}\n      // @ts-expect-error when we migrate ActionButton to new Button this should be sorted\n      action={\n        item.action && {\n          text: item.action.label,\n          onClick: item.action.onClick,\n        }\n      }\n      className=\"np-select-input-group-item-header p-x-1\"\n    />\n  );\n\n  return (\n    // An empty container may be rendered when no options match `needle`\n    // However, pre-filtering would result in worse performance overall\n    <Section\n      as=\"section\"\n      role=\"group\"\n      aria-labelledby={headerId}\n      className={clsx('m-y-0', needle === null && 'np-select-input-group-item--without-needle')}\n    >\n      {needle == null ? header : null}\n      {item.options.map((option, index) => (\n        <SelectInputItemView\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          item={option}\n          renderValue={renderValue}\n          needle={needle}\n        />\n      ))}\n    </Section>\n  );\n}\n"],"names":["SelectInputGroupItemView","item","renderValue","needle","headerId","useId","header","_jsx","Header","as","role","id","title","label","action","text","onClick","className","_jsxs","Section","clsx","children","options","map","option","index","SelectInputItemView"],"mappings":";;;;;;;;;AAeM,SAAUA,wBAAwBA,CAAa;EACnDC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAM,CAC2B,EAAA;AACjC,EAAA,MAAMC,QAAQ,GAAGC,WAAK,EAAE;AAExB,EAAA,MAAMC,MAAM,gBACVC,cAAA,CAACC,cAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,QAAQ;AACXC,IAAAA,IAAI,EAAC,MAAM;AACXC,IAAAA,EAAE,EAAEP,QAAS;IACbQ,KAAK,EAAEX,IAAI,CAACY;AACZ;AAAA;AACAC,IAAAA,MAAM,EACJb,IAAI,CAACa,MAAM,IAAI;AACbC,MAAAA,IAAI,EAAEd,IAAI,CAACa,MAAM,CAACD,KAAK;AACvBG,MAAAA,OAAO,EAAEf,IAAI,CAACa,MAAM,CAACE;KAExB;AACDC,IAAAA,SAAS,EAAC;AAAyC,GAAA,CAEtD;AAED,EAAA;AAAA;AACE;AACA;AACAC,IAAAA,eAAA,CAACC,eAAO,EAAA;AACNV,MAAAA,EAAE,EAAC,SAAS;AACZC,MAAAA,IAAI,EAAC,OAAO;AACZ,MAAA,iBAAA,EAAiBN,QAAS;MAC1Ba,SAAS,EAAEG,SAAI,CAAC,OAAO,EAAEjB,MAAM,KAAK,IAAI,IAAI,4CAA4C,CAAE;MAAAkB,QAAA,EAAA,CAEzFlB,MAAM,IAAI,IAAI,GAAGG,MAAM,GAAG,IAAI,EAC9BL,IAAI,CAACqB,OAAO,CAACC,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,kBAC9BlB,cAAA,CAACmB;AACC;AAAA,QAAA;AAEAzB,QAAAA,IAAI,EAAEuB,MAAO;AACbtB,QAAAA,WAAW,EAAEA,WAAY;AACzBC,QAAAA,MAAM,EAAEA;OAAO,EAHVsB,KAGU,CAElB,CAAC;KACK;AAAC;AAEd;;;;"}

package/build/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.mjs

@@ -0,0 +1,48 @@
+import { clsx } from 'clsx';
+import { useId } from 'react';
+import Header from '../../../../header/Header.mjs';
+import Section from '../../../../section/Section.mjs';
+import { SelectInputItemView } from '../SelectInputItemView.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function SelectInputGroupItemView({
+  item,
+  renderValue,
+  needle
+}) {
+  const headerId = useId();
+  const header = /*#__PURE__*/jsx(Header, {
+    as: "header",
+    role: "none",
+    id: headerId,
+    title: item.label
+    // @ts-expect-error when we migrate ActionButton to new Button this should be sorted
+    ,
+    action: item.action && {
+      text: item.action.label,
+      onClick: item.action.onClick
+    },
+    className: "np-select-input-group-item-header p-x-1"
+  });
+  return (
+    /*#__PURE__*/
+    // An empty container may be rendered when no options match `needle`
+    // However, pre-filtering would result in worse performance overall
+    jsxs(Section, {
+      as: "section",
+      role: "group",
+      "aria-labelledby": headerId,
+      className: clsx('m-y-0', needle === null && 'np-select-input-group-item--without-needle'),
+      children: [needle == null ? header : null, item.options.map((option, index) => /*#__PURE__*/jsx(SelectInputItemView
+      // eslint-disable-next-line react/no-array-index-key
+      , {
+        item: option,
+        renderValue: renderValue,
+        needle: needle
+      }, index))]
+    })
+  );
+}
+
+export { SelectInputGroupItemView };
+//# sourceMappingURL=SelectInputGroupItemView.mjs.map

package/build/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputGroupItemView.mjs","sources":["../../../../../src/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId } from 'react';\nimport Header from '../../../../header';\nimport Section from '../../../../section';\nimport { SelectInputGroupItem } from '../../SelectInput.types';\nimport { SelectInputItemView, SelectInputItemViewProps } from '..';\n\nexport interface SelectInputGroupItemViewProps<T = string> extends SelectInputItemViewProps<\n  T,\n  SelectInputGroupItem<T | undefined>\n> {}\n\n/**\n * Component that renders a group of SelectInput options with a header.\n */\nexport function SelectInputGroupItemView<T = string>({\n  item,\n  renderValue,\n  needle,\n}: SelectInputGroupItemViewProps<T>) {\n  const headerId = useId();\n\n  const header = (\n    <Header\n      as=\"header\"\n      role=\"none\"\n      id={headerId}\n      title={item.label}\n      // @ts-expect-error when we migrate ActionButton to new Button this should be sorted\n      action={\n        item.action && {\n          text: item.action.label,\n          onClick: item.action.onClick,\n        }\n      }\n      className=\"np-select-input-group-item-header p-x-1\"\n    />\n  );\n\n  return (\n    // An empty container may be rendered when no options match `needle`\n    // However, pre-filtering would result in worse performance overall\n    <Section\n      as=\"section\"\n      role=\"group\"\n      aria-labelledby={headerId}\n      className={clsx('m-y-0', needle === null && 'np-select-input-group-item--without-needle')}\n    >\n      {needle == null ? header : null}\n      {item.options.map((option, index) => (\n        <SelectInputItemView\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          item={option}\n          renderValue={renderValue}\n          needle={needle}\n        />\n      ))}\n    </Section>\n  );\n}\n"],"names":["SelectInputGroupItemView","item","renderValue","needle","headerId","useId","header","_jsx","Header","as","role","id","title","label","action","text","onClick","className","_jsxs","Section","clsx","children","options","map","option","index","SelectInputItemView"],"mappings":";;;;;;;AAeM,SAAUA,wBAAwBA,CAAa;EACnDC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAM,CAC2B,EAAA;AACjC,EAAA,MAAMC,QAAQ,GAAGC,KAAK,EAAE;AAExB,EAAA,MAAMC,MAAM,gBACVC,GAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,QAAQ;AACXC,IAAAA,IAAI,EAAC,MAAM;AACXC,IAAAA,EAAE,EAAEP,QAAS;IACbQ,KAAK,EAAEX,IAAI,CAACY;AACZ;AAAA;AACAC,IAAAA,MAAM,EACJb,IAAI,CAACa,MAAM,IAAI;AACbC,MAAAA,IAAI,EAAEd,IAAI,CAACa,MAAM,CAACD,KAAK;AACvBG,MAAAA,OAAO,EAAEf,IAAI,CAACa,MAAM,CAACE;KAExB;AACDC,IAAAA,SAAS,EAAC;AAAyC,GAAA,CAEtD;AAED,EAAA;AAAA;AACE;AACA;AACAC,IAAAA,IAAA,CAACC,OAAO,EAAA;AACNV,MAAAA,EAAE,EAAC,SAAS;AACZC,MAAAA,IAAI,EAAC,OAAO;AACZ,MAAA,iBAAA,EAAiBN,QAAS;MAC1Ba,SAAS,EAAEG,IAAI,CAAC,OAAO,EAAEjB,MAAM,KAAK,IAAI,IAAI,4CAA4C,CAAE;MAAAkB,QAAA,EAAA,CAEzFlB,MAAM,IAAI,IAAI,GAAGG,MAAM,GAAG,IAAI,EAC9BL,IAAI,CAACqB,OAAO,CAACC,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,kBAC9BlB,GAAA,CAACmB;AACC;AAAA,QAAA;AAEAzB,QAAAA,IAAI,EAAEuB,MAAO;AACbtB,QAAAA,WAAW,EAAEA,WAAY;AACzBC,QAAAA,MAAM,EAAEA;OAAO,EAHVsB,KAGU,CAElB,CAAC;KACK;AAAC;AAEd;;;;"}

package/build/inputs/SelectInput/ItemView/SelectInputItemView.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var SelectInput_utils = require('../SelectInput.utils.js');
+var SelectInputOption = require('../Option/SelectInputOption.js');
+var SelectInputGroupItemView = require('./GroupItemView/SelectInputGroupItemView.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function SelectInputItemView({
+  item,
+  renderValue,
+  needle
+}) {
+  switch (item.type) {
+    case 'option':
+      {
+        if (item.value != null && (needle == null || SelectInput_utils.selectInputOptionItemIncludesNeedle(item, needle))) {
+          return /*#__PURE__*/jsxRuntime.jsx(SelectInputOption.SelectInputOption, {
+            value: item.value,
+            disabled: item.disabled,
+            children: renderValue(item.value, false)
+          });
+        }
+        break;
+      }
+    case 'group':
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(SelectInputGroupItemView.SelectInputGroupItemView, {
+          item: item,
+          renderValue: renderValue,
+          needle: needle
+        });
+      }
+    case 'separator':
+      {
+        if (needle == null) {
+          return /*#__PURE__*/jsxRuntime.jsx("hr", {
+            className: "np-select-input-separator-item"
+          });
+        }
+        break;
+      }
+  }
+  return null;
+}
+
+exports.SelectInputItemView = SelectInputItemView;
+//# sourceMappingURL=SelectInputItemView.js.map

package/build/inputs/SelectInput/ItemView/SelectInputItemView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputItemView.js","sources":["../../../../src/inputs/SelectInput/ItemView/SelectInputItemView.tsx"],"sourcesContent":["import { selectInputOptionItemIncludesNeedle } from '../SelectInput.utils';\nimport { SelectInputItem, SelectInputProps } from '../SelectInput.types';\nimport { SelectInputOption } from '../Option';\nimport { SelectInputGroupItemView } from './GroupItemView';\n\nexport interface SelectInputItemViewProps<\n  T = string,\n  I extends SelectInputItem<T | undefined> = SelectInputItem<T | undefined>,\n> extends Required<Pick<SelectInputProps<T>, 'renderValue'>> {\n  item: I;\n  needle: string | null | undefined;\n}\n\n/**\n * Component that renders different types of SelectInput items:\n * options, groups, or separators.\n */\nexport function SelectInputItemView<T = string>({\n  item,\n  renderValue,\n  needle,\n}: SelectInputItemViewProps<T>) {\n  switch (item.type) {\n    case 'option': {\n      if (\n        item.value != null &&\n        (needle == null || selectInputOptionItemIncludesNeedle(item, needle))\n      ) {\n        return (\n          <SelectInputOption value={item.value} disabled={item.disabled}>\n            {renderValue(item.value, false)}\n          </SelectInputOption>\n        );\n      }\n      break;\n    }\n    case 'group': {\n      return <SelectInputGroupItemView item={item} renderValue={renderValue} needle={needle} />;\n    }\n    case 'separator': {\n      if (needle == null) {\n        return <hr className=\"np-select-input-separator-item\" />;\n      }\n      break;\n    }\n  }\n  return null;\n}\n"],"names":["SelectInputItemView","item","renderValue","needle","type","value","selectInputOptionItemIncludesNeedle","_jsx","SelectInputOption","disabled","children","SelectInputGroupItemView","className"],"mappings":";;;;;;;AAiBM,SAAUA,mBAAmBA,CAAa;EAC9CC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAM,CACsB,EAAA;EAC5B,QAAQF,IAAI,CAACG,IAAI;AACf,IAAA,KAAK,QAAQ;AAAE,MAAA;AACb,QAAA,IACEH,IAAI,CAACI,KAAK,IAAI,IAAI,KACjBF,MAAM,IAAI,IAAI,IAAIG,qDAAmC,CAACL,IAAI,EAAEE,MAAM,CAAC,CAAC,EACrE;UACA,oBACEI,cAAA,CAACC,mCAAiB,EAAA;YAACH,KAAK,EAAEJ,IAAI,CAACI,KAAM;YAACI,QAAQ,EAAER,IAAI,CAACQ,QAAS;AAAAC,YAAAA,QAAA,EAC3DR,WAAW,CAACD,IAAI,CAACI,KAAK,EAAE,KAAK;AAAC,WACd,CAAC;AAExB,QAAA;AACA,QAAA;AACF,MAAA;AACA,IAAA,KAAK,OAAO;AAAE,MAAA;QACZ,oBAAOE,cAAA,CAACI,iDAAwB,EAAA;AAACV,UAAAA,IAAI,EAAEA,IAAK;AAACC,UAAAA,WAAW,EAAEA,WAAY;AAACC,UAAAA,MAAM,EAAEA;AAAO,SAAA,CAAG;AAC3F,MAAA;AACA,IAAA,KAAK,WAAW;AAAE,MAAA;QAChB,IAAIA,MAAM,IAAI,IAAI,EAAE;AAClB,UAAA,oBAAOI,cAAA,CAAA,IAAA,EAAA;AAAIK,YAAAA,SAAS,EAAC;AAAgC,YAAG;AAC1D,QAAA;AACA,QAAA;AACF,MAAA;AACF;AACA,EAAA,OAAO,IAAI;AACb;;;;"}

package/build/inputs/SelectInput/ItemView/SelectInputItemView.mjs

@@ -0,0 +1,45 @@
+import { selectInputOptionItemIncludesNeedle } from '../SelectInput.utils.mjs';
+import { SelectInputOption } from '../Option/SelectInputOption.mjs';
+import { SelectInputGroupItemView } from './GroupItemView/SelectInputGroupItemView.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+function SelectInputItemView({
+  item,
+  renderValue,
+  needle
+}) {
+  switch (item.type) {
+    case 'option':
+      {
+        if (item.value != null && (needle == null || selectInputOptionItemIncludesNeedle(item, needle))) {
+          return /*#__PURE__*/jsx(SelectInputOption, {
+            value: item.value,
+            disabled: item.disabled,
+            children: renderValue(item.value, false)
+          });
+        }
+        break;
+      }
+    case 'group':
+      {
+        return /*#__PURE__*/jsx(SelectInputGroupItemView, {
+          item: item,
+          renderValue: renderValue,
+          needle: needle
+        });
+      }
+    case 'separator':
+      {
+        if (needle == null) {
+          return /*#__PURE__*/jsx("hr", {
+            className: "np-select-input-separator-item"
+          });
+        }
+        break;
+      }
+  }
+  return null;
+}
+
+export { SelectInputItemView };
+//# sourceMappingURL=SelectInputItemView.mjs.map

package/build/inputs/SelectInput/ItemView/SelectInputItemView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputItemView.mjs","sources":["../../../../src/inputs/SelectInput/ItemView/SelectInputItemView.tsx"],"sourcesContent":["import { selectInputOptionItemIncludesNeedle } from '../SelectInput.utils';\nimport { SelectInputItem, SelectInputProps } from '../SelectInput.types';\nimport { SelectInputOption } from '../Option';\nimport { SelectInputGroupItemView } from './GroupItemView';\n\nexport interface SelectInputItemViewProps<\n  T = string,\n  I extends SelectInputItem<T | undefined> = SelectInputItem<T | undefined>,\n> extends Required<Pick<SelectInputProps<T>, 'renderValue'>> {\n  item: I;\n  needle: string | null | undefined;\n}\n\n/**\n * Component that renders different types of SelectInput items:\n * options, groups, or separators.\n */\nexport function SelectInputItemView<T = string>({\n  item,\n  renderValue,\n  needle,\n}: SelectInputItemViewProps<T>) {\n  switch (item.type) {\n    case 'option': {\n      if (\n        item.value != null &&\n        (needle == null || selectInputOptionItemIncludesNeedle(item, needle))\n      ) {\n        return (\n          <SelectInputOption value={item.value} disabled={item.disabled}>\n            {renderValue(item.value, false)}\n          </SelectInputOption>\n        );\n      }\n      break;\n    }\n    case 'group': {\n      return <SelectInputGroupItemView item={item} renderValue={renderValue} needle={needle} />;\n    }\n    case 'separator': {\n      if (needle == null) {\n        return <hr className=\"np-select-input-separator-item\" />;\n      }\n      break;\n    }\n  }\n  return null;\n}\n"],"names":["SelectInputItemView","item","renderValue","needle","type","value","selectInputOptionItemIncludesNeedle","_jsx","SelectInputOption","disabled","children","SelectInputGroupItemView","className"],"mappings":";;;;;AAiBM,SAAUA,mBAAmBA,CAAa;EAC9CC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAM,CACsB,EAAA;EAC5B,QAAQF,IAAI,CAACG,IAAI;AACf,IAAA,KAAK,QAAQ;AAAE,MAAA;AACb,QAAA,IACEH,IAAI,CAACI,KAAK,IAAI,IAAI,KACjBF,MAAM,IAAI,IAAI,IAAIG,mCAAmC,CAACL,IAAI,EAAEE,MAAM,CAAC,CAAC,EACrE;UACA,oBACEI,GAAA,CAACC,iBAAiB,EAAA;YAACH,KAAK,EAAEJ,IAAI,CAACI,KAAM;YAACI,QAAQ,EAAER,IAAI,CAACQ,QAAS;AAAAC,YAAAA,QAAA,EAC3DR,WAAW,CAACD,IAAI,CAACI,KAAK,EAAE,KAAK;AAAC,WACd,CAAC;AAExB,QAAA;AACA,QAAA;AACF,MAAA;AACA,IAAA,KAAK,OAAO;AAAE,MAAA;QACZ,oBAAOE,GAAA,CAACI,wBAAwB,EAAA;AAACV,UAAAA,IAAI,EAAEA,IAAK;AAACC,UAAAA,WAAW,EAAEA,WAAY;AAACC,UAAAA,MAAM,EAAEA;AAAO,SAAA,CAAG;AAC3F,MAAA;AACA,IAAA,KAAK,WAAW;AAAE,MAAA;QAChB,IAAIA,MAAM,IAAI,IAAI,EAAE;AAClB,UAAA,oBAAOI,GAAA,CAAA,IAAA,EAAA;AAAIK,YAAAA,SAAS,EAAC;AAAgC,YAAG;AAC1D,QAAA;AACA,QAAA;AACF,MAAA;AACF;AACA,EAAA,OAAO,IAAI;AACb;;;;"}

package/build/inputs/SelectInput/Option/SelectInputOption.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var icons = require('@transferwise/icons');
+var clsx = require('clsx');
+var React = require('react');
+var react = require('@headlessui/react');
+var SelectInput_contexts = require('../SelectInput.contexts.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function SelectInputOption({
+  value,
+  disabled,
+  children
+}) {
+  const itemsCount = React.useContext(SelectInput_contexts.SelectInputItemsCountContext);
+  const itemPosition = React.useContext(SelectInput_contexts.SelectInputItemPositionContext);
+  return /*#__PURE__*/jsxRuntime.jsx(react.ListboxOption, {
+    as: "div",
+    value: value,
+    "aria-setsize": itemsCount,
+    "aria-posinset": itemPosition,
+    disabled: disabled,
+    className: ({
+      active,
+      disabled: uiDisabled
+    }) => clsx.clsx('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', uiDisabled && 'np-select-input-option-container--disabled'),
+    children: ({
+      selected
+    }) => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "np-select-input-option",
+        children: children
+      }), /*#__PURE__*/jsxRuntime.jsx(icons.Check, {
+        size: 16,
+        className: clsx.clsx('np-select-input-option-check', !selected && 'np-select-input-option-check--not-selected')
+      })]
+    })
+  });
+}
+
+exports.SelectInputOption = SelectInputOption;
+//# sourceMappingURL=SelectInputOption.js.map

package/build/inputs/SelectInput/Option/SelectInputOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputOption.js","sources":["../../../../src/inputs/SelectInput/Option/SelectInputOption.tsx"],"sourcesContent":["import { Check } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useContext } from 'react';\nimport { ListboxOption } from '@headlessui/react';\nimport {\n  SelectInputItemsCountContext,\n  SelectInputItemPositionContext,\n} from '../SelectInput.contexts';\n\nexport interface SelectInputOptionProps<T = string> {\n  value: T;\n  disabled?: boolean;\n  children?: React.ReactNode;\n}\n\n/**\n * A selectable option in a SelectInput dropdown.\n * Includes accessibility support and styling for selected, active, and disabled states.\n */\nexport function SelectInputOption<T = string>({\n  value,\n  disabled,\n  children,\n}: SelectInputOptionProps<T>) {\n  const itemsCount = useContext(SelectInputItemsCountContext);\n  const itemPosition = useContext(SelectInputItemPositionContext);\n\n  return (\n    <ListboxOption\n      as=\"div\"\n      value={value}\n      aria-setsize={itemsCount}\n      aria-posinset={itemPosition}\n      disabled={disabled}\n      className={({ active, disabled: uiDisabled }) =>\n        clsx(\n          'np-select-input-option-container np-text-body-large',\n          active && 'np-select-input-option-container--active',\n          uiDisabled && 'np-select-input-option-container--disabled',\n        )\n      }\n    >\n      {({ selected }) => (\n        <>\n          <div className=\"np-select-input-option\">{children}</div>\n          <Check\n            size={16}\n            className={clsx(\n              'np-select-input-option-check',\n              !selected && 'np-select-input-option-check--not-selected',\n            )}\n          />\n        </>\n      )}\n    </ListboxOption>\n  );\n}\n"],"names":["SelectInputOption","value","disabled","children","itemsCount","useContext","SelectInputItemsCountContext","itemPosition","SelectInputItemPositionContext","_jsx","ListboxOption","as","className","active","uiDisabled","clsx","selected","_jsxs","_Fragment","Check","size"],"mappings":";;;;;;;;;AAmBM,SAAUA,iBAAiBA,CAAa;EAC5CC,KAAK;EACLC,QAAQ;AACRC,EAAAA;AAAQ,CACkB,EAAA;AAC1B,EAAA,MAAMC,UAAU,GAAGC,gBAAU,CAACC,iDAA4B,CAAC;AAC3D,EAAA,MAAMC,YAAY,GAAGF,gBAAU,CAACG,mDAA8B,CAAC;EAE/D,oBACEC,cAAA,CAACC,mBAAa,EAAA;AACZC,IAAAA,EAAE,EAAC,KAAK;AACRV,IAAAA,KAAK,EAAEA,KAAM;AACb,IAAA,cAAA,EAAcG,UAAW;AACzB,IAAA,eAAA,EAAeG,YAAa;AAC5BL,IAAAA,QAAQ,EAAEA,QAAS;AACnBU,IAAAA,SAAS,EAAEA,CAAC;MAAEC,MAAM;AAAEX,MAAAA,QAAQ,EAAEY;AAAU,KAAE,KAC1CC,SAAI,CACF,qDAAqD,EACrDF,MAAM,IAAI,0CAA0C,EACpDC,UAAU,IAAI,4CAA4C,CAE7D;AAAAX,IAAAA,QAAA,EAEAA,CAAC;AAAEa,MAAAA;KAAU,kBACZC,eAAA,CAAAC,mBAAA,EAAA;AAAAf,MAAAA,QAAA,gBACEM,cAAA,CAAA,KAAA,EAAA;AAAKG,QAAAA,SAAS,EAAC,wBAAwB;AAAAT,QAAAA,QAAA,EAAEA;AAAQ,OAAM,CACvD,eAAAM,cAAA,CAACU,WAAK,EAAA;AACJC,QAAAA,IAAI,EAAE,EAAG;QACTR,SAAS,EAAEG,SAAI,CACb,8BAA8B,EAC9B,CAACC,QAAQ,IAAI,4CAA4C;AACzD,OAAA,CAEN;KAAA;AACD,GACY,CAAC;AAEpB;;;;"}

package/build/inputs/SelectInput/Option/SelectInputOption.mjs

@@ -0,0 +1,40 @@
+import { Check } from '@transferwise/icons';
+import { clsx } from 'clsx';
+import { useContext } from 'react';
+import { ListboxOption } from '@headlessui/react';
+import { SelectInputItemsCountContext, SelectInputItemPositionContext } from '../SelectInput.contexts.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function SelectInputOption({
+  value,
+  disabled,
+  children
+}) {
+  const itemsCount = useContext(SelectInputItemsCountContext);
+  const itemPosition = useContext(SelectInputItemPositionContext);
+  return /*#__PURE__*/jsx(ListboxOption, {
+    as: "div",
+    value: value,
+    "aria-setsize": itemsCount,
+    "aria-posinset": itemPosition,
+    disabled: disabled,
+    className: ({
+      active,
+      disabled: uiDisabled
+    }) => clsx('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', uiDisabled && 'np-select-input-option-container--disabled'),
+    children: ({
+      selected
+    }) => /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: "np-select-input-option",
+        children: children
+      }), /*#__PURE__*/jsx(Check, {
+        size: 16,
+        className: clsx('np-select-input-option-check', !selected && 'np-select-input-option-check--not-selected')
+      })]
+    })
+  });
+}
+
+export { SelectInputOption };
+//# sourceMappingURL=SelectInputOption.mjs.map

package/build/inputs/SelectInput/Option/SelectInputOption.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputOption.mjs","sources":["../../../../src/inputs/SelectInput/Option/SelectInputOption.tsx"],"sourcesContent":["import { Check } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useContext } from 'react';\nimport { ListboxOption } from '@headlessui/react';\nimport {\n  SelectInputItemsCountContext,\n  SelectInputItemPositionContext,\n} from '../SelectInput.contexts';\n\nexport interface SelectInputOptionProps<T = string> {\n  value: T;\n  disabled?: boolean;\n  children?: React.ReactNode;\n}\n\n/**\n * A selectable option in a SelectInput dropdown.\n * Includes accessibility support and styling for selected, active, and disabled states.\n */\nexport function SelectInputOption<T = string>({\n  value,\n  disabled,\n  children,\n}: SelectInputOptionProps<T>) {\n  const itemsCount = useContext(SelectInputItemsCountContext);\n  const itemPosition = useContext(SelectInputItemPositionContext);\n\n  return (\n    <ListboxOption\n      as=\"div\"\n      value={value}\n      aria-setsize={itemsCount}\n      aria-posinset={itemPosition}\n      disabled={disabled}\n      className={({ active, disabled: uiDisabled }) =>\n        clsx(\n          'np-select-input-option-container np-text-body-large',\n          active && 'np-select-input-option-container--active',\n          uiDisabled && 'np-select-input-option-container--disabled',\n        )\n      }\n    >\n      {({ selected }) => (\n        <>\n          <div className=\"np-select-input-option\">{children}</div>\n          <Check\n            size={16}\n            className={clsx(\n              'np-select-input-option-check',\n              !selected && 'np-select-input-option-check--not-selected',\n            )}\n          />\n        </>\n      )}\n    </ListboxOption>\n  );\n}\n"],"names":["SelectInputOption","value","disabled","children","itemsCount","useContext","SelectInputItemsCountContext","itemPosition","SelectInputItemPositionContext","_jsx","ListboxOption","as","className","active","uiDisabled","clsx","selected","_jsxs","_Fragment","Check","size"],"mappings":";;;;;;;AAmBM,SAAUA,iBAAiBA,CAAa;EAC5CC,KAAK;EACLC,QAAQ;AACRC,EAAAA;AAAQ,CACkB,EAAA;AAC1B,EAAA,MAAMC,UAAU,GAAGC,UAAU,CAACC,4BAA4B,CAAC;AAC3D,EAAA,MAAMC,YAAY,GAAGF,UAAU,CAACG,8BAA8B,CAAC;EAE/D,oBACEC,GAAA,CAACC,aAAa,EAAA;AACZC,IAAAA,EAAE,EAAC,KAAK;AACRV,IAAAA,KAAK,EAAEA,KAAM;AACb,IAAA,cAAA,EAAcG,UAAW;AACzB,IAAA,eAAA,EAAeG,YAAa;AAC5BL,IAAAA,QAAQ,EAAEA,QAAS;AACnBU,IAAAA,SAAS,EAAEA,CAAC;MAAEC,MAAM;AAAEX,MAAAA,QAAQ,EAAEY;AAAU,KAAE,KAC1CC,IAAI,CACF,qDAAqD,EACrDF,MAAM,IAAI,0CAA0C,EACpDC,UAAU,IAAI,4CAA4C,CAE7D;AAAAX,IAAAA,QAAA,EAEAA,CAAC;AAAEa,MAAAA;KAAU,kBACZC,IAAA,CAAAC,QAAA,EAAA;AAAAf,MAAAA,QAAA,gBACEM,GAAA,CAAA,KAAA,EAAA;AAAKG,QAAAA,SAAS,EAAC,wBAAwB;AAAAT,QAAAA,QAAA,EAAEA;AAAQ,OAAM,CACvD,eAAAM,GAAA,CAACU,KAAK,EAAA;AACJC,QAAAA,IAAI,EAAE,EAAG;QACTR,SAAS,EAAEG,IAAI,CACb,8BAA8B,EAC9B,CAACC,QAAQ,IAAI,4CAA4C;AACzD,OAAA,CAEN;KAAA;AACD,GACY,CAAC;AAEpB;;;;"}

package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+var SelectInput_contexts = require('../SelectInput.contexts.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function SelectInputOptionContent({
+  title,
+  note,
+  description,
+  icon
+}) {
+  const withinTrigger = React.useContext(SelectInput_contexts.SelectInputOptionContentWithinTriggerContext);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: clsx.clsx('np-select-input-option-content-container', (note || description) && 'np-text-body-large'),
+    children: [icon ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: clsx.clsx('np-select-input-option-content-icon', !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger'),
+      children: icon
+    }) : null, /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "np-select-input-option-content-text",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: clsx.clsx('np-select-input-option-content-text-line-1', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "d-inline",
+          children: title
+        }), note ? /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "np-select-input-option-content-text-secondary np-text-body-default",
+          children: note
+        }) : null]
+      }), description ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: clsx.clsx('np-select-input-option-content-text-secondary np-text-body-default', withinTrigger && 'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger'),
+        children: description
+      }) : null]
+    })]
+  });
+}
+
+exports.SelectInputOptionContent = SelectInputOptionContent;
+//# sourceMappingURL=SelectInputOptionContent.js.map

package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputOptionContent.js","sources":["../../../../src/inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useContext } from 'react';\nimport { SelectInputOptionContentWithinTriggerContext } from '../SelectInput.contexts';\n\nexport interface SelectInputOptionContentProps {\n  title: React.ReactNode;\n  note?: string;\n  description?: string;\n  icon?: React.ReactNode;\n}\n\n/**\n * Component for rendering structured content within a SelectInput option.\n * Supports title, optional note, description, and icon with different styling\n * based on whether it's rendered within the trigger button or the dropdown.\n */\nexport function SelectInputOptionContent({\n  title,\n  note,\n  description,\n  icon,\n}: SelectInputOptionContentProps) {\n  const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);\n\n  return (\n    <div\n      className={clsx(\n        'np-select-input-option-content-container',\n        (note || description) && 'np-text-body-large',\n      )}\n    >\n      {icon ? (\n        <div\n          className={clsx(\n            'np-select-input-option-content-icon',\n            !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger',\n          )}\n        >\n          {icon}\n        </div>\n      ) : null}\n\n      <div className=\"np-select-input-option-content-text\">\n        <div\n          className={clsx(\n            'np-select-input-option-content-text-line-1',\n            withinTrigger && 'np-select-input-option-content-text-within-trigger',\n          )}\n        >\n          <div className=\"d-inline\">{title}</div>\n          {note ? (\n            <span className=\"np-select-input-option-content-text-secondary np-text-body-default\">\n              {note}\n            </span>\n          ) : null}\n        </div>\n\n        {description ? (\n          <div\n            className={clsx(\n              'np-select-input-option-content-text-secondary np-text-body-default',\n              withinTrigger &&\n                'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger',\n            )}\n          >\n            {description}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"],"names":["SelectInputOptionContent","title","note","description","icon","withinTrigger","useContext","SelectInputOptionContentWithinTriggerContext","_jsxs","className","clsx","children","_jsx"],"mappings":";;;;;;;AAgBM,SAAUA,wBAAwBA,CAAC;EACvCC,KAAK;EACLC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAI,CAC0B,EAAA;AAC9B,EAAA,MAAMC,aAAa,GAAGC,gBAAU,CAACC,iEAA4C,CAAC;AAE9E,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,SAAI,CACb,0CAA0C,EAC1C,CAACR,IAAI,IAAIC,WAAW,KAAK,oBAAoB,CAC7C;IAAAQ,QAAA,EAAA,CAEDP,IAAI,gBACHQ,cAAA,CAAA,KAAA,EAAA;MACEH,SAAS,EAAEC,SAAI,CACb,qCAAqC,EACrC,CAACL,aAAa,IAAI,yDAAyD,CAC3E;AAAAM,MAAAA,QAAA,EAEDP;AAAI,KACF,CAAC,GACJ,IAAI,eAERI,eAAA,CAAA,KAAA,EAAA;AAAKC,MAAAA,SAAS,EAAC,qCAAqC;AAAAE,MAAAA,QAAA,gBAClDH,eAAA,CAAA,KAAA,EAAA;QACEC,SAAS,EAAEC,SAAI,CACb,4CAA4C,EAC5CL,aAAa,IAAI,oDAAoD,CACrE;AAAAM,QAAAA,QAAA,gBAEFC,cAAA,CAAA,KAAA,EAAA;AAAKH,UAAAA,SAAS,EAAC,UAAU;AAAAE,UAAAA,QAAA,EAAEV;AAAK,SAAM,CACtC,EAACC,IAAI,gBACHU,cAAA,CAAA,MAAA,EAAA;AAAMH,UAAAA,SAAS,EAAC,oEAAoE;AAAAE,UAAAA,QAAA,EACjFT;SACG,CAAC,GACL,IAAI;AAAA,OACL,CAEL,EAACC,WAAW,gBACVS,cAAA,CAAA,KAAA,EAAA;QACEH,SAAS,EAAEC,SAAI,CACb,oEAAoE,EACpEL,aAAa,IACX,kGAAkG,CACpG;AAAAM,QAAAA,QAAA,EAEDR;OACE,CAAC,GACJ,IAAI;AAAA,KACL,CACP;AAAA,GAAK,CAAC;AAEV;;;;"}