oolib 2.177.3 → 2.178.0

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

@@ -1,137 +0,0 @@
-"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag_Display = exports.Playground = void 0;
-var Tags_1 = require("../../../v2/components/Tags");
-var Typo2_1 = require("../../../v2/components/Typo2");
-var themes_1 = require("../../../v2/themes");
-var availableColors = __spreadArray([], Object.keys(themes_1.colors).sort(), true);
-var availableTextColors = __spreadArray([], Object.keys(themes_1.colors).sort(), true);
-exports.default = {
-    title: "Oolib V 2.0/Components/Tags/Tag Display",
-    argTypes: {
-        display: {
-            name: "Text",
-        },
-        size: {
-            name: "Size",
-            options: ["ExtraSmall", "Small", "Medium"],
-            mapping: {
-                ExtraSmall: "XS",
-                Small: "S",
-                Medium: "M",
-            },
-            control: { type: "inline-radio" },
-        },
-        tagColor: {
-            name: "Tag Color",
-            options: availableColors,
-            control: { type: "select" },
-        },
-        textColor: {
-            name: "Text Color",
-            options: availableTextColors,
-            control: { type: "select" },
-        },
-        value: {
-            name: "Value"
-        },
-        id: {
-            name: "Id"
-        }
-    },
-    args: {
-        display: "Tag Display",
-        size: "Small",
-        value: "text",
-        id: "tags",
-        tagColor: "",
-        textColor: "",
-    },
-};
-var GenTag = function (_a) {
-    var args = _a.args, Comp = _a.Comp, variant = _a.variant;
-    args[args["size"]] = true;
-    args.tagColor = themes_1.colors[args.tagColor];
-    args.textColor = themes_1.colors[args.textColor];
-    return (React.createElement("div", { style: { padding: "2rem" } },
-        React.createElement(Comp, __assign({}, args, { variant: variant }))));
-};
-var Playground = function (args) {
-    return (React.createElement("div", { style: { display: 'flex', flexDirection: "column", gap: '3rem', margin: '2rem 10rem' } },
-        React.createElement("div", null,
-            React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Default"),
-            React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay })),
-        React.createElement("div", null,
-            React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Positive"),
-            React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "positive" })),
-        React.createElement("div", null,
-            React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "In Progress"),
-            React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "inProgress" })),
-        React.createElement("div", null,
-            React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Warning"),
-            React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "warning" })),
-        React.createElement("div", null,
-            React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Negative"),
-            React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "negative" })),
-        React.createElement("div", null,
-            React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Special"),
-            React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "special" }))));
-};
-exports.Playground = Playground;
-var Tag_Display = function (args) {
-    return React.createElement(Tags_1.TagDisplay, __assign({}, args));
-};
-exports.Tag_Display = Tag_Display;
-exports.Tag_Display.args = {
-    variant: "default"
-};
-exports.Tag_Display.argTypes = {
-    variant: {
-        name: "Variant",
-        options: ["positive", "inProgress", "warning", "negative", "special", "default"],
-        control: { type: "select" },
-        defaultValue: "default",
-    },
-};
-// Tag_Display.parameters = { controls: { exclude: ["value", "tagColor"] } };
-// export const Tag_Display_Secondary = (args) => {
-//   return <GenTag args={args} Comp={TagDisplay} variant="secondary" />;
-// };
-// export const Tag_Display_Grey = (args) => {
-//   return <GenTag args={args} Comp={TagDisplay} variant="grey" />;
-// };
-// export const Tag_Display_Positive = (args) => {
-//   return <GenTag args={args} Comp={TagDisplay} variant="positive" />;
-// };
-// export const Tag_Display_InProgress = (args) => {
-//   return <GenTag args={args} Comp={TagDisplay} variant="inProgress" />;
-// };
-// export const Tag_Display_Warning = (args) => {
-//   return <GenTag args={args} Comp={TagDisplay} variant="warning" />;
-// };
-// export const Tag_Display_Negative = (args) => {
-//   return <GenTag args={args} Comp={TagDisplay} variant="negative" />;
-// };
-// export const Tag_Display_Special = (args) => {
-//   return <GenTag args={args} Comp={TagDisplay} variant="special" />;
-// };

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

