@zonos/amino 3.4.51

package/components/confirm-dialog/ConfirmDialog.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { IAminoTheme } from "../../types/IAminoTheme";
+import { Intent } from "../../types/Intent";
+export declare type ConfirmDialogProps = {
+    open: boolean;
+    label: string;
+    theme?: IAminoTheme;
+    subtitle?: ReactNode;
+    intent: Intent;
+    confirmText?: string;
+    dismissText?: string;
+    confirmAction: () => void;
+    dismissAction: () => void;
+};
+export declare const ConfirmDialog: ({ theme: _theme, open, label, intent, subtitle, confirmText, dismissText, confirmAction, dismissAction, }: ConfirmDialogProps) => JSX.Element;

package/components/confirm-dialog/ConfirmDialog.js

@@ -0,0 +1 @@
+"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("../button/Button.js"),i=require("../dialog/_BaseDialog.js"),r=require("../rounded-icon/RoundedIcon.js"),s=require("../stack/VStack.js"),a=require("../text/Text.js"),c=require("../../icons/ExclamationMarkIcon.js"),o=require("../../icons/HelpIcon.js"),u=require("../../icons/WarningIcon.js"),l=require("../../styles/constants/theme.js"),d=require("styled-components");function j(e){return e&&e.__esModule?e:{default:e}}require("react"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("react-dom"),require("../backdrop/Backdrop.js"),require("../stack/Stack.js"),require("../../icons/icon-base/_IconBase.js");var m,p,x,g=j(d),f=g.default.div(m||(m=e.__makeTemplateObject(["\n  padding: ",";\n\n  & > div {\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n"],["\n  padding: ",";\n\n  & > div {\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n"])),l.theme.space24),_=g.default.div(p||(p=e.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  margin-top: ",";\n\n  & > button + button {\n    margin-left: ",";\n  }\n\n  button {\n    flex: 1;\n  }\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  margin-top: ",";\n\n  & > button + button {\n    margin-left: ",";\n  }\n\n  button {\n    flex: 1;\n  }\n"])),l.theme.space24,l.theme.space8),q=g.default.span(x||(x=e.__makeTemplateObject(["\n  opacity: 0.5;\n"],["\n  opacity: 0.5;\n"]))),h=function(e){switch(e){case"danger":return n.jsx(c.ExclamationMarkIcon,{});case"warning":return n.jsx(u.WarningIcon,{});default:return n.jsx(o.HelpIcon,{})}};exports.ConfirmDialog=function(c){var o=c.theme,u=c.open,l=c.label,d=c.intent,j=c.subtitle,m=c.confirmText,p=c.dismissText,x=c.confirmAction,g=c.dismissAction;return n.jsx(i.BaseDialog,e.__assign({width:350,"data-theme":o,open:u},{children:n.jsx(f,{children:n.jsxs(s.VStack,e.__assign({spacing:16},{children:[n.jsx(r.RoundedIcon,e.__assign({intent:d},{children:h(d)})),n.jsxs("div",{children:[n.jsx(a.Text,e.__assign({type:"title"},{children:l})),j&&n.jsx(q,{children:j})]}),n.jsxs(_,{children:[n.jsx(t.Button,e.__assign({size:"md",onClick:g,intent:"outline"},{children:p})),n.jsx(t.Button,e.__assign({size:"md",onClick:x,intent:d},{children:m}))]})]}))})}))};

package/components/confirm-dialog/useConfirm.d.ts

@@ -0,0 +1 @@
+export declare const useConfirm: () => (opts: import("../../types").ConfirmDialogOpts) => void;

package/components/confirm-dialog/useConfirm.js

@@ -0,0 +1 @@
+"use strict";var e=require("react"),r=require("./ConfirmContext.js");require("../../_tslib-fe391a2e.js"),require("react/jsx-runtime"),require("./ConfirmDialog.js"),require("../button/Button.js"),require("../spinner/Spinner.js"),require("../../styles/constants/theme.js"),require("styled-components"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../dialog/_BaseDialog.js"),require("react-dom"),require("../backdrop/Backdrop.js"),require("../rounded-icon/RoundedIcon.js"),require("../stack/VStack.js"),require("../stack/Stack.js"),require("../text/Text.js"),require("../../icons/ExclamationMarkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../icons/HelpIcon.js"),require("../../icons/WarningIcon.js");exports.useConfirm=function(){return e.useContext(r.ConfirmContext)};

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ICountryOption } from "../../types/ICountry";
+import { IGeoJsonWorld } from "../../types/IGeoJsonWorld";
+declare type Props = {
+    countries: ICountryOption[];
+    height?: number;
+    to: string;
+    from: string;
+    worldData: IGeoJsonWorld | null;
+};
+export declare const ConnectionMap: ({ countries, to, from, height, worldData, }: Props) => JSX.Element;
+export {};

package/components/connection-map/ConnectionMap.js

@@ -0,0 +1 @@
+"use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),n=require("react"),t=require("react-simple-maps"),i=require("d3-geo"),s=require("../../styles/constants/theme.js"),a=require("../../utils/getCountryCodeByName.js"),o=require("styled-components"),l=require("topojson-client"),u=require("../skeleton/Skeleton.js");function d(e){return e&&e.__esModule?e:{default:e}}var c,h,g=d(o),m=g.default.div(c||(c=e.__makeTemplateObject(["\n  background: ",";\n  border-radius: ",";\n  overflow: hidden;\n\n  * {\n    outline: none;\n  }\n"],["\n  background: ",";\n  border-radius: ",";\n  overflow: hidden;\n\n  * {\n    outline: none;\n  }\n"])),s.theme.gray50,s.theme.radius12),f=g.default(u.Skeleton)(h||(h=e.__makeTemplateObject(["\n  box-sizing: border-box;\n  border-radius: ",";\n  width: 100%;\n  /* 50% padding is 100% of width, ratio is 33%, so half */\n  padding: 16.5%;\n  margin: 0;\n"],["\n  box-sizing: border-box;\n  border-radius: ",";\n  width: 100%;\n  /* 50% padding is 100% of width, ratio is 33%, so half */\n  padding: 16.5%;\n  margin: 0;\n"])),s.theme.radius12);exports.ConnectionMap=function(o){var u=o.countries,d=o.to,c=o.from,h=o.height,g=void 0===h?400:h,_=o.worldData,b=e.__read(n.useState([0,0]),2),j=b[0],p=b[1],x=e.__read(n.useState(1),2),v=x[0],k=x[1],y=e.__read(n.useState([0,0,0]),2),M=y[0],q=y[1],C=n.useMemo((function(){return _?l.feature(_,_.objects.countries).features:null}),[_]),w=n.useCallback((function(e){var r=null==C?void 0:C.find((function(r){var n;return a.getCountryCodeByName(null===(n=r.properties)||void 0===n?void 0:n.name,u)===e}));return r?i.geoCentroid(r):[0,0]}),[u,C]),S=!(C&&u.length&&c&&d);return n.useEffect((function(){if(!S){var r=e.__read(w(c),2),n=r[0],t=r[1],s=e.__read(w(d),2),a=s[0],o=s[1],l=i.geoDistance([n,t],[a,o]),u=i.geoDistance([n,0],[a,0]),h=i.geoDistance([0,t],[0,o]),g=function(e,r){return-19.46498024*e+-92.29376925*r+284.7+(e+r>4?80*(e+r-4):0)}(u,h);k(g);var m=e.__read([(n+a)/2,(t+o)/2],2),f=m[0],_=m[1];p([0,_]);var b=-f;Math.abs(n-a)>180&&(b+=180);var j=Math.abs(_)>55?l*-(Math.abs(_)-50):0,x=h>1&&u>h&&Math.max(t,o)>50?u/h*-5:0;q([b,j+x,0])}}),[w,d,c,S]),S?r.jsx(f,{height:g}):r.jsx(m,{children:r.jsxs(t.ComposableMap,e.__assign({projection:"geoEqualEarth",projectionConfig:{scale:v,center:j,rotate:M},height:g},{children:[r.jsx(t.Geographies,e.__assign({geography:C},{children:function(e){return e.geographies.map((function(e){var n=[d,c].includes(a.getCountryCodeByName(e.properties.name,u));return r.jsx(t.Geography,{geography:e,fill:n?s.theme.blue100:s.theme.gray400,stroke:n?s.theme.blue300:s.theme.gray500,strokeWidth:1},e.rsmKey)}))}})),r.jsxs(t.Marker,e.__assign({coordinates:w(c)},{children:[r.jsx("circle",{r:10,fill:s.theme.blue300}),r.jsx("circle",{r:7,fill:s.theme.blue400})]})),r.jsxs(t.Marker,e.__assign({coordinates:w(d)},{children:[r.jsx("circle",{r:10,fill:s.theme.blue300}),r.jsx("circle",{r:7,fill:s.theme.blue400})]})),r.jsx(t.Line,{from:w(c),to:w(d),stroke:s.theme.blue600,strokeWidth:4}),r.jsxs(t.Marker,e.__assign({coordinates:w(c)},{children:[r.jsx("circle",{r:4,fill:"white"}),r.jsx("circle",{r:2,fill:s.theme.blue600})]})),r.jsxs(t.Marker,e.__assign({coordinates:w(d)},{children:[r.jsx("circle",{r:4,fill:"white"}),r.jsx("circle",{r:2,fill:s.theme.blue600})]}))]}))})};

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export declare type CoverSheetProps = {
+    children: ReactNode;
+    className?: string;
+    open: boolean;
+    label: string;
+    onClose: () => void;
+    /** used for setting id of the wrapper of where the action will be located */
+    actionWrapperId?: string;
+    actions?: ReactNode;
+};
+export declare const CoverSheet: ({ className, open, label, onClose, children, actionWrapperId, actions, }: CoverSheetProps) => import("react").ReactPortal | null;

package/components/cover-sheet/CoverSheet.js

