oolib 2.118.0 → 2.119.1

package/dist/components/PageScrollIndicator/index.d.ts

@@ -1,2 +1,9 @@
-export function PageScrollIndicator(): React.JSX.Element;
-import React from "react";
+import { FunctionComponent } from "react";
+/**
+ * @component Renders a PageScrollIndicator component to show scroll progress as a highlight line at the top of the page.
+ *
+ * - The props object contains no properties.
+ *
+ * @return {ReactElement} The rendered PageScrollIndicator component.
+ */
+export declare const PageScrollIndicator: FunctionComponent;

package/dist/components/PageScrollIndicator/index.js

@@ -1,4 +1,7 @@
 "use strict";
+// import React, { useState } from "react";
+// import { useScroll } from "../../utils/customHooks/useScroll";
+// import { StyledScrollHighlight, StyledScrollHighlightVisible } from "./styled";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -27,6 +30,13 @@ exports.PageScrollIndicator = void 0;
 var react_1 = __importStar(require("react"));
 var useScroll_1 = require("../../utils/customHooks/useScroll");
 var styled_1 = require("./styled");
+/**
+ * @component Renders a PageScrollIndicator component to show scroll progress as a highlight line at the top of the page.
+ *
+ * - The props object contains no properties.
+ *
+ * @return {ReactElement} The rendered PageScrollIndicator component.
+ */
 var PageScrollIndicator = function () {
     var _a = (0, react_1.useState)(0), highLightLine = _a[0], setHighLightLine = _a[1];
     var scrollFn = function () {

package/dist/components/PageScrollIndicator/styled.d.ts

@@ -1,2 +1,4 @@
-export const StyledScrollHighlight: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledScrollHighlightVisible: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledScrollHighlight: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledScrollHighlightVisible: import("styled-components").StyledComponent<"div", any, {
+    width: number;
+}, never>;

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.js

@@ -25,10 +25,11 @@ var CheckboxInput = function (_a) {
         return (react_1.default.createElement(CheckboxButton_1.CheckboxButton, { isSelected: isSelected, disabled: disabled, invert: invert, S: S, className: 'btn',
             disabled: options.disabled || disabled }));
     };
-    var genCheckSquare = function () { return (react_1.default.createElement(CheckSquare, { size: S ? 22.5 : 26, color: invert ? invertGreen : green, style: {
-            margin: '-7px -2.8px -7px -3.2px',
-            flexShrink: 0
-        } })); };
+    var genCheckSquare = function () { return (react_1.default.createElement("div", { style: { flexShrink: 0 } },
+        react_1.default.createElement(CheckSquare, { size: S ? 22.5 : 26, color: invert ? invertGreen : green, style: {
+                margin: '-7px -2.8px -7px -3.2px',
+                flexShrink: 0
+            } }))); };
     var genXSquare = function () { return (react_1.default.createElement(XSquare, { size: S ? 21.5 : 26, color: invert ? invertRed : red, style: {
             margin: '-7px -2.8px -7px -3.2px',
             flexShrink: 0
@@ -36,14 +37,14 @@ var CheckboxInput = function (_a) {
     return option.loading
         ? react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })
         : inputStyle === 'tagSelect' ? (react_1.default.createElement(Tags_1.TagSelect, { isSelected: isSelected, invert: invert, disabled: disabled, onClick: function () { return !disabled && onClick(isSelected, option); }, display: option.display, value: option.value, style: { alignSelf: 'flex-start' } })) : (react_1.default.createElement(styled_1.StyledOption, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert, S: S, onClick: function () { return !rightWrongResult && !disabled && onClick && onClick(isSelected, option); } },
-            rightWrongResult
+            react_1.default.createElement("div", { style: { flexShrink: 0 } }, rightWrongResult
                 ? ["markCorrect", "revealCorrect"].includes(markingCommand)
                     ? genCheckSquare()
                     : markingCommand === 'markWrong'
                         ? genXSquare()
                         : genCheckboxButton({ disabled: true }) //else rightWrongResult has come in, but this doesnt have to be marked right or wrong
                 : genCheckboxButton() // rightWrongResult has not come in. so gen normal radio button
-        ,
+            ),
             react_1.default.createElement(SuitableTypo, { bold: rightWrongResult && isSelected, color: disabled && greyColor40, invert: invert }, option.display)));
 };
 exports.CheckboxInput = CheckboxInput;

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

@@ -0,0 +1,26 @@
+import { FunctionComponent } from "react";
+export interface TagClearProps {
+    id: string;
+    display: string;
+    M?: boolean;
+    XS?: boolean;
+    invert?: boolean;
+    onClick?: () => void;
+    variant?: 'primary' | 'ghost';
+    grey?: boolean;
+}
+/**
+ * @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/components/Tags/Comps/TagClear/index.js

@@ -0,0 +1,35 @@
+"use strict";
+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 = __importDefault(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 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)(size);
+    return (react_1.default.createElement(styled_1.StyledTagClear, { invert: invert, size: size, grey: grey, variant: variant },
+        react_1.default.createElement(TYPO_COMP, null, display),
+        react_1.default.createElement(styled_1.StyledTagClearIconWrapper, { invert: invert, grey: grey, variant: variant, onClick: onClick },
+            react_1.default.createElement(XIconCom, { size: size === 'XS' ? '12' : '15', weight: 'bold' }))));
+};
+exports.TagClear = TagClear;

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

@@ -0,0 +1,15 @@
+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<"div", any, StyledTagClearIconWrapperProps, never>;

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

@@ -0,0 +1,59 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTagClearIconWrapper = exports.StyledTagClear = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var styled_1 = require("../styled");
+var themes_1 = require("../../../../themes");
+var utilsOolib_1 = require("../../../../utilsOolib");
+var mixins_1 = require("../../../../themes/mixins");
+var greyColor100 = themes_1.colors.greyColor100, greyColor80 = themes_1.colors.greyColor80, greyColor15 = themes_1.colors.greyColor15, white = themes_1.colors.white;
+exports.StyledTagClear = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", "\n    //overrides of commonStyle\n    padding-right: 0;\n    gap: 0.5rem;\n    //--\n  \n    ", "\n  \n    ", "\n"], ["\n    ", "\n    //overrides of commonStyle\n    padding-right: 0;\n    gap: 0.5rem;\n    //--\n  \n    ", "\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, invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
+    if (variant === 'primary') {
+        return grey
+            ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              background-color: ", ";\n              color: ", ";\n            "], ["\n              background-color: ", ";\n              color: ", ";\n            "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              background-color: ", ";\n              color: ", ";\n            "], ["\n              background-color: ", ";\n              color: ", ";\n            "])), !invert ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? white : greyColor100);
+    }
+    else {
+        // secondry
+        return grey
+            ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              background: none;\n              border: ", " solid ", ";\n              color: ", ";\n            "], ["\n              background: none;\n              border: ", " solid ", ";\n              color: ", ";\n            "])), size === 'XS' ? '1px' : '2px', !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15) : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              background: none;\n              border: ", " solid\n                ", ";\n              color: ", ";\n            "], ["\n              background: none;\n              border: ", " solid\n                ", ";\n              color: ", ";\n            "])), size === 'XS' ? '1px' : '2px', !invert ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? (0, utilsOolib_1.getPrimaryColorText)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors));
+    }
+}, function (_a) {
+    var variant = _a.variant;
+    return variant === 'ghost' && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        background: none;\n        border: none;\n      "], ["\n        background: none;\n        border: none;\n      "])));
+});
+exports.StyledTagClearIconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    height: 100%;\n    padding-right: 0.75rem;\n    padding-left: 0.75rem;\n    ", ";\n    ", ";\n"], ["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    height: 100%;\n    padding-right: 0.75rem;\n    padding-left: 0.75rem;\n    ", ";\n    ", ";\n"])), (0, mixins_1.transition)('color', 'background-color'), function (_a) {
+    var invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
+    return grey ? (0, styled_1.greyHover)({ invert: invert, colors: colors }) : (0, styled_1.blueHover)({ invert: invert, colors: colors });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/Tags/Comps/TagDisplay/index.d.ts

@@ -0,0 +1,26 @@
+import React, { FunctionComponent } from 'react';
+export interface TagDisplayProps {
+    display: string;
+    style?: React.CSSProperties;
+    invert?: boolean;
+    M?: boolean;
+    XS?: boolean;
+    tagColor?: string;
+    textColor?: string;
+    variant?: 'primary' | 'secondary';
+}
+/**
+ * @component Renders a TagDisplay component with customizable text, style and variant.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} display: The text to be displayed inside the TagDisplay component.
+ * @prop {React.CSSProperties} style: Additional CSS styles to apply to the TagDisplay.
+ * @prop {boolean} [invert] : A boolean indicating whether to invert the colors of the component. Defaults to false.
+ * @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 {string} [tagColor] : A string indicating the background color of the component. Defaults to undefined.
+ * @prop {string} [textColor] : A string indicating the text color of the component. Defaults to undefined.
+ * @prop {('primary' | 'secondary')} [variant] : A string indicating the variant of the component. Defaults to "primary".
+ * @return {ReactElement} The rendered TagDisplay component.
+ */
+export declare const TagDisplay: FunctionComponent<TagDisplayProps>;

package/dist/components/Tags/Comps/TagDisplay/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagDisplay = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_1 = require("./styled");
+var getTypoComp_1 = require("../../utils/getTypoComp");
+/**
+ * @component Renders a TagDisplay component with customizable text, style and variant.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} display: The text to be displayed inside the TagDisplay component.
+ * @prop {React.CSSProperties} style: Additional CSS styles to apply to the TagDisplay.
+ * @prop {boolean} [invert] : A boolean indicating whether to invert the colors of the component. Defaults to false.
+ * @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 {string} [tagColor] : A string indicating the background color of the component. Defaults to undefined.
+ * @prop {string} [textColor] : A string indicating the text color of the component. Defaults to undefined.
+ * @prop {('primary' | 'secondary')} [variant] : A string indicating the variant of the component. Defaults to "primary".
+ * @return {ReactElement} The rendered TagDisplay component.
+ */
+var TagDisplay = function (_a) {
+    var display = _a.display, style = _a.style, invert = _a.invert, M = _a.M, XS = _a.XS, tagColor = _a.tagColor, textColor = _a.textColor, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
+    var size = M ? 'M' : XS ? 'XS' : 'S';
+    var TYPO_COMP = (0, getTypoComp_1.getTypoComp)(size);
+    return (react_1.default.createElement(styled_1.StyledTagDisplay, { variant: variant, invert: invert, textColor: textColor, tagColor: tagColor, size: size, style: style },
+        react_1.default.createElement(TYPO_COMP, null, display)));
+};
+exports.TagDisplay = TagDisplay;

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

@@ -0,0 +1,9 @@
+import { SIZES } from "../styled";
+export interface StyledTagDisplayProps {
+    variant: 'primary' | 'secondary';
+    invert?: boolean;
+    size: keyof typeof SIZES;
+    textColor?: string;
+    tagColor?: string;
+}
+export declare const StyledTagDisplay: import("styled-components").StyledComponent<"div", any, StyledTagDisplayProps, never>;

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

@@ -0,0 +1,44 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 greyColor100 = themes_1.colors.greyColor100, greyColor80 = themes_1.colors.greyColor80, greyColor15 = themes_1.colors.greyColor15, greyColor40 = themes_1.colors.greyColor40;
+exports.StyledTagDisplay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n    ", "\n"], ["\n    ", "\n    ", "\n"])), function (_a) {
+    var size = _a.size;
+    return (0, styled_1.commonStyle)({ size: size });
+}, function (_a) {
+    var variant = _a.variant, invert = _a.invert, size = _a.size, textColor = _a.textColor, tagColor = _a.tagColor;
+    return variant === 'primary'
+        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            background-color: ", ";\n            color: ", ";\n          "], ["\n            background-color: ", ";\n            color: ", ";\n          "])), tagColor ? tagColor : !invert ? greyColor15 : greyColor80, textColor ? textColor : !invert ? greyColor80 : greyColor40) : //secondary
+     (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            background: none;\n            border: ", " solid\n            /* border: 2px solid */\n              ", ";\n            color: ", ";\n          "], ["\n            background: none;\n            border: ", " solid\n            /* border: 2px solid */\n              ", ";\n            color: ", ";\n          "])), size === 'XS' ? '1px' : '2px', tagColor ? tagColor : !invert ? (size === 'XS' ? greyColor100 : greyColor15) : greyColor80, textColor ? textColor : !invert ? (size === 'XS' ? greyColor100 : greyColor80) : greyColor15);
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Tags/Comps/TagLink/index.d.ts

@@ -0,0 +1,24 @@
+import { FunctionComponent } from "react";
+export interface TagLinkProps {
+    display: string;
+    to: string;
+    invert?: boolean;
+    M?: boolean;
+    XS?: boolean;
+    variant?: 'primary' | 'secondary';
+    color?: 'red' | 'green' | 'black';
+}
+/**
+ * @component Renders a TagLink component with customizable text, URL, style and variant.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} display: The text to be displayed inside the TagLink component.
+ * @prop {string} to: The URL to navigate to when the component is clicked.
+ * @prop {boolean} [invert] : A boolean indicating whether to invert the colors of the component. Defaults to false.
+ * @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 {string} [variant] : A string indicating the variant of the component. Defaults to "primary".
+ * @prop {string} [color] : A string indicating the background color of the component. Defaults to undefined.
+ * @return {ReactElement} The rendered TagLink component.
+ */
+export declare const TagLink: FunctionComponent<TagLinkProps>;

package/dist/components/Tags/Comps/TagLink/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagLink = void 0;
+var react_1 = __importDefault(require("react"));
+var getTypoComp_1 = require("../../utils/getTypoComp");
+var styled_1 = require("./styled");
+/**
+ * @component Renders a TagLink component with customizable text, URL, style and variant.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} display: The text to be displayed inside the TagLink component.
+ * @prop {string} to: The URL to navigate to when the component is clicked.
+ * @prop {boolean} [invert] : A boolean indicating whether to invert the colors of the component. Defaults to false.
+ * @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 {string} [variant] : A string indicating the variant of the component. Defaults to "primary".
+ * @prop {string} [color] : A string indicating the background color of the component. Defaults to undefined.
+ * @return {ReactElement} The rendered TagLink component.
+ */
+var TagLink = function (_a) {
+    var display = _a.display, to = _a.to, invert = _a.invert, M = _a.M, XS = _a.XS, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, color = _a.color;
+    var size = M ? 'M' : XS ? 'XS' : 'S';
+    var TYPO_COMP = (0, getTypoComp_1.getTypoComp)(size);
+    return (react_1.default.createElement(styled_1.StyledLink, { to: to },
+        react_1.default.createElement(styled_1.StyledTagLink, { color: color, variant: variant, invert: invert, size: size },
+            react_1.default.createElement(TYPO_COMP, null, display))));
+};
+exports.TagLink = TagLink;

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

@@ -0,0 +1,15 @@
+import { SIZES } from "../styled";
+export declare const StyledLink: import("styled-components").StyledComponent<any, any, any, any>;
+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, invert, color, size, theme: { colors } }: TagLinkStyleProps) => import("styled-components").FlattenSimpleInterpolation;
+export declare const StyledTagLink: import("styled-components").StyledComponent<"div", any, StyledTagLinkProps, never>;
+export {};

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

@@ -0,0 +1,62 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 mixins_1 = require("../../../../themes/mixins");
+var themes_1 = require("../../../../themes");
+var utilsOolib_1 = require("../../../../utilsOolib");
+var greyColor100 = themes_1.colors.greyColor100, greyColor15 = themes_1.colors.greyColor15, red = themes_1.colors.red, invertRed = themes_1.colors.invertRed, green = themes_1.colors.green, invertGreen = themes_1.colors.invertGreen;
+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, invert = _a.invert, color = _a.color, size = _a.size, colors = _a.theme.colors;
+    switch (true) {
+        case variant === 'primary':
+            switch (color) {
+                case 'red':
+                    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            background-color: ", ";\n            ", "\n            ", "\n          "], ["\n            background-color: ", ";\n            ", "\n            ", "\n          "])), !invert ? red : invertRed, (0, styled_1.textColor)({ invert: invert }), (0, styled_1.redHover)({ invert: invert }));
+                case 'green':
+                    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            background-color: ", ";\n            ", "\n            ", "\n          "], ["\n            background-color: ", ";\n            ", "\n            ", "\n          "])), !invert ? green : invertGreen, (0, styled_1.textColor)({ invert: invert }), (0, styled_1.greenHover)({ invert: invert }));
+                case 'black':
+                    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            background-color: ", ";\n            ", "\n            ", "\n          "], ["\n            background-color: ", ";\n            ", "\n            ", "\n          "])), !invert ? greyColor100 : greyColor15, (0, styled_1.textColor)({ invert: invert }), (0, styled_1.blackHover)({ invert: invert }));
+                default:
+                    return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            background-color: ", ";\n            ", "\n            ", "\n          "], ["\n            background-color: ", ";\n            ", "\n            ", "\n          "])), !invert ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), (0, styled_1.textColor)({ invert: invert }), (0, styled_1.blueHover)({ invert: invert, colors: colors }));
+            }
+        default: // variant secondary
+            return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        background: none;\n        border: ", " solid\n          ", ";\n        color: ", ";\n        ", "\n      "], ["\n        background: none;\n        border: ", " solid\n          ", ";\n        color: ", ";\n        ", "\n      "])), size === 'XS' ? '1px' : '2px', !invert ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? (0, utilsOolib_1.getPrimaryColorText)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), (0, styled_1.blueHover)({ invert: invert, colors: colors }));
+    }
+};
+exports.tagLinkStyle = tagLinkStyle;
+exports.StyledTagLink = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", ";\n"], ["\n  ", "\n  ", "\n  ", ";\n"])), function (_a) {
+    var size = _a.size;
+    return (0, styled_1.commonStyle)({ size: size });
+}, function (props) { return (0, exports.tagLinkStyle)(props); }, (0, mixins_1.transition)('background-color', 'color'));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/Tags/Comps/TagSelect/index.d.ts

