@cwellt_software/cwellt-reactjs-lib 1.0.0 → 1.0.3

package/dist/index.d.ts

@@ -36,38 +36,38 @@ declare function CwHeadingMain(props: React__default.PropsWithChildren<React__de
 declare function CwHeadingSecond(props: React__default.PropsWithChildren<React__default.HTMLProps<HTMLHeadingElement>>): react_jsx_runtime.JSX.Element;
 
 interface CwAlignProps extends Omit<PropsWithChildren<HTMLProps<HTMLDivElement>>, "className" | "style"> {
-    $alignContent?: CSS.Property.AlignContent;
-    $alignItems?: CSS.Property.AlignItems;
-    $alignSelf?: CSS.Property.AlignSelf;
-    $bottom?: CSS.Property.Bottom;
-    $display?: CSS.Property.Display;
-    $flexBasis?: CSS.Property.FlexBasis;
-    $flexDirection?: CSS.Property.FlexDirection;
-    $flexGrow?: CSS.Property.FlexGrow;
-    $flexShrink?: CSS.Property.FlexShrink;
-    $flexWrap?: CSS.Property.FlexWrap;
-    $height?: CSS.Property.Height;
-    $justifyContent?: CSS.Property.JustifyContent;
-    $left?: CSS.Property.Left;
-    $margin?: CSS.Property.Margin;
-    $order?: CSS.Property.Order;
-    $padding?: CSS.Property.Padding;
-    $position?: CSS.Property.Position;
-    $right?: CSS.Property.Right;
-    $top?: CSS.Property.Top;
-    $width?: CSS.Property.Width;
-    $gap?: CSS.Property.Gap;
+    alignContent?: CSS.Property.AlignContent;
+    alignItems?: CSS.Property.AlignItems;
+    alignSelf?: CSS.Property.AlignSelf;
+    bottom?: CSS.Property.Bottom;
+    display?: CSS.Property.Display;
+    flexBasis?: CSS.Property.FlexBasis;
+    flexDirection?: CSS.Property.FlexDirection;
+    flexGrow?: CSS.Property.FlexGrow;
+    flexShrink?: CSS.Property.FlexShrink;
+    flexWrap?: CSS.Property.FlexWrap;
+    cssHeight?: CSS.Property.Height;
+    justifyContent?: CSS.Property.JustifyContent;
+    left?: CSS.Property.Left;
+    margin?: CSS.Property.Margin;
+    order?: CSS.Property.Order;
+    padding?: CSS.Property.Padding;
+    position?: CSS.Property.Position;
+    right?: CSS.Property.Right;
+    top?: CSS.Property.Top;
+    cssWidth?: CSS.Property.Width;
+    gap?: CSS.Property.Gap;
 }
 /**
  * General purpose aligner flex container, useful for column or row view.
  * @remarks
  * ```txt
- * $flexDirection="row" (default):
+ * flexDirection="row" (default):
  *
  * <Row A> | - item 1 - item 2 - item 3 |
  * <Row B> | - item 1 - item 2 - item 3 |
  *
- * $flexDirection="column":
+ * flexDirection="column":
  *
  *   <Col A>    <Col B>
  * | - item 1 | - item 1 |
@@ -76,7 +76,7 @@ interface CwAlignProps extends Omit<PropsWithChildren<HTMLProps<HTMLDivElement>>
  *
  * ```
  * @example
- * <CwAlign $flexDirection="column">
+ * <CwAlign flexDirection="column">
  *   <div>
  *     <h2>ColumnA</h2>
  *   </div>
@@ -89,25 +89,25 @@ declare function CwAlign(props: CwAlignProps): react_jsx_runtime.JSX.Element;
 
 interface CwLabelProps extends Omit<HTMLProps<PropsWithChildren<HTMLLabelElement>>, "className"> {
     /** Text to display on the label; Same as props.children
-     * @example $text="Name:" */
-    $text?: string;
+     * @example text="Name:" */
+    text?: string;
     /** Text justify to side.
-     * @example $justify=right */
+     * @example justify=right */
     /** css margin */
-    $margin?: CSS.Property.Margin;
-    $justify?: CSS.Property.TextAlign;
+    margin?: CSS.Property.Margin;
+    justify?: CSS.Property.TextAlign;
     /** css width  */
-    $width?: CSS.Property.Width;
+    labelWidth?: CSS.Property.Width;
     /** css height */
-    $height?: CSS.Property.Height;
+    labelHeight?: CSS.Property.Height;
     /** CwAlign properties */
-    $alignProps?: CwAlignProps;
+    alignProps?: CwAlignProps;
 }
 /**
  * Label for form controls.
  * @example
  * ```tsx
- * <CwLabelForm $justify="right" >Username:</CwLabelForm>
+ * <CwLabelForm justify="right" >Username:</CwLabelForm>
  * ```
  */
 declare function CwLabel(props: CwLabelProps): react_jsx_runtime.JSX.Element;
