@zonos/amino 5.5.30 → 5.5.32

package/components/avatar/AvatarBase.d.ts

@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type ImageSize = 16 | 24 | 32 | 40 | 48 | 56 | 64;
+export declare const avatarShapes: {
+    readonly round: "50%";
+    readonly rounded: "";
+    readonly square: "0px";
+};
+type AvatarShape = keyof typeof avatarShapes;
+type AvatarStyleProps = {
+    backgroundColor?: string;
+    backgroundPosition?: string;
+    backgroundSize?: string;
+    backgroundUrl?: string;
+};
+export type AvatarProps = {
+    /** @default false */
+    bordered?: boolean;
+    /** @default round */
+    shape?: AvatarShape;
+    /** @default 32 px */
+    size?: ImageSize;
+};
+export type FullAvatarProps = BaseProps & {
+    /** @default false */
+    bordered?: boolean;
+    /** @default round */
+    shape?: AvatarShape;
+    /** @default 32 px */
+    size?: ImageSize;
+};
+type AvatarBaseProps = BaseProps & {
+    children?: ReactNode;
+} & Required<AvatarProps> & AvatarStyleProps;
+/**
+ * AvatarBase is the foundation component for all avatar variations in the Amino design system.
+ * It provides consistent styling and layout for avatars with customizable appearance.
+ *
+ * This component is not typically used directly. Instead, use one of the specialized
+ * avatar components like ImageAvatar or UserAvatar that build upon this base.
+ *
+ * @component Avatar
+ *
+ * @example Custom avatar implementation
+ * <AvatarBase
+ *   backgroundColor={theme.blue100}
+ *   bordered={true}
+ *   shape="rounded"
+ *   size={48}
+ * >
+ *   <Text fontWeight={700} textAlign="center">AB</Text>
+ * </AvatarBase>
+ *
+ * @example Background image with custom styling
+ * <AvatarBase
+ *   backgroundUrl="https://example.com/image.jpg"
+ *   backgroundSize="cover"
+ *   backgroundPosition="center"
+ *   shape="square"
+ *   size={64}
+ * />
+ *
+ * @example Avatar with child content
+ * <AvatarBase
+ *   size={40}
+ *   shape="round"
+ *   backgroundColor={theme.gray200}
+ * >
+ *   <IconUser size={24} color="gray600" />
+ * </AvatarBase>
+ */
+export declare const AvatarBase: ({ backgroundColor, backgroundPosition, backgroundSize, backgroundUrl, bordered, children, className, shape, size, style, }: AvatarBaseProps) => import("react").JSX.Element;
+export {};

package/components/avatar/AvatarBase.js

@@ -1 +1 @@
-"use strict";var a=require("../../tslib.es6-8c21e256.js"),e=require("clsx"),r=require("../../styles/constants/theme.js"),o=require("../../style-inject.es-d4ddeae4.js");function t(a){return a&&a.__esModule?a:{default:a}}var n=t(e),s="Amino_AvatarBase-module__wrapper--gUJPn",i="Amino_AvatarBase-module__styledAvatarBase--CnTXf";o.styleInject(".Amino_AvatarBase-module__wrapper--gUJPn{align-items:center;border:var(--amino-avatar-base-border);border-radius:var(--amino-avatar-base-border-radius);display:flex;height:var(--amino-avatar-base-height);justify-content:center;width:var(--amino-avatar-base-width)}.Amino_AvatarBase-module__styledAvatarBase--CnTXf{background-color:var(--amino-avatar-base-background-color);background-image:var(--amino-avatar-base-background-image);background-position:var(--amino-avatar-base-background-position);background-repeat:no-repeat;background-size:var(--amino-avatar-base-background-size);border-radius:var(--amino-avatar-base-border-radius);height:100%;width:100%}");var d={round:"50%",rounded:"",square:"0px"};exports.AvatarBase=function(e){var o=e.backgroundColor,t=e.backgroundPosition,c=e.backgroundSize,b=e.backgroundUrl,u=e.bordered,v=e.children,m=e.className,l=e.shape,g=e.size,p=e.style;return React.createElement("div",{className:n.default(s,m),style:a.__assign(a.__assign({},p),{"--amino-avatar-base-background-color":o||"".concat(r.theme.gray100),"--amino-avatar-base-background-image":"url(".concat(b,")"),"--amino-avatar-base-background-position":t||"center","--amino-avatar-base-background-size":c||"","--amino-avatar-base-border":u?"".concat(g/16,"px solid ").concat(r.theme.gray0):"","--amino-avatar-base-border-radius":"rounded"===l?"".concat(2*(g/8-1),"px"):d[l],"--amino-avatar-base-height":"".concat(g,"px"),"--amino-avatar-base-width":"".concat(g,"px")})},v||React.createElement("div",{className:i}))},exports.avatarShapes=d;
+"use strict";var a=require("../../tslib.es6-8c21e256.js"),r=require("clsx"),e=require("../../styles/constants/theme.js"),o=require("../../style-inject.es-d4ddeae4.js"),t=require("react/jsx-runtime");function s(a){return a&&a.__esModule?a:{default:a}}var n=s(r),i="Amino_AvatarBase-module__wrapper--gUJPn",d="Amino_AvatarBase-module__styledAvatarBase--CnTXf";o.styleInject(".Amino_AvatarBase-module__wrapper--gUJPn{align-items:center;border:var(--amino-avatar-base-border);border-radius:var(--amino-avatar-base-border-radius);display:flex;height:var(--amino-avatar-base-height);justify-content:center;width:var(--amino-avatar-base-width)}.Amino_AvatarBase-module__styledAvatarBase--CnTXf{background-color:var(--amino-avatar-base-background-color);background-image:var(--amino-avatar-base-background-image);background-position:var(--amino-avatar-base-background-position);background-repeat:no-repeat;background-size:var(--amino-avatar-base-background-size);border-radius:var(--amino-avatar-base-border-radius);height:100%;width:100%}");var c={round:"50%",rounded:"",square:"0px"};exports.AvatarBase=function(r){var o=r.backgroundColor,s=r.backgroundPosition,u=r.backgroundSize,b=r.backgroundUrl,v=r.bordered,m=r.children,g=r.className,l=r.shape,h=r.size,p=r.style;return t.jsx("div",{className:n.default(i,g),style:a.__assign(a.__assign({},p),{"--amino-avatar-base-background-color":o||"".concat(e.theme.gray100),"--amino-avatar-base-background-image":"url(".concat(b,")"),"--amino-avatar-base-background-position":s||"center","--amino-avatar-base-background-size":u||"","--amino-avatar-base-border":v?"".concat(h/16,"px solid ").concat(e.theme.gray0):"","--amino-avatar-base-border-radius":"rounded"===l?"".concat(2*(h/8-1),"px"):c[l],"--amino-avatar-base-height":"".concat(h,"px"),"--amino-avatar-base-width":"".concat(h,"px")}),children:m||t.jsx("div",{className:d})})},exports.avatarShapes=c;

