autocasting-ui-library-padimasso 1.2.8 → 1.3.1

package/.storybook/manager-head.html

@@ -0,0 +1,11 @@
+<script>
+  (() => {
+    const INTRO_PATH = '/story/start-here-introduction--home';
+    const url = new URL(window.location.href);
+
+    if (!url.searchParams.has('path')) {
+      url.searchParams.set('path', INTRO_PATH);
+      window.location.replace(url.toString());
+    }
+  })();
+</script>

package/.storybook/preview.ts

@@ -7,7 +7,19 @@ export default {
     controls: { matchers: { color: /(background|color)$/i, date: /Date$/ }, disableSaveFromUi: true },
     options: {
       storySort: {
-        order: ['📘 Introduction', '*'],
+        order: [
+          'Start Here',
+          'Actions',
+          'Forms',
+          'Media',
+          'Overlays',
+          'Feedback',
+          'Navigation',
+          'Flows',
+          'Brand',
+          'Layout',
+          '*',
+        ],
       },
     },
   },

package/dist/components/Actions/Buttons/Button/Button.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, isValidElement, cloneElement } from 'react';
+import { clsx } from 'clsx';
+import { BUTTON_STRUCTURE } from '../../../../styles/style_constants.js';
+
+const Button = forwardRef((props, ref) => {
+    const { className, variant = 'primary', asChild = false, children, ...rest } = props;
+    const { disabled, ...delegated } = rest;
+    const variantClasses = {
+        primary: 'bg-(--color-primary-purple) text-(--color-primary-white) cursor-pointer',
+        danger: 'bg-(--color-alert-error) text-(--color-primary-white) cursor-pointer',
+        primaryOutline: 'bg-(--color-primary-white) text-(--color-primary-purple) border border-(--color-primary-purple) cursor-pointer',
+        outline: 'bg-(--color-primary-white) text-(--color-primary-black) border border-(--color-secondary-outline) cursor-pointer',
+        disabled: 'bg-(--color-secondary-disabled-grey) text-(--color-primary-white) cursor-not-allowed',
+    };
+    const effectiveVariant = disabled ? 'disabled' : variant;
+    const baseLayout = 'inline-flex items-center justify-center leading-none align-middle rounded-lg';
+    const computedClass = clsx(BUTTON_STRUCTURE, baseLayout, 'font-semibold text-base transition duration-300 ease-in-out', variantClasses[effectiveVariant], className);
+    if (asChild && isValidElement(children)) {
+        const childProps = {
+            className: clsx(children.props.className, computedClass),
+            ...delegated,
+            disabled,
+        };
+        return cloneElement(children, childProps);
+    }
+    return (jsx("button", { ref: ref, className: computedClass, disabled: disabled, ...delegated, children: children }));
+});
+Button.displayName = 'Button';
+
+export { Button as default };

package/dist/components/Actions/Buttons/Button/ButtonRow.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import React from 'react';
+
+function ButtonRow({ items, className, innerClassName }) {
+    if (!items || items.length === 0)
+        return null;
+    return (jsx("div", { className: clsx('flex items-center justify-center', className), children: jsx("div", { className: clsx('inline-flex items-center justify-center rounded-lg bg-white shadow-sm h-11 px-4', innerClassName), children: items.map((item, index) => (jsxs(React.Fragment, { children: [index > 0 && jsx("div", { className: "w-px h-7 mx-4 bg-(--color-secondary-outline)" }), jsx("div", { className: "flex items-center justify-center", children: item })] }, index))) }) }));
+}
+
+export { ButtonRow as default };

