react-restyle-components 0.4.39 → 0.4.41

package/lib/src/core-components/src/core-components/Divider/Divider.js

@@ -1,8 +1,23 @@
-"use strict";"use client";import{jsx as o}from"react/jsx-runtime";import e,{useContext as i}from"react";import{styled as s}from"styled-components";import{colors as n}from"../../utils";import{dontForwardProps as d}from"../../utils";const m=e.createContext({isInsideCard:!1});export const StyledDivider=s.hr.withConfig(d())`
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useContext } from 'react';
+import { styled } from 'styled-components';
+import { colors } from '../../utils';
+// import {CardContext} from '../../components/Card/CardContext';
+import { dontForwardProps } from '../../utils';
+const CardContext = React.createContext({
+    isInsideCard: false,
+});
+export const StyledDivider = styled.hr.withConfig(dontForwardProps()) `
   margin: 0;
   border: 0;
-  border-top: 1px solid ${n.neutralBrightest};
+  border-top: 1px solid ${colors.neutralBrightest};
 
-  ${({isInsideCard:r})=>r&&`margin-left: -1rem; 
+  ${({ isInsideCard }) => isInsideCard &&
+    `margin-left: -1rem; 
     margin-right: -1rem;`}
-`,Divider=r=>{const{isInsideCard:t}=i(m);return o(StyledDivider,{isInsideCard:t,...r})};
+`;
+export const Divider = (props) => {
+    const { isInsideCard } = useContext(CardContext);
+    return _jsx(StyledDivider, { isInsideCard: isInsideCard, ...props });
+};

package/lib/src/core-components/src/core-components/Divider/index.js

@@ -1 +1 @@
-"use strict";export*from"./Divider";
+export * from './Divider';

package/lib/src/core-components/src/core-components/SelectionCardStrip/index.js

@@ -1 +1 @@
-"use strict";export{SelectionCardStrip}from"./selectionCardStrip";
+export { SelectionCardStrip } from './selectionCardStrip';

package/lib/src/core-components/src/core-components/SelectionCardStrip/selectionCardStrip.js

@@ -1,4 +1,15 @@
-"use strict";"use client";import{jsx as t}from"react/jsx-runtime";import s from"react";import{styled as r}from"styled-components";import{createTransition as i,dontForwardProps as n}from"../../utils";import{colors as l}from"../../utils";import{toggleParentStyles as a}from"../ToggleCore";const d=e=>t("div",{...e}),c=r(d).withConfig(n())`
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { styled } from 'styled-components';
+// import {Card, CardProps} from '../../components/Card';
+import { createTransition, dontForwardProps } from '../../utils';
+import { colors } from '../../utils';
+import { toggleParentStyles } from '../ToggleCore';
+const Card = (props) => {
+    return _jsx("div", { ...props });
+};
+const StyledCard = styled(Card).withConfig(dontForwardProps()) `
   display: inline-flex;
   align-items: flex-start;
   box-sizing: border-box;
@@ -6,25 +17,37 @@
   line-height: 1.3;
   -moz-osx-font-smoothing: grayscale;
 
-  ${()=>i({properties:["box-shadow","background-color"]})}
+  ${() => createTransition({
+    properties: ['box-shadow', 'background-color'],
+})}
 
-  ${a};
-`,f=s.forwardRef((e,o)=>t(c,{ref:o,element:"label",type:"selection",selected:e.checked||e.focused,...e})),p=r.div.withConfig(n())`
+  ${toggleParentStyles};
+`;
+const Wrapper = React.forwardRef((props, fRef) => (_jsx(StyledCard, { ref: fRef, element: "label", type: "selection", selected: props.checked || props.focused, ...props })));
+const InternalWrapper = styled.div.withConfig(dontForwardProps()) `
   display: flex;
   z-index: 1;
   width: 100%;
   justify-content: center;
   padding: 0.1rem 0 0 0;
-  ${i({properties:["color"]})};
+  ${createTransition({
+    properties: ['color'],
+})};
 
-  ${({isDisabled:e})=>e&&`
+  ${({ isDisabled }) => isDisabled &&
+    `
       cursor: not-allowed;
-      color: ${l.disabledText};
+      color: ${colors.disabledText};
 `}
-  ${({disableSvgColorOverride:e,isDisabled:o})=>!e&&`
+  ${({ disableSvgColorOverride, isDisabled }) => !disableSvgColorOverride &&
+    `
     svg path {
       fill: none;
-      stroke: ${o&&l.disabledText};
+      stroke: ${isDisabled && colors.disabledText};
     }
 `}
-`;export const SelectionCardStrip={Wrapper:f,InternalWrapper:p};
+`;
+export const SelectionCardStrip = {
+    Wrapper,
+    InternalWrapper,
+};

package/lib/src/core-components/src/core-components/StateLayer.js

@@ -1,4 +1,6 @@
-"use strict";import{styled as o}from"styled-components";import{tokens as t}from"../utils/designTokens";export const StateLayer=o.div`
+import { styled } from 'styled-components';
+import { tokens } from '../utils/designTokens';
+export const StateLayer = styled.div `
   position: absolute;
   top: 0;
   right: 0;
@@ -6,6 +8,6 @@
   left: 0;
   pointer-events: none;
   z-index: 0;
-  background: ${t.darkGray||"#4a4a4a"} !important;
-  opacity: ${t.stateLayerNone};
+  background: ${tokens.darkGray || '#4a4a4a'} !important;
+  opacity: ${tokens.stateLayerNone};
 `;

package/lib/src/core-components/src/core-components/ToggleCore/elements.js

@@ -1,4 +1,12 @@
-"use strict";import{jsx as r,jsxs as c}from"react/jsx-runtime";import{styled as i,css as o}from"styled-components";import{createTransition as n}from"../../utils";import{StateLayer as a}from"../StateLayer";const p=e=>r("span",{...e}),u=o`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled, css } from 'styled-components';
+import { createTransition } from '../../utils';
+import { StateLayer } from '../StateLayer';
+// import {Text} from '../../components/Text';
+const Text = (props) => {
+    return _jsx("span", { ...props });
+};
+const baseToggleStyles = css `
   position: relative;
   display: block;
   box-sizing: border-box;
@@ -9,15 +17,18 @@
   flex-shrink: 0;
   margin-right: var(--aui-spacing-100);
 
-  ${({$showInteraction:e})=>e&&o`
+  ${({ $showInteraction }) => $showInteraction &&
+    css `
       // Transitions
       &:before,
       [data-aui='icon'],
-      ${a} {
-        ${n({properties:["opacity"]})}
+      ${StateLayer} {
+        ${createTransition({ properties: ['opacity'] })}
       }
 
-      ${n({properties:["box-shadow","background-color","color"]})}
+      ${createTransition({
+        properties: ['box-shadow', 'background-color', 'color'],
+    })}
 
       // Support keyboard focus
       &:has(~ input:focus-visible) {
@@ -29,7 +40,8 @@
         opacity: var(--aui-state-layer-on-disabled);
       }
     `}
-`,s=i.span`
+`;
+const StyledCheckbox = styled.span `
   [data-aui='icon-check'],
   [data-aui='icon-minus'] {
     position: absolute;
@@ -38,28 +50,33 @@
     transition: opacity 0.15s;
     pointer-events: none;
   }
-  ${u};
+  ${baseToggleStyles};
 
   border-radius: var(--aui-border-radius-050);
 
-  ${({$checked:e,$indeterminate:d})=>e||d?o`
+  ${({ $checked, $indeterminate }) => $checked || $indeterminate
+    ? css `
           box-shadow: 0 0 0 1px var(--aui-inverse-surface) inset;
           background: var(--aui-inverse-surface);
           color: var(--aui-inverse-on-surface);
-        `:o`
+        `
+    : css `
           box-shadow: 0 0 0 1px var(--aui-outline) inset;
           background: var(--aui-surface);
           color: var(--aui-on-surface);
         `}
-`,t=i.span`
-  ${u};
+`;
+const StyledRadio = styled.span `
+  ${baseToggleStyles};
 
   border-radius: var(--aui-border-radius-round);
   background: var(--aui-surface);
 
-  ${({$checked:e})=>e?o`
+  ${({ $checked }) => $checked
+    ? css `
           box-shadow: 0 0 0 2px var(--aui-inverse-surface) inset;
-        `:o`
+        `
+    : css `
           box-shadow: 0 0 0 1px var(--aui-outline) inset;
         `}
 
@@ -72,9 +89,14 @@
     top: 0.3125rem;
     left: 0.3125rem;
     background: var(--aui-inverse-surface);
-    opacity: ${({$checked:e})=>e?"1":"0"};
+    opacity: ${({ $checked }) => ($checked ? '1' : '0')};
   }
-`;export const CheckboxToggle=({...e})=>c(s,{...e,children:[r(a,{}),r("span",{children:"Icons"})]}),RadioToggle=e=>r(t,{...e,children:r(a,{})}),StyledDescription=i(p).attrs({size:2})`
+`;
+export const CheckboxToggle = ({ ...props }) => (_jsxs(StyledCheckbox, { ...props, children: [_jsx(StateLayer, {}), _jsx("span", { children: "Icons" })] }));
+export const RadioToggle = (props) => (_jsx(StyledRadio, { ...props, children: _jsx(StateLayer, {}) }));
+export const StyledDescription = styled(Text).attrs({
+    size: 2,
+}) `
   color: var(--aui-on-surface);
   line-height: 1.3;
 
@@ -82,27 +104,30 @@
     opacity: var(--aui-state-layer-on-disabled);
     cursor: not-allowed;
   }
-`,HiddenInput=i.input`
+`;
+export const HiddenInput = styled.input `
   position: fixed;
   opacity: 0;
   pointer-events: none;
-`,toggleParentStyles=o`
+`;
+/** Add this style snippet to the label containing this ToggleCore component */
+export const toggleParentStyles = css `
   &:not(:has(input:disabled)) {
     &:hover
-      ${s}
-      ${a},
+      ${StyledCheckbox}
+      ${StateLayer},
       &:hover
-      ${t}
-      ${a} {
+      ${StyledRadio}
+      ${StateLayer} {
       opacity: var(--aui-state-layer-hover);
     }
 
     &:active
-      ${s}
-      ${a},
+      ${StyledCheckbox}
+      ${StateLayer},
       &:hover
-      ${t}
-      ${a} {
+      ${StyledRadio}
+      ${StateLayer} {
       opacity: var(--aui-state-layer-press);
     }
   }

package/lib/src/core-components/src/core-components/ToggleCore/index.js

@@ -1 +1,2 @@
-"use strict";export{ToggleCore}from"./toggleCore";export{toggleParentStyles}from"./elements";
+export { ToggleCore } from './toggleCore';
+export { toggleParentStyles } from './elements';

package/lib/src/core-components/src/core-components/ToggleCore/toggleCore.js

@@ -1 +1,14 @@
-"use strict";"use client";import{jsx as r,Fragment as u,jsxs as p}from"react/jsx-runtime";import l from"react";import{useId as g}from"../../utils";import{CheckboxToggle as x,RadioToggle as j,StyledDescription as k,HiddenInput as I}from"./elements";export const ToggleCore=l.forwardRef(({id:i,children:e,checked:t,isToggleShowing:a=!0,showInteraction:c=!0,onFocusChange:n,toggleType:o,indeterminate:s=!1,...d},f)=>{const m=g(o,i);return typeof e=="string"&&(e=r(k,{children:e})),p(u,{children:[a&&r(o==="checkbox"?x:j,{$checked:t??!1,$showInteraction:c,$indeterminate:s}),e,r(I,{readOnly:!0,id:m,ref:f,...d,checked:t,type:o,onFocus:()=>n?.(!0),onBlur:()=>n?.(!1),"aria-checked":s?"mixed":void 0})]})});
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useId } from '../../utils';
+import { CheckboxToggle, RadioToggle, StyledDescription, HiddenInput, } from './elements';
+/** To apply hover states, apply `toggleParentStyles` to the label containing this component */
+export const ToggleCore = React.forwardRef(({ id, children, checked, isToggleShowing = true, showInteraction = true, onFocusChange, toggleType, indeterminate = false, ...rest }, ref) => {
+    const inputId = useId(toggleType, id);
+    if (typeof children === 'string') {
+        children = _jsx(StyledDescription, { children: children });
+    }
+    const ToggleComponent = toggleType === 'checkbox' ? CheckboxToggle : RadioToggle;
+    return (_jsxs(_Fragment, { children: [isToggleShowing && (_jsx(ToggleComponent, { "$checked": checked ?? false, "$showInteraction": showInteraction, "$indeterminate": indeterminate })), children, _jsx(HiddenInput, { readOnly: true, id: inputId, ref: ref, ...rest, checked: checked, type: toggleType, onFocus: () => onFocusChange?.(true), onBlur: () => onFocusChange?.(false), "aria-checked": indeterminate ? 'mixed' : undefined })] }));
+});

package/lib/src/core-components/src/core-components/atoms/Input/Input.js

@@ -1 +1,22 @@
-"use strict";import{jsx as o,jsxs as y}from"react/jsx-runtime";import h from"react";import r from"../../../tc.module.css";import{cn as a}from"../../../utils";export const Input=h.forwardRef(({className:d,error:e,label:s,id:l,onChange:f,onBlur:i,onValueChange:c,onValueBlur:g,...n},m)=>{const u=l||`input-${Math.random().toString(36).substr(2,9)}`,p=t=>{f?.(t),c?.(t.target.value)},x=t=>{i?.(t),g?.(t.target.value)};return y("div",{className:a(r["w-full"]),children:[s&&o("label",{className:a(r.block,r["text-sm"],r["font-medium"],r["text-gray-700"],r["dark:text-gray-300"],r["mb-1"]),children:s}),o("input",{ref:m,id:u,className:a(r["w-full"],r["px-4"],r["py-2"],r.border,r["rounded-lg"],r["transition-colors"],r["bg-white"],r["dark:bg-gray-800"],r["border-gray-300"],r["dark:border-gray-600"],r["text-gray-900"],r["dark:text-gray-100"],r["placeholder-gray-500"],r["dark:placeholder-gray-400"],r["focus:outline-none"],r["focus:ring-2"],r["focus:ring-primary"],r["focus:ring-offset-1"],e&&r["border-red-500"],e&&r["focus:ring-red-500"],d),style:{...n.style,"--tw-ring-offset-color":"#ffffff"},onChange:p,onBlur:x,...n}),e&&o("p",{className:a(r["mt-1"],r["text-sm"],r["text-red-600"],r["dark:text-red-400"]),children:e})]})});Input.displayName="Input";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const Input = React.forwardRef(({ className, error, label, id, onChange, onBlur, onValueChange, onValueBlur, ...props }, ref) => {
+    const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+    // Handle onChange - always pass event to onChange, value to onValueChange
+    const handleChange = (e) => {
+        onChange?.(e);
+        onValueChange?.(e.target.value);
+    };
+    // Handle onBlur - always pass event to onBlur, value to onValueBlur
+    const handleBlur = (e) => {
+        onBlur?.(e);
+        onValueBlur?.(e.target.value);
+    };
+    return (_jsxs("div", { className: cn(s['w-full']), children: [label && (_jsx("label", { className: cn(s['block'], s['text-sm'], s['font-medium'], s['text-gray-700'], s['dark:text-gray-300'], s['mb-1']), children: label })), _jsx("input", { ref: ref, id: inputId, className: cn(s['w-full'], s['px-4'], s['py-2'], s['border'], s['rounded-lg'], s['transition-colors'], s['bg-white'], s['dark:bg-gray-800'], s['border-gray-300'], s['dark:border-gray-600'], s['text-gray-900'], s['dark:text-gray-100'], s['placeholder-gray-500'], s['dark:placeholder-gray-400'], s['focus:outline-none'], s['focus:ring-2'], s['focus:ring-primary'], s['focus:ring-offset-1'], error && s['border-red-500'], error && s['focus:ring-red-500'], className), style: {
+                    ...props.style,
+                    '--tw-ring-offset-color': '#ffffff',
+                }, onChange: handleChange, onBlur: handleBlur, ...props }), error && (_jsx("p", { className: cn(s['mt-1'], s['text-sm'], s['text-red-600'], s['dark:text-red-400']), children: error }))] }));
+});
+Input.displayName = 'Input';

package/lib/src/core-components/src/core-components/atoms/Label/Label.js

@@ -1 +1,21 @@
-"use strict";import{jsx as m,jsxs as s,Fragment as x}from"react/jsx-runtime";import i from"react";import t from"../../../tc.module.css";import{cn as a}from"../../../utils";export const Label=i.forwardRef(({className:n,required:o,children:r,label:e,...f},l)=>!e&&!r?null:e&&!r?s("label",{ref:l,className:a(t.block,t["text-sm"],t["font-medium"],t["text-gray-700"],t["dark:text-gray-300"],n),...f,children:[e,o&&m("span",{className:a(t["text-red-500"],t["ml-1"]),children:"*"})]}):!e&&r?m(x,{children:r}):s("div",{className:a(t["w-full"]),children:[s("label",{ref:l,className:a(t.block,t["text-sm"],t["font-medium"],t["text-gray-700"],t["dark:text-gray-300"],t["mb-1"],n),...f,children:[e,o&&m("span",{className:a(t["text-red-500"],t["ml-1"]),children:"*"})]}),r]}));Label.displayName="Label";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const Label = React.forwardRef(({ className, required, children, label, ...props }, ref) => {
+    // Don't render if neither label nor children are provided
+    if (!label && !children) {
+        return null;
+    }
+    // If only label is provided, show just the label
+    if (label && !children) {
+        return (_jsxs("label", { ref: ref, className: cn(s['block'], s['text-sm'], s['font-medium'], s['text-gray-700'], s['dark:text-gray-300'], className), ...props, children: [label, required && (_jsx("span", { className: cn(s['text-red-500'], s['ml-1']), children: "*" }))] }));
+    }
+    // If only children are provided (no label), just render children
+    if (!label && children) {
+        return _jsx(_Fragment, { children: children });
+    }
+    // If both label and children are provided, show label first, then children
+    return (_jsxs("div", { className: cn(s['w-full']), children: [_jsxs("label", { ref: ref, className: cn(s['block'], s['text-sm'], s['font-medium'], s['text-gray-700'], s['dark:text-gray-300'], s['mb-1'], className), ...props, children: [label, required && (_jsx("span", { className: cn(s['text-red-500'], s['ml-1']), children: "*" }))] }), children] }));
+});
+Label.displayName = 'Label';

package/lib/src/core-components/src/core-components/atoms/Textarea/Textarea.js

@@ -1 +1,19 @@
-"use strict";import{jsx as o,jsxs as y}from"react/jsx-runtime";import h from"react";import r from"../../../tc.module.css";import{cn as t}from"../../../utils";export const Textarea=h.forwardRef(({className:d,error:a,label:s,id:n,onChange:l,onBlur:c,onValueChange:i,onValueBlur:g,...m},x)=>{const f=n||`textarea-${Math.random().toString(36).substr(2,9)}`,u=e=>{l?.(e),i?.(e.target.value)},p=e=>{c?.(e),g?.(e.target.value)};return y("div",{className:t(r["w-full"]),children:[s&&o("label",{className:t(r.block,r["text-sm"],r["font-medium"],r["text-gray-700"],r["dark:text-gray-300"],r["mb-1"]),children:s}),o("textarea",{ref:x,id:f,className:t(r["w-full"],r["px-4"],r["py-2"],r.border,r["rounded-lg"],r["transition-colors"],r["resize-vertical"],r["bg-white"],r["dark:bg-gray-800"],r["border-gray-300"],r["dark:border-gray-600"],r["text-gray-900"],r["dark:text-gray-100"],r["placeholder-gray-500"],r["dark:placeholder-gray-400"],r["focus:outline-none"],r["focus:ring-2"],r["focus:ring-primary"],r["focus:ring-offset-1"],a&&r["border-red-500"],a&&r["focus:ring-red-500"],d),...m,onChange:u,onBlur:p}),a&&o("p",{className:t(r["mt-1"],r["text-sm"],r["text-red-600"],r["dark:text-red-400"]),children:a})]})});Textarea.displayName="Textarea";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const Textarea = React.forwardRef(({ className, error, label, id, onChange, onBlur, onValueChange, onValueBlur, ...props }, ref) => {
+    const textareaId = id || `textarea-${Math.random().toString(36).substr(2, 9)}`;
+    // Handle onChange - always pass event to onChange, value to onValueChange
+    const handleChange = (e) => {
+        onChange?.(e);
+        onValueChange?.(e.target.value);
+    };
+    // Handle onBlur - always pass event to onBlur, value to onValueBlur
+    const handleBlur = (e) => {
+        onBlur?.(e);
+        onValueBlur?.(e.target.value);
+    };
+    return (_jsxs("div", { className: cn(s['w-full']), children: [label && (_jsx("label", { className: cn(s['block'], s['text-sm'], s['font-medium'], s['text-gray-700'], s['dark:text-gray-300'], s['mb-1']), children: label })), _jsx("textarea", { ref: ref, id: textareaId, className: cn(s['w-full'], s['px-4'], s['py-2'], s['border'], s['rounded-lg'], s['transition-colors'], s['resize-vertical'], s['bg-white'], s['dark:bg-gray-800'], s['border-gray-300'], s['dark:border-gray-600'], s['text-gray-900'], s['dark:text-gray-100'], s['placeholder-gray-500'], s['dark:placeholder-gray-400'], s['focus:outline-none'], s['focus:ring-2'], s['focus:ring-primary'], s['focus:ring-offset-1'], error && s['border-red-500'], error && s['focus:ring-red-500'], className), ...props, onChange: handleChange, onBlur: handleBlur }), error && (_jsx("p", { className: cn(s['mt-1'], s['text-sm'], s['text-red-600'], s['dark:text-red-400']), children: error }))] }));
+});
+Textarea.displayName = 'Textarea';

package/lib/src/core-components/src/core-components/index.js

@@ -1 +1,3 @@
-"use strict";export*from"./SelectionCardStrip/index";export*from"./StateLayer";export*from"./ToggleCore/index";
+export * from './SelectionCardStrip/index';
+export * from './StateLayer';
+export * from './ToggleCore/index';

package/lib/src/core-components/src/helpers/constants.js

@@ -1 +1,11 @@
-"use strict";export const STANDARD_COLORS=["#000000","#0000ff","#808080","#008000","#800080","#ff0000","#ffffff"],DEFAULT_BG_COLOR="",DEFAULT_TEXT_COLOR="";
+export const STANDARD_COLORS = [
+    '#000000',
+    '#0000ff',
+    '#808080',
+    '#008000',
+    '#800080',
+    '#ff0000',
+    '#ffffff',
+];
+export const DEFAULT_BG_COLOR = '';
+export const DEFAULT_TEXT_COLOR = '';

package/lib/src/core-components/src/hooks/index.js

@@ -1 +1 @@
-"use strict";export*from"./outside.hook";
+export * from './outside.hook';

package/lib/src/core-components/src/hooks/outside.hook.js

@@ -1 +1,28 @@
-"use strict";import{useEffect as u}from"react";export const useClickOutside=(t,r)=>{u(()=>{let c=!1,o=!1;const s=n=>{c||!o||!t.current||t.current.contains(n.target)||r(n)},e=n=>{o=t.current,c=t.current&&t.current.contains(n.target)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("click",s),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("click",s)}},[t,r])};
+import { useEffect } from 'react';
+export const useClickOutside = (ref, handler) => {
+    useEffect(() => {
+        let startedInside = false;
+        let startedWhenMounted = false;
+        const listener = (event) => {
+            // Do nothing if `mousedown` or `touchstart` started inside ref element
+            if (startedInside || !startedWhenMounted)
+                return;
+            // Do nothing if clicking ref's element or descendent elements
+            if (!ref.current || ref.current.contains(event.target))
+                return;
+            handler(event);
+        };
+        const validateEventStart = (event) => {
+            startedWhenMounted = ref.current;
+            startedInside = ref.current && ref.current.contains(event.target);
+        };
+        document.addEventListener('mousedown', validateEventStart);
+        document.addEventListener('touchstart', validateEventStart);
+        document.addEventListener('click', listener);
+        return () => {
+            document.removeEventListener('mousedown', validateEventStart);
+            document.removeEventListener('touchstart', validateEventStart);
+            document.removeEventListener('click', listener);
+        };
+    }, [ref, handler]);
+};

package/lib/src/core-components/src/index.js

@@ -1 +1,12 @@
-"use strict";import{jsx as o}from"react/jsx-runtime";import r from"react";import t from"react-dom/client";import"./index.css";import e from"./App";import m from"./reportWebVitals";const i=t.createRoot(document.getElementById("root"));i.render(o(r.StrictMode,{children:o(e,{})})),m();
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(_jsx(React.StrictMode, { children: _jsx(App, {}) }));
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

package/lib/src/core-components/src/tc.global.css

@@ -216,6 +216,19 @@
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
-/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}*,.dark\:bg-black:is(.dark *),.dark\:border-gray-600:is(.dark *),:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
-/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}.dark\:bg-black:is(.dark *),.dark\:border-gray-600:is(.dark *),*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
-/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/fieldset,legend{padding:0}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:20rem){.container{max-width:20rem}}@media (min-width:23.4375rem){.container{max-width:23.4375rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.form-input,.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,.form-input::placeholder,.form-input:focus,.form-multiselect,.form-multiselect:focus,.form-select,.form-select:focus,table{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}table:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}table tr:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}select:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity,1))}.divide-teal-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(240 253 250/var(--tw-divide-opacity,1))}.bg-purple-900\/50{background-color:#581c8780}.p-0\.5{padding:.125rem}.blur,.filter,.ring,.ring-2,.shadow,.shadow-inner,.shadow-md,body{font-family:Arima Regular;font-size:14px}.hover\:bg-white\/20:hover{background-color:#fff3}.dark\:border-gray-600:is(.dark *),.focus\:ring-0:focus,.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-boxdark:is(.dark *){--tw-bg-opacity:1;background-color:rgb(36 48 63/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:ring-offset-gray-800:is(.dark *){--tw-ring-offset-color:#1f2937}.dark\:hover\:bg-blue-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:focus\:ring-blue-600:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity,1))}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}@font-face{font-family:ArimaRegular;src:url(library/assets/fonts/arima/arima-regular.ttf)}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:20rem){.container{max-width:20rem}}@media (min-width:23.4375rem){.container{max-width:23.4375rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.form-input,.form-multiselect,.form-select,.form-input:focus,.form-multiselect:focus,.form-select:focus,.form-input::placeholder,.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,table{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}table:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}table tr:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}select:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}@keyframes spin{to{transform:rotate(1turn)}}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity,1))}.divide-teal-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(240 253 250/var(--tw-divide-opacity,1))}.bg-purple-900\/50{background-color:#581c8780}.p-0\.5{padding:.125rem}.shadow,.shadow-inner,.shadow-md,.ring,.ring-2,.blur,.filter,body{font-family:Arima Regular;font-size:14px}.menu ul{list-style:none;margin:0;padding:0}.menu li{border-bottom:1px solid #ddd;padding:10px}.menu li:last-child{border-bottom:none}.hover\:bg-white\/20:hover{background-color:#fff3}.focus\:ring-0:focus,.focus\:ring-1:focus,.dark\:border-gray-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-boxdark:is(.dark *){--tw-bg-opacity:1;background-color:rgb(36 48 63/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:ring-offset-gray-800:is(.dark *){--tw-ring-offset-color:#1f2937}.dark\:hover\:bg-blue-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:focus\:ring-blue-600:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity,1))}@media (min-width:0px) and (max-width:767px){}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}.blur,.filter,.ring,.ring-2,.shadow,.shadow-inner,.shadow-md,body{font-family:Arima Regular;font-size:14px}/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}.backdrop-blur-sm,.blur,.filter,.ring,.ring-2,.shadow,.shadow-inner,.shadow-md,body{font-family:Arima Regular;font-size:14px}*,.dark\:bg-black:is(.dark *),.dark\:border-gray-600:is(.dark *),:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}.\!filter,.backdrop-blur-sm,.blur,.ring,.ring-2,.shadow,.shadow-inner,body{font-family:Arima Regular;font-size:14px}.dark\:bg-black:is(.dark *),.dark\:border-gray-600:is(.dark *),*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/fieldset,legend{padding:0}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:20rem){.container{max-width:20rem}}@media (min-width:23.4375rem){.container{max-width:23.4375rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.form-input,.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,.form-input::placeholder,.form-input:focus,.form-multiselect,.form-multiselect:focus,.form-select,.form-select:focus,table{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}table:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}table tr:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}select:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.\!visible{visibility:visible!important}.-translate-x-1\/2,.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity,1))}.divide-teal-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(240 253 250/var(--tw-divide-opacity,1))}.bg-purple-900\/50{background-color:#581c8780}.p-0\.5{padding:.125rem}.\!filter,.blur,.ring,.ring-2,.shadow,.shadow-inner,.backdrop-blur-sm,body{font-family:Arima Regular;font-size:14px}.hover\:bg-white\/20:hover{background-color:#fff3}.dark\:border-gray-600:is(.dark *),.focus\:ring-0:focus,.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-boxdark:is(.dark *){--tw-bg-opacity:1;background-color:rgb(36 48 63/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:ring-offset-gray-800:is(.dark *){--tw-ring-offset-color:#1f2937}.dark\:hover\:bg-blue-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:focus\:ring-blue-600:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity,1))}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}@font-face{font-family:ArimaRegular;src:url(library/assets/fonts/arima/arima-regular.ttf)}.container{width:100%}@media (min-width:0px){.container{max-width:0}}@media (min-width:20rem){.container{max-width:20rem}}@media (min-width:23.4375rem){.container{max-width:23.4375rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.form-input,.form-multiselect,.form-select,.form-input:focus,.form-multiselect:focus,.form-select:focus,.form-input::placeholder,.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,table{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}table:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}table tr:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}select:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.\!visible{visibility:visible!important}.flex-grow,.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,@keyframes pulse{50%{opacity:.5}}@keyframes spin{to{transform:rotate(1turn)}}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity,1))}.divide-teal-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(240 253 250/var(--tw-divide-opacity,1))}.bg-purple-900\/50{background-color:#581c8780}.p-0\.5{padding:.125rem}.shadow,.shadow-inner,.shadow-md,.ring,.ring-2,.blur,.\!filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.backdrop-blur-sm,body{font-family:Arima Regular;font-size:14px}.menu ul{list-style:none;margin:0;padding:0}.menu li{border-bottom:1px solid #ddd;padding:10px}.menu li:last-child{border-bottom:none}.hover\:bg-white\/20:hover{background-color:#fff3}.focus\:ring-0:focus,.focus\:ring-1:focus,.dark\:border-gray-600:is(.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.dark\:bg-black:is(.dark *){--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dark\:bg-boxdark:is(.dark *){--tw-bg-opacity:1;background-color:rgb(36 48 63/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\:text-black:is(.dark *){--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity,1))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-500:is(.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.dark\:text-red-400:is(.dark *){--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:placeholder-gray-400:is(.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.dark\:ring-offset-gray-800:is(.dark *){--tw-ring-offset-color:#1f2937}.dark\:hover\:bg-blue-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(30 58 138/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:focus\:ring-blue-600:focus:is(.dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(37 99 235/var(--tw-ring-opacity,1))}@media (min-width:0px) and (max-width:767px){}