@manamerge/mana-atomic-ui 1.0.45 → 1.0.47

package/dist/themes/themes/manamerge/images/icons/navigation/user.svg.js

@@ -1,30 +1,34 @@
-import React from "react";
-// eslint-disable-next-line react/prop-types
-const UserIcon = ({ color }) => (
-    <svg
-        width="24"
-        height="25"
-        viewBox="0 0 24 25"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <path
-            d="M20 21.5V19.5C20 17.2909 18.2091 15.5 16 15.5L8 15.5C5.79086 15.5 4 17.2909 4 19.5V21.5"
-            stroke={color}
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-        />
-        <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M12 11.5C14.2091 11.5 16 9.70914 16 7.5C16 5.29086 14.2091 3.5 12 3.5C9.79086 3.5 8 5.29086 8 7.5C8 9.70914 9.79086 11.5 12 11.5Z"
-            stroke={color}
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-        />
-    </svg>
-);
+"use strict";
 
-export default UserIcon;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+// eslint-disable-next-line react/prop-types
+var UserIcon = function UserIcon(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "24",
+    height: "25",
+    viewBox: "0 0 24 25",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M20 21.5V19.5C20 17.2909 18.2091 15.5 16 15.5L8 15.5C5.79086 15.5 4 17.2909 4 19.5V21.5",
+    stroke: color,
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 11.5C14.2091 11.5 16 9.70914 16 7.5C16 5.29086 14.2091 3.5 12 3.5C9.79086 3.5 8 5.29086 8 7.5C8 9.70914 9.79086 11.5 12 11.5Z",
+    stroke: color,
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+var _default = exports["default"] = UserIcon;

package/dist/themes/themes/manamerge/miscellaneous/colorpalette.ts

@@ -27,12 +27,13 @@ const colors = {
         a: "#FF1A1A",
         b: "#590E0E"
     }
-} as const;
+};
 
-type NestedValues<T> = {
-    [K in keyof T]: T[K] extends object ? NestedValues<T[K]> : T[K];
-}[keyof T];
+// ? WIP - see card 158
+// type NestedValues<T> = {
+//     [K in keyof T]: T[K] extends object ? NestedValues<T[K]> : T[K];
+// }[keyof T];
 
-type PaletteColor = NestedValues<typeof colors>;
-export type { PaletteColor };
+// type PaletteColor = NestedValues<typeof colors>;
+// export type { PaletteColor };
 export default colors;

package/dist/themes/themes/manamerge/miscellaneous/fontsizes.ts

@@ -7,7 +7,9 @@ const fontsizes = {
     xxl: "24px",
     xxxl: "30px",
     xxxxl: "36px"
-} as const;
-export type FontSize = keyof typeof fontsizes;
+};
+
+// ? WIP - see card 158
+// export type FontSize = keyof typeof fontsizes;
 
 export default fontsizes;

package/dist/themes/themes/manamerge/styling/chat-theme.css.js