package/dist/components/Actions/Buttons/GoogleButton/GoogleButton.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { BUTTON_STRUCTURE } from '../../../../styles/style_constants.js';
+
+const GoogleButton = ({ className, children, ...props }) => {
+    const hasBg = className?.includes('bg-');
+    const hasText = className?.includes('text-');
+    return (jsxs("button", { type: "button", className: clsx(BUTTON_STRUCTURE, 'flex items-center justify-center gap-4 font-light text-base drop-shadow-sm', !hasBg && 'bg-(--color-primary-white)', !hasText && 'text-(--color-primary-black)', className), ...props, children: [jsx(GoogleIcon, {}), jsx("span", { children: children })] }));
+};
+const GoogleIcon = () => (jsxs("svg", { className: "w-6 h-6", viewBox: "0 0 533.5 544.3", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M533.5 278.4c0-17.4-1.6-34.1-4.7-50.4H272v95.3h146.9c-6.4 34-25.6 62.8-54.7 82l89.1 69.2c52.1-48 80.2-118.7 80.2-196.1z", fill: "#4285f4" }), jsx("path", { d: "M272 544.3c72.6 0 133.5-24 178-65.3l-89.1-69.2c-24.8 16.6-56.5 26.3-88.9 26.3-68.2 0-125.9-46-146.7-107.9H35.4v67.6C79.9 482.5 170.6 544.3 272 544.3z", fill: "#34a853" }), jsx("path", { d: "M125.3 327.9c-10-29.4-10-61.3 0-90.7V169.6H35.4c-35.4 70.8-35.4 154.2 0 225z", fill: "#fbbc04" }), jsx("path", { d: "M272 107.7c39.5-.6 77.4 13.7 106.1 39.8l79.2-79.2C409 25.6 341.3 0 272 0 170.6 0 79.9 61.8 35.4 169.6l89.9 67.6C146.1 153.7 203.8 107.7 272 107.7z", fill: "#ea4335" })] }));
+
+export { GoogleButton as default };

package/dist/components/Actions/Menus/OverflowMenu/OverflowMenu.js

@@ -0,0 +1,163 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Icon } from '../../../Brand/Identity/Icon/Icon.js';
+
+function cx(...xs) {
+    return xs.filter(Boolean).join(' ');
+}
+function isActionItem(item) {
+    return item.type !== 'separator' && item.type !== 'content';
+}
+function isContentItem(item) {
+    return item.type === 'content';
+}
+function isVisibleItem(item) {
+    return !('hidden' in item && item.hidden);
+}
+const OverflowMenu = ({ items, align = 'end', side = 'bottom', offset = 8, triggerClassName, menuClassName, itemClassName, disabled = false, trigger, }) => {
+    const [open, setOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    const [anchor, setAnchor] = useState(null);
+    const [hoverKey, setHoverKey] = useState(null);
+    const visibleItems = useMemo(() => (items ?? []).filter(isVisibleItem), [items]);
+    const close = useCallback(() => setOpen(false), []);
+    const toggleOpen = useCallback(() => {
+        if (disabled)
+            return;
+        setOpen((v) => !v);
+    }, [disabled]);
+    const measure = useCallback(() => {
+        const el = triggerRef.current;
+        if (!el)
+            return;
+        const r = el.getBoundingClientRect();
+        if (side === 'bottom') {
+            setAnchor({
+                x: align === 'end' ? r.right : r.left,
+                y: r.bottom + offset,
+            });
+        }
+        else {
+            setAnchor({
+                x: align === 'end' ? r.right : r.left,
+                y: r.top - offset,
+            });
+        }
+    }, [align, side, offset]);
+    useEffect(() => {
+        if (!open)
+            return;
+        measure();
+    }, [open, measure]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onResize = () => close();
+        const onScroll = (e) => {
+            const target = e.target;
+            if (!target)
+                return;
+            if (menuRef.current?.contains(target))
+                return;
+            if (triggerRef.current?.contains(target))
+                return;
+            close();
+        };
+        window.addEventListener('resize', onResize);
+        window.addEventListener('scroll', onScroll, true);
+        return () => {
+            window.removeEventListener('resize', onResize);
+            window.removeEventListener('scroll', onScroll, true);
+        };
+    }, [open, close]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                close();
+        };
+        const onPointerDown = (e) => {
+            const t = e.target;
+            if (!t)
+                return;
+            const inTrigger = !!triggerRef.current?.contains(t);
+            const inMenu = !!menuRef.current?.contains(t);
+            if (!inTrigger && !inMenu)
+                close();
+        };
+        document.addEventListener('keydown', onKey);
+        document.addEventListener('mousedown', onPointerDown, true);
+        document.addEventListener('touchstart', onPointerDown, true);
+        return () => {
+            document.removeEventListener('keydown', onKey);
+            document.removeEventListener('mousedown', onPointerDown, true);
+            document.removeEventListener('touchstart', onPointerDown, true);
+        };
+    }, [open, close]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onFocusIn = (e) => {
+            const t = e.target;
+            if (!t)
+                return;
+            const inTrigger = !!triggerRef.current?.contains(t);
+            const inMenu = !!menuRef.current?.contains(t);
+            if (!inTrigger && !inMenu)
+                close();
+        };
+        document.addEventListener('focusin', onFocusIn, true);
+        return () => {
+            document.removeEventListener('focusin', onFocusIn, true);
+        };
+    }, [open, close]);
+    const onSelectItem = async (it) => {
+        if (!isActionItem(it) || it.disabled)
+            return;
+        try {
+            await it.onSelect?.();
+        }
+        finally {
+            const closeOnSelect = it.closeOnSelect ?? true;
+            if (closeOnSelect)
+                close();
+        }
+    };
+    const MenuRenderer = !open || !anchor
+        ? null
+        : createPortal(jsx("div", { ref: menuRef, role: "menu", className: cx('fixed z-[999] min-w-[210px] rounded-2xl shadow-lg', 'bg-(--color-primary-white) border border-(--color-secondary-outline)', 'p-2', menuClassName), style: {
+                left: anchor.x,
+                top: anchor.y,
+                transform: align === 'end'
+                    ? side === 'bottom'
+                        ? 'translateX(-100%) translateY(0)'
+                        : 'translateX(-100%) translateY(-100%)'
+                    : side === 'bottom'
+                        ? 'translateX(0) translateY(0)'
+                        : 'translateX(0) translateY(-100%)',
+            }, children: visibleItems.map((it) => {
+                if (it.type === 'separator') {
+                    return jsx("div", { className: "my-2 h-px w-full bg-(--color-secondary-outline) opacity-60" }, it.key);
+                }
+                if (isContentItem(it)) {
+                    return (jsx("div", { className: "p-2", children: it.content }, it.key));
+                }
+                const isDestructive = Boolean(it.destructive);
+                const isDisabled = Boolean(it.disabled);
+                const iconName = it.iconName;
+                const forcedIconVariant = it.iconVariant;
+                const resolvedIconVariant = forcedIconVariant ||
+                    (isDisabled ? 'disabled' : isDestructive ? 'danger' : hoverKey === it.key ? 'primary' : 'default');
+                const labelNode = it.label;
+                const isStringLabel = typeof labelNode === 'string';
+                return (jsxs("button", { type: "button", role: "menuitem", "data-menuitem": "true", disabled: isDisabled, onClick: () => void onSelectItem(it), onMouseEnter: () => setHoverKey(it.key), onMouseLeave: () => setHoverKey(null), className: cx('w-full text-left px-3 py-2 rounded-xl', 'flex items-center gap-3', 'text-sm font-normal', 'cursor-pointer disabled:cursor-not-allowed', isDestructive
+                        ? 'text-(--color-alert-error) hover:bg-red-50'
+                        : 'text-(--color-primary-black) hover:text-(--color-primary-purple) hover:bg-(--color-secondary-white)', 'transition-colors', 'disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-inherit', itemClassName), children: [iconName && jsx(Icon, { name: iconName, variant: resolvedIconVariant }), isStringLabel ? jsx("span", { className: "select-none", children: labelNode }) : labelNode] }, it.key));
+            }) }), document.body);
+    return (jsxs(Fragment, { children: [jsx("button", { ref: triggerRef, type: "button", onClick: toggleOpen, "aria-haspopup": "menu", "aria-expanded": open, disabled: disabled, className: cx('disabled:opacity-50 disabled:cursor-not-allowed', triggerClassName), children: trigger ? trigger({ open, disabled }) : jsx(Icon, { name: "overflowmenu", variant: "default" }) }), MenuRenderer] }));
+};
+
+export { OverflowMenu as default };

