@zonos/amino 5.5.30 → 5.5.32

package/components/text/Text.d.ts

@@ -0,0 +1,159 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+import type { Color } from "../../types/Color";
+export declare const textOthers: readonly ["code", "subtitle", "small-header", "input-label"];
+type OtherText = (typeof textOthers)[number];
+export declare const textOptions: readonly [{
+    readonly label: "Page Header (3XL) · 30px (1.875rem)";
+    readonly size: "3xl";
+    readonly tag: "h1";
+    readonly type: "page-header";
+    readonly weight: 700;
+}, {
+    readonly label: "Secondary Page Header (3XL) · 30px (1.875rem)";
+    readonly size: "3xl";
+    readonly tag: "h2";
+    readonly type: "secondary-page-header";
+    readonly weight: 500;
+}, {
+    readonly label: "Header (2XL) · 28px (1.75rem)";
+    readonly size: "2xl";
+    readonly tag: "h3";
+    readonly type: "header";
+    readonly weight: 600;
+}, {
+    readonly label: "Description Header (2XL) · 28px (1.75rem)";
+    readonly size: "2xl";
+    readonly tag: "h3";
+    readonly type: "description-header";
+    readonly weight: 700;
+}, {
+    readonly label: "Title (XL) • 22px (1.375rem)";
+    readonly size: "xl";
+    readonly tag: "h4";
+    readonly type: "title";
+    readonly weight: 600;
+}, {
+    readonly label: "Bold Subheader (L) • 18px (1.125rem)";
+    readonly size: "l";
+    readonly tag: "h5";
+    readonly type: "bold-subheader";
+    readonly weight: 700;
+}, {
+    readonly label: "Semi Bold Subheader (L / H4) • 18px (1.125rem)";
+    readonly size: "l";
+    readonly tag: "h5";
+    readonly type: "semi-bold-subheader";
+    readonly weight: 600;
+}, {
+    readonly label: "Subheader (L) • 18px (1.125rem)";
+    readonly size: "l";
+    readonly tag: "h5";
+    readonly type: "subheader";
+    readonly weight: 500;
+}, {
+    readonly label: "Bold Label (Base) • 14px (.875rem)";
+    readonly size: "base";
+    readonly tag: "span";
+    readonly type: "bold-label";
+    readonly weight: 700;
+}, {
+    readonly label: "Label (Base) • 14px (.875rem)";
+    readonly size: "base";
+    readonly tag: "span";
+    readonly type: "label";
+    readonly weight: 500;
+}, {
+    readonly label: "Body (Base) • 14px (.875rem)";
+    readonly size: "base";
+    readonly tag: "span";
+    readonly type: "body";
+    readonly weight: 400;
+}, {
+    readonly label: "Small header (S) • 12px (.75rem)";
+    readonly size: "s";
+    readonly tag: "span";
+    readonly type: "small-header";
+    readonly weight: 600;
+}, {
+    readonly label: "Caption (S) • 12px (.75rem)";
+    readonly size: "s";
+    readonly tag: "span";
+    readonly type: "caption";
+    readonly weight: 400;
+}, {
+    readonly label: "Hint text (XS) • 10px (.625rem)";
+    readonly size: "xs";
+    readonly tag: "span";
+    readonly type: "hint-text";
+    readonly weight: 400;
+}];
+type Size = (typeof textOptions)[number]['size'];
+export type FontType = (typeof textOptions)[number]['type'];
+export type FontWeight = (typeof textOptions)[number]['weight'] | 800;
+type Tag = (typeof textOptions)[number]['tag'];
+type TypographyOverrides = {
+    color?: Color | 'textColorSecondary' | 'textColor';
+    fontSize?: Size;
+    fontWeight?: FontWeight;
+    lineHeight?: Size;
+};
+type TextStyle = FontType | OtherText;
+export type TextProps = BaseProps & {
+    children: ReactNode;
+    isUppercase?: boolean;
+    tag?: Tag;
+    title?: string;
+    type?: TextStyle;
+} & TypographyOverrides;
+/**
+ * Text component that provides consistent typography styles across the application.
+ * It offers various presets for different text styles, sizes, weights, and colors.
+ *
+ * @example Basic usage with default (body) type
+ * <Text>This is body text</Text>
+ *
+ * @example Page Header
+ * <Text type="page-header">Main Page Title</Text>
+ *
+ * @example Header
+ * <Text type="header">Section Title</Text>
+ *
+ * @example Subheader
+ * <Text type="subheader">Subsection Title</Text>
+ *
+ * @example Body text
+ * <Text type="body">This is the main content text of your application.</Text>
+ *
+ * @example Label
+ * <Text type="label">Field label</Text>
+ *
+ * @example Caption
+ * <Text type="caption">Small caption text</Text>
+ *
+ * @example With custom color
+ * <Text color="blue600">Blue text</Text>
+ *
+ * @example With custom weight
+ * <Text fontWeight={700}>Bold text</Text>
+ *
+ * @example With uppercase
+ * <Text isUppercase>This will be uppercase</Text>
+ *
+ * @example Custom HTML tag
+ * <Text tag="h2" type="title">Custom heading level</Text>
+ *
+ * @example Code style
+ * <Text type="code">const example = "code snippet";</Text>
+ *
+ * @example Input label
+ * <Text type="input-label">Input field label</Text>
+ *
+ * @example With custom font size
+ * <Text fontSize="xl">Larger text</Text>
+ *
+ * @example With custom line height
+ * <Text lineHeight="l">Text with increased line height</Text>
+ */
+export declare const Text: ({ children, className, color, fontSize, fontWeight, isUppercase, lineHeight, style, tag, title, type, }: TextProps) => import("react").JSX.Element;
+export {};

package/components/text/Text.js