@@ -0,0 +1 @@
+"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("react"),i=require("react-dom"),r=require("framer-motion"),o=require("../text/Text.js"),a=require("../../icons/RemoveIcon.js"),s=require("../../styles/constants/theme.js"),c=require("styled-components"),d=require("../button/Button.js"),u=require("./CoverSheetActions.js");function l(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../stack/HStack.js"),require("../stack/Stack.js");var p,h,m,g,b,x=l(c),f=x.default(r.motion.div)(p||(p=e.__makeTemplateObject(["\n  z-index: 990;\n  outline: none;\n  overflow-y: auto;\n  box-sizing: border-box;\n  overscroll-behavior: contain;\n  background: ",";\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100vh;\n\n  @media print {\n    height: unset;\n    min-height: 100vh;\n    position: absolute;\n  }\n"],["\n  z-index: 990;\n  outline: none;\n  overflow-y: auto;\n  box-sizing: border-box;\n  overscroll-behavior: contain;\n  background: ",";\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100vh;\n\n  @media print {\n    height: unset;\n    min-height: 100vh;\n    position: absolute;\n  }\n"])),s.theme.pageBackground),j=x.default(d.Button)(h||(h=e.__makeTemplateObject(["\n  margin-right: ",";\n"],["\n  margin-right: ",";\n"])),s.theme.space24),v=x.default(o.Text)(m||(m=e.__makeTemplateObject(["\n  flex-grow: 1;\n"],["\n  flex-grow: 1;\n"]))),_=x.default.header(g||(g=e.__makeTemplateObject(["\n  background: ",";\n  border-bottom: ",";\n\n  padding: "," ",";\n  display: flex;\n  align-items: center;\n  height: 64px;\n  position: sticky;\n  top: 0;\n  z-index: 99;\n\n  @media print {\n    display: none;\n  }\n"],["\n  background: ",";\n  border-bottom: ",";\n\n  padding: "," ",";\n  display: flex;\n  align-items: center;\n  height: 64px;\n  position: sticky;\n  top: 0;\n  z-index: 99;\n\n  @media print {\n    display: none;\n  }\n"])),s.theme.surfaceColor,s.theme.border,s.theme.space16,s.theme.space24),q=x.default.div(b||(b=e.__makeTemplateObject(["\n  padding: ",";\n"],["\n  padding: ",";\n"])),s.theme.space24);exports.CoverSheet=function(o){var s=o.className,c=o.open,d=o.label,l=o.onClose,p=o.children,h=o.actionWrapperId,m=void 0===h?"__cover-sheet-actions":h,g=o.actions;if(t.useEffect((function(){"undefined"!=typeof document&&document.querySelectorAll("[id='".concat(m,"']")).length>1&&console.error('Duplicate id "'.concat(m,'" detected in "CoverSheet" component. Please set "actionWrapperId" to an unique id.'))}),[m]),"undefined"!=typeof document){var b=document.querySelector("body");if(b)return i.createPortal(n.jsx(r.AnimatePresence,{children:c&&n.jsxs(f,e.__assign({className:s,transition:{ease:[.4,0,.2,1],duration:.35},initial:{opacity:0,translateY:10},animate:{opacity:1,translateY:0},exit:{opacity:0,translateY:5}},{children:[n.jsxs(_,{children:[n.jsx(j,{icon:n.jsx(a.RemoveIcon,{size:20}),onClick:l}),n.jsx(v,e.__assign({type:"header"},{children:d})),n.jsx("div",e.__assign({id:m},{children:g&&n.jsx(u.CoverSheetActions,e.__assign({coverSheetActionId:m},{children:g}))}))]}),n.jsx(q,{children:p})]}))}),b)}return null};

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export declare type CoverSheetProps = {
+    children: ReactNode;
+    className?: string;
+    /**
+     * Determine where to put this actions in the coversheet
+     * @default id for coversheet component is `__cover-sheet-actions`
+     * */
+    coverSheetActionId: string;
+};
+export declare const CoverSheetActions: ({ children, className, coverSheetActionId, }: CoverSheetProps) => import("react").ReactPortal | null;

package/components/cover-sheet/CoverSheetActions.js

@@ -0,0 +1 @@
+"use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),t=require("react"),n=require("react-dom"),c=require("../stack/HStack.js"),s=require("styled-components");function i(e){return e&&e.__esModule?e:{default:e}}require("../../styles/constants/theme.js"),require("../stack/Stack.js");var a,o=i(s).default.div(a||(a=e.__makeTemplateObject(["\n  z-index: 990;\n"],["\n  z-index: 990;\n"])));exports.CoverSheetActions=function(s){var i=s.children,a=s.className,u=s.coverSheetActionId,d=e.__read(t.useState(!1),2),l=d[0],f=d[1];if(t.useEffect((function(){l||f(!0)}),[l]),"undefined"!=typeof document&&l){var h=document.querySelector("#".concat(u));if(h)return n.createPortal(r.jsx(o,e.__assign({className:a},{children:r.jsx(c.HStack,{children:i})})),h);throw Error('CoverSheetActions: Could not find Coversheet wrapper with id "'.concat(u,'"'))}return null};

package/components/currency/Currency.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type Props = {
+    amount: number;
+    className?: string;
+    code: string;
+};
+export declare const Currency: ({ amount, className, code }: Props) => JSX.Element;
+export {};

package/components/currency/Currency.js

@@ -0,0 +1 @@
+"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("../../styles/constants/theme.js"),r=require("styled-components"),s=require("../text/Text.js");function a(e){return e&&e.__esModule?e:{default:e}}var i,l=a(r).default.span(i||(i=e.__makeTemplateObject(["\n  font-feature-settings: 'tnum' 1;\n  /** Make it not break line */\n  white-space: nowrap;\n  display: flex;\n  gap: ",";\n"],["\n  font-feature-settings: 'tnum' 1;\n  /** Make it not break line */\n  white-space: nowrap;\n  display: flex;\n  gap: ",";\n"])),t.theme.space4);exports.Currency=function(t){var r=t.amount,a=t.className,i=t.code,c=new Intl.NumberFormat("en-US",{style:"currency",currency:i}).format(r).replace(/[^0-9.-]+/g,""),u=r<0;return n.jsxs(l,e.__assign({className:a},{children:[n.jsx(s.Text,e.__assign({type:"label",color:u?"red600":"gray1300"},{children:c})),n.jsx(s.Text,e.__assign({color:u?"red400":"gray700"},{children:i.toUpperCase()}))]}))};

package/components/currency/DualCurrency.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+declare type StyledProps = {
+    width?: string;
+    isTabular: boolean;
+};
+declare type Props = {
+    className?: string;
+    conversionRate?: number;
+    foreignCode: string;
+    isTabular?: boolean;
+    localeCode?: string;
+    showForeign?: boolean;
+    showLocale?: boolean;
+    value: number;
+} & Partial<StyledProps>;
+export declare const DualCurrency: ({ className, conversionRate, foreignCode, isTabular, localeCode, showForeign, showLocale, value, width, }: Props) => JSX.Element | null;
+export {};

package/components/currency/DualCurrency.js

@@ -0,0 +1 @@
+"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),r=require("../../icons/ArrowSwapIcon.js"),i=require("../../styles/constants/theme.js"),t=require("styled-components"),s=require("./Currency.js");function a(e){return e&&e.__esModule?e:{default:e}}require("react"),require("../../icons/icon-base/_IconBase.js"),require("../text/Text.js");var u,c,l,o,d=a(t),m=t.css(u||(u=e.__makeTemplateObject(["\n  font-variant-numeric: tabular-nums;\n  display: grid;\n  grid-template-columns: 1.25fr 0fr 1.25fr;\n"],["\n  font-variant-numeric: tabular-nums;\n  display: grid;\n  grid-template-columns: 1.25fr 0fr 1.25fr;\n"]))),f=t.css(c||(c=e.__makeTemplateObject(["\n  display: flex;\n"],["\n  display: flex;\n"]))),p=d.default.div(o||(o=e.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-items: right;\n  ","\n  grid-column-gap: ",";\n  ",";\n"],["\n  display: flex;\n  align-items: center;\n  justify-items: right;\n  ","\n  grid-column-gap: ",";\n  ",";\n"])),(function(e){return e.isTabular?m:f}),i.theme.space8,(function(n){return n.width&&t.css(l||(l=e.__makeTemplateObject(["\n      width: p.width;\n    "],["\n      width: p.width;\n    "])))}));exports.DualCurrency=function(i){var t=i.className,a=i.conversionRate,u=i.foreignCode,c=void 0===u?"USD":u,l=i.isTabular,o=void 0===l||l,d=i.localeCode,m=void 0===d?"USD":d,f=i.showForeign,j=void 0===f||f,g=i.showLocale,h=void 0===g||g,v=i.value,y=i.width,_=function(e){return n.jsx(s.Currency,{amount:v,className:e,code:m})},w=a?v*a:v,x=function(e){return n.jsx(s.Currency,{amount:w,className:e,code:c})},b=m&&h,q=c&&j&&a,T=m===c;return q&&b&&!T?n.jsxs(p,e.__assign({className:t,width:null==y?void 0:y.toString(),isTabular:o},{children:[_(),n.jsx(r.ArrowSwapIcon,{size:12}),x()]})):T||b?_(t):q?x(t):null};

package/components/danger-zone/DangerZone.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DangerZone: import("styled-components").StyledComponent<({ actions, children, className, footerActions, footerContent, footerHeight, label, spacing, }: import("../card/Card").CardProps) => JSX.Element, any, {}, never>;

package/components/danger-zone/DangerZone.js

@@ -0,0 +1 @@
+"use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("../card/Card.js"),n=require("../../styles/constants/theme.js"),t=require("styled-components");function o(e){return e&&e.__esModule?e:{default:e}}require("react/jsx-runtime"),require("../stack/HStack.js"),require("../stack/Stack.js"),require("../text/Text.js");var a,s=o(t).default(r.Card)(a||(a=e.__makeTemplateObject(["\n  border-color: ",";\n  box-shadow: 0px 1px 5px rgba(255, 0, 0, 0.19);\n\n  header {\n    border-color: ",";\n  }\n\n  h4 {\n    color: ",";\n  }\n"],["\n  border-color: ",";\n  box-shadow: 0px 1px 5px rgba(255, 0, 0, 0.19);\n\n  header {\n    border-color: ",";\n  }\n\n  h4 {\n    color: ",";\n  }\n"])),n.theme.red200,n.theme.red200,n.theme.red600);exports.DangerZone=s;

