@qoretechnologies/reqore 0.30.6 → 0.30.7

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Qore Technologies, s.r.o.
+Copyright (c) 2020 Qore Technologies, s.r.o.
 
 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,45 +1,3 @@
-<div align="center">
-  <br><br><br>
-  <img src="./public/logo.png" alt="Unstated Logo" width="500">
-  <br><br><br>
-</div>
+# reqore
 
-# @qoretechnologies/reqore
-
-Reqore is a UI library based on React which can be used with any React project to provide customized UI experience.
-
-- Reqore is a comprehensive library of UI components that features our implementation of Qore Technologies design system
-
-## Installation
-
-Before installing, [download and install Node.js](https://nodejs.org/en/download/).
- Latest stable Node.js is required.
-
-Install the library using
-
-```console
-$ yarn add @qoretechnologies/reqore
-```
-
-## Features
-
-## Community
-
-- [GitHub Organization](https://github.com/qoretechnologies) for Official open-source projects
-- [Discord](https://discord.gg/T7vgS6nh) for support, discussion, news and latest release updates
-
-## Examples
-
-## Contributing
-
-The Qorus-Toolkit project welcomes all constructive contributions. Contributions can be of many forms including bug fixes, enhancements, fixes to documentation, additional tests and more!
-
-See the [Contributing Guide](CONTRIBUTING.MD) for more technical details on contributing.
-
-### Security Issues
-
-If you discover a security vulnerability in Qorus-Toolkit, please see [Security Policies and Procedures](SECURITY.md).
-
-## License
-
-[MIT](LICENSE)
+ReQore is a UI library for Qorus connected apps.

package/__tests__/collection.test.tsx

@@ -13,7 +13,7 @@ test('Renders basic <Collection /> properly', () => {
   );
 
   expect(document.querySelectorAll('.reqore-collection').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-collection-item').length).toBe(8);
+  expect(document.querySelectorAll('.reqore-collection-item').length).toBe(9);
 });
 
 test('<Collection /> items can be filtered', () => {

package/__tests__/{control_group.text.tsx → control_group.test.tsx}

@@ -9,16 +9,18 @@ import {
   ReqoreUIProvider,
 } from '../src';
 
-test('Renders <Input /> properly', () => {
+test('Renders <ControlGroup /> properly', () => {
   render(
     <ReqoreUIProvider>
       <ReqoreLayoutContent>
         <ReqoreContent>
-          <ReqoreControlGroup minimal>
+          <ReqoreControlGroup>
             <ReqoreInput minimal />
             <ReqoreButton>Hello</ReqoreButton>
             <ReqoreInput disabled />
             <ReqoreInput size='big' />
+            <ReqoreButton>Hello</ReqoreButton>
+            <ReqoreButton>Hello</ReqoreButton>
           </ReqoreControlGroup>
         </ReqoreContent>
       </ReqoreLayoutContent>

package/__tests__/modal.test.tsx

@@ -1,5 +1,5 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import {
   ReqoreButton,
   ReqoreContent,
@@ -7,6 +7,7 @@ import {
   ReqoreLayoutContent,
   ReqoreModal,
   ReqoreUIProvider,
+  useReqore,
 } from '../src';
 
 test('Renders basic <Modal /> properly', () => {
@@ -94,13 +95,52 @@ const ConfirmButton = ({ confirmFn, cancelFn }) => {
   );
 };
 
+const ConfirmButtonFromModal = ({ confirmFn, cancelFn }) => {
+  const { confirmAction } = useReqore();
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  return (
+    <>
+      <ReqoreButton
+        id='dialog'
+        onClick={() => {
+          setIsDialogOpen(true);
+        }}
+      >
+        Open Dialog
+      </ReqoreButton>
+      {isDialogOpen && (
+        <ReqoreModal
+          isOpen
+          id='confirm'
+          actions={[
+            {
+              label: 'Open Confirm',
+              id: 'open-confirm',
+              onClick: () => {
+                confirmAction({
+                  description: 'Do you really wanna do this?',
+                  onConfirm: () => confirmFn(),
+                  onCancel: () => cancelFn(),
+                });
+              },
+            },
+          ]}
+        >
+          Modal
+        </ReqoreModal>
+      )}
+    </>
+  );
+};
+
 test('Renders confirmation <Modal /> ', () => {
   const confirmFn = jest.fn();
   const cancelFn = jest.fn();
 
   act(() => {
     render(
-      <ReqoreUIProvider>
+      <ReqoreUIProvider options={{ animations: { dialogs: false } }}>
         <ReqoreLayoutContent>
           <ReqoreContent>
             <ConfirmButton confirmFn={confirmFn} cancelFn={cancelFn} />
@@ -130,3 +170,35 @@ test('Renders confirmation <Modal /> ', () => {
 
   expect(cancelFn).toHaveBeenCalledTimes(2);
 });
+
+test('Always renders confirmation <Modal /> properly above a normal modal', () => {
+  const confirmFn = jest.fn();
+  const cancelFn = jest.fn();
+
+  act(() => {
+    render(
+      <ReqoreUIProvider options={{ animations: { dialogs: false } }}>
+        <ReqoreLayoutContent>
+          <ReqoreContent>
+            <ConfirmButtonFromModal confirmFn={confirmFn} cancelFn={cancelFn} />
+          </ReqoreContent>
+        </ReqoreLayoutContent>
+      </ReqoreUIProvider>
+    );
+  });
+
+  fireEvent.click(document.getElementById('dialog')!);
+  expect(document.querySelectorAll('.reqore-modal').length).toBe(1);
+
+  fireEvent.click(screen.getAllByText('Open Confirm')[0]);
+  expect(document.querySelectorAll('.reqore-modal').length).toBe(2);
+  expect(document.querySelectorAll('.reqore-confirmation-modal').length).toBe(1);
+
+  // @ts-ignore
+  const zIndex = document.querySelectorAll('.reqore-modal')[0].style.zIndex;
+  // @ts-ignore
+  const zIndexConfirmation = document.querySelectorAll('.reqore-confirmation-modal')[0].style
+    .zIndex;
+
+  expect(parseInt(zIndexConfirmation)).toBeGreaterThan(parseInt(zIndex));
+});

package/__tests__/panel.test.tsx

@@ -100,33 +100,105 @@ test('Renders <Panel /> with actions', () => {
   const fn = jest.fn();
 
   render(
-    <div style={{ width: '1000px' }}>
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqorePanel
-            label='Test'
-            onClose={fn}
-            actions={[
-              { label: 'Test' },
-              { actions: [{ label: 'Deep', value: 'deep' }] },
-              { as: ReqoreInput },
-              { label: 'hidden', show: false },
-            ]}
-            bottomActions={[
-              { label: 'Test', position: 'left' },
-              { actions: [{ label: 'Deep', value: 'deep' }], position: 'right' },
-              { label: 'hidden', show: false },
-            ]}
-          >
-            {' '}
-            Panel{' '}
-          </ReqorePanel>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    </div>
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqorePanel
+          label='Test'
+          onClose={fn}
+          actions={[
+            { label: 'Test' },
+            { actions: [{ label: 'Deep', value: 'deep' }] },
+            { as: ReqoreInput },
+            { label: 'hidden', show: false },
+          ]}
+          bottomActions={[
+            { label: 'Test', position: 'left' },
+            { actions: [{ label: 'Deep', value: 'deep' }], position: 'right' },
+            { label: 'hidden', show: false },
+          ]}
+        >
+          {' '}
+          Panel{' '}
+        </ReqorePanel>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
   );
 
   expect(document.querySelectorAll('.reqore-button').length).toBe(5);
   expect(document.querySelectorAll('.reqore-dropdown-control').length).toBe(2);
   expect(document.querySelectorAll('.reqore-input').length).toBe(1);
 });
+
+test('Renders <Panel /> without actions group if all actins are not shown', () => {
+  const fn = jest.fn();
+
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqorePanel
+          label='Test'
+          actions={[
+            { label: 'Test', show: false },
+            { actions: [{ label: 'Deep', value: 'deep' }], show: false },
+            { as: ReqoreInput, show: false },
+            { label: 'hidden', show: false },
+          ]}
+        >
+          Panel
+        </ReqorePanel>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-control-group').length).toBe(0);
+  expect(document.querySelectorAll('.reqore-button').length).toBe(0);
+  expect(document.querySelectorAll('.reqore-dropdown-control').length).toBe(0);
+  expect(document.querySelectorAll('.reqore-input').length).toBe(0);
+});
+
+test('Renders <Panel /> without title & bottom actions if all actions are not shown, there is no icon, title & is not collapsible', () => {
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqorePanel
+          actions={[
+            { label: 'Test', show: false },
+            { actions: [{ label: 'Deep', value: 'deep' }], show: false },
+            { as: ReqoreInput, show: false },
+            { label: 'hidden', show: false },
+            {
+              group: [
+                { label: 'Test 2', show: true },
+                { label: 'Test 3', show: true },
+              ],
+              show: false,
+            },
+          ]}
+          bottomActions={[
+            { label: 'Test', show: false },
+            { actions: [{ label: 'Deep', value: 'deep' }], show: false },
+            { as: ReqoreInput, position: 'right', show: false },
+            { label: 'hidden', show: false },
+            {
+              position: 'right',
+              group: [
+                { label: 'Test 2', show: true },
+                { label: 'Test 3', show: true },
+              ],
+              show: false,
+            },
+          ]}
+        >
+          Panel
+        </ReqorePanel>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-control-group').length).toBe(0);
+  expect(document.querySelectorAll('.reqore-button').length).toBe(0);
+  expect(document.querySelectorAll('.reqore-dropdown-control').length).toBe(0);
+  expect(document.querySelectorAll('.reqore-input').length).toBe(0);
+  expect(document.querySelectorAll('.reqore-panel-title').length).toBe(0);
+  expect(document.querySelectorAll('.reqore-panel-bottom-actions').length).toBe(0);
+});

package/__tests__/popover.test.tsx

@@ -109,9 +109,9 @@ test('Runs callback function', async () => {
   fireEvent.mouseLeave(screen.getByText('Hover me'));
 });
 
-test('Shows the popover after a delay', async () => {
+test('Shows the popover after a local delay, ignoring global delay', async () => {
   render(
-    <ReqoreUIProvider>
+    <ReqoreUIProvider options={{ tooltips: { delay: 1000 } }}>
       <SimpleContent delay={500} />
     </ReqoreUIProvider>
   );
@@ -131,6 +131,28 @@ test('Shows the popover after a delay', async () => {
   expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
 });
 
+test('Shows the popover after a global delay', async () => {
+  render(
+    <ReqoreUIProvider options={{ tooltips: { delay: 1000 } }}>
+      <SimpleContent />
+    </ReqoreUIProvider>
+  );
+
+  fireEvent.mouseEnter(screen.getByText('Hover me'));
+
+  jest.advanceTimersByTime(500);
+
+  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
+
+  jest.advanceTimersByTime(500);
+
+  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
+
+  fireEvent.mouseLeave(screen.getByText('Hover me'));
+
+  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
+});
+
 test('Does not show the popover with delay if time not reached', async () => {
   render(
     <ReqoreUIProvider>

package/__tests__/tabs.test.tsx

@@ -35,6 +35,49 @@ test('Renders full <Tabs /> properly', () => {
 });
 
 test('Renders shortened <Tabs /> properly', () => {
+  const fn = jest.fn();
+  act(() => {
+    render(
+      <ReqoreUIProvider>
+        <ReqoreLayoutContent>
+          <ReqoreTabs
+            _testWidth={300}
+            onTabChange={fn}
+            tabs={[
+              { label: 'Tab 1', icon: 'Home3Line', id: 'tab1' },
+              { label: 'Tab 2', icon: 'Home3Line', id: 'tab2' },
+              { label: 'Tab 3', icon: 'Home3Line', id: 'tab3' },
+              { label: 'Tab 4', icon: 'Home3Line', id: 'tab4' },
+              { label: 'Tab 5', icon: 'Home3Line', id: 'tab5' },
+            ]}
+          >
+            <ReqoreTabsContent tabId='tab1'>Tab 1 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
+          </ReqoreTabs>
+        </ReqoreLayoutContent>
+      </ReqoreUIProvider>
+    );
+  });
+
+  expect(document.querySelectorAll('.reqore-tabs-list-item').length).toBe(2);
+  expect(document.querySelectorAll('.reqore-tabs-list-item-menu').length).toBe(1);
+
+  fireEvent.mouseEnter(document.querySelector('.reqore-tabs-list-item-menu')!);
+
+  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-menu').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(4);
+
+  fireEvent.click(document.querySelectorAll('.reqore-menu-item')[0]);
+
+  expect(fn).toBeCalledTimes(1);
+  expect(fn).toBeCalledWith('tab2');
+});
+
+test('Can select hidden <Tabs /> when shortened', () => {
   act(() => {
     render(
       <ReqoreUIProvider>
@@ -163,6 +206,38 @@ test('Does not change tab and run callback when disabled', () => {
   expect(document.querySelectorAll('.reqore-tabs-list-item-active').length).toBe(1);
 });
 
+test('Does not change tab when mounted and active tab is set', () => {
+  const cb = jest.fn();
+
+  act(() => {
+    render(
+      <ReqoreUIProvider>
+        <ReqoreLayoutContent>
+          <ReqoreTabs
+            tabs={[
+              { label: 'Tab 1', icon: 'Home3Line', id: 'tab1' },
+              { label: 'Tab 2', icon: 'Home3Line', id: 'tab2' },
+              { label: 'Tab 3', icon: 'Home3Line', id: 'tab3', disabled: true },
+              { label: 'Tab 4', icon: 'Home3Line', id: 'tab4' },
+              { label: 'Tab 5', icon: 'Home3Line', id: 'tab5' },
+            ]}
+            activeTab={'tab4'}
+            onTabChange={cb}
+          >
+            <ReqoreTabsContent tabId='tab1'>Tab 1 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
+          </ReqoreTabs>
+        </ReqoreLayoutContent>
+      </ReqoreUIProvider>
+    );
+  });
+
+  expect(cb).not.toHaveBeenCalled();
+});
+
 test('Changes tab programatically and runs callback', () => {
   const cb = jest.fn();
 

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

@@ -3,9 +3,9 @@ import { TSizes } from '../../constants/sizes';
 import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
 import { IReqoreDisabled, IReqoreIntent, IReqoreReadOnly, IWithReqoreEffect, IWithReqoreSize, TReqoreTooltipProp } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import { TReqoreEffectColor, TReqoreHexColor } from '../Effect';
+import { IReqoreEffect, TReqoreEffectColor, TReqoreHexColor } from '../Effect';
 import { IReqoreTagProps } from '../Tag';
-export type TReqoreBadge = string | number | IReqoreTagProps;
+export declare type TReqoreBadge = string | number | IReqoreTagProps;
 export interface IReqoreButtonProps extends React.HTMLAttributes<HTMLButtonElement>, IReqoreDisabled, IReqoreIntent, IReqoreReadOnly, IWithReqoreEffect {
     icon?: IReqoreIconName;
     size?: TSizes;
@@ -22,6 +22,11 @@ export interface IReqoreButtonProps extends React.HTMLAttributes<HTMLButtonEleme
     description?: string | number;
     maxWidth?: string;
     textAlign?: 'left' | 'center' | 'right';
+    iconColor?: TReqoreEffectColor;
+    leftIconColor?: TReqoreEffectColor;
+    rightIconColor?: TReqoreEffectColor;
+    labelEffect?: IReqoreEffect;
+    descriptionEffect?: IReqoreEffect;
 }
 export interface IReqoreButtonStyle extends Omit<IReqoreButtonProps, 'intent'> {
     theme: IReqoreTheme;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAEzE,OAAO,EAML,MAAM,EACP,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAezE,OAAO,EACL,eAAe,EACf,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAIL,kBAAkB,EAClB,eAAe,EAChB,MAAM,WAAW,CAAC;AAGnB,OAAkB,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAGpD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,eAAe,CAAC;AAE7D,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAC7C,eAAe,EACf,aAAa,EACb,eAAe,EACf,iBAAiB;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACzC;AAED,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC;IAC5E,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAUD,eAAO,MAAM,yBAAyB,KAIrC,CAAC;AAEF,eAAO,MAAM,mBAAmB,KAkB/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,KAgBjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,KAalC,CAAC;AAEF,eAAO,MAAM,YAAY,KAmIxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,KAgB/B,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,OAAO,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,WAAW,oCAAgB,uBAAuB,iBA0C7D,CAAC;AAEH,QAAA,MAAM,YAAY,yHAmHjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAEzE,OAAO,EAML,MAAM,EACP,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAezE,OAAO,EACL,eAAe,EACf,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EACL,aAAa,EAIb,kBAAkB,EAClB,eAAe,EAChB,MAAM,WAAW,CAAC;AAGnB,OAAkB,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAGpD,oBAAY,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,eAAe,CAAC;AAE7D,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAC7C,eAAe,EACf,aAAa,EACb,eAAe,EACf,iBAAiB;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,iBAAiB,CAAC,EAAE,aAAa,CAAC;CACnC;AAED,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC;IAC5E,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAUD,eAAO,MAAM,yBAAyB,KAOrC,CAAC;AAEF,eAAO,MAAM,mBAAmB,KAkB/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,KAgBjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,KAalC,CAAC;AAEF,eAAO,MAAM,YAAY,KA4IxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,KAgB/B,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,OAAO,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,WAAW,oCAAgB,uBAAuB,iBA0C7D,CAAC;AAEH,QAAA,MAAM,YAAY,yHA8IjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/Button/index.js

@@ -76,23 +76,29 @@ var getButtonMainColor = function (theme, color) {
     }
     return theme.main;
 };
-exports.StyledAnimatedTextWrapper = styled_components_1["default"].span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  position: relative;\n  text-align: left;\n"], ["\n  overflow: hidden;\n  position: relative;\n  text-align: left;\n"])));
-exports.StyledActiveContent = styled_components_1["default"].span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  transform: translateY(-150%);\n  opacity: 0;\n  transition: all 0.2s ease-out;\n  filter: blur(10px);\n\n  ", "\n"], ["\n  position: absolute;\n  transform: translateY(-150%);\n  opacity: 0;\n  transition: all 0.2s ease-out;\n  filter: blur(10px);\n\n  ", "\n"])), function (_a) {
+exports.StyledAnimatedTextWrapper = styled_components_1["default"].span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  position: relative;\n  text-align: ", ";\n  display: flex;\n  flex-flow: column;\n  align-items: ", ";\n"], ["\n  overflow: hidden;\n  position: relative;\n  text-align: ", ";\n  display: flex;\n  flex-flow: column;\n  align-items: ", ";\n"])), function (_a) {
+    var textAlign = _a.textAlign;
+    return textAlign;
+}, function (_a) {
+    var textAlign = _a.textAlign;
+    return (0, utils_1.alignToFlexAlign)(textAlign);
+});
+exports.StyledActiveContent = (0, styled_components_1["default"])(Effect_1.StyledTextEffect)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  transform: translateY(-150%);\n  opacity: 0;\n  transition: all 0.2s ease-out;\n  filter: blur(10px);\n\n  ", "\n"], ["\n  position: absolute;\n  transform: translateY(-150%);\n  opacity: 0;\n  transition: all 0.2s ease-out;\n  filter: blur(10px);\n\n  ", "\n"])), function (_a) {
     var wrap = _a.wrap;
     return !wrap
         ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          width: 100%;\n        "], ["\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          width: 100%;\n        "]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          word-break: break-word;\n        "], ["\n          word-break: break-word;\n        "])));
 });
-exports.StyledInActiveContent = styled_components_1["default"].span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  transform: translateY(0);\n  transition: all 0.2s ease-out;\n\n  ", "\n"], ["\n  position: absolute;\n  transform: translateY(0);\n  transition: all 0.2s ease-out;\n\n  ", "\n"])), function (_a) {
+exports.StyledInActiveContent = (0, styled_components_1["default"])(Effect_1.StyledTextEffect)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  transform: translateY(0);\n  transition: all 0.2s ease-out;\n\n  ", "\n"], ["\n  position: absolute;\n  transform: translateY(0);\n  transition: all 0.2s ease-out;\n\n  ", "\n"])), function (_a) {
     var wrap = _a.wrap;
     return !wrap
         ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          width: 100%;\n        "], ["\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          width: 100%;\n        "]))) : (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          word-break: break-word;\n        "], ["\n          word-break: break-word;\n        "])));
 });
-exports.StyledInvisibleContent = styled_components_1["default"].span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  visibility: hidden;\n  position: relative;\n  overflow: hidden;\n\n  ", "\n"], ["\n  visibility: hidden;\n  position: relative;\n  overflow: hidden;\n\n  ", "\n"])), function (_a) {
+exports.StyledInvisibleContent = (0, styled_components_1["default"])(Effect_1.StyledTextEffect)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  visibility: hidden;\n  position: relative;\n  overflow: hidden;\n\n  ", "\n"], ["\n  visibility: hidden;\n  position: relative;\n  overflow: hidden;\n\n  ", "\n"])), function (_a) {
     var wrap = _a.wrap;
     return !wrap
         ? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          white-space: nowrap;\n        "], ["\n          white-space: nowrap;\n        "]))) : (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n          word-break: break-word;\n        "], ["\n          word-break: break-word;\n        "])));
 });
-exports.StyledButton = (0, styled_components_1["default"])(Effect_1.StyledEffect)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  justify-content: center;\n  margin: 0;\n  font-weight: 600;\n  position: relative;\n  overflow: hidden;\n  vertical-align: middle;\n  border: ", ";\n  padding: 0 ", "px;\n  font-size: ", "px;\n\n  min-height: ", "px;\n  min-width: ", "px;\n  max-width: ", ";\n  ", "\n\n  flex: ", ";\n\n  border-radius: ", "px;\n\n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:disabled {\n    ", ";\n  }\n\n  &:focus,\n  &:active {\n    outline: none;\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  ", " {\n    padding-bottom: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n  justify-content: center;\n  margin: 0;\n  font-weight: 600;\n  position: relative;\n  overflow: hidden;\n  vertical-align: middle;\n  border: ", ";\n  padding: 0 ", "px;\n  font-size: ", "px;\n\n  min-height: ", "px;\n  min-width: ", "px;\n  max-width: ", ";\n  ", "\n\n  flex: ", ";\n\n  border-radius: ", "px;\n\n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:disabled {\n    ", ";\n  }\n\n  &:focus,\n  &:active {\n    outline: none;\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  ", " {\n    padding-bottom: ", "px;\n  }\n"])), function (_a) {
+exports.StyledButton = (0, styled_components_1["default"])(Effect_1.StyledEffect)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  justify-content: center;\n  margin: 0;\n  font-weight: 600;\n  position: relative;\n  overflow: hidden;\n  vertical-align: middle;\n  border: ", ";\n  padding: 0 ", "px;\n  font-size: ", "px;\n\n  min-height: ", "px;\n  min-width: ", "px;\n  max-width: ", ";\n  ", "\n\n  flex: ", ";\n  align-self: ", ";\n\n  border-radius: ", "px;\n\n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:disabled {\n    ", ";\n  }\n\n  &:focus,\n  &:active {\n    outline: none;\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  .reqore-button-description {\n    padding-bottom: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n  justify-content: center;\n  margin: 0;\n  font-weight: 600;\n  position: relative;\n  overflow: hidden;\n  vertical-align: middle;\n  border: ", ";\n  padding: 0 ", "px;\n  font-size: ", "px;\n\n  min-height: ", "px;\n  min-width: ", "px;\n  max-width: ", ";\n  ", "\n\n  flex: ", ";\n  align-self: ", ";\n\n  border-radius: ", "px;\n\n  background-color: ", ";\n\n  color: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:disabled {\n    ", ";\n  }\n\n  &:focus,\n  &:active {\n    outline: none;\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  .reqore-button-description {\n    padding-bottom: ", "px;\n  }\n"])), function (_a) {
     var theme = _a.theme, color = _a.color, flat = _a.flat;
     return !flat ? "1px solid ".concat((0, colors_1.changeLightness)(getButtonMainColor(theme, color), 0.2)) : 0;
 }, function (_a) {
@@ -108,8 +114,8 @@ exports.StyledButton = (0, styled_components_1["default"])(Effect_1.StyledEffect
     var size = _a.size;
     return sizes_1.SIZE_TO_PX[size];
 }, function (_a) {
-    var maxWidth = _a.maxWidth;
-    return maxWidth || undefined;
+    var maxWidth = _a.maxWidth, fluid = _a.fluid, fixed = _a.fixed;
+    return maxWidth || (fluid && !fixed ? '100%' : undefined);
 }, function (_a) {
     var wrap = _a.wrap, description = _a.description;
     return !wrap && !description
@@ -120,6 +126,9 @@ exports.StyledButton = (0, styled_components_1["default"])(Effect_1.StyledEffect
 }, function (_a) {
     var fluid = _a.fluid, fixed = _a.fixed;
     return (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto');
+}, function (_a) {
+    var fixed = _a.fixed, fluid = _a.fluid;
+    return (fixed ? 'flex-start' : fluid ? 'stretch' : undefined);
 }, function (_a) {
     var size = _a.size;
     return sizes_1.RADIUS_FROM_SIZE[size];
@@ -139,7 +148,7 @@ exports.StyledButton = (0, styled_components_1["default"])(Effect_1.StyledEffect
 }, styles_1.InactiveIconScale, function (_a) {
     var readOnly = _a.readOnly, animate = _a.animate, active = _a.active;
     return !readOnly && !active
-        ? (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n          &:not(:disabled) {\n            ", "\n\n            cursor: pointer;\n            transition: all 0.2s ease-out;\n\n            &:active {\n              transform: translateY(2px);\n            }\n\n            &:hover,\n            &:active,\n            &:focus {\n              background-color: ", ";\n              color: ", ";\n              border-color: ", ";\n\n              ", "\n            }\n          }\n        "], ["\n          &:not(:disabled) {\n            ", "\n\n            cursor: pointer;\n            transition: all 0.2s ease-out;\n\n            &:active {\n              transform: translateY(2px);\n            }\n\n            &:hover,\n            &:active,\n            &:focus {\n              background-color: ", ";\n              color: ", ";\n              border-color: ", ";\n\n              ", "\n            }\n          }\n        "])), styles_1.ScaleIconOnHover, function (_a) {
+        ? (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n          &:not(:disabled) {\n            ", "\n\n            cursor: pointer;\n            transition: all 0.2s ease-out;\n\n            &:active {\n              transform: scale(0.97);\n            }\n\n            &:hover,\n            &:active,\n            &:focus {\n              background-color: ", ";\n              color: ", ";\n              border-color: ", ";\n\n              ", "\n            }\n          }\n        "], ["\n          &:not(:disabled) {\n            ", "\n\n            cursor: pointer;\n            transition: all 0.2s ease-out;\n\n            &:active {\n              transform: scale(0.97);\n            }\n\n            &:hover,\n            &:active,\n            &:focus {\n              background-color: ", ";\n              color: ", ";\n              border-color: ", ";\n\n              ", "\n            }\n          }\n        "])), styles_1.ScaleIconOnHover, function (_a) {
             var theme = _a.theme, color = _a.color, minimal = _a.minimal;
             return minimal ? "#00000030" : (0, colors_1.changeLightness)(getButtonMainColor(theme, color), 0.05);
         }, function (_a) {
@@ -152,13 +161,17 @@ exports.StyledButton = (0, styled_components_1["default"])(Effect_1.StyledEffect
         ? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n          ", ";\n        "], ["\n          ", ";\n        "])), styles_1.ReadOnlyElement) : undefined;
 }, function (_a) {
     var active = _a.active, flat = _a.flat, theme = _a.theme, color = _a.color;
-    return active && (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      cursor: pointer;\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      &:hover,\n      &:active,\n      &:focus {\n        border-color: ", ";\n      }\n\n      ", "\n    "], ["\n      cursor: pointer;\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      &:hover,\n      &:active,\n      &:focus {\n        border-color: ", ";\n      }\n\n      ", "\n    "])), (0, colors_1.changeLightness)(getButtonMainColor(theme, color), 0.1), (0, colors_1.getReadableColor)({ main: getButtonMainColor(theme, color) }, undefined, undefined), flat ? undefined : (0, colors_1.changeLightness)(getButtonMainColor(theme, color), 0.175), flat
-        ? undefined
-        : (0, colors_1.changeLightness)(getButtonMainColor(theme, color), 0.275), styles_1.ActiveIconScale);
+    if (active) {
+        return (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n        cursor: pointer;\n        background-color: ", ";\n        color: ", ";\n        border-color: ", ";\n\n        &:hover,\n        &:active,\n        &:focus {\n          border-color: ", ";\n        }\n\n        ", "\n      "], ["\n        cursor: pointer;\n        background-color: ", ";\n        color: ", ";\n        border-color: ", ";\n\n        &:hover,\n        &:active,\n        &:focus {\n          border-color: ", ";\n        }\n\n        ", "\n      "])), (0, colors_1.changeLightness)(getButtonMainColor(theme, color), 0.1), (0, colors_1.getReadableColor)({ main: (0, colors_1.changeLightness)(getButtonMainColor(theme, color), 0.1) }, undefined, undefined), flat
+            ? undefined
+            : (0, colors_1.changeLightness)(getButtonMainColor(theme, color), 0.175), flat
+            ? undefined
+            : (0, colors_1.changeLightness)(getButtonMainColor(theme, color), 0.275), styles_1.ActiveIconScale);
+    }
 }, styles_1.DisabledElement, function (_a) {
     var minimal = _a.minimal, theme = _a.theme, color = _a.color;
     return minimal ? undefined : (0, colors_1.changeLightness)(getButtonMainColor(theme, color), 0.4);
-}, Effect_1.StyledTextEffect, function (_a) {
+}, function (_a) {
     var size = _a.size;
     return sizes_1.PADDING_FROM_SIZE[(0, utils_1.getOneLessSize)(size)];
 });
@@ -186,12 +199,12 @@ exports.ButtonBadge = (0, react_1.memo)(function (props) {
     }, [props]);
     // If the content is a list
     if (Array.isArray(props.content)) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_1.ReqoreSpacer, { width: props.wrap ? undefined : sizes_1.PADDING_FROM_SIZE[props.size], height: !props.wrap ? undefined : sizes_1.PADDING_FROM_SIZE[props.size] / 2 }), (0, jsx_runtime_1.jsx)(group_1["default"], __assign({ hasBottomMargin: false }, { children: props.content.map(function (badge, index) { return renderTag(__assign(__assign({}, props), { content: badge, key: index })); }) }))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_1.ReqoreSpacer, { width: props.wrap ? undefined : sizes_1.PADDING_FROM_SIZE[props.size], height: !props.wrap ? undefined : sizes_1.PADDING_FROM_SIZE[props.size] / 2 }), (0, jsx_runtime_1.jsx)(group_1["default"], { children: props.content.map(function (badge, index) { return renderTag(__assign(__assign({}, props), { content: badge, key: index })); }) })] }));
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_1.ReqoreSpacer, { width: props.wrap ? undefined : sizes_1.PADDING_FROM_SIZE[props.size], height: !props.wrap ? undefined : sizes_1.PADDING_FROM_SIZE[props.size] / 2 }), renderTag(__assign(__assign({}, props), { key: 0 }))] }));
 });
 var ReqoreButton = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, ref) {
-    var icon = _a.icon, _b = _a.size, size = _b === void 0 ? 'normal' : _b, minimal = _a.minimal, children = _a.children, tooltip = _a.tooltip, className = _a.className, fluid = _a.fluid, fixed = _a.fixed, intent = _a.intent, active = _a.active, flat = _a.flat, rightIcon = _a.rightIcon, customTheme = _a.customTheme, wrap = _a.wrap, readOnly = _a.readOnly, badge = _a.badge, description = _a.description, maxWidth = _a.maxWidth, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, effect = _a.effect, rest = __rest(_a, ["icon", "size", "minimal", "children", "tooltip", "className", "fluid", "fixed", "intent", "active", "flat", "rightIcon", "customTheme", "wrap", "readOnly", "badge", "description", "maxWidth", "textAlign", "effect"]);
+    var icon = _a.icon, _b = _a.size, size = _b === void 0 ? 'normal' : _b, minimal = _a.minimal, children = _a.children, tooltip = _a.tooltip, className = _a.className, fluid = _a.fluid, fixed = _a.fixed, intent = _a.intent, active = _a.active, flat = _a.flat, rightIcon = _a.rightIcon, customTheme = _a.customTheme, wrap = _a.wrap, readOnly = _a.readOnly, badge = _a.badge, description = _a.description, maxWidth = _a.maxWidth, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, effect = _a.effect, labelEffect = _a.labelEffect, descriptionEffect = _a.descriptionEffect, leftIconColor = _a.leftIconColor, rightIconColor = _a.rightIconColor, iconColor = _a.iconColor, rest = __rest(_a, ["icon", "size", "minimal", "children", "tooltip", "className", "fluid", "fixed", "intent", "active", "flat", "rightIcon", "customTheme", "wrap", "readOnly", "badge", "description", "maxWidth", "textAlign", "effect", "labelEffect", "descriptionEffect", "leftIconColor", "rightIconColor", "iconColor"]);
     var targetRef = (0, useCombinedRefs_1.useCombinedRefs)(ref).targetRef;
     var animations = (0, react_1.useContext)(ReqoreContext_1["default"]).animations;
     var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, intent);
@@ -206,12 +219,9 @@ var ReqoreButton = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, ref)
             ? (0, colors_1.getReadableColor)(theme, undefined, undefined, true, theme.originalMain)
             : (0, colors_1.getReadableColorFrom)(customColor, true)
         : (0, colors_1.getReadableColor)(theme, undefined, undefined, true);
-    return ((0, jsx_runtime_1.jsxs)(exports.StyledButton, __assign({}, rest, { effect: __assign({ interactive: !readOnly && !rest.disabled }, fixedEffect), as: 'button', theme: theme, ref: targetRef, fluid: fluid, fixed: fixed, maxWidth: maxWidth, minimal: minimal, size: size, color: customColor, animate: animations.buttons, flat: _flat, active: active, readOnly: readOnly, wrap: wrap, description: description, className: "".concat(className || '', " reqore-control reqore-button") }, { children: [(0, jsx_runtime_1.jsxs)(exports.StyledButtonContent, __assign({ size: size, wrap: wrap, description: description, flat: _flat }, { children: [icon && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: icon, size: size }), children || badge || rightIcon ? ((0, jsx_runtime_1.jsx)(Spacer_1.ReqoreSpacer, { width: sizes_1.PADDING_FROM_SIZE[size] })) : null] })), children && ((0, jsx_runtime_1.jsxs)(exports.StyledAnimatedTextWrapper, __assign({ textAlign: textAlign }, { children: [(0, jsx_runtime_1.jsx)(exports.StyledActiveContent, __assign({ wrap: wrap }, { children: children })), (0, jsx_runtime_1.jsx)(exports.StyledInActiveContent, __assign({ wrap: wrap }, { children: children })), (0, jsx_runtime_1.jsx)(exports.StyledInvisibleContent, __assign({ wrap: wrap }, { children: children })), (badge || badge === 0) && wrap ? ((0, jsx_runtime_1.jsx)(exports.ButtonBadge, { content: badge, size: size, color: color, wrap: true })) : null] }))), (badge || badge === 0) && !wrap ? ((0, jsx_runtime_1.jsx)(exports.ButtonBadge, { content: badge, size: size, color: color })) : null, rightIcon && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children || badge ? (0, jsx_runtime_1.jsx)(Spacer_1.ReqoreSpacer, { width: sizes_1.PADDING_FROM_SIZE[size] }) : null, (0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: rightIcon, size: size, style: { marginLeft: 'auto' } })] }))] })), description && ((0, jsx_runtime_1.jsx)(Effect_1.ReqoreTextEffect, __assign({ effect: {
-                    textSize: (0, utils_1.getOneLessSize)(size),
-                    weight: 'light',
-                    color: "".concat(color, "90"),
-                    textAlign: textAlign
-                } }, { children: description })))] })));
+    return ((0, jsx_runtime_1.jsxs)(exports.StyledButton, __assign({}, rest, { effect: intent
+            ? undefined
+            : __assign({ interactive: !readOnly && !rest.disabled }, fixedEffect), as: 'button', theme: theme, ref: targetRef, fluid: fluid, fixed: fixed, maxWidth: maxWidth, minimal: minimal, size: size, color: customColor, animate: animations.buttons, flat: _flat, active: active, readOnly: readOnly, wrap: wrap, description: description, className: "".concat(className || '', " reqore-control reqore-button") }, { children: [(0, jsx_runtime_1.jsxs)(exports.StyledButtonContent, __assign({ size: size, wrap: wrap, description: description, flat: _flat }, { children: [icon && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: icon, size: size, color: leftIconColor || iconColor, style: textAlign !== 'left' ? { marginRight: 'auto' } : undefined }), children || badge || rightIcon ? ((0, jsx_runtime_1.jsx)(Spacer_1.ReqoreSpacer, { width: sizes_1.PADDING_FROM_SIZE[size] })) : null] })), children && ((0, jsx_runtime_1.jsxs)(exports.StyledAnimatedTextWrapper, __assign({ textAlign: textAlign }, { children: [(0, jsx_runtime_1.jsx)(exports.StyledActiveContent, __assign({ wrap: wrap, effect: labelEffect }, { children: children })), (0, jsx_runtime_1.jsx)(exports.StyledInActiveContent, __assign({ wrap: wrap, effect: labelEffect }, { children: children })), (0, jsx_runtime_1.jsx)(exports.StyledInvisibleContent, __assign({ wrap: wrap, effect: labelEffect }, { children: children })), (badge || badge === 0) && wrap ? ((0, jsx_runtime_1.jsx)(exports.ButtonBadge, { content: badge, size: size, color: color, wrap: true })) : null] }))), (badge || badge === 0) && !wrap ? ((0, jsx_runtime_1.jsx)(exports.ButtonBadge, { content: badge, size: size, color: color })) : null, rightIcon && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children || badge ? (0, jsx_runtime_1.jsx)(Spacer_1.ReqoreSpacer, { width: sizes_1.PADDING_FROM_SIZE[size] }) : null, (0, jsx_runtime_1.jsx)(Icon_1["default"], { icon: rightIcon, size: size, style: textAlign !== 'right' ? { marginLeft: 'auto' } : undefined, color: rightIconColor || iconColor })] }))] })), description && ((0, jsx_runtime_1.jsx)(Effect_1.ReqoreTextEffect, __assign({ className: 'reqore-button-description', effect: __assign({ textSize: (0, utils_1.getOneLessSize)(size), weight: 'light', color: "".concat(color, "90"), textAlign: textAlign }, descriptionEffect) }, { children: description })))] })));
 }));
 exports["default"] = ReqoreButton;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;