@@ -1 +1 @@
-"use strict";var e=require("../../tslib.es6-8c21e256.js"),t=require("clsx"),a=require("../../styles/constants/theme.js"),i=require("../../style-inject.es-d4ddeae4.js");function s(e){return e&&e.__esModule?e:{default:e}}var r=s(t),n="Amino_Text-module__subTitle--ar8xY",l="Amino_Text-module__inputLabel--7RwJ6",o="Amino_Text-module__typography--Ucf02";i.styleInject(".Amino_Text-module__subTitle--ar8xY{color:var(--amino-gray-800);font-size:var(--amino-font-size-s);line-height:16px}.Amino_Text-module__inputLabel--7RwJ6{color:var(--amino-gray-1000);display:block;font-family:var(--amino-font-sans);font-size:14px;font-weight:400;line-height:16px;margin-bottom:8px}.Amino_Text-module__typography--Ucf02{color:var(--amino-text-color);font-size:var(--amino-text-font-size);font-weight:var(--amino-text-font-weight);line-height:var(--amino-text-line-height);margin:0;text-transform:var(--amino-text-transform)}.Amino_Text-module__typography--Ucf02 svg{display:inline-block;vertical-align:middle}");var h=[{label:"Page Header (3XL) · 30px (1.875rem)",size:"3xl",tag:"h1",type:"page-header",weight:700},{label:"Secondary Page Header (3XL) · 30px (1.875rem)",size:"3xl",tag:"h2",type:"secondary-page-header",weight:500},{label:"Header (2XL) · 28px (1.75rem)",size:"2xl",tag:"h3",type:"header",weight:600},{label:"Description Header (2XL) · 28px (1.75rem)",size:"2xl",tag:"h3",type:"description-header",weight:700},{label:"Title (XL) • 22px (1.375rem)",size:"xl",tag:"h4",type:"title",weight:600},{label:"Bold Subheader (L) • 18px (1.125rem)",size:"l",tag:"h5",type:"bold-subheader",weight:700},{label:"Semi Bold Subheader (L / H4) • 18px (1.125rem)",size:"l",tag:"h5",type:"semi-bold-subheader",weight:600},{label:"Subheader (L) • 18px (1.125rem)",size:"l",tag:"h5",type:"subheader",weight:500},{label:"Bold Label (Base) • 14px (.875rem)",size:"base",tag:"span",type:"bold-label",weight:700},{label:"Label (Base) • 14px (.875rem)",size:"base",tag:"span",type:"label",weight:500},{label:"Body (Base) • 14px (.875rem)",size:"base",tag:"span",type:"body",weight:400},{label:"Small header (S) • 12px (.75rem)",size:"s",tag:"span",type:"small-header",weight:600},{label:"Caption (S) • 12px (.75rem)",size:"s",tag:"span",type:"caption",weight:400},{label:"Hint text (XS) • 10px (.625rem)",size:"xs",tag:"span",type:"hint-text",weight:400}],p=e.__read(h,14),g=p[0],c=p[1],m=p[2],u=p[3],d=p[4],x=p[5],b=p[6],z=p[7],f=p[8],w=p[9],y=p[10],_=p[11],U=p[12],v=p[13];exports.Text=function(t){var i=t.children,s=t.className,h=t.color,p=t.fontSize,W=t.fontWeight,L=t.isUppercase,T=t.lineHeight,R=t.style,S=t.tag,E=t.title,A=function(t){var n=t.as,l=t.fontWeight,g=t.isUppercase,c=t.size,m={className:r.default(s,o),style:e.__assign(e.__assign({},R),{"--amino-text-color":h?a.theme[h]:"inherit","--amino-text-font-size":"var(--amino-font-size-".concat(p||c,")"),"--amino-text-font-weight":l||"","--amino-text-line-height":"var(--amino-line-height-".concat(T||c,")"),"--amino-text-transform":g?"uppercase":"inherit"}),title:E};switch(n){case"h1":return React.createElement("h1",m,i);case"h2":return React.createElement("h2",m,i);case"h3":return React.createElement("h3",m,i);case"h4":return React.createElement("h4",m,i);case"h5":return React.createElement("h5",m,i);default:return React.createElement("span",m,i)}};switch(t.type){case"page-header":return A({as:S||g.tag,fontWeight:W||g.weight,isUppercase:L,size:g.size});case"secondary-page-header":return A({as:S||c.tag,fontWeight:W||c.weight,isUppercase:L,size:c.size});case"header":return A({as:S||m.tag,fontWeight:W||m.weight,isUppercase:L,size:m.size});case"description-header":return A({as:S||u.tag,fontWeight:W||u.weight,isUppercase:L,size:u.size});case"title":return A({as:S||d.tag,fontWeight:W||d.weight,isUppercase:L,size:d.size});case"bold-subheader":return A({as:S||x.tag,fontWeight:W||x.weight,isUppercase:L,size:x.size});case"semi-bold-subheader":return A({as:S||b.tag,fontWeight:W||b.weight,isUppercase:L,size:b.size});case"subheader":return A({as:S||z.tag,fontWeight:W||z.weight,isUppercase:L,size:z.size});case"bold-label":return A({as:S||f.tag,fontWeight:W||f.weight,isUppercase:L,size:f.size});case"label":return A({as:S||w.tag,fontWeight:W||w.weight,isUppercase:L,size:w.size});case"small-header":return A({as:S||_.tag,fontWeight:W||_.weight,isUppercase:L,size:_.size});case"caption":return A({as:S||U.tag,fontWeight:W||U.weight,isUppercase:L,size:U.size});case"hint-text":return A({as:S||v.tag,fontWeight:W||v.weight,isUppercase:L,size:v.size});case"subtitle":return React.createElement("span",{className:r.default(s,n),title:E},i);case"input-label":return React.createElement("span",{className:r.default(s,l),title:E},i);default:return A({as:S||y.tag,fontWeight:W||y.weight,isUppercase:L,size:y.size})}},exports.textOptions=h,exports.textOthers=["code","subtitle","small-header","input-label"];
+"use strict";var e=require("../../_rollupPluginBabelHelpers-697f213c.js"),t=require("../../tslib.es6-8c21e256.js"),a=require("clsx"),i=require("../../styles/constants/theme.js"),s=require("../../style-inject.es-d4ddeae4.js"),r=require("react/jsx-runtime");function n(e){return e&&e.__esModule?e:{default:e}}var l=n(a),o="Amino_Text-module__subTitle--ar8xY",h="Amino_Text-module__inputLabel--7RwJ6",p="Amino_Text-module__typography--Ucf02";s.styleInject(".Amino_Text-module__subTitle--ar8xY{color:var(--amino-gray-800);font-size:var(--amino-font-size-s);line-height:16px}.Amino_Text-module__inputLabel--7RwJ6{color:var(--amino-gray-1000);display:block;font-family:var(--amino-font-sans);font-size:14px;font-weight:400;line-height:16px;margin-bottom:8px}.Amino_Text-module__typography--Ucf02{color:var(--amino-text-color);font-size:var(--amino-text-font-size);font-weight:var(--amino-text-font-weight);line-height:var(--amino-text-line-height);margin:0;text-transform:var(--amino-text-transform)}.Amino_Text-module__typography--Ucf02 svg{display:inline-block;vertical-align:middle}");var g=[{label:"Page Header (3XL) · 30px (1.875rem)",size:"3xl",tag:"h1",type:"page-header",weight:700},{label:"Secondary Page Header (3XL) · 30px (1.875rem)",size:"3xl",tag:"h2",type:"secondary-page-header",weight:500},{label:"Header (2XL) · 28px (1.75rem)",size:"2xl",tag:"h3",type:"header",weight:600},{label:"Description Header (2XL) · 28px (1.75rem)",size:"2xl",tag:"h3",type:"description-header",weight:700},{label:"Title (XL) • 22px (1.375rem)",size:"xl",tag:"h4",type:"title",weight:600},{label:"Bold Subheader (L) • 18px (1.125rem)",size:"l",tag:"h5",type:"bold-subheader",weight:700},{label:"Semi Bold Subheader (L / H4) • 18px (1.125rem)",size:"l",tag:"h5",type:"semi-bold-subheader",weight:600},{label:"Subheader (L) • 18px (1.125rem)",size:"l",tag:"h5",type:"subheader",weight:500},{label:"Bold Label (Base) • 14px (.875rem)",size:"base",tag:"span",type:"bold-label",weight:700},{label:"Label (Base) • 14px (.875rem)",size:"base",tag:"span",type:"label",weight:500},{label:"Body (Base) • 14px (.875rem)",size:"base",tag:"span",type:"body",weight:400},{label:"Small header (S) • 12px (.75rem)",size:"s",tag:"span",type:"small-header",weight:600},{label:"Caption (S) • 12px (.75rem)",size:"s",tag:"span",type:"caption",weight:400},{label:"Hint text (XS) • 10px (.625rem)",size:"xs",tag:"span",type:"hint-text",weight:400}],c=t.__read(g,14),d=c[0],u=c[1],m=c[2],b=c[3],x=c[4],z=c[5],f=c[6],_=c[7],w=c[8],y=c[9],j=c[10],S=c[11],U=c[12],v=c[13];exports.Text=function(a){var s=a.children,n=a.className,g=a.color,c=a.fontSize,W=a.fontWeight,L=a.isUppercase,T=a.lineHeight,B=a.style,H=a.tag,A=a.title,q=function(a){var o=a.as,h=a.fontWeight,d=a.isUppercase,u=a.size,m={className:l.default(n,p),style:t.__assign(t.__assign({},B),{"--amino-text-color":g?i.theme[g]:"inherit","--amino-text-font-size":"var(--amino-font-size-".concat(c||u,")"),"--amino-text-font-weight":h||"","--amino-text-line-height":"var(--amino-line-height-".concat(T||u,")"),"--amino-text-transform":d?"uppercase":"inherit"}),title:A};switch(o){case"h1":return r.jsx("h1",e._objectSpread2(e._objectSpread2({},m),{},{children:s}));case"h2":return r.jsx("h2",e._objectSpread2(e._objectSpread2({},m),{},{children:s}));case"h3":return r.jsx("h3",e._objectSpread2(e._objectSpread2({},m),{},{children:s}));case"h4":return r.jsx("h4",e._objectSpread2(e._objectSpread2({},m),{},{children:s}));case"h5":return r.jsx("h5",e._objectSpread2(e._objectSpread2({},m),{},{children:s}));default:return r.jsx("span",e._objectSpread2(e._objectSpread2({},m),{},{children:s}))}};switch(a.type){case"page-header":return q({as:H||d.tag,fontWeight:W||d.weight,isUppercase:L,size:d.size});case"secondary-page-header":return q({as:H||u.tag,fontWeight:W||u.weight,isUppercase:L,size:u.size});case"header":return q({as:H||m.tag,fontWeight:W||m.weight,isUppercase:L,size:m.size});case"description-header":return q({as:H||b.tag,fontWeight:W||b.weight,isUppercase:L,size:b.size});case"title":return q({as:H||x.tag,fontWeight:W||x.weight,isUppercase:L,size:x.size});case"bold-subheader":return q({as:H||z.tag,fontWeight:W||z.weight,isUppercase:L,size:z.size});case"semi-bold-subheader":return q({as:H||f.tag,fontWeight:W||f.weight,isUppercase:L,size:f.size});case"subheader":return q({as:H||_.tag,fontWeight:W||_.weight,isUppercase:L,size:_.size});case"bold-label":return q({as:H||w.tag,fontWeight:W||w.weight,isUppercase:L,size:w.size});case"label":return q({as:H||y.tag,fontWeight:W||y.weight,isUppercase:L,size:y.size});case"small-header":return q({as:H||S.tag,fontWeight:W||S.weight,isUppercase:L,size:S.size});case"caption":return q({as:H||U.tag,fontWeight:W||U.weight,isUppercase:L,size:U.size});case"hint-text":return q({as:H||v.tag,fontWeight:W||v.weight,isUppercase:L,size:v.size});case"subtitle":return r.jsx("span",{className:l.default(n,o),title:A,children:s});case"input-label":return r.jsx("span",{className:l.default(n,h),title:A,children:s});default:return q({as:H||j.tag,fontWeight:W||j.weight,isUppercase:L,size:j.size})}},exports.textOptions=g,exports.textOthers=["code","subtitle","small-header","input-label"];

