@zonos/amino 4.4.6 → 4.4.8

package/components/mdx/mdx-image/MdxImage.js

@@ -1 +1 @@
-"use strict";var n=require("../../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("react"),i=require("../../lightbox/LightBox.js"),t=require("styled-components");function o(n){return n&&n.__esModule?n:{default:n}}require("../../dialog/_BaseDialog.js"),require("framer-motion"),require("../../backdrop/Backdrop.js"),require("../../../styles/constants/theme.js");var a,d,s,l=o(t),u=l.default.div(a||(a=n.__makeTemplateObject(["\n  position: relative;\n  margin: 0 auto;\n  display: block;\n  margin: ",";\n  cursor: pointer;\n  width: 100%;\n\n  ::after {\n    content: '';\n    display: ",";\n    background: linear-gradient(90deg, #fdff87, #ff9b3f, #00e0ff, #83ff5f);\n    position: absolute;\n    bottom: 20px;\n    left: -50px;\n    right: -50px;\n    margin: auto;\n    height: 50%;\n    width: 100%;\n    z-index: -1;\n    filter: blur(50px);\n  }\n\n  img {\n    border-radius: 10px;\n    overflow: hidden;\n  }\n"],["\n  position: relative;\n  margin: 0 auto;\n  display: block;\n  margin: ",";\n  cursor: pointer;\n  width: 100%;\n\n  ::after {\n    content: '';\n    display: ",";\n    background: linear-gradient(90deg, #fdff87, #ff9b3f, #00e0ff, #83ff5f);\n    position: absolute;\n    bottom: 20px;\n    left: -50px;\n    right: -50px;\n    margin: auto;\n    height: 50%;\n    width: 100%;\n    z-index: -1;\n    filter: blur(50px);\n  }\n\n  img {\n    border-radius: 10px;\n    overflow: hidden;\n  }\n"])),(function(n){return n.addMargin&&"32px 0"}),(function(n){return n.showColor?"block":"none"})),f=l.default.div(d||(d=n.__makeTemplateObject(["\n  filter: ",";\n  position: ",";\n"],["\n  filter: ",";\n  position: ",";\n"])),(function(n){return n.showShadow&&"drop-shadow(0px 4px 6px rgba(10, 10, 11, 0.1))\n    drop-shadow(0px 2px 4px rgba(10, 10, 11, 0.06))"}),(function(n){return n.showShadow&&"relative"})),p=l.default(i.LightBox)(s||(s=n.__makeTemplateObject(["\n  width: 100%;\n  max-width: 700px;\n  margin: 32px;\n"],["\n  width: 100%;\n  max-width: 700px;\n  margin: 32px;\n"]))),g=function(i){var t=i.addMargin,o=i.color,a=i.shadow,d=i.children,s=n.__read(r.useState(!1),2),l=s[0],g=s[1];return e.jsxs(e.Fragment,{children:[e.jsx(u,n.__assign({addMargin:t,showColor:o,onClick:function(){return g(!0)}},{children:e.jsx(f,n.__assign({showShadow:a},{children:d}))})),e.jsx(p,n.__assign({open:l,onClose:function(){return g(!1)}},{children:d}))]})};g.stableName="MdxImage",exports.MdxImage=g;
+"use strict";var n=require("../../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),r=require("react"),i=require("../../lightbox/LightBox.js"),t=require("../../../styles/constants/theme.js"),o=require("styled-components");function a(n){return n&&n.__esModule?n:{default:n}}require("../../dialog/_BaseDialog.js"),require("framer-motion"),require("../../backdrop/Backdrop.js");var d,s,u=a(o),l=u.default.div(d||(d=n.__makeTemplateObject(["\n  position: relative;\n  margin: 0 auto;\n  display: block;\n  margin: ",";\n  cursor: pointer;\n  width: 100%;\n\n  ::after {\n    content: '';\n    display: ",";\n    background: linear-gradient(90deg, #fdff87, #ff9b3f, #00e0ff, #83ff5f);\n    position: absolute;\n    bottom: 20px;\n    left: -50px;\n    right: -50px;\n    margin: auto;\n    height: 50%;\n    width: 100%;\n    z-index: -1;\n    filter: blur(50px);\n  }\n\n  img {\n    border-radius: 10px;\n    overflow: hidden;\n    box-shadow: ",";\n  }\n"],["\n  position: relative;\n  margin: 0 auto;\n  display: block;\n  margin: ",";\n  cursor: pointer;\n  width: 100%;\n\n  ::after {\n    content: '';\n    display: ",";\n    background: linear-gradient(90deg, #fdff87, #ff9b3f, #00e0ff, #83ff5f);\n    position: absolute;\n    bottom: 20px;\n    left: -50px;\n    right: -50px;\n    margin: auto;\n    height: 50%;\n    width: 100%;\n    z-index: -1;\n    filter: blur(50px);\n  }\n\n  img {\n    border-radius: 10px;\n    overflow: hidden;\n    box-shadow: ",";\n  }\n"])),(function(n){return n.addMargin&&"32px 0"}),(function(n){return n.showColor?"block":"none"}),(function(n){return n.shadow&&t.theme.v3ShadowLarge})),f=u.default(i.LightBox)(s||(s=n.__makeTemplateObject(["\n  width: 100%;\n  max-width: 700px;\n  margin: 32px;\n"],["\n  width: 100%;\n  max-width: 700px;\n  margin: 32px;\n"]))),g=function(i){var t=i.addMargin,o=i.color,a=i.shadow,d=i.children,s=n.__read(r.useState(!1),2),u=s[0],g=s[1];return e.jsxs(e.Fragment,{children:[e.jsx(l,n.__assign({addMargin:t,showColor:o,onClick:function(){return g(!0)},shadow:a},{children:d})),e.jsx(f,n.__assign({open:u,onClose:function(){return g(!1)}},{children:d}))]})};g.stableName="MdxImage",exports.MdxImage=g;

package/components/select/_StyledReactSelect.js

@@ -1 +1 @@
-"use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),s=require("react"),o=require("react-select"),t=require("../checkbox/Checkbox.js"),i=require("../help-text/HelpText.js"),r=require("../../icons/CheckCircleIcon.js"),a=require("../../icons/DoubleChevronIcon.js"),l=require("../../icons/RemoveCircleIcon.js"),c=require("../../icons/RemoveIcon.js"),d=require("../../styles/constants/theme.js"),u=require("../../utils/getTestId.js"),p=require("styled-components");function h(n){return n&&n.__esModule?n:{default:n}}require("framer-motion"),require("../text/Text.js"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js");var m,g,_,f,x,b,v,j,y,k,T,z=h(o),C=h(p),w=function(s){return e.jsx(o.components.ClearIndicator,n.__assign({},s,{children:e.jsx(l.RemoveCircleIcon,{size:19})}))},I=function(s){return e.jsx(o.components.DropdownIndicator,n.__assign({},s,{children:e.jsx(a.DoubleChevronIcon,{size:20})}))},O=C.default.div(m||(m=n.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: ",";\n  padding: 10px;\n"],["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: ",";\n  padding: 10px;\n"])),d.theme.gray700),S=C.default.label(b||(b=n.__makeTemplateObject(["\n  position: absolute;\n  transition: ",";\n  font-size: ",";\n  line-height: ",";\n  transform-origin: left top;\n  left: calc("," - 2px);\n  .has-icon & {\n    left: calc("," + 2px);\n  }\n  top: calc(50% - "," / 2);\n  .has-label & {\n    & + div {\n      align-self: flex-end;\n    }\n  }\n  .has-value &,\n  .is-focused & {\n    top: calc("," + 3px);\n    transform: scale(0.8);\n  }\n\n  /* Size modify */\n  ","\n\n  ","\n\n  ","\n\n  ","\n"],["\n  position: absolute;\n  transition: ",";\n  font-size: ",";\n  line-height: ",";\n  transform-origin: left top;\n  left: calc("," - 2px);\n  .has-icon & {\n    left: calc("," + 2px);\n  }\n  top: calc(50% - "," / 2);\n  .has-label & {\n    & + div {\n      align-self: flex-end;\n    }\n  }\n  .has-value &,\n  .is-focused & {\n    top: calc("," + 3px);\n    transform: scale(0.8);\n  }\n\n  /* Size modify */\n  ","\n\n  ","\n\n  ","\n\n  ","\n"])),d.theme.transition,d.theme.fontSizeBase,d.theme.fontSizeBase,d.theme.space16,d.theme.space40,d.theme.fontSizeBase,d.theme.space8,(function(e){var s=e.$size;return"sm"===s&&p.css(g||(g=n.__makeTemplateObject(["\n      .",".has-label & {\n        & + div {\n          margin-bottom: -6px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 2px;\n      }\n    "],["\n      .",".has-label & {\n        & + div {\n          margin-bottom: -6px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 2px;\n      }\n    "])),s,s,s)}),(function(e){var s=e.$size;return"md"===s&&p.css(_||(_=n.__makeTemplateObject(["\n      .",".has-label & {\n        & + div {\n          margin-bottom: -2px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 6px;\n      }\n    "],["\n      .",".has-label & {\n        & + div {\n          margin-bottom: -2px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 6px;\n      }\n    "])),s,s,s)}),(function(e){var s=e.$size;return"lg"===s&&p.css(f||(f=n.__makeTemplateObject(["\n      .",".has-value &,\n      .",".is-focused & {\n        top: 10px;\n      }\n    "],["\n      .",".has-value &,\n      .",".is-focused & {\n        top: 10px;\n      }\n    "])),s,s)}),(function(e){var s=e.$size;return"xl"===s&&p.css(x||(x=n.__makeTemplateObject(["\n      .",".has-label & {\n        & + div {\n          margin-bottom: 3px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 11px;\n      }\n    "],["\n      .",".has-label & {\n        & + div {\n          margin-bottom: 3px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 11px;\n      }\n    "])),s,s,s)})),q=C.default.div(v||(v=n.__makeTemplateObject(["\n  .react-select-control + div {\n    z-index: 20;\n  }\n\n  &.has-error .react-select-control {\n    box-shadow: ",";\n  }\n"],["\n  .react-select-control + div {\n    z-index: 20;\n  }\n\n  &.has-error .react-select-control {\n    box-shadow: ",";\n  }\n"])),d.theme.glowError),R=C.default.strong(j||(j=n.__makeTemplateObject(["\n  font-weight: 600;\n"],["\n  font-weight: 600;\n"]))),L=function(s){var o=s.children,t=s.cx,i=s.getStyles,r=s.className,a=s.hasValue,l=s.isDisabled,c=s.isFocused,d=s.innerRef,u=s.innerProps,p=s.menuIsOpen,h=s.selectProps,m=h.icon,g=h.label,_=h.value,f=h.size;return e.jsxs("div",n.__assign({className:t({control:!0,"control--is-disabled":l,"control--is-focused":c,"control--menu-is-open":p},[r,a?"has-value":"",m?"has-icon":"",c?"is-focused":"",g||Array.isArray(_)&&_.length>1?"has-label":"",f,"react-select-control"].join(" ")),ref:d,style:i("control",s)},u,{children:[m&&e.jsx(O,{children:m}),e.jsxs(S,n.__assign({$size:f},{children:[g," ",Array.isArray(_)&&_.length>1&&e.jsxs(R,{children:["(",_.length," selected)"]})]})),o]}))},M=C.default.div(y||(y=n.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  color: ",";\n  svg {\n    margin-right: 4px;\n    color: ",";\n  }\n"],["\n  display: flex;\n  align-items: center;\n  color: ",";\n  svg {\n    margin-right: 4px;\n    color: ",";\n  }\n"])),(function(n){return n.$color||"inherit"}),d.theme.gray1200),P=C.default.div(k||(k=n.__makeTemplateObject(["\n  &:not(.is-disabled) {\n    &.is-focused,\n    &:hover {\n      /* The styles are inlined on this component from emotion, so we must override */\n      background-color: "," !important;\n    }\n  }\n"],["\n  &:not(.is-disabled) {\n    &.is-focused,\n    &:hover {\n      /* The styles are inlined on this component from emotion, so we must override */\n      background-color: "," !important;\n    }\n  }\n"])),d.theme.gray100),D=C.default.div(T||(T=n.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"]))),B=function(s){var o=s.children,t=s.color,i=s.icon;return e.jsxs(M,n.__assign({$color:t},{children:[i,o]}))},N=function(s){var t=s.children,i=n.__rest(s,["children"]);return e.jsx(o.components.MultiValueLabel,n.__assign({},i,{children:e.jsx(B,n.__assign({icon:i.data.icon},{children:t}))}))},V=function(s){var o=s.innerProps;return e.jsx("div",n.__assign({},o,{role:"button"},{children:e.jsx(c.RemoveIcon,{size:14})}))},$=function(s){var o=s.children,i=s.data,a=s.getStyles,l=s.innerRef,c=s.innerProps,d=s.isDisabled,u=s.isSelected,p=s.isFocused,h=s.className,m=s.selectProps,g=m.hasGroups,_=a("option",s),f=_.color,x=n.__rest(_,["color"]);return g&&(x.paddingLeft=48),e.jsx("div",n.__assign({ref:l},c,{children:e.jsx(P,n.__assign({style:x,className:[h,p?"is-focused":"",d?"is-disabled":""].join(" ")},{children:m.isMulti?e.jsx(t.Checkbox,{checked:u,disabled:d,icon:i.icon,label:i.label,labelDescription:i.labelDescription,onChange:function(){}}):e.jsxs(D,{children:[e.jsx(B,n.__assign({color:f,icon:i.icon},{children:o})),u&&e.jsx(r.CheckCircleIcon,{color:"blue600",size:16})]})}))}))},W={clearIndicator:function(e){return n.__assign(n.__assign({},e),{color:"".concat(d.theme.gray700),paddingLeft:14,paddingRight:4})},control:function(e,s){var o=s.selectProps.size;return n.__assign(n.__assign({},e),{borderColor:"".concat(d.theme.gray200),borderRadius:6,cursor:"pointer",color:d.theme.gray800,height:"var(--amino-size-".concat(o,")"),flexWrap:"inherit",minHeight:"var(--amino-size-".concat(o,")"),boxShadow:s.isFocused?"".concat(d.theme.glowBlue):"",background:d.theme.gray0})},dropdownIndicator:function(e){return n.__assign(n.__assign({},e),{color:"".concat(d.theme.gray900),paddingLeft:4,paddingRight:10})},group:function(e){return n.__assign(n.__assign({},e),{paddingTop:0,paddingBottom:0})},indicatorSeparator:function(e){return n.__assign(n.__assign({},e),{width:0})},menu:function(e){return n.__assign(n.__assign({},e),{borderRadius:12,boxShadow:d.theme.v3ShadowLarge,marginTop:4,background:d.theme.surfaceColor})},menuList:function(e){return n.__assign(n.__assign({},e),{paddingTop:8,paddingLeft:8,paddingRight:8})},multiValue:function(e){return n.__assign(n.__assign({},e),{background:d.theme.gray200,fontWeight:500,minWidth:"inherit"})},multiValueLabel:function(e){return n.__assign(n.__assign({},e),{color:d.theme.textColor})},option:function(e,s){return n.__assign(n.__assign({},e),{color:s.isSelected?d.theme.blue600:d.theme.textColor,fontWeight:s.isSelected?500:400,backgroundColor:"inherit",paddingTop:7,paddingRight:12,paddingBottom:7,paddingLeft:8,borderRadius:"8px",cursor:"pointer"})},placeholder:function(e){return n.__assign(n.__assign({},e),{opacity:0,".has-label.is-focused &":{opacity:1}})},singleValue:function(e){return n.__assign(n.__assign({},e),{fontWeight:500,color:d.theme.textColor})},valueContainer:function(e){return n.__assign(n.__assign({},e),{flexWrap:"nowrap",padding:"unset",paddingLeft:12,".has-icon &":{paddingLeft:0}})}};exports.CheckboxOptionComponent=$,exports.StyledReactSelect=function(o){var t=o.components,r=o.error,a=o.helpText,l=o.hasGroups,c=o.icon,d=o.label,p=o.size,h=void 0===p?"xl":p,m=o.styles,g=o.placeholder,_=o.menuPosition,f=void 0===_?"fixed":_,x=o.closeOnOutsideScroll,b=void 0!==x&&x,v=n.__rest(o,["components","error","helpText","hasGroups","icon","label","size","styles","placeholder","menuPosition","closeOnOutsideScroll"]),j={hasGroups:l,icon:c,label:d,size:h},y=s.useMemo((function(){return u.getTestId({componentName:"select",name:d})}),[d]),k=s.useRef(null),T=s.useMemo((function(){return!!b&&function(n){var e,s,o;return!(n.target instanceof HTMLElement)||(null===(o=!(null===(s=null===(e=k.current)||void 0===e?void 0:e.menuListRef)||void 0===s?void 0:s.isEqualNode(n.target)))||void 0===o||o)}}),[b]);return e.jsxs(q,n.__assign({"data-testid":y,className:[r?"has-error":""].join(" ")},{children:[e.jsx(z.default,n.__assign({components:n.__assign({ClearIndicator:w,Control:L,DropdownIndicator:I,MultiValueLabel:N,MultiValueRemove:V,Option:$},t),menuPosition:f,placeholder:g||"",styles:n.__assign(n.__assign({},m),W),ref:k,closeMenuOnScroll:T},v,j)),e.jsx(i.HelpText,{error:r,helpText:a})]}))};
+"use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),s=require("react"),o=require("react-select"),t=require("../checkbox/Checkbox.js"),i=require("../help-text/HelpText.js"),r=require("../../icons/CheckCircleIcon.js"),a=require("../../icons/DoubleChevronIcon.js"),l=require("../../icons/RemoveCircleIcon.js"),c=require("../../icons/RemoveIcon.js"),d=require("../../styles/constants/theme.js"),u=require("../../utils/getTestId.js"),p=require("styled-components");function h(n){return n&&n.__esModule?n:{default:n}}require("framer-motion"),require("../text/Text.js"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js");var m,g,_,f,x,b,v,j,y,k,T,z=h(o),C=h(p),w=function(s){return e.jsx(o.components.ClearIndicator,n.__assign({},s,{children:e.jsx(l.RemoveCircleIcon,{size:19})}))},I=function(s){return e.jsx(o.components.DropdownIndicator,n.__assign({},s,{children:e.jsx(a.DoubleChevronIcon,{size:20})}))},O=C.default.div(m||(m=n.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: ",";\n  padding: 10px;\n"],["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: ",";\n  padding: 10px;\n"])),d.theme.gray700),S=C.default.label(b||(b=n.__makeTemplateObject(["\n  position: absolute;\n  transition: ",";\n  font-size: ",";\n  line-height: ",";\n  transform-origin: left top;\n  left: calc("," - 2px);\n  .has-icon & {\n    left: calc("," + 2px);\n  }\n  top: calc(50% - "," / 2);\n  .has-label & {\n    & + div {\n      align-self: flex-end;\n    }\n  }\n  .has-value &,\n  .is-focused & {\n    top: calc("," + 3px);\n    transform: scale(0.8);\n  }\n\n  /* Size modify */\n  ","\n\n  ","\n\n  ","\n\n  ","\n"],["\n  position: absolute;\n  transition: ",";\n  font-size: ",";\n  line-height: ",";\n  transform-origin: left top;\n  left: calc("," - 2px);\n  .has-icon & {\n    left: calc("," + 2px);\n  }\n  top: calc(50% - "," / 2);\n  .has-label & {\n    & + div {\n      align-self: flex-end;\n    }\n  }\n  .has-value &,\n  .is-focused & {\n    top: calc("," + 3px);\n    transform: scale(0.8);\n  }\n\n  /* Size modify */\n  ","\n\n  ","\n\n  ","\n\n  ","\n"])),d.theme.transition,d.theme.fontSizeBase,d.theme.fontSizeBase,d.theme.space16,d.theme.space40,d.theme.fontSizeBase,d.theme.space8,(function(e){var s=e.$size;return"sm"===s&&p.css(g||(g=n.__makeTemplateObject(["\n      .",".has-label & {\n        & + div {\n          margin-bottom: -6px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 2px;\n      }\n    "],["\n      .",".has-label & {\n        & + div {\n          margin-bottom: -6px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 2px;\n      }\n    "])),s,s,s)}),(function(e){var s=e.$size;return"md"===s&&p.css(_||(_=n.__makeTemplateObject(["\n      .",".has-label & {\n        & + div {\n          margin-bottom: -2px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 6px;\n      }\n    "],["\n      .",".has-label & {\n        & + div {\n          margin-bottom: -2px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 6px;\n      }\n    "])),s,s,s)}),(function(e){var s=e.$size;return"lg"===s&&p.css(f||(f=n.__makeTemplateObject(["\n      .",".has-value &,\n      .",".is-focused & {\n        top: 10px;\n      }\n    "],["\n      .",".has-value &,\n      .",".is-focused & {\n        top: 10px;\n      }\n    "])),s,s)}),(function(e){var s=e.$size;return"xl"===s&&p.css(x||(x=n.__makeTemplateObject(["\n      .",".has-label & {\n        & + div {\n          margin-bottom: 3px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 11px;\n      }\n    "],["\n      .",".has-label & {\n        & + div {\n          margin-bottom: 3px;\n        }\n      }\n      .",".has-value &,\n      .",".is-focused & {\n        top: 11px;\n      }\n    "])),s,s,s)})),q=C.default.div(v||(v=n.__makeTemplateObject(["\n  .react-select-control + div {\n    z-index: 20;\n  }\n\n  &.has-error .react-select-control {\n    box-shadow: ",";\n  }\n"],["\n  .react-select-control + div {\n    z-index: 20;\n  }\n\n  &.has-error .react-select-control {\n    box-shadow: ",";\n  }\n"])),d.theme.glowError),R=C.default.strong(j||(j=n.__makeTemplateObject(["\n  font-weight: 600;\n"],["\n  font-weight: 600;\n"]))),L=function(s){var o=s.children,t=s.cx,i=s.getStyles,r=s.className,a=s.hasValue,l=s.isDisabled,c=s.isFocused,d=s.innerRef,u=s.innerProps,p=s.menuIsOpen,h=s.selectProps,m=h.icon,g=h.label,_=h.value,f=h.size;return e.jsxs("div",n.__assign({className:t({control:!0,"control--is-disabled":l,"control--is-focused":c,"control--menu-is-open":p},[r,a?"has-value":"",m?"has-icon":"",c?"is-focused":"",g||Array.isArray(_)&&_.length>1?"has-label":"",f,"react-select-control"].join(" ")),ref:d,style:i("control",s)},u,{children:[m&&e.jsx(O,{children:m}),e.jsxs(S,n.__assign({$size:f},{children:[g," ",Array.isArray(_)&&_.length>1&&e.jsxs(R,{children:["(",_.length," selected)"]})]})),o]}))},M=C.default.div(y||(y=n.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  color: ",";\n  svg {\n    margin-right: 4px;\n    color: ",";\n  }\n"],["\n  display: flex;\n  align-items: center;\n  color: ",";\n  svg {\n    margin-right: 4px;\n    color: ",";\n  }\n"])),(function(n){return n.$color||"inherit"}),d.theme.gray1200),P=C.default.div(k||(k=n.__makeTemplateObject(["\n  &:not(.is-disabled) {\n    &.is-focused,\n    &:hover {\n      /* The styles are inlined on this component from emotion, so we must override */\n      background-color: "," !important;\n    }\n  }\n"],["\n  &:not(.is-disabled) {\n    &.is-focused,\n    &:hover {\n      /* The styles are inlined on this component from emotion, so we must override */\n      background-color: "," !important;\n    }\n  }\n"])),d.theme.gray100),B=C.default.div(T||(T=n.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"],["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"]))),D=function(s){var o=s.children,t=s.color,i=s.icon;return e.jsxs(M,n.__assign({$color:t},{children:[i,o]}))},N=function(s){var t=s.children,i=n.__rest(s,["children"]);return e.jsx(o.components.MultiValueLabel,n.__assign({},i,{children:e.jsx(D,n.__assign({icon:i.data.icon},{children:t}))}))},V=function(s){var o=s.innerProps;return e.jsx("div",n.__assign({},o,{role:"button"},{children:e.jsx(c.RemoveIcon,{size:14})}))},$=function(s){var o=s.children,i=s.data,a=s.getStyles,l=s.innerRef,c=s.innerProps,d=s.isDisabled,u=s.isSelected,p=s.isFocused,h=s.className,m=s.selectProps,g=m.hasGroups,_=a("option",s),f=_.color,x=n.__rest(_,["color"]);return g&&(x.paddingLeft=48),e.jsx("div",n.__assign({ref:l},c,{children:e.jsx(P,n.__assign({style:x,className:[h,p?"is-focused":"",d?"is-disabled":""].join(" ")},{children:m.isMulti?e.jsx(t.Checkbox,{checked:u,disabled:d,icon:i.icon,label:i.label,labelDescription:i.labelDescription,onChange:function(){}}):e.jsxs(B,{children:[e.jsx(D,n.__assign({color:f,icon:i.icon},{children:o})),u&&e.jsx(r.CheckCircleIcon,{color:"blue600",size:16})]})}))}))},W={clearIndicator:function(e){return n.__assign(n.__assign({},e),{color:"".concat(d.theme.gray700),paddingLeft:14,paddingRight:4})},control:function(e,s){var o=s.selectProps.size;return n.__assign(n.__assign({},e),{borderColor:"".concat(d.theme.gray200),borderRadius:6,cursor:"pointer",color:d.theme.gray800,height:"var(--amino-size-".concat(o,")"),flexWrap:"inherit",minHeight:"var(--amino-size-".concat(o,")"),boxShadow:s.isFocused?"".concat(d.theme.glowBlue):"",background:d.theme.inputBackground})},dropdownIndicator:function(e){return n.__assign(n.__assign({},e),{color:"".concat(d.theme.gray900),paddingLeft:4,paddingRight:10})},group:function(e){return n.__assign(n.__assign({},e),{paddingTop:0,paddingBottom:0})},indicatorSeparator:function(e){return n.__assign(n.__assign({},e),{width:0})},menu:function(e){return n.__assign(n.__assign({},e),{borderRadius:12,boxShadow:d.theme.v3ShadowLarge,marginTop:4,background:d.theme.surfaceColor})},menuList:function(e){return n.__assign(n.__assign({},e),{paddingTop:8,paddingLeft:8,paddingRight:8})},multiValue:function(e){return n.__assign(n.__assign({},e),{background:d.theme.gray200,fontWeight:500,minWidth:"inherit"})},multiValueLabel:function(e){return n.__assign(n.__assign({},e),{color:d.theme.textColor})},option:function(e,s){return n.__assign(n.__assign({},e),{color:s.isSelected?d.theme.blue600:d.theme.textColor,fontWeight:s.isSelected?500:400,backgroundColor:"inherit",paddingTop:7,paddingRight:12,paddingBottom:7,paddingLeft:8,borderRadius:"8px",cursor:"pointer"})},placeholder:function(e){return n.__assign(n.__assign({},e),{opacity:0,".has-label.is-focused &":{opacity:1}})},singleValue:function(e){return n.__assign(n.__assign({},e),{fontWeight:500,color:d.theme.textColor})},valueContainer:function(e){return n.__assign(n.__assign({},e),{flexWrap:"nowrap",padding:"unset",paddingLeft:12,".has-icon &":{paddingLeft:0}})}};exports.CheckboxOptionComponent=$,exports.StyledReactSelect=function(o){var t=o.components,r=o.error,a=o.helpText,l=o.hasGroups,c=o.icon,d=o.label,p=o.size,h=void 0===p?"xl":p,m=o.styles,g=o.placeholder,_=o.menuPosition,f=void 0===_?"fixed":_,x=o.closeOnOutsideScroll,b=void 0!==x&&x,v=n.__rest(o,["components","error","helpText","hasGroups","icon","label","size","styles","placeholder","menuPosition","closeOnOutsideScroll"]),j={hasGroups:l,icon:c,label:d,size:h},y=s.useMemo((function(){return u.getTestId({componentName:"select",name:d})}),[d]),k=s.useRef(null),T=s.useMemo((function(){return!!b&&function(n){var e,s,o;return!(n.target instanceof HTMLElement)||(null===(o=!(null===(s=null===(e=k.current)||void 0===e?void 0:e.menuListRef)||void 0===s?void 0:s.isEqualNode(n.target)))||void 0===o||o)}}),[b]);return e.jsxs(q,n.__assign({"data-testid":y,className:[r?"has-error":""].join(" ")},{children:[e.jsx(z.default,n.__assign({components:n.__assign({ClearIndicator:w,Control:L,DropdownIndicator:I,MultiValueLabel:N,MultiValueRemove:V,Option:$},t),menuPosition:f,placeholder:g||"",styles:n.__assign(n.__assign({},m),W),ref:k,closeMenuOnScroll:T},v,j)),e.jsx(i.HelpText,{error:r,helpText:a})]}))};

package/components/textarea/Textarea.js

@@ -1 +1 @@
-"use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),t=require("react"),o=require("../../styles/constants/theme.js"),r=require("styled-components"),a=require("../help-text/HelpText.js");function i(n){return n&&n.__esModule?n:{default:n}}require("../text/Text.js");var s,l,d,c,h,p=i(r),u=p.default.div(s||(s=n.__makeTemplateObject(["\n  border-radius: ",";\n  border: ",";\n  position: relative;\n  &:hover {\n    border: 1px solid ",";\n  }\n"],["\n  border-radius: ",";\n  border: ",";\n  position: relative;\n  &:hover {\n    border: 1px solid ",";\n  }\n"])),o.theme.radius6,o.theme.border,o.theme.gray300),b=p.default.div(l||(l=n.__makeTemplateObject(["\n  &::after {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    border-radius: ",";\n  }\n"],["\n  &::after {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    border-radius: ",";\n  }\n"])),o.theme.radius6),f=p.default.label(d||(d=n.__makeTemplateObject(["\n  color: ",";\n  font-size: ",";\n  line-height: ",";\n  position: absolute;\n  filter: blur(0);\n  top: calc("," + 6px);\n  transform-origin: left top;\n  transition: ",";\n  left: ",";\n  z-index: 3;\n"],["\n  color: ",";\n  font-size: ",";\n  line-height: ",";\n  position: absolute;\n  filter: blur(0);\n  top: calc("," + 6px);\n  transform-origin: left top;\n  transition: ",";\n  left: ",";\n  z-index: 3;\n"])),o.theme.gray800,o.theme.fontSizeBase,o.theme.fontSizeBase,o.theme.fontSizeBase,o.theme.transition,o.theme.space16),m=p.default.textarea(c||(c=n.__makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  padding: 0 ",";\n  padding-top: ",";\n  transition: ",";\n  outline: none;\n  order: 2;\n  width: 100%;\n  border-radius: ",";\n  background: ",";\n  border: 0;\n  font-size: ",";\n  font-weight: 500;\n  z-index: 2;\n  display: block;\n\n  :-internal-autofill-selected {\n    border-radius: "," 0 0 ",";\n    && + label + div {\n      background-color: #e8f0fe;\n    }\n  }\n  &.has-label {\n    padding: "," 4px "," ",";\n\n    &.has-content,\n    &:focus {\n      &::placeholder {\n        opacity: 0.6;\n      }\n      & + "," {\n        top: 11px;\n        transform: scale(0.8);\n        & + "," {\n          &::before {\n            content: '';\n            position: absolute;\n            z-index: 2;\n            left: 0;\n            top: 0;\n            height: 25px;\n            right: 0;\n            background: ",";\n            border-radius: ",";\n          }\n        }\n      }\n    }\n  }\n\n  ::placeholder {\n    transition: ",";\n    opacity: 0;\n    color: ",";\n    font-weight: 400;\n  }\n\n  :focus {\n    outline: none;\n    & ~ ","::after {\n      box-shadow: ",";\n    }\n  }\n\n  &.has-error ~ ","::after {\n    box-shadow: ",";\n  }\n"],["\n  box-sizing: border-box;\n  position: relative;\n  padding: 0 ",";\n  padding-top: ",";\n  transition: ",";\n  outline: none;\n  order: 2;\n  width: 100%;\n  border-radius: ",";\n  background: ",";\n  border: 0;\n  font-size: ",";\n  font-weight: 500;\n  z-index: 2;\n  display: block;\n\n  :-internal-autofill-selected {\n    border-radius: "," 0 0 ",";\n    && + label + div {\n      background-color: #e8f0fe;\n    }\n  }\n  &.has-label {\n    padding: "," 4px "," ",";\n\n    &.has-content,\n    &:focus {\n      &::placeholder {\n        opacity: 0.6;\n      }\n      & + "," {\n        top: 11px;\n        transform: scale(0.8);\n        & + "," {\n          &::before {\n            content: '';\n            position: absolute;\n            z-index: 2;\n            left: 0;\n            top: 0;\n            height: 25px;\n            right: 0;\n            background: ",";\n            border-radius: ",";\n          }\n        }\n      }\n    }\n  }\n\n  ::placeholder {\n    transition: ",";\n    opacity: 0;\n    color: ",";\n    font-weight: 400;\n  }\n\n  :focus {\n    outline: none;\n    & ~ ","::after {\n      box-shadow: ",";\n    }\n  }\n\n  &.has-error ~ ","::after {\n    box-shadow: ",";\n  }\n"])),o.theme.space16,o.theme.space8,o.theme.transition,o.theme.radius6,o.theme.inputBackground,o.theme.fontSizeBase,o.theme.radius6,o.theme.radius6,o.theme.space24,o.theme.space8,o.theme.space16,f,b,o.theme.gray0,o.theme.radius6,o.theme.transition,o.theme.gray400,b,o.theme.glowBlue,b,o.theme.glowError),x=p.default.div(h||(h=n.__makeTemplateObject(["\n  position: relative;\n  width: ",";\n\n  &.disabled {\n    * {\n      cursor: not-allowed;\n    }\n    "," {\n      opacity: 0.4;\n    }\n    "," {\n      user-select: none;\n    }\n  }\n"],["\n  position: relative;\n  width: ",";\n\n  &.disabled {\n    * {\n      cursor: not-allowed;\n    }\n    "," {\n      opacity: 0.4;\n    }\n    "," {\n      user-select: none;\n    }\n  }\n"])),(function(n){return n.width?"".concat(n.width,"px"):"100%"}),u,m),g=t.forwardRef((function(t,o){var r=t.className,i=t.disabled,s=t.error,l=t.helpText,d=t.label,c=t.value,h=t.rows,p=t.width,g=n.__rest(t,["className","disabled","error","helpText","label","value","rows","width"]),w=!!c;return e.jsxs(x,n.__assign({width:p,className:"amino-input-wrapper ".concat(r||""," ").concat(i?"disabled":"")},{children:[e.jsxs(u,{children:[e.jsx(m,n.__assign({className:[s?"has-error":"",d?"has-label":"",w?"has-content":""].join(" "),disabled:i,ref:o,rows:h,label:d,value:c},g)),e.jsx(f,n.__assign({"data-label":d},{children:d})),e.jsx(b,{})]}),e.jsx(a.HelpText,{error:s,helpText:l})]}))}));exports.Textarea=g;
+"use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),t=require("react"),o=require("../../styles/constants/theme.js"),r=require("styled-components"),a=require("../help-text/HelpText.js");function i(n){return n&&n.__esModule?n:{default:n}}require("../text/Text.js");var s,l,d,c,h,p=i(r),u=p.default.div(s||(s=n.__makeTemplateObject(["\n  border-radius: ",";\n  border: ",";\n  position: relative;\n  &:hover {\n    border: 1px solid ",";\n  }\n"],["\n  border-radius: ",";\n  border: ",";\n  position: relative;\n  &:hover {\n    border: 1px solid ",";\n  }\n"])),o.theme.radius6,o.theme.border,o.theme.gray300),b=p.default.div(l||(l=n.__makeTemplateObject(["\n  &::after {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    border-radius: ",";\n  }\n"],["\n  &::after {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    border-radius: ",";\n  }\n"])),o.theme.radius6),f=p.default.label(d||(d=n.__makeTemplateObject(["\n  color: ",";\n  font-size: ",";\n  line-height: ",";\n  position: absolute;\n  filter: blur(0);\n  top: calc("," + 6px);\n  transform-origin: left top;\n  transition: ",";\n  left: ",";\n  z-index: 3;\n"],["\n  color: ",";\n  font-size: ",";\n  line-height: ",";\n  position: absolute;\n  filter: blur(0);\n  top: calc("," + 6px);\n  transform-origin: left top;\n  transition: ",";\n  left: ",";\n  z-index: 3;\n"])),o.theme.gray800,o.theme.fontSizeBase,o.theme.fontSizeBase,o.theme.fontSizeBase,o.theme.transition,o.theme.space16),m=p.default.textarea(c||(c=n.__makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  padding: 0 ",";\n  padding-top: ",";\n  transition: ",";\n  outline: none;\n  order: 2;\n  width: 100%;\n  border-radius: ",";\n  background: ",";\n  border: 0;\n  font-size: ",";\n  font-weight: 500;\n  z-index: 2;\n  display: block;\n\n  :-internal-autofill-selected {\n    border-radius: "," 0 0 ",";\n    && + label + div {\n      background-color: #e8f0fe;\n    }\n  }\n  &.has-label {\n    padding: "," 4px "," ",";\n\n    ::placeholder {\n      opacity: 0;\n    }\n\n    &.has-content,\n    &:focus {\n      &::placeholder {\n        opacity: 0.6;\n      }\n      & + "," {\n        top: 11px;\n        transform: scale(0.8);\n        & + "," {\n          &::before {\n            content: '';\n            position: absolute;\n            z-index: 2;\n            left: 0;\n            top: 0;\n            height: 25px;\n            right: 0;\n            background: ",";\n            border-radius: ",";\n          }\n        }\n      }\n    }\n  }\n\n  ::placeholder {\n    transition: ",";\n    color: ",";\n    font-weight: 400;\n    opacity: 0.6;\n  }\n\n  :focus {\n    outline: none;\n    & ~ ","::after {\n      box-shadow: ",";\n    }\n  }\n\n  &.has-error ~ ","::after {\n    box-shadow: ",";\n  }\n"],["\n  box-sizing: border-box;\n  position: relative;\n  padding: 0 ",";\n  padding-top: ",";\n  transition: ",";\n  outline: none;\n  order: 2;\n  width: 100%;\n  border-radius: ",";\n  background: ",";\n  border: 0;\n  font-size: ",";\n  font-weight: 500;\n  z-index: 2;\n  display: block;\n\n  :-internal-autofill-selected {\n    border-radius: "," 0 0 ",";\n    && + label + div {\n      background-color: #e8f0fe;\n    }\n  }\n  &.has-label {\n    padding: "," 4px "," ",";\n\n    ::placeholder {\n      opacity: 0;\n    }\n\n    &.has-content,\n    &:focus {\n      &::placeholder {\n        opacity: 0.6;\n      }\n      & + "," {\n        top: 11px;\n        transform: scale(0.8);\n        & + "," {\n          &::before {\n            content: '';\n            position: absolute;\n            z-index: 2;\n            left: 0;\n            top: 0;\n            height: 25px;\n            right: 0;\n            background: ",";\n            border-radius: ",";\n          }\n        }\n      }\n    }\n  }\n\n  ::placeholder {\n    transition: ",";\n    color: ",";\n    font-weight: 400;\n    opacity: 0.6;\n  }\n\n  :focus {\n    outline: none;\n    & ~ ","::after {\n      box-shadow: ",";\n    }\n  }\n\n  &.has-error ~ ","::after {\n    box-shadow: ",";\n  }\n"])),o.theme.space16,o.theme.space8,o.theme.transition,o.theme.radius6,o.theme.inputBackground,o.theme.fontSizeBase,o.theme.radius6,o.theme.radius6,o.theme.space24,o.theme.space8,o.theme.space16,f,b,o.theme.gray0,o.theme.radius6,o.theme.transition,o.theme.gray400,b,o.theme.glowBlue,b,o.theme.glowError),x=p.default.div(h||(h=n.__makeTemplateObject(["\n  position: relative;\n  width: ",";\n\n  &.disabled {\n    * {\n      cursor: not-allowed;\n    }\n    "," {\n      opacity: 0.4;\n    }\n    "," {\n      user-select: none;\n    }\n  }\n"],["\n  position: relative;\n  width: ",";\n\n  &.disabled {\n    * {\n      cursor: not-allowed;\n    }\n    "," {\n      opacity: 0.4;\n    }\n    "," {\n      user-select: none;\n    }\n  }\n"])),(function(n){return n.width?"".concat(n.width,"px"):"100%"}),u,m),g=t.forwardRef((function(t,o){var r=t.className,i=t.disabled,s=t.error,l=t.helpText,d=t.label,c=t.value,h=t.rows,p=t.width,g=n.__rest(t,["className","disabled","error","helpText","label","value","rows","width"]),w=!!c;return e.jsxs(x,n.__assign({width:p,className:"amino-input-wrapper ".concat(r||""," ").concat(i?"disabled":"")},{children:[e.jsxs(u,{children:[e.jsx(m,n.__assign({className:[s?"has-error":"",d?"has-label":"",w?"has-content":""].join(" "),disabled:i,ref:o,rows:h,label:d,value:c},g)),e.jsx(f,n.__assign({"data-label":d},{children:d})),e.jsx(b,{})]}),e.jsx(a.HelpText,{error:s,helpText:l})]}))}));exports.Textarea=g;

package/components/theme-select/ThemeSelect.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export type Props = {
+    className?: string;
     disabled?: boolean;
     type?: 'cards' | 'select' | 'toggle';
 };
-export declare const ThemeSelect: ({ disabled, type }: Props) => JSX.Element;
+export declare const ThemeSelect: ({ className, disabled, type, }: Props) => JSX.Element;

package/components/theme-select/ThemeSelect.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("../../icons/custom/theme/ThemeDarkIcon.js"),i=require("../../icons/custom/theme/ThemeLightIcon.js"),r=require("../../icons/NightIcon.js"),o=require("../../icons/SunnyIcon.js"),s=require("../../styles/constants/theme.js"),a=require("../../utils/hooks/useAminoTheme.js"),c=require("styled-components"),u=require("../card/Card.js"),l=require("../select/Select.js"),d=require("../stack/HStack.js"),h=require("../text/Text.js");function m(e){return e&&e.__esModule?e:{default:e}}require("react"),require("../../icons/flag-icon/useStableUniqueId.js"),require("uuid"),require("../../icons/icon-base/_ThemeIconBase.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.js"),require("../stack/Stack.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../checkbox/Checkbox.js"),require("framer-motion"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js");var p,x,g,b,j,k,f,y=m(c),q=y.default.button(p||(p=e.__makeTemplateObject(["\n  border: ",";\n  color: ",";\n  border-radius: ",";\n\n  &:not([disabled]) {\n    &:active,\n    &:focus {\n      outline: none;\n    }\n  }\n"],["\n  border: ",";\n  color: ",";\n  border-radius: ",";\n\n  &:not([disabled]) {\n    &:active,\n    &:focus {\n      outline: none;\n    }\n  }\n"])),(function(e){return"2px solid ".concat(e.isActive?s.theme.blue400:"transparent")}),(function(e){return e.isActive?s.theme.primary:s.theme.textColor}),s.theme.radius8),v=y.default(u.Card)(x||(x=e.__makeTemplateObject(["\n  background: ",";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: ",";\n\n  svg {\n    height: 64px;\n    width: 110px;\n    box-shadow: ",";\n    margin-bottom: ",";\n  }\n"],["\n  background: ",";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: ",";\n\n  svg {\n    height: 64px;\n    width: 110px;\n    box-shadow: ",";\n    margin-bottom: ",";\n  }\n"])),s.theme.gray0,s.theme.space16,s.theme.v3ShadowLarge,s.theme.space16),_=y.default.div(g||(g=e.__makeTemplateObject(["\n  background: ",";\n  height: 28px;\n  width: 28px;\n  border-radius: 50%;\n  transition: ",";\n  position: absolute;\n  top: 2px;\n  left: ",";\n"],["\n  background: ",";\n  height: 28px;\n  width: 28px;\n  border-radius: 50%;\n  transition: ",";\n  position: absolute;\n  top: 2px;\n  left: ",";\n"])),s.theme.primary,s.theme.transition,(function(e){return e.checked?"calc(100% - 30px)":"2px"})),w=y.default(o.SunnyIcon)(b||(b=e.__makeTemplateObject(["\n  position: absolute;\n  top: 6px;\n  right: 5.8px;\n  color: ",";\n"],["\n  position: absolute;\n  top: 6px;\n  right: 5.8px;\n  color: ",";\n"])),(function(e){return e.isActive?s.theme.gray0:s.theme.gray1200})),T=y.default(r.NightIcon)(j||(j=e.__makeTemplateObject(["\n  position: absolute;\n  top: 6px;\n  left: 6px;\n  color: ",";\n"],["\n  position: absolute;\n  top: 6px;\n  left: 6px;\n  color: ",";\n"])),(function(e){return e.isActive?s.theme.gray0:s.theme.gray1200})),I=y.default.div(k||(k=e.__makeTemplateObject(["\n  margin-right: ",";\n  width: 62px;\n  height: 32px;\n  min-width: 24px;\n  min-height: 16px;\n  line-height: 16px;\n  border-radius: 20px;\n  background: ",";\n  box-shadow: ",";\n  display: block;\n  user-select: none;\n  margin-right: ",";\n  position: relative;\n"],["\n  margin-right: ",";\n  width: 62px;\n  height: 32px;\n  min-width: 24px;\n  min-height: 16px;\n  line-height: 16px;\n  border-radius: 20px;\n  background: ",";\n  box-shadow: ",";\n  display: block;\n  user-select: none;\n  margin-right: ",";\n  position: relative;\n"])),s.theme.space16,(function(e){return e.checked?s.theme.gray50:s.theme.gray400}),s.theme.v3ShadowInset,s.theme.space16),S=y.default.label(f||(f=e.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n\n  &.disabled {\n    "," {\n      background: ",";\n    }\n    cursor: not-allowed;\n  }\n"],["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n\n  &.disabled {\n    "," {\n      background: ",";\n    }\n    cursor: not-allowed;\n  }\n"])),I,(function(e){return e.checked?s.theme.gray300:""})),C=[{label:"Light",value:"day"},{label:"Dark",value:"night"}];exports.ThemeSelect=function(s){var c=s.disabled,u=void 0!==c&&c,m=s.type,p=void 0===m?"select":m,x=a.useAminoTheme(),g=x.aminoTheme,b=x.setAminoTheme,j="day"===g;return n.jsxs(n.Fragment,{children:["cards"===p&&n.jsxs(d.HStack,{children:[n.jsx(q,e.__assign({onClick:function(){return b("day")},type:"button","data-theme":"day",isActive:"day"===g},{children:n.jsxs(v,{children:[n.jsx(i.ThemeLightIcon,{}),n.jsx(h.Text,e.__assign({type:"bold-label"},{children:"Light"}))]})})),n.jsx(q,e.__assign({onClick:function(){return b("night")},type:"button","data-theme":"night",isActive:"night"===g},{children:n.jsxs(v,{children:[n.jsx(t.ThemeDarkIcon,{}),n.jsx(h.Text,e.__assign({type:"bold-label"},{children:"Dark"}))]})}))]}),"select"===p&&n.jsx(l.Select,{value:C.filter((function(e){return e.value===g})),options:C,icon:function(){switch(g){case"day":default:return n.jsx(o.SunnyIcon,{});case"night":return n.jsx(r.NightIcon,{})}}(),onChange:function(e){return b((null==e?void 0:e.value)||"day")},isDisabled:u,isClearable:!1}),"toggle"===p&&n.jsx(S,e.__assign({className:u?"disabled":"",checked:j,onClick:function(){return!u&&b("day"===g?"night":"day")}},{children:n.jsxs(I,e.__assign({checked:j},{children:[n.jsx(_,{checked:j,id:"amino-theme-switch"}),n.jsx(w,{size:20,isActive:"day"===g}),n.jsx(T,{size:20,isActive:"night"===g})]}))}))]})};
+"use strict";var e=require("../../_tslib-fe391a2e.js"),n=require("react/jsx-runtime"),t=require("../../icons/custom/theme/ThemeDarkIcon.js"),i=require("../../icons/custom/theme/ThemeLightIcon.js"),r=require("../../icons/NightIcon.js"),s=require("../../icons/SunnyIcon.js"),o=require("../../styles/constants/theme.js"),a=require("../../utils/hooks/useAminoTheme.js"),c=require("styled-components"),l=require("../card/Card.js"),u=require("../select/Select.js"),d=require("../stack/HStack.js"),h=require("../text/Text.js");function m(e){return e&&e.__esModule?e:{default:e}}require("react"),require("../../icons/flag-icon/useStableUniqueId.js"),require("uuid"),require("../../icons/icon-base/_ThemeIconBase.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("swr"),require("../../utils/hooks/useSwr.js"),require("../stack/Stack.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../checkbox/Checkbox.js"),require("framer-motion"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js");var p,x,g,b,j,k,f,y=m(c),q=y.default.button(p||(p=e.__makeTemplateObject(["\n  border: ",";\n  color: ",";\n  border-radius: ",";\n\n  &:not([disabled]) {\n    &:active,\n    &:focus {\n      outline: none;\n    }\n  }\n"],["\n  border: ",";\n  color: ",";\n  border-radius: ",";\n\n  &:not([disabled]) {\n    &:active,\n    &:focus {\n      outline: none;\n    }\n  }\n"])),(function(e){return"2px solid ".concat(e.isActive?o.theme.blue400:"transparent")}),(function(e){return e.isActive?o.theme.primary:o.theme.textColor}),o.theme.radius8),_=y.default(l.Card)(x||(x=e.__makeTemplateObject(["\n  background: ",";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: ",";\n\n  svg {\n    height: 64px;\n    width: 110px;\n    box-shadow: ",";\n    margin-bottom: ",";\n  }\n"],["\n  background: ",";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: ",";\n\n  svg {\n    height: 64px;\n    width: 110px;\n    box-shadow: ",";\n    margin-bottom: ",";\n  }\n"])),o.theme.gray0,o.theme.space16,o.theme.v3ShadowLarge,o.theme.space16),v=y.default.div(g||(g=e.__makeTemplateObject(["\n  background: ",";\n  height: 28px;\n  width: 28px;\n  border-radius: 50%;\n  transition: ",";\n  position: absolute;\n  top: 2px;\n  left: ",";\n"],["\n  background: ",";\n  height: 28px;\n  width: 28px;\n  border-radius: 50%;\n  transition: ",";\n  position: absolute;\n  top: 2px;\n  left: ",";\n"])),o.theme.primary,o.theme.transition,(function(e){return e.checked?"calc(100% - 30px)":"2px"})),w=y.default(s.SunnyIcon)(b||(b=e.__makeTemplateObject(["\n  position: absolute;\n  top: 6px;\n  right: 5.8px;\n  color: ",";\n"],["\n  position: absolute;\n  top: 6px;\n  right: 5.8px;\n  color: ",";\n"])),(function(e){return e.isActive?o.theme.gray0:o.theme.gray1200})),T=y.default(r.NightIcon)(j||(j=e.__makeTemplateObject(["\n  position: absolute;\n  top: 6px;\n  left: 6px;\n  color: ",";\n"],["\n  position: absolute;\n  top: 6px;\n  left: 6px;\n  color: ",";\n"])),(function(e){return e.isActive?o.theme.gray0:o.theme.gray1200})),I=y.default.div(k||(k=e.__makeTemplateObject(["\n  margin-right: ",";\n  width: 62px;\n  height: 32px;\n  min-width: 24px;\n  min-height: 16px;\n  line-height: 16px;\n  border-radius: 20px;\n  background: ",";\n  box-shadow: ",";\n  display: block;\n  user-select: none;\n  position: relative;\n"],["\n  margin-right: ",";\n  width: 62px;\n  height: 32px;\n  min-width: 24px;\n  min-height: 16px;\n  line-height: 16px;\n  border-radius: 20px;\n  background: ",";\n  box-shadow: ",";\n  display: block;\n  user-select: none;\n  position: relative;\n"])),o.theme.space16,o.theme.gray50,o.theme.v3ShadowInset),S=y.default.label(f||(f=e.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n\n  &.disabled {\n    "," {\n      background: ",";\n    }\n    cursor: not-allowed;\n  }\n"],["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n\n  &.disabled {\n    "," {\n      background: ",";\n    }\n    cursor: not-allowed;\n  }\n"])),I,(function(e){return e.checked?o.theme.gray300:""})),C=[{label:"Light",value:"day"},{label:"Dark",value:"night"}];exports.ThemeSelect=function(o){var c=o.className,l=o.disabled,m=void 0!==l&&l,p=o.type,x=void 0===p?"select":p,g=a.useAminoTheme(),b=g.aminoTheme,j=g.setAminoTheme,k="day"===b;return n.jsxs(n.Fragment,{children:["cards"===x&&n.jsxs(d.HStack,e.__assign({className:c},{children:[n.jsx(q,e.__assign({onClick:function(){return j("day")},type:"button","data-theme":"day",isActive:"day"===b},{children:n.jsxs(_,{children:[n.jsx(i.ThemeLightIcon,{}),n.jsx(h.Text,e.__assign({type:"bold-label"},{children:"Light"}))]})})),n.jsx(q,e.__assign({onClick:function(){return j("night")},type:"button","data-theme":"night",isActive:"night"===b},{children:n.jsxs(_,{children:[n.jsx(t.ThemeDarkIcon,{}),n.jsx(h.Text,e.__assign({type:"bold-label"},{children:"Dark"}))]})}))]})),"select"===x&&n.jsx(u.Select,{className:c,value:C.filter((function(e){return e.value===b})),options:C,icon:function(){switch(b){case"day":default:return n.jsx(s.SunnyIcon,{});case"night":return n.jsx(r.NightIcon,{})}}(),onChange:function(e){return j((null==e?void 0:e.value)||"day")},isDisabled:m,isClearable:!1}),"toggle"===x&&n.jsx(S,e.__assign({className:"".concat(c," ").concat(m?"disabled":""),checked:k,onClick:function(){return!m&&j("day"===b?"night":"day")}},{children:n.jsxs(I,e.__assign({checked:k},{children:[n.jsx(v,{checked:k,id:"amino-theme-switch"}),n.jsx(w,{size:20,isActive:"day"===b}),n.jsx(T,{size:20,isActive:"night"===b})]}))}))]})};

package/package.json

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

package/styles/constants/theme.d.ts

@@ -153,7 +153,7 @@ export declare const theme: {
     readonly purple1000: "var(--amino-purple-1000)";
     /** @info #FFFFFFBB */
     readonly transparentWhite: "var(--amino-transparent-white)";
-    /** @info #000000BB */
+    /** @info #101116BB */
     readonly transparentBlack: "var(--amino-transparent-black)";
     /** @info 0px 0px 0px 1px rgba(110, 110, 120, 0.1), 0px 1px 2px rgba(10, 10, 11, 0.06), 0px 1px 3px rgba(10, 10, 11, 0.1) */
     readonly v3ShadowBase: "var(--amino-v3-shadow-base)";
@@ -317,7 +317,7 @@ export declare const theme: {
     readonly surfaceColor: "var(--amino-surface-color)";
     /** @info var(--amino-gray-50) */
     readonly surfaceColorSecondary: "var(--amino-surface-color-secondary)";
-    /** @info var(--amino-gray-1000) */
+    /** @info var(--amino-gray-1200) */
     readonly backdropColor: "var(--amino-backdrop-color)";
     /** @info 55px */
     readonly appbarHeight: "var(--amino-appbar-height)";

package/theme.css

@@ -77,7 +77,7 @@
   --amino-purple-900: #54206a;
   --amino-purple-1000: #3b1948;
   --amino-transparent-white: #ffffffbb;
-  --amino-transparent-black: #000000bb;
+  --amino-transparent-black: #101116bb;
   --amino-v3-shadow-base: 0px 0px 0px 1px rgba(110, 110, 120, 0.1),
     0px 1px 2px rgba(10, 10, 11, 0.06), 0px 1px 3px rgba(10, 10, 11, 0.1);
   --amino-v3-shadow-medium: 0px 0px 0px 1px rgba(110, 110, 120, 0.1),
@@ -167,7 +167,7 @@
   --amino-text-color: var(--amino-gray-1000);
   --amino-surface-color: var(--amino-gray-0);
   --amino-surface-color-secondary: var(--amino-gray-50);
-  --amino-backdrop-color: var(--amino-gray-1000);
+  --amino-backdrop-color: var(--amino-gray-1200);
   --amino-appbar-height: 55px;
   --amino-sidebar-width: 264px;
   --amino-elevation-0: 0;
@@ -288,7 +288,7 @@
   --amino-purple-800: #ddc5fc;
   --amino-purple-900: #e7d8fd;
   --amino-purple-1000: #f4eeff;
-  --amino-transparent-white: #000000bb;
+  --amino-transparent-white: #101116bb;
   --amino-transparent-black: #ffffffbb;
   --amino-v3-shadow-base: 0px 0px 0px 1px rgba(255, 255, 255, 0.12),
     0px 1px 3px rgba(0, 0, 0, 0.9), 0px 1px 2px rgba(0, 0, 0, 0.8);
@@ -340,5 +340,5 @@
   --amino-text-color: var(--amino-gray-1000);
   --amino-surface-color: var(--amino-gray-50);
   --amino-surface-color-secondary: var(--amino-gray-100);
-  --amino-backdrop-color: var(--amino-gray-100);
+  --amino-backdrop-color: var(--amino-gray-0);
 }