@beydesign/storybook 0.0.12 → 0.0.13

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { Checkbox } from './stories/Checkbox';
 export { ToggleButtonGroup } from './stories/ToggleButtonGroup';
 export { ProgressIndicator } from './stories/ProgressIndicator';
 export { Logo } from './stories/Logo';
+export { Toggle } from './stories/Toggle';
 export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, type MainButtonProps, } from './stories/types/button';
 export { BadgeColor, BadgeSize, type BadgeProps } from './stories/types/badge';
 export { AvatarStyle, AvatarSize, type AvatarProps, } from './stories/types/avatar';
@@ -14,3 +15,4 @@ export { CheckboxType, type CheckboxProps } from './stories/types/checkbox';
 export { ToggleButtonGroupSize, type ToggleButtonGroupProps, } from './stories/types/toggle-button-group';
 export { ProgressIndicatorMode, type ProgressIndicatorProps, } from './stories/types/progress-indicator';
 export { LogoVariant, type LogoProps } from './stories/types/logo';
+export { TogglePosition, type ToggleProps } from './stories/types/toggle';

package/dist/index.js

@@ -7,12 +7,22 @@ export { Checkbox } from './stories/Checkbox';
 export { ToggleButtonGroup } from './stories/ToggleButtonGroup';
 export { ProgressIndicator } from './stories/ProgressIndicator';
 export { Logo } from './stories/Logo';
-// Types
+export { Toggle } from './stories/Toggle';
+// Button Types
 export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './stories/types/button';
+// Badge Types
 export { BadgeColor, BadgeSize } from './stories/types/badge';
+// Avatar Types
 export { AvatarStyle, AvatarSize, } from './stories/types/avatar';
+// Typography Types
 export { TypographySize, TypographyWeight, } from './stories/types/typography';
+// Checkbox Types
 export { CheckboxType } from './stories/types/checkbox';
+// Toggle Button Group Types
 export { ToggleButtonGroupSize, } from './stories/types/toggle-button-group';
+// Progress Indicator Types
 export { ProgressIndicatorMode, } from './stories/types/progress-indicator';
+// Logo Types
 export { LogoVariant } from './stories/types/logo';
+// Toggle Types
+export { TogglePosition } from './stories/types/toggle';

