@epam/statgpt-ui-components 0.1.0-rc.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 EPAM Systems
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,75 @@
+# UI Components
+
+This library contains reusable UI components
+for the StatGPT portal frontend.
+It includes buttons, forms, modals,
+and other visual elements to ensure a consistent
+user interface across the application.
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/mit)
+[![React](https://img.shields.io/badge/React-19+-61dafb.svg)](https://reactjs.org/)
+[![Typescript](https://img.shields.io/badge/Typescript-5+-61dafb.svg)](https://www.typescriptlang.org/)
+
+
+## Table of Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Styling & Customization](#styling--customization)
+- [Contributing](#contributing)
+- [Security](#security)
+- [License](#license)
+
+## Features
+-
+- Consistent, accessible, and customizable UI components
+- Components for forms, buttons, inputs, modals, loaders, and more
+- Built with TypeScript and Tailwind CSS
+- Designed for easy integration and extension
+- Customizable styles and icons
+
+## Installation
+
+```bash
+npm install @epam/statgpt-ui-components
+```
+
+## Usage
+
+```tsx
+import { Button } from '@epam/statgpt-ui-components';
+
+// Example usage
+<Button
+  title={buttonTitle}
+  buttonClassName="classnames"
+  isSmallButton={true}
+  disabled={isDisabled}
+  onClick={() => alert('Clicked!')}
+/>
+```
+
+
+## Styling & Customization
+
+You can customize components by using `...ClassName` props.
+This allows you to override default styles with your own CSS styles.
+You also can provide custom icons through corresponding props.
+
+## Contributing
+
+We welcome contributions! Please see our [Contributing Guide](https://github.com/epam/statgpt-portal-frontend/blob/development/CONTRIBUTING.md) for details on:
+
+- Code style guidelines
+- Testing requirements
+- Pull request process
+
+
+## Security
+
+If you discover a security vulnerability, please refer to our [Security Policy](https://github.com/epam/statgpt-portal-frontend/blob/development/SECURITY.md).
+
+## License
+
+[MIT](https://github.com/epam/statgpt-portal-frontend/blob/development/LICENSE) - see the [LICENSE](https://github.com/epam/statgpt-portal-frontend/blob/development/LICENSE) file for details.

package/components/Alert/Alert.d.ts

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react';
+import { AlertDetails } from '../../models/alert';
+interface Props {
+    alertDetails?: AlertDetails;
+    successIcon?: ReactNode;
+    errorIcon?: ReactNode;
+    onClose?: () => void;
+    closeButtonTitle?: string;
+}
+export declare const Alert: FC<Props>;
+export {};

package/components/Button/Button.d.ts

@@ -0,0 +1,13 @@
+import { FC, MouseEvent, ReactNode } from 'react';
+interface Props {
+    title?: string;
+    buttonClassName: string;
+    isLoading?: boolean;
+    disabled?: boolean;
+    iconBefore?: ReactNode;
+    iconAfter?: ReactNode;
+    isSmallButton?: boolean;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const Button: FC<Props>;
+export {};

package/components/Calendar/Calendar.d.ts

@@ -0,0 +1,14 @@
+import { OptionsType } from 'react-flatpickr';
+import { FC, ReactNode } from 'react';
+import { CalendarResolution } from '../../../../shared-toolkit/src/types/calendar';
+interface Props {
+    onChange: (date: Date) => void;
+    value: Date;
+    options: OptionsType;
+    label: string;
+    calendarResolution?: CalendarResolution;
+    id?: string;
+    icon?: ReactNode;
+}
+export declare const Calendar: FC<Props>;
+export {};

package/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from 'react';
+interface Props {
+    id: string;
+    label?: string;
+    checked: boolean;
+    checkboxIcon?: ReactNode;
+    onChange?: (id: string, isChecked?: boolean) => void;
+}
+export declare const Checkbox: FC<Props>;
+export {};

package/components/CloseButton/CloseButton.d.ts

@@ -0,0 +1,10 @@
+import { FC, MouseEvent } from 'react';
+interface Props {
+    title?: string;
+    btnClassNames?: string;
+    iconWidth?: number;
+    iconHeight?: number;
+    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const CloseButton: FC<Props>;
+export {};

package/components/CollapsibleBlock/CollapsibleBlock.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+interface Props {
+    title: string;
+    icon?: ReactNode;
+    children: ReactNode;
+    value?: string;
+}
+export declare const CollapsibleBlock: FC<Props>;
+export {};

package/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from 'react';
+import { DropdownItem } from '../../models/dropdown-item';
+interface Props {
+    triggerButton: ReactNode;
+    options: DropdownItem[];
+    selectedOption?: string;
+    disabled?: boolean;
+    containerClassName?: string;
+    openedClassName?: string;
+    onOptionSelect?: (key: string) => void;
+}
+export declare const Dropdown: FC<Props>;
+export {};

package/components/HighlightText/HighlightText.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface Props {
+    text?: string;
+    highlightText?: string;
+}
+export declare const HighlightText: FC<Props>;
+export {};

package/components/IconButton/IconButton.d.ts

@@ -0,0 +1,10 @@
+import { FC, MouseEvent, ReactNode } from 'react';
+interface Props {
+    title?: string;
+    buttonClassName: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const IconButton: FC<Props>;
+export {};

package/components/Input/Input.d.ts

@@ -0,0 +1,14 @@
+import { FC, KeyboardEvent } from 'react';
+export interface InputProps {
+    type?: string;
+    value?: string | number | null;
+    placeholder?: string;
+    inputId: string;
+    cssClass?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    readonly?: boolean;
+    onChange?: (value: string) => void;
+    onKeyDown?: (value: KeyboardEvent<HTMLInputElement>) => void;
+}
+export declare const Input: FC<InputProps>;

package/components/Input/InputWithIcon.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+import { InputProps } from './Input';
+interface Props extends InputProps {
+    iconAfterInput?: ReactNode;
+    containerClasses?: string;
+    iconBeforeInput?: ReactNode;
+}
+export declare const InputWithIcon: FC<Props>;
+export {};

package/components/Link/Link.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from 'react';
+interface Props {
+    url: string;
+    title?: string;
+    linkClassName?: string;
+    iconBefore?: ReactNode;
+    iconAfter?: ReactNode;
+}
+export declare const Link: FC<Props>;
+export {};

package/components/Loader/Loader.d.ts

@@ -0,0 +1 @@
+export declare const Loader: () => import("react").JSX.Element;

package/components/Popup/Popup.d.ts

@@ -0,0 +1,17 @@
+import { FC, FormHTMLAttributes, ReactNode } from 'react';
+import { PopUpSize, PopUpState } from '../../types/pop-up';
+interface Props extends FormHTMLAttributes<HTMLFormElement> {
+    heading?: string | ReactNode;
+    portalId: string;
+    overlayClassName?: string;
+    containerClassName?: string;
+    state?: PopUpState | boolean;
+    size?: PopUpSize;
+    children: ReactNode[];
+    dividers?: boolean;
+    onClose: () => void;
+    dataTestId?: string;
+    closeButtonTitle?: string;
+}
+export declare const Popup: FC<Props>;
+export {};

package/components/Radio/Radio.d.ts

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react';
+interface Props {
+    id: string;
+    label?: string;
+    checked: boolean;
+    radioIcon?: ReactNode;
+    description?: string;
+    onChange?: (id: string, isChecked?: boolean) => void;
+}
+export declare const Radio: FC<Props>;
+export {};

package/components/Tag/Tag.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface Props {
+    title?: string;
+    text?: string;
+    onClick?: (text?: string) => void;
+}
+export declare const Tag: FC<Props>;
+export {};

package/components/index.d.ts

@@ -0,0 +1,16 @@
+export { Alert } from './Alert/Alert';
+export { Button } from './Button/Button';
+export { Calendar } from './Calendar/Calendar';
+export { Checkbox } from './Checkbox/Checkbox';
+export { CloseButton } from './CloseButton/CloseButton';
+export { CollapsibleBlock } from './CollapsibleBlock/CollapsibleBlock';
+export { HighlightText } from './HighlightText/HighlightText';
+export { IconButton } from './IconButton/IconButton';
+export { Input } from './Input/Input';
+export { InputWithIcon } from './Input/InputWithIcon';
+export { Link } from './Link/Link';
+export { Loader } from './Loader/Loader';
+export { Tag } from './Tag/Tag';
+export { Radio } from './Radio/Radio';
+export { Popup } from './Popup/Popup';
+export { Dropdown } from './Dropdown/Dropdown';

package/constants/alert.d.ts

@@ -0,0 +1,5 @@
+export declare enum AlertType {
+    ERROR = "error",
+    SUCCESS = "success",
+    IN_PROGRESS = "in_progress"
+}

package/constants/index.d.ts

@@ -0,0 +1,2 @@
+export * from './alert';
+export * from './tree-view';

package/constants/tree-view.d.ts

@@ -0,0 +1,2 @@
+export declare const TREE_NODE_ARROW_SIZE = 24;
+export declare const TREE_NODE_PADDING = 24;

package/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useIsMobile } from './isMobile';

package/hooks/isMobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(breakpoint?: number): boolean;

package/index.css

@@ -0,0 +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:rgba(59,130,246,.5);--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:rgba(59,130,246,.5);--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.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}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-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings: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:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-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::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}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}.\!container{width:100%!important}.container{width:100%}@media (min-width:429px){.\!container{max-width:429px!important}.container{max-width:429px}}@media (min-width:720px){.\!container{max-width:720px!important}.container{max-width:720px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em;margin-top:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-bottom:1.2em;margin-top:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);font-weight:500;text-decoration:underline}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-bottom:1.25em;margin-top:1.25em;padding-inline-start:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-bottom:1.25em;margin-top:1.25em;padding-inline-start:1.625em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-counters);font-weight:400}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-bottom:3em;margin-top:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){border-inline-start-color:var(--tw-prose-quote-borders);border-inline-start-width:.25rem;color:var(--tw-prose-quotes);font-style:italic;font-weight:500;margin-bottom:1.6em;margin-top:1.6em;padding-inline-start:1em;quotes:"\201C""\201D""\2018""\2019"}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-size:2.25em;font-weight:800;line-height:1.1111111;margin-bottom:.8888889em;margin-top:0}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:900}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-size:1.5em;font-weight:700;line-height:1.3333333;margin-bottom:1em;margin-top:2em}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:800}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-size:1.25em;font-weight:600;line-height:1.6;margin-bottom:.6em;margin-top:1.6em}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:700}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;line-height:1.5;margin-bottom:.5em;margin-top:1.5em}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:700}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:2em;margin-top:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-bottom:2em;margin-top:2em}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:2em;margin-top:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){border-radius:.3125rem;box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows)/10%),0 3px 0 rgb(var(--tw-prose-kbd-shadows)/10%);color:var(--tw-prose-kbd);font-family:inherit;font-size:.875em;font-weight:500;padding-inline-end:.375em;padding-bottom:.1875em;padding-top:.1875em;padding-inline-start:.375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-size:.875em;font-weight:600}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:var(--tw-prose-pre-bg);border-radius:.375rem;color:var(--tw-prose-pre-code);font-size:.875em;font-weight:400;line-height:1.7142857;margin-bottom:1.7142857em;margin-top:1.7142857em;overflow-x:auto;padding-inline-end:1.1428571em;padding-bottom:.8571429em;padding-top:.8571429em;padding-inline-start:1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-radius:0;border-width:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;padding:0}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.875em;line-height:1.7142857;margin-bottom:2em;margin-top:2em;table-layout:auto;width:100%}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-color:var(--tw-prose-th-borders);border-bottom-width:1px}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em;vertical-align:bottom}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-color:var(--tw-prose-td-borders);border-bottom-width:1px}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-color:var(--tw-prose-th-borders);border-top-width:1px}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0;margin-top:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-kbd:#111827;--tw-prose-kbd-shadows:17 24 39;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:255 255 255;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0;margin-top:0}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:.5em;margin-top:.5em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:.75em;margin-top:.75em}.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:.75em;margin-top:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em;margin-top:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-top:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:2em;margin-top:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.pointer-events-none{pointer-events:none}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-3{bottom:.75rem}.left-0{left:0}.right-3{right:.75rem}.right-\[11px\]{right:11px}.top-\[26px\]{top:26px}.top-\[29px\]{top:29px}.z-10{z-index:10}.z-\[4\]{z-index:4}.z-\[52\]{z-index:52}.order-2{order:2}.order-3{order:3}.mx-\[-8px\]{margin-left:-8px;margin-right:-8px}.my-4{margin-bottom:1rem;margin-top:1rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-12{margin-left:3rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-auto{margin-top:auto}.line-clamp-4{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:4}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.\!h-5{height:1.25rem!important}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-\[20px\]{height:20px}.h-\[40px\]{height:40px}.h-\[44px\]{height:44px}.h-\[4px\]{height:4px}.h-\[80\%\]{height:80%}.h-auto{height:auto}.h-full{height:100%}.max-h-96{max-height:24rem}.max-h-\[32px\]{max-height:32px}.max-h-\[400px\]{max-height:400px}.max-h-\[48px\]{max-height:48px}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-\[100px\]{min-height:100px}.min-h-\[200px\]{min-height:200px}.min-h-\[300px\]{min-height:300px}.min-h-\[400px\]{min-height:400px}.min-h-\[80px\]{min-height:80px}.\!w-5{width:1.25rem!important}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-\[176px\]{width:176px}.w-\[20px\]{width:20px}.w-\[24px\]{width:24px}.w-\[300px\]{width:300px}.w-\[363px\]{width:363px}.w-\[44px\]{width:44px}.w-\[fit-content\]{width:-moz-fit-content;width:fit-content}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[200px\]{min-width:200px}.max-w-\[130px\]{max-width:130px}.max-w-\[250px\]{max-width:250px}.max-w-\[30\%\]{max-width:30%}.max-w-\[300px\]{max-width:300px}.max-w-\[500px\]{max-width:500px}.max-w-\[65\%\]{max-width:65%}.max-w-full{max-width:100%}.max-w-none{max-width:none}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.rotate-0{--tw-rotate:0deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180,.rotate-\[180deg\]{--tw-rotate:180deg}.rotate-180,.rotate-\[180deg\],.rotate-\[90deg\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-\[90deg\]{--tw-rotate:90deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-1{row-gap:.25rem}.gap-y-3{row-gap:.75rem}.gap-y-4{row-gap:1rem}.gap-y-6{row-gap:1.5rem}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)));border-right-width:calc(1px*var(--tw-divide-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-neutrals-400>:not([hidden])~:not([hidden]){border-color:var(--neutrals-400,#e9eef6)}.divide-neutrals-500>:not([hidden])~:not([hidden]){border-color:var(--neutrals-500,#dddfe8)}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-\[20px\]{border-radius:20px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.border{border-width:1px}.border-0{border-width:0}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-t-2{border-top-width:2px}.\!border-none{border-style:none!important}.border-none{border-style:none}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-neutrals-200{border-color:var(--neutrals-200,#f3f5ff)}.border-neutrals-400{border-color:var(--neutrals-400,#e9eef6)}.border-neutrals-600{border-color:var(--neutrals-600,#cfcfcf)}.border-neutrals-800{border-color:var(--neutrals-800,#757575)}.border-transparent{border-color:transparent}.border-b-transparent{border-bottom-color:transparent}.bg-blackout{background-color:var(--blackout,#090d13b3)}.bg-highlight{background-color:var(--highlight,#bedaff)}.bg-hues-100{background-color:var(--hues-100,#dfe6ff)}.bg-neutral-300{--tw-bg-opacity:1;background-color:rgb(212 212 212/var(--tw-bg-opacity,1))}.bg-neutrals-100{background-color:var(--neutrals-100,#f3f6fb)}.bg-neutrals-300{background-color:var(--neutrals-300,#f0f4f8)}.bg-neutrals-700{background-color:var(--neutrals-700,#89898b)}.bg-primary{background-color:var(--primary,#414fff)}.bg-transparent{background-color:transparent}.bg-white{background-color:var(--white,#fff)}.\!p-0{padding:0!important}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[16px\]{padding-left:16px;padding-right:16px}.py-0{padding-bottom:0;padding-top:0}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-\[6px\]{padding-bottom:6px;padding-top:6px}.pb-0{padding-bottom:0}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pr-0\.5{padding-right:.125rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pt-0{padding-top:0}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-\[20px\]{padding-top:20px}.pt-\[8px\]{padding-top:8px}.text-center{text-align:center}.text-right{text-align:right}.text-end{text-align:end}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.\!text-neutrals-1000{color:var(--neutrals-1000,#2b2b2d)!important}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-hues-800{color:var(--hues-800,#354487)}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64/var(--tw-text-opacity,1))}.text-neutrals-1000{color:var(--neutrals-1000,#2b2b2d)}.text-neutrals-400{color:var(--neutrals-400,#e9eef6)}.text-neutrals-500{color:var(--neutrals-500,#dddfe8)}.text-neutrals-600{color:var(--neutrals-600,#cfcfcf)}.text-neutrals-700{color:var(--neutrals-700,#89898b)}.text-neutrals-800{color:var(--neutrals-800,#757575)}.text-neutrals-900{color:var(--neutrals-900,#3f404a)}.text-primary{color:var(--primary,#414fff)}.text-white{color:var(--white,#fff)}.opacity-\[0\.7\]{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.outline-none{outline:2px solid transparent;outline-offset:2px}.\!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}.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)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}body,html{color:var(--neutrals-1000,#2b2b2d);height:100%;overflow:hidden;width:100%}.base-icon-button{align-items:center;border-style:solid;border-width:1px;display:flex;flex-direction:row;justify-content:center;&:disabled{pointer-events:none}}.base-button{align-items:center;border-style:solid;border-width:1px;display:flex;flex-direction:row;justify-content:center;&:disabled{pointer-events:none}}.text-button-primary{background-color:var(--primary,#414fff);border-color:var(--primary,#414fff);color:var(--white,#fff);&:hover{color:var(--primary,#414fff)}}.text-button-secondary{border-color:var(--primary,#414fff)}.text-button-secondary,.text-button-tertiary{background-color:transparent;color:var(--primary,#414fff)}.text-button-tertiary{border-color:transparent}.loader{animation:spin 1s linear infinite;@keyframes spin{to{transform:rotate(1turn)}}&:before{content:"";display:block}}.two-lines{display:block;text-overflow:ellipsis}.two-lines:first-line{overflow:hidden}.two-lines{-webkit-box-orient:vertical;-webkit-line-clamp:2}.base-link{color:var(--primary,#414fff);&:hover{text-decoration-line:underline}}input{-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}}.padding-0{padding:0!important}.flatpickr-input{border-bottom:2px var(--primary,#414fff);border-style:solid;color:var(--neutrals-1000,#2b2b2d);height:40px;padding:8px 6px;width:100%;&:focus-visible{outline:2px solid transparent;outline-offset:2px}&:active,&:hover{border-color:var(--neutrals-1000,#2b2b2d)}}.last\:mb-8:last-child{margin-bottom:2rem}.last\:mr-4:last-child{margin-right:1rem}.last\:pb-0:last-child{padding-bottom:0}.hover\:border-hues-600:hover{border-color:var(--hues-600,#9da4ff)}.hover\:bg-hues-100:hover{background-color:var(--hues-100,#dfe6ff)}.group:hover .group-hover\:opacity-100{opacity:1}@media (max-width:719px){.sm\:top-4{top:1rem}.sm\:flex{display:flex}.sm\:hidden{display:none}.sm\:h-3{height:.75rem}.sm\:h-\[24px\]{height:24px}.sm\:w-\[24px\]{width:24px}.sm\:w-\[calc\(100\%-30px\)\]{width:calc(100% - 30px)}.sm\:w-full{width:100%}.sm\:max-w-full{max-width:100%}.sm\:flex-col-reverse{flex-direction:column-reverse}.sm\:flex-nowrap{flex-wrap:nowrap}.sm\:items-center{align-items:center}.sm\:gap-y-5{row-gap:1.25rem}.sm\:border-0{border-width:0}.sm\:p-0{padding:0}.sm\:px-0{padding-left:0;padding-right:0}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:py-4{padding-bottom:1rem;padding-top:1rem}.sm\:py-6{padding-bottom:1.5rem;padding-top:1.5rem}.sm\:pb-2{padding-bottom:.5rem}.sm\:pt-10{padding-top:2.5rem}.sm\:hover\:bg-white:hover{background-color:var(--white,#fff)}}@media (min-width:720px){.sm-min\:px-4{padding-left:1rem;padding-right:1rem}}

