@innovaccer/design-system 2.20.0 → 2.21.0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1694185325183 
+   * Generated on: 1695030042653 
    *      Package: @innovaccer/design-system
-   *      Version: v2.20.0
+   *      Version: v2.21.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -2939,7 +2939,8 @@ var GenericChip = function GenericChip(props) {
       selected = props.selected,
       onClose = props.onClose,
       onClick = props.onClick,
-      labelPrefix = props.labelPrefix;
+      labelPrefix = props.labelPrefix,
+      iconVariations = props.iconVariations;
   var baseProps = extractBaseProps(props);
 
   var iconClass = function iconClass(align) {
@@ -3002,6 +3003,7 @@ var GenericChip = function GenericChip(props) {
     }), icon && /*#__PURE__*/React.createElement(Icon, {
       "data-test": "DesignSystem-GenericChip--Icon",
       name: icon,
+      variations: iconVariations,
       appearance: iconAppearance('left'),
       className: iconClass('left')
     }), renderLabel(), clearButton && /*#__PURE__*/React.createElement("div", {
@@ -3033,7 +3035,8 @@ var Chip = function Chip(props) {
       onClick = props.onClick,
       name = props.name,
       className = props.className,
-      labelPrefix = props.labelPrefix;
+      labelPrefix = props.labelPrefix,
+      iconVariations = props.iconVariations;
   var baseProps = extractBaseProps(props);
 
   var onCloseHandler = function onCloseHandler() {
@@ -3055,6 +3058,7 @@ var Chip = function Chip(props) {
     label: label,
     selected: select,
     icon: icon,
+    iconVariations: iconVariations,
     clearButton: clearbutton,
     disabled: disabled,
     className: chipClass,
@@ -3097,7 +3101,8 @@ var ChipGroup = function ChipGroup(props) {
         disabled = item.disabled,
         selected = item.selected,
         clearButton = item.clearButton,
-        name = item.name;
+        name = item.name,
+        iconVariations = item.iconVariations;
     return /*#__PURE__*/React.createElement("span", {
       key: ind,
       className: "ChipGroup-item"
@@ -3109,6 +3114,7 @@ var ChipGroup = function ChipGroup(props) {
       icon: icon,
       disabled: disabled,
       clearButton: clearButton,
+      iconVariations: iconVariations,
       type: type,
       onClick: function onClick() {
         return onClickHandler(item);
@@ -4623,7 +4629,7 @@ function debounce$1 (delay, atBegin, callback) {
   return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
 }
 
-var _excluded$u = ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error"];
+var _excluded$u = ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error", "iconVariations"];
 var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames, _classNames2;
 
@@ -4639,6 +4645,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
       open = props.open,
       inlineLabel = props.inlineLabel,
       error = props.error,
+      iconVariations = props.iconVariations,
       rest = _objectWithoutProperties(props, _excluded$u);
 
   var buttonDisabled = disabled ? 'disabled' : 'default';
@@ -4663,12 +4670,14 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, "".concat(inlineLabel.trim().charAt(0).toUpperCase()).concat(inlineLabel.trim().slice(1))), icon && !inlineLabel && /*#__PURE__*/React.createElement(Icon, {
     appearance: buttonDisabled,
     className: "d-flex align-items-center mr-4",
-    name: icon
+    name: icon,
+    variations: iconVariations
   }), value && /*#__PURE__*/React.createElement("span", {
     className: textClass
   }, value)), /*#__PURE__*/React.createElement(Icon, {
     appearance: buttonDisabled,
-    name: iconName
+    name: iconName,
+    variations: iconVariations
   }));
 });
 DropdownButton.displayName = 'DropdownButton';
@@ -4806,7 +4815,8 @@ var IconOption = function IconOption(props) {
       dataTest = props.dataTest;
   var label = optionData.label,
       icon = optionData.icon,
-      disabled = optionData.disabled;
+      disabled = optionData.disabled,
+      iconVariations = optionData.iconVariations;
   var OptionClass = classnames((_classNames = {}, _defineProperty$1(_classNames, "".concat(className), true), _defineProperty$1(_classNames, 'Option--icon', icon), _classNames));
   return (
     /*#__PURE__*/
@@ -4822,7 +4832,8 @@ var IconOption = function IconOption(props) {
     }, icon && /*#__PURE__*/React.createElement(Icon, {
       className: "Option-icon mr-4",
       "data-test": "".concat(dataTest, "--Icon"),
-      name: icon
+      name: icon,
+      variations: iconVariations
     }), /*#__PURE__*/React.createElement("div", {
       className: 'Option-label'
     }, /*#__PURE__*/React.createElement(Text, {
@@ -5239,7 +5250,8 @@ var DropdownList = function DropdownList(props) {
       error = props.error,
       disabled = props.disabled,
       inlineLabel = props.inlineLabel,
-      triggerLabel = props.triggerLabel;
+      triggerLabel = props.triggerLabel,
+      iconVariations = props.iconVariations;
   var CustomTrigger = customTrigger ? customTrigger(triggerLabel ? triggerLabel : placeholder) : /*#__PURE__*/React.createElement(React.Fragment, null);
   var NewCustomTrigger = /*#__PURE__*/React.cloneElement(CustomTrigger, {
     tabIndex: 0,
@@ -5254,7 +5266,8 @@ var DropdownList = function DropdownList(props) {
     inlineLabel: inlineLabel,
     menu: menu,
     error: error,
-    ref: dropdownTriggerRef
+    ref: dropdownTriggerRef,
+    iconVariations: iconVariations
   }, triggerLabel);
   var dropdownStyle = {
     maxHeight: maxHeight,
@@ -6393,7 +6406,7 @@ ActionButton$1.defaultProps = {
   type: 'rounded'
 };
 
-var _excluded$q = ["size", "type", "minWidth", "defaultValue", "name", "placeholder", "value", "icon", "inlineLabel", "required", "error", "info", "onChange", "onClick", "onClear", "onBlur", "onFocus", "onPaste", "actionIcon", "className", "autoFocus", "disabled", "readOnly"];
+var _excluded$q = ["size", "type", "minWidth", "defaultValue", "name", "placeholder", "value", "icon", "inlineLabel", "required", "error", "info", "onChange", "onClick", "onClear", "onBlur", "onFocus", "onPaste", "actionIcon", "className", "autoFocus", "disabled", "readOnly", "iconVariations"];
 var sizeMapping$2 = {
   tiny: 12,
   regular: 16,
@@ -6434,6 +6447,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       autoFocus = props.autoFocus,
       disabled = props.disabled,
       readOnly = props.readOnly,
+      iconVariations = props.iconVariations,
       rest = _objectWithoutProperties(props, _excluded$q);
 
   var ref = React.useRef(null);
@@ -6492,7 +6506,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     className: leftIconClass
   }, /*#__PURE__*/React.createElement(Icon, {
     name: icon,
-    size: sizeMapping$2[size]
+    size: sizeMapping$2[size],
+    variations: iconVariations
   })), /*#__PURE__*/React.createElement("input", _extends$2({
     "data-test": "DesignSystem-Input"
   }, baseProps, rest, {
@@ -6542,7 +6557,7 @@ Object.assign(Input, {
   ActionButton: ActionButton$1
 });
 
-var _excluded$p = ["size", "defaultValue", "name", "placeholder", "icon", "prefix", "suffix", "error", "min", "max", "onChange", "onClick", "onBlur", "onFocus", "className", "autoFocus", "disabled", "readOnly", "value", "showActionButton", "onKeyDown"];
+var _excluded$p = ["size", "defaultValue", "name", "placeholder", "icon", "prefix", "suffix", "error", "min", "max", "onChange", "onClick", "onBlur", "onFocus", "className", "autoFocus", "disabled", "readOnly", "value", "showActionButton", "onKeyDown", "iconVariations"];
 var sizeMapping$1 = {
   regular: 16,
   large: 20
@@ -6592,6 +6607,7 @@ var MetricInput = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       _props$showActionButt = props.showActionButton,
       showActionButton = _props$showActionButt === void 0 ? true : _props$showActionButt,
       onKeyDown = props.onKeyDown,
+      iconVariations = props.iconVariations,
       rest = _objectWithoutProperties(props, _excluded$p);
 
   var ref = React.useRef(null);
@@ -6690,6 +6706,7 @@ var MetricInput = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   }, icon && /*#__PURE__*/React.createElement(Icon, {
     "data-test": "DesignSystem-MetricInput--icon",
     name: icon,
+    variations: iconVariations,
     size: sizeMapping$1[size],
     appearance: !value ? 'disabled' : 'subtle',
     className: iconClass
@@ -7447,7 +7464,8 @@ Message.defaultProps = {
 var Meta = function Meta(props) {
   var label = props.label,
       icon = props.icon,
-      size = props.size;
+      size = props.size,
+      iconVariations = props.iconVariations;
   return /*#__PURE__*/React.createElement("span", {
     "data-test": "DesignSystem-MetaList--Meta",
     className: 'Meta'
@@ -7456,6 +7474,7 @@ var Meta = function Meta(props) {
     name: icon,
     appearance: "subtle",
     className: 'Meta-icon',
+    variations: iconVariations,
     size: size === 'regular' ? 16 : 12
   }), /*#__PURE__*/React.createElement(Text, {
     size: size,
@@ -7489,7 +7508,8 @@ var MetaList = function MetaList(props) {
   }), list.map(function (item, ind) {
     var _item$label = item.label,
         label = _item$label === void 0 ? '' : _item$label,
-        icon = item.icon;
+        icon = item.icon,
+        iconVariations = item.iconVariations;
     var rightSeperator = ind !== list.length - 1;
     return /*#__PURE__*/React.createElement("span", {
       key: ind,
@@ -7497,7 +7517,8 @@ var MetaList = function MetaList(props) {
     }, /*#__PURE__*/React.createElement(Meta, {
       size: size,
       label: label,
-      icon: icon
+      icon: icon,
+      iconVariations: iconVariations
     }), rightSeperator && /*#__PURE__*/React.createElement(Icon, {
       "data-test": "DesignSystem-MetaList--rightSeperator",
       name: "fiber_manual_record",
@@ -14267,7 +14288,8 @@ var MenuItem = function MenuItem(props) {
   }, menu.icon && /*#__PURE__*/React.createElement(Icon, {
     "data-test": "DesignSystem-VerticalNav--Icon",
     className: expanded ? 'mr-4' : '',
-    name: menu.icon
+    name: menu.icon,
+    variations: menu.iconVariations
   }), expanded && /*#__PURE__*/React.createElement(_MenuLabel, {
     label: menu.label,
     labelColor: itemColor
@@ -14463,6 +14485,7 @@ var HorizontalNav = function HorizontalNav(props) {
       return /*#__PURE__*/React.createElement(Icon, {
         className: "mr-3 HorizontalNav-animate",
         name: menu.icon,
+        variations: menu.iconVariations,
         "data-test": "DesignSystem-HorizontalNav--Icon"
       });
     }
@@ -17546,7 +17569,8 @@ var Tabs = function Tabs(props) {
     var _ref = tab,
         count = _ref.count,
         icon = _ref.icon,
-        disabled = _ref.disabled;
+        disabled = _ref.disabled,
+        iconVariations = _ref.iconVariations;
 
     if (count !== undefined) {
       return /*#__PURE__*/React.createElement(Pills, {
@@ -17564,6 +17588,7 @@ var Tabs = function Tabs(props) {
         "data-test": "DesignSystem-Tabs--Icon",
         className: "mr-4 ".concat(iconClass),
         name: icon,
+        variations: iconVariations,
         appearance: iconAppearance
       });
     }
@@ -21954,7 +21979,7 @@ var HelpText = function HelpText(props) {
 };
 HelpText.displayName = 'HelpText';
 
-var _excluded$1 = ["children", "type", "className", "disabled", "tabIndex", "icon", "subtle", "size", "iconAlign"];
+var _excluded$1 = ["children", "type", "className", "disabled", "tabIndex", "icon", "subtle", "size", "iconAlign", "iconVariations"];
 var sizeMapping = {
   tiny: 12,
   regular: 16
@@ -21971,6 +21996,7 @@ var LinkButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
       subtle = props.subtle,
       size = props.size,
       iconAlign = props.iconAlign,
+      iconVariations = props.iconVariations,
       rest = _objectWithoutProperties(props, _excluded$1);
 
   var buttonClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'LinkButton', true), _defineProperty$1(_classNames, "LinkButton--".concat(size), size), _defineProperty$1(_classNames, 'LinkButton--default', !subtle), _defineProperty$1(_classNames, 'LinkButton--subtle', subtle), _defineProperty$1(_classNames, "LinkButton--iconAlign-".concat(iconAlign), children && iconAlign), _defineProperty$1(_classNames, "".concat(className), className), _classNames));
@@ -21987,6 +22013,7 @@ var LinkButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, /*#__PURE__*/React.createElement(Icon, {
     "data-test": "DesignSystem-LinkButton--Icon",
     name: icon,
+    variations: iconVariations,
     size: size && sizeMapping[size]
   })), children));
 });
@@ -22033,6 +22060,6 @@ var ActionCard = function ActionCard(props) {
 };
 ActionCard.displayName = 'ActionCard';
 
-var version = "2.20.0";
+var version = "2.21.0";
 
 export { ActionCard, Avatar, AvatarGroup, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, DatePicker, DateRangePicker, Dialog, Divider, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HelpText, HorizontalNav, Icon, InlineMessage, Input, X as InputMask, Label, Legend, Link, LinkButton, List, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderImage, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1694185325555 
+   * Generated on: 1695030042950 
    *      Package: @innovaccer/design-system
-   *      Version: v2.20.0
+   *      Version: v2.21.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -2561,7 +2561,8 @@
           selected = props.selected,
           onClose = props.onClose,
           onClick = props.onClick,
-          labelPrefix = props.labelPrefix;
+          labelPrefix = props.labelPrefix,
+          iconVariations = props.iconVariations;
       var baseProps = extractBaseProps(props);
 
       var iconClass = function iconClass(align) {
@@ -2619,6 +2620,7 @@
       }), icon && /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-GenericChip--Icon",
         name: icon,
+        variations: iconVariations,
         appearance: iconAppearance('left'),
         className: iconClass('left')
       }), renderLabel(), clearButton && /*#__PURE__*/React__namespace.createElement("div", {
@@ -2649,7 +2651,8 @@
           onClick = props.onClick,
           name = props.name,
           className = props.className,
-          labelPrefix = props.labelPrefix;
+          labelPrefix = props.labelPrefix,
+          iconVariations = props.iconVariations;
       var baseProps = extractBaseProps(props);
 
       var onCloseHandler = function onCloseHandler() {
@@ -2671,6 +2674,7 @@
         label: label,
         selected: select,
         icon: icon,
+        iconVariations: iconVariations,
         clearButton: clearbutton,
         disabled: disabled,
         className: chipClass,
@@ -2715,7 +2719,8 @@
             disabled = item.disabled,
             selected = item.selected,
             clearButton = item.clearButton,
-            name = item.name;
+            name = item.name,
+            iconVariations = item.iconVariations;
         return /*#__PURE__*/React__namespace.createElement("span", {
           key: ind,
           className: "ChipGroup-item"
@@ -2727,6 +2732,7 @@
           icon: icon,
           disabled: disabled,
           clearButton: clearButton,
+          iconVariations: iconVariations,
           type: type,
           onClick: function onClick() {
             return onClickHandler(item);
@@ -4148,7 +4154,8 @@
           open = props.open,
           inlineLabel = props.inlineLabel,
           error = props.error,
-          rest = __rest(props, ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error"]);
+          iconVariations = props.iconVariations,
+          rest = __rest(props, ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error", "iconVariations"]);
 
       var buttonDisabled = disabled ? 'disabled' : 'default';
       var trimmedPlaceholder = placeholder.trim();
@@ -4172,12 +4179,14 @@
       }, "" + inlineLabel.trim().charAt(0).toUpperCase() + inlineLabel.trim().slice(1)), icon && !inlineLabel && /*#__PURE__*/React__namespace.createElement(Icon, {
         appearance: buttonDisabled,
         className: "d-flex align-items-center mr-4",
-        name: icon
+        name: icon,
+        variations: iconVariations
       }), value && /*#__PURE__*/React__namespace.createElement("span", {
         className: textClass
       }, value)), /*#__PURE__*/React__namespace.createElement(Icon, {
         appearance: buttonDisabled,
-        name: iconName
+        name: iconName,
+        variations: iconVariations
       }));
     });
     DropdownButton.displayName = 'DropdownButton';
@@ -4303,7 +4312,8 @@
           dataTest = props.dataTest;
       var label = optionData.label,
           icon = optionData.icon,
-          disabled = optionData.disabled;
+          disabled = optionData.disabled,
+          iconVariations = optionData.iconVariations;
       var OptionClass = classNames__default["default"]((_a = {}, _a["" + className] = true, _a['Option--icon'] = icon, _a));
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: OptionClass,
@@ -4314,7 +4324,8 @@
       }, icon && /*#__PURE__*/React__namespace.createElement(Icon, {
         className: "Option-icon mr-4",
         "data-test": dataTest + "--Icon",
-        name: icon
+        name: icon,
+        variations: iconVariations
       }), /*#__PURE__*/React__namespace.createElement("div", {
         className: 'Option-label'
       }, /*#__PURE__*/React__namespace.createElement(Text, {
@@ -4720,7 +4731,8 @@
           error = props.error,
           disabled = props.disabled,
           inlineLabel = props.inlineLabel,
-          triggerLabel = props.triggerLabel;
+          triggerLabel = props.triggerLabel,
+          iconVariations = props.iconVariations;
       var CustomTrigger = customTrigger ? customTrigger(triggerLabel ? triggerLabel : placeholder) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null);
       var NewCustomTrigger = /*#__PURE__*/React__namespace.cloneElement(CustomTrigger, {
         tabIndex: 0,
@@ -4735,7 +4747,8 @@
         inlineLabel: inlineLabel,
         menu: menu,
         error: error,
-        ref: dropdownTriggerRef
+        ref: dropdownTriggerRef,
+        iconVariations: iconVariations
       }, triggerLabel);
       var dropdownStyle = {
         maxHeight: maxHeight,
@@ -5859,7 +5872,8 @@
           autoFocus = props.autoFocus,
           disabled = props.disabled,
           readOnly = props.readOnly,
-          rest = __rest(props, ["size", "type", "minWidth", "defaultValue", "name", "placeholder", "value", "icon", "inlineLabel", "required", "error", "info", "onChange", "onClick", "onClear", "onBlur", "onFocus", "onPaste", "actionIcon", "className", "autoFocus", "disabled", "readOnly"]);
+          iconVariations = props.iconVariations,
+          rest = __rest(props, ["size", "type", "minWidth", "defaultValue", "name", "placeholder", "value", "icon", "inlineLabel", "required", "error", "info", "onChange", "onClick", "onClear", "onBlur", "onFocus", "onPaste", "actionIcon", "className", "autoFocus", "disabled", "readOnly", "iconVariations"]);
 
       var ref = React__namespace.useRef(null);
 
@@ -5915,7 +5929,8 @@
         className: leftIconClass
       }, /*#__PURE__*/React__namespace.createElement(Icon, {
         name: icon,
-        size: sizeMapping$2[size]
+        size: sizeMapping$2[size],
+        variations: iconVariations
       })), /*#__PURE__*/React__namespace.createElement("input", __assign({
         "data-test": "DesignSystem-Input"
       }, baseProps, rest, {
@@ -6007,7 +6022,8 @@
           _h = props.showActionButton,
           showActionButton = _h === void 0 ? true : _h,
           onKeyDown = props.onKeyDown,
-          rest = __rest(props, ["size", "defaultValue", "name", "placeholder", "icon", "prefix", "suffix", "error", "min", "max", "onChange", "onClick", "onBlur", "onFocus", "className", "autoFocus", "disabled", "readOnly", "value", "showActionButton", "onKeyDown"]);
+          iconVariations = props.iconVariations,
+          rest = __rest(props, ["size", "defaultValue", "name", "placeholder", "icon", "prefix", "suffix", "error", "min", "max", "onChange", "onClick", "onBlur", "onFocus", "className", "autoFocus", "disabled", "readOnly", "value", "showActionButton", "onKeyDown", "iconVariations"]);
 
       var ref = React__namespace.useRef(null);
       var isUncontrolled = valueProp === undefined;
@@ -6104,6 +6120,7 @@
       }, icon && /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-MetricInput--icon",
         name: icon,
+        variations: iconVariations,
         size: sizeMapping$1[size],
         appearance: !value ? 'disabled' : 'subtle',
         className: iconClass
@@ -6844,7 +6861,8 @@
     var Meta = function Meta(props) {
       var label = props.label,
           icon = props.icon,
-          size = props.size;
+          size = props.size,
+          iconVariations = props.iconVariations;
       return /*#__PURE__*/React__namespace.createElement("span", {
         "data-test": "DesignSystem-MetaList--Meta",
         className: 'Meta'
@@ -6853,6 +6871,7 @@
         name: icon,
         appearance: "subtle",
         className: 'Meta-icon',
+        variations: iconVariations,
         size: size === 'regular' ? 16 : 12
       }), /*#__PURE__*/React__namespace.createElement(Text, {
         size: size,
@@ -6886,7 +6905,8 @@
       }), list.map(function (item, ind) {
         var _a = item.label,
             label = _a === void 0 ? '' : _a,
-            icon = item.icon;
+            icon = item.icon,
+            iconVariations = item.iconVariations;
         var rightSeperator = ind !== list.length - 1;
         return /*#__PURE__*/React__namespace.createElement("span", {
           key: ind,
@@ -6894,7 +6914,8 @@
         }, /*#__PURE__*/React__namespace.createElement(Meta, {
           size: size,
           label: label,
-          icon: icon
+          icon: icon,
+          iconVariations: iconVariations
         }), rightSeperator && /*#__PURE__*/React__namespace.createElement(Icon, {
           "data-test": "DesignSystem-MetaList--rightSeperator",
           name: "fiber_manual_record",
@@ -8943,7 +8964,8 @@
       }, menu.icon && /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-VerticalNav--Icon",
         className: expanded ? 'mr-4' : '',
-        name: menu.icon
+        name: menu.icon,
+        variations: menu.iconVariations
       }), expanded && /*#__PURE__*/React__namespace.createElement(_MenuLabel, {
         label: menu.label,
         labelColor: itemColor
@@ -9141,6 +9163,7 @@
           return /*#__PURE__*/React__namespace.createElement(Icon, {
             className: "mr-3 HorizontalNav-animate",
             name: menu.icon,
+            variations: menu.iconVariations,
             "data-test": "DesignSystem-HorizontalNav--Icon"
           });
         }
@@ -12080,7 +12103,8 @@
         var _b = tab,
             count = _b.count,
             icon = _b.icon,
-            disabled = _b.disabled;
+            disabled = _b.disabled,
+            iconVariations = _b.iconVariations;
 
         if (count !== undefined) {
           return /*#__PURE__*/React__namespace.createElement(Pills, {
@@ -12098,6 +12122,7 @@
             "data-test": "DesignSystem-Tabs--Icon",
             className: "mr-4 " + iconClass,
             name: icon,
+            variations: iconVariations,
             appearance: iconAppearance
           });
         }
@@ -16281,7 +16306,8 @@
           subtle = props.subtle,
           size = props.size,
           iconAlign = props.iconAlign,
-          rest = __rest(props, ["children", "type", "className", "disabled", "tabIndex", "icon", "subtle", "size", "iconAlign"]);
+          iconVariations = props.iconVariations,
+          rest = __rest(props, ["children", "type", "className", "disabled", "tabIndex", "icon", "subtle", "size", "iconAlign", "iconVariations"]);
 
       var buttonClass = classNames__default["default"]((_a = {}, _a['LinkButton'] = true, _a["LinkButton--" + size] = size, _a['LinkButton--default'] = !subtle, _a['LinkButton--subtle'] = subtle, _a["LinkButton--iconAlign-" + iconAlign] = children && iconAlign, _a["" + className] = className, _a));
       var iconClass = classNames__default["default"]((_b = {}, _b['LinkButton-icon'] = true, _b["LinkButton-icon--" + iconAlign] = children && iconAlign, _b));
@@ -16297,6 +16323,7 @@
       }, /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-LinkButton--Icon",
         name: icon,
+        variations: iconVariations,
         size: size && sizeMapping[size]
       })), children));
     });
@@ -16342,7 +16369,7 @@
     };
     ActionCard.displayName = 'ActionCard';
 
-    var version = "2.20.0";
+    var version = "2.21.0";
 
     exports.ActionCard = ActionCard;
     exports.Avatar = Avatar;