@@ -1,28 +0,0 @@
-declare namespace _default {
-    let title: string;
-    namespace argTypes {
-        namespace display {
-            let name: string;
-        }
-        namespace value {
-            let name_1: string;
-            export { name_1 as name };
-        }
-        namespace id {
-            let name_2: string;
-            export { name_2 as name };
-        }
-    }
-    namespace args {
-        let display_1: string;
-        export { display_1 as display };
-        let value_1: string;
-        export { value_1 as value };
-        let id_1: string;
-        export { id_1 as id };
-        export let textColor: string;
-    }
-}
-export default _default;
-export function Playground(args: any): import("react").JSX.Element;
-export function Tag_Link(args: any): import("react").JSX.Element;

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

@@ -1,79 +0,0 @@
-"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.Tag_Link = exports.Playground = void 0;
-var Tags_1 = require("../../../v2/components/Tags");
-var Typo2_1 = require("../../../v2/components/Typo2");
-var themes_1 = require("../../../v2/themes");
-exports.default = {
-    title: "Oolib V 2.0/Components/Tags/Tag Link",
-    argTypes: {
-        display: {
-            name: "Text",
-        },
-        // size: {
-        //   name: "Size",
-        //   options: ["ExtraSmall", "Small", "Medium"],
-        //   mapping: {
-        //     ExtraSmall: "XS",
-        //     Small: "S",
-        //     Medium: "M",
-        //   },
-        //   control: { type: "inline-radio" },
-        // },
-        // tagColor: {
-        //   name: "Tag Color",
-        //   options: availableColors,
-        //   control: { type: "select" },
-        // },
-        // textColor: {
-        //   name: "Text Color",
-        //   options: availableTextColors,
-        //   control: { type: "select" },
-        // },
-        value: {
-            name: "Value"
-        },
-        id: {
-            name: "Id"
-        }
-    },
-    args: {
-        display: "Tag Link",
-        // size: "ExtraSmall",
-        value: "text",
-        id: "tags",
-        // tagColor: "",
-        textColor: "",
-    },
-};
-var GenTag = function (_a) {
-    var args = _a.args, Comp = _a.Comp, variant = _a.variant;
-    args[args["size"]] = true;
-    args.tagColor = themes_1.colors[args.tagColor];
-    args.textColor = themes_1.colors[args.textColor];
-    return (React.createElement("div", null,
-        React.createElement(Comp, __assign({}, args, { variant: variant }))));
-};
-var Playground = function (args) {
-    return (React.createElement("div", { style: { display: 'flex', flexDirection: "column", gap: '3rem', margin: '2rem 10rem' } },
-        React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Tag Clear"),
-        React.createElement(GenTag, { args: args, Comp: Tags_1.TagLink })));
-};
-exports.Playground = Playground;
-var Tag_Link = function (args) {
-    return (React.createElement("div", { style: { margin: "2rem 10rem" } },
-        React.createElement(GenTag, { args: args, Comp: Tags_1.TagLink }),
-        ";"));
-};
-exports.Tag_Link = Tag_Link;

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

@@ -1,15 +0,0 @@
-import { SIZES } from "../styled";
-export interface StyledTagClearProps {
-    variant: 'primary' | 'ghost';
-    size: keyof typeof SIZES;
-    invert?: boolean;
-    grey?: boolean;
-}
-export declare const StyledTagClear: import("styled-components").StyledComponent<"div", any, StyledTagClearProps, never>;
-export interface StyledTagClearIconWrapperProps {
-    invert?: boolean;
-    grey?: boolean;
-    variant: 'primary' | 'ghost';
-    onClick?: () => void;
-}
-export declare const StyledTagClearIconWrapper: import("styled-components").StyledComponent<"button", any, StyledTagClearIconWrapperProps, never>;

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