package/components/text-avatar/TextAvatar.d.ts

@@ -0,0 +1,25 @@
+export type TextAvatarProps = {
+    className?: string;
+    label: string;
+    style?: React.CSSProperties;
+};
+/**
+ * TextAvatar displays a colored avatar with a single character, typically the first letter of a label, using a unique gradient background based on the label string.
+ * Useful for representing users, entities, or items when no image is available. The color is algorithmically generated for visual distinction.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <TextAvatar label="A" />
+ * ```
+ *
+ * @example With custom label
+ * ```tsx
+ * <TextAvatar label="Brazil" />
+ * ```
+ *
+ * @example With custom style
+ * ```tsx
+ * <TextAvatar label="Zonos" style={{ width: 48, height: 48 }} />
+ * ```
+ */
+export declare const TextAvatar: ({ className, label, style }: TextAvatarProps) => import("react").JSX.Element;

package/components/text-avatar/TextAvatar.js

@@ -1 +1 @@
-"use strict";var e=require("../../tslib.es6-8c21e256.js"),a=require("clsx"),t=require("../../style-inject.es-d4ddeae4.js");function r(e){return e&&e.__esModule?e:{default:e}}var n=r(a),i="Amino_TextAvatar-module__gradientSquare--XZznH";t.styleInject(".Amino_TextAvatar-module__gradientSquare--XZznH{align-items:center;background:linear-gradient(137deg,var(--amino-text-avatar-gradient-start),var(--amino-text-avatar-gradient-end));border-radius:var(--amino-radius-6);color:var(--amino-gray-0);display:flex;font-weight:500;height:32px;justify-content:center;width:32px}[data-theme=night] .Amino_TextAvatar-module__gradientSquare--XZznH{color:var(--amino-gray-1000)}");var o=function(e,a){var t=Array.from(e).reduce((function(e,a){return a.charCodeAt(0)+((e<<5)-e)}),0);return"hsl(".concat(t%360,", 80%, ").concat(a,"%)")};exports.TextAvatar=function(a){var t,r=a.className,l=a.label,s=a.style,d={"--amino-text-avatar-gradient-end":o(l&&l.split("").reverse().join("")||"default label",40),"--amino-text-avatar-gradient-start":o(l||"default label",45)};return React.createElement("div",{className:n.default([i,r]),style:e.__assign(e.__assign({},d),s)},l&&(null===(t=l[0])||void 0===t?void 0:t.toUpperCase())||"D")};
+"use strict";var e=require("../../tslib.es6-8c21e256.js"),a=require("clsx"),t=require("../../style-inject.es-d4ddeae4.js"),r=require("react/jsx-runtime");function n(e){return e&&e.__esModule?e:{default:e}}var i=n(a),o="Amino_TextAvatar-module__gradientSquare--XZznH";t.styleInject(".Amino_TextAvatar-module__gradientSquare--XZznH{align-items:center;background:linear-gradient(137deg,var(--amino-text-avatar-gradient-start),var(--amino-text-avatar-gradient-end));border-radius:var(--amino-radius-6);color:var(--amino-gray-0);display:flex;font-weight:500;height:32px;justify-content:center;width:32px}[data-theme=night] .Amino_TextAvatar-module__gradientSquare--XZznH{color:var(--amino-gray-1000)}");var s=function(e,a){var t=Array.from(e).reduce((function(e,a){return a.charCodeAt(0)+((e<<5)-e)}),0);return"hsl(".concat(t%360,", 80%, ").concat(a,"%)")};exports.TextAvatar=function(a){var t,n=a.className,l=a.label,d=a.style,u={"--amino-text-avatar-gradient-end":s(l&&l.split("").reverse().join("")||"default label",40),"--amino-text-avatar-gradient-start":s(l||"default label",45)};return r.jsx("div",{className:i.default([o,n]),style:e.__assign(e.__assign({},u),d),children:l&&(null===(t=l[0])||void 0===t?void 0:t.toUpperCase())||"D"})};

