@transferwise/components 0.0.0-experimental-9a6de5f → 0.0.0-experimental-0b80b83

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 (43) hide show
  1. package/build/i18n/ja.json +13 -13
  2. package/build/index.js +304 -147
  3. package/build/index.js.map +1 -1
  4. package/build/index.mjs +306 -149
  5. package/build/index.mjs.map +1 -1
  6. package/build/types/alert/Alert.d.ts +58 -47
  7. package/build/types/alert/Alert.d.ts.map +1 -1
  8. package/build/types/alert/index.d.ts +1 -2
  9. package/build/types/alert/index.d.ts.map +1 -1
  10. package/build/types/alert/withArrow/alertArrowPositions.d.ts +9 -0
  11. package/build/types/alert/withArrow/alertArrowPositions.d.ts.map +1 -0
  12. package/build/types/alert/withArrow/index.d.ts +3 -0
  13. package/build/types/alert/withArrow/index.d.ts.map +1 -0
  14. package/build/types/alert/withArrow/withArrow.d.ts +11 -0
  15. package/build/types/alert/withArrow/withArrow.d.ts.map +1 -0
  16. package/build/types/common/propsValues/sentiment.d.ts +1 -0
  17. package/build/types/common/propsValues/sentiment.d.ts.map +1 -1
  18. package/build/types/index.d.ts +1 -1
  19. package/build/types/index.d.ts.map +1 -1
  20. package/build/types/inlineAlert/InlineAlert.d.ts +4 -2
  21. package/build/types/inlineAlert/InlineAlert.d.ts.map +1 -1
  22. package/build/types/provider/Provider.d.ts +1 -1
  23. package/build/types/provider/Provider.d.ts.map +1 -1
  24. package/build/types/statusIcon/StatusIcon.d.ts +1 -1
  25. package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
  26. package/package.json +1 -1
  27. package/src/alert/Alert.js +196 -0
  28. package/src/alert/{Alert.spec.tsx → Alert.spec.js} +40 -43
  29. package/src/alert/Alert.story.tsx +2 -1
  30. package/src/alert/index.js +1 -0
  31. package/src/alert/withArrow/alertArrowPositions.ts +9 -0
  32. package/src/alert/withArrow/index.js +2 -0
  33. package/src/alert/withArrow/withArrow.js +50 -0
  34. package/src/alert/withArrow/withArrow.spec.js +51 -0
  35. package/src/common/propsValues/sentiment.ts +10 -0
  36. package/src/i18n/ja.json +13 -13
  37. package/src/index.ts +1 -1
  38. package/src/inlineAlert/InlineAlert.spec.tsx +7 -0
  39. package/src/inlineAlert/InlineAlert.tsx +47 -19
  40. package/src/provider/Provider.tsx +2 -1
  41. package/src/statusIcon/StatusIcon.tsx +14 -14
  42. package/src/alert/Alert.tsx +0 -222
  43. package/src/alert/index.ts +0 -2
package/build/index.js CHANGED
@@ -7,7 +7,6 @@ var reactId = require('@radix-ui/react-id');
7
7
  var icons = require('@transferwise/icons');
8
8
  var reactIntl = require('react-intl');
9
9
  var PropTypes = require('prop-types');
10
- var commonmark = require('commonmark');
11
10
  var componentsTheming = require('@wise/components-theming');
12
11
  var formatting = require('@transferwise/formatting');
13
12
  var react$1 = require('@headlessui/react');
@@ -21,6 +20,7 @@ var reactPopper = require('react-popper');
21
20
  var throttle = require('lodash.throttle');
22
21
  var reactDom = require('react-dom');
23
22
  var neptuneValidation = require('@transferwise/neptune-validation');
23
+ var commonmark = require('commonmark');
24
24
  var art = require('@wise/art');
25
25
  var clamp$2 = require('lodash.clamp');
26
26
  var debounce = require('lodash.debounce');
