@zonos/amino 5.5.30 → 5.5.32

package/components/connection-map/ConnectionMap.d.ts

@@ -0,0 +1,75 @@
+import type { BaseProps } from "../../types/BaseProps";
+import type { GeoJsonWorld } from "../../types/GeoJsonWorld";
+import type { CountryOption } from "../../utils/hooks/useCountryOptions";
+type Props = BaseProps & {
+    /**
+     * Array of country options to be used for mapping country names to ISO codes
+     */
+    countries: CountryOption[];
+    /**
+     * ISO country code for the origin country
+     */
+    from: string;
+    /**
+     * Height of the map in pixels
+     * @default 400
+     */
+    height?: number;
+    /**
+     * ISO country code for the destination country
+     */
+    to: string;
+    /**
+     * GeoJSON data containing world map information
+     */
+    worldData: GeoJsonWorld | null;
+};
+/**
+ * A geographic map component that visualizes connections between two countries.
+ * Displays a world map with highlighted countries and a connecting line between them,
+ * automatically centering and scaling the view for optimal visualization.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const { countryOptions } = useCountryOptions();
+ * const [worldData, setWorldData] = useState<GeoJsonWorld | null>(null);
+ *
+ * useEffect(() => {
+ *   fetch('/zonos-countries-geojson.json')
+ *     .then(response => response.json())
+ *     .then(data => setWorldData(data));
+ * }, []);
+ *
+ * <ConnectionMap
+ *   countries={countryOptions}
+ *   from="US"
+ *   to="JP"
+ *   worldData={worldData}
+ * />
+ * ```
+ *
+ * @example With custom height
+ * ```tsx
+ * <ConnectionMap
+ *   countries={countryOptions}
+ *   from="GB"
+ *   to="AU"
+ *   height={600}
+ *   worldData={worldData}
+ * />
+ * ```
+ *
+ * @example With custom styling
+ * ```tsx
+ * <ConnectionMap
+ *   className="custom-map-container"
+ *   countries={countryOptions}
+ *   from="CA"
+ *   to="BR"
+ *   style={{ border: '1px solid var(--amino-gray-200)' }}
+ *   worldData={worldData}
+ * />
+ * ```
+ */
+export declare const ConnectionMap: ({ className, countries, from, height, style, to, worldData, }: Props) => import("react").JSX.Element;
+export {};

package/components/connection-map/ConnectionMap.js

