@transferwise/components 46.45.0 → 46.46.1

package/build/chevron/Chevron.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var icons = require('@transferwise/icons');
+var classNames = require('classnames');
+var jsxRuntime = require('react/jsx-runtime');
+var size = require('../common/propsValues/size.js');
+var position = require('../common/propsValues/position.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const CONTAINER_SIZE = {
+  [size.Size.EXTRA_SMALL]: 10,
+  [size.Size.SMALL]: 16,
+  [size.Size.MEDIUM]: 24
+};
+const ExtraSmallChevron = ({
+  className
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: classNames__default.default('tw-icon', 'tw-icon-chevron', className),
+    role: "presentation",
+    "aria-hidden": true,
+    children: /*#__PURE__*/jsxRuntime.jsx("svg", {
+      width: "10",
+      height: "10",
+      viewBox: "0 0 10 10",
+      fill: "currentColor",
+      focusable: "false",
+      children: /*#__PURE__*/jsxRuntime.jsx("path", {
+        fillRule: "evenodd",
+        d: "M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z"
+      })
+    })
+  });
+};
+const Chevron = ({
+  orientation = position.Position.BOTTOM,
+  size: size$1 = size.Size.SMALL,
+  disabled = false,
+  className
+}) => {
+  const classNameValue = classNames__default.default('tw-chevron', {
+    'chevron-color': !disabled
+  }, orientation, className);
+  if (size$1 === size.Size.EXTRA_SMALL) {
+    return /*#__PURE__*/jsxRuntime.jsx(ExtraSmallChevron, {
+      className: classNameValue
+    });
+  }
+  const sizeValue = CONTAINER_SIZE[size$1];
+  return /*#__PURE__*/jsxRuntime.jsx(icons.ChevronUp, {
+    className: classNameValue,
+    size: sizeValue
+  });
+};
+
+module.exports = Chevron;
+//# sourceMappingURL=Chevron.js.map