package/components/dark-mode-wrapper/DarkModeWrapper.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare type DarkModeWrapperProps = {
+    children: ReactNode;
+};
+export declare const DarkModeWrapper: ({ children }: DarkModeWrapperProps) => JSX.Element;

package/components/dark-mode-wrapper/DarkModeWrapper.js

@@ -0,0 +1 @@
+"use strict";var r=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime");exports.DarkModeWrapper=function(i){var t=i.children;return e.jsx("div",r.__assign({"data-theme":"dark"},{children:t}))};

package/components/dialog/Dialog.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { IAminoTheme } from "../../types/IAminoTheme";
+export declare type DialogProps = {
+    actions?: ReactNode;
+    className?: string;
+    children: ReactNode;
+    label?: ReactNode;
+    subtitle?: string;
+    leftActions?: ReactNode;
+    onClose: () => void;
+    open: boolean;
+    theme?: IAminoTheme;
+    width?: number;
+    /** Close when clicking outside dialog (on the backdrop)
+     * @default true
+     */
+    closeOnBlur?: boolean;
+    /** Close on pressing 'escape' key
+     * @default true
+     */
+    closeOnEsc?: boolean;
+    noBorder?: boolean;
+};
+export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/dialog/Dialog.js

@@ -0,0 +1 @@
+"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("react"),a=require("../text/Text.js"),r=require("../../icons/RemoveCircleDuotoneIcon.js"),i=require("../../styles/constants/theme.js"),o=require("styled-components"),s=require("../button/Button.js"),l=require("./_BaseDialog.js");function c(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("react-dom"),require("../backdrop/Backdrop.js");var d=c(o),h=d.default.div(k||(k=e.__makeTemplateObject(["\n  padding: ",";\n  padding-bottom: ",";\n  border-top-left-radius: ",";\n  border-top-right-radius: ",";\n  display: flex;\n  flex-direction: column;\n  gap: ",";\n"],["\n  padding: ",";\n  padding-bottom: ",";\n  border-top-left-radius: ",";\n  border-top-right-radius: ",";\n  display: flex;\n  flex-direction: column;\n  gap: ",";\n"])),i.theme.space24,i.theme.space16,i.theme.radius12,i.theme.radius12,i.theme.space12),m=d.default.div(v||(v=e.__makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n\n  > :not(button) {\n    margin: 0;\n    flex-grow: 1;\n    font-weight: 700;\n  }\n"],["\n  width: 100%;\n  display: flex;\n  align-items: center;\n\n  > :not(button) {\n    margin: 0;\n    flex-grow: 1;\n    font-weight: 700;\n  }\n"]))),p=d.default(s.Button)(w||(w=e.__makeTemplateObject(["\n  padding: 0;\n  path[data-is-secondary-color] {\n    fill: ",";\n  }\n\n  && {\n    &,\n    &:focus,\n    &:hover,\n    &:active {\n      color: ",";\n      background: transparent;\n    }\n    &:hover {\n      path[data-is-secondary-color] {\n        fill: ",";\n      }\n    }\n    &:active,\n    &:focus {\n      path[data-is-secondary-color] {\n        fill: ",";\n      }\n    }\n  }\n"],["\n  padding: 0;\n  path[data-is-secondary-color] {\n    fill: ",";\n  }\n\n  && {\n    &,\n    &:focus,\n    &:hover,\n    &:active {\n      color: ",";\n      background: transparent;\n    }\n    &:hover {\n      path[data-is-secondary-color] {\n        fill: ",";\n      }\n    }\n    &:active,\n    &:focus {\n      path[data-is-secondary-color] {\n        fill: ",";\n      }\n    }\n  }\n"])),i.theme.gray200,i.theme.gray800,i.theme.gray300,i.theme.gray400),g=d.default.div(x||(x=e.__makeTemplateObject(["\n  flex-grow: 1;\n  display: flex;\n"],["\n  flex-grow: 1;\n  display: flex;\n"]))),u=d.default(g)(y||(y=e.__makeTemplateObject(["\n  justify-content: flex-start;\n  display: flex;\n  gap: ",";\n"],["\n  justify-content: flex-start;\n  display: flex;\n  gap: ",";\n"])),i.theme.space8),f=d.default(g)(j||(j=e.__makeTemplateObject(["\n  justify-content: flex-end;\n  display: flex;\n  gap: ",";\n"],["\n  justify-content: flex-end;\n  display: flex;\n  gap: ",";\n"])),i.theme.space8),b=d.default.div(_||(_=e.__makeTemplateObject(["\n  padding: ",";\n  display: flex;\n  align-items: center;\n  border-bottom-left-radius: ",";\n  border-bottom-right-radius: ",";\n\n  & > div + div {\n    margin-left: ",";\n  }\n"],["\n  padding: ",";\n  display: flex;\n  align-items: center;\n  border-bottom-left-radius: ",";\n  border-bottom-right-radius: ",";\n\n  & > div + div {\n    margin-left: ",";\n  }\n"])),i.theme.space24,i.theme.radius12,i.theme.radius12,i.theme.space8);o.css(T||(T=e.__makeTemplateObject(["\n  overscroll-behavior: contain;\n  /* scroll bar width, for use in mask calculations */\n  --scrollbar-width: 8px;\n\n  /* mask fade distance, for use in mask calculations */\n  --mask-height: 32px;\n\n  /* If content exceeds height of container, overflow! */\n  overflow-y: auto;\n\n  padding-bottom: var(--mask-height);\n  /* The CSS mask */\n\n  /* The content mask is a linear gradient from top to bottom */\n  --mask-image-content: linear-gradient(\n    to bottom,\n    transparent,\n    black var(--mask-height),\n    black calc(100% - var(--mask-height)),\n    transparent\n  );\n  /* Here we scale the content gradient to the width of the container\nminus the scrollbar width. The height is the full container height */\n  --mask-size-content: calc(100% - var(--scrollbar-width)) 100%;\n\n  /* The scrollbar mask is a black pixel */\n  --mask-image-scrollbar: linear-gradient(black, black);\n\n  /* The width of our black pixel is the width of the scrollbar.\nThe height is the full container height */\n  --mask-size-scrollbar: var(--scrollbar-width) 100%;\n\n  /* Apply the mask image and mask size variables */\n  mask-image: var(--mask-image-content), var(--mask-image-scrollbar);\n  mask-size: var(--mask-size-content), var(--mask-size-scrollbar);\n\n  /* Position the content gradient in the top left, and the\nscroll gradient in the top right */\n  mask-position: 0 0, 100% 0;\n\n  /* We don't repeat our mask images */\n  mask-repeat: no-repeat, no-repeat;\n"],["\n  overscroll-behavior: contain;\n  /* scroll bar width, for use in mask calculations */\n  --scrollbar-width: 8px;\n\n  /* mask fade distance, for use in mask calculations */\n  --mask-height: 32px;\n\n  /* If content exceeds height of container, overflow! */\n  overflow-y: auto;\n\n  padding-bottom: var(--mask-height);\n  /* The CSS mask */\n\n  /* The content mask is a linear gradient from top to bottom */\n  --mask-image-content: linear-gradient(\n    to bottom,\n    transparent,\n    black var(--mask-height),\n    black calc(100% - var(--mask-height)),\n    transparent\n  );\n  /* Here we scale the content gradient to the width of the container\nminus the scrollbar width. The height is the full container height */\n  --mask-size-content: calc(100% - var(--scrollbar-width)) 100%;\n\n  /* The scrollbar mask is a black pixel */\n  --mask-image-scrollbar: linear-gradient(black, black);\n\n  /* The width of our black pixel is the width of the scrollbar.\nThe height is the full container height */\n  --mask-size-scrollbar: var(--scrollbar-width) 100%;\n\n  /* Apply the mask image and mask size variables */\n  mask-image: var(--mask-image-content), var(--mask-image-scrollbar);\n  mask-size: var(--mask-size-content), var(--mask-size-scrollbar);\n\n  /* Position the content gradient in the top left, and the\nscroll gradient in the top right */\n  mask-position: 0 0, 100% 0;\n\n  /* We don't repeat our mask images */\n  mask-repeat: no-repeat, no-repeat;\n"])));var k,v,w,x,y,j,_,T,q,O=d.default.div(q||(q=e.__makeTemplateObject(["\n  padding: "," ",";\n  overflow-y: auto;\n  flex-grow: 1;\n  /**\n   * Current overflow is not working well with react-tooltip.\n   * Temporary remove gradient overflow until having new tooltip library to use\n   */\n  // gradientOverflow\n"],["\n  padding: "," ",";\n  overflow-y: auto;\n  flex-grow: 1;\n  /**\n   * Current overflow is not working well with react-tooltip.\n   * Temporary remove gradient overflow until having new tooltip library to use\n   */\n  // gradientOverflow\n"])),i.theme.space8,i.theme.space24),z=t.forwardRef((function(t,i){var o=t.actions,s=t.children,c=t.className,d=t.label,g=t.subtitle,k=t.leftActions,v=t.onClose,w=t.open,x=t.theme,y=t.width,j=t.closeOnBlur,_=t.closeOnEsc,T=t.noBorder;return n.jsxs(l.BaseDialog,e.__assign({className:c,"data-theme":x,open:w,width:y,onClose:v,closeOnBlur:j,closeOnEsc:_,noBorder:T},{children:[n.jsxs(h,{children:[n.jsxs(m,{children:[n.jsx(a.Text,e.__assign({type:"title"},{children:d})),n.jsx(p,{noRipple:!0,onClick:v,icon:n.jsx(r.RemoveCircleDuotoneIcon,{size:24})})]}),g&&n.jsx(a.Text,e.__assign({type:"subtitle"},{children:g}))]}),n.jsx(O,e.__assign({ref:i},{children:s})),(o||k)&&n.jsxs(b,{children:[k&&n.jsx(u,{children:k}),o&&n.jsx(f,{children:o})]})]}))}));exports.Dialog=z;