package/components/textarea/Textarea.d.ts

@@ -0,0 +1,141 @@
+import { type ReactNode, type TextareaHTMLAttributes } from 'react';
+type TextareaAdjustableHeightType = {
+    /**
+     * If set to true, the textarea will not expand to fit the content
+     * @default false
+     */
+    disableExpand?: boolean;
+    /**
+     * Max rows that the textarea can expand to when disableExpand is not set
+     * @default 20
+     */
+    maxRows?: number;
+};
+type TextareaType = {
+    /**
+     * Actions to be displayed in a footer within the textarea
+     */
+    actions?: ReactNode;
+    /**
+     * Sets the error state styling with red border
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Help text to be displayed below the textarea
+     */
+    helpText?: ReactNode;
+    /**
+     * Label text to be displayed above the textarea
+     */
+    label?: string;
+    /**
+     * A value (in px) that will determine how wide the input is
+     * @default 100%
+     */
+    width?: number;
+} & TextareaAdjustableHeightType;
+export type TextareaProps = TextareaType & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'>;
+/**
+ * Textarea component provides a multi-line text input field with support for labels,
+ * help text, error states, and auto-expanding height.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [value, setValue] = useState('');
+ *
+ * <Textarea
+ *   label="Description"
+ *   placeholder="Enter description..."
+ *   value={value}
+ *   onChange={e => setValue(e.target.value)}
+ * />
+ * ```
+ *
+ * @example With error state and help text
+ * ```tsx
+ * <Textarea
+ *   label="Description"
+ *   placeholder="Enter description..."
+ *   value={value}
+ *   onChange={handleChange}
+ *   error={!value.trim() && isSubmitted}
+ *   helpText="This field is required"
+ * />
+ * ```
+ *
+ * @example With custom width and actions
+ * ```tsx
+ * <Textarea
+ *   label="Comments"
+ *   width={500}
+ *   value={comments}
+ *   onChange={handleCommentsChange}
+ *   actions={
+ *     <Flex>
+ *       <Button onClick={handleClear}>Clear</Button>
+ *       <Button variant="primary" onClick={handleSave}>Save</Button>
+ *     </Flex>
+ *   }
+ * />
+ * ```
+ *
+ * @example With disabled expand and maximum rows
+ * ```tsx
+ * <Textarea
+ *   label="Limited Input"
+ *   value={value}
+ *   onChange={handleChange}
+ *   disableExpand={false}
+ *   maxRows={5}
+ * />
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <Textarea
+ *   label="Read-only Content"
+ *   value="This content cannot be edited"
+ *   disabled={true}
+ * />
+ * ```
+ *
+ * @example With form integration
+ * ```tsx
+ * <form onSubmit={handleSubmit}>
+ *   <Textarea
+ *     label="Cover Letter"
+ *     name="coverLetter"
+ *     value={formData.coverLetter}
+ *     onChange={e => setFormData({...formData, coverLetter: e.target.value})}
+ *     required
+ *   />
+ *   <Button type="submit">Submit</Button>
+ * </form>
+ * ```
+ */
+export declare const Textarea: import("react").ForwardRefExoticComponent<{
+    /**
+     * Actions to be displayed in a footer within the textarea
+     */
+    actions?: ReactNode;
+    /**
+     * Sets the error state styling with red border
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Help text to be displayed below the textarea
+     */
+    helpText?: ReactNode;
+    /**
+     * Label text to be displayed above the textarea
+     */
+    label?: string;
+    /**
+     * A value (in px) that will determine how wide the input is
+     * @default 100%
+     */
+    width?: number;
+} & TextareaAdjustableHeightType & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "children"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

package/components/textarea/Textarea.js