@@ -1,21 +0,0 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledTagClearIconWrapper = exports.StyledTagClear = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-var styled_1 = require("../styled");
-var themes_1 = require("../../../../themes");
-var mixins_1 = require("../../../../../themes/mixins");
-var grey5 = themes_1.colors.grey5, grey60 = themes_1.colors.grey60, redBG = themes_1.colors.redBG, red = themes_1.colors.red;
-exports.StyledTagClear = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", " // size wont get applied here because of css specificity, there is no different size design yet \n    padding: 0.1rem 0.5rem;\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n    position: relative;\n    border-radius: 0.4rem;\n\n    &:hover{\n      background-color: ", ";\n      color: ", ";\n    }\n"], ["\n    ", " // size wont get applied here because of css specificity, there is no different size design yet \n    padding: 0.1rem 0.5rem;\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n    position: relative;\n    border-radius: 0.4rem;\n\n    &:hover{\n      background-color: ", ";\n      color: ", ";\n    }\n"])), function (_a) {
-    var size = _a.size;
-    return (0, styled_1.commonStyle)({ size: size });
-}, grey5, grey60, redBG, red);
-exports.StyledTagClearIconWrapper = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    border: none;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    height: 100%;\n    padding: 0 0.5rem;\n    border-radius: 0.4rem;\n    position: absolute;\n    right: 0;\n    background: linear-gradient(90deg, rgba(255, 227, 227, 0.00) 0%, ", " 28.76%);\n    color: ", ";\n    ", ";\n"], ["\n    border: none;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    height: 100%;\n    padding: 0 0.5rem;\n    border-radius: 0.4rem;\n    position: absolute;\n    right: 0;\n    background: linear-gradient(90deg, rgba(255, 227, 227, 0.00) 0%, ", " 28.76%);\n    color: ", ";\n    ", ";\n"])), redBG, red, (0, mixins_1.transition)('color', 'background-color'));
-var templateObject_1, templateObject_2;

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

@@ -1,5 +0,0 @@
-import { TagDisplayProps } from ".";
-export interface StyledTagDisplayProps extends Omit<TagDisplayProps, 'display' | 'style' | 'M' | 'XS'> {
-    size?: 'M' | 'XS' | 'S';
-}
-export declare const StyledTagDisplay: import("styled-components").StyledComponent<"div", any, StyledTagDisplayProps, never>;

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

