oolib 2.177.4 → 2.178.0

package/dist/stories/v2/components/Tags/Tag.stories.d.ts

@@ -0,0 +1,10 @@
+declare namespace _default {
+    let title: string;
+    let argTypes: {};
+    let args: {
+        display: any;
+    };
+}
+export default _default;
+export function Tag_Comp(args: any): React.JSX.Element;
+import React from "react";

package/dist/stories/v2/components/Tags/Tag.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag_Comp = void 0;
+var react_1 = __importDefault(require("react"));
+var Tags_1 = require("../../../../v2/components/Tags");
+var tagArgTypes_1 = require("./utils/tagArgTypes");
+exports.default = {
+    title: "Oolib V 2.0/Components/Tags/Tag",
+    argTypes: __assign({}, (0, tagArgTypes_1.commonArgTypes)({
+        exclude: {},
+    })),
+    args: __assign({}, (0, tagArgTypes_1.commonTagArgTypes)("Tag Component")),
+};
+var Tag_Comp = function (args) {
+    return react_1.default.createElement("div", { style: { padding: "4rem" } },
+        react_1.default.createElement(Tags_1.Tag, __assign({}, args)));
+};
+exports.Tag_Comp = Tag_Comp;

package/dist/stories/v2/components/Tags/TagClear.stories.d.ts

@@ -0,0 +1,10 @@
+declare namespace _default {
+    let title: string;
+    let argTypes: {};
+    let args: {
+        display: any;
+    };
+}
+export default _default;
+export function Tag_Clear(args: any): React.JSX.Element;
+import React from "react";

package/dist/stories/v2/components/Tags/TagClear.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag_Clear = void 0;
+var react_1 = __importDefault(require("react"));
+var Tags_1 = require("../../../../v2/components/Tags");
+var GenTag_1 = require("./utils/GenTag");
+var tagArgTypes_1 = require("./utils/tagArgTypes");
+exports.default = {
+    title: "Oolib V 2.0/Components/Tags/Tag Clear",
+    argTypes: __assign({}, (0, tagArgTypes_1.commonArgTypes)({ exclude: { icon: true } })),
+    args: __assign({}, (0, tagArgTypes_1.commonTagArgTypes)("Tag Clear")),
+};
+var Tag_Clear = function (args) {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { style: { margin: "2rem 10rem" } },
+            react_1.default.createElement(GenTag_1.GenTag, { args: args, Comp: Tags_1.TagClear }))));
+};
+exports.Tag_Clear = Tag_Clear;

package/dist/stories/v2/components/Tags/TagDisplay.stories.d.ts

@@ -0,0 +1,11 @@
+declare namespace _default {
+    let title: string;
+    let argTypes: {};
+    let args: {
+        display: any;
+    };
+}
+export default _default;
+export function Tag_Display(args: any): React.JSX.Element;
+export function playground(args: any): React.JSX.Element;
+import React from "react";

package/dist/stories/v2/components/Tags/TagDisplay.stories.js