@@ -1 +1 @@
-"use strict";var e=require("../../_rollupPluginBabelHelpers-77a6284f.js"),a=require("../../tslib.es6-8c21e256.js"),t=require("react"),o=require("clsx"),r=require("../flex/Flex.js"),n=require("../help-text/HelpText.js"),i=require("../../utils/hooks/useHeightAdjustTextarea.js"),l=require("../../style-inject.es-d4ddeae4.js");function d(e){return e&&e.__esModule?e:{default:e}}require("../text/Text.js"),require("../../styles/constants/theme.js");var s=d(o),m="Amino_Textarea-module__textareaWrapper--cwLhP",_="Amino_Textarea-module__aminoInputWrapper--h9Y-6",u="Amino_Textarea-module__disabled--YH6dm",x="Amino_Textarea-module__fields--z7afT",c="Amino_Textarea-module__styledTextarea--Mk9DH",p="Amino_Textarea-module__hasLabel--qqvuZ",T="Amino_Textarea-module__hasContent--xpSft",f="Amino_Textarea-module__styledLabelInput--Q6-k8",h="Amino_Textarea-module__hasError--LdKr8",A="Amino_Textarea-module__hasActions--vv3T7",b="Amino_Textarea-module__actions--2J3kv";l.styleInject('.Amino_Textarea-module__textareaWrapper--cwLhP{width:var(--amino-textarea-width)}.Amino_Textarea-module__aminoInputWrapper--h9Y-6{border:1px solid var(--amino-border-color);border-radius:var(--amino-radius-12);overflow:hidden;padding:0;position:relative;width:100%}.Amino_Textarea-module__aminoInputWrapper--h9Y-6.Amino_Textarea-module__disabled--YH6dm *{cursor:not-allowed}.Amino_Textarea-module__aminoInputWrapper--h9Y-6.Amino_Textarea-module__disabled--YH6dm .Amino_Textarea-module__fields--z7afT{opacity:var(--amino-opacity-disabled)}.Amino_Textarea-module__aminoInputWrapper--h9Y-6.Amino_Textarea-module__disabled--YH6dm .Amino_Textarea-module__styledTextarea--Mk9DH{-webkit-user-select:none;user-select:none}.Amino_Textarea-module__fields--z7afT{display:flex;flex-direction:column;position:relative;width:100%}.Amino_Textarea-module__fields--z7afT:hover{border-color:var(--amino-gray-300)}.Amino_Textarea-module__styledTextarea--Mk9DH{background:var(--amino-input-background);border:none;box-sizing:border-box;flex-grow:1;font-size:var(--amino-font-size-base);font-weight:500;min-height:50px;outline:none;padding:8px 16px;resize:none;width:100%}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ{margin-top:24px;padding-top:0}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ::placeholder{opacity:0}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ.Amino_Textarea-module__hasContent--xpSft::placeholder,.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ:focus::placeholder{opacity:.6}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ.Amino_Textarea-module__hasContent--xpSft+.Amino_Textarea-module__styledLabelInput--Q6-k8,.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ:focus+.Amino_Textarea-module__styledLabelInput--Q6-k8{top:11px;transform:scale(.8)}.Amino_Textarea-module__styledTextarea--Mk9DH::placeholder{color:var(--amino-gray-400);font-weight:400;opacity:.6;transition:var(--amino-transition)}.Amino_Textarea-module__styledTextarea--Mk9DH:focus{outline:none}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasError--LdKr8~.Amino_Textarea-module__styledBorder--yOPdL:after{box-shadow:var(--amino-glow-error)}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasActions--vv3T7:not([rows]){min-height:5em}.Amino_Textarea-module__styledLabelInput--Q6-k8{color:var(--amino-gray-800);font-size:var(--amino-font-size-base);left:16px;line-height:var(--amino-font-size-base);position:absolute;top:calc(var(--amino-font-size-base) + 6px);transform-origin:left top;transition:var(--amino-transition)}.Amino_Textarea-module__styledBorder--yOPdL:after{border-radius:var(--amino-radius-12);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.Amino_Textarea-module__actions--2J3kv{align-items:center;background:var(--amino-page-background);display:flex;justify-content:flex-end;padding:16px}');var v=t.forwardRef((function(o,l){var d=o.actions,v=o.className,y=o.disabled,g=o.disableExpand,w=o.error,k=o.helpText,q=o.label,H=o.maxRows,L=o.rows,j=o.style,M=o.value,D=o.width,R=a.__rest(o,["actions","className","disabled","disableExpand","error","helpText","label","maxRows","rows","style","value","width"]),E=t.useId(),z=!!M,I=t.useRef(null),Y=t.useRef(null);return i.useHeightAdjustTextarea({maxRows:H,ref:I,shouldExpand:!g,textareaValue:(null==M?void 0:M.toString())||""}),React.createElement(r.Flex,{className:m,flexDirection:"column",gap:4,justifyContent:"space-between",style:a.__assign(a.__assign({},j),{"--amino-textarea-width":D||"100%"})},React.createElement("div",{className:s.default(v,_,"amino-input-wrapper",y&&u)},React.createElement("button",{className:x,onClick:function(){var e;return null===(e=null==I?void 0:I.current)||void 0===e?void 0:e.focus()},type:"button"},React.createElement("textarea",e._extends({ref:function(e){l&&"function"==typeof l?l(e):l&&(l.current=e),I.current=e},className:s.default(c,w&&h,q&&p,z&&T,!!d&&A),disabled:y,id:E,rows:L,value:M},R)),q&&React.createElement("label",{className:f,"data-label":q,htmlFor:R.id||E},q)),d&&React.createElement("div",{ref:Y,className:b},React.createElement(r.Flex,{alignItems:"center",fullHeight:!0,justifyContent:"flex-end"},d))),React.createElement(n.HelpText,{error:w,helpText:k,withoutMargin:!0}))}));exports.Textarea=v;
+"use strict";var e=require("../../_rollupPluginBabelHelpers-697f213c.js"),a=require("../../tslib.es6-8c21e256.js"),o=require("react"),t=require("clsx"),r=require("../flex/Flex.js"),i=require("../help-text/HelpText.js"),n=require("../../utils/hooks/useHeightAdjustTextarea.js"),l=require("../../style-inject.es-d4ddeae4.js"),s=require("react/jsx-runtime");function d(e){return e&&e.__esModule?e:{default:e}}require("../text/Text.js"),require("../../styles/constants/theme.js");var _=d(t),m="Amino_Textarea-module__textareaWrapper--cwLhP",u="Amino_Textarea-module__aminoInputWrapper--h9Y-6",x="Amino_Textarea-module__disabled--YH6dm",p="Amino_Textarea-module__fields--z7afT",T="Amino_Textarea-module__styledTextarea--Mk9DH",c="Amino_Textarea-module__hasLabel--qqvuZ",h="Amino_Textarea-module__hasContent--xpSft",f="Amino_Textarea-module__styledLabelInput--Q6-k8",A="Amino_Textarea-module__hasError--LdKr8",b="Amino_Textarea-module__hasActions--vv3T7",v="Amino_Textarea-module__actions--2J3kv";l.styleInject('.Amino_Textarea-module__textareaWrapper--cwLhP{width:var(--amino-textarea-width)}.Amino_Textarea-module__aminoInputWrapper--h9Y-6{border:1px solid var(--amino-border-color);border-radius:var(--amino-radius-12);overflow:hidden;padding:0;position:relative;width:100%}.Amino_Textarea-module__aminoInputWrapper--h9Y-6.Amino_Textarea-module__disabled--YH6dm *{cursor:not-allowed}.Amino_Textarea-module__aminoInputWrapper--h9Y-6.Amino_Textarea-module__disabled--YH6dm .Amino_Textarea-module__fields--z7afT{opacity:var(--amino-opacity-disabled)}.Amino_Textarea-module__aminoInputWrapper--h9Y-6.Amino_Textarea-module__disabled--YH6dm .Amino_Textarea-module__styledTextarea--Mk9DH{-webkit-user-select:none;user-select:none}.Amino_Textarea-module__fields--z7afT{display:flex;flex-direction:column;position:relative;width:100%}.Amino_Textarea-module__fields--z7afT:hover{border-color:var(--amino-gray-300)}.Amino_Textarea-module__styledTextarea--Mk9DH{background:var(--amino-input-background);border:none;box-sizing:border-box;flex-grow:1;font-size:var(--amino-font-size-base);font-weight:500;min-height:50px;outline:none;padding:8px 16px;resize:none;width:100%}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ{margin-top:24px;padding-top:0}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ::placeholder{opacity:0}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ.Amino_Textarea-module__hasContent--xpSft::placeholder,.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ:focus::placeholder{opacity:.6}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ.Amino_Textarea-module__hasContent--xpSft+.Amino_Textarea-module__styledLabelInput--Q6-k8,.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ:focus+.Amino_Textarea-module__styledLabelInput--Q6-k8{top:11px;transform:scale(.8)}.Amino_Textarea-module__styledTextarea--Mk9DH::placeholder{color:var(--amino-gray-400);font-weight:400;opacity:.6;transition:var(--amino-transition)}.Amino_Textarea-module__styledTextarea--Mk9DH:focus{outline:none}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasError--LdKr8~.Amino_Textarea-module__styledBorder--yOPdL:after{box-shadow:var(--amino-glow-error)}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasActions--vv3T7:not([rows]){min-height:5em}.Amino_Textarea-module__styledLabelInput--Q6-k8{color:var(--amino-gray-800);font-size:var(--amino-font-size-base);left:16px;line-height:var(--amino-font-size-base);position:absolute;top:calc(var(--amino-font-size-base) + 6px);transform-origin:left top;transition:var(--amino-transition)}.Amino_Textarea-module__styledBorder--yOPdL:after{border-radius:var(--amino-radius-12);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.Amino_Textarea-module__actions--2J3kv{align-items:center;background:var(--amino-page-background);display:flex;justify-content:flex-end;padding:16px}');var y=o.forwardRef((function(t,l){var d=t.actions,y=t.className,g=t.disabled,w=t.disableExpand,k=t.error,j=t.helpText,q=t.label,H=t.maxRows,L=t.rows,M=t.style,D=t.value,z=t.width,I=a.__rest(t,["actions","className","disabled","disableExpand","error","helpText","label","maxRows","rows","style","value","width"]),Y=o.useId(),N=!!D,W=o.useRef(null),Z=o.useRef(null);return n.useHeightAdjustTextarea({maxRows:H,ref:W,shouldExpand:!w,textareaValue:(null==D?void 0:D.toString())||""}),s.jsxs(r.Flex,{className:m,flexDirection:"column",gap:4,justifyContent:"space-between",style:a.__assign(a.__assign({},M),{"--amino-textarea-width":z||"100%"}),children:[s.jsxs("div",{className:_.default(y,u,"amino-input-wrapper",g&&x),children:[s.jsxs("button",{className:p,onClick:function(){var e;return null===(e=null==W?void 0:W.current)||void 0===e?void 0:e.focus()},type:"button",children:[s.jsx("textarea",e._objectSpread2({ref:function(e){l&&"function"==typeof l?l(e):l&&(l.current=e),W.current=e},className:_.default(T,k&&A,q&&c,N&&h,!!d&&b),disabled:g,id:Y,rows:L,value:D},I)),q&&s.jsx("label",{className:f,"data-label":q,htmlFor:I.id||Y,children:q})]}),d&&s.jsx("div",{ref:Z,className:v,children:s.jsx(r.Flex,{alignItems:"center",fullHeight:!0,justifyContent:"flex-end",children:d})})]}),s.jsx(i.HelpText,{error:k,helpText:j,withoutMargin:!0})]})}));exports.Textarea=y;