@@ -0,0 +1,33 @@
+import React, { FunctionComponent } from "react";
+export interface TagSelectProps {
+    onClick?: (selectedOption: {
+        display: string;
+        value: string;
+    }) => void;
+    isSelected?: boolean;
+    display: string;
+    value: string;
+    M?: boolean;
+    XS?: boolean;
+    invert?: boolean;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+    onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+/**
+ * @component Renders a tag select component with customizable text and styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {function} onClick: A function to be called when the tag is clicked. Called with the selected option as an argument.
+ * @prop {boolean} isSelected: A boolean indicating whether the tag is selected. Defaults to false.
+ * @prop {string} display: The text to be displayed in the tag.
+ * @prop {string} value: The value of the tag.
+ * @prop {boolean} M: A boolean indicating whether the tag should be medium in size. Defaults to false.
+ * @prop {boolean} XS: A boolean indicating whether the tag should be extra small in size. Defaults to false.
+ * @prop {boolean} invert: A boolean indicating whether to invert the tag colors. Defaults to false.
+ * @prop {boolean} disabled: A boolean indicating whether the tag should be disabled. Defaults to false.
+ * @prop {React.CSSProperties} style: Additional CSS styles to apply to the tag.
+ * @prop {function} onMouseDown: A function to be called when the user mouses down on the tag. Called with the event as an argument.
+ * @return {ReactElement} The rendered tag select component.
+ */
+export declare const TagSelect: FunctionComponent<TagSelectProps>;

package/dist/components/Tags/Comps/TagSelect/index.js

@@ -0,0 +1,65 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagSelect = void 0;
+var react_1 = __importStar(require("react"));
+var getTypoComp_1 = require("../../utils/getTypoComp");
+var styled_1 = require("./styled");
+/**
+ * @component Renders a tag select component with customizable text and styling.
+ *
+ * - The props object containing the following properties:
+ * @prop {function} onClick: A function to be called when the tag is clicked. Called with the selected option as an argument.
+ * @prop {boolean} isSelected: A boolean indicating whether the tag is selected. Defaults to false.
+ * @prop {string} display: The text to be displayed in the tag.
+ * @prop {string} value: The value of the tag.
+ * @prop {boolean} M: A boolean indicating whether the tag should be medium in size. Defaults to false.
+ * @prop {boolean} XS: A boolean indicating whether the tag should be extra small in size. Defaults to false.
+ * @prop {boolean} invert: A boolean indicating whether to invert the tag colors. Defaults to false.
+ * @prop {boolean} disabled: A boolean indicating whether the tag should be disabled. Defaults to false.
+ * @prop {React.CSSProperties} style: Additional CSS styles to apply to the tag.
+ * @prop {function} onMouseDown: A function to be called when the user mouses down on the tag. Called with the event as an argument.
+ * @return {ReactElement} The rendered tag select component.
+ */
+var TagSelect = function (_a) {
+    var onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, display = _a.display, value = _a.value, M = _a.M, XS = _a.XS, invert = _a.invert, disabled = _a.disabled, style = _a.style, onMouseDown = _a.onMouseDown;
+    var _c = (0, react_1.useState)(isSelected), selected = _c[0], setSelected = _c[1];
+    var handleOnClick = function () {
+        setSelected(!selected);
+        onClick && onClick({ display: display, value: value });
+    };
+    (0, react_1.useLayoutEffect)(function () {
+        if (selected && !isSelected) {
+            setSelected(isSelected);
+        }
+    }, [isSelected]);
+    var size = M ? 'M' : XS ? 'XS' : 'S';
+    var TYPO_COMP = (0, getTypoComp_1.getTypoComp)(size);
+    return (react_1.default.createElement(styled_1.StyledTagSelect, { disabled: disabled, invert: invert, onClick: function () { return !onMouseDown && !disabled && handleOnClick(); }, selected: selected, size: size, style: style, onMouseDown: function (ev) {
+            return !disabled && onMouseDown && onMouseDown(ev);
+        } },
+        react_1.default.createElement(TYPO_COMP, null, display)));
+};
+exports.TagSelect = TagSelect;

package/dist/components/Tags/Comps/TagSelect/styled.d.ts

@@ -0,0 +1,8 @@
+import { SIZES } from '../styled';
+export interface StyledTagSelectProps {
+    size: keyof typeof SIZES;
+    disabled?: boolean;
+    selected?: boolean;
+    invert?: boolean;
+}
+export declare const StyledTagSelect: import("styled-components").StyledComponent<"div", any, StyledTagSelectProps, never>;

package/dist/components/Tags/Comps/TagSelect/styled.js

@@ -0,0 +1,59 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTagSelect = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var colors_1 = require("../../../../themes/colors");
+var mixins_1 = require("../../../../themes/mixins");
+var utilsOolib_1 = require("../../../../utilsOolib");
+var styled_1 = require("../styled");
+var greyColor100 = colors_1.colors.greyColor100, greyColor80 = colors_1.colors.greyColor80, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white;
+exports.StyledTagSelect = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  ", "\n\n  cursor: ", ";\n  border-style: solid;\n  border-width: ", ";\n\n  ", "\n\n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n"], ["\n  ", "\n  ", "\n\n  cursor: ", ";\n  border-style: solid;\n  border-width: ", ";\n\n  ", "\n\n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n"])), function (_a) {
+    var size = _a.size;
+    return (0, styled_1.commonStyle)({ size: size });
+}, (0, mixins_1.transition)('background-color'), function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'not-allowed' : 'pointer');
+}, function (_a) {
+    var size = _a.size;
+    return (size === 'XS' ? '1px' : '2px');
+}, function (_a) {
+    var disabled = _a.disabled, selected = _a.selected, invert = _a.invert, colors = _a.theme.colors;
+    if (disabled) {
+        return invert
+            ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            border-color: ", ";\n            background-color: ", ";\n            color: ", ";\n          "], ["\n            border-color: ", ";\n            background-color: ", ";\n            color: ", ";\n          "])), greyColor40, greyColor80, greyColor40) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            border-color: ", ";\n            color: ", ";\n          "], ["\n            border-color: ", ";\n            color: ", ";\n          "])), greyColor15, greyColor40);
+    }
+    return invert
+        ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          border-color: ", ";\n          background-color: ", ";\n          color: ", ";\n        "], ["\n          border-color: ", ";\n          background-color: ", ";\n          color: ", ";\n        "])), (0, utilsOolib_1.getPrimaryColor40)(colors), selected ? (0, utilsOolib_1.getPrimaryColor40)(colors) : 'unset', selected ? greyColor100 : (0, utilsOolib_1.getPrimaryColor40)(colors)) : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          border-color: ", ";\n          background-color: ", ";\n          color: ", ";\n        "], ["\n          border-color: ", ";\n          background-color: ", ";\n          color: ", ";\n        "])), (0, utilsOolib_1.getPrimaryColor100)(colors), selected ? (0, utilsOolib_1.getPrimaryColor100)(colors) : 'unset', selected ? white : (0, utilsOolib_1.getPrimaryColorText)(colors));
+}, function (_a) {
+    var selected = _a.selected, invert = _a.invert, disabled = _a.disabled, colors = _a.theme.colors;
+    return !selected &&
+        !disabled && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          background-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          color: ", ";\n        "])), invert ? greyColor80 : (0, utilsOolib_1.getPrimaryColor40)(colors), invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColorText)(colors));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1,25 @@
+import { ColorsType } from '../../../themes/colors';
+interface CommonStyleProps {
+    size: keyof typeof SIZES;
+}
+interface TextColorProps {
+    invert?: boolean;
+    colors?: ColorsType;
+}
+export interface HoverProps {
+    invert?: boolean;
+    colors: ColorsType;
+}
+export declare const SIZES: {
+    XS: string;
+    S: string;
+    M: string;
+};
+export declare const commonStyle: ({ size }: CommonStyleProps) => string;
+export declare const textColor: ({ invert }: TextColorProps) => import("styled-components").FlattenSimpleInterpolation;
+export declare const blueHover: ({ invert, colors }: HoverProps) => import("styled-components").FlattenSimpleInterpolation;
+export declare const redHover: ({ invert }: TextColorProps) => import("styled-components").FlattenSimpleInterpolation;
+export declare const greenHover: ({ invert }: TextColorProps) => import("styled-components").FlattenSimpleInterpolation;
+export declare const blackHover: ({ invert }: TextColorProps) => import("styled-components").FlattenSimpleInterpolation;
+export declare const greyHover: ({ invert }: TextColorProps) => import("styled-components").FlattenSimpleInterpolation;
+export {};

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

@@ -0,0 +1,52 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.greyHover = exports.blackHover = exports.greenHover = exports.redHover = exports.blueHover = exports.textColor = exports.commonStyle = exports.SIZES = void 0;
+var styled_components_1 = require("styled-components");
+var colors_1 = require("../../../themes/colors");
+var utilsOolib_1 = require("../../../utilsOolib");
+var greyColor100 = colors_1.colors.greyColor100, greyColor80 = colors_1.colors.greyColor80, greyColor10 = colors_1.colors.greyColor10, white = colors_1.colors.white, greyColor5 = colors_1.colors.greyColor5, hoverRed = colors_1.colors.hoverRed, hoverInvertRed = colors_1.colors.hoverInvertRed, hoverGreen = colors_1.colors.hoverGreen, invertHoverGreen = colors_1.colors.invertHoverGreen;
+exports.SIZES = {
+    XS: '2rem',
+    S: "3rem",
+    M: "4rem",
+};
+var commonStyle = function (_a) {
+    var size = _a.size;
+    return "\n  padding: ".concat(size === 'XS' ? '0 .5rem' : '0 1rem', ";\n  position: relative;\n  display: inline-flex;\n  column-gap: 1rem;\n  align-items: center;\n  border-radius: 0.2rem;\n  white-space: nowrap;\n  height: ").concat(exports.SIZES[size], ";\n  max-width: 100%;\n");
+};
+exports.commonStyle = commonStyle;
+var textColor = function (_a) {
+    var invert = _a.invert;
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), invert ? greyColor100 : white);
+};
+exports.textColor = textColor;
+var blueHover = function (_a) {
+    var invert = _a.invert, colors = _a.colors;
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"], ["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), invert ? (0, utilsOolib_1.getPrimaryColor10)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), invert ? greyColor100 : (0, utilsOolib_1.getPrimaryColorText)(colors));
+};
+exports.blueHover = blueHover;
+var redHover = function (_a) {
+    var invert = _a.invert;
+    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"], ["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), invert ? hoverInvertRed : hoverRed);
+};
+exports.redHover = redHover;
+var greenHover = function (_a) {
+    var invert = _a.invert;
+    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"], ["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), invert ? invertHoverGreen : hoverGreen);
+};
+exports.greenHover = greenHover;
+var blackHover = function (_a) {
+    var invert = _a.invert;
+    return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"], ["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), invert ? greyColor5 : greyColor80);
+};
+exports.blackHover = blackHover;
+var greyHover = function (_a) {
+    var invert = _a.invert;
+    return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"], ["\n  @media (hover: hover) {\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), invert ? greyColor80 : greyColor10);
+};
+exports.greyHover = greyHover;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/Tags/index.d.ts

