@hbuesing/ui-library 5.0.0-beta.10 → 5.0.0-beta.11

package/dist/components/button/button.d.ts

@@ -1,32 +1,6 @@
-import React, { ComponentPropsWithoutRef } from 'react';
-interface Button extends ComponentPropsWithoutRef<'button'> {
-    label: string;
-    dark?: boolean;
-    size?: 'small' | 'medium' | 'large';
-}
-interface Theme {
-    buttonType: 'primary' | 'outline';
-    theme: `#${string}` | 'success' | 'warning' | 'error';
-}
-interface NoTheme {
-    buttonType: 'secondary' | 'text';
-    theme?: never;
-}
+import React from 'react';
+import type { ButtonProps } from './types';
 /**
- * @example
- * ```jsx
- * <Button
- *  buttonType={'primary'}
- *  label={'Click Me!'}
- *  dark={true}
- *  disabled={false}
- *  size={'large'}
- *  theme={'success'}
- *  onClick={() => {alert('click)}}
- * />
- * ```
- *
- * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/button)
+ * [Button documentation](https://www.ui-library.hbsng.com/docs/components/button)
  */
-export declare function Button(props: Button & (Theme | NoTheme)): React.JSX.Element;
-export {};
+export declare function Button(props: ButtonProps): React.JSX.Element;

package/dist/components/button/types.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type { Size, Status } from '@common/types';
+export type ButtonProps = ComponentPropsWithRef<'button'> & AdditionalButtonProps;
+type AdditionalButtonProps = {
+    children: ReactNode;
+    variant: 'filled' | 'outlined' | 'text';
+    color?: `#${string}` | Status;
+    disabled?: boolean;
+    size?: Size;
+} & ({
+    href: string;
+    target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop';
+} | {
+    href?: never;
+    target?: never;
+});
+export {};

package/dist/components/check/checkbox/checkbox.d.ts

@@ -0,0 +1,15 @@
+import type { CheckboxProps } from './types';
+import React from 'react';
+/**
+ * @example
+ * ```jsx
+ * <Checkbox
+ *  checked={...}
+ *  toggleCheck={...}
+ *  label={"Toggle checkbox"}
+ * />
+ * ```
+ *
+ * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/checkbox).
+ */
+export declare function Checkbox(props: CheckboxProps): React.JSX.Element;

package/dist/components/check/checkbox/index.d.ts

@@ -1 +1 @@
-export * from './Checkbox';
+export * from './checkbox';

package/dist/components/check/checkbox/types.d.ts

@@ -0,0 +1,8 @@
+import type { BaseComponentProps, Label } from '@common/types';
+export type CheckboxProps = BaseComponentProps<'input'> & AdditionalCheckboxProps;
+type AdditionalCheckboxProps = Label & {
+    checked: boolean;
+    toggleCheck: (value: boolean) => void;
+    color?: string;
+};
+export {};

package/dist/components/check/radio/index.d.ts

@@ -1 +1,2 @@
 export * from './radio';
+export type { RadioOption } from './types';

package/dist/components/check/radio/radio.d.ts

@@ -1,28 +1,15 @@
-import React, { ComponentPropsWithoutRef } from 'react';
-interface Radio extends ComponentPropsWithoutRef<'input'> {
-    options: RadioOption[];
-    value: string;
-    valueChanged: (value: string) => void;
-    color?: string;
-    dark?: boolean;
-}
-export interface RadioOption {
-    name: string;
-    value: string;
-    disabled?: boolean;
-}
+import type { RadioProps } from './types';
+import React from 'react';
 /**
  * @example
  * ```jsx
  * <Radio
- *  value={...}
- *  valueChanged={...}
- *  label={"..."}
+ *  selected={...}
+ *  selectionChanged={...}
  *  options={[...]}
  * />
  * ```
  *
  * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/radio).
  */
-export declare function Radio(props: Radio): React.JSX.Element;
-export {};
+export declare function Radio(props: RadioProps): React.JSX.Element;

package/dist/components/check/radio/types.d.ts

@@ -0,0 +1,14 @@
+import type { BaseComponentProps } from '@common/types';
+export type RadioProps = BaseComponentProps<'input'> & AdditionalRadioProps;
+type AdditionalRadioProps = {
+    options: RadioOption[];
+    selected: string;
+    selectionChanged: (value: string) => void;
+    color?: string;
+};
+export type RadioOption = {
+    name: string;
+    value: string;
+    disabled?: boolean;
+};
+export {};

package/dist/components/common/types.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+export type Size = 'small' | 'medium' | 'large';
+export type Status = 'success' | 'warning' | 'error';
+export type Label = {
+    label: string;
+    children?: never;
+} | {
+    label?: never;
+    children: ReactNode;
+};
+export type BaseComponentProps<T extends ElementType> = ComponentPropsWithRef<T> & BaseProps;
+export type BaseProps = {
+    dark?: boolean;
+};

package/dist/components/icon/icon.d.ts

@@ -1,15 +1,5 @@
-import React, { ComponentPropsWithoutRef } from 'react';
-interface Icon {
-    src: string;
-    color?: string | undefined;
-    size?: 'small' | 'medium' | 'large';
-}
-interface IMG extends ComponentPropsWithoutRef<'img'> {
-    type: 'img';
-}
-interface SVG extends ComponentPropsWithoutRef<'svg'> {
-    type: 'svg';
-}
+import React from 'react';
+import type { IconProps } from './types';
 /**
  * @example
  * ```jsx
@@ -18,5 +8,4 @@ interface SVG extends ComponentPropsWithoutRef<'svg'> {
  *
  * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/icon).
  */
-export declare function Icon(props: Icon & (SVG | IMG)): React.JSX.Element;
-export {};
+export declare function Icon(props: IconProps): React.JSX.Element;

package/dist/components/icon/types.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import type { Size } from '@common/types';
+export type IconProps = AdditionalIconProps;
+type AdditionalIconProps = {
+    src: string;
+    size?: Size;
+} & ({
+    type: 'img';
+    altText?: never;
+} & ComponentPropsWithoutRef<'img'> | {
+    type: 'svg';
+    altText?: string;
+} & ComponentPropsWithoutRef<'svg'>);
+export {};

package/dist/components/input/index.d.ts

@@ -1,2 +1,2 @@
-export * from './customInput';
-export * from './passwordInput';
+export * from './input';
+export * from './inputDecorator';

package/dist/components/input/input.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { InputProps } from './types';
+export declare function Input(props: Omit<InputProps, 'placeholder'>): React.JSX.Element;

package/dist/components/input/inputDecorator.d.ts

@@ -0,0 +1,3 @@
+import type { InputDecoratorProps } from './types';
+import React from 'react';
+export declare function InputDecorator(props: InputDecoratorProps): React.JSX.Element;

package/dist/components/input/types.d.ts

@@ -0,0 +1,19 @@
+import type { BaseComponentProps } from '@common/types';
+import type { InputDecorator } from './inputDecorator';
+import type { IconProps } from '../icon/types';
+import type { ReactElement } from 'react';
+import { Icon } from '../icon';
+export type InputProps = BaseComponentProps<'input'> & AdditionalInputProps;
+type AdditionalInputProps = {
+    label: string;
+    variant: 'outlined' | 'basic';
+    children?: ReactElement<InputDecoratorProps, typeof InputDecorator>;
+    error?: boolean;
+    helpText?: string;
+};
+export type InputDecoratorProps = {
+    children: ReactElement<IconProps, typeof Icon> | ReactElement<'img'> | ReactElement<'svg'> | string;
+    position?: 'left' | 'right';
+    onFocus?: boolean;
+};
+export {};

package/dist/components/modal/modal.d.ts

@@ -1,35 +1,3 @@
-import React, { ReactNode } from 'react';
-interface BaseProps {
-    title: string;
-    dark?: boolean;
-    theme?: 'success' | 'warning' | 'error';
-}
-interface BaseModal extends BaseProps {
-    action: () => void;
-    children?: never;
-    message: string | string[];
-}
-interface CustomModal extends BaseProps {
-    action?: never;
-    children: ReactNode;
-    message?: never;
-}
-type Modal = BaseModal | CustomModal;
-interface Notification {
-    type: 'notification';
-    buttonLabel?: string;
-    cancelAction?: never;
-    cancelLabel?: never;
-    confirmLabel?: never;
-    timeout?: number;
-}
-interface Question {
-    type: 'question';
-    buttonLabel?: never;
-    cancelAction?: () => void;
-    cancelLabel?: string;
-    confirmLabel?: string;
-    timeout?: never;
-}
-export declare function Modal(props: Modal & (Notification | Question)): React.JSX.Element;
-export {};
+import type { ModalProps } from './types';
+import React from 'react';
+export declare function Modal(props: ModalProps): React.JSX.Element;

