@zonos/amino 5.5.30 → 5.5.32

package/components/rich-card-select/RichCardStateSelect.d.ts

@@ -0,0 +1,75 @@
+import type { BaseProps } from "../../types/BaseProps";
+import type { UnitedState } from "../../types/UnitedStates";
+export type RichCardStateSelectProps<T extends UnitedState = UnitedState> = BaseProps & {
+    /**
+     * Handler called when a state card is clicked
+     * @param selectedState The state object that was selected
+     */
+    onClick: (selectedState: T) => void;
+    /**
+     * Array of state objects to display
+     * Each state object should have code, name, region, and optional highlighted and icon properties
+     */
+    states: T[];
+};
+/**
+ * A component that displays US states organized by region in a card-based interface.
+ * Each state is represented as a clickable card, grouped by geographic region.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import type { UnitedState } from 'src/types/UnitedStates';
+ *
+ * const [selectedState, setSelectedState] = useState<UnitedState | null>(null);
+ *
+ * const states: UnitedState[] = [
+ *   { code: 'CA', name: 'California', region: 'West' },
+ *   { code: 'NY', name: 'New York', region: 'Northeast' },
+ *   { code: 'TX', name: 'Texas', region: 'South' },
+ *   { code: 'IL', name: 'Illinois', region: 'Midwest' }
+ * ];
+ *
+ * <RichCardStateSelect
+ *   onClick={setSelectedState}
+ *   states={states}
+ * />
+ * ```
+ *
+ * @example With highlighted state
+ * ```tsx
+ * const states = [
+ *   { code: 'CA', name: 'California', region: 'West', highlighted: true },
+ *   { code: 'NY', name: 'New York', region: 'Northeast' },
+ *   { code: 'TX', name: 'Texas', region: 'South' }
+ * ];
+ *
+ * <RichCardStateSelect
+ *   onClick={handleStateSelect}
+ *   states={states}
+ * />
+ * ```
+ *
+ * @example With icons
+ * ```tsx
+ * const states = [
+ *   {
+ *     code: 'CA',
+ *     name: 'California',
+ *     region: 'West',
+ *     icon: <FlagIcon code="US-CA" />
+ *   },
+ *   {
+ *     code: 'NY',
+ *     name: 'New York',
+ *     region: 'Northeast',
+ *     icon: <FlagIcon code="US-NY" />
+ *   }
+ * ];
+ *
+ * <RichCardStateSelect
+ *   onClick={handleStateSelect}
+ *   states={states}
+ * />
+ * ```
+ */
+export declare const RichCardStateSelect: <T extends UnitedState = UnitedState>({ className, onClick, states, style, }: RichCardStateSelectProps<T>) => import("react").JSX.Element;

package/components/rich-card-select/RichCardStateSelect.js

@@ -1 +1 @@
-"use strict";var e=require("clsx"),t=require("../card/Card.js"),a=require("../stack/VStack.js"),r=require("../../style-inject.es-d4ddeae4.js");function i(e){return e&&e.__esModule?e:{default:e}}require("../../tslib.es6-8c21e256.js"),require("../stack/HStack.js"),require("../../_rollupPluginBabelHelpers-77a6284f.js"),require("../stack/Stack.js"),require("../text/Text.js"),require("../../styles/constants/theme.js");var o=i(e),n="Amino_RichCardStateSelect-module__regionLabel--SPGQW",c="Amino_RichCardStateSelect-module__regionWrapper---fUKw",l="Amino_RichCardStateSelect-module__stateCard--l39ey",s="Amino_RichCardStateSelect-module__highlighted--6mou3";r.styleInject(".Amino_RichCardStateSelect-module__regionLabel--SPGQW{font-weight:700}.Amino_RichCardStateSelect-module__regionWrapper---fUKw{display:flex;flex-wrap:wrap;gap:var(--amino-space-8)}.Amino_RichCardStateSelect-module__stateCard--l39ey{align-items:center;cursor:pointer;display:flex;flex:0 0 180px;font-size:var(--amino-font-size-s);font-weight:500;gap:var(--amino-space-24);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:180px}.Amino_RichCardStateSelect-module__stateCard--l39ey:not(.Amino_RichCardStateSelect-module__highlighted--6mou3):hover{background-color:var(--amino-gray-50)}.Amino_RichCardStateSelect-module__stateCard--l39ey.Amino_RichCardStateSelect-module__highlighted--6mou3{background-color:var(--amino-blue-50);border:2px solid var(--amino-blue-400);color:var(--amino-blue-600)}.Amino_RichCardStateSelect-module__stateCard--l39ey.Amino_RichCardStateSelect-module__highlighted--6mou3 svg>path{stroke:var(--amino-blue-600);fill:var(--amino-blue-200)}");exports.RichCardStateSelect=function(e){var r=e.className,i=e.onClick,u=e.states,m=e.style,d=["West","Midwest","South","Northeast","Territories"].filter((function(e){return u.some((function(t){return t.region===e}))}));return React.createElement(a.VStack,{className:r,spacing:24,style:m},d.map((function(e){return React.createElement("div",{key:e},React.createElement(a.VStack,{spacing:16},React.createElement("div",{className:n},e),React.createElement("div",{className:c},u.filter((function(t){return t.region===e})).map((function(e){return React.createElement("button",{key:e.code,onClick:function(){return i(e)},type:"button"},React.createElement(t.Card,{className:o.default(l,e.highlighted&&s),spacing:"10px"},e.icon,e.name))})))))})))};
+"use strict";var e=require("clsx"),t=require("../card/Card.js"),r=require("../stack/VStack.js"),i=require("../../style-inject.es-d4ddeae4.js"),a=require("react/jsx-runtime");function n(e){return e&&e.__esModule?e:{default:e}}require("../../tslib.es6-8c21e256.js"),require("../stack/HStack.js"),require("../../_rollupPluginBabelHelpers-697f213c.js"),require("../stack/Stack.js"),require("../text/Text.js"),require("../../styles/constants/theme.js");var o=n(e),l="Amino_RichCardStateSelect-module__regionLabel--SPGQW",c="Amino_RichCardStateSelect-module__regionWrapper---fUKw",s="Amino_RichCardStateSelect-module__stateCard--l39ey",d="Amino_RichCardStateSelect-module__highlighted--6mou3";i.styleInject(".Amino_RichCardStateSelect-module__regionLabel--SPGQW{font-weight:700}.Amino_RichCardStateSelect-module__regionWrapper---fUKw{display:flex;flex-wrap:wrap;gap:var(--amino-space-8)}.Amino_RichCardStateSelect-module__stateCard--l39ey{align-items:center;cursor:pointer;display:flex;flex:0 0 180px;font-size:var(--amino-font-size-s);font-weight:500;gap:var(--amino-space-24);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:180px}.Amino_RichCardStateSelect-module__stateCard--l39ey:not(.Amino_RichCardStateSelect-module__highlighted--6mou3):hover{background-color:var(--amino-gray-50)}.Amino_RichCardStateSelect-module__stateCard--l39ey.Amino_RichCardStateSelect-module__highlighted--6mou3{background-color:var(--amino-blue-50);border:2px solid var(--amino-blue-400);color:var(--amino-blue-600)}.Amino_RichCardStateSelect-module__stateCard--l39ey.Amino_RichCardStateSelect-module__highlighted--6mou3 svg>path{stroke:var(--amino-blue-600);fill:var(--amino-blue-200)}");exports.RichCardStateSelect=function(e){var i=e.className,n=e.onClick,u=e.states,m=e.style,h=["West","Midwest","South","Northeast","Territories"].filter((function(e){return u.some((function(t){return t.region===e}))}));return a.jsx(r.VStack,{className:i,spacing:24,style:m,children:h.map((function(e){return a.jsx("div",{children:a.jsxs(r.VStack,{spacing:16,children:[a.jsx("div",{className:l,children:e}),a.jsx("div",{className:c,children:u.filter((function(t){return t.region===e})).map((function(e){return a.jsx("button",{onClick:function(){return n(e)},type:"button",children:a.jsxs(t.Card,{className:o.default(s,e.highlighted&&d),spacing:"10px",children:[e.icon,e.name]})},e.code)}))})]})},e)}))})};