package/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './constants';
+export * from './models';
+export * from './hooks';
+export * from './types';

package/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),f=require("react"),d=require("classnames"),k=require("@tabler/icons-react"),H=require("react-flatpickr"),m=require("@floating-ui/react"),_=()=>s.jsx("div",{className:"flex items-center justify-center h-full",children:s.jsx("div",{className:"loader"})}),M=({title:e,btnClassNames:t,iconWidth:r,iconHeight:n,onClick:c})=>s.jsx("button",{type:"button","aria-label":"button",className:t,title:e,onClick:c,children:s.jsx(k.IconX,{height:n||20,width:r||20})});var w=(e=>(e.ERROR="error",e.SUCCESS="success",e.IN_PROGRESS="in_progress",e))(w||{});const T=({alertDetails:e,successIcon:t,errorIcon:r,onClose:n,closeButtonTitle:c})=>{const o=()=>(e==null?void 0:e.type)===w.IN_PROGRESS?"alert-in-progress":(e==null?void 0:e.type)===w.SUCCESS?"alert-success":"alert-error";return f.useEffect(()=>{(e==null?void 0:e.type)!==w.IN_PROGRESS&&setTimeout(()=>{n==null||n()},5e3)},[e==null?void 0:e.type,n]),s.jsx("div",{className:d("alert alert-shadow fixed bottom-3 right-3 z-10",o()),children:s.jsxs("div",{className:"alert-content flex items-start",children:[s.jsx("div",{className:"alert-icon",children:(e==null?void 0:e.type)===w.IN_PROGRESS?s.jsx(_,{}):(e==null?void 0:e.type)===w.SUCCESS?t:r}),s.jsxs("div",{className:"flex flex-col gap-2 max-w-[300px]",children:[s.jsx("h3",{className:"truncate",children:e==null?void 0:e.title}),(e==null?void 0:e.text)&&s.jsx("div",{className:"alert-text truncate",title:e==null?void 0:e.text,children:e==null?void 0:e.text})]}),s.jsx(M,{title:c,onClick:n})]})})},W=({buttonClassName:e,isLoading:t=!1,title:r,disabled:n,iconAfter:c,iconBefore:o,onClick:i,isSmallButton:l})=>{const u=d(l?"font-semibold":"",c?"mr-2":"",o?"ml-2":"");return s.jsxs("button",{type:"button",className:d("base-button",e,l?"small-button":""),disabled:n||t,"aria-label":"button",onClick:h=>i==null?void 0:i(h),title:r,children:[o,t&&s.jsx(_,{}),r?l?s.jsx("h4",{className:u,children:r}):s.jsx("h3",{className:u,children:r}):null,c]})};var E=(e=>(e.MONTH="month",e.DAY="day",e))(E||{});const $=({label:e,onChange:t,value:r,options:n,calendarResolution:c=E.DAY,id:o,icon:i})=>{var g;const l=f.useRef(null);f.useEffect(()=>{var j;const p=l==null?void 0:l.current;p&&((j=p.querySelector("input"))==null||j.setAttribute("aria-label",e))},[e]);const u={...n,defaultDate:c===E.MONTH?new Date(r.getFullYear(),r.getMonth()):r},h=(p,j,N)=>{const x=`calendar__${c===E.MONTH?"month":"day"}`;N.calendarContainer&&N.calendarContainer.classList.add(x)},b=(p,j,N)=>{if(c===E.MONTH&&p.length>0){const x=n.minDate,a=n.maxDate,y=p[0].getFullYear(),R=N.calendarContainer,F="flatpickr-disabled",Y=R.querySelectorAll(".flatpickr-monthSelect-month"),A=R.querySelectorAll(".flatpickr-next-month")[0],I=R.querySelectorAll(".flatpickr-prev-month")[0];y===a.getFullYear()&&A.classList.add(F),y===x.getFullYear()&&I.classList.add(F),(y===x.getFullYear()||y===a.getFullYear())&&Y.forEach(O=>{O.classList.remove(F);const v=new Date(O.getAttribute("aria-label")),q=v.getFullYear()===x.getFullYear()&&v.getMonth()===x.getMonth(),G=v.getFullYear()===a.getFullYear()&&v.getMonth()===a.getMonth();q||G||(v<x||v>a)&&O.classList.add(F)})}};return s.jsxs("div",{className:"relative calendar",ref:l,children:[s.jsx("div",{className:"mb-1 calendar-title",children:e}),s.jsx("label",{htmlFor:o,className:"absolute cursor-pointer right-[11px] top-[29px]",children:i||s.jsx(k.IconCalendarEvent,{})}),s.jsx(H,{defaultValue:(g=c===E.MONTH?new Date(r.getFullYear(),r.getMonth()):r)==null?void 0:g.toDateString(),options:u,onChange:p=>{t(p[0])},onOpen:[b],onReady:[h],id:o})]})},B=({label:e,id:t,checked:r,checkboxIcon:n,onChange:c})=>{const o=f.useCallback(i=>{i.stopPropagation(),c==null||c(t,i.target.checked)},[c,t]);return s.jsxs("label",{className:"flex items-center cursor-pointer min-w-0 py-1",htmlFor:t,children:[s.jsx("span",{className:d("flex justify-center items-center w-4 h-4 mr-2 relative","checkbox-button"),children:r&&n}),e&&s.jsx("p",{className:d("text-neutrals-1000 flex-1 min-w-0 truncate pr-2","checkbox-button-text"),title:e,children:e}),s.jsx("input",{type:"checkbox",onChange:o,id:t,checked:r,className:"hidden"})]})},U=({title:e,icon:t,children:r,value:n})=>{const[c,o]=f.useState(!1);return s.jsxs("div",{className:`collapsible-block flex flex-col border-t-2 border-neutrals-600 ${c?"collapsible-block-open":""}`,children:[s.jsxs("div",{className:"collapsible-block-title flex cursor-pointer items-center py-4",onClick:()=>o(!c),children:[s.jsx("div",{className:`${c?"rotate-180":""} transition-transform`,children:t||s.jsx(k.IconChevronDown,{className:"w-5 h-5 mr-3"})}),s.jsxs("div",{className:"flex flex-1 items-center justify-between",children:[s.jsx("span",{children:e}),n&&s.jsx("p",{className:"body-1 text-neutrals-800",children:n})]})]}),c&&s.jsx("div",{className:"collapsible-block-content pb-4",children:r})]})},z=({text:e,highlightText:t})=>{const r=f.useMemo(()=>{var i;const n=[];if(!t)return[{id:0,text:e,highlight:!1}];const c=(t==null?void 0:t.toLowerCase())||"",o=((i=e==null?void 0:e.toLowerCase())==null?void 0:i.split(c))||"";for(let l=0,u=0;l<(o==null?void 0:o.length);l++){const h=o==null?void 0:o[l],b=h.length;h!==""&&n.push({id:n.length,highlight:!1,text:e==null?void 0:e.substring(u,u+b)}),u+=b,l!==(o==null?void 0:o.length)-1&&(n.push({id:n.length,highlight:!0,text:e==null?void 0:e.substring(u,u+t.length)}),u+=t.length)}return n},[t,e]);return s.jsx(s.Fragment,{children:r.map(n=>s.jsx("span",{className:d((n==null?void 0:n.highlight)&&"bg-highlight"),children:n==null?void 0:n.text},n==null?void 0:n.id))})},K=({icon:e,onClick:t,buttonClassName:r,disabled:n,title:c})=>s.jsx("button",{type:"button",className:d(r,"base-icon-button"),onClick:o=>t==null?void 0:t(o),disabled:n,title:c,"aria-label":"button",children:e}),P=({value:e,inputId:t,placeholder:r="",cssClass:n="",type:c="text",disabled:o,readonly:i,onChange:l,onKeyDown:u})=>{const h=d("truncate outline-none shadow-none body-1",n,i?"pointer-events-none":"");return s.jsx("input",{type:c,autoComplete:"off",id:t,placeholder:r,value:e||"",title:e?String(e):"",disabled:o,className:h,onKeyDown:u,onChange:b=>l==null?void 0:l(b.currentTarget.value)})},V=({iconBeforeInput:e,iconAfterInput:t,containerClasses:r,cssClass:n,...c})=>s.jsxs("div",{className:d("input w-full flex flex-row",r),children:[e,s.jsx(P,{cssClass:d("border-0 bg-transparent p-0 h-full shadow-none flex-1 min-w-0 rounded-none",n),...c}),t]}),Z=({url:e,title:t,linkClassName:r="",iconBefore:n,iconAfter:c})=>{const o=d(c?"mr-2":"",n?"ml-2":"");return s.jsxs("a",{href:e,target:"_blank",rel:"noopener noreferrer",className:d("base-link",r),title:t,children:[n,s.jsx("span",{className:o,children:t}),c]})},Q=({title:e,text:t,onClick:r})=>s.jsx("button",{type:"button",className:"tag flex items-center justify-center",onClick:()=>r==null?void 0:r(t||e),"aria-label":"button",children:s.jsx("h4",{children:e})}),X=({label:e,id:t,checked:r,radioIcon:n,description:c,onChange:o})=>{const i=f.useCallback(l=>{l.stopPropagation(),o==null||o(t,l.target.checked)},[o,t]);return s.jsxs("label",{className:"flex flex-col cursor-pointer min-w-0 py-[6px]",htmlFor:t,children:[s.jsxs("p",{className:"radio-label flex items-center min-w-0",children:[s.jsx("span",{className:d("flex justify-center items-center w-4 h-4 mr-2 relative","radio-button",r?"radio-button-active":""),children:r&&n}),e&&s.jsx("span",{className:"radio-title body-1 text-neutrals-1000 flex-1 min-w-0 truncate pr-2",title:e,children:e})]}),c&&s.jsx("span",{className:"radio-description ml-6 text-neutrals-800 body-2 w-auto flex items-center",title:c,children:c}),s.jsx("input",{type:"radio",onChange:i,id:t,checked:r,className:"hidden"})]})};var S=(e=>(e.Closed="Closed",e.Opened="Opened",e))(S||{}),C=(e=>(e.LG="Large",e.SM="Small",e))(C||{});const J=({portalId:e,state:t=S.Opened,heading:r,size:n,onClose:c,children:o,overlayClassName:i,containerClassName:l,dividers:u=!0,closeButtonTitle:h})=>{const{refs:b,context:g}=m.useFloating({open:t!==S.Closed&&!!t,onOpenChange:c}),p=m.useRole(g,{role:"dialog"}),j=m.useDismiss(g,{outsidePress:!0}),{getFloatingProps:N}=m.useInteractions([p,j]),x=f.useCallback(a=>{a==null||a.preventDefault(),a==null||a.stopPropagation(),c()},[c]);return s.jsx(m.FloatingPortal,{id:e,children:t!==S.Closed&&s.jsx(m.FloatingOverlay,{className:d("z-[52] flex items-center justify-center bg-blackout p-4",i),children:s.jsx(m.FloatingFocusManager,{context:g,children:s.jsxs("div",{className:d("relative max-h-full modal rounded bg-white flex flex-col shadow w-full",n===C.LG&&"max-w-[65%]",n===C.SM&&"max-w-[30%]",u&&"divide-neutrals-400 divide-y",l,"sm:w-full sm:max-w-full sm:px-4 sm:py-6"),ref:b.setFloating,...N({onClick(a){a.stopPropagation()}}),children:[s.jsxs("div",{className:"flex flex-row justify-between py-3 px-6 items-center mb-2 modal-heading sm:p-0 sm:pb-2",children:[r&&(typeof r=="string"?s.jsx("h2",{className:"flex-1 min-w-0 mr-3 modal-heading-title sm:h3",children:r}):r),s.jsx(M,{title:h,onClick:x,btnClassNames:"sm:h-[24px] sm:w-[24px] sm:top-4"})]}),o.map(a=>a)]})})})})},D=e=>e.state===S.Closed?null:s.jsx(J,{...e}),ee=({triggerButton:e,options:t,selectedOption:r,disabled:n,containerClassName:c,openedClassName:o,onOptionSelect:i})=>{const[l,u]=f.useState(!1),{refs:h,floatingStyles:b,context:g}=m.useFloating({open:l,onOpenChange:n?void 0:u,placement:"bottom-end",middleware:[m.offset(8),m.flip(),m.shift()],whileElementsMounted:m.autoUpdate}),p=m.useClick(g),j=m.useDismiss(g,{outsidePress:!0}),{getReferenceProps:N,getFloatingProps:x}=m.useInteractions([p,j]);return s.jsxs(s.Fragment,{children:[s.jsx("div",{ref:h.setReference,...N({onClick(a){a.stopPropagation()}}),className:d(c,l&&o),children:e}),l&&s.jsx("div",{ref:h.setFloating,style:b,className:"flex flex-col z-10 dropdown-menu-shadow bg-white dropdown-container rounded",...x(),children:t.map(a=>s.jsx("div",{onClick:y=>{y.stopPropagation(),i==null||i(a.key),u(!1)},className:d("text-neutrals-900 body-3 cursor-pointer dropdown-item min-w-[200px]",r===a.key&&"bg-hues-100"),children:s.jsxs("div",{className:"p-2 hover:bg-hues-100 h-full dropdown-item-text flex items-center gap-x-2",title:a.title,children:[a.icon?a.icon:null,s.jsx("p",{children:a==null?void 0:a.title})]})},a.key))})]})},se=24,ne=24;function te(e=719){const[t,r]=f.useState(()=>typeof window<"u"?window.innerWidth<e:!1);return f.useEffect(()=>{const n=window.matchMedia(`(max-width: ${e}px)`),c=o=>{r(o.matches)};return r(n.matches),n.addEventListener("change",c),()=>n.removeEventListener("change",c)},[e]),t}var L=(e=>(e.Enter="Enter",e))(L||{});exports.Alert=T;exports.AlertType=w;exports.Button=W;exports.Calendar=$;exports.Checkbox=B;exports.CloseButton=M;exports.CollapsibleBlock=U;exports.Dropdown=ee;exports.HighlightText=z;exports.IconButton=K;exports.Input=P;exports.InputWithIcon=V;exports.KeyboardKey=L;exports.Link=Z;exports.Loader=_;exports.PopUpSize=C;exports.PopUpState=S;exports.Popup=D;exports.Radio=X;exports.TREE_NODE_ARROW_SIZE=se;exports.TREE_NODE_PADDING=ne;exports.Tag=Q;exports.useIsMobile=te;