package/build/chevron/Chevron.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chevron.js","sources":["../../src/chevron/Chevron.tsx"],"sourcesContent":["import { ChevronUp } from '@transferwise/icons';\nimport { IconSize } from '@transferwise/icons/lib/types';\nimport classNames from 'classnames';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionBottom,\n  PositionRight,\n  PositionLeft,\n  SizeExtraSmall,\n  SizeSmall,\n  SizeMedium,\n} from '../common';\n\nconst CONTAINER_SIZE = {\n  [Size.EXTRA_SMALL]: 10,\n  [Size.SMALL]: 16,\n  [Size.MEDIUM]: 24,\n};\n\nexport interface ChevronProps {\n  orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;\n  size?: SizeExtraSmall | SizeSmall | SizeMedium;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface ExtraSmallChevronProps {\n  className?: string;\n}\n\nconst ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {\n  return (\n    <span\n      className={classNames('tw-icon', 'tw-icon-chevron', className)}\n      role=\"presentation\"\n      aria-hidden\n    >\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" focusable=\"false\">\n        <path\n          fillRule=\"evenodd\"\n          d=\"M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z\"\n        />\n      </svg>\n    </span>\n  );\n};\n\nconst Chevron = ({\n  orientation = Position.BOTTOM,\n  size = Size.SMALL,\n  disabled = false,\n  className,\n}: ChevronProps) => {\n  const classNameValue = classNames(\n    'tw-chevron',\n    { 'chevron-color': !disabled },\n    orientation,\n    className,\n  );\n\n  if (size === Size.EXTRA_SMALL) {\n    return <ExtraSmallChevron className={classNameValue} />;\n  }\n\n  const sizeValue = CONTAINER_SIZE[size] as IconSize;\n\n  return <ChevronUp className={classNameValue} size={sizeValue} />;\n};\n\nexport default Chevron;\n"],"names":["CONTAINER_SIZE","Size","EXTRA_SMALL","SMALL","MEDIUM","ExtraSmallChevron","className","_jsx","classNames","role","children","width","height","viewBox","fill","focusable","fillRule","d","Chevron","orientation","Position","BOTTOM","size","disabled","classNameValue","sizeValue","ChevronUp"],"mappings":";;;;;;;;;;;;AAgBA,MAAMA,cAAc,GAAG;AACrB,EAAA,CAACC,SAAI,CAACC,WAAW,GAAG,EAAE;AACtB,EAAA,CAACD,SAAI,CAACE,KAAK,GAAG,EAAE;EAChB,CAACF,SAAI,CAACG,MAAM,GAAG,EAAA;CAChB,CAAA;AAaD,MAAMC,iBAAiB,GAAGA,CAAC;AAAEC,EAAAA,SAAAA;AAAS,CAA0B,KAAI;AAClE,EAAA,oBACEC,cAAA,CAAA,MAAA,EAAA;IACED,SAAS,EAAEE,2BAAU,CAAC,SAAS,EAAE,iBAAiB,EAAEF,SAAS,CAAE;AAC/DG,IAAAA,IAAI,EAAC,cAAc;IACnB,aAAW,EAAA,IAAA;AAAAC,IAAAA,QAAA,eAEXH,cAAA,CAAA,KAAA,EAAA;AAAKI,MAAAA,KAAK,EAAC,IAAI;AAACC,MAAAA,MAAM,EAAC,IAAI;AAACC,MAAAA,OAAO,EAAC,WAAW;AAACC,MAAAA,IAAI,EAAC,cAAc;AAACC,MAAAA,SAAS,EAAC,OAAO;AAAAL,MAAAA,QAAA,eACnFH,cAAA,CAAA,MAAA,EAAA;AACES,QAAAA,QAAQ,EAAC,SAAS;AAClBC,QAAAA,CAAC,EAAC,wGAAA;OAEN,CAAA;KAAK,CAAA;AACP,GAAM,CAAC,CAAA;AAEX,CAAC,CAAA;AAEKC,MAAAA,OAAO,GAAGA,CAAC;EACfC,WAAW,GAAGC,iBAAQ,CAACC,MAAM;QAC7BC,MAAI,GAAGrB,SAAI,CAACE,KAAK;AACjBoB,EAAAA,QAAQ,GAAG,KAAK;AAChBjB,EAAAA,SAAAA;AACa,CAAA,KAAI;AACjB,EAAA,MAAMkB,cAAc,GAAGhB,2BAAU,CAC/B,YAAY,EACZ;AAAE,IAAA,eAAe,EAAE,CAACe,QAAAA;AAAU,GAAA,EAC9BJ,WAAW,EACXb,SAAS,CACV,CAAA;AAED,EAAA,IAAIgB,MAAI,KAAKrB,SAAI,CAACC,WAAW,EAAE;IAC7B,oBAAOK,cAAA,CAACF,iBAAiB,EAAA;AAACC,MAAAA,SAAS,EAAEkB,cAAAA;AAAe,KAAA,CAAG,CAAA;AACzD,GAAA;AAEA,EAAA,MAAMC,SAAS,GAAGzB,cAAc,CAACsB,MAAI,CAAa,CAAA;EAElD,oBAAOf,cAAA,CAACmB,eAAS,EAAA;AAACpB,IAAAA,SAAS,EAAEkB,cAAe;AAACF,IAAAA,IAAI,EAAEG,SAAAA;AAAU,IAAG,CAAA;AAClE;;;;"}

package/build/chevron/Chevron.mjs

@@ -0,0 +1,54 @@
+import { ChevronUp } from '@transferwise/icons';
+import classNames from 'classnames';
+import { jsx } from 'react/jsx-runtime';
+import { Size } from '../common/propsValues/size.mjs';
+import { Position } from '../common/propsValues/position.mjs';
+
+const CONTAINER_SIZE = {
+  [Size.EXTRA_SMALL]: 10,
+  [Size.SMALL]: 16,
+  [Size.MEDIUM]: 24
+};
+const ExtraSmallChevron = ({
+  className
+}) => {
+  return /*#__PURE__*/jsx("span", {
+    className: classNames('tw-icon', 'tw-icon-chevron', className),
+    role: "presentation",
+    "aria-hidden": true,
+    children: /*#__PURE__*/jsx("svg", {
+      width: "10",
+      height: "10",
+      viewBox: "0 0 10 10",
+      fill: "currentColor",
+      focusable: "false",
+      children: /*#__PURE__*/jsx("path", {
+        fillRule: "evenodd",
+        d: "M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z"
+      })
+    })
+  });
+};
+const Chevron = ({
+  orientation = Position.BOTTOM,
+  size = Size.SMALL,
+  disabled = false,
+  className
+}) => {
+  const classNameValue = classNames('tw-chevron', {
+    'chevron-color': !disabled
+  }, orientation, className);
+  if (size === Size.EXTRA_SMALL) {
+    return /*#__PURE__*/jsx(ExtraSmallChevron, {
+      className: classNameValue
+    });
+  }
+  const sizeValue = CONTAINER_SIZE[size];
+  return /*#__PURE__*/jsx(ChevronUp, {
+    className: classNameValue,
+    size: sizeValue
+  });
+};
+
+export { Chevron as default };
+//# sourceMappingURL=Chevron.mjs.map

package/build/chevron/Chevron.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chevron.mjs","sources":["../../src/chevron/Chevron.tsx"],"sourcesContent":["import { ChevronUp } from '@transferwise/icons';\nimport { IconSize } from '@transferwise/icons/lib/types';\nimport classNames from 'classnames';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionBottom,\n  PositionRight,\n  PositionLeft,\n  SizeExtraSmall,\n  SizeSmall,\n  SizeMedium,\n} from '../common';\n\nconst CONTAINER_SIZE = {\n  [Size.EXTRA_SMALL]: 10,\n  [Size.SMALL]: 16,\n  [Size.MEDIUM]: 24,\n};\n\nexport interface ChevronProps {\n  orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;\n  size?: SizeExtraSmall | SizeSmall | SizeMedium;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport interface ExtraSmallChevronProps {\n  className?: string;\n}\n\nconst ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {\n  return (\n    <span\n      className={classNames('tw-icon', 'tw-icon-chevron', className)}\n      role=\"presentation\"\n      aria-hidden\n    >\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" focusable=\"false\">\n        <path\n          fillRule=\"evenodd\"\n          d=\"M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z\"\n        />\n      </svg>\n    </span>\n  );\n};\n\nconst Chevron = ({\n  orientation = Position.BOTTOM,\n  size = Size.SMALL,\n  disabled = false,\n  className,\n}: ChevronProps) => {\n  const classNameValue = classNames(\n    'tw-chevron',\n    { 'chevron-color': !disabled },\n    orientation,\n    className,\n  );\n\n  if (size === Size.EXTRA_SMALL) {\n    return <ExtraSmallChevron className={classNameValue} />;\n  }\n\n  const sizeValue = CONTAINER_SIZE[size] as IconSize;\n\n  return <ChevronUp className={classNameValue} size={sizeValue} />;\n};\n\nexport default Chevron;\n"],"names":["CONTAINER_SIZE","Size","EXTRA_SMALL","SMALL","MEDIUM","ExtraSmallChevron","className","_jsx","classNames","role","children","width","height","viewBox","fill","focusable","fillRule","d","Chevron","orientation","Position","BOTTOM","size","disabled","classNameValue","sizeValue","ChevronUp"],"mappings":";;;;;;AAgBA,MAAMA,cAAc,GAAG;AACrB,EAAA,CAACC,IAAI,CAACC,WAAW,GAAG,EAAE;AACtB,EAAA,CAACD,IAAI,CAACE,KAAK,GAAG,EAAE;EAChB,CAACF,IAAI,CAACG,MAAM,GAAG,EAAA;CAChB,CAAA;AAaD,MAAMC,iBAAiB,GAAGA,CAAC;AAAEC,EAAAA,SAAAA;AAAS,CAA0B,KAAI;AAClE,EAAA,oBACEC,GAAA,CAAA,MAAA,EAAA;IACED,SAAS,EAAEE,UAAU,CAAC,SAAS,EAAE,iBAAiB,EAAEF,SAAS,CAAE;AAC/DG,IAAAA,IAAI,EAAC,cAAc;IACnB,aAAW,EAAA,IAAA;AAAAC,IAAAA,QAAA,eAEXH,GAAA,CAAA,KAAA,EAAA;AAAKI,MAAAA,KAAK,EAAC,IAAI;AAACC,MAAAA,MAAM,EAAC,IAAI;AAACC,MAAAA,OAAO,EAAC,WAAW;AAACC,MAAAA,IAAI,EAAC,cAAc;AAACC,MAAAA,SAAS,EAAC,OAAO;AAAAL,MAAAA,QAAA,eACnFH,GAAA,CAAA,MAAA,EAAA;AACES,QAAAA,QAAQ,EAAC,SAAS;AAClBC,QAAAA,CAAC,EAAC,wGAAA;OAEN,CAAA;KAAK,CAAA;AACP,GAAM,CAAC,CAAA;AAEX,CAAC,CAAA;AAEKC,MAAAA,OAAO,GAAGA,CAAC;EACfC,WAAW,GAAGC,QAAQ,CAACC,MAAM;EAC7BC,IAAI,GAAGrB,IAAI,CAACE,KAAK;AACjBoB,EAAAA,QAAQ,GAAG,KAAK;AAChBjB,EAAAA,SAAAA;AACa,CAAA,KAAI;AACjB,EAAA,MAAMkB,cAAc,GAAGhB,UAAU,CAC/B,YAAY,EACZ;AAAE,IAAA,eAAe,EAAE,CAACe,QAAAA;AAAU,GAAA,EAC9BJ,WAAW,EACXb,SAAS,CACV,CAAA;AAED,EAAA,IAAIgB,IAAI,KAAKrB,IAAI,CAACC,WAAW,EAAE;IAC7B,oBAAOK,GAAA,CAACF,iBAAiB,EAAA;AAACC,MAAAA,SAAS,EAAEkB,cAAAA;AAAe,KAAA,CAAG,CAAA;AACzD,GAAA;AAEA,EAAA,MAAMC,SAAS,GAAGzB,cAAc,CAACsB,IAAI,CAAa,CAAA;EAElD,oBAAOf,GAAA,CAACmB,SAAS,EAAA;AAACpB,IAAAA,SAAS,EAAEkB,cAAe;AAACF,IAAAA,IAAI,EAAEG,SAAAA;AAAU,IAAG,CAAA;AAClE;;;;"}

package/build/chips/Chip.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var componentsTheming = require('@wise/components-theming');
+var classNames = require('classnames');
+var React = require('react');
+var Body = require('../body/Body.js');
+var CloseButton = require('../common/closeButton/CloseButton.js');
+var jsxRuntime = require('react/jsx-runtime');
+var typography = require('../common/propsValues/typography.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const Chip = ({
+  label,
+  value,
+  onRemove,
+  onClick,
+  onKeyPress,
+  className = undefined,
+  'aria-label': ariaLabel,
+  'aria-checked': ariaChecked,
+  role,
+  closeButton
+}) => {
+  const isActionable = onClick || onKeyPress;
+  const defaultRole = isActionable ? 'button' : undefined;
+  const tabIndex = isActionable ? 0 : -1;
+  const {
+    isModern
+  } = componentsTheming.useTheme();
+  const closeButtonReference = React.useRef(null);
+  const previousCloseButtonShown = React.useRef(undefined);
+  React.useEffect(() => {
+    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {
+      closeButtonReference.current?.focus();
+    }
+    previousCloseButtonShown.current = closeButtonReference.current != null;
+  }, [onRemove]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    role: role ?? defaultRole,
+    tabIndex: tabIndex,
+    "aria-label": ariaLabel,
+    "aria-checked": ariaChecked,
+    className: classNames__default.default('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', className),
+    ...(isActionable && {
+      onClick,
+      onKeyPress
+    }),
+    children: [isModern ? /*#__PURE__*/jsxRuntime.jsx(Body, {
+      "aria-hidden": !!onRemove,
+      type: typography.Typography.BODY_DEFAULT_BOLD,
+      children: label
+    }) : /*#__PURE__*/jsxRuntime.jsx("span", {
+      "aria-hidden": "false",
+      className: "np-chip-label",
+      children: label
+    }), onRemove ? /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
+      ref: closeButtonReference,
+      className: isModern ? `btn-unstyled` : `btn-unstyled m-l-1`,
+      "aria-label": closeButton?.['aria-label'],
+      size: "sm",
+      filled: isModern,
+      onClick: onRemove
+    }) : null]
+  }, value);
+};
+
+module.exports = Chip;
+//# sourceMappingURL=Chip.js.map

