@lax-wp/design-system 0.9.0 → 0.9.3-beta.0

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

@@ -16,6 +16,7 @@ export interface IButtonProps {
     type?: 'button' | 'submit' | 'reset';
     options?: ItemType[];
     tooltip?: string;
+    autoFocus?: boolean;
     tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
     /** Array of keyboard shortcut keys to display inline in the button (e.g., ['Meta', 'S'] or ['Ctrl', 'Enter']) */
     shortcuts?: string[];
@@ -25,5 +26,5 @@ export interface IButtonProps {
 }
 export type IButtonStatus = 'secondary-neutral' | 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'error-secondary' | 'cancel' | 'no-background' | 'publish' | 'default';
 export type IButtonAppearance = 'filled' | 'outline' | 'ghost' | 'dashed';
-declare const Button: React.FC<IButtonProps>;
+declare const Button: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/components/buttons/option-button/OptionButton.d.ts

@@ -45,6 +45,8 @@ export interface OptionButtonProps {
     isFlowAvailable?: boolean;
     /** Array of keyboard shortcut keys to display inline in the button (e.g., ['Meta', 'S'] or ['Ctrl', 'Enter']) */
     shortcuts?: string[];
+    /** Custom CSS classes for the text */
+    textClassName?: string;
 }
 /**
  * OptionButton component provides a flexible button for lists, menus, and option selections.

package/dist/components/data-display/code-editor-beta/CodeEditorBeta.d.ts

@@ -1,10 +1,6 @@
 import { type FC } from "react";
 import { type ReactCodeMirrorRef } from "@uiw/react-codemirror";
-declare const TABS: ("JSON" | "Grid")[];
-export type TTabKey = (typeof TABS)[number];
-/**
- * Toolbar context passed to the `renderToolbarActions` callback.
- */
+import type { CodeBlockInfo } from "../../../types";
 export interface CodeEditorBetaToolbarContext {
     /** The CodeMirror editor view ref */
     editorRef: ReactCodeMirrorRef | null;
@@ -19,9 +15,6 @@ export interface CodeEditorBetaToolbarContext {
     /** Current active tab (JSON or Grid) */
     activeTab: "JSON" | "Grid";
 }
-/**
- * Props for the experimental CodeMirror-based CodeEditor.
- */
 export interface CodeEditorBetaProps {
     /** The code content to display in the editor */
     value: string;
@@ -49,9 +42,9 @@ export interface CodeEditorBetaProps {
     className?: string;
     /** Auto-format JSON on mount */
     enableAutoFormatting?: boolean;
-    /** Disables parent save button during Python validation (mirrors original CodeEditor) */
+    /** Disables parent save button during Python validation */
     setIsDisableSave?: (flag: boolean) => void;
-    /** API to check Python syntax — returns an error object if invalid */
+    /** API to check Python syntax */
     checkSyntaxAPI?: (code: string) => Promise<{
         data: {
             error?: {
@@ -61,7 +54,7 @@ export interface CodeEditorBetaProps {
             };
         };
     }>;
-    /** API to format Python code — returns formatted_code string */
+    /** API to format Python code */
     formatCodeAPI?: (code: string) => Promise<{
         data: {
             formatted_code?: string;
@@ -69,12 +62,14 @@ export interface CodeEditorBetaProps {
     }>;
     /** Custom toolbar actions render function */
     renderToolbarActions?: (context: CodeEditorBetaToolbarContext) => React.ReactNode;
+    /** Callback fired when the user clicks inside a code block. Receives the innermost block. */
+    onBlockClick?: (block: CodeBlockInfo) => void;
+    /** When set, the editor searches for this text, scrolls to the match, and highlights the enclosing block. */
+    focusBlock?: string;
 }
 /**
  * CodeEditorBeta — experimental CodeMirror 6 replacement for the Monaco-based CodeEditor.
  *
- * Smaller bundle, no web workers, same toolbar UX. Drops Codeium AI completions.
- *
  * @example
  * ```tsx
  * <CodeEditorBeta
@@ -82,8 +77,9 @@ export interface CodeEditorBetaProps {
  *   onChange={setJsonString}
  *   language="json"
  *   height="400px"
+ *   onBlockClick={(block) => console.log(block)}
+ *   focusBlock="customer"
  * />
  * ```
  */
 export declare const CodeEditorBeta: FC<CodeEditorBetaProps>;
-export {};

package/dist/components/data-display/comparison/Comparison.d.ts

@@ -1,5 +1,5 @@
-import { Dispatch, ReactNode } from 'react';
-import { ILayoutItem } from './constants';
+import type { Dispatch, ReactNode } from 'react';
+import type { ILayoutItem } from './constants';
 export interface ComparisonProps {
     /** Configuration for header tabs */
     headerTabConfig?: {

package/dist/components/data-display/comparison/ComparisonContext.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, ReactNode } from 'react';
-import { COMPARISON_LAYOUT, ILayoutItem } from './constants';
+import { COMPARISON_LAYOUT, type ILayoutItem } from './constants';
 export type TComparisonContext = {
     headerTabConfig?: {
         tabs: string[];

package/dist/components/data-display/comparison/components/SortableItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ILayoutItem } from '../constants';
+import { type ILayoutItem } from '../constants';
 export interface SortableItemProps {
     item: ILayoutItem;
 }

package/dist/components/data-display/comparison/constants.d.ts

@@ -1,4 +1,4 @@
-import { TLabelValue } from '../../forms/select-field/SelectField';
+import type { TLabelValue } from "../../forms/select-field/SelectField";
 export declare enum COMPARISON_LAYOUT {
     ONE = 1,
     TWO = 2,

package/dist/components/data-display/comparison/utils.d.ts

@@ -1,4 +1,4 @@
-import { ILayoutItem } from './constants';
+import type { ILayoutItem } from './constants';
 export declare const gridLayoutItems: import("memoize-one").MemoizedFn<(layoutItems: Array<Pick<ILayoutItem, "id" | "visible" | "states" | "isLoading">>) => {
     items: Pick<ILayoutItem, "visible" | "id" | "isLoading" | "states">[];
     ids: number[];

package/dist/components/data-display/label-value/LabelValue.d.ts

@@ -93,6 +93,8 @@ export interface LabelValueProps {
     showDiff?: boolean;
     /** Whether this is a live field (shows bolt icon) */
     isLiveField?: boolean;
+    /** Whether this is an AI extracted field (shows AI extracted icon) */
+    isAiExtracted?: boolean;
     /** Delta change value for currency fields */
     deltaChange?: number;
     /** Theme mode */

package/dist/components/data-display/popper/Popper.d.ts

@@ -1,3 +1,4 @@
+import { type PopoverProps } from "antd";
 import "./styles.css";
 /**
  * Available placement options for the Popper
@@ -37,6 +38,8 @@ export interface PopperProps {
     "aria-label"?: string;
     /** Whether trigger is disabled */
     disabled?: boolean;
+    /** Trigger type */
+    trigger?: PopoverProps['trigger'];
 }
 /**
  * Popper component provides positioned floating content relative to a trigger element

package/dist/components/forms/creatable-select/CreatableSelect.d.ts

@@ -1,6 +1,6 @@
 import CreatableSelect from "react-select/creatable";
 import type { LabelType } from "../../data-display/label/Label";
-import type { ComponentProps } from "react";
+import { type ComponentProps } from "react";
 /**
  * Option type for the CreatableSelect component
  */

package/dist/components/forms/form/Form.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const Form: React.ForwardRefExoticComponent<React.FormHTMLAttributes<HTMLFormElement> & React.RefAttributes<HTMLFormElement>>;

package/dist/components/forms/md-input/MarkdownPreview.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Props for the MarkdownPreview component
+ */
+export interface MarkdownPreviewProps {
+    /** Markdown content to display */
+    content: string;
+    /** Additional CSS classes for the wrapper container */
+    className?: string;
+    /** Link target behavior: '_blank' for new tab, '_self' for current tab */
+    linkTarget?: '_blank' | '_self';
+    /** Whether to show syntax highlighting for code blocks */
+    enableSyntaxHighlighting?: boolean;
+}
+/**
+ * MarkdownPreview component displays rendered markdown content.
+ *
+ * **Supported Markdown Features:**
+ * - Headings (H1-H6)
+ * - Text formatting (bold, italic, underline, strikethrough)
+ * - Lists (bullet and numbered)
+ * - Code blocks with syntax highlighting
+ * - Inline code
+ * - Block quotes
+ * - Links with configurable target
+ * - Images (responsive)
+ * - Tables
+ * - Horizontal rules
+ *
+ * **Features:**
+ * - GFM (GitHub Flavored Markdown) support
+ * - HTML support via rehype-raw
+ * - Syntax highlighting for code blocks
+ * - Responsive images
+ * - Dark mode support
+ * - Configurable link behavior
+ *
+ * @example
+ * ```tsx
+ * <MarkdownPreview
+ *   content="# Hello World\n\nThis is **bold** text."
+ *   linkTarget="_blank"
+ * />
+ * ```
+ */
+export declare const MarkdownPreview: import("react").ForwardRefExoticComponent<MarkdownPreviewProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/forms/md-input/RichMarkdownInput.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Props for the RichMarkdownInput component
+ */
+export interface RichMarkdownInputProps {
+    /** Unique identifier for the markdown input */
+    id?: string;
+    /** Current markdown value */
+    value?: string;
+    /** Placeholder text for the textarea */
+    placeholder?: string;
+    /** Minimum number of visible text lines */
+    minRows?: number;
+    /** Maximum number of visible text lines */
+    maxRows?: number;
+    /** Whether the input is disabled */
+    isDisabled?: boolean;
+    /** Additional CSS classes for the wrapper container */
+    className?: string;
+    /** Additional CSS classes for the textarea */
+    textareaClassName?: string;
+    /** Additional CSS classes for the preview container */
+    previewClassName?: string;
+    /** Label text to display above the input */
+    label?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether to show the preview button */
+    showPreviewOnModal?: boolean;
+    /** Maximum character count */
+    maxLength?: number;
+    /** Link target behavior: '_blank' for new tab, '_self' for current tab */
+    linkTarget?: '_blank' | '_self';
+    /** Callback function called when the markdown value changes */
+    onChange: (value: string) => void;
+}
+/**
+ * A rich markdown input component with comprehensive formatting toolbar.
+ *
+ * **Text Formatting:**
+ * - Bold (Ctrl+B) - Always visible
+ * - Italic (Ctrl+I) - Always visible
+ * - Underline (Ctrl+U) - Always visible
+ * - Strikethrough - Hidden on mobile (< 640px)
+ *
+ * **Lists:**
+ * - Bullet lists - Always visible
+ * - Numbered lists - Always visible
+ *
+ * **Additional:**
+ * - Inline code (Ctrl+E) - Hidden on small screens (< 1024px)
+ * - Block quotes - Hidden on medium screens (< 1280px)
+ * - Headings - Hidden on small screens (< 1024px)
+ * - Links (Ctrl+K) - Hidden on medium screens (< 1280px)
+ * - Images - Supported in preview
+ * - Horizontal rules - Hidden on large screens (< 1536px)
+ *
+ * **Features:**
+ * - Edit/Preview toggle with icons
+ * - Character counter (optional)
+ * - Preview modal with scrolling
+ * - Keyboard shortcuts
+ * - Syntax highlighting for code blocks
+ * - Responsive toolbar (hides buttons progressively on smaller screens)
+ * - Dark mode support
+ * - Configurable link target behavior
+ *
+ * @example
+ * ```tsx
+ * <RichMarkdownInput
+ *   value={markdown}
+ *   onChange={setMarkdown}
+ *   placeholder="Enter description..."
+ *   label="Description"
+ *   maxLength={300}
+ *   linkTarget="_blank"
+ * />
+ * ```
+ */
+export declare const RichMarkdownInput: import("react").ForwardRefExoticComponent<RichMarkdownInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/forms/md-input/index.d.ts

@@ -0,0 +1,6 @@
+export { MdInput } from './MdInput';
+export type { MdInputProps } from './MdInput';
+export { RichMarkdownInput } from './RichMarkdownInput';
+export type { RichMarkdownInputProps } from './RichMarkdownInput';
+export { MarkdownPreview } from './MarkdownPreview';
+export type { MarkdownPreviewProps } from './MarkdownPreview';

package/dist/components/forms/select-field/SelectField.d.ts

@@ -1,4 +1,5 @@
 import type { SelectProps } from 'antd';
+import './SelectField.css';
 import type { ReactNode } from 'react';
 import type { LabelType } from '../../data-display/label/Label';
 /**

package/dist/design-system.css

@@ -1 +1 @@
-.lax-popper-overlay.ant-popover{z-index:9999}.lax-popper-overlay .ant-popover-inner{background-color:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 10px 30px #9e9e9e4d}.lax-popper-overlay .ant-popover-arrow:before{background-color:#fff;border:1px solid #EAECF0}.dark .lax-popper-overlay .ant-popover-inner{background-color:#1d2939;border-color:#344054;box-shadow:0 10px 30px #10101080}.dark .lax-popper-overlay .ant-popover-arrow:before{background-color:#1d2939;border-color:#344054}.Toastify__toast-container{z-index:100000}.Toastify__toast{min-height:64px;border-radius:4px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.Toastify__toast--success,.Toastify__toast--error,.Toastify__toast--warning,.Toastify__toast--info{background:transparent}.Toastify__toast-body{padding:0;margin:0;color:inherit;font-size:14px;font-weight:500;line-height:1.5}.Toastify__close-button{color:inherit;opacity:.7;align-self:flex-start;background:transparent;border:none;padding:4px;margin:0;transition:opacity .2s ease}.Toastify__close-button:hover{opacity:1}.Toastify__progress-bar{background:linear-gradient(to right,#4caf50,#8bc34a,#cddc39,#ffeb3b,#ffc107,#ff9800,#ff5722)}.Toastify__progress-bar--success{background:#12b76a}.Toastify__progress-bar--error{background:#f04438}.Toastify__progress-bar--warning{background:#f79009}.Toastify__progress-bar--info{background:#016dcf}@media (prefers-color-scheme: dark){.Toastify__toast-container{background:transparent}.Toastify__toast{box-shadow:0 4px 6px -1px #0000004d,0 2px 4px -1px #0003}}@media screen and (max-width: 640px){.Toastify__toast-container{left:1rem;right:1rem;bottom:1rem;width:auto}.Toastify__toast{margin-bottom:.5rem}}.Toastify__slide-enter--bottom-right,.Toastify__slide-enter--bottom-left,.Toastify__slide-enter--bottom-center{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.Toastify__slide-exit--bottom-right,.Toastify__slide-exit--bottom-left,.Toastify__slide-exit--bottom-center{animation-duration:.2s;animation-timing-function:cubic-bezier(.4,0,1,1)}@font-face{font-family:swiper-icons;src:url(data:application/font-woff;charset=utf-8;base64,\ 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);font-weight:400;font-style:normal}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translateZ(0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;transform:translate3d(0,-50%,0)}.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translate(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}
+:root{--lax-form-focus-border: var(--color-primary-600);--lax-form-focus-shadow: 0 0 0 3px var(--color-primary-100)}.dark{--lax-form-focus-border: var(--color-primary-400);--lax-form-focus-shadow: 0 0 0 3px var(--color-primary-950)}input:where([type=text],[type=email],[type=password],[type=number],[type=search],[type=date],[type=time],[type=datetime-local],[type=url],[type=tel],[type=color]):focus,textarea:focus,select:focus,[contenteditable=true]:focus{outline:none!important;border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.ant-select-focused .ant-select-selector,.ant-picker-focused,.ant-input-affix-wrapper-focused,.ant-input-affix-wrapper:focus-within,.ant-input-number-focused,.ant-input-number:focus-within,.ant-input:focus{outline:none!important;border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.ant-checkbox-input:focus-visible+.ant-checkbox-inner{border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.lax-select__control--is-focused{border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.peer:focus-visible+.lax-toggle-track{border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.lax-form-trigger:focus-visible{outline:none!important;border-color:var(--lax-form-focus-border)!important;box-shadow:var(--lax-form-focus-shadow)!important}.ant-select-selector{padding-left:18px!important}.lax-popper-overlay.ant-popover{z-index:9999}.lax-popper-overlay .ant-popover-inner{background-color:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 10px 30px #9e9e9e4d}.lax-popper-overlay .ant-popover-arrow:before{background-color:#fff;border:1px solid #EAECF0}.dark .lax-popper-overlay .ant-popover-inner{background-color:#1d2939;border-color:#344054;box-shadow:0 10px 30px #10101080}.dark .lax-popper-overlay .ant-popover-arrow:before{background-color:#1d2939;border-color:#344054}.Toastify__toast-container{z-index:100000}.Toastify__toast{min-height:64px;border-radius:4px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.Toastify__toast--success,.Toastify__toast--error,.Toastify__toast--warning,.Toastify__toast--info{background:transparent}.Toastify__toast-body{padding:0;margin:0;color:inherit;font-size:14px;font-weight:500;line-height:1.5}.Toastify__close-button{color:inherit;opacity:.7;align-self:flex-start;background:transparent;border:none;padding:4px;margin:0;transition:opacity .2s ease}.Toastify__close-button:hover{opacity:1}.Toastify__progress-bar{background:linear-gradient(to right,#4caf50,#8bc34a,#cddc39,#ffeb3b,#ffc107,#ff9800,#ff5722)}.Toastify__progress-bar--success{background:#12b76a}.Toastify__progress-bar--error{background:#f04438}.Toastify__progress-bar--warning{background:#f79009}.Toastify__progress-bar--info{background:#016dcf}@media (prefers-color-scheme: dark){.Toastify__toast-container{background:transparent}.Toastify__toast{box-shadow:0 4px 6px -1px #0000004d,0 2px 4px -1px #0003}}@media screen and (max-width: 640px){.Toastify__toast-container{left:1rem;right:1rem;bottom:1rem;width:auto}.Toastify__toast{margin-bottom:.5rem}}.Toastify__slide-enter--bottom-right,.Toastify__slide-enter--bottom-left,.Toastify__slide-enter--bottom-center{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.Toastify__slide-exit--bottom-right,.Toastify__slide-exit--bottom-left,.Toastify__slide-exit--bottom-center{animation-duration:.2s;animation-timing-function:cubic-bezier(.4,0,1,1)}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}:is(.swiper:not(.swiper-watch-progress),.swiper-watch-progress .swiper-slide-visible) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translateZ(0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;transform:translate3d(0,-50%,0)}:is(.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets) .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}:is(.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets).swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}:is(.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets).swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}:is(.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets) .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}:is(.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets).swiper-pagination-bullets-dynamic{left:50%;transform:translate(-50%);white-space:nowrap}:is(.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets).swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import "./components/forms/shared/FormFieldFocus.css";
 export { InputField } from "./components/forms/input-field/InputField";
 export type { InputFieldProps } from "./components/forms/input-field/InputField";
 export { BaseInputField, default as BaseInputFieldDefault } from "./components/forms/base-input-field/BaseInputField";
@@ -37,6 +38,7 @@ export type { DynamicDataInputFieldProps, DynamicDataModalProps as DynamicDataIn
 export { DynamicDataInput } from "./components/forms/dynamic-data-input/DynamicDataInput";
 export type { DynamicDataInputProps } from "./components/forms/dynamic-data-input/DynamicDataInput";
 export { PercentageInputField } from "./components/forms/percentage-input/PercentageInputField";
+export { Form } from "./components/forms/form/Form";
 export type { PercentageInputFieldProps, RiskDetails as PercentageInputFieldRiskDetails, RiskDetailsCardProps as PercentageInputFieldRiskDetailsCardProps, } from "./components/forms/percentage-input/PercentageInputField";
 export { Toggle } from "./components/forms/toggle/Toggle";
 export type { ToggleProps } from "./components/forms/toggle/Toggle";
@@ -230,6 +232,10 @@ export { NoAvailableContent as ComparisonNoAvailableContent } from "./components
 export type { ComparisonProps, TComparisonContext, ComparisonProviderProps, ILayoutItem, ExitIconProps, LayoutOneIconProps, LayoutTwoIconProps, LayoutThreeIconProps, } from "./components/data-display/comparison";
 export { FormulaInput, convertToPills, convertFromPills, getCursorPosition, setCursorPosition, getTextBeforeCursor, getCursorCoordinates, insertTextAtCursor, } from "./components/forms/formula-input";
 export type { FormulaInputProps } from "./components/forms/formula-input";
+export { RichMarkdownInput } from "./components/forms/md-input/RichMarkdownInput";
+export type { RichMarkdownInputProps } from "./components/forms/md-input/RichMarkdownInput";
+export { MarkdownPreview } from "./components/forms/md-input/MarkdownPreview";
+export type { MarkdownPreviewProps } from "./components/forms/md-input/MarkdownPreview";
 export { ShortcutKbd } from "./components/shortcut-kbd";
 export type { ShortcutKbdProps, ShortcutKbdVariant } from "./components/shortcut-kbd";
 export { ImageSlider } from "./components/sliders/ImageSlider";