@@ -0,0 +1,88 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.playground = exports.Tag_Display = void 0;
+var react_1 = __importDefault(require("react"));
+var Tags_1 = require("../../../../v2/components/Tags");
+var tagArgTypes_1 = require("./utils/tagArgTypes");
+var Typo2_1 = require("../../../../v2/components/Typo2");
+exports.default = {
+    title: "Oolib V 2.0/Components/Tags/Tag Display",
+    argTypes: __assign({}, (0, tagArgTypes_1.commonArgTypes)({
+        //  no icons for tagDisplay
+        exclude: {
+            icon: true,
+            fill: true,
+            size: true,
+            weight: true
+        },
+        add: {
+            variant: {
+                name: "Variant",
+                description: "Select an icon from the available set.",
+                options: [
+                    "Postive",
+                    "In Progress",
+                    "Warning",
+                    "Negative",
+                    "Special",
+                    "Default"
+                ],
+                mapping: {
+                    "Postive": "positive",
+                    "In Progress": "inProgress",
+                    "Warning": "warning",
+                    "Negative": "negative",
+                    "Special": "speical",
+                    "Default": "default"
+                },
+                control: { type: "select" },
+                table: {
+                    defaultValue: { summary: "default" },
+                    type: { summary: "string" },
+                },
+            },
+        }
+    })),
+    args: __assign({}, (0, tagArgTypes_1.commonTagArgTypes)("Tag Display")),
+};
+var Tag_Display = function (args) {
+    return (react_1.default.createElement("div", { style: { padding: "4rem" } },
+        react_1.default.createElement(Tags_1.TagDisplay, __assign({ display: "Tag Display" }, args))));
+};
+exports.Tag_Display = Tag_Display;
+var playground = function (args) {
+    return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "3rem", padding: "1rem" } },
+        react_1.default.createElement("div", { style: { display: "flex", gap: "1rem" } },
+            react_1.default.createElement(Typo2_1.UI_TAG, null, "Default"),
+            react_1.default.createElement(Tags_1.TagDisplay, { display: "Tag Display", variant: "default" })),
+        react_1.default.createElement("div", { style: { display: "flex", gap: "1rem" } },
+            react_1.default.createElement(Typo2_1.UI_TAG, null, "In Progress"),
+            react_1.default.createElement(Tags_1.TagDisplay, { display: "Tag Display", variant: "inProgress" })),
+        react_1.default.createElement("div", { style: { display: "flex", gap: "1rem" } },
+            react_1.default.createElement(Typo2_1.UI_TAG, null, "Negative"),
+            react_1.default.createElement(Tags_1.TagDisplay, { display: "Tag Display", variant: "negative" })),
+        react_1.default.createElement("div", { style: { display: "flex", gap: "1rem" } },
+            react_1.default.createElement(Typo2_1.UI_TAG, null, "Postive"),
+            react_1.default.createElement(Tags_1.TagDisplay, { display: "Tag Display", variant: "positive" })),
+        react_1.default.createElement("div", { style: { display: "flex", gap: "1rem" } },
+            react_1.default.createElement(Typo2_1.UI_TAG, null, "Special"),
+            react_1.default.createElement(Tags_1.TagDisplay, { display: "Tag Display", variant: "special" })),
+        react_1.default.createElement("div", { style: { display: "flex", gap: "1rem" } },
+            react_1.default.createElement(Typo2_1.UI_TAG, null, "Warning"),
+            react_1.default.createElement(Tags_1.TagDisplay, { display: "Tag Display", variant: "warning" }))));
+};
+exports.playground = playground;

package/dist/stories/v2/components/Tags/TagLink.stories.d.ts

@@ -0,0 +1,10 @@
+declare namespace _default {
+    let title: string;
+    let argTypes: {};
+    let args: {
+        display: any;
+    };
+}
+export default _default;
+export function Tag_Link(args: any): React.JSX.Element;
+import React from "react";

package/dist/stories/v2/components/Tags/TagLink.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag_Link = void 0;
+var react_1 = __importDefault(require("react"));
+var Tags_1 = require("../../../../v2/components/Tags");
+var GenTag_1 = require("./utils/GenTag");
+var tagArgTypes_1 = require("./utils/tagArgTypes");
+exports.default = {
+    title: "Oolib V 2.0/Components/Tags/Tag Link",
+    argTypes: __assign({}, (0, tagArgTypes_1.commonArgTypes)({ exclude: { icon: true } })),
+    args: __assign({}, (0, tagArgTypes_1.commonTagArgTypes)("Tag Link")),
+};
+var Tag_Link = function (args) {
+    return (react_1.default.createElement("div", { style: { margin: "2rem 10rem" } },
+        react_1.default.createElement(GenTag_1.GenTag, { args: args, Comp: Tags_1.TagLink })));
+};
+exports.Tag_Link = Tag_Link;

package/dist/stories/v2/components/Tags/utils/GenTag.d.ts