package/components/avatar/ImageAvatar.d.ts

@@ -0,0 +1,56 @@
+import { type FullAvatarProps } from "./AvatarBase";
+export type ImageAvatarProps = {
+    imageUrl: string;
+} & FullAvatarProps;
+/**
+ * ImageAvatar displays an image in a standardized avatar format with consistent sizing and styling.
+ * Use this component when you need to show profile pictures, product images, or any custom image
+ * in an avatar format.
+ *
+ * @component Avatar
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ImageAvatar
+ *   imageUrl="https://example.com/profile.jpg"
+ * />
+ * ```
+ *
+ * @example With custom size and shape
+ * ```tsx
+ * <ImageAvatar
+ *   imageUrl="https://example.com/profile.jpg"
+ *   size={48}
+ *   shape="square"
+ *   bordered
+ * />
+ * ```
+ *
+ * @example Multiple sizes in a user profile
+ * ```tsx
+ * <VStack gap={16} alignItems="center">
+ *   <ImageAvatar
+ *     imageUrl="https://example.com/profile.jpg"
+ *     size={64}
+ *     bordered
+ *   />
+ *   <Text type="heading">Jane Smith</Text>
+ *   <Text type="subheader" color={theme.gray600}>Product Manager</Text>
+ * </VStack>
+ * ```
+ *
+ * @example Image avatars in a horizontal list
+ * ```tsx
+ * <HStack gap={8}>
+ *   {users.map(user => (
+ *     <ImageAvatar
+ *       key={user.id}
+ *       imageUrl={user.profileImage}
+ *       size={32}
+ *       shape="rounded"
+ *     />
+ *   ))}
+ * </HStack>
+ * ```
+ */
+export declare const ImageAvatar: ({ bordered, className, imageUrl, shape, size, style, }: ImageAvatarProps) => import("react").JSX.Element;

package/components/avatar/ImageAvatar.js

@@ -1 +1 @@
-"use strict";var e=require("./AvatarBase.js");require("../../tslib.es6-8c21e256.js"),require("clsx"),require("../../styles/constants/theme.js"),require("../../style-inject.es-d4ddeae4.js");exports.ImageAvatar=function(r){var s=r.bordered,a=void 0!==s&&s,t=r.className,i=r.imageUrl,n=r.shape,o=void 0===n?"round":n,c=r.size,l=void 0===c?32:c,u=r.style;return React.createElement(e.AvatarBase,{backgroundColor:"transparent",backgroundSize:"contain",backgroundUrl:i,bordered:a,className:t,shape:o,size:l,style:u})};
+"use strict";var e=require("./AvatarBase.js"),r=require("react/jsx-runtime");require("../../tslib.es6-8c21e256.js"),require("clsx"),require("../../styles/constants/theme.js"),require("../../style-inject.es-d4ddeae4.js");exports.ImageAvatar=function(s){var a=s.bordered,t=void 0!==a&&a,i=s.className,n=s.imageUrl,o=s.shape,u=void 0===o?"round":o,c=s.size,d=void 0===c?32:c,l=s.style;return r.jsx(e.AvatarBase,{backgroundColor:"transparent",backgroundSize:"contain",backgroundUrl:n,bordered:t,className:i,shape:u,size:d,style:l})};

package/components/avatar/UserAvatar.d.ts

@@ -0,0 +1,35 @@
+import { type FullAvatarProps } from "./AvatarBase";
+export type UserAvatarProps = FullAvatarProps;
+/**
+ * UserAvatar displays a default user placeholder avatar.
+ * Use this component when you need to show a user avatar but don't have a specific image,
+ * such as for anonymous users or as a fallback when user images are unavailable.
+ *
+ * @component Avatar
+ *
+ * @example Basic usage
+ * <UserAvatar />
+ *
+ * @example Custom size with border
+ * <UserAvatar
+ *   size={48}
+ *   bordered
+ * />
+ *
+ * @example Different shapes
+ * <HStack gap={16}>
+ *   <UserAvatar shape="round" />
+ *   <UserAvatar shape="rounded" />
+ *   <UserAvatar shape="square" />
+ * </HStack>
+ *
+ * @example In a user card
+ * <Card>
+ *   <VStack gap={8} alignItems="center" padding={16}>
+ *     <UserAvatar size={64} bordered />
+ *     <Text type="heading">Guest User</Text>
+ *     <Text type="subheader" color={theme.gray600}>Unregistered</Text>
+ *   </VStack>
+ * </Card>
+ */
+export declare const UserAvatar: ({ bordered, className, shape, size, style, }: UserAvatarProps) => import("react").JSX.Element;

package/components/avatar/UserAvatar.js

