@ayseaistudio/ui-components 3.2.2 → 3.3.0

package/dist/Avatar/Avatar.d.ts

@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import "./style.css";
 interface Props {
     letter?: string;
-    size?: "large" | "x-small" | "medium" | "small";
+    size?: "large" | "xx-small" | "x-small" | "medium" | "small";
     color?: "mauve" | "lime" | "zest" | "grey" | "blue" | "green" | "galliano" | "orange" | "red";
     status?: "active" | "default";
     version?: "half" | "default";

package/dist/Avatar/Avatar.js

@@ -6,7 +6,7 @@ export const Avatar = ({ letter = "AB", size, color, status, version, className,
 };
 Avatar.propTypes = {
     letter: PropTypes.string,
-    size: PropTypes.oneOf(["large", "x-small", "medium", "small"]),
+    size: PropTypes.oneOf(["large", "xx-small", "x-small", "medium", "small"]),
     color: PropTypes.oneOf([
         "mauve",
         "lime",

package/dist/Avatar/style.css

@@ -57,6 +57,12 @@
   width: 24px;
 }
 
+.avatar.xx-small {
+  border-radius: 6px;
+  height: 20px;
+  width: 20px;
+}
+
 .avatar.default {
   box-shadow: inset 0px 0px 10px #ffffff40;
 }
@@ -186,6 +192,13 @@
   width: 12px;
 }
 
+.avatar.xx-small .rectangle {
+  height: 20px;
+  left: 0;
+  top: calc(50.00% - 10px);
+  width: 10px;
+}
+
 .avatar.green .rectangle {
   background-color: #c3efcc;
 }
@@ -298,6 +311,15 @@
   line-height: var(--b3-bold-line-height);
 }
 
+.avatar.xx-small .AB {
+  font-family: var(--b3-bold-font-family);
+  font-size: var(--b3-bold-font-size);
+  font-style: var(--b3-bold-font-style);
+  font-weight: var(--b3-bold-font-weight);
+  letter-spacing: var(--b3-bold-letter-spacing);
+  line-height: var(--b3-bold-line-height);
+}
+
 .avatar.large .AB {
   font-family: var(--h4-black-font-family);
   font-size: var(--h4-black-font-size);

package/dist/CallCenterTasks/CallCenterTasks.d.ts

@@ -0,0 +1,23 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface Props {
+    status?: "warning" | "complete" | "default";
+    className?: any;
+    icon?: React.ReactNode;
+    divideVerticalDivideVertical?: string;
+    strikethroughText?: string;
+    labelText?: string;
+    strikethroughDivClassName?: any;
+    strikethroughIcon?: React.ReactNode;
+    index?: number;
+}
+export declare const CallCenterTasks: {
+    ({ status, className, strikethroughText, labelText, strikethroughDivClassName, strikethroughIcon, index, }: Props): React.ReactNode;
+    propTypes: {
+        status: PropTypes.Requireable<string>;
+        strikethroughText: PropTypes.Requireable<string>;
+        labelText: PropTypes.Requireable<string>;
+        index: PropTypes.Requireable<number>;
+    };
+};
+export {};

package/dist/CallCenterTasks/CallCenterTasks.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { Label } from "../Label";
+import { Strikethrough } from "../Strikethrough";
+import "./style.css";
+import { IconLayoutDashboard, IconCheck, IconX } from "@tabler/icons-react";
+export const CallCenterTasks = ({ status, className, strikethroughText = "Selamlaşma ve kendini tanıtma.", labelText, strikethroughDivClassName, strikethroughIcon = status === "complete" ? _jsx(IconCheck, { className: "icons-12", color: "#fff" }) :
+    status === "warning" ? _jsx(IconX, { className: "icons-12", color: "#fff" }) : _jsx(IconLayoutDashboard, { className: "icons-12", color: "#fff" }), index = 1, }) => {
+    return (_jsxs("div", { className: `call-center-tasks ${className}`, children: [_jsx("div", { className: "frame-5", "data-status": status, children: _jsx("div", { className: `frame-6 status-4-${status}` }) }), _jsx(Label, { bold: "on", className: "label-2", color: status === "warning" ? "galliano" : "black", size: "medium", spacing: "on", stroke: "off", text: labelText || index.toString(), version: "primary" }), _jsx("div", { className: `frame-7 status-5-${status}`, children: _jsx(Strikethrough, { className: "strikethrough-checkbox", color: "black", size: "medium", status: status === "default" ? "default" : "selected", text: strikethroughText }) })] }));
+};
+CallCenterTasks.propTypes = {
+    status: PropTypes.oneOf(["warning", "complete", "default"]),
+    strikethroughText: PropTypes.string,
+    labelText: PropTypes.string,
+    index: PropTypes.number,
+};

package/dist/CallCenterTasks/index.d.ts

@@ -0,0 +1 @@
+export { CallCenterTasks } from "./CallCenterTasks";

package/dist/CallCenterTasks/index.js

@@ -0,0 +1 @@
+export { CallCenterTasks } from "./CallCenterTasks";

package/dist/CallCenterTasks/style.css

@@ -0,0 +1,155 @@
+.call-center-tasks {
+  align-items: flex-start;
+  display: flex;
+  gap: 4px;
+  position: relative;
+  width: 466px;
+  pointer-events: none;
+}
+
+.call-center-tasks .frame-5 {
+  align-items: center;
+  align-self: stretch;
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  justify-content: flex-start;
+  position: relative;
+}
+
+.call-center-tasks .frame-5::before {
+  content: '';
+  position: absolute;
+  right: 5px;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-image: repeating-linear-gradient(to bottom, #b0b0b0 0px, #b0b0b0 4px, transparent 4px, transparent 8px);
+}
+
+.call-center-tasks .frame-5[data-status="warning"]::before {
+  background-image: none;
+  background-color: #d7af1b;
+}
+
+.call-center-tasks .frame-5[data-status="complete"]::before {
+  background-image: none;
+  background-color: #3d3d3d;
+}
+
+.call-center-tasks .frame-6 {
+  border-radius: 96px;
+  height: 12px;
+  position: relative;
+  width: 12px;
+}
+
+.call-center-tasks .label-2 {
+  flex: 0 0 auto !important;
+  
+}
+
+.call-center-tasks .divide-vertical-2 {
+  height: 24px !important;
+  left: unset !important;
+  position: relative !important;
+  top: unset !important;
+}
+
+.call-center-tasks .frame-7 {
+  align-items: flex-start;
+  border: 1px solid;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  justify-content: center;
+  padding: 8px;
+  position: relative;
+  width: 100%;
+}
+
+.call-center-tasks .strikethrough-checkbox {
+  align-self: stretch !important;
+  display: flex !important;
+  flex: 0 0 auto !important;
+  width: 100% !important;
+}
+
+.call-center-tasks .merhaba-iyi-g-nler-wrapper {
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  flex: 0 0 auto;
+  gap: 10px;
+  padding: 0px 0px 0px 36px;
+  position: relative;
+  width: 100%;
+}
+
+.call-center-tasks .merhaba-iyi-g-nler {
+  flex: 1;
+  font-family: var(--b2-medium-font-family);
+  font-size: var(--b2-medium-font-size);
+  font-style: var(--b2-medium-font-style);
+  font-weight: var(--b2-medium-font-weight);
+  letter-spacing: var(--b2-medium-letter-spacing);
+  line-height: var(--b2-medium-line-height);
+  margin-top: -1.00px;
+  position: relative;
+}
+
+.call-center-tasks .divide-vertical-3 {
+  flex: 1 !important;
+  flex-grow: 1 !important;
+  margin-bottom: -0.50px !important;
+  position: relative !important;
+  width: 1px !important;
+}
+
+.call-center-tasks .icons-12 {
+  height: 16px !important;
+  left: 4px !important;
+  position: absolute !important;
+  top: 4px !important;
+  width: 16px !important;
+}
+
+.call-center-tasks .status-4-warning {
+  background-color: #d7af1b;
+}
+
+.call-center-tasks .status-4-complete {
+  background-color: #3d3d3d;
+}
+
+.call-center-tasks .status-4-default {
+  background-color: #b0b0b0;
+}
+
+.call-center-tasks .status-5-warning {
+  background-color: #b989151a;
+  border-color: #d7af1b;
+}
+
+.call-center-tasks .status-5-complete {
+  border-color: #d1d1d1;
+  background-color: #ffffff;
+}
+
+.call-center-tasks .status-5-default {
+  background-color: #f7f7f7;
+  border-color: #d1d1d1;
+}
+
+.call-center-tasks .frame-7.status-5-warning .merhaba-iyi-g-nler {
+  color: #b0b0b0;
+}
+
+.call-center-tasks .frame-7.status-5-complete .merhaba-iyi-g-nler {
+  color: #b0b0b0;
+}
+
+.call-center-tasks .frame-7.status-5-default .merhaba-iyi-g-nler {
+  color: rgba(136, 136, 136, 1);
+}

package/dist/ColorFlag/ColorFlag.d.ts

@@ -0,0 +1,16 @@
+import PropTypes from "prop-types";
+import "./style.css";
+type ColorOption = "lime" | "red" | "galliano" | "grey";
+interface Props {
+    property1: ColorOption | "default";
+    className: any;
+    labelIcon: React.JSX.Element;
+    onChange?: (color: ColorOption) => void;
+}
+export declare const ColorFlag: {
+    ({ property1, className, labelIcon, onChange, }: Props): React.JSX.Element;
+    propTypes: {
+        property1: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/ColorFlag/ColorFlag.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import "./style.css";
+import { IconChevronDown } from "@tabler/icons-react";
+import { Avatar, Label } from "../index";
+export const ColorFlag = ({ property1, className, labelIcon = _jsx(IconChevronDown, { className: "icons-3", color: "#5D5D5D" }), onChange, }) => {
+    const containerRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const initialColor = (property1 === "default" ? "grey" : property1);
+    const [selectedColor, setSelectedColor] = useState(initialColor);
+    const [overlayPos, setOverlayPos] = useState({ left: 0, right: 0, top: 0, width: 0 });
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isOpen]);
+    useEffect(() => {
+        // sync when prop changes
+        const next = (property1 === "default" ? "grey" : property1);
+        setSelectedColor(next);
+    }, [property1]);
+    const updateOverlayPosition = () => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        setOverlayPos({
+            left: Math.round(rect.left),
+            right: Math.round(window.innerWidth - rect.right),
+            top: Math.round(rect.bottom + 6),
+            width: Math.round(rect.width),
+        });
+    };
+    useLayoutEffect(() => {
+        if (!isOpen)
+            return;
+        updateOverlayPosition();
+        const handle = () => updateOverlayPosition();
+        window.addEventListener("scroll", handle, true);
+        window.addEventListener("resize", handle);
+        return () => {
+            window.removeEventListener("scroll", handle, true);
+            window.removeEventListener("resize", handle);
+        };
+    }, [isOpen]);
+    const handleToggle = () => setIsOpen((prev) => !prev);
+    const handleSelect = (color) => {
+        setSelectedColor(color);
+        setIsOpen(false);
+        onChange?.(color);
+    };
+    return (_jsxs("div", { className: `color-flag ${className}`, ref: containerRef, onClick: (e) => { e.preventDefault(); e.stopPropagation(); handleToggle(); }, onMouseDown: (e) => { e.preventDefault(); e.stopPropagation(); }, role: "button", tabIndex: 0, onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            handleToggle();
+        } }, children: [_jsx(Avatar, { className: `${selectedColor === "grey" ? "class-2" : (selectedColor === "lime") ? "class-3" : "class-4"}`, color: selectedColor, letter: "", size: "x-small", status: "active", version: "default" }), _jsx(Label, { bold: "off", className: "label-instance-color-flag", color: "black", leftIcon: labelIcon, size: "medium", spacing: "on", stroke: "off", version: "primary" }), isOpen && createPortal(_jsx("div", { className: "color-flag-overlay", onClick: (e) => e.stopPropagation(), style: { right: overlayPos.right, top: overlayPos.top }, children: ["lime", "galliano", "red", "grey"].map((color) => (_jsxs("div", { className: `color-flag-option ${color}`, onClick: () => handleSelect(color), children: [_jsx(Avatar, { className: `${color === "grey" ? "class-2" : color === "lime" ? "class-3" : "class-4"} avatar-instance`, color: color, letter: "", size: "xx-small", status: "active", version: "default" }), _jsx(Label, { bold: "off", className: "label-instance", color: "black", size: "medium", spacing: "on", stroke: "off", text: color.charAt(0).toUpperCase() + color.slice(1), version: "primary" })] }, color))) }), document.body)] }));
+};
+ColorFlag.propTypes = {
+    property1: PropTypes.oneOf(["lime", "red", "galliano", "grey", "default"]),
+};

package/dist/ColorFlag/index.d.ts

@@ -0,0 +1 @@
+export { ColorFlag } from "./ColorFlag";

package/dist/ColorFlag/index.js

@@ -0,0 +1 @@
+export { ColorFlag } from "./ColorFlag";

package/dist/ColorFlag/style.css

@@ -0,0 +1,68 @@
+.color-flag {
+  align-items: center;
+  border-radius: 8px;
+  display: inline-flex;
+  gap: 4px;
+  padding: 4px 2px 4px 4px;
+  position: relative;
+}
+
+.color-flag *{
+cursor: pointer;
+}
+
+.color-flag .class-2 {
+  aspect-ratio: 1 !important;
+  background-color: #f1f1f1 !important;
+  height: 20px !important;
+  width: 20px !important;
+}
+
+.color-flag .class-3 {
+  height: 20px !important;
+  width: 20px !important;
+}
+
+.color-flag .class-4 {
+  aspect-ratio: 1 !important;
+  height: 20px !important;
+  width: 20px !important;
+}
+
+.color-flag .label-instance-color-flag {
+  flex: 0 0 auto !important;
+  padding: 4px !important;
+}
+
+.color-flag .icons-3 {
+  height: 18px !important;
+  position: relative !important;
+  width: 18px !important;
+}
+/* Overlay */
+.color-flag-overlay {
+  position: fixed;
+  z-index: 10000;
+  background: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  padding: 4px;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 6px;
+}
+
+.color-flag-option {
+  display: flex;
+  align-items: center;
+  padding-left: 4px;
+  border-radius: 6px;
+}
+.color-flag-option * {
+  cursor: pointer;
+}
+
+.color-flag-option:hover {
+  background: #f6f6f6;
+}

package/dist/InfoTooltip/InfoTooltip.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./style.css";
+type InfoTooltipProps = {
+    text: string;
+    className?: string;
+    icon?: React.JSX.Element;
+    withIcon?: boolean;
+};
+export declare const InfoTooltip: React.FC<InfoTooltipProps>;
+export default InfoTooltip;

package/dist/InfoTooltip/InfoTooltip.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./style.css";
+import { IconInfoCircle } from "@tabler/icons-react";
+export const InfoTooltip = ({ text, className, icon, withIcon = true }) => {
+    return (_jsxs("div", { className: `info ${className || ""}`.trim(), children: [withIcon ? (icon || _jsx(IconInfoCircle, { className: "icons", size: 16, color: "#5D5D5D" })) : null, _jsx("p", { className: "text-wrapper", children: text })] }));
+};
+export default InfoTooltip;

package/dist/InfoTooltip/index.d.ts

@@ -0,0 +1 @@
+export { InfoTooltip } from "./InfoTooltip";

package/dist/InfoTooltip/index.js

@@ -0,0 +1 @@
+export { InfoTooltip } from "./InfoTooltip";

package/dist/InfoTooltip/style.css

@@ -0,0 +1,35 @@
+.info {
+  align-items: flex-start;
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: var(--drop-shadow-mid);
+  display: flex;
+  gap: 6px;
+  padding: 6px;
+  position: relative;
+  width: auto;
+  max-width: 276px;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.info .icons {
+  height: 16px !important;
+  position: relative !important;
+  width: 16px !important;
+}
+
+.info .text-wrapper {
+  color: #5d5d5d;
+  flex: 1;
+  font-family: var(--b2-medium-font-family);
+  font-size: var(--b2-medium-font-size);
+  font-style: var(--b2-medium-font-style);
+  font-weight: var(--b2-medium-font-weight);
+  letter-spacing: var(--b2-medium-letter-spacing);
+  line-height: var(--b2-medium-line-height);
+  margin-top: -1.00px;
+  position: relative;
+}
+
+

package/dist/Label/Label.d.ts

@@ -14,15 +14,17 @@ interface Props {
     spacing?: "off" | "on";
     className: any;
     divClassName?: string;
+    onClick?: () => void;
+    hover?: boolean;
+    tooltip?: string;
+    useInfoTooltip?: boolean;
+    tooltipWithIcon?: boolean;
 }
 export declare const Label: {
-    ({ text, title, leftIcon, rightIcon, size, color, version, stroke, bold, spacing, className, divClassName, }: Props): React.JSX.Element;
+    ({ text, title, leftIcon, rightIcon, size, color, version, stroke, bold, spacing, className, divClassName, onClick, hover, tooltip, useInfoTooltip, tooltipWithIcon, }: Props): React.JSX.Element;
     propTypes: {
         text: PropTypes.Requireable<string>;
         title: PropTypes.Requireable<string>;
-        withLeftIcon: PropTypes.Requireable<boolean>;
-        withRightIcon: PropTypes.Requireable<boolean>;
-        withText: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<string>;
         color: PropTypes.Requireable<string>;
         version: PropTypes.Requireable<string>;
@@ -30,6 +32,10 @@ export declare const Label: {
         bold: PropTypes.Requireable<string>;
         spacing: PropTypes.Requireable<string>;
         divClassName: PropTypes.Requireable<string>;
+        hover: PropTypes.Requireable<boolean>;
+        tooltip: PropTypes.Requireable<string>;
+        useInfoTooltip: PropTypes.Requireable<boolean>;
+        tooltipWithIcon: PropTypes.Requireable<boolean>;
     };
 };
 export {};

package/dist/Label/Label.js

@@ -1,7 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
+import { createPortal } from "react-dom";
 import "./style.css";
+import { InfoTooltip } from "../InfoTooltip";
 const getIconColor = (version, color) => {
     if (version === "primary" && color === "black") {
         return "#5D5D5D";
@@ -32,21 +34,58 @@ const getIconClassName = (size) => {
     };
     return sizeClassMap[size] || "";
 };
-export const Label = ({ text, title, leftIcon, rightIcon, size, color, version, stroke = "off", bold, spacing, className, divClassName, }) => {
-    return (_jsxs("div", { className: `label ${size} ${stroke} ${spacing} ${color} ${className}`, title: title, children: [leftIcon && (React.cloneElement(leftIcon, {
-                className: getIconClassName(size),
-                color: getIconColor(version, color)
-            })), text && (_jsx("div", { className: `text-wrapper ${version} bold-${bold} size-${size} color-${color} ${divClassName || ""}`, children: text })), rightIcon && (React.cloneElement(rightIcon, {
-                className: getIconClassName(size),
-                color: getIconColor(version, color)
-            }))] }));
+export const Label = ({ text, title, leftIcon, rightIcon, size, color, version, stroke = "off", bold, spacing, className, divClassName, onClick, hover = false, tooltip = "", useInfoTooltip = false, tooltipWithIcon = true, }) => {
+    const strokeClass = stroke === "on" ? "stroke-on" : "stroke-off";
+    const tooltipTimerRef = useRef(undefined);
+    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+    const labelRef = useRef(null);
+    const [anchorPos, setAnchorPos] = useState({ left: 0, top: 0 });
+    const hasLabelText = typeof text === "string" && text.trim().length > 0;
+    const tooltipText = hasLabelText ? (tooltip || text || "") : (tooltip || "");
+    useEffect(() => {
+        return () => {
+            if (tooltipTimerRef.current) {
+                window.clearTimeout(tooltipTimerRef.current);
+            }
+        };
+    }, []);
+    const handleMouseEnter = () => {
+        if (!tooltipText)
+            return;
+        const rect = labelRef.current?.getBoundingClientRect();
+        if (rect) {
+            setAnchorPos({ left: rect.left, top: rect.bottom });
+        }
+        tooltipTimerRef.current = window.setTimeout(() => {
+            setIsTooltipVisible(true);
+        }, 150);
+    };
+    const handleMouseLeave = () => {
+        if (tooltipTimerRef.current) {
+            window.clearTimeout(tooltipTimerRef.current);
+            tooltipTimerRef.current = undefined;
+        }
+        setIsTooltipVisible(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `label ${size} ${strokeClass} ${spacing} ${color} ${className} ${hover ? "hover-move" : ""}`, title: title, onClick: onClick, "data-testid": "label", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { cursor: hover ? "pointer" : "default" }, ref: labelRef, children: [leftIcon && (React.cloneElement(leftIcon, {
+                        className: getIconClassName(size),
+                        color: getIconColor(version, color)
+                    })), text && (_jsx("div", { className: `text-wrapper ${version} bold-${bold} size-${size} color-${color} ${divClassName || ""}`, children: text })), rightIcon && (React.cloneElement(rightIcon, {
+                        className: getIconClassName(size),
+                        color: getIconColor(version, color)
+                    }))] }), isTooltipVisible && useInfoTooltip
+                ? createPortal(_jsx("div", { style: {
+                        position: "fixed",
+                        top: Math.min(anchorPos.top + 6, (typeof window !== "undefined" ? window.innerHeight : 0) - 100),
+                        left: Math.max(8, Math.min(anchorPos.left, (typeof window !== "undefined" ? window.innerWidth : 0) - 300)),
+                        zIndex: 9999,
+                        pointerEvents: "none",
+                    }, children: _jsx(InfoTooltip, { text: tooltipText, withIcon: tooltipWithIcon }) }), document.body)
+                : null] }));
 };
 Label.propTypes = {
     text: PropTypes.string,
     title: PropTypes.string,
-    withLeftIcon: PropTypes.bool,
-    withRightIcon: PropTypes.bool,
-    withText: PropTypes.bool,
     size: PropTypes.oneOf(["large", "x-large", "medium", "small"]),
     color: PropTypes.oneOf([
         "mauve",
@@ -65,4 +104,8 @@ Label.propTypes = {
     bold: PropTypes.oneOf(["off", "on"]),
     spacing: PropTypes.oneOf(["off", "on"]),
     divClassName: PropTypes.string,
+    hover: PropTypes.bool,
+    tooltip: PropTypes.string,
+    useInfoTooltip: PropTypes.bool,
+    tooltipWithIcon: PropTypes.bool,
 };

package/dist/SecondaryButton/style.css

@@ -29,7 +29,6 @@
   align-items: center;
   display: flex;
   justify-content: center;
-  margin-top: -1.00px;
   position: relative;
   text-align: center;
   white-space: nowrap;

package/dist/TabButton/style.css

@@ -70,13 +70,20 @@
   display: flex;
   top: 272px;
   width: 107px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
 }
 
 .tab-button.small.left-align {
   display: flex;
   width: 95px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
 }
 
+
 .tab-button.large .button {
   font-family: var(--h6-medium-font-family);
   font-size: var(--h6-medium-font-size);
@@ -125,6 +132,7 @@
   width: fit-content;
   display: flex;
   justify-content: flex-start;
+  align-items: center;
 }
 
 .tab-button.large.selected .button {

package/dist/index.d.ts

@@ -36,3 +36,6 @@ export { Flag } from "./Flag/Flag";
 export { MessageInputField } from "./MessageInputField/MessageInputField";
 export { TimeSelector } from "./TimeSelector/TimeSelector";
 export { TabButtonForSidebar } from "./TabButtonForSidebar/TabButtonForSidebar";
+export { InfoTooltip } from "./InfoTooltip/InfoTooltip";
+export { ColorFlag } from "./ColorFlag/ColorFlag";
+export { CallCenterTasks } from "./CallCenterTasks/CallCenterTasks";

package/dist/index.js

@@ -36,3 +36,6 @@ export { Flag } from "./Flag/Flag";
 export { MessageInputField } from "./MessageInputField/MessageInputField";
 export { TimeSelector } from "./TimeSelector/TimeSelector";
 export { TabButtonForSidebar } from "./TabButtonForSidebar/TabButtonForSidebar";
+export { InfoTooltip } from "./InfoTooltip/InfoTooltip";
+export { ColorFlag } from "./ColorFlag/ColorFlag";
+export { CallCenterTasks } from "./CallCenterTasks/CallCenterTasks";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ayseaistudio/ui-components",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",