@@ -1,42 +1,4 @@
-export function TagDisplay({ display, style, invert, M, XS, tagColor, textColor, variant, }: {
-    display: any;
-    style: any;
-    invert: any;
-    M: any;
-    XS: any;
-    tagColor: any;
-    textColor: any;
-    variant?: string;
-}): React.JSX.Element;
-export function TagClear({ id, display, M, XS, invert, onClick, variant, grey, }: {
-    id: any;
-    display: any;
-    M: any;
-    XS: any;
-    invert: any;
-    onClick?: () => void;
-    variant?: string;
-    grey: any;
-}): React.JSX.Element;
-export function TagSelect({ onClick, isSelected, display, value, M, XS, invert, disabled, style, onMouseDown }: {
-    onClick: any;
-    isSelected?: boolean;
-    display: any;
-    value: any;
-    M: any;
-    XS: any;
-    invert: any;
-    disabled: any;
-    style: any;
-    onMouseDown: any;
-}): React.JSX.Element;
-export function TagLink({ display, to, invert, M, XS, variant, color }: {
-    display: any;
-    to: any;
-    invert: any;
-    M: any;
-    XS: any;
-    variant?: string;
-    color: any;
-}): React.JSX.Element;
-import React from 'react';
+export { TagClear } from './Comps/TagClear';
+export { TagDisplay } from './Comps/TagDisplay';
+export { TagLink } from './Comps/TagLink';
+export { TagSelect } from './Comps/TagSelect';