@@ -1 +1 @@
-"use strict";var e=require("./AvatarBase.js");require("../../tslib.es6-8c21e256.js"),require("clsx"),require("../../styles/constants/theme.js"),require("../../style-inject.es-d4ddeae4.js");exports.UserAvatar=function(s){var r=s.bordered,a=void 0!==r&&r,t=s.className,i=s.shape,o=void 0===i?"round":i,l=s.size,c=void 0===l?32:l,d=s.style;return React.createElement(e.AvatarBase,{backgroundPosition:"bottom",backgroundSize:"80%",backgroundUrl:"".concat("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='42' height='44' fill='none' viewBox='0 0 42 44'%3e%3cpath fill='%23A2A2AA' fill-rule='evenodd' d='M21 18.45a8.95 8.95 0 0 0 6.364-2.665A9.15 9.15 0 0 0 30 9.35a9.15 9.15 0 0 0-2.636-6.435A8.95 8.95 0 0 0 21 .25a8.95 8.95 0 0 0-6.364 2.665A9.15 9.15 0 0 0 12 9.35c0 2.414.948 4.728 2.636 6.435A8.95 8.95 0 0 0 21 18.45M0 45.75c0-2.788.543-5.55 1.599-8.126a21.3 21.3 0 0 1 4.552-6.888 21 21 0 0 1 6.813-4.603 20.8 20.8 0 0 1 16.072 0 21 21 0 0 1 6.813 4.603 21.3 21.3 0 0 1 4.553 6.888A21.4 21.4 0 0 1 42 45.75z' clip-rule='evenodd'/%3e%3c/svg%3e"),bordered:a,className:t,shape:o,size:c,style:d})};
+"use strict";var e=require("./AvatarBase.js"),s=require("react/jsx-runtime");require("../../tslib.es6-8c21e256.js"),require("clsx"),require("../../styles/constants/theme.js"),require("../../style-inject.es-d4ddeae4.js");exports.UserAvatar=function(r){var a=r.bordered,t=void 0!==a&&a,i=r.className,o=r.shape,l=void 0===o?"round":o,c=r.size,d=void 0===c?32:c,n=r.style;return s.jsx(e.AvatarBase,{backgroundPosition:"bottom",backgroundSize:"80%",backgroundUrl:"".concat("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='42' height='44' fill='none' viewBox='0 0 42 44'%3e%3cpath fill='%23A2A2AA' fill-rule='evenodd' d='M21 18.45a8.95 8.95 0 0 0 6.364-2.665A9.15 9.15 0 0 0 30 9.35a9.15 9.15 0 0 0-2.636-6.435A8.95 8.95 0 0 0 21 .25a8.95 8.95 0 0 0-6.364 2.665A9.15 9.15 0 0 0 12 9.35c0 2.414.948 4.728 2.636 6.435A8.95 8.95 0 0 0 21 18.45M0 45.75c0-2.788.543-5.55 1.599-8.126a21.3 21.3 0 0 1 4.552-6.888 21 21 0 0 1 6.813-4.603 20.8 20.8 0 0 1 16.072 0 21 21 0 0 1 6.813 4.603 21.3 21.3 0 0 1 4.553 6.888A21.4 21.4 0 0 1 42 45.75z' clip-rule='evenodd'/%3e%3c/svg%3e"),bordered:t,className:i,shape:l,size:d,style:n})};

package/components/badge/Badge.d.ts

@@ -0,0 +1,72 @@
+import type { ReactNode } from 'react';
+import type { FontWeight } from "../text/Text";
+import type { BaseProps } from "../../types/BaseProps";
+type BadgeColor = 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'purple' | 'red';
+type Size = 'small' | 'default';
+export type BadgeProps = BaseProps & {
+    bold?: boolean;
+    children?: ReactNode | string;
+    color?: BadgeColor;
+    /**
+     * @default 600
+     */
+    fontWeight?: FontWeight;
+    icon?: ReactNode;
+    /**
+     * @default false
+     */
+    iconRight?: boolean;
+    rounded?: boolean;
+    /**
+     * @default default
+     */
+    size?: Size;
+};
+/**
+ * Badge component used to highlight information, show status, or categorize content.
+ * Available in different colors, sizes, and styles to fit various use cases.
+ *
+ * @example Basic badge
+ * <Badge>New</Badge>
+ *
+ * @example With different colors
+ * <Badge color="blue">Info</Badge>
+ * <Badge color="green">Success</Badge>
+ * <Badge color="red">Error</Badge>
+ * <Badge color="orange">Warning</Badge>
+ * <Badge color="purple">Beta</Badge>
+ * <Badge color="cyan">Update</Badge>
+ * <Badge color="gray">Default</Badge>
+ *
+ * @example With icon
+ * <Badge icon={<CheckmarkIcon />}>Verified</Badge>
+ *
+ * @example With right aligned icon
+ * <Badge icon={<ArrowRightIcon />} iconRight>View more</Badge>
+ *
+ * @example Small size
+ * <Badge size="small">Tag</Badge>
+ *
+ * @example Bold style (inverted colors)
+ * <Badge bold>Featured</Badge>
+ * <Badge bold color="green">Approved</Badge>
+ *
+ * @example With rounded corners
+ * <Badge rounded>Status</Badge>
+ *
+ * @example Custom font weight
+ * <Badge fontWeight={800}>Important</Badge>
+ *
+ * @example Combining multiple props
+ * <Badge
+ *   color="purple"
+ *   bold
+ *   icon={<StarIcon />}
+ *   rounded
+ *   size="small"
+ * >
+ *   Featured
+ * </Badge>
+ */
+export declare const Badge: ({ bold, children, className, color, fontWeight, icon, iconRight, rounded, size, style, }: BadgeProps) => import("react").JSX.Element;
+export {};

package/components/badge/Badge.js