package/components/rich-checkbox/RichCheckbox.d.ts

@@ -0,0 +1,104 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+type RichCheckboxItemType = {
+    checked: boolean;
+    icon?: ReactNode;
+    label: ReactNode;
+    subtitle?: string;
+    value: string;
+};
+export type RichCheckboxProps = BaseProps & {
+    items: RichCheckboxItemType[];
+    onClick: (newVal: string) => void;
+};
+/**
+ * RichCheckbox component provides enhanced checkboxes with support for icons, labels, and subtitles.
+ * Use it for selection interfaces that need visual richness beyond standard checkboxes.
+ *
+ * @example Basic usage
+ * const [selectedOption, setSelectedOption] = useState('option1');
+ *
+ * <RichCheckbox
+ *   items={[
+ *     {
+ *       checked: selectedOption === 'option1',
+ *       label: "Option 1",
+ *       value: "option1"
+ *     },
+ *     {
+ *       checked: selectedOption === 'option2',
+ *       label: "Option 2",
+ *       value: "option2"
+ *     }
+ *   ]}
+ *   onClick={(value) => setSelectedOption(value)}
+ * />
+ *
+ * @example With subtitles
+ * <RichCheckbox
+ *   items={[
+ *     {
+ *       checked: selected === 'standard',
+ *       label: "Standard Shipping",
+ *       subtitle: "3-5 business days",
+ *       value: "standard"
+ *     },
+ *     {
+ *       checked: selected === 'express',
+ *       label: "Express Shipping",
+ *       subtitle: "1-2 business days",
+ *       value: "express"
+ *     }
+ *   ]}
+ *   onClick={(value) => setSelected(value)}
+ * />
+ *
+ * @example With icons
+ * <RichCheckbox
+ *   items={[
+ *     {
+ *       checked: selected === 'visa',
+ *       icon: <CreditCardIcon />,
+ *       label: "Credit Card",
+ *       value: "visa"
+ *     },
+ *     {
+ *       checked: selected === 'paypal',
+ *       icon: <PaypalIcon />,
+ *       label: "PayPal",
+ *       value: "paypal"
+ *     }
+ *   ]}
+ *   onClick={(value) => setSelected(value)}
+ * />
+ *
+ * @example Complete example with icons and subtitles
+ * <RichCheckbox
+ *   items={[
+ *     {
+ *       checked: selected === 'basic',
+ *       icon: <BasicPlanIcon />,
+ *       label: "Basic Plan",
+ *       subtitle: "$9.99/month - For individuals",
+ *       value: "basic"
+ *     },
+ *     {
+ *       checked: selected === 'pro',
+ *       icon: <ProPlanIcon />,
+ *       label: "Pro Plan",
+ *       subtitle: "$19.99/month - For professionals",
+ *       value: "pro"
+ *     },
+ *     {
+ *       checked: selected === 'enterprise',
+ *       icon: <EnterprisePlanIcon />,
+ *       label: "Enterprise Plan",
+ *       subtitle: "$49.99/month - For teams",
+ *       value: "enterprise"
+ *     }
+ *   ]}
+ *   onClick={(value) => setSelected(value)}
+ * />
+ */
+export declare const RichCheckbox: ({ className, items, onClick, style, }: RichCheckboxProps) => import("react").JSX.Element;
+export {};

package/components/rich-checkbox/RichCheckbox.js

