@auth0/quantum-product 1.8.0 → 1.10.0

package/esm/code/code.js

@@ -24,7 +24,7 @@ import * as React from 'react';
 import { styled } from '../styled';
 import { Text } from '../text';
 export var CodeComponentName = 'QuantumCode';
-export var Root = styled(Text, { name: CodeComponentName, slot: 'Root' })(function (_a) {
+var Root = styled(Text, { name: CodeComponentName, slot: 'Root' })(function (_a) {
     var theme = _a.theme;
     return ({
         display: 'inline',

package/esm/content/content.js

@@ -79,7 +79,8 @@ export var Content = styled('div', { name: 'QuantumContent' })(function (_a) {
             maxWidth: '100%',
         },
         // leading and end spacing
-        '& > *:first-child': {
+        // *:not(:not(:last-child) ~ *) = first-child. https://github.com/emotion-js/emotion/issues/2917
+        '*:not(:not(:last-child) ~ *)': {
             marginTop: 0,
         },
         '& > *:last-child': {

package/esm/danger-zone/danger-zone-item/danger-zone-item.js

@@ -26,7 +26,7 @@ import { styled } from '../../styled';
 import { DangerZoneItemAction } from '../danger-zone-item-action';
 import { TitleBlock } from '../../title-block';
 var dangerZoneItemComponentName = 'QuantumDangerZoneItem';
-export var Root = styled('li', {
+var Root = styled('li', {
     name: dangerZoneItemComponentName,
     slot: 'Root',
 })(function (_a) {
@@ -40,7 +40,7 @@ export var Root = styled('li', {
         borderRadius: theme.shape.borderRadius,
     });
 });
-export var StyledTitleBlock = styled(TitleBlock, {
+var StyledTitleBlock = styled(TitleBlock, {
     name: dangerZoneItemComponentName,
     slot: 'TitleBlock',
 })(function (_a) {
@@ -50,7 +50,7 @@ export var StyledTitleBlock = styled(TitleBlock, {
         marginRight: theme.spacing(3),
     });
 });
-export var ActionContainer = styled('div', {
+var ActionContainer = styled('div', {
     name: dangerZoneItemComponentName,
     slot: 'ActionContainer',
 })(function () { return ({

package/esm/danger-zone/danger-zone-item-action/danger-zone-item-action.js

@@ -13,7 +13,7 @@ import * as React from 'react';
 import { Button } from '../../button';
 import { styled } from '../../styled';
 export var dangerZoneItemActionComponentName = 'QuantumDangerZoneItemAction';
-export var Root = styled(Button, {
+var Root = styled(Button, {
     name: dangerZoneItemActionComponentName,
     slot: 'Root',
 })({

package/esm/description-block/description-block.js

@@ -26,7 +26,7 @@ import { CopyButton } from '../copy-button';
 import { styled } from '../styled';
 import { Text } from '../text';
 var descriptionBlockComponentName = 'QuantumDescriptionBlock';
-export var Root = styled('div', {
+var Root = styled('div', {
     name: descriptionBlockComponentName,
     slot: 'Root',
 })(function (_a) {

package/esm/dialog/dialog-content/dialog-content-overrides.js

@@ -4,9 +4,6 @@ export var createMuiDialogContentOverrides = function (_a) {
         styleOverrides: {
             root: {
                 padding: spacing(0.5, 5),
-                '&:first-child': {
-                    paddingTop: spacing(3),
-                },
                 '&:last-child': {
                     paddingBottom: spacing(3),
                 },

package/esm/dialog/dialog-title/dialog-title.js

@@ -30,7 +30,7 @@ import { useMergedClasses } from '../../styles/classes';
 import clsx from '../../utils/clsx';
 import { dialogTitleClasses, getDialogTitleUtilityClass } from './dialog-title-classes';
 var dialogTitleComponentName = 'QuantumDialogTitle';
-export var Root = styled(MuiDialogTitle, {
+var Root = styled(MuiDialogTitle, {
     name: dialogTitleComponentName,
     slot: 'Root',
 })({

package/esm/dialog/dialog.js

@@ -29,7 +29,7 @@ import { DialogTitle } from './dialog-title';
 import { useId } from '../utils/use-id';
 import { styled } from '../styled';
 export var dialogComponentName = 'QuantumDialog';
-export var Root = styled(MuiDialog, {
+var Root = styled(MuiDialog, {
     name: dialogComponentName,
     slot: 'Root',
 })(function (_a) {

package/esm/empty-state/empty-state.js

@@ -30,7 +30,7 @@ import { Text } from '../text';
 import { emptyStateClasses, emptyStateComponentName, getEmptyStateUtilityClass, } from './empty-state-classes';
 import { useMergedClasses } from '../styles/classes';
 import clsx from '../utils/clsx';
-export var Root = styled(RowLayout, {
+var Root = styled(RowLayout, {
     name: emptyStateComponentName,
     slot: 'Root',
 })({});

package/esm/field-set/field-set-classes.js

@@ -8,5 +8,6 @@ export var fieldSetClasses = generateUtilityClasses(fieldSetComponentName, [
     'labelContent',
     'labelText',
     'descriptionText',
+    'availabilityLabel',
     'contentWrapper',
 ]);

package/esm/field-set/field-set.js

@@ -22,7 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { useFormLayoutContext } from '../form';
+import { Label } from '../label';
 import { RowLayout } from '../row-layout';
+import { StackLayout } from '../stack-layout';
 import { styled } from '../styled';
 import { fieldSetClasses, fieldSetComponentName, getFieldSetUtilityClass } from './field-set-classes';
 import { Text } from '../text';
@@ -53,8 +55,14 @@ var LabelContent = styled(RowLayout, {
         display: 'none',
     },
 });
+var AvailabilityLabel = styled(Label, { name: fieldSetComponentName, slot: 'AvailabilityLabel' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginLeft: theme.spacing(1),
+    });
+});
 export var FieldSet = React.forwardRef(function (props, ref) {
-    var label = props.label, propLayout = props.layout, description = props.description, children = props.children, _a = props.margin, margin = _a === void 0 ? 'default' : _a, className = props.className, rootProps = __rest(props, ["label", "layout", "description", "children", "margin", "className"]);
+    var label = props.label, propLayout = props.layout, description = props.description, children = props.children, _a = props.margin, margin = _a === void 0 ? 'default' : _a, className = props.className, productReleaseStage = props.productReleaseStage, rootProps = __rest(props, ["label", "layout", "description", "children", "margin", "className", "productReleaseStage"]);
     var layoutContext = useFormLayoutContext().layout;
     var classes = useMergedClasses(fieldSetClasses, getFieldSetUtilityClass, props.classes);
     var layout = propLayout || layoutContext;
@@ -63,7 +71,9 @@ export var FieldSet = React.forwardRef(function (props, ref) {
     };
     return (React.createElement(Root, __assign({ ref: ref, ownerState: ownerState, className: clsx(classes.root, className) }, rootProps),
         React.createElement(LabelContent, { gutter: 0.5, className: classes.labelContent },
-            !!label && (React.createElement(Text, { variant: "subtitle1", color: "textPrimary", component: "legend", className: classes.labelText }, label)),
+            React.createElement(StackLayout, { gutter: 0 },
+                !!label && (React.createElement(Text, { variant: "subtitle1", color: "textPrimary", component: "legend", className: classes.labelText }, label)),
+                !!label && !!productReleaseStage && (React.createElement(AvailabilityLabel, { className: classes.availabilityLabel, productReleaseStage: productReleaseStage, productReleaseStageAbbr: false }))),
             !!description && (React.createElement(Text, { variant: "body2", color: "textSecondary", className: classes.descriptionText }, description))),
         React.createElement(RowLayout, { gutter: margin === 'dense' ? 2 : 3, className: classes.contentWrapper }, children)));
 });

package/esm/floating-panel/floating-panel.js

@@ -45,7 +45,7 @@ var SubContainer = styled('div', { name: floatingPanelComponentName, slot: 'SubC
     display: 'flex',
     width: 0,
 });
-export var Root = styled(Drawer, { name: floatingPanelComponentName, slot: 'Root' })(function (_a) {
+var Root = styled(Drawer, { name: floatingPanelComponentName, slot: 'Root' })(function (_a) {
     var _b;
     var theme = _a.theme, panelWidth = _a.panelWidth, elevated = _a.elevated, topOffset = _a.topOffset, anchor = _a.anchor;
     var boxShadowStyle = elevated ? theme.shadows[2] : 'none';

package/esm/form/form-label/form-label-overrides.js

@@ -21,7 +21,7 @@ export var createMuiFormLabelOverrides = function (_a) {
                 color: tokens.color_fg_bold,
             }, _b)),
             asterisk: {
-                color: tokens.color_fg_state_danger,
+                color: tokens.color_fg_state_neutral,
             },
         },
     };

package/esm/foundations/token-tables.js

@@ -23,7 +23,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { Avatar, AvatarBlock, Code, DataTable } from '@auth0/quantum-product';
+import { Avatar, AvatarBlock, Code, DataTable, Box } from '@auth0/quantum-product';
 import * as React from 'react';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 var tokensJSON = require('../../../quantum-tokens/old/json/tokens.json');
@@ -87,7 +87,7 @@ export var TypographyTokens = function (_a) {
                 title: 'Value',
                 render: function (_a) {
                     var item = _a.item;
-                    return (React.createElement("pre", { style: { width: '350px', whiteSpace: 'pre-wrap' } }, JSON.stringify(item.value, null, 2)));
+                    return (React.createElement(Box, { component: "pre", sx: { typography: 'code2', width: 350, whiteSpace: 'pre-wrap' } }, JSON.stringify(item.value, null, 2)));
                 },
             },
             { field: 'cssVariable', title: 'CSS Token', render: function (_a) {
@@ -115,7 +115,7 @@ export var TypographyGlobalTokens = function (_a) {
                 title: 'Value',
                 render: function (_a) {
                     var item = _a.item;
-                    return (React.createElement("pre", { style: { width: '350px', whiteSpace: 'pre-wrap' } }, JSON.stringify(item.value, null, 2)));
+                    return (React.createElement(Box, { component: "pre", sx: { typography: 'code2', width: 350, whiteSpace: 'pre-wrap' } }, JSON.stringify(item.value, null, 2)));
                 },
             },
             { field: 'cssVariable', title: 'CSS Token', render: function (_a) {

package/esm/gallery-layout/gallery-layout.js

@@ -31,7 +31,7 @@ export var gallerylayoutSizes = {
 export var getValueForGalleryLayoutSize = function (size) {
     return size ? gallerylayoutSizes[size] : null;
 };
-export var Root = styled('ul', {
+var Root = styled('ul', {
     name: 'QuantumGalleryLayout',
     slot: 'Root',
 })({

package/esm/icon/index.js

@@ -1,35 +1,382 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { styled } from '../styled';
+import { Activity, Airplane, Airplay, AlertCircle, AlertDiamondFilled, AlertDiamond, AlertOctagon, AlertTriangleFilled, AlertTriangle, AlignCenter, AlignJustify, AlignLeft, AlignRight, Anchor, Aperture, Apis, ApplicationPlus, Apps, Archive, ArrowDownCircle, ArrowDownLeft, ArrowDownRight, ArrowDown, ArrowLeftCircle, ArrowLeft, ArrowRightCircle, ArrowRight, ArrowUnsorted, ArrowUpCircle, ArrowUpLeft, ArrowUpRight, ArrowUp, ArrowsH, AtSign, Auth0Logo, Award, BarChart2, BarChart, BatteryCharging, Battery, BellOff, Bell, Biometrics, Bluetooth, Bold, BookOpen, Book, Bookmark, BorderPill, BorderRound, BorderSharp, Borders, Bot, Box, BreachedPassword, Briefcase, Browser, Bug, Building, Calendar, CameraOff, Camera, Card, CaretDown, Cash, Cast, CheckCircleFilled, CheckCircle, CheckSquare, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsDown, ChevronsLeft, ChevronsRight, ChevronsUp, Chrome, Circle, ClipboardCheck, Clipboard, Clock, CloudDrizzle, CloudLightning, CloudOff, CloudRain, CloudSnow, Cloud, CodeSandbox, Code, Codepen, Coffee, CollapseLeft, CollapseRight, Color, Columns, Command, Compass, Copy, CornerDownLeft, CornerDownRight, CornerLeftDown, CornerLeftUp, CornerRightDown, CornerRightUp, CornerUpLeft, CornerUpRight, Cpu, CreditCard, Crop, Crosshair, Database, Delete, Devices, Directory, Disc, DivideCircle, DivideSquare, Divide, DollarSign, DownloadCloud, Download, DragIndicator, Droplet, Edit, Enterprise, ExpandLeft, ExpandRight, ExternalLink, EyeOff, Eye, FastForward, Feather, Figma, FileMinus, FilePlus, FileText, File, Film, Filter, Flag, Flow, FolderCancel, FolderMinus, FolderPlus, Folder, Font, Fonts2, Framer, Frown, Gift, GitBranch, GitCommit, GitMerge, GitPullRequest, Github, Gitlab, Globe, Grid, HardDrive, Hash, Headphones, Heart, HelpCircle, Help, Hexagon, Home, Hooks, HostedPages, IdTag, Image, Inbox, InfoFilled, Info, Integration, Issuer, Italic, Key, Layers, LayoutBottom, LayoutCenter, LayoutLeft, LayoutRight, LayoutTop, Layout, LifeBuoy, Link2, Link, List, Loader, Lock, LogIn, LogOut, Mail, MapPin, Map, Maximize2, Maximize, Megaphone, Meh, Menu, MessageCircle, MessageSquare, MicOff, Mic, Minimize2, Minimize, MinusCircle, MinusSquare, Minus, Monitor, Moon, MoreHorizontal, MoreVertical, MousePointer, Move, Music, Navigation2, Navigation, Octagon, Package, PageBackground, PaintBrush, Paint, Paperclip, PauseCircle, Pause, PenTool, Percent, PhoneCall, PhoneForwarded, PhoneIncoming, PhoneMissed, PhoneOff, PhoneOutgoing, Phone, PieChart, PlayCircle, Play, PlusCircle, PlusSquare, Plus, Power, Printer, Radio, RecoveryCode, RefreshCcw, RefreshCw, Repeat, Rewind, RichText, RotateCcw, RotateCw, Rss, Save, Scissors, Search, Send, Server, Settings, Share2, Share, ShieldOff, Shield, ShoppingBag, ShoppingCart, Shuffle, Sidebar, SingleSignOn, SkipBack, SkipForward, Slash, Sliders, Smartphone, Smile, Sparkle, Speaker, Square, Star, StopCircle, Store2, Store, Sun, Sunrise, Sunset, Table, Tablet, Tag, Target, Terminal, Thermometer, ThumbsDown, ThumbsUp, ToggleLeft, ToggleRight, Tool, Trash, TrendingDown, TrendingUp, Triangle, Truck, Tv, Type, Umbrella, Underline, Unlock, UploadCloud, Upload, UserCheck, UserMinus, UserPlus, UserX, User, Users, VideoOff, Video, Voicemail, Volume1, Volume2, VolumeX, Volume, Watch, WebAuthnPlatform, WebAuthn, Widget2, Widget, WifiOff, Wifi, Wind, XCircleFilled, XCircle, XOctagon, XSquare, X, ZapOff, Zap, ZoomIn, ZoomOut, } from '@auth0/quantum-icons';
+import * as React from 'react';
 export * from './types';
-export * from './feather-icons';
-export { ApisIcon } from './apis';
-export { ApplicationPlusIcon } from './application-plus';
-export { ArrowsHIcon } from './arrows-h';
-export { BorderPillIcon } from './border-pill';
-export { BorderRoundedIcon } from './border-rounded';
-export { BorderSharpIcon } from './border-sharp';
-export { BotIcon } from './bot';
-export { BrowsersIcon } from './browsers';
-export { BugIcon } from './bug';
-export { BuildingIcon } from './building';
-export { CashIcon } from './cash';
-export { ClipboardCheckIcon } from './clipboard-check';
-export { EnterpriseIcon } from './enterprise';
-export { FolderCancelIcon } from './folder-cancel';
-export { FontIcon } from './font';
-export { HelpIcon } from './help';
-export { HooksIcon } from './hooks';
-export { HostedPagesIcon } from './hosted-pages';
-export { IdTagIcon } from './id-tag';
-export { IntegrationIcon } from './integration';
-export { LayoutBottomIcon } from './layout-bottom';
-export { LayoutCenterIcon } from './layout-center';
-export { LayoutLeftIcon } from './layout-left';
-export { LayoutRightIcon } from './layout-right';
-export { LayoutTopIcon } from './layout-top';
-export { MegaphoneIcon } from './megaphone';
-export { PageBackgroundIcon } from './page-background';
-export { PaintBrushIcon } from './paint-brush';
-export { PaintIcon } from './paint';
-export { RecoveryCodeIcon } from './recovery-code';
-export { WebAuthnIcon } from './web-authn';
-export { WebAuthnPlatformIcon } from './webauthn-platform';
-export { WidgetIcon } from './widget';
+function wrapIcon(QuantumIcon) {
+    var StyledIcon = styled(QuantumIcon, { name: 'QuantumIcon' })({});
+    var Icon = React.forwardRef(function (props, ref) {
+        return React.createElement(StyledIcon, __assign({}, props, { ref: ref }));
+    });
+    Icon.displayName = QuantumIcon.displayName;
+    return Icon;
+}
+export var ActivityIcon = wrapIcon(Activity);
+export var AirplaneIcon = wrapIcon(Airplane);
+export var AirplayIcon = wrapIcon(Airplay);
+export var AlertCircleIcon = wrapIcon(AlertCircle);
+export var AlertDiamondFilledIcon = wrapIcon(AlertDiamondFilled);
+export var AlertDiamondIcon = wrapIcon(AlertDiamond);
+/** @deprecated */
+export var AlertOctagonIcon = wrapIcon(AlertOctagon);
+export var AlertTriangleFilledIcon = wrapIcon(AlertTriangleFilled);
+export var AlertTriangleIcon = wrapIcon(AlertTriangle);
+export var AlignCenterIcon = wrapIcon(AlignCenter);
+export var AlignJustifyIcon = wrapIcon(AlignJustify);
+export var AlignLeftIcon = wrapIcon(AlignLeft);
+export var AlignRightIcon = wrapIcon(AlignRight);
+export var AnchorIcon = wrapIcon(Anchor);
+/** @deprecated */
+export var ApertureIcon = wrapIcon(Aperture);
+export var ApisIcon = wrapIcon(Apis);
+export var ApplicationPlusIcon = wrapIcon(ApplicationPlus);
+export var AppsIcon = wrapIcon(Apps);
+export var ArchiveIcon = wrapIcon(Archive);
+export var ArrowDownCircleIcon = wrapIcon(ArrowDownCircle);
+export var ArrowDownLeftIcon = wrapIcon(ArrowDownLeft);
+export var ArrowDownRightIcon = wrapIcon(ArrowDownRight);
+export var ArrowDownIcon = wrapIcon(ArrowDown);
+export var ArrowLeftCircleIcon = wrapIcon(ArrowLeftCircle);
+export var ArrowLeftIcon = wrapIcon(ArrowLeft);
+export var ArrowRightCircleIcon = wrapIcon(ArrowRightCircle);
+export var ArrowRightIcon = wrapIcon(ArrowRight);
+export var ArrowUnsortedIcon = wrapIcon(ArrowUnsorted);
+export var ArrowUpCircleIcon = wrapIcon(ArrowUpCircle);
+export var ArrowUpLeftIcon = wrapIcon(ArrowUpLeft);
+export var ArrowUpRightIcon = wrapIcon(ArrowUpRight);
+export var ArrowUpIcon = wrapIcon(ArrowUp);
+export var ArrowsHIcon = wrapIcon(ArrowsH);
+export var AtSignIcon = wrapIcon(AtSign);
+export var Auth0LogoIcon = wrapIcon(Auth0Logo);
+export var AwardIcon = wrapIcon(Award);
+export var BarChart2Icon = wrapIcon(BarChart2);
+export var BarChartIcon = wrapIcon(BarChart);
+export var BatteryChargingIcon = wrapIcon(BatteryCharging);
+export var BatteryIcon = wrapIcon(Battery);
+export var BellOffIcon = wrapIcon(BellOff);
+export var BellIcon = wrapIcon(Bell);
+export var BiometricsIcon = wrapIcon(Biometrics);
+export var BluetoothIcon = wrapIcon(Bluetooth);
+export var BoldIcon = wrapIcon(Bold);
+export var BookOpenIcon = wrapIcon(BookOpen);
+export var BookIcon = wrapIcon(Book);
+export var BookmarkIcon = wrapIcon(Bookmark);
+export var BorderPillIcon = wrapIcon(BorderPill);
+export var BorderRoundIcon = wrapIcon(BorderRound);
+/** @deprecated use BorderRoundIcon */
+export var BorderRoundedIcon = wrapIcon(BorderRound);
+export var BorderSharpIcon = wrapIcon(BorderSharp);
+export var BordersIcon = wrapIcon(Borders);
+export var BotIcon = wrapIcon(Bot);
+export var BoxIcon = wrapIcon(Box);
+export var BreachedPasswordIcon = wrapIcon(BreachedPassword);
+export var BriefcaseIcon = wrapIcon(Briefcase);
+export var BrowserIcon = wrapIcon(Browser);
+/** @deprecated use BrowserIcon */
+export var BrowsersIcon = wrapIcon(Browser);
+export var BugIcon = wrapIcon(Bug);
+/** @deprecated */
+export var BuildingIcon = wrapIcon(Building);
+export var CalendarIcon = wrapIcon(Calendar);
+export var CameraOffIcon = wrapIcon(CameraOff);
+export var CameraIcon = wrapIcon(Camera);
+export var CardIcon = wrapIcon(Card);
+export var CaretDownIcon = wrapIcon(CaretDown);
+export var CashIcon = wrapIcon(Cash);
+export var CastIcon = wrapIcon(Cast);
+export var CheckCircleFilledIcon = wrapIcon(CheckCircleFilled);
+export var CheckCircleIcon = wrapIcon(CheckCircle);
+/** @deprecated */
+export var CheckSquareIcon = wrapIcon(CheckSquare);
+export var CheckIcon = wrapIcon(Check);
+export var ChevronDownIcon = wrapIcon(ChevronDown);
+export var ChevronLeftIcon = wrapIcon(ChevronLeft);
+export var ChevronRightIcon = wrapIcon(ChevronRight);
+export var ChevronUpIcon = wrapIcon(ChevronUp);
+export var ChevronsDownIcon = wrapIcon(ChevronsDown);
+export var ChevronsLeftIcon = wrapIcon(ChevronsLeft);
+export var ChevronsRightIcon = wrapIcon(ChevronsRight);
+export var ChevronsUpIcon = wrapIcon(ChevronsUp);
+export var ChromeIcon = wrapIcon(Chrome);
+export var CircleIcon = wrapIcon(Circle);
+export var ClipboardCheckIcon = wrapIcon(ClipboardCheck);
+export var ClipboardIcon = wrapIcon(Clipboard);
+export var ClockIcon = wrapIcon(Clock);
+export var CloudDrizzleIcon = wrapIcon(CloudDrizzle);
+export var CloudLightningIcon = wrapIcon(CloudLightning);
+export var CloudOffIcon = wrapIcon(CloudOff);
+export var CloudRainIcon = wrapIcon(CloudRain);
+export var CloudSnowIcon = wrapIcon(CloudSnow);
+export var CloudIcon = wrapIcon(Cloud);
+export var CodeSandboxIcon = wrapIcon(CodeSandbox);
+/** @deprecated */
+export var CodesandboxIcon = wrapIcon(CodeSandbox);
+export var CodeIcon = wrapIcon(Code);
+export var CodepenIcon = wrapIcon(Codepen);
+export var CoffeeIcon = wrapIcon(Coffee);
+export var CollapseLeftIcon = wrapIcon(CollapseLeft);
+export var CollapseRightIcon = wrapIcon(CollapseRight);
+export var ColorIcon = wrapIcon(Color);
+export var ColumnsIcon = wrapIcon(Columns);
+export var CommandIcon = wrapIcon(Command);
+export var CompassIcon = wrapIcon(Compass);
+export var CopyIcon = wrapIcon(Copy);
+export var CornerDownLeftIcon = wrapIcon(CornerDownLeft);
+export var CornerDownRightIcon = wrapIcon(CornerDownRight);
+export var CornerLeftDownIcon = wrapIcon(CornerLeftDown);
+export var CornerLeftUpIcon = wrapIcon(CornerLeftUp);
+export var CornerRightDownIcon = wrapIcon(CornerRightDown);
+export var CornerRightUpIcon = wrapIcon(CornerRightUp);
+export var CornerUpLeftIcon = wrapIcon(CornerUpLeft);
+export var CornerUpRightIcon = wrapIcon(CornerUpRight);
+export var CpuIcon = wrapIcon(Cpu);
+export var CreditCardIcon = wrapIcon(CreditCard);
+export var CropIcon = wrapIcon(Crop);
+export var CrosshairIcon = wrapIcon(Crosshair);
+export var DatabaseIcon = wrapIcon(Database);
+export var DeleteIcon = wrapIcon(Delete);
+export var DevicesIcon = wrapIcon(Devices);
+export var DirectoryIcon = wrapIcon(Directory);
+export var DiscIcon = wrapIcon(Disc);
+export var DivideCircleIcon = wrapIcon(DivideCircle);
+/** @deprecated */
+export var DivideSquareIcon = wrapIcon(DivideSquare);
+export var DivideIcon = wrapIcon(Divide);
+export var DollarSignIcon = wrapIcon(DollarSign);
+export var DownloadCloudIcon = wrapIcon(DownloadCloud);
+export var DownloadIcon = wrapIcon(Download);
+export var DragIndicatorIcon = wrapIcon(DragIndicator);
+/** @deprecated */
+export var DropletIcon = wrapIcon(Droplet);
+export var EditIcon = wrapIcon(Edit);
+export var EnterpriseIcon = wrapIcon(Enterprise);
+export var ExpandLeftIcon = wrapIcon(ExpandLeft);
+export var ExpandRightIcon = wrapIcon(ExpandRight);
+export var ExternalLinkIcon = wrapIcon(ExternalLink);
+export var EyeOffIcon = wrapIcon(EyeOff);
+export var EyeIcon = wrapIcon(Eye);
+export var FastForwardIcon = wrapIcon(FastForward);
+export var FeatherIcon = wrapIcon(Feather);
+export var FigmaIcon = wrapIcon(Figma);
+export var FileMinusIcon = wrapIcon(FileMinus);
+export var FilePlusIcon = wrapIcon(FilePlus);
+export var FileTextIcon = wrapIcon(FileText);
+export var FileIcon = wrapIcon(File);
+export var FilmIcon = wrapIcon(Film);
+export var FilterIcon = wrapIcon(Filter);
+export var FlagIcon = wrapIcon(Flag);
+export var FlowIcon = wrapIcon(Flow);
+export var FolderCancelIcon = wrapIcon(FolderCancel);
+export var FolderMinusIcon = wrapIcon(FolderMinus);
+export var FolderPlusIcon = wrapIcon(FolderPlus);
+export var FolderIcon = wrapIcon(Folder);
+export var FontIcon = wrapIcon(Font);
+export var Fonts2Icon = wrapIcon(Fonts2);
+export var FramerIcon = wrapIcon(Framer);
+export var FrownIcon = wrapIcon(Frown);
+export var GiftIcon = wrapIcon(Gift);
+export var GitBranchIcon = wrapIcon(GitBranch);
+export var GitCommitIcon = wrapIcon(GitCommit);
+export var GitMergeIcon = wrapIcon(GitMerge);
+export var GitPullRequestIcon = wrapIcon(GitPullRequest);
+export var GithubIcon = wrapIcon(Github);
+/** @deprecated use GithubIcon */
+export var GitHubIcon = wrapIcon(Github);
+export var GitlabIcon = wrapIcon(Gitlab);
+export var GlobeIcon = wrapIcon(Globe);
+export var GridIcon = wrapIcon(Grid);
+export var HardDriveIcon = wrapIcon(HardDrive);
+export var HashIcon = wrapIcon(Hash);
+export var HeadphonesIcon = wrapIcon(Headphones);
+export var HeartIcon = wrapIcon(Heart);
+export var HelpCircleIcon = wrapIcon(HelpCircle);
+export var HelpIcon = wrapIcon(Help);
+/** @deprecated */
+export var HexagonIcon = wrapIcon(Hexagon);
+export var HomeIcon = wrapIcon(Home);
+export var HooksIcon = wrapIcon(Hooks);
+export var HostedPagesIcon = wrapIcon(HostedPages);
+export var IdTagIcon = wrapIcon(IdTag);
+export var ImageIcon = wrapIcon(Image);
+export var InboxIcon = wrapIcon(Inbox);
+export var InfoFilledIcon = wrapIcon(InfoFilled);
+export var InfoIcon = wrapIcon(Info);
+export var IntegrationIcon = wrapIcon(Integration);
+export var IssuerIcon = wrapIcon(Issuer);
+export var ItalicIcon = wrapIcon(Italic);
+export var KeyIcon = wrapIcon(Key);
+export var LayersIcon = wrapIcon(Layers);
+export var LayoutBottomIcon = wrapIcon(LayoutBottom);
+export var LayoutCenterIcon = wrapIcon(LayoutCenter);
+export var LayoutLeftIcon = wrapIcon(LayoutLeft);
+export var LayoutRightIcon = wrapIcon(LayoutRight);
+export var LayoutTopIcon = wrapIcon(LayoutTop);
+export var LayoutIcon = wrapIcon(Layout);
+export var LifeBuoyIcon = wrapIcon(LifeBuoy);
+/** @deprecated */
+export var Link2Icon = wrapIcon(Link2);
+export var LinkIcon = wrapIcon(Link);
+export var ListIcon = wrapIcon(List);
+export var LoaderIcon = wrapIcon(Loader);
+export var LockIcon = wrapIcon(Lock);
+export var LogInIcon = wrapIcon(LogIn);
+export var LogOutIcon = wrapIcon(LogOut);
+export var MailIcon = wrapIcon(Mail);
+export var MapPinIcon = wrapIcon(MapPin);
+export var MapIcon = wrapIcon(Map);
+export var Maximize2Icon = wrapIcon(Maximize2);
+export var MaximizeIcon = wrapIcon(Maximize);
+export var MegaphoneIcon = wrapIcon(Megaphone);
+export var MehIcon = wrapIcon(Meh);
+export var MenuIcon = wrapIcon(Menu);
+export var MessageCircleIcon = wrapIcon(MessageCircle);
+export var MessageSquareIcon = wrapIcon(MessageSquare);
+export var MicOffIcon = wrapIcon(MicOff);
+export var MicIcon = wrapIcon(Mic);
+export var Minimize2Icon = wrapIcon(Minimize2);
+export var MinimizeIcon = wrapIcon(Minimize);
+export var MinusCircleIcon = wrapIcon(MinusCircle);
+/** @deprecated */
+export var MinusSquareIcon = wrapIcon(MinusSquare);
+export var MinusIcon = wrapIcon(Minus);
+export var MonitorIcon = wrapIcon(Monitor);
+export var MoonIcon = wrapIcon(Moon);
+export var MoreHorizontalIcon = wrapIcon(MoreHorizontal);
+export var MoreVerticalIcon = wrapIcon(MoreVertical);
+export var MousePointerIcon = wrapIcon(MousePointer);
+export var MoveIcon = wrapIcon(Move);
+export var MusicIcon = wrapIcon(Music);
+export var Navigation2Icon = wrapIcon(Navigation2);
+export var NavigationIcon = wrapIcon(Navigation);
+export var OctagonIcon = wrapIcon(Octagon);
+export var PackageIcon = wrapIcon(Package);
+export var PageBackgroundIcon = wrapIcon(PageBackground);
+export var PaintBrushIcon = wrapIcon(PaintBrush);
+export var PaintIcon = wrapIcon(Paint);
+export var PaperclipIcon = wrapIcon(Paperclip);
+export var PauseCircleIcon = wrapIcon(PauseCircle);
+export var PauseIcon = wrapIcon(Pause);
+export var PenToolIcon = wrapIcon(PenTool);
+export var PercentIcon = wrapIcon(Percent);
+export var PhoneCallIcon = wrapIcon(PhoneCall);
+export var PhoneForwardedIcon = wrapIcon(PhoneForwarded);
+export var PhoneIncomingIcon = wrapIcon(PhoneIncoming);
+export var PhoneMissedIcon = wrapIcon(PhoneMissed);
+export var PhoneOffIcon = wrapIcon(PhoneOff);
+export var PhoneOutgoingIcon = wrapIcon(PhoneOutgoing);
+export var PhoneIcon = wrapIcon(Phone);
+export var PieChartIcon = wrapIcon(PieChart);
+export var PlayCircleIcon = wrapIcon(PlayCircle);
+export var PlayIcon = wrapIcon(Play);
+export var PlusCircleIcon = wrapIcon(PlusCircle);
+export var PlusSquareIcon = wrapIcon(PlusSquare);
+export var PlusIcon = wrapIcon(Plus);
+export var PowerIcon = wrapIcon(Power);
+export var PrinterIcon = wrapIcon(Printer);
+export var RadioIcon = wrapIcon(Radio);
+export var RecoveryCodeIcon = wrapIcon(RecoveryCode);
+export var RefreshCcwIcon = wrapIcon(RefreshCcw);
+export var RefreshCwIcon = wrapIcon(RefreshCw);
+export var RepeatIcon = wrapIcon(Repeat);
+export var RewindIcon = wrapIcon(Rewind);
+export var RichTextIcon = wrapIcon(RichText);
+export var RotateCcwIcon = wrapIcon(RotateCcw);
+export var RotateCwIcon = wrapIcon(RotateCw);
+/** @deprecated */
+export var RssIcon = wrapIcon(Rss);
+export var SaveIcon = wrapIcon(Save);
+export var ScissorsIcon = wrapIcon(Scissors);
+export var SearchIcon = wrapIcon(Search);
+export var SendIcon = wrapIcon(Send);
+export var ServerIcon = wrapIcon(Server);
+export var SettingsIcon = wrapIcon(Settings);
+export var Share2Icon = wrapIcon(Share2);
+export var ShareIcon = wrapIcon(Share);
+export var ShieldOffIcon = wrapIcon(ShieldOff);
+export var ShieldIcon = wrapIcon(Shield);
+export var ShoppingBagIcon = wrapIcon(ShoppingBag);
+export var ShoppingCartIcon = wrapIcon(ShoppingCart);
+export var ShuffleIcon = wrapIcon(Shuffle);
+export var SidebarIcon = wrapIcon(Sidebar);
+export var SingleSignOnIcon = wrapIcon(SingleSignOn);
+export var SkipBackIcon = wrapIcon(SkipBack);
+export var SkipForwardIcon = wrapIcon(SkipForward);
+export var SlashIcon = wrapIcon(Slash);
+export var SlidersIcon = wrapIcon(Sliders);
+export var SmartphoneIcon = wrapIcon(Smartphone);
+export var SmileIcon = wrapIcon(Smile);
+export var SparkleIcon = wrapIcon(Sparkle);
+export var SpeakerIcon = wrapIcon(Speaker);
+export var SquareIcon = wrapIcon(Square);
+export var StarIcon = wrapIcon(Star);
+export var StopCircleIcon = wrapIcon(StopCircle);
+export var Store2Icon = wrapIcon(Store2);
+export var StoreIcon = wrapIcon(Store);
+export var SunIcon = wrapIcon(Sun);
+export var SunriseIcon = wrapIcon(Sunrise);
+export var SunsetIcon = wrapIcon(Sunset);
+export var TableIcon = wrapIcon(Table);
+export var TabletIcon = wrapIcon(Tablet);
+export var TagIcon = wrapIcon(Tag);
+export var TargetIcon = wrapIcon(Target);
+export var TerminalIcon = wrapIcon(Terminal);
+export var ThermometerIcon = wrapIcon(Thermometer);
+export var ThumbsDownIcon = wrapIcon(ThumbsDown);
+export var ThumbsUpIcon = wrapIcon(ThumbsUp);
+export var ToggleLeftIcon = wrapIcon(ToggleLeft);
+export var ToggleRightIcon = wrapIcon(ToggleRight);
+export var ToolIcon = wrapIcon(Tool);
+export var TrashIcon = wrapIcon(Trash);
+export var TrendingDownIcon = wrapIcon(TrendingDown);
+export var TrendingUpIcon = wrapIcon(TrendingUp);
+export var TriangleIcon = wrapIcon(Triangle);
+export var TruckIcon = wrapIcon(Truck);
+export var TvIcon = wrapIcon(Tv);
+export var TypeIcon = wrapIcon(Type);
+export var UmbrellaIcon = wrapIcon(Umbrella);
+export var UnderlineIcon = wrapIcon(Underline);
+export var UnlockIcon = wrapIcon(Unlock);
+export var UploadCloudIcon = wrapIcon(UploadCloud);
+export var UploadIcon = wrapIcon(Upload);
+export var UserCheckIcon = wrapIcon(UserCheck);
+export var UserMinusIcon = wrapIcon(UserMinus);
+export var UserPlusIcon = wrapIcon(UserPlus);
+export var UserXIcon = wrapIcon(UserX);
+export var UserIcon = wrapIcon(User);
+export var UsersIcon = wrapIcon(Users);
+export var VideoOffIcon = wrapIcon(VideoOff);
+export var VideoIcon = wrapIcon(Video);
+export var VoicemailIcon = wrapIcon(Voicemail);
+export var Volume1Icon = wrapIcon(Volume1);
+export var Volume2Icon = wrapIcon(Volume2);
+export var VolumeXIcon = wrapIcon(VolumeX);
+export var VolumeIcon = wrapIcon(Volume);
+export var WatchIcon = wrapIcon(Watch);
+/** @deprecated */
+export var WebAuthnPlatformIcon = wrapIcon(WebAuthnPlatform);
+export var WebAuthnIcon = wrapIcon(WebAuthn);
+export var Widget2Icon = wrapIcon(Widget2);
+export var WidgetIcon = wrapIcon(Widget);
+export var WifiOffIcon = wrapIcon(WifiOff);
+export var WifiIcon = wrapIcon(Wifi);
+export var WindIcon = wrapIcon(Wind);
+export var XCircleFilledIcon = wrapIcon(XCircleFilled);
+export var XCircleIcon = wrapIcon(XCircle);
+/** @deprecated */
+export var XOctagonIcon = wrapIcon(XOctagon);
+export var XSquareIcon = wrapIcon(XSquare);
+export var XIcon = wrapIcon(X);
+export var ZapOffIcon = wrapIcon(ZapOff);
+export var ZapIcon = wrapIcon(Zap);
+export var ZoomInIcon = wrapIcon(ZoomIn);
+export var ZoomOutIcon = wrapIcon(ZoomOut);

package/esm/icon-button/icon-button.js

@@ -43,7 +43,7 @@ var StyledIconButton = styled(MuiIconButton, {
             }) }, _b["&.".concat(iconButtonClasses.disabled)] = {
         backgroundColor: theme.palette.action.disabledBackground,
         color: theme.tokens.color_fg_default,
-    }, _b['& > svg:first-child'] = {
+    }, _b['& > svg'] = {
         height: '1em',
         width: '1em',
     }, _b)), (ownerState.shape === 'circular' && {