package/dist/components/Actions/Menus/TextDropdownTrigger/TextDropdownTrigger.js

@@ -0,0 +1,6 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import ChevronUpDown from '../../../Navigation/Indicators/Chevron/ChevronUpDown.js';
+
+const TextDropdownTrigger = ({ label, open }) => (jsxs("span", { className: "flex items-center gap-1 cursor-pointer select-none", children: [jsx("span", { className: "underline font-normal text-sm", children: label }), jsx("span", { className: open ? 'rotate-180 transition-transform' : 'transition-transform', children: jsx(ChevronUpDown, { open: open, sizePx: 18 }) })] }));
+
+export { TextDropdownTrigger as default };

package/dist/components/Brand/Identity/Icon/HilighterSvg.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function HilighterSvg({ width = '100%', height = 56, color = '#AEFF00', ...rest }) {
+    return (jsx("svg", { viewBox: "0 0 126 56", width: width, height: height, preserveAspectRatio: "xMidYMid meet", ...rest, children: jsx("path", { d: "M25.5639 7.56735C34.0888 4.52357 48.7621 1.06384 65.2026 0.513101C81.6293 -0.037151 99.9437 2.31166 115.689 11.0156C118.173 12.3887 120.188 13.8198 121.746 15.3219C123.279 16.8001 124.509 18.4794 125.248 20.4655C126.046 22.6107 126.226 25.0159 125.707 27.3628C125.232 29.5056 124.245 31.2857 123.098 32.7731C120.795 35.7602 117.145 38.4557 112.695 40.87C108.2 43.3088 102.726 45.5445 96.6509 47.4956C72.4196 55.2781 37.9998 58.729 16.8252 51.9115C11.561 50.2166 7.73054 48.4323 5.10856 46.5543C3.79828 45.6157 2.71812 44.6043 1.89774 43.481C1.08416 42.367 0.403448 40.9727 0.12962 39.2279C-0.467489 35.4229 1.11541 32.5139 2.48806 30.7479C4.00031 28.8023 6.1481 27.0414 8.51907 25.4598C13.297 22.2726 19.4918 19.4854 24.6984 17.385C27.3123 16.3305 29.6978 15.4415 31.5558 14.756C33.4559 14.055 34.7171 13.5976 35.1855 13.3784L36.0921 19.287C35.5039 19.5623 34.0896 20.0732 32.2797 20.7408C30.4275 21.4241 28.0678 22.3039 25.4868 23.3451C20.3034 25.436 14.3075 28.147 9.76909 31.1744C7.48198 32.7001 5.69024 34.226 4.56593 35.6724C4.00296 36.3967 3.70961 36.9729 3.57926 37.3547C3.52821 37.5043 3.51357 37.5913 3.50973 37.6199C3.52232 37.6834 3.61152 38.0542 4.05906 38.667C4.53237 39.3151 5.29132 40.0734 6.43756 40.8944C8.72867 42.5355 12.2832 44.2294 17.46 45.8962C38.0501 52.5256 72.0003 49.193 96.0173 41.4793C102.005 39.5563 107.335 37.3733 111.656 35.0289C116.023 32.6599 119.202 30.2076 121.01 27.8621C121.919 26.6833 122.308 25.7511 122.439 25.1579C122.525 24.7686 122.54 24.4137 122.31 23.7979C122.022 23.023 121.362 21.9394 120.053 20.6767C118.768 19.4381 116.988 18.15 114.632 16.8474C99.3988 8.42646 81.511 6.08492 65.2698 6.62895C49.0424 7.17254 34.5817 10.5918 26.2657 13.561L25.5639 7.56735Z", fill: color }) }));
+}
+
+export { HilighterSvg as default };