@@ -0,0 +1,6 @@
+export function GenTag({ args, Comp, variant }: {
+    args: any;
+    Comp: any;
+    variant: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/stories/v2/components/Tags/utils/GenTag.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenTag = void 0;
+var react_1 = __importDefault(require("react"));
+var GenTag = function (_a) {
+    var args = _a.args, Comp = _a.Comp, variant = _a.variant;
+    return (react_1.default.createElement("div", { style: { padding: "4rem" } },
+        react_1.default.createElement(Comp, __assign({}, args, { variant: variant }))));
+};
+exports.GenTag = GenTag;

package/dist/stories/v2/components/Tags/utils/tagArgTypes.d.ts

@@ -0,0 +1,7 @@
+export declare const commonTagArgTypes: (display: any) => {
+    display: any;
+};
+export declare const commonArgTypes: ({ exclude, add }?: {
+    exclude?: {};
+    add?: {};
+}) => {};

package/dist/stories/v2/components/Tags/utils/tagArgTypes.js

@@ -0,0 +1,107 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commonArgTypes = exports.commonTagArgTypes = void 0;
+var icons_1 = require("../../../../../icons");
+var commonTagArgTypes = function (display) {
+    return {
+        // size: "Default: Small",
+        // fill: "Default: Solid",
+        display: display,
+    };
+};
+exports.commonTagArgTypes = commonTagArgTypes;
+var commonArgTypes = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.exclude, exclude = _c === void 0 ? {} : _c, _d = _b.add, add = _d === void 0 ? {} : _d;
+    var baseTypes = {
+        display: {
+            name: "Text",
+            description: "This prop controls the display text.",
+            type: { summary: "string" },
+            defaultValue: { summary: "" }
+        },
+        size: {
+            name: "Size",
+            description: "Specifies the size of the component.",
+            options: [
+                "ExtraSmall: XS",
+                "Default: Small: S",
+                // "Medium"
+            ],
+            mapping: {
+                "ExtraSmall: XS": "XS",
+                "Default: Small: S": "S",
+                // "Medium": "M",
+            },
+            control: { type: "select" },
+            table: {
+                defaultValue: { summary: "S" },
+                type: { summary: "S | XS" },
+            }
+        },
+        fill: {
+            name: "Fill",
+            description: "Determines the fill style of the component.",
+            options: ["Outline: outline", "Default: Solid"],
+            mapping: {
+                "Outline: outline": "outline",
+                "Default: Solid": "solid",
+            },
+            control: { type: "select" },
+            table: {
+                defaultValue: { summary: "solid" },
+                type: { summary: "solid | outline" },
+            }
+        },
+        weight: {
+            name: "Weight",
+            description: "Specifies the font weight or boldness.",
+            options: [
+                "Default: default",
+                "Bold: bold",
+                "Light: light"
+            ],
+            mapping: {
+                "Default: default": "default",
+                "Light: light": "light",
+                "Bold: bold": "bold",
+            },
+            control: { type: "select" },
+            table: {
+                defaultValue: { summary: "default" },
+                type: { summary: "bold | default | light" },
+            }
+        },
+        icon: {
+            name: "Icon",
+            description: "Select an icon from the available set.",
+            options: Object.keys(icons_1.icons),
+            control: { type: "select" },
+            table: {
+                defaultValue: { summary: "none" },
+                type: { summary: "string" },
+            }
+        }
+    };
+    // Filter out excluded types
+    var filteredTypes = Object.entries(baseTypes).reduce(function (acc, _a) {
+        var key = _a[0], value = _a[1];
+        if (!exclude[key]) {
+            acc[key] = value;
+        }
+        return acc;
+    }, {});
+    // Merge with additional types
+    return __assign(__assign({}, filteredTypes), add);
+};
+exports.commonArgTypes = commonArgTypes;

package/dist/stories/v2/themes/Typo.stories.js

@@ -109,6 +109,7 @@ var UIFont = function (args) { return (react_1.default.createElement("div", { st
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_CAPTION_SEMIBOLD, compName: "UI_CAPTION_SEMIBOLD" }),
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_CAPTION_SEMIBOLD_DF, compName: "UI_CAPTION_SEMIBOLD_DF" }),
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_TAG, compName: "UI_TAG" }),
+    react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_TAG_DF, compName: "UI_TAG_DF" }),
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_HELPTEXT, compName: "UI_HELPTEXT" }),
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_STAT_LG, compName: "UI_STAT_LG" }),
     react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_STAT_SM, compName: "UI_STAT_SM" }))); };

