@bitrise/bitkit 12.104.1-alpha.0 → 12.105.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.104.1-alpha.0",
+  "version": "12.105.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -10,7 +10,6 @@
   "license": "UNLICENSED",
   "scripts": {
     "build-storybook": "storybook build",
-    "create-theme-from-tokens": "node ./scripts/createThemeFromTokens.js",
     "lint": "eslint src --ext ts,tsx",
     "lint:fix": "eslint src --ext ts,tsx --fix",
     "release": "release-it minor --ci",
@@ -36,14 +35,12 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react-dom-interactions": "^0.8.1",
-    "@fontsource/figtree": "^5.0.18",
-    "@fontsource/source-code-pro": "^5.0.16",
     "framer-motion": "^11.0.3",
     "luxon": "^3.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-focus-lock": "^2.9.8",
-    "react-imask": "^7.4.0",
+    "react-focus-lock": "^2.9.7",
+    "react-imask": "^7.3.0",
     "react-markdown": "^9.0.1"
   },
   "peerDependencies": {
@@ -58,15 +55,15 @@
     "@bitrise/eslint-plugin": "^2.5.0",
     "@chakra-ui/cli": "^2.4.1",
     "@google-cloud/storage": "^7.7.0",
-    "@storybook/addon-actions": "^7.6.14",
-    "@storybook/addon-essentials": "^7.6.14",
-    "@storybook/addon-interactions": "^7.6.14",
-    "@storybook/addon-links": "^7.6.14",
-    "@storybook/addons": "^7.6.14",
-    "@storybook/blocks": "^7.6.14",
-    "@storybook/react": "^7.6.14",
-    "@storybook/react-webpack5": "^7.6.14",
-    "@storybook/theming": "^7.6.14",
+    "@storybook/addon-actions": "^7.6.12",
+    "@storybook/addon-essentials": "^7.6.12",
+    "@storybook/addon-interactions": "^7.6.12",
+    "@storybook/addon-links": "^7.6.12",
+    "@storybook/addons": "^7.6.12",
+    "@storybook/blocks": "^7.6.12",
+    "@storybook/react": "^7.6.12",
+    "@storybook/react-webpack5": "^7.6.12",
+    "@storybook/theming": "^7.6.12",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
@@ -74,7 +71,7 @@
     "@types/jest": "^29.5.12",
     "@types/luxon": "^3.4.2",
     "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
+    "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "axios": "^1.6.7",
@@ -94,7 +91,7 @@
     "prettier": "^3.2.5",
     "react-hook-form": "^7.50.1",
     "release-it": "^17.0.3",
-    "storybook": "^7.6.14",
+    "storybook": "^7.6.12",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3"
   },

package/src/Components/Avatar/Avatar.tsx

@@ -1,8 +1,10 @@
 import { Avatar as ChakraAvatar, AvatarProps as ChakraAvatarProps, forwardRef } from '@chakra-ui/react';
+import { Radii } from '../../Foundations/Radii/Radii';
 
 export type AvatarSizes = '16' | '24' | '32' | '40' | '48' | '64' | '96' | '128';
 
 export interface AvatarProps extends ChakraAvatarProps {
+  borderRadius?: keyof Radii;
   size?: AvatarSizes;
 }
 

package/src/Components/Badge/Badge.theme.ts

@@ -2,9 +2,13 @@ const BadgeTheme = {
   baseStyle: {
     borderRadius: '4',
     display: 'inline-block',
+    fontSize: '1',
+    fontWeight: 'bold',
+    lineHeight: '11px',
+    paddingBottom: '5px',
+    paddingTop: '6px',
     paddingX: '8',
-    paddingY: '4',
-    textStyle: 'comp/badge/sm',
+    textTransform: 'uppercase',
   },
 };
 

package/src/Components/Card/Card.tsx

@@ -1,8 +1,10 @@
 import { forwardRef, HTMLChakraProps, useStyleConfig } from '@chakra-ui/react';
