kiban-design-system 1.0.237-alpha.0 → 1.0.239-alpha.0

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 (9) hide show
  1. package/dist/components/AlphaZipCodeInput/AlphaZipCodeInput.d.ts +5 -0
  2. package/dist/components/AlphaZipCodeInput/AlphaZipCodeInput.props.d.ts +17 -0
  3. package/dist/components/AlphaZipCodeInput/index.d.ts +3 -0
  4. package/dist/components/index.d.ts +1 -0
  5. package/dist/index.css +1 -1
  6. package/dist/index.css.map +1 -1
  7. package/dist/index.js +188 -147
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1061,10 +1061,10 @@ const PendingIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24'
1061
1061
 
1062
1062
  const WarningIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }, { children: [jsx("path", { d: 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z' }, void 0), jsx("line", { x1: '12', y1: '9', x2: '12', y2: '13' }, void 0), jsx("line", { x1: '12', y1: '17', x2: '12.01', y2: '17' }, void 0)] }), void 0));
1063
1063
 
1064
- const COMPONENT_NAME$A = 'AlphaAttributeInput';
1064
+ const COMPONENT_NAME$B = 'AlphaAttributeInput';
1065
1065
  const AlphaAttributeInput = ({ items, divider, label, isRequired, }) => {
1066
1066
  const [isFocused, setIsFocused] = useState(false);
1067
- const className = cssClassName(COMPONENT_NAME$A, isFocused && 'isFocused');
1067
+ const className = cssClassName(COMPONENT_NAME$B, isFocused && 'isFocused');
1068
1068
  const handleBlur = (callback) => {
1069
1069
  setIsFocused(false);
1070
1070
  if (callback) {
@@ -1083,25 +1083,25 @@ const AlphaAttributeInput = ({ items, divider, label, isRequired, }) => {
1083
1083
  item.onChange(event.target.value);
1084
1084
  }
1085
1085
  };
1086
- const itemLabelMarkup = item.label ? (jsx("label", Object.assign({ className: `${COMPONENT_NAME$A}__ItemLabelWrapper` }, { children: item.label }), void 0)) : null;
1087
- const dividerMarkup = divider && index < items.length - 1 ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$A}__Divider` }, { children: divider }), void 0)) : null;
1088
- return (jsxs(Fragment$1, { children: [jsxs("div", Object.assign({ className: `${COMPONENT_NAME$A}__Item` }, { children: [itemLabelMarkup, jsx("input", { type: item.type, value: item.value, onChange: handleChange, onBlur: () => handleBlur(item.onBlur), onFocus: () => handleFocus(item.onFocus), placeholder: item.placeholder, min: item.min, max: item.max, minLength: item.minLength, maxLength: item.maxLength }, void 0)] }), index), dividerMarkup] }, index));
1086
+ const itemLabelMarkup = item.label ? (jsx("label", Object.assign({ className: `${COMPONENT_NAME$B}__ItemLabelWrapper` }, { children: item.label }), void 0)) : null;
1087
+ const dividerMarkup = divider && index < items.length - 1 ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$B}__Divider` }, { children: divider }), void 0)) : null;
1088
+ return (jsxs(Fragment$1, { children: [jsxs("div", Object.assign({ className: `${COMPONENT_NAME$B}__Item` }, { children: [itemLabelMarkup, jsx("input", { type: item.type, value: item.value, onChange: handleChange, onBlur: () => handleBlur(item.onBlur), onFocus: () => handleFocus(item.onFocus), placeholder: item.placeholder, min: item.min, max: item.max, minLength: item.minLength, maxLength: item.maxLength }, void 0)] }), index), dividerMarkup] }, index));
1089
1089
  };
1090
- const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$A}__LabelWrapper` }, { children: jsxs("label", Object.assign({ className: `${COMPONENT_NAME$A}__Label` }, { children: [label, isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$A}__IsRequiredSign` }, { children: "*" }), void 0)) : null] }), void 0) }), void 0)) : null;
1091
- const itemsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$A}__ItemsWrapper` }, { children: items.map(renderItem) }), void 0));
1090
+ const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$B}__LabelWrapper` }, { children: jsxs("label", Object.assign({ className: `${COMPONENT_NAME$B}__Label` }, { children: [label, isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$B}__IsRequiredSign` }, { children: "*" }), void 0)) : null] }), void 0) }), void 0)) : null;
1091
+ const itemsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$B}__ItemsWrapper` }, { children: items.map(renderItem) }), void 0));
1092
1092
  return (jsxs("div", Object.assign({ className: className }, { children: [labelMarkup, itemsMarkup] }), void 0));
1093
1093
  };
1094
1094
 
1095
- const COMPONENT_NAME$z = 'AlphaBadge';
1095
+ const COMPONENT_NAME$A = 'AlphaBadge';
1096
1096
  const AlphaBadge = ({ theme: themeProp, children, isSuccess, isWarning, isDanger, isPrimary, }) => {
1097
1097
  const { theme } = useTheme();
1098
1098
  const THEME_CLASS = `${theme}`;
1099
- const className = cssClassName(COMPONENT_NAME$z, !themeProp && THEME_CLASS, isPrimary && 'isPrimary', isDanger && 'isDanger', isSuccess && 'isSuccess', isWarning && 'isWarning', themeProp && `${themeProp.toUpperCase()}`);
1100
- const childrenMarkup = children && (jsx("span", Object.assign({ className: `${COMPONENT_NAME$z}__TextWrapper` }, { children: children }), void 0));
1099
+ const className = cssClassName(COMPONENT_NAME$A, !themeProp && THEME_CLASS, isPrimary && 'isPrimary', isDanger && 'isDanger', isSuccess && 'isSuccess', isWarning && 'isWarning', themeProp && `${themeProp.toUpperCase()}`);
1100
+ const childrenMarkup = children && (jsx("span", Object.assign({ className: `${COMPONENT_NAME$A}__TextWrapper` }, { children: children }), void 0));
1101
1101
  return jsx("span", Object.assign({ className: className }, { children: childrenMarkup }), void 0);
1102
1102
  };
1103
1103
 
1104
- const COMPONENT_NAME$y = 'AlphaIcon';
1104
+ const COMPONENT_NAME$z = 'AlphaIcon';
1105
1105
  const ICON_COLOR_VARIANTS = [
1106
1106
  'danger',
1107
1107
  'darkGray',
@@ -1128,9 +1128,9 @@ const AlphaIcon = ({ source, size, color, filled, hasBackdrop, outlined, }) => {
1128
1128
  if (color && !ICON_COLOR_VARIANTS.includes(color)) {
1129
1129
  console.warn(`The color ${color} is not supported for the AlphaIcon component when hasBackdrop is true.`);
1130
1130
  }
1131
- const className = cssClassName(COMPONENT_NAME$y, color && `is-${color}`, filled && 'isFilled', outlined && 'isOutlined', size && `is-${size}`, hasBackdrop && 'hasBackdrop', source && `source-${sourceType}`);
1131
+ const className = cssClassName(COMPONENT_NAME$z, color && `is-${color}`, filled && 'isFilled', outlined && 'isOutlined', size && `is-${size}`, hasBackdrop && 'hasBackdrop', source && `source-${sourceType}`);
1132
1132
  const Source = source;
1133
- const StringSource = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$y}__StringSource` }, { children: jsx("span", { children: source }, void 0) }), void 0));
1133
+ const StringSource = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$z}__StringSource` }, { children: jsx("span", { children: source }, void 0) }), void 0));
1134
1134
  const content = {
1135
1135
  function: jsx(Source, {}, void 0),
1136
1136
  string: StringSource,
@@ -1138,9 +1138,9 @@ const AlphaIcon = ({ source, size, color, filled, hasBackdrop, outlined, }) => {
1138
1138
  return jsx("span", Object.assign({ className: className }, { children: content[sourceType] }), void 0);
1139
1139
  };
1140
1140
 
1141
- const COMPONENT_NAME$x = 'AlphaSpinner';
1141
+ const COMPONENT_NAME$y = 'AlphaSpinner';
1142
1142
  const AlphaSpinner = ({ icon, size }) => {
1143
- const className = cssClassName(COMPONENT_NAME$x);
1143
+ const className = cssClassName(COMPONENT_NAME$y);
1144
1144
  let iconSource;
1145
1145
  if (icon) {
1146
1146
  if (isValidIcon(icon.icon)) {
@@ -1150,16 +1150,16 @@ const AlphaSpinner = ({ icon, size }) => {
1150
1150
  iconSource = icon.icon;
1151
1151
  }
1152
1152
  }
1153
- const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$x}__IconWrapper` }, { children: iconSource }), void 0)) : null;
1153
+ const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$y}__IconWrapper` }, { children: iconSource }), void 0)) : null;
1154
1154
  return jsx("div", Object.assign({ className: className }, { children: iconMarkup }), void 0);
1155
1155
  };
1156
1156
 
1157
- const COMPONENT_NAME$w = 'AlphaButton';
1157
+ const COMPONENT_NAME$x = 'AlphaButton';
1158
1158
  const AlphaButton = ({ ariaLabel, children, icon, spinnerIcon, iconPosition = 'left', id, isDanger, isDisabled, isFullWidth, isLink, isLoading, isPrimary, isSubmit, isTertiary, size = 'medium', textAlign = 'center', isRounded, theme: themeProp, onClick, onFocus, onBlur, onKeyPress, onKeyUp, onKeyDown, onMouseEnter, onMouseLeave, onTouchStart, onTouchEnd, }) => {
1159
1159
  const { theme } = useTheme();
1160
1160
  const THEME_CLASS = `${theme}`;
1161
1161
  const isIconOnly = !children && icon;
1162
- const className = cssClassName(COMPONENT_NAME$w, !themeProp && THEME_CLASS, isPrimary && 'isPrimary', isDanger && 'isDanger', isTertiary && 'isTertiary', isFullWidth && 'isFullWidth', isLink && 'isLink', isDisabled && 'isDisabled', isLoading && 'isLoading', size && `is-${size}`, textAlign && `has-text-${textAlign}`, icon && `has-icon-${iconPosition}`, isIconOnly && 'onlyIcon', isIconOnly && isRounded && 'isRounded', themeProp && `${themeProp.toUpperCase()}`);
1162
+ const className = cssClassName(COMPONENT_NAME$x, !themeProp && THEME_CLASS, isPrimary && 'isPrimary', isDanger && 'isDanger', isTertiary && 'isTertiary', isFullWidth && 'isFullWidth', isLink && 'isLink', isDisabled && 'isDisabled', isLoading && 'isLoading', size && `is-${size}`, textAlign && `has-text-${textAlign}`, icon && `has-icon-${iconPosition}`, isIconOnly && 'onlyIcon', isIconOnly && isRounded && 'isRounded', themeProp && `${themeProp.toUpperCase()}`);
1163
1163
  const buttonProps = {
1164
1164
  id,
1165
1165
  type: isSubmit ? 'submit' : 'button',
@@ -1176,7 +1176,7 @@ const AlphaButton = ({ ariaLabel, children, icon, spinnerIcon, iconPosition = 'l
1176
1176
  onTouchStart,
1177
1177
  onTouchEnd,
1178
1178
  };
1179
- const childrenMarkup = children ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$w}__TextWrapper` }, { children: children }), void 0)) : null;
1179
+ const childrenMarkup = children ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$x}__TextWrapper` }, { children: children }), void 0)) : null;
1180
1180
  let iconSource;