@@ -1,78 +0,0 @@
-"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.StyledTagDisplay = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-var styled_1 = require("../styled");
-var themes_1 = require("../../../../themes");
-var grey10 = themes_1.colors.grey10, grey30 = themes_1.colors.grey30, grey40 = themes_1.colors.grey40, white = themes_1.colors.white, grey80 = themes_1.colors.grey80, green = themes_1.colors.green, yellow = themes_1.colors.yellow, blue = themes_1.colors.blue, error = themes_1.colors.error, purple = themes_1.colors.purple;
-exports.StyledTagDisplay = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: max-content;\n  ", "\n  ", "\n"], ["\n  width: max-content;\n  ", "\n  ", "\n"])), function (_a) {
-    var size = _a.size;
-    return (0, styled_1.commonStyle)({ size: size });
-}, function (_a) {
-    var variant = _a.variant, size = _a.size, textColor = _a.textColor, tagColor = _a.tagColor;
-    switch (variant) {
-        // case 'primary':
-        //   return css`
-        //     background-color: ${tagColor || grey40};
-        //     color: ${textColor || white};
-        //   `;
-        // case 'secondary':
-        //   return css`
-        //     background: none;
-        //     border: ${(size === 'XS' || size === 'S') ? '1px' : '2px'} solid ${tagColor || grey10};
-        //     color: ${textColor || grey80};
-        //     padding: 4px 10px;
-        //     border-radius: 3.1rem;
-        //   `;
-        case 'positive':
-            return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          background-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          color: ", ";\n        "])), green, textColor || white);
-        case 'inProgress':
-            return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          color: ", ";\n        "])), blue, textColor || white);
-        case 'warning':
-            return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          background-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          color: ", ";\n        "])), yellow, textColor || white);
-        case 'negative':
-            return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          background-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          color: ", ";\n        "])), tagColor || error, textColor || white);
-        case 'special':
-            return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          background-color: ", ";\n          color: ", ";\n      "], ["\n          background-color: ", ";\n          color: ", ";\n      "])), tagColor || purple, textColor || white);
-        default:
-            return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          background-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          color: ", ";\n        "])), tagColor || grey40, textColor || white);
-    }
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -1,16 +0,0 @@
-import { SIZES } from "../styled";
-export declare const StyledLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-router-dom").NavLinkProps & import("react").RefAttributes<HTMLAnchorElement>>, any, {}, never>;
-export interface TagLinkStyleProps {
-    variant: 'primary' | 'secondary';
-    invert?: boolean;
-    color?: 'red' | 'green' | 'black';
-    size: keyof typeof SIZES;
-    theme: any;
-}
-interface StyledTagLinkProps extends TagLinkStyleProps {
-    invert?: boolean;
-}
-export declare const tagLinkStyle: ({ variant, theme: { colors } }: TagLinkStyleProps) => import("styled-components").FlattenSimpleInterpolation;
-export declare const StyledTagLink: import("styled-components").StyledComponent<"div", any, StyledTagLinkProps, never>;
-export declare const StyledLinkIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export {};

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

@@ -1,61 +0,0 @@
-"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.StyledLinkIconWrapper = exports.StyledTagLink = exports.tagLinkStyle = exports.StyledLink = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-var react_router_dom_1 = require("react-router-dom");
-var styled_1 = require("../styled");
-var getDynamicColors_1 = require("../../../../themes/utils/getDynamicColors");
-var themes_1 = require("../../../../themes");
-var grey5 = themes_1.colors.grey5, grey80 = themes_1.colors.grey80;
-exports.StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: none;\n"], ["\n  text-decoration: none;\n"])));
-var tagLinkStyle = function (_a) {
-    var variant = _a.variant, colors = _a.theme.colors;
-    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject([" // variant primary\n      background: ", ";\n      color: ", ";\n\n      &:hover{\n        background-color: ", ";\n        color: ", ";\n      }\n\n    "], [" // variant primary\n      background: ", ";\n      color: ", ";\n\n      &:hover{\n        background-color: ", ";\n        color: ", ";\n      }\n\n    "])), grey5, grey80, (0, getDynamicColors_1.getSecondaryContainer)(colors), (0, getDynamicColors_1.getOnSecondary)(colors));
-};
-exports.tagLinkStyle = tagLinkStyle;
-exports.StyledTagLink = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  ", "\n  ", "\n  padding: 0.1rem 0.5rem;\n"], ["\n  position: relative;\n  ", "\n  ", "\n  padding: 0.1rem 0.5rem;\n"])), function (_a) {
-    var size = _a.size;
-    return (0, styled_1.commonStyle)({ size: size });
-}, function (props) { return (0, exports.tagLinkStyle)(props); });
-exports.StyledLinkIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  height: 100%;\n  padding: 0 0.5rem;\n  border-radius: 0.4rem;\n  position: absolute;\n  right: 0;\n  ", "\n  \n"], ["\n  border: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  height: 100%;\n  padding: 0 0.5rem;\n  border-radius: 0.4rem;\n  position: absolute;\n  right: 0;\n  ", "\n  \n"])), function (_a) {
-    var colors = _a.theme.colors;
-    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background: linear-gradient(90deg, rgba(255, 227, 227, 0.00) 0%, ", " 28.76%);\n    color: ", ";\n  "], ["\n    background: linear-gradient(90deg, rgba(255, 227, 227, 0.00) 0%, ", " 28.76%);\n    color: ", ";\n  "])), (0, getDynamicColors_1.getSecondaryContainer)(colors), (0, getDynamicColors_1.getOnSecondary)(colors));
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;