package/dist/components/modal/types.d.ts

@@ -0,0 +1,39 @@
+import type { BaseProps, Status } from '@common/types';
+import type { ReactNode } from 'react';
+export type ModalProps = BaseProps & AdditionalModalProps;
+type AdditionalModalProps = {
+    title: string;
+    theme?: Status;
+} & (({
+    confirmAction: () => void;
+    confirmLabel: string;
+    message: string[];
+    children?: never;
+} & (Notification | Question)) | (CustomContent & ({
+    confirmAction: () => void;
+    timeout: number;
+} | {
+    confirmAction?: never;
+    timeout?: never;
+})));
+type Notification = {
+    variant: 'notification';
+    cancelAction?: never;
+    cancelLabel?: never;
+    timeout?: number;
+};
+type Question = {
+    variant: 'question';
+    cancelAction: () => void;
+    cancelLabel: string;
+    timeout?: never;
+};
+type CustomContent = {
+    children: ReactNode;
+    cancelAction?: never;
+    cancelLabel?: never;
+    confirmLabel?: never;
+    message?: never;
+    variant?: never;
+};
+export {};

package/dist/components/provider/index.d.ts

@@ -0,0 +1 @@
+export * from './themeProvider';

package/dist/components/provider/themeProvider.d.ts

@@ -0,0 +1,12 @@
+import React, { type ReactNode } from 'react';
+type Theme = 'dark' | 'light';
+type ThemeContextType = {
+    theme: Theme;
+    setTheme: (newTheme: Theme) => void;
+};
+export declare function useTheme(): ThemeContextType;
+export declare function ThemeProvider(props: Props): React.JSX.Element;
+type Props = {
+    children: ReactNode;
+};
+export {};

package/dist/hooks/clickOutside.d.ts

@@ -1 +1 @@
-export declare function useClickOutsideRef<T extends HTMLElement>(callback: () => void): import("react").MutableRefObject<T>;
+export declare function useClickOutsideRef<T extends HTMLElement>(callback: () => void): import("react").RefObject<T | null>;

package/dist/index.css