@@ -1 +1 @@
-"use strict";var e=require("../../tslib.es6-8c21e256.js"),o=require("clsx"),d=require("../../styles/constants/theme.js"),a=require("../../style-inject.es-d4ddeae4.js");function _(e){return e&&e.__esModule?e:{default:e}}var m=_(o),g={badgeWrapper:"Amino_Badge-module__badgeWrapper--3aatv",styledBadge:"Amino_Badge-module__styledBadge--DLweg",bold:"Amino_Badge-module__bold--j8zR3",small:"Amino_Badge-module__small--IwHd5",blue:"Amino_Badge-module__blue--3itf6",green:"Amino_Badge-module__green--sz1Lj",red:"Amino_Badge-module__red--EJyw5",orange:"Amino_Badge-module__orange--mX0zR",purple:"Amino_Badge-module__purple--dwd-x",cyan:"Amino_Badge-module__cyan--S6-60"};a.styleInject(".Amino_Badge-module__badgeWrapper--3aatv{display:inline-block}.Amino_Badge-module__styledBadge--DLweg{align-items:center;background-color:var(--amino-gray-50);border:1px solid var(--amino-gray-200);border-radius:var(--amino-badge-border-radius);color:var(--amino-gray-800);display:flex;font-size:var(--amino-font-size-s);font-weight:var(--amino-badge-font-weight);gap:var(--amino-space-0);order:var(--amino-badge-order);padding:3px 4px;text-align:center}.Amino_Badge-module__styledBadge--DLweg p{line-height:16px;margin:0;padding-left:var(--amino-space-4);padding-right:var(--amino-space-4)}.Amino_Badge-module__styledBadge--DLweg svg{height:20px;width:20px}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__bold--j8zR3{background-color:var(--amino-gray-1000);border:1px solid var(--amino-gray-900);color:var(--amino-gray-100)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-100)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__small--IwHd5{border-radius:var(--amino-radius-4);gap:0;padding:1px var(--amino-space-4)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__small--IwHd5 p{padding-left:var(--amino-space-4);padding-right:var(--amino-space-4)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__blue--3itf6{background-color:var(--amino-blue-50);border:1px solid var(--amino-blue-200);color:var(--amino-blue-800)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__blue--3itf6.Amino_Badge-module__bold--j8zR3{background-color:var(--amino-blue-500);border:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__blue--3itf6.Amino_Badge-module__bold--j8zR3,[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__blue--3itf6.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-1000)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__blue--3itf6.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-0)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__green--sz1Lj{background-color:var(--amino-green-50);border:1px solid var(--amino-green-200);color:var(--amino-green-800)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__green--sz1Lj.Amino_Badge-module__bold--j8zR3{background-color:var(--amino-green-500);border:1px solid var(--amino-green-600);color:var(--amino-gray-0)}[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__green--sz1Lj.Amino_Badge-module__bold--j8zR3,[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__green--sz1Lj.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-1000)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__green--sz1Lj.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-0)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__red--EJyw5{background-color:var(--amino-red-50);border:1px solid var(--amino-red-200);color:var(--amino-red-800)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__red--EJyw5.Amino_Badge-module__bold--j8zR3{background-color:var(--amino-red-500);border:1px solid var(--amino-red-600);color:var(--amino-gray-0)}[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__red--EJyw5.Amino_Badge-module__bold--j8zR3,[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__red--EJyw5.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-1000)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__red--EJyw5.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-0)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__orange--mX0zR{background-color:var(--amino-orange-50);border:1px solid var(--amino-orange-200);color:var(--amino-orange-800)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__orange--mX0zR.Amino_Badge-module__bold--j8zR3{background-color:var(--amino-orange-500);border:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__orange--mX0zR.Amino_Badge-module__bold--j8zR3,[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__orange--mX0zR.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-1000)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__orange--mX0zR.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-0)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__purple--dwd-x{background-color:var(--amino-purple-50);border:1px solid var(--amino-purple-200);color:var(--amino-purple-800)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__purple--dwd-x.Amino_Badge-module__bold--j8zR3{background-color:var(--amino-purple-500);border:1px solid var(--amino-purple-600);color:var(--amino-gray-0)}[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__purple--dwd-x.Amino_Badge-module__bold--j8zR3,[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__purple--dwd-x.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-1000)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__purple--dwd-x.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-0)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__cyan--S6-60{background-color:var(--amino-cyan-50);border:1px solid var(--amino-cyan-200);color:var(--amino-cyan-800)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__cyan--S6-60.Amino_Badge-module__bold--j8zR3{background-color:var(--amino-cyan-600);border:1px solid var(--amino-cyan-700);color:var(--amino-gray-0)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__cyan--S6-60.Amino_Badge-module__bold--j8zR3 svg,[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__cyan--S6-60.Amino_Badge-module__bold--j8zR3,[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__cyan--S6-60.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-0)}");exports.Badge=function(o){var a=o.bold,_=o.children,l=o.className,r=o.color,n=void 0===r?"gray":r,i=o.fontWeight,u=void 0===i?600:i,B=o.icon,t=o.iconRight,s=void 0!==t&&t,A=o.rounded,c=void 0!==A&&A,v=o.size,y=void 0===v?"default":v,b=o.style;return React.createElement("div",{className:m.default(g.badgeWrapper,l),style:e.__assign(e.__assign({},b),{"--amino-badge-border-radius":c?"20px":d.theme.radius6,"--amino-badge-font-weight":u,"--amino-badge-order":s?"2":""})},React.createElement("div",{className:m.default(g.styledBadge,"gray"!==n?g[n]:"","small"===y?g[y]:"",a?g.bold:"")},B,React.createElement("p",null,_)))};
+"use strict";var e=require("../../tslib.es6-8c21e256.js"),o=require("clsx"),d=require("../../styles/constants/theme.js"),a=require("../../style-inject.es-d4ddeae4.js"),_=require("react/jsx-runtime");function m(e){return e&&e.__esModule?e:{default:e}}var g=m(o),l={badgeWrapper:"Amino_Badge-module__badgeWrapper--3aatv",styledBadge:"Amino_Badge-module__styledBadge--DLweg",bold:"Amino_Badge-module__bold--j8zR3",small:"Amino_Badge-module__small--IwHd5",blue:"Amino_Badge-module__blue--3itf6",green:"Amino_Badge-module__green--sz1Lj",red:"Amino_Badge-module__red--EJyw5",orange:"Amino_Badge-module__orange--mX0zR",purple:"Amino_Badge-module__purple--dwd-x",cyan:"Amino_Badge-module__cyan--S6-60"};a.styleInject(".Amino_Badge-module__badgeWrapper--3aatv{display:inline-block}.Amino_Badge-module__styledBadge--DLweg{align-items:center;background-color:var(--amino-gray-50);border:1px solid var(--amino-gray-200);border-radius:var(--amino-badge-border-radius);color:var(--amino-gray-800);display:flex;font-size:var(--amino-font-size-s);font-weight:var(--amino-badge-font-weight);gap:var(--amino-space-0);order:var(--amino-badge-order);padding:3px 4px;text-align:center}.Amino_Badge-module__styledBadge--DLweg p{line-height:16px;margin:0;padding-left:var(--amino-space-4);padding-right:var(--amino-space-4)}.Amino_Badge-module__styledBadge--DLweg svg{height:20px;width:20px}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__bold--j8zR3{background-color:var(--amino-gray-1000);border:1px solid var(--amino-gray-900);color:var(--amino-gray-100)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-100)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__small--IwHd5{border-radius:var(--amino-radius-4);gap:0;padding:1px var(--amino-space-4)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__small--IwHd5 p{padding-left:var(--amino-space-4);padding-right:var(--amino-space-4)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__blue--3itf6{background-color:var(--amino-blue-50);border:1px solid var(--amino-blue-200);color:var(--amino-blue-800)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__blue--3itf6.Amino_Badge-module__bold--j8zR3{background-color:var(--amino-blue-500);border:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__blue--3itf6.Amino_Badge-module__bold--j8zR3,[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__blue--3itf6.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-1000)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__blue--3itf6.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-0)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__green--sz1Lj{background-color:var(--amino-green-50);border:1px solid var(--amino-green-200);color:var(--amino-green-800)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__green--sz1Lj.Amino_Badge-module__bold--j8zR3{background-color:var(--amino-green-500);border:1px solid var(--amino-green-600);color:var(--amino-gray-0)}[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__green--sz1Lj.Amino_Badge-module__bold--j8zR3,[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__green--sz1Lj.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-1000)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__green--sz1Lj.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-0)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__red--EJyw5{background-color:var(--amino-red-50);border:1px solid var(--amino-red-200);color:var(--amino-red-800)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__red--EJyw5.Amino_Badge-module__bold--j8zR3{background-color:var(--amino-red-500);border:1px solid var(--amino-red-600);color:var(--amino-gray-0)}[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__red--EJyw5.Amino_Badge-module__bold--j8zR3,[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__red--EJyw5.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-1000)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__red--EJyw5.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-0)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__orange--mX0zR{background-color:var(--amino-orange-50);border:1px solid var(--amino-orange-200);color:var(--amino-orange-800)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__orange--mX0zR.Amino_Badge-module__bold--j8zR3{background-color:var(--amino-orange-500);border:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__orange--mX0zR.Amino_Badge-module__bold--j8zR3,[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__orange--mX0zR.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-1000)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__orange--mX0zR.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-0)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__purple--dwd-x{background-color:var(--amino-purple-50);border:1px solid var(--amino-purple-200);color:var(--amino-purple-800)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__purple--dwd-x.Amino_Badge-module__bold--j8zR3{background-color:var(--amino-purple-500);border:1px solid var(--amino-purple-600);color:var(--amino-gray-0)}[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__purple--dwd-x.Amino_Badge-module__bold--j8zR3,[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__purple--dwd-x.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-1000)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__purple--dwd-x.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-0)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__cyan--S6-60{background-color:var(--amino-cyan-50);border:1px solid var(--amino-cyan-200);color:var(--amino-cyan-800)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__cyan--S6-60.Amino_Badge-module__bold--j8zR3{background-color:var(--amino-cyan-600);border:1px solid var(--amino-cyan-700);color:var(--amino-gray-0)}.Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__cyan--S6-60.Amino_Badge-module__bold--j8zR3 svg,[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__cyan--S6-60.Amino_Badge-module__bold--j8zR3,[data-theme=night] .Amino_Badge-module__styledBadge--DLweg.Amino_Badge-module__cyan--S6-60.Amino_Badge-module__bold--j8zR3 svg{color:var(--amino-gray-0)}");exports.Badge=function(o){var a=o.bold,m=o.children,r=o.className,n=o.color,i=void 0===n?"gray":n,u=o.fontWeight,B=void 0===u?600:u,s=o.icon,t=o.iconRight,A=void 0!==t&&t,c=o.rounded,v=void 0!==c&&c,y=o.size,b=void 0===y?"default":y,p=o.style;return _.jsx("div",{className:g.default(l.badgeWrapper,r),style:e.__assign(e.__assign({},p),{"--amino-badge-border-radius":v?"20px":d.theme.radius6,"--amino-badge-font-weight":B,"--amino-badge-order":A?"2":""}),children:_.jsxs("div",{className:g.default(l.styledBadge,"gray"!==i?l[i]:"","small"===b?l[b]:"",a?l.bold:""),children:[s,_.jsx("p",{children:m})]})})};

