@mmb-digital/design-system-web 0.1.72 → 0.1.74

package/dist/index.cjs.js

@@ -212,6 +212,10 @@
 	cursor: pointer;
 	border: none;
 	outline: none;
+	transition-timing-function: ease-in-out;
+	transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
+	transition-duration: 0.2s;
+	transition-property: color, background-color, box-shadow;
 
 	&:focus-visible {
 		outline-width: 3px;
@@ -247,24 +251,24 @@
 				`;case exports.ButtonStyle.SECONDARY:return t.css`
 					color: ${({theme:e})=>n(e.colors.fg.neutral.subtle)} !important;
 					background-color: transparent;
-					box-shadow: inset 0 0 0 1px ${({theme:e})=>n(e.colors.border.neutral.subtle)};
+					box-shadow: 0 0 0 1px ${({theme:e})=>n(e.colors.border.neutral.subtle)};
 
 					&:disabled {
 						color: ${({theme:e})=>n(e.colors.fg.disabled)} !important;
 						background-color: transparent;
-						box-shadow: inset 0 0 0 1px solid ${({theme:e})=>n(e.colors.bg.disabled)};
+						box-shadow: 0 0 0 1px solid ${({theme:e})=>n(e.colors.bg.disabled)};
 					}
 
 					&:hover:not([disabled]) {
 						color: ${({theme:e})=>n(e.colors.fg.brand.bold)} !important;
 						background-color: ${({theme:e})=>n(e.colors.bg.brand.default)};
-						box-shadow: inset 0 0 0 2px ${({theme:e})=>n(e.colors.border.brand.subtle)};
+						box-shadow: 0 0 0 2px ${({theme:e})=>n(e.colors.border.brand.subtle)};
 					}
 
 					&:active:not([disabled]) {
 						color: ${({theme:e})=>n(e.colors.fg.brand.bold)} !important;
 						background-color: ${({theme:e})=>n(e.colors.bg.brand.default.pressed)};
-						box-shadow: inset 0 0 0 2px ${({theme:e})=>n(e.colors.border.brand.subtle)};
+						box-shadow: 0 0 0 2px ${({theme:e})=>n(e.colors.border.brand.subtle)};
 					}
 				`;case exports.ButtonStyle.TERTIARY:return t.css`
 					color: ${({theme:e})=>n(e.colors.fg.neutral.subtle)} !important;
@@ -278,13 +282,13 @@
 					&:hover:not([disabled]) {
 						color: ${({theme:e})=>n(e.colors.fg.brand.bold)} !important;
 						background-color: ${({theme:e})=>n(e.colors.bg.brand.default)};
-						box-shadow: inset 0 0 0 2px ${({theme:e})=>n(e.colors.border.brand.subtle)};
+						box-shadow: 0 0 0 2px ${({theme:e})=>n(e.colors.border.brand.subtle)};
 					}
 
 					&:active:not([disabled]) {
 						color: ${({theme:e})=>n(e.colors.fg.brand.bold)} !important;
 						background-color: ${({theme:e})=>n(e.colors.bg.brand.default.pressed)};
-						box-shadow: none;
+						box-shadow: 0 0 0 2px ${({theme:e})=>n(e.colors.bg.brand.default.pressed)};
 					}
 				`;default:return""}}}
 
@@ -1428,7 +1432,7 @@ function Gu(e,t,n){return t=qu(t),function(e,t){if(t&&("object"==typeof t||"func
 	::placeholder {
 		color: ${({theme:e})=>e.palette.grey700};
 	}
-`,ip=t=>{const n=e.useRef(null),[r,o]=e.useState(void 0),a=Boolean(t)||0===t,i=e.useCallback((()=>{n.current&&o(n.current.offsetWidth)}),[]),s=qo(i,500,{maxWait:500});return e.useLayoutEffect((()=>{a&&i()}),[a,i]),e.useEffect((()=>(a&&window.addEventListener("resize",s),()=>{a&&window.removeEventListener("resize",s)})),[a,s]),{width:r,wrapperRef:n}},sp=e.forwardRef(((t,n)=>{const{button:r,colorInput:o,colorScheme:a=exports.ColorScheme.light,halfWidth:i,icon:s,id:l,maxLength:u,name:c,onBlur:d,onChange:p,onFocus:h,placeholder:f,prefix:m,prefixColor:g,size:b,suffix:v,weight:y=exports.InputWeight.REGULAR_400}=t,x=Ht(t,["button","colorInput","colorScheme","halfWidth","icon","id","maxLength","name","onBlur","onChange","onFocus","placeholder","prefix","prefixColor","size","suffix","weight"]),k=H(a),w=Ur([n,e.useRef(null)]),{width:C,wrapperRef:E}=ip(m),{width:I,wrapperRef:S}=ip(v);return e.createElement(Qd,{$halfWidth:i,$size:b},void 0!==s&&e.createElement(np,null,s),void 0!==m&&""!==m&&e.createElement(rp,{$chooseColor:k,$prefixColor:g,ref:E},m),e.createElement(tp,Object.assign({button:r,colorInput:o,halfWidth:i,icon:s,id:l,maxLength:u,name:c,placeholder:f,prefixWidth:C,ref:w,size:b,suffixWidth:I,weight:y,onBlur:d,onChange:p,onFocus:h},x)),void 0!==v&&""!==v&&e.createElement(ap,{ref:S},v),void 0!==r&&e.createElement(op,null,r))}));sp.displayName="InputBase";const lp=t.label`
+`,ip=(t,n)=>{const r=e.useRef(null),[o,a]=e.useState(void 0),i=Boolean(t)||0===t,s=e.useCallback((()=>{r.current&&a(r.current.offsetWidth)}),[]),l=qo(s,500,{maxWait:500});return e.useLayoutEffect((()=>{i&&s()}),[i,s]),e.useEffect((()=>{var e;return null===(e=n.current)||void 0===e||e.addEventListener("focus",s),()=>{var e;null===(e=n.current)||void 0===e||e.removeEventListener("focus",s)}}),[n,s]),e.useEffect((()=>(i&&window.addEventListener("resize",l),()=>{i&&window.removeEventListener("resize",l)})),[i,l]),{width:o,wrapperRef:r}},sp=e.forwardRef(((t,n)=>{const{button:r,colorInput:o,colorScheme:a=exports.ColorScheme.light,halfWidth:i,icon:s,id:l,maxLength:u,name:c,onBlur:d,onChange:p,onFocus:h,placeholder:f,prefix:m,prefixColor:g,size:b,suffix:v,weight:y=exports.InputWeight.REGULAR_400}=t,x=Ht(t,["button","colorInput","colorScheme","halfWidth","icon","id","maxLength","name","onBlur","onChange","onFocus","placeholder","prefix","prefixColor","size","suffix","weight"]),k=H(a),w=e.useRef(null),C=Ur([n,w]),{width:E,wrapperRef:I}=ip(m,w),{width:S,wrapperRef:T}=ip(v,w);return e.createElement(Qd,{$halfWidth:i,$size:b},void 0!==s&&e.createElement(np,null,s),void 0!==m&&""!==m&&e.createElement(rp,{$chooseColor:k,$prefixColor:g,ref:I},m),e.createElement(tp,Object.assign({button:r,colorInput:o,halfWidth:i,icon:s,id:l,maxLength:u,name:c,placeholder:f,prefixWidth:E,ref:C,size:b,suffixWidth:S,weight:y,onBlur:d,onChange:p,onFocus:h},x)),void 0!==v&&""!==v&&e.createElement(ap,{ref:T},v),void 0!==r&&e.createElement(op,null,r))}));sp.displayName="InputBase";const lp=t.label`
 	display: flex;
 	gap: ${({theme:e})=>e.spacing.xxs};
 	align-items: center;