1181
1181
  let spinnerIconSource;
1182
1182
  if (icon) {
@@ -1195,18 +1195,18 @@ const AlphaButton = ({ ariaLabel, children, icon, spinnerIcon, iconPosition = 'l
1195
1195
  spinnerIconSource = spinnerIcon.icon;
1196
1196
  }
1197
1197
  }
1198
- const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$w}__IconWrapper` }, { children: iconSource }), void 0)) : null;
1199
- const spinnerMarkup = isLoading && (jsx("span", Object.assign({ className: `${COMPONENT_NAME$w}__SpinnerWrapper` }, { children: spinnerIconSource }), void 0));
1198
+ const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$x}__IconWrapper` }, { children: iconSource }), void 0)) : null;
1199
+ const spinnerMarkup = isLoading && (jsx("span", Object.assign({ className: `${COMPONENT_NAME$x}__SpinnerWrapper` }, { children: spinnerIconSource }), void 0));
1200
1200
  return (jsxs("button", Object.assign({ className: className }, buttonProps, { children: [spinnerMarkup, iconMarkup, childrenMarkup] }), void 0));
1201
1201
  };
1202
1202
 
1203
- const COMPONENT_NAME$v = 'AlphaChip';
1203
+ const COMPONENT_NAME$w = 'AlphaChip';
1204
1204
  const AlphaChip = ({ children, hasError, removeButtonIcon, isDisabled, theme, onRemove, }) => {
1205
1205
  const { theme: currentTheme } = useTheme();
1206
1206
  const THEME_CLASS = `${currentTheme}`;
1207
- const className = cssClassName(COMPONENT_NAME$v, hasError && 'hasError', isDisabled && 'isDisabled', theme && `${theme.toUpperCase()}`, THEME_CLASS);
1208
- const childrenMarkup = children ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$v}__TextWrapper` }, { children: children }), void 0)) : null;
1209
- const closeButtonMarkup = removeButtonIcon && (jsx("div", Object.assign({ className: `${COMPONENT_NAME$v}__CloseButtonWrapper` }, { children: jsx(AlphaButton, { onClick: onRemove, icon: removeButtonIcon }, void 0) }), void 0));
1207
+ const className = cssClassName(COMPONENT_NAME$w, hasError && 'hasError', isDisabled && 'isDisabled', theme && `${theme.toUpperCase()}`, THEME_CLASS);
1208
+ const childrenMarkup = children ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$w}__TextWrapper` }, { children: children }), void 0)) : null;
1209
+ const closeButtonMarkup = removeButtonIcon && (jsx("div", Object.assign({ className: `${COMPONENT_NAME$w}__CloseButtonWrapper` }, { children: jsx(AlphaButton, { onClick: onRemove, icon: removeButtonIcon }, void 0) }), void 0));
1210
1210
  return (jsxs("div", Object.assign({ className: className }, { children: [childrenMarkup, closeButtonMarkup] }), void 0));
1211
1211
  };
1212
1212
 
@@ -1406,10 +1406,10 @@ const Panel$1 = ({ id, children, isHidden }) => {
1406
1406
  return (jsx("div", Object.assign({ className: className, id: id }, { children: children }), void 0));
1407
1407
  };
1408
1408
 
1409
- const COMPONENT_NAME$u = 'Tabs';
1409
+ const COMPONENT_NAME$v = 'Tabs';
1410
1410
  const Tabs = ({ onSelect, selected, tabs, children, className, areFitted, }) => {
1411
1411
  const { theme } = useTheme();
1412
- const classNames = cssClassName(COMPONENT_NAME$u, `is${themeClassConverter(theme)}`);
1412
+ const classNames = cssClassName(COMPONENT_NAME$v, `is${themeClassConverter(theme)}`);
1413
1413
  const panelMarkup = children
1414
1414
  ? tabs.map((tab, index) => selected === index ? (jsx(Panel$1, Object.assign({ id: tab.panelID || `${tab.id}-panel` }, { children: children }), tab.id)) : (jsx(Panel$1, { id: tab.panelID || `${tab.id}-panel`, isHidden: true }, tab.id)))
1415
1415
  : null;
@@ -1567,10 +1567,10 @@ const getPosition = (activator, tooltip, alignment) => {
1567
1567
  };
1568
1568
  };
1569
1569
 
1570
- const COMPONENT_NAME$t = 'Alpha__TooltipOverlay';
1570
+ const COMPONENT_NAME$u = 'Alpha__TooltipOverlay';
1571
1571
  const Overlay = ({ children, activator, active, zIndexOverride, position = 'bottom', appearance = 'default', width, parentTooltip, theme, onClick, }) => {
1572
1572
  const tooltipRef = useRef(null);
1573
- const overlayClassName = cssClassName(COMPONENT_NAME$t, position && `is-${position}`, appearance && `is-${appearance}`, theme && appearance === 'default' && `is-${theme}`);
1573
+ const overlayClassName = cssClassName(COMPONENT_NAME$u, position && `is-${position}`, appearance && `is-${appearance}`, theme && appearance === 'default' && `is-${theme}`);
1574
1574
  const [positionStyles, setPositionStyles] = useState({
1575
1575
  '--tooltip-overlay-top': 0,
1576
1576
  '--tooltip-overlay-left': 0,
@@ -1606,7 +1606,7 @@ const Overlay = ({ children, activator, active, zIndexOverride, position = 'bott
1606
1606
  return markup;
1607
1607
  };
1608
1608
 
1609
- const COMPONENT_NAME$s = 'AlphaTooltip';
1609
+ const COMPONENT_NAME$t = 'AlphaTooltip';
1610
1610
  const AlphaTooltip = ({ content, children, activatorWrapper = 'span', isActive: isActiveProp = false, onClose, onOpen, position, width, parentTooltip, zIndexOverride, appearance, persistence, theme, }) => {
1611
1611
  const [activatorNode, setActivatorNode] = useState(null);
1612
1612
  const [isActive, setIsActive] = useState(isActiveProp);
@@ -1614,7 +1614,7 @@ const AlphaTooltip = ({ content, children, activatorWrapper = 'span', isActive:
1614
1614
  const isMouseOver = useRef(false);
1615
1615
  const activatorContainer = useRef(null);
1616
1616
  const WrapperComponent = activatorWrapper;
1617
- const className = cssClassName(COMPONENT_NAME$s);
1617
+ const className = cssClassName(COMPONENT_NAME$t);
1618
1618
  const handleOpen = useCallback(() => {
1619
1619
  if (!isActivePersistence) {
1620
1620
  setIsActive(true);
@@ -2193,10 +2193,10 @@ const Popover$1 = ({ activator, children, isActive, onClose, isFullWidth = false
2193
2193
  };
2194
2194
  Popover$1.Pane = Pane$1;
2195
2195
 
2196
- const COMPONENT_NAME$r = 'Divider';
2196
+ const COMPONENT_NAME$s = 'Divider';
2197
2197
  const Divider = ({ alignment = 'left', label }) => {
2198
- const className = cssClassName(COMPONENT_NAME$r, alignment, !label && 'no-label');
2199
- const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$r}__LabelWrapper` }, { children: jsx("span", Object.assign({ className: `${COMPONENT_NAME$r}__Label` }, { children: label }), void 0) }), void 0)) : null;
2198
+ const className = cssClassName(COMPONENT_NAME$s, alignment, !label && 'no-label');
2199
+ const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$s}__LabelWrapper` }, { children: jsx("span", Object.assign({ className: `${COMPONENT_NAME$s}__Label` }, { children: label }), void 0) }), void 0)) : null;
2200
2200
  return jsx("div", Object.assign({ className: className }, { children: labelMarkup }), void 0);
2201
2201
  };
2202
2202
 
@@ -9652,7 +9652,7 @@ function formatDate(date, toISO) {
9652
9652
  return DateTime.fromJSDate(date).toFormat('dd/MM/yyyy');
9653
9653
  }
9654
9654
 
9655
- const COMPONENT_NAME$q = 'DateInput';
9655
+ const COMPONENT_NAME$r = 'DateInput';
9656
9656
  const AlphaInputDate = ({ ariaLabel, disabled, label, onChange, value, isRequired, placeholder, onBlur, errorMessage, months, weekdays, }) => {
9657
9657
  const [isPopoverActive, setIsPopoverActive] = useState(false);
9658
9658
  const [{ month, year }, setDate] = useState({
@@ -9663,7 +9663,7 @@ const AlphaInputDate = ({ ariaLabel, disabled, label, onChange, value, isRequire
9663
9663
  const [isErrorTooltipActive, setIsErrorTooltipActive] = useState(false);
9664
9664
  const [selectedDate, setSelectedDate] = useState();
9665
9665
  const inputRef = useRef(null);
9666
- const className = cssClassName(COMPONENT_NAME$q);
9666
+ const className = cssClassName(COMPONENT_NAME$r);
9667
9667
  const handleMonthChange = (monthValue, yearValue) => {
9668
9668
  setDate({ month: monthValue, year: yearValue });
9669
9669
  };
@@ -9785,7 +9785,7 @@ const AlphaInputDate = ({ ariaLabel, disabled, label, onChange, value, isRequire
9785
9785
  }
9786
9786
  }, [selectedDate]);
9787
9787
  const datePickerMarkup = (jsx(DatePicker, { weekStartsOn: 1, month: month, year: year, onMonthChange: handleMonthChange, onChange: handleDateChange, selected: selectedDate || undefined, months: months, weekDays: weekdays }, void 0));
9788
- const inputMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$q}__InputWrapper`, onClick: () => setIsPopoverActive(true), ref: inputRef }, { children: jsx(AlphaTooltip, Object.assign({ persistence: true, isActive: isErrorTooltipActive, content: errorMessage, appearance: 'error' }, { children: jsx(InputText, { ariaLabel: ariaLabel, disabled: disabled, label: label, onChange: handleInputChange, value: inputValue, maxLength: 10, placeholder: placeholder, onBlur: handleInputBlur, icon: 'Calendar', isRequired: isRequired }, void 0) }), void 0) }), void 0));
9788
+ const inputMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$r}__InputWrapper`, onClick: () => setIsPopoverActive(true), ref: inputRef }, { children: jsx(AlphaTooltip, Object.assign({ persistence: true, isActive: isErrorTooltipActive, content: errorMessage, appearance: 'error' }, { children: jsx(InputText, { ariaLabel: ariaLabel, disabled: disabled, label: label, onChange: handleInputChange, value: inputValue, maxLength: 10, placeholder: placeholder, onBlur: handleInputBlur, icon: 'Calendar', isRequired: isRequired }, void 0) }), void 0) }), void 0));
9789
9789
  const popoverMarkup = (jsx(Popover$1, Object.assign({ activator: inputMarkup, isActive: isPopoverActive, isFullWidth: true, onClose: () => setIsPopoverActive(false) }, { children: datePickerMarkup }), void 0));
9790
9790
  return jsx("div", Object.assign({ className: className }, { children: popoverMarkup }), void 0);
9791
9791
  };
@@ -9875,9 +9875,9 @@ const AlphaFilterControl = ({ primaryAction, secondaryActions, sections, title,
9875
9875
  return (jsxs("div", Object.assign({ className: `${MAIN_CLASS$k}` }, { children: [headerMarkup, bodyMarkup, actionsMarkup] }), void 0));
9876
9876
  };
9877
9877
 
9878
- const COMPONENT_NAME$p = 'AlphaInlineError';
9878
+ const COMPONENT_NAME$q = 'AlphaInlineError';
9879
9879
  const AlphaInlineError = ({ icon, children }) => {
9880
- const className = cssClassName(COMPONENT_NAME$p);
9880
+ const className = cssClassName(COMPONENT_NAME$q);
9881
9881
  let iconSource;
9882
9882
  if (icon) {
9883
9883
  if (isValidIcon(icon.icon)) {
@@ -9887,23 +9887,23 @@ const AlphaInlineError = ({ icon, children }) => {
9887
9887
  iconSource = icon.icon;
9888
9888
  }
9889
9889
  }
9890
- const iconMarkup = icon ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$p}__IconWrapper` }, { children: iconSource }), void 0)) : null;
9891
- const messageMarkup = children ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$p}__MessageWrapper` }, { children: children }), void 0)) : null;
9890
+ const iconMarkup = icon ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$q}__IconWrapper` }, { children: iconSource }), void 0)) : null;
9891
+ const messageMarkup = children ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$q}__MessageWrapper` }, { children: children }), void 0)) : null;
9892
9892
  return (jsxs("div", Object.assign({ className: className }, { children: [iconMarkup, messageMarkup] }), void 0));
