@dreamcommerce/aurora 3.0.0-9 → 3.0.0-90

package/build/esm/packages/aurora/src/components/tree/components/tree_node.js

@@ -0,0 +1,74 @@
+import React, { useRef, Children } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { cn } from '../../../utilities/cn.js';
+import { ArrowDownSFillIcon } from '../../../assets/icons/arrow_down_s_fill.js';
+import { CSSTransition } from 'react-transition-group';
+import { useTree } from '../hooks/tree_hook.js';
+import { useTreeNode } from '../hooks/tree_node_hook.js';
+
+var _excluded = ["children", "id", "cssClassNames", "ContentComponent", "LabelComponent", "disabled"];
+var TreeNode = function TreeNode(_ref) {
+  var children = _ref.children,
+    id = _ref.id,
+    cssClassNames = _ref.cssClassNames,
+    ContentComponent = _ref.ContentComponent,
+    LabelComponent = _ref.LabelComponent,
+    disabled = _ref.disabled,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var treeApi = useTree();
+  var node = useTreeNode(id, rest);
+  var nodeChildrenRef = useRef(null);
+  var childrenCount = Children.count(children);
+  if (!node) return null;
+  var toggleNode = function toggleNode() {
+    treeApi.toggleNode(node.id);
+  };
+  var Label = LabelComponent ? (/*#__PURE__*/React.createElement("div", {
+    className: "aurora-w-full aurora-px-2 aurora-rounded-4 hover:aurora-bg-hover"
+  }, LabelComponent === null || LabelComponent === void 0 ? void 0 : LabelComponent({
+    node: node,
+    isLeaf: !children
+  }))) : (/*#__PURE__*/React.createElement("div", {
+    tabIndex: !children ? 0 : -1,
+    className: "aurora-w-full aurora-px-2 aurora-rounded-4 hover:aurora-bg-hover"
+  }, node.label ? node.label : node.id));
+  var Content = ContentComponent ? ContentComponent === null || ContentComponent === void 0 ? void 0 : ContentComponent({
+    node: node,
+    toggleNode: toggleNode,
+    isLeaf: !childrenCount
+  }) : (/*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-items-center aurora-rounded-4 hover:aurora-bg-hover"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "aurora-flex aurora-items-center aurora-p-1 aurora-cursor-pointer",
+    onClick: toggleNode
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "aurora-flex"
+  }, /*#__PURE__*/React.createElement(ArrowDownSFillIcon, {
+    className: cn('aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light -aurora-rotate-90 tree-arrow-transition', {
+      'aurora-rotate-0': node.expanded,
+      'aurora-fill-disabled': disabled
+    })
+  }))), Label));
+  return /*#__PURE__*/React.createElement("li", {
+    className: "aurora-flex aurora-flex-col aurora-gap-2",
+    role: "treeitem",
+    "aria-expanded": node.expanded
+  }, childrenCount ? Content : Label, childrenCount ? (/*#__PURE__*/React.createElement(CSSTransition, {
+    unmountOnExit: true,
+    in: node.expanded,
+    timeout: 50,
+    classNames: {
+      enter: 'tree__children-enter',
+      enterActive: 'tree__children-enter-active',
+      exit: 'tree__children-exit',
+      exitActive: 'tree__children-exit-active'
+    }
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "aurora-flex aurora-flex-col aurora-gap-2 aurora-pl-4 aurora-scale-100 aurora-origin-top aurora-list-none aurora-will-change-auto tree__children-transition",
+    ref: nodeChildrenRef
+  }, children))) : null);
+};
+
+export default TreeNode;
+export { TreeNode };
+//# sourceMappingURL=tree_node.js.map

package/build/esm/packages/aurora/src/components/tree/components/tree_node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/tree/constants.d.ts

@@ -0,0 +1 @@
+export declare const TREE_ROLE_ATTRIBUTE = "tree";

package/build/esm/packages/aurora/src/components/tree/constants.js