@@ -1,80 +1,14 @@
-import { css } from "styled-components";
-import manaLogo from "../images/icons/sectionLogo_gray.svg";
-import bookMark from "../images/icons/bookmark.svg";
-import sendIcon from "../images/icons/send.svg";
-
-export default css`
-    background-color: #131414;
-    color: #ffffff;
-    padding: 14px;
-
-    .ChatRow-author,
-    .ChatRow-moderator,
-    .ChatRow-time,
-    .ChatRow-message {
-        font-family:
-            Metro Sans,
-            Verdana,
-            Geneva,
-            Tahoma,
-            sans-serif;
-        font-style: normal;
-        font-weight: normal;
-        font-size: 13px;
-        line-height: 18px;
-        letter-spacing: 0.0125em;
-        color: #f2f2f3;
-    }
-
-    .ChatRow {
-        padding: 8px 0px 15px;
-        border-bottom: 1px solid #232323;
-    }
-
-    .ChatRow-author {
-        font-family: Gilmer, Verdana, Geneva, Tahoma, sans-serif;
-        font-weight: bold;
-        font-size: 14px;
-        line-height: 20px;
-        color: #ffffff;
-    }
-
-    .ChatRow-moderator,
-    .ChatRow-time {
-        color: #9d9d9e;
-    }
-
-    .ChatRow-moderator {
-        height: 16px;
-        background-image: url(${manaLogo});
-        padding-left: 20px;
-        margin-top: 1px;
-    }
-
-    .ChatRow--pinned {
-        background-color: #212324;
-
-        .ChatRow-pinnedIcon {
-            background-image: url(${bookMark});
-            width: 20px;
-            height: 20px;
-            margin: 0;
-        }
-    }
-
-    .ChatRow-message a {
-        color: #7642bc;
-        &:hover {
-            color: #7642bc;
-        }
-    }
-
-    .InputChat-input {
-        background: #131414;
-    }
-    .InputChat-iconSend,
-    .InputChat-iconSend:hover {
-        margin: auto 0;
-        background-image: url(${sendIcon});
-    }
-`;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _styledComponents = require("styled-components");
+var _sectionLogo_gray = _interopRequireDefault(require("../images/icons/sectionLogo_gray.svg"));
+var _bookmark = _interopRequireDefault(require("../images/icons/bookmark.svg"));
+var _send = _interopRequireDefault(require("../images/icons/send.svg"));
+var _templateObject;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var _default = exports["default"] = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: #131414;\n    color: #ffffff;\n    padding: 14px;\n\n    .ChatRow-author,\n    .ChatRow-moderator,\n    .ChatRow-time,\n    .ChatRow-message {\n        font-family:\n            Metro Sans,\n            Verdana,\n            Geneva,\n            Tahoma,\n            sans-serif;\n        font-style: normal;\n        font-weight: normal;\n        font-size: 13px;\n        line-height: 18px;\n        letter-spacing: 0.0125em;\n        color: #f2f2f3;\n    }\n\n    .ChatRow {\n        padding: 8px 0px 15px;\n        border-bottom: 1px solid #232323;\n    }\n\n    .ChatRow-author {\n        font-family: Gilmer, Verdana, Geneva, Tahoma, sans-serif;\n        font-weight: bold;\n        font-size: 14px;\n        line-height: 20px;\n        color: #ffffff;\n    }\n\n    .ChatRow-moderator,\n    .ChatRow-time {\n        color: #9d9d9e;\n    }\n\n    .ChatRow-moderator {\n        height: 16px;\n        background-image: url(", ");\n        padding-left: 20px;\n        margin-top: 1px;\n    }\n\n    .ChatRow--pinned {\n        background-color: #212324;\n\n        .ChatRow-pinnedIcon {\n            background-image: url(", ");\n            width: 20px;\n            height: 20px;\n            margin: 0;\n        }\n    }\n\n    .ChatRow-message a {\n        color: #7642bc;\n        &:hover {\n            color: #7642bc;\n        }\n    }\n\n    .InputChat-input {\n        background: #131414;\n    }\n    .InputChat-iconSend,\n    .InputChat-iconSend:hover {\n        margin: auto 0;\n        background-image: url(", ");\n    }\n"])), _sectionLogo_gray["default"], _bookmark["default"], _send["default"]);

package/dist/themes/themes/manamerge/styling/filter-list-theme.css.js

