@zonos/amino 4.4.15 → 4.4.16

package/components/button/Button.js

@@ -1 +1 @@
-"use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("react"),o=require("../spinner/Spinner.js"),t=require("../../styles/constants/theme.js"),a=require("styled-components"),i=require("./RippleGroup.js"),c=require("./useRipple.js");function l(n){return n&&n.__esModule?n:{default:n}}require("framer-motion"),require("uuid"),require("./_Ripple.js");var s,d,u,g,h,b,p,m,f,k,v=l(a),x=function(n){return"inherit"===n?"inherit":n?t.theme[n]:void 0},y=v.default.span(s||(s=n.__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ",";\n  gap: ",";\n"],["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ",";\n  gap: ",";\n"])),t.theme.radius4,t.theme.space8),_=v.default.button(d||(d=n.__makeTemplateObject(["\n  position: relative;\n  outline: none;\n  height: ",";\n  line-height: ",";\n  font-size: 14px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  padding: 0 ",";\n  border-radius: ",";\n  transition: ",";\n  font-weight: 500;\n  user-select: none;\n  font-family: ",";\n  letter-spacing: normal;\n  cursor: pointer;\n  white-space: nowrap;\n  padding: ",";\n\n  svg path:not([data-is-secondary-color]) {\n    fill: currentColor;\n  }\n\n  &.only-icon {\n    width: ",";\n    padding: 0;\n  }\n\n  &:active,\n  &:focus {\n    outline: none;\n    svg path:not([data-is-secondary-color]) {\n      fill: currentColor;\n    }\n  }\n\n  &:active {\n    transform: scale(0.99);\n  }\n\n  &:not(.only-icon).has-icon {\n    &.icon-right {\n      svg {\n        margin-left: ",";\n        margin-right: 0;\n      }\n    }\n    svg {\n      margin-right: ",";\n      margin-left: 0;\n    }\n  }\n\n  &[disabled] {\n    box-shadow: none;\n    &:not(.loading) {\n      opacity: 0.5;\n    }\n  }\n"],["\n  position: relative;\n  outline: none;\n  height: ",";\n  line-height: ",";\n  font-size: 14px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  padding: 0 ",";\n  border-radius: ",";\n  transition: ",";\n  font-weight: 500;\n  user-select: none;\n  font-family: ",";\n  letter-spacing: normal;\n  cursor: pointer;\n  white-space: nowrap;\n  padding: ",";\n\n  svg path:not([data-is-secondary-color]) {\n    fill: currentColor;\n  }\n\n  &.only-icon {\n    width: ",";\n    padding: 0;\n  }\n\n  &:active,\n  &:focus {\n    outline: none;\n    svg path:not([data-is-secondary-color]) {\n      fill: currentColor;\n    }\n  }\n\n  &:active {\n    transform: scale(0.99);\n  }\n\n  &:not(.only-icon).has-icon {\n    &.icon-right {\n      svg {\n        margin-left: ",";\n        margin-right: 0;\n      }\n    }\n    svg {\n      margin-right: ",";\n      margin-left: 0;\n    }\n  }\n\n  &[disabled] {\n    box-shadow: none;\n    &:not(.loading) {\n      opacity: 0.5;\n    }\n  }\n"])),(function(n){return"var(--amino-size-".concat(n.size,")")}),(function(n){return"var(--amino-size-".concat(n.size,")")}),t.theme.space16,t.theme.radius6,t.theme.transition,t.theme.fontSans,(function(n){return function(n){switch(n){case"sm":return"6px 10px";case"lg":return"14px 18px";default:return"10px 14px"}}(n.size)}),(function(n){return"var(--amino-size-".concat(n.size,")")}),t.theme.space8,t.theme.space8),j=v.default(_)(u||(u=n.__makeTemplateObject(["\n  background: ",";\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active,\n    &:focus {\n      background: ",";\n      color: ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"],["\n  background: ",";\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active,\n    &:focus {\n      background: ",";\n      color: ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"])),(function(n){return x(n.background)||t.theme.primary}),(function(n){return x(n.color)||t.theme.gray0}),t.theme.blue400,t.theme.blue700,t.theme.gray0,y,t.theme.primary),w=v.default(_)(g||(g=n.__makeTemplateObject(["\n  color: ",";\n  background: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n      color: ",";\n      svg path {\n        fill: currentColor;\n      }\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n\n  /** Night mode */\n  &.night {\n    color: ",";\n    background: ",";\n\n    &:not([disabled]) {\n      &:hover {\n        background: ",";\n      }\n      &:active,\n      &:focus {\n        background: ",";\n        color: ",";\n        svg path {\n          fill: currentColor;\n        }\n      }\n    }\n\n    "," {\n      background: ",";\n    }\n  }\n"],["\n  color: ",";\n  background: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n      color: ",";\n      svg path {\n        fill: currentColor;\n      }\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n\n  /** Night mode */\n  &.night {\n    color: ",";\n    background: ",";\n\n    &:not([disabled]) {\n      &:hover {\n        background: ",";\n      }\n      &:active,\n      &:focus {\n        background: ",";\n        color: ",";\n        svg path {\n          fill: currentColor;\n        }\n      }\n    }\n\n    "," {\n      background: ",";\n    }\n  }\n"])),(function(n){return x(n.color)||t.theme.textColor}),(function(n){return x(n.background)||t.theme.gray100}),t.theme.gray200,t.theme.blue100,t.theme.blue600,y,t.theme.gray100,t.theme.gray0,t.theme.gray1000,t.theme.gray900,t.theme.blue1000,t.theme.blue300,y,t.theme.gray1000),R=v.default(_)(h||(h=n.__makeTemplateObject(["\n  background: ",";\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"],["\n  background: ",";\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"])),(function(n){return x(n.background)||t.theme.red600}),(function(n){return x(n.color)||t.theme.gray0}),t.theme.red400,t.theme.red700,y,t.theme.red600),z=v.default(_)(b||(b=n.__makeTemplateObject(["\n  background: ",";\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"],["\n  background: ",";\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"])),(function(n){return x(n.background)||t.theme.orange600}),(function(n){return x(n.color)||t.theme.gray0}),t.theme.orange400,t.theme.orange700,y,t.theme.orange600),C=v.default(_)(p||(p=n.__makeTemplateObject(["\n  color: ",";\n  border: 1px solid ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n      border: 1px solid ",";\n    }\n    &:active {\n      background: ",";\n      color: ",";\n      border: 1px solid ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"],["\n  color: ",";\n  border: 1px solid ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n      border: 1px solid ",";\n    }\n    &:active {\n      background: ",";\n      color: ",";\n      border: 1px solid ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"])),(function(n){return x(n.color)||t.theme.textColor}),(function(n){return x(n.borderColor)||t.theme.gray200}),t.theme.gray100,t.theme.gray200,t.theme.blue100,t.theme.blue600,t.theme.blue300,y,t.theme.gray0),O=v.default(_)(m||(m=n.__makeTemplateObject(["\n  background: ",";\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n      color: ",";\n    }\n  }\n\n  &.loading {\n    color: transparent;\n  }\n"],["\n  background: ",";\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n      color: ",";\n    }\n  }\n\n  &.loading {\n    color: transparent;\n  }\n"])),(function(n){return x(n.background)||"none"}),(function(n){return x(n.color)||t.theme.gray800}),t.theme.gray100,t.theme.blue100,t.theme.blue600),T=v.default(_)(f||(f=n.__makeTemplateObject(["\n  color: ",";\n  height: 20px;\n  line-height: 20px;\n\n  &[disabled] {\n    color: ",";\n    &:not(.loading) {\n      opacity: inherit;\n    }\n  }\n\n  &:not([disabled]) {\n    &:hover {\n      color: ",";\n    }\n    &:active {\n      color: ",";\n    }\n  }\n\n  &.loading {\n    color: transparent;\n  }\n"],["\n  color: ",";\n  height: 20px;\n  line-height: 20px;\n\n  &[disabled] {\n    color: ",";\n    &:not(.loading) {\n      opacity: inherit;\n    }\n  }\n\n  &:not([disabled]) {\n    &:hover {\n      color: ",";\n    }\n    &:active {\n      color: ",";\n    }\n  }\n\n  &.loading {\n    color: transparent;\n  }\n"])),(function(n){return x(n.color)||t.theme.gray800}),t.theme.gray400,t.theme.gray700,t.theme.gray1200),q=_,G=v.default(_)(k||(k=n.__makeTemplateObject(["\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n      color: ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"],["\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n      color: ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"])),(function(n){return x(n.color)||t.theme.blue600}),t.theme.gray100,t.theme.blue100,t.theme.blue800,y,t.theme.gray0);exports.Button=function(t){var a=t.children,l=t.className,s=t.disabled,d=void 0!==s&&s,u=t.icon,g=t.iconRight,h=t.intent,b=void 0===h?"secondary":h,p=t.loading,m=void 0!==p&&p,f=t.loadingText,k=t.noRipple,v=void 0!==k&&k,x=t.size,_=void 0===x?"sm":x,N=t.spinnerColor,S=t.tag,B=t.themeOverride,E=t.type,F=void 0===E?"button":E,H=n.__rest(t,["children","className","disabled","icon","iconRight","intent","loading","loadingText","noRipple","size","spinnerColor","tag","themeOverride","type"]),M=S||"button",A=function(n){return e.jsxs(e.Fragment,{children:[!g&&u,a,g&&u,"plain"!==b&&m&&e.jsxs(y,{children:[e.jsx(o.Spinner,{color:n,size:16}),f]})]})},D=[l||"",u&&!a?"only-icon":"",g?"icon-right":"",u?"has-icon":"",m?"loading":"",B].filter(Boolean).join(" "),I=r.useRef(null),J=c.useRipple({disabled:d||m,rippleEnabled:!v&&!["plain","text"].includes(b),rippleRef:I}),K=J.getRippleHandlers,L=J.rippleEnabled,P={className:D,disabled:d||m,size:_},Q=n.__assign(n.__assign(n.__assign({type:F},P),H),K(H));switch(b){case"primary":return e.jsxs(j,n.__assign({as:M},Q,{children:[A(N||"white"),L&&e.jsx(i.RippleGroup,{ref:I})]}));case"subtle":return e.jsxs(O,n.__assign({as:M},Q,{children:[A(N),L&&e.jsx(i.RippleGroup,{ref:I})]}));case"outline":return e.jsxs(C,n.__assign({as:M},Q,{children:[A(N),L&&e.jsx(i.RippleGroup,{ref:I})]}));case"warning":return e.jsxs(z,n.__assign({as:M},Q,{children:[A(N||"white"),L&&e.jsx(i.RippleGroup,{ref:I})]}));case"danger":return e.jsxs(R,n.__assign({as:M},Q,{children:[A(N||"white"),L&&e.jsx(i.RippleGroup,{ref:I})]}));case"text":return e.jsx(T,n.__assign({as:M},Q,{children:A(N)}));case"link":return e.jsxs(G,n.__assign({as:M},Q,{children:[A(N),L&&e.jsx(i.RippleGroup,{ref:I})]}));case"plain":return e.jsx(q,n.__assign({as:M},Q,{children:A(N)}));default:return e.jsxs(w,n.__assign({as:M},Q,{children:[A(N),L&&e.jsx(i.RippleGroup,{ref:I})]}))}};
+"use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("react"),o=require("../spinner/Spinner.js"),t=require("../../styles/constants/theme.js"),a=require("styled-components"),i=require("./RippleGroup.js"),c=require("./useRipple.js");function l(n){return n&&n.__esModule?n:{default:n}}require("framer-motion"),require("uuid"),require("./_Ripple.js");var s,d,u,g,h,b,p,m,f,k,v=l(a),x=function(n){return"inherit"===n?"inherit":n?t.theme[n]:void 0},y=v.default.span(s||(s=n.__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ",";\n  gap: ",";\n"],["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ",";\n  gap: ",";\n"])),t.theme.radius4,t.theme.space8),_=v.default.button(d||(d=n.__makeTemplateObject(["\n  position: relative;\n  outline: none;\n  height: ",";\n  line-height: ",";\n  font-size: 14px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  padding: 0 ",";\n  border-radius: ",";\n  transition: ",";\n  font-weight: 500;\n  user-select: none;\n  font-family: ",";\n  letter-spacing: normal;\n  cursor: pointer;\n  white-space: nowrap;\n  padding: ",";\n\n  svg path:not([data-is-secondary-color]) {\n    fill: currentColor;\n  }\n\n  &.only-icon {\n    width: ",";\n    padding: 0;\n  }\n\n  &:active,\n  &:focus {\n    outline: none;\n    svg path:not([data-is-secondary-color]) {\n      fill: currentColor;\n    }\n  }\n\n  &:active {\n    transform: scale(0.99);\n  }\n\n  &:not(.only-icon).has-icon {\n    &.icon-right {\n      svg {\n        margin-left: ",";\n        margin-right: 0;\n      }\n    }\n    svg {\n      margin-right: ",";\n      margin-left: 0;\n    }\n  }\n\n  &[disabled] {\n    box-shadow: none;\n    &:not(.loading) {\n      opacity: 0.5;\n    }\n  }\n"],["\n  position: relative;\n  outline: none;\n  height: ",";\n  line-height: ",";\n  font-size: 14px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  padding: 0 ",";\n  border-radius: ",";\n  transition: ",";\n  font-weight: 500;\n  user-select: none;\n  font-family: ",";\n  letter-spacing: normal;\n  cursor: pointer;\n  white-space: nowrap;\n  padding: ",";\n\n  svg path:not([data-is-secondary-color]) {\n    fill: currentColor;\n  }\n\n  &.only-icon {\n    width: ",";\n    padding: 0;\n  }\n\n  &:active,\n  &:focus {\n    outline: none;\n    svg path:not([data-is-secondary-color]) {\n      fill: currentColor;\n    }\n  }\n\n  &:active {\n    transform: scale(0.99);\n  }\n\n  &:not(.only-icon).has-icon {\n    &.icon-right {\n      svg {\n        margin-left: ",";\n        margin-right: 0;\n      }\n    }\n    svg {\n      margin-right: ",";\n      margin-left: 0;\n    }\n  }\n\n  &[disabled] {\n    box-shadow: none;\n    &:not(.loading) {\n      opacity: 0.5;\n    }\n  }\n"])),(function(n){return"var(--amino-size-".concat(n.size,")")}),(function(n){return"var(--amino-size-".concat(n.size,")")}),t.theme.space16,t.theme.radius6,t.theme.transition,t.theme.fontSans,(function(n){return function(n){switch(n){case"sm":return"6px 10px";case"lg":return"14px 18px";default:return"10px 14px"}}(n.size)}),(function(n){return"var(--amino-size-".concat(n.size,")")}),t.theme.space8,t.theme.space8),j=v.default(_)(u||(u=n.__makeTemplateObject(["\n  background: ",";\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active,\n    &:focus {\n      background: ",";\n      color: ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"],["\n  background: ",";\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active,\n    &:focus {\n      background: ",";\n      color: ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"])),(function(n){return x(n.background)||t.theme.primary}),(function(n){return x(n.color)||t.theme.gray0}),t.theme.blue400,t.theme.blue700,t.theme.gray0,y,t.theme.primary),w=v.default(_)(g||(g=n.__makeTemplateObject(["\n  color: ",";\n  background: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n      color: ",";\n      svg path {\n        fill: currentColor;\n      }\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n\n  /** Night mode */\n  &.night {\n    color: ",";\n    background: ",";\n\n    &:not([disabled]) {\n      &:hover {\n        background: ",";\n      }\n      &:active,\n      &:focus {\n        background: ",";\n        color: ",";\n        svg path {\n          fill: currentColor;\n        }\n      }\n    }\n\n    "," {\n      background: ",";\n    }\n  }\n"],["\n  color: ",";\n  background: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n      color: ",";\n      svg path {\n        fill: currentColor;\n      }\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n\n  /** Night mode */\n  &.night {\n    color: ",";\n    background: ",";\n\n    &:not([disabled]) {\n      &:hover {\n        background: ",";\n      }\n      &:active,\n      &:focus {\n        background: ",";\n        color: ",";\n        svg path {\n          fill: currentColor;\n        }\n      }\n    }\n\n    "," {\n      background: ",";\n    }\n  }\n"])),(function(n){return x(n.color)||t.theme.textColor}),(function(n){return x(n.background)||t.theme.gray100}),t.theme.gray200,t.theme.blue100,t.theme.blue600,y,t.theme.gray100,t.theme.gray0,t.theme.gray1000,t.theme.gray900,t.theme.blue1000,t.theme.blue300,y,t.theme.gray1000),R=v.default(_)(h||(h=n.__makeTemplateObject(["\n  background: ",";\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"],["\n  background: ",";\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"])),(function(n){return x(n.background)||t.theme.red600}),(function(n){return x(n.color)||t.theme.gray0}),t.theme.red400,t.theme.red700,y,t.theme.red600),z=v.default(_)(b||(b=n.__makeTemplateObject(["\n  background: ",";\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"],["\n  background: ",";\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"])),(function(n){return x(n.background)||t.theme.orange600}),(function(n){return x(n.color)||t.theme.gray0}),t.theme.orange400,t.theme.orange700,y,t.theme.orange600),C=v.default(_)(p||(p=n.__makeTemplateObject(["\n  color: ",";\n  border: 1px solid ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: linear-gradient(\n        180deg,\n        "," 12.5%,\n        "," 87.5%\n      );\n      border: 1px solid ",";\n    }\n    &:active {\n      background: ",";\n      color: ",";\n      border: 1px solid ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"],["\n  color: ",";\n  border: 1px solid ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: linear-gradient(\n        180deg,\n        "," 12.5%,\n        "," 87.5%\n      );\n      border: 1px solid ",";\n    }\n    &:active {\n      background: ",";\n      color: ",";\n      border: 1px solid ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"])),(function(n){return x(n.color)||t.theme.textColor}),(function(n){return x(n.borderColor)||t.theme.gray200}),t.theme.gray0,t.theme.gray100,t.theme.gray200,t.theme.blue100,t.theme.blue600,t.theme.blue300,y,t.theme.gray0),O=v.default(_)(m||(m=n.__makeTemplateObject(["\n  background: ",";\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n      color: ",";\n    }\n  }\n\n  &.loading {\n    color: transparent;\n  }\n"],["\n  background: ",";\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n      color: ",";\n    }\n  }\n\n  &.loading {\n    color: transparent;\n  }\n"])),(function(n){return x(n.background)||"none"}),(function(n){return x(n.color)||t.theme.gray800}),t.theme.gray100,t.theme.blue100,t.theme.blue600),T=v.default(_)(f||(f=n.__makeTemplateObject(["\n  color: ",";\n  height: 20px;\n  line-height: 20px;\n\n  &[disabled] {\n    color: ",";\n    &:not(.loading) {\n      opacity: inherit;\n    }\n  }\n\n  &:not([disabled]) {\n    &:hover {\n      color: ",";\n    }\n    &:active {\n      color: ",";\n    }\n  }\n\n  &.loading {\n    color: transparent;\n  }\n"],["\n  color: ",";\n  height: 20px;\n  line-height: 20px;\n\n  &[disabled] {\n    color: ",";\n    &:not(.loading) {\n      opacity: inherit;\n    }\n  }\n\n  &:not([disabled]) {\n    &:hover {\n      color: ",";\n    }\n    &:active {\n      color: ",";\n    }\n  }\n\n  &.loading {\n    color: transparent;\n  }\n"])),(function(n){return x(n.color)||t.theme.gray800}),t.theme.gray400,t.theme.gray700,t.theme.gray1200),q=_,G=v.default(_)(k||(k=n.__makeTemplateObject(["\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n      color: ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"],["\n  color: ",";\n\n  &:not([disabled]) {\n    &:hover {\n      background: ",";\n    }\n    &:active {\n      background: ",";\n      color: ",";\n    }\n  }\n\n  "," {\n    background: ",";\n  }\n"])),(function(n){return x(n.color)||t.theme.blue600}),t.theme.gray100,t.theme.blue100,t.theme.blue800,y,t.theme.gray0);exports.Button=function(t){var a=t.children,l=t.className,s=t.disabled,d=void 0!==s&&s,u=t.icon,g=t.iconRight,h=t.intent,b=void 0===h?"secondary":h,p=t.loading,m=void 0!==p&&p,f=t.loadingText,k=t.noRipple,v=void 0!==k&&k,x=t.size,_=void 0===x?"sm":x,N=t.spinnerColor,S=t.tag,B=t.themeOverride,E=t.type,F=void 0===E?"button":E,H=n.__rest(t,["children","className","disabled","icon","iconRight","intent","loading","loadingText","noRipple","size","spinnerColor","tag","themeOverride","type"]),M=S||"button",A=function(n){return e.jsxs(e.Fragment,{children:[!g&&u,a,g&&u,"plain"!==b&&m&&e.jsxs(y,{children:[e.jsx(o.Spinner,{color:n,size:16}),f]})]})},D=[l||"",u&&!a?"only-icon":"",g?"icon-right":"",u?"has-icon":"",m?"loading":"",B].filter(Boolean).join(" "),I=r.useRef(null),J=c.useRipple({disabled:d||m,rippleEnabled:!v&&!["plain","text"].includes(b),rippleRef:I}),K=J.getRippleHandlers,L=J.rippleEnabled,P={className:D,disabled:d||m,size:_},Q=n.__assign(n.__assign(n.__assign({type:F},P),H),K(H));switch(b){case"primary":return e.jsxs(j,n.__assign({as:M},Q,{children:[A(N||"white"),L&&e.jsx(i.RippleGroup,{ref:I})]}));case"subtle":return e.jsxs(O,n.__assign({as:M},Q,{children:[A(N),L&&e.jsx(i.RippleGroup,{ref:I})]}));case"outline":return e.jsxs(C,n.__assign({as:M},Q,{children:[A(N),L&&e.jsx(i.RippleGroup,{ref:I})]}));case"warning":return e.jsxs(z,n.__assign({as:M},Q,{children:[A(N||"white"),L&&e.jsx(i.RippleGroup,{ref:I})]}));case"danger":return e.jsxs(R,n.__assign({as:M},Q,{children:[A(N||"white"),L&&e.jsx(i.RippleGroup,{ref:I})]}));case"text":return e.jsx(T,n.__assign({as:M},Q,{children:A(N)}));case"link":return e.jsxs(G,n.__assign({as:M},Q,{children:[A(N),L&&e.jsx(i.RippleGroup,{ref:I})]}));case"plain":return e.jsx(q,n.__assign({as:M},Q,{children:A(N)}));default:return e.jsxs(w,n.__assign({as:M},Q,{children:[A(N),L&&e.jsx(i.RippleGroup,{ref:I})]}))}};