@@ -1 +1 @@
-"use strict";var e=require("clsx"),o=require("../stack/VStack.js"),a=require("../text/Text.js"),t=require("../../icons/CheckmarkIcon.js"),c=require("../../style-inject.es-d4ddeae4.js");function i(e){return e&&e.__esModule?e:{default:e}}require("../../_rollupPluginBabelHelpers-77a6284f.js"),require("../../tslib.es6-8c21e256.js"),require("../stack/Stack.js"),require("../../styles/constants/theme.js"),require("react"),require("../../icons/icon-base/_IconBase.js");var n=i(e),r="Amino_RichCheckbox-module__styledRichCheckbox--UBAoE",l="Amino_RichCheckbox-module__label--uogM3",s="Amino_RichCheckbox-module__subtitle--LJpUN",m="Amino_RichCheckbox-module__styledVStack--Ctftf",u="Amino_RichCheckbox-module__styledIcon--KfzLA",d="Amino_RichCheckbox-module__styledItemContentDiv--EiRCD",h="Amino_RichCheckbox-module__hasIcon--g6o2Y";c.styleInject('.Amino_RichCheckbox-module__styledRichCheckbox--UBAoE{align-items:center;-webkit-appearance:none;appearance:none;background:var(--amino-raised-surface-color);border:var(--amino-border);border-radius:var(--amino-radius-6);display:flex;flex-direction:row;padding:var(--amino-space-16);padding-right:var(--amino-space-40);position:relative;text-align:left;transition:all .15s ease-in-out}.Amino_RichCheckbox-module__styledRichCheckbox--UBAoE:hover{background:var(--amino-hover-color);border:1px solid var(--amino-gray-200)}.Amino_RichCheckbox-module__styledRichCheckbox--UBAoE:focus{border:1px solid var(--amino-blue-300);outline:none}.Amino_RichCheckbox-module__label--uogM3{line-height:24px}[data-state=checked] .Amino_RichCheckbox-module__label--uogM3,[data-state=checked] .Amino_RichCheckbox-module__subtitle--LJpUN{color:var(--amino-blue-600)}button[data-state=checked] .Amino_RichCheckbox-module__styledVStack--Ctftf{background:var(--amino-blue-100);border:1px solid var(--amino-blue-300);color:var(--amino-blue-600)}.Amino_RichCheckbox-module__styledVStack--Ctftf svg{color:var(--amino-gray-0);height:var(--amino-space-12);width:var(--amino-space-12)}.Amino_RichCheckbox-module__styledIcon--KfzLA{align-items:center;background:var(--amino-blue-600);border-radius:50px;content:" ";display:flex;justify-content:center;padding:5px;position:absolute;right:var(--amino-space-16)}.Amino_RichCheckbox-module__styledItemContentDiv--EiRCD{grid-column-gap:var(--amino-space-24);align-items:center;display:grid}.Amino_RichCheckbox-module__styledItemContentDiv--EiRCD.Amino_RichCheckbox-module__hasIcon--g6o2Y{grid-template-columns:30px 1fr}');exports.RichCheckbox=function(e){var c=e.className,i=e.items,_=e.onClick,b=e.style;return React.createElement(o.VStack,{className:n.default(c,m),spacing:16,style:b},i.map((function(e){var c=e.checked,i=e.icon,m=e.label,b=e.subtitle,k=e.value;return React.createElement("button",{key:k,className:r,"data-state":c?"checked":"",onClick:function(e){return _(e.currentTarget.value)},type:"button",value:k},React.createElement("div",{className:n.default(d,!!i&&h)},i&&i,React.createElement(o.VStack,{spacing:0},React.createElement(a.Text,{className:l,color:"gray1000",type:"label"},m),b&&React.createElement(a.Text,{className:s,color:"gray700"},b))),c&&React.createElement("div",{className:u},React.createElement(t.CheckmarkIcon,null)))})))};
+"use strict";var e=require("clsx"),o=require("../stack/VStack.js"),i=require("../text/Text.js"),a=require("../../icons/CheckmarkIcon.js"),c=require("../../style-inject.es-d4ddeae4.js"),t=require("react/jsx-runtime");function r(e){return e&&e.__esModule?e:{default:e}}require("../../_rollupPluginBabelHelpers-697f213c.js"),require("../../tslib.es6-8c21e256.js"),require("../stack/Stack.js"),require("../../styles/constants/theme.js"),require("react"),require("../../icons/icon-base/_IconBase.js");var n=r(e),l="Amino_RichCheckbox-module__styledRichCheckbox--UBAoE",s="Amino_RichCheckbox-module__label--uogM3",d="Amino_RichCheckbox-module__subtitle--LJpUN",u="Amino_RichCheckbox-module__styledVStack--Ctftf",m="Amino_RichCheckbox-module__styledIcon--KfzLA",h="Amino_RichCheckbox-module__styledItemContentDiv--EiRCD",_="Amino_RichCheckbox-module__hasIcon--g6o2Y";c.styleInject('.Amino_RichCheckbox-module__styledRichCheckbox--UBAoE{align-items:center;-webkit-appearance:none;appearance:none;background:var(--amino-raised-surface-color);border:var(--amino-border);border-radius:var(--amino-radius-6);display:flex;flex-direction:row;padding:var(--amino-space-16);padding-right:var(--amino-space-40);position:relative;text-align:left;transition:all .15s ease-in-out}.Amino_RichCheckbox-module__styledRichCheckbox--UBAoE:hover{background:var(--amino-hover-color);border:1px solid var(--amino-gray-200)}.Amino_RichCheckbox-module__styledRichCheckbox--UBAoE:focus{border:1px solid var(--amino-blue-300);outline:none}.Amino_RichCheckbox-module__label--uogM3{line-height:24px}[data-state=checked] .Amino_RichCheckbox-module__label--uogM3,[data-state=checked] .Amino_RichCheckbox-module__subtitle--LJpUN{color:var(--amino-blue-600)}button[data-state=checked] .Amino_RichCheckbox-module__styledVStack--Ctftf{background:var(--amino-blue-100);border:1px solid var(--amino-blue-300);color:var(--amino-blue-600)}.Amino_RichCheckbox-module__styledVStack--Ctftf svg{color:var(--amino-gray-0);height:var(--amino-space-12);width:var(--amino-space-12)}.Amino_RichCheckbox-module__styledIcon--KfzLA{align-items:center;background:var(--amino-blue-600);border-radius:50px;content:" ";display:flex;justify-content:center;padding:5px;position:absolute;right:var(--amino-space-16)}.Amino_RichCheckbox-module__styledItemContentDiv--EiRCD{grid-column-gap:var(--amino-space-24);align-items:center;display:grid}.Amino_RichCheckbox-module__styledItemContentDiv--EiRCD.Amino_RichCheckbox-module__hasIcon--g6o2Y{grid-template-columns:30px 1fr}');exports.RichCheckbox=function(e){var c=e.className,r=e.items,b=e.onClick,x=e.style;return t.jsx(o.VStack,{className:n.default(c,u),spacing:16,style:x,children:r.map((function(e){var c=e.checked,r=e.icon,u=e.label,x=e.subtitle,k=e.value;return t.jsxs("button",{className:l,"data-state":c?"checked":"",onClick:function(e){return b(e.currentTarget.value)},type:"button",value:k,children:[t.jsxs("div",{className:n.default(h,!!r&&_),children:[r&&r,t.jsxs(o.VStack,{spacing:0,children:[t.jsx(i.Text,{className:s,color:"gray1000",type:"label",children:u}),x&&t.jsx(i.Text,{className:d,color:"gray700",children:x})]})]}),c&&t.jsx("div",{className:m,children:t.jsx(a.CheckmarkIcon,{})})]},k)}))})};