@@ -1 +1 @@
-"use strict";var e=require("../../tslib.es6-8c21e256.js"),t=require("react"),r=require("react-simple-maps"),a=require("clsx"),n=require("d3-geo"),o=require("topojson-client"),i=require("../skeleton/Skeleton.js"),c=require("../../styles/constants/theme.js"),l=require("../../utils/getCountryCodeByName.js"),s=require("../../style-inject.es-d4ddeae4.js");function u(e){return e&&e.__esModule?e:{default:e}}var m=u(a),d="Amino_ConnectionMapStories-module__map--Z4-O0",h="Amino_ConnectionMapStories-module__mapSkeleton--55ejv";s.styleInject(".Amino_ConnectionMapStories-module__map--Z4-O0{background:var(--amino-gray-50);border-radius:var(--amino-radius-12);overflow:hidden}.Amino_ConnectionMapStories-module__map--Z4-O0 *{outline:none}.Amino_ConnectionMapStories-module__mapSkeleton--55ejv{border-radius:var(--amino-radius-12);box-sizing:border-box;margin:0;padding:16.5%;width:100%}");exports.ConnectionMap=function(a){var s=a.className,u=a.countries,f=a.from,p=a.height,g=void 0===p?400:p,_=a.style,b=a.to,v=a.worldData,E=e.__read(t.useState([0,0]),2),y=E[0],R=E[1],M=e.__read(t.useState(1),2),k=M[0],C=M[1],j=e.__read(t.useState([0,0,0]),2),S=j[0],q=j[1],N=t.useMemo((function(){return v?o.feature(v,v.objects.countries).features:null}),[v]),w=t.useCallback((function(e){var t=null==N?void 0:N.find((function(t){var r;return l.getCountryCodeByName(null===(r=t.properties)||void 0===r?void 0:r.name,u)===e}));return t?n.geoCentroid(t):[0,0]}),[u,N]),x=!(N&&u.length&&f&&b);return t.useEffect((function(){if(!x){var t=e.__read(w(f),2),r=t[0],a=t[1],o=e.__read(w(b),2),i=o[0],c=o[1],l=n.geoDistance([r,a],[i,c]),s=n.geoDistance([r,0],[i,0]),u=n.geoDistance([0,a],[0,c]),m=function(e,t){return-19.46498024*e+-92.29376925*t+284.7+(e+t>4?80*(e+t-4):0)}(s,u);C(m);var d=e.__read([(r+i)/2,(a+c)/2],2),h=d[0],p=d[1];R([0,p]);var g=-h;Math.abs(r-i)>180&&(g+=180);var _=Math.abs(p)>55?l*-(Math.abs(p)-50):0,v=u>1&&s>u&&Math.max(a,c)>50?s/u*-5:0;q([g,_+v,0])}}),[w,b,f,x]),x?React.createElement(i.Skeleton,{className:h,height:g}):React.createElement("div",{className:m.default(d,s),style:_},React.createElement(r.ComposableMap,{height:g,projection:"geoEqualEarth",projectionConfig:{center:y,rotate:S,scale:k}},React.createElement(r.Geographies,{geography:N},(function(e){return e.geographies.map((function(e){var t=[b,f].includes(l.getCountryCodeByName(e.properties.name,u));return React.createElement(r.Geography,{key:e.rsmKey,fill:t?c.theme.blue100:c.theme.gray0,geography:e,stroke:t?c.theme.blue400:c.theme.gray200,strokeWidth:2})}))})),React.createElement(r.Marker,{coordinates:w(f)},React.createElement("circle",{fill:c.theme.blue300,r:10}),React.createElement("circle",{fill:c.theme.blue400,r:7})),React.createElement(r.Marker,{coordinates:w(b)},React.createElement("circle",{fill:c.theme.blue300,r:10}),React.createElement("circle",{fill:c.theme.blue400,r:7})),React.createElement(r.Line,{from:w(f),stroke:c.theme.blue600,strokeWidth:4,to:w(b)}),React.createElement(r.Marker,{coordinates:w(f)},React.createElement("circle",{fill:"white",r:4}),React.createElement("circle",{fill:c.theme.blue600,r:2})),React.createElement(r.Marker,{coordinates:w(b)},React.createElement("circle",{fill:"white",r:4}),React.createElement("circle",{fill:c.theme.blue600,r:2}))))};
+"use strict";var e=require("../../tslib.es6-8c21e256.js"),r=require("react"),t=require("react-simple-maps"),i=require("clsx"),o=require("d3-geo"),n=require("topojson-client"),a=require("../skeleton/Skeleton.js"),s=require("../../styles/constants/theme.js"),l=require("../../utils/getCountryCodeByName.js"),u=require("../../style-inject.es-d4ddeae4.js"),c=require("react/jsx-runtime");function d(e){return e&&e.__esModule?e:{default:e}}var m=d(i),h="Amino_ConnectionMapStories-module__map--Z4-O0",j="Amino_ConnectionMapStories-module__mapSkeleton--55ejv";u.styleInject(".Amino_ConnectionMapStories-module__map--Z4-O0{background:var(--amino-gray-50);border-radius:var(--amino-radius-12);overflow:hidden}.Amino_ConnectionMapStories-module__map--Z4-O0 *{outline:none}.Amino_ConnectionMapStories-module__mapSkeleton--55ejv{border-radius:var(--amino-radius-12);box-sizing:border-box;margin:0;padding:16.5%;width:100%}");exports.ConnectionMap=function(i){var u=i.className,d=i.countries,f=i.from,p=i.height,g=void 0===p?400:p,_=i.style,x=i.to,b=i.worldData,v=e.__read(r.useState([0,0]),2),y=v[0],M=v[1],C=e.__read(r.useState(1),2),k=C[0],q=C[1],S=e.__read(r.useState([0,0,0]),2),N=S[0],w=S[1],A=r.useMemo((function(){return b?n.feature(b,b.objects.countries).features:null}),[b]),D=r.useCallback((function(e){var r=null==A?void 0:A.find((function(r){var t;return l.getCountryCodeByName(null===(t=r.properties)||void 0===t?void 0:t.name,d)===e}));return r?o.geoCentroid(r):[0,0]}),[d,A]),B=!(A&&d.length&&f&&x);return r.useEffect((function(){if(!B){var r=e.__read(D(f),2),t=r[0],i=r[1],n=e.__read(D(x),2),a=n[0],s=n[1],l=o.geoDistance([t,i],[a,s]),u=o.geoDistance([t,0],[a,0]),c=o.geoDistance([0,i],[0,s]),d=function(e,r){return-19.46498024*e+-92.29376925*r+284.7+(e+r>4?80*(e+r-4):0)}(u,c);q(d);var m=e.__read([(t+a)/2,(i+s)/2],2),h=m[0],j=m[1];M([0,j]);var p=-h;Math.abs(t-a)>180&&(p+=180);var g=Math.abs(j)>55?l*-(Math.abs(j)-50):0,_=c>1&&u>c&&Math.max(i,s)>50?u/c*-5:0;w([p,g+_,0])}}),[D,x,f,B]),B?c.jsx(a.Skeleton,{className:j,height:g}):c.jsx("div",{className:m.default(h,u),style:_,children:c.jsxs(t.ComposableMap,{height:g,projection:"geoEqualEarth",projectionConfig:{center:y,rotate:N,scale:k},children:[c.jsx(t.Geographies,{geography:A,children:function(e){return e.geographies.map((function(e){var r=[x,f].includes(l.getCountryCodeByName(e.properties.name,d));return c.jsx(t.Geography,{fill:r?s.theme.blue100:s.theme.gray0,geography:e,stroke:r?s.theme.blue400:s.theme.gray200,strokeWidth:2},e.rsmKey)}))}}),c.jsxs(t.Marker,{coordinates:D(f),children:[c.jsx("circle",{fill:s.theme.blue300,r:10}),c.jsx("circle",{fill:s.theme.blue400,r:7})]}),c.jsxs(t.Marker,{coordinates:D(x),children:[c.jsx("circle",{fill:s.theme.blue300,r:10}),c.jsx("circle",{fill:s.theme.blue400,r:7})]}),c.jsx(t.Line,{from:D(f),stroke:s.theme.blue600,strokeWidth:4,to:D(x)}),c.jsxs(t.Marker,{coordinates:D(f),children:[c.jsx("circle",{fill:"white",r:4}),c.jsx("circle",{fill:s.theme.blue600,r:2})]}),c.jsxs(t.Marker,{coordinates:D(x),children:[c.jsx("circle",{fill:"white",r:4}),c.jsx("circle",{fill:s.theme.blue600,r:2})]})]})})};

package/components/country-multi-select/CountryMultiSelectExpanded.d.ts

@@ -0,0 +1,123 @@
+import { type ReactNode } from 'react';
+import type { CountryMultiSelectExpandedOption } from "./CountryMultiSelectExpandedOption";
+import { type HelpTextProps } from "../help-text/HelpText";
+import type { BaseProps } from "../../types/BaseProps";
+export type CountryMultiSelectExpandedProps<CountryCode extends string = string> = BaseProps & HelpTextProps & {
+    /**
+     * Optional actions to display in the component header
+     */
+    actions?: ReactNode;
+    /**
+     * Array of country options to display in the select
+     */
+    countries: CountryMultiSelectExpandedOption<CountryCode>[];
+    /**
+     * Whether the component is in a disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Maximum height of the country selection area in pixels
+     * @default 380
+     */
+    maxHeight?: number;
+    /**
+     * Whether to hide the component header
+     * @default false
+     */
+    noHeader?: boolean;
+    /**
+     * Handler called when selection changes
+     * @param countries Array of country options that are selected
+     */
+    onChange: (countries: CountryMultiSelectExpandedOption<CountryCode>[]) => void;
+    /**
+     * Array of country options that are currently selected
+     */
+    selectedCountries: CountryMultiSelectExpandedOption<CountryCode>[];
+    /**
+     * Whether to hide the search functionality
+     * @default false
+     */
+    withoutSearch?: boolean;
+};
+/**
+ * An expanded view component for selecting multiple countries, organized by regions.
+ * Features include search functionality, group selection, and individual country selection.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [selectedCountries, setSelectedCountries] = useState<CountryMultiSelectExpandedOption[]>([]);
+ * const countries = [
+ *   {
+ *     code: 'US',
+ *     group: 'North America',
+ *     icon: <FlagIcon code="US" />,
+ *     label: 'United States'
+ *   },
+ *   {
+ *     code: 'CA',
+ *     group: 'North America',
+ *     icon: <FlagIcon code="CA" />,
+ *     label: 'Canada'
+ *   }
+ * ];
+ *
+ * <CountryMultiSelectExpanded
+ *   countries={countries}
+ *   onChange={setSelectedCountries}
+ *   selectedCountries={selectedCountries}
+ * />
+ * ```
+ *
+ * @example With disabled countries
+ * ```tsx
+ * const countries = [
+ *   {
+ *     code: 'US',
+ *     group: 'North America',
+ *     icon: <FlagIcon code="US" />,
+ *     label: 'United States'
+ *   },
+ *   {
+ *     code: 'CA',
+ *     disabled: true,
+ *     group: 'North America',
+ *     icon: <FlagIcon code="CA" />,
+ *     label: 'Canada'
+ *   }
+ * ];
+ *
+ * <CountryMultiSelectExpanded
+ *   countries={countries}
+ *   onChange={setSelectedCountries}
+ *   selectedCountries={selectedCountries}
+ * />
+ * ```
+ *
+ * @example With custom actions
+ * ```tsx
+ * <CountryMultiSelectExpanded
+ *   actions={
+ *     <Button onClick={() => console.log('Custom action')} size="small">
+ *       Custom Action
+ *     </Button>
+ *   }
+ *   countries={countries}
+ *   onChange={setSelectedCountries}
+ *   selectedCountries={selectedCountries}
+ * />
+ * ```
+ *
+ * @example With error state
+ * ```tsx
+ * <CountryMultiSelectExpanded
+ *   countries={countries}
+ *   error={!selectedCountries.length}
+ *   helpText={!selectedCountries.length ? 'At least one country is required' : undefined}
+ *   onChange={setSelectedCountries}
+ *   selectedCountries={selectedCountries}
+ * />
+ * ```
+ */
+export declare const CountryMultiSelectExpanded: <CountryCode extends string = string>({ actions, className, countries, disabled, error, helpText, maxHeight, noHeader, onChange, selectedCountries, style, withoutSearch, }: CountryMultiSelectExpandedProps<CountryCode>) => import("react").JSX.Element;

