@transferwise/components 0.0.0-experimental-4553cce → 0.0.0-experimental-03e1dec

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/build/index.js +133 -290
  2. package/build/index.js.map +1 -1
  3. package/build/index.mjs +135 -292
  4. package/build/index.mjs.map +1 -1
  5. package/build/types/alert/Alert.d.ts +47 -58
  6. package/build/types/alert/Alert.d.ts.map +1 -1
  7. package/build/types/alert/index.d.ts +2 -1
  8. package/build/types/alert/index.d.ts.map +1 -1
  9. package/build/types/common/propsValues/sentiment.d.ts +0 -1
  10. package/build/types/common/propsValues/sentiment.d.ts.map +1 -1
  11. package/build/types/index.d.ts +1 -1
  12. package/build/types/index.d.ts.map +1 -1
  13. package/build/types/inlineAlert/InlineAlert.d.ts +2 -4
  14. package/build/types/inlineAlert/InlineAlert.d.ts.map +1 -1
  15. package/build/types/statusIcon/StatusIcon.d.ts +1 -1
  16. package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
  17. package/package.json +2 -2
  18. package/src/alert/{Alert.spec.js → Alert.spec.tsx} +42 -44
  19. package/src/alert/Alert.story.tsx +1 -2
  20. package/src/alert/Alert.tsx +222 -0
  21. package/src/alert/index.ts +2 -0
  22. package/src/common/propsValues/sentiment.ts +0 -10
  23. package/src/index.ts +1 -1
  24. package/src/inlineAlert/InlineAlert.spec.tsx +0 -7
  25. package/src/inlineAlert/InlineAlert.tsx +19 -47
  26. package/src/statusIcon/StatusIcon.tsx +14 -14
  27. package/build/types/alert/withArrow/alertArrowPositions.d.ts +0 -9
  28. package/build/types/alert/withArrow/alertArrowPositions.d.ts.map +0 -1
  29. package/build/types/alert/withArrow/index.d.ts +0 -3
  30. package/build/types/alert/withArrow/index.d.ts.map +0 -1
  31. package/build/types/alert/withArrow/withArrow.d.ts +0 -11
  32. package/build/types/alert/withArrow/withArrow.d.ts.map +0 -1
  33. package/src/alert/Alert.js +0 -196
  34. package/src/alert/index.js +0 -1
  35. package/src/alert/withArrow/alertArrowPositions.ts +0 -9
  36. package/src/alert/withArrow/index.js +0 -2
  37. package/src/alert/withArrow/withArrow.js +0 -50
  38. package/src/alert/withArrow/withArrow.spec.js +0 -51
package/build/index.mjs CHANGED
@@ -1,11 +1,12 @@
1
1
  import classNames from 'classnames';
2
2
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
3
  import * as React from 'react';
4
- import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, createContext, useContext, useImperativeHandle, createElement, Component, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
4
+ import React__default, { forwardRef, cloneElement, useState, useEffect, useRef, useMemo, useCallback, useLayoutEffect, createContext, useContext, useImperativeHandle, createElement, Component, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
5
5
  import { useId } from '@radix-ui/react-id';
6
- import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$2, ClockBorderless, CheckCircle, InfoCircle, Warning, CrossCircle, Clock, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
6
+ import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
7
7
  import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
8
8
  import PropTypes from 'prop-types';
9
+ import commonmark from 'commonmark';
9
10
  import { useTheme, ThemeProvider } from '@wise/components-theming';
10
11
  import { formatDate, formatNumber, formatMoney, formatAmount } from '@transferwise/formatting';
11
12
  import { Transition, Listbox } from '@headlessui/react';
@@ -19,7 +20,6 @@ import { usePopper } from 'react-popper';
19
20
  import throttle from 'lodash.throttle';
20
21
  import { createPortal } from 'react-dom';
21
22
  import { isUndefined, isKey, isNumber, isEmpty, isNull } from '@transferwise/neptune-validation';
22
- import commonmark from 'commonmark';
23
23
  import { Flag, Illustration } from '@wise/art';
24
24
  import clamp$2 from 'lodash.clamp';
25
25
  import debounce from 'lodash.debounce';
@@ -775,22 +775,22 @@ const Link = ({
775
775
  });
776
776
  };
777
777
 
