@tangible/ui 0.0.1

package/components/Toolbar/index.js

@@ -0,0 +1 @@
+export { Toolbar } from './Toolbar.js';

package/components/Toolbar/types.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode, ReactElement } from 'react';
+export type ToolbarOrientation = 'horizontal' | 'vertical';
+export interface ToolbarProps {
+    /** Accessible label for the toolbar (required for a11y) */
+    'aria-label'?: string;
+    /** ID of element that labels the toolbar */
+    'aria-labelledby'?: string;
+    /** Toolbar orientation - affects arrow key direction */
+    orientation?: ToolbarOrientation;
+    /** Whether arrow keys wrap from end to start (does not affect Home/End) */
+    loop?: boolean;
+    children?: ReactNode;
+    className?: string;
+    /** Inline styles for layout integration */
+    style?: React.CSSProperties;
+}
+export interface ToolbarGroupProps {
+    /** Accessible label for the group (only adds role="group" if provided) */
+    'aria-label'?: string;
+    /** ID of element that labels the group */
+    'aria-labelledby'?: string;
+    children?: ReactNode;
+    className?: string;
+}
+export interface ToolbarItemProps {
+    /** The focusable element to register as a toolbar item */
+    children: ReactElement;
+}

package/components/Toolbar/types.js

@@ -0,0 +1 @@
+export {};