package/components/banner/Banner.d.ts

@@ -0,0 +1,83 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+import type { Intent } from "../../types/Intent";
+export type BannerProps = BaseProps & {
+    children?: ReactNode;
+    footerActions?: ReactNode;
+    headerActions?: ReactNode;
+    intent?: Exclude<Intent, 'danger' | 'secondary' | 'primary'>;
+    onClose?: () => void;
+    title?: ReactNode;
+};
+/**
+ * Banner component displays prominent messages or notifications with different intents.
+ * Use banners to communicate important information, status updates, or required actions.
+ *
+ * @example Basic banner
+ * <Banner title="Information">
+ *   This is a basic banner with important information.
+ * </Banner>
+ *
+ * @example With different intents
+ * <Banner intent="info" title="Information">
+ *   This contains helpful information for the user.
+ * </Banner>
+ *
+ * <Banner intent="success" title="Success">
+ *   The operation was completed successfully.
+ * </Banner>
+ *
+ * <Banner intent="warning" title="Warning">
+ *   This action will have side effects.
+ * </Banner>
+ *
+ * <Banner intent="error" title="Error">
+ *   There was a problem completing the operation.
+ * </Banner>
+ *
+ * @example With close button
+ * <Banner
+ *   intent="info"
+ *   title="System Notification"
+ *   onClose={() => setVisible(false)}
+ * >
+ *   The system will be undergoing maintenance in two hours.
+ * </Banner>
+ *
+ * @example With header actions
+ * <Banner
+ *   intent="info"
+ *   title="New feature available"
+ *   headerActions={
+ *     <Button variant="link" size="small">Learn more</Button>
+ *   }
+ * >
+ *   Try out our new reporting dashboard.
+ * </Banner>
+ *
+ * @example With footer actions
+ * <Banner
+ *   intent="warning"
+ *   title="Update required"
+ *   footerActions={
+ *     <>
+ *       <Button variant="standard" size="small">Remind me later</Button>
+ *       <Button variant="primary" size="small">Update now</Button>
+ *     </>
+ *   }
+ * >
+ *   Your software needs to be updated to the latest version.
+ * </Banner>
+ *
+ * @example With both title and content
+ * <Banner intent="success" title="Order placed">
+ *   <Text>Your order #12345 has been placed successfully.</Text>
+ *   <Text>You will receive a confirmation email shortly.</Text>
+ * </Banner>
+ *
+ * @example Content only (no title)
+ * <Banner intent="info">
+ *   This is a simple notification message without a title.
+ * </Banner>
+ */
+export declare const Banner: ({ children, className, footerActions, headerActions, intent, onClose, style, title, }: BannerProps) => import("react").JSX.Element;