9893
9893
  };
9894
9894
 
9895
- const COMPONENT_NAME$o = 'AlphaLabel';
9896
- const className$1 = cssClassName(COMPONENT_NAME$o);
9895
+ const COMPONENT_NAME$p = 'AlphaLabel';
9896
+ const className$1 = cssClassName(COMPONENT_NAME$p);
9897
9897
  const AlphaLabel = ({ children, isRequired, action, id }) => {
9898
- const requiredSignMarkup = isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$o}__RequiredSign` }, { children: "*" }), void 0)) : null;
9898
+ const requiredSignMarkup = isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$p}__RequiredSign` }, { children: "*" }), void 0)) : null;
9899
9899
  const labelMarkup = (jsxs("label", Object.assign({ htmlFor: id }, { children: [children, requiredSignMarkup] }), void 0));
9900
- const actionMarkup = action ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$o}__ActionWrapper` }, { children: jsx(AlphaButton, Object.assign({ id: action.id, isDanger: action.isDanger, onMouseEnter: action.onMouseEnter, onTouchStart: action.onTouchStart, isLink: true, onClick: action.onClick, isDisabled: action.isDisabled }, { children: action.content }), void 0) }), void 0)) : null;
9900
+ const actionMarkup = action ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$p}__ActionWrapper` }, { children: jsx(AlphaButton, Object.assign({ id: action.id, isDanger: action.isDanger, onMouseEnter: action.onMouseEnter, onTouchStart: action.onTouchStart, isLink: true, onClick: action.onClick, isDisabled: action.isDisabled }, { children: action.content }), void 0) }), void 0)) : null;
9901
9901
  return (jsxs("div", Object.assign({ className: className$1 }, { children: [labelMarkup, actionMarkup] }), void 0));
9902
9902
  };
9903
9903
 
9904
- const COMPONENT_NAME$n = 'AlphaLabelledField__HelpText';
9904
+ const COMPONENT_NAME$o = 'AlphaLabelledField__HelpText';
9905
9905
  const HelpText = ({ message, icon }) => {
9906
- const className = cssClassName(COMPONENT_NAME$n);
9906
+ const className = cssClassName(COMPONENT_NAME$o);
9907
9907
  let iconSource;
9908
9908
  if (icon) {
9909
9909
  if (isValidIcon(icon.icon)) {
@@ -9913,24 +9913,24 @@ const HelpText = ({ message, icon }) => {
9913
9913
  iconSource = icon.icon;
9914
9914
  }
9915
9915
  }
9916
- const iconMarkup = iconSource ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$n}__IconWrapper` }, { children: iconSource }), void 0)) : null;
9917
- const messageMarkup = message ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$n}__MessageWrapper` }, { children: message }), void 0)) : null;
9916
+ const iconMarkup = iconSource ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$o}__IconWrapper` }, { children: iconSource }), void 0)) : null;
9917
+ const messageMarkup = message ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$o}__MessageWrapper` }, { children: message }), void 0)) : null;
9918
9918
  return (jsxs("div", Object.assign({ className: className }, { children: [iconMarkup, messageMarkup] }), void 0));
9919
9919
  };
9920
9920
 
9921
- const COMPONENT_NAME$m = 'AlphaLabelledField';
9921
+ const COMPONENT_NAME$n = 'AlphaLabelledField';
9922
9922
  const AlphaLabelledField = ({ label, children, action, error, helpText, id, isRequired, }) => {
9923
- const className = cssClassName(COMPONENT_NAME$m);
9924
- const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$m}__LabelWrapper` }, { children: jsx(AlphaLabel, Object.assign({ action: action, id: id, isRequired: isRequired }, { children: label }), void 0) }), void 0)) : null;
9925
- const errorMarkup = error ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$m}__ErrorWrapper` }, { children: jsx(AlphaInlineError, Object.assign({ icon: error.icon }, { children: error.message }), void 0) }), void 0)) : null;
9923
+ const className = cssClassName(COMPONENT_NAME$n);
9924
+ const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$n}__LabelWrapper` }, { children: jsx(AlphaLabel, Object.assign({ action: action, id: id, isRequired: isRequired }, { children: label }), void 0) }), void 0)) : null;
9925
+ const errorMarkup = error ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$n}__ErrorWrapper` }, { children: jsx(AlphaInlineError, Object.assign({ icon: error.icon }, { children: error.message }), void 0) }), void 0)) : null;
9926
9926
  const helpTextMarkup = helpText ? (jsx(HelpText, { message: helpText.message, icon: helpText.icon }, void 0)) : null;
9927
- const contentMarkup = errorMarkup ? (jsx(AlphaTooltip, Object.assign({ persistence: true, content: errorMarkup, isActive: Boolean(errorMarkup), appearance: 'error' }, { children: jsx("div", Object.assign({ className: `${COMPONENT_NAME$m}__ContentWrapper` }, { children: children }), void 0) }), void 0)) : (children);
9927
+ const contentMarkup = errorMarkup ? (jsx(AlphaTooltip, Object.assign({ persistence: true, content: errorMarkup, isActive: Boolean(errorMarkup), appearance: 'error' }, { children: jsx("div", Object.assign({ className: `${COMPONENT_NAME$n}__ContentWrapper` }, { children: children }), void 0) }), void 0)) : (children);
9928
9928
  return (jsxs("div", Object.assign({ className: className }, { children: [labelMarkup, contentMarkup, helpTextMarkup] }), void 0));
9929
9929
  };
9930
9930
 
9931
- const COMPONENT_NAME$l = 'AlphaInputText';
9931
+ const COMPONENT_NAME$m = 'AlphaInputText';
9932
9932
  const AlphaInputText = ({ isDisabled, label }) => {
9933
- const className = cssClassName(COMPONENT_NAME$l, isDisabled && 'isDisabled');
9933
+ const className = cssClassName(COMPONENT_NAME$m, isDisabled && 'isDisabled');
9934
9934
  return (jsx(AlphaLabelledField, Object.assign({ label: label }, { children: jsx("div", { className: className }, void 0) }), void 0));
9935
9935
  };
9936
9936
 
@@ -9938,14 +9938,14 @@ const StepDefault = {
9938
9938
  status: 'incomplete',
9939
9939
  };
9940
9940
 
9941
- const COMPONENT_NAME$k = 'AlphaStepper__Step';
9941
+ const COMPONENT_NAME$l = 'AlphaStepper__Step';
9942
9942
  const Step = ({ iconMarkup, label, isComplete, isInactive, isSuccess, isLastStepComplete, isLastStepInactive, }) => {
9943
9943
  const { theme } = useTheme();
9944
- const itemClassName = cssClassName(`${COMPONENT_NAME$k}__Item`, isComplete && `is-${theme}-light-after`, isInactive && 'is-inactive-light-after', isSuccess && 'is-success-light-after', isSuccess && 'is-success-light-before', isLastStepComplete && `is-${theme}-light-before`, isLastStepInactive && 'is-inactive-light-before');
9945
- return (jsxs("div", Object.assign({ className: COMPONENT_NAME$k }, { children: [jsx("div", Object.assign({ className: itemClassName }, { children: iconMarkup }), void 0), jsx("div", Object.assign({ className: `${COMPONENT_NAME$k}__Label` }, { children: label }), void 0)] }), void 0));
9944
+ const itemClassName = cssClassName(`${COMPONENT_NAME$l}__Item`, isComplete && `is-${theme}-light-after`, isInactive && 'is-inactive-light-after', isSuccess && 'is-success-light-after', isSuccess && 'is-success-light-before', isLastStepComplete && `is-${theme}-light-before`, isLastStepInactive && 'is-inactive-light-before');
9945
+ return (jsxs("div", Object.assign({ className: COMPONENT_NAME$l }, { children: [jsx("div", Object.assign({ className: itemClassName }, { children: iconMarkup }), void 0), jsx("div", Object.assign({ className: `${COMPONENT_NAME$l}__Label` }, { children: label }), void 0)] }), void 0));
9946
9946
  };
9947
9947
 