@@ -0,0 +1,4 @@
+var TREE_ROLE_ATTRIBUTE = 'tree';
+
+export { TREE_ROLE_ATTRIBUTE };
+//# sourceMappingURL=constants.js.map

package/build/esm/packages/aurora/src/components/tree/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/tree/context/tree_context.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare type ITreeNode = {
+    id: string;
+    label?: string;
+    expanded?: boolean;
+    disabled?: boolean;
+};
+export interface ITreeContext {
+    addNode(node: ITreeNode): void;
+    updateNode(nodeId: string, node: Partial<ITreeNode>): void;
+    hasNode(nodeId: string): boolean;
+    getNode(nodeId: string): ITreeNode | undefined;
+    removeNode(nodeId: string): void;
+    toggleNode(nodeId: string): void;
+}
+export declare const TreeContext: import("react").Context<ITreeContext>;
+export declare const TreeContextProvider: import("react").Provider<ITreeContext>;

package/build/esm/packages/aurora/src/components/tree/context/tree_context.js

@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+
+var TreeContext = /*#__PURE__*/createContext({
+  addNode: function addNode() {},
+  updateNode: function updateNode() {},
+  removeNode: function removeNode() {},
+  toggleNode: function toggleNode() {},
+  getNode: function getNode() {
+    return undefined;
+  },
+  hasNode: function hasNode() {
+    return false;
+  }
+});
+var TreeContextProvider = TreeContext.Provider;
+
+export { TreeContext, TreeContextProvider };
+//# sourceMappingURL=tree_context.js.map

package/build/esm/packages/aurora/src/components/tree/context/tree_context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/tree/context/tree_provider.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TPropsWithChildren } from "../../../typings/general";
+export declare const TreeProvider: ({ children }: TPropsWithChildren) => React.JSX.Element;