package/index.mjs

@@ -0,0 +1,605 @@
+import { jsx as s, jsxs as m, Fragment as P } from "react/jsx-runtime";
+import { useEffect as k, useRef as U, useCallback as R, useState as _, useMemo as V } from "react";
+import u from "classnames";
+import { IconX as z, IconCalendarEvent as Q, IconChevronDown as T } from "@tabler/icons-react";
+import X from "react-flatpickr";
+import { useFloating as Y, useRole as Z, useDismiss as L, useInteractions as j, FloatingPortal as B, FloatingOverlay as J, FloatingFocusManager as K, autoUpdate as D, offset as ee, flip as ne, shift as re, useClick as te } from "@floating-ui/react";
+const A = () => /* @__PURE__ */ s("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ s("div", { className: "loader" }) }), G = ({
+  title: e,
+  btnClassNames: r,
+  iconWidth: t,
+  iconHeight: n,
+  onClick: c
+}) => /* @__PURE__ */ s(
+  "button",
+  {
+    type: "button",
+    "aria-label": "button",
+    className: r,
+    title: e,
+    onClick: c,
+    children: /* @__PURE__ */ s(z, { height: n || 20, width: t || 20 })
+  }
+);
+var x = /* @__PURE__ */ ((e) => (e.ERROR = "error", e.SUCCESS = "success", e.IN_PROGRESS = "in_progress", e))(x || {});
+const he = ({
+  alertDetails: e,
+  successIcon: r,
+  errorIcon: t,
+  onClose: n,
+  closeButtonTitle: c
+}) => {
+  const o = () => (e == null ? void 0 : e.type) === x.IN_PROGRESS ? "alert-in-progress" : (e == null ? void 0 : e.type) === x.SUCCESS ? "alert-success" : "alert-error";
+  return k(() => {
+    (e == null ? void 0 : e.type) !== x.IN_PROGRESS && setTimeout(() => {
+      n == null || n();
+    }, 5e3);
+  }, [e == null ? void 0 : e.type, n]), /* @__PURE__ */ s(
+    "div",
+    {
+      className: u(
+        "alert alert-shadow fixed bottom-3 right-3 z-10",
+        o()
+      ),
+      children: /* @__PURE__ */ m("div", { className: "alert-content flex items-start", children: [
+        /* @__PURE__ */ s("div", { className: "alert-icon", children: (e == null ? void 0 : e.type) === x.IN_PROGRESS ? /* @__PURE__ */ s(A, {}) : (e == null ? void 0 : e.type) === x.SUCCESS ? r : t }),
+        /* @__PURE__ */ m("div", { className: "flex flex-col gap-2 max-w-[300px]", children: [
+          /* @__PURE__ */ s("h3", { className: "truncate", children: e == null ? void 0 : e.title }),
+          (e == null ? void 0 : e.text) && /* @__PURE__ */ s("div", { className: "alert-text truncate", title: e == null ? void 0 : e.text, children: e == null ? void 0 : e.text })
+        ] }),
+        /* @__PURE__ */ s(G, { title: c, onClick: n })
+      ] })
+    }
+  );
+}, pe = ({
+  buttonClassName: e,
+  isLoading: r = !1,
+  title: t,
+  disabled: n,
+  iconAfter: c,
+  iconBefore: o,
+  onClick: i,
+  isSmallButton: l
+}) => {
+  const d = u(
+    l ? "font-semibold" : "",
+    c ? "mr-2" : "",
+    o ? "ml-2" : ""
+  );
+  return /* @__PURE__ */ m(
+    "button",
+    {
+      type: "button",
+      className: u(
+        "base-button",
+        e,
+        l ? "small-button" : ""
+      ),
+      disabled: n || r,
+      "aria-label": "button",
+      onClick: (h) => i == null ? void 0 : i(h),
+      title: t,
+      children: [
+        o,
+        r && /* @__PURE__ */ s(A, {}),
+        t ? l ? /* @__PURE__ */ s("h4", { className: d, children: t }) : /* @__PURE__ */ s("h3", { className: d, children: t }) : null,
+        c
+      ]
+    }
+  );
+};
+var E = /* @__PURE__ */ ((e) => (e.MONTH = "month", e.DAY = "day", e))(E || {});
+const fe = ({
+  label: e,
+  onChange: r,
+  value: t,
+  options: n,
+  calendarResolution: c = E.DAY,
+  id: o,
+  icon: i
+}) => {
+  var g;
+  const l = U(null);
+  k(() => {
+    var N;
+    const p = l == null ? void 0 : l.current;
+    p && ((N = p.querySelector("input")) == null || N.setAttribute("aria-label", e));
+  }, [e]);
+  const d = {
+    ...n,
+    defaultDate: c === E.MONTH ? new Date(t.getFullYear(), t.getMonth()) : t
+  }, h = (p, N, w) => {
+    const f = `calendar__${c === E.MONTH ? "month" : "day"}`;
+    w.calendarContainer && w.calendarContainer.classList.add(f);
+  }, b = (p, N, w) => {
+    if (c === E.MONTH && p.length > 0) {
+      const f = n.minDate, a = n.maxDate, y = p[0].getFullYear(), M = w.calendarContainer, S = "flatpickr-disabled", H = M.querySelectorAll(
+        ".flatpickr-monthSelect-month"
+      ), q = M.querySelectorAll(
+        ".flatpickr-next-month"
+      )[0], $ = M.querySelectorAll(
+        ".flatpickr-prev-month"
+      )[0];
+      y === a.getFullYear() && q.classList.add(S), y === f.getFullYear() && $.classList.add(S), (y === f.getFullYear() || y === a.getFullYear()) && H.forEach((O) => {
+        O.classList.remove(S);
+        const v = new Date(O.getAttribute("aria-label")), I = v.getFullYear() === f.getFullYear() && v.getMonth() === f.getMonth(), W = v.getFullYear() === a.getFullYear() && v.getMonth() === a.getMonth();
+        I || W || (v < f || v > a) && O.classList.add(S);
+      });
+    }
+  };
+  return /* @__PURE__ */ m("div", { className: "relative calendar", ref: l, children: [
+    /* @__PURE__ */ s("div", { className: "mb-1 calendar-title", children: e }),
+    /* @__PURE__ */ s(
+      "label",
+      {
+        htmlFor: o,
+        className: "absolute cursor-pointer right-[11px] top-[29px]",
+        children: i || /* @__PURE__ */ s(Q, {})
+      }
+    ),
+    /* @__PURE__ */ s(
+      X,
+      {
+        defaultValue: (g = c === E.MONTH ? new Date(t.getFullYear(), t.getMonth()) : t) == null ? void 0 : g.toDateString(),
+        options: d,
+        onChange: (p) => {
+          r(p[0]);
+        },
+        onOpen: [b],
+        onReady: [h],
+        id: o
+      }
+    )
+  ] });
+}, be = ({
+  label: e,
+  id: r,
+  checked: t,
+  checkboxIcon: n,
+  onChange: c
+}) => {
+  const o = R(
+    (i) => {
+      i.stopPropagation(), c == null || c(r, i.target.checked);
+    },
+    [c, r]
+  );
+  return /* @__PURE__ */ m(
+    "label",
+    {
+      className: "flex items-center cursor-pointer min-w-0 py-1",
+      htmlFor: r,
+      children: [
+        /* @__PURE__ */ s(
+          "span",
+          {
+            className: u(
+              "flex justify-center items-center w-4 h-4 mr-2 relative",
+              "checkbox-button"
+            ),
+            children: t && n
+          }
+        ),
+        e && /* @__PURE__ */ s(
+          "p",
+          {
+            className: u(
+              "text-neutrals-1000 flex-1 min-w-0 truncate pr-2",
+              "checkbox-button-text"
+            ),
+            title: e,
+            children: e
+          }
+        ),
+        /* @__PURE__ */ s(
+          "input",
+          {
+            type: "checkbox",
+            onChange: o,
+            id: r,
+            checked: t,
+            className: "hidden"
+          }
+        )
+      ]
+    }
+  );
+}, ge = ({
+  title: e,
+  icon: r,
+  children: t,
+  value: n
+}) => {
+  const [c, o] = _(!1);
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: `collapsible-block flex flex-col border-t-2 border-neutrals-600 ${c ? "collapsible-block-open" : ""}`,
+      children: [
+        /* @__PURE__ */ m(
+          "div",
+          {
+            className: "collapsible-block-title flex cursor-pointer items-center py-4",
+            onClick: () => o(!c),
+            children: [
+              /* @__PURE__ */ s("div", { className: `${c ? "rotate-180" : ""} transition-transform`, children: r || /* @__PURE__ */ s(T, { className: "w-5 h-5 mr-3" }) }),
+              /* @__PURE__ */ m("div", { className: "flex flex-1 items-center justify-between", children: [
+                /* @__PURE__ */ s("span", { children: e }),
+                n && /* @__PURE__ */ s("p", { className: "body-1 text-neutrals-800", children: n })
+              ] })
+            ]
+          }
+        ),
+        c && /* @__PURE__ */ s("div", { className: "collapsible-block-content pb-4", children: t })
+      ]
+    }
+  );
+}, Ne = ({ text: e, highlightText: r }) => {
+  const t = V(() => {
+    var i;
+    const n = [];
+    if (!r)
+      return [{ id: 0, text: e, highlight: !1 }];
+    const c = (r == null ? void 0 : r.toLowerCase()) || "", o = ((i = e == null ? void 0 : e.toLowerCase()) == null ? void 0 : i.split(c)) || "";
+    for (let l = 0, d = 0; l < (o == null ? void 0 : o.length); l++) {
+      const h = o == null ? void 0 : o[l], b = h.length;
+      h !== "" && n.push({
+        id: n.length,
+        highlight: !1,
+        text: e == null ? void 0 : e.substring(
+          d,
+          d + b
+        )
+      }), d += b, l !== (o == null ? void 0 : o.length) - 1 && (n.push({
+        id: n.length,
+        highlight: !0,
+        text: e == null ? void 0 : e.substring(
+          d,
+          d + r.length
+        )
+      }), d += r.length);
+    }
+    return n;
+  }, [r, e]);
+  return /* @__PURE__ */ s(P, { children: t.map((n) => /* @__PURE__ */ s(
+    "span",
+    {
+      className: u((n == null ? void 0 : n.highlight) && "bg-highlight"),
+      children: n == null ? void 0 : n.text
+    },
+    n == null ? void 0 : n.id
+  )) });
+}, we = ({
+  icon: e,
+  onClick: r,
+  buttonClassName: t,
+  disabled: n,
+  title: c
+}) => /* @__PURE__ */ s(
+  "button",
+  {
+    type: "button",
+    className: u(t, "base-icon-button"),
+    onClick: (o) => r == null ? void 0 : r(o),
+    disabled: n,
+    title: c,
+    "aria-label": "button",
+    children: e
+  }
+), se = ({
+  value: e,
+  inputId: r,
+  placeholder: t = "",
+  cssClass: n = "",
+  type: c = "text",
+  disabled: o,
+  readonly: i,
+  onChange: l,
+  onKeyDown: d
+}) => {
+  const h = u(
+    "truncate outline-none shadow-none body-1",
+    n,
+    i ? "pointer-events-none" : ""
+  );
+  return /* @__PURE__ */ s(
+    "input",
+    {
+      type: c,
+      autoComplete: "off",
+      id: r,
+      placeholder: t,
+      value: e || "",
+      title: e ? String(e) : "",
+      disabled: o,
+      className: h,
+      onKeyDown: d,
+      onChange: (b) => l == null ? void 0 : l(b.currentTarget.value)
+    }
+  );
+}, ye = ({
+  iconBeforeInput: e,
+  iconAfterInput: r,
+  containerClasses: t,
+  cssClass: n,
+  ...c
+}) => /* @__PURE__ */ m("div", { className: u("input w-full flex flex-row", t), children: [
+  e,
+  /* @__PURE__ */ s(
+    se,
+    {
+      cssClass: u(
+        "border-0 bg-transparent p-0 h-full shadow-none flex-1 min-w-0 rounded-none",
+        n
+      ),
+      ...c
+    }
+  ),
+  r
+] }), ve = ({
+  url: e,
+  title: r,
+  linkClassName: t = "",
+  iconBefore: n,
+  iconAfter: c
+}) => {
+  const o = u(
+    c ? "mr-2" : "",
+    n ? "ml-2" : ""
+  );
+  return /* @__PURE__ */ m(
+    "a",
+    {
+      href: e,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: u("base-link", t),
+      title: r,
+      children: [
+        n,
+        /* @__PURE__ */ s("span", { className: o, children: r }),
+        c
+      ]
+    }
+  );
+}, xe = ({ title: e, text: r, onClick: t }) => /* @__PURE__ */ s(
+  "button",
+  {
+    type: "button",
+    className: "tag flex items-center justify-center",
+    onClick: () => t == null ? void 0 : t(r || e),
+    "aria-label": "button",
+    children: /* @__PURE__ */ s("h4", { children: e })
+  }
+), Ee = ({
+  label: e,
+  id: r,
+  checked: t,
+  radioIcon: n,
+  description: c,
+  onChange: o
+}) => {
+  const i = R(
+    (l) => {
+      l.stopPropagation(), o == null || o(r, l.target.checked);
+    },
+    [o, r]
+  );
+  return /* @__PURE__ */ m(
+    "label",
+    {
+      className: "flex flex-col cursor-pointer min-w-0 py-[6px]",
+      htmlFor: r,
+      children: [
+        /* @__PURE__ */ m("p", { className: "radio-label flex items-center min-w-0", children: [
+          /* @__PURE__ */ s(
+            "span",
+            {
+              className: u(
+                "flex justify-center items-center w-4 h-4 mr-2 relative",
+                "radio-button",
+                t ? "radio-button-active" : ""
+              ),
+              children: t && n
+            }
+          ),
+          e && /* @__PURE__ */ s(
+            "span",
+            {
+              className: "radio-title body-1 text-neutrals-1000 flex-1 min-w-0 truncate pr-2",
+              title: e,
+              children: e
+            }
+          )
+        ] }),
+        c && /* @__PURE__ */ s(
+          "span",
+          {
+            className: "radio-description ml-6 text-neutrals-800 body-2 w-auto flex items-center",
+            title: c,
+            children: c
+          }
+        ),
+        /* @__PURE__ */ s(
+          "input",
+          {
+            type: "radio",
+            onChange: i,
+            id: r,
+            checked: t,
+            className: "hidden"
+          }
+        )
+      ]
+    }
+  );
+};
+var F = /* @__PURE__ */ ((e) => (e.Closed = "Closed", e.Opened = "Opened", e))(F || {}), C = /* @__PURE__ */ ((e) => (e.LG = "Large", e.SM = "Small", e))(C || {});
+const ce = ({
+  portalId: e,
+  state: r = F.Opened,
+  heading: t,
+  size: n,
+  onClose: c,
+  children: o,
+  overlayClassName: i,
+  containerClassName: l,
+  dividers: d = !0,
+  closeButtonTitle: h
+}) => {
+  const { refs: b, context: g } = Y({
+    open: r !== F.Closed && !!r,
+    onOpenChange: c
+  }), p = Z(g, { role: "dialog" }), N = L(g, { outsidePress: !0 }), { getFloatingProps: w } = j([p, N]), f = R(
+    (a) => {
+      a == null || a.preventDefault(), a == null || a.stopPropagation(), c();
+    },
+    [c]
+  );
+  return /* @__PURE__ */ s(B, { id: e, children: r !== F.Closed && /* @__PURE__ */ s(
+    J,
+    {
+      className: u(
+        "z-[52] flex items-center justify-center bg-blackout p-4",
+        i
+      ),
+      children: /* @__PURE__ */ s(K, { context: g, children: /* @__PURE__ */ m(
+        "div",
+        {
+          className: u(
+            "relative max-h-full modal rounded bg-white flex flex-col shadow w-full",
+            n === C.LG && "max-w-[65%]",
+            n === C.SM && "max-w-[30%]",
+            d && "divide-neutrals-400 divide-y",
+            l,
+            "sm:w-full sm:max-w-full sm:px-4 sm:py-6"
+          ),
+          ref: b.setFloating,
+          ...w({
+            onClick(a) {
+              a.stopPropagation();
+            }
+          }),
+          children: [
+            /* @__PURE__ */ m("div", { className: "flex flex-row justify-between py-3 px-6 items-center mb-2 modal-heading sm:p-0 sm:pb-2", children: [
+              t && (typeof t == "string" ? /* @__PURE__ */ s("h2", { className: "flex-1 min-w-0 mr-3 modal-heading-title sm:h3", children: t }) : t),
+              /* @__PURE__ */ s(
+                G,
+                {
+                  title: h,
+                  onClick: f,
+                  btnClassNames: "sm:h-[24px] sm:w-[24px] sm:top-4"
+                }
+              )
+            ] }),
+            o.map((a) => a)
+          ]
+        }
+      ) })
+    }
+  ) });
+}, Fe = (e) => e.state === F.Closed ? null : /* @__PURE__ */ s(ce, { ...e }), Se = ({
+  triggerButton: e,
+  options: r,
+  selectedOption: t,
+  disabled: n,
+  containerClassName: c,
+  openedClassName: o,
+  onOptionSelect: i
+}) => {
+  const [l, d] = _(!1), { refs: h, floatingStyles: b, context: g } = Y({
+    open: l,
+    onOpenChange: n ? void 0 : d,
+    placement: "bottom-end",
+    middleware: [ee(8), ne(), re()],
+    whileElementsMounted: D
+  }), p = te(g), N = L(g, { outsidePress: !0 }), { getReferenceProps: w, getFloatingProps: f } = j([
+    p,
+    N
+  ]);
+  return /* @__PURE__ */ m(P, { children: [
+    /* @__PURE__ */ s(
+      "div",
+      {
+        ref: h.setReference,
+        ...w({
+          onClick(a) {
+            a.stopPropagation();
+          }
+        }),
+        className: u(c, l && o),
+        children: e
+      }
+    ),
+    l && /* @__PURE__ */ s(
+      "div",
+      {
+        ref: h.setFloating,
+        style: b,
+        className: "flex flex-col z-10 dropdown-menu-shadow bg-white dropdown-container rounded",
+        ...f(),
+        children: r.map((a) => /* @__PURE__ */ s(
+          "div",
+          {
+            onClick: (y) => {
+              y.stopPropagation(), i == null || i(a.key), d(!1);
+            },
+            className: u(
+              "text-neutrals-900 body-3 cursor-pointer dropdown-item min-w-[200px]",
+              t === a.key && "bg-hues-100"
+            ),
+            children: /* @__PURE__ */ m(
+              "div",
+              {
+                className: "p-2 hover:bg-hues-100 h-full dropdown-item-text flex items-center gap-x-2",
+                title: a.title,
+                children: [
+                  a.icon ? a.icon : null,
+                  /* @__PURE__ */ s("p", { children: a == null ? void 0 : a.title })
+                ]
+              }
+            )
+          },
+          a.key
+        ))
+      }
+    )
+  ] });
+}, Me = 24, Oe = 24;
+function Ce(e = 719) {
+  const [r, t] = _(
+    () => typeof window < "u" ? window.innerWidth < e : !1
+  );
+  return k(() => {
+    const n = window.matchMedia(`(max-width: ${e}px)`), c = (o) => {
+      t(o.matches);
+    };
+    return t(n.matches), n.addEventListener("change", c), () => n.removeEventListener("change", c);
+  }, [e]), r;
+}
+var oe = /* @__PURE__ */ ((e) => (e.Enter = "Enter", e))(oe || {});
+export {
+  he as Alert,
+  x as AlertType,
+  pe as Button,
+  fe as Calendar,
+  be as Checkbox,
+  G as CloseButton,
+  ge as CollapsibleBlock,
+  Se as Dropdown,
+  Ne as HighlightText,
+  we as IconButton,
+  se as Input,
+  ye as InputWithIcon,
+  oe as KeyboardKey,
+  ve as Link,
+  A as Loader,
+  C as PopUpSize,
+  F as PopUpState,
+  Fe as Popup,
+  Ee as Radio,
+  Me as TREE_NODE_ARROW_SIZE,
+  Oe as TREE_NODE_PADDING,
+  xe as Tag,
+  Ce as useIsMobile
+};