9948
- const COMPONENT_NAME$j = 'AlphaStepper';
9948
+ const COMPONENT_NAME$k = 'AlphaStepper';
9949
9949
  const getSourceIcon = (icon) => {
9950
9950
  if (icon) {
9951
9951
  if (isValidIcon(icon.icon)) {
@@ -9960,7 +9960,7 @@ const AlphaStepper = ({ isSuccess, steps = [], completeIcon, incompleteIcon, err
9960
9960
  const { theme } = useTheme();
9961
9961
  const renderStep = (step = Object.assign({}, StepDefault), index) => {
9962
9962
  const lastStepStatus = steps[index - 1] ? steps[index - 1].status : '';
9963
- const iconClassName = cssClassName(`${COMPONENT_NAME$j}__IconWrapper`, (step.status === 'complete' || step.status === 'active') && `is-${theme}`, step.status !== 'complete' && `is-inactive`, step.hasError && errorIcon && 'is-danger', isSuccess && `is-success`);
9963
+ const iconClassName = cssClassName(`${COMPONENT_NAME$k}__IconWrapper`, (step.status === 'complete' || step.status === 'active') && `is-${theme}`, step.status !== 'complete' && `is-inactive`, step.hasError && errorIcon && 'is-danger', isSuccess && `is-success`);
9964
9964
  let iconSource = getSourceIcon(incompleteIcon);
9965
9965
  if (step.hasError && errorIcon)
9966
9966
  iconSource = getSourceIcon(errorIcon);
@@ -9971,16 +9971,16 @@ const AlphaStepper = ({ isSuccess, steps = [], completeIcon, incompleteIcon, err
9971
9971
  const isInactive = step.status === 'incomplete' || step.status === 'active';
9972
9972
  const isLastStepComplete = lastStepStatus === 'complete';
9973
9973
  const isLastStepInactive = lastStepStatus === 'incomplete' || lastStepStatus === 'active';
9974
- return (jsx(Step, { iconMarkup: iconMarkup, label: step.label, isComplete: isComplete, isInactive: isInactive, isSuccess: isSuccess, isLastStepComplete: isLastStepComplete, isLastStepInactive: isLastStepInactive }, `${COMPONENT_NAME$j}-${index}`));
9974
+ return (jsx(Step, { iconMarkup: iconMarkup, label: step.label, isComplete: isComplete, isInactive: isInactive, isSuccess: isSuccess, isLastStepComplete: isLastStepComplete, isLastStepInactive: isLastStepInactive }, `${COMPONENT_NAME$k}-${index}`));
9975
9975
  };
9976
9976
  const stepsMarkup = steps ? steps.map(renderStep) : null;
9977
- return jsx("div", Object.assign({ className: `${COMPONENT_NAME$j}__Container` }, { children: stepsMarkup }), void 0);
9977
+ return jsx("div", Object.assign({ className: `${COMPONENT_NAME$k}__Container` }, { children: stepsMarkup }), void 0);
9978
9978
  };
9979
9979
 
9980
- const COMPONENT_NAME$i = 'AlphaTag';
9980
+ const COMPONENT_NAME$j = 'AlphaTag';
9981
9981
  const AlphaTag = ({ color, children }) => {
9982
- const className = cssClassName(COMPONENT_NAME$i, color && `is-${color.color}-${color.intensity}`);
9983
- const childrenMarkup = (jsx("span", Object.assign({ className: `${COMPONENT_NAME$i}__TextWrapper` }, { children: children }), void 0));
9982
+ const className = cssClassName(COMPONENT_NAME$j, color && `is-${color.color}-${color.intensity}`);
9983
+ const childrenMarkup = (jsx("span", Object.assign({ className: `${COMPONENT_NAME$j}__TextWrapper` }, { children: children }), void 0));
9984
9984
  return jsx("div", Object.assign({ className: className }, { children: childrenMarkup }), void 0);
9985
9985
  };
9986
9986
 
@@ -9991,11 +9991,11 @@ const StatusIcon = {
9991
9991
  Warning: WarningIcon,
9992
9992
  };
9993
9993
 
9994
- const COMPONENT_NAME$h = 'AlphaTile';
9994
+ const COMPONENT_NAME$i = 'AlphaTile';
9995
9995
  const AlphaTile = ({ isSelected, icon, status, theme: themeProp, title, onClick, }) => {
9996
9996
  const { theme } = useTheme();
9997
- const className = cssClassName(COMPONENT_NAME$h, `is${themeClassConverter(themeProp || theme)}`, isSelected && 'isSelected');
9998
- const statusWrapperClassName = cssClassName(`${COMPONENT_NAME$h}--StatusWrapper`, status && `is${status}`);
9997
+ const className = cssClassName(COMPONENT_NAME$i, `is${themeClassConverter(themeProp || theme)}`, isSelected && 'isSelected');
9998
+ const statusWrapperClassName = cssClassName(`${COMPONENT_NAME$i}--StatusWrapper`, status && `is${status}`);
9999
9999
  let iconSource;
10000
10000
  if (icon) {
10001
10001
  if (isValidIcon(icon.icon)) {
@@ -10005,10 +10005,10 @@ const AlphaTile = ({ isSelected, icon, status, theme: themeProp, title, onClick,
10005
10005
  iconSource = icon.icon;
10006
10006
  }
10007
10007
  }
10008
- const iconWrapper = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$h}__IconWrapper` }, { children: iconSource }), void 0)) : null;
10009
- const mediaMarkup = icon ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$h}__MediaWrapper` }, { children: iconWrapper }), void 0)) : null;
10010
- const titleWrapper = title ? (jsx("div", { children: jsx("div", Object.assign({ className: `${COMPONENT_NAME$h}__TitleWrapper` }, { children: title }), void 0) }, void 0)) : null;
10011
- const HeaderWrapper = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$h}__HeaderWrapper` }, { children: [mediaMarkup, titleWrapper] }), void 0));
10008
+ const iconWrapper = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$i}__IconWrapper` }, { children: iconSource }), void 0)) : null;
10009
+ const mediaMarkup = icon ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$i}__MediaWrapper` }, { children: iconWrapper }), void 0)) : null;
10010
+ const titleWrapper = title ? (jsx("div", { children: jsx("div", Object.assign({ className: `${COMPONENT_NAME$i}__TitleWrapper` }, { children: title }), void 0) }, void 0)) : null;
10011
+ const HeaderWrapper = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$i}__HeaderWrapper` }, { children: [mediaMarkup, titleWrapper] }), void 0));
10012
10012
  const statusIcon = status ? StatusIcon[status] : '';
10013
10013
  const statusWrapper = status ? (jsx("div", Object.assign({ className: statusWrapperClassName }, { children: jsx(AlphaIcon, { source: statusIcon, size: 'medium', outlined: true }, void 0) }), void 0)) : null;
10014
10014
  return (jsxs("div", Object.assign({ className: className, onClick: onClick }, { children: [HeaderWrapper, statusWrapper] }), void 0));
@@ -16651,9 +16651,9 @@ function getRangeDate(range, date) {
16651
16651
  };
16652
16652
  }
16653
16653
 