package/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,15 @@
+import type { TooltipProviderProps, TooltipProps, TooltipTriggerProps, TooltipContentProps } from './types';
+declare function TooltipProviderComponent({ delayDuration, closeDelayDuration, children, }: TooltipProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function TooltipRoot({ open: controlledOpen, onOpenChange, defaultOpen, delayDuration: localDelay, children, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+declare function TooltipTriggerComponent({ asChild, children }: TooltipTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function TooltipContentComponent({ side, align, sideOffset, className, children, }: TooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
+type TooltipCompound = typeof TooltipRoot & {
+    Provider: typeof TooltipProviderComponent;
+    Trigger: typeof TooltipTriggerComponent;
+    Content: typeof TooltipContentComponent;
+};
+export declare const Tooltip: TooltipCompound;
+export declare const TooltipProvider: typeof TooltipProviderComponent;
+export declare const TooltipTrigger: typeof TooltipTriggerComponent;
+export declare const TooltipContent: typeof TooltipContentComponent;
+export {};

package/components/Tooltip/Tooltip.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState, cloneElement, isValidElement, } from 'react';
+import { useFloating, offset, flip, shift, autoUpdate, FloatingPortal, } from '@floating-ui/react';
+import { cx } from '../../utils/cx.js';
+import { getPortalRootFor } from '../../utils/portal.js';
+import { TooltipContext, TooltipProviderContext, useTooltipContext, useTooltipProviderContext, } from './TooltipContext.js';
+import { toPlacement } from './types.js';
+// =============================================================================
+// TooltipProvider
+// =============================================================================
+function TooltipProviderComponent({ delayDuration = 400, closeDelayDuration = 0, children, }) {
+    const value = useMemo(() => ({ delayDuration, closeDelayDuration }), [delayDuration, closeDelayDuration]);
+    return (_jsx(TooltipProviderContext.Provider, { value: value, children: children }));
+}
+// =============================================================================
+// Tooltip Root
+// =============================================================================
+function TooltipRoot({ open: controlledOpen, onOpenChange, defaultOpen = false, delayDuration: localDelay, children, }) {
+    const providerContext = useTooltipProviderContext();
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isControlled = controlledOpen !== undefined;
+    const open = isControlled ? controlledOpen : uncontrolledOpen;
+    const setOpen = useCallback((nextOpen) => {
+        if (!isControlled) {
+            setUncontrolledOpen(nextOpen);
+        }
+        onOpenChange?.(nextOpen);
+    }, [isControlled, onOpenChange]);
+    const triggerRef = useRef(null);
+    const contentId = useId();
+    const contextValue = useMemo(() => ({
+        open,
+        setOpen,
+        triggerRef,
+        contentId,
+        delayDuration: localDelay ?? providerContext.delayDuration,
+        closeDelayDuration: providerContext.closeDelayDuration,
+    }), [open, setOpen, contentId, localDelay, providerContext]);
+    return (_jsx(TooltipContext.Provider, { value: contextValue, children: children }));
+}
+// =============================================================================
+// TooltipTrigger
+// =============================================================================
+function TooltipTriggerComponent({ asChild = false, children }) {
+    const { open, setOpen, triggerRef, contentId, delayDuration, closeDelayDuration } = useTooltipContext();
+    const openTimeoutRef = useRef(null);
+    const closeTimeoutRef = useRef(null);
+    const clearTimeouts = useCallback(() => {
+        if (openTimeoutRef.current)
+            clearTimeout(openTimeoutRef.current);
+        if (closeTimeoutRef.current)
+            clearTimeout(closeTimeoutRef.current);
+    }, []);
+    const handleOpen = useCallback(() => {
+        clearTimeouts();
+        openTimeoutRef.current = setTimeout(() => setOpen(true), delayDuration);
+    }, [clearTimeouts, delayDuration, setOpen]);
+    const handleClose = useCallback(() => {
+        clearTimeouts();
+        if (closeDelayDuration > 0) {
+            closeTimeoutRef.current = setTimeout(() => setOpen(false), closeDelayDuration);
+        }
+        else {
+            setOpen(false);
+        }
+    }, [clearTimeouts, closeDelayDuration, setOpen]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => clearTimeouts();
+    }, [clearTimeouts]);
+    // Merge child ref with our triggerRef
+    const setRefs = useCallback((node) => {
+        triggerRef.current = node;
+        // Also call child's ref if it exists
+        if (asChild && isValidElement(children)) {
+            const childRef = children.ref;
+            if (typeof childRef === 'function') {
+                childRef(node);
+            }
+            else if (childRef && typeof childRef === 'object') {
+                childRef.current = node;
+            }
+        }
+    }, [asChild, children, triggerRef]);
+    const triggerProps = {
+        onMouseEnter: handleOpen,
+        onMouseLeave: handleClose,
+        onFocus: handleOpen,
+        onBlur: handleClose,
+        'aria-describedby': open ? contentId : undefined,
+        'data-tooltip-open': open || undefined,
+    };
+    if (asChild && isValidElement(children)) {
+        return cloneElement(children, {
+            ...triggerProps,
+            ref: setRefs,
+        });
+    }
+    // Wrapper needs tabIndex to be keyboard-focusable for non-interactive children
+    return (_jsx("span", { ref: setRefs, ...triggerProps, tabIndex: 0, style: { display: 'inline-flex' }, children: children }));
+}
+// =============================================================================
+// TooltipContent
+// =============================================================================
+function TooltipContentComponent({ side = 'top', align = 'center', sideOffset = 8, className, children, }) {
+    const { open, setOpen, triggerRef, contentId } = useTooltipContext();
+    const { refs, floatingStyles } = useFloating({
+        placement: toPlacement(side, align),
+        open,
+        middleware: [
+            offset(sideOffset),
+            flip(),
+            shift({ padding: 8 }),
+        ],
+        whileElementsMounted: autoUpdate,
+    });
+    // Sync reference element when trigger mounts/changes
+    // This avoids the stale ref issue with passing triggerRef.current directly
+    useEffect(() => {
+        if (triggerRef.current) {
+            refs.setReference(triggerRef.current);
+        }
+    }, [triggerRef, refs]);
+    // Close on Escape — scoped to trigger focus to avoid closing modal + tooltip together
+    useEffect(() => {
+        if (!open)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                // Only close if focus is on or within the trigger element
+                const activeEl = document.activeElement;
+                const trigger = triggerRef.current;
+                if (trigger && (trigger === activeEl || trigger.contains(activeEl))) {
+                    setOpen(false);
+                    e.stopPropagation(); // Prevent bubbling to modal's Escape handler
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [open, setOpen, triggerRef]);
+    // Get portal root inside .tui-interface
+    const portalRoot = getPortalRootFor(triggerRef.current);
+    // Dev warning: tooltips should not contain interactive content (WCAG 1.4.13)
+    // Use Popover for interactive overlays instead
+    useEffect(() => {
+        if (import.meta.env?.DEV && open && refs.floating.current) {
+            const interactive = refs.floating.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
+            if (interactive.length > 0) {
+                console.warn('[Tooltip] Contains interactive elements which violates WCAG 1.4.13. ' +
+                    'Tooltips should only contain plain text. Use Popover for interactive content.');
+            }
+        }
+    }, [open, refs.floating, children]);
+    if (!open)
+        return null;
+    return (_jsx(FloatingPortal, { root: portalRoot, children: _jsx("div", { ref: refs.setFloating, id: contentId, role: "tooltip", className: cx('tui-tooltip', className), style: floatingStyles, children: children }) }));
+}
+export const Tooltip = TooltipRoot;
+Tooltip.Provider = TooltipProviderComponent;
+Tooltip.Trigger = TooltipTriggerComponent;
+Tooltip.Content = TooltipContentComponent;
+// Named exports for direct imports
+export const TooltipProvider = TooltipProviderComponent;
+export const TooltipTrigger = TooltipTriggerComponent;
+export const TooltipContent = TooltipContentComponent;

package/components/Tooltip/TooltipContext.d.ts

@@ -0,0 +1,15 @@
+import type { TooltipContextValue } from './types';
+/**
+ * Context for Tooltip compound components.
+ */
+export declare const TooltipContext: import("react").Context<TooltipContextValue | null>;
+/**
+ * Hook to access tooltip context. Throws if used outside Tooltip.
+ */
+export declare function useTooltipContext(): TooltipContextValue;
+export type TooltipProviderContextValue = {
+    delayDuration: number;
+    closeDelayDuration: number;
+};
+export declare const TooltipProviderContext: import("react").Context<TooltipProviderContextValue>;
+export declare function useTooltipProviderContext(): TooltipProviderContextValue;

package/components/Tooltip/TooltipContext.js

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react';
+// =============================================================================
+// Tooltip Context
+// =============================================================================
+/**
+ * Context for Tooltip compound components.
+ */
+export const TooltipContext = createContext(null);
+/**
+ * Hook to access tooltip context. Throws if used outside Tooltip.
+ */
+export function useTooltipContext() {
+    const context = useContext(TooltipContext);
+    if (!context) {
+        throw new Error('Tooltip compound components must be used within <Tooltip>');
+    }
+    return context;
+}
+export const TooltipProviderContext = createContext({
+    delayDuration: 400,
+    closeDelayDuration: 0,
+});
+export function useTooltipProviderContext() {
+    return useContext(TooltipProviderContext);
+}

package/components/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from './Tooltip';
+export type { TooltipProviderProps, TooltipProps, TooltipTriggerProps, TooltipContentProps, Side, Align, } from './types';

package/components/Tooltip/index.js

@@ -0,0 +1 @@
+export { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from './Tooltip.js';

package/components/Tooltip/types.d.ts

@@ -0,0 +1,85 @@
+import type { Placement } from '@floating-ui/react';
+/**
+ * Tooltip placement sides.
+ */
+export type Side = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Tooltip alignment relative to trigger.
+ */
+export type Align = 'start' | 'center' | 'end';
+export type TooltipProviderProps = {
+    /**
+     * Delay in ms before tooltip opens on hover.
+     * @default 400
+     */
+    delayDuration?: number;
+    /**
+     * Delay in ms before tooltip closes after pointer leaves.
+     * @default 0
+     */
+    closeDelayDuration?: number;
+    children: React.ReactNode;
+};
+export type TooltipProps = {
+    /**
+     * Controlled open state.
+     */
+    open?: boolean;
+    /**
+     * Callback when open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Default open state for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Override provider's delay for this tooltip.
+     */
+    delayDuration?: number;
+    children: React.ReactNode;
+};
+export type TooltipTriggerProps = {
+    /**
+     * When true, merges props onto the child element instead of wrapping in a span.
+     * Child must be a single React element that accepts ref and event handlers.
+     * @default false
+     */
+    asChild?: boolean;
+    children: React.ReactNode;
+};
+export type TooltipContentProps = {
+    /**
+     * Preferred side of the trigger to place the tooltip.
+     * @default 'top'
+     */
+    side?: Side;
+    /**
+     * Alignment along the side.
+     * @default 'center'
+     */
+    align?: Align;
+    /**
+     * Distance from the trigger in pixels.
+     * @default 8
+     */
+    sideOffset?: number;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    children: React.ReactNode;
+};
+export type TooltipContextValue = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    triggerRef: React.RefObject<HTMLElement | null>;
+    contentId: string;
+    delayDuration: number;
+    closeDelayDuration: number;
+};
+/**
+ * Convert side + align to Floating UI placement.
+ */
+export declare function toPlacement(side: Side, align: Align): Placement;

package/components/Tooltip/types.js

@@ -0,0 +1,8 @@
+/**
+ * Convert side + align to Floating UI placement.
+ */
+export function toPlacement(side, align) {
+    if (align === 'center')
+        return side;
+    return `${side}-${align}`;
+}

package/components/index.d.ts

@@ -0,0 +1,52 @@
+export type { Size, SizeExtended, SizeCompact, SizeStandard } from '../types';
+export type { Theme, ThemeIntent, ThemeStatus } from '../types';
+export type { IconName } from '../icons/registry';
+export { Accordion } from './Accordion';
+export { Avatar, AvatarGroup } from './Avatar';
+export { Button } from './Button';
+export { Card } from './Card';
+export { Chip } from './Chip';
+export { Chips } from './Chips';
+export { ContentIndicator } from './ContentIndicator';
+export { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, useDropdown } from './Dropdown';
+export { Icon } from './Icon';
+export { IconButton } from './IconButton';
+export { Modal } from './Modal';
+export { Notice } from './Notice';
+export { OverlapStack } from './OverlapStack';
+export { Pager } from './Pager';
+export { Progress } from './Progress';
+export { Rating } from './Rating';
+export { SegmentedControl } from './SegmentedControl';
+export { Sidebar } from './Sidebar';
+export { StepIndicator } from './StepIndicator';
+export { StepList } from './StepList';
+export { DataTable } from './Table';
+export { Tabs } from './Tabs';
+export { Toolbar } from './Toolbar';
+export { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from './Tooltip';
+export type { AccordionProps, AccordionSingleProps, AccordionMultipleProps, AccordionItemProps, AccordionTriggerProps, AccordionPanelProps, } from './Accordion';
+export type { AvatarProps, AvatarGroupProps, AvatarSize, AvatarShape, AvatarColor, IndicatorPosition, } from './Avatar';
+export { AVATAR_COLORS } from './Avatar';
+export type { ButtonProps } from './Button';
+export type { CardRootProps } from './Card';
+export type { ChipProps } from './Chip';
+export type { ChipsProps, ChipOption } from './Chips';
+export type { ContentIndicatorProps } from './ContentIndicator';
+export type { DropdownProps, DropdownTriggerProps, DropdownContentProps, DropdownItemProps, } from './Dropdown';
+export type { IconProps } from './Icon';
+export type { IconButtonProps } from './IconButton';
+export type { ModalProps } from './Modal';
+export type { NoticeProps } from './Notice';
+export type { OverlapStackProps, OverlapStackOverflowProps } from './OverlapStack';
+export type { PagerProps, PagerMode } from './Pager';
+export type { ProgressProps } from './Progress';
+export type { RatingProps } from './Rating';
+export type { SegmentedControlProps, SegmentedControlItemProps, SegmentedControlValue, SegmentedControlVariant, SegmentedControlSize, SegmentedControlOrientation, } from './SegmentedControl';
+export type { SidebarProps, SidebarHeaderProps, SidebarNavProps } from './Sidebar';
+export type { StepIndicatorProps, StepStatus } from './StepIndicator';
+export type { StepListProps, StepListItemProps } from './StepList';
+export type { DataTableProps } from './Table';
+export type { TabsProps, TabsListProps, TabProps, TabPanelProps, TabsVariant, TabsActivationMode, TabsOrientation, } from './Tabs';
+export type { ToolbarProps, ToolbarGroupProps, ToolbarItemProps, ToolbarOrientation } from './Toolbar';
+export type { TooltipProps, TooltipProviderProps, TooltipTriggerProps, TooltipContentProps } from './Tooltip';

package/components/index.js

@@ -0,0 +1,26 @@
+// Components
+export { Accordion } from './Accordion/index.js';
+export { Avatar, AvatarGroup } from './Avatar/index.js';
+export { Button } from './Button/index.js';
+export { Card } from './Card/index.js';
+export { Chip } from './Chip/index.js';
+export { Chips } from './Chips/index.js';
+export { ContentIndicator } from './ContentIndicator/index.js';
+export { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, useDropdown } from './Dropdown/index.js';
+export { Icon } from './Icon/index.js';
+export { IconButton } from './IconButton/index.js';
+export { Modal } from './Modal/index.js';
+export { Notice } from './Notice/index.js';
+export { OverlapStack } from './OverlapStack/index.js';
+export { Pager } from './Pager/index.js';
+export { Progress } from './Progress/index.js';
+export { Rating } from './Rating/index.js';
+export { SegmentedControl } from './SegmentedControl/index.js';
+export { Sidebar } from './Sidebar/index.js';
+export { StepIndicator } from './StepIndicator/index.js';
+export { StepList } from './StepList/index.js';
+export { DataTable } from './Table/index.js';
+export { Tabs } from './Tabs/index.js';
+export { Toolbar } from './Toolbar/index.js';
+export { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from './Tooltip/index.js';
+export { AVATAR_COLORS } from './Avatar/index.js';

package/constants.d.ts

@@ -0,0 +1,16 @@
+/**
+ * TUI Constants
+ *
+ * Single source of truth for TS/TSX code.
+ *
+ * IMPORTANT: SCSS has its own constants in `src/styles/system/_constants.scss`.
+ * These must stay in sync manually. If you change PREFIX here, update $prefix there.
+ */
+/** CSS class prefix (without trailing hyphen for composition) */
+export declare const PREFIX = "tui";
+/** Main wrapper class that scopes TUI styles */
+export declare const INTERFACE_CLASS = "tui-interface";
+/** CSS selector for interface wrapper */
+export declare const INTERFACE_SELECTOR = ".tui-interface";
+/** CSS container query name */
+export declare const CONTAINER_NAME = "tuiContainer";

package/constants.js

@@ -0,0 +1,16 @@
+/**
+ * TUI Constants
+ *
+ * Single source of truth for TS/TSX code.
+ *
+ * IMPORTANT: SCSS has its own constants in `src/styles/system/_constants.scss`.
+ * These must stay in sync manually. If you change PREFIX here, update $prefix there.
+ */
+/** CSS class prefix (without trailing hyphen for composition) */
+export const PREFIX = 'tui';
+/** Main wrapper class that scopes TUI styles */
+export const INTERFACE_CLASS = `${PREFIX}-interface`;
+/** CSS selector for interface wrapper */
+export const INTERFACE_SELECTOR = `.${INTERFACE_CLASS}`;
+/** CSS container query name */
+export const CONTAINER_NAME = `${PREFIX}Container`;

package/icons/cred/index.d.ts

@@ -0,0 +1,31 @@
+import type { FC, SVGProps } from 'react';
+
+type IconComponent = FC<SVGProps<SVGSVGElement>>;
+
+export declare const BadgeCheck: IconComponent;
+export declare const BadgeRibbon: IconComponent;
+export declare const Badge: IconComponent;
+export declare const CheckCircle: IconComponent;
+export declare const Clock: IconComponent;
+export declare const Coin: IconComponent;
+export declare const Crown: IconComponent;
+export declare const Heart: IconComponent;
+export declare const Hourglass: IconComponent;
+export declare const Star: IconComponent;
+export declare const Timer: IconComponent;
+export declare const Trophy: IconComponent;
+
+export declare const credIcons: {
+  'badge-check': IconComponent;
+  'badge-ribbon': IconComponent;
+  'badge': IconComponent;
+  'check-circle': IconComponent;
+  'clock': IconComponent;
+  'coin': IconComponent;
+  'crown': IconComponent;
+  'heart': IconComponent;
+  'hourglass': IconComponent;
+  'star': IconComponent;
+  'timer': IconComponent;
+  'trophy': IconComponent;
+};

package/icons/cred/index.js

@@ -0,0 +1,136 @@
+import { createElement as _c } from "react";
+
+export function BadgeCheck(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {fillRule:"evenodd",d:"M10.893 4.558a1.377 1.377 0 0 1 2.214 0c.381.515 1.068.7 1.656.444a1.377 1.377 0 0 1 1.917 1.106c.072.637.575 1.14 1.212 1.213a1.377 1.377 0 0 1 1.106 1.916 1.38 1.38 0 0 0 .444 1.656c.744.55.744 1.663 0 2.214a1.38 1.38 0 0 0-.444 1.656 1.377 1.377 0 0 1-1.106 1.917 1.38 1.38 0 0 0-1.212 1.212 1.377 1.377 0 0 1-1.917 1.106 1.38 1.38 0 0 0-1.656.444 1.377 1.377 0 0 1-2.214 0 1.38 1.38 0 0 0-1.656-.444 1.377 1.377 0 0 1-1.916-1.106 1.38 1.38 0 0 0-1.213-1.212 1.377 1.377 0 0 1-1.106-1.917 1.38 1.38 0 0 0-.444-1.656 1.377 1.377 0 0 1 0-2.214c.515-.381.7-1.068.444-1.656a1.377 1.377 0 0 1 1.106-1.916 1.38 1.38 0 0 0 1.213-1.213 1.377 1.377 0 0 1 1.916-1.106 1.38 1.38 0 0 0 1.656-.444m5.193 5.91a.75.75 0 0 0-1.172-.936l-3.531 4.414-1.914-1.532a.75.75 0 1 0-.937 1.172l3.085 2.468z",clipRule:"evenodd"}));
+}
+
+export function BadgeRibbon(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M11.032 3.488a1.205 1.205 0 0 1 1.936 0c.334.451.935.612 1.45.388a1.205 1.205 0 0 1 1.677.969c.063.557.503.997 1.06 1.06.805.092 1.291.935.969 1.678a1.204 1.204 0 0 0 .388 1.449c.65.481.65 1.455 0 1.936a1.205 1.205 0 0 0-.388 1.45 1.205 1.205 0 0 1-.969 1.677 1.204 1.204 0 0 0-1.06 1.06 1.205 1.205 0 0 1-1.678.969 1.205 1.205 0 0 0-1.449.388c-.481.65-1.455.65-1.936 0a1.204 1.204 0 0 0-1.45-.388 1.205 1.205 0 0 1-1.677-.969 1.205 1.205 0 0 0-1.06-1.06 1.205 1.205 0 0 1-.969-1.678 1.205 1.205 0 0 0-.388-1.449 1.205 1.205 0 0 1 0-1.936c.451-.334.612-.935.388-1.45a1.205 1.205 0 0 1 .969-1.677 1.205 1.205 0 0 0 1.06-1.06 1.205 1.205 0 0 1 1.678-.969 1.205 1.205 0 0 0 1.449-.388M8 17.482c.442.175.953.185 1.437-.025a.88.88 0 0 1 1.054.282 1.877 1.877 0 0 0 3.018 0 .88.88 0 0 1 1.054-.282c.484.21.995.2 1.437.025V21l-4-2.286L8 21z"}));
+}
+
+export function Badge(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M13.107 4.558a1.377 1.377 0 0 0-2.214 0c-.381.515-1.068.7-1.656.444a1.377 1.377 0 0 0-1.916 1.106 1.38 1.38 0 0 1-1.213 1.213 1.377 1.377 0 0 0-1.106 1.916 1.38 1.38 0 0 1-.444 1.656 1.377 1.377 0 0 0 0 2.214c.515.381.7 1.068.444 1.656a1.377 1.377 0 0 0 1.106 1.917c.637.072 1.14.575 1.213 1.212a1.377 1.377 0 0 0 1.916 1.106 1.38 1.38 0 0 1 1.656.444c.55.744 1.663.744 2.214 0a1.38 1.38 0 0 1 1.656-.444 1.377 1.377 0 0 0 1.917-1.106 1.38 1.38 0 0 1 1.212-1.212 1.377 1.377 0 0 0 1.106-1.917 1.38 1.38 0 0 1 .444-1.656 1.377 1.377 0 0 0 0-2.214 1.38 1.38 0 0 1-.444-1.656 1.377 1.377 0 0 0-1.106-1.916 1.38 1.38 0 0 1-1.212-1.213 1.377 1.377 0 0 0-1.917-1.106 1.38 1.38 0 0 1-1.656-.444"}));
+}
+
+export function CheckCircle(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {fillRule:"evenodd",d:"M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16m4.086-10.531a.75.75 0 0 0-1.172-.937l-3.531 4.414-1.914-1.532a.75.75 0 1 0-.937 1.172l3.085 2.468z",clipRule:"evenodd"}));
+}
+
+export function Clock(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {fillRule:"evenodd",d:"M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16m0-13.75a.75.75 0 0 1 .75.75v4.599l2.666 1.777a.75.75 0 1 1-.832 1.248l-2.99-1.994-.055-.039a.75.75 0 0 1-.289-.603V7a.75.75 0 0 1 .75-.75",clipRule:"evenodd"}));
+}
+
+export function Coin(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {fillRule:"evenodd",d:"M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16m.686-11.859V7h-.954v1.127a3.5 3.5 0 0 0-1.052.246q-.634.258-.99.736a1.83 1.83 0 0 0-.352 1.12q0 .675.327 1.116.331.442.929.742a9.6 9.6 0 0 0 1.39.542q.511.157.813.331.307.174.437.395.135.22.135.52 0 .295-.147.526a.93.93 0 0 1-.431.353q-.283.126-.714.126-.264 0-.523-.063a1.3 1.3 0 0 1-.468-.216 1.1 1.1 0 0 1-.332-.42 1.6 1.6 0 0 1-.123-.663H9q0 .694.265 1.173.264.473.707.762.45.285.997.41.324.076.652.106V17h.948v-1.031a4 4 0 0 0 1.04-.226q.66-.248 1.022-.72.369-.474.369-1.158 0-.669-.326-1.105t-.917-.736a9 9 0 0 0-1.39-.558 5 5 0 0 1-.844-.352q-.3-.174-.43-.384a1 1 0 0 1-.124-.5q0-.295.117-.52.124-.227.382-.359.264-.13.67-.131.284 0 .505.09.228.088.388.268.159.172.246.426.086.251.086.578h1.625q0-.589-.203-1.046a2.05 2.05 0 0 0-.573-.779 2.5 2.5 0 0 0-.892-.479 3.4 3.4 0 0 0-.634-.137",clipRule:"evenodd"}));
+}
+
+export function Crown(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M8 10 4 6l1 9h14l1-9-4 4-4-6zm11 10v-3H5v3z"}));
+}
+
+export function Heart(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M5.206 5.396c-1.608 1.861-1.608 4.88 0 6.74L12 20l6.794-7.864c1.608-1.86 1.608-4.879 0-6.74s-4.215-1.861-5.823 0L12 6.52l-.97-1.124c-1.609-1.861-4.216-1.861-5.824 0"}));
+}
+
+export function Hourglass(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {fillRule:"evenodd",d:"M7 6v.536A6 6 0 0 0 10.52 12 6 6 0 0 0 7 17.464V18H5v2h14v-2h-2v-.536A6 6 0 0 0 13.48 12 6 6 0 0 0 17 6.536V6h2V4H5v2zm8.5 0v.536c0 .898-.267 1.749-.735 2.464h-5.53A4.5 4.5 0 0 1 8.5 6.536V6z",clipRule:"evenodd"}));
+}
+
+export function Star(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {d:"M10.907 4.67a1.228 1.228 0 0 1 2.186 0l1.567 3.07c.178.349.513.592.9.654l3.404.54a1.228 1.228 0 0 1 .676 2.08l-2.436 2.439a1.23 1.23 0 0 0-.344 1.059l.537 3.404c.157.99-.875 1.74-1.769 1.285l-3.071-1.562a1.23 1.23 0 0 0-1.114 0L8.372 19.2a1.228 1.228 0 0 1-1.77-1.285l.538-3.404a1.23 1.23 0 0 0-.344-1.059L4.36 11.015a1.228 1.228 0 0 1 .676-2.08l3.404-.541c.387-.062.722-.305.9-.655z"}));
+}
+
+export function Timer(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {fillRule:"evenodd",d:"M12.5 2a.5.5 0 0 1 .5.5v1.53a7.95 7.95 0 0 1 3.447 1.288l.679-.766a.5.5 0 0 1 .706-.042l.748.664a.5.5 0 0 1 .042.705l-.665.75A8 8 0 1 1 6.055 6.61l-.68-.765a.5.5 0 0 1 .043-.706l.748-.663a.5.5 0 0 1 .706.042l.696.786A7.95 7.95 0 0 1 11 4.028V2.5a.5.5 0 0 1 .5-.5zm3.677 6.991c.254-.254-.068-.647-.368-.45-1.724 1.139-3.84 2.544-4.269 2.866a.75.75 0 1 0 .9 1.2c.432-.323 2.263-2.137 3.737-3.616",clipRule:"evenodd"}));
+}
+
+export function Trophy(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), _c("path", {fillRule:"evenodd",d:"M7 4h10v2.25h3.75V9a4.75 4.75 0 0 1-4.571 4.747A5 5 0 0 1 13 15.9v.6a1.5 1.5 0 0 0 1.5 1.5H16v2H8v-2h1.5a1.5 1.5 0 0 0 1.5-1.5v-.6a5 5 0 0 1-3.179-2.153A4.75 4.75 0 0 1 3.25 9V6.25H7zm0 3.75H4.75V9a3.25 3.25 0 0 0 2.379 3.132A5 5 0 0 1 7 11zM17 11V7.75h2.25V9a3.25 3.25 0 0 1-2.379 3.132Q17 11.585 17 11",clipRule:"evenodd"}));
+}
+
+export const credIcons = {
+  'badge-check': BadgeCheck,
+  'badge-ribbon': BadgeRibbon,
+  'badge': Badge,
+  'check-circle': CheckCircle,
+  'clock': Clock,
+  'coin': Coin,
+  'crown': Crown,
+  'heart': Heart,
+  'hourglass': Hourglass,
+  'star': Star,
+  'timer': Timer,
+  'trophy': Trophy,
+};