package/build/esm/packages/aurora/src/components/tree/context/tree_provider.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { TreeContextProvider } from './tree_context.js';
+
+var TreeProvider = function TreeProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    nodes = _useState2[0],
+    setNodes = _useState2[1];
+  var value = {
+    addNode: function addNode(node) {
+      setNodes(function (nodes) {
+        return [].concat(_toConsumableArray(nodes), [node]);
+      });
+    },
+    updateNode: function updateNode(nodeId, node) {
+      setNodes(function (nodes) {
+        return nodes.map(function (n) {
+          return n.id === nodeId ? _objectSpread2(_objectSpread2({}, n), node) : n;
+        });
+      });
+    },
+    getNode: function getNode(nodeId) {
+      return nodes.find(function (node) {
+        return node.id === nodeId;
+      });
+    },
+    removeNode: function removeNode(nodeId) {
+      setNodes(function (nodes) {
+        return nodes.filter(function (node) {
+          return node.id !== nodeId;
+        });
+      });
+    },
+    toggleNode: function toggleNode(nodeId) {
+      setNodes(function (nodes) {
+        return nodes.map(function (node) {
+          return node.id === nodeId ? _objectSpread2(_objectSpread2({}, node), {}, {
+            expanded: !node.expanded
+          }) : node;
+        });
+      });
+    },
+    hasNode: function hasNode(nodeId) {
+      return !!nodes.find(function (node) {
+        return node.id === nodeId;
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement(TreeContextProvider, {
+    value: value
+  }, children);
+};
+
+export { TreeProvider };
+//# sourceMappingURL=tree_provider.js.map

package/build/esm/packages/aurora/src/components/tree/context/tree_provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/tree/css_classes.d.ts

@@ -0,0 +1,22 @@
+export declare const TREE_CSS_CLASSES: {
+    readonly tree: "tree";
+    readonly treeNode: "tree__node";
+};
+export declare const TREE_NODE_CSS_CLASSES: {
+    readonly treeNode: "tree-node";
+    readonly treeNodeTogglerBtn: "tree-node__toggler-btn";
+    readonly treeNodeTogglerBtnExpanded: "tree-node__toggler-btn_expanded";
+    readonly treeNodeTogglerBtnIcon: "tree-node__toggler-btn-icon";
+    readonly treeNodeLabelContent: "tree-node__label-content";
+    readonly treeNodeLabel: "tree-node__label";
+    readonly treeNodeChildren: "tree-node__children";
+    readonly treeNodeChildrenEnter: "tree-node__children-enter";
+    readonly treeNodeChildrenEnterActive: "tree-node__children-enter-active";
+    readonly treeNodeChildrenExit: "tree-node__children-exit";
+    readonly treeNodeChildrenExitActive: "tree-node__children-exit-active";
+    readonly treeNodeChildrenExitDone: "tree-node__children-exit-done";
+    readonly treeNodeExpanded: "tree-node_expanded";
+    readonly treeNodeDisabled: "tree-node_disabled";
+    readonly treeNodeFocused: "tree-node_focused";
+    readonly treeNodeWithoutChildren: "tree-node_without-children";
+};

package/build/esm/packages/aurora/src/components/tree/css_classes.js

@@ -0,0 +1,25 @@
+const baseCssClass = 'tree';
+export const TREE_CSS_CLASSES = {
+    tree: baseCssClass,
+    treeNode: `${baseCssClass}__node`
+};
+const treeNodeBaseCssClass = `tree-node`;
+export const TREE_NODE_CSS_CLASSES = {
+    treeNode: treeNodeBaseCssClass,
+    treeNodeTogglerBtn: `${treeNodeBaseCssClass}__toggler-btn`,
+    treeNodeTogglerBtnExpanded: `${treeNodeBaseCssClass}__toggler-btn_expanded`,
+    treeNodeTogglerBtnIcon: `${treeNodeBaseCssClass}__toggler-btn-icon`,
+    treeNodeLabelContent: `${treeNodeBaseCssClass}__label-content`,
+    treeNodeLabel: `${treeNodeBaseCssClass}__label`,
+    treeNodeChildren: `${treeNodeBaseCssClass}__children`,
+    treeNodeChildrenEnter: `${treeNodeBaseCssClass}__children-enter`,
+    treeNodeChildrenEnterActive: `${treeNodeBaseCssClass}__children-enter-active`,
+    treeNodeChildrenExit: `${treeNodeBaseCssClass}__children-exit`,
+    treeNodeChildrenExitActive: `${treeNodeBaseCssClass}__children-exit-active`,
+    treeNodeChildrenExitDone: `${treeNodeBaseCssClass}__children-exit-done`,
+    treeNodeExpanded: `${treeNodeBaseCssClass}_expanded`,
+    treeNodeDisabled: `${treeNodeBaseCssClass}_disabled`,
+    treeNodeFocused: `${treeNodeBaseCssClass}_focused`,
+    treeNodeWithoutChildren: `${treeNodeBaseCssClass}_without-children`
+};
+//# sourceMappingURL=css_classes.js.map

package/build/esm/packages/aurora/src/components/tree/css_classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_classes.js","sourceRoot":"","sources":["../../../../../../../src/components/tree/css_classes.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,MAAM,CAAC;AAE5B,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE,GAAG,YAAY,QAAQ;CAC3B,CAAC;AAEX,MAAM,oBAAoB,GAAG,WAAW,CAAC;AAEzC,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACjC,QAAQ,EAAE,oBAAoB;IAC9B,kBAAkB,EAAE,GAAG,oBAAoB,eAAe;IAC1D,0BAA0B,EAAE,GAAG,oBAAoB,wBAAwB;IAC3E,sBAAsB,EAAE,GAAG,oBAAoB,oBAAoB;IACnE,oBAAoB,EAAE,GAAG,oBAAoB,iBAAiB;IAC9D,aAAa,EAAE,GAAG,oBAAoB,SAAS;IAC/C,gBAAgB,EAAE,GAAG,oBAAoB,YAAY;IACrD,qBAAqB,EAAE,GAAG,oBAAoB,kBAAkB;IAChE,2BAA2B,EAAE,GAAG,oBAAoB,yBAAyB;IAC7E,oBAAoB,EAAE,GAAG,oBAAoB,iBAAiB;IAC9D,0BAA0B,EAAE,GAAG,oBAAoB,wBAAwB;IAC3E,wBAAwB,EAAE,GAAG,oBAAoB,sBAAsB;IACvE,gBAAgB,EAAE,GAAG,oBAAoB,WAAW;IACpD,gBAAgB,EAAE,GAAG,oBAAoB,WAAW;IACpD,eAAe,EAAE,GAAG,oBAAoB,UAAU;IAClD,uBAAuB,EAAE,GAAG,oBAAoB,mBAAmB;CAC7D,CAAC"}

package/build/esm/packages/aurora/src/components/tree/hooks/tree_hook.d.ts

@@ -0,0 +1 @@
+export declare const useTree: () => import("../context/tree_context").ITreeContext;

package/build/esm/packages/aurora/src/components/tree/hooks/tree_hook.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TreeContext } from '../context/tree_context.js';
+
+var useTree = function useTree() {
+  var context = React.useContext(TreeContext);
+  if (!context) {
+    throw new Error('useTree must be used within a TreeContextProvider');
+  }
+  return context;
+};
+
+export { useTree };
+//# sourceMappingURL=tree_hook.js.map

package/build/esm/packages/aurora/src/components/tree/hooks/tree_hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/tree/hooks/tree_node_hook.d.ts

@@ -0,0 +1,2 @@
+import { ITreeNode } from "../context/tree_context";
+export declare const useTreeNode: (nodeId: string, props?: Partial<ITreeNode>) => ITreeNode | undefined;

package/build/esm/packages/aurora/src/components/tree/hooks/tree_node_hook.js

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useTree } from './tree_hook.js';
+
+var useTreeNode = function useTreeNode(nodeId, props) {
+  var treeApi = useTree();
+  useEffect(function () {
+    if (!treeApi.hasNode(nodeId)) treeApi.addNode(_objectSpread2({
+      id: nodeId
+    }, props));
+  });
+  useEffect(function () {
+    if (treeApi.hasNode(nodeId) && props) treeApi.updateNode(nodeId, props);
+  }, [props === null || props === void 0 ? void 0 : props.expanded]);
+  useEffect(function () {
+    return function () {
+      return treeApi.removeNode(nodeId);
+    };
+  }, []);
+  return treeApi.getNode(nodeId);
+};
+
+export { useTreeNode };
+//# sourceMappingURL=tree_node_hook.js.map

package/build/esm/packages/aurora/src/components/tree/hooks/tree_node_hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/tree/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare type TTreeProps = {
+    cssClassNames?: string;
+    cssStyles?: React.CSSProperties;
+    onMouseEnter?: (event: React.MouseEvent<HTMLUListElement, MouseEvent>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLUListElement, MouseEvent>) => void;
+};
+export declare const Tree: React.ForwardRefExoticComponent<TTreeProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLUListElement>>;
+export default Tree;

package/build/esm/packages/aurora/src/components/tree/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { cn } from '../../utilities/cn.js';
+import { TREE_ROLE_ATTRIBUTE } from './constants.js';
+import { TreeProvider } from './context/tree_provider.js';
+
+// eslint-disable-next-line react/display-name
+var Tree = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    cssClassNames = _ref.cssClassNames,
+    cssStyles = _ref.cssStyles,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave;
+  return /*#__PURE__*/React.createElement(TreeProvider, null, /*#__PURE__*/React.createElement("ul", {
+    role: TREE_ROLE_ATTRIBUTE,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    ref: ref,
+    style: cssStyles,
+    className: cn('aurora-list-none aurora-flex aurora-flex-col aurora-gap-2', cssClassNames)
+  }, children));
+});
+
+export default Tree;
+export { Tree };
+//# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/tree/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/typography/typography.d.ts