package/components/dialog/_BaseDialog.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { IAminoTheme } from "../../types/IAminoTheme";
+export declare type BaseDialogProps = {
+    children: ReactNode;
+    className?: string;
+    open: boolean;
+    theme?: IAminoTheme;
+    width?: number;
+    onClose?: () => void;
+    closeOnBlur?: boolean;
+    closeOnEsc?: boolean;
+    noBorder?: boolean;
+};
+export declare const BaseDialog: ({ children, className, open, theme: _theme, width, onClose, closeOnBlur, closeOnEsc, noBorder, }: BaseDialogProps) => import("react").ReactPortal | null;

package/components/dialog/_BaseDialog.js

@@ -0,0 +1 @@
+"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("react"),i=require("react-dom"),o=require("framer-motion"),r=require("../backdrop/Backdrop.js"),a=require("../../styles/constants/theme.js"),d=require("styled-components");function c(e){return e&&e.__esModule?e:{default:e}}var l,s,u=c(i),h=c(d),f=h.default.div(l||(l=e.__makeTemplateObject(["\n  width: 100vw;\n  height: 100vh;\n  left: 0;\n  top: 0;\n  z-index: 1000;\n  position: fixed;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: ",";\n"],["\n  width: 100vw;\n  height: 100vh;\n  left: 0;\n  top: 0;\n  z-index: 1000;\n  position: fixed;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: ",";\n"])),a.theme.textColor),m=h.default(o.motion.div)(s||(s=e.__makeTemplateObject(["\n  position: relative;\n  z-index: 1001;\n  background: ",";\n  width: ","px;\n  max-height: 90vh;\n  border-radius: ",";\n  outline: none;\n  box-shadow: ",";\n  border: ",";\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n"],["\n  position: relative;\n  z-index: 1001;\n  background: ",";\n  width: ","px;\n  max-height: 90vh;\n  border-radius: ",";\n  outline: none;\n  box-shadow: ",";\n  border: ",";\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n"])),a.theme.surfaceColor,(function(e){return e.width}),a.theme.radius12,a.theme.v3ShadowXxl,(function(e){return!e.noBorder&&a.theme.border}));exports.BaseDialog=function(i){var a=i.children,d=i.className,c=i.open,l=i.theme,s=i.width,h=i.onClose,p=i.closeOnBlur,x=void 0===p||p,v=i.closeOnEsc,y=void 0===v||v,b=i.noBorder,w=void 0!==b&&b,g=t.useRef(null);return t.useEffect((function(){var e,n;(null===(e=g.current)||void 0===e?void 0:e.contains(document.activeElement))||null===(n=g.current)||void 0===n||n.focus()}),[c]),"undefined"!=typeof document?u.default.createPortal(n.jsxs(o.AnimatePresence,{children:[c&&n.jsx(r.Backdrop,{initial:{opacity:0},animate:{opacity:.65},exit:{opacity:0},transition:{duration:.3},"data-theme":l},"dialog-backdrop"),c&&n.jsx(f,e.__assign({"data-theme":l,onClick:function(){return h&&x&&h()},onKeyDown:function(e){h&&y&&"Escape"===e.key&&h()},tabIndex:-1,ref:g},{children:n.jsx(m,e.__assign({className:d,transition:{ease:[.4,0,.2,1],duration:.3},initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},width:s||444,noBorder:w,onClick:function(e){e.stopPropagation()}},{children:a}),"dialog")}))]}),document.querySelector("body")):null};

package/components/divider/Divider.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type Props = {
+    className?: string;
+    vertical?: boolean;
+};
+export declare const Divider: ({ className, vertical }: Props) => JSX.Element;
+export {};

package/components/divider/Divider.js

@@ -0,0 +1 @@
+"use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),t=require("../../styles/constants/theme.js");function n(e){return e&&e.__esModule?e:{default:e}}var s,a,i=n(require("styled-components")),o=i.default.hr(s||(s=e.__makeTemplateObject(["\n  margin: "," 0;\n  border-color: ",";\n"],["\n  margin: "," 0;\n  border-color: ",";\n"])),t.theme.space24,t.theme.borderColor),l=i.default.hr(a||(a=e.__makeTemplateObject(["\n  margin: 0 ",";\n  height: auto;\n  align-self: stretch;\n  border-right: solid thin ",";\n"],["\n  margin: 0 ",";\n  height: auto;\n  align-self: stretch;\n  border-right: solid thin ",";\n"])),t.theme.space24,t.theme.borderColor);exports.Divider=function(e){var t=e.className,n=e.vertical;return void 0!==n&&n?r.jsx(l,{className:t}):r.jsx(o,{className:t})};

package/components/drop-zone/DropZone.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { DropzoneOptions } from 'react-dropzone';
+import { UploadedFile } from "../../types/UploadedFile";
+export declare type DropZoneProps = {
+    className?: string;
+    dropzoneOptions: Omit<DropzoneOptions, 'disabled'>;
+    /**
+     * This `disabled` state only applies when no file is selected
+     * @default false
+     * */
+    disabled?: boolean;
+    helpText?: string;
+    /**
+     * Text to display in empty state
+     * @default 'Drop your file(s) here'
+     * */
+    instructionText?: string;
+    /**
+     * Whether to show the icon in file upload
+     * @default false
+     * */
+    noIcon?: boolean;
+    /** Display file info if uploaded file property has data */
+    uploadedFiles: UploadedFile[];
+    /** When the remove icon is clicked on an individual file */
+    onRemoveFile: (index: number) => void;
+    error?: boolean;
+    loading?: boolean;
+    /**
+     * Text to show while loading state is active
+     * @default 'Uploading file(s)...''
+     */
+    loadingText?: string;
+};
+export declare const DropZone: ({ className, dropzoneOptions, disabled, instructionText, helpText, noIcon, uploadedFiles, onRemoveFile, error, loading, loadingText, }: DropZoneProps) => JSX.Element;

package/components/drop-zone/DropZone.js