@@ -0,0 +1 @@
+:root{--uil-black: #000000;--uil-black-alt: #222222;--uil-black-light: #2b2b2b;--uil-black-lighter: #333333;--uil-white: #ffffff;--uil-grey: #f3f3f3;--uil-grey-alt: #cfcfcf;--uil-grey-dark: #878787;--uil-grey-darker: #676767;--uil-outline-focus: #2779ca;--uil-default-hover: 39, 121, 202;--uil-success-hover: 0, 156, 115;--uil-warning-hover: 255, 215, 0;--uil-error-hover: 207, 9, 52;--uil-custom-hover: 0, 0, 0;--uil-success: #009c73;--uil-error: #CF0934;--uil-question: #00416A;--uil-warning: #FFD700;--uil-warning-alt: #d1b21a;--uil-xxxs: .125rem;--uil-xxs: .25rem;--uil-xs: .5rem;--uil-s: .75rem;--uil-m: 1rem;--uil-l: 1.25rem;--uil-xl: 1.5rem;--uil-xxl: 1.75rem;--uil-xxxl: 2rem}.M{min-height:fit-content;min-width:fit-content;height:fit-content;width:fit-content}.N{font-size:var(--uil-m);line-height:var(--uil-m)}.O{font-size:var(--uil-l);line-height:var(--uil-l)}.P{font-size:var(--uil-xxl);line-height:var(--uil-xxl)}.Q{cursor:pointer}.R{cursor:not-allowed}.S{--uil-black: #ffffff;--uil-outline-focus: #7bb4ff;--uil-grey-dark: #c4c4c4;--uil-grey-alt: #c3c3c3;--uil-default-hover: 50, 121, 202;--uil-black-alt: #c3c3c3;--uil-success: #00cc96;--uil-success-hover: 0, 163, 115;--uil-warning: #FFFF3E;--uil-warning-alt: #dcdc38;--uil-warning-hover: 255, 255, 30;--uil-error: #fb0b41;--uil-error-hover: 239, 34, 79;--uil-custom-hover: 255, 255, 255}.r .o{position:relative;display:flex;align-items:center}.r .o.s{border-bottom:1px solid var(--uil-grey-alt)}.r .o.s .i{padding-left:0}.r .o.s .u{left:0}.r .o.s .a{border-bottom:1px solid var(--uil-grey-alt)}.r .o.s .t.q{margin-right:.875rem}.r .o.c{border:1px solid var(--uil-grey-alt);border-radius:5px}.r .o.c:has(.t.z){border:transparent}.r .o.c .a{border:1px solid var(--uil-grey-alt);border-radius:5px}.r .o.c .t.q{margin-left:.875rem}.r .o.c .t.T{margin-right:.875rem}.r .o.s:not(:has(.i:disabled)):not(.d):hover:not(:focus-within),.r .o.c:not(:has(.i:disabled)):not(.d):hover:not(:focus-within){border-color:var(--uil-black)}.r .o.s:not(:has(.i:disabled)):not(.d):hover:not(:focus-within) .a,.r .o.c:not(:has(.i:disabled)):not(.d):hover:not(:focus-within) .a{border-color:var(--uil-black)}.r .o.s:focus-within,.r .o.s:has(.i:not(:placeholder-shown)),.r .o.c:focus-within,.r .o.c:has(.i:not(:placeholder-shown)){border-color:transparent}.r .o.s:has(.t.q),.r .o.c:has(.t.q){flex-direction:row-reverse}.r .o.d{border-color:var(--uil-error)}.r .o.d .a,.r .o.d .i:focus~.a,.r .o.d .i:not(:placeholder-shown)~.a{border-color:var(--uil-error)}.r .o.d .u{color:var(--uil-error);opacity:1}.r .o .a{border-radius:0;padding:var(--uil-s);margin:0;position:absolute;top:-.8125rem;left:0;right:0;bottom:0;pointer-events:none;visibility:hidden;border:none}.r .o .a .U{visibility:hidden;padding:0 2px}.r .o .u{position:absolute;top:20%;left:var(--uil-m);cursor:text;color:var(--uil-black);opacity:.6;transition:top .25s ease-in-out}.r .o .b{font-size:var(--uil-l);line-height:var(--uil-l);transition:font-size .25s ease,line-height .25s ease}.r .o .b.V{margin-left:var(--uil-xxxs)}.r .o .i{box-sizing:border-box;width:100%;color:var(--uil-black);background-color:transparent;border-radius:0;padding:var(--uil-xs);padding-left:.875rem;border:none}.r .o .i:focus,.r .o .i:not(:placeholder-shown){outline:none;border-color:transparent}.r .o .i:disabled{color:var(--uil-grey-dark)}.r .o .i:disabled~.a{border-color:var(--uil-grey-alt)}.r .o .i:disabled:not(:placeholder-shown)~.a{border-color:var(--uil-grey-alt)}.r .o .i:disabled~.u{color:var(--uil-grey-dark);opacity:1;cursor:default}.r .o .t{opacity:.75}.r .o .t.x{visibility:hidden}.r .o .i:focus~.t.x,.r .o .i:not(:placeholder-shown)~.t.x{visibility:visible}.r .o .i:focus~.u,.r .o .i:not(:placeholder-shown)~.u,.r .o .i:focus~.t.x~.u,.r .o .t.z~.u{top:-40%}.r .o:not(.d) .i:not(:disabled):focus~.u,.r .o:not(.d) .i:not(:disabled):not(:placeholder-shown)~.u{opacity:1;color:var(--uil-outline-focus)}.r .o .i:focus~.a,.r .o .i:not(:placeholder-shown)~.a,.r .o .i:focus~.t.x~.a,.r .o .t.z~.a{visibility:visible}.r .o .i:focus~.a,.r .o .i:not(:placeholder-shown)~.a{border-color:var(--uil-outline-focus);border-width:2px}.r .o .i:focus~.u .b,.r .o .i:not(:placeholder-shown)~.u .b,.r .o .i:focus~.t.x~.u .b,.r .o .t.z~.u .b,.r .o .i:focus~.a .b,.r .o .i:not(:placeholder-shown)~.a .b,.r .o .i:focus~.t.x~.a .b,.r .o .t.z~.a .b{font-size:var(--uil-s);line-height:var(--uil-s)}.r .X{color:var(--uil-grey-dark);font-size:var(--uil-m);line-height:var(--uil-m);margin-left:var(--uil-s);margin-top:var(--uil-xxs)}.r .X.d{color:var(--uil-error)}.W{height:1rem;width:1rem}.Y{height:2rem;width:2rem}.Z{height:3rem;width:3rem}.e{position:fixed;left:0;top:0;width:100%;height:100%;background-color:#00000080;z-index:99}.e .n{position:absolute;top:30%;left:50%;transform:translate(-50%);width:95%;box-shadow:0 0 6px 0 var(--uil-black);border-radius:5px;z-index:999}@media (min-width: 1025px){.e .n{width:75%}}@media (min-width: 1250px){.e .n{width:55%}}@media (min-width: 1920px){.e .n{width:35%}}.e .n.B{box-shadow:none}.e .n .F{color:var(--uil-white);background-color:var(--uil-question);display:flex;justify-content:space-between;font-size:var(--uil-xl);line-height:var(--uil-xl);font-weight:700;margin:0;padding:var(--uil-s);border-top-left-radius:3px;border-top-right-radius:3px}@media (min-width: 1025px){.e .n .F{font-size:var(--uil-xxxl);line-height:var(--uil-xxxl);padding:var(--uil-m)}}.e .n .F._{background-color:var(--uil-success)}.e .n .F.rr{background-color:var(--uil-error)}.e .n .F.or{color:var(--uil-black);background-color:var(--uil-warning)}.e .n .m{color:var(--uil-black);background-color:var(--uil-white);padding:var(--uil-m);border-bottom-left-radius:3px;border-bottom-right-radius:3px;display:flex;flex-direction:column;gap:var(--uil-m)}@media (min-width: 1025px){.e .n .m{padding:var(--uil-l);gap:var(--uil-xxxl)}}.e .n .m.B{color:var(--uil-white);background-color:var(--uil-black-alt)}.e .n .m .ir{font-size:var(--uil-l);line-height:var(--uil-l);margin:0}.e .n .m .G{display:flex;justify-content:space-between}.e .n .m .G.lr{justify-content:end}.e .n .H{background-color:var(--uil-grey-alt)}.e .n .H .ar{border:2px solid var(--uil-grey-dark);animation-duration:2s;animation-iteration-count:initial;animation-name:I}@keyframes I{0%{width:100%}to{width:0}}.l{border:1px solid transparent;border-radius:5px;box-sizing:border-box;background-color:transparent;cursor:pointer}.l:not(:disabled).v{color:var(--uil-white);background-color:var(--uil-outline-focus);box-shadow:0 0 2px 0 var(--uil-black-alt)}.l:not(:disabled).v:hover{background-color:rgba(var(--uil-default-hover),.9)}.l:not(:disabled).h{color:var(--uil-outline-focus);border-color:var(--uil-outline-focus)}.l:not(:disabled).h:not(:disabled):hover{background-color:rgba(var(--uil-default-hover),.12)}.l:not(:disabled).p{color:var(--uil-outline-focus)}.l:not(:disabled).p:not(:disabled):hover{background-color:rgba(var(--uil-default-hover),.08)}.l:not(:disabled).w.v{color:var(--uil-white);background-color:var(--uil-success)}.l:not(:disabled).w.v:hover{background-color:rgba(var(--uil-success-hover),.9)}.l:not(:disabled).w.h{color:var(--uil-success);border-color:var(--uil-success)}.l:not(:disabled).w.h:hover{background-color:rgba(var(--uil-success-hover),.15)}.l:not(:disabled).w.p{color:var(--uil-success)}.l:not(:disabled).w.p:hover{background-color:rgba(var(--uil-success-hover),.07)}.l:not(:disabled).k.v{color:var(--uil-black-light);background-color:var(--uil-warning)}.l:not(:disabled).k.v:hover{background-color:rgba(var(--uil-warning-hover),.7)}.l:not(:disabled).k.h{color:var(--uil-warning-alt);border-color:var(--uil-warning)}.l:not(:disabled).k.h:hover{background-color:rgba(var(--uil-warning-hover),.1)}.l:not(:disabled).k.p{color:var(--uil-warning-alt)}.l:not(:disabled).k.p:hover{background-color:rgba(var(--uil-warning-hover),.1)}.l:not(:disabled).y.v{color:var(--uil-white);background-color:var(--uil-error)}.l:not(:disabled).y.v:hover{background-color:rgba(var(--uil-error-hover),.9)}.l:not(:disabled).y.h{color:var(--uil-error);border-color:var(--uil-error)}.l:not(:disabled).y.h:hover{background-color:rgba(var(--uil-error-hover),.12)}.l:not(:disabled).y.p{color:var(--uil-error)}.l:not(:disabled).y.p:hover{background-color:rgba(var(--uil-error-hover),.08)}.l:not(:disabled).C.v:hover,.l:not(:disabled).C.h:hover,.l:not(:disabled).C.p:hover{opacity:.9;background-color:rgba(var(--uil-custom-hover),.05)}.l.D{cursor:default;color:var(--uil-grey-dark)}.l.D.v{background-color:var(--uil-grey)}.l.D.h{border-color:var(--uil-grey-dark)}.l.er{letter-spacing:1px;padding:var(--uil-xxs)}.l.tr{letter-spacing:2px;padding:var(--uil-xs)}.l.nr{letter-spacing:2px;padding:var(--uil-s)}.g{display:flex;align-items:center;gap:var(--uil-s)}.g .f{position:relative;display:block;min-height:var(--uil-l);min-width:var(--uil-l);border:2px solid var(--uil-black-alt);box-sizing:border-box}.g .f:has(input:disabled){background-color:var(--uil-grey);border-color:var(--uil-grey-dark)}.g .f.E{border-color:var(--uil-grey)}.g .f.E:has(input:disabled){background-color:var(--uil-black-light);border-color:var(--uil-grey-dark)}.g .f input{position:absolute;cursor:pointer;height:0;width:0;opacity:0}.g .f input:checked~.A{transform:scale(1)}.g .f input:disabled~.A{background-color:var(--uil-grey-dark)}.g .f .A{position:absolute;top:25%;left:25%;background-color:var(--uil-black-alt);width:var(--uil-xs);height:var(--uil-xs);transform:scale(0);transition:.1s ease}.g .f .A.E{background-color:var(--uil-white)}.j{display:flex;flex-direction:column;gap:var(--uil-m)}.j .J{color:var(--uil-black-alt)}.j .J.ur{color:var(--uil-white)}.j .K,.j .K .dr{border-radius:50%}.sr{border-radius:2px}.L{color:var(--uil-black-alt)}.L.cr{color:var(--uil-white)}

package/dist/index.d.ts

@@ -1,7 +1,9 @@
-export { CustomInput, PasswordInput, PasswordRule } from './components/input/index';
+import '@common/styles/variables.scss';
+export { Input, InputDecorator } from './components/input/index';
 export { Modal } from './components/modal/index';
-export { Radio, RadioOption } from './components/check/radio/index';
+export { Radio, type RadioOption } from './components/check/radio/index';
 export { Checkbox } from './components/check/checkbox/index';
 export { Button } from './components/button/index';
 export { Icon } from './components/icon/index';
+export { ThemeProvider, useTheme } from './components/provider/index';
 export { useClickOutsideRef, useContrastColor } from './hooks/index';

package/dist/index.js

@@ -1 +1 @@
-var H=":root{--uil-black:#000;--uil-black-alt:#222;--uil-black-light:#2b2b2b;--uil-black-lighter:#333;--uil-white:#fff;--uil-grey:#f3f3f3;--uil-grey-alt:#cfcfcf;--uil-grey-dark:#878787;--uil-grey-darker:#676767;--uil-outline-focus:#1e90ff;--uil-outline-disabled:#8b0000;--uil-success-light:#01dfa5;--uil-success:#009c73;--uil-success-dark:#014334;--uil-error-light:#ff073a;--uil-error:#a30029;--uil-error-dark:#4e0015;--uil-question:#00416a;--uil-warning-light:#ffff8a;--uil-warning:gold;--uil-warning-dark:#7b6300;--uil-xxxs:.125rem;--uil-xxs:.25rem;--uil-xs:.5rem;--uil-s:.75rem;--uil-m:1rem;--uil-l:1.25rem;--uil-xl:1.5rem;--uil-xxl:1.75rem;--uil-xxxl:2rem;--uil-font-small:var(--uil-m)}",N=document.createElement("style");N.setAttribute("nonce","6c37a3c72494fb7ae846eef0f3aace2f");N.appendChild(document.createTextNode(H));document.head.appendChild(N);var F={};import v,{useState as Q}from"react";import J from"react";import B from"react";function w(r){let{height:o,type:t,color:l,size:n="medium",src:i,width:s,...c}=r,d=c,m=t==="svg",g={fill:m?l:void 0,height:o??a(),width:s??a()};function a(){switch(n){case"small":return"var(--uil-m)";case"medium":return"var(--uil-xxxl)";case"large":return"3rem";default:throw new Error("[Icon] Unsupported size")}}return B.createElement(B.Fragment,null,m?B.createElement("svg",{style:g,...c},B.createElement("use",{href:i})):B.createElement("img",{src:i,alt:d.alt,style:g,...d}))}var G=":root{--uil-black:#000;--uil-black-alt:#222;--uil-black-light:#2b2b2b;--uil-black-lighter:#333;--uil-white:#fff;--uil-grey:#f3f3f3;--uil-grey-alt:#cfcfcf;--uil-grey-dark:#878787;--uil-grey-darker:#676767;--uil-outline-focus:#1e90ff;--uil-outline-disabled:#8b0000;--uil-success-light:#01dfa5;--uil-success:#009c73;--uil-success-dark:#014334;--uil-error-light:#ff073a;--uil-error:#a30029;--uil-error-dark:#4e0015;--uil-question:#00416a;--uil-warning-light:#ffff8a;--uil-warning:gold;--uil-warning-dark:#7b6300;--uil-xxxs:.125rem;--uil-xxs:.25rem;--uil-xs:.5rem;--uil-s:.75rem;--uil-m:1rem;--uil-l:1.25rem;--uil-xl:1.5rem;--uil-xxl:1.75rem;--uil-xxxl:2rem;--uil-font-small:var(--uil-m)}._2ZI9c{display:block;position:relative}._2ZI9c .UQrL-{background:linear-gradient(0deg,var(--uil-white) 9px,transparent 0);color:var(--uil-black);cursor:text;font-weight:700;left:var(--uil-xxs);opacity:.6;padding:0 var(--uil-xxxs);position:absolute;top:25%;transition:top .25s ease-in-out}._2ZI9c .Afhbg{background-color:var(--uil-white);border:1px solid var(--uil-black);border-radius:0;box-sizing:border-box;color:var(--uil-black);padding:var(--uil-xs);width:100%}._2ZI9c .Afhbg::placeholder{color:transparent;height:0;width:0}._2ZI9c .Afhbg:focus{outline:1px solid var(--uil-outline-focus)}._2ZI9c .Afhbg:disabled{background-color:var(--uil-grey);border:2px solid var(--uil-outline-disabled);color:var(--uil-grey-dark);cursor:not-allowed}._2ZI9c .Afhbg:disabled~.UQrL-{background:transparent;color:var(--uil-grey-dark);cursor:not-allowed}._2ZI9c .Afhbg:disabled~.jyZw8{cursor:not-allowed;fill:var(--uil-grey-dark)}._2ZI9c .Afhbg:disabled:not(:placeholder-shown)~.UQrL-{background:linear-gradient(0deg,var(--uil-grey) 8px,transparent 0)}._2ZI9c .jyZw8{align-items:center;display:flex;justify-content:center;position:absolute;right:var(--uil-xs);top:50%;transform:translateY(-50%);fill:var(--uil-black);opacity:.5}._2ZI9c .Afhbg:focus~.UQrL-,._2ZI9c .Afhbg:not(:placeholder-shown)~.UQrL-{opacity:1;top:-30%}._2ZI9c .Afhbg:focus~.jyZw8,._2ZI9c .Afhbg:not(:placeholder-shown)~.jyZw8{opacity:1}.sVwXd{position:relative}.sVwXd .C7SEe{cursor:pointer;fill:var(--uil-black-alt);margin-bottom:var(--uil-xxs)}.sVwXd .C7SEe:has(~._2ZI9c>.Afhbg:not(:placeholder-shown),~._2ZI9c:focus-within){opacity:0;transition:opacity .3s,visibility .3s;visibility:hidden}.sVwXd .BBViL{background-color:rgba(34,34,34,.9);border-radius:3px;box-sizing:border-box;color:var(--uil-white);font-size:var(--uil-font-small);left:0;line-height:var(--uil-font-small);padding:var(--uil-s);position:absolute;top:0;width:100%;z-index:1}.sVwXd .BBViL .y-XoC{background-color:transparent;border:none;border-bottom:1px solid var(--uil-white);color:var(--uil-white);cursor:pointer;display:block;margin-bottom:var(--uil-m);margin-left:auto;padding:0}._7OCl3{display:flex;flex-direction:column;gap:var(--uil-xs);margin-left:var(--uil-xs);margin-top:var(--uil-m)}._7OCl3 .Xcapo{align-items:center;display:flex;font-size:var(--uil-font-small);gap:var(--uil-xxs);line-height:var(--uil-font-small)}",T=document.createElement("style");T.setAttribute("nonce","6c37a3c72494fb7ae846eef0f3aace2f");T.appendChild(document.createTextNode(G));document.head.appendChild(T);var b={inputWrapper:"_2ZI9c",label:"UQrL-",input:"Afhbg",icon:"jyZw8",tooltipWrapper:"sVwXd",tooltipIcon:"C7SEe",tooltip:"BBViL",tooltipButton:"y-XoC",passwordRules:"_7OCl3",rule:"Xcapo"};var X=".qsJIq{height:fit-content;min-height:fit-content;min-width:fit-content;width:fit-content}.F32Q-{font-size:var(--uil-m);line-height:var(--uil-m)}.X-64D{font-size:var(--uil-l);line-height:var(--uil-l)}.-qZo-{font-size:var(--uil-xxl);line-height:var(--uil-xxl)}._43r4P{cursor:pointer}.Pz1Kx{cursor:not-allowed}",P=document.createElement("style");P.setAttribute("nonce","6c37a3c72494fb7ae846eef0f3aace2f");P.appendChild(document.createTextNode(X));document.head.appendChild(P);var u={fit:"qsJIq",fontSmall:"F32Q-",fontMedium:"X-64D",fontLarge:"-qZo-",pointer:"_43r4P",notAllowed:"Pz1Kx"};function S(r){let{iconColor:o,iconSrc:t,inputColor:l,label:n,toggle:i,valueChanged:s,...c}=r;return J.createElement("label",{className:b.inputWrapper,htmlFor:c.id},J.createElement("input",{className:`${b.input} ${u.fontMedium}`,onChange:d=>{s(d.target.value)},placeholder:n,style:{color:l},...c}),t&&J.createElement("div",{className:b.icon,onClick:i},J.createElement(w,{type:"svg",src:t,width:24,height:24,color:o})),J.createElement("span",{className:`${b.label} ${u.fontMedium}`,style:{color:l}},n))}import{useEffect as K,useRef as q}from"react";function Y(r){let o=q(null);return K(()=>{if(!o.current)return;function t(l){o.current&&!o.current.contains(l.target)&&r()}return document.addEventListener("click",t),document.addEventListener("touchend",t),()=>{document.removeEventListener("click",t),document.removeEventListener("touchend",t)}},[r]),o}function Z(r){let{tooltipClose:o,tooltipIcon:t,tooltipText:l,...n}=r,[i,s]=Q(!1),c=Y(d);function d(){s(!1)}return v.createElement(v.Fragment,null,t?v.createElement("div",{className:b.tooltipWrapper,ref:c},i&&v.createElement("div",{className:b.tooltip},o&&v.createElement("button",{className:`${b.tooltipButton} ${u.fit}`,onClick:d},o),v.createElement("span",null,l)),v.createElement("div",{className:`${b.tooltipIcon} ${u.fit}`,onClick:()=>{s(!i)}},v.createElement(w,{src:t,size:"small",type:"svg"})),v.createElement(S,{...n})):v.createElement(S,{...n}))}import y,{useEffect as D,useState as R}from"react";function x(){let r=Math.floor(Math.random()*100+1);return`uil-${(Date.now()*r).toString(32)}-${(Math.random()*r).toString(16).replace(/\./g,"")}`}function ee(r){let{capsLockWarning:o,rules:t,ruleChecked:l,ruleUnchecked:n,setFailedRules:i,...s}=r,[c,d]=R(!1);D(()=>{m()},[r.value]),D(()=>{if(!o)return;function a(e){d(e.getModifierState("CapsLock"))}return document.addEventListener("keydown",a),()=>{document.removeEventListener("keydown",a)}},[]);function m(){let a=[];t.forEach(e=>{g(e)||a.push(e)}),i?.(a)}function g(a){let e;if(a.type){if(!a.count)throw new Error("count must not be empty if a type is provided");switch(a.type){case"minLength":e=`[a-zA-Z0-9\xDF\xC4\xE4\xD6\xF6\xDC\xFC._!"\`'#%&\xA7,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{${a.count},}`;break;case"maxLength":e=`^[a-zA-Z0-9\xDF\xC4\xE4\xD6\xF6\xDC\xFC._!"\`'#%&,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{0,${a.count}}$`;break;case"letters":e=`[a-zA-Z\xDF\xC4\xE4\xD6\xF6\xDC\xFC]{${a.count},}`;break;case"numbers":e=`[0-9]{${a.count},}`;break;case"special":e=`[._!"\`'#%&\xA7,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{${a.count},}`;break;case"upper":e=`[A-Z\xC4\xD6\xDC]{${a.count},}`;break;default:throw new Error("unrecognized rule type provided")}}else{if(!a.pattern)throw new Error("pattern must not be an empty string");e=a.pattern}return new RegExp(e).test(r.value.toString())}return y.createElement("div",null,y.createElement(Z,{...s}),y.createElement("div",{className:b.passwordRules},c&&y.createElement("div",{className:b.rule},o),t.map(a=>y.createElement("div",{key:x(),className:b.rule},y.createElement(w,{type:"svg",src:g(a)?l:n,height:12,width:12}),y.createElement("span",null,a.label)))))}import p,{useEffect as ie}from"react";import te from"react";var re=new RegExp(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/);function _(r){if(!re.test(r))throw new Error(`[useContrastColor] invalid hex color: ${r}`);r=r.replace("#","");let o;r.length===3?o=[parseInt(r.substring(0),16)/255,parseInt(r.substring(1),16)/255,parseInt(r.substring(2),16)/255]:o=[parseInt(r.substring(0,2),16)/255,parseInt(r.substring(2,4),16)/255,parseInt(r.substring(4,6),16)/255];let[t,l,n]=o.map(s=>s<=.04045?s/12.92:((s+.055)/1.055)**2.4);return .2126*t+.7152*l+.0722*n>.179?"#000000":"#ffffff"}var oe=".oxJ0B{border:1px solid var(--uil-black-light);border-radius:5px;box-shadow:0 0 2px 0 var(--uil-black-alt);box-sizing:border-box}.oxJ0B:hover{box-shadow:inset 0 0 0 10rem rgba(0,0,0,.15)}.oxJ0B._38M-P{border-color:var(--uil-grey-darker);color:var(--uil-white)}.oxJ0B._38M-P.y4M-U{background-color:var(--uil-success)}.oxJ0B._38M-P.NvSRC{background-color:var(--uil-warning);color:var(--uil-black)}.oxJ0B._38M-P.H5ZYH{background-color:var(--uil-error);border-color:var(--uil-black-light)}.oxJ0B.ypaSt{background-color:var(--uil-white);color:var(--uil-black-light)}.oxJ0B.kzMY1{background-color:transparent;box-shadow:none}.oxJ0B.kzMY1:hover{border-width:2px;margin:-1px}.oxJ0B.kzMY1.y4M-U{border-color:var(--uil-success);color:var(--uil-success-dark)}.oxJ0B.kzMY1.NvSRC{border-color:var(--uil-warning);color:var(--uil-warning-dark)}.oxJ0B.kzMY1.H5ZYH{border-color:var(--uil-error);color:var(--uil-error)}.oxJ0B.kvfFh{background-color:transparent;border-color:transparent;box-shadow:none;color:var(--uil-black-alt);text-decoration:underline}.oxJ0B.kvfFh:hover{background-color:rgba(0,0,0,.05)}.oxJ0B.wYnzF{color:var(--uil-grey-darker)}.oxJ0B.wYnzF._38M-P,.oxJ0B.wYnzF.ypaSt{background-color:var(--uil-grey);border-color:var(--uil-grey-darker)}.oxJ0B.wYnzF._38M-P:hover,.oxJ0B.wYnzF.ypaSt:hover{box-shadow:0 0 2px 0 var(--uil-black-alt)}.oxJ0B.wYnzF.ypaSt{background-color:transparent}.oxJ0B.wYnzF.kzMY1{border-color:var(--uil-grey-darker);color:var(--uil-grey-darker)}.oxJ0B.wYnzF.kzMY1:hover{border-width:1px;box-shadow:none;margin:0}.oxJ0B.wYnzF.kvfFh:hover{background-color:transparent}.oxJ0B.jDuJV{box-shadow:none;color:var(--uil-white)}.oxJ0B.jDuJV:hover{box-shadow:inset 0 0 0 10rem hsla(0,0%,100%,.15)}.oxJ0B.jDuJV._38M-P.y4M-U{background-color:var(--uil-success-dark);border-color:var(--uil-success);color:var(--uil-success-light)}.oxJ0B.jDuJV._38M-P.NvSRC{background-color:var(--uil-warning-dark);border-color:var(--uil-warning);color:var(--uil-warning-light)}.oxJ0B.jDuJV._38M-P.H5ZYH{background-color:var(--uil-error-dark);border-color:var(--uil-error);color:var(--uil-error-light)}.oxJ0B.jDuJV.ypaSt{background-color:var(--uil-black-lighter);border-color:var(--uil-grey-dark)}.oxJ0B.jDuJV.kzMY1:hover{box-shadow:none}.oxJ0B.jDuJV.kzMY1.y4M-U{border-color:var(--uil-success);color:var(--uil-success)}.oxJ0B.jDuJV.kzMY1.y4M-U:hover{color:var(--uil-success-light)}.oxJ0B.jDuJV.kzMY1.NvSRC{border-color:var(--uil-warning);color:var(--uil-warning)}.oxJ0B.jDuJV.kzMY1.NvSRC:hover{color:var(--uil-warning-light)}.oxJ0B.jDuJV.kzMY1.H5ZYH{border-color:var(--uil-error);color:var(--uil-error)}.oxJ0B.jDuJV.kzMY1.H5ZYH:hover{color:var(--uil-error-light)}.oxJ0B.jDuJV.kvfFh:hover{background-color:hsla(0,0%,100%,.1);box-shadow:none}.oxJ0B.jDuJV.wYnzF{background-color:var(--uil-black-lighter);border-color:var(--uil-grey-dark);box-shadow:none;color:var(--uil-grey-dark)}.oxJ0B.jDuJV.wYnzF:hover{box-shadow:none}.oxJ0B.jDuJV.wYnzF.ypaSt{background-color:var(--uil-black-light)}.oxJ0B.jDuJV.wYnzF.kzMY1{background-color:transparent}.oxJ0B.jDuJV.wYnzF.kzMY1,.oxJ0B.jDuJV.wYnzF.kzMY1:hover{border-color:var(--uil-grey-dark);color:var(--uil-grey-dark)}.oxJ0B.jDuJV.wYnzF.kzMY1:hover{border-width:1px;box-shadow:none;margin:0}.oxJ0B.jDuJV.wYnzF.kvfFh{background-color:transparent;border-color:transparent}.oxJ0B.Hzvfb{letter-spacing:1px;padding:var(--uil-xxs)}.oxJ0B.S24A-{letter-spacing:2px;padding:var(--uil-xs)}.oxJ0B.r5HG9{letter-spacing:2px;padding:var(--uil-s)}",L=document.createElement("style");L.setAttribute("nonce","6c37a3c72494fb7ae846eef0f3aace2f");L.appendChild(document.createTextNode(oe));document.head.appendChild(L);var C={button:"oxJ0B",primary:"_38M-P",success:"y4M-U",warning:"NvSRC",error:"H5ZYH",secondary:"ypaSt",outline:"kzMY1",text:"kvfFh",disabled:"wYnzF",dark:"jDuJV",small:"Hzvfb",medium:"S24A-",large:"r5HG9"};function $(r){let{buttonType:o,theme:t,label:l,dark:n,disabled:i,size:s="medium",type:c,...d}=r;function m(){if(!(o!=="primary"&&o!=="outline"||i||!t?.includes("#")))return o==="primary"?{color:_(t),backgroundColor:t,borderColor:n?"var(--uil-black-light)":"var(--uil-grey-darker)"}:{color:t,backgroundColor:n?"var(--uil-black-light)":"var(--uil-white)",borderColor:t}}function g(){let a=t&&!t.includes("#")?` ${C[t]}`:"",e=C[s];switch(s){case"small":e+=` ${u.fontSmall}`;break;case"medium":e+=` ${u.fontMedium}`;break;case"large":e+=` ${u.fontLarge}`;break;default:throw new Error("[Button] Unsupported size")}return`${u.fit} ${i?u.notAllowed:u.pointer} ${C.button} ${C[o]} ${e}${n?` ${C.dark}`:""}${i?` ${C.disabled}`:""}${a}`}return te.createElement("button",{style:m(),className:g(),type:c??"button",disabled:i,...d},l)}var ae=".g-04T{background-color:rgba(0,0,0,.5);height:100%;left:0;position:fixed;top:0;width:100%;z-index:99}.g-04T .ppA-g{border-radius:5px;box-shadow:0 0 6px 0 var(--uil-black);left:50%;position:absolute;top:30%;transform:translateX(-50%);width:95%;z-index:999}@media (min-width:1025px){.g-04T .ppA-g{width:75%}}@media (min-width:1250px){.g-04T .ppA-g{width:55%}}@media (min-width:1920px){.g-04T .ppA-g{width:35%}}.g-04T .ppA-g.Y0GnA{box-shadow:none}.g-04T .ppA-g .wwzhe{background-color:var(--uil-question);border-top-left-radius:3px;border-top-right-radius:3px;color:var(--uil-white);display:flex;font-size:var(--uil-xl);font-weight:700;justify-content:space-between;line-height:var(--uil-xl);margin:0;padding:var(--uil-s)}@media (min-width:1025px){.g-04T .ppA-g .wwzhe{font-size:var(--uil-xxxl);line-height:var(--uil-xxxl);padding:var(--uil-m)}}.g-04T .ppA-g .wwzhe.fclcz{background-color:var(--uil-success)}.g-04T .ppA-g .wwzhe.beRs4{background-color:var(--uil-error)}.g-04T .ppA-g .wwzhe.cs1cC{background-color:var(--uil-warning);color:var(--uil-black)}.g-04T .ppA-g .ac-4b{background-color:var(--uil-white);border-bottom-left-radius:3px;border-bottom-right-radius:3px;color:var(--uil-black);display:flex;flex-direction:column;gap:var(--uil-m);padding:var(--uil-m)}@media (min-width:1025px){.g-04T .ppA-g .ac-4b{gap:var(--uil-xxxl);padding:var(--uil-l)}}.g-04T .ppA-g .ac-4b.Y0GnA{background-color:var(--uil-black-alt);color:var(--uil-white)}.g-04T .ppA-g .ac-4b .deBwN{font-size:var(--uil-l);line-height:var(--uil-l);margin:0}.g-04T .ppA-g .ac-4b .jax-l{display:flex;justify-content:space-between}.g-04T .ppA-g .ac-4b .jax-l.m43zP{justify-content:end}.g-04T .ppA-g .ZPfvr{background-color:var(--uil-grey-alt)}.g-04T .ppA-g .ZPfvr ._3eDvA{animation-duration:2s;animation-iteration-count:1;animation-name:IzdkG;border:2px solid var(--uil-grey-dark)}@keyframes IzdkG{0%{width:100%}to{width:0}}",W=document.createElement("style");W.setAttribute("nonce","6c37a3c72494fb7ae846eef0f3aace2f");W.appendChild(document.createTextNode(ae));document.head.appendChild(W);var f={modalWrapper:"g-04T",modal:"ppA-g",dark:"Y0GnA",header:"wwzhe",success:"fclcz",error:"beRs4",warning:"cs1cC",content:"ac-4b",modalText:"deBwN",buttonWrapper:"jax-l",single:"m43zP",progressWrapper:"ZPfvr",progressBar:"_3eDvA",progress:"IzdkG"};function le(r){let{action:o,buttonLabel:t="",cancelAction:l,cancelLabel:n="",children:i,confirmLabel:s="",dark:c=!1,message:d,timeout:m,title:g,theme:a,type:e}=r,k;ie(()=>{if(!(!m||!o))return k=setTimeout(()=>o(),m),()=>{clearTimeout(k)}},[]);function O(){if(o)return clearTimeout(k),o()}return p.createElement("div",{className:f.modalWrapper},p.createElement("div",{className:`${f.modal} ${c?f.dark:""}`},p.createElement("div",{className:`${a?`${f.header} ${f[a]}`:f.header}`},g),m&&p.createElement("div",{className:f.progressWrapper},p.createElement("div",{className:f.progressBar,style:{animationDuration:`${m/1e3+.5}s`}})),p.createElement("div",{className:`${f.content} ${c?f.dark:""}`},i||p.createElement(p.Fragment,null,p.createElement("div",null,Array.isArray(d)?d.map(U=>p.createElement("p",{key:x(),className:f.modalText},U)):p.createElement("p",{className:f.modalText},d)),p.createElement("div",{className:`${f.buttonWrapper} ${e==="notification"?f.single:""}`},e==="notification"?p.createElement($,{label:t,onClick:O,type:"button",buttonType:"secondary",dark:c}):p.createElement(p.Fragment,null,p.createElement($,{buttonType:"primary",label:s,theme:a??"#00416A",onClick:o,type:"button",dark:c}),p.createElement($,{buttonType:"secondary",label:n,onClick:l,type:"button",dark:c})))))))}import I from"react";var ne=".kSWdO{display:flex;flex-direction:column;gap:var(--uil-m)}.kSWdO .pOi-Y{color:var(--uil-black-alt)}.kSWdO .pOi-Y.hpJrg{color:var(--uil-white)}.kSWdO .ozKEg,.kSWdO .ozKEg .enc0P{border-radius:50%}",E=document.createElement("style");E.setAttribute("nonce","6c37a3c72494fb7ae846eef0f3aace2f");E.appendChild(document.createTextNode(ne));document.head.appendChild(E);var z={radioWrapper:"kSWdO",text:"pOi-Y",dark:"hpJrg",radio:"ozKEg",radioCheck:"enc0P"};var se=".W6ZIf{align-items:center;display:flex;gap:var(--uil-s)}.W6ZIf ._0U1bm{border:2px solid var(--uil-black-alt);box-sizing:border-box;display:block;min-height:var(--uil-l);min-width:var(--uil-l);position:relative}.W6ZIf ._0U1bm:has(input:disabled){background-color:var(--uil-grey);border-color:var(--uil-grey-dark)}.W6ZIf ._0U1bm.guAvx{border-color:var(--uil-grey)}.W6ZIf ._0U1bm.guAvx:has(input:disabled){background-color:var(--uil-black-light);border-color:var(--uil-grey-dark)}.W6ZIf ._0U1bm input{cursor:pointer;height:0;opacity:0;position:absolute;width:0}.W6ZIf ._0U1bm input:checked~.rv9-r{transform:scale(1)}.W6ZIf ._0U1bm input:disabled~.rv9-r{background-color:var(--uil-grey-dark)}.W6ZIf ._0U1bm .rv9-r{background-color:var(--uil-black-alt);height:var(--uil-xs);left:25%;position:absolute;top:25%;transform:scale(0);transition:.1s ease;width:var(--uil-xs)}.W6ZIf ._0U1bm .rv9-r.guAvx{background-color:var(--uil-white)}",V=document.createElement("style");V.setAttribute("nonce","6c37a3c72494fb7ae846eef0f3aace2f");V.appendChild(document.createTextNode(se));document.head.appendChild(V);var h={checkWrapper:"W6ZIf",check:"_0U1bm",dark:"guAvx",checkmark:"rv9-r"};function ce(r){let{color:o,dark:t=!1,disabled:l,id:n,options:i,value:s,valueChanged:c,...d}=r,m=n??x();function g(e){s!==e.value&&!e.disabled&&!l&&c(e.value)}function a(e){return l||e.disabled?u.notAllowed:u.pointer}return I.createElement("div",{className:z.radioWrapper},i.map((e,k)=>I.createElement("div",{key:x(),className:h.checkWrapper},I.createElement("div",{className:`${z.radio} ${a(e)} ${h.check} ${t?h.dark:""}`,onClick:()=>{g(e)}},I.createElement("input",{id:`${m}-${k}`,name:e.name,type:"radio",value:e.value,checked:s===e.value,onChange:()=>{g(e)},disabled:l||e.disabled,...d}),I.createElement("div",{className:`${h.checkmark} ${z.radioCheck} ${t?h.dark:""}`,style:{backgroundColor:o}})),I.createElement("label",{htmlFor:`${m}-${k}`,className:`${u.fontMedium} ${a(e)} ${z.text} ${t?z.dark:""}`},e.name))))}import A from"react";var ue=".-gw6N{border-radius:2px}.Oa96P{color:var(--uil-black-alt)}.Oa96P.ZsB2p{color:var(--uil-white)}",j=document.createElement("style");j.setAttribute("nonce","6c37a3c72494fb7ae846eef0f3aace2f");j.appendChild(document.createTextNode(ue));document.head.appendChild(j);var M={checkbox:"-gw6N",checkLabel:"Oa96P",dark:"ZsB2p"};function de(r){let{checked:o,children:t,color:l,dark:n,disabled:i,id:s,label:c,toggleCheck:d,...m}=r,g=s??x(),a=i?u.notAllowed:u.pointer;function e(){i||d(!o)}return A.createElement("div",{className:`${h.checkWrapper} ${u.fontMedium}`},A.createElement("div",{className:`${M.checkbox} ${a} ${h.check} ${n?h.dark:""}`,onClick:e},A.createElement("input",{type:"checkbox",checked:o,disabled:i,onChange:e,id:g,...m}),A.createElement("div",{className:`${h.checkmark} ${n?h.dark:""}`,style:{backgroundColor:l}})),A.createElement("label",{htmlFor:g,className:`${a} ${M.checkLabel} ${n?M.dark:""}`},t||c))}if(typeof document<"u"){let r=document.createElement("style"),o=document.createTextNode(F);r.appendChild(o),document.head.appendChild(r)}export{$ as Button,de as Checkbox,Z as CustomInput,w as Icon,le as Modal,ee as PasswordInput,ce as Radio,Y as useClickOutsideRef,_ as useContrastColor};
+var p={fit:"M",fontSmall:"N",fontMedium:"O",fontLarge:"P",pointer:"Q",notAllowed:"R",dark:"S"};import H,{isValidElement as D}from"react";function n(o){let e="";return o.forEach(r=>{r==null||r===!1||(e!==""&&(e+=" "),e+=r)}),e}var a={inputField:"r",inputWrapper:"o",basic:"s",input:"i",label:"u",fieldset:"a",decorator:"t",left:"q",outlined:"c",visible:"z",right:"T",error:"d",legend:"U",labelText:"b",asterisk:"V",focus:"x",helpText:"X"};import w from"react";function h(){let o=Math.random()*100+1;return`uil${(performance.now()*o).toString(32)}${(Math.random()*o).toString(16)}`.replace(/\./g,"")}var S={small:"W",medium:"Y",large:"Z"};function E(o){let{size:e="medium",src:r,altText:t,type:i,...l}=o,d=l,m=t?l.id??h():void 0;function s(){if(!(l.height||l.width)){if(e!=="small"&&e!=="medium"&&e!=="large")throw new Error(`<Icon> received an unsupported size. Expected 'small', 'medium' or 'large', but got: ${String(e)}`);return S[e]}}return w.createElement(w.Fragment,null,i==="svg"?w.createElement("svg",{className:s(),style:l.style,...l,"aria-labelledby":m,role:l.role??"img"},t&&w.createElement("title",{id:m},t),w.createElement("use",{href:r})):w.createElement("img",{src:r,alt:d.alt??"",className:s(),style:d.style,...d}))}function $(o){let{children:e,onFocus:r,position:t}=o;if(typeof e!="string"&&(!D(e)||e.type!==E&&e.type!=="img"&&e.type!=="svg"))throw new Error(`<InputDecorator> received an invalid child. Expected a string, <Icon />, <img>, or <svg>, but got: ${D(e)?String(e.type):typeof e}.`);return H.createElement("div",{className:n([a.decorator,p.fontSmall,t==="left"?a.left:a.right,r?a.focus:a.visible])},e)}import y,{isValidElement as B}from"react";import V,{createContext as X,useContext as G,useEffect as J,useState as _}from"react";var L="uil-theme",M=X({theme:"light",setTheme:()=>{}});function C(){return G(M)??{theme:"light",setTheme:()=>{}}}function Q(o){let[e,r]=_("light");J(()=>{let i=localStorage.getItem(L);i&&r(i)},[]);function t(i){r(i),localStorage.setItem(L,i)}return V.createElement(M.Provider,{value:{theme:e,setTheme:t}},o.children)}function U(o){let{children:e,error:r,helpText:t,id:i,label:l,required:d,variant:m,...s}=o;if(e&&(!B(e)||e.type!==$))throw new Error(`<Input> received an invalid child. Expected <InputDecorator />, but got: ${B(e)?String(e.type):typeof e}.`);let b=i??h(),c=t?h():void 0,{theme:f}=C();return y.createElement("div",{className:n([a.inputField,f!=="dark"&&p.dark])},y.createElement("div",{className:n([a.inputWrapper,m==="basic"?a.basic:a.outlined,r&&a.error])},y.createElement("input",{id:b,className:`${a.input} ${p.fontMedium}`,placeholder:"",required:d,...s,"aria-describedby":c}),e&&e,y.createElement("fieldset",{className:a.fieldset,"aria-hidden":!0},y.createElement("legend",{className:a.legend},y.createElement("span",{className:a.labelText},l),d&&y.createElement("span",{className:`${a.labelText} ${a.asterisk}`,"aria-hidden":!0},"*"))),y.createElement("label",{htmlFor:b,className:a.label},y.createElement("span",{className:a.labelText},l),d&&y.createElement("span",{className:`${a.labelText} ${a.asterisk}`,"aria-hidden":!0},"*"))),t&&y.createElement("div",{className:n([a.helpText,r&&a.error]),id:c},t))}var v={modalWrapper:"e",modal:"n",dark:"B",header:"F",success:"_",error:"rr",warning:"or",content:"m",modalText:"ir",buttonWrapper:"G",single:"lr",progressWrapper:"H",progressBar:"ar",progress:"I"};import x,{useEffect as ee}from"react";var Z=new RegExp(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/);function z(o){if(!Z.test(o))throw new Error(`[useContrastColor] invalid hex color: ${o}`);o=o.replace("#","");let e;o.length===3?e=[parseInt(o.substring(0),16)/255,parseInt(o.substring(1),16)/255,parseInt(o.substring(2),16)/255]:e=[parseInt(o.substring(0,2),16)/255,parseInt(o.substring(2,4),16)/255,parseInt(o.substring(4,6),16)/255];let[r,t,i]=e.map(d=>d<=.04045?d/12.92:((d+.055)/1.055)**2.4);return .2126*r+.7152*t+.0722*i>.179?"#000000":"#ffffff"}import O from"react";var g={button:"l",filled:"v",outlined:"h",text:"p",success:"w",warning:"k",error:"y",custom:"C",disabled:"D",small:"er",medium:"tr",large:"nr"};function I(o){let{children:e,color:r,disabled:t,href:i,size:l="medium",target:d,variant:m,...s}=o,b=u(),c=W(),{theme:f}=C();function u(){if(!(t||!r?.includes("#")))switch(m){case"filled":return{color:z(r),backgroundColor:r};case"outlined":return{color:r,borderColor:r};case"text":return{color:r};default:throw new Error(`<Button> received an unexpected variant. Expected 'filled', 'outline' or 'text', but got: ${String(m)}'`)}}function W(){switch(l){case"small":return p.fontSmall;case"medium":return p.fontMedium;case"large":return p.fontLarge;default:throw new Error(`<Button> received an unsupported size. Expected 'small', 'medium' or 'large', but got: ${String(l)}`)}}return i||i===""?O.createElement("a",{href:i,target:d,id:s.id,title:s.title,style:b,className:n([g.button,p.fit,c,g[l],g[m],f==="dark"&&p.dark,r&&!r.includes("#")&&g[r],b&&g.custom,t&&g.disabled]),"aria-disabled":t,tabIndex:t?-1:s.tabIndex??void 0},e):O.createElement("button",{style:b,className:n([g.button,p.fit,c,g[l],g[m],f==="dark"&&p.dark,r&&!r.includes("#")&&g[r],b&&g.custom,t&&g.disabled]),type:s.type??"button",disabled:t,"aria-disabled":t,tabIndex:t?-1:s.tabIndex,...s},e)}function re(o){let{cancelAction:e,cancelLabel:r="",children:t,confirmAction:i,confirmLabel:l="",dark:d=!1,message:m,timeout:s,title:b,theme:c,variant:f}=o,u;ee(()=>{if(!(!s||!i))return u=setTimeout(()=>i(),s),()=>{clearTimeout(u)}},[]);function W(){if(i)return clearTimeout(u),i()}return x.createElement("div",{className:v.modalWrapper},x.createElement("div",{className:n([v.modal,d&&v.dark])},x.createElement("div",{className:n([v.header,c&&v[c]])},b),s&&x.createElement("div",{className:v.progressWrapper},x.createElement("div",{className:v.progressBar,style:{animationDuration:`${s/1e3+.5}s`}})),x.createElement("div",{className:n([v.content,d&&v.dark])},t??x.createElement(x.Fragment,null,x.createElement("div",null,m?.map(A=>x.createElement("p",{key:h(),className:v.modalText},A))),x.createElement("div",{className:n([v.buttonWrapper,f==="notification"&&v.single])},x.createElement(I,{variant:"filled",color:c??"#00416A",onClick:W,type:"button"},l),f==="question"&&x.createElement(I,{variant:"outlined",color:c??"#00416A",onClick:e,type:"button"},r))))))}var k={checkWrapper:"g",check:"f",dark:"E",checkmark:"A"};var F={radioWrapper:"j",text:"J",dark:"ur",radio:"K",radioCheck:"dr"};import T from"react";function ie(o){let{color:e,dark:r=!1,disabled:t,id:i,options:l,selected:d,selectionChanged:m,...s}=o,b=i??h();function c(u){d!==u.value&&!u.disabled&&!t&&m(u.value)}function f(u){return t||u.disabled?p.notAllowed:p.pointer}return T.createElement("div",{className:F.radioWrapper},l.map((u,W)=>T.createElement("div",{key:h(),className:k.checkWrapper},T.createElement("div",{className:n([F.radio,k.check,f(u),r&&k.dark]),onClick:()=>{c(u)}},T.createElement("input",{id:`${b}-${W}`,name:u.name,type:"radio",value:u.value,checked:d===u.value,onChange:()=>{c(u)},disabled:t??u.disabled,...s}),T.createElement("div",{className:n([k.checkmark,F.radioCheck,r&&k.dark]),style:{backgroundColor:e}})),T.createElement("label",{htmlFor:`${b}-${W}`,className:n([p.fontMedium,F.text,f(u),r&&F.dark])},u.name))))}var P={checkbox:"sr",checkLabel:"L",dark:"cr"};import N from"react";function ae(o){let{checked:e,children:r,color:t,dark:i,disabled:l,id:d,label:m,toggleCheck:s,...b}=o,c=d??h();function f(){l||s(!e)}return N.createElement("div",{className:`${k.checkWrapper} ${p.fontMedium}`},N.createElement("div",{className:n([P.checkbox,k.check,l?p.notAllowed:p.pointer,i&&k.dark]),onClick:f},N.createElement("input",{type:"checkbox",checked:e,disabled:l,onChange:f,id:c,...b}),N.createElement("div",{className:n([k.checkmark,i&&k.dark]),style:{backgroundColor:t}})),N.createElement("label",{htmlFor:c,className:n([P.checkLabel,i&&P.dark])},r??m))}import{useEffect as ne,useRef as de}from"react";function ue(o){let e=de(null);return ne(()=>{if(!e.current)return;function r(t){e.current&&!e.current.contains(t.target)&&o()}return document.addEventListener("click",r),document.addEventListener("touchend",r),()=>{document.removeEventListener("click",r),document.removeEventListener("touchend",r)}},[o]),e}export{I as Button,ae as Checkbox,E as Icon,U as Input,$ as InputDecorator,re as Modal,ie as Radio,Q as ThemeProvider,ue as useClickOutsideRef,z as useContrastColor,C as useTheme};

package/dist/utils/conditionalClass.d.ts

@@ -0,0 +1,3 @@
+type Param = string | boolean | null | undefined;
+export default function cls(items: Param[]): string;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@hbuesing/ui-library",
-  "version": "5.0.0-beta.10",
+  "version": "5.0.0-beta.11",
   "description": "Collection of reusable ui components for react based applications",
   "source": "src/index.ts",
   "type": "module",
@@ -17,7 +17,10 @@
     "dev": "NODE_ENV=dev node esbuild.js",
     "build": "NODE_ENV=production node esbuild.js",
     "postbuild": "npm run build-types",
-    "build-types": "tsc --emitDeclarationOnly --project tsconfig.build.json"
+    "build-types": "tsc --emitDeclarationOnly --project tsconfig.build.json",
+    "test": "vitest run",
+    "test:watch": "vitest -w",
+    "test:coverage": "vitest run --coverage"
   },
   "license": "MIT",
   "homepage": "https://www.ui-library.hbsng.com",