package/dist/v2/components/Tags/Comps/Tag/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface TagInterface {
+    id?: string;
+    fill?: string;
+    size?: "XS" | "S" | "M";
+    display: string;
+    icon?: string;
+    onClick?: () => {};
+    weight?: "bold" | "light" | "default";
+    variant?: "clear" | "link";
+    typo?: any;
+    style?: any;
+}
+export declare const Tag: ({ id, fill, size, display, icon, weight, onClick, variant, typo, style }: TagInterface) => React.JSX.Element;

package/dist/v2/components/Tags/Comps/Tag/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_1 = require("./styled");
+var icons_1 = require("../../../../../icons");
+var styled_2 = require("./styled");
+var styled_components_1 = require("styled-components");
+var themes_1 = require("../../../../themes");
+var grey40 = themes_1.colors.grey40;
+var Tag = function (_a) {
+    var id = _a.id, fill = _a.fill, size = _a.size, display = _a.display, icon = _a.icon, weight = _a.weight, onClick = _a.onClick, variant = _a.variant, typo = _a.typo, style = _a.style;
+    var Icon = icons_1.icons[icon];
+    var theme = (0, styled_components_1.useTheme)();
+    var Typo = typo || styled_2.Styled_UI_CAPTION_DF;
+    return (react_1.default.createElement(styled_1.StyledTag, { id: id, fill: fill || "solid", size: size || "S", icon: icon, onClick: onClick, variant: variant, colors: theme === null || theme === void 0 ? void 0 : theme.colors, style: style },
+        react_1.default.createElement(Typo, { weight: weight },
+            " ",
+            display,
+            " "),
+        icon &&
+            react_1.default.createElement(styled_2.StyledIconWrapper, { weight: weight },
+                react_1.default.createElement(Icon, { size: size === "XS" ? 10 : 12, weight: "bold", style: { color: grey40 } }))));
+};
+exports.Tag = Tag;

package/dist/v2/components/Tags/Comps/Tag/styled.d.ts

@@ -0,0 +1,14 @@
+export declare const Styled_UI_CAPTION_DF: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../../../Typo2").TypoCompProps>, any, {}, never>;
+export interface IconProps {
+    weight: string;
+}
+export declare const StyledIconWrapper: import("styled-components").StyledComponent<"div", any, IconProps, never>;
+export declare const variants: ({ variant, colors, fill }: any) => import("styled-components").FlattenSimpleInterpolation;
+export declare const StyledTag: import("styled-components").StyledComponent<"div", any, {
+    fill: string;
+    size: string;
+    icon: string;
+    onClick: any;
+    variant: string;
+    colors: any;
+}, never>;

package/dist/v2/components/Tags/Comps/Tag/styled.js

