quicksnack 3.36.0 → 3.38.0

package/dist/src/components/Box/Box.d.ts

@@ -0,0 +1,24 @@
+import { Responsive } from "../../responsiveness/responsiveProps";
+import { PropsWithChildren, HTMLProps } from "react";
+export interface BoxProps {
+    className?: string;
+    p?: Responsive<number>;
+    pt?: Responsive<number>;
+    pr?: Responsive<number>;
+    pb?: Responsive<number>;
+    pl?: Responsive<number>;
+    m?: Responsive<number>;
+    mt?: Responsive<number>;
+    mr?: Responsive<number>;
+    mb?: Responsive<number>;
+    ml?: Responsive<number>;
+    width?: Responsive<string>;
+    display?: Responsive<"inline" | "block" | "contents" | "flex" | "grid" | "inline-block" | "inline-flex" | "inline-grid" | "inline-table" | "list-item" | "run-in" | "table" | "table-caption" | "table-column-group" | "table-header-group" | "table-footer-group" | "table-row-group" | "table-cell" | "table-column" | "table-row" | "none" | "initial" | "inherit">;
+    flexGrow?: Responsive<"inherit" | "initial" | "unset" | 1 | 0>;
+    flexShrink?: Responsive<"inherit" | "initial" | "unset" | 1 | 0>;
+    flexDirection?: Responsive<"row" | "row-reverse" | "column" | "column-reverse">;
+    alignItems?: Responsive<"stretch" | "center" | "flex-start" | "flex-end" | "baseline" | "initial" | "inherit">;
+    textAlign?: Responsive<"left" | "right" | "center" | "justify" | "inherit">;
+    justifyContent?: Responsive<"center" | "start" | "end" | "flex-start" | "flex-end" | "left" | "right" | "normal" | "space-between" | "space-around" | "space-evenly" | "stretch" | "safe center" | "unsafe center" | "inherit" | "initial" | "unset">;
+}
+export declare const Box: ({ children, className, p, pt, pr, pb, pl, m, mt, mr, mb, ml, display, flexGrow, flexShrink, flexDirection, alignItems, textAlign, justifyContent, width, ...rest }: PropsWithChildren<BoxProps> & Omit<HTMLProps<HTMLDivElement>, "width">) => JSX.Element;

package/dist/{components/Box/Box.d.ts → src/components/Box/_Box.d.ts}

@@ -20,4 +20,4 @@ export interface BoxProps {
     textAlign?: Responsive<"left" | "right" | "center" | "justify" | "inherit">;
     justifyContent?: Responsive<"center" | "start" | "end" | "flex-start" | "flex-end" | "left" | "right" | "normal" | "space-between" | "space-around" | "space-evenly" | "stretch" | "safe center" | "unsafe center" | "inherit" | "initial" | "unset">;
 }
-export declare const Box: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxProps>>;
+export declare const _Box: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxProps>>;

package/dist/src/components/Box/scripts/generateBoxCss.d.ts

@@ -0,0 +1 @@
+export declare const generateBoxCss: () => Promise<string>;

package/dist/src/components/Menu/SideBar.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export declare const SIDEBAR_COLLAPSED_WIDTH = 15;
+declare type SideBarProps = {
+    isDesktopMenuOpen?: boolean;
+    isMobileMenuOpen?: boolean;
+    minWidth?: number;
+};
+export declare const StyledSidebar: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<Pick<import("../Box/Box").BoxProps & {
+    children?: React.ReactNode;
+} & Omit<React.HTMLProps<HTMLDivElement>, "width">, "key" | "children" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "list" | "step" | "target" | "start" | "content" | "size" | "default" | "wrap" | "open" | "multiple" | "disabled" | keyof import("../Box/Box").BoxProps | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "name" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "type" | "useMap" | "wmode"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, SideBarProps>>;
+export declare const SideBar: React.FC<React.PropsWithChildren<SideBarProps>>;
+export {};

package/dist/{components → src/components}/Panel/Panel.d.ts