16654
- const COMPONENT_NAME$g = 'DatePicker__Day';
16654
+ const COMPONENT_NAME$h = 'DatePicker__Day';
16655
16655
  const Day = memo(function Day({ day, isDisabled, isFirstSelectedDay, isLastSelectedDay, isInRange, isSelected, onClick, theme: themeProp, }) {
16656
- const emptyDayClassName = cssClassName(COMPONENT_NAME$g, !day && 'isEmpty');
16656
+ const emptyDayClassName = cssClassName(COMPONENT_NAME$h, !day && 'isEmpty');
16657
16657
  if (!day) {
16658
16658
  return jsx("td", { className: emptyDayClassName }, void 0);
16659
16659
  }
@@ -16664,14 +16664,14 @@ const Day = memo(function Day({ day, isDisabled, isFirstSelectedDay, isLastSelec
16664
16664
  }
16665
16665
  };
16666
16666
  const today = isToday(new Date(), day);
16667
- const className = cssClassName(COMPONENT_NAME$g, today && 'isToday', `theme-${themeProp || theme}`, isSelected && 'isSelected', isDisabled && 'isDisabled', isInRange && 'isInRange', isFirstSelectedDay && 'isFirstSelectedDay', isLastSelectedDay && 'isLastSelectedDay');
16667
+ const className = cssClassName(COMPONENT_NAME$h, today && 'isToday', `theme-${themeProp || theme}`, isSelected && 'isSelected', isDisabled && 'isDisabled', isInRange && 'isInRange', isFirstSelectedDay && 'isFirstSelectedDay', isLastSelectedDay && 'isLastSelectedDay');
16668
16668
  const date = day.getDate();
16669
16669
  return (jsx("td", Object.assign({ className: className }, { children: jsx("button", Object.assign({ onClick: handleClick }, { children: date }), void 0) }), void 0));
16670
16670
  });
16671
16671
 
16672
- const COMPONENT_NAME$f = 'DatePicker__Month';
16672
+ const COMPONENT_NAME$g = 'DatePicker__Month';
16673
16673
  const Month = ({ month = new Date().getMonth(), year = new Date().getFullYear(), allowRange, disableAfterDate, disableBeforeDate, onChange, selected, weekStartsOn = 0, disableDates, weekDays, }) => {
16674
- const className = cssClassName(COMPONENT_NAME$f);
16674
+ const className = cssClassName(COMPONENT_NAME$g);
16675
16675
  const weeks = useMemo(() => getWeeksByMonth(month, year, weekStartsOn), [month, year, weekStartsOn]);
16676
16676
  const handleDateClick = useCallback((selectedDate) => {
16677
16677
  if (onChange) {
@@ -16696,9 +16696,9 @@ const Month = ({ month = new Date().getMonth(), year = new Date().getFullYear(),
16696
16696
  return jsx("div", Object.assign({ className: className }, { children: calendarGridMarkup }), void 0);
16697
16697
  };
16698
16698
 
16699
- const COMPONENT_NAME$e = 'DatePIcker__YearField';
16699
+ const COMPONENT_NAME$f = 'DatePIcker__YearField';
16700
16700
  const YearField = ({ onChange, value, min, max, onBlur, onFocus, onKeyDown, onKeyUp, }) => {
16701
- const className = cssClassName(COMPONENT_NAME$e);
16701
+ const className = cssClassName(COMPONENT_NAME$f);
16702
16702
  const handleChange = (event) => {
16703
16703
  if (onChange) {
16704
16704
  const value = event.target.value.trim();
@@ -16742,10 +16742,10 @@ const IconButton = (_a) => {
16742
16742
  return (jsx("button", Object.assign({ className: className, onClick: onClick, onBlur: onBlur, onFocus: onFocus }, rest, { children: icon && jsx(Icon, { name: icon }, void 0) }), void 0));
16743
16743
  };
16744
16744
 
16745
- const COMPONENT_NAME$d = 'DatePicker__Header';
16745
+ const COMPONENT_NAME$e = 'DatePicker__Header';
16746
16746
  const Header$2 = ({ month, year, onChange, months }) => {
16747
16747
  const [yearValue, setYearValue] = useState(year);
16748
- const headerClassName = cssClassName(COMPONENT_NAME$d);
16748
+ const headerClassName = cssClassName(COMPONENT_NAME$e);
16749
16749
  const handleMonthChange = useCallback((month, year) => {
16750
16750
  if (onChange) {
16751
16751
  onChange(month, year);
@@ -16775,10 +16775,10 @@ const Header$2 = ({ month, year, onChange, months }) => {
16775
16775
  const previousYear = getPreviousYear(month, year);
16776
16776
  const nextMonth = getNextMonth(month);
16777
16777
  const nextYear = getNextYear(month, year);
16778
- return (jsxs("div", Object.assign({ className: headerClassName }, { children: [jsx(IconButton, { icon: 'ArrowLeft', size: 'small', appearance: 'secondary', onClick: () => handleMonthChange(previousMonth, previousYear) }, void 0), jsxs("span", Object.assign({ className: `${COMPONENT_NAME$d}__DateLabel` }, { children: [montName, jsx(YearField, { value: yearValue, onChange: setYearValue, onBlur: handleYearBlur, min: MINIMUM_SELECTABLE_YEAR }, void 0)] }), void 0), jsx(IconButton, { icon: 'ArrowRight', size: 'small', appearance: 'secondary', onClick: () => handleMonthChange(nextMonth, nextYear) }, void 0)] }), void 0));
16778
+ return (jsxs("div", Object.assign({ className: headerClassName }, { children: [jsx(IconButton, { icon: 'ArrowLeft', size: 'small', appearance: 'secondary', onClick: () => handleMonthChange(previousMonth, previousYear) }, void 0), jsxs("span", Object.assign({ className: `${COMPONENT_NAME$e}__DateLabel` }, { children: [montName, jsx(YearField, { value: yearValue, onChange: setYearValue, onBlur: handleYearBlur, min: MINIMUM_SELECTABLE_YEAR }, void 0)] }), void 0), jsx(IconButton, { icon: 'ArrowRight', size: 'small', appearance: 'secondary', onClick: () => handleMonthChange(nextMonth, nextYear) }, void 0)] }), void 0));
16779
16779
  };
16780
16780
 
16781
- const COMPONENT_NAME$c = 'DatePicker';
16781
+ const COMPONENT_NAME$d = 'DatePicker';
16782
16782
  function getMonthSelectedDate(selected) {
16783
16783
  return selected instanceof Date
16784
16784
  ? {
@@ -16788,7 +16788,7 @@ function getMonthSelectedDate(selected) {
16788
16788
  : selected;
16789
16789
  }
16790
16790
  const DatePicker = ({ allowRange, disableAfterDate, disableBeforeDate, id, month = new Date().getMonth(), year = new Date().getFullYear(), onChange, selected, onMonthChange, weekStartsOn, disableDates, months, weekDays, }) => {
16791
- const className = cssClassName(COMPONENT_NAME$c);
16791
+ const className = cssClassName(COMPONENT_NAME$d);
16792
16792
  const handleDateChange = useCallback((dateRange) => {
16793
16793
  if (onChange) {
16794
16794
  onChange(dateRange);
@@ -16803,19 +16803,19 @@ const TrashIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24',
16803
16803
  // eslint-disable-next-line max-len
16804
16804
  d: 'M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }, void 0), jsx("path", { d: 'M10 11V17', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }, void 0), jsx("path", { d: 'M14 11V17', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }, void 0)] }), void 0));
16805
16805
 
16806
- const COMPONENT_NAME$b = 'DeletableSection';
16806
+ const COMPONENT_NAME$c = 'DeletableSection';
16807
16807
  const DeletableSection = ({ ariaLabel, children, onDelete, iconDeletable, isDeletable, }) => {
16808
16808
  const { theme } = useTheme();
16809
16809
  const THEME_CLASS = `${theme}`;
16810
- const className = cssClassName(COMPONENT_NAME$b);
16811
- const classNameButton = cssClassName(`${COMPONENT_NAME$b}__DeleteButtonWrapper`, THEME_CLASS);
16810
+ const className = cssClassName(COMPONENT_NAME$c);
16811
+ const classNameButton = cssClassName(`${COMPONENT_NAME$c}__DeleteButtonWrapper`, THEME_CLASS);
16812
16812
  const icon = iconDeletable || TrashIcon;
16813
- const deleteButtonMarkup = onDelete && isDeletable ? (jsx("div", Object.assign({ className: classNameButton }, { children: jsx("button", Object.assign({ "aria-label": ariaLabel ? `${ariaLabel}-removeForm` : ariaLabel, className: `${COMPONENT_NAME$b}__DeleteButton`, onClick: onDelete }, { children: jsx(AlphaIcon, { source: icon, outlined: true }, void 0) }), void 0) }), void 0)) : null;
16814
- const contentMarkup = children ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$b}__ContentWrapper` }, { children: children }), void 0)) : null;
16813
+ const deleteButtonMarkup = onDelete && isDeletable ? (jsx("div", Object.assign({ className: classNameButton }, { children: jsx("button", Object.assign({ "aria-label": ariaLabel ? `${ariaLabel}-removeForm` : ariaLabel, className: `${COMPONENT_NAME$c}__DeleteButton`, onClick: onDelete }, { children: jsx(AlphaIcon, { source: icon, outlined: true }, void 0) }), void 0) }), void 0)) : null;
16814
+ const contentMarkup = children ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$c}__ContentWrapper` }, { children: children }), void 0)) : null;
16815
16815
  return (jsxs("div", Object.assign({ className: className }, { children: [deleteButtonMarkup, contentMarkup] }), void 0));
16816
16816
  };
16817
16817
 
16818
- const COMPONENT_NAME$a = 'AlphaInputTag';
16818
+ const COMPONENT_NAME$b = 'AlphaInputTag';
16819
16819
  const InputTag$1 = ({ ariaLabel, id, inputTextPlaceholder, inputTextValue, isRequired, label, onChange, onInputTextChange, addedTags = [], triggerKeys = ['Enter'], onBlur, onFocus, isDisabled, hasError, tagRemoveIcon, helpText, }) => {
16820
16820
  const [isFocused, setIsFocused] = useState(false);
16821
16821
  const inputRef = useRef(null);
@@ -16858,10 +16858,10 @@ const InputTag$1 = ({ ariaLabel, id, inputTextPlaceholder, inputTextValue, isReq
16858
16858
  }
16859
16859
  };
16860
16860
  const renderTag = (tag, index) => {
16861
- return (jsx("div", Object.assign({ className: `${COMPONENT_NAME$a}__TagWrapper` }, { children: jsx(AlphaChip, Object.assign({ removeButtonIcon: tagRemoveIcon, onRemove: () => handleRemoveTag(index) }, { children: tag }), void 0) }), index));
16861
+ return (jsx("div", Object.assign({ className: `${COMPONENT_NAME$b}__TagWrapper` }, { children: jsx(AlphaChip, Object.assign({ removeButtonIcon: tagRemoveIcon, onRemove: () => handleRemoveTag(index) }, { children: tag }), void 0) }), index));
16862
16862
  };
16863
- const className = cssClassName(COMPONENT_NAME$a);
16864
- const inputWrapperClassName = cssClassName(`${COMPONENT_NAME$a}__InputWrapper`, isFocused && 'isFocused', isDisabled && 'isDisabled', hasError && 'hasError');
16863
+ const className = cssClassName(COMPONENT_NAME$b);
16864
+ const inputWrapperClassName = cssClassName(`${COMPONENT_NAME$b}__InputWrapper`, isFocused && 'isFocused', isDisabled && 'isDisabled', hasError && 'hasError');
16865
16865
  const handleInputChange = (event) => {
16866
16866
  if (onInputTextChange) {
16867
16867
  onInputTextChange(event.target.value);
@@ -24540,7 +24540,7 @@ const SectionForm = ({ ariaLabel, data, fields, fieldsSection, iconDeletable, ic
24540
24540
  return (jsx(DeletableSection, Object.assign({ ariaLabel: ariaLabel, onDelete: onDelete, iconDeletable: iconDeletable, isDeletable: isDeletable }, { children: gridMarkup }), void 0));
24541
24541
  };
24542
24542
 
24543
- const COMPONENT_NAME$9 = 'DynamicForm';
24543
+ const COMPONENT_NAME$a = 'DynamicForm';
24544
24544
  const DynamicForm = ({ ariaLabel, dataFormArray = [], fields, fieldsSection, iconDeletable, iconHelperText, labelDivider, onChange, onAddForm, tagRemoveIcon, deletableFormArray, extraPropsFieldsArray, }) => {
24545
24545
  const { theme } = useTheme();
24546
24546
  const handleChange = (contact, id) => {
@@ -24568,11 +24568,11 @@ const DynamicForm = ({ ariaLabel, dataFormArray = [], fields, fieldsSection, ico
24568
24568
  : undefined;
24569
24569
  return (jsx(SectionForm, { ariaLabel: ariaLabel, data: form, fields: fields, fieldsSection: fieldsSection, iconDeletable: iconDeletable, iconHelperText: iconHelperText, onChange: (formData) => handleChange(formData, form.id || ''), onDelete: () => handleDelete(form.id || ''), tagRemoveIcon: tagRemoveIcon, isDeletable: isDeletable, extraPropsField: extraProps }, `DynamicForm-${form.id}-${index}}`));
24570
24570
  };
24571
- const contactsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$9}__SectionFormWrapper` }, { children: dataFormArray.map(renderForm) }), void 0));
24571
+ const contactsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$a}__SectionFormWrapper` }, { children: dataFormArray.map(renderForm) }), void 0));
24572
24572
  const dividerMarkup = labelDivider && jsx(Divider, { label: labelDivider }, void 0);
24573
24573
  const addContactButtonMarkup = onAddForm && (jsx(AlphaButton, Object.assign({ ariaLabel: ariaLabel ? `${ariaLabel}--addNewForm` : ariaLabel, isTertiary: true, onClick: onAddForm.onClick }, { children: onAddForm.label }), void 0));
24574
24574
  const THEME_CLASS = `${theme}`;
24575
- const className = cssClassName(COMPONENT_NAME$9, THEME_CLASS);
24575
+ const className = cssClassName(COMPONENT_NAME$a, THEME_CLASS);
24576
24576
  return (jsxs("div", Object.assign({ className: className }, { children: [dividerMarkup, contactsMarkup, addContactButtonMarkup] }), void 0));
24577
24577
  };
24578
24578
 
@@ -27768,19 +27768,19 @@ Sortable.mount(Remove, Revert);
27768
27768
 
27769
27769
  const Context = createContext({});
27770
27770
 
27771
- const COMPONENT_NAME$8 = 'SortableList__Item';
27771
+ const COMPONENT_NAME$9 = 'SortableList__Item';
27772
27772
  const Item$2 = ({ children }) => {
27773
27773
  const { hasHandle } = useContext(Context);
27774
- const className = cssClassName(COMPONENT_NAME$8, !hasHandle && 'no-handle');
27775
- const handleMarkup = hasHandle ? (jsxs("span", Object.assign({ className: `${COMPONENT_NAME$8}__Handle` }, { children: [jsx(Icon, { name: 'MoreVertical' }, void 0), jsx(Icon, { name: 'MoreVertical' }, void 0)] }), void 0)) : null;
27776
- const contentMarkup = (jsx("span", Object.assign({ className: `${COMPONENT_NAME$8}__Content` }, { children: children }), void 0));
27774
+ const className = cssClassName(COMPONENT_NAME$9, !hasHandle && 'no-handle');
27775
+ const handleMarkup = hasHandle ? (jsxs("span", Object.assign({ className: `${COMPONENT_NAME$9}__Handle` }, { children: [jsx(Icon, { name: 'MoreVertical' }, void 0), jsx(Icon, { name: 'MoreVertical' }, void 0)] }), void 0)) : null;
27776
+ const contentMarkup = (jsx("span", Object.assign({ className: `${COMPONENT_NAME$9}__Content` }, { children: children }), void 0));
27777
27777
  return (jsxs("li", Object.assign({ className: className }, { children: [handleMarkup, contentMarkup] }), void 0));
27778
27778
  };
27779
27779
 
27780
- const COMPONENT_NAME$7 = 'SortableList';
27780
+ const COMPONENT_NAME$8 = 'SortableList';
27781
27781
  const SortableList = function ({ renderItem, items, onSort, hasHandle, }) {
27782
27782
  const listRef = useRef(null);
27783
- const className = cssClassName(COMPONENT_NAME$7);
27783
+ const className = cssClassName(COMPONENT_NAME$8);
27784
27784
  const hasItems = items && items.length > 0;
27785
27785
  const handleSortEnd = (event) => {
27786
27786
  const { newIndex, oldIndex } = event;
@@ -27811,7 +27811,7 @@ const SortableList = function ({ renderItem, items, onSort, hasHandle, }) {
27811
27811
  }
27812
27812
  return itemComponent;
27813
27813
  };
27814
- const listClassName = cssClassName(`${COMPONENT_NAME$7}__List`);
27814
+ const listClassName = cssClassName(`${COMPONENT_NAME$8}__List`);
27815
27815
  const listMarkup = hasItems ? (jsx("ul", Object.assign({ ref: listRef, className: listClassName }, { children: Children.toArray(items.map(renderItemElement)) }), void 0)) : null;
27816
27816
  const contextValue = {
27817
27817
  hasHandle,
@@ -30139,12 +30139,12 @@ const Tile = ({ isSelected, media, onClick, title, value, subtitle = '', mediaSi
30139
30139
  return (jsxs("div", Object.assign({ className: classes, onClick: handleOnClick }, { children: [jsxs("div", Object.assign({ className: 'Tile__Wrapper' }, { children: [jsxs("div", Object.assign({ className: 'Tile__TitleWrapper' }, { children: [jsx("div", Object.assign({ className: 'Tile__Media' }, { children: jsx(Media, { icon: media, size: mediaSize, appearance: 'info' }, void 0) }), void 0), jsxs("div", { children: [jsx("div", Object.assign({ className: 'Tile__Title' }, { children: title }), void 0), subtitle ? jsx("div", Object.assign({ className: 'Tile__Subtitle' }, { children: subtitle }), void 0) : null] }, void 0)] }), void 0), jsx("div", Object.assign({ className: 'Tile__RightMediaWrapper' }, { children: rightMedia !== null && rightMedia }), void 0)] }), void 0), tagsMarkup] }), void 0));
30140
30140
  };
30141
30141
 
30142
- const COMPONENT_NAME$6 = 'Totalizer';
30142
+ const COMPONENT_NAME$7 = 'Totalizer';
30143
30143
  const Totalizer = ({ action, direction, icon, isDisabled, isFocused, label, placeholderValue, value, theme: themeProp, }) => {
30144
30144
  const { theme } = useTheme();
30145
30145
  const themeClass = `has-Theme${themeProp ? themeProp.toUpperCase() : theme.toUpperCase()}`;
30146
- const className = cssClassName(COMPONENT_NAME$6, themeClass, isDisabled && 'isDisabled', isFocused && 'isFocused', direction && `has-${direction}Direction`);
30147
- const titleMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$6}__TitleWrapper` }, { children: label }), void 0)) : null;
30146
+ const className = cssClassName(COMPONENT_NAME$7, themeClass, isDisabled && 'isDisabled', isFocused && 'isFocused', direction && `has-${direction}Direction`);
30147
+ const titleMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$7}__TitleWrapper` }, { children: label }), void 0)) : null;
30148
30148
  let iconSource;
30149
30149
  if (icon) {
30150
30150
  if (isValidIcon(icon.icon)) {
@@ -30154,25 +30154,25 @@ const Totalizer = ({ action, direction, icon, isDisabled, isFocused, label, plac
30154
30154
  iconSource = icon.icon;
30155
30155
  }
30156
30156
  }
30157
- const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$6}__IconWrapper` }, { children: iconSource }), void 0)) : null;
30158
- const headerMarkup = titleMarkup || iconMarkup ? (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$6}__HeaderWrapper` }, { children: [titleMarkup, iconMarkup] }), void 0)) : null;
30159
- const valueMarkup = value ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$6}__ValueWrapper` }, { children: value }), void 0)) : null;
30160
- const placeholderValueMarkup = placeholderValue ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$6}__PlaceholderValueWrapper` }, { children: placeholderValue }), void 0)) : null;
30157
+ const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$7}__IconWrapper` }, { children: iconSource }), void 0)) : null;
30158
+ const headerMarkup = titleMarkup || iconMarkup ? (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$7}__HeaderWrapper` }, { children: [titleMarkup, iconMarkup] }), void 0)) : null;
30159
+ const valueMarkup = value ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$7}__ValueWrapper` }, { children: value }), void 0)) : null;
30160
+ const placeholderValueMarkup = placeholderValue ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$7}__PlaceholderValueWrapper` }, { children: placeholderValue }), void 0)) : null;
30161
30161
  const valueContentToRender = (!valueMarkup && placeholderValueMarkup) || valueMarkup;
