@zonos/amino 4.4.12 → 4.4.15

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

@@ -1,14 +1,14 @@
 import { type ReactNode } from 'react';
 import type { Theme } from "../../types";
 export 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;
+    children: ReactNode;
+    className?: string;
+    label: string;
+    open: boolean;
     themeOverride?: Theme;
+    onClose: () => void;
 };
-export declare const CoverSheet: ({ className, open, label, onClose, children, actionWrapperId, actions, themeOverride, }: CoverSheetProps) => import("react").ReactPortal | null;
+export declare const CoverSheet: ({ actions, actionWrapperId, children, className, label, onClose, open, themeOverride, }: CoverSheetProps) => import("react").ReactPortal | null;

package/components/cover-sheet/CoverSheet.js

@@ -1 +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("../text/Text.js"),s=require("../../icons/RemoveIcon.js"),a=require("../../styles/constants/theme.js"),u=require("../../utils/hooks/useAminoTheme.js"),c=require("styled-components"),d=require("../button/Button.js"),l=require("./CoverSheetActions.js");function h(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.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 m,p,g,b,f,j=h(c),v=j.default(o.motion.div)(m||(m=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  color: ",";\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  color: ",";\n\n  @media print {\n    height: unset;\n    min-height: 100vh;\n    position: absolute;\n  }\n"])),a.theme.pageBackground,a.theme.textColor),x=j.default(d.Button)(p||(p=e.__makeTemplateObject(["\n  margin-right: ",";\n"],["\n  margin-right: ",";\n"])),a.theme.space24),q=j.default(r.Text)(g||(g=e.__makeTemplateObject(["\n  flex-grow: 1;\n"],["\n  flex-grow: 1;\n"]))),_=j.default.header(b||(b=e.__makeTemplateObject(["\n  border-bottom: ",";\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  border-bottom: ",";\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"])),a.theme.border,a.theme.space16,a.theme.space24),y=j.default.div(f||(f=e.__makeTemplateObject(["\n  padding: ",";\n"],["\n  padding: ",";\n"])),a.theme.space24);exports.CoverSheet=function(r){var a=r.className,c=r.open,d=r.label,h=r.onClose,m=r.children,p=r.actionWrapperId,g=void 0===p?"__cover-sheet-actions":p,b=r.actions,f=r.themeOverride,j=u.useAminoTheme().aminoTheme;if(t.useEffect((function(){"undefined"!=typeof document&&document.querySelectorAll("[id='".concat(g,"']")).length>1&&console.error('Duplicate id "'.concat(g,'" detected in "CoverSheet" component. Please set "actionWrapperId" to a unique id.'))}),[g]),t.useEffect((function(){(null===document||void 0===document?void 0:document.body)&&(document.body.style.overflow=c?"hidden":"auto")}),[c]),"undefined"!=typeof document){var k=document.querySelector("body");if(k)return i.createPortal(n.jsx(o.AnimatePresence,{children:c&&n.jsxs(v,e.__assign({className:a,"data-theme":f||j,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(x,{icon:n.jsx(s.RemoveIcon,{size:20}),onClick:h}),n.jsx(q,e.__assign({type:"header"},{children:d})),n.jsx("div",e.__assign({id:g},{children:b&&n.jsx(l.CoverSheetActions,e.__assign({coverSheetActionId:g},{children:b}))}))]}),n.jsx(y,{children:m})]}))}),k)}return null};
+"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("../text/Text.js"),s=require("../../icons/RemoveIcon.js"),a=require("../../styles/constants/theme.js"),c=require("../../utils/hooks/useAminoTheme.js"),u=require("styled-components"),d=require("../button/Button.js"),l=require("./CoverSheetActions.js");function h(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.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 m,p,g,b,f,j=h(u),v=j.default(o.motion.div)(m||(m=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  color: ",";\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  color: ",";\n\n  @media print {\n    height: unset;\n    min-height: 100vh;\n    position: absolute;\n  }\n"])),a.theme.pageBackground,a.theme.textColor),x=j.default(d.Button)(p||(p=e.__makeTemplateObject(["\n  margin-right: ",";\n"],["\n  margin-right: ",";\n"])),a.theme.space24),q=j.default(r.Text)(g||(g=e.__makeTemplateObject(["\n  flex-grow: 1;\n"],["\n  flex-grow: 1;\n"]))),_=j.default.header(b||(b=e.__makeTemplateObject(["\n  border-bottom: ",";\n  padding: "," ",";\n  display: flex;\n  align-items: center;\n  height: 64px;\n  position: sticky;\n  top: 0;\n  z-index: 99;\n  background-color: ",";\n\n  @media print {\n    display: none;\n  }\n"],["\n  border-bottom: ",";\n  padding: "," ",";\n  display: flex;\n  align-items: center;\n  height: 64px;\n  position: sticky;\n  top: 0;\n  z-index: 99;\n  background-color: ",";\n\n  @media print {\n    display: none;\n  }\n"])),a.theme.border,a.theme.space16,a.theme.space24,a.theme.pageBackground),y=j.default.div(f||(f=e.__makeTemplateObject(["\n  padding: ",";\n"],["\n  padding: ",";\n"])),a.theme.space24);exports.CoverSheet=function(r){var a=r.actions,u=r.actionWrapperId,d=void 0===u?"__cover-sheet-actions":u,h=r.children,m=r.className,p=r.label,g=r.onClose,b=r.open,f=r.themeOverride,j=c.useAminoTheme().aminoTheme;if(t.useEffect((function(){"undefined"!=typeof document&&document.querySelectorAll("[id='".concat(d,"']")).length>1&&console.error('Duplicate id "'.concat(d,'" detected in "CoverSheet" component. Please set "actionWrapperId" to a unique id.'))}),[d]),t.useEffect((function(){(null===document||void 0===document?void 0:document.body)&&(document.body.style.overflow=b?"hidden":"auto")}),[b]),"undefined"!=typeof document){var k=document.querySelector("body");if(k)return i.createPortal(n.jsx(o.AnimatePresence,{children:b&&n.jsxs(v,e.__assign({animate:{opacity:1,translateY:0},className:m,"data-theme":f||j,exit:{opacity:0,translateY:5},initial:{opacity:0,translateY:10},transition:{duration:.35,ease:[.4,0,.2,1]}},{children:[n.jsxs(_,{children:[n.jsx(x,{icon:n.jsx(s.RemoveIcon,{size:20}),onClick:g}),n.jsx(q,e.__assign({type:"header"},{children:p})),n.jsx("div",e.__assign({id:d},{children:a&&n.jsx(l.CoverSheetActions,e.__assign({coverSheetActionId:d},{children:a}))}))]}),n.jsx(y,{children:h})]}))}),k)}return null};

