@rocket.chat/fuselage 0.6.3-dev.46 → 0.6.3-dev.460

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Rocket.Chat
+Copyright (c) 2021 Rocket.Chat
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,35 +1,112 @@
-<h1>@rocket.chat/fuselage</h1>
-<p>
-  <img alt="Version" src="https://img.shields.io/npm/v/@rocket.chat/fuselage.svg">
-  <a href="https://github.com/RocketChat/Rocket.Chat.Fuselage#readme" target="_blank"><img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" /></a>
-  <a href="https://github.com/RocketChat/Rocket.Chat.Fuselage/graphs/commit-activity" target="_blank"><img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" /></a>
-  <a href="https://rocketchat.github.io/Rocket.Chat.Fuselage" target="_blank"><img alt="Storybook" src="https://cdn.jsdelivr.net/gh/storybooks/brand@master/badge/badge-storybook.svg" /></a>
-  <a href="https://circleci.com/gh/RocketChat/Rocket.Chat.Fuselage" target="_blank"><img alt="Build Status on CircleCI" src="https://circleci.com/gh/RocketChat/Rocket.Chat.Fuselage/tree/master.svg?style=svg&circle-token=4bf3c8af9bf96e1338430d1ba3ce0084a45d1647" /></a>
-  <a href="https://twitter.com/RocketChat" target="_blank"><img alt="Twitter: RocketChat" src="https://img.shields.io/twitter/follow/RocketChat.svg?style=social" /></a>
+<!--header-->
+
+<p align="center">
+  <a href="https://rocket.chat" title="Rocket.Chat">
+    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
+  </a>
 </p>
 
