@kaizen/components 0.0.0-canary-fix-select-futureselect-focus-jumping-20241003232256 → 0.0.0-canary-tsx-codemod-20241029235345

package/dist/cjs/TitleBlockZen/subcomponents/MobileActions.cjs

@@ -4,9 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var reactFocusOn = require('react-focus-on');
-require('../../Icon/subcomponents/SVG/SVG.cjs');
-var ChevronDownIcon = require('../../Icon/ChevronDownIcon.cjs');
-var ChevronUpIcon = require('../../Icon/ChevronUpIcon.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 var constants = require('../constants.cjs');
 var utils = require('../utils.cjs');
 var TitleBlockMenuItem = require('./TitleBlockMenuItem.cjs');
@@ -200,10 +198,9 @@ var DrawerHandle = function (_a) {
         "aria-expanded": isOpen
       }, primaryAction.label, React__default.default.createElement("span", {
         className: MobileActions_module.mobileActionsChevronSquare
-      }, isOpen ? React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-        role: "presentation"
-      }) : React__default.default.createElement(ChevronUpIcon.ChevronUpIcon, {
-        role: "presentation"
+      }, React__default.default.createElement(Icon.Icon, {
+        name: isOpen ? "keyboard_arrow_down" : "keyboard_arrow_up",
+        isPresentational: true
       }))));
     }
     // If the primary action is a button, or has no onClick/href/action
@@ -221,10 +218,9 @@ var DrawerHandle = function (_a) {
       "aria-expanded": isOpen,
       id: constants.TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID,
       "aria-label": "Other actions"
-    }, isOpen ? React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-      role: "presentation"
-    }) : React__default.default.createElement(ChevronUpIcon.ChevronUpIcon, {
-      role: "presentation"
+    }, React__default.default.createElement(Icon.Icon, {
+      name: isOpen ? "keyboard_arrow_down" : "keyboard_arrow_up",
+      isPresentational: true
     })));
   }
   // if there are default/secondary actions but no primary action
@@ -240,10 +236,9 @@ var DrawerHandle = function (_a) {
       id: constants.TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID
     }, renderDrawerHandleLabel("Other actions"), React__default.default.createElement("span", {
       className: MobileActions_module.mobileActionsChevronSquare
-    }, isOpen ? React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-      role: "presentation"
-    }) : React__default.default.createElement(ChevronUpIcon.ChevronUpIcon, {
-      role: "presentation"
+    }, React__default.default.createElement(Icon.Icon, {
+      name: isOpen ? "keyboard_arrow_down" : "keyboard_arrow_up",
+      isPresentational: true
     }))));
   }
   return null;

package/dist/cjs/TitleBlockZen/subcomponents/SecondaryActions.cjs

@@ -2,9 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
-require('../../Icon/subcomponents/SVG/SVG.cjs');
-var ChevronDownIcon = require('../../Icon/ChevronDownIcon.cjs');
-var MeatballsIcon = require('../../Icon/MeatballsIcon.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 var TitleBlockZen_module = require('../TitleBlockZen.module.scss.cjs');
 var constants = require('../constants.cjs');
 var TitleBlockMenuItem = require('./TitleBlockMenuItem.cjs');
@@ -26,8 +24,9 @@ var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed
     button: React__default.default.createElement(IconButton.IconButton, {
       label: "Open secondary menu",
       reversed: reversed,
-      icon: React__default.default.createElement(MeatballsIcon.MeatballsIcon, {
-        role: "presentation"
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "more_horiz",
+        isPresentational: true
       }),
       id: constants.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID
     })
@@ -57,8 +56,9 @@ var SecondaryActions = function (_a) {
             secondary: true,
             label: action.label,
             reversed: reversed,
-            icon: React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-              role: "presentation"
+            icon: React__default.default.createElement(Icon.Icon, {
+              name: "keyboard_arrow_down",
+              isPresentational: true
             }),
             iconPosition: "end"
           })

package/dist/cjs/ToggleSwitch/ToggleSwitch/ToggleSwitch.cjs