@@ -1,47 +1,12 @@
-import { css } from "styled-components";
-import manaLogo from "../images/icons/sectionlogo.svg";
-
-export default css`
-    background-color: #000;
-    color: #f2f2f3;
-    h3,
-    .FilterListRow-title,
-    .FilterList-groupTitle,
-    .FilterList-listItem > label {
-        color: inherit;
-    }
-
-    .FilterList-btnGroup {
-        border-top: 1px solid #1d1e23;
-        button {
-            text-transform: capitalize;
-            color: inherit;
-        }
-    }
-
-    .FilterList-btnReset,
-    .FilterList-btnReset:hover {
-        background: transparent;
-        border: none;
-        color: inherit;
-    }
-
-    &.FilterList {
-        padding: 30px 35px 56px;
-    }
-
-    &.FilterListRow .FilterList-listItem[data-shape="manamerge"] {
-        &:before {
-            content: "";
-            background: 0 0 url(${manaLogo}) no-repeat;
-            width: 22px;
-            height: 22px;
-            margin: 0px 32px;
-            display: inline-block;
-            position: absolute;
-        }
-        label {
-            padding-left: 64px;
-        }
-    }
-`;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _styledComponents = require("styled-components");
+var _sectionlogo = _interopRequireDefault(require("../images/icons/sectionlogo.svg"));
+var _templateObject;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var _default = exports["default"] = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: #000;\n    color: #f2f2f3;\n    h3,\n    .FilterListRow-title,\n    .FilterList-groupTitle,\n    .FilterList-listItem > label {\n        color: inherit;\n    }\n\n    .FilterList-btnGroup {\n        border-top: 1px solid #1d1e23;\n        button {\n            text-transform: capitalize;\n            color: inherit;\n        }\n    }\n\n    .FilterList-btnReset,\n    .FilterList-btnReset:hover {\n        background: transparent;\n        border: none;\n        color: inherit;\n    }\n\n    &.FilterList {\n        padding: 30px 35px 56px;\n    }\n\n    &.FilterListRow .FilterList-listItem[data-shape=\"manamerge\"] {\n        &:before {\n            content: \"\";\n            background: 0 0 url(", ") no-repeat;\n            width: 22px;\n            height: 22px;\n            margin: 0px 32px;\n            display: inline-block;\n            position: absolute;\n        }\n        label {\n            padding-left: 64px;\n        }\n    }\n"])), _sectionlogo["default"]);

package/dist/themes/themes/manamerge/styling/notification-theme.css.js