package/components/rich-radio/RichRadio.d.ts

@@ -0,0 +1,177 @@
+import { type ReactNode } from 'react';
+import { type TooltipProps } from 'react-tooltip';
+import type { BaseProps } from "../../types/BaseProps";
+export type RichRadioItemType<T extends string> = {
+    /**
+     * Sets the radio option to a disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text or React node to display as the primary content
+     */
+    label: ReactNode;
+    /**
+     * Optional secondary text to display below the label
+     */
+    subtitle?: string;
+    /**
+     * Text to display when hovering over the option
+     */
+    tooltip?: string;
+    /**
+     * Custom settings for the tooltip component
+     */
+    tooltipSetting?: Omit<TooltipProps, 'title' | 'children'>;
+    /**
+     * Unique identifier for this option
+     */
+    value: T;
+};
+export type RichRadioProps<T extends string = string> = BaseProps & {
+    /**
+     * Custom icon to show when an option is selected
+     * @default <CheckmarkIcon />
+     */
+    activeIcon?: ReactNode;
+    /**
+     * Custom icon to display on all options
+     */
+    icon?: ReactNode;
+    /**
+     * Height of each radio option
+     * @default 64
+     */
+    itemHeight?: 40 | 64;
+    /**
+     * Array of radio options to display
+     */
+    items: RichRadioItemType<T>[];
+    /**
+     * Function called when a radio option is selected
+     */
+    onChange: (value: T) => void;
+    /**
+     * Function that returns custom content for each option
+     */
+    renderCustomText?: (option: RichRadioItemType<T>) => ReactNode;
+    /**
+     * Currently selected value
+     */
+    value: T | null;
+};
+/**
+ * RichRadio provides a styled radio button group with rich content options.
+ * Each option can have a label, subtitle, tooltip, and custom styling.
+ * Only one option can be selected at a time.
+ *
+ * @example Basic usage with label and subtitle
+ * ```tsx
+ * const [selected, setSelected] = useState<string | null>('option1');
+ *
+ * <RichRadio
+ *   items={[
+ *     { label: 'Option One', subtitle: 'Description for option one', value: 'option1' },
+ *     { label: 'Option Two', subtitle: 'Description for option two', value: 'option2' },
+ *     { label: 'Option Three', value: 'option3' }
+ *   ]}
+ *   onChange={setSelected}
+ *   value={selected}
+ * />
+ * ```
+ *
+ * @example With tooltips
+ * ```tsx
+ * <RichRadio
+ *   items={[
+ *     {
+ *       label: 'Option with tooltip',
+ *       subtitle: 'Hover to see more information',
+ *       tooltip: 'This is additional information about this option',
+ *       tooltipSetting: { delayShow: 400 },
+ *       value: 'option1'
+ *     },
+ *     {
+ *       label: 'Another option',
+ *       value: 'option2'
+ *     }
+ *   ]}
+ *   onChange={handleChange}
+ *   value={selected}
+ * />
+ * ```
+ *
+ * @example With custom icons
+ * ```tsx
+ * <RichRadio
+ *   activeIcon={<CheckmarkIcon />}
+ *   icon={<ChevronRightIcon />}
+ *   items={radioOptions}
+ *   onChange={handleChange}
+ *   value={selected}
+ * />
+ * ```
+ *
+ * @example With custom rendering
+ * ```tsx
+ * <RichRadio
+ *   items={optionsWithMetadata}
+ *   onChange={handleChange}
+ *   renderCustomText={(option) => (
+ *     <div className="custom-option">
+ *       <strong>{option.label}</strong>
+ *       {option.subtitle && <div className="subtitle">{option.subtitle}</div>}
+ *       {option.metadata && <div className="metadata">{option.metadata}</div>}
+ *     </div>
+ *   )}
+ *   value={selected}
+ * />
+ * ```
+ *
+ * @example With compact size
+ * ```tsx
+ * <RichRadio
+ *   itemHeight={40}
+ *   items={radioOptions}
+ *   onChange={handleChange}
+ *   value={selected}
+ * />
+ * ```
+ *
+ * @example With disabled options
+ * ```tsx
+ * <RichRadio
+ *   items={[
+ *     { label: 'Available option', value: 'option1' },
+ *     {
+ *       label: 'Disabled option',
+ *       subtitle: 'This option cannot be selected',
+ *       value: 'option2',
+ *       disabled: true
+ *     }
+ *   ]}
+ *   onChange={handleChange}
+ *   value={selected}
+ * />
+ * ```
+ *
+ * @example With type safety using generics
+ * ```tsx
+ * type PaymentMethod = 'credit' | 'debit' | 'paypal';
+ *
+ * const [paymentType, setPaymentType] = useState<PaymentMethod | null>('credit');
+ *
+ * const paymentOptions: RichRadioItemType<PaymentMethod>[] = [
+ *   { label: 'Credit Card', value: 'credit' },
+ *   { label: 'Debit Card', value: 'debit' },
+ *   { label: 'PayPal', value: 'paypal' }
+ * ];
+ *
+ * <RichRadio<PaymentMethod>
+ *   items={paymentOptions}
+ *   onChange={setPaymentType}
+ *   value={paymentType}
+ * />
+ * ```
+ */
+export declare const RichRadio: <T extends string>({ activeIcon, className, icon, itemHeight, items, onChange, renderCustomText, style, value, }: RichRadioProps<T>) => import("react").JSX.Element;

package/components/rich-radio/RichRadio.js