@@ -28,9 +31,13 @@
     "directory": "ui-library"
   },
   "peerDependencies": {
-    "react": "^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "postcss-modules": "^6.0.1"
+    "@testing-library/react": "^16.2.0",
+    "@vitest/coverage-v8": "^3.0.6",
+    "jsdom": "^26.0.0",
+    "vitest": "^3.0.6"
   }
 }

package/dist/components/check/checkbox/Checkbox.d.ts

@@ -1,29 +0,0 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
-interface Checkbox extends ComponentPropsWithoutRef<'input'> {
-    checked: boolean;
-    toggleCheck: (value: boolean) => void;
-    color?: string;
-    dark?: boolean;
-}
-interface CheckLabel {
-    label: string;
-    children?: never;
-}
-interface CheckHTML {
-    label?: never;
-    children: ReactNode;
-}
-/**
- * @example
- * ```jsx
- * <Checkbox
- *  checked={...}
- *  toggleCheck={...}
- *  label={"Toggle checkbox"}
- * />
- * ```
- *
- * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/checkbox).
- */
-export declare function Checkbox(props: Checkbox & (CheckLabel | CheckHTML)): React.JSX.Element;
-export {};

package/dist/components/input/baseInput.d.ts

@@ -1,11 +0,0 @@
-import React, { ComponentPropsWithoutRef } from 'react';
-export interface IBaseInput extends ComponentPropsWithoutRef<'input'> {
-    label: string;
-    value: string | number;
-    valueChanged: (value: string) => void;
-    iconColor?: string;
-    iconSrc?: string;
-    inputColor?: string;
-    toggle?: () => void;
-}
-export declare function BaseInput(props: IBaseInput): React.JSX.Element;