@@ -0,0 +1 @@
+"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),i=require("react-dropzone"),r=require("../../icons/FileDuotoneIcon.js"),t=require("../../icons/FileUploadDuotoneIcon.js"),o=require("../../icons/RemoveCircleDuotoneIcon.js"),a=require("../../styles/constants/theme.js"),l=require("styled-components"),s=require("../button/Button.js"),c=require("../spinner/Spinner.js"),d=require("../text/Text.js"),u=require("../thumbnail/Thumbnail.js");function p(e){return e&&e.__esModule?e:{default:e}}require("react"),require("../../icons/icon-base/_IconBase.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js");var m,x,f,g,h,j,_,b,y,v=p(l),T=v.default.div(m||(m=e.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ",";\n  opacity: ",";\n  cursor: ",";\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: ",";\n  opacity: ",";\n  cursor: ",";\n"])),a.theme.space16,(function(e){return e.disabled?.5:1}),(function(e){return e.disabled?"not-allowed":"auto"})),q=v.default.div(x||(x=e.__makeTemplateObject(["\n  border: 2px dashed;\n  border-color: ",";\n  border-radius: ",";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"],["\n  border: 2px dashed;\n  border-color: ",";\n  border-radius: ",";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"])),(function(e){return e.error?a.theme.danger:a.theme.borderColor}),a.theme.radius12),k=v.default.div(f||(f=e.__makeTemplateObject(["\n  padding: ",";\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: ",";\n"],["\n  padding: ",";\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: ",";\n"])),a.theme.space16,a.theme.space12),O=v.default.div(g||(g=e.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ",";\n  align-items: center;\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: ",";\n  align-items: center;\n"])),a.theme.space4),D=v.default.button(h||(h=e.__makeTemplateObject(["\n  display: inline;\n"],["\n  display: inline;\n"]))),I=v.default(s.Button)(j||(j=e.__makeTemplateObject(["\n  margin-left: auto;\n  padding: 0;\n  path[data-is-secondary-color] {\n    fill: ",";\n  }\n\n  && {\n    &,\n    &:focus,\n    &:hover,\n    &:active {\n      color: ",";\n      background: transparent;\n    }\n    &:hover {\n      path[data-is-secondary-color] {\n        fill: ",";\n      }\n    }\n    &:active,\n    &:focus {\n      path[data-is-secondary-color] {\n        fill: ",";\n      }\n    }\n  }\n\n  :active,\n  :focus {\n    outline: none;\n    box-shadow: unset;\n  }\n"],["\n  margin-left: auto;\n  padding: 0;\n  path[data-is-secondary-color] {\n    fill: ",";\n  }\n\n  && {\n    &,\n    &:focus,\n    &:hover,\n    &:active {\n      color: ",";\n      background: transparent;\n    }\n    &:hover {\n      path[data-is-secondary-color] {\n        fill: ",";\n      }\n    }\n    &:active,\n    &:focus {\n      path[data-is-secondary-color] {\n        fill: ",";\n      }\n    }\n  }\n\n  :active,\n  :focus {\n    outline: none;\n    box-shadow: unset;\n  }\n"])),a.theme.gray200,a.theme.gray800,a.theme.gray300,a.theme.gray400),F=v.default.div(_||(_=e.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ",";\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: ",";\n"])),a.theme.space4),z=v.default.div(b||(b=e.__makeTemplateObject(["\n  border: ",";\n  border-radius: ",";\n  padding: ",";\n  display: flex;\n  justify-content: flex-start;\n  gap: ",";\n"],["\n  border: ",";\n  border-radius: ",";\n  padding: ",";\n  display: flex;\n  justify-content: flex-start;\n  gap: ",";\n"])),a.theme.border,a.theme.space12,a.theme.space16,a.theme.space12),R=v.default.div(y||(y=e.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"],["\n  display: flex;\n  flex-direction: column;\n"])));exports.DropZone=function(a){var l=a.className,s=a.dropzoneOptions,p=a.disabled,m=void 0!==p&&p,x=a.instructionText,f=void 0===x?"Drop your file(s) here":x,g=a.helpText,h=a.noIcon,j=void 0!==h&&h,_=a.uploadedFiles,b=a.onRemoveFile,y=a.error,v=void 0!==y&&y,C=a.loading,w=a.loadingText,B=void 0===w?"Uploading file(s)...":w,U=s.maxFiles||0,N=i.useDropzone(e.__assign(e.__assign({},s),{disabled:m,noClick:!0,noKeyboard:!0})),P=N.getRootProps,S=N.getInputProps,G=N.open,K=0!==U&&_.length>=U;return n.jsx(T,e.__assign({disabled:m,className:l},{children:C?n.jsx(q,{children:n.jsxs(k,{children:[n.jsx(c.Spinner,{}),n.jsx(d.Text,e.__assign({type:"label",color:"gray800"},{children:B}))]})}):n.jsxs(n.Fragment,{children:[!K&&n.jsx(q,e.__assign({error:v},{children:n.jsxs(k,e.__assign({},P(),{role:void 0},{children:[n.jsx("input",e.__assign({},S())),!j&&n.jsx(u.Thumbnail,{size:40,icon:n.jsx(t.FileUploadDuotoneIcon,{})}),n.jsxs(O,{children:[n.jsxs(d.Text,e.__assign({type:"label"},{children:[f," or"," ",n.jsx(D,e.__assign({type:"button",onClick:G,disabled:m},{children:n.jsx(d.Text,e.__assign({type:"label",color:"blue600"},{children:"browse"}))}))]})),g&&n.jsx(d.Text,e.__assign({type:"caption"},{children:g}))]})]}))})),!!_.length&&n.jsx(F,{children:_.map((function(i,t){return n.jsxs(z,{children:[n.jsx(r.FileDuotoneIcon,{}),n.jsxs(R,{children:[n.jsx(d.Text,e.__assign({type:"label",color:"gray1300"},{children:i.name})),i.size&&n.jsx(d.Text,e.__assign({type:"caption",color:"gray700"},{children:i.size}))]}),b&&n.jsx(I,e.__assign({onClick:function(){return b(t)}},{children:n.jsx(o.RemoveCircleDuotoneIcon,{size:20})}))]},i.name)}))})]})}))};

package/components/file-upload/FileUpload.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { DropzoneOptions } from 'react-dropzone';
+import { UploadedFile } from "../../types/UploadedFile";
+export declare type FileUploadProps = {
+    className?: string;
+    dropzoneOptions: Omit<DropzoneOptions, 'disabled' | 'multiple'>;
+    /**
+     * This `disabled` state only applies when no file is selected
+     * @default false
+     * */
+    disabled?: boolean;
+    error?: boolean;
+    /**
+     * Text to display in empty state
+     * @default 'or drag your file here'
+     * */
+    instructionText?: string;
+    /** Display file info if uploaded file property has data */
+    uploadedFile: UploadedFile | null;
+    onRemoveFile?: () => void;
+    loading?: boolean;
+    /**
+     * Text to show while loading state is active
+     * @default 'Uploading...''
+     */
+    loadingText?: string;
+};
+/**
+ * Single file input
+ */
+export declare const FileUpload: ({ className, dropzoneOptions, disabled, error, onRemoveFile, uploadedFile, instructionText, loading, loadingText, }: FileUploadProps) => JSX.Element;

package/components/file-upload/FileUpload.js

@@ -0,0 +1 @@
+"use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),t=require("react-dropzone"),r=require("../text/Text.js"),o=require("../../icons/RemoveCircleDuotoneIcon.js"),i=require("../../styles/constants/theme.js"),a=require("styled-components"),s=require("../button/Button.js");function l(n){return n&&n.__esModule?n:{default:n}}require("react"),require("../../icons/icon-base/_IconBase.js"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js");var c,d,u,p,f,g=l(a),m=g.default.div(c||(c=n.__makeTemplateObject(["\n  display: flex;\n  justify-content: flex-start;\n  padding: "," ",";\n  border-radius: ",";\n  border: ",";\n  border-color: ",";\n\n  opacity: ",";\n  cursor: ",";\n"],["\n  display: flex;\n  justify-content: flex-start;\n  padding: "," ",";\n  border-radius: ",";\n  border: ",";\n  border-color: ",";\n\n  opacity: ",";\n  cursor: ",";\n"])),i.theme.space8,i.theme.space12,i.theme.radius10,i.theme.border,(function(n){return n.error?i.theme.danger:i.theme.borderColor}),(function(n){return n.disabled?.5:1}),(function(n){return n.disabled?"not-allowed":"auto"})),x=g.default.div(d||(d=n.__makeTemplateObject(["\n  outline: none;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  align-items: center;\n"],["\n  outline: none;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  align-items: center;\n"]))),h=g.default.div(u||(u=n.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: ",";\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: ",";\n"])),i.theme.space12),y=g.default.div(p||(p=n.__makeTemplateObject(["\n  display: flex;\n  gap: ",";\n  align-items: center;\n"],["\n  display: flex;\n  gap: ",";\n  align-items: center;\n"])),i.theme.space4),_=g.default(s.Button)(f||(f=n.__makeTemplateObject(["\n  margin-left: auto;\n  padding: 0;\n  path[data-is-secondary-color] {\n    fill: ",";\n  }\n\n  && {\n    &,\n    &:focus,\n    &:hover,\n    &:active {\n      color: ",";\n      background: transparent;\n    }\n    &:hover {\n      path[data-is-secondary-color] {\n        fill: ",";\n      }\n    }\n    &:active,\n    &:focus {\n      path[data-is-secondary-color] {\n        fill: ",";\n      }\n    }\n  }\n\n  :active,\n  :focus {\n    outline: none;\n    box-shadow: unset;\n  }\n"],["\n  margin-left: auto;\n  padding: 0;\n  path[data-is-secondary-color] {\n    fill: ",";\n  }\n\n  && {\n    &,\n    &:focus,\n    &:hover,\n    &:active {\n      color: ",";\n      background: transparent;\n    }\n    &:hover {\n      path[data-is-secondary-color] {\n        fill: ",";\n      }\n    }\n    &:active,\n    &:focus {\n      path[data-is-secondary-color] {\n        fill: ",";\n      }\n    }\n  }\n\n  :active,\n  :focus {\n    outline: none;\n    box-shadow: unset;\n  }\n"])),i.theme.gray200,i.theme.gray800,i.theme.gray300,i.theme.gray400);exports.FileUpload=function(i){var a=i.className,l=i.dropzoneOptions,c=i.disabled,d=void 0!==c&&c,u=i.error,p=void 0!==u&&u,f=i.onRemoveFile,g=i.uploadedFile,j=i.instructionText,b=void 0===j?"or drag your file here":j,v=i.loading,q=i.loadingText,T=void 0===q?"Uploading...":q,k=t.useDropzone(n.__assign(n.__assign({},l),{disabled:d,noClick:!0,noKeyboard:!0,multiple:!1})),C=k.getRootProps,R=k.getInputProps,O=k.open,z=function(){return v?e.jsx(r.Text,{children:T}):g?function(){if(g){var t=g.name,o=g.size;return e.jsxs(y,{children:[e.jsx(r.Text,n.__assign({type:"label",color:"gray1300"},{children:t})),o&&e.jsx(r.Text,n.__assign({type:"caption",color:"gray700"},{children:o}))]})}return null}():e.jsx(r.Text,n.__assign({color:"gray600"},{children:b}))};return e.jsxs(m,n.__assign({disabled:d,error:p,className:a},{children:[e.jsxs(x,n.__assign({},C(),{children:[e.jsx("input",n.__assign({},R())),e.jsxs(h,{children:[e.jsx(s.Button,n.__assign({onClick:O,loading:v,spinnerColor:"black"},{children:"Browse"})),z()]})]})),f&&g&&e.jsx(_,n.__assign({onClick:function(){return f()}},{children:e.jsx(o.RemoveCircleDuotoneIcon,{size:20})}))]}))};

package/components/graph-explorer/GraphiqlExplorer.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { GraphQLSchema } from 'graphql';
+import { ExecutionResultType, GraphiqlExecutionResult, HandleFetchFetcher } from "../../utils/_graphiqlFetcher";
+declare type GraphiqlExplorerProps = {
+    /**
+     * @param fetcher
+     * @description Custom fetcher, if not provided, the default fetcher (handleFetch - "src/utils/handleFetch.ts") will be used
+     */
+    fetcher?: HandleFetchFetcher;
+    onEditQuery: (query: string) => void;
+    onEditVariables: (variables: string) => void;
+    onResultData: (data: GraphiqlExecutionResult<ExecutionResultType> | null) => void;
+    cachingKey: string;
+    query: string;
+    schema: GraphQLSchema | null;
+    /**
+     * @param schemaName name of the schema, used to get the option for that schema from the cache
+     * @example schemaName = 'Internal GraphQl'
+     */
+    schemaName: string;
+    setIsFetching: (fetching: boolean) => void;
+    url: string;
+    variables: string;
+};
+export declare const GraphiqlExplorer: ({ fetcher, onEditQuery, onEditVariables, onResultData, cachingKey, query, schema, schemaName, setIsFetching, url, variables, }: GraphiqlExplorerProps) => JSX.Element;
+export {};

package/components/graph-explorer/GraphiqlExplorer.js

@@ -0,0 +1 @@
+"use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),i=require("react"),t=require("graphiql"),s=require("../../utils/hooks/_useGraphiqlExplorer.js"),n=require("../../utils/hooks/_useGraphiqlFetcher.js"),a=require("../../utils/hooks/_useGraphiqlStorage.js"),u=require("styled-components"),l=require("./_GraphiqlContextWrapper.js");function o(e){return e&&e.__esModule?e:{default:e}}require("@graphiql/plugin-explorer"),require("../../styles/constants/theme.js"),require("swr"),require("../../utils/_graphiqlFetcher.js"),require("../../utils/handleFetch.js"),require("../../utils/hooks/useSwr.js"),require("lodash/kebabCase"),require("../../utils/hooks/useCurrentShema.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("@graphiql/react");var h,p=o(u).default.div(h||(h=e.__makeTemplateObject(["\n  height: 100%;\n  .docExplorerWrap {\n    // Built-in plugin height is set to 100% which prevents the plugin bar scrolling\n    height: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n"],["\n  height: 100%;\n  .docExplorerWrap {\n    // Built-in plugin height is set to 100% which prevents the plugin bar scrolling\n    height: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n"])));exports.GraphiqlExplorer=function(u){var o=u.fetcher,h=u.onEditQuery,c=u.onEditVariables,q=u.onResultData,g=u.cachingKey,d=u.query,_=u.schema,x=u.schemaName,j=u.setIsFetching,m=u.url,E=u.variables,f=e.__read(i.useState(null),2),v=f[0],b=f[1],y=e.__read(i.useState(null),2)[1],G=e.__read(i.useState(""),2),k=G[0],F=G[1],S=n.useGraphiqlFetcher({cachingKey:g,url:m,query:d,customFetcher:o||null,operationName:k}),C=S.graphiqlFetcher,w=S.resultData,Q=S.isLoading,W=a.useGraphiqlStorage({defaultSchema:x});i.useEffect((function(){j(!!(null==v?void 0:v.isFetching)||Q)}),[null==v?void 0:v.isFetching,j,Q]),i.useEffect((function(){q(w)}),[q,w]);var L=s.useGraphiqlExplorer({onEdit:h,query:d});return r.jsx(p,{children:r.jsx(t.GraphiQL,e.__assign({fetcher:C,onEditOperationName:F,onEditQuery:h,onEditVariables:c,variables:E,plugins:[L],query:d,schema:_,storage:W},{children:r.jsx(l.GraphiqlContextWrapper,e.__assign({setExecutionContext:b,setResponseEditorContext:y},{children:r.jsx(t.GraphiQL.Footer,{})}))}))})};

package/components/graph-explorer/_Graphiql.js

@@ -0,0 +1 @@
+"use strict";var r=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),i=require("react"),s=require("graphiql");exports.Graphiql=function(a){return e.jsx(i.Suspense,r.__assign({fallback:null},{children:e.jsx(s.GraphiQL,r.__assign({},a))}))};

package/components/graph-explorer/_GraphiqlContextWrapper.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ExecutionContextType } from '@graphiql/react';
+import { CodeMirrorEditor } from '@graphiql/react/types/editor/types';
+declare type Props = {
+    children: ReactNode;
+    setExecutionContext: (context: ExecutionContextType) => void;
+    setResponseEditorContext: (context: CodeMirrorEditor) => void;
+};
+export declare const GraphiqlContextWrapper: ({ children, setExecutionContext, setResponseEditorContext, }: Props) => JSX.Element;
+export {};

package/components/graph-explorer/_GraphiqlContextWrapper.js

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@graphiql/react");exports.GraphiqlContextWrapper=function(n){var o=n.children,i=n.setExecutionContext,s=n.setResponseEditorContext,u=r.useExecutionContext({nonNull:!0}),c=r.useEditorContext({nonNull:!0}).responseEditor;return t.useEffect((function(){u&&i(u),c&&s(c)}),[u,c,i,s]),e.jsx("span",{children:o})};

package/components/help-text/HelpText.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export declare type HelpTextProps = {
+    /**
+     * Is this an error state.
+     */
+    error?: boolean;
+    /**
+     * Shows below input. Use in conjunction with `error` to show feedback about error.
+     */
+    helpText?: ReactNode;
+};
+export declare const HelpText: ({ error, helpText }: HelpTextProps) => JSX.Element | null;

package/components/help-text/HelpText.js

@@ -0,0 +1 @@
+"use strict";var e=require("../../_tslib-fe391a2e.js"),t=require("react/jsx-runtime"),r=require("../text/Text.js"),n=require("../../styles/constants/theme.js");function s(e){return e&&e.__esModule?e:{default:e}}var i,l=s(require("styled-components")).default.div(i||(i=e.__makeTemplateObject(["\n  margin-top: ",";\n"],["\n  margin-top: ",";\n"])),n.theme.space8);exports.HelpText=function(n){var s=n.error,i=n.helpText;return i?s&&"string"==typeof i?t.jsx(l,{children:t.jsx(r.Text,e.__assign({type:"caption",color:"red700"},{children:i}))}):"string"==typeof i?t.jsx(l,{children:t.jsx(r.Text,e.__assign({type:"caption"},{children:i}))}):t.jsx(l,{children:i}):null};

package/components/input/Input.d.ts

@@ -0,0 +1,19 @@
+import { ChangeEvent, ChangeEventHandler, HTMLInputTypeAttribute, InputHTMLAttributes, ReactNode } from 'react';
+import { HelpTextProps } from '../help-text/HelpText';
+import { FloatLabelInputProps } from './input-type/_FloatLabelInput';
+declare type DateInputEventHandler = (e: Omit<ChangeEvent<HTMLInputElement>, 'target'> & {
+    target: Omit<EventTarget, 'value'> & {
+        /** @desc The parsed value is always formatted `yyyy-mm-dd`. Ex: '2022-12-28' */
+        value: `${number}-${number}-${number}` | '';
+    };
+}) => void;
+declare type InputType<T extends HTMLInputTypeAttribute> = {
+    /** A value (in px) that will determine how wide the input is. If nothing is passed, it defaults to 100% */
+    width?: number;
+    onChange: T extends 'date' ? DateInputEventHandler : ChangeEventHandler<HTMLInputElement>;
+    inputSuffix?: ReactNode;
+    inputPrefix?: ReactNode;
+} & Omit<FloatLabelInputProps, 'onChange'> & HelpTextProps;
+export declare type InputProps<T extends string = string> = InputType<T> & Omit<InputHTMLAttributes<HTMLInputElement>, keyof InputType<T>>;
+export declare const Input: <T extends string>({ autoFocus, className, disabled, error, helpText, inputMode, inputPrefix, inputSuffix, label, onChange, onKeyDown, pattern, placeholder, prefix, readOnly, required, suffix, tabIndex, type, size, value, valuePrefix, width, ...props }: InputProps<T>) => JSX.Element;
+export {};

package/components/input/Input.js

@@ -0,0 +1 @@
+"use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),n=require("../../styles/constants/theme.js"),i=require("styled-components"),a=require("../help-text/HelpText.js"),t=require("./input-type/_DateInput.js"),s=require("./input-type/_FloatLabelInput.js"),u=require("./input-type/_NumberInput.js"),o=require("./input-type/_PasswordInput.js"),l=require("./input-type/_TimeInput.js");function d(e){return e&&e.__esModule?e:{default:e}}require("../text/Text.js"),require("react"),require("../../icons/CalendarIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/getTestId.js"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../icons/EyeIcon.js"),require("../../icons/EyeOffIcon.js"),require("../../icons/ClockIcon.js");var p,c,x=d(i),f=x.default.div(p||(p=e.__makeTemplateObject(["\n  border-radius: ",";\n  border: ",";\n  &:hover {\n    border: 1px solid ",";\n  }\n"],["\n  border-radius: ",";\n  border: ",";\n  &:hover {\n    border: 1px solid ",";\n  }\n"])),n.theme.radius6,n.theme.border,n.theme.gray300),b=x.default.div(c||(c=e.__makeTemplateObject(["\n  position: relative;\n  width: ",";\n\n  & > div {\n    flex-direction: row;\n    align-items: center;\n    display: flex;\n  }\n\n  &.disabled {\n    opacity: 0.4;\n  }\n"],["\n  position: relative;\n  width: ",";\n\n  & > div {\n    flex-direction: row;\n    align-items: center;\n    display: flex;\n  }\n\n  &.disabled {\n    opacity: 0.4;\n  }\n"])),(function(e){return e.width?"".concat(e.width,"px"):"100%"}));exports.Input=function(n){var i=n.autoFocus,d=n.className,p=n.disabled,c=n.error,x=n.helpText,h=n.inputMode,y=n.inputPrefix,j=n.inputSuffix,m=n.label,q=n.onChange,v=n.onKeyDown,_=n.pattern,I=n.placeholder,w=n.prefix,g=n.readOnly,C=n.required,P=n.suffix,T=n.tabIndex,D=n.type,N=n.size,O=n.value,F=n.valuePrefix,M=n.width,z=e.__rest(n,["autoFocus","className","disabled","error","helpText","inputMode","inputPrefix","inputSuffix","label","onChange","onKeyDown","pattern","placeholder","prefix","readOnly","required","suffix","tabIndex","type","size","value","valuePrefix","width"]);return r.jsxs(b,e.__assign({width:M,className:"amino-input-wrapper ".concat(p?"disabled":"")},{children:[r.jsx(f,{children:function(){switch(D){case"password":return r.jsx(o.PasswordInput,e.__assign({autoFocus:i,className:d,disabled:p,error:c,inputMode:h,label:m,onChange:q,onKeyDown:v,pattern:_,placeholder:I,prefix:w||y,readOnly:g,required:C,suffix:P||j,tabIndex:T,size:N,value:O||"",valuePrefix:F},z));case"date":case"datetime-local":return r.jsx(t.DateInput,e.__assign({type:D,autoFocus:i,className:d,disabled:p,error:c,inputMode:h,label:m,onChange:q,onKeyDown:v,pattern:_,placeholder:I,prefix:w||y,readOnly:g,required:C,suffix:P||j,tabIndex:T,size:N,value:O||"",valuePrefix:F},z));case"number":return r.jsx(u.NumberInput,e.__assign({autoFocus:i,className:d,disabled:p,error:c,inputMode:h,label:m,onChange:q,onKeyDown:v,pattern:_,placeholder:I,prefix:w||y,readOnly:g,required:C,suffix:P||j,tabIndex:T,size:N,value:O||"",valuePrefix:F},z));case"time":return r.jsx(l.TimeInput,e.__assign({autoFocus:i,className:d,disabled:p,error:c,inputMode:h,label:m,onChange:q,onKeyDown:v,pattern:_,placeholder:I,prefix:w||y,readOnly:g,required:C,suffix:P||j,tabIndex:T,size:N,value:O||"",valuePrefix:F},z));default:return r.jsx(s.FloatLabelInput,e.__assign({autoFocus:i,className:d,disabled:p,error:c,inputMode:h,label:m,onChange:q,onKeyDown:v,pattern:_,placeholder:I,prefix:w||y,readOnly:g,required:C,suffix:P||j,tabIndex:T,size:N,type:D,value:O||"",valuePrefix:F},z))}}()}),r.jsx(a.HelpText,{error:c,helpText:x})]}))};