30162
- const valueContainerMarkup = valueMarkup || placeholderValueMarkup ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$6}__ValueContainerWrapper` }, { children: valueContentToRender }), void 0)) : null;
30163
- const actionMarkup = action ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$6}__ActionWrapper` }, { children: jsx(AlphaButton, Object.assign({ id: action.id, onClick: action.onClick, onMouseEnter: action.onMouseEnter, onTouchStart: action.onTouchStart, isDisabled: action.isDisabled || isDisabled, isLoading: action.isLoading, isDanger: action.isDanger, icon: action.icon ? { icon: action.icon } : undefined, isPrimary: true }, { children: action.content }), void 0) }), void 0)) : null;
30164
- const contentClassName = cssClassName(`${COMPONENT_NAME$6}__ContentWrapper`, action && 'has-Action');
30162
+ const valueContainerMarkup = valueMarkup || placeholderValueMarkup ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$7}__ValueContainerWrapper` }, { children: valueContentToRender }), void 0)) : null;
30163
+ const actionMarkup = action ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$7}__ActionWrapper` }, { children: jsx(AlphaButton, Object.assign({ id: action.id, onClick: action.onClick, onMouseEnter: action.onMouseEnter, onTouchStart: action.onTouchStart, isDisabled: action.isDisabled || isDisabled, isLoading: action.isLoading, isDanger: action.isDanger, icon: action.icon ? { icon: action.icon } : undefined, isPrimary: true }, { children: action.content }), void 0) }), void 0)) : null;
30164
+ const contentClassName = cssClassName(`${COMPONENT_NAME$7}__ContentWrapper`, action && 'has-Action');
30165
30165
  const contentMarkup = valueContainerMarkup || actionMarkup ? (jsxs("div", Object.assign({ className: contentClassName }, { children: [valueContainerMarkup, actionMarkup] }), void 0)) : null;
30166
30166
  return (jsxs("div", Object.assign({ className: className }, { children: [headerMarkup, contentMarkup] }), void 0));
30167
30167
  };
30168
30168
 
30169
- const COMPONENT_NAME$5 = 'AlphaMultiSelectionPicker__Picker__List';
30169
+ const COMPONENT_NAME$6 = 'AlphaMultiSelectionPicker__Picker__List';
30170
30170
  const List = ({ items, selected, onChange }) => {
30171
30171
  const listWrapperRef = useRef(null);
30172
30172
  const scrollToSelected = () => {
30173
30173
  const listWrapper = listWrapperRef.current;
30174
30174
  if (listWrapper) {
30175
- const selectedElement = listWrapper.querySelector(`.${COMPONENT_NAME$5}__ListItem--selected`);
30175
+ const selectedElement = listWrapper.querySelector(`.${COMPONENT_NAME$6}__ListItem--selected`);
30176
30176
  if (selectedElement) {
30177
30177
  const { top } = selectedElement.getBoundingClientRect();
30178
30178
  const { top: listWrapperTop } = listWrapper.getBoundingClientRect();
@@ -30194,16 +30194,16 @@ const List = ({ items, selected, onChange }) => {
30194
30194
  const renderItem = (item, index) => {
30195
30195
  const { label, value } = item;
30196
30196
  const isSelected = Boolean(selected !== null && selected !== undefined && selected === value);
30197
- const className = cssClassName(`${COMPONENT_NAME$5}__ListItem`, isSelected && 'selected');
30197
+ const className = cssClassName(`${COMPONENT_NAME$6}__ListItem`, isSelected && 'selected');
30198
30198
  const handleClick = () => handleChange(value);
30199
- return (jsx("li", Object.assign({ className: className, onClick: handleClick }, { children: label }), `${COMPONENT_NAME$5}__ListItem-${index}`));
30199
+ return (jsx("li", Object.assign({ className: className, onClick: handleClick }, { children: label }), `${COMPONENT_NAME$6}__ListItem-${index}`));
30200
30200
  };
30201
30201
  const itemsMarkup = items ? items.map(renderItem) : null;
30202
- const className = cssClassName(COMPONENT_NAME$5);
30202
+ const className = cssClassName(COMPONENT_NAME$6);
30203
30203
  return (jsx("div", Object.assign({ className: className, ref: listWrapperRef }, { children: jsx("ul", { children: itemsMarkup }, void 0) }), void 0));
30204
30204
  };
30205
30205
 
30206
- const COMPONENT_NAME$4 = 'AlphaMultiSelectionPicker__Picker';
30206
+ const COMPONENT_NAME$5 = 'AlphaMultiSelectionPicker__Picker';
30207
30207
  const Picker = ({ headers, items, onChange, selected, theme: ThemeProp, }) => {
30208
30208
  const { theme: themeValue } = useTheme();
30209
30209
  const theme = ThemeProp || themeValue;
@@ -30217,14 +30217,14 @@ const Picker = ({ headers, items, onChange, selected, theme: ThemeProp, }) => {
30217
30217
  onChange(selectedValues);
30218
30218
  }
30219
30219
  };
30220
- const renderHeader = (header, index) => (jsx("span", Object.assign({ className: `${COMPONENT_NAME$4}__HeaderItem` }, { children: capitalize(header) }), `${COMPONENT_NAME$4}__HeaderItem-${index}`));
30221
- const headersMarkup = headers ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$4}__HeadersMarkup` }, { children: headers.map(renderHeader) }), void 0)) : null;
30220
+ const renderHeader = (header, index) => (jsx("span", Object.assign({ className: `${COMPONENT_NAME$5}__HeaderItem` }, { children: capitalize(header) }), `${COMPONENT_NAME$5}__HeaderItem-${index}`));
30221
+ const headersMarkup = headers ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$5}__HeadersMarkup` }, { children: headers.map(renderHeader) }), void 0)) : null;
30222
30222
  const renderList = (listItems, index) => {
30223
30223
  const selectedValue = selected ? selected[index] : undefined;
30224
- return (jsx(List, { items: listItems, onChange: (value) => handleChange(value, index), selected: selectedValue }, `${COMPONENT_NAME$4}__List-${index}`));
30224
+ return (jsx(List, { items: listItems, onChange: (value) => handleChange(value, index), selected: selectedValue }, `${COMPONENT_NAME$5}__List-${index}`));
30225
30225
  };