@@ -0,0 +1,81 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTag = exports.variants = exports.StyledIconWrapper = exports.Styled_UI_CAPTION_DF = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var Typo2_1 = require("../../../Typo2");
+var themes_1 = require("../../../../themes");
+var mixins_1 = require("../../../../../themes/mixins");
+var getDynamicColors_1 = require("../../../../themes/utils/getDynamicColors");
+var grey10 = themes_1.colors.grey10, white = themes_1.colors.white, grey5 = themes_1.colors.grey5, redBG = themes_1.colors.redBG, red = themes_1.colors.red;
+var grey80 = themes_1.colors.grey80, grey60 = themes_1.colors.grey60;
+exports.Styled_UI_CAPTION_DF = (0, styled_components_1.default)(Typo2_1.UI_CAPTION_DF)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", ";\n    ", "\n\n"], ["\n    ", ";\n    ", "\n\n"])), mixins_1.ellipsis, function (_a) {
+    var weight = _a.weight;
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          font-weight: ", ";\n          color: ", ";\n    "], ["\n          font-weight: ", ";\n          color: ", ";\n    "])), weight === "bold" ? 500 : 400, weight === "light" ? grey60 : grey80);
+});
+exports.StyledIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    ", "\n\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    ", "\n\n"])), function (_a) {
+    var weight = _a.weight;
+    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          color: ", ";\n    "], ["\n          color: ", ";\n    "])), weight === "light" ? grey60 : grey80);
+});
+var commonTagStyles = function (_a) {
+    var size = _a.size, fill = _a.fill, icon = _a.icon;
+    return "\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n  max-width: 100%;\n  width: max-content;\n\n  ".concat(size === "XS" ?
+        "\n        padding: 0.1rem 0.5rem;\n        border-radius: 4px;\n        gap: 0.1rem;\n        padding-right: ".concat(icon ? "0.4rem" : "0.5rem", ";\n      ")
+        : size === "S" ?
+            "\n        padding: 0.4rem 1rem;\n        border-radius: 1.2rem;\n        gap: 0.2rem;\n        padding-right: ".concat(icon ? "0.8rem" : "1rem", ";\n\n      ")
+            :
+                " \n        padding: 0.1rem 0.5rem;\n        border-radius: 4px;\n        gap: 0.1rem;\n        padding-right: ".concat(icon ? "0.4rem" : "0.5rem", ";\n\n      "), "\n\n  background-color: ").concat(fill === "solid" ? grey5 : white, ";\n  outline: ").concat(fill === "outline" ? "1px solid ".concat(grey10) : "none", ";\n\n");
+};
+var variants = function (_a) {
+    var variant = _a.variant, colors = _a.colors, fill = _a.fill;
+    switch (variant) {
+        case "clear": // Tag Clear
+            return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          &:hover{\n            background: ", ";\n                color: ", " !important;\n                outline: 1px solid ", ";\n                outline: ", ";\n\n                * {\n                    background: ", ";\n                    color: ", " !important;\n                }\n          }\n      "], ["\n          &:hover{\n            background: ", ";\n                color: ", " !important;\n                outline: 1px solid ", ";\n                outline: ", ";\n\n                * {\n                    background: ", ";\n                    color: ", " !important;\n                }\n          }\n      "])), redBG, red, redBG, fill === "outline" ? "1px solid ".concat(redBG) : "none", redBG, red);
+        case "link": // Tag link
+            return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n            &:hover{\n                  background: ", ";\n                  color: ", " !important;\n                  outline: ", ";\n                  \n                  * {\n                      background: ", ";\n                      color: ", " !important;\n                  }\n            }\n        "], ["\n            &:hover{\n                  background: ", ";\n                  color: ", " !important;\n                  outline: ", ";\n                  \n                  * {\n                      background: ", ";\n                      color: ", " !important;\n                  }\n            }\n        "])), (0, getDynamicColors_1.getSecondaryContainer)(colors), (0, getDynamicColors_1.getOnSecondary)(colors), fill === "outline" ? "1px solid ".concat((0, getDynamicColors_1.getSecondaryContainer)(colors)) : "none", (0, getDynamicColors_1.getSecondaryContainer)(colors), (0, getDynamicColors_1.getOnSecondary)(colors));
+        default:
+            return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\n        "], ["\n\n        "])));
+    }
+};
+exports.variants = variants;
+exports.StyledTag = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n\n  ", ";\n  ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n\n  ", ";\n  ", ";\n"])), function (_a) {
+    var onClick = _a.onClick;
+    return onClick ? "pointer" : "unset";
+}, commonTagStyles, exports.variants);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/v2/components/Tags/Comps/TagClear/index.d.ts

@@ -2,25 +2,9 @@ import { FunctionComponent } from "react";
 export interface TagClearProps {
     id: string;
     display: string;
-    M?: boolean;
-    XS?: boolean;
-    invert?: boolean;
     onClick?: () => void;
-    variant?: 'primary' | 'ghost';
-    grey?: boolean;
+    fill?: string;
+    size?: "XS" | "S";
+    weight?: "bold" | "light" | "default";
 }