package/components/input/SearchInput.d.ts

@@ -0,0 +1,22 @@
+import { ChangeEventHandler, KeyboardEventHandler } from 'react';
+import { InputMode } from './input-type/_FloatLabelInput';
+export declare type InputProps = {
+    /** Input value. Required since all inputs must be fully controlled */
+    value: string | null;
+    /** Input on changed. Required since all inputs must be fully controlled */
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    /** Placeholder text to be displayed in the input */
+    placeholder?: string;
+    /** Determines if the input is required for form validation */
+    required?: boolean;
+    /** Determines if the input is editable or not */
+    readOnly?: boolean;
+    className?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    inputMode?: InputMode;
+    pattern?: string;
+    autoFocus?: boolean;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+};
+export declare const SearchInput: ({ autoFocus, className, disabled, inputMode, onChange, onKeyDown, pattern, placeholder, readOnly, required, tabIndex, value, ...props }: InputProps) => JSX.Element;

package/components/input/SearchInput.js

@@ -0,0 +1 @@
+"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("../../icons/SearchIcon.js"),a=require("../../styles/constants/theme.js"),i=require("styled-components");function r(e){return e&&e.__esModule?e:{default:e}}require("react"),require("../../icons/icon-base/_IconBase.js");var o,s,d,l=r(i),u=l.default.div(o||(o=e.__makeTemplateObject(["\n  position: relative;\n  border: ",";\n  border-radius: ",";\n  width: 100%;\n"],["\n  position: relative;\n  border: ",";\n  border-radius: ",";\n  width: 100%;\n"])),a.theme.border,a.theme.radius6),c=l.default.label(s||(s=e.__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ",";\n"],["\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ",";\n"])),a.theme.space40),h=l.default.input(d||(d=e.__makeTemplateObject(["\n  padding-left: ",";\n  padding-right: ",";\n  height: 40px;\n  font-weight: 500;\n  line-height: 40px;\n  border-radius: ",";\n  outline: none;\n  width: 100%;\n  :focus {\n    outline: none;\n    box-shadow: ",";\n  }\n"],["\n  padding-left: ",";\n  padding-right: ",";\n  height: 40px;\n  font-weight: 500;\n  line-height: 40px;\n  border-radius: ",";\n  outline: none;\n  width: 100%;\n  :focus {\n    outline: none;\n    box-shadow: ",";\n  }\n"])),a.theme.space40,a.theme.space16,a.theme.radius6,a.theme.glowBlue);exports.SearchInput=function(a){var i=a.autoFocus,r=a.className,o=a.disabled,s=a.inputMode,d=a.onChange,l=a.onKeyDown,p=a.pattern,b=a.placeholder,m=a.readOnly,g=a.required,f=a.tabIndex,_=a.value,x=e.__rest(a,["autoFocus","className","disabled","inputMode","onChange","onKeyDown","pattern","placeholder","readOnly","required","tabIndex","value"]);return n.jsxs(u,e.__assign({className:r},{children:[n.jsx(c,e.__assign({htmlFor:h},{children:n.jsx(t.SearchIcon,{color:"gray600",size:20})})),n.jsx(h,e.__assign({autoFocus:i,disabled:o,inputMode:s,onChange:d,onKeyDown:l,pattern:p,placeholder:b||"Search...",readOnly:m,required:g,tabIndex:f,type:"search",value:_||""},x))]}))};