package/components/theme-select/ThemeSelect.d.ts

@@ -0,0 +1,28 @@
+export type Props = {
+    className?: string;
+    disabled?: boolean;
+    /**
+     * @default select
+     */
+    type?: 'cards' | 'select' | 'toggle';
+};
+/**
+ * ThemeSelect allows users to switch between light and dark themes using cards, a select dropdown, or a toggle switch.
+ * Integrates with the Amino theme system and updates the application theme accordingly. Supports disabling and multiple UI types.
+ *
+ * @example Basic usage (select)
+ * ```tsx
+ * <ThemeSelect />
+ * ```
+ *
+ * @example Card style
+ * ```tsx
+ * <ThemeSelect type="cards" />
+ * ```
+ *
+ * @example Toggle style, disabled
+ * ```tsx
+ * <ThemeSelect type="toggle" disabled />
+ * ```
+ */
+export declare const ThemeSelect: ({ className, disabled, type, }: Props) => import("react").JSX.Element;

package/components/theme-select/ThemeSelect.js

@@ -1 +1 @@
-"use strict";var e=require("../../tslib.es6-8c21e256.js"),t=require("react"),r=require("clsx"),a=require("../card/Card.js"),n=require("../select/Select.js"),c=require("../stack/HStack.js"),l=require("../switch/Switch.js"),i=require("../text/Text.js"),o=require("../../icons/custom/theme/ThemeDarkIcon.js"),s=require("../../icons/custom/theme/ThemeLightIcon.js"),u=require("../../icons/NightIcon.js"),m=require("../../icons/SunnyIcon.js"),d=require("../../utils/hooks/useAminoTheme.js"),h=require("../../style-inject.es-d4ddeae4.js");function _(e){return e&&e.__esModule?e:{default:e}}require("../../styles/constants/theme.js"),require("../../_rollupPluginBabelHelpers-77a6284f.js"),require("../select/_StyledReactSelect.js"),require("react-intersection-observer"),require("react-select"),require("../checkbox/Checkbox.js"),require("framer-motion"),require("../help-text/HelpText.js"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../global.module-569e4fd5.js"),require("../../utils/getTestId.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js"),require("../stack/Stack.js"),require("../../icons/icon-base/_ThemeIconBase.js"),require("zod"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("dayjs");var b=_(r),j="Amino_ThemeSelect-module__buttonStyled--wBHjJ",q="Amino_ThemeSelect-module__isActive--ZPXYh",g="Amino_ThemeSelect-module__themeCard--hAr8l";h.styleInject(".Amino_ThemeSelect-module__buttonStyled--wBHjJ{border:2px solid #0000;border-radius:var(--amino-radius-8);color:var(--amino-text-color)}.Amino_ThemeSelect-module__buttonStyled--wBHjJ.Amino_ThemeSelect-module__isActive--ZPXYh{border-color:var(--amino-blue-400);color:var(--amino-primary)}.Amino_ThemeSelect-module__buttonStyled--wBHjJ:not([disabled]):active,.Amino_ThemeSelect-module__buttonStyled--wBHjJ:not([disabled]):focus{outline:none}.Amino_ThemeSelect-module__themeCard--hAr8l{align-items:center;background:var(--amino-gray-0);display:flex;flex-direction:column;padding:16px}.Amino_ThemeSelect-module__themeCard--hAr8l svg{box-shadow:var(--amino-v3-shadow-large);height:64px;margin-bottom:16px;width:110px}");var y=[{label:"Light",value:"day"},{label:"Dark",value:"night"}];exports.ThemeSelect=function(r){var h=r.className,_=r.disabled,S=void 0!==_&&_,v=r.type,T=void 0===v?"select":v,f=d.useAminoTheme(),R=f.aminoTheme,I=f.setAminoTheme,k=e.__read(t.useState(!1),2),p=k[0],x=k[1];return t.useEffect((function(){x("day"===R)}),[R]),React.createElement(React.Fragment,null,"cards"===T&&React.createElement(c.HStack,{className:h},React.createElement("button",{className:b.default(j,"day"===R&&q),"data-theme":"day",onClick:function(){return I("day")},type:"button"},React.createElement(a.Card,{className:g},React.createElement(s.ThemeLightIcon,null),React.createElement(i.Text,{type:"bold-label"},"Light"))),React.createElement("button",{className:b.default(j,"night"===R&&q),"data-theme":"night",onClick:function(){return I("night")},type:"button"},React.createElement(a.Card,{className:g},React.createElement(o.ThemeDarkIcon,null),React.createElement(i.Text,{type:"bold-label"},"Dark")))),"select"===T&&React.createElement(n.Select,{className:h,icon:function(){switch(R){case"day":default:return React.createElement(m.SunnyIcon,null);case"night":return React.createElement(u.NightIcon,null)}}(),isClearable:!1,isDisabled:S,onChange:function(e){return I((null==e?void 0:e.value)||"day")},options:y,value:y.filter((function(e){return e.value===R}))}),"toggle"===T&&React.createElement(l.Switch,{checked:p,className:h,disabled:S,onChange:function(){return!S&&I("day"===R?"night":"day")},switchIconLeft:React.createElement(u.NightIcon,null),switchIconRight:React.createElement(m.SunnyIcon,null)}))};
+"use strict";var e=require("../../tslib.es6-8c21e256.js"),t=require("react"),r=require("clsx"),i=require("../card/Card.js"),s=require("../select/Select.js"),o=require("../stack/HStack.js"),n=require("../switch/Switch.js"),c=require("../text/Text.js"),l=require("../../icons/custom/theme/ThemeDarkIcon.js"),a=require("../../icons/custom/theme/ThemeLightIcon.js"),u=require("../../icons/NightIcon.js"),d=require("../../icons/SunnyIcon.js"),m=require("../../utils/hooks/useAminoTheme.js"),h=require("../../style-inject.es-d4ddeae4.js"),j=require("react/jsx-runtime");function _(e){return e&&e.__esModule?e:{default:e}}require("../../styles/constants/theme.js"),require("../../_rollupPluginBabelHelpers-697f213c.js"),require("../select/_StyledReactSelect.js"),require("react-intersection-observer"),require("react-select"),require("../checkbox/Checkbox.js"),require("framer-motion"),require("../help-text/HelpText.js"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../global.module-569e4fd5.js"),require("../../utils/getTestId.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js"),require("../stack/Stack.js"),require("../../icons/icon-base/_ThemeIconBase.js"),require("zod"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("dayjs");var b=_(r),q="Amino_ThemeSelect-module__buttonStyled--wBHjJ",x="Amino_ThemeSelect-module__isActive--ZPXYh",g="Amino_ThemeSelect-module__themeCard--hAr8l";h.styleInject(".Amino_ThemeSelect-module__buttonStyled--wBHjJ{border:2px solid #0000;border-radius:var(--amino-radius-8);color:var(--amino-text-color)}.Amino_ThemeSelect-module__buttonStyled--wBHjJ.Amino_ThemeSelect-module__isActive--ZPXYh{border-color:var(--amino-blue-400);color:var(--amino-primary)}.Amino_ThemeSelect-module__buttonStyled--wBHjJ:not([disabled]):active,.Amino_ThemeSelect-module__buttonStyled--wBHjJ:not([disabled]):focus{outline:none}.Amino_ThemeSelect-module__themeCard--hAr8l{align-items:center;background:var(--amino-gray-0);display:flex;flex-direction:column;padding:16px}.Amino_ThemeSelect-module__themeCard--hAr8l svg{box-shadow:var(--amino-v3-shadow-large);height:64px;margin-bottom:16px;width:110px}");var y=[{label:"Light",value:"day"},{label:"Dark",value:"night"}];exports.ThemeSelect=function(r){var h=r.className,_=r.disabled,S=void 0!==_&&_,v=r.type,T=void 0===v?"select":v,f=m.useAminoTheme(),I=f.aminoTheme,k=f.setAminoTheme,p=e.__read(t.useState(!1),2),A=p[0],C=p[1];return t.useEffect((function(){C("day"===I)}),[I]),j.jsxs(j.Fragment,{children:["cards"===T&&j.jsxs(o.HStack,{className:h,children:[j.jsx("button",{className:b.default(q,"day"===I&&x),"data-theme":"day",onClick:function(){return k("day")},type:"button",children:j.jsxs(i.Card,{className:g,children:[j.jsx(a.ThemeLightIcon,{}),j.jsx(c.Text,{type:"bold-label",children:"Light"})]})}),j.jsx("button",{className:b.default(q,"night"===I&&x),"data-theme":"night",onClick:function(){return k("night")},type:"button",children:j.jsxs(i.Card,{className:g,children:[j.jsx(l.ThemeDarkIcon,{}),j.jsx(c.Text,{type:"bold-label",children:"Dark"})]})})]}),"select"===T&&j.jsx(s.Select,{className:h,icon:function(){switch(I){case"day":default:return j.jsx(d.SunnyIcon,{});case"night":return j.jsx(u.NightIcon,{})}}(),isClearable:!1,isDisabled:S,onChange:function(e){return k((null==e?void 0:e.value)||"day")},options:y,value:y.filter((function(e){return e.value===I}))}),"toggle"===T&&j.jsx(n.Switch,{checked:A,className:h,disabled:S,onChange:function(){return!S&&k("day"===I?"night":"day")},switchIconLeft:j.jsx(u.NightIcon,{}),switchIconRight:j.jsx(d.SunnyIcon,{})})]})};

package/components/thumbnail/Thumbnail.d.ts

@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react';
+import type { ImageSize } from "../avatar/AvatarBase";
+import type { BaseProps } from "../../types/BaseProps";
+import type { Color, ColorPrefix } from "../../types/Color";
+declare const thumbnailShapes: {
+    readonly round: "50%";
+    readonly rounded: "20%";
+    readonly square: "0px";
+};
+export type ThumbnailProps = BaseProps & {
+    /** @default 'gray' */
+    /** @description automatically applies a color scheme based on the color passed */
+    color?: ColorPrefix;
+    icon: ReactNode;
+    /** @default 'full' */
+    intent?: 'full' | 'outline' | 'bordered';
+    /** @description mainColorOverride is used if the "color" prop is not sufficient for your needs */
+    mainColorOverride?: Color;
+    /** @description secondaryColorOverride is used if the "color" prop is not sufficient for your needs */
+    secondaryColorOverride?: Color;
+    /** @default 'round' */
+    shape?: keyof typeof thumbnailShapes;
+    /** @default 32 */
+    size?: ImageSize;
+};
+/**
+ * Thumbnail displays an icon with customizable styling, color schemes, and shapes.
+ * Used for visual representation of items or actions in a compact format.
+ * Supports different intents, shapes, colors, and sizes to match various design requirements.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Thumbnail icon={<UserIcon />} />
+ * ```
+ *
+ * @example Custom shape and color
+ * ```tsx
+ * <Thumbnail
+ *   color="blue"
+ *   icon={<DocumentIcon />}
+ *   shape="square"
+ * />
+ * ```
+ *
+ * @example With outline intent and custom size
+ * ```tsx
+ * <Thumbnail
+ *   icon={<StarIcon />}
+ *   intent="outline"
+ *   size={48}
+ * />
+ * ```
+ *
+ * @example With custom color override
+ * ```tsx
+ * <Thumbnail
+ *   icon={<GlobeIcon />}
+ *   mainColorOverride="purple800"
+ *   secondaryColorOverride="purple400"
+ * />
+ * ```
+ */
+export declare const Thumbnail: ({ className, color, icon, intent, mainColorOverride, secondaryColorOverride, shape, size, style, }: ThumbnailProps) => import("react").JSX.Element;
+export {};

package/components/thumbnail/Thumbnail.js

@@ -1 +1 @@
-"use strict";var i=require("../../tslib.es6-8c21e256.js"),o=require("clsx"),a=require("../../styles/constants/theme.js"),e=require("../../style-inject.es-d4ddeae4.js");function n(i){return i&&i.__esModule?i:{default:i}}var r=n(o),l="Amino_Thumbnail-module__wrapper--oG7iK",m="Amino_Thumbnail-module__bordered--hqPCS",t="Amino_Thumbnail-module__outline--BntlJ";e.styleInject(".Amino_Thumbnail-module__wrapper--oG7iK{align-items:center;background-color:var(--amino-thumbnail-background-color);border-radius:var(--amino-thumbnail-border-radius);box-sizing:initial;display:inline-flex;height:var(--amino-thumbnail-size);justify-content:center;width:var(--amino-thumbnail-size)}.Amino_Thumbnail-module__wrapper--oG7iK.Amino_Thumbnail-module__bordered--hqPCS{border:calc(var(--amino-thumbnail-size)/16) solid var(--amino-gray-0)}.Amino_Thumbnail-module__wrapper--oG7iK.Amino_Thumbnail-module__outline--BntlJ{background-color:initial;border:1px solid var(--amino-gray-200)}.Amino_Thumbnail-module__wrapper--oG7iK svg{color:var(--amino-thumbnail-svg-main-color);height:60%;width:60%}.Amino_Thumbnail-module__wrapper--oG7iK svg path[data-is-secondary-color]{fill:var(--amino-thumbnail-svg-secondary-color)}");var u={round:"50%",rounded:"20%",square:"0px"};exports.Thumbnail=function(o){var e=o.className,n=o.color,s=void 0===n?"gray":n,d=o.icon,c=o.intent,b=void 0===c?"full":c,h=o.mainColorOverride,_=o.secondaryColorOverride,v=o.shape,g=void 0===v?"round":v,p=o.size,y=void 0===p?32:p,T=o.style;return React.createElement("div",{className:r.default(e,l,"bordered"===b&&m,"outline"===b&&t),style:i.__assign(i.__assign({},T),{"--amino-thumbnail-background-color":a.theme["".concat(s,"100")],"--amino-thumbnail-border-radius":u[g],"--amino-thumbnail-size":"".concat(y,"px"),"--amino-thumbnail-svg-main-color":a.theme[h||"".concat(s,"800")],"--amino-thumbnail-svg-secondary-color":a.theme[_||"".concat(s,"400")]})},d)};
+"use strict";var i=require("../../tslib.es6-8c21e256.js"),o=require("clsx"),a=require("../../styles/constants/theme.js"),e=require("../../style-inject.es-d4ddeae4.js"),n=require("react/jsx-runtime");function r(i){return i&&i.__esModule?i:{default:i}}var l=r(o),m="Amino_Thumbnail-module__wrapper--oG7iK",u="Amino_Thumbnail-module__bordered--hqPCS",t="Amino_Thumbnail-module__outline--BntlJ";e.styleInject(".Amino_Thumbnail-module__wrapper--oG7iK{align-items:center;background-color:var(--amino-thumbnail-background-color);border-radius:var(--amino-thumbnail-border-radius);box-sizing:initial;display:inline-flex;height:var(--amino-thumbnail-size);justify-content:center;width:var(--amino-thumbnail-size)}.Amino_Thumbnail-module__wrapper--oG7iK.Amino_Thumbnail-module__bordered--hqPCS{border:calc(var(--amino-thumbnail-size)/16) solid var(--amino-gray-0)}.Amino_Thumbnail-module__wrapper--oG7iK.Amino_Thumbnail-module__outline--BntlJ{background-color:initial;border:1px solid var(--amino-gray-200)}.Amino_Thumbnail-module__wrapper--oG7iK svg{color:var(--amino-thumbnail-svg-main-color);height:60%;width:60%}.Amino_Thumbnail-module__wrapper--oG7iK svg path[data-is-secondary-color]{fill:var(--amino-thumbnail-svg-secondary-color)}");var s={round:"50%",rounded:"20%",square:"0px"};exports.Thumbnail=function(o){var e=o.className,r=o.color,d=void 0===r?"gray":r,c=o.icon,h=o.intent,b=void 0===h?"full":h,_=o.mainColorOverride,v=o.secondaryColorOverride,g=o.shape,p=void 0===g?"round":g,y=o.size,T=void 0===y?32:y,A=o.style;return n.jsx("div",{className:l.default(e,m,"bordered"===b&&u,"outline"===b&&t),style:i.__assign(i.__assign({},A),{"--amino-thumbnail-background-color":a.theme["".concat(d,"100")],"--amino-thumbnail-border-radius":s[p],"--amino-thumbnail-size":"".concat(T,"px"),"--amino-thumbnail-svg-main-color":a.theme[_||"".concat(d,"800")],"--amino-thumbnail-svg-secondary-color":a.theme[v||"".concat(d,"400")]}),children:c})};

package/components/toast/Toast.d.ts

@@ -0,0 +1,97 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+import type { Intent } from "../../types/Intent";
+export type Direction = 'top' | 'right' | 'bottom' | 'left';
+export type ToastProps = BaseProps & {
+    actions?: ReactNode;
+    children: ReactNode;
+    direction?: Direction;
+    /** Dismiss delay (default 6000 ms) */
+    duration?: number;
+    /** Pass a unique identifier for the toast (used for dismissing)
+     * @default uuid created in Amino
+     */
+    id?: string;
+    intent?: Extract<Intent, 'success' | 'warning' | 'error' | 'info'>;
+    /** If true, toast will be shown in the persistent stack */
+    isPersistent?: boolean;
+    /** Only used for persistent toasts */
+    onDismiss?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    toastKey: string;
+};
+/**
+ * Toast component displays brief notifications or feedback messages to users.
+ * It supports different intents (success, warning, error, info) with appropriate styling and icons,
+ * and can be configured with actions, animations, and persistence options.
+ *
+ * @example Basic info toast
+ * <Toast toastKey="info-toast">
+ *   Information message for the user
+ * </Toast>
+ *
+ * @example Success toast
+ * <Toast
+ *   intent="success"
+ *   toastKey="success-toast"
+ * >
+ *   Operation completed successfully
+ * </Toast>
+ *
+ * @example Warning toast
+ * <Toast
+ *   intent="warning"
+ *   toastKey="warning-toast"
+ * >
+ *   Please review your inputs before continuing
+ * </Toast>
+ *
+ * @example Error toast
+ * <Toast
+ *   intent="error"
+ *   toastKey="error-toast"
+ * >
+ *   An error occurred. Please try again.
+ * </Toast>
+ *
+ * @example With actions
+ * <Toast
+ *   intent="info"
+ *   toastKey="actions-toast"
+ *   actions={
+ *     <Button variant="plain">Undo</Button>
+ *   }
+ * >
+ *   Changes saved
+ * </Toast>
+ *
+ * @example Persistent toast with dismiss
+ * <Toast
+ *   intent="warning"
+ *   isPersistent={true}
+ *   onDismiss={() => setVisible(false)}
+ *   toastKey="persistent-toast"
+ * >
+ *   Your session will expire in 5 minutes
+ * </Toast>
+ *
+ * @example With custom direction
+ * <Toast
+ *   direction="bottom"
+ *   intent="info"
+ *   toastKey="direction-toast"
+ * >
+ *   Toast coming from the bottom
+ * </Toast>
+ *
+ * @example Using the Toast system
+ * // Typically used with the Toast system rather than directly:
+ * import { useToast } from 'src/components/toast/useToast';
+ *
+ * const { addToast } = useToast();
+ *
+ * addToast({
+ *   intent: 'success',
+ *   message: 'Item created successfully'
+ * });
+ */
+export declare const Toast: ({ actions, children, direction, intent, isPersistent, onDismiss, style, toastKey, }: ToastProps) => import("react").JSX.Element;