package/build/chips/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport classNames from 'classnames';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n  value?: ChipValue;\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 = ({\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}: Props) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const { isModern } = useTheme();\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={classNames(\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      {isModern ? (\n        <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n          {label}\n        </Body>\n      ) : (\n        <span aria-hidden=\"false\" className=\"np-chip-label\">\n          {label}\n        </span>\n      )}\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled={isModern}\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","isModern","useTheme","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","classNames","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;AAsBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,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,WAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU,CAAA;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS,CAAA;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;EAEtC,MAAM;AAAEG,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;AAE/B,EAAA,MAAMC,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC,CAAA;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,YAAM,CAAsBX,SAAS,CAAC,CAAA;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,CAAA;AACvC,KAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI,CAAA;AACzE,GAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEoB,eAAA,CAAA,KAAA,EAAA;IAEEb,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEkB,2BAAU,CACnB,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBrB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA,UAAAA;KAAY;AAAAoB,IAAAA,QAAA,EAE3CV,CAAAA,QAAQ,gBACPW,cAAA,CAACC,IAAI,EAAA;MAAC,aAAa,EAAA,CAAC,CAACxB,QAAS;MAACyB,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DxB,KAAAA;KACG,CAAC,gBAEPyB,cAAA,CAAA,MAAA,EAAA;AAAM,MAAA,aAAA,EAAY,OAAO;AAACpB,MAAAA,SAAS,EAAC,eAAe;AAAAmB,MAAAA,QAAA,EAChDxB,KAAAA;AAAK,KACF,CACP,EACAE,QAAQ,gBACPuB,cAAA,CAACK,uBAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BX,MAAAA,SAAS,EAAES,QAAQ,GAAiB,CAAA,YAAA,CAAA,GAAuB,CAAC,kBAAA,CAAA;MAC5D,YAAYJ,EAAAA,WAAW,GAAG,YAAY,CAAE;AACxCsB,MAAAA,IAAI,EAAC,IAAI;AACTC,MAAAA,MAAM,EAAEnB,QAAS;AACjBX,MAAAA,OAAO,EAAED,QAAAA;KACT,CAAA,GACA,IAAI,CAAA;AAAA,GAAA,EAjCHD,KAkCF,CAAC,CAAA;AAEV;;;;"}

package/build/chips/Chip.mjs

@@ -0,0 +1,65 @@
+import { useTheme } from '@wise/components-theming';
+import classNames from 'classnames';
+import { useRef, useEffect } from 'react';
+import Body from '../body/Body.mjs';
+import { CloseButton } from '../common/closeButton/CloseButton.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../common/propsValues/typography.mjs';
+
+const Chip = ({
+  label,
+  value,
+  onRemove,
+  onClick,
+  onKeyPress,
+  className = undefined,
+  'aria-label': ariaLabel,
+  'aria-checked': ariaChecked,
+  role,
+  closeButton
+}) => {
+  const isActionable = onClick || onKeyPress;
+  const defaultRole = isActionable ? 'button' : undefined;
+  const tabIndex = isActionable ? 0 : -1;
+  const {
+    isModern
+  } = useTheme();
+  const closeButtonReference = useRef(null);
+  const previousCloseButtonShown = useRef(undefined);
+  useEffect(() => {
+    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {
+      closeButtonReference.current?.focus();
+    }
+    previousCloseButtonShown.current = closeButtonReference.current != null;
+  }, [onRemove]);
+  return /*#__PURE__*/jsxs("div", {
+    role: role ?? defaultRole,
+    tabIndex: tabIndex,
+    "aria-label": ariaLabel,
+    "aria-checked": ariaChecked,
+    className: classNames('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', className),
+    ...(isActionable && {
+      onClick,
+      onKeyPress
+    }),
+    children: [isModern ? /*#__PURE__*/jsx(Body, {
+      "aria-hidden": !!onRemove,
+      type: Typography.BODY_DEFAULT_BOLD,
+      children: label
+    }) : /*#__PURE__*/jsx("span", {
+      "aria-hidden": "false",
+      className: "np-chip-label",
+      children: label
+    }), onRemove ? /*#__PURE__*/jsx(CloseButton, {
+      ref: closeButtonReference,
+      className: isModern ? `btn-unstyled` : `btn-unstyled m-l-1`,
+      "aria-label": closeButton?.['aria-label'],
+      size: "sm",
+      filled: isModern,
+      onClick: onRemove
+    }) : null]
+  }, value);
+};
+
+export { Chip as default };
+//# sourceMappingURL=Chip.mjs.map

package/build/chips/Chip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.mjs","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport classNames from 'classnames';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n  value?: ChipValue;\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 = ({\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}: Props) => {\n  const isActionable = onClick || onKeyPress;\n  const defaultRole = isActionable ? 'button' : undefined;\n  const tabIndex = isActionable ? 0 : -1;\n\n  const { isModern } = useTheme();\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={classNames(\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      {isModern ? (\n        <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n          {label}\n        </Body>\n      ) : (\n        <span aria-hidden=\"false\" className=\"np-chip-label\">\n          {label}\n        </span>\n      )}\n      {onRemove ? (\n        <CloseButton\n          ref={closeButtonReference}\n          className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}\n          aria-label={closeButton?.['aria-label']}\n          size=\"sm\"\n          filled={isModern}\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","isModern","useTheme","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","classNames","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;AAsBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,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,WAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU,CAAA;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS,CAAA;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;EAEtC,MAAM;AAAEG,IAAAA,QAAAA;GAAU,GAAGC,QAAQ,EAAE,CAAA;AAE/B,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC,CAAA;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,MAAM,CAAsBX,SAAS,CAAC,CAAA;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,CAAA;AACvC,KAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI,CAAA;AACzE,GAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEoB,IAAA,CAAA,KAAA,EAAA;IAEEb,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEkB,UAAU,CACnB,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBrB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA,UAAAA;KAAY;AAAAoB,IAAAA,QAAA,EAE3CV,CAAAA,QAAQ,gBACPW,GAAA,CAACC,IAAI,EAAA;MAAC,aAAa,EAAA,CAAC,CAACxB,QAAS;MAACyB,IAAI,EAAEC,UAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DxB,KAAAA;KACG,CAAC,gBAEPyB,GAAA,CAAA,MAAA,EAAA;AAAM,MAAA,aAAA,EAAY,OAAO;AAACpB,MAAAA,SAAS,EAAC,eAAe;AAAAmB,MAAAA,QAAA,EAChDxB,KAAAA;AAAK,KACF,CACP,EACAE,QAAQ,gBACPuB,GAAA,CAACK,WAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BX,MAAAA,SAAS,EAAES,QAAQ,GAAiB,CAAA,YAAA,CAAA,GAAuB,CAAC,kBAAA,CAAA;MAC5D,YAAYJ,EAAAA,WAAW,GAAG,YAAY,CAAE;AACxCsB,MAAAA,IAAI,EAAC,IAAI;AACTC,MAAAA,MAAM,EAAEnB,QAAS;AACjBX,MAAAA,OAAO,EAAED,QAAAA;KACT,CAAA,GACA,IAAI,CAAA;AAAA,GAAA,EAjCHD,KAkCF,CAAC,CAAA;AAEV;;;;"}

package/build/chips/Chips.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var classNames = require('classnames');
+var reactIntl = require('react-intl');
+var Chip = require('./Chip.js');
+var Chips_messages = require('./Chips.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const Chips = ({
+  chips,
+  onChange,
+  selected,
+  'aria-label': ariaLabel,
+  className,
+  multiple
+}) => {
+  const intl = reactIntl.useIntl();
+  const isSelected = value => Array.isArray(selected) ? selected.includes(value) : selected === value;
+  const handleOnChange = (selectedValue, isCurrentlyEnabled) => {
+    onChange({
+      isEnabled: !isCurrentlyEnabled,
+      selectedValue
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: classNames__default.default('np-chips d-flex', className),
+    "aria-label": ariaLabel,
+    role: !multiple ? 'radiogroup' : undefined,
+    children: chips.map(chip => {
+      const chipSelected = isSelected(chip.value);
+      return /*#__PURE__*/jsxRuntime.jsx(Chip, {
+        value: chip.value,
+        label: chip.label,
+        closeButton: {
+          'aria-label': intl.formatMessage(Chips_messages.ariaLabel, {
+            choice: chip.label
+          })
+        },
+        className: classNames__default.default('text-xs-nowrap', {
+          'np-chip--selected': chipSelected,
+          'p-r-1': multiple && chipSelected
+        }),
+        ...(multiple && chipSelected ? {
+          onRemove: () => handleOnChange(chip.value, chipSelected),
+          'aria-label': chip.label
+        } : {
+          onClick: () => handleOnChange(chip.value, chipSelected),
+          onKeyPress: () => handleOnChange(chip.value, chipSelected),
+          role: !multiple ? 'radio' : undefined,
+          'aria-checked': chipSelected
+        })
+      }, chip.value);
+    })
+  });
+};
+
+module.exports = Chips;
+//# sourceMappingURL=Chips.js.map

package/build/chips/Chips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chips.js","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n  value: ChipValue;\n  label: string;\n};\n\nexport type ChipsProps = CommonProps &\n  AriaLabelProperty & {\n    /** List of chips with string labels and string/number values */\n    chips: readonly Chip[];\n    /** Callback which is invoked when a chip is selected or deselected */\n    onChange: ({\n      isEnabled,\n      selectedValue,\n    }: {\n      isEnabled: boolean;\n      selectedValue: ChipValue;\n    }) => void;\n    /** Used to manage which chips are selected */\n    selected: ChipValue | readonly ChipValue[];\n    /** Used to activate multi-selection */\n    multiple?: boolean;\n  };\n\nconst Chips = ({\n  chips,\n  onChange,\n  selected,\n  'aria-label': ariaLabel,\n  className,\n  multiple,\n}: ChipsProps) => {\n  const intl = useIntl();\n\n  const isSelected = (value: ChipValue) =>\n    Array.isArray(selected) ? selected.includes(value) : selected === value;\n\n  const handleOnChange = (selectedValue: ChipValue, isCurrentlyEnabled: boolean) => {\n    onChange({ isEnabled: !isCurrentlyEnabled, selectedValue });\n  };\n\n  return (\n    <div\n      className={classNames('np-chips d-flex', className)}\n      aria-label={ariaLabel}\n      role={!multiple ? 'radiogroup' : undefined}\n    >\n      {chips.map((chip) => {\n        const chipSelected = isSelected(chip.value);\n        return (\n          <Chip\n            key={chip.value}\n            value={chip.value}\n            label={chip.label}\n            closeButton={{\n              'aria-label': intl.formatMessage(messages.ariaLabel, { choice: chip.label }),\n            }}\n            className={classNames('text-xs-nowrap', {\n              'np-chip--selected': chipSelected,\n              'p-r-1': multiple && chipSelected,\n            })}\n            {...(multiple && chipSelected\n              ? {\n                  onRemove: () => handleOnChange(chip.value, chipSelected),\n                  'aria-label': chip.label,\n                }\n              : {\n                  onClick: () => handleOnChange(chip.value, chipSelected),\n                  onKeyPress: () => handleOnChange(chip.value, chipSelected),\n                  role: !multiple ? 'radio' : undefined,\n                  'aria-checked': chipSelected,\n                })}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport default Chips;\n"],"names":["Chips","chips","onChange","selected","ariaLabel","className","multiple","intl","useIntl","isSelected","value","Array","isArray","includes","handleOnChange","selectedValue","isCurrentlyEnabled","isEnabled","_jsx","classNames","role","undefined","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":";;;;;;;;;;;;AAiCMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK,CAAA;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA,aAAAA;AAAe,KAAA,CAAC,CAAA;GAC5D,CAAA;AAED,EAAA,oBACEG,cAAA,CAAA,KAAA,EAAA;AACEb,IAAAA,SAAS,EAAEc,2BAAU,CAAC,iBAAiB,EAAEd,SAAS,CAAE;AACpD,IAAA,YAAA,EAAYD,SAAU;AACtBgB,IAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,YAAY,GAAGe,SAAU;AAAAC,IAAAA,QAAA,EAE1CrB,KAAK,CAACsB,GAAG,CAAEC,IAAI,IAAI;AAClB,MAAA,MAAMC,YAAY,GAAGhB,UAAU,CAACe,IAAI,CAACd,KAAK,CAAC,CAAA;MAC3C,oBACEQ,cAAA,CAACQ,IAAI,EAAA;QAEHhB,KAAK,EAAEc,IAAI,CAACd,KAAM;QAClBiB,KAAK,EAAEH,IAAI,CAACG,KAAM;AAClBC,QAAAA,WAAW,EAAE;UACX,YAAY,EAAErB,IAAI,CAACsB,aAAa,CAACC,cAAQ,CAAC1B,SAAS,EAAE;YAAE2B,MAAM,EAAEP,IAAI,CAACG,KAAAA;WAAO,CAAA;SAC3E;AACFtB,QAAAA,SAAS,EAAEc,2BAAU,CAAC,gBAAgB,EAAE;AACtC,UAAA,mBAAmB,EAAEM,YAAY;UACjC,OAAO,EAAEnB,QAAQ,IAAImB,YAAAA;AACtB,SAAA,CAAE;QAAA,IACEnB,QAAQ,IAAImB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMlB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;UACxD,YAAY,EAAED,IAAI,CAACG,KAAAA;AACpB,SAAA,GACD;UACEM,OAAO,EAAEA,MAAMnB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;UACvDS,UAAU,EAAEA,MAAMpB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;AAC1DL,UAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,OAAO,GAAGe,SAAS;AACrC,UAAA,cAAc,EAAEI,YAAAA;SACjB;OApBAD,EAAAA,IAAI,CAACd,KAqBV,CAAA,CAAA;KAEL,CAAA;AAAC,GACC,CAAC,CAAA;AAEV;;;;"}

package/build/chips/Chips.messages.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var reactIntl = require('react-intl');
+
+var messages = reactIntl.defineMessages({
+  ariaLabel: {
+    id: "neptune.Chips.ariaLabel"
+  }
+});
+
+module.exports = messages;
+//# sourceMappingURL=Chips.messages.js.map

package/build/chips/Chips.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chips.messages.js","sources":["../../src/chips/Chips.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  ariaLabel: {\n    id: 'neptune.Chips.ariaLabel',\n    defaultMessage: 'Clear {choice}',\n    description: 'Clear button for chip',\n  },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA,yBAAA;AAGH,GAAA;AACF,CAAA,CAAC;;;;"}

package/build/chips/Chips.messages.mjs

@@ -0,0 +1,10 @@
+import { defineMessages } from 'react-intl';
+
+var messages = defineMessages({
+  ariaLabel: {
+    id: "neptune.Chips.ariaLabel"
+  }
+});
+
+export { messages as default };
+//# sourceMappingURL=Chips.messages.mjs.map

package/build/chips/Chips.messages.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chips.messages.mjs","sources":["../../src/chips/Chips.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  ariaLabel: {\n    id: 'neptune.Chips.ariaLabel',\n    defaultMessage: 'Clear {choice}',\n    description: 'Clear button for chip',\n  },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA,yBAAA;AAGH,GAAA;AACF,CAAA,CAAC;;;;"}

package/build/chips/Chips.mjs

@@ -0,0 +1,56 @@
+import classNames from 'classnames';
+import { useIntl } from 'react-intl';
+import Chip from './Chip.mjs';
+import messages from './Chips.messages.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const Chips = ({
+  chips,
+  onChange,
+  selected,
+  'aria-label': ariaLabel,
+  className,
+  multiple
+}) => {
+  const intl = useIntl();
+  const isSelected = value => Array.isArray(selected) ? selected.includes(value) : selected === value;
+  const handleOnChange = (selectedValue, isCurrentlyEnabled) => {
+    onChange({
+      isEnabled: !isCurrentlyEnabled,
+      selectedValue
+    });
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: classNames('np-chips d-flex', className),
+    "aria-label": ariaLabel,
+    role: !multiple ? 'radiogroup' : undefined,
+    children: chips.map(chip => {
+      const chipSelected = isSelected(chip.value);
+      return /*#__PURE__*/jsx(Chip, {
+        value: chip.value,
+        label: chip.label,
+        closeButton: {
+          'aria-label': intl.formatMessage(messages.ariaLabel, {
+            choice: chip.label
+          })
+        },
+        className: classNames('text-xs-nowrap', {
+          'np-chip--selected': chipSelected,
+          'p-r-1': multiple && chipSelected
+        }),
+        ...(multiple && chipSelected ? {
+          onRemove: () => handleOnChange(chip.value, chipSelected),
+          'aria-label': chip.label
+        } : {
+          onClick: () => handleOnChange(chip.value, chipSelected),
+          onKeyPress: () => handleOnChange(chip.value, chipSelected),
+          role: !multiple ? 'radio' : undefined,
+          'aria-checked': chipSelected
+        })
+      }, chip.value);
+    })
+  });
+};
+
+export { Chips as default };
+//# sourceMappingURL=Chips.mjs.map

package/build/chips/Chips.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chips.mjs","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n  value: ChipValue;\n  label: string;\n};\n\nexport type ChipsProps = CommonProps &\n  AriaLabelProperty & {\n    /** List of chips with string labels and string/number values */\n    chips: readonly Chip[];\n    /** Callback which is invoked when a chip is selected or deselected */\n    onChange: ({\n      isEnabled,\n      selectedValue,\n    }: {\n      isEnabled: boolean;\n      selectedValue: ChipValue;\n    }) => void;\n    /** Used to manage which chips are selected */\n    selected: ChipValue | readonly ChipValue[];\n    /** Used to activate multi-selection */\n    multiple?: boolean;\n  };\n\nconst Chips = ({\n  chips,\n  onChange,\n  selected,\n  'aria-label': ariaLabel,\n  className,\n  multiple,\n}: ChipsProps) => {\n  const intl = useIntl();\n\n  const isSelected = (value: ChipValue) =>\n    Array.isArray(selected) ? selected.includes(value) : selected === value;\n\n  const handleOnChange = (selectedValue: ChipValue, isCurrentlyEnabled: boolean) => {\n    onChange({ isEnabled: !isCurrentlyEnabled, selectedValue });\n  };\n\n  return (\n    <div\n      className={classNames('np-chips d-flex', className)}\n      aria-label={ariaLabel}\n      role={!multiple ? 'radiogroup' : undefined}\n    >\n      {chips.map((chip) => {\n        const chipSelected = isSelected(chip.value);\n        return (\n          <Chip\n            key={chip.value}\n            value={chip.value}\n            label={chip.label}\n            closeButton={{\n              'aria-label': intl.formatMessage(messages.ariaLabel, { choice: chip.label }),\n            }}\n            className={classNames('text-xs-nowrap', {\n              'np-chip--selected': chipSelected,\n              'p-r-1': multiple && chipSelected,\n            })}\n            {...(multiple && chipSelected\n              ? {\n                  onRemove: () => handleOnChange(chip.value, chipSelected),\n                  'aria-label': chip.label,\n                }\n              : {\n                  onClick: () => handleOnChange(chip.value, chipSelected),\n                  onKeyPress: () => handleOnChange(chip.value, chipSelected),\n                  role: !multiple ? 'radio' : undefined,\n                  'aria-checked': chipSelected,\n                })}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport default Chips;\n"],"names":["Chips","chips","onChange","selected","ariaLabel","className","multiple","intl","useIntl","isSelected","value","Array","isArray","includes","handleOnChange","selectedValue","isCurrentlyEnabled","isEnabled","_jsx","classNames","role","undefined","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":";;;;;;AAiCMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK,CAAA;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA,aAAAA;AAAe,KAAA,CAAC,CAAA;GAC5D,CAAA;AAED,EAAA,oBACEG,GAAA,CAAA,KAAA,EAAA;AACEb,IAAAA,SAAS,EAAEc,UAAU,CAAC,iBAAiB,EAAEd,SAAS,CAAE;AACpD,IAAA,YAAA,EAAYD,SAAU;AACtBgB,IAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,YAAY,GAAGe,SAAU;AAAAC,IAAAA,QAAA,EAE1CrB,KAAK,CAACsB,GAAG,CAAEC,IAAI,IAAI;AAClB,MAAA,MAAMC,YAAY,GAAGhB,UAAU,CAACe,IAAI,CAACd,KAAK,CAAC,CAAA;MAC3C,oBACEQ,GAAA,CAACQ,IAAI,EAAA;QAEHhB,KAAK,EAAEc,IAAI,CAACd,KAAM;QAClBiB,KAAK,EAAEH,IAAI,CAACG,KAAM;AAClBC,QAAAA,WAAW,EAAE;UACX,YAAY,EAAErB,IAAI,CAACsB,aAAa,CAACC,QAAQ,CAAC1B,SAAS,EAAE;YAAE2B,MAAM,EAAEP,IAAI,CAACG,KAAAA;WAAO,CAAA;SAC3E;AACFtB,QAAAA,SAAS,EAAEc,UAAU,CAAC,gBAAgB,EAAE;AACtC,UAAA,mBAAmB,EAAEM,YAAY;UACjC,OAAO,EAAEnB,QAAQ,IAAImB,YAAAA;AACtB,SAAA,CAAE;QAAA,IACEnB,QAAQ,IAAImB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMlB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;UACxD,YAAY,EAAED,IAAI,CAACG,KAAAA;AACpB,SAAA,GACD;UACEM,OAAO,EAAEA,MAAMnB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;UACvDS,UAAU,EAAEA,MAAMpB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;AAC1DL,UAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,OAAO,GAAGe,SAAS;AACrC,UAAA,cAAc,EAAEI,YAAAA;SACjB;OApBAD,EAAAA,IAAI,CAACd,KAqBV,CAAA,CAAA;KAEL,CAAA;AAAC,GACC,CAAC,CAAA;AAEV;;;;"}

package/build/circularButton/CircularButton.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var classNames = require('classnames');
+var React = require('react');
+var Body = require('../body/Body.js');
+var classMap = require('../button/classMap.js');
+var jsxRuntime = require('react/jsx-runtime');
+var typography = require('../common/propsValues/typography.js');
+var control = require('../common/propsValues/control.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const CircularButton = ({
+  className,
+  children,
+  disabled,
+  icon,
+  priority = control.Priority.PRIMARY,
+  type = control.ControlType.ACCENT,
+  ...rest
+}) => {
+  const classes = classNames__default.default('btn np-btn', classMap.typeClassMap[type], classMap.priorityClassMap[priority]);
+  const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/React.cloneElement(icon, {
+    size: 24
+  }) : icon;
+  return /*#__PURE__*/jsxRuntime.jsxs("label", {
+    className: classNames__default.default('np-circular-btn', priority, type, disabled && 'disabled', className),
+    children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+      type: "button",
+      "aria-label": children,
+      className: classes,
+      disabled: disabled,
+      ...rest
+    }), iconElement, /*#__PURE__*/jsxRuntime.jsx(Body, {
+      as: "span",
+      className: "np-circular-btn__label",
+      type: typography.Typography.BODY_DEFAULT_BOLD,
+      children: children
+    })]
+  });
+};
+
+module.exports = CircularButton;
+//# sourceMappingURL=CircularButton.js.map

package/build/circularButton/CircularButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularButton.js","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { ControlType, Priority } from '../common';\nimport { Typography } from '../common';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = classNames('btn np-btn', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  return (\n    <label\n      className={classNames('np-circular-btn', priority, type, disabled && 'disabled', className)}\n    >\n      <input\n        type=\"button\"\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","classNames","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","_jsxs","_jsx","Body","as","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;;AAkBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,mBAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,2BAAU,CAAC,YAAY,EAAEC,qBAAY,CAACN,IAAI,CAAC,EAAEO,yBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAExF,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,kBAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;AAE5F,EAAA,oBACEiB,eAAA,CAAA,OAAA,EAAA;AACEpB,IAAAA,SAAS,EAAEY,2BAAU,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;AAAAC,IAAAA,QAAA,gBAE5FoB,cAAA,CAAA,OAAA,EAAA;AACEd,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,YAAA,EAAYN,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZM,cAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACvB,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEiB,qBAAU,CAACC,iBAAkB;AAAAxB,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}

package/build/circularButton/CircularButton.mjs

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import { cloneElement } from 'react';
+import Body from '../body/Body.mjs';
+import { typeClassMap, priorityClassMap } from '../button/classMap.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../common/propsValues/typography.mjs';
+import { Priority, ControlType } from '../common/propsValues/control.mjs';
+
+const CircularButton = ({
+  className,
+  children,
+  disabled,
+  icon,
+  priority = Priority.PRIMARY,
+  type = ControlType.ACCENT,
+  ...rest
+}) => {
+  const classes = classNames('btn np-btn', typeClassMap[type], priorityClassMap[priority]);
+  const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/cloneElement(icon, {
+    size: 24
+  }) : icon;
+  return /*#__PURE__*/jsxs("label", {
+    className: classNames('np-circular-btn', priority, type, disabled && 'disabled', className),
+    children: [/*#__PURE__*/jsx("input", {
+      type: "button",
+      "aria-label": children,
+      className: classes,
+      disabled: disabled,
+      ...rest
+    }), iconElement, /*#__PURE__*/jsx(Body, {
+      as: "span",
+      className: "np-circular-btn__label",
+      type: Typography.BODY_DEFAULT_BOLD,
+      children: children
+    })]
+  });
+};
+
+export { CircularButton as default };
+//# sourceMappingURL=CircularButton.mjs.map

package/build/circularButton/CircularButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularButton.mjs","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { ControlType, Priority } from '../common';\nimport { Typography } from '../common';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = classNames('btn np-btn', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  return (\n    <label\n      className={classNames('np-circular-btn', priority, type, disabled && 'disabled', className)}\n    >\n      <input\n        type=\"button\"\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","classNames","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","_jsxs","_jsx","Body","as","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;AAkBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,WAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAAC,YAAY,EAAEC,YAAY,CAACN,IAAI,CAAC,EAAEO,gBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAExF,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,YAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;AAE5F,EAAA,oBACEiB,IAAA,CAAA,OAAA,EAAA;AACEpB,IAAAA,SAAS,EAAEY,UAAU,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;AAAAC,IAAAA,QAAA,gBAE5FoB,GAAA,CAAA,OAAA,EAAA;AACEd,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,YAAA,EAAYN,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZM,GAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACvB,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEiB,UAAU,CAACC,iBAAkB;AAAAxB,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}

package/build/common/DOMOperations/DOMOperations.js

@@ -0,0 +1,24 @@
+'use strict';
+
+/**
+ * Defined in `Dimmer.less`
+ */
+const NO_SCROLL_CLASS = 'no-scroll';
+/**
+ * Apply {@link NO_SCROLL_CLASS} that disables scroll on page (e.g use in Dimmer to disable scroll behind the component)
+ *
+ * CSS class needs to be applied for `html` and not `body`, as this doing both will break any position sticky in the document.
+ */
+const addNoScrollClass = () => {
+  document.documentElement.classList.add(NO_SCROLL_CLASS);
+};
+/**
+ * Clean up after {@link addNoScrollClass} function
+ */
+const removeNoScrollClass = () => {
+  document.documentElement.classList.remove(NO_SCROLL_CLASS);
+};
+
+exports.addNoScrollClass = addNoScrollClass;
+exports.removeNoScrollClass = removeNoScrollClass;
+//# sourceMappingURL=DOMOperations.js.map

package/build/common/DOMOperations/DOMOperations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DOMOperations.js","sources":["../../../src/common/DOMOperations/DOMOperations.ts"],"sourcesContent":["/**\n * Defined in `Dimmer.less`\n */\nconst NO_SCROLL_CLASS = 'no-scroll';\n\n/**\n * Apply {@link NO_SCROLL_CLASS} that disables scroll on page (e.g use in Dimmer to disable scroll behind the component)\n *\n * CSS class needs to be applied for `html` and not `body`, as this doing both will break any position sticky in the document.\n */\nexport const addNoScrollClass = () => {\n  document.documentElement.classList.add(NO_SCROLL_CLASS);\n};\n\n/**\n * Clean up after {@link addNoScrollClass} function\n */\nexport const removeNoScrollClass = () => {\n  document.documentElement.classList.remove(NO_SCROLL_CLASS);\n};\n"],"names":["NO_SCROLL_CLASS","addNoScrollClass","document","documentElement","classList","add","removeNoScrollClass","remove"],"mappings":";;AAAA;;AAEG;AACH,MAAMA,eAAe,GAAG,WAAW,CAAA;AAEnC;;;;AAIG;AACUC,MAAAA,gBAAgB,GAAGA,MAAK;EACnCC,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACC,GAAG,CAACL,eAAe,CAAC,CAAA;AACzD,EAAC;AAED;;AAEG;AACUM,MAAAA,mBAAmB,GAAGA,MAAK;EACtCJ,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACG,MAAM,CAACP,eAAe,CAAC,CAAA;AAC5D;;;;;"}

package/build/common/DOMOperations/DOMOperations.mjs

@@ -0,0 +1,21 @@
+/**
+ * Defined in `Dimmer.less`
+ */
+const NO_SCROLL_CLASS = 'no-scroll';
+/**
+ * Apply {@link NO_SCROLL_CLASS} that disables scroll on page (e.g use in Dimmer to disable scroll behind the component)
+ *
+ * CSS class needs to be applied for `html` and not `body`, as this doing both will break any position sticky in the document.
+ */
+const addNoScrollClass = () => {
+  document.documentElement.classList.add(NO_SCROLL_CLASS);
+};
+/**
+ * Clean up after {@link addNoScrollClass} function
+ */
+const removeNoScrollClass = () => {
+  document.documentElement.classList.remove(NO_SCROLL_CLASS);
+};
+
+export { addNoScrollClass, removeNoScrollClass };
+//# sourceMappingURL=DOMOperations.mjs.map