dash-ui-kit
Version:
Dash UI Kit for React js
1,352 lines (1,335 loc) • 391 kB
JavaScript
"use client";
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import * as React from 'react';
import React__default, { useState, useEffect, createContext, useContext, useRef, useLayoutEffect, useMemo, useCallback } from 'react';
import * as ReactDOM from 'react-dom';
import ReactDOM__default from 'react-dom';
import { cva } from 'class-variance-authority';
import { __rest, __assign, __spreadArray } from 'tslib';
// packages/react/context/src/create-context.tsx
function createContext2(rootComponentName, defaultContext) {
const Context = React.createContext(defaultContext);
const Provider = (props) => {
const { children, ...context } = props;
const value = React.useMemo(() => context, Object.values(context));
return /* @__PURE__ */ jsx(Context.Provider, { value, children });
};
Provider.displayName = rootComponentName + "Provider";
function useContext2(consumerName) {
const context = React.useContext(Context);
if (context) return context;
if (defaultContext !== void 0) return defaultContext;
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
}
return [Provider, useContext2];
}
function createContextScope(scopeName, createContextScopeDeps = []) {
let defaultContexts = [];
function createContext3(rootComponentName, defaultContext) {
const BaseContext = React.createContext(defaultContext);
const index = defaultContexts.length;
defaultContexts = [...defaultContexts, defaultContext];
const Provider = (props) => {
const { scope, children, ...context } = props;
const Context = scope?.[scopeName]?.[index] || BaseContext;
const value = React.useMemo(() => context, Object.values(context));
return /* @__PURE__ */ jsx(Context.Provider, { value, children });
};
Provider.displayName = rootComponentName + "Provider";
function useContext2(consumerName, scope) {
const Context = scope?.[scopeName]?.[index] || BaseContext;
const context = React.useContext(Context);
if (context) return context;
if (defaultContext !== void 0) return defaultContext;
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
}
return [Provider, useContext2];
}
const createScope = () => {
const scopeContexts = defaultContexts.map((defaultContext) => {
return React.createContext(defaultContext);
});
return function useScope(scope) {
const contexts = scope?.[scopeName] || scopeContexts;
return React.useMemo(
() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
[scope, contexts]
);
};
};
createScope.scopeName = scopeName;
return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)];
}
function composeContextScopes(...scopes) {
const baseScope = scopes[0];
if (scopes.length === 1) return baseScope;
const createScope = () => {
const scopeHooks = scopes.map((createScope2) => ({
useScope: createScope2(),
scopeName: createScope2.scopeName
}));
return function useComposedScopes(overrideScopes) {
const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
const scopeProps = useScope(overrideScopes);
const currentScope = scopeProps[`__scope${scopeName}`];
return { ...nextScopes2, ...currentScope };
}, {});
return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
};
};
createScope.scopeName = baseScope.scopeName;
return createScope;
}
// packages/react/compose-refs/src/compose-refs.tsx
function setRef(ref, value) {
if (typeof ref === "function") {
return ref(value);
} else if (ref !== null && ref !== void 0) {
ref.current = value;
}
}
function composeRefs(...refs) {
return (node) => {
let hasCleanup = false;
const cleanups = refs.map((ref) => {
const cleanup = setRef(ref, node);
if (!hasCleanup && typeof cleanup == "function") {
hasCleanup = true;
}
return cleanup;
});
if (hasCleanup) {
return () => {
for (let i = 0; i < cleanups.length; i++) {
const cleanup = cleanups[i];
if (typeof cleanup == "function") {
cleanup();
} else {
setRef(refs[i], null);
}
}
};
}
};
}
function useComposedRefs(...refs) {
return React.useCallback(composeRefs(...refs), refs);
}
// src/slot.tsx
// @__NO_SIDE_EFFECTS__
function createSlot(ownerName) {
const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
const Slot2 = React.forwardRef((props, forwardedRef) => {
const { children, ...slotProps } = props;
const childrenArray = React.Children.toArray(children);
const slottable = childrenArray.find(isSlottable);
if (slottable) {
const newElement = slottable.props.children;
const newChildren = childrenArray.map((child) => {
if (child === slottable) {
if (React.Children.count(newElement) > 1) return React.Children.only(null);
return React.isValidElement(newElement) ? newElement.props.children : null;
} else {
return child;
}
});
return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
}
return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
});
Slot2.displayName = `${ownerName}.Slot`;
return Slot2;
}
// @__NO_SIDE_EFFECTS__
function createSlotClone(ownerName) {
const SlotClone = React.forwardRef((props, forwardedRef) => {
const { children, ...slotProps } = props;
if (React.isValidElement(children)) {
const childrenRef = getElementRef$2(children);
const props2 = mergeProps(slotProps, children.props);
if (children.type !== React.Fragment) {
props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
}
return React.cloneElement(children, props2);
}
return React.Children.count(children) > 1 ? React.Children.only(null) : null;
});
SlotClone.displayName = `${ownerName}.SlotClone`;
return SlotClone;
}
var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
function isSlottable(child) {
return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
}
function mergeProps(slotProps, childProps) {
const overrideProps = { ...childProps };
for (const propName in childProps) {
const slotPropValue = slotProps[propName];
const childPropValue = childProps[propName];
const isHandler = /^on[A-Z]/.test(propName);
if (isHandler) {
if (slotPropValue && childPropValue) {
overrideProps[propName] = (...args) => {
const result = childPropValue(...args);
slotPropValue(...args);
return result;
};
} else if (slotPropValue) {
overrideProps[propName] = slotPropValue;
}
} else if (propName === "style") {
overrideProps[propName] = { ...slotPropValue, ...childPropValue };
} else if (propName === "className") {
overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
}
}
return { ...slotProps, ...overrideProps };
}
function getElementRef$2(element) {
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
if (mayWarn) {
return element.ref;
}
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
if (mayWarn) {
return element.props.ref;
}
return element.props.ref || element.ref;
}
function createCollection(name) {
const PROVIDER_NAME = name + "CollectionProvider";
const [createCollectionContext, createCollectionScope] = createContextScope(PROVIDER_NAME);
const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(
PROVIDER_NAME,
{ collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
);
const CollectionProvider = (props) => {
const { scope, children } = props;
const ref = React__default.useRef(null);
const itemMap = React__default.useRef(/* @__PURE__ */ new Map()).current;
return /* @__PURE__ */ jsx(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
};
CollectionProvider.displayName = PROVIDER_NAME;
const COLLECTION_SLOT_NAME = name + "CollectionSlot";
const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
const CollectionSlot = React__default.forwardRef(
(props, forwardedRef) => {
const { scope, children } = props;
const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
return /* @__PURE__ */ jsx(CollectionSlotImpl, { ref: composedRefs, children });
}
);
CollectionSlot.displayName = COLLECTION_SLOT_NAME;
const ITEM_SLOT_NAME = name + "CollectionItemSlot";
const ITEM_DATA_ATTR = "data-radix-collection-item";
const CollectionItemSlotImpl = createSlot(ITEM_SLOT_NAME);
const CollectionItemSlot = React__default.forwardRef(
(props, forwardedRef) => {
const { scope, children, ...itemData } = props;
const ref = React__default.useRef(null);
const composedRefs = useComposedRefs(forwardedRef, ref);
const context = useCollectionContext(ITEM_SLOT_NAME, scope);
React__default.useEffect(() => {
context.itemMap.set(ref, { ref, ...itemData });
return () => void context.itemMap.delete(ref);
});
return /* @__PURE__ */ jsx(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
}
);
CollectionItemSlot.displayName = ITEM_SLOT_NAME;
function useCollection(scope) {
const context = useCollectionContext(name + "CollectionConsumer", scope);
const getItems = React__default.useCallback(() => {
const collectionNode = context.collectionRef.current;
if (!collectionNode) return [];
const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
const items = Array.from(context.itemMap.values());
const orderedItems = items.sort(
(a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
);
return orderedItems;
}, [context.collectionRef, context.itemMap]);
return getItems;
}
return [
{ Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
useCollection,
createCollectionScope
];
}
// src/primitive.tsx
function composeEventHandlers$1(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
return function handleEvent(event) {
originalEventHandler?.(event);
if (checkForDefaultPrevented === false || !event.defaultPrevented) {
return ourEventHandler?.(event);
}
};
}
// packages/react/use-layout-effect/src/use-layout-effect.tsx
var useLayoutEffect2 = globalThis?.document ? React.useLayoutEffect : () => {
};
// src/use-controllable-state.tsx
var useInsertionEffect = React[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
function useControllableState({
prop,
defaultProp,
onChange = () => {
},
caller
}) {
const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
defaultProp,
onChange
});
const isControlled = prop !== void 0;
const value = isControlled ? prop : uncontrolledProp;
{
const isControlledRef = React.useRef(prop !== void 0);
React.useEffect(() => {
const wasControlled = isControlledRef.current;
if (wasControlled !== isControlled) {
const from = wasControlled ? "controlled" : "uncontrolled";
const to = isControlled ? "controlled" : "uncontrolled";
console.warn(
`${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
);
}
isControlledRef.current = isControlled;
}, [isControlled, caller]);
}
const setValue = React.useCallback(
(nextValue) => {
if (isControlled) {
const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
if (value2 !== prop) {
onChangeRef.current?.(value2);
}
} else {
setUncontrolledProp(nextValue);
}
},
[isControlled, prop, setUncontrolledProp, onChangeRef]
);
return [value, setValue];
}
function useUncontrolledState({
defaultProp,
onChange
}) {
const [value, setValue] = React.useState(defaultProp);
const prevValueRef = React.useRef(value);
const onChangeRef = React.useRef(onChange);
useInsertionEffect(() => {
onChangeRef.current = onChange;
}, [onChange]);
React.useEffect(() => {
if (prevValueRef.current !== value) {
onChangeRef.current?.(value);
prevValueRef.current = value;
}
}, [value, prevValueRef]);
return [value, setValue, onChangeRef];
}
function isFunction(value) {
return typeof value === "function";
}
// src/primitive.tsx
var NODES = [
"a",
"button",
"div",
"form",
"h2",
"h3",
"img",
"input",
"label",
"li",
"nav",
"ol",
"p",
"select",
"span",
"svg",
"ul"
];
var Primitive = NODES.reduce((primitive, node) => {
const Slot = createSlot(`Primitive.${node}`);
const Node = React.forwardRef((props, forwardedRef) => {
const { asChild, ...primitiveProps } = props;
const Comp = asChild ? Slot : node;
if (typeof window !== "undefined") {
window[Symbol.for("radix-ui")] = true;
}
return /* @__PURE__ */ jsx(Comp, { ...primitiveProps, ref: forwardedRef });
});
Node.displayName = `Primitive.${node}`;
return { ...primitive, [node]: Node };
}, {});
function dispatchDiscreteCustomEvent(target, event) {
if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));
}
function useStateMachine$1(initialState, machine) {
return React.useReducer((state, event) => {
const nextState = machine[state][event];
return nextState ?? state;
}, initialState);
}
// src/presence.tsx
var Presence$1 = (props) => {
const { present, children } = props;
const presence = usePresence$1(present);
const child = typeof children === "function" ? children({ present: presence.isPresent }) : React.Children.only(children);
const ref = useComposedRefs(presence.ref, getElementRef$1(child));
const forceMount = typeof children === "function";
return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;
};
Presence$1.displayName = "Presence";
function usePresence$1(present) {
const [node, setNode] = React.useState();
const stylesRef = React.useRef(null);
const prevPresentRef = React.useRef(present);
const prevAnimationNameRef = React.useRef("none");
const initialState = present ? "mounted" : "unmounted";
const [state, send] = useStateMachine$1(initialState, {
mounted: {
UNMOUNT: "unmounted",
ANIMATION_OUT: "unmountSuspended"
},
unmountSuspended: {
MOUNT: "mounted",
ANIMATION_END: "unmounted"
},
unmounted: {
MOUNT: "mounted"
}
});
React.useEffect(() => {
const currentAnimationName = getAnimationName$1(stylesRef.current);
prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
}, [state]);
useLayoutEffect2(() => {
const styles = stylesRef.current;
const wasPresent = prevPresentRef.current;
const hasPresentChanged = wasPresent !== present;
if (hasPresentChanged) {
const prevAnimationName = prevAnimationNameRef.current;
const currentAnimationName = getAnimationName$1(styles);
if (present) {
send("MOUNT");
} else if (currentAnimationName === "none" || styles?.display === "none") {
send("UNMOUNT");
} else {
const isAnimating = prevAnimationName !== currentAnimationName;
if (wasPresent && isAnimating) {
send("ANIMATION_OUT");
} else {
send("UNMOUNT");
}
}
prevPresentRef.current = present;
}
}, [present, send]);
useLayoutEffect2(() => {
if (node) {
let timeoutId;
const ownerWindow = node.ownerDocument.defaultView ?? window;
const handleAnimationEnd = (event) => {
const currentAnimationName = getAnimationName$1(stylesRef.current);
const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
if (event.target === node && isCurrentAnimation) {
send("ANIMATION_END");
if (!prevPresentRef.current) {
const currentFillMode = node.style.animationFillMode;
node.style.animationFillMode = "forwards";
timeoutId = ownerWindow.setTimeout(() => {
if (node.style.animationFillMode === "forwards") {
node.style.animationFillMode = currentFillMode;
}
});
}
}
};
const handleAnimationStart = (event) => {
if (event.target === node) {
prevAnimationNameRef.current = getAnimationName$1(stylesRef.current);
}
};
node.addEventListener("animationstart", handleAnimationStart);
node.addEventListener("animationcancel", handleAnimationEnd);
node.addEventListener("animationend", handleAnimationEnd);
return () => {
ownerWindow.clearTimeout(timeoutId);
node.removeEventListener("animationstart", handleAnimationStart);
node.removeEventListener("animationcancel", handleAnimationEnd);
node.removeEventListener("animationend", handleAnimationEnd);
};
} else {
send("ANIMATION_END");
}
}, [node, send]);
return {
isPresent: ["mounted", "unmountSuspended"].includes(state),
ref: React.useCallback((node2) => {
stylesRef.current = node2 ? getComputedStyle(node2) : null;
setNode(node2);
}, [])
};
}
function getAnimationName$1(styles) {
return styles?.animationName || "none";
}
function getElementRef$1(element) {
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
if (mayWarn) {
return element.ref;
}
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
if (mayWarn) {
return element.props.ref;
}
return element.props.ref || element.ref;
}
// packages/react/id/src/id.tsx
var useReactId = React[" useId ".trim().toString()] || (() => void 0);
var count$1 = 0;
function useId(deterministicId) {
const [id, setId] = React.useState(useReactId());
useLayoutEffect2(() => {
setId((reactId) => reactId ?? String(count$1++));
}, [deterministicId]);
return (id ? `radix-${id}` : "");
}
var COLLAPSIBLE_NAME = "Collapsible";
var [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);
var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
var Collapsible = React.forwardRef(
(props, forwardedRef) => {
const {
__scopeCollapsible,
open: openProp,
defaultOpen,
disabled,
onOpenChange,
...collapsibleProps
} = props;
const [open, setOpen] = useControllableState({
prop: openProp,
defaultProp: defaultOpen ?? false,
onChange: onOpenChange,
caller: COLLAPSIBLE_NAME
});
return /* @__PURE__ */ jsx(
CollapsibleProvider,
{
scope: __scopeCollapsible,
disabled,
contentId: useId(),
open,
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
children: /* @__PURE__ */ jsx(
Primitive.div,
{
"data-state": getState$2(open),
"data-disabled": disabled ? "" : void 0,
...collapsibleProps,
ref: forwardedRef
}
)
}
);
}
);
Collapsible.displayName = COLLAPSIBLE_NAME;
var TRIGGER_NAME$4 = "CollapsibleTrigger";
var CollapsibleTrigger = React.forwardRef(
(props, forwardedRef) => {
const { __scopeCollapsible, ...triggerProps } = props;
const context = useCollapsibleContext(TRIGGER_NAME$4, __scopeCollapsible);
return /* @__PURE__ */ jsx(
Primitive.button,
{
type: "button",
"aria-controls": context.contentId,
"aria-expanded": context.open || false,
"data-state": getState$2(context.open),
"data-disabled": context.disabled ? "" : void 0,
disabled: context.disabled,
...triggerProps,
ref: forwardedRef,
onClick: composeEventHandlers$1(props.onClick, context.onOpenToggle)
}
);
}
);
CollapsibleTrigger.displayName = TRIGGER_NAME$4;
var CONTENT_NAME$5 = "CollapsibleContent";
var CollapsibleContent = React.forwardRef(
(props, forwardedRef) => {
const { forceMount, ...contentProps } = props;
const context = useCollapsibleContext(CONTENT_NAME$5, props.__scopeCollapsible);
return /* @__PURE__ */ jsx(Presence$1, { present: forceMount || context.open, children: ({ present }) => /* @__PURE__ */ jsx(CollapsibleContentImpl, { ...contentProps, ref: forwardedRef, present }) });
}
);
CollapsibleContent.displayName = CONTENT_NAME$5;
var CollapsibleContentImpl = React.forwardRef((props, forwardedRef) => {
const { __scopeCollapsible, present, children, ...contentProps } = props;
const context = useCollapsibleContext(CONTENT_NAME$5, __scopeCollapsible);
const [isPresent, setIsPresent] = React.useState(present);
const ref = React.useRef(null);
const composedRefs = useComposedRefs(forwardedRef, ref);
const heightRef = React.useRef(0);
const height = heightRef.current;
const widthRef = React.useRef(0);
const width = widthRef.current;
const isOpen = context.open || isPresent;
const isMountAnimationPreventedRef = React.useRef(isOpen);
const originalStylesRef = React.useRef(void 0);
React.useEffect(() => {
const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
return () => cancelAnimationFrame(rAF);
}, []);
useLayoutEffect2(() => {
const node = ref.current;
if (node) {
originalStylesRef.current = originalStylesRef.current || {
transitionDuration: node.style.transitionDuration,
animationName: node.style.animationName
};
node.style.transitionDuration = "0s";
node.style.animationName = "none";
const rect = node.getBoundingClientRect();
heightRef.current = rect.height;
widthRef.current = rect.width;
if (!isMountAnimationPreventedRef.current) {
node.style.transitionDuration = originalStylesRef.current.transitionDuration;
node.style.animationName = originalStylesRef.current.animationName;
}
setIsPresent(present);
}
}, [context.open, present]);
return /* @__PURE__ */ jsx(
Primitive.div,
{
"data-state": getState$2(context.open),
"data-disabled": context.disabled ? "" : void 0,
id: context.contentId,
hidden: !isOpen,
...contentProps,
ref: composedRefs,
style: {
[`--radix-collapsible-content-height`]: height ? `${height}px` : void 0,
[`--radix-collapsible-content-width`]: width ? `${width}px` : void 0,
...props.style
},
children: isOpen && children
}
);
});
function getState$2(open) {
return open ? "open" : "closed";
}
var Root$3 = Collapsible;
var Trigger$3 = CollapsibleTrigger;
var Content$3 = CollapsibleContent;
// packages/react/direction/src/direction.tsx
var DirectionContext = React.createContext(void 0);
function useDirection(localDir) {
const globalDir = React.useContext(DirectionContext);
return localDir || globalDir || "ltr";
}
var ACCORDION_NAME = "Accordion";
var ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
var [Collection$2, useCollection$2, createCollectionScope$2] = createCollection(ACCORDION_NAME);
var [createAccordionContext, createAccordionScope] = createContextScope(ACCORDION_NAME, [
createCollectionScope$2,
createCollapsibleScope
]);
var useCollapsibleScope = createCollapsibleScope();
var Accordion$1 = React__default.forwardRef(
(props, forwardedRef) => {
const { type, ...accordionProps } = props;
const singleProps = accordionProps;
const multipleProps = accordionProps;
return /* @__PURE__ */ jsx(Collection$2.Provider, { scope: props.__scopeAccordion, children: type === "multiple" ? /* @__PURE__ */ jsx(AccordionImplMultiple, { ...multipleProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(AccordionImplSingle, { ...singleProps, ref: forwardedRef }) });
}
);
Accordion$1.displayName = ACCORDION_NAME;
var [AccordionValueProvider, useAccordionValueContext] = createAccordionContext(ACCORDION_NAME);
var [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(
ACCORDION_NAME,
{ collapsible: false }
);
var AccordionImplSingle = React__default.forwardRef(
(props, forwardedRef) => {
const {
value: valueProp,
defaultValue,
onValueChange = () => {
},
collapsible = false,
...accordionSingleProps
} = props;
const [value, setValue] = useControllableState({
prop: valueProp,
defaultProp: defaultValue ?? "",
onChange: onValueChange,
caller: ACCORDION_NAME
});
return /* @__PURE__ */ jsx(
AccordionValueProvider,
{
scope: props.__scopeAccordion,
value: React__default.useMemo(() => value ? [value] : [], [value]),
onItemOpen: setValue,
onItemClose: React__default.useCallback(() => collapsible && setValue(""), [collapsible, setValue]),
children: /* @__PURE__ */ jsx(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible, children: /* @__PURE__ */ jsx(AccordionImpl, { ...accordionSingleProps, ref: forwardedRef }) })
}
);
}
);
var AccordionImplMultiple = React__default.forwardRef((props, forwardedRef) => {
const {
value: valueProp,
defaultValue,
onValueChange = () => {
},
...accordionMultipleProps
} = props;
const [value, setValue] = useControllableState({
prop: valueProp,
defaultProp: defaultValue ?? [],
onChange: onValueChange,
caller: ACCORDION_NAME
});
const handleItemOpen = React__default.useCallback(
(itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
[setValue]
);
const handleItemClose = React__default.useCallback(
(itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
[setValue]
);
return /* @__PURE__ */ jsx(
AccordionValueProvider,
{
scope: props.__scopeAccordion,
value,
onItemOpen: handleItemOpen,
onItemClose: handleItemClose,
children: /* @__PURE__ */ jsx(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible: true, children: /* @__PURE__ */ jsx(AccordionImpl, { ...accordionMultipleProps, ref: forwardedRef }) })
}
);
});
var [AccordionImplProvider, useAccordionContext] = createAccordionContext(ACCORDION_NAME);
var AccordionImpl = React__default.forwardRef(
(props, forwardedRef) => {
const { __scopeAccordion, disabled, dir, orientation = "vertical", ...accordionProps } = props;
const accordionRef = React__default.useRef(null);
const composedRefs = useComposedRefs(accordionRef, forwardedRef);
const getItems = useCollection$2(__scopeAccordion);
const direction = useDirection(dir);
const isDirectionLTR = direction === "ltr";
const handleKeyDown = composeEventHandlers$1(props.onKeyDown, (event) => {
if (!ACCORDION_KEYS.includes(event.key)) return;
const target = event.target;
const triggerCollection = getItems().filter((item) => !item.ref.current?.disabled);
const triggerIndex = triggerCollection.findIndex((item) => item.ref.current === target);
const triggerCount = triggerCollection.length;
if (triggerIndex === -1) return;
event.preventDefault();
let nextIndex = triggerIndex;
const homeIndex = 0;
const endIndex = triggerCount - 1;
const moveNext = () => {
nextIndex = triggerIndex + 1;
if (nextIndex > endIndex) {
nextIndex = homeIndex;
}
};
const movePrev = () => {
nextIndex = triggerIndex - 1;
if (nextIndex < homeIndex) {
nextIndex = endIndex;
}
};
switch (event.key) {
case "Home":
nextIndex = homeIndex;
break;
case "End":
nextIndex = endIndex;
break;
case "ArrowRight":
if (orientation === "horizontal") {
if (isDirectionLTR) {
moveNext();
} else {
movePrev();
}
}
break;
case "ArrowDown":
if (orientation === "vertical") {
moveNext();
}
break;
case "ArrowLeft":
if (orientation === "horizontal") {
if (isDirectionLTR) {
movePrev();
} else {
moveNext();
}
}
break;
case "ArrowUp":
if (orientation === "vertical") {
movePrev();
}
break;
}
const clampedIndex = nextIndex % triggerCount;
triggerCollection[clampedIndex].ref.current?.focus();
});
return /* @__PURE__ */ jsx(
AccordionImplProvider,
{
scope: __scopeAccordion,
disabled,
direction: dir,
orientation,
children: /* @__PURE__ */ jsx(Collection$2.Slot, { scope: __scopeAccordion, children: /* @__PURE__ */ jsx(
Primitive.div,
{
...accordionProps,
"data-orientation": orientation,
ref: composedRefs,
onKeyDown: disabled ? void 0 : handleKeyDown
}
) })
}
);
}
);
var ITEM_NAME$2 = "AccordionItem";
var [AccordionItemProvider, useAccordionItemContext] = createAccordionContext(ITEM_NAME$2);
var AccordionItem = React__default.forwardRef(
(props, forwardedRef) => {
const { __scopeAccordion, value, ...accordionItemProps } = props;
const accordionContext = useAccordionContext(ITEM_NAME$2, __scopeAccordion);
const valueContext = useAccordionValueContext(ITEM_NAME$2, __scopeAccordion);
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
const triggerId = useId();
const open = value && valueContext.value.includes(value) || false;
const disabled = accordionContext.disabled || props.disabled;
return /* @__PURE__ */ jsx(
AccordionItemProvider,
{
scope: __scopeAccordion,
open,
disabled,
triggerId,
children: /* @__PURE__ */ jsx(
Root$3,
{
"data-orientation": accordionContext.orientation,
"data-state": getState$1(open),
...collapsibleScope,
...accordionItemProps,
ref: forwardedRef,
disabled,
open,
onOpenChange: (open2) => {
if (open2) {
valueContext.onItemOpen(value);
} else {
valueContext.onItemClose(value);
}
}
}
)
}
);
}
);
AccordionItem.displayName = ITEM_NAME$2;
var HEADER_NAME = "AccordionHeader";
var AccordionHeader = React__default.forwardRef(
(props, forwardedRef) => {
const { __scopeAccordion, ...headerProps } = props;
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
const itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion);
return /* @__PURE__ */ jsx(
Primitive.h3,
{
"data-orientation": accordionContext.orientation,
"data-state": getState$1(itemContext.open),
"data-disabled": itemContext.disabled ? "" : void 0,
...headerProps,
ref: forwardedRef
}
);
}
);
AccordionHeader.displayName = HEADER_NAME;
var TRIGGER_NAME$3 = "AccordionTrigger";
var AccordionTrigger = React__default.forwardRef(
(props, forwardedRef) => {
const { __scopeAccordion, ...triggerProps } = props;
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
const itemContext = useAccordionItemContext(TRIGGER_NAME$3, __scopeAccordion);
const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME$3, __scopeAccordion);
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
return /* @__PURE__ */ jsx(Collection$2.ItemSlot, { scope: __scopeAccordion, children: /* @__PURE__ */ jsx(
Trigger$3,
{
"aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
"data-orientation": accordionContext.orientation,
id: itemContext.triggerId,
...collapsibleScope,
...triggerProps,
ref: forwardedRef
}
) });
}
);
AccordionTrigger.displayName = TRIGGER_NAME$3;
var CONTENT_NAME$4 = "AccordionContent";
var AccordionContent = React__default.forwardRef(
(props, forwardedRef) => {
const { __scopeAccordion, ...contentProps } = props;
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
const itemContext = useAccordionItemContext(CONTENT_NAME$4, __scopeAccordion);
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
return /* @__PURE__ */ jsx(
Content$3,
{
role: "region",
"aria-labelledby": itemContext.triggerId,
"data-orientation": accordionContext.orientation,
...collapsibleScope,
...contentProps,
ref: forwardedRef,
style: {
["--radix-accordion-content-height"]: "var(--radix-collapsible-content-height)",
["--radix-accordion-content-width"]: "var(--radix-collapsible-content-width)",
...props.style
}
}
);
}
);
AccordionContent.displayName = CONTENT_NAME$4;
function getState$1(open) {
return open ? "open" : "closed";
}
var Root2$3 = Accordion$1;
var Item$2 = AccordionItem;
var Trigger2 = AccordionTrigger;
var Content2$1 = AccordionContent;
const ThemeContext = /*#__PURE__*/createContext(undefined);
/**
* Provides theme context to its descendants and syncs theme with localStorage
* and the root HTML element's class list ('light' or 'dark').
*
* @param initialTheme - Optional initial theme override.
* @param children - React children.
*/
const ThemeProvider = ({
initialTheme,
children
}) => {
/**
* Retrieve stored theme from localStorage, if available.
*/
const getStoredTheme = () => {
if (typeof window === 'undefined') return null;
const stored = localStorage.getItem('theme');
return stored != null && (stored === 'light' || stored === 'dark') ? stored : null;
};
const [theme, setThemeState] = useState(() => {
var _a;
return (_a = initialTheme !== null && initialTheme !== void 0 ? initialTheme : getStoredTheme()) !== null && _a !== void 0 ? _a : 'light';
});
// Sync theme changes to document <html> class and localStorage.
useEffect(() => {
document.documentElement.classList.toggle('dark', theme === 'dark');
document.documentElement.classList.toggle('light', theme === 'light');
try {
localStorage.setItem('theme', theme);
} catch (_a) {
// Ignore localStorage.
}
}, [theme]);
/**
* Update theme state explicitly.
* @param newTheme - The theme to set ('light' or 'dark').
*/
const setTheme = newTheme => {
setThemeState(newTheme);
};
/**
* Toggle between 'light' and 'dark' theme.
*/
const toggleTheme = () => {
setThemeState(current => current === 'light' ? 'dark' : 'light');
};
return jsx(ThemeContext.Provider, {
value: {
theme,
setTheme,
toggleTheme
},
children: children
});
};
/**
* Hook to access the theme context.
* @returns ThemeContextValue - Contains `theme`, `setTheme`, and `toggleTheme`.
* @throws If used outside of a ThemeProvider.
*/
function useTheme() {
const context = useContext(ThemeContext);
if (context == null) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
}
const ArrowIcon = ({
color = 'white',
size = 14,
className = '',
onClick
}) => {
return jsx("svg", {
width: size,
height: size,
viewBox: '0 0 9 14',
fill: 'none',
xmlns: 'http://www.w3.org/2000/svg',
className: className,
onClick: onClick,
color: color,
children: jsx("path", {
d: 'M7.29297 0.292893C7.68349 -0.0976311 8.31651 -0.0976311 8.70703 0.292893C9.09756 0.683418 9.09756 1.31643 8.70703 1.70696L3.41406 6.99992L8.70703 12.2929L8.77539 12.3691C9.09574 12.7618 9.07315 13.3408 8.70703 13.707C8.34092 14.0731 7.76191 14.0957 7.36914 13.7753L7.29297 13.707L0.585938 6.99992L7.29297 0.292893Z',
fill: 'currentColor'
})
});
};
const CopyIcon = ({
color = 'white',
size = 16,
className = '',
onClick
}) => {
return jsxs("svg", {
width: size,
height: size,
viewBox: '0 0 16 16',
fill: 'none',
xmlns: 'http://www.w3.org/2000/svg',
className: className,
onClick: onClick,
color: color,
children: [jsx("g", {
clipPath: 'url(#clip0_3876_6767)',
children: jsx("g", {
clipPath: 'url(#clip1_3876_6767)',
children: jsx("g", {
clipPath: 'url(#clip2_3876_6767)',
children: jsx("path", {
d: 'M11.4512 10.5645H5.28516V1.75586H9.32335L11.4512 3.88369V10.5645ZM12.332 3.51758L9.68945 0.875H5.28516H4.4043V1.75586V10.5645V11.4453H5.28516H11.4512H12.332V10.5645V3.51758ZM0.880859 4.39844H0V5.2793V14.0879V14.9688H0.880859H7.04688H7.92773V14.0879V12.3262H7.04688V14.0879H0.880859V5.2793H3.52344V4.39844H0.880859Z',
fill: 'currentColor'
})
})
})
}), jsxs("defs", {
children: [jsx("clipPath", {
id: 'clip0_3876_6767',
children: jsx("rect", {
width: '16',
height: '16',
fill: 'white'
})
}), jsx("clipPath", {
id: 'clip1_3876_6767',
children: jsx("rect", {
width: '16',
height: '14.25',
fill: 'white',
transform: 'translate(0 0.875)'
})
}), jsx("clipPath", {
id: 'clip2_3876_6767',
children: jsx("rect", {
width: '12.332',
height: '14.0938',
fill: 'white',
transform: 'translate(0 0.875)'
})
})]
})]
});
};
const SuccessIcon = ({
color = '#1CC400',
size = 18,
className = '',
onClick
}) => jsxs("svg", {
width: size,
height: size,
viewBox: '0 0 18 18',
fill: 'none',
xmlns: 'http://www.w3.org/2000/svg',
className: className,
onClick: onClick,
color: color,
children: [jsx("circle", {
cx: '9',
cy: '9',
r: '9',
fill: 'currentColor',
fillOpacity: '.2'
}), jsx("path", {
d: 'M5 8.5L8 11.5L13.5 6',
stroke: 'currentColor',
strokeWidth: '2',
strokeLinecap: 'round'
})]
});
const ErrorIcon = ({
color = '#F45858',
size = 18,
className = '',
onClick
}) => jsxs("svg", {
width: size,
height: size,
viewBox: '0 0 18 18',
fill: 'none',
xmlns: 'http://www.w3.org/2000/svg',
className: className,
onClick: onClick,
color: color,
children: [jsx("rect", {
width: '18',
height: '18',
rx: '4',
fill: 'currentColor',
fillOpacity: '.2'
}), jsx("path", {
d: 'M9.06951 10L9.0695 4.86092',
stroke: 'currentColor',
strokeWidth: '2',
strokeLinecap: 'round'
}), jsx("path", {
d: 'M9.06951 13L9.06951 13.0102',
stroke: 'currentColor',
strokeWidth: '2',
strokeLinecap: 'round'
})]
});
const QueuedIcon = ({
color = '#F4A358',
size = 18,
className = '',
onClick
}) => jsxs("svg", {
width: size,
height: size,
viewBox: '0 0 18 18',
fill: 'none',
xmlns: 'http://www.w3.org/2000/svg',
className: className,
onClick: onClick,
color: color,
children: [jsx("rect", {
width: '18',
height: '18',
rx: '4',
fill: 'currentColor',
fillOpacity: '.2'
}), jsx("path", {
d: 'M11.6756 12.6482C11.8311 12.8601 12.1306 12.9075 12.3268 12.7326C13.1311 12.0158 13.6857 11.055 13.9009 9.99071C14.1476 8.77034 13.9301 7.50182 13.2909 6.43333C12.6518 5.36484 11.637 4.57324 10.4451 4.2134C9.25315 3.85356 7.96985 3.95136 6.84622 4.48768C5.72259 5.024 4.83949 5.96024 4.36966 7.11325C3.89983 8.26626 3.87708 9.55308 4.30587 10.722C4.73466 11.8909 5.58412 12.8577 6.6881 13.4334C7.65084 13.9355 8.74673 14.1085 9.80981 13.934C10.0691 13.8914 10.2207 13.6287 10.1537 13.3746C10.0867 13.1205 9.82636 12.9718 9.56614 13.0086C8.7336 13.1262 7.88063 12.982 7.12813 12.5896C6.23429 12.1235 5.5465 11.3406 5.19933 10.3942C4.85216 9.44781 4.87057 8.40592 5.25098 7.47237C5.63138 6.53882 6.3464 5.78078 7.25616 5.34654C8.16592 4.91231 9.20497 4.83312 10.17 5.12447C11.1351 5.41582 11.9567 6.05674 12.4742 6.92186C12.9917 7.78698 13.1678 8.81405 12.9681 9.80215C12.7999 10.634 12.3756 11.3878 11.7605 11.9612C11.5683 12.1404 11.5202 12.4362 11.6756 12.6482Z',
fill: 'currentColor'
})]
});
const PooledIcon = ({
color = '#008DE4',
size = 18,
className = '',
onClick
}) => jsxs("svg", {
width: size,
height: size,
viewBox: '0 0 18 18',
fill: 'none',
xmlns: 'http://www.w3.org/2000/svg',
className: className,
onClick: onClick,
color: color,
children: [jsx("rect", {
width: '18',
height: '18',
rx: '4',
fill: 'currentColor',
fillOpacity: '.2'
}), jsx("path", {
d: 'M14 7L12.4328 6.01491C11.4484 5.39611 10.1941 5.40565 9.21918 6.03935V6.03935C8.30752 6.63193 7.14565 6.6816 6.18674 6.16899L4 5',
stroke: 'currentColor',
strokeLinecap: 'round'
}), jsx("path", {
d: 'M14 10L12.4328 9.01491C11.4484 8.39611 10.1941 8.40565 9.21918 9.03935V9.03935C8.30752 9.63193 7.14565 9.6816 6.18674 9.16899L4 8',
stroke: 'currentColor',
strokeLinecap: 'round'
}), jsx("path", {
d: 'M14 13L12.4328 12.0149C11.4484 11.3961 10.1941 11.4057 9.21918 12.0393V12.0393C8.30752 12.6319 7.14565 12.6816 6.18674 12.169L4 11',
stroke: 'currentColor',
strokeLinecap: 'round'
})]
});
const BroadcastedIcon = ({
color = '#008DE4',
size = 18,
className = '',
onClick
}) => jsxs("svg", {
width: size,
height: size,
viewBox: '0 0 18 18',
fill: 'none',
xmlns: 'http://www.w3.org/2000/svg',
className: className,
onClick: onClick,
color: color,
children: [jsx("rect", {
width: '18',
height: '18',
rx: '4',
fill: 'currentColor',
fillOpacity: '.2'
}), jsx("path", {
d: 'M4.86093 8.74967L12.5 8.74993M12.5 8.74993L9.5 5.74993M12.5 8.74993L9.5 11.7499',
stroke: 'currentColor',
strokeWidth: '2',
strokeLinecap: 'round',
strokeLinejoin: 'round'
})]
});
const CalendarIcon = ({
color = 'currentColor',
size = 14,
className = '',
onClick
}) => jsx("svg", {
width: size,
height: size * 14 / 12,
viewBox: '0 0 12 14',
fill: 'none',
xmlns: 'http://www.w3.org/2000/svg',
className: className,
onClick: onClick,
color: color,
children: jsx("path", {
fill: 'currentColor',
d: 'M3.42857 0.143066V0.571638V1.85735H8.57143V0.571638V0.143066H9.42857V0.571638V1.85735H11.1429H12V2.71449V4.42878V5.28592V13.0002V13.8574H11.1429H0.857143H0V13.0002V5.28592V4.42878V2.71449V1.85735H0.857143H2.57143V0.571638V0.143066H3.42857ZM11.1429 5.28592H0.857143V13.0002H11.1429V5.28592ZM11.1429 2.71449H0.857143V4.42878H11.1429V2.71449Z'
})
});
const EyeOpenIcon = ({
color = 'currentColor',
size = 16,
className = '',
onClick
}) => jsx("svg", {
width: size,
height: size * 10 / 16,
viewBox: '0 0 16 10',
fill: 'none',
xmlns: 'http://www.w3.org/2000/svg',
className: className,
onClick: onClick,
color: color,
children: jsx("path", {
d: 'M7.89888 0C6.24409 0.000806406 4.62351 0.471042 3.22533 1.35609C1.82715 2.24114 0.708743 3.50469 0 5C0.708092 6.49578 1.82635 7.75974 3.22468 8.64489C4.623 9.53004 6.24392 9.99999 7.89888 9.99999C9.55378 9.99999 11.1747 9.53004 12.573 8.64489C13.9713 7.75974 15.0896 6.49578 15.7977 5C15.089 3.50469 13.9706 2.24114 12.5724 1.35609C11.1742 0.471042 9.55364 0.000806406 7.89888 0ZM7.89888 8.98344C6.52084 8.97755 5.16914 8.60565 3.98212 7.90571C2.79509 7.20576 1.81538 6.20297 1.14327 5C1.81083 3.7931 2.78951 2.78709 3.97757 2.08654C5.16561 1.38601 6.51964 1.01653 7.89888 1.01653C9.27804 1.01653 10.6321 1.38601 11.8201 2.08654C13.0082 2.78709 13.9868 3.7931 14.6545 5C13.9823 6.20297 13.0026 7.20576 11.8156 7.90571C10.6285 8.60565 9.27689 8.97755 7.89888 8.98344ZM7.89888 2.51693C7.40772 2.51693 6.92767 2.66256 6.51934 2.93541C6.11101 3.20825 5.79274 3.59605 5.60481 4.0498C5.41687 4.50349 5.3677 5.00271 5.46351 5.48439C5.55932 5.96606 5.7958 6.4085 6.14306 6.7558C6.49033 7.10303 6.93275 7.33953 7.41443 7.43535C7.8961 7.53117 8.39533 7.48197 8.84909 7.29406C9.30277 7.10608 9.69059 6.78785 9.96342 6.3795C10.2362 5.97114 10.3819 5.4911 10.3819 5C10.3819 4.34146 10.1203 3.70989 9.65461 3.24421C9.189 2.77854 8.55742 2.51693 7.89888 2.51693ZM7.89888 6.46658C7.60878 6.46658 7.32525 6.38058 7.08407 6.21937C6.8429 6.05822 6.65492 5.82918 6.54392 5.56123C6.43291 5.29322 6.40387 4.99837 6.46045 4.7139C6.51704 4.42942 6.65675 4.16805 6.8618 3.96299C7.06693 3.75786 7.32823 3.61818 7.61271 3.5616C7.89726 3.50501 8.1921 3.53405 8.46011 3.64504C8.72806 3.75603 8.9571 3.94402 9.11825 4.18519C9.27939 4.42637 9.36546 4.7099 9.36546 5C9.36498 5.38884 9.21034 5.76161 8.93542 6.03654C8.66043 6.31146 8.28765 6.4661 7.89888 6.46658Z',
fill: 'currentColor'
})
});
const EyeClosedIcon = ({
color = 'currentColor',
size = 16,
className = '',
onClick
}) => jsxs("svg", {
width: size,
height: size,
viewBox: '0 0 16 16',
fill: 'none',
xmlns: 'http://www.w3.org/2000/svg',
className: className,
onClick: onClick,
color: color,
children: [jsx("path", {
d: 'M7.89888 3C6.24409 3.00081 4.62351 3.47104 3.22533 4.35609C1.82715 5.24114 0.708743 6.50469 0 8C0.708092 9.49578 1.82635 10.7597 3.22468 11.6449C4.623 12.53 6.24392 13 7.89888 13C9.55378 13 11.1747 12.53 12.573 11.6449C13.9713 10.7597 15.0896 9.49578 15.7977 8C15.089 6.50469 13.9706 5.24114 12.5724 4.35609C11.1742 3.47104 9.55364 3.00081 7.89888 3ZM7.89888 11.9834C6.52084 11.9776 5.16914 11.6056 3.98212 10.9057C2.79509 10.2058 1.81538 9.20297 1.14327 8C1.81083 6.7931 2.78951 5.78709 3.97757 5.08654C5.16561 4.38601 6.51964 4.01653 7.89888 4.01653C9.27804 4.01653 10.6321 4.38601 11.8201 5.08654C13.0082 5.78709 13.9868 6.7931 14.6545 8C13.9823 9.20297 13.0026 10.2058 11.8156 10.9057C10.6285 11.6056 9.27689 11.9776 7.89888 11.9834Z',
fill: 'currentColor'
}), jsx("line", {
x1: '1',
y1: '15',
x2: '15',
y2: '1',
stroke: 'currentColor',
strokeWidth: '1.5',
strokeLinecap: 'round'
})]
});
const CheckIcon = ({
color = '#4C7EFF',
size = 20,
className = '',
onClick
}) => {
return jsxs("svg", {
width: size,
height: size,
viewBox: '0 0 20 20',
fill: 'none',
xmlns: 'http://www.w3.org/2000/svg',
className: className,
onClick: onClick,
children: [jsx("circle", {
cx: '10',
cy: '10',
r: '10',
fill: 'rgba(12, 28, 51, 0.05)'
}), jsx("path", {
d: 'M6.33 10L8.83 12.5L13.67 7.67',
stroke: color,
strokeWidth: '1.5',
strokeLinecap: 'round',
strokeLinejoin: 'round'
})]
});
};
const KeyIcon = ({
color = '#4C7EFF',
size = 16,
className = '',
onClick
}) => jsx("svg", {
width: size,
height: size,
viewBox: '0 0 16 16',
fill: 'none',
xmlns: 'http://www.w3.org/2000/svg',
className: className,
onClick: onClick,
color: color,
children: jsx("path", {
d: 'M14.0002 5.41699C14.0002 3.25388 12.2463 1.5 10.0832 1.5C7.9202 1.50018 6.16715 3.25399 6.16715 5.41699C6.16716 5.59622 6.17916 5.7722 6.2023 5.94434C6.22418 6.10708 6.24295 6.25021 6.25406 6.36523C6.26445 6.47287 6.27504 6.6168 6.25406 6.76367C6.22507 6.96632 6.17504 7.11454 6.07535 7.29297C5.95896 7.50119 5.76828 7.68206 5.62027 7.83008L1.64469 11.8047C1.57287 11.8765 1.53632 11.9136 1.5109 11.9414C1.49222 11.9619 1.49456 11.9619 1.50211 11.9502C1.50495 11.9368 1.50339 11.9359 1.50211 11.9639C1.5004 12.0015 1.50015 12.0531 1.50015 12.1543V13.5059C1.50016 13.7356 1.50047 13.8631 1.50797 13.9551C1.50902 13.968 1.51085 13.9788 1.51187 13.9873C1.52057 13.9884 1.5316 13.9911 1.54508 13.9922C1.63709 13.9997 1.76453 14 1.9943 14H3.34586C3.44746 14 3.49953 13.9998 3.53726 13.998C3.54201 13.9978 3.54587 13.9973 3.54898 13.9971C3.55141 13.9949 3.55495 13.9927 3.55875 13.9893C3.58663 13.9638 3.62368 13.9272 3.69547 13.8555L7.67008 9.88086C7.81809 9.73284 7.999 9.54119 8.20719 9.4248C8.38512 9.32541 8.53299 9.27507 8.73551 9.24609C8.88263 9.22498 9.02721 9.23569 9.13492 9.24609C9.24997 9.25721 9.39308 9.27596 9.55582 9.29785C9.72785 9.32099 9.90386 9.33299 10.0832 9.33301C12.2462 9.33301 14 7.57995 14.0002 5.41699ZM10.091 4.66699C10.5052 4.66699 10.841 5.00278 10.841 5.41699C10.8408 5.83106 10.5051 6.16699 10.091 6.16699H10.0832C9.66921 6.16682 9.33334 5.83095 9.33316 5.41699C9.33316 5.00289 9.6691 4.66717 10.0832 4.66699H10.091ZM15.5002 5.41699C15.5 8.40838 13.0746 10.833 10.0832 10.833C9.83693 10.833 9.59389 10.8172 9.35562 10.7852C9.18091 10.7617 9.07081 10.747 8.99039 10.7393C8.96929 10.7372 8.95363 10.736 8.94254 10.7354C8.93816 10.7391 8.9324