@manamerge/mana-atomic-ui 1.0.185 → 1.0.187

package/dist/index.js

@@ -40,7 +40,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 
 const ButtonStyle = styled.button `
     ${({ variant, theme, disabled }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
     const buttonStyles = (theme === null || theme === void 0 ? void 0 : theme.button[variant]) || {};
     return css `
             /* Default State */
@@ -80,31 +80,43 @@ const ButtonStyle = styled.button `
             gap: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.gap) || "8px"};
 
             /* Hover State */
+            svg {
+                transition: ${(buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.transition) || "all 0.2s ease"};
+            }
             &:hover {
                 background: ${!disabled && ((_h = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _h === void 0 ? void 0 : _h.background)};
                 color: ${!disabled && ((_j = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _j === void 0 ? void 0 : _j.text)};
                 border: ${!disabled && ((_k = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _k === void 0 ? void 0 : _k.border)};
-                filter: ${!disabled && ((_l = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _l === void 0 ? void 0 : _l.filter)};
+                opacity: ${!disabled && ((_l = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _l === void 0 ? void 0 : _l.opacity)};
+                filter: ${!disabled && ((_m = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _m === void 0 ? void 0 : _m.filter)};
+
+                svg {
+                    color: ${!disabled && ((_o = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _o === void 0 ? void 0 : _o.text)};
+                    fill: ${!disabled && ((_p = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _p === void 0 ? void 0 : _p.text)};
+                    stroke: ${!disabled && ((_q = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _q === void 0 ? void 0 : _q.text)};
+                    opacity: ${!disabled && ((_r = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.hover) === null || _r === void 0 ? void 0 : _r.opacity)};
+                }
             }
 
             /* Active State */
             &:active {
-                background: ${!disabled && ((_m = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _m === void 0 ? void 0 : _m.background)};
-                color: ${!disabled && ((_o = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _o === void 0 ? void 0 : _o.text)};
-                border: ${!disabled && ((_p = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _p === void 0 ? void 0 : _p.border)};
-                filter: ${(!disabled && ((_q = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _q === void 0 ? void 0 : _q.filter)) ||
+                background: ${!disabled && ((_s = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _s === void 0 ? void 0 : _s.background)};
+                color: ${!disabled && ((_t = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _t === void 0 ? void 0 : _t.text)};
+                border: ${!disabled && ((_u = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _u === void 0 ? void 0 : _u.border)};
+                filter: ${(!disabled && ((_v = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.active) === null || _v === void 0 ? void 0 : _v.filter)) ||
         "brightness(0.9)"};
             }
 
             /* Focus State */
             &:focus-visible {
-                outline: 2px solid ${((_r = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.focus) === null || _r === void 0 ? void 0 : _r.outline) || "red"};
-                outline-offset: 2px;
+                outline: ${((_w = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.focusVisible) === null || _w === void 0 ? void 0 : _w.outline) ||
+        "2px solid red"};
+                outline-offset: ${(_x = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.focusVisible) === null || _x === void 0 ? void 0 : _x.outlineOffset};
             }
 
             &:disabled {
                 cursor: not-allowed;
-                color: ${disabled && ((_s = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _s === void 0 ? void 0 : _s.text)};
+                color: ${disabled && ((_y = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles.disabled) === null || _y === void 0 ? void 0 : _y.text)};
                 background: ${disabled && buttonStyles.disabled.background};
                 border-color: ${disabled && `${buttonStyles.disabled.border}`};
                 opacity: ${disabled && buttonStyles.disabled.opacity};
@@ -1285,17 +1297,18 @@ const Card$1 = styled.div `
                 background-image:
                     radial-gradient(
                         circle at ${gradientPosition},
-                        ${thisTheme.gradientColor}55,
+                        ${thisTheme.gradientColor}25,
                         transparent 70%
                     ),
                     radial-gradient(
                         circle at ${gradientPosition},
-                        ${thisTheme.gradientColor}22,
+                        ${thisTheme.gradientColor}12,
                         transparent 75%
                     );
             `}
             border: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.border};
             outline: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.outline};
+            /* outline-offset: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.outlineOffset) || "-2px"}; */
             border-radius: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.borderRadius};
             box-shadow: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.boxShadow};
             box-sizing: border-box;
@@ -1390,15 +1403,18 @@ const Card = styled.div `
 }}
 `;
 const AtomHeading$1 = styled(Heading).attrs(({ theme, moleculeVariant }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     return ({
-        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomHeading) === null || _c === void 0 ? void 0 : _c.variant
+        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomHeading) === null || _c === void 0 ? void 0 : _c.variant,
+        asTag: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomHeading) === null || _f === void 0 ? void 0 : _f.asTag,
+        vColor: (_j = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _g === void 0 ? void 0 : _g[moleculeVariant]) === null || _h === void 0 ? void 0 : _h.atomHeading) === null || _j === void 0 ? void 0 : _j.vColor
     });
 }) ``;
 const AtomText$1 = styled(Text).attrs(({ theme, moleculeVariant }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     return ({
-        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomText) === null || _c === void 0 ? void 0 : _c.variant
+        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomText) === null || _c === void 0 ? void 0 : _c.variant,
+        vColor: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomText) === null || _f === void 0 ? void 0 : _f.vColor
     });
 }) ``;
 const AtomButton = styled(Button).attrs(({ theme, moleculeVariant }) => {
@@ -1408,11 +1424,12 @@ const AtomButton = styled(Button).attrs(({ theme, moleculeVariant }) => {
     });
 }) ``;
 const AtomIcon$1 = styled(Icon).attrs(({ theme, moleculeVariant }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     return ({
         variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomIcon) === null || _c === void 0 ? void 0 : _c.variant,
         stroke: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomIcon) === null || _f === void 0 ? void 0 : _f.stroke,
-        color: (_j = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _g === void 0 ? void 0 : _g[moleculeVariant]) === null || _h === void 0 ? void 0 : _h.atomIcon) === null || _j === void 0 ? void 0 : _j.color
+        fill: (_j = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _g === void 0 ? void 0 : _g[moleculeVariant]) === null || _h === void 0 ? void 0 : _h.atomIcon) === null || _j === void 0 ? void 0 : _j.fill,
+        color: (_m = (_l = (_k = theme === null || theme === void 0 ? void 0 : theme.cardBanner) === null || _k === void 0 ? void 0 : _k[moleculeVariant]) === null || _l === void 0 ? void 0 : _l.atomIcon) === null || _m === void 0 ? void 0 : _m.color
     });
 }) ``;