package/components/currency/Currency.js

@@ -1 +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":"gray1200"},{children:c})),n.jsx(s.Text,e.__assign({color:u?"red400":"gray700"},{children:i.toUpperCase()}))]}))};
+"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",{currency:i,style:"currency"}).format(r).replace(/[^0-9.-]+/g,""),u=r<0;return n.jsxs(l,e.__assign({className:a},{children:[n.jsx(s.Text,e.__assign({color:u?"red600":"gray1200",type:"label"},{children:c})),n.jsx(s.Text,e.__assign({color:u?"red400":"gray700"},{children:i.toUpperCase()}))]}))};

package/components/currency/DualCurrency.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 type StyledProps = {
-    width?: string;
     isTabular: boolean;
+    width?: string;
 };
 type Props = {
     className?: string;

package/components/currency/DualCurrency.js

@@ -1 +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};
+"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,isTabular:o,width:null==y?void 0:y.toString()},{children:[_(),n.jsx(r.ArrowSwapIcon,{size:12}),x()]})):T||b?_(t):q?x(t):null};

package/components/dialog/Dialog.d.ts

@@ -2,15 +2,8 @@ import { type ReactNode } from 'react';
 import type { Theme } from "../../types/Theme";
 export type DialogProps = {
     actions?: ReactNode;
-    className?: string;
     children: ReactNode;
-    label?: ReactNode;
-    subtitle?: string;
-    leftActions?: ReactNode;
-    onClose: () => void;
-    open: boolean;
-    themeOverride?: Theme;
-    width?: number;
+    className?: string;
     /** Close when clicking outside dialog (on the backdrop)
      * @default true
      */
@@ -19,6 +12,13 @@ export type DialogProps = {
      * @default true
      */
     closeOnEsc?: boolean;
+    label?: ReactNode;
+    leftActions?: ReactNode;
     noBorder?: boolean;
+    open: boolean;
+    subtitle?: string;
+    themeOverride?: Theme;
+    width?: number;
+    onClose: () => void;
 };
 export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/dialog/Dialog.js

@@ -1 +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"),require("../../utils/hooks/useAminoTheme.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.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),u=d.default.div(x||(x=e.__makeTemplateObject(["\n  flex-grow: 1;\n  display: flex;\n"],["\n  flex-grow: 1;\n  display: flex;\n"]))),g=d.default(u)(j||(j=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(u)(y||(y=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,j,y,_,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,u=t.subtitle,k=t.leftActions,v=t.onClose,w=t.open,x=t.themeOverride,j=t.width,y=t.closeOnBlur,_=t.closeOnEsc,T=t.noBorder;return n.jsxs(l.BaseDialog,e.__assign({className:c,"data-theme":x,open:w,width:j,onClose:v,closeOnBlur:y,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})})]}),u&&n.jsx(a.Text,e.__assign({type:"subtitle"},{children:u}))]}),n.jsx(O,e.__assign({ref:i},{children:s})),(o||k)&&n.jsxs(b,{children:[k&&n.jsx(g,{children:k}),o&&n.jsx(f,{children:o})]})]}))}));exports.Dialog=z;
+"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"),require("../../utils/hooks/useAminoTheme.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.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),u=d.default.div(x||(x=e.__makeTemplateObject(["\n  flex-grow: 1;\n  display: flex;\n"],["\n  flex-grow: 1;\n  display: flex;\n"]))),g=d.default(u)(j||(j=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(u)(y||(y=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,j,y,_,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.closeOnBlur,u=t.closeOnEsc,k=t.label,v=t.leftActions,w=t.noBorder,x=t.onClose,j=t.open,y=t.subtitle,_=t.themeOverride,T=t.width;return n.jsxs(l.BaseDialog,e.__assign({className:c,closeOnBlur:d,closeOnEsc:u,"data-theme":_,noBorder:w,onClose:x,open:j,width:T},{children:[n.jsxs(h,{children:[n.jsxs(m,{children:[n.jsx(a.Text,e.__assign({type:"title"},{children:k})),n.jsx(p,{icon:n.jsx(r.RemoveCircleDuotoneIcon,{size:24}),noRipple:!0,onClick:x})]}),y&&n.jsx(a.Text,e.__assign({type:"subtitle"},{children:y}))]}),n.jsx(O,e.__assign({ref:i},{children:s})),(o||v)&&n.jsxs(b,{children:[v&&n.jsx(g,{children:v}),o&&n.jsx(f,{children:o})]})]}))}));exports.Dialog=z;

package/components/dialog/_BaseDialog.d.ts

@@ -3,12 +3,12 @@ import type { Theme } from "../../types/Theme";
 export type BaseDialogProps = {
     children: ReactNode;
     className?: string;
+    closeOnBlur?: boolean;
+    closeOnEsc?: boolean;
+    noBorder?: boolean;
     open: boolean;
     themeOverride?: Theme;
     width?: number;
     onClose?: () => void;
-    closeOnBlur?: boolean;
-    closeOnEsc?: boolean;
-    noBorder?: boolean;
 };
-export declare const BaseDialog: ({ children, className, open, themeOverride, width, onClose, closeOnBlur, closeOnEsc, noBorder, }: BaseDialogProps) => React.ReactPortal | null;
+export declare const BaseDialog: ({ children, className, closeOnBlur, closeOnEsc, noBorder, onClose, open, themeOverride, width, }: BaseDialogProps) => React.ReactPortal | null;

package/components/dialog/_BaseDialog.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),o=require("react"),t=require("react-dom"),i=require("framer-motion"),r=require("../backdrop/Backdrop.js"),a=require("../../styles/constants/theme.js"),d=require("../../utils/hooks/useAminoTheme.js"),s=require("styled-components");function l(e){return e&&e.__esModule?e:{default:e}}require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.js");var u,c,h=l(s),m=h.default.div(u||(u=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),f=h.default(i.motion.div)(c||(c=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(a){var s=a.children,l=a.className,u=a.open,c=a.themeOverride,h=a.width,p=a.onClose,x=a.closeOnBlur,v=void 0===x||x,y=a.closeOnEsc,b=void 0===y||y,w=a.noBorder,g=void 0!==w&&w,j=d.useAminoTheme().aminoTheme,k=o.useRef(null);return o.useEffect((function(){var e,n;(null===(e=k.current)||void 0===e?void 0:e.contains(document.activeElement))||null===(n=k.current)||void 0===n||n.focus(),(null===document||void 0===document?void 0:document.body)&&(document.body.style.overflow=u?"hidden":"auto")}),[u]),"undefined"!=typeof document?t.createPortal(n.jsxs(i.AnimatePresence,{children:[u&&n.jsx(r.Backdrop,{initial:{opacity:0},animate:{opacity:.65},exit:{opacity:0},transition:{duration:.3},"data-theme":c||j},"dialog-backdrop"),u&&n.jsx(m,e.__assign({"data-theme":c||j,onClick:function(){return p&&v&&p()},onKeyDown:function(e){p&&b&&"Escape"===e.key&&p()},tabIndex:-1},{children:n.jsx(f,e.__assign({className:l,transition:{ease:[.4,0,.2,1],duration:.3},initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},width:h||444,noBorder:g,onClick:function(e){e.stopPropagation()}},{children:s}),"dialog")}))]}),document.querySelector("body")):null};
+"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),o=require("react"),t=require("react-dom"),i=require("framer-motion"),r=require("../backdrop/Backdrop.js"),a=require("../../styles/constants/theme.js"),d=require("../../utils/hooks/useAminoTheme.js"),s=require("styled-components");function l(e){return e&&e.__esModule?e:{default:e}}require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.js");var u,c,h=l(s),m=h.default.div(u||(u=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),f=h.default(i.motion.div)(c||(c=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(a){var s=a.children,l=a.className,u=a.closeOnBlur,c=void 0===u||u,h=a.closeOnEsc,p=void 0===h||h,x=a.noBorder,v=void 0!==x&&x,y=a.onClose,b=a.open,w=a.themeOverride,g=a.width,j=d.useAminoTheme().aminoTheme,k=o.useRef(null);return o.useEffect((function(){var e,n;(null===(e=k.current)||void 0===e?void 0:e.contains(document.activeElement))||null===(n=k.current)||void 0===n||n.focus(),(null===document||void 0===document?void 0:document.body)&&(document.body.style.overflow=b?"hidden":"auto")}),[b]),"undefined"!=typeof document?t.createPortal(n.jsxs(i.AnimatePresence,{children:[b&&n.jsx(r.Backdrop,{animate:{opacity:.65},"data-theme":w||j,exit:{opacity:0},initial:{opacity:0},transition:{duration:.3}},"dialog-backdrop"),b&&n.jsx(m,e.__assign({"data-theme":w||j,onClick:function(){return y&&c&&y()},onKeyDown:function(e){y&&p&&"Escape"===e.key&&y()},tabIndex:-1},{children:n.jsx(f,e.__assign({animate:{opacity:1,scale:1},className:l,exit:{opacity:0,scale:.95},initial:{opacity:0,scale:.95},noBorder:v,onClick:function(e){e.stopPropagation()},transition:{duration:.3,ease:[.4,0,.2,1]},width:g||444},{children:s}),"dialog")}))]}),document.querySelector("body")):null};

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

@@ -3,18 +3,25 @@ import { type DropzoneOptions } from 'react-dropzone';
 import { type UploadedFile } from "../../types/UploadedFile";
 export type DropZoneProps = {
     className?: string;
-    dropzoneOptions: Omit<DropzoneOptions, 'disabled'>;
     /**
      * This `disabled` state only applies when no file is selected
      * @default false
      * */
     disabled?: boolean;
+    dropzoneOptions: Omit<DropzoneOptions, 'disabled'>;
+    error?: boolean;
     helpText?: string;
     /**
      * Text to display in empty state
      * @default 'Drop your file(s) here'
      * */
     instructionText?: string;
+    loading?: boolean;
+    /**
+     * Text to show while loading state is active
+     * @default 'Uploading file(s)...''
+     */
+    loadingText?: string;
     /**
      * Whether to show the icon in file upload
      * @default false
@@ -24,12 +31,5 @@ export type DropZoneProps = {
     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;
+export declare const DropZone: ({ className, disabled, dropzoneOptions, error, helpText, instructionText, loading, loadingText, noIcon, onRemoveFile, uploadedFiles, }: DropZoneProps) => JSX.Element;

package/components/drop-zone/DropZone.js

@@ -1 +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:"gray1200"},{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)}))})]})}))};
+"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.disabled,p=void 0!==s&&s,m=a.dropzoneOptions,x=a.error,f=void 0!==x&&x,g=a.helpText,h=a.instructionText,j=void 0===h?"Drop your file(s) here":h,_=a.loading,b=a.loadingText,y=void 0===b?"Uploading file(s)...":b,v=a.noIcon,C=void 0!==v&&v,w=a.onRemoveFile,B=a.uploadedFiles,U=m.maxFiles||0,N=i.useDropzone(e.__assign(e.__assign({},m),{disabled:p,noClick:!0,noKeyboard:!0})),P=N.getInputProps,S=N.getRootProps,G=N.open,K=0!==U&&B.length>=U;return n.jsx(T,e.__assign({className:l,disabled:p},{children:_?n.jsx(q,{children:n.jsxs(k,{children:[n.jsx(c.Spinner,{}),n.jsx(d.Text,e.__assign({color:"gray800",type:"label"},{children:y}))]})}):n.jsxs(n.Fragment,{children:[!K&&n.jsx(q,e.__assign({error:f},{children:n.jsxs(k,e.__assign({},S(),{role:void 0},{children:[n.jsx("input",e.__assign({},P())),!C&&n.jsx(u.Thumbnail,{icon:n.jsx(t.FileUploadDuotoneIcon,{}),size:40}),n.jsxs(O,{children:[n.jsxs(d.Text,e.__assign({type:"label"},{children:[j," or"," ",n.jsx(D,e.__assign({disabled:p,onClick:G,type:"button"},{children:n.jsx(d.Text,e.__assign({color:"blue600",type:"label"},{children:"browse"}))}))]})),g&&n.jsx(d.Text,e.__assign({type:"caption"},{children:g}))]})]}))})),!!B.length&&n.jsx(F,{children:B.map((function(i,t){return n.jsxs(z,{children:[n.jsx(r.FileDuotoneIcon,{}),n.jsxs(R,{children:[n.jsx(d.Text,e.__assign({color:"gray1200",type:"label"},{children:i.name})),i.size&&n.jsx(d.Text,e.__assign({color:"gray700",type:"caption"},{children:i.size}))]}),w&&n.jsx(I,e.__assign({onClick:function(){return w(t)}},{children:n.jsx(o.RemoveCircleDuotoneIcon,{size:20})}))]},i.name)}))})]})}))};

package/components/emoji/Emoji.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-fe391a2e.js"),t=require("react/jsx-runtime"),i=require("../../utils/emojiFileNames.js");function n(e){return e&&e.__esModule?e:{default:e}}var r,o=n(require("styled-components")).default.img(r||(r=e.__makeTemplateObject(["\n  vertical-align: text-top;\n  height: 20px;\n  width: auto;\n  display: inline-block;\n"],["\n  vertical-align: text-top;\n  height: 20px;\n  width: auto;\n  display: inline-block;\n"])));exports.Emoji=function(e){var n=e.code,r=i.emojiFileNames.find((function(e){var t=e.emoji;return n===t}));if(r){var a="".concat(r.emoji," ").concat("Attribution for Twitter Emojis: ©️ Twitter, Inc.");return t.jsx(o,{src:"/emojis/".concat(r.fileName),alt:a})}return console.warn("We do not have an image for ".concat(n)),t.jsx("span",{children:n})};
+"use strict";var e=require("../../_tslib-fe391a2e.js"),t=require("react/jsx-runtime"),i=require("../../utils/emojiFileNames.js");function n(e){return e&&e.__esModule?e:{default:e}}var r,o=n(require("styled-components")).default.img(r||(r=e.__makeTemplateObject(["\n  vertical-align: text-top;\n  height: 20px;\n  width: auto;\n  display: inline-block;\n"],["\n  vertical-align: text-top;\n  height: 20px;\n  width: auto;\n  display: inline-block;\n"])));exports.Emoji=function(e){var n=e.code,r=i.emojiFileNames.find((function(e){var t=e.emoji;return n===t}));if(r){var a="".concat(r.emoji," ").concat("Attribution for Twitter Emojis: ©️ Twitter, Inc.");return t.jsx(o,{alt:a,src:"/emojis/".concat(r.fileName)})}return console.warn("We do not have an image for ".concat(n)),t.jsx("span",{children:n})};

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

@@ -3,29 +3,29 @@ import { type DropzoneOptions } from 'react-dropzone';
 import type { UploadedFile } from "../../types/UploadedFile";
 export type FileUploadProps = {
     className?: string;
-    dropzoneOptions: Omit<DropzoneOptions, 'disabled' | 'multiple'>;
     /**
      * This `disabled` state only applies when no file is selected
      * @default false
      * */
     disabled?: boolean;
+    dropzoneOptions: Omit<DropzoneOptions, 'disabled' | 'multiple'>;
     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;
+    /** Display file info if uploaded file property has data */
+    uploadedFile: UploadedFile | null;
+    onRemoveFile?: () => void;
 };
 /**
  * Single file input
  */
-export declare const FileUpload: ({ className, dropzoneOptions, disabled, error, onRemoveFile, uploadedFile, instructionText, loading, loadingText, }: FileUploadProps) => JSX.Element;
+export declare const FileUpload: ({ className, disabled, dropzoneOptions, error, instructionText, loading, loadingText, onRemoveFile, uploadedFile, }: FileUploadProps) => JSX.Element;

package/components/file-upload/FileUpload.js

@@ -1 +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:"gray1200"},{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})}))]}))};
+"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.disabled,c=void 0!==l&&l,d=i.dropzoneOptions,u=i.error,p=void 0!==u&&u,f=i.instructionText,g=void 0===f?"or drag your file here":f,j=i.loading,b=i.loadingText,v=void 0===b?"Uploading...":b,q=i.onRemoveFile,T=i.uploadedFile,k=t.useDropzone(n.__assign(n.__assign({},d),{disabled:c,multiple:!1,noClick:!0,noKeyboard:!0})),C=k.getInputProps,R=k.getRootProps,O=k.open,z=function(){return j?e.jsx(r.Text,{children:v}):T?function(){if(T){var t=T.name,o=T.size;return e.jsxs(y,{children:[e.jsx(r.Text,n.__assign({color:"gray1200",type:"label"},{children:t})),o&&e.jsx(r.Text,n.__assign({color:"gray700",type:"caption"},{children:o}))]})}return null}():e.jsx(r.Text,n.__assign({color:"gray600"},{children:g}))};return e.jsxs(m,n.__assign({className:a,disabled:c,error:p},{children:[e.jsxs(x,n.__assign({},R(),{children:[e.jsx("input",n.__assign({},C())),e.jsxs(h,{children:[e.jsx(s.Button,n.__assign({loading:j,onClick:O,spinnerColor:"black"},{children:"Browse"})),z()]})]})),q&&T&&e.jsx(_,n.__assign({onClick:function(){return q()}},{children:e.jsx(o.RemoveCircleDuotoneIcon,{size:20})}))]}))};