@@ -1 +1 @@
-"use strict";var e=require("../../_rollupPluginBabelHelpers-77a6284f.js"),o=require("../../tslib.es6-8c21e256.js"),a=require("react"),i=require("react-tooltip"),t=require("clsx"),l=require("../stack/VStack.js"),n=require("../text/Text.js"),d=require("../../icons/CheckmarkIcon.js"),r=require("../../style-inject.es-d4ddeae4.js");function c(e){return e&&e.__esModule?e:{default:e}}require("../stack/Stack.js"),require("../../styles/constants/theme.js"),require("../../icons/icon-base/_IconBase.js");var s=c(i),m=c(t),u="Amino_RichRadio-module__styledIcon--knIjA",_="Amino_RichRadio-module__styledActiveIcon--gEn-e",R="Amino_RichRadio-module__styledItem--kTw3r",h="Amino_RichRadio-module__smallItem--4wzbt",p="Amino_RichRadio-module__label--Lxhqy",y="Amino_RichRadio-module__styledRadioGroup--7nOze",v="Amino_RichRadio-module__subtitle--xjXR-",b="Amino_RichRadio-module__styledTooltip--ulJKt";r.styleInject('.Amino_RichRadio-module__styledIcon--knIjA{background:var(--amino-gray-400);border-radius:50px;content:" ";padding:5px;position:absolute;right:var(--amino-space-16)}.Amino_RichRadio-module__styledIcon--knIjA svg{color:var(--amino-gray-0)}.Amino_RichRadio-module__styledActiveIcon--gEn-e{align-items:center;background:var(--amino-blue-600);border-radius:50px;content:" ";display:flex;justify-content:center;padding:2px;position:absolute;right:var(--amino-space-16)}.Amino_RichRadio-module__styledItem--kTw3r{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:var(--amino-border);border-radius:var(--amino-radius-8);display:flex;flex-direction:row;height:64px;padding:var(--amino-space-16);padding-right:calc(var(--amino-space-40) + 10px);position:relative;text-align:left;transition:all .15s ease-in-out}.Amino_RichRadio-module__styledItem--kTw3r:hover{background:var(--amino-hover-color);border:1px solid var(--amino-gray-200)}.Amino_RichRadio-module__styledItem--kTw3r:hover .Amino_RichRadio-module__styledIcon--knIjA{background:var(--amino-gray-600)}.Amino_RichRadio-module__styledItem--kTw3r:focus{border:1px solid var(--amino-blue-400);box-shadow:0 0 0 1px var(--amino-blue-400);outline:none}.Amino_RichRadio-module__styledItem--kTw3r>div{display:flex;flex:1;flex-direction:column}.Amino_RichRadio-module__styledItem--kTw3r.Amino_RichRadio-module__smallItem--4wzbt{height:40px}.Amino_RichRadio-module__label--Lxhqy{color:var(--amino-text-color);line-height:24px}[data-state=checked] .Amino_RichRadio-module__label--Lxhqy{color:var(--amino-blue-600)}.Amino_RichRadio-module__styledRadioGroup--7nOze .Amino_RichRadio-module__styledItem--kTw3r[data-state=checked]{box-shadow:var(--amino-shadow-select-active);color:var(--amino-blue-600)}.Amino_RichRadio-module__styledRadioGroup--7nOze .Amino_RichRadio-module__styledItem--kTw3r[data-state=checked] .Amino_RichRadio-module__subtitle--xjXR-{color:var(--amino-blue-600)}.Amino_RichRadio-module__styledRadioGroup--7nOze svg{color:var(--amino-gray-0);height:16px;width:16px}.Amino_RichRadio-module__styledTooltip--ulJKt.Amino_RichRadio-module__styledTooltip--ulJKt{border-radius:10px;max-width:350px}');exports.RichRadio=function(i){var t=i.activeIcon,r=i.className,c=i.icon,x=i.itemHeight,k=void 0===x?64:x,A=i.items,g=i.onChange,I=i.renderCustomText,f=i.style,w=i.value,j=o.__read(a.useState(w),2),T=j[0],q=j[1];a.useEffect((function(){q(w)}),[w]);return React.createElement(l.VStack,{className:m.default(r,y),spacing:8,style:f},A.map((function(o){return React.createElement("button",{key:o.value,className:m.default(R,40===k&&h),"data-disabled":o.disabled,"data-state":o.value===T?"checked":"","data-tip":o.tooltip,onClick:function(){var e;e=o.value,q(e),g(e)},type:"button"},o.tooltip&&React.createElement(s.default,e._extends({arrowColor:"transparent",className:b,effect:"solid"},o.tooltipSetting)),I?I(o):React.createElement("div",null,React.createElement(n.Text,{className:p,type:"label"},o.label),o.subtitle&&React.createElement(n.Text,{className:v,color:"gray900",type:"body"},o.subtitle)),!!c&&React.createElement("div",{className:u},c||React.createElement(d.CheckmarkIcon,null)),o.value===T&&React.createElement("div",{className:_},t||React.createElement(d.CheckmarkIcon,null)))})))};
+"use strict";var e=require("../../_rollupPluginBabelHelpers-697f213c.js"),o=require("../../tslib.es6-8c21e256.js"),i=require("react"),a=require("react-tooltip"),t=require("clsx"),l=require("../stack/VStack.js"),d=require("../text/Text.js"),r=require("../../icons/CheckmarkIcon.js"),n=require("../../style-inject.es-d4ddeae4.js"),s=require("react/jsx-runtime");function c(e){return e&&e.__esModule?e:{default:e}}require("../stack/Stack.js"),require("../../styles/constants/theme.js"),require("../../icons/icon-base/_IconBase.js");var m=c(a),u=c(t),_="Amino_RichRadio-module__styledIcon--knIjA",h="Amino_RichRadio-module__styledActiveIcon--gEn-e",R="Amino_RichRadio-module__styledItem--kTw3r",p="Amino_RichRadio-module__smallItem--4wzbt",x="Amino_RichRadio-module__label--Lxhqy",b="Amino_RichRadio-module__styledRadioGroup--7nOze",v="Amino_RichRadio-module__subtitle--xjXR-",y="Amino_RichRadio-module__styledTooltip--ulJKt";n.styleInject('.Amino_RichRadio-module__styledIcon--knIjA{background:var(--amino-gray-400);border-radius:50px;content:" ";padding:5px;position:absolute;right:var(--amino-space-16)}.Amino_RichRadio-module__styledIcon--knIjA svg{color:var(--amino-gray-0)}.Amino_RichRadio-module__styledActiveIcon--gEn-e{align-items:center;background:var(--amino-blue-600);border-radius:50px;content:" ";display:flex;justify-content:center;padding:2px;position:absolute;right:var(--amino-space-16)}.Amino_RichRadio-module__styledItem--kTw3r{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:var(--amino-border);border-radius:var(--amino-radius-8);display:flex;flex-direction:row;height:64px;padding:var(--amino-space-16);padding-right:calc(var(--amino-space-40) + 10px);position:relative;text-align:left;transition:all .15s ease-in-out}.Amino_RichRadio-module__styledItem--kTw3r:hover{background:var(--amino-hover-color);border:1px solid var(--amino-gray-200)}.Amino_RichRadio-module__styledItem--kTw3r:hover .Amino_RichRadio-module__styledIcon--knIjA{background:var(--amino-gray-600)}.Amino_RichRadio-module__styledItem--kTw3r:focus{border:1px solid var(--amino-blue-400);box-shadow:0 0 0 1px var(--amino-blue-400);outline:none}.Amino_RichRadio-module__styledItem--kTw3r>div{display:flex;flex:1;flex-direction:column}.Amino_RichRadio-module__styledItem--kTw3r.Amino_RichRadio-module__smallItem--4wzbt{height:40px}.Amino_RichRadio-module__label--Lxhqy{color:var(--amino-text-color);line-height:24px}[data-state=checked] .Amino_RichRadio-module__label--Lxhqy{color:var(--amino-blue-600)}.Amino_RichRadio-module__styledRadioGroup--7nOze .Amino_RichRadio-module__styledItem--kTw3r[data-state=checked]{box-shadow:var(--amino-shadow-select-active);color:var(--amino-blue-600)}.Amino_RichRadio-module__styledRadioGroup--7nOze .Amino_RichRadio-module__styledItem--kTw3r[data-state=checked] .Amino_RichRadio-module__subtitle--xjXR-{color:var(--amino-blue-600)}.Amino_RichRadio-module__styledRadioGroup--7nOze svg{color:var(--amino-gray-0);height:16px;width:16px}.Amino_RichRadio-module__styledTooltip--ulJKt.Amino_RichRadio-module__styledTooltip--ulJKt{border-radius:10px;max-width:350px}');exports.RichRadio=function(a){var t=a.activeIcon,n=a.className,c=a.icon,k=a.itemHeight,A=void 0===k?64:k,g=a.items,j=a.onChange,I=a.renderCustomText,f=a.style,w=a.value,q=o.__read(i.useState(w),2),T=q[0],N=q[1];i.useEffect((function(){N(w)}),[w]);return s.jsx(l.VStack,{className:u.default(n,b),spacing:8,style:f,children:g.map((function(o){return s.jsxs("button",{className:u.default(R,40===A&&p),"data-disabled":o.disabled,"data-state":o.value===T?"checked":"","data-tip":o.tooltip,onClick:function(){var e;e=o.value,N(e),j(e)},type:"button",children:[o.tooltip&&s.jsx(m.default,e._objectSpread2({arrowColor:"transparent",className:y,effect:"solid"},o.tooltipSetting)),I?I(o):s.jsxs("div",{children:[s.jsx(d.Text,{className:x,type:"label",children:o.label}),o.subtitle&&s.jsx(d.Text,{className:v,color:"gray900",type:"body",children:o.subtitle})]}),!!c&&s.jsx("div",{className:_,children:c||s.jsx(r.CheckmarkIcon,{})}),o.value===T&&s.jsx("div",{className:h,children:t||s.jsx(r.CheckmarkIcon,{})})]},o.value)}))})};