package/dist/components/input/customInput.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-import { IBaseInput } from './baseInput';
-export interface ICustomInput extends IBaseInput {
-    tooltipClose?: string;
-    tooltipIcon?: string;
-    tooltipText?: string;
-}
-/**
- * @example
- * ```jsx
- * <PasswordInput
- *  value={...}
- *  valueChanged={...}
- *  label={"..."}
- * />
- * ```
- *
- * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/input).
- */
-export declare function CustomInput(props: ICustomInput): React.JSX.Element;

package/dist/components/input/passwordInput.d.ts

@@ -1,45 +0,0 @@
-import React from 'react';
-import { ICustomInput } from './customInput';
-interface IPasswordInput extends ICustomInput {
-    ruleChecked: string;
-    rules: PasswordRule[];
-    ruleUnchecked: string;
-    capsLockWarning?: string;
-    setFailedRules?: (value: PasswordRule[]) => void;
-}
-/**
- * Password rule
- * @example
- * ```js
- * const rule = {
- *  label: "minimum password length",
- *  count: 5
- *  type: "minLength"
- * }
- * ```
- *
- * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/passwordInput).
- */
-export interface PasswordRule {
-    label: string;
-    count?: number;
-    type?: 'minLength' | 'maxLength' | 'letters' | 'numbers' | 'special' | 'upper';
-    pattern?: string;
-}
-/**
- * @example
- * ```jsx
- * <PasswordInput
- *  ruleChecked={"/foo/bar.svg"}
- *  ruleUnchecked={"/foo/bar.svg"}
- *  rules={[...]}
- *  value={...}
- *  valueChanged={...}
- *  label={"..."}
- * />
- * ```
- *
- * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/passwordInput).
- */
-export declare function PasswordInput(props: IPasswordInput): React.JSX.Element;
-export {};