@universal-tennis/ui-shared 0.1.98 → 0.2.0

package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.js

@@ -1,73 +1,73 @@
-import React from 'react';
-import AvatarWithName from './AvatarWithName';
-// Default
-export default {
-    title: 'Molecules/AvatarWithName',
-};
-// Templates
-function AvatarWithNameTemplate(args) {
-    return React.createElement(AvatarWithName, Object.assign({}, args));
-}
-// Stories
-export const Default = AvatarWithNameTemplate.bind({});
-Default.args = {
-    playerName: "Julia Gulia",
-};
-export const WithImage = AvatarWithNameTemplate.bind({});
-WithImage.args = {
-    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
-    playerName: "Julia Gulia",
-};
-export const WithCustomTypography = AvatarWithNameTemplate.bind({});
-WithCustomTypography.args = {
-    playerName: "Julia Gulia",
-    avatarFontCategory: "secondary",
-    avatarFontSize: "large-medium",
-    fontCategory: "primary",
-    fontSize: "medium-book"
-};
-export const WithCustomAvatarSize = AvatarWithNameTemplate.bind({});
-WithCustomAvatarSize.args = {
-    playerName: "Julia Gulia",
-    avatarWidth: '26px',
-    avatarHeight: '26px',
-    avatarFontCategory: "primary",
-    avatarFontSize: "small-book",
-};
-export const WithAvatarOnly = AvatarWithNameTemplate.bind({});
-WithAvatarOnly.args = {
-    avatarOnly: true,
-    playerName: "Julia Gulia",
-};
-export const WithNoImage = AvatarWithNameTemplate.bind({});
-WithNoImage.args = {
-    imgSrc: '',
-    playerName: "Julia Gulia",
-};
-export const WithBrokenImage = AvatarWithNameTemplate.bind({});
-WithBrokenImage.args = {
-    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.pn',
-    playerName: "Julia Gulia",
-};
-export const WithLink = AvatarWithNameTemplate.bind({});
-WithLink.args = {
-    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
-    href: "https://www.reddit.com",
-    playerName: "Julia Gulia",
-};
-export const WithLowercaseName = AvatarWithNameTemplate.bind({});
-WithLowercaseName.args = {
-    playerName: "julia gulia",
-};
-export const WithLongName = AvatarWithNameTemplate.bind({});
-WithLongName.args = {
-    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
-    playerName: "Julia Guliauliauliauliauliauliauliauliauliaulia",
-};
-export const WithCustomMaxCharacterLimit = AvatarWithNameTemplate.bind({});
-WithCustomMaxCharacterLimit.args = {
-    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
-    playerName: "Julia Guliauliauliauliauliauliauliauliauliaulia",
-    maxCharacterLimit: 7
-};
+import React from 'react';
+import AvatarWithName from './AvatarWithName';
+// Default
+export default {
+    title: 'Molecules/AvatarWithName',
+};
+// Templates
+function AvatarWithNameTemplate(args) {
+    return React.createElement(AvatarWithName, Object.assign({}, args));
+}
+// Stories
+export const Default = AvatarWithNameTemplate.bind({});
+Default.args = {
+    playerName: "Julia Gulia",
+};
+export const WithImage = AvatarWithNameTemplate.bind({});
+WithImage.args = {
+    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+    playerName: "Julia Gulia",
+};
+export const WithCustomTypography = AvatarWithNameTemplate.bind({});
+WithCustomTypography.args = {
+    playerName: "Julia Gulia",
+    avatarFontCategory: "secondary",
+    avatarFontSize: "large-medium",
+    fontCategory: "primary",
+    fontSize: "medium-book"
+};
+export const WithCustomAvatarSize = AvatarWithNameTemplate.bind({});
+WithCustomAvatarSize.args = {
+    playerName: "Julia Gulia",
+    avatarWidth: '26px',
+    avatarHeight: '26px',
+    avatarFontCategory: "primary",
+    avatarFontSize: "small-book",
+};
+export const WithAvatarOnly = AvatarWithNameTemplate.bind({});
+WithAvatarOnly.args = {
+    avatarOnly: true,
+    playerName: "Julia Gulia",
+};
+export const WithNoImage = AvatarWithNameTemplate.bind({});
+WithNoImage.args = {
+    imgSrc: '',
+    playerName: "Julia Gulia",
+};
+export const WithBrokenImage = AvatarWithNameTemplate.bind({});
+WithBrokenImage.args = {
+    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.pn',
+    playerName: "Julia Gulia",
+};
+export const WithLink = AvatarWithNameTemplate.bind({});
+WithLink.args = {
+    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+    href: "https://www.reddit.com",
+    playerName: "Julia Gulia",
+};
+export const WithLowercaseName = AvatarWithNameTemplate.bind({});
+WithLowercaseName.args = {
+    playerName: "julia gulia",
+};
+export const WithLongName = AvatarWithNameTemplate.bind({});
+WithLongName.args = {
+    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+    playerName: "Julia Guliauliauliauliauliauliauliauliauliaulia",
+};
+export const WithCustomMaxCharacterLimit = AvatarWithNameTemplate.bind({});
+WithCustomMaxCharacterLimit.args = {
+    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+    playerName: "Julia Guliauliauliauliauliauliauliauliauliaulia",
+    maxCharacterLimit: 7
+};
 //# sourceMappingURL=AvatarWithName.stories.js.map