package/components/country-multi-select/CountryMultiSelectExpanded.js

@@ -1 +1 @@
-"use strict";var e=require("../../tslib.es6-8c21e256.js"),t=require("react"),r=require("clsx"),n=require("lodash/groupBy"),a=require("../button/Button.js"),l=require("../checkbox/Checkbox.js"),c=require("../collapse/Collapse.js"),o=require("../../CountryMultiSelectExpandedOption-e473f7c0.js"),s=require("../divider/Divider.js"),i=require("../help-text/HelpText.js"),u=require("../text/Text.js"),d=require("../../icons/ChevronUpIcon.js"),p=require("../../icons/RemoveCircleIcon.js"),m=require("../../icons/SearchIcon.js"),f=require("../../utils/getFuzzySearch.js");function h(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("../../style-inject.es-d4ddeae4.js"),require("../button/useRipple.js"),require("../spinner/Spinner.js"),require("../../utils/getTestId.js"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../global.module-569e4fd5.js"),require("@mui/material/Collapse"),require("react-intersection-observer"),require("fuse.js");var y=h(r),b=h(n);exports.CountryMultiSelectExpanded=function(r){var n=r.actions,h=r.className,v=r.countries,R=r.disabled,C=void 0!==R&&R,E=r.error,q=void 0!==E&&E,_=r.helpText,x=r.maxHeight,g=void 0===x?380:x,j=r.noHeader,S=void 0!==j&&j,N=r.onChange,k=r.selectedCountries,I=r.style,T=r.withoutSearch,M=void 0!==T&&T,z=t.useId(),A=e.__read(t.useState(""),2),W=A[0],H=A[1],B=e.__read(t.useState([]),2),w=B[0],F=B[1],O=t.useMemo((function(){return v.sort((function(e,t){return e.label.localeCompare(t.label)}))}),[v]),D=t.useCallback((function(e){return f.getFuzzySearch({array:O,options:{keys:["label","code","group"],threshold:.1}}).fuzzySearch.search(e)}),[O]),U=t.useMemo((function(){return""===W?O:D(W).map((function(e){return e.item}))}),[O,D,W]),G=t.useMemo((function(){var t=Object.entries(b.default(U,"group")).map((function(t){var r=e.__read(t,2),n=r[0];return{countries:r[1],label:n}}));return t.sort((function(e,t){return e.label.localeCompare(t.label)}))}),[U]),P=t.useMemo((function(){return O.filter((function(e){return!e.disabled})).length===k.length}),[O,k.length]);if(t.useEffect((function(){W&&F(G.map((function(e){return e.label})))}),[G,W]),!O.length)return React.createElement("div",{className:y.default(h)},React.createElement(u.Text,{color:"textColorSecondary"},"No countries"));var J=O.filter((function(e){return!e.disabled})).length;return React.createElement("div",{className:y.default(o.styles.wrapper,h,C&&o.styles.disabled),style:I},!S&&React.createElement("div",{className:o.styles.header},React.createElement(u.Text,{type:"bold-label"},"Countries and Regions"),React.createElement(u.Text,{color:"textColorSecondary",type:"label"},k.length," of ",J," selected")),React.createElement(i.HelpText,{error:q,helpText:_,withoutMargin:!0}),React.createElement("div",{className:y.default(o.styles.componentWrapper,q&&"error")},React.createElement("div",{className:o.styles.componentHeaderWrapper},!M&&React.createElement("label",{className:o.styles.searchInput,htmlFor:z},React.createElement(m.SearchIcon,{size:24}),React.createElement("input",{autoComplete:"off",id:z,onChange:function(e){return H(e.target.value)},placeholder:"Search...",type:"text",value:W}),W&&React.createElement(a.Button,{icon:React.createElement(p.RemoveCircleIcon,{size:24}),onClick:function(){return H("")},variant:"text"})),n&&React.createElement("div",{className:o.styles.headerActions},n)),(!!n||!M)&&React.createElement(s.Divider,{noMargin:!0}),U.length?React.createElement("div",{className:o.styles.selectionWrapper,style:{maxHeight:"".concat(g,"px")}},!W&&React.createElement("div",{className:o.styles.checkboxWrapper},React.createElement(l.Checkbox,{checked:P,label:"Select all",onChange:function(e){N(e?O.filter((function(e){return!e.disabled})):[])}})),G.map((function(t){var r=t.countries.filter((function(e){return k.some((function(t){return t.code===e.code}))})).length,n=t.countries.filter((function(e){return!e.disabled})).length,a=!!n&&t.countries.every((function(e){return e.disabled||k.some((function(t){return t.code===e.code}))})),s=!w.includes(t.label);return React.createElement("div",{key:t.label},React.createElement("div",{className:y.default(o.styles.groupWrapper,o.styles.hoverWrapper)},React.createElement(l.Checkbox,{checked:a,disabled:!n,label:t.label,onChange:function(r){if(r){var n=e.__spreadArray(e.__spreadArray([],e.__read(k),!1),e.__read(t.countries.filter((function(e){return!e.disabled}))),!1);N(n)}else n=k.filter((function(e){return!e.disabled&&!t.countries.some((function(t){return t.code===e.code}))})),N(n)}}),React.createElement("button",{className:o.styles.collapseButton,onClick:function(){w.includes(t.label)?F(w.filter((function(e){return e!==t.label}))):F(e.__spreadArray(e.__spreadArray([],e.__read(w),!1),[t.label],!1))},type:"button"},React.createElement(u.Text,{color:"textColorSecondary"},r,"/",n),React.createElement(d.ChevronUpIcon,{className:y.default(o.styles.collapseIcon,s&&o.styles.collapsed),size:24}))),React.createElement(c.Collapse,{collapsed:s},React.createElement("div",{className:o.styles.countriesWrapper},t.countries.map((function(t){var r=k.some((function(e){return e.code===t.code}));return React.createElement(o._CountryMultiSelectExpandedOptionComponent,{key:t.code,country:t,isChecked:r,onChange:function(r){N(r?e.__spreadArray(e.__spreadArray([],e.__read(k),!1),[t],!1):k.filter((function(e){return e.code!==t.code})))}})})))))}))):React.createElement("div",{className:o.styles.noCountriesWrapper},React.createElement(u.Text,{color:"textColorSecondary"},"No countries"))))};
+"use strict";var e=require("../../tslib.es6-8c21e256.js"),r=require("react"),t=require("clsx"),s=require("lodash/groupBy"),n=require("../button/Button.js"),l=require("../checkbox/Checkbox.js"),o=require("../collapse/Collapse.js"),i=require("../../CountryMultiSelectExpandedOption-22d4110d.js"),a=require("../divider/Divider.js"),c=require("../help-text/HelpText.js"),u=require("../text/Text.js"),d=require("../../icons/ChevronUpIcon.js"),p=require("../../icons/RemoveCircleIcon.js"),h=require("../../icons/SearchIcon.js"),x=require("../../utils/getFuzzySearch.js"),f=require("react/jsx-runtime");function j(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("../../style-inject.es-d4ddeae4.js"),require("../button/useRipple.js"),require("../spinner/Spinner.js"),require("../../utils/getTestId.js"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../global.module-569e4fd5.js"),require("@mui/material/Collapse"),require("react-intersection-observer"),require("fuse.js");var m=j(t),b=j(s);exports.CountryMultiSelectExpanded=function(t){var s=t.actions,j=t.className,y=t.countries,v=t.disabled,C=void 0!==v&&v,q=t.error,_=void 0!==q&&q,g=t.helpText,S=t.maxHeight,N=void 0===S?380:S,k=t.noHeader,I=void 0!==k&&k,T=t.onChange,M=t.selectedCountries,z=t.style,A=t.withoutSearch,W=void 0!==A&&A,H=r.useId(),B=e.__read(r.useState(""),2),R=B[0],E=B[1],w=e.__read(r.useState([]),2),F=w[0],O=w[1],D=r.useMemo((function(){return y.sort((function(e,r){return e.label.localeCompare(r.label)}))}),[y]),U=r.useCallback((function(e){return x.getFuzzySearch({array:D,options:{keys:["label","code","group"],threshold:.1}}).fuzzySearch.search(e)}),[D]),G=r.useMemo((function(){return""===R?D:U(R).map((function(e){return e.item}))}),[D,U,R]),P=r.useMemo((function(){var r=Object.entries(b.default(G,"group")).map((function(r){var t=e.__read(r,2),s=t[0];return{countries:t[1],label:s}}));return r.sort((function(e,r){return e.label.localeCompare(r.label)}))}),[G]),J=r.useMemo((function(){return D.filter((function(e){return!e.disabled})).length===M.length}),[D,M.length]);if(r.useEffect((function(){R&&O(P.map((function(e){return e.label})))}),[P,R]),!D.length)return f.jsx("div",{className:m.default(j),children:f.jsx(u.Text,{color:"textColorSecondary",children:"No countries"})});var K=D.filter((function(e){return!e.disabled})).length;return f.jsxs("div",{className:m.default(i.styles.wrapper,j,C&&i.styles.disabled),style:z,children:[!I&&f.jsxs("div",{className:i.styles.header,children:[f.jsx(u.Text,{type:"bold-label",children:"Countries and Regions"}),f.jsxs(u.Text,{color:"textColorSecondary",type:"label",children:[M.length," of ",K," selected"]})]}),f.jsx(c.HelpText,{error:_,helpText:g,withoutMargin:!0}),f.jsxs("div",{className:m.default(i.styles.componentWrapper,_&&"error"),children:[f.jsxs("div",{className:i.styles.componentHeaderWrapper,children:[!W&&f.jsxs("label",{className:i.styles.searchInput,htmlFor:H,children:[f.jsx(h.SearchIcon,{size:24}),f.jsx("input",{autoComplete:"off",id:H,onChange:function(e){return E(e.target.value)},placeholder:"Search...",type:"text",value:R}),R&&f.jsx(n.Button,{icon:f.jsx(p.RemoveCircleIcon,{size:24}),onClick:function(){return E("")},variant:"text"})]}),s&&f.jsx("div",{className:i.styles.headerActions,children:s})]}),(!!s||!W)&&f.jsx(a.Divider,{noMargin:!0}),G.length?f.jsxs("div",{className:i.styles.selectionWrapper,style:{maxHeight:"".concat(N,"px")},children:[!R&&f.jsx("div",{className:i.styles.checkboxWrapper,children:f.jsx(l.Checkbox,{checked:J,label:"Select all",onChange:function(e){T(e?D.filter((function(e){return!e.disabled})):[])}})}),P.map((function(r){var t=r.countries.filter((function(e){return M.some((function(r){return r.code===e.code}))})).length,s=r.countries.filter((function(e){return!e.disabled})).length,n=!!s&&r.countries.every((function(e){return e.disabled||M.some((function(r){return r.code===e.code}))})),a=!F.includes(r.label);return f.jsxs("div",{children:[f.jsxs("div",{className:m.default(i.styles.groupWrapper,i.styles.hoverWrapper),children:[f.jsx(l.Checkbox,{checked:n,disabled:!s,label:r.label,onChange:function(t){if(t){var s=e.__spreadArray(e.__spreadArray([],e.__read(M),!1),e.__read(r.countries.filter((function(e){return!e.disabled}))),!1);T(s)}else s=M.filter((function(e){return!e.disabled&&!r.countries.some((function(r){return r.code===e.code}))})),T(s)}}),f.jsxs("button",{className:i.styles.collapseButton,onClick:function(){F.includes(r.label)?O(F.filter((function(e){return e!==r.label}))):O(e.__spreadArray(e.__spreadArray([],e.__read(F),!1),[r.label],!1))},type:"button",children:[f.jsxs(u.Text,{color:"textColorSecondary",children:[t,"/",s]}),f.jsx(d.ChevronUpIcon,{className:m.default(i.styles.collapseIcon,a&&i.styles.collapsed),size:24})]})]}),f.jsx(o.Collapse,{collapsed:a,children:f.jsx("div",{className:i.styles.countriesWrapper,children:r.countries.map((function(r){var t=M.some((function(e){return e.code===r.code}));return f.jsx(i._CountryMultiSelectExpandedOptionComponent,{country:r,isChecked:t,onChange:function(t){T(t?e.__spreadArray(e.__spreadArray([],e.__read(M),!1),[r],!1):M.filter((function(e){return e.code!==r.code})))}},r.code)}))})})]},r.label)}))]}):f.jsx("div",{className:i.styles.noCountriesWrapper,children:f.jsx(u.Text,{color:"textColorSecondary",children:"No countries"})})]})]})};

package/components/country-multi-select/CountryMultiSelectExpandedOption.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+export type CountryMultiSelectExpandedOption<CountryCode extends string = string> = {
+    code: CountryCode;
+    disabled?: boolean;
+    /**
+     * Key to group by
+     */
+    group: string;
+    icon: ReactNode | (() => ReactNode);
+    label: string;
+    /**
+     * Having this as a ReactNode breaks storybook (and only storybook, it works fine elsewhere) somehow. I have no idea, but it needs to be a function instead...
+     * @returns
+     */
+    rightDecorator?: () => ReactNode;
+};
+type Props<T extends string> = {
+    country: CountryMultiSelectExpandedOption<T>;
+    isChecked: boolean;
+    onChange: (checked: boolean) => void;
+};
+export declare const _CountryMultiSelectExpandedOptionComponent: <T extends string>({ country, isChecked, onChange, }: Props<T>) => import("react").JSX.Element;
+export {};

package/components/country-multi-select/CountryMultiSelectExpandedOption.js

@@ -1 +1 @@
-"use strict";require("react-intersection-observer"),require("clsx"),require("../checkbox/Checkbox.js"),require("../../styles/constants/theme.js");var e=require("../../CountryMultiSelectExpandedOption-e473f7c0.js");require("../../_rollupPluginBabelHelpers-77a6284f.js"),require("../../tslib.es6-8c21e256.js"),require("react"),require("framer-motion"),require("../help-text/HelpText.js"),require("../text/Text.js"),require("../../style-inject.es-d4ddeae4.js"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../global.module-569e4fd5.js"),require("../../utils/getTestId.js"),exports._CountryMultiSelectExpandedOptionComponent=e._CountryMultiSelectExpandedOptionComponent;
+"use strict";require("react-intersection-observer"),require("clsx"),require("../checkbox/Checkbox.js"),require("../../styles/constants/theme.js");var e=require("../../CountryMultiSelectExpandedOption-22d4110d.js");require("react/jsx-runtime"),require("../../_rollupPluginBabelHelpers-697f213c.js"),require("../../tslib.es6-8c21e256.js"),require("react"),require("framer-motion"),require("../help-text/HelpText.js"),require("../text/Text.js"),require("../../style-inject.es-d4ddeae4.js"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../global.module-569e4fd5.js"),require("../../utils/getTestId.js"),exports._CountryMultiSelectExpandedOptionComponent=e._CountryMultiSelectExpandedOptionComponent;

package/components/cover-sheet/CoverSheet.d.ts

@@ -0,0 +1,119 @@
+import { type ReactNode } from 'react';
+import { type BaseDialogProps } from "../dialog/BaseDialog";
+export type CoverSheetProps = BaseDialogProps & {
+    /**
+     * Unique ID for the action wrapper element where CoverSheetActions will be portaled into
+     * @default '__cover-sheet-actions'
+     */
+    actionWrapperId?: string;
+    /**
+     * Actions to display in the sheet header, typically buttons
+     */
+    actions?: ReactNode;
+    /**
+     * Custom component to render in the header area
+     */
+    headerComponent?: ReactNode;
+    /**
+     * Whether to hide the close button in the header
+     * @default false
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Title text to display in the header
+     */
+    label: string;
+};
+/**
+ * CoverSheet component provides a sliding panel that covers the current view
+ * from the bottom of the screen. It's commonly used for displaying additional
+ * content or actions without navigating away from the current page.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <Button onClick={() => setOpen(true)}>Open Cover Sheet</Button>
+ *
+ * <CoverSheet
+ *   label="Details"
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ * >
+ *   <p>Content goes here...</p>
+ * </CoverSheet>
+ * ```
+ *
+ * @example With action buttons
+ * ```tsx
+ * <CoverSheet
+ *   label="Edit Profile"
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   actions={
+ *     <>
+ *       <Button onClick={handleCancel}>Cancel</Button>
+ *       <Button variant="primary" onClick={handleSave}>Save</Button>
+ *     </>
+ *   }
+ * >
+ *   <form>
+ *    <fields>
+ *   </form>
+ * </CoverSheet>
+ * ```
+ *
+ * @example With custom header component
+ * ```tsx
+ * <CoverSheet
+ *   label="Advanced Settings"
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   headerComponent={
+ *     <MenuButton action={<Button variant="primary">Actions</Button>}>
+ *       <Menu>
+ *         <MenuItem onClick={handleExport}>Export</MenuItem>
+ *         <MenuItem onClick={handleImport}>Import</MenuItem>
+ *       </Menu>
+ *     </MenuButton>
+ *   }
+ * >
+ *   <p>Content goes here...</p>
+ * </CoverSheet>
+ * ```
+ *
+ * @example Without close button
+ * ```tsx
+ * <CoverSheet
+ *   label="Terms of Service"
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   hideCloseButton={true}
+ *   actions={<Button onClick={handleClose}>I Understand</Button>}
+ * >
+ *   <p>Terms and conditions content...</p>
+ * </CoverSheet>
+ * ```
+ *
+ * @example With dynamic actions using CoverSheetActions
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <CoverSheet
+ *   label="Document Actions"
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   actionWrapperId="document-actions"
+ * >
+ *   <p>Select documents to perform actions on them.</p>
+ *
+ *   {selectedDocuments.length > 0 && (
+ *     <CoverSheetActions coverSheetActionId="document-actions">
+ *       <Button onClick={handleDelete}>Delete Selected</Button>
+ *       <Button variant="primary" onClick={handleDownload}>Download</Button>
+ *     </CoverSheetActions>
+ *   )}
+ * </CoverSheet>
+ * ```
+ */
+export declare const CoverSheet: ({ actions, actionWrapperId, children, className, headerComponent, hideCloseButton, label, onClose, open, ...props }: CoverSheetProps) => import("react").JSX.Element;

package/components/cover-sheet/CoverSheet.js

@@ -1 +1 @@
-"use strict";var e=require("../../_rollupPluginBabelHelpers-77a6284f.js"),t=require("../../tslib.es6-8c21e256.js"),o=require("react"),r=require("clsx"),n=require("../button/Button.js"),i=require("./CoverSheetActions.js"),a=require("../dialog/BaseDialog.js"),s=require("../text/Text.js"),c=require("../../icons/RemoveIcon.js"),l=require("../../style-inject.es-d4ddeae4.js");function u(e){return e&&e.__esModule?e:{default:e}}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("react-dom"),require("../stack/HStack.js"),require("../stack/Stack.js"),require("../../icons/icon-base/_IconBase.js");var d=u(r),m="Amino_CoverSheet-module__coverSheet--nZP66",p="Amino_CoverSheet-module__headerContainer--SCAgD",h="Amino_CoverSheet-module__header--praFM",v="Amino_CoverSheet-module__headerComponent--fgFRV",_="Amino_CoverSheet-module__content--Zht4F";l.styleInject(".Amino_CoverSheet-module__coverSheet--nZP66{background:var(--amino-page-background);border:var(--amino-border-subtle);border-radius:0;box-sizing:border-box;color:var(--amino-text-color);height:100vh;left:0;max-height:100vh;outline:none;overscroll-behavior:contain;position:fixed;top:0;width:100vw}@media print{.Amino_CoverSheet-module__coverSheet--nZP66{height:unset;min-height:100vh;position:absolute}}.Amino_CoverSheet-module__headerContainer--SCAgD{align-items:center;background-color:var(--amino-page-background);border-bottom:var(--amino-border-subtle);display:flex;height:64px;justify-content:space-between;padding:var(--amino-space-16) var(--amino-space-32);position:-webkit-sticky;position:sticky;top:0;z-index:99}@media print{.Amino_CoverSheet-module__headerContainer--SCAgD{display:none}}.Amino_CoverSheet-module__header--praFM{align-items:center;display:flex;gap:var(--amino-space-16)}.Amino_CoverSheet-module__headerComponent--fgFRV{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.Amino_CoverSheet-module__content--Zht4F{flex-grow:1;overflow:auto;padding:var(--amino-space-56)}");exports.CoverSheet=function(r){var l=r.actions,u=r.actionWrapperId,C=void 0===u?"__cover-sheet-actions":u,b=r.children,g=r.className,S=r.headerComponent,f=r.hideCloseButton,q=void 0!==f&&f,j=r.label,A=r.onClose,x=r.open,R=t.__rest(r,["actions","actionWrapperId","children","className","headerComponent","hideCloseButton","label","onClose","open"]);return o.useEffect((function(){"undefined"!=typeof document&&document.querySelectorAll("[id='".concat(C,"']")).length>1&&console.error('Duplicate id "'.concat(C,'" detected in "CoverSheet" component. Please set "actionWrapperId" to a unique id.'))}),[C]),o.useEffect((function(){(null===document||void 0===document?void 0:document.body)&&(document.body.style.overflow=x?"hidden":"auto")}),[x]),React.createElement(a.BaseDialog,e._extends({className:d.default(m,g),onClose:A,open:x,popupMotionProps:{animate:{translateY:0},exit:{translateY:"100vh"},initial:{translateY:"100vh"},transition:{duration:.35,ease:[0,0,0,1]}}},R),React.createElement("header",{className:p},React.createElement("div",{className:h},!q&&React.createElement(n.Button,{icon:React.createElement(c.RemoveIcon,{size:20}),onClick:A}),React.createElement(s.Text,{type:"subheader"},j)),React.createElement("div",{className:v},S),React.createElement("div",{id:C},l&&React.createElement(i.CoverSheetActions,{coverSheetActionId:C},l))),React.createElement("div",{className:_},b))};
+"use strict";var e=require("../../_rollupPluginBabelHelpers-697f213c.js"),o=require("../../tslib.es6-8c21e256.js"),t=require("react"),r=require("clsx"),i=require("../button/Button.js"),n=require("./CoverSheetActions.js"),a=require("../dialog/BaseDialog.js"),s=require("../text/Text.js"),d=require("../../icons/RemoveIcon.js"),l=require("../../style-inject.es-d4ddeae4.js"),c=require("react/jsx-runtime");function u(e){return e&&e.__esModule?e:{default:e}}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("react-dom"),require("../stack/HStack.js"),require("../stack/Stack.js"),require("../../icons/icon-base/_IconBase.js");var m=u(r),h="Amino_CoverSheet-module__coverSheet--nZP66",p="Amino_CoverSheet-module__headerContainer--SCAgD",v="Amino_CoverSheet-module__header--praFM",_="Amino_CoverSheet-module__headerComponent--fgFRV",b="Amino_CoverSheet-module__content--Zht4F";l.styleInject(".Amino_CoverSheet-module__coverSheet--nZP66{background:var(--amino-page-background);border:var(--amino-border-subtle);border-radius:0;box-sizing:border-box;color:var(--amino-text-color);height:100vh;left:0;max-height:100vh;outline:none;overscroll-behavior:contain;position:fixed;top:0;width:100vw}@media print{.Amino_CoverSheet-module__coverSheet--nZP66{height:unset;min-height:100vh;position:absolute}}.Amino_CoverSheet-module__headerContainer--SCAgD{align-items:center;background-color:var(--amino-page-background);border-bottom:var(--amino-border-subtle);display:flex;height:64px;justify-content:space-between;padding:var(--amino-space-16) var(--amino-space-32);position:-webkit-sticky;position:sticky;top:0;z-index:99}@media print{.Amino_CoverSheet-module__headerContainer--SCAgD{display:none}}.Amino_CoverSheet-module__header--praFM{align-items:center;display:flex;gap:var(--amino-space-16)}.Amino_CoverSheet-module__headerComponent--fgFRV{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.Amino_CoverSheet-module__content--Zht4F{flex-grow:1;overflow:auto;padding:var(--amino-space-56)}");exports.CoverSheet=function(r){var l=r.actions,u=r.actionWrapperId,j=void 0===u?"__cover-sheet-actions":u,C=r.children,g=r.className,S=r.headerComponent,x=r.hideCloseButton,q=void 0!==x&&x,f=r.label,A=r.onClose,y=r.open,k=o.__rest(r,["actions","actionWrapperId","children","className","headerComponent","hideCloseButton","label","onClose","open"]);return t.useEffect((function(){"undefined"!=typeof document&&document.querySelectorAll("[id='".concat(j,"']")).length>1&&console.error('Duplicate id "'.concat(j,'" detected in "CoverSheet" component. Please set "actionWrapperId" to a unique id.'))}),[j]),t.useEffect((function(){(null===document||void 0===document?void 0:document.body)&&(document.body.style.overflow=y?"hidden":"auto")}),[y]),c.jsxs(a.BaseDialog,e._objectSpread2(e._objectSpread2({className:m.default(h,g),onClose:A,open:y,popupMotionProps:{animate:{translateY:0},exit:{translateY:"100vh"},initial:{translateY:"100vh"},transition:{duration:.35,ease:[0,0,0,1]}}},k),{},{children:[c.jsxs("header",{className:p,children:[c.jsxs("div",{className:v,children:[!q&&c.jsx(i.Button,{icon:c.jsx(d.RemoveIcon,{size:20}),onClick:A}),c.jsx(s.Text,{type:"subheader",children:f})]}),c.jsx("div",{className:_,children:S}),c.jsx("div",{id:j,children:l&&c.jsx(n.CoverSheetActions,{coverSheetActionId:j,children:l})})]}),c.jsx("div",{className:b,children:C})]}))};

package/components/cover-sheet/CoverSheetActions.d.ts

@@ -0,0 +1,115 @@
+import { type ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type CoverSheetProps = BaseProps & {
+    /**
+     * Action elements to be rendered in the CoverSheet header
+     */
+    children: ReactNode;
+    /**
+     * ID of the element in the CoverSheet where these actions should be rendered
+     * Must match the actionWrapperId prop of the parent CoverSheet
+     * @default '__cover-sheet-actions'
+     */
+    coverSheetActionId: string;
+};
+/**
+ * CoverSheetActions component allows for dynamic placement of action buttons
+ * in a CoverSheet header. It uses React Portals to render content in a specific
+ * location within the CoverSheet.
+ *
+ * This component should be used as a child of a CoverSheet component, and the
+ * coverSheetActionId prop must match the actionWrapperId of the parent CoverSheet.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <CoverSheet
+ *   label="Document Actions"
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   actionWrapperId="document-sheet"
+ * >
+ *   <div>Cover sheet content here</div>
+ *
+ *   <CoverSheetActions coverSheetActionId="document-sheet">
+ *     <Button onClick={handleCancel}>Cancel</Button>
+ *     <Button variant="primary" onClick={handleSave}>Save</Button>
+ *   </CoverSheetActions>
+ * </CoverSheet>
+ * ```
+ *
+ * @example Conditional actions
+ * ```tsx
+ * <CoverSheet
+ *   label="Edit Item"
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   actionWrapperId="edit-item-actions"
+ * >
+ *   <form>
+ *    <TextField label="Item Name" value={itemName} onChange={setItemName} />
+ *   </form>
+ *
+ *   {isFormValid && (
+ *     <CoverSheetActions coverSheetActionId="edit-item-actions">
+ *       <Button variant="primary" onClick={handleSubmit}>Submit</Button>
+ *     </CoverSheetActions>
+ *   )}
+ * </CoverSheet>
+ * ```
+ *
+ * @example Dynamic actions based on state
+ * ```tsx
+ * const [selectedItems, setSelectedItems] = useState([]);
+ *
+ * <CoverSheet
+ *   label="Manage Items"
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   actionWrapperId="manage-items-actions"
+ * >
+ * <ItemSelectionUI />
+ *
+ *   <CoverSheetActions coverSheetActionId="manage-items-actions">
+ *     {selectedItems.length === 0 ? (
+ *       <Button disabled>Delete</Button>
+ *     ) : (
+ *       <Button onClick={() => handleDelete(selectedItems)}>
+ *         Delete ({selectedItems.length})
+ *       </Button>
+ *     )}
+ *   </CoverSheetActions>
+ * </CoverSheet>
+ * ```
+ *
+ * @example With multiple CoverSheets
+ * ```tsx
+ * <CoverSheet
+ *   label="Primary Sheet"
+ *   open={primaryOpen}
+ *   onClose={() => setPrimaryOpen(false)}
+ *   actionWrapperId="primary-sheet-actions"
+ * >
+ *   <Button onClick={() => setSecondaryOpen(true)}>
+ *     Open Secondary Sheet
+ *   </Button>
+ *
+ *   <CoverSheetActions coverSheetActionId="primary-sheet-actions">
+ *     <Button onClick={primaryAction}>Primary Action</Button>
+ *   </CoverSheetActions>
+ *
+ *   <CoverSheet
+ *     label="Secondary Sheet"
+ *     open={secondaryOpen}
+ *     onClose={() => setSecondaryOpen(false)}
+ *     actionWrapperId="secondary-sheet-actions"
+ *   >
+ *     <div>Secondary content</div>
+ *
+ *     <CoverSheetActions coverSheetActionId="secondary-sheet-actions">
+ *       <Button onClick={secondaryAction}>Secondary Action</Button>
+ *     </CoverSheetActions>
+ *   </CoverSheet>
+ * </CoverSheet>
+ * ```
+ */
+export declare const CoverSheetActions: ({ children, className, coverSheetActionId, style, }: CoverSheetProps) => import("react").ReactPortal | null;

package/components/cover-sheet/CoverSheetActions.js

@@ -1 +1 @@
-"use strict";var e=require("../../tslib.es6-8c21e256.js"),t=require("react"),r=require("react-dom"),c=require("clsx"),n=require("../stack/HStack.js"),o=require("../../style-inject.es-d4ddeae4.js");function i(e){return e&&e.__esModule?e:{default:e}}require("../../_rollupPluginBabelHelpers-77a6284f.js"),require("../stack/Stack.js");var s=i(c),a="Amino_CoverSheetActions-module__actions--1Dmdj";o.styleInject(".Amino_CoverSheetActions-module__actions--1Dmdj{z-index:990}");exports.CoverSheetActions=function(c){var o=c.children,i=c.className,u=c.coverSheetActionId,l=c.style,d=e.__read(t.useState(!1),2),m=d[0],f=d[1];if(t.useEffect((function(){m||f(!0)}),[m]),"undefined"!=typeof document&&m){var v=document.querySelector("#".concat(u));if(v)return r.createPortal(React.createElement("div",{className:s.default(i,a),style:l},React.createElement(n.HStack,{spacing:8},o)),v);throw Error('CoverSheetActions: Could not find Coversheet wrapper with id "'.concat(u,'"'))}return null};
+"use strict";var e=require("../../tslib.es6-8c21e256.js"),r=require("react"),t=require("react-dom"),c=require("clsx"),i=require("../stack/HStack.js"),s=require("../../style-inject.es-d4ddeae4.js"),n=require("react/jsx-runtime");function o(e){return e&&e.__esModule?e:{default:e}}require("../../_rollupPluginBabelHelpers-697f213c.js"),require("../stack/Stack.js");var u=o(c),a="Amino_CoverSheetActions-module__actions--1Dmdj";s.styleInject(".Amino_CoverSheetActions-module__actions--1Dmdj{z-index:990}");exports.CoverSheetActions=function(c){var s=c.children,o=c.className,l=c.coverSheetActionId,d=c.style,f=e.__read(r.useState(!1),2),j=f[0],m=f[1];if(r.useEffect((function(){j||m(!0)}),[j]),"undefined"!=typeof document&&j){var h=document.querySelector("#".concat(l));if(h)return t.createPortal(n.jsx("div",{className:u.default(o,a),style:d,children:n.jsx(i.HStack,{spacing:8,children:s})}),h);throw Error('CoverSheetActions: Could not find Coversheet wrapper with id "'.concat(l,'"'))}return null};

package/components/currency/Currency.d.ts

@@ -0,0 +1,40 @@
+import type { BaseProps } from "../../types/BaseProps";
+type Props = BaseProps & {
+    amount: number;
+    code: string;
+};
+/**
+ * Currency component displays monetary values with properly formatted numbers and currency codes.
+ * It automatically handles formatting based on the currency code and applies special styling for negative values.
+ *
+ * @example Basic usage
+ * <Currency amount={1250} code="usd" />
+ *
+ * @example Different currencies
+ * <Currency amount={1250} code="usd" /> // Displays as $12.50 USD
+ * <Currency amount={1250} code="eur" /> // Displays as €12.50 EUR
+ * <Currency amount={1250} code="gbp" /> // Displays as £12.50 GBP
+ * <Currency amount={1250} code="jpy" /> // Displays as ¥1,250 JPY
+ *
+ * @example Negative amount (shows in red)
+ * <Currency amount={-1250} code="usd" /> // Displays as -$12.50 USD in red
+ *
+ * @example Custom styling
+ * <Currency
+ *   amount={1250}
+ *   code="usd"
+ *   className="large-currency"
+ *   style={{ fontSize: '20px' }}
+ * />
+ *
+ * @example Zero amount
+ * <Currency amount={0} code="usd" /> // Displays as $0.00 USD
+ *
+ * @example With fractional units
+ * <Currency amount={125.45} code="usd" /> // Displays as $125.45 USD
+ *
+ * @example Large amounts
+ * <Currency amount={1250000} code="usd" /> // Displays as $12,500.00 USD
+ */
+export declare const Currency: ({ amount, className, code, style }: Props) => import("react").JSX.Element;
+export {};

package/components/currency/Currency.js

@@ -1 +1 @@
-"use strict";var e=require("clsx"),r=require("../text/Text.js"),t=require("../../utils/formatCurrency.js"),s=require("../../style-inject.es-d4ddeae4.js");function a(e){return e&&e.__esModule?e:{default:e}}require("../../tslib.es6-8c21e256.js"),require("../../styles/constants/theme.js");var n=a(e),c="Amino_Currency-module__styledCurrency--vgT8x";s.styleInject('.Amino_Currency-module__styledCurrency--vgT8x{font-feature-settings:"tnum" 1;display:flex;gap:var(--amino-space-4);white-space:nowrap}');exports.Currency=function(e){var s=e.amount,a=e.className,u=e.code,l=e.style,o=t.formatCurrency({code:u,value:s}),i=s<0;return React.createElement("span",{className:n.default(c,a),style:l},React.createElement(r.Text,{color:i?"red600":"gray1000",type:"label"},o),React.createElement(r.Text,{color:i?"red600":"gray700"},u.toUpperCase()))};
+"use strict";var e=require("clsx"),r=require("../text/Text.js"),s=require("../../utils/formatCurrency.js"),t=require("../../style-inject.es-d4ddeae4.js"),u=require("react/jsx-runtime");function l(e){return e&&e.__esModule?e:{default:e}}require("../../_rollupPluginBabelHelpers-697f213c.js"),require("../../tslib.es6-8c21e256.js"),require("../../styles/constants/theme.js");var n=l(e),a="Amino_Currency-module__styledCurrency--vgT8x";t.styleInject('.Amino_Currency-module__styledCurrency--vgT8x{font-feature-settings:"tnum" 1;display:flex;gap:var(--amino-space-4);white-space:nowrap}');exports.Currency=function(e){var t=e.amount,l=e.className,c=e.code,i=e.style,o=s.formatCurrency({code:c,value:t}),y=t<0;return u.jsxs("span",{className:n.default(a,l),style:i,children:[u.jsx(r.Text,{color:y?"red600":"gray1000",type:"label",children:o}),u.jsx(r.Text,{color:y?"red600":"gray700",children:c.toUpperCase()})]})};

package/components/currency/DualCurrency.d.ts

@@ -0,0 +1,33 @@
+import type { BaseProps } from "../../types/BaseProps";
+type Props = BaseProps & {
+    conversionRate?: number;
+    /**
+     * @default 'USD'
+     */
+    foreignCode?: string;
+    /**
+     * @default false
+     */
+    hideForeign?: boolean;
+    /**
+     * @default false
+     */
+    hideLocal?: boolean;
+    isTabular?: boolean;
+    /**
+     * @default 'USD'
+     */
+    localCode?: string;
+    value: number;
+    /**
+     * For when the value is already in the foreign currency, and the conversion needs to be reversed.
+     * The rate can stay the same.
+     * @default false
+     */
+    valueIsForeign?: boolean;
+};
+/**
+ * Can go both ways.
+ */
+export declare const DualCurrency: ({ className, conversionRate, foreignCode, hideForeign, hideLocal, isTabular, localCode, style, value, valueIsForeign, }: Props) => import("react").JSX.Element | null;
+export {};