@rocket.chat/fuselage 0.30.1 → 0.31.3

package/README.md

@@ -10,7 +10,7 @@
 
 ---
 
-![npm@latest](https://img.shields.io/npm/v/@rocket.chat/fuselage/latest?style=flat-square) ![npm@next](https://img.shields.io/npm/v/@rocket.chat/fuselage/next?style=flat-square) ![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)
+[![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)
 
@@ -78,13 +78,13 @@ yarn lint
 
 Some linter warnings and errors can be automatically fixed:
 
-<!--yarn(lint-fix)-->
+<!--yarn(lint-and-fix)-->
 
 ```sh
-yarn lint-fix
+yarn lint-and-fix
 ```
 
-<!--/yarn(lint-fix)-->
+<!--/yarn(lint-and-fix)-->
 
 ### Running tests
 
@@ -110,17 +110,3 @@ yarn storybook
 ```
 
 <!--/yarn(storybook)-->
-
-### Visually testing stories
-
-We perform visual regression testing in our component stories using [Loki](https://loki.js.org/).
-Everytime you add, modify, or remove components, you should update the set of reference images used to match
-how the components render in a real browser by running the following:
-
-<!--yarn(update-storybook)-->
-
-```sh
-yarn update-storybook
-```
-
-<!--/yarn(update-storybook)-->

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

@@ -0,0 +1,23 @@
+import React, { ComponentProps, ReactElement, ReactNode } 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?: React.ReactNode;
+        className?: string | undefined;
+        defaultExpanded?: boolean | undefined;
+        disabled?: boolean | undefined;
+        expanded?: boolean | undefined;
+        tabIndex?: number | undefined;
+        title: React.ReactNode;
+        noncollapsible?: boolean | undefined;
+        onToggle?: ((e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => 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,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvE,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 { 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,OAAc,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM/E,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

@@ -1,13 +1,2 @@
-import { ComponentProps, ForwardRefExoticComponent } from 'react';
-
-import { Box } from '../Box';
-
-type AccordionProps = ComponentProps<typeof Box>;
-type AccordionItemProps = Omit<ComponentProps<typeof Box>, 'title'> & {
-  defaultExpanded?: boolean;
-  title?: string;
-};
-
-export const Accordion: ForwardRefExoticComponent<AccordionProps> & {
-  Item: ForwardRefExoticComponent<AccordionItemProps>;
-};
+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/AutoComplete/AutoComplete.d.ts

@@ -0,0 +1,18 @@
+import { 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;
+};
+export const AutoComplete: FC<AutoCompleteProps>;

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

@@ -1,18 +1,2 @@
-import { 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;
-};
-export const AutoComplete: FC<AutoCompleteProps>;
+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 { 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,OAAc,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAKjE,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

@@ -1,28 +1,2 @@
-import { ComponentProps, Context, ForwardRefExoticComponent } from 'react';
-
-import { Box } from '../Box';
-
-type AvatarProps = Omit<ComponentProps<typeof Box>, 'title' | 'size'> & {
-  title?: string;
-  size?:
-    | 'x16'
-    | 'x18'
-    | 'x20'
-    | 'x24'
-    | 'x28'
-    | 'x32'
-    | 'x36'
-    | 'x40'
-    | 'x48'
-    | 'x124'
-    | 'x200'
-    | 'x332';
-  rounded?: boolean;
-  objectFit?: boolean;
-  url: string;
-};
-export const Avatar: ForwardRefExoticComponent<AvatarProps> & {
-  Context: Context<{
-    baseUrl: string;
-  }>;
-};
+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 { 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,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAI3C,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

@@ -1,11 +1,2 @@
-import { ElementType, ForwardRefExoticComponent } from 'react';
-
-type BadgeProps = {
-  is?: ElementType;
-  variant?: 'primary' | 'danger' | 'warning';
-  disabled?: boolean;
-  className?: string;
-  children?: any;
-  title?: any;
-};
-export const Badge: ForwardRefExoticComponent<BadgeProps>;
+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 { 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,OAAc,EAIZ,SAAS,EACT,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAQf,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

@@ -1,15 +1,2 @@
-import { AllHTMLAttributes, FC, ReactNode } from 'react';
-
-type BannerProps = {
-  inline?: boolean;
-  actionable?: boolean;
-  closeable?: boolean;
-  icon?: ReactNode;
-  title?: string;
-  variant?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
-  onAction?: () => void;
-  onClose?: () => void;
-} & AllHTMLAttributes<HTMLElement>;
-const Banner: FC<BannerProps>;
-
-export = Banner;
+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/AnimatedVisibility/AnimatedVisibility.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedVisibility.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/AnimatedVisibility/AnimatedVisibility.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,SAAS,EAAoC,MAAM,OAAO,CAAC;AAM3E,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/Box/AnimatedVisibility/index.d.ts

@@ -1,2 +1,13 @@
-export { default } from './AnimatedVisibility';
+/// <reference types="react" />
+import { 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/Box/AnimatedVisibility/index.d.ts.map

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

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+declare type FlexContainerProps = {
+    children?: ReactNode;
+    inline?: boolean;
+    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    wrap?: 'no-wrap' | 'wrap' | 'wrap-reverse';
+    alignItems?: 'stretch' | 'start' | 'center' | 'end' | 'baseline';
+    alignContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around';
+    justifyContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around';
+};
+export declare function FlexContainer({ inline, children, direction, wrap, alignItems, alignContent, justifyContent, }: FlexContainerProps): JSX.Element;
+export {};
+//# sourceMappingURL=Flex.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/Flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAItD,aAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,QAAQ,GAAG,gBAAgB,CAAC;IAChE,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,cAAc,CAAC;IAC3C,UAAU,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC;IACjE,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,eAAe,GAAG,cAAc,CAAC;IAC7E,cAAc,CAAC,EACX,OAAO,GACP,QAAQ,GACR,KAAK,GACL,eAAe,GACf,cAAc,CAAC;CACpB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,MAAc,EACd,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,cAAc,GACf,EAAE,kBAAkB,eA+CpB"}

package/dist/components/Box/Flex/FlexItem.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+declare type FlexItemProps = {
+    children?: ReactNode;
+    order?: number;
+    grow?: number;
+    shrink?: number;
+    basis?: number | string | 'auto';
+    align?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
+};
+export declare function FlexItem({ children, order, grow, shrink, basis, align, }: FlexItemProps): JSX.Element;
+export {};
+//# sourceMappingURL=FlexItem.d.ts.map

package/dist/components/Box/Flex/FlexItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/Flex/FlexItem.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAItD,aAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;CACzD,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,MAAM,EACN,KAAK,EACL,KAAK,GACN,EAAE,aAAa,eAqCf"}

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

@@ -1,32 +1,10 @@
-import { ReactElement, ReactNode } from 'react';
-
-type FlexContainerProps = {
-  children?: ReactNode;
-  inline?: boolean;
-  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
-  wrap?: 'no-wrap' | 'wrap' | 'wrap-reverse';
-  alignItems?: 'stretch' | 'start' | 'center' | 'end' | 'baseline';
-  alignContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around';
-  justifyContent?:
-    | 'start'
-    | 'center'
-    | 'end'
-    | 'space-between'
-    | 'space-around';
+import { FlexContainer as Flex } from './Flex';
+import { FlexItem } from './FlexItem';
+export * from './Flex';
+export * from './FlexItem';
+declare const _default: typeof Flex & {
+    Container: typeof Flex;
+    Item: typeof FlexItem;
 };
-
-type FlexItemProps = {
-  children?: ReactNode;
-  order?: number;
-  grow?: number;
-  shrink?: number;
-  basis?: number | string | 'auto';
-  align?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
-};
-
-const Flex: {
-  Container: (props: FlexContainerProps) => ReactElement;
-  Item: (props: FlexItemProps) => ReactElement;
-};
-
-export = Flex;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/Flex/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;;;;;AAE3B,wBAGG"}

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

@@ -1,14 +1,12 @@
-import { Placements, PositionOptions } from '@rocket.chat/fuselage-hooks';
-import { ComponentProps, FC, RefObject } from 'react';
-
+import { Placements } from '@rocket.chat/fuselage-hooks';
+import { RefObject, ComponentProps, ReactPortal, ReactElement } from 'react';
 import { Box } from '..';
-
-type PositionProps = {
-  anchor?: RefObject<Element>;
-  placement?: Placements;
-  margin?: PositionOptions['margin'];
-} & ComponentProps<typeof Box>;
-
-declare const Position: FC<PositionProps>;
-
-export = Position;
+declare type PositionProps = {
+    anchor: RefObject<Element>;
+    children: ReactElement;
+    margin?: number;
+    placement?: Placements;
+} & Omit<ComponentProps<typeof Box>, 'children' | 'margin'>;
+declare const Position: ({ anchor, children, placement, margin, className, ...props }: PositionProps) => ReactPortal;
+export default Position;
+//# sourceMappingURL=Position.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Position.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/Position/Position.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAe,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAKL,SAAS,EACT,cAAc,EACd,WAAW,EACX,YAAY,EACb,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,GAAG,EAAE,MAAM,IAAI,CAAC;AAEzB,aAAK,aAAa,GAAG;IACnB,MAAM,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,QAAQ,EAAE,YAAY,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAC;AAE5D,QAAA,MAAM,QAAQ,iEAOX,aAAa,KAAG,WAoClB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/Box/Position/PositionAnimated.d.ts

@@ -1,11 +1,8 @@
-import { ComponentProps, FC } from 'react';
-
+import { ComponentProps } from 'react';
 import Position from '.';
-
-type PositionAnimatedProps = {
-  visible?: 'hidden' | 'visible' | 'hiding' | 'unhiding';
+declare type PositionAnimatedProps = {
+    visible?: 'hidden' | 'visible' | 'hiding' | 'unhiding';
 } & ComponentProps<typeof Position>;
-
-declare const PositionAnimated: FC<PositionAnimatedProps>;
-
-export = PositionAnimated;
+declare const PositionAnimated: ({ width, visible, children, ...props }: PositionAnimatedProps) => JSX.Element;
+export default PositionAnimated;
+//# sourceMappingURL=PositionAnimated.d.ts.map

package/dist/components/Box/Position/PositionAnimated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PositionAnimated.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/Position/PositionAnimated.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,QAAQ,MAAM,GAAG,CAAC;AAGzB,aAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;CACxD,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEpC,QAAA,MAAM,gBAAgB,2CAKnB,qBAAqB,gBAIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+declare type ScrollableProps = PropsWithChildren<{
+    horizontal?: boolean;
+    vertical?: boolean;
+    smooth?: boolean;
+    onScrollContent?: (touching: {
+        top: boolean;
+    }) => void;
+}>;
+export declare const Scrollable: ({ children, horizontal, vertical, smooth, onScrollContent, }: ScrollableProps) => JSX.Element;
+export {};
+//# sourceMappingURL=Scrollable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollable.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/Scrollable/Scrollable.tsx"],"names":[],"mappings":"AAEA,OAAc,EAGZ,iBAAiB,EAGlB,MAAM,OAAO,CAAC;AAMf,aAAK,eAAe,GAAG,iBAAiB,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE;QAAE,GAAG,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CACxD,CAAC,CAAC;AA8BH,eAAO,MAAM,UAAU,iEAMpB,eAAe,gBAuFjB,CAAC"}

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

@@ -1,9 +1,3 @@
-import { ForwardRefExoticComponent, PropsWithChildren } from 'react';
-
-type ScrollableProps = PropsWithChildren<{
-  horizontal?: boolean;
-  vertical?: boolean;
-  onScrollContent?: (touching: { top: boolean }) => void;
-}>;
-const Scrollable: ForwardRefExoticComponent<ScrollableProps>;
+import { Scrollable } from './Scrollable';
 export default Scrollable;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1,23 +1,38 @@
 import type { css } from '@rocket.chat/css-in-js';
-import {
+import type {
   AllHTMLAttributes,
+  ComponentProps,
   CSSProperties,
   ElementType,
-  ForwardRefExoticComponent,
-  PropsWithChildren,
+  ReactElement,
   RefAttributes,
   SVGAttributes,
 } from 'react';
 
-type FontScale = 'h1' | 's1' | 's2' | 'p1' | 'p2' | 'c1' | 'c2' | 'micro';
+type Size = '1' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '32' | '40';
 
-type BoxProps = PropsWithChildren<{
-  is?: ElementType;
-  className?:
-    | string
-    | ReturnType<typeof css>
-    | (string | ReturnType<typeof css>)[];
-  style?: CSSProperties;
+type FontScale =
+  | 'hero'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'p1'
+  | 'p1m'
+  | 'p1b'
+  | 'p2'
+  | 'p2m'
+  | 'p2b'
+  | 'c1'
+  | 'c2'
+  | 'micro';
+
+type Falsy = false | 0 | '' | null | undefined;
+
+type EvaluableCss = ReturnType<typeof css>;
+
+type BoxStylingProps = {
   border?: CSSProperties['border'];
   borderBlock?: CSSProperties['borderBlock'];
   borderBlockStart?: CSSProperties['borderBlockStart'];
@@ -133,22 +148,59 @@ type BoxProps = PropsWithChildren<{
   textTransform?: CSSProperties['textTransform'];
   textDecorationLine?: CSSProperties['textDecorationLine'];
 
+  animated?: boolean;
   elevation?: '0' | '1' | '2';
   invisible?: boolean;
   withRichContent?: boolean | string;
   withTruncatedText?: boolean;
-  size?: CSSProperties['blockSize'];
+  size?: `x${Size}` | `neg-x${Size}` | CSSProperties['blockSize'];
   minSize?: CSSProperties['blockSize'];
   maxSize?: CSSProperties['blockSize'];
   fontScale?: FontScale;
-}> &
-  Omit<AllHTMLAttributes<HTMLOrSVGElement>, 'className'> &
-  Omit<SVGAttributes<SVGElement>, keyof AllHTMLAttributes<HTMLOrSVGElement>> &
-  RefAttributes<unknown>;
 
-export const Box: ForwardRefExoticComponent<BoxProps>;
+  className?: string | EvaluableCss | (string | EvaluableCss | 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;
+};
 
 export { default as AnimatedVisibility } from './AnimatedVisibility';
 export { default as Flex } from './Flex';
 export { default as Position, PositionAnimated } from './Position';
 export { default as Scrollable } from './Scrollable';
+
+export const useArrayLikeClassNameProp: <
+  T extends {
+    className?:
+      | string
+      | ReturnType<typeof css>
+      | (string | ReturnType<typeof css>)[];
+  }
+>(
+  props: T
+) => T & { className: string };