@zonos/amino 5.0.2 → 5.0.3

package/components/dialog/_BaseDialog.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-ccfac372.js"),n=require("react/jsx-runtime"),t=require("react"),o=require("react-dom"),i=require("framer-motion"),r=require("styled-components"),a=require("../backdrop/Backdrop.js"),d=require("../../styles/constants/theme.js"),u=require("../../utils/hooks/useAminoTheme.js");function s(e){return e&&e.__esModule?e:{default:e}}require("zod"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useStorage.js"),require("../../utils/hooks/useSwr.js");var l,c,h=s(r),m=h.default.div(l||(l=e.__makeTemplateObject(["\n  width: 100vw;\n  height: 100vh;\n  left: 0;\n  top: 0;\n  z-index: 1000;\n  position: fixed;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: ",";\n"],["\n  width: 100vw;\n  height: 100vh;\n  left: 0;\n  top: 0;\n  z-index: 1000;\n  position: fixed;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: ",";\n"])),d.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"])),d.theme.surfaceColor,(function(e){return e.width}),d.theme.radius12,d.theme.v3ShadowXxl,(function(e){return!e.noBorder&&d.theme.border}));exports.BaseDialog=function(e){var r=e.children,d=e.className,s=e.closeOnBlur,l=void 0===s||s,c=e.closeOnEsc,h=void 0===c||c,p=e.noBorder,x=void 0!==p&&p,v=e.onClose,y=e.open,w=e.themeOverride,b=e.width,g=u.useAminoTheme().aminoTheme,j=t.useRef(null),q=t.useRef(null),k=t.useRef(null);return t.useEffect((function(){var e,n;(null===(e=q.current)||void 0===e?void 0:e.contains(document.activeElement))||null===(n=q.current)||void 0===n||n.focus(),(null===document||void 0===document?void 0:document.body)&&(document.body.style.overflow=y?"hidden":"auto")}),[y]),"undefined"!=typeof document?o.createPortal(n.jsx(i.AnimatePresence,{children:y&&n.jsxs(n.Fragment,{children:[n.jsx(a.Backdrop,{ref:q,animate:{opacity:.65},"data-theme":w||g,exit:{opacity:0},initial:{opacity:0},transition:{duration:.3}},"dialog-backdrop"),n.jsx(m,{ref:k,"data-theme":w||g,onKeyDown:function(e){v&&h&&"Escape"===e.key&&v()},onMouseDown:function(e){j.current=e.target},onMouseUp:function(e){var n=e.target===j.current,t=v&&l&&e.target===k.current;n&&t&&v(),j.current=null},tabIndex:-1,children:n.jsx(f,{animate:{opacity:1,scale:1},className:d,exit:{opacity:0,scale:.95},initial:{opacity:0,scale:.95},noBorder:x,onClick:function(e){e.stopPropagation()},transition:{duration:.3,ease:[.4,0,.2,1]},width:b||444,children:r},"dialog")})]})}),document.querySelector("body")):null};
+"use strict";var e=require("../../_tslib-ccfac372.js"),n=require("react/jsx-runtime"),t=require("react"),o=require("react-dom"),i=require("framer-motion"),r=require("styled-components"),a=require("../backdrop/Backdrop.js"),d=require("../../styles/constants/theme.js"),u=require("../../utils/hooks/useAminoTheme.js");function s(e){return e&&e.__esModule?e:{default:e}}require("zod"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useStorage.js"),require("../../utils/hooks/useSwr.js");var l,c,h=s(r),m=h.default.div(l||(l=e.__makeTemplateObject(["\n  width: 100vw;\n  height: 100vh;\n  left: 0;\n  top: 0;\n  z-index: 1000;\n  position: fixed;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: ",";\n"],["\n  width: 100vw;\n  height: 100vh;\n  left: 0;\n  top: 0;\n  z-index: 1000;\n  position: fixed;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: ",";\n"])),d.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"])),d.theme.surfaceColor,(function(e){return e.width}),d.theme.radius12,d.theme.v3ShadowXxl,(function(e){return!e.noBorder&&d.theme.border}));exports.BaseDialog=function(e){var r=e.children,d=e.className,s=e.closeOnBlur,l=void 0===s||s,c=e.closeOnEsc,h=void 0===c||c,p=e.noBorder,v=void 0!==p&&p,x=e.onClose,y=e.open,w=e.themeOverride,b=e.width,g=u.useAminoTheme().aminoTheme,j=t.useRef(null),q=t.useRef(null),k=t.useRef(null);return t.useEffect((function(){var e,n;(null===(e=q.current)||void 0===e?void 0:e.contains(document.activeElement))||null===(n=q.current)||void 0===n||n.focus(),(null===document||void 0===document?void 0:document.body)&&(document.body.style.overflow=y?"hidden":"auto")}),[y]),"undefined"!=typeof document?o.createPortal(n.jsx(i.AnimatePresence,{children:y&&n.jsxs(n.Fragment,{children:[n.jsx(a.Backdrop,{ref:q,animate:{opacity:.65},"data-theme":w||g,exit:{opacity:0},initial:{opacity:0},transition:{duration:.3}},"dialog-backdrop"),n.jsx(m,{ref:k,"data-theme":w||g,onKeyDown:function(e){x&&h&&"Escape"===e.key&&x()},onMouseDown:function(e){j.current=e.target},onMouseUp:function(e){var n=e.target===j.current,t=x&&l&&e.target===k.current;n&&t&&x(),j.current=null},tabIndex:-1,children:n.jsx(f,{animate:{opacity:1,scale:1},className:[d||"","elevated"].join(" "),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:b||444,children:r},"dialog")})]})}),document.querySelector("body")):null};

