@metamask-previews/design-system-react 0.6.1-preview.ab80aae → 0.7.0-preview.3dc70e1

package/dist/types/index.mjs

@@ -1,25 +1,29 @@
-export const AvatarBaseSize = {
+/**
+ * AvatarBase - size
+ */
+export var AvatarBaseSize;
+(function (AvatarBaseSize) {
     /**
      * Represents an extra small avatar size (16px).
      */
-    Xs: 'xs',
+    AvatarBaseSize["Xs"] = "xs";
     /**
      * Represents a small avatar size (24px).
      */
-    Sm: 'sm',
+    AvatarBaseSize["Sm"] = "sm";
     /**
      * Represents a medium avatar size (32px).
      */
-    Md: 'md',
+    AvatarBaseSize["Md"] = "md";
     /**
      * Represents a large avatar size (40px).
      */
-    Lg: 'lg',
+    AvatarBaseSize["Lg"] = "lg";
     /**
      * Represents an extra large avatar size (48px).
      */
-    Xl: 'xl',
-};
+    AvatarBaseSize["Xl"] = "xl";
+})(AvatarBaseSize || (AvatarBaseSize = {}));
 export { AvatarBaseSize as AvatarAccountSize };
 export { AvatarBaseSize as AvatarFaviconSize };
 export { AvatarBaseSize as AvatarGroupSize };
@@ -27,427 +31,522 @@ export { AvatarBaseSize as AvatarIconSize };
 export { AvatarBaseSize as AvatarNetworkSize };
 export { AvatarBaseSize as AvatarTokenSize };
 export { AvatarBaseSize as AvatarSize };
-export const AvatarShape = {
+/**
+ * Avatar - shape
+ */
+export var AvatarShape;
+(function (AvatarShape) {
     /**
      * Represents a circular Avatar.
      */
-    Circle: 'circle',
+    AvatarShape["Circle"] = "circle";
     /**
      * Represents a squared Avatar
      */
-    Square: 'square',
-};
+    AvatarShape["Square"] = "square";
+})(AvatarShape || (AvatarShape = {}));
 export { AvatarShape as AvatarBaseShape };