-### 🏠 [Homepage](https://rocket.chat/Rocket.Chat.Fuselage)
+# `@rocket.chat/fuselage`
+
+---
+
+[![npm@latest](https://img.shields.io/npm/v/@rocket.chat/fuselage/latest?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons/v/latest) [![npm@next](https://img.shields.io/npm/v/@rocket.chat/fuselage/next?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons/v/next) ![react version](https://img.shields.io/npm/dependency-version/@rocket.chat/fuselage/peer/react?style=flat-square) [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://rocketchat.github.io/Rocket.Chat.Fuselage/fuselage) ![npm downloads](https://img.shields.io/npm/dw/@rocket.chat/fuselage?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@rocket.chat/fuselage?style=flat-square)
+
+![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage&style=flat-square) ![peer deps](https://img.shields.io/david/peer/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage&style=flat-square) ![dev deps](https://img.shields.io/david/dev/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage&style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@rocket.chat/fuselage?style=flat-square)
+
+<!--/header-->
 
 ## Install
 
+<!--install-->
+
+Firstly, install the peer dependencies (prerequisites):
+
+```sh
+npm i @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom react-virtuoso
+
+# or, if you are using yarn:
+
+yarn add @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom react-virtuoso
+```
+
+Add `@rocket.chat/fuselage` as a dependency:
+
+```sh
+npm i @rocket.chat/fuselage
+
+# or, if you are using yarn:
+
+yarn add @rocket.chat/fuselage
+```
+
+<!--/install-->
+
+## Contributing
+
+<!--contributing(msg)-->
+
+Contributions, issues, and feature requests are welcome!<br />
+Feel free to check the [issues](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues).
+
+<!--/contributing(msg)-->
+
+### Building
+
+As this package dependends on others in this monorepo, before anything run the following at the root directory:
+
+<!--yarn(build)-->
+
+```sh
+yarn build
+```
+
+<!--/yarn(build)-->
+
+### Linting
+
+To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
+Before commiting, check if your code fits our style by running:
+
+<!--yarn(lint)-->
+
 ```sh
-npm install --save @rocket.chat/fuselage
+yarn lint
 ```
 
-## Author
+<!--/yarn(lint)-->
 
-👤 **Rocket.Chat**
+Some linter warnings and errors can be automatically fixed:
 
-* Twitter: [@RocketChat](https://twitter.com/RocketChat)
-* Github: [@RocketChat](https://github.com/RocketChat)
+<!--yarn(lint-and-fix)-->
 
-## 🤝 Contributing
+```sh
+yarn lint-and-fix
+```
 
-Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues).
+<!--/yarn(lint-and-fix)-->
 
-## Show your support
+### Running tests
 
-Give a ⭐️ if this project helped you!
+Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:
+
+<!--yarn(test)-->
+
+```sh
+yarn test
+```
+
+<!--/yarn(test)-->
+
+### Component stories
+
+We develop and describe our visual components in the form of stories, manage by a tool called [Storybook](https://storybook.js.org/).
+To start developing with Storybook, run:
+
+<!--yarn(storybook)-->
+
+```sh
+yarn storybook
+```
 
-***
-_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
+<!--/yarn(storybook)-->

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import React from 'react';
+import { Box } from '../Box';
+declare type AccordionProps = ComponentProps<typeof Box> & {
+    animated?: boolean;
+    children: ReactNode;
+};
+export declare function Accordion(props: AccordionProps): ReactElement<AccordionProps>;
+export declare namespace Accordion {
+    var Item: ({ children, className, defaultExpanded, disabled, expanded: propExpanded, tabIndex, title, noncollapsible, onToggle, onToggleEnabled, ...props }: {
+        children?: ReactNode;
+        className?: string | undefined;
+        defaultExpanded?: boolean | undefined;
+        disabled?: boolean | undefined;
+        expanded?: boolean | undefined;
+        tabIndex?: number | undefined;
+        title: ReactNode;
+        noncollapsible?: boolean | undefined;
+        onToggle?: ((e: React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent>) => void) | undefined;
+        onToggleEnabled?: ((e: React.FormEvent<Element>) => void) | undefined;
+    }) => JSX.Element;
+}
+export {};
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/components/Accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAG7B,aAAK,cAAc,GAAG,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAAC,cAAc,CAAC,CAE7E;yBAFe,SAAS"}

package/dist/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,16 @@
+import type { FormEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react';
+declare type AccordionItemProps = {
+    children?: ReactNode;
+    className?: string;
+    defaultExpanded?: boolean;
+    disabled?: boolean;
+    expanded?: boolean;
+    tabIndex?: number;
+    title: ReactNode;
+    noncollapsible?: boolean;
+    onToggle?: (e: MouseEvent | KeyboardEvent) => void;
+    onToggleEnabled?: (e: FormEvent) => void;
+};
+export declare const AccordionItem: ({ children, className, defaultExpanded, disabled, expanded: propExpanded, tabIndex, title, noncollapsible, onToggle, onToggleEnabled, ...props }: AccordionItemProps) => JSX.Element;
+export {};
+//# sourceMappingURL=AccordionItem.d.ts.map

package/dist/components/Accordion/AccordionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAO7E,aAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACnD,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,aAAa,qJAYvB,kBAAkB,gBAoGpB,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './Accordion';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/AnimatedVisibility/AnimatedVisibility.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export declare type VisibilityType = 'hidden' | 'visible' | 'hiding' | 'unhiding' | undefined;
+declare type AnimatedVisibilityProps = {
+    children: ReactNode;
+    visibility?: VisibilityType;
+};
+declare const AnimatedVisibility: (props: AnimatedVisibilityProps) => JSX.Element | null;
+export default AnimatedVisibility;
+//# sourceMappingURL=AnimatedVisibility.d.ts.map

package/dist/components/AnimatedVisibility/AnimatedVisibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedVisibility.d.ts","sourceRoot":"","sources":["../../../src/components/AnimatedVisibility/AnimatedVisibility.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,oBAAY,cAAc,GACtB,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,UAAU,GACV,SAAS,CAAC;AAEd,aAAK,uBAAuB,GAAG;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B,CAAC;AASF,QAAA,MAAM,kBAAkB,UAAW,uBAAuB,uBAkGzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { VisibilityType } from './AnimatedVisibility';
+declare const _default: ((props: {
+    children: import("react").ReactNode;
+    visibility?: VisibilityType;
+}) => JSX.Element | null) & {
+    HIDDEN: VisibilityType;
+    VISIBLE: VisibilityType;
+    HIDING: VisibilityType;
+    UNHIDING: VisibilityType;
+};
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/AnimatedVisibility/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AnimatedVisibility/index.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;;;;;;;;;;AAG3D,wBAKG"}

package/dist/components/AutoComplete/AutoComplete.d.ts

@@ -0,0 +1,22 @@
+import type { ElementType, FC } from 'react';
+
+type AutoCompleteProps = {
+  value: unknown[];
+  filter: string;
+  setFilter?: (filter: string) => void;
+  options?: { label: string; value: unknown }[];
+  renderItem?: ElementType;
+  renderSelected?: ElementType;
+  onChange: (value: unknown, action: 'remove' | undefined) => void;
+  getLabel?: (option: { label: string; value: unknown }) => string;
+  getValue?: (option: { label: string; value: unknown }) => unknown;
+  renderEmpty?: ElementType;
+  placeholder?: string;
+  error?: boolean;
+  disabled?: boolean;
+};
+
+/**
+ * @deprecated in favor of Select and MultiSelect
+ */
+export const AutoComplete: FC<AutoCompleteProps>;

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

@@ -0,0 +1,2 @@
+export * from './AutoComplete';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/AutoComplete/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AutoComplete/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,14 @@
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+export declare type AvatarProps = {
+    size?: 'x16' | 'x18' | 'x20' | 'x24' | 'x28' | 'x32' | 'x36' | 'x40' | 'x48' | 'x124' | 'x200' | 'x332';
+    rounded?: boolean;
+    objectFit?: boolean;
+    url: string;
+} & HTMLAttributes<HTMLElement>;
+export declare const Avatar: {
+    ({ title, size, rounded, objectFit, url, ...props }: AvatarProps): JSX.Element;
+    Stack: ({ children, ...props }: AvatarStackProps) => JSX.Element;
+};
+declare type AvatarStackProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export {};
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM/D,oBAAY,WAAW,GAAG;IACxB,IAAI,CAAC,EACD,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,GACN,MAAM,GACN,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;CACb,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;AAEhC,eAAO,MAAM,MAAM;yDAOhB,WAAW;oCA4B+B,gBAAgB;CAP5D,CAAC;AAEF,aAAK,gBAAgB,GAAG,iBAAiB,CACvC,cAAc,CAAC,cAAc,CAAC,EAC9B,cAAc,CACf,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './Avatar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,11 @@
+import type { ElementType } from 'react';
+export declare type BadgeProps = {
+    is?: ElementType;
+    variant?: 'secondary' | 'primary' | 'danger' | 'warning' | 'ghost';
+    disabled?: boolean;
+    className?: string;
+    children?: any;
+    title?: any;
+};
+export declare function Badge({ is: Tag, variant, className, disabled, ...props }: BadgeProps): JSX.Element;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAKzC,oBAAY,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,OAAO,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,wBAAgB,KAAK,CAAC,EACpB,EAAE,EAAE,GAAY,EAChB,OAAqB,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,eAYZ"}

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

@@ -0,0 +1,2 @@
+export * from './Badge';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode, AllHTMLAttributes } from 'react';
+declare type VariantType = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+declare type BannerProps = {
+    inline?: boolean;
+    actionable?: boolean;
+    closeable?: boolean;
+    icon?: ReactNode;
+    title?: string;
+    variant?: VariantType;
+    onAction?: () => void;
+    onClose?: () => void;
+} & AllHTMLAttributes<HTMLElement>;
+declare const Banner: ({ inline, children, className, actionable, closeable, icon, title, variant, onAction, onClose, ...props }: BannerProps) => JSX.Element;
+export default Banner;
+//# sourceMappingURL=Banner.d.ts.map

package/dist/components/Banner/Banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAS1D,aAAK,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAUzE,aAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAEnC,QAAA,MAAM,MAAM,8GAYT,WAAW,gBAsEb,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -0,0 +1,2 @@
+export { default } from './Banner';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const BoxTransforms: import("react").Context<((props: any) => any) | null>;
+export declare const useBoxTransform: () => ((props: any) => any) | null;
+export declare const useComposedBoxTransform: (fn: (props: any) => any) => (props: any) => any;
+//# sourceMappingURL=BoxTransforms.d.ts.map

package/dist/components/Box/BoxTransforms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxTransforms.d.ts","sourceRoot":"","sources":["../../../src/components/Box/BoxTransforms.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,aAAa,mCAAiC,GAAG,KAAK,GAAG,SAAQ,CAAC;AAE/E,eAAO,MAAM,eAAe,iBAF+B,GAAG,KAAK,GAAG,QAER,CAAC;AAE/D,eAAO,MAAM,uBAAuB,eAAgB,GAAG,KAAK,GAAG,aAAX,GAAG,KAAK,GAc3D,CAAC"}

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

@@ -0,0 +1,188 @@
+import type { cssFn } from '@rocket.chat/css-in-js';
+import type {
+  AllHTMLAttributes,
+  ComponentProps,
+  CSSProperties,
+  ElementType,
+  ReactElement,
+  RefAttributes,
+  SVGAttributes,
+} from 'react';
+
+type Size = '1' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '32' | '40';
+
+type FontScale =
+  | 'hero'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'p1'
+  | 'p1m'
+  | 'p1b'
+  | 'p2'
+  | 'p2m'
+  | 'p2b'
+  | 'c1'
+  | 'c2'
+  | 'micro';
+
+type Falsy = false | 0 | '' | null | undefined;
+
+type BoxStylingProps = {
+  border?: CSSProperties['border'];
+  borderBlock?: CSSProperties['borderBlock'];
+  borderBlockStart?: CSSProperties['borderBlockStart'];
+  borderBlockEnd?: CSSProperties['borderBlockEnd'];
+  borderInline?: CSSProperties['borderInline'];
+  borderInlineStart?: CSSProperties['borderInlineStart'];
+  borderInlineEnd?: CSSProperties['borderInlineEnd'];
+  borderWidth?: CSSProperties['borderWidth'];
+  borderBlockWidth?: CSSProperties['borderBlockWidth'];
+  borderBlockStartWidth?: CSSProperties['borderBlockStartWidth'];
+  borderBlockEndWidth?: CSSProperties['borderBlockEndWidth'];
+  borderInlineWidth?: CSSProperties['borderInlineWidth'];
+  borderInlineStartWidth?: CSSProperties['borderInlineStartWidth'];
+  borderInlineEndWidth?: CSSProperties['borderInlineEndWidth'];
+  borderStyle?: CSSProperties['borderStyle'];
+  borderBlockStyle?: CSSProperties['borderBlockStyle'];
+  borderBlockStartStyle?: CSSProperties['borderBlockStartStyle'];
+  borderBlockEndStyle?: CSSProperties['borderBlockEndStyle'];
+  borderInlineStyle?: CSSProperties['borderInlineStyle'];
+  borderInlineStartStyle?: CSSProperties['borderInlineStartStyle'];
+  borderInlineEndStyle?: CSSProperties['borderInlineEndStyle'];
+  borderColor?: CSSProperties['borderColor'];
+  borderBlockColor?: CSSProperties['borderBlockColor'];
+  borderBlockStartColor?: CSSProperties['borderBlockStartColor'];
+  borderBlockEndColor?: CSSProperties['borderBlockEndColor'];
+  borderInlineColor?: CSSProperties['borderInlineColor'];
+  borderInlineStartColor?: CSSProperties['borderInlineStartColor'];
+  borderInlineEndColor?: CSSProperties['borderInlineEndColor'];
+  borderRadius?: CSSProperties['borderRadius'];
+  borderStartStartRadius?: CSSProperties['borderStartStartRadius'];
+  borderStartEndRadius?: CSSProperties['borderStartEndRadius'];
+  borderEndStartRadius?: CSSProperties['borderEndStartRadius'];
+  borderEndEndRadius?: CSSProperties['borderEndEndRadius'];
+
+  color?: CSSProperties['color'];
+  backgroundColor?: CSSProperties['backgroundColor'];
+  bg?: CSSProperties['backgroundColor'];
+  opacity?: CSSProperties['opacity'];
+
+  alignItems?: CSSProperties['alignItems'];
+  alignContent?: CSSProperties['alignContent'];
+  justifyItems?: CSSProperties['justifyItems'];
+  justifyContent?: CSSProperties['justifyContent'];
+  flexWrap?: CSSProperties['flexWrap'];
+  flexDirection?: CSSProperties['flexDirection'];
+  flexGrow?: CSSProperties['flexGrow'];
+  flexShrink?: CSSProperties['flexShrink'];
+  flexBasis?: CSSProperties['flexBasis'];
+  justifySelf?: CSSProperties['justifySelf'];
+  alignSelf?: CSSProperties['alignSelf'];
+  order?: CSSProperties['order'];
+
+  w?: CSSProperties['width'];
+  width?: CSSProperties['width'];
+  minWidth?: CSSProperties['minWidth'];
+  maxWidth?: CSSProperties['maxWidth'];
+  h?: CSSProperties['height'];
+  height?: CSSProperties['height'];
+  minHeight?: CSSProperties['minHeight'];
+  maxHeight?: CSSProperties['maxHeight'];
+  display?: CSSProperties['display'];
+  verticalAlign?: CSSProperties['verticalAlign'];
+  overflow?: CSSProperties['overflow'];
+  overflowX?: CSSProperties['overflowX'];
+  overflowY?: CSSProperties['overflowY'];
+
+  position?: CSSProperties['position'];
+  zIndex?: CSSProperties['zIndex'];
+  inset?: CSSProperties['inset'];
+  insetBlock?: CSSProperties['insetBlock'];
+  insetBlockStart?: CSSProperties['insetBlockStart'];
+  insetBlockEnd?: CSSProperties['insetBlockEnd'];
+  insetInline?: CSSProperties['insetInline'];
+  insetInlineStart?: CSSProperties['insetInlineStart'];
+  insetInlineEnd?: CSSProperties['insetInlineEnd'];
+
+  m?: CSSProperties['margin'];
+  margin?: CSSProperties['margin'];
+  mb?: CSSProperties['marginBlock'];
+  marginBlock?: CSSProperties['marginBlock'];
+  mbs?: CSSProperties['marginBlockStart'];
+  marginBlockStart?: CSSProperties['marginBlockStart'];
+  mbe?: CSSProperties['marginBlockEnd'];
+  marginBlockEnd?: CSSProperties['marginBlockEnd'];
+  mi?: CSSProperties['marginInline'];
+  marginInline?: CSSProperties['marginInline'];
+  mis?: CSSProperties['marginInlineStart'];
+  marginInlineStart?: CSSProperties['marginInlineStart'];
+  mie?: CSSProperties['marginInlineEnd'];
+  marginInlineEnd?: CSSProperties['marginInlineEnd'];
+  p?: CSSProperties['padding'];
+  padding?: CSSProperties['padding'];
+  pb?: CSSProperties['paddingBlock'];
+  paddingBlock?: CSSProperties['paddingBlock'];
+  pbs?: CSSProperties['paddingBlockStart'];
+  paddingBlockStart?: CSSProperties['paddingBlockStart'];
+  pbe?: CSSProperties['paddingBlockEnd'];
+  paddingBlockEnd?: CSSProperties['paddingBlockEnd'];
+  pi?: CSSProperties['paddingInline'];
+  paddingInline?: CSSProperties['paddingInline'];
+  pis?: CSSProperties['paddingInlineStart'];
+  paddingInlineStart?: CSSProperties['paddingInlineStart'];
+  pie?: CSSProperties['paddingInlineEnd'];
+  paddingInlineEnd?: CSSProperties['paddingInlineEnd'];
+
+  fontFamily?: CSSProperties['fontFamily'] | FontScale;
+  fontSize?: CSSProperties['fontSize'] | FontScale;
+  fontStyle?: CSSProperties['fontStyle'];
+  fontWeight?: CSSProperties['fontWeight'] | FontScale;
+  letterSpacing?: CSSProperties['letterSpacing'] | FontScale;
+  lineHeight?: CSSProperties['lineHeight'] | FontScale;
+  textAlign?: CSSProperties['textAlign'];
+  textTransform?: CSSProperties['textTransform'];
+  textDecorationLine?: CSSProperties['textDecorationLine'];
+
+  animated?: boolean;
+  elevation?: '0' | '1' | '2';
+  invisible?: boolean;
+  withRichContent?: boolean | string;
+  withTruncatedText?: boolean;
+  size?: `x${Size}` | `neg-x${Size}` | CSSProperties['blockSize'];
+  minSize?: CSSProperties['blockSize'];
+  maxSize?: CSSProperties['blockSize'];
+  fontScale?: FontScale;
+
+  className?: string | cssFn | (string | cssFn | Falsy)[];
+};
+
+export type BoxProps<TElementType extends ElementType> = {
+  is?: TElementType;
+  htmlSize?: 'size' extends keyof ComponentProps<TElementType>
+    ? ComponentProps<TElementType>['size']
+    : never;
+} & BoxStylingProps &
+  Omit<ComponentProps<TElementType>, 'is' | 'className' | 'size'>;
+
+type UnsafeBoxProps = {
+  is?: ElementType;
+  htmlSize?: AllHTMLAttributes<HTMLElement>['size'];
+} & BoxStylingProps &
+  Omit<AllHTMLAttributes<HTMLElement>, 'ref' | 'is' | 'className' | 'size'> &
+  Omit<SVGAttributes<SVGElement>, keyof AllHTMLAttributes<HTMLElement>> &
+  RefAttributes<any>;
+
+export const Box: {
+  // `Box` unfortunately cannot be a generic component because of the abuse of `ComponentProps<typeof Box>`
+  // <TElementType extends ElementType = 'div'>(
+  //   props: BoxProps<TElementType>
+  // ): ReactElement | null;
+  (props: UnsafeBoxProps): ReactElement | null;
+  defaultProps?: undefined;
+  propTypes?: undefined;
+  displayName?: string | undefined;
+  readonly $$typeof: symbol;
+};

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

@@ -0,0 +1,30 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+import { Icon } from '../Icon';
+declare type ButtonSize = {
+    mini?: boolean;
+    tiny?: boolean;
+    small?: boolean;
+};
+export declare const ActionButton: React.ForwardRefExoticComponent<Pick<{
+    is?: React.ElementType<any> | undefined;
+    htmlSize?: number | undefined;
+} & import("../Box").BoxStylingProps & Omit<React.AllHTMLAttributes<HTMLElement>, "ref" | "is" | "className" | "size"> & Omit<React.SVGAttributes<SVGElement>, keyof React.AllHTMLAttributes<HTMLElement>> & React.RefAttributes<any> & {
+    info?: boolean | undefined;
+    success?: boolean | undefined;
+    warning?: boolean | undefined;
+    danger?: boolean | undefined;
+    primary?: boolean | undefined;
+    ghost?: boolean | undefined;
+    nude?: boolean | undefined;
+    ghostish?: boolean | undefined;
+    small?: boolean | undefined;
+    mini?: boolean | undefined;
+    tiny?: boolean | undefined;
+    square?: boolean | undefined;
+    external?: boolean | undefined;
+} & ButtonSize & {
+    icon: ComponentProps<typeof Icon>['name'];
+}, "string" | "y" | "r" | "primary" | "info" | "success" | "warning" | "danger" | "default" | "disabled" | "type" | "is" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "defer" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "useMap" | "value" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "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" | "children" | "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" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPath" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filter" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontSizeAdjust" | "fontStretch" | "fontVariant" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "ideographic" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "mask" | "maskContentUnits" | "maskUnits" | "mathematical" | "mode" | "numOctaves" | "offset" | "operator" | "orient" | "orientation" | "origin" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "path" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan" | "htmlSize" | keyof import("../Box").BoxStylingProps | "key" | "ghost" | "nude" | "ghostish" | "external" | "square" | "icon" | keyof ButtonSize> & React.RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=ActionButton.d.ts.map

package/dist/components/Button/ActionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAO,MAAM,OAAO,CAAC;AACjD,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,aAAK,UAAU,GAAG;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAgBF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;UAbf,eAAe,WAAW,CAAC,CAAC,MAAM,CAAC;opSAoB5C,CAAC"}