package/dist/stories/molecules/Cards/Cards.stories.d.ts

@@ -1,7 +1,7 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Contact: any;
-export declare const Team: any;
-export declare const Draw: any;
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Contact: any;
+export declare const Team: any;
+export declare const Draw: any;

package/dist/stories/molecules/Cards/Cards.stories.js

@@ -1,65 +1,65 @@
-import React from 'react';
-import ContactCard from './ContactCard';
-import TeamCard from './TeamCard';
-import DrawCard from './DrawCard';
-// Default
-export default {
-    title: 'Molecules/Cards',
-};
-// Templates
-function ContactCardTemplate(args) {
-    return React.createElement(ContactCard, Object.assign({}, args));
-}
-function TeamCardTemplate(args) {
-    return React.createElement(TeamCard, Object.assign({}, args));
-}
-function DrawCardTemplate(args) {
-    return (React.createElement("div", { style: { width: '372px' } },
-        React.createElement(DrawCard, Object.assign({}, args))));
-}
-// Stories
-export const Contact = ContactCardTemplate.bind({});
-Contact.args = {
-    name: "Jessica Carson",
-    phone: "+1 222-234-4567",
-    email: "test@sample.com"
-};
-export const Team = TeamCardTemplate.bind({});
-Team.args = {
-    title: 'team 1',
-    description: 'Captained by Lenny McDowell, Josh Palmer, and Michael Ballast. Requires a passcode for registration.'
-};
-export const Draw = DrawCardTemplate.bind({});
-Draw.args = {
-    options: [
-        {
-            id: 1,
-            label: 'Team 1',
-        },
-        {
-            id: 2,
-            label: 'Team 2',
-        }
-    ],
-    selectedOptions: {
-        optionOne: 1,
-        optionTwo: 2,
-    },
-    dateLabel: 'Dec 20 at 9:00am',
-    locationLabel: 'Taube Tennis Center',
-    emptyLabel: 'Select a team',
-    isManaging: false,
-    isSelectActive: true,
-    position1Team: {
-        points: 2,
-        name: 'Team Blue'
-    },
-    position2Team: {
-        points: 4,
-        name: 'Team Red'
-    },
-    isPosition1Winner: false,
-    isPosition2Winner: true,
-    onViewClick: () => { }
-};
+import React from 'react';
+import ContactCard from './ContactCard';
+import TeamCard from './TeamCard';
+import DrawCard from './DrawCard';
+// Default
+export default {
+    title: 'Molecules/Cards',
+};
+// Templates
+function ContactCardTemplate(args) {
+    return React.createElement(ContactCard, Object.assign({}, args));
+}
+function TeamCardTemplate(args) {
+    return React.createElement(TeamCard, Object.assign({}, args));
+}
+function DrawCardTemplate(args) {
+    return (React.createElement("div", { style: { width: '372px' } },
+        React.createElement(DrawCard, Object.assign({}, args))));
+}
+// Stories
+export const Contact = ContactCardTemplate.bind({});
+Contact.args = {
+    name: "Jessica Carson",
+    phone: "+1 222-234-4567",
+    email: "test@sample.com"
+};
+export const Team = TeamCardTemplate.bind({});
+Team.args = {
+    title: 'team 1',
+    description: 'Captained by Lenny McDowell, Josh Palmer, and Michael Ballast. Requires a passcode for registration.'
+};
+export const Draw = DrawCardTemplate.bind({});
+Draw.args = {
+    options: [
+        {
+            id: 1,
+            label: 'Team 1',
+        },
+        {
+            id: 2,
+            label: 'Team 2',
+        }
+    ],
+    selectedOptions: {
+        optionOne: 1,
+        optionTwo: 2,
+    },
+    dateLabel: 'Dec 20 at 9:00am',
+    locationLabel: 'Taube Tennis Center',
+    emptyLabel: 'Select a team',
+    isManaging: false,
+    isSelectActive: true,
+    position1Team: {
+        points: 2,
+        name: 'Team Blue'
+    },
+    position2Team: {
+        points: 4,
+        name: 'Team Red'
+    },
+    isPosition1Winner: false,
+    isPosition2Winner: true,
+    onViewClick: () => { }
+};
 //# sourceMappingURL=Cards.stories.js.map

