@manamerge/mana-atomic-ui 1.0.182 → 1.0.184

package/dist/index.d.ts

@@ -177,6 +177,7 @@ interface CardSimpleRenderTypes {
     icon?: FunctionComponent<SVGProps<SVGSVGElement>>;
     title?: string;
     description?: string;
+    gradientPosition?: "center" | "top" | "bottom" | "left" | "right" | "top left" | "top right" | "bottom left" | "bottom right";
     children?: ReactNode;
     onClick?: React.MouseEventHandler<HTMLElement>;
 }

package/dist/index.js

@@ -540,7 +540,6 @@ const WrapperHeader = styled.div `
     display: flex;
     flex-direction: column;
     justify-content: center;
-    text-align: center;
     gap: 15px;
     position: relative;
     ${({ theme, moleculeVariant }) => {
@@ -549,6 +548,7 @@ const WrapperHeader = styled.div `
     return css `
             align-items: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.alignItems) || "center"};
             padding: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.padding};
+            text-align: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.textAlign};
         `;
 }}
 `;
@@ -1270,8 +1270,8 @@ const BreakerTape = ({ moleculeVariant = "primary", words, svg }) => {
 };
 
 const Card$1 = styled.div `
-    ${({ theme, moleculeVariant, cardHover }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    ${({ theme, moleculeVariant, cardHover, gradientPosition }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const thisTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
     return css `
             all: unset;
@@ -1280,8 +1280,22 @@ const Card$1 = styled.div `
             min-width: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.minWidth) || "auto"};
             max-width: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.maxWidth) || "auto"};
             background: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.background};
-            background-image: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gradientBackground};
+            ${gradientPosition &&
+        css `
+                background-image:
+                    radial-gradient(
+                        circle at ${gradientPosition},
+                        ${thisTheme.gradientColor}55,
+                        transparent 70%
+                    ),
+                    radial-gradient(
+                        circle at ${gradientPosition},
+                        ${thisTheme.gradientColor}22,
+                        transparent 75%
+                    );
+            `}
             border: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.border};
+            outline: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.outline};
             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;
@@ -1295,15 +1309,17 @@ const Card$1 = styled.div `
         css `
                 &:focus {
                     border: ${(_b = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.focus) === null || _b === void 0 ? void 0 : _b.border};
-                    box-shadow: ${(_c = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.focus) === null || _c === void 0 ? void 0 : _c.boxShadow};
-                    transition: ${(_d = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.focus) === null || _d === void 0 ? void 0 : _d.transition};
+                    outline: ${(_c = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.focus) === null || _c === void 0 ? void 0 : _c.outline};
+                    box-shadow: ${(_d = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.focus) === null || _d === void 0 ? void 0 : _d.boxShadow};
+                    transition: ${(_e = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.focus) === null || _e === void 0 ? void 0 : _e.transition};
                 }
 
                 &:hover {
                     cursor: pointer;
-                    border: ${(_e = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.hover) === null || _e === void 0 ? void 0 : _e.border};
-                    box-shadow: ${(_f = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.hover) === null || _f === void 0 ? void 0 : _f.boxShadow};
-                    transition: ${(_g = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.hover) === null || _g === void 0 ? void 0 : _g.transition};
+                    border: ${(_f = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.hover) === null || _f === void 0 ? void 0 : _f.border};
+                    outline: ${(_g = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.hover) === null || _g === void 0 ? void 0 : _g.outline};
+                    box-shadow: ${(_h = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.hover) === null || _h === void 0 ? void 0 : _h.boxShadow};
+                    transition: ${(_j = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.hover) === null || _j === void 0 ? void 0 : _j.transition};
                 }
             `}
         `;
@@ -1318,16 +1334,18 @@ const WrapperLine = styled.div `
     gap: 10px;
 `;
 const AtomIcon$2 = styled(Icon).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.cardSimpleRender) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomIcon) === null || _c === void 0 ? void 0 : _c.variant
+        variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomIcon) === null || _c === void 0 ? void 0 : _c.variant,
+        fill: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomIcon) === null || _f === void 0 ? void 0 : _f.fill,
+        stroke: (_j = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _g === void 0 ? void 0 : _g[moleculeVariant]) === null || _h === void 0 ? void 0 : _h.atomIcon) === null || _j === void 0 ? void 0 : _j.stroke
     });
 }) ``;
 const AtomHeading$2 = styled(Heading).attrs(({ theme, moleculeVariant }) => {
     var _a, _b, _c, _d, _e, _f;
     return ({
         variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomHeading) === null || _c === void 0 ? void 0 : _c.variant,
-        as: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomHeading) === null || _f === void 0 ? void 0 : _f.as
+        asTag: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomHeading) === null || _f === void 0 ? void 0 : _f.asTag
     });
 }) ``;
 const AtomText$2 = styled(Text).attrs(({ theme, moleculeVariant }) => {
@@ -1337,9 +1355,9 @@ const AtomText$2 = styled(Text).attrs(({ theme, moleculeVariant }) => {
     });
 }) ``;
 
-const CardSimpleRender = ({ moleculeVariant = "primary", icon, title, description, children, onClick }) => {
+const CardSimpleRender = ({ moleculeVariant = "primary", icon, title, description, gradientPosition, children, onClick }) => {
     const compVariant = `CardSimpleRender-${moleculeVariant}`;
-    return (jsxs(Card$1, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant, as: onClick ? "button" : "div", onClick: onClick, cardHover: !!onClick }, { children: [(icon || title || description) && (jsxs("div", { children: [(icon || title) && (jsxs(WrapperLine, { children: [icon && (jsx(AtomIcon$2, { moleculeVariant: compVariant, svg: icon })), title && (jsx(AtomHeading$2, Object.assign({ moleculeVariant: compVariant }, { children: title })))] })), description && (jsx(AtomText$2, Object.assign({ moleculeVariant: compVariant }, { children: description })))] })), children] })));
+    return (jsxs(Card$1, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant, as: onClick ? "button" : "div", onClick: onClick, cardHover: !!onClick, gradientPosition: gradientPosition }, { children: [(icon || title || description) && (jsxs("div", { children: [(icon || title) && (jsxs(WrapperLine, { children: [icon && (jsx(AtomIcon$2, { moleculeVariant: compVariant, svg: icon })), title && (jsx(AtomHeading$2, Object.assign({ moleculeVariant: compVariant }, { children: title })))] })), description && (jsx(AtomText$2, Object.assign({ moleculeVariant: compVariant }, { children: description })))] })), children] })));
 };
 
 const Card = styled.div `