@@ -51,9 +51,9 @@ function _interopNamespace(e) {
51
51
  var classNames__default = /*#__PURE__*/_interopDefault(classNames);
52
52
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
53
53
  var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
54
- var commonmark__default = /*#__PURE__*/_interopDefault(commonmark);
55
54
  var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
56
55
  var throttle__default = /*#__PURE__*/_interopDefault(throttle);
56
+ var commonmark__default = /*#__PURE__*/_interopDefault(commonmark);
57
57
  var clamp__default = /*#__PURE__*/_interopDefault(clamp$2);
58
58
  var debounce__default = /*#__PURE__*/_interopDefault(debounce);
59
59
  var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
@@ -807,22 +807,22 @@ const Link = ({
807
807
  });
808
808
  };
809
809
 
810
- const iconTypeMap = {
811
- positive: icons.Check,
812
- neutral: icons.Info,
813
- warning: icons.Alert,
814
- negative: icons.Cross,
815
- pending: icons.ClockBorderless,
816
- info: icons.Info,
817
- error: icons.Cross,
818
- success: icons.Check
819
- };
820
810
  const StatusIcon = ({
821
- sentiment = 'neutral',
822
- size = 'md'
811
+ sentiment = exports.Sentiment.NEUTRAL,
812
+ size = exports.Size.MEDIUM
823
813
  }) => {
814
+ const iconTypeMap = {
815
+ [exports.Sentiment.POSITIVE]: icons.Check,
816
+ [exports.Sentiment.NEUTRAL]: icons.Info,
817
+ [exports.Sentiment.WARNING]: icons.Alert,
818
+ [exports.Sentiment.NEGATIVE]: icons.Cross,
819
+ [exports.Sentiment.PENDING]: icons.ClockBorderless,
820
+ [exports.Sentiment.INFO]: icons.Info,
821
+ [exports.Sentiment.ERROR]: icons.Cross,
822
+ [exports.Sentiment.SUCCESS]: icons.Check
823
+ };
824
+ const iconColor = [exports.Sentiment.WARNING, exports.Sentiment.PENDING].includes(sentiment) ? 'dark' : 'light';
824
825
  const Icon = iconTypeMap[sentiment];
825
- const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
826
826
  return /*#__PURE__*/jsxRuntime.jsx("span", {
827
827
  "data-testid": "status-icon",
828
828
  className: classNames__default.default('status-circle', 'status-circle-' + size, sentiment),
@@ -832,7 +832,7 @@ const StatusIcon = ({
832
832
  });
833
833
  };
834
834
 
835
- function logActionRequired(message) {
835
+ function logActionRequired$1(message) {
836
836
  if (['development', 'test'].includes(process?.env?.NODE_ENV)) {
837
837
  // eslint-disable-next-line no-console
838
838
  console.warn(message);
@@ -840,10 +840,48 @@ function logActionRequired(message) {
840
840
  }
841
841
  function logActionRequiredIf(message, conditional) {
842
842
  if (conditional) {
843
- logActionRequired(message);
843
+ logActionRequired$1(message);
844
844
  }
845
845
  }
846
846
 
847
+ const deprecatedMessage = ({
848
+ component,
849
+ propName,
850
+ message,
851
+ expiryDate
852
+ }) => {
853
+ const messages = [`${component} has deprecated the use of ${propName}.`];
854
+ if (message) {
855
+ messages.push(message);
856
+ }
857
+ if (expiryDate) {
858
+ messages.push(`${propName} will be removed on or after ${expiryDate.toLocaleString('en-GB', {
859
+ year: 'numeric',
860
+ month: 'numeric',
861
+ day: 'numeric'
862
+ })}`);
863
+ }
864
+ return messages.join(' ');
865
+ };
866
+ const deprecated = (validator, {
867
+ component,
868
+ message = '',
869
+ newProp: newProperty = null,
870
+ expiryDate = null
871
+ }) => (props, propertyName, ...rest) => {
872
+ const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
873
+ if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
874
+ logActionRequired$1(deprecatedMessage({
875
+ component,
876
+ propName: propertyName,
877
+ message: newPropertyMessage,
878
+ expiryDate
879
+ }));
880
+ }
881
+ return validator(props, propertyName, ...rest);
882
+ };
883
+ var deprecated$1 = deprecated;
884
+
847
885
  const reader = new commonmark__default.default.Parser();
848
886
  const writer = new commonmark__default.default.HtmlRenderer({
849
887
  safe: true
@@ -862,7 +900,7 @@ function Markdown({
862
900
  }
863
901
  const linkTarget = config?.link?.target ?? '_self';
864
902
  if (allowList != null && blockList != null) {
865
- logActionRequired('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
903
+ logActionRequired$1('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
866
904
  }
867
905
  const parser = nodes => {
868
906
  const parsed = reader.parse(nodes);
@@ -923,98 +961,146 @@ InlineMarkdown.defaultProps = {
923
961
  };
924
962
  var InlineMarkdown$1 = InlineMarkdown;
925
963
 
926
- var AlertArrowPosition;
927
- (function (AlertArrowPosition) {
928
- AlertArrowPosition["TOP_LEFT"] = "up-left";
929
- AlertArrowPosition["TOP"] = "up-center";
930
- AlertArrowPosition["TOP_RIGHT"] = "up-right";
931
- AlertArrowPosition["BOTTOM_LEFT"] = "down-left";
932
- AlertArrowPosition["BOTTOM"] = "down-center";
933
- AlertArrowPosition["BOTTOM_RIGHT"] = "down-right";
934
- })(AlertArrowPosition || (AlertArrowPosition = {}));
935
- function resolveType(type) {
936
- switch (type) {
937
- case 'success':
938
- return 'positive';
939
- case 'info':
940
- return 'neutral';
941
- case 'error':
942
- return 'negative';
943
- }
944
- return type;
964
+ // TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
965
+ exports.AlertArrowPosition = void 0;
966
+ (function (ArrowPosition) {
967
+ ArrowPosition["TOP_LEFT"] = "up-left";
968
+ ArrowPosition["TOP"] = "up-center";
969
+ ArrowPosition["TOP_RIGHT"] = "up-right";
970
+ ArrowPosition["BOTTOM_LEFT"] = "down-left";
971
+ ArrowPosition["BOTTOM"] = "down-center";
972
+ ArrowPosition["BOTTOM_RIGHT"] = "down-right";
973
+ })(exports.AlertArrowPosition || (exports.AlertArrowPosition = {}));
974
+
975
+ function withArrow(Alert, arrow) {
976
+ const AlertWithArrow = props => /*#__PURE__*/jsxRuntime.jsx(Alert, {
977
+ ...props,
978
+ className: classNames__default.default(props.className, arrowClasses(arrow)),
979
+ arrow: undefined
980
+ });
981
+ AlertWithArrow.propTypes = {
982
+ className: PropTypes__default.default.string
983
+ };
984
+ AlertWithArrow.defaultProps = {
985
+ className: undefined
986
+ };
987
+ return AlertWithArrow;
945
988
  }
946
- function Alert({
947
- arrow,
948
- action,
949
- children,
950
- className,
951
- dismissible,
952
- icon,
953
- onDismiss,
954
- message,
955
- size,
956
- title,
957
- type = 'neutral',
958
- variant = 'desktop'
959
- }) {
960
- React.useEffect(() => {
961
- if (arrow !== undefined) {
962
- logActionRequired("Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.");
963
- }
964
- }, [arrow]);
965
- React.useEffect(() => {
966
- if (children !== undefined) {
967
- logActionRequired("Alert component doesn't support 'children' anymore, use 'message' instead.");
968
- }
969
- }, [children]);
970
- React.useEffect(() => {
971
- if (dismissible !== undefined) {
972
- logActionRequired("Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.");
973
- }
974
- }, [dismissible]);
975
- React.useEffect(() => {
976
- if (size !== undefined) {
977
- logActionRequired("Alert component doesn't support 'size' anymore, please remove that prop.");
978
- }
979
- }, [size]);
980
- const resolvedType = resolveType(type);
981
- React.useEffect(() => {
982
- if (resolvedType !== type) {
983
- logActionRequired(`Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`);
989
+ function arrowClasses(arrow) {
990
+ if (arrow) {
991
+ const classes = ['arrow'];
992
+ const {
993
+ BOTTOM,
994
+ BOTTOM_LEFT,
995
+ BOTTOM_RIGHT,
996
+ TOP,
997
+ TOP_RIGHT,
998
+ TOP_LEFT
999
+ } = exports.AlertArrowPosition;
1000
+ switch (arrow) {
1001
+ case BOTTOM:
1002
+ return classes.concat('arrow-bottom', 'arrow-center');
1003
+ case BOTTOM_LEFT:
1004
+ return classes.concat('arrow-bottom', 'arrow-left');
1005
+ case BOTTOM_RIGHT:
1006
+ return classes.concat('arrow-bottom', 'arrow-right');
1007
+ case TOP:
1008
+ return classes.concat('arrow-center');
1009
+ case TOP_RIGHT:
1010
+ return classes.concat('arrow-right');
1011
+ case TOP_LEFT:
1012
+ default:
1013
+ return classes;
984
1014
  }
985
- }, [resolvedType, type]);
1015
+ }
1016
+ return '';
1017
+ }
1018
+
1019
+ const deprecatedTypeMap$1 = {
1020
+ [exports.Sentiment.SUCCESS]: exports.Sentiment.POSITIVE,
1021
+ [exports.Sentiment.INFO]: exports.Sentiment.NEUTRAL,
1022
+ [exports.Sentiment.ERROR]: exports.Sentiment.NEGATIVE
1023
+ };
1024
+ const Alert = props => {
1025
+ const {
1026
+ isModern
1027
+ } = componentsTheming.useTheme();
1028
+ const iconTypeMap = {
1029
+ [exports.Sentiment.POSITIVE]: icons.CheckCircle,
1030
+ [exports.Sentiment.NEUTRAL]: icons.InfoCircle,
1031
+ [exports.Sentiment.WARNING]: icons.Warning,
1032
+ [exports.Sentiment.NEGATIVE]: icons.CrossCircle,
1033
+ [exports.Sentiment.PENDING]: icons.Clock
1034
+ };
986
1035
  const [shouldFire, setShouldFire] = React.useState(false);
1036
+ const {
1037
+ arrow,
1038
+ action,
1039
+ children,
1040
+ className,
1041
+ icon,
1042
+ onDismiss,
1043
+ message,
1044
+ title,
1045
+ type,
1046
+ variant
1047
+ } = props;
987
1048
  const closeButtonReference = React.useRef(null);
988
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
989
- className: classNames__default.default('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
990
- "data-testid": "alert",
991
- onTouchStart: () => setShouldFire(true),
992
- onTouchEnd: event => {
993
- if (shouldFire && action &&
1049
+ if (arrow) {
1050
+ const AlertWithArrow = withArrow(Alert, arrow);
1051
+ return /*#__PURE__*/jsxRuntime.jsx(AlertWithArrow, {
1052
+ ...props
1053
+ });
1054
+ }
1055
+ logActionRequired(props);
1056
+ const mappedType = deprecatedTypeMap$1[type] || type;
1057
+ const Icon = iconTypeMap[mappedType];
1058
+ function generateIcon() {
1059
+ if (icon) {
1060
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
1061
+ className: "alert__icon",
1062
+ children: icon
1063
+ });
1064
+ }
1065
+ if (isModern) {
1066
+ return /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
1067
+ size: exports.Size.LARGE,
1068
+ sentiment: mappedType
1069
+ });
1070
+ } else {
1071
+ return /*#__PURE__*/jsxRuntime.jsx(Icon, {
1072
+ size: 24
1073
+ });
1074
+ }
1075
+ }
1076
+ const handleTouchStart = () => setShouldFire(true);
1077
+ const handleTouchMove = () => setShouldFire(false);
1078
+ const handleTouchEnd = event => {
1079
+ if (shouldFire && action) {
994
1080
  // Check if current event is triggered from closeButton
995
- closeButtonReference.current && !closeButtonReference.current.contains(event.currentTarget)) {
996
- if (action.target === '_blank') {
997
- window.top?.open(action.href);
1081
+ if (closeButtonReference?.current && !closeButtonReference.current.contains(event.target)) {
1082
+ if (action?.target === '_blank') {
1083
+ window.top.open(action.href);
998
1084
  } else {
999
- window.top?.location.assign(action.href);
1085
+ window.top.location.assign(action.href);
1000
1086
  }
1001
1087
  }
1002
- setShouldFire(false);
1003
- },
1004
- onTouchMove: () => setShouldFire(false),
1088
+ }
1089
+ setShouldFire(false);
1090
+ };
1091
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
1092
+ className: classNames__default.default('alert d-flex', `alert-${mappedType}`, className),
1093
+ "data-testid": "alert",
1094
+ onTouchStart: handleTouchStart,
1095
+ onTouchEnd: handleTouchEnd,
1096
+ onTouchMove: handleTouchMove,
1005
1097
  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
1006
1098
  className: classNames__default.default('alert__content', 'd-flex', 'flex-grow-1', variant),
1007
1099
  "data-testid": variant,
1008
- children: [icon ? /*#__PURE__*/jsxRuntime.jsx("div", {
1009
- className: "alert__icon",
1010
- children: icon
1011
- }) : /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
1012
- size: exports.Size.LARGE,
1013
- sentiment: resolvedType
1014
- }), /*#__PURE__*/jsxRuntime.jsxs("div", {
1100
+ children: [generateIcon(), /*#__PURE__*/jsxRuntime.jsxs("div", {
1015
1101
  className: "alert__message",
1016
1102
  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
1017
- role: exports.Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status',
1103
+ role: exports.Sentiment.NEGATIVE === mappedType ? 'alert' : 'status',
1018
1104
  children: [title && /*#__PURE__*/jsxRuntime.jsx(Title, {
1019
1105
  className: "m-b-1",
1020
1106
  type: exports.Typography.TITLE_BODY,
@@ -1042,28 +1128,72 @@ function Alert({
1042
1128
  onClick: onDismiss
1043
1129
  })]
1044
1130
  });
1131
+ };
1132
+ const deprecatedTypeMapMessage$1 = {
1133
+ [exports.Sentiment.SUCCESS]: 'Sentiment.POSITIVE',
1134
+ [exports.Sentiment.INFO]: 'Sentiment.NEUTRAL',
1135
+ [exports.Sentiment.ERROR]: 'Sentiment.NEGATIVE'
1136
+ };
1137
+ const deprecatedTypes$1 = Object.keys(deprecatedTypeMap$1);
1138
+ function logActionRequired({
1139
+ size,
1140
+ type
1141
+ }) {
1142
+ logActionRequiredIf('Alert no longer supports any possible variations in size. Please remove the `size` prop.', !!size);
1143
+ logActionRequiredIf(`Alert has deprecated the ${type} value for the \`type\` prop. Please update to ${deprecatedTypeMapMessage$1[type]}.`, deprecatedTypes$1.includes(type));
1045
1144
  }
1046
- function alertArrowClassNames(arrow) {
1047
- if (arrow) {
1048
- const classes = 'arrow';
1049
- switch (arrow) {
1050
- case 'down-center':
1051
- return `${classes} arrow-bottom arrow-center`;
1052
- case 'down-left':
1053
- return `${classes} arrow-bottom arrow-left`;
1054
- case 'down-right':
1055
- return `${classes} arrow-bottom arrow-right`;
1056
- case 'up-center':
1057
- return `${classes} arrow-center`;
1058
- case 'up-right':
1059
- return `${classes} arrow-right`;
1060
- case 'up-left':
1061
- default:
1062
- return classes;
1063
- }
1064
- }
1065
- return '';
1066
- }
1145
+ Alert.propTypes = {
1146
+ /** 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 */
1147
+ action: PropTypes__default.default.shape({
1148
+ 'aria-label': PropTypes__default.default.string,
1149
+ href: PropTypes__default.default.string.isRequired,
1150
+ target: PropTypes__default.default.string,
1151
+ text: PropTypes__default.default.node.isRequired
1152
+ }),
1153
+ className: PropTypes__default.default.string,
1154
+ /** An optional icon. If not provided, we will default the icon to something appropriate for the type */
1155
+ icon: PropTypes__default.default.element,
1156
+ /** Title for the alert component */
1157
+ title: PropTypes__default.default.string,
1158
+ /** The main body of the alert. Accepts plain text and bold words specified with **double stars*/
1159
+ message: requiredIf__default.default(PropTypes__default.default.node, ({
1160
+ children
1161
+ }) => !children),
1162
+ /** The presence of the onDismiss handler will trigger the visibility of the close button */
1163
+ onDismiss: PropTypes__default.default.func,
1164
+ /** The type dictates which icon and colour will be used */
1165
+ type: PropTypes__default.default.oneOf(['negative', 'neutral', 'positive', 'warning', 'info', 'error', 'success']),
1166
+ variant: PropTypes__default.default.oneOf(['desktop', 'mobile']),
1167
+ /** @deprecated no arrow for `Alert` component anymore, consider to use [`InlineAlert`](https://transferwise.github.io/neptune-web/components/alerts/InlineAlert) component */
1168
+ arrow: deprecated$1(PropTypes__default.default.oneOf(['up-left', 'up-center', 'up-right', 'down-left', 'down-center', 'down-right']), {
1169
+ component: 'Alert',
1170
+ expiryDate: new Date('03-01-2021')
1171
+ }),
1172
+ /** @deprecated use `message` property instead */
1173
+ children: deprecated$1(requiredIf__default.default(PropTypes__default.default.node, ({
1174
+ message
1175
+ }) => !message), {
1176
+ component: 'Alert',
1177
+ message: 'You should now use the `message` prop. Be aware `message` only accepts plain text or text with **bold** markdown.',
1178
+ expiryDate: new Date('03-01-2021')
1179
+ }),
1180
+ /** @deprecated use `onDismiss` instead */
1181
+ dismissible: deprecated$1(PropTypes__default.default.bool, {
1182
+ component: 'Alert',
1183
+ message: 'The Alert will now be considered dismissible if an `onDismiss` hander is present.',
1184
+ expiryDate: new Date('03-01-2021')
1185
+ })
1186
+ };
1187
+ Alert.defaultProps = {
1188
+ action: undefined,
1189
+ arrow: undefined,
1190
+ className: undefined,
1191
+ dismissible: undefined,
1192
+ icon: undefined,
1193
+ type: exports.Sentiment.NEUTRAL,
1194
+ variant: exports.Variant.DESKTOP
1195
+ };
1196
+ var Alert$1 = Alert;
1067
1197
 
1068
1198
  // TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
1069
1199
  exports.AvatarType = void 0;
@@ -2062,7 +2192,7 @@ var messages$b = reactIntl.defineMessages({
2062
2192
  }
2063
2193
  });
2064
2194
 
2065
- const typeClassMap = {
2195
+ const typeClassMap$1 = {
2066
2196
  [exports.ControlType.ACCENT]: 'btn-accent',
2067
2197
  [exports.ControlType.POSITIVE]: 'btn-positive',
2068
2198
  [exports.ControlType.NEGATIVE]: 'btn-negative'
@@ -2146,7 +2276,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
2146
2276
  },
2147
2277
  // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
2148
2278
  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
2149
- typeClassMap[newType],
2279
+ typeClassMap$1[newType],
2150
2280
  // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
2151
2281
  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
2152
2282
  priorityClassMap[newPriority], className);
@@ -2531,7 +2661,7 @@ const CircularButton = ({
2531
2661
  type = exports.ControlType.ACCENT,
2532
2662
  ...rest
2533
2663
  }) => {
2534
- const classes = classNames__default.default('btn np-btn', typeClassMap[type], priorityClassMap[priority]);
2664
+ const classes = classNames__default.default('btn np-btn', typeClassMap$1[type], priorityClassMap[priority]);
2535
2665
  const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/React.cloneElement(icon, {
2536
2666
  size: 24
2537
2667
  }) : icon;
@@ -5701,7 +5831,7 @@ function Popover$1({
5701
5831
  const resolvedPlacement = resolvePlacement(preferredPlacement);
5702
5832
  React.useEffect(() => {
5703
5833
  if (resolvedPlacement !== preferredPlacement) {
5704
- logActionRequired(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
5834
+ logActionRequired$1(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
5705
5835
  }
5706
5836
  }, [preferredPlacement, resolvedPlacement]);
5707
5837
  const anchorReference = React.useRef(null);
@@ -5806,22 +5936,49 @@ const Info = ({
5806
5936
  });
5807
5937
  };
5808
5938
 
5809
- function InlineAlert({
5939
+ const typeClassMap = {
5940
+ [exports.Sentiment.ERROR]: 'danger',
5941
+ [exports.Sentiment.NEGATIVE]: 'danger'
5942
+ };
5943
+ const InlineAlert = ({
5810
5944
  id,
5811
- type = 'neutral',
5945
+ type = exports.Sentiment.NEUTRAL,
5812
5946
  className,
5813
5947
  children
5814
- }) {
5815
- const danger = type === 'negative' || type === 'error';
5816
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
5817
- role: "alert",
5818
- id: id,
5819
- className: classNames__default.default('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
5820
- children: [danger && /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
5948
+ }) => {
5949
+ const {
5950
+ isModern
5951
+ } = componentsTheming.useTheme();
5952
+ const typeClass = `alert-${typeClassMap[type] || type}`;
5953
+ if (isModern) {
5954
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
5955
+ role: "alert",
5956
+ id: id,
5957
+ className: classNames__default.default('alert alert-detach', typeClass, className),
5958
+ children: [(type === 'error' || type === 'negative') && /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
5959
+ children: children
5960
+ })]
5961
+ });
5962
+ }
5963
+ const getAlertContents = ({
5964
+ children,
5965
+ className
5966
+ }) => {
5967
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
5968
+ role: "alert",
5969
+ id: id,
5970
+ className: classNames__default.default('alert alert-detach p-x-2 p-y-1', typeClass, className),
5821
5971
  children: children
5822
- })]
5972
+ });
5973
+ };
5974
+ const AlertWithArrow = withArrow(getAlertContents, exports.AlertArrowPosition.TOP_LEFT);
5975
+ return /*#__PURE__*/jsxRuntime.jsx(AlertWithArrow, {
5976
+ id,
5977
+ type,
5978
+ className,
5979
+ children
5823
5980
  });
5824
- }
5981
+ };
5825
5982
 
5826
5983
  /*
5827
5984
  * Inspired by:
@@ -14347,8 +14504,8 @@ var it = {
14347
14504
 
14348
14505
  var ja = {
14349
14506
  "neptune.Button.loadingAriaLabel": "読み込み中…",
14350
- "neptune.Chips.ariaLabel": "{choice} をクリア",
14351
- "neptune.ClearButton.ariaLabel": "消去",
14507
+ "neptune.Chips.ariaLabel": "{choice}を消去する",
14508
+ "neptune.ClearButton.ariaLabel": "消去する",
14352
14509
  "neptune.CloseButton.ariaLabel": "閉じる",
14353
14510
  "neptune.DateInput.day.label": "日",
14354
14511
  "neptune.DateInput.day.placeholder": "日",
@@ -14368,19 +14525,19 @@ var ja = {
14368
14525
  "neptune.Link.opensInNewTab": "(新しいタブで開きます)",
14369
14526
  "neptune.MoneyInput.Select.placeholder": "選択してください...",
14370
14527
  "neptune.PhoneNumberInput.SelectInput.placeholder": "選択してください…",
14371
- "neptune.Select.searchPlaceholder": "検索... ",
14528
+ "neptune.Select.searchPlaceholder": "検索する... ",
14372
14529
  "neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
14373
14530
  "neptune.Summary.statusDone": "完了",
14374
- "neptune.Summary.statusNotDone": "未対応",
14531
+ "neptune.Summary.statusNotDone": "未完了",
14375
14532
  "neptune.Summary.statusPending": "保留中",
14376
14533
  "neptune.Upload.csButtonText": "別のファイルをアップロードしますか?",
14377
14534
  "neptune.Upload.csFailureText": "アップロードに失敗しました。もう一度やり直してください。",
14378
14535
  "neptune.Upload.csSuccessText": "アップロードが完了しました。",
14379
14536
  "neptune.Upload.csTooLargeMessage": "{maxSize}MB以下のファイルをアップロードしてください",
14380
14537
  "neptune.Upload.csWrongTypeMessage": "ファイルの種類はサポートされていません。別のファイルで再度お試しください",
14381
- "neptune.Upload.psButtonText": "キャンセル",
14382
- "neptune.Upload.psProcessingText": "アップロード中…",
14383
- "neptune.Upload.usButtonText": "または、ファイルを選択する",
14538
+ "neptune.Upload.psButtonText": "キャンセルする",
14539
+ "neptune.Upload.psProcessingText": "アップロードしています…",
14540
+ "neptune.Upload.usButtonText": "またはファイルを選択する",
14384
14541
  "neptune.Upload.usDropMessage": "ファイルをドロップしてアップロードする",
14385
14542
  "neptune.Upload.usPlaceholder": "{maxSize}MB以下のファイルをドラッグ&ドロップしてください",
14386
14543
  "neptune.UploadButton.allFileTypes": "すべてのファイル種類",
@@ -14389,18 +14546,18 @@ var ja = {
14389
14546
  "neptune.UploadButton.uploadFile": "ファイルをアップロードする",
14390
14547
  "neptune.UploadButton.uploadFiles": "ファイルをアップロードする",
14391
14548
  "neptune.UploadInput.deleteModalBody": "このファイルを削除すると、当社のシステムからも削除されます。",
14392
- "neptune.UploadInput.deleteModalCancelButtonText": "キャンセル",
14393
- "neptune.UploadInput.deleteModalConfirmButtonText": "削除",
14549
+ "neptune.UploadInput.deleteModalCancelButtonText": "キャンセルする",
14550
+ "neptune.UploadInput.deleteModalConfirmButtonText": "削除する",
14394
14551
  "neptune.UploadInput.deleteModalTitle": "このファイルを削除しますか?",
14395
14552
  "neptune.UploadInput.fileIsTooLarge": "ファイルが大きすぎます。",
14396
14553
  "neptune.UploadInput.fileTypeNotSupported": "このファイルの種類はサポートされていません",
14397
14554
  "neptune.UploadInput.maximumFilesAlreadyUploaded": "申し訳ございませんが、このアップロードに失敗しました。一度に{maxFilesAllowed}個のファイルのみ受付可能です。",
14398
- "neptune.UploadItem.deleting": "削除中...",
14399
- "neptune.UploadItem.removeFile": "{filename} を削除",
14555
+ "neptune.UploadItem.deleting": "削除しています...",
14556
+ "neptune.UploadItem.removeFile": "{filename}のファイルを削除する",
14400
14557
  "neptune.UploadItem.uploaded": "アップロード済み",
14401
14558
  "neptune.UploadItem.uploadedFile": "アップロード済みのファイル",
14402
- "neptune.UploadItem.uploading": "アップロード中…",
14403
- "neptune.UploadItem.uploadingFailed": "アップロードが失敗しました"
14559
+ "neptune.UploadItem.uploading": "アップロードしています…",
14560
+ "neptune.UploadItem.uploadingFailed": "アップロードに失敗しました"
14404
14561
  };
14405
14562
 
14406
14563
  var pl = {
@@ -14949,7 +15106,7 @@ const translations = {
14949
15106
  exports.Accordion = Accordion;
14950
15107
  exports.ActionButton = ActionButton;
14951
15108
  exports.ActionOption = ActionOption;
14952
- exports.Alert = Alert;
15109
+ exports.Alert = Alert$1;
14953
15110
  exports.Avatar = Avatar;
14954
15111
  exports.AvatarWrapper = AvatarWrapper;
14955
15112
  exports.Badge = Badge;