package/components/rounded-icon/RoundedIcon.d.ts

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+import type { Color } from "../../types/Color";
+import type { Intent } from "../../types/Intent";
+export type RoundedIconProps = BaseProps & {
+    background?: Color;
+    children: ReactNode;
+    color?: Color;
+    intent?: Intent;
+};
+/**
+ * RoundedIcon component displays an icon or element inside a circular or rounded background,
+ * supporting color, intent, and background customization. Useful for avatars, status indicators,
+ * or decorative iconography in lists, buttons, and cards.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <RoundedIcon>
+ *   <TruckDuotoneIcon />
+ * </RoundedIcon>
+ * ```
+ *
+ * @example With intent color
+ * ```tsx
+ * <RoundedIcon intent="primary">
+ *   <TruckDuotoneIcon />
+ * </RoundedIcon>
+ * ```
+ *
+ * @example With custom background and icon color
+ * ```tsx
+ * <RoundedIcon background="gray1000" color="purple400">
+ *   <TruckDuotoneIcon />
+ * </RoundedIcon>
+ * ```
+ *
+ * @example With success intent
+ * ```tsx
+ * <RoundedIcon intent="success">
+ *   <TruckDuotoneIcon />
+ * </RoundedIcon>
+ * ```
+ *
+ * @example In a list item
+ * ```tsx
+ * <ListItem
+ *   decorator={
+ *     <RoundedIcon intent="warning">
+ *       <AlertIcon />
+ *     </RoundedIcon>
+ *   }
+ *   label="Warning"
+ * />
+ * ```
+ */
+export declare const RoundedIcon: ({ background, children, className, color, intent, style, }: RoundedIconProps) => import("react").JSX.Element;

package/components/rounded-icon/RoundedIcon.js