-/**
- * @component Renders a TagClear component with customizable text, style and onClick handler.
- *
- * - The props object containing the following properties:
- * @prop {string} id: The id of the component.
- * @prop {string} display: The text to be displayed inside the TagClear component.
- * @prop {boolean} [M] : A boolean indicating whether the component should render at the large size. Defaults to false.
- * @prop {boolean} [XS] : A boolean indicating whether the component should render at the extra small size. Defaults to false.
- * @prop {boolean} [invert] : A boolean indicating whether to invert the colors of the component. Defaults to false.
- * @prop {() => void} [onClick] : A function to be called when the component is clicked. Defaults to an empty function.
- * @prop {('primary' | 'ghost')} [variant] : A string indicating the variant of the component. Defaults to "primary".
- * @prop {boolean} [grey] : A boolean indicating whether to render the component in the grey variant. Defaults to false.
- * @return {ReactElement} The rendered TagClear component.
- */
 export declare const TagClear: FunctionComponent<TagClearProps>;

package/dist/v2/components/Tags/Comps/TagClear/index.js

@@ -1,67 +1,13 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagClear = void 0;
-var react_1 = __importStar(require("react"));
-var icons_1 = require("../../../../../icons");
-var getTypoComp_1 = require("../../utils/getTypoComp");
-var styled_1 = require("./styled");
-/**
- * @component Renders a TagClear component with customizable text, style and onClick handler.
- *
- * - The props object containing the following properties:
- * @prop {string} id: The id of the component.
- * @prop {string} display: The text to be displayed inside the TagClear component.
- * @prop {boolean} [M] : A boolean indicating whether the component should render at the large size. Defaults to false.
- * @prop {boolean} [XS] : A boolean indicating whether the component should render at the extra small size. Defaults to false.
- * @prop {boolean} [invert] : A boolean indicating whether to invert the colors of the component. Defaults to false.
- * @prop {() => void} [onClick] : A function to be called when the component is clicked. Defaults to an empty function.
- * @prop {('primary' | 'ghost')} [variant] : A string indicating the variant of the component. Defaults to "primary".
- * @prop {boolean} [grey] : A boolean indicating whether to render the component in the grey variant. Defaults to false.
- * @return {ReactElement} The rendered TagClear component.
- */
+var react_1 = __importDefault(require("react"));
+var Tag_1 = require("../Tag");
 var TagClear = function (_a) {
-    var id = _a.id, display = _a.display, M = _a.M, XS = _a.XS, invert = _a.invert, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, _c = _a.variant, variant = _c === void 0 ? 'primary' : _c, grey = _a.grey;
-    var XIconCom = icons_1.icons['X'];
-    var size = M ? 'M' : XS ? 'XS' : 'S';
-    var TYPO_COMP = (0, getTypoComp_1.getTypoComp)({ typo: "caption" });
-    var _d = (0, react_1.useState)(false), hoverTag = _d[0], setHoverOnTag = _d[1];
-    return (react_1.default.createElement(styled_1.StyledTagClear, { invert: invert, size: size, grey: grey, variant: variant, onMouseEnter: function () { return setHoverOnTag(true); }, onMouseLeave: function () { return setHoverOnTag(false); } },
-        react_1.default.createElement(TYPO_COMP, null, display),
-        hoverTag &&
-            react_1.default.createElement(styled_1.StyledTagClearIconWrapper, { invert: invert, grey: grey, variant: variant, onClick: onClick },
-                react_1.default.createElement(XIconCom, { style: { marginRight: '-0.3rem' }, size: size === 'XS' ? '10' : '14', weight: 'bold' }))));
+    var id = _a.id, display = _a.display, size = _a.size, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, fill = _a.fill, weight = _a.weight;
+    return (react_1.default.createElement(Tag_1.Tag, { id: id, display: display, icon: "X", size: size, onClick: function () { return onClick; }, variant: "clear", fill: fill, weight: weight }));
 };
 exports.TagClear = TagClear;