30226
- const itemsListsMarkup = items ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$4}__ItemsListWrapper` }, { children: items.map(renderList) }), void 0)) : null;
30227
- const className = cssClassName(COMPONENT_NAME$4, theme);
30226
+ const itemsListsMarkup = items ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$5}__ItemsListWrapper` }, { children: items.map(renderList) }), void 0)) : null;
30227
+ const className = cssClassName(COMPONENT_NAME$5, theme);
30228
30228
  return (jsxs("div", Object.assign({ className: className }, { children: [headersMarkup, itemsListsMarkup] }), void 0));
30229
30229
  };
30230
30230
 
@@ -30246,7 +30246,7 @@ const AlphaMultiSelectionPicker = ({ items, onChange, theme, }) => {
30246
30246
  return jsx("div", { children: pickerMarkup }, void 0);
30247
30247
  };
30248
30248
 
30249
- const COMPONENT_NAME$3 = 'TimeSelector';
30249
+ const COMPONENT_NAME$4 = 'TimeSelector';
30250
30250
  const TimeSelector = ({ plurals, singulars, value, disabled, error, helpText, label, onChange, readOnly, placeholderValues, minMaxYears, minMaxMonths, minMaxDays, minMaxHours, minMaxMinutes, minMaxSeconds, theme: themeProp, isRequired, }) => {
30251
30251
  const { theme: themeValue } = useTheme();
30252
30252
  const theme = themeProp || themeValue;
@@ -30360,15 +30360,15 @@ const TimeSelector = ({ plurals, singulars, value, disabled, error, helpText, la
30360
30360
  let min;
30361
30361
  if (valuesMaxMin)
30362
30362
  [min, max] = valuesMaxMin;
30363
- return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$3}__InnerField` }, { children: [jsx("input", { type: 'number', value: elValue, placeholder: placeholderValue, onFocus: handleFocusField, onBlur: handleBlurField, disabled: disabled, onChange: handleInputChange, name: field, min: min, max: max }, void 0), jsxs("span", { children: [label, separator] }, void 0)] }), index));
30363
+ return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$4}__InnerField` }, { children: [jsx("input", { type: 'number', value: elValue, placeholder: placeholderValue, onFocus: handleFocusField, onBlur: handleBlurField, disabled: disabled, onChange: handleInputChange, name: field, min: min, max: max }, void 0), jsxs("span", { children: [label, separator] }, void 0)] }), index));
30364
30364
  };
30365
30365
  const fieldsMarkup = Object.keys(singulars).map(renderField);
30366
- const fieldClass = cssClassName(`${COMPONENT_NAME$3}__Field`, (isFocused || isActive) && 'isFocused');
30367
- const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__LabelWrapper` }, { children: jsx(AlphaLabel, Object.assign({ isRequired: isRequired }, { children: label }), void 0) }), void 0)) : null;
30366
+ const fieldClass = cssClassName(`${COMPONENT_NAME$4}__Field`, (isFocused || isActive) && 'isFocused');
30367
+ const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$4}__LabelWrapper` }, { children: jsx(AlphaLabel, Object.assign({ isRequired: isRequired }, { children: label }), void 0) }), void 0)) : null;
30368
30368
  const helpTextMarkup = helpText
30369
- ? helpText && (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__HelpTextWrapper` }, { children: helpText }), void 0))
30369
+ ? helpText && (jsx("div", Object.assign({ className: `${COMPONENT_NAME$4}__HelpTextWrapper` }, { children: helpText }), void 0))
30370
30370
  : null;
30371
- const fieldMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__FieldWrapper` }, { children: jsxs(AlphaTooltip, Object.assign({ content: error, appearance: 'error', persistence: true, isActive: hasError }, { children: [labelMarkup, jsx("div", Object.assign({ className: fieldClass, onClick: handleFieldClick, ref: fieldRef }, { children: fieldsMarkup }), void 0)] }), void 0) }), void 0));
30371
+ const fieldMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$4}__FieldWrapper` }, { children: jsxs(AlphaTooltip, Object.assign({ content: error, appearance: 'error', persistence: true, isActive: hasError }, { children: [labelMarkup, jsx("div", Object.assign({ className: fieldClass, onClick: handleFieldClick, ref: fieldRef }, { children: fieldsMarkup }), void 0)] }), void 0) }), void 0));
30372
30372
  const timePickerMarkup = (jsx(AlphaMultiSelectionPicker, { items: items, onChange: handleTimePickerChange, theme: themeProp }, void 0));
30373
30373
  const popoverMarkup = (jsx(Popover$1, Object.assign({ activator: fieldMarkup, isActive: isActive, isFullWidth: true, onClose: handleClosePopover }, { children: timePickerMarkup }), void 0));
30374
30374
  useEffect(() => {
@@ -30377,7 +30377,7 @@ const TimeSelector = ({ plurals, singulars, value, disabled, error, helpText, la
30377
30377
  useEffect(() => {
30378
30378
  setItems(getItemsMultiSelectionPicker());
30379
30379
  }, [value]);
30380
- const className = cssClassName(COMPONENT_NAME$3, theme, !value && 'isEmpty');
30380
+ const className = cssClassName(COMPONENT_NAME$4, theme, !value && 'isEmpty');
30381
30381
  return (jsxs("div", Object.assign({ className: className }, { children: [popoverMarkup, helpTextMarkup] }), void 0));
30382
30382
  };
30383
30383
  function getTimeValue(value) {
@@ -30386,15 +30386,15 @@ function getTimeValue(value) {
30386
30386
  return value < 10 ? `0${value}` : `${value}`;
30387
30387
  }
30388
30388
 
30389
- const COMPONENT_NAME$2 = 'FilterField';
30389
+ const COMPONENT_NAME$3 = 'FilterField';
30390
30390
  const FilterField = ({ label, isRequired = false, field, onRemove, name, }) => {
30391
- const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__LabelWrapper` }, { children: label }), void 0)) : null;
30392
- const filterFieldMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__FieldWrapper`, id: name }, { children: field }), void 0));
30393
- const removeButtonMarkup = onRemove && !isRequired ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__RemoveButtonWrapper` }, { children: jsx("button", Object.assign({ type: 'button', className: `${COMPONENT_NAME$2}__RemoveButton`, onClick: onRemove }, { children: jsx(Icon, { name: 'X' }, void 0) }), void 0) }), void 0)) : null;
30394
- return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$2}` }, { children: [labelMarkup, filterFieldMarkup, removeButtonMarkup] }), void 0));
30391
+ const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__LabelWrapper` }, { children: label }), void 0)) : null;
30392
+ const filterFieldMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__FieldWrapper`, id: name }, { children: field }), void 0));
30393
+ const removeButtonMarkup = onRemove && !isRequired ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__RemoveButtonWrapper` }, { children: jsx("button", Object.assign({ type: 'button', className: `${COMPONENT_NAME$3}__RemoveButton`, onClick: onRemove }, { children: jsx(Icon, { name: 'X' }, void 0) }), void 0) }), void 0)) : null;
30394
+ return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$3}` }, { children: [labelMarkup, filterFieldMarkup, removeButtonMarkup] }), void 0));
30395
30395
  };
30396
30396
 
30397
- const COMPONENT_NAME$1 = 'Filters';
30397
+ const COMPONENT_NAME$2 = 'Filters';
30398
30398
  const Filters = ({ ariaLabel, filters = [], onApplyFilters, onRemoveFilter, appliedFilters, onCleanFilters, onAddFilter, addFilterButtonIcon, addFilterButtonLabel, clearButtonLabel, searchButtonLabel, extraActions, selectedFilters = [], }) => {
30399
30399
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
30400
30400
  const mainContainerRef = useRef(null);
@@ -30418,8 +30418,8 @@ const Filters = ({ ariaLabel, filters = [], onApplyFilters, onRemoveFilter, appl
30418
30418
  const extraActionsMarkup = extraActions
30419
30419
  ? extraActions.map((extraAction, index) => (createElement(AlphaButton, Object.assign({}, extraAction, { key: `extra-action-${index}` }), extraAction.label)))
30420
30420
  : null;
30421
- const secondaryActionsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$1}__SecondaryActionsWrapper` }, { children: availableFiltersPopoverMarkup }), void 0));
30422
- const mainActionsMarkup = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$1}__MainActionsWrapper` }, { children: [extraActionsMarkup, jsx(AlphaButton, Object.assign({ ariaLabel: `${ariaLabel}-cleanFilters`, onClick: onCleanFilters, isDisabled: !appliedFilters.length && !selectedFilters.length }, { children: clearButtonLabel }), void 0), jsx(AlphaButton, Object.assign({ ariaLabel: `${ariaLabel}-searchFilters`, isDisabled: !appliedFilters.length && !selectedFilters.length, isPrimary: true, onClick: onApplyFilters }, { children: searchButtonLabel }), void 0)] }), void 0));
30421
+ const secondaryActionsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__SecondaryActionsWrapper` }, { children: availableFiltersPopoverMarkup }), void 0));
30422
+ const mainActionsMarkup = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$2}__MainActionsWrapper` }, { children: [extraActionsMarkup, jsx(AlphaButton, Object.assign({ ariaLabel: `${ariaLabel}-cleanFilters`, onClick: onCleanFilters, isDisabled: !appliedFilters.length && !selectedFilters.length }, { children: clearButtonLabel }), void 0), jsx(AlphaButton, Object.assign({ ariaLabel: `${ariaLabel}-searchFilters`, isDisabled: !appliedFilters.length && !selectedFilters.length, isPrimary: true, onClick: onApplyFilters }, { children: searchButtonLabel }), void 0)] }), void 0));
30423
30423
  const handleRemoveFilter = (filter) => {
30424
30424
  onRemoveFilter === null || onRemoveFilter === void 0 ? void 0 : onRemoveFilter(filter);
30425
30425
  };
@@ -30430,17 +30430,17 @@ const Filters = ({ ariaLabel, filters = [], onApplyFilters, onRemoveFilter, appl
30430
30430
  const handleRemove = () => {
30431
30431
  handleRemoveFilter(filter);
30432
30432
  };
30433
- return (jsx("div", Object.assign({ className: `${COMPONENT_NAME$1}__SelectedFilter` }, { children: jsx(FilterField, { label: foundFilter.label, field: foundFilter.filter, isRequired: foundFilter.isRequired, onRemove: handleRemove, name: filter }, void 0) }), index));
30433
+ return (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__SelectedFilter` }, { children: jsx(FilterField, { label: foundFilter.label, field: foundFilter.filter, isRequired: foundFilter.isRequired, onRemove: handleRemove, name: filter }, void 0) }), index));
30434
30434
  };