@@ -1 +1 @@
-"use strict";var n=require("../../tslib.es6-8c21e256.js"),o=require("clsx"),e=require("../../styles/constants/theme.js"),r=require("../../style-inject.es-d4ddeae4.js");function a(n){return n&&n.__esModule?n:{default:n}}var d=a(o),c={iconWrapper:"Amino_RoundedIcon-module__iconWrapper--dNOMI",primary:"Amino_RoundedIcon-module__primary--nmE2V",danger:"Amino_RoundedIcon-module__danger--48cqf",warning:"Amino_RoundedIcon-module__warning---41kg",success:"Amino_RoundedIcon-module__success--NLnm9"};r.styleInject(".Amino_RoundedIcon-module__iconWrapper--dNOMI{align-items:center;background:var(--amino-rounded-icon-background);border-radius:32px;color:var(--amino-rounded-icon-color);display:flex;height:var(--amino-space-32);justify-content:center;width:var(--amino-space-32)}.Amino_RoundedIcon-module__iconWrapper--dNOMI svg{height:var(--amino-space-20);width:var(--amino-space-20)}.Amino_RoundedIcon-module__iconWrapper--dNOMI.Amino_RoundedIcon-module__primary--nmE2V{background:var(--amino-blue-100);color:var(--amino-blue-600)}.Amino_RoundedIcon-module__iconWrapper--dNOMI.Amino_RoundedIcon-module__danger--48cqf{background:var(--amino-red-100);color:var(--amino-red-600)}.Amino_RoundedIcon-module__iconWrapper--dNOMI.Amino_RoundedIcon-module__warning---41kg{background:var(--amino-orange-100);color:var(--amino-orange-600)}.Amino_RoundedIcon-module__iconWrapper--dNOMI.Amino_RoundedIcon-module__success--NLnm9{background:var(--amino-green-100);color:var(--amino-green-600)}");exports.RoundedIcon=function(o){var r=o.background,a=o.children,i=o.className,u=o.color,m=o.intent,s=o.style;return React.createElement("div",{className:d.default(i,c.iconWrapper,function(){switch(m){case"danger":case"primary":case"warning":case"success":return c[m];default:return""}}()),style:n.__assign(n.__assign({},s),{"--amino-rounded-icon-background":r?e.theme[r]:e.theme.gray200,"--amino-rounded-icon-color":u?e.theme[u]:e.theme.gray600})},a)};
+"use strict";var n=require("../../tslib.es6-8c21e256.js"),o=require("clsx"),e=require("../../styles/constants/theme.js"),r=require("../../style-inject.es-d4ddeae4.js"),a=require("react/jsx-runtime");function d(n){return n&&n.__esModule?n:{default:n}}var c=d(o),i={iconWrapper:"Amino_RoundedIcon-module__iconWrapper--dNOMI",primary:"Amino_RoundedIcon-module__primary--nmE2V",danger:"Amino_RoundedIcon-module__danger--48cqf",warning:"Amino_RoundedIcon-module__warning---41kg",success:"Amino_RoundedIcon-module__success--NLnm9"};r.styleInject(".Amino_RoundedIcon-module__iconWrapper--dNOMI{align-items:center;background:var(--amino-rounded-icon-background);border-radius:32px;color:var(--amino-rounded-icon-color);display:flex;height:var(--amino-space-32);justify-content:center;width:var(--amino-space-32)}.Amino_RoundedIcon-module__iconWrapper--dNOMI svg{height:var(--amino-space-20);width:var(--amino-space-20)}.Amino_RoundedIcon-module__iconWrapper--dNOMI.Amino_RoundedIcon-module__primary--nmE2V{background:var(--amino-blue-100);color:var(--amino-blue-600)}.Amino_RoundedIcon-module__iconWrapper--dNOMI.Amino_RoundedIcon-module__danger--48cqf{background:var(--amino-red-100);color:var(--amino-red-600)}.Amino_RoundedIcon-module__iconWrapper--dNOMI.Amino_RoundedIcon-module__warning---41kg{background:var(--amino-orange-100);color:var(--amino-orange-600)}.Amino_RoundedIcon-module__iconWrapper--dNOMI.Amino_RoundedIcon-module__success--NLnm9{background:var(--amino-green-100);color:var(--amino-green-600)}");exports.RoundedIcon=function(o){var r=o.background,d=o.children,u=o.className,m=o.color,s=o.intent,_=o.style;return a.jsx("div",{className:c.default(u,i.iconWrapper,function(){switch(s){case"danger":case"primary":case"warning":case"success":return i[s];default:return""}}()),style:n.__assign(n.__assign({},_),{"--amino-rounded-icon-background":r?e.theme[r]:e.theme.gray200,"--amino-rounded-icon-color":m?e.theme[m]:e.theme.gray600}),children:d})};

package/components/section/HSection.d.ts