@@ -1,13 +1,270 @@
+/// <reference types="trusted-types" />
 import React, { PropsWithChildren } from 'react';
 import { TTypographyProps } from "./typography_types";
-declare const typographyVariants: (props?: ({
-    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | null | undefined;
-    transform?: "uppercase" | "lowercase" | "capitalize" | null | undefined;
-    weight?: "normal" | "medium" | "semibold" | "bold" | "extrabold" | null | undefined;
+export declare const Typography: ({ variant, as, style, color, weight, size, lineHeight, transform, children, className, ...rest }: PropsWithChildren<TTypographyProps>) => React.DetailedReactHTMLElement<{
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {}) | undefined;
+    autoFocus?: boolean | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: React.AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "off" | "on" | undefined;
+    inputMode?: "search" | "none" | "text" | "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-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "true" | "false" | "time" | "page" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: 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 | "true" | "false" | "dialog" | "menu" | "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-rowindextext"?: string | 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;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCut?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCutCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onPaste?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStart?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onFocus?: React.FocusEventHandler<HTMLElement> | undefined;
+    onFocusCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+    onBlur?: React.FocusEventHandler<HTMLElement> | undefined;
+    onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+    onChange?: React.FormEventHandler<HTMLElement> | undefined;
+    onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onBeforeInput?: React.FormEventHandler<HTMLElement> | undefined;
+    onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onInput?: React.FormEventHandler<HTMLElement> | undefined;
+    onInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onReset?: React.FormEventHandler<HTMLElement> | undefined;
+    onResetCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
+    onSubmitCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onInvalid?: React.FormEventHandler<HTMLElement> | undefined;
+    onInvalidCapture?: React.FormEventHandler<HTMLElement> | undefined;
+    onLoad?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onError?: React.ReactEventHandler<HTMLElement> | undefined;
+    onErrorCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPress?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onAbort?: React.ReactEventHandler<HTMLElement> | undefined;
+    onAbortCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChange?: React.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEmptied?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEncrypted?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEnded?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEndedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedData?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStart?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPause?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPauseCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlaying?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlayingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onProgress?: React.ReactEventHandler<HTMLElement> | undefined;
+    onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onRateChange?: React.ReactEventHandler<HTMLElement> | undefined;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onResize?: React.ReactEventHandler<HTMLElement> | undefined;
+    onResizeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeeked?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeeking?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeekingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onStalled?: React.ReactEventHandler<HTMLElement> | undefined;
+    onStalledCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSuspend?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSuspendCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdate?: React.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChange?: React.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onWaiting?: React.ReactEventHandler<HTMLElement> | undefined;
+    onWaitingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onAuxClick?: React.MouseEventHandler<HTMLElement> | undefined;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLElement> | undefined;
+    onClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenu?: React.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClick?: React.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onDrag?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEnd?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEndCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEnter?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEnterCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragExit?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragExitCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragLeave?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragOver?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragOverCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragStart?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragStartCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDrop?: React.DragEventHandler<HTMLElement> | undefined;
+    onDropCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onMouseDown?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseEnter?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseLeave?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMove?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOut?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOver?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUp?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onSelect?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSelectCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onTouchCancel?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEnd?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMove?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStart?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onPointerDown?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMove?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUp?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancel?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerEnter?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerLeave?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOver?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOut?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onScroll?: React.UIEventHandler<HTMLElement> | undefined;
+    onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined;
+    onWheel?: React.WheelEventHandler<HTMLElement> | undefined;
+    onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined;
+    onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
     defaultVariants?: "variant" | "weight" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare const Typography: ({ variant, as, style, color, weight, transform, children }: PropsWithChildren<TTypographyProps>) => React.DetailedReactHTMLElement<{
     className: string;
     style: React.CSSProperties | undefined;
 }, HTMLElement>;
-export { typographyVariants, Typography };