github/infisical
1
0
Fork 0
mirror of https://github.com/Infisical/infisical.git synced 2026-01-05 05:34:17 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: added card and modal component

Browse Source
This commit is contained in:
akhilmhdh
2023-01-21 22:55:03 +05:30
parent 606a5e5317
commit 89ba80740b
7 changed files with 399 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@@ -1,3 +1,4 @@
node_modules
built
healthcheck.js
tailwind.config.js

8
frontend/src/components/v2/Card/Card.tsx
View File

@@ -34,6 +34,7 @@ export const CardBody = ({ children, className }: CardBodyProps) => (
export type CardProps = {
children: ReactNode;
className?: string;
isFullHeight?: boolean;
isRounded?: boolean;
isPlain?: boolean;
@@ -41,16 +42,17 @@ export type CardProps = {
};
export const Card = forwardRef<HTMLDivElement, CardProps>(
({ children, isFullHeight, isRounded, isHoverable, isPlain }, ref): JSX.Element => {
({ children, isFullHeight, isRounded, isHoverable, isPlain, className }, ref): JSX.Element => {
return (
<div
ref={ref}
className={twMerge(
'flex flex-col w-full text-gray-200 bg-mineshaft shadow-md',
'flex flex-col w-full text-gray-200 bg-mineshaft-700 shadow-md',
isFullHeight && 'h-full',
isRounded && 'rounded-md',
isPlain && 'shadow-none',
isHoverable && 'hover:shadow-xl'
isHoverable && 'hover:shadow-xl',
className
)}
>
{children}

33
frontend/src/components/v2/Modal/Modal.stories.tsx Normal file
View File

@@ -0,0 +1,33 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import { Meta, StoryObj } from '@storybook/react';
import { Button } from '../Button';
import { Modal, ModalContent, ModalContentProps, ModalTrigger } from './Modal';
const meta: Meta<typeof Modal> = {
title: 'Components/Modal',
component: Modal,
tags: ['v2'],
argTypes: {}
};
export default meta;
type Story = StoryObj<typeof ModalContent>;
const Template = (args: ModalContentProps) => (
<Modal>
<ModalTrigger asChild>
<Button>Open</Button>
</ModalTrigger>
<ModalContent {...args}>Hello world</ModalContent>
</Modal>
);
export const Basic: Story = {
render: (args) => <Template {...args} />,
args: {
title: 'Title',
subTitle: 'Something as subtitle',
footerContent: 'footer content'
}
};

55
frontend/src/components/v2/Modal/Modal.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { forwardRef, ReactNode } from 'react';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { twMerge } from 'tailwind-merge';
import { Card, CardBody, CardFooter, CardTitle } from '../Card';
import { IconButton } from '../IconButton';
export type ModalContentProps = Omit<DialogPrimitive.DialogContentProps, 'open'> & {
title?: ReactNode;
subTitle?: string;
footerContent?: ReactNode;
};
export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
({ children, title, subTitle, className, footerContent, ...props }, forwardedRef) => (
<DialogPrimitive.Portal>
<DialogPrimitive.Overlay
className="fixed inset-0 w-full h-full animate-fadeIn"
style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
/>
<DialogPrimitive.Content {...props} ref={forwardedRef}>
<Card
isRounded
className={twMerge(
'fixed max-w-md animate-popIn top-1/2 left-1/2 -translate-y-2/4 -translate-x-2/4',
className
)}
>
{title && <CardTitle subTitle={subTitle}>{title}</CardTitle>}
<CardBody>{children}</CardBody>
{footerContent && <CardFooter>{footerContent}</CardFooter>}
<DialogPrimitive.Close aria-label="Close" asChild>
<IconButton
variant="plain"
ariaLabel="close"
className="absolute top-2.5 right-2.5 text-white hover:bg-gray-600 rounded"
>
<FontAwesomeIcon icon={faTimes} size="sm" className="cursor-pointer" />
</IconButton>
</DialogPrimitive.Close>
</Card>
</DialogPrimitive.Content>
</DialogPrimitive.Portal>
)
);
ModalContent.displayName = 'ModalContent';
export const Modal = DialogPrimitive.Root;
export type ModalProps = DialogPrimitive.DialogProps;
export const ModalTrigger = DialogPrimitive.Trigger;
export type ModalTriggerProps = DialogPrimitive.DialogTriggerProps;

2
frontend/src/components/v2/Modal/index.tsx Normal file
View File

@@ -0,0 +1,2 @@
export type { ModalContentProps, ModalProps, ModalTriggerProps } from './Modal';
export { Modal, ModalContent, ModalTrigger } from './Modal';

1
frontend/src/components/v2/index.tsx
View File

@@ -3,4 +3,5 @@ export * from './Card';
export * from './FormControl';
export * from './IconButton';
export * from './Input';
export * from './Modal';
export * from './Select';

595
frontend/tailwind.config.js
View File

@@ -1234,451 +1234,460 @@ const plugin = require("tailwindcss/plugin");
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class",
content: [
"./src/**/*.{js,ts,jsx,tsx}",
],
darkMode: 'class',
content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
// You can generate your own colors with this tool: https://javisperez.github.io/tailwindcolorshades/
primary: {
50: "#fcfdf7",
100: "#f8fcee",
200: "#eef6d5",
300: "#e3f1bc",
400: "#cfe78a",
500: "#badc58",
600: "#a7c64f",
700: "#8ca542",
800: "#708435",
900: "#5b6c2b",
DEFAULT: "#badc58",
50: '#fcfdf7',
100: '#f8fcee',
200: '#eef6d5',
300: '#e3f1bc',
400: '#cfe78a',
500: '#badc58',
600: '#a7c64f',
700: '#8ca542',
800: '#708435',
900: '#5b6c2b',
DEFAULT: '#badc58'
},
grey: "#0d1117",
grey: '#0d1117',
mineshaft: {
50: "#f5f5f5",
100: "#ebebeb",
200: "#ccccce",
300: "#adaeb0",
400: "#707174",
500: "#323439",
600: "#2d2f33",
700: "#26272b",
800: "#1e1f22",
900: "#19191c",
DEFAULT: "#323439",
50: '#f5f5f5',
100: '#ebebeb',
200: '#ccccce',
300: '#adaeb0',
400: '#707174',
500: '#323439',
600: '#2d2f33',
700: '#26272b',
800: '#1e1f22',
900: '#19191c',
DEFAULT: '#323439'
},
chicago: {
50: "#f7f7f7",
100: "#efefef",
200: "#d6d6d7",
300: "#bdbebf",
400: "#8c8d8e",
500: "#5b5c5e",
600: "#525355",
700: "#444547",
800: "#373738",
900: "#2d2d2e",
DEFAULT: "#5b5c5e",
50: '#f7f7f7',
100: '#efefef',
200: '#d6d6d7',
300: '#bdbebf',
400: '#8c8d8e',
500: '#5b5c5e',
600: '#525355',
700: '#444547',
800: '#373738',
900: '#2d2d2e',
DEFAULT: '#5b5c5e'
},
bunker: {
50: "#f3f4f4",
100: "#e8e8e9",
200: "#c5c6c8",
300: "#a2a4a6",
400: "#5d5f64",
500: "#171b21",
600: "#15181e",
700: "#111419",
800: "#0e1014",
900: "#0b0d10",
DEFAULT: "#171B21",
50: '#f3f4f4',
100: '#e8e8e9',
200: '#c5c6c8',
300: '#a2a4a6',
400: '#5d5f64',
500: '#171b21',
600: '#15181e',
700: '#111419',
800: '#0e1014',
900: '#0b0d10',
DEFAULT: '#171B21'
},
githubblack: "#020409",
blue2: "#130f40",
blue1: "#3498db",
githubblack: '#020409',
blue2: '#130f40',
blue1: '#3498db',
yellow: {
50: "#fefcf3",
100: "#fef9e7",
200: "#fcf0c3",
300: "#f9e79f",
400: "#f5d657",
500: "#f1c40f",
600: "#d9b00e",
700: "#b5930b",
800: "#917609",
900: "#766007",
DEFAULT: "#f1c40f",
50: '#fefcf3',
100: '#fef9e7',
200: '#fcf0c3',
300: '#f9e79f',
400: '#f5d657',
500: '#f1c40f',
600: '#d9b00e',
700: '#b5930b',
800: '#917609',
900: '#766007',
DEFAULT: '#f1c40f'
},
red: {
50: "#fef6f5",
100: "#fdedec",
200: "#f9d2ce",
300: "#f5b7b1",
400: "#ee8277",
500: "#e74c3c",
600: "#d04436",
700: "#ad392d",
800: "#8b2e24",
900: "#71251d",
DEFAULT: "#e74c3c",
50: '#fef6f5',
100: '#fdedec',
200: '#f9d2ce',
300: '#f5b7b1',
400: '#ee8277',
500: '#e74c3c',
600: '#d04436',
700: '#ad392d',
800: '#8b2e24',
900: '#71251d',
DEFAULT: '#e74c3c'
},
orange: "#f39c12",
orange: '#f39c12',
green: {
50: "#f5fcf8",
100: "#eafaf1",
200: "#cbf2dc",
300: "#abebc6",
400: "#6ddb9c",
500: "#2ecc71",
600: "#29b866",
700: "#239955",
800: "#1c7a44",
900: "#176437",
DEFAULT: "#2ecc71",
},
},
50: '#f5fcf8',
100: '#eafaf1',
200: '#cbf2dc',
300: '#abebc6',
400: '#6ddb9c',
500: '#2ecc71',
600: '#29b866',
700: '#239955',
800: '#1c7a44',
900: '#176437',
DEFAULT: '#2ecc71'
}
}
},
keyframes: {
type: {
"0%": { transform: "translateX(0ch)" },
"5%, 10%": { transform: "translateX(1ch)" },
"15%, 20%": { transform: "translateX(2ch)" },
"25%, 30%": { transform: "translateX(3ch)" },
"35%, 40%": { transform: "translateX(4ch)" },
"45%, 50%": { transform: "translateX(5ch)" },
"55%, 60%": { transform: "translateX(6ch)" },
"65%, 70%": { transform: "translateX(7ch)" },
"75%, 80%": { transform: "translateX(8ch)" },
"85%, 90%": { transform: "translateX(9ch)" },
"95%, 100%": { transform: "translateX(11ch)" },
'0%': { transform: 'translateX(0ch)' },
'5%, 10%': { transform: 'translateX(1ch)' },
'15%, 20%': { transform: 'translateX(2ch)' },
'25%, 30%': { transform: 'translateX(3ch)' },
'35%, 40%': { transform: 'translateX(4ch)' },
'45%, 50%': { transform: 'translateX(5ch)' },
'55%, 60%': { transform: 'translateX(6ch)' },
'65%, 70%': { transform: 'translateX(7ch)' },
'75%, 80%': { transform: 'translateX(8ch)' },
'85%, 90%': { transform: 'translateX(9ch)' },
'95%, 100%': { transform: 'translateX(11ch)' }
},
fadeIn: {
"0%": { opacity: 0 },
"100%": { opacity: 1 },
'0%': { opacity: 0 },
'100%': { opacity: 1 }
},
popIn: {
from: {
opacity: 0,
transform: 'translate(-50%, -48%) scale(0.96)'
},
to: {
opacity: 1,
transform: 'translate(-50%, -50%) scale(1)'
}
},
spin: {
"0%": { transform: "rotate(0deg)" },
"40%": { transform: "rotate(360deg)" },
"100%": { transform: "rotate(360deg)" },
'0%': { transform: 'rotate(0deg)' },
'40%': { transform: 'rotate(360deg)' },
'100%': { transform: 'rotate(360deg)' }
},
bounce: {
"0%": { transform: "translateY(-90%)" },
"100%": { transform: "translateY(-100%)" },
'0%': { transform: 'translateY(-90%)' },
'100%': { transform: 'translateY(-100%)' }
},
wiggle: {
"0%, 100%": { transform: "rotate(-3deg)" },
"50%": { transform: "rotate(3deg)" },
'0%, 100%': { transform: 'rotate(-3deg)' },
'50%': { transform: 'rotate(3deg)' }
},
ping: {
"75%, 100%": {
transform: "scale(2)",
opacity: 0,
},
'75%, 100%': {
transform: 'scale(2)',
opacity: 0
}
},
popup: {
"0%": {
transform: "scale(0.2)",
opacity: 0,
'0%': {
transform: 'scale(0.2)',
opacity: 0
// transform: "translateY(120%)",
},
"100%": {
transform: "scale(1)",
opacity: 1,
'100%': {
transform: 'scale(1)',
opacity: 1
// transform: "translateY(100%)",
},
}
},
popright: {
"0%": {
transform: "translateX(-100%)",
},
"100%": {
transform: "translateX(0%)",
'0%': {
transform: 'translateX(-100%)'
},
'100%': {
transform: 'translateX(0%)'
}
},
popleft: {
"0%": {
transform: "translateX(100%)",
},
"100%": {
transform: "translateX(0%)",
'0%': {
transform: 'translateX(100%)'
},
'100%': {
transform: 'translateX(0%)'
}
},
popdown: {
"0%": {
transform: "scale(0.2)",
opacity: 0,
'0%': {
transform: 'scale(0.2)',
opacity: 0
// transform: "translateY(80%)",
},
"100%": {
transform: "scale(1)",
opacity: 1,
'100%': {
transform: 'scale(1)',
opacity: 1
// transform: "translateY(100%)",
},
},
}
}
},
animation: {
fadeIn: "fadeIn 1000ms ease-in-out",
bounce: "bounce 1000ms ease-in-out infinite",
spin: "spin 4000ms ease-in-out infinite",
cursor: "cursor .6s linear infinite alternate",
type: "type 2.7s ease-out .8s infinite alternate both",
"type-reverse": "type 1.8s ease-out 0s infinite alternate-reverse both",
wiggle: "wiggle 200ms ease-in-out",
ping: "ping 1000ms ease-in-out infinite",
popup: "popup 300ms ease-in-out",
popdown: "popdown 300ms ease-in-out",
popright: "popright 100ms ease-in-out",
popleft: "popleft 100ms ease-in-out",
fadeIn: 'fadeIn 100ms cubic-bezier(0.16, 1, 0.3, 1)',
bounce: 'bounce 1000ms ease-in-out infinite',
spin: 'spin 4000ms ease-in-out infinite',
cursor: 'cursor .6s linear infinite alternate',
type: 'type 2.7s ease-out .8s infinite alternate both',
'type-reverse': 'type 1.8s ease-out 0s infinite alternate-reverse both',
wiggle: 'wiggle 200ms ease-in-out',
ping: 'ping 1000ms ease-in-out infinite',
popup: 'popup 300ms ease-in-out',
popdown: 'popdown 300ms ease-in-out',
popright: 'popright 100ms ease-in-out',
popleft: 'popleft 100ms ease-in-out',
popIn: 'popIn 150ms cubic-bezier(0.16, 1, 0.3, 1);'
},
fontSize: {
xxxs: ".23rem",
xxs: ".5rem",
xs: ".75rem",
sm: ".875rem",
base: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem",
"6xl": "4rem",
"7xl": "5rem",
"8xl": "6rem",
"9xl": "7rem",
xxxs: '.23rem',
xxs: '.5rem',
xs: '.75rem',
sm: '.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '4rem',
'7xl': '5rem',
'8xl': '6rem',
'9xl': '7rem'
},
typography: (theme) => ({
DEFAULT: {
css: [
{
color: "var(--tw-prose-body)",
maxWidth: "65ch",
color: 'var(--tw-prose-body)',
maxWidth: '65ch',
'[class~="lead"]': {
color: "var(--tw-prose-lead)",
color: 'var(--tw-prose-lead)'
},
a: {
color: colors.gray[200],
textDecoration: "underline",
fontWeight: "500",
textDecoration: 'underline',
fontWeight: '500'
},
strong: {
color: colors.gray[200],
fontWeight: "600",
fontWeight: '600'
},
"a strong": {
color: "inherit",
'a strong': {
color: 'inherit'
},
"blockquote strong": {
color: "inherit",
'blockquote strong': {
color: 'inherit'
},
"thead th strong": {
color: "inherit",
'thead th strong': {
color: 'inherit'
},
ol: {
listStyleType: "decimal",
listStyleType: 'decimal'
},
'ol[type="A"]': {
listStyleType: "upper-alpha",
listStyleType: 'upper-alpha'
},
'ol[type="a"]': {
listStyleType: "lower-alpha",
listStyleType: 'lower-alpha'
},
'ol[type="A" s]': {
listStyleType: "upper-alpha",
listStyleType: 'upper-alpha'
},
'ol[type="a" s]': {
listStyleType: "lower-alpha",
listStyleType: 'lower-alpha'
},
'ol[type="I"]': {
listStyleType: "upper-roman",
listStyleType: 'upper-roman'
},
'ol[type="i"]': {
listStyleType: "lower-roman",
listStyleType: 'lower-roman'
},
'ol[type="I" s]': {
listStyleType: "upper-roman",
listStyleType: 'upper-roman'
},
'ol[type="i" s]': {
listStyleType: "lower-roman",
listStyleType: 'lower-roman'
},
'ol[type="1"]': {
listStyleType: "decimal",
listStyleType: 'decimal'
},
ul: {
listStyleType: "disc",
listStyleType: 'disc'
},
"ol > li::marker": {
fontWeight: "400",
color: "var(--tw-prose-counters)",
'ol > li::marker': {
fontWeight: '400',
color: 'var(--tw-prose-counters)'
},
"ul > li::marker": {
color: "var(--tw-prose-bullets)",
'ul > li::marker': {
color: 'var(--tw-prose-bullets)'
},
hr: {
borderColor: "var(--tw-prose-hr)",
borderTopWidth: 1,
borderColor: 'var(--tw-prose-hr)',
borderTopWidth: 1
},
blockquote: {
fontWeight: "500",
fontStyle: "italic",
color: "var(--tw-prose-quotes)",
borderLeftWidth: "0.25rem",
borderLeftColor: "var(--tw-prose-quote-borders)",
quotes: '"\\201C""\\201D""\\2018""\\2019"',
fontWeight: '500',
fontStyle: 'italic',
color: 'var(--tw-prose-quotes)',
borderLeftWidth: '0.25rem',
borderLeftColor: 'var(--tw-prose-quote-borders)',
quotes: '"\\201C""\\201D""\\2018""\\2019"'
},
"blockquote p:first-of-type::before": {
content: "open-quote",
'blockquote p:first-of-type::before': {
content: 'open-quote'
},
"blockquote p:last-of-type::after": {
content: "close-quote",
'blockquote p:last-of-type::after': {
content: 'close-quote'
},
h1: {
color: colors.gray[200],
fontWeight: "800",
fontWeight: '800'
},
"h1 strong": {
fontWeight: "900",
color: "inherit",
'h1 strong': {
fontWeight: '900',
color: 'inherit'
},
h2: {
color: colors.gray[200],
fontWeight: "700",
fontWeight: '700'
},
"h2 strong": {
fontWeight: "800",
color: "inherit",
'h2 strong': {
fontWeight: '800',
color: 'inherit'
},
h3: {
color: colors.gray[300],
fontWeight: "600",
fontWeight: '600'
},
"h3 strong": {
fontWeight: "700",
color: "inherit",
'h3 strong': {
fontWeight: '700',
color: 'inherit'
},
h4: {
color: colors.gray[400],
fontWeight: "600",
fontWeight: '600'
},
"h4 strong": {
fontWeight: "700",
color: "inherit",
'h4 strong': {
fontWeight: '700',
color: 'inherit'
},
// TODO: Figure out how to not need these, it's a merging issue
img: {},
"figure > *": {},
'figure > *': {},
figcaption: {
color: "var(--tw-prose-captions)",
color: 'var(--tw-prose-captions)'
},
code: {
color: "var(--tw-prose-code)",
fontWeight: "600",
color: 'var(--tw-prose-code)',
fontWeight: '600'
},
"code::before": {
content: '"`"',
'code::before': {
content: '"`"'
},
"code::after": {
content: '"`"',
'code::after': {
content: '"`"'
},
"a code": {
color: "inherit",
'a code': {
color: 'inherit'
},
"h1 code": {
color: "inherit",
'h1 code': {
color: 'inherit'
},
"h2 code": {
color: "inherit",
'h2 code': {
color: 'inherit'
},
"h3 code": {
color: "inherit",
'h3 code': {
color: 'inherit'
},
"h4 code": {
color: "inherit",
'h4 code': {
color: 'inherit'
},
"blockquote code": {
color: "inherit",
'blockquote code': {
color: 'inherit'
},
"thead th code": {
color: "inherit",
'thead th code': {
color: 'inherit'
},
pre: {
color: "var(--tw-prose-pre-code)",
color: 'var(--tw-prose-pre-code)',
backgroundColor: colors.gray[800],
overflowX: "auto",
fontWeight: "400",
overflowX: 'auto',
fontWeight: '400'
},
"pre code": {
backgroundColor: "transparent",
borderWidth: "0",
borderRadius: "0",
padding: "0",
fontWeight: "inherit",
color: "inherit",
fontSize: "inherit",
fontFamily: "inherit",
lineHeight: "inherit",
'pre code': {
backgroundColor: 'transparent',
borderWidth: '0',
borderRadius: '0',
padding: '0',
fontWeight: 'inherit',
color: 'inherit',
fontSize: 'inherit',
fontFamily: 'inherit',
lineHeight: 'inherit'
},
"pre code::before": {
content: "none",
'pre code::before': {
content: 'none'
},
"pre code::after": {
content: "none",
'pre code::after': {
content: 'none'
},
table: {
width: "100%",
tableLayout: "auto",
textAlign: "left",
width: '100%',
tableLayout: 'auto',
textAlign: 'left',
marginTop: em(32, 16),
marginBottom: em(32, 16),
marginBottom: em(32, 16)
},
thead: {
borderBottomWidth: "1px",
borderBottomColor: "var(--tw-prose-th-borders)",
borderBottomWidth: '1px',
borderBottomColor: 'var(--tw-prose-th-borders)'
},
"thead th": {
color: "var(--tw-prose-headings)",
fontWeight: "600",
verticalAlign: "bottom",
'thead th': {
color: 'var(--tw-prose-headings)',
fontWeight: '600',
verticalAlign: 'bottom'
},
"tbody tr": {
borderBottomWidth: "1px",
borderBottomColor: "var(--tw-prose-td-borders)",
'tbody tr': {
borderBottomWidth: '1px',
borderBottomColor: 'var(--tw-prose-td-borders)'
},
"tbody tr:last-child": {
borderBottomWidth: "0",
'tbody tr:last-child': {
borderBottomWidth: '0'
},
"tbody td": {
verticalAlign: "baseline",
'tbody td': {
verticalAlign: 'baseline'
},
tfoot: {
borderTopWidth: "1px",
borderTopColor: "var(--tw-prose-th-borders)",
},
"tfoot td": {
verticalAlign: "top",
borderTopWidth: '1px',
borderTopColor: 'var(--tw-prose-th-borders)'
},
'tfoot td': {
verticalAlign: 'top'
}
},
defaultModifiers.gray.css,
...defaultModifiers.base.css,
],
...defaultModifiers.base.css
]
},
...defaultModifiers,
}),
...defaultModifiers
})
},
plugins: [
plugin(function ({ addUtilities }) {
addUtilities({
".no-scrollbar::-webkit-scrollbar": {
display: "none",
},
".no-scrollbar": {
"-ms-overflow-style": "none",
"scrollbar-width": "none",
'.no-scrollbar::-webkit-scrollbar': {
display: 'none'
},
'.no-scrollbar': {
'-ms-overflow-style': 'none',
'scrollbar-width': 'none'
}
});
}),
require("@tailwindcss/typography"),
],
require('@tailwindcss/typography')
]
};