package/components/input/SearchInput.d.ts

@@ -1,6 +1,6 @@
-import type { ChangeEventHandler, KeyboardEventHandler } from 'react';
+import { type ChangeEventHandler, type ComponentPropsWithRef, type KeyboardEventHandler } from 'react';
 import type { InputMode } from './input-type/_FloatLabelInput';
-export type InputProps = {
+export type InputProps = Omit<ComponentPropsWithRef<'input'>, 'onChange'> & {
     autoFocus?: boolean;
     className?: string;
     disabled?: boolean;
@@ -19,4 +19,4 @@ export type InputProps = {
     /** 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) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/components/input/SearchInput.js

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

package/components/layout/Layout.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-ccfac372.js"),n=require("react/jsx-runtime"),r=require("styled-components"),t=require("../input/SearchInput.js"),o=require("../../styles/constants/theme.js");function i(e){return e&&e.__esModule?e:{default:e}}require("./NavigationGroup.js"),require("../../icons/SearchIcon.js"),require("react"),require("../../icons/icon-base/_IconBase.js"),require("../collapse/Collapse.js");var a,d,h,l,s,b,c,m,g,p,u=i(r),x=u.default.div(a||(a=e.__makeTemplateObject(["\n  box-sizing: border-box;\n  width: ",";\n"],["\n  box-sizing: border-box;\n  width: ",";\n"])),o.theme.sidebarWidth),f=u.default.div(d||(d=e.__makeTemplateObject(["\n  padding: ",";\n  box-sizing: border-box;\n  overflow-y: auto;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n"],["\n  padding: ",";\n  box-sizing: border-box;\n  overflow-y: auto;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n"])),o.theme.space16),j=u.default.div(h||(h=e.__makeTemplateObject(["\n  margin-bottom: ",";\n"],["\n  margin-bottom: ",";\n"])),o.theme.space40),v=u.default.div(l||(l=e.__makeTemplateObject(["\n  margin-bottom: ",";\n"],["\n  margin-bottom: ",";\n"])),o.theme.space24),_=u.default(t.SearchInput)(s||(s=e.__makeTemplateObject(["\n  border: 0;\n  svg {\n    color: ",";\n  }\n  input {\n    background-color: ",";\n    border: 0;\n    ::placeholder {\n      color: ",";\n    }\n  }\n"],["\n  border: 0;\n  svg {\n    color: ",";\n  }\n  input {\n    background-color: ",";\n    border: 0;\n    ::placeholder {\n      color: ",";\n    }\n  }\n"])),o.theme.gray1200,o.theme.gray100,o.theme.gray1200),y=u.default.nav(b||(b=e.__makeTemplateObject(["\n  border-right: ",";\n  width: ",";\n  box-sizing: border-box;\n  display: grid;\n  grid-template-rows: 1fr calc(39px + "," * 2);\n  height: inherit;\n  background: ",";\n"],["\n  border-right: ",";\n  width: ",";\n  box-sizing: border-box;\n  display: grid;\n  grid-template-rows: 1fr calc(39px + "," * 2);\n  height: inherit;\n  background: ",";\n"])),o.theme.border,o.theme.sidebarWidth,o.theme.space24,o.theme.sidebarColor),k=u.default.div(c||(c=e.__makeTemplateObject(["\n  height: ",";\n  display: grid;\n  grid-template-columns: "," 1fr;\n"],["\n  height: ",";\n  display: grid;\n  grid-template-columns: "," 1fr;\n"])),(function(e){return e.hasHeader?"calc(100vh - ".concat(o.theme.appbarHeight,")"):"100vh"}),o.theme.sidebarWidth),w=u.default.main(m||(m=e.__makeTemplateObject(["\n  height: 100vh;\n  overflow: hidden;\n"],["\n  height: 100vh;\n  overflow: hidden;\n"]))),z=u.default.div(g||(g=e.__makeTemplateObject(["\n  height: inherit;\n  overflow-y: auto;\n  padding: ",";\n  box-sizing: border-box;\n"],["\n  height: inherit;\n  overflow-y: auto;\n  padding: ",";\n  box-sizing: border-box;\n"])),o.theme.space24),q=u.default.header(p||(p=e.__makeTemplateObject(["\n  background: ",";\n  box-shadow: ",";\n  border-bottom: ",";\n  height: ",";\n  z-index: ",";\n  position: sticky;\n  top: 0;\n  box-sizing: border-box;\n  display: flex;\n"],["\n  background: ",";\n  box-shadow: ",";\n  border-bottom: ",";\n  height: ",";\n  z-index: ",";\n  position: sticky;\n  top: 0;\n  box-sizing: border-box;\n  display: flex;\n"])),o.theme.headerColor,o.theme.v3ShadowBase,o.theme.border,o.theme.appbarHeight,o.theme.appbarElevation);exports.Layout=function(e){var r=e.content,t=e.footer,o=e.headerContent,i=e.logoSidebar,a=e.searchInput,d=e.sidebar;return n.jsxs(w,{children:[!!o&&n.jsx(q,{children:o}),n.jsxs(k,{hasHeader:!!o,children:[n.jsxs(y,{children:[n.jsxs(f,{children:[!!i&&n.jsx(v,{children:i}),!!a&&n.jsx(j,{children:n.jsx(_,{onChange:a.onChange,value:a.value})}),d]}),n.jsx(x,{children:t})]}),n.jsx(z,{children:r})]})]})};
+"use strict";var e=require("../../_tslib-ccfac372.js"),n=require("react/jsx-runtime"),r=require("styled-components"),t=require("../input/SearchInput.js"),o=require("../../styles/constants/theme.js");function i(e){return e&&e.__esModule?e:{default:e}}require("./NavigationGroup.js"),require("react"),require("../../icons/SearchIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../collapse/Collapse.js");var a,d,h,l,s,b,c,m,g,p,u=i(r),x=u.default.div(a||(a=e.__makeTemplateObject(["\n  box-sizing: border-box;\n  width: ",";\n"],["\n  box-sizing: border-box;\n  width: ",";\n"])),o.theme.sidebarWidth),f=u.default.div(d||(d=e.__makeTemplateObject(["\n  padding: ",";\n  box-sizing: border-box;\n  overflow-y: auto;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n"],["\n  padding: ",";\n  box-sizing: border-box;\n  overflow-y: auto;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n"])),o.theme.space16),j=u.default.div(h||(h=e.__makeTemplateObject(["\n  margin-bottom: ",";\n"],["\n  margin-bottom: ",";\n"])),o.theme.space40),v=u.default.div(l||(l=e.__makeTemplateObject(["\n  margin-bottom: ",";\n"],["\n  margin-bottom: ",";\n"])),o.theme.space24),_=u.default(t.SearchInput)(s||(s=e.__makeTemplateObject(["\n  border: 0;\n  svg {\n    color: ",";\n  }\n  input {\n    background-color: ",";\n    border: 0;\n    ::placeholder {\n      color: ",";\n    }\n  }\n"],["\n  border: 0;\n  svg {\n    color: ",";\n  }\n  input {\n    background-color: ",";\n    border: 0;\n    ::placeholder {\n      color: ",";\n    }\n  }\n"])),o.theme.gray1200,o.theme.gray100,o.theme.gray1200),y=u.default.nav(b||(b=e.__makeTemplateObject(["\n  border-right: ",";\n  width: ",";\n  box-sizing: border-box;\n  display: grid;\n  grid-template-rows: 1fr calc(39px + "," * 2);\n  height: inherit;\n  background: ",";\n"],["\n  border-right: ",";\n  width: ",";\n  box-sizing: border-box;\n  display: grid;\n  grid-template-rows: 1fr calc(39px + "," * 2);\n  height: inherit;\n  background: ",";\n"])),o.theme.border,o.theme.sidebarWidth,o.theme.space24,o.theme.sidebarColor),k=u.default.div(c||(c=e.__makeTemplateObject(["\n  height: ",";\n  display: grid;\n  grid-template-columns: "," 1fr;\n"],["\n  height: ",";\n  display: grid;\n  grid-template-columns: "," 1fr;\n"])),(function(e){return e.hasHeader?"calc(100vh - ".concat(o.theme.appbarHeight,")"):"100vh"}),o.theme.sidebarWidth),w=u.default.main(m||(m=e.__makeTemplateObject(["\n  height: 100vh;\n  overflow: hidden;\n"],["\n  height: 100vh;\n  overflow: hidden;\n"]))),z=u.default.div(g||(g=e.__makeTemplateObject(["\n  height: inherit;\n  overflow-y: auto;\n  padding: ",";\n  box-sizing: border-box;\n"],["\n  height: inherit;\n  overflow-y: auto;\n  padding: ",";\n  box-sizing: border-box;\n"])),o.theme.space24),q=u.default.header(p||(p=e.__makeTemplateObject(["\n  background: ",";\n  box-shadow: ",";\n  border-bottom: ",";\n  height: ",";\n  z-index: ",";\n  position: sticky;\n  top: 0;\n  box-sizing: border-box;\n  display: flex;\n"],["\n  background: ",";\n  box-shadow: ",";\n  border-bottom: ",";\n  height: ",";\n  z-index: ",";\n  position: sticky;\n  top: 0;\n  box-sizing: border-box;\n  display: flex;\n"])),o.theme.headerColor,o.theme.v3ShadowBase,o.theme.border,o.theme.appbarHeight,o.theme.appbarElevation);exports.Layout=function(e){var r=e.content,t=e.footer,o=e.headerContent,i=e.logoSidebar,a=e.searchInput,d=e.sidebar;return n.jsxs(w,{children:[!!o&&n.jsx(q,{children:o}),n.jsxs(k,{hasHeader:!!o,children:[n.jsxs(y,{children:[n.jsxs(f,{children:[!!i&&n.jsx(v,{children:i}),!!a&&n.jsx(j,{children:n.jsx(_,{onChange:a.onChange,value:a.value})}),d]}),n.jsx(x,{children:t})]}),n.jsx(z,{children:r})]})]})};

package/components/slide-over/SlideOver.js

@@ -1 +1 @@
-"use strict";var n=require("../../_tslib-ccfac372.js"),e=require("react/jsx-runtime");require("react");var t=require("framer-motion"),i=require("styled-components"),r=require("../backdrop/Backdrop.js"),a=require("../stack/HStack.js"),o=require("../stack/VStack.js"),s=require("../text/Text.js"),d=require("../../icons/RemoveIcon.js"),c=require("../../styles/constants/theme.js");function l(n){return n&&n.__esModule?n:{default:n}}require("../stack/Stack.js"),require("../../icons/icon-base/_IconBase.js");var p,h,m,u,x,b=l(i),g=b.default(t.motion.div)(p||(p=n.__makeTemplateObject(["\n  position: absolute;\n  z-index: 1001;\n  background: ",";\n  width: 300px;\n  outline: none;\n  box-shadow: ",";\n  height: 100vh;\n  right: 0;\n  top: 0;\n  border-left: ",";\n"],["\n  position: absolute;\n  z-index: 1001;\n  background: ",";\n  width: 300px;\n  outline: none;\n  box-shadow: ",";\n  height: 100vh;\n  right: 0;\n  top: 0;\n  border-left: ",";\n"])),c.theme.surfaceColor,c.theme.v3ShadowXxl,c.theme.border),f=b.default.header(h||(h=n.__makeTemplateObject(["\n  padding: ",";\n  border-bottom: ",";\n  display: flex;\n  align-items: center;\n\n  .header-content {\n    margin: 0;\n    flex: 1;\n  }\n"],["\n  padding: ",";\n  border-bottom: ",";\n  display: flex;\n  align-items: center;\n\n  .header-content {\n    margin: 0;\n    flex: 1;\n  }\n"])),c.theme.space24,c.theme.border),j=b.default.div(m||(m=n.__makeTemplateObject(["\n  transition: all 100ms ease-in-out;\n  background: transparent;\n  border-radius: 32px;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.8;\n\n  &:hover {\n    background: ",";\n    opacity: 1;\n  }\n\n  svg {\n    width: 14px;\n    height: 14px;\n    fill: ",";\n    transition: all 100ms ease-in-out;\n  }\n"],["\n  transition: all 100ms ease-in-out;\n  background: transparent;\n  border-radius: 32px;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.8;\n\n  &:hover {\n    background: ",";\n    opacity: 1;\n  }\n\n  svg {\n    width: 14px;\n    height: 14px;\n    fill: ",";\n    transition: all 100ms ease-in-out;\n  }\n"])),c.theme.gray200,c.theme.textColor),v=b.default.div(u||(u=n.__makeTemplateObject(["\n  padding: ",";\n  overflow-y: auto;\n  overscroll-behavior: contain;\n"],["\n  padding: ",";\n  overflow-y: auto;\n  overscroll-behavior: contain;\n"])),c.theme.space24),y=b.default.div(x||(x=n.__makeTemplateObject(["\n  padding: ",";\n  border-top: ",";\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  background: ",";\n  position: fixed;\n  bottom: 0;\n  width: 300px;\n\n  & > div + div {\n    margin-left: ",";\n  }\n"],["\n  padding: ",";\n  border-top: ",";\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  background: ",";\n  position: fixed;\n  bottom: 0;\n  width: 300px;\n\n  & > div + div {\n    margin-left: ",";\n  }\n"])),c.theme.space24,c.theme.border,c.theme.surfaceColorSecondary,c.theme.space8);exports.SlideOver=function(n){var i=n.actions,c=n.children,l=n.label,p=n.modal,h=void 0===p||p,m=n.onClose,u=n.open,x=n.subtitle,b=n.themeOverride;return e.jsx(t.AnimatePresence,{children:u&&e.jsxs(e.Fragment,{children:[e.jsx(r.Backdrop,{animate:{opacity:h?.65:0},"data-theme":b,exit:{opacity:0},initial:{opacity:0},onClick:m,transition:{duration:.35}},"dialog-backdrop"),e.jsxs(g,{animate:{opacity:1,x:0},exit:{opacity:0,x:300},initial:{opacity:0,x:300},transition:{duration:.45,ease:[.4,0,.2,1]},children:[e.jsxs(f,{children:[x?e.jsxs(o.VStack,{className:"header-content",spacing:0,children:[e.jsx(s.Text,{type:"title",children:l}),x]}):e.jsx(s.Text,{className:"header-content",type:"title",children:l}),e.jsx(j,{onClick:m,children:e.jsx(d.RemoveIcon,{})})]}),e.jsx(v,{children:c}),i&&e.jsx(y,{children:e.jsx(a.HStack,{spacing:8,children:i})})]},"slide-over")]})})};
+"use strict";var n=require("../../_tslib-ccfac372.js"),e=require("react/jsx-runtime");require("react");var t=require("framer-motion"),i=require("styled-components"),r=require("../backdrop/Backdrop.js"),a=require("../stack/HStack.js"),o=require("../stack/VStack.js"),s=require("../text/Text.js"),d=require("../../icons/RemoveIcon.js"),c=require("../../styles/constants/theme.js");function l(n){return n&&n.__esModule?n:{default:n}}require("../stack/Stack.js"),require("../../icons/icon-base/_IconBase.js");var p,h,m,u,x,b=l(i),g=b.default(t.motion.div)(p||(p=n.__makeTemplateObject(["\n  position: absolute;\n  z-index: 1001;\n  background: ",";\n  width: 300px;\n  outline: none;\n  box-shadow: ",";\n  height: 100vh;\n  right: 0;\n  top: 0;\n  border-left: ",";\n"],["\n  position: absolute;\n  z-index: 1001;\n  background: ",";\n  width: 300px;\n  outline: none;\n  box-shadow: ",";\n  height: 100vh;\n  right: 0;\n  top: 0;\n  border-left: ",";\n"])),c.theme.surfaceColor,c.theme.v3ShadowXxl,c.theme.border),f=b.default.header(h||(h=n.__makeTemplateObject(["\n  padding: ",";\n  border-bottom: ",";\n  display: flex;\n  align-items: center;\n\n  .header-content {\n    margin: 0;\n    flex: 1;\n  }\n"],["\n  padding: ",";\n  border-bottom: ",";\n  display: flex;\n  align-items: center;\n\n  .header-content {\n    margin: 0;\n    flex: 1;\n  }\n"])),c.theme.space24,c.theme.border),j=b.default.div(m||(m=n.__makeTemplateObject(["\n  transition: all 100ms ease-in-out;\n  background: transparent;\n  border-radius: 32px;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.8;\n\n  &:hover {\n    background: ",";\n    opacity: 1;\n  }\n\n  svg {\n    width: 14px;\n    height: 14px;\n    fill: ",";\n    transition: all 100ms ease-in-out;\n  }\n"],["\n  transition: all 100ms ease-in-out;\n  background: transparent;\n  border-radius: 32px;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.8;\n\n  &:hover {\n    background: ",";\n    opacity: 1;\n  }\n\n  svg {\n    width: 14px;\n    height: 14px;\n    fill: ",";\n    transition: all 100ms ease-in-out;\n  }\n"])),c.theme.gray200,c.theme.textColor),v=b.default.div(u||(u=n.__makeTemplateObject(["\n  padding: ",";\n  overflow-y: auto;\n  overscroll-behavior: contain;\n"],["\n  padding: ",";\n  overflow-y: auto;\n  overscroll-behavior: contain;\n"])),c.theme.space24),y=b.default.div(x||(x=n.__makeTemplateObject(["\n  padding: ",";\n  border-top: ",";\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  background: ",";\n  position: fixed;\n  bottom: 0;\n  width: 300px;\n\n  & > div + div {\n    margin-left: ",";\n  }\n"],["\n  padding: ",";\n  border-top: ",";\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  background: ",";\n  position: fixed;\n  bottom: 0;\n  width: 300px;\n\n  & > div + div {\n    margin-left: ",";\n  }\n"])),c.theme.space24,c.theme.border,c.theme.surfaceColorSecondary,c.theme.space8);exports.SlideOver=function(n){var i=n.actions,c=n.children,l=n.label,p=n.modal,h=void 0===p||p,m=n.onClose,u=n.open,x=n.subtitle,b=n.themeOverride;return e.jsx(t.AnimatePresence,{children:u&&e.jsxs(e.Fragment,{children:[e.jsx(r.Backdrop,{animate:{opacity:h?.65:0},"data-theme":b,exit:{opacity:0},initial:{opacity:0},onClick:m,transition:{duration:.35}},"dialog-backdrop"),e.jsxs(g,{animate:{opacity:1,x:0},className:"elevated",exit:{opacity:0,x:300},initial:{opacity:0,x:300},transition:{duration:.45,ease:[.4,0,.2,1]},children:[e.jsxs(f,{children:[x?e.jsxs(o.VStack,{className:"header-content",spacing:0,children:[e.jsx(s.Text,{type:"title",children:l}),x]}):e.jsx(s.Text,{className:"header-content",type:"title",children:l}),e.jsx(j,{onClick:m,children:e.jsx(d.RemoveIcon,{})})]}),e.jsx(v,{children:c}),i&&e.jsx(y,{children:e.jsx(a.HStack,{spacing:8,children:i})})]},"slide-over")]})})};

package/components/surface/Surface.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-ccfac372.js"),a=require("react/jsx-runtime"),n=require("styled-components"),r=require("../../styles/constants/theme.js");function t(e){return e&&e.__esModule?e:{default:e}}var d,s,o,c,h,u=t(n),l=u.default.div(d||(d=e.__makeTemplateObject(["\n  background: ",";\n  padding: ",";\n  color: ",";\n  border-radius: ",";\n"],["\n  background: ",";\n  padding: ",";\n  color: ",";\n  border-radius: ",";\n"])),r.theme.surfaceColor,r.theme.space24,r.theme.textColor,(function(e){return e.dense?r.theme.radius6:r.theme.radius8})),m=u.default(l)(s||(s=e.__makeTemplateObject(["\n  box-shadow: ",";\n  border: ",";\n"],["\n  box-shadow: ",";\n  border: ",";\n"])),r.theme.v3ShadowBase,r.theme.border),i=u.default(l)(o||(o=e.__makeTemplateObject(["\n  box-shadow: ",";\n"],["\n  box-shadow: ",";\n"])),r.theme.v3ShadowMedium),b=u.default(l)(c||(c=e.__makeTemplateObject(["\n  box-shadow: ",";\n"],["\n  box-shadow: ",";\n"])),r.theme.v3ShadowLarge),x=u.default(l)(h||(h=e.__makeTemplateObject(["\n  box-shadow: ",";\n"],["\n  box-shadow: ",";\n"])),r.theme.v3ShadowXl);exports.Surface=function(e){var n=e.children,r=e.className,t=e.dense;switch(e.depth){case"depth64":return a.jsx(x,{className:r||"",dense:t,children:n});case"depth16":return a.jsx(b,{className:r||"",dense:t,children:n});case"depth8":return a.jsx(i,{className:r||"",dense:t,children:n});default:return a.jsx(m,{className:r||"",dense:t,children:n})}};
+"use strict";var e=require("../../_tslib-ccfac372.js"),a=require("react/jsx-runtime"),n=require("styled-components"),t=require("../../styles/constants/theme.js");function r(e){return e&&e.__esModule?e:{default:e}}var d,s,o,c,h,l=r(n),u=l.default.div(d||(d=e.__makeTemplateObject(["\n  background: ",";\n  padding: ",";\n  color: ",";\n  border-radius: ",";\n"],["\n  background: ",";\n  padding: ",";\n  color: ",";\n  border-radius: ",";\n"])),t.theme.surfaceColor,t.theme.space24,t.theme.textColor,(function(e){return e.dense?t.theme.radius6:t.theme.radius8})),m=l.default(u)(s||(s=e.__makeTemplateObject(["\n  box-shadow: ",";\n  border: ",";\n"],["\n  box-shadow: ",";\n  border: ",";\n"])),t.theme.v3ShadowBase,t.theme.border),i=l.default(u)(o||(o=e.__makeTemplateObject(["\n  box-shadow: ",";\n"],["\n  box-shadow: ",";\n"])),t.theme.v3ShadowMedium),b=l.default(u)(c||(c=e.__makeTemplateObject(["\n  box-shadow: ",";\n"],["\n  box-shadow: ",";\n"])),t.theme.v3ShadowLarge),x=l.default(u)(h||(h=e.__makeTemplateObject(["\n  box-shadow: ",";\n"],["\n  box-shadow: ",";\n"])),t.theme.v3ShadowXl);exports.Surface=function(e){var n=e.children,t=e.className,r=e.dense,d=e.depth,s=[t||"","elevated"].join(" ");switch(d){case"depth64":return a.jsx(x,{className:s,dense:r,children:n});case"depth16":return a.jsx(b,{className:s,dense:r,children:n});case"depth8":return a.jsx(i,{className:s,dense:r,children:n});default:return a.jsx(m,{className:s,dense:r,children:n})}};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonos/amino",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "Core UI components for Amino",
   "repository": "git@github.com:Zonos/amino.git",
   "license": "MIT",

package/theme.css

@@ -369,4 +369,9 @@
   --amino-surface-color: var(--amino-gray-50);
   --amino-surface-color-secondary: var(--amino-gray-100);
   --amino-backdrop-color: var(--amino-gray-0);
+
+  /* Fix for dark mode surface hover color. Dark mode surfaces have a lighter color than day mode inverted to see shadows better. */
+  .elevated {
+    --amino-hover-color: var(--amino-gray-100);
+  }
 }