package/dist/components/Brand/Identity/Icon/Icon.js

@@ -0,0 +1,276 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import ApplicantsIconDisabled from '../../../../icons/applicants-disabled.svg.js';
+import ApplicantsIconPurple from '../../../../icons/applicants-purple.svg.js';
+import ApplicantsIcon from '../../../../icons/applicants.svg.js';
+import ArrowLongLeftIconPurple from '../../../../icons/arrow-long-left-purple.svg.js';
+import ArrowLongLeftIcon from '../../../../icons/arrow-long-left.svg.js';
+import BehanceIconPurple from '../../../../icons/behance-purple.svg.js';
+import BehanceIcon from '../../../../icons/behance.svg.js';
+import BurgerCloseIconPurple from '../../../../icons/burger-close-purple.svg.js';
+import BurgerCloseIcon from '../../../../icons/burger-close.svg.js';
+import BurgerIconPurple from '../../../../icons/burger-purple.svg.js';
+import BurgerIcon from '../../../../icons/burger.svg.js';
+import CalendarIconPurple from '../../../../icons/calendar-purple.svg.js';
+import CalendarIcon from '../../../../icons/calendar.svg.js';
+import CatalogIconPurple from '../../../../icons/catalogo-purple.svg.js';
+import CatalogIcon from '../../../../icons/catalogo.svg.js';
+import ClapperManageIconPurple from '../../../../icons/clapper-manage-purple.svg.js';
+import ClapperManageIcon from '../../../../icons/clapper-manage.svg.js';
+import ClapperIconPurple from '../../../../icons/clapper-purple.svg.js';
+import ClapperIcon from '../../../../icons/clapper.svg.js';
+import ClockIconPurple from '../../../../icons/clock-purple.svg.js';
+import ClockIcon from '../../../../icons/clock.svg.js';
+import CopyLinkIconDisabled from '../../../../icons/copy-link-disabled.svg.js';
+import CopyLinkIconPurple from '../../../../icons/copy-link-purple.svg.js';
+import CopyLinkIcon from '../../../../icons/copy-link.svg.js';
+import CrossIconPurple from '../../../../icons/cross-purple.svg.js';
+import CrossIcon from '../../../../icons/cross.svg.js';
+import DeleteIconRed from '../../../../icons/delete-red.svg.js';
+import DeleteIcon from '../../../../icons/delete.svg.js';
+import EditIconPurple from '../../../../icons/edit-purple.svg.js';
+import EditIcon from '../../../../icons/edit.svg.js';
+import FileIconPurple from '../../../../icons/file-purple.svg.js';
+import FileIcon from '../../../../icons/file.svg.js';
+import FilterIconPurple from '../../../../icons/filter-purple.svg.js';
+import FilterIcon from '../../../../icons/filter.svg.js';
+import ImdbIconPurple from '../../../../icons/imdb-purple.svg.js';
+import ImdbIcon from '../../../../icons/imdb.svg.js';
+import InfoIconPurple from '../../../../icons/info-purple.svg.js';
+import InfoIcon from '../../../../icons/info.svg.js';
+import InstagramIconPurple from '../../../../icons/instagram-purple.svg.js';
+import InstagramIcon from '../../../../icons/instagram.svg.js';
+import LinkedInIconPurple from '../../../../icons/linkedin-purple.svg.js';
+import LinkedInIcon from '../../../../icons/linkedin.svg.js';
+import LocationIconPurple from '../../../../icons/location-purple.svg.js';
+import LocationIcon from '../../../../icons/location.svg.js';
+import LogoutIconRed from '../../../../icons/logout-red.svg.js';
+import MailIconPurple from '../../../../icons/message-purple.svg.js';
+import MailIcon from '../../../../icons/message.svg.js';
+import OGIcon from '../../../../icons/og-image.svg.js';
+import OpenIconDisabled from '../../../../icons/open-disabled.svg.js';
+import OpenIconPurple from '../../../../icons/open-purple.svg.js';
+import OpenIcon from '../../../../icons/open.svg.js';
+import OverflowMenuIconPurple from '../../../../icons/overflowmenu-purple.svg.js';
+import OverflowMenuIcon from '../../../../icons/overflowmenu.svg.js';
+import PlayIconPurple from '../../../../icons/play-purple.svg.js';
+import PlayIcon from '../../../../icons/play.svg.js';
+import PlusIconPurple from '../../../../icons/plus-purple.svg.js';
+import PlusIconWhite from '../../../../icons/plus-white.svg.js';
+import PlusIcon from '../../../../icons/plus.svg.js';
+import ProfileIconPurple from '../../../../icons/profile-purple.svg.js';
+import ProfileIcon from '../../../../icons/profile.svg.js';
+import PublishIconDisabled from '../../../../icons/publish-disabled.svg.js';
+import PublishIconPurple from '../../../../icons/publish-purple.svg.js';
+import PublishIcon from '../../../../icons/publish.svg.js';
+import SaveIconPurple from '../../../../icons/save-purple.svg.js';
+import SaveIcon from '../../../../icons/save.svg.js';
+import SearchIconDisabled from '../../../../icons/search-disabled.svg.js';
+import SearchIconPurple from '../../../../icons/search-purple.svg.js';
+import SearchIcon from '../../../../icons/search.svg.js';
+import SettingsIconPurple from '../../../../icons/settings-purple.svg.js';
+import SettingsIcon from '../../../../icons/settings.svg.js';
+import SwitcherIconPurple from '../../../../icons/switcher-purple.svg.js';
+import SwitcherIcon from '../../../../icons/switcher.svg.js';
+import TickIconPurple from '../../../../icons/tick-2-purple.svg.js';
+import TickIcon from '../../../../icons/tick-2.svg.js';
+import TikTokIcon from '../../../../icons/tikTok.svg.js';
+import ViewIconPurple from '../../../../icons/view-purple.svg.js';
+import ViewIcon from '../../../../icons/view.svg.js';
+import VimeoIconPurple from '../../../../icons/vimeo-purple.svg.js';
+import VimeoIcon from '../../../../icons/vimeo.svg.js';
+import WhatsappIconPurple from '../../../../icons/whatsapp-purple.svg.js';
+import WhatsappIcon from '../../../../icons/whatsapp.svg.js';
+import XIconPurple from '../../../../icons/x-purple.svg.js';
+import XIcon from '../../../../icons/x.svg.js';
+import WebIcon from '../../../../icons/web.svg.js';
+import WebIconPurple from '../../../../icons/web-purple.svg.js';
+
+const ICONS = {
+    switcher: {
+        default: SwitcherIcon,
+        primary: SwitcherIconPurple,
+    },
+    tick: {
+        default: TickIcon,
+        primary: TickIconPurple,
+    },
+    view: {
+        default: ViewIcon,
+        primary: ViewIconPurple,
+    },
+    open: {
+        default: OpenIcon,
+        primary: OpenIconPurple,
+        disabled: OpenIconDisabled,
+    },
+    burger: {
+        default: BurgerIcon,
+        primary: BurgerIconPurple,
+    },
+    burgerClose: {
+        default: BurgerCloseIcon,
+        primary: BurgerCloseIconPurple,
+    },
+    catalog: {
+        default: CatalogIcon,
+        primary: CatalogIconPurple,
+    },
+    profile: {
+        default: ProfileIcon,
+        primary: ProfileIconPurple,
+    },
+    settings: {
+        default: SettingsIcon,
+        primary: SettingsIconPurple,
+    },
+    logout: {
+        default: LogoutIconRed,
+        danger: LogoutIconRed,
+    },
+    arrowLongLeft: {
+        default: ArrowLongLeftIcon,
+        primary: ArrowLongLeftIconPurple,
+    },
+    cross: {
+        default: CrossIcon,
+        primary: CrossIconPurple,
+    },
+    copyLink: {
+        default: CopyLinkIcon,
+        primary: CopyLinkIconPurple,
+        disabled: CopyLinkIconDisabled,
+    },
+    clapper: {
+        default: ClapperIcon,
+        primary: ClapperIconPurple,
+    },
+    file: {
+        default: FileIcon,
+        primary: FileIconPurple,
+    },
+    delete: {
+        default: DeleteIcon,
+        danger: DeleteIconRed,
+    },
+    edit: {
+        default: EditIcon,
+        primary: EditIconPurple,
+    },
+    mail: {
+        default: MailIcon,
+        primary: MailIconPurple,
+    },
+    behance: {
+        default: BehanceIcon,
+        primary: BehanceIconPurple,
+    },
+    imdb: {
+        default: ImdbIcon,
+        primary: ImdbIconPurple,
+    },
+    whatsapp: {
+        default: WhatsappIcon,
+        primary: WhatsappIconPurple,
+    },
+    vimeo: {
+        default: VimeoIcon,
+        primary: VimeoIconPurple,
+    },
+    instagram: {
+        default: InstagramIcon,
+        primary: InstagramIconPurple,
+    },
+    x: {
+        default: XIcon,
+        primary: XIconPurple,
+    },
+    tikTok: {
+        default: TikTokIcon,
+    },
+    linkedin: {
+        default: LinkedInIcon,
+        primary: LinkedInIconPurple,
+    },
+    ogIcon: {
+        default: OGIcon,
+    },
+    filter: {
+        default: FilterIcon,
+        primary: FilterIconPurple,
+    },
+    location: {
+        default: LocationIcon,
+        primary: LocationIconPurple,
+    },
+    calendar: {
+        default: CalendarIcon,
+        primary: CalendarIconPurple,
+    },
+    clock: {
+        default: ClockIcon,
+        primary: ClockIconPurple,
+    },
+    plus: {
+        default: PlusIcon,
+        primary: PlusIconPurple,
+        white: PlusIconWhite,
+    },
+    clapperManage: {
+        default: ClapperManageIcon,
+        primary: ClapperManageIconPurple,
+    },
+    save: {
+        default: SaveIcon,
+        primary: SaveIconPurple,
+    },
+    publish: {
+        default: PublishIcon,
+        primary: PublishIconPurple,
+        disabled: PublishIconDisabled,
+    },
+    overflowmenu: {
+        default: OverflowMenuIcon,
+        primary: OverflowMenuIconPurple,
+    },
+    applicants: {
+        default: ApplicantsIcon,
+        primary: ApplicantsIconPurple,
+        disabled: ApplicantsIconDisabled,
+    },
+    search: {
+        default: SearchIcon,
+        primary: SearchIconPurple,
+        disabled: SearchIconDisabled,
+    },
+    info: {
+        default: InfoIcon,
+        primary: InfoIconPurple,
+    },
+    play: {
+        default: PlayIcon,
+        primary: PlayIconPurple,
+    },
+    web: {
+        default: WebIcon,
+        primary: WebIconPurple,
+    },
+};
+function Icon({ name, variant = 'default', size = 18, className, alt = '', style, ...rest }) {
+    const config = ICONS[name];
+    const src = (variant === 'primary' && config.primary) ||
+        (variant === 'white' && config.white) ||
+        (variant === 'danger' && config.danger) ||
+        (variant === 'disabled' && config.disabled) ||
+        config.default;
+    const finalStyle = {
+        width: size,
+        height: size,
+        ...style,
+    };
+    const hasCustomCursor = /\bcursor-[^\s]+\b/.test(className ?? '');
+    const finalClassName = clsx('inline-block', variant === 'disabled' ? 'cursor-not-allowed' : !hasCustomCursor && 'cursor-pointer', className);
+    return jsx("img", { src: src, alt: alt, className: finalClassName, style: finalStyle, ...rest });
+}
+
+export { Icon };