@@ -4,7 +4,7 @@ export interface PanelProps {
     className?: string;
     p?: number;
     title?: string | JSX.Element;
-    titleLevel?: React.ComponentProps<typeof Header>['level'];
+    titleLevel?: React.ComponentProps<typeof Header>["level"];
     titleMeta?: string | JSX.Element;
     onClickTitle?: React.MouseEventHandler;
     footer?: string | JSX.Element;

package/dist/{components → src/components}/Tabs/Tabs.d.ts

@@ -2,10 +2,18 @@
 export declare const Tabs: import("styled-components").IStyledComponent<"web", {
     key?: import("react").Key | null | undefined;
     children?: import("react").ReactNode;
+    cite?: string | undefined;
+    data?: string | undefined;
+    form?: string | undefined;
+    label?: string | undefined;
     p?: import("../..").Responsive<number> | undefined;
     slot?: string | undefined;
+    span?: number | undefined;
     style?: import("react").CSSProperties | undefined;
+    summary?: string | undefined;
     title?: string | undefined;
+    pattern?: string | undefined;
+    value?: string | number | readonly string[] | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -258,6 +266,18 @@ export declare const Tabs: import("styled-components").IStyledComponent<"web", {
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    as?: string | undefined;
+    list?: string | undefined;
+    step?: string | number | undefined;
+    target?: string | undefined;
+    start?: number | undefined;
+    content?: string | undefined;
+    size?: number | undefined;
+    default?: boolean | undefined;
+    wrap?: string | undefined;
+    open?: boolean | undefined;
+    multiple?: boolean | undefined;
+    disabled?: boolean | undefined;
     pt?: import("../..").Responsive<number> | undefined;
     pr?: import("../..").Responsive<number> | undefined;
     pb?: import("../..").Responsive<number> | undefined;
@@ -267,13 +287,97 @@ export declare const Tabs: import("styled-components").IStyledComponent<"web", {
     mr?: import("../..").Responsive<number> | undefined;
     mb?: import("../..").Responsive<number> | undefined;
     ml?: import("../..").Responsive<number> | undefined;
-    width?: import("../..").Responsive<string | number> | undefined;
+    width?: import("../..").Responsive<string> | undefined;
     display?: import("../..").Responsive<"table" | "inherit" | "initial" | "none" | "grid" | "inline" | "block" | "contents" | "run-in" | "flex" | "table-caption" | "table-cell" | "table-column" | "table-column-group" | "table-footer-group" | "table-header-group" | "table-row" | "table-row-group" | "inline-block" | "inline-flex" | "inline-grid" | "inline-table" | "list-item"> | undefined;
-    flexGrow?: import("../..").Responsive<number | "inherit" | "initial" | "unset"> | undefined;
-    flexShrink?: import("../..").Responsive<number | "inherit" | "initial" | "unset"> | undefined;
+    flexGrow?: import("../..").Responsive<0 | 1 | "inherit" | "initial" | "unset"> | undefined;
+    flexShrink?: import("../..").Responsive<0 | 1 | "inherit" | "initial" | "unset"> | undefined;
     flexDirection?: import("../..").Responsive<"row" | "column" | "column-reverse" | "row-reverse"> | undefined;
     alignItems?: import("../..").Responsive<"inherit" | "initial" | "stretch" | "center" | "flex-end" | "flex-start" | "baseline"> | undefined;
     textAlign?: import("../..").Responsive<"inherit" | "center" | "left" | "right" | "justify"> | undefined;
     justifyContent?: import("../..").Responsive<"inherit" | "initial" | "unset" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "left" | "right" | "safe center" | "unsafe center"> | undefined;
+    accept?: string | undefined;
+    acceptCharset?: string | undefined;
+    action?: string | undefined;
+    allowFullScreen?: boolean | undefined;
+    allowTransparency?: boolean | undefined;
+    alt?: string | undefined;
+    async?: boolean | undefined;
+    autoComplete?: string | undefined;
+    autoFocus?: boolean | undefined;
+    autoPlay?: boolean | undefined;
+    capture?: boolean | "user" | "environment" | undefined;
+    cellPadding?: string | number | undefined;
+    cellSpacing?: string | number | undefined;
+    charSet?: string | undefined;
+    challenge?: string | undefined;
+    checked?: boolean | undefined;
+    classID?: string | undefined;
+    cols?: number | undefined;
+    colSpan?: number | undefined;
+    controls?: boolean | undefined;
+    coords?: string | undefined;
+    crossOrigin?: string | undefined;
+    dateTime?: string | undefined;
+    defer?: boolean | undefined;
+    download?: any;
+    encType?: string | undefined;
+    formAction?: string | undefined;
+    formEncType?: string | undefined;
+    formMethod?: string | undefined;
+    formNoValidate?: boolean | undefined;
+    formTarget?: string | undefined;
+    frameBorder?: string | number | undefined;
+    headers?: string | undefined;
+    height?: string | number | undefined;
+    high?: number | undefined;
+    href?: string | undefined;
+    hrefLang?: string | undefined;
+    htmlFor?: string | undefined;
+    httpEquiv?: string | undefined;
+    integrity?: string | undefined;
+    keyParams?: string | undefined;
+    keyType?: string | undefined;
+    kind?: string | undefined;
+    loop?: boolean | undefined;
+    low?: number | undefined;
+    manifest?: string | undefined;
+    marginHeight?: number | undefined;
+    marginWidth?: number | undefined;
+    max?: string | number | undefined;
+    maxLength?: number | undefined;
+    media?: string | undefined;
+    mediaGroup?: string | undefined;
+    method?: string | undefined;
+    min?: string | number | undefined;
+    minLength?: number | undefined;
+    muted?: boolean | undefined;
+    name?: string | undefined;
+    nonce?: string | undefined;
+    noValidate?: boolean | undefined;
+    optimum?: number | undefined;
+    playsInline?: boolean | undefined;
+    poster?: string | undefined;
+    preload?: string | undefined;
+    readOnly?: boolean | undefined;
+    rel?: string | undefined;
+    required?: boolean | undefined;
+    reversed?: boolean | undefined;
+    rows?: number | undefined;
+    rowSpan?: number | undefined;
+    sandbox?: string | undefined;
+    scope?: string | undefined;
+    scoped?: boolean | undefined;
+    scrolling?: string | undefined;
+    seamless?: boolean | undefined;
+    selected?: boolean | undefined;
+    shape?: string | undefined;
+    sizes?: string | undefined;
+    src?: string | undefined;
+    srcDoc?: string | undefined;
+    srcLang?: string | undefined;
+    srcSet?: string | undefined;
+    type?: string | undefined;
+    useMap?: string | undefined;
+    wmode?: string | undefined;
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }>;

package/dist/src/form/ScaffoldForm/utils/assertGridIsValid.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/index.d.ts

@@ -0,0 +1,58 @@
+import "./theme.css";
+export * from "./UiProvider";
+export * from "./UiWrapper";
+export * from "./animation/SlideInFromTop/SlideInFromTop";
+export * from "./components/Alert/Alert";
+export * from "./components/AnimatedCheckmark/AnimatedCheckmark";
+export * from "./components/Box/_Box";
+export * from "./components/BreadCrumbs/BreadCrumbs";
+export * from "./components/CollapsiblePanel/CollapsiblePanel";
+export * from "./components/ConfirmButton/ConfirmButton";
+export * from "./components/ConfirmModal/ConfirmModal";
+export * from "./components/Details/Details";
+export * from "./components/Dropdown/Dropdown";
+export * from "./components/Dropzone/Dropzone";
+export * from "./components/Feedback/Feedback";
+export * from "./components/Floater/Floater";
+export * from "./components/Footer/Footer";
+export * from "./components/HorizontalScroller/HorizontalScroller";
+export * from "./components/Menu/HamburgerButton";
+export * from "./components/Menu/Menu";
+export * from "./components/Menu/MenuCloseButton";
+export * from "./components/Menu/MenuSlideOpenIndicator";
+export * from "./components/Menu/SideBarHeader";
+export * from "./components/Menu/useCloseSidebarOnNavigate";
+export * from "./components/Menu/useToggleMobileMenu";
+export * from "./components/Modal/Modal";
+export * from "./components/Overlay/Overlay";
+export * from "./components/Paginator/Paginator";
+export * from "./components/Panel/Panel";
+export * from "./components/Section/Section";
+export * from "./components/Statistic/Statistic";
+export * from "./components/Table/Table";
+export * from "./components/Tabs/Tab";
+export * from "./components/Tabs/TabContent";
+export * from "./components/Tabs/Tabs";
+export * from "./components/Timeline/Timeline";
+export * from "./components/TopBar/TopBar";
+export * from "./form/Button/Button";
+export * from "./form/Checkbox/Checkbox";
+export * from "./form/FileField/FileField";
+export * from "./form/Select/Select";
+export * from "./form/TextField/TextField";
+export * from "./form/PasswordStrengthField/PasswordStrenghField";
+export * from "./form/ScaffoldForm/FormGrid/FormGridWrapper";
+export { FormGrid } from "./form/ScaffoldForm/FormGrid/FormGrid";
+export * from "./layouts/BasicLayout/BasicLayout";
+export * from "./layouts/FloatingPanelLayout/FloatingPanelLayout";
+export * from "./layouts/constants";
+export * from "./form/ScaffoldForm/utils/FormPositioner";
+export * from "./form/ScaffoldForm/ScaffoldForm";
+export * from "./form/ScaffoldForm/ScaffoldField";
+export * from "./form/ScaffoldForm/ScaffoldFormProvider";
+export * from "./form/ScaffoldForm/types";
+export * from "./responsiveness/responsiveProps";
+export * from "./responsiveness/useResponsiveBreakpoints";
+export * from "./typography/Header/Header";
+export * from "./typography/Paragraph/Paragraph";
+export * from "./theme";

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "quicksnack",
   "description": "Quickly create beautiful admin layouts using react",
-  "version": "3.36.0",
+  "version": "3.38.0",
   "private": false,
   "files": [
     "dist/**"
   ],
   "license": "MIT",
   "main": "dist/bundle.min.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/src/index.d.ts",
   "scripts": {
     "build": "rollup --config",
     "storybook": "npx storybook dev -p 6006",
     "build-storybook": "storybook build -o ./public",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-release",
+    "css": "ts-node --project tsconfig.json ./scripts/css/index.ts"
   },
   "publishConfig": {
     "access": "public"
@@ -81,10 +82,14 @@
     "@types/react": "18.0.9",
     "@types/react-dom": "18.0.5",
     "babel-loader": "8.2.5",
+    "commander": "^11.1.0",
     "css-loader": "^6.8.1",
-    "postcss-each": "^1.1.0",
+    "cssnano": "^6.0.2",
+    "postcss-advanced-variables": "^3.0.1",
+    "postcss-custom-media": "^10.0.2",
     "postcss-loader": "^7.3.3",
     "postcss-nested": "^6.0.1",
+    "prettier": "^3.1.1",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-hook-form": "7.34.0",
@@ -95,6 +100,7 @@
     "storybook": "7.6.1",
     "style-loader": "^3.3.3",
     "styled-components": "6.0.7",
+    "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
     "typescript": "4.6.4"
   }

package/dist/components/Menu/SideBar.d.ts

@@ -1,271 +0,0 @@
-import React from "react";
-export declare const SIDEBAR_COLLAPSED_WIDTH = 15;
-declare type SideBarProps = {
-    isDesktopMenuOpen?: boolean;
-    isMobileMenuOpen?: boolean;
-    minWidth?: number;
-};
-export declare const StyledSidebar: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<Pick<{
-    ref?: React.LegacyRef<HTMLDivElement> | undefined;
-    key?: React.Key | null | undefined;
-    defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined;
-    suppressHydrationWarning?: boolean | undefined;
-    accessKey?: string | undefined;
-    className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
-    contextMenu?: string | undefined;
-    dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    hidden?: boolean | undefined;
-    id?: string | undefined;
-    lang?: string | undefined;
-    placeholder?: string | undefined;
-    slot?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    style?: React.CSSProperties | undefined;
-    tabIndex?: number | undefined;
-    title?: string | undefined;
-    translate?: "yes" | "no" | undefined;
-    radioGroup?: string | undefined;
-    role?: React.AriaRole | undefined;
-    about?: string | undefined;
-    datatype?: string | undefined;
-    inlist?: any;
-    prefix?: string | undefined;
-    property?: string | undefined;
-    resource?: string | undefined;
-    typeof?: string | undefined;
-    vocab?: string | undefined;
-    autoCapitalize?: string | undefined;
-    autoCorrect?: string | undefined;
-    autoSave?: string | undefined;
-    color?: string | undefined;
-    itemProp?: string | undefined;
-    itemScope?: boolean | undefined;
-    itemType?: string | undefined;
-    itemID?: string | undefined;
-    itemRef?: string | undefined;
-    results?: number | undefined;
-    security?: string | undefined;
-    unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
-    is?: string | undefined;
-    "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
-    "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-details"?: string | undefined;
-    "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
-    "aria-errormessage"?: string | undefined;
-    "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined;
-    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
-    "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-label"?: string | undefined;
-    "aria-labelledby"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined;
-    "aria-modal"?: (boolean | "true" | "false") | undefined;
-    "aria-multiline"?: (boolean | "true" | "false") | undefined;
-    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
-    "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowspan"?: number | undefined;
-    "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
-    children?: React.ReactNode;
-    dangerouslySetInnerHTML?: {
-        __html: string;
-    } | undefined;
-    onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
-    onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
-    onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
-    onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
-    onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-    onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
-    onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
-    onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
-    onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
-    onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
-    onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
-    onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
-    onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
-} & import("../Box/Box").BoxProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | keyof import("../Box/Box").BoxProps> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, SideBarProps>>;
-export declare const SideBar: React.FC<React.PropsWithChildren<SideBarProps>>;
-export {};