@@ -0,0 +1,87 @@
+import { type ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type HSectionProps = BaseProps & {
+    /**
+     * Content to display within the section
+     */
+    children: ReactNode;
+    /**
+     * Initial collapse state. Only has effect when `collapsible` is set to true
+     * @default false
+     */
+    collapseByDefault?: boolean;
+    /**
+     * Whether the section content can be collapsed
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Title text or element to display at the top of the section
+     */
+    label?: ReactNode;
+    /**
+     * Secondary text or element to display below the label
+     */
+    sublabel?: ReactNode;
+};
+/**
+ * HSection component provides a horizontal section layout with optional
+ * collapsible content, label, and sublabel.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <HSection label="Section Title">
+ *   <p>Content goes here...</p>
+ * </HSection>
+ * ```
+ *
+ * @example With sublabel
+ * ```tsx
+ * <HSection
+ *   label="Account Information"
+ *   sublabel="Personal details and settings"
+ * >
+ *   <FormContent />
+ * </HSection>
+ * ```
+ *
+ * @example Collapsible section
+ * ```tsx
+ * <HSection
+ *   label="Advanced Settings"
+ *   sublabel="Configuration options for advanced users"
+ *   collapsible
+ * >
+ *   <AdvancedSettings />
+ * </HSection>
+ * ```
+ *
+ * @example Collapsed by default
+ * ```tsx
+ * <HSection
+ *   label="Optional Information"
+ *   collapsible
+ *   collapseByDefault
+ * >
+ *   <OptionalFields />
+ * </HSection>
+ * ```
+ *
+ * @example Multiple sections
+ * ```tsx
+ * <VStack>
+ *   <HSection label="Basic Information">
+ *     <BasicInfoForm />
+ *   </HSection>
+ *
+ *   <HSection
+ *     label="Advanced Settings"
+ *     collapsible
+ *     collapseByDefault
+ *   >
+ *     <AdvancedSettings />
+ *   </HSection>
+ * </VStack>
+ * ```
+ */
+export declare const HSection: ({ children, className, collapseByDefault, collapsible, label, style, sublabel, }: HSectionProps) => import("react").JSX.Element;

package/components/section/HSection.js

@@ -1 +1 @@
-"use strict";var e=require("../../tslib.es6-8c21e256.js"),o=require("react"),t=require("clsx"),l=require("../button/Button.js"),i=require("../collapse/Collapse.js"),n=require("./_SectionInnerWrapper.js"),r=require("./_SectionSubheader.js"),a=require("../stack/HStack.js"),c=require("../text/Text.js"),s=require("../../icons/ChevronUpIcon.js"),d=require("../../style-inject.es-d4ddeae4.js");function u(e){return e&&e.__esModule?e:{default:e}}require("../../_rollupPluginBabelHelpers-77a6284f.js"),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("@mui/material/Collapse"),require("../stack/Stack.js"),require("../../icons/icon-base/_IconBase.js");var m=u(t),_="Amino_HSection-module__styledSectionWrapper--zroOG",p="Amino_HSection-module__styledCollapseIndicator--fYDVo",f="Amino_HSection-module__collapsed--EiZ4e",y="Amino_HSection-module__styledDiv--iakQB",S="Amino_HSection-module__titleDiv--rklK6";d.styleInject(".Amino_HSection-module__styledSectionWrapper--zroOG{grid-template-columns:1fr 2fr;margin-bottom:40px;padding:8px}.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__styledCollapseIndicator--fYDVo{background:#0000;margin-left:4px;position:relative;transition:all .2s ease}.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__styledCollapseIndicator--fYDVo:hover path[data-is-secondary-color]{fill:var(--amino-gray-300)}.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__styledCollapseIndicator--fYDVo:active path[data-is-secondary-color],.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__styledCollapseIndicator--fYDVo:focus path[data-is-secondary-color]{fill:var(--amino-gray-400)}.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__styledCollapseIndicator--fYDVo:active,.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__styledCollapseIndicator--fYDVo:focus,.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__styledCollapseIndicator--fYDVo:hover{background:#0000;color:var(--amino-gray-800)}.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__collapsed--EiZ4e{transform:rotate(90deg)}.Amino_HSection-module__styledDiv--iakQB{display:flex;flex-direction:column}.Amino_HSection-module__titleDiv--rklK6{align-items:center;display:flex;justify-content:space-between}");exports.HSection=function(t){var d=t.children,u=t.className,H=t.collapseByDefault,A=void 0!==H&&H,C=t.collapsible,I=void 0!==C&&C,q=t.label,v=t.style,D=t.sublabel,j=void 0===D?"":D,b=e.__read(o.useState(A),2),V=b[0],Y=b[1];return React.createElement(a.HStack,{className:m.default(u,_),style:v},q&&React.createElement(n.SectionInnerWrapper,null,React.createElement("div",{className:y},I?React.createElement("div",{className:S,onClick:function(){return Y(!V)},onKeyDown:function(){return null},role:"button",tabIndex:0},React.createElement(c.Text,{type:"title"},q),React.createElement(l.Button,{className:m.default(p,V&&f),icon:React.createElement(s.ChevronUpIcon,null),onClick:function(){return Y(!V)},size:"sm",variant:"plain"})):React.createElement(c.Text,{type:"title"},q),j&&React.createElement(r.SectionSubheader,null,j))),I?React.createElement(i.Collapse,{collapsed:V},d):React.createElement("div",null,d))};
+"use strict";var e=require("../../tslib.es6-8c21e256.js"),o=require("react"),i=require("clsx"),l=require("../button/Button.js"),t=require("../collapse/Collapse.js"),n=require("./_SectionInnerWrapper.js"),r=require("./_SectionSubheader.js"),s=require("../stack/HStack.js"),a=require("../text/Text.js"),c=require("../../icons/ChevronUpIcon.js"),d=require("../../style-inject.es-d4ddeae4.js"),u=require("react/jsx-runtime");function _(e){return e&&e.__esModule?e:{default:e}}require("../../_rollupPluginBabelHelpers-697f213c.js"),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("@mui/material/Collapse"),require("../stack/Stack.js"),require("../../icons/icon-base/_IconBase.js");var m=_(i),p="Amino_HSection-module__styledSectionWrapper--zroOG",f="Amino_HSection-module__styledCollapseIndicator--fYDVo",y="Amino_HSection-module__collapsed--EiZ4e",S="Amino_HSection-module__styledDiv--iakQB",j="Amino_HSection-module__titleDiv--rklK6";d.styleInject(".Amino_HSection-module__styledSectionWrapper--zroOG{grid-template-columns:1fr 2fr;margin-bottom:40px;padding:8px}.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__styledCollapseIndicator--fYDVo{background:#0000;margin-left:4px;position:relative;transition:all .2s ease}.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__styledCollapseIndicator--fYDVo:hover path[data-is-secondary-color]{fill:var(--amino-gray-300)}.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__styledCollapseIndicator--fYDVo:active path[data-is-secondary-color],.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__styledCollapseIndicator--fYDVo:focus path[data-is-secondary-color]{fill:var(--amino-gray-400)}.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__styledCollapseIndicator--fYDVo:active,.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__styledCollapseIndicator--fYDVo:focus,.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__styledCollapseIndicator--fYDVo:hover{background:#0000;color:var(--amino-gray-800)}.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__styledCollapseIndicator--fYDVo.Amino_HSection-module__collapsed--EiZ4e{transform:rotate(90deg)}.Amino_HSection-module__styledDiv--iakQB{display:flex;flex-direction:column}.Amino_HSection-module__titleDiv--rklK6{align-items:center;display:flex;justify-content:space-between}");exports.HSection=function(i){var d=i.children,_=i.className,H=i.collapseByDefault,A=void 0!==H&&H,q=i.collapsible,x=void 0!==q&&q,C=i.label,I=i.style,v=i.sublabel,D=void 0===v?"":v,h=e.__read(o.useState(A),2),b=h[0],V=h[1];return u.jsxs(s.HStack,{className:m.default(_,p),style:I,children:[C&&u.jsx(n.SectionInnerWrapper,{children:u.jsxs("div",{className:S,children:[x?u.jsxs("div",{className:j,onClick:function(){return V(!b)},onKeyDown:function(){return null},role:"button",tabIndex:0,children:[u.jsx(a.Text,{type:"title",children:C}),u.jsx(l.Button,{className:m.default(f,b&&y),icon:u.jsx(c.ChevronUpIcon,{}),onClick:function(){return V(!b)},size:"sm",variant:"plain"})]}):u.jsx(a.Text,{type:"title",children:C}),D&&u.jsx(r.SectionSubheader,{children:D})]})}),x?u.jsx(t.Collapse,{collapsed:b,children:d}):u.jsx("div",{children:d})]})};