@transferwise/components 46.162.1 → 46.163.0

package/build/Calendar/DateHeader/DateHeader.js

@@ -60,9 +60,7 @@ const DateHeader = ({
         "aria-label": `${intl.formatMessage(Calendar_messages.default.previous)} ${dateMode}`,
         disabled: isPreviousDisabled,
         onClick: onPreviousClick,
-        children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronLeft, {
-          className: "left-single-direction"
-        })
+        children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronStart, {})
       })
     }), label && /*#__PURE__*/jsxRuntime.jsx(Title.default, {
       type: typography.Typography.TITLE_BODY,
@@ -90,9 +88,7 @@ const DateHeader = ({
         priority: "minimal",
         disabled: isNextDisabled,
         onClick: onNextClick,
-        children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronRight, {
-          className: "right-single-direction"
-        })
+        children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronEnd, {})
       })
     })]
   });

package/build/Calendar/DateHeader/DateHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateHeader.js","sources":["../../../src/Calendar/DateHeader/DateHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Typography } from '../../common';\nimport { useLayout } from '../../common/hooks';\nimport Title from '../../Title';\nimport messages from '../Calendar.messages';\nimport Button from '../../Button/Button';\nimport { ChevronDown, ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport IconButton from '../../IconButton';\n\ninterface DateHeaderProps {\n  label?: string;\n  onLabelClick?: () => void;\n  onPreviousClick: () => void;\n  onNextClick: () => void;\n  dateMode: string;\n  isPreviousDisabled?: boolean;\n  isNextDisabled?: boolean;\n}\n\nconst DateHeader: React.FC<DateHeaderProps> = ({\n  label,\n  onLabelClick,\n  onPreviousClick,\n  onNextClick,\n  dateMode,\n  isPreviousDisabled,\n  isNextDisabled,\n}) => {\n  const intl = useIntl();\n  const { isMobile } = useLayout();\n  return (\n    <div className={clsx('text-xs-center', !isMobile && ['clearfix', 'p-y-1'])}>\n      <div className=\"pull-left-single-direction\">\n        <IconButton\n          size={40}\n          priority=\"minimal\"\n          className=\"d-inline-flex\"\n          aria-label={`${intl.formatMessage(messages.previous)} ${dateMode}`}\n          disabled={isPreviousDisabled}\n          onClick={onPreviousClick}\n        >\n          <ChevronLeft className=\"left-single-direction\" />\n        </IconButton>\n      </div>\n      {label && (\n        <Title type={Typography.TITLE_BODY} className=\"tw-date-lookup-header-current-container\">\n          <Button\n            v2\n            size=\"md\"\n            type=\"button\"\n            priority=\"tertiary\"\n            className=\"tw-date-lookup-header-current\"\n            aria-label={intl.formatMessage(messages.goTo20YearView)}\n            addonEnd={{ type: 'icon', value: <ChevronDown /> }}\n            onClick={onLabelClick}\n          >\n            {label}\n          </Button>\n        </Title>\n      )}\n      <div className=\"pull-right-single-direction\">\n        <IconButton\n          size={40}\n          className=\"d-inline-flex\"\n          aria-label={`${intl.formatMessage(messages.next)} ${dateMode}`}\n          priority=\"minimal\"\n          disabled={isNextDisabled}\n          onClick={onNextClick}\n        >\n          <ChevronRight className=\"right-single-direction\" />\n        </IconButton>\n      </div>\n    </div>\n  );\n};\n\nexport default DateHeader;\n"],"names":["DateHeader","label","onLabelClick","onPreviousClick","onNextClick","dateMode","isPreviousDisabled","isNextDisabled","intl","useIntl","isMobile","useLayout","_jsxs","className","clsx","children","_jsx","IconButton","size","priority","formatMessage","messages","previous","disabled","onClick","ChevronLeft","Title","type","Typography","TITLE_BODY","Button","v2","goTo20YearView","addonEnd","value","ChevronDown","next","ChevronRight"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,UAAU,GAA8BA,CAAC;EAC7CC,KAAK;EACLC,YAAY;EACZC,eAAe;EACfC,WAAW;EACXC,QAAQ;EACRC,kBAAkB;AAClBC,EAAAA;AAAc,CACf,KAAI;AACH,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EACtB,MAAM;AAAEC,IAAAA;GAAU,GAAGC,mBAAS,EAAE;AAChC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAEC,SAAI,CAAC,gBAAgB,EAAE,CAACJ,QAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAE;AAAAK,IAAAA,QAAA,gBACzEC,cAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,4BAA4B;MAAAE,QAAA,eACzCC,cAAA,CAACC,kBAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,SAAS;AAClBN,QAAAA,SAAS,EAAC,eAAe;QACzB,YAAA,EAAY,CAAA,EAAGL,IAAI,CAACY,aAAa,CAACC,yBAAQ,CAACC,QAAQ,CAAC,CAAA,CAAA,EAAIjB,QAAQ,CAAA,CAAG;AACnEkB,QAAAA,QAAQ,EAAEjB,kBAAmB;AAC7BkB,QAAAA,OAAO,EAAErB,eAAgB;QAAAY,QAAA,eAEzBC,cAAA,CAACS,iBAAW,EAAA;AAACZ,UAAAA,SAAS,EAAC;SAAuB;OACpC;AACd,KAAK,CACL,EAACZ,KAAK,iBACJe,cAAA,CAACU,aAAK,EAAA;MAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAChB,MAAAA,SAAS,EAAC,yCAAyC;MAAAE,QAAA,eACrFC,cAAA,CAACc,cAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFb,QAAAA,IAAI,EAAC,IAAI;AACTS,QAAAA,IAAI,EAAC,QAAQ;AACbR,QAAAA,QAAQ,EAAC,UAAU;AACnBN,QAAAA,SAAS,EAAC,+BAA+B;AACzC,QAAA,YAAA,EAAYL,IAAI,CAACY,aAAa,CAACC,yBAAQ,CAACW,cAAc,CAAE;AACxDC,QAAAA,QAAQ,EAAE;AAAEN,UAAAA,IAAI,EAAE,MAAM;AAAEO,UAAAA,KAAK,eAAElB,cAAA,CAACmB,iBAAW,EAAA,EAAA;SAAM;AACnDX,QAAAA,OAAO,EAAEtB,YAAa;AAAAa,QAAAA,QAAA,EAErBd;OACK;KACH,CACR,eACDe,cAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,6BAA6B;MAAAE,QAAA,eAC1CC,cAAA,CAACC,kBAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTL,QAAAA,SAAS,EAAC,eAAe;QACzB,YAAA,EAAY,CAAA,EAAGL,IAAI,CAACY,aAAa,CAACC,yBAAQ,CAACe,IAAI,CAAC,CAAA,CAAA,EAAI/B,QAAQ,CAAA,CAAG;AAC/Dc,QAAAA,QAAQ,EAAC,SAAS;AAClBI,QAAAA,QAAQ,EAAEhB,cAAe;AACzBiB,QAAAA,OAAO,EAAEpB,WAAY;QAAAW,QAAA,eAErBC,cAAA,CAACqB,kBAAY,EAAA;AAACxB,UAAAA,SAAS,EAAC;SAAwB;OACtC;AACd,KAAK,CACP;AAAA,GAAK,CAAC;AAEV;;"}
+{"version":3,"file":"DateHeader.js","sources":["../../../src/Calendar/DateHeader/DateHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Typography } from '../../common';\nimport { useLayout } from '../../common/hooks';\nimport Title from '../../Title';\nimport messages from '../Calendar.messages';\nimport Button from '../../Button/Button';\nimport { ChevronDown, ChevronStart, ChevronEnd } from '@transferwise/icons';\nimport IconButton from '../../IconButton';\n\ninterface DateHeaderProps {\n  label?: string;\n  onLabelClick?: () => void;\n  onPreviousClick: () => void;\n  onNextClick: () => void;\n  dateMode: string;\n  isPreviousDisabled?: boolean;\n  isNextDisabled?: boolean;\n}\n\nconst DateHeader: React.FC<DateHeaderProps> = ({\n  label,\n  onLabelClick,\n  onPreviousClick,\n  onNextClick,\n  dateMode,\n  isPreviousDisabled,\n  isNextDisabled,\n}) => {\n  const intl = useIntl();\n  const { isMobile } = useLayout();\n  return (\n    <div className={clsx('text-xs-center', !isMobile && ['clearfix', 'p-y-1'])}>\n      <div className=\"pull-left-single-direction\">\n        <IconButton\n          size={40}\n          priority=\"minimal\"\n          className=\"d-inline-flex\"\n          aria-label={`${intl.formatMessage(messages.previous)} ${dateMode}`}\n          disabled={isPreviousDisabled}\n          onClick={onPreviousClick}\n        >\n          <ChevronStart />\n        </IconButton>\n      </div>\n      {label && (\n        <Title type={Typography.TITLE_BODY} className=\"tw-date-lookup-header-current-container\">\n          <Button\n            v2\n            size=\"md\"\n            type=\"button\"\n            priority=\"tertiary\"\n            className=\"tw-date-lookup-header-current\"\n            aria-label={intl.formatMessage(messages.goTo20YearView)}\n            addonEnd={{ type: 'icon', value: <ChevronDown /> }}\n            onClick={onLabelClick}\n          >\n            {label}\n          </Button>\n        </Title>\n      )}\n      <div className=\"pull-right-single-direction\">\n        <IconButton\n          size={40}\n          className=\"d-inline-flex\"\n          aria-label={`${intl.formatMessage(messages.next)} ${dateMode}`}\n          priority=\"minimal\"\n          disabled={isNextDisabled}\n          onClick={onNextClick}\n        >\n          <ChevronEnd />\n        </IconButton>\n      </div>\n    </div>\n  );\n};\n\nexport default DateHeader;\n"],"names":["DateHeader","label","onLabelClick","onPreviousClick","onNextClick","dateMode","isPreviousDisabled","isNextDisabled","intl","useIntl","isMobile","useLayout","_jsxs","className","clsx","children","_jsx","IconButton","size","priority","formatMessage","messages","previous","disabled","onClick","ChevronStart","Title","type","Typography","TITLE_BODY","Button","v2","goTo20YearView","addonEnd","value","ChevronDown","next","ChevronEnd"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,UAAU,GAA8BA,CAAC;EAC7CC,KAAK;EACLC,YAAY;EACZC,eAAe;EACfC,WAAW;EACXC,QAAQ;EACRC,kBAAkB;AAClBC,EAAAA;AAAc,CACf,KAAI;AACH,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EACtB,MAAM;AAAEC,IAAAA;GAAU,GAAGC,mBAAS,EAAE;AAChC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAEC,SAAI,CAAC,gBAAgB,EAAE,CAACJ,QAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAE;AAAAK,IAAAA,QAAA,gBACzEC,cAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,4BAA4B;MAAAE,QAAA,eACzCC,cAAA,CAACC,kBAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,SAAS;AAClBN,QAAAA,SAAS,EAAC,eAAe;QACzB,YAAA,EAAY,CAAA,EAAGL,IAAI,CAACY,aAAa,CAACC,yBAAQ,CAACC,QAAQ,CAAC,CAAA,CAAA,EAAIjB,QAAQ,CAAA,CAAG;AACnEkB,QAAAA,QAAQ,EAAEjB,kBAAmB;AAC7BkB,QAAAA,OAAO,EAAErB,eAAgB;AAAAY,QAAAA,QAAA,eAEzBC,cAAA,CAACS,kBAAY,EAAA,EAAA;OACH;AACd,KAAK,CACL,EAACxB,KAAK,iBACJe,cAAA,CAACU,aAAK,EAAA;MAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAChB,MAAAA,SAAS,EAAC,yCAAyC;MAAAE,QAAA,eACrFC,cAAA,CAACc,cAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFb,QAAAA,IAAI,EAAC,IAAI;AACTS,QAAAA,IAAI,EAAC,QAAQ;AACbR,QAAAA,QAAQ,EAAC,UAAU;AACnBN,QAAAA,SAAS,EAAC,+BAA+B;AACzC,QAAA,YAAA,EAAYL,IAAI,CAACY,aAAa,CAACC,yBAAQ,CAACW,cAAc,CAAE;AACxDC,QAAAA,QAAQ,EAAE;AAAEN,UAAAA,IAAI,EAAE,MAAM;AAAEO,UAAAA,KAAK,eAAElB,cAAA,CAACmB,iBAAW,EAAA,EAAA;SAAM;AACnDX,QAAAA,OAAO,EAAEtB,YAAa;AAAAa,QAAAA,QAAA,EAErBd;OACK;KACH,CACR,eACDe,cAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,6BAA6B;MAAAE,QAAA,eAC1CC,cAAA,CAACC,kBAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTL,QAAAA,SAAS,EAAC,eAAe;QACzB,YAAA,EAAY,CAAA,EAAGL,IAAI,CAACY,aAAa,CAACC,yBAAQ,CAACe,IAAI,CAAC,CAAA,CAAA,EAAI/B,QAAQ,CAAA,CAAG;AAC/Dc,QAAAA,QAAQ,EAAC,SAAS;AAClBI,QAAAA,QAAQ,EAAEhB,cAAe;AACzBiB,QAAAA,OAAO,EAAEpB,WAAY;AAAAW,QAAAA,QAAA,eAErBC,cAAA,CAACqB,gBAAU,EAAA,EAAA;OACD;AACd,KAAK,CACP;AAAA,GAAK,CAAC;AAEV;;"}

package/build/Calendar/DateHeader/DateHeader.mjs

@@ -20,7 +20,7 @@ import '../../common/PropsValues/scroll.mjs';
 import '../../common/PropsValues/markdownNodeType.mjs';
 import '../../common/fileType.mjs';
 import '@transferwise/formatting';
-import { ChevronLeft, ChevronDown, ChevronRight } from '@transferwise/icons';
+import { ChevronStart, ChevronDown, ChevronEnd } from '@transferwise/icons';
 import 'react';
 import '../../common/CloseButton/CloseButton.messages.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -56,9 +56,7 @@ const DateHeader = ({
         "aria-label": `${intl.formatMessage(messages.previous)} ${dateMode}`,
         disabled: isPreviousDisabled,
         onClick: onPreviousClick,
-        children: /*#__PURE__*/jsx(ChevronLeft, {
-          className: "left-single-direction"
-        })
+        children: /*#__PURE__*/jsx(ChevronStart, {})
       })
     }), label && /*#__PURE__*/jsx(Title, {
       type: Typography.TITLE_BODY,
@@ -86,9 +84,7 @@ const DateHeader = ({
         priority: "minimal",
         disabled: isNextDisabled,
         onClick: onNextClick,
-        children: /*#__PURE__*/jsx(ChevronRight, {
-          className: "right-single-direction"
-        })
+        children: /*#__PURE__*/jsx(ChevronEnd, {})
       })
     })]
   });