package/dist/components/Tags/index.js

@@ -1,89 +1,11 @@
 "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 __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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TagLink = exports.TagSelect = exports.TagClear = exports.TagDisplay = void 0;
-var react_1 = __importStar(require("react"));
-var index_styled_1 = require("./index.styled");
-var icons_1 = require("../../icons");
-var getTypoComp = function (size) { return size === 'XS' ?
-    function (props) { return react_1.default.createElement(index_styled_1.STYLED_ELLIPSIS_SANS_2, __assign({}, props)); }
-    : function (props) { return react_1.default.createElement(index_styled_1.STYLED_ELLIPSIS_SANS_3, __assign({ semibold: true }, props)); }; };
-function TagDisplay(_a) {
-    var display = _a.display, style = _a.style, invert = _a.invert, M = _a.M, XS = _a.XS, tagColor = _a.tagColor, textColor = _a.textColor, _b = _a.variant, variant = _b === void 0 ? "primary" : _b;
-    var size = M ? "M" : XS ? "XS" : "S";
-    var TYPO_COMP = getTypoComp(size);
-    return (react_1.default.createElement(index_styled_1.StyledTagDisplay, { variant: variant, invert: invert, textColor: textColor, tagColor: tagColor, size: size, style: style },
-        react_1.default.createElement(TYPO_COMP, null, display)));
-}
-exports.TagDisplay = TagDisplay;
-function TagClear(_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 = getTypoComp(size);
-    return (react_1.default.createElement(index_styled_1.StyledTagClear, { invert: invert, size: size, grey: grey, variant: variant },
-        react_1.default.createElement(TYPO_COMP, null, display),
-        react_1.default.createElement(index_styled_1.StyledTagClearIconWrapper, { invert: invert, grey: grey, variant: variant, onClick: onClick },
-            react_1.default.createElement(XIconCom, { size: size === 'XS' ? '12' : '15', weight: 'bold' }))));
-}
-exports.TagClear = TagClear;
-function TagSelect(_a) {
-    var onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, display = _a.display, value = _a.value, M = _a.M, XS = _a.XS, invert = _a.invert, disabled = _a.disabled, style = _a.style, onMouseDown = _a.onMouseDown;
-    var _c = (0, react_1.useState)(isSelected), selected = _c[0], setSelected = _c[1];
-    var handleOnClick = function () {
-        setSelected(!selected);
-        onClick && onClick({ display: display, value: value });
-    };
-    (0, react_1.useLayoutEffect)(function () {
-        if (selected && !isSelected) {
-            setSelected(isSelected);
-        }
-    }, [isSelected]);
-    var size = M ? 'M' : XS ? 'XS' : 'S';
-    var TYPO_COMP = getTypoComp(size);
-    return (react_1.default.createElement(index_styled_1.StyledTagSelect, { disabled: disabled, invert: invert, onClick: function () { return !onMouseDown && !disabled && handleOnClick(); }, selected: selected, size: size, style: style, onMouseDown: function (ev) { return !disabled && onMouseDown && onMouseDown(ev); } },
-        react_1.default.createElement(TYPO_COMP, null, display)));
-}
-exports.TagSelect = TagSelect;
-function TagLink(_a) {
-    var display = _a.display, to = _a.to, invert = _a.invert, M = _a.M, XS = _a.XS, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, color = _a.color;
-    var size = M ? 'M' : XS ? 'XS' : 'S';
-    var TYPO_COMP = getTypoComp(size);
-    return (react_1.default.createElement(index_styled_1.StyledLink, { to: to },
-        react_1.default.createElement(index_styled_1.StyledTagLink, { color: color, variant: variant, invert: invert, size: size },
-            react_1.default.createElement(TYPO_COMP, null, display))));
-}
-exports.TagLink = TagLink;
+exports.TagSelect = exports.TagLink = exports.TagDisplay = exports.TagClear = void 0;
+var TagClear_1 = require("./Comps/TagClear");
+Object.defineProperty(exports, "TagClear", { enumerable: true, get: function () { return TagClear_1.TagClear; } });
+var TagDisplay_1 = require("./Comps/TagDisplay");
+Object.defineProperty(exports, "TagDisplay", { enumerable: true, get: function () { return TagDisplay_1.TagDisplay; } });
+var TagLink_1 = require("./Comps/TagLink");
+Object.defineProperty(exports, "TagLink", { enumerable: true, get: function () { return TagLink_1.TagLink; } });
+var TagSelect_1 = require("./Comps/TagSelect");
+Object.defineProperty(exports, "TagSelect", { enumerable: true, get: function () { return TagSelect_1.TagSelect; } });