package/components/layout/Layout.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),r=require("../input/SearchInput.js"),t=require("../../styles/constants/theme.js"),i=require("styled-components");function o(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,c,b,m,p,g,u=o(i),x=u.default.div(a||(a=e.__makeTemplateObject(["\n  box-sizing: border-box;\n  width: ",";\n"],["\n  box-sizing: border-box;\n  width: ",";\n"])),t.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"])),t.theme.space24),j=u.default.div(h||(h=e.__makeTemplateObject(["\n  margin-bottom: ",";\n"],["\n  margin-bottom: ",";\n"])),t.theme.space40),v=u.default.div(l||(l=e.__makeTemplateObject(["\n  margin-bottom: ",";\n"],["\n  margin-bottom: ",";\n"])),t.theme.space24),_=u.default(r.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"])),t.theme.gray1200,t.theme.gray100,t.theme.gray1200),y=u.default.nav(c||(c=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"])),t.theme.border,t.theme.sidebarWidth,t.theme.space24,t.theme.sidebarColor),k=u.default.div(b||(b=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(t.theme.appbarHeight,")"):"100vh"}),t.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(p||(p=e.__makeTemplateObject(["\n  height: inherit;\n  overflow-y: auto;\n  padding: "," "," calc(39px + "," * 2);\n  box-sizing: border-box;\n"],["\n  height: inherit;\n  overflow-y: auto;\n  padding: "," "," calc(39px + "," * 2);\n  box-sizing: border-box;\n"])),t.theme.space24,t.theme.space24,t.theme.space24),q=u.default.header(g||(g=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"])),t.theme.headerColor,t.theme.v3ShadowBase,t.theme.border,t.theme.appbarHeight,t.theme.appbarElevation);exports.Layout=function(r){var t=r.content,i=r.footer,o=r.headerContent,a=r.logoSidebar,d=r.searchInput,h=r.sidebar;return n.jsxs(w,{children:[!!o&&n.jsx(q,{children:o}),n.jsxs(k,e.__assign({hasHeader:!!o},{children:[n.jsxs(y,{children:[n.jsxs(f,{children:[!!a&&n.jsx(v,{children:a}),!!d&&n.jsx(j,{children:n.jsx(_,{onChange:d.onChange,value:d.value})}),h]}),n.jsx(x,{children:i})]}),n.jsx(z,{children:t})]}))]})};
+"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),r=require("../input/SearchInput.js"),t=require("../../styles/constants/theme.js"),i=require("styled-components");function o(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,c,b,m,p,g,u=o(i),x=u.default.div(a||(a=e.__makeTemplateObject(["\n  box-sizing: border-box;\n  width: ",";\n"],["\n  box-sizing: border-box;\n  width: ",";\n"])),t.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"])),t.theme.space16),j=u.default.div(h||(h=e.__makeTemplateObject(["\n  margin-bottom: ",";\n"],["\n  margin-bottom: ",";\n"])),t.theme.space40),v=u.default.div(l||(l=e.__makeTemplateObject(["\n  margin-bottom: ",";\n"],["\n  margin-bottom: ",";\n"])),t.theme.space24),_=u.default(r.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"])),t.theme.gray1200,t.theme.gray100,t.theme.gray1200),y=u.default.nav(c||(c=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"])),t.theme.border,t.theme.sidebarWidth,t.theme.space24,t.theme.sidebarColor),k=u.default.div(b||(b=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(t.theme.appbarHeight,")"):"100vh"}),t.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(p||(p=e.__makeTemplateObject(["\n  height: inherit;\n  overflow-y: auto;\n  padding: "," "," calc(39px + "," * 2);\n  box-sizing: border-box;\n"],["\n  height: inherit;\n  overflow-y: auto;\n  padding: "," "," calc(39px + "," * 2);\n  box-sizing: border-box;\n"])),t.theme.space24,t.theme.space24,t.theme.space24),q=u.default.header(g||(g=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"])),t.theme.headerColor,t.theme.v3ShadowBase,t.theme.border,t.theme.appbarHeight,t.theme.appbarElevation);exports.Layout=function(r){var t=r.content,i=r.footer,o=r.headerContent,a=r.logoSidebar,d=r.searchInput,h=r.sidebar;return n.jsxs(w,{children:[!!o&&n.jsx(q,{children:o}),n.jsxs(k,e.__assign({hasHeader:!!o},{children:[n.jsxs(y,{children:[n.jsxs(f,{children:[!!a&&n.jsx(v,{children:a}),!!d&&n.jsx(j,{children:n.jsx(_,{onChange:d.onChange,value:d.value})}),h]}),n.jsx(x,{children:i})]}),n.jsx(z,{children:t})]}))]})};

package/components/layout/NavigationGroup.js

@@ -1 +1 @@
-"use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("../collapse/Collapse.js"),t=require("../../styles/constants/theme.js"),o=require("styled-components");function l(n){return n&&n.__esModule?n:{default:n}}require("react");var a,c,s,i,d,g,m,u,p,h=l(o),f=h.default.div(a||(a=n.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"],["\n  display: flex;\n  flex-direction: column;\n"]))),x=h.default.div(c||(c=n.__makeTemplateObject([""],[""]))),_=h.default.div(s||(s=n.__makeTemplateObject([""],[""]))),v=h.default.div(g||(g=n.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 36px;\n  padding: 0 ",";\n  color: ",";\n  font-weight: 500;\n  border-radius: ",";\n  &:hover {\n    background-color: ",";\n    color: ",";\n    svg {\n      color: ",";\n    }\n  }\n  svg {\n    color: ",";\n  }\n  "," {\n    flex-grow: 1;\n    & > * {\n      height: 100%;\n    }\n  }\n  ","\n  ","\n"],["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 36px;\n  padding: 0 ",";\n  color: ",";\n  font-weight: 500;\n  border-radius: ",";\n  &:hover {\n    background-color: ",";\n    color: ",";\n    svg {\n      color: ",";\n    }\n  }\n  svg {\n    color: ",";\n  }\n  "," {\n    flex-grow: 1;\n    & > * {\n      height: 100%;\n    }\n  }\n  ","\n  ","\n"])),t.theme.space16,t.theme.gray800,t.theme.radius6,t.theme.gray50,t.theme.gray1200,t.theme.gray700,t.theme.gray600,_,(function(e){return!!e.$icon&&o.css(i||(i=n.__makeTemplateObject(["\n      "," {\n        flex-basis: 31px;\n        flex-grow: 0;\n        flex-shrink: 0;\n      }\n    "],["\n      "," {\n        flex-basis: 31px;\n        flex-grow: 0;\n        flex-shrink: 0;\n      }\n    "])),x)}),(function(e){return e.$isActive&&o.css(d||(d=n.__makeTemplateObject(["\n      && {\n        background-color: ",";\n        color: ",";\n        svg {\n          color: ",";\n        }\n      }\n    "],["\n      && {\n        background-color: ",";\n        color: ",";\n        svg {\n          color: ",";\n        }\n      }\n    "])),t.theme.gray200,t.theme.gray1200,t.theme.gray1200)})),b=h.default.div(u||(u=n.__makeTemplateObject(["\n  ","\n"],["\n  ","\n"])),(function(e){return!e.$collapsed&&o.css(m||(m=n.__makeTemplateObject(["\n      "," {\n        color: ",";\n        &:hover {\n          background-color: transparent;\n        }\n        svg {\n          color: ",";\n        }\n      }\n    "],["\n      "," {\n        color: ",";\n        &:hover {\n          background-color: transparent;\n        }\n        svg {\n          color: ",";\n        }\n      }\n    "])),v,t.theme.gray1200,t.theme.gray1200)})),j=h.default(r.Collapse)(p||(p=n.__makeTemplateObject(["\n  padding-left: ",";\n  margin-left: ",";\n  border-left: 1px solid ",";\n"],["\n  padding-left: ",";\n  margin-left: ",";\n  border-left: 1px solid ",";\n"])),t.theme.space24,t.theme.space24,t.theme.gray200);exports.NavigationGroup=function(r){var t=r.children,o=r.className,l=r.collapsed,a=void 0!==l&&l,c=r.content;return e.jsxs(f,n.__assign({className:o},{children:[e.jsx(b,n.__assign({$collapsed:a},{children:c})),e.jsx(j,n.__assign({collapsed:a},{children:t}))]}))},exports.NavigationItem=function(r){var t=r.className,o=r.content,l=r.icon,a=r.isActive;return e.jsxs(v,n.__assign({$content:o,$icon:l,$isActive:a,className:t},{children:[l&&e.jsx(x,{children:l}),o]}))};
+"use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("../collapse/Collapse.js"),t=require("../../styles/constants/theme.js"),o=require("styled-components");function l(n){return n&&n.__esModule?n:{default:n}}require("react");var a,c,s,i,d,g,m,u,p,h=l(o),f=h.default.div(a||(a=n.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"],["\n  display: flex;\n  flex-direction: column;\n"]))),x=h.default.div(c||(c=n.__makeTemplateObject([""],[""]))),_=h.default.div(s||(s=n.__makeTemplateObject([""],[""]))),v=h.default.div(g||(g=n.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 36px;\n  padding: 0 ",";\n  color: ",";\n  font-weight: 500;\n  border-radius: ",";\n  &:hover {\n    background-color: ",";\n    color: ",";\n    svg {\n      color: ",";\n    }\n  }\n  svg {\n    color: ",";\n  }\n  "," {\n    flex-grow: 1;\n    & > * {\n      height: 100%;\n    }\n  }\n  ","\n  ","\n"],["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 36px;\n  padding: 0 ",";\n  color: ",";\n  font-weight: 500;\n  border-radius: ",";\n  &:hover {\n    background-color: ",";\n    color: ",";\n    svg {\n      color: ",";\n    }\n  }\n  svg {\n    color: ",";\n  }\n  "," {\n    flex-grow: 1;\n    & > * {\n      height: 100%;\n    }\n  }\n  ","\n  ","\n"])),t.theme.space8,t.theme.gray800,t.theme.radius6,t.theme.gray50,t.theme.gray1200,t.theme.gray700,t.theme.gray600,_,(function(e){return!!e.$icon&&o.css(i||(i=n.__makeTemplateObject(["\n      "," {\n        flex-basis: 31px;\n        flex-grow: 0;\n        flex-shrink: 0;\n      }\n    "],["\n      "," {\n        flex-basis: 31px;\n        flex-grow: 0;\n        flex-shrink: 0;\n      }\n    "])),x)}),(function(e){return e.$isActive&&o.css(d||(d=n.__makeTemplateObject(["\n      && {\n        background-color: ",";\n        color: ",";\n        svg {\n          color: ",";\n        }\n      }\n    "],["\n      && {\n        background-color: ",";\n        color: ",";\n        svg {\n          color: ",";\n        }\n      }\n    "])),t.theme.gray100,t.theme.gray1200,t.theme.gray1200)})),b=h.default.div(u||(u=n.__makeTemplateObject(["\n  ","\n"],["\n  ","\n"])),(function(e){return!e.$collapsed&&o.css(m||(m=n.__makeTemplateObject(["\n      "," {\n        color: ",";\n        &:hover {\n          background-color: transparent;\n        }\n        svg {\n          color: ",";\n        }\n      }\n    "],["\n      "," {\n        color: ",";\n        &:hover {\n          background-color: transparent;\n        }\n        svg {\n          color: ",";\n        }\n      }\n    "])),v,t.theme.gray1200,t.theme.gray1200)})),j=h.default(r.Collapse)(p||(p=n.__makeTemplateObject(["\n  padding-left: ",";\n  margin-left: ",";\n  border-left: 1px solid ",";\n"],["\n  padding-left: ",";\n  margin-left: ",";\n  border-left: 1px solid ",";\n"])),t.theme.space20,t.theme.space20,t.theme.gray200);exports.NavigationGroup=function(r){var t=r.children,o=r.className,l=r.collapsed,a=void 0!==l&&l,c=r.content;return e.jsxs(f,n.__assign({className:o},{children:[e.jsx(b,n.__assign({$collapsed:a},{children:c})),e.jsx(j,n.__assign({collapsed:a},{children:t}))]}))},exports.NavigationItem=function(r){var t=r.className,o=r.content,l=r.icon,a=r.isActive;return e.jsxs(v,n.__assign({$content:o,$icon:l,$isActive:a,className:t},{children:[l&&e.jsx(x,{children:l}),o]}))};

package/package.json

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

package/styles/constants/theme.d.ts

@@ -321,7 +321,7 @@ export declare const theme: {
     readonly backdropColor: "var(--amino-backdrop-color)";
     /** @info 55px */
     readonly appbarHeight: "var(--amino-appbar-height)";
-    /** @info 264px */
+    /** @info 232px */
     readonly sidebarWidth: "var(--amino-sidebar-width)";
     /** @info 0 */
     readonly elevation0: "var(--amino-elevation-0)";

package/theme.css

@@ -169,7 +169,7 @@
   --amino-surface-color-secondary: var(--amino-gray-50);
   --amino-backdrop-color: var(--amino-gray-1200);
   --amino-appbar-height: 55px;
-  --amino-sidebar-width: 264px;
+  --amino-sidebar-width: 232px;
   --amino-elevation-0: 0;
   --amino-elevation-100: 100;
   --amino-elevation-200: 200;