-export const AvatarAccountVariant = {
-    Blockies: 'blockies',
-    Jazzicon: 'jazzicon',
-    Maskicon: 'maskicon',
-};
-export const AvatarIconSeverity = {
-    Neutral: 'neutral',
-    Info: 'info',
-    Success: 'success',
-    Error: 'error',
-    Warning: 'warning',
-};
-export const AvatarGroupVariant = {
-    Account: 'Account',
-    Favicon: 'Favicon',
-    Network: 'Network',
-    Token: 'Token',
-};
-export const BadgeCountSize = {
+/**
+ * AvatarAccount - variant
+ */
+export var AvatarAccountVariant;
+(function (AvatarAccountVariant) {
+    AvatarAccountVariant["Blockies"] = "blockies";
+    AvatarAccountVariant["Jazzicon"] = "jazzicon";
+    AvatarAccountVariant["Maskicon"] = "maskicon";
+})(AvatarAccountVariant || (AvatarAccountVariant = {}));
+/**
+ * AvatarIcon - severity
+ */
+export var AvatarIconSeverity;
+(function (AvatarIconSeverity) {
+    AvatarIconSeverity["Neutral"] = "neutral";
+    AvatarIconSeverity["Info"] = "info";
+    AvatarIconSeverity["Success"] = "success";
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    AvatarIconSeverity["Error"] = "error";
+    AvatarIconSeverity["Warning"] = "warning";
+})(AvatarIconSeverity || (AvatarIconSeverity = {}));
+/**
+ * AvatarGroup - variant
+ */
+export var AvatarGroupVariant;
+(function (AvatarGroupVariant) {
+    AvatarGroupVariant["Account"] = "account";
+    AvatarGroupVariant["Favicon"] = "favicon";
+    AvatarGroupVariant["Network"] = "network";
+    AvatarGroupVariant["Token"] = "token";
+})(AvatarGroupVariant || (AvatarGroupVariant = {}));
+/**
+ * BadgeCount - size
+ */
+export var BadgeCountSize;
+(function (BadgeCountSize) {
     /**
      * Represents a medium badge count (14px height).
      */
-    Md: 'md',
+    BadgeCountSize["Md"] = "md";
     /**
      * Represents a large badge count (20px height).
      */
-    Lg: 'lg',
-};
-export const BadgeStatusStatus = {
-    Active: 'active',
-    Inactive: 'inactive',
-    Disconnected: 'disconnected',
-    New: 'new',
-    Attention: 'attention',
-};
-export const BadgeStatusSize = {
-    /**
-     * Represents a medium badge status size (8px).
-     */
-    Md: 'md',
-    /**
-     * Represents a large avatar size (10px).
-     */
-    Lg: 'lg',
-};
-export const BadgeWrapperPositionAnchorShape = {
-    Rectangular: 'Rectangular',
-    Circular: 'Circular',
-};
-export const BadgeWrapperPosition = {
-    TopRight: 'TopRight',
-    BottomRight: 'BottomRight',
-    BottomLeft: 'BottomLeft',
-    TopLeft: 'TopLeft',
-};
-export const BoxFlexDirection = {
-    Row: 'flex-row',
-    RowReverse: 'flex-row-reverse',
-    Column: 'flex-col',
-    ColumnReverse: 'flex-col-reverse',
-};
-export const BoxFlexWrap = {
-    NoWrap: 'flex-nowrap',
-    Wrap: 'flex-wrap',
-    WrapReverse: 'flex-wrap-reverse',
-};
-export const BoxAlignItems = {
-    Start: 'items-start',
-    Center: 'items-center',
-    End: 'items-end',
-    Stretch: 'items-stretch',
-    Baseline: 'items-baseline',
-};
-export const BoxJustifyContent = {
-    Start: 'justify-start',
-    Center: 'justify-center',
-    End: 'justify-end',
-    Between: 'justify-between',
-    Around: 'justify-around',
-    Evenly: 'justify-evenly',
-};
-export const BoxBackgroundColor = {
+    BadgeCountSize["Lg"] = "lg";
+})(BadgeCountSize || (BadgeCountSize = {}));
+/**
+ * BadgeWrapper - positionAnchorShape
+ */
+export var BadgeWrapperPositionAnchorShape;
+(function (BadgeWrapperPositionAnchorShape) {
+    BadgeWrapperPositionAnchorShape["Rectangular"] = "rectangular";
+    BadgeWrapperPositionAnchorShape["Circular"] = "circular";
+})(BadgeWrapperPositionAnchorShape || (BadgeWrapperPositionAnchorShape = {}));
+/**
+ * BadgeWrapper - position.
+ */
+export var BadgeWrapperPosition;
+(function (BadgeWrapperPosition) {
+    BadgeWrapperPosition["TopRight"] = "top-right";
+    BadgeWrapperPosition["BottomRight"] = "bottom-right";
+    BadgeWrapperPosition["BottomLeft"] = "bottom-left";
+    BadgeWrapperPosition["TopLeft"] = "top-left";
+})(BadgeWrapperPosition || (BadgeWrapperPosition = {}));
+/**
+ * Box - flexDirection
+ */
+export var BoxFlexDirection;
+(function (BoxFlexDirection) {
+    BoxFlexDirection["Row"] = "flex-row";
+    BoxFlexDirection["RowReverse"] = "flex-row-reverse";
+    BoxFlexDirection["Column"] = "flex-col";
+    BoxFlexDirection["ColumnReverse"] = "flex-col-reverse";
+})(BoxFlexDirection || (BoxFlexDirection = {}));
+/**
+ * Box - flexWrap
+ */
+export var BoxFlexWrap;
+(function (BoxFlexWrap) {
+    BoxFlexWrap["NoWrap"] = "flex-nowrap";
+    BoxFlexWrap["Wrap"] = "flex-wrap";
+    BoxFlexWrap["WrapReverse"] = "flex-wrap-reverse";
+})(BoxFlexWrap || (BoxFlexWrap = {}));
+/**
+ * Box - alignItems
+ */
+export var BoxAlignItems;
+(function (BoxAlignItems) {
+    BoxAlignItems["Start"] = "items-start";
+    BoxAlignItems["Center"] = "items-center";
+    BoxAlignItems["End"] = "items-end";
+    BoxAlignItems["Stretch"] = "items-stretch";
+    BoxAlignItems["Baseline"] = "items-baseline";
+})(BoxAlignItems || (BoxAlignItems = {}));
+/**
+ * Box - justifyContent
+ */
+export var BoxJustifyContent;
+(function (BoxJustifyContent) {
+    BoxJustifyContent["Start"] = "justify-start";
+    BoxJustifyContent["Center"] = "justify-center";
+    BoxJustifyContent["End"] = "justify-end";
+    BoxJustifyContent["Between"] = "justify-between";
+    BoxJustifyContent["Around"] = "justify-around";
+    BoxJustifyContent["Evenly"] = "justify-evenly";
+})(BoxJustifyContent || (BoxJustifyContent = {}));
+/**
+ * Box - backgroundColor
+ */
+export var BoxBackgroundColor;
+(function (BoxBackgroundColor) {
     /** Default background color */
-    BackgroundDefault: 'bg-default',
+    BoxBackgroundColor["BackgroundDefault"] = "bg-default";
     /** Alternative background color */
-    BackgroundAlternative: 'bg-alternative',
+    BoxBackgroundColor["BackgroundAlternative"] = "bg-alternative";
     /** Section background color */
-    BackgroundSection: 'bg-section',
+    BoxBackgroundColor["BackgroundSection"] = "bg-section";
     /** Subsection background color */
-    BackgroundSubsection: 'bg-subsection',
+    BoxBackgroundColor["BackgroundSubsection"] = "bg-subsection";
     /** Muted background color */
-    BackgroundMuted: 'bg-muted',
+    BoxBackgroundColor["BackgroundMuted"] = "bg-muted";
     /** Primary default background color */
-    PrimaryDefault: 'bg-primary-default',
+    BoxBackgroundColor["PrimaryDefault"] = "bg-primary-default";
     /** Primary alternative background color */
-    PrimaryAlternative: 'bg-primary-alternative',
+    BoxBackgroundColor["PrimaryAlternative"] = "bg-primary-alternative";
     /** Primary muted background color */
-    PrimaryMuted: 'bg-primary-muted',
+    BoxBackgroundColor["PrimaryMuted"] = "bg-primary-muted";
     /** Primary inverse background color */
-    PrimaryInverse: 'bg-primary-inverse',
+    BoxBackgroundColor["PrimaryInverse"] = "bg-primary-inverse";
     /** Error default background color */
-    ErrorDefault: 'bg-error-default',
+    BoxBackgroundColor["ErrorDefault"] = "bg-error-default";
     /** Error alternative background color */
-    ErrorAlternative: 'bg-error-alternative',
+    BoxBackgroundColor["ErrorAlternative"] = "bg-error-alternative";
     /** Error muted background color */
-    ErrorMuted: 'bg-error-muted',
+    BoxBackgroundColor["ErrorMuted"] = "bg-error-muted";
     /** Error inverse background color */
-    ErrorInverse: 'bg-error-inverse',
+    BoxBackgroundColor["ErrorInverse"] = "bg-error-inverse";
     /** Warning default background color */
-    WarningDefault: 'bg-warning-default',
+    BoxBackgroundColor["WarningDefault"] = "bg-warning-default";
     /** Warning alternative background color */
-    WarningAlternative: 'bg-warning-alternative',
+    BoxBackgroundColor["WarningAlternative"] = "bg-warning-alternative";
     /** Warning muted background color */
-    WarningMuted: 'bg-warning-muted',
+    BoxBackgroundColor["WarningMuted"] = "bg-warning-muted";
     /** Warning inverse background color */
-    WarningInverse: 'bg-warning-inverse',
+    BoxBackgroundColor["WarningInverse"] = "bg-warning-inverse";
     /** Success default background color */
-    SuccessDefault: 'bg-success-default',
+    BoxBackgroundColor["SuccessDefault"] = "bg-success-default";
     /** Success alternative background color */
-    SuccessAlternative: 'bg-success-alternative',
+    BoxBackgroundColor["SuccessAlternative"] = "bg-success-alternative";
     /** Success muted background color */
-    SuccessMuted: 'bg-success-muted',
+    BoxBackgroundColor["SuccessMuted"] = "bg-success-muted";
     /** Success inverse background color */
-    SuccessInverse: 'bg-success-inverse',
+    BoxBackgroundColor["SuccessInverse"] = "bg-success-inverse";
     /** Info default background color */
-    InfoDefault: 'bg-info-default',
+    BoxBackgroundColor["InfoDefault"] = "bg-info-default";
     /** Info muted background color */
-    InfoMuted: 'bg-info-muted',
+    BoxBackgroundColor["InfoMuted"] = "bg-info-muted";
     /** Info inverse background color */
-    InfoInverse: 'bg-info-inverse',
+    BoxBackgroundColor["InfoInverse"] = "bg-info-inverse";
     /** Flask default background color */
-    FlaskDefault: 'bg-flask-default',
+    BoxBackgroundColor["FlaskDefault"] = "bg-flask-default";
     /** Flask inverse background color */
-    FlaskInverse: 'bg-flask-inverse',
+    BoxBackgroundColor["FlaskInverse"] = "bg-flask-inverse";
     /** Overlay alternative background color */
-    OverlayAlternative: 'bg-overlay-alternative',
+    BoxBackgroundColor["OverlayAlternative"] = "bg-overlay-alternative";
     /** Overlay default background color */
-    OverlayDefault: 'bg-overlay-default',
+    BoxBackgroundColor["OverlayDefault"] = "bg-overlay-default";
     /** Overlay inverse background color */
-    OverlayInverse: 'bg-overlay-inverse',
+    BoxBackgroundColor["OverlayInverse"] = "bg-overlay-inverse";
     /** Transparent background color */
-    Transparent: 'bg-transparent',
-};
-export const BoxBorderColor = {
+    BoxBackgroundColor["Transparent"] = "bg-transparent";
+})(BoxBackgroundColor || (BoxBackgroundColor = {}));
+/**
+ * Box - borderColor
+ */
+export var BoxBorderColor;
+(function (BoxBorderColor) {
     /** Background default for cut out effect */
-    BackgroundDefault: 'border-background-default',
+    BoxBorderColor["BackgroundDefault"] = "border-background-default";
     /** Default border color */
-    BorderDefault: 'border-default',
+    BoxBorderColor["BorderDefault"] = "border-default";
     /** Muted border color */
-    BorderMuted: 'border-muted',
+    BoxBorderColor["BorderMuted"] = "border-muted";
     /** Primary default border color */
-    PrimaryDefault: 'border-primary-default',
+    BoxBorderColor["PrimaryDefault"] = "border-primary-default";
     /** Primary alternative border color */
-    PrimaryAlternative: 'border-primary-alternative',
+    BoxBorderColor["PrimaryAlternative"] = "border-primary-alternative";
     /** Primary muted border color */
-    PrimaryMuted: 'border-primary-muted',
+    BoxBorderColor["PrimaryMuted"] = "border-primary-muted";
     /** Primary inverse border color */
-    PrimaryInverse: 'border-primary-inverse',
+    BoxBorderColor["PrimaryInverse"] = "border-primary-inverse";
     /** Error default border color */
-    ErrorDefault: 'border-error-default',
+    BoxBorderColor["ErrorDefault"] = "border-error-default";
     /** Error alternative border color */
-    ErrorAlternative: 'border-error-alternative',
+    BoxBorderColor["ErrorAlternative"] = "border-error-alternative";
     /** Error muted border color */
-    ErrorMuted: 'border-error-muted',
+    BoxBorderColor["ErrorMuted"] = "border-error-muted";
     /** Error inverse border color */
-    ErrorInverse: 'border-error-inverse',
+    BoxBorderColor["ErrorInverse"] = "border-error-inverse";
     /** Warning default border color */
-    WarningDefault: 'border-warning-default',
+    BoxBorderColor["WarningDefault"] = "border-warning-default";
     /** Warning alternative border color */
-    WarningAlternative: 'border-warning-alternative',
+    BoxBorderColor["WarningAlternative"] = "border-warning-alternative";
     /** Warning muted border color */
-    WarningMuted: 'border-warning-muted',
+    BoxBorderColor["WarningMuted"] = "border-warning-muted";
     /** Warning inverse border color */
-    WarningInverse: 'border-warning-inverse',
+    BoxBorderColor["WarningInverse"] = "border-warning-inverse";
     /** Success default border color */
-    SuccessDefault: 'border-success-default',
+    BoxBorderColor["SuccessDefault"] = "border-success-default";
     /** Success alternative border color */
-    SuccessAlternative: 'border-success-alternative',
+    BoxBorderColor["SuccessAlternative"] = "border-success-alternative";
     /** Success muted border color */
-    SuccessMuted: 'border-success-muted',
+    BoxBorderColor["SuccessMuted"] = "border-success-muted";
     /** Success inverse border color */
-    SuccessInverse: 'border-success-inverse',
+    BoxBorderColor["SuccessInverse"] = "border-success-inverse";
     /** Info default border color */
-    InfoDefault: 'border-info-default',
+    BoxBorderColor["InfoDefault"] = "border-info-default";
     /** Info alternative border color */
-    InfoAlternative: 'border-info-alternative',
+    BoxBorderColor["InfoAlternative"] = "border-info-alternative";
     /** Info muted border color */
-    InfoMuted: 'border-info-muted',
+    BoxBorderColor["InfoMuted"] = "border-info-muted";
     /** Info inverse border color */
-    InfoInverse: 'border-info-inverse',
+    BoxBorderColor["InfoInverse"] = "border-info-inverse";
     /** Flask default border color */
-    FlaskDefault: 'border-flask-default',
+    BoxBorderColor["FlaskDefault"] = "border-flask-default";
     /** Flask inverse border color */
-    FlaskInverse: 'border-flask-inverse',
+    BoxBorderColor["FlaskInverse"] = "border-flask-inverse";
     /** Overlay alternative border color */
-    OverlayAlternative: 'border-overlay-alternative',
+    BoxBorderColor["OverlayAlternative"] = "border-overlay-alternative";
     /** Overlay default border color */
-    OverlayDefault: 'border-overlay-default',
+    BoxBorderColor["OverlayDefault"] = "border-overlay-default";
     /** Overlay inverse border color */
-    OverlayInverse: 'border-overlay-inverse',
+    BoxBorderColor["OverlayInverse"] = "border-overlay-inverse";
     /** Transparent border color */
-    Transparent: 'border-transparent',
-};
-export const ButtonBaseSize = {
+    BoxBorderColor["Transparent"] = "border-transparent";
+})(BoxBorderColor || (BoxBorderColor = {}));
+/**
+ * ButtonBase - size
+ */
+export var ButtonBaseSize;
+(function (ButtonBaseSize) {
     /**
      * Represents a small button size (32px).
      */
-    Sm: 'sm',
+    ButtonBaseSize["Sm"] = "sm";
     /**
      * Represents a medium button size (40px).
      */
-    Md: 'md',
+    ButtonBaseSize["Md"] = "md";
     /**
      * Represents a large button size (48px).
      */
-    Lg: 'lg',
-};
+    ButtonBaseSize["Lg"] = "lg";
+})(ButtonBaseSize || (ButtonBaseSize = {}));
 export { ButtonBaseSize as ButtonPrimarySize };
 export { ButtonBaseSize as ButtonSecondarySize };
 export { ButtonBaseSize as ButtonTertiarySize };
 export { ButtonBaseSize as ButtonHeroSize };
 export { ButtonBaseSize as ButtonSize };