package/dist/components/Tags/utils/getTypoComp.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const STYLED_ELLIPSIS_SANS_2: import("styled-components").StyledComponent<React.FunctionComponent<import("../../Typo").TypoCompProps>, any, {}, never>;
+export declare const STYLED_ELLIPSIS_SANS_3: import("styled-components").StyledComponent<React.FunctionComponent<import("../../Typo").TypoCompProps>, any, {}, never>;
+export declare const getTypoComp: (size: string) => (props: React.HTMLAttributes<HTMLSpanElement>) => React.JSX.Element;

package/dist/components/Tags/utils/getTypoComp.js

@@ -0,0 +1,34 @@
+"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 __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.getTypoComp = exports.STYLED_ELLIPSIS_SANS_3 = exports.STYLED_ELLIPSIS_SANS_2 = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var mixins_1 = require("../../../themes/mixins");
+var Typo_1 = require("../../Typo");
+exports.STYLED_ELLIPSIS_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), mixins_1.ellipsis);
+exports.STYLED_ELLIPSIS_SANS_3 = (0, styled_components_1.default)(Typo_1.SANS_3)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), mixins_1.ellipsis);
+var getTypoComp = function (size) {
+    return size === 'XS'
+        ? function (props) { return (react_1.default.createElement(exports.STYLED_ELLIPSIS_SANS_2, __assign({}, props))); }
+        : function (props) { return (react_1.default.createElement(exports.STYLED_ELLIPSIS_SANS_3, __assign({ semibold: true }, props))); };
+};
+exports.getTypoComp = getTypoComp;
+var templateObject_1, templateObject_2;