package/dist/stories/molecules/Cards/ContactCard.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { ContactCardProps } from './sharedTypes';
-export default function ContactCard({ name, phone, email, onMessageClick, ...props }: ContactCardProps): JSX.Element;
+import React from 'react';
+import { ContactCardProps } from './sharedTypes';
+export default function ContactCard({ name, phone, email, onMessageClick, ...props }: ContactCardProps): React.JSX.Element;

package/dist/stories/molecules/Cards/ContactCard.js

@@ -1,39 +1,39 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
-import parsePhoneNumber from 'libphonenumber-js';
-import LocalPhoneOutlinedIcon from '@mui/icons-material/LocalPhoneOutlined';
-import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
-import Link from '@mui/material/Link';
-import Button from '../../atoms/Button/Button';
-import Typography from '../../atoms/Typography/Typography';
-import ChatIcon from '../../assets/icon-chat-blue.svg';
-import { StyledCard } from './shared';
-export default function ContactCard(_a) {
-    var { name, phone, email, onMessageClick } = _a, props = __rest(_a, ["name", "phone", "email", "onMessageClick"]);
-    const firstName = name.split(" ")[0];
-    const parsedNumber = parsePhoneNumber(phone || '');
-    const phoneNumber = parsedNumber === null || parsedNumber === void 0 ? void 0 : parsedNumber.formatInternational();
-    return (React.createElement(StyledCard, Object.assign({}, props),
-        React.createElement(Typography, { style: { marginBottom: '8px' }, category: "secondary", size: "medium-medium" }, name),
-        phoneNumber && (React.createElement(Link, { sx: { display: 'flex' }, mt: 1, fontSize: 14, href: `tel:${phone}` },
-            React.createElement(LocalPhoneOutlinedIcon, { fontSize: "small", sx: { mr: 1 } }),
-            React.createElement(Typography, { category: "secondary", size: "x-small-book" }, phoneNumber))),
-        email && (React.createElement(Link, { sx: { display: 'flex' }, mt: 1, fontSize: 14, href: `mailto:${email}` },
-            React.createElement(EmailOutlinedIcon, { fontSize: "small", sx: { mr: 1 } }),
-            React.createElement(Typography, { category: "secondary", size: "x-small-book" }, email))),
-        React.createElement(Button, { onClick: onMessageClick, category: "link", style: { marginTop: '8px' } },
-            React.createElement(React.Fragment, null,
-                React.createElement("img", { src: ChatIcon, alt: "message", style: { width: '20px' } }),
-                React.createElement(Typography, { style: { paddingLeft: '8px' }, category: "secondary", size: "x-small-book" }, `Message ${firstName}`)))));
-}
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import parsePhoneNumber from 'libphonenumber-js';
+import LocalPhoneOutlinedIcon from '@mui/icons-material/LocalPhoneOutlined';
+import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
+import Link from '@mui/material/Link';
+import Button from '../../atoms/Button/Button';
+import Typography from '../../atoms/Typography/Typography';
+import ChatIcon from '../../assets/icon-chat-blue.svg';
+import { StyledCard } from './shared';
+export default function ContactCard(_a) {
+    var { name, phone, email, onMessageClick } = _a, props = __rest(_a, ["name", "phone", "email", "onMessageClick"]);
+    const firstName = name.split(" ")[0];
+    const parsedNumber = parsePhoneNumber(phone || '');
+    const phoneNumber = parsedNumber === null || parsedNumber === void 0 ? void 0 : parsedNumber.formatInternational();
+    return (React.createElement(StyledCard, Object.assign({}, props),
+        React.createElement(Typography, { style: { marginBottom: '8px' }, category: "secondary", size: "medium-medium" }, name),
+        phoneNumber && (React.createElement(Link, { sx: { display: 'flex' }, mt: 1, fontSize: 14, href: `tel:${phone}` },
+            React.createElement(LocalPhoneOutlinedIcon, { fontSize: "small", sx: { mr: 1 } }),
+            React.createElement(Typography, { category: "secondary", size: "x-small-book" }, phoneNumber))),
+        email && (React.createElement(Link, { sx: { display: 'flex' }, mt: 1, fontSize: 14, href: `mailto:${email}` },
+            React.createElement(EmailOutlinedIcon, { fontSize: "small", sx: { mr: 1 } }),
+            React.createElement(Typography, { category: "secondary", size: "x-small-book" }, email))),
+        React.createElement(Button, { onClick: onMessageClick, category: "link", style: { marginTop: '8px' } },
+            React.createElement(React.Fragment, null,
+                React.createElement("img", { src: ChatIcon, alt: "message", style: { width: '20px' } }),
+                React.createElement(Typography, { style: { paddingLeft: '8px' }, category: "secondary", size: "x-small-book" }, `Message ${firstName}`)))));
+}
 //# sourceMappingURL=ContactCard.js.map

