@qoretechnologies/reqore 0.27.6 → 0.28.1

package/src/components/Message/index.tsx

@@ -1,7 +1,6 @@
 import { animated } from '@react-spring/web';
 import React, { forwardRef, useEffect, useMemo, useState } from 'react';
 import { useMount, useUnmount } from 'react-use';
-import { TEXT_FROM_SIZE } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { useReqoreTheme } from '../../hooks/useTheme';
@@ -9,15 +8,16 @@ import {
   IReqoreIntent,
   IWithReqoreCustomTheme,
   IWithReqoreEffect,
+  IWithReqoreMinimal,
   IWithReqoreSize,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
+import { ReqoreHeading } from '../Header';
 import ReqoreIcon from '../Icon';
 import {
   StyledIconWrapper,
   StyledNotificationContent,
   StyledNotificationContentWrapper,
-  StyledNotificationTitle,
   StyledReqoreNotification,
   typeToIcon,
 } from '../Notifications/notification';
@@ -27,6 +27,7 @@ export interface IReqoreMessageProps
     IWithReqoreEffect,
     IWithReqoreSize,
     IReqoreIntent,
+    IWithReqoreMinimal,
     React.HTMLAttributes<HTMLDivElement> {
   title?: string;
   children: any;
@@ -36,7 +37,6 @@ export interface IReqoreMessageProps
   duration?: number;
   onFinish?: () => any;
   flat?: boolean;
-  inverted?: boolean;
 }
 
 export interface IReqoreNotificationStyle extends IReqoreMessageProps {
@@ -57,7 +57,7 @@ const ReqoreMessage = forwardRef<HTMLDivElement, IReqoreMessageProps>(
       duration,
       onFinish,
       flat,
-      inverted,
+      minimal,
       size = 'normal',
       customTheme,
       ...rest
@@ -114,7 +114,7 @@ const ReqoreMessage = forwardRef<HTMLDivElement, IReqoreMessageProps>(
           clickable={!!onClick}
           onClick={onClick}
           flat={flat}
-          inverted={inverted}
+          minimal={minimal}
           asMessage
           fluid
           className={`${rest?.className || ''} reqore-message`}
@@ -124,16 +124,23 @@ const ReqoreMessage = forwardRef<HTMLDivElement, IReqoreMessageProps>(
         >
           {leftIcon ? (
             <StyledIconWrapper intent={intent} size={size} theme={theme}>
-              <ReqoreIcon
-                icon={leftIcon}
-                margin={flat && inverted ? undefined : 'left'}
-                size={`${TEXT_FROM_SIZE[size]}px`}
-              />
+              <ReqoreIcon icon={leftIcon} margin={flat && minimal ? 'right' : 'both'} size={size} />
             </StyledIconWrapper>
           ) : null}
           <StyledNotificationContentWrapper size={size} theme={theme}>
-            {title && <StyledNotificationTitle theme={theme}>{title}</StyledNotificationTitle>}
-            <StyledNotificationContent theme={theme}>{children}</StyledNotificationContent>
+            {title && (
+              <ReqoreHeading
+                size={size}
+                customTheme={
+                  rest.effect?.color ? { text: { color: rest.effect.color } } : undefined
+                }
+              >
+                {title}
+              </ReqoreHeading>
+            )}
+            <StyledNotificationContent theme={theme} hasTitle={!!title} size={size}>
+              {children}
+            </StyledNotificationContent>
           </StyledNotificationContentWrapper>
           {onClose && (
             <StyledIconWrapper
@@ -147,7 +154,7 @@ const ReqoreMessage = forwardRef<HTMLDivElement, IReqoreMessageProps>(
                 onClose && onClose();
               }}
             >
-              <ReqoreIcon icon='CloseFill' margin='both' size={`${TEXT_FROM_SIZE[size]}px`} />
+              <ReqoreIcon icon='CloseFill' margin='both' size={size} />
             </StyledIconWrapper>
           )}
         </StyledReqoreNotification>

package/src/components/Notifications/notification.tsx

@@ -1,27 +1,29 @@
 import { animated, useTransition } from '@react-spring/web';
-import { darken, rgba } from 'polished';
+import { rgba } from 'polished';
 import React, { forwardRef, useEffect, useState } from 'react';
 import { useMount, useUnmount } from 'react-use';
 import styled, { css, keyframes } from 'styled-components';
 import { SPRING_CONFIG } from '../../constants/animations';
-import { PADDING_FROM_SIZE, TABS_SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import {
+  ICON_WRAPPER_FROM_HEADER_SIZE,
+  PADDING_FROM_SIZE,
+  TABS_SIZE_TO_PX,
+  TEXT_FROM_SIZE,
+  TSizes,
+} from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { fadeIn } from '../../helpers/animations';
-import {
-  changeDarkness,
-  changeLightness,
-  getNotificationIntent,
-  getReadableColorFrom,
-} from '../../helpers/colors';
-import { IWithReqoreEffect } from '../../types/global';
+import { changeLightness, getNotificationIntent, getReadableColor } from '../../helpers/colors';
+import { IWithReqoreEffect, IWithReqoreMinimal } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import { StyledEffect } from '../Effect';
+import { ReqoreHeading } from '../Header';
 import ReqoreIcon from '../Icon';
 
 export type IReqoreNotificationType = TReqoreIntent;
 
-export interface IReqoreNotificationProps extends IWithReqoreEffect {
+export interface IReqoreNotificationProps extends IWithReqoreEffect, IWithReqoreMinimal {
   type?: IReqoreNotificationType;
   intent?: TReqoreIntent;
   title?: string;
@@ -33,7 +35,6 @@ export interface IReqoreNotificationProps extends IWithReqoreEffect {
   onFinish?: () => any;
   fluid?: boolean;
   flat?: boolean;
-  inverted?: boolean;
   size?: TSizes;
 }
 
@@ -46,7 +47,7 @@ export interface IReqoreNotificationStyle {
   hasShadow?: boolean;
   fluid?: boolean;
   flat?: boolean;
-  inverted?: boolean;
+  minimal?: boolean;
   size?: TSizes;
   asMessage?: boolean;
 }
@@ -79,8 +80,6 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
           animation: 0.2s ${fadeIn} ease-in;
         `};
 
-  font-size: ${({ size = 'normal' }) => TEXT_FROM_SIZE[size]}px;
-
   &:not(:first-child) {
     margin-top: ${({ asMessage }) => (asMessage ? undefined : `10px`)};
   }
@@ -93,13 +92,13 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
     timeout,
     hasShadow,
     flat,
-    inverted,
+    minimal,
   }: IReqoreNotificationStyle) => css`
-    background-color: ${inverted ? 'transparent' : getNotificationIntent(theme, intent || type)};
+    background-color: ${minimal
+      ? 'transparent'
+      : rgba(getNotificationIntent(theme, intent || type), 0.3)};
     border: ${flat ? 0 : '1px solid'};
-    border-color: ${inverted
-      ? getNotificationIntent(theme, intent || type)
-      : darken(0.2, getNotificationIntent(theme, intent || type))};
+    border-color: ${getNotificationIntent(theme, intent || type)};
 
     ${hasShadow &&
     css`
@@ -120,34 +119,39 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
       }
     `}
 
-    color: ${inverted && (intent || type)
-      ? getNotificationIntent(theme, intent || type)
-      : getReadableColorFrom(getNotificationIntent(theme, intent || type), true)};
+    color: ${getReadableColor(theme, null, null, true, theme.originalMain)};
 
     ${clickable &&
     css`
       cursor: pointer;
       &:hover {
-        background-color: ${inverted
-          ? rgba(changeDarkness(getNotificationIntent(theme, intent || type), 0.2), 0.1)
-          : changeLightness(getNotificationIntent(theme, intent || type), 0.0625)};
+        background-color: ${rgba(
+          getNotificationIntent(theme, intent || type),
+          minimal ? 0.2 : 0.5
+        )};
+        border-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.1)};
       }
     `}
   `}
 `;
 
 export const StyledIconWrapper = styled.div<IReqoreNotificationStyle>`
-  min-height: ${({ size = 'normal' }: IReqoreNotificationStyle) => TABS_SIZE_TO_PX[size]}px;
+  height: ${({ size = 'normal' }: IReqoreNotificationStyle) =>
+    ICON_WRAPPER_FROM_HEADER_SIZE[size]}px;
   flex: 0 1 auto;
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.2s ease-out;
+  margin-top: ${({ size = 'normal' }: IReqoreNotificationStyle) => `${PADDING_FROM_SIZE[size]}px`};
 
   ${({ clickable, theme, intent, type }) =>
     clickable &&
     css`
+      margin-top: unset;
+      height: unset;
+
       .reqore-icon {
         transform: scale(0.85);
       }
@@ -178,12 +182,17 @@ export const StyledNotificationTitle = styled.h4`
   align-items: center;
 `;
 
-export const StyledNotificationContent = styled.p`
+export const StyledNotificationContent = styled.div`
   margin: 0;
   padding: 0;
   flex: 1;
-  display: flex;
-  align-items: center;
+  font-size: ${({ size = 'normal' }) => TEXT_FROM_SIZE[size]}px;
+
+  ${({ hasTitle, size = 'normal' }) =>
+    hasTitle &&
+    css`
+      padding-top: ${PADDING_FROM_SIZE[size]}px;
+    `}
 `;
 
 export const typeToIcon: { [type: string]: IReqoreIconName } = {
@@ -208,7 +217,7 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
       duration,
       onFinish,
       flat,
-      inverted,
+      minimal,
       size = 'normal',
     },
     ref: any
@@ -259,7 +268,7 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
             clickable={!!onClick}
             onClick={onClick}
             flat={flat}
-            inverted={inverted}
+            minimal={minimal}
             className='reqore-notification'
             ref={ref}
             style={styles}
@@ -267,16 +276,14 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
           >
             {type || intent || icon ? (
               <StyledIconWrapper type={type || intent} size={size}>
-                <ReqoreIcon
-                  icon={icon || typeToIcon[type || intent]}
-                  margin={'both'}
-                  size={`${TEXT_FROM_SIZE[size]}px`}
-                />
+                <ReqoreIcon icon={icon || typeToIcon[type || intent]} margin={'both'} size={size} />
               </StyledIconWrapper>
             ) : null}
             <StyledNotificationContentWrapper size={size}>
-              {title && <StyledNotificationTitle>{title}</StyledNotificationTitle>}
-              <StyledNotificationContent>{content}</StyledNotificationContent>
+              {title && <ReqoreHeading size={size}>{title}</ReqoreHeading>}
+              <StyledNotificationContent hasTitle={!!title} size={size}>
+                {content}
+              </StyledNotificationContent>
             </StyledNotificationContentWrapper>
             <StyledIconWrapper
               type={type || intent}
@@ -288,7 +295,7 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
                 onClose && onClose();
               }}
             >
-              <ReqoreIcon icon='CloseFill' margin='both' size={`${TEXT_FROM_SIZE[size]}px`} />
+              <ReqoreIcon icon='CloseFill' margin='both' size={size} />
             </StyledIconWrapper>
           </StyledReqoreNotification>
         </ReqoreThemeProvider>

package/src/components/Panel/index.tsx

@@ -5,6 +5,7 @@ import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
   ICON_FROM_HEADER_SIZE,
+  PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
   TEXT_FROM_SIZE,
   TSizes,
@@ -19,6 +20,7 @@ import {
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
+import { ACTIVE_ICON_SCALE, INACTIVE_ICON_SCALE } from '../../styles';
 import {
   IReqoreIntent,
   IWithReqoreCustomTheme,
@@ -27,19 +29,20 @@ import {
   IWithReqoreTooltip,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import ReqoreButton, { IReqoreButtonProps } from '../Button';
+import ReqoreButton, { ButtonBadge, IReqoreButtonProps, TReqoreBadge } from '../Button';
 import { StyledCollectionItemContent } from '../Collection/item';
 import ReqoreControlGroup from '../ControlGroup';
 import ReqoreDropdown from '../Dropdown';
 import { IReqoreDropdownItem } from '../Dropdown/list';
 import { IReqoreEffect, StyledEffect } from '../Effect';
 import { ReqoreHeading } from '../Header';
-import ReqoreIcon from '../Icon';
+import ReqoreIcon, { StyledIconWrapper } from '../Icon';
+import { ReqoreSpacer } from '../Spacer';
 
 export interface IReqorePanelAction extends IReqoreButtonProps, IWithReqoreTooltip, IReqoreIntent {
   label?: string | number;
   onClick?: () => void;
-  actions?: IReqoreDropdownItem[];
+  actions?: Omit<IReqoreDropdownItem[], 'value'>;
   // Custom react element
   as?: React.ElementType;
   props?: any;
@@ -62,7 +65,7 @@ export interface IReqorePanelProps
   children?: any;
   icon?: IReqoreIconName;
   label?: string | ReactElement<any>;
-
+  badge?: TReqoreBadge | TReqoreBadge[];
   collapsible?: boolean;
   isCollapsed?: boolean;
   onClose?: () => void;
@@ -114,6 +117,10 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
           cursor: pointer;
 
           &:hover {
+            ${StyledPanelTitle} > div > ${StyledIconWrapper} {
+              transform: scale(${ACTIVE_ICON_SCALE});
+            }
+
             background-color: ${rgba(
               darken(0.025, rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)),
               opacity === 0 ? 0.2 : opacity
@@ -159,7 +166,7 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
 export const StyledPanelTitle = styled.div<IStyledPanel>`
   display: flex;
   background-color: ${({ theme, opacity = 1 }: IStyledPanel) =>
-    rgba(changeLightness(getMainBackgroundColor(theme), 0.07), opacity)};
+    rgba(changeLightness(getMainBackgroundColor(theme), 0.03), opacity)};
   justify-content: space-between;
   height: 40px;
   align-items: center;
@@ -175,13 +182,21 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
   overflow: hidden;
   flex: 0 0 auto;
 
+  > div > ${StyledIconWrapper} {
+    transform: scale(${INACTIVE_ICON_SCALE});
+  }
+
   ${({ collapsible }) =>
     collapsible &&
     css`
       cursor: pointer;
       &:hover {
+        > div > ${StyledIconWrapper} {
+          transform: scale(${ACTIVE_ICON_SCALE});
+        }
+
         background-color: ${({ theme, opacity = 1 }: IStyledPanel) =>
-          rgba(changeLightness(getMainBackgroundColor(theme), 0.1), opacity)};
+          rgba(changeLightness(getMainBackgroundColor(theme), 0.05), opacity)};
       }
     `}
 `;
@@ -247,6 +262,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       contentSize = 'normal',
       minimal,
       tooltip,
+      badge,
       ...rest
     }: IReqorePanelProps,
     ref
@@ -267,12 +283,17 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       setIsCollapsed(!!isCollapsed);
     }, [isCollapsed]);
 
+    // Return true if the card has a title bar, otherwise return false.
     const hasTitleBar: boolean = useMemo(
-      () => !!label || collapsible || !!onClose || !!size(actions),
-      [label, collapsible, onClose, actions]
+      () => !!label || collapsible || !!onClose || !!size(actions) || !!badge,
+      [label, collapsible, onClose, actions, badge]
     );
 
+    // If collapsible is true, toggle the isCollapsed state
+    // If the isCollapsed state is true, the component is expanded
+    // If the isCollapsed state is false, the component is collapsed
     const handleCollapseClick = useCallback(() => {
+      // If collapsible is true, toggle the isCollapsed state
       if (collapsible) {
         setIsCollapsed(!_isCollapsed);
         onCollapseChange?.(!_isCollapsed);
@@ -289,6 +310,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       [bottomActions]
     );
 
+    // Calculates whether or not the bottom actions should be displayed.
     const hasBottomActions: boolean = useMemo(
       () => !!(size(leftBottomActions) || size(rightBottomActions)),
       [leftBottomActions, rightBottomActions]
@@ -437,6 +459,16 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
               ) : (
                 label
               )}
+              {badge || badge === 0 ? (
+                <>
+                  <ButtonBadge
+                    color={changeLightness(theme.main, 0.18)}
+                    size='big'
+                    content={badge}
+                  />
+                  <ReqoreSpacer width={PADDING_FROM_SIZE.normal} />
+                </>
+              ) : null}
             </StyledPanelTitleHeader>
             <ReqoreControlGroup>
               {actions.map(renderActions)}

package/src/components/Table/row.tsx

@@ -342,7 +342,7 @@ const ReqoreTableRow = ({
                 ? 'CheckboxCircleLine'
                 : 'CheckboxBlankCircleLine'
             }
-            size={`${TEXT_FROM_SIZE[size]}px`}
+            size={size}
             style={{ opacity: !data[index]._selectId || !isSelected ? 0.4 : 1 }}
           />
         </StyledTableCell>

package/src/components/Tabs/index.tsx

@@ -2,22 +2,18 @@ import React, { ReactElement, useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { TSizes } from '../../constants/sizes';
 import { IReqoreCustomTheme, TReqoreIntent } from '../../constants/theme';
-import { TReqoreTooltipProp } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
+import { IReqoreButtonProps } from '../Button';
 import ReqoreTabsList from './list';
 
-export interface IReqoreTabsListItem {
+export interface IReqoreTabsListItem extends Omit<IReqoreButtonProps, 'id'> {
   label: string;
-  icon?: IReqoreIconName;
   as?: any;
-  disabled?: boolean;
   id: string | number;
-  tooltip?: TReqoreTooltipProp;
   props?: React.HTMLAttributes<any>;
   onClick?: (event: any) => any;
   onCloseClick?: (id: string | number) => any;
   activeIntent?: TReqoreIntent;
-  intent?: TReqoreIntent;
   closeIcon?: IReqoreIconName;
 }
 

package/src/components/Tabs/item.tsx

@@ -3,11 +3,10 @@ import styled, { css } from 'styled-components';
 import { IReqoreTabsListItem } from '.';
 import { TABS_PADDING_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
-import { changeLightness } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { IWithReqoreFlat } from '../../types/global';
-import ReqoreButton from '../Button';
+import ReqoreButton, { StyledButton } from '../Button';
 import ReqoreControlGroup from '../ControlGroup';
 
 export interface IReqoreTabListItemProps extends IReqoreTabsListItem, IWithReqoreFlat {
@@ -28,7 +27,7 @@ export interface IReqoreTabListItemStyle extends IReqoreTabListItemProps {
 }
 
 export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
-  ${({ active, disabled, vertical, activeColor, size, fill }: IReqoreTabListItemStyle) => {
+  ${({ disabled, vertical, size, fill }: IReqoreTabListItemStyle) => {
     return css`
       display: flex;
       flex-shrink: 0;
@@ -37,19 +36,30 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
       align-items: center;
       width: ${vertical ? `100%` : undefined};
       padding: ${vertical ? `${TABS_PADDING_TO_PX[size!]}px` : `${TABS_PADDING_TO_PX[size!]}px`};
-      ${active &&
-      css`
-        &:after {
-          width: ${vertical ? '5px' : '1px'};
-          height: ${vertical ? '1px' : '5px'};
-          left: ${vertical ? '0' : '50%'};
-          top: ${vertical ? '50%' : undefined};
-          bottom: ${vertical ? undefined : '0'};
-          content: '';
-          position: absolute;
-          background-color: ${activeColor};
-        }
-      `}
+      padding-bottom: ${!vertical && 0};
+      padding-right: ${vertical && 0};
+
+      ${vertical
+        ? css`
+            ${StyledButton}:last-child {
+              border-right: 0;
+            }
+            ${StyledButton}:last-child {
+              border-top-right-radius: 0;
+              border-bottom-right-radius: 0;
+            }
+          `
+        : css`
+            ${StyledButton} {
+              border-bottom: 0;
+            }
+            ${StyledButton}:first-child {
+              border-bottom-left-radius: 0;
+            }
+            ${StyledButton}:last-child {
+              border-bottom-right-radius: 0;
+            }
+          `}
 
       ${fill &&
       css`
@@ -98,13 +108,13 @@ const ReqoreTabsListItem = memo(
         className,
         flat = true,
         wrapTabNames,
+        id,
+        ...rest
       }: IReqoreTabListItemProps,
       ref
     ) => {
       const { targetRef } = useCombinedRefs(ref);
       const theme = useReqoreTheme('main', customTheme);
-      const _intent = activeIntent || intent;
-      const activeColor = _intent ? theme.intents[_intent] : changeLightness(theme.main, 0.05);
 
       return (
         <StyledTabListItem
@@ -112,8 +122,6 @@ const ReqoreTabsListItem = memo(
           {...props}
           className={className}
           intent={intent}
-          activeIntent={activeIntent}
-          activeColor={activeColor}
           as={as}
           size={size}
           active={active}
@@ -125,7 +133,7 @@ const ReqoreTabsListItem = memo(
           {label || icon ? (
             <ReqoreControlGroup stack size={size} fluid={fill || vertical}>
               <ReqoreButton
-                flat={active || intent ? false : flat}
+                flat={intent ? false : flat}
                 fluid={fill || vertical}
                 icon={icon}
                 minimal
@@ -135,21 +143,22 @@ const ReqoreTabsListItem = memo(
                 disabled={disabled}
                 onClick={onClick}
                 tooltip={tooltip}
-                customTheme={customTheme}
+                customTheme={theme}
                 className={`reqore-tabs-list-item ${active ? 'reqore-tabs-list-item-active' : ''}`}
+                {...rest}
               >
                 {label}
               </ReqoreButton>
               {onCloseClick && !disabled ? (
                 <ReqoreButton
                   fixed
-                  flat={active || intent ? false : flat}
+                  flat={intent ? false : flat}
                   icon={closeIcon || 'CloseLine'}
                   intent={active ? activeIntent || intent : intent}
                   minimal
                   active={active}
                   className='reqore-tabs-list-item-close'
-                  customTheme={customTheme}
+                  customTheme={theme}
                   onClick={(event) => {
                     event.stopPropagation();
                     onCloseClick?.();