-export const ButtonVariant = {
+/**
+ * Button - variant
+ */
+export var ButtonVariant;
+(function (ButtonVariant) {
     /**
      * Primary button variant - used for primary actions
      */
-    Primary: 'primary',
+    ButtonVariant["Primary"] = "primary";
     /**
      * Secondary button variant - used for secondary actions
      */
-    Secondary: 'secondary',
+    ButtonVariant["Secondary"] = "secondary";
     /**
      * Tertiary button variant - used for tertiary-like actions
      */
-    Tertiary: 'tertiary',
-};
-export const ButtonIconSize = {
+    ButtonVariant["Tertiary"] = "tertiary";
+})(ButtonVariant || (ButtonVariant = {}));
+/**
+ * ButtonIcon - size
+ */
+export var ButtonIconSize;
+(function (ButtonIconSize) {
     /**
      * Represents a small button size (24px).
      */
-    Sm: 'sm',
+    ButtonIconSize["Sm"] = "sm";
     /**
      * Represents a medium button size (32px).
      */
-    Md: 'md',
+    ButtonIconSize["Md"] = "md";
     /**
      * Represents a large button size (40px).
      */
-    Lg: 'lg',
-};
-export const TextVariant = {
+    ButtonIconSize["Lg"] = "lg";
+})(ButtonIconSize || (ButtonIconSize = {}));
+/**
+ * Text - variant
+ */
+export var TextVariant;
+(function (TextVariant) {
     // Display Sizes
-    DisplayLg: 'display-lg',
-    DisplayMd: 'display-md',
+    TextVariant["DisplayLg"] = "display-lg";
+    TextVariant["DisplayMd"] = "display-md";
     // Heading Sizes
-    HeadingLg: 'heading-lg',
-    HeadingMd: 'heading-md',
-    HeadingSm: 'heading-sm',
+    TextVariant["HeadingLg"] = "heading-lg";
+    TextVariant["HeadingMd"] = "heading-md";
+    TextVariant["HeadingSm"] = "heading-sm";
     // Font Sizes
-    BodyLg: 'body-lg',
-    BodyMd: 'body-md',
-    BodySm: 'body-sm',
-    BodyXs: 'body-xs',
+    TextVariant["BodyLg"] = "body-lg";
+    TextVariant["BodyMd"] = "body-md";
+    TextVariant["BodySm"] = "body-sm";
+    TextVariant["BodyXs"] = "body-xs";
     // Special Typography Variants
-    PageHeading: 'page-heading',
-    SectionHeading: 'section-heading',
-    ButtonLabelMd: 'button-label-md',
-    ButtonLabelLg: 'button-label-lg',
-    AmountDisplayLg: 'amount-display-lg',
-};
-export const TextColor = {
+    TextVariant["PageHeading"] = "page-heading";
+    TextVariant["SectionHeading"] = "section-heading";
+    TextVariant["ButtonLabelMd"] = "button-label-md";
+    TextVariant["ButtonLabelLg"] = "button-label-lg";
+    TextVariant["AmountDisplayLg"] = "amount-display-lg";
+})(TextVariant || (TextVariant = {}));
+/**
+ * Text - color
+ */
+export var TextColor;
+(function (TextColor) {
     /** For default neutral text. */
-    TextDefault: 'text-default',
+    TextColor["TextDefault"] = "text-default";
     /** For softer contrast neutral text */
-    TextAlternative: 'text-alternative',
+    TextColor["TextAlternative"] = "text-alternative";
     /** For the softest contrast neutral text (not accessible) */
-    TextMuted: 'text-muted',
+    TextColor["TextMuted"] = "text-muted";
     /** For elements used on top of overlay/alternative. Used for text, icon or border */
-    OverlayInverse: 'text-overlay-inverse',
+    TextColor["OverlayInverse"] = "text-overlay-inverse";
     /** For interactive, active, and selected semantics. Used for text, background, icon or border */
-    PrimaryDefault: 'text-primary-default',
+    TextColor["PrimaryDefault"] = "text-primary-default";
     /** For primary text in a hover state. */
-    PrimaryDefaultHover: 'text-primary-default-hover',
+    TextColor["PrimaryDefaultHover"] = "text-primary-default-hover";
     /** For primary text in a pressed state. */
-    PrimaryDefaultPressed: 'text-primary-default-pressed',
+    TextColor["PrimaryDefaultPressed"] = "text-primary-default-pressed";
     /** For elements used on top of primary/default. Used for text, icon or border */
-    PrimaryInverse: 'text-primary-inverse',
+    TextColor["PrimaryInverse"] = "text-primary-inverse";
     /** For the critical alert semantic elements. Used for text, background, icon or border */
-    ErrorDefault: 'text-error-default',
+    TextColor["ErrorDefault"] = "text-error-default";
     /** For critical alert text in a hover state. */
-    ErrorDefaultHover: 'text-error-default-hover',
+    TextColor["ErrorDefaultHover"] = "text-error-default-hover";
     /** For critical alert text in a pressed state. */
-    ErrorDefaultPressed: 'text-error-default-pressed',
+    TextColor["ErrorDefaultPressed"] = "text-error-default-pressed";
     /** For the stronger contrast error semantic elements. */
-    ErrorAlternative: 'text-error-alternative',
+    TextColor["ErrorAlternative"] = "text-error-alternative";
     /** For elements used on top of error/default. Used for text, icon or border */
-    ErrorInverse: 'text-error-inverse',
+    TextColor["ErrorInverse"] = "text-error-inverse";
     /** For the positive semantic elements. Used for text, background, icon or border */
-    SuccessDefault: 'text-success-default',
+    TextColor["SuccessDefault"] = "text-success-default";
     /** For positive text in a hover state. */
-    SuccessDefaultHover: 'text-success-default-hover',
+    TextColor["SuccessDefaultHover"] = "text-success-default-hover";
     /** For positive text in a pressed state. */
-    SuccessDefaultPressed: 'text-success-default-pressed',
+    TextColor["SuccessDefaultPressed"] = "text-success-default-pressed";
     /** For elements used on top of success/default. Used for text, icon or border */
-    SuccessInverse: 'text-success-inverse',
+    TextColor["SuccessInverse"] = "text-success-inverse";
     /** For the caution alert semantic elements. Used for text, background, icon or border */
-    WarningDefault: 'text-warning-default',
+    TextColor["WarningDefault"] = "text-warning-default";
     /** For caution text in a hover state. */
-    WarningDefaultHover: 'text-warning-default-hover',
+    TextColor["WarningDefaultHover"] = "text-warning-default-hover";
     /** For caution text in a pressed state. */
-    WarningDefaultPressed: 'text-warning-default-pressed',
+    TextColor["WarningDefaultPressed"] = "text-warning-default-pressed";
     /** For elements used on top of warning/default. Used for text, icon or border */
-    WarningInverse: 'text-warning-inverse',
+    TextColor["WarningInverse"] = "text-warning-inverse";
     /** For informational read-only elements. Used for text, background, icon or border */
-    InfoDefault: 'text-info-default',
+    TextColor["InfoDefault"] = "text-info-default";
     /** For elements used on top of info/default. Used for text, icon or border */
-    InfoInverse: 'text-info-inverse',
+    TextColor["InfoInverse"] = "text-info-inverse";
     /** Inherit the color of the parent element */
-    Inherit: 'text-inherit',
+    TextColor["Inherit"] = "text-inherit";
     /** Make the text color transparent */
-    Transparent: 'text-transparent',
-};
-export const TextAlign = {
-    Left: 'text-left',
-    Center: 'text-center',
-    Right: 'text-right',
-    Justify: 'text-justify',
-};
-export const FontWeight = {
+    TextColor["Transparent"] = "text-transparent";
+})(TextColor || (TextColor = {}));
+/**
+ * Text - textAlign
+ */
+export var TextAlign;
+(function (TextAlign) {
+    TextAlign["Left"] = "text-left";
+    TextAlign["Center"] = "text-center";
+    TextAlign["Right"] = "text-right";
+    TextAlign["Justify"] = "text-justify";
+})(TextAlign || (TextAlign = {}));
+/**
+ * Text - fontWeight
+ */
+export var FontWeight;
+(function (FontWeight) {
     /**
      * Weight - 700
      */
-    Bold: 'font-bold',
+    FontWeight["Bold"] = "font-bold";
     /**
      * Weight - 500
      */
-    Medium: 'font-medium',
+    FontWeight["Medium"] = "font-medium";
     /**
      * Weight - 400
      */
-    Regular: 'font-regular',
-};
-export const OverflowWrap = {
-    BreakWord: 'break-words',
-    Anywhere: 'break-all',
-    Normal: 'break-normal',
-};
-export const FontStyle = {
-    Italic: 'italic',
-    Normal: 'not-italic',
-};
-export const TextTransform = {
-    Uppercase: 'uppercase',
-    Lowercase: 'lowercase',
-    Capitalize: 'capitalize',
-    Normal: 'normal-case',
-};
-export const FontFamily = {
-    Default: 'font-default',
-    Accent: 'font-accent',
-    Hero: 'font-hero',
-};
-export const TextButtonSize = {
-    BodyLg: 'body-lg',
-    BodyMd: 'body-md',
-    BodySm: 'body-sm',
-    BodyXs: 'body-xs',
-};
-export const IconSize = {
+    FontWeight["Regular"] = "font-regular";
+})(FontWeight || (FontWeight = {}));
+/**
+ * Text - overflowWrap
+ */
+export var OverflowWrap;
+(function (OverflowWrap) {
+    OverflowWrap["BreakWord"] = "break-words";
+    OverflowWrap["Anywhere"] = "break-all";
+    OverflowWrap["Normal"] = "break-normal";
+})(OverflowWrap || (OverflowWrap = {}));
+/**
+ * Text - fontStyle
+ */
+export var FontStyle;
+(function (FontStyle) {
+    FontStyle["Italic"] = "italic";
+    FontStyle["Normal"] = "not-italic";
+})(FontStyle || (FontStyle = {}));
+/**
+ * Text - textTransform
+ */
+export var TextTransform;
+(function (TextTransform) {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    TextTransform["Uppercase"] = "uppercase";
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    TextTransform["Lowercase"] = "lowercase";
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    TextTransform["Capitalize"] = "capitalize";
+    TextTransform["Normal"] = "normal-case";
+})(TextTransform || (TextTransform = {}));
+/**
+ * Text - fontFamily
+ */
+export var FontFamily;
+(function (FontFamily) {
+    FontFamily["Default"] = "font-default";
+    FontFamily["Accent"] = "font-accent";
+    FontFamily["Hero"] = "font-hero";
+})(FontFamily || (FontFamily = {}));
+/**
+ * TextButton - size
+ */
+export var TextButtonSize;
+(function (TextButtonSize) {
+    TextButtonSize["BodyLg"] = "body-lg";
+    TextButtonSize["BodyMd"] = "body-md";
+    TextButtonSize["BodySm"] = "body-sm";
+    TextButtonSize["BodyXs"] = "body-xs";
+})(TextButtonSize || (TextButtonSize = {}));
+/**
+ * Icon - size
+ */
+export var IconSize;
+(function (IconSize) {
     /** Extra small - 12px */
-    Xs: 'xs',
+    IconSize["Xs"] = "xs";
     /** Small - 16px */
-    Sm: 'sm',
+    IconSize["Sm"] = "sm";
     /** Medium - 20px (Default) */
-    Md: 'md',
+    IconSize["Md"] = "md";
     /** Large - 24px */
-    Lg: 'lg',
+    IconSize["Lg"] = "lg";
     /** Extra large - 32px */
-    Xl: 'xl',
-};
-export const IconColor = {
+    IconSize["Xl"] = "xl";
+})(IconSize || (IconSize = {}));
+/**
+ * Icon - color
+ */
+export var IconColor;
+(function (IconColor) {
     /** For default neutral icons */
-    IconDefault: 'text-icon-default',
+    IconColor["IconDefault"] = "text-icon-default";
     /** For softer neutral icons */
-    IconAlternative: 'text-icon-alternative',
+    IconColor["IconAlternative"] = "text-icon-alternative";
     /** For the weakest contrast neutral icons (not accessible) */
-    IconMuted: 'text-icon-muted',
+    IconColor["IconMuted"] = "text-icon-muted";
     /** For elements used on top of overlay/alternative. Used for text, icon or border */
-    OverlayInverse: 'text-overlay-inverse',
+    IconColor["OverlayInverse"] = "text-overlay-inverse";
     /** For interactive, active, and selected semantics. Used for text, background, icon or border */
-    PrimaryDefault: 'text-primary-default',
+    IconColor["PrimaryDefault"] = "text-primary-default";
     /** For elements used on top of primary/default. Used for text, icon or border */
-    PrimaryInverse: 'text-primary-inverse',
+    IconColor["PrimaryInverse"] = "text-primary-inverse";
     /** For the critical alert semantic elements. Used for text, background, icon or border */
-    ErrorDefault: 'text-error-default',
+    IconColor["ErrorDefault"] = "text-error-default";
     /** For elements used on top of error/default. Used for text, icon or border */
-    ErrorInverse: 'text-error-inverse',
+    IconColor["ErrorInverse"] = "text-error-inverse";
     /** For the positive semantic elements. Used for text, background, icon or border */
-    SuccessDefault: 'text-success-default',
+    IconColor["SuccessDefault"] = "text-success-default";
     /** For elements used on top of success/default. Used for text, icon or border */
-    SuccessInverse: 'text-success-inverse',
+    IconColor["SuccessInverse"] = "text-success-inverse";
     /** For the caution alert semantic elements. Used for text, background, icon or border */
-    WarningDefault: 'text-warning-default',
+    IconColor["WarningDefault"] = "text-warning-default";
     /** For elements used on top of warning/default. Used for text, icon or border */
-    WarningInverse: 'text-warning-inverse',
+    IconColor["WarningInverse"] = "text-warning-inverse";
     /** For informational read-only elements. Used for text, background, icon or border */
-    InfoDefault: 'text-info-default',
+    IconColor["InfoDefault"] = "text-info-default";
     /** For elements used on top of info/default. Used for text, icon or border */
-    InfoInverse: 'text-info-inverse',
-};
+    IconColor["InfoInverse"] = "text-info-inverse";
+})(IconColor || (IconColor = {}));
 /**
  * Autogenerated from the generate-icon-script.ts script.
  * Please do not edit this enum directly.
@@ -633,6 +732,7 @@ export var IconName;
     IconName["Plug"] = "Plug";
     IconName["PlusAndMinus"] = "PlusAndMinus";
     IconName["PolicyAlert"] = "PolicyAlert";
+    IconName["PopUp"] = "PopUp";
     IconName["Print"] = "Print";
     IconName["PriorityHigh"] = "PriorityHigh";
     IconName["PrivacyTip"] = "PrivacyTip";
@@ -673,6 +773,7 @@ export var IconName;
     IconName["ShieldLock"] = "ShieldLock";
     IconName["ShoppingBag"] = "ShoppingBag";
     IconName["ShoppingCart"] = "ShoppingCart";
+    IconName["SidePanel"] = "SidePanel";
     IconName["SignalCellular"] = "SignalCellular";
     IconName["Slash"] = "Slash";
     IconName["Sms"] = "Sms";