package/models/alert.d.ts

@@ -0,0 +1,6 @@
+import { AlertType } from '../constants/alert';
+export interface AlertDetails {
+    title?: string;
+    text?: string;
+    type: AlertType;
+}

package/models/dropdown-item.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface DropdownItem {
+    key: string;
+    title: string;
+    icon?: ReactNode;
+}

package/models/index.d.ts

@@ -0,0 +1,2 @@
+export * from './alert';
+export * from './dropdown-item';

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@epam/statgpt-ui-components",
+  "version": "0.1.0-rc.0",
+  "license": "MIT",
+  "dependencies": {
+    "react-flatpickr": "^4.0.11",
+    "react": "19.1.0",
+    "classnames": "^2.5.1",
+    "@epam/statgpt-shared-toolkit": "0.1.0-rc.0",
+    "@tabler/icons-react": "^3.34.1",
+    "@floating-ui/react": "^0.27.14"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./index.css": "./index.css"
+  },
+  "main": "index",
+  "browser": "index.js",
+  "module": "index.mjs",
+  "types": "./index.d.ts"
+}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './keyboard';
+export * from './pop-up';

package/types/keyboard.d.ts

@@ -0,0 +1,3 @@
+export declare enum KeyboardKey {
+    Enter = "Enter"
+}

package/types/pop-up.d.ts

@@ -0,0 +1,8 @@
+export declare enum PopUpState {
+    Closed = "Closed",
+    Opened = "Opened"
+}
+export declare enum PopUpSize {
+    LG = "Large",
+    SM = "Small"
+}