package/components/graph-matrix/GraphMatrix.d.ts

@@ -9,9 +9,6 @@ type GraphMatrixProps = {
      */
     fetcher?: HandleFetchFetcher;
     loadingComponent?: ReactNode;
-    onEditQuery: (query: string) => void;
-    onEditVariables: (variables: string) => void;
-    onResultData?: (data: GraphiqlExecutionResult<ExecutionResultType> | null) => void;
     query: string;
     schema: GraphQLSchema | null;
     /**
@@ -21,6 +18,9 @@ type GraphMatrixProps = {
     schemaName: string;
     url: string;
     variables: string;
+    onEditQuery: (query: string) => void;
+    onEditVariables: (variables: string) => void;
+    onResultData?: (data: GraphiqlExecutionResult<ExecutionResultType> | null) => void;
 };
 export declare const GraphMatrix: {
     ({ customToolbar, fetcher, loadingComponent, onEditQuery, onEditVariables, onResultData, query, schema, schemaName, url, variables, }: GraphMatrixProps): JSX.Element;

package/components/graph-matrix/GraphMatrix.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),t=require("react"),i=require("@graphiql/react"),n=require("graphiql");require("graphql");var s=require("../../icons/EyeIcon.js"),a=require("../../icons/EyeOffIcon.js"),o=require("../../styles/constants/theme.js"),l=require("../../utils/hooks/_useGraphiqlExplorer.js"),u=require("../../utils/hooks/_useGraphiqlFetcher.js"),c=require("../../utils/hooks/_useGraphiqlStorage.js"),h=require("styled-components"),p=require("../nested-data-table/NestedDataTable.js"),q=require("../split-panel/SplitPanel.js"),d=require("./_GraphiqlContextWrapper.js"),j=require("./_LoadingIcon.js");function g(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("@graphiql/plugin-explorer"),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("../button/Button.js"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../rest-state/RestState.js"),require("../text/Text.js"),require("../nested-data-table/_TableData.js"),require("../../icons/ChevronRightCircleIcon.js"),require("../../utils/flattenRow.js"),require("../../utils/setupNestedData.js"),require("../../utils/truncateText.js"),require("../pivot-table/PivotTable.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("../tooltip/Tooltip.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../stack/VStack.js"),require("../stack/Stack.js"),require("../../utils/hooks/useAminoTheme.js"),require("../nested-data-table/_Filter.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react-dom"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js"),require("react-split-it"),require("../../icons/custom/ZonosLogoIcon.js");var m,b,x,_=g(h),v=_.default.div(m||(m=e.__makeTemplateObject(["\n  height: 100%;\n  .graphiql-tab > .graphiql-tab-button {\n    outline: none;\n  }\n  .docExplorerWrap {\n    /* Built-in plugin height is set to 100% which prevents the plugin bar scrolling */\n    height: auto !important;\n    /* Don't cap explorer width */\n    width: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n\n  .graphiql-explorer-root > div {\n    overflow: auto !important;\n  }\n"],["\n  height: 100%;\n  .graphiql-tab > .graphiql-tab-button {\n    outline: none;\n  }\n  .docExplorerWrap {\n    /* Built-in plugin height is set to 100% which prevents the plugin bar scrolling */\n    height: auto !important;\n    /* Don't cap explorer width */\n    width: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n\n  .graphiql-explorer-root > div {\n    overflow: auto !important;\n  }\n"]))),f=_.default.div(b||(b=e.__makeTemplateObject(["\n  height: 100%;\n"],["\n  height: 100%;\n"]))),S=_.default.div(x||(x=e.__makeTemplateObject(["\n  height: 100vh;\n  overflow: auto;\n  padding: 0 ",";\n  display: flex;\n  flex-direction: column;\n"],["\n  height: 100vh;\n  overflow: auto;\n  padding: 0 ",";\n  display: flex;\n  flex-direction: column;\n"])),o.theme.space12),k=function(o){var h=o.customToolbar,g=o.fetcher,m=o.loadingComponent,b=o.onEditQuery,x=o.onEditVariables,_=o.onResultData,k=o.query,y=void 0===k?"":k,C=o.schema,E=o.schemaName,I=o.url,T=o.variables,w=void 0===T?"":T,F=e.__read(t.useState(null),2),D=F[0],G=F[1],R=e.__read(t.useState(null),2)[1],B=e.__read(t.useState(!1),2),O=B[0],L=B[1],N=e.__read(t.useState("first-time"),1)[0],A=e.__read(t.useState(!1),2),Q=A[0],W=A[1],M=e.__read(t.useState([1,0]),2),P=M[0],V=M[1],z=e.__read(t.useState(""),2),H=z[0],K=z[1],U=u.useGraphiqlFetcher({cachingKey:N,url:I,query:y,customFetcher:g||null,operationName:H}),Z=U.graphiqlFetcher,J=U.resultData,X=U.isLoading,Y=c.useGraphiqlStorage({defaultSchema:E});t.useEffect((function(){L(!!(null==D?void 0:D.isFetching)||X)}),[null==D?void 0:D.isFetching,L,X]),t.useEffect((function(){J&&_&&_(J)}),[_,J]);var $=l.useGraphiqlExplorer({onEdit:b,query:y});if(!C)return r.jsx(r.Fragment,{children:m||r.jsx(j.Loading,{})});var ee,re;return r.jsx(v,{children:r.jsxs(q.SplitPanel,e.__assign({sizes:P,onSetSizes:V,collapseAll:!Q},{children:[r.jsx(f,{children:r.jsx(n.GraphiQL,e.__assign({fetcher:Z,onEditOperationName:K,onEditQuery:b,onEditVariables:x,plugins:[$],query:y,variables:w,schema:C,toolbar:{additionalContent:r.jsxs(r.Fragment,{children:[r.jsx(i.ToolbarButton,e.__assign({label:Q?"Hide table":"Show table",onClick:function(){return W(!Q)}},{children:Q?r.jsx(a.EyeOffIcon,{color:"red600"}):r.jsx(s.EyeIcon,{color:"gray400"})})),h]})},storage:Y},{children:r.jsx(d.GraphiqlContextWrapper,e.__assign({setExecutionContext:G,setResponseEditorContext:R},{children:r.jsx(n.GraphiQL.Footer,{})}))}))}),(ee=null!==J?J.data:J,re=ee?Object.entries(ee):null,re?r.jsx(S,{children:re.map((function(t){var i=e.__read(t,2),n=i[0],s=i[1];return Array.isArray(s)||s?r.jsx(p.NestedDataTable,{isFetching:O,tableData:s,title:n},n):null}))}):null)]}))})};k.ToolbarButton=i.ToolbarButton,exports.GraphMatrix=k;
+"use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),t=require("react"),i=require("@graphiql/react"),n=require("graphiql");require("graphql");var s=require("../../icons/EyeIcon.js"),a=require("../../icons/EyeOffIcon.js"),o=require("../../styles/constants/theme.js"),u=require("../../utils/hooks/_useGraphiqlExplorer.js"),l=require("../../utils/hooks/_useGraphiqlFetcher.js"),c=require("../../utils/hooks/_useGraphiqlStorage.js"),h=require("styled-components"),p=require("../nested-data-table/NestedDataTable.js"),q=require("../split-panel/SplitPanel.js"),d=require("./_GraphiqlContextWrapper.js"),j=require("./_LoadingIcon.js");function g(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("@graphiql/plugin-explorer"),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("../button/Button.js"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../rest-state/RestState.js"),require("../text/Text.js"),require("../nested-data-table/_TableData.js"),require("../../icons/ChevronRightCircleIcon.js"),require("../../utils/flattenRow.js"),require("../../utils/setupNestedData.js"),require("../../utils/truncateText.js"),require("../pivot-table/PivotTable.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("../tooltip/Tooltip.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../stack/VStack.js"),require("../stack/Stack.js"),require("../../utils/hooks/useAminoTheme.js"),require("../nested-data-table/_Filter.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react-dom"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js"),require("react-split-it"),require("../../icons/custom/ZonosLogoIcon.js");var m,b,_,x=g(h),f=x.default.div(m||(m=e.__makeTemplateObject(["\n  height: 100%;\n  .graphiql-tab > .graphiql-tab-button {\n    outline: none;\n  }\n  .docExplorerWrap {\n    /* Built-in plugin height is set to 100% which prevents the plugin bar scrolling */\n    height: auto !important;\n    /* Don't cap explorer width */\n    width: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n\n  .graphiql-explorer-root > div {\n    overflow: auto !important;\n  }\n"],["\n  height: 100%;\n  .graphiql-tab > .graphiql-tab-button {\n    outline: none;\n  }\n  .docExplorerWrap {\n    /* Built-in plugin height is set to 100% which prevents the plugin bar scrolling */\n    height: auto !important;\n    /* Don't cap explorer width */\n    width: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n\n  .graphiql-explorer-root > div {\n    overflow: auto !important;\n  }\n"]))),v=x.default.div(b||(b=e.__makeTemplateObject(["\n  height: 100%;\n"],["\n  height: 100%;\n"]))),S=x.default.div(_||(_=e.__makeTemplateObject(["\n  height: 100vh;\n  overflow: auto;\n  padding: 0 ",";\n  display: flex;\n  flex-direction: column;\n"],["\n  height: 100vh;\n  overflow: auto;\n  padding: 0 ",";\n  display: flex;\n  flex-direction: column;\n"])),o.theme.space12),k=function(o){var h=o.customToolbar,g=o.fetcher,m=o.loadingComponent,b=o.onEditQuery,_=o.onEditVariables,x=o.onResultData,k=o.query,y=void 0===k?"":k,C=o.schema,E=o.schemaName,I=o.url,T=o.variables,w=void 0===T?"":T,F=e.__read(t.useState(null),2),D=F[0],G=F[1],R=e.__read(t.useState(null),2)[1],B=e.__read(t.useState(!1),2),O=B[0],L=B[1],N=e.__read(t.useState("first-time"),1)[0],A=e.__read(t.useState(!1),2),Q=A[0],W=A[1],M=e.__read(t.useState([1,0]),2),P=M[0],V=M[1],z=e.__read(t.useState(!1),2),H=z[0],K=z[1],U=e.__read(t.useState(""),2),Z=U[0],J=U[1],X=l.useGraphiqlFetcher({cachingKey:N,customFetcher:g||null,operationName:Z,query:y,url:I}),Y=X.graphiqlFetcher,$=X.isLoading,ee=X.resultData,re=c.useGraphiqlStorage({defaultSchema:E});t.useEffect((function(){K(!0)}),[]),t.useEffect((function(){L(!!(null==D?void 0:D.isFetching)||$)}),[null==D?void 0:D.isFetching,L,$]),t.useEffect((function(){ee&&x&&x(ee)}),[x,ee]);var te=u.useGraphiqlExplorer({onEdit:b,query:y});if(!C)return r.jsx(r.Fragment,{children:m||r.jsx(j.Loading,{})});var ie,ne;return r.jsx(f,{children:r.jsxs(q.SplitPanel,e.__assign({collapseAll:!Q,onSetSizes:V,sizes:P},{children:[r.jsx(v,{children:H&&r.jsx(n.GraphiQL,e.__assign({fetcher:Y,onEditOperationName:J,onEditQuery:b,onEditVariables:_,plugins:[te],query:y,schema:C,storage:re,toolbar:{additionalContent:r.jsxs(r.Fragment,{children:[r.jsx(i.ToolbarButton,e.__assign({label:Q?"Hide table":"Show table",onClick:function(){return W(!Q)}},{children:Q?r.jsx(a.EyeOffIcon,{color:"red600"}):r.jsx(s.EyeIcon,{color:"gray400"})})),h]})},variables:w},{children:r.jsx(d.GraphiqlContextWrapper,e.__assign({setExecutionContext:G,setResponseEditorContext:R},{children:r.jsx(n.GraphiQL.Footer,{})}))}))}),(ie=null!==ee?ee.data:ee,ne=ie?Object.entries(ie):null,ne?r.jsx(S,{children:ne.map((function(t){var i=e.__read(t,2),n=i[0],s=i[1];return Array.isArray(s)||s?r.jsx(p.NestedDataTable,{isFetching:O,tableData:s,title:n},n):null}))}):null)]}))})};k.ToolbarButton=i.ToolbarButton,exports.GraphMatrix=k;

package/components/help-text/HelpText.js

@@ -1 +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};
+"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({color:"red700",type:"caption"},{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