package/dist/stories/Colors.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { Copy } from '@phosphor-icons/react';
 import styles from './Colors.module.css';
 import { Typography } from './Typography';
 import { TypographySize, TypographyWeight } from './types/typography';
 const ColorSwatch = ({ name, value }) => {
-    const [copied, setCopied] = useState(false);
+    const [copiedName, setCopiedName] = useState(false);
+    const [copiedValue, setCopiedValue] = useState(false);
     const isGradient = value.includes('linear-gradient');
     // Get the actual color value from CSS variable
     const getComputedValue = () => {
@@ -18,15 +20,28 @@ const ColorSwatch = ({ name, value }) => {
             return style.getPropertyValue(p1);
         })
         : getComputedValue();
-    const handleCopy = () => {
+    const handleCopyName = (e) => {
+        e.stopPropagation();
+        navigator.clipboard.writeText(name);
+        setCopiedName(true);
+        setTimeout(() => setCopiedName(false), 1500);
+    };
+    const handleCopyValue = (e) => {
+        e.stopPropagation();
         navigator.clipboard.writeText(displayValue);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1500);
+        setCopiedValue(true);
+        setTimeout(() => setCopiedValue(false), 1500);
     };
-    return (_jsxs("div", { className: styles.swatch, onClick: handleCopy, children: [_jsx("div", { className: styles.color, style: {
+    return (_jsxs("div", { className: styles.swatch, children: [_jsx("div", { className: styles.color, style: {
                     background: isGradient ? displayValue : value,
                     backgroundSize: 'cover',
-                } }), _jsxs("div", { className: styles.details, children: [_jsx("div", { className: styles.name, children: _jsx(Typography, { text: name.replace(/^--primitives-desktop-(?:primary|secondary)-/, ''), size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-label)" }) }), _jsx("div", { className: styles.value, children: _jsx(Typography, { text: displayValue, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)" }) }), _jsx("div", { className: `${styles.copyIndicator} ${copied ? styles.visible : ''}`, children: "Copied!" })] })] }));
+                } }), _jsxs("div", { className: styles.details, children: [_jsxs("div", { className: styles.name, style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(Typography, { text: name, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-label)" }), _jsx(Copy, { size: 16, onClick: handleCopyName, style: {
+                                    cursor: 'pointer',
+                                    color: 'var(--colors-light-text-text-subtle)',
+                                } }), copiedName && (_jsx("div", { className: `${styles.copyIndicator} ${styles.visible}`, children: "Copied!" }))] }), _jsxs("div", { className: styles.value, style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(Typography, { text: displayValue, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)" }), _jsx(Copy, { size: 16, onClick: handleCopyValue, style: {
+                                    cursor: 'pointer',
+                                    color: 'var(--colors-light-text-text-subtle)',
+                                } }), copiedValue && (_jsx("div", { className: `${styles.copyIndicator} ${styles.visible}`, children: "Copied!" }))] })] })] }));
 };
 const ColorGroup = ({ title, colors }) => (_jsxs("div", { className: styles.group, children: [_jsx(Typography, { text: title, size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-label)" }), _jsx("div", { className: styles.swatchGrid, children: Object.entries(colors).map(([name, value]) => (_jsx(ColorSwatch, { name: name, value: value }, name))) })] }));
 export const Colors = () => {

package/dist/stories/Logo.js

@@ -1,35 +1,49 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
 import { LogoVariant } from './types/logo';
-export const Logo = ({ variant = LogoVariant.Horizontal, color = 'var(--colors-light-background-bg-brand)', className = '', svgUrl, }) => {
-    const [externalSvg, setExternalSvg] = useState(null);
-    const logoColor = color;
-    useEffect(() => {
-        const fetchSvg = async () => {
-            if (svgUrl) {
-                try {
-                    const response = await fetch(svgUrl);
-                    const svgText = await response.text();
-                    setExternalSvg(svgText);
-                }
-                catch (error) {
-                    console.error('Error loading external SVG:', error);
-                    setExternalSvg(null);
-                }
-            }
-        };
-        if (svgUrl) {
-            fetchSvg();
-        }
-    }, [svgUrl]);
-    if (svgUrl && externalSvg) {
-        return (_jsx("span", { className: className, style: { color: logoColor }, dangerouslySetInnerHTML: {
-                __html: externalSvg,
+export const Logo = ({ variant = LogoVariant.Horizontal, color = 'var(--colors-light-background-bg-brand)', gradient, className = '', svgUrl, }) => {
+    const logoColor = gradient ? 'url(#gradient)' : color;
+    if (svgUrl) {
+        const maxDimensions = {
+            [LogoVariant.Horizontal]: { width: 211, height: 25 },
+            [LogoVariant.Vertical]: { width: 162, height: 47 },
+            [LogoVariant.Icon]: { width: 48, height: 39 },
+        }[variant];
+        return (_jsx("img", { src: svgUrl, alt: "Logo", className: className, style: {
+                maxWidth: `${maxDimensions.width}px`,
+                maxHeight: `${maxDimensions.height}px`,
+                width: '100%',
+                height: '100%',
+                objectFit: 'contain',
             } }));
     }
-    const HorizontalLogo = () => (_jsx("svg", { width: "211", height: "25", viewBox: "0 0 211 25", fill: logoColor, className: className, xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { id: "View=Horizontal", children: [_jsxs("g", { id: "Vector", children: [_jsx("path", { d: "M36.5583 9.58321C37.4171 9.2566 37.8607 8.28439 37.3824 7.5C36.7683 6.49308 35.96 5.61145 34.9989 4.90944C33.5878 3.87861 31.9078 3.27933 30.1628 3.18427C28.4178 3.08921 26.6827 3.50246 25.1679 4.3739C24.3889 4.822 23.6855 5.38136 23.0777 6.03067L23.0455 6.01225C23.0455 6.01225 18.1066 11.2359 15.1029 13.9561C13.9318 15.0166 12.1939 16.5327 11.606 17.0443C11.3226 17.2222 11.023 17.3756 10.7101 17.5021C9.68667 17.9157 8.56526 18.0235 7.48182 17.8125C6.39837 17.6014 5.39942 17.0806 4.6061 16.3131C4.21412 15.9339 3.88066 15.5025 3.61381 15.0333C3.15961 14.2347 2.28642 13.6551 1.39093 13.8605C0.495429 14.0659 -0.0777223 14.9679 0.288238 15.8106C0.758022 16.8924 1.43738 17.8768 2.29275 18.7043C3.54876 19.9194 5.13033 20.7441 6.84569 21.0782C8.56104 21.4123 10.3365 21.2416 11.9568 20.5868C12.9835 20.1718 13.9199 19.5738 14.723 18.8269L14.7764 18.8528L26.0481 7.79654C26.2913 7.59654 26.5517 7.41619 26.8269 7.25784C27.7837 6.70742 28.8797 6.44641 29.9818 6.50645C31.084 6.56649 32.1451 6.945 33.0364 7.5961C33.4768 7.9178 33.8665 8.29922 34.1953 8.72727C34.755 9.45584 35.6996 9.90983 36.5583 9.58321Z" }), _jsx("path", { d: "M11.0312 3.52412C11.9153 3.77423 12.2508 4.78886 11.843 5.61214C11.4352 6.43543 10.4338 6.74458 9.52799 6.59069C9.20045 6.53505 8.86763 6.50794 8.53328 6.51024C7.64164 6.51638 6.76386 6.73144 5.97038 7.13817C5.1769 7.5449 4.4898 8.13197 3.96424 8.85227C3.76716 9.12238 3.59485 9.4084 3.44879 9.70681C3.04489 10.532 2.20924 11.1645 1.30275 11.0149C0.39626 10.8653 -0.231609 10.0006 0.0814903 9.13681C0.370962 8.33824 0.772596 7.58186 1.27653 6.8912C2.10862 5.75079 3.19645 4.82132 4.45272 4.17738C5.70899 3.53343 7.09872 3.19294 8.51038 3.18322C9.36533 3.17734 10.2139 3.29288 11.0312 3.52412Z" }), _jsx("path", { d: "M16.7339 7.862C16.7339 8.88364 15.9057 9.71185 14.884 9.71185C13.8624 9.71185 13.0342 8.88364 13.0342 7.862C13.0342 6.84035 13.8624 6.01214 14.884 6.01214C15.9057 6.01214 16.7339 6.84035 16.7339 7.862Z" }), _jsx("path", { d: "M26.6121 20.9461C25.728 20.6959 25.3926 19.6813 25.8004 18.858C26.2082 18.0347 27.2096 17.7256 28.1153 17.8795C28.4429 17.9351 28.7757 17.9622 29.1101 17.9599C30.0017 17.9538 30.8795 17.7387 31.673 17.332C32.4664 16.9253 33.1535 16.3382 33.6791 15.6179C33.8762 15.3478 34.0485 15.0618 34.1945 14.7634C34.5984 13.9382 35.4341 13.3057 36.3406 13.4553C37.2471 13.6049 37.8749 14.4696 37.5618 15.3334C37.2724 16.1319 36.8707 16.8883 36.3668 17.579C35.5347 18.7194 34.4469 19.6488 33.1906 20.2928C31.9343 20.9367 30.5446 21.2772 29.1329 21.287C28.278 21.2928 27.4294 21.1773 26.6121 20.9461Z" }), _jsx("path", { d: "M20.9097 16.6092C20.9097 15.5875 21.7379 14.7593 22.7595 14.7593C23.7812 14.7593 24.6094 15.5875 24.6094 16.6092C24.6094 17.6308 23.7812 18.459 22.7595 18.459C21.7379 18.459 20.9097 17.6308 20.9097 16.6092Z" })] }), _jsxs("g", { id: "Beyond Presence", children: [_jsx("path", { d: "M45.073 5.19022H51.5767C52.9647 5.19022 53.9841 5.50343 54.6351 6.12985C55.2984 6.75627 55.63 7.56693 55.63 8.56183C55.63 9.27423 55.4642 9.89451 55.1326 10.4227C54.8132 10.9508 54.3158 11.35 53.6402 11.6202V11.8045C54.4386 12.0379 55.0282 12.437 55.4089 13.002C55.802 13.5548 55.9985 14.2119 55.9985 14.9734C55.9985 15.9806 55.6669 16.7974 55.0036 17.4238C54.3526 18.038 53.3332 18.345 51.9452 18.345H45.073V5.19022ZM51.4109 10.5885C51.9636 10.5885 52.369 10.4411 52.6269 10.1463C52.8971 9.83924 53.0322 9.45847 53.0322 9.00401C53.0322 8.56183 52.8971 8.20563 52.6269 7.93541C52.369 7.66519 51.9636 7.53008 51.4109 7.53008H47.6892V10.5885H51.4109ZM51.6136 15.9868C52.1663 15.9868 52.5778 15.8394 52.848 15.5446C53.1182 15.2375 53.2533 14.8629 53.2533 14.4207C53.2533 13.9662 53.1182 13.61 52.848 13.3521C52.5778 13.0819 52.154 12.9468 51.5767 12.9468H47.6892V15.9868H51.6136Z" }), _jsx("path", { d: "M62.5732 18.603C60.9887 18.603 59.742 18.1669 58.8331 17.2949C57.9242 16.4228 57.4697 15.1884 57.4697 13.5916C57.4697 11.9703 57.9303 10.7297 58.8515 9.86995C59.785 9.01015 61.0256 8.58026 62.5732 8.58026C63.5312 8.58026 64.3665 8.77064 65.0789 9.15141C65.7913 9.53217 66.3379 10.0788 66.7186 10.7912C67.1117 11.5036 67.3082 12.3511 67.3082 13.3337C67.3082 13.6408 67.2898 13.954 67.2529 14.2733H60.0122C60.0982 15.0471 60.3684 15.649 60.8229 16.0789C61.2774 16.4965 61.8547 16.7053 62.5548 16.7053C62.9724 16.7053 63.3531 16.6193 63.6971 16.4474C64.041 16.2754 64.3112 16.0359 64.5077 15.7288H66.995C66.7125 16.6132 66.1843 17.3133 65.4105 17.8292C64.6367 18.345 63.6909 18.603 62.5732 18.603ZM64.7657 12.5599C64.6674 11.8843 64.4033 11.3684 63.9734 11.0122C63.5435 10.656 63.0338 10.4779 62.4442 10.4779C61.8669 10.4779 61.3511 10.6622 60.8966 11.0307C60.4544 11.3991 60.1781 11.9089 60.0675 12.5599H64.7657Z" }), _jsx("path", { d: "M70.3616 21.8456L71.8171 18.3266L67.8743 8.83819H70.6932L73.1805 15.3051H73.3647L75.852 8.83819H78.5235L73.1252 21.8456H70.3616Z" }), _jsx("path", { d: "M84.2734 18.603C82.7135 18.603 81.4545 18.1792 80.4964 17.3317C79.5506 16.4719 79.0778 15.2252 79.0778 13.5916C79.0778 11.958 79.5506 10.7175 80.4964 9.86995C81.4545 9.01015 82.7135 8.58026 84.2734 8.58026C85.8578 8.58026 87.1168 9.00401 88.0503 9.85152C88.9961 10.699 89.469 11.9457 89.469 13.5916C89.469 15.2375 88.9961 16.4842 88.0503 17.3317C87.1168 18.1792 85.8578 18.603 84.2734 18.603ZM84.2918 16.5763C85.0779 16.5763 85.6982 16.3245 86.1526 15.8209C86.6194 15.3173 86.8527 14.5742 86.8527 13.5916C86.8527 12.609 86.6194 11.8659 86.1526 11.3623C85.6859 10.8587 85.0533 10.6069 84.2549 10.6069C83.4566 10.6069 82.8301 10.8587 82.3757 11.3623C81.9212 11.8659 81.694 12.609 81.694 13.5916C81.694 14.5742 81.9212 15.3173 82.3757 15.8209C82.8424 16.3245 83.4811 16.5763 84.2918 16.5763Z" }), _jsx("path", { d: "M91.3118 13.0573C91.3118 11.5343 91.7294 10.4104 92.5647 9.68571C93.3999 8.94874 94.5913 8.58026 96.1389 8.58026C99.357 8.58026 100.966 10.0603 100.966 13.0205V18.345H98.4235V13.0205C98.4235 12.2712 98.227 11.7062 97.834 11.3255C97.4532 10.9447 96.8882 10.7543 96.1389 10.7543C95.3897 10.7543 94.8247 10.9508 94.4439 11.3439C94.0632 11.7246 93.8728 12.2958 93.8728 13.0573V18.345H91.3118V13.0573Z" }), _jsx("path", { d: "M107.157 18.603C106.371 18.603 105.646 18.4187 104.983 18.0503C104.32 17.6695 103.792 17.1045 103.398 16.3552C103.005 15.5937 102.809 14.6725 102.809 13.5916C102.809 12.5107 103.005 11.5957 103.398 10.8464C103.792 10.0972 104.32 9.53217 104.983 9.15141C105.646 8.77064 106.371 8.58026 107.157 8.58026C107.882 8.58026 108.49 8.70308 108.981 8.94874C109.485 9.1944 109.921 9.57516 110.289 10.091H110.473V5.19022H113.016V18.345H110.658L110.473 17.0738H110.289C109.921 17.5897 109.485 17.9766 108.981 18.2345C108.477 18.4802 107.869 18.603 107.157 18.603ZM107.968 16.5026C108.729 16.5026 109.343 16.2447 109.81 15.7288C110.289 15.2007 110.529 14.4883 110.529 13.5916C110.529 12.695 110.289 11.9887 109.81 11.4728C109.343 10.9447 108.729 10.6806 107.968 10.6806C107.206 10.6806 106.592 10.9324 106.125 11.436C105.659 11.9396 105.425 12.6581 105.425 13.5916C105.425 14.5251 105.659 15.2437 106.125 15.7472C106.592 16.2508 107.206 16.5026 107.968 16.5026Z" }), _jsx("path", { d: "M120.557 5.19022H125.808C127.651 5.19022 128.971 5.59555 129.769 6.40621C130.58 7.21687 130.985 8.29161 130.985 9.63043C130.985 10.9693 130.58 12.0501 129.769 12.8731C128.959 13.6837 127.638 14.0891 125.808 14.0891H123.247V18.345H120.557V5.19022ZM125.605 11.6571C126.465 11.6571 127.104 11.4913 127.522 11.1596C127.951 10.828 128.166 10.3183 128.166 9.63043C128.166 8.29161 127.313 7.6222 125.605 7.6222H123.247V11.6571H125.605Z" }), _jsx("path", { d: "M132.837 8.83819H135.213L135.398 10.2937H135.582C135.926 9.79011 136.35 9.42163 136.853 9.18825C137.369 8.95488 138.045 8.83819 138.88 8.83819V11.1965C138.72 11.1719 138.487 11.1596 138.18 11.1596C136.325 11.1596 135.398 12.1484 135.398 14.1259V18.345H132.837V8.83819Z" }), _jsx("path", { d: "M144.903 18.603C143.319 18.603 142.072 18.1669 141.163 17.2949C140.254 16.4228 139.8 15.1884 139.8 13.5916C139.8 11.9703 140.26 10.7297 141.181 9.86995C142.115 9.01015 143.356 8.58026 144.903 8.58026C145.861 8.58026 146.696 8.77064 147.409 9.15141C148.121 9.53217 148.668 10.0788 149.049 10.7912C149.442 11.5036 149.638 12.3511 149.638 13.3337C149.638 13.6408 149.62 13.954 149.583 14.2733H142.342C142.428 15.0471 142.698 15.649 143.153 16.0789C143.607 16.4965 144.185 16.7053 144.885 16.7053C145.302 16.7053 145.683 16.6193 146.027 16.4474C146.371 16.2754 146.641 16.0359 146.838 15.7288H149.325C149.042 16.6132 148.514 17.3133 147.74 17.8292C146.967 18.345 146.021 18.603 144.903 18.603ZM147.096 12.5599C146.997 11.8843 146.733 11.3684 146.303 11.0122C145.873 10.656 145.364 10.4779 144.774 10.4779C144.197 10.4779 143.681 10.6622 143.227 11.0307C142.784 11.3991 142.508 11.9089 142.397 12.5599H147.096Z" }), _jsx("path", { d: "M155.529 18.603C153.981 18.603 152.857 18.3389 152.157 17.8107C151.469 17.2703 151.125 16.607 151.125 15.8209C151.125 15.7227 151.138 15.6121 151.162 15.4893H153.686V15.5814C153.686 15.9131 153.852 16.1833 154.184 16.3921C154.528 16.6009 154.976 16.7053 155.529 16.7053C156.082 16.7053 156.524 16.6193 156.855 16.4474C157.199 16.2631 157.371 15.9929 157.371 15.6367C157.371 15.3296 157.199 15.1147 156.855 14.9919C156.511 14.8567 155.959 14.7278 155.197 14.6049C154.387 14.4821 153.711 14.3409 153.171 14.1812C152.63 14.0215 152.163 13.739 151.77 13.3337C151.39 12.9284 151.199 12.3633 151.199 11.6387C151.199 11.0245 151.371 10.4902 151.715 10.0358C152.071 9.56902 152.569 9.21282 153.207 8.96716C153.846 8.70923 154.583 8.58026 155.418 8.58026C156.843 8.58026 157.918 8.83819 158.643 9.35407C159.367 9.86995 159.73 10.5639 159.73 11.436C159.73 11.5465 159.723 11.6325 159.711 11.6939H157.187C157.187 11.6817 157.187 11.6694 157.187 11.6571C157.199 11.6325 157.205 11.6018 157.205 11.565C157.205 11.2579 157.058 11 156.763 10.7912C156.468 10.5823 156.02 10.4779 155.418 10.4779C154.288 10.4779 153.723 10.828 153.723 11.5281C153.723 11.8475 153.895 12.0747 154.239 12.2098C154.595 12.3326 155.154 12.4493 155.916 12.5599C156.751 12.695 157.427 12.8424 157.942 13.002C158.471 13.1494 158.925 13.4258 159.306 13.8311C159.699 14.2242 159.895 14.783 159.895 15.5077C159.895 16.4535 159.508 17.2089 158.735 17.7739C157.961 18.3266 156.892 18.603 155.529 18.603Z" }), _jsx("path", { d: "M166.475 18.603C164.891 18.603 163.644 18.1669 162.735 17.2949C161.826 16.4228 161.372 15.1884 161.372 13.5916C161.372 11.9703 161.832 10.7297 162.754 9.86995C163.687 9.01015 164.928 8.58026 166.475 8.58026C167.433 8.58026 168.269 8.77064 168.981 9.15141C169.693 9.53217 170.24 10.0788 170.621 10.7912C171.014 11.5036 171.21 12.3511 171.21 13.3337C171.21 13.6408 171.192 13.954 171.155 14.2733H163.914C164 15.0471 164.27 15.649 164.725 16.0789C165.179 16.4965 165.757 16.7053 166.457 16.7053C166.874 16.7053 167.255 16.6193 167.599 16.4474C167.943 16.2754 168.213 16.0359 168.41 15.7288H170.897C170.615 16.6132 170.086 17.3133 169.313 17.8292C168.539 18.345 167.593 18.603 166.475 18.603ZM168.668 12.5599C168.569 11.8843 168.305 11.3684 167.875 11.0122C167.446 10.656 166.936 10.4779 166.346 10.4779C165.769 10.4779 165.253 10.6622 164.799 11.0307C164.356 11.3991 164.08 11.9089 163.97 12.5599H168.668Z" }), _jsx("path", { d: "M173.066 13.0573C173.066 11.5343 173.484 10.4104 174.319 9.68571C175.154 8.94874 176.346 8.58026 177.893 8.58026C181.111 8.58026 182.72 10.0603 182.72 13.0205V18.345H180.178V13.0205C180.178 12.2712 179.981 11.7062 179.588 11.3255C179.207 10.9447 178.642 10.7543 177.893 10.7543C177.144 10.7543 176.579 10.9508 176.198 11.3439C175.817 11.7246 175.627 12.2958 175.627 13.0573V18.345H173.066V13.0573Z" }), _jsx("path", { d: "M189.667 18.603C188.131 18.603 186.897 18.1792 185.963 17.3317C185.03 16.4719 184.563 15.2252 184.563 13.5916C184.563 11.958 185.03 10.7175 185.963 9.86995C186.897 9.01015 188.131 8.58026 189.667 8.58026C190.44 8.58026 191.159 8.72151 191.822 9.00401C192.498 9.28652 193.051 9.71027 193.48 10.2753C193.923 10.8403 194.181 11.5281 194.254 12.3388H191.804C191.681 11.7492 191.417 11.3132 191.012 11.0307C190.619 10.7482 190.164 10.6069 189.648 10.6069C188.899 10.6069 188.297 10.8649 187.843 11.3807C187.4 11.8843 187.179 12.6213 187.179 13.5916C187.179 14.562 187.4 15.3051 187.843 15.8209C188.297 16.3245 188.899 16.5763 189.648 16.5763C190.164 16.5763 190.619 16.4351 191.012 16.1526C191.417 15.8578 191.681 15.4218 191.804 14.8445H194.254C194.181 15.6551 193.923 16.343 193.48 16.908C193.051 17.473 192.498 17.8967 191.822 18.1792C191.159 18.4617 190.44 18.603 189.667 18.603Z" }), _jsx("path", { d: "M200.794 18.603C199.21 18.603 197.963 18.1669 197.054 17.2949C196.145 16.4228 195.691 15.1884 195.691 13.5916C195.691 11.9703 196.152 10.7297 197.073 9.86995C198.006 9.01015 199.247 8.58026 200.794 8.58026C201.753 8.58026 202.588 8.77064 203.3 9.15141C204.013 9.53217 204.559 10.0788 204.94 10.7912C205.333 11.5036 205.529 12.3511 205.529 13.3337C205.529 13.6408 205.511 13.954 205.474 14.2733H198.234C198.32 15.0471 198.59 15.649 199.044 16.0789C199.499 16.4965 200.076 16.7053 200.776 16.7053C201.194 16.7053 201.574 16.6193 201.918 16.4474C202.262 16.2754 202.533 16.0359 202.729 15.7288H205.216C204.934 16.6132 204.406 17.3133 203.632 17.8292C202.858 18.345 201.912 18.603 200.794 18.603ZM202.987 12.5599C202.889 11.8843 202.625 11.3684 202.195 11.0122C201.765 10.656 201.255 10.4779 200.666 10.4779C200.088 10.4779 199.572 10.6622 199.118 11.0307C198.676 11.3991 198.399 11.9089 198.289 12.5599H202.987Z" })] })] }) }));
-    const VerticalLogo = () => (_jsxs("svg", { width: "162", height: "47", viewBox: "0 0 162 47", fill: logoColor, className: className, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M0.921631 24.8083H7.42676C8.81502 24.8083 9.83471 25.1216 10.4858 25.7482C11.1492 26.3747 11.481 27.1855 11.481 28.1807C11.481 28.8932 11.3151 29.5136 10.9834 30.0419C10.664 30.5702 10.1664 30.9695 9.49072 31.2397V31.424C10.2893 31.6574 10.879 32.0567 11.2598 32.6219C11.653 33.1747 11.8495 33.832 11.8495 34.5937C11.8495 35.6011 11.5178 36.418 10.8544 37.0446C10.2033 37.6589 9.18358 37.966 7.79533 37.966H0.921631V24.8083ZM7.26091 30.2078C7.81376 30.2078 8.21917 30.0603 8.47717 29.7655C8.74745 29.4584 8.88259 29.0775 8.88259 28.6229C8.88259 28.1807 8.74745 27.8244 8.47717 27.5541C8.21917 27.2838 7.81376 27.1487 7.26091 27.1487H3.53843V30.2078H7.26091ZM7.46362 35.6072C8.01647 35.6072 8.42803 35.4598 8.69831 35.1649C8.96859 34.8578 9.10372 34.4831 9.10372 34.0408C9.10372 33.5863 8.96859 33.23 8.69831 32.972C8.42803 32.7017 8.00418 32.5666 7.42676 32.5666H3.53843V35.6072H7.46362Z" }), _jsx("path", { d: "M18.4256 38.224C16.8408 38.224 15.5938 37.7879 14.6847 36.9156C13.7756 36.0433 13.321 34.8087 13.321 33.2116C13.321 31.5899 13.7817 30.349 14.7031 29.4891C15.6368 28.6291 16.8777 28.1991 18.4256 28.1991C19.3839 28.1991 20.2193 28.3895 20.9319 28.7704C21.6444 29.1512 22.1911 29.6979 22.572 30.4105C22.9651 31.123 23.1617 31.9707 23.1617 32.9536C23.1617 33.2607 23.1432 33.574 23.1064 33.8934H15.8641C15.9501 34.6674 16.2204 35.2694 16.675 35.6994C17.1295 36.1171 17.7069 36.3259 18.4072 36.3259C18.8249 36.3259 19.2058 36.2399 19.5497 36.0679C19.8937 35.8959 20.164 35.6564 20.3606 35.3492H22.8484C22.5658 36.2338 22.0375 36.934 21.2636 37.45C20.4896 37.966 19.5436 38.224 18.4256 38.224ZM20.6186 32.1796C20.5203 31.5039 20.2562 30.9879 19.8262 30.6316C19.3962 30.2753 18.8863 30.0972 18.2966 30.0972C17.7192 30.0972 17.2032 30.2815 16.7487 30.65C16.3064 31.0186 16.03 31.5284 15.9194 32.1796H20.6186Z" }), _jsx("path", { d: "M26.2157 41.4674L27.6715 37.9476L23.7279 28.4571H26.5474L29.0352 34.9254H29.2195L31.7073 28.4571H34.3794L28.9799 41.4674H26.2157Z" }), _jsx("path", { d: "M40.1305 38.224C38.5703 38.224 37.311 37.8002 36.3528 36.9525C35.4068 36.0925 34.9338 34.8455 34.9338 33.2116C34.9338 31.5776 35.4068 30.3368 36.3528 29.4891C37.311 28.6291 38.5703 28.1991 40.1305 28.1991C41.7153 28.1991 42.9746 28.6229 43.9083 29.4706C44.8543 30.3183 45.3273 31.5653 45.3273 33.2116C45.3273 34.8578 44.8543 36.1048 43.9083 36.9525C42.9746 37.8002 41.7153 38.224 40.1305 38.224ZM40.1489 36.1969C40.9352 36.1969 41.5556 35.9451 42.0102 35.4414C42.477 34.9377 42.7105 34.1944 42.7105 33.2116C42.7105 32.2287 42.477 31.4854 42.0102 30.9817C41.5433 30.478 40.9106 30.2262 40.1121 30.2262C39.3135 30.2262 38.687 30.478 38.2324 30.9817C37.7779 31.4854 37.5506 32.2287 37.5506 33.2116C37.5506 34.1944 37.7779 34.9377 38.2324 35.4414C38.6993 35.9451 39.3381 36.1969 40.1489 36.1969Z" }), _jsx("path", { d: "M47.1705 32.6771C47.1705 31.1537 47.5882 30.0296 48.4236 29.3048C49.259 28.5677 50.4507 28.1991 51.9987 28.1991C55.2175 28.1991 56.8268 29.6795 56.8268 32.6403V37.966H54.2838V32.6403C54.2838 31.8909 54.0872 31.3257 53.6941 30.9449C53.3132 30.564 52.7481 30.3736 51.9987 30.3736C51.2493 30.3736 50.6841 30.5702 50.3033 30.9633C49.9224 31.3442 49.732 31.9154 49.732 32.6771V37.966H47.1705V32.6771Z" }), _jsx("path", { d: "M63.0191 38.224C62.2329 38.224 61.508 38.0397 60.8446 37.6712C60.1812 37.2903 59.6529 36.7252 59.2598 35.9758C58.8667 35.2141 58.6701 34.2927 58.6701 33.2116C58.6701 32.1304 58.8667 31.2152 59.2598 30.4658C59.6529 29.7163 60.1812 29.1512 60.8446 28.7704C61.508 28.3895 62.2329 28.1991 63.0191 28.1991C63.744 28.1991 64.3521 28.322 64.8435 28.5677C65.3472 28.8134 65.7833 29.1942 66.1519 29.7102H66.3362V24.8083H68.8793V37.966H66.5205L66.3362 36.6945H66.1519C65.7833 37.2105 65.3472 37.5974 64.8435 37.8554C64.3398 38.1012 63.7317 38.224 63.0191 38.224ZM63.83 36.1232C64.5917 36.1232 65.2059 35.8652 65.6728 35.3492C66.1519 34.8209 66.3915 34.1084 66.3915 33.2116C66.3915 32.3147 66.1519 31.6083 65.6728 31.0923C65.2059 30.564 64.5917 30.2999 63.83 30.2999C63.0683 30.2999 62.454 30.5518 61.9872 31.0555C61.5203 31.5592 61.2869 32.2779 61.2869 33.2116C61.2869 34.1452 61.5203 34.8639 61.9872 35.3676C62.454 35.8713 63.0683 36.1232 63.83 36.1232Z" }), _jsx("path", { d: "M76.4223 24.8083H81.6743C83.5171 24.8083 84.8378 25.2137 85.6364 26.0246C86.4472 26.8354 86.8526 27.9104 86.8526 29.2495C86.8526 30.5886 86.4472 31.6697 85.6364 32.4929C84.8255 33.3037 83.5048 33.7091 81.6743 33.7091H79.1128V37.966H76.4223V24.8083ZM81.4716 31.2766C82.3316 31.2766 82.9704 31.1107 83.3881 30.779C83.8181 30.4473 84.0331 29.9375 84.0331 29.2495C84.0331 27.9104 83.1793 27.2408 81.4716 27.2408H79.1128V31.2766H81.4716Z" }), _jsx("path", { d: "M88.7044 28.4571H91.0816L91.2659 29.9129H91.4502C91.7942 29.4092 92.218 29.0406 92.7217 28.8072C93.2377 28.5738 93.9134 28.4571 94.7488 28.4571V30.8159C94.5891 30.7913 94.3557 30.779 94.0485 30.779C92.1934 30.779 91.2659 31.768 91.2659 33.746V37.966H88.7044V28.4571Z" }), _jsx("path", { d: "M100.773 38.224C99.1887 38.224 97.9417 37.7879 97.0326 36.9156C96.1235 36.0433 95.6689 34.8087 95.6689 33.2116C95.6689 31.5899 96.1296 30.349 97.051 29.4891C97.9847 28.6291 99.2255 28.1991 100.773 28.1991C101.732 28.1991 102.567 28.3895 103.28 28.7704C103.992 29.1512 104.539 29.6979 104.92 30.4105C105.313 31.123 105.51 31.9707 105.51 32.9536C105.51 33.2607 105.491 33.574 105.454 33.8934H98.212C98.298 34.6674 98.5683 35.2694 99.0228 35.6994C99.4774 36.1171 100.055 36.3259 100.755 36.3259C101.173 36.3259 101.554 36.2399 101.898 36.0679C102.242 35.8959 102.512 35.6564 102.708 35.3492H105.196C104.914 36.2338 104.385 36.934 103.611 37.45C102.837 37.966 101.891 38.224 100.773 38.224ZM102.966 32.1796C102.868 31.5039 102.604 30.9879 102.174 30.6316C101.744 30.2753 101.234 30.0972 100.645 30.0972C100.067 30.0972 99.5511 30.2815 99.0965 30.65C98.6543 31.0186 98.3778 31.5284 98.2673 32.1796H102.966Z" }), _jsx("path", { d: "M111.402 38.224C109.854 38.224 108.729 37.9599 108.029 37.4316C107.341 36.891 106.997 36.2276 106.997 35.4414C106.997 35.3431 107.009 35.2325 107.034 35.1096H109.559V35.2018C109.559 35.5335 109.725 35.8038 110.056 36.0126C110.4 36.2215 110.849 36.3259 111.402 36.3259C111.954 36.3259 112.397 36.2399 112.728 36.0679C113.072 35.8836 113.244 35.6134 113.244 35.2571C113.244 34.9499 113.072 34.7349 112.728 34.6121C112.384 34.477 111.831 34.348 111.07 34.2251C110.259 34.1022 109.583 33.961 109.043 33.8013C108.502 33.6415 108.035 33.359 107.642 32.9536C107.261 32.5481 107.071 31.983 107.071 31.2582C107.071 30.6439 107.243 30.1095 107.587 29.6549C107.943 29.1881 108.441 28.8318 109.08 28.5861C109.718 28.3281 110.456 28.1991 111.291 28.1991C112.716 28.1991 113.791 28.4571 114.516 28.9731C115.241 29.4891 115.603 30.1832 115.603 31.0555C115.603 31.166 115.597 31.252 115.585 31.3135H113.06C113.06 31.3012 113.06 31.2889 113.06 31.2766C113.072 31.252 113.078 31.2213 113.078 31.1845C113.078 30.8773 112.931 30.6193 112.636 30.4105C112.341 30.2016 111.893 30.0972 111.291 30.0972C110.161 30.0972 109.596 30.4473 109.596 31.1476C109.596 31.467 109.768 31.6943 110.112 31.8294C110.468 31.9523 111.027 32.069 111.788 32.1796C112.624 32.3147 113.3 32.4621 113.816 32.6219C114.344 32.7693 114.798 33.0457 115.179 33.4511C115.572 33.8443 115.769 34.4032 115.769 35.1281C115.769 36.0741 115.382 36.8296 114.608 37.3947C113.834 37.9476 112.765 38.224 111.402 38.224Z" }), _jsx("path", { d: "M122.35 38.224C120.765 38.224 119.518 37.7879 118.609 36.9156C117.7 36.0433 117.246 34.8087 117.246 33.2116C117.246 31.5899 117.706 30.349 118.628 29.4891C119.561 28.6291 120.802 28.1991 122.35 28.1991C123.309 28.1991 124.144 28.3895 124.856 28.7704C125.569 29.1512 126.116 29.6979 126.497 30.4105C126.89 31.123 127.086 31.9707 127.086 32.9536C127.086 33.2607 127.068 33.574 127.031 33.8934H119.789C119.875 34.6674 120.145 35.2694 120.6 35.6994C121.054 36.1171 121.632 36.3259 122.332 36.3259C122.75 36.3259 123.13 36.2399 123.474 36.0679C123.818 35.8959 124.089 35.6564 124.285 35.3492H126.773C126.49 36.2338 125.962 36.934 125.188 37.45C124.414 37.966 123.468 38.224 122.35 38.224ZM124.543 32.1796C124.445 31.5039 124.181 30.9879 123.751 30.6316C123.321 30.2753 122.811 30.0972 122.221 30.0972C121.644 30.0972 121.128 30.2815 120.673 30.65C120.231 31.0186 119.955 31.5284 119.844 32.1796H124.543Z" }), _jsx("path", { d: "M128.942 32.6771C128.942 31.1537 129.36 30.0296 130.196 29.3048C131.031 28.5677 132.223 28.1991 133.771 28.1991C136.989 28.1991 138.599 29.6795 138.599 32.6403V37.966H136.056V32.6403C136.056 31.8909 135.859 31.3257 135.466 30.9449C135.085 30.564 134.52 30.3736 133.771 30.3736C133.021 30.3736 132.456 30.5702 132.075 30.9633C131.694 31.3442 131.504 31.9154 131.504 32.6771V37.966H128.942V32.6771Z" }), _jsx("path", { d: "M145.547 38.224C144.011 38.224 142.776 37.8002 141.843 36.9525C140.909 36.0925 140.442 34.8455 140.442 33.2116C140.442 31.5776 140.909 30.3368 141.843 29.4891C142.776 28.6291 144.011 28.1991 145.547 28.1991C146.321 28.1991 147.039 28.3404 147.703 28.6229C148.378 28.9055 148.931 29.3294 149.361 29.8945C149.804 30.4596 150.062 31.1476 150.135 31.9584H147.684C147.561 31.3687 147.297 30.9326 146.892 30.65C146.499 30.3675 146.044 30.2262 145.528 30.2262C144.779 30.2262 144.177 30.4842 143.722 31.0002C143.28 31.5039 143.059 32.241 143.059 33.2116C143.059 34.1821 143.28 34.9254 143.722 35.4414C144.177 35.9451 144.779 36.1969 145.528 36.1969C146.044 36.1969 146.499 36.0556 146.892 35.7731C147.297 35.4782 147.561 35.0421 147.684 34.4647H150.135C150.062 35.2755 149.804 35.9635 149.361 36.5286C148.931 37.0937 148.378 37.5176 147.703 37.8002C147.039 38.0827 146.321 38.224 145.547 38.224Z" }), _jsx("path", { d: "M156.677 38.224C155.092 38.224 153.845 37.7879 152.936 36.9156C152.027 36.0433 151.572 34.8087 151.572 33.2116C151.572 31.5899 152.033 30.349 152.954 29.4891C153.888 28.6291 155.129 28.1991 156.677 28.1991C157.635 28.1991 158.471 28.3895 159.183 28.7704C159.896 29.1512 160.442 29.6979 160.823 30.4105C161.216 31.123 161.413 31.9707 161.413 32.9536C161.413 33.2607 161.395 33.574 161.358 33.8934H154.115C154.201 34.6674 154.472 35.2694 154.926 35.6994C155.381 36.1171 155.958 36.3259 156.659 36.3259C157.076 36.3259 157.457 36.2399 157.801 36.0679C158.145 35.8959 158.415 35.6564 158.612 35.3492H161.1C160.817 36.2338 160.289 36.934 159.515 37.45C158.741 37.966 157.795 38.224 156.677 38.224ZM158.87 32.1796C158.772 31.5039 158.508 30.9879 158.078 30.6316C157.648 30.2753 157.138 30.0972 156.548 30.0972C155.971 30.0972 155.455 30.2815 155 30.65C154.558 31.0186 154.281 31.5284 154.171 32.1796H158.87Z" }), _jsx("path", { d: "M98.9883 7.15684C99.8472 6.83015 100.291 5.85774 99.8125 5.07318C99.1983 4.06604 98.3898 3.18422 97.4285 2.48206C96.0171 1.451 94.3367 0.851589 92.5914 0.75651C90.846 0.661432 89.1105 1.07477 87.5953 1.9464C86.8162 2.3946 86.1126 2.95407 85.5047 3.60352L85.4725 3.5851C85.4725 3.5851 80.5325 8.80991 77.5282 11.5307C76.3568 12.5914 74.6185 14.1079 74.0305 14.6196C73.7471 14.7975 73.4474 14.9509 73.1344 15.0774C72.1108 15.4911 70.9891 15.599 69.9054 15.3879C68.8218 15.1768 67.8226 14.6558 67.0291 13.8882C66.637 13.5089 66.3035 13.0774 66.0366 12.6081C65.5823 11.8093 64.7089 11.2296 63.8132 11.4351C62.9175 11.6405 62.3443 12.5427 62.7103 13.3856C63.1802 14.4676 63.8597 15.4523 64.7152 16.2799C65.9715 17.4953 67.5534 18.3201 69.2692 18.6543C70.9849 18.9885 72.7607 18.8178 74.3813 18.1628C75.4083 17.7478 76.3449 17.1496 77.1482 16.4026L77.2016 16.4284L88.4758 5.36978C88.719 5.16974 88.9794 4.98935 89.2548 4.83096C90.2118 4.28042 91.3079 4.01935 92.4103 4.07941C93.5128 4.13946 94.5741 4.51806 95.4656 5.16929C95.9061 5.49107 96.2958 5.87258 96.6247 6.30071C97.1846 7.02944 98.1294 7.48353 98.9883 7.15684Z" }), _jsx("path", { d: "M73.4556 1.09643C74.3399 1.3466 74.6754 2.36144 74.2675 3.18491C73.8596 4.00838 72.858 4.31759 71.9521 4.16367C71.6244 4.10801 71.2916 4.0809 70.9571 4.0832C70.0653 4.08934 69.1873 4.30445 68.3937 4.71127C67.6 5.11808 66.9128 5.70528 66.3871 6.42574C66.19 6.69591 66.0176 6.98199 65.8715 7.28047C65.4675 8.10585 64.6317 8.73849 63.725 8.58885C62.8183 8.43922 62.1903 7.57429 62.5035 6.71034C62.793 5.9116 63.1948 5.15505 63.6988 4.46424C64.5311 3.32359 65.6191 2.39392 66.8757 1.74983C68.1322 1.10574 69.5223 0.765176 70.9342 0.755461C71.7894 0.749577 72.6381 0.865144 73.4556 1.09643Z" }), _jsx("path", { d: "M79.1595 5.43525C79.1595 6.45712 78.3311 7.28551 77.3093 7.28551C76.2874 7.28551 75.459 6.45712 75.459 5.43525C75.459 4.41338 76.2874 3.58499 77.3093 3.58499C78.3311 3.58499 79.1595 4.41338 79.1595 5.43525Z" }), _jsx("path", { d: "M89.0399 18.5222C88.1556 18.272 87.8201 17.2571 88.228 16.4337C88.6359 15.6102 89.6375 15.301 90.5434 15.4549C90.8711 15.5106 91.2039 15.5377 91.5384 15.5354C92.4302 15.5292 93.3082 15.3141 94.1018 14.9073C94.8955 14.5005 95.5827 13.9133 96.1084 13.1928C96.3055 12.9227 96.4779 12.6366 96.624 12.3381C97.028 11.5127 97.8638 10.8801 98.7705 11.0297C99.6772 11.1794 100.305 12.0443 99.992 12.9082C99.7025 13.707 99.3007 14.4635 98.7967 15.1543C97.9644 16.295 96.8764 17.2247 95.6198 17.8688C94.3633 18.5128 92.9732 18.8534 91.5613 18.8631C90.7061 18.869 89.8574 18.7534 89.0399 18.5222Z" }), _jsx("path", { d: "M83.3362 14.1843C83.3362 13.1625 84.1646 12.3341 85.1865 12.3341C86.2083 12.3341 87.0367 13.1625 87.0367 14.1843C87.0367 15.2062 86.2083 16.0346 85.1865 16.0346C84.1646 16.0346 83.3362 15.2062 83.3362 14.1843Z" })] }));
-    const IconLogo = () => (_jsxs("svg", { width: "48", height: "39", viewBox: "0 0 48 39", fill: logoColor, className: className, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M41.5583 16.9123C42.4171 16.5857 42.8607 15.6135 42.3824 14.8291C41.7683 13.8222 40.96 12.9406 39.9989 12.2385C38.5878 11.2077 36.9078 10.6084 35.1628 10.5134C33.4178 10.4183 31.6827 10.8316 30.1679 11.703C29.3889 12.1511 28.6855 12.7105 28.0777 13.3598L28.0455 13.3414C28.0455 13.3414 23.1066 18.565 20.1029 21.2852C18.9318 22.3457 17.1939 23.8618 16.606 24.3734C16.3226 24.5513 16.023 24.7047 15.7101 24.8312C14.6867 25.2448 13.5653 25.3526 12.4818 25.1416C11.3984 24.9305 10.3994 24.4097 9.6061 23.6422C9.21412 23.263 8.88066 22.8316 8.61381 22.3624C8.15961 21.5638 7.28642 20.9842 6.39093 21.1896C5.49543 21.395 4.92228 22.297 5.28824 23.1397C5.75802 24.2215 6.43738 25.2059 7.29275 26.0334C8.54876 27.2485 10.1303 28.0732 11.8457 28.4073C13.561 28.7414 15.3365 28.5707 16.9568 27.9159C17.9835 27.5009 18.9199 26.9029 19.723 26.156L19.7764 26.1819L31.0481 15.1256C31.2913 14.9256 31.5517 14.7453 31.8269 14.5869C32.7837 14.0365 33.8797 13.7755 34.9818 13.8355C36.084 13.8956 37.1451 14.2741 38.0364 14.9252C38.4768 15.2469 38.8665 15.6283 39.1953 16.0564C39.755 16.7849 40.6996 17.2389 41.5583 16.9123Z" }), _jsx("path", { d: "M16.0312 10.8532C16.9153 11.1033 17.2508 12.118 16.843 12.9412C16.4352 13.7645 15.4338 14.0737 14.528 13.9198C14.2004 13.8641 13.8676 13.837 13.5333 13.8393C12.6416 13.8455 11.7639 14.0605 10.9704 14.4673C10.1769 14.874 9.4898 15.4611 8.96424 16.1814C8.76716 16.4515 8.59485 16.7375 8.44879 17.0359C8.04489 17.8611 7.20924 18.4936 6.30275 18.344C5.39626 18.1944 4.76839 17.3297 5.08149 16.4659C5.37096 15.6673 5.7726 14.911 6.27653 14.2203C7.10862 13.0799 8.19645 12.1504 9.45272 11.5065C10.709 10.8625 12.0987 10.522 13.5104 10.5123C14.3653 10.5064 15.2139 10.622 16.0312 10.8532Z" }), _jsx("path", { d: "M21.7339 15.1911C21.7339 16.2127 20.9057 17.041 19.884 17.041C18.8624 17.041 18.0342 16.2127 18.0342 15.1911C18.0342 14.1694 18.8624 13.3412 19.884 13.3412C20.9057 13.3412 21.7339 14.1694 21.7339 15.1911Z" }), _jsx("path", { d: "M31.6121 28.2752C30.728 28.025 30.3926 27.0104 30.8004 26.1871C31.2082 25.3638 32.2096 25.0547 33.1153 25.2086C33.4429 25.2642 33.7757 25.2913 34.1101 25.289C35.0017 25.2829 35.8795 25.0678 36.673 24.6611C37.4664 24.2544 38.1535 23.6673 38.6791 22.947C38.8762 22.6769 39.0485 22.3909 39.1945 22.0925C39.5984 21.2673 40.4341 20.6348 41.3406 20.7844C42.2471 20.934 42.8749 21.7987 42.5618 22.6625C42.2724 23.461 41.8707 24.2174 41.3668 24.9081C40.5347 26.0485 39.4469 26.9779 38.1906 27.6219C36.9343 28.2658 35.5446 28.6063 34.1329 28.6161C33.278 28.6219 32.4294 28.5064 31.6121 28.2752Z" }), _jsx("path", { d: "M25.9097 23.9383C25.9097 22.9166 26.7379 22.0884 27.7595 22.0884C28.7812 22.0884 29.6094 22.9166 29.6094 23.9383C29.6094 24.9599 28.7812 25.7881 27.7595 25.7881C26.7379 25.7881 25.9097 24.9599 25.9097 23.9383Z" })] }));
+    const GradientDef = () => {
+        if (!gradient)
+            return null;
+        // If gradient is a CSS variable, get its computed value
+        const getComputedGradient = () => {
+            if (gradient.startsWith('var(')) {
+                const style = getComputedStyle(document.documentElement);
+                const varName = gradient.match(/var\((.*?)\)/)?.[1];
+                return varName ? style.getPropertyValue(varName).trim() : null;
+            }
+            return gradient;
+        };
+        const gradientValue = getComputedGradient();
+        if (!gradientValue)
+            return null;
+        return (_jsx("defs", { children: _jsx("linearGradient", { id: "gradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", gradientUnits: "userSpaceOnUse", children: gradientValue.split(',').map((stop, index) => {
+                    const match = stop
+                        .trim()
+                        .match(/(#[A-Fa-f0-9]+|rgb\([^)]+\))\s*(\d+(?:\.\d+)?%)/);
+                    if (match) {
+                        return (_jsx("stop", { offset: match[2], stopColor: match[1] }, index));
+                    }
+                    return null;
+                }) }) }));
+    };
+    const HorizontalLogo = () => (_jsxs("svg", { width: "211", height: "25", viewBox: "0 0 211 25", fill: logoColor, className: className, xmlns: "http://www.w3.org/2000/svg", children: [gradient && _jsx(GradientDef, {}), _jsxs("g", { id: "View=Horizontal", children: [_jsxs("g", { id: "Vector", children: [_jsx("path", { d: "M36.5583 9.58321C37.4171 9.2566 37.8607 8.28439 37.3824 7.5C36.7683 6.49308 35.96 5.61145 34.9989 4.90944C33.5878 3.87861 31.9078 3.27933 30.1628 3.18427C28.4178 3.08921 26.6827 3.50246 25.1679 4.3739C24.3889 4.822 23.6855 5.38136 23.0777 6.03067L23.0455 6.01225C23.0455 6.01225 18.1066 11.2359 15.1029 13.9561C13.9318 15.0166 12.1939 16.5327 11.606 17.0443C11.3226 17.2222 11.023 17.3756 10.7101 17.5021C9.68667 17.9157 8.56526 18.0235 7.48182 17.8125C6.39837 17.6014 5.39942 17.0806 4.6061 16.3131C4.21412 15.9339 3.88066 15.5025 3.61381 15.0333C3.15961 14.2347 2.28642 13.6551 1.39093 13.8605C0.495429 14.0659 -0.0777223 14.9679 0.288238 15.8106C0.758022 16.8924 1.43738 17.8768 2.29275 18.7043C3.54876 19.9194 5.13033 20.7441 6.84569 21.0782C8.56104 21.4123 10.3365 21.2416 11.9568 20.5868C12.9835 20.1718 13.9199 19.5738 14.723 18.8269L14.7764 18.8528L26.0481 7.79654C26.2913 7.59654 26.5517 7.41619 26.8269 7.25784C27.7837 6.70742 28.8797 6.44641 29.9818 6.50645C31.084 6.56649 32.1451 6.945 33.0364 7.5961C33.4768 7.9178 33.8665 8.29922 34.1953 8.72727C34.755 9.45584 35.6996 9.90983 36.5583 9.58321Z" }), _jsx("path", { d: "M11.0312 3.52412C11.9153 3.77423 12.2508 4.78886 11.843 5.61214C11.4352 6.43543 10.4338 6.74458 9.52799 6.59069C9.20045 6.53505 8.86763 6.50794 8.53328 6.51024C7.64164 6.51638 6.76386 6.73144 5.97038 7.13817C5.1769 7.5449 4.4898 8.13197 3.96424 8.85227C3.76716 9.12238 3.59485 9.4084 3.44879 9.70681C3.04489 10.532 2.20924 11.1645 1.30275 11.0149C0.39626 10.8653 -0.231609 10.0006 0.0814903 9.13681C0.370962 8.33824 0.772596 7.58186 1.27653 6.8912C2.10862 5.75079 3.19645 4.82132 4.45272 4.17738C5.70899 3.53343 7.09872 3.19294 8.51038 3.18322C9.36533 3.17734 10.2139 3.29288 11.0312 3.52412Z" }), _jsx("path", { d: "M16.7339 7.862C16.7339 8.88364 15.9057 9.71185 14.884 9.71185C13.8624 9.71185 13.0342 8.88364 13.0342 7.862C13.0342 6.84035 13.8624 6.01214 14.884 6.01214C15.9057 6.01214 16.7339 6.84035 16.7339 7.862Z" }), _jsx("path", { d: "M26.6121 20.9461C25.728 20.6959 25.3926 19.6813 25.8004 18.858C26.2082 18.0347 27.2096 17.7256 28.1153 17.8795C28.4429 17.9351 28.7757 17.9622 29.1101 17.9599C30.0017 17.9538 30.8795 17.7387 31.673 17.332C32.4664 16.9253 33.1535 16.3382 33.6791 15.6179C33.8762 15.3478 34.0485 15.0618 34.1945 14.7634C34.5984 13.9382 35.4341 13.3057 36.3406 13.4553C37.2471 13.6049 37.8749 14.4696 37.5618 15.3334C37.2724 16.1319 36.8707 16.8883 36.3668 17.579C35.5347 18.7194 34.4469 19.6488 33.1906 20.2928C31.9343 20.9367 30.5446 21.2772 29.1329 21.287C28.278 21.2928 27.4294 21.1773 26.6121 20.9461Z" }), _jsx("path", { d: "M20.9097 16.6092C20.9097 15.5875 21.7379 14.7593 22.7595 14.7593C23.7812 14.7593 24.6094 15.5875 24.6094 16.6092C24.6094 17.6308 23.7812 18.459 22.7595 18.459C21.7379 18.459 20.9097 17.6308 20.9097 16.6092Z" })] }), _jsxs("g", { id: "Beyond Presence", children: [_jsx("path", { d: "M45.073 5.19022H51.5767C52.9647 5.19022 53.9841 5.50343 54.6351 6.12985C55.2984 6.75627 55.63 7.56693 55.63 8.56183C55.63 9.27423 55.4642 9.89451 55.1326 10.4227C54.8132 10.9508 54.3158 11.35 53.6402 11.6202V11.8045C54.4386 12.0379 55.0282 12.437 55.4089 13.002C55.802 13.5548 55.9985 14.2119 55.9985 14.9734C55.9985 15.9806 55.6669 16.7974 55.0036 17.4238C54.3526 18.038 53.3332 18.345 51.9452 18.345H45.073V5.19022ZM51.4109 10.5885C51.9636 10.5885 52.369 10.4411 52.6269 10.1463C52.8971 9.83924 53.0322 9.45847 53.0322 9.00401C53.0322 8.56183 52.8971 8.20563 52.6269 7.93541C52.369 7.66519 51.9636 7.53008 51.4109 7.53008H47.6892V10.5885H51.4109ZM51.6136 15.9868C52.1663 15.9868 52.5778 15.8394 52.848 15.5446C53.1182 15.2375 53.2533 14.8629 53.2533 14.4207C53.2533 13.9662 53.1182 13.61 52.848 13.3521C52.5778 13.0819 52.154 12.9468 51.5767 12.9468H47.6892V15.9868H51.6136Z" }), _jsx("path", { d: "M62.5732 18.603C60.9887 18.603 59.742 18.1669 58.8331 17.2949C57.9242 16.4228 57.4697 15.1884 57.4697 13.5916C57.4697 11.9703 57.9303 10.7297 58.8515 9.86995C59.785 9.01015 61.0256 8.58026 62.5732 8.58026C63.5312 8.58026 64.3665 8.77064 65.0789 9.15141C65.7913 9.53217 66.3379 10.0788 66.7186 10.7912C67.1117 11.5036 67.3082 12.3511 67.3082 13.3337C67.3082 13.6408 67.2898 13.954 67.2529 14.2733H60.0122C60.0982 15.0471 60.3684 15.649 60.8229 16.0789C61.2774 16.4965 61.8547 16.7053 62.5548 16.7053C62.9724 16.7053 63.3531 16.6193 63.6971 16.4474C64.041 16.2754 64.3112 16.0359 64.5077 15.7288H66.995C66.7125 16.6132 66.1843 17.3133 65.4105 17.8292C64.6367 18.345 63.6909 18.603 62.5732 18.603ZM64.7657 12.5599C64.6674 11.8843 64.4033 11.3684 63.9734 11.0122C63.5435 10.656 63.0338 10.4779 62.4442 10.4779C61.8669 10.4779 61.3511 10.6622 60.8966 11.0307C60.4544 11.3991 60.1781 11.9089 60.0675 12.5599H64.7657Z" }), _jsx("path", { d: "M70.3616 21.8456L71.8171 18.3266L67.8743 8.83819H70.6932L73.1805 15.3051H73.3647L75.852 8.83819H78.5235L73.1252 21.8456H70.3616Z" }), _jsx("path", { d: "M84.2734 18.603C82.7135 18.603 81.4545 18.1792 80.4964 17.3317C79.5506 16.4719 79.0778 15.2252 79.0778 13.5916C79.0778 11.958 79.5506 10.7175 80.4964 9.86995C81.4545 9.01015 82.7135 8.58026 84.2734 8.58026C85.8578 8.58026 87.1168 9.00401 88.0503 9.85152C88.9961 10.699 89.469 11.9457 89.469 13.5916C89.469 15.2375 88.9961 16.4842 88.0503 17.3317C87.1168 18.1792 85.8578 18.603 84.2734 18.603ZM84.2918 16.5763C85.0779 16.5763 85.6982 16.3245 86.1526 15.8209C86.6194 15.3173 86.8527 14.5742 86.8527 13.5916C86.8527 12.609 86.6194 11.8659 86.1526 11.3623C85.6859 10.8587 85.0533 10.6069 84.2549 10.6069C83.4566 10.6069 82.8301 10.8587 82.3757 11.3623C81.9212 11.8659 81.694 12.609 81.694 13.5916C81.694 14.5742 81.9212 15.3173 82.3757 15.8209C82.8424 16.3245 83.4811 16.5763 84.2918 16.5763Z" }), _jsx("path", { d: "M91.3118 13.0573C91.3118 11.5343 91.7294 10.4104 92.5647 9.68571C93.3999 8.94874 94.5913 8.58026 96.1389 8.58026C99.357 8.58026 100.966 10.0603 100.966 13.0205V18.345H98.4235V13.0205C98.4235 12.2712 98.227 11.7062 97.834 11.3255C97.4532 10.9447 96.8882 10.7543 96.1389 10.7543C95.3897 10.7543 94.8247 10.9508 94.4439 11.3439C94.0632 11.7246 93.8728 12.2958 93.8728 13.0573V18.345H91.3118V13.0573Z" }), _jsx("path", { d: "M107.157 18.603C106.371 18.603 105.646 18.4187 104.983 18.0503C104.32 17.6695 103.792 17.1045 103.398 16.3552C103.005 15.5937 102.809 14.6725 102.809 13.5916C102.809 12.5107 103.005 11.5957 103.398 10.8464C103.792 10.0972 104.32 9.53217 104.983 9.15141C105.646 8.77064 106.371 8.58026 107.157 8.58026C107.882 8.58026 108.49 8.70308 108.981 8.94874C109.485 9.1944 109.921 9.57516 110.289 10.091H110.473V5.19022H113.016V18.345H110.658L110.473 17.0738H110.289C109.921 17.5897 109.485 17.9766 108.981 18.2345C108.477 18.4802 107.869 18.603 107.157 18.603ZM107.968 16.5026C108.729 16.5026 109.343 16.2447 109.81 15.7288C110.289 15.2007 110.529 14.4883 110.529 13.5916C110.529 12.695 110.289 11.9887 109.81 11.4728C109.343 10.9447 108.729 10.6806 107.968 10.6806C107.206 10.6806 106.592 10.9324 106.125 11.436C105.659 11.9396 105.425 12.6581 105.425 13.5916C105.425 14.5251 105.659 15.2437 106.125 15.7472C106.592 16.2508 107.206 16.5026 107.968 16.5026Z" }), _jsx("path", { d: "M120.557 5.19022H125.808C127.651 5.19022 128.971 5.59555 129.769 6.40621C130.58 7.21687 130.985 8.29161 130.985 9.63043C130.985 10.9693 130.58 12.0501 129.769 12.8731C128.959 13.6837 127.638 14.0891 125.808 14.0891H123.247V18.345H120.557V5.19022ZM125.605 11.6571C126.465 11.6571 127.104 11.4913 127.522 11.1596C127.951 10.828 128.166 10.3183 128.166 9.63043C128.166 8.29161 127.313 7.6222 125.605 7.6222H123.247V11.6571H125.605Z" }), _jsx("path", { d: "M132.837 8.83819H135.213L135.398 10.2937H135.582C135.926 9.79011 136.35 9.42163 136.853 9.18825C137.369 8.95488 138.045 8.83819 138.88 8.83819V11.1965C138.72 11.1719 138.487 11.1596 138.18 11.1596C136.325 11.1596 135.398 12.1484 135.398 14.1259V18.345H132.837V8.83819Z" }), _jsx("path", { d: "M144.903 18.603C143.319 18.603 142.072 18.1669 141.163 17.2949C140.254 16.4228 139.8 15.1884 139.8 13.5916C139.8 11.9703 140.26 10.7297 141.181 9.86995C142.115 9.01015 143.356 8.58026 144.903 8.58026C145.861 8.58026 146.696 8.77064 147.409 9.15141C148.121 9.53217 148.668 10.0788 149.049 10.7912C149.442 11.5036 149.638 12.3511 149.638 13.3337C149.638 13.6408 149.62 13.954 149.583 14.2733H142.342C142.428 15.0471 142.698 15.649 143.153 16.0789C143.607 16.4965 144.185 16.7053 144.885 16.7053C145.302 16.7053 145.683 16.6193 146.027 16.4474C146.371 16.2754 146.641 16.0359 146.838 15.7288H149.325C149.042 16.6132 148.514 17.3133 147.74 17.8292C146.967 18.345 146.021 18.603 144.903 18.603ZM147.096 12.5599C146.997 11.8843 146.733 11.3684 146.303 11.0122C145.873 10.656 145.364 10.4779 144.774 10.4779C144.197 10.4779 143.681 10.6622 143.227 11.0307C142.784 11.3991 142.508 11.9089 142.397 12.5599H147.096Z" }), _jsx("path", { d: "M155.529 18.603C153.981 18.603 152.857 18.3389 152.157 17.8107C151.469 17.2703 151.125 16.607 151.125 15.8209C151.125 15.7227 151.138 15.6121 151.162 15.4893H153.686V15.5814C153.686 15.9131 153.852 16.1833 154.184 16.3921C154.528 16.6009 154.976 16.7053 155.529 16.7053C156.082 16.7053 156.524 16.6193 156.855 16.4474C157.199 16.2631 157.371 15.9929 157.371 15.6367C157.371 15.3296 157.199 15.1147 156.855 14.9919C156.511 14.8567 155.959 14.7278 155.197 14.6049C154.387 14.4821 153.711 14.3409 153.171 14.1812C152.63 14.0215 152.163 13.739 151.77 13.3337C151.39 12.9284 151.199 12.3633 151.199 11.6387C151.199 11.0245 151.371 10.4902 151.715 10.0358C152.071 9.56902 152.569 9.21282 153.207 8.96716C153.846 8.70923 154.583 8.58026 155.418 8.58026C156.843 8.58026 157.918 8.83819 158.643 9.35407C159.367 9.86995 159.73 10.5639 159.73 11.436C159.73 11.5465 159.723 11.6325 159.711 11.6939H157.187C157.187 11.6817 157.187 11.6694 157.187 11.6571C157.199 11.6325 157.205 11.6018 157.205 11.565C157.205 11.2579 157.058 11 156.763 10.7912C156.468 10.5823 156.02 10.4779 155.418 10.4779C154.288 10.4779 153.723 10.828 153.723 11.5281C153.723 11.8475 153.895 12.0747 154.239 12.2098C154.595 12.3326 155.154 12.4493 155.916 12.5599C156.751 12.695 157.427 12.8424 157.942 13.002C158.471 13.1494 158.925 13.4258 159.306 13.8311C159.699 14.2242 159.895 14.783 159.895 15.5077C159.895 16.4535 159.508 17.2089 158.735 17.7739C157.961 18.3266 156.892 18.603 155.529 18.603Z" }), _jsx("path", { d: "M166.475 18.603C164.891 18.603 163.644 18.1669 162.735 17.2949C161.826 16.4228 161.372 15.1884 161.372 13.5916C161.372 11.9703 161.832 10.7297 162.754 9.86995C163.687 9.01015 164.928 8.58026 166.475 8.58026C167.433 8.58026 168.269 8.77064 168.981 9.15141C169.693 9.53217 170.24 10.0788 170.621 10.7912C171.014 11.5036 171.21 12.3511 171.21 13.3337C171.21 13.6408 171.192 13.954 171.155 14.2733H163.914C164 15.0471 164.27 15.649 164.725 16.0789C165.179 16.4965 165.757 16.7053 166.457 16.7053C166.874 16.7053 167.255 16.6193 167.599 16.4474C167.943 16.2754 168.213 16.0359 168.41 15.7288H170.897C170.615 16.6132 170.086 17.3133 169.313 17.8292C168.539 18.345 167.593 18.603 166.475 18.603ZM168.668 12.5599C168.569 11.8843 168.305 11.3684 167.875 11.0122C167.446 10.656 166.936 10.4779 166.346 10.4779C165.769 10.4779 165.253 10.6622 164.799 11.0307C164.356 11.3991 164.08 11.9089 163.97 12.5599H168.668Z" }), _jsx("path", { d: "M173.066 13.0573C173.066 11.5343 173.484 10.4104 174.319 9.68571C175.154 8.94874 176.346 8.58026 177.893 8.58026C181.111 8.58026 182.72 10.0603 182.72 13.0205V18.345H180.178V13.0205C180.178 12.2712 179.981 11.7062 179.588 11.3255C179.207 10.9447 178.642 10.7543 177.893 10.7543C177.144 10.7543 176.579 10.9508 176.198 11.3439C175.817 11.7246 175.627 12.2958 175.627 13.0573V18.345H173.066V13.0573Z" }), _jsx("path", { d: "M189.667 18.603C188.131 18.603 186.897 18.1792 185.963 17.3317C185.03 16.4719 184.563 15.2252 184.563 13.5916C184.563 11.958 185.03 10.7175 185.963 9.86995C186.897 9.01015 188.131 8.58026 189.667 8.58026C190.44 8.58026 191.159 8.72151 191.822 9.00401C192.498 9.28652 193.051 9.71027 193.48 10.2753C193.923 10.8403 194.181 11.5281 194.254 12.3388H191.804C191.681 11.7492 191.417 11.3132 191.012 11.0307C190.619 10.7482 190.164 10.6069 189.648 10.6069C188.899 10.6069 188.297 10.8649 187.843 11.3807C187.4 11.8843 187.179 12.6213 187.179 13.5916C187.179 14.562 187.4 15.3051 187.843 15.8209C188.297 16.3245 188.899 16.5763 189.648 16.5763C190.164 16.5763 190.619 16.4351 191.012 16.1526C191.417 15.8578 191.681 15.4218 191.804 14.8445H194.254C194.181 15.6551 193.923 16.343 193.48 16.908C193.051 17.473 192.498 17.8967 191.822 18.1792C191.159 18.4617 190.44 18.603 189.667 18.603Z" }), _jsx("path", { d: "M200.794 18.603C199.21 18.603 197.963 18.1669 197.054 17.2949C196.145 16.4228 195.691 15.1884 195.691 13.5916C195.691 11.9703 196.152 10.7297 197.073 9.86995C198.006 9.01015 199.247 8.58026 200.794 8.58026C201.753 8.58026 202.588 8.77064 203.3 9.15141C204.013 9.53217 204.559 10.0788 204.94 10.7912C205.333 11.5036 205.529 12.3511 205.529 13.3337C205.529 13.6408 205.511 13.954 205.474 14.2733H198.234C198.32 15.0471 198.59 15.649 199.044 16.0789C199.499 16.4965 200.076 16.7053 200.776 16.7053C201.194 16.7053 201.574 16.6193 201.918 16.4474C202.262 16.2754 202.533 16.0359 202.729 15.7288H205.216C204.934 16.6132 204.406 17.3133 203.632 17.8292C202.858 18.345 201.912 18.603 200.794 18.603ZM202.987 12.5599C202.889 11.8843 202.625 11.3684 202.195 11.0122C201.765 10.656 201.255 10.4779 200.666 10.4779C200.088 10.4779 199.572 10.6622 199.118 11.0307C198.676 11.3991 198.399 11.9089 198.289 12.5599H202.987Z" })] })] })] }));
+    const VerticalLogo = () => (_jsxs("svg", { width: "162", height: "47", viewBox: "0 0 162 47", fill: logoColor, className: className, xmlns: "http://www.w3.org/2000/svg", children: [gradient && _jsx(GradientDef, {}), _jsx("path", { d: "M0.921631 24.8083H7.42676C8.81502 24.8083 9.83471 25.1216 10.4858 25.7482C11.1492 26.3747 11.481 27.1855 11.481 28.1807C11.481 28.8932 11.3151 29.5136 10.9834 30.0419C10.664 30.5702 10.1664 30.9695 9.49072 31.2397V31.424C10.2893 31.6574 10.879 32.0567 11.2598 32.6219C11.653 33.1747 11.8495 33.832 11.8495 34.5937C11.8495 35.6011 11.5178 36.418 10.8544 37.0446C10.2033 37.6589 9.18358 37.966 7.79533 37.966H0.921631V24.8083ZM7.26091 30.2078C7.81376 30.2078 8.21917 30.0603 8.47717 29.7655C8.74745 29.4584 8.88259 29.0775 8.88259 28.6229C8.88259 28.1807 8.74745 27.8244 8.47717 27.5541C8.21917 27.2838 7.81376 27.1487 7.26091 27.1487H3.53843V30.2078H7.26091ZM7.46362 35.6072C8.01647 35.6072 8.42803 35.4598 8.69831 35.1649C8.96859 34.8578 9.10372 34.4831 9.10372 34.0408C9.10372 33.5863 8.96859 33.23 8.69831 32.972C8.42803 32.7017 8.00418 32.5666 7.42676 32.5666H3.53843V35.6072H7.46362Z" }), _jsx("path", { d: "M18.4256 38.224C16.8408 38.224 15.5938 37.7879 14.6847 36.9156C13.7756 36.0433 13.321 34.8087 13.321 33.2116C13.321 31.5899 13.7817 30.349 14.7031 29.4891C15.6368 28.6291 16.8777 28.1991 18.4256 28.1991C19.3839 28.1991 20.2193 28.3895 20.9319 28.7704C21.6444 29.1512 22.1911 29.6979 22.572 30.4105C22.9651 31.123 23.1617 31.9707 23.1617 32.9536C23.1617 33.2607 23.1432 33.574 23.1064 33.8934H15.8641C15.9501 34.6674 16.2204 35.2694 16.675 35.6994C17.1295 36.1171 17.7069 36.3259 18.4072 36.3259C18.8249 36.3259 19.2058 36.2399 19.5497 36.0679C19.8937 35.8959 20.164 35.6564 20.3606 35.3492H22.8484C22.5658 36.2338 22.0375 36.934 21.2636 37.45C20.4896 37.966 19.5436 38.224 18.4256 38.224ZM20.6186 32.1796C20.5203 31.5039 20.2562 30.9879 19.8262 30.6316C19.3962 30.2753 18.8863 30.0972 18.2966 30.0972C17.7192 30.0972 17.2032 30.2815 16.7487 30.65C16.3064 31.0186 16.03 31.5284 15.9194 32.1796H20.6186Z" }), _jsx("path", { d: "M26.2157 41.4674L27.6715 37.9476L23.7279 28.4571H26.5474L29.0352 34.9254H29.2195L31.7073 28.4571H34.3794L28.9799 41.4674H26.2157Z" }), _jsx("path", { d: "M40.1305 38.224C38.5703 38.224 37.311 37.8002 36.3528 36.9525C35.4068 36.0925 34.9338 34.8455 34.9338 33.2116C34.9338 31.5776 35.4068 30.3368 36.3528 29.4891C37.311 28.6291 38.5703 28.1991 40.1305 28.1991C41.7153 28.1991 42.9746 28.6229 43.9083 29.4706C44.8543 30.3183 45.3273 31.5653 45.3273 33.2116C45.3273 34.8578 44.8543 36.1048 43.9083 36.9525C42.9746 37.8002 41.7153 38.224 40.1305 38.224ZM40.1489 36.1969C40.9352 36.1969 41.5556 35.9451 42.0102 35.4414C42.477 34.9377 42.7105 34.1944 42.7105 33.2116C42.7105 32.2287 42.477 31.4854 42.0102 30.9817C41.5433 30.478 40.9106 30.2262 40.1121 30.2262C39.3135 30.2262 38.687 30.478 38.2324 30.9817C37.7779 31.4854 37.5506 32.2287 37.5506 33.2116C37.5506 34.1944 37.7779 34.9377 38.2324 35.4414C38.6993 35.9451 39.3381 36.1969 40.1489 36.1969Z" }), _jsx("path", { d: "M47.1705 32.6771C47.1705 31.1537 47.5882 30.0296 48.4236 29.3048C49.259 28.5677 50.4507 28.1991 51.9987 28.1991C55.2175 28.1991 56.8268 29.6795 56.8268 32.6403V37.966H54.2838V32.6403C54.2838 31.8909 54.0872 31.3257 53.6941 30.9449C53.3132 30.564 52.7481 30.3736 51.9987 30.3736C51.2493 30.3736 50.6841 30.5702 50.3033 30.9633C49.9224 31.3442 49.732 31.9154 49.732 32.6771V37.966H47.1705V32.6771Z" }), _jsx("path", { d: "M63.0191 38.224C62.2329 38.224 61.508 38.0397 60.8446 37.6712C60.1812 37.2903 59.6529 36.7252 59.2598 35.9758C58.8667 35.2141 58.6701 34.2927 58.6701 33.2116C58.6701 32.1304 58.8667 31.2152 59.2598 30.4658C59.6529 29.7163 60.1812 29.1512 60.8446 28.7704C61.508 28.3895 62.2329 28.1991 63.0191 28.1991C63.744 28.1991 64.3521 28.322 64.8435 28.5677C65.3472 28.8134 65.7833 29.1942 66.1519 29.7102H66.3362V24.8083H68.8793V37.966H66.5205L66.3362 36.6945H66.1519C65.7833 37.2105 65.3472 37.5974 64.8435 37.8554C64.3398 38.1012 63.7317 38.224 63.0191 38.224ZM63.83 36.1232C64.5917 36.1232 65.2059 35.8652 65.6728 35.3492C66.1519 34.8209 66.3915 34.1084 66.3915 33.2116C66.3915 32.3147 66.1519 31.6083 65.6728 31.0923C65.2059 30.564 64.5917 30.2999 63.83 30.2999C63.0683 30.2999 62.454 30.5518 61.9872 31.0555C61.5203 31.5592 61.2869 32.2779 61.2869 33.2116C61.2869 34.1452 61.5203 34.8639 61.9872 35.3676C62.454 35.8713 63.0683 36.1232 63.83 36.1232Z" }), _jsx("path", { d: "M76.4223 24.8083H81.6743C83.5171 24.8083 84.8378 25.2137 85.6364 26.0246C86.4472 26.8354 86.8526 27.9104 86.8526 29.2495C86.8526 30.5886 86.4472 31.6697 85.6364 32.4929C84.8255 33.3037 83.5048 33.7091 81.6743 33.7091H79.1128V37.966H76.4223V24.8083ZM81.4716 31.2766C82.3316 31.2766 82.9704 31.1107 83.3881 30.779C83.8181 30.4473 84.0331 29.9375 84.0331 29.2495C84.0331 27.9104 83.1793 27.2408 81.4716 27.2408H79.1128V31.2766H81.4716Z" }), _jsx("path", { d: "M88.7044 28.4571H91.0816L91.2659 29.9129H91.4502C91.7942 29.4092 92.218 29.0406 92.7217 28.8072C93.2377 28.5738 93.9134 28.4571 94.7488 28.4571V30.8159C94.5891 30.7913 94.3557 30.779 94.0485 30.779C92.1934 30.779 91.2659 31.768 91.2659 33.746V37.966H88.7044V28.4571Z" }), _jsx("path", { d: "M100.773 38.224C99.1887 38.224 97.9417 37.7879 97.0326 36.9156C96.1235 36.0433 95.6689 34.8087 95.6689 33.2116C95.6689 31.5899 96.1296 30.349 97.051 29.4891C97.9847 28.6291 99.2255 28.1991 100.773 28.1991C101.732 28.1991 102.567 28.3895 103.28 28.7704C103.992 29.1512 104.539 29.6979 104.92 30.4105C105.313 31.123 105.51 31.9707 105.51 32.9536C105.51 33.2607 105.491 33.574 105.454 33.8934H98.212C98.298 34.6674 98.5683 35.2694 99.0228 35.6994C99.4774 36.1171 100.055 36.3259 100.755 36.3259C101.173 36.3259 101.554 36.2399 101.898 36.0679C102.242 35.8959 102.512 35.6564 102.708 35.3492H105.196C104.914 36.2338 104.385 36.934 103.611 37.45C102.837 37.966 101.891 38.224 100.773 38.224ZM102.966 32.1796C102.868 31.5039 102.604 30.9879 102.174 30.6316C101.744 30.2753 101.234 30.0972 100.645 30.0972C100.067 30.0972 99.5511 30.2815 99.0965 30.65C98.6543 31.0186 98.3778 31.5284 98.2673 32.1796H102.966Z" }), _jsx("path", { d: "M111.402 38.224C109.854 38.224 108.729 37.9599 108.029 37.4316C107.341 36.891 106.997 36.2276 106.997 35.4414C106.997 35.3431 107.009 35.2325 107.034 35.1096H109.559V35.2018C109.559 35.5335 109.725 35.8038 110.056 36.0126C110.4 36.2215 110.849 36.3259 111.402 36.3259C111.954 36.3259 112.397 36.2399 112.728 36.0679C113.072 35.8836 113.244 35.6134 113.244 35.2571C113.244 34.9499 113.072 34.7349 112.728 34.6121C112.384 34.477 111.831 34.348 111.07 34.2251C110.259 34.1022 109.583 33.961 109.043 33.8013C108.502 33.6415 108.035 33.359 107.642 32.9536C107.261 32.5481 107.071 31.983 107.071 31.2582C107.071 30.6439 107.243 30.1095 107.587 29.6549C107.943 29.1881 108.441 28.8318 109.08 28.5861C109.718 28.3281 110.456 28.1991 111.291 28.1991C112.716 28.1991 113.791 28.4571 114.516 28.9731C115.241 29.4891 115.603 30.1832 115.603 31.0555C115.603 31.166 115.597 31.252 115.585 31.3135H113.06C113.06 31.3012 113.06 31.2889 113.06 31.2766C113.072 31.252 113.078 31.2213 113.078 31.1845C113.078 30.8773 112.931 30.6193 112.636 30.4105C112.341 30.2016 111.893 30.0972 111.291 30.0972C110.161 30.0972 109.596 30.4473 109.596 31.1476C109.596 31.467 109.768 31.6943 110.112 31.8294C110.468 31.9523 111.027 32.069 111.788 32.1796C112.624 32.3147 113.3 32.4621 113.816 32.6219C114.344 32.7693 114.798 33.0457 115.179 33.4511C115.572 33.8443 115.769 34.4032 115.769 35.1281C115.769 36.0741 115.382 36.8296 114.608 37.3947C113.834 37.9476 112.765 38.224 111.402 38.224Z" }), _jsx("path", { d: "M122.35 38.224C120.765 38.224 119.518 37.7879 118.609 36.9156C117.7 36.0433 117.246 34.8087 117.246 33.2116C117.246 31.5899 117.706 30.349 118.628 29.4891C119.561 28.6291 120.802 28.1991 122.35 28.1991C123.309 28.1991 124.144 28.3895 124.856 28.7704C125.569 29.1512 126.116 29.6979 126.497 30.4105C126.89 31.123 127.086 31.9707 127.086 32.9536C127.086 33.2607 127.068 33.574 127.031 33.8934H119.789C119.875 34.6674 120.145 35.2694 120.6 35.6994C121.054 36.1171 121.632 36.3259 122.332 36.3259C122.75 36.3259 123.13 36.2399 123.474 36.0679C123.818 35.8959 124.089 35.6564 124.285 35.3492H126.773C126.49 36.2338 125.962 36.934 125.188 37.45C124.414 37.966 123.468 38.224 122.35 38.224ZM124.543 32.1796C124.445 31.5039 124.181 30.9879 123.751 30.6316C123.321 30.2753 122.811 30.0972 122.221 30.0972C121.644 30.0972 121.128 30.2815 120.673 30.65C120.231 31.0186 119.955 31.5284 119.844 32.1796H124.543Z" }), _jsx("path", { d: "M128.942 32.6771C128.942 31.1537 129.36 30.0296 130.196 29.3048C131.031 28.5677 132.223 28.1991 133.771 28.1991C136.989 28.1991 138.599 29.6795 138.599 32.6403V37.966H136.056V32.6403C136.056 31.8909 135.859 31.3257 135.466 30.9449C135.085 30.564 134.52 30.3736 133.771 30.3736C133.021 30.3736 132.456 30.5702 132.075 30.9633C131.694 31.3442 131.504 31.9154 131.504 32.6771V37.966H128.942V32.6771Z" }), _jsx("path", { d: "M145.547 38.224C144.011 38.224 142.776 37.8002 141.843 36.9525C140.909 36.0925 140.442 34.8455 140.442 33.2116C140.442 31.5776 140.909 30.3368 141.843 29.4891C142.776 28.6291 144.011 28.1991 145.547 28.1991C146.321 28.1991 147.039 28.3404 147.703 28.6229C148.378 28.9055 148.931 29.3294 149.361 29.8945C149.804 30.4596 150.062 31.1476 150.135 31.9584H147.684C147.561 31.3687 147.297 30.9326 146.892 30.65C146.499 30.3675 146.044 30.2262 145.528 30.2262C144.779 30.2262 144.177 30.4842 143.722 31.0002C143.28 31.5039 143.059 32.241 143.059 33.2116C143.059 34.1821 143.28 34.9254 143.722 35.4414C144.177 35.9451 144.779 36.1969 145.528 36.1969C146.044 36.1969 146.499 36.0556 146.892 35.7731C147.297 35.4782 147.561 35.0421 147.684 34.4647H150.135C150.062 35.2755 149.804 35.9635 149.361 36.5286C148.931 37.0937 148.378 37.5176 147.703 37.8002C147.039 38.0827 146.321 38.224 145.547 38.224Z" }), _jsx("path", { d: "M156.677 38.224C155.092 38.224 153.845 37.7879 152.936 36.9156C152.027 36.0433 151.572 34.8087 151.572 33.2116C151.572 31.5899 152.033 30.349 152.954 29.4891C153.888 28.6291 155.129 28.1991 156.677 28.1991C157.635 28.1991 158.471 28.3895 159.183 28.7704C159.896 29.1512 160.442 29.6979 160.823 30.4105C161.216 31.123 161.413 31.9707 161.413 32.9536C161.413 33.2607 161.395 33.574 161.358 33.8934H154.115C154.201 34.6674 154.472 35.2694 154.926 35.6994C155.381 36.1171 155.958 36.3259 156.659 36.3259C157.076 36.3259 157.457 36.2399 157.801 36.0679C158.145 35.8959 158.415 35.6564 158.612 35.3492H161.1C160.817 36.2338 160.289 36.934 159.515 37.45C158.741 37.966 157.795 38.224 156.677 38.224ZM158.87 32.1796C158.772 31.5039 158.508 30.9879 158.078 30.6316C157.648 30.2753 157.138 30.0972 156.548 30.0972C155.971 30.0972 155.455 30.2815 155 30.65C154.558 31.0186 154.281 31.5284 154.171 32.1796H158.87Z" }), _jsx("path", { d: "M98.9883 7.15684C99.8472 6.83015 100.291 5.85774 99.8125 5.07318C99.1983 4.06604 98.3898 3.18422 97.4285 2.48206C96.0171 1.451 94.3367 0.851589 92.5914 0.75651C90.846 0.661432 89.1105 1.07477 87.5953 1.9464C86.8162 2.3946 86.1126 2.95407 85.5047 3.60352L85.4725 3.5851C85.4725 3.5851 80.5325 8.80991 77.5282 11.5307C76.3568 12.5914 74.6185 14.1079 74.0305 14.6196C73.7471 14.7975 73.4474 14.9509 73.1344 15.0774C72.1108 15.4911 70.9891 15.599 69.9054 15.3879C68.8218 15.1768 67.8226 14.6558 67.0291 13.8882C66.637 13.5089 66.3035 13.0774 66.0366 12.6081C65.5823 11.8093 64.7089 11.2296 63.8132 11.4351C62.9175 11.6405 62.3443 12.5427 62.7103 13.3856C63.1802 14.4676 63.8597 15.4523 64.7152 16.2799C65.9715 17.4953 67.5534 18.3201 69.2692 18.6543C70.9849 18.9885 72.7607 18.8178 74.3813 18.1628C75.4083 17.7478 76.3449 17.1496 77.1482 16.4026L77.2016 16.4284L88.4758 5.36978C88.719 5.16974 88.9794 4.98935 89.2548 4.83096C90.2118 4.28042 91.3079 4.01935 92.4103 4.07941C93.5128 4.13946 94.5741 4.51806 95.4656 5.16929C95.9061 5.49107 96.2958 5.87258 96.6247 6.30071C97.1846 7.02944 98.1294 7.48353 98.9883 7.15684Z" }), _jsx("path", { d: "M73.4556 1.09643C74.3399 1.3466 74.6754 2.36144 74.2675 3.18491C73.8596 4.00838 72.858 4.31759 71.9521 4.16367C71.6244 4.10801 71.2916 4.0809 70.9571 4.0832C70.0653 4.08934 69.1873 4.30445 68.3937 4.71127C67.6 5.11808 66.9128 5.70528 66.3871 6.42574C66.19 6.69591 66.0176 6.98199 65.8715 7.28047C65.4675 8.10585 64.6317 8.73849 63.725 8.58885C62.8183 8.43922 62.1903 7.57429 62.5035 6.71034C62.793 5.9116 63.1948 5.15505 63.6988 4.46424C64.5311 3.32359 65.6191 2.39392 66.8757 1.74983C68.1322 1.10574 69.5223 0.765176 70.9342 0.755461C71.7894 0.749577 72.6381 0.865144 73.4556 1.09643Z" }), _jsx("path", { d: "M79.1595 5.43525C79.1595 6.45712 78.3311 7.28551 77.3093 7.28551C76.2874 7.28551 75.459 6.45712 75.459 5.43525C75.459 4.41338 76.2874 3.58499 77.3093 3.58499C78.3311 3.58499 79.1595 4.41338 79.1595 5.43525Z" }), _jsx("path", { d: "M89.0399 18.5222C88.1556 18.272 87.8201 17.2571 88.228 16.4337C88.6359 15.6102 89.6375 15.301 90.5434 15.4549C90.8711 15.5106 91.2039 15.5377 91.5384 15.5354C92.4302 15.5292 93.3082 15.3141 94.1018 14.9073C94.8955 14.5005 95.5827 13.9133 96.1084 13.1928C96.3055 12.9227 96.4779 12.6366 96.624 12.3381C97.028 11.5127 97.8638 10.8801 98.7705 11.0297C99.6772 11.1794 100.305 12.0443 99.992 12.9082C99.7025 13.707 99.3007 14.4635 98.7967 15.1543C97.9644 16.295 96.8764 17.2247 95.6198 17.8688C94.3633 18.5128 92.9732 18.8534 91.5613 18.8631C90.7061 18.869 89.8574 18.7534 89.0399 18.5222Z" }), _jsx("path", { d: "M83.3362 14.1843C83.3362 13.1625 84.1646 12.3341 85.1865 12.3341C86.2083 12.3341 87.0367 13.1625 87.0367 14.1843C87.0367 15.2062 86.2083 16.0346 85.1865 16.0346C84.1646 16.0346 83.3362 15.2062 83.3362 14.1843Z" })] }));
+    const IconLogo = () => (_jsxs("svg", { width: "48", height: "39", viewBox: "0 0 48 39", fill: logoColor, className: className, xmlns: "http://www.w3.org/2000/svg", children: [gradient && _jsx(GradientDef, {}), _jsx("path", { d: "M41.5583 16.9123C42.4171 16.5857 42.8607 15.6135 42.3824 14.8291C41.7683 13.8222 40.96 12.9406 39.9989 12.2385C38.5878 11.2077 36.9078 10.6084 35.1628 10.5134C33.4178 10.4183 31.6827 10.8316 30.1679 11.703C29.3889 12.1511 28.6855 12.7105 28.0777 13.3598L28.0455 13.3414C28.0455 13.3414 23.1066 18.565 20.1029 21.2852C18.9318 22.3457 17.1939 23.8618 16.606 24.3734C16.3226 24.5513 16.023 24.7047 15.7101 24.8312C14.6867 25.2448 13.5653 25.3526 12.4818 25.1416C11.3984 24.9305 10.3994 24.4097 9.6061 23.6422C9.21412 23.263 8.88066 22.8316 8.61381 22.3624C8.15961 21.5638 7.28642 20.9842 6.39093 21.1896C5.49543 21.395 4.92228 22.297 5.28824 23.1397C5.75802 24.2215 6.43738 25.2059 7.29275 26.0334C8.54876 27.2485 10.1303 28.0732 11.8457 28.4073C13.561 28.7414 15.3365 28.5707 16.9568 27.9159C17.9835 27.5009 18.9199 26.9029 19.723 26.156L19.7764 26.1819L31.0481 15.1256C31.2913 14.9256 31.5517 14.7453 31.8269 14.5869C32.7837 14.0365 33.8797 13.7755 34.9818 13.8355C36.084 13.8956 37.1451 14.2741 38.0364 14.9252C38.4768 15.2469 38.8665 15.6283 39.1953 16.0564C39.755 16.7849 40.6996 17.2389 41.5583 16.9123Z" }), _jsx("path", { d: "M16.0312 10.8532C16.9153 11.1033 17.2508 12.118 16.843 12.9412C16.4352 13.7645 15.4338 14.0737 14.528 13.9198C14.2004 13.8641 13.8676 13.837 13.5333 13.8393C12.6416 13.8455 11.7639 14.0605 10.9704 14.4673C10.1769 14.874 9.4898 15.4611 8.96424 16.1814C8.76716 16.4515 8.59485 16.7375 8.44879 17.0359C8.04489 17.8611 7.20924 18.4936 6.30275 18.344C5.39626 18.1944 4.76839 17.3297 5.08149 16.4659C5.37096 15.6673 5.7726 14.911 6.27653 14.2203C7.10862 13.0799 8.19645 12.1504 9.45272 11.5065C10.709 10.8625 12.0987 10.522 13.5104 10.5123C14.3653 10.5064 15.2139 10.622 16.0312 10.8532Z" }), _jsx("path", { d: "M21.7339 15.1911C21.7339 16.2127 20.9057 17.041 19.884 17.041C18.8624 17.041 18.0342 16.2127 18.0342 15.1911C18.0342 14.1694 18.8624 13.3412 19.884 13.3412C20.9057 13.3412 21.7339 14.1694 21.7339 15.1911Z" }), _jsx("path", { d: "M31.6121 28.2752C30.728 28.025 30.3926 27.0104 30.8004 26.1871C31.2082 25.3638 32.2096 25.0547 33.1153 25.2086C33.4429 25.2642 33.7757 25.2913 34.1101 25.289C35.0017 25.2829 35.8795 25.0678 36.673 24.6611C37.4664 24.2544 38.1535 23.6673 38.6791 22.947C38.8762 22.6769 39.0485 22.3909 39.1945 22.0925C39.5984 21.2673 40.4341 20.6348 41.3406 20.7844C42.2471 20.934 42.8749 21.7987 42.5618 22.6625C42.2724 23.461 41.8707 24.2174 41.3668 24.9081C40.5347 26.0485 39.4469 26.9779 38.1906 27.6219C36.9343 28.2658 35.5446 28.6063 34.1329 28.6161C33.278 28.6219 32.4294 28.5064 31.6121 28.2752Z" }), _jsx("path", { d: "M25.9097 23.9383C25.9097 22.9166 26.7379 22.0884 27.7595 22.0884C28.7812 22.0884 29.6094 22.9166 29.6094 23.9383C29.6094 24.9599 28.7812 25.7881 27.7595 25.7881C26.7379 25.7881 25.9097 24.9599 25.9097 23.9383Z" })] }));
     const renderLogo = () => {
         switch (variant) {
             case LogoVariant.Horizontal:

package/dist/stories/Logo.stories.d.ts

@@ -15,6 +15,10 @@ declare const meta: {
         color: {
             control: "color";
         };
+        gradient: {
+            control: "text";
+            description: string;
+        };
         svgUrl: {
             control: "text";
             description: string;
@@ -27,4 +31,5 @@ export declare const Horizontal: Story;
 export declare const Vertical: Story;
 export declare const Icon: Story;
 export declare const CustomColor: Story;
+export declare const WithGradient: Story;
 export declare const ExternalSvg: Story;

package/dist/stories/Logo.stories.js

@@ -15,6 +15,10 @@ const meta = {
         color: {
             control: 'color',
         },
+        gradient: {
+            control: 'text',
+            description: 'CSS gradient value to apply to the logo',
+        },
         svgUrl: {
             control: 'text',
             description: 'URL to an external SVG file to override the default logo',
@@ -40,12 +44,18 @@ export const Icon = {
 export const CustomColor = {
     args: {
         variant: LogoVariant.Horizontal,
-        color: 'var(--primitives-desktop-primary-brand-lemon-200)',
+        color: 'var(--colors-light-foreground-fg-success)',
+    },
+};
+export const WithGradient = {
+    args: {
+        variant: LogoVariant.Horizontal,
+        gradient: 'var(--global-logo-gradient)',
     },
 };
 export const ExternalSvg = {
     args: {
-        svgUrl: 'https://storage.googleapis.com/bey-dev-public/colossyan.svg',
+        svgUrl: 'https://storage.googleapis.com/bey-dev-public/testTavus.svg',
         color: '#181717',
     },
 };

package/dist/stories/Toggle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ComponentsProps, ToggleProps } from './types/toggle';
+export declare const Toggle: React.FC<ToggleProps>;
+export declare const Components: React.FC<ComponentsProps>;

package/dist/stories/Toggle.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TogglePosition } from './types/toggle';
+import { Box, styled, Switch } from '@mui/material';
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types/typography';
+const IOSSwitch = styled((props) => (_jsx(Switch, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props })))(({ theme }) => ({
+    width: 36,
+    height: 20,
+    padding: 0,
+    '& .MuiSwitch-switchBase': {
+        padding: 0,
+        margin: 2,
+        transitionDuration: '300ms',
+        '&.Mui-checked': {
+            transform: 'translateX(16px)',
+            color: '#fff',
+            '& + .MuiSwitch-track': {
+                backgroundColor: 'var(--primitives-desktop-primary-success-500)',
+                opacity: 1,
+                border: 0,
+            },
+            '&.Mui-disabled + .MuiSwitch-track': {
+                opacity: 0.5,
+            },
+        },
+        '&.Mui-focusVisible .MuiSwitch-thumb': {
+            color: '#33cf4d',
+            border: '6px solid #fff',
+        },
+        '&.Mui-disabled .MuiSwitch-thumb': {
+            color: theme.palette.grey[100],
+        },
+        '&.Mui-disabled + .MuiSwitch-track': {
+            backgroundColor: 'var(--primitives-desktop-primary-gray-50)',
+            opacity: 0.7,
+        },
+    },
+    '& .MuiSwitch-thumb': {
+        boxSizing: 'border-box',
+        width: 16,
+        height: 16,
+        backgroundColor: 'var(--colors-light-foreground-fg-white)',
+    },
+    '& .MuiSwitch-track': {
+        borderRadius: 26 / 2,
+        backgroundColor: 'var(--primitives-desktop-primary-gray-100)',
+        opacity: 1,
+        transition: theme.transitions.create(['background-color'], {
+            duration: 500,
+        }),
+        '&:hover': {
+            border: '1px solid red',
+            backgroundColor: 'var(--primitives-desktop-primary-gray-200)',
+        },
+    },
+}));
+export const Toggle = ({ checked, onChange, text = 'Click me', title, disabled, togglePosition = TogglePosition.Right, style, }) => {
+    return (_jsxs(Box, { display: "flex", alignItems: "flex-start", flexDirection: togglePosition === TogglePosition.Left ? 'row' : 'row-reverse', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, children: [_jsx(IOSSwitch, { checked: checked, onChange: (e) => onChange(e.target.checked), disabled: disabled }), text && (_jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsx(Typography, { text: text, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--colors-light-text-text-title)', style: { lineHeight: '20px' } }), title && (_jsx(Typography, { text: title, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "#475467", style: { lineHeight: '20px' } }))] }))] }));
+};
+export const Components = () => {
+    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Toggle" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' } })] }));
+};

package/dist/stories/Toggle.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toggle } from './Toggle';
+declare const meta: Meta<typeof Toggle>;
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+export declare const Default: Story;

package/dist/stories/Toggle.stories.js

@@ -0,0 +1,69 @@
+import { Toggle } from './Toggle';
+import { TogglePosition } from './types/toggle';
+const meta = {
+    title: 'Design System/Components/Toggle',
+    component: Toggle,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4595-5881&t=3PJghL9RdZ71sldb-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        checked: {
+            control: 'boolean',
+            description: 'Whether the toggle is checked',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        onChange: {
+            description: 'Callback function when the toggle is checked',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        text: {
+            description: 'Text of the toggle',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        title: {
+            description: 'Title of the toggle',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the toggle is disabled',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        togglePosition: {
+            control: 'select',
+            description: 'Position of the toggle',
+            options: Object.values(TogglePosition),
+            table: { type: { summary: 'string' } },
+        },
+        style: {
+            description: 'Style of the toggle',
+            table: { type: { summary: 'object' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        checked: false,
+        onChange: () => { },
+        text: 'Click me',
+        title: 'This is a toggle',
+        disabled: false,
+        togglePosition: TogglePosition.Right,
+    },
+};

package/dist/stories/Typography.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TypographySize, TypographyWeight, } from './types/typography';
-export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, }) => {
+export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, style, }) => {
     const getTypographySizeToken = () => {
         let sizeLc = size?.toLowerCase() || '';
         if (sizeLc.includes('heading')) {
@@ -29,6 +29,7 @@ export const Typography = ({ text, color, size = TypographySize.HeadingL, weight
             fontWeight: fontWeight,
             fontFamily: fontFamily + ', sans-serif',
             color: color || 'var(--global-text-text-title)',
+            ...style,
         }, children: text }));
 };
 export const Components = () => {

package/dist/stories/Typography.stories.js

@@ -44,6 +44,13 @@ const meta = {
                 type: { summary: 'string' },
             },
         },
+        style: {
+            control: 'object',
+            description: 'Style of the typography',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
     },
 };
 export default meta;

package/dist/stories/types/logo.d.ts

@@ -10,8 +10,14 @@ export interface LogoProps {
     variant?: LogoVariant;
     /**
      * The color to apply to the logo
+     * If gradient is provided, this will be ignored
      */
     color?: string;
+    /**
+     * Optional gradient value to apply to the logo
+     * Example: "linear-gradient(180deg, #3300ff 0%, #d170ff 100%)"
+     */
+    gradient?: string;
     /**
      * Optional className for additional styling
      */

package/dist/stories/types/toggle.d.ts

@@ -0,0 +1,32 @@
+import { SxProps, Theme } from '@mui/material';
+/**
+ * Toggle position variants
+ */
+export declare enum TogglePosition {
+    Left = "Left",
+    Right = "Right"
+}
+/**
+ * Toggle component props
+ */
+export type ToggleProps = {
+    /** Text of the toggle */
+    text: string;
+    /** Title of the toggle */
+    title: string;
+    /** Whether the toggle is checked */
+    checked: boolean;
+    /** Callback function when the toggle is checked */
+    onChange: (checked: boolean) => void;
+    /** Whether the toggle is disabled */
+    disabled?: boolean;
+    /** Position of the toggle */
+    togglePosition?: TogglePosition;
+    /** Style of the toggle */
+    style?: SxProps<Theme>;
+};
+/**
+ * Props for the Components wrapper
+ */
+export interface ComponentsProps {
+}

package/dist/stories/types/toggle.js

@@ -0,0 +1,8 @@
+/**
+ * Toggle position variants
+ */
+export var TogglePosition;
+(function (TogglePosition) {
+    TogglePosition["Left"] = "Left";
+    TogglePosition["Right"] = "Right";
+})(TogglePosition || (TogglePosition = {}));

package/dist/stories/types/typography.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 /**
  * Typography size variants
  */
@@ -35,6 +36,8 @@ export interface TypographyProps {
     weight?: TypographyWeight;
     /** Color variant of the typography */
     color?: string;
+    /** Style variant of the typography */
+    style?: CSSProperties;
 }
 /**
  * Props for the Components wrapper

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",