+import { Radii } from '../../Foundations/Radii/Radii';
 import { Shadows } from '../../Foundations/Shadows/Shadows';
 import Box, { BoxProps } from '../Box/Box';
 
 export interface CardProps extends BoxProps {
+  borderRadius?: keyof Radii;
   boxShadow?: keyof Shadows;
   href?: string;
   variant?: 'elevated' | 'outline';

package/src/Components/ColorButton/ColorButton.theme.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from '../../types/bitkit';
+import { ColorScheme } from '../../tokens/tokens';
 
 const schemeColors: Record<ColorScheme, any> = {
   blue: {

package/src/Components/ColorButton/ColorButton.tsx

@@ -1,5 +1,5 @@
 import { Button as ChakraButton, ButtonProps as ChakraButtonProps, forwardRef, useStyleConfig } from '@chakra-ui/react';
-import { ColorScheme } from '../../types/bitkit';
+import { ColorScheme } from '../../tokens/tokens';
 
 export interface ColorButtonProps extends ChakraButtonProps {
   as?: 'a' | 'button';

package/src/Components/Dialog/Dialog.tsx

@@ -69,7 +69,7 @@ const Dialog: ComponentWithAs<'section', DialogProps> = ({
         {variant !== 'empty' && (
           <>
             <ModalHeader marginRight="48">
-              <Text as="h1" id={headerId} textStyle="com/dialog/title">
+              <Text as="h1" id={headerId} size="5">
                 {title}
               </Text>
             </ModalHeader>

package/src/Components/Filter/Filter.theme.ts

@@ -74,7 +74,7 @@ const FilterTheme = defineMultiStyleConfig({
     },
     formTitle: {
       color: 'purpe.10',
-      fontWeight: 'semibold',
+      fontWeight: 'demiBold',
     },
     icon: {
       color: 'neutral.60',

package/src/Components/Form/DateInput/DateInput.tsx

@@ -54,6 +54,7 @@ const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
       format: (date: Date | null) => (date ? DateTime.fromJSDate(date).toFormat(dateInputDateFormat) : ''),
       lazy: !isFocused && isEmpty,
       mask: Date,
+      overwrite: true,
       parse: (str: string) => {
         try {
           const parsedDate = DateTime.fromFormat(str, dateInputDateFormat);
@@ -65,7 +66,7 @@ const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
           return DateTime.now().toJSDate();
         }
       },
-      pattern: 'LL/dd/yyyy',
+      pattern: 'LL/`dd/`yyyy',
     },
     {
       onAccept: (val, maskRef) => {
@@ -111,7 +112,7 @@ const DateInput = forwardRef<DateInputProps, 'div'>((props, ref) => {
             aria-label="Show date picker"
             color="icon.tertiary"
             iconName="Calendar"
-            onClick={() => setIsDatePickerVisible(true)}
+            onClick={() => setIsDatePickerVisible(!isDatePickerVisible)}
             variant="tertiary"
           />
         }

package/src/Components/Form/Form.theme.ts

@@ -5,8 +5,9 @@ const FormTheme = {
     baseStyle: {
       helperText: {
         color: 'neutral.50',
+        fontSize: '2',
+        lineHeight: '1.25rem',
         marginTop: '4',
-        textStyle: 'comp/input/helperText',
       },
     } as ComponentStyleConfig,
   },
@@ -14,8 +15,9 @@ const FormTheme = {
     baseStyle: {
       text: {
         color: 'red.50',
+        fontSize: '2',
+        lineHeight: '1.25rem',
         marginTop: '4',
-        textStyle: 'comp/input/helperText',
       },
     } as ComponentStyleConfig,
   },
@@ -25,7 +27,8 @@ const FormTheme = {
         color: 'neutral.80',
       },
       color: 'purple.10',
-      textStyle: 'comp/input/label',
+      fontSize: '2',
+      fontWeight: 'bold',
     } as ComponentStyleConfig,
   },
 };

package/src/Components/Form/Input/Input.tsx

@@ -14,11 +14,11 @@ import {
   InputRightElement,
   SystemStyleObject,
 } from '@chakra-ui/react';
+import { TypeColors } from '../../../tokens/tokens';
 import Icon, { TypeIconName } from '../../Icon/Icon';
 import Text from '../../Text/Text';
 import Box from '../../Box/Box';
 import Tooltip, { TooltipProps } from '../../Tooltip/Tooltip';
-import { TypeColors } from '../../../types/bitkit';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
 type UsedChakraInputProps = Pick<

package/src/Components/Link/Link.theme.ts

@@ -1,4 +1,4 @@
-import TextTheme from '../Text/Text.theme';
+import { textSizes } from '../../Foundations/Typography/Typography';
 
 const schemeColors = {
   default: { color: 'inherit', hover: 'inherit' },
@@ -21,7 +21,7 @@ const LinkTheme = {
       fontSize: 'inherit',
     };
   },
-  ...TextTheme,
+  ...textSizes,
 };
 
 export default LinkTheme;

package/src/Components/Link/Link.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, Link as ChakraLink, LinkProps as ChakraLinkProps } from '@chakra-ui/react';
-import { TextSizes } from '../../types/bitkit';
+import { TextSizes } from '../../Foundations/Typography/Typography';
 
 export interface LinkProps extends ChakraLinkProps {
   as?: 'a' | 'button';

package/src/Components/Menu/MenuItem.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, MenuItem as ChakraMenuItem, MenuItemProps as ChakraMenuItemProps } from '@chakra-ui/react';
-import { TypeColors } from '../../types/bitkit';
+import { TypeColors } from '../../tokens/tokens';
 import Box from '../Box/Box';
 import Icon, { TypeIconName } from '../Icon/Icon';
 

package/src/Components/Notification/Notification.tsx

@@ -1,7 +1,7 @@
 import { cloneElement, createContext, ReactElement, useContext, useMemo } from 'react';
 import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
 
-import { ColorScheme } from '../../types/bitkit';
+import { ColorScheme } from '../../tokens/tokens';
 import Box from '../Box/Box';
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';

package/src/Components/Ribbon/Ribbon.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, useMemo } from 'react';
 import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
 
-import { ColorScheme } from '../../types/bitkit';
+import { ColorScheme } from '../../tokens/tokens';
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
 import Box from '../Box/Box';

package/src/Components/SegmentedControl/SegmentedControl.theme.ts

@@ -50,7 +50,7 @@ const SegmentedControlTheme = itemHelpers.defineMultiStyleConfig({
       cursor: 'pointer',
       flexGrow: 1,
       fontSize: '3',
-      fontWeight: 'semibold',
+      fontWeight: 'demiBold',
       lineHeight: '2.375rem',
       paddingX: '0.375rem',
       textAlign: 'center',

package/src/Components/Sidebar/SidebarItem.theme.ts

@@ -55,7 +55,7 @@ const SidebarItemTheme = itemHelpers.defineMultiStyleConfig({
           bg: 'purple.93',
         },
         bg: 'purple.95',
-        fontWeight: 'semibold',
+        fontWeight: 'demiBold',
       },
     },
   },

package/src/Components/Tabs/ContainedTab.tsx

@@ -1,5 +1,5 @@
 import { Button, forwardRef, TabProps as ChakraTabProps, useTab, useTabsStyles } from '@chakra-ui/react';
-import { TypeColors } from '../../types/bitkit';
+import { TypeColors } from '../../tokens/tokens';
 import Box from '../Box/Box';
 import Icon, { TypeIconName } from '../Icon/Icon';
 import Text from '../Text/Text';
@@ -19,14 +19,14 @@ const ContainedTab = forwardRef<ContainedTabProps, 'button'>((props, ref) => {
   return (
     <Button __css={styles.containedTab} {...tabProps}>
       <Box display="flex" gap="16" justifyContent="space-between">
-        <Text as="span" hasEllipsis textStyle="comp/tabs/contained">
+        <Text as="span" fontWeight="bold" hasEllipsis>
           {tabProps.children}
         </Text>
         {isWarning && <Icon name="WarningColored" />}
         {!isWarning && iconName && <Icon color={iconColor} name={iconName} />}
       </Box>
       {secondaryText && (
-        <Text as="span" display="block" hasEllipsis textStyle="comp/tabs/contained-secondary">
+        <Text as="span" display="block" hasEllipsis size="2">
           {secondaryText}
         </Text>
       )}

package/src/Components/Tabs/Tabs.theme.ts

@@ -75,11 +75,13 @@ const baseStyle = defineStyle(
       alignItems: 'center',
       color: 'neutral.50',
       display: 'flex',
+      fontSize: '3',
+      fontWeight: 'bold',
       gap: '8',
       justifyContent: 'flex-start',
+      lineHeight: '1.5rem',
       paddingX: '16',
       paddingY: '12',
-      textStyle: 'comp/tabs/line',
       whiteSpace: 'nowrap',
     },
     tablist: {

package/src/Components/Tag/Tag.theme.ts

@@ -1,6 +1,5 @@
 import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 import { rem } from '../../utils/utils';
-import tokensToTheme from '../../tokens/tokensToTheme.json';
 import { TagProps } from './Tag';
 
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers([
@@ -27,7 +26,10 @@ const sizes = {
         paddingRight: onClose ? rem(4) : rem(12),
         paddingY: leftIcon || onClose ? rem(4) : rem(6),
       },
-      label: tokensToTheme.textStyles['comp/tag/md'],
+      label: {
+        fontSize: '2',
+        lineHeight: rem(20),
+      },
     };
   }),
   sm: definePartsStyle((props) => {
@@ -44,7 +46,10 @@ const sizes = {
         paddingRight: onClose ? rem(2) : rem(8),
         paddingY: onClose ? rem(2) : rem(4),
       },
-      label: tokensToTheme.textStyles['comp/tag/sm'],
+      label: {
+        fontSize: rem(12),
+        lineHeight: rem(16),
+      },
     };
   }),
 };

package/src/Components/Tag/Tag.tsx

@@ -4,7 +4,7 @@ import Skeleton from '../Skeleton/Skeleton';
 import SkeletonBox from '../Skeleton/SkeletonBox';
 import Text from '../Text/Text';
 import Tooltip from '../Tooltip/Tooltip';
-import { TypeColors } from '../../types/bitkit';
+import { TypeColors } from '../../tokens/tokens';
 
 export interface TagProps extends Omit<ChakraTagProps, 'colorScheme' | 'size' | 'variant'> {
   closeButtonTooltip?: string;

package/src/Components/Text/Text.theme.ts

@@ -1,48 +1,5 @@
-import { StyleProps } from '@chakra-ui/styled-system';
-import { TextSizes } from '../../types/bitkit';
+import { textSizes } from '../../Foundations/Typography/Typography';
 
-const sizes: Record<TextSizes, StyleProps> = {
-  '1': {
-    fontSize: '0.6875rem',
-    lineHeight: '1rem',
-    textTransform: 'uppercase',
-  },
-  '2': {
-    fontSize: '0.875rem',
-    lineHeight: '1.25rem',
-  },
-  '3': {
-    fontSize: '1rem',
-    lineHeight: '1.5rem',
-  },
-  '4': {
-    fontSize: '1.1875rem',
-    lineHeight: '1.75rem',
-  },
-  '5': {
-    fontSize: '1.5rem',
-    fontWeight: 'bold',
-    lineHeight: '2.25rem',
-  },
-  '6': {
-    fontSize: '1.875rem',
-    fontWeight: 'bold',
-    lineHeight: '2.5rem',
-  },
-  '7': {
-    fontSize: '2.25rem',
-    fontWeight: 'bold',
-    lineHeight: '3rem',
-  },
-  '8': {
-    fontSize: '3rem',
-    fontWeight: 'bold',
-    lineHeight: '3.75rem',
-  },
-};
-
-const TextTheme = {
-  sizes,
-};
+const TextTheme = textSizes;
 
 export default TextTheme;

package/src/Components/Text/Text.tsx

@@ -1,8 +1,15 @@
 import { forwardRef, ResponsiveValue, Text as ChakraText, TextProps as ChakraTextProps } from '@chakra-ui/react';
-import { TextSizes } from '../../types/bitkit';
+import { TextSizes } from '../../Foundations/Typography/Typography';
 
 export interface TextProps extends ChakraTextProps {
+  /**
+   * Font weight
+   */
+  fontWeight?: ResponsiveValue<'bold' | 'demiBold' | 'normal'>;
   hasEllipsis?: boolean;
+  /**
+   * Size config (https://www.figma.com/file/grik9mTaJ5DfhydhWhXdP5/Bitkit-Foundations?node-id=211%3A12)
+   */
   size?: ResponsiveValue<TextSizes>;
 }
 
@@ -10,9 +17,14 @@ export interface TextProps extends ChakraTextProps {
  * `Text` component is the used to render text and paragraphs within an interface. It renders a `<p>` tag by default.
  */
 const Text = forwardRef<TextProps, 'p'>((props, ref) => {
-  const { hasEllipsis, size, ...rest } = props;
-  const properties: ChakraTextProps = { size, ...rest };
-
+  const { fontWeight, hasEllipsis, size, textTransform, ...rest } = props;
+  const properties: ChakraTextProps = { fontWeight, size, textTransform, ...rest };
+  if (size === '1' && (!textTransform || textTransform === 'none')) {
+    properties.textTransform = 'uppercase';
+  }
+  if (!fontWeight && (size === '5' || size === '6' || size === '7' || size === '8')) {
+    properties.fontWeight = 'bold';
+  }
   if (hasEllipsis) {
     if (!properties.maxWidth) {
       properties.maxWidth = '100%';
@@ -26,6 +38,7 @@ const Text = forwardRef<TextProps, 'p'>((props, ref) => {
 
 Text.defaultProps = {
   as: 'p',
+  size: '3',
 } as TextProps;
 
 export default Text;

package/src/Foundations/Colors/Colors.tsx

@@ -2,43 +2,17 @@
 import { Unstyled } from '@storybook/blocks';
 import Provider from '../../Components/Provider/Provider';
 import Divider from '../../Components/Divider/Divider';
-import tokens from '../../tokens/tokensToTheme.json';
-import Card from '../../Components/Card/Card';
-import TokenTable from '../docComponents/TokenTable';
-import DocTitle from '../docComponents/DocTitle';
+import CommonTokens from './CommonTokens';
+import SystemTokens from './SystemTokens';
 import Palette from './Palette';
 
-const commonColorKeys = ['background', 'border', 'icon', 'text'];
-const systemColorKeys = Object.keys(tokens.semanticTokens.colors.sys);
-
 const Colors = () => {
   return (
     <Unstyled>
       <Provider>
-        <DocTitle>Common Tokens</DocTitle>
-        <Card boxShadow="medium" padding="24">
-          {commonColorKeys.map((groupName) => (
-            <TokenTable
-              key={groupName}
-              data={tokens.semanticTokens.colors[groupName as keyof typeof tokens.semanticTokens.colors]}
-              groupName={groupName}
-              marginBottom="24"
-            />
-          ))}
-        </Card>
+        <CommonTokens />
         <Divider marginBottom="32" marginTop="48" size="1" />
-        <DocTitle>System Tokens</DocTitle>
-        <Card boxShadow="medium" padding="24">
-          {systemColorKeys.map((groupName) => (
-            <TokenTable
-              key={groupName}
-              data={tokens.semanticTokens.colors.sys[groupName as keyof typeof tokens.semanticTokens.colors.sys]}
-              groupName={groupName}
-              marginBottom="24"
-              tokenPrefix="sys"
-            />
-          ))}
-        </Card>
+        <SystemTokens />
         <Divider marginBottom="32" marginTop="48" size="1" />
         <Palette />
       </Provider>

package/src/Foundations/Colors/CommonTokens.tsx

@@ -0,0 +1,21 @@
+import { semanticTokens } from '../../tokens/tokens';
+import Card from '../../Components/Card/Card';
+import Text from '../../Components/Text/Text';
+import TokenTable from '../docComponents/TokenTable';
+
+const commonColorKeys = ['background', 'border', 'icon', 'text'];
+
+const CommonTokens = () => (
+  <>
+    <Text as="h2" color="pal.purple.10" fontWeight="normal" marginBlockEnd="8" size="8">
+      Common Tokens
+    </Text>
+    <Card boxShadow="medium" padding="24">
+      {commonColorKeys.map((groupName) => (
+        <TokenTable key={groupName} data={semanticTokens.colors[groupName]} groupName={groupName} marginBottom="24" />
+      ))}
+    </Card>
+  </>
+);
+
+export default CommonTokens;

package/src/Foundations/Colors/SystemTokens.tsx

@@ -0,0 +1,27 @@
+import { semanticTokens } from '../../tokens/tokens';
+import Card from '../../Components/Card/Card';
+import Text from '../../Components/Text/Text';
+import TokenTable from '../docComponents/TokenTable';
+
+const systemColorKeys = Object.keys(semanticTokens.colors.sys);
+
+const SystemTokens = () => (
+  <>
+    <Text as="h2" color="pal.purple.10" fontWeight="normal" marginBlockEnd="8" size="8">
+      System Tokens
+    </Text>
+    <Card boxShadow="medium" padding="24">
+      {systemColorKeys.map((groupName) => (
+        <TokenTable
+          key={groupName}
+          data={semanticTokens.colors.sys[groupName]}
+          groupName={groupName}
+          marginBottom="24"
+          tokenPrefix="sys."
+        />
+      ))}
+    </Card>
+  </>
+);
+
+export default SystemTokens;

package/src/Foundations/Radii/Radii.ts

@@ -0,0 +1,10 @@
+const radii = {
+  '4': '0.25rem',
+  '8': '0.5rem',
+  '12': '0.75rem',
+  '16': '1rem',
+  '24': '1.5rem',
+};
+
+export type Radii = typeof radii;
+export default radii;

package/src/Foundations/Sizes/Sizes.ts

@@ -0,0 +1,18 @@
+const sizes = {
+  '0': '0',
+  '4': '0.25rem',
+  '8': '0.5rem',
+  '12': '0.75rem',
+  '16': '1rem',
+  '20': '1.25rem',
+  '24': '1.5rem',
+  '32': '2rem',
+  '40': '2.5rem',
+  '48': '3rem',
+  '64': '4rem',
+  '96': '6rem',
+  '128': '8rem',
+};
+
+export type TypeSizes = keyof typeof sizes;
+export default sizes;

package/src/Foundations/Themes/Alert.theme.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from '../../types/bitkit';
+import { ColorScheme } from '../../tokens/tokens';
 
 const AlertTheme = {
   baseStyle({ colorScheme }: { colorScheme: ColorScheme }) {
@@ -12,9 +12,10 @@ const AlertTheme = {
         borderWidth: '1px',
         color: `${colorScheme}.40`,
         display: 'flex',
+        fontSize: '3',
         gap: '8',
+        lineHeight: '1.5rem',
         padding: '12',
-        textStyle: 'comp/notification/message',
       },
       icon: {
         h: 24,
@@ -22,7 +23,7 @@ const AlertTheme = {
         w: 24,
       },
       title: {
-        textStyle: 'comp/notification/title',
+        fontWeight: 'bold',
       },
     };
   },