@@ -3,8 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-require('../../Icon/subcomponents/SVG/SVG.cjs');
-var CheckIcon = require('../../Icon/CheckIcon.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 var ToggleSwitch_module = require('./ToggleSwitch.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -30,9 +29,10 @@ var ToggleSwitch = function (_a) {
     className: ToggleSwitch_module.track
   }, React__default.default.createElement("span", {
     className: ToggleSwitch_module.thumb
-  }, React__default.default.createElement(CheckIcon.CheckIcon, {
-    classNameOverride: ToggleSwitch_module.checkIcon,
-    role: "presentation"
+  }, React__default.default.createElement(Icon.Icon, {
+    name: "check",
+    isPresentational: true,
+    className: ToggleSwitch_module.checkIcon
   }))));
 };
 ToggleSwitch.displayName = "ToggleSwitch";

package/dist/cjs/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.cjs

@@ -3,11 +3,8 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-require('../../../../../Icon/subcomponents/SVG/SVG.cjs');
-var IndicatorActiveIcon = require('../../../../../Icon/IndicatorActiveIcon.cjs');
-var IndicatorInactiveIcon = require('../../../../../Icon/IndicatorInactiveIcon.cjs');
-var SuccessIcon = require('../../../../../Icon/SuccessIcon.cjs');
 var VisuallyHidden = require('../../../../../VisuallyHidden/VisuallyHidden.cjs');