778
+ const iconTypeMap = {
779
+ positive: Check,
780
+ neutral: Info$1,
781
+ warning: Alert$1,
782
+ negative: Cross,
783
+ pending: ClockBorderless,
784
+ info: Info$1,
785
+ error: Cross,
786
+ success: Check
787
+ };
778
788
  const StatusIcon = ({
779
- sentiment = Sentiment.NEUTRAL,
780
- size = Size.MEDIUM
789
+ sentiment = 'neutral',
790
+ size = 'md'
781
791
  }) => {
782
- const iconTypeMap = {
783
- [Sentiment.POSITIVE]: Check,
784
- [Sentiment.NEUTRAL]: Info$1,
785
- [Sentiment.WARNING]: Alert$2,
786
- [Sentiment.NEGATIVE]: Cross,
787
- [Sentiment.PENDING]: ClockBorderless,
788
- [Sentiment.INFO]: Info$1,
789
- [Sentiment.ERROR]: Cross,
790
- [Sentiment.SUCCESS]: Check
791
- };
792
- const iconColor = [Sentiment.WARNING, Sentiment.PENDING].includes(sentiment) ? 'dark' : 'light';
793
792
  const Icon = iconTypeMap[sentiment];
793
+ const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
794
794
  return /*#__PURE__*/jsx("span", {
795
795
  "data-testid": "status-icon",
796
796
  className: classNames('status-circle', 'status-circle-' + size, sentiment),
@@ -800,7 +800,7 @@ const StatusIcon = ({
800
800
  });
801
801
  };
802
802
 
803
- function logActionRequired$1(message) {
803
+ function logActionRequired(message) {
804
804
  if (['development', 'test'].includes(process?.env?.NODE_ENV)) {
805
805
  // eslint-disable-next-line no-console
806
806
  console.warn(message);
@@ -808,48 +808,10 @@ function logActionRequired$1(message) {
808
808
  }
809
809
  function logActionRequiredIf(message, conditional) {
810
810
  if (conditional) {
811
- logActionRequired$1(message);
811
+ logActionRequired(message);
812
812
  }
813
813
  }
814
814
 
815
- const deprecatedMessage = ({
816
- component,
817
- propName,
818
- message,
819
- expiryDate
820
- }) => {
821
- const messages = [`${component} has deprecated the use of ${propName}.`];
822
- if (message) {
823
- messages.push(message);
824
- }
825
- if (expiryDate) {
826
- messages.push(`${propName} will be removed on or after ${expiryDate.toLocaleString('en-GB', {
827
- year: 'numeric',
828
- month: 'numeric',
829
- day: 'numeric'
830
- })}`);
831
- }
832
- return messages.join(' ');
833
- };
834
- const deprecated = (validator, {
835
- component,
836
- message = '',
837
- newProp: newProperty = null,
838
- expiryDate = null
839
- }) => (props, propertyName, ...rest) => {
840
- const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
841
- if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
842
- logActionRequired$1(deprecatedMessage({
843
- component,
844
- propName: propertyName,
845
- message: newPropertyMessage,
846
- expiryDate
847
- }));
848
- }
849
- return validator(props, propertyName, ...rest);
850
- };
851
- var deprecated$1 = deprecated;
852
-
853
815
  const reader = new commonmark.Parser();
854
816
  const writer = new commonmark.HtmlRenderer({
855
817
  safe: true
@@ -868,7 +830,7 @@ function Markdown({
868
830
  }
869
831
  const linkTarget = config?.link?.target ?? '_self';
870
832
  if (allowList != null && blockList != null) {
871
- logActionRequired$1('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
833
+ logActionRequired('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
872
834
  }
873
835
  const parser = nodes => {
874
836
  const parsed = reader.parse(nodes);
@@ -929,146 +891,98 @@ InlineMarkdown.defaultProps = {
929
891
  };
930
892
  var InlineMarkdown$1 = InlineMarkdown;
931
893
 
932
- // TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
933
- var ArrowPosition;
934
- (function (ArrowPosition) {
935
- ArrowPosition["TOP_LEFT"] = "up-left";
936
- ArrowPosition["TOP"] = "up-center";
937
- ArrowPosition["TOP_RIGHT"] = "up-right";
938
- ArrowPosition["BOTTOM_LEFT"] = "down-left";
939
- ArrowPosition["BOTTOM"] = "down-center";
940
- ArrowPosition["BOTTOM_RIGHT"] = "down-right";
941
- })(ArrowPosition || (ArrowPosition = {}));
942
-
943
- function withArrow(Alert, arrow) {
944
- const AlertWithArrow = props => /*#__PURE__*/jsx(Alert, {
945
- ...props,
946
- className: classNames(props.className, arrowClasses(arrow)),
947
- arrow: undefined
948
- });
949
- AlertWithArrow.propTypes = {
950
- className: PropTypes.string
951
- };
952
- AlertWithArrow.defaultProps = {
953
- className: undefined
954
- };
955
- return AlertWithArrow;
894
+ var AlertArrowPosition;
895
+ (function (AlertArrowPosition) {
896
+ AlertArrowPosition["TOP_LEFT"] = "up-left";
897
+ AlertArrowPosition["TOP"] = "up-center";
898
+ AlertArrowPosition["TOP_RIGHT"] = "up-right";
899
+ AlertArrowPosition["BOTTOM_LEFT"] = "down-left";
900
+ AlertArrowPosition["BOTTOM"] = "down-center";
901
+ AlertArrowPosition["BOTTOM_RIGHT"] = "down-right";
902
+ })(AlertArrowPosition || (AlertArrowPosition = {}));
903
+ function resolveType(type) {
904
+ switch (type) {
905
+ case 'success':
906
+ return 'positive';
907
+ case 'info':
908
+ return 'neutral';
909
+ case 'error':
910
+ return 'negative';
911
+ }
912
+ return type;
956
913
  }
957
- function arrowClasses(arrow) {
958
- if (arrow) {
959
- const classes = ['arrow'];
960
- const {
961
- BOTTOM,
962
- BOTTOM_LEFT,
963
- BOTTOM_RIGHT,
964
- TOP,
965
- TOP_RIGHT,
966
- TOP_LEFT
967
- } = ArrowPosition;
968
- switch (arrow) {
969
- case BOTTOM:
970
- return classes.concat('arrow-bottom', 'arrow-center');
971
- case BOTTOM_LEFT:
972
- return classes.concat('arrow-bottom', 'arrow-left');
973
- case BOTTOM_RIGHT:
974
- return classes.concat('arrow-bottom', 'arrow-right');
975
- case TOP:
976
- return classes.concat('arrow-center');
977
- case TOP_RIGHT:
978
- return classes.concat('arrow-right');
979
- case TOP_LEFT:
980
- default:
981
- return classes;
914
+ function Alert({
915
+ arrow,
916
+ action,
917
+ children,
918
+ className,
919
+ dismissible,
920
+ icon,
921
+ onDismiss,
922
+ message,
923
+ size,
924
+ title,
925
+ type = 'neutral',
926
+ variant = 'desktop'
927
+ }) {
928
+ useEffect(() => {
929
+ if (arrow !== undefined) {
930
+ logActionRequired("Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.");
982
931
  }
983
- }
984
- return '';
985
- }
986
-
987
- const deprecatedTypeMap$1 = {
988
- [Sentiment.SUCCESS]: Sentiment.POSITIVE,
989
- [Sentiment.INFO]: Sentiment.NEUTRAL,
990
- [Sentiment.ERROR]: Sentiment.NEGATIVE
991
- };
992
- const Alert = props => {
993
- const {
994
- isModern
995
- } = useTheme();
996
- const iconTypeMap = {
997
- [Sentiment.POSITIVE]: CheckCircle,
998
- [Sentiment.NEUTRAL]: InfoCircle,
999
- [Sentiment.WARNING]: Warning,
1000
- [Sentiment.NEGATIVE]: CrossCircle,
1001
- [Sentiment.PENDING]: Clock
1002
- };
1003
- const [shouldFire, setShouldFire] = useState(false);
1004
- const {
1005
- arrow,
1006
- action,
1007
- children,
1008
- className,
1009
- icon,
1010
- onDismiss,
1011
- message,
1012
- title,
1013
- type,
1014
- variant
1015
- } = props;
1016
- const closeButtonReference = useRef(null);
1017
- if (arrow) {
1018
- const AlertWithArrow = withArrow(Alert, arrow);
1019
- return /*#__PURE__*/jsx(AlertWithArrow, {
1020
- ...props
1021
- });
1022
- }
1023
- logActionRequired(props);
1024
- const mappedType = deprecatedTypeMap$1[type] || type;
1025
- const Icon = iconTypeMap[mappedType];
1026
- function generateIcon() {
1027
- if (icon) {
1028
- return /*#__PURE__*/jsx("div", {
1029
- className: "alert__icon",
1030
- children: icon
1031
- });
932
+ }, [arrow]);
933
+ useEffect(() => {
934
+ if (children !== undefined) {
935
+ logActionRequired("Alert component doesn't support 'children' anymore, use 'message' instead.");
1032
936
  }
1033
- if (isModern) {
1034
- return /*#__PURE__*/jsx(StatusIcon, {
1035
- size: Size.LARGE,
1036
- sentiment: mappedType
1037
- });
1038
- } else {
1039
- return /*#__PURE__*/jsx(Icon, {
1040
- size: 24
1041
- });
937
+ }, [children]);
938
+ useEffect(() => {
939
+ if (dismissible !== undefined) {
940
+ logActionRequired("Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.");
1042
941
  }
1043
- }
1044
- const handleTouchStart = () => setShouldFire(true);
1045
- const handleTouchMove = () => setShouldFire(false);
1046
- const handleTouchEnd = event => {
1047
- if (shouldFire && action) {
942
+ }, [dismissible]);
943
+ useEffect(() => {
944
+ if (size !== undefined) {
945
+ logActionRequired("Alert component doesn't support 'size' anymore, please remove that prop.");
946
+ }
947
+ }, [size]);
948
+ const resolvedType = resolveType(type);
949
+ useEffect(() => {
950
+ if (resolvedType !== type) {
951
+ logActionRequired(`Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`);
952
+ }
953
+ }, [resolvedType, type]);
954
+ const [shouldFire, setShouldFire] = useState(false);
955
+ const closeButtonReference = useRef(null);
956
+ return /*#__PURE__*/jsxs("div", {
957
+ className: classNames('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
958
+ "data-testid": "alert",
959
+ onTouchStart: () => setShouldFire(true),
960
+ onTouchEnd: event => {
961
+ if (shouldFire && action &&
1048
962
  // Check if current event is triggered from closeButton
1049
- if (closeButtonReference?.current && !closeButtonReference.current.contains(event.target)) {
1050
- if (action?.target === '_blank') {
1051
- window.top.open(action.href);
963
+ closeButtonReference.current && !closeButtonReference.current.contains(event.currentTarget)) {
964
+ if (action.target === '_blank') {
965
+ window.top?.open(action.href);
1052
966
  } else {
1053
- window.top.location.assign(action.href);
967
+ window.top?.location.assign(action.href);
1054
968
  }
1055
969
  }
1056
- }
1057
- setShouldFire(false);
1058
- };
1059
- return /*#__PURE__*/jsxs("div", {
1060
- className: classNames('alert d-flex', `alert-${mappedType}`, className),
1061
- "data-testid": "alert",
1062
- onTouchStart: handleTouchStart,
1063
- onTouchEnd: handleTouchEnd,
1064
- onTouchMove: handleTouchMove,
970
+ setShouldFire(false);
971
+ },
972
+ onTouchMove: () => setShouldFire(false),
1065
973
  children: [/*#__PURE__*/jsxs("div", {
1066
974
  className: classNames('alert__content', 'd-flex', 'flex-grow-1', variant),
1067
975
  "data-testid": variant,
1068
- children: [generateIcon(), /*#__PURE__*/jsxs("div", {
976
+ children: [icon ? /*#__PURE__*/jsx("div", {
977
+ className: "alert__icon",
978
+ children: icon
979
+ }) : /*#__PURE__*/jsx(StatusIcon, {
980
+ size: Size.LARGE,
981
+ sentiment: resolvedType
982
+ }), /*#__PURE__*/jsxs("div", {
1069
983
  className: "alert__message",
1070
984
  children: [/*#__PURE__*/jsxs("div", {
1071
- role: Sentiment.NEGATIVE === mappedType ? 'alert' : 'status',
985
+ role: Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status',
1072
986
  children: [title && /*#__PURE__*/jsx(Title, {
1073
987
  className: "m-b-1",
1074
988
  type: Typography.TITLE_BODY,
@@ -1096,72 +1010,28 @@ const Alert = props => {
1096
1010
  onClick: onDismiss
1097
1011
  })]
1098
1012
  });
1099
- };
1100
- const deprecatedTypeMapMessage$1 = {
1101
- [Sentiment.SUCCESS]: 'Sentiment.POSITIVE',
1102
- [Sentiment.INFO]: 'Sentiment.NEUTRAL',
1103
- [Sentiment.ERROR]: 'Sentiment.NEGATIVE'
1104
- };
1105
- const deprecatedTypes$1 = Object.keys(deprecatedTypeMap$1);
1106
- function logActionRequired({
1107
- size,
1108
- type
1109
- }) {
1110
- logActionRequiredIf('Alert no longer supports any possible variations in size. Please remove the `size` prop.', !!size);
1111
- logActionRequiredIf(`Alert has deprecated the ${type} value for the \`type\` prop. Please update to ${deprecatedTypeMapMessage$1[type]}.`, deprecatedTypes$1.includes(type));
1112
1013
  }
1113
- Alert.propTypes = {
1114
- /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */
1115
- action: PropTypes.shape({
1116
- 'aria-label': PropTypes.string,
1117
- href: PropTypes.string.isRequired,
1118
- target: PropTypes.string,
1119
- text: PropTypes.node.isRequired
1120
- }),
1121
- className: PropTypes.string,
1122
- /** An optional icon. If not provided, we will default the icon to something appropriate for the type */
1123
- icon: PropTypes.element,
1124
- /** Title for the alert component */
1125
- title: PropTypes.string,
1126
- /** The main body of the alert. Accepts plain text and bold words specified with **double stars*/
1127
- message: requiredIf(PropTypes.node, ({
1128
- children
1129
- }) => !children),
1130
- /** The presence of the onDismiss handler will trigger the visibility of the close button */
1131
- onDismiss: PropTypes.func,
1132
- /** The type dictates which icon and colour will be used */
1133
- type: PropTypes.oneOf(['negative', 'neutral', 'positive', 'warning', 'info', 'error', 'success']),
1134
- variant: PropTypes.oneOf(['desktop', 'mobile']),
1135
- /** @deprecated no arrow for `Alert` component anymore, consider to use [`InlineAlert`](https://transferwise.github.io/neptune-web/components/alerts/InlineAlert) component */
1136
- arrow: deprecated$1(PropTypes.oneOf(['up-left', 'up-center', 'up-right', 'down-left', 'down-center', 'down-right']), {
1137
- component: 'Alert',
1138
- expiryDate: new Date('03-01-2021')
1139
- }),
1140
- /** @deprecated use `message` property instead */
1141
- children: deprecated$1(requiredIf(PropTypes.node, ({
1142
- message
1143
- }) => !message), {
1144
- component: 'Alert',
1145
- message: 'You should now use the `message` prop. Be aware `message` only accepts plain text or text with **bold** markdown.',
1146
- expiryDate: new Date('03-01-2021')
1147
- }),
1148
- /** @deprecated use `onDismiss` instead */
1149
- dismissible: deprecated$1(PropTypes.bool, {
1150
- component: 'Alert',
1151
- message: 'The Alert will now be considered dismissible if an `onDismiss` hander is present.',
1152
- expiryDate: new Date('03-01-2021')
1153
- })
1154
- };
1155
- Alert.defaultProps = {
1156
- action: undefined,
1157
- arrow: undefined,
1158
- className: undefined,
1159
- dismissible: undefined,
1160
- icon: undefined,
1161
- type: Sentiment.NEUTRAL,
1162
- variant: Variant.DESKTOP
1163
- };
1164
- var Alert$1 = Alert;
1014
+ function alertArrowClassNames(arrow) {
1015
+ if (arrow) {
1016
+ const classes = 'arrow';
1017
+ switch (arrow) {
1018
+ case 'down-center':
1019
+ return `${classes} arrow-bottom arrow-center`;
1020
+ case 'down-left':
1021
+ return `${classes} arrow-bottom arrow-left`;
1022
+ case 'down-right':
1023
+ return `${classes} arrow-bottom arrow-right`;
1024
+ case 'up-center':
1025
+ return `${classes} arrow-center`;
1026
+ case 'up-right':
1027
+ return `${classes} arrow-right`;
1028
+ case 'up-left':
1029
+ default:
1030
+ return classes;
1031
+ }
1032
+ }
1033
+ return '';
1034
+ }
1165
1035
 
1166
1036
  // TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
1167
1037
  var AvatarType;
@@ -2160,7 +2030,7 @@ var messages$b = defineMessages({
2160
2030
  }
2161
2031
  });
2162
2032
 
2163
- const typeClassMap$1 = {
2033
+ const typeClassMap = {
2164
2034
  [ControlType.ACCENT]: 'btn-accent',
2165
2035
  [ControlType.POSITIVE]: 'btn-positive',
2166
2036
  [ControlType.NEGATIVE]: 'btn-negative'
@@ -2244,7 +2114,7 @@ const Button = /*#__PURE__*/forwardRef(({
2244
2114
  },
2245
2115
  // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
2246
2116
  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
2247
- typeClassMap$1[newType],
2117
+ typeClassMap[newType],
2248
2118
  // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
2249
2119
  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
2250
2120
  priorityClassMap[newPriority], className);
@@ -2629,7 +2499,7 @@ const CircularButton = ({
2629
2499
  type = ControlType.ACCENT,
2630
2500
  ...rest
2631
2501
  }) => {
2632
- const classes = classNames('btn np-btn', typeClassMap$1[type], priorityClassMap[priority]);
2502
+ const classes = classNames('btn np-btn', typeClassMap[type], priorityClassMap[priority]);
2633
2503
  const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/cloneElement(icon, {
2634
2504
  size: 24
2635
2505
  }) : icon;
@@ -5799,7 +5669,7 @@ function Popover$1({
5799
5669
  const resolvedPlacement = resolvePlacement(preferredPlacement);
5800
5670
  useEffect(() => {
5801
5671
  if (resolvedPlacement !== preferredPlacement) {
5802
- logActionRequired$1(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
5672
+ logActionRequired(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
5803
5673
  }
5804
5674
  }, [preferredPlacement, resolvedPlacement]);
5805
5675
  const anchorReference = useRef(null);
@@ -5904,49 +5774,22 @@ const Info = ({
5904
5774
  });
5905
5775
  };
5906
5776
 
5907
- const typeClassMap = {
5908
- [Sentiment.ERROR]: 'danger',
5909
- [Sentiment.NEGATIVE]: 'danger'
5910
- };
5911
- const InlineAlert = ({
5777
+ function InlineAlert({
5912
5778
  id,
5913
5779
  type = Sentiment.NEUTRAL,
5914
5780
  className,
5915
5781
  children
5916
- }) => {
5917
- const {
5918
- isModern
5919
- } = useTheme();
5920
- const typeClass = `alert-${typeClassMap[type] || type}`;
5921
- if (isModern) {
5922
- return /*#__PURE__*/jsxs("div", {
5923
- role: "alert",
5924
- id: id,
5925
- className: classNames('alert alert-detach', typeClass, className),
5926
- children: [(type === 'error' || type === 'negative') && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
5927
- children: children
5928
- })]
5929
- });
5930
- }
5931
- const getAlertContents = ({
5932
- children,
5933
- className
5934
- }) => {
5935
- return /*#__PURE__*/jsx("div", {
5936
- role: "alert",
5937
- id: id,
5938
- className: classNames('alert alert-detach p-x-2 p-y-1', typeClass, className),
5782
+ }) {
5783
+ const danger = type === 'negative' || type === 'error';
5784
+ return /*#__PURE__*/jsxs("div", {
5785
+ role: "alert",
5786
+ id: id,
5787
+ className: classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
5788
+ children: [danger && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
5939
5789
  children: children
5940
- });
5941
- };
5942
- const AlertWithArrow = withArrow(getAlertContents, ArrowPosition.TOP_LEFT);
5943
- return /*#__PURE__*/jsx(AlertWithArrow, {
5944
- id,
5945
- type,
5946
- className,
5947
- children
5790
+ })]
5948
5791
  });
5949
- };
5792
+ }
5950
5793
 
5951
5794
  /*
5952
5795
  * Inspired by:
@@ -13982,7 +13825,7 @@ function CriticalCommsBanner({
13982
13825
  type: AvatarType.ICON,
13983
13826
  className: classNames(isModern ? 'm-r-2' : 'm-r-1'),
13984
13827
  backgroundColor: isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)',
13985
- children: isModern ? /*#__PURE__*/jsx(AlertCircleFill, {}) : /*#__PURE__*/jsx(Alert$2, {
13828
+ children: isModern ? /*#__PURE__*/jsx(AlertCircleFill, {}) : /*#__PURE__*/jsx(Alert$1, {
13986
13829
  size: 24
13987
13830
  })
13988
13831
  }), /*#__PURE__*/jsxs("div", {
@@ -15071,5 +14914,5 @@ const translations = {
15071
14914
  'zh-HK': zhHK
15072
14915
  };
15073
14916
 
15074
- export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
14917
+ export { Accordion, ActionButton, ActionOption, Alert, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
15075
14918
  //# sourceMappingURL=index.mjs.map