30435
- const selectedFiltersMarkup = selectedFilters.length ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$1}__SelectedFiltersWrapper` }, { children: selectedFilters.map(renderSelectedFilter) }), void 0)) : null;
30436
- const actionsContainerMarkup = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$1}__ActionsWrapper` }, { children: [secondaryActionsMarkup, mainActionsMarkup] }), void 0));
30437
- return (jsxs("div", Object.assign({ className: COMPONENT_NAME$1, ref: mainContainerRef }, { children: [selectedFiltersMarkup, actionsContainerMarkup] }), void 0));
30435
+ const selectedFiltersMarkup = selectedFilters.length ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__SelectedFiltersWrapper` }, { children: selectedFilters.map(renderSelectedFilter) }), void 0)) : null;
30436
+ const actionsContainerMarkup = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$2}__ActionsWrapper` }, { children: [secondaryActionsMarkup, mainActionsMarkup] }), void 0));
30437
+ return (jsxs("div", Object.assign({ className: COMPONENT_NAME$2, ref: mainContainerRef }, { children: [selectedFiltersMarkup, actionsContainerMarkup] }), void 0));
30438
30438
  };
30439
30439
 
30440
- const COMPONENT_NAME = 'Link';
30440
+ const COMPONENT_NAME$1 = 'Link';
30441
30441
  const Link = ({ children, className: classNameProp, component, to, target, }) => {
30442
30442
  const Component = component;
30443
- const className = cssClassName(COMPONENT_NAME, classNameProp);
30443
+ const className = cssClassName(COMPONENT_NAME$1, classNameProp);
30444
30444
  return (jsx(Component, Object.assign({ className: className, to: to, target: target }, { children: children }), void 0));
30445
30445
  };
30446
30446
 
@@ -30476,6 +30476,47 @@ const AlphaGraphicCard = ({ data }) => {
30476
30476
  return jsx("div", Object.assign({ className: MAIN_CLASS }, { children: data.map(renderContainer) }), void 0);
30477
30477
  };
30478
30478
 
30479
+ const COMPONENT_NAME = 'AlphaZipCodeInput';
30480
+ const AlphaZipCodeInput = ({ label, isRequired, items, onBlur, onFocus, onChange, value, labelEmpty, }) => {
30481
+ const [isFocusActive, setIsFocusActive] = useState(false);
30482
+ const [showPopover, setShowPopover] = useState(false);
30483
+ const handleOnBlur = () => {
30484
+ setIsFocusActive(false);
30485
+ if (onBlur)
30486
+ onBlur();
30487
+ };
30488
+ const handleOnFocus = () => {
30489
+ setIsFocusActive(true);
30490
+ setShowPopover(Boolean(value && (value === null || value === void 0 ? void 0 : value.length) > 2));
30491
+ if (onFocus)
30492
+ onFocus();
30493
+ };
30494
+ const handleOnChange = (event) => {
30495
+ const isValid = /^[0-9]+$/i.test(event.target.value) || event.target.value === '';
30496
+ if (isValid && onChange) {
30497
+ setShowPopover(event.target.value.length > 2);
30498
+ onChange(event.target.value);
30499
+ }
30500
+ };
30501
+ const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME}__LabelWrapper` }, { children: jsxs("label", Object.assign({ className: `${COMPONENT_NAME}__Label` }, { children: [label, isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME}__Label--isRequired` }, { children: "*" }), void 0)) : null] }), void 0) }), void 0)) : null;
30502
+ const classesInput = cssClassName(`${COMPONENT_NAME}__InputWrapper`, isFocusActive && 'isFocus');
30503
+ const inputMarkup = (jsx("div", Object.assign({ className: classesInput }, { children: jsx("input", { className: `${COMPONENT_NAME}__InputWrapper--input`, onBlur: handleOnBlur, onFocus: handleOnFocus, onChange: handleOnChange, maxLength: 5, value: value }, void 0) }), void 0));
30504
+ const handleOnSelectItem = (item) => {
30505
+ if (onChange)
30506
+ onChange(item[0]);
30507
+ setShowPopover(false);
30508
+ };
30509
+ const renderLabelItem = (item) => (jsxs("div", Object.assign({ className: `${COMPONENT_NAME}__ItemWrapper` }, { children: [jsx("div", Object.assign({ className: `${COMPONENT_NAME}__Item__Value` }, { children: item.cp }), void 0), jsxs("div", Object.assign({ className: `${COMPONENT_NAME}__Item__Description` }, { children: [item.municipality, ", ", item.city, ", ", item.state] }), void 0)] }), void 0));
30510
+ const itemsOptions = items.map((item) => ({
30511
+ label: renderLabelItem(item),
30512
+ value: item.cp,
30513
+ }));
30514
+ const optionListMarkup = items.length > 0 ? (jsx(OptionList, { items: itemsOptions, selected: [''], onChange: handleOnSelectItem }, void 0)) : null;
30515
+ const emptyItemsMarkup = items.length === 0 ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME}__EmptyItems` }, { children: labelEmpty }), void 0)) : null;
30516
+ const popoverMarkup = useMemo(() => (jsx(Popover$1, Object.assign({ activator: inputMarkup, isActive: showPopover, isFullWidth: true, onClose: () => setShowPopover(false), isFixed: true }, { children: jsxs(Popover$1.Pane, { children: [optionListMarkup, emptyItemsMarkup] }, void 0) }), void 0)), [items, value, showPopover]);
30517
+ return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME}__Wrapper` }, { children: [labelMarkup, popoverMarkup] }), void 0));
30518
+ };
30519
+
30479
30520
  const MAINCLASS = 'SegmentedControl';
30480
30521
  const AlphaSegmentedControl = ({ children, title, segments, selected, onSelected, }) => {
30481
30522
  const renderSegment = (segment, index) => {
@@ -30488,5 +30529,5 @@ const AlphaSegmentedControl = ({ children, title, segments, selected, onSelected
30488
30529
  return (jsxs("div", Object.assign({ className: `${MAINCLASS}__Container` }, { children: [headerMarkup, contentMarkup] }), void 0));
30489
30530
  };
30490
30531
 
30491
- export { ActionList, Alert, AlertProvider, AlphaAttributeInput, AlphaBadge, AlphaButton, AlphaChip, AlphaFilterControl, AlphaGraphicCard, AlphaIcon, AlphaInlineError, AlphaInputDate, InputTag$1 as AlphaInputTag, AlphaInputText, AlphaLabel, AlphaLabelledField, AlphaMultiSelectionPicker, AlphaSegmentedControl, AlphaSpinner, AlphaStepper, AlphaTag, AlphaTile, AlphaTooltip, Totalizer as AlphaTotalizer, AnnotatedSection, Avatar, Badge, Banner, Button, CalendarPicker, Card, Checkbox, ChoiceList, Collapsible, Connector, Container, Cover, DataTable, DatePicker, DeletableSection, Divider, DynamicForm, EmptyState, ErrorIcon, FileDownloader, Filedrop, FilterControl, Filters, Footer, Form, FormField, FormLayout, Frame, Grid, GridItem, Header$1 as Header, Icon, IconButton, IndexList, InlineEdit, InputPhoneNumber, InputTag, InputText, JsonViewer, Label, Link, ListInfo, Loader, Logo, Media, Modal, ModalHeader, Nip, OptionList, Page, PageActions, Pagination, Pane, Panel, PanelFooter, PanelHeader, PendingIcon, Popover$1 as Popover, Progress, RadioButton, SectionForm, Select, SideMenu, SkeletonInput, SkeletonMedia, SkeletonTabs, SkeletonText, SkeletonTitle, SortableList, Spinner, Stack, StepDefault, SuccessIcon, Table, Tabs, Tag, ThemeProvider, ThreadItem, Thumbnail, Tile, TimeSelector, Title, Toggle, Tooltip, WarningIcon, capitalize, cssClassName, formatDate, isComponentTypeOf, isValidIcon, themeClassConverter, useShowAlert, useTheme };
30532
+ export { ActionList, Alert, AlertProvider, AlphaAttributeInput, AlphaBadge, AlphaButton, AlphaChip, AlphaFilterControl, AlphaGraphicCard, AlphaIcon, AlphaInlineError, AlphaInputDate, InputTag$1 as AlphaInputTag, AlphaInputText, AlphaLabel, AlphaLabelledField, AlphaMultiSelectionPicker, AlphaSegmentedControl, AlphaSpinner, AlphaStepper, AlphaTag, AlphaTile, AlphaTooltip, Totalizer as AlphaTotalizer, AlphaZipCodeInput, AnnotatedSection, Avatar, Badge, Banner, Button, CalendarPicker, Card, Checkbox, ChoiceList, Collapsible, Connector, Container, Cover, DataTable, DatePicker, DeletableSection, Divider, DynamicForm, EmptyState, ErrorIcon, FileDownloader, Filedrop, FilterControl, Filters, Footer, Form, FormField, FormLayout, Frame, Grid, GridItem, Header$1 as Header, Icon, IconButton, IndexList, InlineEdit, InputPhoneNumber, InputTag, InputText, JsonViewer, Label, Link, ListInfo, Loader, Logo, Media, Modal, ModalHeader, Nip, OptionList, Page, PageActions, Pagination, Pane, Panel, PanelFooter, PanelHeader, PendingIcon, Popover$1 as Popover, Progress, RadioButton, SectionForm, Select, SideMenu, SkeletonInput, SkeletonMedia, SkeletonTabs, SkeletonText, SkeletonTitle, SortableList, Spinner, Stack, StepDefault, SuccessIcon, Table, Tabs, Tag, ThemeProvider, ThreadItem, Thumbnail, Tile, TimeSelector, Title, Toggle, Tooltip, WarningIcon, capitalize, cssClassName, formatDate, isComponentTypeOf, isValidIcon, themeClassConverter, useShowAlert, useTheme };
30492
30533
  //# sourceMappingURL=index.js.map