package/build/Calendar/DateHeader/DateHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateHeader.mjs","sources":["../../../src/Calendar/DateHeader/DateHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Typography } from '../../common';\nimport { useLayout } from '../../common/hooks';\nimport Title from '../../Title';\nimport messages from '../Calendar.messages';\nimport Button from '../../Button/Button';\nimport { ChevronDown, ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport IconButton from '../../IconButton';\n\ninterface DateHeaderProps {\n  label?: string;\n  onLabelClick?: () => void;\n  onPreviousClick: () => void;\n  onNextClick: () => void;\n  dateMode: string;\n  isPreviousDisabled?: boolean;\n  isNextDisabled?: boolean;\n}\n\nconst DateHeader: React.FC<DateHeaderProps> = ({\n  label,\n  onLabelClick,\n  onPreviousClick,\n  onNextClick,\n  dateMode,\n  isPreviousDisabled,\n  isNextDisabled,\n}) => {\n  const intl = useIntl();\n  const { isMobile } = useLayout();\n  return (\n    <div className={clsx('text-xs-center', !isMobile && ['clearfix', 'p-y-1'])}>\n      <div className=\"pull-left-single-direction\">\n        <IconButton\n          size={40}\n          priority=\"minimal\"\n          className=\"d-inline-flex\"\n          aria-label={`${intl.formatMessage(messages.previous)} ${dateMode}`}\n          disabled={isPreviousDisabled}\n          onClick={onPreviousClick}\n        >\n          <ChevronLeft className=\"left-single-direction\" />\n        </IconButton>\n      </div>\n      {label && (\n        <Title type={Typography.TITLE_BODY} className=\"tw-date-lookup-header-current-container\">\n          <Button\n            v2\n            size=\"md\"\n            type=\"button\"\n            priority=\"tertiary\"\n            className=\"tw-date-lookup-header-current\"\n            aria-label={intl.formatMessage(messages.goTo20YearView)}\n            addonEnd={{ type: 'icon', value: <ChevronDown /> }}\n            onClick={onLabelClick}\n          >\n            {label}\n          </Button>\n        </Title>\n      )}\n      <div className=\"pull-right-single-direction\">\n        <IconButton\n          size={40}\n          className=\"d-inline-flex\"\n          aria-label={`${intl.formatMessage(messages.next)} ${dateMode}`}\n          priority=\"minimal\"\n          disabled={isNextDisabled}\n          onClick={onNextClick}\n        >\n          <ChevronRight className=\"right-single-direction\" />\n        </IconButton>\n      </div>\n    </div>\n  );\n};\n\nexport default DateHeader;\n"],"names":["DateHeader","label","onLabelClick","onPreviousClick","onNextClick","dateMode","isPreviousDisabled","isNextDisabled","intl","useIntl","isMobile","useLayout","_jsxs","className","clsx","children","_jsx","IconButton","size","priority","formatMessage","messages","previous","disabled","onClick","ChevronLeft","Title","type","Typography","TITLE_BODY","Button","v2","goTo20YearView","addonEnd","value","ChevronDown","next","ChevronRight"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,UAAU,GAA8BA,CAAC;EAC7CC,KAAK;EACLC,YAAY;EACZC,eAAe;EACfC,WAAW;EACXC,QAAQ;EACRC,kBAAkB;AAClBC,EAAAA;AAAc,CACf,KAAI;AACH,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EACtB,MAAM;AAAEC,IAAAA;GAAU,GAAGC,SAAS,EAAE;AAChC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAEC,IAAI,CAAC,gBAAgB,EAAE,CAACJ,QAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAE;AAAAK,IAAAA,QAAA,gBACzEC,GAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,4BAA4B;MAAAE,QAAA,eACzCC,GAAA,CAACC,UAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,SAAS;AAClBN,QAAAA,SAAS,EAAC,eAAe;QACzB,YAAA,EAAY,CAAA,EAAGL,IAAI,CAACY,aAAa,CAACC,QAAQ,CAACC,QAAQ,CAAC,CAAA,CAAA,EAAIjB,QAAQ,CAAA,CAAG;AACnEkB,QAAAA,QAAQ,EAAEjB,kBAAmB;AAC7BkB,QAAAA,OAAO,EAAErB,eAAgB;QAAAY,QAAA,eAEzBC,GAAA,CAACS,WAAW,EAAA;AAACZ,UAAAA,SAAS,EAAC;SAAuB;OACpC;AACd,KAAK,CACL,EAACZ,KAAK,iBACJe,GAAA,CAACU,KAAK,EAAA;MAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAChB,MAAAA,SAAS,EAAC,yCAAyC;MAAAE,QAAA,eACrFC,GAAA,CAACc,MAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFb,QAAAA,IAAI,EAAC,IAAI;AACTS,QAAAA,IAAI,EAAC,QAAQ;AACbR,QAAAA,QAAQ,EAAC,UAAU;AACnBN,QAAAA,SAAS,EAAC,+BAA+B;AACzC,QAAA,YAAA,EAAYL,IAAI,CAACY,aAAa,CAACC,QAAQ,CAACW,cAAc,CAAE;AACxDC,QAAAA,QAAQ,EAAE;AAAEN,UAAAA,IAAI,EAAE,MAAM;AAAEO,UAAAA,KAAK,eAAElB,GAAA,CAACmB,WAAW,EAAA,EAAA;SAAM;AACnDX,QAAAA,OAAO,EAAEtB,YAAa;AAAAa,QAAAA,QAAA,EAErBd;OACK;KACH,CACR,eACDe,GAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,6BAA6B;MAAAE,QAAA,eAC1CC,GAAA,CAACC,UAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTL,QAAAA,SAAS,EAAC,eAAe;QACzB,YAAA,EAAY,CAAA,EAAGL,IAAI,CAACY,aAAa,CAACC,QAAQ,CAACe,IAAI,CAAC,CAAA,CAAA,EAAI/B,QAAQ,CAAA,CAAG;AAC/Dc,QAAAA,QAAQ,EAAC,SAAS;AAClBI,QAAAA,QAAQ,EAAEhB,cAAe;AACzBiB,QAAAA,OAAO,EAAEpB,WAAY;QAAAW,QAAA,eAErBC,GAAA,CAACqB,YAAY,EAAA;AAACxB,UAAAA,SAAS,EAAC;SAAwB;OACtC;AACd,KAAK,CACP;AAAA,GAAK,CAAC;AAEV;;"}
+{"version":3,"file":"DateHeader.mjs","sources":["../../../src/Calendar/DateHeader/DateHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Typography } from '../../common';\nimport { useLayout } from '../../common/hooks';\nimport Title from '../../Title';\nimport messages from '../Calendar.messages';\nimport Button from '../../Button/Button';\nimport { ChevronDown, ChevronStart, ChevronEnd } from '@transferwise/icons';\nimport IconButton from '../../IconButton';\n\ninterface DateHeaderProps {\n  label?: string;\n  onLabelClick?: () => void;\n  onPreviousClick: () => void;\n  onNextClick: () => void;\n  dateMode: string;\n  isPreviousDisabled?: boolean;\n  isNextDisabled?: boolean;\n}\n\nconst DateHeader: React.FC<DateHeaderProps> = ({\n  label,\n  onLabelClick,\n  onPreviousClick,\n  onNextClick,\n  dateMode,\n  isPreviousDisabled,\n  isNextDisabled,\n}) => {\n  const intl = useIntl();\n  const { isMobile } = useLayout();\n  return (\n    <div className={clsx('text-xs-center', !isMobile && ['clearfix', 'p-y-1'])}>\n      <div className=\"pull-left-single-direction\">\n        <IconButton\n          size={40}\n          priority=\"minimal\"\n          className=\"d-inline-flex\"\n          aria-label={`${intl.formatMessage(messages.previous)} ${dateMode}`}\n          disabled={isPreviousDisabled}\n          onClick={onPreviousClick}\n        >\n          <ChevronStart />\n        </IconButton>\n      </div>\n      {label && (\n        <Title type={Typography.TITLE_BODY} className=\"tw-date-lookup-header-current-container\">\n          <Button\n            v2\n            size=\"md\"\n            type=\"button\"\n            priority=\"tertiary\"\n            className=\"tw-date-lookup-header-current\"\n            aria-label={intl.formatMessage(messages.goTo20YearView)}\n            addonEnd={{ type: 'icon', value: <ChevronDown /> }}\n            onClick={onLabelClick}\n          >\n            {label}\n          </Button>\n        </Title>\n      )}\n      <div className=\"pull-right-single-direction\">\n        <IconButton\n          size={40}\n          className=\"d-inline-flex\"\n          aria-label={`${intl.formatMessage(messages.next)} ${dateMode}`}\n          priority=\"minimal\"\n          disabled={isNextDisabled}\n          onClick={onNextClick}\n        >\n          <ChevronEnd />\n        </IconButton>\n      </div>\n    </div>\n  );\n};\n\nexport default DateHeader;\n"],"names":["DateHeader","label","onLabelClick","onPreviousClick","onNextClick","dateMode","isPreviousDisabled","isNextDisabled","intl","useIntl","isMobile","useLayout","_jsxs","className","clsx","children","_jsx","IconButton","size","priority","formatMessage","messages","previous","disabled","onClick","ChevronStart","Title","type","Typography","TITLE_BODY","Button","v2","goTo20YearView","addonEnd","value","ChevronDown","next","ChevronEnd"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,UAAU,GAA8BA,CAAC;EAC7CC,KAAK;EACLC,YAAY;EACZC,eAAe;EACfC,WAAW;EACXC,QAAQ;EACRC,kBAAkB;AAClBC,EAAAA;AAAc,CACf,KAAI;AACH,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EACtB,MAAM;AAAEC,IAAAA;GAAU,GAAGC,SAAS,EAAE;AAChC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAEC,IAAI,CAAC,gBAAgB,EAAE,CAACJ,QAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAE;AAAAK,IAAAA,QAAA,gBACzEC,GAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,4BAA4B;MAAAE,QAAA,eACzCC,GAAA,CAACC,UAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,SAAS;AAClBN,QAAAA,SAAS,EAAC,eAAe;QACzB,YAAA,EAAY,CAAA,EAAGL,IAAI,CAACY,aAAa,CAACC,QAAQ,CAACC,QAAQ,CAAC,CAAA,CAAA,EAAIjB,QAAQ,CAAA,CAAG;AACnEkB,QAAAA,QAAQ,EAAEjB,kBAAmB;AAC7BkB,QAAAA,OAAO,EAAErB,eAAgB;AAAAY,QAAAA,QAAA,eAEzBC,GAAA,CAACS,YAAY,EAAA,EAAA;OACH;AACd,KAAK,CACL,EAACxB,KAAK,iBACJe,GAAA,CAACU,KAAK,EAAA;MAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAChB,MAAAA,SAAS,EAAC,yCAAyC;MAAAE,QAAA,eACrFC,GAAA,CAACc,MAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFb,QAAAA,IAAI,EAAC,IAAI;AACTS,QAAAA,IAAI,EAAC,QAAQ;AACbR,QAAAA,QAAQ,EAAC,UAAU;AACnBN,QAAAA,SAAS,EAAC,+BAA+B;AACzC,QAAA,YAAA,EAAYL,IAAI,CAACY,aAAa,CAACC,QAAQ,CAACW,cAAc,CAAE;AACxDC,QAAAA,QAAQ,EAAE;AAAEN,UAAAA,IAAI,EAAE,MAAM;AAAEO,UAAAA,KAAK,eAAElB,GAAA,CAACmB,WAAW,EAAA,EAAA;SAAM;AACnDX,QAAAA,OAAO,EAAEtB,YAAa;AAAAa,QAAAA,QAAA,EAErBd;OACK;KACH,CACR,eACDe,GAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,6BAA6B;MAAAE,QAAA,eAC1CC,GAAA,CAACC,UAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTL,QAAAA,SAAS,EAAC,eAAe;QACzB,YAAA,EAAY,CAAA,EAAGL,IAAI,CAACY,aAAa,CAACC,QAAQ,CAACe,IAAI,CAAC,CAAA,CAAA,EAAI/B,QAAQ,CAAA,CAAG;AAC/Dc,QAAAA,QAAQ,EAAC,SAAS;AAClBI,QAAAA,QAAQ,EAAEhB,cAAe;AACzBiB,QAAAA,OAAO,EAAEpB,WAAY;AAAAW,QAAAA,QAAA,eAErBC,GAAA,CAACqB,UAAU,EAAA,EAAA;OACD;AACd,KAAK,CACP;AAAA,GAAK,CAAC;AAEV;;"}

package/build/Carousel/Carousel.js

@@ -137,7 +137,7 @@ const Carousel = ({
           "aria-hidden": "true",
           "data-testid": "scroll-carousel-left",
           onClick: () => scrollCarousel('backward'),
-          children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronLeft, {})
+          children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronStart, {})
         }), /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
           size: 32,
           tabIndex: -1,
@@ -147,7 +147,7 @@ const Carousel = ({
           "data-testid": "scroll-carousel-right",
           disabled: scrollIsAtEnd,
           onClick: () => scrollCarousel('forward'),
-          children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronRight, {})
+          children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronEnd, {})
         })]
       }) : null]
     }), /*#__PURE__*/jsxRuntime.jsx("div", {

package/build/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../../src/Carousel/Carousel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';\n\nimport { useDirection } from '../common/hooks';\nimport IconButton from '../IconButton';\nimport Title from '../Title';\nimport type { PromoCardLinkProps } from '../PromoCard/PromoCard';\nimport PromoCard from '../PromoCard/PromoCard';\n\nexport type CarouselCardCommon = {\n  id: string;\n  href?: string;\n  hrefTarget?: HTMLAnchorElement['target'];\n  onClick?: () => void;\n  className?: string;\n  styles?: CSSProperties;\n};\n\nexport type CarouselDefaultCard = CarouselCardCommon & {\n  type: 'anchor' | 'button';\n  content: ReactNode;\n};\n\nexport type CarouselPromoCard = CarouselCardCommon & {\n  type: 'promo';\n} & Omit<PromoCardLinkProps, 'type'>;\n\nexport type CarouselCard = CarouselDefaultCard | CarouselPromoCard;\nexport interface CarouselProps {\n  header: string | ReactNode;\n  className?: string;\n  cards: CarouselCard[];\n  onClick?: (cardId: string) => void;\n}\n\ntype CardsReference = {\n  type: 'promo' | 'default';\n  cardElement: HTMLDivElement | HTMLAnchorElement;\n  anchorElement?: HTMLAnchorElement;\n};\n\nconst LEFT_SCROLL_OFFSET = 8;\n\nconst Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }) => {\n  const [scrollPosition, setScrollPosition] = useState(0);\n  const [previousScrollPosition, setPreviousScrollPosition] = useState(0);\n  const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);\n  const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState<string>('');\n  const carouselElementRef = useRef<HTMLDivElement>(null);\n  const carouselCardsRef = useRef<CardsReference[]>([]);\n  const { isRTL } = useDirection();\n\n  const isPrevButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;\n\n  const areActionButtonsEnabled = isPrevButtonEnabled || !scrollIsAtEnd;\n\n  const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);\n\n  const updateScrollButtonsState = () => {\n    if (carouselElementRef.current) {\n      const { scrollWidth, offsetWidth } = carouselElementRef.current;\n\n      const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;\n      setScrollIsAtEnd(scrollAtEnd);\n    }\n\n    const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';\n\n    const cardsInFullViewIds: string[] = [];\n    carouselCardsRef.current.forEach((card) => {\n      if (isVisible(carouselElementRef.current as HTMLElement, card.cardElement as HTMLElement)) {\n        // eslint-disable-next-line functional/immutable-data\n        cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');\n      }\n    });\n\n    if (cardsInFullViewIds.length >= 1) {\n      const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;\n      const visibleCardId = cardsInFullViewIds[visibleCardIndex];\n      setVisibleCardOnMobileView(visibleCardId);\n      setFocusedCard(visibleCardId);\n    }\n\n    setPreviousScrollPosition(scrollPosition);\n  };\n\n  const scrollCarousel = (direction: 'forward' | 'backward') => {\n    if (carouselElementRef.current) {\n      const { scrollWidth } = carouselElementRef.current;\n\n      const cardWidth = scrollWidth / carouselCardsRef.current.length;\n\n      const distance = Math.floor(cardWidth - cardWidth * 0.05);\n      const sign = direction === 'forward' ? 1 : -1;\n\n      carouselElementRef.current.scrollBy({\n        left: isRTL ? -sign * distance : sign * distance,\n        behavior: 'smooth',\n      });\n    }\n  };\n\n  const handleOnKeyDown = (\n    event: React.KeyboardEvent<HTMLAnchorElement | HTMLDivElement>,\n    index: number,\n  ) => {\n    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n      const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;\n      const nextCard = cards[nextIndex];\n      if (nextCard) {\n        const ref = carouselCardsRef.current[nextIndex];\n        if (ref.type === 'promo') {\n          ref.anchorElement?.focus();\n        } else {\n          ref.cardElement?.focus();\n        }\n\n        scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);\n        event.preventDefault();\n      }\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.currentTarget.click();\n    }\n  };\n\n  const scrollCardIntoView = (element: HTMLElement, card: CarouselCard) => {\n    element.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'center',\n    });\n\n    setFocusedCard(card.id);\n  };\n\n  useEffect(() => {\n    updateScrollButtonsState();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scrollPosition]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updateScrollButtonsState);\n\n    return () => {\n      window.removeEventListener('resize', updateScrollButtonsState);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const addElementToCardsRefArray = (index: number, ref: Partial<CardsReference>) => {\n    if (ref) {\n      // eslint-disable-next-line functional/immutable-data\n      carouselCardsRef.current[index] = {\n        type: ref.type ?? carouselCardsRef.current?.[index]?.type,\n        cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,\n        anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement,\n      };\n    }\n  };\n\n  return (\n    <div className={clsx('carousel-wrapper', className)}>\n      <div className=\"d-flex justify-content-between carousel__header\">\n        {typeof header === 'string' ? (\n          <Title as=\"span\" type=\"title-body\">\n            {header}\n          </Title>\n        ) : (\n          header\n        )}\n        {areActionButtonsEnabled ? (\n          <div className=\"hidden-xs d-inline-flex\">\n            <IconButton\n              size={32}\n              tabIndex={-1}\n              priority=\"tertiary\"\n              disabled={!isPrevButtonEnabled}\n              aria-hidden=\"true\"\n              data-testid=\"scroll-carousel-left\"\n              onClick={() => scrollCarousel('backward')}\n            >\n              <ChevronLeft />\n            </IconButton>\n            <IconButton\n              size={32}\n              tabIndex={-1}\n              className=\"m-l-1\"\n              priority=\"tertiary\"\n              aria-hidden=\"true\"\n              data-testid=\"scroll-carousel-right\"\n              disabled={scrollIsAtEnd}\n              onClick={() => scrollCarousel('forward')}\n            >\n              <ChevronRight />\n            </IconButton>\n          </div>\n        ) : null}\n      </div>\n      <div\n        ref={carouselElementRef}\n        tabIndex={-1}\n        role=\"list\"\n        className=\"carousel\"\n        onScroll={(event) => {\n          const target = event.target as HTMLElement;\n          setScrollPosition(Math.abs(target.scrollLeft));\n        }}\n      >\n        {cards?.map((card, index) => {\n          const sharedProps = {\n            id: card.id,\n            className: clsx('carousel__card', {\n              'carousel__card--focused': card.id === focusedCard,\n            }),\n            onClick: () => {\n              card.onClick?.();\n              onClick?.(card.id);\n            },\n            onFocus: (event: React.FocusEvent<HTMLAnchorElement | HTMLDivElement>) => {\n              scrollCardIntoView(event.currentTarget, card);\n            },\n          };\n\n          const cardContent =\n            card.type !== 'promo' ? (\n              <div\n                id={`${card.id}-content`}\n                className={clsx('carousel__card-content', {\n                  [card.className ?? '']: !!card.className,\n                })}\n                style={card.styles}\n              >\n                {card.content}\n              </div>\n            ) : null;\n\n          if (card.type === 'button') {\n            return (\n              <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n                <div\n                  {...sharedProps}\n                  ref={(el) => {\n                    if (el) {\n                      // eslint-disable-next-line functional/immutable-data\n                      carouselCardsRef.current[index] = {\n                        type: 'default',\n                        cardElement: el,\n                      };\n                    }\n                  }}\n                  role=\"button\"\n                  tabIndex={0}\n                  onKeyDown={(event) => handleOnKeyDown(event, index)}\n                >\n                  {cardContent}\n                </div>\n              </div>\n            );\n          }\n\n          if (card.type === 'promo') {\n            return (\n              <div key={card.id} id={card.id} role=\"listitem\" aria-labelledby={`${card.id}-anchor`}>\n                <PromoCard\n                  {...{ ...card, type: undefined }}\n                  {...{ ...sharedProps }}\n                  ref={(el: HTMLDivElement | null) => {\n                    if (el) {\n                      addElementToCardsRefArray(index, {\n                        type: 'promo',\n                        cardElement: el,\n                      });\n                    }\n                  }}\n                  anchorRef={(el: HTMLAnchorElement) => {\n                    if (el) {\n                      addElementToCardsRefArray(index, {\n                        type: 'promo',\n                        anchorElement: el,\n                      });\n                    }\n                  }}\n                  anchorId={`${card.id}-anchor`}\n                  onKeyDown={(event) => handleOnKeyDown(event, index)}\n                />\n              </div>\n            );\n          }\n\n          return (\n            <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n              <a\n                {...sharedProps}\n                ref={(el) => {\n                  if (el) {\n                    // eslint-disable-next-line functional/immutable-data\n                    carouselCardsRef.current[index] = {\n                      type: 'default',\n                      cardElement: el,\n                    };\n                  }\n                }}\n                href={card.href}\n                target={card.hrefTarget}\n                rel=\"noreferrer\"\n                onKeyDown={(event) => handleOnKeyDown(event, index)}\n              >\n                {cardContent}\n              </a>\n            </div>\n          );\n        })}\n      </div>\n      <div className=\"visible-xs\">\n        <div className=\"carousel__indicators\">\n          {cards?.map((card, index) => (\n            <button\n              key={`${card.id}-indicator`}\n              data-testid={`${card.id}-indicator`}\n              tabIndex={-1}\n              aria-hidden\n              type=\"button\"\n              className={clsx('carousel__indicator', {\n                'carousel__indicator--selected': card.id === visibleCardOnMobileView,\n              })}\n              onClick={() => {\n                scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst isVisible = (container: HTMLElement, el: HTMLElement) => {\n  const cWidth = container.offsetWidth;\n  const cScrollOffset = Math.abs(container.scrollLeft);\n\n  const elemLeft = el.offsetLeft - container.offsetLeft;\n  const elemRight = elemLeft + el.offsetWidth;\n\n  return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;\n};\n\nexport default Carousel;\n"],"names":["LEFT_SCROLL_OFFSET","Carousel","header","className","cards","onClick","scrollPosition","setScrollPosition","useState","previousScrollPosition","setPreviousScrollPosition","scrollIsAtEnd","setScrollIsAtEnd","visibleCardOnMobileView","setVisibleCardOnMobileView","carouselElementRef","useRef","carouselCardsRef","isRTL","useDirection","isPrevButtonEnabled","areActionButtonsEnabled","focusedCard","setFocusedCard","id","updateScrollButtonsState","current","scrollWidth","offsetWidth","scrollAtEnd","scrollDirecton","cardsInFullViewIds","forEach","card","isVisible","cardElement","push","getAttribute","length","visibleCardIndex","visibleCardId","scrollCarousel","direction","cardWidth","distance","Math","floor","sign","scrollBy","left","behavior","handleOnKeyDown","event","index","key","nextIndex","nextCard","ref","type","anchorElement","focus","scrollCardIntoView","preventDefault","currentTarget","click","element","scrollIntoView","block","inline","useEffect","window","addEventListener","removeEventListener","addElementToCardsRefArray","_jsxs","clsx","children","_jsx","Title","as","IconButton","size","tabIndex","priority","disabled","ChevronLeft","ChevronRight","role","onScroll","target","abs","scrollLeft","map","sharedProps","onFocus","cardContent","style","styles","content","el","onKeyDown","PromoCard","undefined","anchorRef","anchorId","href","hrefTarget","rel","container","cWidth","cScrollOffset","elemLeft","offsetLeft","elemRight"],"mappings":"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"}
+{"version":3,"file":"Carousel.js","sources":["../../src/Carousel/Carousel.tsx"],"sourcesContent":["import { ChevronStart, ChevronEnd } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';\n\nimport { useDirection } from '../common/hooks';\nimport IconButton from '../IconButton';\nimport Title from '../Title';\nimport type { PromoCardLinkProps } from '../PromoCard/PromoCard';\nimport PromoCard from '../PromoCard/PromoCard';\n\nexport type CarouselCardCommon = {\n  id: string;\n  href?: string;\n  hrefTarget?: HTMLAnchorElement['target'];\n  onClick?: () => void;\n  className?: string;\n  styles?: CSSProperties;\n};\n\nexport type CarouselDefaultCard = CarouselCardCommon & {\n  type: 'anchor' | 'button';\n  content: ReactNode;\n};\n\nexport type CarouselPromoCard = CarouselCardCommon & {\n  type: 'promo';\n} & Omit<PromoCardLinkProps, 'type'>;\n\nexport type CarouselCard = CarouselDefaultCard | CarouselPromoCard;\nexport interface CarouselProps {\n  header: string | ReactNode;\n  className?: string;\n  cards: CarouselCard[];\n  onClick?: (cardId: string) => void;\n}\n\ntype CardsReference = {\n  type: 'promo' | 'default';\n  cardElement: HTMLDivElement | HTMLAnchorElement;\n  anchorElement?: HTMLAnchorElement;\n};\n\nconst LEFT_SCROLL_OFFSET = 8;\n\nconst Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }) => {\n  const [scrollPosition, setScrollPosition] = useState(0);\n  const [previousScrollPosition, setPreviousScrollPosition] = useState(0);\n  const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);\n  const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState<string>('');\n  const carouselElementRef = useRef<HTMLDivElement>(null);\n  const carouselCardsRef = useRef<CardsReference[]>([]);\n  const { isRTL } = useDirection();\n\n  const isPrevButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;\n\n  const areActionButtonsEnabled = isPrevButtonEnabled || !scrollIsAtEnd;\n\n  const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);\n\n  const updateScrollButtonsState = () => {\n    if (carouselElementRef.current) {\n      const { scrollWidth, offsetWidth } = carouselElementRef.current;\n\n      const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;\n      setScrollIsAtEnd(scrollAtEnd);\n    }\n\n    const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';\n\n    const cardsInFullViewIds: string[] = [];\n    carouselCardsRef.current.forEach((card) => {\n      if (isVisible(carouselElementRef.current as HTMLElement, card.cardElement as HTMLElement)) {\n        // eslint-disable-next-line functional/immutable-data\n        cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');\n      }\n    });\n\n    if (cardsInFullViewIds.length >= 1) {\n      const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;\n      const visibleCardId = cardsInFullViewIds[visibleCardIndex];\n      setVisibleCardOnMobileView(visibleCardId);\n      setFocusedCard(visibleCardId);\n    }\n\n    setPreviousScrollPosition(scrollPosition);\n  };\n\n  const scrollCarousel = (direction: 'forward' | 'backward') => {\n    if (carouselElementRef.current) {\n      const { scrollWidth } = carouselElementRef.current;\n\n      const cardWidth = scrollWidth / carouselCardsRef.current.length;\n\n      const distance = Math.floor(cardWidth - cardWidth * 0.05);\n      const sign = direction === 'forward' ? 1 : -1;\n\n      carouselElementRef.current.scrollBy({\n        left: isRTL ? -sign * distance : sign * distance,\n        behavior: 'smooth',\n      });\n    }\n  };\n\n  const handleOnKeyDown = (\n    event: React.KeyboardEvent<HTMLAnchorElement | HTMLDivElement>,\n    index: number,\n  ) => {\n    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n      const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;\n      const nextCard = cards[nextIndex];\n      if (nextCard) {\n        const ref = carouselCardsRef.current[nextIndex];\n        if (ref.type === 'promo') {\n          ref.anchorElement?.focus();\n        } else {\n          ref.cardElement?.focus();\n        }\n\n        scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);\n        event.preventDefault();\n      }\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.currentTarget.click();\n    }\n  };\n\n  const scrollCardIntoView = (element: HTMLElement, card: CarouselCard) => {\n    element.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'center',\n    });\n\n    setFocusedCard(card.id);\n  };\n\n  useEffect(() => {\n    updateScrollButtonsState();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scrollPosition]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updateScrollButtonsState);\n\n    return () => {\n      window.removeEventListener('resize', updateScrollButtonsState);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const addElementToCardsRefArray = (index: number, ref: Partial<CardsReference>) => {\n    if (ref) {\n      // eslint-disable-next-line functional/immutable-data\n      carouselCardsRef.current[index] = {\n        type: ref.type ?? carouselCardsRef.current?.[index]?.type,\n        cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,\n        anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement,\n      };\n    }\n  };\n\n  return (\n    <div className={clsx('carousel-wrapper', className)}>\n      <div className=\"d-flex justify-content-between carousel__header\">\n        {typeof header === 'string' ? (\n          <Title as=\"span\" type=\"title-body\">\n            {header}\n          </Title>\n        ) : (\n          header\n        )}\n        {areActionButtonsEnabled ? (\n          <div className=\"hidden-xs d-inline-flex\">\n            <IconButton\n              size={32}\n              tabIndex={-1}\n              priority=\"tertiary\"\n              disabled={!isPrevButtonEnabled}\n              aria-hidden=\"true\"\n              data-testid=\"scroll-carousel-left\"\n              onClick={() => scrollCarousel('backward')}\n            >\n              <ChevronStart />\n            </IconButton>\n            <IconButton\n              size={32}\n              tabIndex={-1}\n              className=\"m-l-1\"\n              priority=\"tertiary\"\n              aria-hidden=\"true\"\n              data-testid=\"scroll-carousel-right\"\n              disabled={scrollIsAtEnd}\n              onClick={() => scrollCarousel('forward')}\n            >\n              <ChevronEnd />\n            </IconButton>\n          </div>\n        ) : null}\n      </div>\n      <div\n        ref={carouselElementRef}\n        tabIndex={-1}\n        role=\"list\"\n        className=\"carousel\"\n        onScroll={(event) => {\n          const target = event.target as HTMLElement;\n          setScrollPosition(Math.abs(target.scrollLeft));\n        }}\n      >\n        {cards?.map((card, index) => {\n          const sharedProps = {\n            id: card.id,\n            className: clsx('carousel__card', {\n              'carousel__card--focused': card.id === focusedCard,\n            }),\n            onClick: () => {\n              card.onClick?.();\n              onClick?.(card.id);\n            },\n            onFocus: (event: React.FocusEvent<HTMLAnchorElement | HTMLDivElement>) => {\n              scrollCardIntoView(event.currentTarget, card);\n            },\n          };\n\n          const cardContent =\n            card.type !== 'promo' ? (\n              <div\n                id={`${card.id}-content`}\n                className={clsx('carousel__card-content', {\n                  [card.className ?? '']: !!card.className,\n                })}\n                style={card.styles}\n              >\n                {card.content}\n              </div>\n            ) : null;\n\n          if (card.type === 'button') {\n            return (\n              <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n                <div\n                  {...sharedProps}\n                  ref={(el) => {\n                    if (el) {\n                      // eslint-disable-next-line functional/immutable-data\n                      carouselCardsRef.current[index] = {\n                        type: 'default',\n                        cardElement: el,\n                      };\n                    }\n                  }}\n                  role=\"button\"\n                  tabIndex={0}\n                  onKeyDown={(event) => handleOnKeyDown(event, index)}\n                >\n                  {cardContent}\n                </div>\n              </div>\n            );\n          }\n\n          if (card.type === 'promo') {\n            return (\n              <div key={card.id} id={card.id} role=\"listitem\" aria-labelledby={`${card.id}-anchor`}>\n                <PromoCard\n                  {...{ ...card, type: undefined }}\n                  {...{ ...sharedProps }}\n                  ref={(el: HTMLDivElement | null) => {\n                    if (el) {\n                      addElementToCardsRefArray(index, {\n                        type: 'promo',\n                        cardElement: el,\n                      });\n                    }\n                  }}\n                  anchorRef={(el: HTMLAnchorElement) => {\n                    if (el) {\n                      addElementToCardsRefArray(index, {\n                        type: 'promo',\n                        anchorElement: el,\n                      });\n                    }\n                  }}\n                  anchorId={`${card.id}-anchor`}\n                  onKeyDown={(event) => handleOnKeyDown(event, index)}\n                />\n              </div>\n            );\n          }\n\n          return (\n            <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n              <a\n                {...sharedProps}\n                ref={(el) => {\n                  if (el) {\n                    // eslint-disable-next-line functional/immutable-data\n                    carouselCardsRef.current[index] = {\n                      type: 'default',\n                      cardElement: el,\n                    };\n                  }\n                }}\n                href={card.href}\n                target={card.hrefTarget}\n                rel=\"noreferrer\"\n                onKeyDown={(event) => handleOnKeyDown(event, index)}\n              >\n                {cardContent}\n              </a>\n            </div>\n          );\n        })}\n      </div>\n      <div className=\"visible-xs\">\n        <div className=\"carousel__indicators\">\n          {cards?.map((card, index) => (\n            <button\n              key={`${card.id}-indicator`}\n              data-testid={`${card.id}-indicator`}\n              tabIndex={-1}\n              aria-hidden\n              type=\"button\"\n              className={clsx('carousel__indicator', {\n                'carousel__indicator--selected': card.id === visibleCardOnMobileView,\n              })}\n              onClick={() => {\n                scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst isVisible = (container: HTMLElement, el: HTMLElement) => {\n  const cWidth = container.offsetWidth;\n  const cScrollOffset = Math.abs(container.scrollLeft);\n\n  const elemLeft = el.offsetLeft - container.offsetLeft;\n  const elemRight = elemLeft + el.offsetWidth;\n\n  return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;\n};\n\nexport default Carousel;\n"],"names":["LEFT_SCROLL_OFFSET","Carousel","header","className","cards","onClick","scrollPosition","setScrollPosition","useState","previousScrollPosition","setPreviousScrollPosition","scrollIsAtEnd","setScrollIsAtEnd","visibleCardOnMobileView","setVisibleCardOnMobileView","carouselElementRef","useRef","carouselCardsRef","isRTL","useDirection","isPrevButtonEnabled","areActionButtonsEnabled","focusedCard","setFocusedCard","id","updateScrollButtonsState","current","scrollWidth","offsetWidth","scrollAtEnd","scrollDirecton","cardsInFullViewIds","forEach","card","isVisible","cardElement","push","getAttribute","length","visibleCardIndex","visibleCardId","scrollCarousel","direction","cardWidth","distance","Math","floor","sign","scrollBy","left","behavior","handleOnKeyDown","event","index","key","nextIndex","nextCard","ref","type","anchorElement","focus","scrollCardIntoView","preventDefault","currentTarget","click","element","scrollIntoView","block","inline","useEffect","window","addEventListener","removeEventListener","addElementToCardsRefArray","_jsxs","clsx","children","_jsx","Title","as","IconButton","size","tabIndex","priority","disabled","ChevronStart","ChevronEnd","role","onScroll","target","abs","scrollLeft","map","sharedProps","onFocus","cardContent","style","styles","content","el","onKeyDown","PromoCard","undefined","anchorRef","anchorId","href","hrefTarget","rel","container","cWidth","cScrollOffset","elemLeft","offsetLeft","elemRight"],"mappings":"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"}

package/build/Carousel/Carousel.mjs

@@ -1,4 +1,4 @@
-import { ChevronLeft, ChevronRight } from '@transferwise/icons';
+import { ChevronStart, ChevronEnd } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { useState, useRef, useEffect } from 'react';
 import '@transferwise/neptune-validation';
@@ -133,7 +133,7 @@ const Carousel = ({
           "aria-hidden": "true",
           "data-testid": "scroll-carousel-left",
           onClick: () => scrollCarousel('backward'),
-          children: /*#__PURE__*/jsx(ChevronLeft, {})
+          children: /*#__PURE__*/jsx(ChevronStart, {})
         }), /*#__PURE__*/jsx(IconButton, {
           size: 32,
           tabIndex: -1,
@@ -143,7 +143,7 @@ const Carousel = ({
           "data-testid": "scroll-carousel-right",
           disabled: scrollIsAtEnd,
           onClick: () => scrollCarousel('forward'),
-          children: /*#__PURE__*/jsx(ChevronRight, {})
+          children: /*#__PURE__*/jsx(ChevronEnd, {})
         })]
       }) : null]
     }), /*#__PURE__*/jsx("div", {

package/build/Carousel/Carousel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.mjs","sources":["../../src/Carousel/Carousel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';\n\nimport { useDirection } from '../common/hooks';\nimport IconButton from '../IconButton';\nimport Title from '../Title';\nimport type { PromoCardLinkProps } from '../PromoCard/PromoCard';\nimport PromoCard from '../PromoCard/PromoCard';\n\nexport type CarouselCardCommon = {\n  id: string;\n  href?: string;\n  hrefTarget?: HTMLAnchorElement['target'];\n  onClick?: () => void;\n  className?: string;\n  styles?: CSSProperties;\n};\n\nexport type CarouselDefaultCard = CarouselCardCommon & {\n  type: 'anchor' | 'button';\n  content: ReactNode;\n};\n\nexport type CarouselPromoCard = CarouselCardCommon & {\n  type: 'promo';\n} & Omit<PromoCardLinkProps, 'type'>;\n\nexport type CarouselCard = CarouselDefaultCard | CarouselPromoCard;\nexport interface CarouselProps {\n  header: string | ReactNode;\n  className?: string;\n  cards: CarouselCard[];\n  onClick?: (cardId: string) => void;\n}\n\ntype CardsReference = {\n  type: 'promo' | 'default';\n  cardElement: HTMLDivElement | HTMLAnchorElement;\n  anchorElement?: HTMLAnchorElement;\n};\n\nconst LEFT_SCROLL_OFFSET = 8;\n\nconst Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }) => {\n  const [scrollPosition, setScrollPosition] = useState(0);\n  const [previousScrollPosition, setPreviousScrollPosition] = useState(0);\n  const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);\n  const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState<string>('');\n  const carouselElementRef = useRef<HTMLDivElement>(null);\n  const carouselCardsRef = useRef<CardsReference[]>([]);\n  const { isRTL } = useDirection();\n\n  const isPrevButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;\n\n  const areActionButtonsEnabled = isPrevButtonEnabled || !scrollIsAtEnd;\n\n  const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);\n\n  const updateScrollButtonsState = () => {\n    if (carouselElementRef.current) {\n      const { scrollWidth, offsetWidth } = carouselElementRef.current;\n\n      const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;\n      setScrollIsAtEnd(scrollAtEnd);\n    }\n\n    const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';\n\n    const cardsInFullViewIds: string[] = [];\n    carouselCardsRef.current.forEach((card) => {\n      if (isVisible(carouselElementRef.current as HTMLElement, card.cardElement as HTMLElement)) {\n        // eslint-disable-next-line functional/immutable-data\n        cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');\n      }\n    });\n\n    if (cardsInFullViewIds.length >= 1) {\n      const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;\n      const visibleCardId = cardsInFullViewIds[visibleCardIndex];\n      setVisibleCardOnMobileView(visibleCardId);\n      setFocusedCard(visibleCardId);\n    }\n\n    setPreviousScrollPosition(scrollPosition);\n  };\n\n  const scrollCarousel = (direction: 'forward' | 'backward') => {\n    if (carouselElementRef.current) {\n      const { scrollWidth } = carouselElementRef.current;\n\n      const cardWidth = scrollWidth / carouselCardsRef.current.length;\n\n      const distance = Math.floor(cardWidth - cardWidth * 0.05);\n      const sign = direction === 'forward' ? 1 : -1;\n\n      carouselElementRef.current.scrollBy({\n        left: isRTL ? -sign * distance : sign * distance,\n        behavior: 'smooth',\n      });\n    }\n  };\n\n  const handleOnKeyDown = (\n    event: React.KeyboardEvent<HTMLAnchorElement | HTMLDivElement>,\n    index: number,\n  ) => {\n    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n      const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;\n      const nextCard = cards[nextIndex];\n      if (nextCard) {\n        const ref = carouselCardsRef.current[nextIndex];\n        if (ref.type === 'promo') {\n          ref.anchorElement?.focus();\n        } else {\n          ref.cardElement?.focus();\n        }\n\n        scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);\n        event.preventDefault();\n      }\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.currentTarget.click();\n    }\n  };\n\n  const scrollCardIntoView = (element: HTMLElement, card: CarouselCard) => {\n    element.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'center',\n    });\n\n    setFocusedCard(card.id);\n  };\n\n  useEffect(() => {\n    updateScrollButtonsState();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scrollPosition]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updateScrollButtonsState);\n\n    return () => {\n      window.removeEventListener('resize', updateScrollButtonsState);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const addElementToCardsRefArray = (index: number, ref: Partial<CardsReference>) => {\n    if (ref) {\n      // eslint-disable-next-line functional/immutable-data\n      carouselCardsRef.current[index] = {\n        type: ref.type ?? carouselCardsRef.current?.[index]?.type,\n        cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,\n        anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement,\n      };\n    }\n  };\n\n  return (\n    <div className={clsx('carousel-wrapper', className)}>\n      <div className=\"d-flex justify-content-between carousel__header\">\n        {typeof header === 'string' ? (\n          <Title as=\"span\" type=\"title-body\">\n            {header}\n          </Title>\n        ) : (\n          header\n        )}\n        {areActionButtonsEnabled ? (\n          <div className=\"hidden-xs d-inline-flex\">\n            <IconButton\n              size={32}\n              tabIndex={-1}\n              priority=\"tertiary\"\n              disabled={!isPrevButtonEnabled}\n              aria-hidden=\"true\"\n              data-testid=\"scroll-carousel-left\"\n              onClick={() => scrollCarousel('backward')}\n            >\n              <ChevronLeft />\n            </IconButton>\n            <IconButton\n              size={32}\n              tabIndex={-1}\n              className=\"m-l-1\"\n              priority=\"tertiary\"\n              aria-hidden=\"true\"\n              data-testid=\"scroll-carousel-right\"\n              disabled={scrollIsAtEnd}\n              onClick={() => scrollCarousel('forward')}\n            >\n              <ChevronRight />\n            </IconButton>\n          </div>\n        ) : null}\n      </div>\n      <div\n        ref={carouselElementRef}\n        tabIndex={-1}\n        role=\"list\"\n        className=\"carousel\"\n        onScroll={(event) => {\n          const target = event.target as HTMLElement;\n          setScrollPosition(Math.abs(target.scrollLeft));\n        }}\n      >\n        {cards?.map((card, index) => {\n          const sharedProps = {\n            id: card.id,\n            className: clsx('carousel__card', {\n              'carousel__card--focused': card.id === focusedCard,\n            }),\n            onClick: () => {\n              card.onClick?.();\n              onClick?.(card.id);\n            },\n            onFocus: (event: React.FocusEvent<HTMLAnchorElement | HTMLDivElement>) => {\n              scrollCardIntoView(event.currentTarget, card);\n            },\n          };\n\n          const cardContent =\n            card.type !== 'promo' ? (\n              <div\n                id={`${card.id}-content`}\n                className={clsx('carousel__card-content', {\n                  [card.className ?? '']: !!card.className,\n                })}\n                style={card.styles}\n              >\n                {card.content}\n              </div>\n            ) : null;\n\n          if (card.type === 'button') {\n            return (\n              <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n                <div\n                  {...sharedProps}\n                  ref={(el) => {\n                    if (el) {\n                      // eslint-disable-next-line functional/immutable-data\n                      carouselCardsRef.current[index] = {\n                        type: 'default',\n                        cardElement: el,\n                      };\n                    }\n                  }}\n                  role=\"button\"\n                  tabIndex={0}\n                  onKeyDown={(event) => handleOnKeyDown(event, index)}\n                >\n                  {cardContent}\n                </div>\n              </div>\n            );\n          }\n\n          if (card.type === 'promo') {\n            return (\n              <div key={card.id} id={card.id} role=\"listitem\" aria-labelledby={`${card.id}-anchor`}>\n                <PromoCard\n                  {...{ ...card, type: undefined }}\n                  {...{ ...sharedProps }}\n                  ref={(el: HTMLDivElement | null) => {\n                    if (el) {\n                      addElementToCardsRefArray(index, {\n                        type: 'promo',\n                        cardElement: el,\n                      });\n                    }\n                  }}\n                  anchorRef={(el: HTMLAnchorElement) => {\n                    if (el) {\n                      addElementToCardsRefArray(index, {\n                        type: 'promo',\n                        anchorElement: el,\n                      });\n                    }\n                  }}\n                  anchorId={`${card.id}-anchor`}\n                  onKeyDown={(event) => handleOnKeyDown(event, index)}\n                />\n              </div>\n            );\n          }\n\n          return (\n            <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n              <a\n                {...sharedProps}\n                ref={(el) => {\n                  if (el) {\n                    // eslint-disable-next-line functional/immutable-data\n                    carouselCardsRef.current[index] = {\n                      type: 'default',\n                      cardElement: el,\n                    };\n                  }\n                }}\n                href={card.href}\n                target={card.hrefTarget}\n                rel=\"noreferrer\"\n                onKeyDown={(event) => handleOnKeyDown(event, index)}\n              >\n                {cardContent}\n              </a>\n            </div>\n          );\n        })}\n      </div>\n      <div className=\"visible-xs\">\n        <div className=\"carousel__indicators\">\n          {cards?.map((card, index) => (\n            <button\n              key={`${card.id}-indicator`}\n              data-testid={`${card.id}-indicator`}\n              tabIndex={-1}\n              aria-hidden\n              type=\"button\"\n              className={clsx('carousel__indicator', {\n                'carousel__indicator--selected': card.id === visibleCardOnMobileView,\n              })}\n              onClick={() => {\n                scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst isVisible = (container: HTMLElement, el: HTMLElement) => {\n  const cWidth = container.offsetWidth;\n  const cScrollOffset = Math.abs(container.scrollLeft);\n\n  const elemLeft = el.offsetLeft - container.offsetLeft;\n  const elemRight = elemLeft + el.offsetWidth;\n\n  return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;\n};\n\nexport default Carousel;\n"],"names":["LEFT_SCROLL_OFFSET","Carousel","header","className","cards","onClick","scrollPosition","setScrollPosition","useState","previousScrollPosition","setPreviousScrollPosition","scrollIsAtEnd","setScrollIsAtEnd","visibleCardOnMobileView","setVisibleCardOnMobileView","carouselElementRef","useRef","carouselCardsRef","isRTL","useDirection","isPrevButtonEnabled","areActionButtonsEnabled","focusedCard","setFocusedCard","id","updateScrollButtonsState","current","scrollWidth","offsetWidth","scrollAtEnd","scrollDirecton","cardsInFullViewIds","forEach","card","isVisible","cardElement","push","getAttribute","length","visibleCardIndex","visibleCardId","scrollCarousel","direction","cardWidth","distance","Math","floor","sign","scrollBy","left","behavior","handleOnKeyDown","event","index","key","nextIndex","nextCard","ref","type","anchorElement","focus","scrollCardIntoView","preventDefault","currentTarget","click","element","scrollIntoView","block","inline","useEffect","window","addEventListener","removeEventListener","addElementToCardsRefArray","_jsxs","clsx","children","_jsx","Title","as","IconButton","size","tabIndex","priority","disabled","ChevronLeft","ChevronRight","role","onScroll","target","abs","scrollLeft","map","sharedProps","onFocus","cardContent","style","styles","content","el","onKeyDown","PromoCard","undefined","anchorRef","anchorId","href","hrefTarget","rel","container","cWidth","cScrollOffset","elemLeft","offsetLeft","elemRight"],"mappings":"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"}
+{"version":3,"file":"Carousel.mjs","sources":["../../src/Carousel/Carousel.tsx"],"sourcesContent":["import { ChevronStart, ChevronEnd } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';\n\nimport { useDirection } from '../common/hooks';\nimport IconButton from '../IconButton';\nimport Title from '../Title';\nimport type { PromoCardLinkProps } from '../PromoCard/PromoCard';\nimport PromoCard from '../PromoCard/PromoCard';\n\nexport type CarouselCardCommon = {\n  id: string;\n  href?: string;\n  hrefTarget?: HTMLAnchorElement['target'];\n  onClick?: () => void;\n  className?: string;\n  styles?: CSSProperties;\n};\n\nexport type CarouselDefaultCard = CarouselCardCommon & {\n  type: 'anchor' | 'button';\n  content: ReactNode;\n};\n\nexport type CarouselPromoCard = CarouselCardCommon & {\n  type: 'promo';\n} & Omit<PromoCardLinkProps, 'type'>;\n\nexport type CarouselCard = CarouselDefaultCard | CarouselPromoCard;\nexport interface CarouselProps {\n  header: string | ReactNode;\n  className?: string;\n  cards: CarouselCard[];\n  onClick?: (cardId: string) => void;\n}\n\ntype CardsReference = {\n  type: 'promo' | 'default';\n  cardElement: HTMLDivElement | HTMLAnchorElement;\n  anchorElement?: HTMLAnchorElement;\n};\n\nconst LEFT_SCROLL_OFFSET = 8;\n\nconst Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }) => {\n  const [scrollPosition, setScrollPosition] = useState(0);\n  const [previousScrollPosition, setPreviousScrollPosition] = useState(0);\n  const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);\n  const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState<string>('');\n  const carouselElementRef = useRef<HTMLDivElement>(null);\n  const carouselCardsRef = useRef<CardsReference[]>([]);\n  const { isRTL } = useDirection();\n\n  const isPrevButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;\n\n  const areActionButtonsEnabled = isPrevButtonEnabled || !scrollIsAtEnd;\n\n  const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);\n\n  const updateScrollButtonsState = () => {\n    if (carouselElementRef.current) {\n      const { scrollWidth, offsetWidth } = carouselElementRef.current;\n\n      const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;\n      setScrollIsAtEnd(scrollAtEnd);\n    }\n\n    const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';\n\n    const cardsInFullViewIds: string[] = [];\n    carouselCardsRef.current.forEach((card) => {\n      if (isVisible(carouselElementRef.current as HTMLElement, card.cardElement as HTMLElement)) {\n        // eslint-disable-next-line functional/immutable-data\n        cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');\n      }\n    });\n\n    if (cardsInFullViewIds.length >= 1) {\n      const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;\n      const visibleCardId = cardsInFullViewIds[visibleCardIndex];\n      setVisibleCardOnMobileView(visibleCardId);\n      setFocusedCard(visibleCardId);\n    }\n\n    setPreviousScrollPosition(scrollPosition);\n  };\n\n  const scrollCarousel = (direction: 'forward' | 'backward') => {\n    if (carouselElementRef.current) {\n      const { scrollWidth } = carouselElementRef.current;\n\n      const cardWidth = scrollWidth / carouselCardsRef.current.length;\n\n      const distance = Math.floor(cardWidth - cardWidth * 0.05);\n      const sign = direction === 'forward' ? 1 : -1;\n\n      carouselElementRef.current.scrollBy({\n        left: isRTL ? -sign * distance : sign * distance,\n        behavior: 'smooth',\n      });\n    }\n  };\n\n  const handleOnKeyDown = (\n    event: React.KeyboardEvent<HTMLAnchorElement | HTMLDivElement>,\n    index: number,\n  ) => {\n    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n      const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;\n      const nextCard = cards[nextIndex];\n      if (nextCard) {\n        const ref = carouselCardsRef.current[nextIndex];\n        if (ref.type === 'promo') {\n          ref.anchorElement?.focus();\n        } else {\n          ref.cardElement?.focus();\n        }\n\n        scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);\n        event.preventDefault();\n      }\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.currentTarget.click();\n    }\n  };\n\n  const scrollCardIntoView = (element: HTMLElement, card: CarouselCard) => {\n    element.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'center',\n    });\n\n    setFocusedCard(card.id);\n  };\n\n  useEffect(() => {\n    updateScrollButtonsState();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scrollPosition]);\n\n  useEffect(() => {\n    window.addEventListener('resize', updateScrollButtonsState);\n\n    return () => {\n      window.removeEventListener('resize', updateScrollButtonsState);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const addElementToCardsRefArray = (index: number, ref: Partial<CardsReference>) => {\n    if (ref) {\n      // eslint-disable-next-line functional/immutable-data\n      carouselCardsRef.current[index] = {\n        type: ref.type ?? carouselCardsRef.current?.[index]?.type,\n        cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,\n        anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement,\n      };\n    }\n  };\n\n  return (\n    <div className={clsx('carousel-wrapper', className)}>\n      <div className=\"d-flex justify-content-between carousel__header\">\n        {typeof header === 'string' ? (\n          <Title as=\"span\" type=\"title-body\">\n            {header}\n          </Title>\n        ) : (\n          header\n        )}\n        {areActionButtonsEnabled ? (\n          <div className=\"hidden-xs d-inline-flex\">\n            <IconButton\n              size={32}\n              tabIndex={-1}\n              priority=\"tertiary\"\n              disabled={!isPrevButtonEnabled}\n              aria-hidden=\"true\"\n              data-testid=\"scroll-carousel-left\"\n              onClick={() => scrollCarousel('backward')}\n            >\n              <ChevronStart />\n            </IconButton>\n            <IconButton\n              size={32}\n              tabIndex={-1}\n              className=\"m-l-1\"\n              priority=\"tertiary\"\n              aria-hidden=\"true\"\n              data-testid=\"scroll-carousel-right\"\n              disabled={scrollIsAtEnd}\n              onClick={() => scrollCarousel('forward')}\n            >\n              <ChevronEnd />\n            </IconButton>\n          </div>\n        ) : null}\n      </div>\n      <div\n        ref={carouselElementRef}\n        tabIndex={-1}\n        role=\"list\"\n        className=\"carousel\"\n        onScroll={(event) => {\n          const target = event.target as HTMLElement;\n          setScrollPosition(Math.abs(target.scrollLeft));\n        }}\n      >\n        {cards?.map((card, index) => {\n          const sharedProps = {\n            id: card.id,\n            className: clsx('carousel__card', {\n              'carousel__card--focused': card.id === focusedCard,\n            }),\n            onClick: () => {\n              card.onClick?.();\n              onClick?.(card.id);\n            },\n            onFocus: (event: React.FocusEvent<HTMLAnchorElement | HTMLDivElement>) => {\n              scrollCardIntoView(event.currentTarget, card);\n            },\n          };\n\n          const cardContent =\n            card.type !== 'promo' ? (\n              <div\n                id={`${card.id}-content`}\n                className={clsx('carousel__card-content', {\n                  [card.className ?? '']: !!card.className,\n                })}\n                style={card.styles}\n              >\n                {card.content}\n              </div>\n            ) : null;\n\n          if (card.type === 'button') {\n            return (\n              <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n                <div\n                  {...sharedProps}\n                  ref={(el) => {\n                    if (el) {\n                      // eslint-disable-next-line functional/immutable-data\n                      carouselCardsRef.current[index] = {\n                        type: 'default',\n                        cardElement: el,\n                      };\n                    }\n                  }}\n                  role=\"button\"\n                  tabIndex={0}\n                  onKeyDown={(event) => handleOnKeyDown(event, index)}\n                >\n                  {cardContent}\n                </div>\n              </div>\n            );\n          }\n\n          if (card.type === 'promo') {\n            return (\n              <div key={card.id} id={card.id} role=\"listitem\" aria-labelledby={`${card.id}-anchor`}>\n                <PromoCard\n                  {...{ ...card, type: undefined }}\n                  {...{ ...sharedProps }}\n                  ref={(el: HTMLDivElement | null) => {\n                    if (el) {\n                      addElementToCardsRefArray(index, {\n                        type: 'promo',\n                        cardElement: el,\n                      });\n                    }\n                  }}\n                  anchorRef={(el: HTMLAnchorElement) => {\n                    if (el) {\n                      addElementToCardsRefArray(index, {\n                        type: 'promo',\n                        anchorElement: el,\n                      });\n                    }\n                  }}\n                  anchorId={`${card.id}-anchor`}\n                  onKeyDown={(event) => handleOnKeyDown(event, index)}\n                />\n              </div>\n            );\n          }\n\n          return (\n            <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n              <a\n                {...sharedProps}\n                ref={(el) => {\n                  if (el) {\n                    // eslint-disable-next-line functional/immutable-data\n                    carouselCardsRef.current[index] = {\n                      type: 'default',\n                      cardElement: el,\n                    };\n                  }\n                }}\n                href={card.href}\n                target={card.hrefTarget}\n                rel=\"noreferrer\"\n                onKeyDown={(event) => handleOnKeyDown(event, index)}\n              >\n                {cardContent}\n              </a>\n            </div>\n          );\n        })}\n      </div>\n      <div className=\"visible-xs\">\n        <div className=\"carousel__indicators\">\n          {cards?.map((card, index) => (\n            <button\n              key={`${card.id}-indicator`}\n              data-testid={`${card.id}-indicator`}\n              tabIndex={-1}\n              aria-hidden\n              type=\"button\"\n              className={clsx('carousel__indicator', {\n                'carousel__indicator--selected': card.id === visibleCardOnMobileView,\n              })}\n              onClick={() => {\n                scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst isVisible = (container: HTMLElement, el: HTMLElement) => {\n  const cWidth = container.offsetWidth;\n  const cScrollOffset = Math.abs(container.scrollLeft);\n\n  const elemLeft = el.offsetLeft - container.offsetLeft;\n  const elemRight = elemLeft + el.offsetWidth;\n\n  return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;\n};\n\nexport default Carousel;\n"],"names":["LEFT_SCROLL_OFFSET","Carousel","header","className","cards","onClick","scrollPosition","setScrollPosition","useState","previousScrollPosition","setPreviousScrollPosition","scrollIsAtEnd","setScrollIsAtEnd","visibleCardOnMobileView","setVisibleCardOnMobileView","carouselElementRef","useRef","carouselCardsRef","isRTL","useDirection","isPrevButtonEnabled","areActionButtonsEnabled","focusedCard","setFocusedCard","id","updateScrollButtonsState","current","scrollWidth","offsetWidth","scrollAtEnd","scrollDirecton","cardsInFullViewIds","forEach","card","isVisible","cardElement","push","getAttribute","length","visibleCardIndex","visibleCardId","scrollCarousel","direction","cardWidth","distance","Math","floor","sign","scrollBy","left","behavior","handleOnKeyDown","event","index","key","nextIndex","nextCard","ref","type","anchorElement","focus","scrollCardIntoView","preventDefault","currentTarget","click","element","scrollIntoView","block","inline","useEffect","window","addEventListener","removeEventListener","addElementToCardsRefArray","_jsxs","clsx","children","_jsx","Title","as","IconButton","size","tabIndex","priority","disabled","ChevronStart","ChevronEnd","role","onScroll","target","abs","scrollLeft","map","sharedProps","onFocus","cardContent","style","styles","content","el","onKeyDown","PromoCard","undefined","anchorRef","anchorId","href","hrefTarget","rel","container","cWidth","cScrollOffset","elemLeft","offsetLeft","elemRight"],"mappings":"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"}

package/build/Chips/Chip/Chip.js

@@ -34,6 +34,7 @@ const Chip = ({
   onRemove,
   onClick,
   onKeyPress,
+  disabled = false,
   className = undefined,
   'aria-label': ariaLabel,
   'aria-checked': ariaChecked,
@@ -41,8 +42,10 @@ const Chip = ({
   closeButton
 }) => {
   const isActionable = onClick || onKeyPress;
+  const isInteractive = isActionable && !disabled;
   const defaultRole = isActionable ? 'button' : undefined;
-  const tabIndex = isActionable ? 0 : -1;
+  const chipRole = role ?? defaultRole;
+  const tabIndex = isInteractive ? 0 : -1;
   const closeButtonReference = React.useRef(null);
   const previousCloseButtonShown = React.useRef(undefined);
   React.useEffect(() => {
@@ -52,12 +55,15 @@ const Chip = ({
     previousCloseButtonShown.current = closeButtonReference.current != null;
   }, [onRemove]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    role: role ?? defaultRole,
+    role: chipRole,
     tabIndex: tabIndex,
     "aria-label": ariaLabel,
     "aria-checked": ariaChecked,
-    className: clsx.clsx('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', className),
-    ...(isActionable && {
+    "aria-disabled": chipRole && disabled ? true : undefined,
+    className: clsx.clsx('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', {
+      disabled
+    }, className),
+    ...(isInteractive && {
       onClick,
       onKeyPress
     }),
@@ -71,6 +77,7 @@ const Chip = ({
       "aria-label": closeButton?.['aria-label'],
       size: "sm",
       filled: true,
+      isDisabled: disabled,
       onClick: onRemove
     }) : null]
   }, value);

package/build/Chips/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../src/Chips/Chip/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../../Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../../common';\nimport { CloseButton } from '../../common/CloseButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type ChipProps<T extends ChipValue = ChipValue> = {\n  value?: T;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = <T extends ChipValue = ChipValue>({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: ChipProps<T>) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={role ?? defaultRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        className,\n      )}\n      {...(isActionable && { onClick, onKeyPress })}\n    >\n      <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n        {label}\n      </Body>\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className=\"btn-unstyled\"\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAI,GAAGA,CAAkC;EAC7CC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACE,KAAI;AACjB,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;AAEtC,EAAA,MAAMG,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,YAAM,CAAsBT,SAAS,CAAC;AACvEW,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEkB,eAAA,CAAA,KAAA,EAAA;IAEEX,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEgB,SAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBnB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAkB,QAAA,EAAA,cAE5CC,cAAA,CAACC,YAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACtB,QAAS;MAACuB,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DtB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPqB,cAAA,CAACK,uBAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCoB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACN5B,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA3BHD,KA4BF,CAAC;AAEV;;"}
+{"version":3,"file":"Chip.js","sources":["../../../src/Chips/Chip/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../../Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../../common';\nimport { CloseButton } from '../../common/CloseButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type ChipProps<T extends ChipValue = ChipValue> = {\n  value?: T;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  /** @default false */\n  disabled?: boolean;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = <T extends ChipValue = ChipValue>({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  disabled = false,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: ChipProps<T>) => {\n  const isActionable = onClick || onKeyPress;\n  const isInteractive = isActionable && !disabled;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const chipRole = role ?? defaultRole;\n  const tabIndex = isInteractive ? 0 : -1;\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={chipRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      aria-disabled={chipRole && disabled ? true : undefined}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        { disabled },\n        className,\n      )}\n      {...(isInteractive && { onClick, onKeyPress })}\n    >\n      <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n        {label}\n      </Body>\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className=\"btn-unstyled\"\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled\n          isDisabled={disabled}\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","disabled","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","isInteractive","defaultRole","chipRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled","isDisabled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAMA,IAAI,GAAGA,CAAkC;EAC7CC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACE,KAAI;AACjB,EAAA,MAAMC,YAAY,GAAGT,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMS,aAAa,GAAGD,YAAY,IAAI,CAACP,QAAQ;AAC/C,EAAA,MAAMS,WAAW,GAAGF,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMQ,QAAQ,GAAGL,IAAI,IAAII,WAAW;AACpC,EAAA,MAAME,QAAQ,GAAGH,aAAa,GAAG,CAAC,GAAG,EAAE;AAEvC,EAAA,MAAMI,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,YAAM,CAAsBX,SAAS,CAAC;AACvEa,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAACnB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEqB,eAAA,CAAA,KAAA,EAAA;AAEEb,IAAAA,IAAI,EAAEK,QAAS;AACfC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYR,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1B,IAAA,eAAA,EAAeM,QAAQ,IAAIV,QAAQ,GAAG,IAAI,GAAGE,SAAU;AACvDD,IAAAA,SAAS,EAAEkB,SAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBtB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpC;AAAEG,MAAAA;KAAU,EACZC,SAAS,CACT;AAAA,IAAA,IACGO,aAAa,IAAI;MAAEV,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAqB,QAAA,EAAA,cAE7CC,cAAA,CAACC,YAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACzB,QAAS;MAAC0B,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DzB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPwB,cAAA,CAACK,uBAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BX,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCsB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACNC,MAAAA,UAAU,EAAE9B,QAAS;AACrBF,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA9BHD,KA+BF,CAAC;AAEV;;"}

package/build/Chips/Chip/Chip.mjs

@@ -30,6 +30,7 @@ const Chip = ({
   onRemove,
   onClick,
   onKeyPress,
+  disabled = false,
   className = undefined,
   'aria-label': ariaLabel,
   'aria-checked': ariaChecked,
@@ -37,8 +38,10 @@ const Chip = ({
   closeButton
 }) => {
   const isActionable = onClick || onKeyPress;
+  const isInteractive = isActionable && !disabled;
   const defaultRole = isActionable ? 'button' : undefined;
-  const tabIndex = isActionable ? 0 : -1;
+  const chipRole = role ?? defaultRole;
+  const tabIndex = isInteractive ? 0 : -1;
   const closeButtonReference = useRef(null);
   const previousCloseButtonShown = useRef(undefined);
   useEffect(() => {
@@ -48,12 +51,15 @@ const Chip = ({
     previousCloseButtonShown.current = closeButtonReference.current != null;
   }, [onRemove]);
   return /*#__PURE__*/jsxs("div", {
-    role: role ?? defaultRole,
+    role: chipRole,
     tabIndex: tabIndex,
     "aria-label": ariaLabel,
     "aria-checked": ariaChecked,
-    className: clsx('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', className),
-    ...(isActionable && {
+    "aria-disabled": chipRole && disabled ? true : undefined,
+    className: clsx('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', {
+      disabled
+    }, className),
+    ...(isInteractive && {
       onClick,
       onKeyPress
     }),
@@ -67,6 +73,7 @@ const Chip = ({
       "aria-label": closeButton?.['aria-label'],
       size: "sm",
       filled: true,
+      isDisabled: disabled,
       onClick: onRemove
     }) : null]
   }, value);

package/build/Chips/Chip/Chip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.mjs","sources":["../../../src/Chips/Chip/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../../Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../../common';\nimport { CloseButton } from '../../common/CloseButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type ChipProps<T extends ChipValue = ChipValue> = {\n  value?: T;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = <T extends ChipValue = ChipValue>({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: ChipProps<T>) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={role ?? defaultRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        className,\n      )}\n      {...(isActionable && { onClick, onKeyPress })}\n    >\n      <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n        {label}\n      </Body>\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className=\"btn-unstyled\"\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAI,GAAGA,CAAkC;EAC7CC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACE,KAAI;AACjB,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;AAEtC,EAAA,MAAMG,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,MAAM,CAAsBT,SAAS,CAAC;AACvEW,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEkB,IAAA,CAAA,KAAA,EAAA;IAEEX,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEgB,IAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBnB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAkB,QAAA,EAAA,cAE5CC,GAAA,CAACC,IAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACtB,QAAS;MAACuB,IAAI,EAAEC,UAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DtB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPqB,GAAA,CAACK,WAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCoB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACN5B,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA3BHD,KA4BF,CAAC;AAEV;;"}
+{"version":3,"file":"Chip.mjs","sources":["../../../src/Chips/Chip/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../../Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../../common';\nimport { CloseButton } from '../../common/CloseButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type ChipProps<T extends ChipValue = ChipValue> = {\n  value?: T;\n  label: string;\n  onRemove?: () => void;\n  onClick?: () => void;\n  onKeyPress?: () => void;\n  /** @default false */\n  disabled?: boolean;\n  closeButton?: AriaLabelProperty;\n  'aria-checked'?: boolean;\n  role?: string;\n} & AriaLabelProperty &\n  CommonProps;\n\nconst Chip = <T extends ChipValue = ChipValue>({\n  label,\n  value,\n  onRemove,\n  onClick,\n  onKeyPress,\n  disabled = false,\n  className = undefined,\n  'aria-label': ariaLabel,\n  'aria-checked': ariaChecked,\n  role,\n  closeButton,\n}: ChipProps<T>) => {\n  const isActionable = onClick || onKeyPress;\n  const isInteractive = isActionable && !disabled;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const chipRole = role ?? defaultRole;\n  const tabIndex = isInteractive ? 0 : -1;\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n      closeButtonReference.current?.focus();\n    }\n    previousCloseButtonShown.current = closeButtonReference.current != null;\n  }, [onRemove]);\n\n  return (\n    <div\n      key={value}\n      role={chipRole}\n      tabIndex={tabIndex}\n      aria-label={ariaLabel}\n      aria-checked={ariaChecked}\n      aria-disabled={chipRole && disabled ? true : undefined}\n      className={clsx(\n        'np-chip',\n        'd-flex',\n        'align-items-center',\n        'justify-content-between',\n        onRemove ? 'np-chip--removable' : '',\n        { disabled },\n        className,\n      )}\n      {...(isInteractive && { onClick, onKeyPress })}\n    >\n      <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n        {label}\n      </Body>\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className=\"btn-unstyled\"\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled\n          isDisabled={disabled}\n          onClick={onRemove}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","disabled","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","isInteractive","defaultRole","chipRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled","isDisabled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAMA,IAAI,GAAGA,CAAkC;EAC7CC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACE,KAAI;AACjB,EAAA,MAAMC,YAAY,GAAGT,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMS,aAAa,GAAGD,YAAY,IAAI,CAACP,QAAQ;AAC/C,EAAA,MAAMS,WAAW,GAAGF,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMQ,QAAQ,GAAGL,IAAI,IAAII,WAAW;AACpC,EAAA,MAAME,QAAQ,GAAGH,aAAa,GAAG,CAAC,GAAG,EAAE;AAEvC,EAAA,MAAMI,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,MAAM,CAAsBX,SAAS,CAAC;AACvEa,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAACnB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEqB,IAAA,CAAA,KAAA,EAAA;AAEEb,IAAAA,IAAI,EAAEK,QAAS;AACfC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYR,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1B,IAAA,eAAA,EAAeM,QAAQ,IAAIV,QAAQ,GAAG,IAAI,GAAGE,SAAU;AACvDD,IAAAA,SAAS,EAAEkB,IAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBtB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpC;AAAEG,MAAAA;KAAU,EACZC,SAAS,CACT;AAAA,IAAA,IACGO,aAAa,IAAI;MAAEV,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAqB,QAAA,EAAA,cAE7CC,GAAA,CAACC,IAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACzB,QAAS;MAAC0B,IAAI,EAAEC,UAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DzB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPwB,GAAA,CAACK,WAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BX,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCsB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACNC,MAAAA,UAAU,EAAE9B,QAAS;AACrBF,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA9BHD,KA+BF,CAAC;AAEV;;"}

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

@@ -9,11 +9,12 @@ function SelectInputOptionContent({
   title,
   note,
   description,
-  icon
+  icon,
+  className
 }) {
   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'),
+    className: clsx.clsx('np-select-input-option-content-container', (note || description) && 'np-text-body-large', className),
     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
@@ -22,7 +23,7 @@ function SelectInputOptionContent({
       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",
+          className: "d-inline np-select-input-option-content-title",
           children: title
         }), note ? /*#__PURE__*/jsxRuntime.jsx("span", {
           className: "np-select-input-option-content-text-secondary np-text-body-default",

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

@@ -1 +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;;"}
+{"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  className?: string;\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  className,\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        className,\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 np-select-input-option-content-title\">{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","className","withinTrigger","useContext","SelectInputOptionContentWithinTriggerContext","_jsxs","clsx","children","_jsx"],"mappings":";;;;;;;AAiBM,SAAUA,wBAAwBA,CAAC;EACvCC,KAAK;EACLC,IAAI;EACJC,WAAW;EACXC,IAAI;AACJC,EAAAA;AAAS,CACqB,EAAA;AAC9B,EAAA,MAAMC,aAAa,GAAGC,gBAAU,CAACC,iEAA4C,CAAC;AAE9E,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,SAAI,CACb,0CAA0C,EAC1C,CAACR,IAAI,IAAIC,WAAW,KAAK,oBAAoB,EAC7CE,SAAS,CACT;IAAAM,QAAA,EAAA,CAEDP,IAAI,gBACHQ,cAAA,CAAA,KAAA,EAAA;MACEP,SAAS,EAAEK,SAAI,CACb,qCAAqC,EACrC,CAACJ,aAAa,IAAI,yDAAyD,CAC3E;AAAAK,MAAAA,QAAA,EAEDP;AAAI,KACF,CAAC,GACJ,IAAI,eAERK,eAAA,CAAA,KAAA,EAAA;AAAKJ,MAAAA,SAAS,EAAC,qCAAqC;AAAAM,MAAAA,QAAA,gBAClDF,eAAA,CAAA,KAAA,EAAA;QACEJ,SAAS,EAAEK,SAAI,CACb,4CAA4C,EAC5CJ,aAAa,IAAI,oDAAoD,CACrE;AAAAK,QAAAA,QAAA,gBAEFC,cAAA,CAAA,KAAA,EAAA;AAAKP,UAAAA,SAAS,EAAC,+CAA+C;AAAAM,UAAAA,QAAA,EAAEV;AAAK,SAAM,CAC3E,EAACC,IAAI,gBACHU,cAAA,CAAA,MAAA,EAAA;AAAMP,UAAAA,SAAS,EAAC,oEAAoE;AAAAM,UAAAA,QAAA,EACjFT;SACG,CAAC,GACL,IAAI;AAAA,OACL,CAEL,EAACC,WAAW,gBACVS,cAAA,CAAA,KAAA,EAAA;QACEP,SAAS,EAAEK,SAAI,CACb,oEAAoE,EACpEJ,aAAa,IACX,kGAAkG,CACpG;AAAAK,QAAAA,QAAA,EAEDR;OACE,CAAC,GACJ,IAAI;AAAA,KACL,CACP;AAAA,GAAK,CAAC;AAEV;;"}