package/components/banner/Banner.js

@@ -1 +1 @@
-"use strict";var e=require("../../tslib.es6-8c21e256.js"),n=require("clsx"),r=require("../button/Button.js"),a=require("../text/Text.js"),o=require("../../icons/CheckCircleIcon.js"),t=require("../../icons/ExclamationMarkIcon.js"),i=require("../../icons/InfoIcon.js"),c=require("../../icons/RemoveIcon.js"),l=require("../../icons/WarningIcon.js"),s=require("../../style-inject.es-d4ddeae4.js");function m(e){return e&&e.__esModule?e:{default:e}}require("../../_rollupPluginBabelHelpers-77a6284f.js"),require("react"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../../utils/getAminoColor.js"),require("../../styles/constants/theme.js"),require("../button/useRipple.js"),require("../spinner/Spinner.js"),require("../../utils/getTestId.js"),require("../../icons/icon-base/_IconBase.js");var u=m(n),d={styledBanner:"Amino_Banner-module__styledBanner--h-uMr",defaultBanner:"Amino_Banner-module__defaultBanner--L-k6M",infoBanner:"Amino_Banner-module__infoBanner--6T7je",successBanner:"Amino_Banner-module__successBanner--p7Z8i",warningBanner:"Amino_Banner-module__warningBanner--yIJUE",errorBanner:"Amino_Banner-module__errorBanner--z4V76",container:"Amino_Banner-module__container--cEDf9",icon:"Amino_Banner-module__icon--dQt0I",close:"Amino_Banner-module__close--ZBL10",closeButton:"Amino_Banner-module__closeButton--98y-g",header:"Amino_Banner-module__header--4VfwK",content:"Amino_Banner-module__content--X6uTf",actionsWrapper:"Amino_Banner-module__actionsWrapper--3NZHL",bannerHeader:"Amino_Banner-module__bannerHeader--TKE1E",bannerFooter:"Amino_Banner-module__bannerFooter--2I8yH"};s.styleInject('.Amino_Banner-module__styledBanner--h-uMr{border-radius:var(--amino-radius-12);padding:var(--amino-space-16)}.Amino_Banner-module__styledBanner--h-uMr .amino-button:focus,.Amino_Banner-module__styledBanner--h-uMr .amino-button:hover{filter:brightness(1.1)}.Amino_Banner-module__styledBanner--h-uMr.Amino_Banner-module__defaultBanner--L-k6M{background:var(--amino-gray-50);border:1px solid var(--amino-gray-200);color:var(--amino-gray-800)}.Amino_Banner-module__styledBanner--h-uMr.Amino_Banner-module__infoBanner--6T7je{background:var(--amino-blue-50);border:1px solid var(--amino-blue-200);color:var(--amino-blue-800)}.Amino_Banner-module__styledBanner--h-uMr.Amino_Banner-module__successBanner--p7Z8i{background:var(--amino-green-50);border:1px solid var(--amino-green-200);color:var(--amino-green-800)}.Amino_Banner-module__styledBanner--h-uMr.Amino_Banner-module__warningBanner--yIJUE{background:var(--amino-orange-50);border:1px solid var(--amino-orange-200);color:var(--amino-orange-800)}.Amino_Banner-module__styledBanner--h-uMr.Amino_Banner-module__errorBanner--z4V76{background:var(--amino-red-50);border:1px solid var(--amino-red-200);color:var(--amino-red-800)}.Amino_Banner-module__container--cEDf9{align-items:var(--amino-banner-container-align-items);display:grid;grid-template-areas:"icon header close" ". content .";grid-template-columns:var(--amino-banner-container-grid-template-columns)}.Amino_Banner-module__icon--dQt0I{grid-area:icon;justify-self:start}.Amino_Banner-module__close--ZBL10{grid-area:close;justify-self:end}.Amino_Banner-module__closeButton--98y-g{width:24px}.Amino_Banner-module__header--4VfwK{color:var(--amino-banner-header-color);font-size:var(--amino-font-size-base);grid-area:header}.Amino_Banner-module__content--X6uTf{display:flex;flex-direction:column;font-size:var(--amino-font-size-base);gap:var(--amino-space-8);grid-area:content;margin-top:8px}.Amino_Banner-module__actionsWrapper--3NZHL{align-items:center;display:flex;gap:var(--amino-space-8)}.Amino_Banner-module__bannerHeader--TKE1E{align-items:center;display:flex;gap:var(--amino-space-12);justify-content:space-between}.Amino_Banner-module__bannerFooter--2I8yH{align-items:center;display:flex;gap:var(--amino-space-12);margin-top:var(--amino-space-8)}');exports.Banner=function(n){var s=n.children,m=n.className,_=n.footerActions,B=n.headerActions,p=n.intent,g=n.onClose,v=n.style,f=n.title,b=p?d["".concat(p,"Banner")]:d.defaultBanner;return React.createElement("div",{className:u.default(d.styledBanner,b,m),style:v},function(){var n=!!s&&!f&&!_,m=function(){switch(p){case"info":return{intentIcon:React.createElement(i.InfoIcon,{color:"blue800",size:24}),removeIconColor:"blue800"};case"success":return{intentIcon:React.createElement(o.CheckCircleIcon,{color:"green800",size:24}),removeIconColor:"green800"};case"warning":return{intentIcon:React.createElement(l.WarningIcon,{color:"orange800",size:24}),removeIconColor:"orange800"};case"error":return{intentIcon:React.createElement(t.ExclamationMarkIcon,{color:"red800",size:24}),removeIconColor:"red800"};default:return{intentIcon:React.createElement(i.InfoIcon,{color:"gray800",size:24}),removeIconColor:"gray800"}}}(),v=e.__read([f&&React.createElement("header",{className:d.bannerHeader},React.createElement(a.Text,{color:m.removeIconColor,type:"label"},f),B&&React.createElement("div",{className:d.actionsWrapper},B)),s,_&&React.createElement("footer",{className:d.bannerFooter},React.createElement("div",{className:d.actionsWrapper},_))].filter(Boolean),3),b=v[0],A=v[1],y=v[2];return React.createElement("div",{className:d.container,style:{"--amino-banner-container-align-items":n?"start":"center","--amino-banner-container-grid-template-columns":"32px auto ".concat(g?"32px":"0px"),"--amino-banner-header-color":m.removeIconColor}},React.createElement("div",{className:d.icon},m.intentIcon),g&&React.createElement("div",{className:d.close},React.createElement(r.Button,{className:u.default(d.closeButton),icon:React.createElement(c.RemoveIcon,{color:m.removeIconColor,size:20}),onClick:g,variant:"text"})),React.createElement("div",{className:d.header},b),A&&React.createElement("div",{className:d.content},A,y))}())};
+"use strict";var e=require("../../tslib.es6-8c21e256.js"),n=require("clsx"),r=require("../button/Button.js"),o=require("../text/Text.js"),a=require("../../icons/CheckCircleIcon.js"),i=require("../../icons/ExclamationMarkIcon.js"),s=require("../../icons/InfoIcon.js"),t=require("../../icons/RemoveIcon.js"),l=require("../../icons/WarningIcon.js"),c=require("../../style-inject.es-d4ddeae4.js"),m=require("react/jsx-runtime");function u(e){return e&&e.__esModule?e:{default:e}}require("../../_rollupPluginBabelHelpers-697f213c.js"),require("react"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../../utils/getAminoColor.js"),require("../../styles/constants/theme.js"),require("../button/useRipple.js"),require("../spinner/Spinner.js"),require("../../utils/getTestId.js"),require("../../icons/icon-base/_IconBase.js");var d=u(n),_={styledBanner:"Amino_Banner-module__styledBanner--h-uMr",defaultBanner:"Amino_Banner-module__defaultBanner--L-k6M",infoBanner:"Amino_Banner-module__infoBanner--6T7je",successBanner:"Amino_Banner-module__successBanner--p7Z8i",warningBanner:"Amino_Banner-module__warningBanner--yIJUE",errorBanner:"Amino_Banner-module__errorBanner--z4V76",container:"Amino_Banner-module__container--cEDf9",icon:"Amino_Banner-module__icon--dQt0I",close:"Amino_Banner-module__close--ZBL10",closeButton:"Amino_Banner-module__closeButton--98y-g",header:"Amino_Banner-module__header--4VfwK",content:"Amino_Banner-module__content--X6uTf",actionsWrapper:"Amino_Banner-module__actionsWrapper--3NZHL",bannerHeader:"Amino_Banner-module__bannerHeader--TKE1E",bannerFooter:"Amino_Banner-module__bannerFooter--2I8yH"};c.styleInject('.Amino_Banner-module__styledBanner--h-uMr{border-radius:var(--amino-radius-12);padding:var(--amino-space-16)}.Amino_Banner-module__styledBanner--h-uMr .amino-button:focus,.Amino_Banner-module__styledBanner--h-uMr .amino-button:hover{filter:brightness(1.1)}.Amino_Banner-module__styledBanner--h-uMr.Amino_Banner-module__defaultBanner--L-k6M{background:var(--amino-gray-50);border:1px solid var(--amino-gray-200);color:var(--amino-gray-800)}.Amino_Banner-module__styledBanner--h-uMr.Amino_Banner-module__infoBanner--6T7je{background:var(--amino-blue-50);border:1px solid var(--amino-blue-200);color:var(--amino-blue-800)}.Amino_Banner-module__styledBanner--h-uMr.Amino_Banner-module__successBanner--p7Z8i{background:var(--amino-green-50);border:1px solid var(--amino-green-200);color:var(--amino-green-800)}.Amino_Banner-module__styledBanner--h-uMr.Amino_Banner-module__warningBanner--yIJUE{background:var(--amino-orange-50);border:1px solid var(--amino-orange-200);color:var(--amino-orange-800)}.Amino_Banner-module__styledBanner--h-uMr.Amino_Banner-module__errorBanner--z4V76{background:var(--amino-red-50);border:1px solid var(--amino-red-200);color:var(--amino-red-800)}.Amino_Banner-module__container--cEDf9{align-items:var(--amino-banner-container-align-items);display:grid;grid-template-areas:"icon header close" ". content .";grid-template-columns:var(--amino-banner-container-grid-template-columns)}.Amino_Banner-module__icon--dQt0I{grid-area:icon;justify-self:start}.Amino_Banner-module__close--ZBL10{grid-area:close;justify-self:end}.Amino_Banner-module__closeButton--98y-g{width:24px}.Amino_Banner-module__header--4VfwK{color:var(--amino-banner-header-color);font-size:var(--amino-font-size-base);grid-area:header}.Amino_Banner-module__content--X6uTf{display:flex;flex-direction:column;font-size:var(--amino-font-size-base);gap:var(--amino-space-8);grid-area:content;margin-top:8px}.Amino_Banner-module__actionsWrapper--3NZHL{align-items:center;display:flex;gap:var(--amino-space-8)}.Amino_Banner-module__bannerHeader--TKE1E{align-items:center;display:flex;gap:var(--amino-space-12);justify-content:space-between}.Amino_Banner-module__bannerFooter--2I8yH{align-items:center;display:flex;gap:var(--amino-space-12);margin-top:var(--amino-space-8)}');exports.Banner=function(n){var c=n.children,u=n.className,B=n.footerActions,p=n.headerActions,g=n.intent,v=n.onClose,f=n.style,b=n.title,j=g?_["".concat(g,"Banner")]:_.defaultBanner;return m.jsx("div",{className:d.default(_.styledBanner,j,u),style:f,children:function(){var n=!!c&&!b&&!B,u=function(){switch(g){case"info":return{intentIcon:m.jsx(s.InfoIcon,{color:"blue800",size:24}),removeIconColor:"blue800"};case"success":return{intentIcon:m.jsx(a.CheckCircleIcon,{color:"green800",size:24}),removeIconColor:"green800"};case"warning":return{intentIcon:m.jsx(l.WarningIcon,{color:"orange800",size:24}),removeIconColor:"orange800"};case"error":return{intentIcon:m.jsx(i.ExclamationMarkIcon,{color:"red800",size:24}),removeIconColor:"red800"};default:return{intentIcon:m.jsx(s.InfoIcon,{color:"gray800",size:24}),removeIconColor:"gray800"}}}(),f=e.__read([b&&m.jsxs("header",{className:_.bannerHeader,children:[m.jsx(o.Text,{color:u.removeIconColor,type:"label",children:b}),p&&m.jsx("div",{className:_.actionsWrapper,children:p})]}),c,B&&m.jsx("footer",{className:_.bannerFooter,children:m.jsx("div",{className:_.actionsWrapper,children:B})})].filter(Boolean),3),j=f[0],x=f[1],A=f[2];return m.jsxs("div",{className:_.container,style:{"--amino-banner-container-align-items":n?"start":"center","--amino-banner-container-grid-template-columns":"32px auto ".concat(v?"32px":"0px"),"--amino-banner-header-color":u.removeIconColor},children:[m.jsx("div",{className:_.icon,children:u.intentIcon}),v&&m.jsx("div",{className:_.close,children:m.jsx(r.Button,{className:d.default(_.closeButton),icon:m.jsx(t.RemoveIcon,{color:u.removeIconColor,size:20}),onClick:v,variant:"text"})}),m.jsx("div",{className:_.header,children:j}),x&&m.jsxs("div",{className:_.content,children:[x,A]})]})}()})};

package/components/button/Button.d.ts

@@ -0,0 +1,140 @@
+import type React from 'react';
+import { type ComponentPropsWithoutRef, type MouseEventHandler, type ReactNode } from 'react';
+import { type SpinnerProps } from "../spinner/Spinner";
+import type { BaseProps } from "../../types/BaseProps";
+import type { Color } from "../../types/Color";
+import type { Size } from "../../types/Size";
+import type { Theme } from "../../types/Theme";
+import type { Variant } from "../../types/Variant";
+type ButtonBase = BaseProps & {
+    background?: Color | 'inherit';
+    children?: ReactNode;
+    color?: Color | 'inherit';
+    disabled?: boolean;
+    fitContentWidth?: boolean;
+    hoverBackground?: Color | 'inherit';
+    hoverColor?: Color | 'inherit';
+    icon?: ReactNode;
+    iconRight?: boolean;
+    /** @default false */
+    loading?: boolean;
+    loadingText?: string;
+    /**
+     * Disable ripple effect
+     * @default false
+     */
+    noRipple?: boolean;
+    outline?: boolean;
+    /**
+     * @default 'sm'
+     */
+    size?: Size;
+    /** Color for the spinner when in a loading state */
+    spinnerColor?: SpinnerProps['color'];
+    tabIndex?: number;
+    testId?: string;
+    themeOverride?: Theme;
+    type?: 'button' | 'reset' | 'submit';
+    /** @default 'standard' */
+    variant?: Variant;
+};
+/** These types are a bit cobbled together to allow for the polymorphic tag names.
+ * It may be a good idea to look into refactoring this funcitonality
+ */
+export type GroupTag = 'div' | 'a' | 'button';
+declare const DEFAULT_TAG: "button";
+type MyHtmlElement<T extends GroupTag> = T extends 'a' ? HTMLAnchorElement : T extends 'button' ? HTMLButtonElement : HTMLDivElement;
+export type ButtonProps<T extends GroupTag = typeof DEFAULT_TAG> = ButtonBase & {
+    href?: T extends 'a' ? string : never;
+    onClick?: MouseEventHandler<MyHtmlElement<T>>;
+    tag?: T | GroupTag;
+} & Omit<ComponentPropsWithoutRef<T>, keyof ButtonBase | 'onClick'>;
+/**
+ * Button component provides a clickable element that can be customized with different variants,
+ * sizes, and states. It supports various HTML tags (button, a, div) and includes features like
+ * loading states, icons, and different visual styles.
+ *
+ * @example Basic button
+ * <Button>Click me</Button>
+ *
+ * @example Primary variant
+ * <Button variant="primary">Primary Button</Button>
+ *
+ * @example With icon
+ * <Button icon={<CubeIcon size={24} />}>Button with Icon</Button>
+ *
+ * @example Icon on the right
+ * <Button icon={<ArrowRightIcon />} iconRight>Next</Button>
+ *
+ * @example Loading state
+ * <Button loading loadingText="Loading...">Submit</Button>
+ *
+ * @example Disabled state
+ * <Button disabled>Disabled Button</Button>
+ *
+ * @example Different sizes
+ * <Button size="sm">Small</Button>
+ * <Button size="md">Medium</Button>
+ * <Button size="lg">Large</Button>
+ *
+ * @example Variants
+ * <Button variant="primary">Primary</Button>
+ * <Button variant="success">Success</Button>
+ * <Button variant="danger">Danger</Button>
+ * <Button variant="warning">Warning</Button>
+ * <Button variant="link">Link</Button>
+ * <Button variant="subtle">Subtle</Button>
+ * <Button variant="text">Text</Button>
+ *
+ * @example Outlined style
+ * <Button variant="primary" outline>Outlined Primary</Button>
+ *
+ * @example As anchor tag
+ * <Button tag="a" href="https://example.com">Visit Website</Button>
+ *
+ * @example Inline link
+ * <Text>Read the <Button tag="a" href="#" variant="inlineLink">documentation</Button> for more info.</Text>
+ *
+ * @example Custom colors
+ * <Button color="blue600" background="gray100">Custom Button</Button>
+ */
+export declare function Button<T extends GroupTag = typeof DEFAULT_TAG>({ background, children, className, color, 
+/** Whether the button is disabled */
+disabled, 
+/** Makes the button width fit its content */
+fitContentWidth, hoverBackground, hoverColor, 
+/** Icon to display in the button */
+icon, 
+/** Whether to show the icon on the right side */
+iconRight, 
+/** Shows a loading spinner */
+loading, 
+/** Text to show when loading */
+loadingText, 
+/** Disables ripple effect on click */
+noRipple, 
+/** Shows an outlined version of the button */
+outline, 
+/**
+ * Size of the button
+ * @default 'sm'
+ */
+size, 
+/** Color of the spinner when loading */
+spinnerColor, style, 
+/**
+ * HTML element tag to use
+ * @default 'button'
+ */
+tag, testId, themeOverride, 
+/**
+ * HTML button type attribute
+ * @default 'button'
+ */
+type, 
+/**
+ * Visual style variant of the button
+ * @default 'standard'
+ */
+variant, ...props }: ButtonProps<T>): React.JSX.Element;
+export {};