package/dist/stories/molecules/Cards/DrawCard.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { DrawCardProps } from "./sharedTypes";
-export default function DrawCard({ options, onChange, onEditClick, onViewClick, selectedOptions, dateLabel, locationLabel, emptyLabel, isDisabled, isSelectActive, isPosition1Winner, isPosition2Winner, isManaging, isScorelessMatch, position1Team, position2Team, isFlexWidth, ...props }: DrawCardProps): JSX.Element;
+import React from 'react';
+import { DrawCardProps } from "./sharedTypes";
+export default function DrawCard({ options, onChange, onEditClick, onViewClick, selectedOptions, dateLabel, locationLabel, emptyLabel, isDisabled, isSelectActive, isPosition1Winner, isPosition2Winner, isManaging, isScorelessMatch, position1Team, position2Team, isFlexWidth, ...props }: DrawCardProps): React.JSX.Element;

package/dist/stories/molecules/Cards/DrawCard.js

@@ -1,117 +1,117 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
-import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import { Divider, FormControl, InputLabel } from '@mui/material';
-import Button from '../../atoms/Button/Button';
-import Typography, { SECONDARY_SIZES_ENUM, CATEGORY_ENUM } from '../../atoms/Typography/Typography';
-const BYE_ROUND = "Bye";
-const StyledCard = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'isFlexWidth' && prop !== 'isSelectActive'
-})(({ isFlexWidth, isSelectActive }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    borderRadius: '4px',
-    padding: '16px 24px',
-    width: '100%',
-    minWidth: isFlexWidth ? 'auto' : '350px',
-    height: isSelectActive ? '235px' : '200px',
-    backgroundColor: 'var(--cool-grey-150)',
-    '&:hover': {
-        cursor: 'pointer'
-    },
-}));
-const BottomGrid = styled(Box)({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingTop: '32px',
-});
-const positions = {
-    ONE: 1,
-    TWO: 2,
-};
-export default function DrawCard(_a) {
-    var { options, onChange, onEditClick, onViewClick, selectedOptions, dateLabel, locationLabel, emptyLabel, isDisabled, isSelectActive, isPosition1Winner, isPosition2Winner, isManaging, isScorelessMatch, position1Team, position2Team, isFlexWidth } = _a, props = __rest(_a, ["options", "onChange", "onEditClick", "onViewClick", "selectedOptions", "dateLabel", "locationLabel", "emptyLabel", "isDisabled", "isSelectActive", "isPosition1Winner", "isPosition2Winner", "isManaging", "isScorelessMatch", "position1Team", "position2Team", "isFlexWidth"]);
-    const { optionOne, optionTwo } = selectedOptions || {};
-    const handleOnSelectionChange = (event, position) => {
-        const id = event.target.value;
-        if (onChange) {
-            onChange({ position, id });
-        }
-    };
-    return (React.createElement(StyledCard, Object.assign({ isFlexWidth: isFlexWidth, isSelectActive: isSelectActive }, props),
-        isSelectActive ? (React.createElement(React.Fragment, null,
-            React.createElement(FormControl, { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' } },
-                React.createElement(InputLabel, { id: "draw-card-select-top" }, emptyLabel),
-                React.createElement(Select, { sx: { width: '100%' }, labelId: "draw-card-select-top", id: "draw-card-select-top", label: emptyLabel, value: optionOne, disabled: isDisabled, onChange: (e) => handleOnSelectionChange(e, positions.ONE) },
-                    React.createElement(MenuItem, { value: "" }, "None"),
-                    options.map((option) => React.createElement(MenuItem, { key: option.id, value: option.id }, option.label)),
-                    React.createElement(MenuItem, { sx: { borderTop: '1px solid var(--cool-grey-500)' }, value: BYE_ROUND }, "Set bye"))),
-            React.createElement(Box, { pt: 2 }),
-            React.createElement(FormControl, { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' } },
-                React.createElement(InputLabel, { id: "draw-card-select-bot" }, emptyLabel),
-                React.createElement(Select, { sx: { width: '100%' }, labelId: "draw-card-select-bot", id: "draw-card-select-bot", label: emptyLabel, value: optionTwo, disabled: isDisabled, onChange: (e) => handleOnSelectionChange(e, positions.TWO) },
-                    React.createElement(MenuItem, { value: "" }, "None"),
-                    options.map((option) => React.createElement(MenuItem, { key: option.id, value: option.id }, option.label)),
-                    React.createElement(MenuItem, { sx: { borderTop: '1px solid var(--cool-grey-500)' }, value: BYE_ROUND }, "Set bye"))))) : (React.createElement(React.Fragment, null,
-            React.createElement(Box, { display: "flex", justifyContent: "space-between" },
-                React.createElement(Typography, { style: {
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        paddingRight: '4px',
-                        whiteSpace: 'nowrap'
-                    }, category: "secondary", size: isPosition1Winner ? 'medium-medium' : "medium-book" }, position1Team === null || position1Team === void 0 ? void 0 : position1Team.name),
-                React.createElement(Typography, { category: "secondary", size: isPosition1Winner ? 'medium-medium' : "medium-book" }, isScorelessMatch ? '-' : position1Team === null || position1Team === void 0 ? void 0 : position1Team.points)),
-            React.createElement(Divider, { sx: { my: 2 } }),
-            React.createElement(Box, { display: "flex", justifyContent: "space-between" },
-                React.createElement(Typography, { style: {
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        paddingRight: '4px',
-                        whiteSpace: 'nowrap'
-                    }, category: "secondary", size: isPosition2Winner ? 'medium-medium' : "medium-book" }, position2Team === null || position2Team === void 0 ? void 0 : position2Team.name),
-                React.createElement(Typography, { category: "secondary", size: isPosition2Winner ? 'medium-medium' : "medium-book" }, isScorelessMatch ? '-' : position2Team === null || position2Team === void 0 ? void 0 : position2Team.points)))),
-        React.createElement(BottomGrid, null,
-            React.createElement(Box, null,
-                React.createElement(Typography, { style: {
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        display: '-webkit-box',
-                        WebkitBoxOrient: 'vertical',
-                        WebkitLineClamp: 1,
-                    }, category: CATEGORY_ENUM.SECONDARY, size: SECONDARY_SIZES_ENUM.SmallBook }, dateLabel),
-                React.createElement(Typography, { style: {
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        display: '-webkit-box',
-                        WebkitBoxOrient: 'vertical',
-                        WebkitLineClamp: 1,
-                    }, category: CATEGORY_ENUM.SECONDARY, size: SECONDARY_SIZES_ENUM.SmallBook }, locationLabel)),
-            React.createElement(Box, { sx: { display: 'flex', justifyContent: 'end', width: '30%' } },
-                !!onEditClick && isManaging && (React.createElement(Button, { style: {
-                        display: 'flex',
-                        justifyContent: 'end'
-                    }, onClick: onEditClick, category: "link" },
-                    React.createElement(Typography, { category: CATEGORY_ENUM.SECONDARY, size: SECONDARY_SIZES_ENUM.XSmallMediumCap }, "Edit"))),
-                !!onEditClick && !!onViewClick && isManaging && (React.createElement(Typography, { sx: { color: 'var(--blue-grey-500)', padding: '0 8px' }, category: CATEGORY_ENUM.SECONDARY, size: SECONDARY_SIZES_ENUM.XSmallMediumCap }, "|")),
-                !!onViewClick && (React.createElement(Button, { onClick: onViewClick, category: "link", style: {
-                        display: 'flex',
-                        justifyContent: 'end',
-                        minWidth: 'auto'
-                    } },
-                    React.createElement(Typography, { category: CATEGORY_ENUM.SECONDARY, size: SECONDARY_SIZES_ENUM.XSmallMediumCap }, "View")))))));
-}
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import { Divider, FormControl, InputLabel } from '@mui/material';
+import Button from '../../atoms/Button/Button';
+import Typography, { SECONDARY_SIZES_ENUM, CATEGORY_ENUM } from '../../atoms/Typography/Typography';
+const BYE_ROUND = "Bye";
+const StyledCard = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'isFlexWidth' && prop !== 'isSelectActive'
+})(({ isFlexWidth, isSelectActive }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: '4px',
+    padding: '16px 24px',
+    width: '100%',
+    minWidth: isFlexWidth ? 'auto' : '350px',
+    height: isSelectActive ? '235px' : '200px',
+    backgroundColor: 'var(--cool-grey-150)',
+    '&:hover': {
+        cursor: 'pointer'
+    },
+}));
+const BottomGrid = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingTop: '32px',
+});
+const positions = {
+    ONE: 1,
+    TWO: 2,
+};
+export default function DrawCard(_a) {
+    var { options, onChange, onEditClick, onViewClick, selectedOptions, dateLabel, locationLabel, emptyLabel, isDisabled, isSelectActive, isPosition1Winner, isPosition2Winner, isManaging, isScorelessMatch, position1Team, position2Team, isFlexWidth } = _a, props = __rest(_a, ["options", "onChange", "onEditClick", "onViewClick", "selectedOptions", "dateLabel", "locationLabel", "emptyLabel", "isDisabled", "isSelectActive", "isPosition1Winner", "isPosition2Winner", "isManaging", "isScorelessMatch", "position1Team", "position2Team", "isFlexWidth"]);
+    const { optionOne, optionTwo } = selectedOptions || {};
+    const handleOnSelectionChange = (event, position) => {
+        const id = event.target.value;
+        if (onChange) {
+            onChange({ position, id });
+        }
+    };
+    return (React.createElement(StyledCard, Object.assign({ isFlexWidth: isFlexWidth, isSelectActive: isSelectActive }, props),
+        isSelectActive ? (React.createElement(React.Fragment, null,
+            React.createElement(FormControl, { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' } },
+                React.createElement(InputLabel, { id: "draw-card-select-top" }, emptyLabel),
+                React.createElement(Select, { sx: { width: '100%' }, labelId: "draw-card-select-top", id: "draw-card-select-top", label: emptyLabel, value: optionOne, disabled: isDisabled, onChange: (e) => handleOnSelectionChange(e, positions.ONE) },
+                    React.createElement(MenuItem, { value: "" }, "None"),
+                    options.map((option) => React.createElement(MenuItem, { key: option.id, value: option.id }, option.label)),
+                    React.createElement(MenuItem, { sx: { borderTop: '1px solid var(--cool-grey-500)' }, value: BYE_ROUND }, "Set bye"))),
+            React.createElement(Box, { pt: 2 }),
+            React.createElement(FormControl, { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' } },
+                React.createElement(InputLabel, { id: "draw-card-select-bot" }, emptyLabel),
+                React.createElement(Select, { sx: { width: '100%' }, labelId: "draw-card-select-bot", id: "draw-card-select-bot", label: emptyLabel, value: optionTwo, disabled: isDisabled, onChange: (e) => handleOnSelectionChange(e, positions.TWO) },
+                    React.createElement(MenuItem, { value: "" }, "None"),
+                    options.map((option) => React.createElement(MenuItem, { key: option.id, value: option.id }, option.label)),
+                    React.createElement(MenuItem, { sx: { borderTop: '1px solid var(--cool-grey-500)' }, value: BYE_ROUND }, "Set bye"))))) : (React.createElement(React.Fragment, null,
+            React.createElement(Box, { display: "flex", justifyContent: "space-between" },
+                React.createElement(Typography, { style: {
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        paddingRight: '4px',
+                        whiteSpace: 'nowrap'
+                    }, category: "secondary", size: isPosition1Winner ? 'medium-medium' : "medium-book" }, position1Team === null || position1Team === void 0 ? void 0 : position1Team.name),
+                React.createElement(Typography, { category: "secondary", size: isPosition1Winner ? 'medium-medium' : "medium-book" }, isScorelessMatch ? '-' : position1Team === null || position1Team === void 0 ? void 0 : position1Team.points)),
+            React.createElement(Divider, { sx: { my: 2 } }),
+            React.createElement(Box, { display: "flex", justifyContent: "space-between" },
+                React.createElement(Typography, { style: {
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        paddingRight: '4px',
+                        whiteSpace: 'nowrap'
+                    }, category: "secondary", size: isPosition2Winner ? 'medium-medium' : "medium-book" }, position2Team === null || position2Team === void 0 ? void 0 : position2Team.name),
+                React.createElement(Typography, { category: "secondary", size: isPosition2Winner ? 'medium-medium' : "medium-book" }, isScorelessMatch ? '-' : position2Team === null || position2Team === void 0 ? void 0 : position2Team.points)))),
+        React.createElement(BottomGrid, null,
+            React.createElement(Box, null,
+                React.createElement(Typography, { style: {
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        display: '-webkit-box',
+                        WebkitBoxOrient: 'vertical',
+                        WebkitLineClamp: 1,
+                    }, category: CATEGORY_ENUM.SECONDARY, size: SECONDARY_SIZES_ENUM.SmallBook }, dateLabel),
+                React.createElement(Typography, { style: {
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        display: '-webkit-box',
+                        WebkitBoxOrient: 'vertical',
+                        WebkitLineClamp: 1,
+                    }, category: CATEGORY_ENUM.SECONDARY, size: SECONDARY_SIZES_ENUM.SmallBook }, locationLabel)),
+            React.createElement(Box, { sx: { display: 'flex', justifyContent: 'end', width: '30%' } },
+                !!onEditClick && isManaging && (React.createElement(Button, { style: {
+                        display: 'flex',
+                        justifyContent: 'end'
+                    }, onClick: onEditClick, category: "link" },
+                    React.createElement(Typography, { category: CATEGORY_ENUM.SECONDARY, size: SECONDARY_SIZES_ENUM.XSmallMediumCap }, "Edit"))),
+                !!onEditClick && !!onViewClick && isManaging && (React.createElement(Typography, { sx: { color: 'var(--blue-grey-500)', padding: '0 8px' }, category: CATEGORY_ENUM.SECONDARY, size: SECONDARY_SIZES_ENUM.XSmallMediumCap }, "|")),
+                !!onViewClick && (React.createElement(Button, { onClick: onViewClick, category: "link", style: {
+                        display: 'flex',
+                        justifyContent: 'end',
+                        minWidth: 'auto'
+                    } },
+                    React.createElement(Typography, { category: CATEGORY_ENUM.SECONDARY, size: SECONDARY_SIZES_ENUM.XSmallMediumCap }, "View")))))));
+}
 //# sourceMappingURL=DrawCard.js.map