package/dist/components/Brand/Identity/Icons/EditIcon.js

@@ -0,0 +1,5 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const EditIcon = () => (jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.6123 3.33644L4.69868 10.25C4.60082 10.3486 4.53297 10.4729 4.50511 10.6086L3.44296 15.6694C3.39368 15.9044 3.46582 16.1486 3.63511 16.3186C3.80368 16.4894 4.04725 16.5636 4.28225 16.5165L9.38442 15.4965C9.52299 15.4686 9.65013 15.4008 9.74942 15.3008L16.663 8.38718L11.6123 3.33644ZM12.6223 2.32644L17.673 7.37718L18.9537 6.09717C20.3488 4.70216 20.3488 2.44072 18.9537 1.04572C18.2837 0.37643 17.3759 0 16.4287 0C15.4809 0 14.573 0.37643 13.903 1.04572L12.6223 2.32644Z", fill: "#070707" }), jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.07143 20.0001H18.2144C18.8058 20.0001 19.2858 19.5201 19.2858 18.9287C19.2858 18.3372 18.8058 17.8572 18.2144 17.8572H1.07143C0.480002 17.8572 0 18.3372 0 18.9287C0 19.5201 0.480002 20.0001 1.07143 20.0001Z", fill: "#070707" })] }));
+
+export { EditIcon as default };

package/dist/components/Brand/Identity/Logo/Logo.js

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+
+const Logo = ({ horizontal, text, imageSrc, imageSize = 40, className }) => {
+    return (jsxs("div", { className: clsx(`flex ${horizontal ? 'flex-row' : 'flex-col'} gap-[10px] items-center justify-center cursor-pointer`, className), children: [imageSrc && (jsx("img", { src: imageSrc, alt: text, width: `${horizontal ? 40 : imageSize}`, height: imageSize, className: "object-contain" })), jsx("span", { className: `${horizontal ? 'text-sm' : 'text-base'} font-bold`, children: text })] }));
+};
+
+export { Logo as default };

package/dist/components/Feedback/Loading/Spinner/Spinner.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Spinner({ color, strokeWidth = 2, className = 'h-9 w-9', ariaLabel = 'Loading...', arc = 0.65, speedMs = 1300, }) {
+    const style = {
+        ...(color ? { color } : {}),
+        animationDuration: `${speedMs}ms`,
+    };
+    const r = 9;
+    const C = 2 * Math.PI * r;
+    const visible = Math.max(0, Math.min(1, arc)) * C;
+    const gap = C - visible;
+    return (jsxs("span", { role: "status", "aria-live": "polite", "aria-label": ariaLabel, className: `inline-flex items-center justify-center ${className}`, style: style, children: [jsx("svg", { className: "animate-spin", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true", children: jsx("circle", { cx: "12", cy: "12", r: r, stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: `${visible} ${gap}`, strokeDashoffset: C * 0.25 }) }), jsx("span", { className: "sr-only", children: ariaLabel })] }));
+}
+
+export { Spinner as default };

package/dist/components/Feedback/Status/Chip/Chip.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../../../Brand/Identity/Icon/Icon.js';
+
+function Chip({ label, onRemove, newItem = false }) {
+    return (jsxs("span", { className: [
+            'flex items-center gap-[6px] rounded-xl border px-3 py-1 lg:text-[14px]',
+            newItem
+                ? 'font-semibold bg-(--color-secondary-white) border-(--color-primary-purple) text-(--color-primary-purple)'
+                : 'bg-(--color-primary-white) border-(--color-secondary-outline) text-(--color-primary-black)',
+        ].join(' '), children: [jsx("p", { className: "text-sm", children: label }), onRemove && jsx(Icon, { name: "cross", variant: "primary", size: 11, onClick: onRemove })] }));
+}
+
+export { Chip as default };

package/dist/components/Feedback/Status/Chip/StatusChip.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function StatusChip({ label, dotColor, variant = 'bordered', align = 'inline', className, }) {
+    const baseClasses = 'inline-flex items-center gap-2';
+    const borderedClasses = 'rounded-xl border px-3 py-1 bg-(--color-primary-white) border-(--color-secondary-outline) text-(--color-primary-black)';
+    const inlineClasses = 'text-(--color-primary-black)';
+    const alignClasses = align === 'spaced' ? 'w-full justify-between' : '';
+    return (jsxs("span", { className: [
+            baseClasses,
+            alignClasses,
+            variant === 'bordered' ? borderedClasses : inlineClasses,
+            className ?? '',
+        ].join(' '), children: [jsx("span", { className: "text-sm", children: label }), dotColor ? (jsx("span", { className: "inline-block h-4 w-4 shrink-0 rounded-full", style: { background: dotColor }, "aria-hidden": "true" })) : null] }));
+}
+
+export { StatusChip as default };

package/dist/components/Flows/Wizard/Wizard.js

@@ -0,0 +1,21 @@
+import { useMemo, Children, isValidElement, useState, cloneElement } from 'react';
+
+function Wizard({ children }) {
+    const steps = useMemo(() => Children.toArray(children).filter(isValidElement), [children]);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const totalSteps = steps.length;
+    const progress = totalSteps === 0 ? 0 : ((activeIndex + 1) / totalSteps) * 100;
+    const goNext = () => setActiveIndex((prev) => Math.min(prev + 1, totalSteps - 1));
+    const goBack = () => setActiveIndex((prev) => Math.max(prev - 1, 0));
+    const injectedProps = {
+        stepIndex: activeIndex,
+        totalSteps,
+        progress,
+        goNext,
+        goBack,
+    };
+    const CurrentStep = steps[activeIndex];
+    return cloneElement(CurrentStep, injectedProps);
+}
+
+export { Wizard as default };

package/dist/components/Flows/Wizard/WizardStep.js

@@ -0,0 +1,7 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+function WizardStep({ children }) {
+    return jsx(Fragment, { children: children });
+}
+
+export { WizardStep as default };