@@ -1,166 +1,22 @@
-import { css } from "styled-components";
-
-export default css`
-    /* ____ GENERAL DEFINITIONS ____ */
-    --font-family-gilmer: Gilmer, Verdana, Geneva, Tahoma, sans-serif;
-    --font-family-metro: Metro Sans, ManamergeMetro, Gilmer, Verdana, Geneva,
-        Tahoma, sans-serif;
-    --modal-z-index: 9;
-    /* --notification-toasts-z-index: 99 is the default */
-
-    .SidePanel {
-        top: 0;
-        ${({ theme }) => theme.media.largeMobileUp} {
-            top: 50px;
-        }
-    }
-    .SidePanel-container {
-        background-color: #000;
-        overflow-y: hidden;
-    }
-
-    /* __ LIST SPECIFICS __ */
-    .NotificationsList {
-        padding: 16px;
-        ${({ theme }) => theme.media.largeMobileUp} {
-            padding: 32px;
-        }
-
-        h2 {
-            font-style: normal;
-            font-weight: bold;
-            font-size: 28px;
-            line-height: 34px;
-            margin-bottom: 32px;
-        }
-
-        .NotificationsList-items {
-            background: #000;
-            padding-right: 16px;
-            ${({ theme }) => theme.media.largeMobileUp} {
-                padding-right: 32px;
-            }
-        }
-
-        /* < SCROLLBAR definitions */
-        .NotificationsList-items::-webkit-scrollbar {
-            width: 2px;
-        }
-
-        .NotificationsList-items::-webkit-scrollbar-track {
-            background-color: #373942;
-        }
-
-        .NotificationsList-items::-webkit-scrollbar-thumb {
-            background-color: #858687;
-        }
-        /* SCROLLBAR definitions /> */
-
-        /* __ LIST ROW SPECIFICS __ */
-        .NotificationItem-cta {
-            cursor: pointer;
-            transition: 0.3s;
-
-            &:hover {
-                opacity: 0.7;
-            }
-        }
-
-        .NotificationItem--unread,
-        .NotificationItem--read {
-            margin: 0;
-        }
-
-        .NotificationItem--unread {
-            border: none;
-            box-shadow: 0px 4px 10px 1px #000 19%;
-            .NotificationItem-cta {
-                border-color: #373942;
-            }
-        }
-        .NotificationItem--unread + .NotificationItem--unread {
-            margin-top: 15px;
-        }
-
-        .NotificationItem--read + .NotificationItem--read {
-            border-top: 1px solid #373942;
-        }
-
-        .NotificationItem-title h5,
-        .NotificationItem-description,
-        .TimeAgo {
-            color: #bdbec2;
-            font-family: var(--font-family-gilmer);
-            font-weight: 400;
-            font-size: 12px;
-            line-height: 16px;
-        }
-
-        .TimeAgo {
-            text-transform: uppercase;
-            color: #76767d;
-        }
-
-        .NotificationItem-title h5 {
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            color: white;
-        }
-    }
-
-    /* __ TOAST SPECIFICS __ */
-    .NotificationToasts {
-        bottom: 50%;
-        ${({ theme }) => theme.media.largeMobileUp} {
-            bottom: 0;
-        }
-    }
-
-    .NotificationToast {
-        .NotificationToast-title h6 {
-            font-family: var(--font-family-gilmer);
-            font-weight: bold;
-            display: inline-block;
-            font-size: 18px;
-            line-height: 26px;
-            color: #000;
-        }
-
-        .NotificationToast-description p {
-            font-family: var(--font-family-metro);
-            font-size: 15px;
-            line-height: 25px;
-            letter-spacing: 0.0125em;
-            color: #343536;
-            margin: 16px 0px;
-        }
-
-        .NotificationToast-link {
-            border-top: 1px solid #d4d4d4;
-            font-family: var(--font-family-gilmer);
-            font-weight: bold;
-            font-size: 14px;
-            line-height: 20px;
-            color: #3a9ef8;
-            transition: 0.3s;
-        }
-        .NotificationToast-link:hover {
-            opacity: 0.7;
-        }
-
-        .NotificationToast-cta,
-        .NotificationToast-cta:hover {
-            font-family: var(--font-family-metro);
-            text-transform: none;
-            font-size: 16px;
-            color: rgba(0, 0, 0, 0.8);
-            border-color: rgba(0, 0, 0, 0.8);
-            min-width: 118px;
-            height: 52px;
-            transition: 0.3s;
-        }
-        .NotificationToast-cta:hover {
-            opacity: 0.7;
-        }
-    }
-`;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _styledComponents = require("styled-components");
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var _default = exports["default"] = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    /* ____ GENERAL DEFINITIONS ____ */\n    --font-family-gilmer: Gilmer, Verdana, Geneva, Tahoma, sans-serif;\n    --font-family-metro: Metro Sans, ManamergeMetro, Gilmer, Verdana, Geneva,\n        Tahoma, sans-serif;\n    --modal-z-index: 9;\n    /* --notification-toasts-z-index: 99 is the default */\n\n    .SidePanel {\n        top: 0;\n        ", " {\n            top: 50px;\n        }\n    }\n    .SidePanel-container {\n        background-color: #000;\n        overflow-y: hidden;\n    }\n\n    /* __ LIST SPECIFICS __ */\n    .NotificationsList {\n        padding: 16px;\n        ", " {\n            padding: 32px;\n        }\n\n        h2 {\n            font-style: normal;\n            font-weight: bold;\n            font-size: 28px;\n            line-height: 34px;\n            margin-bottom: 32px;\n        }\n\n        .NotificationsList-items {\n            background: #000;\n            padding-right: 16px;\n            ", " {\n                padding-right: 32px;\n            }\n        }\n\n        /* < SCROLLBAR definitions */\n        .NotificationsList-items::-webkit-scrollbar {\n            width: 2px;\n        }\n\n        .NotificationsList-items::-webkit-scrollbar-track {\n            background-color: #373942;\n        }\n\n        .NotificationsList-items::-webkit-scrollbar-thumb {\n            background-color: #858687;\n        }\n        /* SCROLLBAR definitions /> */\n\n        /* __ LIST ROW SPECIFICS __ */\n        .NotificationItem-cta {\n            cursor: pointer;\n            transition: 0.3s;\n\n            &:hover {\n                opacity: 0.7;\n            }\n        }\n\n        .NotificationItem--unread,\n        .NotificationItem--read {\n            margin: 0;\n        }\n\n        .NotificationItem--unread {\n            border: none;\n            box-shadow: 0px 4px 10px 1px #000 19%;\n            .NotificationItem-cta {\n                border-color: #373942;\n            }\n        }\n        .NotificationItem--unread + .NotificationItem--unread {\n            margin-top: 15px;\n        }\n\n        .NotificationItem--read + .NotificationItem--read {\n            border-top: 1px solid #373942;\n        }\n\n        .NotificationItem-title h5,\n        .NotificationItem-description,\n        .TimeAgo {\n            color: #bdbec2;\n            font-family: var(--font-family-gilmer);\n            font-weight: 400;\n            font-size: 12px;\n            line-height: 16px;\n        }\n\n        .TimeAgo {\n            text-transform: uppercase;\n            color: #76767d;\n        }\n\n        .NotificationItem-title h5 {\n            text-transform: uppercase;\n            letter-spacing: 0.05em;\n            color: white;\n        }\n    }\n\n    /* __ TOAST SPECIFICS __ */\n    .NotificationToasts {\n        bottom: 50%;\n        ", " {\n            bottom: 0;\n        }\n    }\n\n    .NotificationToast {\n        .NotificationToast-title h6 {\n            font-family: var(--font-family-gilmer);\n            font-weight: bold;\n            display: inline-block;\n            font-size: 18px;\n            line-height: 26px;\n            color: #000;\n        }\n\n        .NotificationToast-description p {\n            font-family: var(--font-family-metro);\n            font-size: 15px;\n            line-height: 25px;\n            letter-spacing: 0.0125em;\n            color: #343536;\n            margin: 16px 0px;\n        }\n\n        .NotificationToast-link {\n            border-top: 1px solid #d4d4d4;\n            font-family: var(--font-family-gilmer);\n            font-weight: bold;\n            font-size: 14px;\n            line-height: 20px;\n            color: #3a9ef8;\n            transition: 0.3s;\n        }\n        .NotificationToast-link:hover {\n            opacity: 0.7;\n        }\n\n        .NotificationToast-cta,\n        .NotificationToast-cta:hover {\n            font-family: var(--font-family-metro);\n            text-transform: none;\n            font-size: 16px;\n            color: rgba(0, 0, 0, 0.8);\n            border-color: rgba(0, 0, 0, 0.8);\n            min-width: 118px;\n            height: 52px;\n            transition: 0.3s;\n        }\n        .NotificationToast-cta:hover {\n            opacity: 0.7;\n        }\n    }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.media.largeMobileUp;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.media.largeMobileUp;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.media.largeMobileUp;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.media.largeMobileUp;
+});

package/dist/types/components/Atoms/Heading/Heading.d.ts

@@ -2,6 +2,6 @@ import React, { ReactNode } from "react";
 export interface HeadingTypes {
     variant?: string;
     children: ReactNode;
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 }
 export declare const Heading: React.FC<HeadingTypes>;

package/dist/types/components/Atoms/Text/Text.d.ts

@@ -1,17 +1,15 @@
 import React from "react";
-import { PaletteColor } from "themes/manamerge/miscellaneous/colorpalette";
 export interface TextTypes {
     variant?: string;
     children?: string;
     htmlFor?: string;
     margin?: string;
     color?: string;
-    fontSize?: string;
     lineHeight?: string;
     fontWeight?: string | number;
     tag?: keyof JSX.IntrinsicElements;
-    vColor?: PaletteColor;
-    vFontSize?: "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "xxxxl";
+    vColor?: string;
+    vFontSize?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxxl";
     onClick?: React.MouseEventHandler<HTMLElement>;
 }
 export declare const Text: React.FC<TextTypes>;