@@ -141,14 +141,14 @@ declare enum CwMessageType {
     SUCCESS = "check-circle"
 }
 interface CwMessageProps {
-    $message: string;
-    $type?: CwMessageType;
-    $duration?: number;
-    $onClose?: () => void;
+    message: string;
+    messageType?: CwMessageType;
+    duration?: number;
+    onClose?: () => void;
 }
 declare const CwMessage: FC<CwMessageProps>;
 declare const useCwMessage: () => {
-    showMessage: ($props: CwMessageProps) => void;
+    showMessage: (props: CwMessageProps) => void;
     RenderMessage: react_jsx_runtime.JSX.Element | null;
 };
 declare class CwMessageManager {
@@ -165,12 +165,12 @@ declare function CwDisplayMessage(message: string, type?: CwMessageType, duratio
 
 interface CwIconProps extends Omit<HTMLProps<HTMLDivElement>, "className"> {
     /** fontawesome4 name without the 'fa-' */
-    $id: string;
+    iconId: string;
 }
 /**
  * An icon from fontawesome4. Find them here: [fontawesome.com/v4](https://fontawesome.com/v4/icons/)
  * @example
- * <CwIcon $id="house" />
+ * <CwIcon id="house" />
  */
 declare function CwIcon(props: CwIconProps): react_jsx_runtime.JSX.Element;
 
@@ -189,14 +189,15 @@ interface CwLoadingSmallProps {
 }
 declare function CwLoadingSmall(CwelltLoadingAppointements: React$1.PropsWithChildren<CwLoadingSmallProps>): react_jsx_runtime.JSX.Element;
 
+type TooltipPosition = "top" | "bottom" | "left" | "right";
 interface CwGenericTooltipProps {
     children: ReactNode;
     content?: ReactNode;
     dissapearsWhenHover?: boolean;
     position?: TooltipPosition;
     overlayStyle?: CSSProperties;
+    showDelay?: number;
 }
-type TooltipPosition = "top" | "bottom" | "left" | "right";
 declare const CwGenericTooltip: FC<CwGenericTooltipProps>;
 
 interface CwModalProps {
@@ -299,34 +300,34 @@ declare class CwReportModal extends React$1.Component<CwReportModalProps, State$
 
 interface CwModalHoverProps extends Omit<HTMLProps<HTMLDialogElement>, "className"> {
     /**  Function to run only once when the modal opens for the first time */
-    $onFirstOpened?: () => void;
+    onFirstOpened?: () => void;
     /**  Element to hover to display the modal */
-    $hovereable: JSX.Element;
+    hovereable: JSX.Element;
 }
 /**
  * A modal that appears when an element is hovered
  * @param children Contents of the modal
- * @param $hovereable Element to hover to display the modal
- * @param $onFirstOpened Function to run only once when the modal opens for the first time
+ * @param hovereable Element to hover to display the modal
+ * @param onFirstOpened Function to run only once when the modal opens for the first time
  * @example
- * <CwModalHover $hovereable={<span>Hover me!</span>}>
+ * <CwModalHover hovereable={<span>Hover me!</span>}>
  *   <p>Hello there</p>
  * </CwModalHover>
  */
 declare const CwModalHover: FC<CwModalHoverProps>;
 
 interface CwDialogProps extends Omit<HTMLProps<PropsWithChildren<HTMLDialogElement>>, "className"> {
-    $customFooter?: Array<ReactElement>;
-    $customHeader?: Array<ReactElement>;
-    $headline?: string;
-    $size?: {
+    customFooter?: Array<ReactElement>;
+    customHeader?: Array<ReactElement>;
+    headline?: string;
+    dialogSize?: {
         width: number;
         height: number;
     };
-    $zIndex?: number;
-    $scrim?: boolean;
-    $onSave?: () => void;
-    $onClose?: () => void;
+    zIndex?: number;
+    scrim?: boolean;
+    onSave?: () => void;
+    onClose?: () => void;
     isReport?: boolean;
 }
 declare const CwDialog: FC<CwDialogProps>;
@@ -508,22 +509,22 @@ declare function CwTabs(CwTabsProps: React__default.PropsWithChildren<CwTabsProp
 
 interface CwExpandableProps extends Omit<HTMLProps<PropsWithChildren<HTMLDetailsElement>>, "className"> {
     /** Title of the expandable */
-    $briefing?: React__default.ReactNode;
+    briefing?: React__default.ReactNode;
     /** Function to run when expandable is toggled open/closed */
-    $onToggle?: (willOpen: boolean) => void;
+    onToggle?: (willOpen: boolean) => void;
     /** Function to run when expandable is open */
-    $onOpen?: (ev: MouseEvent) => void;
+    onOpen?: (ev: MouseEvent) => void;
     /** Function to run when expandable is closed */
-    $onClose?: (ev: MouseEvent) => void;
+    onClose?: (ev: MouseEvent) => void;
 }
 /**
  * An expandable element with briefing and children displayed when clicked
- * @param $briefing Title of the expandable
- * @param $onToggle Function to run when expandable is toggled open/closed
- * @param $onClose Function to run when expandable is closed
- * @param $onOpen Function to run when expandable is opened
+ * @param briefing Title of the expandable
+ * @param onToggle Function to run when expandable is toggled open/closed
+ * @param onClose Function to run when expandable is closed
+ * @param onOpen Function to run when expandable is opened
  * @example
- * <CwExpandable $briefing="Title here">Contents here</CwExpandable>
+ * <CwExpandable briefing="Title here">Contents here</CwExpandable>
  */
 declare const CwExpandable: FC<CwExpandableProps>;
 
@@ -639,24 +640,24 @@ interface CwInputProps {
 declare function CwInput(CwInputProps: React__default.PropsWithChildren<CwInputProps>): react_jsx_runtime.JSX.Element;
 
 interface CwButtonProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "className"> {
-    $text?: string;
+    text?: string;
     ref?: React.LegacyRef<HTMLButtonElement>;
 }
 declare function CwButton(props: CwButtonProps): react_jsx_runtime.JSX.Element;
 
 interface CwDigitProps extends Omit<HTMLProps<HTMLInputElement>, "className" | "type"> {
     /** Props to define alignment and size; undefined == column
-     * @example $alignProps={{_direction:"row"}} */
-    $alignProps?: CwAlignProps;
+     * @example alignProps={{direction:"row"}} */
+    alignProps?: CwAlignProps;
     /** Props of the button; undefined == no button
-     * @example $buttonProps={{children:"Ok"}} */
-    $buttonProps?: CwButtonProps;
+     * @example buttonProps={{children:"Ok"}} */
+    buttonProps?: CwButtonProps;
     /** Props of the label; undefined == no label
-     * @example $labelProps={{children:"Your name please:"}} */
-    $labelProps?: CwLabelProps;
+     * @example labelProps={{children:"Your name please:"}} */
+    labelProps?: CwLabelProps;
     /** Props of the icon; undefined == no icon
-     * @example $iconProps={{_id:"phone"}} */
-    $iconProps?: CwIconProps;
+     * @example iconProps={{iconId:"phone"}} */
+    iconProps?: CwIconProps;
 }
 /**
  * Input for entering a string of number.
@@ -671,9 +672,9 @@ interface CwDigitProps extends Omit<HTMLProps<HTMLInputElement>, "className" | "
  * @example
  * ```tsx
  * <CwDigit
- *   $iconProps={{ $id: "home" }}
- *   $labelProps={{ children: "Name", width: "100px" }}
- *   $buttonProps={{ children: "Ok", onclick:()=>{alert("hi")} }}
+ *   iconProps={{ id: "home" }}
+ *   labelProps={{ children: "Name", width: "100px" }}
+ *   buttonProps={{ children: "Ok", onclick:()=>{alert("hi")} }}
  * />
  * ```
  */
@@ -681,17 +682,17 @@ declare function CwDigit(props: CwDigitProps): react_jsx_runtime.JSX.Element;
 
 interface CwInputTextProps extends Omit<HTMLProps<HTMLInputElement>, "className"> {
     /** Props to define alignment and size; undefined == column
-     * @example $alignProps={{$direction:"row"}} */
-    $alignProps?: CwAlignProps;
+     * @example alignProps={{direction:"row"}} */
+    alignProps?: CwAlignProps;
     /** Props of the button; undefined == no button
-     * @example $buttonProps={{children:"Ok"}} */
-    $buttonProps?: CwButtonProps;
+     * @example buttonProps={{children:"Ok"}} */
+    buttonProps?: CwButtonProps;
     /** Props of the label; undefined == no label
-     * @example $labelProps={{children:"Your name please:"}} */
-    $labelProps?: CwLabelProps;
+     * @example labelProps={{children:"Your name please:"}} */
+    labelProps?: CwLabelProps;
     /** Props of the icon; undefined == no icon
-     * @example $iconProps={{$id:"phone"}} */
-    $iconProps?: CwIconProps;
+     * @example iconProps={{iconId:"phone"}} */
+    iconProps?: CwIconProps;
 }
 /**
  * Input for entering a string of text.
@@ -706,9 +707,9 @@ interface CwInputTextProps extends Omit<HTMLProps<HTMLInputElement>, "className"
  * @example
  * ```tsx
  * <CwInputText
- *   $iconProps={{ $id: "home" }}
- *   $labelProps={{ children: "Name", width: "100px" }}
- *   $buttonProps={{ children: "Ok", onclick:()=>{alert("hi")} }}
+ *   iconProps={{ id: "home" }}
+ *   labelProps={{ children: "Name", width: "100px" }}
+ *   buttonProps={{ children: "Ok", onclick:()=>{alert("hi")} }}
  * />
  * ```
  */
@@ -716,17 +717,17 @@ declare function CwInputText(props: CwInputTextProps): react_jsx_runtime.JSX.Ele
 
 interface CwInputPhoneProps extends Omit<HTMLProps<HTMLInputElement>, "className" | "type"> {
     /** Props to define alignment and size; undefined == column
-     * @example $alignProps={{_direction:"row"}} */
-    $alignProps?: CwAlignProps;
+     * @example alignProps={{_direction:"row"}} */
+    alignProps?: CwAlignProps;
     /** Props of the button; undefined == no button
-     * @example $buttonProps={{children:"Ok"}} */
-    $buttonProps?: CwButtonProps;
+     * @example buttonProps={{children:"Ok"}} */
+    buttonProps?: CwButtonProps;
     /** Props of the label; undefined == no label
-     * @example $labelProps={{children:"Your name please:"}} */
-    $labelProps?: CwLabelProps;
+     * @example labelProps={{children:"Your name please:"}} */
+    labelProps?: CwLabelProps;
     /** Props of the icon; undefined == no icon
-     * @example $iconProps={{_id:"phone"}} */
-    $iconProps?: CwIconProps;
+     * @example iconProps={{_id:"phone"}} */
+    iconProps?: CwIconProps;
 }
 /**
  * Input for entering a telephone number.
@@ -740,7 +741,7 @@ interface CwInputPhoneProps extends Omit<HTMLProps<HTMLInputElement>, "className
  * ```
  * @example
  * ```tsx
- * <CwInputPhone $iconProps={{_id:"phone"}} $labelProps={{children:"Phone"}} />
+ * <CwInputPhone iconProps={{iconId:"phone"}} labelProps={{children:"Phone"}} />
  * ```
  */
 declare function CwInputPhone(props: CwInputPhoneProps): react_jsx_runtime.JSX.Element;
@@ -766,35 +767,35 @@ declare function CwInputNumber(CwInputNumberProps: React__default.PropsWithChild
 
 interface CwTextAreaProps extends Omit<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "className"> {
     /** Can it be resized? */
-    $resize?: CSS.Property.Resize;
+    resize?: CSS.Property.Resize;
     /** Props to define alignment and size; undefined == column
-     * @example $alignProps={{$direction:"row"}} */
-    $alignProps?: CwAlignProps;
+     * @example alignProps={{direction:"row"}} */
+    alignProps?: CwAlignProps;
     /** Props of the button; undefined == no button
-     * @example $buttonProps={{children:"Ok"}} */
-    $buttonProps?: CwButtonProps;
+     * @example buttonProps={{children:"Ok"}} */
+    buttonProps?: CwButtonProps;
     /** Props of the label; undefined == no label
-     * @example $labelProps={{children:"Your name please:"}} */
-    $labelProps?: CwLabelProps;
+     * @example labelProps={{children:"Your name please:"}} */
+    labelProps?: CwLabelProps;
     /** Props of the icon; undefined == no icon
-     * @example $iconProps={{$id:"phone"}} */
-    $iconProps?: CwIconProps;
+     * @example iconProps={{iconId:"phone"}} */
+    iconProps?: CwIconProps;
 }
 declare function CwTextArea(props: CwTextAreaProps): react_jsx_runtime.JSX.Element;
 
 interface CwInputDateProps extends Omit<HTMLProps<HTMLInputElement>, "className" | "type"> {
     /** Props to define alignment and size; undefined == column
-     * @example $alignProps={{_direction:"row"}} */
-    $alignProps?: CwAlignProps;
+     * @example alignProps={{_direction:"row"}} */
+    alignProps?: CwAlignProps;
     /** Props of the button; undefined == no button
-     * @example $buttonProps={{children:"Ok"}} */
-    $buttonProps?: CwButtonProps;
+     * @example buttonProps={{children:"Ok"}} */
+    buttonProps?: CwButtonProps;
     /** Props of the label; undefined == no label
-     * @example $labelProps={{children:"Your name please:"}} */
-    $labelProps?: CwLabelProps;
+     * @example labelProps={{children:"Your name please:"}} */
+    labelProps?: CwLabelProps;
     /** Props of the icon; undefined == no icon
-     * @example $iconProps={{_id:"phone"}} */
-    $iconProps?: CwIconProps;
+     * @example iconProps={{_id:"phone"}} */
+    iconProps?: CwIconProps;
 }
 /**
  * Input for entering a string of text.
@@ -809,9 +810,9 @@ interface CwInputDateProps extends Omit<HTMLProps<HTMLInputElement>, "className"
  * @example
  * ```tsx
  * <CwInputDate
- *   $iconProps={{ $id: "Birthdate" }}
- *   $labelProps={{ children: "Name", width: "100px" }}
- *   $buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
+ *   iconProps={{ iconId: "Birthdate" }}
+ *   labelProps={{ children: "Name", width: "100px" }}
+ *   buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
  * />
  * ```
  */
@@ -825,17 +826,17 @@ declare const CwInputDatePicker: FC<CwInputDatePickerProps>;
 
 interface CwInputDatetimeProps extends Omit<HTMLProps<HTMLInputElement>, "className" | "type"> {
     /** Props to define alignment and size; undefined == column
-     * @example $alignProps={{_direction:"row"}} */
-    $alignProps?: CwAlignProps;
+     * @example alignProps={{_direction:"row"}} */
+    alignProps?: CwAlignProps;
     /** Props of the button; undefined == no button
-     * @example $buttonProps={{children:"Ok"}} */
-    $buttonProps?: CwButtonProps;
+     * @example buttonProps={{children:"Ok"}} */
+    buttonProps?: CwButtonProps;
     /** Props of the label; undefined == no label
-     * @example $labelProps={{children:"Your name please:"}} */
-    $labelProps?: CwLabelProps;
+     * @example labelProps={{children:"Your name please:"}} */
+    labelProps?: CwLabelProps;
     /** Props of the icon; undefined == no icon
-     * @example $iconProps={{_id:"phone"}} */
-    $iconProps?: CwIconProps;
+     * @example iconProps={{_id:"phone"}} */
+    iconProps?: CwIconProps;
 }
 /**
  * Input for entering a string of text.
@@ -850,9 +851,9 @@ interface CwInputDatetimeProps extends Omit<HTMLProps<HTMLInputElement>, "classN
  * @example
  * ```tsx
  * <CwInputDate
- *   $iconProps={{ $id: "Birthdate" }}
- *   $labelProps={{ children: "Name", width: "100px" }}
- *   $buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
+ *   iconProps={{ id: "Birthdate" }}
+ *   labelProps={{ children: "Name", width: "100px" }}
+ *   buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
  * />
  * ```
  */
@@ -860,17 +861,17 @@ declare function CwInputDatetime(props: CwInputDatetimeProps): react_jsx_runtime
 
 interface CwInputTimeProps extends Omit<HTMLProps<HTMLInputElement>, "className" | "type"> {
     /** Props to define alignment and size; undefined == column
-     * @example $alignProps={{_direction:"row"}} */
-    $alignProps?: CwAlignProps;
+     * @example alignProps={{_direction:"row"}} */
+    alignProps?: CwAlignProps;
     /** Props of the button; undefined == no button
-     * @example $buttonProps={{children:"Ok"}} */
-    $buttonProps?: CwButtonProps;
+     * @example buttonProps={{children:"Ok"}} */
+    buttonProps?: CwButtonProps;
     /** Props of the label; undefined == no label
-     * @example $labelProps={{children:"Your name please:"}} */
-    $labelProps?: CwLabelProps;
+     * @example labelProps={{children:"Your name please:"}} */
+    labelProps?: CwLabelProps;
     /** Props of the icon; undefined == no icon
-     * @example $iconProps={{_id:"phone"}} */
-    $iconProps?: CwIconProps;
+     * @example iconProps={{_id:"phone"}} */
+    iconProps?: CwIconProps;
 }
 /**
  * Input for entering a string of text.
@@ -885,9 +886,9 @@ interface CwInputTimeProps extends Omit<HTMLProps<HTMLInputElement>, "className"
  * @example
  * ```tsx
  * <CwTime
- *   $iconProps={{ $id: "Birthdate" }}
- *   $labelProps={{ children: "Name", width: "100px" }}
- *   $buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
+ *   iconProps={{ iconId: "Birthdate" }}
+ *   labelProps={{ children: "Name", width: "100px" }}
+ *   buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
  * />
  * ```
  */
@@ -895,11 +896,11 @@ declare function CwTime(props: CwInputTimeProps): react_jsx_runtime.JSX.Element;
 
 interface CwInputDateTextProps extends Omit<React__default.HTMLProps<HTMLInputElement>, "className" | "type" | "placeholder" | "defaultValue" | "onChange"> {
     /** "DD.MM.YYYY" by default */
-    $format?: "MM/DD/YYYY" | "DD/MM/YYYY" | "DD.MM.YYYY" | "YYYY-MM-DD";
-    $alignProps?: CwAlignProps;
-    $buttonProps?: CwButtonProps;
-    $labelProps?: CwLabelProps;
-    $iconProps?: CwIconProps;
+    dateFormat?: "MM/DD/YYYY" | "DD/MM/YYYY" | "DD.MM.YYYY" | "YYYY-MM-DD";
+    alignProps?: CwAlignProps;
+    buttonProps?: CwButtonProps;
+    labelProps?: CwLabelProps;
+    iconProps?: CwIconProps;
     onChange?: (e: any) => void;
 }
 /**
@@ -918,35 +919,35 @@ interface CwInputDateTextProps extends Omit<React__default.HTMLProps<HTMLInputEl
  * @example
  * ```tsx
  * <CwInputDateText
- *   $iconProps={{ $id: "Birthdate" }}
- *   $labelProps={{ children: "Name", width: "100px" }}
- *   $buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
+ *   iconProps={{ id: "Birthdate" }}
+ *   labelProps={{ children: "Name", width: "100px" }}
+ *   buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
  * />
  * ```
  */
 declare function CwInputDateText(props: CwInputDateTextProps): react_jsx_runtime.JSX.Element;
 
 interface CwInputImageProps extends Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "className" | "type" | "onChange"> {
-    $allowedImageFormats?: string[];
+    allowedImageFormats?: string[];
     onChange?: (image: string | null) => void;
 }
 declare function CwInputImage(props: CwInputImageProps): react_jsx_runtime.JSX.Element;
 
 interface CwImageAreaProps extends Omit<HTMLProps<HTMLImageElement>, "className" | "ref" | "onMouseDown" | "onMouseMove" | "onMouseUp" | "onDragStart"> {
     /** Not implemented */
-    $initialSelectionArea?: DOMRect;
+    initialSelectionArea?: DOMRect;
     /** Hide the selection area right after selecting */
-    $selectionAreaAttenuation?: CSS.Property.Opacity;
+    selectionAreaAttenuation?: CSS.Property.Opacity;
     /** Called when the selection ends, return true to continue, false to abort */
-    $onSelectionEnd?: (rect: DOMRect) => boolean;
+    onSelectionEnd?: (rect: DOMRect) => boolean;
     /** Called when the selection starts, return true to continue, false to abort  */
-    $onSelectionStart?: (x: number, y: number) => boolean;
+    onSelectionStart?: (x: number, y: number) => boolean;
     /** Called when the picture area is successfully selected and the sub-image is obtained */
-    $onSelectionSuccess?: (base64img: string) => void;
+    onSelectionSuccess?: (base64img: string) => void;
     /** Custom style for the selection area */
-    $selectionAreaStyle?: Omit<CSSProperties, "position" | "left" | "top" | "width" | "height" | "pointerEvents">;
+    selectionAreaStyle?: Omit<CSSProperties, "position" | "left" | "top" | "width" | "height" | "pointerEvents">;
     /** Custom alignment props */
-    $alignProps?: Omit<CwAlignProps, "_position">;
+    alignProps?: Omit<CwAlignProps, "_position">;
 }
 interface CwImageAreaMethods {
     /** Returns the current selected area as an image, or undefined if no selection has been made */
@@ -1051,17 +1052,17 @@ declare function CwCheckbox(CwCheckboxProps: React__default.PropsWithChildren<Cw
 
 interface CwToggleProps extends Omit<React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "className" | "type"> {
     /** Props to define alignment and size; undefined == column
-     * @example $alignProps={{_direction:"row"}} */
-    $alignProps?: CwAlignProps;
+     * @example alignProps={{_direction:"row"}} */
+    alignProps?: CwAlignProps;
     /** Props of the button; undefined == no button
-     * @example $buttonProps={{children:"Ok"}} */
-    $buttonProps?: CwButtonProps;
+     * @example buttonProps={{children:"Ok"}} */
+    buttonProps?: CwButtonProps;
     /** Props of the label; undefined == no label
-     * @example $labelProps={{children:"Your name please:"}} */
-    $labelProps?: CwLabelProps;
+     * @example labelProps={{children:"Your name please:"}} */
+    labelProps?: CwLabelProps;
     /** Props of the icon; undefined == no icon
-     * @example $iconProps={{_id:"phone"}} */
-    $iconProps?: CwIconProps;
+     * @example iconProps={{_id:"phone"}} */
+    iconProps?: CwIconProps;
 }
 /**
  * Toggle-styled checkbox
@@ -1078,20 +1079,20 @@ declare function CwToggle(props: CwToggleProps): react_jsx_runtime.JSX.Element;
 
 interface CwSelectProps extends Omit<DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "className"> {
     /** Props to define alignment and size; undefined == column
-     * @example $alignProps={{_direction:"row"}} */
-    $alignProps?: CwAlignProps;
+     * @example alignProps={{_direction:"row"}} */
+    alignProps?: CwAlignProps;
     /** Props of the button; undefined == no button
-     * @example $buttonProps={{_text:"Ok"}} */
-    $buttonProps?: CwButtonProps;
+     * @example buttonProps={{_text:"Ok"}} */
+    buttonProps?: CwButtonProps;
     /** Props of the label; undefined == no label
-     * @example $labelProps={{_text:"Your name please:"}} */
-    $labelProps?: CwLabelProps;
+     * @example labelProps={{_text:"Your name please:"}} */
+    labelProps?: CwLabelProps;
     /** Props of the icon; undefined == no icon
-     * @example $iconProps={{_id:"phone"}} */
-    $iconProps?: CwIconProps;
+     * @example iconProps={{_id:"phone"}} */
+    iconProps?: CwIconProps;
     /** Default item
-     * @example $placeholder="Select something" */
-    $placeholder?: string;
+     * @example placeholder="Select something" */
+    placeholder?: string;
 }
 /**
  * Input for selecting an option from a list
@@ -1110,7 +1111,7 @@ interface CwSelectProps extends Omit<DetailedHTMLProps<SelectHTMLAttributes<HTML
  *              ╰────────────────────╯
  * ```
  * @example
- * <CwSelect name="cat" $iconProps={{_id:"pet"}} $labelProps={{children:"Cat:"}}>
+ * <CwSelect name="cat" iconProps={{iconId:"pet"}} labelProps={{children:"Cat:"}}>
  *   <CwOption value="" > - Choose a cat - </CwOption>
  *   <CwOption value="o" >Orange</CwOption>
  *   <CwOption value="b" >Black</CwOption>
@@ -1120,7 +1121,7 @@ interface CwSelectProps extends Omit<DetailedHTMLProps<SelectHTMLAttributes<HTML
 declare function CwSelect(props: CwSelectProps): react_jsx_runtime.JSX.Element;
 
 interface CwOptionProps extends Omit<HTMLProps<PropsWithChildren<HTMLOptionElement>>, "className"> {
-    $text?: string;
+    text?: string;
 }
 /**
  * Option to display in the CwSelect
@@ -1343,14 +1344,14 @@ interface CwMultiFilterProps {
  * const [selectedCategory, setSelectedCategory] = useState("");
  *
  * <CwMultiFilter
- *  $id="multifilter"
- *  $onChange={tags => { // Collection of currently active tags
+ *  id="multifilter"
+ *  onChange={tags => { // Collection of currently active tags
  *    console.log("This will get called every time the selected filters change");
  *  }}
- *  $selectedTags={selectedTags} // Selected filters, in case you want to modify them manually
+ *  selectedTags={selectedTags} // Selected filters, in case you want to modify them manually
  *  selectedCategory={selectedCategory}
  *  onChangeCategory={setSelectedCategory}
- *  $allTags={
+ *  allTags={
  *    new Set([
  *      {
  *        Name: "DEF", // The text displayed on the tag/filter/chip
@@ -1372,7 +1373,7 @@ interface CwMultiFilterProps {
  *  }
  * ```
  * @param {CwMultiFilterProps} props
- * @returns Set the `$onChange` callback to a function to check for changes in the selected filters
+ * @returns Set the `onChange` callback to a function to check for changes in the selected filters
  */
 declare const CwMultiFilter: FC<CwMultiFilterProps>;
 
@@ -1617,9 +1618,14 @@ interface State$3 {
 declare class CwScheduler2 extends Component<CwSchedulerProps$1, State$3> {
     contentArea?: HTMLTableDataCellElement;
     constructor(Props: CwSchedulerProps$1);
+    private resizeObserver?;
+    calculateMaxPx: () => number;
     init: (props: CwSchedulerProps$1) => void;
     initOutside: (events: Array<cblEvent$1>, resources: Array<Resource$1>, _nextProps: CwSchedulerProps$1, startDate: Date, endDate: Date) => void;
     componentDidMount(): void;
+    componentWillUnmount(): void;
+    recalculateEventPositions: (events: Array<cblEvent$1>, dayPx: number, startDate: Date) => Array<cblEvent$1>;
+    updateResourcesWithEvents: (resources: Array<Resource$1>, events: Array<cblEvent$1>) => Array<Resource$1>;
     handleResize: () => void;
     componentWillReceiveProps(_nextProps: CwSchedulerProps$1): void;
     handleOnClickContextMenuResourceScheduler: (_clickEvent: any, _resource: Resource$1) => void;
@@ -1816,6 +1822,7 @@ interface State$1 {
 
 declare class CwScheduler extends Component<CwSchedulerProps, State$1> {
     contentArea?: HTMLTableDataCellElement;
+    calculateMaxPx: () => number;
     constructor(props: CwSchedulerProps);
     handleResize: () => void;
     objectsEqual: (o1: any, o2: any) => void;
@@ -1835,6 +1842,8 @@ type OnEvent = (event: UiEvent) => void;
 interface HeaderDivision {
     top: string;
     bottom: string[];
+    startDate: Date;
+    endDate?: Date;
 }
 
 interface SchedulerHeaderContent {
@@ -1845,9 +1854,8 @@ interface SchedulerHeaderContent {
 interface SchedulerEventDm {
     id: string;
     name: string;
-    resourceId: string;
+    rowId: string;
     color: string;
-    isLightColor: boolean;
     isResizable: boolean;
     isDraggable: boolean;
     selected: boolean;
@@ -1855,11 +1863,14 @@ interface SchedulerEventDm {
     endDate: Date;
     left: number;
     width: number;
+    order?: number;
     icons?: ReactElement;
     tooltip?: ReactNode;
     contextMenuItems?: ItemType[];
     primaryTimeMarkerColor?: string;
     secondaryTimeMarkerColor?: string;
+    eventType?: number;
+    alpha?: number;
 }
 interface SchedulerEventState<T extends SchedulerEventDm> {
     value: T;
@@ -1870,21 +1881,20 @@ declare const SchedulerEvent: FC<SchedulerEventState<SchedulerEventDm>>;
 
 interface BackgroundEventDm extends SchedulerEventDm {
     isVisible: boolean;
-}
-interface BackgroundEventProps extends SchedulerEventState<BackgroundEventDm> {
+    isVerticalText?: boolean;
 }
 
 interface RowHeaderDm {
-    resourceId: string;
+    rowId: string;
     title: string;
     title2?: string;
+    title3?: string;
     subtitle?: string;
     subtitle2?: string;
 }
 interface RowHeaderProps<T extends RowHeaderDm> {
     value: T;
-    color: string;
-    width: string;
+    width: number;
     onEvent: OnEvent;
 }
 declare const DefaultRowHeader: FC<RowHeaderProps<RowHeaderDm>>;
@@ -1901,20 +1911,23 @@ type LineState = {
     width: number;
 };
 
-type OrderCategory = "title" | "subtitle" | "title2" | "subtitle2";
+type OrderCategory<T> = keyof T & string;
 interface SchedulerProps<T extends RowHeaderDm, P extends SchedulerEventDm> {
     id: string;
     state: SchedulerState;
     header: SchedulerHeaderContent;
-    EventComp: React__default.ComponentType<SchedulerEventState<SchedulerEventDm>>;
+    EventComp: React__default.ComponentType<SchedulerEventState<P>>;
     events: P[];
     backgroundEvents: BackgroundEventDm[];
     rows: T[];
     contextMenuItems: ItemType[];
-    orderCategory?: OrderCategory;
+    orderCategories?: OrderCategory<T>[];
     useOrderCategory?: boolean;
     RowTitleComp: React__default.ComponentType<RowHeaderProps<T>>;
+    BackgroundEventComp?: React__default.ComponentType<SchedulerEventState<BackgroundEventDm>>;
     onEvent: OnEvent;
+    groupRowColors?: boolean;
+    rowHeaderWidth?: number;
 }
 declare const Scheduler: <T extends RowHeaderDm, P extends SchedulerEventDm>(props: SchedulerProps<T, P>) => react_jsx_runtime.JSX.Element;
 
@@ -1925,8 +1938,9 @@ interface SchedulerRowProps<T extends RowHeaderDm, P extends SchedulerEventDm> {
     contextMenuItems?: ItemType[];
     EventComp: ComponentType<SchedulerEventState<P>>;
     RowTitleComp: ComponentType<RowHeaderProps<T>>;
+    BackgroundEventComp: ComponentType<SchedulerEventState<BackgroundEventDm>>;
     onEvent: OnEvent;
-    remHeight: number;
+    rowHeightInRem: number;
     weekendLines: LineState[];
     divisionLines: LineState[];
     timeLinePercentage: number;
@@ -1967,8 +1981,8 @@ interface SuperSchedulerProps {
     events: SchedulerEventDm[];
     backgroundEvents: BackgroundEventDm[];
     contextMenuItems: ItemType[];
-    pinnedOrderCategory?: OrderCategory;
-    unPinnedOrderCategory?: OrderCategory;
+    pinnedOrderCategory?: OrderCategory<PinRowHeaderProps>[];
+    unPinnedOrderCategory?: OrderCategory<PinRowHeaderProps>[];
     onEvent: OnEvent;
 }
 declare const SuperScheduler: FC<SuperSchedulerProps>;
@@ -2092,4 +2106,4 @@ declare class OnClickContextMenu implements UiEvent {
     constructor(id: string, clickedMenu: string);
 }
 
-export { type BackgroundEventDm, type BackgroundEventProps, CblDragAndDrop$1 as CblDragAndDrop, type Column, CwAccordionContainer, CwAlign, type CwAlignProps, CwBtnAdd, CwBtnAddFolder, CwBtnAirport, CwBtnAlert, CwBtnApprove, CwBtnArchive, CwBtnArchiveRestore, CwBtnBookMark, CwBtnBookMarkLinkPage, CwBtnBulkDuty, CwBtnCancel, CwBtnCrewPlanning, CwBtnDelay, CwBtnDelete, CwBtnDownLoadAllInfo, CwBtnDownload, CwBtnDropDownMenu, CwBtnEdit, CwBtnEditFolder, CwBtnFiles, CwBtnGeneratePairing, CwBtnGoBackFolder, CwBtnHide, CwBtnImportRequests, CwBtnInfo, CwBtnMVT, CwBtnNavFirstItemView, CwBtnNavLastItemView, CwBtnNavNextDay, CwBtnNavPreviewItem, CwBtnPairing, CwBtnPrint, CwBtnPropertyFolder, CwBtnPublish, CwBtnRefresh, CwBtnReleasePeriod, CwBtnSave, CwBtnSearch, CwBtnSelect, CwBtnSelectedFolder, CwBtnShare, CwBtnStatistic, CwBtnUploadFiles, CwBtnUserFolder, CwBtnVacations, CwBtnView, CwBtnWarning, CwButton, CwButtonDanger, CwButtonDangerOutline, CwButtonDef, CwButtonDefOutline, CwButtonExpandAndCollapse, CwButtonSec, CwButtonSecOutline, CwCheckbox, CwContextMenu, CwContextualMenu, CwDialog, CwDialogManager, type CwDialogProps, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownContainer, CwDropdownFilter, CwDropdownNavigation, CwExpandable, type CwExpandableProps, CwFileUpload, type CwFilterTabProps, CwFindAirport, CwFloatingButton, CwGenericTooltip, CwHeadFilter, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, type CwImageAreaMethods, type CwImageAreaProps, CwInput, CwInputDate, CwInputDatePicker, type CwInputDatePickerProps, type CwInputDateProps, CwInputDateText, type CwInputDateTextProps, CwInputDatetime, type CwInputDatetimeProps, CwInputImage, type CwInputImageProps, CwInputNumber, type CwInputNumberProps, CwInputPhone, type CwInputPhoneProps, CwInputText, type CwInputTextProps, type CwInputTimeProps, CwLabel, type CwLabelProps, CwLoading, CwLoadingSmall, CwMessage, CwMessageManager, type CwMessageProps, CwMessageType, CwModal, CwModalConfirm, CwModalHover, type CwModalHoverProps, CwModalIframe, CwModalReportFunctional, CwMultiFilter, type CwMultiFilterProps, CwMultiFilterTag, type CwMultiFilterTagProps, CwMultiselect, CwOption, CwOptionList, CwReportModal, type CwReportModalProps$1 as CwReportModalProps, CwScheduler, CwScheduler2, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, type CwSelectListProps, CwSuperScheduler, CwTable, CwTableGrouped, type CwTableGroupedData, type CwTableGroupedData_Group, type CwTableGroupedData_Row, type CwTableGroupedProps, CwTabs, CwTag, CwTextArea, type CwTextAreaProps, CwTime, CwToggle, CwTooltip, CwWeekdaySelector, type DataItem, DefaultRowHeader, type ICwMultiFilterTag, MultiSelect, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, type OnEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, type PinRowHeaderProps, Resource, type RowHeaderDm, type RowHeaderProps, Scheduler, SchedulerEvent, type SchedulerEventDm, type SchedulerEventState, type SchedulerRowProps, type SchedulerState, SuperScheduler, type SuperSchedulerProps, UiEvent, type Weekday, Weekdays, cblEvent, type cblEventCompProps, eventIsVisible, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, type resourceCompProps2, useCwMessage };
+export { type BackgroundEventDm, CblDragAndDrop$1 as CblDragAndDrop, type Column, CwAccordionContainer, CwAlign, type CwAlignProps, CwBtnAdd, CwBtnAddFolder, CwBtnAirport, CwBtnAlert, CwBtnApprove, CwBtnArchive, CwBtnArchiveRestore, CwBtnBookMark, CwBtnBookMarkLinkPage, CwBtnBulkDuty, CwBtnCancel, CwBtnCrewPlanning, CwBtnDelay, CwBtnDelete, CwBtnDownLoadAllInfo, CwBtnDownload, CwBtnDropDownMenu, CwBtnEdit, CwBtnEditFolder, CwBtnFiles, CwBtnGeneratePairing, CwBtnGoBackFolder, CwBtnHide, CwBtnImportRequests, CwBtnInfo, CwBtnMVT, CwBtnNavFirstItemView, CwBtnNavLastItemView, CwBtnNavNextDay, CwBtnNavPreviewItem, CwBtnPairing, CwBtnPrint, CwBtnPropertyFolder, CwBtnPublish, CwBtnRefresh, CwBtnReleasePeriod, CwBtnSave, CwBtnSearch, CwBtnSelect, CwBtnSelectedFolder, CwBtnShare, CwBtnStatistic, CwBtnUploadFiles, CwBtnUserFolder, CwBtnVacations, CwBtnView, CwBtnWarning, CwButton, CwButtonDanger, CwButtonDangerOutline, CwButtonDef, CwButtonDefOutline, CwButtonExpandAndCollapse, CwButtonSec, CwButtonSecOutline, CwCheckbox, CwContextMenu, CwContextualMenu, CwDialog, CwDialogManager, type CwDialogProps, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownContainer, CwDropdownFilter, CwDropdownNavigation, CwExpandable, type CwExpandableProps, CwFileUpload, type CwFilterTabProps, CwFindAirport, CwFloatingButton, CwGenericTooltip, CwHeadFilter, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, type CwImageAreaMethods, type CwImageAreaProps, CwInput, CwInputDate, CwInputDatePicker, type CwInputDatePickerProps, type CwInputDateProps, CwInputDateText, type CwInputDateTextProps, CwInputDatetime, type CwInputDatetimeProps, CwInputImage, type CwInputImageProps, CwInputNumber, type CwInputNumberProps, CwInputPhone, type CwInputPhoneProps, CwInputText, type CwInputTextProps, type CwInputTimeProps, CwLabel, type CwLabelProps, CwLoading, CwLoadingSmall, CwMessage, CwMessageManager, type CwMessageProps, CwMessageType, CwModal, CwModalConfirm, CwModalHover, type CwModalHoverProps, CwModalIframe, CwModalReportFunctional, CwMultiFilter, type CwMultiFilterProps, CwMultiFilterTag, type CwMultiFilterTagProps, CwMultiselect, CwOption, CwOptionList, CwReportModal, type CwReportModalProps$1 as CwReportModalProps, CwScheduler, CwScheduler2, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, type CwSelectListProps, CwSuperScheduler, CwTable, CwTableGrouped, type CwTableGroupedData, type CwTableGroupedData_Group, type CwTableGroupedData_Row, type CwTableGroupedProps, CwTabs, CwTag, CwTextArea, type CwTextAreaProps, CwTime, CwToggle, CwTooltip, CwWeekdaySelector, type DataItem, DefaultRowHeader, type ICwMultiFilterTag, MultiSelect, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, type OnEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, type PinRowHeaderProps, Resource, type RowHeaderDm, type RowHeaderProps, Scheduler, SchedulerEvent, type SchedulerEventDm, type SchedulerEventState, type SchedulerRowProps, type SchedulerState, SuperScheduler, type SuperSchedulerProps, UiEvent, type Weekday, Weekdays, cblEvent, type cblEventCompProps, eventIsVisible, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, type resourceCompProps2, useCwMessage };