+var Icon = require('../../../../../__future__/Icon/Icon.cjs');
 var ProgressStepper_module = require('./ProgressStepper.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -19,32 +16,30 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var getStepStatus = function (isComplete, isCurrentStep, step, index) {
   if (isComplete) {
     return {
-      icon: React__default.default.createElement(SuccessIcon.SuccessIcon, {
+      icon: React__default.default.createElement(Icon.Icon, {
         key: index,
-        inheritSize: true,
-        role: "presentation",
-        classNameOverride: "success"
+        name: "check_circle",
+        isPresentational: true,
+        isFilled: true
       }),
       accessibleName: "Completed: ".concat(step.label)
     };
   }
   if (isCurrentStep) {
     return {
-      icon: React__default.default.createElement(IndicatorActiveIcon.IndicatorActiveIcon, {
+      icon: React__default.default.createElement(Icon.Icon, {
         key: index,
-        inheritSize: true,
-        role: "presentation",
-        classNameOverride: "active"
+        name: "radio_button_checked",
+        isPresentational: true
       }),
       accessibleName: "Current: ".concat(step.label)
     };
   }
   return {
-    icon: React__default.default.createElement(IndicatorInactiveIcon.IndicatorInactiveIcon, {
+    icon: React__default.default.createElement(Icon.Icon, {
       key: index,
-      inheritSize: true,
-      classNameOverride: "incomplete",
-      role: "presentation"
+      name: "radio_button_unchecked",
+      isPresentational: true
     }),
     accessibleName: "Not started: ".concat(step.label)
   };
@@ -70,7 +65,7 @@ var ProgressStepper = function (_a) {
     var isCompletedStep = index < currentStepIndex || isComplete;
     var _c = getStepStatus(isCompletedStep, isCurrentStep, step, index),
       accessibleName = _c.accessibleName,
-      Icon = _c.icon;
+      icon = _c.icon;
     return React__default.default.createElement("li", {
       className: ProgressStepper_module.step,
       key: "".concat(step.id),
@@ -84,7 +79,7 @@ var ProgressStepper = function (_a) {
       className: ProgressStepper_module.stepIndicator
     }, React__default.default.createElement("span", {
       className: classnames__default.default(ProgressStepper_module.stepIcon, (_b = {}, _b[ProgressStepper_module.isCompleted] = isCompletedStep, _b))
-    }, Icon)), index < steps.length - 1 && React__default.default.createElement("div", {
+    }, icon)), index < steps.length - 1 && React__default.default.createElement("div", {
       className: classnames__default.default([ProgressStepper_module.stepDivider, isCompletedStep && ProgressStepper_module.completedStep])
     })));
   })), React__default.default.createElement("span", {

package/dist/cjs/__future__/Icon/Icon.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var constants = require('./constants.cjs');
+var Icon_module = require('./Icon.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var MaterialIcon = function (_a) {
+  var children = _a.children,
+    isFilled = _a.isFilled,
+    isPresentational = _a.isPresentational,
+    alt = _a.alt,
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "isFilled", "isPresentational", "alt", "className"]);
+  return React__default.default.createElement("span", tslib.__assign({
+    className: classnames__default.default("material-symbols-outlined", Icon_module.icon, isFilled && Icon_module.filled, className),
+    "aria-hidden": isPresentational,
+    role: isPresentational ? undefined : "img",
+    "aria-label": alt
+  }, restProps), children);
+};
+var Icon = function (_a) {
+  var name = _a.name,
+    shouldMirrorInRTL = _a.shouldMirrorInRTL,
+    restProps = tslib.__rest(_a, ["name", "shouldMirrorInRTL"]);
+  if (!shouldMirrorInRTL) {
+    return React__default.default.createElement(MaterialIcon, tslib.__assign({}, restProps), name);
+  }
+  if (Object.keys(constants.handledRtlIcons).includes(name)) {
+    return React__default.default.createElement(MaterialIcon, tslib.__assign({}, restProps), React__default.default.createElement("span", {
+      className: Icon_module.iconLTR
+    }, name), React__default.default.createElement("span", {
+      className: Icon_module.iconRTL
+    }, constants.handledRtlIcons[name]));
+  }
+  return React__default.default.createElement(MaterialIcon, tslib.__assign({}, restProps, {
+    className: classnames__default.default(Icon_module.shouldMirrorInRTL, restProps.className)
+  }), name);
+};
+exports.Icon = Icon;

package/dist/cjs/__future__/Icon/Icon.module.css.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var styles = {
+  "icon": "Icon-module_icon__CkmHY",
+  "filled": "Icon-module_filled__-VArQ",
+  "shouldMirrorInRTL": "Icon-module_shouldMirrorInRTL__kxncF",
+  "iconLTR": "Icon-module_iconLTR__b3GoB",
+  "iconRTL": "Icon-module_iconRTL__lpVw5"
+};
+module.exports = styles;

package/dist/cjs/__future__/Icon/constants.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+/* eslint-disable camelcase */
+var handledRtlIcons = {
+  checklist: "checklist_rtl",
+  format_list_numbered: "format_list_numbered_rtl"
+};
+exports.handledRtlIcons = handledRtlIcons;

package/dist/cjs/__future__/Select/subcomponents/ListBox/ListBox.cjs

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var listbox = require('@react-aria/listbox');
 var classnames = require('classnames');
-var useIsClientReady = require('../../../../__utilities__/isClientReady/useIsClientReady.cjs');
+var useIsClientReady = require('../../../../__utilities__/useIsClientReady/useIsClientReady.cjs');
 var SelectContext = require('../../context/SelectContext.cjs');
 var ListBox_module = require('./ListBox.module.scss.cjs');
 function _interopDefault(e) {
@@ -34,7 +34,7 @@ var safeQuerySelector = function (selector) {
     return document.querySelector(selector);
   } catch (error) {
     // eslint-disable-next-line no-console
-    console.error("QuerySelector failed:", error);
+    console.error("Kaizen querySelector failed:", error);
     return null;
   }
 };
@@ -48,7 +48,7 @@ var ListBox = function (_a) {
   var ref = React.useRef(null);
   var listBoxProps = listbox.useListBox(tslib.__assign(tslib.__assign({}, menuProps), {
     disallowEmptySelection: true,
-    // This is to ensure that the listbox use React Aria's auto focus feature for Listbox, which creates a visual bug
+    // This is to ensure that the listbox doesn't use React Aria's auto focus feature for Listbox, which creates a visual bug
     autoFocus: false
   }), state, ref).listBoxProps;
   /**
@@ -67,13 +67,10 @@ var ListBox = function (_a) {
       }
     }
   }, [isClientReady]);
-  return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    React__default.default.createElement("ul", tslib.__assign({
-      ref: ref,
-      className: classnames__default.default(ListBox_module.listBox, classNameOverride)
-    }, listBoxProps, restProps), children)
-  );
+  return React__default.default.createElement("ul", tslib.__assign({
+    ref: ref,
+    className: classnames__default.default(ListBox_module.listBox, classNameOverride)
+  }, listBoxProps, restProps), children);
 };
 ListBox.displayName = "ListBox";
 exports.ListBox = ListBox;

package/dist/cjs/__future__/Select/subcomponents/Option/Option.cjs

@@ -4,8 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var reactAria = require('react-aria');
-require('../../../../Icon/subcomponents/SVG/SVG.cjs');
-var CheckIcon = require('../../../../Icon/CheckIcon.cjs');
+var Icon = require('../../../Icon/Icon.cjs');
 var SelectContext = require('../../context/SelectContext.cjs');
 var Option_module = require('./Option.module.scss.cjs');
 function _interopDefault(e) {
@@ -50,9 +49,9 @@ var Option = function (_a) {
     "aria-label": item.textValue
   }), item.rendered, React__default.default.createElement("span", {
     className: classnames__default.default(Option_module.icon, isSelected && Option_module.isSelected)
-  }, isSelected && React__default.default.createElement(CheckIcon.CheckIcon, {
-    inheritSize: true,
-    role: "presentation"
+  }, isSelected && React__default.default.createElement(Icon.Icon, {
+    name: "check",
+    isPresentational: true
   })));
 };
 Option.displayName = "Option";

package/dist/cjs/__future__/Select/subcomponents/SelectToggle/SelectToggle.cjs

@@ -3,10 +3,8 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-require('../../../../Icon/subcomponents/SVG/SVG.cjs');
-var ChevronDownIcon = require('../../../../Icon/ChevronDownIcon.cjs');
-var ChevronUpIcon = require('../../../../Icon/ChevronUpIcon.cjs');
 var Label = require('../../../../Label/Label.cjs');
+var Icon = require('../../../Icon/Icon.cjs');
 var SelectToggle_module = require('./SelectToggle.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -41,12 +39,10 @@ var SelectToggle = React__default.default.forwardRef(function (_a, ref) {
     className: classnames__default.default(SelectToggle_module.selectToggle, (value === null || value === undefined) && SelectToggle_module.placeholder, status === "error" && SelectToggle_module.error, status === "caution" && SelectToggle_module.caution, isDisabled && SelectToggle_module.disabled, isReversed && SelectToggle_module.reversed, classNameOverride)
   }), React__default.default.createElement("span", tslib.__assign({}, valueProps, {
     className: SelectToggle_module.value
-  }), value !== null && value !== void 0 ? value : placeholder), isOpen ? React__default.default.createElement(ChevronUpIcon.ChevronUpIcon, {
-    role: "presentation",
-    classNameOverride: SelectToggle_module.icon
-  }) : React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-    role: "presentation",
-    classNameOverride: SelectToggle_module.icon
+  }), value !== null && value !== void 0 ? value : placeholder), React__default.default.createElement(Icon.Icon, {
+    name: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+    isPresentational: true,
+    className: SelectToggle_module.icon
   })));
 });
 SelectToggle.displayName = "SelectToggle";

package/dist/cjs/__future__/Tabs/Tabs.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929117/Tabs Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-tabs--controlled Storybook}
+ *
+ * Wrapper around all of the tab subcomponents
+ * Holds a TabList and TabPanels
+ */
+var Tabs = function (props) {
+  return React__default.default.createElement(reactAriaComponents.Tabs, tslib.__assign({}, props));
+};
+exports.Tabs = Tabs;

package/dist/cjs/__future__/Tabs/subcomponents/Tab/Tab.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var reactAriaComponents = require('react-aria-components');
+var Badge = require('../../../../Badge/Badge.cjs');
+var Tab_module = require('./Tab.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * A tab button
+ */
+var Tab = function (props) {
+  var badge = props.badge,
+    children = props.children,
+    className = props.className,
+    restProps = tslib.__rest(props, ["badge", "children", "className"]);
+  var tabProps = tslib.__assign({
+    className: classnames__default.default(Tab_module.tab, className)
+  }, restProps);
+  return React__default.default.createElement(reactAriaComponents.Tab, tslib.__assign({}, tabProps), function (_a) {
+    var isSelected = _a.isSelected,
+      isFocusVisible = _a.isFocusVisible,
+      isHovered = _a.isHovered;
+    return React__default.default.createElement(React__default.default.Fragment, null, children, badge && React__default.default.createElement("span", {
+      className: Tab_module.badge
+    }, React__default.default.createElement(Badge.Badge, {
+      variant: isSelected || isFocusVisible || isHovered ? "active" : "default"
+    }, badge)));
+  });
+};
+exports.Tab = Tab;

package/dist/cjs/__future__/Tabs/subcomponents/Tab/Tab.module.css.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "tab": "Tab-module_tab__-XtyL",
+  "badge": "Tab-module_badge__Zfili"
+};
+module.exports = styles;

package/dist/cjs/__future__/Tabs/subcomponents/TabList/TabList.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var reactAriaComponents = require('react-aria-components');
+var TabList_module = require('./TabList.module.css.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * Wrapper for the tabs themselves
+ */
+var TabList = function (props) {
+  var ariaLabel = props["aria-label"],
+    _a = props.noPadding,
+    noPadding = _a === void 0 ? false : _a,
+    children = props.children,
+    className = props.className,
+    restProps = tslib.__rest(props, ["aria-label", "noPadding", "children", "className"]);
+  return React__default.default.createElement(reactAriaComponents.TabList, tslib.__assign({
+    "aria-label": ariaLabel,
+    className: classnames__default.default(TabList_module.tabList, className, noPadding && TabList_module.noPadding)
+  }, restProps), children);
+};
+exports.TabList = TabList;

package/dist/cjs/__future__/Tabs/subcomponents/TabList/TabList.module.css.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "tabList": "TabList-module_tabList__e1qAi",
+  "noPadding": "TabList-module_noPadding__YM23K"
+};
+module.exports = styles;

package/dist/cjs/__future__/Tabs/subcomponents/TabPanel/TabPanel.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * Wrapper for the content that shows when tab is active
+ */
+var TabPanel = function (props) {
+  var className = props.className,
+    children = props.children,
+    restProps = tslib.__rest(props, ["className", "children"]);
+  return React__default.default.createElement(reactAriaComponents.TabPanel, tslib.__assign({
+    className: className
+  }, restProps), children);
+};
+exports.TabPanel = TabPanel;

package/dist/cjs/__future__/Tag/RemovableTag/subcomponents/RemoveButton.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var RemoveTagIcon = require('./RemoveTagIcon.cjs');
+var Icon = require('../../../Icon/Icon.cjs');
 var RemoveButton_module = require('./RemoveButton.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -23,8 +23,9 @@ var RemoveButton = function (_a) {
     "aria-label": ariaLabel,
     className: classnames__default.default(RemoveButton_module.removeButton, classNameOverride),
     onClick: onClick
-  }, restProps), React__default.default.createElement(RemoveTagIcon.RemoveTagIcon, {
-    role: "presentation"
+  }, restProps), React__default.default.createElement(Icon.Icon, {
+    name: "close",
+    isPresentational: true
   }));
 };
 RemoveButton.displayName = "RemoveButton";

package/dist/cjs/future.cjs

@@ -1,8 +1,18 @@
 'use strict';
 
+var Icon = require('./__future__/Icon/Icon.cjs');
 var Select = require('./__future__/Select/Select.cjs');
 var RemovableTag = require('./__future__/Tag/RemovableTag/RemovableTag.cjs');
 var Tag = require('./__future__/Tag/Tag/Tag.cjs');
+var Tabs = require('./__future__/Tabs/Tabs.cjs');
+var Tab = require('./__future__/Tabs/subcomponents/Tab/Tab.cjs');
+var TabList = require('./__future__/Tabs/subcomponents/TabList/TabList.cjs');
+var TabPanel = require('./__future__/Tabs/subcomponents/TabPanel/TabPanel.cjs');
+exports.Icon = Icon.Icon;
 exports.Select = Select.Select;
 exports.RemovableTag = RemovableTag.RemovableTag;
 exports.Tag = Tag.Tag;
+exports.Tabs = Tabs.Tabs;
+exports.Tab = Tab.Tab;
+exports.TabList = TabList.TabList;
+exports.TabPanel = TabPanel.TabPanel;

package/dist/esm/Avatar/Avatar.mjs

@@ -2,8 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React, { useState, useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import { Textfit } from 'react-textfit';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { UserIcon } from '../Icon/UserIcon.mjs';
+import { Icon } from '../__future__/Icon/Icon.mjs';
 import styles from './Avatar.module.scss.mjs';
 var getInitials = function (fullName, max2Characters) {
   if (max2Characters === void 0) {
@@ -19,17 +18,21 @@ var getMaxFontSizePixels = function (size) {
   if (size === "xlarge" || size === "xxlarge") return 34;
   return 22;
 };
-var fallbackIcon = function (alt) {
+var FallbackIcon = function (_a) {
+  var alt = _a.alt;
   if (alt) {
-    return /*#__PURE__*/React.createElement(UserIcon, {
-      inheritSize: true,
-      role: "img",
-      "aria-label": alt
+    return /*#__PURE__*/React.createElement(Icon, {
+      name: "person",
+      alt: alt,
+      isFilled: true,
+      className: styles.fallbackIcon
     });
   }
-  return /*#__PURE__*/React.createElement(UserIcon, {
-    inheritSize: true,
-    role: "presentation"
+  return /*#__PURE__*/React.createElement(Icon, {
+    name: "person",
+    isPresentational: true,
+    isFilled: true,
+    className: styles.fallbackIcon
   });
 };
 var renderInitials = function (fullName, alt, size, disableInitials) {
@@ -42,9 +45,9 @@ var renderInitials = function (fullName, alt, size, disableInitials) {
   var initials = getInitials(fullName);
   var isLongName = initials.length > 2 && size !== "small";
   var renderFallback = disableInitials || initials === "";
-  return renderFallback ? ( /*#__PURE__*/React.createElement("span", {
-    className: styles.fallbackIcon
-  }, fallbackIcon(alt))) : ( /*#__PURE__*/React.createElement("abbr", {
+  return renderFallback ? ( /*#__PURE__*/React.createElement(FallbackIcon, {
+    alt: alt
+  })) : ( /*#__PURE__*/React.createElement("abbr", {
     className: classnames(styles.initials, isLongName && styles.longName),
     title: alt
   }, isLongName ? (

package/dist/esm/Calendar/CalendarRange/CalendarRange.mjs

@@ -2,9 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React, { useRef, useEffect } from 'react';
 import { enAU } from 'date-fns/locale';
 import { DayPicker } from 'react-day-picker';
-import '../../Icon/subcomponents/SVG/SVG.mjs';
-import { ArrowBackwardIcon } from '../../Icon/ArrowBackwardIcon.mjs';
-import { ArrowForwardIcon } from '../../Icon/ArrowForwardIcon.mjs';
+import { Icon } from '../../__future__/Icon/Icon.mjs';
 import { baseCalendarClassNames } from '../baseCalendarClassNames.mjs';
 import 'date-fns';
 import { isInvalidDate } from '../utils/isInvalidDate.mjs';
@@ -48,13 +46,17 @@ const CalendarRange = /*#__PURE__*/function () {
       classNames: classNames,
       components: {
         IconRight: function () {
-          return /*#__PURE__*/React.createElement(ArrowForwardIcon, {
-            role: "presentation"
+          return /*#__PURE__*/React.createElement(Icon, {
+            name: "arrow_forward",
+            isPresentational: true,
+            shouldMirrorInRTL: true
           });
         },
         IconLeft: function () {
-          return /*#__PURE__*/React.createElement(ArrowBackwardIcon, {
-            role: "presentation"
+          return /*#__PURE__*/React.createElement(Icon, {
+            name: "arrow_back",
+            isPresentational: true,
+            shouldMirrorInRTL: true
           });
         }
       },