@@ -8,12 +8,12 @@ type DateInputEventHandler = (e: Omit<ChangeEvent<HTMLInputElement>, 'target'> &
     };
 }) => void;
 type InputType<T extends HTMLInputTypeAttribute> = {
+    inputPrefix?: ReactNode;
+    inputSuffix?: ReactNode;
+    onChange: T extends 'date' ? DateInputEventHandler : ChangeEventHandler<HTMLInputElement>;
     /** 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 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 declare const Input: <T extends string>({ autoFocus, className, disabled, error, helpText, inputMode, inputPrefix, inputSuffix, label, onChange, onKeyDown, pattern, placeholder, prefix, readOnly, required, size, suffix, tabIndex, type, value, valuePrefix, width, ...props }: InputProps<T>) => JSX.Element;
 export {};

package/components/input/Input.js

@@ -1 +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})]}))};
+"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.size,T=n.suffix,D=n.tabIndex,N=n.type,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","size","suffix","tabIndex","type","value","valuePrefix","width"]);return r.jsxs(b,e.__assign({className:"amino-input-wrapper ".concat(p?"disabled":""),width:M},{children:[r.jsx(f,{children:function(){switch(N){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,size:P,suffix:T||j,tabIndex:D,value:O||"",valuePrefix:F},z));case"date":case"datetime-local":return r.jsx(t.DateInput,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,size:P,suffix:T||j,tabIndex:D,type: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,size:P,suffix:T||j,tabIndex:D,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,size:P,suffix:T||j,tabIndex:D,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,size:P,suffix:T||j,tabIndex:D,type:N,value:O||"",valuePrefix:F},z))}}()}),r.jsx(a.HelpText,{error:c,helpText:x})]}))};

package/components/input/SearchInput.d.ts

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

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

@@ -1 +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))}))};
+"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({ref:I,"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,required:_,suffix:v||n.jsx(f,{children:n.jsx(x,e.__assign({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}))},type:"button"},{children:n.jsx(a.CalendarIcon,{size:20})}))}),tabIndex:j,type:"date",value:y},q))}))};