package/dist/stories/PageScrollIndicator.stories.js

@@ -21,6 +21,6 @@ var PageScrollIndicator_ = function (args) {
     var showDiv = args.showDiv;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(PageScrollIndicator_1.PageScrollIndicator, null),
-        showDiv && react_1.default.createElement("div", { style: { height: "1000px" } })));
+        showDiv && react_1.default.createElement("div", { style: { height: "2000px" } })));
 };
 exports.PageScrollIndicator_ = PageScrollIndicator_;

package/dist/stories/TagLink.stories.js

@@ -14,7 +14,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag_Link_Secondary = exports.Tag_Link_Primary = void 0;
 var react_router_dom_1 = require("react-router-dom");
 var Tags_1 = require("../components/Tags");
-var themes_1 = require("../themes");
 exports.default = {
     title: 'Components/Tag Link',
     argTypes: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.118.0",
+  "version": "2.119.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/components/Tags/index.styled.d.ts

@@ -1,8 +0,0 @@
-export const STYLED_ELLIPSIS_SANS_2: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Typo").TypoCompProps>, any, {}, never>;
-export const STYLED_ELLIPSIS_SANS_3: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Typo").TypoCompProps>, any, {}, never>;
-export const StyledTagClearIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledLink: import("styled-components").StyledComponent<any, any, any, any>;
-export const StyledTagDisplay: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledTagClear: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledTagSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledTagLink: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/Tags/index.styled.js

@@ -1,194 +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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledTagLink = exports.StyledTagSelect = exports.StyledTagClear = exports.StyledTagDisplay = exports.StyledLink = exports.StyledTagClearIconWrapper = exports.STYLED_ELLIPSIS_SANS_3 = exports.STYLED_ELLIPSIS_SANS_2 = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-var colors_1 = require("../../themes/colors");
-var react_router_dom_1 = require("react-router-dom");
-var mixins_1 = require("../../themes/mixins");
-var Typo_1 = require("../Typo");
-var utilsOolib_1 = require("../../utilsOolib");
-var greyColor100 = colors_1.colors.greyColor100, greyColor80 = colors_1.colors.greyColor80, greyColor10 = colors_1.colors.greyColor10, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white, red = colors_1.colors.red, invertRed = colors_1.colors.invertRed, green = colors_1.colors.green, invertGreen = colors_1.colors.invertGreen, greyColor5 = colors_1.colors.greyColor5, hoverRed = colors_1.colors.hoverRed, hoverInvertRed = colors_1.colors.hoverInvertRed, hoverGreen = colors_1.colors.hoverGreen, invertHoverGreen = colors_1.colors.invertHoverGreen;
-var SIZES = {
-    XS: '2rem',
-    S: "3rem",
-    M: "4rem",
-};
-var commonStyle = function (_a) {
-    var size = _a.size;
-    return "\n  padding: ".concat(size === "XS" ? "0 .5rem" : "0 1rem", ";\n  position: relative;\n  display: inline-flex;\n  column-gap: 1rem;\n  align-items: center;\n  border-radius:0.2rem;\n  white-space: nowrap;\n\theight: ").concat(SIZES[size], ";\n  max-width: 100%;\n");
-};
-var textColor = function (_a) {
-    var invert = _a.invert;
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n"], ["\n    color: ", ";\n"])), invert ? greyColor100 : white);
-};
-var blueHover = function (_a) {
-    var invert = _a.invert, colors = _a.colors;
-    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  @media (hover: hover){\n    &:hover {\n      background-color: ", ";\n      color: ", ";\t\t\n    }\n  }\n"], ["\n  @media (hover: hover){\n    &:hover {\n      background-color: ", ";\n      color: ", ";\t\t\n    }\n  }\n"])), invert
-        ? (0, utilsOolib_1.getPrimaryColor10)(colors)
-        : (0, utilsOolib_1.getPrimaryColor40)(colors), invert
-        ? greyColor100
-        : (0, utilsOolib_1.getPrimaryColorText)(colors));
-};
-var redHover = function (_a) {
-    var invert = _a.invert;
-    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  @media (hover: hover){\n    &:hover {\n      background-color: ", ";  \n    }\n  }\n"], ["\n  @media (hover: hover){\n    &:hover {\n      background-color: ", ";  \n    }\n  }\n"])), invert
-        ? hoverInvertRed
-        : hoverRed);
-};
-var greenHover = function (_a) {
-    var invert = _a.invert;
-    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  @media (hover: hover){\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"], ["\n  @media (hover: hover){\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), invert
-        ? invertHoverGreen
-        : hoverGreen);
-};
-var blackHover = function (_a) {
-    var invert = _a.invert;
-    return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  @media (hover: hover){\n    &:hover{\n      background-color: ", ";\n    }\n  }\n"], ["\n  @media (hover: hover){\n    &:hover{\n      background-color: ", ";\n    }\n  }\n"])), invert
-        ? greyColor5
-        : greyColor80);
-};
-var greyHover = function (_a) {
-    var invert = _a.invert;
-    return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  @media (hover: hover){\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"], ["\n  @media (hover: hover){\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"])), invert
-        ? greyColor80
-        : greyColor10);
-};
-exports.STYLED_ELLIPSIS_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), mixins_1.ellipsis);
-exports.STYLED_ELLIPSIS_SANS_3 = (0, styled_components_1.default)(Typo_1.SANS_3)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), mixins_1.ellipsis);
-var StyledTagDisplay = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (_a) {
-    var size = _a.size;
-    return commonStyle({ size: size });
-}, function (_a) {
-    var variant = _a.variant, invert = _a.invert, size = _a.size, textColor = _a.textColor, tagColor = _a.tagColor;
-    return variant === "primary"
-        ? (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n          background-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          color: ", ";\n        "])), tagColor
-            ? tagColor
-            : !invert
-                ? greyColor15
-                : greyColor80, textColor ? textColor : !invert ? greyColor80 : greyColor40) : //secondary
-     (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n          background: none;\n          border: ", " solid\n          /* border: 2px solid */\n            ", ";\n          color: ", ";\n        "], ["\n          background: none;\n          border: ", " solid\n          /* border: 2px solid */\n            ", ";\n          color: ", ";\n        "])), size === "XS" ? "1px" : "2px", tagColor ? tagColor : !invert ? size === "XS" ? greyColor100 : greyColor15 : greyColor80, textColor ? textColor : !invert ? size === "XS" ? greyColor100 : greyColor80 : greyColor15);
-});
-exports.StyledTagDisplay = StyledTagDisplay;
-var StyledTagClear = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n\n  \t", "\n\t//overrides of commonStyle\n\tpadding-right: 0;\n\tgap: 0.5rem;\n\t//--\n\n\t", "\n  \n\t\n\t", "\n"], ["\n\n  \t", "\n\t//overrides of commonStyle\n\tpadding-right: 0;\n\tgap: 0.5rem;\n\t//--\n\n\t", "\n  \n\t\n\t", "\n"])), function (_a) {
-    var size = _a.size;
-    return commonStyle({ size: size });
-}, function (_a) {
-    var variant = _a.variant, size = _a.size, invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
-    if (variant === "primary") {
-        return grey
-            ? (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n            background-color: ", ";\n            color: ", ";\n          "], ["\n            background-color: ", ";\n            color: ", ";\n          "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15) : (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n            background-color: ", ";\n            color: ", ";\n          "], ["\n            background-color: ", ";\n            color: ", ";\n          "])), !invert
-            ? (0, utilsOolib_1.getPrimaryColor100)(colors)
-            : (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? white : greyColor100);
-    }
-    else {
-        // secondry
-        return grey
-            ? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n            background: none;\n            border: ", " solid ", ";\n            color: ", ";\n          "], ["\n            background: none;\n            border: ", " solid ", ";\n            color: ", ";\n          "])), size === "XS" ? "1px" : "2px", !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15) : (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n            background: none;\n            border: ", " solid\n              ", ";\n            color: ", ";\n          "], ["\n            background: none;\n            border: ", " solid\n              ", ";\n            color: ", ";\n          "])), size === "XS" ? "1px" : "2px", !invert ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), !invert
-            ? (0, utilsOolib_1.getPrimaryColorText)(colors)
-            : (0, utilsOolib_1.getPrimaryColor40)(colors));
-    }
-}, function (_a) {
-    var variant = _a.variant;
-    return variant === "ghost" && (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      background: none;\n\t  border: none;\n    "], ["\n      background: none;\n\t  border: none;\n    "])));
-});
-exports.StyledTagClear = StyledTagClear;
-var StyledTagClearIconWrapper = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  \tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n  \theight: 100%;\n\tpadding-right: 0.75rem;\n\tpadding-left: 0.75rem;\n\t", ";\n\t", "\n"], ["\n  \tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n  \theight: 100%;\n\tpadding-right: 0.75rem;\n\tpadding-left: 0.75rem;\n\t", ";\n\t", "\n"])), (0, mixins_1.transition)('color', 'background-color'), function (_a) {
-    var invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
-    return grey
-        ? greyHover({ invert: invert, colors: colors })
-        : blueHover({ invert: invert, colors: colors });
-});
-exports.StyledTagClearIconWrapper = StyledTagClearIconWrapper;
-var StyledTagSelect = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  ", "\n  ", "\n\n  cursor: ", ";\n  border-style: solid;\n  border-width: ", ";\n  \n\n  ", "\n  \n  @media (hover: hover){\n    &:hover {\n      ", "\n    }\n  }\n  \n"], ["\n  ", "\n  ", "\n\n  cursor: ", ";\n  border-style: solid;\n  border-width: ", ";\n  \n\n  ", "\n  \n  @media (hover: hover){\n    &:hover {\n      ", "\n    }\n  }\n  \n"])), function (_a) {
-    var size = _a.size;
-    return commonStyle({ size: size });
-}, (0, mixins_1.transition)("background-color"), function (_a) {
-    var disabled = _a.disabled;
-    return disabled ? 'not-allowed' : 'pointer';
-}, function (_a) {
-    var size = _a.size;
-    return size === "XS" ? "1px" : "2px";
-}, function (_a) {
-    var disabled = _a.disabled, selected = _a.selected, invert = _a.invert, colors = _a.theme.colors;
-    if (disabled) {
-        return invert ? (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n        border-color: ", ";\n        background-color: ", ";\n        color: ", ";\n        "], ["\n        border-color: ", ";\n        background-color: ", ";\n        color: ", ";\n        "])), greyColor40, greyColor80, greyColor40) : (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n        border-color: ", ";\n        color: ", ";\n        "], ["\n        border-color: ", ";\n        color: ", ";\n        "])), greyColor15, greyColor40);
-    }
-    return invert ? (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n        border-color: ", ";\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        border-color: ", ";\n        background-color: ", ";\n        color: ", ";\n      "])), (0, utilsOolib_1.getPrimaryColor40)(colors), selected ? (0, utilsOolib_1.getPrimaryColor40)(colors) : 'unset', selected ? greyColor100 : (0, utilsOolib_1.getPrimaryColor40)(colors)) : (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n        border-color: ", ";\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        border-color: ", ";\n        background-color: ", ";\n        color: ", ";\n      "])), (0, utilsOolib_1.getPrimaryColor100)(colors), selected ? (0, utilsOolib_1.getPrimaryColor100)(colors) : 'unset', selected ? white : (0, utilsOolib_1.getPrimaryColorText)(colors));
-}, function (_a) {
-    var selected = _a.selected, invert = _a.invert, disabled = _a.disabled, colors = _a.theme.colors;
-    return !selected && !disabled && (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), invert ? greyColor80 : (0, utilsOolib_1.getPrimaryColor40)(colors), invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColorText)(colors));
-});
-exports.StyledTagSelect = StyledTagSelect;
-var tagLinkStyle = function (_a) {
-    var variant = _a.variant, invert = _a.invert, color = _a.color, size = _a.size, colors = _a.theme.colors;
-    switch (true) {
-        case variant === "primary":
-            switch (color) {
-                case 'red':
-                    return (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n            background-color: ", ";\n            ", "\n            ", ";\n            "], ["\n            background-color: ", ";\n            ", "\n            ", ";\n            "])), !invert ? red : invertRed, textColor({ invert: invert }), redHover({ invert: invert, color: color }));
-                case 'green':
-                    return (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n            background-color: ", ";\n            ", "\n            ", ";\n            "], ["\n            background-color: ", ";\n            ", "\n            ", ";\n            "])), !invert ? green : invertGreen, textColor({ invert: invert }), greenHover({ invert: invert }));
-                case 'black':
-                    return (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n            background-color: ", ";\n            ", "\n            ", "\n        "], ["\n            background-color: ", ";\n            ", "\n            ", "\n        "])), !invert ? greyColor100 : greyColor15, textColor({ invert: invert }), blackHover({ invert: invert }));
-                default:
-                    return (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n            background-color: ", ";\n            ", "\n            ", ";\n            "], ["\n            background-color: ", ";\n            ", "\n            ", ";\n            "])), !invert ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), textColor({ invert: invert }), blueHover({ invert: invert }));
-            }
-        default: // variant secondary
-            return (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n        background: none;\n        border: ", " solid \n            ", ";\n        color: ", ";\n        ", ";\n      "], ["\n        background: none;\n        border: ", " solid \n            ", ";\n        color: ", ";\n        ", ";\n      "])), size === "XS" ? "1px" : "2px", !invert ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? (0, utilsOolib_1.getPrimaryColorText)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), blueHover({ invert: invert, colors: colors }));
-    }
-};
-var StyledTagLink = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  \t", "\n    ", "\n\t  ", ";\n"], ["\n  \t", "\n    ", "\n\t  ", ";\n"])), function (_a) {
-    var size = _a.size;
-    return commonStyle({ size: size });
-}, function (props) { return tagLinkStyle(props); }, (0, mixins_1.transition)("background-color", "color"));
-exports.StyledTagLink = StyledTagLink;
-var StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  text-decoration: none;\n"], ["\n  text-decoration: none;\n"])));
-exports.StyledLink = StyledLink;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31;
-/* ${({ variant, invert, color, size, theme: { colors } }) => {
-
-        return variant === "primary"
-            ? css`
-                background-color: ${ !invert
-                        ? getPrimaryColor100(colors)
-                        : getPrimaryColor40(colors)};
-                color: ${ !invert ? white : greyColor100 };
-                ${blueHover({invert, colors})};
-            `
-            : // secondary
-            css`
-                background: none;
-                border: ${
-                    size === "XS" ? "1px" : "2px"} solid ${
-                    !invert ? getPrimaryColor100(colors) : getPrimaryColor40(colors) };
-                color: ${!invert ? getPrimaryColorText(colors) : getPrimaryColor40(colors)};
-                ${blueHover({invert, colors})}
-            `;
-    }} */