package/components/input/input-type/_DateInput.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type FloatLabelInputProps } from './_FloatLabelInput';
+export declare const DateInput: ({ autoFocus, className, disabled, error, inputMode, label, onChange, onKeyDown, pattern, placeholder, prefix, readOnly, required, suffix, tabIndex, value, ...props }: FloatLabelInputProps) => JSX.Element;

package/components/input/input-type/_DateInput.js

@@ -0,0 +1 @@
+"use strict";var e=require("../../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("react"),a=require("../../../icons/CalendarIcon.js"),i=require("../../../styles/constants/theme.js"),r=require("styled-components"),o=require("./_FloatLabelInput.js");function s(e){return e&&e.__esModule?e:{default:e}}require("../../../icons/icon-base/_IconBase.js"),require("../../../utils/getTestId.js");var d,l,u,c,p=s(r),b=p.default.div(d||(d=e.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"],["\n  position: relative;\n  width: 100%;\n"]))),f=p.default.div(l||(l=e.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"],["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"]))),x=p.default.button(u||(u=e.__makeTemplateObject(["\n  padding: 6px;\n  border-radius: ",";\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"],["\n  padding: 6px;\n  border-radius: ",";\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"])),i.theme.radius4,i.theme.transition),h=p.default(o.FloatLabelInput)(c||(c=e.__makeTemplateObject(["\n  && input {\n    padding-right: ",";\n    appearance: textfield;\n    &::-webkit-inner-spin-button,\n    &::-webkit-calendar-picker-indicator {\n      display: none;\n      -webkit-appearance: none;\n    }\n\n    &::-webkit-datetime-edit-fields-wrapper {\n      transition: 0.5s all ease;\n    }\n    &:not(:focus):not(.has-content) {\n      &::-webkit-datetime-edit-fields-wrapper {\n        opacity: 0;\n      }\n    }\n  }\n"],["\n  && input {\n    padding-right: ",";\n    appearance: textfield;\n    &::-webkit-inner-spin-button,\n    &::-webkit-calendar-picker-indicator {\n      display: none;\n      -webkit-appearance: none;\n    }\n\n    &::-webkit-datetime-edit-fields-wrapper {\n      transition: 0.5s all ease;\n    }\n    &:not(:focus):not(.has-content) {\n      &::-webkit-datetime-edit-fields-wrapper {\n        opacity: 0;\n      }\n    }\n  }\n"])),i.theme.space40);exports.DateInput=function(i){var r=i.autoFocus,o=i.className,s=i.disabled,d=i.error,l=i.inputMode,u=i.label,c=i.onChange,p=i.onKeyDown,m=i.pattern,k=i.placeholder,g=i.prefix,w=i.readOnly,_=i.required,v=i.suffix,j=i.tabIndex,y=i.value,q=e.__rest(i,["autoFocus","className","disabled","error","inputMode","label","onChange","onKeyDown","pattern","placeholder","prefix","readOnly","required","suffix","tabIndex","value"]),I=t.useRef(null);return n.jsx(b,e.__assign({className:o},{children:n.jsx(h,e.__assign({"aria-label":u,autoFocus:r,disabled:s,error:d,inputMode:l,label:u,onChange:c,onKeyDown:p,pattern:m,placeholder:k,prefix:g,readOnly:w,ref:I,required:_,suffix:v||n.jsx(f,{children:n.jsx(x,e.__assign({type:"button",onClick:function(){var e,n;null===(e=I.current)||void 0===e||e.showPicker(),null===(n=I.current)||void 0===n||n.dispatchEvent(new Event("input",{bubbles:!0}))}},{children:n.jsx(a.CalendarIcon,{size:20})}))}),tabIndex:j,type:"date",value:y},q))}))};

package/components/input/input-type/_FloatLabelInput.d.ts

@@ -0,0 +1,67 @@
+import { ChangeEventHandler, HTMLInputTypeAttribute, InputHTMLAttributes, KeyboardEventHandler, ReactNode } from 'react';
+import { HelpTextProps } from "../../help-text/HelpText";
+import { Size } from "../../../types/Size";
+export declare const InputValuePrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare type InputMode = 'decimal' | 'email' | 'none' | 'numeric' | 'search' | 'tel' | 'text' | 'url';
+declare type FloatLabelInputType = {
+    /** A label that will be displayed above the input */
+    label?: string;
+    /** Input value. Required since all inputs must be fully controlled */
+    value: string | null;
+    /** Input on changed. Required since all inputs must be fully controlled */
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    /** Placeholder text to be displayed in the input */
+    placeholder?: string;
+    /** Determines if the input is required for form validation */
+    required?: boolean;
+    /** Determines if the input is editable or not */
+    readOnly?: boolean;
+    /** Determines input type (email, password, etc.) */
+    type?: HTMLInputTypeAttribute;
+    /** A short string displayed at the beginning of the input */
+    prefix?: ReactNode;
+    /** An additional value that appears next to the input but cannot be changed by the input */
+    valuePrefix?: ReactNode;
+    /** A short string displayed at the end of the input */
+    suffix?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    inputMode?: InputMode;
+    pattern?: string;
+    autoFocus?: boolean;
+    size?: Size;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+} & Pick<HelpTextProps, 'error'>;
+export declare type FloatLabelInputProps = FloatLabelInputType & Omit<InputHTMLAttributes<HTMLInputElement>, keyof FloatLabelInputType>;
+export declare const FloatLabelInput: import("react").ForwardRefExoticComponent<{
+    /** A label that will be displayed above the input */
+    label?: string | undefined;
+    /** Input value. Required since all inputs must be fully controlled */
+    value: string | null;
+    /** Input on changed. Required since all inputs must be fully controlled */
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    /** Placeholder text to be displayed in the input */
+    placeholder?: string | undefined;
+    /** Determines if the input is required for form validation */
+    required?: boolean | undefined;
+    /** Determines if the input is editable or not */
+    readOnly?: boolean | undefined;
+    /** Determines input type (email, password, etc.) */
+    type?: HTMLInputTypeAttribute | undefined;
+    /** A short string displayed at the beginning of the input */
+    prefix?: ReactNode;
+    /** An additional value that appears next to the input but cannot be changed by the input */
+    valuePrefix?: ReactNode;
+    /** A short string displayed at the end of the input */
+    suffix?: ReactNode;
+    className?: string | undefined;
+    disabled?: boolean | undefined;
+    tabIndex?: number | undefined;
+    inputMode?: InputMode | undefined;
+    pattern?: string | undefined;
+    autoFocus?: boolean | undefined;
+    size?: Size | undefined;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement> | undefined;
+} & Pick<HelpTextProps, "error"> & Omit<InputHTMLAttributes<HTMLInputElement>, "label" | "pattern" | "error" | "className" | "type" | "placeholder" | "tabIndex" | "prefix" | "inputMode" | "onChange" | "onKeyDown" | "size" | "disabled" | "autoFocus" | "value" | "readOnly" | "required" | "valuePrefix" | "suffix"> & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/components/input/input-type/_FloatLabelInput.js

@@ -0,0 +1 @@
+"use strict";var n=require("../../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),t=require("react"),a=require("../../../styles/constants/theme.js"),o=require("../../../utils/getTestId.js");function r(n){return n&&n.__esModule?n:{default:n}}var i,l,s,d,p,c,f,h=r(require("styled-components")),u=h.default.label(i||(i=n.__makeTemplateObject(["\n  display: block;\n  max-height: 0;\n  pointer-events: none;\n  order: 1;\n  &::before {\n    content: attr(data-label);\n    color: ",";\n    position: absolute;\n    font-size: ",";\n    line-height: ",";\n    display: inline-block;\n    filter: blur(0);\n    transform-origin: left top;\n    transition: ",";\n    margin-left: ",";\n    top: calc(50% - "," / 2);\n    z-index: 1;\n  }\n  &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    border-radius: ",";\n  }\n  /** disabled state */\n  .disabled & {\n    pointer-events: inherit;\n    ::after {\n      cursor: not-allowed;\n      z-index: 1;\n    }\n  }\n"],["\n  display: block;\n  max-height: 0;\n  pointer-events: none;\n  order: 1;\n  &::before {\n    content: attr(data-label);\n    color: ",";\n    position: absolute;\n    font-size: ",";\n    line-height: ",";\n    display: inline-block;\n    filter: blur(0);\n    transform-origin: left top;\n    transition: ",";\n    margin-left: ",";\n    top: calc(50% - "," / 2);\n    z-index: 1;\n  }\n  &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    border-radius: ",";\n  }\n  /** disabled state */\n  .disabled & {\n    pointer-events: inherit;\n    ::after {\n      cursor: not-allowed;\n      z-index: 1;\n    }\n  }\n"])),a.theme.gray800,a.theme.fontSizeBase,a.theme.fontSizeBase,a.theme.transition,a.theme.space16,a.theme.fontSizeBase,a.theme.radius6),b=h.default.div(l||(l=n.__makeTemplateObject(["\n  font-size: ",";\n  line-height: ",";\n  font-weight: 500;\n  background: transparent;\n  padding: 0 ",";\n  font-weight: 700;\n  flex-basis: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"],["\n  font-size: ",";\n  line-height: ",";\n  font-weight: 500;\n  background: transparent;\n  padding: 0 ",";\n  font-weight: 700;\n  flex-basis: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])),a.theme.fontSizeS,a.theme.fontSizeS,a.theme.space16),m=h.default(b)(s||(s=n.__makeTemplateObject(["\n  border-top-left-radius: ",";\n  border-bottom-left-radius: ",";\n"],["\n  border-top-left-radius: ",";\n  border-bottom-left-radius: ",";\n"])),a.theme.radius6,a.theme.radius6),x=h.default(b)(d||(d=n.__makeTemplateObject(["\n  order: 3;\n  border-top-right-radius: ",";\n  border-bottom-right-radius: ",";\n"],["\n  order: 3;\n  border-top-right-radius: ",";\n  border-bottom-right-radius: ",";\n"])),a.theme.radius6,a.theme.radius6),g=h.default.div(p||(p=n.__makeTemplateObject(["\n  display: flex;\n  order: 2;\n  align-items: flex-end;\n  padding-left: ",";\n  padding-bottom: calc(",");\n  color: ",";\n  white-space: nowrap;\n"],["\n  display: flex;\n  order: 2;\n  align-items: flex-end;\n  padding-left: ",";\n  padding-bottom: calc(",");\n  color: ",";\n  white-space: nowrap;\n"])),a.theme.space16,a.theme.space8,a.theme.gray800),y=h.default.input(c||(c=n.__makeTemplateObject(["\n  height: ",";\n  box-sizing: border-box;\n  position: relative;\n  padding: 0 ",";\n  outline: none;\n  transition: ",";\n  width: 100%;\n  border-radius: ",";\n  background: ",";\n  border: 0;\n  order: 2;\n  font-weight: 500;\n\n  :-internal-autofill-selected {\n    border-radius: "," 0 0 ",";\n    && + label + div {\n      background-color: #e8f0fe;\n    }\n  }\n  &.has-label {\n    padding: "," 4px "," ",";\n    &.has-input-prefix {\n      padding-left: 0;\n      & + ","::before {\n        margin-left: 0;\n      }\n    }\n  }\n  &:not(.has-label) {\n    ::placeholder {\n      opacity: 0.6;\n    }\n  }\n\n  &.has-value-prefix {\n    padding-left: 8px;\n  }\n\n  ::placeholder {\n    transition: ",";\n    opacity: 0;\n  }\n\n  :focus {\n    outline: none;\n    & + ","::after {\n      box-shadow: ",";\n    }\n  }\n\n  &.has-error + ","::after {\n    box-shadow: ",";\n  }\n\n  &.has-content,\n  &:focus {\n    &::placeholder {\n      opacity: 0.6;\n    }\n    & + ","::before {\n      top: 11px;\n      transform: scale(0.8);\n    }\n  }\n"],["\n  height: ",";\n  box-sizing: border-box;\n  position: relative;\n  padding: 0 ",";\n  outline: none;\n  transition: ",";\n  width: 100%;\n  border-radius: ",";\n  background: ",";\n  border: 0;\n  order: 2;\n  font-weight: 500;\n\n  :-internal-autofill-selected {\n    border-radius: "," 0 0 ",";\n    && + label + div {\n      background-color: #e8f0fe;\n    }\n  }\n  &.has-label {\n    padding: "," 4px "," ",";\n    &.has-input-prefix {\n      padding-left: 0;\n      & + ","::before {\n        margin-left: 0;\n      }\n    }\n  }\n  &:not(.has-label) {\n    ::placeholder {\n      opacity: 0.6;\n    }\n  }\n\n  &.has-value-prefix {\n    padding-left: 8px;\n  }\n\n  ::placeholder {\n    transition: ",";\n    opacity: 0;\n  }\n\n  :focus {\n    outline: none;\n    & + ","::after {\n      box-shadow: ",";\n    }\n  }\n\n  &.has-error + ","::after {\n    box-shadow: ",";\n  }\n\n  &.has-content,\n  &:focus {\n    &::placeholder {\n      opacity: 0.6;\n    }\n    & + ","::before {\n      top: 11px;\n      transform: scale(0.8);\n    }\n  }\n"])),(function(n){return"calc(var(--amino-size-".concat(n.$size,") - 2px)")}),a.theme.space16,a.theme.transition,a.theme.radius6,a.theme.inputBackground,a.theme.radius6,a.theme.radius6,a.theme.space24,a.theme.space8,a.theme.space16,u,a.theme.transition,u,a.theme.glowBlue,u,a.theme.glowError,u),w=h.default.div(f||(f=n.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  background: ",";\n  border-radius: ",";\n\n  &.sm ",".has-label {\n    padding-top: 13px;\n    padding-bottom: 0;\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 2px;\n      }\n    }\n  }\n\n  &.md ",".has-label {\n    padding-top: 20px;\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 6px;\n      }\n    }\n  }\n\n  &.lg ",".has-label {\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 10px;\n      }\n    }\n  }\n  &.xl ",".has-label {\n    padding-bottom: 2px;\n  }\n"],["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  background: ",";\n  border-radius: ",";\n\n  &.sm ",".has-label {\n    padding-top: 13px;\n    padding-bottom: 0;\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 2px;\n      }\n    }\n  }\n\n  &.md ",".has-label {\n    padding-top: 20px;\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 6px;\n      }\n    }\n  }\n\n  &.lg ",".has-label {\n    &:focus,\n    &.has-content {\n      & + ","::before {\n        top: 10px;\n      }\n    }\n  }\n  &.xl ",".has-label {\n    padding-bottom: 2px;\n  }\n"])),a.theme.inputBackground,a.theme.radius6,y,u,y,u,y,u,y),v=t.forwardRef((function(a,r){var i=a.autoFocus,l=a.className,s=a.disabled,d=a.error,p=a.inputMode,c=a.label,f=a.onChange,h=a.onKeyDown,b=a.pattern,v=a.placeholder,_=a.prefix,k=a.readOnly,j=a.required,z=a.size,O=void 0===z?"xl":z,q=a.suffix,T=a.tabIndex,S=a.type,I=a.value,B=a.valuePrefix,M=n.__rest(a,["autoFocus","className","disabled","error","inputMode","label","onChange","onKeyDown","pattern","placeholder","prefix","readOnly","required","size","suffix","tabIndex","type","value","valuePrefix"]),N=t.useMemo((function(){return o.getTestId({componentName:"input",name:c})}),[c]),P=!!_||!!B,F=!!I||!!B;return e.jsxs(w,n.__assign({className:"".concat(l||""," ").concat(O)},{children:[_&&e.jsx(m,{children:_}),B&&e.jsx(g,{children:B}),e.jsx(y,n.__assign({"aria-label":c,className:[d?"has-error":"",c?"has-label":"",F?"has-content":"",_?"has-input-prefix":"",B?"has-value-prefix":""].join(" "),hasPrefix:!!_,hasSuffix:!!q,autoFocus:i,disabled:s,inputMode:p,onChange:f,onKeyDown:h,pattern:b,placeholder:v,readOnly:k,ref:r,required:j,$size:O,tabIndex:T,type:S||"text",value:I||"","data-testid":N},M)),e.jsx(u,{hasPrefix:P,"data-label":c}),q&&e.jsx(x,{children:q})]}))}));exports.FloatLabelInput=v,exports.InputValuePrefix=g;

package/components/input/input-type/_NumberInput.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type FloatLabelInputProps } from './_FloatLabelInput';
+export declare const NumberInput: ({ autoFocus, className, disabled, error, inputMode, label, onChange, onKeyDown, pattern, placeholder, prefix, readOnly, required, suffix, tabIndex, value, ...props }: FloatLabelInputProps) => JSX.Element;